@nurix/etna 0.19.3 → 0.19.4

package/data/harnesses/code/skills/design/data/operator-pack/exemplars/command-center.tsx

@@ -1,4 +1,5 @@
-// skills/design/data/operator-pack/exemplars/command-center.tsx — personality-invariant: composition anchor, not a look source.
+// skills/design/data/operator-pack/exemplars/command-center.tsx — reference render — imitate the ambition and the composition; the project's tokens supply the look.
+// Surface: baseline
 import { useMemo, useState } from "react";
 import { Activity, AlertTriangle, ArrowDown, ArrowUp, Hand, Radio, RefreshCw, ShieldAlert, Signal, Undo2, WifiOff, type LucideIcon } from "lucide-react";
 import { Button } from "@nurix/components/button";
@@ -44,9 +45,7 @@ function fmtWait(sec: number): string {
 function KpiTile({ label, value, unit, trend }: { label: string; value: string; unit?: string; trend?: number }) {
   return (
     <Statistics variant="card" size="md">
-      <StatisticsHeader>
-        <StatisticsHeading><StatisticsTitle size="sm">{label}</StatisticsTitle></StatisticsHeading>
-      </StatisticsHeader>
+      <StatisticsHeader><StatisticsHeading><StatisticsTitle size="sm">{label}</StatisticsTitle></StatisticsHeading></StatisticsHeader>
       <StatisticsMetric>
         <StatisticsValue className="tabular-nums">{value}</StatisticsValue>
         {unit ? <StatisticsUnit>{unit}</StatisticsUnit> : null}
@@ -68,16 +67,16 @@ function HealthTile({ panel }: { panel: HealthPanel }) {
   return (
     <Card className="flex flex-col gap-2 p-4">
       <div className="flex items-center justify-between">
-        <span className="text-sm font-medium text-foreground">{panel.label}</span>
-        <span className={`flex items-center gap-1 text-xs ${tone.text}`}><tone.Icon className="size-4" aria-hidden />{tone.word}</span>
+        <span className="text-small font-medium text-foreground">{panel.label}</span>
+        <span className={`flex items-center gap-1 text-caption ${tone.text}`}><tone.Icon className="size-4" aria-hidden />{tone.word}</span>
       </div>
       <div className="flex items-baseline gap-1">
-        <span className="text-xl font-semibold tabular-nums text-foreground">{panel.p95}</span>
-        <span className="text-xs text-muted-foreground">ms p95</span>
+        <span className="text-h3 tabular-nums text-foreground">{panel.p95}</span>
+        <span className="text-caption text-muted-foreground">ms p95</span>
       </div>
       <Sparkline points={panel.trend} type="line" height={28} className="w-full text-primary" />
-      {panel.status === "degraded" ? <p className="text-xs text-warning">Stale since {panel.since}; showing last known values.</p> : null}
-      {panel.status === "down" ? <p className="text-xs text-destructive">Probe timed out {panel.since} ago; retrying automatically.</p> : null}
+      {panel.status === "degraded" ? <p className="text-caption text-warning">Stale since {panel.since}; showing last known values.</p> : null}
+      {panel.status === "down" ? <p className="text-caption text-destructive">Probe timed out {panel.since} ago; retrying automatically.</p> : null}
     </Card>
   );
 }
@@ -87,17 +86,18 @@ function StreamPane({ events }: { events: StreamEvent[] }) {
     <Card className="flex min-h-0 flex-col">
       <div className="flex items-center gap-2 border-b border-border px-4 py-3">
         <Activity className="size-4 text-primary" aria-hidden />
-        <h2 className="text-sm font-semibold text-foreground">Live session stream</h2>
+        <h2 className="text-h3">Live session stream</h2>
         <Badge variant="outline" className="ml-auto tabular-nums">{events.length}</Badge>
       </div>
       <ScrollArea className="min-h-0 flex-1">
-        <ul aria-live="polite" aria-relevant="additions" className="divide-y divide-border">
+        {/* w-0 min-w-full pins the list to the ScrollArea viewport, so truncation paints at the visible edge */}
+        <ul aria-live="polite" aria-relevant="additions" className="w-0 min-w-full divide-y divide-border">
           {events.map((e) => (
-            <li key={e.id} className="flex items-baseline gap-3 px-4 py-2 text-sm">
+            <li key={e.id} className="flex items-baseline gap-3 px-4 py-2 text-small">
               <time className="shrink-0 font-mono tabular-nums text-muted-foreground">{e.at}</time>
               <span className="shrink-0 font-mono text-muted-foreground">{e.session}</span>
               <span className="shrink-0 text-foreground">{KIND_LABEL[e.kind]}</span>
-              <span className="truncate text-muted-foreground">{e.detail}</span>
+              <span className="min-w-0 flex-1 truncate text-muted-foreground" title={e.detail}>{e.detail}</span>
             </li>
           ))}
         </ul>
@@ -108,9 +108,9 @@ function StreamPane({ events }: { events: StreamEvent[] }) {
 // The escalation queue: a sortable, keyboard-actionable table of sessions flagged for human takeover.
 function EscalationTable({ rows, sort, onToggleSort, onTakeOver, onDismiss }: { rows: Escalation[]; sort: "asc" | "desc"; onToggleSort: () => void; onTakeOver: (e: Escalation) => void; onDismiss: (e: Escalation) => void }) {
   return (
-    <table className="w-full border-collapse text-sm">
+    <table className="w-full border-collapse text-small">
       <thead className="sticky top-0 bg-card">
-        <tr className="border-b border-border text-left text-muted-foreground">
+        <tr className="border-b border-border text-left text-caption text-muted-foreground">
           <th scope="col" className="px-3 py-2 font-medium">Session</th>
           <th scope="col" className="px-3 py-2 font-medium">Reason</th>
           <th scope="col" className="px-3 py-2 font-medium">Sentiment</th>
@@ -122,8 +122,8 @@ function EscalationTable({ rows, sort, onToggleSort, onTakeOver, onDismiss }: {
       </thead>
       <tbody>
         {rows.map((e) => (
-          <tr key={e.id} className="border-b border-border">
-            <td className="px-3 py-2"><span className="font-mono tabular-nums text-foreground">{e.session}</span></td>
+          <tr key={e.id} className="motion-lift border-b border-border">
+            <td className="min-w-[9ch] px-3 py-2"><span className="whitespace-nowrap font-mono tabular-nums text-foreground">{e.session}</span></td>
             <td className="px-3 py-2 text-muted-foreground"><span className="line-clamp-1">{e.reason}</span></td>
             <td className="px-3 py-2"><span className={SENTIMENT_TONE[e.sentiment]}>{e.sentiment}</span></td>
             <td className="px-3 py-2 text-right"><span className="font-mono tabular-nums text-foreground">{fmtWait(e.waitingSec)}</span></td>
@@ -159,12 +159,12 @@ export function CommandCenter({ state = "ready", panels = SEED_PANELS, events =
     return [...visible].sort((a, b) => (sort === "asc" ? a.waitingSec - b.waitingSec : b.waitingSec - a.waitingSec));
   }, [escalations, handled, sort]);
   return (
-    <main data-density-step="tighter" className="flex min-h-[100dvh] flex-col gap-4 bg-background p-4 text-foreground">
+    <main data-density-step="tighter" className="flex min-h-[100dvh] flex-col gap-4 bg-background p-4 font-sans text-foreground">
       <header className="flex flex-wrap items-center gap-3">
         <Radio className="size-5 text-primary" aria-hidden />
-        <h1 className="text-lg font-semibold">Voice operations bridge</h1>
-        <span className="flex items-center gap-1 text-sm text-success"><Signal className="size-4" aria-hidden />Live</span>
-        <span className="ml-auto flex items-center gap-2 text-muted-foreground">Updated <time className="font-mono tabular-nums">{updatedAt}</time><Kbd>/</Kbd>to search</span>
+        <h1 className="text-h1">Voice operations bridge</h1>
+        <span className="flex items-center gap-1 text-small text-success"><Signal className="size-4" aria-hidden />Live</span>
+        <span className="ml-auto flex items-center gap-2 text-small text-muted-foreground">Updated <time className="font-mono tabular-nums">{updatedAt}</time><Kbd>/</Kbd>to search</span>
       </header>
       {state === "loading" ? <CommandSkeleton /> : state === "error" ? (
         <div className="flex flex-1 items-center justify-center">
@@ -190,7 +190,7 @@ export function CommandCenter({ state = "ready", panels = SEED_PANELS, events =
             <Card className="flex min-h-0 flex-col">
               <div className="flex items-center gap-2 border-b border-border px-4 py-3">
                 <ShieldAlert className="size-4 text-primary" aria-hidden />
-                <h2 className="text-sm font-semibold text-foreground">Escalation queue</h2>
+                <h2 className="text-h3">Escalation queue</h2>
                 <Badge variant="outline" className="ml-auto tabular-nums">{rows.length}</Badge>
               </div>
               <ScrollArea className="min-h-0 flex-1">
@@ -203,7 +203,7 @@ export function CommandCenter({ state = "ready", panels = SEED_PANELS, events =
             </Card>
           </section>
           {handled ? (
-            <div role="status" className="flex items-center gap-3 rounded-md border border-border bg-muted px-4 py-2 text-sm text-foreground">
+            <div role="status" className="flex items-center gap-3 rounded-md border border-border bg-muted px-4 py-2 text-small text-foreground">
               <span>{handled.verb} session <span className="font-mono tabular-nums">{handled.session}</span>.</span>
               <Button size="sm" variant="ghost" className="ml-auto" onClick={() => setHandled(null)}><Undo2 className="size-4" aria-hidden />Undo</Button>
             </div>
@@ -216,7 +216,7 @@ export function CommandCenter({ state = "ready", panels = SEED_PANELS, events =
             <DialogTitle>Take over session {active?.session}?</DialogTitle>
             <DialogDescription>The AI agent will be muted and the caller connected to a human. The current turn is interrupted immediately.</DialogDescription>
           </DialogHeader>
-          <DialogBody className="text-sm text-muted-foreground">Flagged for: {active?.reason} Waiting {active ? fmtWait(active.waitingSec) : ""}.</DialogBody>
+          <DialogBody className="text-small text-muted-foreground">Flagged for: {active?.reason} Waiting {active ? fmtWait(active.waitingSec) : ""}.</DialogBody>
           <DialogFooter>
             <DialogClose asChild><Button variant="ghost" size="sm">Cancel</Button></DialogClose>
             <Button size="sm" onClick={() => { if (active) setHandled({ id: active.id, session: active.session, verb: "Took over" }); setActive(null); }}><Hand className="size-4" aria-hidden />Take over session</Button>

package/data/harnesses/code/skills/design/data/operator-pack/exemplars/create-edit.tsx

@@ -1,5 +1,5 @@
-// skills/design/data/operator-pack/exemplars/create-edit.tsx
-// personality-invariant: composition anchor, not a look source.
+// skills/design/data/operator-pack/exemplars/create-edit.tsx — reference render — imitate the ambition and the composition; the project's tokens supply the look.
+// Surface: brand-forward (delight-allowing)
 import { useState, type FormEvent, type ReactNode } from "react";
 import { TriangleAlert, CircleCheck, Plus, RotateCcw } from "lucide-react";
 import { Sheet, SheetContent, SheetHeader, SheetBody, SheetFooter, SheetTitle, SheetDescription } from "@nurix/components/sheet";
@@ -55,9 +55,9 @@ function validate(draft: AlertRuleDraft): FieldErrors {
 function Field({ id, label, hint, error, htmlFor, children }: { id: string; label: string; hint?: string; error?: string; htmlFor?: string; children: ReactNode }) {
   return (
     <div className="grid gap-1.5">
-      <Label id={`${id}-label`} htmlFor={htmlFor} className="text-sm font-medium">{label}</Label>
+      <Label id={`${id}-label`} htmlFor={htmlFor} className="text-small font-medium">{label}</Label>
       {children}
-      {error ? <p id={`${id}-error`} className="text-sm text-destructive">{error}</p> : hint ? <p className="text-sm text-muted-foreground">{hint}</p> : null}
+      {error ? <p id={`${id}-error`} className="text-small text-destructive">{error}</p> : hint ? <p className="text-small text-muted-foreground">{hint}</p> : null}
     </div>
   );
 }
@@ -104,10 +104,10 @@ export function CreateEditRuleSurface(props: CreateEditRuleSurfaceProps) {
   function reset() { setDraft({ ...BLANK_DRAFT }); setTouched({}); setAttempted(false); setSubmitStatus("idle"); setSubmitError(null); setPhase("form"); }
   return (
     <Sheet open={open} onOpenChange={(next) => { if (!next) onCancel(); }}>
-      <SheetContent side="right" size="lg" data-density-step="looser">
+      <SheetContent side="right" size="lg" data-density-step="looser" className="bg-surface-overlay font-sans shadow-overlay">
         <SheetHeader showDivider>
-          <SheetTitle>{mode === "create" ? "New alert rule" : "Edit alert rule"}</SheetTitle>
-          <SheetDescription>Watches one metric and notifies your channels when it crosses a threshold.</SheetDescription>
+          <SheetTitle className="text-h3">{mode === "create" ? "New alert rule" : "Edit alert rule"}</SheetTitle>
+          <SheetDescription className="text-small">Watches one metric and notifies your channels when it crosses a threshold.</SheetDescription>
         </SheetHeader>
         <SheetBody>
           {status === "loading" && (
@@ -118,8 +118,8 @@ export function CreateEditRuleSurface(props: CreateEditRuleSurfaceProps) {
           {status === "error" && (
             <div className="grid justify-items-center gap-4 py-8 text-center" role="alert">
               <TriangleAlert className="size-8 text-destructive" />
-              <p className="text-base font-semibold text-foreground">Couldn't load this rule</p>
-              <p className="max-w-sm text-sm text-muted-foreground">The alerting service didn't respond, so its current settings aren't available. Retry, or close and reopen it from the alert list.</p>
+              <p className="text-h3 text-foreground">Couldn't load this rule</p>
+              <p className="max-w-sm text-small text-muted-foreground">The alerting service didn't respond, so its current settings aren't available. Retry, or close and reopen it from the alert list.</p>
               <Button variant="outline" onClick={onRetryLoad}><RotateCcw className="size-4" /> Retry</Button>
             </div>
           )}
@@ -168,7 +168,7 @@ export function CreateEditRuleSurface(props: CreateEditRuleSurfaceProps) {
               <Field id="channels" label="Notify channels" error={show("channelIds")}>
                 <div className="grid gap-2" role="group" aria-labelledby="channels-label">
                   {channels.map((c) => (
-                    <Label key={c.id} className="flex items-center gap-3 text-sm font-normal">
+                    <Label key={c.id} className="flex items-center gap-3 text-small font-normal">
                       <Checkbox checked={draft.channelIds.includes(c.id)} onCheckedChange={(v) => { patch("channelIds", v ? [...draft.channelIds, c.id] : draft.channelIds.filter((id) => id !== c.id)); blur("channelIds"); }} />
                       <span className="text-foreground">{c.label}</span>
                       <Badge variant="outline" className="ml-auto">{c.kind}</Badge>
@@ -179,28 +179,28 @@ export function CreateEditRuleSurface(props: CreateEditRuleSurfaceProps) {
               <Field id="enabled" label="Enable on save">
                 <div className="flex items-center gap-3">
                   <Switch checked={draft.enabled} aria-labelledby="enabled-label" onCheckedChange={(v) => patch("enabled", v)} />
-                  <span className="text-sm text-muted-foreground">{draft.enabled ? "Starts evaluating as soon as it's created." : "Saved paused, enable it later from the alert list."}</span>
+                  <span className="text-small text-muted-foreground">{draft.enabled ? "Starts evaluating as soon as it's created." : "Saved paused, enable it later from the alert list."}</span>
                 </div>
               </Field>
             </form>
           )}
           {isForm && phase === "preview" && (
             <div className="grid gap-4">
-              <p className="text-base font-semibold text-foreground">Review before creating</p>
-              <dl className="grid gap-3 text-sm">
+              <p className="text-h3 text-foreground">Review before creating</p>
+              <dl className="grid gap-3 text-small">
                 <PreviewRow label="Rule"><span className="font-medium text-foreground">{draft.name}</span></PreviewRow>
                 <PreviewRow label="Condition">{metric?.label} goes {draft.direction} <span className="font-mono tabular-nums">{draft.threshold}</span> {metric?.unit}</PreviewRow>
                 <PreviewRow label="Channels">{selectedChannels.map((c) => c.label).join(", ")}</PreviewRow>
                 <PreviewRow label="State">{draft.enabled ? "Enabled on create" : "Created paused"}</PreviewRow>
               </dl>
-              <p className="text-sm text-muted-foreground">A rule that pages is hard to unsend, so confirm the scope before creating.</p>
+              <p className="text-small text-muted-foreground">A rule that pages is hard to unsend, so confirm the scope before creating.</p>
             </div>
           )}
           {isForm && phase === "success" && (
             <div className="grid justify-items-center gap-4 py-8 text-center" role="status" aria-live="polite">
-              <CircleCheck className="size-8 text-success" />
-              <p className="text-base font-semibold text-foreground">Alert rule created</p>
-              <p className="max-w-sm text-sm text-muted-foreground">{draft.name} is {draft.enabled ? "live and evaluating now" : "saved and paused"}. It notifies <span className="tabular-nums">{selectedChannels.length}</span> channel{selectedChannels.length === 1 ? "" : "s"} when it fires.</p>
+              <span className="grid size-14 place-items-center rounded-full bg-surface-raised text-success shadow-md"><CircleCheck className="size-8" /></span>
+              <p className="text-h3 text-foreground">Alert rule created</p>
+              <p className="max-w-sm text-small text-muted-foreground">{draft.name} is {draft.enabled ? "live and evaluating now" : "saved and paused"}. It notifies <span className="tabular-nums">{selectedChannels.length}</span> channel{selectedChannels.length === 1 ? "" : "s"} when it fires.</p>
               <div className="flex items-center gap-2">
                 <Button variant="outline" onClick={onCancel}>View rule</Button>
                 <Button onClick={reset}>Create another rule</Button>
@@ -211,7 +211,7 @@ export function CreateEditRuleSurface(props: CreateEditRuleSurfaceProps) {
         {isForm && phase !== "success" && (
           <SheetFooter showDivider>
             <div className="flex w-full items-center justify-between gap-4">
-              <p className="text-sm text-muted-foreground" role="status" aria-live="polite">
+              <p className="text-small text-muted-foreground" role="status" aria-live="polite">
                 {busy ? "Creating rule" : phase === "form" ? <>Press <Kbd size="sm">Enter</Kbd> to review before creating.</> : "Nothing is created until you confirm."}
               </p>
               <div className="flex items-center gap-2">

package/data/harnesses/code/skills/design/data/operator-pack/exemplars/dashboard.tsx

@@ -1,19 +1,18 @@
-// skills/design/data/operator-pack/exemplars/dashboard.tsx — personality-invariant: composition anchor, not a look source.
+// skills/design/data/operator-pack/exemplars/dashboard.tsx — reference render — imitate the ambition and the composition; the project's tokens supply the look.
+// Surface: brand-forward (delight-allowing)
 import { useMemo, useState, type ReactNode } from "react";
-import {
-  Activity, ArrowDown, ArrowUp, ArrowUpRight, ChevronsUpDown, CircleAlert,
-  Clock, Database, Plug, RefreshCw, TriangleAlert,
-} from "lucide-react";
+import { Activity, ArrowDown, ArrowUp, ArrowUpRight, ChevronsUpDown, CircleAlert, Clock, Database, Plug, RefreshCw, TriangleAlert } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "@nurix/components/alert";
 import { Badge } from "@nurix/components/badge";
 import { Button } from "@nurix/components/button";
 import { EmptyState } from "@nurix/components/empty-state";
 import { Skeleton } from "@nurix/components/skeleton";
+import { BarGraph, type BarGraphData } from "@nurix/components/bar-graph";
+import { LineGraph, type LineGraphData } from "@nurix/components/line-graph";
 import {
   Statistics, StatisticsActions, StatisticsCaption, StatisticsDescription, StatisticsFooter,
-  StatisticsHeader, StatisticsHeading, StatisticsIcon, StatisticsLegend, StatisticsLegendItem,
-  StatisticsLink, StatisticsMetric, StatisticsSegmentedBar, StatisticsSparkline, StatisticsTitle,
-  StatisticsTrend, StatisticsUnit, StatisticsValue, type StatisticsSegment,
+  StatisticsHeader, StatisticsHeading, StatisticsIcon, StatisticsMetric,
+  StatisticsSparkline, StatisticsTitle, StatisticsTrend, StatisticsUnit, StatisticsValue,
 } from "@nurix/components/statistics";
 
 type SurfaceStatus = "loading" | "ready" | "empty" | "error";
@@ -34,82 +33,75 @@ const HEALTH: Record<Health, { label: string; className: string; icon: ReactNode
 };
 // Signed percentage for a KPI trend chip.
 const formatPct = (n: number) => `${n > 0 ? "+" : ""}${n.toFixed(1)}%`;
-// KPI stat card: headline value, trend, and a per-metric sparkline; the degraded metric shows a cached marker instead.
+// KPI stat card: headline value, trend, and a per-metric sparkline on a raised (elevation.md) panel; the degraded metric shows a cached marker instead.
 function KpiCard({ kpi }: { kpi: KpiDatum }) {
   return (
-    <Statistics variant="card" size="md" className="gap-3">
+    <Statistics variant="card" size="md" className="gap-3 bg-surface-raised shadow-md">
       <StatisticsHeader>
         <StatisticsHeading><StatisticsTitle size="sm">{kpi.label}</StatisticsTitle></StatisticsHeading>
-        <StatisticsActions>{kpi.stale
-          ? <Badge variant="outline" className="gap-1 text-warning"><Clock className="size-3" aria-hidden /> Cached</Badge>
-          : <StatisticsIcon variant="primary" tone="soft" size="sm"><Activity className="size-4" aria-hidden /></StatisticsIcon>}</StatisticsActions>
+        <StatisticsActions>{kpi.stale ? <Badge variant="outline" className="gap-1 text-warning"><Clock className="size-3" aria-hidden /> Cached</Badge> : <StatisticsIcon variant="primary" tone="soft" size="sm"><Activity className="size-4" aria-hidden /></StatisticsIcon>}</StatisticsActions>
       </StatisticsHeader>
       <StatisticsMetric>
         <StatisticsValue className="tabular-nums">{kpi.value}{/* mock */}</StatisticsValue>
         {kpi.unit ? <StatisticsUnit>{kpi.unit}</StatisticsUnit> : null}
         {kpi.trend !== 0 ? <StatisticsTrend value={kpi.trend} invert={kpi.invertTrend} pill format={formatPct} /> : null}
       </StatisticsMetric>
-      <StatisticsFooter>
-        {kpi.stale
-          ? <StatisticsCaption className="text-warning">Last cached at 14:12</StatisticsCaption>
-          : <StatisticsSparkline data={kpi.spark} color={kpi.chart} height={28} className="w-full" />}
-      </StatisticsFooter>
+      <StatisticsFooter>{kpi.stale ? <StatisticsCaption className="text-warning">Last cached at 14:12</StatisticsCaption> : <StatisticsSparkline data={kpi.spark} color={kpi.chart} height={28} className="w-full" />}</StatisticsFooter>
     </Statistics>
   );
 }
+// The focal hero: the one display-step metric this surface exists to answer, on an elevation.lg raised panel with an optional wash tint, its trend read through the chart tokens.
+function ThroughputHero({ total, trend }: { total: string; trend: LineGraphData }) {
+  return (
+    <section aria-labelledby="hero-heading" className="flex flex-col gap-4 rounded-xl bg-surface-raised p-6 shadow-lg lg:flex-row lg:items-center lg:justify-between" style={{ backgroundImage: "var(--wash-surface, transparent)" }}>
+      <div className="flex flex-col gap-1">
+        <h2 id="hero-heading" className="text-small font-medium text-muted-foreground">Records ingested today</h2>
+        <div className="flex items-baseline gap-3"><span className="text-display tabular-nums text-foreground">{total}{/* mock */}</span><span className="inline-flex items-center gap-1 text-success"><ArrowUp className="size-4" aria-hidden /><span className="tabular-nums">6.4%</span></span></div>
+        <p className="text-body text-muted-foreground">Across every connector, versus the same window yesterday.</p>
+      </div>
+      <div className="min-w-0 lg:w-1/2"><LineGraph data={trend} height="sm" filled colors={["var(--chart-1)", "var(--chart-2)"]} /></div>
+    </section>
+  );
+}
 // One sortable, right-aligned numeric column header carrying its aria-sort state and a keyboard-native toggle.
 function SortHeader({ label, sortKey, active, dir, onSort }: { label: string; sortKey: SortKey; active: boolean; dir: SortDir; onSort: (k: SortKey) => void }) {
   const ariaSort: "none" | "ascending" | "descending" = active ? (dir === "asc" ? "ascending" : "descending") : "none";
   return (
     <th scope="col" aria-sort={ariaSort} className="py-2 pr-4 text-right font-medium">
-      <button type="button" onClick={() => onSort(sortKey)} aria-label={`Sort by ${label}`}
-        className="inline-flex items-center gap-1 rounded text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
-        {label}
-        {active ? (dir === "asc" ? <ArrowUp className="size-3" aria-hidden /> : <ArrowDown className="size-3" aria-hidden />) : <ChevronsUpDown className="size-3" aria-hidden />}
+      <button type="button" onClick={() => onSort(sortKey)} aria-label={`Sort by ${label}`} className="inline-flex items-center gap-1 rounded text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+        {label}{active ? (dir === "asc" ? <ArrowUp className="size-3" aria-hidden /> : <ArrowDown className="size-3" aria-hidden />) : <ChevronsUpDown className="size-3" aria-hidden />}
       </button>
     </th>
   );
 }
-// The connectors breakdown: a bounded top-volume table with sortable numeric columns and per-row health.
+// The connectors breakdown: a bounded top-volume table on a raised (elevation.md) panel, sortable numeric columns, per-row health.
 function ConnectorsTile({ connectors }: { connectors: ConnectorRow[] }) {
   const [sortKey, setSortKey] = useState<SortKey>("records");
   const [sortDir, setSortDir] = useState<SortDir>("desc");
   const rows = useMemo(() => [...connectors].sort((a, b) => (sortDir === "asc" ? a[sortKey] - b[sortKey] : b[sortKey] - a[sortKey])), [connectors, sortKey, sortDir]);
   const onSort = (k: SortKey) => k === sortKey ? setSortDir((d) => (d === "asc" ? "desc" : "asc")) : (setSortKey(k), setSortDir("desc"));
   return (
-    <Statistics variant="outline" className="gap-4">
+    <Statistics variant="outline" className="gap-4 bg-surface-raised shadow-md">
       <StatisticsHeader>
-        <StatisticsHeading>
-          <StatisticsTitle size="sm">Connectors by volume</StatisticsTitle>
-          <StatisticsDescription>Top sources in the selected range.</StatisticsDescription>
-        </StatisticsHeading>
-        <StatisticsActions>
-          <StatisticsLink href="/connectors" className="inline-flex items-center gap-1 text-primary">All connectors <ArrowUpRight className="size-4" aria-hidden /></StatisticsLink>
-        </StatisticsActions>
+        <StatisticsHeading><StatisticsTitle size="sm">Connectors by volume</StatisticsTitle><StatisticsDescription>Top sources in the selected range.</StatisticsDescription></StatisticsHeading>
       </StatisticsHeader>
       <div className="overflow-x-auto">
-        <table className="w-full text-sm">
+        <table className="w-full text-small">
           <thead>
-            <tr className="border-b border-border text-left text-muted-foreground">
+            <tr className="border-b border-border text-left text-caption text-muted-foreground">
               <th scope="col" className="py-2 pr-4 font-medium">Connector</th>
               <SortHeader label="Records" sortKey="records" active={sortKey === "records"} dir={sortDir} onSort={onSort} />
               <SortHeader label="Error rate" sortKey="errorRate" active={sortKey === "errorRate"} dir={sortDir} onSort={onSort} />
-              <th scope="col" className="py-2 pl-4 font-medium">Health</th>
+              <th scope="col" className="whitespace-nowrap py-2 pl-2 font-medium">Health</th>
             </tr>
           </thead>
           <tbody>
             {rows.map((c) => (
               <tr key={c.id} className="border-b border-border last:border-0">
-                <td className="py-2 pr-4">
-                  <div className="flex items-center gap-2">
-                    <Database className="size-4 shrink-0 text-muted-foreground" aria-hidden />
-                    <span className="truncate font-medium text-foreground">{c.name}</span>
-                    <span className="shrink-0 font-mono text-muted-foreground">{c.kind}</span>
-                  </div>
-                </td>
+                <td className="py-2 pr-4"><div className="flex items-center gap-2"><Database className="size-4 shrink-0 text-muted-foreground" aria-hidden /><span className="truncate font-medium text-foreground">{c.name}</span><span className="shrink-0 font-mono text-muted-foreground">{c.kind}</span></div></td>
                 <td className="py-2 pr-4 text-right tabular-nums">{c.records.toLocaleString()}</td>
                 <td className="py-2 pr-4 text-right tabular-nums">{c.errorRate.toFixed(2)}%</td>
-                <td className="py-2 pl-4"><span className={`inline-flex items-center gap-1 ${HEALTH[c.health].className}`}>{HEALTH[c.health].icon}{HEALTH[c.health].label}</span></td>
+                <td className="py-2 pl-2"><span className={`inline-flex items-center gap-1 whitespace-nowrap ${HEALTH[c.health].className}`}>{HEALTH[c.health].icon}{HEALTH[c.health].label}</span></td>
               </tr>
             ))}
           </tbody>
@@ -118,63 +110,65 @@ function ConnectorsTile({ connectors }: { connectors: ConnectorRow[] }) {
     </Statistics>
   );
 }
-// Loading skeleton mirroring the real shape: four KPI cards over two breakdown tiles.
+// The ingest-health strip: per-day request outcome, its status roles wired through the BarGraph map; the graph and tally fill the card.
+function HealthStripTile({ days }: { days: BarGraphData[] }) {
+  const tally = days.reduce((acc, d) => { const s = d.bar[0]?.status ?? "empty"; acc[s] = (acc[s] ?? 0) + 1; return acc; }, {} as Record<string, number>);
+  return (
+    <Statistics variant="outline" className="gap-4 bg-surface-raised shadow-md">
+      <StatisticsHeader>
+        <StatisticsHeading><StatisticsTitle size="sm">Ingest health</StatisticsTitle><StatisticsDescription>Daily request outcome over the last twelve days.</StatisticsDescription></StatisticsHeading>
+        <StatisticsActions><a href="/incidents" className="inline-flex items-center gap-1 text-caption text-primary">Incidents <ArrowUpRight className="size-4" aria-hidden /></a></StatisticsActions>
+      </StatisticsHeader>
+      <div className="flex-1"><BarGraph data={days} height="lg" roundedCorners="all" colors={{ success: "var(--success)", degraded: "var(--warning)", error: "var(--destructive)", info: "var(--primary)", empty: "var(--muted-foreground)" }} /></div>
+      <StatisticsFooter>
+        <StatisticsCaption className="flex flex-wrap items-center gap-3 tabular-nums">
+          <span className="text-success">{tally.success ?? 0} healthy</span><span className="text-warning">{tally.degraded ?? 0} degraded</span><span className="text-destructive">{tally.error ?? 0} errored</span><span>across {days.length} days</span>
+        </StatisticsCaption>
+      </StatisticsFooter>
+    </Statistics>
+  );
+}
+// Loading skeleton mirroring the real shape: a hero band, four KPI cards, then two breakdown tiles.
 function DashboardSkeleton() {
   return (
     <div className="flex flex-col gap-6" aria-hidden>
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
-        {[0, 1, 2, 3].map((i) => (
-          <div key={i} className="flex flex-col gap-3 rounded-lg border border-border p-4">
-            <Skeleton className="h-4 w-24" /><Skeleton className="h-8 w-32" /><Skeleton className="h-7 w-full" />
-          </div>
-        ))}
-      </div>
-      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        {[0, 1].map((i) => (
-          <div key={i} className="flex flex-col gap-4 rounded-lg border border-border p-4">
-            <Skeleton className="h-4 w-40" /><Skeleton className="h-16 w-full" /><Skeleton className="h-4 w-3/4" />
-          </div>
-        ))}
-      </div>
+      <Skeleton className="h-28 w-full rounded-xl" />
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">{[0, 1, 2, 3].map((i) => <div key={i} className="flex flex-col gap-3 rounded-lg border border-border p-4"><Skeleton className="h-4 w-24" /><Skeleton className="h-8 w-32" /><Skeleton className="h-7 w-full" /></div>)}</div>
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">{[0, 1].map((i) => <div key={i} className="flex flex-col gap-4 rounded-lg border border-border p-4"><Skeleton className="h-4 w-40" /><Skeleton className="h-16 w-full" /><Skeleton className="h-4 w-3/4" /></div>)}</div>
     </div>
   );
 }
-// Ingestion-operations overview: a read-mostly KPI + breakdown dashboard with every lifecycle state reachable via the status prop.
+// Ingestion-operations overview: a read-mostly hero + KPI + breakdown dashboard with every lifecycle state reachable via the status prop.
 export function OperationsDashboard(props: OperationsDashboardProps) {
   const { status = "ready", degraded = false, lastUpdated = "14:32:08", onRefresh, onRetry, onConnectSource } = props;
   const kpis = props.kpis ?? DEFAULT_KPIS;
   const connectors = props.connectors ?? DEFAULT_CONNECTORS;
   const [timeframe, setTimeframe] = useState<string>("24h");
   return (
-    <main className="flex min-h-[100dvh] flex-col bg-background text-foreground" data-density-step="looser">
+    <main className="flex min-h-[100dvh] flex-col bg-background font-sans text-foreground" data-density-step="looser">
       <header className="flex flex-col gap-2 border-b border-border px-6 py-4">
         <div className="flex flex-wrap items-center justify-between gap-4">
           <div className="flex flex-col gap-1">
-            <h1 className="text-xl font-medium text-foreground">Ingestion operations</h1>
-            <p className="text-sm text-muted-foreground">Cross-connector health for the data platform.</p>
+            <h1 className="text-h1 text-foreground">Ingestion operations</h1>
+            <p className="text-small text-muted-foreground">Cross-connector health for the data platform.</p>
           </div>
           <div className="flex items-center gap-2">
             <div className="flex items-center gap-2" role="group" aria-label="Time range">
-              {TIMEFRAMES.map((tf) => (
-                <Button key={tf.key} size="sm" variant={tf.key === timeframe ? "secondary" : "ghost"} aria-pressed={tf.key === timeframe} onClick={() => setTimeframe(tf.key)}>{tf.label}</Button>
-              ))}
+              {TIMEFRAMES.map((tf) => <Button key={tf.key} size="sm" variant={tf.key === timeframe ? "secondary" : "ghost"} aria-pressed={tf.key === timeframe} onClick={() => setTimeframe(tf.key)}>{tf.label}</Button>)}
             </div>
             <Button size="sm" variant="secondary" onClick={onRefresh}><RefreshCw className="size-4" aria-hidden /> Refresh</Button>
           </div>
         </div>
-        <p role="status" aria-live="polite" className="text-xs text-muted-foreground">{status === "loading" ? "Loading ingestion overview…" : status === "error" ? "Overview failed to load."
+        <p role="status" aria-live="polite" className="text-caption text-muted-foreground">{status === "loading" ? "Loading ingestion overview…" : status === "error" ? "Overview failed to load."
           : <>Updated <span className="font-mono">{lastUpdated}</span>{degraded ? " · latency source stale" : ""}</>}</p>
       </header>
       <div className="flex flex-col gap-6 px-6 py-6">
         {status === "loading" ? <DashboardSkeleton /> : null}
         {status === "error" ? (
           <Alert variant="destructive" role="alert">
-            <TriangleAlert className="size-4" aria-hidden />
-            <AlertTitle>Overview failed to load</AlertTitle>
-            <AlertDescription>
-              The metrics service did not answer within the request timeout, usually a transient gateway hiccup. Retry now, or check the metrics service status if it keeps failing.
-              <span className="mt-3 block"><Button size="sm" variant="secondary" onClick={onRetry}><RefreshCw className="size-4" aria-hidden /> Retry</Button></span>
-            </AlertDescription>
+            <TriangleAlert className="size-4" aria-hidden /><AlertTitle>Overview failed to load</AlertTitle>
+            <AlertDescription>The metrics service did not answer within the request timeout, usually a transient gateway hiccup. Retry now, or check the metrics service status if it keeps failing.
+              <span className="mt-3 block"><Button size="sm" variant="secondary" onClick={onRetry}><RefreshCw className="size-4" aria-hidden /> Retry</Button></span></AlertDescription>
           </Alert>
         ) : null}
         {status === "empty" ? (
@@ -185,38 +179,17 @@ export function OperationsDashboard(props: OperationsDashboardProps) {
         {status === "ready" ? (
           <>
             {degraded ? (
-              <Alert role="status">
-                <Clock className="size-4" aria-hidden />
-                <AlertTitle>Latency source unreachable</AlertTitle>
-                <AlertDescription>The p95 processing panel is showing the last cached value from 14:12. Every other panel is live.</AlertDescription>
-              </Alert>
+              <Alert role="status"><Clock className="size-4" aria-hidden /><AlertTitle>Latency source unreachable</AlertTitle>
+                <AlertDescription>The p95 processing panel is showing the last cached value from 14:12. Every other panel is live.</AlertDescription></Alert>
             ) : null}
+            <ThroughputHero total="1,284,930" trend={THROUGHPUT_TREND} />
             <section className="flex flex-col gap-3" aria-labelledby="kpi-heading">
-              <h2 id="kpi-heading" className="text-sm font-medium text-muted-foreground">Today at a glance</h2>
-              <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">{kpis.map((kpi) => <KpiCard key={kpi.key} kpi={kpi} />)}</div>
+              <h2 id="kpi-heading" className="text-small font-medium text-muted-foreground">Today at a glance</h2>
+              <div className="motion-stagger grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">{kpis.map((kpi) => <KpiCard key={kpi.key} kpi={kpi} />)}</div>
             </section>
             <section className="flex flex-col gap-3" aria-labelledby="breakdown-heading">
-              <h2 id="breakdown-heading" className="text-sm font-medium text-muted-foreground">Breakdowns</h2>
-              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
-                <Statistics variant="outline" className="gap-4">
-                  <StatisticsHeader>
-                    <StatisticsHeading>
-                      <StatisticsTitle size="sm">Batches by outcome</StatisticsTitle>
-                      <StatisticsDescription>Last 24 hours across all connectors.</StatisticsDescription>
-                    </StatisticsHeading>
-                    <StatisticsActions>
-                      <StatisticsLink href="/batches" className="inline-flex items-center gap-1 text-primary">Open batches <ArrowUpRight className="size-4" aria-hidden /></StatisticsLink>
-                    </StatisticsActions>
-                  </StatisticsHeader>
-                  <StatisticsSegmentedBar segments={OUTCOME_SEGMENTS} />
-                  <StatisticsLegend>
-                    {OUTCOME_SEGMENTS.map((s, i) => (
-                      <StatisticsLegendItem key={i} color={s.color} label={s.label} value={<span className="tabular-nums">{s.value.toLocaleString()}</span>} />
-                    ))}
-                  </StatisticsLegend>
-                </Statistics>
-                <ConnectorsTile connectors={connectors} />
-              </div>
+              <h2 id="breakdown-heading" className="text-small font-medium text-muted-foreground">Breakdowns</h2>
+              <div className="grid grid-cols-1 gap-4 lg:grid-cols-2"><HealthStripTile days={INGEST_HEALTH} /><ConnectorsTile connectors={connectors} /></div>
             </section>
           </>
         ) : null}
@@ -226,18 +199,22 @@ export function OperationsDashboard(props: OperationsDashboardProps) {
 }
 
 // exemplar fixture data — seeded, domain-shaped
-const FIXTURE_SEED = 6820;
+export const FIXTURE_SEED = 6820;
 const DEFAULT_KPIS: KpiDatum[] = [
   { key: "throughput", label: "Records ingested", value: "1,284,930", unit: "today", trend: 6.4, spark: [820, 910, 880, 1020, 1180, 1240, 1284], chart: "var(--chart-1)" },
   { key: "failures", label: "Batch failure rate", value: "0.42", unit: "%", trend: 1.8, invertTrend: true, spark: [0.3, 0.28, 0.35, 0.31, 0.4, 0.44, 0.42], chart: "var(--chart-5)" },
   { key: "latency", label: "p95 processing", value: "312", unit: "ms", trend: -4.1, spark: [360, 352, 341, 338, 330, 318, 312], chart: "var(--chart-2)", stale: true },
   { key: "connectors", label: "Active connectors", value: "18", unit: "of 21", trend: 0, spark: [17, 17, 18, 18, 18, 17, 18], chart: "var(--chart-3)" },
 ];
-const OUTCOME_SEGMENTS: StatisticsSegment[] = [
-  { label: "Succeeded", value: 8420, color: "var(--chart-3)" },
-  { label: "Retried", value: 612, color: "var(--chart-4)" },
-  { label: "Failed", value: 148, color: "var(--chart-5)" },
-];
+const THROUGHPUT_TREND: LineGraphData = {
+  labels: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00"],
+  series: [{ name: "Ingested", values: [820, 910, 880, 1020, 1180, 1240, 1284] }, { name: "Queued", values: [140, 120, 210, 90, 160, 130, 118] }],
+};
+const INGEST_HEALTH: BarGraphData[] = ["Jun 23", "Jun 24", "Jun 25", "Jun 26", "Jun 27", "Jun 28", "Jun 29", "Jun 30", "Jul 01", "Jul 02", "Jul 03", "Jul 04"].map((day, i) => {
+  const status = i === 6 ? "error" : i === 3 || i === 9 ? "degraded" : "success";
+  const value = status === "success" ? "100.0% healthy" : status === "degraded" ? "97.4% degraded" : "91.2% errored";
+  return { day, bar: [{ status, height: 100 }], card: [{ status, value }], events: [] };
+});
 const DEFAULT_CONNECTORS: ConnectorRow[] = [
   { id: "cn_stripe_events", name: "Stripe billing events", kind: "webhook", records: 486210, errorRate: 0.08, health: "healthy" },
   { id: "cn_salesforce_crm", name: "Salesforce CRM accounts and opportunities", kind: "rest", records: 312440, errorRate: 0.31, health: "healthy" },