@nurix/etna 0.18.19 → 0.18.20

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

@@ -0,0 +1,245 @@
+// skills/design/data/operator-pack/exemplars/entity-detail.tsx
+// personality-invariant: composition anchor, not a look source.
+import { useEffect, useState } from "react";
+import { Button } from "@nurix/components/button";
+import { Badge } from "@nurix/components/badge";
+import { Card, CardContent } 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 { Label } from "@nurix/components/label";
+import { Kbd } from "@nurix/components/kbd";
+import { Input } from "@nurix/components/input";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nurix/components/tabs";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose } from "@nurix/components/sheet";
+import { Table, defineColumn, type ColumnDefinition } from "@nurix/components/table";
+import { Boxes, CircleCheck, CircleX, Pencil, RefreshCw, Rocket, ScrollText, TriangleAlert } from "lucide-react";
+// A deployment-console service: a long-lived entity with many attributes, related instances, and deployment history (entity-detail).
+type ServiceHealth = "healthy" | "degraded" | "down";
+type SaveState = "idle" | "saving" | "saved" | "conflict";
+type LoadStatus = "ready" | "loading" | "error";
+export interface Service {
+  id: string; name: string; slug: string; environment: string; health: ServiceHealth;
+  owner: string; runtime: string; region: string; replicas: number; lastDeployedAt: string;
+}
+export interface Instance { id: string; region: string; version: string; status: string; cpuPercent: number; startedAt: string }
+export interface Deployment { id: string; version: string; actor: string; status: "succeeded" | "failed" | "rolled_back"; at: string }
+export interface ConfigPatch { replicas: number }
+export interface EntityDetailProps {
+  service: Service | null; instances: Instance[]; deployments: Deployment[];
+  status?: LoadStatus; metricsStale?: boolean; errorDetail?: string; saveState?: SaveState;
+  onRetry?: () => void; onDeploy?: () => void; onSaveConfig?: (patch: ConfigPatch) => void;
+}
+const HEALTH_META: Record<ServiceHealth, { label: string; cls: string; Icon: typeof CircleCheck }> = {
+  healthy: { label: "Healthy", cls: "text-success", Icon: CircleCheck },
+  degraded: { label: "Degraded", cls: "text-warning", Icon: TriangleAlert },
+  down: { label: "Down", cls: "text-destructive", Icon: CircleX },
+};
+const DEPLOY_LABEL: Record<Deployment["status"], string> = { succeeded: "Deployed", failed: "Deploy failed", rolled_back: "Rolled back" };
+const INSTANCE_STATUS = [{ value: "running", label: "Running" }, { value: "starting", label: "Starting" }, { value: "unknown", label: "Unknown" }];
+const instanceColumns: ColumnDefinition<Instance>[] = [
+  defineColumn<Instance>({ slug: "id", label: "Instance", type: "text", cell: (r) => <span className="font-mono tabular-nums">{r.id}</span> }),
+  defineColumn<Instance>({ slug: "region", label: "Region", type: "text" }),
+  defineColumn<Instance>({ slug: "version", label: "Version", type: "text", cell: (r) => <span className="font-mono">{r.version}</span> }),
+  defineColumn<Instance>({ slug: "status", label: "Status", type: "enum", component: "status", metadata: { options: INSTANCE_STATUS } }),
+  defineColumn<Instance>({ slug: "cpuPercent", label: "CPU", type: "number", metadata: { suffix: "%" } }),
+  defineColumn<Instance>({ slug: "startedAt", label: "Started", type: "date", metadata: { relativeFormat: true } }),
+];
+// Loading shell mirrors the header identity and tab bar, never a centered spinner.
+function DetailSkeleton() {
+  return (
+    <div className="min-h-[100dvh] bg-background p-6">
+      <div className="flex items-center gap-3">
+        <Skeleton className="h-10 w-10 rounded-md" />
+        <div className="flex flex-col gap-2"><Skeleton className="h-5 w-48" /><Skeleton className="h-4 w-32" /></div>
+      </div>
+      <div className="mt-6 flex gap-2"><Skeleton className="h-8 w-24" /><Skeleton className="h-8 w-24" /><Skeleton className="h-8 w-24" /></div>
+      <div className="mt-6"><Skeleton className="h-40 w-full" /></div>
+    </div>
+  );
+}
+// Entity load failure states what happened, why, and the recovery path. Never a dead end.
+function DetailError({ detail, onRetry }: { detail?: string; onRetry?: () => void }) {
+  return (
+    <div className="flex min-h-[100dvh] items-center justify-center bg-background p-6">
+      <Alert variant="destructive" className="max-w-md">
+        <CircleX className="h-4 w-4" />
+        <AlertTitle>Could not load this service</AlertTitle>
+        <AlertDescription>{detail ?? "The deployment API did not respond."} Retry the request, or open the platform status page if it keeps failing.</AlertDescription>
+        <div className="mt-3"><Button size="sm" onClick={onRetry}><RefreshCw className="h-4 w-4" /> Retry</Button></div>
+      </Alert>
+    </div>
+  );
+}
+// Config edit opens beside the work; the save path narrates saving, saved, and the concurrent-edit conflict.
+function EditConfigSheet({ service, open, onOpenChange, saveState, onSave }: {
+  service: Service; open: boolean; onOpenChange: (v: boolean) => void; saveState: SaveState; onSave?: (patch: ConfigPatch) => void;
+}) {
+  const [replicas, setReplicas] = useState(String(service.replicas));
+  const [replicaError, setReplicaError] = useState<string | null>(null);
+  const saving = saveState === "saving";
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right">
+        <SheetHeader>
+          <SheetTitle>Edit configuration</SheetTitle>
+          <SheetDescription>Changes apply on the next deploy of {service.slug}.</SheetDescription>
+        </SheetHeader>
+        <SheetBody className="flex flex-col gap-4">
+          {saveState === "conflict" && (
+            <Alert variant="destructive">
+              <TriangleAlert className="h-4 w-4" />
+              <AlertTitle>Configuration changed elsewhere</AlertTitle>
+              <AlertDescription>Another operator saved this service while you were editing. Reload to see their values before saving yours.</AlertDescription>
+            </Alert>
+          )}
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="replicas">Desired replicas</Label>
+            <Input id="replicas" inputMode="numeric" value={replicas} aria-invalid={!!replicaError} onChange={(e) => setReplicas(e.target.value)}
+              onBlur={() => { const n = Number(replicas); setReplicaError(!Number.isInteger(n) || n < 1 ? "Enter a whole number of one or more." : null); }} />
+            {replicaError && <p className="text-sm text-destructive">{replicaError}</p>}
+          </div>
+          <p role="status" aria-live="polite" className="min-h-4 text-sm text-muted-foreground">
+            {saveState === "saving" && "Saving configuration…"}
+            {saveState === "saved" && "Configuration saved."}
+          </p>
+        </SheetBody>
+        <SheetFooter>
+          <SheetClose asChild><Button variant="secondary" size="sm">Cancel</Button></SheetClose>
+          <Button size="sm" disabled={saving || !!replicaError} onClick={() => onSave?.({ replicas: Number(replicas) })}>
+            {saving && <RefreshCw className="h-4 w-4" />} Save changes
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+// Service entity-detail: identity header, tabbed overview / instances / activity, edit in a side panel.
+export function EntityDetail(props: EntityDetailProps) {
+  const { service, instances, deployments, status = "ready", metricsStale = false, errorDetail, saveState = "idle", onRetry, onDeploy, onSaveConfig } = props;
+  const [tab, setTab] = useState("overview");
+  const [editOpen, setEditOpen] = useState(false);
+  // Keyboard parity for the Edit affordance: press E to open the config panel.
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      const el = e.target as HTMLElement | null;
+      if (el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA")) return;
+      if (e.key === "e" && !editOpen) { e.preventDefault(); setEditOpen(true); }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [editOpen]);
+  if (status === "loading") return <DetailSkeleton />;
+  if (status === "error" || !service) return <DetailError detail={errorDetail} onRetry={onRetry} />;
+  const health = HEALTH_META[service.health];
+  const attributes: { label: string; value: string; mono?: boolean; num?: boolean }[] = [
+    { label: "Environment", value: service.environment }, { label: "Runtime", value: service.runtime, mono: true },
+    { label: "Region", value: service.region, mono: true }, { label: "Owner", value: service.owner },
+    { label: "Desired replicas", value: String(service.replicas), num: true }, { label: "Last deployed", value: new Date(service.lastDeployedAt).toLocaleString(), num: true },
+  ];
+  return (
+    <div className="min-h-[100dvh] bg-background text-foreground">
+      <header className="flex flex-wrap items-start justify-between gap-4 border-b border-border p-6">
+        <div className="flex items-start gap-3">
+          <span className="grid h-10 w-10 place-items-center rounded-md bg-muted text-muted-foreground"><Boxes className="h-5 w-5" /></span>
+          <div>
+            <div className="flex items-center gap-2">
+              <h1 className="text-xl font-medium">{service.name}</h1>
+              <Badge variant="outline" className={`gap-1 ${health.cls}`}><health.Icon className="h-3.5 w-3.5" /> {health.label}</Badge>
+            </div>
+            <p className="mt-1 text-sm text-muted-foreground">{service.slug} · {service.environment}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="secondary" size="sm" onClick={() => setEditOpen(true)}><Pencil className="h-4 w-4" /> Edit config <Kbd className="ml-1">E</Kbd></Button>
+          <Button size="sm" onClick={onDeploy}><Rocket className="h-4 w-4" /> Deploy</Button>
+        </div>
+      </header>
+      <div className="p-6">
+        {metricsStale && (
+          <Alert className="mb-4">
+            <TriangleAlert className="h-4 w-4 text-warning" />
+            <AlertTitle>Live health signals unavailable</AlertTitle>
+            <AlertDescription>The health collector is unreachable, so instance status and the figures below reflect the last cached snapshot and may be stale.</AlertDescription>
+          </Alert>
+        )}
+        <Tabs value={tab} onValueChange={setTab}>
+          <TabsList>
+            <TabsTrigger value="overview">Overview</TabsTrigger>
+            <TabsTrigger value="instances">Instances</TabsTrigger>
+            <TabsTrigger value="activity">Activity</TabsTrigger>
+          </TabsList>
+          <TabsContent value="overview">
+            <section className="mt-4">
+              <h2 className="mb-3 text-sm font-medium">Configuration <span className="text-xs font-normal text-muted-foreground">sample data</span></h2>
+              <Card><CardContent className="p-0">
+                {/* mock: fixture-supplied values, not authoritative production readings */}
+                <dl className="divide-y divide-border">
+                  {attributes.map((a) => (
+                    <div key={a.label} className="flex items-center justify-between gap-4 px-4 py-3 text-sm">
+                      <dt className="text-muted-foreground">{a.label}</dt>
+                      <dd className={`${a.mono ? "font-mono" : ""} ${a.num ? "tabular-nums" : ""}`}>{a.value}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </CardContent></Card>
+            </section>
+          </TabsContent>
+          <TabsContent value="instances">
+            <div className="mt-4">
+              {instances.length === 0 ? (
+                <EmptyState icon={<Boxes className="h-10 w-10 text-muted-foreground" />} title="No running instances"
+                  description="This service has no instances in this environment yet. Deploy a build to bring the first one online."
+                  action={<Button size="sm" onClick={onDeploy}><Rocket className="h-4 w-4" /> Deploy</Button>} />
+              ) : (
+                <Table data={instances} columns={instanceColumns} tableConfig={{ header: true, density: "compact" }} />
+              )}
+            </div>
+          </TabsContent>
+          <TabsContent value="activity">
+            <div className="mt-4">
+              {deployments.length === 0 ? (
+                <EmptyState icon={<ScrollText className="h-10 w-10 text-muted-foreground" />} title="No deployments recorded"
+                  description="Deployment history for this service appears here once the first build ships." />
+              ) : (
+                <ol className="flex flex-col">
+                  {deployments.map((d) => (
+                    <li key={d.id} className="flex items-center gap-3 border-b border-border py-3 text-sm last:border-0">
+                      {d.status === "succeeded" ? <CircleCheck className="h-4 w-4 text-success" /> : <CircleX className="h-4 w-4 text-destructive" />}
+                      <span className="font-mono">{d.version}</span>
+                      <span className="text-muted-foreground">{DEPLOY_LABEL[d.status]} by {d.actor}</span>
+                      <time className="ml-auto font-mono tabular-nums text-muted-foreground">{new Date(d.at).toLocaleString()}</time>
+                    </li>
+                  ))}
+                </ol>
+              )}
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+      <EditConfigSheet service={service} open={editOpen} onOpenChange={setEditOpen} saveState={saveState} onSave={onSaveConfig} />
+    </div>
+  );
+}
+// exemplar fixture data — seeded, domain-shaped
+export const FIXTURE_SEED = 7314;
+export const service: Service = {
+  id: "svc_0e9c1a7b", name: "checkout-api", slug: "checkout-api", environment: "production", health: "degraded",
+  owner: "payments-platform", runtime: "node20", region: "iad", replicas: 6, lastDeployedAt: "2026-07-03T14:22:00Z",
+};
+export const instances: Instance[] = [
+  { id: "checkout-api-7f4b21", region: "iad", version: "2026.7.3-a19f", status: "running", cpuPercent: 34, startedAt: "2026-07-03T14:23:00Z" },
+  { id: "checkout-api-9c02de", region: "iad", version: "2026.7.3-a19f", status: "running", cpuPercent: 51, startedAt: "2026-07-03T14:23:00Z" },
+  { id: "checkout-api-b73a10", region: "sfo", version: "2026.7.3-a19f", status: "running", cpuPercent: 47, startedAt: "2026-07-03T14:24:00Z" },
+  { id: "checkout-api-1de8ff", region: "sfo", version: "2026.6.28-c4e2-hotfix-billing-migration", status: "starting", cpuPercent: 0, startedAt: "2026-07-04T02:11:00Z" },
+  { id: "checkout-api-0000aa", region: "fra", version: "2026.6.28-c4e2", status: "unknown", cpuPercent: 0, startedAt: "2026-07-02T09:05:00Z" },
+  { id: "checkout-api-55b9c1", region: "fra", version: "2026.7.3-a19f", status: "running", cpuPercent: 62, startedAt: "2026-07-03T14:25:00Z" },
+];
+export const deployments: Deployment[] = [
+  { id: "dep_5a1", version: "2026.7.3-a19f", actor: "m.okonkwo", status: "succeeded", at: "2026-07-03T14:22:00Z" },
+  { id: "dep_4f7", version: "2026.7.1-77b0", actor: "priya.nair", status: "rolled_back", at: "2026-07-01T18:40:00Z" },
+  { id: "dep_4e2", version: "2026.6.28-c4e2", actor: "s.delacroix", status: "failed", at: "2026-06-28T22:05:00Z" },
+  { id: "dep_4b0", version: "2026.6.20-11ad", actor: "m.okonkwo", status: "succeeded", at: "2026-06-20T10:33:00Z" },
+];
+export const emptyInstances: Instance[] = [];
+export const emptyDeployments: Deployment[] = [];

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

@@ -0,0 +1,223 @@
+// skills/design/data/operator-pack/exemplars/list-detail.tsx
+// personality-invariant: composition anchor, not a look source.
+import { useEffect, useRef, useState } from "react";
+import { Button } from "@nurix/components/button";
+import { Badge } from "@nurix/components/badge";
+import { Card, CardContent } 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 { Input } from "@nurix/components/input";
+import { Kbd } from "@nurix/components/kbd";
+import { Checkbox } from "@nurix/components/checkbox";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose } from "@nurix/components/sheet";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@nurix/components/native-select";
+import { ArrowDown, ArrowUp, CircleCheck, CircleDot, CircleX, Inbox, Plus, RefreshCw, TriangleAlert } from "lucide-react";
+// A support-ticket queue: many rows of one entity, each with a per-row action and lifecycle (list-detail, the reference archetype).
+type Priority = "urgent" | "high" | "normal";
+type Status = "open" | "pending" | "resolved";
+type LoadStatus = "ready" | "loading" | "error";
+export interface Ticket {
+  id: string; subject: string; requester: string; priority: Priority; status: Status; assignee: string | null; slaMinutes: number; updatedAt: string;
+}
+export interface ListDetailProps {
+  tickets: Ticket[]; status?: LoadStatus; stale?: boolean; errorDetail?: string;
+  onRetry?: () => void; onNew?: () => void; onResolve?: (id: string) => void; onAssignSelected?: (ids: string[]) => void;
+}
+const PAGE_SIZE = 8;
+const STATUS_META: Record<Status, { label: string; cls: string; Icon: typeof CircleDot }> = {
+  open: { label: "Open", cls: "text-warning", Icon: CircleDot },
+  pending: { label: "Pending", cls: "text-muted-foreground", Icon: CircleDot },
+  resolved: { label: "Resolved", cls: "text-success", Icon: CircleCheck },
+};
+const PRIORITY_META: Record<Priority, { label: string; cls: string }> = {
+  urgent: { label: "Urgent", cls: "text-destructive" }, high: { label: "High", cls: "text-warning" }, normal: { label: "Normal", cls: "text-muted-foreground" },
+};
+// Loading shell mirrors the toolbar and table rows, never a centered spinner.
+function QueueSkeleton() {
+  return (
+    <div className="min-h-[100dvh] bg-background p-6">
+      <div className="flex items-center gap-3"><Skeleton className="h-8 w-64" /><Skeleton className="h-8 w-32" /></div>
+      <div className="mt-6 flex flex-col gap-2">{Array.from({ length: 8 }).map((_, i) => <Skeleton key={i} className="h-11 w-full" />)}</div>
+    </div>
+  );
+}
+// Queue load failure states what happened, why, and the recovery path. Never a dead end.
+function QueueError({ detail, onRetry }: { detail?: string; onRetry?: () => void }) {
+  return (
+    <div className="flex min-h-[100dvh] items-center justify-center bg-background p-6">
+      <Alert variant="destructive" className="max-w-md">
+        <CircleX className="h-4 w-4" />
+        <AlertTitle>Could not load the ticket queue</AlertTitle>
+        <AlertDescription>{detail ?? "The queue service did not respond."} Retry the request, or open the status page if it keeps failing.</AlertDescription>
+        <div className="mt-3"><Button size="sm" onClick={onRetry}><RefreshCw className="h-4 w-4" /> Retry</Button></div>
+      </Alert>
+    </div>
+  );
+}
+// The selected row projects into a side panel beside the table, never a modal (floor P3).
+function TicketDetail({ ticket, open, onOpenChange, onResolve }: { ticket: Ticket | null; open: boolean; onOpenChange: (v: boolean) => void; onResolve?: (id: string) => void }) {
+  if (!ticket) return null;
+  const st = STATUS_META[ticket.status];
+  const rows: { label: string; value: string; mono?: boolean; num?: boolean }[] = [
+    { label: "Ticket", value: ticket.id, mono: true }, { label: "Requester", value: ticket.requester },
+    { label: "Priority", value: PRIORITY_META[ticket.priority].label }, { label: "Assignee", value: ticket.assignee ?? "Unassigned" },
+    { label: "SLA remaining", value: `${ticket.slaMinutes} min`, num: true }, { label: "Updated", value: new Date(ticket.updatedAt).toLocaleString(), num: true },
+  ];
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right">
+        <SheetHeader>
+          <SheetTitle>{ticket.subject}</SheetTitle>
+          <SheetDescription className={st.cls}>{st.label} · {ticket.id}</SheetDescription>
+        </SheetHeader>
+        <SheetBody>
+          <dl className="divide-y divide-border">
+            {rows.map((r) => (
+              <div key={r.label} className="flex items-center justify-between gap-4 py-3 text-sm">
+                <dt className="text-muted-foreground">{r.label}</dt>
+                <dd className={`${r.mono ? "font-mono" : ""} ${r.num ? "tabular-nums" : ""}`}>{r.value}</dd>
+              </div>
+            ))}
+          </dl>
+        </SheetBody>
+        <SheetFooter>
+          <SheetClose asChild><Button variant="secondary" size="sm">Close</Button></SheetClose>
+          <Button size="sm" disabled={ticket.status === "resolved"} onClick={() => onResolve?.(ticket.id)}><CircleCheck className="h-4 w-4" /> Resolve</Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+// Ticket queue: toolbar (search, filter, bulk action) + a keyboard-navigable table + a side-panel detail.
+export function ListDetail(props: ListDetailProps) {
+  const { tickets, status = "ready", stale = false, errorDetail, onRetry, onNew, onResolve, onAssignSelected } = props;
+  const [query, setQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState<"all" | Status>("all");
+  const [sortDesc, setSortDesc] = useState(true);
+  const [page, setPage] = useState(0);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [openId, setOpenId] = useState<string | null>(null);
+  const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]);
+  const filtered = tickets
+    .filter((t) => (statusFilter === "all" || t.status === statusFilter) && (query === "" || t.subject.toLowerCase().includes(query.toLowerCase()) || t.id.toLowerCase().includes(query.toLowerCase())))
+    .sort((a, b) => (sortDesc ? 1 : -1) * (new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()));
+  const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE));
+  const pageRows = filtered.slice(page * PAGE_SIZE, page * PAGE_SIZE + PAGE_SIZE);
+  // Roving-tabindex keyboard travel: j/k or arrows move the active row, Enter opens its detail panel.
+  useEffect(() => { rowRefs.current[activeIndex]?.focus(); }, [activeIndex, page]);
+  function onRowsKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "j" || e.key === "ArrowDown") { e.preventDefault(); setActiveIndex((i) => Math.min(i + 1, pageRows.length - 1)); }
+    else if (e.key === "k" || e.key === "ArrowUp") { e.preventDefault(); setActiveIndex((i) => Math.max(i - 1, 0)); }
+    else if (e.key === "Enter" && pageRows[activeIndex]) { e.preventDefault(); setOpenId(pageRows[activeIndex].id); }
+  }
+  function toggle(id: string) { setSelected((s) => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; }); }
+  const allOnPage = pageRows.length > 0 && pageRows.every((t) => selected.has(t.id));
+  if (status === "loading") return <QueueSkeleton />;
+  if (status === "error") return <QueueError detail={errorDetail} onRetry={onRetry} />;
+  const start = filtered.length === 0 ? 0 : page * PAGE_SIZE + 1;
+  const end = Math.min(filtered.length, (page + 1) * PAGE_SIZE);
+  return (
+    <div className="min-h-[100dvh] bg-background text-foreground">
+      <header className="flex flex-wrap items-center justify-between gap-3 border-b border-border p-6">
+        <div><h1 className="text-xl font-medium">Ticket queue</h1><p className="mt-1 text-sm text-muted-foreground">Scan, triage, and resolve support tickets.</p></div>
+        <Button size="sm" onClick={onNew}><Plus className="h-4 w-4" /> New ticket <Kbd className="ml-1">N</Kbd></Button>
+      </header>
+      <div className="flex flex-wrap items-center gap-2 border-b border-border px-6 py-3">
+        <Input type="search" aria-label="Search tickets by subject or id" placeholder="Search tickets" value={query} onChange={(e) => { setQuery(e.target.value); setPage(0); }} className="max-w-xs" />
+        <Select value={statusFilter} onValueChange={(v) => { setStatusFilter(v as "all" | Status); setPage(0); }}>
+          <SelectTrigger className="w-40" aria-label="Filter by status"><SelectValue /></SelectTrigger>
+          <SelectContent><SelectItem value="all">All statuses</SelectItem><SelectItem value="open">Open</SelectItem><SelectItem value="pending">Pending</SelectItem><SelectItem value="resolved">Resolved</SelectItem></SelectContent>
+        </Select>
+        {selected.size > 0 && <Button variant="secondary" size="sm" onClick={() => { onAssignSelected?.([...selected]); setSelected(new Set()); }}>Assign {selected.size} to me</Button>}
+      </div>
+      {stale && (
+        <Alert className="mx-6 mt-4">
+          <TriangleAlert className="h-4 w-4 text-warning" />
+          <AlertTitle>Showing a cached snapshot</AlertTitle>
+          <AlertDescription>The live queue feed is unreachable, so SLA timers and statuses below may be stale until it reconnects.</AlertDescription>
+        </Alert>
+      )}
+      <div className="p-6">
+        {filtered.length === 0 ? (
+          tickets.length === 0 ? (
+            <EmptyState icon={<Inbox className="h-10 w-10 text-muted-foreground" />} title="No tickets yet"
+              description="When requesters open tickets they land here, newest first. Create one to see how the queue reads."
+              action={<Button size="sm" onClick={onNew}><Plus className="h-4 w-4" /> New ticket</Button>} />
+          ) : (
+            <EmptyState icon={<Inbox className="h-10 w-10 text-muted-foreground" />} title="No tickets match these filters"
+              description="No open ticket matches your search and status filter. Clear them to see the full queue."
+              action={<Button size="sm" variant="secondary" onClick={() => { setQuery(""); setStatusFilter("all"); }}>Clear filters</Button>} />
+          )
+        ) : (
+          <Card><CardContent className="p-0">
+            <div className="overflow-auto" onKeyDown={onRowsKeyDown}>
+              <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="w-10 px-4 py-2"><Checkbox checked={allOnPage} aria-label="Select all on this page" onCheckedChange={() => setSelected((s) => { const n = new Set(s); allOnPage ? pageRows.forEach((t) => n.delete(t.id)) : pageRows.forEach((t) => n.add(t.id)); return n; })} /></th>
+                    <th scope="col" className="px-4 py-2 font-medium">Ticket</th>
+                    <th scope="col" className="px-4 py-2 font-medium">Subject</th>
+                    <th scope="col" className="px-4 py-2 font-medium">Priority</th>
+                    <th scope="col" className="px-4 py-2 font-medium">Status</th>
+                    <th scope="col" className="px-4 py-2 text-right font-medium tabular-nums">SLA</th>
+                    <th scope="col" aria-sort={sortDesc ? "descending" : "ascending"} className="px-4 py-2 text-right font-medium">
+                      <button type="button" onClick={() => setSortDesc((v) => !v)} className="ml-auto inline-flex items-center gap-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Updated {sortDesc ? <ArrowDown className="h-3.5 w-3.5" /> : <ArrowUp className="h-3.5 w-3.5" />}</button>
+                    </th>
+                    <th scope="col" className="px-4 py-2 text-right font-medium">Action</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {pageRows.map((t, i) => {
+                    const st = STATUS_META[t.status];
+                    return (
+                      <tr key={t.id} ref={(el) => { rowRefs.current[i] = el; }} tabIndex={i === activeIndex ? 0 : -1} aria-selected={selected.has(t.id)}
+                        onClick={() => { setActiveIndex(i); setOpenId(t.id); }}
+                        className="cursor-pointer border-b border-border last:border-0 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring">
+                        <td className="px-4 py-2" onClick={(e) => e.stopPropagation()}><Checkbox checked={selected.has(t.id)} aria-label={`Select ${t.id}`} onCheckedChange={() => toggle(t.id)} /></td>
+                        <td className="px-4 py-2 font-mono tabular-nums">{t.id}</td>
+                        <td className="max-w-xs truncate px-4 py-2">{t.subject}</td>
+                        <td className={`px-4 py-2 ${PRIORITY_META[t.priority].cls}`}>{PRIORITY_META[t.priority].label}</td>
+                        <td className="px-4 py-2"><Badge variant="outline" className={`gap-1 ${st.cls}`}><st.Icon className="h-3.5 w-3.5" /> {st.label}</Badge></td>
+                        <td className="px-4 py-2 text-right font-mono tabular-nums">{t.slaMinutes}</td>
+                        <td className="px-4 py-2 text-right font-mono tabular-nums text-muted-foreground">{new Date(t.updatedAt).toLocaleDateString()}</td>
+                        <td className="px-4 py-2 text-right" onClick={(e) => e.stopPropagation()}>
+                          <Button size="sm" variant="ghost" disabled={t.status === "resolved"} onClick={() => onResolve?.(t.id)}>Resolve</Button>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+            <div className="flex items-center justify-between gap-3 border-t border-border px-4 py-3 text-sm text-muted-foreground">
+              <span className="tabular-nums">{start}-{end} of {filtered.length}</span>
+              <div className="flex items-center gap-2">
+                <Button size="sm" variant="secondary" disabled={page === 0} onClick={() => setPage((p) => Math.max(0, p - 1))}>Previous</Button>
+                <span className="tabular-nums">Page {page + 1} of {pageCount}</span>
+                <Button size="sm" variant="secondary" disabled={page + 1 >= pageCount} onClick={() => setPage((p) => Math.min(pageCount - 1, p + 1))}>Next</Button>
+              </div>
+            </div>
+          </CardContent></Card>
+        )}
+      </div>
+      <TicketDetail ticket={filtered.find((t) => t.id === openId) ?? null} open={openId !== null} onOpenChange={(v) => setOpenId(v ? openId : null)} onResolve={onResolve} />
+    </div>
+  );
+}
+// exemplar fixture data — seeded, domain-shaped
+export const FIXTURE_SEED = 5120;
+export const tickets: Ticket[] = [
+  { id: "TCK-4821", subject: "Checkout returns 500 on saved cards", requester: "m.okonkwo", priority: "urgent", status: "open", assignee: null, slaMinutes: 12, updatedAt: "2026-07-04T09:41:00Z" },
+  { id: "TCK-4820", subject: "SSO redirect loops for the eu tenant on first login of the day", requester: "priya.nair", priority: "high", status: "pending", assignee: "s.delacroix", slaMinutes: 48, updatedAt: "2026-07-04T09:12:00Z" },
+  { id: "TCK-4816", subject: "Export CSV truncates at 10k rows", requester: "j.watanabe", priority: "normal", status: "open", assignee: "a.novak", slaMinutes: 220, updatedAt: "2026-07-04T08:55:00Z" },
+  { id: "TCK-4814", subject: "Webhook retries stop after one 429", requester: "l.fernandez", priority: "high", status: "open", assignee: null, slaMinutes: 33, updatedAt: "2026-07-04T08:20:00Z" },
+  { id: "TCK-4809", subject: "Timezone off by one hour in the audit log", requester: "d.abiodun", priority: "normal", status: "pending", assignee: "s.delacroix", slaMinutes: 640, updatedAt: "2026-07-03T22:05:00Z" },
+  { id: "TCK-4802", subject: "Rate-limit banner never clears", requester: "h.ito", priority: "normal", status: "resolved", assignee: "a.novak", slaMinutes: 0, updatedAt: "2026-07-03T19:48:00Z" },
+  { id: "TCK-4799", subject: "Bulk assign silently drops the last selection", requester: "m.okonkwo", priority: "high", status: "open", assignee: null, slaMinutes: 90, updatedAt: "2026-07-03T18:31:00Z" },
+  { id: "TCK-4790", subject: "Search ignores the status filter on page two", requester: "priya.nair", priority: "normal", status: "pending", assignee: "a.novak", slaMinutes: 410, updatedAt: "2026-07-03T16:02:00Z" },
+  { id: "TCK-4781", subject: "Session expires mid-form and loses entered values", requester: "j.watanabe", priority: "urgent", status: "open", assignee: "s.delacroix", slaMinutes: 5, updatedAt: "2026-07-03T14:44:00Z" },
+  { id: "TCK-4778", subject: "Column picker resets on reload", requester: "l.fernandez", priority: "normal", status: "resolved", assignee: "a.novak", slaMinutes: 0, updatedAt: "2026-07-03T11:19:00Z" },
+];
+export const emptyTickets: Ticket[] = [];