@nurix/etna 0.19.2 → 0.19.4

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

@@ -1,5 +1,5 @@
-// skills/design/data/operator-pack/exemplars/entity-detail.tsx
-// personality-invariant: composition anchor, not a look source.
+// skills/design/data/operator-pack/exemplars/entity-detail.tsx — reference render — imitate the ambition and the composition; the project's tokens supply the look.
+// Surface: brand-forward (delight-allowing)
 import { useEffect, useState } from "react";
 import { Button } from "@nurix/components/button";
 import { Badge } from "@nurix/components/badge";
@@ -13,28 +13,24 @@ import { Input } from "@nurix/components/input";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@nurix/components/tabs";
 import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose } from "@nurix/components/sheet";
 import { Table, defineColumn, type ColumnDefinition } from "@nurix/components/table";
-import { Boxes, CircleCheck, CircleX, Pencil, RefreshCw, Rocket, ScrollText, TriangleAlert } from "lucide-react";
+import { ArrowRight, Boxes, CircleCheck, CircleX, Pencil, RefreshCw, Rocket, ScrollText, TriangleAlert } from "lucide-react";
 // A deployment-console service: a long-lived entity with many attributes, related instances, and deployment history (entity-detail).
 type ServiceHealth = "healthy" | "degraded" | "down";
 type SaveState = "idle" | "saving" | "saved" | "conflict";
 type LoadStatus = "ready" | "loading" | "error";
 export interface Service {
-  id: string; name: string; slug: string; environment: string; health: ServiceHealth;
-  owner: string; runtime: string; region: string; replicas: number; lastDeployedAt: string;
+  id: string; name: string; slug: string; environment: string; health: ServiceHealth; owner: string; runtime: string; region: string; replicas: number; lastDeployedAt: string;
 }
 export interface Instance { id: string; region: string; version: string; status: string; cpuPercent: number; startedAt: string }
 export interface Deployment { id: string; version: string; actor: string; status: "succeeded" | "failed" | "rolled_back"; at: string }
+export interface ActivityEvent { id: string; at: string; actor: string; summary: string; ref: string }
+export interface ServiceMetric { label: string; value: string; unit: string; note: string; tone: string }
 export interface ConfigPatch { replicas: number }
 export interface EntityDetailProps {
-  service: Service | null; instances: Instance[]; deployments: Deployment[];
-  status?: LoadStatus; metricsStale?: boolean; errorDetail?: string; saveState?: SaveState;
-  onRetry?: () => void; onDeploy?: () => void; onSaveConfig?: (patch: ConfigPatch) => void;
+  service: Service | null; instances: Instance[]; deployments: Deployment[]; activity?: ActivityEvent[]; metrics?: ServiceMetric[];
+  status?: LoadStatus; metricsStale?: boolean; errorDetail?: string; saveState?: SaveState; onRetry?: () => void; onDeploy?: () => void; onSaveConfig?: (patch: ConfigPatch) => void;
 }
-const HEALTH_META: Record<ServiceHealth, { label: string; cls: string; Icon: typeof CircleCheck }> = {
-  healthy: { label: "Healthy", cls: "text-success", Icon: CircleCheck },
-  degraded: { label: "Degraded", cls: "text-warning", Icon: TriangleAlert },
-  down: { label: "Down", cls: "text-destructive", Icon: CircleX },
-};
+const HEALTH_META: Record<ServiceHealth, { label: string; cls: string; Icon: typeof CircleCheck }> = { healthy: { label: "Healthy", cls: "text-success", Icon: CircleCheck }, degraded: { label: "Degraded", cls: "text-warning", Icon: TriangleAlert }, down: { label: "Down", cls: "text-destructive", Icon: CircleX } };
 const DEPLOY_LABEL: Record<Deployment["status"], string> = { succeeded: "Deployed", failed: "Deploy failed", rolled_back: "Rolled back" };
 const INSTANCE_STATUS = [{ value: "running", label: "Running" }, { value: "starting", label: "Starting" }, { value: "unknown", label: "Unknown" }];
 const instanceColumns: ColumnDefinition<Instance>[] = [
@@ -45,80 +41,69 @@ const instanceColumns: ColumnDefinition<Instance>[] = [
   defineColumn<Instance>({ slug: "cpuPercent", label: "CPU", type: "number", metadata: { suffix: "%" } }),
   defineColumn<Instance>({ slug: "startedAt", label: "Started", type: "date", metadata: { relativeFormat: true } }),
 ];
-// Loading shell mirrors the header identity and tab bar, never a centered spinner.
+// Loading shell mirrors the header identity, tab bar, and metrics strip, never a centered spinner.
 function DetailSkeleton() {
   return (
-    <div className="min-h-[100dvh] bg-background p-6">
-      <div className="flex items-center gap-3">
-        <Skeleton className="h-10 w-10 rounded-md" />
-        <div className="flex flex-col gap-2"><Skeleton className="h-5 w-48" /><Skeleton className="h-4 w-32" /></div>
-      </div>
+    <div className="min-h-[100dvh] bg-background p-6 font-sans">
+      <div className="flex items-center gap-3"><Skeleton className="h-10 w-10 rounded-md" /><div className="flex flex-col gap-2"><Skeleton className="h-5 w-48" /><Skeleton className="h-4 w-32" /></div></div>
       <div className="mt-6 flex gap-2"><Skeleton className="h-8 w-24" /><Skeleton className="h-8 w-24" /><Skeleton className="h-8 w-24" /></div>
-      <div className="mt-6"><Skeleton className="h-40 w-full" /></div>
+      <div className="mt-6 grid grid-cols-2 gap-4 xl:grid-cols-4">{[0, 1, 2, 3].map((i) => <Skeleton key={i} className="h-20 w-full" />)}</div><div className="mt-6"><Skeleton className="h-40 w-full" /></div>
     </div>
   );
 }
 // Entity load failure states what happened, why, and the recovery path. Never a dead end.
 function DetailError({ detail, onRetry }: { detail?: string; onRetry?: () => void }) {
   return (
-    <div className="flex min-h-[100dvh] items-center justify-center bg-background p-6">
+    <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 this service</AlertTitle>
+        <CircleX className="h-4 w-4" /><AlertTitle>Could not load this service</AlertTitle>
         <AlertDescription>{detail ?? "The deployment API did not respond."} Retry the request, or open the platform status page if it keeps failing.</AlertDescription>
         <div className="mt-3"><Button size="sm" onClick={onRetry}><RefreshCw className="h-4 w-4" /> Retry</Button></div>
       </Alert>
     </div>
   );
 }
-// Config edit opens beside the work; the save path narrates saving, saved, and the concurrent-edit conflict.
-function EditConfigSheet({ service, open, onOpenChange, saveState, onSave }: {
-  service: Service; open: boolean; onOpenChange: (v: boolean) => void; saveState: SaveState; onSave?: (patch: ConfigPatch) => void;
-}) {
+// Config edit opens beside the work on the overlay ladder; the save path narrates saving, saved, and the concurrent-edit conflict.
+function EditConfigSheet({ service, open, onOpenChange, saveState, onSave }: { service: Service; open: boolean; onOpenChange: (v: boolean) => void; saveState: SaveState; onSave?: (patch: ConfigPatch) => void }) {
   const [replicas, setReplicas] = useState(String(service.replicas));
   const [replicaError, setReplicaError] = useState<string | null>(null);
   const saving = saveState === "saving";
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="right">
+      <SheetContent side="right" className="bg-surface-overlay shadow-overlay">
         <SheetHeader>
-          <SheetTitle>Edit configuration</SheetTitle>
-          <SheetDescription>Changes apply on the next deploy of {service.slug}.</SheetDescription>
+          <SheetTitle className="text-h3">Edit configuration</SheetTitle><SheetDescription className="text-small">Changes apply on the next deploy of {service.slug}.</SheetDescription>
         </SheetHeader>
         <SheetBody className="flex flex-col gap-4">
           {saveState === "conflict" && (
             <Alert variant="destructive">
-              <TriangleAlert className="h-4 w-4" />
-              <AlertTitle>Configuration changed elsewhere</AlertTitle>
-              <AlertDescription>Another operator saved this service while you were editing. Reload to see their values before saving yours.</AlertDescription>
+              <TriangleAlert className="h-4 w-4" /><AlertTitle>Configuration changed elsewhere</AlertTitle><AlertDescription>Another operator saved this service while you were editing. Reload to see their values before saving yours.</AlertDescription>
             </Alert>
           )}
           <div className="flex flex-col gap-2">
             <Label htmlFor="replicas">Desired replicas</Label>
             <Input id="replicas" inputMode="numeric" value={replicas} aria-invalid={!!replicaError} onChange={(e) => setReplicas(e.target.value)}
               onBlur={() => { const n = Number(replicas); setReplicaError(!Number.isInteger(n) || n < 1 ? "Enter a whole number of one or more." : null); }} />
-            {replicaError && <p className="text-sm text-destructive">{replicaError}</p>}
+            {replicaError && <p className="text-small text-destructive">{replicaError}</p>}
           </div>
-          <p role="status" aria-live="polite" className="min-h-4 text-sm text-muted-foreground">
-            {saveState === "saving" && "Saving configuration…"}
-            {saveState === "saved" && "Configuration saved."}
-          </p>
+          <p role="status" aria-live="polite" className="min-h-4 text-small text-muted-foreground">{saveState === "saving" && "Saving configuration…"}{saveState === "saved" && "Configuration saved."}</p>
         </SheetBody>
         <SheetFooter>
-          <SheetClose asChild><Button variant="secondary" size="sm">Cancel</Button></SheetClose>
-          <Button size="sm" disabled={saving || !!replicaError} onClick={() => onSave?.({ replicas: Number(replicas) })}>
-            {saving && <RefreshCw className="h-4 w-4" />} Save changes
-          </Button>
+          <SheetClose asChild><Button variant="secondary" size="sm">Cancel</Button></SheetClose><Button size="sm" disabled={saving || !!replicaError} onClick={() => onSave?.({ replicas: Number(replicas) })}>{saving && <RefreshCw className="h-4 w-4" />} Save changes</Button>
         </SheetFooter>
       </SheetContent>
     </Sheet>
   );
 }
-// Service entity-detail: identity header, tabbed overview / instances / activity, edit in a side panel.
+// Service entity-detail: a raised identity header (its brand-forward region), a furnished overview (metrics strip, config, activity preview, instance summary), tabbed related views, edit in a side panel.
 export function EntityDetail(props: EntityDetailProps) {
   const { service, instances, deployments, status = "ready", metricsStale = false, errorDetail, saveState = "idle", onRetry, onDeploy, onSaveConfig } = props;
+  const metrics = props.metrics ?? SERVICE_METRICS;
+  const activity = props.activity ?? RECENT_ACTIVITY;
   const [tab, setTab] = useState("overview");
   const [editOpen, setEditOpen] = useState(false);
+  const byStatus = instances.reduce((acc, i) => { acc[i.status] = (acc[i.status] ?? 0) + 1; return acc; }, {} as Record<string, number>);
+  const regions = [...new Set(instances.map((i) => i.region))];
   // Keyboard parity for the Edit affordance: press E to open the config panel.
   useEffect(() => {
     function onKey(e: KeyboardEvent) {
@@ -126,89 +111,95 @@ export function EntityDetail(props: EntityDetailProps) {
       if (el && (el.tagName === "INPUT" || el.tagName === "TEXTAREA")) return;
       if (e.key === "e" && !editOpen) { e.preventDefault(); setEditOpen(true); }
     }
-    window.addEventListener("keydown", onKey);
-    return () => window.removeEventListener("keydown", onKey);
+    window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey);
   }, [editOpen]);
   if (status === "loading") return <DetailSkeleton />;
   if (status === "error" || !service) return <DetailError detail={errorDetail} onRetry={onRetry} />;
   const health = HEALTH_META[service.health];
   const attributes: { label: string; value: string; mono?: boolean; num?: boolean }[] = [
-    { label: "Environment", value: service.environment }, { label: "Runtime", value: service.runtime, mono: true },
-    { label: "Region", value: service.region, mono: true }, { label: "Owner", value: service.owner },
+    { label: "Environment", value: service.environment }, { label: "Runtime", value: service.runtime, mono: true }, { label: "Region", value: service.region, mono: true }, { label: "Owner", value: service.owner },
     { label: "Desired replicas", value: String(service.replicas), num: true }, { label: "Last deployed", value: new Date(service.lastDeployedAt).toLocaleString(), num: true },
   ];
   return (
-    <div className="min-h-[100dvh] bg-background text-foreground">
-      <header className="flex flex-wrap items-start justify-between gap-4 border-b border-border p-6">
+    <div className="min-h-[100dvh] bg-background font-sans text-foreground">
+      <header className="flex flex-wrap items-start justify-between gap-4 border-b border-border bg-surface-raised p-6 shadow-sm">
         <div className="flex items-start gap-3">
           <span className="grid h-10 w-10 place-items-center rounded-md bg-muted text-muted-foreground"><Boxes className="h-5 w-5" /></span>
           <div>
-            <div className="flex items-center gap-2">
-              <h1 className="text-xl font-medium">{service.name}</h1>
-              <Badge variant="outline" className={`gap-1 ${health.cls}`}><health.Icon className="h-3.5 w-3.5" /> {health.label}</Badge>
-            </div>
-            <p className="mt-1 text-sm text-muted-foreground">{service.slug} · {service.environment}</p>
+            <div className="flex items-center gap-2"><h1 className="text-h1">{service.name}</h1><Badge variant="outline" className={`gap-1 ${health.cls}`}><health.Icon className="h-3.5 w-3.5" /> {health.label}</Badge></div>
+            <p className="mt-1 text-small text-muted-foreground">{service.slug} · {service.environment}</p>
           </div>
         </div>
         <div className="flex items-center gap-2">
-          <Button variant="secondary" size="sm" onClick={() => setEditOpen(true)}><Pencil className="h-4 w-4" /> Edit config <Kbd className="ml-1">E</Kbd></Button>
-          <Button size="sm" onClick={onDeploy}><Rocket className="h-4 w-4" /> Deploy</Button>
+          <Button variant="secondary" size="sm" onClick={() => setEditOpen(true)}><Pencil className="h-4 w-4" /> Edit config <Kbd className="ml-1">E</Kbd></Button><Button size="sm" onClick={onDeploy}><Rocket className="h-4 w-4" /> Deploy</Button>
         </div>
       </header>
       <div className="p-6">
         {metricsStale && (
           <Alert className="mb-4">
-            <TriangleAlert className="h-4 w-4 text-warning" />
-            <AlertTitle>Live health signals unavailable</AlertTitle>
-            <AlertDescription>The health collector is unreachable, so instance status and the figures below reflect the last cached snapshot and may be stale.</AlertDescription>
+            <TriangleAlert className="h-4 w-4 text-warning" /><AlertTitle>Live health signals unavailable</AlertTitle><AlertDescription>The health collector is unreachable, so instance status and the figures below reflect the last cached snapshot and may be stale.</AlertDescription>
           </Alert>
         )}
         <Tabs value={tab} onValueChange={setTab}>
-          <TabsList>
-            <TabsTrigger value="overview">Overview</TabsTrigger>
-            <TabsTrigger value="instances">Instances</TabsTrigger>
-            <TabsTrigger value="activity">Activity</TabsTrigger>
-          </TabsList>
+          <TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="instances">Instances</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList>
           <TabsContent value="overview">
-            <section className="mt-4">
-              <h2 className="mb-3 text-sm font-medium">Configuration <span className="text-xs font-normal text-muted-foreground">sample data</span></h2>
-              <Card><CardContent className="p-0">
-                {/* mock: fixture-supplied values, not authoritative production readings */}
-                <dl className="divide-y divide-border">
-                  {attributes.map((a) => (
-                    <div key={a.label} className="flex items-center justify-between gap-4 px-4 py-3 text-sm">
-                      <dt className="text-muted-foreground">{a.label}</dt>
-                      <dd className={`${a.mono ? "font-mono" : ""} ${a.num ? "tabular-nums" : ""}`}>{a.value}</dd>
-                    </div>
+            <div className="mt-4 flex flex-col gap-6">
+              <section aria-labelledby="ov-health">
+                <h2 id="ov-health" className="mb-3 text-h3">Service health <span className="text-caption font-normal text-muted-foreground">sample data</span></h2>
+                <div className="grid grid-cols-2 gap-4 xl:grid-cols-4">{/* mock: fixture-supplied readings, not authoritative production statistics */}
+                  {metrics.map((m) => (
+                    <Card key={m.label} className="flex flex-col gap-1 p-4"><span className="text-caption text-muted-foreground">{m.label}</span>
+                      <span className="flex items-baseline gap-1"><span className="text-h2 tabular-nums">{m.value}</span><span className="text-caption text-muted-foreground">{m.unit}</span></span><span className={`text-caption ${m.tone}`}>{m.note}</span>
+                    </Card>
                   ))}
-                </dl>
-              </CardContent></Card>
-            </section>
+                </div>
+              </section>
+              <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+                <section aria-labelledby="ov-config">
+                  <h2 id="ov-config" className="mb-3 text-h3">Configuration</h2>
+                  <Card><CardContent className="p-0"><dl className="divide-y divide-border">
+                    {attributes.map((a) => (
+                      <div key={a.label} className="flex items-center justify-between gap-4 px-4 py-3 text-small"><dt className="text-muted-foreground">{a.label}</dt><dd className={`${a.mono ? "font-mono" : ""} ${a.num ? "tabular-nums" : ""}`}>{a.value}</dd></div>
+                    ))}
+                  </dl></CardContent></Card>
+                </section>
+                <div className="flex flex-col gap-6">
+                  <section aria-labelledby="ov-activity">
+                    <div className="mb-3 flex items-center justify-between"><h2 id="ov-activity" className="text-h3">Recent activity</h2><Button variant="ghost" size="sm" onClick={() => setTab("activity")}>All activity <ArrowRight className="h-4 w-4" /></Button></div>
+                    <Card><CardContent className="p-0"><ol className="divide-y divide-border">
+                      {activity.map((ev) => (
+                        <li key={ev.id} className="flex items-baseline gap-3 px-4 py-2 text-small">
+                          <time className="shrink-0 font-mono tabular-nums text-muted-foreground">{ev.at}</time><span className="min-w-0 flex-1 truncate">{ev.summary} <span className="text-muted-foreground">by {ev.actor}</span></span><span className="shrink-0 font-mono text-muted-foreground">{ev.ref}</span>
+                        </li>
+                      ))}
+                    </ol></CardContent></Card>
+                  </section>
+                  <section aria-labelledby="ov-instances">
+                    <div className="mb-3 flex items-center justify-between"><h2 id="ov-instances" className="text-h3">Instances</h2><Button variant="ghost" size="sm" onClick={() => setTab("instances")}>All instances <ArrowRight className="h-4 w-4" /></Button></div>
+                    <Card><CardContent className="flex flex-wrap items-center gap-x-6 gap-y-2 p-4 text-small">
+                      <span className="flex items-center gap-1.5 text-success"><CircleCheck className="h-4 w-4" /><span className="tabular-nums">{byStatus.running ?? 0}</span> running</span><span className="flex items-center gap-1.5 text-warning"><RefreshCw className="h-4 w-4" /><span className="tabular-nums">{byStatus.starting ?? 0}</span> starting</span><span className="flex items-center gap-1.5 text-destructive"><CircleX className="h-4 w-4" /><span className="tabular-nums">{byStatus.unknown ?? 0}</span> unknown</span><span className="text-muted-foreground">across {regions.length} regions (<span className="font-mono">{regions.join(", ")}</span>)</span>
+                    </CardContent></Card>
+                  </section>
+                </div>
+              </div>
+            </div>
           </TabsContent>
           <TabsContent value="instances">
             <div className="mt-4">
-              {instances.length === 0 ? (
-                <EmptyState icon={<Boxes className="h-10 w-10 text-muted-foreground" />} title="No running instances"
-                  description="This service has no instances in this environment yet. Deploy a build to bring the first one online."
-                  action={<Button size="sm" onClick={onDeploy}><Rocket className="h-4 w-4" /> Deploy</Button>} />
-              ) : (
-                <Table data={instances} columns={instanceColumns} tableConfig={{ header: true, density: "compact" }} />
-              )}
+              {instances.length === 0
+                ? <EmptyState icon={<Boxes className="h-10 w-10 text-muted-foreground" />} title="No running instances" description="This service has no instances in this environment yet. Deploy a build to bring the first one online." action={<Button size="sm" onClick={onDeploy}><Rocket className="h-4 w-4" /> Deploy</Button>} />
+                : <Table data={instances} columns={instanceColumns} tableConfig={{ header: true, density: "compact" }} />}
             </div>
           </TabsContent>
           <TabsContent value="activity">
             <div className="mt-4">
               {deployments.length === 0 ? (
-                <EmptyState icon={<ScrollText className="h-10 w-10 text-muted-foreground" />} title="No deployments recorded"
-                  description="Deployment history for this service appears here once the first build ships." />
+                <EmptyState icon={<ScrollText className="h-10 w-10 text-muted-foreground" />} title="No deployments recorded" description="Deployment history for this service appears here once the first build ships." />
               ) : (
                 <ol className="flex flex-col">
                   {deployments.map((d) => (
-                    <li key={d.id} className="flex items-center gap-3 border-b border-border py-3 text-sm last:border-0">
-                      {d.status === "succeeded" ? <CircleCheck className="h-4 w-4 text-success" /> : <CircleX className="h-4 w-4 text-destructive" />}
-                      <span className="font-mono">{d.version}</span>
-                      <span className="text-muted-foreground">{DEPLOY_LABEL[d.status]} by {d.actor}</span>
-                      <time className="ml-auto font-mono tabular-nums text-muted-foreground">{new Date(d.at).toLocaleString()}</time>
+                    <li key={d.id} className="flex items-center gap-3 border-b border-border py-3 text-small last:border-0">
+                      {d.status === "succeeded" ? <CircleCheck className="h-4 w-4 text-success" /> : <CircleX className="h-4 w-4 text-destructive" />}<span className="font-mono">{d.version}</span><span className="text-muted-foreground">{DEPLOY_LABEL[d.status]} by {d.actor}</span><time className="ml-auto font-mono tabular-nums text-muted-foreground">{new Date(d.at).toLocaleString()}</time>
                     </li>
                   ))}
                 </ol>
@@ -224,8 +215,7 @@ export function EntityDetail(props: EntityDetailProps) {
 // exemplar fixture data — seeded, domain-shaped
 export const FIXTURE_SEED = 7314;
 export const service: Service = {
-  id: "svc_0e9c1a7b", name: "checkout-api", slug: "checkout-api", environment: "production", health: "degraded",
-  owner: "payments-platform", runtime: "node20", region: "iad", replicas: 6, lastDeployedAt: "2026-07-03T14:22:00Z",
+  id: "svc_0e9c1a7b", name: "checkout-api", slug: "checkout-api", environment: "production", health: "degraded", owner: "payments-platform", runtime: "node20", region: "iad", replicas: 6, lastDeployedAt: "2026-07-03T14:22:00Z",
 };
 export const instances: Instance[] = [
   { id: "checkout-api-7f4b21", region: "iad", version: "2026.7.3-a19f", status: "running", cpuPercent: 34, startedAt: "2026-07-03T14:23:00Z" },
@@ -241,5 +231,19 @@ export const deployments: Deployment[] = [
   { id: "dep_4e2", version: "2026.6.28-c4e2", actor: "s.delacroix", status: "failed", at: "2026-06-28T22:05:00Z" },
   { id: "dep_4b0", version: "2026.6.20-11ad", actor: "m.okonkwo", status: "succeeded", at: "2026-06-20T10:33:00Z" },
 ];
+export const RECENT_ACTIVITY: ActivityEvent[] = [
+  { id: "act-91", at: "07-03 14:22", actor: "m.okonkwo", summary: "Deployed 2026.7.3-a19f to production", ref: "dep_5a1" },
+  { id: "act-90", at: "07-03 11:05", actor: "autoscaler", summary: "Scaled replicas 4 to 6 on sustained queue depth", ref: "evt_88c2" },
+  { id: "act-89", at: "07-02 16:48", actor: "s.delacroix", summary: "Config change: LOG_LEVEL info to warn", ref: "cfg_7719" },
+  { id: "act-88", at: "07-02 09:14", actor: "monitor", summary: "Alert fired: p95 latency above 250 ms for 12 minutes", ref: "alr_5520" },
+  { id: "act-87", at: "07-01 18:40", actor: "priya.nair", summary: "Rolled back 2026.7.1-77b0 after elevated 5xx", ref: "dep_4f7" },
+  { id: "act-86", at: "07-01 07:03", actor: "health-collector", summary: "Instance checkout-api-0000aa marked unknown after 3 failed probes", ref: "evt_4411" },
+];
+export const SERVICE_METRICS: ServiceMetric[] = [
+  { label: "Uptime, 30 days", value: "99.92", unit: "%", note: "target 99.90", tone: "text-success" },
+  { label: "Error rate", value: "1.84", unit: "%", note: "elevated last hour", tone: "text-warning" },
+  { label: "Throughput", value: "412", unit: "req/s", note: "peak 590 today", tone: "text-muted-foreground" },
+  { label: "p95 latency", value: "268", unit: "ms", note: "SLO 250 ms", tone: "text-warning" },
+];
 export const emptyInstances: Instance[] = [];
 export const emptyDeployments: Deployment[] = [];

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

@@ -1,5 +1,5 @@
-// skills/design/data/operator-pack/exemplars/list-detail.tsx
-// personality-invariant: composition anchor, not a look source.
+// 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";
@@ -36,7 +36,7 @@ const PRIORITY_META: Record<Priority, { label: string; cls: string }> = {
 // Loading shell mirrors the toolbar and table rows, never a centered spinner.
 function QueueSkeleton() {
   return (
-    <div className="min-h-[100dvh] bg-background p-6">
+    <div className="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>
@@ -45,7 +45,7 @@ function QueueSkeleton() {
 // 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">
+    <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>
@@ -55,7 +55,8 @@ function QueueError({ detail, onRetry }: { detail?: string; onRetry?: () => void
     </div>
   );
 }
-// The selected row projects into a side panel beside the table, never a modal (floor P3).
+// 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];
@@ -66,15 +67,15 @@ function TicketDetail({ ticket, open, onOpenChange, onResolve }: { ticket: Ticke
   ];
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
-      <SheetContent side="right">
+      <SheetContent side="right" className="bg-surface-overlay shadow-overlay">
         <SheetHeader>
-          <SheetTitle>{ticket.subject}</SheetTitle>
-          <SheetDescription className={st.cls}>{st.label} · {ticket.id}</SheetDescription>
+          <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-sm">
+              <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>
@@ -119,9 +120,9 @@ export function ListDetail(props: ListDetailProps) {
   const start = filtered.length === 0 ? 0 : page * PAGE_SIZE + 1;
   const end = Math.min(filtered.length, (page + 1) * PAGE_SIZE);
   return (
-    <div className="min-h-[100dvh] bg-background text-foreground">
+    <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-xl font-medium">Ticket queue</h1><p className="mt-1 text-sm text-muted-foreground">Scan, triage, and resolve support tickets.</p></div>
+        <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">
@@ -153,9 +154,9 @@ export function ListDetail(props: ListDetailProps) {
         ) : (
           <Card><CardContent className="p-0">
             <div className="overflow-auto" onKeyDown={onRowsKeyDown}>
-              <table className="w-full border-collapse text-sm">
+              <table className="w-full border-collapse text-small">
                 <thead className="sticky top-0 bg-card">
-                  <tr className="border-b border-border text-left text-muted-foreground">
+                  <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>
@@ -174,7 +175,7 @@ export function ListDetail(props: ListDetailProps) {
                     return (
                       <tr key={t.id} ref={(el) => { rowRefs.current[i] = el; }} tabIndex={i === activeIndex ? 0 : -1} aria-selected={selected.has(t.id)}
                         onClick={() => { setActiveIndex(i); setOpenId(t.id); }}
-                        className="cursor-pointer border-b border-border last:border-0 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring">
+                        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>
@@ -191,7 +192,7 @@ export function ListDetail(props: ListDetailProps) {
                 </tbody>
               </table>
             </div>
-            <div className="flex items-center justify-between gap-3 border-t border-border px-4 py-3 text-sm text-muted-foreground">
+            <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>

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

@@ -1,5 +1,5 @@
-// skills/design/data/operator-pack/exemplars/log-stream.tsx
-// personality-invariant: composition anchor, not a look source.
+// 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";
@@ -15,26 +15,11 @@ 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;
+  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;
+  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 };
@@ -114,17 +99,17 @@ export function LogStream({ lines, isLoading = false, error = null, degraded = n
   }
 
   return (
-    <section onKeyDown={onRootKeyDown} data-density-step="tighter" className="flex min-h-[100dvh] flex-col bg-background text-foreground">
+    <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-base font-semibold">Edge ingest log</h1>
+            <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-xs text-muted-foreground">Follow tail
+          <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>
@@ -137,13 +122,13 @@ export function LogStream({ lines, isLoading = false, error = null, degraded = n
             <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">
+          <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-xs">
+        <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>
@@ -153,10 +138,10 @@ export function LogStream({ lines, isLoading = false, error = null, degraded = n
         <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>
+            <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-xs text-muted-foreground">
+          <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>
@@ -171,13 +156,13 @@ export function LogStream({ lines, isLoading = false, error = null, degraded = n
           ))}
         </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>
+        <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">
+        <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 ? (
@@ -193,9 +178,9 @@ export function LogStream({ lines, isLoading = false, error = null, degraded = n
                 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">
+                    <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-24 shrink-0 tabular-nums text-muted-foreground">{formatClock(line.timestamp)}</span>
+                      <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>
@@ -217,7 +202,7 @@ export function LogStream({ lines, isLoading = false, error = null, degraded = n
           )}
         </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">
+      <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>
@@ -236,6 +221,21 @@ const SEED_LINES: LogLine[] = [
   { 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[] = [