@nurix/etna 0.19.10 → 0.19.12

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

@@ -1,224 +0,0 @@
-// skills/design/data/operator-pack/exemplars/list-detail.tsx — reference render — imitate the ambition and the composition; the project's tokens supply the look.
-// Surface: baseline
-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 font-sans">
-      <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 font-sans">
-      <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 (f03); the panel
-// rides the elevation.overlay + surface-overlay ladder so it reads as the topmost layer.
-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" className="bg-surface-overlay shadow-overlay">
-        <SheetHeader>
-          <SheetTitle className="text-h3">{ticket.subject}</SheetTitle>
-          <SheetDescription className={`text-small ${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-small">
-                <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 font-sans text-foreground">
-      <header className="flex flex-wrap items-center justify-between gap-3 border-b border-border p-6">
-        <div><h1 className="text-h1">Ticket queue</h1><p className="mt-1 text-small 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-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="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="motion-lift 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-caption 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

@@ -1,249 +0,0 @@
-// skills/design/data/operator-pack/exemplars/log-stream.tsx — reference render — imitate the ambition and the composition; the project's tokens supply the look.
-// Surface: baseline
-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 font-sans 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-h2">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-caption 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-caption 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-caption">
-          <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-h3">Log stream disconnected</p>
-            <p className="max-w-md text-small text-muted-foreground">{error}</p>
-          </div>
-          <div role="status" className="flex items-center gap-2 text-caption 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-caption font-medium uppercase tracking-wide text-muted-foreground">
-          <span className="w-[13ch] 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 text-small">
-          {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="motion-lift 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-[13ch] 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-caption 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 } },
-  { id: "l-10", timestamp: "2026-07-04T09:12:09.481Z", level: "debug", source: "edge-ingest.dns", message: "Resolved queue.primary to 10.8.0.14 from cache", status: null, latencyMs: 0, detail: { host: "queue.primary", ttl_s: 42, cached: "true" } },
-  { id: "l-11", timestamp: "2026-07-04T09:12:09.502Z", level: "warn", source: "edge-ingest.router", message: "POST /v1/events rejected: payload 12.4 MB exceeds the 10 MB per-batch ceiling for tenant_2210", status: 413, latencyMs: 18, detail: { tenant: "tenant_2210", bytes_in: 13002744, limit_bytes: 10485760, trace_id: "trc_04c1aa" } },
-  { id: "l-12", timestamp: "2026-07-04T09:12:09.594Z", level: "info", source: "edge-ingest.compress", message: "Batch recompressed zstd level 3, ratio 6.2:1", status: null, latencyMs: 11, detail: { codec: "zstd", ratio: "6.2:1", bytes_out: 1322 } },
-  { id: "l-13", timestamp: "2026-07-04T09:12:09.688Z", level: "error", source: "edge-ingest.router", message: "POST /v1/events malformed JSON at offset 1024, batch dropped", status: 400, latencyMs: 6, detail: { tenant: "tenant_8804", offset: 1024, trace_id: "trc_15d2bb", error: "unexpected end of input" } },
-  { id: "l-14", timestamp: "2026-07-04T09:12:09.771Z", level: "info", source: "edge-ingest.writer", message: "Batch flushed to queue.primary, 47 records", status: 202, latencyMs: 52, detail: { upstream: "queue.primary", flushed: 47, trace_id: "trc_26e3cc" } },
-  { id: "l-15", timestamp: "2026-07-04T09:12:09.845Z", level: "debug", source: "edge-ingest.cache", message: "Hot-set hit ratio 0.94 over the last 10s window", status: null, latencyMs: null, detail: { hits: 8812, misses: 561, window_s: 10 } },
-  { id: "l-16", timestamp: "2026-07-04T09:12:09.912Z", level: "info", source: "edge-ingest.router", message: "GET /v1/streams/live upgraded to websocket", status: 101, latencyMs: 9, detail: { upstream: "gateway.ws", conn_id: "ws_7742", trace_id: "trc_37f4dd" } },
-  { id: "l-17", timestamp: "2026-07-04T09:12:10.033Z", level: "warn", source: "edge-ingest.schema", message: "Field amount_cents received as float for 9 records, coerced to int64 with rounding", status: 202, latencyMs: 41, detail: { field: "amount_cents", records: 9, trace_id: "trc_48a5ee" } },
-  { id: "l-18", timestamp: "2026-07-04T09:12:10.127Z", level: "info", source: "edge-ingest.router", message: "POST /v1/events accepted, 3 records queued", status: 202, latencyMs: 28, detail: { upstream: "queue.primary", partition: 2, trace_id: "trc_59b6ff", bytes_in: 1536 } },
-  { id: "l-19", timestamp: "2026-07-04T09:12:10.204Z", level: "error", source: "edge-ingest.writer", message: "queue.secondary returned 503, circuit breaker half-open after 2 consecutive failures", status: 503, latencyMs: 2891, detail: { upstream: "queue.secondary", attempt: 2, breaker: "half-open", trace_id: "trc_6ac700" } },
-  { id: "l-20", timestamp: "2026-07-04T09:12:10.311Z", level: "debug", source: "edge-ingest.tls", message: "TLS handshake completed for client 10.2.7.44", status: null, latencyMs: 5, detail: { cipher: "TLS_AES_256_GCM", client_ip: "10.2.7.44", alpn: "h2" } },
-  { id: "l-21", timestamp: "2026-07-04T09:12:10.398Z", level: "info", source: "edge-ingest.auth", message: "Token refreshed for tenant_4821, scope events:write", status: 200, latencyMs: 14, detail: { tenant: "tenant_4821", scope: "events:write", expires_in_s: 3600 } },
-  { id: "l-22", timestamp: "2026-07-04T09:12:10.476Z", level: "warn", source: "edge-ingest.ratelimit", message: "Client tenant_9917 throttled, 429 returned", status: 429, latencyMs: 7, detail: { tenant: "tenant_9917", limit: "300/min", retry_after_s: 60, trace_id: "trc_7bd811" } },
-  { id: "l-23", timestamp: "2026-07-04T09:12:10.581Z", level: "info", source: "edge-ingest.router", message: "GET /v1/health checked by readiness probe", status: 200, latencyMs: 2, detail: { probe: "readiness", trace_id: "trc_8ce922" } },
-  { id: "l-24", timestamp: "2026-07-04T09:12:10.672Z", level: "info", source: "edge-ingest.writer", message: "Batch flushed to queue.primary, 21 records", status: 202, latencyMs: 49, detail: { upstream: "queue.primary", flushed: 21, trace_id: "trc_9df033" } },
-];
-
-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

@@ -1,88 +0,0 @@
-# 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.