From ce94bb1599641fb4e24d520f1996e6dca50ba809 Mon Sep 17 00:00:00 2001 From: morgmart <98432065+morgmart@users.noreply.github.com> Date: Sun, 6 Sep 2026 22:23:48 -0700 Subject: [PATCH] desktop-new: delete the proving-ground dashboard It was meant to stress the design system by putting many decisions next to each other. It did surface one real finding - the neutral hover step is tuned for hovering a filled component, not a bare row, so the same token is too weak for a quiet button and too strong for a bare row - but the page was ~85% bespoke CSS routed around the shared components, so most of what it showed was its own scaffolding rather than the system. The app itself is the better proving ground. Removing this rather than carrying a mockup whose defects have to be triaged separately from the product's. Signed-off-by: morgmart <98432065+morgmart@users.noreply.github.com> --- desktop-new/src/app/routes/proving-ground.tsx | 6 - .../src/features/proving-ground/data.ts | 187 -------- .../proving-ground/ui/ProvingGroundPage.tsx | 401 ------------------ .../src/features/proving-ground/ui/parts.tsx | 187 -------- desktop-new/src/shared/styles/globals.css | 1 - .../src/shared/styles/proving-ground.css | 315 -------------- 6 files changed, 1097 deletions(-) delete mode 100644 desktop-new/src/app/routes/proving-ground.tsx delete mode 100644 desktop-new/src/features/proving-ground/data.ts delete mode 100644 desktop-new/src/features/proving-ground/ui/ProvingGroundPage.tsx delete mode 100644 desktop-new/src/features/proving-ground/ui/parts.tsx delete mode 100644 desktop-new/src/shared/styles/proving-ground.css diff --git a/desktop-new/src/app/routes/proving-ground.tsx b/desktop-new/src/app/routes/proving-ground.tsx deleted file mode 100644 index ff103a937a..0000000000 --- a/desktop-new/src/app/routes/proving-ground.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { createFileRoute } from "@tanstack/react-router"; -import { ProvingGroundPage } from "@/features/proving-ground/ui/ProvingGroundPage"; - -export const Route = createFileRoute("/proving-ground")({ - component: ProvingGroundPage, -}); diff --git a/desktop-new/src/features/proving-ground/data.ts b/desktop-new/src/features/proving-ground/data.ts deleted file mode 100644 index 1780500221..0000000000 --- a/desktop-new/src/features/proving-ground/data.ts +++ /dev/null @@ -1,187 +0,0 @@ -/** - * Fixture data for the proving ground. - * - * A fictional product — a fleet-monitoring dashboard — deliberately unrelated to - * Buzz. The point is to exercise the design system at the density and variety a - * real page has, without any of it becoming a claim about what Buzz looks like. - * Nothing here is a product decision; it is load for the tokens to carry. - */ - -export type Health = "healthy" | "degraded" | "failing" | "paused"; - -export type Region = { - id: string; - name: string; - code: string; - health: Health; - /** Requests per second, for the sparkline and the headline figure. */ - throughput: number; - /** Percentage, one decimal. */ - successRate: number; - latencyMs: number; - /** Twelve readings, oldest first. */ - history: number[]; -}; - -export type Incident = { - id: string; - title: string; - region: string; - severity: "critical" | "warning" | "info"; - openedAt: string; - assignee?: { name: string; initial: string }; - acknowledged: boolean; -}; - -export type Deploy = { - id: string; - service: string; - version: string; - status: "live" | "rolling" | "held" | "rolled-back"; - author: string; - at: string; -}; - -export const REGIONS: Region[] = [ - { - id: "use1", - name: "US East", - code: "use1", - health: "healthy", - throughput: 18420, - successRate: 99.98, - latencyMs: 42, - history: [12, 14, 13, 16, 18, 17, 19, 21, 20, 22, 24, 23], - }, - { - id: "usw2", - name: "US West", - code: "usw2", - health: "healthy", - throughput: 11260, - successRate: 99.94, - latencyMs: 51, - history: [9, 10, 11, 10, 12, 13, 12, 14, 13, 15, 14, 16], - }, - { - id: "euw1", - name: "EU West", - code: "euw1", - health: "degraded", - throughput: 8940, - successRate: 97.21, - latencyMs: 189, - history: [14, 13, 15, 14, 12, 11, 9, 8, 10, 9, 7, 8], - }, - { - id: "apse1", - name: "AP Southeast", - code: "apse1", - health: "failing", - throughput: 1180, - successRate: 71.44, - latencyMs: 842, - history: [11, 12, 10, 11, 9, 7, 5, 3, 2, 2, 1, 1], - }, - { - id: "sae1", - name: "SA East", - code: "sae1", - health: "paused", - throughput: 0, - successRate: 0, - latencyMs: 0, - history: [6, 6, 5, 6, 4, 3, 0, 0, 0, 0, 0, 0], - }, -]; - -export const INCIDENTS: Incident[] = [ - { - id: "INC-4821", - title: "Elevated 5xx from the ingest gateway", - region: "apse1", - severity: "critical", - openedAt: "14 min ago", - assignee: { name: "Priya Raman", initial: "P" }, - acknowledged: true, - }, - { - id: "INC-4820", - title: "Replica lag above threshold on the primary cluster", - region: "euw1", - severity: "warning", - openedAt: "38 min ago", - assignee: { name: "Tomas Lindqvist", initial: "T" }, - acknowledged: true, - }, - { - id: "INC-4819", - title: "Certificate expires in 6 days", - region: "usw2", - severity: "info", - openedAt: "2 hr ago", - acknowledged: false, - }, - { - id: "INC-4817", - title: "Queue depth climbing without a matching request increase", - region: "euw1", - severity: "warning", - openedAt: "5 hr ago", - assignee: { name: "Dani Okonkwo", initial: "D" }, - acknowledged: false, - }, -]; - -export const DEPLOYS: Deploy[] = [ - { - id: "d-9931", - service: "ingest-gateway", - version: "2026.9.4", - status: "rolling", - author: "Priya Raman", - at: "6 min ago", - }, - { - id: "d-9930", - service: "index-writer", - version: "2026.9.3", - status: "live", - author: "Marco Bellini", - at: "1 hr ago", - }, - { - id: "d-9929", - service: "query-planner", - version: "2026.9.3", - status: "held", - author: "Dani Okonkwo", - at: "3 hr ago", - }, - { - id: "d-9927", - service: "ingest-gateway", - version: "2026.9.2", - status: "rolled-back", - author: "Tomas Lindqvist", - at: "yesterday", - }, -]; - -/** Maps a health state to the status family that carries its meaning. */ -export const HEALTH_TONE: Record< - Health, - "success" | "warning" | "danger" | "neutral" -> = { - healthy: "success", - degraded: "warning", - failing: "danger", - paused: "neutral", -}; - -export const HEALTH_LABEL: Record = { - healthy: "Healthy", - degraded: "Degraded", - failing: "Failing", - paused: "Paused", -}; diff --git a/desktop-new/src/features/proving-ground/ui/ProvingGroundPage.tsx b/desktop-new/src/features/proving-ground/ui/ProvingGroundPage.tsx deleted file mode 100644 index e963473588..0000000000 --- a/desktop-new/src/features/proving-ground/ui/ProvingGroundPage.tsx +++ /dev/null @@ -1,401 +0,0 @@ -import { - IconActivity, - IconAlertTriangle, - IconChartDots, - IconChevronRight, - IconCloud, - IconMoon, - IconRocket, - IconSun, -} from "@tabler/icons-react"; -import { useState } from "react"; - -import { useColorScheme } from "@/shared/theme/useColorScheme"; -import { Avatar } from "@/shared/ui/Avatar"; -import { Button } from "@/shared/ui/Button"; -import { IconButton } from "@/shared/ui/IconButton"; -import { SearchField } from "@/shared/ui/SearchField"; -import { SegmentedNavigation } from "@/shared/ui/SegmentedNavigation"; - -import { DEPLOYS, HEALTH_TONE, INCIDENTS, REGIONS } from "../data"; -import { - HealthPill, - KeyValue, - Metric, - Panel, - Row, - Sparkline, - StatusPill, -} from "./parts"; - -/** - * The proving ground: a fictional fleet-monitoring dashboard. - * - * Deliberately not Buzz. Its job is to load the design system the way a real - * product does — many decisions adjacent to each other, at density, in both - * modes — and to be the surface a generated theme is judged on. A specimen page - * shows one component at a time on a backdrop the designer chose; this shows - * forty at once, which is where a missing role or a wrong neutral step appears. - * - * Built only from role tokens. If something here needs a value the system does - * not have, that is the finding. - */ - -const RANGES = [ - { value: "1h", label: "1 hour" }, - { value: "24h", label: "24 hours" }, - { value: "7d", label: "7 days" }, -] as const; - -const SEVERITY_TONE = { - critical: "danger", - warning: "warning", - info: "info", -} as const; - -const DEPLOY_TONE = { - live: "success", - rolling: "accent", - held: "warning", - "rolled-back": "danger", -} as const; - -const DEPLOY_LABEL = { - live: "Live", - rolling: "Rolling out", - held: "Held", - "rolled-back": "Rolled back", -} as const; - -export function ProvingGroundPage() { - const { scheme, toggle } = useColorScheme(); - const [range, setRange] = useState("24h"); - const [section, setSection] = useState("overview"); - const [query, setQuery] = useState(""); - - const openIncidents = INCIDENTS.length; - const failing = REGIONS.filter((r) => r.health === "failing").length; - - return ( -
- - -
-
-
-

Fleet

-

- Five regions, {openIncidents} open incidents - {failing > 0 ? `, ${failing} failing` : ""}. -

-
-
- - - - ) : ( - - ) - } - /> - -
-
- -
- - - - -
- -
-
- -
- {REGIONS.map((region) => ( -
-
-
- - {region.name} - - - {region.code} - -
- -
- -
- - - -
-
- ))} -
- - - - View all - - } - > - {INCIDENTS.map((incident) => ( - - - {incident.severity} - -
- - {incident.title} - - - {incident.id} ·{" "} - {incident.region} · {incident.openedAt} - -
- {incident.assignee ? ( - - ) : ( - - Unassigned - - )} - - ))} - -
- -
- - {DEPLOYS.map((deploy) => ( - -
- - {deploy.service} - - - {deploy.version} ·{" "} - {deploy.author} · {deploy.at} - -
- - {DEPLOY_LABEL[deploy.status]} - - - ))} - - - -
-
-
- - Progress - - - 2 of 5 regions - -
- {/* A determinate bar: inset track, accent fill. */} -
-
-
-
- -
- - - -
- -
- - - -
-
- -
-
-
-
- ); -} - -function NavItem({ - icon, - label, - id, - count, - current, - onSelect, -}: { - icon: React.ReactNode; - label: string; - id: string; - count?: number; - current: string; - onSelect: (id: string) => void; -}) { - const isCurrent = current === id; - return ( - - ); -} diff --git a/desktop-new/src/features/proving-ground/ui/parts.tsx b/desktop-new/src/features/proving-ground/ui/parts.tsx deleted file mode 100644 index 66833718e1..0000000000 --- a/desktop-new/src/features/proving-ground/ui/parts.tsx +++ /dev/null @@ -1,187 +0,0 @@ -import type { ReactNode } from "react"; - -import { type Health, HEALTH_LABEL, HEALTH_TONE } from "../data"; - -/** - * Pieces the proving-ground dashboard is assembled from. - * - * These are page-local on purpose. The shared layer earns a component when the - * product repeats one; this page exists to find out *which* things repeat, so - * putting its parts in `shared/ui` first would be guessing. Anything that turns - * out to be load-bearing graduates afterwards. - */ - -type Tone = "success" | "warning" | "danger" | "neutral" | "accent" | "info"; - -/** - * A status pill. Tint fill, coloured text — the tint arrangement from - * DESIGN.md, where a colour means something rather than carrying an action. - */ -export function StatusPill({ - tone, - children, -}: { - tone: Tone; - children: ReactNode; -}) { - return ( - - {children} - - ); -} - -export function HealthPill({ health }: { health: Health }) { - return ( - {HEALTH_LABEL[health]} - ); -} - -/** A page region. Panel surface, generous inset, no card-per-row inside. */ -export function Panel({ - title, - description, - action, - children, - padded = true, -}: { - title: string; - description?: string; - action?: ReactNode; - children: ReactNode; - /** False when the content is edge-to-edge rows that supply their own inset. */ - padded?: boolean; -}) { - return ( -
-
-
-

{title}

- {description ? ( -

{description}

- ) : null} -
- {action} -
-
- {children} -
-
- ); -} - -/** - * A headline figure with its label and change. - * - * Hierarchy comes from size, not colour: the number is `text-display`, the label - * is small and secondary. Only the change direction earns a colour, because a - * direction is a signal. - */ -export function Metric({ - label, - value, - unit, - change, - direction, -}: { - label: string; - value: string; - unit?: string; - change?: string; - direction?: "up" | "down" | "flat"; -}) { - return ( -
- {label} -
- {value} - {unit ? ( - {unit} - ) : null} -
- {change ? ( - - {change} - - ) : null} -
- ); -} - -/** - * A bar sparkline, drawn with divs rather than SVG. - * - * Deliberate: it inherits `currentColor` and the rem-based type scale, so it - * tracks the theme and the font-size preference without a redraw. Decorative — - * the figure beside it carries the information, so this is hidden from - * assistive technology rather than described. - */ -export function Sparkline({ - values, - tone = "accent", -}: { - values: number[]; - tone?: Tone; -}) { - const peak = Math.max(...values, 1); - // A reading's position in the window is part of its identity — the oldest - // sample is a different thing from the newest — so the key carries both. - const bars = values.map((value, index) => ({ - id: `${index}:${value}`, - height: `${Math.max((value / peak) * 100, 4)}%`, - })); - return ( - - ); -} - -/** A dense table row. Dividers, edge to edge — never a card per row. */ -export function Row({ - children, - interactive = false, -}: { - children: ReactNode; - interactive?: boolean; -}) { - return ( -
- {children} -
- ); -} - -export function KeyValue({ - label, - value, -}: { - label: string; - value: ReactNode; -}) { - return ( -
- {label} - {value} -
- ); -} diff --git a/desktop-new/src/shared/styles/globals.css b/desktop-new/src/shared/styles/globals.css index fed24b7798..0f91ac28df 100644 --- a/desktop-new/src/shared/styles/globals.css +++ b/desktop-new/src/shared/styles/globals.css @@ -3,7 +3,6 @@ @import "./typography.css"; @import "./components.css"; @import "./chips.css"; -@import "./proving-ground.css"; @import "./design-components.css"; @import "./product.css"; @import "./agents.css"; diff --git a/desktop-new/src/shared/styles/proving-ground.css b/desktop-new/src/shared/styles/proving-ground.css deleted file mode 100644 index 9da87f5796..0000000000 --- a/desktop-new/src/shared/styles/proving-ground.css +++ /dev/null @@ -1,315 +0,0 @@ -@layer components { - /** - * Proving-ground dashboard. - * - * A fictional product built only from role tokens, to find out whether the - * system holds up on a real page rather than on a specimen page. Specimen - * pages are honest but sympathetic — they show one component at a time, on a - * generous backdrop, at a size the designer chose. A dashboard puts forty - * decisions next to each other and is where a missing role shows up. - */ - - .dash-shell { - display: grid; - min-height: 100vh; - grid-template-columns: var(--size-navigator) minmax(0, 1fr); - background: var(--bg-app); - } - - /* Narrow: the navigator becomes a top strip rather than a drawer. There is no - drawer machinery here yet, and a horizontal strip is honest about that. */ - @media (max-width: 60rem) { - .dash-shell { - grid-template-columns: minmax(0, 1fr); - } - } - - .dash-nav { - display: flex; - flex-direction: column; - gap: var(--space-6); - padding: var(--space-panel-inset); - border-right: 1px solid var(--border-tertiary); - } - - @media (max-width: 60rem) { - .dash-nav { - flex-direction: row; - align-items: center; - gap: var(--space-4); - overflow-x: auto; - border-right: 0; - border-bottom: 1px solid var(--border-tertiary); - padding-block: var(--space-3); - } - } - - .dash-nav-group { - display: flex; - min-width: 0; - flex-direction: column; - gap: var(--space-1); - } - - @media (max-width: 60rem) { - .dash-nav-group { - flex-direction: row; - align-items: center; - gap: var(--space-1); - } - - /* The section labels are useful in a column and noise in a strip. */ - .dash-nav-label { - display: none; - } - } - - .dash-nav-label { - padding-inline: var(--space-2); - padding-block: var(--space-1); - color: var(--text-tertiary); - } - - .dash-nav-item { - display: flex; - align-items: center; - gap: var(--space-row-gap); - border: 0; - border-radius: var(--radius-row); - padding: var(--space-2) var(--space-2); - background: transparent; - color: var(--text-secondary); - font: inherit; - text-align: start; - white-space: nowrap; - cursor: pointer; - transition: - background-color var(--duration-state) var(--easing-state), - color var(--duration-state) var(--easing-state); - } - - .dash-nav-item:hover { - background: var(--bg-hover); - color: var(--text-primary); - } - - /* Selected is a tint plus coloured text — the tint arrangement. Weight is - never used to say "selected"; that is reserved for structure. */ - .dash-nav-item[aria-current="page"] { - background: var(--bg-accent-tint); - color: var(--text-accent); - } - - .dash-nav-item:focus-visible { - outline: 2px solid var(--ring-focus); - outline-offset: 2px; - } - - .dash-nav-count { - margin-inline-start: auto; - color: var(--text-tertiary); - font-variant-numeric: tabular-nums; - } - - @media (max-width: 60rem) { - .dash-nav-count { - margin-inline-start: var(--space-1); - } - } - - .dash-main { - display: flex; - min-width: 0; - flex-direction: column; - gap: var(--space-6); - padding: var(--space-panel-inset); - } - - .dash-topbar { - display: flex; - flex-wrap: wrap; - align-items: flex-start; - justify-content: space-between; - gap: var(--space-4); - } - - .dash-metric-grid { - display: grid; - gap: var(--space-4); - grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); - } - - .dash-metric { - display: flex; - flex-direction: column; - gap: var(--space-1); - min-width: 0; - } - - .dash-columns { - display: grid; - gap: var(--space-6); - grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); - align-items: start; - } - - @media (max-width: 72rem) { - .dash-columns { - grid-template-columns: minmax(0, 1fr); - } - } - - .dash-panel { - display: flex; - min-width: 0; - flex-direction: column; - overflow: hidden; - border: 1px solid var(--border-tertiary); - border-radius: var(--radius-panel); - background: var(--bg-panel); - box-shadow: var(--shadow-xs); - } - - .dash-panel-header { - display: flex; - align-items: flex-start; - justify-content: space-between; - gap: var(--space-4); - padding: var(--space-5) var(--space-panel-inset); - } - - .dash-panel-body[data-padded] { - padding: 0 var(--space-panel-inset) var(--space-panel-inset); - } - - /* Dense rows, edge to edge, separated by a line rather than by cards. */ - .dash-row { - display: flex; - align-items: center; - gap: var(--space-4); - padding: var(--space-3) var(--space-panel-inset); - border-top: 1px solid var(--border-tertiary); - } - - .dash-row[data-interactive] { - cursor: pointer; - transition: background-color var(--duration-state) var(--easing-state); - } - - .dash-row[data-interactive]:hover { - background: var(--bg-hover); - } - - .status-pill { - display: inline-flex; - align-items: center; - gap: var(--space-1); - border-radius: var(--radius-pill); - padding: 0.125rem var(--space-2); - white-space: nowrap; - } - - .status-pill[data-tone="success"] { - background: var(--bg-success-tint); - color: var(--text-success); - } - - .status-pill[data-tone="warning"] { - background: var(--bg-warning-tint); - color: var(--text-warning); - } - - .status-pill[data-tone="danger"] { - background: var(--bg-danger-tint); - color: var(--text-danger); - } - - .status-pill[data-tone="info"] { - background: var(--bg-info-tint); - color: var(--text-info); - } - - .status-pill[data-tone="accent"] { - background: var(--bg-accent-tint); - color: var(--text-accent); - } - - /* Paused is not a status colour: nothing is wrong, so a colour would teach - people to distrust the coloured ones. */ - .status-pill[data-tone="neutral"] { - background: var(--bg-inset); - color: var(--text-secondary); - } - - .dash-sparkline { - display: flex; - align-items: flex-end; - gap: 2px; - height: 2rem; - min-width: 4rem; - flex: 1 1 auto; - } - - .dash-sparkline-bar { - flex: 1 1 0; - min-width: 2px; - border-radius: 1px; - background: currentColor; - } - - .dash-sparkline[data-tone="success"] { - color: var(--bg-success); - } - - .dash-sparkline[data-tone="warning"] { - color: var(--bg-warning); - } - - .dash-sparkline[data-tone="danger"] { - color: var(--bg-danger); - } - - .dash-sparkline[data-tone="accent"] { - color: var(--bg-accent); - } - - .dash-sparkline[data-tone="neutral"] { - color: var(--border-secondary); - } - - .dash-region-grid { - display: grid; - gap: var(--space-4); - grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); - } - - /* A card carries no default fill. It sits on the panel and is grouped by a - hairline, so fill is free to mean one thing only: you are pointing at this. - Add `data-interactive` when a card is actually clickable. */ - .dash-region { - display: flex; - min-width: 0; - flex-direction: column; - gap: var(--space-3); - border: 1px solid var(--border-tertiary); - border-radius: var(--radius-control); - padding: var(--space-4); - } - - .dash-region[data-interactive] { - cursor: pointer; - transition: background-color var(--duration-state) var(--easing-state); - } - - .dash-region[data-interactive]:hover { - background: var(--bg-hover); - } - - @media (prefers-reduced-motion: reduce) { - .dash-nav-item, - .dash-row[data-interactive], - .dash-region[data-interactive] { - transition-duration: 0ms; - } - } -}