@nurix/etna 0.18.19 → 0.18.20

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.

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

@@ -0,0 +1,132 @@
+# Surface catalog
+
+The closed set of six operator surface archetypes. Structure derivation (D28) runs the object pass, then assigns every surface in the entity/surface map an archetype from this catalog — mechanically, by applying the choosing rules below to the map's facts: entities, attributes, cardinalities, relationships, lifecycle states, the operator's unit of work, and the core loop. The pass is never skipped; a small brief earns a small pass, never a guessed archetype. Navigation derives from the object model, never decorated onto it.
+
+Each entry carries five things: **choosing rules** (the object shapes, cardinalities, and lifecycle signals that select it), a **density modifier** (one relative step on the global tier), **composition** (the parts the surface holds and their arrangement, plus the lifecycle states that matter most here), a **navigation slot**, and an **exemplar pointer**.
+
+**Density.** The global tier — spacious · standard · dense — resolves at look time from the design.md / product-type traits (D31) and rewrites the spacing scale through the density primitive and the D6 `--spacing` remap. Each archetype then applies a single relative step on that tier: one step looser, at tier, or one step denser. Steps clamp at the scale ends (spacious … standard … dense) and never name an absolute value — an absolute override is banned (D31). Structure derivation records the relative step in each surface's `density-modifier` as a signed integer (positive = denser, `+1` / `0` / `-1`); the scaffold emits it as `data-density-step="tighter"` (+1) or `data-density-step="looser"` (-1), no attribute at 0. Modifiers compose with the behavioral dials (D4), never replace them.
+
+**Exemplars load just-in-time.** Every entry points at one token-pure compiling exemplar under `data/operator-pack/exemplars/<slug>.tsx`. The exemplar is read at that archetype's emission phase gate during the surfaces phase (D23) — emitting a surface of archetype X without exemplar X in context is a gate violation (D20). Exemplars are never boot-loaded.
+
+---
+
+## list-detail
+
+**Choosing rules.** Selects when all hold:
+- The surface's primary object is one homogeneous collection — many instances of a single entity type (cardinality: N rows of one entity).
+- Each row carries a workable per-row action or lifecycle transition (assign, resolve, approve, retry) — the operator acts row by row.
+- The unit of work is one row (one ticket, one case, one device); the core loop is scan → select → act.
+- Detail is a projection of one selected row, not a standalone destination.
+
+This is the default archetype for the operator's primary entity — the queue shape. Distinguish from entity-detail: if a row's attribute count and relationship fan-out overflow a side panel and the entity is inspected/configured over time, that entity earns its own entity-detail route instead.
+
+**Density modifier.** At tier — the reference archetype. The global tier is calibrated on the operator's primary table, so list-detail runs at it unmodified.
+
+**Composition.** Toolbar (search, filters, bulk actions, column/view picker) + a virtualized table + a side-panel detail. Detail opens **beside** the table, never in a modal (floor P3). Bounded visible columns (rest behind the picker), right-aligned numerics in tabular figures (floor P4), sticky header, bounded pagination ("1–25 of 150") over infinite scroll, virtualization at ≥50 rows. Keyboard-first (floor P6): roving tabindex, arrow/j-k row travel, Enter opens the panel, shortcuts for the frequent verbs. Lifecycle states that matter most: **empty** (first-run vs filtered-to-nothing kept distinct), **loading** (skeleton rows mirroring the table, not a centered spinner), **partial/degraded** (stale rows marked honestly), and the per-row action's post-action state with optimistic-update-then-rollback.
+
+**Navigation.** A top-level nav item per primary entity collection — the queues and tables the operator lives in; the default landing for that entity. Detail is not a nav item; it is a panel state on the list route.
+
+**Exemplar.** `data/operator-pack/exemplars/list-detail.tsx` — JIT at the emission gate, never boot (D20).
+
+---
+
+## dashboard
+
+**Choosing rules.** Selects when all hold:
+- A read-mostly aggregate view over many entities or many metrics — the surface answers "how are things," not "act on this row."
+- Its content is derived (counts, rates, trends, distributions), presented as instances of one Metric object — never minted as N first-class entities (the instances-mistaken-for-objects trap; guard it in the object pass).
+- No per-row lifecycle action is the primary job; drill-down links out to a list-detail or entity-detail.
+- The core loop is glance → notice → drill.
+
+Selects on an overview / home / summary brief. Distinguish from command-center: a dashboard is read-mostly and glanceable; a command-center adds live streams and cross-entity intervention under time pressure.
+
+**Density modifier.** One step looser — a dashboard is a glanceable aggregate; KPI cards and charts need whitespace to separate and read at a glance, not row-scan density.
+
+**Composition.** A KPI / StatCard row at the top (≤4 primary metrics visible without scrolling — answer a few questions well, not many badly) + a small number of self-contained chart/panel tiles below, each a single question with a drill link. Hierarchy from spacing, not borders. Tabular figures on every KPI number (floor P4); charts read `--chart-1..5`; color is never the only signal. Lifecycle states that matter most: **loading** (per-card skeletons, never one page spinner), **partial/degraded** (a downed source names *which* panel is stale — "can't get data" is distinct from "no data"), **empty** (new-tenant zero-state that teaches the surface's value).
+
+**Navigation.** The home/overview landing — typically the app root or the first nav item. It is a hub that links out; never a leaf. Its panels' drill targets are the list-detail and entity-detail routes.
+
+**Exemplar.** `data/operator-pack/exemplars/dashboard.tsx` — JIT at the emission gate, never boot (D20).
+
+---
+
+## entity-detail
+
+**Choosing rules.** Selects when all hold:
+- The subject is a single rich entity with many attributes and outgoing relationships (1 entity : M related collections) that the operator inspects and configures over its life.
+- The entity's data and actions belong together on one surface — splitting them across screens is the broken-object failure; keep the object whole.
+- The temporal probe flagged the entity as long-lived, edited in place, with history that matters.
+- Its attribute count and relationship fan-out exceed what a list-detail side panel holds.
+
+Distinguish from list-detail: list-detail's detail is a lightweight row projection; entity-detail is a destination the operator returns to.
+
+**Density modifier.** At tier — it mixes dense read views (related lists, activity) with edit forms, so it sits at the global tier: neither a scan surface nor a pure form.
+
+**Composition.** Header (entity identity, status, primary actions) + a tab bar (overview / related collections / activity-history) + tabbed content. Related lists render as compact list-details inline; editing happens in place or opens the create-edit stepper beside the work (floor P3). Lifecycle states that matter most: **loading** (skeleton mirroring the header + tab shell), **error** (entity-not-found / load-failure with a recovery path, never a dead end), the edit **save states** (saving / saved / conflict — the concurrent-edit path from the temporal probe), and per-tab **empty** states.
+
+**Navigation.** Not a top-level nav item — reached by drilling from its list-detail (row → entity route), a dashboard, or a command-center link. Route nests under the entity's collection (`/entities/:id`); its tabs are in-surface sub-nav, never top-level entries.
+
+**Exemplar.** `data/operator-pack/exemplars/entity-detail.tsx` — JIT at the emission gate, never boot (D20).
+
+---
+
+## create-edit
+
+**Choosing rules.** Selects when all hold:
+- The surface's job is to mint a new instance or transition one through a multi-field or multi-step change.
+- The lifecycle signal is a **create** (the entity's birth) or a **staged edit** (a governed mutation), not scanning or reading.
+- The change is too large or field-heavy to complete inline in a list-detail panel.
+
+Create mirrors edit — the same field set and order; templates prefill. Distinguish from entity-detail: entity-detail is where an entity *lives*; create-edit is a focused, dismissible task that returns the operator to where it began.
+
+**Density modifier.** One step looser — forms need field breathing room and comfortable target sizes; loosening cuts entry error on a surface where mistakes are costly.
+
+**Composition.** A side-stepper opened **beside** the originating surface (floor P3), or a full form route for long creates. Labels above inputs; errors inline below the field, validated on blur; never placeholder-as-label. Logical field order preserved; one primary CTA bottom-right; primary targets ≥44px. Preview-then-commit for irreversible creates. Lifecycle states that matter most: **validation** (inline, on blur — diagnose → explain → recover), **submitting** (button loading, double-submit disabled), **server-error** (non-dead-end, entered values preserved), **success** (confirmation plus the next step).
+
+**Navigation.** Never a top-level nav item — invoked from a list-detail toolbar ("New") or an entity-detail action, and it returns to that surface on complete. A create route may exist (`/entities/new`) but is entered from the collection, not from the nav.
+
+**Exemplar.** `data/operator-pack/exemplars/create-edit.tsx` — JIT at the emission gate, never boot (D20).
+
+---
+
+## log-stream
+
+**Choosing rules.** Selects when all hold:
+- The primary object is an append-only, time-ordered event or record stream (monotonic; newest-first or tail-following).
+- Cardinality is unbounded and growing; rows are read, filtered, and searched — not acted on individually (no per-row lifecycle action).
+- Events are immutable once written; the temporal axis is the spine.
+
+Selects on a log / event / audit / activity-feed entity — high volume, time-keyed, read + filter. Distinguish from list-detail: list-detail rows carry a workable action and a lifecycle; log-stream lines are frozen history.
+
+**Density modifier.** One step denser — the value of the surface is lines-on-screen; tighten to maximize visible history under one glance.
+
+**Composition.** Filter/search bar + a follow/tail toggle (live vs paused) + a virtualized monospace line list, with inline expansion of a selected line (expand in place, not a modal). Tabular timestamps and IDs (floor P4), level-coded severity via status tokens with a second non-color cue, hairline dividers, minimal chrome. Lifecycle states that matter most: **streaming/live** (new lines announced via `aria-live` without stealing focus), **empty** (no events yet vs filtered-to-nothing, kept distinct), **error** (stream disconnected shows reconnecting, never a dead spinner), **partial/degraded** (dropped or truncated buffer marked honestly).
+
+**Navigation.** A top-level nav item when logs/audit/activity is a primary operator surface; otherwise a tab inside the owning entity-detail (that entity's activity/history). Time-keyed, so deep-links carry a timestamp or anchor.
+
+**Exemplar.** `data/operator-pack/exemplars/log-stream.tsx` — JIT at the emission gate, never boot (D20).
+
+---
+
+## command-center
+
+**Choosing rules.** Selects when all hold:
+- A real-time, multi-pane monitoring surface composes several live entities or streams under one view.
+- The operator acts under time pressure; the core loop is monitor → detect → intervene, across multiple entities at once.
+- The unit of work spans entities, not one row — it fuses aggregate signals (dashboard-like) with live streams (log-stream-like) and quick cross-entity actions.
+
+Reserved for genuine live-ops briefs (NOC, incident console, dispatch, ops bridge). Distinguish from dashboard: a dashboard is read-mostly and drills out; a command-center is live and acts in place. Never assign it to decorate an ordinary dashboard.
+
+**Density modifier.** One step denser — the most information-rich archetype; the operator needs maximum live signal simultaneously visible.
+
+**Composition.** A fixed multi-pane grid: a status/health header + several independently refreshing panels (aggregate tiles, a live stream pane, an alert/queue pane, quick-action controls), composed under one non-scrolling view where the viewport allows. Each pane refreshes on its own; keyboard reach spans panes; irreversible interventions are consent-gated with preview. Lifecycle states that matter most: **per-panel loading and partial/degraded** (each pane fails independently and says so — a command-center that hides a dead feed is dangerous), **live update**, **error**, and the alert/action **post-action** with undo.
+
+**Navigation.** The app root or first nav item for a live-ops tool where monitoring is the job — the operator's home, aggregating routes that also exist standalone. Rare; only for genuine live-ops briefs.
+
+**Exemplar.** `data/operator-pack/exemplars/command-center.tsx` — JIT at the emission gate, never boot (D20).
+
+---
+
+## Extension
+
+The catalog is closed at six. A seventh archetype is never added by prose, by a reference edit, or by improvisation at run time. Membership extends **only as operator-pack data**, and only by a ledger-recorded decision (D28) — the new entry carrying its own choosing rules, density modifier, composition, navigation slot, and exemplar, and the exemplar passing the full machine catalog and personality-invariance validation before it ships (D20). Structure derivation assigns from these six; a brief that fits none is surfaced to the operator, never force-fit into the nearest archetype.

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

@@ -0,0 +1,76 @@
+# AI-surface trust rubric
+
+Judged diagnosis dimensions for any operator surface that shows AI-originated content or takes AI-initiated actions. Four dimensions, anchors `trust-01`..`trust-04`. The rubric grades what a surface already does with AI. Absence of `trust-01`, `trust-02`, or `trust-03` grades **auto-critical** — no exception, no waiver.
+
+## When it fires
+
+Runs inside improve and introspect sweeps, on every surface whose composition holds AI-originated content (drafts, summaries, enrichments, scores, suggestions) or AI-initiated actions (auto-triage, auto-close, agent send / delete / charge). A surface with no AI content skips it. A copilot panel, an agent console, an enrichment column, an auto-triage queue all trip it.
+
+## Scope: audit only
+
+This rubric grades AI surfaces; it does not carry the generative patterns for building them. Streaming / generating states, confidence display, preview-then-apply, undo semantics for agent actions, the copilot-panel archetype — none are authored here. That pattern set enters the operator pack as a recorded addition when its trigger fires (the first embedded-copilot brief, or Nurix's own agent-console needs); `docs/history/backlog.md` holds the trigger. Until then the rubric audits, from day one, whatever other means produced the AI surface.
+
+## The four dimensions
+
+### trust-01 — AI presence is disclosed
+
+**Demands.** Every AI-originated element carries a marker at its point of consumption — a badge, a label, a distinct visual treatment — legible before an operator acts on it. Disclosure also signals *how far to trust*: where the model emits a confidence, a source, or a known-unreliable class, the surface shows it. This folds the accuracy / confidence axis into disclosure — an AI badge sitting over a low-confidence guess presented as fact still fails, because the operator cannot tell the value is soft.
+
+**Passes.** An AI-drafted reply in a support queue sits under an "AI draft" chip with a muted card treatment, distinct from a teammate's message. An enrichment-filled CRM field shows an "auto-filled" marker and its source. A model summary is captioned "AI-generated" and carries a confidence band when the model is unsure.
+
+**Fails.** An AI-drafted reply rendered visually indistinguishable from a human draft. A model-derived "priority" score in a column with no sign it is generated. A low-confidence extraction shown as a plain, authoritative value.
+
+**Judge.** For each AI element on the surface: could a first-time operator, glancing, tell it apart from human or authoritative content — and does the surface tell them how much to trust it?
+
+**Grade.** Absence auto-critical.
+
+### trust-02 — A human override path is visible
+
+**Demands.** Wherever the AI decides or acts, the operator can override, correct, or reject it — per item, on the surface where the decision shows, and keyboard-reachable. A global off-switch is not an override path.
+
+**Passes.** An auto-triage queue gives every item a visible "reassign" and "revert". An AI-suggested value offers inline "accept / edit / dismiss". An auto-close agent exposes per-ticket "reopen" and "stop auto-closing this".
+
+**Fails.** An auto-triage rule with no per-item revert. An AI-set status field that is read-only in the UI. A settings-only "disable AI" toggle with no per-decision correction on the surface itself.
+
+**Judge.** At each point the AI acted, is there a countermand affordance, reachable where the decision appears (not buried in settings) and by keyboard?
+
+**Grade.** Absence auto-critical.
+
+### trust-03 — AI-initiated irreversible actions are consent-gated with preview
+
+**Demands.** Any AI-initiated action that is destructive or irreversible — send, delete, charge, publish, external side-effect — stops before executing, shows a preview of exactly what it will do, and waits for explicit human consent. It is never auto-fired. A reversible AI action needs trust-02's override, not necessarily a preview gate.
+
+**Passes.** An outreach agent stops at a preview of the exact recipients and body, gated on a send click. A bulk-remediation agent shows the diff of the 40 records it will touch and waits for confirm. A refund-capable AI presents amount, account, and reason behind an explicit confirm.
+
+**Fails.** An agent that sends the drafted reply the instant it is generated. An auto-remediation that deletes flagged rows on a timer with no preview step. A "resolve all" action that fires irreversible external calls without showing what it will touch.
+
+**Judge.** Enumerate the AI-initiated actions on the surface; for each irreversible one, is there a concrete preview of the effect and an explicit consent step before execution?
+
+**Grade.** Absence auto-critical.
+
+### trust-04 — AI actions are auditable
+
+**Demands.** AI-taken actions leave a durable, operator-inspectable trail — what acted, when, on what, and on what basis — visible in the UI, not only in backend logs. Attribution distinguishes AI from human.
+
+**Passes.** Each AI-modified record carries an activity entry: "auto-triaged by <agent> at <time>, rule <x>". A command center runs an AI-actions feed with timestamps and revert links. An entity's audit tab lists model actions beside human ones with provenance.
+
+**Fails.** An AI that mutates records with no history entry. Actions attributed generically to "system", indistinguishable from a human edit. An auto-close leaving no timestamped, attributable trace.
+
+**Judge.** For the AI actions on this surface, can an operator reconstruct after the fact what the AI did, when, and on what basis, from the UI itself?
+
+**Grade.** Absence is a finding, severity by judgment — critical or major by the blast radius and reversibility of the actions. It never auto-grades; only trust-01..03 do.
+
+## Writing the finding
+
+Trust findings are judged findings on the canonical schema — peers of machine findings, consumed directly by improve, rendered per reader register by introspect, and carried unchanged into the dated findings report and the decay ledger.
+
+- **provenance** — the trust anchor (`trust-01`..`trust-04`), marked judged. This is the load-bearing tag; anchor parity between this rubric and the finding's provenance is enforced.
+- **dimension** — the AI-surface trust dimension the rubric adds. Where the canonical dimension slot wants a taxonomy code, disclosure copy reads under B5 Content & Copy and the override / consent / audit affordances under B1 Interactive States; the provenance stays the trust anchor either way.
+- **cause layer** — a trust failure is felt in Perception (the operator cannot tell, cannot control, cannot audit) but its cause is almost always Structure (a missing marker or affordance) or Behavior (an ungated action, an absent trail). Name the causal layer, per the causes-first walk.
+- **evidence** — the `file:line` of the AI element and what it renders or does.
+- **before → after** — descriptive, not numeric, because the rubric is judged: the failing state → the affordance that fixes it. E.g. `AI draft renders identically to human messages → AI draft carries a disclosure chip and a muted treatment`.
+- **consequence** — the trust harm: automation bias, a silent irreversible action, an uncorrectable error, an unauditable mutation.
+- **tier** — within-levers when the fix is an affordance the surface can already express (a chip, a confirm dialog, an activity entry); lever-change when the fix needs a generative pattern the pack does not yet carry (route it to the backlogged pattern set, and report it, never freehand it).
+- **severity** — trust-01..03 absence is auto-critical; trust-04 absence is critical or major by judgment; a present-but-weak dimension grades major or minor.
+
+**Presence-shaped machine facets.** Where a facet holds with zero legitimate exceptions — an AI-marked element must carry its disclosure attribute, a consent dialog must trap focus — it is registered as a machine rule in the catalog and fires at its own point. This rubric is the judged layer the machine cannot reach: whether the marker is *legible*, whether the preview shows the *right* effect, whether the trail is *reconstructable* are judgments, and they stay here.