@nurix/etna 0.19.10 → 0.19.12

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

@@ -1,249 +0,0 @@
-// 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";
-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-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-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-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>
-  );
-}
-// 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-h3">Live session stream</h2>
-        <Badge variant="outline" className="ml-auto tabular-nums">{events.length}</Badge>
-      </div>
-      <ScrollArea className="min-h-0 flex-1">
-        {/* 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-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="min-w-0 flex-1 truncate text-muted-foreground" title={e.detail}>{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-small">
-      <thead className="sticky top-0 bg-card">
-        <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>
-          <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="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>
-            <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 font-sans text-foreground">
-      <header className="flex flex-wrap items-center gap-3">
-        <Radio className="size-5 text-primary" aria-hidden />
-        <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">
-          <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-h3">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-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>
-          ) : 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-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>
-          </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

@@ -1,249 +0,0 @@
-// 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";
-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-small font-medium">{label}</Label>
-      {children}
-      {error ? <p id={`${id}-error`} className="text-small text-destructive">{error}</p> : hint ? <p className="text-small 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" className="bg-surface-overlay font-sans shadow-overlay">
-        <SheetHeader showDivider>
-          <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" && (
-            <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-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>
-          )}
-          {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-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>
-                    </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-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-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-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">
-              <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>
-              </div>
-            </div>
-          )}
-        </SheetBody>
-        {isForm && phase !== "success" && (
-          <SheetFooter showDivider>
-            <div className="flex w-full items-center justify-between gap-4">
-              <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">
-                {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" },
-];