@nurix/etna 0.18.19 → 0.18.21

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[] = [];

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

@@ -0,0 +1,249 @@
+// skills/design/data/operator-pack/exemplars/log-stream.tsx
+// personality-invariant: composition anchor, not a look source.
+import * as React from "react";
+import { ScrollText, Search, ChevronRight, ChevronDown, Circle, TriangleAlert, WifiOff, RotateCw, ListFilter, Inbox } from "lucide-react";
+import { Button } from "@nurix/components/button";
+import { Input } from "@nurix/components/input";
+import { Switch } from "@nurix/components/switch";
+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 { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@nurix/components/native-select";
+import { cn } from "@nurix/components/utils";
+
+export type LogLevel = "debug" | "info" | "warn" | "error";
+
+export interface LogLine {
+  id: string;
+  timestamp: string;
+  level: LogLevel;
+  source: string;
+  message: string;
+  status: number | null;
+  latencyMs: number | null;
+  detail: Record<string, string | number>;
+}
+export interface DegradedInfo {
+  droppedLines: number;
+  reason: string;
+}
+export interface LogStreamProps {
+  lines?: LogLine[];
+  isLoading?: boolean;
+  error?: string | null;
+  degraded?: DegradedInfo | null;
+  initiallyFollowing?: boolean;
+  onRetry?: () => void;
+}
+
+const RANK: Record<LogLevel, number> = { debug: 0, info: 1, warn: 2, error: 3 };
+const RANK_FLOOR: Record<string, number> = { all: 0, info: 1, warn: 2, error: 3 };
+const LEVEL_META: Record<LogLevel, { label: string; className: string }> = {
+  error: { label: "ERR", className: "text-destructive" },
+  warn: { label: "WARN", className: "text-warning" },
+  info: { label: "INFO", className: "text-foreground" },
+  debug: { label: "DBG", className: "text-muted-foreground" },
+};
+
+const LEVEL_OPTIONS: { value: string; label: string }[] = [
+  { value: "all", label: "All levels" },
+  { value: "info", label: "Info and up" },
+  { value: "warn", label: "Warnings and up" },
+  { value: "error", label: "Errors only" },
+];
+// Slice the stable "HH:MM:SS.mmm" clock out of an ISO timestamp (timezone-free, deterministic).
+function formatClock(iso: string): string {
+  return iso.slice(11, 23);
+}
+// Test whether a line matches the free-text filter across message and source.
+function matchesQuery(line: LogLine, needle: string): boolean {
+  if (!needle) return true;
+  const q = needle.toLowerCase();
+  return line.message.toLowerCase().includes(q) || line.source.toLowerCase().includes(q);
+}
+// Append-only edge-ingest log stream: filter, tail-follow, and inline-expand immutable events.
+export function LogStream({ lines, isLoading = false, error = null, degraded = null, initiallyFollowing = true, onRetry }: LogStreamProps) {
+  const seed = lines ?? SEED_LINES;
+  const [query, setQuery] = React.useState("");
+  const [level, setLevel] = React.useState("all");
+  const [isFollowing, setIsFollowing] = React.useState(initiallyFollowing);
+  const [liveCount, setLiveCount] = React.useState(0);
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const [expandedId, setExpandedId] = React.useState<string | null>(null);
+  const rowRefs = React.useRef<(HTMLButtonElement | null)[]>([]);
+  const bottomRef = React.useRef<HTMLDivElement | null>(null);
+  const searchRef = React.useRef<HTMLInputElement | null>(null);
+
+  const allLines = [...seed, ...STREAM_LINES.slice(0, liveCount)];
+  const visible = allLines.filter((l) => RANK[l.level] >= RANK_FLOOR[level] && matchesQuery(l, query));
+  const hasFilter = query.trim() !== "" || level !== "all";
+
+  // Advance the deterministic tail one line at a time while following, until the pool drains.
+  React.useEffect(() => {
+    if (!isFollowing || liveCount >= STREAM_LINES.length) return;
+    const id = setInterval(() => setLiveCount((n) => Math.min(STREAM_LINES.length, n + 1)), 2000);
+    return () => clearInterval(id);
+  }, [isFollowing, liveCount]);
+
+  // Keep the newest line in view whenever the tail grows and follow is engaged.
+  React.useEffect(() => {
+    if (isFollowing) bottomRef.current?.scrollIntoView({ block: "end" });
+  }, [visible.length, isFollowing]);
+
+  // Roving-tabindex row travel: arrows and Home/End move focus without leaving the list.
+  function onListKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
+    const last = visible.length - 1;
+    let next = activeIndex;
+    if (e.key === "ArrowDown") next = Math.min(last, activeIndex + 1);
+    else if (e.key === "ArrowUp") next = Math.max(0, activeIndex - 1);
+    else if (e.key === "Home") next = 0;
+    else if (e.key === "End") next = last;
+    else return;
+    e.preventDefault();
+    setActiveIndex(next);
+    rowRefs.current[next]?.focus();
+  }
+
+  // Focus the filter input on "/" from anywhere outside a text field.
+  function onRootKeyDown(e: React.KeyboardEvent<HTMLElement>) {
+    if (e.key === "/" && !(e.target as HTMLElement).matches("input, textarea, [contenteditable]")) {
+      e.preventDefault();
+      searchRef.current?.focus();
+    }
+  }
+
+  return (
+    <section onKeyDown={onRootKeyDown} data-density-step="tighter" className="flex min-h-[100dvh] flex-col bg-background text-foreground">
+      <header className="flex flex-col gap-2 border-b border-border px-4 py-3">
+        <div className="flex items-center justify-between gap-3">
+          <div className="flex items-center gap-2">
+            <ScrollText aria-hidden className="size-4 text-muted-foreground" />
+            <h1 className="text-base font-semibold">Edge ingest log</h1>
+            <Badge variant="outline" className="gap-1.5">
+              <Circle aria-hidden className={cn("size-2 fill-current", isFollowing ? "text-success animate-pulse motion-reduce:animate-none" : "text-muted-foreground")} />{isFollowing ? "Live" : "Paused"}
+            </Badge>
+          </div>
+          <label className="flex items-center gap-2 text-xs text-muted-foreground">Follow tail
+            <Switch checked={isFollowing} onChange={setIsFollowing} aria-label="Follow the live tail" />
+          </label>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="relative min-w-0 flex-1">
+            <Search aria-hidden className="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input ref={searchRef} type="search" aria-label="Filter log lines" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Filter by message or source" className="pl-8" />
+          </div>
+          <Select value={level} onValueChange={setLevel}>
+            <SelectTrigger aria-label="Minimum severity" className="w-44"><SelectValue /></SelectTrigger>
+            <SelectContent>{LEVEL_OPTIONS.map((o) => (<SelectItem key={o.value} value={o.value}>{o.label}</SelectItem>))}</SelectContent>
+          </Select>
+          <span className="hidden items-center gap-1 text-xs text-muted-foreground sm:flex">
+            <Kbd size="sm">↑</Kbd><Kbd size="sm">↓</Kbd> move<Kbd size="sm">Enter</Kbd> expand
+          </span>
+        </div>
+      </header>
+      {degraded ? (
+        <div role="status" className="flex items-center gap-2 border-b border-border bg-muted px-4 py-1.5 text-xs">
+          <TriangleAlert aria-hidden className="size-4 shrink-0 text-warning" />
+          <span className="font-medium">Buffer truncated.</span>
+          <span className="tabular-nums text-muted-foreground">{degraded.droppedLines.toLocaleString()} lines dropped. {degraded.reason}</span>
+        </div>
+      ) : null}
+      {error ? (
+        <div role="alert" className="flex min-h-0 flex-1 flex-col items-center justify-center gap-3 px-4 py-8 text-center">
+          <WifiOff aria-hidden className="size-8 text-destructive" />
+          <div className="space-y-1">
+            <p className="text-sm font-semibold">Log stream disconnected</p>
+            <p className="max-w-md text-sm text-muted-foreground">{error}</p>
+          </div>
+          <div role="status" className="flex items-center gap-2 text-xs text-muted-foreground">
+            <RotateCw aria-hidden className="size-4 animate-spin motion-reduce:animate-none" />Reconnecting to the collector…
+          </div>
+          <Button size="sm" onClick={onRetry}>Retry connection</Button>
+        </div>
+      ) : isLoading ? (
+        <div aria-hidden className="min-h-0 flex-1 overflow-hidden font-mono">
+          {SKELETON_ROWS.map((w, i) => (
+            <div key={i} className="flex items-center gap-3 border-b border-border px-4 py-1">
+              <Skeleton className="size-3.5 shrink-0 rounded-full" /><Skeleton className="h-3 w-24 shrink-0" /><Skeleton className="h-3 w-12 shrink-0" />
+              <Skeleton className="h-3 w-36 shrink-0" /><Skeleton className={cn("h-3", w)} />
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="flex items-center gap-3 border-b border-border px-4 py-1.5 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+          <span className="w-24 shrink-0 pl-6">Time</span><span className="w-12 shrink-0">Level</span><span className="w-36 shrink-0">Source</span>
+          <span className="min-w-0 flex-1">Message</span><span className="w-14 shrink-0 text-right">Status</span><span className="w-24 shrink-0 text-right">Latency</span>
+        </div>
+      )}
+      {!error && !isLoading ? (
+        <div role="log" aria-live="polite" aria-relevant="additions" aria-label="Edge ingest log stream, newest last" onKeyDown={onListKeyDown} className="min-h-0 flex-1 overflow-auto font-mono">
+          {visible.length === 0 ? (
+            <div className="flex h-full items-center justify-center px-4 py-8">
+              {hasFilter ? (
+                <EmptyState icon={<ListFilter aria-hidden className="size-8 text-muted-foreground" />} title="No lines match these filters" description="Events are still arriving, but none match the current search and severity. Loosen the filter to see the tail again." action={<Button size="sm" variant="secondary" onClick={() => { setQuery(""); setLevel("all"); }}>Clear filters</Button>} />
+              ) : (
+                <EmptyState icon={<Inbox aria-hidden className="size-8 text-muted-foreground" />} title="No events received yet" description="This stream is connected and following the edge-ingest collector. New lines appear here as requests are processed." />
+              )}
+            </div>
+          ) : (
+            <>
+              {visible.map((line, i) => {
+                const meta = LEVEL_META[line.level];
+                const isOpen = expandedId === line.id;
+                return (
+                  <div key={line.id} className="border-b border-border">
+                    <button ref={(el) => { rowRefs.current[i] = el; }} tabIndex={i === activeIndex ? 0 : -1} aria-expanded={isOpen} onClick={() => { setActiveIndex(i); setExpandedId((cur) => (cur === line.id ? null : line.id)); }} className="flex w-full items-center gap-3 px-4 py-1 text-left hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring">
+                      {isOpen ? <ChevronDown aria-hidden className="size-3.5 shrink-0 text-muted-foreground" /> : <ChevronRight aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />}
+                      <span className="w-24 shrink-0 tabular-nums text-muted-foreground">{formatClock(line.timestamp)}</span>
+                      <span className={cn("w-12 shrink-0 font-medium", meta.className)}>{meta.label}</span>
+                      <span className="w-36 shrink-0 truncate text-muted-foreground">{line.source}</span>
+                      <span className="min-w-0 flex-1 truncate">{line.message}</span>
+                      <span className="w-14 shrink-0 text-right tabular-nums text-muted-foreground">{line.status ?? "–"}</span>
+                      <span className="w-24 shrink-0 text-right tabular-nums text-muted-foreground">{line.latencyMs == null ? "–" : `${line.latencyMs} ms`}</span>
+                    </button>
+                    {isOpen ? (
+                      <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 border-t border-border bg-muted px-4 py-2 pl-11 text-muted-foreground">
+                        {Object.entries(line.detail).map(([k, v]) => (
+                          <React.Fragment key={k}><dt>{k}</dt><dd className="truncate tabular-nums text-foreground">{String(v)}</dd></React.Fragment>
+                        ))}
+                      </dl>
+                    ) : null}
+                  </div>
+                );
+              })}
+              <div ref={bottomRef} aria-hidden />
+            </>
+          )}
+        </div>
+      ) : null}
+      <footer className="flex items-center justify-between gap-3 border-t border-border px-4 py-1.5 text-xs text-muted-foreground">
+        <span className="tabular-nums">Showing {visible.length} of {allLines.length} lines</span>
+        <span className="hidden items-center gap-1 sm:flex"><Kbd size="sm">/</Kbd> to filter</span>
+      </footer>
+    </section>
+  );
+}
+
+// exemplar fixture data — seeded, domain-shaped
+const SEED_LINES: LogLine[] = [
+  { id: "l-01", timestamp: "2026-07-04T09:12:03.109Z", level: "debug", source: "edge-ingest.tls", message: "TLS handshake completed for client 10.2.4.19", status: null, latencyMs: 4, detail: { cipher: "TLS_AES_128_GCM", client_ip: "10.2.4.19", alpn: "h2" } },
+  { id: "l-02", timestamp: "2026-07-04T09:12:03.842Z", level: "info", source: "edge-ingest.router", message: "POST /v1/events accepted, 3 records queued", status: 202, latencyMs: 34, detail: { upstream: "queue.primary", partition: 4, trace_id: "trc_a19f3c", bytes_in: 2048 } },
+  { id: "l-03", timestamp: "2026-07-04T09:12:04.210Z", level: "info", source: "edge-ingest.router", message: "GET /v1/streams/live upgraded to websocket", status: 101, latencyMs: 12, detail: { upstream: "gateway.ws", trace_id: "trc_b2e0d1", conn_id: "ws_7741" } },
+  { id: "l-04", timestamp: "2026-07-04T09:12:05.556Z", level: "warn", source: "edge-ingest.ratelimit", message: "Client tenant_4821 throttled, 429 returned", status: 429, latencyMs: 8, detail: { tenant: "tenant_4821", limit: "600/min", retry_after_s: 30, trace_id: "trc_c4d1a8" } },
+  { id: "l-05", timestamp: "2026-07-04T09:12:06.001Z", level: "debug", source: "edge-ingest.cache", message: "Config snapshot refreshed from control-plane", status: null, latencyMs: 21, detail: { version: 1183, keys: 47, source_region: "eu-central" } },
+  { id: "l-06", timestamp: "2026-07-04T09:12:06.733Z", level: "error", source: "edge-ingest.writer", message: "Upstream queue.primary timed out after 5000 ms", status: 504, latencyMs: 5003, detail: { upstream: "queue.primary", trace_id: "trc_d9a2f0", attempt: 2, error: "context deadline exceeded" } },
+  { id: "l-07", timestamp: "2026-07-04T09:12:07.418Z", level: "info", source: "edge-ingest.writer", message: "Retry succeeded on queue.secondary", status: 202, latencyMs: 61, detail: { upstream: "queue.secondary", trace_id: "trc_d9a2f0", attempt: 3, bytes_in: 2048 } },
+  { id: "l-08", timestamp: "2026-07-04T09:12:08.902Z", level: "warn", source: "edge-ingest.schema", message: "Event field ts coerced from string to int64", status: 202, latencyMs: 39, detail: { trace_id: "trc_e5f712", field: "ts", records: 3 } },
+  { id: "l-09", timestamp: "2026-07-04T09:12:09.377Z", level: "info", source: "edge-ingest.router", message: "POST /v1/events accepted, 12 records queued", status: 202, latencyMs: 44, detail: { upstream: "queue.primary", partition: 1, trace_id: "trc_f00312", bytes_in: 8192 } },
+];
+
+const STREAM_LINES: LogLine[] = [
+  { id: "s-01", timestamp: "2026-07-04T09:12:10.845Z", level: "info", source: "edge-ingest.router", message: "GET /v1/health checked by readiness probe", status: 200, latencyMs: 3, detail: { probe: "readiness", trace_id: "trc_1a4409" } },
+  { id: "s-02", timestamp: "2026-07-04T09:12:12.110Z", level: "debug", source: "edge-ingest.cache", message: "Evicted 128 stale entries from hot set", status: null, latencyMs: 2, detail: { evicted: 128, hot_set: 4096 } },
+  { id: "s-03", timestamp: "2026-07-04T09:12:13.492Z", level: "error", source: "edge-ingest.auth", message: "Token signature rejected for tenant_5590", status: 401, latencyMs: 6, detail: { tenant: "tenant_5590", reason: "kid not found", trace_id: "trc_2b7133" } },
+  { id: "s-04", timestamp: "2026-07-04T09:12:14.938Z", level: "warn", source: "edge-ingest.ratelimit", message: "Client tenant_4821 at 92% of quota", status: 200, latencyMs: 7, detail: { tenant: "tenant_4821", used: "552/600", trace_id: "trc_3c0955" } },
+  { id: "s-05", timestamp: "2026-07-04T09:12:16.201Z", level: "info", source: "edge-ingest.writer", message: "Batch flushed to queue.primary, 12 records", status: 202, latencyMs: 58, detail: { upstream: "queue.primary", trace_id: "trc_f00312", flushed: 12 } },
+];
+
+const SKELETON_ROWS = ["w-2/3", "w-1/2", "w-3/4", "w-2/5", "w-3/5", "w-1/2", "w-2/3", "w-1/3", "w-3/5", "w-1/2"];

package/data/harnesses/code/skills/design/data/operator-pack/fixtures.md

@@ -0,0 +1,88 @@
+# Fixtures — data as design material
+
+The rows an operator surface renders are not scaffolding for the "real" design — they **are** the design input. Density, truncation, overflow, and every lifecycle state are properties of *the data under them*: a queue is dense or sparse because of how many rows it holds and how long their strings run; a cell truncates or wraps because of what it contains; an empty state exists only when the query returns nothing. Design them against three short rows named "Item 1" and you have designed nothing that production will look like.
+
+So fixtures come **first** — generated before any surface is composed (the create `fixtures` phase, [create.md](../../references/create.md)) — and they are realistic, seeded, and volume-bearing. **Rows exist to count.** The `dep`/`spc` density thresholds and the `sta` state-presence rules are only *bindable* against real volumes, long strings, and unhappy values; without them the proxies (rows per viewport, cells per screen) have nothing to measure.
+
+**Loads** at the create `fixtures` phase, and whenever improve/introspect diagnoses density or state coverage on an existing UI. Reads the entity and `temporal` facts from `docs/design/structure.md`. Pairs with [lifecycle.md](../../references/lifecycle.md) — this file produces the data those states are filled with.
+
+## What "realistic" means
+
+A fixture requirement is not "some data" — it is data shaped like production, exercising the conditions the hard dimensions live in. Every entity's fixtures satisfy all of these:
+
+- **Domain-shaped.** Names, values, and identifiers that could be a real row — real assignee names, real-looking subjects, plausible timestamps and statuses. Never `Item 1` / `Row 2`, never lorem ipsum, never `John Doe` / `Acme` / `Nexus`.
+- **Seeded and deterministic.** Same seed → same rows, every run. Randomness runs through falso's seed API (`seed(...)` before generation) or a local PRNG — never `Math.random()`. A fixture that shifts between runs is not a fixture.
+- **Volume that exercises density.** Queues and tables carry realistic depth — hundreds of rows (a 500-row queue), not a handful. Density is unmeasurable on five rows.
+- **Long strings that exercise truncation.** Some subjects, names, and paths run long enough to force the truncation and wrapping decisions — mixed with short ones, so both the tight and the overflowing case are on screen at once.
+- **Unhappy values.** `null` and missing fields, zero, negative numbers, huge numbers, empty collections, overdue and far-future dates, statuses at every lifecycle stage. The happy row is the rare row.
+- **Degraded payloads.** Partial objects and failed enrichments — a row whose join didn't resolve, a record whose secondary fetch returned nothing — so the `partial/degraded` state has real data to render.
+- **Explicit empty and error variants per surface.** Every surface's declared states ([lifecycle.md](../../references/lifecycle.md)) get their own fixture: an empty variant (`[]`) and a degraded variant. Error is the no-data case the state-shell owns, but the pack still declares the state so it is exercised.
+
+## Module shape
+
+One module per entity, at `src/fixtures/<entity>.ts`, exporting **typed arrays** plus the **seed constant** it was generated under. Per-surface state variants are named exports co-located in the entity's module, keyed to the surface states they feed (`emptyTickets`, `degradedTickets`). Surfaces import these arrays; the model **never** freehands data inline in a surface file.
+
+```ts
+// src/fixtures/tickets.ts — seeded ticket-queue fixtures (generated; do not hand-edit rows)
+import { seed, randUuid, randFullName, randCompanyName, randRecentDate, randPastDate } from "@ngneat/falso";
+import type { Ticket } from "../types/ticket";
+
+export const TICKETS_SEED = 4173;
+seed(String(TICKETS_SEED));
+
+const STATUSES = ["new", "open", "pending", "escalated", "resolved", "closed"] as const;
+const LONG_SUBJECT =
+  "Checkout returns 500 on multi-currency carts after the 3.4 billing migration when tax is estimated";
+
+// One row shaped like production — real names, real timestamps, unhappy values seeded in by index.
+function buildTicket(_: unknown, i: number): Ticket {
+  const overdue = i % 7 === 0;
+  const enrichmentFailed = i % 11 === 0;
+  return {
+    id: randUuid(),
+    subject: i % 5 === 0 ? LONG_SUBJECT : `Payment retry failing for ${randCompanyName()}`,
+    status: STATUSES[i % STATUSES.length],
+    assignee: i % 9 === 0 ? null : randFullName(),
+    account: enrichmentFailed ? null : randCompanyName(),
+    slaMinutesRemaining: overdue ? -Math.floor(i * 3.5) : 240 - (i % 240),
+    replies: i % 13 === 0 ? 0 : i % 47,
+    dueAt: overdue ? randPastDate() : randRecentDate(),
+    createdAt: randPastDate(),
+  };
+}
+
+// 500 rows exercise queue density; statuses distributed across the full lifecycle.
+export const tickets: Ticket[] = Array.from({ length: 500 }, buildTicket);
+
+// The same surface, empty: a first-time or filtered-to-nothing queue.
+export const emptyTickets: Ticket[] = [];
+
+// The same surface, degraded: enrichment failed — assignee and account come back null.
+export const degradedTickets: Ticket[] = tickets
+  .slice(0, 12)
+  .map((t) => ({ ...t, assignee: null, account: null, slaMinutesRemaining: 0 }));
+```
+
+The `Ticket` type lives in `src/types/`; fixtures import it, never redefine it. The seed constant is exported so the data is reproducible and traceable — regeneration under the same seed yields byte-identical rows.
+
+## The generator contract
+
+`generate-fixtures.mjs <structure.md> --seed <n> --out <dir>` derives the entity shapes from the structure map and emits these modules. It never guesses a shape — the map is the source:
+
+- **From each entity's `attributes`** it derives the field set and picks a falso generator per field by name and type (a `name` field → `randFullName`, a `*_at` date → `randRecentDate`, an amount → a seeded number in a plausible range).
+- **From each entity's `lifecycle`** it distributes rows across the status values, so every state in the model appears in the data.
+- **From `relationships`** it wires cross-entity references to real ids from the related module, so joins resolve to actual rows (and degraded variants are the ones where they deliberately don't).
+- **From each surface's declared `states`** ([surface-catalog.md](surface-catalog.md), `structure.md`) it emits the empty and degraded variants that surface needs.
+
+The run's `--seed <n>` is the base; each module records the effective seed it generated under (`<ENTITY>_SEED`) so a single module reproduces independently and the whole run reproduces from one number ([create.md](../../references/create.md): "a fixed seed makes every run reproducible"). Volumes, long-string injection, unhappy-value distribution, and degraded payloads are the generator's job, not the model's — **the model wires surfaces to the emitted fixtures; it never authors rows.**
+
+## Anti-patterns
+
+Fixtures are mock data, so the anti-fabrication discipline applies to them in full — a mock row must read as *domain-real*, never as *fabricated-real*:
+
+- **Lorem ipsum, `Item 1`, placeholder slop.** Domain-shaped values only.
+- **`John Doe` / `Acme` / `Nexus` and invented vanity metrics.** No fabricated hero statistics (`99.98% UPTIME SLA`, `10,000+ customers`, fake round numbers) dressed as production achievements. Operator fixtures carry operational values — queue depths, timestamps, statuses — not marketing numbers.
+- **The mock-marker convention on display numbers.** A fixture-supplied metric that a viewer could mistake for an authoritative production statistic is marked at the render site per the catalog convention — fake-precise mock numbers carry `<!-- mock -->`, unknowable values use a `[metric]` placeholder — so a fixture number is never read as ground truth.
+- **Unseeded randomness.** `Math.random()`, `Date.now()`, or any non-reproducible source. Seed everything.
+- **Fixtures authored after surfaces.** Data comes first; a surface composed before its data exists is designed against nothing. The `fixtures` phase gate fails if a surface file was written before the fixtures ([create.md](../../references/create.md)).
+- **Happy-path-only rows.** No volume, no long strings, no unhappy or degraded values, no empty/error variants — the states and density that make an operator UI hard go unexercised, and their thresholds unbindable.