From f9095980ea113cfe72648be3c3398aa73f4d75e8 Mon Sep 17 00:00:00 2001 From: alowpoly Date: Thu, 16 Jul 2026 18:41:12 -0300 Subject: [PATCH] feat: redesign Checklist Oven dashboard --- dashboard/src/App.tsx | 6 +- .../src/components/AppHeader/AppHeader.tsx | 14 +- .../ChecklistDashboard/ChecklistDashboard.css | 247 ++++++++++++++++ .../ChecklistDashboard.test.mjs | 66 +++++ .../ChecklistDashboard/ChecklistDashboard.tsx | 270 ++++++++---------- dashboard/src/lib/checklist-progress-chart.js | 140 +++++++++ .../src/lib/checklist-progress-chart.test.mjs | 28 ++ scripts/verify-test-files.mjs | 2 + scripts/verify.mjs | 2 +- 9 files changed, 621 insertions(+), 154 deletions(-) create mode 100644 dashboard/src/components/ChecklistDashboard/ChecklistDashboard.css create mode 100644 dashboard/src/components/ChecklistDashboard/ChecklistDashboard.test.mjs create mode 100644 dashboard/src/lib/checklist-progress-chart.js create mode 100644 dashboard/src/lib/checklist-progress-chart.test.mjs diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx index e124a11..2513e60 100644 --- a/dashboard/src/App.tsx +++ b/dashboard/src/App.tsx @@ -2,7 +2,7 @@ import { useMemo, useState } from "react"; import { Clock3, ListChecks } from "lucide-react"; import { AppHeader, ChecklistDashboard, DashboardError, DifferentialTestingPage, EmptyState, FILTERS, Filters, NewOvenPage, ProjectGroup, RunBurnPage, StreamingDiff, VisualParityPage } from "@components"; import { useDashboardData } from "@hooks"; -import { currentSection, filterFromUrl, listHref, selectedBurnlist } from "@lib"; +import { currentSection, filterFromUrl, selectedBurnlist } from "@lib"; import type { Filter } from "@lib"; export function App() { @@ -23,11 +23,11 @@ export function App() { return (
- +
{section === "differential-testing" ? : section === "performance-tracing" ? : section === "streaming-diff" ? : section === "visual-parity" ? : section === "new-oven" ? : section === "run-burn" ? : selected ? ( error ? : loading && !progress ? : progress ? ( - + ) : ) : (
diff --git a/dashboard/src/components/AppHeader/AppHeader.tsx b/dashboard/src/components/AppHeader/AppHeader.tsx index 80dfe1a..fd545d6 100644 --- a/dashboard/src/components/AppHeader/AppHeader.tsx +++ b/dashboard/src/components/AppHeader/AppHeader.tsx @@ -1,10 +1,15 @@ import { Settings } from "lucide-react"; +import { formatTime, type ChecklistProgressData } from "@lib"; const HEADER_LINKS = [ { href: "/ovens/new", label: "New Oven", section: "new-oven" }, ] as const; -export function AppHeader({ section }: { section: string }) { +export function AppHeader({ detail, section }: { detail: ChecklistProgressData | null; section: string }) { + const title = section === "differential-testing" ? "Differential Testing" + : section === "performance-tracing" ? "Performance Tracing" + : section === "streaming-diff" ? "Streaming Diff" + : section === "visual-parity" ? "Visual Parity" : detail?.title; return (
@@ -12,12 +17,9 @@ export function AppHeader({ section }: { section: string }) { Burnlist - {section === "differential-testing" &&
Differential Testing
} - {section === "performance-tracing" &&
Performance Tracing
} - {section === "streaming-diff" &&
Streaming Diff
} - {section === "visual-parity" &&
Visual Parity
} + {title &&
{title}
}