@nurix/etna 0.18.19 → 0.18.21

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 },
+];

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

@@ -0,0 +1,249 @@
+// skills/design/data/operator-pack/exemplars/create-edit.tsx
+// personality-invariant: composition anchor, not a look source.
+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";
+import { Button } from "@nurix/components/button";
+import { Input } from "@nurix/components/input";
+import { NumberInput } from "@nurix/components/number-input";
+import { Switch } from "@nurix/components/switch";
+import { Checkbox } from "@nurix/components/checkbox";
+import { Label } from "@nurix/components/label";
+import { Badge } from "@nurix/components/badge";
+import { Kbd } from "@nurix/components/kbd";
+import { Skeleton } from "@nurix/components/skeleton";
+import { EmptyState } from "@nurix/components/empty-state";
+import { Alert, AlertTitle, AlertDescription } from "@nurix/components/alert";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@nurix/components/native-select";
+import { RadioGroupSegmented, RadioGroupSegmentedItem } from "@nurix/components/radio-group";
+
+export type RuleSurfaceStatus = "loading" | "empty" | "error" | "degraded" | "ready";
+export type ThresholdDirection = "above" | "below";
+type FormPhase = "form" | "preview" | "success";
+type SubmitStatus = "idle" | "submitting" | "failed";
+type FieldErrors = Partial<Record<keyof AlertRuleDraft, string>>;
+
+export interface NotifyChannel { id: string; label: string; kind: "email" | "webhook" | "pager"; }
+export interface MetricOption { slug: string; label: string; unit: string; }
+export interface SubmitOutcome { ok: boolean; message?: string; }
+
+export interface AlertRuleDraft {
+  name: string; metricSlug: string; direction: ThresholdDirection;
+  threshold: number | null; channelIds: string[]; enabled: boolean;
+}
+
+export interface CreateEditRuleSurfaceProps {
+  mode: "create" | "edit"; status: RuleSurfaceStatus; open: boolean;
+  metrics: MetricOption[]; channels: NotifyChannel[]; metricsCachedAt?: string | null;
+  initial?: Partial<AlertRuleDraft>; onSubmit: (draft: AlertRuleDraft) => Promise<SubmitOutcome>;
+  onCancel: () => void; onAddChannel: () => void; onRetryLoad: () => void;
+}
+
+const BLANK_DRAFT: AlertRuleDraft = { name: "", metricSlug: "", direction: "above", threshold: null, channelIds: [], enabled: true };
+
+// Collect blocking errors for the whole draft; re-run on every render so blur and submit share one source.
+function validate(draft: AlertRuleDraft): FieldErrors {
+  const errors: FieldErrors = {};
+  if (draft.name.trim().length < 3) errors.name = "Name the rule (3 characters or more) so it's findable in the alert list.";
+  if (!draft.metricSlug) errors.metricSlug = "Choose the metric this rule watches.";
+  if (draft.threshold == null) errors.threshold = "Set the threshold value to compare against.";
+  if (draft.channelIds.length === 0) errors.channelIds = "Add at least one channel so alerts have somewhere to go.";
+  return errors;
+}
+
+// Label-over-input wrapper: the visible label, the control, then an inline error (or hint) below.
+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>
+      {children}
+      {error ? <p id={`${id}-error`} className="text-sm text-destructive">{error}</p> : hint ? <p className="text-sm text-muted-foreground">{hint}</p> : null}
+    </div>
+  );
+}
+// One label/value row inside the preview summary.
+function PreviewRow({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="grid grid-cols-[8rem_1fr] gap-4">
+      <dt className="text-muted-foreground">{label}</dt>
+      <dd className="text-foreground">{children}</dd>
+    </div>
+  );
+}
+// The create/edit alert-rule surface: a side sheet that opens beside the alert list and returns to it on close.
+export function CreateEditRuleSurface(props: CreateEditRuleSurfaceProps) {
+  const { mode, status, open, metrics, channels, metricsCachedAt, onSubmit, onCancel, onAddChannel, onRetryLoad } = props;
+  const [draft, setDraft] = useState<AlertRuleDraft>(() => ({ ...BLANK_DRAFT, ...props.initial }));
+  const [touched, setTouched] = useState<Record<string, boolean>>({});
+  const [attempted, setAttempted] = useState(false);
+  const [phase, setPhase] = useState<FormPhase>("form");
+  const [submitStatus, setSubmitStatus] = useState<SubmitStatus>("idle");
+  const [submitError, setSubmitError] = useState<string | null>(null);
+  const errors = validate(draft);
+  const metric = metrics.find((m) => m.slug === draft.metricSlug);
+  const selectedChannels = channels.filter((c) => draft.channelIds.includes(c.id));
+  const isForm = status === "ready" || status === "degraded";
+  const busy = submitStatus === "submitting";
+  function patch<K extends keyof AlertRuleDraft>(key: K, value: AlertRuleDraft[K]) { setDraft((d) => ({ ...d, [key]: value })); }
+  function blur(key: keyof AlertRuleDraft) { setTouched((t) => ({ ...t, [key]: true })); }
+  const show = (key: keyof AlertRuleDraft): string | undefined => ((attempted || touched[key]) && errors[key]) || undefined;
+  // Validate the whole draft; a clean draft advances to the preview-then-commit step.
+  function handlePreview(event: FormEvent) {
+    event.preventDefault();
+    setAttempted(true);
+    setSubmitError(null);
+    if (Object.keys(errors).length === 0) setPhase("preview");
+  }
+  // Commit the reviewed draft; failure returns to the form with entries preserved and the reason inline.
+  async function handleConfirm() {
+    setSubmitStatus("submitting");
+    const outcome = await onSubmit(draft);
+    if (outcome.ok) { setSubmitStatus("idle"); setPhase("success"); }
+    else { setSubmitStatus("failed"); setSubmitError(outcome.message ?? "The alerting service rejected the rule."); setPhase("form"); }
+  }
+  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">
+        <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>
+        </SheetHeader>
+        <SheetBody>
+          {status === "loading" && (
+            <div className="grid gap-6" aria-hidden="true">
+              {[0, 1, 2, 3].map((i) => <div key={i} className="grid gap-2"><Skeleton className="h-4 w-28" /><Skeleton className="h-9 w-full" /></div>)}
+            </div>
+          )}
+          {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>
+              <Button variant="outline" onClick={onRetryLoad}><RotateCcw className="size-4" /> Retry</Button>
+            </div>
+          )}
+          {status === "empty" && (
+            <EmptyState
+              icon={<Plus className="size-6 text-muted-foreground" />}
+              title="No notification channels yet"
+              description="An alert rule needs somewhere to send alerts. Add a channel, then come back to finish this rule."
+              action={<Button onClick={onAddChannel}><Plus className="size-4" /> Add a channel</Button>}
+            />
+          )}
+          {isForm && phase === "form" && (
+            <form id="rule-form" onSubmit={handlePreview} className="grid gap-6">
+              {status === "degraded" && (
+                <Alert role="status" aria-live="polite">
+                  <TriangleAlert className="size-4" /><AlertTitle>Metric list may be stale</AlertTitle>
+                  <AlertDescription>The metrics service is unreachable, so this is a cached catalog from {metricsCachedAt}. A metric added since then won't appear here yet.</AlertDescription>
+                </Alert>
+              )}
+              {submitStatus === "failed" && submitError && (
+                <Alert variant="destructive" role="alert">
+                  <TriangleAlert className="size-4" /><AlertTitle>Rule not created</AlertTitle>
+                  <AlertDescription>{submitError} Your entries are preserved, adjust and try again.</AlertDescription>
+                </Alert>
+              )}
+              <Field id="name" label="Rule name" htmlFor="name" error={show("name")}>
+                <Input id="name" value={draft.name} placeholder="API error rate over 2 percent" onChange={(e) => patch("name", e.target.value)} onBlur={() => blur("name")} aria-invalid={show("name") ? true : undefined} aria-describedby={show("name") ? "name-error" : undefined} />
+              </Field>
+              <Field id="metric" label="Metric" htmlFor="metric" error={show("metricSlug")}>
+                <Select value={draft.metricSlug} onValueChange={(v) => { patch("metricSlug", v); blur("metricSlug"); }}>
+                  <SelectTrigger id="metric" aria-invalid={show("metricSlug") ? true : undefined}><SelectValue placeholder="Choose a metric to watch" /></SelectTrigger>
+                  <SelectContent>{metrics.map((m) => <SelectItem key={m.slug} value={m.slug}>{m.label}</SelectItem>)}</SelectContent>
+                </Select>
+              </Field>
+              <div className="grid grid-cols-2 gap-4">
+                <Field id="direction" label="Condition">
+                  <RadioGroupSegmented value={draft.direction} aria-labelledby="direction-label" onValueChange={(v) => patch("direction", v as ThresholdDirection)}>
+                    <RadioGroupSegmentedItem value="above">Above</RadioGroupSegmentedItem>
+                    <RadioGroupSegmentedItem value="below">Below</RadioGroupSegmentedItem>
+                  </RadioGroupSegmented>
+                </Field>
+                <Field id="threshold" label={`Threshold${metric ? ` (${metric.unit})` : ""}`} htmlFor="threshold" error={show("threshold")}>
+                  <NumberInput id="threshold" className="tabular-nums" value={draft.threshold} step={0.5} allowDecimals onSave={(v) => patch("threshold", v)} onBlur={() => blur("threshold")} aria-invalid={show("threshold") ? true : undefined} aria-describedby={show("threshold") ? "threshold-error" : undefined} />
+                </Field>
+              </div>
+              <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">
+                      <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>
+                    </Label>
+                  ))}
+                </div>
+              </Field>
+              <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>
+                </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">
+                <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>
+            </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>
+              <div className="flex items-center gap-2">
+                <Button variant="outline" onClick={onCancel}>View rule</Button>
+                <Button onClick={reset}>Create another rule</Button>
+              </div>
+            </div>
+          )}
+        </SheetBody>
+        {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">
+                {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">
+                {phase === "form" ? (
+                  <>
+                    <Button type="button" variant="ghost" onClick={onCancel}>Cancel</Button>
+                    <Button type="submit" form="rule-form" size="lg">{mode === "create" ? "Create rule" : "Save changes"}</Button>
+                  </>
+                ) : (
+                  <>
+                    <Button type="button" variant="ghost" onClick={() => setPhase("form")} disabled={busy}>Back to edit</Button>
+                    <Button type="button" size="lg" onClick={handleConfirm} disabled={busy}>{busy ? "Creating rule" : "Confirm and create"}</Button>
+                  </>
+                )}
+              </div>
+            </div>
+          </SheetFooter>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+// exemplar fixture data — seeded, domain-shaped
+export const metricCatalog: MetricOption[] = [
+  { slug: "api_error_rate", label: "API error rate", unit: "%" },
+  { slug: "p95_latency", label: "p95 response time", unit: "ms" },
+  { slug: "queue_depth", label: "Ingest queue depth", unit: "jobs" },
+];
+
+export const notifyChannels: NotifyChannel[] = [
+  { id: "ch_oncall_primary", label: "On-call primary", kind: "pager" },
+  { id: "ch_platform_alerts", label: "#platform-alerts", kind: "webhook" },
+  { id: "ch_sre_mailing", label: "sre-team mailing list", kind: "email" },
+];