@nurix/etna 0.18.18 → 0.18.20

package/data/harnesses/code/skills/design/data/design-md/nurix.md

@@ -0,0 +1,217 @@
+---
+schema: design-md/v1
+product: Nurix
+provenance: default
+sourced: 2026-07-04
+---
+
+# Nurix — the default operator design
+
+The document a zero-input project wears. No project `design.md`, no confirmed library match, and
+this is the brand personality synthesis derives from. It is a *deliberate* operator reading of the
+Nurix brand — engineered, calm, dense-capable, never decorative — not a marketing transcription:
+the brand's marketing surfaces breathe; an operator surface earns its density and keeps one accent.
+Both machine blocks are fully valued (no `hint:`); every judgment away from the marketing brand is
+annotated `# rationale:` where it lands.
+
+## 1 Visual Theme
+
+Light by default; dark is opt-in. Flat: hierarchy is carried by hairline `border`, type weight, and
+color contrast — never by heavy shadow. A single accent, Nurix `primary` (vibrant blue), reserved for
+the one action that matters on a surface. The neutral ramp is a cool slate that leans faintly toward
+the brand's Deep Navy, so the whole UI reads engineered rather than flatly gray. The anchor surface is
+a white content canvas beside a faintly cool-tinted `sidebar`. Density is `standard` and steps denser
+per surface archetype — dense-capable, not cramped.
+
+## 2 Color Roles
+
+Light values first (the manifest carries the exact `oklch`; the brand hex is cited where it names the
+identity). One accent — `primary` is the only chromatic hue that carries meaning; status hues speak
+only status.
+
+| Role | Value | Allowed where |
+| --- | --- | --- |
+| `background` / `card` / `popover` | white `oklch(1 0 0)` | page, cards, and overlays — the dominant surface |
+| `foreground` | deep cool slate `oklch(0.2077 …)` | all primary ink |
+| `muted` / `secondary` | faint cool tint `oklch(0.9683 …)` | hover rows, subtle fills, secondary buttons |
+| `muted-foreground` | mid slate `oklch(0.5544 …)` | labels, captions, secondary text |
+| `border` / `input` | hairline `oklch(0.9288 …)` (brand `#E2E8F0`) | every separator, grid line, and field edge |
+| `primary` | vibrant blue `oklch(0.5211 …)` (brand `#245AE2`) | the one primary action; active nav; key interactive detail |
+| `accent` | blue-tint `oklch(0.9603 …)` | selected/hovered rows and nav, on-accent surfaces only |
+| `ring` | `primary` | the focus outline — unmistakable, because keyboard-first |
+| `destructive` | red `oklch(0.5771 …)` | destructive actions and error state only |
+| `success` / `warning` | green / amber | status signalling only, never chrome |
+
+Electric Lime and Deep Navy are brand graces, not operator tokens: they carry no role here (see §7).
+
+## 3 Typography
+
+One sans, one mono. `font-sans` is Inter — the UI, body, and headings all ride it; heading weight and
+tracking, not a second family, carry the display voice. `font-mono` is Geist Mono for IDs, codes,
+timestamps, and log lines. Numeric columns render `tabular-nums` (Inter carries `tnum`) so figures
+align down a column (floor P4).
+
+| Step | Role | Size · line | Weight · tracking |
+| --- | --- | --- | --- |
+| h1 | page title | 24px / 1.25 | `font-weight-strong` · `heading-tracking` |
+| h2 | section head | 18px / 1.3 | `font-weight-strong` · `heading-tracking` |
+| h3 | card / group head | 15px / 1.35 | `font-weight-strong` · `heading-tracking` |
+| body | UI + prose | 14px / 1.45 | `font-weight-normal` |
+| small | labels, meta, table dense | 13px / 1.4 | `font-weight-normal` |
+| caption | uppercase eyebrow | 12px / 1.2 | `font-weight-strong`, `+0.02em`, uppercase |
+
+Bump weight one step for emphasis; never change size to emphasize.
+
+## 4 Component Stylings
+
+Every recurring operator component composes from the primitives — no literal values.
+
+- **Button** — `primary`: filled `primary` on `primary-foreground`, `radius`, no pill. Secondary:
+  `secondary` fill, `border`, `foreground`. Ghost: transparent, `accent` on hover.
+- **Input** — `background` fill, 1px `border` (`border-weight`), `radius`; focus draws the `ring` at
+  full 2px, no glow.
+- **Card** — `card` surface, 1px `border`, `radius`, shadow only when lifted (`shadow-intensity`);
+  inset by `density-inset`.
+- **Table row** — height `table-row-height`; `border` grid lines; `muted` on hover; `tabular-nums` on
+  numeric columns; row selection tints `accent`.
+- **Side panel** — detail and edit open in the side panel (`side-panel-width`, `side-panel-width-rich`
+  for content-heavy), beside the work, not over it (floor P3).
+- **Badge** — hairline `border`, `muted`/status fill, uppercase caption; status badges take
+  `success` / `warning` / `destructive`, never `primary`.
+
+## 5 Layout
+
+Base spacing unit 4px (Tailwind `--spacing` 0.25rem); the on-scale ramp is `2 · 4 · 8 · 12 · 16 · 24 ·
+32 · 48 · 64`. Shell dimensions map one-to-one to the layout primitives: sidebar
+`sidebar-width-expanded` / `sidebar-width-collapsed`, topbar `topbar-height`, side panel
+`side-panel-width` / `side-panel-width-rich`, modal cap `modal-width-max`, forms `form-max-width`,
+tables full-width. Density is governed globally by `density-tier` (rewriting the spacing scale through
+`density-gap`) and stepped per archetype by the surface catalog — never by absolute overrides.
+
+## 6 Depth
+
+Flat. Hierarchy comes from the surface ladder and hairlines, not shadow:
+
+- **0 — canvas** `background`, no border.
+- **1 — panel / card** `card` on a 1px `border`; shadow only when it must lift off the canvas.
+- **2 — overlay** `popover` / side panel / modal — the one place `shadow-intensity` earns a soft `md`
+  shadow. No level stacks a heavier shadow to signal rank; rank is border and position.
+
+Focus is a 2px `ring` outline (never a glow), visible on every interactive element (floor P6).
+Three z-levels: content, sticky chrome, overlay.
+
+## 7 Do's & Don'ts
+
+- **Do** reserve `primary` for the single most important action on a surface; everything else is
+  neutral or status.
+- **Do** carry hierarchy with hairlines, weight, and whitespace — the brand is predominantly flat.
+- **Do** apply `tabular-nums` to every numeric column and `font-mono` to IDs, codes, and timestamps.
+- **Don't** promote a second chromatic accent. Electric Lime and Deep Navy stay brand-decorative — a
+  lime "success" reads yellow and fails contrast; status uses `success` / `warning` / `destructive`.
+- **Don't** pill the primary CTA or reach for a radius outside `radius-scale`.
+- **Don't** open detail or edit in a modal when the side panel fits — modals are for confirmations
+  only.
+- **Don't** signal elevation with heavy drop shadows.
+
+## 8 Responsive
+
+The operator sweep is 375 / 768 / 1024 / 1440.
+
+| Breakpoint | What changes |
+| --- | --- |
+| 375 | sidebar → off-canvas drawer; two-pane list+detail stacks; side panel → full sheet; density holds |
+| 768 | sidebar collapses to the icon rail (`sidebar-width-collapsed`); tables scroll their overflow |
+| 1024 | sidebar expands; two-pane queue+detail holds side by side |
+| 1440 | content caps at `form-max-width` for forms; tables and dashboards use the full width |
+
+## 9 Agent Prompt Guide
+
+Directives the emitting agent follows verbatim:
+
+- Lead every list surface with its table; lead every entity with its primary read, not its chrome.
+- Accent only the primary action. If two things want the accent, one of them is not primary.
+- Detail and edit go in the side panel; a modal is a confirmation, not a workspace (P3).
+- Every numeric column is `tabular-nums`; every ID / code / timestamp is `font-mono` (P4).
+- Every workflow completes from the keyboard; the `ring` focus outline is always visible (P6).
+- Stay flat — hairline and weight before shadow. Reach past a hairline only for a real overlay.
+- One accent. Lime and navy are not operator colors here.
+
+```yaml design-primitives
+radius: 6px                                        # rationale: brand default 12px is marketing-surface soft; operator default tightens for a denser, engineered read (scale still offers 12px for large cards)
+shadow-intensity: 0.4                              # rationale: brand is predominantly flat; shadow only lifts true overlays
+border-weight: 1px
+density-gap: 1
+density-inset: 1
+font-sans: Inter, system-ui, sans-serif           # rationale: brand's body font; the single sans slot serves dense body/table chrome, so Inter over the marketing display font Manrope
+font-mono: Geist Mono, ui-monospace, SFMono-Regular, monospace   # rationale: Geist (brand numeric family) monospace sibling — IDs, codes, log lines
+font-weight-normal: 400                            # rationale: brand base 500 is display-tuned; dense operator body reads cleaner at 400
+font-weight-strong: 600
+heading-tracking: -0.01em                          # rationale: brand display tracks 0; at operator heading sizes Inter reads tighter and more engineered
+duration-unit: 50ms
+duration-fast: 100ms
+duration-normal: 150ms
+duration-slow: 250ms
+ease-default: cubic-bezier(0.4,0,0.2,1)
+contrast-boost: 1
+icon-stroke: 1.75                                  # rationale: one step under lucide's 2 for a refined operator stroke
+icon-size-base: 16px
+sidebar-width-expanded: 248px
+sidebar-width-collapsed: 56px
+topbar-height: 52px
+side-panel-width: 420px
+side-panel-width-rich: 640px
+modal-width-max: 560px
+form-max-width: 640px
+table-row-height: 40px                             # rationale: comfortable at standard density; dense archetypes step down via the surface catalog
+verbosity: default
+feedback: subtle
+density-tier: standard                             # rationale: a general operator default balances legibility and density; archetypes step denser, never the whole app
+product-traits: [operator-console, crm, queue, dashboard, admin]
+```
+
+```yaml lever-manifest
+version: 1
+fonts: { sans: "Inter, system-ui, sans-serif", mono: "Geist Mono, ui-monospace, SFMono-Regular, monospace" }
+color-tokens:
+  light:
+    background: "oklch(1 0 0)"
+    foreground: "oklch(0.2077 0.0398 265.75)"
+    card: "oklch(1 0 0)"
+    card-foreground: "oklch(0.2077 0.0398 265.75)"
+    muted: "oklch(0.9683 0.0069 247.9)"
+    muted-foreground: "oklch(0.5544 0.0407 257.42)"
+    border: "oklch(0.9288 0.0126 255.51)"
+    input: "oklch(0.9288 0.0126 255.51)"
+    ring: "oklch(0.5211 0.2145 263.89)"
+    primary: "oklch(0.5211 0.2145 263.89)"
+    primary-foreground: "oklch(1 0 0)"
+    accent: "oklch(0.9603 0.0144 264.5)"
+    accent-foreground: "oklch(0.5211 0.2145 263.89)"
+    destructive: "oklch(0.5771 0.2152 27.33)"
+    destructive-foreground: "oklch(1 0 0)"
+    success: "oklch(0.6271 0.1699 149.21)"
+    warning: "oklch(0.6658 0.1574 58.32)"
+    popover: "oklch(1 0 0)"
+    popover-foreground: "oklch(0.2077 0.0398 265.75)"
+    secondary: "oklch(0.9683 0.0069 247.9)"
+    secondary-foreground: "oklch(0.2077 0.0398 265.75)"
+    chart-1: "oklch(0.5211 0.2145 263.89)"
+    chart-2: "oklch(0.6089 0.1109 221.72)"
+    chart-3: "oklch(0.6271 0.1699 149.21)"
+    chart-4: "oklch(0.6658 0.1574 58.32)"
+    chart-5: "oklch(0.5413 0.2466 293.01)"
+    sidebar: "oklch(0.9842 0.0034 247.86)"
+    sidebar-foreground: "oklch(0.2077 0.0398 265.75)"
+    sidebar-primary: "oklch(0.5211 0.2145 263.89)"
+    sidebar-primary-foreground: "oklch(1 0 0)"
+    sidebar-accent: "oklch(0.9603 0.0144 264.5)"
+    sidebar-accent-foreground: "oklch(0.5211 0.2145 263.89)"
+    sidebar-border: "oklch(0.9288 0.0126 255.51)"
+    sidebar-ring: "oklch(0.5211 0.2145 263.89)"
+spacing-scale: [2, 4, 8, 12, 16, 24, 32, 48, 64]
+radius-scale: [0, 4, 6, 12, 9999]
+shadow-levels: [none, sm, md]
+motion: { durations: [100, 150, 250], easings: ["cubic-bezier(0.4,0,0.2,1)"] }
+icons: { family: lucide, stroke: 1.75 }
+accent-count: 1
+```

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

@@ -0,0 +1,249 @@
+// skills/design/data/operator-pack/exemplars/command-center.tsx — personality-invariant: composition anchor, not a look source.
+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";
+import { Badge } from "@nurix/components/badge";
+import { Card } from "@nurix/components/card";
+import { Skeleton } from "@nurix/components/skeleton";
+import { EmptyState } from "@nurix/components/empty-state";
+import { Alert, AlertTitle, AlertDescription } from "@nurix/components/alert";
+import { ScrollArea } from "@nurix/components/scroll-area";
+import { Sparkline } from "@nurix/components/sparkline";
+import { Kbd } from "@nurix/components/kbd";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose } from "@nurix/components/dialog";
+import { Statistics, StatisticsHeader, StatisticsHeading, StatisticsTitle, StatisticsMetric, StatisticsValue, StatisticsUnit, StatisticsTrend } from "@nurix/components/statistics";
+type SurfaceState = "loading" | "ready" | "error";
+type PanelStatus = "ok" | "degraded" | "down" | "loading";
+type Sentiment = "negative" | "neutral" | "positive";
+interface HealthPanel { key: string; label: string; status: PanelStatus; p95: number; trend: number[]; since: string; }
+interface StreamEvent { id: string; at: string; session: string; kind: "started" | "escalated" | "resolved" | "dropped"; detail: string; }
+interface Escalation { id: string; session: string; reason: string; sentiment: Sentiment; waitingSec: number; }
+export interface CommandCenterProps {
+  state?: SurfaceState;
+  panels?: HealthPanel[];
+  events?: StreamEvent[];
+  escalations?: Escalation[];
+  updatedAt?: string;
+  onRetry?: () => void;
+}
+
+const STATUS_TONE: Record<PanelStatus, { text: string; word: string; Icon: LucideIcon }> = {
+  ok: { text: "text-success", word: "healthy", Icon: Signal },
+  degraded: { text: "text-warning", word: "degraded", Icon: AlertTriangle },
+  down: { text: "text-destructive", word: "down", Icon: WifiOff },
+  loading: { text: "text-muted-foreground", word: "probing", Icon: RefreshCw },
+};
+const SENTIMENT_TONE: Record<Sentiment, string> = { negative: "text-destructive", neutral: "text-muted-foreground", positive: "text-success" };
+const KIND_LABEL: Record<StreamEvent["kind"], string> = { started: "Session started", escalated: "Escalated", resolved: "Resolved", dropped: "Call dropped" };
+
+// Format a waiting duration in seconds as a compact mm:ss string.
+function fmtWait(sec: number): string {
+  return `${Math.floor(sec / 60)}:${String(sec % 60).padStart(2, "0")}`;
+}
+// One KPI tile in the health header; the numeric value carries tabular figures.
+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>
+      <StatisticsMetric>
+        <StatisticsValue className="tabular-nums">{value}</StatisticsValue>
+        {unit ? <StatisticsUnit>{unit}</StatisticsUnit> : null}
+        {trend !== undefined ? <StatisticsTrend value={trend} pill /> : null}
+      </StatisticsMetric>
+    </Statistics>
+  );
+}
+// One subsystem health panel; loads, degrades, and fails independently and names which.
+function HealthTile({ panel }: { panel: HealthPanel }) {
+  if (panel.status === "loading") {
+    return (
+      <Card className="flex flex-col gap-3 p-4" role="status" aria-busy="true">
+        <Skeleton className="h-4 w-24" /><Skeleton className="h-7 w-16" /><Skeleton className="h-7 w-full" />
+      </Card>
+    );
+  }
+  const tone = STATUS_TONE[panel.status];
+  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>
+      </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>
+      </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}
+    </Card>
+  );
+}
+// The live session-event stream; additions announce politely without stealing focus.
+function StreamPane({ events }: { events: StreamEvent[] }) {
+  return (
+    <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>
+        <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">
+          {events.map((e) => (
+            <li key={e.id} className="flex items-baseline gap-3 px-4 py-2 text-sm">
+              <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>
+            </li>
+          ))}
+        </ul>
+      </ScrollArea>
+    </Card>
+  );
+}
+// 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">
+      <thead className="sticky top-0 bg-card">
+        <tr className="border-b border-border text-left 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>
+          <th scope="col" aria-sort={sort === "asc" ? "ascending" : "descending"} className="px-3 py-2 text-right font-medium">
+            <button type="button" onClick={onToggleSort} className="ml-auto inline-flex items-center gap-1 rounded focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">Waiting{sort === "asc" ? <ArrowUp className="size-4" aria-hidden /> : <ArrowDown className="size-4" aria-hidden />}</button>
+          </th>
+          <th scope="col" className="px-3 py-2 text-right font-medium">Actions</th>
+        </tr>
+      </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>
+            <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>
+            <td className="px-3 py-2">
+              <div className="flex items-center justify-end gap-2">
+                <Button size="sm" onClick={() => onTakeOver(e)}><Hand className="size-4" aria-hidden />Take over</Button>
+                <Button size="sm" variant="ghost" onClick={() => onDismiss(e)}>Dismiss</Button>
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+// The whole-surface loading state: skeleton tiles mirror the KPI, health, and pane grid.
+function CommandSkeleton() {
+  return (
+    <div className="flex flex-1 flex-col gap-4" role="status" aria-busy="true">
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">{[0, 1, 2, 3].map((i) => <Skeleton key={i} className="h-20 w-full" />)}</div>
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">{[0, 1, 2, 3].map((i) => <Skeleton key={i} className="h-28 w-full" />)}</div>
+      <div className="grid min-h-64 flex-1 grid-cols-1 gap-4 lg:grid-cols-2"><Skeleton className="h-full w-full" /><Skeleton className="h-full w-full" /></div>
+    </div>
+  );
+}
+// Voice-AI live-ops bridge: monitor concurrent sessions, detect escalations, intervene under time pressure.
+export function CommandCenter({ state = "ready", panels = SEED_PANELS, events = SEED_EVENTS, escalations = SEED_ESCALATIONS, updatedAt = "14:32:07", onRetry }: CommandCenterProps) {
+  const [sort, setSort] = useState<"asc" | "desc">("desc");
+  const [active, setActive] = useState<Escalation | null>(null);
+  const [handled, setHandled] = useState<{ id: string; session: string; verb: string } | null>(null);
+  const rows = useMemo(() => {
+    const visible = handled ? escalations.filter((e) => e.id !== handled.id) : escalations;
+    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">
+      <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>
+      </header>
+      {state === "loading" ? <CommandSkeleton /> : state === "error" ? (
+        <div className="flex flex-1 items-center justify-center">
+          <Alert variant="destructive" className="max-w-md">
+            <AlertTitle>Telemetry feed unavailable</AlertTitle>
+            <AlertDescription>The bridge lost its link to the session gateway, so live signal is not arriving. Reconnect to resume monitoring.</AlertDescription>
+            <Button size="sm" variant="outline" onClick={onRetry} className="mt-3"><RefreshCw className="size-4" aria-hidden />Reconnect</Button>
+          </Alert>
+        </div>
+      ) : (
+        <>
+          <section aria-label="Key metrics" className="grid grid-cols-2 gap-4 lg:grid-cols-4">{/* mock: illustrative KPI figures */}
+            <KpiTile label="Active sessions" value="128" trend={6} />
+            <KpiTile label="Escalations waiting" value={String(rows.length)} trend={-3} />
+            <KpiTile label="Median handle time" value="2:41" unit="min" />
+            <KpiTile label="Containment rate" value="72" unit="%" trend={2} />
+          </section>
+          <section aria-label="Subsystem health" className="grid grid-cols-2 gap-4 lg:grid-cols-4">
+            {panels.map((p) => <HealthTile key={p.key} panel={p} />)}
+          </section>
+          <section aria-label="Live operations" className="grid min-h-0 flex-1 grid-cols-1 gap-4 lg:grid-cols-2">
+            <StreamPane events={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>
+                <Badge variant="outline" className="ml-auto tabular-nums">{rows.length}</Badge>
+              </div>
+              <ScrollArea className="min-h-0 flex-1">
+                {rows.length === 0 ? (
+                  <EmptyState icon={<ShieldAlert className="size-8 text-muted-foreground" aria-hidden />} title="No escalations waiting" description="Every live session is being handled by the AI agent. Flagged sessions surface here for human takeover." />
+                ) : (
+                  <EscalationTable rows={rows} sort={sort} onToggleSort={() => setSort((s) => (s === "asc" ? "desc" : "asc"))} onTakeOver={setActive} onDismiss={(e) => setHandled({ id: e.id, session: e.session, verb: "Dismissed" })} />
+                )}
+              </ScrollArea>
+            </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">
+              <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>
+          ) : null}
+        </>
+      )}
+      <Dialog open={!!active} onOpenChange={(open) => { if (!open) setActive(null); }}>
+        <DialogContent variant="danger" size="sm">
+          <DialogHeader>
+            <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>
+          <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>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </main>
+  );
+}
+// exemplar fixture data — seeded, domain-shaped
+const SEED_PANELS: HealthPanel[] = [
+  { key: "asr", label: "Speech recognition", status: "ok", p95: 214, trend: [190, 205, 198, 212, 208, 214], since: "" },
+  { key: "llm", label: "Language model", status: "degraded", p95: 1180, trend: [420, 610, 880, 1020, 1140, 1180], since: "14:29" },
+  { key: "tts", label: "Speech synthesis", status: "ok", p95: 96, trend: [88, 92, 90, 94, 91, 96], since: "" },
+  { key: "tel", label: "Telephony gateway", status: "down", p95: 0, trend: [140, 150, 0, 0, 0, 0], since: "2m" },
+];
+const SEED_EVENTS: StreamEvent[] = [
+  { id: "v1", at: "14:32:07", session: "cs-4821", kind: "escalated", detail: "Three low-confidence recognition turns on a billing dispute; caller growing frustrated." },
+  { id: "v2", at: "14:32:01", session: "cs-4790", kind: "resolved", detail: "Refund confirmed, transcript archived." },
+  { id: "v3", at: "14:31:44", session: "cs-4818", kind: "started", detail: "Inbound, plan upgrade intent." },
+  { id: "v4", at: "14:31:22", session: "cs-4802", kind: "dropped", detail: "Carrier RTP timeout on the telephony gateway before the greeting completed." },
+  { id: "v5", at: "14:31:05", session: "cs-4795", kind: "escalated", detail: "Explicit request for a human agent." },
+];
+const SEED_ESCALATIONS: Escalation[] = [
+  { id: "e-01", session: "cs-4821", reason: "Three low-confidence recognition turns on a billing dispute; caller growing frustrated.", sentiment: "negative", waitingSec: 187 },
+  { id: "e-02", session: "cs-4795", reason: "Explicit request for a human agent.", sentiment: "neutral", waitingSec: 94 },
+  { id: "e-03", session: "cs-4766", reason: "Sentiment dropped after a failed address verification.", sentiment: "negative", waitingSec: 63 },
+  { id: "e-04", session: "cs-4740", reason: "Refund amount exceeds the agent's autonomous limit.", sentiment: "neutral", waitingSec: 41 },
+  { id: "e-05", session: "cs-4712", reason: "Caller confirmed resolution; awaiting supervisor sign-off.", sentiment: "positive", waitingSec: 12 },
+];