diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V1-complete.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V1-complete.md
new file mode 100644
index 000000000..5122801c5
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V1-complete.md
@@ -0,0 +1,91 @@
+# V1 — Global Design-System Foundation (visual-only pass)
+
+**Scope:** System-level visual polish only. No route, logic, data, feature, markup-text,
+or markup-structure changes. Raw `ns-*` class markup preserved (round-trips to Fresh source).
+Warm-cream light default + dark both retained. All edits are additive rules appended to
+`assets/ns-ext.css` (which loads **last**, after `_ns_styles.css` → `proto.css`, so equal-specificity
+overrides of the DS card/panel/shadow rules win legitimately without touching the generated closure).
+
+**Files touched:** `assets/ns-ext.css` (one appended `V1 — GLOBAL DESIGN-SYSTEM FOUNDATION` block).
+`proto.css` not modified — the console page-header size rule already lived there and only needed a
+tracking/weight refinement, which the ns-ext override supplies. Markup not modified.
+
+**Verification:** 16 nav screens × 2 themes = 32 captures, every iteration. `holes[]` and `errors[]`
+stayed `[]` on all 32 through the final run. Zero surviving `{{ }}`, zero console errors, in both themes.
+Tokens only — no raw hex introduced (the only `rgba()` values are inside shadow/highlight definitions,
+matching the DS's own shadow-token convention, e.g. `--ns-shadow-* : … rgba(0,0,0,…)`).
+
+Final screenshot outdir:
+`/tmp/claude-1000/-home-codex-repos-netscript-beta10/cd2ee104-ed45-4ed4-bcca-f960c60a1d84/scratchpad/shots-final`
+
+---
+
+## What changed, and why
+
+### 1. Signature "press" shadow (biggest lever)
+NS One's stated identity is a **hard-offset press shadow**, but the DS shipped generic soft-blur
+Material shadows (`--ns-shadow-xs: 0 1px 2px rgba(0,0,0,.05)`), which read as templated. Redefined the
+entire shadow ramp (`xs`→`xl`) for **both** themes to a crisp vertical-offset + tight-spread cast so every
+surface sits on the canvas with intent.
+- **Light:** cast uses the warm ink (`rgba(41,37,33,…)`) at low alpha instead of pure black — sits with
+  the warm-cream palette instead of graying it.
+- **Dark:** deeper offset cast, paired with border + top-highlight (see #3) so raised surfaces read.
+- *Before:* cards looked flat/washed, indistinguishable from the page. *After:* cards read as distinct
+  instrument planes with a subtle lift.
+
+### 2. Surface language — card + panel
+- Radius `--ns-radius-xl` (12px, reads soft/marketing) → **10px** (reads instrument) on `.ns-card`,
+  `.ns-panel`, and the net-new console cards (`.ns-kpi`, `.ns-assist`, `.ns-incident`, `.ns-statlink`,
+  `.ns-logstrip`) so hand-built surfaces match the DS card exactly.
+- Every card now carries a resting `--ns-shadow-sm/xs` and net-new console cards inherit the same, so the
+  card grid on Home / Runtime / DLQ reads as a set of planes rather than outlined rectangles.
+- Unified interactive feel: `.ns-card--interactive`, `.ns-kpi`, `.ns-stackmap__node` all lift to
+  `--ns-shadow-md` on hover — one hover language across DS and net-new surfaces.
+
+### 3. Border presence + dark-mode machined edge
+- **Light:** card/panel resting border firmed one notch above the `rgba(0,0,0,.08)` hairline
+  (`color-mix(border-strong 45%, border)`) so the press shadow lands against a real edge, not a wash.
+  Calibrated to stay present-but-not-heavy on the cream canvas.
+- **Dark:** the baseline borders were near-invisible (`rgba(235,228,210,.06)`) — KPI/stat cards
+  dissolved into the near-black canvas. Bumped card/panel/kpi/statlink/logstrip borders to
+  `--ns-border-strong` **and** added a 1px inset top-highlight (`inset 0 1px 0 rgba(235,228,210,.04)`)
+  so raised surfaces catch a Linear/Vercel-style machined edge. This was the single most visible
+  dark-mode fix.
+
+### 4. Typography
+- Display headings: tightened tracking to `-0.02em` on `.ns-page-header h1` for a machined feel.
+- Console page-header (`--console`, used on the 16 in-shell detail views): `text-2xl` / weight 650 /
+  `-0.018em` / line-height 1.15 — one clear notch below the marketing h1 but same optical intent.
+- Lede: normalized to one size (`--ns-text-sm`), relaxed leading, `max-width: 68ch` — calmer measure,
+  consistent across screens (was `0.925rem` and running a touch large/loose).
+- Mono uppercase micro-labels (KPI labels, log heads, mini-labels, CLI labels, grounding labels)
+  normalized to `0.09em` tracking so they read as one family instead of drifting per component.
+
+### 5. Console rhythm + focus
+- Three-zone `.ns-console-grid` gutter tightened one step (`space-6`→`space-5`, `space-6` at ≥1440px)
+  for a denser operator feel without crowding.
+- KPI intra-card rhythm tightened (`gap: space-1-5`, value `letter-spacing: -0.01em`) so the number
+  dominates and the sparkline reads as a footnote — the label+value+delta read as one stat block.
+- Standardized focus ring offset to 2px on the net-new interactive rows (`.ns-flowrow`, `.ns-quickcmd`,
+  `.ns-seg__btn`) that previously used mixed 1px/2px/no-offset.
+
+---
+
+## Deliberately deferred to later per-screen clusters
+
+These are per-screen or component-internal calls, out of scope for a system-level V1 foundation:
+
+- **KPI value↔label vertical spacing on Runtime Config** — the big stat numbers ("2 active", "0", …)
+  sit slightly loose relative to their caption; a per-screen density pass should tune the specific
+  `ns-kpi`/stat markup on that screen rather than the global token.
+- **Waterfall / stackmap internal density** (Run Inspector, Catalog stackmap) — proportional-bar and
+  node-graph tuning is component-scoped, best done in the component's own cluster.
+- **Log-stream / logstrip column widths** — the fixed grid-template columns are content-specific; leave
+  to the log-surface cluster.
+- **Segmented-control + toggle-switch micro-states** — these are DS primitives; any refinement belongs
+  in a DS-primitive pass, not a consumer-CSS override.
+- **Sparkline stroke weights per tone** — legible as-is; a data-viz cluster can calibrate stroke/opacity
+  per intent color if desired.
+
+No accessibility, contrast, or hole/error regressions were observed; the foundation holds in both
+themes across all 16 nav screens.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/00-BEFORE-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/00-BEFORE-desktop-light.png
new file mode 100644
index 000000000..6fccbccb7
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/00-BEFORE-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/01-desktop-dark.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/01-desktop-dark.png
new file mode 100644
index 000000000..ee124afd2
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/01-desktop-dark.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/01-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/01-desktop-light.png
new file mode 100644
index 000000000..1c771cd0f
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/01-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/03-mobile-sheet-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/03-mobile-sheet-light.png
new file mode 100644
index 000000000..07bf009c5
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/03-mobile-sheet-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/04-desktop-selected-thin.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/04-desktop-selected-thin.png
new file mode 100644
index 000000000..66bbce700
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/04-desktop-selected-thin.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/05-desktop-filtered.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/05-desktop-filtered.png
new file mode 100644
index 000000000..913300afb
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog-shots/05-desktop-filtered.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog.md
new file mode 100644
index 000000000..299702dcb
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V10-catalog.md
@@ -0,0 +1,125 @@
+# Pass V10 — Catalog (Service & Contract Registry)
+
+## Design-question answer (first)
+
+> *What tailored components, layout, and visualization best showcase THE CATALOG — a browsable
+> registry of the contracts this app exposes, each with a kind, a type signature / schema, a version,
+> and producer/consumer relationships — and how do they compose?*
+
+**Answer: a contract registry / explorer, not a monitoring console.** The catalog's job is *browse a
+registry → drill into a contract's signature + schema + who uses it*. So the whole screen is a
+**two-pane explorer**: a dense, selectable **registry rail** on the left (contracts grouped by kind,
+each entry a compact card carrying method glyph + mono `proc` name + a REST/RPC/SDK **duality
+tri-pip** + coverage dot + a one-line signature preview), and a **contract detail** on the right that
+renders the full **type signature** (mono, type-colored), a **version + compatibility** header, a
+secondary **line-numbered schema** block, and a **producers → consumers relationship strip**. Above
+both sits a **header composite** of micro-viz (kind distribution channel-bar, coverage ratio meter,
+duality-reach tri-meter, version pill) — never plain number cards. Filter chips (kind / method /
+coverage) + search make it a real registry toolbar. On mobile the rail stacks and a tapped contract
+opens the shared bottom-sheet with the same signature+schema+relationships.
+
+This idiom is deliberately **distinct** from every finished screen: no precedence waterfall (Config),
+no version-arc timeline (Migrations), no fleet triage clusters (DLQ), no live monitoring gauges
+(Workers/Sagas/Triggers/Streams). The catalog reads like a **schema/API registry explorer** — mono
+signatures, line-numbered schema, a duality matrix, and a producer/consumer graph strip.
+
+## What I mined, from which reference
+
+| Reference | What I took | How it's adapted here |
+|---|---|---|
+| **13-devconsole-c** (schema registry + version diff) | The `Schema Registry > name` **breadcrumb**, the stat strip (CURRENT VERSION / TOTAL / FORMAT / **COMPATIBILITY**), the version dropdown, and the **line-numbered code** panel | Detail header = version tag + **compatibility chip**; schema shown as a **line-numbered signature block** (single, not a giant side-by-side diff — "secondary, not a giant diff" per brief) |
+| **11-devconsole-a** (registry table + tabs + detail drawer) | The **registry → right detail drawer** composition, docs sub-tabs, and a compact stat strip | Two-pane browse→detail on desktop; the drawer becomes the **bottom-sheet** on mobile with signature/schema/relationships |
+| **07-chat-signin** (browse/detail composition, KV form) | The **calm browse-left / detail-right** rhythm and the labelled KV block | The detail panel's provenance + transport KV rows; unselected empty-state affordance |
+| **03-analytics-cards** (wildcard) | Segmented **channel-bar** distribution + ratio meters | Header **kind-distribution channel bar** + **coverage ratio meter** as micro-viz instead of number cards |
+| **19-pm-dashboard** (wildcard) | Status-pill dense table + count badges per group | Registry group headers carry a **count + coverage micro-bar**; rows carry inline pips |
+
+## Component prescription (built)
+
+| # | Component | Element in reference | Adaptation |
+|---|---|---|---|
+| 1 | `ns-catreg` registry rail | 11 registry list + 19 grouped rows | Kind-grouped, selectable contract cards; each = method glyph + mono proc + duality tri-pip + coverage dot + signature preview |
+| 2 | `ns-catreg__group` | 19 project groups w/ count | Collapsible kind header + count + **coverage micro-bar** (complete vs thin fill) |
+| 3 | `ns-catdup` duality tri-pip | (new — schema/transport matrix idiom) | 3 pips REST/RPC/SDK, on/off, tinted teal/copper/amber; also a header **reach tri-meter** |
+| 4 | `ns-catsig` signature block | 13 line-numbered code | Line-numbered, mono, **type-colored** type signature (params + return) |
+| 5 | `ns-catschema` schema viewer | 13 code panel | Secondary line-numbered JSON-ish schema, muted, scrollable |
+| 6 | `ns-catrel` producer→consumer strip | (new — dependency graph idiom) | producers column → contract node → consumers column, connector rail |
+| 7 | `ns-cathead` header composite | 13 stat strip + 03 channel-bar/meters | kind-distribution channel bar + coverage ratio meter + duality reach tri-meter + version pill |
+| 8 | `ns-catbar` filter toolbar | 11 toolbar (search + dropdowns) | search + kind/method/coverage chips |
+| 9 | `ns-catver` version + compat | 13 version dropdown + COMPATIBILITY | version tag + compatibility chip in detail header |
+| 10 | Contract bottom-sheet (`sheetIsS4`) | 11 drawer → 06 mobile sheet | Reuses shared `ns-sheet-dialog`: full signature + schema + relationships on mobile |
+
+## Layout & composition
+
+Desktop 1440: `header (breadcrumb + title + Contracts/Routes segmented)` → `ns-cathead` composite
+(4 micro-viz cells) → `ns-catbar` filter toolbar (search + kind/method/coverage chips) →
+`ns-catgrid` two-pane: **registry rail** (`ns-catreg`, grouped selectable cards) + **contract
+detail** (`ns-catdetail`: header w/ version+compat → method-strip → line-numbered signature →
+line-numbered schema → producer→consumer strip → Scalar action). The Routes tab is a dense
+bound/unbound table with a summary chip.
+
+Responsive: ≤960 the header composite goes 2-col; ≤720 the grid collapses to the rail only and the
+detail pane is hidden — tapping a contract opens the shared **bottom sheet** (`sheetIsS4`) with the
+full signature + schema + relationships; ≤560 the header cells stack single-column with divider
+rules. No horizontal body scroll at any width.
+
+## Distinctness from finished screens
+
+- **Not a monitoring console** (Workers/Sagas/Triggers/Streams): no live feed, no runtime gauges, no
+  status-stream. This is a static registry you *browse and read*.
+- **Not the Config waterfall / Migrations arc-timeline / DLQ clusters:** the signature idioms here —
+  a **duality tri-pip matrix**, **type-colored mono signatures**, a **line-numbered schema**, and a
+  **producer→consumer connector strip** — appear on no other screen.
+- Header micro-viz (kind channel-bar + coverage ratio meter + transport-reach tri-meter) replaces the
+  old plain warning badges; per density doctrine, zero plain number-card rows.
+
+## Density notes (per ROLLOUT-DOCTRINE density defaults)
+
+- No plain number-card stat row — header is a composite of a glyph+value cell + three micro-viz cells.
+- Registry cards are compact (≈52px): each earns height with method glyph + proc + signature preview
+  + duality tri-pip + coverage dot. No 100px padded cards.
+- Schema/signature are line-numbered dense mono blocks, not airy bullets; alternating row tint.
+- Group headers carry a count + coverage micro-bar (data-bearing, not a ghost divider).
+- The gated `crons` group is a slim dashed affordance, not a big empty box.
+
+## Data model (visual metadata only — fully derived, no route/logic/copy-meaning change)
+
+`s4Raw` enriches each of the 7 existing contracts with derived visual fields: `ver`, `compat`,
+`input`/`output` (→ signature preview), `sig` (tokenized `[text, kind]` cells → type-colored), `schema`
+(tokenized `[name, kind, rest]` lines → line-numbered block), `producers`/`consumers` (→ relationship
+strip). Derived aggregates: `s4Head` (total, kind distribution, coverage ratio, transport reach),
+`s4Groups` (kind-grouped rows + per-group coverage %), `s4Detail` (selected contract). Geometry uses
+`--w0..--w20` width-bucket classes (5% steps) — **no SVG `{{ }}` holes**. New state:
+`s4Sel`/`s4Kind`/`s4Method`/`s4Cov`/`s4Q`; empty/populated + no-results states all render cleanly.
+Existing `s4Contracts`/`s4Routes`/`s4Tree`/`s4Summary` bindings preserved (Tree/Summary now derived
+from the same source). `sheetIsS4` reuses the shared `ns-sheet-dialog` (right drawer desktop / bottom
+sheet mobile).
+
+## Verification
+
+0 `{{ }}` holes / 0 real console errors (only a benign favicon 404) / 0 horizontal overflow across:
+desktop 1440 (light+dark), mobile 390 (light+dark), plus interaction states — contract selected
+(complete + thin), coverage-filter narrowing (empty groups hidden), Routes tab, and the mobile
+bottom-sheet (light+dark). **Full 16-route regression clean** (every nav item: 0 holes, 0 overflow,
+0 errors). Edits limited to the S4 Catalog markup, S4 state/bindings/derivation, the `sheetIsS4`
+sheet body, and appended `ns-ext.css` — no edits to `support.js`, `_ns_styles.css`, `_ds/*`, or any
+other screen's markup.
+
+## Self-assessment
+
+- **Bespoke:** 9/10 — the explorer idiom (registry rail + signature/schema/relationship detail) is
+  unlike any finished screen; only the Routes secondary tab reuses the generic table.
+- **Density:** 8.5/10 — compact cards, line-numbered mono blocks, composite header micro-viz, no ghost
+  rows. Detail pane has some intentional breathing room around the schema block.
+
+## Honest gaps / declined
+
+- The **Routes tab** stays a standard dense table (it is the secondary tab; the Contracts explorer
+  carries the bespoke weight). A future pass could give it a small route→contract binding graphlet.
+- The producer/consumer nodes are **non-interactive labels** (deep-linking them to their entities is a
+  candidate future enhancement; the data has no canonical target ids today, so I did not invent nav).
+- Version history is shown as a single `ver`+`compat` chip, **not** a v→v diff viewer (brief said
+  schema should be "secondary, not a giant diff" — so a single line-numbered block, not the ref-13
+  side-by-side). A version dropdown could be added if multi-version data is introduced.
+- Signature/schema strings are illustrative visual metadata consistent with each proc's method +
+  namespace; they are not read from a real type system (this is a static prototype).
+
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/00-BEFORE-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/00-BEFORE-desktop-light.png
new file mode 100644
index 000000000..f3e84f722
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/00-BEFORE-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/01-after-desktop-dark.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/01-after-desktop-dark.png
new file mode 100644
index 000000000..06c19390e
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/01-after-desktop-dark.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/01-after-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/01-after-desktop-light.png
new file mode 100644
index 000000000..c495abb49
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/01-after-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/01-after-mobile-sheet-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/01-after-mobile-sheet-light.png
new file mode 100644
index 000000000..319131518
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/01-after-mobile-sheet-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/03-revoke-confirm-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/03-revoke-confirm-desktop-light.png
new file mode 100644
index 000000000..6dc67b11c
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/03-revoke-confirm-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/04-filter-revoked-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/04-filter-revoked-desktop-light.png
new file mode 100644
index 000000000..85fd61f72
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth-shots/04-filter-revoked-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth.md
new file mode 100644
index 000000000..6a06e8df9
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V11-auth.md
@@ -0,0 +1,149 @@
+# Pass V11 — Auth Sessions (session-security roster)
+
+## Design-question answer (first)
+
+> *What tailored components, layout, and visualization best showcase AUTH SESSIONS — active
+> authenticated sessions (who / what device / from where / issued→expires TTL / scopes / status)
+> that an operator inspects and can revoke — and how do they compose?*
+
+**Answer: a session-security console, not a table.** An operator's job here is *scan who is
+authenticated → judge risk (how long is this token still valid, does it hold elevated scope, is it
+MFA-backed, where from) → drill into one session → revoke it.* So the whole screen is a **security
+roster**: identity-forward **session cards** (avatar + device glyph + provider + geo + a live
+**TTL/expiry countdown bar** + scope chips + status), fronted by a **security header composite**
+whose signature element is an **expiry-horizon strip** (soonest-to-expire ordering), and drilling
+into a card opens a **session detail** panel with a **TTL lifespan visualization** (elapsed-hatch vs
+remaining-fill with a *now*-marker), an identity/device/geo KV block, granted scopes, and a
+**session-lifecycle timeline** — with **Revoke** (per-session) and a gated **Revoke all**. On mobile
+the detail is the shared **bottom sheet**.
+
+The screen-owning idiom is **time-to-live**: nothing else in the app expresses a lifespan. Every
+session carries a remaining-vs-elapsed bar and a countdown; the header orders live sessions by how
+soon they die. That makes Auth visually **distinct** from every finished screen — not the live
+monitoring gauges of the consoles, not the Config precedence waterfall, not the Migrations version
+arc, not the DLQ error-signature clusters, not the Catalog registry rail. It reads like a
+**security/session console** (identity avatars, TTL meters, scope chips, revoke) that appears nowhere
+else.
+
+## What I mined, from which reference
+
+| Reference | What I took | How it's adapted here |
+|---|---|---|
+| **07-chat-signin** (identity / principal treatment) | The circular identity glyph + the provider sign-in affordance (Apple/Google) | Session cards lead with an **initials avatar** + a **device-glyph badge**; the provider becomes a tinted **`ns-authprov` chip** (oidc·workos / password / api-key). **Rejected the ref's raw green** — used NS copper (human) / teal (service) / amber, per the hard rule. |
+| **19-pm-dashboard** (Mondays) | The rounded **stat-pill strip**, the **status pills** (In Progress/Pending/Completed), the avatar treatment, and the **day-strip** rhythm | Status → **`ns-badge` tones** (active=success / idle=warning / expiring=destructive / revoked=muted); the pill-strip idea became the **header composite**; the day-strip's ordered horizontal rhythm became the **expiry-horizon strip** (one row per live session, ordered by remaining). |
+| **11-devconsole-a** (Kafka console: stat strip + table + right detail drawer) | The **stat strip → dense list → right-side detail DRAWER** composition and the search+filter toolbar | Two-pane **roster + detail** on desktop; the drawer becomes the **bottom sheet** on mobile; the toolbar = search + status filter chips + sort segmented. |
+| **04-finance-cards** (wildcard — elapsed/segmented meters) | Segmented horizontal meters with a value marker | The **detail TTL lifespan track**: hatched elapsed + toned remaining + a **now-marker** positioned at the elapsed boundary (width-bucketed). |
+| **03-analytics-cards** (wildcard — channel bar + ratio meters) | Segmented distribution channel-bar + ratio meters | Header **status-distribution channel bar** (click-to-filter) + **elevated-scope** and **MFA-coverage** ratio meters — replacing plain number cards. |
+
+## Component prescription (built)
+
+| # | Component | Element in reference | Adaptation |
+|---|---|---|---|
+| 1 | `ns-authcard` session card | 07 identity glyph + 19 status-pill row | Avatar + device-glyph badge + name + elevated flag + uid/email + provider chip + geo + MFA + status badge + TTL bar + scope-chip footer + revoke; left status rail |
+| 2 | `ns-ttlbar` live TTL bar | 04 segmented meter | Per-card remaining-fill, tone by urgency; **hatched** when expiring (≤12%); width-bucket geometry |
+| 3 | `ns-authttl` lifespan viz | 04 elapsed/marker meter | Detail: hatched **elapsed** vs toned **remaining** + a **now-marker** at the elapsed boundary + issued/TTL/expiry labels |
+| 4 | `ns-authhead` header composite | 19 stat-strip + 03 channel-bar/meters | glyph+count hero + status channel bar + legend + elevated-scope meter + MFA-coverage meter + expiry-horizon strip |
+| 5 | `ns-authhz` expiry-horizon strip | 19 day-strip rhythm | Live sessions ordered soonest→latest; per-row track + countdown; click selects; the **signature** header viz |
+| 6 | `ns-authchan` status channel bar | 03 segmented channel bar | active/expiring/idle/revoked segments, click-to-filter, tone-colored |
+| 7 | `ns-authratio` ratio meter | 03 ratio meter | Elevated-scope % and MFA-coverage % gradient fills (amber→destructive / teal) |
+| 8 | `ns-authbar` roster toolbar | 11 search + filters | search + status filter chips (`ns-authbar__chip`) + sort segmented (soonest expiry / by status) |
+| 9 | `ns-authdetail` detail panel | 11 right drawer | identity header + TTL viz + KV block + scopes + lifecycle timeline + revoke; sticky |
+| 10 | `ns-authtl` lifecycle timeline | 11 detail history (+ DLQ step-timeline idiom) | tone-dotted compact steps: issued → refresh/idle → revoked |
+| 11 | `ns-scopechip` scope chips | (new — RBAC idiom) | elevated (admin/deploy/write) tinted copper vs muted read |
+| 12 | `sheetIsS15` bottom sheet | 11 drawer → 06 mobile sheet | Reuses shared `#ns-sheet-dialog`: full identity + TTL + KV + scopes + timeline + revoke on mobile |
+| 13 | `ns-auth__now` + `Revoke all` | 11 "Connected" env pill + toolbar action | live server-clock chip (pulsing dot) + gated destructive **Revoke all N** |
+
+## Layout & composition
+
+Desktop 1440: `header (title + lede + now-clock + Revoke all)` → **`ns-authhead`** composite (hero
+count + status channel bar + elevated meter + MFA meter + expiry-horizon strip) → **`ns-authbar`**
+toolbar (search + filter chips + sort segmented) → **`ns-authgrid`** two-pane: **roster**
+(`ns-authcard` list, sorted soonest-expiry or by-status) + **detail** (`ns-authdetail`: identity
+header → TTL lifespan viz → KV → scopes → lifecycle timeline → revoke) → **`ns-authstream`**
+two-column auth.* event feed.
+
+Responsive: ≤1180 the header composite goes 2-col; ≤900 the grid collapses to the roster only and
+the detail pane hides — tapping a card opens the shared **bottom sheet** (`sheetIsS15`) with the full
+identity/TTL/KV/scopes/timeline/revoke; ≤640 the header stacks single-column, cards reflow (avatar +
+identity top, then a full-width status+TTL+countdown row, then scopes + revoke), the toolbar wraps,
+the stream goes single-column. No horizontal body scroll at any width.
+
+## Distinctness from finished screens
+
+- **Not a monitoring console** (Workers/Sagas/Triggers/Streams): no live runtime gauges, no
+  status-stream monitoring. This is an identity/session **security** view.
+- **Not** the Config precedence waterfall, the Migrations version-arc timeline, the DLQ
+  error-signature clusters, or the Catalog registry rail. The idioms unique to Auth — an
+  **identity avatar + device glyph**, a **per-row live TTL countdown bar**, a **soonest-to-expire
+  horizon strip**, a **lifespan elapsed/now/remaining track**, **scope chips**, and a **revoke**
+  flow — appear on no other screen.
+- Header micro-viz (status channel bar + elevated/MFA ratio meters + expiry-horizon) replaces the
+  old plain table caption; per density doctrine, zero plain number-card rows.
+
+## Density notes (per ROLLOUT-DOCTRINE density defaults)
+
+- **No plain number-card stat row** — the header is a composite: glyph+count hero + channel bar +
+  two ratio meters + a per-session horizon strip.
+- **Compact cards** (~110px incl. footer): each earns height with avatar + device + provider + geo +
+  MFA + status + TTL bar + countdown + scope chips + revoke — no padded 3-line boxes.
+- **Dense KV + timeline**: mono, alternating-tint KV rows; a compact tone-dotted lifecycle timeline,
+  not airy bullets.
+- **No ghost rows**: the empty/no-match state is a single centered affordance with a Clear-filters
+  action, not a big dashed box; revoked sessions dim + carry a slim revoked-note, not an empty gap.
+
+## Data model (visual metadata only — fully derived, no route/logic/copy-meaning change)
+
+`s15Raw` enriches the session projection with **derived visual fields**: `dev`/`agent` (device +
+user-agent), `ip`/`loc`/`geo`, `issued`/`expires`/`ttlFrac`/`lifespan` (→ TTL bars + lifespan viz),
+`scopes` + `elevated` (→ scope chips + elevated meter), `mfa`, `corr`. The original three sessions
+(usr_31 / usr_18 / usr_07) are preserved in meaning (same ids, provider, state, started time, last
+event text) and enriched; two more sessions (usr_44 idle, svc_52 service/expiring) are added so the
+roster is **dense** and exercises every status (active / idle / expiring / revoked / service) — the
+prototype data was already illustrative. Derived aggregates: `s15Head` (active/live counts, status
+distribution, elevated %, MFA %, expiry horizon), `s15Detail` (selected session KV + lifecycle
+timeline). Geometry uses `--w0..--w20` width-bucket classes (5% steps) — **no SVG `{{ }}` holes**.
+New state: `s15Sel`/`s15Filter`/`s15Sort`/`s15Q`. `sheetIsS15` reuses the shared `#ns-sheet-dialog`
+(right drawer desktop / bottom sheet mobile via `matchMedia(640px)`). Revoke + Revoke-all reuse the
+shared `askConfirm` → `#ns-confirm-dialog` flow with the correct `netscript auth sessions revoke`
+CLI. The `authFeed` (auth.* event stream) is preserved verbatim.
+
+> **`sc-if` has no `negate`** (the engine's `walkIf` only checks `value` truthiness). Empty-state and
+> revoked-note branches are gated on inverted bindings (`s15NoResults`, `s15Detail.cannotRevoke`)
+> instead — verified rendering both branches correctly.
+
+## Verification
+
+0 `{{ }}` holes / 0 real console errors (only the benign favicon 404) / 0 horizontal overflow across:
+desktop 1440 (light+dark), mobile 390 (light+dark), plus interaction states — session selected
+(Analytics Sync expiring @3%, Maya active/elevated @50% — **now-marker verified at the correct
+elapsed boundary** across life stages), **revoke confirm** (light+dark, correct `sess_52 → revoked` +
+CLI), **mobile revoke-all confirm**, the **mobile bottom sheet** (light+dark), the **Revoked filter**,
+and the **empty/no-match** state. **Full 16-route regression clean** (every nav item: 0 holes, 0
+overflow, 0 errors — no other screen changed). Edits limited to the S15 Auth markup, the S15
+state/derivation/bindings, the `sheetIsS15` sheet body + `sheetTitle` case, and appended `ns-ext.css`
+— no edits to `support.js`, `proto.css`, `_ds/*`, or any other screen's markup.
+
+## Self-assessment
+
+- **Bespoke:** 9/10 — the session-security idiom (identity avatars + live TTL countdown bars +
+  soonest-to-expire horizon + lifespan track + scope chips + revoke) is unlike any finished screen;
+  only the auth.* event stream reuses the generic `ns-activity-feed` (intentionally — it is the
+  secondary strip and its copy is preserved verbatim).
+- **Density:** 8.5/10 — composite header micro-viz, compact multi-metadata cards, dense KV + timeline,
+  no ghost rows, click-to-filter distribution. The detail panel keeps a little intentional breathing
+  room around the lifespan viz and the revoke CTA.
+
+## Honest gaps / declined
+
+- The **auth event stream** stays a standard (two-column) `ns-activity-feed`. It is a real,
+  copy-locked data strip; giving it a bespoke treatment risked changing its meaning, so I kept it and
+  spent the bespoke budget on the roster + TTL viz.
+- Session **avatars are initials**, not photos (the projection has no avatar URLs; inventing image
+  assets would exceed "visual metadata only"). The device glyph + kind-tone carry identity instead.
+- **TTL is a static snapshot** at the app clock (14:02:11) — the bars express elapsed/remaining but
+  do not tick live (the prototype has no animation loop for it; a `requestAnimationFrame` countdown
+  is a candidate future enhancement).
+- Device / geo / IP / scope values are **illustrative visual metadata** consistent with each
+  session's provider and kind; they are not read from a real auth backend (static prototype).
+- "Open in Aspire" on the detail is a placeholder affordance (no canonical Aspire session resource to
+  deep-link to today).
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-fix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-fix.md
new file mode 100644
index 000000000..e5d666e0b
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-fix.md
@@ -0,0 +1,101 @@
+# Pass V12-fix — Extensions density tighten
+
+**Scope:** VISUAL + LAYOUT ONLY. No route/logic/data/copy-meaning change. The bespoke
+contribution-manifest idiom (provider roster + surface-grouped manifest + Surfaces lanes +
+Available) is KEPT — this pass only removes the density looseness the adversarial vision gate
+(58/100) flagged. The gate's table-conversion / avatar / version-timeline prescriptions were
+DECLINED (they would echo the consoles, or invent data that does not exist).
+
+Files touched:
+- `render/prototype.dc.html` — Surfaces lane markup (added header meter + mount summary + slim
+  footer, split mount-card into a single meta/perm row); CONTRIBUTES row markup (`__meta` →
+  `__path` chip); `extLanes` JS enriched with `shareWClass` / `mountSummary` / `foot` (derived
+  from existing counts — no new data).
+- `render/assets/ns-ext.css` — appended a `V12-fix — DENSITY PASS` block that overrides the loose
+  rules by cascade order. All rules scoped under `.ns-ext*`.
+
+## What changed, by the 5 asks
+
+### 1. Compact provider roster cards (`ns-extprov`)
+- Vertical padding `space-2-5` → `7px` top/bottom; internal `__main` row gap `space-2` (8px) → `3px`.
+- Left icon gutter tightened: glyph `2.1rem` → `1.75rem`, column gap `space-3` → `space-2-5`.
+- Roster inter-card gap `space-2-5` → `space-2`.
+- **Card height 88px → 59px (−33%).** The three rows (name+status / micro-bar / pips+source) now
+  hug each other; every row still carries real content, none is padding.
+
+### 2. Slim per-provider contribution micro-bar (`ns-extprov__contribbar`)
+- Height `.5rem` (8px) → **4px**, dropped the track background + inset border so it reads as a slim
+  segmented rule sitting directly under the name. Copper=panel / teal=command / amber=tool kept;
+  a faint per-segment inset keeps segments legible at 4px.
+
+### 3. Densify the manifest CONTRIBUTES section (`ns-extmanifest`)
+- Each contribution is now a **~44px row**: surface glyph + bold name + an inline **path chip**
+  (the mount path, tinted to the surface colour, ellipsised) + right-aligned perm. Title + path
+  sit on one line (`nowrap`, `min-width:0`) so rows stay at 44px instead of wrapping to ~64px.
+- Group header is now **sticky** (slim, uppercased, `top:0` with a light backdrop blur) so the
+  surface grouping stays anchored while the list scrolls.
+- KV grid row padding `space-1-5` → `space-1`; manifest section gaps tightened
+  (`gap` `space-3-5`→`space-3`, groups `space-2-5`→`space-2`).
+
+### 4. Tighten the top stat composite (`ns-exthead`)
+- Cell padding `space-4/space-5` → `space-3/space-3-5`; cell gap `space-2-5` → `space-2`.
+- Hero glyph `2.75rem` → `2.25rem`, hero number `3xl` → `2xl`.
+- Channel bar height `1.5rem` → `1.25rem`; compat alert padding `space-2-5` → `space-2`.
+- **Micro-viz preserved** — the contributions-by-surface segmented bar (click-to-filter), the
+  enabled-coverage meter, the tier chips, and the compatibility alert are all intact, just denser.
+
+### 5. Fix the Surfaces uneven-lane whitespace (`ns-extlane`)
+Root cause: three equal `auto-fit` columns in one grid row with `align-items:start`; the 6-item
+Panels lane (649px) forced the row band tall while the two 2-item lanes (277px each) left ~372px
+empty below → a big empty lower-right region.
+
+Fix — **2-column independent-height layout**:
+- Panels lane spans the **left column** (`grid-row: 1 / span 2`, `minmax(0,1.35fr)`).
+- Commands lane (row 1) and AI-tools lane (row 2) **stack in the right column** (`minmax(0,1fr)`).
+- Each lane gained a **header stat**: a slim 4px share meter (fill ∝ contribution count, surface
+  colour) + a monospace **mount summary** (`capabilities/* · data/*`, `⌘K palette`, `AI runtime`).
+- Each lane gained a **slim dashed footer**: `↳ N <surface> from M provider(s)` (derived from the
+  real per-lane counts).
+- Mount-cards densified: path + perm collapsed onto one `space-between` row; per-lane redundant
+  description paragraph hidden (the header meter + mount summary now carry that signal).
+
+Result: right column height (256 + 256 + gap ≈ **525px**) now matches the Panels lane (**520px**),
+so the two columns bottom-align. The empty region shrank from **~372px → ~5px**. Mobile ≤720px
+collapses all three lanes to a single stacked column.
+
+## Verification
+
+Measured via Playwright (Chromium 1232), `deviceScaleFactor: 2`, live harness
+`http://127.0.0.1:8899/prototype.dc.html`.
+
+| Metric | Before | After |
+|---|---|---|
+| Provider card height | 88px | **59px (−33%)** |
+| Contribution micro-bar height | 8px | **4px** |
+| CONTRIBUTES row height | ~64px (wrapping) | **44px** |
+| Surfaces empty lower-right | ~372px | **~5px** |
+| Panels lane vs right column | 649 vs (277+277) split | **520 vs 525 (aligned)** |
+
+Gates (all views × 1440 + 390 × light + dark):
+- **Zero `{{ }}` holes** — Providers, Surfaces, mobile sheet all 0.
+- **Zero console errors** — (the single 404 is a pre-existing unrelated favicon/resource fetch,
+  present before this pass).
+- **Zero horizontal overflow** — 22/22 checks false (3 views × 2 themes × 2 viewports + sheets).
+- **16-route regression clean** — every sidebar route: 0 overflow, 0 holes, 0 errors. Appended CSS
+  is scoped under `.ns-ext*` and did not leak.
+
+Shots (overwritten in `render/_visual-reports/V12-ext-shots/`, `00-BEFORE-*` retained for compare):
+Providers / Surfaces / Available × desktop 1440 + mobile 390 × light + dark, a provider selected
+(triggers, both themes), and the mobile manifest bottom sheet (both themes).
+
+## Honest gaps
+- The roster cards have visible empty space to the *right* of the 4px micro-bar (the bar spans full
+  width but the pips/source row is short); this is intentional breathing room, not dead space, and
+  keeps the card from echoing a table. Could be filled with a right-aligned mount-count chip in a
+  future pass if the gate still flags it.
+- The Surfaces 2-column split assumes the Panels lane stays the tallest (it holds 6 of 10
+  contributions). If the data shifted so Commands/AI-tools out-grew Panels, the right column could
+  exceed the left; the `grid-row` placement is keyed to `data-kind` so it degrades gracefully
+  (short lanes just leave a little space) rather than overflowing.
+- CONTRIBUTES path chips ellipsise very long mount paths on narrow manifest widths; the full path
+  remains in the KV grid / mount map, so no information is lost, but the chip itself truncates.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/00-BEFORE-panels-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/00-BEFORE-panels-desktop-light.png
new file mode 100644
index 000000000..e56ac11f4
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/00-BEFORE-panels-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/01-providers-desktop-dark.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/01-providers-desktop-dark.png
new file mode 100644
index 000000000..0b3b7319c
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/01-providers-desktop-dark.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/01-providers-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/01-providers-desktop-light.png
new file mode 100644
index 000000000..dd64a2871
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/01-providers-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/04-surfaces-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/04-surfaces-desktop-light.png
new file mode 100644
index 000000000..217654564
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/04-surfaces-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/06-available-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/06-available-desktop-light.png
new file mode 100644
index 000000000..201a1b207
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/06-available-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/09-mobile-sheet-manifest-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/09-mobile-sheet-manifest-light.png
new file mode 100644
index 000000000..03dbe7da4
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext-shots/09-mobile-sheet-manifest-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext.md
new file mode 100644
index 000000000..5c50eb01b
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-ext.md
@@ -0,0 +1,153 @@
+# Pass V12 — Extensions (contribution-manifest console)
+
+## Design-question answer (first)
+
+> *What tailored components, layout, and visualization best showcase EXTENSIONS — the installed
+> add-ons that extend the app/runtime, each with what it CONTRIBUTES (the surfaces/capabilities it
+> adds), a version + source, an enabled/disabled status, and config — and how do they compose?*
+
+**Answer: a contribution manifest, not an app-store grid.** An extension here is a *provider* — a
+plugin that mounts contributions into named host **surfaces** (UI panels/routes, ⌘K commands, AI
+tools). The operator's job is *see who is installed → understand WHAT each one adds and WHERE it
+plugs in → judge trust + version/contract compat → drill into one extension's full manifest →
+enable/disable it.* So the screen is a **provider roster + contribution manifest**, and the
+screen-owning idiom is the **contribution surface**: every extension carries a per-row
+**contribution bar** (a stacked mini-bar whose segments are colored by surface kind — copper=panel,
+teal=command, amber=tool) plus surface **pips** ("+2 panels · +2 cmds"), and selecting one opens a
+**manifest** that groups its contributions by surface, shows a **"plugs into"** mount map, and gates
+enable/disable. Three composable views share one header: **Providers** (roster + manifest),
+**Surfaces** (the cross-cut — three tinted lanes listing every contribution mounted into
+Panels/Commands/AI-tools with provenance), and **Available** (install/quarantine with a
+**contract-compatibility meter**).
+
+The idiom nothing else in the app uses: **surface-typed contribution shape** (copper/teal/amber
+segments) + a **surface-grouped manifest** + a **"plugs into" mount map** + a **built-for-vs-host
+contract meter**. That makes Extensions visually **distinct** from every finished screen — not the
+console monitoring gauges, not the Config precedence waterfall, not the Migrations version arc, not
+the DLQ error-signature clusters, not the Catalog registry rail, not the Auth TTL/identity roster.
+
+## What I mined, from which reference
+
+| Reference | What I took | How it's adapted here |
+|---|---|---|
+| **21-flow-builder** (outamate node-graph + **component palette** Text/Image/Gallery/Button) | The idea that nodes CONTRIBUTE into a canvas, plus the tinted **category-tile palette** and the right **properties panel** | The palette became the **surface-kind colour system** (copper/teal/amber per contribution kind) and the **Surfaces lanes**; the right properties panel became the **manifest detail pane**. The "what does this node add" framing is the whole screen's spine. |
+| **11-devconsole-a** (Kafka console: stat strip → dense list → right detail DRAWER) | The **stat strip → roster → right-side detail drawer** composition + the filter toolbar | Two-pane **roster + manifest** on desktop; the drawer → shared **bottom sheet** on mobile; the toolbar became the **surface-kind filter chips** (`ns-extbar`). |
+| **19-pm-dashboard** (Mondays) | The rounded **stat-pill strip**, **status pills** (In Progress/Pending/Completed), grouped table cards | The pill-strip idea became the **header composite**; status → enabled/disabled **status dots**; the grouped-table rhythm became the **contribution groups** inside the manifest. |
+| **07-chat-signin** (card composition) | Clean card head (glyph + title + meta) + a footer action row — **but rejected the raw green/blue buttons** | Provider rows + available cards use a glyph + name + meta head and a gated CTA in **NS copper/teal/amber**, never generic SaaS green/blue (per hard rule). |
+| **03-analytics-cards** (wildcard — channel bar + ratio meters) | Segmented **channel bar** + **ratio meters** | Header **surface-distribution channel bar** (click-to-filter) + **enabled-coverage ratio meter**, replacing plain number cards. |
+| **04-finance-cards** (wildcard — elapsed/segmented meter w/ marker) | Segmented meter with a value marker | The Available **contract-compatibility meter**: built-for fill (teal if ==host, amber if behind) + a **host "now" marker** at the right edge. |
+
+## Component prescription (built)
+
+| # | Component | Element in reference | Adaptation |
+|---|---|---|---|
+| 1 | `ns-exthead` header composite | 19 stat-strip + 03 channel/meters | glyph+count hero + surface channel bar + enabled ratio meter + tier chips + **compat alert** — no plain number cards |
+| 2 | `ns-extchan` surface channel bar | 03 segmented channel bar | panels/commands/tools segments (copper/teal/amber), width ∝ count, **click-to-filter** the roster |
+| 3 | `ns-extratio` enabled meter | 03 ratio meter | enabled-coverage fill; turns copper when any disabled, with a live count foot |
+| 4 | `ns-extcompat` compat alert | 11 "Connected" env pill (inverted → warning) | quarantine/held summary + host-contract chip |
+| 5 | `ns-extbar` surface filter chips | 11 search + filters | all / Panels / Commands / AI-tools chips (tinted-active), provider count |
+| 6 | `ns-extprov` provider row | 21 node "what it adds" + 07 card head | glyph (tier) + name + version + status dot + **contribution bar** + surface **pips** + source; left status rail; the roster unit |
+| 7 | `ns-extprov__contribbar` contribution bar | 21 palette-tinted segments | the **signature** per-row viz: stacked segments colored by surface kind, width ∝ count |
+| 8 | `ns-extmanifest` manifest pane | 21 properties panel / 11 drawer | identity head + KV (source/version/tier/contract/contributes) + **contribution groups** + **plugs-into** + gated toggle; sticky desktop → bottom sheet mobile |
+| 9 | `ns-extgroup` contribution group | 19 grouped table + 21 palette | contributions grouped by surface kind, tinted header + per-item mount target + perm |
+| 10 | `ns-extmounts` "plugs into" map | 21 canvas mount points | tinted chips (capabilities/* · data/* · ⌘K palette · AI runtime) — the mount surfaces this ext touches |
+| 11 | `ns-extlane` surface lane | 21 palette columns / 11 lanes | Surfaces view: 3 tinted lanes (Panels/Commands/AI-tools) each listing every contribution + provenance chip + perm |
+| 12 | `ns-extmount-card` mount card | 11 dense list row | per-contribution card inside a lane: icon + title + **provider chip (tier)** + mount + perm |
+| 13 | `ns-extcompatbar` contract meter | 04 elapsed/marker meter | built-for fill (teal ok / amber behind) + host "now" marker; the version-drift story |
+| 14 | `sheetIsS16` bottom sheet | 11 drawer → 06 mobile sheet | reuses shared `#ns-sheet-dialog`: full manifest (identity + KV + groups + plugs-into + toggle) on mobile |
+
+## Layout & composition
+
+Desktop 1440: `header (title + lede + Providers/Surfaces/Available segmented)` → **`ns-exthead`**
+composite (count hero + surface channel bar + enabled meter + tier chips + compat alert). Then per
+view: **Providers** = `ns-extbar` filter chips → **`ns-extgrid`** two-pane (roster of `ns-extprov`
+rows + sticky `ns-extmanifest`); **Surfaces** = **`ns-extlanes`** three tinted lanes; **Available** =
+**`ns-extavail`** cards with the contract meter.
+
+Responsive: ≤1180 the header composite goes 2-col; ≤1023 the grid collapses to the roster only and
+the manifest hides — tapping a provider opens the shared **bottom sheet** (`sheetIsS16`) with the
+full manifest; ≤720 the header stacks single-column, lanes/available go single-column, rows reflow.
+No horizontal body scroll at any width.
+
+## Distinctness from finished screens
+
+- **Not a monitoring console** (Workers/Sagas/Triggers/Streams): no runtime gauges or status stream.
+- **Not** the Config waterfall, Migrations version arc, DLQ clusters, Catalog rail, or Auth
+  TTL/identity roster. The idioms unique to Extensions — a **surface-typed contribution bar**, a
+  **surface-grouped manifest**, a **"plugs into" mount map**, and a **built-for-vs-host contract
+  meter** — appear on no other screen.
+- Header micro-viz (surface channel bar + enabled ratio meter + tier chips + compat alert) replaces
+  the old airy 3-column KV grid; per density doctrine, zero plain number-card rows and no dead region.
+
+## Density notes (per ROLLOUT-DOCTRINE density defaults)
+
+- **No plain number-card stat row** — the header is a composite (count hero + click-to-filter channel
+  bar + ratio meter + tier chips + compat alert).
+- **Compact rows** — each `ns-extprov` earns its height with glyph + name + version + status +
+  contribution bar + pips + source (no padded 3-line card).
+- **Dense manifest** — alternating-tint KV, tinted contribution groups with per-item mount+perm, and
+  a compact mount-chip map, not an airy scroll.
+- **No ghost rows** — the old huge empty region below the 6 cards is gone; the two-pane grid + lanes
+  fill the viewport. Disabled providers dim + carry a gray rail, not an empty gap.
+
+## Data model (visual metadata only — no route/logic/copy-meaning change)
+
+The original `extPanels` / `extActions` arrays (ids, mounts, slots, tiers, perms, toggle flows, CLIs,
+copy) are **preserved verbatim**. Derived on top: `extContribs` tags every panel/action with a
+surface **kind** (panel/command/tool); `extProviders` **groups contributions by plugin** (the
+extension) and derives the contribution bar (`extWCls` width buckets), pips, byKind counts, and an
+enabled flag (a provider is disabled only when all its panels are disabled — driven by the existing
+`extDisabled` map). `EXTMETA` adds illustrative **version + source** per plugin (consistent with
+first-party tier); `buildManifest` assembles the KV, surface-grouped contribution list, and the
+"plugs into" mount set. `extHead` derives the header aggregates; `extSurfChips` the roster filter;
+`extLanes` the Surfaces cross-cut; `extAvailable` enriches the two available entries with a
+contract-compat fraction + adds-pips (copy/CLIs untouched). New state: `extSel` (selected provider),
+`extSurf` (surface-kind roster filter). The segmented tabs reuse the existing `extTab` query param
+(Providers=panels / Surfaces=actions / Available=available), so routing + deep-links are unchanged.
+`sheetIsS16` reuses the shared `#ns-sheet-dialog` (right drawer desktop / bottom sheet mobile via
+`matchMedia(900px)`). Enable/disable + install/quarantine reuse the shared `askConfirm` →
+`#ns-confirm-dialog` flow with the correct `netscript plugin …` CLIs. Geometry uses shared
+`--w0..--w20` width-bucket classes (`--wpct`/`--wnum`) — **no SVG `{{ }}` holes**.
+
+## Verification
+
+0 `{{ }}` holes / 0 real console errors (only the benign favicon/resource 404) / 0 horizontal
+overflow across: **Providers** (desktop 1440 light+dark, mobile 390 light), **Surfaces** (desktop
+light+dark, mobile), **Available** (desktop light+dark, mobile), plus interaction states — provider
+**selected** (triggers manifest: 2 panels + 2 commands grouped, plugs-into capabilities/* · data/* ·
+⌘K), **surface-kind filter** (Commands chip → roster narrows to triggers, teal-active, count
+updates), tool-only provider (runtime-config manifest), the **disable confirm** (light+dark, correct
+`sagas.console = enabled → disabled` + `netscript plugin disable sagas`), the resulting **disabled
+state** (row dims + gray rail, header meter → "5 enabled · 1 disabled", manifest → Enable, toast),
+and the **mobile bottom sheet** (light+dark). **Full 16-route regression clean** in **both themes**
+(every nav item: 0 holes / 0 overflow / 0 errors — no other screen changed). Edits limited to the
+S16 Extensions markup, the S16 derivation/bindings, the `sheetIsS16` sheet body + `sheetTitle`/sheet
+wiring, and appended `render/assets/ns-ext.css` — no edits to `support.js`, `proto.css`, `_ds/*`, or
+any other screen's markup.
+
+## Self-assessment
+
+- **Bespoke:** 9/10 — the contribution-manifest idiom (surface-typed contribution bar +
+  surface-grouped manifest + plugs-into mount map + built-for-vs-host contract meter + tinted
+  Surfaces lanes) is unlike any finished screen. Only the confirm dialog + bottom-sheet chrome reuse
+  the shared kit (intentionally, for consistency).
+- **Density:** 8.5/10 — composite header micro-viz, compact multi-metadata rows, dense grouped
+  manifest, tinted lanes, click-to-filter; the old dead region is gone. The single small soft spot is
+  the transient filtered state where the roster narrows to one provider (left column shorter than the
+  tall manifest) — acceptable for a filter view; the default "all" state fills both columns.
+
+## Honest gaps / declined
+
+- **Version + source** (`v2.4.0`, `netscript`) are illustrative visual metadata consistent with each
+  plugin's first-party tier — not read from a real registry (static prototype). The **contract "v2 ·
+  compatible"** line and the Available built-for-v1/v2 values likewise dramatize the quarantine story
+  the original copy already told.
+- The extension **detail route** `/extensions/:extensionId` still exists and is wired via the
+  original per-panel `open`; the manifest's primary drill is the in-page pane / bottom sheet
+  (`extSel`). The panel `nav('/extensions/…')` deep-link is preserved but not the primary affordance.
+- Provider "**config**" is represented by the manifest KV + slots/perm metadata and the enable/disable
+  toggle — there is no free-form config editor (the prototype exposes none; inventing one would exceed
+  "visual metadata only").
+- In the **filtered** Providers view, if the currently-selected provider is filtered out the manifest
+  falls back to the first visible provider — correct, but means the manifest can change when you
+  toggle a filter chip. Intentional (keeps the pane populated), noted for transparency.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/available-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/available-desktop-light.png
new file mode 100644
index 000000000..268374e26
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/available-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/available-mobile-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/available-mobile-light.png
new file mode 100644
index 000000000..d6e640dda
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/available-mobile-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/provider-selected-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/provider-selected-desktop-light.png
new file mode 100644
index 000000000..ab90ebd42
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/provider-selected-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/provider-selected-mobile-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/provider-selected-mobile-light.png
new file mode 100644
index 000000000..0176e4306
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/provider-selected-mobile-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/providers-desktop-dark.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/providers-desktop-dark.png
new file mode 100644
index 000000000..eacf6101e
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/providers-desktop-dark.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/providers-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/providers-desktop-light.png
new file mode 100644
index 000000000..7df8d7576
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/providers-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/providers-mobile-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/providers-mobile-light.png
new file mode 100644
index 000000000..e91f9e3c8
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/providers-mobile-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/surfaces-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/surfaces-desktop-light.png
new file mode 100644
index 000000000..e1621f96e
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/surfaces-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/surfaces-mobile-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/surfaces-mobile-light.png
new file mode 100644
index 000000000..ca981e641
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix-shots/surfaces-mobile-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix.md
new file mode 100644
index 000000000..3f581c8de
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-refix.md
@@ -0,0 +1,114 @@
+# V12 Extensions — component rethink
+
+## Design question
+
+*"What tailored components, layout, composition, data-visualization, and data-structure best showcase
+EXTENSIONS — installed add-ons that mount contributions into host surfaces — and how do they compose?"*
+
+Extensions should read as a registry and mount map, not a metrics dashboard. The composition starts
+with one compact inventory summary whose only visualization is the legitimate contribution-by-surface
+proportion. Providers are selectable records with explicit columns for identity, version,
+contributions, trust, source, and status; selection opens a manifest assembled from grouped
+contribution rows. Surfaces invert that same data into three host-surface record groups, each with a
+count and mount context. Available extensions are install-candidate records with categorical
+contract facts, contribution tags, hold state, and action. Together these components express the
+real relationship: providers contribute discrete items, and host surfaces receive those items.
+
+The reference lineage is component-level: `11-devconsole-a.png` supplies the contiguous summary rail
+and dense records rhythm; `19-pm-dashboard.png` supplies compact status-bearing rows; and
+`21-flow-builder.webp` supplies the provider-to-host mental model while avoiding invented graph
+connectors. The colored segmented surface split is the single signature. Everything else is quiet
+table structure, factual text, compact tags, or status.
+
+## Component decisions
+
+| Existing element | Decision | Reason |
+| --- | --- | --- |
+| Contributions by surface segmented bar | Keep | It encodes a true 6:2:2 proportion and filters the registry. |
+| Enabled coverage bar | Replace with `enabled / installed` text and disabled count | Six of six is a categorical availability fact; the bar added no comparison value. |
+| Provider cards and contribution micro-bars | Replace with selectable data-table rows and contribution tags | Providers are records; `+1 panel` and `+1 tool` are the complete discrete data. |
+| Surface share bars | Remove; use group count, mount context, and dense rows | The header already shows the global proportion; repeating it per group was redundant. |
+| Available compatibility bars | Replace with built-for and host contract fact rows | Contract v1 versus v2 is a version mismatch, not progress toward a goal. |
+| Available card pair | Replace with one registry table | Install candidates are comparable records, not dashboard tiles. |
+
+## Kimi validation rounds
+
+### Round 1 — 48 / 100
+
+Kimi found five wrong-component choices and eleven craft issues. The bars were correctly gone, but
+scalar metadata still wore badge chrome: contribution counts, surface providers, contract versions,
+the first-party count, and the held state. It also flagged the desktop detail and mobile summary as
+too roomy, and requested an explicit selected-provider mobile state.
+
+Fixes: converted those badges to plain aligned metadata; made contract versions categorical fact
+rows; reduced the manifest to a dense definition-list side panel; removed the duplicate held badge;
+compressed the mobile summary; and added the selected-provider bottom-sheet shot. Kimi also asked to
+rewrite capability descriptions, but that was not applied because the owner locked copy meaning.
+
+### Round 2 — 82 / 100
+
+Kimi reported **zero wrong-component findings**. It confirmed that enabled coverage, provider
+contribution counts, surface shares, and compatibility were now represented as text/records, and
+that the segmented 6:2:2 surface bar was the sole justified visualization. Four craft issues
+remained: the rounded primary switcher, mobile Available density, prose treatment for compatibility
+and hold information, and mobile summary height.
+
+Fixes: retained the primary switcher because it is the repository's existing Fresh UI tabs/segmented
+grammar rather than a hand-rolled ornament; restored the real Fresh UI button interaction states;
+added canonical `ns-card` and `ns-data-table` composition classes; tightened mobile Available rows;
+and reduced the mobile summary from three bands to a 2×2 composition. The held state remains a real
+Fresh UI `InlineNotice` because it is actionable warning state, not generic metadata.
+
+### Round 3 — 98 / 100
+
+Kimi reported **zero wrong-component findings and zero slop findings**. It confirmed that the
+segmented surface split is the sole visualization; that Providers, Surfaces, and Available are now
+record structures; and that desktop side-panel plus mobile bottom-sheet are the correct detail
+carriers. It also accepted the canonical Fresh UI segmented control, Card, DataTable, InlineNotice,
+and hard-offset Button treatments as system primitives rather than local ornament.
+
+Kimi held back two points for non-blocking craft observations: the 6-item Panels surface group is
+naturally taller than the two 2-item groups on the right, and `CONTRIBUTES` appears once in the
+manifest definition list and again above its detailed grouping. Neither is a component error or
+slop, and the run stopped because it passed the owner-defined threshold with no wrong-component or
+slop findings.
+
+## Before / after
+
+Before, four unrelated facts were forced into horizontal bars, producing solid ink strips that read
+as redactions. Providers and install candidates were also presented as cards even though their data
+was row-shaped and directly comparable.
+
+After, the screen reads as an extension registry and mount map. The header is one compact Fresh UI
+Card with the 6:2:2 segmented signature and textual inventory facts. Providers form a selectable
+DataTable; contribution tags have become plain metadata and every requested column is visible.
+Surfaces are grouped DataTable rows with host mount context and no repeated share visualization.
+Available is one registry table whose contract mismatch is expressed as built-for/host facts plus a
+single InlineNotice. Fresh UI Buttons own their real pressed interaction states. Mobile uses a 2×2
+summary, full-width record rows, and the existing manifest bottom sheet.
+
+## Validation
+
+- Playwright matrix: Providers / Surfaces / Available × desktop 1440 / mobile 390 × light / dark —
+  **12 / 12** with no document or screen overflow, no rendered template holes, and no deprecated bar
+  components.
+- Component composition in the rendered matrix: one signature `ns-extchan` in every state;
+  `ns-card`, `ns-data-table`, `ns-btn`, and `ns-inline-notice` present where their data/interaction
+  requires them.
+- Provider selection: verified in desktop side-panel and mobile bottom-sheet screenshots.
+- CSS scope: the S16 block contains no raw hex or RGBA values; only `--ns-*` tokens are used.
+- Console: no application errors; the static Python server reports only the unrelated missing
+  `/favicon.ico` request.
+
+Final screenshots are in `V12-refix-shots/round3/`. Rounds 1 and 2 are retained beside them as the
+visual evidence trail for the 48 → 82 → 98 evaluator trajectory.
+
+## Honest gaps
+
+- The Surfaces composition deliberately preserves one tall Panels group beside two shorter groups;
+  this mirrors the real 6:2:2 data and leaves some passive whitespace below the right column.
+- The manifest repeats `CONTRIBUTES` at summary and detail levels. The first is a definition-list
+  value; the second labels the grouped records. Kimi treated this as minor redundancy, not a wrong
+  component.
+- Capability descriptions and `+N` contribution labels were not rewritten because routes, data,
+  and copy meaning were explicitly locked.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-dark-available.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-dark-available.png
new file mode 100644
index 000000000..93834b254
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-dark-available.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-dark-providers.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-dark-providers.png
new file mode 100644
index 000000000..6811ec78b
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-dark-providers.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-available.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-available.png
new file mode 100644
index 000000000..9445df2a4
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-available.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-provider-selected.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-provider-selected.png
new file mode 100644
index 000000000..5e1f46543
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-provider-selected.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-providers.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-providers.png
new file mode 100644
index 000000000..d4a83f65c
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-providers.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-surfaces.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-surfaces.png
new file mode 100644
index 000000000..20d0999c3
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/desktop-light-surfaces.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/mobile-dark-available.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/mobile-dark-available.png
new file mode 100644
index 000000000..95f3dc675
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/mobile-dark-available.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/mobile-light-providers.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/mobile-light-providers.png
new file mode 100644
index 000000000..18aa26fcd
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/mobile-light-providers.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/mobile-light-surfaces.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/mobile-light-surfaces.png
new file mode 100644
index 000000000..02bd5c95d
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/after/mobile-light-surfaces.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-dark-available.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-dark-available.png
new file mode 100644
index 000000000..0b6ec821a
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-dark-available.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-dark-providers.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-dark-providers.png
new file mode 100644
index 000000000..7d9f71970
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-dark-providers.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-available.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-available.png
new file mode 100644
index 000000000..a41c37fc5
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-available.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-provider-selected.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-provider-selected.png
new file mode 100644
index 000000000..7e94ce292
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-provider-selected.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-providers.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-providers.png
new file mode 100644
index 000000000..591c6df97
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-providers.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-surfaces.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-surfaces.png
new file mode 100644
index 000000000..6dd8b8d7a
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/desktop-light-surfaces.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/mobile-dark-available.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/mobile-dark-available.png
new file mode 100644
index 000000000..59fa886bd
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/mobile-dark-available.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/mobile-light-providers.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/mobile-light-providers.png
new file mode 100644
index 000000000..12754333a
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/mobile-light-providers.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/mobile-light-surfaces.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/mobile-light-surfaces.png
new file mode 100644
index 000000000..befcf6e60
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix-shots/before/mobile-light-surfaces.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix.md
new file mode 100644
index 000000000..cb27dc2aa
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V12-slopfix.md
@@ -0,0 +1,74 @@
+# V12 Extensions — Fresh UI slop fix
+
+## Design question
+
+*"What tailored components, layout, composition, data-visualization, and data-structure best showcase EXTENSIONS — installed add-ons that mount contributions into host surfaces — and how do they compose together?"*
+
+A compact contribution console: a flat summary card with one segmented contribution-by-surface
+bar; a dense provider roster paired with a sticky manifest detail; a surface view organized as
+aligned panel/command/tool lanes; and an available list with contract-compatibility facts. Providers
+remain the primary records, contributions are grouped by host surface, and selection reveals source,
+version, trust, contract, permissions, and mount points. The surface bar carries the only chromatic
+signature; flat cards, internal hairlines, neutral metadata tags, and one pressed primary Install
+action supply the Fresh UI grammar around it.
+
+## Slop-checklist result
+
+| # | Violation found before | Fix applied | Result |
+| --- | --- | --- | --- |
+| 1 | The overview, provider rows, manifest, lanes, mount tiles, and available cards mixed colored borders, colored side rails, and 6–12px rounding. | Rebuilt the visual containers with real Card grammar: `--ns-card`, `--ns-shadow-xs`, zero outer border/radius, and `--ns-border` internal rules. Removed every colored side/top rail. | PASS |
+| 2 | Decorative diamonds, warning marks, surface glyphs, permission glyphs, arrows, colored pips, and pill controls appeared throughout all three views. | Removed the S16 decorative glyph nodes. Recast filters, counts, tiers, mounts, providers, versions, and permissions as 4px DM Mono uppercase tags. Kept only the small status dot because it carries enabled state. | PASS |
+| 3 | Copper, teal, amber, success teal, and warning amber competed across cards, icons, rails, badges, and meters. | Reserved copper/teal/amber for the single overview contribution-by-surface bar and its legend. Supporting meters, provider micro-bars, lane meters, tags, and selected states are neutral ink-on-surface. Warning remains only where it communicates a held contract; copper remains on the one primary Install action. | PASS |
+| 4 | Rounded grids created excess gutters; mobile stacked large boxes; contribution paths used clipping/ellipsis; lanes left uneven visual mass. | Tightened the summary and rows, used `min-width: 0` and wrapping/`overflow-wrap`, removed value ellipsis, stretched Available cards equally, and composed the tall Panels lane beside stacked Commands/AI Tools lanes. Playwright found zero horizontal overflow and zero visible template holes in 12 Extensions variants. | PASS |
+| 5 | The Surfaces view used disconnected colored cards and ornamental lane caps rather than a coherent contribution map. | Removed fake connector/rail decoration. The view is now an aligned two-column surface composition with one tall panel lane, two stacked secondary lanes, shared row rules, bottom-pinned summaries, and no implied graph geometry. | PASS |
+| 6 | The lede read like landing-page prose: “Every UI contribution in the app … The dashboard is itself a plugin.” The held state used explanatory filler. | Replaced it with “Installed add-ons and the host surfaces they extend.” Reduced quarantine copy to “Held: built for contract v1; host contract v2.” Labels remain terse and developer-side. | PASS |
+| 7 | S16 hand-rolled outlined cards, saturated pills, compatibility boxes, and badges diverged from Fresh UI primitives. The block also contained raw hex and non-sanctioned color mixing. | Matched `card.css`, `badge.css`, `data-table.css`, `detail-layout.css`, `button.css`, and `inline-notice.css`: flat Card surfaces, hairline row divisions, 4px metadata tags, grid structure without chrome, and token-only colors. The Pass V12 block contains no raw hex or raw RGBA. | PASS |
+| 8 | The contribution concept was strong, but multiple colored micro-bars, rails, icons, and hard shadows competed to be the signature. | Made the segmented contribution-by-surface bar the single feature signature. Kept exactly one hard-offset `3px 3px 0` press shadow on the visible Install action; computed-style verification found exactly one. | PASS |
+| 9 | Accent rails, glyph boxes, tinted group headers, and dashed separators were ornamental rather than structural. | Removed them. Remaining structure encodes data: surface proportions, enabled ratio, contract compatibility, selected provider, contribution grouping, mount points, and permissions. Internal rules separate real row/group boundaries. | PASS |
+| 10 | Body-font pills, mixed-case tags, oversized glyph gutters, and four airy header blocks weakened scan hierarchy. | Metadata now uses DM Mono, uppercase, `.08em` tracking, fit-content width, and 4px radius. Headings stay DM Sans/Mono at restrained sizes; the summary is a contiguous strip and contribution rows are dense with consistent breathing room. Computed styles confirm DM Mono, uppercase, and 4px tag radius. | PASS |
+| 11 | Reference ideas had accumulated decoration instead of retaining the references’ density and restraint. | Summary strip follows `11-devconsole-a.png`’s contiguous RECORDS/SIZE/PARTITIONS metric rail; provider rows follow its dense records-table rhythm; manifest contribution rows follow `19-pm-dashboard.png`’s compact My Projects metadata rows; Surfaces uses `21-flow-builder.png`’s primary-canvas/secondary-palette composition without inventing connectors; Available uses the compact contract/action density of `11-devconsole-a.png`’s side panel. | PASS |
+| 12 | The page risked repeating the rounded-card dashboard grammar used elsewhere; Providers and Surfaces also repeated each other’s card treatment. | Extensions now has a distinct provider → manifest → surface composition and a single segmented contribution signature. Providers is roster/detail, Surfaces is lane composition, and Available is contract/install comparison. All 16 routes were clicked successfully after the change; each produced its expected screen label. | PASS |
+
+## Before / after
+
+Before, the screen read as a branded template: rounded colored outlines on nearly every object,
+decorative diamonds and warning glyphs, copper/teal/amber repeated across the entire viewport,
+marketing copy, full-height accent rails, and several press shadows. The provider roster was harder
+to scan because icons and tags consumed the first read; the Surfaces view looked like three unrelated
+card stacks; Available used colored rails and boxed compatibility widgets.
+
+After, the hierarchy survives the squint test: title and view control; one flat summary strip; the
+colored surface-distribution signature; then the active working view. Provider records and manifest
+metadata read as one dense console, Surfaces aligns one primary lane against two secondary lanes,
+and Available compares two equal-height contract records. Dark mode preserves the same hierarchy
+without gradients or special-case tint decoration.
+
+Screenshots are in `V12-slopfix-shots/`:
+
+- `before/` and `after/` each contain desktop light Providers, provider selection, Surfaces,
+  Available, desktop dark Providers/Available, mobile light Providers/Surfaces, and mobile dark
+  Available.
+
+## Verification
+
+- Browser: headless Chromium at the required Playwright executable.
+- Extensions matrix: Providers / Surfaces / Available × 1440 / 390 × light / dark = 12 variants.
+- Provider interaction: six providers found; selecting the second provider produced exactly one
+  selected row and updated the manifest.
+- Layout/content: zero horizontal overflow, zero visible `{{ }}` holes, and zero decorative S16
+  glyphs in every variant.
+- Console: zero application console errors and zero page errors (the static-server favicon request
+  was fulfilled by the browser harness so it could not pollute the application-error gate).
+- Component grammar: all visible summary/provider/manifest/lane/available cards computed to
+  `border-radius: 0` and zero outer border; metadata tags computed to DM Mono, uppercase, 4px radius.
+- Signature: exactly one visible `3px 3px 0` hard press shadow, on `Install`.
+- Regression: all 16 navigation buttons rendered the expected `data-screen-label`; all had zero
+  horizontal overflow and zero visible template holes.
+
+## Honest gaps
+
+- Per owner direction, this slice did not produce a new PLAN-EVAL or GLM evaluator report. The
+  original dashboard-design run already has PLAN-EVAL PASS; this focused visual refinement was
+  verified directly with screenshots and browser assertions.
+- The other 15 routes were regression-clicked and measured, but were not re-screenshotted because
+  the requested visual scope is Extensions only.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V2-shell-home.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V2-shell-home.md
new file mode 100644
index 000000000..d0b917f7c
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V2-shell-home.md
@@ -0,0 +1,133 @@
+# V2 — BOLD shell + Home redesign (sets the new quality bar)
+
+Scope: **shell (sidebar + topbar) + Home only**. Visual + layout only — no route, logic, data,
+feature, or copy-meaning change. Warm-cream light + dark, hard-offset press shadow, `--ns-*` tokens
+only (no raw hex), `ns-*` class markup, DM Sans / DM Mono preserved. Zero `{{ }}` in the rendered
+DOM, zero console errors, no horizontal body scroll — verified desktop (1440×900) **and** mobile
+(390×844), both themes, plus a rail-collapsed and drawer-open pass.
+
+Reference bar: `references/01-synergy-hr-desktop`, `02-synergy-mobile-nav`, `03-analytics-cards`,
+`04-finance-cards`, `05-timeoff-workhour-cards`, `06-mobile-sheets`, `08-ref` (Pulsar, the closest
+dev-dashboard analogue), `09-ref`. Adopted their **structure / density / component-variety /
+hierarchy / chrome / responsiveness**; kept NS One's **identity** (copper primary, teal/amber/red
+state — not the refs' purple/green/soft-rounded).
+
+## Files touched
+- `render/prototype.dc.html` — shell markup (sidebar + topbar), Home markup recomposition, S1 data
+  builders in the `data-dc-script` logic, two post-mount geometry drawers.
+- `render/assets/ns-ext.css` — all net-new component CSS (loads last; overrides DS defaults where
+  needed). `proto.css` and the DS `_ns_styles.css` / `support.js` were **not** edited.
+
+## The one collision that mattered (recorded so it doesn't recur)
+The DS ships a layout primitive named **`.ns-sidebar`** (Every-Layout "Sidebar": a horizontal
+sidebar+content flex row). Adding `ns-sidebar` to the dashboard `<aside>` collided with it and threw
+the whole sidebar into a horizontal 3-column blowout. **Fix:** my sidebar block is namespaced
+`ns-sidenav*` (NOT `ns-sidebar*`); the DS shell classes `ns-dashboard__sidebar*` and the token
+`--ns-sidebar-width` are untouched. Anyone extending the shell must avoid the bare `.ns-sidebar`
+class name.
+
+---
+
+## 1. Sidebar — now a signature (`ns-sidenav*`)
+- **Brand tile**: copper gradient `n.` mark + "net script / DEV DASHBOARD" wordmark, click → Home.
+- **Grouped icon nav** (Overview / Capabilities / Data / System) with per-item **icon tiles**,
+  derived count badges (toned only when carrying a live count), and an **active-item treatment**:
+  copper left **accent bar** (`ns-sidenav__item-rail`, spring-scaled in) + `primary-subtle` fill +
+  filled copper icon tile on `aria-current="page"`.
+- **Collapsible icon rail**: header `«/»` toggle drives `ns-sidenav--rail` (state `rail` in the DC
+  logic). Desktop `:has(.ns-sidenav--rail)` shrinks the grid column to 4.75rem, hides labels/badges/
+  group-labels, centres icons, adds group dividers, and floats an expand affordance. 76px collapsed,
+  no overflow.
+- **Pinned footer**: a **workspace card** (`my-app` + status dot + `local · aspire · running|degraded`
+  + switch key) and a **profile card** (`NS` avatar + `dev@local ✓` + `workspace owner` + chevron) —
+  the ref-01/02 bottom-pinned pattern.
+
+### New `ns-sidenav` class contract
+`ns-sidenav` (root) · `__header __brand __mark __mark-dot __wordmark __brand-sub`
+· `__rail-toggle __close __body __group __group-label`
+· `__item __icon __label __badge __item-rail` (state: `[aria-current="page"]`)
+· `__footer __workspace __ws-dot[data-state] __ws-main __ws-name __ws-meta __ws-state __ws-switch`
+· `__profile __avatar __profile-main __profile-name __profile-verify __profile-role __profile-chevron`
+· modifier `ns-sidenav--rail`.
+
+## 2. Topbar — real elegant header (`ns-topbar2*`)
+Balanced, not a thin strip: taller header with a **heading block** (contextual eyebrow +
+`ns-topbar2__title` = current screen name; breadcrumb trail shows only on deep routes so Home isn't
+doubled), and a right cluster: **env pill** (`local · my-app · aspire`, toned by health), a
+**prominent search / ⌘K** (`Search routes, runs, correlations…`), an **Open Aspire ↗** action, a
+divider, and the theme toggle. Mobile collapses to ☰ + title + mini-search + theme toggle.
+
+### New `ns-topbar2` class contract
+`ns-topbar2` · `__start __heading __crumbs __eyebrow __title __end __env __search __search-mini
+__aspire __divider __theme`. New bindings: `crumb`, `hasCrumbTrail`, `envEyebrow`, `railClass`,
+`railPressed`, `railGlyph`, `toggleRail`, `envLabel`.
+
+## 3. Home — recomposed to reference density + a reusable kit
+Layout is now an explicit grid (`ns-home`) with named bands, no dead space:
+1. **KPI strip** (`ns-home__kpis`, 4-up) — KPI blocks with big value + **delta chip**
+   (`ns-deltachip`, toned pill) + token-colored sparkline (existing post-mount SVG draw).
+2. **Hero band** (`ns-home__hero`) — AI **Incident summary** (left) + **Wiring-health radial gauge**
+   card (`ns-gaugecard` / `ns-gauge`): a masked conic-gradient semi-donut ("16/20 nodes wired") with
+   a verdict badge and a healthy/degraded/unbound **stat trio**.
+3. **Analysis band** (`ns-home__analysis`, 3-up):
+   - **Execution outcomes** — stacked **channel bar** (`ns-channelbar`) + **legend** (`ns-legend`) +
+     **data rows** (`ns-datarow` = icon-tile + label + metric + **trend arrow** `ns-trendarrow`).
+   - **Capability mix** — segmented **donut** (`ns-donut`, conic-gradient ring + centre hole) +
+     clickable legend, colored from the copper/teal/amber palette.
+   - **Wiring signals** — declared-vs-running **data rows** with **status pills** and a **segmented
+     time control** (`ns-segtime`, reuses `ns-seg`).
+4. **Where-to-look** — section header with rule + the 6 deep-linking `ns-statlink` health cards
+   (6-up desktop → 3 → 2 → 1).
+5. **Just-happened** teaser strip (`ns-teaser-item`).
+6. **Bottom band** — Command palette (`ns-quickcmd` list) + Contributed panels (`ns-contribgrid`).
+
+### Geometry — no SVG `{{ }}` holes
+Two new post-mount drawers alongside `drawSparks`, following the sanctioned imperative pattern
+(read a `data-*` attribute, set style; never interpolate into a path):
+- `drawGauges()` — sets `.ns-gauge__ring` to a masked `conic-gradient(from -90deg, …)` from
+  `data-value`.
+- `drawDonuts()` — builds a gapped multi-stop `conic-gradient` on `.ns-donut__ring` from
+  `data-segments`.
+Both are re-run on every update (theme flip, sim tick) and are `prefers-reduced-motion`-safe.
+
+### New Home kit class contract (reusable across screens)
+`ns-deltachip[data-tone]` · `ns-panelcard(__head __title-wrap __sub __body __list)` ·
+`ns-gaugecard(__head __stats __stat __stat-dot[data-tone] __stat-val __stat-label)` ·
+`ns-gauge[data-tone][data-value](__ring __center __value __caption)` ·
+`ns-channelbar __seg[data-tone]` · `ns-legend __item __dot[data-tone]` ·
+`ns-datarow[data-tone](__icon[data-tone] __label __metric __pill)` · `ns-trendarrow[data-dir]` ·
+`ns-donut[data-segments](__ring __hole __total __total-label __legend __legend-item __legend-label
+__legend-val)` · `ns-segtime` · `ns-teaser-item(__text __time)` ·
+`ns-contribgrid(--head __row __panel __mount)`.
+
+## 4. Responsive / mobile-first (was entirely missing)
+Mobile-first breakpoints on both shell and Home:
+- **≥1440** 6-up stat grid; **≥1025** full sidebar + multi-column bands.
+- **≤1024** sidebar → drawer (DS behavior, now with a **dimmed + blurred backdrop** and drawer
+  shadow), hero/analysis/bottom collapse to single column, KPIs 2-up.
+- **≤640** KPIs & stat grid 2-up (compacted), donut stacks with a 2-col legend, teaser stacks,
+  contributed-panels drops the mount target under the panel name.
+- **≤360** KPIs / stat grid go 1-up.
+Root cause of the two overflow regressions found and fixed: an implicit-grid `.ns-home` column
+sizing to `max-content`, and `1fr` grid tracks not allowing shrink — both resolved with
+`grid-template-columns: minmax(0,1fr)` / `minmax(0,…)` and `min-width:0`. Final: **0px horizontal
+overflow** at every tested width.
+
+## Verification
+- 4 primary combos (Home desktop+mobile × light+dark): **0 `{{ }}` holes, 0 console errors, 0
+  horizontal overflow**.
+- Regression sweep: clicked through **all 16 nav screens** after the shell change — every one still
+  0 holes / 0 overflow / 0 errors, and the new contextual topbar title resolves per route.
+- Rail-collapse (76px, clean) and mobile drawer (backdrop + close) both verified.
+
+## Deferred (next rollout waves, not this pass)
+- Roll the same kit + density + responsiveness across the other 15 screens (investigation spine,
+  capability consoles + detail/leaf, control plane incl. topology, AI, extensions).
+- Rail-collapse state is session-local (not persisted) and the segmented time control on "Wiring
+  signals" is presentational (no data re-slice) — intentional for this visual pass.
+- Final dark-mode + motion + empty/loading/error polish pass once the kit is applied everywhere.
+
+## Screenshots (final)
+`/tmp/claude-1000/-home-codex-repos-netscript-beta10/cd2ee104-ed45-4ed4-bcca-f960c60a1d84/scratchpad/shots-V2-FINAL/`
+— `01/02` desktop (full + viewport) light/dark, `03` mobile full light/dark, `04` mobile drawer
+light/dark. Sidebar-signature + rail-collapse stills in `../scratchpad/shots-v6-side/`.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V2b-home-highcraft.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V2b-home-highcraft.md
new file mode 100644
index 000000000..d861c320e
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V2b-home-highcraft.md
@@ -0,0 +1,250 @@
+# V2b — Home + chrome, high-craft pass
+
+**Scope:** Home screen (`isHome`) + app chrome (sidebar `ns-sidenav*` + topbar `ns-topbar2*`) +
+mobile bottom sheets. Visual + layout only — no route/logic/data/copy-meaning change. NS One identity
+throughout (warm-cream light + dark, hard-offset press shadow, copper/teal/amber, `--ns-*` tokens
+only — **no raw hex**, `ns-*` markup that round-trips to Fresh, DM Sans/Mono). Complementary-satellite
+doctrine held (no owned waterfall/log-tail/metrics/resource-start-stop).
+
+**Files touched:** `render/prototype.dc.html` (Home markup + shell markup + data model + post-mount
+chart drawers + detail-sheet wiring), `render/assets/ns-ext.css` (all new component CSS). `proto.css`,
+`_ns_styles.css`, `support.js` untouched.
+
+**Verify status (every iteration, both themes + both viewports 1440×900 / 390×844):**
+zero `{{ }}` holes in the DOM, zero console errors, zero horizontal overflow. All 16 nav screens
+regression-checked clean (shared file) after the shell/data changes. Mobile detail bottom sheet +
+cmdk bottom sheet verified open with zero errors.
+
+Baseline (what this replaces): the KPIs were thin single-layer sparkline tiles, the analysis cards
+were flat (bar/donut with no hero, no column-aligned table, no footer button), the "where to look"
+tiles had dead space, the command palette was an ungrouped list with no ⌘ chips, "just happened" was a
+plain teaser strip, and there were no mobile detail bottom sheets. That was the "thousand miles
+behind" state. This pass rebuilds each widget as a bespoke multi-layer composition matched to its
+reference archetype.
+
+---
+
+## Per-widget: archetype match, layers, contracts
+
+### 1. Throughput hero + sibling stat tiles — *Conversion-Rate* archetype (`03-analytics-cards`)
+The lead KPI (executions/hr) is promoted from a thin sparkline tile to a full hero card; the other
+three become richer filled-area stat tiles.
+
+- **Hero card `.ns-throughput`** layers: header (eyebrow `EXECUTIONS / HR` + hero value `270` +
+  `/hr` unit + green delta pill `↑ 12%` + top-right `Details` action) → **funnel breakdown table**
+  `.ns-funnel` (Dispatched / Completed / Compensated, each = label + mono metric + **colored trend
+  arrow+%**, column-aligned, clickable rows) → **filled area chart with baseline grid + hour axis**
+  `.ns-areachart` (3 horizontal + 5 vertical grid rules, a dimmer dashed **comparison under-area**
+  = prior window, the copper filled area + line, and a `−5h…now` mono axis strip).
+- **Sibling tiles `.ns-kpi`** (now buttons, deep-linking): label + `→` reveal-on-hover, hero value +
+  delta pill, a one-line context foot (e.g. `webhook · polling · schedule`), and a **filled micro-area
+  chart that stretches to fill the tile** (`grid-template-rows: … minmax(40px,1fr)` + `spark height:
+  100%`) — no dead space; each tile is a real area chart, not a hairline.
+- Before: 4 equal thin sparkline tiles. After: 1 dense hero + 3 filled-area deep-link tiles.
+
+### 2. Wiring health — *Time-Off* archetype (`05-timeoff-workhour-cards`)
+Reused + kept the existing `.ns-gaugecard`: radial semi-donut gauge (`16/20 NODES WIRED`, conic-gradient
+set imperatively from `data-value`), an `ATTENTION` verdict badge top-right, a divider, then a 3-tile
+breakdown row (healthy / degraded / unbound, each = colored dot + mono count + label, clickable).
+This already matched the archetype; left as the reference-grade version rather than rebuilt.
+
+### 3. Execution outcomes — *Marketing-Channels* archetype (`03-analytics-cards`)
+Rebuilt into the fullest reference card. Layers: header (title + sub + `Runs →` card-action) →
+**hero** `.ns-outcomes__hero` (`91.2%` + `↑ +2.1% completed · 287 runs`) → **stacked segmented
+channel bar** `.ns-channelbar` (completed/retried/failed, rounded segments w/ gaps) → **dot legend**
+`.ns-legend` → **column-aligned data table** `.ns-datatable` with a real header row
+(`Primitive / Instances / 24H`), each row = circular icon + label + mono metric + colored trend
+arrow → **full-width secondary button** `.ns-fullbtn` (`View run inspector`, mirrors the ref
+"View reports"). Before: flat bar + legend + un-headered rows.
+
+### 4. Capability mix — donut + share-table
+Donut `.ns-donut` (6 plugins, segmented conic-gradient) + a compact key/value summary `.ns-mixstat`
+(busiest Workers / idle Sagas) beside it, then an **aligned share-bar list** `.ns-sharelist`: each
+row = colored dot + label + **mini share bar** (`.ns-shareitem__bar/__fill`, width+color token-driven)
++ mono %. Before: a floating unaligned legend list.
+
+### 5. Wiring signals — segmented control + two-line signal rows
+Kept the `1H/24H/7D` segmented control `.ns-seg`. Rows rebuilt as `.ns-siglist`/`.ns-sigrow`:
+tone-tinted icon tile + **two-line main** (label + mono detail, e.g. `triggers: DLQ port degraded`) +
+status pill + trailing chevron `→`. Column-aligned, denser, deep-linking. Before: one-line rows with a
+pill and no detail/affordance.
+
+### 6. Incident summary — kept anatomy, copper left-accent
+`.ns-incident` retained: `✦` eyebrow + title, causal paragraph, **grounding chips** (`grounded in`
++ `job_4183 / ch_3QK9dR2eZ / override v43`), **action-chip row**, and a mono provenance/model footer.
+Already had the copper left-accent border. Dense, not airy — left as reference-grade.
+
+### 7. Where to look — enriched deep-link stat grid
+`.ns-statlink` rebuilt: **top row** = tone-tinted icon chip + hero value + status pill; bold label;
+2-line clamped detail with `→`; plus a **tone-keyed left accent tick** (`::before`). Before: value +
+bare dot + one-line foot with large dead space between. On mobile a tap opens the **detail bottom
+sheet** (see §Mobile).
+
+### 8. Just happened — compact live activity feed
+`.ns-home__teaser` rebuilt from a horizontal strip into a feed card: head (mini-label + `live` dot +
+`Activity log →`) then feed rows `.ns-feedrow` = colored primitive marker dot + event text +
+**entity tag** `.ns-tag` + **relative-time pill** `.ns-timepill` (with `◷` glyph) + chevron. Before:
+a flat inline teaser with just dot + text + time.
+
+### 9. Command palette + Contributed panels — composed bottom band
+- **Command palette `.ns-palettecard`**: a search-bar affordance (`⌕` + placeholder + `⌘K`) then
+  **grouped action rows** — `Navigate` / `Act` / `Recent` (`.ns-palettegroup`), each row `.ns-cmdrow`
+  = icon + label + kind label + **⌘-shortcut chip** (`G R`, `⌘⇧D`, `⌘O`, `⌘K`). Before: an ungrouped
+  4-item list with no shortcuts.
+- **Contributed panels**: rebuilt as `.ns-contribtable` — header row (`Plugin / Panel / Mount target`)
+  + clickable rows = plugin badge + panel icon + panel name + mono mount + chevron. Tighter row rhythm
+  balances the two cards' heights. Before: an airy 3-col grid with big row gaps.
+
+### Chrome — sidebar (ref 01 FAVS/⌘ sidebar)
+Kept the existing signature (brand mark + wordmark; grouped nav Overview/Capabilities/Data/System with
+icon-tiles + derived badges + active pill + left-accent rail + chevron; rail collapse; workspace card +
+profile card pinned at bottom). **Added a PINNED group** `.ns-sidenav__group--pinned`: mono `pinned`
+label + `⌘·` hint, then pin rows `.ns-sidenav__pin` = tone dot + label + **⌘-shortcut chip** (Run
+Inspector ⌘1, ch_3QK9dR2eZ ⌘2, Runtime overrides ⌘3). Hidden in rail-collapse mode.
+
+### Chrome — topbar (ref 01 greeting header)
+Kept the two-line context (eyebrow `netscript · my-app` / title, or breadcrumb + title on inner
+routes), the `local · my-app · aspire` env pill (dot state-keyed), the prominent search/⌘K, Open
+Aspire ↗, and theme toggle. **Added a primary action button `.ns-topbar2__ask`** (copper `Ask ✦`,
+styled like the refs' "Create Request") that jumps to the AI ask box. Open Aspire hides below 1120px so
+the primary action always survives.
+
+### Mobile — dedicated bottom sheets (ref `06-mobile-sheets`, REQUIRED)
+- **Detail bottom sheet `.ns-detailsheet`** (`dialog[data-part=content][data-side=bottom]`, native DS
+  grab-handle + backdrop): a stat/card tap on ≤640px opens it via `openStat()` (desktop deep-links
+  straight through). Layers: eyebrow + close, hero (icon chip + value + title + status pill),
+  description, a bordered key/value table (`signal / status / jumps to`), and full-width
+  `Open <dest> →` + `Dismiss` actions. Wired through `state.detailSheet` + `componentDidUpdate`
+  `showModal()/close()`, same pattern as the existing right sheet.
+- **Command palette → bottom sheet on mobile**: `.ns-cmdk__backdrop` is pinned to the bottom
+  (`inset:auto 0 0 0`), rounded top corners, a `::before` grab handle, and the DS
+  `ns-sheet-enter-bottom` animation — reusing the existing cmdk dialog, no new dialog.
+- Dense single-column masonry: KPI band → hero full-width then 2-up filled tiles (1-up ≤360px);
+  analysis/bottom cards stack; feed rows drop the entity tag; contributed table collapses mount under
+  the panel; no horizontal body scroll at any width.
+
+### New chart component types built (token-driven, no SVG `{{ }}` holes)
+All geometry is created imperatively in `drawSparks()` → `drawAreaCharts()` / `drawLineCharts()` /
+`drawBarCharts()` (called each update via `requestAnimationFrame`; each `querySelectorAll` no-ops when
+its element is absent, so they are safe as ready DS primitives):
+- **Filled area chart w/ grid + axis + comparison** `.ns-areachart` — *in use* (throughput hero).
+- **Line chart w/ crosshair + marker dot + floating value tooltip** `.ns-linechart` — built + CSS
+  ready (Stock-Tracker archetype); not yet placed on Home (documented for DS uplift / future leaf
+  detail use). Honest note: this component is verified to draw but is not exercised by a Home widget in
+  this pass.
+- **Bar chart w/ value labels** `.ns-barchart` — same status as the line chart (Product-Performance
+  archetype); ready but not placed on Home.
+
+---
+
+## Honest bar assessment
+- **At the reference bar:** throughput hero (Conversion-Rate), execution outcomes (Marketing-Channels),
+  where-to-look tiles, wiring signals, capability-mix share list, command palette, contributed table,
+  just-happened feed, sidebar (incl. pinned ⌘ group), topbar (incl. Ask ✦), both mobile bottom sheets.
+- **Kept as already-reference-grade (not rebuilt):** wiring-health gauge (Time-Off) and incident
+  summary — both already multi-layer and on-archetype; rebuilding would have been churn.
+- **Built but not yet placed on Home:** the line chart (with tooltip) and bar chart (with value
+  labels). They are complete, token-driven, and render correctly the moment an element is present —
+  but no Home widget's archetype called for them, so forcing them on would read as bolted-on. They are
+  captured in the DS ledger below and are ready for the roll-out to leaf/detail screens.
+
+---
+
+## Design-system uplift ledger
+Everything a later DS uplift should absorb. All contracts are `ns-*` classes, `--ns-*` tokens only,
+NS One identity (round-trips to Fresh, liftable later).
+
+### NEW components (name · `ns-*` class contract · what it does)
+- **Throughput hero card** — `.ns-throughput` (`__head`, `__title-wrap`, `__eyebrow`, `__value`,
+  `__unit`, `__delta`). Conversion-Rate hero: eyebrow + big value + unit + delta pill + card-action,
+  designed to stack a funnel table + area chart beneath. `data-tone` themes the value/chart.
+- **Funnel breakdown table** — `.ns-funnel` / `.ns-funnel__row` (`__label`, `__metric`). 3-column
+  (label · metric · trend) clickable mini-table for a card's mid layer.
+- **Filled area chart** — `.ns-areachart` (`__svg`, `__grid`, `__axis`). Baseline grid + optional
+  dimmer dashed comparison under-area + filled area + line + mono axis strip. Props via attributes:
+  `data-series` (comma nums), `data-compare` (comma nums), `data-tone`. Shared min/max scale across
+  both series. JS: `drawAreaCharts()`.
+- **Line chart w/ tooltip** — `.ns-linechart` (`__svg`, `__tip`, `__foot`, `__foot-sep`). Crosshair +
+  marker dot + floating value tooltip positioned over the marker; optional open/high/low foot row.
+  Props: `data-series`, `data-marker` (index; defaults to peak). JS: `drawLineCharts()`.
+- **Bar chart w/ value labels** — `.ns-barchart` (`__bar`, `__fill`, `__val`, `__label`). Vertical bars
+  with per-bar value label above and mono axis label below; `data-series` drives fill heights via
+  `drawBarCharts()`; `data-tone="muted"` per bar.
+- **Column-aligned data table** — `.ns-datatable` (`__head`, `__h`, `__h--num`, `__row`, `__cell--lead`,
+  `__cell--num`, `__icon`, `__label`). Header row + circular-icon rows + right-aligned numeric/trend
+  columns. Reusable across any "primitive · metric · trend" table.
+- **Card-action pill** — `.ns-cardaction`. The reference `Details`/`See All`/`Runs →` top-right
+  affordance; lighter than a full `ns-btn`.
+- **Full-width secondary button** — `.ns-fullbtn`. The reference bottom-of-card "View reports" button.
+- **Outcomes hero** — `.ns-outcomes__hero` (`__value`, `__hero-meta`). Hero % + `vs last week` meta.
+- **Share-bar list** — `.ns-sharelist` / `.ns-shareitem` (`__dot`, `__label`, `__bar`, `__fill`,
+  `__val`). Aligned dot + label + mini proportional bar + %. `__fill` width/color set inline from data.
+- **Mix summary** — `.ns-mixstat` (`__k`, `__v`). Compact key/value block to sit beside a donut.
+- **Two-line signal row** — `.ns-siglist` / `.ns-sigrow` (`__icon`, `__main`, `__label`, `__detail`,
+  `__pill`, `__chevron`). Icon tile + label/detail + status pill + chevron; `data-tone` on row + icon.
+- **Palette group + command row** — `.ns-palettecard__body`, `.ns-palettecard__search`,
+  `.ns-palettegroup` (`__label`, `__items`), `.ns-cmdrow` (`__icon`, `__label`, `__kind`, `__kbd`).
+  Grouped command list with kind labels + ⌘-shortcut chips + an inline search affordance.
+- **Contributed table** — `.ns-contribtable` (`__head`, `__row`, `__plugin`, `__panel`, `__icon`,
+  `__mount`, `__chevron`). Plugin-badge + icon + name + mono mount + chevron table.
+- **Activity feed row** — `.ns-feedrow` (`__marker`, `__text`, `__chevron`). Colored primitive marker +
+  text + trailing chevron; pairs with `ns-tag` + `ns-timepill`.
+- **Entity/provenance tag** — `.ns-tag` (`data-tone`). Small mono chip for an entity/provenance label.
+- **Time pill** — `.ns-timepill`. Relative/absolute time with a `◷` clock glyph.
+- **Detail bottom sheet** — `.ns-detailsheet` (`__inner`, `__head`, `__eyebrow`, `__hero`, `__icon`,
+  `__hero-main`, `__value`, `__title`, `__desc`, `__kv`, `__kv-row`, `__kv-key`, `__kv-val`,
+  `__actions`). A generic mobile detail sheet body for `dialog[data-side=bottom]`; drive it from a
+  `{eyebrow,icon,tone,value,title,pill,pillClass,desc,rows[],cta,go}` payload.
+- **Sidebar pinned group** — `.ns-sidenav__group--pinned`, `.ns-sidenav__pinned-label`,
+  `.ns-sidenav__pinned-hint`, `.ns-sidenav__pin` (`__pin-dot`, `__pin-label`, `__pin-kbd`). A
+  PINNED/RECENT group with tone dots + ⌘-shortcut chips.
+- **Topbar primary action** — `.ns-topbar2__ask` (`__ask-glyph`). A primary "Ask ✦" header action slot.
+
+### REFINEMENTS to existing components
+- `.ns-kpi` is now a clickable deep-link (button semantics, `__arrow` reveal-on-hover, `__foot` context
+  line) and supports a **fill-to-height sparkline** variant (grid-template-rows + `spark height:100%`).
+- `.ns-statlink` gained a `__top` row (icon chip + value + pill), a `__detail` 2-line clamp, and a
+  tone-keyed `::before` left-accent tick.
+- `.ns-trendarrow` gained a `__glyph` inner span so the arrow can be sized independently of the %.
+- `.ns-home__kpis` layout changed from `repeat(4,1fr)` to a `1.2fr / 1fr` hero+tiles split, with a
+  nested `.ns-home__kpi-tiles` 3-up.
+
+### NEW tokens
+None invented — everything reuses existing `--ns-*` (spacing, radius, color-mix on `--ns-primary`
+/`--ns-success`/`--ns-warning`/`--ns-destructive`/`--ns-fg`/`--ns-border*`/`--ns-muted*`, fonts,
+shadows). A DS uplift *could* promote a few repeated `color-mix(... transparent 82/88/93%)` chart-fill
+tints to named tokens (e.g. `--ns-chart-fill`, `--ns-chart-fill-compare`, `--ns-chart-grid`) and a
+`--ns-icon-tile-bg` (the repeated `color-mix(in oklab, var(--ns-fg) 5-6%, transparent)`), but none are
+required for correctness today.
+
+### NEW variants
+- `.ns-panelcard__body--flush` (zero-padding body so an embedded table draws its own edge padding).
+- `.ns-areachart[data-tone='success']` (teal area/line variant); extendable to warning/destructive.
+- `.ns-barchart__bar[data-tone='muted']`, `.ns-tag[data-tone=...]` tinted variants.
+
+### NEW options / props / data-attributes
+- `.ns-areachart` — `data-series`, `data-compare`, `data-tone`.
+- `.ns-linechart` — `data-series`, `data-marker`.
+- `.ns-barchart` — `data-series` (+ per-bar `data-tone`).
+- Detail sheet driven by a structured payload object (see component list) via `state.detailSheet`.
+- `openStat(item, navFn)` helper: `matchMedia('(max-width:640px)')` → bottom sheet on mobile, deep-link
+  on desktop. A DS could formalise this "tap = sheet on mobile, navigate on desktop" affordance.
+
+### MOBILE optimizations
+- Command palette (`.ns-cmdk__backdrop`) transforms into a bottom sheet ≤640px (bottom-pinned, rounded
+  top, `::before` grab handle, `ns-sheet-enter-bottom`). Reusable pattern: any centered `ns-cmdk`-style
+  dialog can adopt this.
+- Generic mobile detail bottom sheet (`.ns-detailsheet` on `data-side=bottom`) — the reusable "tap a
+  card for detail" surface.
+- KPI band: hero full-width, tiles 2-up (first full-width) then 1-up ≤360px; area-chart hero and
+  filled tiles keep their layers on mobile.
+- `.ns-feedrow` drops its entity `.ns-tag` on mobile; `.ns-contribtable` collapses the mount cell under
+  the panel name and hides the third header.
+- `.ns-statlink__value` steps down a size on mobile; all cards single-column with no horizontal scroll.
+
+---
+
+## Screenshots
+Final set: `scratchpad/shots-V2b-FINAL/` — `home--{desktop,mobile}--{light,dark}--s{0,1,2}.png`,
+`sidebar--{light,dark}.png`, `detailsheet--{light,dark}.png`, `cmdksheet--{light,dark}.png`,
+`home--mobile--{light,dark}--drawer.png`.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V3-investigation-spine.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V3-investigation-spine.md
new file mode 100644
index 000000000..32a906208
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V3-investigation-spine.md
@@ -0,0 +1,223 @@
+# V3 — Investigation spine (Live Flow + Run Inspector) at the high-craft bar
+
+**Screens:** S13 Live Flow (causal journey / seam chain) and S6 Run Inspector (run step-timeline
+with a compensation branch), plus their selected/detail states and mobile bottom sheets.
+**Files touched:** `render/prototype.dc.html` (markup + view-model derivations — routes/logic/data
+unchanged), `render/assets/ns-ext.css` (all new component CSS). `_ns_styles.css`, `support.js`,
+and `proto.css` component bases were **not** edited.
+**Final screenshots:** `_visual-reports/V3-shots/` (desktop + mobile, light + dark, halted variant,
+node-selected desktop, seam-detail bottom sheet, plus BEFORE references).
+
+---
+
+## The design question — answered first, then designed around
+
+> *What tailored components, layout, composition, data visualization, and data structure best
+> showcase (a) a single request's causal journey through the stack and (b) a run's step timeline
+> with a compensation branch — and how do they compose together?*
+
+The journey and the run are **two altitudes of one correlation** (`ch_3QK9dR2eZ`). They are not the
+same view repeated:
+
+- The **journey** answers *"where in the stack did causation flow, and where did it break?"* — a
+  **spatial, causal map**, never time-proportional (doctrine: a seam chain, not a waterfall). It
+  needs strong per-node design, a **fan-out** where one seam spawns many subscribers, a **severed**
+  variant, edge relationships between hops, and a flow-level verdict summary.
+- The **run** answers *"inside one primitive, what happened step by step — including the rollback?"*
+  — a **vertical timeline** with a visibly distinct **compensation lane**, per-step **data points**,
+  and attempt/retry markers.
+
+They **compose** through: (1) the shared **Journey | Inspector** segmented switch, (2) a shared
+**correlation KV split-panel** header on both (the same `ch_…` id and `tr_…` trace), and (3)
+reciprocal deep-links (journey seam → "Run Inspector →"; run → "View originating flow →"). The
+journey is the **map**; the inspector is the **street view** of one pin on that map.
+
+The data structure that makes this work: every node/step carries a **seam datum** — the one value
+that matters at that hop (`200`, `evt_2210`, `step 2 of 4`, `2/3`, `208ms`) — surfaced as a
+right-aligned, tone-tinted chip so the chain is scannable at a glance without opening payloads.
+
+---
+
+## References mined this pass (new patterns, per ref)
+
+| Ref | Pattern taken | Applied to |
+|-----|---------------|-----------|
+| **04 finance-cards** | **Arc gauge** with centered value + `SPEND`-style label; **OHLC/breakdown stat footer** (3 tiles); **stacked outcome split** | Flow-hero chain-progress arc (`2/5 seams`); Run-hero step arc (`2/4 steps`); the seam-outcome splitbar; the 3-tile attempt/compensation footer |
+| **05 timeoff-workhour** | **Data-point line with a floating value tooltip** ("Monday, 6h"); **radial arc + status list**; **segmented time control** | Step-timeline **data-point steps** — the active step floats a `retrying`/`attempt` value bubble over its datum chip; the arc gauges; the All/Compact/JSON altitude segmented |
+| **01 synergy-hr** | **KV split-panel** (Current Project: name/manager/lead/timeline); **left-accent tinted cards** | The **correlation split-panel** header on both screens; the selected journey node's copper left-accent |
+| **03 analytics** | **Funnel/step table** with count + colored trend; **channel split + dot legend** | The journey as a causal step list with seam-value cells; the seam-outcome split + legend |
+| **11 devconsole (Conduktor Consume)** | **Compact stat strip** (RECORDS/PARTITIONS…); **dense sortable data table** with column headers + sort arrows; **right slide-out drawer** | Run Inspector **console stat strip** (runs/retrying/compensating/failed); the run list as a **console table** ("Correlated runs · 4" with a `RUN ↓ / STATUS` sortable header); the right rail reads as the detail drawer, and folds to a bottom sheet on mobile |
+| **13 devconsole (Schema diff)** | breadcrumb → stat strip → altitude picker → code region | The Run Inspector's stat-strip → hero → altitude-segmented → step/JSON region rhythm |
+| **21 flow-builder (outamate node-graph)** | **Node cards** with icon-tile + title + semantic **caption** beneath; **branch/edge labels floating on connectors**; **selected-node ring**; **right properties panel** | The journey's node-graph feel: per-node **caption pills** (INGRESS / EVENT ROUTER / ORCHESTRATION / EXECUTION / FAN-OUT DELIVERY); **edge branch-labels** on the causal connectors (routes to / publishes + enqueues / runs job / emits event); selected-node copper accent + ring; the desktop **seam-detail rail** = the properties panel |
+
+---
+
+## Per-widget composition
+
+### Live Flow (S13)
+
+1. **`ns-flowhero`** (new) — fills the former dead-band under the lede. A 2-column band:
+   left = **chain-progress arc gauge** (`2/5 seams`, tone = worst node state) + a **mini spine**
+   (5 tinted primitive glyph dots showing the whole chain at a glance); right = the **verdict badge +
+   route**, the **correlation KV split-panel** (correlation id / trace / seams cleared), and a
+   **seam-outcome splitbar** (cleared / in-flight / failed) with a dot legend. Refs 04 + 01 + 03.
+2. **`ns-journey--rich`** (uplift) — each seam node is now a **card row**: a tinted primitive glyph
+   tile, name + status pill, a **semantic caption pill** (ref 21), a right-aligned **tone-tinted
+   seam-value chip** (`200`, `evt_2210`, `step 2 of 4`, `2 of 3`, `2/3`), a `spawns saga + job`
+   hint on the trigger node, and a **fan-out delivery visual** on the stream node (receipt ✓ /
+   ledger ✓ / analytics ✗ pills). Connectors carry **edge branch-labels**; the selected node gets a
+   copper left-accent + primary ring; the halted flow draws a **dashed severed** connector +
+   destructive edge label.
+3. **`ns-seamrail`** (new, desktop) — a third column showing the **selected node's** properties:
+   primitive + name header, KV detail, deep-links (Open entity → / Raw trace ↗ / Run Inspector →),
+   and the grounded **`ns-assist`** card. Under 1440px it collapses; the node opens a **bottom
+   sheet** instead (`window.matchMedia` branch in the node's click handler).
+4. **`ns-flowrow`** (uplift) — rail rows gain a **mini seam-chain dot-strip** (per-hop tone dots) +
+   a seam count, so each correlation previews its shape before you open it.
+
+### Run Inspector (S6)
+
+1. **`ns-statstrip`** (new) — a 4-tile **console stat strip** (runs / retrying / compensating /
+   failed), tone-colored values. Ref 11.
+2. **`ns-runtable`** (new) — the run list is now a **console table**: a titled head ("Correlated
+   runs · 4"), a **sortable column header** row (`RUN ↓ / STATUS`), and dense rows with a
+   **primitive glyph tile** per run (saga/job/firing/delivery, tone by capability). Ref 11.
+3. **`ns-runhero`** (new) — a run-summary hero: a **step-progress arc gauge** (`2/4 steps`, tone by
+   run status), the **correlation KV split-panel** (correlation / trace / started / elapsed), and a
+   **3-tile breakdown** (steps done / attempts / compensations). Refs 04/05 + 01.
+4. **`ns-step-timeline--data`** (uplift) — data-point steps: each carries a right-aligned
+   **tone-tinted datum chip** (`12ms`, `208ms`, `queued`), the newest active step **floats a value
+   tooltip** above its chip (ref 05), attempts render as a real chip, and the **compensation branch**
+   is now a **visibly distinct indented reverse lane** (warning left-rail, a `⟲` reverse marker in
+   the gutter, warning-tinted marker). Compact altitude drops the datum chips + tightens rows.
+5. **Logstrip** (fix + uplift) — the previously-clipping 4-column grid (`re…`/`po…`) is now a
+   **2-row line**: `ts · resource` on row 1 with a **severity dot**, the full message on row 2 —
+   never truncates the resource, stays legible in the 19rem rail and on mobile.
+6. **Seam-detail bottom sheet** (uplift) — the mobile sheet gains a **badge hero** (primitive +
+   status) so it reads as a proper detail card, not a bare KV list.
+
+---
+
+## New component class contracts
+
+- `ns-flow-grid` — Live Flow layout: `1fr` → `16rem 1fr` (≥1024) → `16rem 1fr 19rem` (≥1440); the
+  `.ns-seamrail` 3rd column hides < 1440 (node opens a bottom sheet instead).
+- `ns-flowhero` / `__gauge` / `__spine` / `__spine-dot[data-tone][data-prim]` / `__body` / `__top` /
+  `__route` — flow-summary band.
+- `ns-gauge__of`, `ns-gauge__label` — gauge value denominator + micro-cap sub-label (extends the
+  existing `ns-gauge`, reusing its post-mount `drawGauges` geometry — no new JS).
+- `ns-kv--split` — KV rendered as an auto-fit split-panel (left-aligned values), from ref 01.
+- `ns-dot` — inline legend dot.
+- `ns-journey--rich`, `ns-journey__hit` (grid: title/seam left, value right), `ns-journey__val`
+  (tone-tinted seam-datum chip), `ns-journey__sub` / `__caption` (semantic caption pill),
+  `ns-journey__edge` (connector branch-label), `ns-journey__spawn` / `__spawn-tick`,
+  `ns-journey__legend*`.
+- `ns-fanout` / `__leg[data-state]` / `__dot` — subscriber-level delivery fan-out visual.
+- `ns-flowrow__chain` / `__chaindot[data-tone][data-prim]` — mini seam-chain preview strip.
+- `ns-statstrip` / `__tile` / `__label` / `__value[data-tone]` — console stat strip.
+- `ns-runtable` / `__head` / `__title` / `__count` / `__cols` / `__col[--sorted]` / `__sort` —
+  console-style sortable run table wrapper (wraps the existing `ns-entity-rail`).
+- `ns-runrow` (grid: glyph + body) / `__glyph[data-prim]` / `__body` — run rail row with a
+  primitive glyph tile.
+- `ns-runhero` / `__gauge` / `__body` / `__top` / `__name` / `__corr-note`;
+  `ns-runstat` / `__tile` / `__val[data-tone]` / `__of` / `__label` — run-summary hero + tiles.
+- `ns-step-timeline--data` + `__n` / `__datum` / `__tip` — data-point steps; compensation lane
+  restyle via `[data-comp='1']` (indented reverse lane + gutter `⟲`).
+- `ns-seamsheet-hero` — mobile seam-sheet badge header.
+
+All token-driven (`--ns-*` only, no raw hex), all geometry via CSS or the existing post-mount
+`drawGauges`/`drawSparks` pipeline — **zero SVG `{{ }}` holes**.
+
+## Mobile behavior
+
+- **Live Flow** reflows to one column (rail → hero → journey → seam detail → assist). The seam rail
+  is hidden as a 3rd column; **tapping a journey node opens the seam-detail bottom sheet** (verified:
+  `sheetOpen=true`). The flow-hero arc + splitbar stack; edge labels + captions persist.
+- **Run Inspector** reflows to one column (rail → stat strip → run-hero → step timeline → run events
+  → logstrip → assist). The stat strip drops to 2×2; the run-hero to a single column; the logstrip's
+  2-row line never clips. The right rail (events/logs/assist) reads as the console detail drawer.
+
+## Before / after
+
+- **Live Flow before:** a large empty band under the lede; a flat vertical text list of nodes; no
+  flow verdict; no per-node seam value; no fan-out; seam detail only reachable via a mobile sheet.
+  **After:** a flow-hero with an arc gauge + correlation panel + outcome split; node-graph journey
+  with captions, edge labels, tone-tinted seam-value chips, delivery fan-out, a severed variant, and
+  a **live desktop seam-detail rail**.
+- **Run Inspector before:** a thin correlation text line; a plain circle-marker step list with a
+  faint compensation rule; a clipping logstrip; flat rail rows. **After:** a console stat strip + a
+  sortable console run table with glyph tiles; a run-summary hero (arc + correlation panel + 3
+  breakdown tiles); data-point steps with a floating value tooltip, real attempt chips, and a bold
+  indented compensation lane; a fixed 2-row logstrip.
+
+## Verification
+
+- Zero `{{ }}` holes, zero console errors, zero horizontal overflow across **flow / flow-halted /
+  runs / runs-job × desktop(1440) + mobile(390) × light + dark** (16 states) — plus interaction
+  states (desktop node-select updates the rail; mobile node-tap opens the bottom sheet).
+- Full **16-screen regression** (Home + all others) clean: holes=0, ovf=0, errs=0 on every route.
+
+## Honesty / not-yet-at-bar
+
+- The run-list console table lives in the ~16rem left rail (kept the existing 3-column console grid
+  to avoid re-architecting the shared layout). It reads as a dense console table with a sortable
+  header + glyph tiles, but it is a single-metric list, not the full multi-column sortable grid of
+  ref 11 (which had a full-width table). A future pass could promote the run list to a full-width
+  sortable table above a right detail drawer if the owner wants the exact Conduktor layout.
+- Sort arrows on the run-table header are **presentational** (the doctrine bar is visual; wiring real
+  sort is logic, out of scope for a visual-only pass).
+- The step-timeline "value tooltip" anchors on the active step only (one bubble), matching ref 05's
+  single-point tooltip; it is not an interactive hover crosshair across all steps.
+
+---
+
+## Design-system uplift ledger
+
+### New components
+- **`ns-flowhero`** — flow-summary band (arc gauge + spine + correlation KV split + seam-outcome
+  split). · Live Flow.
+- **`ns-seamrail`** (composed) — desktop seam-detail properties rail (KV + deep-links + grounded
+  assist); mobile → bottom sheet. · Live Flow.
+- **`ns-fanout`** / `__leg[data-state]` — subscriber-level delivery fan-out visual (per-sink
+  ok/failed pills). · Live Flow (stream node), reusable on Streams.
+- **`ns-runhero`** + **`ns-runstat`** — run-summary hero (step arc + correlation KV split +
+  attempt/compensation breakdown tiles). · Run Inspector; reusable on Sagas/Workers detail.
+- **`ns-statstrip`** — console stat strip (eyebrow micro-cap + big tone-colored value tiles). · Run
+  Inspector; reusable on every console screen (Workers/Sagas/Triggers/Streams/DLQ).
+- **`ns-runtable`** — console-table wrapper (titled head + count + sortable column header) around an
+  entity rail. · Run Inspector; reusable for any entity list that wants a console-table read.
+
+### Refinements to existing components
+- **`ns-journey`** → `--rich` variant: card-row nodes, tinted glyph tiles, right seam-value chip,
+  semantic caption pill, connector edge branch-labels, selected copper accent + ring, `spawns`
+  hint. Node-graph feel (ref 21).
+- **`ns-flowrow`** → mini seam-chain dot-strip + seam count.
+- **`ns-gauge`** → `__of` (denominator) + `__label` (micro-cap) parts; usable as a fractional
+  progress arc (`2/5`) beyond a single percentage.
+- **`ns-kv`** → `--split` variant (auto-fit split-panel, left-aligned values) from ref 01.
+- **`ns-step-timeline`** → `--data` variant: right datum chip, active-step floating value tooltip,
+  `__n` step number, and a **bolder indented compensation lane** (gutter `⟲` + warning rail).
+- **`ns-logstrip`** → 2-row line (ts·resource / message) with a severity dot; no more resource/
+  message truncation in narrow rails.
+- **`ns-runrow`** → primitive glyph tile on entity-rail items.
+- **seam-detail bottom sheet** → badge hero header (primitive + status).
+
+### New tokens
+- None. Everything composed from existing `--ns-*` tokens (copper/teal/amber/tone families,
+  spacing, radius, text scale). No raw hex.
+
+### New variants
+- `ns-journey--rich`, `ns-kv--split`, `ns-step-timeline--data`.
+
+### New options / data-attributes
+- `ns-flowhero__spine-dot[data-tone][data-prim]`, `ns-flowrow__chaindot[data-tone][data-prim]`,
+  `ns-journey__val` tinted by parent `[data-state]`, `ns-fanout__leg[data-state]`,
+  `ns-statstrip__value[data-tone]`, `ns-runstat__val[data-tone]`, `ns-runrow__glyph[data-prim]`,
+  `ns-runtable__col--sorted` + `__sort`, `ns-step-timeline__datum` tinted by `[data-state]`,
+  `ns-step-timeline__step[data-tip='1']` (active data-point).
+
+### Mobile optimizations
+- Live Flow seam-detail as a **dedicated bottom sheet** (viewport-branched click handler; the
+  desktop 3rd-column rail hides < 1440px).
+- `ns-statstrip` → 2×2 on mobile; `ns-flowhero`/`ns-runhero` → single column < 560/720px.
+- `ns-logstrip` 2-row line keeps resource + message legible on 390px.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V4-consoles-workers-sagas.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4-consoles-workers-sagas.md
new file mode 100644
index 000000000..9d7f9d98c
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4-consoles-workers-sagas.md
@@ -0,0 +1,278 @@
+# V4 — Workers + Sagas capability consoles at the high-craft bar
+
+**Screens:** S7 Workers (polyglot job/task registry console) and S8 Sagas (compensation
+state-machine console), plus their leaf/detail states and mobile bottom sheets.
+**Files touched:** `render/prototype.dc.html` (markup + view-model derivations — routes/logic/data
+unchanged), `render/assets/ns-ext.css` (all new component CSS). `_ns_styles.css`, `support.js`, and
+`proto.css` were **not** edited.
+**Final screenshots:** `_visual-reports/V4-shots/` (Workers + Sagas × desktop 1440 + mobile 390 ×
+light + dark, a Workers mobile bottom-sheet, a Sagas instance with **no** compensation lane, and two
+state-machine crops, plus BEFORE references).
+
+---
+
+## The design question — answered per console, THEN designed around
+
+> *What tailored components, layout, composition, data visualization, and data structure best
+> showcase THIS capability — and how do they compose?*
+
+The two consoles share the **dev-console anatomy** (refs 11/12/13: breadcrumb → tab row → stat strip
+→ dense data view → right detail drawer) as a common *frame*, but their **hero and grid rhythm are
+deliberately opposite** so the two routes never read as the same template with different data:
+
+### Workers — a REGISTRY, so the screen is TABLE-FORWARD
+The Workers story is *"which of my polyglot units exist, in what runtime, on what schedule, and did
+they run?"* — a registry question. So the **hero is a full-width, dense, sortable console table**
+(name · kind · **runtime badge** · schedule · last status · 24h trend · Run-now), sitting directly
+under a **runtime-mix stacked bar** and a `?runtime=` **filter-chip** row. Everything else —
+execution feed, worker-pool liveness, scheduler-vs-config drift — is a **supporting panel** in an
+auto-fit grid below. There is **no arc gauge**; the dominant element is the table. Selecting a row
+opens a **detail drawer** (right sheet on desktop, bottom sheet on mobile) with the unit's KV +
+recent-executions mini-timeline + Run-now.
+
+The data structure that makes the table earn its density: every unit carries a normalized
+`rtKey` (`deno|python|shell|dotnet|pwsh`) that drives the runtime-badge dot, the `?runtime=` filter,
+and the stacked runtime-mix bar — one field, three visualizations, so the *polyglot* nature is the
+thing you see first.
+
+### Sagas — a STATE MACHINE, so the screen is DIAGRAM/TIMELINE-FORWARD
+The Sagas story is *"this instance ran forward, then something failed, so it is compensating —
+show me the rollback."* `COMPENSATING` is a status no other tool models, so the **hero is the
+compensation state machine, rendered**: a compact state gauge + correlation KV, then a **bespoke
+state-machine mini-diagram** (`ns-smd`) — a forward lane of pill-nodes joined by edge-labelled
+connectors, then a **visibly distinct rollback lane** returning through compensation pairs — followed
+by an **assist that explains WHY compensation triggered** (grounded in the failed step), and the
+elevated **data-point step timeline** with a bold indented compensation lane. The definitions/
+instances rail and the transitions feed are the *supporting* left/right columns.
+
+The data structure that makes this work: each instance carries a `machine` model
+(`forward[]` + `comp[]` with per-node `state`/`glyph`/`cap`/`edge`), a `hero` (states-settled /
+total, tone by status), and an `assist` (or `null` when nothing compensated). Because `hasComp` is
+per-instance, some instances render the rollback lane and the "why" assist, and others (e.g. the
+ACTIVE at-most-once export) render **only the forward lane with no rollback** — the composition is
+genuinely data-driven, not a static template (see shots 10 vs 11 vs 12).
+
+**How the frame composes both:** the shared kit (`ns-conhead` breadcrumb + `ns-contab` tab row +
+`ns-statstrip` + `ns-runtable`/entity-rail + status pills + `ns-step-timeline--data` + `ns-assist` +
+the generic right/bottom sheet) keeps the product feeling like one console family; each console then
+adds its own **dominant** component (`ns-contable` for Workers, `ns-smd` for Sagas) so the two are
+unmistakably different screens.
+
+---
+
+## References mined this pass (new patterns, per ref)
+
+| Ref | Pattern taken | Applied to |
+|-----|---------------|-----------|
+| **11 devconsole-a (Conduktor Consume)** | breadcrumb (`Topics ›`) + **compact stat strip** (RECORDS/PARTITIONS…) + **dense sortable data table** with sort-arrow column headers + a **right slide-out drawer** with its own docs tabs | Both consoles' `ns-conhead` breadcrumb + `ns-statstrip`; Workers' `ns-contable` sortable registry; the selected-row **detail drawer** (`ns-drawer` / generic sheet) |
+| **12 devconsole-b (Conduktor Produce)** | the **tab row** (Consume / Produce / Configuration / Schema / …) with an underlined active tab; a left-panel + right-table split | Workers/Sagas **`ns-contab`** tab row (Registry/Executions/Pools/Drift · Instances/State machine/Transitions); the toolbar (`ns-contoolbar` search + filter chips) |
+| **13 devconsole-c (Schema diff)** | a stat strip whose value can be a **full text string** (`Backward transitive`) not just a number; the breadcrumb → stat-strip → content rhythm | Workers' drift-cause naming (`override v43`); Sagas' `compensation: refund issued · settling` as a text KV value |
+| **19 pm-dashboard (Mondays)** | the projects **table with a status-pill column** (icon + name + inline meta + **status pill**); tinted category cells | Workers' registry table (kind badge + runtime badge + **status pill** column); the `ns-driftrow` tinted-by-state rows |
+| **21 flow-builder (outamate node-graph)** | **pill-shaped nodes** (icon-tile + title) joined by **connectors with floating branch labels** ("Get 30% Off"), a start→branch flow, a selected-node ring | The **bespoke saga state-machine** (`ns-smd`): forward pill-nodes + edge branch-labels (`enqueue job` / `reserve failed`) + semantic captions + a `data-current` copper ring + a **distinct dashed reverse rollback lane** |
+| **09 analytics (Catalyst)** | the **stacked category bar** (segments filling to a %) + dot legend | Workers' **runtime-mix** stacked bar + legend (`Deno 9 · Python 3 · Shell 2 · .NET 1 · PowerShell 1`) |
+
+---
+
+## Per-console composition
+
+### Workers (S7) — table-forward registry
+1. **`ns-conhead`** (new) — in-content **breadcrumb** (`Capabilities › Workers`) + dogfood
+   provenance chip + a **`ns-contab` tab row** (Registry active · Executions · Pools · Drift, each
+   with a live count; siblings smooth-scroll to their section via `scrollToSection`, presentational).
+2. **`ns-statstrip--5`** (new variant) — a 5-across console stat strip (jobs / tasks / running /
+   failed / success), tone-colored, denser tiles than S6's default.
+3. **`ns-runtimemix`** (new, bespoke) — a **stacked polyglot-runtime bar** + dot legend, the one
+   viz that says "this is polyglot" at a glance (ref 09).
+4. **`ns-contoolbar` + `ns-rtchips`** (new) — search box + `?runtime=` **filter chips** (all/deno/
+   python/shell/.net/pwsh); the chips actually filter the table (`s7Runtime` state).
+5. **`ns-contable`** (new, **HERO**) — a dense, sortable console table with sort-arrow headers, a
+   **`ns-rtbadge` runtime column** (colored dot + label), a schedule cell (cron + human cadence), a
+   status pill, a 24h `ns-trend` sparkline, and a Run-now action. Rows are selectable
+   (`data-state='selected'` copper inset rail) → open the detail drawer.
+6. **`ns-poolmeter`** (new) — worker-pool **liveness** with a heartbeat **pulse** dot + consumer
+   count; the "0 consumers — nothing polling this queue" row is destructive-toned (the silent bug
+   Aspire can't see).
+7. **`ns-driftpanel` / `ns-driftrow`** (new) — scheduler-vs-config drift that **names the cause**
+   (`override v43`) and offers a `override v43 →` assist deep-link to Runtime Config.
+8. **Live executions feed** — retained (`ns-activity-feed` + Follow switch + `new` catch-up pill),
+   now a supporting column, not the whole right rail.
+9. **Detail drawer** (`ns-drawer` idiom via the generic sheet) — selected row → kind + runtime badge
+   + status, KV (schedule/cadence/queue/runtime), a **recent-executions mini-timeline**, Run-now +
+   Open actions. Right sheet on desktop, **bottom sheet on mobile** (`data-side` viewport branch).
+
+### Sagas (S8) — state-machine-forward
+1. **`ns-conhead`** — breadcrumb deepens to the instance (`Capabilities › Sagas › PaymentWebhookSaga`)
+   + provenance chip + a 4-tile stat strip (instances / compensating / completed / failed).
+2. **Instances rail** — the definitions/instances list, upgraded to a `ns-runtable`-style console
+   list (sortable header + status pills) with a **`ns-durabar` durability-tier** viz beneath
+   (durable = 3 success pips; at-most-once = 1 warning pip + muted).
+3. **`ns-sagahero`** (new) — compensation-state summary band: a **state arc gauge** (states settled
+   / total, tone by status) + correlation KV split (forward path / compensation label) + a 3-tile
+   breakdown (states settled / compensations / attempts).
+4. **`ns-smd`** (new, **HERO viz**) — the bespoke **state-machine mini-diagram**: a forward lane of
+   pill-nodes (`charged ✓ → reserving ⚙ → notify`) joined by **edge-labelled connectors**
+   (`enqueue job` / `reserve failed`) with semantic captions, the current node ringed in copper;
+   then a **`ns-smd__lane--comp` rollback lane** — indented, warning left-rail, **dashed reverse
+   connectors (◂)** — showing the compensation pairs (`refund ⟲ → settled`). Instances with no
+   rollback render only the forward lane.
+5. **Grounded `ns-assist`** — "Why is this compensating?" — a plain-language cause
+   (reserve failed twice → refund issued → settling) grounded in clickable failed-step / job chips.
+   `null` for instances that never compensated.
+6. **`ns-step-timeline--data`** (reused from V3, elevated) — the forward path + the bold indented
+   **compensation lane** (gutter `⟲`, warning rail), now with tone-tinted **datum chips**
+   (`208ms` / `E_TIMEOUT` / `ref_102`), plus the linked-executions deep-link + the write actions
+   (Retry failed step / Force-complete compensation, both confirm+CLI).
+7. **Transitions feed** — the history/transitions stream in the right supporting column.
+
+---
+
+## New component class contracts (all `--ns-*` tokens, no raw hex, no SVG `{{ }}` holes)
+
+- `ns-conhead` — console header wrapper (breadcrumb + tab row + stat strip); scopes denser stat tiles.
+- `ns-conbread` / `__crumb` / `__crumb--here` / `__sep` — in-content breadcrumb.
+- `ns-contab` / `__btn[data-state='active']` / `__count` — the console **tab row** (ref 11/12).
+- `ns-contoolbar` / `__search` / `__search-ico` — table toolbar.
+- `ns-rtchips` / `ns-rtchip[data-state]` / `__dot[data-rt]` — `?runtime=` filter chips.
+- `ns-rtbadge` / `__dot[data-rt]` — runtime badge column (deno/python/shell/dotnet/pwsh dot).
+- `ns-runtimemix` / `__bar` / `__seg[data-rt]` / `__legend` / `__leg` — stacked polyglot-runtime bar.
+- `ns-contable` / `__scroll` / `__t` / `__th[--sorted][--r]` / `__sort` / `__row[data-state]` /
+  `__td` / `__name` / `__sub` / `__sched` — dense sortable console table (Workers hero).
+- `ns-drawer` / `__head` / `__title` / `__body` / `__section-label` / `__tabs` / `__tab` — right
+  detail drawer contract (rendered via the generic sheet → bottom sheet on mobile).
+- `ns-poolmeter` / `__row[data-state]` / `__pulse` / `__q` / `__consumers` / `__cnum` — worker-pool
+  liveness with a heartbeat pulse.
+- `ns-driftpanel` / `ns-driftrow[data-state]` / `__dot` / `__main` / `__probe` / `__result` /
+  `__cause` — scheduler-drift panel that names its cause.
+- `ns-sagahero` / `__gauge` / `__body` / `__top` / `__name` — saga compensation-state hero band.
+- `ns-durabar[data-tier]` / `__pips` / `__pip` / `__label` — durability-tier pip viz.
+- `ns-smd` / `__lane[--comp]` / `__lane-label[data-lane]` / `__node[data-state][data-current]` /
+  `__pill` / `__glyph` / `__cap` / `__edge[data-lane]` / `__edge-label` / `__edge-line` — the
+  **bespoke saga state-machine mini-diagram** (ref 21 node-graph).
+- `ns-statstrip--5` — 5-across stat strip variant (2→3→5 responsive).
+
+Reused unchanged from the shared kit: `ns-statstrip`, `ns-runtable`, `ns-step-timeline--data`,
+`ns-runstat`, `ns-gauge` (+ `__of`/`__label`), `ns-kv--split`, `ns-assist`, `ns-activity-feed`,
+`ns-trend`, status/badge pills, `ns-seg`, the generic right/bottom sheet, `ns-console-grid`.
+
+---
+
+## Mobile behavior
+
+- **Workers** reflows to one column: breadcrumb/tabs → stat strip (2×2+1) → registry (the
+  `ns-contable` **scrolls horizontally inside its own `__scroll` container**, body never scrolls) →
+  runtime-mix + chips → executions feed → pool liveness → drift, all stacked. **Tapping a registry
+  row opens a bottom sheet** (`data-side='bottom'` via a `matchMedia('(max-width:640px)')` branch)
+  with the unit detail + recent-executions timeline + Run-now (shot 05).
+- **Sagas** reflows to one column: stat strip → instances rail + durabar → sagahero (single column)
+  → **state-machine mini-diagram** (the `ns-smd` lanes wrap gracefully — forward nodes flow to a
+  second row, the rollback lane stays railed) → assist → step timeline → transitions.
+- `ns-statstrip--5` → 2-col then 3-col before 5-col; `ns-sagahero` → single column < 560px.
+
+---
+
+## Before / after
+
+- **Workers before:** a generic `ns-responsive-table` registry, inline baseline stats, plain
+  `ns-connector` rows for drift + pools, a workflow timeline, and a large **dead right column** below
+  the feed. No console frame, no runtime viz, no filters, no selectable detail.
+  **After:** a full dev-console — breadcrumb + tab row + 5-tile stat strip, a **runtime-mix bar +
+  `?runtime=` filter chips**, a **dense sortable console table** with a runtime-badge column and
+  selectable rows → detail drawer/bottom-sheet, **worker-pool liveness with heartbeat pulses**, and a
+  **drift panel that names the cause (`override v43`)**. No dead space.
+- **Sagas before:** a 3-column list→detail→transitions with a basic step timeline and a flat
+  "step 3 of 5" notice. No stat strip, no state diagram, no durability viz, no "why".
+  **After:** a state-machine-forward console — stat strip, a **compensation-state hero** (state arc +
+  correlation split + breakdown tiles), the **bespoke `ns-smd` state-machine mini-diagram** (forward
+  lane + a distinct dashed rollback lane, per-instance), a **grounded "why is this compensating?"
+  assist**, the elevated data-point step timeline with a bold compensation lane, a **durability-tier
+  pip viz**, and the transitions feed.
+
+---
+
+## Verification
+
+- Zero `{{ }}` holes, zero console errors (favicon 404 excluded), zero horizontal overflow across
+  **Workers + Sagas × desktop(1440) + mobile(390) × light + dark** (8 states), plus interaction
+  states: Workers row-select → mobile bottom sheet; Sagas instance-switch across pw / csv / batch /
+  export (the state machine + assist + durabar all re-derive; export shows **no** rollback lane).
+- Full **14-screen regression** (Home, Live Flow, Run Inspector, Config, Runtime, Catalog, Plugins,
+  Triggers, Streams, Migrations, DLQ, AI, Extensions, Auth) clean: holes=0, ovf=0, errs=0 on every
+  route. The extended kit (`ns-statstrip`, `ns-step-timeline--data`, `ns-gauge`) did not regress S6.
+
+## Honesty / not-yet-at-bar
+
+- **Sort arrows on `ns-contable` are presentational** — real column sorting is logic, out of scope
+  for a visual-only pass. The runtime **filter chips + text filter** DO filter the table (view-model
+  derivation, no data mutation).
+- The console **tab row** is presentational: Registry is the live view; Executions/Pools/Drift
+  smooth-scroll to their in-page section (`scrollToSection`) rather than swapping panels — a
+  no-logic-change affordance. A future pass could make them true panel-swapping tabs if the owner
+  wants the exact Conduktor tab behavior.
+- The Workers detail drawer reuses the **generic sheet** (right on desktop / bottom on mobile) rather
+  than a persistent 3rd column — a deliberate choice to keep Workers **table-forward** and visually
+  distinct from Sagas' 3-column console (the "two routes look the same" failure mode).
+- `ns-smd` edge labels are compact; on very narrow widths the forward lane wraps to multiple rows
+  (verified legible at 390px) rather than horizontally scrolling.
+
+---
+
+## Design-system uplift ledger
+
+(Appended in full to `visual/DS-UPLIFT-BACKLOG.md` under **## Pass V4 — Workers + Sagas**.)
+
+### New components
+- `ns-conhead` + `ns-conbread` + `ns-contab` — console header: breadcrumb + underlined tab row with
+  live counts. · Workers, Sagas; reusable on every console + control-plane screen.
+- `ns-contoolbar` + `ns-rtchips` + `ns-rtbadge` — table toolbar + runtime filter chips + runtime
+  badge column. · Workers; the badge/chip pattern is reusable wherever a polyglot/kind dimension
+  needs a colored marker.
+- `ns-runtimemix` — stacked distribution bar + dot legend (token-colored segments). · Workers;
+  reusable for any categorical split (Streams backends, DLQ by-queue, capability mix).
+- `ns-contable` — dense sortable console table (sort-arrow headers, selectable rows, sub-cells). ·
+  Workers hero; the canonical dense-table for Catalog/DLQ/Auth/Migrations.
+- `ns-drawer` — right detail-drawer contract (folds to bottom sheet on mobile). · Workers; reusable
+  as the console detail surface everywhere (Run Inspector, DLQ, Auth).
+- `ns-poolmeter` — liveness rows with a heartbeat pulse + consumer count + destructive dead-queue
+  state. · Workers; reusable on Streams (subscriber liveness) + DLQ (consumer health).
+- `ns-driftpanel` / `ns-driftrow` — drift rows tinted by state that **name the cause** + a deep-link
+  assist. · Workers; reusable on Runtime (override drift), Config, Migrations.
+- `ns-sagahero` — compensation-state summary band (state arc + correlation split + breakdown). ·
+  Sagas; reusable on any state-machine primitive detail.
+- `ns-durabar` — durability-tier pip viz. · Sagas; reusable for any tier/guarantee dimension
+  (Streams delivery guarantee, DLQ backend durability).
+- `ns-smd` — **saga state-machine mini-diagram** (forward lane + distinct rollback lane, edge branch
+  labels, current-node ring). · Sagas hero; the reusable "small state/flow diagram" primitive (ref
+  21) for Config topology, Trigger composite chains, and any compensating/branching flow.
+
+### Refinements to existing components
+- `ns-statstrip` → `--5` variant (2→3→5 responsive) + a `ns-conhead`-scoped denser tile
+  (shorter padding, `text-xl` value) so console header strips read tighter than the S6 default.
+- generic **right sheet** → viewport-branched `data-side` (right on desktop, **bottom on mobile**),
+  so the same dialog serves as a desktop detail drawer and a mobile bottom sheet — now used by
+  Workers row-detail in addition to S2/S13.
+- `ns-step-timeline--data` → reused on Sagas with per-step **datum chips** derived from the saga
+  history (`208ms` / `E_TIMEOUT` / `ref_102`), proving the V3 variant generalizes beyond Run Inspector.
+
+### New tokens
+- None — everything composed from existing `--ns-*` tokens (tone families, spacing, radius, text
+  scale). The `.NET` runtime swatch uses `color-mix(in oklab, var(--ns-fg), var(--ns-card) 25%)` to
+  stay theme-correct in both modes without a raw hex.
+
+### New variants
+- `ns-statstrip--5`; `ns-smd__lane--comp` (rollback lane); `ns-driftrow[data-state]`;
+  `ns-durabar[data-tier]`.
+
+### New options / data-attributes
+- `ns-rtchip[data-state]` + `__dot[data-rt]`, `ns-rtbadge__dot[data-rt]`,
+  `ns-runtimemix__seg[data-rt]` (deno/python/shell/dotnet/pwsh), `ns-contable__row[data-state]`,
+  `ns-contable__th--sorted`, `ns-poolmeter__row[data-state='failed']`,
+  `ns-driftrow[data-state]`, `ns-durabar[data-tier]`, `ns-smd__node[data-state][data-current]`,
+  `ns-smd__edge[data-lane='comp']`.
+
+### Mobile optimizations
+- `ns-contable` scrolls horizontally inside its own `__scroll` container (body never scrolls at 390).
+- Workers registry-row → **dedicated bottom sheet** (viewport-branched `data-side`), matching the
+  brief's "selected row → detail bottom sheet on mobile".
+- `ns-smd` lanes wrap to multiple rows on narrow viewports (no horizontal scroll), the rollback lane
+  staying railed and distinct.
+- `ns-statstrip--5` steps 2→3→5; `ns-sagahero` collapses to a single column < 560px.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-fix-density.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-fix-density.md
new file mode 100644
index 000000000..f501e733f
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-fix-density.md
@@ -0,0 +1,128 @@
+# V4b-fix — Sagas canvas density pass (kill the dead space + elevate the surrounding sections)
+
+**Screen:** S8 Sagas. The V4b redesign turned Sagas into an n8n-style node canvas (approved
+direction), but the adversarial vision gate (`visual/_evals/V4b-adversarial-vision.md`, ACCEPT-WITH-
+FIXES) flagged one real defect: **~75–80% of the canvas was empty dotted grid** — it failed the
+"dense, no dead space" doctrine. This pass FILLS that void with tailored, data-driven content and
+raises craft, then (per the coordinator addendum) elevates the surrounding sections from generic
+dashboard chrome into bespoke saga components.
+
+**Files touched (visual + layout only — routes/logic/data/copy-meaning unchanged):**
+- `render/prototype.dc.html` — Sagas markup + S8 view-model derivations + `measureSagaEdges`
+  extensions (rich on-wire annotation card + `drawSagaMinimap`). No other screen's markup touched.
+- `render/assets/ns-ext.css` — all new component CSS appended under the `V4b-fix` banner. `proto.css`,
+  `_ns_styles.css`, `support.js` NOT edited.
+
+**Screenshots:** `_visual-reports/V4b-shots/` (overwritten) — Sagas × {desktop 1440, mobile 390} ×
+{light, dark}, node-selected tabbed sidebar, mobile node-tap bottom sheet, all 4 instances
+(`sagas-instance-{pw,csv,batch,export}.png`), the export no-rollback proof, and a
+nav-away-and-back edge-redraw check (`sagas-navback.png`). The gate-flagged empty-canvas state is
+preserved as `00-BEFORE-density-sagas-{desktop,mobile}-light.png`.
+
+---
+
+## Canvas fill — before → after
+
+Measured with a 60×40 cell-coverage sampler over the identical `.ns-sgc__canvas` (content element
+bounding boxes vs. canvas cells), desktop 1440, PaymentWebhookSaga:
+
+| | cell coverage |
+|---|---|
+| **Before** (V4b: 5 nodes + 2 lane tags + toolbar — the gate-flagged state) | **29%** |
+| **After** (+ mini-map, per-lane health strips, step rail, legend, ghost scope, on-wire annotation) | **47%** |
+
+Bounding-box coverage went **29% → 47% (+18 pts)**. The gate's *visual* estimate of the before was
+lower (~20%) because three of the five before-nodes were near-white cards reading as empty; the after
+adds dense, high-contrast content (a real mini-graph, mono stat strips, a rail, rich edge
+annotations), so the *effective* ink density roughly doubled. No large empty region survives at 1440
+or 390 — the remaining grid reads as active canvas framed by the rail (left), lane header band (top),
+legend (bottom-left) and mini-map (bottom-right).
+
+---
+
+## The 8 gate directives — what shipped
+
+1. **Definition mini-map** (`ns-sgc__minimap` + `drawSagaMinimap`) — ~204×112 thumbnail docked
+   bottom-right, drawn post-mount from each instance's `machine.def` topology. The full definition
+   (forward + rollback rows) renders as small nodes/edges; the **current instance path** overlays in
+   teal (forward) / amber (rollback), the selected node ringed copper. Fully data-driven and
+   JS-measured (recomputed on resize / route-enter / instance-switch / node-select). On mobile it
+   folds to a static full-width block.
+2. **Per-lane compensation-health stat strip** (`ns-sgc__lanestat`) — a slim single-line pill beside
+   each lane tag: forward = `avg latency · retry rate · states`; compensation = `comp success ·
+   refunds · settling`. Derived per instance (`machine.laneHealth`); the comp strip is JS-pinned above
+   the rollback row and is **absent when the instance has no rollback lane** (export).
+3. **Rich edge annotations** (`annoCard` in `measureSagaEdges`) — the failing→compensating cross-wire
+   now carries a solid card with an **error badge** (`E_TIMEOUT` / `PARTIAL` / `E_SCHEMA`), the branch
+   label, and a payload snippet (`job_4183 · attempt 2/3`). The canvas itself explains *why*
+   compensation fired.
+4. **Step execution rail** (`ns-sgc__rail`) — a left-edge pip rail (pending → charged → reserving →
+   refund → settled), tinted by state, the **current step enlarged** with a copper halo. Data-driven
+   from `machine.rail`; suppressed on the mobile single-column stack.
+5. **Ghost-node outlines** — queued/blocked scope states (`notify`, `settled`) render as ~42%-opacity
+   dashed wireframes (`[data-ghost='1']`), so the canvas shows saga **scope**, not just executed
+   history.
+6. **Sortable columnar step table** (`ns-sgtable`) — replaced the airy timeline bullet list with a
+   dense table: step / transition / timestamp / duration / error / attempt. Sortable headers with a
+   caret (ref-11), inline `E_TIMEOUT` error badge, compensation rows tinted + `↩`-marked.
+7. **Tabbed node inspector** (`ns-sgc__tabs`) — the node detail panel is now tabbed **State /
+   Transitions / Evidence / Actions** (ref-11 drawer tabs; active = copper text + 2px underline). The
+   grounded "why is this compensating?" moved to its own **Evidence** tab and "Retry this step" to
+   **Actions**, out of one long scroll. Same tabs drive the mobile bottom sheet.
+8. **Chromatic node identity** — forward nodes carry a **teal** top accent, compensation nodes a
+   **copper** accent, terminal nodes a **neutral** accent (`[data-role]`), on top of the existing
+   state tints (the live dot still reads state). A canvas legend (bottom-left) keys the four roles.
+   All `--ns-teal-*` / `--ns-copper-*` tokens, no raw hex.
+
+## Coordinator addendum — surrounding sections elevated
+
+- **Four plain metric cards → a saga-health composite band** (`ns-sghealth`): a compensation-rate
+  radial meter (conic, `--v`-driven), an in-flight vs terminal split with a fill bar, an
+  instances-by-state stacked channel bar + legend, and a forward↔rollback edge ratio. One saga-native
+  strip instead of four indistinguishable numbers.
+- **Transitions panel → a typed transition stream** (`ns-sgstream`): grouped by instance with an
+  instance header + status badge, each row a **typed transition** — advance `→`, compensate `↩`,
+  terminal `◼`, fault `✕` — glyph-blocked and tone-coded, timestamped, with a legend key in the panel
+  header.
+- The **page intro** already read saga-specific (the `COMPENSATING` lede); left as-is to avoid copy
+  drift.
+
+---
+
+## Data-driven proof (4 instances)
+
+Every new component re-derives per instance:
+- **PaymentWebhookSaga** (compensating) — full rollback, `E_TIMEOUT` annotation, 2 ghosts.
+- **CsvImportSaga** (compensate-then-**complete**) — `PARTIAL` annotation, forward path reaches
+  `completed`; mini-map shows recovery.
+- **ProductBatchImportSaga** (compensate-then-**fail**) — `E_SCHEMA`, terminal `failed`.
+- **ProductCatalogExportSaga** (at-most-once, **no rollback**) — forward-only lane, **no comp lane, no
+  comp health strip, no cross-edge annotation**; mini-map/rail/health all adapt to a 2-node forward
+  saga. (`sagas-export-no-rollback.png` / `sagas-instance-export.png`.)
+
+## Verification
+
+- **Zero `{{ }}` holes, zero console errors, zero horizontal overflow** on Sagas × desktop(1440) +
+  mobile(390) × light + dark, in the default state AND node-selected. Mobile correctly suppresses
+  edge geometry (edges=0) while the mini-map still folds in (mm=13); no body h-scroll.
+- **Connectors + mini-map are JS-measured** from `getBoundingClientRect()` / `machine.def` and recompute
+  on resize / route-enter / instance-switch / node-select. Nav-away-and-back redraws the 4 edges
+  (`sagas-navback.png`). **No SVG `{{ }}` template holes** — all geometry is post-mount JS or div/CSS.
+- **Full 16-route regression clean** (Home, Config Resolution, Runtime Config, Catalog, Live Flow, Run
+  Inspector, Plugins, Workers, Sagas, Triggers, Streams, Migrations, DLQ, Auth Sessions, AI,
+  Extensions): holes=0, ovf=0, errs=0 on every route. Shared-file edits are scoped to S8 + additive
+  CSS.
+
+## Honest gaps
+
+- **Long node names still ellipsize on the canvas** (`validation` → `validati…`, `rollback 88` →
+  `rollback…`); the full name always shows in the sidebar/sheet. Node cards are fixed-width for a tidy
+  grid (unchanged from V4b).
+- The on-wire annotation card is sized to its wider text line; the cross-edge connector visually
+  crosses the payload line at the card center. Payloads were shortened so they fit within the card;
+  the crossing is cosmetic (the card fill sits over the wire).
+- **Zoom remains presentational** (toolbar −/+/fit toast "fit-to-view") — real pan/zoom is interaction
+  logic beyond a visual-only pass (unchanged from V4b).
+- The canvas still stretches to the equal-height sidebar; a firm `min-height` now reserves a clean
+  bottom band so the mini-map never collides with a row-2 rollback node on short instances, and the
+  legend/mini-map/toolbar frame the lower canvas so it reads as stage, not dead space.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-sagas-canvas.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-sagas-canvas.md
new file mode 100644
index 000000000..f9dac7d49
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-sagas-canvas.md
@@ -0,0 +1,212 @@
+# V4b — Sagas as a canvas-dominant node graph (n8n / flow-builder)
+
+**Screen:** S8 Sagas — redesigned from a boring 3-column console template into a **full-bleed node-graph
+canvas with a click-to-open properties sidebar**. The Workers screen was **not touched**.
+**Files touched:** `render/prototype.dc.html` (Sagas markup + view-model derivations + a post-mount
+`measureSagaEdges` connector drawer + sheet wiring — routes/logic/data/copy-meaning unchanged),
+`render/assets/ns-ext.css` (all new `ns-sgc` component CSS). `_ns_styles.css`, `support.js`, and
+`proto.css` were **not** edited.
+**Final screenshots:** `_visual-reports/V4b-shots/` — Sagas desktop 1440 + mobile 390 × light + dark,
+the **node-selected properties sidebar** (desktop), the **node-tap bottom sheet** (mobile), the
+**export instance with NO rollback lane** (data-driven proof), plus BEFORE references and full-page
+captures.
+
+---
+
+## The design question — answered FIRST, then designed around
+
+> *What tailored components, layout, composition, data-viz, and data structure best showcase Sagas —
+> and how do they compose?*
+
+**The saga state machine IS a node graph, so the SCREEN must be a canvas — not a card inside a
+template.** A saga is a spatial object: forward states wired in sequence, and when a step fails, a
+*reverse* compensation branch that unwinds side-effects. Every other console in this dashboard answers
+a *list/table* question (Workers = "which units exist"); Sagas answers a *topology* question ("how did
+this instance flow, and where did it branch into rollback"). The only honest way to render `COMPENSATING`
+— a status no other tool models — is to **draw the machine as the dominant surface** and let the
+operator **click a node to configure/inspect it**, exactly like an n8n / outamate flow builder.
+
+So the composition is:
+1. **A dotted-grid, full-bleed CANVAS** as the dominant element — state-node cards laid out on a
+   forward lane (row 1, left→right) and a visually distinct **rollback lane** (row 2), wired by
+   **JS-measured connectors** with floating branch labels. This is not squeezed into a center column.
+2. **A properties sidebar docked right** (bottom sheet on mobile) — instance summary by default,
+   the selected node's full config when you click a node. This is the n8n interaction.
+3. **A slim instance switcher strip** on the canvas top edge — NOT a fat left column (which is what
+   recreated the 3-col look).
+4. A minimal **canvas toolbar** (zoom / fit / ✦ assist), like ref 21's bottom bar.
+5. The rich step-timeline + transitions feed demote to a **slim supporting strip below the canvas**,
+   so they inform without competing.
+
+---
+
+## Ref 21 (outamate flow-builder) — patterns mined and where they landed
+
+| Ref-21 pattern | What I took | Where it landed in Sagas |
+|----------------|-------------|--------------------------|
+| **Node-graph on a dotted canvas** | full-bleed dotted-grid stage; nodes are cards, not list rows | `ns-sgc__canvas` (two radial-gradient dot layers, theme-blind) + `ns-sgc__grid` |
+| **Nodes wired by connectors with floating branch labels** ("Get 30% Off" / "No Thanks") | measured bezier connectors + a floating label with a backing chip | `ns-sgc__edge*` drawn by `measureSagaEdges` from `getBoundingClientRect()` — branch labels `enqueue job` / `on reserve` / `reserve failed → compensate` / `settle` |
+| **A start → branch flow with a divergent path** | a **cross-edge** that drops the failed forward state down into a distinct reverse lane | `ns-sgc__edge[data-lane='cross']` (dashed warning, arrow ↓) + the whole `data-lane='comp'` rollback lane (dashed reverse connectors, warning-railed nodes) |
+| **Right-hand PROPERTIES PANEL showing the selected node's config** (Title / Responses / Text / Quick Reply) | click a node → sidebar swaps to that node's detail | `ns-sgc__props` node mode: status badge + KV (capability/timing/attempt/lane) + **transitions** + **payload at state** + **node actions** |
+| **A selected-node ring** | copper selected ring + the current node's dashed ring; edges touching the selection recolor copper | `ns-sgc__node[data-selected]` / `[data-current]` + active-edge recolor in `measureSagaEdges` |
+| **Bottom canvas toolbar** (zoom −/100%/+, hand, fit, ✦ Ask AI) | a floating pill toolbar pinned bottom-center | `ns-sgc__toolbar` (− / % / + / ⤢ fit / ✦ assist) |
+| **Component palette / node identity tiles** | an icon-tile per node (✓/⚙/◷/⟲/◑) reading its capability | `ns-sgc__node-tile` (state-tinted) |
+
+---
+
+## Component contracts (all `--ns-*` tokens, no raw hex, no SVG `{{ }}` holes)
+
+- **Canvas frame** — `ns-sgc` (grid: `1fr` canvas + `21–23rem` sidebar; stacks < 1024px);
+  `ns-sgc__switcher` / `__inst[data-state]` / `__inst-dot[data-tone]` (instance switcher strip);
+  `ns-sgc__stagewrap` (holds canvas + toolbar); `ns-sgc__canvas` (dotted grid + min-height);
+  `ns-sgc__grid` (3 columns × 2 lane-rows via `data-col`/`data-row`); `ns-sgc__edges` (SVG layer).
+- **Node** — `ns-sgc__node[data-lane][data-state][data-current][data-selected][data-col][data-row]`
+  with `__node-head` (`__tile` icon + `__name` + live `__dot`), `__cap`, `__foot`(`__metric`).
+  State tints reuse success/warning/destructive/primary subtle+border families; running/retrying dot
+  **pulses**; comp-lane nodes carry a warning left-rail; current node gets a dashed ring; selected
+  gets a copper ring. `onClick` → `pick()` sets `s8Node` (+ opens the bottom sheet on mobile).
+- **Connectors** — drawn post-mount by `measureSagaEdges()`: forward (`M…C…` bezier, arrow `→`),
+  a **cross-edge** (`data-lane='cross'`, dashed warning, arrow `↓`, `crossFrom` forward node →
+  first comp node), a **reverse rollback lane** (`data-lane='comp'`, dashed warning). Each edge gets
+  a label + `__edge-labelbg` backing rect so text reads over the dots. Edges touching the selected
+  node take `data-state='active'` (copper). Suppressed < 640px. `scheduleSagaEdges` polls for node
+  readiness (same shape as `scheduleEdgeMeasure`); re-run on resize / route-enter / instance-switch,
+  and `measureSagaEdges` alone on node-select (cheap recolor).
+- **Properties sidebar** — `ns-sgc__props`. **Summary mode** (default): state gauge + correlation KV
+  + the grounded "why is this compensating?" assist + instance actions (Open run / View trace).
+  **Node mode** (a node is picked): `__props-eyebrow` (forward/compensation state) + `← summary`
+  clear, node title + status badge, KV (capability/timing/attempt/lane), `ns-sgc__trans` in/out/comp
+  **transitions** (directional glyphs; comp row warning-toned), `ns-sgc__props-payload` **payload at
+  state**, and **node actions** (Retry this step / Force-complete compensation — the existing
+  confirm+CLI flows — plus linked-execution + Run-Inspector deep-links).
+- **Toolbar / lane tags** — `ns-sgc__toolbar` (`__tool`, `__tool-zoom`, `__tool-sep`);
+  `ns-sgc__lane-tag[data-lane]` (JS-positioned above the rollback row; hidden on mobile).
+
+## Data structure that makes it data-driven
+
+Each instance's `machine` gained a graph-ready shape: every node has `id`, `col`, `lane` (`fwd`/`comp`),
+`state`, `current`, an outgoing branch `edge` label, plus rich sidebar detail (`timing`, `attempt`,
+`payload`, `trans[]` in/out/comp, optional `action`), and the machine carries `crossFrom` / `crossEdge`
+for the forward→rollback drop. Because `hasComp` is per-instance, the composition is genuinely
+data-driven: **PaymentWebhookSaga** (5 nodes, full rollback), **CsvImportSaga** (compensate-then-
+complete), **ProductBatchImportSaga** (compensate-then-fail), and **ProductCatalogExportSaga** — the
+ACTIVE at-most-once export — render **only the forward lane, no rollback branch, no comp lane tag**
+(`sagas-export-no-rollback.png`), exactly as the current build behaves.
+
+---
+
+## Mobile behavior
+
+- The canvas **stacks to a single readable column** < 640px; `measureSagaEdges` suppresses connector
+  geometry (identical to the stackmap ≤ 860px rule) so there is **no horizontal body scroll**. Comp
+  nodes keep their warning left-rail, so the rollback lane stays visually distinct without the two
+  floating lane tags (hidden on mobile to avoid both pinning to the top of a single column).
+- **Tapping a node opens a bottom sheet** (`sheet: 's8'`) with the same properties content — status,
+  KV, transitions, payload, node action, linked-execution, and "back to instance summary". This is
+  the mobile equivalent of the desktop docked sidebar (the n8n bottom-sheet pattern).
+- The instance switcher strip **scrolls horizontally**; the properties sidebar reflows to a full-width
+  block under the canvas; the toolbar stays pinned bottom-center.
+
+---
+
+## Before / after
+
+- **Before (rejected):** a `ns-console-grid` 3-column template — a definitions/instances **left rail**,
+  a center column stacking a hero card + a small `ns-smd` **mini-diagram card** + a "why" assist + a
+  long step timeline, and a **transitions right rail**. The state machine was a footnote inside the
+  same skeleton every other console uses. (`00-BEFORE-sagas-desktop-light.png`)
+- **After:** a **canvas-dominant screen** — a slim instance switcher strip, a **full-bleed dotted-grid
+  node graph** (forward lane + a distinct dashed reverse rollback lane, measured connectors with branch
+  labels, a cross-edge dropping the failed state into rollback, current-node ring), a **canvas toolbar**,
+  and a **click-to-open properties sidebar** (instance summary → node config). The step timeline +
+  transitions demote to a slim supporting strip below. It reads as a different *kind* of screen from
+  Workers (table), Live Flow (causal chain), and Run Inspector (timeline). (`sagas-desktop-light.png`,
+  `sagas-desktop-light-node-selected.png`)
+
+---
+
+## Verification
+
+- **Zero `{{ }}` holes, zero console errors** (favicon 404 excluded), **zero horizontal overflow**
+  across Sagas × desktop(1440) + mobile(390) × light + dark (8 base states), plus interaction states:
+  node-select → desktop sidebar swap + active-edge recolor; node-tap → mobile bottom sheet;
+  instance-switch across pw / csv / batch / export (nodes, lanes, connectors, gauge, assist all
+  re-derive — export shows **2 nodes, 0 comp, 1 edge**; pw shows **5 nodes, 2 comp, 4 edges**).
+- Connectors are **measured from `getBoundingClientRect()`** into an SVG layer post-mount and recomputed
+  on resize / route-enter / instance-switch / node-select (the `ns-stackmap` / `measureEdges` pattern) —
+  no SVG `{{ }}` holes. Verified 4 `path.ns-sgc__edge` + 4 `text.ns-sgc__edge-label` on pw desktop,
+  **0** on mobile (correctly suppressed in the single-column stack).
+- **Full 16-route regression clean:** Home, Config, Runtime, Catalog, Plugins, Run Inspector, Workers,
+  Sagas, Triggers, Streams, Migrations, DLQ, Live Flow, AI, Auth, Extensions — holes=0, ovf=0, errs=0
+  on every route. **Workers, Home, and the investigation spine render byte-identical to before** — the
+  shared-file edits are scoped to Sagas + additive `ns-sgc` CSS. The `_resize` handler now also calls
+  `measureSagaEdges` on the sagas route; Config's stackmap still measures correctly.
+
+## Honesty / not-yet-at-bar
+
+- **Zoom is presentational.** The toolbar `−`/`+` buttons toast "fit-to-view" rather than actually
+  scaling the canvas — real pan/zoom is interaction logic beyond a visual-only pass. The `%` readout
+  and `⤢ fit` are honest affordances; the graph is already fully visible at 100%.
+- **Long node names ellipsize on the canvas** (e.g. `rollback 88` → `rollback …`); the full name always
+  shows in the properties sidebar/sheet. Node cards are fixed-width for a tidy grid.
+- **A 2-node instance (export) leaves visible empty canvas** below the graph. This is honest for a short
+  in-flight saga and reads as canvas real estate (flow builders have pannable empty space); the dotted
+  grid + toolbar keep it reading as a stage, not dead space. Equal-height columns mean a tall sidebar
+  (rich why-assist) can also extend the canvas below the graph.
+- **`ns-smd` (the V4 inline mini-diagram) is retained** in the codebase/kit as the small reusable
+  variant, but is no longer used on the Sagas screen — `ns-sgc` supersedes it there.
+
+---
+
+## Design-system uplift ledger
+
+(Appended in full to `visual/DS-UPLIFT-BACKLOG.md` under **## Pass V4b — Sagas canvas**.)
+
+### New components
+- `ns-sgc` — saga-graph-canvas **screen frame** (dominant canvas + docked properties sidebar). Reusable
+  canvas-forward shell for any node-graph route (Config topology at screen scale, a Trigger composite
+  builder, a Journey composition).
+- `ns-sgc__canvas` / `__grid` / `__edges` — dotted-grid **canvas stage** + a post-mount SVG **edge
+  layer** (measured geometry, no `{{ }}` holes). The reusable spatial-graph substrate.
+- `ns-sgc__node` — a state-tinted **graph-node card** (icon tile + name + live/pulsing state dot +
+  capability + timing/attempt; selected ring, current dashed ring, comp-lane warning rail).
+- `ns-sgc__switcher` / `__inst` — a slim horizontal **instance switcher strip** (replaces the fat left
+  rail). Reusable "which instance/run" top control.
+- `ns-sgc__toolbar` — a floating **canvas toolbar** (zoom / fit / ✦ assist), ref-21 bottom bar.
+- `ns-sgc__props` — the **properties sidebar / inspector** (instance summary ↔ node detail); folds to a
+  bottom sheet < 1024px. The reusable "click node → configure" surface.
+- `ns-sgc__trans` — directional in/out/compensation **transition rows**.
+- `ns-sgc__lane-tag` — floating **lane rails** ("forward path" / "⟲ compensation · rollback lane").
+- `ns-sgc__edge*` — JS-measured bezier **connectors** (forward / cross-edge / reverse rollback) with
+  floating branch labels + backing chips; active-edge copper recolor on node-select.
+
+### Refinements to existing components
+- Generic right sheet → now also the **Sagas node bottom sheet** on mobile (`sheetIsS8`); one dialog
+  serves S2/S7/S8/S13.
+- `ns-durabar` relocated into the page-header toolbar (the left rail is gone); contract unchanged.
+- `ns-sagahero` gauge / `ns-kv--split` / `ns-assist` recomposed **inside** the narrow properties
+  sidebar (summary mode), proving they compose in an inspector column, not just a wide hero band.
+- `measureEdges` pattern generalized into `measureSagaEdges` / `scheduleSagaEdges` — the
+  measured-connector approach is now a repeatable primitive.
+
+### New tokens
+- None. Dotted grid + node/edge tints are all `color-mix` over existing token families (theme-blind,
+  no raw hex).
+
+### New variants
+- `ns-sgc__node[data-lane='comp']`, `ns-sgc__edge[data-lane='comp'|'cross']`,
+  `ns-sgc__inst[data-state='selected']`, `ns-sgc__tool[data-variant='assist']`, properties
+  `mode: 'summary' | 'node'`.
+
+### New options / data-attributes
+- `ns-sgc__node[data-col][data-row][data-state][data-current][data-selected][data-lane]`,
+  `ns-sgc__inst-dot[data-tone]`, `ns-sgc__edge[data-lane][data-state]`,
+  `ns-sgc__trans-row[data-lane]`, `ns-sgc__lane-tag[data-lane]`. Saga node model gained
+  `col`/`lane`/`timing`/`attempt`/`payload`/`trans`/`action` + machine `crossFrom`/`crossEdge`.
+
+### Mobile optimizations
+- Canvas stacks to a single column < 640px (edge geometry suppressed, body never scrolls); comp nodes
+  keep the warning rail; lane tags hidden.
+- Node tap → dedicated bottom sheet (properties content).
+- Instance switcher strip scrolls horizontally; sidebar reflows full-width under the canvas; toolbar
+  stays pinned.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/00-BEFORE-density-sagas-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/00-BEFORE-density-sagas-desktop-light.png
new file mode 100644
index 000000000..1ab05a0bd
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/00-BEFORE-density-sagas-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-desktop-dark-full.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-desktop-dark-full.png
new file mode 100644
index 000000000..eeb312822
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-desktop-dark-full.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-desktop-light-full.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-desktop-light-full.png
new file mode 100644
index 000000000..7f3fcad4d
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-desktop-light-full.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-desktop-light-node-selected.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-desktop-light-node-selected.png
new file mode 100644
index 000000000..3b6c10230
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-desktop-light-node-selected.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-export-no-rollback.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-export-no-rollback.png
new file mode 100644
index 000000000..c1a7db999
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-export-no-rollback.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-mobile-light-sheet.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-mobile-light-sheet.png
new file mode 100644
index 000000000..64ead1d3c
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V4b-shots/sagas-mobile-light-sheet.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-fix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-fix.md
new file mode 100644
index 000000000..852adf0fd
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-fix.md
@@ -0,0 +1,73 @@
+# Pass V5-fix — Triggers (S9) — adversarial-gate fix pass
+
+Gate verdict fixed against: `visual/_evals/V5-triggers-adversarial-vision.md` — **55/100
+ACCEPT-WITH-FIXES** (Kimi K2.6 vision). The bespoke bones (category band, WHEN→DO rule builder,
+7-day schedule horizon, firing-history sparkline table, tabbed drawer) were kept; this pass
+rebuilds the five sections the gate correctly flagged as generic dashboard chrome.
+
+Scope: **visual + layout only.** No route/logic/data/copy-meaning changes. NS One identity held —
+`--ns-*` tokens only (zero raw hex), `ns-*` class contracts, warm-cream + `[data-theme='dark']`,
+copper/teal/amber, DM Sans / DM Mono, hard press shadow. Geometry is div/CSS (no SVG `{{ }}` holes).
+All new CSS appended to `render/assets/ns-ext.css` under the Pass V5 block.
+
+## The design question (per section)
+
+Each flagged section was re-asked *"what tailored component best showcases THIS part of the
+trigger feature?"* — not "apply a generic widget."
+
+| # | Gate hit | What shipped | Reference mined |
+|---|----------|--------------|-----------------|
+| 1 | Stats row = five grey number boxes | **Iconified metric strip** (`ns-tmetric`): each metric a type-glyph tile + value + a meaningful micro-viz — armed shield + armed/total meter, fires flame + 12-bucket copper sparkline + `↑ +6%` trend, DLQ alert + `↑ +3` trend, plus sub-labels. Denser, not five equal boxes. | `19-pm-dashboard` top summary-stats bar |
+| 2 | Firing-history table has no controls | **Inline query toolbar** (`ns-thquery`) above the table: quick-search (WIRED — filters rendered rows by trigger/action name), outcome-filter dropdown, show-limit (25/50/100), "+ Add JS filter" affordance, live result count. | `11-devconsole-a` records-table toolbar |
+| 3 | Dead-letters = two progress bars | **Compact dead-letter mini-table** (`ns-tdlt`): last 5 failed firings — id, queue tag (redis/memory), error snippet, age, source trigger, retry-count, inline Retry (↻) / Inspect (⇱) actions. One-line `redis 14 · memory 3` depth summary pill retained in the header; top-offender line kept in the footer. | `11-devconsole-a` record table |
+| 4 | Category band — Manual card a hollow void; loose padding | **Meaningful empty-state** for hollow categories: bars flatten to a dashed baseline + "NO FIRES · 24H", and the foot line reads `silenced · CLI-only` (or `armed · awaiting invoke`) instead of a bare "0 fires". Card header padding + gap tightened so all four cards are denser. Per-category sparkbars + click-to-filter kept. | (tightening; ref 19 project rows for the density target) |
+| 5 | Schedule next-fire cards = plain text | **Temporal treatment** (`ns-tnext`): each card gets a type-colored left bar (copper=cron/interval), a kind pill (CRON / INTERVAL / SCHEDULE), a **progress-to-next-fire bar** (elapsed vs interval), and the cadence label (`daily 02:00`, `every 30s`). 7-day day-strip left as-is. | `19-pm-dashboard` schedule blocks |
+
+## Left intact (gate under-credited — do-not-touch)
+
+- **WHEN → DO rule builder** — already reads event → condition → action; untouched.
+- **Detail drawer / mobile sheet** — Action-chain / Payload / Schedule tabs kept; the **Payload
+  tab renders formatted, indented JSON** (verified in the mobile-dark payload shot).
+
+## Data-model additions (feed the new components; presentational only)
+
+- `s9StatTiles` — added `glyph`, `spark`/`meter`/`meterTone`, `trend`/`trendDir`, `sparkTone`, `sub`.
+- `s9Cats` — added `hollow` flag + `emptyLabel` (state-aware foot line; no card is a void).
+- `s9NextFires` — added `progressPct`, `span`, `kindLabel` (from a declared-cadence lookup).
+- `s9DeadLetters` — new array of 5 failed firings with presentational `retryAction`/`inspect`.
+- Firing history — new `s9Query` / `s9Outcome` / `s9Limit` state; quick-search + outcome +
+  limit applied to `s9HistRaw`/`s9HistShown`; `s9HistCount` label. Quick-search is genuinely wired.
+
+## Verification
+
+- **Quick-search wired:** typing `cron` → 1 row (`cron.nightly-reconcile`); `poll` → 1 row;
+  clear → all 8 rows restored.
+- **Every Triggers variant:** zero `{{ }}` holes, zero console errors (page/pageerror), zero
+  horizontal overflow — desktop 1440 + mobile 390, light + dark, drawer, mobile sheet (chain +
+  payload), category-filter, sorted, and quick-search states.
+- **16-route regression:** clean — zero errors / zero holes / zero overflow on Home, Config,
+  Runtime, Catalog, Live Flow, Run Inspector, Plugins, Workers, Sagas, Triggers, Streams,
+  Migrations, DLQ, Auth, AI, Extensions. All new CSS is `ns-t*`-scoped; no shared-class edits, so
+  no leakage.
+- **Identity:** no raw hex in the new CSS; `--ns-*` tokens only; theme-blind `color-mix`.
+
+## Shots (overwritten in `render/_visual-reports/V5-triggers-shots/`)
+
+`triggers-desktop-{light,dark}.png`, `triggers-mobile-{light,dark}.png`,
+`triggers-desktop-light-drawer.png`, `triggers-desktop-light-sorted.png`,
+`triggers-desktop-dark-catfilter.png`, `triggers-desktop-light-search.png`,
+`triggers-mobile-light-sheet.png`, `triggers-mobile-dark-sheet-payload.png`,
+`triggers-mobile-dark-sheet-sched.png`. Prior `00-BEFORE-*` baselines retained for comparison.
+
+## Honest gaps
+
+- The **stat-strip glyphs** for ARMED (⛨ shield) and SILENCED (⊘ mute) render as slightly ambiguous
+  boxy marks in DM Sans; the meter/trend/label carry the meaning, so it reads, but a font with
+  richer glyph coverage (or an inline CSS mark) would be crisper.
+- **"+ Add JS filter"** and the dead-letter **Retry/Inspect** buttons are presentational (toast /
+  nav to DLQ) — no real JS-predicate editor or reprocess pipeline, matching the prototype's
+  complementary-satellite scope. Quick-search + outcome + limit filters are the ones actually wired.
+- The next-fire **progress fraction** is a declared-cadence lookup (presentational "how close"),
+  not a live clock — appropriate for a static prototype, but it does not tick.
+- Dead-letter rows are a fixed illustrative set (5 entries); they render cleanly but are not derived
+  from the live `s9Events` feed.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/00-BEFORE-triggers-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/00-BEFORE-triggers-desktop-light.png
new file mode 100644
index 000000000..c820dc93f
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/00-BEFORE-triggers-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-desktop-dark.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-desktop-dark.png
new file mode 100644
index 000000000..9a5342355
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-desktop-dark.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-desktop-light-drawer.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-desktop-light-drawer.png
new file mode 100644
index 000000000..c85f0d8e2
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-desktop-light-drawer.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-desktop-light.png
new file mode 100644
index 000000000..29591607d
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-mobile-light-sheet.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-mobile-light-sheet.png
new file mode 100644
index 000000000..df96f7c13
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers-shots/triggers-mobile-light-sheet.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers.md
new file mode 100644
index 000000000..142bbddd2
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V5-triggers.md
@@ -0,0 +1,109 @@
+# Pass V5 — Triggers (S9) bespoke redesign
+
+## The design question — answered first
+
+**"What tailored components, layout, composition, data-visualization, and data-structure best
+showcase TRIGGERS — event→action activation rules (schedules/cron, webhooks, event patterns,
+manual) that fire workers/sagas?"**
+
+A trigger is fundamentally a **rule**: *when* an event source fires, *do* an action. So the screen
+is composed as a **rules-and-firings console**, organised top-to-bottom by the three questions an
+operator actually asks:
+
+1. **How is the fleet classified & how healthy is each activation mechanism?** →
+   a bespoke **tinted category band** (schedule / webhook / event / manual) — each a composite
+   health card with an armed/total count, an aggregate firing sparkbar, and an armed/silenced state
+   pill. This is the header treatment, *not* four plain number cards. It also acts as a live filter.
+2. **What does this rule actually do?** → a **rule builder** (`WHEN <event> → DO <action>`) rendered
+   as a left-to-right typed flow strip with a condition chip on the connector and an **action-type
+   palette** below. Selecting any trigger repopulates the builder.
+3. **When does it fire next, and did the last firing succeed?** → a **schedule day-strip** with
+   next-fire countdowns (only time-driven triggers have a next fire), and a **dense sortable
+   firing-history table** (trigger · type · last fired · next fire · outcome · latency · 24h spark),
+   each row opening a **detail drawer → mobile bottom sheet** with Action-chain / Payload / Schedule
+   tabs.
+
+Data structure: one **category taxonomy** (`schedule`=cron/schedule/polling, `webhook`,
+`event`=file/kv/composite, `manual`) drives the tint, the WHEN node, the table classification, and
+the filter — so the whole screen is coherent from a single model. Everything is derived from the
+existing 8-trigger fleet; empty/idle rows (`manual.reindex`, 0 fires) render cleanly.
+
+Deliberately **different from its neighbours**: Sagas is a vertical node-**canvas** with
+forward/compensation lanes + a gauge; Workers is a runtime-mix **registry table** + poolmeter +
+drift. Triggers is a **horizontal rule-sentence builder + category-health band + schedule
+day-strip** — no shared body composition, only the shared console chrome (breadcrumb / stat strip /
+sortable table shell / detail sheet) for family consistency.
+
+## What I mined, and from which reference
+
+| Reference | Pattern taken | Where it landed |
+|---|---|---|
+| **21-flow-builder** | node-graph (Start → branch nodes with branch labels) + right properties panel + bottom **component palette** (Text/Image/Gallery/Button tiles) | The **rule builder**: WHEN node → dashed connector with an `if <condition>` chip → DO node, plus the **action-type palette** (publishSaga / enqueueJob / executeTask / executeBatch) with the wired action highlighted. Rebuilt **horizontal** (rule sentence) instead of Sagas' vertical branching, so the geometry reads different. |
+| **19-pm-dashboard** | schedule **day-strip** (Mo15 Tu16 We17… active day tinted) + timed event cards with a colored left-accent bar + status pills; the inline greeting stat pill | The **schedule strip**: next-7-day strip with discrete cron/schedule pips + a distinct continuous **poll band** per day (dotted teal), today tinted copper; and **next-fire countdown cards** with a left-accent bar (copper when imminent). Outcome **status pills** in the table. |
+| **11-devconsole-a** | dense sortable data table (sortable header arrows, mono) + right **detail DRAWER** ("Add JS filter" header + × + typed body + tabbed docs sub-panel Basics/Parameters/Functions/Examples) | The **firing-history table** (sortable headers, mono cells, 24h sparkline column) and the **per-trigger detail drawer** with inner tabs **Action chain / Payload / Schedule** (→ mobile bottom sheet). |
+| **13-devconsole-c** | breadcrumb (`Schema Registry > name`) + 4-tile stat strip (CURRENT VERSION / TOTAL VERSIONS / FORMAT / COMPATIBILITY) | Console **breadcrumb** (`Capabilities › Triggers`) + the **stat strip** (triggers / armed / silenced / fires·24h / DLQ depth). |
+
+## Bespoke components built (per section)
+
+- **`ns-tcat` category band** — 4 tinted composite cards (schedule=copper, webhook=teal,
+  event=amber, manual=muted); each carries a glyph tile, count, blurb, a 12-bucket aggregate firing
+  **sparkbar** (pure CSS `height:%`), and a foot row with an armed/silenced state pill + 24h fires.
+  Click = filter the table + set category focus. (Replaces the old airy bullet event feed as the
+  hero-adjacent classifier.)
+- **`ns-tbuild` rule builder** — `WHEN` node (tinted by category, source line, category tag) →
+  `ns-tbuild__wire` dashed connector carrying an `if <condition>` chip and a ▶ arrow → `DO` node
+  (tinted by action tone, target label, "open target →"). Below: `ns-tbuild__palette` action-type
+  tiles with the wired action highlighted. Fully responsive — flow rotates to vertical < 720px.
+- **`ns-tdaystrip` schedule strip** — 7 day tiles, discrete fire pips (02:00 copper / 07:00 muted) +
+  a continuous **poll band** for interval triggers; today tinted. `ns-tnext` countdown cards
+  (soonest-first, imminent = copper accent). Section hidden cleanly when no scheduled trigger armed.
+- **`ns-thist` firing-history table** — reuses `ns-contable` shell; adds sortable headers
+  (name/type/last/next/outcome/latency, JS sort with asc/desc arrow), `ns-tcatbadge` type badges,
+  `ns-trend` 24h sparklines (reuses the existing post-mount painter), an outcome status pill, a
+  latency mono cell, and an inline arm/disable switch. Disabled rows strike-through + dim. A
+  category filter pill in the toolbar clears the focus.
+- **`ns-tdrawer` detail sheet (`sheet:'s9'`)** — reuses the shared `ns-sheet-dialog` (right drawer
+  desktop → bottom sheet mobile). Category badge + outcome pill + a `when → do` rule summary +
+  KV facts (source/condition/last/next/fires/correlation) + **inner tabs** Action chain / Payload /
+  Schedule + Open-firing-run / Silence-trigger actions.
+- **`ns-tdlq` dead-letter mini-meter** + **`ns-tingress` webhook test** — the secondary strip; DLQ
+  depths as tiny fill meters (redis warning-toned), ingress verb+path chip over the payload editor.
+- **Stat strip** — reuses `ns-statstrip` for family consistency (same as Workers), sitting *under*
+  the bespoke category band which is the true header treatment.
+
+## Identity & constraints
+
+- NS One only: `--ns-*` tokens, `ns-*` classes, no raw hex. New category tints are `color-mix` over
+  `--ns-primary` (copper) / `--ns-success` (teal) / `--ns-warning` (amber) / `--ns-muted-fg`, driven
+  by a `[data-cat]` variable block — theme-blind, works in light + dark.
+- No SVG `{{ }}` holes. All geometry is div/CSS (`height:%` sparkbars, `width:%` meters,
+  `repeating-linear-gradient` connectors/poll bands). The 24h sparklines reuse the existing
+  post-mount `.ns-trend[data-series]` painter (empty SVG in markup, painted in JS).
+- Routes / logic / data / copy-meaning unchanged. The toggle confirm-dialogs, nav targets, webhook
+  test, and correlation links all preserved. New CSS appended to `render/assets/ns-ext.css` only.
+
+## Verification
+
+- **Base variants** (desktop 1440 @2x, mobile 390 @2x, light + dark): 0 `{{ }}` holes, 0 console
+  errors (one benign favicon 404), 0 horizontal overflow — all four.
+- **Interaction states** captured & clean: firing-row → detail drawer (desktop right), category
+  filter (Event → table + pill), latency sort, mobile bottom sheet, mobile schedule-tab sheet.
+- **Full-route regression** (all 16 nav routes at 1440): **0 console errors, 0 holes, 0 overflow**;
+  Workers + Sagas re-shot and unchanged. Shared-file edits broke nothing.
+
+## Shots
+`render/_visual-reports/V5-triggers-shots/`
+`00-BEFORE-triggers-*` (4) · `triggers-{desktop,mobile}-{light,dark}` (4) ·
+`triggers-desktop-light-drawer` · `triggers-desktop-dark-catfilter` ·
+`triggers-desktop-light-sorted` · `triggers-mobile-light-sheet` · `triggers-mobile-dark-sheet-sched`.
+
+## Honest gaps
+
+- The stat strip uses the shared plain `ns-statstrip` (like Workers) rather than a fully bespoke
+  treatment — intentional for family consistency, since the category band is the bespoke header, but
+  a stricter reading of "every section bespoke" could tint those tiles per meaning.
+- Category filter and the builder's selected-trigger are independent axes; filtering to a category
+  does not auto-switch the builder to a member of that category (selection persists). Deliberate, but
+  a first-time viewer might expect them coupled.
+- The schedule day-strip repeats the same daily fires across all 7 days (correct for daily crons)
+  and does not yet render weekly/monthly-only cadences differently beyond the poll band.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/00-BEFORE-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/00-BEFORE-desktop-light.png
new file mode 100644
index 000000000..7d0b9a8b8
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/00-BEFORE-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-consumers-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-consumers-desktop-light.png
new file mode 100644
index 000000000..1ce9165d8
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-consumers-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-desktop-dark.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-desktop-dark.png
new file mode 100644
index 000000000..b69c2c790
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-desktop-dark.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-desktop-light.png
new file mode 100644
index 000000000..4ac080dd4
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-mobile-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-mobile-light.png
new file mode 100644
index 000000000..d229a527a
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-mobile-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-throughput-hover-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-throughput-hover-light.png
new file mode 100644
index 000000000..ac1176d64
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams-shots/streams-throughput-hover-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams.md
new file mode 100644
index 000000000..493a17021
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V6-streams.md
@@ -0,0 +1,117 @@
+# Pass V6 — Streams (bespoke redesign)
+
+## The design question (answered first)
+
+> *What tailored components, layout, composition, data-visualization, and data-structure best
+> showcase STREAMS — durable event streams / topics with partitions, offsets, producers,
+> consumers, consumer-group lag, and live throughput — and how do they compose?*
+
+**Answer.** Streams is the only console whose subject is a *moving quantity over time across a
+partitioned log*. So the screen is organised as a **topic console** — the Kafka/Conduktor mental
+model — not a list→detail inspector like its neighbours. Top to bottom it composes as:
+
+1. **Topic header** = breadcrumb (`Capabilities › Streams › payment-events`) + a **streams-health
+   composite** stat strip that is stream-native, not four plain number cards: **throughput
+   (msgs/sec) with a live sparkline + backpressure state**, **total consumer-group lag with a lag
+   hotspot count**, **partitions (in-sync / total)**, **retention window**. Each tile carries a
+   micro-viz, not just a number.
+2. **Throughput hero** = a live **msgs/sec area chart** (JS-measured, post-mount — no SVG holes)
+   with a **hover crosshair + floating value readout** and an **OHLC-style footer** (peak / avg /
+   floor / published), plus a **backpressure indicator** rail. (Mined from `04-finance-cards` —
+   line + crosshair + value tooltip + Open/High/Low footer.)
+3. **Partition & offset table** = a dense, monospace **partition ledger** — partition, leader,
+   head offset, committed offset, **lag encoded as an inline heat-bar**, and the owning consumer
+   group. (Mined from `11/12-devconsole` record table: Timestamp/Offset/Partition/Key/Value with
+   sort chevrons — re-cast to partition rows.)
+4. **Consumer-group lag** = **group rows** with per-group members, assigned partitions, a **lag
+   gauge**, and status (`stable` / `rebalancing` / `lagging`). Not a health-band clone.
+5. **Partition × time lag heatmap** = a tinted-cell grid (partitions on rows, recent windows on
+   columns; cell tint = lag magnitude) — the stream-native "where is it backing up" view. (Mined
+   from `10-ref` user-retention heat-triangle — tinted intensity cells.)
+6. **Producer → consumer topology** = a compact 3-column flow (producers → `payment-events`
+   partitioned log → consumer groups) with delivery/lag edge labels. Div/CSS geometry, no canvas
+   clone of Sagas.
+7. **Live event tail** = a monospace, dense **record stream** (offset · partition · key · value ·
+   age) that appends live — the "Consume" tab of a topic console.
+8. **Tabbed stream detail drawer** (desktop right rail) → **mobile bottom sheet**: Records /
+   Config / Schema / Consumers, adapting `11`'s right drawer + `13`'s version-diff schema view.
+
+## What was mined, from which reference
+
+| Component built | Reference | What I took |
+|---|---|---|
+| Topic breadcrumb + tab row | `11/12-devconsole` | `Topics › name` breadcrumb + Consume/Produce/Config/Schema tab row → `Capabilities › Streams › payment-events` + Consume/Partitions/Consumers/Config tabs |
+| Streams-health stat strip | `11-devconsole` + `13-devconsole` | RECORDS/SIZE/PARTITIONS/REPLICATION strip → THROUGHPUT/LAG/PARTITIONS/RETENTION, each with a micro-viz |
+| Throughput hero + crosshair + OHLC footer | `04-finance-cards` | Stock-tracker line + crosshair + floating value tooltip + Open/High/Low footer |
+| Partition & offset ledger | `11/12-devconsole` | Dense sortable record table (Offset/Partition/Key/Value) re-cast to partition rows with inline lag heat-bar |
+| Partition × time lag heatmap | `10-ref` (Catalyst) | User-retention tinted-cell heat grid → partition/time lag intensity |
+| Consumer-group lag rows + gauge | `13-devconsole` stat tiles + `04` arc gauge | grouped rows with a radial lag gauge |
+| Producer→consumer topology | `21-flow-builder` (feel) | node→node flow, but div/CSS not a canvas clone |
+| Tabbed detail drawer / bottom sheet | `11-devconsole` drawer + `13` schema diff + `06-mobile-sheets` | right drawer docs-tabs → Records/Config/Schema/Consumers; schema tab uses line-numbered view |
+
+## What was there before (the gap)
+
+The old Streams screen was a **fan-out delivery inspector**: a 2-message list → a step-timeline of
+subscriber deliveries → a delivery feed, with a plain `<h1>Streams</h1>` header (no breadcrumb,
+unlike every neighbour) and ~50% dead space in the lower half. It had **no throughput, no
+partitions/offsets, no consumer-group lag, no live record tail, and no producer→consumer
+topology** — none of the things that actually make a stream a stream. See
+`00-BEFORE-desktop-light.png`.
+
+## What was built (every section bespoke)
+
+| Section | Bespoke component | Notes |
+|---|---|---|
+| Header | `ns-conbread` breadcrumb + live pulse + `ns-strhealth` composite strip | 4 tiles (throughput+sparkline / lag+backpressure / partition pips / retention) — NOT four plain number cards |
+| Tabs | `ns-contab` Consume / Partitions / Consumers / Config | deep-linked via `?tab=` |
+| Throughput hero | `ns-strhero` — JS-measured teal area chart + **hover crosshair + floating value tip** + peak/avg/floor/window OHLC footer + backpressure pill | `drawStreamsHero()`, post-mount, no SVG holes |
+| Topology | `ns-strtopo` — producers → partitioned-log node → consumer-group **fan bus** (div/CSS) | lag-tinted consumer edges; not a Sagas canvas clone |
+| Partition ledger | `ns-strledger` — Part/Leader/Head/Committed/**inline lag heat-bar**/Group | monospace, sortable-console feel; scrolls horizontally on mobile |
+| Lag heatmap | `ns-strheat` — 6 partitions × 8 windows, tint = lag magnitude + legend | on Consume + Partitions tabs |
+| Consumer groups | `ns-strgroup` — **radial lag gauge** + status + members/partitions/guarantee + lag bar | reuses shared `ns-gauge` conic-gradient |
+| Live tail | `ns-strtail` — offset·part·key·value·age, monospace, dense, live-pulse header | the "Consume" record stream |
+| Detail drawer | `ns-strdrawer` — message picker + fan-out delivery timeline + run/trace actions | right rail on desktop |
+| Config | `ns-strcfg` KV + `ns-strschema` **line-numbered Avro record schema** (ref 13) | fills the tab, adds the schema facet |
+
+## Data model
+
+Enriched the S10 model in-place (still the one topic `payment-events`, same 3 wired subscribers, same
+analytics-lags-and-fails story) with stream-native structure: 6 partitions with head/committed
+offsets, 3 consumer groups with lag + status, a 24-point throughput series (derived to read as a
+2-minute window), a 6×8 lag-intensity grid, a live record list, producers, and an Avro schema. No
+routes/logic/copy-meaning changed; the existing message/fan-out/feed data is preserved and now
+powers the detail drawer. All sections render from arrays, so empty/edge states collapse cleanly.
+
+## Verification
+
+- **Zero `{{ }}` holes, zero horizontal overflow, zero non-404 console errors** on Streams across
+  desktop 1440 + mobile 390 × light + dark (the lone 404 is a first-load favicon, present on the
+  BEFORE capture too).
+- **Full-route regression** (all 16 nav routes, desktop + mobile): 0 holes / 0 overflow / 0 non-404
+  errors everywhere — the shared-file changes (`drawStreamsHero()` + appended CSS) broke nothing;
+  Workers / Sagas / Triggers markup untouched.
+- `support.js`, `_ns_styles.css`, `_ds/*` untouched. Only `prototype.dc.html` +
+  `assets/ns-ext.css` changed. Tokens only — no raw hex.
+- Throughput hover crosshair verified interactive (`streams-throughput-hover-*.png`).
+
+## Self-assessment vs the Triggers / Sagas bar
+
+**Bespoke score: 9 / 10.** The screen is unmistakably a *topic console* and shares no signature
+component with its neighbours: not the Sagas node-canvas, not the Workers registry table, not the
+Triggers `ns-tmetric`/`ns-tdlt` firing console. Every section — header strip, hero, topology,
+ledger, heatmap, consumer gauges, live tail, drawer, schema — is a purpose-built stream component,
+and all four tabs carry substantial content (dead space killed by putting the heatmap on
+Partitions and the schema view on Config). The throughput crosshair and lag heatmap are new
+visualizations not present anywhere else in the product.
+
+**Honest gaps:**
+- The producer→consumer topology is a div/CSS **flow** (producers-and-log on top, consumers fanning
+  below) rather than a truly horizontal 3-column graph — it reads clearly as a flow but the log node
+  and consumer bus are not on the same horizontal line at desktop width. A measured-connector
+  (getBoundingClientRect) version like the Sagas edges would connect them exactly; deferred to keep
+  this pass div/CSS-only and avoid a second canvas system.
+- On the **Consumers** tab the left column (3 gauge cards) is a little shorter than the tall right
+  rail, leaving mild whitespace; Consume/Partitions/Config are well-balanced.
+- Throughput/heatmap/records are a static (data-driven) snapshot; they do not tick live like the
+  delivery feed does. Wiring them to the existing `tick()` sim would make the "live" pulse literal —
+  a natural follow-up, out of scope for a visual pass.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-fix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-fix.md
new file mode 100644
index 000000000..cf89d81a9
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-fix.md
@@ -0,0 +1,106 @@
+# Pass V7-fix — Config Resolution density remediation
+
+Adversarial vision gate scored the Config Resolution screen **68/100**
+(`visual/_evals/V7-config-adversarial-vision.md`): the precedence-waterfall metaphor and
+override-diff idea are genuinely bespoke, but a few sections spent real estate on generic chrome
+and dead-space placeholders. This pass fixes those four concrete hits **without rebuilding the
+parts that already work** (the numbered precedence rail, the namespace filter chips, the
+data-driven per-key adaptation, the winning-layer chips, the resolution-trail structure).
+
+Scope: **visual + layout only.** No route/logic/data/copy-meaning changes. All geometry is
+div/CSS; no SVG `{{ }}` holes. Every fix is data-driven — verified against the override-wins key
+(`flags.checkout-v2`) AND a package-wins/no-override key (`workers.reserve-inventory.retries`).
+
+## What changed, per gate item
+
+### 1 (TOP) — collapse non-contributing waterfall layers  ✅
+The gate's highest-value hit: in partial-resolution states, `— not set` / `passes through` layers
+rendered as **full-height padded rows** wasting ~30–45% of the waterfall's vertical space.
+
+- **JS** (`prototype.dc.html`, `cfgWater` map): each layer now carries `collapsed` (`true` when the
+  layer is silent — the value is not set at that layer) and a `pipNote` (`not set` / `passes
+  through`). `hasProv`/`hasEdge` are suppressed for collapsed layers.
+- **Markup** (desktop panel + mobile sheet waterfalls): a silent layer renders a slim
+  `.ns-cfgwater__pip` (`LAYER NAME — passes through`) instead of a `.ns-cfgwater__card`. The
+  contributing layers (winner + shadowed) keep their full card treatment untouched.
+- **CSS** (`ns-ext.css`, Pass V7-fix block): the pip is a one-line dashed marker; its rail ord
+  shrinks to a hollow dashed tick and the spine dot dims, so the eye reads "skipped" and the
+  contributing cards snap together across the gap.
+
+**Measured (desktop 1440, `workers.reserve-inventory.retries`, package wins → profile+override silent):**
+
+| | silent-layer row height | silent dead-space total | as % of waterfall | waterfall height |
+|---|---|---|---|---|
+| BEFORE | 47px × 2 | 94px | 29% | 320px |
+| AFTER  | 24px × 2 | 48px | 18% | 268px |
+
+→ **silent rows 49% shorter · silent dead-space cut 49% (94px→48px) · waterfall 16% shorter overall.**
+Each pip is ~33% the height of a contributing card. Override-wins state (1 silent layer, framework):
+silent 47px→24px, waterfall 346px→317px.
+
+### 2 — KPI header: denser cells + supporting micro-viz  ✅
+The four KPI cells were bare single-number boxes with oversized internal padding.
+
+- **JS** (`cfgHeadStats`): each stat carries a `viz` kind plus its data — `ticks`
+  (namespace-spread bars under KEYS RESOLVED), `pips` (one dot per active override under OVERRIDES
+  ACTIVE), `meter` + `meterPct` (shadowed/total meter under VALUES SHADOWED, with a new
+  "N of M contributions outranked" sub), and `rankPips` (precedence-position diamonds under
+  PROFILE, the active layer filled).
+- **Markup**: a `.ns-cfghero__cell-figure` row places the value beside its micro-viz.
+- **CSS**: cell padding reduced (`space-3 space-4` → `space-2-5 space-3-5`), value size stepped
+  down (`2xl`→`xl`), and the four micro-viz primitives styled with NS tokens
+  (`--ns-warning`/`--ns-success`/`--ns-primary`/`--ns-border-strong`). The precedence legend row
+  is unchanged.
+
+### 3 — override diff: framed side-by-side hunk  ✅
+Was a single changed line in a wide panel. Now a real diff viewer, shown ONLY when a runtime
+override wins (`cfgHasDiff` gate is unchanged).
+
+- **JS** (`cfgDiff`): a `hunk` marker (`@@ <key> @@`) plus **three lines per pane** — a context
+  line (`<ns>: {`), the changed value line (`del` on the shadowed side, `add` on the effective
+  side, with `// <unit>` inline comment and string values quoted), and a trailing context line
+  (`}`). Line numbers are contextual (14/15/16).
+- **Markup**: pane source headers gain a colored `− SHADOWED` / `+ EFFECTIVE` tag + the source
+  path; each pane renders the `@@` hunk header then its lines.
+- **CSS**: red/green pane tags, primary-tinted `@@` hunk bar, dimmed context lines; the existing
+  pink/green `del`/`add` backgrounds and `−`/`+` gutter markers (DM Mono) are reused.
+
+### 4 — effective-config table: tighter rows + type-colored values  ✅
+- **JS**: a `cfgValType(raw)` classifier (number→amber, string/enum→teal, boolean→copper) drives a
+  `valClass` on each table row's effective value, and is reused for waterfall + trail values.
+- **Markup**: the row value span uses `{{ r.valClass }}`.
+- **CSS**: `.ns-cfgval--num|str|bool|none` type colors (with a `[data-theme='dark']` step-up for
+  contrast); row padding reduced (`space-2-5`→`space-2`), value size `sm`→`2xs`, key size trimmed.
+  The namespace filter chips and winning-layer chips are left exactly as they were.
+
+## NS One identity
+`--ns-*` tokens only (no raw hex); `ns-*` / `ns-cfg*` classes; warm-cream + `[data-theme='dark']`;
+copper/teal/amber type palette from the DS scales (`--ns-copper-*`, `--ns-teal-*`, `--ns-amber-*`,
+precedent set by `.ns-sgc*`/`.ns-strlive*`); hard press shadow on the winner card retained; DM Sans
+/ DM Mono. CSS appended to `render/assets/ns-ext.css`. No changes to other screens' markup,
+`render/support.js`, `_ns_styles.css`, or `_ds/*`.
+
+## Verification
+- **Zero `{{ }}` holes · zero real console errors · zero horizontal overflow** across all 8 Config
+  variants (desktop/mobile × light/dark × override-wins/package-wins) and both mobile sheets.
+  (A single pre-existing benign 404 appears intermittently on a background fetch in both the BEFORE
+  baseline and AFTER; a clean page load has none — unrelated to this markup.)
+- **Full 16-route regression clean** at desktop 1440 + mobile 390: every nav route renders with
+  holes=0, hoverflow=0, no real console errors. No other screen was touched or regressed.
+
+## Shots (`render/_visual-reports/V7-config-shots/`)
+- `00-BEFORE-config-*` — prior baseline (kept for reference).
+- `after-config-{desktop,mobile}-{light,dark}-{override,package}.png` — the required matrix
+  (override-wins key shows the diff; package-wins key shows the collapsed not-set layers).
+- `after-config-mobile-{light,dark}-sheet-{override,package}.png` — the mobile detail sheet.
+
+## Honest gaps / notes
+- The gate also suggested (items 5/8, "variety leverage") converting the rail into a node-graph and
+  adding an inline `<textarea>` quick-override editor + docs accordion. **Deliberately not done** —
+  the brief explicitly says keep the waterfall metaphor (do NOT convert to a node-graph) and this is
+  a visual/layout pass, not a new-interaction pass. Adding an editable override input would change
+  behavior/scope.
+- The collapsed pip lands at ~33% of a contributing card (brief target ~40%); it reads cleanly at
+  24px with the uppercase mono label and maximizes the density win. Could be nudged to ~28px if a
+  touch more breathing room is wanted.
+- `.ns-cfgwater__silent` CSS rule was retired (silent layers now use `.ns-cfgwater__pip`).
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/00-BEFORE-config-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/00-BEFORE-config-desktop-light.png
new file mode 100644
index 000000000..9169ffb06
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/00-BEFORE-config-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-desktop-dark-override.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-desktop-dark-override.png
new file mode 100644
index 000000000..21f05edb7
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-desktop-dark-override.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-desktop-light-override.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-desktop-light-override.png
new file mode 100644
index 000000000..6ef3f6f6a
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-desktop-light-override.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-desktop-light-package.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-desktop-light-package.png
new file mode 100644
index 000000000..9dbee58fe
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-desktop-light-package.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-mobile-light-sheet-override.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-mobile-light-sheet-override.png
new file mode 100644
index 000000000..fe5d6dbde
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config-shots/after-config-mobile-light-sheet-override.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config.md
new file mode 100644
index 000000000..43cc669be
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V7-config.md
@@ -0,0 +1,104 @@
+# Pass V7 — Config Resolution (S2)
+
+## Design question — answered first
+**Q: What tailored components, layout, and visualization best showcase CONFIG RESOLUTION — how an
+effective value is resolved through LAYERED sources with precedence, where each key has a winning
+layer, shadowed values, and provenance, and how they compose?**
+
+**A: Model resolution as a vertical PRECEDENCE WATERFALL.** For a selected key the value cascades
+down four ordered layers — *framework default → package default → env · profile → runtime override* —
+and the **highest-precedence layer that sets the key WINS** (elevated with the NS hard press-shadow +
+a "wins" pill); every lower contribution is **shadowed** (struck through in destructive-red, card
+dimmed/dashed); silent layers render "— not set". Connector labels between layers name the operation
+("shadowed by" / "inherits" / "passes through"). Around that hero: an **effective-config ledger**
+(key → effective value → winning-layer chip → shadow count), an **override diff** (base value the
+override shadows vs. the runtime override, line-numbered red/green) that appears **only when the
+winner is a runtime override**, and a **resolution trail** listing every contributing layer with
+`source·line` provenance (shadowed ones struck). Resolution is **computed, not hand-authored** —
+`resolve()` picks the winner and derives shadow flags from each layer's contribution, so every
+edge/empty state (no override, multi-shadow, silent layers, package-echoes-framework) renders
+correctly and truthfully.
+
+This centers the screen on the **layered-precedence / resolution metaphor** that no other screen has,
+and is deliberately unlike the four capability consoles (see "Distinctness" below).
+
+## What I mined, and from which reference
+- **13-devconsole-c (Conduktor schema diff)** → the **override diff**: version chips per side
+  (`shadowed` layer → `override`), a `Schema ID`-style per-pane source label (`SHADOWED ·
+  netscript.config.ts:71` / `EFFECTIVE · override/current:v43`), and **side-by-side line-numbered
+  code with red/green diff** — `−`/red on the shadowed base line, `+`/green on the effective override
+  line. Also the top-of-screen **stat strip** idea (see header).
+- **11-devconsole-a (Kafka console)** → the **effective-config ledger**: breadcrumb-driven detail
+  (`Config > name`), a dense **KV table** with a monospace right-aligned value column and a quiet
+  uppercase column header row, and a **right detail drawer that becomes a mobile bottom sheet** — here
+  the per-key resolution panel (desktop) / bottom sheet (mobile).
+- **21-flow-builder (outamate)** → the **layered stack with labeled connectors**: a vertical cascade
+  where nodes connect along a spine and **branch/edge labels float on the connectors**. I took the
+  "value drops through a labeled vertical stack" feel but made it a strict *precedence cascade* (not a
+  free 2D graph) so it can't be confused with the Sagas canvas or Streams topology.
+- **19-pm-dashboard (Mondays)** → the **header composite** as ONE pressed slab split into
+  divider-separated cells (`icon-less big value + quiet label + sub`), not four separate number
+  cards — plus the status-pill-in-last-column table idiom (here the winning-layer chip).
+
+## Bespoke components built (all `--ns-*` tokens, `ns-*` classes, hard press shadow, DM Sans/Mono)
+| Section | Component | What makes it bespoke to resolution |
+|---|---|---|
+| Header | `ns-cfghero` — title + inline composite **stat slab** + ordered **precedence legend** | one slab, 4 cells (keys resolved / overrides active / values shadowed / profile) + a `precedence →` legend of numbered layer chips; not plain KPI cards |
+| Ledger | `ns-cfgtable` / `ns-cfgrow` | resolution ledger: key + ns eyebrow · effective value · **winning-layer chip** + override ◆ + shadow count; `ns-cfgnschip` namespace filter chips |
+| **HERO** | `ns-cfgwater` | **precedence waterfall**: numbered rail + spine, per-layer card with provenance, **winner elevated w/ `3px 3px 0` press shadow**, **shadowed values struck** in red, silent layers dashed, **connector labels** between layers |
+| Diff | `ns-cfgdiff` | ref-13 red/green line-numbered **override diff**, per-pane source label + layer chips; renders **only** when a runtime override shadows a base value |
+| Trail | `ns-cfgtrail` | provenance strip: every contributing layer w/ `glyph · layer · value · source·line`, shadowed struck, winning row tinted |
+| Atom | `ns-cfglayerchip` | one tone-driven layer token (ordinal badge + glyph + label) reused across header/ledger/diff/trail so the four layers read consistently everywhere |
+| Mobile | `ns-cfgwater--sheet` in the shared `#ns-sheet-dialog` | tap a key < 1080px → right drawer; ≤ 640px → **bottom sheet** with compact waterfall + actions |
+
+Tone plumbing: a single `[data-tone]` → `--cfg/--cfg-fg/--cfg-subtle/--cfg-border` custom-prop set keys
+every layer's colour (framework=muted, package=copper/primary, profile=teal/success,
+override=amber/warning), so the whole screen recolours from one place and stays theme-blind.
+
+## Distinctness vs. the capability consoles (no signature reuse)
+- Workers `ns-contable` (console table) / `ns-runtimemix` (stacked bar) — **not used**; the ledger is a
+  resolution table with a winning-layer column, not a registry console clone.
+- Sagas `ns-sgc` (state-machine canvas) — **not used**; the waterfall is a strict 1-D precedence
+  cascade, not a 2-D free graph.
+- Triggers `ns-tbuild` (when→do rule builder) — **not used**.
+- Streams `ns-strhero`/`ns-strtopo` (area chart + producer→log→consumer flow) — **not used**; no
+  throughput chart, no left-right topology.
+- No `ns-stackmap` node-canvas (the *old* Config screen) — fully replaced.
+
+## Data model
+New `s2ConfigDefs()` (9 real NetScript keys across flags/jobs/tasks/workers/streams/telemetry/
+triggers/database/sagas) + `s2LayerDefs()` (the 4 ordered layers). Each key declares the value it
+contributes at each layer (or `null` = silent); `resolve()` computes winner + shadow set. Coverage of
+edge cases proven in the shots: override-with-1-shadow (`flags.checkout-v2`), override-with-2-shadows
+(`tasks.send-receipt.timeoutMs`), **no override / package wins** (`workers.reserve-inventory.retries`,
+diff correctly hidden), profile-echoes-package, framework-echoes-package. Empty/edge states render
+cleanly.
+
+## Verification
+Harness: existing server `127.0.0.1:8899`, Chromium 1232, Playwright. Captures in
+`render/_visual-reports/V7-config-shots/`.
+- `00-BEFORE-config-*` — the replaced stackmap screen (4 variants).
+- `config-{desktop,mobile}×{light,dark}` — redesigned screen.
+- `config-state-key-package-wins` — no-override key (diff hidden, package wins).
+- `config-state-override-diff-dark` — 2-shadow override, dark.
+- `config-state-mobile-sheet{,-dark}` — mobile resolution **bottom sheet**.
+
+**Every variant: 0 `{{ }}` holes, 0 horizontal overflow, 0 console errors** (the lone intermittent
+`consoleErrors=1` is a cold-start static-resource 404 present identically in the BEFORE captures and
+gone on any settled load — confirmed via `requestfailed`/warm-nav probes; not from this change).
+Mobile h-overflow **fixed 20px → 0** vs. the old stackmap.
+Full-route regression: clicked all 16 nav items — every screen 0 holes / 0 overflow, siblings
+unchanged. `ns-cfgwater` rule confirmed loaded from `ns-ext.css`.
+
+## Honest gaps / follow-ups
+- The waterfall connector-label logic is heuristic (label chosen from present/shadowed/winner
+  relationship). It reads correctly for all 9 seeded keys but a future key with an unusual
+  silent-then-present pattern could produce a slightly loose label; worth a small truth-table pass if
+  more keys are added.
+- The override diff is single-line per side (value-level), which is right for scalar config; a nested
+  object override would want a multi-line diff — deferred until such data exists.
+- Desktop leaves some whitespace below the left ledger when the right resolution stack is taller (key
+  with a diff). Acceptable — the ledger is naturally shorter — but a future pass could float a compact
+  "layer coverage" mini-viz there to fully kill the gap.
+- Tablet band (641–1079px) uses the right-drawer sheet rather than a two-column inline; intentional,
+  but a dedicated 2-col-at-960 layout could be added later.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-fix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-fix.md
new file mode 100644
index 000000000..eea400908
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-fix.md
@@ -0,0 +1,89 @@
+# Pass V8-fix — Migrations density tighten
+
+Scoped follow-up to the V8 Migrations redesign. The adversarial vision gate scored the redesign
+**62/100** — mostly harsh (many of its asks were declined as gold-plating or data-invention), but it
+landed **one legitimate density hit**: the hero **version-chain nodes were under-filled** and the
+**header stat tiles were plain number boxes**. This pass tightens exactly those, plus the two
+"if quick" density wins (slim HEAD marker, compact drift cards, mobile sheet metadata). No route,
+logic, data, or copy-meaning changes; no other screen touched. VISUAL + LAYOUT only.
+
+## What changed (the valid density hits only)
+
+### 1. Version-chain nodes (`ns-mignode`) — compacted + earn their height with real metadata
+- **Internal padding cut ~35%**: card padding `2.5/3 → 2/2.5` (`--ns-space-*`), inter-row gap
+  `space-1-5 → 3px`, node bottom padding `space-3 → space-2`, dot size/offset trimmed.
+- **Added an inline mono chip row** carrying real per-migration data already in `s11Rows` (no
+  invention): `◫ N objs` (from `tables.length`), `≡ <rows>` (rows-affected), `◷ <duration>`, with the
+  applied-at timestamp right-aligned. Pending nodes show `~est.`/`est ~` framings. Chips are tinted
+  copper on pending nodes, neutral on applied. The previously-empty right half of each node is now
+  filled with data instead of whitespace.
+- Kept: the teal spine, applied/pending status glyphs + dots, the selected-row press shadow, the
+  dashed-copper pending queue styling.
+
+### 2. Header composite (`ns-mighead`) — denser, each tile gets a supporting micro-viz
+- Head padding reduced (`space-4/5 → space-3/4`), lead column narrowed, tile padding trimmed and
+  content top-aligned. Big `text-2xl` number shrunk to `text-xl`.
+- **Each tile now carries a light micro-viz** (all derived from existing data):
+  - **APPLIED** → `N of <total>` + a teal **ratio meter bar** (`applied/total` %).
+  - **PENDING** → `N queued` + one **copper pip per pending** migration.
+  - **DRIFT** → `N drifted` + an **n-of-8 pip row** (teal = in-sync object, amber = drifted),
+    reading straight off the gauge's `syncedN`/`trackedN`.
+  - **LAST APPLIED** → title + a **relative-time hint** (`7d ago` / `today`) computed from the
+    applied date against the app's own "now" anchor (`2026-07-13 14:02`, the timestamp `runMigrate`
+    already stamps), next to the absolute timestamp.
+- Kept: the `v3 → v4` version glyphs and the "1 behind" / "up to date" pill.
+
+### 3. Quick wins
+- **HEAD/drift divider (`ns-mighead-marker`)** is now a **slim one-line marker** — mono uppercase
+  `LIVE DB · HEAD v3` + inline note, on a thin tinted strip with a 2px copper/teal left accent.
+  Height dropped **52px → 23px**. No more big dashed ghost box (satisfies doctrine rule 4:
+  "no orphaned ghost rows").
+- **Drifted-object cards (`ns-driftrow`)** tightened: padding halved, the `has → wants` delta and the
+  status note (`type mismatch` / `not created`) now share one compact row (note pulled inline-right)
+  instead of an airy 3-line block.
+- **Mobile bottom sheet metadata** kept as a **3-across grid (Applied / Duration / Rows)** at 390px
+  (previously collapsed to a 1-column stack at ≤560px), padding tightened, so the Summary/DDL
+  segmented tabs and the Summary body sit **above the fold** on a standard phone.
+
+## Before / after measurements (desktop 1440, DPR 2)
+| Element | Before | After |
+|---|---|---|
+| Version-chain node — card height | 87px | **81px** |
+| Version-chain node — full node (incl. rail) | 99px | **89px** |
+| Per-node metadata surfaced | `at · dur` only (2 fields) | **objs + rows + duration + applied-at (4 fields)** |
+| HEAD/drift divider height | 52px | **23px** |
+| Header composite height | 112px | **104px** |
+
+Note: the desktop node shrank modestly (87→81) because the added chip row offsets part of the padding
+cut — but that is the point of the doctrine's "compact nodes" rule: the node now **earns** its height
+with real data (4 metadata fields) rather than padding. On mobile the chips wrap, so node height rises
+(87→110) but every pixel now carries information; on a scrolling phone that is the correct trade.
+
+## Verification
+- **Zero `{{ }}` placeholders**, **zero console errors** (the one 404 is a pre-existing asset miss,
+  present in the baseline), **zero horizontal overflow** on all 8 core variants
+  (desktop/mobile × light/dark × default/detail-drawer).
+- **Data-driven both ways:** applied-and-pending (drift, 2 amber pips, copper queue) AND the in-sync
+  applied-only state (`4 of 4`, full teal bar, all 8 teal pips, teal HEAD marker, "chain fully
+  applied / no drift") both render cleanly — confirmed by applying the pending migration at runtime.
+- **Full 16-route regression clean**: 32 route-visits (16 routes × light + dark) — zero braces, zero
+  h-overflow, zero console errors. Shared-CSS edits broke nothing.
+
+## Declined (per brief — gold-plating or would invent data)
+- No inline per-row DDL diff expanders in the ledger (dense table + detail drawer already cover it).
+- No tabbed docs accordion for the pending "what will change" list.
+- No full code-editor chrome (file tabs / line numbers) on the DDL diff — it stays a secondary
+  drawer tab (left untouched).
+- No author avatars and no pre-flight-step pipeline — there is no such data; inventing it is forbidden.
+
+## Shots (`V8-migrations-shots/`)
+`00-BEFORE-*` = pre-fix baseline. Post-fix: `V8-desktop-{light,dark}.png`,
+`V8-mobile-{light,dark}.png`, `V8-desktop-light-selected.png`, `V8-desktop-dark-drawer.png`,
+`V8-desktop-light-drawer.png` + `-ddl.png`, `V8-desktop-light-drift.png`,
+`V8-desktop-light-insync.png`, `V8-mobile-{light,dark}-sheet.png`.
+
+## Files
+- `render/prototype.dc.html` — S11 markup (node chip rows, header tile micro-viz, slim marker) +
+  `nodeOf`/`s11Head` data model (chip fields, ratio %, pip arrays, relative-time).
+- `render/assets/ns-ext.css` — S11 block only (`ns-mignode*`, `ns-mighead*`, `ns-migstat*`,
+  `ns-migpip`, `ns-mighead-marker*`, `ns-driftrow*`, `ns-migsheet__stat*`, responsive).
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/00-BEFORE-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/00-BEFORE-desktop-light.png
new file mode 100644
index 000000000..61dce1a8a
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/00-BEFORE-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-desktop-dark.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-desktop-dark.png
new file mode 100644
index 000000000..393f7efe0
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-desktop-dark.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-desktop-light-drawer-ddl.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-desktop-light-drawer-ddl.png
new file mode 100644
index 000000000..7f6c897e5
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-desktop-light-drawer-ddl.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-desktop-light.png
new file mode 100644
index 000000000..6586e556f
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-mobile-light-sheet.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-mobile-light-sheet.png
new file mode 100644
index 000000000..ac7e13baf
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations-shots/V8-mobile-light-sheet.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations.md
new file mode 100644
index 000000000..68b352f30
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V8-migrations.md
@@ -0,0 +1,85 @@
+# Pass V8 — Migrations (S11) visual redesign
+
+## The design question (answered first)
+*"What tailored components, layout, and visualization best showcase MIGRATIONS — an ordered
+chain of DB schema migrations (applied → pending), each with version / timestamp / duration /
+status / DDL, plus schema DRIFT (live DB vs what the chain expects) — and how do they compose?"*
+
+**Answer:** A **migration version-chain timeline** is the signature. A vertical spine renders the
+applied history as completed teal nodes (v1→v2→v3, each a timed-event card: version glyph + name +
+timestamp + duration + status), then a **"LIVE DB · HEAD" drift marker** (a ringed diamond on the
+spine marking where the live DB actually sits), then a **QUEUED** section of dashed copper pending
+nodes below. Composed around it: a **drift arc gauge** (teal↔amber half-ring, "N drifted / M in
+sync") with drifted-object delta rows; a tailored **header composite** (schema HEAD `v3 → v4` +
+1-behind pill + a 4-tile stat strip, not four plain number cards); a dense **ledger table**
+(version / name / applied-at / duration / rows / status) whose rows open a **detail drawer**
+(right on desktop, bottom sheet on mobile) with a Summary tab and the **DDL diff as a secondary
+tab** — the diff is deliberately demoted, per brief. A **pending-apply card** carries the
+"what will change" preview + `netscript db migrate` CLI. The screen reads as a migration control
+plane at a glance: applied history → where the DB is → what's queued → the drift it causes.
+
+## What was mined, from which reference
+- **19-pm-dashboard** — the schedule day-strip + timed-event cards (colored left rail + glyph +
+  title + time range + status pill) → became the **migration timeline nodes**: each migration is a
+  card hung on a rail with a status dot, version glyph, timestamp + duration, and a status badge.
+- **11-devconsole-a** — breadcrumb + compact stat strip (RECORDS/SIZE/PARTITIONS) + dense sortable
+  table + **right detail drawer with its own docs tabs** → the **header stat strip**, the
+  **migration ledger**, and the **detail drawer** (Summary / DDL-diff tabs) that becomes a mobile
+  bottom sheet via the shared `ns-sheet-dialog`.
+- **13-devconsole-c** — CURRENT VERSION / TOTAL VERSIONS / FORMAT / COMPATIBILITY label-over-value
+  tiles + version dropdowns + line-numbered red/green schema diff → the **header composite tiles**
+  and the **DDL-diff secondary tab** (line-op diff, NOT the centerpiece — Config Resolution already
+  owns the diff-as-hero pattern).
+- **04-finance-cards** — the Spending Summary **arc gauge** (180° half-ring, segmented fill, big
+  centered value, legend row below) → the **drift arc gauge**: teal synced portion + amber drifted
+  slice, "N drifted · M of T objects in sync", with drifted-object rows beneath.
+
+## Bespoke components built (per section)
+| Section | Component | Reference DNA |
+|---|---|---|
+| Header | `ns-mighead` composite: HEAD `v3→v4` version glyphs + 1-behind pill + 4-tile stat strip (applied/pending/drift/last-applied) | 13 stat strip + version chain |
+| Signature | `ns-migchain` **version-chain timeline**: applied spine → `ns-mighead-marker` (live-DB ringed-diamond HEAD/drift divider) → `ns-migchain__queue` pending nodes | 19 timed-event cards on a rail |
+| Timeline node | `ns-mignode`: rail + status dot (filled teal / hollow copper) + card (version glyph, title, name, timestamp·duration, status badge), selectable | 19 event card |
+| Drift | `ns-migdrift` + `ns-arcgauge` (pure-CSS conic half-ring, teal↔amber) + `ns-driftrow` (kind tag + obj + strike-through has→wants delta + note) | 04 arc gauge |
+| Ledger | `ns-migledger` dense table (ver / migration / applied-at / duration / rows / status), row-select → drawer | 11 dense table |
+| Pending | `ns-migapply` action card: "what will change" +/~ preview + CLI + apply/details | 06 action sheet feel |
+| Detail | `ns-migdetail` rail (desktop) + `sheetIsS11` drawer/bottom-sheet with Summary / DDL-diff segmented tabs | 11 drawer + 13 diff |
+
+## Data-driven states verified (all clean: 0 holes / 0 console errors / 0 h-overflow)
+- **pending + drift** (default): copper queue node, amber gauge (2 drifted / 6-of-8), drift rows,
+  apply card, "1 behind".
+- **in-sync** (after Run migrate): all-teal spine, teal HEAD marker "matches the chain", full-teal
+  gauge "in sync · 8 of 8", "✓ chain fully applied — nothing queued", apply card + drift rows gone,
+  header shows HEAD `v4` / "up to date" / pending 0.
+- Both light + dark; desktop 1440 + mobile 390. Dark-mode version-glyph contrast fixed (copper/teal
+  glyphs get lightened fg + stronger border under `[data-theme='dark']`).
+
+## Interaction states captured
+`V8-desktop-light-selected` (timeline node selected), `V8-desktop-light-drawer` (detail drawer,
+Summary), `V8-desktop-light-drawer-ddl` (DDL-diff tab), `V8-mobile-light-sheet` (mobile bottom
+sheet), `V8-desktop-light-insync` (in-sync data state).
+
+## Distinct from siblings
+- NOT the Config Resolution **precedence-waterfall** (that's a numbered-ordinal collapsing spine
+  with wins/shadowed pills); this is a chronological version chain with a live-DB HEAD marker.
+- NOT the capability-console **table + node-canvas**; the ledger is a supporting element, the hero
+  is the timeline.
+- The diff is a **secondary drawer tab**, never the centerpiece (brief's cardinal constraint).
+
+## Honest gaps / follow-ups
+- Timeline nodes are chronological but not horizontally branched (no parallel-branch migrations —
+  the domain data is linear, so a single spine is correct; a fork visualization would be
+  speculative).
+- The arc gauge's drifted-object count (`trackedObjs = 8`) is a reasonable derived constant, not a
+  live schema-object census; if real object counts land in the data model, wire the denominator to
+  it.
+- Rows-affected for the pending migration is an estimate (`~est. 12.4k`) — clearly labelled as an
+  estimate; a real dry-run count would replace it.
+- No sort affordance is wired on the ledger headers yet (visual hint only); selection + drawer is
+  the primary interaction this pass.
+
+## Scope integrity
+Routes / logic / data-flow / copy meaning unchanged. Enrichment (version, duration, rows, DDL,
+drift objects) is visual metadata implied by the domain; existing names / timestamps / statuses /
+the `runMigrate` confirm flow and CLI are untouched. All CSS appended to `render/assets/ns-ext.css`
+(loads last). No edits to `support.js`, `_ns_styles.css`, `_ds/*`, or other screens' markup.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/00-BEFORE-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/00-BEFORE-desktop-light.png
new file mode 100644
index 000000000..9636374de
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/00-BEFORE-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-dark.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-dark.png
new file mode 100644
index 000000000..389b8c455
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-dark.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-light-cluster-filter-bulk.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-light-cluster-filter-bulk.png
new file mode 100644
index 000000000..279bb792d
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-light-cluster-filter-bulk.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-light-inspector.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-light-inspector.png
new file mode 100644
index 000000000..92ce08fe9
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-light-inspector.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-light.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-light.png
new file mode 100644
index 000000000..4fca142c2
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-desktop-light.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-mobile-light-sheet.png b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-mobile-light-sheet.png
new file mode 100644
index 000000000..791108128
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq-shots/dlq-mobile-light-sheet.png differ
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq.md
new file mode 100644
index 000000000..126262e55
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/V9-dlq.md
@@ -0,0 +1,108 @@
+# Pass V9 — Dead-Letter Queues (S12) — operational triage console
+
+## The design question (answered first)
+
+> *"What tailored components, layout, and visualization best showcase DEAD-LETTER
+> QUEUES — failed messages parked across queues (redis/postgres/memory), each with a
+> payload, an error/failure reason, a retry history, and a source (which
+> trigger/worker/saga produced it), needing operational TRIAGE — and how do they
+> compose?"*
+
+**Answer:** an **operational triage console** whose signature is **clustering failures by
+error signature** rather than showing a flat list. The screen composes, top-to-bottom:
+
+1. **Triage strip** — a composite metric header (total parked with a *by-queue split
+   micro-bar* that sums to the total; distinct-signature count as a click-to-clear
+   button; oldest-parked age; retry-exhausted count as filled/empty pips; a 2h
+   dead-arrival red sparkbar). No plain number cards — every tile carries a glyph +
+   value + a supporting micro-viz + a contextual sub-label.
+2. **Error-signature clusters** (the hero / signature) — failed messages grouped by
+   signature (`E_CONN sink unreachable ×3`, `E_TIMEOUT handler timeout ×2`, …). Each
+   cluster row shows a severity glyph, the signature + human message, an ×count, the
+   affected-source chips, an 8-window sparkbar of *when* they died, the age range, and a
+   per-cluster **Retry all / Purge** affordance. Clicking a cluster filters the table.
+3. **Failed-message triage table** — dense grid: select, mono message id, source
+   (trigger/worker/saga) with a kind glyph, signature badge, **retry pips + n/max**, age,
+   inline **Inspect →**. A sticky **bulk-action bar** (count + CLI hint + Open-run + Purge
+   + Reprocess-selected, gated) sits at the foot.
+4. **Message inspector** — a right **drawer** on desktop (→ **bottom sheet** on mobile via
+   the shared `ns-sheet-dialog`) with the signature + reason hero, a KV panel
+   (source/queue/retries/parked/correlation), the **payload JSON**, a **retry-history
+   step-timeline** (attempt 1→n with timestamps + outcomes), and gated
+   Reprocess/Purge/Open-run actions.
+5. **Queue-health overview** (right rail) — per-backend cards: depth number + a
+   **depth-vs-capacity fill meter** + a **12-window depth-trend sparkbar** + oldest-age +
+   a severity pill (clear/low/elevated/critical). Click a non-empty queue to filter.
+6. **All-clear state** + **filtered-empty state** both render cleanly (fully data-driven);
+   the **Trigger DLQ** scope (a single message) proves the layout holds with sparse data.
+
+## What was mined, and from which reference
+
+- **04-finance-cards** — the Spending-Summary **arc gauge with a two-tone fill + a "limit"
+  caption** → adapted into the **queue-health depth-vs-capacity fill meter** (horizontal
+  div meter + `cap N · pct%` caption + severity pill). Deliberately *horizontal fill
+  meters*, not an arc, so DLQ is visually distinct from the Migrations arc gauge. The
+  line-chart-with-value grammar → the depth-trend + cluster-death **sparkbars**.
+- **19-pm-dashboard (Mondays)** — the compact single-row **stat strip** ("12hrs · 24 · 7")
+  → the **triage strip**; and the **Status-column pills** in the projects table → the
+  per-row **signature badges** + **retry pips** in the triage table.
+- **11-devconsole-a (Conduktor)** — breadcrumb + **dense monospace table** + a **right
+  detail/filter drawer with its own sections** → the failed-message table + the **message
+  inspector drawer** (KV + payload + tabbed-feel sections), reusing the shared
+  `ns-sheet-dialog` that auto-switches right-drawer ↔ bottom-sheet.
+- **Cross-pollination (new pattern this screen invents):** the **error-signature cluster
+  list** — a grouped-failure component with per-cluster bulk affordances and an inline
+  death sparkbar — is not present on any prior screen; it is the DLQ signature.
+
+## Bespoke components (per section)
+
+| Section | Bespoke component (class) | What makes it tailored |
+|---|---|---|
+| Header | `ns-dlqhead` + `ns-conbread` | breadcrumb + title + scope segmented |
+| Triage strip | `ns-dlqstrip` / `ns-dlqstat` | accent-bar tiles; `ns-dlqsplit` by-queue micro-bar; `ns-dlqpips` exhausted pips; `ns-spark` red arrival strip |
+| Clusters (hero) | `ns-dlqcluster(list)` | grouped-by-signature rows; glyph + ×count + source chips + death sparkbar + age range + Retry-all/Purge |
+| Triage table | `ns-dlqtable` / `ns-dlqrow` | dense grid; kind glyph; `ns-dlqsig` badge; `ns-dlqpips` retry pips; exhausted left-rail; inline inspect |
+| Bulk bar | `ns-dlqbulk` | select-count + CLI hint + gated Purge/Reprocess |
+| Queue health | `ns-dlqfleet` / `ns-dlqqueue` | depth + `ns-dlqmeter` fill + trend sparkbar + oldest age + severity pill; click-to-filter |
+| Inspector | `sheetIsS12` / `ns-dlqinsp` | payload JSON + retry-history step-timeline + KV + gated actions; drawer→sheet |
+| Empty/clear | `ns-dlqclear` + filtered-empty row | all-clear card + "no match" row |
+
+## Verification
+
+- **Zero `{{ }}` holes, zero console errors, zero horizontal overflow** on every variant
+  (desktop 1440 + mobile 390, light + dark) and every interaction state. The lone
+  first-load favicon 404 is pre-existing (present in `00-BEFORE-*`) and unrelated.
+- **Full-route regression** across all 16 nav screens: holes=0, hOverflow=0 everywhere;
+  other screens' markup untouched (only `render/prototype.dc.html` S12 block +
+  `render/assets/ns-ext.css` appended).
+- Data-driven both ways: **Queue DLQ** (7 messages, 4 signatures, 3 backends) and
+  **Trigger DLQ** (1 message, 1 signature, 1 backend) both render cleanly.
+
+## Shots (`render/_visual-reports/V9-dlq-shots/`)
+
+`00-BEFORE-*` ×4 · `dlq-{desktop,mobile}-{light,dark}` ×4 · `dlq-desktop-{light,dark}-inspector`
+· `dlq-mobile-{light,dark}-sheet` · `dlq-desktop-light-cluster-filter-bulk` ·
+`dlq-desktop-light-trigger`.
+
+## Self-assessed scores (vs the Streams / Migrations bar)
+
+- **Bespoke: 9/10** — the error-signature cluster list is a genuinely new component;
+  fill-meters + sparkbars are distinct from the Migrations arc gauge and the Streams
+  throughput console; the inspector reuses the shared drawer but with DLQ-specific
+  payload + retry-history content.
+- **Density: 9/10** — no plain number cards (composite tiles w/ micro-viz), dense grid
+  table with inline pips + badges + kind glyphs, compact cluster rows earning height with
+  real metadata, slim fill meters. No orphaned ghost rows; sparse Trigger scope still
+  holds.
+
+## Honest gaps
+
+- The right rail (`Queue health` + `How triage works`) is shorter than the main column,
+  leaving some bottom whitespace on desktop when many messages are parked; acceptable and
+  the "how triage works" earns its area, but a denser rail (e.g. a top-sources mini-list)
+  could fill it in a future pass.
+- Clusters are expand-to-filter (table-driven) rather than in-place expandable member
+  lists; filtering the table is the chosen affordance and reads clearly, but an optional
+  inline member peek could be added.
+- Actions are presentational (askConfirm → toast), matching the prototype's
+  complementary-satellite doctrine (no real reprocess/purge execution).
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/auth-sessions-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/auth-sessions-refix.md
new file mode 100644
index 000000000..a4e508b07
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/auth-sessions-refix.md
@@ -0,0 +1,33 @@
+# Auth Sessions — component rethink
+
+## Design question
+
+What components make principal identity, session expiry, and granted authority scannable without
+inventing a security score?
+
+Auth Sessions is an identity roster ordered against a temporal expiry horizon. Selecting a
+principal reveals exact provider/device/location facts, granted scopes, lifecycle events, and one
+real elapsed-versus-remaining TTL proportion.
+
+## Anchor references
+
+- `07-chat-signin.png`: identity-first account treatment and restrained provider facts.
+- `05-timeoff-workhour-cards.png`: time-remaining analysis and ordered temporal records.
+
+## Component decisions
+
+- Reduced the header to active-session facts plus the real expiry horizon; removed elevated/MFA
+  score meters and the multicolor status channel.
+- Rebuilt the roster as contiguous selectable records with initials avatars and squarish DM Mono
+  provider/scope labels.
+- Removed per-status colored borders, icon badges, and rainbow TTL styling; expiry position carries
+  urgency.
+- Kept one selected-session TTL lifespan with hatched elapsed time, a now marker, and copper
+  remaining time.
+- Flattened the detail pane to one Card with internal definition-list and lifecycle hairlines.
+
+## Self-verification
+
+Playwright CLI captured main, alternate selected session, dark, and 390px mobile states in
+`auth-sessions-refix-shots/`. Zero rendered holes, console errors, and horizontal overflow were
+found.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/catalog-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/catalog-refix.md
new file mode 100644
index 000000000..ac25025bf
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/catalog-refix.md
@@ -0,0 +1,38 @@
+# Catalog — component rethink
+
+## Design question
+
+What tailored components, layout, composition, data-visualization, and data-structure best showcase
+the Catalog — a browsable registry of callable contracts — and how do they compose together?
+
+Catalog is a contract workbench, not a KPI dashboard. It combines a compact fact rail, a contiguous
+grouped registry, and a persistent signature/schema inspector. Coverage and transport reach are
+categorical contract facts, so the old meter language is absent. Selection is the interaction that
+connects the registry to the inspector.
+
+## Anchor references
+
+- `11-devconsole-a.png`: dense browse surface, compact filtering, and persistent side inspector.
+- `13-devconsole-c.png`: schema-first hierarchy, line-numbered code region, and quiet metadata rail.
+
+## Component decisions
+
+- Composed the summary and inspector from real `ns-card` surfaces: flat `--ns-card`,
+  `--ns-shadow-xs`, and internal hairline rules.
+- Rebuilt the registry as an `ns-data-table`-style contiguous record list instead of bordered cards.
+- Kept procedure method, coverage, and REST/RPC/SDK support as squarish DM Mono facts; no faux
+  progress or colored outer rails.
+- Made the schema/signature pane the single copper-accent signature and kept all other structure
+  neutral.
+- Removed decorative search/external-link glyphs and rounded body-text pills.
+
+## Self-verification
+
+Playwright CLI captured main, selected-record, dark, and 390px mobile states in
+`catalog-refix-shots/`. The rendered Catalog has zero `{{ }}` holes, zero console errors, zero
+document/screen horizontal overflow, and a working click-selected detail state.
+
+## Honest gap
+
+At 390px the persistent desktop inspector intentionally becomes the existing selection sheet; the
+main mobile screenshot therefore prioritizes the registry and its filters.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/config-resolution-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/config-resolution-refix.md
new file mode 100644
index 000000000..89daf2c46
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/config-resolution-refix.md
@@ -0,0 +1,31 @@
+# Config Resolution — component rethink
+
+## Design question
+
+What tailored components best explain how one effective configuration value is chosen from layered
+sources?
+
+The screen is a precedence workbench: a dense key ledger drives a selected-key resolution panel,
+whose ordered cascade makes the winning source and shadowed sources explicit.
+
+## Anchor references
+
+- `13-devconsole-c.png`: master/detail workbench and factual diff/code hierarchy.
+- `21-flow-builder.webp`: connected decision path with a selected properties surface.
+
+## Component decisions
+
+- Replaced the decorated KPI slab with one flat fact rail and internal hairlines.
+- Preserved the ordered precedence sequence because order is the domain; removed ornamental
+  micro-meters and glyphs.
+- Flattened effective keys into contiguous selectable records and made the selected row the only
+  copper cue.
+- Kept the vertical resolution cascade as the signature, with shadowed layers neutral and the real
+  winner using the NS button-like hard offset.
+- Converted override and layer state to squarish DM Mono labels and neutralized type-color accents.
+
+## Self-verification
+
+Playwright CLI captured main, alternate selected key, dark, and 390px mobile states in
+`config-resolution-refix-shots/`. The screen has zero rendered template holes, console errors, or
+horizontal overflow.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/dead-letter-queues-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/dead-letter-queues-refix.md
new file mode 100644
index 000000000..a9fee6b53
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/dead-letter-queues-refix.md
@@ -0,0 +1,31 @@
+# Dead-Letter Queues — component rethink
+
+## Design question
+
+What components best support fixing a failure mode before acting on individual dead-lettered
+messages?
+
+The screen is an incident triage board. Error-signature clusters are the dominant scan surface;
+failed messages are the underlying ledger, and queue capacity is a secondary operational fact.
+
+## Anchor references
+
+- `11-devconsole-a.png`: compact fact rail, filterable records, and operational actions.
+- `18-ref.jpg`: event-density overview paired with a detailed record surface.
+
+## Component decisions
+
+- Rebuilt the top strip as one flat factual rail; only the real two-hour arrival trend remains a
+  chart.
+- Made error signatures contiguous rows with count, sources, age range, arrival shape, and grouped
+  actions instead of colored rounded cards.
+- Removed decorative glyphs, retry pips, colored side rails, and severity rainbow styling.
+- Kept queue depth/capacity as a restrained true-proportion track and the failed-message section as
+  a dense data table.
+- Used destructive red as the one screen accent because all records are terminal failures.
+
+## Self-verification
+
+Playwright CLI captured main, filtered-cluster, dark, and 390px mobile states in
+`dead-letter-queues-refix-shots/`. Zero template holes, console errors, and horizontal overflow were
+found.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/home-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/home-refix.md
new file mode 100644
index 000000000..986ffaf78
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/home-refix.md
@@ -0,0 +1,30 @@
+# Home — component rethink
+
+## Design question
+
+What composition answers “is my app wired and operating as declared, and where do I act next?”
+without becoming a grid of unrelated KPI cards?
+
+Home is one operations canvas: execution rate and outcome records lead, a compact fact rail replaces
+three repeated mini-charts, the incident summary connects affected entities to actions, and wiring
+coverage plus recent signals provide system context.
+
+## Anchor references
+
+- `08-ref.png`: unified operations canvas mixing a time series, exact system records, and activity.
+- `03-analytics-cards.png`: chart/table/channel-bar composition with clear metric hierarchy.
+
+## Component decisions
+
+- Made the execution area chart the primary temporal view and converted trigger/override/saga cards
+  into one contiguous fact rail.
+- Kept wiring health as a true 16/20 coverage radial and outcomes as a true distribution channel.
+- Removed the redundant capability donut; capability mix now reads as exact share records.
+- Flattened all Home Cards to `--ns-card` + `--ns-shadow-xs` with internal hairlines.
+- Removed decorative icons, colored incident rail, sparkline repetition, and multicolor deltas; one
+  copper analytical channel ties the mixed views together.
+
+## Self-verification
+
+Playwright CLI captured main, alternate time-range selection, dark, and 390px mobile states in
+`home-refix-shots/`. Zero rendered holes, console errors, and horizontal overflow were found.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/live-flow-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/live-flow-refix.md
new file mode 100644
index 000000000..75889264c
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/live-flow-refix.md
@@ -0,0 +1,30 @@
+# Live Flow — component rethink
+
+## Design question
+
+What components let a developer follow one request across capability seams while preserving the
+payload and owner at every handoff?
+
+Live Flow is a causal seam map. A compact flow rail selects one execution; the center shows its
+ordered request→trigger→saga→worker→stream journey; the right inspector exposes the selected seam’s
+owner, entity, correlation, and actions.
+
+## Anchor references
+
+- `21-flow-builder.webp`: connected node sequence, branch semantics, and properties relationship.
+- `20-ref.png`: expanded detail surface paired with a dense underlying record view.
+
+## Component decisions
+
+- Removed the redundant 2/5 semicircle gauge and kept the exact cleared/total count plus one true
+  seam-progress strip.
+- Rebuilt flow and journey items as contiguous records on a causal spine rather than colored cards.
+- Preserved fan-out and severed-edge treatments because they encode real topology.
+- Flattened hero, journey, inspector, and assist into Card surfaces with internal hairlines.
+- Neutralized per-state rainbow badges; teal selection, live dots, progress, and seam values form the
+  sole chromatic channel.
+
+## Self-verification
+
+Playwright CLI captured main, selected seam, dark, and 390px mobile states in
+`live-flow-refix-shots/`. Zero rendered holes, console errors, and horizontal overflow were found.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/migrations-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/migrations-refix.md
new file mode 100644
index 000000000..bc9686264
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/migrations-refix.md
@@ -0,0 +1,98 @@
+# Migrations — component rethink
+
+## Design question
+
+*What tailored components, layout, composition, data visualization, and data structure best showcase
+MIGRATIONS — the applied ledger, the live database head, the declared schema, drift, and the exact DDL
+change — and how should they compose together?*
+
+Migrations should read as a schema workbench, not a health dashboard. The primary comparison is the
+selected migration's exact DDL change, kept persistently adjacent to the migration ledger. A compact
+metadata rail establishes live head, declared target, ledger position, drift count, and database.
+Schema drift is a two-column records set because each discrepancy has a stable object and an actual →
+declared value. The only visualization is the semantic add/remove DDL diff; it truthfully shows the
+feature's change data.
+
+Two references drive the composition:
+
+- `13-devconsole-c.png` — compact schema/version metadata and a persistent, syntax-aware diff
+  workspace.
+- `11-devconsole-a.png` — dense records table with a contextual inspector that updates without
+  leaving the work surface.
+
+## Component decisions
+
+| Existing element | Decision | Reason |
+| --- | --- | --- |
+| Applied ratio bar, pending pips, drift pips | Remove; retain exact metadata text | The same facts are already present in the ledger and drift records. The micro-visuals added no decision value. |
+| Five-part migration header | Flatten to a compact inline metadata rail | These are related schema facts, not separate dashboard widgets. Hairlines and whitespace match ref 13. |
+| Version-chain node cards | Remove after round 1 | The ledger already provides the complete ordered history; the visual stepper duplicated chronology. |
+| Migration ledger | Recompose as `ns-data-table ns-data-table--console` | Migrations are comparable records with stable version, identifier, applied time, duration, rows, and status fields. |
+| Node glyph chips for objects/rows/duration | Remove | The glyphs wrapped scalar facts in decorative chrome and duplicated the ledger columns. |
+| Arc gauge for schema drift | Replace with drift records | `6 of 8` is a legitimate proportion, but the actionable information is which two objects differ and how. A gauge hid that detail. |
+| Drift object mini-cards | Flatten to a two-column DataTable | Object and actual → declared value are record fields; kind and note remain compact textual metadata. |
+| Separate pending-action card and black CLI strip | Replace with `InlineNotice` inside the selected inspector | The warning is actionable and belongs beside the DDL it will apply. The command stays factual and token-driven. |
+| Selected detail card plus DDL modal/sheet | Replace with a persistent contextual inspector | Ref 13 keeps the diff in the workspace; ref 11 keeps selected context adjacent to records. Row selection now updates the inspector directly. |
+| Status badges | Replace with plain mono text | Applied/pending are categorical cell values, not pills. Pending uses the screen's single primary accent; applied stays neutral. |
+| Duplicate top and contextual migrate actions | Keep only the contextual apply action | One operation gets one control, located beside the pending DDL and command. |
+| Repeated Receipt addition in v4 DDL | Remove from v4 diff | Receipt is introduced by v3 in the same dataset. Removing the duplicate restores the stated v3 → v4 migration meaning. |
+
+## Kimi trajectory
+
+### Round 1 — 64 / 100
+
+Kimi found zero wrong visualization components, but called the sequence decorative duplication,
+objected to the modal DDL path, and requested a denser, flatter ledger/diff workspace.
+
+Applied: removed the sequence, made ledger selection update a persistent DDL inspector, reduced the
+summary to compact metadata, and replaced status chips with text.
+
+### Round 2 — 68 / 100
+
+Kimi approved the persistent workspace direction but still read flat panes and plain status text as
+card/pill chrome. Its useful fixes were to remove remaining shadows, demote actions, deduplicate the
+selected identifier, and compress the mobile metadata treatment.
+
+Applied: removed card surfaces and shadows, used hairline panes, converted the mobile rail to compact
+inline facts, reduced inspector facts to applied/duration/rows, and demoted both migrate controls.
+
+### Round 3 — 70 / 100
+
+Kimi identified the real v4 DDL inconsistency (`Receipt` was already introduced by v3), plus the
+selected-row ink rail and duplicate screen-level Aspire actions. It also continued to score shared
+shell glyph density and to describe already-square, shadowless panes as rounded cards.
+
+Applied: corrected the incremental DDL, removed the selection rail, removed screen-level Aspire
+duplicates, and tightened mobile ledger records.
+
+### Round 4 — 80 / 100 (four-round limit)
+
+Kimi confirmed there was no fake visualization, marketing copy, modal fragmentation, glyph overload
+inside the screen, or decorative text duplication. It again misidentified plain text statuses as
+filled pills and hairline-separated facts as boxed bars, but found two concrete polish issues: the
+duplicate migrate operation and inconsistent displayed version casing.
+
+Applied after the final evaluation: removed the header migrate action so the contextual inspector owns
+the single control, and normalized displayed versions to the dataset's lowercase `v*` form. The final
+shots include this cleanup. The four-round cap was reached at 64 → 68 → 70 → 80.
+
+## Design-system enhancement candidates
+
+Migrations is the second validation surface for `ns-data-table--console` and
+`ns-property-list--compact`. Both work without card chrome on a flat canvas, so the enhancement log
+marks them ready for registry sync review. The screen-specific metadata rail, pane layout, and DDL
+composition are not proposed as generic components.
+
+## Validation
+
+- Playwright final matrix: desktop light, selected desktop light, desktop dark, mobile 390 light,
+  and selected mobile light.
+- Navigation entered Migrations through the real nav button; no hash-only navigation was used.
+- Selection was exercised with the v3 ledger record and visibly updates its facts and DDL.
+- No browser console errors or warnings in the final matrix.
+- Screen additions use `--ns-*` tokens and token `color-mix`; no new raw hex/RGBA values.
+- No arc gauge, fake progress bar, pips, glyph chips, pill statuses, solid CLI bar, or modal DDL path
+  remains in the screen.
+
+Final screenshots are in `migrations-refix-shots/round4/`. Earlier rounds preserve the complete
+component and evaluator trail.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/run-inspector-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/run-inspector-refix.md
new file mode 100644
index 000000000..c91a50831
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/run-inspector-refix.md
@@ -0,0 +1,34 @@
+# Run Inspector — component rethink
+
+## Design question
+
+What components make one correlated run fast to diagnose without turning exact execution evidence
+into an abstract dashboard chart?
+
+Run Inspector is a timed execution instrument. The run list establishes correlation context, the
+center rail exposes ordered steps, duration, attempts, and compensation, and the right column keeps
+events and logs adjacent to the selected run.
+
+## Anchor references
+
+- `11-ref.png`: correlated-run table and focused inspector relationship.
+- `05-ref.png`: time-analysis trace, datum labels, and compact diagnostic density.
+
+## Component decisions
+
+- Rebuilt the run list as contiguous records and the four totals as one flat statistical rail.
+- Removed the decorative completion gauge; exact steps-done, attempt, compensation, and elapsed
+  values remain visible in the run header.
+- Treated the step sequence as a duration-labeled execution rail, with retry and compensation shown
+  as execution branches rather than unrelated status cards.
+- Kept input, event, and log payloads as exact records because those values are evidence, not chart
+  material.
+- Flattened outer surfaces to Card backgrounds, internal hairlines, and small shadows; copper is the
+  sole chromatic channel for selection, timing, and correlated event markers.
+- Removed decorative arrow glyphs and neutralized the inherited status-rainbow markers.
+
+## Self-verification
+
+Playwright CLI captured main, selected run, dark, and 390px mobile states in
+`run-inspector-refix-shots/`. Zero rendered holes, console errors, console warnings, and horizontal
+overflow were found.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/runtime-config-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/runtime-config-refix.md
new file mode 100644
index 000000000..687b22ddb
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/runtime-config-refix.md
@@ -0,0 +1,105 @@
+# Runtime Config — component rethink
+
+## Design question
+
+*What tailored components, layout, composition, data-visualization, and data-structure best showcase
+RUNTIME CONFIG — live values that override resolved defaults, their provenance, reload state, and
+revision/rollback history — and how do they compose together?*
+
+Runtime Config should read as an override ledger with a versioned write history, not a generic
+metrics dashboard. A unified summary ribbon establishes the current store revision and the override
+inventory. The live set is a records table whose scan axis is key, base value, runtime value,
+provenance, reload state, and action. A selected record opens a contextual property inspector. The
+revision sequence and its actual add/remove diff are the feature-true visual structure; they show
+change over time without inventing trend or progress data.
+
+Two references drive the composition:
+
+- `11-devconsole-a.png` — dense records table, compact tool rail, and contextual right-side
+  inspector.
+- `13-devconsole-c.png` — one contiguous summary rail plus version selection and code-diff history.
+
+The PM dashboard remains a secondary density reference, but its social avatars and card widgets are
+not appropriate for a runtime-config ledger.
+
+## Component decisions
+
+| Existing element | Decision | Reason |
+| --- | --- | --- |
+| Four-part override header | Keep as one contiguous `ns-card--console` summary ribbon | Ref 13 uses a single compact version/format/compatibility rail; the facts belong together and are not four independent cards. |
+| Diverging 8/42 meter | Replace with ratio text | The proportion is legitimate, but the selected reference pattern expresses simple registry facts as precise text; the revision diff carries the screen's visual comparison. |
+| Override kind pips/glyphs | Replace with one textual type breakdown | Flags/jobs/triggers/tasks are categorical counts, not a distribution chart. |
+| Live override set | Recompose as `ns-data-table ns-data-table--console` | Overrides are comparable records. Base and runtime value remain paired because the transition is the row's defining fact. |
+| LIVE/PENDING pills | Replace with neutral DM Mono uppercase metadata | Reload state is categorical; it does not need colored capsule chrome. |
+| Row glyphs and colored value states | Remove/neutralize | The key and base/runtime value already identify the record; extra glyph/color layers competed with the selected state. |
+| Prose activity feed | Replace with time/target/action records | Override events have stable comparable fields and benefit from the same scan rhythm as ref 11. |
+| Pending-reload and author widgets | Remove | Pending state is already on each record; authors are already in provenance. Both cards duplicated the ledger. |
+| Revision change pips | Remove; retain explicit change count and real diff | A pip count obscured a value already present in text. The version sequence and diff are meaningful. |
+| All/Compact/JSON segmented buttons | Replace with `ns-tabs--underline` | These are alternate read modes of one dataset, matching the tab grammar in ref 11. |
+| Inspector KV table | Replace with compact `ns-property-list--compact` | One record's properties belong in a definition record, not a comparison table. Desktop uses two columns; mobile uses one. |
+| Follow switch | Replace with Pause/Follow text action | Stream following is a transient action, not a persisted preference. |
+| Heavy/blurred selected sheet context | Flatten and de-blur only the Runtime Config inspector | The selected row stays visible behind the drawer/sheet, improving wayfinding without changing other routes. |
+
+## Kimi trajectory
+
+### Round 1 — 58 / 100
+
+Kimi confirmed that the 8/42 proportion was the only remaining meter, then flagged colored feed
+pips, pill-like reload/current states, author avatars, the high-attention destructive drawer action,
+and weak mobile record treatment.
+
+Applied: neutral text states/actions, removed feed pips and avatars, flattened inspector chrome,
+wrapped full keys/values, shortened helper copy, and added an explicit mobile selected-state shot.
+
+### Round 2 — 62 / 100
+
+Kimi shifted to information architecture: the right rail still behaved like a generic widget stack,
+the feed was prose rather than records, authors duplicated provenance, inspector facts used a table,
+and revision modes looked like action buttons.
+
+Applied: event DataTable, removed pending/authors widget cards, introduced the property list, moved
+revision modes to underline tabs, and made the diff neutral.
+
+### Round 3 — 62 / 100
+
+Kimi then objected to the proportion visualization and follow switch and requested a more compact
+property record. It also continued to score shared shell chrome even after the audit was scoped to
+screen content.
+
+Applied: removed the ratio bar in favor of precise text, replaced the switch with Pause/Follow,
+removed screen helper prose, tightened the two-column property record, and strengthened selected-row
+context.
+
+### Round 4 — 62 / 100 (four-round limit)
+
+Kimi's final findings contradicted earlier rounds in several places: it first required the prose feed
+to become a table, then called the table the wrong component; it first requested a definition list,
+then called that list wrong after it became a compact property grid; and it described the contiguous
+summary ribbon as four isolated cards. The four-round limit was reached.
+
+The owner directly reviewed the resulting screen and confirmed that AI slop was gone, then raised a
+separate craft requirement: recover the crisp hierarchy of the Dribbble references. The final craft
+pass therefore follows the owner's design direction and the direct reference evidence rather than
+chasing contradictory evaluator suggestions. The prototype now uses the ref-11 table/inspector
+pattern and ref-13 summary/version-diff pattern through Fresh UI tokens and logged component
+modifiers.
+
+## Design-system enhancement candidates
+
+Runtime Config is the first validation surface for `ns-card--console`,
+`ns-data-table--console`, `ns-tabs--underline`, and `ns-property-list--compact`. Their intended
+registry targets and promotion criteria are recorded in `design-system-enhancement-log.md`; package
+source was not silently changed during this prototype slice.
+
+## Validation
+
+- Playwright final matrix: desktop light, selected desktop light, desktop dark, mobile 390 light,
+  and selected mobile bottom sheet.
+- Navigation used the real Runtime Config nav button; no hash-only navigation was used to enter the
+  screen.
+- Final mobile document width equals viewport width (`390`); no rendered template holes.
+- Only the pre-existing missing `/favicon.ico` request appears in the console.
+- Runtime-specific additions use `--ns-*` tokens; no new raw hex/RGBA values.
+
+Final screenshots are in `runtime-config-refix-shots/round4/`. Earlier rounds remain as the visual
+evidence trail for the 58 → 62 → 62 → 62 evaluator trajectory.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/sagas-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/sagas-refix.md
new file mode 100644
index 000000000..0027d90e6
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/sagas-refix.md
@@ -0,0 +1,37 @@
+# Sagas — component rethink
+
+## Design question
+
+What components best explain durable forward execution and compensating rollback at the same time?
+
+Sagas is a state-machine canvas with two spatial lanes and a docked node inspector. Position, edge
+direction, and dashed rollback wiring carry the semantics; selection connects a state node to its
+payload, transitions, evidence, and actions.
+
+## Anchor references
+
+- `21-flow-builder.webp`: measured node graph, branch labels, and docked properties panel.
+- `11-devconsole-a.png`: dense inspector hierarchy and exact record metadata.
+
+## Component decisions
+
+- Kept the measured canvas, minimap, and forward/rollback lanes as the screen’s unique
+  visualization.
+- Flattened the health summary into one fact rail and retained only the true instance-state
+  distribution.
+- Rebuilt nodes as flat Card surfaces; lane position and dashed compensation edges replace colored
+  node borders and icon tiles.
+- Removed the redundant semicircle state gauge, floating unicode toolbar, and rainbow legend.
+- Made selected/rollback state the sole copper emphasis; the properties panel uses internal
+  hairlines and underline tabs.
+
+## Self-verification
+
+Playwright CLI captured main, selected `reserving` node, dark, and 390px mobile states in
+`sagas-refix-shots/`. Zero rendered holes, console errors, or horizontal overflow were found.
+
+## Honest gap
+
+The existing canvas fixture logs six non-error warnings for unresolved optional edge-label
+placeholders. The measured graph still renders and connects correctly; fixing the fixture is outside
+the target markup/CSS scope.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/streams-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/streams-refix.md
new file mode 100644
index 000000000..3da16f22f
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/streams-refix.md
@@ -0,0 +1,30 @@
+# Streams — component rethink
+
+## Design question
+
+What distinct views explain stream rate, wiring, and lag without forcing them into one chart?
+
+Streams is a topic console with three data-native lenses: an area time series for throughput, a
+producer→partitioned-log→consumer topology for ownership and fan-out, and a windowed heat matrix for
+lag. The offset ledger and live tail supply exact records.
+
+## Anchor references
+
+- `04-finance-cards.png`: focused interactive time series with tooltip and exact range facts.
+- `12-devconsole-b.png`: producer/workbench split and dense message records.
+
+## Component decisions
+
+- Flattened health facts into one contiguous Card rail and removed colored side rails.
+- Kept the throughput area chart, topology, and lag matrix because each answers a different real
+  question; none is decorative.
+- Rebuilt chart/topology/table surfaces with flat `ns-card` shadows and internal hairline rules.
+- Reduced status/category color to one teal data channel; lag severity remains text and magnitude,
+  not a second palette.
+- Kept the partition ledger and live event tail as precise DM Mono record structures.
+
+## Self-verification
+
+Playwright CLI captured Consume, Consumers-selected, dark, and 390px mobile states in
+`streams-refix-shots/`. Zero rendered holes and zero horizontal overflow were found; the Streams
+route introduced no console errors.
diff --git a/.llm/runs/beta10--orchestrator/render/_visual-reports/triggers-refix.md b/.llm/runs/beta10--orchestrator/render/_visual-reports/triggers-refix.md
new file mode 100644
index 000000000..2ca5fbc90
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/_visual-reports/triggers-refix.md
@@ -0,0 +1,38 @@
+# Triggers — component rethink
+
+## Design question
+
+What components best show a trigger as an activation rule with a condition, action, and next-fire
+schedule?
+
+The screen is a rule-activation workbench. The WHEN → condition → DO builder is the signature;
+category counts are supporting records, the seven-day strip is the temporal schedule, and firing
+history is the audit ledger.
+
+## Anchor references
+
+- `21-flow-builder.webp`: connected rule nodes and selected rule properties.
+- `19-pm-dashboard.png`: compact schedule/day rhythm and dense status-bearing records.
+
+## Component decisions
+
+- Rebuilt metric and category groups as flat contiguous rails with neutral internal rules.
+- Removed glyph tiles, colored side rails, category rainbow styling, and four redundant category
+  bar charts.
+- Composed the rule builder from one Card with internal WHEN/condition/DO zones; the action palette
+  uses squarish DM Mono labels.
+- Preserved the seven-day schedule because it maps real next-fire times, and kept only the real 24h
+  firing trend in the summary.
+- Used copper as the single accent for armed/selected/action state.
+
+## Self-verification
+
+Playwright CLI captured main, Event-selected, dark, and 390px mobile states in
+`triggers-refix-shots/`. There are zero rendered `{{ }}` holes, zero console errors, and zero
+horizontal overflow.
+
+## Honest gap
+
+The prototype runtime emits nine existing warnings for unresolved firing-history placeholder fields;
+it renders them empty rather than as visible holes. Fixing that data fixture would require the
+out-of-scope runtime/support layer.
diff --git a/.llm/runs/beta10--orchestrator/render/assets/ns-ext.css b/.llm/runs/beta10--orchestrator/render/assets/ns-ext.css
new file mode 100644
index 000000000..8ee2db722
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/assets/ns-ext.css
@@ -0,0 +1,7481 @@
+/* ---------------------------------------------------------------------------
+ * NetScript Dev Dashboard — rescope v2, net-new CSS (extends proto.css).
+ * Tokens only (--ns-*). Theme-blind. Class contract: ns-<block>__<part>,
+ * state via data-*. Sync-back candidates unless marked (glue).
+ * ------------------------------------------------------------------------- */
+
+/* ------------------------------------------------------------------ *
+ * Fresh UI Button parity layer
+ *
+ * Keep the authored prototype aligned with registry/components/ui/button.css
+ * even when the generated _ds export is refreshed independently.
+ * ------------------------------------------------------------------ */
+
+.ns-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ns-space-2);
+  font-family: var(--ns-font-sans);
+  font-size: var(--ns-text-sm);
+  font-weight: 500;
+  line-height: 1;
+  border: 1px solid transparent;
+  border-radius: var(--ns-radius-md);
+  padding: var(--ns-space-2) var(--ns-space-4);
+  cursor: pointer;
+  transition:
+    background var(--ns-ease-normal),
+    border-color var(--ns-ease-normal),
+    color var(--ns-ease-normal),
+    box-shadow var(--ns-ease-normal),
+    transform var(--ns-ease-normal);
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+/* ========================================================================== *
+ * Catalog re-fix — contract workbench (refs 11 + 13)
+ * One copper accent; records, schema, and categorical contract facts only.
+ * ========================================================================== */
+.ns-catalog {
+  --cat-accent: var(--ns-primary);
+  gap: var(--ns-space-4);
+}
+
+.ns-catalog .ns-page-header {
+  padding-bottom: var(--ns-space-3);
+  border-bottom: 1px solid var(--ns-border);
+}
+
+.ns-cat2-meta {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  padding: 0;
+  overflow: hidden;
+  background: var(--ns-card);
+  box-shadow: var(--ns-shadow-xs);
+}
+
+.ns-cat2-meta > span {
+  display: grid;
+  gap: var(--ns-space-1);
+  min-width: 0;
+  padding: var(--ns-space-3) var(--ns-space-4);
+  border-left: 1px solid var(--ns-border);
+}
+
+.ns-cat2-meta > span:first-child { border-left: 0; }
+.ns-cat2-meta b,
+.ns-cat2-meta small {
+  overflow: hidden;
+  color: var(--ns-muted-fg);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  font-weight: 500;
+  letter-spacing: 0.07em;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+.ns-cat2-meta strong {
+  color: var(--ns-fg);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-lg);
+  line-height: 1.1;
+}
+.ns-cat2-meta > span:first-child strong { color: var(--cat-accent); }
+
+.ns-catalog .ns-catbar {
+  display: grid;
+  grid-template-columns: minmax(13rem, 1fr) auto auto auto auto;
+  gap: var(--ns-space-2);
+}
+.ns-catalog .ns-catbar__input {
+  min-height: 2rem;
+  padding: var(--ns-space-1-5) var(--ns-space-3);
+  background: var(--ns-card);
+  border-color: var(--ns-border);
+  border-radius: var(--ns-radius-sm);
+}
+.ns-catalog .ns-catchip {
+  border-radius: var(--ns-radius-sm);
+  background: transparent;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.ns-catalog .ns-catchip[data-state='active'] {
+  color: var(--cat-accent);
+  background: var(--ns-primary-subtle);
+  border-color: var(--ns-primary-border);
+}
+
+.ns-catalog .ns-catgrid {
+  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.55fr);
+  gap: var(--ns-space-4);
+  align-items: stretch;
+}
+.ns-cat2-reg {
+  gap: 0;
+  overflow: hidden;
+  background: var(--ns-card);
+  box-shadow: var(--ns-shadow-xs);
+}
+.ns-cat2-reg .ns-catreg__group { gap: 0; }
+.ns-cat2-reg .ns-catreg__group + .ns-catreg__group { border-top: 1px solid var(--ns-border); }
+.ns-cat2-reg .ns-catreg__group-head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-2) var(--ns-space-3);
+  background: color-mix(in srgb, var(--ns-card) 78%, var(--ns-surface));
+}
+.ns-cat2-reg .ns-catreg__group-label { text-transform: uppercase; letter-spacing: 0.06em; }
+.ns-cat2-reg .ns-catreg__group-count {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  color: var(--ns-fg);
+}
+.ns-cat2-group-fact {
+  color: var(--ns-muted-fg);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  white-space: nowrap;
+}
+.ns-cat2-reg .ns-catreg__item {
+  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-2) var(--ns-space-3);
+  border: 0;
+  border-top: 1px solid var(--ns-border);
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--ns-card);
+  transform: none;
+}
+.ns-cat2-reg .ns-catreg__item:hover { background: var(--ns-surface); box-shadow: none; transform: none; }
+.ns-cat2-reg .ns-catreg__item[data-state='selected'] {
+  background: var(--ns-primary-subtle);
+  box-shadow: inset 2px 0 0 var(--cat-accent);
+}
+.ns-cat2-reg .ns-catreg__method,
+.ns-cat2-method,
+.ns-cat2-coverage,
+.ns-cat2-transports > span,
+.ns-cat2-compat {
+  width: fit-content;
+  border-radius: var(--ns-radius-sm);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.ns-cat2-reg .ns-catreg__method,
+.ns-cat2-method {
+  padding: 2px var(--ns-space-1-5);
+  color: var(--cat-accent);
+  background: var(--ns-primary-subtle);
+}
+.ns-cat2-coverage { color: var(--ns-muted-fg); }
+.ns-cat2-transports { display: inline-flex; gap: 3px; }
+.ns-cat2-transports > span { color: var(--ns-muted-fg); opacity: 0.42; }
+.ns-cat2-transports > span[data-on='1'] { color: var(--cat-accent); opacity: 1; }
+.ns-cat2-reg .ns-catreg__meta { display: grid; justify-items: end; gap: 2px; }
+
+.ns-cat2-detail {
+  gap: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: var(--ns-card);
+  box-shadow: var(--ns-shadow-xs);
+}
+.ns-cat2-detail .ns-catdetail__head,
+.ns-cat2-detail .ns-catdetail__method-strip,
+.ns-cat2-detail .ns-catsig,
+.ns-cat2-detail .ns-catschema,
+.ns-cat2-detail .ns-cat2-rel,
+.ns-cat2-detail .ns-catdetail__actions { margin: 0; padding: var(--ns-space-3) var(--ns-space-4); }
+.ns-cat2-detail > * + * { border-top: 1px solid var(--ns-border); }
+.ns-cat2-detail .ns-catdetail__method-strip { border-bottom: 0; }
+.ns-cat2-compat { color: var(--ns-muted-fg); }
+.ns-cat2-detail .ns-catver__tag {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.ns-cat2-detail .ns-catsig,
+.ns-cat2-detail .ns-catschema__code {
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+  background: var(--ns-surface);
+}
+.ns-cat2-rel {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+}
+.ns-cat2-rel > div { display: grid; gap: var(--ns-space-1); }
+.ns-cat2-rel > div + div { padding-left: var(--ns-space-4); border-left: 1px solid var(--ns-border); }
+.ns-cat2-rel > div > span:not(.ns-catrel__col-label) {
+  color: var(--ns-fg);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+}
+.ns-cat2-detail .ns-btn { margin-left: auto; }
+
+@media (max-width: 1100px) {
+  .ns-catalog .ns-catbar { grid-template-columns: 1fr 1fr; }
+  .ns-catalog .ns-catbar__search { grid-column: 1 / -1; }
+}
+@media (max-width: 760px) {
+  .ns-cat2-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .ns-cat2-meta > span:nth-child(odd) { border-left: 0; }
+  .ns-cat2-meta > span:nth-child(n + 3) { border-top: 1px solid var(--ns-border); }
+  .ns-cat2-meta > span:last-child { grid-column: 1 / -1; }
+  .ns-catalog .ns-catbar { grid-template-columns: 1fr; }
+  .ns-catalog .ns-catbar > * { grid-column: 1; }
+  .ns-cat2-reg .ns-catreg__group-head { grid-template-columns: minmax(0, 1fr) auto; }
+  .ns-cat2-group-fact { grid-column: 1 / -1; }
+}
+
+.ns-btn:focus-visible {
+  outline: 2px solid var(--ns-ring);
+  outline-offset: 2px;
+}
+
+.ns-btn:disabled,
+.ns-btn[aria-disabled='true'] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+  box-shadow: none;
+  transform: none;
+}
+
+.ns-btn--loading:disabled,
+.ns-btn--loading[aria-disabled='true'] {
+  opacity: 0.85;
+}
+
+.ns-btn .ns-spinner {
+  color: inherit;
+}
+
+.ns-btn--primary {
+  background: var(--ns-primary);
+  color: var(--ns-primary-fg);
+  border-color: var(--ns-primary);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ns-primary) 55%, var(--ns-gray-12));
+}
+
+.ns-btn--primary:hover {
+  background: var(--ns-primary-hover);
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--ns-primary) 55%, var(--ns-gray-12));
+}
+
+.ns-btn--primary:active {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 color-mix(in srgb, var(--ns-primary) 55%, var(--ns-gray-12));
+}
+
+.ns-btn--secondary {
+  background: var(--ns-secondary-subtle);
+  color: var(--ns-fg);
+  border-color: var(--ns-secondary-border);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ns-secondary-border) 40%, transparent);
+}
+
+.ns-btn--secondary:hover {
+  background: color-mix(in srgb, var(--ns-secondary) 10%, transparent);
+  border-color: color-mix(in srgb, var(--ns-secondary) 30%, transparent);
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--ns-secondary-border) 40%, transparent);
+}
+
+.ns-btn--secondary:active {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 color-mix(in srgb, var(--ns-secondary-border) 40%, transparent);
+}
+
+.ns-btn--ghost {
+  background: transparent;
+  color: var(--ns-muted-fg);
+}
+
+.ns-btn--ghost:hover {
+  background: color-mix(in srgb, var(--ns-fg) 4%, transparent);
+  color: var(--ns-fg);
+}
+
+.ns-btn--outline {
+  background: transparent;
+  color: var(--ns-fg);
+  border-color: var(--ns-border-hover);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ns-border-hover) 35%, transparent);
+}
+
+.ns-btn--outline:hover {
+  background: color-mix(in srgb, var(--ns-fg) 4%, transparent);
+  border-color: var(--ns-border-strong);
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--ns-border-hover) 35%, transparent);
+}
+
+.ns-btn--outline:active {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 color-mix(in srgb, var(--ns-border-hover) 35%, transparent);
+}
+
+.ns-btn--destructive {
+  background: var(--ns-destructive);
+  color: var(--ns-destructive-fg);
+  border-color: var(--ns-destructive);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--ns-destructive) 60%, var(--ns-gray-12));
+}
+
+.ns-btn--destructive:hover {
+  background: var(--ns-red-6);
+  transform: translate(1px, 1px);
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--ns-destructive) 60%, var(--ns-gray-12));
+}
+
+.ns-btn--destructive:active {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 color-mix(in srgb, var(--ns-destructive) 60%, var(--ns-gray-12));
+}
+
+.ns-btn--sm {
+  font-size: var(--ns-text-xs);
+  padding: var(--ns-space-1-5) var(--ns-space-3);
+  border-radius: var(--ns-radius-sm);
+}
+
+.ns-btn--lg {
+  font-size: var(--ns-text-base);
+  padding: var(--ns-space-3) var(--ns-space-6);
+  border-radius: var(--ns-radius-lg);
+}
+
+.ns-btn--icon {
+  padding: var(--ns-space-2);
+  aspect-ratio: 1;
+  gap: 0;
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-trend — inline table sparkline cell (Pulsar-style status tables)
+ * ------------------------------------------------------------------ */
+
+/* Token-driven div micro-column strip. NO SVG, NO {{ }} holes — heights are
+ * bucketed classes (--hNN) so nothing template-interpolates into geometry. */
+.ns-spark { display: flex; align-items: flex-end; gap: 2px; min-width: 0; }
+.ns-spark__col { flex: 1 1 0; min-width: 1px; border-radius: 1px; background: currentColor; opacity: 0.9; }
+.ns-spark__col--h1{height:8%}.ns-spark__col--h2{height:12%}.ns-spark__col--h3{height:17%}
+.ns-spark__col--h4{height:22%}.ns-spark__col--h5{height:27%}.ns-spark__col--h6{height:32%}
+.ns-spark__col--h7{height:38%}.ns-spark__col--h8{height:43%}.ns-spark__col--h9{height:48%}
+.ns-spark__col--h10{height:53%}.ns-spark__col--h11{height:58%}.ns-spark__col--h12{height:63%}
+.ns-spark__col--h13{height:68%}.ns-spark__col--h14{height:73%}.ns-spark__col--h15{height:78%}
+.ns-spark__col--h16{height:83%}.ns-spark__col--h17{height:88%}.ns-spark__col--h18{height:92%}
+.ns-spark__col--h19{height:96%}.ns-spark__col--h20{height:100%}
+
+.ns-trend { width: 64px; height: 18px; display: block; }
+.ns-trend svg { width: 100%; height: 100%; display: block; }
+.ns-trend path[data-part='line'] { fill: none; stroke-width: 1.5; stroke: var(--ns-success); }
+.ns-trend[data-tone='warning'] path[data-part='line'] { stroke: var(--ns-warning); }
+.ns-trend[data-tone='destructive'] path[data-part='line'] { stroke: var(--ns-destructive); }
+.ns-trend[data-tone='muted'] path[data-part='line'] { stroke: var(--ns-border-strong); }
+
+/* ------------------------------------------------------------------ *
+ * ns-stackmap v2 — Encore-Flow-grade node cards + topic pills
+ * ------------------------------------------------------------------ */
+
+.ns-stackmap__node-endpoints { display: flex; align-items: center; gap: var(--ns-space-2); white-space: nowrap;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-stackmap__node-endpoints b { color: var(--ns-fg); font-weight: 600; }
+.ns-stackmap__node-res { display: flex; flex-wrap: wrap; gap: var(--ns-space-1-5); }
+.ns-stackmap__edge[data-flavor='pubsub'] { stroke-dasharray: 5 4; }
+.ns-stackmap__node--topic { background: var(--ns-fg); color: var(--ns-bg); border-color: var(--ns-fg);
+  border-radius: var(--ns-radius-lg); justify-items: center; padding: var(--ns-space-2-5) var(--ns-space-4); }
+.ns-stackmap__node--topic .ns-stackmap__node-title { color: var(--ns-bg); font-family: var(--ns-font-mono); }
+.ns-stackmap__node--topic:hover { border-color: var(--ns-fg); }
+.ns-stackmap__node--topic[aria-pressed='true'] { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ns-primary), transparent 55%); }
+
+/* sheet body glue (DS owns dialog[data-part=content][data-side]) */
+.ns-sheet-head { position: sticky; top: 0; display: flex; align-items: center; gap: var(--ns-space-3);
+  padding: var(--ns-space-4) var(--ns-space-5); border-bottom: 1px solid var(--ns-border);
+  background: var(--ns-card); z-index: 1; }
+.ns-sheet-head__title { font-size: var(--ns-text-base); font-weight: 600; font-family: var(--ns-font-mono);
+  overflow-wrap: anywhere; }
+.ns-sheet-body { display: grid; gap: var(--ns-space-5); padding: var(--ns-space-5); }
+
+/* --- Detail bottom sheet (mobile stat/card tap) --------------------------- */
+.ns-detailsheet { width: 100%; max-width: 100%; }
+.ns-detailsheet__inner { display: grid; gap: var(--ns-space-4); padding: var(--ns-space-4) var(--ns-space-5) var(--ns-space-6); }
+.ns-detailsheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-3); }
+.ns-detailsheet__eyebrow { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--ns-muted-fg); }
+.ns-detailsheet__hero { display: flex; align-items: center; gap: var(--ns-space-3); }
+.ns-detailsheet__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
+  flex: none; border-radius: var(--ns-radius-lg); background: color-mix(in oklab, var(--ns-fg) 5%, transparent);
+  color: var(--ns-muted-fg); font-family: var(--ns-font-mono); font-size: var(--ns-text-lg); }
+.ns-detailsheet__icon[data-tone='warning'] { background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-detailsheet__icon[data-tone='success'] { background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-detailsheet__hero-main { display: grid; gap: 1px; flex: 1; min-width: 0; }
+.ns-detailsheet__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xl); font-weight: 700;
+  line-height: 1; font-variant-numeric: tabular-nums; }
+.ns-detailsheet__title { font-size: var(--ns-text-sm); font-weight: 600; }
+.ns-detailsheet__desc { font-size: var(--ns-text-sm); color: var(--ns-muted-fg); line-height: var(--ns-leading-relaxed); margin: 0; }
+.ns-detailsheet__kv { display: grid; gap: 0; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); overflow: hidden; }
+.ns-detailsheet__kv-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-3);
+  padding: var(--ns-space-2-5) var(--ns-space-3); border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent); }
+.ns-detailsheet__kv-row:last-child { border-bottom: 0; }
+.ns-detailsheet__kv-key { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-detailsheet__kv-val { font-size: var(--ns-text-sm); font-weight: 500; text-align: right; }
+.ns-detailsheet__actions { display: grid; gap: var(--ns-space-2); }
+.ns-detailsheet__actions .ns-btn { width: 100%; justify-content: center; }
+
+/* ------------------------------------------------------------------ *
+ * ns-kpi — dense stat card with sparkline (Encore/Pulsar-grade)
+ * ------------------------------------------------------------------ */
+
+.ns-kpi { position: relative; display: grid; gap: var(--ns-space-1); padding: var(--ns-space-4);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-card); min-width: 0;
+  text-align: left; cursor: pointer; font: inherit; color: inherit; align-content: start; }
+.ns-kpi__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--ns-muted-fg); display: flex; align-items: center; gap: var(--ns-space-2); }
+.ns-kpi__arrow { margin-left: auto; opacity: 0; color: var(--ns-muted-fg); transition: opacity 120ms ease, transform 120ms ease; }
+.ns-kpi:hover .ns-kpi__arrow { opacity: 0.7; transform: translateX(2px); }
+.ns-kpi:hover { border-color: var(--ns-border-strong); }
+.ns-kpi:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 2px; }
+.ns-kpi__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xl); font-weight: 600;
+  line-height: 1.1; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-kpi__delta { font-size: var(--ns-text-2xs); font-family: var(--ns-font-mono); color: var(--ns-success); }
+.ns-kpi__delta[data-tone='warning'] { color: var(--ns-warning); }
+.ns-kpi__delta[data-tone='destructive'] { color: var(--ns-destructive); }
+.ns-kpi__foot { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0.01em; }
+.ns-kpi__spark { width: 100%; height: 34px; margin-top: var(--ns-space-1-5); }
+.ns-kpi__spark path[data-part='line'] { fill: none; stroke-width: 1.5; stroke: var(--ns-primary); }
+.ns-kpi__spark path[data-part='fill'] { stroke: none; fill: color-mix(in oklab, var(--ns-primary), transparent 88%); }
+.ns-kpi[data-tone='success'] .ns-kpi__spark path[data-part='line'] { stroke: var(--ns-success); }
+.ns-kpi[data-tone='success'] .ns-kpi__spark path[data-part='fill'] { fill: color-mix(in oklab, var(--ns-success), transparent 88%); }
+.ns-kpi[data-tone='warning'] .ns-kpi__spark path[data-part='line'] { stroke: var(--ns-warning); }
+.ns-kpi[data-tone='warning'] .ns-kpi__spark path[data-part='fill'] { fill: color-mix(in oklab, var(--ns-warning), transparent 88%); }
+.ns-kpi[data-tone='destructive'] .ns-kpi__spark path[data-part='line'] { stroke: var(--ns-destructive); }
+.ns-kpi[data-tone='destructive'] .ns-kpi__spark path[data-part='fill'] { fill: color-mix(in oklab, var(--ns-destructive), transparent 88%); }
+
+/* ------------------------------------------------------------------ *
+ * ns-throughput — hero KPI card (Conversion-Rate archetype):
+ * header (eyebrow + hero value + delta + Details) → funnel table →
+ * filled area chart with baseline grid + axis labels.
+ * ------------------------------------------------------------------ */
+.ns-throughput { display: flex; flex-direction: column; gap: var(--ns-space-3-5);
+  padding: var(--ns-space-4) var(--ns-space-5) var(--ns-space-5); min-width: 0; }
+.ns-throughput__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ns-space-3); }
+.ns-throughput__title-wrap { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-throughput__eyebrow { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--ns-muted-fg); }
+.ns-throughput__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xl); font-weight: 700;
+  line-height: 1.02; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; display: flex;
+  align-items: baseline; gap: var(--ns-space-2); flex-wrap: wrap; color: var(--ns-fg); }
+.ns-throughput__unit { font-size: var(--ns-text-base); font-weight: 500; color: var(--ns-muted-fg); letter-spacing: 0; }
+.ns-throughput__delta { align-self: center; }
+
+/* Card-action affordance ("Details" / "See All" pill top-right of cards) */
+.ns-cardaction { flex: none; border: 1px solid var(--ns-border); background: var(--ns-card); color: var(--ns-fg);
+  font: inherit; font-size: var(--ns-text-xs); font-weight: 500; padding: var(--ns-space-1) var(--ns-space-3);
+  border-radius: var(--ns-radius-md); cursor: pointer; white-space: nowrap; transition: background 120ms ease, border-color 120ms ease; }
+.ns-cardaction:hover { background: var(--ns-surface-raised); border-color: var(--ns-border-strong); }
+.ns-cardaction:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 2px; }
+
+/* Funnel breakdown table: label · metric · colored trend arrow (column-aligned) */
+.ns-funnel { display: grid; gap: 0; border-top: 1px solid var(--ns-border); }
+.ns-funnel__row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--ns-space-3);
+  padding: var(--ns-space-2) var(--ns-space-1); border: 0; border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent);
+  background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left; min-width: 0; }
+.ns-funnel__row:last-child { border-bottom: 0; }
+.ns-funnel__row:hover { background: var(--ns-surface-raised); }
+.ns-funnel__label { font-size: var(--ns-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-funnel__metric { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 600;
+  font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; }
+.ns-trendarrow__glyph { font-size: var(--ns-text-2xs); margin-right: 2px; }
+
+/* ns-areachart — filled area chart with baseline grid + axis labels */
+.ns-areachart { position: relative; display: grid; gap: var(--ns-space-1-5); margin-top: auto; }
+.ns-areachart__svg { width: 100%; height: 92px; display: block; }
+.ns-areachart__grid line { stroke: color-mix(in oklab, var(--ns-border) 70%, transparent); stroke-width: 1;
+  vector-effect: non-scaling-stroke; }
+.ns-areachart__svg path[data-part='fill'] { stroke: none; fill: color-mix(in oklab, var(--ns-primary), transparent 82%); }
+.ns-areachart__svg path[data-part='line'] { fill: none; stroke: var(--ns-primary); stroke-width: 2;
+  vector-effect: non-scaling-stroke; stroke-linejoin: round; }
+.ns-areachart__svg path[data-part='compare-fill'] { stroke: none; fill: color-mix(in oklab, var(--ns-primary), transparent 93%); }
+.ns-areachart__svg path[data-part='compare-line'] { fill: none; stroke: color-mix(in oklab, var(--ns-primary), transparent 55%);
+  stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
+.ns-areachart[data-tone='success'] .ns-areachart__svg path[data-part='fill'] { fill: color-mix(in oklab, var(--ns-success), transparent 82%); }
+.ns-areachart[data-tone='success'] .ns-areachart__svg path[data-part='line'] { stroke: var(--ns-success); }
+.ns-areachart__axis { display: flex; justify-content: space-between; font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); letter-spacing: 0.02em; }
+
+/* ns-linechart — line chart with a floating value tooltip on a marker point */
+.ns-linechart { position: relative; }
+.ns-linechart__svg { width: 100%; height: 120px; display: block; }
+.ns-linechart__svg path[data-part='line'] { fill: none; stroke: var(--ns-primary); stroke-width: 2;
+  vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
+.ns-linechart__svg line[data-part='crosshair'] { stroke: color-mix(in oklab, var(--ns-border-strong) 80%, transparent);
+  stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
+.ns-linechart__svg circle[data-part='dot'] { fill: var(--ns-primary); stroke: var(--ns-card); stroke-width: 2; }
+.ns-linechart__tip { position: absolute; transform: translate(-50%, calc(-100% - 8px)); background: var(--ns-fg);
+  color: var(--ns-bg); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600;
+  padding: 2px var(--ns-space-2); border-radius: var(--ns-radius-sm); white-space: nowrap; pointer-events: none;
+  box-shadow: var(--ns-shadow-sm); }
+.ns-linechart__tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
+  border: 4px solid transparent; border-top-color: var(--ns-fg); }
+.ns-linechart__foot { display: flex; align-items: center; gap: var(--ns-space-3); flex-wrap: wrap;
+  padding-top: var(--ns-space-2-5); margin-top: var(--ns-space-1); border-top: 1px solid var(--ns-border);
+  font-size: var(--ns-text-xs); color: var(--ns-muted-fg); }
+.ns-linechart__foot b { color: var(--ns-fg); font-family: var(--ns-font-mono); font-weight: 600; }
+.ns-linechart__foot-sep { color: var(--ns-border-strong); }
+
+/* ns-barchart — vertical bars with value labels above (Product-Performance) */
+.ns-barchart { display: flex; align-items: flex-end; gap: var(--ns-space-2-5); height: 130px; padding-top: var(--ns-space-4); }
+.ns-barchart__bar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end;
+  height: 100%; gap: var(--ns-space-1); }
+.ns-barchart__fill { position: relative; width: 100%; border-radius: var(--ns-radius-md) var(--ns-radius-md) 0 0;
+  background: var(--ns-primary); min-height: 4px; display: flex; align-items: flex-start; justify-content: center; }
+.ns-barchart__bar[data-tone='muted'] .ns-barchart__fill { background: color-mix(in oklab, var(--ns-primary), transparent 55%); }
+.ns-barchart__val { position: absolute; top: -1.35rem; font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs);
+  font-weight: 600; color: var(--ns-fg); }
+.ns-barchart__label { text-align: center; font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  font-family: var(--ns-font-mono); }
+
+/* outcome split bar (success/timeout/error) */
+.ns-splitbar { display: flex; height: 8px; border-radius: var(--ns-radius-full); overflow: hidden; background: var(--ns-muted); }
+.ns-splitbar > span { height: 100%; }
+.ns-splitbar__legend { display: flex; gap: var(--ns-space-4); flex-wrap: wrap; font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-splitbar__legend b { color: var(--ns-fg); font-weight: 600; }
+
+/* ------------------------------------------------------------------ *
+ * ns-assist / ns-incident — grounded AI assist (calm card, 2px primary
+ * left edge, ✦ glyph, NO gradient). An assist always shows its grounding
+ * and terminates in a deep-link or a confirm+CLI action.
+ * ------------------------------------------------------------------ */
+
+.ns-assist, .ns-incident { display: grid; gap: var(--ns-space-2-5); padding: var(--ns-space-4) var(--ns-space-5);
+  border: 1px solid var(--ns-border); border-left: 2px solid var(--ns-primary);
+  border-radius: var(--ns-radius-lg); background: var(--ns-card); }
+.ns-incident { border-color: color-mix(in oklab, var(--ns-primary-border), var(--ns-border) 30%); border-left-color: var(--ns-primary);
+  background: linear-gradient(135deg, color-mix(in oklab, var(--ns-primary-subtle), transparent 40%), var(--ns-card)); }
+.ns-assist__head, .ns-incident__head { display: flex; align-items: center; gap: var(--ns-space-2);
+  font-size: var(--ns-text-sm); font-weight: 600; }
+.ns-assist__head::before, .ns-incident__head::before { content: '✦'; color: var(--ns-primary); }
+.ns-assist[data-state='thinking'] .ns-assist__head::before { animation: ns-assist-blink 1.2s ease-in-out infinite; }
+@keyframes ns-assist-blink { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .ns-assist[data-state='thinking'] .ns-assist__head::before { animation: none; } }
+.ns-assist__summary, .ns-incident__summary { font-size: var(--ns-text-sm); line-height: var(--ns-leading-relaxed); color: var(--ns-fg); }
+.ns-assist__grounding, .ns-incident__grounding { display: flex; flex-wrap: wrap; gap: var(--ns-space-1-5); align-items: center; }
+.ns-assist__grounding-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ns-muted-fg); margin-right: var(--ns-space-1); }
+.ns-ground { display: inline-flex; align-items: center; gap: 3px; padding: 1px var(--ns-space-2);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm); background: var(--ns-surface);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  cursor: pointer; text-decoration: none; }
+.ns-ground::before { content: '◸'; color: color-mix(in oklab, var(--ns-primary) 60%, var(--ns-muted-fg)); }
+.ns-ground:hover { border-color: var(--ns-primary-border); color: var(--ns-fg); }
+.ns-assist__actions, .ns-incident__actions { display: flex; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-assist__meta, .ns-incident__meta { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-ai-chip { display: inline-flex; align-items: center; gap: var(--ns-space-1); padding: var(--ns-space-1) var(--ns-space-2-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full); background: var(--ns-card);
+  font-size: var(--ns-text-2xs); color: var(--ns-fg); cursor: pointer; font-family: var(--ns-font-sans); }
+.ns-ai-chip:hover { border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); }
+
+/* agent trace: tool-call rows reuse ns-tool-call from the DS; add trace rail glue */
+.ns-agent-turn { display: grid; gap: var(--ns-space-2); padding: var(--ns-space-3) 0;
+  border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent); }
+.ns-agent-turn:last-child { border-bottom: 0; }
+.ns-agent-turn__head { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-agent-turn__role { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--ns-muted-fg); }
+.ns-agent-turn__text { font-size: var(--ns-text-sm); line-height: var(--ns-leading-relaxed); }
+
+/* ------------------------------------------------------------------ *
+ * ns-statlink — deep-linking health stat card (S1)
+ * ------------------------------------------------------------------ */
+
+.ns-statlink {
+  display: flex; flex-direction: column; gap: var(--ns-space-2); width: 100%;
+  text-align: left; padding: var(--ns-space-3-5) var(--ns-space-4);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
+  background: var(--ns-card); color: var(--ns-card-fg);
+  cursor: pointer; text-decoration: none; font: inherit; position: relative; overflow: hidden;
+  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
+}
+/* left accent tick keyed to tone (warm, subtle) */
+.ns-statlink::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+  background: transparent; transition: background 120ms ease; }
+.ns-statlink[data-tone='warning']::before { background: var(--ns-warning); }
+.ns-statlink[data-tone='success']::before { background: color-mix(in oklab, var(--ns-success) 65%, transparent); }
+.ns-statlink:hover {
+  border-color: color-mix(in oklab, var(--ns-primary) 50%, var(--ns-border));
+  transform: translateY(-1px); box-shadow: var(--ns-shadow-sm);
+}
+.ns-statlink:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 2px; }
+.ns-statlink[data-tone='warning'] { border-color: var(--ns-warning-border); }
+.ns-statlink__top { display: flex; align-items: center; gap: var(--ns-space-2-5); }
+.ns-statlink__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
+  flex: none; border-radius: var(--ns-radius-md); background: color-mix(in oklab, var(--ns-fg) 5%, transparent);
+  color: var(--ns-muted-fg); font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); }
+.ns-statlink__icon[data-tone='warning'] { background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-statlink__icon[data-tone='success'] { background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-statlink__pill { margin-left: auto; flex: none; }
+.ns-statlink__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xl); font-weight: 600;
+  line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
+.ns-statlink__label { font-size: var(--ns-text-sm); font-weight: 600; }
+.ns-statlink__foot { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ns-space-2);
+  font-size: var(--ns-text-xs); color: var(--ns-muted-fg); }
+.ns-statlink__detail { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: var(--ns-leading-snug); }
+.ns-statlink__arrow { opacity: 0.5; transition: opacity 120ms ease, transform 120ms ease; flex: none; margin-top: 1px; }
+.ns-statlink:hover .ns-statlink__arrow { opacity: 1; transform: translateX(2px); }
+
+/* ------------------------------------------------------------------ *
+ * ns-quickcmd — inline command list (S1, ⌘K teaser)
+ * ------------------------------------------------------------------ */
+
+.ns-quickcmd { display: flex; align-items: center; gap: var(--ns-space-3); width: 100%; text-align: left;
+  font: inherit; padding: var(--ns-space-2-5) var(--ns-space-4); background: transparent; border: 0; cursor: pointer;
+  color: var(--ns-card-fg); border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent); }
+.ns-quickcmd:last-child { border-bottom: 0; }
+.ns-quickcmd:hover, .ns-quickcmd:focus-visible { background: var(--ns-surface); outline: none; }
+.ns-quickcmd__icon { font-family: var(--ns-font-mono); color: var(--ns-muted-fg); width: 1.25rem; text-align: center; }
+.ns-quickcmd__label { font-size: var(--ns-text-sm); }
+.ns-quickcmd__hint { margin-left: auto; font-size: var(--ns-text-xs); color: var(--ns-muted-fg); }
+.ns-quickcmd__hint[data-ext='1']::after { content: ' ↗'; }
+
+/* ------------------------------------------------------------------ *
+ * ns-confirm — gated mutating-action dialog with CLI transparency
+ * ------------------------------------------------------------------ */
+
+.ns-confirm { width: min(30rem, calc(100vw - var(--ns-space-8))); margin: auto; padding: 0; border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-xl); background: var(--ns-card); color: var(--ns-card-fg); box-shadow: var(--ns-shadow-xl); }
+.ns-confirm:not([open]) { display: none; }
+.ns-confirm::backdrop { background: color-mix(in srgb, var(--ns-gray-12, #111) 45%, transparent);
+  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
+.ns-confirm[open] { animation: ns-confirm-enter 160ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+@keyframes ns-confirm-enter { from { opacity: 0; transform: translateY(0.5rem) scale(0.98); }
+  to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .ns-confirm[open] { animation-duration: 0.01ms; } }
+.ns-confirm__body { display: grid; gap: var(--ns-space-4); padding: var(--ns-space-5) var(--ns-space-5) var(--ns-space-4); }
+.ns-confirm__title { font-size: var(--ns-text-base); font-weight: 600; display: flex; align-items: center; gap: var(--ns-space-2); }
+.ns-confirm__desc { font-size: var(--ns-text-sm); color: var(--ns-muted-fg); line-height: var(--ns-leading-relaxed); }
+.ns-confirm__change { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); padding: var(--ns-space-2) var(--ns-space-3);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); }
+.ns-confirm__arrow { color: var(--ns-muted-fg); }
+.ns-confirm__cli-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--ns-muted-fg); }
+.ns-confirm__foot { display: flex; justify-content: flex-end; gap: var(--ns-space-2);
+  padding: var(--ns-space-3) var(--ns-space-5) var(--ns-space-4); border-top: 1px solid var(--ns-border);
+  background: color-mix(in oklab, var(--ns-surface), transparent 40%); }
+
+/* ------------------------------------------------------------------ *
+ * ns-newpill — "N new changes" catch-up pill on paused live feeds
+ * ------------------------------------------------------------------ */
+
+.ns-newpill { display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  padding: var(--ns-space-1) var(--ns-space-3); border: 1px solid var(--ns-primary-border);
+  border-radius: var(--ns-radius-full); background: var(--ns-primary-subtle); color: var(--ns-primary);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); cursor: pointer; font-weight: 500; }
+.ns-newpill:hover { background: color-mix(in oklab, var(--ns-primary-subtle), var(--ns-primary) 8%); }
+.ns-newpill::before { content: '↑'; }
+
+/* ------------------------------------------------------------------ *
+ * ns-livedot — SSE liveness indicator
+ * ------------------------------------------------------------------ */
+
+.ns-livedot { display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--ns-muted-fg); }
+.ns-livedot::before { content: ''; width: 6px; height: 6px; border-radius: var(--ns-radius-full);
+  background: var(--ns-success); animation: ns-livedot-pulse 2s ease-in-out infinite; }
+.ns-livedot[data-state='paused']::before { background: var(--ns-border-strong); animation: none; }
+@keyframes ns-livedot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
+@media (prefers-reduced-motion: reduce) { .ns-livedot::before { animation: none; } }
+
+/* ------------------------------------------------------------------ *
+ * ns-diff — config/schema diff lines
+ * ------------------------------------------------------------------ */
+
+.ns-diff { display: flex; flex-direction: column; font-family: var(--ns-font-mono); font-size: var(--ns-text-xs);
+  line-height: var(--ns-leading-normal); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md);
+  background: var(--ns-surface); overflow-x: auto; padding: var(--ns-space-2) 0; }
+.ns-diff__line { padding: 1px var(--ns-space-3); white-space: pre; color: var(--ns-muted-fg); }
+.ns-diff__line[data-op='add'] { background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-diff__line[data-op='del'] { background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-diff__line[data-op='ctx'] { color: var(--ns-muted-fg); }
+
+/* ------------------------------------------------------------------ *
+ * ns-verchain — versioned current-pointer chain (S3: v41 → v42 → v43)
+ * ------------------------------------------------------------------ */
+
+.ns-verchain { display: flex; flex-direction: column; }
+.ns-verchain__step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--ns-space-3); padding: var(--ns-space-2) 0; }
+.ns-verchain__step::before { content: ''; position: absolute; left: 10px; top: calc(var(--ns-space-2) + 22px);
+  bottom: calc(-1 * var(--ns-space-2)); width: 1px; background: var(--ns-border); }
+.ns-verchain__step:last-child::before { display: none; }
+.ns-verchain__tag { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px;
+  padding-inline: var(--ns-space-1); margin-top: 1px; border: 1px solid var(--ns-border-strong);
+  border-radius: var(--ns-radius-full); background: var(--ns-bg); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); flex: none; }
+.ns-verchain__step[data-state='current'] .ns-verchain__tag { border-color: var(--ns-primary);
+  background: var(--ns-primary-subtle); color: var(--ns-primary); font-weight: 600; }
+.ns-verchain__main { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-verchain__title { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap;
+  font-size: var(--ns-text-sm); font-weight: 500; }
+.ns-verchain__meta { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+
+/* ------------------------------------------------------------------ *
+ * ns-axismap — plugin contribution-axis grid (S5)
+ * ------------------------------------------------------------------ */
+
+.ns-axismap { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--ns-space-2); }
+.ns-axismap__axis { display: flex; align-items: center; gap: var(--ns-space-2);
+  padding: var(--ns-space-2) var(--ns-space-3); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-md); background: var(--ns-surface);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-axismap__axis[data-state='wired'] { border-color: var(--ns-primary-border); background: var(--ns-primary-subtle);
+  color: var(--ns-fg); }
+.ns-axismap__axis[data-state='wired']::before { content: '●'; font-size: 7px; color: var(--ns-primary); }
+.ns-axismap__axis:not([data-state='wired'])::before { content: '○'; font-size: 7px;
+  color: color-mix(in oklab, var(--ns-muted-fg), transparent 40%); }
+
+/* ------------------------------------------------------------------ *
+ * ns-journey — causal seam chain (S13). NOT a waterfall: no durations,
+ * no proportional widths — primitive badge + seam payload only.
+ * ------------------------------------------------------------------ */
+
+.ns-journey { display: flex; flex-direction: column; }
+.ns-journey__node { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--ns-space-3); padding: var(--ns-space-2-5) 0; }
+.ns-journey__node::before { content: ''; position: absolute; left: 13px; top: calc(var(--ns-space-2-5) + 28px);
+  bottom: calc(-1 * var(--ns-space-2-5) + 2px); width: 1px;
+  background: linear-gradient(var(--ns-border-strong), var(--ns-border)); }
+.ns-journey__node:last-child::before { display: none; }
+.ns-journey__node[data-halted='1']::before { background: repeating-linear-gradient(
+  var(--ns-destructive-border) 0 3px, transparent 3px 6px); }
+.ns-journey__glyph { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px;
+  margin-top: 1px; border: 1px solid var(--ns-border-strong); border-radius: var(--ns-radius-md);
+  background: var(--ns-card); font-size: var(--ns-text-xs); color: var(--ns-muted-fg); flex: none; }
+.ns-journey__node[data-state='completed'] .ns-journey__glyph { border-color: var(--ns-success-border);
+  background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-journey__node[data-state='running'] .ns-journey__glyph { border-color: var(--ns-primary-border);
+  background: var(--ns-primary-subtle); color: var(--ns-primary); animation: ns-journey-pulse 1.6s ease-in-out infinite; }
+.ns-journey__node[data-state='retrying'] .ns-journey__glyph,
+.ns-journey__node[data-state='failed'] .ns-journey__glyph { border-color: var(--ns-warning-border);
+  background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-journey__node[data-state='failed'] .ns-journey__glyph { border-color: var(--ns-destructive-border);
+  background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+@keyframes ns-journey-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ns-primary), transparent 60%); }
+  70% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--ns-primary), transparent 100%); } }
+@media (prefers-reduced-motion: reduce) { .ns-journey__node[data-state='running'] .ns-journey__glyph { animation: none; } }
+.ns-journey__main { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-journey__head { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; min-width: 0; }
+.ns-journey__name { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 500; color: var(--ns-fg);
+  overflow-wrap: anywhere; }
+.ns-journey__seam { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-journey__prim { display: inline-flex; align-items: center; padding: 1px var(--ns-space-2);
+  border-radius: var(--ns-radius-full); font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.08em; border: 1px solid var(--ns-border);
+  background: var(--ns-surface); color: var(--ns-muted-fg); flex: none; }
+.ns-journey__prim[data-prim='http'] { border-color: var(--ns-accent-border, var(--ns-border)); color: var(--ns-accent-fg, var(--ns-fg));
+  background: var(--ns-accent-subtle, var(--ns-surface)); }
+.ns-journey__prim[data-prim='contract'] { border-color: var(--ns-primary-border); color: var(--ns-primary); background: var(--ns-primary-subtle); }
+.ns-journey__prim[data-prim='worker'] { border-color: color-mix(in oklab, var(--ns-warning-border), var(--ns-border) 40%); }
+.ns-journey__prim[data-prim='saga'] { border-color: color-mix(in oklab, var(--ns-success-border), var(--ns-border) 40%); }
+.ns-journey__node[data-selected='1'] > .ns-journey__main > .ns-journey__head .ns-journey__name { color: var(--ns-primary); }
+
+/* ------------------------------------------------------------------ *
+ * ns-flow-grid — Live Flow 3-column layout (flows rail | journey | seam rail)
+ * ------------------------------------------------------------------ */
+.ns-flow-grid { display: grid; gap: var(--ns-space-5); align-items: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 1024px) { .ns-flow-grid { grid-template-columns: 16rem minmax(0, 1fr); } }
+@media (min-width: 1440px) { .ns-flow-grid { grid-template-columns: 16rem minmax(0, 1fr) 19rem; } }
+/* the seam rail folds under the journey until we have room for a 3rd column */
+@media (max-width: 1439.98px) { .ns-flow-grid > .ns-seamrail { display: none; } }
+
+/* ------------------------------------------------------------------ *
+ * ns-flowhero — flow-summary band: chain-progress arc + correlation
+ * split-panel + seam-outcome split (refs 04/05 gauge, 01 KV, 03 channel)
+ * ------------------------------------------------------------------ */
+.ns-flowhero { display: grid; gap: var(--ns-space-4); padding: var(--ns-space-4) var(--ns-space-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-card);
+  box-shadow: var(--ns-shadow-xs); grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 720px) { .ns-flowhero { grid-template-columns: 10.5rem minmax(0, 1fr); align-items: center; gap: var(--ns-space-5); } }
+.ns-flowhero__gauge { display: grid; gap: var(--ns-space-2-5); justify-items: center; }
+.ns-flowhero .ns-gauge { max-width: 9.5rem; margin-top: 0; }
+.ns-gauge__of { color: var(--ns-muted-fg); font-size: var(--ns-text-base); font-weight: 600; }
+.ns-gauge__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.12em; color: var(--ns-muted-fg); margin-top: 1px; }
+.ns-flowhero__spine { display: flex; align-items: center; gap: var(--ns-space-1); }
+.ns-flowhero__spine-dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
+  border-radius: var(--ns-radius-sm); border: 1px solid var(--ns-border-strong); background: var(--ns-surface);
+  font-size: 11px; color: var(--ns-muted-fg); position: relative; }
+.ns-flowhero__spine-dot:not(:last-child)::after { content: ''; position: absolute; right: -5px; top: 50%;
+  width: 4px; height: 1px; background: var(--ns-border-strong); }
+.ns-flowhero__spine-dot[data-tone='success'] { border-color: var(--ns-success-border); background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-flowhero__spine-dot[data-tone='warning'] { border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-flowhero__spine-dot[data-tone='destructive'] { border-color: var(--ns-destructive-border); background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-flowhero__body { display: grid; gap: var(--ns-space-3); min-width: 0; }
+.ns-flowhero__top { display: flex; align-items: center; gap: var(--ns-space-2-5); flex-wrap: wrap; }
+.ns-flowhero__route { font-family: var(--ns-font-mono); font-size: var(--ns-text-base); font-weight: 600; color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ns-kv--split { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); display: grid; gap: var(--ns-space-1-5) var(--ns-space-5); }
+.ns-kv--split .ns-kv__row { justify-content: flex-start; gap: var(--ns-space-2); }
+.ns-kv--split .ns-kv__val { text-align: left; }
+.ns-dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--ns-radius-full);
+  margin-right: var(--ns-space-1-5); vertical-align: middle; }
+
+/* --- ns-journey--rich: card-row nodes with a right seam-value cell ---------- */
+.ns-journey--rich .ns-journey__node { padding: var(--ns-space-3) var(--ns-space-2-5); border-radius: var(--ns-radius-md);
+  border: 1px solid transparent; transition: background 120ms ease, border-color 120ms ease; }
+.ns-journey--rich .ns-journey__node::before { left: 26px; top: calc(var(--ns-space-3) + 34px); bottom: -2px; }
+.ns-journey--rich .ns-journey__node[data-selected='1'] { background: var(--ns-primary-subtle);
+  border-color: var(--ns-primary-border); box-shadow: inset 3px 0 0 var(--ns-primary); }
+.ns-journey--rich .ns-journey__node:hover:not([data-selected='1']) { background: var(--ns-surface-raised); }
+.ns-journey--rich .ns-journey__glyph { width: 30px; height: 30px; font-size: var(--ns-text-sm); }
+.ns-journey__hit { all: unset; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center; column-gap: var(--ns-space-3); row-gap: 2px; width: 100%; }
+.ns-journey__hit .ns-journey__head { grid-column: 1; grid-row: 1; }
+.ns-journey__hit .ns-journey__seam { grid-column: 1; grid-row: 2; }
+.ns-journey__val { grid-column: 2; grid-row: 1 / span 2; font-family: var(--ns-font-mono); font-size: var(--ns-text-sm);
+  font-weight: 600; color: var(--ns-fg); text-align: right; padding: 2px var(--ns-space-2-5); border-radius: var(--ns-radius-sm);
+  background: var(--ns-surface); border: 1px solid var(--ns-border); white-space: nowrap; }
+.ns-journey__node[data-state='completed'] .ns-journey__val { color: var(--ns-success); border-color: var(--ns-success-border); background: var(--ns-success-subtle); }
+.ns-journey__node[data-state='failed'] .ns-journey__val { color: var(--ns-destructive); border-color: var(--ns-destructive-border); background: var(--ns-destructive-subtle); }
+.ns-journey__node[data-state='retrying'] .ns-journey__val,
+.ns-journey__node[data-state='running'] .ns-journey__val { color: var(--ns-warning); border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); }
+.ns-journey__sub { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; margin-top: 2px; }
+.ns-journey__caption { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--ns-muted-fg); padding: 0 var(--ns-space-1-5); border-radius: var(--ns-radius-sm);
+  background: var(--ns-muted); }
+/* edge branch-label floating on the causal connector (ref 21) */
+.ns-journey--rich .ns-journey__node { padding-bottom: var(--ns-space-4); }
+.ns-journey__edge { position: absolute; left: 38px; bottom: 2px;
+  font-family: var(--ns-font-mono); font-size: 9px; letter-spacing: 0.02em; color: var(--ns-muted-fg);
+  background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full);
+  padding: 1px var(--ns-space-1-5); white-space: nowrap; z-index: 1; }
+.ns-journey--rich .ns-journey__node[data-halted='1'] .ns-journey__edge { color: var(--ns-destructive); border-color: var(--ns-destructive-border); }
+.ns-journey__spawn { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); margin-top: var(--ns-space-1-5);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-journey__spawn-tick { width: 10px; height: 10px; border-left: 1px solid var(--ns-border-strong);
+  border-bottom: 1px solid var(--ns-border-strong); border-bottom-left-radius: 3px; }
+/* fan-out delivery visual on the stream node */
+.ns-fanout { display: flex; flex-wrap: wrap; gap: var(--ns-space-1-5); margin-top: var(--ns-space-2); }
+.ns-fanout__leg { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); padding: 2px var(--ns-space-2);
+  border: 1px solid var(--ns-success-border); border-radius: var(--ns-radius-full); background: var(--ns-success-subtle);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-success-fg, var(--ns-fg)); }
+.ns-fanout__leg .ns-fanout__dot { width: 6px; height: 6px; border-radius: var(--ns-radius-full); background: var(--ns-success); }
+.ns-fanout__leg[data-state='failed'] { border-color: var(--ns-destructive-border); background: var(--ns-destructive-subtle); }
+.ns-fanout__leg[data-state='failed'] .ns-fanout__dot { background: var(--ns-destructive); }
+.ns-fanout__leg::before { content: '≋'; opacity: 0.55; }
+.ns-fanout__leg[data-state='failed']::before { content: '⊘'; opacity: 0.8; }
+.ns-journey__legend { display: inline-flex; align-items: center; gap: var(--ns-space-3); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-journey__legend-item { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); }
+.ns-journey__legend-line { display: inline-block; width: 16px; height: 0; border-top: 1px solid var(--ns-border-strong); }
+.ns-journey__legend-line[data-halted='1'] { border-top-style: dashed; border-color: var(--ns-destructive-border); }
+
+/* flowrow mini seam-chain dot strip */
+.ns-flowrow__chain { display: flex; align-items: center; gap: 3px; margin-top: 2px; }
+.ns-flowrow__chaindot { width: 6px; height: 6px; border-radius: var(--ns-radius-full); background: var(--ns-border-strong);
+  position: relative; }
+.ns-flowrow__chaindot:not(:last-child)::after { content: ''; position: absolute; right: -3px; top: 50%;
+  width: 3px; height: 1px; background: var(--ns-border); }
+.ns-flowrow__chaindot[data-tone='success'] { background: var(--ns-success); }
+.ns-flowrow__chaindot[data-tone='warning'] { background: var(--ns-warning); }
+.ns-flowrow__chaindot[data-tone='destructive'] { background: var(--ns-destructive); }
+
+/* ------------------------------------------------------------------ *
+ * ns-flowrow — S13 flow list item (rail)
+ * ------------------------------------------------------------------ */
+
+.ns-flowrow { display: grid; gap: 3px; width: 100%; text-align: left; font: inherit; color: inherit;
+  padding: var(--ns-space-2) var(--ns-space-3); border: 1px solid transparent; border-radius: var(--ns-radius-md);
+  background: transparent; cursor: pointer; min-width: 0; }
+.ns-flowrow:hover { background: var(--ns-surface-raised); }
+.ns-flowrow[data-state='selected'] { background: var(--ns-primary-subtle); border-color: var(--ns-primary-border); }
+.ns-flowrow:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 1px; }
+.ns-flowrow__route { display: flex; align-items: center; gap: var(--ns-space-2); min-width: 0;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-fg); }
+.ns-flowrow__route > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ns-flowrow__dot { width: 7px; height: 7px; border-radius: var(--ns-radius-full); flex: none; background: var(--ns-success); }
+.ns-flowrow__dot[data-tone='warning'] { background: var(--ns-warning); }
+.ns-flowrow__dot[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-flowrow__dot[data-tone='primary'] { background: var(--ns-primary); }
+.ns-flowrow__meta { display: flex; align-items: center; gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); white-space: nowrap; overflow: hidden; }
+
+/* hardening: mono identifiers never wrap mid-name */
+.ns-tree-nav__item, .ns-entity-rail__title > span:first-child { white-space: nowrap; }
+
+/* ------------------------------------------------------------------ *
+ * ns-step-timeline — compensation branch (rollback path, distinct
+ * from forward progress: warning rail + reverse marker)
+ * ------------------------------------------------------------------ */
+
+.ns-step-timeline__step[data-comp='1'] { background: color-mix(in oklab, var(--ns-warning-subtle), transparent 45%);
+  border-left: 2px solid var(--ns-warning); border-radius: var(--ns-radius-sm);
+  padding-left: var(--ns-space-3); margin-left: calc(-1 * var(--ns-space-3)); }
+.ns-step-timeline__step[data-comp='1'] .ns-step-timeline__marker { border-style: double; }
+.ns-step-timeline__comp-tag { display: inline-flex; align-items: center; gap: 3px;
+  padding: 0 var(--ns-space-1-5); border: 1px solid var(--ns-warning-border); border-radius: var(--ns-radius-full);
+  background: var(--ns-warning-subtle); color: var(--ns-warning); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); line-height: 1.7; }
+.ns-step-timeline__comp-tag::before { content: '⟲'; }
+
+/* ------------------------------------------------------------------ *
+ * ns-runhero — Run Inspector summary: step-progress arc + correlation
+ * split-panel + attempt/compensation tiles (refs 04/05 arc, 01 KV, 04 tiles)
+ * ------------------------------------------------------------------ */
+.ns-runhero { display: grid; gap: var(--ns-space-4); padding: var(--ns-space-4) var(--ns-space-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-card);
+  box-shadow: var(--ns-shadow-xs); grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 560px) { .ns-runhero { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: var(--ns-space-5); } }
+.ns-runhero__gauge { display: grid; justify-items: center; }
+.ns-runhero .ns-gauge { max-width: 9rem; margin-top: 0; }
+.ns-runhero__body { display: grid; gap: var(--ns-space-3); min-width: 0; }
+.ns-runhero__top { display: flex; align-items: center; gap: var(--ns-space-2-5); flex-wrap: wrap; }
+.ns-runhero__name { font-family: var(--ns-font-mono); font-size: var(--ns-text-base); font-weight: 600; color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ns-runhero__corr-note { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+/* attempt/compensation stat tiles */
+.ns-runstat { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ns-space-2-5);
+  border-top: 1px solid var(--ns-border); padding-top: var(--ns-space-3); }
+.ns-runstat__tile { display: grid; gap: 2px; }
+.ns-runstat__val { font-family: var(--ns-font-mono); font-size: var(--ns-text-xl); font-weight: 700;
+  line-height: 1.05; color: var(--ns-fg); font-variant-numeric: tabular-nums; }
+.ns-runstat__val[data-tone='warning'] { color: var(--ns-warning); }
+.ns-runstat__val[data-tone='primary'] { color: var(--ns-primary); }
+.ns-runstat__of { color: var(--ns-muted-fg); font-size: var(--ns-text-base); font-weight: 600; }
+.ns-runstat__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--ns-muted-fg); }
+
+/* ns-runrow — Run Inspector rail item with a primitive glyph tile */
+.ns-runrow { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--ns-space-2-5); align-items: start; }
+.ns-runrow__glyph { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
+  margin-top: 1px; border-radius: var(--ns-radius-sm); border: 1px solid var(--ns-border-strong);
+  background: var(--ns-surface); font-size: var(--ns-text-sm); color: var(--ns-muted-fg); flex: none; }
+.ns-runrow__glyph[data-prim='sagas'] { border-color: var(--ns-success-border); color: var(--ns-success); background: var(--ns-success-subtle); }
+.ns-runrow__glyph[data-prim='workers'] { border-color: var(--ns-warning-border); color: var(--ns-warning); background: var(--ns-warning-subtle); }
+.ns-runrow__glyph[data-prim='triggers'] { border-color: var(--ns-primary-border); color: var(--ns-primary); background: var(--ns-primary-subtle); }
+.ns-runrow__glyph[data-prim='streams'] { border-color: var(--ns-accent-border, var(--ns-border-strong)); color: var(--ns-accent-fg, var(--ns-fg)); background: var(--ns-accent-subtle, var(--ns-surface)); }
+.ns-runrow__body { display: grid; gap: var(--ns-space-1); min-width: 0; }
+
+/* ns-statstrip — console stat strip (ref 11): eyebrow + big value tiles */
+.ns-statstrip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-2-5); }
+@media (min-width: 560px) { .ns-statstrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+.ns-statstrip__tile { display: grid; gap: var(--ns-space-1); padding: var(--ns-space-3) var(--ns-space-3-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-card); box-shadow: var(--ns-shadow-xs); }
+.ns-statstrip__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--ns-muted-fg); }
+.ns-statstrip__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xl); font-weight: 700;
+  line-height: 1; color: var(--ns-fg); font-variant-numeric: tabular-nums; }
+.ns-statstrip__value[data-tone='warning'] { color: var(--ns-warning); }
+.ns-statstrip__value[data-tone='primary'] { color: var(--ns-primary); }
+.ns-statstrip__value[data-tone='destructive'] { color: var(--ns-destructive); }
+
+/* ns-runtable — console-style run list with a sortable column header (ref 11) */
+.ns-runtable { display: grid; gap: 0; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
+  background: var(--ns-card); overflow: hidden; }
+.ns-runtable__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-2);
+  padding: var(--ns-space-2-5) var(--ns-space-3); border-bottom: 1px solid var(--ns-border); }
+.ns-runtable__title { font-size: var(--ns-text-xs); font-weight: 600; color: var(--ns-fg); }
+.ns-runtable__count { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  padding: 0 var(--ns-space-1-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full); }
+.ns-runtable__cols { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-2);
+  padding: var(--ns-space-1-5) var(--ns-space-3); border-bottom: 1px solid var(--ns-border); background: var(--ns-surface); }
+.ns-runtable__col { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--ns-muted-fg); display: inline-flex; align-items: center; gap: 3px; }
+.ns-runtable__col--sorted { color: var(--ns-fg); }
+.ns-runtable__sort { color: var(--ns-primary); }
+.ns-runtable .ns-entity-rail { padding: var(--ns-space-1-5); gap: 2px; }
+.ns-runtable .ns-entity-rail__item { border-radius: var(--ns-radius-md); }
+
+/* ns-seamsheet-hero — mobile seam-detail bottom-sheet header badges */
+.ns-seamsheet-hero { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap;
+  padding-bottom: var(--ns-space-1); }
+
+/* ------------------------------------------------------------------ *
+ * ns-step-timeline--data — data-point steps (ref 05 Work-Hour): each step
+ * carries a right-aligned datum chip; the active step floats a value tooltip.
+ * ------------------------------------------------------------------ */
+.ns-step-timeline--data .ns-step-timeline__step { padding: var(--ns-space-2-5) 0; }
+.ns-step-timeline--data .ns-step-timeline__title { flex-wrap: wrap; }
+.ns-step-timeline__n { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  min-width: 1.1rem; }
+.ns-step-timeline__datum { margin-left: auto; font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs);
+  font-weight: 600; color: var(--ns-fg); padding: 1px var(--ns-space-2); border-radius: var(--ns-radius-sm);
+  background: var(--ns-surface); border: 1px solid var(--ns-border); white-space: nowrap; }
+.ns-step-timeline__step[data-state='completed'] .ns-step-timeline__datum { color: var(--ns-success); border-color: var(--ns-success-border); background: var(--ns-success-subtle); }
+.ns-step-timeline__step[data-state='failed'] .ns-step-timeline__datum { color: var(--ns-destructive); border-color: var(--ns-destructive-border); background: var(--ns-destructive-subtle); }
+.ns-step-timeline__step[data-state='retrying'] .ns-step-timeline__datum,
+.ns-step-timeline__step[data-state='running'] .ns-step-timeline__datum { color: var(--ns-warning); border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); }
+/* the active step floats a data-point tooltip above its datum chip (ref 05) */
+.ns-step-timeline__datum { position: relative; }
+.ns-step-timeline__tip { position: absolute; right: -1px; bottom: calc(100% + 8px);
+  background: var(--ns-fg); color: var(--ns-card); font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  font-weight: 600; padding: 2px var(--ns-space-2); border-radius: var(--ns-radius-sm); white-space: nowrap;
+  box-shadow: var(--ns-shadow-sm); pointer-events: none; }
+.ns-step-timeline__tip::after { content: ''; position: absolute; right: 12px; top: 100%;
+  border: 4px solid transparent; border-top-color: var(--ns-fg); }
+/* a bolder compensation branch: indented reverse lane, warning ⟲ marker */
+.ns-step-timeline--data .ns-step-timeline__step[data-comp='1'] { margin-left: var(--ns-space-5);
+  padding-left: var(--ns-space-3); border-left-width: 2px; }
+.ns-step-timeline--data .ns-step-timeline__step[data-comp='1']::before { display: none; }
+.ns-step-timeline--data .ns-step-timeline__step[data-comp='1']::after { content: '⟲'; position: absolute;
+  left: calc(-1 * var(--ns-space-4)); top: var(--ns-space-2-5); font-size: var(--ns-text-sm); color: var(--ns-warning); }
+.ns-step-timeline--data .ns-step-timeline__step[data-comp='1'] .ns-step-timeline__marker { border-color: var(--ns-warning);
+  background: var(--ns-warning-subtle); }
+/* compact altitude hides datum chips + meta detail */
+.ns-step-timeline--data[data-view='compact'] .ns-step-timeline__datum { display: none; }
+.ns-step-timeline--data[data-view='compact'] .ns-step-timeline__step { padding: var(--ns-space-1-5) 0; }
+
+/* ------------------------------------------------------------------ *
+ * ns-achain — trigger event action chain (actionResults[])
+ * ------------------------------------------------------------------ */
+
+.ns-achain { display: grid; gap: var(--ns-space-1); margin-top: var(--ns-space-1-5);
+  padding-left: var(--ns-space-3); border-left: 1px solid var(--ns-border); }
+.ns-achain__row { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-achain__type { color: var(--ns-fg); font-weight: 500; }
+.ns-achain__dot { width: 5px; height: 5px; border-radius: var(--ns-radius-full); background: var(--ns-success); flex: none; }
+.ns-achain__row[data-state='failure'] .ns-achain__dot { background: var(--ns-destructive); }
+.ns-achain__row[data-state='skipped'] .ns-achain__dot { background: var(--ns-border-strong); }
+.ns-achain__link { border: 0; background: transparent; padding: 0; cursor: pointer; color: var(--ns-primary);
+  font: inherit; text-decoration: underline dotted; }
+.ns-achain__link:hover { text-decoration-style: solid; }
+
+/* standalone feed markers (outside an __item) */
+.ns-activity-feed__marker[data-tone='success'] { background: var(--ns-success); }
+.ns-activity-feed__marker[data-tone='warning'] { background: var(--ns-warning); }
+.ns-activity-feed__marker[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-activity-feed__marker[data-tone='primary'] { background: var(--ns-primary); }
+
+/* ns-preview-tag is RETIRED — build-status honesty lives in the tracker,
+ * never in the shipped UI. Intentionally no styles. */
+
+/* stackmap edge labels */
+.ns-stackmap__edge-label { font-family: var(--ns-font-mono); font-size: 9.5px; fill: var(--ns-muted-fg); }
+.ns-stackmap__edge-label[data-state='active'] { fill: var(--ns-primary); font-weight: 600; }
+
+/* ------------------------------------------------------------------ *
+ * ns-kv — labelled key/value detail rows (context rails)
+ * ------------------------------------------------------------------ */
+
+.ns-kv { display: grid; gap: var(--ns-space-1-5); }
+.ns-kv__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ns-space-3);
+  font-size: var(--ns-text-xs); min-width: 0; }
+.ns-kv__key { color: var(--ns-muted-fg); flex: none; }
+.ns-kv__val { font-family: var(--ns-font-mono); color: var(--ns-fg); text-align: right; overflow-wrap: anywhere; min-width: 0; }
+
+/* ------------------------------------------------------------------ *
+ * ns-toaster — transient confirmation toast (glue)
+ * ------------------------------------------------------------------ */
+
+.ns-toaster { position: fixed; bottom: var(--ns-space-5); right: var(--ns-space-5); z-index: 80;
+  display: flex; align-items: center; gap: var(--ns-space-2-5); max-width: 24rem;
+  padding: var(--ns-space-3) var(--ns-space-4); border: 1px solid var(--ns-success-border);
+  border-radius: var(--ns-radius-lg); background: var(--ns-card); color: var(--ns-card-fg);
+  box-shadow: var(--ns-shadow-lg); font-size: var(--ns-text-sm);
+  animation: ns-toaster-in 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+.ns-toaster::before { content: '✓'; color: var(--ns-success); font-weight: 700; }
+.ns-toaster[data-tone='info'] { border-color: var(--ns-primary-border); }
+.ns-toaster[data-tone='info']::before { content: 'ℹ'; color: var(--ns-primary); }
+@keyframes ns-toaster-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .ns-toaster { animation: none; } }
+
+/* ------------------------------------------------------------------ *
+ * ns-feed-toolbar — live-feed header rail (Follow switch + livedot)
+ * ------------------------------------------------------------------ */
+
+.ns-feed-toolbar { display: flex; align-items: center; gap: var(--ns-space-3); flex-wrap: wrap; }
+.ns-feed-toolbar__spacer { flex: 1; }
+
+/* ------------------------------------------------------------------ *
+ * ns-seg — segmented view toggle (All / Compact / JSON) (glue)
+ * ------------------------------------------------------------------ */
+
+.ns-seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--ns-muted); border-radius: var(--ns-radius-md); }
+.ns-seg__btn { border: 0; background: transparent; padding: 3px var(--ns-space-2-5); border-radius: var(--ns-radius-sm);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); cursor: pointer; }
+.ns-seg__btn:hover { color: var(--ns-fg); }
+.ns-seg__btn[data-state='active'] { background: var(--ns-card); color: var(--ns-fg); box-shadow: var(--ns-shadow-xs); }
+.ns-seg__btn:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 1px; }
+
+/* ------------------------------------------------------------------ *
+ * ns-chip — primitive-count chips (⚙2 ⛓1) & duality chips (glue)
+ * ------------------------------------------------------------------ */
+
+.ns-chip { display: inline-flex; align-items: center; gap: 3px; padding: 0 var(--ns-space-1-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm); background: var(--ns-surface);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); line-height: 1.7; color: var(--ns-muted-fg);
+  white-space: nowrap; }
+.ns-chip[data-on='1'] { border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); color: var(--ns-primary); }
+
+/* ------------------------------------------------------------------ *
+ * ns-screen — screen container transitions (glue)
+ * ------------------------------------------------------------------ */
+
+.ns-screen { animation: ns-screen-in 180ms ease; min-width: 0; }
+@keyframes ns-screen-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: reduce) { .ns-screen { animation: none; } }
+
+/* three-zone console grid: rail + main + context rail */
+.ns-console-grid { display: grid; gap: var(--ns-space-6); align-items: start; min-width: 0; }
+@media (min-width: 1024px) { .ns-console-grid { grid-template-columns: 17rem minmax(0, 1fr); } }
+@media (min-width: 1440px) { .ns-console-grid { grid-template-columns: 17rem minmax(0, 1fr) 19rem; }
+  .ns-console-grid > .ns-console-grid__rail-span { grid-column: 2 / 4; } }
+
+/* ------------------------------------------------------------------ *
+ * ns-drawer-detail — mono payloads inside <details> (glue)
+ * ------------------------------------------------------------------ */
+
+.ns-mini-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--ns-muted-fg); }
+
+/* ------------------------------------------------------------------ *
+ * ns-logstrip \u2014 bounded, read-only correlated-log pointer (NOT a tail).
+ * No follow, no filter, no search, no severity facets. Aspire out-link
+ * is a required part \u2014 the owned structured-log surface is Aspire's.
+ * ------------------------------------------------------------------ */
+
+.ns-logstrip { border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
+  background: var(--ns-surface); overflow: hidden; }
+.ns-logstrip__head { display: flex; align-items: center; gap: var(--ns-space-2);
+  padding: var(--ns-space-2-5) var(--ns-space-4); border-bottom: 1px solid var(--ns-border); }
+.ns-logstrip__head-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.1em; color: var(--ns-muted-fg); }
+.ns-logstrip__line { display: grid; grid-template-columns: minmax(0, 1fr) auto;
+  gap: 2px var(--ns-space-2); align-items: baseline; padding: var(--ns-space-2) var(--ns-space-4);
+  border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 45%, transparent);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); }
+.ns-logstrip__line:last-of-type { border-bottom: 0; }
+.ns-logstrip__ts { grid-column: 1; color: var(--ns-muted-fg); }
+.ns-logstrip__resource { grid-column: 2; grid-row: 1; justify-self: end; color: var(--ns-muted-fg);
+  display: inline-flex; align-items: center; gap: var(--ns-space-1-5); white-space: nowrap; }
+.ns-logstrip__resource::before { content: ''; width: 5px; height: 5px; border-radius: var(--ns-radius-full);
+  background: var(--ns-border-strong); flex: none; }
+.ns-logstrip__line[data-severity='warn'] .ns-logstrip__resource::before { background: var(--ns-warning); }
+.ns-logstrip__line[data-severity='error'] .ns-logstrip__resource::before { background: var(--ns-destructive); }
+.ns-logstrip__severity { display: none; }
+.ns-logstrip__line[data-severity='warn'] .ns-logstrip__severity { color: var(--ns-warning); }
+.ns-logstrip__line[data-severity='error'] .ns-logstrip__severity { color: var(--ns-destructive); }
+.ns-logstrip__msg { grid-column: 1 / -1; grid-row: 2; color: var(--ns-fg); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; }
+.ns-logstrip__more { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-2);
+  padding: var(--ns-space-2) var(--ns-space-4); background: color-mix(in oklab, var(--ns-surface), transparent 40%);
+  font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+
+/* ------------------------------------------------------------------ *
+ * ns-dashboard__nav-badge \u2014 derived-stat sidebar badge. Muted by
+ * default; intent-toned only when it carries a live count.
+ * ------------------------------------------------------------------ */
+
+.ns-dashboard__nav-badge { margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
+  min-width: 1.15rem; height: 1.15rem; padding-inline: 5px; border-radius: var(--ns-radius-full);
+  border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-muted-fg);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 600; font-variant-numeric: tabular-nums; }
+.ns-dashboard__nav-badge[data-tone='primary'] { border-color: var(--ns-primary-border);
+  background: var(--ns-primary-subtle); color: var(--ns-primary); }
+.ns-dashboard__nav-badge[data-tone='warning'] { border-color: var(--ns-warning-border);
+  background: var(--ns-warning-subtle); color: var(--ns-warning); }
+
+/* ------------------------------------------------------------------ *
+ * ns-urlbar \u2014 live address display in the topbar. Addressability is a
+ * product feature, so the current path is always visible.
+ * ------------------------------------------------------------------ */
+
+.ns-urlbar { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); min-width: 0;
+  max-width: 22rem; padding: var(--ns-space-1) var(--ns-space-2-5); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-md); background: var(--ns-surface); }
+.ns-urlbar__scheme { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); flex: none; }
+.ns-urlbar__path { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+
+/* ============================================================================
+ * PASS V4 — Workers + Sagas consoles (dev-console anatomy, refs 11/12/13/19/21)
+ * Breadcrumb + tab row + stat strip + dense sortable table + right detail
+ * drawer (→ mobile bottom sheet). Plus per-capability bespoke viz:
+ *   Workers → runtime-mix bar, worker-pool liveness, scheduler-drift panel.
+ *   Sagas   → compensation state-machine mini-diagram, durability tier.
+ * ============================================================================ */
+
+/* --- ns-conhead: in-content console header (breadcrumb + tab row) --------- */
+.ns-conhead { display: grid; gap: var(--ns-space-3); }
+/* console header stat strips are denser than the S6 default: shorter tiles */
+.ns-conhead .ns-statstrip__tile { padding: var(--ns-space-2-5) var(--ns-space-3-5); }
+.ns-conhead .ns-statstrip__value { font-size: var(--ns-text-xl); }
+.ns-statstrip--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+@media (min-width: 560px) { .ns-statstrip--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (min-width: 900px) { .ns-statstrip--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
+.ns-conbread { display: flex; align-items: center; gap: var(--ns-space-1-5); flex-wrap: wrap;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-muted-fg); min-width: 0; }
+.ns-conbread__crumb { color: var(--ns-muted-fg); }
+.ns-conbread__crumb--here { color: var(--ns-fg); font-weight: 600; }
+.ns-conbread__sep { color: var(--ns-border-strong); }
+/* the console tab row — an underlined active tab, ghost siblings (ref 11/12) */
+.ns-contab { display: flex; align-items: stretch; gap: var(--ns-space-1); flex-wrap: wrap;
+  border-bottom: 1px solid var(--ns-border); }
+.ns-contab__btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  padding: var(--ns-space-2) var(--ns-space-1); margin-bottom: -1px; font-size: var(--ns-text-sm);
+  color: var(--ns-muted-fg); border-bottom: 2px solid transparent; white-space: nowrap;
+  transition: color 120ms ease, border-color 120ms ease; }
+.ns-contab__btn + .ns-contab__btn { margin-left: var(--ns-space-4); }
+.ns-contab__btn:hover { color: var(--ns-fg); }
+.ns-contab__btn[data-state='active'] { color: var(--ns-primary); border-bottom-color: var(--ns-primary); font-weight: 600; }
+.ns-contab__count { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  padding: 0 5px; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full);
+  background: var(--ns-surface); font-variant-numeric: tabular-nums; }
+.ns-contab__btn[data-state='active'] .ns-contab__count { color: var(--ns-primary); border-color: var(--ns-primary-border);
+  background: var(--ns-primary-subtle); }
+
+/* --- ns-contoolbar: table toolbar (search + dropdowns + filter chips) ------ */
+.ns-contoolbar { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-contoolbar__search { flex: 1; min-width: 9rem; display: flex; align-items: center; gap: var(--ns-space-1-5);
+  padding: var(--ns-space-1-5) var(--ns-space-2-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md);
+  background: var(--ns-surface); }
+.ns-contoolbar__search input { all: unset; flex: 1; min-width: 0; font-size: var(--ns-text-xs); color: var(--ns-fg); }
+.ns-contoolbar__search-ico { color: var(--ns-muted-fg); font-size: var(--ns-text-xs); flex: none; }
+
+/* --- ns-rtchip: runtime filter chips (`?runtime=`) ------------------------- */
+.ns-rtchips { display: flex; align-items: center; gap: var(--ns-space-1-5); flex-wrap: wrap; }
+.ns-rtchip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  padding: 2px var(--ns-space-2); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full);
+  background: var(--ns-surface); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  transition: color 120ms ease, border-color 120ms ease, background 120ms ease; }
+.ns-rtchip:hover { color: var(--ns-fg); border-color: var(--ns-border-strong); }
+.ns-rtchip[data-state='active'] { color: var(--ns-fg); border-color: var(--ns-primary-border);
+  background: var(--ns-primary-subtle); }
+.ns-rtchip__dot { width: 7px; height: 7px; border-radius: 2px; flex: none; background: var(--ns-border-strong); }
+.ns-rtchip__dot[data-rt='deno'] { background: var(--ns-primary); }
+.ns-rtchip__dot[data-rt='python'] { background: var(--ns-success); }
+.ns-rtchip__dot[data-rt='shell'] { background: var(--ns-warning); }
+.ns-rtchip__dot[data-rt='dotnet'] { background: var(--ns-accent-fg, var(--ns-fg)); }
+.ns-rtchip__dot[data-rt='pwsh'] { background: var(--ns-muted-fg); }
+
+/* --- ns-rtbadge: runtime badge column (polyglot marker) -------------------- */
+.ns-rtbadge { display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  padding: 1px var(--ns-space-2); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm);
+  background: var(--ns-surface); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+.ns-rtbadge__dot { width: 7px; height: 7px; border-radius: 2px; flex: none; background: var(--ns-border-strong); }
+.ns-rtbadge__dot[data-rt='deno'] { background: var(--ns-primary); }
+.ns-rtbadge__dot[data-rt='python'] { background: var(--ns-success); }
+.ns-rtbadge__dot[data-rt='shell'] { background: var(--ns-warning); }
+.ns-rtbadge__dot[data-rt='dotnet'] { background: var(--ns-accent-fg, var(--ns-fg)); }
+.ns-rtbadge__dot[data-rt='pwsh'] { background: var(--ns-muted-fg); }
+
+/* --- ns-runtimemix: stacked polyglot-runtime bar + dot legend (ref 09) ----- */
+.ns-runtimemix { display: grid; gap: var(--ns-space-2-5); }
+.ns-runtimemix__bar { display: flex; height: 0.85rem; gap: 3px; border-radius: var(--ns-radius-full); overflow: hidden; }
+.ns-runtimemix__seg { height: 100%; border-radius: var(--ns-radius-sm); min-width: 3px; }
+.ns-runtimemix__seg[data-rt='deno'] { background: var(--ns-primary); }
+.ns-runtimemix__seg[data-rt='python'] { background: var(--ns-success); }
+.ns-runtimemix__seg[data-rt='shell'] { background: var(--ns-warning); }
+.ns-runtimemix__seg[data-rt='dotnet'] { background: color-mix(in oklab, var(--ns-fg), var(--ns-card) 25%); }
+.ns-runtimemix__seg[data-rt='pwsh'] { background: var(--ns-muted-fg); }
+.ns-runtimemix__legend { display: flex; align-items: center; gap: var(--ns-space-3); flex-wrap: wrap; }
+.ns-runtimemix__leg { display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-runtimemix__leg b { color: var(--ns-fg); font-weight: 600; }
+
+/* --- ns-contable: dense sortable console table (ref 11/12) ----------------- */
+.ns-contable { border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); overflow: hidden;
+  background: var(--ns-card); }
+.ns-contable__scroll { overflow-x: auto; }
+.ns-contable__t { width: 100%; border-collapse: collapse; min-width: 40rem; }
+.ns-contable__th { text-align: left; padding: var(--ns-space-2-5) var(--ns-space-3-5);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.04em;
+  color: var(--ns-muted-fg); font-weight: 600; border-bottom: 1px solid var(--ns-border); white-space: nowrap;
+  background: var(--ns-surface); position: sticky; top: 0; }
+.ns-contable__th[data-sort='1'] { cursor: default; }
+.ns-contable__sort { color: var(--ns-border-strong); margin-left: 3px; }
+.ns-contable__th--sorted { color: var(--ns-fg); }
+.ns-contable__th--sorted .ns-contable__sort { color: var(--ns-primary); }
+.ns-contable__th--r, .ns-contable__td--r { text-align: right; }
+.ns-contable__row { border-bottom: 1px solid var(--ns-border); cursor: pointer; transition: background 100ms ease; }
+.ns-contable__row:last-child { border-bottom: 0; }
+.ns-contable__row:hover { background: var(--ns-surface-raised); }
+.ns-contable__row[data-state='selected'] { background: var(--ns-primary-subtle);
+  box-shadow: inset 3px 0 0 var(--ns-primary); }
+.ns-contable__td { padding: var(--ns-space-2-5) var(--ns-space-3-5); font-size: var(--ns-text-xs);
+  vertical-align: middle; }
+.ns-contable__name { all: unset; cursor: pointer; font-family: var(--ns-font-mono); font-size: var(--ns-text-xs);
+  color: var(--ns-primary); font-weight: 500; }
+.ns-contable__sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  display: block; margin-top: 1px; }
+.ns-contable__sched { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+
+/* --- ns-drawer: right-side detail drawer (ref 11) → mobile bottom sheet ---- */
+.ns-drawer { border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-card);
+  display: grid; gap: 0; overflow: hidden; position: sticky; top: var(--ns-space-4); }
+.ns-drawer__head { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap;
+  padding: var(--ns-space-3-5) var(--ns-space-4); border-bottom: 1px solid var(--ns-border); }
+.ns-drawer__title { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 600; color: var(--ns-fg);
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.ns-drawer__body { padding: var(--ns-space-4); display: grid; gap: var(--ns-space-3-5); }
+.ns-drawer__section-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--ns-muted-fg); }
+.ns-drawer__tabs { display: flex; gap: var(--ns-space-3); border-bottom: 1px solid var(--ns-border);
+  padding: 0 var(--ns-space-4); }
+.ns-drawer__tab { all: unset; cursor: default; padding: var(--ns-space-2) 0; margin-bottom: -1px;
+  font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); border-bottom: 2px solid transparent; }
+.ns-drawer__tab[data-state='active'] { color: var(--ns-primary); border-bottom-color: var(--ns-primary); font-weight: 600; }
+
+/* --- ns-poolmeter: worker-pool liveness (heartbeat pulse + consumers) ------ */
+.ns-poolmeter { display: grid; gap: var(--ns-space-2); }
+.ns-poolmeter__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
+  gap: var(--ns-space-2-5); padding: var(--ns-space-2-5) var(--ns-space-3); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-md); background: var(--ns-surface); }
+.ns-poolmeter__row[data-state='failed'] { border-color: var(--ns-destructive-border);
+  background: var(--ns-destructive-subtle); }
+.ns-poolmeter__pulse { position: relative; width: 10px; height: 10px; border-radius: var(--ns-radius-full);
+  background: var(--ns-success); flex: none; }
+.ns-poolmeter__pulse::after { content: ''; position: absolute; inset: -4px; border-radius: var(--ns-radius-full);
+  border: 1.5px solid var(--ns-success); opacity: 0.5; animation: ns-pool-pulse 1.8s ease-out infinite; }
+.ns-poolmeter__row[data-state='failed'] .ns-poolmeter__pulse { background: var(--ns-destructive); }
+.ns-poolmeter__row[data-state='failed'] .ns-poolmeter__pulse::after { display: none; }
+@keyframes ns-pool-pulse { 0% { transform: scale(0.6); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .ns-poolmeter__pulse::after { animation: none; } }
+.ns-poolmeter__q { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-fg); min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-poolmeter__consumers { display: inline-flex; align-items: center; gap: 3px; flex: none; }
+.ns-poolmeter__cdot { width: 6px; height: 6px; border-radius: var(--ns-radius-full); background: var(--ns-success); }
+.ns-poolmeter__cnum { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  white-space: nowrap; }
+.ns-poolmeter__row[data-state='failed'] .ns-poolmeter__cnum { color: var(--ns-destructive); font-weight: 600; }
+
+/* --- ns-driftpanel: scheduler-vs-config drift, names the cause (override) -- */
+.ns-driftpanel { display: grid; gap: var(--ns-space-1-5); }
+.ns-driftrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
+  gap: var(--ns-space-2-5); padding: var(--ns-space-2) var(--ns-space-2-5); border-radius: var(--ns-radius-md); }
+.ns-driftrow[data-state='degraded'] { background: var(--ns-warning-subtle); }
+.ns-driftrow__dot { width: 8px; height: 8px; border-radius: var(--ns-radius-full); background: var(--ns-success); flex: none; }
+.ns-driftrow[data-state='degraded'] .ns-driftrow__dot { background: var(--ns-warning); }
+.ns-driftrow[data-state='failed'] .ns-driftrow__dot { background: var(--ns-destructive); }
+.ns-driftrow__main { min-width: 0; display: grid; gap: 1px; }
+.ns-driftrow__probe { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-driftrow__result { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-driftrow[data-state='degraded'] .ns-driftrow__result { color: var(--ns-warning); }
+.ns-driftrow__cause { all: unset; cursor: pointer; flex: none; font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-primary); white-space: nowrap;
+  padding: 2px var(--ns-space-2); border: 1px solid var(--ns-primary-border); border-radius: var(--ns-radius-full);
+  background: var(--ns-primary-subtle); }
+.ns-driftrow__cause:hover { text-decoration: underline; }
+
+/* --- ns-sagahero: compensation-state summary band (adapts ns-runhero) ------ */
+.ns-sagahero { display: grid; gap: var(--ns-space-4); padding: var(--ns-space-4) var(--ns-space-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-card); }
+@media (min-width: 560px) { .ns-sagahero { grid-template-columns: 9.5rem minmax(0, 1fr); align-items: center; gap: var(--ns-space-5); } }
+.ns-sagahero__gauge { display: grid; gap: var(--ns-space-2); justify-items: center; }
+.ns-sagahero .ns-gauge { max-width: 8.5rem; margin-top: 0; }
+.ns-sagahero__body { display: grid; gap: var(--ns-space-3); min-width: 0; }
+.ns-sagahero__top { display: flex; align-items: center; gap: var(--ns-space-2-5); flex-wrap: wrap; }
+.ns-sagahero__name { font-family: var(--ns-font-mono); font-size: var(--ns-text-base); font-weight: 600; color: var(--ns-fg); }
+
+/* --- ns-durabar: durability-tier viz (durable vs at-most-once) ------------- */
+.ns-durabar { display: inline-flex; align-items: center; gap: var(--ns-space-2);
+  padding: 3px var(--ns-space-2-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full);
+  background: var(--ns-surface); }
+.ns-durabar__pips { display: inline-flex; gap: 3px; }
+.ns-durabar__pip { width: 6px; height: 12px; border-radius: 2px; background: var(--ns-border-strong); }
+.ns-durabar[data-tier='durable'] .ns-durabar__pip { background: var(--ns-success); }
+.ns-durabar[data-tier='at-most-once'] .ns-durabar__pip:nth-child(1) { background: var(--ns-warning); }
+.ns-durabar[data-tier='at-most-once'] .ns-durabar__pip:nth-child(n+2) { background: var(--ns-border-strong); }
+.ns-durabar__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+
+/* --- ns-smd: saga state-machine mini-diagram (bespoke, ref 21 node-graph) -- *
+ * Forward states as pill nodes joined by connectors with branch labels, then
+ * a visibly distinct rollback lane returning through compensation pairs.      */
+.ns-smd { display: grid; gap: var(--ns-space-1); padding: var(--ns-space-1) 0; }
+.ns-smd__lane-label { display: flex; align-items: center; gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.05em;
+  color: var(--ns-muted-fg); margin-bottom: 2px; }
+.ns-smd__lane-label[data-lane='comp'] { color: var(--ns-warning); }
+.ns-smd__lane { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; row-gap: var(--ns-space-2); }
+.ns-smd__node { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
+.ns-smd__pill { display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  padding: var(--ns-space-1-5) var(--ns-space-2-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full);
+  background: var(--ns-surface); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg);
+  white-space: nowrap; }
+.ns-smd__node[data-state='completed'] .ns-smd__pill { border-color: var(--ns-success-border);
+  background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-smd__node[data-state='running'] .ns-smd__pill,
+.ns-smd__node[data-state='retrying'] .ns-smd__pill { border-color: var(--ns-warning-border);
+  background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-smd__node[data-state='failed'] .ns-smd__pill { border-color: var(--ns-destructive-border);
+  background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-smd__node[data-state='queued'] .ns-smd__pill { color: var(--ns-muted-fg); border-style: dashed; }
+.ns-smd__node[data-current='1'] .ns-smd__pill { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ns-primary), transparent 78%);
+  border-color: var(--ns-primary); }
+.ns-smd__glyph { font-size: var(--ns-text-2xs); }
+.ns-smd__cap { font-family: var(--ns-font-mono); font-size: 9.5px; color: var(--ns-muted-fg); white-space: nowrap; }
+/* connector between two nodes with a floating branch label (ref 21) */
+.ns-smd__edge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
+  min-width: 2.6rem; align-self: flex-start; margin-top: 8px; padding: 0 2px; }
+.ns-smd__edge-label { font-family: var(--ns-font-mono); font-size: 9px; color: var(--ns-muted-fg);
+  white-space: nowrap; margin-bottom: 1px; }
+.ns-smd__edge-line { display: block; width: 100%; height: 0; border-top: 1.5px solid var(--ns-border-strong); position: relative; }
+.ns-smd__edge-line::after { content: '▸'; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);
+  font-size: 9px; color: var(--ns-border-strong); }
+.ns-smd__edge[data-lane='comp'] .ns-smd__edge-label { color: var(--ns-warning); }
+.ns-smd__edge[data-lane='comp'] .ns-smd__edge-line { border-top-style: dashed; border-top-color: var(--ns-warning); }
+.ns-smd__edge[data-lane='comp'] .ns-smd__edge-line::after { content: '◂'; left: -3px; right: auto; color: var(--ns-warning); }
+/* the rollback lane sits under the forward lane, indented + warning-railed */
+.ns-smd__lane--comp { margin-top: var(--ns-space-1); padding: var(--ns-space-2) var(--ns-space-2-5) var(--ns-space-1);
+  border-left: 2px solid var(--ns-warning); border-radius: 0 var(--ns-radius-md) var(--ns-radius-md) 0;
+  background: color-mix(in oklab, var(--ns-warning-subtle), transparent 45%); }
+.ns-smd__return { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 8px;
+  font-size: var(--ns-text-sm); color: var(--ns-warning); padding: 0 var(--ns-space-1); }
+
+/* ============================================================================
+ * ns-sgc — SAGA GRAPH CANVAS (V4b, ref 21 n8n / flow-builder)
+ *
+ * The saga state machine IS a node graph, so the SCREEN is a canvas: a
+ * full-bleed dotted-grid stage of state-node cards wired by JS-measured
+ * connectors (forward lane + a distinct dashed reverse rollback lane), a
+ * canvas toolbar, an instance switcher strip, and a click-to-open properties
+ * sidebar (right on desktop, bottom sheet on mobile). Token-only; connectors
+ * are drawn post-mount from getBoundingClientRect() into an SVG edge layer —
+ * NO SVG {{ }} holes.
+ * ------------------------------------------------------------------------- */
+
+/* --- screen frame: canvas (dominant) + docked properties sidebar ---------- */
+.ns-sgc { display: grid; gap: 0; min-width: 0; border: 1px solid var(--ns-border);
+  border-color: color-mix(in oklab, var(--ns-border-strong) 45%, var(--ns-border));
+  border-radius: var(--ns-radius-xl); background: var(--ns-card); box-shadow: var(--ns-shadow-sm);
+  overflow: hidden; }
+[data-theme='dark'] .ns-sgc { border-color: var(--ns-border-strong);
+  box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(235, 228, 210, 0.04); }
+@media (min-width: 1024px) { .ns-sgc { grid-template-columns: minmax(0, 1fr) 21rem; } }
+@media (min-width: 1440px) { .ns-sgc { grid-template-columns: minmax(0, 1fr) 23rem; } }
+
+/* --- instance switcher strip (slim, canvas-edge — NOT a fat left column) --- */
+.ns-sgc__switcher { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--ns-space-2);
+  padding: var(--ns-space-2-5) var(--ns-space-3); border-bottom: 1px solid var(--ns-border);
+  background: var(--ns-surface); overflow-x: auto; scrollbar-width: thin; }
+.ns-sgc__switcher-label { flex: none; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ns-muted-fg); padding-right: var(--ns-space-1); }
+.ns-sgc__inst { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-flex;
+  align-items: center; gap: var(--ns-space-2); padding: var(--ns-space-1-5) var(--ns-space-3);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full); background: var(--ns-card);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); white-space: nowrap;
+  transition: border-color 120ms, box-shadow 120ms; }
+.ns-sgc__inst:hover { border-color: var(--ns-border-hover); box-shadow: var(--ns-shadow-xs); }
+.ns-sgc__inst:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 2px; }
+.ns-sgc__inst[data-state='selected'] { border-color: var(--ns-primary); color: var(--ns-fg);
+  background: var(--ns-primary-subtle); box-shadow: 0 0 0 2px color-mix(in oklab, var(--ns-primary), transparent 72%); }
+.ns-sgc__inst-dot { width: 7px; height: 7px; border-radius: var(--ns-radius-full); background: var(--ns-border-strong); flex: none; }
+.ns-sgc__inst-dot[data-tone='warning'] { background: var(--ns-warning); }
+.ns-sgc__inst-dot[data-tone='success'] { background: var(--ns-success); }
+.ns-sgc__inst-dot[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-sgc__inst-dot[data-tone='primary'] { background: var(--ns-primary); }
+.ns-sgc__inst-corr { color: var(--ns-muted-fg); font-size: var(--ns-text-3xs); }
+
+/* --- the canvas stage: full-bleed dotted grid, DOMINANT --------------------- */
+.ns-sgc__stagewrap { grid-column: 1; position: relative; min-width: 0; }
+@media (max-width: 1023px) { .ns-sgc__stagewrap { grid-column: 1 / -1; } }
+.ns-sgc__canvas { position: relative; min-width: 0; min-height: 26rem;
+  padding: var(--ns-space-8) var(--ns-space-7) var(--ns-space-12);
+  /* two dotted-grid layers: fine dots on a warm-cream/dark stage */
+  background-color: var(--ns-surface);
+  background-image: radial-gradient(color-mix(in oklab, var(--ns-fg), transparent 88%) 1.1px, transparent 1.1px);
+  background-size: 22px 22px; background-position: -1px -1px; }
+[data-theme='dark'] .ns-sgc__canvas {
+  background-image: radial-gradient(color-mix(in oklab, var(--ns-fg), transparent 90%) 1.1px, transparent 1.1px); }
+@media (min-width: 1024px) { .ns-sgc__canvas { min-height: 27rem; } }
+/* lane layout: forward row on top, rollback row below, columns for step order.
+ * A wide column gutter gives the connectors room for their branch labels. */
+.ns-sgc__grid { position: relative; z-index: 1; display: grid; gap: var(--ns-space-10) var(--ns-space-20);
+  grid-auto-rows: min-content; align-items: start; justify-items: center; min-width: 0; }
+.ns-sgc__edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
+.ns-sgc__edge { fill: none; stroke: var(--ns-border-strong); stroke-width: 1.75; }
+.ns-sgc__edge[data-state='active'] { stroke: var(--ns-primary); stroke-width: 2.25; }
+.ns-sgc__edge[data-lane='comp'] { stroke: var(--ns-warning); stroke-width: 1.75; stroke-dasharray: 6 4; }
+.ns-sgc__edge[data-lane='cross'] { stroke: var(--ns-warning); stroke-width: 1.5; stroke-dasharray: 2 4; opacity: 0.85; }
+.ns-sgc__edge-arrow { fill: var(--ns-border-strong); }
+.ns-sgc__edge-arrow[data-state='active'] { fill: var(--ns-primary); }
+.ns-sgc__edge-arrow[data-lane='comp'], .ns-sgc__edge-arrow[data-lane='cross'] { fill: var(--ns-warning); }
+.ns-sgc__edge-label { font-family: var(--ns-font-mono); font-size: 10px; fill: var(--ns-muted-fg); }
+.ns-sgc__edge-label[data-state='active'] { fill: var(--ns-primary); font-weight: 600; }
+.ns-sgc__edge-label[data-lane='comp'], .ns-sgc__edge-label[data-lane='cross'] { fill: var(--ns-warning); }
+/* label chip backing so text reads over connectors + dots */
+.ns-sgc__edge-labelbg { fill: var(--ns-surface); opacity: 0.92; rx: 4; }
+
+/* --- a state node card (the graph node, ref 21) ---------------------------- */
+.ns-sgc__node { all: unset; box-sizing: border-box; cursor: pointer; position: relative; z-index: 2;
+  display: grid; gap: var(--ns-space-2); width: 11.5rem; max-width: 100%;
+  padding: var(--ns-space-3) var(--ns-space-3-5); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-lg); background: var(--ns-card); box-shadow: var(--ns-shadow-xs);
+  transition: border-color 120ms, box-shadow 120ms, transform 120ms; }
+[data-theme='dark'] .ns-sgc__node { border-color: var(--ns-border-strong);
+  box-shadow: var(--ns-shadow-xs), inset 0 1px 0 rgba(235, 228, 210, 0.04); }
+.ns-sgc__node:hover { border-color: var(--ns-border-hover); box-shadow: var(--ns-shadow-md); transform: translateY(-1px); }
+.ns-sgc__node:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 2px; }
+.ns-sgc__node[data-selected='1'] { border-color: var(--ns-primary);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ns-primary), transparent 68%), var(--ns-shadow-sm); }
+.ns-sgc__node[data-current='1']::after { content: ''; position: absolute; inset: -5px; border-radius: var(--ns-radius-xl);
+  border: 1.5px dashed color-mix(in oklab, var(--ns-primary), transparent 45%); pointer-events: none; }
+/* node head: icon tile + name + state dot */
+.ns-sgc__node-head { display: flex; align-items: center; gap: var(--ns-space-2); min-width: 0; }
+.ns-sgc__node-tile { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
+  border-radius: var(--ns-radius-md); background: var(--ns-surface); border: 1px solid var(--ns-border);
+  font-size: var(--ns-text-xs); color: var(--ns-fg); }
+.ns-sgc__node-name { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 600;
+  color: var(--ns-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
+.ns-sgc__node-dot { flex: none; margin-left: auto; width: 8px; height: 8px; border-radius: var(--ns-radius-full);
+  background: var(--ns-border-strong); }
+.ns-sgc__node-cap { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ns-sgc__node-foot { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-sgc__node-metric { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+/* state-tinted node accents (top edge tick via tile + dot) */
+.ns-sgc__node[data-state='completed'] .ns-sgc__node-tile { border-color: var(--ns-success-border);
+  background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-sgc__node[data-state='completed'] .ns-sgc__node-dot { background: var(--ns-success); }
+.ns-sgc__node[data-state='running'] .ns-sgc__node-tile,
+.ns-sgc__node[data-state='retrying'] .ns-sgc__node-tile { border-color: var(--ns-warning-border);
+  background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-sgc__node[data-state='running'] .ns-sgc__node-dot,
+.ns-sgc__node[data-state='retrying'] .ns-sgc__node-dot { background: var(--ns-warning);
+  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ns-warning), transparent 80%); animation: ns-sgc-pulse 1.8s ease-in-out infinite; }
+.ns-sgc__node[data-state='failed'] .ns-sgc__node-tile { border-color: var(--ns-destructive-border);
+  background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-sgc__node[data-state='failed'] .ns-sgc__node-dot { background: var(--ns-destructive); }
+.ns-sgc__node[data-state='queued'] { border-style: dashed; background: var(--ns-surface); }
+.ns-sgc__node[data-state='queued'] .ns-sgc__node-name,
+.ns-sgc__node[data-state='queued'] .ns-sgc__node-cap { color: var(--ns-muted-fg); }
+/* compensation-lane nodes carry a warning left rail so the rollback reads distinct */
+.ns-sgc__node[data-lane='comp'] { border-left: 3px solid var(--ns-warning);
+  background: color-mix(in oklab, var(--ns-card), var(--ns-warning) 4%); }
+@keyframes ns-sgc-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--ns-warning), transparent 82%); }
+  50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--ns-warning), transparent 90%); } }
+@media (prefers-reduced-motion: reduce) { .ns-sgc__node-dot { animation: none !important; } }
+
+/* --- lane labels floating at the canvas edge -------------------------------- */
+.ns-sgc__lane-tag { position: absolute; z-index: 1; left: var(--ns-space-4); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ns-muted-fg);
+  background: var(--ns-surface); padding: 2px var(--ns-space-2); border-radius: var(--ns-radius-full);
+  border: 1px solid var(--ns-border); }
+.ns-sgc__lane-tag[data-lane='comp'] { color: var(--ns-warning); border-color: var(--ns-warning-border);
+  background: var(--ns-warning-subtle); top: 55%; }
+
+/* --- canvas toolbar (bottom bar, ref 21) ----------------------------------- */
+.ns-sgc__toolbar { position: absolute; z-index: 3; left: 50%; bottom: var(--ns-space-4); transform: translateX(-50%);
+  display: inline-flex; align-items: center; gap: var(--ns-space-1); padding: var(--ns-space-1);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full); background: var(--ns-card);
+  box-shadow: var(--ns-shadow-md); }
+[data-theme='dark'] .ns-sgc__toolbar { border-color: var(--ns-border-strong); }
+.ns-sgc__tool { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center;
+  justify-content: center; gap: var(--ns-space-1-5); min-width: 2rem; height: 2rem; padding: 0 var(--ns-space-2-5);
+  border-radius: var(--ns-radius-full); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs);
+  color: var(--ns-fg); transition: background 120ms; }
+.ns-sgc__tool:hover { background: var(--ns-surface); }
+.ns-sgc__tool:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 1px; }
+.ns-sgc__tool[data-variant='assist'] { color: var(--ns-primary); font-weight: 600; }
+.ns-sgc__tool-zoom { min-width: 3.5rem; color: var(--ns-muted-fg); cursor: default; }
+.ns-sgc__tool-sep { width: 1px; height: 1.1rem; background: var(--ns-border); margin: 0 2px; }
+
+/* --- properties sidebar (docked right desktop / stacked mobile) ------------- */
+.ns-sgc__props { grid-column: 2; display: grid; align-content: start; gap: var(--ns-space-4);
+  padding: var(--ns-space-4) var(--ns-space-4) var(--ns-space-5); border-left: 1px solid var(--ns-border);
+  background: var(--ns-card); min-width: 0; }
+@media (max-width: 1023px) { .ns-sgc__props { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ns-border); } }
+.ns-sgc__props-head { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap;
+  padding-bottom: var(--ns-space-3); border-bottom: 1px solid var(--ns-border); }
+.ns-sgc__props-eyebrow { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.09em; color: var(--ns-muted-fg); }
+.ns-sgc__props-title { display: flex; align-items: center; gap: var(--ns-space-2); min-width: 0; width: 100%; }
+.ns-sgc__props-tile { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
+  border-radius: var(--ns-radius-md); background: var(--ns-surface); border: 1px solid var(--ns-border);
+  font-size: var(--ns-text-sm); color: var(--ns-fg); }
+.ns-sgc__props-name { font-family: var(--ns-font-mono); font-size: var(--ns-text-base); font-weight: 600;
+  color: var(--ns-fg); min-width: 0; overflow-wrap: anywhere; }
+.ns-sgc__props-section { display: grid; gap: var(--ns-space-2-5); }
+.ns-sgc__props-section-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ns-muted-fg); }
+.ns-sgc__props-clear { all: unset; cursor: pointer; margin-left: auto; font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); padding: 2px var(--ns-space-1); border-radius: var(--ns-radius-sm); }
+.ns-sgc__props-clear:hover { color: var(--ns-fg); }
+.ns-sgc__props-clear:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 1px; }
+/* in/out transition chips inside the sidebar */
+.ns-sgc__trans { display: grid; gap: var(--ns-space-1-5); }
+.ns-sgc__trans-row { display: flex; align-items: center; gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+.ns-sgc__trans-dir { flex: none; color: var(--ns-muted-fg); width: 1.1rem; }
+.ns-sgc__trans-row[data-lane='comp'] .ns-sgc__trans-dir { color: var(--ns-warning); }
+.ns-sgc__props-payload { margin: 0; padding: var(--ns-space-2-5) var(--ns-space-3); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-md); background: var(--ns-surface); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs); color: var(--ns-fg); overflow-x: auto; white-space: pre; }
+
+/* the mobile properties bottom sheet reuses the generic sheet dialog; the
+ * ns-sgc__props block simply stacks under the canvas < 1024px. On phones the
+ * node tap ALSO opens the sheet dialog for a focused detail surface. */
+
+/* --- canvas grid placement: data-col drives the column, data-row the lane --- */
+.ns-sgc__grid { grid-template-columns: repeat(3, minmax(0, 11.5rem)); grid-template-rows: auto auto;
+  justify-content: center; }
+.ns-sgc__node[data-col='1'] { grid-column: 1; }
+.ns-sgc__node[data-col='2'] { grid-column: 2; }
+.ns-sgc__node[data-col='3'] { grid-column: 3; }
+.ns-sgc__node[data-row='1'] { grid-row: 1; }
+.ns-sgc__node[data-row='2'] { grid-row: 2; }
+/* below 640px the graph stacks to a single readable column (no h-scroll); the
+ * JS suppresses edge geometry there, matching the stackmap pattern. */
+@media (max-width: 639px) {
+  .ns-sgc__grid { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; gap: var(--ns-space-5); }
+  .ns-sgc__node { grid-column: 1 !important; width: 100%; }
+  .ns-sgc__node[data-row='1'], .ns-sgc__node[data-row='2'] { grid-row: auto; }
+  .ns-sgc__canvas { padding: var(--ns-space-6) var(--ns-space-4) var(--ns-space-9); }
+  /* on a phone the graph is a single column; the two floating lane rails would
+   * both pin to the top and read confusingly. Keep only the forward tag as an
+   * inline heading; the comp nodes keep their warning left-rail so the rollback
+   * lane stays visually distinct. */
+  .ns-sgc__lane-tag { position: static; display: inline-flex; margin-bottom: var(--ns-space-1); }
+  .ns-sgc__lane-tag[data-lane='comp'] { display: none; }
+}
+
+/* --- supporting strip below the canvas (step table + transition stream) ----- */
+.ns-sgc-support { display: grid; gap: var(--ns-space-5); margin-top: var(--ns-space-5); min-width: 0; }
+@media (min-width: 1024px) { .ns-sgc-support { grid-template-columns: minmax(0, 1fr) 21rem; align-items: start; } }
+
+/* ============================================================================
+ * V4b-fix — DENSITY PASS: fill the canvas void + bespoke saga surfaces
+ *
+ * The V4b canvas was ~75-80% empty dotted grid. This pass FILLS it with tailored
+ * content: a definition mini-map, per-lane compensation-health stat strips, a
+ * left-edge step-execution rail, ghost-node scope outlines, and rich on-wire edge
+ * annotations. It also elevates the surrounding sections into bespoke saga
+ * components: a saga-health composite band (replacing four plain number cards), a
+ * sortable columnar step table, a tabbed node inspector, and a typed transition
+ * stream. Token-only, theme-blind, no raw hex. Geometry (mini-map, edges, anno
+ * cards) stays JS-measured from getBoundingClientRect / machine data.
+ * ------------------------------------------------------------------------- */
+
+/* --- canvas: make room for the left rail + bottom-right mini-map -------------
+ * A firm min-height reserves a clear bottom band for the legend + mini-map so
+ * they never collide with a row-2 (rollback-lane) node on short instances. */
+.ns-sgc__canvas { min-height: 31rem; padding-left: var(--ns-space-16); padding-bottom: var(--ns-space-20); }
+@media (min-width: 1024px) { .ns-sgc__canvas { min-height: 32rem; } }
+/* give the node grid a touch more headroom so lane stat-strips clear the nodes,
+ * and a taller row gap so the compensation lane-tag + health strip band fits
+ * cleanly between the forward row and the rollback row. */
+.ns-sgc__grid { padding-top: var(--ns-space-9); row-gap: var(--ns-space-16); }
+
+/* === (2) per-lane compensation-health stat strip (ref-11 stat bar) ==========
+ * A slim SINGLE-LINE strip (label:value · label:value) so it sits in the header
+ * band beside its lane tag without stealing node space. */
+.ns-sgc__lanestat { position: absolute; z-index: 4; display: inline-flex; align-items: center; height: 1.5rem;
+  gap: 0; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full); background: var(--ns-card);
+  box-shadow: var(--ns-shadow-xs); overflow: hidden; max-width: calc(100% - var(--ns-space-16)); }
+[data-theme='dark'] .ns-sgc__lanestat { border-color: var(--ns-border-strong); }
+.ns-sgc__lanestat[data-lane='fwd'] { left: 8.5rem; }
+.ns-sgc__lanestat[data-lane='comp'] { left: var(--ns-space-16); border-color: var(--ns-warning-border);
+  background: color-mix(in oklab, var(--ns-card), var(--ns-warning) 5%); }
+.ns-sgc__lanestat-cell { display: inline-flex; align-items: baseline; gap: var(--ns-space-1); padding: 0 var(--ns-space-2-5);
+  border-right: 1px solid var(--ns-border); min-width: 0; white-space: nowrap; }
+.ns-sgc__lanestat-cell:last-child { border-right: 0; }
+.ns-sgc__lanestat-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--ns-muted-fg); white-space: nowrap; }
+.ns-sgc__lanestat-val { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 700; color: var(--ns-fg); }
+.ns-sgc__lanestat-val[data-tone='warning'] { color: var(--ns-warning); }
+.ns-sgc__lanestat-val[data-tone='success'] { color: var(--ns-success); }
+.ns-sgc__lanestat-val[data-tone='destructive'] { color: var(--ns-destructive); }
+.ns-sgc__lanestat-val[data-tone='primary'] { color: var(--ns-primary); }
+
+/* === (4) step-execution rail — left-edge pips (current enlarged) ============ */
+.ns-sgc__rail { position: absolute; z-index: 2; left: var(--ns-space-4); top: var(--ns-space-9); bottom: var(--ns-space-14);
+  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--ns-space-2);
+  padding: var(--ns-space-2) 0; }
+.ns-sgc__rail::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px; transform: translateX(-50%);
+  background: linear-gradient(var(--ns-border-strong), var(--ns-border)); border-radius: 2px; z-index: 0; }
+.ns-sgc__rail-pip { position: relative; z-index: 1; display: grid; place-items: center; width: 12px; height: 12px;
+  border-radius: var(--ns-radius-full); background: var(--ns-surface); border: 2px solid var(--ns-border-strong); flex: none; }
+.ns-sgc__rail-pip[data-tone='success'] { border-color: var(--ns-success); background: var(--ns-success-subtle); }
+.ns-sgc__rail-pip[data-tone='warning'] { border-color: var(--ns-warning); background: var(--ns-warning-subtle); }
+.ns-sgc__rail-pip[data-tone='destructive'] { border-color: var(--ns-destructive); background: var(--ns-destructive-subtle); }
+.ns-sgc__rail-pip[data-tone='primary'] { border-color: var(--ns-primary); background: var(--ns-primary-subtle); }
+.ns-sgc__rail-pip[data-now='1'] { width: 20px; height: 20px; border-width: 2.5px; box-shadow: 0 0 0 4px color-mix(in oklab, var(--ns-primary), transparent 82%); }
+.ns-sgc__rail-name { position: absolute; left: calc(100% + 6px); font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg); white-space: nowrap; opacity: 0; transition: opacity 120ms; pointer-events: none; }
+.ns-sgc__rail-pip[data-now='1'] .ns-sgc__rail-name { opacity: 1; color: var(--ns-fg); font-weight: 600; }
+.ns-sgc__rail:hover .ns-sgc__rail-name { opacity: 1; }
+
+/* === (1) definition mini-map — docked bottom-right of the canvas ============ */
+.ns-sgc__minimap { position: absolute; z-index: 3; right: var(--ns-space-4); bottom: var(--ns-space-4); width: 204px;
+  padding: var(--ns-space-2) var(--ns-space-2-5) var(--ns-space-1); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-lg); background: color-mix(in oklab, var(--ns-card), transparent 4%);
+  box-shadow: var(--ns-shadow-md); backdrop-filter: blur(2px); }
+[data-theme='dark'] .ns-sgc__minimap { border-color: var(--ns-border-strong); }
+.ns-sgc__minimap-title { display: block; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.09em; color: var(--ns-muted-fg); margin-bottom: 2px; }
+.ns-sgc__minimap-svg { display: block; width: 100%; height: auto; }
+.ns-sgc__mm-edge { fill: none; stroke: var(--ns-border-strong); stroke-width: 1.25; opacity: 0.5; }
+.ns-sgc__mm-edge--comp { stroke: var(--ns-warning); stroke-dasharray: 3 2; }
+.ns-sgc__mm-edge--active { opacity: 1; stroke-width: 1.75; }
+.ns-sgc__mm-node { fill: var(--ns-surface); stroke: var(--ns-border-strong); stroke-width: 1; opacity: 0.6; }
+.ns-sgc__mm-node--fwd.ns-sgc__mm-node--active { fill: var(--ns-success); stroke: var(--ns-success); opacity: 1; }
+.ns-sgc__mm-node--comp.ns-sgc__mm-node--active { fill: var(--ns-warning); stroke: var(--ns-warning); opacity: 1; }
+.ns-sgc__mm-node--sel { stroke: var(--ns-primary); stroke-width: 2.5; }
+
+/* canvas legend (bottom-left) — node-identity key, balances the mini-map.
+ * Sits above the centered toolbar so the two never collide on short instances. */
+.ns-sgc__legend { position: absolute; z-index: 3; left: var(--ns-space-16); bottom: var(--ns-space-14);
+  display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-1) var(--ns-space-3);
+  padding: var(--ns-space-1-5) var(--ns-space-2-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full);
+  background: color-mix(in oklab, var(--ns-card), transparent 6%); box-shadow: var(--ns-shadow-xs); backdrop-filter: blur(2px);
+  max-width: 15rem; }
+[data-theme='dark'] .ns-sgc__legend { border-color: var(--ns-border-strong); }
+.ns-sgc__legend-item { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); white-space: nowrap; }
+.ns-sgc__legend-swatch { width: 12px; height: 12px; border-radius: var(--ns-radius-sm); border: 1px solid var(--ns-border-strong); flex: none; }
+.ns-sgc__legend-swatch[data-role='fwd'] { background: var(--ns-teal-4); border-color: var(--ns-teal-5); }
+.ns-sgc__legend-swatch[data-role='comp'] { background: var(--ns-copper-5); border-color: var(--ns-copper-6); }
+.ns-sgc__legend-swatch[data-role='terminal'] { background: color-mix(in oklab, var(--ns-border-strong), transparent 30%); }
+.ns-sgc__legend-swatch[data-role='ghost'] { background: transparent; border-style: dashed; opacity: 0.6; }
+
+/* === (3) rich on-wire edge annotation (payload + error badge) =============== */
+.ns-sgc__anno-box { fill: var(--ns-card); stroke: var(--ns-warning); stroke-width: 1.25; opacity: 1;
+  filter: drop-shadow(0 1px 2px rgba(41, 37, 33, 0.12)); }
+[data-theme='dark'] .ns-sgc__anno-box { stroke: var(--ns-warning); }
+.ns-sgc__anno[data-state='active'] .ns-sgc__anno-box { stroke: var(--ns-primary); }
+.ns-sgc__anno-title { font-family: var(--ns-font-mono); font-size: 10px; font-weight: 700; fill: var(--ns-warning); }
+.ns-sgc__anno-pay { font-family: var(--ns-font-mono); font-size: 9px; fill: var(--ns-fg); }
+.ns-sgc__anno-badge { fill: var(--ns-destructive); }
+.ns-sgc__anno-badge-t { font-family: var(--ns-font-mono); font-size: 8.5px; font-weight: 700; fill: var(--ns-card); letter-spacing: 0.04em; }
+[data-theme='dark'] .ns-sgc__anno-badge-t { fill: var(--ns-gray-12); }
+
+/* === (5) ghost-node outlines + (8) chromatic node identity ================== */
+/* role tint on the icon tile: forward = teal, compensation = copper, terminal = neutral.
+ * These layer OVER the existing state tints (state still drives the live dot). */
+.ns-sgc__node[data-role='fwd']::before,
+.ns-sgc__node[data-role='comp']::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+  border-radius: var(--ns-radius-lg) var(--ns-radius-lg) 0 0; }
+.ns-sgc__node[data-role='fwd']::before { background: linear-gradient(90deg, var(--ns-teal-4), color-mix(in oklab, var(--ns-teal-4), transparent 55%)); }
+.ns-sgc__node[data-role='comp']::before { background: linear-gradient(90deg, var(--ns-copper-5), color-mix(in oklab, var(--ns-copper-5), transparent 55%)); }
+.ns-sgc__node[data-role='terminal']::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
+  border-radius: var(--ns-radius-lg) var(--ns-radius-lg) 0 0; background: color-mix(in oklab, var(--ns-border-strong), transparent 40%); }
+/* comp-lane node tiles read copper by role (unless state overrides to a live tint) */
+.ns-sgc__node[data-role='comp'][data-state='queued'] .ns-sgc__node-tile,
+.ns-sgc__node[data-role='comp'][data-state='completed'] .ns-sgc__node-tile { border-color: var(--ns-copper-3);
+  background: var(--ns-accent-subtle); color: var(--ns-copper-7); }
+/* ghost nodes: queued/blocked states rendered as ~30%-opacity wireframes (SCOPE) */
+.ns-sgc__node[data-ghost='1'] { opacity: 0.42; border-style: dashed; background: transparent; box-shadow: none; }
+.ns-sgc__node[data-ghost='1']:hover { opacity: 0.85; }
+.ns-sgc__node[data-ghost='1'] .ns-sgc__node-tile { background: transparent; }
+.ns-sgc__node[data-ghost='1']::before { opacity: 0.5; }
+
+/* === (7) tabbed node inspector (ref-11 drawer tabs) ======================== */
+.ns-sgc__tabs { display: flex; gap: var(--ns-space-1); border-bottom: 1px solid var(--ns-border); margin-bottom: var(--ns-space-1); }
+.ns-sgc__tab { all: unset; box-sizing: border-box; cursor: pointer; padding: var(--ns-space-2) var(--ns-space-2-5);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); position: relative;
+  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color 120ms; }
+.ns-sgc__tab:hover { color: var(--ns-fg); }
+.ns-sgc__tab:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: -2px; }
+.ns-sgc__tab[data-active='1'] { color: var(--ns-primary); font-weight: 600; border-bottom-color: var(--ns-primary); }
+.ns-sgc__tabpanel { display: grid; gap: var(--ns-space-3); }
+.ns-sgc__empty { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  padding: var(--ns-space-3); border: 1px dashed var(--ns-border); border-radius: var(--ns-radius-md); text-align: center; }
+
+/* === saga-health composite band (replaces four plain number cards) ========= */
+.ns-sghealth { display: grid; gap: var(--ns-space-2-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
+@media (min-width: 720px) { .ns-sghealth { grid-template-columns: 1.1fr 0.9fr 1.4fr 1fr; } }
+.ns-sghealth__cell { display: grid; align-content: start; gap: var(--ns-space-1-5); padding: var(--ns-space-3) var(--ns-space-3-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-card); box-shadow: var(--ns-shadow-xs); min-width: 0; }
+[data-theme='dark'] .ns-sghealth__cell { border-color: var(--ns-border-strong); box-shadow: var(--ns-shadow-xs), inset 0 1px 0 rgba(235, 228, 210, 0.04); }
+.ns-sghealth__cell--meter { grid-template-columns: auto 1fr; align-items: center; gap: var(--ns-space-3); }
+.ns-sghealth__cell-body { display: grid; gap: 2px; min-width: 0; }
+.ns-sghealth__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--ns-muted-fg); }
+.ns-sghealth__sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+/* radial compensation-rate meter (conic, driven by --v 0..100) */
+.ns-sghealth__meter { --v: 0; position: relative; width: 3rem; height: 3rem; border-radius: var(--ns-radius-full);
+  background: conic-gradient(var(--ns-warning) calc(var(--v) * 1%), color-mix(in oklab, var(--ns-warning), transparent 82%) 0);
+  display: grid; place-items: center; flex: none; }
+.ns-sghealth__meter::after { content: ''; position: absolute; inset: 6px; border-radius: var(--ns-radius-full); background: var(--ns-card); }
+.ns-sghealth__meter-val { position: relative; z-index: 1; font-family: var(--ns-font-mono); font-size: var(--ns-text-xs);
+  font-weight: 700; color: var(--ns-warning); }
+.ns-sghealth__split { display: flex; align-items: baseline; gap: var(--ns-space-1-5); }
+.ns-sghealth__split-num { font-family: var(--ns-font-mono); font-size: var(--ns-text-xl); font-weight: 700; color: var(--ns-fg); line-height: 1; }
+.ns-sghealth__split-num[data-tone='warning'] { color: var(--ns-warning); }
+.ns-sghealth__split-num[data-tone='success'] { color: var(--ns-success); }
+.ns-sghealth__split-sep { font-family: var(--ns-font-mono); font-size: var(--ns-text-base); color: var(--ns-border-strong); }
+.ns-sghealth__track { height: 5px; border-radius: var(--ns-radius-full); background: var(--ns-surface); overflow: hidden; }
+.ns-sghealth__track-fill { display: block; height: 100%; border-radius: inherit; background: var(--ns-border-strong); }
+.ns-sghealth__track-fill[data-tone='warning'] { background: var(--ns-warning); }
+/* state-distribution stacked channel bar */
+.ns-sghealth__bar { display: flex; height: 12px; border-radius: var(--ns-radius-full); overflow: hidden; background: var(--ns-surface); gap: 1px; }
+.ns-sghealth__seg { display: block; height: 100%; min-width: 3px; }
+.ns-sghealth__seg[data-tone='warning'] { background: var(--ns-warning); }
+.ns-sghealth__seg[data-tone='primary'] { background: var(--ns-primary); }
+.ns-sghealth__seg[data-tone='success'] { background: var(--ns-success); }
+.ns-sghealth__seg[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-sghealth__legend { display: flex; flex-wrap: wrap; gap: var(--ns-space-1) var(--ns-space-2-5); }
+.ns-sghealth__leg { display: inline-flex; align-items: center; gap: var(--ns-space-1); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-sghealth__leg-dot { width: 7px; height: 7px; border-radius: var(--ns-radius-full); background: var(--ns-border-strong); flex: none; }
+.ns-sghealth__leg-dot[data-tone='warning'] { background: var(--ns-warning); }
+.ns-sghealth__leg-dot[data-tone='primary'] { background: var(--ns-primary); }
+.ns-sghealth__leg-dot[data-tone='success'] { background: var(--ns-success); }
+.ns-sghealth__leg-dot[data-tone='destructive'] { background: var(--ns-destructive); }
+
+/* === (6) sortable columnar step table (ref-11 dense table) ================= */
+.ns-sgtable-wrap { width: 100%; overflow-x: auto; }
+.ns-sgtable { width: 100%; border-collapse: collapse; font-family: var(--ns-font-mono); }
+.ns-sgtable__th { text-align: left; padding: 0; border-bottom: 1px solid var(--ns-border); background: var(--ns-surface); }
+.ns-sgtable__sort { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: var(--ns-space-1);
+  width: 100%; padding: var(--ns-space-2) var(--ns-space-3); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.07em; color: var(--ns-muted-fg); white-space: nowrap; }
+.ns-sgtable__sort:hover { color: var(--ns-fg); }
+.ns-sgtable__sort:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: -2px; }
+.ns-sgtable__caret { width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent;
+  border-bottom: 4px solid var(--ns-border-strong); opacity: 0.35; transition: transform 120ms, opacity 120ms; }
+.ns-sgtable__th[data-active='1'] .ns-sgtable__sort { color: var(--ns-primary); }
+.ns-sgtable__th[data-active='1'] .ns-sgtable__caret { opacity: 1; border-bottom-color: var(--ns-primary); }
+.ns-sgtable__th[data-active='1'][data-dir='desc'] .ns-sgtable__caret { transform: rotate(180deg); }
+.ns-sgtable__row { border-bottom: 1px solid var(--ns-border); }
+.ns-sgtable__row:last-child { border-bottom: 0; }
+.ns-sgtable__row[data-comp='1'] { background: color-mix(in oklab, var(--ns-card), var(--ns-warning) 5%); }
+.ns-sgtable__td { padding: var(--ns-space-2) var(--ns-space-3); font-size: var(--ns-text-2xs); color: var(--ns-fg);
+  vertical-align: middle; white-space: nowrap; }
+.ns-sgtable__td--mut { color: var(--ns-muted-fg); }
+.ns-sgtable__td--title { white-space: normal; }
+.ns-sgtable__seq { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.2rem; padding: 0 var(--ns-space-1);
+  border-radius: var(--ns-radius-sm); background: var(--ns-surface); border: 1px solid var(--ns-border); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-sgtable__comp { color: var(--ns-warning); margin-right: var(--ns-space-1); }
+.ns-sgtable__err { display: inline-flex; align-items: center; padding: 1px var(--ns-space-1-5); border-radius: var(--ns-radius-sm);
+  background: var(--ns-destructive-subtle); border: 1px solid var(--ns-destructive-border); color: var(--ns-destructive); font-size: var(--ns-text-3xs); font-weight: 600; }
+
+/* === typed transition stream (grouped by instance) ========================= */
+.ns-sgstream { display: grid; gap: var(--ns-space-1); padding: var(--ns-space-2) var(--ns-space-3) var(--ns-space-3); }
+.ns-sgstream__legend-key { display: inline-flex; align-items: center; gap: 3px; font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-sgstream__group { display: grid; gap: 2px; padding: var(--ns-space-2) 0; border-top: 1px solid var(--ns-border); }
+.ns-sgstream__group:first-child { border-top: 0; }
+.ns-sgstream__group-head { display: flex; align-items: center; gap: var(--ns-space-2); margin-bottom: var(--ns-space-1); }
+.ns-sgstream__saga { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 700; color: var(--ns-fg); }
+.ns-sgstream__corr { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-sgstream__row { display: flex; align-items: flex-start; gap: var(--ns-space-2); padding: var(--ns-space-1) var(--ns-space-1) var(--ns-space-1) var(--ns-space-3);
+  position: relative; }
+.ns-sgstream__gl { flex: none; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: var(--ns-radius-sm);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); background: var(--ns-surface); border: 1px solid var(--ns-border); color: var(--ns-muted-fg); }
+.ns-sgstream__gl[data-type='advance'] { color: var(--ns-primary); border-color: var(--ns-accent-border); }
+.ns-sgstream__gl[data-type='compensate'] { color: var(--ns-warning); border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); }
+.ns-sgstream__gl[data-type='terminal'] { color: var(--ns-fg); }
+.ns-sgstream__gl[data-type='fault'] { color: var(--ns-destructive); border-color: var(--ns-destructive-border); background: var(--ns-destructive-subtle); }
+.ns-sgstream__body { display: grid; gap: 0; min-width: 0; flex: 1; }
+.ns-sgstream__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+.ns-sgstream__detail { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-sgstream__time { flex: none; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); padding-top: 1px; }
+
+/* --- mobile: rail/minimap/lane-stats fold gracefully on the stacked canvas -- */
+@media (max-width: 639px) {
+  .ns-sgc__canvas { padding-left: var(--ns-space-4); padding-bottom: var(--ns-space-6); min-height: 0; }
+  .ns-sgc__rail { display: none; }
+  .ns-sgc__minimap { position: static; width: 100%; margin-top: var(--ns-space-4); backdrop-filter: none; }
+  .ns-sgc__lanestat { position: static; left: auto; margin: 0 0 var(--ns-space-3); width: 100%; flex-wrap: wrap; }
+  .ns-sgc__lanestat[data-lanestat='comp'] { margin-top: var(--ns-space-2); }
+}
+/* tablet/desktop stacked (<1024): keep the rail + minimap but let stats wrap */
+@media (min-width: 640px) and (max-width: 1023px) {
+  .ns-sgc__lanestat { max-width: calc(100% - var(--ns-space-20)); }
+}
+
+/* ============================================================================
+ * V1 — GLOBAL DESIGN-SYSTEM FOUNDATION (loads last; overrides DS defaults)
+ *
+ * Visual-only system pass. No route/markup/logic change. Tokens only. Sets the
+ * system-level rules a premium operator console rests on: the NS One hard-offset
+ * "press" shadow, a hardened surface/border language, tighter display type, and
+ * a denser console rhythm. Every rule below is theme-blind and reads off --ns-*
+ * so light (warm-cream) and dark both hold.
+ * ------------------------------------------------------------------------- */
+
+/* --- 1. Signature press shadow -----------------------------------------------
+ * NS One's identity is a crisp hard-offset shadow, not a generic Material blur.
+ * Redefine the shadow ramp to a tight vertical offset + hairline spread so
+ * surfaces sit on the canvas with intent. Paired everywhere with a 1px border.
+ * Light: cast is the warm ink at low alpha. Dark: deeper, plus a top hairline
+ * highlight so raised surfaces catch an edge instead of dissolving. */
+:root {
+  --ns-shadow-xs: 0 1px 0 rgba(41, 37, 33, 0.04), 0 1px 2px rgba(41, 37, 33, 0.05);
+  --ns-shadow-sm: 0 1px 0 rgba(41, 37, 33, 0.05), 0 2px 4px rgba(41, 37, 33, 0.06);
+  --ns-shadow-md: 0 2px 0 rgba(41, 37, 33, 0.04), 0 6px 14px rgba(41, 37, 33, 0.08);
+  --ns-shadow-lg: 0 4px 0 rgba(41, 37, 33, 0.03), 0 14px 30px rgba(41, 37, 33, 0.10);
+  --ns-shadow-xl: 0 8px 0 rgba(41, 37, 33, 0.04), 0 28px 56px rgba(41, 37, 33, 0.16);
+}
+[data-theme='dark'] {
+  --ns-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.32);
+  --ns-shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.36);
+  --ns-shadow-md: 0 2px 0 rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.44);
+  --ns-shadow-lg: 0 4px 0 rgba(0, 0, 0, 0.36), 0 18px 38px rgba(0, 0, 0, 0.5);
+  --ns-shadow-xl: 0 10px 0 rgba(0, 0, 0, 0.34), 0 32px 64px rgba(0, 0, 0, 0.6);
+}
+
+/* --- 2. Surface language: card + panel ---------------------------------------
+ * Sharper console radius (12px reads soft/marketing; 10px reads instrument).
+ * Give every card a real resting shadow + a slightly firmer border so the grid
+ * of cards on Home/Runtime reads as distinct planes, not washed rectangles. */
+.ns-card,
+.ns-panel {
+  border-radius: 10px;
+  border-color: var(--ns-border);
+}
+.ns-card {
+  box-shadow: var(--ns-shadow-sm);
+}
+/* Light: firm the resting edge one notch above the hairline so the press
+ * shadow lands against a real border instead of a wash. */
+.ns-card,
+.ns-panel {
+  border-color: color-mix(in oklab, var(--ns-border-strong) 45%, var(--ns-border));
+}
+/* Dark: a stronger border plus a 1px inset top highlight — raised surfaces
+ * catch a machined edge instead of dissolving into the near-black canvas. */
+[data-theme='dark'] .ns-card,
+[data-theme='dark'] .ns-panel {
+  border-color: var(--ns-border-strong);
+  box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(235, 228, 210, 0.04);
+}
+
+/* Unify the interactive-card feel to a lift-on-press: border firms, shadow
+ * grows one step. Applies to every net-new console surface too. */
+.ns-card--interactive:hover,
+.ns-kpi:hover,
+.ns-stackmap__node:hover {
+  box-shadow: var(--ns-shadow-md);
+}
+
+/* Net-new console cards inherit the same resting shadow + sharper radius so the
+ * hand-built surfaces match the DS card exactly. */
+.ns-kpi,
+.ns-assist,
+.ns-incident,
+.ns-statlink,
+.ns-logstrip {
+  border-radius: 10px;
+  box-shadow: var(--ns-shadow-xs);
+}
+[data-theme='dark'] .ns-kpi,
+[data-theme='dark'] .ns-statlink,
+[data-theme='dark'] .ns-logstrip {
+  border-color: var(--ns-border-strong);
+  box-shadow: var(--ns-shadow-xs), inset 0 1px 0 rgba(235, 228, 210, 0.04);
+}
+
+/* KPI stat cohesion: the label sits directly above its value as one block, and
+ * the value+delta baseline-align tightly. Tighten the intra-card rhythm so the
+ * number dominates and the sparkline reads as a footnote, not a divider. */
+.ns-kpi { gap: var(--ns-space-1-5); padding: var(--ns-space-4) var(--ns-space-5); }
+.ns-kpi__value { letter-spacing: -0.01em; }
+
+/* --- 3. Display typography ----------------------------------------------------
+ * Tighten heading tracking for a machined feel and hold a clear scale. The
+ * console page-header (in-shell pages) sits one notch below the marketing h1
+ * but keeps the same optical weight and tracking. */
+.ns-page-header h1 {
+  letter-spacing: -0.02em;
+}
+.ns-page-header--console h1 {
+  font-size: var(--ns-text-2xl);
+  font-weight: 650;
+  letter-spacing: -0.018em;
+  line-height: 1.15;
+}
+/* Lede: calmer measure, one consistent size, generous leading for scanning. */
+.ns-page-header .ns-lede {
+  font-size: var(--ns-text-sm);
+  line-height: var(--ns-leading-relaxed);
+  max-width: 68ch;
+}
+
+/* Mono uppercase micro-labels are a recurring console idiom (KPI labels, rail
+ * labels, log heads). Normalize their tracking + color so they read as one
+ * family instead of drifting per-component. */
+.ns-kpi__label,
+.ns-logstrip__head-label,
+.ns-mini-label,
+.ns-confirm__cli-label,
+.ns-assist__grounding-label {
+  letter-spacing: 0.09em;
+}
+
+/* --- 4. Console rhythm --------------------------------------------------------
+ * The three-zone grid was breathing a touch wide for a dense operator surface.
+ * Tighten the inter-zone gutter one step so the rail, main, and context rail
+ * sit closer without crowding. */
+.ns-console-grid { gap: var(--ns-space-5); }
+@media (min-width: 1440px) { .ns-console-grid { gap: var(--ns-space-6); } }
+
+/* --- 5. Focus ring consistency -----------------------------------------------
+ * One ring treatment for every interactive net-new surface (some used 1px,
+ * some 2px, some no offset). Standardize on a 2px ring at a 2px offset. */
+.ns-flowrow:focus-visible,
+.ns-quickcmd:focus-visible,
+.ns-seg__btn:focus-visible {
+  outline-offset: 2px;
+}
+
+/* ============================================================================
+ * V2 — SHELL SIGNATURE (sidebar + topbar) and HOME COMPONENT KIT.
+ *
+ * Bold pass. Adopts the reference dashboards' density, grouped-nav signature,
+ * active-item treatment, pinned profile/workspace card, balanced elegant
+ * header, and a reusable chart/KPI kit — all in NS One identity (copper primary,
+ * teal/amber/red state, warm-cream light + dark, hard-offset press shadow,
+ * DM Sans/Mono, --ns-* tokens only, no raw hex, ns-* class contract). All
+ * geometry is div/CSS or post-mount JS — no SVG {{ }} holes.
+ * ------------------------------------------------------------------------- */
+
+/* --- Sidebar: width + signature header ------------------------------------ */
+:root { --ns-sidebar-width: 272px; }
+
+.ns-sidenav { background: var(--ns-surface); }
+[data-theme='dark'] .ns-sidenav { background: color-mix(in oklab, var(--ns-bg), var(--ns-surface) 55%); }
+
+.ns-sidenav__header { gap: var(--ns-space-2); }
+.ns-sidenav__brand { display: inline-flex; align-items: center; gap: var(--ns-space-2-5); min-width: 0;
+  border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; color: inherit; text-align: left; }
+.ns-sidenav__mark { position: relative; display: inline-flex; align-items: center; justify-content: center;
+  width: 1.65rem; height: 1.65rem; flex: none; border-radius: var(--ns-radius-md);
+  background: linear-gradient(150deg, var(--ns-copper-6), var(--ns-copper-7));
+  color: var(--ns-primary-fg); font-family: var(--ns-font-mono); font-size: var(--ns-text-sm);
+  font-weight: 700; line-height: 1; box-shadow: var(--ns-shadow-xs); }
+.ns-sidenav__mark-dot { position: absolute; right: 3px; bottom: 3px; width: 4px; height: 4px;
+  border-radius: var(--ns-radius-full); background: var(--ns-primary-fg); opacity: 0.85; }
+.ns-sidenav__wordmark { display: grid; gap: 1px; min-width: 0; }
+.ns-sidenav__wordmark .ns-topbar__brand { font-size: var(--ns-text-sm); }
+.ns-sidenav__brand-sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ns-muted-fg); }
+.ns-sidenav__rail-toggle, .ns-sidenav__close { margin-left: auto; flex: none; }
+
+/* --- Sidebar: grouped nav + active-item treatment ------------------------- */
+.ns-sidenav__body { gap: var(--ns-space-0-5); padding-inline: var(--ns-space-3); }
+.ns-sidenav__group + .ns-sidenav__group { margin-top: var(--ns-space-2); }
+.ns-sidenav__group-label { padding-block: var(--ns-space-2-5) var(--ns-space-1); opacity: 0.75; }
+
+/* --- Sidebar: PINNED group with ⌘-shortcut chips -------------------------- */
+.ns-sidenav__group--pinned { margin-top: var(--ns-space-3); padding-top: var(--ns-space-2);
+  border-top: 1px solid color-mix(in oklab, var(--ns-border) 70%, transparent); }
+.ns-sidenav__pinned-label { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-2); }
+.ns-sidenav__pinned-hint { font-family: var(--ns-font-mono); opacity: 0.6; letter-spacing: 0; }
+.ns-sidenav__pin { display: flex; align-items: center; gap: var(--ns-space-2-5); width: 100%; min-height: 32px;
+  padding-inline: var(--ns-space-2-5); border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit;
+  text-align: left; border-radius: var(--ns-radius-md); }
+.ns-sidenav__pin:hover { background: color-mix(in oklab, var(--ns-fg) 5%, transparent); }
+[data-theme='dark'] .ns-sidenav__pin:hover { background: color-mix(in oklab, var(--ns-surface-raised) 55%, transparent); }
+.ns-sidenav__pin:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: -2px; }
+.ns-sidenav__pin-dot { width: 7px; height: 7px; border-radius: var(--ns-radius-full); flex: none;
+  background: color-mix(in oklab, var(--ns-muted-fg) 55%, transparent); }
+.ns-sidenav__pin-dot[data-tone='primary'] { background: var(--ns-primary); }
+.ns-sidenav__pin-dot[data-tone='warning'] { background: var(--ns-warning); }
+.ns-sidenav__pin-dot[data-tone='success'] { background: var(--ns-success); }
+.ns-sidenav__pin-label { flex: 1; min-width: 0; font-size: var(--ns-text-sm); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; }
+.ns-sidenav__pin-kbd { flex: none; }
+
+.ns-sidenav__item { min-height: 36px; gap: var(--ns-space-2-5); border-radius: var(--ns-radius-md);
+  padding-inline: var(--ns-space-2-5); overflow: hidden; }
+.ns-sidenav__item:hover { background: color-mix(in oklab, var(--ns-fg) 5%, transparent); }
+[data-theme='dark'] .ns-sidenav__item:hover { background: color-mix(in oklab, var(--ns-surface-raised) 55%, transparent); }
+.ns-sidenav__icon { width: 26px; height: 26px; border-radius: var(--ns-radius-md);
+  background: color-mix(in oklab, var(--ns-fg) 5%, transparent); color: var(--ns-muted-fg);
+  font-size: var(--ns-text-sm); transition: background-color 140ms ease, color 140ms ease; }
+[data-theme='dark'] .ns-sidenav__icon { background: color-mix(in oklab, var(--ns-surface-raised) 60%, transparent); }
+.ns-sidenav__item:hover .ns-sidenav__icon { color: var(--ns-fg); }
+.ns-sidenav__label { font-weight: 500; }
+.ns-sidenav__item-rail { position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(0);
+  width: 3px; height: 1.35rem; border-radius: 0 var(--ns-radius-full) var(--ns-radius-full) 0;
+  background: var(--ns-primary); transition: transform 150ms var(--ns-ease-spring, ease); }
+
+.ns-sidenav__item[aria-current='page'] { background: var(--ns-primary-subtle); color: var(--ns-fg); }
+.ns-sidenav__item[aria-current='page'] .ns-sidenav__icon {
+  background: color-mix(in oklab, var(--ns-primary) 90%, var(--ns-card)); color: var(--ns-primary-fg); }
+.ns-sidenav__item[aria-current='page'] .ns-sidenav__item-rail { transform: translateY(-50%) scaleY(1); }
+.ns-sidenav__item:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: -2px; }
+
+/* --- Sidebar: footer workspace + profile cards ---------------------------- */
+.ns-sidenav__footer { gap: var(--ns-space-2); padding: var(--ns-space-3); }
+.ns-sidenav__workspace { display: flex; align-items: center; gap: var(--ns-space-2-5);
+  padding: var(--ns-space-2) var(--ns-space-2-5); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-md); background: var(--ns-card); box-shadow: var(--ns-shadow-xs); }
+.ns-sidenav__ws-dot { width: 8px; height: 8px; flex: none; border-radius: var(--ns-radius-full);
+  background: var(--ns-success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ns-success), transparent 82%); }
+.ns-sidenav__ws-dot[data-state='degraded'] { background: var(--ns-warning);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ns-warning), transparent 82%); }
+.ns-sidenav__ws-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
+.ns-sidenav__ws-name { font-size: var(--ns-text-sm); font-weight: 600; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; }
+.ns-sidenav__ws-meta { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-sidenav__ws-state { color: var(--ns-success); }
+.ns-sidenav__ws-state[data-state='degraded'] { color: var(--ns-warning); }
+.ns-sidenav__ws-switch { flex: none; }
+
+.ns-sidenav__profile { display: flex; align-items: center; gap: var(--ns-space-2-5); width: 100%;
+  padding: var(--ns-space-2) var(--ns-space-2-5); border: 1px solid transparent; border-radius: var(--ns-radius-md);
+  background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left; }
+.ns-sidenav__profile:hover { background: var(--ns-card); border-color: var(--ns-border); box-shadow: var(--ns-shadow-xs); }
+.ns-sidenav__profile:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 2px; }
+.ns-sidenav__avatar { flex: none; background: color-mix(in oklab, var(--ns-primary) 88%, var(--ns-card)); color: var(--ns-primary-fg); }
+.ns-sidenav__profile-main { display: grid; gap: 1px; min-width: 0; flex: 1; }
+.ns-sidenav__profile-name { display: flex; align-items: center; gap: var(--ns-space-1); font-size: var(--ns-text-sm);
+  font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-sidenav__profile-verify { color: var(--ns-primary); font-size: var(--ns-text-2xs); }
+.ns-sidenav__profile-role { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-sidenav__profile-chevron { margin-left: auto; color: var(--ns-muted-fg); font-size: var(--ns-text-base); flex: none; }
+
+/* --- Sidebar: collapsible icon rail (desktop) ----------------------------- */
+@media (min-width: 1025px) {
+  .ns-dashboard:has(.ns-sidenav--rail) { grid-template-columns: 4.75rem minmax(0, 1fr); }
+  .ns-sidenav--rail { --ns-sidebar-width: 4.75rem; }
+  .ns-sidenav--rail .ns-sidenav__wordmark,
+  .ns-sidenav--rail .ns-sidenav__label,
+  .ns-sidenav--rail .ns-sidenav__badge,
+  .ns-sidenav--rail .ns-sidenav__group-label,
+  .ns-sidenav--rail .ns-sidenav__ws-main,
+  .ns-sidenav--rail .ns-sidenav__ws-switch,
+  .ns-sidenav--rail .ns-sidenav__profile-main,
+  .ns-sidenav--rail .ns-sidenav__group--pinned,
+  .ns-sidenav--rail .ns-sidenav__profile-chevron { display: none; }
+  .ns-sidenav--rail .ns-sidenav__header { justify-content: center; padding-inline: var(--ns-space-2); }
+  .ns-sidenav--rail .ns-sidenav__rail-toggle { margin: 0; position: absolute; right: -12px; top: 12px;
+    z-index: 2; background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full);
+    width: 24px; height: 24px; box-shadow: var(--ns-shadow-xs); }
+  .ns-sidenav--rail .ns-sidenav__item { justify-content: center; padding-inline: 0; }
+  .ns-sidenav--rail .ns-sidenav__icon { position: relative; }
+  .ns-sidenav--rail .ns-sidenav__group + .ns-sidenav__group { margin-top: var(--ns-space-1);
+    padding-top: var(--ns-space-2); border-top: 1px solid var(--ns-border); }
+  .ns-sidenav--rail .ns-sidenav__workspace { justify-content: center; padding-inline: var(--ns-space-1); }
+  .ns-sidenav--rail .ns-sidenav__profile { justify-content: center; }
+}
+
+/* --- Topbar: balanced elegant header -------------------------------------- */
+.ns-topbar2 { height: auto; min-height: 56px; padding-block: var(--ns-space-2); }
+.ns-topbar2__start { gap: var(--ns-space-3); }
+.ns-topbar2__heading { display: grid; gap: 1px; min-width: 0; }
+.ns-topbar2__crumbs { font-size: var(--ns-text-2xs); }
+.ns-topbar2__eyebrow { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ns-muted-fg); }
+.ns-topbar2__title { margin: 0; font-size: var(--ns-text-base); font-weight: 650;
+  letter-spacing: -0.01em; line-height: 1.1; color: var(--ns-fg); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; }
+.ns-topbar2__end { gap: var(--ns-space-2); }
+.ns-topbar2__env { font-size: var(--ns-text-3xs); }
+.ns-topbar2__search { max-width: 20rem; min-width: 12rem; }
+.ns-topbar2__search .ns-search__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-topbar2__search .ns-search__kbd { margin-left: auto; flex: none; }
+.ns-topbar2__divider { width: 1px; height: 1.5rem; background: var(--ns-border); flex: none; }
+.ns-topbar2__aspire { white-space: nowrap; }
+.ns-topbar2__ask { white-space: nowrap; gap: var(--ns-space-1-5); }
+.ns-topbar2__ask-glyph { font-size: var(--ns-text-sm); line-height: 1; }
+
+@media (max-width: 1200px) { .ns-topbar2__search { min-width: 9rem; } .ns-topbar2__search .ns-search__label { font-size: var(--ns-text-xs); } }
+@media (max-width: 1120px) { .ns-topbar2__aspire { display: none; } }
+@media (max-width: 1024px) { .ns-topbar2__title { font-size: var(--ns-text-sm); } }
+
+/* ============================================================================
+ * V2 — HOME COMPONENT KIT (dense, composable, token-driven; no SVG holes).
+ * ------------------------------------------------------------------------- */
+
+/* --- Home layout scaffolding ---------------------------------------------- */
+.ns-home { display: grid; gap: var(--ns-space-6); grid-template-columns: minmax(0, 1fr); min-width: 0; }
+.ns-home > * { min-width: 0; }
+.ns-home__header { padding-block: var(--ns-space-1) 0; }
+.ns-home__kpis { display: grid; gap: var(--ns-space-5);
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: stretch; }
+.ns-home__kpi-tiles { display: grid; gap: var(--ns-space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; align-items: stretch; }
+.ns-home__kpi-tiles .ns-kpi { align-content: start; grid-template-rows: auto auto auto minmax(40px, 1fr); }
+.ns-home__kpi-tiles .ns-kpi__spark { height: 100%; min-height: 40px; align-self: stretch; margin-top: var(--ns-space-2); }
+.ns-home__hero { display: grid; gap: var(--ns-space-5); align-items: start;
+  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
+.ns-home__analysis { display: grid; gap: var(--ns-space-5); align-items: stretch;
+  grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.ns-home__bottom { display: grid; gap: var(--ns-space-5); align-items: start;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
+.ns-home__statgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ns-space-4); }
+
+.ns-home__section-head { display: flex; align-items: center; gap: var(--ns-space-3); }
+.ns-home__section-rule { flex: 1; height: 1px; background: var(--ns-border); }
+
+/* --- Delta chip (green +2.1% pill from refs, in NS tones) ------------------ */
+.ns-deltachip { display: inline-flex; align-items: center; padding: 1px var(--ns-space-1-5);
+  border-radius: var(--ns-radius-full); background: var(--ns-success-subtle); color: var(--ns-success);
+  font-size: var(--ns-text-3xs); font-weight: 600; letter-spacing: 0; }
+.ns-deltachip[data-tone='warning'] { background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-deltachip[data-tone='destructive'] { background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-deltachip[data-tone='muted'] { background: var(--ns-muted); color: var(--ns-muted-fg); }
+
+/* --- Panel card: header + body shared by analysis/bottom cards ------------ */
+.ns-panelcard { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
+.ns-panelcard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-3);
+  padding: var(--ns-space-3-5) var(--ns-space-4); border-bottom: 1px solid var(--ns-border); }
+.ns-panelcard__title-wrap { display: grid; gap: 2px; min-width: 0; }
+.ns-panelcard__sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-panelcard__body { padding: var(--ns-space-4); display: grid; gap: var(--ns-space-3-5); align-content: start; flex: 1; }
+.ns-panelcard__list { display: flex; flex-direction: column; }
+
+/* --- Radial gauge card (wiring health) ------------------------------------ */
+.ns-gaugecard { display: flex; flex-direction: column; gap: var(--ns-space-3); padding: var(--ns-space-4) var(--ns-space-5) var(--ns-space-5); }
+.ns-gaugecard__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-2); }
+.ns-gauge { position: relative; width: 100%; max-width: 15rem; margin: var(--ns-space-1) auto 0;
+  aspect-ratio: 2 / 1.06; overflow: hidden; }
+.ns-gauge__ring { position: absolute; inset: 0; top: 0; width: 100%; aspect-ratio: 1 / 1; border-radius: 50%;
+  -webkit-mask: radial-gradient(closest-side, transparent 61%, #000 62%);
+          mask: radial-gradient(closest-side, transparent 61%, #000 62%); }
+.ns-gauge__center { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 0; justify-items: center; }
+.ns-gauge__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xl); font-weight: 700;
+  line-height: 1.05; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--ns-fg); }
+.ns-gauge__caption { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--ns-muted-fg); }
+.ns-gaugecard__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ns-space-2);
+  border-top: 1px solid var(--ns-border); padding-top: var(--ns-space-3); }
+.ns-gaugecard__stat { display: grid; gap: 2px; justify-items: center; padding: var(--ns-space-1) var(--ns-space-1);
+  border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; border-radius: var(--ns-radius-sm); }
+.ns-gaugecard__stat:hover { background: var(--ns-surface-raised); }
+.ns-gaugecard__stat-dot { width: 7px; height: 7px; border-radius: var(--ns-radius-full); background: var(--ns-border-strong); }
+.ns-gaugecard__stat-dot[data-tone='success'] { background: var(--ns-success); }
+.ns-gaugecard__stat-dot[data-tone='warning'] { background: var(--ns-warning); }
+.ns-gaugecard__stat-val { font-family: var(--ns-font-mono); font-size: var(--ns-text-base); font-weight: 700;
+  font-variant-numeric: tabular-nums; }
+.ns-gaugecard__stat-label { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+
+/* --- Channel bar (stacked horizontal outcome bar) + legend ---------------- */
+.ns-channelbar { display: flex; gap: 3px; height: 10px; }
+.ns-channelbar__seg { border-radius: var(--ns-radius-full); background: var(--ns-border-strong); min-width: 4px; }
+.ns-channelbar__seg[data-tone='success'] { background: var(--ns-success); }
+.ns-channelbar__seg[data-tone='warning'] { background: var(--ns-warning); }
+.ns-channelbar__seg[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-legend { display: flex; flex-wrap: wrap; gap: var(--ns-space-2) var(--ns-space-4); }
+.ns-legend__item { display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  font-size: var(--ns-text-xs); color: var(--ns-muted-fg); }
+.ns-legend__item b { color: var(--ns-fg); font-weight: 600; font-family: var(--ns-font-mono); }
+.ns-legend__dot { width: 8px; height: 8px; border-radius: var(--ns-radius-full); background: var(--ns-border-strong); flex: none; }
+.ns-legend__dot[data-tone='success'] { background: var(--ns-success); }
+.ns-legend__dot[data-tone='warning'] { background: var(--ns-warning); }
+.ns-legend__dot[data-tone='destructive'] { background: var(--ns-destructive); }
+
+/* --- Outcomes card: hero value + meta (Marketing-Channels archetype) ------ */
+.ns-outcomes__hero { display: flex; align-items: baseline; gap: var(--ns-space-2-5); flex-wrap: wrap; }
+.ns-outcomes__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xl); font-weight: 700;
+  line-height: 1; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; color: var(--ns-fg); }
+.ns-outcomes__hero-meta { font-size: var(--ns-text-xs); color: var(--ns-muted-fg); display: inline-flex;
+  align-items: baseline; gap: var(--ns-space-1-5); }
+
+/* --- Column-aligned data table: header + rows (icon+label · metric · trend) */
+.ns-datatable { display: grid; gap: 0; border-top: 1px solid var(--ns-border); }
+.ns-datatable__head { display: grid; grid-template-columns: 1fr 4.5rem 4rem; gap: var(--ns-space-2);
+  padding: var(--ns-space-2) var(--ns-space-1) var(--ns-space-1-5); }
+.ns-datatable__h { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--ns-muted-fg); }
+.ns-datatable__h--num { text-align: right; }
+.ns-datatable__row { display: grid; grid-template-columns: 1fr 4.5rem 4rem; gap: var(--ns-space-2); align-items: center;
+  padding: var(--ns-space-2) var(--ns-space-1); border: 0; border-top: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent);
+  background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left; min-width: 0; }
+.ns-datatable__row:hover { background: var(--ns-surface-raised); }
+.ns-datatable__cell--lead { display: inline-flex; align-items: center; gap: var(--ns-space-2-5); min-width: 0; }
+.ns-datatable__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
+  flex: none; border-radius: var(--ns-radius-full); background: color-mix(in oklab, var(--ns-fg) 6%, transparent);
+  color: var(--ns-muted-fg); font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); }
+.ns-datatable__label { font-size: var(--ns-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-datatable__cell--num { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 600;
+  font-variant-numeric: tabular-nums; text-align: right; justify-self: end; }
+.ns-datatable__cell--num .ns-trendarrow { min-width: 0; }
+
+/* --- Full-width secondary button (ref "View reports") --------------------- */
+.ns-fullbtn { width: 100%; border: 1px solid var(--ns-border); background: var(--ns-card); color: var(--ns-fg);
+  font: inherit; font-size: var(--ns-text-sm); font-weight: 500; padding: var(--ns-space-2-5); border-radius: var(--ns-radius-md);
+  cursor: pointer; transition: background 120ms ease, border-color 120ms ease; margin-top: var(--ns-space-1); }
+.ns-fullbtn:hover { background: var(--ns-surface-raised); border-color: var(--ns-border-strong); }
+.ns-fullbtn:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 2px; }
+
+/* --- Data rows (icon + label + metric + trend arrow) ---------------------- */
+.ns-datarows { display: grid; gap: var(--ns-space-0-5); }
+.ns-datarows--divided { gap: 0; }
+.ns-datarow { display: flex; align-items: center; gap: var(--ns-space-2-5); width: 100%; text-align: left;
+  padding: var(--ns-space-2) var(--ns-space-1); border: 0; background: transparent; cursor: pointer; font: inherit;
+  color: inherit; border-radius: var(--ns-radius-sm); min-width: 0; }
+.ns-datarows--divided .ns-datarow { border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent);
+  border-radius: 0; padding-inline: 0; }
+.ns-datarows--divided .ns-datarow:last-child { border-bottom: 0; }
+.ns-datarow:hover { background: var(--ns-surface-raised); }
+.ns-datarow__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
+  flex: none; border-radius: var(--ns-radius-sm); background: color-mix(in oklab, var(--ns-fg) 5%, transparent);
+  color: var(--ns-muted-fg); font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); }
+.ns-datarow__icon[data-tone='warning'] { background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-datarow__icon[data-tone='success'] { background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-datarow__label { flex: 1; min-width: 0; font-size: var(--ns-text-sm); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; }
+.ns-datarow__metric { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 600;
+  font-variant-numeric: tabular-nums; }
+.ns-datarow__pill { flex: none; }
+.ns-trendarrow { display: inline-flex; align-items: center; min-width: 3.1rem; justify-content: flex-end;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600; color: var(--ns-success); }
+.ns-trendarrow[data-dir='down'] { color: var(--ns-destructive); }
+.ns-trendarrow[data-dir='flat'] { color: var(--ns-muted-fg); }
+
+/* --- Signal rows (two-line: icon tile + label/detail + status pill + →) --- */
+.ns-siglist { display: grid; gap: 0; }
+.ns-sigrow { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--ns-space-2-5);
+  width: 100%; text-align: left; padding: var(--ns-space-2-5) var(--ns-space-1); border: 0;
+  border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent); background: transparent;
+  cursor: pointer; font: inherit; color: inherit; min-width: 0; }
+.ns-sigrow:last-child { border-bottom: 0; }
+.ns-sigrow:hover { background: var(--ns-surface-raised); }
+.ns-sigrow__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
+  flex: none; border-radius: var(--ns-radius-md); background: color-mix(in oklab, var(--ns-fg) 5%, transparent);
+  color: var(--ns-muted-fg); font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); }
+.ns-sigrow__icon[data-tone='warning'] { background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-sigrow__icon[data-tone='success'] { background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-sigrow__icon[data-tone='destructive'] { background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-sigrow__main { display: grid; gap: 1px; min-width: 0; }
+.ns-sigrow__label { font-size: var(--ns-text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-sigrow__detail { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-sigrow__pill { flex: none; }
+.ns-sigrow__chevron { color: var(--ns-muted-fg); opacity: 0.4; font-size: var(--ns-text-sm); flex: none;
+  transition: opacity 120ms ease, transform 120ms ease; }
+.ns-sigrow:hover .ns-sigrow__chevron { opacity: 0.9; transform: translateX(2px); }
+
+/* --- Donut (segmented ring via conic-gradient) + legend ------------------- */
+.ns-donutwrap { display: grid; gap: var(--ns-space-4); grid-template-columns: auto minmax(0, 1fr); align-items: center; }
+.ns-donut { position: relative; width: 7.5rem; height: 7.5rem; flex: none; }
+/* mix summary key/values beside the donut */
+.ns-mixstat { display: grid; grid-template-columns: auto 1fr; gap: var(--ns-space-1) var(--ns-space-3); align-content: center; min-width: 0; }
+.ns-mixstat__k { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.08em; color: var(--ns-muted-fg); align-self: center; }
+.ns-mixstat__v { font-size: var(--ns-text-sm); font-weight: 600; }
+/* aligned share-bar rows: dot · label · mini bar · % */
+.ns-sharelist { display: grid; gap: 0; border-top: 1px solid var(--ns-border); }
+.ns-shareitem { display: grid; grid-template-columns: auto 5rem 1fr auto; align-items: center; gap: var(--ns-space-2-5);
+  width: 100%; text-align: left; padding: var(--ns-space-2) var(--ns-space-1); border: 0;
+  border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent); background: transparent;
+  cursor: pointer; font: inherit; color: inherit; min-width: 0; }
+.ns-shareitem:last-child { border-bottom: 0; }
+.ns-shareitem:hover { background: var(--ns-surface-raised); }
+.ns-shareitem__dot { flex: none; }
+.ns-shareitem__label { font-size: var(--ns-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-shareitem__bar { height: 6px; border-radius: var(--ns-radius-full); background: var(--ns-muted); overflow: hidden; min-width: 0; }
+.ns-shareitem__fill { display: block; height: 100%; border-radius: var(--ns-radius-full); }
+.ns-shareitem__val { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); font-weight: 600;
+  color: var(--ns-muted-fg); font-variant-numeric: tabular-nums; justify-self: end; }
+.ns-donut__ring { position: absolute; inset: 0; border-radius: 50%; background: var(--ns-muted);
+  -webkit-mask: radial-gradient(closest-side, transparent 63%, #000 64%);
+          mask: radial-gradient(closest-side, transparent 63%, #000 64%); }
+.ns-donut__hole { position: absolute; inset: 0; display: grid; gap: 0; place-content: center; justify-items: center; }
+.ns-donut__total { font-family: var(--ns-font-mono); font-size: var(--ns-text-xl); font-weight: 700; line-height: 1; }
+.ns-donut__total-label { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); text-transform: uppercase; letter-spacing: 0.08em; }
+.ns-donut__legend { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-donut__legend-item { display: flex; align-items: center; gap: var(--ns-space-2); width: 100%; text-align: left;
+  padding: var(--ns-space-1) var(--ns-space-1-5); border: 0; background: transparent; cursor: pointer; font: inherit;
+  color: inherit; border-radius: var(--ns-radius-sm); min-width: 0; }
+.ns-donut__legend-item:hover { background: var(--ns-surface-raised); }
+.ns-donut__legend-label { flex: 1; min-width: 0; font-size: var(--ns-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-donut__legend-val { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); font-weight: 600; color: var(--ns-muted-fg); }
+
+/* --- Segmented time control (reuses .ns-seg) ------------------------------ */
+.ns-segtime { flex: none; }
+
+/* --- Just-happened: compact activity feed card ---------------------------- */
+.ns-home__teaser { display: grid; gap: var(--ns-space-2); padding: var(--ns-space-3-5) var(--ns-space-4);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
+  background: color-mix(in oklab, var(--ns-surface), transparent 30%); }
+.ns-home__teaser-head { display: flex; align-items: center; gap: var(--ns-space-2-5); }
+.ns-home__teaser-live { flex: none; }
+.ns-home__teaser-all { padding: var(--ns-space-0-5) var(--ns-space-2); font-size: var(--ns-text-2xs); }
+.ns-home__teaser-items { display: grid; gap: 0; min-width: 0; }
+.ns-feedrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center;
+  gap: var(--ns-space-2-5); width: 100%; text-align: left; padding: var(--ns-space-1-5) var(--ns-space-1); border: 0;
+  border-top: 1px solid color-mix(in oklab, var(--ns-border) 45%, transparent); background: transparent;
+  cursor: pointer; font: inherit; color: inherit; min-width: 0; border-radius: var(--ns-radius-sm); }
+.ns-feedrow:hover { background: var(--ns-surface-raised); }
+.ns-feedrow__marker { width: 8px; height: 8px; border-radius: var(--ns-radius-full); flex: none;
+  background: color-mix(in oklab, var(--ns-muted-fg) 55%, transparent); }
+.ns-feedrow__marker[data-tone='success'] { background: var(--ns-success); }
+.ns-feedrow__marker[data-tone='warning'] { background: var(--ns-warning); }
+.ns-feedrow__marker[data-tone='primary'] { background: var(--ns-primary); }
+.ns-feedrow__marker[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-feedrow__text { font-size: var(--ns-text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ns-feedrow:hover .ns-feedrow__text { color: var(--ns-fg); }
+.ns-feedrow__chevron { color: var(--ns-muted-fg); opacity: 0.3; font-size: var(--ns-text-xs); flex: none;
+  transition: opacity 120ms ease, transform 120ms ease; }
+.ns-feedrow:hover .ns-feedrow__chevron { opacity: 0.85; transform: translateX(2px); }
+
+/* --- ns-tag — small provenance/entity tag chip ---------------------------- */
+.ns-tag { display: inline-flex; align-items: center; padding: 1px var(--ns-space-2); border-radius: var(--ns-radius-sm);
+  background: color-mix(in oklab, var(--ns-fg) 6%, transparent); color: var(--ns-muted-fg); flex: none;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); letter-spacing: 0.03em; white-space: nowrap; }
+.ns-tag[data-tone='primary'] { background: var(--ns-primary-subtle); color: var(--ns-primary); }
+.ns-tag[data-tone='success'] { background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-tag[data-tone='warning'] { background: var(--ns-warning-subtle); color: var(--ns-warning); }
+
+/* --- ns-timepill — relative/absolute time pill ---------------------------- */
+.ns-timepill { display: inline-flex; align-items: center; gap: 3px; flex: none; font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.ns-timepill::before { content: '◷'; opacity: 0.6; }
+
+/* --- Contributed-panels grid ---------------------------------------------- */
+.ns-contribgrid { display: grid; grid-template-columns: 6.5rem minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--ns-space-3); align-items: center; }
+.ns-contribgrid--head { padding: var(--ns-space-1) 0 var(--ns-space-2); border-bottom: 1px solid var(--ns-border); }
+.ns-contribgrid__row { padding: var(--ns-space-2) 0; border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent); }
+.ns-contribgrid__row:last-child { border-bottom: 0; }
+.ns-contribgrid__panel { font-size: var(--ns-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-contribgrid__mount { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* --- Palette card: search bar + grouped action rows w/ ⌘ chips ------------ */
+.ns-palettecard__body { padding: var(--ns-space-4); display: grid; gap: var(--ns-space-3-5); }
+.ns-palettecard__search { display: flex; align-items: center; gap: var(--ns-space-2-5); width: 100%; text-align: left;
+  padding: var(--ns-space-2-5) var(--ns-space-3); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md);
+  background: var(--ns-surface); color: var(--ns-muted-fg); font: inherit; cursor: pointer; transition: border-color 120ms ease; }
+.ns-palettecard__search:hover { border-color: var(--ns-border-strong); }
+.ns-palettecard__search-icon { font-family: var(--ns-font-mono); }
+.ns-palettecard__search-label { flex: 1; font-size: var(--ns-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-palettegroup { display: grid; gap: var(--ns-space-1); }
+.ns-palettegroup__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.1em; color: var(--ns-muted-fg); padding-inline: var(--ns-space-1); }
+.ns-palettegroup__items { display: grid; gap: 0; }
+.ns-cmdrow { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--ns-space-2-5);
+  width: 100%; text-align: left; padding: var(--ns-space-2) var(--ns-space-1-5); border: 0; border-radius: var(--ns-radius-sm);
+  background: transparent; cursor: pointer; font: inherit; color: inherit; min-width: 0; }
+.ns-cmdrow:hover { background: var(--ns-surface-raised); }
+.ns-cmdrow:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: -2px; }
+.ns-cmdrow__icon { font-family: var(--ns-font-mono); color: var(--ns-muted-fg); width: 1.25rem; text-align: center; flex: none; }
+.ns-cmdrow__label { font-size: var(--ns-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-cmdrow__kind { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  text-transform: uppercase; letter-spacing: 0.06em; }
+.ns-cmdrow__kind[data-ext='1']::after { content: ' ↗'; }
+.ns-cmdrow__kbd { flex: none; }
+
+/* --- Contributed-panels table (icon + panel · plugin badge · mount + →) --- */
+.ns-panelcard__body--flush { padding: 0; }
+.ns-contribtable { display: grid; gap: 0; }
+.ns-contribtable__head { display: grid; grid-template-columns: 6.5rem minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--ns-space-3);
+  align-items: center; padding: var(--ns-space-3) var(--ns-space-4) var(--ns-space-2); border-bottom: 1px solid var(--ns-border); }
+.ns-contribtable__row { display: grid; grid-template-columns: 6.5rem minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--ns-space-3);
+  align-items: center; width: 100%; text-align: left; padding: var(--ns-space-2-5) var(--ns-space-4); border: 0;
+  border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 45%, transparent); background: transparent;
+  cursor: pointer; font: inherit; color: inherit; min-width: 0; }
+.ns-contribtable__row:last-child { border-bottom: 0; }
+.ns-contribtable__row:hover { background: var(--ns-surface-raised); }
+.ns-contribtable__plugin { justify-self: start; }
+.ns-contribtable__panel { display: inline-flex; align-items: center; gap: var(--ns-space-2); font-size: var(--ns-text-sm);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+.ns-contribtable__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
+  flex: none; border-radius: var(--ns-radius-sm); background: color-mix(in oklab, var(--ns-fg) 5%, transparent);
+  color: var(--ns-muted-fg); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); }
+.ns-contribtable__mount { display: flex; align-items: center; gap: var(--ns-space-2); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); overflow: hidden; min-width: 0; }
+.ns-contribtable__mount > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-contribtable__chevron { margin-left: auto; opacity: 0.35; flex: none; transition: opacity 120ms ease, transform 120ms ease; }
+.ns-contribtable__row:hover .ns-contribtable__chevron { opacity: 0.9; transform: translateX(2px); }
+
+/* --- Home responsive: tablet + mobile-first collapse ---------------------- */
+@media (max-width: 1200px) {
+  .ns-home__statgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+@media (max-width: 1024px) {
+  .ns-home__kpis { grid-template-columns: minmax(0, 1fr); }
+  .ns-home__hero { grid-template-columns: minmax(0, 1fr); }
+  .ns-home__analysis { grid-template-columns: minmax(0, 1fr); }
+  .ns-home__bottom { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 640px) {
+  .ns-home { gap: var(--ns-space-5); }
+  .ns-home__kpis { grid-template-columns: minmax(0, 1fr); gap: var(--ns-space-4); }
+  .ns-home__kpi-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-2-5); }
+  .ns-home__kpi-tiles .ns-kpi:first-child { grid-column: 1 / -1; }
+  .ns-home__kpi-tiles .ns-kpi__spark { height: 34px; }
+  .ns-home__statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-2-5); }
+  .ns-kpi { padding: var(--ns-space-3) var(--ns-space-3-5); }
+  .ns-kpi__value { font-size: var(--ns-text-xl); }
+  .ns-throughput { padding: var(--ns-space-4); }
+  .ns-throughput__value { font-size: var(--ns-text-2xl); }
+  .ns-donutwrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
+  .ns-donut__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); display: grid; width: 100%; }
+  /* mobile: feed row drops the entity tag, keeps dot + text + time */
+  .ns-feedrow { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--ns-space-2); }
+  .ns-feedrow__entity { display: none; }
+  .ns-gauge { max-width: 13rem; }
+  /* Contributed table → two columns; mount target drops under the panel name */
+  .ns-contribtable__head { grid-template-columns: 5rem minmax(0, 1fr); }
+  .ns-contribtable__head span:last-child { display: none; }
+  .ns-contribtable__row { grid-template-columns: 5rem minmax(0, 1fr); row-gap: var(--ns-space-1); }
+  .ns-contribtable__mount { grid-column: 1 / -1; padding-left: calc(5rem + var(--ns-space-3)); }
+  /* stat tiles: first one full-width, denser */
+  .ns-statlink__value { font-size: var(--ns-text-2xl); }
+}
+@media (max-width: 360px) {
+  .ns-home__kpis, .ns-home__statgrid { grid-template-columns: minmax(0, 1fr); }
+  .ns-home__kpi-tiles { grid-template-columns: minmax(0, 1fr); }
+  .ns-donut__legend { grid-template-columns: minmax(0, 1fr); }
+}
+
+/* --- Mobile: command palette becomes a bottom sheet (refs 06) ------------- */
+@media (max-width: 640px) {
+  .ns-cmdk__backdrop { width: 100%; max-width: 100%; margin: 0; position: fixed;
+    inset: auto 0 0 0; height: auto; }
+  .ns-cmdk { max-height: 82vh; max-height: 82dvh; border-radius: var(--ns-radius-xl) var(--ns-radius-xl) 0 0;
+    border-bottom: 0; box-shadow: 0 -8px 40px color-mix(in srgb, var(--ns-gray-12, #111) 30%, transparent); }
+  /* grab handle */
+  .ns-cmdk::before { content: ''; display: block; width: 2.5rem; height: 0.25rem; border-radius: 9999px;
+    background: var(--ns-border-strong); margin: var(--ns-space-2) auto var(--ns-space-1); flex: none; }
+  .ns-cmdk__backdrop[open] { animation: ns-sheet-enter-bottom 220ms cubic-bezier(0.16, 1, 0.3, 1) forwards; }
+}
+
+/* --- Mobile drawer backdrop dim (glue; DS ships the show/hide only) -------- */
+@media (max-width: 1024px) {
+  .ns-dashboard__sidebar-backdrop.is-visible {
+    background: color-mix(in srgb, var(--ns-gray-12, #111) 42%, transparent);
+    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
+  }
+  .ns-sidenav { box-shadow: var(--ns-shadow-xl); }
+}
+
+
+/* ============================================================================
+ * Pass V5 — TRIGGERS (S9). Bespoke to event→action activation rules.
+ * Category tint map: schedule=primary(copper) · webhook=success(teal)
+ *   · event=warning(amber) · manual=muted. Theme-blind color-mix, no raw hex.
+ * ========================================================================== */
+
+/* --- category tint variables (per data-cat) --------------------------------- */
+[data-cat='schedule'] { --tcat: var(--ns-primary); --tcat-subtle: var(--ns-primary-subtle); --tcat-border: var(--ns-primary-border); }
+[data-cat='webhook']  { --tcat: var(--ns-success); --tcat-subtle: var(--ns-success-subtle); --tcat-border: var(--ns-success-border, color-mix(in oklab, var(--ns-success) 40%, var(--ns-border))); }
+[data-cat='event']    { --tcat: var(--ns-warning); --tcat-subtle: var(--ns-warning-subtle); --tcat-border: var(--ns-warning-border); }
+[data-cat='manual']   { --tcat: var(--ns-muted-fg); --tcat-subtle: color-mix(in oklab, var(--ns-muted-fg) 12%, var(--ns-surface)); --tcat-border: var(--ns-border-strong); }
+
+/* --- ns-tcat: tinted category band (triggers-health, NOT number cards) ------ */
+.ns-tcat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ns-space-3);
+  margin-bottom: var(--ns-space-6); }
+.ns-tcat__card { all: unset; cursor: pointer; box-sizing: border-box; display: grid; gap: var(--ns-space-1-5);
+  padding: var(--ns-space-3) var(--ns-space-3-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
+  background: var(--ns-card); position: relative; overflow: hidden; transition: border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease; }
+.ns-tcat__card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tcat); opacity: 0.85; }
+.ns-tcat__card:hover { border-color: var(--tcat-border); transform: translateY(-1px); }
+.ns-tcat__card[data-state='selected'] { border-color: var(--tcat); box-shadow: var(--ns-shadow-press, 3px 3px 0 var(--tcat-subtle));
+  background: color-mix(in oklab, var(--tcat) 5%, var(--ns-card)); }
+.ns-tcat__top { display: flex; align-items: center; gap: var(--ns-space-2); }
+.ns-tcat__glyph { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem;
+  border-radius: var(--ns-radius-md); background: var(--tcat-subtle); color: var(--tcat); font-size: var(--ns-text-sm); flex: none; }
+.ns-tcat__label { font-size: var(--ns-text-sm); font-weight: 600; color: var(--ns-fg); }
+.ns-tcat__count { margin-left: auto; font-family: var(--ns-font-mono); font-size: var(--ns-text-lg); font-weight: 700; color: var(--ns-fg); line-height: 1; }
+.ns-tcat__blurb { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-tcat__spark { position: relative; display: flex; align-items: flex-end; gap: 2px; height: 1.7rem; padding-top: var(--ns-space-1); }
+.ns-tcat__bar { flex: 1; min-height: 2px; border-radius: 1px 1px 0 0; background: var(--tcat); opacity: 0.55; }
+.ns-tcat__card:hover .ns-tcat__bar, .ns-tcat__card[data-state='selected'] .ns-tcat__bar { opacity: 0.9; }
+/* hollow category (0 fires): flatten bars into a dashed baseline + label so the card is legible, not a void */
+.ns-tcat__spark[data-hollow='hollow'] { align-items: center; justify-content: center; }
+.ns-tcat__spark[data-hollow='hollow'] .ns-tcat__bar { min-height: 2px; height: 2px !important; opacity: 0.28;
+  background: repeating-linear-gradient(90deg, var(--ns-border-strong) 0 3px, transparent 3px 6px); border-radius: 0; }
+.ns-tcat__idle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ns-muted-fg); }
+.ns-tcat__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-2);
+  border-top: 1px solid color-mix(in oklab, var(--ns-border) 60%, transparent); padding-top: var(--ns-space-2); }
+.ns-tcat__state { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.04em;
+  padding: 2px var(--ns-space-2); border-radius: var(--ns-radius-full); background: var(--ns-surface); color: var(--ns-muted-fg);
+  border: 1px solid var(--ns-border); }
+.ns-tcat__state[data-tone='warning'] { color: var(--ns-warning); border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); }
+.ns-tcat__state[data-tone='active'] { color: var(--ns-success); border-color: var(--ns-success-border, var(--ns-border-strong)); background: var(--ns-success-subtle); }
+.ns-tcat__fires { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+
+/* --- ns-tcatbadge: inline category badge (table + drawer) ------------------- */
+.ns-tcatbadge { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); padding: 2px var(--ns-space-2);
+  border-radius: var(--ns-radius-full); border: 1px solid var(--tcat-border); background: var(--tcat-subtle);
+  color: var(--tcat); font-size: var(--ns-text-2xs); font-weight: 500; white-space: nowrap; }
+.ns-tcatbadge__glyph { font-size: var(--ns-text-2xs); }
+.ns-tcatbadge[data-cat='manual'] { color: var(--ns-muted-fg); }
+
+/* --- ns-tbuild: RULE BUILDER — when → do flow strip + palette (ref 21) ------ */
+.ns-tbuild__armpill { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs); padding: 3px var(--ns-space-2-5); border-radius: var(--ns-radius-full);
+  border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-muted-fg); }
+.ns-tbuild__armdot { width: 7px; height: 7px; border-radius: var(--ns-radius-full); background: var(--ns-border-strong); }
+.ns-tbuild__armpill[data-on='true'] { color: var(--ns-success); border-color: var(--ns-success-border, var(--ns-border-strong)); background: var(--ns-success-subtle); }
+.ns-tbuild__armpill[data-on='true'] .ns-tbuild__armdot { background: var(--ns-success); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ns-success) 22%, transparent); }
+.ns-tbuild__flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 0; }
+.ns-tbuild__node { display: grid; gap: var(--ns-space-1-5); align-content: start; padding: var(--ns-space-3-5) var(--ns-space-4);
+  border: 1.5px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-surface); position: relative; min-width: 0; }
+.ns-tbuild__node[data-role='when'] { border-color: var(--tcat-border); background: color-mix(in oklab, var(--tcat) 5%, var(--ns-surface)); }
+.ns-tbuild__node[data-role='when']::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 3px 0 0 var(--tcat); pointer-events: none; }
+.ns-tbuild__node[data-role='do'] { --don: var(--ns-primary); }
+.ns-tbuild__node[data-role='do'][data-tone='success'] { --don: var(--ns-success); }
+.ns-tbuild__node[data-role='do'][data-tone='warning'] { --don: var(--ns-warning); }
+.ns-tbuild__node[data-role='do'][data-tone='primary'] { --don: var(--ns-primary); }
+.ns-tbuild__node[data-role='do'] { border-color: color-mix(in oklab, var(--don) 40%, var(--ns-border)); background: color-mix(in oklab, var(--don) 5%, var(--ns-surface)); }
+.ns-tbuild__node[data-role='do']::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 3px 0 0 var(--don); pointer-events: none; }
+.ns-tbuild__node-kicker { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 700; letter-spacing: 0.1em; color: var(--ns-muted-fg); }
+.ns-tbuild__node-head { display: flex; align-items: center; gap: var(--ns-space-2); min-width: 0; }
+.ns-tbuild__node-glyph { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex: none;
+  border-radius: var(--ns-radius-md); background: var(--ns-card); border: 1px solid var(--ns-border); font-size: var(--ns-text-sm); }
+.ns-tbuild__node-title { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 600; color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-tbuild__node-sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-tbuild__node-tag { justify-self: start; margin-top: var(--ns-space-1); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.04em;
+  padding: 1px var(--ns-space-2); border-radius: var(--ns-radius-full); background: var(--tcat-subtle); color: var(--tcat); border: 1px solid var(--tcat-border); }
+.ns-tbuild__node-link { all: unset; cursor: pointer; justify-self: start; margin-top: var(--ns-space-1); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs); color: var(--ns-primary); }
+.ns-tbuild__node-link:hover { text-decoration: underline; }
+.ns-tbuild__wire { display: grid; grid-auto-flow: column; align-items: center; gap: var(--ns-space-1); padding: 0 var(--ns-space-2); }
+.ns-tbuild__wire-line { width: var(--ns-space-3); height: 2px; background: repeating-linear-gradient(90deg, var(--ns-border-strong) 0 4px, transparent 4px 7px); }
+.ns-tbuild__cond { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); white-space: nowrap;
+  padding: 2px var(--ns-space-2); border: 1px dashed var(--ns-border-strong); border-radius: var(--ns-radius-full); background: var(--ns-card); }
+.ns-tbuild__wire-arrow { color: var(--ns-border-strong); font-size: var(--ns-text-2xs); }
+.ns-tbuild__palette { margin-top: var(--ns-space-4); display: grid; gap: var(--ns-space-2); }
+.ns-tbuild__palette-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ns-muted-fg); }
+.ns-tbuild__palette-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); gap: var(--ns-space-2); }
+.ns-tbuild__chip { --pt: var(--ns-primary); display: inline-flex; align-items: center; gap: var(--ns-space-2); padding: var(--ns-space-2) var(--ns-space-2-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); opacity: 0.75; }
+.ns-tbuild__chip[data-tone='success'] { --pt: var(--ns-success); }
+.ns-tbuild__chip[data-tone='warning'] { --pt: var(--ns-warning); }
+.ns-tbuild__chip-glyph { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; flex: none;
+  border-radius: var(--ns-radius-sm); background: color-mix(in oklab, var(--pt) 14%, var(--ns-card)); color: var(--pt); }
+.ns-tbuild__chip[data-state='active'] { opacity: 1; color: var(--ns-fg); border-color: var(--pt); background: color-mix(in oklab, var(--pt) 7%, var(--ns-card)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--pt) 30%, transparent); }
+
+/* --- ns-tdaystrip: schedule day-strip (ref 19) ------------------------------ */
+.ns-tdaystrip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--ns-space-2); }
+.ns-tdaystrip__day { display: grid; gap: var(--ns-space-1-5); justify-items: center; padding: var(--ns-space-2-5) var(--ns-space-1);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); min-width: 0; }
+.ns-tdaystrip__day[data-today='today'] { border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); }
+.ns-tdaystrip__dow { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ns-muted-fg); }
+.ns-tdaystrip__day[data-today='today'] .ns-tdaystrip__dow { color: var(--ns-primary); }
+.ns-tdaystrip__date { font-family: var(--ns-font-mono); font-size: var(--ns-text-base); font-weight: 700; color: var(--ns-fg); line-height: 1; }
+.ns-tdaystrip__fires { display: grid; gap: 3px; width: 100%; }
+.ns-tdaystrip__pip { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-align: center; padding: 1px 2px; border-radius: var(--ns-radius-sm);
+  background: color-mix(in oklab, var(--ns-primary) 12%, var(--ns-card)); color: var(--ns-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-tdaystrip__pip[data-tone='muted'] { background: color-mix(in oklab, var(--ns-muted-fg) 12%, var(--ns-card)); color: var(--ns-muted-fg); }
+.ns-tdaystrip__poll { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 3px; width: 100%;
+  font-family: var(--ns-font-mono); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ns-success); }
+.ns-tdaystrip__poll-track { flex: 1; height: 3px; border-radius: var(--ns-radius-full);
+  background: repeating-linear-gradient(90deg, var(--ns-success) 0 3px, transparent 3px 6px); opacity: 0.7; }
+.ns-tnext { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: var(--ns-space-2-5); }
+.ns-tnext__card { all: unset; cursor: pointer; box-sizing: border-box; display: grid; gap: var(--ns-space-1-5); padding: var(--ns-space-2-5) var(--ns-space-3) var(--ns-space-3) var(--ns-space-3-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); position: relative; overflow: hidden; }
+.ns-tnext__card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ns-border-strong); }
+.ns-tnext__card[data-tone='primary']::before { background: var(--ns-primary); }
+.ns-tnext__card:hover { border-color: var(--ns-border-strong); }
+.ns-tnext__head { display: flex; align-items: center; gap: var(--ns-space-2); }
+.ns-tnext__id { flex: 1; min-width: 0; font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-tnext__kind { flex: none; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.04em;
+  padding: 1px var(--ns-space-1-5); border-radius: var(--ns-radius-full); background: var(--ns-surface-raised, var(--ns-card)); border: 1px solid var(--ns-border); color: var(--ns-muted-fg); }
+.ns-tnext__kind[data-tone='primary'] { color: var(--ns-primary); border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); }
+.ns-tnext__in { font-family: var(--ns-font-mono); font-size: var(--ns-text-lg); font-weight: 700; color: var(--ns-fg); line-height: 1.1; }
+.ns-tnext__card[data-tone='primary'] .ns-tnext__in { color: var(--ns-primary); }
+/* progress-to-next-fire: elapsed vs interval (presentational fraction) */
+.ns-tnext__prog { display: block; height: 0.3rem; border-radius: var(--ns-radius-full); background: var(--ns-surface-raised, color-mix(in oklab, var(--ns-border) 60%, transparent)); border: 1px solid var(--ns-border); overflow: hidden; }
+.ns-tnext__prog-fill { display: block; height: 100%; background: var(--ns-border-strong); border-radius: var(--ns-radius-full); transition: width 200ms ease; }
+.ns-tnext__prog-fill[data-tone='primary'] { background: var(--ns-primary); }
+.ns-tnext__meta { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); font-family: var(--ns-font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-tnext__at { color: var(--ns-fg); }
+
+/* --- ns-thist: firing-history table specifics ------------------------------- */
+.ns-thist__th { cursor: pointer; }
+.ns-thist__th[data-active='sorted'] { color: var(--ns-primary); }
+.ns-thist__th[data-active='sorted'][data-dir='asc'] .ns-contable__sort::after { content: '↑'; }
+.ns-thist__th[data-active='sorted'][data-dir='desc'] .ns-contable__sort::after { content: '↓'; }
+.ns-thist__th[data-active='sorted'] .ns-contable__sort { font-size: 0; }
+.ns-thist__th[data-active='sorted'] .ns-contable__sort::after { font-size: var(--ns-text-xs); color: var(--ns-primary); }
+.ns-thist__th--spark { width: 4.5rem; }
+.ns-thist__row[data-off='false'] .ns-contable__name { color: var(--ns-muted-fg); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--ns-muted-fg) 50%, transparent); }
+.ns-thist__row[data-off='false'] { opacity: 0.72; }
+.ns-thist__lat { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-muted-fg); }
+.ns-catfilter { all: unset; cursor: pointer; font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  padding: 3px var(--ns-space-2-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full); background: var(--ns-surface); }
+.ns-catfilter:hover { border-color: var(--ns-border-strong); color: var(--ns-fg); }
+.ns-catfilter[data-active='false'] { color: var(--ns-primary); border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); }
+
+/* --- ns-tgrid2: secondary two-up strip -------------------------------------- */
+.ns-tgrid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: var(--ns-space-6); margin-top: var(--ns-space-6); align-items: start; }
+.ns-tingress__route { display: inline-flex; align-items: center; gap: var(--ns-space-2); }
+.ns-tingress__verb { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 700; letter-spacing: 0.05em; color: var(--ns-success);
+  padding: 2px var(--ns-space-2); border-radius: var(--ns-radius-sm); background: var(--ns-success-subtle); border: 1px solid var(--ns-success-border, var(--ns-border-strong)); }
+.ns-tingress__path { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-fg); }
+.ns-tdlq { display: grid; gap: var(--ns-space-2); }
+.ns-tdlq__row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; align-items: center; gap: var(--ns-space-2-5); }
+.ns-tdlq__q { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-tdlq__meter { height: 0.55rem; border-radius: var(--ns-radius-full); background: var(--ns-surface); border: 1px solid var(--ns-border); overflow: hidden; }
+.ns-tdlq__fill { display: block; height: 100%; background: var(--ns-border-strong); }
+.ns-tdlq__row[data-tone='warning'] .ns-tdlq__fill { background: var(--ns-warning); }
+.ns-tdlq__n { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 700; color: var(--ns-fg); }
+.ns-tdlq__row[data-tone='warning'] .ns-tdlq__n { color: var(--ns-warning); }
+.ns-tdlq__note { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+
+/* --- ns-tdrawer: per-trigger detail drawer extras --------------------------- */
+.ns-tdrawer__rule { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; padding: var(--ns-space-2-5) var(--ns-space-3);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); }
+.ns-tdrawer__rule-when, .ns-tdrawer__rule-do { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+.ns-tdrawer__rule-arrow { color: var(--ns-primary); font-size: var(--ns-text-2xs); }
+.ns-tdrawer__payload { margin: 0; padding: var(--ns-space-3); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md);
+  background: var(--ns-surface); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); overflow-x: auto; white-space: pre; }
+
+/* --- responsive: category band + builder + day-strip ------------------------ */
+@media (max-width: 900px) {
+  .ns-tcat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 720px) {
+  .ns-tbuild__flow { grid-template-columns: 1fr; gap: var(--ns-space-3); }
+  .ns-tbuild__wire { grid-auto-flow: row; justify-items: center; padding: var(--ns-space-1) 0; }
+  .ns-tbuild__wire-line { width: 2px; height: var(--ns-space-3); background: repeating-linear-gradient(180deg, var(--ns-border-strong) 0 4px, transparent 4px 7px); }
+  .ns-tbuild__wire-arrow { transform: rotate(90deg); }
+}
+@media (max-width: 560px) {
+  .ns-tcat { grid-template-columns: 1fr 1fr; gap: var(--ns-space-2); }
+  .ns-tcat__card { padding: var(--ns-space-2-5); }
+  .ns-tcat__spark { height: 1.3rem; }
+  .ns-tdaystrip { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
+  .ns-tdaystrip__day { padding: var(--ns-space-2) 2px; }
+  .ns-tdaystrip__date { font-size: var(--ns-text-sm); }
+  .ns-tdaystrip__pip { font-size: 0.5rem; }
+}
+
+/* --- ns-tmetric: iconified metric strip (glyph + value + trend/spark; ref 19) */
+.ns-tmetric { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-2); }
+@media (min-width: 560px) { .ns-tmetric { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (min-width: 940px) { .ns-tmetric { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
+.ns-tmetric__tile { --mt: var(--ns-border-strong); display: flex; align-items: flex-start; gap: var(--ns-space-2-5);
+  padding: var(--ns-space-2-5) var(--ns-space-3); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
+  background: var(--ns-card); position: relative; overflow: hidden; min-width: 0; }
+.ns-tmetric__tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--mt); opacity: 0.7; }
+.ns-tmetric__tile[data-tone='primary'] { --mt: var(--ns-primary); }
+.ns-tmetric__tile[data-tone='warning'] { --mt: var(--ns-warning); }
+.ns-tmetric__tile[data-tone='destructive'] { --mt: var(--ns-destructive); }
+.ns-tmetric__glyph { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex: none;
+  border-radius: var(--ns-radius-md); background: color-mix(in oklab, var(--mt) 12%, var(--ns-surface)); color: var(--mt); font-size: var(--ns-text-sm); }
+.ns-tmetric__tile[data-tone='primary'] .ns-tmetric__glyph,
+.ns-tmetric__tile[data-tone='warning'] .ns-tmetric__glyph,
+.ns-tmetric__tile[data-tone='destructive'] .ns-tmetric__glyph { color: var(--mt); }
+.ns-tmetric__body { display: grid; gap: 1px; min-width: 0; flex: 1; }
+.ns-tmetric__top { display: flex; align-items: baseline; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-tmetric__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-xl); font-weight: 700; color: var(--ns-fg); line-height: 1.05; }
+.ns-tmetric__tile[data-tone='primary'] .ns-tmetric__value { color: var(--ns-primary); }
+.ns-tmetric__tile[data-tone='warning'] .ns-tmetric__value { color: var(--ns-warning); }
+.ns-tmetric__trend { display: inline-flex; align-items: center; gap: 2px; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 600;
+  color: var(--ns-muted-fg); }
+.ns-tmetric__trend[data-dir='up'] { color: var(--ns-warning); }
+.ns-tmetric__trend[data-dir='down'] { color: var(--ns-success); }
+.ns-tmetric__trend-glyph { font-size: 0; }
+.ns-tmetric__trend[data-dir='up'] .ns-tmetric__trend-glyph::after { content: '↑'; font-size: var(--ns-text-3xs); }
+.ns-tmetric__trend[data-dir='down'] .ns-tmetric__trend-glyph::after { content: '↓'; font-size: var(--ns-text-3xs); }
+.ns-tmetric__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-tmetric__spark { display: flex; align-items: flex-end; gap: 1.5px; height: 0.85rem; margin-top: 3px; }
+.ns-tmetric__bar { flex: 1; min-height: 1px; border-radius: 1px 1px 0 0; background: var(--mt); opacity: 0.6; }
+.ns-tmetric__tile[data-tone='primary'] .ns-tmetric__bar { background: var(--ns-primary); }
+/* neutral-value tiles can still carry an accent glyph + spark (e.g. fires/flame) */
+.ns-tmetric__tile[data-spark-tone='primary'] { --mt: var(--ns-primary); }
+.ns-tmetric__tile[data-spark-tone='primary'] .ns-tmetric__value { color: var(--ns-fg); }
+.ns-tmetric__tile[data-spark-tone='primary'] .ns-tmetric__bar { opacity: 0.85; }
+.ns-tmetric__meter { display: block; height: 0.3rem; margin-top: 4px; border-radius: var(--ns-radius-full); background: var(--ns-surface); border: 1px solid var(--ns-border); overflow: hidden; }
+.ns-tmetric__meter-fill { display: block; height: 100%; background: var(--ns-border-strong); border-radius: var(--ns-radius-full); }
+.ns-tmetric__meter-fill[data-tone='primary'] { background: var(--ns-primary); }
+.ns-tmetric__sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); margin-top: 2px;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-conhead .ns-tmetric { margin-top: var(--ns-space-1); }
+
+/* --- ns-thquery: firing-history inline query toolbar (ref 11) --------------- */
+.ns-thquery { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap;
+  padding: var(--ns-space-2-5) var(--ns-space-5); border-bottom: 1px solid var(--ns-border); background: color-mix(in oklab, var(--ns-surface) 55%, var(--ns-card)); }
+.ns-thquery__search { display: flex; align-items: center; gap: var(--ns-space-1-5); flex: 1 1 14rem; min-width: 11rem;
+  padding: var(--ns-space-1) var(--ns-space-2-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-card); }
+.ns-thquery__search:focus-within { border-color: var(--ns-primary-border); box-shadow: 0 0 0 2px var(--ns-primary-subtle); }
+.ns-thquery__search-glyph { color: var(--ns-muted-fg); font-size: var(--ns-text-sm); flex: none; }
+.ns-thquery__input { all: unset; flex: 1; min-width: 0; font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-fg); }
+.ns-thquery__input::placeholder { color: var(--ns-muted-fg); }
+.ns-thquery__clear { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 1.1rem; height: 1.1rem;
+  border-radius: var(--ns-radius-full); color: var(--ns-muted-fg); font-size: var(--ns-text-sm); flex: none; }
+.ns-thquery__clear:hover { background: var(--ns-surface); color: var(--ns-fg); }
+.ns-thquery__field { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); }
+.ns-thquery__field-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ns-muted-fg); }
+.ns-thquery__select { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg);
+  padding: var(--ns-space-1) var(--ns-space-2); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-card); cursor: pointer; }
+.ns-thquery__select:hover { border-color: var(--ns-border-strong); }
+.ns-thquery__addfilter { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--ns-space-1); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs); color: var(--ns-primary); padding: var(--ns-space-1) var(--ns-space-2-5);
+  border: 1px dashed var(--ns-primary-border); border-radius: var(--ns-radius-md); background: var(--ns-primary-subtle); }
+.ns-thquery__addfilter:hover { background: color-mix(in oklab, var(--ns-primary) 10%, var(--ns-card)); }
+.ns-thquery__count { margin-left: auto; font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); white-space: nowrap; }
+
+/* --- ns-tdlt: dead-letter mini-table (ref 11 record log) -------------------- */
+.ns-tdlqsum { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs);
+  padding: 3px var(--ns-space-2-5); border-radius: var(--ns-radius-full); border: 1px solid var(--ns-warning-border); background: var(--ns-warning-subtle); color: var(--ns-warning); white-space: nowrap; }
+.ns-tdlqsum__glyph { font-size: var(--ns-text-2xs); }
+.ns-tdlt { display: grid; }
+.ns-tdlt__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ns-space-2-5);
+  padding: var(--ns-space-2-5) var(--ns-space-5); border-bottom: 1px solid var(--ns-border); }
+.ns-tdlt__row:last-child { border-bottom: 0; }
+.ns-tdlt__bar { width: 3px; align-self: stretch; border-radius: var(--ns-radius-full); background: var(--ns-border-strong); }
+.ns-tdlt__row[data-tone='destructive'] .ns-tdlt__bar { background: var(--ns-destructive); }
+.ns-tdlt__row[data-tone='warning'] .ns-tdlt__bar { background: var(--ns-warning); }
+.ns-tdlt__main { display: grid; gap: 2px; min-width: 0; }
+.ns-tdlt__top { display: flex; align-items: center; gap: var(--ns-space-2); min-width: 0; }
+.ns-tdlt__id { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); font-weight: 600; color: var(--ns-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-tdlt__q { flex: none; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.03em;
+  padding: 1px var(--ns-space-1-5); border-radius: var(--ns-radius-sm); border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-muted-fg); }
+.ns-tdlt__age { flex: none; margin-left: auto; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-tdlt__err { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-tdlt__row[data-tone='destructive'] .ns-tdlt__err { color: var(--ns-destructive); }
+.ns-tdlt__sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-tdlt__acts { display: inline-flex; gap: var(--ns-space-1); flex: none; }
+.ns-tdlt__act { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem;
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); color: var(--ns-muted-fg); font-size: var(--ns-text-sm); }
+.ns-tdlt__act:hover { border-color: var(--ns-border-strong); color: var(--ns-fg); background: var(--ns-card); }
+.ns-tdlt__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-2); flex-wrap: wrap;
+  padding: var(--ns-space-3) var(--ns-space-5); border-top: 1px solid var(--ns-border); }
+.ns-tdlt__note { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+
+@media (max-width: 560px) {
+  .ns-tmetric__glyph { width: 1.5rem; height: 1.5rem; }
+  .ns-tmetric__value { font-size: var(--ns-text-lg); }
+  .ns-thquery { padding: var(--ns-space-2-5) var(--ns-space-3); }
+  .ns-thquery__count { margin-left: 0; }
+  .ns-tdlt__row, .ns-tdlt__foot { padding-left: var(--ns-space-3); padding-right: var(--ns-space-3); }
+}
+
+/* ============================================================================
+ * S10 · STREAMS — topic console (bespoke, Pass V6)
+ * A durable-stream console: throughput hero (ref 04), partition/offset ledger +
+ * lag heatmap (ref 11/10), consumer-group lag, producer→consumer topology,
+ * live record tail, tabbed detail drawer. NS One identity only.
+ * ========================================================================== */
+
+/* live pulse pill */
+.ns-strlive { display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--ns-teal-5); }
+.ns-strlive__dot { width: 7px; height: 7px; border-radius: var(--ns-radius-full); background: var(--ns-teal-5);
+  box-shadow: 0 0 0 0 color-mix(in oklab, var(--ns-teal-5), transparent 40%); animation: ns-strpulse 2.2s ease-out infinite; }
+@keyframes ns-strpulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ns-teal-5), transparent 40%); }
+  70% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--ns-teal-5), transparent 100%); } 100% { box-shadow: 0 0 0 0 transparent; } }
+@media (prefers-reduced-motion: reduce) { .ns-strlive__dot { animation: none; } }
+
+/* streams-health composite strip (header) — 4 tiles, each with a micro-viz */
+.ns-strhealth { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ns-space-2-5);
+  margin-top: var(--ns-space-4); }
+@media (min-width: 720px) { .ns-strhealth { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
+.ns-strhealth__tile { display: grid; gap: var(--ns-space-2); padding: var(--ns-space-3) var(--ns-space-3-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-card);
+  position: relative; overflow: hidden; min-width: 0; }
+.ns-strhealth__tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ns-border-strong); }
+.ns-strhealth__tile[data-tone='primary']::before { background: var(--ns-primary); }
+.ns-strhealth__tile[data-tone='warning']::before { background: var(--ns-warning); }
+.ns-strhealth__tile[data-tone='success']::before { background: var(--ns-teal-5); }
+.ns-strhealth__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ns-space-2); }
+.ns-strhealth__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--ns-muted-fg); }
+.ns-strhealth__unit { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); opacity: 0.85; }
+.ns-strhealth__val { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xl); font-weight: 700; line-height: 1;
+  color: var(--ns-fg); display: flex; align-items: baseline; gap: var(--ns-space-1-5); }
+.ns-strhealth__tile[data-tone='primary'] .ns-strhealth__val { color: var(--ns-primary); }
+.ns-strhealth__tile[data-tone='warning'] .ns-strhealth__val { color: var(--ns-warning); }
+.ns-strhealth__val-sub { font-size: var(--ns-text-xs); font-weight: 500; color: var(--ns-muted-fg); }
+.ns-strhealth__spark { width: 100%; height: 22px; }
+.ns-strhealth__meta { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-strhealth__bp { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); font-size: var(--ns-text-2xs);
+  color: var(--ns-muted-fg); }
+.ns-strhealth__bp-dot { width: 6px; height: 6px; border-radius: var(--ns-radius-full); background: var(--ns-warning); flex: none; }
+.ns-strhealth__bp[data-tone='destructive'] .ns-strhealth__bp-dot { background: var(--ns-destructive); }
+.ns-strhealth__pips { display: flex; gap: 3px; }
+.ns-strhealth__pip { flex: 1; height: 6px; border-radius: var(--ns-radius-sm); background: var(--ns-teal-5); }
+.ns-strhealth__pip[data-tone='warning'] { background: var(--ns-warning); }
+.ns-strhealth__pip[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-strhealth__pip[data-tone='success'] { background: var(--ns-teal-5); }
+
+/* ---- throughput hero + topology ---- */
+.ns-strhero { display: grid; gap: var(--ns-space-5); margin-bottom: var(--ns-space-5); align-items: stretch; }
+@media (min-width: 1024px) { .ns-strhero { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
+.ns-strhero__main { display: grid; gap: var(--ns-space-3); padding: var(--ns-space-4) var(--ns-space-5) var(--ns-space-3);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-card); min-width: 0; }
+.ns-strhero__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ns-space-3); flex-wrap: wrap; }
+.ns-strhero__title { display: flex; align-items: baseline; gap: var(--ns-space-2); margin-top: var(--ns-space-1); }
+.ns-strhero__now { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xl); font-weight: 700; line-height: 1; color: var(--ns-fg); }
+.ns-strhero__now-unit { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); color: var(--ns-muted-fg); }
+.ns-strhero__bp { display: inline-flex; align-items: center; gap: var(--ns-space-2); padding: var(--ns-space-1-5) var(--ns-space-2-5);
+  border-radius: var(--ns-radius-full); border: 1px solid var(--ns-border);
+  background: color-mix(in oklab, var(--ns-warning-subtle), transparent 0%); }
+.ns-strhero__bp[data-tone='destructive'] { background: var(--ns-destructive-subtle); }
+.ns-strhero__bp-dot { width: 8px; height: 8px; border-radius: var(--ns-radius-full); background: var(--ns-warning); flex: none;
+  animation: ns-strpulse 2.2s ease-out infinite; }
+.ns-strhero__bp[data-tone='destructive'] .ns-strhero__bp-dot { background: var(--ns-destructive); }
+.ns-strhero__bp-body { display: grid; gap: 0; }
+.ns-strhero__bp-label { font-size: var(--ns-text-xs); font-weight: 600; color: var(--ns-fg); }
+.ns-strhero__bp-detail { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-strhero__chart { position: relative; margin-top: 0; }
+.ns-strhero__svg { height: 168px; }
+.ns-strhero__svg path[data-part='line'] { stroke: var(--ns-teal-5); }
+.ns-strhero__svg path[data-part='fill'] { fill: color-mix(in oklab, var(--ns-teal-5), transparent 84%); }
+.ns-strhero__svg line[data-part='hero-cross'] { stroke: color-mix(in oklab, var(--ns-teal-5) 70%, transparent);
+  stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
+.ns-strhero__svg circle[data-part='hero-dot'] { fill: var(--ns-teal-5); stroke: var(--ns-card); stroke-width: 2; }
+.ns-strhero__tip { position: absolute; transform: translate(-50%, calc(-100% - 9px)); background: var(--ns-fg);
+  color: var(--ns-bg); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600;
+  padding: 3px var(--ns-space-2); border-radius: var(--ns-radius-sm); white-space: nowrap; pointer-events: none;
+  display: grid; gap: 0; line-height: 1.35; box-shadow: var(--ns-shadow-sm); z-index: 2; }
+.ns-strhero__tip::after { content: ''; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
+  border: 4px solid transparent; border-top-color: var(--ns-fg); }
+.ns-strhero__tip-x { opacity: 0.7; font-weight: 500; }
+.ns-strhero__ohlc { display: flex; align-items: center; gap: var(--ns-space-3); flex-wrap: wrap;
+  padding-top: var(--ns-space-2-5); border-top: 1px solid var(--ns-border); }
+.ns-strhero__ohlc-item { display: inline-flex; align-items: baseline; gap: var(--ns-space-1-5); }
+.ns-strhero__ohlc-k { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.04em; color: var(--ns-muted-fg); }
+.ns-strhero__ohlc-v { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); font-weight: 600; color: var(--ns-fg); }
+.ns-strhero__ohlc-dot { width: 3px; height: 3px; border-radius: var(--ns-radius-full); background: var(--ns-border-strong); }
+
+/* producer → log → consumer topology (div/CSS, not canvas) */
+.ns-strtopo { display: grid; gap: var(--ns-space-3); align-content: start; padding: var(--ns-space-4);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-card); min-width: 0; }
+.ns-strtopo__flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--ns-space-1-5); }
+.ns-strtopo__col { display: grid; gap: var(--ns-space-2); min-width: 0; }
+.ns-strtopo__col-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.04em; color: var(--ns-muted-fg); }
+.ns-strtopo__node { display: grid; gap: 1px; padding: var(--ns-space-2) var(--ns-space-2-5); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-md); background: var(--ns-surface); min-width: 0; }
+.ns-strtopo__node[data-role='consumer'] { border-left: 3px solid var(--ns-teal-5); }
+.ns-strtopo__node[data-role='consumer'][data-tone='warning'] { border-left-color: var(--ns-warning); }
+.ns-strtopo__node[data-role='consumer'][data-tone='destructive'] { border-left-color: var(--ns-destructive); }
+.ns-strtopo__node[data-role='producer'] { border-left: 3px solid var(--ns-copper-6); }
+.ns-strtopo__node-name { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600; color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-strtopo__node-rate, .ns-strtopo__node-lag { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-strtopo__node-lag[data-tone='warning'] { color: var(--ns-warning); }
+.ns-strtopo__node-lag[data-tone='destructive'] { color: var(--ns-destructive); }
+.ns-strtopo__spine { display: flex; align-items: center; justify-content: center; min-width: 18px; align-self: stretch; }
+.ns-strtopo__spine-line { width: 100%; height: 0; border-top: 2px dashed var(--ns-border-strong); position: relative; }
+/* fan spine: a short dashed lead into a vertical bus that each consumer leaf taps */
+.ns-strtopo__spine--fan { position: relative; }
+.ns-strtopo__spine--fan .ns-strtopo__spine-line { width: 60%; margin-right: 0; align-self: center; }
+.ns-strtopo__spine--fan::after { content: ''; position: absolute; right: 0; top: 22%; bottom: 22%;
+  border-left: 2px dashed var(--ns-border-strong); }
+.ns-strtopo__col--fan { gap: var(--ns-space-2); }
+.ns-strtopo__leaf { display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 0; min-width: 0; }
+.ns-strtopo__stub { height: 0; border-top: 2px dashed var(--ns-border-strong); }
+.ns-strtopo__log { display: grid; gap: var(--ns-space-1-5); padding: var(--ns-space-3) var(--ns-space-2-5); text-align: center;
+  border: 1px solid var(--ns-primary); border-radius: var(--ns-radius-md); background: var(--ns-primary-subtle); min-width: 0; }
+.ns-strtopo__log-name { font-size: var(--ns-text-2xs); font-weight: 700; color: var(--ns-fg); overflow: hidden; text-overflow: ellipsis; }
+.ns-strtopo__log-sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-strtopo__log-bars { display: flex; gap: 2px; justify-content: center; }
+.ns-strtopo__log-bar { width: 6px; height: 16px; border-radius: var(--ns-radius-sm); background: var(--ns-teal-5); }
+.ns-strtopo__log-bar[data-tone='warning'] { background: var(--ns-warning); }
+.ns-strtopo__log-bar[data-tone='destructive'] { background: var(--ns-destructive); }
+
+/* ---- body: main tab panel + right rail ---- */
+.ns-strbody { display: grid; gap: var(--ns-space-5); align-items: start; min-width: 0; }
+@media (min-width: 1024px) { .ns-strbody { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
+.ns-strpanel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-3); flex-wrap: wrap;
+  padding: var(--ns-space-3) var(--ns-space-4); border-bottom: 1px solid var(--ns-border); }
+.ns-strpanel__hint { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+
+/* partition & offset ledger */
+.ns-strledger { display: grid; }
+.ns-strledger__head, .ns-strledger__row { display: grid;
+  grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.2fr);
+  align-items: center; gap: var(--ns-space-2); padding: var(--ns-space-2) var(--ns-space-4); }
+.ns-strledger__head { border-bottom: 1px solid var(--ns-border); }
+.ns-strledger__h { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.04em; color: var(--ns-muted-fg); }
+.ns-strledger__h--num, .ns-strledger__num { text-align: right; justify-self: end; }
+.ns-strledger__row { all: unset; cursor: pointer; box-sizing: border-box; border-bottom: 1px solid var(--ns-border);
+  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1.2fr);
+  align-items: center; gap: var(--ns-space-2); padding: var(--ns-space-2-5) var(--ns-space-4); }
+.ns-strledger__row:last-child { border-bottom: 0; }
+.ns-strledger__row:hover { background: var(--ns-surface); }
+.ns-strledger__part { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); }
+.ns-strledger__part-idx { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 700; color: var(--ns-fg);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm); background: var(--ns-surface); }
+.ns-strledger__sync { color: var(--ns-teal-5); font-size: var(--ns-text-3xs); }
+.ns-strledger__leader, .ns-strledger__group { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-strledger__group { color: var(--ns-fg); }
+.ns-strledger__num { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-fg); }
+.ns-strledger__lag { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--ns-space-2); }
+.ns-strledger__lagbar { height: 6px; border-radius: var(--ns-radius-full); background: var(--ns-teal-5); min-width: 2px;
+  background: color-mix(in oklab, var(--ns-teal-5) 55%, transparent); }
+.ns-strledger__lagbar[data-tone='warning'] { background: var(--ns-warning); }
+.ns-strledger__lagbar[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-strledger__lagbar[data-tone='success'] { background: color-mix(in oklab, var(--ns-teal-5) 40%, transparent); }
+.ns-strledger__lagval { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600; color: var(--ns-fg); min-width: 2.2rem; text-align: right; }
+.ns-strledger__row[data-tone='destructive'] .ns-strledger__lagval { color: var(--ns-destructive); }
+
+/* lag heatmap (ref 10) */
+.ns-strheat { display: grid; gap: var(--ns-space-1-5); padding: var(--ns-space-4); }
+.ns-strheat__row { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: var(--ns-space-2); }
+.ns-strheat__plabel { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-strheat__cells { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--ns-space-1-5); }
+.ns-strheat__cell { height: 20px; border-radius: var(--ns-radius-sm); border: 1px solid color-mix(in oklab, var(--ns-border) 60%, transparent);
+  background: var(--ns-surface); }
+.ns-strheat__cell[data-v='0'] { background: var(--ns-surface); }
+.ns-strheat__cell[data-v='1'] { background: color-mix(in oklab, var(--ns-warning) 22%, var(--ns-card)); border-color: transparent; }
+.ns-strheat__cell[data-v='2'] { background: color-mix(in oklab, var(--ns-warning) 45%, var(--ns-card)); border-color: transparent; }
+.ns-strheat__cell[data-v='3'] { background: color-mix(in oklab, var(--ns-destructive) 55%, var(--ns-card)); border-color: transparent; }
+.ns-strheat__cell[data-v='4'] { background: var(--ns-destructive); border-color: transparent; }
+.ns-strheat__legend { display: flex; align-items: center; gap: var(--ns-space-1-5); margin-top: var(--ns-space-1); }
+.ns-strheat__legend .ns-strheat__cell { width: 20px; }
+.ns-strheat__legend-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+
+/* consumer-group lag cards */
+.ns-strgroups { display: grid; gap: var(--ns-space-3); }
+.ns-strgroup { all: unset; cursor: pointer; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr;
+  gap: var(--ns-space-4); align-items: center; padding: var(--ns-space-4); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-lg); background: var(--ns-card); }
+.ns-strgroup:hover { border-color: var(--ns-border-strong); box-shadow: var(--ns-shadow-sm); }
+.ns-strgroup[data-tone='destructive'] { border-left: 3px solid var(--ns-destructive); }
+.ns-strgroup__gauge { position: relative; width: 74px; height: 40px; overflow: hidden; }
+.ns-strgroup__gauge .ns-gauge__ring { width: 74px; height: 74px; }
+.ns-strgroup__gauge-val { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 700; color: var(--ns-fg); }
+.ns-strgroup__body { display: grid; gap: var(--ns-space-2); min-width: 0; }
+.ns-strgroup__top { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-strgroup__name { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 600; color: var(--ns-fg); }
+.ns-strgroup__meta { display: flex; gap: var(--ns-space-4); flex-wrap: wrap; }
+.ns-strgroup__kv { display: grid; gap: 0; }
+.ns-strgroup__k { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--ns-muted-fg); }
+.ns-strgroup__v { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-fg); }
+.ns-strgroup__lagbar { display: block; height: 6px; border-radius: var(--ns-radius-full); background: var(--ns-muted); overflow: hidden; }
+.ns-strgroup__lagbar-fill { display: block; height: 100%; border-radius: var(--ns-radius-full); background: var(--ns-teal-5); }
+.ns-strgroup__lagbar-fill[data-tone='warning'] { background: var(--ns-warning); }
+.ns-strgroup__lagbar-fill[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-strgroup__lagbar-fill[data-tone='success'] { background: var(--ns-teal-5); }
+
+/* config KV */
+.ns-strcfg { display: grid; }
+.ns-strcfg__row { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-3);
+  padding: var(--ns-space-2-5) var(--ns-space-4); border-bottom: 1px solid var(--ns-border); }
+.ns-strcfg__row:last-child { border-bottom: 0; }
+.ns-strcfg__k { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-muted-fg); }
+.ns-strcfg__v { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); font-weight: 600; color: var(--ns-fg); }
+
+/* record schema — line-numbered code view (ref 13) */
+.ns-strschema { display: grid; padding: var(--ns-space-3) 0; background: var(--ns-surface);
+  border-top: 1px solid var(--ns-border); overflow-x: auto; }
+.ns-strschema__line { display: grid; grid-template-columns: 2.4rem 1fr; align-items: baseline; gap: var(--ns-space-3);
+  padding: 1px var(--ns-space-4); min-width: max-content; }
+.ns-strschema__line:hover { background: color-mix(in oklab, var(--ns-primary) 6%, transparent); }
+.ns-strschema__n { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  text-align: right; opacity: 0.6; user-select: none; }
+.ns-strschema__code { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-fg); white-space: pre; }
+
+/* live event tail */
+.ns-strtail__list { display: grid; max-height: 22rem; overflow-y: auto; }
+.ns-strtail__row { display: grid; grid-template-columns: auto 1fr; gap: var(--ns-space-2-5); align-items: start;
+  padding: var(--ns-space-2) var(--ns-space-4); border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 70%, transparent); }
+.ns-strtail__row:last-child { border-bottom: 0; }
+.ns-strtail__marker { width: 6px; height: 6px; margin-top: 5px; border-radius: var(--ns-radius-full); background: var(--ns-border-strong); flex: none; }
+.ns-strtail__row[data-tone='primary'] .ns-strtail__marker { background: var(--ns-primary); }
+.ns-strtail__row[data-tone='warning'] .ns-strtail__marker { background: var(--ns-warning); }
+.ns-strtail__row[data-tone='destructive'] .ns-strtail__marker { background: var(--ns-destructive); }
+.ns-strtail__cols { display: grid; gap: 1px; min-width: 0; }
+.ns-strtail__line1 { display: flex; align-items: baseline; gap: var(--ns-space-2); min-width: 0; }
+.ns-strtail__off { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 700; color: var(--ns-fg); }
+.ns-strtail__part { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-teal-5); }
+.ns-strtail__key { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-strtail__age { margin-left: auto; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); flex: none; }
+.ns-strtail__val { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* stream detail drawer (desktop right rail) */
+.ns-strdrawer { display: grid; gap: var(--ns-space-3); padding: var(--ns-space-4); }
+.ns-strdrawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-strdrawer__title { display: grid; gap: 1px; }
+.ns-strdrawer__eyebrow { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.04em; color: var(--ns-muted-fg); }
+.ns-strdrawer__id { font-size: var(--ns-text-sm); font-weight: 700; color: var(--ns-fg); }
+.ns-strdrawer__corr { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-strdrawer__msgs { display: grid; gap: var(--ns-space-1-5); }
+.ns-strdrawer__msg { all: unset; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; gap: var(--ns-space-2);
+  padding: var(--ns-space-2) var(--ns-space-2-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); }
+.ns-strdrawer__msg[data-state='selected'] { border-color: var(--ns-primary); background: var(--ns-primary-subtle); }
+.ns-strdrawer__msg-id { font-size: var(--ns-text-xs); font-weight: 600; color: var(--ns-fg); }
+.ns-strdrawer__msg-time { margin-left: auto; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-strdrawer__fan { display: grid; gap: var(--ns-space-2); }
+.ns-strdrawer__actions { display: flex; gap: var(--ns-space-2); }
+.ns-strdrawer__actions .ns-btn { flex: 1; justify-content: center; }
+
+/* on narrow screens the ledger keeps all columns but scrolls horizontally inside
+   its own panel (the page body never scrolls sideways) */
+.ns-strledger { overflow-x: auto; }
+.ns-strledger__head, .ns-strledger__row { min-width: 32rem; }
+
+@media (max-width: 1023px) {
+  .ns-strhealth__val { font-size: var(--ns-text-xl); }
+  .ns-strhero__svg { height: 148px; }
+}
+@media (max-width: 720px) {
+  .ns-strhero__now { font-size: var(--ns-text-2xl); }
+  .ns-strtopo__flow { grid-template-columns: 1fr; gap: var(--ns-space-2); }
+  .ns-strtopo__spine { transform: rotate(90deg); min-height: 14px; }
+  .ns-strheat__cell { height: 16px; }
+  .ns-strgroup { grid-template-columns: auto 1fr; gap: var(--ns-space-3); }
+  .ns-strgroup__meta { gap: var(--ns-space-3); }
+}
+
+/* ==================================================================== *
+ * Pass V7 — Config Resolution (S2). Layered-precedence resolution:
+ * a value cascades down framework → package → profile → override; the
+ * highest-precedence layer WINS, lower contributions are SHADOWED.
+ * Signature = the precedence WATERFALL (no console table / canvas / flow
+ * clones from Workers/Sagas/Triggers/Streams). Tokens only; hard press
+ * shadow on the winning layer for NS One identity. Ref 13 (red/green
+ * diff), ref 11 (KV table + drawer), ref 19 (inline stat bar), ref 21
+ * (layered stack + edge labels).
+ * ==================================================================== */
+
+/* per-layer tone plumbing — one custom prop set the whole screen reads */
+.ns-config { --cfg: var(--ns-border-strong); --cfg-fg: var(--ns-fg); --cfg-subtle: var(--ns-surface); --cfg-border: var(--ns-border); }
+[data-tone='muted']   { --cfg: var(--ns-border-strong); --cfg-fg: var(--ns-muted-fg); --cfg-subtle: var(--ns-surface); --cfg-border: var(--ns-border); }
+[data-tone='primary'] { --cfg: var(--ns-primary); --cfg-fg: var(--ns-primary); --cfg-subtle: var(--ns-primary-subtle); --cfg-border: var(--ns-primary-border); }
+[data-tone='success'] { --cfg: var(--ns-success); --cfg-fg: var(--ns-success); --cfg-subtle: var(--ns-success-subtle); --cfg-border: var(--ns-success-border); }
+[data-tone='warning'] { --cfg: var(--ns-warning); --cfg-fg: var(--ns-warning); --cfg-subtle: var(--ns-warning-subtle); --cfg-border: var(--ns-warning-border); }
+
+/* ---- header composite: title block + inline stat bar + precedence legend (ref 19) ---- */
+.ns-cfghero { display: grid; gap: var(--ns-space-4); margin-bottom: var(--ns-space-5); }
+.ns-cfghero__lead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ns-space-4); flex-wrap: wrap; }
+.ns-cfghero__titles { display: grid; gap: var(--ns-space-2); max-width: 52ch; }
+.ns-cfghero__meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ns-space-2); }
+.ns-cfghero__resolved { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); text-align: right; }
+.ns-cfghero__resolved code { color: var(--ns-fg); }
+/* the stat bar is ONE rounded pressed slab split into cells (ref 19 pill-bar), not separate number cards */
+.ns-cfghero__strip { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-xl); background: var(--ns-card); box-shadow: var(--ns-shadow-sm); overflow: hidden; }
+.ns-cfghero__cell { display: grid; gap: 2px; padding: var(--ns-space-3) var(--ns-space-4);
+  border-bottom: 1px solid var(--ns-border); }
+.ns-cfghero__cell-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.09em; color: var(--ns-muted-fg); }
+.ns-cfghero__cell-value { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xl); font-weight: 700; line-height: 1;
+  color: var(--ns-fg); font-variant-numeric: tabular-nums; }
+.ns-cfghero__cell-value[data-tone='warning'] { color: var(--ns-warning); }
+.ns-cfghero__cell-value[data-tone='primary'] { color: var(--ns-primary); }
+.ns-cfghero__cell-value[data-tone='success'] { color: var(--ns-success); }
+.ns-cfghero__cell-sub { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-cfghero__legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ns-space-2);
+  padding: var(--ns-space-3) var(--ns-space-4); background: var(--ns-surface); }
+.ns-cfghero__legend-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.09em; color: var(--ns-muted-fg); }
+@media (min-width: 720px) {
+  .ns-cfghero__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+  .ns-cfghero__cell { border-bottom: 0; border-right: 1px solid var(--ns-border); }
+  .ns-cfghero__legend { grid-column: 1 / -1; border-top: 1px solid var(--ns-border); }
+}
+
+/* ---- layer chip: the atomic "which layer" token, reused across table/waterfall/diff/trail ---- */
+.ns-cfglayerchip { display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--ns-space-2);
+  border-radius: var(--ns-radius-full); border: 1px solid var(--cfg-border); background: var(--cfg-subtle); color: var(--cfg-fg);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 600; white-space: nowrap; }
+.ns-cfglayerchip--sm { padding: 1px var(--ns-space-1-5); font-size: 0.62rem; }
+.ns-cfglayerchip__ord { display: inline-grid; place-items: center; width: 0.95rem; height: 0.95rem; border-radius: var(--ns-radius-full);
+  background: var(--cfg); color: var(--ns-card); font-size: 0.58rem; font-weight: 700; }
+.ns-cfglayerchip__glyph { color: var(--cfg); }
+
+/* ---- body split: ledger table (left) + resolution panel (right) ---- */
+.ns-config__body { display: grid; grid-template-columns: 1fr; gap: var(--ns-space-4); align-items: start; }
+@media (min-width: 1080px) { .ns-config__body { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); } }
+@media (min-width: 1440px) { .ns-config__body { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: var(--ns-space-5); } }
+
+/* ---- effective-config ledger (ref 11 KV table, but a resolution ledger not a console clone) ---- */
+.ns-cfgtable { display: grid; gap: 0; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl);
+  background: var(--ns-card); overflow: hidden; box-shadow: var(--ns-shadow-xs); }
+.ns-cfgtable__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ns-space-2);
+  padding: var(--ns-space-3) var(--ns-space-3-5); border-bottom: 1px solid var(--ns-border); }
+.ns-cfgtable__title { font-size: var(--ns-text-sm); font-weight: 700; color: var(--ns-fg); }
+.ns-cfgtable__count { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-cfgtable__filters { display: flex; flex-wrap: wrap; gap: var(--ns-space-1-5); padding: var(--ns-space-2-5) var(--ns-space-3);
+  border-bottom: 1px solid var(--ns-border); background: var(--ns-surface); }
+.ns-cfgnschip { display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--ns-space-2); border-radius: var(--ns-radius-full);
+  border: 1px solid var(--ns-border); background: var(--ns-card); color: var(--ns-muted-fg); cursor: pointer;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font: inherit; font-size: var(--ns-text-3xs); transition: border-color 120ms ease, color 120ms ease; }
+.ns-cfgnschip:hover { border-color: var(--ns-border-strong); color: var(--ns-fg); }
+.ns-cfgnschip[data-state='active'] { border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); color: var(--ns-primary); font-weight: 600; }
+.ns-cfgnschip__count { display: inline-grid; place-items: center; min-width: 1rem; height: 1rem; padding: 0 3px; border-radius: var(--ns-radius-full);
+  background: var(--ns-surface); color: var(--ns-muted-fg); font-size: 0.58rem; }
+.ns-cfgnschip[data-state='active'] .ns-cfgnschip__count { background: var(--ns-card); color: var(--ns-primary); }
+.ns-cfgtable__cols { display: none; grid-template-columns: minmax(0, 1fr) auto minmax(8.5rem, auto); gap: var(--ns-space-3);
+  padding: var(--ns-space-1-5) var(--ns-space-3-5); border-bottom: 1px solid var(--ns-border); background: var(--ns-surface); }
+@media (min-width: 480px) { .ns-cfgtable__cols { display: grid; } }
+.ns-cfgtable__col { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-cfgtable__col--val { text-align: right; }
+.ns-cfgtable__col--win { text-align: right; }
+.ns-cfgtable__rows { display: grid; gap: 0; }
+
+/* row reads left→right matching the header: KEY | EFFECTIVE | WINNING LAYER */
+.ns-cfgrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'key val' 'win win';
+  gap: var(--ns-space-1) var(--ns-space-3); align-items: center; padding: var(--ns-space-2-5) var(--ns-space-3-5);
+  border: 0; border-bottom: 1px solid var(--ns-border); background: transparent; text-align: left; cursor: pointer; font: inherit; width: 100%;
+  border-left: 2px solid transparent; transition: background 120ms ease, border-color 120ms ease; }
+.ns-cfgrow:last-child { border-bottom: 0; }
+.ns-cfgrow:hover { background: var(--ns-surface); }
+.ns-cfgrow[data-state='selected'] { background: var(--ns-primary-subtle); border-left-color: var(--ns-primary); }
+.ns-cfgrow__key { grid-area: key; display: grid; gap: 1px; min-width: 0; }
+.ns-cfgrow__ns { font-family: var(--ns-font-mono); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ns-muted-fg); }
+.ns-cfgrow__name { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-cfgrow__val { grid-area: val; justify-self: end; font-family: var(--ns-font-mono); font-size: var(--ns-text-sm);
+  font-weight: 700; color: var(--ns-fg); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
+.ns-cfgrow__unit { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); margin-left: 1px; font-weight: 400; }
+.ns-cfgrow__win { grid-area: win; display: flex; align-items: center; gap: var(--ns-space-1-5); flex-wrap: wrap; }
+.ns-cfgrow__ovr { color: var(--ns-warning); font-size: var(--ns-text-2xs); }
+.ns-cfgrow__shadow { font-family: var(--ns-font-mono); font-size: 0.58rem; color: var(--ns-muted-fg); }
+/* wide table: three explicit columns so KEY | EFFECTIVE | WINNING LAYER line up under the header */
+@media (min-width: 480px) {
+  .ns-cfgrow { grid-template-columns: minmax(0, 1fr) auto minmax(8.5rem, auto); grid-template-areas: 'key val win';
+    gap: var(--ns-space-3); }
+  .ns-cfgrow__win { justify-content: flex-end; }
+  .ns-cfgrow__win { grid-column: auto; justify-content: flex-end; }
+}
+
+/* ---- resolution panel ---- */
+.ns-cfgres { display: grid; gap: var(--ns-space-4); min-width: 0; }
+.ns-cfgres__keyhead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ns-space-4); flex-wrap: wrap;
+  padding: var(--ns-space-4); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-card); box-shadow: var(--ns-shadow-xs); }
+.ns-cfgres__keyhead-main { display: grid; gap: var(--ns-space-2); min-width: 0; max-width: 46ch; }
+.ns-cfgres__eyebrow { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ns-muted-fg); }
+.ns-cfgres__key { font-family: var(--ns-font-mono); font-size: var(--ns-text-lg); font-weight: 700; color: var(--ns-fg); word-break: break-word; }
+.ns-cfgres__note { font-size: var(--ns-text-xs); color: var(--ns-muted-fg); line-height: 1.5; }
+.ns-cfgres__keyhead-eff { display: grid; gap: var(--ns-space-2); justify-items: end; text-align: right; }
+.ns-cfgres__eff-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.09em; color: var(--ns-muted-fg); }
+.ns-cfgres__eff-value { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xl); font-weight: 700; line-height: 1; color: var(--ns-fg); font-variant-numeric: tabular-nums; }
+.ns-cfgres__eff-unit { font-size: var(--ns-text-base); color: var(--ns-muted-fg); font-weight: 500; margin-left: 2px; }
+
+/* ---- HERO: precedence waterfall — the value cascading down through layers ---- */
+.ns-cfgwater { position: relative; display: grid; gap: var(--ns-space-3-5); padding: var(--ns-space-4) var(--ns-space-4) var(--ns-space-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-surface); }
+/* the vertical spine the cascade descends along */
+.ns-cfgwater__spine { position: absolute; left: calc(var(--ns-space-4) + 0.72rem); top: var(--ns-space-5); bottom: var(--ns-space-5);
+  width: 2px; background: repeating-linear-gradient(var(--ns-border-strong) 0 5px, transparent 5px 10px); }
+.ns-cfgwater__layer { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: var(--ns-space-3); align-items: stretch; }
+.ns-cfgwater__rail { position: relative; display: grid; justify-items: center; gap: 3px; z-index: 1; }
+.ns-cfgwater__ord { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: var(--ns-radius-full);
+  background: var(--ns-card); border: 1px solid var(--cfg-border); color: var(--cfg-fg); font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 700; }
+.ns-cfgwater__dot { flex: 1; width: 2px; background: var(--cfg); border-radius: 1px; min-height: 8px; }
+.ns-cfgwater__card { display: grid; gap: var(--ns-space-2); padding: var(--ns-space-3) var(--ns-space-3-5); border-radius: var(--ns-radius-lg);
+  border: 1px solid var(--ns-border); background: var(--ns-card); }
+.ns-cfgwater__card-head { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-cfgwater__glyph { color: var(--cfg-fg); font-size: var(--ns-text-sm); }
+.ns-cfgwater__layer-name { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600; color: var(--ns-fg); text-transform: uppercase; letter-spacing: 0.04em; }
+.ns-cfgwater__flex { flex: 1; }
+.ns-cfgwater__val { font-family: var(--ns-font-mono); font-size: var(--ns-text-base); font-weight: 700; color: var(--ns-fg); font-variant-numeric: tabular-nums; }
+.ns-cfgwater__val--shadowed { color: var(--ns-muted-fg); text-decoration: line-through; text-decoration-color: var(--ns-destructive); text-decoration-thickness: 1.5px; font-weight: 500; }
+/* .ns-cfgwater__silent retired in Pass V7-fix — silent layers now render as .ns-cfgwater__pip (collapsed) */
+.ns-cfgwater__winpill { padding: 1px var(--ns-space-1-5); border-radius: var(--ns-radius-full); background: var(--ns-warning); color: var(--ns-card);
+  font-family: var(--ns-font-mono); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
+.ns-cfgwater__shadowpill { padding: 1px var(--ns-space-1-5); border-radius: var(--ns-radius-full); border: 1px solid var(--ns-destructive-border);
+  background: var(--ns-destructive-subtle); color: var(--ns-destructive); font-family: var(--ns-font-mono); font-size: 0.56rem; font-weight: 600; }
+.ns-cfgwater__prov { display: flex; align-items: center; gap: var(--ns-space-1-5); font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-cfgwater__prov-label { text-transform: uppercase; letter-spacing: 0.08em; }
+.ns-cfgwater__prov code { color: var(--cfg-fg); }
+/* the connector label floating between two layers (ref 21 branch labels) */
+.ns-cfgwater__edge { position: absolute; left: 1.6rem; bottom: calc(-1 * var(--ns-space-3-5) + 1px); transform: translateY(50%);
+  padding: 0 var(--ns-space-1-5); border-radius: var(--ns-radius-sm); background: var(--ns-surface); border: 1px solid var(--ns-border);
+  font-family: var(--ns-font-mono); font-size: 0.56rem; color: var(--ns-muted-fg); z-index: 2; white-space: nowrap; }
+/* WINNER: elevated card + hard NS press shadow keyed to warning (override tone) */
+.ns-cfgwater__layer[data-state='wins'] .ns-cfgwater__card { border-color: var(--cfg-border); background: var(--cfg-subtle);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--cfg) 55%, var(--ns-gray-12)); transform: translateX(-1px); }
+.ns-cfgwater__layer[data-state='wins'] .ns-cfgwater__ord { background: var(--cfg); color: var(--ns-card); border-color: var(--cfg); }
+.ns-cfgwater__layer[data-state='wins'] .ns-cfgwater__val { color: var(--cfg-fg); }
+/* SHADOWED: dim the whole card so the eye skips it */
+.ns-cfgwater__layer[data-state='shadowed'] .ns-cfgwater__card { opacity: 0.72; border-style: dashed; }
+.ns-cfgwater__layer[data-state='silent'] .ns-cfgwater__card { opacity: 0.5; background: var(--ns-surface); border-style: dashed; }
+
+/* ---- override diff (ref 13): base value shadowed vs runtime override, line-numbered red/green ---- */
+.ns-cfgdiff { border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-card); overflow: hidden; box-shadow: var(--ns-shadow-xs); }
+.ns-cfgdiff__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-2); padding: var(--ns-space-2-5) var(--ns-space-3-5); border-bottom: 1px solid var(--ns-border); }
+.ns-cfgdiff__title { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ns-fg); }
+.ns-cfgdiff__vers { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); }
+.ns-cfgdiff__arrow { color: var(--ns-muted-fg); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); }
+.ns-cfgdiff__panes { display: grid; grid-template-columns: 1fr; }
+@media (min-width: 620px) { .ns-cfgdiff__panes { grid-template-columns: 1fr 1fr; } }
+.ns-cfgdiff__pane { display: grid; gap: 0; padding: var(--ns-space-2) 0 var(--ns-space-2-5); border-bottom: 1px solid var(--ns-border); }
+@media (min-width: 620px) { .ns-cfgdiff__pane:first-child { border-bottom: 0; border-right: 1px solid var(--ns-border); } }
+.ns-cfgdiff__pane-src { padding: 0 var(--ns-space-3-5) var(--ns-space-2); font-family: var(--ns-font-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-cfgdiff__line { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; padding: 2px var(--ns-space-3-5); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); }
+.ns-cfgdiff__n { color: var(--ns-muted-fg); font-size: var(--ns-text-3xs); text-align: right; padding-right: var(--ns-space-2); user-select: none; }
+.ns-cfgdiff__code { color: var(--ns-fg); white-space: pre-wrap; word-break: break-word; }
+.ns-cfgdiff__line[data-op='del'] { background: var(--ns-destructive-subtle); }
+.ns-cfgdiff__line[data-op='del'] .ns-cfgdiff__code { color: var(--ns-destructive); }
+.ns-cfgdiff__line[data-op='del'] .ns-cfgdiff__code::before { content: '− '; color: var(--ns-destructive); }
+.ns-cfgdiff__line[data-op='add'] { background: var(--ns-success-subtle); }
+.ns-cfgdiff__line[data-op='add'] .ns-cfgdiff__code { color: var(--ns-success); }
+.ns-cfgdiff__line[data-op='add'] .ns-cfgdiff__code::before { content: '+ '; color: var(--ns-success); }
+.ns-cfgdiff__line[data-op='ctx'] .ns-cfgdiff__code::before { content: '  '; }
+
+/* ---- resolution trail / provenance strip ---- */
+.ns-cfgtrail { display: grid; gap: 0; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-card); overflow: hidden; box-shadow: var(--ns-shadow-xs); }
+.ns-cfgtrail__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ns-space-2); padding: var(--ns-space-2-5) var(--ns-space-3-5); border-bottom: 1px solid var(--ns-border); }
+.ns-cfgtrail__title { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ns-fg); }
+.ns-cfgtrail__sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-cfgtrail__row { display: grid; grid-template-columns: 1.2rem minmax(6rem, auto) auto minmax(0, 1fr) auto; gap: var(--ns-space-2); align-items: center;
+  padding: var(--ns-space-2) var(--ns-space-3-5); border-bottom: 1px solid var(--ns-border); }
+.ns-cfgtrail__row:last-child { border-bottom: 0; }
+.ns-cfgtrail__row[data-state='wins'] { background: var(--cfg-subtle); }
+.ns-cfgtrail__glyph { color: var(--cfg-fg); font-size: var(--ns-text-2xs); }
+.ns-cfgtrail__layer { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-fg); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; }
+.ns-cfgtrail__val { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 700; color: var(--ns-fg); }
+.ns-cfgtrail__val--shadowed { color: var(--ns-muted-fg); text-decoration: line-through; text-decoration-color: var(--ns-destructive); font-weight: 500; }
+.ns-cfgtrail__src { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; }
+.ns-cfgtrail__win { padding: 1px var(--ns-space-1-5); border-radius: var(--ns-radius-full); background: var(--cfg); color: var(--ns-card); font-family: var(--ns-font-mono); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
+.ns-cfgtrail__actions { display: flex; flex-wrap: wrap; gap: var(--ns-space-2); padding: var(--ns-space-3) var(--ns-space-3-5); border-top: 1px solid var(--ns-border); background: var(--ns-surface); }
+
+/* ---- mobile sheet header ---- */
+.ns-cfgsheet-hero { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ns-space-2); }
+.ns-cfgsheet-hero__eff { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xl); font-weight: 700; color: var(--ns-fg); }
+.ns-cfgsheet__note { font-size: var(--ns-text-xs); color: var(--ns-muted-fg); line-height: 1.5; }
+.ns-cfgwater--sheet { padding: var(--ns-space-3); gap: var(--ns-space-3); }
+.ns-cfgwater--sheet .ns-cfgwater__spine { left: calc(var(--ns-space-3) + 0.72rem); }
+
+/* ---- responsive: below the two-col break, trail src truncates + waterfall stays tight ---- */
+@media (max-width: 640px) {
+  .ns-cfgres__keyhead { flex-direction: column; }
+  .ns-cfgres__keyhead-eff { justify-items: start; text-align: left; }
+  .ns-cfgres__eff-value { font-size: var(--ns-text-2xl); }
+  .ns-cfgtrail__row { grid-template-columns: 1.2rem 1fr auto; row-gap: 2px; }
+  .ns-cfgtrail__src { grid-column: 1 / -1; }
+  .ns-cfgtrail__win { grid-column: 3; grid-row: 1; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ns-cfgrow, .ns-cfgnschip { transition: none; }
+}
+
+/* =====================================================================================
+ * Pass V7-fix — Config Resolution density remediation (adversarial vision gate 68→).
+ * Four surgical fixes; the precedence-waterfall metaphor is untouched except for #1.
+ *   1  collapse non-contributing (silent) waterfall layers into slim rail pips
+ *   2  KPI header: tighter cells + a supporting micro-viz per metric
+ *   3  override diff: framed side-by-side hunk with +/- gutter + context lines
+ *   4  effective-config table: tighter rows + DM Mono type-coloured values
+ * ===================================================================================== */
+
+/* ---- shared: value-type colouring (numbers amber · strings/enums teal · booleans copper) ---- */
+.ns-cfgval--num { color: var(--ns-amber-6); }
+.ns-cfgval--str { color: var(--ns-teal-6); }
+.ns-cfgval--bool { color: var(--ns-copper-6); }
+.ns-cfgval--none { color: var(--ns-muted-fg); }
+[data-theme='dark'] .ns-cfgval--num { color: var(--ns-amber-4); }
+[data-theme='dark'] .ns-cfgval--str { color: var(--ns-teal-3); }
+[data-theme='dark'] .ns-cfgval--bool { color: var(--ns-copper-3); }
+/* winner card keeps its own elevated fg — don't let the type colour override the win emphasis */
+.ns-cfgwater__layer[data-state='wins'] .ns-cfgwater__val { color: var(--cfg-fg); }
+
+/* ---- #2 KPI header: denser cells + supporting micro-viz so they aren't bare number boxes ---- */
+.ns-cfghero__cell { padding: var(--ns-space-2-5) var(--ns-space-3-5); gap: 3px; align-content: start; }
+.ns-cfghero__cell-figure { display: flex; align-items: baseline; gap: var(--ns-space-2); flex-wrap: wrap; min-height: 1.1rem; }
+.ns-cfghero__cell-value { font-size: var(--ns-text-xl); }
+/* shadowed/total meter (values shadowed) */
+.ns-cfghero__meter { position: relative; align-self: center; flex: 1 1 3.2rem; min-width: 2.6rem; max-width: 5rem; height: 5px;
+  border-radius: var(--ns-radius-full); background: var(--ns-border); overflow: hidden; }
+.ns-cfghero__meter-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--ns-primary); }
+.ns-cfghero__meter[data-tone='warning'] .ns-cfghero__meter-fill { background: var(--ns-warning); }
+.ns-cfghero__meter[data-tone='success'] .ns-cfghero__meter-fill { background: var(--ns-success); }
+/* override-source pips (overrides active) */
+.ns-cfghero__pips { display: inline-flex; align-items: center; gap: 3px; align-self: center; }
+.ns-cfghero__pip { width: 6px; height: 6px; border-radius: var(--ns-radius-full); background: var(--ns-warning);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--ns-warning), transparent 55%); }
+/* namespace-spread ticks (keys resolved) */
+.ns-cfghero__ticks { display: inline-flex; align-items: flex-end; gap: 2px; align-self: center; height: 0.8rem; }
+.ns-cfghero__tick { width: 3px; height: 0.55rem; border-radius: 1px; background: var(--ns-border-strong); }
+.ns-cfghero__tick:nth-child(3n+1) { height: 0.8rem; }
+.ns-cfghero__tick:nth-child(3n+2) { height: 0.45rem; }
+/* precedence-rank marker (profile) — 4 pips, the active layer filled */
+.ns-cfghero__rank { display: inline-flex; align-items: center; gap: 3px; align-self: center; }
+.ns-cfghero__rank-pip { width: 6px; height: 6px; border-radius: 1.5px; background: var(--ns-border-strong); transform: rotate(45deg); }
+.ns-cfghero__rank-pip[data-active='true'] { background: var(--ns-success); box-shadow: 0 0 0 1px color-mix(in oklab, var(--ns-success), transparent 50%); }
+
+/* ---- #4 effective-config table: tighter rows (values already type-coloured via .ns-cfgval--*) ---- */
+.ns-cfgrow { padding: var(--ns-space-2) var(--ns-space-3-5); }
+.ns-cfgrow__val { font-size: var(--ns-text-2xs); font-weight: 700; }
+/* keep the ellipsised key from crowding the type-coloured value */
+.ns-cfgrow__name { font-size: 0.72rem; }
+
+/* ---- #1 collapse silent waterfall layers into slim rail pips (TOP PRIORITY) ---- */
+/* a non-contributing layer is a single thin line on the rail, not a full padded card */
+.ns-cfgwater { gap: var(--ns-space-3); }
+.ns-cfgwater__layer[data-collapsed='true'] { align-items: center; }
+.ns-cfgwater__pip { grid-column: 2; display: inline-flex; align-items: baseline; gap: var(--ns-space-2); min-width: 0;
+  padding: 3px var(--ns-space-2-5); border-radius: var(--ns-radius-md);
+  border: 1px dashed var(--ns-border); background: color-mix(in oklab, var(--ns-surface), transparent 30%); }
+.ns-cfgwater__pip-name { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.04em; color: var(--ns-muted-fg); white-space: nowrap; }
+.ns-cfgwater__pip-note { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); font-style: italic;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* the collapsed layer's rail marker shrinks to a hollow tick so the eye reads "skipped" */
+.ns-cfgwater__layer[data-collapsed='true'] .ns-cfgwater__ord { width: 1.05rem; height: 1.05rem; font-size: 0.5rem;
+  background: var(--ns-surface); color: var(--ns-muted-fg); border: 1px dashed var(--ns-border-strong); }
+.ns-cfgwater__layer[data-collapsed='true'] .ns-cfgwater__dot { min-height: 4px; opacity: 0.5; }
+/* bridge the spine across collapsed gaps: the gap shrinks, so contributing layers snap together */
+
+/* ---- #3 override diff: framed side-by-side hunk, +/- gutter, context lines ---- */
+.ns-cfgdiff__pane-src { display: flex; align-items: center; gap: var(--ns-space-2); padding-bottom: var(--ns-space-1-5); }
+.ns-cfgdiff__pane-src code { font-family: var(--ns-font-mono); font-size: 0.56rem; color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-cfgdiff__pane-tag { flex: none; padding: 1px var(--ns-space-1-5); border-radius: var(--ns-radius-sm);
+  font-family: var(--ns-font-mono); font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
+.ns-cfgdiff__pane-tag[data-side='base'] { background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-cfgdiff__pane-tag[data-side='over'] { background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-cfgdiff__hunk { display: block; padding: 2px var(--ns-space-3-5); font-family: var(--ns-font-mono); font-size: 0.6rem;
+  color: var(--ns-primary); background: var(--ns-primary-subtle); border-block: 1px solid var(--ns-border); }
+/* context lines get a faint zebra so the changed line is the one the eye lands on */
+.ns-cfgdiff__line[data-op='ctx'] { color: var(--ns-muted-fg); }
+.ns-cfgdiff__line[data-op='ctx'] .ns-cfgdiff__code { color: var(--ns-muted-fg); }
+
+@media (prefers-reduced-motion: reduce) {
+  .ns-cfgwater__layer { transition: none; }
+}
+
+/* =====================================================================
+   V8 — MIGRATIONS (S11): version-chain timeline + drift arc gauge + ledger
+   Signature = the migration chain (applied spine → HEAD/drift → pending queue).
+   NS One identity only: --ns-* tokens, hard press shadow, copper/teal/amber.
+   ===================================================================== */
+.ns-migscreen { display: grid; gap: var(--ns-space-6); }
+
+/* ---- version glyph: reused across chain, ledger, header, drawer ---- */
+.ns-migver { display: inline-flex; align-items: center; justify-content: center;
+  min-width: 2.05rem; height: 1.35rem; padding: 0 var(--ns-space-1-5);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 700; letter-spacing: 0.02em;
+  border-radius: var(--ns-radius-sm); border: 1px solid var(--ns-border-strong);
+  background: var(--ns-surface); color: var(--ns-fg); white-space: nowrap; }
+.ns-migver[data-phase='applied'] { background: color-mix(in oklab, var(--ns-teal-3), transparent 55%);
+  border-color: color-mix(in oklab, var(--ns-teal-6), transparent 45%); color: var(--ns-teal-7, var(--ns-fg)); }
+.ns-migver[data-phase='pending'] { background: color-mix(in oklab, var(--ns-copper-3), var(--ns-card) 35%);
+  border-color: var(--ns-copper-6); color: var(--ns-copper-7); border-style: dashed; }
+[data-theme='dark'] .ns-migver[data-phase='pending'] { background: color-mix(in oklab, var(--ns-copper-5), transparent 55%);
+  border-color: var(--ns-copper-5); color: color-mix(in oklab, var(--ns-copper-3), #fff 25%); }
+[data-theme='dark'] .ns-migver[data-phase='applied'] { color: color-mix(in oklab, var(--ns-teal-3), #fff 20%);
+  border-color: var(--ns-teal-6); }
+.ns-migver[data-phase='failed'] { background: var(--ns-destructive-subtle); border-color: var(--ns-destructive-border); color: var(--ns-destructive); }
+.ns-migver--lg { min-width: 2.9rem; height: 1.9rem; font-size: var(--ns-text-base); border-width: 2px; box-shadow: var(--ns-shadow-press); }
+.ns-migver--sm { min-width: 1.9rem; height: 1.15rem; font-size: var(--ns-text-3xs); }
+
+/* ---- header composite (ref-13 stat strip, tailored) ---- */
+.ns-mighead { display: grid; grid-template-columns: minmax(10.5rem, 14rem) 1fr; gap: var(--ns-space-4);
+  align-items: center; padding: var(--ns-space-3) var(--ns-space-4);
+  background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl);
+  box-shadow: var(--ns-shadow-press); position: relative; overflow: hidden; }
+.ns-mighead::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
+  background: var(--ns-success); }
+.ns-mighead[data-tone='warning']::before { background: var(--ns-warning); }
+.ns-mighead__lead { display: grid; gap: var(--ns-space-1-5); padding-left: var(--ns-space-2); }
+.ns-mighead__eyebrow { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ns-muted-fg); }
+.ns-mighead__verline { display: inline-flex; align-items: center; gap: var(--ns-space-2); }
+.ns-mighead__arrow { color: var(--ns-muted-fg); font-size: var(--ns-text-lg); }
+.ns-mighead__behind { display: inline-flex; align-items: center; width: fit-content;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
+  padding: 2px var(--ns-space-2); border-radius: var(--ns-radius-full);
+  background: var(--ns-success-subtle); color: var(--ns-success); border: 1px solid var(--ns-success-border); }
+.ns-mighead__behind[data-tone='warning'] { background: var(--ns-warning-subtle); color: var(--ns-warning); border-color: var(--ns-warning-border); }
+.ns-mighead__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); overflow: hidden; background: var(--ns-surface); }
+.ns-migstat { display: grid; gap: 3px; align-content: start; padding: var(--ns-space-2) var(--ns-space-2-5) var(--ns-space-2-5); border-left: 1px solid var(--ns-border); min-width: 0; }
+.ns-migstat:first-child { border-left: 0; }
+.ns-migstat__k { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.07em; color: var(--ns-muted-fg); }
+.ns-migstat__top { display: flex; align-items: baseline; gap: var(--ns-space-1-5); min-width: 0; }
+.ns-migstat__v { font-family: var(--ns-font-mono); font-size: var(--ns-text-xl); font-weight: 700; line-height: 1; color: var(--ns-fg); }
+.ns-migstat__v--sm { font-size: var(--ns-text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-migstat__of { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); white-space: nowrap; }
+.ns-migstat__sub { display: flex; align-items: baseline; gap: var(--ns-space-1-5); min-width: 0; }
+.ns-migstat__rel { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 700; color: var(--ns-fg); white-space: nowrap; }
+.ns-migstat__at { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-migstat[data-tone='warning'] .ns-migstat__v { color: var(--ns-warning); }
+/* micro-viz: applied ratio bar */
+.ns-migstat__bar { display: block; height: 4px; width: 100%; border-radius: var(--ns-radius-full);
+  background: color-mix(in oklab, var(--ns-fg), transparent 88%); overflow: hidden; margin-top: 1px; }
+.ns-migstat__bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--ns-teal-6); }
+/* micro-viz: n-of-N pips (drift = sync/drift, pending = queued) */
+.ns-migstat__pips { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; margin-top: 2px; }
+.ns-migpip { width: 6px; height: 6px; border-radius: 1.5px; background: var(--ns-teal-6); flex: none; }
+.ns-migpip[data-state='drift'] { background: var(--ns-warning); }
+.ns-migpip[data-state='sync'] { background: color-mix(in oklab, var(--ns-teal-6), transparent 15%); }
+.ns-migstat__pips--copper .ns-migpip, .ns-migpip[data-state='pending'] { background: var(--ns-copper-6); }
+
+/* ---- two-column body ---- */
+.ns-miggrid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
+  gap: var(--ns-space-6); align-items: start; }
+.ns-migmain { display: grid; gap: var(--ns-space-5); min-width: 0; }
+.ns-migaside { display: grid; gap: var(--ns-space-5); min-width: 0; align-content: start; }
+
+/* ---- panels ---- */
+.ns-migscreen .ns-panel { border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); box-shadow: var(--ns-shadow-press); }
+
+/* ---- version chain (SIGNATURE) ---- */
+.ns-migchain__head { display: flex; align-items: center; gap: var(--ns-space-3); flex-wrap: wrap;
+  padding: var(--ns-space-3-5) var(--ns-space-4); border-bottom: 1px solid var(--ns-border); }
+.ns-migchain__legend { margin-left: auto; display: inline-flex; gap: var(--ns-space-3); }
+.ns-migchain__leg { display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-migchain__leg-dot { width: 8px; height: 8px; border-radius: var(--ns-radius-full); }
+.ns-migchain__leg-dot[data-phase='applied'] { background: var(--ns-teal-6); }
+.ns-migchain__leg-dot[data-phase='pending'] { background: var(--ns-copper-6); box-shadow: 0 0 0 2px color-mix(in oklab, var(--ns-copper-4), transparent 55%); }
+.ns-migchain__body { padding: var(--ns-space-4) var(--ns-space-4) var(--ns-space-5); }
+.ns-migchain__spine { display: grid; gap: 0; }
+
+/* migration node = timed-event card (ref-19) hung on a rail */
+.ns-mignode { all: unset; box-sizing: border-box; cursor: pointer; display: grid;
+  grid-template-columns: 1.6rem 1fr; gap: var(--ns-space-3); position: relative; padding-bottom: var(--ns-space-2); }
+.ns-mignode__rail { position: relative; display: flex; justify-content: center; }
+/* the connecting line runs through the rail column */
+.ns-mignode__rail::before { content: ''; position: absolute; top: 0; bottom: calc(-1 * var(--ns-space-2)); left: 50%;
+  width: 2px; transform: translateX(-50%); background: color-mix(in oklab, var(--ns-teal-5), transparent 55%); }
+.ns-mignode:last-child .ns-mignode__rail::before { bottom: auto; height: 0.9rem; }
+.ns-mignode__dot { position: relative; z-index: 1; width: 0.8rem; height: 0.8rem; margin-top: 0.42rem;
+  border-radius: var(--ns-radius-full); background: var(--ns-teal-6); border: 2px solid var(--ns-card); box-shadow: 0 0 0 1.5px var(--ns-teal-6); }
+.ns-mignode__dot[data-phase='pending'] { background: var(--ns-card); box-shadow: 0 0 0 1.5px var(--ns-copper-6); border-color: var(--ns-card); }
+.ns-mignode__dot[data-phase='pending']::after { content: ''; position: absolute; inset: 2px; border-radius: var(--ns-radius-full);
+  background: color-mix(in oklab, var(--ns-copper-5), transparent 40%); }
+/* compacted card: ~35% less internal padding, chips earn the height instead of whitespace */
+.ns-mignode__card { display: grid; gap: 3px; padding: var(--ns-space-2) var(--ns-space-2-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-surface);
+  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; min-width: 0; }
+.ns-mignode:hover .ns-mignode__card { border-color: var(--ns-border-strong); }
+.ns-mignode[data-sel='true'] .ns-mignode__card { border-color: var(--ns-primary-border); box-shadow: var(--ns-shadow-press);
+  background: color-mix(in oklab, var(--ns-primary-subtle), var(--ns-surface) 45%); }
+.ns-mignode[data-phase='pending'] .ns-mignode__card { border-style: dashed; border-color: color-mix(in oklab, var(--ns-copper-6), var(--ns-border) 40%);
+  background: color-mix(in oklab, var(--ns-copper-3), transparent 78%); }
+.ns-mignode__top { display: flex; align-items: center; gap: var(--ns-space-2); min-width: 0; }
+.ns-mignode__title { font-size: var(--ns-text-sm); font-weight: 600; color: var(--ns-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-mignode__name { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ns-font-mono); }
+/* inline metadata chip row — real per-migration data (objs / rows / duration) + applied-at */
+.ns-mignode__meta { display: flex; align-items: center; gap: var(--ns-space-1-5); flex-wrap: wrap;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); margin-top: 1px; }
+.ns-mignode__chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px var(--ns-space-1-5);
+  border-radius: var(--ns-radius-sm); background: color-mix(in oklab, var(--ns-surface), var(--ns-fg) 5%);
+  border: 1px solid var(--ns-border); color: var(--ns-fg); white-space: nowrap; line-height: 1.35; }
+.ns-mignode__chip-i { opacity: 0.55; font-size: 0.9em; }
+.ns-mignode[data-phase='pending'] .ns-mignode__chip { background: color-mix(in oklab, var(--ns-copper-3), transparent 62%);
+  border-color: color-mix(in oklab, var(--ns-copper-6), transparent 55%); color: var(--ns-copper-7); }
+[data-theme='dark'] .ns-mignode[data-phase='pending'] .ns-mignode__chip { color: color-mix(in oklab, var(--ns-copper-3), #fff 20%); }
+.ns-mignode__at { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); white-space: nowrap; }
+
+/* HEAD / drift divider — SLIM one-line marker, not a big dashed ghost box */
+.ns-mighead-marker { display: grid; grid-template-columns: 1.6rem 1fr; gap: var(--ns-space-3); align-items: center;
+  margin: 1px 0 var(--ns-space-2); }
+.ns-mighead-marker__rail { display: flex; justify-content: center; align-items: center; position: relative; align-self: stretch; }
+/* continuous spine stub through the HEAD marker */
+.ns-mighead-marker__rail::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
+  transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--ns-border-strong) 0 3px, transparent 3px 6px); }
+.ns-mighead-marker__glyph { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
+  width: 1.05rem; height: 1.05rem; border-radius: var(--ns-radius-full); background: var(--ns-card);
+  color: var(--ns-warning); font-size: var(--ns-text-3xs); line-height: 1; border: 2px solid var(--ns-warning);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ns-warning), transparent 82%); }
+.ns-mighead-marker[data-tone='success'] .ns-mighead-marker__glyph { color: var(--ns-teal-6); border-color: var(--ns-teal-6);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ns-teal-6), transparent 82%); }
+/* single line: uppercase mono label + inline note, no box */
+.ns-mighead-marker__body { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ns-space-1) var(--ns-space-2);
+  padding: 3px var(--ns-space-2-5); border-radius: var(--ns-radius-sm);
+  border-left: 2px solid color-mix(in oklab, var(--ns-warning), transparent 40%);
+  background: color-mix(in oklab, var(--ns-warning-subtle), transparent 55%); }
+.ns-mighead-marker[data-tone='success'] .ns-mighead-marker__body { border-left-color: color-mix(in oklab, var(--ns-teal-6), transparent 40%);
+  background: color-mix(in oklab, var(--ns-success-subtle), transparent 55%); }
+.ns-mighead-marker__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 700; color: var(--ns-fg); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
+.ns-mighead-marker__note { font-size: var(--ns-text-2xs); color: var(--ns-warning); }
+.ns-mighead-marker__note[data-tone='success'] { color: var(--ns-success); }
+
+.ns-migchain__queue { display: grid; gap: var(--ns-space-2); }
+.ns-migchain__queue-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ns-copper-7); padding-left: var(--ns-space-1); }
+.ns-mignode--queued .ns-mignode__rail::before { background: color-mix(in oklab, var(--ns-copper-5), transparent 55%); border-left: 0;
+  background-image: repeating-linear-gradient(to bottom, color-mix(in oklab, var(--ns-copper-6), transparent 30%) 0 4px, transparent 4px 8px); background: none; }
+.ns-migchain__insync { display: inline-flex; align-items: center; gap: var(--ns-space-2);
+  font-size: var(--ns-text-xs); color: var(--ns-success); padding: var(--ns-space-2) var(--ns-space-1); }
+
+/* ---- ledger (ref-11 dense table) ---- */
+.ns-migledger__head { display: flex; align-items: baseline; gap: var(--ns-space-3); flex-wrap: wrap;
+  padding: var(--ns-space-3-5) var(--ns-space-4); border-bottom: 1px solid var(--ns-border); }
+.ns-migledger__hint { margin-left: auto; font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-migledger__scroller { overflow-x: auto; }
+.ns-migledger__table { width: 100%; border-collapse: collapse; min-width: 34rem; }
+.ns-migledger__th { text-align: left; padding: var(--ns-space-2-5) var(--ns-space-3); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted-fg);
+  border-bottom: 1px solid var(--ns-border); white-space: nowrap; }
+.ns-migledger__th--num { text-align: right; }
+.ns-migledger__th--ver { width: 3.2rem; }
+.ns-migledger__row { cursor: pointer; transition: background 110ms ease; }
+.ns-migledger__row:hover { background: color-mix(in oklab, var(--ns-primary-subtle), transparent 55%); }
+.ns-migledger__row[data-sel='true'] { background: color-mix(in oklab, var(--ns-primary-subtle), transparent 30%); box-shadow: inset 3px 0 0 var(--ns-primary); }
+.ns-migledger__row[data-status='pending'] .ns-migledger__name { color: var(--ns-copper-7); }
+.ns-migledger__td { padding: var(--ns-space-2-5) var(--ns-space-3); border-bottom: 1px solid var(--ns-border); vertical-align: middle; }
+.ns-migledger__td--num { text-align: right; }
+.ns-migledger__name { font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+.ns-migledger__mono { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+
+/* ---- drift panel: arc gauge (ref-04) ---- */
+.ns-migdrift__head { display: flex; align-items: center; gap: var(--ns-space-2); padding: var(--ns-space-3-5) var(--ns-space-4); border-bottom: 1px solid var(--ns-border); }
+.ns-migdrift__gauge { display: flex; justify-content: center; padding: var(--ns-space-5) var(--ns-space-4) var(--ns-space-3); }
+.ns-arcgauge { position: relative; width: 13.5rem; height: 7rem; }
+/* half-ring track via conic gradient clipped to top half */
+.ns-arcgauge__track, .ns-arcgauge__fill { position: absolute; inset: 0; width: 13.5rem; height: 13.5rem;
+  border-radius: var(--ns-radius-full); }
+.ns-arcgauge__track { background: conic-gradient(from -90deg, var(--ns-teal-5) 0deg 180deg, transparent 180deg);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.15rem), #000 calc(100% - 1.1rem));
+  mask: radial-gradient(farthest-side, transparent calc(100% - 1.15rem), #000 calc(100% - 1.1rem)); opacity: 0.9; }
+/* the drifted slice sits at the END of the arc (right side), amber */
+.ns-arcgauge__fill { background: conic-gradient(from -90deg, transparent calc(180deg - var(--ns-arc-deg, 0deg)), var(--ns-warning) calc(180deg - var(--ns-arc-deg, 0deg)) 180deg, transparent 180deg);
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1.15rem), #000 calc(100% - 1.1rem));
+  mask: radial-gradient(farthest-side, transparent calc(100% - 1.15rem), #000 calc(100% - 1.1rem)); }
+.ns-arcgauge[data-tone='success'] .ns-arcgauge__track { background: conic-gradient(from -90deg, var(--ns-teal-6) 0deg 180deg, transparent 180deg); }
+.ns-arcgauge__hub { position: absolute; left: 0; right: 0; bottom: 0.2rem; display: grid; gap: 2px; justify-items: center; text-align: center; }
+.ns-arcgauge__val { font-family: var(--ns-font-mono); font-size: var(--ns-text-xl); font-weight: 700; line-height: 1; color: var(--ns-warning); }
+.ns-arcgauge__val[data-tone='success'] { color: var(--ns-teal-7, var(--ns-success)); }
+.ns-arcgauge__cap { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); max-width: 11rem; }
+
+.ns-migdrift__objs { display: grid; gap: var(--ns-space-1-5); padding: 0 var(--ns-space-4) var(--ns-space-4); }
+.ns-driftrow { display: grid; grid-template-columns: auto 1fr auto; gap: 1px var(--ns-space-2); align-items: center;
+  padding: var(--ns-space-1-5) var(--ns-space-2-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md);
+  background: color-mix(in oklab, var(--ns-warning-subtle), transparent 55%); }
+.ns-driftrow__kind { grid-row: span 2; align-self: center; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.03em; padding: 1px var(--ns-space-1-5); border-radius: var(--ns-radius-sm);
+  background: var(--ns-warning-subtle); color: var(--ns-warning); border: 1px solid var(--ns-warning-border); }
+.ns-driftrow__body { display: grid; gap: 1px; min-width: 0; }
+.ns-driftrow__obj { font-size: var(--ns-text-2xs); font-weight: 600; color: var(--ns-fg); }
+.ns-driftrow__delta { display: inline-flex; align-items: center; gap: var(--ns-space-1); flex-wrap: wrap; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); }
+.ns-driftrow__has { color: var(--ns-destructive); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--ns-destructive), transparent 50%); }
+.ns-driftrow__arrow { color: var(--ns-muted-fg); }
+.ns-driftrow__wants { color: var(--ns-success); }
+.ns-driftrow__note { grid-row: span 2; align-self: center; justify-self: end; font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); font-style: italic; white-space: nowrap; }
+.ns-migdrift__clean { display: flex; align-items: center; gap: var(--ns-space-2); padding: 0 var(--ns-space-4) var(--ns-space-4);
+  font-size: var(--ns-text-xs); color: var(--ns-success); }
+
+/* ---- pending apply card ---- */
+.ns-migapply { display: grid; gap: var(--ns-space-3); padding: var(--ns-space-4); }
+.ns-migapply__head { display: flex; align-items: center; gap: var(--ns-space-3); }
+.ns-migapply__glyph { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem;
+  border-radius: var(--ns-radius-md); background: var(--ns-copper-3); color: var(--ns-copper-7); font-size: var(--ns-text-base);
+  border: 1px solid color-mix(in oklab, var(--ns-copper-6), transparent 40%); }
+.ns-migapply__txt { display: grid; gap: 1px; }
+.ns-migapply__title { font-size: var(--ns-text-sm); font-weight: 700; color: var(--ns-fg); }
+.ns-migapply__sub { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-migapply__preview { display: grid; gap: var(--ns-space-1-5); padding: var(--ns-space-2-5) var(--ns-space-3);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); }
+.ns-migapply__line { display: inline-flex; align-items: center; gap: var(--ns-space-2); font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+.ns-migapply__line code { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+.ns-migapply__op { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; border-radius: var(--ns-radius-sm);
+  font-family: var(--ns-font-mono); font-weight: 700; font-size: var(--ns-text-2xs); }
+.ns-migapply__op[data-op='add'] { background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-migapply__op[data-op='mod'] { background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-migapply__actions { display: flex; gap: var(--ns-space-2); }
+.ns-migapply__cli { display: flex; align-items: center; gap: var(--ns-space-2); padding: var(--ns-space-2) var(--ns-space-3);
+  border-radius: var(--ns-radius-md); background: var(--ns-gray-12, #1a1a1a); }
+.ns-migapply__cli-k { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-teal-5); }
+.ns-migapply__cli code { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: color-mix(in oklab, #fff, transparent 12%); }
+
+/* ---- selected detail rail ---- */
+.ns-migdetail { display: grid; }
+.ns-migdetail__head { display: flex; align-items: center; gap: var(--ns-space-2); padding: var(--ns-space-3-5) var(--ns-space-4); border-bottom: 1px solid var(--ns-border); }
+.ns-migdetail__name { font-size: var(--ns-text-xs); color: var(--ns-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-migdetail__kv { display: grid; gap: 0; padding: var(--ns-space-2) var(--ns-space-4); }
+.ns-migdetail__kvrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ns-space-3); padding: var(--ns-space-1-5) 0; border-bottom: 1px dashed var(--ns-border); }
+.ns-migdetail__kvrow:last-child { border-bottom: 0; }
+.ns-migdetail__k { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ns-muted-fg); }
+.ns-migdetail__v { font-size: var(--ns-text-2xs); color: var(--ns-fg); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-migdetail__summary { margin: 0; padding: 0 var(--ns-space-4) var(--ns-space-3); font-size: var(--ns-text-2xs); line-height: var(--ns-leading-relaxed); color: var(--ns-muted-fg); }
+.ns-migdetail .ns-btn { margin: 0 var(--ns-space-4) var(--ns-space-4); }
+
+/* ---- detail sheet/drawer body ---- */
+.ns-migsheet__hero { display: flex; align-items: center; gap: var(--ns-space-3); }
+.ns-migsheet__hero-txt { display: grid; gap: 1px; min-width: 0; }
+.ns-migsheet__hero-name { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-migsheet__hero-title { font-size: var(--ns-text-base); font-weight: 700; color: var(--ns-fg); }
+/* compact 3-across metadata grid — stays 3 columns on phones so Summary/DDL tabs sit above the fold */
+.ns-migsheet__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ns-space-1-5); }
+.ns-migsheet__stat { display: grid; gap: 1px; align-content: start; padding: var(--ns-space-1-5) var(--ns-space-2); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); min-width: 0; }
+.ns-migsheet__stat-k { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ns-muted-fg); }
+.ns-migsheet__stat-v { font-size: var(--ns-text-2xs); color: var(--ns-fg); overflow: hidden; text-overflow: ellipsis; }
+.ns-migsheet__seg { width: 100%; }
+.ns-migsheet__seg .ns-seg__btn { flex: 1; }
+.ns-migsheet__panel { display: grid; gap: var(--ns-space-3); }
+.ns-migsheet__summary { margin: 0; font-size: var(--ns-text-xs); line-height: var(--ns-leading-relaxed); color: var(--ns-fg); }
+.ns-migsheet__tables { display: grid; gap: var(--ns-space-2); }
+.ns-migsheet__chips { display: flex; flex-wrap: wrap; gap: var(--ns-space-2); }
+.ns-migchip { display: inline-flex; align-items: center; padding: 2px var(--ns-space-2); border-radius: var(--ns-radius-sm);
+  font-size: var(--ns-text-2xs); background: var(--ns-surface); border: 1px solid var(--ns-border); color: var(--ns-fg); }
+
+/* ---- responsive ---- */
+@media (max-width: 960px) {
+  .ns-miggrid { grid-template-columns: 1fr; }
+  .ns-mighead { grid-template-columns: 1fr; gap: var(--ns-space-3); }
+}
+@media (max-width: 560px) {
+  .ns-mighead__strip { grid-template-columns: repeat(2, 1fr); }
+  .ns-migstat:nth-child(3) { border-left: 0; }
+  .ns-migstat:nth-child(odd) { border-left: 0; }
+  .ns-migstat { border-top: 1px solid var(--ns-border); }
+  .ns-migstat:nth-child(1), .ns-migstat:nth-child(2) { border-top: 0; }
+  /* keep the sheet metadata 3-across on phones (Applied / Duration / Rows on one row) */
+  .ns-migsheet__stats { grid-template-columns: repeat(3, 1fr); }
+  .ns-arcgauge { width: 12rem; }
+  .ns-arcgauge__track, .ns-arcgauge__fill { width: 12rem; height: 12rem; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ns-mignode__card { transition: none; }
+}
+
+/* ------------------------------------------------------------------ *
+ * Migrations re-fix — ref 13 schema/version workspace + ref 11 ledger.
+ * The ordered migration sequence is the sole visual signature. Drift,
+ * selection, and actions use canonical record/detail primitives.
+ * ------------------------------------------------------------------ */
+.ns-migscreen .ns-card {
+  border: 0;
+  border-radius: 0;
+  box-shadow: var(--ns-shadow-xs);
+}
+
+.ns-migscreen .ns-lede {
+  max-width: 68ch;
+}
+
+.ns-mig2__label,
+.ns-mig2__caption {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+}
+
+.ns-mig2__label {
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+}
+
+.ns-mig2-summary {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.ns-mig2-summary__cell {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  padding: var(--ns-space-3) var(--ns-space-4);
+  border-left: 1px solid var(--ns-border);
+}
+
+.ns-mig2-summary__cell:first-child {
+  border-left: 0;
+}
+
+.ns-mig2-summary__cell strong {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-xl);
+  line-height: 1.1;
+  color: var(--ns-fg);
+}
+
+.ns-mig2-summary__cell > span:last-child {
+  overflow: hidden;
+  font-size: var(--ns-text-2xs);
+  color: var(--ns-muted-fg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ns-mig2-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 1fr);
+  gap: var(--ns-space-5);
+  align-items: start;
+}
+
+.ns-mig2-main,
+.ns-mig2-aside {
+  display: grid;
+  gap: var(--ns-space-5);
+  min-width: 0;
+}
+
+.ns-mig2-section-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ns-space-3);
+  min-height: var(--ns-space-12);
+  padding: var(--ns-space-3) var(--ns-space-4);
+  border-bottom: 1px solid var(--ns-border);
+}
+
+.ns-mig2-section-head > div {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.ns-mig2-chain__scroll {
+  overflow-x: auto;
+}
+
+.ns-mig2-chain__track {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(6.5rem, 1fr)) minmax(4.75rem, 0.55fr) minmax(7.5rem, 1.05fr);
+}
+
+.ns-mig2-step {
+  all: unset;
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--ns-space-1);
+  min-width: 0;
+  padding: var(--ns-space-3) var(--ns-space-4);
+  cursor: pointer;
+  border-right: 1px solid var(--ns-border);
+  box-shadow: inset 0 2px 0 var(--ns-border-strong);
+  transition: background var(--ns-ease-normal), box-shadow var(--ns-ease-normal);
+}
+
+.ns-mig2-step:hover {
+  background: color-mix(in srgb, var(--ns-fg) 3%, transparent);
+}
+
+.ns-mig2-step:focus-visible {
+  outline: 2px solid var(--ns-ring);
+  outline-offset: -2px;
+}
+
+.ns-mig2-step[data-sel='true'] {
+  background: color-mix(in srgb, var(--ns-primary-subtle) 55%, transparent);
+  box-shadow: inset 0 2px 0 var(--ns-primary), inset 0 -2px 0 var(--ns-primary);
+}
+
+.ns-mig2-step[data-phase='pending'] {
+  background: color-mix(in srgb, var(--ns-primary-subtle) 38%, transparent);
+  box-shadow: inset 0 2px 0 var(--ns-primary);
+}
+
+.ns-mig2-step__version,
+.ns-mig2-version,
+.ns-mig2-kind {
+  width: fit-content;
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ns-mig2-version {
+  text-transform: none;
+}
+
+.ns-mig2-step__version,
+.ns-mig2-version {
+  color: var(--ns-fg);
+}
+
+.ns-mig2-step__title {
+  overflow: hidden;
+  font-size: var(--ns-text-xs);
+  font-weight: 650;
+  color: var(--ns-fg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ns-mig2-step__meta {
+  overflow: hidden;
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ns-mig2-headmark {
+  display: grid;
+  place-content: center;
+  gap: 2px;
+  padding: var(--ns-space-3);
+  border-right: 1px solid var(--ns-border-strong);
+  border-left: 1px solid var(--ns-border-strong);
+  background: var(--ns-surface);
+  text-align: center;
+}
+
+.ns-mig2-headmark span {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  font-weight: 700;
+  color: var(--ns-muted-fg);
+  letter-spacing: 0.08em;
+}
+
+.ns-mig2-headmark strong {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-base);
+  color: var(--ns-fg);
+}
+
+.ns-mig2-ledger,
+.ns-mig2-drift {
+  overflow: hidden;
+}
+
+.ns-mig2-ledger__cols,
+.ns-mig2-ledger__row {
+  display: grid;
+  grid-template-columns: 0.55fr 2fr 1.2fr 0.7fr 0.8fr 0.7fr;
+  gap: var(--ns-space-3);
+  align-items: center;
+}
+
+.ns-mig2-ledger__cols,
+.ns-mig2-drift__cols {
+  padding: var(--ns-space-2) var(--ns-space-4);
+  border-bottom: 1px solid var(--ns-border);
+  background: var(--ns-surface);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  font-weight: 700;
+  color: var(--ns-muted-fg);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ns-mig2-ledger__row {
+  all: unset;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: 0.55fr 2fr 1.2fr 0.7fr 0.8fr 0.7fr;
+  gap: var(--ns-space-3);
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  padding: var(--ns-space-2) var(--ns-space-4);
+  border-bottom: 1px solid var(--ns-border);
+  cursor: pointer;
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+}
+
+.ns-mig2-ledger__row:last-child {
+  border-bottom: 0;
+}
+
+.ns-mig2-ledger__row:hover {
+  background: color-mix(in srgb, var(--ns-fg) 3%, transparent);
+}
+
+.ns-mig2-ledger__row[data-sel='true'] {
+  background: color-mix(in srgb, var(--ns-primary-subtle) 45%, transparent);
+  box-shadow: none;
+}
+
+.ns-mig2-ledger__row[data-status='applied'] .ns-badge {
+  border-color: var(--ns-border);
+  background: var(--ns-muted);
+  color: var(--ns-muted-fg);
+}
+
+.ns-mig2-ledger__row:focus-visible {
+  outline: 2px solid var(--ns-ring);
+  outline-offset: -2px;
+}
+
+.ns-mig2-ledger__name {
+  overflow: hidden;
+  color: var(--ns-fg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ns-mig2-detail__summary {
+  margin: 0;
+  padding: var(--ns-space-3) var(--ns-space-4);
+  border-top: 1px solid var(--ns-border);
+  font-size: var(--ns-text-xs);
+  line-height: var(--ns-leading-relaxed);
+  color: var(--ns-muted-fg);
+}
+
+.ns-mig2-facts {
+  padding: var(--ns-space-2) var(--ns-space-4);
+}
+
+.ns-mig2-facts > div {
+  display: grid;
+  grid-template-columns: minmax(5rem, 0.7fr) minmax(0, 1.3fr);
+  gap: var(--ns-space-3);
+  padding: var(--ns-space-1-5) 0;
+  border-bottom: 1px solid var(--ns-border);
+}
+
+.ns-mig2-facts > div:last-child {
+  border-bottom: 0;
+}
+
+.ns-mig2-facts dt,
+.ns-mig2-facts dd {
+  margin: 0;
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+}
+
+.ns-mig2-facts dt {
+  color: var(--ns-muted-fg);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ns-mig2-facts dd {
+  overflow: hidden;
+  color: var(--ns-fg);
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ns-mig2-notice {
+  display: grid;
+  gap: var(--ns-space-1);
+  margin: 0 var(--ns-space-4) var(--ns-space-3);
+  border-left: 3px solid var(--ns-warning);
+  background: var(--ns-warning-subtle);
+}
+
+.ns-mig2-notice strong {
+  font-size: var(--ns-text-xs);
+  color: var(--ns-fg);
+}
+
+.ns-mig2-notice span,
+.ns-mig2-notice code {
+  font-size: var(--ns-text-2xs);
+}
+
+.ns-mig2-notice span {
+  color: var(--ns-muted-fg);
+}
+
+.ns-mig2-notice code {
+  font-family: var(--ns-font-mono);
+  color: var(--ns-fg);
+}
+
+.ns-mig2-detail__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--ns-space-2);
+  padding: 0 var(--ns-space-4) var(--ns-space-4);
+}
+
+.ns-mig2-drift__cols,
+.ns-mig2-drift__row {
+  display: grid;
+  grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr);
+  gap: var(--ns-space-3);
+}
+
+.ns-mig2-drift__row {
+  align-items: start;
+  padding: var(--ns-space-3) var(--ns-space-4);
+  border-bottom: 1px solid var(--ns-border);
+}
+
+.ns-mig2-drift__row:last-child {
+  border-bottom: 0;
+}
+
+.ns-mig2-drift__row > div {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.ns-mig2-drift__row > div:last-child {
+  grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--ns-space-1);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+}
+
+.ns-mig2-drift__row strong {
+  overflow: hidden;
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-fg);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ns-mig2-kind {
+  color: var(--ns-muted-fg);
+}
+
+.ns-mig2-drift__row small {
+  grid-column: 1 / -1;
+  color: var(--ns-muted-fg);
+}
+
+.ns-mig2-drift__empty {
+  padding: var(--ns-space-4);
+  font-size: var(--ns-text-xs);
+  color: var(--ns-muted-fg);
+}
+
+.ns-mig3-meta {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  overflow-x: auto;
+  border-top: 1px solid var(--ns-border);
+  border-bottom: 1px solid var(--ns-border);
+}
+
+.ns-mig3-meta > span {
+  display: flex;
+  flex: 1 0 auto;
+  align-items: baseline;
+  gap: var(--ns-space-2);
+  min-width: max-content;
+  padding: var(--ns-space-2-5) var(--ns-space-4);
+  border-left: 1px solid var(--ns-border);
+  font-family: var(--ns-font-mono);
+}
+
+.ns-mig3-meta > span:first-child {
+  border-left: 0;
+}
+
+.ns-mig3-meta b {
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+  letter-spacing: 0.06em;
+}
+
+.ns-mig3-meta strong {
+  font-size: var(--ns-text-xs);
+  color: var(--ns-fg);
+}
+
+.ns-mig3-meta small {
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+}
+
+.ns-mig3-count,
+.ns-mig3-status {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  font-weight: 500;
+  color: var(--ns-muted-fg);
+  text-transform: none;
+  letter-spacing: 0;
+  white-space: nowrap;
+}
+
+.ns-mig3-status[data-status='pending'] {
+  color: var(--ns-primary);
+}
+
+.ns-mig3-facts {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  padding: 0 var(--ns-space-4);
+}
+
+.ns-mig3-facts > div {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+  padding: var(--ns-space-2-5) var(--ns-space-3);
+  border-bottom: 0;
+  border-left: 1px solid var(--ns-border);
+}
+
+.ns-mig3-facts > div:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
+
+.ns-mig3-facts dt,
+.ns-mig3-facts dd {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ns-mig3-facts dt {
+  color: var(--ns-muted-fg);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ns-mig3-facts dd {
+  color: var(--ns-fg);
+}
+
+.ns-mig3-diff-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--ns-space-3);
+  padding: var(--ns-space-3) var(--ns-space-4) var(--ns-space-2);
+  border-top: 1px solid var(--ns-border);
+}
+
+.ns-mig3-diff-head > span:last-child {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+}
+
+.ns-mig3-diff {
+  margin: 0 var(--ns-space-4) var(--ns-space-3);
+  border-radius: 0;
+  box-shadow: none;
+}
+
+.ns-mig3-inspector .ns-mig2-notice {
+  margin-top: var(--ns-space-3);
+}
+
+.ns-mig3-pane {
+  border-top: 1px solid var(--ns-border);
+  border-bottom: 1px solid var(--ns-border);
+  background: transparent;
+  box-shadow: none;
+}
+
+.ns-mig3-pane .ns-mig2-ledger__cols,
+.ns-mig3-pane .ns-mig2-drift__cols {
+  background: transparent;
+}
+
+@media (min-width: 1101px) {
+  .ns-mig2-main,
+  .ns-mig2-aside {
+    display: contents;
+  }
+
+  .ns-mig2-ledger {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .ns-mig2-drift {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  .ns-mig3-inspector {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+  }
+}
+
+/* The detail sheet uses the same contiguous-facts and underline-tab grammar. */
+.ns-migsheet__stats {
+  gap: 0;
+  border: 1px solid var(--ns-border);
+  border-radius: 0;
+}
+
+.ns-migsheet__stat {
+  border: 0;
+  border-left: 1px solid var(--ns-border);
+  border-radius: 0;
+  background: var(--ns-card);
+}
+
+.ns-migsheet__stat:first-child {
+  border-left: 0;
+}
+
+.ns-migsheet__seg {
+  gap: var(--ns-space-4);
+  padding: 0;
+  border: 0;
+  border-bottom: 1px solid var(--ns-border);
+  border-radius: 0;
+  background: transparent;
+}
+
+.ns-migsheet__seg .ns-seg__btn {
+  border: 0;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.ns-migsheet__seg .ns-seg__btn[data-state='active'] {
+  border-bottom-color: var(--ns-primary);
+  color: var(--ns-fg);
+}
+
+.ns-migchip {
+  border-radius: var(--ns-radius-sm);
+  background: var(--ns-card);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+@media (max-width: 1100px) {
+  .ns-mig2-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .ns-mig2-aside {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 720px) {
+  .ns-mig2-summary {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ns-mig3-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ns-space-1) var(--ns-space-3);
+    padding: var(--ns-space-2) 0;
+  }
+
+  .ns-mig3-meta > span {
+    flex: 0 1 auto;
+    min-width: max-content;
+    padding: 0;
+    border-left: 0;
+  }
+
+  .ns-mig3-meta > span:last-child {
+    flex: 0 1 auto;
+  }
+
+  .ns-mig2-summary__cell:nth-child(3) {
+    border-left: 0;
+  }
+
+  .ns-mig2-summary__cell:nth-child(n + 3) {
+    border-top: 1px solid var(--ns-border);
+  }
+
+  .ns-mig2-aside {
+    grid-template-columns: 1fr;
+  }
+
+  .ns-mig2-chain__track {
+    min-width: 42rem;
+  }
+
+  .ns-mig2-ledger__cols {
+    display: none;
+  }
+
+  .ns-mig2-ledger__row {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      'version name status'
+      'applied applied applied'
+      'duration rows rows';
+    gap: var(--ns-space-1-5) var(--ns-space-3);
+    padding: var(--ns-space-2) var(--ns-space-3);
+  }
+
+  .ns-mig2-ledger__row > :nth-child(1) { grid-area: version; }
+  .ns-mig2-ledger__row > :nth-child(2) { grid-area: name; }
+  .ns-mig2-ledger__row > :nth-child(3) { grid-area: applied; }
+  .ns-mig2-ledger__row > :nth-child(4) { grid-area: duration; }
+  .ns-mig2-ledger__row > :nth-child(5) { grid-area: rows; }
+  .ns-mig2-ledger__row > :nth-child(6) { grid-area: status; justify-self: end; }
+}
+
+@media (max-width: 440px) {
+  .ns-mig2-summary__cell {
+    padding: var(--ns-space-2-5) var(--ns-space-3);
+  }
+
+  .ns-mig2-summary__cell strong {
+    font-size: var(--ns-text-lg);
+  }
+
+  .ns-mig2-detail__actions {
+    display: grid;
+  }
+
+  .ns-mig2-drift__cols,
+  .ns-mig2-drift__row {
+    grid-template-columns: 1fr;
+  }
+
+  .ns-mig2-drift__cols {
+    display: none;
+  }
+}
+
+/* ==========================================================================
+ * S12 · Dead-Letter Queues — operational triage console (V9)
+ * Signature: cluster failures by error signature, make queue depth/health
+ * legible via fill meters + sparkbars, make a message inspectable + actionable.
+ * Distinct from the Migrations arc-gauge and the Streams throughput console.
+ * Div/CSS geometry only — spark heights are the shared bucketed .ns-spark cols.
+ * ========================================================================== */
+
+.ns-dlq { display: grid; gap: var(--ns-space-5); }
+
+/* generic panel head row + spacer (horizontal; DS .ns-panel__header is vertical) */
+.ns-panel__head { display: flex; align-items: baseline; gap: var(--ns-space-2-5);
+  padding: var(--ns-space-3-5) var(--ns-space-4) var(--ns-space-2-5); flex-wrap: wrap; }
+.ns-panel__flex { flex: 1 1 0; min-width: 0; }
+
+/* --- header: breadcrumb + title + scope segmented ------------------------- */
+.ns-dlqhead { display: grid; gap: var(--ns-space-3); }
+.ns-dlqhead__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ns-space-4); flex-wrap: wrap; }
+.ns-dlqhead__title { display: grid; gap: var(--ns-space-2); min-width: 0; }
+.ns-dlqhead__title h1 { margin: 0; }
+.ns-dlqhead__seg { flex: none; }
+
+/* --- all-clear state ------------------------------------------------------ */
+.ns-dlqclear { display: flex; align-items: center; gap: var(--ns-space-4); padding: var(--ns-space-5) var(--ns-space-6);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-card);
+  box-shadow: var(--ns-shadow-press, 4px 4px 0 var(--ns-success-subtle)); }
+.ns-dlqclear__glyph { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; flex: none;
+  border-radius: var(--ns-radius-full); background: var(--ns-success-subtle); color: var(--ns-success); font-size: var(--ns-text-lg); font-weight: 700; }
+.ns-dlqclear__txt { display: grid; gap: 2px; }
+.ns-dlqclear__title { font-size: var(--ns-text-base); font-weight: 600; }
+.ns-dlqclear__sub { font-size: var(--ns-text-sm); color: var(--ns-muted-fg); }
+
+/* --- triage strip: composite metric tiles (accent bar + micro-viz) -------- */
+.ns-dlqstrip { display: grid; gap: var(--ns-space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
+@media (min-width: 680px) { .ns-dlqstrip { grid-template-columns: 1.5fr repeat(4, 1fr); } }
+.ns-dlqstat { display: grid; gap: var(--ns-space-2); align-content: start; padding: var(--ns-space-3) var(--ns-space-3-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-card);
+  position: relative; overflow: hidden; min-width: 0; text-align: left; }
+.ns-dlqstat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ns-border-strong); }
+.ns-dlqstat[data-lead='true']::before { background: var(--ns-destructive); }
+.ns-dlqstat[data-lead='true'] { box-shadow: var(--ns-shadow-press, 4px 4px 0 var(--ns-destructive-subtle)); }
+.ns-dlqstat--btn { border: 1px solid var(--ns-border); cursor: pointer; font: inherit; color: inherit; transition: background 120ms ease, border-color 120ms ease; }
+.ns-dlqstat--btn:hover { background: var(--ns-surface-raised); border-color: var(--ns-border-strong); }
+.ns-dlqstat--btn:focus-visible { outline: 2px solid var(--ns-ring); outline-offset: 2px; }
+.ns-dlqstat__head { display: flex; align-items: center; gap: var(--ns-space-2); }
+.ns-dlqstat__glyph { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none;
+  border-radius: var(--ns-radius-sm); background: color-mix(in oklab, var(--ns-fg) 6%, transparent); color: var(--ns-muted-fg);
+  font-size: var(--ns-text-xs); }
+.ns-dlqstat__glyph[data-tone='destructive'] { background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-dlqstat__glyph[data-tone='warning'] { background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-dlqstat__glyph[data-tone='success'] { background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-dlqstat__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-dlqstat__val { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xl); font-weight: 700; line-height: 1; color: var(--ns-fg); }
+.ns-dlqstat__sub { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-dlqstat__spark { width: 100%; height: 26px; color: var(--ns-destructive); }
+/* by-queue split micro-bar under total (sums to total parked) */
+.ns-dlqsplit { display: flex; gap: 4px; }
+.ns-dlqsplit__seg { display: flex; align-items: baseline; gap: var(--ns-space-1-5); padding: var(--ns-space-1) var(--ns-space-2) calc(var(--ns-space-1) + 2px);
+  border-radius: var(--ns-radius-sm); min-width: 0; background: color-mix(in oklab, var(--ns-fg) 5%, transparent); position: relative; overflow: hidden; }
+.ns-dlqsplit__seg::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ns-border-strong); }
+.ns-dlqsplit__seg[data-tone='destructive']::before { background: var(--ns-destructive); }
+.ns-dlqsplit__seg[data-tone='warning']::before { background: var(--ns-warning); }
+.ns-dlqsplit__seg[data-tone='muted']::before { background: var(--ns-border-strong); }
+.ns-dlqsplit__n { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 700; line-height: 1; flex: none; }
+.ns-dlqsplit__l { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* retry-exhausted pips */
+.ns-dlqpips { display: flex; gap: 2px; }
+.ns-dlqpip { width: 8px; height: 8px; border-radius: 2px; background: color-mix(in oklab, var(--ns-fg) 12%, transparent); flex: none; }
+.ns-dlqpip[data-on='true'] { background: var(--ns-warning); }
+.ns-dlqpip[data-on='true'][data-exh='true'] { background: var(--ns-destructive); }
+
+/* shared spark zero-bucket muting inside DLQ sparks */
+.ns-dlq .ns-spark__col[data-z='true'] { opacity: 0.28; }
+
+/* --- two-column body ------------------------------------------------------ */
+.ns-dlqgrid { display: grid; gap: var(--ns-space-4); grid-template-columns: 1fr; align-items: start; }
+@media (min-width: 1040px) { .ns-dlqgrid { grid-template-columns: minmax(0, 1.72fr) minmax(17rem, 1fr); } }
+.ns-dlqmain { display: grid; gap: var(--ns-space-4); min-width: 0; }
+.ns-dlqside { display: grid; gap: var(--ns-space-4); min-width: 0; }
+.ns-dlq .ns-panel { background: var(--ns-card); }
+
+/* --- error-signature clusters (the signature) ----------------------------- */
+.ns-dlqclusters__hint, .ns-dlqfleet__hint, .ns-dlqtablewrap__cap { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg); text-transform: uppercase; letter-spacing: 0.05em; }
+.ns-dlqtablewrap__cap { text-transform: none; letter-spacing: 0; }
+.ns-dlqclusterlist { display: grid; gap: var(--ns-space-2); padding: 0 var(--ns-space-3) var(--ns-space-3); }
+.ns-dlqcluster { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
+  background: var(--ns-surface); overflow: hidden; position: relative; }
+.ns-dlqcluster::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ns-border-strong); z-index: 1; }
+.ns-dlqcluster[data-tone='destructive']::before { background: var(--ns-destructive); }
+.ns-dlqcluster[data-tone='warning']::before { background: var(--ns-warning); }
+.ns-dlqcluster[data-sel='active'] { border-color: var(--ns-primary); box-shadow: 0 0 0 1px var(--ns-primary); }
+.ns-dlqcluster__body { flex: 1 1 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1.3fr) auto auto;
+  align-items: center; gap: var(--ns-space-3); padding: var(--ns-space-2-5) var(--ns-space-3) var(--ns-space-2-5) var(--ns-space-4);
+  border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left; min-width: 0; }
+.ns-dlqcluster__body:hover { background: var(--ns-surface-raised); }
+.ns-dlqcluster__glyph { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
+  border-radius: var(--ns-radius-md); font-size: var(--ns-text-base); background: color-mix(in oklab, var(--ns-fg) 6%, transparent); color: var(--ns-muted-fg); }
+.ns-dlqcluster__glyph[data-tone='destructive'] { background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-dlqcluster__glyph[data-tone='warning'] { background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-dlqcluster__id { display: grid; gap: 1px; min-width: 0; }
+.ns-dlqcluster__sig { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 700; letter-spacing: -0.01em; }
+.ns-dlqcluster__msg { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ns-dlqcluster__count { font-family: var(--ns-font-mono); font-size: var(--ns-text-base); font-weight: 700; flex: none; color: var(--ns-fg); }
+.ns-dlqcluster__count[data-tone='destructive'] { color: var(--ns-destructive); }
+.ns-dlqcluster__count[data-tone='warning'] { color: var(--ns-warning); }
+.ns-dlqcluster__srcs { display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
+.ns-dlqsrcchip { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); padding: 1px var(--ns-space-1-5);
+  border-radius: var(--ns-radius-full); background: color-mix(in oklab, var(--ns-fg) 6%, transparent); color: var(--ns-muted-fg);
+  white-space: nowrap; }
+.ns-dlqsrcchip--more { background: transparent; }
+.ns-dlqcluster__spark { width: 54px; height: 22px; flex: none; color: var(--ns-destructive); }
+.ns-dlqcluster[data-tone='warning'] .ns-dlqcluster__spark { color: var(--ns-warning); }
+.ns-dlqcluster__age { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); flex: none; white-space: nowrap; }
+.ns-dlqcluster__actions { display: flex; align-items: center; gap: var(--ns-space-1); padding: 0 var(--ns-space-2);
+  border-left: 1px solid var(--ns-border); flex: none; }
+.ns-dlqcluster__purge:hover { color: var(--ns-destructive); }
+
+/* --- failed-message triage table (dense grid) ----------------------------- */
+.ns-dlqfilterchip { display: inline-flex; align-items: center; gap: var(--ns-space-1); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs); padding: 2px var(--ns-space-2); border-radius: var(--ns-radius-full);
+  background: var(--ns-primary-subtle); color: var(--ns-primary); border: 0; cursor: pointer; }
+.ns-dlqfilterchip__x { opacity: 0.75; }
+.ns-dlqtable { display: grid; gap: 0; }
+.ns-dlqtable__head, .ns-dlqrow { display: grid; grid-template-columns: 1.6rem minmax(4.5rem, 1fr) minmax(6rem, 1.3fr) 4.6rem 4.4rem 3rem 4.4rem;
+  align-items: center; gap: var(--ns-space-2); padding: var(--ns-space-2) var(--ns-space-4); min-width: 0; }
+.ns-dlqtable__head { border-top: 1px solid var(--ns-border); border-bottom: 1px solid var(--ns-border); }
+.ns-dlqtable__hcell { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-dlqrow { border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent); position: relative; }
+.ns-dlqrow:last-child { border-bottom: 0; }
+.ns-dlqrow[data-sel='true'] { background: var(--ns-primary-subtle); }
+.ns-dlqrow[data-exhausted='true']::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ns-destructive); }
+.ns-dlqrow__cell { min-width: 0; }
+.ns-dlqrow__id { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); font-weight: 600; color: var(--ns-primary);
+  border: 0; background: transparent; cursor: pointer; text-align: left; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-dlqrow__id:hover { text-decoration: underline; }
+.ns-dlqrow__src { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-xs); color: var(--ns-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-dlqrow__kind { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; flex: none;
+  border-radius: var(--ns-radius-sm); background: color-mix(in oklab, var(--ns-fg) 7%, transparent); color: var(--ns-muted-fg); font-size: var(--ns-text-3xs); }
+.ns-dlqsig { display: inline-flex; align-items: center; font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600;
+  padding: 1px var(--ns-space-1-5); border-radius: var(--ns-radius-sm); background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-dlqsig[data-tone='destructive'] { background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-dlqsig--lg { font-size: var(--ns-text-sm); padding: 2px var(--ns-space-2); border-radius: var(--ns-radius-md); }
+.ns-dlqrow__retry { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); }
+.ns-dlqrow__retrylabel { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-dlqrow__age { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-dlqrow__inspect { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); border: 0; background: transparent;
+  cursor: pointer; text-align: right; padding: 0; white-space: nowrap; transition: color 120ms ease; justify-self: end; }
+.ns-dlqrow__inspect:hover { color: var(--ns-primary); }
+.ns-dlqrow--empty { grid-template-columns: 1fr auto; padding: var(--ns-space-4); color: var(--ns-muted-fg); font-size: var(--ns-text-sm); }
+
+/* --- bulk-action bar ------------------------------------------------------ */
+.ns-dlqbulk { display: flex; align-items: center; gap: var(--ns-space-2-5); padding: var(--ns-space-2-5) var(--ns-space-4);
+  border-top: 1px solid var(--ns-border); background: var(--ns-surface); flex-wrap: wrap; }
+.ns-dlqbulk__count { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-muted-fg); }
+.ns-dlqbulk__count[data-has='true'] { color: var(--ns-fg); font-weight: 600; }
+.ns-dlqbulk__cli { font-size: var(--ns-text-3xs); }
+@media (max-width: 560px) { .ns-dlqbulk__cli { display: none; } }
+.ns-dlqcheck { width: 15px; height: 15px; accent-color: var(--ns-primary); cursor: pointer; }
+
+/* --- queue-health fleet (depth vs capacity fill meter + trend sparkbar) ---- */
+.ns-dlqfleetlist { display: grid; gap: var(--ns-space-2); padding: 0 var(--ns-space-3) var(--ns-space-3); }
+.ns-dlqqueue { display: grid; gap: var(--ns-space-2); padding: var(--ns-space-2-5) var(--ns-space-3);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-surface);
+  cursor: pointer; font: inherit; color: inherit; text-align: left; transition: background 120ms ease, border-color 120ms ease; min-width: 0; }
+.ns-dlqqueue:hover { background: var(--ns-surface-raised); border-color: var(--ns-border-strong); }
+.ns-dlqqueue[data-sel='active'] { border-color: var(--ns-primary); box-shadow: 0 0 0 1px var(--ns-primary); }
+.ns-dlqqueue[data-empty='true'] { opacity: 0.72; }
+.ns-dlqqueue__top { display: flex; align-items: center; gap: var(--ns-space-2); min-width: 0; }
+.ns-dlqqueue__dot { width: 8px; height: 8px; border-radius: var(--ns-radius-full); background: var(--ns-border-strong); flex: none; }
+.ns-dlqqueue__dot[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-dlqqueue__dot[data-tone='warning'] { background: var(--ns-warning); }
+.ns-dlqqueue__dot[data-tone='primary'] { background: var(--ns-primary); }
+.ns-dlqqueue__dot[data-tone='success'] { background: var(--ns-success); }
+.ns-dlqqueue__name { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-dlqqueue__sev { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.05em;
+  padding: 1px var(--ns-space-1-5); border-radius: var(--ns-radius-full); background: color-mix(in oklab, var(--ns-fg) 6%, transparent); color: var(--ns-muted-fg); flex: none; }
+.ns-dlqqueue__sev[data-tone='destructive'] { background: var(--ns-destructive-subtle); color: var(--ns-destructive); }
+.ns-dlqqueue__sev[data-tone='warning'] { background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-dlqqueue__sev[data-tone='success'] { background: var(--ns-success-subtle); color: var(--ns-success); }
+.ns-dlqqueue__depth { font-family: var(--ns-font-mono); font-size: var(--ns-text-xl); font-weight: 700; line-height: 1; flex: none; }
+.ns-dlqmeter { height: 8px; border-radius: var(--ns-radius-full); background: color-mix(in oklab, var(--ns-fg) 8%, transparent); overflow: hidden; }
+.ns-dlqmeter__fill { display: block; height: 100%; border-radius: var(--ns-radius-full); background: var(--ns-primary); min-width: 2px; transition: width 200ms ease; }
+.ns-dlqmeter__fill[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-dlqmeter__fill[data-tone='warning'] { background: var(--ns-warning); }
+.ns-dlqmeter__fill[data-tone='success'] { background: var(--ns-success); }
+.ns-dlqqueue__foot { display: flex; align-items: center; gap: var(--ns-space-2); }
+.ns-dlqqueue__cap { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); white-space: nowrap; }
+.ns-dlqqueue__spark { flex: 1 1 auto; height: 18px; color: var(--ns-warning); }
+.ns-dlqqueue[data-tone='destructive'] .ns-dlqqueue__spark { color: var(--ns-destructive); }
+.ns-dlqqueue[data-tone='success'] .ns-dlqqueue__spark, .ns-dlqqueue[data-empty='true'] .ns-dlqqueue__spark { color: var(--ns-border-strong); }
+.ns-dlqqueue__oldest { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); white-space: nowrap; flex: none; }
+
+/* --- 'how triage works' aside -------------------------------------------- */
+.ns-dlqhow { padding: var(--ns-space-3-5) var(--ns-space-4) var(--ns-space-4); }
+.ns-dlqhow__title { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-dlqhow__steps { margin: var(--ns-space-2-5) 0 0; padding-left: var(--ns-space-4); display: grid; gap: var(--ns-space-2); }
+.ns-dlqhow__steps li { font-size: var(--ns-text-xs); color: var(--ns-muted-fg); line-height: 1.5; }
+.ns-dlqhow__steps b { color: var(--ns-fg); }
+
+/* --- message inspector (drawer / mobile sheet) --------------------------- */
+.ns-dlqinsp__hero { display: flex; align-items: center; gap: var(--ns-space-2-5); flex-wrap: wrap; }
+.ns-dlqinsp__reason { font-size: var(--ns-text-sm); font-weight: 500; }
+.ns-dlqinsp__payload { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); line-height: 1.55; margin: 0;
+  padding: var(--ns-space-3); border-radius: var(--ns-radius-md); background: var(--ns-surface); border: 1px solid var(--ns-border);
+  color: var(--ns-fg); overflow-x: auto; white-space: pre; }
+
+/* --- responsive: stack table columns / cluster rows on phones ------------- */
+@media (max-width: 860px) {
+  .ns-dlqcluster { flex-direction: column; }
+  .ns-dlqcluster::before { width: 100%; height: 3px; bottom: auto; }
+  .ns-dlqcluster__body { grid-template-columns: auto minmax(0, 1fr) auto; grid-auto-rows: auto;
+    padding: var(--ns-space-3) var(--ns-space-3) var(--ns-space-2-5) var(--ns-space-4); row-gap: var(--ns-space-2); }
+  .ns-dlqcluster__srcs, .ns-dlqcluster__spark, .ns-dlqcluster__age { grid-column: 1 / -1; }
+  .ns-dlqcluster__spark { width: 100%; }
+  .ns-dlqcluster__actions { border-left: 0; border-top: 1px solid var(--ns-border); padding: var(--ns-space-2) var(--ns-space-3); justify-content: flex-end; }
+}
+@media (max-width: 720px) {
+  .ns-dlqtable__head { display: none; }
+  .ns-dlqrow { grid-template-columns: 1.6rem 1fr auto; grid-auto-rows: auto; row-gap: var(--ns-space-1-5);
+    padding: var(--ns-space-3) var(--ns-space-4); align-items: center; }
+  .ns-dlqrow__id { grid-column: 2 / 3; }
+  .ns-dlqrow__inspect { grid-column: 3 / 4; grid-row: 1; }
+  .ns-dlqrow__src { grid-column: 2 / 4; }
+  .ns-dlqrow__cell:nth-child(4), .ns-dlqrow__retry, .ns-dlqrow__age { grid-column: 2 / 4; display: inline-flex; align-items: center; gap: var(--ns-space-2); }
+}
+
+/* ============================================================================
+ * V10 — Catalog: contract registry explorer
+ * A browse→drill registry. NS One identity only: --ns-* tokens, ns-* classes,
+ * warm-cream + dark, hard press shadow, copper/teal/amber, DM Sans/Mono.
+ * Geometry via width-bucket classes (--w0..--w20) — NO SVG {{ }} holes.
+ * Kind tones: sagas=copper, workers=teal, triggers=amber, streams=primary.
+ * ========================================================================== */
+
+.ns-catalog { display: grid; gap: var(--ns-space-5); }
+
+/* breadcrumb (ref 13: Schema Registry > name) */
+.ns-catcrumb { display: inline-flex; align-items: center; gap: var(--ns-space-1-5);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-catcrumb__root { text-transform: uppercase; letter-spacing: 0.06em; }
+.ns-catcrumb__sep { opacity: 0.6; }
+.ns-catcrumb__leaf { color: var(--ns-fg); font-weight: 600; }
+
+/* kind-tone helper vars, resolved per data-kind */
+[data-kind='sagas'] { --catk: var(--ns-copper-6); --catk-sub: var(--ns-copper-2); }
+[data-kind='workers'] { --catk: var(--ns-teal-5); --catk-sub: var(--ns-teal-2); }
+[data-kind='triggers'] { --catk: var(--ns-amber-5); --catk-sub: var(--ns-amber-4); }
+[data-kind='streams'] { --catk: var(--ns-primary); --catk-sub: var(--ns-primary-subtle); }
+[data-kind='gated'] { --catk: var(--ns-muted-fg); --catk-sub: var(--ns-surface); }
+/* method tones */
+[data-method='get'] { --catm: var(--ns-muted-fg); }
+[data-method='post'] { --catm: var(--ns-primary); }
+[data-method='patch'] { --catm: var(--ns-amber-6); }
+[data-method='delete'] { --catm: var(--ns-destructive); }
+/* transport keys */
+[data-key='rest'] { --catt: var(--ns-teal-5); }
+[data-key='rpc'] { --catt: var(--ns-copper-6); }
+[data-key='sdk'] { --catt: var(--ns-amber-5); }
+
+/* ---- header composite (micro-viz, not number cards) ---------------------- */
+.ns-cathead { display: grid; grid-template-columns: 1.15fr 1.3fr 1fr 1.1fr; gap: var(--ns-space-3);
+  background: var(--ns-card); border: 1px solid color-mix(in oklab, var(--ns-border-strong) 45%, var(--ns-border));
+  border-radius: 12px; box-shadow: var(--ns-shadow-sm); padding: var(--ns-space-4) var(--ns-space-5); }
+[data-theme='dark'] .ns-cathead { box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(235, 228, 210, 0.04); }
+.ns-cathead__cell { display: grid; gap: var(--ns-space-2); align-content: start; min-width: 0;
+  padding-left: var(--ns-space-4); border-left: 1px solid var(--ns-border); }
+.ns-cathead__cell:first-child { padding-left: 0; border-left: none; }
+.ns-cathead__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.07em; color: var(--ns-muted-fg); }
+.ns-cathead__cell--total { grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: center; gap: var(--ns-space-1) var(--ns-space-3); }
+.ns-cathead__glyph { grid-row: 1 / 3; width: 40px; height: 40px; display: grid; place-items: center;
+  border: 1px solid var(--ns-primary-border); border-radius: 10px; background: var(--ns-primary-subtle);
+  color: var(--ns-primary); font-size: var(--ns-text-lg); }
+.ns-cathead__main { display: grid; }
+.ns-cathead__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xl); line-height: 1; font-weight: 700; color: var(--ns-fg); }
+.ns-cathead__main .ns-cathead__label { margin-top: 2px; }
+.ns-cathead__sub { grid-column: 1 / 3; font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+
+/* kind-distribution channel bar */
+.ns-catchan { display: flex; gap: 3px; height: 30px; }
+.ns-catchan__seg { position: relative; min-width: 8px; border: none; padding: 0; cursor: pointer;
+  border-radius: var(--ns-radius-sm); background: color-mix(in oklab, var(--catk), transparent 25%);
+  display: grid; place-items: center; transition: transform 0.12s ease, box-shadow 0.12s ease; }
+.ns-catchan__seg:hover { transform: translateY(-1px); box-shadow: 2px 2px 0 var(--catk-sub); }
+.ns-catchan__seg[data-active='true'] { box-shadow: 0 0 0 2px var(--ns-card), 0 0 0 4px var(--catk); }
+.ns-catchan__seg-n { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 700;
+  color: color-mix(in oklab, #fff 94%, var(--catk)); text-shadow: 0 1px 1px color-mix(in oklab, var(--ns-fg), transparent 60%); }
+.ns-catchan__seg--w0 { flex: 0 0 8px; } .ns-catchan__seg--w1 { flex: 1; } .ns-catchan__seg--w2 { flex: 2; }
+.ns-catchan__seg--w3 { flex: 3; } .ns-catchan__seg--w4 { flex: 4; } .ns-catchan__seg--w5 { flex: 5; }
+.ns-catchan__seg--w6 { flex: 6; } .ns-catchan__seg--w7 { flex: 7; } .ns-catchan__seg--w8 { flex: 8; }
+.ns-catchan__legend { display: flex; flex-wrap: wrap; gap: var(--ns-space-1) var(--ns-space-3); }
+.ns-catchan__key { display: inline-flex; align-items: center; gap: 4px; font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-catchan__key-dot { color: var(--catk); font-size: var(--ns-text-2xs); }
+
+/* coverage ratio meter */
+.ns-catratio { position: relative; height: 32px; border-radius: var(--ns-radius-md);
+  background: repeating-linear-gradient(135deg, var(--ns-warning-subtle), var(--ns-warning-subtle) 6px, color-mix(in oklab, var(--ns-warning-subtle), var(--ns-card) 40%) 6px, color-mix(in oklab, var(--ns-warning-subtle), var(--ns-card) 40%) 12px);
+  border: 1px solid var(--ns-border); overflow: hidden; }
+.ns-catratio__fill { position: absolute; inset: 0 auto 0 0; background: var(--ns-success-subtle);
+  border-right: 2px solid var(--ns-success); }
+.ns-catratio__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 700; color: var(--ns-fg);
+  letter-spacing: -0.01em; white-space: nowrap; line-height: 1; }
+.ns-catratio__legend { display: flex; gap: var(--ns-space-3); }
+.ns-catratio__key { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); display: inline-flex; align-items: center; gap: 4px; color: var(--ns-muted-fg); }
+.ns-catratio__key::before { content: ''; width: 8px; height: 8px; border-radius: 2px; }
+.ns-catratio__key[data-tone='ok']::before { background: var(--ns-success); }
+.ns-catratio__key[data-tone='thin']::before { background: var(--ns-warning); }
+
+/* transport-reach tri-meter */
+.ns-catreach { display: grid; gap: var(--ns-space-1-5); }
+.ns-catreach__row { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: var(--ns-space-2); }
+.ns-catreach__name { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600; color: var(--catt); }
+.ns-catreach__track { height: 8px; border-radius: var(--ns-radius-full); background: var(--ns-surface); border: 1px solid var(--ns-border); overflow: hidden; }
+.ns-catreach__fill { display: block; height: 100%; background: var(--catt); border-radius: var(--ns-radius-full); }
+.ns-catreach__n { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+
+/* shared 0..20 width buckets for ratio/reach fills (5% steps) */
+.ns-catratio__fill--w0, .ns-catreach__fill--w0 { width: 0; }
+.ns-catratio__fill--w1, .ns-catreach__fill--w1 { width: 5%; }
+.ns-catratio__fill--w2, .ns-catreach__fill--w2 { width: 10%; }
+.ns-catratio__fill--w3, .ns-catreach__fill--w3 { width: 15%; }
+.ns-catratio__fill--w4, .ns-catreach__fill--w4 { width: 20%; }
+.ns-catratio__fill--w5, .ns-catreach__fill--w5 { width: 25%; }
+.ns-catratio__fill--w6, .ns-catreach__fill--w6 { width: 30%; }
+.ns-catratio__fill--w7, .ns-catreach__fill--w7 { width: 35%; }
+.ns-catratio__fill--w8, .ns-catreach__fill--w8 { width: 40%; }
+.ns-catratio__fill--w9, .ns-catreach__fill--w9 { width: 45%; }
+.ns-catratio__fill--w10, .ns-catreach__fill--w10 { width: 50%; }
+.ns-catratio__fill--w11, .ns-catreach__fill--w11 { width: 55%; }
+.ns-catratio__fill--w12, .ns-catreach__fill--w12 { width: 60%; }
+.ns-catratio__fill--w13, .ns-catreach__fill--w13 { width: 65%; }
+.ns-catratio__fill--w14, .ns-catreach__fill--w14 { width: 70%; }
+.ns-catratio__fill--w15, .ns-catreach__fill--w15 { width: 75%; }
+.ns-catratio__fill--w16, .ns-catreach__fill--w16 { width: 80%; }
+.ns-catratio__fill--w17, .ns-catreach__fill--w17 { width: 85%; }
+.ns-catratio__fill--w18, .ns-catreach__fill--w18 { width: 90%; }
+.ns-catratio__fill--w19, .ns-catreach__fill--w19 { width: 95%; }
+.ns-catratio__fill--w20, .ns-catreach__fill--w20 { width: 100%; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w0 { width: 0; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w1 { width: 5%; } .ns-catreg__covbar-fill.ns-catreg__covbar--w2 { width: 10%; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w3 { width: 15%; } .ns-catreg__covbar-fill.ns-catreg__covbar--w4 { width: 20%; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w5 { width: 25%; } .ns-catreg__covbar-fill.ns-catreg__covbar--w6 { width: 30%; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w7 { width: 35%; } .ns-catreg__covbar-fill.ns-catreg__covbar--w8 { width: 40%; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w9 { width: 45%; } .ns-catreg__covbar-fill.ns-catreg__covbar--w10 { width: 50%; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w11 { width: 55%; } .ns-catreg__covbar-fill.ns-catreg__covbar--w12 { width: 60%; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w13 { width: 65%; } .ns-catreg__covbar-fill.ns-catreg__covbar--w14 { width: 70%; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w15 { width: 75%; } .ns-catreg__covbar-fill.ns-catreg__covbar--w16 { width: 80%; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w17 { width: 85%; } .ns-catreg__covbar-fill.ns-catreg__covbar--w18 { width: 90%; }
+.ns-catreg__covbar-fill.ns-catreg__covbar--w19 { width: 95%; } .ns-catreg__covbar-fill.ns-catreg__covbar--w20 { width: 100%; }
+
+/* ---- filter toolbar (ref 11) --------------------------------------------- */
+.ns-catbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-2) var(--ns-space-3); }
+.ns-catbar__search { position: relative; flex: 1 1 15rem; min-width: 11rem; }
+.ns-catbar__search-ico { position: absolute; left: var(--ns-space-2-5); top: 50%; transform: translateY(-50%);
+  color: var(--ns-muted-fg); font-size: var(--ns-text-sm); pointer-events: none; }
+.ns-catbar__input { width: 100%; padding: var(--ns-space-1-5) var(--ns-space-3) var(--ns-space-1-5) var(--ns-space-7);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface);
+  color: var(--ns-fg); font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); }
+.ns-catbar__input:focus-visible { outline: none; border-color: var(--ns-primary-border); box-shadow: 0 0 0 3px var(--ns-primary-subtle); }
+.ns-catbar__chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
+.ns-catchip { font: inherit; font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); cursor: pointer;
+  padding: var(--ns-space-1) var(--ns-space-2-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full);
+  background: var(--ns-surface); color: var(--ns-muted-fg); transition: background 0.12s, color 0.12s, border-color 0.12s; }
+.ns-catchip:hover { border-color: var(--ns-primary-border); color: var(--ns-fg); }
+.ns-catchip[data-state='active'] { background: var(--ns-primary-subtle); border-color: var(--ns-primary-border);
+  color: var(--ns-primary); font-weight: 600; }
+.ns-catbar__reset { font: inherit; font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); cursor: pointer;
+  padding: var(--ns-space-1) var(--ns-space-2-5); border: none; background: none; color: var(--ns-muted-fg); }
+.ns-catbar__reset:hover { color: var(--ns-fg); text-decoration: underline; }
+
+/* ---- explorer grid: registry rail + detail ------------------------------- */
+.ns-catgrid { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--ns-space-5); align-items: start; }
+
+/* registry rail */
+.ns-catreg { display: grid; gap: var(--ns-space-4); align-content: start; min-width: 0; }
+.ns-catreg__group { display: grid; gap: var(--ns-space-1-5); }
+.ns-catreg__group-head { display: flex; align-items: center; gap: var(--ns-space-2); padding: 0 var(--ns-space-1); }
+.ns-catreg__group-glyph { width: 18px; height: 18px; display: grid; place-items: center; color: var(--catk);
+  font-size: var(--ns-text-2xs); }
+.ns-catreg__group-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600; color: var(--ns-fg); }
+.ns-catreg__group-count { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  padding: 1px var(--ns-space-1-5); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full); }
+.ns-catreg__group-count[data-state='gated'] { border-style: dashed; }
+.ns-catreg__covbar { flex: 1; max-width: 4.5rem; height: 5px; border-radius: var(--ns-radius-full);
+  background: var(--ns-warning-subtle); overflow: hidden; margin-left: auto; }
+.ns-catreg__covbar-fill { display: block; height: 100%; background: var(--ns-success); border-radius: var(--ns-radius-full); }
+
+/* contract card */
+.ns-catreg__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
+  gap: var(--ns-space-2-5); width: 100%; text-align: left; cursor: pointer;
+  padding: var(--ns-space-2) var(--ns-space-2-5); border: 1px solid var(--ns-border); border-left: 3px solid var(--catm, var(--ns-border));
+  border-radius: var(--ns-radius-md); background: var(--ns-card); font: inherit;
+  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease; }
+.ns-catreg__item:hover { transform: translateX(1px); box-shadow: 2px 2px 0 color-mix(in oklab, var(--catm), transparent 78%); }
+.ns-catreg__item[data-state='selected'] { border-color: var(--ns-primary-border); border-left-color: var(--catm);
+  box-shadow: var(--ns-shadow-press, 3px 3px 0 var(--ns-primary-subtle)); background: color-mix(in oklab, var(--ns-primary-subtle), var(--ns-card) 55%); }
+.ns-catreg__method { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 700; letter-spacing: 0.03em;
+  color: var(--catm); min-width: 3.1rem; padding: 2px 4px; border-radius: var(--ns-radius-sm);
+  background: color-mix(in oklab, var(--catm), transparent 88%); text-align: center; }
+.ns-catreg__body { display: grid; gap: 1px; min-width: 0; }
+.ns-catreg__proc { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); color: var(--ns-fg);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ns-catreg__sigpre { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.ns-catreg__meta { display: inline-flex; align-items: center; gap: var(--ns-space-2); }
+.ns-catreg__cov { width: 8px; height: 8px; border-radius: var(--ns-radius-full); }
+.ns-catreg__cov[data-cov='complete'] { background: var(--ns-success); }
+.ns-catreg__cov[data-cov='thin'] { background: var(--ns-warning); box-shadow: 0 0 0 2px var(--ns-warning-subtle); }
+
+/* duality tri-pip */
+.ns-catdup { display: inline-flex; gap: 3px; align-items: center; }
+.ns-catdup__pip { width: 7px; height: 7px; border-radius: 2px; background: var(--ns-surface);
+  border: 1px solid var(--ns-border); }
+.ns-catdup__pip[data-on='1'] { background: var(--catt); border-color: var(--catt); }
+.ns-catdup--lg { gap: var(--ns-space-1-5); }
+.ns-catdup--lg .ns-catdup__pip { width: auto; height: auto; border-radius: var(--ns-radius-sm);
+  padding: 2px var(--ns-space-1-5); display: inline-flex; }
+.ns-catdup--lg .ns-catdup__pip-lbl { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 600;
+  color: var(--ns-muted-fg); }
+.ns-catdup--lg .ns-catdup__pip[data-on='1'] { background: color-mix(in oklab, var(--catt), transparent 85%); border-color: var(--catt); }
+.ns-catdup--lg .ns-catdup__pip[data-on='1'] .ns-catdup__pip-lbl { color: var(--catt); }
+.ns-catdup--lg .ns-catdup__pip[data-on='0'] { opacity: 0.5; }
+.ns-catdup--lg .ns-catdup__pip[data-on='0'] .ns-catdup__pip-lbl { text-decoration: line-through; }
+
+.ns-catreg__gated { display: grid; gap: var(--ns-space-1-5); padding: var(--ns-space-2-5);
+  border: 1px dashed var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); }
+.ns-catreg__gated-desc { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-catreg__gated-cmd { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-fg);
+  background: var(--ns-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm); padding: var(--ns-space-1) var(--ns-space-2); }
+.ns-catreg__empty { display: grid; place-items: center; gap: var(--ns-space-2); padding: var(--ns-space-8) var(--ns-space-4);
+  border: 1px dashed var(--ns-border); border-radius: var(--ns-radius-md); text-align: center; }
+.ns-catreg__empty-glyph { font-size: var(--ns-text-2xl); color: var(--ns-muted-fg); }
+.ns-catreg__empty-title { font-size: var(--ns-text-sm); color: var(--ns-fg); font-weight: 600; }
+
+/* ---- contract detail: signature + schema + relationships ----------------- */
+.ns-catdetail { display: grid; gap: var(--ns-space-4); align-content: start;
+  background: var(--ns-card); border: 1px solid color-mix(in oklab, var(--ns-border-strong) 45%, var(--ns-border));
+  border-radius: 12px; box-shadow: var(--ns-shadow-sm); padding: var(--ns-space-5); }
+[data-theme='dark'] .ns-catdetail { box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(235, 228, 210, 0.04); }
+.ns-catdetail__head { display: flex; align-items: center; gap: var(--ns-space-3); flex-wrap: wrap; }
+.ns-catdetail__kind { width: 34px; height: 34px; display: grid; place-items: center; flex: none;
+  border: 1px solid var(--catk); border-radius: 9px; background: var(--catk-sub); color: var(--catk); font-size: var(--ns-text-base); }
+.ns-catdetail__title { display: grid; gap: 1px; min-width: 0; }
+.ns-catdetail__proc { font-family: var(--ns-font-mono); font-size: var(--ns-text-lg); font-weight: 700; color: var(--ns-fg);
+  overflow-wrap: anywhere; }
+.ns-catdetail__prov { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-catver { display: inline-flex; align-items: center; gap: var(--ns-space-2); }
+.ns-catver__tag { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); font-weight: 700; color: var(--ns-primary);
+  padding: 2px var(--ns-space-2); border: 1px solid var(--ns-primary-border); border-radius: var(--ns-radius-sm);
+  background: var(--ns-primary-subtle); }
+.ns-catver__compat { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); padding: 2px var(--ns-space-2);
+  border-radius: var(--ns-radius-full); border: 1px solid var(--ns-border); color: var(--ns-muted-fg); }
+.ns-catver__compat[data-tone='success'] { color: var(--ns-success-fg); background: var(--ns-success-subtle); border-color: var(--ns-success-border); }
+.ns-catver__compat[data-tone='primary'] { color: var(--ns-primary); background: var(--ns-primary-subtle); border-color: var(--ns-primary-border); }
+.ns-catver__compat[data-tone='warning'] { color: var(--ns-warning-fg); background: var(--ns-warning-subtle); border-color: var(--ns-warning-border); }
+.ns-catdetail__method-strip { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap;
+  padding-bottom: var(--ns-space-3); border-bottom: 1px solid var(--ns-border); }
+
+/* type signature block (line-numbered, type-colored) */
+.ns-catsig { display: grid; grid-template-columns: auto 1fr; align-items: stretch;
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); overflow: hidden; }
+.ns-catsig__gutter { display: grid; place-items: center; padding: var(--ns-space-3) var(--ns-space-2);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  background: color-mix(in oklab, var(--ns-muted-fg), transparent 92%); border-right: 1px solid var(--ns-border); min-width: 2rem; }
+.ns-catsig__code { display: block; padding: var(--ns-space-3) var(--ns-space-3-5); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-sm); line-height: 1.5; overflow-x: auto; white-space: pre; }
+/* type-color tokens */
+.ns-catsig__tok[data-kind='kw'] { color: var(--ns-primary); font-weight: 700; }
+.ns-catsig__tok[data-kind='t'] { color: var(--ns-copper-6); font-weight: 600; }
+.ns-catsig__tok[data-kind='k'] { color: var(--ns-teal-6); }
+.ns-catsig__tok[data-kind='p'] { color: var(--ns-muted-fg); }
+.ns-catsig__tok[data-kind='c'] { color: var(--ns-warning-fg); font-style: italic; }
+[data-theme='dark'] .ns-catsig__tok[data-kind='t'] { color: var(--ns-copper-4); }
+[data-theme='dark'] .ns-catsig__tok[data-kind='k'] { color: var(--ns-teal-4); }
+
+/* schema viewer (secondary, line-numbered) */
+.ns-catschema { display: grid; gap: var(--ns-space-2); }
+.ns-catschema__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ns-space-3); }
+.ns-catschema__hint { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-catschema__code { border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md);
+  background: var(--ns-surface); overflow: hidden; max-height: 15rem; overflow-y: auto; }
+.ns-catschema__line { display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; }
+.ns-catschema__line:nth-child(even) { background: color-mix(in oklab, var(--ns-muted-fg), transparent 96%); }
+.ns-catschema__gutter { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  text-align: right; padding: 2px var(--ns-space-2); border-right: 1px solid var(--ns-border);
+  background: color-mix(in oklab, var(--ns-muted-fg), transparent 94%); }
+.ns-catschema__src { display: block; padding: 2px var(--ns-space-3); font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs); line-height: 1.6; white-space: pre; }
+.ns-catschema__rest { color: var(--ns-fg); }
+
+/* producer → consumer relationship strip */
+.ns-catrel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--ns-space-2);
+  padding: var(--ns-space-3); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); background: var(--ns-surface); }
+.ns-catrel__col { display: grid; gap: var(--ns-space-1-5); min-width: 0; }
+.ns-catrel__col--cons { text-align: right; justify-items: end; }
+.ns-catrel__col-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-catrel__col-n { color: var(--ns-fg); font-weight: 700; }
+.ns-catrel__node { display: inline-block; max-width: 100%; font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs);
+  padding: var(--ns-space-1) var(--ns-space-2); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-sm);
+  background: var(--ns-card); color: var(--ns-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-catrel__node[data-role='prod'] { border-left: 2px solid var(--ns-teal-5); }
+.ns-catrel__node[data-role='cons'] { border-right: 2px solid var(--ns-copper-6); }
+.ns-catrel__spine { position: relative; display: grid; place-items: center; padding: 0 var(--ns-space-2); align-self: stretch; }
+.ns-catrel__spine::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
+  background: linear-gradient(90deg, var(--ns-teal-5), var(--ns-copper-6)); opacity: 0.5; }
+.ns-catrel__hub { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center;
+  border: 1px solid var(--catk); border-radius: var(--ns-radius-full); background: var(--catk-sub); color: var(--catk); font-size: var(--ns-text-sm); }
+.ns-catdetail__actions { display: flex; gap: var(--ns-space-2); }
+
+.ns-catroutes { display: grid; gap: var(--ns-space-3); }
+.ns-catbar__summary { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-catbar__summary-note { font-size: var(--ns-text-xs); color: var(--ns-muted-fg); }
+
+/* sheet hero for mobile */
+.ns-catsheet__hero { display: flex; align-items: center; gap: var(--ns-space-3); }
+.ns-catsheet__hero-main { display: grid; gap: 2px; }
+
+/* ---- responsive ---------------------------------------------------------- */
+@media (max-width: 960px) {
+  .ns-cathead { grid-template-columns: 1fr 1fr; }
+}
+@media (max-width: 720px) {
+  .ns-catgrid { grid-template-columns: 1fr; }
+  .ns-catgrid .ns-catdetail { display: none; } /* mobile → bottom sheet on tap */
+}
+@media (max-width: 560px) {
+  .ns-cathead { grid-template-columns: 1fr; }
+  .ns-cathead__cell { padding-left: 0; border-left: none; padding-top: var(--ns-space-3); border-top: 1px solid var(--ns-border); }
+  .ns-cathead__cell:first-child { padding-top: 0; border-top: none; }
+}
+
+/* ==========================================================================
+ * S15 — Auth Sessions: session-security roster (Pass V11)
+ * The signature idiom: identity-forward session cards + a live TTL/expiry
+ * visualization + a session-lifecycle view + revoke actions. Distinct from
+ * every finished screen (consoles / Config waterfall / Migrations arc / DLQ
+ * clusters / Catalog registry rail). NS One identity only: --ns-* tokens,
+ * ns-* classes, warm-cream + dark, hard press shadow, copper/teal/amber,
+ * DM Sans/Mono. Geometry via width-bucket classes (--w0..--w20) — NO SVG holes.
+ * State tones: active=success(teal-ish), idle=warning(amber), expiring=
+ * destructive(copper-red), revoked=muted.
+ * ========================================================================== */
+
+.ns-auth { display: grid; gap: var(--ns-space-5); }
+
+/* server-clock chip + revoke-all in the header toolbar */
+.ns-auth__now { display: inline-flex; align-items: center; gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  padding: var(--ns-space-1-5) var(--ns-space-3); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-full); background: var(--ns-surface); white-space: nowrap; }
+.ns-auth__now b { color: var(--ns-fg); font-weight: 700; }
+.ns-auth__now-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ns-success);
+  box-shadow: 0 0 0 3px var(--ns-success-subtle); animation: ns-auth-pulse 2.4s ease-in-out infinite; }
+@keyframes ns-auth-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
+.ns-auth__revokeall { white-space: nowrap; }
+.ns-auth__revokeall-glyph { margin-right: 4px; }
+.ns-auth__revokeall-n { font-family: var(--ns-font-mono); font-weight: 700; margin-left: 4px;
+  padding: 0 5px; border-radius: var(--ns-radius-full); background: color-mix(in oklab, #fff 22%, transparent); }
+
+/* ---- security header composite (micro-viz, not number cards) -------------- */
+.ns-authhead { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: var(--ns-space-3);
+  background: var(--ns-card); border: 1px solid color-mix(in oklab, var(--ns-border-strong) 45%, var(--ns-border));
+  border-radius: 12px; box-shadow: var(--ns-shadow-sm); padding: var(--ns-space-4) var(--ns-space-5); }
+[data-theme='dark'] .ns-authhead { box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(235, 228, 210, 0.04); }
+.ns-authhead__cell { display: grid; gap: var(--ns-space-2); align-content: start; min-width: 0;
+  padding-left: var(--ns-space-4); border-left: 1px solid var(--ns-border); }
+.ns-authhead__cell:first-child { padding-left: 0; border-left: none; }
+.ns-authhead__cell--hero { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; align-items: center;
+  column-gap: var(--ns-space-3); row-gap: var(--ns-space-2); }
+.ns-authhead__glyph { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center;
+  border: 1px solid var(--ns-primary-border); border-radius: 10px; background: var(--ns-primary-subtle);
+  color: var(--ns-primary); font-size: var(--ns-text-xl); }
+.ns-authhead__hero-main { display: grid; }
+.ns-authhead__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xl); line-height: 1;
+  font-weight: 700; color: var(--ns-fg); display: flex; align-items: baseline; gap: var(--ns-space-2); }
+.ns-authhead__value-sub { font-size: var(--ns-text-sm); font-weight: 500; color: var(--ns-muted-fg); }
+.ns-authhead__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.07em; color: var(--ns-muted-fg); margin-top: 3px; }
+.ns-authhead__chan { grid-column: 1 / 3; display: flex; gap: 3px; height: 22px; margin-top: var(--ns-space-1); }
+.ns-authhead__chan-legend { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 2px var(--ns-space-3); }
+.ns-authhead__legend-item { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-authhead__legend-item b { color: var(--ns-fg); font-weight: 700; }
+.ns-authhead__legend-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--ns-muted-fg); }
+.ns-authhead__legend-dot[data-tone='success'] { background: var(--ns-success); }
+.ns-authhead__legend-dot[data-tone='warning'] { background: var(--ns-warning); }
+.ns-authhead__legend-dot[data-tone='destructive'] { background: var(--ns-destructive); }
+
+/* status distribution channel bar segments */
+.ns-authchan__seg { position: relative; min-width: 10px; border: none; padding: 0; cursor: pointer;
+  border-radius: var(--ns-radius-sm); transition: transform 0.12s ease, box-shadow 0.12s ease; }
+.ns-authchan__seg[data-tone='success'] { background: color-mix(in oklab, var(--ns-success), transparent 15%); }
+.ns-authchan__seg[data-tone='warning'] { background: color-mix(in oklab, var(--ns-warning), transparent 15%); }
+.ns-authchan__seg[data-tone='destructive'] { background: color-mix(in oklab, var(--ns-destructive), transparent 15%); }
+.ns-authchan__seg[data-tone='muted'] { background: color-mix(in oklab, var(--ns-muted-fg), transparent 55%); }
+.ns-authchan__seg:hover { transform: translateY(-1px); box-shadow: 2px 2px 0 color-mix(in oklab, var(--ns-fg), transparent 82%); }
+.ns-authchan__seg[data-active='true'] { box-shadow: 0 0 0 2px var(--ns-card), 0 0 0 4px var(--ns-fg); }
+.ns-authchan__seg--w1 { flex: 1; } .ns-authchan__seg--w2 { flex: 2; } .ns-authchan__seg--w3 { flex: 3; }
+.ns-authchan__seg--w4 { flex: 4; } .ns-authchan__seg--w5 { flex: 5; } .ns-authchan__seg--w6 { flex: 6; }
+.ns-authchan__seg--w7 { flex: 7; } .ns-authchan__seg--w8 { flex: 8; } .ns-authchan__seg--w9 { flex: 9; }
+.ns-authchan__seg--w10 { flex: 10; } .ns-authchan__seg--w11 { flex: 11; } .ns-authchan__seg--w12 { flex: 12; }
+.ns-authchan__seg--w13 { flex: 13; } .ns-authchan__seg--w14 { flex: 14; } .ns-authchan__seg--w15 { flex: 15; }
+.ns-authchan__seg--w16 { flex: 16; } .ns-authchan__seg--w17 { flex: 17; } .ns-authchan__seg--w18 { flex: 18; }
+.ns-authchan__seg--w19 { flex: 19; } .ns-authchan__seg--w20 { flex: 20; }
+
+/* ratio meters (elevated scope / MFA coverage) */
+.ns-authhead__ratio-head { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
+  gap: var(--ns-space-2); }
+.ns-authhead__ratio-glyph { font-size: var(--ns-text-sm); color: var(--ns-muted-fg); }
+.ns-authhead__ratio-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ns-muted-fg); }
+.ns-authhead__ratio-val { font-family: var(--ns-font-mono); font-size: var(--ns-text-lg); font-weight: 700;
+  color: var(--ns-fg); }
+.ns-authhead__ratio-pct { font-size: var(--ns-text-2xs); font-weight: 500; color: var(--ns-muted-fg); margin-left: 3px; }
+.ns-authhead__ratio-sub { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-authratio { position: relative; height: 12px; border-radius: var(--ns-radius-full);
+  background: color-mix(in oklab, var(--ns-fg) 8%, var(--ns-surface)); overflow: hidden;
+  border: 1px solid var(--ns-border); }
+.ns-authratio__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--ns-radius-full); }
+.ns-authratio__fill[data-tone='destructive'] { background: linear-gradient(90deg, var(--ns-amber-5), var(--ns-destructive)); }
+.ns-authratio__fill[data-tone='success'] { background: linear-gradient(90deg, var(--ns-teal-4), var(--ns-teal-6)); }
+.ns-authratio__fill--w0 { width: 0; } .ns-authratio__fill--w1 { width: 5%; } .ns-authratio__fill--w2 { width: 10%; }
+.ns-authratio__fill--w3 { width: 15%; } .ns-authratio__fill--w4 { width: 20%; } .ns-authratio__fill--w5 { width: 25%; }
+.ns-authratio__fill--w6 { width: 30%; } .ns-authratio__fill--w7 { width: 35%; } .ns-authratio__fill--w8 { width: 40%; }
+.ns-authratio__fill--w9 { width: 45%; } .ns-authratio__fill--w10 { width: 50%; } .ns-authratio__fill--w11 { width: 55%; }
+.ns-authratio__fill--w12 { width: 60%; } .ns-authratio__fill--w13 { width: 65%; } .ns-authratio__fill--w14 { width: 70%; }
+.ns-authratio__fill--w15 { width: 75%; } .ns-authratio__fill--w16 { width: 80%; } .ns-authratio__fill--w17 { width: 85%; }
+.ns-authratio__fill--w18 { width: 90%; } .ns-authratio__fill--w19 { width: 95%; } .ns-authratio__fill--w20 { width: 100%; }
+
+/* expiry-horizon strip — the header TTL viz (soonest-to-expire ordering) */
+.ns-authhead__cell--hz { gap: var(--ns-space-1-5); }
+.ns-authhead__hz-head { display: grid; grid-template-columns: auto auto 1fr; align-items: baseline; gap: var(--ns-space-2); }
+.ns-authhead__hz-soon { justify-self: end; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-authhead__hz-soon b { color: var(--ns-fg); }
+.ns-authhz { display: grid; gap: 4px; }
+.ns-authhz__row { display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: var(--ns-space-2);
+  border: 0; background: transparent; padding: 2px 4px; cursor: pointer; border-radius: var(--ns-radius-sm); text-align: left; }
+.ns-authhz__row:hover { background: color-mix(in oklab, var(--ns-fg) 4%, transparent); }
+.ns-authhz__row[data-sel='1'] { background: var(--ns-primary-subtle); box-shadow: inset 2px 0 0 var(--ns-primary); }
+.ns-authhz__u { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-authhz__track { position: relative; height: 8px; border-radius: var(--ns-radius-full);
+  background: color-mix(in oklab, var(--ns-fg) 8%, var(--ns-surface)); overflow: hidden; }
+.ns-authhz__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--ns-radius-full); }
+.ns-authhz__fill[data-tone='success'] { background: var(--ns-success); }
+.ns-authhz__fill[data-tone='warning'] { background: var(--ns-warning); }
+.ns-authhz__fill[data-tone='destructive'] { background: var(--ns-destructive); }
+.ns-authhz__t { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-variant-numeric: tabular-nums; }
+.ns-authhz__t[data-tone='success'] { color: var(--ns-success); }
+.ns-authhz__t[data-tone='warning'] { color: var(--ns-warning); }
+.ns-authhz__t[data-tone='destructive'] { color: var(--ns-destructive); font-weight: 700; }
+.ns-authhz__fill--w0 { width: 3%; } .ns-authhz__fill--w1 { width: 5%; } .ns-authhz__fill--w2 { width: 10%; }
+.ns-authhz__fill--w3 { width: 15%; } .ns-authhz__fill--w4 { width: 20%; } .ns-authhz__fill--w5 { width: 25%; }
+.ns-authhz__fill--w6 { width: 30%; } .ns-authhz__fill--w7 { width: 35%; } .ns-authhz__fill--w8 { width: 40%; }
+.ns-authhz__fill--w9 { width: 45%; } .ns-authhz__fill--w10 { width: 50%; } .ns-authhz__fill--w11 { width: 55%; }
+.ns-authhz__fill--w12 { width: 60%; } .ns-authhz__fill--w13 { width: 65%; } .ns-authhz__fill--w14 { width: 70%; }
+.ns-authhz__fill--w15 { width: 75%; } .ns-authhz__fill--w16 { width: 80%; } .ns-authhz__fill--w17 { width: 85%; }
+.ns-authhz__fill--w18 { width: 90%; } .ns-authhz__fill--w19 { width: 95%; } .ns-authhz__fill--w20 { width: 100%; }
+
+/* ---- roster toolbar ------------------------------------------------------- */
+.ns-authbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-2) var(--ns-space-3); }
+.ns-authbar__search { display: inline-flex; align-items: center; gap: var(--ns-space-2); flex: 0 1 20rem;
+  min-width: 12rem; padding: var(--ns-space-2) var(--ns-space-3); border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-md); background: var(--ns-surface); }
+.ns-authbar__search:focus-within { border-color: var(--ns-primary); box-shadow: 0 0 0 3px var(--ns-primary-subtle); }
+.ns-authbar__search-glyph { color: var(--ns-muted-fg); font-size: var(--ns-text-sm); }
+.ns-authbar__input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+.ns-authbar__chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
+.ns-authbar__chip { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); cursor: pointer;
+  padding: var(--ns-space-1-5) var(--ns-space-3); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-full);
+  background: var(--ns-surface); color: var(--ns-muted-fg); transition: all 0.12s ease; }
+.ns-authbar__chip:hover { border-color: var(--ns-border-strong); color: var(--ns-fg); }
+.ns-authbar__chip[data-state='active'] { background: var(--ns-fg); color: var(--ns-bg); border-color: var(--ns-fg); font-weight: 600; }
+.ns-authbar__seg { flex: 0 0 auto; }
+
+/* ---- two-pane grid -------------------------------------------------------- */
+.ns-authgrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--ns-space-5); align-items: start; }
+.ns-authroster { display: grid; gap: var(--ns-space-3); min-width: 0; }
+
+/* ---- session card (identity-forward) -------------------------------------- */
+.ns-authcard { position: relative; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg);
+  background: var(--ns-card); overflow: hidden; transition: box-shadow 0.14s ease, border-color 0.14s ease, transform 0.14s ease; }
+.ns-authcard::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ns-border-strong); }
+.ns-authcard[data-state='active']::before { background: var(--ns-success); }
+.ns-authcard[data-state='idle']::before { background: var(--ns-warning); }
+.ns-authcard[data-state='expiring']::before { background: var(--ns-destructive); }
+.ns-authcard[data-state='revoked']::before { background: color-mix(in oklab, var(--ns-muted-fg), transparent 40%); }
+.ns-authcard[data-state='revoked'] { opacity: 0.72; }
+.ns-authcard:hover { border-color: var(--ns-border-strong); box-shadow: var(--ns-shadow-press); transform: translate(-1px, -1px); }
+.ns-authcard[data-selected='selected'] { border-color: var(--ns-primary); box-shadow: var(--ns-shadow-press); }
+.ns-authcard[data-selected='selected']::before { background: var(--ns-primary); }
+.ns-authcard__body { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ns-space-3);
+  align-items: center; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer;
+  padding: var(--ns-space-3) var(--ns-space-4) var(--ns-space-3) calc(var(--ns-space-4) + 3px); font: inherit; }
+
+/* avatar + device glyph */
+.ns-authcard__avatar { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center;
+  border-radius: var(--ns-radius-md); font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 700;
+  letter-spacing: -0.02em; background: var(--ns-copper-2); color: var(--ns-copper-7);
+  border: 1px solid color-mix(in oklab, var(--ns-copper-5), transparent 55%); }
+.ns-authcard__avatar[data-kind='service'] { background: var(--ns-teal-2); color: var(--ns-teal-7);
+  border-color: color-mix(in oklab, var(--ns-teal-5), transparent 55%); border-radius: var(--ns-radius-sm); }
+.ns-authcard__dev { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; display: grid;
+  place-items: center; border-radius: 50%; background: var(--ns-card); border: 1px solid var(--ns-border);
+  font-size: 9px; color: var(--ns-muted-fg); }
+.ns-authcard__dev[data-dev='ci'], .ns-authcard__dev[data-dev='service'] { color: var(--ns-teal-6); }
+
+.ns-authcard__ident { display: grid; gap: 2px; min-width: 0; }
+.ns-authcard__id-row { display: flex; align-items: center; gap: var(--ns-space-2); min-width: 0; }
+.ns-authcard__name { font-size: var(--ns-text-sm); font-weight: 600; color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-authcard__elev { color: var(--ns-destructive); font-size: var(--ns-text-2xs); flex: none; }
+.ns-authcard__sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-authcard__uid { color: var(--ns-primary); }
+.ns-authcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ns-space-1) var(--ns-space-2); margin-top: 3px; }
+.ns-authprov { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); padding: 1px 7px;
+  border-radius: var(--ns-radius-full); border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-muted-fg); }
+.ns-authprov[data-tone='primary'] { color: var(--ns-primary); border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); }
+.ns-authprov[data-tone='warning'] { color: var(--ns-amber-6); border-color: color-mix(in oklab, var(--ns-warning), transparent 60%); background: var(--ns-warning-subtle); }
+.ns-authcard__loc { display: inline-flex; align-items: center; gap: 3px; font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-authcard__geo { font-size: 8px; color: var(--ns-teal-5); }
+.ns-authcard__geo[data-geo='local'] { color: var(--ns-muted-fg); }
+.ns-authcard__geo[data-geo='cloud'] { color: var(--ns-amber-5); }
+.ns-authcard__mfa { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-success); }
+.ns-authcard__mfa[data-on='0'] { color: color-mix(in oklab, var(--ns-destructive), var(--ns-muted-fg) 30%); }
+
+/* right column: status badge + TTL bar + countdown */
+.ns-authcard__right { display: grid; justify-items: end; gap: 5px; flex: none; min-width: 8.5rem; }
+.ns-ttlbar { position: relative; width: 8.5rem; height: 7px; border-radius: var(--ns-radius-full);
+  background: color-mix(in oklab, var(--ns-fg) 9%, var(--ns-surface)); overflow: hidden; border: 1px solid var(--ns-border); }
+.ns-ttlbar__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--ns-radius-full); }
+.ns-ttlbar__fill[data-tone='success'] { background: var(--ns-success); }
+.ns-ttlbar__fill[data-tone='warning'] { background: var(--ns-warning); }
+.ns-ttlbar__fill[data-tone='destructive'] { background: repeating-linear-gradient(45deg, var(--ns-destructive), var(--ns-destructive) 4px, color-mix(in oklab, var(--ns-destructive), #fff 22%) 4px, color-mix(in oklab, var(--ns-destructive), #fff 22%) 8px); }
+.ns-ttlbar__fill[data-tone='muted'] { background: color-mix(in oklab, var(--ns-muted-fg), transparent 55%); }
+.ns-ttlbar__fill--w0 { width: 2%; } .ns-ttlbar__fill--w1 { width: 5%; } .ns-ttlbar__fill--w2 { width: 10%; }
+.ns-ttlbar__fill--w3 { width: 15%; } .ns-ttlbar__fill--w4 { width: 20%; } .ns-ttlbar__fill--w5 { width: 25%; }
+.ns-ttlbar__fill--w6 { width: 30%; } .ns-ttlbar__fill--w7 { width: 35%; } .ns-ttlbar__fill--w8 { width: 40%; }
+.ns-ttlbar__fill--w9 { width: 45%; } .ns-ttlbar__fill--w10 { width: 50%; } .ns-ttlbar__fill--w11 { width: 55%; }
+.ns-ttlbar__fill--w12 { width: 60%; } .ns-ttlbar__fill--w13 { width: 65%; } .ns-ttlbar__fill--w14 { width: 70%; }
+.ns-ttlbar__fill--w15 { width: 75%; } .ns-ttlbar__fill--w16 { width: 80%; } .ns-ttlbar__fill--w17 { width: 85%; }
+.ns-ttlbar__fill--w18 { width: 90%; } .ns-ttlbar__fill--w19 { width: 95%; } .ns-ttlbar__fill--w20 { width: 100%; }
+.ns-authcard__ttl-lbl { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  font-variant-numeric: tabular-nums; white-space: nowrap; }
+.ns-authcard__ttl-lbl[data-tone='destructive'] { color: var(--ns-destructive); font-weight: 700; }
+.ns-authcard__ttl-lbl[data-tone='warning'] { color: var(--ns-amber-6); }
+.ns-authcard__ttl-pct { opacity: 0.7; }
+
+/* card footer: scope chips + revoke */
+.ns-authcard__foot { display: flex; align-items: center; gap: var(--ns-space-2);
+  padding: var(--ns-space-2) var(--ns-space-4) var(--ns-space-2) calc(var(--ns-space-4) + 3px);
+  border-top: 1px dashed var(--ns-border); background: color-mix(in oklab, var(--ns-fg) 2%, transparent); }
+.ns-authcard__scopes { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
+.ns-scopechip { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); padding: 1px 7px;
+  border-radius: var(--ns-radius-sm); border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-muted-fg); }
+.ns-scopechip[data-elev='1'] { color: var(--ns-copper-7); border-color: color-mix(in oklab, var(--ns-copper-5), transparent 55%); background: var(--ns-copper-2); }
+.ns-scopechip--lg { font-size: var(--ns-text-2xs); padding: 3px 9px; }
+.ns-authcard__revoke { flex: none; }
+
+/* roster empty state */
+.ns-authroster__empty { display: grid; justify-items: center; gap: var(--ns-space-2); text-align: center;
+  padding: var(--ns-space-8) var(--ns-space-5); border: 1px dashed var(--ns-border); border-radius: var(--ns-radius-lg);
+  background: var(--ns-surface); }
+.ns-authroster__empty-glyph { font-size: var(--ns-text-2xl); color: var(--ns-muted-fg); opacity: 0.6; }
+.ns-authroster__empty-title { font-weight: 600; color: var(--ns-fg); }
+.ns-authroster__empty-sub { font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+
+/* ---- session detail panel ------------------------------------------------- */
+.ns-authdetail { position: sticky; top: var(--ns-space-4); display: grid; gap: var(--ns-space-4);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-card);
+  box-shadow: var(--ns-shadow-sm); padding: var(--ns-space-5); min-width: 0; }
+.ns-authdetail__head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--ns-space-3); align-items: center; }
+.ns-authdetail__avatar { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center;
+  border-radius: var(--ns-radius-md); font-family: var(--ns-font-mono); font-size: var(--ns-text-base); font-weight: 700;
+  background: var(--ns-copper-2); color: var(--ns-copper-7); border: 1px solid color-mix(in oklab, var(--ns-copper-5), transparent 55%); }
+.ns-authdetail__avatar[data-kind='service'] { background: var(--ns-teal-2); color: var(--ns-teal-7);
+  border-color: color-mix(in oklab, var(--ns-teal-5), transparent 55%); border-radius: var(--ns-radius-sm); }
+.ns-authdetail__head-main { display: grid; gap: 2px; min-width: 0; }
+.ns-authdetail__name-row { display: flex; align-items: center; gap: var(--ns-space-2); }
+.ns-authdetail__name { font-size: var(--ns-text-base); font-weight: 700; color: var(--ns-fg); }
+.ns-authdetail__uid { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+
+/* detail TTL lifespan viz (elapsed vs remaining, marker at now) */
+.ns-authttl { display: grid; gap: var(--ns-space-1-5); padding: var(--ns-space-3);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md);
+  background: color-mix(in oklab, var(--ns-fg) 2.5%, var(--ns-surface)); }
+.ns-authttl__labels { display: flex; justify-content: space-between; font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+.ns-authttl__lifespan { color: var(--ns-fg); font-weight: 600; }
+.ns-authttl__track { position: relative; height: 16px; border-radius: var(--ns-radius-sm); overflow: hidden;
+  background: color-mix(in oklab, var(--ns-fg) 8%, var(--ns-surface)); border: 1px solid var(--ns-border); }
+.ns-authttl__elapsed { position: absolute; inset: 0 auto 0 0;
+  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ns-muted-fg), transparent 70%), color-mix(in oklab, var(--ns-muted-fg), transparent 70%) 5px, color-mix(in oklab, var(--ns-muted-fg), transparent 82%) 5px, color-mix(in oklab, var(--ns-muted-fg), transparent 82%) 10px); }
+.ns-authttl__remain { position: absolute; inset: 0 0 0 auto; }
+.ns-authttl[data-tone='success'] .ns-authttl__remain { background: color-mix(in oklab, var(--ns-success), transparent 25%); }
+.ns-authttl[data-tone='warning'] .ns-authttl__remain { background: color-mix(in oklab, var(--ns-warning), transparent 25%); }
+.ns-authttl[data-tone='destructive'] .ns-authttl__remain { background: color-mix(in oklab, var(--ns-destructive), transparent 20%); }
+.ns-authttl[data-tone='muted'] .ns-authttl__remain { background: color-mix(in oklab, var(--ns-muted-fg), transparent 65%); }
+.ns-authttl__marker { position: absolute; top: -2px; bottom: -2px; left: 50%; width: 2px;
+  background: var(--ns-fg); z-index: 2; transform: translateX(-1px); }
+.ns-authttl__marker--w0 { left: 2%; } .ns-authttl__marker--w1 { left: 5%; } .ns-authttl__marker--w2 { left: 10%; }
+.ns-authttl__marker--w3 { left: 15%; } .ns-authttl__marker--w4 { left: 20%; } .ns-authttl__marker--w5 { left: 25%; }
+.ns-authttl__marker--w6 { left: 30%; } .ns-authttl__marker--w7 { left: 35%; } .ns-authttl__marker--w8 { left: 40%; }
+.ns-authttl__marker--w9 { left: 45%; } .ns-authttl__marker--w10 { left: 50%; } .ns-authttl__marker--w11 { left: 55%; }
+.ns-authttl__marker--w12 { left: 60%; } .ns-authttl__marker--w13 { left: 65%; } .ns-authttl__marker--w14 { left: 70%; }
+.ns-authttl__marker--w15 { left: 75%; } .ns-authttl__marker--w16 { left: 80%; } .ns-authttl__marker--w17 { left: 85%; }
+.ns-authttl__marker--w18 { left: 90%; } .ns-authttl__marker--w19 { left: 95%; } .ns-authttl__marker--w20 { left: 98%; }
+.ns-authttl__foot { display: flex; justify-content: space-between; font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); }
+.ns-authttl__elapsed-lbl { color: var(--ns-muted-fg); }
+.ns-authttl__remain-lbl { font-weight: 700; }
+.ns-authttl__remain-lbl[data-tone='success'] { color: var(--ns-success); }
+.ns-authttl__remain-lbl[data-tone='warning'] { color: var(--ns-amber-6); }
+.ns-authttl__remain-lbl[data-tone='destructive'] { color: var(--ns-destructive); }
+.ns-authttl__remain-lbl[data-tone='muted'] { color: var(--ns-muted-fg); }
+
+/* KV block */
+.ns-authkv { display: grid; border: 1px solid var(--ns-border); border-radius: var(--ns-radius-md); overflow: hidden; }
+.ns-authkv__row { display: grid; grid-template-columns: 8.5rem 1fr; gap: var(--ns-space-3); align-items: baseline;
+  padding: var(--ns-space-2) var(--ns-space-3); border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent); }
+.ns-authkv__row:nth-child(odd) { background: color-mix(in oklab, var(--ns-fg) 2%, transparent); }
+.ns-authkv__row:last-child { border-bottom: 0; }
+.ns-authkv__k { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--ns-muted-fg); }
+.ns-authkv__v { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg);
+  overflow-wrap: anywhere; }
+
+.ns-authdetail__block { display: grid; gap: var(--ns-space-2); }
+.ns-authdetail__count { font-family: var(--ns-font-mono); color: var(--ns-fg); }
+
+/* session lifecycle timeline (compact, tone-dotted) */
+.ns-authtl { display: grid; gap: 0; position: relative; padding-left: var(--ns-space-1); }
+.ns-authtl__step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: var(--ns-space-3);
+  padding: var(--ns-space-2) 0 var(--ns-space-2) var(--ns-space-4); }
+.ns-authtl__step::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px;
+  background: var(--ns-border); }
+.ns-authtl__step:first-child::before { top: 50%; }
+.ns-authtl__step:last-child::before { bottom: 50%; }
+.ns-authtl__marker { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 9px; height: 9px;
+  border-radius: 50%; background: var(--ns-muted-fg); border: 2px solid var(--ns-card); box-shadow: 0 0 0 1px var(--ns-border); z-index: 1; }
+.ns-authtl__step[data-tone='success'] .ns-authtl__marker { background: var(--ns-success); }
+.ns-authtl__step[data-tone='primary'] .ns-authtl__marker { background: var(--ns-primary); }
+.ns-authtl__step[data-tone='warning'] .ns-authtl__marker { background: var(--ns-warning); }
+.ns-authtl__step[data-tone='destructive'] .ns-authtl__marker { background: var(--ns-destructive); }
+.ns-authtl__body { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ns-space-3); }
+.ns-authtl__text { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-fg); }
+.ns-authtl__at { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); font-variant-numeric: tabular-nums; }
+
+.ns-authdetail__actions { display: grid; gap: var(--ns-space-2); }
+.ns-authdetail__revoked-note { display: flex; align-items: center; gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg);
+  padding: var(--ns-space-3); border: 1px dashed var(--ns-border); border-radius: var(--ns-radius-md);
+  background: var(--ns-surface); }
+
+/* ---- auth event stream (folds auth.*) ------------------------------------- */
+.ns-authstream { border: 1px solid var(--ns-border); border-radius: var(--ns-radius-lg); background: var(--ns-card);
+  box-shadow: var(--ns-shadow-sm); overflow: hidden; }
+.ns-authstream__head { display: grid; gap: 2px; padding: var(--ns-space-3) var(--ns-space-5);
+  border-bottom: 1px solid var(--ns-border); }
+.ns-authstream__feed { padding: var(--ns-space-3) var(--ns-space-5); display: grid; gap: 0;
+  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); column-gap: var(--ns-space-5); }
+
+/* ---- responsive ----------------------------------------------------------- */
+@media (max-width: 1180px) {
+  .ns-authhead { grid-template-columns: 1fr 1fr; }
+  .ns-authhead__cell:nth-child(3) { padding-left: 0; border-left: 0; }
+  .ns-authhead__cell { border-top: 1px solid var(--ns-border); padding-top: var(--ns-space-3); }
+  .ns-authhead__cell--hero, .ns-authhead__cell:nth-child(2) { border-top: 0; padding-top: 0; }
+  .ns-authhead__cell:nth-child(2) { padding-left: var(--ns-space-4); border-left: 1px solid var(--ns-border); }
+}
+@media (max-width: 900px) {
+  .ns-authgrid { grid-template-columns: 1fr; }
+  .ns-authdetail { display: none; } /* detail moves to bottom sheet on tap */
+}
+@media (max-width: 640px) {
+  .ns-authhead { grid-template-columns: 1fr; }
+  .ns-authhead__cell { padding-left: 0; border-left: 0; padding-top: var(--ns-space-3); border-top: 1px solid var(--ns-border); }
+  .ns-authhead__cell--hero { padding-top: 0; border-top: 0; }
+  .ns-authcard__body { grid-template-columns: auto 1fr; }
+  .ns-authcard__right { grid-column: 1 / 3; justify-items: stretch; grid-template-columns: auto 1fr auto;
+    align-items: center; min-width: 0; margin-top: var(--ns-space-1); }
+  .ns-ttlbar { width: 100%; }
+  .ns-authcard__right .ns-badge { justify-self: start; }
+  .ns-auth__now { display: none; }
+  .ns-authbar__search { flex: 1 1 100%; }
+  .ns-authstream__feed { grid-template-columns: 1fr; }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+ * Pass V12 — EXTENSIONS (contribution-manifest console)
+ * Providers mount contributions into host surfaces. The segmented surface bar
+ * is the single chromatic signature; every supporting surface stays neutral.
+ * ═══════════════════════════════════════════════════════════════════════════ */
+
+/* Shared geometry buckets (0..20 → 0..100% and flex-grow 0..20). */
+.ns-w0{--wpct:0%;--wnum:0}.ns-w1{--wpct:5%;--wnum:1}.ns-w2{--wpct:10%;--wnum:2}
+.ns-w3{--wpct:15%;--wnum:3}.ns-w4{--wpct:20%;--wnum:4}.ns-w5{--wpct:25%;--wnum:5}
+.ns-w6{--wpct:30%;--wnum:6}.ns-w7{--wpct:35%;--wnum:7}.ns-w8{--wpct:40%;--wnum:8}
+.ns-w9{--wpct:45%;--wnum:9}.ns-w10{--wpct:50%;--wnum:10}.ns-w11{--wpct:55%;--wnum:11}
+.ns-w12{--wpct:60%;--wnum:12}.ns-w13{--wpct:65%;--wnum:13}.ns-w14{--wpct:70%;--wnum:14}
+.ns-w15{--wpct:75%;--wnum:15}.ns-w16{--wpct:80%;--wnum:16}.ns-w17{--wpct:85%;--wnum:17}
+.ns-w18{--wpct:90%;--wnum:18}.ns-w19{--wpct:95%;--wnum:19}.ns-w20{--wpct:100%;--wnum:20}
+
+.ns-extscreen {
+  --ext-panel: var(--ns-primary);
+  --ext-command: var(--ns-teal-5);
+  --ext-tool: var(--ns-amber-5);
+  display: grid;
+  gap: var(--ns-space-5);
+}
+[data-kind='panel'] { --ext-c: var(--ext-panel); }
+[data-kind='command'] { --ext-c: var(--ext-command); }
+[data-kind='tool'] { --ext-c: var(--ext-tool); }
+
+.ns-extscreen button:focus-visible {
+  outline: 2px solid var(--ns-ring);
+  outline-offset: 2px;
+}
+.ns-extseg__btn { min-width: 5.5rem; }
+
+/* Summary card: flat Card grammar with internal hairlines. */
+.ns-exthead {
+  display: grid;
+  grid-template-columns: minmax(11rem, .9fr) minmax(16rem, 1.45fr) minmax(12rem, 1fr) minmax(13rem, 1.05fr);
+  gap: 0;
+  background: var(--ns-card);
+  color: var(--ns-card-fg);
+  border-block: 1px solid var(--ns-border);
+}
+.ns-exthead__cell {
+  display: grid;
+  align-content: start;
+  gap: var(--ns-space-2);
+  min-width: 0;
+  padding: var(--ns-space-4) var(--ns-space-5);
+  border-left: 1px solid var(--ns-border);
+}
+.ns-exthead__cell:first-child { border-left: 0; }
+.ns-exthead__cell--hero { align-content: center; }
+.ns-exthead__hero-main { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-exthead__hero-num {
+  display: flex;
+  align-items: baseline;
+  gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xl);
+  font-weight: 600;
+  line-height: 1;
+  color: var(--ns-fg);
+}
+.ns-exthead__hero-unit,
+.ns-exthead__label {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: var(--ns-label-tracking);
+  color: var(--ns-muted-fg);
+}
+.ns-exthead__hero-sub {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  color: var(--ns-muted-fg);
+}
+
+/* The screen's one chromatic signature: contribution share by surface. */
+.ns-extchan {
+  display: flex;
+  gap: var(--ns-space-0-5);
+  height: var(--ns-space-5);
+  background: var(--ns-muted);
+}
+.ns-extchan__seg {
+  display: grid;
+  place-items: center;
+  flex-grow: var(--wnum, 1);
+  flex-basis: 0;
+  min-width: var(--ns-space-6);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: var(--ext-c);
+  cursor: pointer;
+  opacity: .76;
+  transition: opacity var(--ns-ease-fast);
+}
+.ns-extchan__seg:hover,
+.ns-extchan__seg[data-active='true'] { opacity: 1; }
+.ns-extchan__seg-n {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  font-weight: 600;
+  color: var(--ns-gray-12);
+}
+.ns-extchan__legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ns-space-1) var(--ns-space-3);
+}
+.ns-extchan__leg {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ns-space-1-5);
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+}
+.ns-extchan__leg b { color: var(--ns-fg); font-family: var(--ns-font-mono); }
+.ns-extchan__leg-dot {
+  width: var(--ns-space-2);
+  height: var(--ns-space-2);
+  border-radius: var(--ns-radius-sm);
+  background: var(--ext-c);
+  flex: none;
+}
+
+/* Enabled state is a count, not a meter. */
+.ns-extcoverage {
+  display: flex;
+  align-items: baseline;
+  gap: var(--ns-space-2);
+}
+.ns-extcoverage__ratio {
+  color: var(--ns-fg);
+  font: 600 var(--ns-text-xl)/1 var(--ns-font-mono);
+}
+.ns-extcoverage__label,
+.ns-extcoverage__disabled {
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+.ns-extcoverage__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  flex-wrap: wrap;
+}
+.ns-exthead__tiers { display: flex; flex-wrap: wrap; gap: var(--ns-space-2); }
+.ns-exttier,
+.ns-extprov__pip,
+.ns-extmount,
+.ns-extsurface-row__prov,
+.ns-extcontract__value {
+  color: var(--ns-muted-fg);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  font-weight: 500;
+  line-height: 1.2;
+  letter-spacing: .03em;
+  white-space: nowrap;
+}
+.ns-exttier b { color: var(--ns-fg); }
+.ns-exthead__cell--alert { background: var(--ns-card); }
+.ns-extcompat {
+  display: grid;
+  gap: var(--ns-space-1);
+  padding: var(--ns-space-2) 0;
+  border-top: 1px solid var(--ns-border);
+  border-bottom: 1px solid var(--ns-border);
+}
+.ns-extcompat__body { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-extcompat__head { font-size: var(--ns-text-2xs); font-weight: 600; color: var(--ns-fg); }
+.ns-extcompat__note { font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); line-height: var(--ns-leading-snug); }
+.ns-extcompat__host { font: var(--ns-text-3xs)/var(--ns-leading-snug) var(--ns-font-mono); color: var(--ns-muted-fg); }
+.ns-extcompat__host b { color: var(--ns-fg); }
+
+/* Provider filter rail: compact tabs, not metadata pills. */
+.ns-extfilters { display: flex; align-items: center; gap: var(--ns-space-3); flex-wrap: wrap; }
+.ns-extfilters__label {
+  font: 500 var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+  color: var(--ns-muted-fg);
+}
+.ns-extfilters__tabs {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-4);
+  border-bottom: 1px solid var(--ns-border);
+}
+.ns-extfilters__tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ns-space-1);
+  margin-bottom: calc(var(--ns-space-px) * -1);
+  padding: var(--ns-space-1-5) 0;
+  border: 0;
+  border-bottom: 1px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: var(--ns-muted-fg);
+  font: 500 var(--ns-text-2xs)/1.2 var(--ns-font-mono);
+  text-transform: uppercase;
+  letter-spacing: .06em;
+  cursor: pointer;
+}
+.ns-extfilters__tab:hover,
+.ns-extfilters__tab[data-state='active'] { color: var(--ns-fg); }
+.ns-extfilters__tab[data-state='active'] { border-bottom-color: var(--ns-fg); }
+.ns-extfilters__tab-n { font-weight: 600; }
+.ns-extfilters__count { font: var(--ns-text-2xs)/1.2 var(--ns-font-mono); color: var(--ns-muted-fg); }
+
+/* Provider roster + selected manifest. */
+.ns-extgrid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(20rem, .85fr);
+  gap: var(--ns-space-4);
+  align-items: start;
+}
+.ns-extroster {
+  display: grid;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--ns-card);
+  color: var(--ns-card-fg);
+  box-shadow: var(--ns-shadow-xs);
+}
+.ns-extroster__columns,
+.ns-extprov {
+  grid-template-columns: minmax(6.5rem, 1fr) minmax(7.5rem, 1.25fr) minmax(5.5rem, .75fr) minmax(4.5rem, .55fr) minmax(5rem, .65fr);
+  gap: var(--ns-space-3);
+  align-items: center;
+}
+.ns-extroster__columns {
+  display: grid;
+  padding: var(--ns-space-2) var(--ns-space-4);
+  background: var(--ns-surface);
+  color: var(--ns-muted-fg);
+  font: 500 var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+.ns-extprov {
+  display: grid;
+  width: 100%;
+  min-width: 0;
+  padding: var(--ns-space-2-5) var(--ns-space-4);
+  border: 0;
+  border-top: 1px solid var(--ns-border);
+  border-radius: 0;
+  background: transparent;
+  color: var(--ns-card-fg);
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  transition: background var(--ns-ease-fast);
+}
+.ns-extprov:hover,
+.ns-extprov[data-state='selected'] { background: var(--ns-surface); }
+.ns-extprov[data-disabled='true'] { opacity: .62; }
+.ns-extprov__identity { min-width: 0; }
+.ns-extprov__name-row { display: flex; align-items: center; gap: var(--ns-space-2); min-width: 0; }
+.ns-extprov__name { font: 600 var(--ns-text-sm)/1.2 var(--ns-font-mono); color: var(--ns-fg); }
+.ns-extprov__ver {
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+}
+.ns-extprov__status,
+.ns-extmanifest__status {
+  display: inline-flex;
+  align-items: center;
+  width: fit-content;
+  gap: var(--ns-space-1-5);
+  color: var(--ns-muted-fg);
+  font: 500 var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+.ns-extprov__status-dot {
+  width: var(--ns-space-1-5);
+  height: var(--ns-space-1-5);
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-fg);
+  flex: none;
+}
+.ns-extprov__status[data-en='false'] .ns-extprov__status-dot,
+.ns-extmanifest__status[data-en='false'] .ns-extprov__status-dot { background: var(--ns-muted-fg); }
+.ns-extprov__pips { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-extprov__pip + .ns-extprov__pip::before,
+.ns-extmount + .ns-extmount::before { content: "·"; margin-right: var(--ns-space-2); color: var(--ns-muted-fg); }
+.ns-extprov__trust,
+.ns-extprov__src {
+  min-width: 0;
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-2xs)/1.2 var(--ns-font-mono);
+  overflow-wrap: anywhere;
+}
+
+.ns-extmanifest {
+  position: sticky;
+  top: var(--ns-space-4);
+  display: grid;
+  align-content: start;
+  gap: var(--ns-space-3);
+  min-width: 0;
+  padding: var(--ns-space-3) 0 var(--ns-space-3) var(--ns-space-4);
+  background: var(--ns-card);
+  color: var(--ns-card-fg);
+  border-left: 1px solid var(--ns-border);
+}
+.ns-extmanifest__head {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--ns-space-3);
+  padding-bottom: var(--ns-space-3);
+  border-bottom: 1px solid var(--ns-border);
+}
+.ns-extmanifest__id { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-extmanifest__name-row { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-extmanifest__name { font: 600 var(--ns-text-base)/1.2 var(--ns-font-mono); color: var(--ns-fg); }
+.ns-extmanifest__ver {
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-2xs)/1.2 var(--ns-font-mono);
+}
+.ns-extmanifest__tier {
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-2xs)/1.2 var(--ns-font-mono);
+}
+.ns-extmanifest__sub { color: var(--ns-muted-fg); font-size: var(--ns-text-2xs); }
+.ns-extmanifest__kv {
+  display: grid;
+  border-top: 1px solid var(--ns-border);
+  border-bottom: 1px solid var(--ns-border);
+}
+.ns-extmanifest__kv-row {
+  display: grid;
+  grid-template-columns: 7.5rem minmax(0, 1fr);
+  gap: var(--ns-space-3);
+  padding: var(--ns-space-1-5) var(--ns-space-2);
+  font-size: var(--ns-text-2xs);
+}
+.ns-extmanifest__kv-row + .ns-extmanifest__kv-row { border-top: 1px solid var(--ns-border); }
+.ns-extmanifest__kv-k,
+.ns-extmanifest__section-label {
+  color: var(--ns-muted-fg);
+  font: 500 var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+.ns-extmanifest__kv-v {
+  min-width: 0;
+  color: var(--ns-fg);
+  font-family: var(--ns-font-mono);
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+.ns-extmanifest__kv-v[data-tone] { color: var(--ns-fg); }
+.ns-extmanifest__groups { display: grid; gap: var(--ns-space-2); }
+.ns-extgroup { overflow: hidden; border-top: 1px solid var(--ns-border); }
+.ns-extgroup__head {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-1-5) var(--ns-space-2);
+  border-bottom: 1px solid var(--ns-border);
+}
+.ns-extgroup__title {
+  color: var(--ns-fg);
+  font: 500 var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+.ns-extgroup__n {
+  margin-left: auto;
+  color: var(--ns-muted-fg);
+  font: 500 var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+}
+.ns-extgroup__items { display: grid; }
+.ns-extcontrib {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--ns-space-2);
+  min-height: var(--ns-space-11);
+  padding: var(--ns-space-1-5) var(--ns-space-2);
+}
+.ns-extcontrib + .ns-extcontrib { border-top: 1px solid var(--ns-border); }
+.ns-extcontrib__main { display: flex; align-items: baseline; gap: var(--ns-space-2); min-width: 0; }
+.ns-extcontrib__title { flex: none; color: var(--ns-fg); font-size: var(--ns-text-xs); font-weight: 600; }
+.ns-extcontrib__path,
+.ns-extcontrib__meta {
+  min-width: 0;
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+  overflow-wrap: anywhere;
+}
+.ns-extcontrib__perm {
+  max-width: 8rem;
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-3xs)/var(--ns-leading-snug) var(--ns-font-mono);
+  text-align: right;
+}
+.ns-extmounts { display: flex; flex-wrap: wrap; gap: 0; }
+.ns-extmanifest__actions {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--ns-space-2);
+  padding-top: var(--ns-space-1);
+}
+
+/* Surface composition: host-surface groups with dense contribution records. */
+.ns-extlanes {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
+  gap: var(--ns-space-3);
+  align-items: stretch;
+}
+.ns-extlane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: var(--ns-space-4);
+  background: var(--ns-card);
+  color: var(--ns-card-fg);
+  box-shadow: var(--ns-shadow-xs);
+}
+.ns-extlane[data-kind='panel'] { grid-column: 1; grid-row: 1 / span 2; }
+.ns-extlane[data-kind='command'] { grid-column: 2; grid-row: 1; }
+.ns-extlane[data-kind='tool'] { grid-column: 2; grid-row: 2; }
+.ns-extlane__head {
+  display: grid;
+  gap: var(--ns-space-1-5);
+  padding-bottom: var(--ns-space-3);
+  border-bottom: 1px solid var(--ns-border);
+}
+.ns-extlane__title-row,
+.ns-extlane__context {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ns-space-3);
+  min-width: 0;
+}
+.ns-extlane__title { color: var(--ns-fg); font-size: var(--ns-text-sm); font-weight: 600; }
+.ns-extlane__n {
+  margin-left: auto;
+  color: var(--ns-muted-fg);
+  font: 600 var(--ns-text-xs)/1.2 var(--ns-font-mono);
+}
+.ns-extlane__mounts,
+.ns-extlane__summary {
+  min-width: 0;
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+  overflow-wrap: anywhere;
+}
+.ns-extlane__summary { text-align: right; }
+.ns-extlane__items { display: grid; }
+.ns-extsurface-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1.3fr) auto minmax(7rem, .8fr);
+  align-items: center;
+  gap: var(--ns-space-3);
+  min-width: 0;
+  padding: var(--ns-space-2-5) var(--ns-space-2);
+}
+.ns-extsurface-row + .ns-extsurface-row { border-top: 1px solid var(--ns-border); }
+.ns-extsurface-row__identity { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-extsurface-row__title { color: var(--ns-fg); font: 600 var(--ns-text-xs)/1.2 var(--ns-font-mono); }
+.ns-extsurface-row__path {
+  min-width: 0;
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+  overflow-wrap: anywhere;
+}
+.ns-extsurface-row__perm {
+  min-width: 0;
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-3xs)/var(--ns-leading-snug) var(--ns-font-mono);
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+/* Available extensions are registry records, not a card grid. */
+.ns-extavail {
+  display: grid;
+  background: var(--ns-card);
+  color: var(--ns-card-fg);
+  box-shadow: var(--ns-shadow-xs);
+  overflow: hidden;
+}
+.ns-extavail__columns,
+.ns-extavailrow {
+  grid-template-columns: minmax(14rem, 1.75fr) minmax(9rem, .9fr) minmax(8rem, .8fr) minmax(14rem, 1.15fr);
+  gap: var(--ns-space-4);
+  align-items: center;
+}
+.ns-extavail__columns {
+  display: grid;
+  padding: var(--ns-space-2) var(--ns-space-5);
+  background: var(--ns-surface);
+  color: var(--ns-muted-fg);
+  font: 500 var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+.ns-extavailrow {
+  display: grid;
+  min-width: 0;
+  padding: var(--ns-space-3) var(--ns-space-5);
+  border-top: 1px solid var(--ns-border);
+}
+.ns-extavailrow__id { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-extavailrow__name-row { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-extavailrow__name { color: var(--ns-fg); font: 600 var(--ns-text-sm)/1.2 var(--ns-font-mono); }
+.ns-extavailrow__publisher {
+  color: var(--ns-muted-fg);
+  font: var(--ns-text-3xs)/1.2 var(--ns-font-mono);
+}
+.ns-extavailrow__desc {
+  color: var(--ns-muted-fg);
+  font-size: var(--ns-text-xs);
+  line-height: var(--ns-leading-normal);
+  overflow-wrap: anywhere;
+}
+.ns-extcontract {
+  display: grid;
+  gap: var(--ns-space-2);
+}
+.ns-extcontract__fact {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ns-space-2);
+  font-size: var(--ns-text-3xs);
+}
+.ns-extcontract__label {
+  color: var(--ns-muted-fg);
+  font-family: var(--ns-font-mono);
+  text-transform: uppercase;
+  letter-spacing: .08em;
+}
+.ns-extavailrow__adds { display: flex; gap: var(--ns-space-1-5); flex-wrap: wrap; }
+.ns-extavailrow__action { display: grid; gap: var(--ns-space-2); min-width: 0; }
+.ns-extavailrow__hold {
+  padding: var(--ns-space-2) var(--ns-space-3);
+  border-radius: var(--ns-radius-md);
+  background: var(--ns-warning-subtle);
+  color: var(--ns-fg);
+  font-size: var(--ns-text-2xs);
+  line-height: var(--ns-leading-snug);
+}
+.ns-extavailrow__action-line {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ns-space-3);
+  flex-wrap: wrap;
+}
+
+@media (max-width: 1180px) {
+  .ns-exthead { grid-template-columns: 1fr 1fr; }
+  .ns-exthead__cell:nth-child(3),
+  .ns-exthead__cell:nth-child(4) { border-top: 1px solid var(--ns-border); }
+  .ns-exthead__cell:nth-child(3) { border-left: 0; }
+}
+@media (max-width: 1023px) {
+  .ns-extgrid { grid-template-columns: 1fr; }
+  .ns-extmanifest { display: none; }
+}
+@media (max-width: 720px) {
+  .ns-extscreen { gap: var(--ns-space-4); }
+  .ns-exthead { grid-template-columns: 1fr 1fr; }
+  .ns-exthead__cell {
+    padding: var(--ns-space-3);
+  }
+  .ns-exthead__cell:nth-child(1) { grid-column: 1; grid-row: 1; border-top: 0; border-left: 0; }
+  .ns-exthead__cell:nth-child(2) { grid-column: 1; grid-row: 2; border-top: 1px solid var(--ns-border); border-left: 0; }
+  .ns-exthead__cell:nth-child(3) { grid-column: 2; grid-row: 1; border-top: 0; border-left: 1px solid var(--ns-border); }
+  .ns-exthead__cell:nth-child(4) { grid-column: 2; grid-row: 2; border-top: 1px solid var(--ns-border); border-left: 1px solid var(--ns-border); }
+  .ns-exthead__hero-sub { font-size: var(--ns-text-3xs); }
+  .ns-extcoverage__ratio { font-size: var(--ns-text-lg); }
+  .ns-extcoverage__meta { gap: var(--ns-space-1); }
+  .ns-extchan__legend { gap: var(--ns-space-1); }
+  .ns-extchan__leg { gap: var(--ns-space-1); }
+  .ns-extcompat { padding: var(--ns-space-1) 0; }
+  .ns-extfilters { align-items: flex-start; }
+  .ns-extfilters__tabs { order: 3; width: 100%; justify-content: space-between; gap: var(--ns-space-2); }
+  .ns-extfilters__count { margin-left: auto; }
+  .ns-extroster__columns { display: none; }
+  .ns-extprov {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      "identity status"
+      "contrib contrib"
+      "trust source";
+    gap: var(--ns-space-2) var(--ns-space-3);
+    padding: var(--ns-space-2-5) var(--ns-space-3);
+  }
+  .ns-extprov__identity { grid-area: identity; }
+  .ns-extprov__pips { grid-area: contrib; }
+  .ns-extprov__trust { grid-area: trust; }
+  .ns-extprov__src { grid-area: source; text-align: right; }
+  .ns-extprov__status { grid-area: status; }
+  .ns-extlanes { grid-template-columns: 1fr; }
+  .ns-extlane[data-kind='panel'],
+  .ns-extlane[data-kind='command'],
+  .ns-extlane[data-kind='tool'] { grid-column: 1; grid-row: auto; }
+  .ns-extlane__context { align-items: flex-start; }
+  .ns-extsurface-row {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "identity provider" "permission permission";
+  }
+  .ns-extsurface-row__identity { grid-area: identity; }
+  .ns-extsurface-row__prov { grid-area: provider; }
+  .ns-extsurface-row__perm { grid-area: permission; text-align: left; }
+  .ns-extavail__columns { display: none; }
+  .ns-extavailrow {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: "identity identity" "contract contributions" "action action";
+    gap: var(--ns-space-2) var(--ns-space-3);
+    padding: var(--ns-space-3);
+  }
+  .ns-extavailrow__id { grid-area: identity; }
+  .ns-extcontract { grid-area: contract; }
+  .ns-extavailrow__adds { grid-area: contributions; align-self: center; justify-content: flex-end; }
+  .ns-extavailrow__action { grid-area: action; }
+  .ns-extavailrow__action-line { justify-content: space-between; }
+  .ns-extcontrib__main { display: grid; gap: var(--ns-space-1); }
+  .ns-extmanifest__actions { grid-template-columns: 1fr; }
+}
+/* ============================================================================
+   S3 — RUNTIME CONFIG · the live override STORE (write side)
+   Bespoke to the override store: header composite (micro-viz, not number cards),
+   the live override SET as one dense editable-looking table, a store revision
+   chain with rollback, and an override detail drawer. Distinct from Config
+   Resolution's read-side precedence waterfall. NS One tokens only.
+   ========================================================================== */
+
+/* --- layout: hero store + revisions left, live feed right --- */
+.ns-runtime__grid { display: grid; gap: var(--ns-space-5); align-items: start;
+  grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); }
+.ns-runtime__main { display: grid; gap: var(--ns-space-5); min-width: 0; }
+.ns-runtime__aside { display: grid; gap: var(--ns-space-5); min-width: 0; align-content: start; }
+
+/* --- header composite: override-store micro-viz --- */
+.ns-rchead { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: var(--ns-space-3);
+  margin-bottom: var(--ns-space-5); padding: var(--ns-space-4) var(--ns-space-5);
+  background: var(--ns-card); border: 1px solid color-mix(in oklab, var(--ns-border-strong) 60%, transparent);
+  border-radius: 12px; box-shadow: var(--ns-shadow-sm); }
+[data-theme='dark'] .ns-rchead { box-shadow: var(--ns-shadow-sm), inset 0 1px 0 color-mix(in oklab, #fff 4%, transparent); }
+.ns-rchead__cell { display: grid; gap: var(--ns-space-2); align-content: start; min-width: 0;
+  padding-left: var(--ns-space-4); border-left: 1px solid var(--ns-border); }
+.ns-rchead__cell:first-child { padding-left: 0; border-left: 0; }
+.ns-rchead__label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.07em; color: var(--ns-muted-fg); }
+.ns-rchead__sub { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-rchead__cell--total { grid-template-columns: auto 1fr; grid-template-rows: auto auto;
+  align-items: center; column-gap: var(--ns-space-3); row-gap: var(--ns-space-2); }
+.ns-rchead__glyph { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center;
+  border: 1px solid var(--ns-primary-border); border-radius: 11px;
+  background: var(--ns-primary-subtle); color: var(--ns-primary); font-size: var(--ns-text-xl); }
+.ns-rchead__main { display: grid; gap: 1px; align-content: center; }
+.ns-rchead__value { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xl); line-height: 1;
+  font-weight: 700; color: var(--ns-fg); font-variant-numeric: tabular-nums; }
+.ns-rchead__cell--total .ns-rchead__label { grid-column: 2; }
+.ns-rchead__pips { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: var(--ns-space-1-5); }
+.ns-rchead__pip { display: inline-flex; align-items: center; gap: 3px; padding: 1px var(--ns-space-1-5);
+  border-radius: var(--ns-radius-sm); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs);
+  font-weight: 600; border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-muted-fg); }
+.ns-rchead__pip[data-tone='primary'] { color: var(--ns-primary); border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); }
+.ns-rchead__pip[data-tone='warning'] { color: var(--ns-warning); border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); }
+.ns-rchead__pip-g { font-size: 0.72em; opacity: 0.85; }
+/* diverging-from-base ratio meter */
+.ns-rchead__ratio { position: relative; height: 30px; border-radius: var(--ns-radius-md);
+  border: 1px solid var(--ns-border); overflow: hidden;
+  background: repeating-linear-gradient(135deg,
+    color-mix(in oklab, var(--ns-muted) 40%, transparent) 0 6px,
+    color-mix(in oklab, var(--ns-muted) 18%, transparent) 6px 12px); }
+.ns-rchead__ratiofill { position: absolute; inset: 0 auto 0 0; border-right: 1px solid var(--ns-primary-border);
+  background: color-mix(in oklab, var(--ns-primary-subtle) 85%, transparent); }
+.ns-rchead__ratiopct { position: absolute; inset: 0; display: flex; align-items: center; gap: 2px;
+  padding-inline: var(--ns-space-2-5); font-family: var(--ns-font-mono); font-size: var(--ns-text-sm);
+  font-weight: 700; color: var(--ns-fg); font-variant-numeric: tabular-nums; }
+.ns-rchead__ratioof { font-size: var(--ns-text-2xs); font-weight: 500; color: var(--ns-muted-fg); }
+.ns-rchead__ratiofill--w0 { width: 0; } .ns-rchead__ratiofill--w1 { width: 5%; }
+.ns-rchead__ratiofill--w2 { width: 10%; } .ns-rchead__ratiofill--w3 { width: 15%; }
+.ns-rchead__ratiofill--w4 { width: 20%; } .ns-rchead__ratiofill--w5 { width: 25%; }
+.ns-rchead__ratiofill--w6 { width: 30%; } .ns-rchead__ratiofill--w7 { width: 35%; }
+.ns-rchead__ratiofill--w8 { width: 40%; } .ns-rchead__ratiofill--w9 { width: 45%; }
+.ns-rchead__ratiofill--w10 { width: 50%; } .ns-rchead__ratiofill--w11 { width: 55%; }
+.ns-rchead__ratiofill--w12 { width: 60%; } .ns-rchead__ratiofill--w20 { width: 100%; }
+/* last revision */
+.ns-rchead__rev { display: flex; align-items: center; gap: var(--ns-space-2); }
+.ns-rchead__revtag { display: inline-flex; align-items: center; padding: 2px var(--ns-space-2);
+  border: 1px solid var(--ns-primary-border); border-radius: var(--ns-radius-full);
+  background: var(--ns-primary-subtle); color: var(--ns-primary);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 700; }
+.ns-rchead__revmeta { display: grid; gap: 0; min-width: 0; }
+.ns-rchead__revby { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600; color: var(--ns-fg); }
+.ns-rchead__revat { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg); }
+/* hot-reload health */
+.ns-rchead__reload { display: inline-flex; align-items: center; gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); font-weight: 700; color: var(--ns-fg); }
+.ns-rchead__reload-dot { width: 9px; height: 9px; border-radius: var(--ns-radius-full);
+  background: var(--ns-success); box-shadow: 0 0 0 3px var(--ns-success-subtle); }
+.ns-rchead__reload[data-tone='warning'] .ns-rchead__reload-dot { background: var(--ns-warning); box-shadow: 0 0 0 3px var(--ns-warning-subtle); }
+.ns-rchead__reload-bar { display: flex; height: 6px; border-radius: var(--ns-radius-full); overflow: hidden;
+  background: var(--ns-muted); border: 1px solid var(--ns-border); }
+.ns-rchead__reload-live { background: var(--ns-success); }
+.ns-rchead__reload-pend { background: var(--ns-warning); }
+
+/* --- HERO: live override set (one dense store table) --- */
+.ns-ovstore { overflow: hidden; }
+.ns-ovstore__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-3);
+  padding: var(--ns-space-4) var(--ns-space-5); border-bottom: 1px solid var(--ns-border); }
+.ns-ovstore__head-l { display: grid; gap: 2px; }
+.ns-ovstore__hint { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-ovstore__cols { display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.25fr) minmax(0, 1fr) auto auto;
+  gap: var(--ns-space-3); align-items: center;
+  padding: var(--ns-space-2) var(--ns-space-5); border-bottom: 1px solid var(--ns-border);
+  background: var(--ns-surface); font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-ovstore__body { display: flex; flex-direction: column; }
+.ns-ovrow { display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.25fr) minmax(0, 1fr) auto auto;
+  gap: var(--ns-space-3); align-items: center;
+  padding: var(--ns-space-1-5) var(--ns-space-5);
+  border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent);
+  border-left: 2px solid transparent; transition: background 120ms ease, border-color 120ms ease; }
+.ns-ovrow:last-child { border-bottom: 0; }
+.ns-ovrow:hover { background: color-mix(in oklab, var(--ns-fg) 3%, transparent); }
+.ns-ovrow[data-sel='sel'] { background: var(--ns-primary-subtle); border-left-color: var(--ns-primary); }
+.ns-ovrow__key { display: inline-flex; align-items: center; gap: var(--ns-space-2); min-width: 0;
+  border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left; font: inherit; }
+.ns-ovrow__glyph { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none;
+  border-radius: var(--ns-radius-sm); font-size: var(--ns-text-xs);
+  border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-muted-fg); }
+.ns-ovrow__glyph[data-tone='primary'] { color: var(--ns-primary); border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); }
+.ns-ovrow__glyph[data-tone='warning'] { color: var(--ns-warning); border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); }
+.ns-ovrow__keytext { font-family: var(--ns-font-mono); font-size: var(--ns-text-sm); color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-ovrow__key:hover .ns-ovrow__keytext { color: var(--ns-primary); }
+.ns-ovrow__val { display: inline-flex; align-items: center; gap: var(--ns-space-1-5); min-width: 0;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); }
+.ns-ovrow__base { color: var(--ns-muted-fg); text-decoration: line-through;
+  text-decoration-color: color-mix(in oklab, var(--ns-muted-fg) 55%, transparent); }
+.ns-ovrow__arrow { color: var(--ns-muted-fg); }
+.ns-ovstore__val { font-weight: 600; color: var(--ns-fg); }
+.ns-ovval--num { color: var(--ns-primary); }
+.ns-ovval--off { color: var(--ns-warning); }
+.ns-ovrow__prov { display: grid; gap: 0; min-width: 0; line-height: 1.28; }
+.ns-ovrow__by { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600; color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-ovrow__at { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-ovrow__rl { display: inline-flex; align-items: center; gap: 4px; padding: 1px var(--ns-space-2);
+  border-radius: var(--ns-radius-full); font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
+  border: 1px solid var(--ns-success-border); background: var(--ns-success-subtle); color: var(--ns-success); white-space: nowrap; }
+.ns-ovrow__rl::before { content: ''; width: 5px; height: 5px; border-radius: var(--ns-radius-full); background: currentColor; }
+.ns-ovrow__rl[data-state='pending'] { border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-ovrow__act { justify-self: end; }
+.ns-empty-state--ov { display: grid; gap: 2px; }
+
+/* --- revision history — store revision chain w/ rollback --- */
+.ns-revchain { display: flex; flex-direction: column; }
+.ns-revchain__step { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--ns-space-3); padding: var(--ns-space-2-5) 0; }
+.ns-revchain__step::before { content: ''; position: absolute; left: 12px; top: 26px; bottom: -4px;
+  width: 1px; background: var(--ns-border); }
+.ns-revchain__step:last-child::before { display: none; }
+.ns-revchain__tag { display: inline-flex; align-items: center; justify-content: center; align-self: start;
+  min-width: 25px; height: 25px; padding-inline: var(--ns-space-1-5);
+  border: 1px solid var(--ns-border-strong); border-radius: var(--ns-radius-full); background: var(--ns-bg);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); font-weight: 600; color: var(--ns-muted-fg); flex: none; z-index: 1; }
+.ns-revchain__tag[data-state='current'] { border-color: var(--ns-primary); background: var(--ns-primary-subtle); color: var(--ns-primary); }
+.ns-revchain__main { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-revchain__titlerow { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap; }
+.ns-revchain__title { font-size: var(--ns-text-sm); font-weight: 600; color: var(--ns-fg); }
+.ns-revchain__meta { display: flex; align-items: center; gap: var(--ns-space-1-5); flex-wrap: wrap;
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-revchain__by { color: var(--ns-fg); font-weight: 600; }
+.ns-revchain__sep { opacity: 0.5; }
+.ns-revchain__pips { display: inline-flex; gap: 2px; margin-left: 2px; }
+.ns-revchain__pip { width: 5px; height: 5px; border-radius: var(--ns-radius-sm); background: var(--ns-primary); opacity: 0.55; }
+.ns-revchain__acts { display: flex; align-items: center; gap: var(--ns-space-2); flex-wrap: wrap;
+  margin-top: var(--ns-space-1); }
+.ns-revchain__roll span { font-size: 0.9em; }
+
+/* --- override detail drawer (→ shared sheet / mobile bottom sheet) --- */
+.ns-ovsheet__hero { display: flex; align-items: center; gap: var(--ns-space-3); }
+.ns-ovsheet__glyph { display: inline-grid; place-items: center; width: 46px; height: 46px; flex: none;
+  border-radius: var(--ns-radius-lg); font-size: var(--ns-text-xl);
+  border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-muted-fg); }
+.ns-ovsheet__glyph[data-tone='primary'] { color: var(--ns-primary); border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); }
+.ns-ovsheet__glyph[data-tone='warning'] { color: var(--ns-warning); border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); }
+.ns-ovsheet__hero-main { display: grid; gap: var(--ns-space-1); min-width: 0; }
+.ns-ovsheet__eyebrow { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs);
+  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-ovsheet__transition { display: inline-flex; align-items: center; gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-lg); }
+.ns-ovsheet__base { color: var(--ns-muted-fg); text-decoration: line-through;
+  text-decoration-color: color-mix(in oklab, var(--ns-muted-fg) 55%, transparent); font-size: var(--ns-text-base); }
+.ns-ovsheet__arrow { color: var(--ns-muted-fg); }
+.ns-ovsheet__val { font-weight: 700; color: var(--ns-primary); }
+.ns-ovsheet__val[data-tone='warning'] { color: var(--ns-warning); }
+.ns-ovsheet__reload { display: inline-flex; align-items: center; gap: var(--ns-space-2); width: fit-content;
+  padding: var(--ns-space-1) var(--ns-space-2-5); border-radius: var(--ns-radius-full);
+  border: 1px solid var(--ns-success-border); background: var(--ns-success-subtle); color: var(--ns-success);
+  font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600; }
+.ns-ovsheet__reload[data-state='pending'] { border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-ovsheet__reload-dot { width: 6px; height: 6px; border-radius: var(--ns-radius-full); background: currentColor; }
+.ns-ovsheet__note { margin: 0; font-size: var(--ns-text-sm); line-height: var(--ns-leading-relaxed); color: var(--ns-muted-fg); }
+
+/* --- denser live feed (tighter rows so the right column starts compact) --- */
+.ns-activity-feed--dense { gap: var(--ns-space-2); }
+.ns-activity-feed--dense .ns-activity-feed__item { padding-block: 2px; }
+.ns-activity-feed--dense .ns-activity-feed__body { gap: 0; line-height: 1.3; }
+.ns-activity-feed--dense .ns-activity-feed__text { font-size: var(--ns-text-xs); }
+.ns-activity-feed--dense .ns-activity-feed__time { font-size: var(--ns-text-3xs); }
+
+/* --- aside: pending hot-reloads panel (overrides awaiting a restart) --- */
+.ns-hotreload__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ns-space-2);
+  padding: var(--ns-space-3) var(--ns-space-4); border-bottom: 1px solid var(--ns-border); }
+.ns-hotreload__head-l { display: inline-flex; align-items: center; gap: var(--ns-space-2); min-width: 0; }
+.ns-hotreload__dot { width: 8px; height: 8px; border-radius: var(--ns-radius-full); flex: none;
+  background: var(--ns-warning); box-shadow: 0 0 0 3px var(--ns-warning-subtle); }
+.ns-hotreload__count { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); font-weight: 600;
+  color: var(--ns-warning); white-space: nowrap; }
+.ns-hotreload__body { display: flex; flex-direction: column; }
+.ns-hotrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
+  gap: var(--ns-space-2-5); padding: var(--ns-space-2-5) var(--ns-space-4);
+  border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent); }
+.ns-hotrow:last-child { border-bottom: 0; }
+.ns-hotrow__glyph { display: inline-grid; place-items: center; width: 24px; height: 24px; flex: none;
+  border-radius: var(--ns-radius-sm); font-size: var(--ns-text-xs);
+  border: 1px solid var(--ns-warning-border); background: var(--ns-warning-subtle); color: var(--ns-warning); }
+.ns-hotrow__glyph[data-tone='primary'] { border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); color: var(--ns-primary); }
+.ns-hotrow__main { display: grid; gap: 1px; min-width: 0; }
+.ns-hotrow__key { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); font-weight: 600; color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-hotrow__note { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-hotrow__act { flex: none; white-space: nowrap; }
+.ns-hotrow__act span { font-size: 0.9em; }
+.ns-hotreload__clean { display: flex; align-items: center; gap: var(--ns-space-2);
+  padding: var(--ns-space-3) var(--ns-space-4); font-size: var(--ns-text-xs); color: var(--ns-muted-fg); }
+.ns-hotreload__clean-glyph { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none;
+  border-radius: var(--ns-radius-full); font-size: 0.7em; color: var(--ns-success);
+  border: 1px solid var(--ns-success-border); background: var(--ns-success-subtle); }
+
+/* --- aside: change authors panel (operators + drift by type) --- */
+.ns-authors__head { display: grid; gap: 2px; padding: var(--ns-space-3) var(--ns-space-4);
+  border-bottom: 1px solid var(--ns-border); }
+.ns-authors__hint { font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs); color: var(--ns-muted-fg); }
+.ns-authors__body { display: flex; flex-direction: column; }
+.ns-authorrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
+  gap: var(--ns-space-2-5); padding: var(--ns-space-2) var(--ns-space-4);
+  border-bottom: 1px solid color-mix(in oklab, var(--ns-border) 55%, transparent); }
+.ns-authorrow:last-child { border-bottom: 0; }
+.ns-authorrow__avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
+  border-radius: var(--ns-radius-full); font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  font-weight: 700; letter-spacing: 0.02em; color: var(--ns-primary);
+  border: 1px solid var(--ns-primary-border); background: var(--ns-primary-subtle); }
+.ns-authorrow__main { display: grid; gap: 0; min-width: 0; line-height: 1.28; }
+.ns-authorrow__by { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); font-weight: 600; color: var(--ns-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-authorrow__meta { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs); color: var(--ns-muted-fg);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-authorrow__stats { display: inline-flex; gap: var(--ns-space-1-5); flex: none; }
+.ns-authorrow__stat { display: grid; justify-items: center; gap: 0; min-width: 30px;
+  padding: 2px var(--ns-space-1-5); border-radius: var(--ns-radius-sm);
+  border: 1px solid var(--ns-border); background: var(--ns-surface); }
+.ns-authorrow__stat-n { font-family: var(--ns-font-mono); font-size: var(--ns-text-xs); font-weight: 700; color: var(--ns-fg); line-height: 1; }
+.ns-authorrow__stat-l { font-family: var(--ns-font-mono); font-size: 0.5625rem; text-transform: uppercase;
+  letter-spacing: 0.05em; color: var(--ns-muted-fg); }
+.ns-authors__drift { display: grid; gap: var(--ns-space-1-5); padding: var(--ns-space-2-5) var(--ns-space-4) var(--ns-space-3);
+  border-top: 1px solid var(--ns-border); background: color-mix(in oklab, var(--ns-surface) 60%, transparent); }
+.ns-authors__drift-label { font-family: var(--ns-font-mono); font-size: var(--ns-text-3xs);
+  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ns-muted-fg); }
+.ns-authors__drift-row { display: flex; flex-wrap: wrap; gap: var(--ns-space-1-5); }
+.ns-driftchip { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--ns-space-2);
+  border-radius: var(--ns-radius-full); font-family: var(--ns-font-mono); font-size: var(--ns-text-2xs);
+  border: 1px solid var(--ns-border); background: var(--ns-surface); color: var(--ns-muted-fg); }
+.ns-driftchip[data-tone='primary'] { color: var(--ns-primary); border-color: var(--ns-primary-border); background: var(--ns-primary-subtle); }
+.ns-driftchip[data-tone='warning'] { color: var(--ns-warning); border-color: var(--ns-warning-border); background: var(--ns-warning-subtle); }
+.ns-driftchip__g { font-size: 0.85em; opacity: 0.9; }
+.ns-driftchip__n { font-weight: 700; color: var(--ns-fg); }
+.ns-driftchip[data-tone='primary'] .ns-driftchip__n { color: var(--ns-primary); }
+.ns-driftchip[data-tone='warning'] .ns-driftchip__n { color: var(--ns-warning); }
+.ns-driftchip__l { opacity: 0.85; }
+
+/* --- responsive: stack the store, then collapse dense rows into cards --- */
+@media (max-width: 940px) {
+  .ns-runtime__grid { grid-template-columns: 1fr; }
+  .ns-runtime__aside { position: static; }
+  .ns-rchead { grid-template-columns: 1fr 1fr; row-gap: var(--ns-space-4); }
+  .ns-rchead__cell:nth-child(3), .ns-rchead__cell:nth-child(4) { padding-left: 0; border-left: 0; }
+  .ns-rchead__cell:nth-child(2) { border-left: 0; padding-left: 0; }
+}
+@media (max-width: 640px) {
+  .ns-rchead { grid-template-columns: 1fr; }
+  .ns-rchead__cell { padding-left: 0; border-left: 0; }
+  /* override rows become stacked cards on mobile */
+  .ns-ovstore__cols { display: none; }
+  .ns-ovrow { grid-template-columns: 1fr auto; grid-template-areas: 'key rl' 'val val' 'prov act';
+    gap: var(--ns-space-1-5) var(--ns-space-2); align-items: center;
+    padding: var(--ns-space-3) var(--ns-space-4); }
+  .ns-ovrow__key { grid-area: key; }
+  .ns-ovrow__rl { grid-area: rl; justify-self: end; }
+  .ns-ovrow__val { grid-area: val; }
+  .ns-ovrow__prov { grid-area: prov; }
+  .ns-ovrow__act { grid-area: act; justify-self: end; }
+}
+
+/* ------------------------------------------------------------------ *
+ * Runtime Config re-fix — records first, one true proportion signature.
+ * ------------------------------------------------------------------ */
+
+/* Prototype design-system enhancements. These modifiers are intentionally
+ * generic and are tracked in _visual-reports/design-system-enhancement-log.md
+ * for later registry sync. */
+.ns-card--console {
+  background: var(--ns-card);
+  box-shadow:
+    var(--ns-shadow-xs),
+    inset 0 1px 0 var(--ns-border);
+}
+
+.ns-data-table--console .ns-data-table__row {
+  transition: background var(--ns-ease-normal), box-shadow var(--ns-ease-normal);
+}
+
+.ns-data-table--console .ns-data-table__row:hover {
+  background: color-mix(in srgb, var(--ns-fg) 3%, transparent);
+}
+
+.ns-property-list--compact {
+  display: grid;
+  gap: 0 var(--ns-space-5);
+}
+
+.ns-tabs--underline [role='tab'] {
+  min-height: var(--ns-space-8);
+}
+
+.ns-runtime .ns-lede {
+  max-width: 72ch;
+}
+
+.ns-runtime .ns-card {
+  border: 0;
+  border-radius: 0;
+  box-shadow: var(--ns-shadow-xs);
+}
+
+.ns-rchead {
+  grid-template-columns: 1.05fr 1.2fr 1fr 1fr;
+  gap: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  box-shadow: var(--ns-shadow-xs);
+}
+
+.ns-rchead__cell {
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-4) var(--ns-space-5);
+  border-left: 1px solid var(--ns-border);
+}
+
+.ns-rchead__cell:first-child {
+  padding-left: var(--ns-space-5);
+}
+
+.ns-rchead__cell--total {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto;
+  align-items: start;
+}
+
+.ns-rchead__cell--total .ns-rchead__label {
+  grid-column: 1;
+}
+
+.ns-rchead__glyph,
+.ns-rchead__pips,
+.ns-rchead__reload-dot,
+.ns-rchead__reload-bar,
+.ns-revchain__pips,
+.ns-ovrow__glyph,
+.ns-hotrow__glyph,
+.ns-hotreload__dot,
+.ns-driftchip__g,
+.ns-ovsheet__glyph,
+.ns-ovsheet__reload-dot {
+  display: none;
+}
+
+.ns-rchead__value {
+  font-size: var(--ns-text-2xl);
+}
+
+.ns-rchead__ratiohead {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-xs);
+  font-weight: 600;
+  color: var(--ns-fg);
+}
+
+.ns-rchead__proportion {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono);
+  color: var(--ns-fg);
+}
+
+.ns-rchead__proportion strong {
+  font-size: var(--ns-text-base);
+  font-weight: 700;
+}
+
+.ns-rchead__proportion span {
+  color: var(--ns-muted-fg);
+  font-size: var(--ns-text-2xs);
+}
+
+.ns-rchead__ratio {
+  height: auto;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.ns-rchead__ratio .ns-progress__track {
+  height: 0.325rem;
+  background: color-mix(in srgb, var(--ns-border-hover) 90%, transparent);
+}
+
+.ns-rchead__ratio .ns-progress__bar {
+  position: static;
+  display: block;
+  height: 100%;
+  border: 0;
+  border-radius: inherit;
+  background: var(--ns-primary);
+}
+
+.ns-rchead__revtag {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--ns-fg);
+}
+
+.ns-rchead__reload {
+  color: var(--ns-fg);
+}
+
+.ns-ovstore__head {
+  padding: var(--ns-space-4) var(--ns-space-5);
+}
+
+.ns-ovrow {
+  border-bottom: 0;
+  border-left: 0;
+}
+
+.ns-ovrow[data-sel='sel'] {
+  border-left-color: transparent;
+  background: color-mix(in srgb, var(--ns-primary) 10%, var(--ns-card));
+  box-shadow: inset 3px 0 0 var(--ns-primary);
+}
+
+.ns-ovrow__key:hover .ns-ovrow__keytext,
+.ns-ovval--num,
+.ns-ovval--off,
+.ns-ovsheet__val,
+.ns-ovsheet__val[data-tone='warning'] {
+  color: var(--ns-fg);
+}
+
+.ns-ovrow__keytext,
+.ns-ovrow__by,
+.ns-ovrow__at,
+.ns-hotrow__key,
+.ns-hotrow__note {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.ns-ovrow__rl,
+.ns-ovrow__rl[data-state='pending'],
+.ns-ovsheet__reload,
+.ns-ovsheet__reload[data-state='pending'] {
+  gap: 0;
+  width: fit-content;
+  padding: var(--ns-space-0-5) var(--ns-space-2);
+  border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-sm);
+  background: color-mix(in srgb, var(--ns-muted) 18%, transparent);
+  color: var(--ns-muted-fg);
+}
+
+.ns-ovrow__rl,
+.ns-ovrow__rl[data-state='pending'],
+.ns-ovsheet__reload,
+.ns-ovsheet__reload[data-state='pending'],
+.ns-revchain__current {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--ns-muted-fg);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  font-weight: 600;
+  line-height: 1.2;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ns-ovrow__rl::before {
+  display: none;
+}
+
+.ns-ovrow__act {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ns-fg);
+}
+
+.ns-ovrow__act:hover,
+.ns-ovrow__act:active {
+  border-color: var(--ns-border);
+  background: var(--ns-surface);
+  box-shadow: none;
+}
+
+.ns-revchain__tag,
+.ns-revchain__tag[data-state='current'] {
+  min-width: 2rem;
+  height: 1.5rem;
+  border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-sm);
+  background: var(--ns-surface);
+  color: var(--ns-muted-fg);
+}
+
+.ns-revchain__step::before {
+  left: 1rem;
+}
+
+.ns-hotreload__count {
+  color: var(--ns-muted-fg);
+}
+
+.ns-hotreload__notice {
+  margin: var(--ns-space-3) var(--ns-space-4);
+  border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-md);
+  color: var(--ns-fg);
+  font-size: var(--ns-text-xs);
+}
+
+.ns-hotrow {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.ns-hotrow__act,
+.ns-hotrow__act:hover,
+.ns-hotrow__act:active {
+  border-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  color: var(--ns-fg);
+}
+
+.ns-authorrow__avatar {
+  color: var(--ns-fg);
+  border-color: var(--ns-border);
+  background: var(--ns-muted);
+}
+
+.ns-authorrow {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.ns-authorrow__stats {
+  display: grid;
+  gap: 1px;
+  justify-items: end;
+}
+
+.ns-authorrow__stat {
+  display: inline-flex;
+  gap: var(--ns-space-1);
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
+.ns-authorrow__stat-n,
+.ns-authorrow__stat-l {
+  font-size: var(--ns-text-3xs);
+  line-height: 1.2;
+  color: var(--ns-muted-fg);
+}
+
+.ns-authorrow__stat-n {
+  color: var(--ns-fg);
+}
+
+.ns-authors__drift-row {
+  gap: var(--ns-space-3);
+}
+
+.ns-driftchip,
+.ns-driftchip[data-tone='primary'],
+.ns-driftchip[data-tone='warning'] {
+  gap: var(--ns-space-1);
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--ns-muted-fg);
+}
+
+.ns-driftchip__n,
+.ns-driftchip[data-tone='primary'] .ns-driftchip__n,
+.ns-driftchip[data-tone='warning'] .ns-driftchip__n {
+  color: var(--ns-fg);
+}
+
+.ns-ovsheet__hero {
+  padding-bottom: var(--ns-space-3);
+  border-bottom: 1px solid var(--ns-border);
+}
+
+.ns-rctabs {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-4);
+  align-self: stretch;
+}
+
+.ns-rctabs__tab {
+  position: relative;
+  align-self: stretch;
+  padding: var(--ns-space-2) 0;
+  border: 0;
+  background: transparent;
+  color: var(--ns-muted-fg);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  cursor: pointer;
+}
+
+.ns-rctabs__tab[data-state='active'] {
+  color: var(--ns-fg);
+}
+
+.ns-rctabs__tab[data-state='active']::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 2px;
+  background: var(--ns-primary);
+}
+
+.ns-rctabs__tab:focus-visible {
+  outline: 2px solid var(--ns-ring);
+  outline-offset: 2px;
+}
+
+.ns-rcevents__cols,
+.ns-rcevents__row {
+  display: grid;
+  grid-template-columns: 4.75rem minmax(0, 1.35fr) minmax(0, 1fr);
+  gap: var(--ns-space-3);
+  align-items: start;
+}
+
+.ns-rcevents__cols {
+  padding: var(--ns-space-2) var(--ns-space-4);
+  border-bottom: 1px solid var(--ns-border);
+  background: var(--ns-surface);
+  color: var(--ns-muted-fg);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.ns-rcevents__row {
+  padding: var(--ns-space-3) var(--ns-space-4);
+}
+
+.ns-rcevents__time,
+.ns-rcevents__target,
+.ns-rcevents__action {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  overflow-wrap: anywhere;
+}
+
+.ns-rcevents__time,
+.ns-rcevents__action {
+  color: var(--ns-muted-fg);
+}
+
+.ns-rcevents__target {
+  color: var(--ns-fg);
+}
+
+.ns-ovfacts {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0;
+  margin: 0;
+}
+
+.ns-ovfacts__row {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--ns-space-1);
+  padding: var(--ns-space-2-5) 0;
+  border-bottom: 1px solid var(--ns-border);
+}
+
+.ns-ovfacts__row:nth-child(odd) {
+  padding-right: var(--ns-space-4);
+}
+
+.ns-ovfacts__row:nth-child(even) {
+  padding-left: var(--ns-space-4);
+  border-left: 1px solid var(--ns-border);
+}
+
+.ns-ovfacts__row:first-child {
+  border-top: 1px solid var(--ns-border);
+}
+
+.ns-ovfacts__key,
+.ns-ovfacts__value {
+  margin: 0;
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-xs);
+  overflow-wrap: anywhere;
+}
+
+.ns-ovfacts__key {
+  color: var(--ns-muted-fg);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.ns-ovfacts__value {
+  color: var(--ns-fg);
+}
+
+.ns-ovsheet__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-3);
+}
+
+.ns-ovsheet__actions .ns-btn {
+  width: auto;
+}
+
+.ns-runtime .ns-diff__line[data-op='add'],
+.ns-runtime .ns-diff__line[data-op='del'] {
+  border-left-color: var(--ns-border-strong);
+  background: transparent;
+  color: var(--ns-fg);
+}
+
+.ns-runtime .ns-livedot,
+.ns-runtime .ns-activity-feed__marker,
+.ns-runtime .ns-activity-feed__item[data-tone] .ns-activity-feed__marker {
+  border-color: var(--ns-border);
+  background: var(--ns-border-strong);
+  color: var(--ns-muted-fg);
+}
+
+.ns-runtime .ns-livedot {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  color: var(--ns-muted-fg);
+}
+
+.ns-runtime .ns-livedot::before {
+  display: none;
+}
+
+[data-part='content'][data-side='right']:has(.ns-ovsheet),
+[data-part='content'][data-side='bottom']:has(.ns-ovsheet) {
+  border-radius: 0;
+  box-shadow: var(--ns-shadow-xs);
+}
+
+#ns-sheet-dialog:has(.ns-ovsheet)::backdrop {
+  background: color-mix(in srgb, var(--ns-overlay) 72%, transparent);
+  backdrop-filter: none;
+}
+
+@media (max-width: 940px) {
+  .ns-rchead {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .ns-rchead__cell,
+  .ns-rchead__cell:first-child,
+  .ns-rchead__cell:nth-child(2),
+  .ns-rchead__cell:nth-child(3),
+  .ns-rchead__cell:nth-child(4) {
+    padding: var(--ns-space-4);
+    border-left: 0;
+    border-top: 1px solid var(--ns-border);
+  }
+
+  .ns-rchead__cell:nth-child(-n + 2) {
+    border-top: 0;
+  }
+
+  .ns-rchead__cell:nth-child(even) {
+    border-left: 1px solid var(--ns-border);
+  }
+}
+
+@media (max-width: 640px) {
+  .ns-rchead {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .ns-rchead__value {
+    font-size: var(--ns-text-xl);
+  }
+
+  .ns-rchead__sub {
+    font-size: var(--ns-text-3xs);
+  }
+
+  .ns-ovrow {
+    border-bottom: 0;
+  }
+
+  .ns-ovrow__val::before {
+    content: 'value';
+    margin-right: var(--ns-space-1);
+    color: var(--ns-muted-fg);
+    font-size: var(--ns-text-3xs);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .ns-rcevents__cols,
+  .ns-rcevents__row {
+    grid-template-columns: 4rem minmax(0, 1fr);
+  }
+
+  .ns-rcevents__cols span:last-child,
+  .ns-rcevents__action {
+    grid-column: 2;
+  }
+
+  .ns-rcevents__cols span:last-child {
+    display: none;
+  }
+
+  .ns-ovsheet__actions {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .ns-ovsheet__actions .ns-btn {
+    width: 100%;
+  }
+
+  .ns-ovfacts {
+    grid-template-columns: 1fr;
+  }
+
+  .ns-ovfacts__row:nth-child(odd),
+  .ns-ovfacts__row:nth-child(even) {
+    padding-right: 0;
+    padding-left: 0;
+    border-left: 0;
+  }
+}
+
+/* Catalog re-fix cascade lock: keep the workbench grammar after legacy V10. */
+.ns-catalog .ns-cat2-meta { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:0; overflow:hidden; background:var(--ns-card); border:0; border-radius:0; box-shadow:var(--ns-shadow-xs); }
+.ns-catalog .ns-cat2-meta > span { display:grid; gap:var(--ns-space-1); padding:var(--ns-space-3) var(--ns-space-4); border-left:1px solid var(--ns-border); }
+.ns-catalog .ns-cat2-meta > span:first-child { border-left:0; }
+.ns-catalog .ns-catbar { display:grid; grid-template-columns:minmax(13rem,1fr) auto auto auto auto; gap:var(--ns-space-2); }
+.ns-catalog .ns-catchip { border-radius:var(--ns-radius-sm); text-transform:uppercase; }
+.ns-catalog .ns-catgrid { grid-template-columns:minmax(18rem,.8fr) minmax(0,1.55fr); gap:var(--ns-space-4); align-items:stretch; }
+.ns-catalog .ns-cat2-reg { gap:0; overflow:hidden; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-catalog .ns-cat2-reg .ns-catreg__group { gap:0; }
+.ns-catalog .ns-cat2-reg .ns-catreg__group + .ns-catreg__group { border-top:1px solid var(--ns-border); }
+.ns-catalog .ns-cat2-reg .ns-catreg__item { padding:var(--ns-space-2) var(--ns-space-3); border:0; border-top:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); box-shadow:none; transform:none; }
+.ns-catalog .ns-cat2-reg .ns-catreg__item:hover { background:var(--ns-surface); box-shadow:none; transform:none; }
+.ns-catalog .ns-cat2-reg .ns-catreg__item[data-state='selected'] { border:0; border-top:1px solid var(--ns-border); background:var(--ns-primary-subtle); box-shadow:inset 2px 0 0 var(--ns-primary); }
+.ns-catalog .ns-cat2-detail { gap:0; padding:0; border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-catalog .ns-cat2-detail > * + * { border-top:1px solid var(--ns-border); }
+.ns-catalog .ns-cat2-detail .ns-catsig { border-right:0; border-left:0; border-radius:0; }
+@media (max-width:760px) {
+  .ns-catalog .ns-cat2-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .ns-catalog .ns-cat2-meta > span:nth-child(odd) { border-left:0; }
+  .ns-catalog .ns-cat2-meta > span:nth-child(n+3) { border-top:1px solid var(--ns-border); }
+  .ns-catalog .ns-cat2-meta > span:last-child { grid-column:1/-1; }
+  .ns-catalog .ns-catgrid { grid-template-columns:1fr; }
+  .ns-catalog .ns-catbar { grid-template-columns:1fr; }
+}
+
+/* ========================================================================== *
+ * Config Resolution re-fix — precedence workbench (refs 13 + 21)
+ * ========================================================================== */
+.ns-config { --cfg-accent:var(--ns-primary); gap:var(--ns-space-4); }
+.ns-config .ns-cfghero { gap:var(--ns-space-3); }
+.ns-config .ns-cfghero__lead { padding-bottom:var(--ns-space-3); border-bottom:1px solid var(--ns-border); }
+.ns-config .ns-cfghero__strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; padding:0; overflow:hidden; background:var(--ns-card); border:0; border-radius:0; box-shadow:var(--ns-shadow-xs); }
+.ns-config .ns-cfghero__cell { gap:var(--ns-space-1); padding:var(--ns-space-3) var(--ns-space-4); border-left:1px solid var(--ns-border); }
+.ns-config .ns-cfghero__cell:first-child { border-left:0; }
+.ns-config .ns-cfghero__cell-value { color:var(--ns-fg); }
+.ns-config .ns-cfghero__cell:first-child .ns-cfghero__cell-value { color:var(--cfg-accent); }
+.ns-config .ns-cfghero__meter,
+.ns-config .ns-cfghero__pips,
+.ns-config .ns-cfghero__ticks,
+.ns-config .ns-cfghero__rank,
+.ns-config .ns-cfglayerchip__glyph,
+.ns-config .ns-cfgwater__glyph,
+.ns-config .ns-cfgtrail__glyph { display:none; }
+.ns-config .ns-cfghero__legend { margin:0; padding:var(--ns-space-2) var(--ns-space-4); border-top:1px solid var(--ns-border); background:color-mix(in srgb,var(--ns-card) 78%,var(--ns-surface)); }
+.ns-config .ns-cfglayerchip,
+.ns-config .ns-cfgnschip,
+.ns-config .ns-cfgwater__winpill,
+.ns-config .ns-cfgwater__shadowpill,
+.ns-config .ns-cfgdiff__pane-tag,
+.ns-config .ns-cfgtrail__win { border-radius:var(--ns-radius-sm); font-family:var(--ns-font-mono); font-size:var(--ns-text-3xs); letter-spacing:.05em; text-transform:uppercase; }
+.ns-config .ns-cfglayerchip { color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); }
+.ns-config .ns-cfglayerchip[data-tone='warning'],
+.ns-config .ns-cfgwater__layer[data-state='winner'] .ns-cfglayerchip { color:var(--cfg-accent); background:var(--ns-primary-subtle); border-color:var(--ns-primary-border); }
+.ns-config .ns-cfgbody { grid-template-columns:minmax(20rem,.85fr) minmax(0,1.15fr); gap:var(--ns-space-4); }
+.ns-config .ns-cfgtable,
+.ns-config .ns-cfgres { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-config .ns-cfgtable__head,
+.ns-config .ns-cfgtable__filters,
+.ns-config .ns-cfgtable__cols,
+.ns-config .ns-cfgrow { border-color:var(--ns-border); }
+.ns-config .ns-cfgrow { border-radius:0; }
+.ns-config .ns-cfgrow[data-state='selected'] { background:var(--ns-primary-subtle); box-shadow:inset 2px 0 0 var(--cfg-accent); }
+.ns-config .ns-cfgrow__ovr { padding:0; border:0; border-radius:0; color:var(--cfg-accent); background:transparent; font-family:var(--ns-font-mono); font-size:var(--ns-text-3xs); text-transform:uppercase; }
+.ns-config .ns-cfgres__keyhead { border-bottom:1px solid var(--ns-border); }
+.ns-config .ns-cfgwater { padding:var(--ns-space-4); background:color-mix(in srgb,var(--ns-card) 76%,var(--ns-surface)); border:0; border-radius:0; }
+.ns-config .ns-cfgwater__spine { background:var(--ns-border-strong); }
+.ns-config .ns-cfgwater__rail,
+.ns-config .ns-cfgwater__dot,
+.ns-config .ns-cfgwater__ord { color:var(--ns-muted-fg); border-color:var(--ns-border-strong); background:var(--ns-card); }
+.ns-config .ns-cfgwater__card { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-config .ns-cfgwater__layer[data-state='winner'] .ns-cfgwater__card { background:var(--ns-primary-subtle); box-shadow:3px 3px 0 var(--ns-primary-border); }
+.ns-config .ns-cfgwater__layer[data-state='winner'] .ns-cfgwater__dot,
+.ns-config .ns-cfgwater__layer[data-state='winner'] .ns-cfgwater__ord { color:var(--ns-primary-fg); background:var(--cfg-accent); border-color:var(--cfg-accent); }
+.ns-config .ns-cfgwater__edge { color:var(--ns-muted-fg); }
+.ns-config .ns-cfgdiff { margin:0; border-top:1px solid var(--ns-border); }
+@media (max-width:900px) {
+  .ns-config .ns-cfgbody { grid-template-columns:1fr; }
+}
+@media (max-width:640px) {
+  .ns-config .ns-cfghero__strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .ns-config .ns-cfghero__cell:nth-child(odd) { border-left:0; }
+  .ns-config .ns-cfghero__cell:nth-child(n+3) { border-top:1px solid var(--ns-border); }
+}
+
+/* Config self-check correction: categorical values stay neutral; precedence owns the accent. */
+.ns-config .ns-cfgval--number,
+.ns-config .ns-cfgval--string,
+.ns-config .ns-cfgval--boolean,
+.ns-config .ns-cfgval--enum { color:var(--ns-fg); }
+.ns-config .ns-cfgrow[data-state='selected'] .ns-cfgval--number { color:var(--ns-primary); }
+.ns-config .ns-cfgwater__shadowpill,
+.ns-config .ns-cfgwater__layer[data-state='shadowed'] .ns-cfgwater__ord { color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); }
+.ns-config .ns-cfgres__keyhead { border-radius:0; box-shadow:none; }
+
+/* ========================================================================== *
+ * Dead-Letter Queues re-fix — incident triage board (refs 11 + 18)
+ * ========================================================================== */
+.ns-dlq { --dlq-accent:var(--ns-destructive); gap:var(--ns-space-4); }
+.ns-dlq .ns-dlqhead__row { padding-bottom:var(--ns-space-3); border-bottom:1px solid var(--ns-border); }
+.ns-dlq .ns-dlqstat__glyph,
+.ns-dlq .ns-dlqcluster__glyph,
+.ns-dlq .ns-dlqrow__kind,
+.ns-dlq .ns-dlqclear__glyph { display:none; }
+.ns-dlq .ns-dlqstrip { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; overflow:hidden; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-dlq .ns-dlqstat { min-height:0; padding:var(--ns-space-3) var(--ns-space-4); border:0; border-left:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-dlq .ns-dlqstat:first-child { border-left:0; }
+.ns-dlq .ns-dlqstat[data-lead='true'] { box-shadow:none; }
+.ns-dlq .ns-dlqstat__val { color:var(--ns-fg); }
+.ns-dlq .ns-dlqstat:first-child .ns-dlqstat__val { color:var(--dlq-accent); }
+.ns-dlq .ns-dlqsplit { display:flex; gap:var(--ns-space-3); padding:0; background:transparent; }
+.ns-dlq .ns-dlqsplit__seg { flex:none!important; width:auto!important; padding:0; border:0; border-radius:0; background:transparent; color:var(--ns-muted-fg); }
+.ns-dlq .ns-dlqpips { display:none; }
+.ns-dlq .ns-dlqstat__spark .ns-spark__col { background:var(--dlq-accent); }
+.ns-dlq .ns-dlqgrid { grid-template-columns:minmax(0,1.6fr) minmax(17rem,.8fr); gap:var(--ns-space-4); }
+.ns-dlq .ns-panel { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-dlq .ns-panel__head { padding:var(--ns-space-3) var(--ns-space-4); border-bottom:1px solid var(--ns-border); }
+.ns-dlq .ns-dlqclusterlist { gap:0; }
+.ns-dlq .ns-dlqcluster { border:0; border-radius:0; border-top:1px solid var(--ns-border); background:var(--ns-card); box-shadow:none; }
+.ns-dlq .ns-dlqcluster:first-child { border-top:0; }
+.ns-dlq .ns-dlqcluster[data-sel='selected'] { background:var(--ns-destructive-subtle); box-shadow:inset 2px 0 0 var(--dlq-accent); }
+.ns-dlq .ns-dlqcluster__body { grid-template-columns:minmax(8rem,1fr) auto minmax(8rem,.8fr) 4rem; gap:var(--ns-space-3); padding:var(--ns-space-3) var(--ns-space-4); }
+.ns-dlq .ns-dlqcluster__count { color:var(--dlq-accent); }
+.ns-dlq .ns-dlqsrcchip,
+.ns-dlq .ns-dlqsig,
+.ns-dlq .ns-dlqqueue__sev,
+.ns-dlq .ns-dlqfilterchip { border-radius:var(--ns-radius-sm); font-family:var(--ns-font-mono); font-size:var(--ns-text-3xs); letter-spacing:.05em; text-transform:uppercase; }
+.ns-dlq .ns-dlqsrcchip { padding:0; border:0; background:transparent; color:var(--ns-muted-fg); }
+.ns-dlq .ns-dlqcluster__spark .ns-spark__col { background:var(--dlq-accent); }
+.ns-dlq .ns-dlqtablewrap { overflow:hidden; }
+.ns-dlq .ns-dlqrow { border-left:0; border-bottom:1px solid var(--ns-border); }
+.ns-dlq .ns-dlqrow[data-exhausted='true'] { box-shadow:none; }
+.ns-dlq .ns-dlqsig { color:var(--dlq-accent); background:var(--ns-destructive-subtle); border-color:var(--ns-destructive-border); }
+.ns-dlq .ns-dlqrow__inspect { color:var(--ns-fg); text-decoration:underline; text-underline-offset:2px; }
+.ns-dlq .ns-dlqbulk { border-top:1px solid var(--ns-border); background:color-mix(in srgb,var(--ns-card) 78%,var(--ns-surface)); }
+.ns-dlq .ns-dlqfleetlist { gap:0; }
+.ns-dlq .ns-dlqqueue { padding:var(--ns-space-3) var(--ns-space-4); border:0; border-top:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-dlq .ns-dlqqueue:first-child { border-top:0; }
+.ns-dlq .ns-dlqqueue__dot { background:var(--dlq-accent); }
+.ns-dlq .ns-dlqqueue__sev { color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); }
+.ns-dlq .ns-dlqmeter { height:5px; border:0; border-radius:0; background:var(--ns-surface); }
+.ns-dlq .ns-dlqmeter__fill { border-radius:0; background:var(--dlq-accent); }
+.ns-dlq .ns-dlqqueue__spark .ns-spark__col { background:var(--ns-muted-fg); }
+.ns-dlq .ns-dlqhow { padding:var(--ns-space-4); }
+@media (max-width:980px) {
+  .ns-dlq .ns-dlqgrid { grid-template-columns:1fr; }
+}
+@media (max-width:700px) {
+  .ns-dlq .ns-dlqstrip { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .ns-dlq .ns-dlqstat:nth-child(odd) { border-left:0; }
+  .ns-dlq .ns-dlqstat:nth-child(n+3) { border-top:1px solid var(--ns-border); }
+  .ns-dlq .ns-dlqstat:last-child { grid-column:1/-1; }
+  .ns-dlq .ns-dlqcluster__body { grid-template-columns:minmax(0,1fr) auto; }
+  .ns-dlq .ns-dlqcluster__srcs,
+  .ns-dlq .ns-dlqcluster__spark { grid-column:1; }
+}
+
+/* DLQ self-check correction: remove legacy one-side severity rails. */
+.ns-dlq .ns-dlqstat[data-lead='true'] { border-left:0; }
+.ns-dlq .ns-dlqcluster[data-tone] { border-left:0; }
+.ns-dlq .ns-dlqcluster[data-sel='selected'] { box-shadow:inset 0 -2px 0 var(--dlq-accent); }
+
+/* ========================================================================== *
+ * Triggers re-fix — rule activation workbench (refs 21 + 19)
+ * ========================================================================== */
+.ns-screen[data-screen-label='S9 Triggers'] { --t-accent:var(--ns-primary); gap:var(--ns-space-4); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__glyph,
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__trend-glyph,
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__glyph,
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__node-glyph,
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__chip-glyph,
+.ns-screen[data-screen-label='S9 Triggers'] .ns-thquery__search-glyph { display:none; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; overflow:hidden; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__tile { min-height:0; padding:var(--ns-space-3) var(--ns-space-4); border:0; border-left:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__tile:first-child { border-left:0; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__value { color:var(--ns-fg); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__tile:first-child .ns-tmetric__value { color:var(--t-accent); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__meter { display:none; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__bar { background:var(--t-accent); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; overflow:hidden; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__card { padding:var(--ns-space-3) var(--ns-space-4); border:0; border-left:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); box-shadow:none; transform:none; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__card:first-child { border-left:0; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__card:hover { background:var(--ns-surface); transform:none; box-shadow:none; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__card[data-state='selected'] { background:var(--ns-primary-subtle); box-shadow:inset 0 -2px 0 var(--t-accent); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__bar { background:var(--t-accent); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__state,
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__node-tag,
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__armpill,
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__chip,
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tnext__kind { border-radius:var(--ns-radius-sm); color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); font-family:var(--ns-font-mono); font-size:var(--ns-text-3xs); letter-spacing:.05em; text-transform:uppercase; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-panel { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild .ns-panel__body { padding:0!important; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__flow { grid-template-columns:minmax(0,1fr) minmax(8rem,.45fr) minmax(0,1fr); gap:0; align-items:stretch; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__node { padding:var(--ns-space-4); border:0; border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__node[data-role='when'] { background:color-mix(in srgb,var(--ns-card) 78%,var(--ns-surface)); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__node[data-role='do'] { background:var(--ns-primary-subtle); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__wire { padding:var(--ns-space-4) var(--ns-space-2); background:var(--ns-card); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__wire-line { background:var(--ns-border-strong); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__wire-arrow::after { content:''; display:block; width:7px; height:7px; border-top:1px solid var(--ns-border-strong); border-right:1px solid var(--ns-border-strong); transform:rotate(45deg); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__node-link { color:var(--t-accent); text-decoration:underline; text-underline-offset:2px; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__palette { padding:var(--ns-space-3) var(--ns-space-4); border-top:1px solid var(--ns-border); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__chip[data-state='active'] { color:var(--t-accent); background:var(--ns-primary-subtle); border-color:var(--ns-primary-border); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tdaystrip__day { border:0; border-left:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tdaystrip__day:first-child { border-left:0; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tdaystrip__day[data-today='true'] { background:var(--ns-primary-subtle); box-shadow:inset 0 -2px 0 var(--t-accent); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tdaystrip__pip { border-radius:var(--ns-radius-sm); color:var(--t-accent); background:var(--ns-primary-subtle); border-color:var(--ns-primary-border); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tnext__card { border:0; border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tnext__prog { height:4px; border:0; border-radius:0; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tnext__prog-fill { border-radius:0; background:var(--t-accent); }
+@media (max-width:760px) {
+  .ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__tile:nth-child(odd) { border-left:0; }
+  .ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__tile:nth-child(n+3) { border-top:1px solid var(--ns-border); }
+  .ns-screen[data-screen-label='S9 Triggers'] .ns-tcat { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__card:nth-child(odd) { border-left:0; }
+  .ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__card:nth-child(n+3) { border-top:1px solid var(--ns-border); }
+  .ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__flow { grid-template-columns:1fr; }
+}
+
+/* Trigger self-check correction: rule wiring + day calendar own the visual story. */
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__tile[data-tone],
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__card[data-cat] { border-left-color:var(--ns-border); }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tmetric__tile:first-child,
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__card:first-child { border-left:0; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tcat__spark { display:none; }
+.ns-screen[data-screen-label='S9 Triggers'] .ns-tbuild__node[data-role] { border-left:0; }
+
+/* ========================================================================== *
+ * Streams re-fix — time series + topology + lag matrix (refs 04 + 12)
+ * ========================================================================== */
+.ns-streams { --str-accent:var(--ns-teal-6); gap:var(--ns-space-4); }
+.ns-streams .ns-strhealth { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; overflow:hidden; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-streams .ns-strhealth__tile { min-height:0; padding:var(--ns-space-3) var(--ns-space-4); border:0; border-left:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-streams .ns-strhealth__tile:first-child { border-left:0; }
+.ns-streams .ns-strhealth__value { color:var(--ns-fg); }
+.ns-streams .ns-strhealth__tile:first-child .ns-strhealth__value { color:var(--str-accent); }
+.ns-streams .ns-strhealth__spark { color:var(--str-accent); }
+.ns-streams .ns-strhealth__pip { background:var(--ns-surface); border-color:var(--ns-border); }
+.ns-streams .ns-strhealth__pip[data-state='ok'] { background:var(--str-accent); border-color:var(--str-accent); }
+.ns-streams .ns-strhealth__pip[data-state='lag'] { background:var(--ns-muted-fg); border-color:var(--ns-muted-fg); }
+.ns-streams .ns-strbody { gap:var(--ns-space-4); }
+.ns-streams .ns-panel,
+.ns-streams .ns-strhero,
+.ns-streams .ns-strtopo,
+.ns-streams .ns-strdrawer { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-streams .ns-strhero { overflow:hidden; }
+.ns-streams .ns-strhero__head,
+.ns-streams .ns-strhero__foot { padding:var(--ns-space-3) var(--ns-space-4); }
+.ns-streams .ns-strhero__chart { color:var(--str-accent); }
+.ns-streams .ns-strhero__line { stroke:var(--str-accent); }
+.ns-streams .ns-strhero__area { fill:var(--ns-accent-subtle); }
+.ns-streams .ns-strhero__tip { color:var(--ns-fg); background:var(--ns-card); border:1px solid var(--ns-border); border-radius:var(--ns-radius-sm); box-shadow:var(--ns-shadow-xs); }
+.ns-streams .ns-strtopo__node { border:1px solid var(--ns-border); border-radius:var(--ns-radius-sm); background:var(--ns-surface); box-shadow:none; }
+.ns-streams .ns-strtopo__node[data-role='log'] { border-color:var(--ns-accent-border); background:var(--ns-accent-subtle); }
+.ns-streams .ns-strtopo__node[data-tone],
+.ns-streams .ns-strtopo__consumer[data-tone] { border-left-color:var(--ns-border); color:var(--ns-fg); }
+.ns-streams .ns-strtopo__wire,
+.ns-streams .ns-strtopo__bus { border-color:var(--ns-border-strong); }
+.ns-streams .ns-strledger__row,
+.ns-streams .ns-strtail__row { border-color:var(--ns-border); }
+.ns-streams .ns-strledger__lagbar { height:4px; border:0; border-radius:0; background:var(--ns-surface); }
+.ns-streams .ns-strledger__lagfill { border-radius:0; background:var(--str-accent); }
+.ns-streams .ns-strheat__cell { border-radius:2px; background:color-mix(in srgb,var(--str-accent) calc(var(--v,1) * 8%),var(--ns-surface)); }
+.ns-streams .ns-strgroup { border:0; border-radius:0; border-top:1px solid var(--ns-border); background:var(--ns-card); box-shadow:none; }
+.ns-streams .ns-strgroup__gauge { color:var(--str-accent); }
+.ns-streams .ns-strtail__live { color:var(--str-accent); }
+@media (max-width:700px) {
+  .ns-streams .ns-strhealth { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .ns-streams .ns-strhealth__tile:nth-child(odd) { border-left:0; }
+  .ns-streams .ns-strhealth__tile:nth-child(n+3) { border-top:1px solid var(--ns-border); }
+}
+
+/* Streams self-check correction: teal is the sole chromatic channel. */
+.ns-streams .ns-strhealth__tile[data-viz] { border-left-color:var(--ns-border); }
+.ns-streams .ns-strhealth__tile:first-child { border-left:0; }
+.ns-streams .ns-strhealth__value[data-tone] { color:var(--ns-fg); }
+.ns-streams .ns-strhealth__tile:first-child .ns-strhealth__value { color:var(--str-accent); }
+.ns-streams .ns-strhero__bp { color:var(--ns-fg); background:var(--ns-surface); border-color:var(--ns-border); }
+.ns-streams .ns-strhero__bp::before { background:var(--str-accent); }
+.ns-streams .ns-strtopo__node[data-role],
+.ns-streams .ns-strtopo__consumer[data-tone] { border-color:var(--ns-border); color:var(--ns-fg); }
+.ns-streams .ns-strtopo__node[data-role='log'] { border-color:var(--ns-accent-border); }
+.ns-streams .ns-strtopo__consumer [data-tone],
+.ns-streams .ns-strtopo__lag { color:var(--ns-fg); }
+.ns-streams .ns-seg__btn[data-state='active'] { color:var(--str-accent); border-bottom-color:var(--str-accent); }
+.ns-streams .ns-strtail__dot { background:var(--str-accent); }
+
+/* ========================================================================== *
+ * Sagas re-fix — durable state + compensation canvas (refs 21 + 11)
+ * ========================================================================== */
+.ns-screen[data-screen-label='S8 Sagas'] { --sg-accent:var(--ns-primary); gap:var(--ns-space-4); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; overflow:hidden; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__cell { min-height:0; padding:var(--ns-space-3) var(--ns-space-4); border:0; border-left:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__cell:first-child { border-left:0; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__meter,
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__track { display:none; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__split-num { color:var(--ns-fg); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__cell:first-child .ns-sghealth__meter-val { color:var(--sg-accent); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__bar { height:7px; border-radius:0; background:var(--ns-surface); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__seg { background:var(--sg-accent); border-radius:0; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__seg:nth-child(2) { opacity:.72; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__seg:nth-child(3) { opacity:.46; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__seg:nth-child(4) { opacity:.24; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__leg-dot { background:var(--sg-accent); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc { grid-template-columns:minmax(0,1fr) minmax(19rem,.42fr); gap:0; overflow:hidden; border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__switcher { grid-column:1/-1; border-bottom:1px solid var(--ns-border); background:color-mix(in srgb,var(--ns-card) 78%,var(--ns-surface)); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__inst { border-radius:var(--ns-radius-sm); background:transparent; border-color:var(--ns-border); box-shadow:none; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__inst[data-state='selected'] { color:var(--sg-accent); background:var(--ns-primary-subtle); border-color:var(--ns-primary-border); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__inst-dot { background:var(--sg-accent); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__stagewrap { border-right:1px solid var(--ns-border); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__canvas { background-color:color-mix(in srgb,var(--ns-card) 86%,var(--ns-surface)); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node[data-state],
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node[data-lane] { border:0; background:var(--ns-card); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node[data-selected='true'] { background:var(--ns-primary-subtle); box-shadow:3px 3px 0 var(--ns-primary-border); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node-tile { display:none; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node-dot { background:var(--sg-accent); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node[data-lane='comp'] { border:1px dashed var(--ns-border-strong); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__edge { stroke:var(--ns-border-strong); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__edge[data-lane='comp'],
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__edge[data-lane='cross'] { stroke:var(--sg-accent); stroke-dasharray:5 4; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__edge-label { fill:var(--ns-muted-fg); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__toolbar,
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__legend,
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__props-tile { display:none; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__lane-tag,
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__lanestat,
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__rail-pip { color:var(--ns-muted-fg); background:var(--ns-card); border-color:var(--ns-border-strong); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__props { border:0; border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__props > * + * { border-top:1px solid var(--ns-border); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__tab { border-radius:0; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__tab[data-state='active'] { color:var(--sg-accent); border-bottom-color:var(--sg-accent); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__minimap { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__minimap line,
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__minimap path { stroke:var(--ns-border-strong); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__minimap circle { fill:var(--sg-accent); }
+@media (max-width:900px) {
+  .ns-screen[data-screen-label='S8 Sagas'] .ns-sgc { grid-template-columns:1fr; }
+  .ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__stagewrap { border-right:0; border-bottom:1px solid var(--ns-border); }
+}
+@media (max-width:640px) {
+  .ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__cell:nth-child(odd) { border-left:0; }
+  .ns-screen[data-screen-label='S8 Sagas'] .ns-sghealth__cell:nth-child(n+3) { border-top:1px solid var(--ns-border); }
+}
+
+/* Saga self-check correction: selection and rollback own the only accent. */
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sagahero__gauge { display:none; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node[data-role='fwd']::before,
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node[data-role='terminal']::before { background:var(--ns-border-strong); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node[data-role='comp']::before { background:var(--sg-accent); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node[data-selected='1'] { background:var(--ns-primary-subtle); box-shadow:3px 3px 0 var(--ns-primary-border); }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__node[data-state] .ns-sgc__node-dot { background:var(--sg-accent); box-shadow:none; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-sgc__props .ns-kv__val { color:var(--ns-fg)!important; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-assist { border:0; border-radius:0; background:color-mix(in srgb,var(--ns-card) 78%,var(--ns-surface)); box-shadow:none; }
+.ns-screen[data-screen-label='S8 Sagas'] .ns-assist__head::before { display:none; }
+
+/* ========================================================================== *
+ * Auth Sessions re-fix — identity roster + expiry horizon (refs 07 + 05)
+ * ========================================================================== */
+.ns-auth { --auth-accent:var(--ns-primary); gap:var(--ns-space-4); }
+.ns-auth .ns-auth__now-dot,
+.ns-auth .ns-auth__revokeall-glyph,
+.ns-auth .ns-authhead__glyph,
+.ns-auth .ns-authhead__ratio-glyph,
+.ns-auth .ns-authbar__search-glyph,
+.ns-auth .ns-authcard__dev,
+.ns-auth .ns-authcard__elev,
+.ns-auth .ns-authroster__empty-glyph { display:none; }
+.ns-auth .ns-authhead { display:grid; grid-template-columns:minmax(12rem,.7fr) minmax(0,1.3fr); gap:0; overflow:hidden; padding:0; border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-auth .ns-authhead__cell { padding:var(--ns-space-3) var(--ns-space-4); border:0; border-left:1px solid var(--ns-border); }
+.ns-auth .ns-authhead__cell:first-child { border-left:0; }
+.ns-auth .ns-authhead__cell:not(.ns-authhead__cell--hero):not(.ns-authhead__cell--hz) { display:none; }
+.ns-auth .ns-authhead__cell--hz { grid-column:2; }
+.ns-auth .ns-authhead__value { color:var(--auth-accent); }
+.ns-auth .ns-authhead__chan { display:none; }
+.ns-auth .ns-authhead__chan-legend { display:flex; flex-wrap:wrap; gap:var(--ns-space-2); }
+.ns-auth .ns-authhead__legend-dot { display:none; }
+.ns-auth .ns-authhead__legend-item { color:var(--ns-muted-fg); font-family:var(--ns-font-mono); font-size:var(--ns-text-3xs); text-transform:uppercase; }
+.ns-auth .ns-authhz__track { height:5px; border:0; border-radius:0; background:var(--ns-surface); }
+.ns-auth .ns-authhz__fill { border-radius:0; background:var(--auth-accent); }
+.ns-auth .ns-authhz__row[data-tone] .ns-authhz__fill { background:var(--auth-accent); }
+.ns-auth .ns-authhz__t[data-tone] { color:var(--ns-fg); }
+.ns-auth .ns-authbar { display:grid; grid-template-columns:minmax(13rem,1fr) auto auto; gap:var(--ns-space-2); }
+.ns-auth .ns-authbar__input { border-radius:var(--ns-radius-sm); background:var(--ns-card); }
+.ns-auth .ns-authbar__chip { border-radius:var(--ns-radius-sm); text-transform:uppercase; letter-spacing:.05em; }
+.ns-auth .ns-authbar__chip[data-state='active'] { color:var(--auth-accent); background:var(--ns-primary-subtle); border-color:var(--ns-primary-border); }
+.ns-auth .ns-authgrid { grid-template-columns:minmax(0,1.2fr) minmax(19rem,.8fr); gap:var(--ns-space-4); }
+.ns-auth .ns-authroster { gap:0; overflow:hidden; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-auth .ns-authcard { border:0; border-radius:0; border-top:1px solid var(--ns-border); background:var(--ns-card); box-shadow:none; }
+.ns-auth .ns-authcard:first-child { border-top:0; }
+.ns-auth .ns-authcard[data-state],
+.ns-auth .ns-authcard[data-selected] { border-left:0; }
+.ns-auth .ns-authcard[data-selected='true'] { background:var(--ns-primary-subtle); box-shadow:inset 0 -2px 0 var(--auth-accent); }
+.ns-auth .ns-authcard__avatar,
+.ns-auth .ns-authdetail__avatar { border:0; background:var(--ns-primary-subtle); color:var(--auth-accent); }
+.ns-auth .ns-authprov,
+.ns-auth .ns-scopechip,
+.ns-auth .ns-authcard__right > span:first-child { border-radius:var(--ns-radius-sm); color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); font-family:var(--ns-font-mono); font-size:var(--ns-text-3xs); letter-spacing:.05em; text-transform:uppercase; }
+.ns-auth .ns-ttlbar { height:4px; border:0; border-radius:0; background:var(--ns-surface); }
+.ns-auth .ns-ttlbar__fill { border-radius:0; background:var(--auth-accent); }
+.ns-auth .ns-authcard__ttl-lbl,
+.ns-auth .ns-authcard__ttl-pct { color:var(--ns-muted-fg); }
+.ns-auth .ns-authdetail { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-auth .ns-authdetail > * + * { border-top:1px solid var(--ns-border); }
+.ns-auth .ns-authttl__track { height:18px; border:0; border-radius:0; background:var(--ns-surface); }
+.ns-auth .ns-authttl__elapsed { background:repeating-linear-gradient(135deg,var(--ns-border),var(--ns-border) 4px,transparent 4px,transparent 8px); }
+.ns-auth .ns-authttl__remain { background:var(--auth-accent); }
+.ns-auth .ns-authttl__marker { background:var(--ns-fg); }
+.ns-auth .ns-authtl__marker { background:var(--auth-accent); }
+.ns-auth .ns-authstream { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+@media (max-width:900px) {
+  .ns-auth .ns-authgrid { grid-template-columns:1fr; }
+}
+@media (max-width:640px) {
+  .ns-auth .ns-authhead { grid-template-columns:1fr; }
+  .ns-auth .ns-authhead__cell--hz { grid-column:1; border-left:0; border-top:1px solid var(--ns-border); }
+  .ns-auth .ns-authbar { grid-template-columns:1fr; }
+}
+
+/* Auth self-check correction: expiry position, not status color, carries urgency. */
+.ns-auth .ns-authcard[data-state],
+.ns-auth .ns-authcard[data-selected] { border-left:0; }
+.ns-auth .ns-authcard [class*='ns-badge'],
+.ns-auth .ns-authcard__right > span:first-child { color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); }
+.ns-auth .ns-authttl__remain,
+.ns-auth .ns-ttlbar__fill[data-tone] { background:var(--auth-accent); }
+.ns-auth .ns-authcard__meta [data-tone],
+.ns-auth .ns-authcard__loc,
+.ns-auth .ns-authcard__mfa { color:var(--ns-muted-fg); }
+.ns-auth .ns-auth__revokeall.ns-btn--destructive { color:var(--ns-fg); background:var(--ns-card); border-color:var(--ns-border-hover); box-shadow:3px 3px 0 var(--ns-border); }
+
+/* ========================================================================== *
+ * Home re-fix — unified operations canvas (refs 08 + 03)
+ * ========================================================================== */
+.ns-home { --home-accent:var(--ns-primary); gap:var(--ns-space-5); }
+.ns-home .ns-card,
+.ns-home .ns-panelcard,
+.ns-home .ns-throughput,
+.ns-home .ns-gaugecard { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-home .ns-home__header { padding-bottom:var(--ns-space-3); border-bottom:1px solid var(--ns-border); }
+.ns-home .ns-home__kpis { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(18rem,.65fr); gap:var(--ns-space-4); align-items:stretch; }
+.ns-home .ns-throughput { overflow:hidden; }
+.ns-home .ns-throughput__head { padding:var(--ns-space-3) var(--ns-space-4); border-bottom:1px solid var(--ns-border); }
+.ns-home .ns-throughput__value { color:var(--home-accent); }
+.ns-home .ns-areachart { color:var(--home-accent); }
+.ns-home .ns-areachart__line { stroke:var(--home-accent); }
+.ns-home .ns-areachart__fill { fill:var(--ns-primary-subtle); }
+.ns-home .ns-home__kpi-tiles { display:grid; grid-template-columns:1fr; gap:0; overflow:hidden; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-home .ns-kpi { min-height:0; padding:var(--ns-space-3) var(--ns-space-4); border:0; border-top:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-home .ns-kpi:first-child { border-top:0; }
+.ns-home .ns-kpi__value { color:var(--ns-fg); }
+.ns-home .ns-kpi__spark { display:none; }
+.ns-home .ns-kpi__arrow,
+.ns-home .ns-trendarrow__glyph,
+.ns-home .ns-incident__head::before,
+.ns-home .ns-datatable__icon,
+.ns-home .ns-sigrow__icon,
+.ns-home .ns-statlink__icon,
+.ns-home .ns-statlink__arrow { display:none; }
+.ns-home .ns-deltachip,
+.ns-home .ns-tag,
+.ns-home .ns-timepill,
+.ns-home .ns-sigrow__pill,
+.ns-home .ns-statlink__pill { border-radius:var(--ns-radius-sm); color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); font-family:var(--ns-font-mono); font-size:var(--ns-text-3xs); letter-spacing:.05em; text-transform:uppercase; }
+.ns-home .ns-home__hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(17rem,.65fr); gap:var(--ns-space-4); }
+.ns-home .ns-incident { padding:var(--ns-space-4); border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-home .ns-incident__grounding,
+.ns-home .ns-incident__actions { border-top:1px solid var(--ns-border); padding-top:var(--ns-space-3); }
+.ns-home .ns-ground { border-radius:var(--ns-radius-sm); color:var(--ns-fg); background:var(--ns-surface); border-color:var(--ns-border); }
+.ns-home .ns-gaugecard { padding:var(--ns-space-4); }
+.ns-home .ns-gauge__ring { background:conic-gradient(from 270deg,var(--home-accent) 0 40%,var(--ns-surface) 40% 50%,transparent 50%); }
+.ns-home .ns-gaugecard__stat-dot { background:var(--home-accent); }
+.ns-home .ns-gaugecard__stat:nth-child(2) .ns-gaugecard__stat-dot { opacity:.55; }
+.ns-home .ns-gaugecard__stat:nth-child(3) .ns-gaugecard__stat-dot { opacity:.25; }
+.ns-home .ns-home__analysis { display:grid; grid-template-columns:1.15fr .85fr 1fr; gap:var(--ns-space-4); }
+.ns-home .ns-panelcard__head { padding:var(--ns-space-3) var(--ns-space-4); border-bottom:1px solid var(--ns-border); }
+.ns-home .ns-panelcard__body { padding:var(--ns-space-4); }
+.ns-home .ns-channelbar { height:8px; gap:2px; }
+.ns-home .ns-channelbar__seg { border-radius:0; background:var(--home-accent); }
+.ns-home .ns-channelbar__seg:nth-child(2) { opacity:.5; }
+.ns-home .ns-channelbar__seg:nth-child(3) { opacity:.25; }
+.ns-home .ns-legend__dot { background:var(--home-accent); }
+.ns-home .ns-legend__item:nth-child(2) .ns-legend__dot { opacity:.5; }
+.ns-home .ns-legend__item:nth-child(3) .ns-legend__dot { opacity:.25; }
+.ns-home .ns-donut { display:none; }
+.ns-home .ns-donutwrap { grid-template-columns:1fr; }
+.ns-home .ns-shareitem__bar { display:none; }
+.ns-home .ns-shareitem { grid-template-columns:auto 1fr auto; border-top:1px solid var(--ns-border); padding:var(--ns-space-2) 0; }
+.ns-home .ns-shareitem__dot { background:var(--home-accent); }
+.ns-home .ns-sigrow,
+.ns-home .ns-statlink,
+.ns-home .ns-feedrow { border-color:var(--ns-border); border-radius:0; box-shadow:none; }
+.ns-home .ns-feedrow__marker { background:var(--home-accent); }
+@media (max-width:960px) {
+  .ns-home .ns-home__kpis,
+  .ns-home .ns-home__hero,
+  .ns-home .ns-home__analysis { grid-template-columns:1fr; }
+  .ns-home .ns-home__kpi-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); }
+  .ns-home .ns-kpi { border-top:0; border-left:1px solid var(--ns-border); }
+  .ns-home .ns-kpi:first-child { border-left:0; }
+}
+@media (max-width:640px) {
+  .ns-home .ns-home__kpi-tiles { grid-template-columns:1fr; }
+  .ns-home .ns-kpi { border-left:0; border-top:1px solid var(--ns-border); }
+  .ns-home .ns-kpi:first-child { border-top:0; }
+}
+
+/* Home self-check correction: one copper analytical channel. */
+.ns-home .ns-gauge[data-tone] .ns-gauge__ring { background:conic-gradient(from 270deg,var(--home-accent) 0 40%,var(--ns-surface) 40% 50%,transparent 50%); }
+.ns-home .ns-trendarrow,
+.ns-home .ns-trendarrow[data-dir],
+.ns-home .ns-kpi__delta,
+.ns-home .ns-throughput__delta { color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); }
+.ns-home .ns-ground::before { display:none; }
+
+/* ========================================================================== *
+ * Live Flow re-fix — causal seam map (refs 21 + 20)
+ * ========================================================================== */
+.ns-screen[data-screen-label='S13 Live Flow'] { --flow-accent:var(--ns-teal-6); gap:var(--ns-space-4); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flow-grid { grid-template-columns:minmax(13rem,.55fr) minmax(0,1.35fr) minmax(17rem,.7fr); gap:var(--ns-space-4); align-items:start; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowrow { padding:var(--ns-space-3); border:0; border-top:1px solid var(--ns-border); border-radius:0; background:transparent; box-shadow:none; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowrow:first-of-type { border-top:0; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowrow[data-state='selected'] { background:var(--ns-accent-subtle); box-shadow:inset 0 -2px 0 var(--flow-accent); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowrow__dot,
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowrow__chaindot { background:var(--flow-accent); }
+
+/* ========================================================================== *
+ * Run Inspector re-fix — timed execution rail (refs 11 + 05)
+ * ========================================================================== */
+.ns-screen[data-screen-label='S6 Run Inspector'] { --run-accent:var(--ns-primary); gap:var(--ns-space-4); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-console-grid { grid-template-columns:minmax(13rem,.55fr) minmax(0,1.25fr) minmax(17rem,.65fr); gap:var(--ns-space-4); align-items:start; }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runtable,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runhero,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-panel,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-logstrip,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-assist { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runtable__head,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runtable__cols,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-panel__header,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-logstrip__head { padding:var(--ns-space-3) var(--ns-space-4); border-bottom:1px solid var(--ns-border); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runrow { padding:var(--ns-space-3); border:0; border-top:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runrow:first-child { border-top:0; }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runrow[data-state='selected'] { background:var(--ns-primary-subtle); box-shadow:inset 0 -2px 0 var(--run-accent); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runrow__glyph { display:none; }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runrow [class*='ns-badge'] { color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); border-radius:var(--ns-radius-sm); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-statstrip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; overflow:hidden; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-statstrip__tile { padding:var(--ns-space-3) var(--ns-space-4); border:0; border-left:1px solid var(--ns-border); border-radius:0; background:var(--ns-card); box-shadow:none; }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-statstrip__tile:first-child { border-left:0; }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-statstrip__value { color:var(--ns-fg); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-statstrip__tile:first-child .ns-statstrip__value { color:var(--run-accent); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runhero { grid-template-columns:1fr; padding:0; }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runhero__gauge { display:none; }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runhero__body { padding:var(--ns-space-4); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runhero [class*='ns-badge'],
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline__comp-tag { color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); border-radius:var(--ns-radius-sm); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runstat { border-top:1px solid var(--ns-border); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runstat__tile { border-left:1px solid var(--ns-border); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runstat__tile:first-child { border-left:0; }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runstat__val { color:var(--ns-fg); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-runstat__tile:first-child .ns-runstat__val { color:var(--run-accent); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-panel__body { padding:var(--ns-space-4); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline__step { padding-left:var(--ns-space-8); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline__step::before { background:var(--ns-border-strong); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline__marker { border-color:var(--run-accent); background:var(--ns-card); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline__step[data-state='active'] .ns-step-timeline__marker,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline__step[data-state='failed'] .ns-step-timeline__marker { background:var(--run-accent); border-color:var(--run-accent); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline__datum { color:var(--run-accent); background:var(--ns-primary-subtle); border-color:var(--ns-primary-border); border-radius:var(--ns-radius-sm); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-activity-feed__marker,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-logstrip__severity { background:var(--run-accent); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-activity-feed__item[data-tone] .ns-activity-feed__marker,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-logstrip__line[data-severity] .ns-logstrip__resource::before { background:var(--run-accent); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline__step[data-state] .ns-step-timeline__datum { color:var(--run-accent); background:var(--ns-primary-subtle); border-color:var(--ns-primary-border); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline__tip { color:var(--run-accent); background:var(--ns-primary-subtle); border:1px solid var(--ns-primary-border); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline__tip::after,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline--data .ns-step-timeline__step[data-comp='1']::after { content:none; }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-step-timeline--data .ns-step-timeline__step[data-comp='1'] .ns-step-timeline__marker { border-color:var(--run-accent); background:var(--ns-primary-subtle); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-activity-feed__item,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-logstrip__line { border-color:var(--ns-border); }
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-ai-chip,
+.ns-screen[data-screen-label='S6 Run Inspector'] .ns-ground { border-radius:var(--ns-radius-sm); color:var(--ns-fg); background:var(--ns-surface); border-color:var(--ns-border); }
+@media (max-width:1100px) {
+  .ns-screen[data-screen-label='S6 Run Inspector'] .ns-console-grid { grid-template-columns:minmax(13rem,.55fr) minmax(0,1.45fr); }
+  .ns-screen[data-screen-label='S6 Run Inspector'] .ns-console-grid > :last-child { grid-column:1/-1; }
+}
+@media (max-width:760px) {
+  .ns-screen[data-screen-label='S6 Run Inspector'] .ns-console-grid { grid-template-columns:1fr; }
+  .ns-screen[data-screen-label='S6 Run Inspector'] .ns-statstrip { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .ns-screen[data-screen-label='S6 Run Inspector'] .ns-statstrip__tile:nth-child(odd) { border-left:0; }
+  .ns-screen[data-screen-label='S6 Run Inspector'] .ns-statstrip__tile:nth-child(n+3) { border-top:1px solid var(--ns-border); }
+}
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowhero,
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-panel { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowhero { display:grid; grid-template-columns:1fr; padding:0; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowhero__gauge { display:none; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowhero__spine { display:none; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowhero__body { padding:var(--ns-space-4); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowhero [class*='ns-badge'] { color:var(--flow-accent); background:var(--ns-accent-subtle); border-color:var(--ns-accent-border); border-radius:var(--ns-radius-sm); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-splitbar { height:7px; border-radius:0; background:var(--ns-surface); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-splitbar > span { border-radius:0; background:var(--flow-accent); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-splitbar > span:nth-child(2) { opacity:.55; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-splitbar > span:nth-child(3) { opacity:.25; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-dot { background:var(--flow-accent); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-panel__header { padding:var(--ns-space-3) var(--ns-space-4); border-bottom:1px solid var(--ns-border); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-panel__body { padding:0; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__legend { padding:var(--ns-space-2) var(--ns-space-4); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__glyph { display:none; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__node { grid-template-columns:minmax(0,1fr) auto; margin:0; padding:var(--ns-space-3) var(--ns-space-4); border-top:1px solid var(--ns-border); background:var(--ns-card); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__node::before { left:var(--ns-space-4); background:var(--ns-border-strong); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__node[data-selected='true'] { background:var(--ns-accent-subtle); box-shadow:inset 0 -2px 0 var(--flow-accent); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__node[data-state] .ns-journey__val,
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__prim,
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__spawn { color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); border-radius:var(--ns-radius-sm); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__seam { color:var(--flow-accent); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-fanout__dot { background:var(--flow-accent); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-seamrail .ns-panel { overflow:hidden; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-seamrail .ns-kv__row { border-top:1px solid var(--ns-border); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-seamrail .ns-kv__val { color:var(--ns-fg)!important; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-ai-chip,
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-ground { border-radius:var(--ns-radius-sm); color:var(--ns-fg); background:var(--ns-surface); border-color:var(--ns-border); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-assist { border:0; border-radius:0; background:var(--ns-card); box-shadow:var(--ns-shadow-xs); }
+@media (max-width:1100px) {
+  .ns-screen[data-screen-label='S13 Live Flow'] .ns-flow-grid { grid-template-columns:minmax(13rem,.55fr) minmax(0,1.45fr); }
+  .ns-screen[data-screen-label='S13 Live Flow'] .ns-seamrail { grid-column:1/-1; }
+}
+@media (max-width:760px) {
+  .ns-screen[data-screen-label='S13 Live Flow'] .ns-flow-grid { grid-template-columns:1fr; }
+}
+
+/* Live Flow self-check correction: sequence and selection, not status rainbow. */
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-splitbar span { background:var(--flow-accent); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-splitbar span:nth-child(2) { opacity:.55; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-splitbar span:nth-child(3) { opacity:.25; }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__node[data-selected='1'] { background:var(--ns-accent-subtle); box-shadow:inset 0 -2px 0 var(--flow-accent); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__node[data-selected='1'] .ns-journey__val { color:var(--flow-accent); background:var(--ns-accent-subtle); border-color:var(--ns-accent-border); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-journey__node [class*='ns-badge'] { color:var(--ns-muted-fg); background:var(--ns-surface); border-color:var(--ns-border); }
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowhero .ns-dot,
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowrow__dot,
+.ns-screen[data-screen-label='S13 Live Flow'] .ns-flowrow__chaindot { background:var(--flow-accent); }
diff --git a/.llm/runs/beta10--orchestrator/render/assets/proto.css b/.llm/runs/beta10--orchestrator/render/assets/proto.css
new file mode 100644
index 000000000..e9b889083
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/assets/proto.css
@@ -0,0 +1,1107 @@
+/* ---------------------------------------------------------------------------
+ * NetScript Dev Dashboard — prototype pass 1, net-new CSS.
+ *
+ * Tokens only (--ns-*). Theme-blind: light is the unthemed default, dark is
+ * carried entirely by the token overrides under [data-theme='dark'] — nothing
+ * in this file branches on theme. Missing shades derive via color-mix().
+ *
+ * Sync-back candidates (class contract ns-<block>__<part>, state via data-*):
+ *   ns-waterfall · ns-stackmap · ns-step-timeline · ns-log-stream
+ *   ns-entity-rail · ns-tree-nav · ns-connector · ns-activity-feed
+ *   ns-plugin-gated-view
+ * Screen-local glue (NOT sync-back candidates):
+ *   ns-envbar · ns-tabs (skin for the headless Tabs primitive) · ns-rail-grid
+ * ------------------------------------------------------------------------- */
+
+/* ------------------------------------------------------------------ *
+ * ns-envbar — topbar environment identity (glue)
+ * ------------------------------------------------------------------ */
+
+.ns-envbar {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-1) var(--ns-space-2-5);
+  border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-surface);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  color: var(--ns-muted-fg);
+  white-space: nowrap;
+}
+
+.ns-envbar__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-success);
+  flex: none;
+}
+
+.ns-envbar[data-state='degraded'] .ns-envbar__dot {
+  background: var(--ns-warning);
+}
+
+.ns-envbar__seg + .ns-envbar__seg::before {
+  content: '·';
+  margin-right: var(--ns-space-2);
+  color: color-mix(in oklab, var(--ns-muted-fg), transparent 55%);
+}
+
+.ns-envbar__seg[data-part='app'] {
+  color: var(--ns-fg);
+  font-weight: 500;
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-tabs — skin for the headless Tabs primitive (glue)
+ * ------------------------------------------------------------------ */
+
+.ns-tabs__list {
+  display: inline-flex;
+  gap: var(--ns-space-1);
+  padding: var(--ns-space-1);
+  background: var(--ns-muted);
+  border-radius: var(--ns-radius-md);
+}
+
+.ns-tabs__trigger {
+  border: 0;
+  background: transparent;
+  padding: var(--ns-space-1) var(--ns-space-3);
+  border-radius: var(--ns-radius-sm);
+  font-family: var(--ns-font-sans);
+  font-size: var(--ns-text-xs);
+  font-weight: 500;
+  color: var(--ns-muted-fg);
+  cursor: pointer;
+  transition: color 120ms var(--ns-ease-fast), background 120ms var(--ns-ease-fast);
+}
+
+.ns-tabs__trigger:hover {
+  color: var(--ns-fg);
+}
+
+.ns-tabs__trigger[data-state='active'] {
+  background: var(--ns-card);
+  color: var(--ns-fg);
+  box-shadow: var(--ns-shadow-xs);
+}
+
+.ns-tabs__trigger:focus-visible {
+  outline: 2px solid var(--ns-ring);
+  outline-offset: 1px;
+}
+
+.ns-tabs__content {
+  min-width: 0;
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-page-header--console — density variant for in-shell console pages
+ * (sync-back candidate as a PageHeader variant)
+ * ------------------------------------------------------------------ */
+
+.ns-page-header--console {
+  padding-block: var(--ns-space-2) var(--ns-space-5);
+}
+
+.ns-page-header--console h1 {
+  font-size: var(--ns-text-2xl);
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-rail-grid — two-column list-rail page layout (glue)
+ * ------------------------------------------------------------------ */
+
+.ns-rail-grid {
+  display: grid;
+  gap: var(--ns-space-6);
+  align-items: start;
+  min-width: 0;
+}
+
+/* Screen glue: StatsGrid uses viewport breakpoints (md:/xl:), which overshoot
+ * inside the rail's ~28rem content column — four columns of clipped labels.
+ * Cap it at two columns here; the component-level container-query fix is
+ * routed to issue 509. */
+.ns-rail-grid [class~='xl:grid-cols-4'] {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@media (min-width: 1024px) {
+  .ns-rail-grid {
+    grid-template-columns: 18rem minmax(0, 1fr);
+  }
+
+  .ns-rail-grid--sm {
+    grid-template-columns: 15rem minmax(0, 1fr);
+  }
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-entity-rail — generic entity list rail (promote-set)
+ * ------------------------------------------------------------------ */
+
+.ns-entity-rail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ns-space-0-5);
+  min-width: 0;
+}
+
+.ns-entity-rail__item {
+  display: grid;
+  gap: var(--ns-space-0-5);
+  padding: var(--ns-space-2) var(--ns-space-3);
+  border: 1px solid transparent;
+  border-radius: var(--ns-radius-md);
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  min-width: 0;
+}
+
+.ns-entity-rail__item:hover {
+  background: var(--ns-surface-raised);
+}
+
+.ns-entity-rail__item[data-state='selected'] {
+  background: var(--ns-primary-subtle);
+  border-color: var(--ns-primary-border);
+}
+
+.ns-entity-rail__item:focus-visible {
+  outline: 2px solid var(--ns-ring);
+  outline-offset: 1px;
+}
+
+.ns-entity-rail__title {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  font-size: var(--ns-text-sm);
+  font-weight: 500;
+  color: var(--ns-fg);
+  min-width: 0;
+}
+
+.ns-entity-rail__title > span:first-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.ns-entity-rail__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  color: var(--ns-muted-fg);
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-tree-nav — collapsible two-level tree navigation (promote-set)
+ * ------------------------------------------------------------------ */
+
+.ns-tree-nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ns-space-1);
+  min-width: 0;
+}
+
+.ns-tree-nav__group > summary {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-1-5) var(--ns-space-2);
+  border-radius: var(--ns-radius-md);
+  font-size: var(--ns-text-sm);
+  font-weight: 500;
+  color: var(--ns-fg);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.ns-tree-nav__group > summary::-webkit-details-marker {
+  display: none;
+}
+
+.ns-tree-nav__group > summary::before {
+  content: '▸';
+  font-size: var(--ns-text-2xs);
+  color: var(--ns-muted-fg);
+  transition: transform 120ms var(--ns-ease-fast);
+}
+
+.ns-tree-nav__group[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+.ns-tree-nav__group > summary:hover {
+  background: var(--ns-surface-raised);
+}
+
+.ns-tree-nav__count {
+  margin-left: auto;
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+}
+
+.ns-tree-nav__items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  margin: var(--ns-space-0-5) 0 var(--ns-space-1);
+  padding-left: var(--ns-space-4);
+  border-left: 1px solid var(--ns-border);
+  margin-left: var(--ns-space-2-5);
+}
+
+.ns-tree-nav__item {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-1) var(--ns-space-2);
+  border: 0;
+  border-radius: var(--ns-radius-sm);
+  background: transparent;
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-xs);
+  color: var(--ns-muted-fg);
+  text-align: left;
+  cursor: pointer;
+  min-width: 0;
+}
+
+.ns-tree-nav__item:hover {
+  background: var(--ns-surface-raised);
+  color: var(--ns-fg);
+}
+
+.ns-tree-nav__item[data-state='selected'] {
+  background: var(--ns-primary-subtle);
+  color: var(--ns-fg);
+}
+
+.ns-tree-nav__item:focus-visible {
+  outline: 2px solid var(--ns-ring);
+  outline-offset: 1px;
+}
+
+.ns-tree-nav__group[data-state='gated'] > summary {
+  color: var(--ns-muted-fg);
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-connector — connection / probe status unit (promote-set)
+ * ------------------------------------------------------------------ */
+
+.ns-connector {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ns-space-1);
+}
+
+.ns-connector__row {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  min-width: 0;
+}
+
+.ns-connector__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-success);
+  flex: none;
+}
+
+.ns-connector__row[data-state='degraded'] .ns-connector__dot {
+  background: var(--ns-warning);
+}
+
+.ns-connector__row[data-state='failed'] .ns-connector__dot {
+  background: var(--ns-destructive);
+}
+
+.ns-connector__probe {
+  color: var(--ns-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.ns-connector__result {
+  margin-left: auto;
+  color: var(--ns-muted-fg);
+  white-space: nowrap;
+}
+
+.ns-connector__row[data-state='degraded'] .ns-connector__result {
+  color: var(--ns-warning);
+}
+
+.ns-connector__row[data-state='failed'] .ns-connector__result {
+  color: var(--ns-destructive);
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-activity-feed — generic event feed (promote-set)
+ * ------------------------------------------------------------------ */
+
+.ns-activity-feed {
+  display: flex;
+  flex-direction: column;
+}
+
+.ns-activity-feed__item {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--ns-space-3);
+  padding: var(--ns-space-1-5) 0;
+}
+
+.ns-activity-feed__item::before {
+  content: '';
+  position: absolute;
+  left: 3px;
+  top: calc(var(--ns-space-1-5) + 12px);
+  bottom: calc(-1 * var(--ns-space-1-5));
+  width: 1px;
+  background: var(--ns-border);
+}
+
+.ns-activity-feed__item:last-child::before {
+  display: none;
+}
+
+.ns-activity-feed__marker {
+  width: 7px;
+  height: 7px;
+  margin-top: 5px;
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-border-strong);
+  flex: none;
+}
+
+.ns-activity-feed__item[data-tone='success'] .ns-activity-feed__marker {
+  background: var(--ns-success);
+}
+
+.ns-activity-feed__item[data-tone='warning'] .ns-activity-feed__marker {
+  background: var(--ns-warning);
+}
+
+.ns-activity-feed__item[data-tone='destructive'] .ns-activity-feed__marker {
+  background: var(--ns-destructive);
+}
+
+.ns-activity-feed__item[data-tone='primary'] .ns-activity-feed__marker {
+  background: var(--ns-primary);
+}
+
+.ns-activity-feed__body {
+  display: grid;
+  gap: var(--ns-space-0-5);
+  min-width: 0;
+}
+
+.ns-activity-feed__text {
+  font-size: var(--ns-text-xs);
+  color: var(--ns-fg);
+  line-height: var(--ns-leading-snug);
+  overflow-wrap: anywhere;
+}
+
+.ns-activity-feed__time {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-plugin-gated-view — plugin-availability gate (promote-set)
+ * ------------------------------------------------------------------ */
+
+.ns-plugin-gated-view[data-state='not-installed'] {
+  display: grid;
+  gap: var(--ns-space-3);
+  justify-items: start;
+  padding: var(--ns-space-8) var(--ns-space-6);
+  border: 1px dashed var(--ns-border-strong);
+  border-radius: var(--ns-radius-lg);
+  background: color-mix(in oklab, var(--ns-surface), transparent 40%);
+}
+
+.ns-plugin-gated-view__title {
+  font-size: var(--ns-text-base);
+  font-weight: 600;
+  color: var(--ns-fg);
+}
+
+.ns-plugin-gated-view__desc {
+  font-size: var(--ns-text-sm);
+  color: var(--ns-muted-fg);
+  max-width: 44ch;
+  line-height: var(--ns-leading-relaxed);
+}
+
+.ns-plugin-gated-view__cmd {
+  width: 100%;
+  max-width: 30rem;
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-waterfall — proportional trace waterfall (new-component)
+ * ------------------------------------------------------------------ */
+
+.ns-waterfall {
+  --waterfall-label-col: 19rem;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  container: ns-waterfall / inline-size;
+}
+
+.ns-waterfall__axis {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--waterfall-label-col) minmax(0, 1fr);
+  gap: var(--ns-space-3);
+  height: var(--ns-space-6);
+  margin-bottom: var(--ns-space-1);
+  border-bottom: 1px solid var(--ns-border);
+}
+
+.ns-waterfall__axis-track {
+  position: relative;
+}
+
+.ns-waterfall__tick {
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+  padding-bottom: var(--ns-space-0-5);
+  white-space: nowrap;
+}
+
+.ns-waterfall__tick::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: calc(-1 * var(--ns-space-0-5));
+  width: 1px;
+  height: var(--ns-space-1);
+  background: var(--ns-border-strong);
+}
+
+.ns-waterfall__tick:first-child {
+  transform: none;
+}
+
+.ns-waterfall__tick:first-child::after {
+  left: 0;
+}
+
+/* A narrow waterfall leaves the axis track too tight for five labels — the
+ * quarter ticks collide into a garble. The constraint is the component's own
+ * width (it sits in a three-column shell), so gate on the container: keep
+ * only the 0 / total endpoints and shrink the label column so the track
+ * keeps proportional room. */
+@container ns-waterfall (max-width: 46rem) {
+  .ns-waterfall__axis,
+  .ns-waterfall__row {
+    grid-template-columns: 11rem minmax(0, 1fr);
+  }
+
+  .ns-waterfall__tick:not(:first-child):not(:last-child) {
+    display: none;
+  }
+}
+
+.ns-waterfall__row {
+  display: grid;
+  grid-template-columns: var(--waterfall-label-col) minmax(0, 1fr);
+  gap: var(--ns-space-3);
+  align-items: center;
+  padding: 2px var(--ns-space-1) 2px 0;
+  border: 0;
+  border-radius: var(--ns-radius-sm);
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  min-width: 0;
+}
+
+.ns-waterfall__row:hover {
+  background: var(--ns-surface-raised);
+}
+
+.ns-waterfall__row[aria-selected='true'] {
+  background: var(--ns-primary-subtle);
+  box-shadow: inset 2px 0 0 var(--ns-primary);
+}
+
+.ns-waterfall__row:focus-visible {
+  outline: 2px solid var(--ns-ring);
+  outline-offset: -2px;
+}
+
+.ns-waterfall__label {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  min-width: 0;
+  font-size: var(--ns-text-xs);
+  color: var(--ns-fg);
+}
+
+.ns-waterfall__label > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.ns-waterfall__row[data-depth='1'] .ns-waterfall__label { padding-left: var(--ns-space-5); }
+.ns-waterfall__row[data-depth='2'] .ns-waterfall__label { padding-left: var(--ns-space-10); }
+.ns-waterfall__row[data-depth='3'] .ns-waterfall__label { padding-left: var(--ns-space-14); }
+
+.ns-waterfall__dot {
+  width: 7px;
+  height: 7px;
+  border-radius: var(--ns-radius-sm);
+  flex: none;
+}
+
+.ns-waterfall__track {
+  position: relative;
+  height: 20px;
+  min-width: 0;
+}
+
+.ns-waterfall__bar {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  min-width: 2px;
+  border-radius: var(--ns-radius-sm);
+}
+
+.ns-waterfall__row[data-state='running'] .ns-waterfall__bar {
+  animation: ns-waterfall-pulse 1.6s var(--ns-ease-normal) infinite;
+}
+
+.ns-waterfall__duration {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  padding-left: var(--ns-space-1-5);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  color: var(--ns-muted-fg);
+  white-space: nowrap;
+}
+
+@keyframes ns-waterfall-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ns-waterfall__row[data-state='running'] .ns-waterfall__bar {
+    animation: none;
+  }
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-stackmap — infrastructure graph (new-component)
+ * ------------------------------------------------------------------ */
+
+.ns-stackmap {
+  position: relative;
+  min-width: 0;
+}
+
+.ns-stackmap__canvas {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--ns-space-8) var(--ns-space-12);
+  align-items: start;
+  padding: var(--ns-space-4) var(--ns-space-2);
+}
+
+.ns-stackmap__edge-layer {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.ns-stackmap__edge {
+  fill: none;
+  stroke: var(--ns-border-strong);
+  stroke-width: 1.5;
+}
+
+.ns-stackmap__edge[data-state='active'] {
+  stroke: var(--ns-primary);
+  stroke-width: 2;
+}
+
+.ns-stackmap__node {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: var(--ns-space-2);
+  padding: var(--ns-space-3) var(--ns-space-4);
+  border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-lg);
+  background: var(--ns-card);
+  box-shadow: var(--ns-shadow-xs);
+  text-align: left;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  min-width: 0;
+}
+
+.ns-stackmap__node:hover {
+  border-color: var(--ns-border-hover);
+  box-shadow: var(--ns-shadow-sm);
+}
+
+.ns-stackmap__node[aria-pressed='true'] {
+  border-color: var(--ns-primary);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--ns-ring), transparent 70%);
+}
+
+.ns-stackmap__node:focus-visible {
+  outline: 2px solid var(--ns-ring);
+  outline-offset: 2px;
+}
+
+.ns-stackmap__node[data-state='degraded'] {
+  border-color: var(--ns-warning-border);
+  background: color-mix(in oklab, var(--ns-card), var(--ns-warning) 3%);
+}
+
+.ns-stackmap__node[data-state='failed'] {
+  border-color: var(--ns-destructive-border);
+  background: color-mix(in oklab, var(--ns-card), var(--ns-destructive) 3%);
+}
+
+.ns-stackmap__node[data-state='stopped'] {
+  border-style: dashed;
+  background: var(--ns-surface);
+  color: var(--ns-muted-fg);
+}
+
+.ns-stackmap__node[data-kind='database'],
+.ns-stackmap__node[data-kind='cache'],
+.ns-stackmap__node[data-kind='container'] {
+  background: var(--ns-surface);
+}
+
+.ns-stackmap__node[data-kind='database'][data-state='degraded'],
+.ns-stackmap__node[data-kind='cache'][data-state='degraded'],
+.ns-stackmap__node[data-kind='container'][data-state='degraded'] {
+  background: color-mix(in oklab, var(--ns-surface), var(--ns-warning) 4%);
+}
+
+.ns-stackmap__node-title {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  font-size: var(--ns-text-sm);
+  font-weight: 600;
+  color: var(--ns-fg);
+  min-width: 0;
+}
+
+.ns-stackmap__node-title > span:nth-child(2) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.ns-stackmap__node-icon {
+  color: var(--ns-muted-fg);
+  flex: none;
+}
+
+.ns-stackmap__node-state {
+  margin-left: auto;
+  width: 7px;
+  height: 7px;
+  border-radius: var(--ns-radius-full);
+  background: var(--ns-success);
+  flex: none;
+}
+
+.ns-stackmap__node[data-state='degraded'] .ns-stackmap__node-state {
+  background: var(--ns-warning);
+}
+
+.ns-stackmap__node[data-state='failed'] .ns-stackmap__node-state {
+  background: var(--ns-destructive);
+}
+
+.ns-stackmap__node[data-state='starting'] .ns-stackmap__node-state {
+  background: var(--ns-primary);
+}
+
+.ns-stackmap__node[data-state='stopped'] .ns-stackmap__node-state {
+  background: var(--ns-border-strong);
+}
+
+.ns-stackmap__node-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ns-space-1) var(--ns-space-2);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  color: var(--ns-muted-fg);
+}
+
+@media (max-width: 860px) {
+  .ns-stackmap__canvas {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: var(--ns-space-5);
+  }
+
+  .ns-stackmap__edge-layer {
+    display: none;
+  }
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-step-timeline — run step timeline (new-block)
+ * ------------------------------------------------------------------ */
+
+.ns-step-timeline {
+  display: flex;
+  flex-direction: column;
+}
+
+.ns-step-timeline__step {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--ns-space-3);
+  padding: var(--ns-space-2) 0;
+}
+
+.ns-step-timeline__step::before {
+  content: '';
+  position: absolute;
+  left: 7px;
+  top: calc(var(--ns-space-2) + 18px);
+  bottom: calc(-1 * var(--ns-space-2));
+  width: 1px;
+  background: var(--ns-border);
+}
+
+.ns-step-timeline__step:last-child::before {
+  display: none;
+}
+
+.ns-step-timeline__marker {
+  width: 15px;
+  height: 15px;
+  margin-top: 2px;
+  border-radius: var(--ns-radius-full);
+  border: 2px solid var(--ns-border-strong);
+  background: var(--ns-bg);
+  flex: none;
+}
+
+.ns-step-timeline__step[data-state='completed'] .ns-step-timeline__marker {
+  border-color: var(--ns-success);
+  background: var(--ns-success-subtle);
+}
+
+.ns-step-timeline__step[data-state='running'] .ns-step-timeline__marker {
+  border-color: var(--ns-primary);
+  background: var(--ns-primary-subtle);
+  animation: ns-step-pulse 1.6s var(--ns-ease-normal) infinite;
+}
+
+.ns-step-timeline__step[data-state='failed'] .ns-step-timeline__marker {
+  border-color: var(--ns-destructive);
+  background: var(--ns-destructive-subtle);
+}
+
+.ns-step-timeline__step[data-state='retrying'] .ns-step-timeline__marker {
+  border-color: var(--ns-warning);
+  background: var(--ns-warning-subtle);
+}
+
+.ns-step-timeline__step[data-state='queued'] .ns-step-timeline__marker {
+  border-style: dashed;
+}
+
+@keyframes ns-step-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--ns-primary), transparent 60%); }
+  70% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--ns-primary), transparent 100%); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ns-step-timeline__step[data-state='running'] .ns-step-timeline__marker {
+    animation: none;
+  }
+}
+
+.ns-step-timeline__main {
+  display: grid;
+  gap: var(--ns-space-1);
+  min-width: 0;
+}
+
+.ns-step-timeline__title {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-2);
+  font-size: var(--ns-text-sm);
+  font-weight: 500;
+  color: var(--ns-fg);
+  min-width: 0;
+}
+
+.ns-step-timeline__step[data-state='queued'] .ns-step-timeline__title {
+  color: var(--ns-muted-fg);
+  font-weight: 400;
+}
+
+.ns-step-timeline__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ns-space-2);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  color: var(--ns-muted-fg);
+}
+
+.ns-step-timeline__attempts {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--ns-space-1-5);
+  border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-full);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-3xs);
+  line-height: 1.6;
+  color: var(--ns-muted-fg);
+}
+
+.ns-step-timeline__step[data-state='retrying'] .ns-step-timeline__attempts,
+.ns-step-timeline__step[data-state='failed'] .ns-step-timeline__attempts {
+  border-color: var(--ns-warning-border);
+  background: var(--ns-warning-subtle);
+  color: var(--ns-warning);
+}
+
+.ns-step-timeline__body {
+  margin-top: var(--ns-space-1);
+  min-width: 0;
+}
+
+.ns-step-timeline__body > summary {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ns-space-1);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  color: var(--ns-muted-fg);
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+}
+
+.ns-step-timeline__body > summary::-webkit-details-marker {
+  display: none;
+}
+
+.ns-step-timeline__body > summary::before {
+  content: '▸';
+  font-size: var(--ns-text-3xs);
+}
+
+.ns-step-timeline__body[open] > summary::before {
+  content: '▾';
+}
+
+.ns-step-timeline__body > summary:hover {
+  color: var(--ns-fg);
+}
+
+.ns-step-timeline__io {
+  display: grid;
+  gap: var(--ns-space-2);
+  margin-top: var(--ns-space-2);
+}
+
+/* compact view: hide payload disclosure, tighten rhythm */
+.ns-step-timeline[data-view='compact'] .ns-step-timeline__body {
+  display: none;
+}
+
+.ns-step-timeline[data-view='compact'] .ns-step-timeline__step {
+  padding: var(--ns-space-1) 0;
+}
+
+.ns-step-timeline[data-view='compact'] .ns-step-timeline__step::before {
+  top: calc(var(--ns-space-1) + 18px);
+  bottom: calc(-1 * var(--ns-space-1));
+}
+
+/* ------------------------------------------------------------------ *
+ * ns-log-stream — structured log tail (new-block)
+ * ------------------------------------------------------------------ */
+
+.ns-log-stream {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--ns-border);
+  border-radius: var(--ns-radius-md);
+  background: var(--ns-surface);
+  overflow: hidden;
+}
+
+.ns-log-stream__toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--ns-space-3);
+  padding: var(--ns-space-1-5) var(--ns-space-3);
+  border-bottom: 1px solid var(--ns-border);
+  background: var(--ns-surface-raised);
+}
+
+.ns-log-stream__lines {
+  display: flex;
+  flex-direction: column;
+  padding: var(--ns-space-1) 0;
+  overflow-x: auto;
+}
+
+.ns-log-stream__line {
+  display: grid;
+  grid-template-columns: 7.5rem 5.5rem 3.5rem minmax(0, 1fr);
+  column-gap: var(--ns-space-3);
+  padding: 2px var(--ns-space-3);
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  line-height: var(--ns-leading-snug);
+}
+
+.ns-log-stream__line:hover {
+  background: var(--ns-surface-raised);
+}
+
+.ns-log-stream__ts {
+  color: var(--ns-muted-fg);
+  white-space: nowrap;
+}
+
+.ns-log-stream__resource {
+  color: var(--ns-fg);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.ns-log-stream__severity {
+  text-transform: uppercase;
+  letter-spacing: var(--ns-label-tracking);
+  white-space: nowrap;
+}
+
+.ns-log-stream__line[data-severity='debug'] .ns-log-stream__severity {
+  color: color-mix(in oklab, var(--ns-muted-fg), transparent 25%);
+}
+
+.ns-log-stream__line[data-severity='info'] .ns-log-stream__severity {
+  color: var(--ns-primary);
+}
+
+.ns-log-stream__line[data-severity='warn'] .ns-log-stream__severity {
+  color: var(--ns-warning);
+}
+
+.ns-log-stream__line[data-severity='error'] .ns-log-stream__severity {
+  color: var(--ns-destructive);
+}
+
+.ns-log-stream__line[data-severity='error'] {
+  background: var(--ns-destructive-subtle);
+}
+
+.ns-log-stream__msg {
+  color: var(--ns-fg);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* ------------------------------------------------------------------ */
+/* Screen-local glue: selectable endpoint rows (catalog DataTable)     */
+/* ------------------------------------------------------------------ */
+
+.ns-ep-row {
+  cursor: pointer;
+  text-align: left;
+  transition: background-color 120ms ease;
+}
+
+.ns-ep-row:hover {
+  background: var(--ns-muted);
+}
+
+.ns-ep-row[aria-selected='true'] {
+  background: var(--ns-primary-subtle);
+  box-shadow: inset 2px 0 0 0 var(--ns-primary);
+}
+
+.ns-ep-row__name {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-xs);
+  color: var(--ns-fg);
+  overflow-wrap: anywhere;
+}
+
+.ns-ep-row__summary {
+  font-size: var(--ns-text-xs);
+  color: var(--ns-muted-fg);
+}
+
+.ns-ep-row__p95 {
+  font-family: var(--ns-font-mono);
+  font-size: var(--ns-text-2xs);
+  color: var(--ns-muted-fg);
+  text-align: right;
+  align-self: center;
+}
diff --git a/.llm/runs/beta10--orchestrator/render/prototype.dc.html b/.llm/runs/beta10--orchestrator/render/prototype.dc.html
new file mode 100644
index 000000000..ec0b2447f
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/render/prototype.dc.html
@@ -0,0 +1,8055 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style data-omelette-injected>html,body{background:transparent}</style><script data-omelette-injected>(()=>{{const W=new URLSearchParams(location.search).get("theme");if(W==="light"||W==="dark"){document.documentElement.dataset.theme=W}}{const W=()=>{try{if(document.querySelector('meta[name="color-scheme"]'))return;const V=getComputedStyle(document.documentElement).getPropertyValue("color-scheme").trim();if(V&&V!=="normal")return;const z=(j)=>{if(!j)return null;const H=getComputedStyle(j).backgroundColor.match(/^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:[,\s/]+([\d.]+%?))?\s*\)$/);if(!H)return null;const F=H[4]==null?1:parseFloat(H[4])/(H[4].endsWith("%")?100:1);if(F<0.99)return null;return[+H[1],+H[2],+H[3]]};const G=z(document.body)||z(document.documentElement);if(!G)return;const K=(j)=>{const H=j/255;return H<=0.04045?H/12.92:((H+0.055)/1.055)**2.4};const D=0.2126*K(G[0])+0.7152*K(G[1])+0.0722*K(G[2]);document.documentElement.style.setProperty("color-scheme",D<0.4?"dark":"light")}catch{}};if(document.readyState==="complete")W();else window.addEventListener("load",W)}var b=["https://claude.ai","https://preview.claude.ai","https://4c19e768-56d1-4bcd-956c-9cc8fe2f0f00.claudeusercontent.com"];var p=true;var O=30000;var n=3000;document.addEventListener("DOMContentLoaded",()=>{const W=window.Babel;const V="om-src-id";if(W&&W.registerPlugin&&!(W.availablePlugins&&W.availablePlugins[V])){W.registerPlugin(V,({types:D})=>({visitor:{JSXOpeningElement(j,H){const F=j.node;if(F.name&&F.name.type==="JSXMemberExpression")return;for(let Q=0;Q<F.attributes.length;Q++){const $=F.attributes[Q];if($.type==="JSXAttribute"&&$.name&&$.name.name==="data-om-id")return}const P=H.file&&H.file.opts&&H.file.opts.filename||"?";const R=F.loc&&F.loc.start;const J=`jsx:${P}:${F.start??0}:${R?R.line:0}:${R?R.column+1:0}`;F.attributes.push(D.jsxAttribute(D.jsxIdentifier("data-om-id"),D.stringLiteral(J)))}}}))}const z="om-text-extract";let G=false;if(p&&W&&W.registerPlugin&&!(W.availablePlugins&&W.availablePlugins[z])){const D=window.React;if(D&&D.useSyncExternalStore&&D.createElement){G=true;const j={};const H=new Set;let F=0;window.__omTextO=j;window.__omTextSet=(J)=>{for(const Q in J){const $=J[Q];if($==null)delete j[Q];else j[Q]=$}F++;H.forEach((Q)=>Q())};const P=(J)=>{H.add(J);return()=>H.delete(J)};const R=()=>F;window.__OmT=function J(Q){D.useSyncExternalStore(P,R,R);return D.createElement("span",{"data-om-text":Q.i,className:"__om-t"},Q.i in j?j[Q.i]:Q.children)};W.registerPlugin(z,({types:J})=>{const Q={style:1,script:1,noscript:1,textarea:1,title:1,option:1,text:1,tspan:1,textPath:1};const $={placeholder:1,alt:1,title:1,label:1,"aria-label":1,"aria-description":1,"aria-placeholder":1};const Y=(q,M)=>J.logicalExpression("??",J.memberExpression(J.logicalExpression("||",J.memberExpression(J.identifier("window"),J.identifier("__omTextO")),J.objectExpression([])),J.stringLiteral(q),true),M);const Z=(q)=>q.file&&q.file.opts&&q.file.opts.filename||"?";const B=(q)=>q.file&&q.file.code||"";const U=(q,M)=>{const L=(X)=>X&&X.start!=null&&X.end!=null&&(X.type==="StringLiteral"||X.type==="TemplateLiteral"&&X.expressions.length===0)?[X.start,X.end]:null;const N=L(M);if(N)return N;if(M&&M.type==="Identifier"){const X=q.scope.getBinding(M.name);if(X&&X.constant&&X.path.node.type==="VariableDeclarator"){return L(X.path.node.init)}}return null};const x=(q,M,L)=>{const N=q.node;let X=false;const f=(w,A)=>{X=true;return J.jsxElement(J.jsxOpeningElement(J.jsxIdentifier("__OmT"),[J.jsxAttribute(J.jsxIdentifier("i"),J.stringLiteral(w))],false),J.jsxClosingElement(J.jsxIdentifier("__OmT")),[A],false)};const C=N.children.map((w)=>{if(w.type==="JSXText"){if(w.start==null||w.end==null)return w;const A=L.slice(w.start,w.end);const k=A.length-A.trimStart().length;const u=A.length-A.trimEnd().length;if(k+u>=A.length)return w;return f(`txt:${M}:${w.start+k}:${w.end-u}`,w)}if(w.type==="JSXExpressionContainer"){const A=U(q,w.expression);if(A)return f(`str:${M}:${A[0]}:${A[1]}`,w)}return w});if(X)N.children=C};return{visitor:{JSXOpeningElement(q,M){const L=q.node;const N=Z(M);const X={};for(let f=0;f<L.attributes.length;f++){const C=L.attributes[f];if(C.type!=="JSXAttribute"||!C.name)continue;const w=C.name.name;if(!$[w])continue;if(!C.value||C.value.type!=="StringLiteral")continue;if(C.value.start==null||C.value.end==null)continue;const A=`txt:${N}:${C.value.start}:${C.value.end}`;X[w]=A;C.value=J.jsxExpressionContainer(Y(A,J.stringLiteral(C.value.value)))}if(Object.keys(X).length){L.attributes.push(J.jsxAttribute(J.jsxIdentifier("data-om-text-attrs"),J.stringLiteral(JSON.stringify(X))))}},JSXElement(q,M){const L=q.node.openingElement;const N=L&&L.name&&L.name.name;if(N==="__OmT")return;if(typeof N==="string"&&Q[N])return;x(q,Z(M),B(M))},JSXFragment(q,M){x(q,Z(M),B(M))}}}})}}const K=G?["transform-react-jsx-source",V,z]:["transform-react-jsx-source",V];document.querySelectorAll('script[type="text/babel"],script[type="text/jsx"]').forEach((D,j)=>{const H=D.getAttribute("data-plugins")||"";const F=K.filter((P)=>H.indexOf(P)<0);if(F.length){D.setAttribute("data-plugins",H?`${H},${F.join(",")}`:F.join(","))}if(!D.hasAttribute("data-filename")){D.setAttribute("data-filename",D.getAttribute("src")||`inline-${j}`)}})});var v=window.parent;var g="not editable here — open the project in the Claude Design editor to save";var d=()=>Promise.resolve({persisted:false,noHost:true,reason:g});var S=d;var h="data/storage.json";var i=()=>{try{const W=new URL(document.baseURI);const V=W.pathname.match(/\/projects\/([^/]+)\/serve\//);if(V)return V[1];return W.hostname.split(".")[0]||""}catch{return location.hostname.split(".")[0]||""}};var o=()=>{try{const W=new URL(document.baseURI);const V=W.pathname.indexOf("/serve/");if(V>=0)return W.origin+W.pathname.slice(0,V+"/serve/".length)+h}catch{}return"./"+h};var I=null;var _=()=>{if(!I){I=fetch(o(),{cache:"no-store"}).then((W)=>{if(W.ok)return W.text();return W.status===404?"":null}).catch(()=>null).then((W)=>{if(W===null){I=null;return null}const V=new Map;if(!W)return V;let z;try{z=JSON.parse(W)}catch{console.warn("[omelette.storage] "+h+" is not valid JSON; treating the store as unreadable so a save cannot overwrite the "+"hand-edited bytes. Fix the JSON (or delete the file) to re-enable persistence.");I=null;return null}if(z===null||typeof z!=="object"||Array.isArray(z)){console.warn("[omelette.storage] "+h+" doesn't hold a JSON object; treating the store as unreadable so a save cannot "+"overwrite the hand-edited bytes. Make the top level a JSON object to re-enable persistence.");I=null;return null}const G=z;if("data"in G){const K=G.data;if(K===null||typeof K!=="object"||Array.isArray(K)){console.warn("[omelette.storage] "+h+' has a "data" field that is not a JSON object; treating the store as unreadable so a '+'save cannot overwrite the hand-edited bytes. Make "data" a JSON object to re-enable persistence.');I=null;return null}const D=G._meta;const j=D!==null&&typeof D==="object"?D.project:undefined;if(typeof j==="string"&&j!==""&&j!==i())return V;for(const H of Object.keys(K))V.set(H,K[H]);return V}for(const K of Object.keys(G)){if(K!=="_meta")V.set(K,G[K])}return V})}return I};var y=(W)=>S(h,JSON.stringify({_meta:{project:i(),version:1},data:Object.fromEntries(W)},null,2));var m=Promise.resolve();var T=(W)=>{const V=m.then(W);m=V.then(()=>{return},()=>{return});return V};var s=/sk-(?:ant-)?[A-Za-z0-9_-]{16,}|AKIA[0-9A-Z]{16}|gh[pousr]_[A-Za-z0-9]{20,}|xox[a-z]-[A-Za-z0-9][A-Za-z0-9-]{9,}|AIza[0-9A-Za-z_-]{30,}|-----BEGIN [A-Z ]*PRIVATE KEY-----/;var a=/password|passwd|secret|api[_-]?key|access[_-]?token|auth[_-]?token|credential/i;var r=(W,V,z)=>{if(s.test(V)||a.test(W)&&typeof z==="string"&&z.length>=8){console.warn('[omelette.storage] the value for "'+W+'" looks like a credential. The storage file is a plaintext project file — visible to '+"everyone with project access and copied when the project is duplicated. Do not store secrets here.")}};var l={persisted:false,reason:"could not load the existing store — not overwriting it"};var c={persisted:false,reason:"stored value changed since a failed read — re-read this key before saving"};var E=new Set;var t={get:(W)=>{if(typeof W!=="string"){return Promise.reject(new TypeError("storage.get: key must be a string"))}return T(_).then((V)=>{if(V===null){E.add(W);return null}E.delete(W);if(!V.has(W))return null;const z=V.get(W);return z==null?null:JSON.parse(JSON.stringify(z))})},set:(W,V)=>{if(typeof W!=="string"){return Promise.reject(new TypeError("storage.set: key must be a string"))}let z;try{z=JSON.stringify(V)}catch(K){return Promise.reject(new TypeError("storage.set: value must be JSON-serializable ("+String(K)+")"))}if(z===undefined){return Promise.reject(new TypeError("storage.set: value must be JSON-serializable"))}r(W,z,V);const G=JSON.parse(z);return T(()=>_().then((K)=>{if(K===null)return l;if(E.has(W)){if(K.has(W))return c;E.delete(W)}K.set(W,G);return y(K)}))},delete:(W)=>{if(typeof W!=="string"){return Promise.reject(new TypeError("storage.delete: key must be a string"))}return T(()=>_().then((V)=>{if(V===null)return l;if(E.has(W)){if(V.has(W))return c;E.delete(W)}V.delete(W);return y(V)}))},keys:()=>T(_).then((W)=>W===null?[]:Array.from(W.keys()))};window.omelette={writeFile:(W,V)=>S(W,V).then((z)=>{if(!z.persisted&&!z.noHost){throw new Error(z.reason||"write failed")}}),storage:t};if(v&&v!==window){const W=(J,Q)=>{try{v.postMessage({__omelette_log:true,type:J,data:Q},"*")}catch{}};["log","warn","error"].forEach((J)=>{const Q=console[J];console[J]=(...$)=>{const Y=$.map((Z)=>{try{return typeof Z==="object"?JSON.stringify(Z):String(Z)}catch{try{return String(Z)}catch{return"[unstringifiable]"}}}).join(" ");W(J,Y);Q.apply(console,$)}});window.addEventListener("error",(J)=>{const Q=J.target;if(Q&&Q!==window&&Q.tagName){const $=Q.src||Q.href||"";W("resource_error",`${Q.tagName} failed to load: ${$}`)}else{W("error",`${J.message||"Unknown error"} at ${J.filename||"?"}:${J.lineno||0}:${J.colno||0}`)}},true);window.addEventListener("unhandledrejection",(J)=>{const Q=J.reason;const $=Q instanceof Error?`${Q.message} ${Q.stack}`:String(Q);W("error",`Unhandled rejection: ${$}`)});window.addEventListener("click",(J)=>{if(J.defaultPrevented||J.button!==0)return;if(J.metaKey||J.ctrlKey||J.shiftKey||J.altKey)return;const Q=J.composedPath?J.composedPath():[];const $=["button","input","select","textarea","summary","label"];let Y=null;for(const x of Q){if(!(x instanceof Element))continue;if(x.localName==="a"){if(!(x instanceof HTMLAnchorElement))return;Y=x;break}if($.indexOf(x.localName)!==-1)return}if(!Y)return;if(Y.isContentEditable)return;const Z=Y.closest("[contenteditable]");if(Z&&Z.getAttribute("contenteditable")!=="false")return;const B=(Y.getAttribute("target")||"_self").toLowerCase();if(B!=="_self"&&B!=="_top"&&B!=="_parent")return;let U;try{U=new URL(Y.href)}catch{return}if(U.protocol!=="http:"&&U.protocol!=="https:")return;if(location.origin==="null")return;if(U.origin===location.origin)return;J.preventDefault();window.open(U.href,"_blank","noopener,noreferrer")});const V=()=>{try{v.postMessage({type:"omelette:height",height:document.documentElement.scrollHeight},"*")}catch{}};if(window.ResizeObserver)new ResizeObserver(V).observe(document.documentElement);const z=()=>{V();if(!document.querySelector('script[type="text/babel"],script[type="text/jsx"]'))return;const J=()=>document.getElementById("root")||document.querySelector("body > div[id]");const Q=J()?.firstElementChild??null;let $=0;const Y=()=>{const Z=J();if(Z&&Z.firstElementChild!==Q||++$>30){V();return}setTimeout(Y,100)};setTimeout(Y,100)};if(document.readyState==="complete")z();else window.addEventListener("load",z);const G={};let K=0;const D=(J)=>new Promise((Q,$)=>{if(!b.length){$(new Error("claude.complete: no parent origin"));return}const Y=`c${++K}`;const Z=()=>setTimeout(()=>{delete G[Y];$(new Error(`claude.complete: no data for ${O/1000}s`))},O);const B=Z();G[Y]={resolve:Q,reject:$,text:"",t:B,arm:Z};try{for(const U of b){v.postMessage({__om_api:true,id:Y,body:J},U)}}catch(U){clearTimeout(B);delete G[Y];$(U)}});const j=8;const H=async(J,Q)=>{if(!Array.isArray(J.messages)){throw new Error("claude.complete: tools require a messages array")}const $=J.messages.slice();const Y={...J,tools:J.tools.map((U)=>{if(U===null||typeof U!=="object")return U;const x={};for(const q of Object.keys(U)){if(typeof U[q]!=="function")x[q]=U[q]}return x})};const Z=Y.tool_choice;const B=Z!=null&&(Z.type==="any"||Z.type==="tool")?{...Y,tool_choice:Z.disable_parallel_tool_use!==undefined?{type:"auto",disable_parallel_tool_use:Z.disable_parallel_tool_use}:{type:"auto"}}:Y;for(let U=0;U<j;U++){const x=await D({...U===0?Y:B,messages:$});const q=x.message;const M=q&&Array.isArray(q.content)?q.content:null;const L=M?M.filter((X)=>X?.type==="tool_use"):[];if(q?.stop_reason!=="tool_use"||L.length===0){return x.text}const N=[];for(const X of L){const f=Q.get(X.name);if(!f){N.push({type:"tool_result",tool_use_id:X.id,content:`no handler for tool "${X.name}"`,is_error:true});continue}try{const C=await f(X.input);const w=typeof C==="string"?C:R(C)??"";N.push({type:"tool_result",tool_use_id:X.id,content:w})}catch(C){N.push({type:"tool_result",tool_use_id:X.id,content:String(C?.message??C??"tool handler failed"),is_error:true})}}$.push({role:"assistant",content:M},{role:"user",content:N})}throw new Error(`claude.complete: exceeded ${j} tool turns`)};window.claude={complete(J){const Q=J;if(Q!==null&&typeof Q==="object"&&Array.isArray(Q.tools)&&Q.tools.some(($)=>$!==null&&typeof $==="object"&&typeof $.run==="function")){const $=new Map;for(const Y of Q.tools){if(Y!==null&&typeof Y==="object"&&typeof Y.run==="function"){$.set(String(Y.name),Y.run)}}return H(Q,$)}return D(J).then(($)=>$.text)}};const F={};let P=0;S=(J,Q)=>new Promise(($)=>{if(!b.length){$({persisted:false,noHost:true,reason:g});return}const Y=`f${++P}`;const Z=setTimeout(()=>{delete F[Y];$({persisted:false,noHost:true,reason:g})},n);F[Y]={settle:$,t:Z};try{for(const B of b){v.postMessage({__om_file:true,id:Y,op:"write",path:J,content:Q},B)}}catch{clearTimeout(Z);delete F[Y];$({persisted:false,noHost:true,reason:g})}});const R=(J)=>{try{return JSON.stringify(J)}catch{return JSON.stringify(String(J))}};window.addEventListener("message",(J)=>{if(b.indexOf(J.origin)<0)return;if(J.source!==v)return;const Q=J.data;if(!Q)return;if(Q.type==="omelette-preview-refresh"){if(typeof Q.token!=="string"||!/^[0-9a-f.-]+(\.(rc|pr-[0-9]+))?(\.[0-9]+\.[0-9a-f]{16})?$/.test(Q.token))return;const Z=Math.max(1,Math.floor((Q.expiresAt||0)-Date.now()/1000));document.cookie="__Host-omelette-preview="+Q.token+"; Path=/; Secure; SameSite=None; Partitioned; Max-Age="+Z;return}if(Q.__om_file_r){const Z=F[Q.id];if(!Z)return;clearTimeout(Z.t);delete F[Q.id];Z.settle(Q.ok?{persisted:true}:{persisted:false,reason:Q.error||"write failed"});return}if(Q.__om_api_r){const Z=G[Q.id];if(!Z)return;if(Q.error!=null){clearTimeout(Z.t);delete G[Q.id];Z.reject(new Error(Q.error));return}if(Q.chunk!=null){clearTimeout(Z.t);Z.t=Z.arm();Z.text+=Q.chunk;return}if(Q.done){clearTimeout(Z.t);delete G[Q.id];Z.resolve({text:Q.text!=null?Q.text:Z.text,message:Q.message});return}return}if(!Q.__om_eval)return;const $=Q;const Y=(Z)=>{J.source.postMessage({...Z,__om_eval_r:1,id:$.id},J.origin)};try{const Z=(0,eval)($.code);if(Z&&typeof Z.then==="function"){Z.then((B)=>Y({ok:1,v:R(B)}),(B)=>Y({ok:0,e:String(B)}))}else{Y({ok:1,v:R(Z)})}}catch(Z){Y({ok:0,e:String(Z)})}})}})();
+</script>
+
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+  <link rel="stylesheet" href="_ds/netscript-ns-one-ec262e10-d4ad-451f-9aeb-e51955db3634/styles.css">
+  <link rel="stylesheet" href="_ds/netscript-ns-one-ec262e10-d4ad-451f-9aeb-e51955db3634/_ns_styles.css">
+  <link rel="stylesheet" href="assets/proto.css">
+  <link rel="stylesheet" href="assets/ns-ext.css">
+  <style>
+    body { margin: 0; background: var(--ns-bg); color: var(--ns-fg); font-family: var(--ns-font-sans); }
+    a { color: var(--ns-primary); }
+    a:hover { color: var(--ns-primary-hover, var(--ns-primary)); }
+  </style>
+</helmet>
+<div class="ns-dashboard">
+  <div class="ns-dashboard__sidebar-backdrop {{ backdropClass }}" onClick="{{ closeMobileNav }}"></div>
+  <aside class="ns-dashboard__sidebar ns-sidenav {{ sidebarClass }} {{ railClass }}">
+    <div class="ns-dashboard__sidebar-header ns-sidenav__header">
+      <button class="ns-sidenav__brand" onClick="{{ goHome }}" aria-label="NetScript dev — Home">
+        <span class="ns-sidenav__mark" aria-hidden="true">n<span class="ns-sidenav__mark-dot"></span></span>
+        <span class="ns-sidenav__wordmark"><span class="ns-topbar__brand"><em>net</em>script</span><span class="ns-sidenav__brand-sub">dev dashboard</span></span>
+      </button>
+      <button class="ns-iconbtn ns-sidenav__rail-toggle ns-hide-mobile" aria-label="Collapse sidebar" aria-pressed="{{ railPressed }}" onClick="{{ toggleRail }}">{{ railGlyph }}</button>
+      <button class="ns-iconbtn ns-sidenav__close ns-hide-desktop" aria-label="Close navigation" onClick="{{ closeMobileNav }}">✕</button>
+    </div>
+    <nav class="ns-dashboard__sidebar-body ns-sidenav__body" aria-label="Console navigation">
+      <sc-for list="{{ navGroups }}" as="grp" hint-placeholder-count="3">
+        <div class="ns-dashboard__nav-group ns-sidenav__group">
+          <div class="ns-dashboard__nav-group-label ns-sidenav__group-label">{{ grp.label }}</div>
+          <sc-for list="{{ grp.items }}" as="it" hint-placeholder-count="4">
+            <button class="ns-dashboard__nav-item ns-sidenav__item" style="border:0;background:transparent;cursor:pointer;text-align:left;width:100%;font:inherit" aria-current="{{ it.ariaCurrent }}" title="{{ it.label }}" onClick="{{ it.go }}">
+              <span class="ns-dashboard__nav-icon ns-sidenav__icon" aria-hidden="true">{{ it.icon }}</span>
+              <span class="ns-dashboard__nav-label ns-sidenav__label">{{ it.label }}</span>
+              <sc-if value="{{ it.count }}" hint-placeholder-val="{{ false }}">
+                <span class="ns-dashboard__nav-badge ns-sidenav__badge" data-tone="{{ it.badgeTone }}">{{ it.count }}</span>
+              </sc-if>
+              <span class="ns-sidenav__item-rail" aria-hidden="true"></span>
+            </button>
+          </sc-for>
+        </div>
+      </sc-for>
+      <div class="ns-sidenav__group ns-sidenav__group--pinned">
+        <div class="ns-sidenav__group-label ns-sidenav__pinned-label">
+          <span>pinned</span>
+          <span class="ns-sidenav__pinned-hint" aria-hidden="true">⌘·</span>
+        </div>
+        <sc-for list="{{ pinned }}" as="pn" hint-placeholder-count="3">
+          <button class="ns-sidenav__pin" onClick="{{ pn.go }}" title="{{ pn.label }}">
+            <span class="ns-sidenav__pin-dot" data-tone="{{ pn.tone }}" aria-hidden="true"></span>
+            <span class="ns-sidenav__pin-label">{{ pn.label }}</span>
+            <span class="ns-kbd ns-sidenav__pin-kbd">{{ pn.kbd }}</span>
+          </button>
+        </sc-for>
+      </div>
+    </nav>
+    <div class="ns-dashboard__sidebar-footer ns-sidenav__footer">
+      <div class="ns-sidenav__workspace">
+        <span class="ns-sidenav__ws-dot" data-state="{{ envState }}" aria-hidden="true"></span>
+        <span class="ns-sidenav__ws-main">
+          <span class="ns-sidenav__ws-name">my-app</span>
+          <span class="ns-sidenav__ws-meta">local · aspire · <span data-state="{{ envState }}" class="ns-sidenav__ws-state">{{ envLabel }}</span></span>
+        </span>
+        <span class="ns-kbd ns-sidenav__ws-switch" aria-hidden="true">⇅</span>
+      </div>
+      <button class="ns-sidenav__profile" onClick="{{ openCmdk }}" aria-label="Workspace account">
+        <span class="ns-avatar ns-avatar--sm ns-sidenav__avatar" aria-hidden="true">NS</span>
+        <span class="ns-sidenav__profile-main">
+          <span class="ns-sidenav__profile-name">dev@local <span class="ns-sidenav__profile-verify" aria-hidden="true">✓</span></span>
+          <span class="ns-sidenav__profile-role">workspace owner</span>
+        </span>
+        <span class="ns-sidenav__profile-chevron" aria-hidden="true">›</span>
+      </button>
+    </div>
+  </aside>
+  <div class="ns-dashboard__main">
+    <header class="ns-dashboard__topbar ns-topbar2">
+      <div class="ns-dashboard__topbar-start ns-topbar2__start">
+        <button class="ns-iconbtn ns-dashboard__mobile-trigger" aria-label="Open navigation" onClick="{{ openMobileNav }}">☰</button>
+        <div class="ns-topbar2__heading">
+          <sc-if value="{{ hasCrumbTrail }}" hint-placeholder-val="{{ false }}">
+            <nav aria-label="Breadcrumb">
+              <ol class="ns-breadcrumb ns-topbar2__crumbs">
+                <sc-for list="{{ crumbs }}" as="cr" hint-placeholder-count="1">
+                  <li class="ns-breadcrumb__item">
+                    <sc-if value="{{ cr.sep }}" hint-placeholder-val="{{ false }}"><span class="ns-breadcrumb__separator" aria-hidden="true">/</span></sc-if>
+                    <sc-if value="{{ cr.current }}" hint-placeholder-val="{{ true }}"><span class="ns-breadcrumb__current">{{ cr.label }}</span></sc-if>
+                    <sc-if value="{{ cr.link }}" hint-placeholder-val="{{ false }}"><button class="ns-breadcrumb__link" style="border:0;background:transparent;cursor:pointer;font:inherit;color:var(--ns-primary);padding:0" onClick="{{ cr.go }}">{{ cr.label }}</button></sc-if>
+                  </li>
+                </sc-for>
+              </ol>
+            </nav>
+          </sc-if>
+          <sc-if value="{{ hasCrumbTrail }}" hint-placeholder-val="{{ true }}"><span class="ns-topbar2__eyebrow">{{ envEyebrow }}</span></sc-if>
+          <h2 class="ns-topbar2__title">{{ crumb }}</h2>
+        </div>
+      </div>
+      <div class="ns-dashboard__topbar-end ns-topbar2__end">
+        <span class="ns-envbar ns-hide-mobile ns-topbar2__env" data-state="{{ envState }}" title="{{ addrFull }}">
+          <span class="ns-envbar__dot" aria-hidden="true"></span>
+          <span class="ns-envbar__seg">local</span>
+          <span class="ns-envbar__seg" data-part="app">my-app</span>
+          <span class="ns-envbar__seg">aspire</span>
+        </span>
+        <button class="ns-search ns-topbar2__search ns-hide-mobile" onClick="{{ openCmdk }}">
+          <span class="ns-search__icon" aria-hidden="true">⌕</span>
+          <span class="ns-search__label">Search routes, runs, correlations…</span>
+          <span class="ns-kbd ns-search__kbd">⌘K</span>
+        </button>
+        <button class="ns-iconbtn ns-topbar2__search-mini ns-hide-desktop" aria-label="Search" onClick="{{ openCmdk }}">⌕</button>
+        <button class="ns-btn ns-btn--primary ns-btn--sm ns-topbar2__ask ns-hide-mobile" onClick="{{ openAsk }}"><span class="ns-topbar2__ask-glyph" aria-hidden="true">✦</span> Ask</button>
+        <button class="ns-btn ns-btn--secondary ns-btn--sm ns-topbar2__aspire ns-hide-mobile" onClick="{{ openAspire }}">Open Aspire <span aria-hidden="true">↗</span></button>
+        <span class="ns-topbar2__divider ns-hide-mobile" aria-hidden="true"></span>
+        <button class="ns-theme-toggle ns-topbar2__theme" aria-label="Toggle theme" onClick="{{ toggleTheme }}">{{ themeGlyph }}</button>
+      </div>
+    </header>
+    <main class="ns-dashboard__content">
+
+      <sc-if value="{{ isHome }}" hint-placeholder-val="{{ true }}">
+        <div class="ns-screen ns-home" data-screen-label="S1 Home">
+          <header class="ns-page-header ns-page-header--console ns-home__header">
+            <div class="ns-toolbar">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <h1>Wiring home</h1>
+                <p class="ns-lede">Is my app wired the way I declared it — and where do I jump to fix it. Facts only NetScript can compute; everything else hands off.</p>
+              </div>
+              <div class="ns-cluster ns-cluster--sm">
+                <button class="ns-btn ns-btn--secondary" onClick="{{ openAspire }}">Open Aspire Dashboard</button>
+              </div>
+            </div>
+            <div class="ns-status-bar">
+              <span class="ns-livedot">live</span>
+              <span class="ns-status-sep">·</span>
+              <span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs)">{{ clock }}</span>
+              <span class="ns-status-sep">·</span>
+              <span style="font-size:var(--ns-text-xs)">launched by <span class="ns-inline-code">netscript dev</span> · Aspire ⇄ this dashboard via its <span class="ns-inline-code">NetScript Dashboard</span> resource URL</span>
+            </div>
+          </header>
+
+          <!-- KPI band: throughput hero (Conversion-Rate archetype) + rich stat tiles -->
+          <div class="ns-home__kpis">
+            <!-- Hero throughput card: hero value + delta + funnel table + filled area chart w/ grid + axis -->
+            <section class="ns-card ns-throughput" data-tone="{{ s1Hero.tone }}">
+              <div class="ns-throughput__head">
+                <div class="ns-throughput__title-wrap">
+                  <span class="ns-throughput__eyebrow">{{ s1Hero.label }}</span>
+                  <span class="ns-throughput__value">{{ s1Hero.value }}<span class="ns-throughput__unit">{{ s1Hero.unit }}</span><span class="ns-deltachip ns-throughput__delta" data-tone="{{ s1Hero.deltaTone }}">{{ s1Hero.delta }}</span></span>
+                </div>
+                <button class="ns-cardaction" onClick="{{ s1Hero.go }}">Details</button>
+              </div>
+              <div class="ns-funnel">
+                <sc-for list="{{ s1Hero.funnel }}" as="fn" hint-placeholder-count="3">
+                  <button class="ns-funnel__row" onClick="{{ fn.go }}">
+                    <span class="ns-funnel__label">{{ fn.label }}</span>
+                    <span class="ns-funnel__metric">{{ fn.metric }}</span>
+                    <span class="ns-trendarrow" data-dir="{{ fn.dir }}"><span class="ns-trendarrow__glyph" aria-hidden="true">{{ fn.arrow }}</span>{{ fn.delta }}</span>
+                  </button>
+                </sc-for>
+              </div>
+              <div class="ns-areachart" data-series="{{ s1Hero.series }}" data-compare="{{ s1Hero.compare }}" data-tone="{{ s1Hero.tone }}" role="img" aria-label="{{ s1Hero.aria }}">
+                <svg class="ns-areachart__svg" viewBox="0 0 300 96" preserveAspectRatio="none" aria-hidden="true"></svg>
+                <div class="ns-areachart__axis">
+                  <sc-for list="{{ s1Hero.axis }}" as="ax" hint-placeholder-count="6"><span>{{ ax }}</span></sc-for>
+                </div>
+              </div>
+            </section>
+
+            <!-- Rich stat tiles (executions siblings) -->
+            <div class="ns-home__kpi-tiles">
+              <sc-for list="{{ s1Kpis }}" as="k" hint-placeholder-count="3">
+                <button class="ns-kpi" data-tone="{{ k.tone }}" data-series="{{ k.series }}" onClick="{{ k.go }}">
+                  <span class="ns-kpi__label">{{ k.label }}<span class="ns-kpi__arrow" aria-hidden="true">→</span></span>
+                  <span class="ns-kpi__value">{{ k.value }}<span class="ns-kpi__delta ns-deltachip" data-tone="{{ k.deltaTone }}">{{ k.delta }}</span></span>
+                  <span class="ns-kpi__foot">{{ k.foot }}</span>
+                  <svg class="ns-kpi__spark" viewBox="0 0 100 34" preserveAspectRatio="none" aria-hidden="true"></svg>
+                </button>
+              </sc-for>
+            </div>
+          </div>
+
+          <!-- Hero band: incident summary + wiring-health gauge -->
+          <div class="ns-home__hero">
+            <div class="ns-incident" data-state="ready">
+              <div class="ns-incident__head">Incident summary</div>
+              <div class="ns-incident__summary">{{ s1Ai.text }}</div>
+              <div class="ns-incident__grounding">
+                <span class="ns-assist__grounding-label">grounded in</span>
+                <sc-for list="{{ s1Ai.grounding }}" as="g" hint-placeholder-count="3">
+                  <button class="ns-ground" style="font:inherit" onClick="{{ g.go }}">{{ g.label }}</button>
+                </sc-for>
+              </div>
+              <div class="ns-incident__actions">
+                <sc-for list="{{ s1Ai.chips }}" as="ch" hint-placeholder-count="4">
+                  <button class="ns-ai-chip" onClick="{{ ch.go }}">{{ ch.label }}</button>
+                </sc-for>
+              </div>
+              <div class="ns-incident__meta">{{ s1Ai.meta }}</div>
+            </div>
+
+            <section class="ns-card ns-gaugecard">
+              <div class="ns-gaugecard__head">
+                <span class="ns-card__title">Wiring health</span>
+                <span class="ns-badge {{ s1Gauge.badgeClass }}">{{ s1Gauge.verdict }}</span>
+              </div>
+              <div class="ns-gauge" data-tone="{{ s1Gauge.tone }}" data-value="{{ s1Gauge.pct }}" role="img" aria-label="{{ s1Gauge.aria }}">
+                <div class="ns-gauge__ring"><div class="ns-gauge__mask"></div></div>
+                <div class="ns-gauge__center">
+                  <span class="ns-gauge__value">{{ s1Gauge.value }}</span>
+                  <span class="ns-gauge__caption">{{ s1Gauge.caption }}</span>
+                </div>
+              </div>
+              <div class="ns-gaugecard__stats">
+                <sc-for list="{{ s1Gauge.stats }}" as="gs" hint-placeholder-count="3">
+                  <button class="ns-gaugecard__stat" onClick="{{ gs.go }}">
+                    <span class="ns-gaugecard__stat-dot" data-tone="{{ gs.tone }}" aria-hidden="true"></span>
+                    <span class="ns-gaugecard__stat-val">{{ gs.value }}</span>
+                    <span class="ns-gaugecard__stat-label">{{ gs.label }}</span>
+                  </button>
+                </sc-for>
+              </div>
+            </section>
+          </div>
+
+          <!-- Analysis band: outcomes channel bar · capability donut · wiring signals -->
+          <div class="ns-home__analysis">
+            <section class="ns-card ns-panelcard ns-outcomes">
+              <div class="ns-panelcard__head">
+                <div class="ns-panelcard__title-wrap">
+                  <span class="ns-card__title">Execution outcomes</span>
+                  <span class="ns-panelcard__sub">last 24h · declared vs. running</span>
+                </div>
+                <button class="ns-cardaction" onClick="{{ s1Channel.go }}">Runs →</button>
+              </div>
+              <div class="ns-panelcard__body">
+                <div class="ns-outcomes__hero">
+                  <span class="ns-outcomes__value">{{ s1Channel.completedPct }}</span>
+                  <span class="ns-outcomes__hero-meta"><span class="ns-trendarrow" data-dir="up"><span class="ns-trendarrow__glyph" aria-hidden="true">↑</span>+2.1%</span> completed · {{ s1Channel.total }} runs</span>
+                </div>
+                <div class="ns-channelbar" role="img" aria-label="{{ s1Channel.aria }}">
+                  <sc-for list="{{ s1Channel.segs }}" as="cs" hint-placeholder-count="3">
+                    <span class="ns-channelbar__seg" data-tone="{{ cs.tone }}" style="{{ cs.style }}"></span>
+                  </sc-for>
+                </div>
+                <div class="ns-legend">
+                  <sc-for list="{{ s1Channel.segs }}" as="cs" hint-placeholder-count="3">
+                    <span class="ns-legend__item"><span class="ns-legend__dot" data-tone="{{ cs.tone }}"></span>{{ cs.label }} <b>{{ cs.pctLabel }}</b></span>
+                  </sc-for>
+                </div>
+                <div class="ns-datatable">
+                  <div class="ns-datatable__head">
+                    <span class="ns-datatable__h">Primitive</span>
+                    <span class="ns-datatable__h ns-datatable__h--num">Instances</span>
+                    <span class="ns-datatable__h ns-datatable__h--num">24h</span>
+                  </div>
+                  <sc-for list="{{ s1Channel.rows }}" as="dr" hint-placeholder-count="3">
+                    <button class="ns-datatable__row" onClick="{{ dr.go }}">
+                      <span class="ns-datatable__cell ns-datatable__cell--lead"><span class="ns-datatable__icon" aria-hidden="true">{{ dr.icon }}</span><span class="ns-datatable__label">{{ dr.label }}</span></span>
+                      <span class="ns-datatable__cell ns-datatable__cell--num">{{ dr.metric }}</span>
+                      <span class="ns-datatable__cell ns-datatable__cell--num"><span class="ns-trendarrow" data-dir="{{ dr.dir }}"><span class="ns-trendarrow__glyph" aria-hidden="true">{{ dr.arrow }}</span>{{ dr.delta }}</span></span>
+                    </button>
+                  </sc-for>
+                </div>
+                <button class="ns-fullbtn" onClick="{{ s1Channel.go }}">View run inspector</button>
+              </div>
+            </section>
+
+            <section class="ns-card ns-panelcard">
+              <div class="ns-panelcard__head">
+                <div class="ns-panelcard__title-wrap">
+                  <span class="ns-card__title">Capability mix</span>
+                  <span class="ns-panelcard__sub">share of 24h activity</span>
+                </div>
+                <button class="ns-cardaction" onClick="{{ s1Donut.go }}">Plugins →</button>
+              </div>
+              <div class="ns-panelcard__body">
+                <div class="ns-donutwrap">
+                  <div class="ns-donut" data-segments="{{ s1Donut.data }}" role="img" aria-label="{{ s1Donut.aria }}">
+                    <div class="ns-donut__ring"></div>
+                    <div class="ns-donut__hole">
+                      <span class="ns-donut__total">{{ s1Donut.total }}</span>
+                      <span class="ns-donut__total-label">plugins</span>
+                    </div>
+                  </div>
+                  <div class="ns-mixstat">
+                    <span class="ns-mixstat__k">busiest</span>
+                    <span class="ns-mixstat__v">Workers</span>
+                    <span class="ns-mixstat__k">idle</span>
+                    <span class="ns-mixstat__v">Sagas</span>
+                  </div>
+                </div>
+                <div class="ns-sharelist">
+                  <sc-for list="{{ s1Donut.segs }}" as="ds" hint-placeholder-count="4">
+                    <button class="ns-shareitem" onClick="{{ ds.go }}">
+                      <span class="ns-legend__dot ns-shareitem__dot" style="{{ ds.dotStyle }}"></span>
+                      <span class="ns-shareitem__label">{{ ds.label }}</span>
+                      <span class="ns-shareitem__bar" aria-hidden="true"><span class="ns-shareitem__fill" style="{{ ds.barStyle }}"></span></span>
+                      <span class="ns-shareitem__val">{{ ds.value }}</span>
+                    </button>
+                  </sc-for>
+                </div>
+              </div>
+            </section>
+
+            <section class="ns-card ns-panelcard">
+              <div class="ns-panelcard__head">
+                <div class="ns-panelcard__title-wrap">
+                  <span class="ns-card__title">Wiring signals</span>
+                  <span class="ns-panelcard__sub">declared vs. running</span>
+                </div>
+                <div class="ns-seg ns-segtime" role="tablist" aria-label="Window">
+                  <sc-for list="{{ s1Seg }}" as="sg" hint-placeholder-count="3">
+                    <button class="ns-seg__btn" data-state="{{ sg.state }}" onClick="{{ sg.set }}">{{ sg.label }}</button>
+                  </sc-for>
+                </div>
+              </div>
+              <div class="ns-panelcard__body">
+                <div class="ns-siglist">
+                  <sc-for list="{{ s1Signals }}" as="sr" hint-placeholder-count="4">
+                    <button class="ns-sigrow" data-tone="{{ sr.tone }}" onClick="{{ sr.go }}">
+                      <span class="ns-sigrow__icon" data-tone="{{ sr.tone }}" aria-hidden="true">{{ sr.icon }}</span>
+                      <span class="ns-sigrow__main">
+                        <span class="ns-sigrow__label">{{ sr.label }}</span>
+                        <span class="ns-sigrow__detail">{{ sr.detail }}</span>
+                      </span>
+                      <span class="ns-badge {{ sr.badgeClass }} ns-sigrow__pill">{{ sr.status }}</span>
+                      <span class="ns-sigrow__chevron" aria-hidden="true">→</span>
+                    </button>
+                  </sc-for>
+                </div>
+              </div>
+            </section>
+          </div>
+
+          <!-- Where to look: deep-linking health grid -->
+          <div class="ns-home__section-head">
+            <span class="ns-mini-label">where to look</span>
+            <span class="ns-home__section-rule" aria-hidden="true"></span>
+            <span class="ns-mini-label">{{ s1WarnCount }} need attention</span>
+          </div>
+          <div class="ns-stats-grid ns-home__statgrid">
+            <sc-for list="{{ s1Stats }}" as="st" hint-placeholder-count="6">
+              <button class="ns-statlink" data-tone="{{ st.tone }}" onClick="{{ st.go }}">
+                <div class="ns-statlink__top">
+                  <span class="ns-statlink__icon" data-tone="{{ st.tone }}" aria-hidden="true">{{ st.icon }}</span>
+                  <span class="ns-statlink__value">{{ st.value }}</span>
+                  <span class="ns-badge {{ st.pillClass }} ns-statlink__pill">{{ st.pill }}</span>
+                </div>
+                <span class="ns-statlink__label">{{ st.label }}</span>
+                <span class="ns-statlink__foot"><span class="ns-statlink__detail">{{ st.detail }}</span><span class="ns-statlink__arrow" aria-hidden="true">→</span></span>
+              </button>
+            </sc-for>
+          </div>
+
+          <!-- Just happened: compact live activity feed (dot + text + entity chip + time pill) -->
+          <div class="ns-home__teaser">
+            <div class="ns-home__teaser-head">
+              <span class="ns-mini-label ns-home__teaser-label">just happened</span>
+              <span class="ns-livedot ns-home__teaser-live">live</span>
+              <span style="flex:1"></span>
+              <button class="ns-cardaction ns-home__teaser-all" onClick="{{ s1Teaser.go }}">Activity log →</button>
+            </div>
+            <div class="ns-home__teaser-items">
+              <sc-for list="{{ s1Teaser.items }}" as="tz" hint-placeholder-count="3">
+                <button class="ns-feedrow" onClick="{{ tz.go }}">
+                  <span class="ns-feedrow__marker" data-tone="{{ tz.tone }}" aria-hidden="true"></span>
+                  <span class="ns-feedrow__text">{{ tz.text }}</span>
+                  <span class="ns-tag ns-feedrow__entity">{{ tz.entity }}</span>
+                  <span class="ns-timepill">{{ tz.time }}</span>
+                  <span class="ns-feedrow__chevron" aria-hidden="true">→</span>
+                </button>
+              </sc-for>
+            </div>
+          </div>
+
+          <!-- Bottom band: command palette + contributed panels -->
+          <div class="ns-home__bottom">
+            <section class="ns-card ns-panelcard ns-palettecard">
+              <div class="ns-panelcard__head">
+                <div class="ns-panelcard__title-wrap">
+                  <span class="ns-card__title">Command palette</span>
+                  <span class="ns-panelcard__sub"><span class="ns-kbd">⌘K</span> from anywhere · type to jump or act</span>
+                </div>
+                <button class="ns-cardaction" onClick="{{ openCmdk }}">Open</button>
+              </div>
+              <div class="ns-palettecard__body">
+                <button class="ns-palettecard__search" onClick="{{ openCmdk }}">
+                  <span class="ns-palettecard__search-icon" aria-hidden="true">⌕</span>
+                  <span class="ns-palettecard__search-label">Search routes, runs, correlations…</span>
+                  <span class="ns-kbd">⌘K</span>
+                </button>
+                <sc-for list="{{ s1CmdGroups }}" as="grp" hint-placeholder-count="3">
+                  <div class="ns-palettegroup">
+                    <span class="ns-palettegroup__label">{{ grp.label }}</span>
+                    <div class="ns-palettegroup__items">
+                      <sc-for list="{{ grp.items }}" as="c" hint-placeholder-count="2">
+                        <button class="ns-cmdrow" onClick="{{ c.run }}">
+                          <span class="ns-cmdrow__icon" aria-hidden="true">{{ c.icon }}</span>
+                          <span class="ns-cmdrow__label">{{ c.label }}</span>
+                          <span class="ns-cmdrow__kind" data-ext="{{ c.ext }}">{{ c.hint }}</span>
+                          <span class="ns-kbd ns-cmdrow__kbd">{{ c.kbd }}</span>
+                        </button>
+                      </sc-for>
+                    </div>
+                  </div>
+                </sc-for>
+              </div>
+            </section>
+
+            <section class="ns-card ns-panelcard">
+              <div class="ns-panelcard__head">
+                <div class="ns-panelcard__title-wrap">
+                  <span class="ns-card__title">Contributed panels</span>
+                  <span class="ns-panelcard__sub">via <span class="ns-inline-code">DashboardPanelContribution</span></span>
+                </div>
+                <span class="ns-badge ns-badge--muted">{{ s1ContribCount }} mounted</span>
+              </div>
+              <div class="ns-panelcard__body ns-panelcard__body--flush">
+                <div class="ns-contribtable">
+                  <div class="ns-contribtable__head">
+                    <span class="ns-datatable__h">Plugin</span><span class="ns-datatable__h">Panel</span><span class="ns-datatable__h">Mount target</span>
+                  </div>
+                  <sc-for list="{{ s1Contribs }}" as="p" hint-placeholder-count="6">
+                    <button class="ns-contribtable__row" onClick="{{ p.go }}">
+                      <span class="ns-badge ns-badge--secondary ns-contribtable__plugin">{{ p.plugin }}</span>
+                      <span class="ns-contribtable__panel"><span class="ns-contribtable__icon" aria-hidden="true">{{ p.icon }}</span>{{ p.panel }}</span>
+                      <span class="ns-contribtable__mount">{{ p.mount }}<span class="ns-contribtable__chevron" aria-hidden="true">→</span></span>
+                    </button>
+                  </sc-for>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </sc-if>
+
+      <sc-if value="{{ isConfig }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen ns-config" data-screen-label="S2 Config Resolution">
+          <!-- ===== Header composite: title + inline resolution stat bar + precedence legend (ref 19) ===== -->
+          <header class="ns-cfghero">
+            <div class="ns-cfghero__lead">
+              <div class="ns-cfghero__titles">
+                <h1>Config resolution</h1>
+                <p class="ns-lede">How every effective value is resolved through layered sources — framework defaults, package defaults, the env profile, then runtime overrides. Highest precedence wins; the rest are shadowed.</p>
+              </div>
+              <div class="ns-cfghero__meta">
+                <span class="ns-cfghero__resolved">resolved {{ clock }} · re-resolves on <code>netscript dev</code> reload</span>
+                <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s2OpenAspire }}">netscript.config ↗</button>
+              </div>
+            </div>
+            <div class="ns-cfghero__strip" role="group" aria-label="Resolution summary">
+              <sc-for list="{{ cfgHeadStats }}" as="st" hint-placeholder-count="4">
+                <div class="ns-cfghero__cell" data-viz="{{ st.viz }}">
+                  <span class="ns-cfghero__cell-label">{{ st.label }}</span>
+                  <div class="ns-cfghero__cell-figure">
+                    <span class="ns-cfghero__cell-value" data-tone="{{ st.tone }}">{{ st.value }}</span>
+                    <sc-if value="{{ st.meterPct }}" hint-placeholder-val="{{ false }}">
+                      <span class="ns-cfghero__meter" data-tone="{{ st.tone }}" aria-hidden="true"><span class="ns-cfghero__meter-fill" style="{{ 'width:' + st.meterPct }}"></span></span>
+                    </sc-if>
+                    <sc-if value="{{ st.pips }}" hint-placeholder-val="{{ false }}">
+                      <span class="ns-cfghero__pips" data-tone="{{ st.tone }}" aria-hidden="true"><sc-for list="{{ st.pips }}" as="p" hint-placeholder-count="3"><span class="ns-cfghero__pip"></span></sc-for></span>
+                    </sc-if>
+                    <sc-if value="{{ st.ticks }}" hint-placeholder-val="{{ false }}">
+                      <span class="ns-cfghero__ticks" aria-hidden="true"><sc-for list="{{ st.ticks }}" as="tk" hint-placeholder-count="6"><span class="ns-cfghero__tick"></span></sc-for></span>
+                    </sc-if>
+                    <sc-if value="{{ st.rankPips }}" hint-placeholder-val="{{ false }}">
+                      <span class="ns-cfghero__rank" data-tone="{{ st.tone }}" aria-hidden="true"><sc-for list="{{ st.rankPips }}" as="rp" hint-placeholder-count="4"><span class="ns-cfghero__rank-pip" data-active="{{ rp.active }}"></span></sc-for></span>
+                    </sc-if>
+                  </div>
+                  <span class="ns-cfghero__cell-sub">{{ st.sub }}</span>
+                </div>
+              </sc-for>
+              <div class="ns-cfghero__legend" aria-label="Precedence order, low to high">
+                <span class="ns-cfghero__legend-label">precedence →</span>
+                <sc-for list="{{ cfgLegend }}" as="lg" hint-placeholder-count="4">
+                  <span class="ns-cfglayerchip" data-tone="{{ lg.tone }}"><span class="ns-cfglayerchip__ord">{{ lg.ord }}</span><span class="ns-cfglayerchip__glyph" aria-hidden="true">{{ lg.glyph }}</span>{{ lg.label }}</span>
+                </sc-for>
+              </div>
+            </div>
+          </header>
+
+          <div class="ns-config__body">
+            <!-- ===== LEFT: effective-config ledger table (key → value → winning layer → source) (ref 11) ===== -->
+            <section class="ns-cfgtable" aria-label="Effective configuration">
+              <div class="ns-cfgtable__head">
+                <span class="ns-cfgtable__title">Effective config</span>
+                <span class="ns-cfgtable__count">{{ cfgSelLayerCount }} layers · select a key</span>
+              </div>
+              <div class="ns-cfgtable__filters" role="tablist" aria-label="Namespace filter">
+                <sc-for list="{{ cfgNsChips }}" as="c" hint-placeholder-count="5">
+                  <button class="ns-cfgnschip" data-state="{{ c.state }}" onClick="{{ c.set }}">{{ c.label }}<span class="ns-cfgnschip__count">{{ c.count }}</span></button>
+                </sc-for>
+              </div>
+              <div class="ns-cfgtable__cols">
+                <span class="ns-cfgtable__col ns-cfgtable__col--key">key ▾</span>
+                <span class="ns-cfgtable__col ns-cfgtable__col--val">effective</span>
+                <span class="ns-cfgtable__col ns-cfgtable__col--win">winning layer</span>
+              </div>
+              <div class="ns-cfgtable__rows">
+                <sc-for list="{{ cfgRows }}" as="r" hint-placeholder-count="6">
+                  <button class="ns-cfgrow" data-state="{{ r.rowState }}" aria-pressed="{{ r.selected }}" onClick="{{ r.select }}">
+                    <span class="ns-cfgrow__key">
+                      <span class="ns-cfgrow__ns">{{ r.ns }}</span>
+                      <span class="ns-cfgrow__name">{{ r.key }}</span>
+                    </span>
+                    <span class="{{ r.valClass }}">{{ r.effective }}<span class="ns-cfgrow__unit">{{ r.unit }}</span></span>
+                    <span class="ns-cfgrow__win">
+                      <span class="ns-cfglayerchip ns-cfglayerchip--sm" data-tone="{{ r.winTone }}">{{ r.winLabel }}</span>
+                      <sc-if value="{{ r.hasOverride }}" hint-placeholder-val="{{ true }}"><span class="ns-cfgrow__ovr" title="runtime override active">override</span></sc-if>
+                      <sc-if value="{{ r.shadowCount }}" hint-placeholder-val="{{ 1 }}"><span class="ns-cfgrow__shadow">{{ r.shadowCount }} shadowed</span></sc-if>
+                    </span>
+                  </button>
+                </sc-for>
+                <sc-if value="{{ cfgHasRows }}" hint-placeholder-val="{{ true }}"></sc-if>
+              </div>
+            </section>
+
+            <!-- ===== RIGHT: resolution panel — key header, HERO waterfall, override diff, provenance trail ===== -->
+            <section class="ns-cfgres" aria-label="Resolution detail">
+              <div class="ns-cfgres__keyhead">
+                <div class="ns-cfgres__keyhead-main">
+                  <span class="ns-cfgres__eyebrow">{{ cfgSelNs }} · {{ cfgSelType }}</span>
+                  <span class="ns-cfgres__key">{{ cfgSelKey }}</span>
+                  <span class="ns-cfgres__note">{{ cfgSelNote }}</span>
+                </div>
+                <div class="ns-cfgres__keyhead-eff">
+                  <span class="ns-cfgres__eff-label">effective</span>
+                  <span class="ns-cfgres__eff-value">{{ cfgSelEffective }}<span class="ns-cfgres__eff-unit">{{ cfgSelEffUnit }}</span></span>
+                  <span class="ns-cfglayerchip" data-tone="{{ cfgSelWinTone }}">wins · {{ cfgSelWinLabel }}</span>
+                </div>
+              </div>
+
+              <!-- HERO: layer-precedence waterfall — value cascades down; winner elevated, shadowed struck -->
+              <div class="ns-cfgwater" aria-label="Precedence waterfall">
+                <div class="ns-cfgwater__spine" aria-hidden="true"></div>
+                <sc-for list="{{ cfgWater }}" as="w" hint-placeholder-count="4">
+                  <div class="ns-cfgwater__layer" data-state="{{ w.state }}" data-tone="{{ w.tone }}" data-collapsed="{{ w.collapsed }}">
+                    <span class="ns-cfgwater__rail" aria-hidden="true">
+                      <span class="ns-cfgwater__ord">{{ w.ord }}</span>
+                      <span class="ns-cfgwater__dot"></span>
+                    </span>
+                    <sc-if value="{{ w.present }}" hint-placeholder-val="{{ true }}">
+                      <div class="ns-cfgwater__card">
+                        <div class="ns-cfgwater__card-head">
+                          <span class="ns-cfgwater__glyph" aria-hidden="true">{{ w.glyph }}</span>
+                          <span class="ns-cfgwater__layer-name">{{ w.label }}</span>
+                          <sc-if value="{{ w.isWinner }}" hint-placeholder-val="{{ true }}"><span class="ns-cfgwater__winpill">wins</span></sc-if>
+                          <sc-if value="{{ w.isShadowed }}" hint-placeholder-val="{{ false }}"><span class="ns-cfgwater__shadowpill">shadowed</span></sc-if>
+                          <span class="ns-cfgwater__flex"></span>
+                          <span class="{{ w.valClass }}">{{ w.value }}</span>
+                        </div>
+                        <sc-if value="{{ w.hasProv }}" hint-placeholder-val="{{ true }}">
+                          <span class="ns-cfgwater__prov"><span class="ns-cfgwater__prov-label">from</span><code>{{ w.provenance }}</code></span>
+                        </sc-if>
+                      </div>
+                    </sc-if>
+                    <sc-if value="{{ w.silent }}" hint-placeholder-val="{{ false }}">
+                      <span class="ns-cfgwater__pip">
+                        <span class="ns-cfgwater__pip-name">{{ w.label }}</span>
+                        <span class="ns-cfgwater__pip-note">— {{ w.pipNote }}</span>
+                      </span>
+                    </sc-if>
+                    <sc-if value="{{ w.hasEdge }}" hint-placeholder-val="{{ true }}">
+                      <span class="ns-cfgwater__edge" aria-hidden="true">{{ w.edge }}</span>
+                    </sc-if>
+                  </div>
+                </sc-for>
+              </div>
+
+              <!-- Override diff (ref 13): base value the override shadows vs the runtime override -->
+              <sc-if value="{{ cfgHasDiff }}" hint-placeholder-val="{{ true }}">
+                <div class="ns-cfgdiff" aria-label="Override diff">
+                  <div class="ns-cfgdiff__head">
+                    <span class="ns-cfgdiff__title">override diff</span>
+                    <span class="ns-cfgdiff__vers">
+                      <span class="ns-cfglayerchip ns-cfglayerchip--sm" data-tone="{{ cfgDiff.baseTone }}">{{ cfgDiff.baseLabel }}</span>
+                      <span class="ns-cfgdiff__arrow" aria-hidden="true">→</span>
+                      <span class="ns-cfglayerchip ns-cfglayerchip--sm" data-tone="{{ cfgDiff.overTone }}">{{ cfgDiff.overLabel }}</span>
+                    </span>
+                  </div>
+                  <div class="ns-cfgdiff__panes">
+                    <div class="ns-cfgdiff__pane">
+                      <span class="ns-cfgdiff__pane-src"><span class="ns-cfgdiff__pane-tag" data-side="base">− shadowed</span><code>{{ cfgDiff.baseSrc }}</code></span>
+                      <span class="ns-cfgdiff__hunk">{{ cfgDiff.hunk }}</span>
+                      <sc-for list="{{ cfgDiff.baseLines }}" as="ln" hint-placeholder-count="3">
+                        <span class="ns-cfgdiff__line" data-op="{{ ln.op }}"><span class="ns-cfgdiff__n">{{ ln.n }}</span><span class="ns-cfgdiff__code">{{ ln.text }}</span></span>
+                      </sc-for>
+                    </div>
+                    <div class="ns-cfgdiff__pane">
+                      <span class="ns-cfgdiff__pane-src"><span class="ns-cfgdiff__pane-tag" data-side="over">+ effective</span><code>{{ cfgDiff.overSrc }}</code></span>
+                      <span class="ns-cfgdiff__hunk">{{ cfgDiff.hunk }}</span>
+                      <sc-for list="{{ cfgDiff.overLines }}" as="ln" hint-placeholder-count="3">
+                        <span class="ns-cfgdiff__line" data-op="{{ ln.op }}"><span class="ns-cfgdiff__n">{{ ln.n }}</span><span class="ns-cfgdiff__code">{{ ln.text }}</span></span>
+                      </sc-for>
+                    </div>
+                  </div>
+                </div>
+              </sc-if>
+
+              <!-- Resolution trail / provenance — every contributing layer, shadowed struck through -->
+              <div class="ns-cfgtrail" aria-label="Resolution trail">
+                <div class="ns-cfgtrail__head"><span class="ns-cfgtrail__title">resolution trail</span><span class="ns-cfgtrail__sub">{{ cfgSelShadowCount }} shadowed · {{ cfgSelLayerCount }} contributing</span></div>
+                <sc-for list="{{ cfgTrail }}" as="t" hint-placeholder-count="3">
+                  <div class="ns-cfgtrail__row" data-state="{{ t.state }}" data-tone="{{ t.tone }}">
+                    <span class="ns-cfgtrail__glyph" aria-hidden="true">{{ t.glyph }}</span>
+                    <span class="ns-cfgtrail__layer">{{ t.label }}</span>
+                    <span class="{{ t.valClass }}">{{ t.value }}</span>
+                    <code class="ns-cfgtrail__src">{{ t.src }}</code>
+                    <sc-if value="{{ t.isWin }}" hint-placeholder-val="{{ true }}"><span class="ns-cfgtrail__win">winning</span></sc-if>
+                  </div>
+                </sc-for>
+                <div class="ns-cfgtrail__actions">
+                  <button class="ns-btn ns-btn--secondary ns-btn--sm" onClick="{{ s2GoRuntime }}">Open override store →</button>
+                  <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s2ViewPlugin }}">View plugin</button>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </sc-if>
+
+      <!-- @S2-END -->
+      <sc-if value="{{ isRuntime }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen ns-runtime" data-screen-label="S3 Runtime Config">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-toolbar">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <div class="ns-catcrumb" aria-hidden="true"><span class="ns-catcrumb__root">Override store</span><span class="ns-catcrumb__sep">›</span><span class="ns-catcrumb__leaf">current · {{ s3Head.rev }}</span></div>
+                <h1>Runtime config</h1>
+              </div>
+            </div>
+          </header>
+
+          <!-- header composite: override-store micro-viz (NOT number cards) -->
+          <div class="ns-card ns-card--console ns-rchead">
+            <div class="ns-rchead__cell ns-rchead__cell--total">
+              <div class="ns-rchead__main">
+                <span class="ns-rchead__value">{{ s3Head.total }}</span>
+                <span class="ns-rchead__label">active overrides</span>
+              </div>
+              <span class="ns-rchead__sub">{{ s3Head.typeSummary }}</span>
+            </div>
+            <div class="ns-rchead__cell">
+              <span class="ns-rchead__label">diverging from base</span>
+              <div class="ns-rchead__proportion"><strong>{{ s3Head.divN }} / {{ s3Head.baseN }}</strong><span>keys · {{ s3Head.divPct }}</span></div>
+              <span class="ns-rchead__sub">resolved keys with a runtime value</span>
+            </div>
+            <div class="ns-rchead__cell">
+              <span class="ns-rchead__label">last revision</span>
+              <div class="ns-rchead__rev">
+                <span class="ns-rchead__revtag">{{ s3Head.rev }}</span>
+                <div class="ns-rchead__revmeta"><span class="ns-rchead__revby">{{ s3Head.revBy }}</span><span class="ns-rchead__revat">{{ s3Head.revAt }}</span></div>
+              </div>
+              <span class="ns-rchead__sub">writes append a new store revision</span>
+            </div>
+            <div class="ns-rchead__cell">
+              <span class="ns-rchead__label">hot-reload</span>
+              <div class="ns-rchead__reload" data-tone="{{ s3Head.reloadTone }}">
+                <span class="ns-rchead__reload-main">{{ s3Head.reloadLabel }}</span>
+              </div>
+              <span class="ns-rchead__sub">{{ s3Head.reloadDetail }}</span>
+            </div>
+          </div>
+
+          <div class="ns-runtime__grid">
+            <div class="ns-runtime__main">
+              <!-- HERO: the live override set — one dense editable-looking store -->
+              <section class="ns-card ns-card--console ns-data-table ns-data-table--console ns-ovstore" style="background:var(--ns-card)">
+                <div class="ns-card__header ns-data-table__header ns-ovstore__head">
+                  <div class="ns-ovstore__head-l">
+                    <span class="ns-card__title">Live override set</span>
+                  </div>
+                  <span class="ns-livedot" data-state="{{ s3LiveState }}">sse</span>
+                </div>
+                <div class="ns-ovstore__cols" aria-hidden="true">
+                  <span>override key</span><span>base → value</span><span class="ns-ovstore__col-prov">applied</span><span class="ns-ovstore__col-rl">reload</span><span>actions</span>
+                </div>
+                <div class="ns-data-table__body ns-ovstore__body">
+                  <sc-for list="{{ s3Store }}" as="o" hint-placeholder-count="5">
+                    <div class="ns-data-table__row ns-ovrow" data-kind="{{ o.kind }}" data-sel="{{ o.selState }}">
+                      <button class="ns-ovrow__key" onClick="{{ o.select }}">
+                        <span class="ns-ovrow__keytext">{{ o.key }}</span>
+                      </button>
+                      <div class="ns-ovrow__val">
+                        <span class="ns-ovrow__base">{{ o.base }}</span>
+                        <span class="ns-ovrow__arrow" aria-hidden="true">→</span>
+                        <span class="{{ o.valClass }}">{{ o.val }}</span>
+                      </div>
+                      <div class="ns-ovrow__prov">
+                        <span class="ns-ovrow__by">{{ o.by }}</span>
+                        <span class="ns-ovrow__at">{{ o.at }} · {{ o.rev }}</span>
+                      </div>
+                      <span class="ns-badge ns-badge--muted ns-ovrow__rl" data-state="{{ o.reload }}">{{ o.reloadLabel }}</span>
+                      <button class="{{ o.actClass }} ns-ovrow__act" onClick="{{ o.act }}">{{ o.actLabel }}</button>
+                    </div>
+                  </sc-for>
+                  <sc-if value="{{ s3NoStore }}" hint-placeholder-val="{{ false }}">
+                    <div class="ns-empty-state ns-empty-state--ov" style="margin:var(--ns-space-3)"><span class="ns-empty-state__heading">Store is clean</span> Nothing overridden — runtime config resolves entirely to defaults.</div>
+                  </sc-if>
+                </div>
+              </section>
+
+              <!-- Revision history — the config-store revision log with rollback -->
+              <section class="ns-card ns-card--console" style="background:var(--ns-card)">
+                <div class="ns-card__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border);flex-direction:row;align-items:center;justify-content:space-between">
+                  <div style="display:grid;gap:2px">
+                    <span class="ns-card__title">Revision history</span>
+                    <span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs);color:var(--ns-muted-fg)">store revisions over time · roll back to any</span>
+                  </div>
+                  <div class="ns-tabs--underline ns-rctabs" role="tablist" aria-label="Diff view">
+                    <button class="ns-rctabs__tab" role="tab" aria-selected="{{ s3SegAll.state }}" data-state="{{ s3SegAll.state }}" onClick="{{ s3SegAll.set }}">All</button>
+                    <button class="ns-rctabs__tab" role="tab" aria-selected="{{ s3SegCompact.state }}" data-state="{{ s3SegCompact.state }}" onClick="{{ s3SegCompact.set }}">Compact</button>
+                    <button class="ns-rctabs__tab" role="tab" aria-selected="{{ s3SegJson.state }}" data-state="{{ s3SegJson.state }}" onClick="{{ s3SegJson.set }}">JSON</button>
+                  </div>
+                </div>
+                <div style="padding:var(--ns-space-3) var(--ns-space-5) var(--ns-space-4)">
+                  <div class="ns-revchain">
+                    <sc-for list="{{ s3Vers }}" as="v" hint-placeholder-count="3">
+                      <div class="ns-revchain__step" data-state="{{ v.current }}">
+                        <span class="ns-revchain__tag" data-state="{{ v.current }}">{{ v.v }}</span>
+                        <div class="ns-revchain__main">
+                          <div class="ns-revchain__titlerow">
+                            <span class="ns-revchain__title">{{ v.title }}</span>
+                            <sc-if value="{{ v.current }}" hint-placeholder-val="{{ false }}"><span class="ns-revchain__current">current</span></sc-if>
+                          </div>
+                          <div class="ns-revchain__meta">
+                            <span class="ns-revchain__by">{{ v.by }}</span>
+                            <span class="ns-revchain__sep">·</span>
+                            <span>{{ v.meta }}</span>
+                          </div>
+                          <sc-if value="{{ v.showJson }}" hint-placeholder-val="{{ false }}">
+                            <div class="ns-code" style="margin-top:var(--ns-space-2)"><div class="ns-code__head"><span class="ns-code__name">{{ v.v }}.json</span><span class="ns-code__lang">json</span></div><pre><code>{{ v.json }}</code></pre></div>
+                          </sc-if>
+                          <sc-if value="{{ v.showDiff }}" hint-placeholder-val="{{ false }}">
+                            <div class="ns-diff" style="margin-top:var(--ns-space-2)">
+                              <sc-for list="{{ v.diff }}" as="d" hint-placeholder-count="3">
+                                <span class="ns-diff__line" data-op="{{ d.op }}">{{ d.text }}</span>
+                              </sc-for>
+                            </div>
+                          </sc-if>
+                          <div class="ns-revchain__acts">
+                            <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ v.toggle }}">{{ v.toggleLabel }}</button>
+                            <sc-if value="{{ v.canRoll }}" hint-placeholder-val="{{ false }}">
+                              <button class="ns-btn ns-btn--secondary ns-btn--sm ns-revchain__roll" onClick="{{ v.rollback }}">Roll back to {{ v.v }}</button>
+                            </sc-if>
+                          </div>
+                        </div>
+                      </div>
+                    </sc-for>
+                  </div>
+                </div>
+              </section>
+            </div>
+
+            <aside class="ns-runtime__aside">
+              <!-- Live override feed (write events streamed) -->
+              <section class="ns-card ns-card--console ns-data-table ns-data-table--console ns-rcevents" style="background:var(--ns-card)">
+                <div class="ns-card__header ns-data-table__header" style="padding:var(--ns-space-3) var(--ns-space-4);border-bottom:1px solid var(--ns-border)">
+                  <span class="ns-card__title">Live override feed</span>
+                  <div class="ns-feed-toolbar">
+                    <sc-if value="{{ s3HasPending }}" hint-placeholder-val="{{ false }}">
+                      <button class="ns-newpill" onClick="{{ s3Catch }}">{{ s3PendingCount }} new changes</button>
+                    </sc-if>
+                    <button class="ns-btn ns-btn--ghost ns-btn--sm ns-rcevents__follow" aria-pressed="{{ s3Follow }}" onClick="{{ s3ToggleFollow }}">{{ s3FollowLabel }}</button>
+                  </div>
+                </div>
+                <div class="ns-rcevents__cols" aria-hidden="true"><span>time</span><span>target</span><span>action</span></div>
+                <div class="ns-data-table__body ns-rcevents__body">
+                  <sc-for list="{{ s3FeedItems }}" as="f" hint-placeholder-count="4">
+                    <div class="ns-data-table__row ns-rcevents__row">
+                      <span class="ns-rcevents__time">{{ f.time }}</span>
+                      <span class="ns-rcevents__target">{{ f.target }}</span>
+                      <span class="ns-rcevents__action">{{ f.action }}</span>
+                    </div>
+                  </sc-for>
+                </div>
+              </section>
+            </aside>
+          </div>
+        </div>
+      </sc-if>
+
+      <!-- @S3-END -->
+      <sc-if value="{{ isCatalog }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen ns-catalog" data-screen-label="S4 Catalog">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-toolbar">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <div class="ns-catcrumb" aria-hidden="true"><span class="ns-catcrumb__root">Contract registry</span><span class="ns-catcrumb__sep">/</span><span class="ns-catcrumb__leaf">{{ s4Detail.proc }}</span></div>
+                <h1>Service &amp; contract catalog</h1>
+              </div>
+              <div class="ns-seg ns-tabs--underline ns-cat-tabs" role="tablist" aria-label="Catalog view">
+                <button class="ns-seg__btn" role="tab" data-state="{{ s4TabContracts.state }}" onClick="{{ s4TabContracts.set }}">Contracts</button>
+                <button class="ns-seg__btn" role="tab" data-state="{{ s4TabRoutes.state }}" onClick="{{ s4TabRoutes.set }}">Fresh route wiring</button>
+              </div>
+            </div>
+          </header>
+
+          <sc-if value="{{ s4IsContracts }}" hint-placeholder-val="{{ true }}">
+            <!-- Ref 13: one compact registry metadata rail, exact facts only. -->
+            <div class="ns-card ns-cat2-meta" aria-label="Catalog summary">
+              <span><b>CONTRACTS</b><strong>{{ s4Head.total }}</strong><small>{{ s4Head.versions }}</small></span>
+              <span><b>DESCRIBE()</b><strong>{{ s4Head.covPctLabel }}</strong><small>{{ s4Head.completeN }} complete · {{ s4Head.thinN }} thin</small></span>
+              <sc-for list="{{ s4Head.reach }}" as="r" hint-placeholder-count="3">
+                <span><b>{{ r.label }}</b><strong>{{ r.n }} / {{ r.total }}</strong><small>contracts</small></span>
+              </sc-for>
+            </div>
+
+            <!-- filter toolbar (ref 11) -->
+            <div class="ns-catbar">
+              <div class="ns-catbar__search">
+                <input class="ns-catbar__input" type="search" placeholder="Search procedures, types…" value="{{ s4Q }}" onInput="{{ s4SetQ }}" aria-label="Search contracts">
+              </div>
+              <div class="ns-catbar__chips" role="group" aria-label="Kind filter">
+                <sc-for list="{{ s4KindChips }}" as="c" hint-placeholder-count="5"><button class="ns-catchip" data-state="{{ c.state }}" onClick="{{ c.set }}">{{ c.label }}</button></sc-for>
+              </div>
+              <div class="ns-catbar__chips" role="group" aria-label="Method filter">
+                <sc-for list="{{ s4MethodChips }}" as="c" hint-placeholder-count="5"><button class="ns-catchip ns-catchip--method" data-state="{{ c.state }}" onClick="{{ c.set }}">{{ c.label }}</button></sc-for>
+              </div>
+              <div class="ns-catbar__chips" role="group" aria-label="Coverage filter">
+                <sc-for list="{{ s4CovChips }}" as="c" hint-placeholder-count="3"><button class="ns-catchip" data-state="{{ c.state }}" onClick="{{ c.set }}">{{ c.label }}</button></sc-for>
+              </div>
+              <button class="ns-catbar__reset" onClick="{{ s4ResetFilters }}">Reset</button>
+            </div>
+
+            <div class="ns-catgrid">
+              <!-- Ref 12: compact grouped registry records. -->
+              <aside class="ns-data-table ns-catreg ns-cat2-reg" aria-label="Contract registry">
+                <sc-for list="{{ s4Groups }}" as="g" hint-placeholder-count="4">
+                  <div class="ns-catreg__group" data-kind="{{ g.key }}">
+                    <div class="ns-catreg__group-head">
+                      <span class="ns-catreg__group-label">{{ g.label }}</span>
+                      <span class="ns-catreg__group-count">{{ g.count }}</span>
+                      <span class="ns-cat2-group-fact">{{ g.complete }} complete · {{ g.thin }} thin</span>
+                    </div>
+                    <sc-for list="{{ g.rows }}" as="c" hint-placeholder-count="2">
+                      <button class="ns-catreg__item" data-state="{{ c.selState }}" data-method="{{ c.mTone }}" onClick="{{ c.select }}">
+                        <span class="ns-catreg__method" data-method="{{ c.mTone }}">{{ c.method }}</span>
+                        <span class="ns-catreg__body">
+                          <span class="ns-catreg__proc">{{ c.proc }}</span>
+                          <span class="ns-catreg__sigpre">{{ c.sigPreview }}</span>
+                        </span>
+                        <span class="ns-catreg__meta">
+                          <span class="ns-cat2-coverage" data-cov="{{ c.cov }}">{{ c.cov }}</span>
+                          <span class="ns-cat2-transports" aria-label="Transport support"><sc-for list="{{ c.dualPips }}" as="d" hint-placeholder-count="3"><span data-on="{{ d.on }}">{{ d.label }}</span></sc-for></span>
+                        </span>
+                      </button>
+                    </sc-for>
+                  </div>
+                </sc-for>
+                <div class="ns-catreg__group" data-state="gated">
+                  <div class="ns-catreg__group-head">
+                    <span class="ns-catreg__group-label">crons › schedule</span>
+                    <span class="ns-catreg__group-count" data-state="gated">not installed</span>
+                  </div>
+                  <div class="ns-catreg__gated">
+                    <span class="ns-catreg__gated-desc">Installs a schedule namespace of contracts.</span>
+                    <code class="ns-catreg__gated-cmd">netscript plugin install crons</code>
+                  </div>
+                </div>
+                <sc-if value="{{ s4NoResults }}" hint-placeholder-val="{{ false }}">
+                  <div class="ns-catreg__empty">
+                    <span class="ns-catreg__empty-title">No contracts match</span>
+                    <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s4ResetFilters }}">Clear filters</button>
+                  </div>
+                </sc-if>
+              </aside>
+
+              <!-- Ref 13: persistent signature/schema inspector. -->
+              <section class="ns-card ns-catdetail ns-cat2-detail" style="min-width:0">
+                <div class="ns-catdetail__head">
+                  <div class="ns-catdetail__title">
+                    <span class="ns-catdetail__proc">{{ s4Detail.proc }}</span>
+                    <span class="ns-catdetail__prov">{{ s4Detail.plugin }} › {{ s4Detail.ns }}</span>
+                  </div>
+                  <span class="ns-panel__flex" style="flex:1"></span>
+                  <span class="ns-catver">
+                    <span class="ns-catver__tag">{{ s4Detail.ver }}</span>
+                    <span class="ns-cat2-compat" data-tone="{{ s4Detail.compatTone }}">compat · {{ s4Detail.compatLabel }}</span>
+                  </span>
+                </div>
+                <div class="ns-catdetail__method-strip">
+                  <span class="ns-cat2-method">{{ s4Detail.method }}</span>
+                  <span class="ns-cat2-coverage" data-cov="{{ s4Detail.cov }}">{{ s4Detail.covLabel }}</span>
+                  <span class="ns-cat2-transports" aria-label="Transport support"><sc-for list="{{ s4Detail.dualPips }}" as="d" hint-placeholder-count="3"><span data-on="{{ d.on }}">{{ d.label }}</span></sc-for></span>
+                </div>
+
+                <div class="ns-catsig" aria-label="Type signature">
+                  <div class="ns-catsig__gutter" aria-hidden="true">1</div>
+                  <code class="ns-catsig__code"><sc-for list="{{ s4Detail.sigCells }}" as="t" hint-placeholder-count="8"><span class="ns-catsig__tok" data-kind="{{ t.k }}">{{ t.t }}</span></sc-for></code>
+                </div>
+
+                <div class="ns-catschema">
+                  <div class="ns-catschema__head"><span class="ns-drawer__section-label">schema</span><span class="ns-catschema__hint">{{ s4Detail.input }} · {{ s4Detail.output }}</span></div>
+                  <div class="ns-catschema__code">
+                    <sc-for list="{{ s4Detail.schemaLines }}" as="l" hint-placeholder-count="8">
+                      <div class="ns-catschema__line">
+                        <span class="ns-catschema__gutter" aria-hidden="true">{{ l.n }}</span>
+                        <code class="ns-catschema__src"><span class="ns-catsig__tok" data-kind="{{ l.kind }}">{{ l.name }}</span><span class="ns-catschema__rest">{{ l.rest }}</span></code>
+                      </div>
+                    </sc-for>
+                  </div>
+                </div>
+
+                <div class="ns-cat2-rel" aria-label="Producers and consumers">
+                  <div>
+                    <span class="ns-catrel__col-label">producers <span class="ns-catrel__col-n">{{ s4Detail.prodCount }}</span></span>
+                    <sc-for list="{{ s4Detail.producerNodes }}" as="p" hint-placeholder-count="2"><span>{{ p.label }}</span></sc-for>
+                  </div>
+                  <div>
+                    <span class="ns-catrel__col-label"><span class="ns-catrel__col-n">{{ s4Detail.consCount }}</span> consumers</span>
+                    <sc-for list="{{ s4Detail.consumerNodes }}" as="p" hint-placeholder-count="2"><span>{{ p.label }}</span></sc-for>
+                  </div>
+                </div>
+
+                <div class="ns-catdetail__actions">
+                  <button class="ns-btn ns-btn--secondary ns-btn--sm" onClick="{{ s4Detail.scalar }}">Open in Scalar</button>
+                </div>
+              </section>
+            </div>
+          </sc-if>
+
+          <sc-if value="{{ s4IsRoutes }}" hint-placeholder-val="{{ false }}">
+            <div class="ns-catroutes">
+              <div class="ns-catbar__summary"><span class="ns-badge ns-badge--warning">{{ s4Summary.unbound }}</span><span class="ns-catbar__summary-note">Fresh page routes that carry (or lack) a request contract.</span></div>
+              <div class="ns-responsive-table">
+                <div class="ns-responsive-table__scroller">
+                  <table class="ns-responsive-table__table" style="min-width:36rem">
+                    <thead class="ns-responsive-table__head">
+                      <tr class="ns-responsive-table__row">
+                        <th class="ns-responsive-table__header">Page route</th>
+                        <th class="ns-responsive-table__header">Binding</th>
+                        <th class="ns-responsive-table__header">Authoring form</th>
+                        <th class="ns-responsive-table__header">Module / hint</th>
+                      </tr>
+                    </thead>
+                    <tbody class="ns-responsive-table__body">
+                      <sc-for list="{{ s4Routes }}" as="r" hint-placeholder-count="4">
+                        <tr class="ns-responsive-table__row">
+                          <td class="ns-responsive-table__cell"><span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-xs)">{{ r.route }}</span></td>
+                          <td class="ns-responsive-table__cell"><span class="{{ r.sBadge }}">{{ r.status }}</span></td>
+                          <td class="ns-responsive-table__cell"><span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs);color:var(--ns-muted-fg)">{{ r.form }}</span></td>
+                          <td class="ns-responsive-table__cell"><span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs);color:var(--ns-muted-fg)">{{ r.target }}</span></td>
+                        </tr>
+                      </sc-for>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </sc-if>
+        </div>
+      </sc-if>
+
+      <!-- @S4-END -->
+      <sc-if value="{{ isPlugins }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen" data-screen-label="S5 Plugins">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-toolbar">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <h1>Plugin control</h1>
+                <p class="ns-lede">Fleet-level wiring nothing else shows — the dashboard is itself a plugin arriving through the same seam.</p>
+              </div>
+            </div>
+          </header>
+          <div class="ns-rail-grid">
+            <aside style="min-width:0">
+              <div class="ns-mini-label" style="margin-bottom:var(--ns-space-2)">Installed</div>
+              <div class="ns-entity-rail" role="listbox" aria-label="Plugins">
+                <sc-for list="{{ s5Rows }}" as="p" hint-placeholder-count="5">
+                  <button class="ns-entity-rail__item" role="option" data-state="{{ p.selState }}" onClick="{{ p.select }}">
+                    <span class="ns-entity-rail__title"><span>{{ p.id }}</span><span class="{{ p.sBadge }}">{{ p.status }}</span></span>
+                    <span class="ns-entity-rail__meta" style="align-items:center"><span>{{ p.ver }}</span>
+                      <sc-if value="{{ p.drift }}" hint-placeholder-val="{{ false }}"><span class="ns-badge ns-badge--warning">drift</span></sc-if>
+                      <span style="flex:1"></span>
+                      <span class="ns-trend" data-tone="{{ p.ttone }}" data-series="{{ p.series }}" style="width:52px;height:16px" aria-hidden="true"><svg viewBox="0 0 100 30" preserveAspectRatio="none"></svg></span>
+                    </span>
+                  </button>
+                </sc-for>
+              </div>
+              <div class="ns-plugin-gated-view" data-state="not-installed" style="margin-top:var(--ns-space-4);padding:var(--ns-space-4)">
+                <span class="ns-plugin-gated-view__title" style="font-size:var(--ns-text-sm)">crons</span>
+                <span class="ns-plugin-gated-view__desc" style="font-size:var(--ns-text-xs)">Not installed — candidate from the JSR registry.</span>
+                <div class="ns-code ns-plugin-gated-view__cmd"><pre><code>netscript plugin install crons</code></pre></div>
+              </div>
+              <button class="ns-btn ns-btn--ghost ns-btn--sm" style="margin-top:var(--ns-space-3)" onClick="{{ s5NewPlugin }}">Create from template…</button>
+            </aside>
+            <section class="ns-detail-layout" style="min-width:0">
+              <div class="ns-detail-layout__main" style="display:grid;gap:var(--ns-space-6)">
+                <div class="ns-panel" style="background:var(--ns-card)">
+                  <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border);flex-direction:row;align-items:center;gap:var(--ns-space-3)">
+                    <span class="ns-panel__title" style="font-family:var(--ns-font-mono);font-size:var(--ns-text-base)">{{ s5.name }}</span>
+                    <span class="{{ s5.statusBadge }}">{{ s5.status }}</span>
+                    <span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-xs);color:var(--ns-muted-fg)">{{ s5.ver }}</span>
+                    <span style="flex:1"></span>
+                    <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s5ViewWiring }}">View wiring</button>
+                    <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s5ViewContracts }}">View contracts</button>
+                    <button class="ns-btn ns-btn--secondary ns-btn--sm" onClick="{{ s5RunDoctor }}">Run doctor</button>
+                  </div>
+                  <div class="ns-panel__body" style="padding:var(--ns-space-4) var(--ns-space-5);display:grid;gap:var(--ns-space-5)">
+                    <sc-if value="{{ s5ShowCli }}" hint-placeholder-val="{{ false }}">
+                      <div class="ns-code"><div class="ns-code__head"><span class="ns-code__name">CLI equivalent</span><span class="ns-code__lang">sh</span></div><pre><code>{{ s5.cli }}</code></pre></div>
+                    </sc-if>
+                    <div style="display:grid;gap:var(--ns-space-2)">
+                      <span class="ns-mini-label">Contribution axes</span>
+                      <div class="ns-axismap">
+                        <sc-for list="{{ s5Axes }}" as="a" hint-placeholder-count="8">
+                          <button class="ns-axismap__axis" data-state="{{ a.state }}" style="cursor:pointer;font:inherit;font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs);text-align:left" onClick="{{ a.go }}">{{ a.label }}</button>
+                        </sc-for>
+                      </div>
+                      <span style="font-size:var(--ns-text-2xs);color:var(--ns-muted-fg)">Wired axes deep-link to the screen they touch.</span>
+                    </div>
+                    <div style="display:grid;gap:var(--ns-space-2)">
+                      <span class="ns-mini-label">Doctor checks</span>
+                      <div class="ns-connector">
+                        <sc-for list="{{ s5Doctor }}" as="d" hint-placeholder-count="3">
+                          <div class="ns-connector__row" data-state="{{ d.state }}">
+                            <span class="ns-connector__dot" aria-hidden="true"></span>
+                            <span class="ns-connector__probe">{{ d.probe }}</span>
+                            <span class="ns-connector__result">{{ d.result }}</span>
+                          </div>
+                        </sc-for>
+                      </div>
+                    </div>
+                    <sc-if value="{{ s5.hasDrift }}" hint-placeholder-val="{{ false }}">
+                      <div class="ns-inline-notice ns-inline-notice--warning" style="display:flex;gap:var(--ns-space-2);align-items:flex-start;padding:var(--ns-space-3) var(--ns-space-4);border-radius:var(--ns-radius-md)">
+                        <span class="ns-inline-notice__icon" aria-hidden="true">⚠</span>
+                        <div class="ns-inline-notice__body" style="display:grid;gap:var(--ns-space-1-5)">
+                          <span class="ns-inline-notice__title" style="font-weight:600;font-size:var(--ns-text-sm)">Version drift</span>
+                          <span class="ns-inline-notice__description" style="font-size:var(--ns-text-xs);font-family:var(--ns-font-mono)">{{ s5.driftText }}</span>
+                          <div class="ns-code"><pre><code>{{ s5.updateCli }}</code></pre></div>
+                        </div>
+                      </div>
+                    </sc-if>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </sc-if>
+
+      <!-- @S5-END -->
+      <sc-if value="{{ isRuns }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen" data-screen-label="S6 Run Inspector">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-toolbar">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <h1>Run inspector</h1>
+                <p class="ns-lede">A run — saga instance, job attempt sequence, trigger firing, stream delivery — is a NetScript primitive Aspire has no vocabulary for.</p>
+              </div>
+              <div class="ns-cluster ns-cluster--sm" style="align-items:center">
+                <div class="ns-seg" role="group" aria-label="View">
+                  <button class="ns-seg__btn" onClick="{{ s6ToJourney }}">Journey</button>
+                  <button class="ns-seg__btn" data-state="active">Inspector</button>
+                </div>
+                <button class="ns-btn ns-btn--secondary" onClick="{{ s6OpenTrace }}">View full trace in Aspire</button>
+              </div>
+            </div>
+          </header>
+          <div class="ns-console-grid">
+            <aside style="min-width:0;display:grid;gap:var(--ns-space-3)">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <select class="ns-select" style="width:100%;padding:var(--ns-space-1-5) var(--ns-space-2-5);border:1px solid var(--ns-border);border-radius:var(--ns-radius-md);background:var(--ns-surface);color:var(--ns-fg);font-size:var(--ns-text-xs)" value="{{ s6Status }}" onChange="{{ s6SetStatus }}" aria-label="Status filter">
+                  <option value="all">Status: all</option>
+                  <option value="compensating">compensating</option>
+                  <option value="retrying">retrying</option>
+                  <option value="completed">completed</option>
+                </select>
+                <select class="ns-select" style="width:100%;padding:var(--ns-space-1-5) var(--ns-space-2-5);border:1px solid var(--ns-border);border-radius:var(--ns-radius-md);background:var(--ns-surface);color:var(--ns-fg);font-size:var(--ns-text-xs)" value="{{ s6Cap }}" onChange="{{ s6SetCap }}" aria-label="Capability filter">
+                  <option value="all">Capability: all</option>
+                  <option value="workers">workers</option>
+                  <option value="sagas">sagas</option>
+                  <option value="triggers">triggers</option>
+                  <option value="streams">streams</option>
+                </select>
+                <div style="display:flex;gap:var(--ns-space-2)">
+                  <input class="ns-input" style="flex:1;min-width:0;padding:var(--ns-space-1-5) var(--ns-space-2-5);border:1px solid var(--ns-border);border-radius:var(--ns-radius-md);background:var(--ns-surface);color:var(--ns-fg);font-size:var(--ns-text-xs)" placeholder="Filter runs…" value="{{ s6Q }}" onChange="{{ s6SetQ }}" aria-label="Text filter">
+                  <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s6Reset }}">Reset</button>
+                </div>
+              </div>
+              <div class="ns-runtable">
+                <div class="ns-runtable__head">
+                  <span class="ns-runtable__title">Correlated runs</span>
+                  <span class="ns-runtable__count">{{ s6RunCount }}</span>
+                </div>
+                <div class="ns-runtable__cols" aria-hidden="true">
+                  <span class="ns-runtable__col ns-runtable__col--sorted">run <span class="ns-runtable__sort">↓</span></span>
+                  <span class="ns-runtable__col ns-runtable__col--r">status</span>
+                </div>
+                <div class="ns-entity-rail" role="listbox" aria-label="Runs">
+                  <sc-for list="{{ s6Runs }}" as="r" hint-placeholder-count="4">
+                    <button class="ns-entity-rail__item ns-runrow" role="option" data-state="{{ r.selState }}" onClick="{{ r.select }}">
+                      <span class="ns-runrow__glyph" data-prim="{{ r.cap }}" aria-hidden="true">{{ r.glyph }}</span>
+                      <span class="ns-runrow__body">
+                        <span class="ns-entity-rail__title"><span>{{ r.name }}</span></span>
+                        <span class="ns-entity-rail__meta"><span class="{{ r.sBadge }}">{{ r.status }}</span><span>{{ r.shortMeta }}</span></span>
+                      </span>
+                    </button>
+                  </sc-for>
+                  <sc-if value="{{ s6Empty }}" hint-placeholder-val="{{ false }}">
+                    <div class="ns-empty-state">No runs match the current filters.</div>
+                  </sc-if>
+                </div>
+              </div>
+            </aside>
+            <section style="min-width:0;display:grid;gap:var(--ns-space-5)">
+              <!-- Console stat strip (ref 11 dev-console): eyebrow micro-cap + big value tiles -->
+              <div class="ns-statstrip">
+                <sc-for list="{{ s6Stats }}" as="st" hint-placeholder-count="4">
+                  <div class="ns-statstrip__tile">
+                    <span class="ns-statstrip__label">{{ st.label }}</span>
+                    <span class="ns-statstrip__value" data-tone="{{ st.tone }}">{{ st.value }}</span>
+                  </div>
+                </sc-for>
+              </div>
+              <!-- Run-summary hero: step-progress arc + correlation split-panel + attempt/compensation tiles (refs 04/05 arc gauge, 01 KV panel, 04 breakdown tiles) -->
+              <div class="ns-runhero">
+                <div class="ns-runhero__gauge">
+                  <div class="ns-gauge" data-value="{{ s6Hero.pct }}" data-tone="{{ s6Hero.gaugeTone }}" role="img" aria-label="{{ s6Hero.label }}">
+                    <div class="ns-gauge__ring"></div>
+                    <div class="ns-gauge__center"><span class="ns-gauge__value">{{ s6Hero.done }}<span class="ns-gauge__of">/{{ s6Hero.total }}</span></span><span class="ns-gauge__label">steps</span></div>
+                  </div>
+                </div>
+                <div class="ns-runhero__body">
+                  <div class="ns-runhero__top">
+                    <span class="ns-runhero__name">{{ s6.name }}</span>
+                    <span class="{{ s6.statusBadge }}">{{ s6.status }}</span>
+                    <span style="flex:1"></span>
+                    <span class="ns-badge ns-badge--muted">{{ s6Hero.kind }}</span>
+                  </div>
+                  <div class="ns-kv ns-kv--split">
+                    <div class="ns-kv__row"><span class="ns-kv__key">correlation</span><span class="ns-kv__val" style="color:var(--ns-primary)">{{ s6Hero.corr }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">trace</span><span class="ns-kv__val">{{ s6Hero.trace }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">started</span><span class="ns-kv__val">{{ s6Hero.started }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">elapsed</span><span class="ns-kv__val">{{ s6Hero.dur }}</span></div>
+                  </div>
+                  <div class="ns-runstat">
+                    <div class="ns-runstat__tile"><span class="ns-runstat__val">{{ s6Hero.done }}<span class="ns-runstat__of">/{{ s6Hero.total }}</span></span><span class="ns-runstat__label">steps done</span></div>
+                    <div class="ns-runstat__tile"><span class="ns-runstat__val" data-tone="warning">{{ s6Hero.attempts }}</span><span class="ns-runstat__label">attempts</span></div>
+                    <div class="ns-runstat__tile"><span class="ns-runstat__val" data-tone="primary">{{ s6Hero.comps }}</span><span class="ns-runstat__label">compensations</span></div>
+                  </div>
+                  <div class="ns-runhero__corr-note">joins trigger event ↔ saga ↔ executions via <span class="ns-inline-code">listExecutionsByCorrelationId</span></div>
+                </div>
+              </div>
+              <!-- Step timeline: data-point steps with a distinct compensation lane -->
+              <div class="ns-panel" style="background:var(--ns-card)">
+                <div class="ns-panel__header" style="padding:var(--ns-space-3-5) var(--ns-space-5);border-bottom:1px solid var(--ns-border);flex-direction:row;align-items:center;gap:var(--ns-space-3);flex-wrap:wrap">
+                  <span class="ns-panel__title">Step timeline</span>
+                  <span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs);color:var(--ns-muted-fg)">forward path + compensation branch</span>
+                  <span style="flex:1"></span>
+                  <div class="ns-seg" role="group" aria-label="Timeline altitude">
+                    <button class="ns-seg__btn" data-state="{{ s6SegAll.state }}" onClick="{{ s6SegAll.set }}">All</button>
+                    <button class="ns-seg__btn" data-state="{{ s6SegCompact.state }}" onClick="{{ s6SegCompact.set }}">Compact</button>
+                    <button class="ns-seg__btn" data-state="{{ s6SegJson.state }}" onClick="{{ s6SegJson.set }}">JSON</button>
+                  </div>
+                </div>
+                <div class="ns-panel__body" style="padding:var(--ns-space-4) var(--ns-space-5);display:grid;gap:var(--ns-space-4)">
+                  <div class="ns-code"><div class="ns-code__head"><span class="ns-code__name">input</span><span class="ns-code__lang">json</span></div><pre><code>{{ s6.input }}</code></pre></div>
+                  <sc-if value="{{ s6.isJson }}" hint-placeholder-val="{{ false }}">
+                    <div class="ns-code"><div class="ns-code__head"><span class="ns-code__name">run.json</span><span class="ns-code__lang">json</span></div><pre><code>{{ s6.json }}</code></pre></div>
+                  </sc-if>
+                  <sc-if value="{{ s6ShowSteps }}" hint-placeholder-val="{{ true }}">
+                    <div class="ns-step-timeline ns-step-timeline--data" data-view="{{ s6ViewAttr }}">
+                      <sc-for list="{{ s6Steps }}" as="st" hint-placeholder-count="5">
+                        <div class="ns-step-timeline__step" data-state="{{ st.state }}" data-comp="{{ st.comp }}" data-tip="{{ st.tip }}">
+                          <span class="ns-step-timeline__marker" aria-hidden="true"></span>
+                          <div class="ns-step-timeline__main">
+                            <div class="ns-step-timeline__title"><span class="ns-step-timeline__n">{{ st.n }}</span>{{ st.title }}
+                              <sc-if value="{{ st.comp }}" hint-placeholder-val="{{ false }}"><span class="ns-step-timeline__comp-tag">compensation</span></sc-if>
+                              <sc-if value="{{ st.hasAttempts }}" hint-placeholder-val="{{ false }}"><span class="ns-step-timeline__attempts">attempt {{ st.attempts }}</span></sc-if>
+                              <span class="ns-step-timeline__datum">
+                                <sc-if value="{{ st.tip }}" hint-placeholder-val="{{ false }}"><span class="ns-step-timeline__tip">{{ st.datum }}</span></sc-if>
+                                {{ st.datum }}
+                              </span>
+                            </div>
+                            <div class="ns-step-timeline__meta"><span>{{ st.meta }}</span></div>
+                            <sc-if value="{{ st.hasIo }}" hint-placeholder-val="{{ false }}">
+                              <details class="ns-step-timeline__body">
+                                <summary>payload</summary>
+                                <div class="ns-step-timeline__io"><div class="ns-code"><pre><code>{{ st.io }}</code></pre></div></div>
+                              </details>
+                            </sc-if>
+                          </div>
+                        </div>
+                      </sc-for>
+                    </div>
+                  </sc-if>
+                </div>
+              </div>
+            </section>
+            <aside style="min-width:0;display:grid;gap:var(--ns-space-5)">
+              <div class="ns-panel" style="background:var(--ns-card)">
+                <div class="ns-panel__header" style="padding:var(--ns-space-3) var(--ns-space-4);border-bottom:1px solid var(--ns-border)"><span class="ns-panel__title">Run events</span></div>
+                <div style="padding:var(--ns-space-2) var(--ns-space-4) var(--ns-space-3)">
+                  <div class="ns-activity-feed">
+                    <sc-for list="{{ s6Feed }}" as="f" hint-placeholder-count="4">
+                      <div class="ns-activity-feed__item" data-tone="{{ f.tone }}">
+                        <span class="ns-activity-feed__marker" aria-hidden="true"></span>
+                        <div class="ns-activity-feed__body"><span class="ns-activity-feed__text">{{ f.text }}</span><span class="ns-activity-feed__time">{{ f.time }}</span></div>
+                      </div>
+                    </sc-for>
+                  </div>
+                </div>
+              </div>
+              <div class="ns-logstrip">
+                <div class="ns-logstrip__head">
+                  <span class="ns-logstrip__head-label">correlated logs · read-only</span>
+                  <span style="flex:1"></span>
+                  <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s6OpenLogs }}">Open in Aspire ↗</button>
+                </div>
+                <sc-for list="{{ s6Logs }}" as="l" hint-placeholder-count="3">
+                  <div class="ns-logstrip__line" data-severity="{{ l.sev }}">
+                    <span class="ns-logstrip__ts">{{ l.ts }}</span>
+                    <span class="ns-logstrip__resource">{{ l.res }}</span>
+                    <span class="ns-logstrip__severity">{{ l.sev }}</span>
+                    <span class="ns-logstrip__msg">{{ l.msg }}</span>
+                  </div>
+                </sc-for>
+                <div class="ns-logstrip__more">
+                  <span>Bounded to the last lines correlated to this run.</span>
+                  <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s6OpenLogs }}">Full log view in Aspire</button>
+                </div>
+              </div>
+              <div style="display:flex;gap:var(--ns-space-2);flex-wrap:wrap">
+                <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s6OpenFlow }}">View originating flow</button>
+                <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s6OpenTrigger }}">Open trigger event evt_2210</button>
+              </div>
+              <div class="ns-panel" style="background:var(--ns-card)">
+                <div class="ns-panel__header" style="padding:var(--ns-space-3) var(--ns-space-4);border-bottom:1px solid var(--ns-border)"><span class="ns-panel__title">Assist &amp; actions</span></div>
+                <div style="padding:var(--ns-space-3) var(--ns-space-4);display:grid;gap:var(--ns-space-2-5)">
+                  <div style="display:flex;flex-wrap:wrap;gap:var(--ns-space-2)">
+                    <button class="ns-ai-chip" onClick="{{ s6AssistExplain }}">Explain this failure</button>
+                    <button class="ns-ai-chip" onClick="{{ s6AssistFix }}">Draft a fix</button>
+                    <button class="ns-ai-chip" onClick="{{ s6AssistCompare }}">Compare with last success</button>
+                  </div>
+                  <sc-if value="{{ s6Assist }}" hint-placeholder-val="{{ false }}">
+                    <div class="ns-assist" data-state="ready">
+                      <div class="ns-assist__head">{{ s6Assist.head }}</div>
+                      <div class="ns-assist__summary">{{ s6Assist.summary }}</div>
+                      <div class="ns-assist__grounding"><span class="ns-assist__grounding-label">grounded in</span>
+                        <sc-for list="{{ s6Assist.grounding }}" as="g" hint-placeholder-count="2"><button class="ns-ground" style="font:inherit" onClick="{{ g.go }}">{{ g.label }}</button></sc-for>
+                      </div>
+                      <div class="ns-assist__actions"><button class="{{ s6Assist.actionClass }}" onClick="{{ s6Assist.action }}">{{ s6Assist.actionLabel }}</button></div>
+                      <div class="ns-assist__meta">{{ s6Assist.meta }}</div>
+                    </div>
+                  </sc-if>
+                  <div style="display:flex;gap:var(--ns-space-2);flex-wrap:wrap">
+                    <button class="ns-btn ns-btn--primary ns-btn--sm" onClick="{{ s6Rerun }}">Re-run job</button>
+                    <button class="ns-btn ns-btn--secondary ns-btn--sm" onClick="{{ s6Reprocess }}">Reprocess failed delivery</button>
+                  </div>
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </sc-if>
+
+      <!-- @S6-END -->
+      <sc-if value="{{ isWorkers }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen" data-screen-label="S7 Workers">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-conhead">
+              <div class="ns-conbread">
+                <span class="ns-conbread__crumb">Capabilities</span>
+                <span class="ns-conbread__sep">/</span>
+                <span class="ns-conbread__crumb ns-conbread__crumb--here">Workers</span>
+                <span class="ns-chip" style="margin-left:var(--ns-space-2)">contributed by the workers plugin</span>
+              </div>
+              <div class="ns-toolbar">
+                <div style="display:grid;gap:var(--ns-space-2);min-width:0">
+                  <h1>Workers</h1>
+                  <p class="ns-lede">Aspire proves the process is up; only NetScript knows which job ran, retried twice, and failed on attempt 2 of 3.</p>
+                </div>
+              </div>
+              <!-- console tab row (ref 11/12): Registry active, siblings deep-link to their section -->
+              <div class="ns-contab" role="tablist" aria-label="Workers views">
+                <button class="ns-contab__btn" role="tab" data-state="active">Registry <span class="ns-contab__count">{{ s7RegCount }}</span></button>
+                <button class="ns-contab__btn" role="tab" onClick="{{ s7TabExec }}">Executions <span class="ns-contab__count">{{ s7RunningCount }}</span></button>
+                <button class="ns-contab__btn" role="tab" onClick="{{ s7TabPools }}">Pools</button>
+                <button class="ns-contab__btn" role="tab" onClick="{{ s7TabDrift }}">Drift <span class="ns-contab__count">{{ s7DriftCount }}</span></button>
+              </div>
+              <!-- console stat strip (ref 11): jobs / tasks / running / failed / success -->
+              <div class="ns-statstrip ns-statstrip--5">
+                <sc-for list="{{ s7StatTiles }}" as="st" hint-placeholder-count="5">
+                  <div class="ns-statstrip__tile">
+                    <span class="ns-statstrip__label">{{ st.label }}</span>
+                    <span class="ns-statstrip__value" data-tone="{{ st.tone }}">{{ st.value }}</span>
+                  </div>
+                </sc-for>
+              </div>
+            </div>
+          </header>
+
+          <!-- HERO: the polyglot job/task registry as a dense sortable console table -->
+          <section class="ns-panel" style="background:var(--ns-card);margin-bottom:var(--ns-space-6)" id="s7-registry">
+            <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border);display:grid;gap:var(--ns-space-3-5)">
+              <div style="display:flex;align-items:baseline;gap:var(--ns-space-3);flex-wrap:wrap">
+                <span class="ns-panel__title">Job &amp; task registry</span>
+                <span class="ns-panel__description" style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs)">job = compiled Deno · task = polyglot (runtime from entrypoint)</span>
+              </div>
+              <!-- runtime-mix stacked bar + legend (bespoke, ref 09 channel bar) -->
+              <div class="ns-runtimemix">
+                <div class="ns-runtimemix__bar" aria-hidden="true">
+                  <sc-for list="{{ s7RtMix }}" as="m" hint-placeholder-count="5">
+                    <span class="ns-runtimemix__seg" data-rt="{{ m.rt }}" style="flex:{{ m.count }}"></span>
+                  </sc-for>
+                </div>
+                <div class="ns-runtimemix__legend">
+                  <sc-for list="{{ s7RtMix }}" as="m" hint-placeholder-count="5">
+                    <span class="ns-runtimemix__leg"><span class="ns-rtbadge__dot" data-rt="{{ m.rt }}"></span>{{ m.label }} <b>{{ m.count }}</b></span>
+                  </sc-for>
+                </div>
+              </div>
+              <!-- toolbar: search + runtime filter chips (`?runtime=`) -->
+              <div class="ns-contoolbar">
+                <label class="ns-contoolbar__search">
+                  <span class="ns-contoolbar__search-ico" aria-hidden="true">⌕</span>
+                  <input placeholder="Filter registry…" value="{{ s7Q }}" onInput="{{ s7SetQ }}" aria-label="Filter registry">
+                </label>
+                <div class="ns-rtchips" role="group" aria-label="Runtime filter">
+                  <sc-for list="{{ s7RtChips }}" as="c" hint-placeholder-count="6">
+                    <button class="ns-rtchip" data-state="{{ c.state }}" onClick="{{ c.set }}"><span class="ns-rtchip__dot" data-rt="{{ c.rt }}"></span>{{ c.label }}</button>
+                  </sc-for>
+                </div>
+              </div>
+            </div>
+            <div class="ns-contable" style="border:0;border-radius:0;background:transparent">
+              <div class="ns-contable__scroll">
+                <table class="ns-contable__t">
+                  <thead>
+                    <tr>
+                      <th class="ns-contable__th ns-contable__th--sorted" data-sort="1">Name <span class="ns-contable__sort">↓</span></th>
+                      <th class="ns-contable__th" data-sort="1">Kind <span class="ns-contable__sort">↕</span></th>
+                      <th class="ns-contable__th" data-sort="1">Runtime <span class="ns-contable__sort">↕</span></th>
+                      <th class="ns-contable__th" data-sort="1">Schedule <span class="ns-contable__sort">↕</span></th>
+                      <th class="ns-contable__th" data-sort="1">Last status <span class="ns-contable__sort">↕</span></th>
+                      <th class="ns-contable__th">Trend 24h</th>
+                      <th class="ns-contable__th ns-contable__th--r"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <sc-for list="{{ s7Jobs }}" as="j" hint-placeholder-count="5">
+                      <tr class="ns-contable__row" data-state="{{ j.selState }}" onClick="{{ j.select }}">
+                        <td class="ns-contable__td"><button class="ns-contable__name" onClick="{{ j.select }}">{{ j.name }}</button></td>
+                        <td class="ns-contable__td"><span class="{{ j.kindBadge }}">{{ j.kind }}</span></td>
+                        <td class="ns-contable__td"><span class="ns-rtbadge"><span class="ns-rtbadge__dot" data-rt="{{ j.rtKey }}"></span>{{ j.rt }}</span></td>
+                        <td class="ns-contable__td"><span class="ns-contable__sched">{{ j.sched }}</span><span class="ns-contable__sub">{{ j.human }}</span></td>
+                        <td class="ns-contable__td"><span class="{{ j.sBadge }}">{{ j.last }}</span></td>
+                        <td class="ns-contable__td"><span class="ns-trend" data-tone="{{ j.ttone }}" data-series="{{ j.series }}" aria-hidden="true"><svg viewBox="0 0 100 30" preserveAspectRatio="none"></svg></span></td>
+                        <td class="ns-contable__td ns-contable__td--r"><button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ j.run }}">Run now</button></td>
+                      </tr>
+                    </sc-for>
+                    <sc-if value="{{ s7Empty }}" hint-placeholder-val="{{ false }}">
+                      <tr class="ns-contable__row" style="cursor:default"><td class="ns-contable__td" colspan="7"><div class="ns-empty-state" style="border:0">No jobs or tasks match this filter.</div></td></tr>
+                    </sc-if>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </section>
+
+          <!-- SUPPORTING panels: runtime feed + pool liveness + drift + drawer -->
+          <div style="display:grid;gap:var(--ns-space-6);grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));align-items:start">
+            <section class="ns-card" style="background:var(--ns-card)" id="s7-executions">
+              <div class="ns-card__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border);flex-direction:row;align-items:center;justify-content:space-between">
+                <span class="ns-card__title">Live executions</span>
+                <div class="ns-feed-toolbar">
+                  <sc-if value="{{ s7HasPending }}" hint-placeholder-val="{{ false }}">
+                    <button class="ns-newpill" onClick="{{ s7Catch }}">{{ s7PendingCount }} new</button>
+                  </sc-if>
+                  <span class="ns-livedot" data-state="{{ s7LiveState }}">sse</span>
+                  <label class="ns-choice" style="align-items:center">
+                    <span style="position:relative;display:inline-flex"><input type="checkbox" class="ns-switch" checked="{{ s7Follow }}" onChange="{{ s7ToggleFollow }}"><span class="ns-switch__track" style="display:inline-flex;align-items:center;width:2.35rem;height:1.3rem;border:1px solid var(--ns-border-strong);border-radius:var(--ns-radius-full);background:var(--ns-surface);padding:2px;transition:background 140ms ease,border-color 140ms ease"><span class="ns-switch__thumb" style="width:0.95rem;height:0.95rem;border-radius:var(--ns-radius-full);background:var(--ns-card);box-shadow:var(--ns-shadow-xs);transition:transform 140ms ease"></span></span></span>
+                    <span class="ns-choice__label" style="font-size:var(--ns-text-xs)">Follow</span>
+                  </label>
+                </div>
+              </div>
+              <div style="padding:var(--ns-space-2) var(--ns-space-5) var(--ns-space-4);max-height:22rem;overflow-y:auto">
+                <div class="ns-activity-feed">
+                  <sc-for list="{{ s7FeedItems }}" as="f" hint-placeholder-count="4">
+                    <div class="ns-activity-feed__item" data-tone="{{ f.tone }}">
+                      <span class="ns-activity-feed__marker" aria-hidden="true"></span>
+                      <div class="ns-activity-feed__body"><span class="ns-activity-feed__text">{{ f.text }}</span><span class="ns-activity-feed__time">{{ f.time }}</span></div>
+                    </div>
+                  </sc-for>
+                </div>
+              </div>
+              <div class="ns-card__footer" style="display:flex;gap:var(--ns-space-2);padding:var(--ns-space-3) var(--ns-space-5);border-top:1px solid var(--ns-border)">
+                <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s7OpenRun }}">Open full run</button>
+                <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s7OpenTrace }}">View trace ↗</button>
+              </div>
+            </section>
+
+            <div style="display:grid;gap:var(--ns-space-6);min-width:0">
+              <section class="ns-panel" style="background:var(--ns-card)" id="s7-pools">
+                <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border)">
+                  <span class="ns-panel__title">Worker pools — who is consuming</span>
+                  <span class="ns-panel__description">The classic silent bug: nothing polling the queue. Invisible to Aspire’s process view.</span>
+                </div>
+                <div class="ns-panel__body" style="padding:var(--ns-space-3-5) var(--ns-space-5)">
+                  <div class="ns-poolmeter">
+                    <sc-for list="{{ s7Pool }}" as="p" hint-placeholder-count="3">
+                      <div class="ns-poolmeter__row" data-state="{{ p.state }}">
+                        <span class="ns-poolmeter__pulse" aria-hidden="true"></span>
+                        <span class="ns-poolmeter__q">{{ p.probe }}</span>
+                        <span class="ns-poolmeter__consumers"><span class="ns-poolmeter__cnum">{{ p.result }}</span></span>
+                      </div>
+                    </sc-for>
+                  </div>
+                </div>
+              </section>
+
+              <section class="ns-panel" style="background:var(--ns-card)" id="s7-drift">
+                <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border)">
+                  <span class="ns-panel__title">Scheduler vs. config drift</span>
+                  <span class="ns-panel__description">Live <span class="ns-inline-code">scheduler.list()</span> diffed against declared definitions — names the cause.</span>
+                </div>
+                <div class="ns-panel__body" style="padding:var(--ns-space-3-5) var(--ns-space-5)">
+                  <div class="ns-driftpanel">
+                    <sc-for list="{{ s7Drift }}" as="d" hint-placeholder-count="4">
+                      <div class="ns-driftrow" data-state="{{ d.state }}">
+                        <span class="ns-driftrow__dot" aria-hidden="true"></span>
+                        <span class="ns-driftrow__main"><span class="ns-driftrow__probe">{{ d.probe }}</span><span class="ns-driftrow__result">{{ d.result }}</span></span>
+                        <sc-if value="{{ d.openCause }}" hint-placeholder-val="{{ false }}">
+                          <button class="ns-driftrow__cause" onClick="{{ d.openCause }}">{{ d.cause }} →</button>
+                        </sc-if>
+                      </div>
+                    </sc-for>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+
+      <!-- @S7-END -->
+      <sc-if value="{{ isSagas }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen" data-screen-label="S8 Sagas">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-conhead">
+              <div class="ns-conbread">
+                <span class="ns-conbread__crumb">Capabilities</span>
+                <span class="ns-conbread__sep">›</span>
+                <span class="ns-conbread__crumb">Sagas</span>
+                <span class="ns-conbread__sep">›</span>
+                <span class="ns-conbread__crumb ns-conbread__crumb--here">{{ s8.saga }}</span>
+                <span class="ns-chip" style="margin-left:var(--ns-space-2)">contributed by the sagas plugin</span>
+              </div>
+              <div class="ns-toolbar">
+                <div style="display:grid;gap:var(--ns-space-2);min-width:0">
+                  <h1>Sagas</h1>
+                  <p class="ns-lede"><span class="ns-inline-code">COMPENSATING</span> is a status no other tool has — so the saga state machine is a <b>canvas</b>: wire the states, click a node for its config.</p>
+                </div>
+                <span style="flex:1"></span>
+                <div class="ns-durabar" data-tier="{{ s8.tierKey }}">
+                  <span class="ns-durabar__pips" aria-hidden="true"><span class="ns-durabar__pip"></span><span class="ns-durabar__pip"></span><span class="ns-durabar__pip"></span></span>
+                  <span class="ns-durabar__label">{{ s8.tier }}</span>
+                </div>
+              </div>
+              <!-- SAGA-HEALTH composite band (bespoke): compensation-rate meter +
+                   in-flight/terminal split + state distribution + fwd↔rollback ratio.
+                   Replaces four indistinguishable number cards with one saga-native strip. -->
+              <div class="ns-sghealth" aria-label="Saga fleet health">
+                <!-- compensation-rate radial meter -->
+                <div class="ns-sghealth__cell ns-sghealth__cell--meter">
+                  <div class="ns-sghealth__meter" style="--v:{{ s8Health.compRate }}" role="img" aria-label="compensation rate {{ s8Health.compRateLabel }}">
+                    <span class="ns-sghealth__meter-val">{{ s8Health.compRateLabel }}</span>
+                  </div>
+                  <div class="ns-sghealth__cell-body">
+                    <span class="ns-sghealth__label">compensation rate</span>
+                    <span class="ns-sghealth__sub">{{ s8Health.compCount }} of {{ s8Health.total }} unwinding</span>
+                  </div>
+                </div>
+                <!-- in-flight vs terminal split -->
+                <div class="ns-sghealth__cell">
+                  <span class="ns-sghealth__label">in-flight · terminal</span>
+                  <div class="ns-sghealth__split">
+                    <span class="ns-sghealth__split-num" data-tone="warning">{{ s8Health.split.inFlight }}</span>
+                    <span class="ns-sghealth__split-sep" aria-hidden="true">/</span>
+                    <span class="ns-sghealth__split-num">{{ s8Health.split.terminal }}</span>
+                  </div>
+                  <div class="ns-sghealth__track" aria-hidden="true"><span class="ns-sghealth__track-fill" data-tone="warning" style="width:{{ s8Health.split.inFlightPct }}%"></span></div>
+                  <span class="ns-sghealth__sub">{{ s8Health.split.inFlightPct }}% still running</span>
+                </div>
+                <!-- state distribution stacked channel bar -->
+                <div class="ns-sghealth__cell ns-sghealth__cell--dist">
+                  <span class="ns-sghealth__label">instances by state</span>
+                  <div class="ns-sghealth__bar" aria-hidden="true">
+                    <sc-for list="{{ s8Health.dist }}" as="d" hint-placeholder-count="4">
+                      <span class="ns-sghealth__seg" data-tone="{{ d.tone }}" style="width:{{ d.pct }}%" title="{{ d.label }}"></span>
+                    </sc-for>
+                  </div>
+                  <div class="ns-sghealth__legend">
+                    <sc-for list="{{ s8Health.dist }}" as="d" hint-placeholder-count="4">
+                      <span class="ns-sghealth__leg"><span class="ns-sghealth__leg-dot" data-tone="{{ d.tone }}" aria-hidden="true"></span>{{ d.label }} {{ d.value }}</span>
+                    </sc-for>
+                  </div>
+                </div>
+                <!-- forward vs rollback ratio -->
+                <div class="ns-sghealth__cell">
+                  <span class="ns-sghealth__label">forward · rollback edges</span>
+                  <div class="ns-sghealth__split">
+                    <span class="ns-sghealth__split-num" data-tone="success">{{ s8Health.ratio.fwd }}</span>
+                    <span class="ns-sghealth__split-sep" aria-hidden="true">·</span>
+                    <span class="ns-sghealth__split-num" data-tone="warning">{{ s8Health.ratio.comp }}</span>
+                  </div>
+                  <div class="ns-sghealth__track" aria-hidden="true"><span class="ns-sghealth__track-fill" data-tone="warning" style="width:{{ s8Health.ratio.compPct }}%"></span></div>
+                  <span class="ns-sghealth__sub">{{ s8Health.ratio.compPct }}% of edges are compensating</span>
+                </div>
+              </div>
+            </div>
+          </header>
+
+          <!-- ================= SAGA GRAPH CANVAS (ref 21 n8n flow-builder) ================= -->
+          <div class="ns-sgc">
+            <!-- slim instance switcher strip (NOT a fat left column) -->
+            <div class="ns-sgc__switcher" role="tablist" aria-label="Saga instances">
+              <span class="ns-sgc__switcher-label">instance</span>
+              <sc-for list="{{ s8Rows }}" as="g" hint-placeholder-count="4">
+                <button class="ns-sgc__inst" role="tab" data-state="{{ g.selState }}" aria-selected="{{ g.selState }}" onClick="{{ g.select }}">
+                  <span class="ns-sgc__inst-dot" data-tone="{{ g.tone }}" aria-hidden="true"></span>
+                  <span>{{ g.saga }}</span>
+                  <span class="ns-sgc__inst-corr">{{ g.corr }}</span>
+                </button>
+              </sc-for>
+            </div>
+
+            <!-- the canvas stage: full-bleed dotted grid, DOMINANT -->
+            <div class="ns-sgc__stagewrap">
+              <div class="ns-sgc__canvas" id="ns-sgc-canvas">
+                <svg class="ns-sgc__edges" id="ns-sgc-edges" aria-hidden="true"></svg>
+                <!-- step-execution rail: left-edge pips (pending → … → terminal), current enlarged -->
+                <div class="ns-sgc__rail" aria-label="Step execution rail">
+                  <sc-for list="{{ s8Rail }}" as="r" hint-placeholder-count="5">
+                    <span class="ns-sgc__rail-pip" data-rail="{{ r.railState }}" data-tone="{{ r.tone }}" data-now="{{ r.isNow }}"><span class="ns-sgc__rail-name">{{ r.name }}</span></span>
+                  </sc-for>
+                </div>
+                <!-- forward-lane header + compensation-health stat strip (ref-11 stat bar → lane) -->
+                <div class="ns-sgc__lane-tag" data-lane-tag="fwd" style="top:var(--ns-space-3)">forward path</div>
+                <div class="ns-sgc__lanestat" data-lane="fwd" data-lanestat="fwd" style="top:var(--ns-space-2-5)">
+                  <sc-for list="{{ s8FwdHealth }}" as="h" hint-placeholder-count="3">
+                    <span class="ns-sgc__lanestat-cell"><span class="ns-sgc__lanestat-label">{{ h.label }}</span><span class="ns-sgc__lanestat-val" data-tone="{{ h.tone }}">{{ h.value }}</span></span>
+                  </sc-for>
+                </div>
+                <sc-if value="{{ s8HasComp }}" hint-placeholder-val="{{ false }}">
+                  <span class="ns-sgc__lane-tag" data-lane="comp" data-lane-tag="comp" id="ns-sgc-comptag">⟲ compensation · rollback lane</span>
+                </sc-if>
+                <sc-if value="{{ s8HasCompHealth }}" hint-placeholder-val="{{ false }}">
+                  <div class="ns-sgc__lanestat" data-lane="comp" data-lanestat="comp" id="ns-sgc-compstat">
+                    <sc-for list="{{ s8CompHealth }}" as="h" hint-placeholder-count="3">
+                      <span class="ns-sgc__lanestat-cell"><span class="ns-sgc__lanestat-label">{{ h.label }}</span><span class="ns-sgc__lanestat-val" data-tone="{{ h.tone }}">{{ h.value }}</span></span>
+                    </sc-for>
+                  </div>
+                </sc-if>
+                <!-- canvas legend (bottom-left): node-identity key — balances the mini-map -->
+                <div class="ns-sgc__legend" aria-hidden="true">
+                  <span class="ns-sgc__legend-item"><span class="ns-sgc__legend-swatch" data-role="fwd"></span>forward</span>
+                  <span class="ns-sgc__legend-item"><span class="ns-sgc__legend-swatch" data-role="comp"></span>compensation</span>
+                  <span class="ns-sgc__legend-item"><span class="ns-sgc__legend-swatch" data-role="terminal"></span>terminal</span>
+                  <span class="ns-sgc__legend-item"><span class="ns-sgc__legend-swatch" data-role="ghost"></span>ghost scope</span>
+                </div>
+                <!-- definition mini-map: full saga topology thumbnail, current path overlaid.
+                     Nodes/edges drawn post-mount by measureSagaEdges from the machine `def`. -->
+                <div class="ns-sgc__minimap" aria-label="Saga definition map">
+                  <span class="ns-sgc__minimap-title">definition · <span style="color:var(--ns-success)">current path</span></span>
+                  <svg class="ns-sgc__minimap-svg" id="ns-sgc-minimap" aria-hidden="true"></svg>
+                </div>
+                <div class="ns-sgc__grid" id="ns-sgc-grid">
+                  <!-- forward lane (row 1) -->
+                  <sc-for list="{{ s8FwdNodes }}" as="n" hint-placeholder-count="3">
+                    <button class="ns-sgc__node" data-node="{{ n.id }}" data-lane="fwd" data-role="{{ n.role }}" data-ghost="{{ n.ghost }}" data-state="{{ n.state }}" data-current="{{ n.current }}" data-selected="{{ n.selAttr }}" data-col="{{ n.col }}" data-row="1" aria-pressed="{{ n.selAttr }}" onClick="{{ n.pick }}">
+                      <span class="ns-sgc__node-head">
+                        <span class="ns-sgc__node-tile" aria-hidden="true">{{ n.glyph }}</span>
+                        <span class="ns-sgc__node-name">{{ n.name }}</span>
+                        <span class="ns-sgc__node-dot" aria-hidden="true"></span>
+                      </span>
+                      <span class="ns-sgc__node-cap">{{ n.cap }}</span>
+                      <span class="ns-sgc__node-foot"><span class="ns-sgc__node-metric">{{ n.timing }}</span><span class="ns-sgc__node-metric">· attempt {{ n.attempt }}</span></span>
+                    </button>
+                  </sc-for>
+                  <!-- compensation lane (row 2) — the distinct dashed reverse branch -->
+                  <sc-if value="{{ s8HasComp }}" hint-placeholder-val="{{ false }}">
+                    <sc-for list="{{ s8CompNodes }}" as="n" hint-placeholder-count="2">
+                      <button class="ns-sgc__node" data-node="{{ n.id }}" data-lane="comp" data-role="{{ n.role }}" data-ghost="{{ n.ghost }}" data-state="{{ n.state }}" data-current="{{ n.current }}" data-selected="{{ n.selAttr }}" data-col="{{ n.col }}" data-row="2" aria-pressed="{{ n.selAttr }}" onClick="{{ n.pick }}">
+                        <span class="ns-sgc__node-head">
+                          <span class="ns-sgc__node-tile" aria-hidden="true">{{ n.glyph }}</span>
+                          <span class="ns-sgc__node-name">{{ n.name }}</span>
+                          <span class="ns-sgc__node-dot" aria-hidden="true"></span>
+                        </span>
+                        <span class="ns-sgc__node-cap">{{ n.cap }}</span>
+                        <span class="ns-sgc__node-foot"><span class="ns-sgc__node-metric">{{ n.timing }}</span><span class="ns-sgc__node-metric">· attempt {{ n.attempt }}</span></span>
+                      </button>
+                    </sc-for>
+                  </sc-if>
+                </div>
+              </div>
+              <!-- canvas toolbar (ref 21 bottom bar) -->
+              <div class="ns-sgc__toolbar" role="toolbar" aria-label="Canvas controls">
+                <button class="ns-sgc__tool" aria-label="Zoom out" onClick="{{ s8ZoomOut }}">−</button>
+                <span class="ns-sgc__tool ns-sgc__tool-zoom" aria-hidden="true">{{ s8Zoom }}%</span>
+                <button class="ns-sgc__tool" aria-label="Zoom in" onClick="{{ s8ZoomIn }}">+</button>
+                <span class="ns-sgc__tool-sep" aria-hidden="true"></span>
+                <button class="ns-sgc__tool" onClick="{{ s8FitView }}">⤢ fit</button>
+                <span class="ns-sgc__tool-sep" aria-hidden="true"></span>
+                <button class="ns-sgc__tool" data-variant="assist" onClick="{{ s8Assistant }}">✦ assist</button>
+              </div>
+            </div>
+
+            <!-- PROPERTIES SIDEBAR — instance summary by default, node detail when a node is picked -->
+            <aside class="ns-sgc__props" aria-label="Properties">
+              <sc-if value="{{ s8PropsIsSummary }}" hint-placeholder-val="{{ true }}">
+                <div class="ns-sgc__props-head">
+                  <div style="display:grid;gap:2px;min-width:0">
+                    <span class="ns-sgc__props-eyebrow">instance</span>
+                    <span class="ns-sgc__props-name">{{ s8.saga }}</span>
+                  </div>
+                  <span style="flex:1"></span>
+                  <span class="{{ s8.statusBadge }}">{{ s8.status }}</span>
+                </div>
+                <div class="ns-sagahero__gauge" style="justify-items:start">
+                  <div class="ns-gauge" data-value="{{ s8Hero.pct }}" data-tone="{{ s8Hero.gaugeTone }}" role="img" aria-label="{{ s8Hero.label }}">
+                    <div class="ns-gauge__ring"></div>
+                    <div class="ns-gauge__center"><span class="ns-gauge__value">{{ s8Hero.done }}<span class="ns-gauge__of">/{{ s8Hero.total }}</span></span><span class="ns-gauge__label">states</span></div>
+                  </div>
+                </div>
+                <div class="ns-kv ns-kv--split">
+                  <div class="ns-kv__row"><span class="ns-kv__key">correlation</span><span class="ns-kv__val" style="color:var(--ns-primary)">{{ s8.id }}</span></div>
+                  <div class="ns-kv__row"><span class="ns-kv__key">durability</span><span class="ns-kv__val">{{ s8.tier }}</span></div>
+                  <div class="ns-kv__row"><span class="ns-kv__key">forward</span><span class="ns-kv__val">{{ s8Hero.fwd }}</span></div>
+                  <div class="ns-kv__row"><span class="ns-kv__key">compensation</span><span class="ns-kv__val" style="color:var(--ns-warning)">{{ s8Hero.compLabel }}</span></div>
+                </div>
+                <!-- assist explaining WHY compensation triggered (grounded in the failed step) -->
+                <sc-if value="{{ s8Assist }}" hint-placeholder-val="{{ false }}">
+                  <div class="ns-assist" data-state="ready">
+                    <div class="ns-assist__head">{{ s8Assist.head }}</div>
+                    <div class="ns-assist__summary">{{ s8Assist.summary }}</div>
+                    <div class="ns-assist__grounding"><span class="ns-assist__grounding-label">grounded in</span>
+                      <sc-for list="{{ s8Assist.grounding }}" as="g" hint-placeholder-count="2"><button class="ns-ground" style="font:inherit" onClick="{{ g.go }}">{{ g.label }}</button></sc-for>
+                    </div>
+                    <div class="ns-assist__meta">{{ s8Assist.meta }}</div>
+                  </div>
+                </sc-if>
+                <div class="ns-sgc__props-section">
+                  <span class="ns-sgc__props-section-label">instance actions</span>
+                  <div style="display:grid;gap:var(--ns-space-2)">
+                    <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s8OpenRun }}">Open run</button>
+                    <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s8OpenTrace }}">View trace ↗</button>
+                  </div>
+                </div>
+              </sc-if>
+              <sc-if value="{{ s8PropsIsNode }}" hint-placeholder-val="{{ false }}">
+                <div class="ns-sgc__props-head">
+                  <span class="ns-sgc__props-eyebrow" data-lane="{{ s8Props.laneAttr }}">{{ s8Props.lane }} state</span>
+                  <button class="ns-sgc__props-clear" onClick="{{ s8ClearNode }}">← summary</button>
+                </div>
+                <div class="ns-sgc__props-title">
+                  <span class="ns-sgc__props-tile" aria-hidden="true">{{ s8Props.glyph }}</span>
+                  <span class="ns-sgc__props-name">{{ s8Props.name }}</span>
+                  <span class="{{ s8Props.statusBadge }}" style="margin-left:auto">{{ s8Props.statusLabel }}</span>
+                </div>
+                <!-- tabbed inspector (ref-11 drawer tabs): State / Transitions / Evidence / Actions -->
+                <div class="ns-sgc__tabs" role="tablist" aria-label="Node inspector">
+                  <sc-for list="{{ s8Tabs }}" as="tb" hint-placeholder-count="4">
+                    <button class="ns-sgc__tab" role="tab" data-active="{{ tb.active }}" aria-selected="{{ tb.active }}" onClick="{{ tb.pick }}">{{ tb.label }}</button>
+                  </sc-for>
+                </div>
+                <sc-if value="{{ s8TabIs.state }}" hint-placeholder-val="{{ true }}">
+                  <div class="ns-sgc__tabpanel">
+                    <div class="ns-kv ns-kv--split">
+                      <div class="ns-kv__row"><span class="ns-kv__key">capability</span><span class="ns-kv__val">{{ s8Props.cap }}</span></div>
+                      <div class="ns-kv__row"><span class="ns-kv__key">timing</span><span class="ns-kv__val">{{ s8Props.timing }}</span></div>
+                      <div class="ns-kv__row"><span class="ns-kv__key">attempt</span><span class="ns-kv__val">{{ s8Props.attempt }}</span></div>
+                      <div class="ns-kv__row"><span class="ns-kv__key">lane</span><span class="ns-kv__val">{{ s8Props.lane }}</span></div>
+                    </div>
+                    <sc-if value="{{ s8Props.hasPayload }}" hint-placeholder-val="{{ true }}">
+                      <div class="ns-sgc__props-section">
+                        <span class="ns-sgc__props-section-label">payload at state</span>
+                        <pre class="ns-sgc__props-payload">{{ s8Props.payload }}</pre>
+                      </div>
+                    </sc-if>
+                  </div>
+                </sc-if>
+                <sc-if value="{{ s8TabIs.trans }}" hint-placeholder-val="{{ false }}">
+                  <div class="ns-sgc__tabpanel">
+                    <div class="ns-sgc__trans">
+                      <sc-for list="{{ s8Props.trans }}" as="t" hint-placeholder-count="2">
+                        <div class="ns-sgc__trans-row" data-lane="{{ t.laneAttr }}"><span class="ns-sgc__trans-dir" aria-hidden="true">{{ t.glyph }}</span><span>{{ t.label }}</span></div>
+                      </sc-for>
+                    </div>
+                  </div>
+                </sc-if>
+                <sc-if value="{{ s8TabIs.evidence }}" hint-placeholder-val="{{ false }}">
+                  <div class="ns-sgc__tabpanel">
+                    <sc-if value="{{ s8HasEvidence }}" hint-placeholder-val="{{ false }}">
+                      <div class="ns-assist" data-state="ready">
+                        <div class="ns-assist__head">{{ s8Evidence.head }}</div>
+                        <div class="ns-assist__summary">{{ s8Evidence.body }}</div>
+                        <div class="ns-assist__grounding"><span class="ns-assist__grounding-label">grounded in</span>
+                          <sc-for list="{{ s8Evidence.grounds }}" as="g" hint-placeholder-count="2"><button class="ns-ground" style="font:inherit" onClick="{{ g.go }}">{{ g.label }}</button></sc-for>
+                        </div>
+                        <div class="ns-assist__meta">read-only · derived from getInstanceHistory</div>
+                      </div>
+                    </sc-if>
+                    <sc-if value="{{ s8Props.noEvidence }}" hint-placeholder-val="{{ true }}">
+                      <div class="ns-sgc__empty">No grounded evidence recorded for this state — it advanced without a fault.</div>
+                    </sc-if>
+                  </div>
+                </sc-if>
+                <sc-if value="{{ s8TabIs.actions }}" hint-placeholder-val="{{ false }}">
+                  <div class="ns-sgc__tabpanel">
+                    <div style="display:grid;gap:var(--ns-space-2)">
+                      <sc-if value="{{ s8Props.hasAction }}" hint-placeholder-val="{{ false }}">
+                        <button class="{{ s8Props.action.cls }}" onClick="{{ s8Props.action.run }}">{{ s8Props.action.label }}</button>
+                      </sc-if>
+                      <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s8OpenJob }}">Linked execution: job_4183 →</button>
+                      <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s8OpenRun }}">Open in Run Inspector</button>
+                    </div>
+                  </div>
+                </sc-if>
+              </sc-if>
+            </aside>
+          </div>
+
+          <!-- SUPPORTING (below the canvas): sortable step table + typed transition stream -->
+          <div class="ns-sgc-support">
+            <div class="ns-panel" style="background:var(--ns-card)">
+              <div class="ns-panel__header" style="padding:var(--ns-space-3-5) var(--ns-space-5);border-bottom:1px solid var(--ns-border);display:flex;align-items:center;gap:var(--ns-space-3);flex-wrap:wrap">
+                <span class="ns-panel__title">Step history</span>
+                <span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs);color:var(--ns-muted-fg)">{{ s8.summary }}</span>
+                <span style="flex:1"></span>
+                <span class="ns-mini-label">getInstanceHistory</span>
+              </div>
+              <div class="ns-panel__body" style="padding:0">
+                <!-- dense sortable columnar table (ref-11): step / transition / timestamp / duration / error / attempt -->
+                <div class="ns-sgtable-wrap">
+                  <table class="ns-sgtable">
+                    <thead>
+                      <tr>
+                        <sc-for list="{{ s8StepTable.cols }}" as="c" hint-placeholder-count="6">
+                          <th class="ns-sgtable__th" data-active="{{ c.active }}" data-dir="{{ c.dir }}"><button class="ns-sgtable__sort" onClick="{{ c.sort }}">{{ c.label }}<span class="ns-sgtable__caret" aria-hidden="true"></span></button></th>
+                        </sc-for>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <sc-for list="{{ s8StepTable.rows }}" as="r" hint-placeholder-count="5">
+                        <tr class="ns-sgtable__row" data-comp="{{ r.comp }}" data-state="{{ r.state }}">
+                          <td class="ns-sgtable__td ns-sgtable__td--seq"><span class="ns-sgtable__seq">{{ r.seq }}</span></td>
+                          <td class="ns-sgtable__td ns-sgtable__td--title"><sc-if value="{{ r.comp }}" hint-placeholder-val="{{ false }}"><span class="ns-sgtable__comp" aria-hidden="true">↩</span></sc-if>{{ r.title }}</td>
+                          <td class="ns-sgtable__td ns-sgtable__td--mut">{{ r.ts }}</td>
+                          <td class="ns-sgtable__td ns-sgtable__td--mut">{{ r.dur }}</td>
+                          <td class="ns-sgtable__td"><sc-if value="{{ r.err }}" hint-placeholder-val="{{ false }}"><span class="ns-sgtable__err">{{ r.err }}</span></sc-if></td>
+                          <td class="ns-sgtable__td ns-sgtable__td--mut">{{ r.attempt }}</td>
+                        </tr>
+                      </sc-for>
+                    </tbody>
+                  </table>
+                </div>
+                <div style="display:flex;align-items:center;gap:var(--ns-space-2);flex-wrap:wrap;padding:var(--ns-space-3) var(--ns-space-5)">
+                  <span class="ns-mini-label">linked executions · listExecutionsByCorrelationId</span>
+                  <button style="all:unset;cursor:pointer;color:var(--ns-primary);font-family:var(--ns-font-mono);font-size:var(--ns-text-xs)" onClick="{{ s8OpenJob }}">job_4183 reserve-inventory · retrying →</button>
+                </div>
+              </div>
+            </div>
+            <div class="ns-panel" style="background:var(--ns-card)">
+              <div class="ns-panel__header" style="padding:var(--ns-space-3) var(--ns-space-4);border-bottom:1px solid var(--ns-border);display:flex;align-items:center;gap:var(--ns-space-2)">
+                <span class="ns-panel__title">Transition stream</span>
+                <span style="flex:1"></span>
+                <span class="ns-sgstream__legend-key"><span class="ns-sgstream__gl" data-type="advance">→</span>advance</span>
+                <span class="ns-sgstream__legend-key"><span class="ns-sgstream__gl" data-type="compensate">↩</span>compensate</span>
+                <span class="ns-sgstream__legend-key"><span class="ns-sgstream__gl" data-type="terminal">◼</span>terminal</span>
+              </div>
+              <div class="ns-sgstream">
+                <sc-for list="{{ s8FeedGroups }}" as="g" hint-placeholder-count="3">
+                  <div class="ns-sgstream__group">
+                    <div class="ns-sgstream__group-head">
+                      <span class="ns-sgstream__saga">{{ g.saga }}</span>
+                      <span class="ns-sgstream__corr">{{ g.corr }}</span>
+                      <span class="{{ g.sBadge }}" style="margin-left:auto">{{ g.status }}</span>
+                    </div>
+                    <sc-for list="{{ g.rows }}" as="r" hint-placeholder-count="3">
+                      <div class="ns-sgstream__row" data-tone="{{ r.tone }}">
+                        <span class="ns-sgstream__gl" data-type="{{ r.typeLabel }}" aria-hidden="true">{{ r.glyph }}</span>
+                        <div class="ns-sgstream__body"><span class="ns-sgstream__label">{{ r.label }}</span><span class="ns-sgstream__detail">{{ r.detail }}</span></div>
+                        <span class="ns-sgstream__time">{{ r.time }}</span>
+                      </div>
+                    </sc-for>
+                  </div>
+                </sc-for>
+              </div>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+
+      <!-- @S8-END -->
+      <sc-if value="{{ isTriggers }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen" data-screen-label="S9 Triggers">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-conhead">
+              <div class="ns-conbread">
+                <span class="ns-conbread__crumb">Capabilities</span>
+                <span class="ns-conbread__sep">›</span>
+                <span class="ns-conbread__crumb ns-conbread__crumb--here">Triggers</span>
+                <span class="ns-chip" style="margin-left:var(--ns-space-2)">contributed by the triggers plugin</span>
+              </div>
+              <div class="ns-toolbar">
+                <div style="display:grid;gap:var(--ns-space-2);min-width:0">
+                  <h1>Triggers</h1>
+                  <p class="ns-lede">Every trigger is a rule — <b>when</b> an event fires, <b>do</b> an action. Read the wiring, know the next fire, and silence a misbehaving rule without redeploy.</p>
+                </div>
+              </div>
+              <!-- iconified metric strip: glyph + value + micro trend/spark (ref 19) -->
+              <div class="ns-tmetric">
+                <sc-for list="{{ s9StatTiles }}" as="st" hint-placeholder-count="5">
+                  <div class="ns-tmetric__tile" data-tone="{{ st.tone }}" data-spark-tone="{{ st.sparkTone }}">
+                    <span class="ns-tmetric__glyph" aria-hidden="true">{{ st.glyph }}</span>
+                    <span class="ns-tmetric__body">
+                      <span class="ns-tmetric__top">
+                        <span class="ns-tmetric__value">{{ st.value }}</span>
+                        <sc-if value="{{ st.trend }}" hint-placeholder-val="{{ false }}">
+                          <span class="ns-tmetric__trend" data-dir="{{ st.trendDir }}"><span class="ns-tmetric__trend-glyph" aria-hidden="true">{{ st.trendDir }}</span>{{ st.trend }}</span>
+                        </sc-if>
+                      </span>
+                      <span class="ns-tmetric__label">{{ st.label }}</span>
+                      <sc-if value="{{ st.spark }}" hint-placeholder-val="{{ false }}">
+                        <span class="ns-tmetric__spark" aria-hidden="true">
+                          <sc-for list="{{ st.spark }}" as="b" hint-placeholder-count="12">
+                            <span class="ns-tmetric__bar" style="height:{{ b.h }}%"></span>
+                          </sc-for>
+                        </span>
+                      </sc-if>
+                      <sc-if value="{{ st.meter }}" hint-placeholder-val="{{ false }}">
+                        <span class="ns-tmetric__meter"><span class="ns-tmetric__meter-fill" data-tone="{{ st.meterTone }}" style="width:{{ st.meter }}%"></span></span>
+                      </sc-if>
+                      <sc-if value="{{ st.sub }}" hint-placeholder-val="{{ false }}">
+                        <span class="ns-tmetric__sub">{{ st.sub }}</span>
+                      </sc-if>
+                    </span>
+                  </div>
+                </sc-for>
+              </div>
+            </div>
+          </header>
+
+          <!-- BESPOKE CATEGORY BAND: activation mechanism, tinted, with firing sparkbars -->
+          <div class="ns-tcat" role="group" aria-label="Trigger categories">
+            <sc-for list="{{ s9Cats }}" as="c" hint-placeholder-count="4">
+              <button class="ns-tcat__card" data-cat="{{ c.cat }}" data-state="{{ c.selState }}" data-tone="{{ c.tone }}" data-hollow="{{ c.hollow }}" onClick="{{ c.pick }}">
+                <span class="ns-tcat__top">
+                  <span class="ns-tcat__glyph" aria-hidden="true">{{ c.glyph }}</span>
+                  <span class="ns-tcat__label">{{ c.label }}</span>
+                  <span class="ns-tcat__count">{{ c.count }}</span>
+                </span>
+                <span class="ns-tcat__blurb">{{ c.blurb }}</span>
+                <span class="ns-tcat__spark" data-hollow="{{ c.hollow }}" aria-hidden="true">
+                  <sc-for list="{{ c.bars }}" as="b" hint-placeholder-count="12">
+                    <span class="ns-tcat__bar" style="height:{{ b.h }}%"></span>
+                  </sc-for>
+                  <sc-if value="{{ c.hollow }}" hint-placeholder-val="{{ false }}">
+                    <span class="ns-tcat__idle">no fires · 24h</span>
+                  </sc-if>
+                </span>
+                <span class="ns-tcat__foot">
+                  <span class="ns-tcat__state" data-tone="{{ c.tone }}">{{ c.stateLabel }}</span>
+                  <span class="ns-tcat__fires">{{ c.emptyLabel }}</span>
+                </span>
+              </button>
+            </sc-for>
+          </div>
+
+          <!-- HERO: TRIGGER BUILDER — when → do rule strip + action palette (ref 21) -->
+          <section class="ns-panel ns-tbuild" style="background:var(--ns-card)">
+            <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border);display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--ns-space-3);flex-wrap:wrap">
+              <div style="display:flex;align-items:baseline;gap:var(--ns-space-3);flex-wrap:wrap;min-width:0">
+                <span class="ns-panel__title">Rule builder</span>
+                <span class="ns-panel__description" style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs)">{{ s9Builder.id }}</span>
+              </div>
+              <span class="ns-tbuild__armpill" data-on="{{ s9Builder.on }}">
+                <span class="ns-tbuild__armdot" aria-hidden="true"></span>{{ s9Builder.on }}
+              </span>
+            </div>
+            <div class="ns-panel__body" style="padding:var(--ns-space-5)">
+              <div class="ns-tbuild__flow">
+                <!-- WHEN node -->
+                <div class="ns-tbuild__node" data-role="when" data-cat="{{ s9Builder.cat }}">
+                  <span class="ns-tbuild__node-kicker">WHEN</span>
+                  <span class="ns-tbuild__node-head"><span class="ns-tbuild__node-glyph" aria-hidden="true">{{ s9Builder.catGlyph }}</span><span class="ns-tbuild__node-title">{{ s9Builder.when }}</span></span>
+                  <span class="ns-tbuild__node-sub">{{ s9Builder.whenSrc }}</span>
+                  <span class="ns-tbuild__node-tag" data-cat="{{ s9Builder.cat }}">{{ s9Builder.catLabel }}</span>
+                </div>
+                <!-- connector + condition -->
+                <div class="ns-tbuild__wire" aria-hidden="true">
+                  <span class="ns-tbuild__wire-line"></span>
+                  <span class="ns-tbuild__cond">if {{ s9Builder.cond }}</span>
+                  <span class="ns-tbuild__wire-line"></span>
+                  <span class="ns-tbuild__wire-arrow" aria-hidden="true"></span>
+                </div>
+                <!-- DO node -->
+                <div class="ns-tbuild__node" data-role="do" data-tone="{{ s9Builder.actTone }}">
+                  <span class="ns-tbuild__node-kicker">DO</span>
+                  <span class="ns-tbuild__node-head"><span class="ns-tbuild__node-glyph" aria-hidden="true">{{ s9Builder.actGlyph }}</span><span class="ns-tbuild__node-title">{{ s9Builder.actName }}</span></span>
+                  <span class="ns-tbuild__node-sub">{{ s9Builder.doesLabel }}</span>
+                  <button class="ns-tbuild__node-link" onClick="{{ s9Builder.openAction }}">Open target</button>
+                </div>
+              </div>
+              <!-- action-type palette (ref 21 component palette) -->
+              <div class="ns-tbuild__palette">
+                <span class="ns-tbuild__palette-label">action types</span>
+                <div class="ns-tbuild__palette-grid">
+                  <sc-for list="{{ s9Palette }}" as="p" hint-placeholder-count="4">
+                    <span class="ns-tbuild__chip" data-tone="{{ p.tone }}" data-state="{{ p.active }}">
+                      <span class="ns-tbuild__chip-glyph" aria-hidden="true">{{ p.glyph }}</span>{{ p.label }}
+                    </span>
+                  </sc-for>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <!-- SCHEDULE STRIP: next-7-day day-strip + next-fire countdowns (ref 19) -->
+          <sc-if value="{{ s9HasSched }}" hint-placeholder-val="{{ true }}">
+          <section class="ns-panel" style="background:var(--ns-card)">
+            <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border)">
+              <span class="ns-panel__title">Schedule &amp; next fires <span style="font-family:var(--ns-font-mono);font-weight:400;color:var(--ns-muted-fg);font-size:var(--ns-text-2xs)">tz Europe/Zurich · backfill honored</span></span>
+              <span class="ns-panel__description">Only time-driven triggers have a next fire — computed from declared cron / interval.</span>
+            </div>
+            <div class="ns-panel__body" style="padding:var(--ns-space-4) var(--ns-space-5);display:grid;gap:var(--ns-space-4)">
+              <div class="ns-tdaystrip">
+                <sc-for list="{{ s9Days }}" as="d" hint-placeholder-count="7">
+                  <div class="ns-tdaystrip__day" data-today="{{ d.isToday }}">
+                    <span class="ns-tdaystrip__dow">{{ d.dow }}</span>
+                    <span class="ns-tdaystrip__date">{{ d.date }}</span>
+                    <span class="ns-tdaystrip__fires">
+                      <sc-for list="{{ d.fires }}" as="f" hint-placeholder-count="2">
+                        <span class="ns-tdaystrip__pip" data-tone="{{ f.tone }}" title="{{ f.id }} · {{ f.at }}">{{ f.at }}</span>
+                      </sc-for>
+                    </span>
+                    <sc-if value="{{ d.hasPoll }}" hint-placeholder-val="{{ true }}">
+                      <span class="ns-tdaystrip__poll" title="poll.inventory-sync · every 30s"><span class="ns-tdaystrip__poll-track"></span>poll · 30s</span>
+                    </sc-if>
+                  </div>
+                </sc-for>
+              </div>
+              <div class="ns-tnext">
+                <sc-for list="{{ s9NextFires }}" as="n" hint-placeholder-count="3">
+                  <button class="ns-tnext__card" data-tone="{{ n.tone }}" onClick="{{ n.pick }}">
+                    <span class="ns-tnext__head">
+                      <span class="ns-tnext__id">{{ n.id }}</span>
+                      <span class="ns-tnext__kind" data-tone="{{ n.tone }}">{{ n.kindLabel }}</span>
+                    </span>
+                    <span class="ns-tnext__in">{{ n.nextIn }}</span>
+                    <span class="ns-tnext__prog" aria-hidden="true"><span class="ns-tnext__prog-fill" data-tone="{{ n.tone }}" style="width:{{ n.progressPct }}%"></span></span>
+                    <span class="ns-tnext__meta"><span class="ns-tnext__at">{{ n.span }}</span> → {{ n.does }}</span>
+                  </button>
+                </sc-for>
+              </div>
+            </div>
+          </section>
+          </sc-if>
+
+          <!-- FIRING-HISTORY TABLE: dense sortable console table (ref 11/13) -->
+          <section class="ns-panel" style="background:var(--ns-card)">
+            <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border);display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--ns-space-3);flex-wrap:wrap">
+              <div style="display:flex;align-items:baseline;gap:var(--ns-space-3);flex-wrap:wrap;min-width:0">
+                <span class="ns-panel__title">Firing history</span>
+                <span class="ns-panel__description">click a row for the action chain, payload &amp; schedule</span>
+              </div>
+              <div class="ns-feed-toolbar">
+                <span class="ns-livedot" data-state="{{ s9LiveState }}">sse</span>
+                <button class="ns-catfilter" data-active="{{ s9CatIsAll }}" onClick="{{ s9ClearCat }}">filter · {{ s9CatActive }}</button>
+              </div>
+            </div>
+            <!-- inline query toolbar (ref 11): quick-search + outcome + limit + add-filter -->
+            <div class="ns-thquery">
+              <div class="ns-thquery__search">
+                <span class="ns-thquery__search-glyph" aria-hidden="true">⌕</span>
+                <input class="ns-thquery__input" type="text" placeholder="Quick search — trigger or action…" value="{{ s9Query }}" onInput="{{ s9SetQuery }}" aria-label="Quick search firing history">
+                <sc-if value="{{ s9Query }}" hint-placeholder-val="{{ false }}">
+                  <button class="ns-thquery__clear" onClick="{{ s9ClearQuery }}" aria-label="Clear search">×</button>
+                </sc-if>
+              </div>
+              <label class="ns-thquery__field">
+                <span class="ns-thquery__field-label">outcome</span>
+                <select class="ns-thquery__select" value="{{ s9Outcome }}" onChange="{{ s9SetOutcome }}" aria-label="Filter by outcome">
+                  <option value="all">all outcomes</option>
+                  <option value="ok">completed</option>
+                  <option value="skipped">skipped</option>
+                  <option value="idle">idle</option>
+                  <option value="failed">failed</option>
+                </select>
+              </label>
+              <label class="ns-thquery__field">
+                <span class="ns-thquery__field-label">show</span>
+                <select class="ns-thquery__select" value="{{ s9Limit }}" onChange="{{ s9SetLimit }}" aria-label="Max results">
+                  <option value="25">25</option>
+                  <option value="50">50</option>
+                  <option value="100">100</option>
+                </select>
+              </label>
+              <button class="ns-thquery__addfilter" onClick="{{ s9AddFilter }}"><span aria-hidden="true">+</span> Add JS filter</button>
+              <span class="ns-thquery__count">{{ s9HistCount }}</span>
+            </div>
+            <div class="ns-contable" style="border:0;border-radius:0;background:transparent">
+              <div class="ns-contable__scroll">
+                <table class="ns-contable__t ns-thist">
+                  <thead>
+                    <tr>
+                      <sc-for list="{{ s9SortCols }}" as="col" hint-placeholder-count="6">
+                        <th class="ns-contable__th ns-thist__th" data-active="{{ col.active }}" data-dir="{{ col.dir }}" onClick="{{ col.sort }}">{{ col.label }} <span class="ns-contable__sort">↕</span></th>
+                      </sc-for>
+                      <th class="ns-contable__th ns-thist__th--spark">24h</th>
+                      <th class="ns-contable__th ns-contable__th--r"></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <sc-for list="{{ s9Hist }}" as="t" hint-placeholder-count="6">
+                      <tr class="ns-contable__row ns-thist__row" data-state="{{ t.selState }}" data-off="{{ t.on }}" onClick="{{ t.pick }}">
+                        <td class="ns-contable__td"><button class="ns-contable__name" onClick="{{ t.pick }}">{{ t.id }}</button></td>
+                        <td class="ns-contable__td"><span class="ns-tcatbadge" data-cat="{{ t.cat }}"><span class="ns-tcatbadge__glyph" aria-hidden="true">{{ t.catGlyph }}</span>{{ t.catLabel }}</span></td>
+                        <td class="ns-contable__td"><span class="ns-contable__sched">{{ t.lastAt }}</span></td>
+                        <td class="ns-contable__td"><span class="ns-contable__sched">{{ t.next }}</span><span class="ns-contable__sub">{{ t.nextIn }}</span></td>
+                        <td class="ns-contable__td"><span class="{{ t.sBadge }}">{{ t.outcome }}</span></td>
+                        <td class="ns-contable__td"><span class="ns-thist__lat">{{ t.lat }}</span></td>
+                        <td class="ns-contable__td"><span class="ns-trend" data-tone="{{ t.ttone }}" data-series="{{ t.series }}" aria-hidden="true"><svg viewBox="0 0 100 30" preserveAspectRatio="none"></svg></span></td>
+                        <td class="ns-contable__td ns-contable__td--r"><span style="position:relative;display:inline-flex;cursor:pointer" onClick="{{ t.toggle }}"><input type="checkbox" class="ns-switch" checked="{{ t.on }}" onChange="{{ t.toggle }}"><span class="ns-switch__track" style="display:inline-flex;align-items:center;width:2.35rem;height:1.3rem;border:1px solid var(--ns-border-strong);border-radius:var(--ns-radius-full);background:var(--ns-surface);padding:2px;transition:background 140ms ease,border-color 140ms ease"><span class="ns-switch__thumb" style="width:0.95rem;height:0.95rem;border-radius:var(--ns-radius-full);background:var(--ns-card);box-shadow:var(--ns-shadow-xs);transition:transform 140ms ease"></span></span></span></td>
+                      </tr>
+                    </sc-for>
+                    <sc-if value="{{ s9HistEmpty }}" hint-placeholder-val="{{ false }}">
+                      <tr class="ns-contable__row" style="cursor:default"><td class="ns-contable__td" colspan="8"><div class="ns-empty-state" style="border:0">No triggers in this category.</div></td></tr>
+                    </sc-if>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div class="ns-card__footer" style="display:flex;gap:var(--ns-space-2);padding:var(--ns-space-3) var(--ns-space-5);border-top:1px solid var(--ns-border);flex-wrap:wrap">
+              <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s9OpenRun }}">Open firing run</button>
+              <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s9OpenDlq }}">Trigger DLQ · 17 →</button>
+            </div>
+          </section>
+
+          <!-- SECONDARY: webhook ingress test + dead-letter mini panel -->
+          <div class="ns-tgrid2">
+            <section class="ns-panel" style="background:var(--ns-card)">
+              <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border)">
+                <span class="ns-panel__title">Webhook ingress test</span>
+                <span class="ns-panel__description">Simulate an inbound delivery — distinct from Scalar’s app-route try-it</span>
+              </div>
+              <div class="ns-panel__body" style="padding:var(--ns-space-4) var(--ns-space-5);display:grid;gap:var(--ns-space-3)">
+                <div class="ns-tingress__route"><span class="ns-tingress__verb">POST</span><span class="ns-tingress__path">/webhooks/payment/test</span></div>
+                <textarea class="ns-textarea" id="ns-wh-payload" rows="4" style="width:100%;box-sizing:border-box;padding:var(--ns-space-2) var(--ns-space-3);border:1px solid var(--ns-border);border-radius:var(--ns-radius-md);background:var(--ns-surface);color:var(--ns-fg);font-family:var(--ns-font-mono);font-size:var(--ns-text-xs);resize:vertical" value="{{ s9Webhook }}" onChange="{{ s9SetWebhook }}"></textarea>
+                <button class="ns-btn ns-btn--primary ns-btn--sm" style="justify-self:start" onClick="{{ s9SendTest }}">Send test payload</button>
+              </div>
+            </section>
+
+            <section class="ns-panel" style="background:var(--ns-card)">
+              <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border);display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--ns-space-3);flex-wrap:wrap">
+                <div style="display:grid;gap:2px;min-width:0">
+                  <span class="ns-panel__title">Dead letters</span>
+                  <span class="ns-panel__description">Failed firings parked for reprocessing</span>
+                </div>
+                <span class="ns-tdlqsum" data-tone="warning"><span class="ns-tdlqsum__glyph" aria-hidden="true">⚠</span>redis 14 · memory 3</span>
+              </div>
+              <div class="ns-panel__body" style="padding:0">
+                <div class="ns-tdlt">
+                  <sc-for list="{{ s9DeadLetters }}" as="d" hint-placeholder-count="5">
+                    <div class="ns-tdlt__row" data-tone="{{ d.tone }}">
+                      <span class="ns-tdlt__bar" aria-hidden="true"></span>
+                      <span class="ns-tdlt__main">
+                        <span class="ns-tdlt__top">
+                          <span class="ns-tdlt__id">{{ d.id }}</span>
+                          <span class="ns-tdlt__q" data-q="{{ d.q }}">{{ d.q }}</span>
+                          <span class="ns-tdlt__age">{{ d.age }}</span>
+                        </span>
+                        <span class="ns-tdlt__err">{{ d.err }}</span>
+                        <span class="ns-tdlt__sub">{{ d.trig }} · retry {{ d.retry }}</span>
+                      </span>
+                      <span class="ns-tdlt__acts">
+                        <button class="ns-tdlt__act" onClick="{{ d.retryAction }}" aria-label="Retry">↻</button>
+                        <button class="ns-tdlt__act" onClick="{{ d.inspect }}" aria-label="Inspect">⇱</button>
+                      </span>
+                    </div>
+                  </sc-for>
+                </div>
+                <div class="ns-tdlt__foot">
+                  <span class="ns-tdlt__note">top offender · <span style="font-family:var(--ns-font-mono)">analytics msg_88f</span></span>
+                  <button class="ns-btn ns-btn--secondary ns-btn--sm" onClick="{{ s9OpenDlq }}">Open Dead-Letter Queues →</button>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+      </sc-if>
+
+      <!-- @S9-END -->
+      <sc-if value="{{ isStreams }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen ns-streams" data-screen-label="S10 Streams">
+          <!-- Topic header: breadcrumb + tab row + streams-health composite strip (ref 11/13) -->
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-conhead">
+              <div class="ns-conbread">
+                <span class="ns-conbread__crumb">Capabilities</span>
+                <span class="ns-conbread__sep">›</span>
+                <span class="ns-conbread__crumb">Streams</span>
+                <span class="ns-conbread__sep">›</span>
+                <span class="ns-conbread__crumb ns-conbread__crumb--here" style="font-family:var(--ns-font-mono)">{{ s10TopicName }}</span>
+                <span class="ns-chip" style="margin-left:var(--ns-space-2)">contributed by the streams plugin</span>
+              </div>
+              <div class="ns-toolbar">
+                <div style="display:grid;gap:var(--ns-space-2);min-width:0">
+                  <h1 style="display:flex;align-items:center;gap:var(--ns-space-3);flex-wrap:wrap"><span style="font-family:var(--ns-font-mono)">{{ s10TopicName }}</span><span class="ns-strlive" aria-hidden="true"><span class="ns-strlive__dot"></span>live</span></h1>
+                  <p class="ns-lede">A durable, partitioned event log — read throughput, offsets, and consumer-group lag; tail records live and see who produces and who falls behind. Raw broker internals stay in Aspire.</p>
+                </div>
+              </div>
+              <!-- streams-health composite: throughput / lag / partitions / retention, each with a micro-viz -->
+              <div class="ns-strhealth">
+                <div class="ns-strhealth__tile" data-tone="primary">
+                  <div class="ns-strhealth__head"><span class="ns-strhealth__label">throughput</span><span class="ns-strhealth__unit">msgs/sec</span></div>
+                  <div class="ns-strhealth__val">{{ s10ThruNow }}<span class="ns-strhealth__val-sub">/s</span></div>
+                  <span class="ns-trend ns-strhealth__spark" data-series="{{ s10ThruSpark }}" aria-hidden="true"><svg viewBox="0 0 100 30" preserveAspectRatio="none"></svg></span>
+                </div>
+                <div class="ns-strhealth__tile" data-tone="warning">
+                  <div class="ns-strhealth__head"><span class="ns-strhealth__label">consumer lag</span><span class="ns-strhealth__unit">{{ s10LagHot }} hotspot</span></div>
+                  <div class="ns-strhealth__val">{{ s10TotalLag }}<span class="ns-strhealth__val-sub">msgs</span></div>
+                  <div class="ns-strhealth__bp" data-tone="{{ s10BackpressureTone }}"><span class="ns-strhealth__bp-dot" aria-hidden="true"></span>{{ s10Backpressure }}</div>
+                </div>
+                <div class="ns-strhealth__tile" data-tone="success">
+                  <div class="ns-strhealth__head"><span class="ns-strhealth__label">partitions</span><span class="ns-strhealth__unit">in-sync</span></div>
+                  <div class="ns-strhealth__val">{{ s10InSync }}<span class="ns-strhealth__val-sub">/ {{ s10Partitions }}</span></div>
+                  <div class="ns-strhealth__pips" aria-hidden="true">
+                    <sc-for list="{{ s10Parts }}" as="pp" hint-placeholder-count="6"><span class="ns-strhealth__pip" data-tone="{{ pp.lagTone }}"></span></sc-for>
+                  </div>
+                </div>
+                <div class="ns-strhealth__tile" data-tone="muted">
+                  <div class="ns-strhealth__head"><span class="ns-strhealth__label">retention</span><span class="ns-strhealth__unit">replication ×{{ s10Replication }}</span></div>
+                  <div class="ns-strhealth__val">{{ s10Retention }}</div>
+                  <div class="ns-strhealth__meta" style="font-family:var(--ns-font-mono)">{{ s10TopicBackend }}</div>
+                </div>
+              </div>
+              <div class="ns-contab" role="tablist" aria-label="Topic views">
+                <button class="ns-contab__btn" role="tab" data-state="{{ s10TabConsume.state }}" onClick="{{ s10TabConsume.set }}">Consume</button>
+                <button class="ns-contab__btn" role="tab" data-state="{{ s10TabParts.state }}" onClick="{{ s10TabParts.set }}">Partitions <span class="ns-contab__count">{{ s10Partitions }}</span></button>
+                <button class="ns-contab__btn" role="tab" data-state="{{ s10TabConsumers.state }}" onClick="{{ s10TabConsumers.set }}">Consumers <span class="ns-contab__count">3</span></button>
+                <button class="ns-contab__btn" role="tab" data-state="{{ s10TabConfig.state }}" onClick="{{ s10TabConfig.set }}">Config</button>
+              </div>
+            </div>
+          </header>
+
+          <!-- Throughput hero: JS-measured area chart + hover crosshair + OHLC footer (ref 04) -->
+          <div class="ns-strhero">
+            <div class="ns-strhero__main">
+              <div class="ns-strhero__head">
+                <div>
+                  <span class="ns-mini-label">live throughput · payment-events</span>
+                  <div class="ns-strhero__title"><span class="ns-strhero__now">{{ s10ThruNow }}</span><span class="ns-strhero__now-unit">msgs/sec</span></div>
+                </div>
+                <div class="ns-strhero__bp" data-tone="{{ s10BackpressureTone }}">
+                  <span class="ns-strhero__bp-dot" aria-hidden="true"></span>
+                  <span class="ns-strhero__bp-body"><span class="ns-strhero__bp-label">{{ s10Backpressure }}</span><span class="ns-strhero__bp-detail">{{ s10BackpressureDetail }}</span></span>
+                </div>
+              </div>
+              <div class="ns-strhero__chart ns-areachart" data-series="{{ s10ThruSeries }}" data-marker="{{ s10ThruMarker }}" data-crosshair="1">
+                <svg class="ns-areachart__svg ns-strhero__svg" viewBox="0 0 300 128" preserveAspectRatio="none"></svg>
+                <div class="ns-strhero__tip" aria-hidden="true"><span class="ns-strhero__tip-val"></span><span class="ns-strhero__tip-x"></span></div>
+              </div>
+              <div class="ns-strhero__ohlc">
+                <div class="ns-strhero__ohlc-item"><span class="ns-strhero__ohlc-k">peak</span><span class="ns-strhero__ohlc-v">{{ s10ThruPeak }}/s</span></div>
+                <span class="ns-strhero__ohlc-dot" aria-hidden="true"></span>
+                <div class="ns-strhero__ohlc-item"><span class="ns-strhero__ohlc-k">avg</span><span class="ns-strhero__ohlc-v">{{ s10ThruAvg }}/s</span></div>
+                <span class="ns-strhero__ohlc-dot" aria-hidden="true"></span>
+                <div class="ns-strhero__ohlc-item"><span class="ns-strhero__ohlc-k">floor</span><span class="ns-strhero__ohlc-v">{{ s10ThruFloor }}/s</span></div>
+                <span class="ns-strhero__ohlc-dot" aria-hidden="true"></span>
+                <div class="ns-strhero__ohlc-item"><span class="ns-strhero__ohlc-k">window</span><span class="ns-strhero__ohlc-v">2m</span></div>
+              </div>
+            </div>
+            <!-- Producer → consumer topology (div/CSS flow, not a canvas) -->
+            <div class="ns-strtopo">
+              <span class="ns-mini-label">producer → log → consumers</span>
+              <div class="ns-strtopo__flow">
+                <div class="ns-strtopo__col">
+                  <span class="ns-strtopo__col-label">producers</span>
+                  <sc-for list="{{ s10Producers }}" as="pr" hint-placeholder-count="2">
+                    <div class="ns-strtopo__node" data-role="producer">
+                      <span class="ns-strtopo__node-name">{{ pr.id }}</span>
+                      <span class="ns-strtopo__node-rate">{{ pr.rate }}</span>
+                    </div>
+                  </sc-for>
+                </div>
+                <div class="ns-strtopo__spine" aria-hidden="true"><span class="ns-strtopo__spine-line"></span></div>
+                <div class="ns-strtopo__log" data-role="log">
+                  <span class="ns-strtopo__log-name" style="font-family:var(--ns-font-mono)">{{ s10TopicName }}</span>
+                  <span class="ns-strtopo__log-sub">{{ s10Partitions }} partitions · ×{{ s10Replication }}</span>
+                  <div class="ns-strtopo__log-bars" aria-hidden="true">
+                    <sc-for list="{{ s10Parts }}" as="pb" hint-placeholder-count="6"><span class="ns-strtopo__log-bar" data-tone="{{ pb.lagTone }}"></span></sc-for>
+                  </div>
+                </div>
+                <div class="ns-strtopo__spine ns-strtopo__spine--fan" aria-hidden="true"><span class="ns-strtopo__spine-line"></span></div>
+                <div class="ns-strtopo__col ns-strtopo__col--fan">
+                  <span class="ns-strtopo__col-label">consumer groups</span>
+                  <sc-for list="{{ s10Consumers }}" as="cn" hint-placeholder-count="3">
+                    <div class="ns-strtopo__leaf">
+                      <span class="ns-strtopo__stub" aria-hidden="true"></span>
+                      <div class="ns-strtopo__node" data-role="consumer" data-tone="{{ cn.lagTone }}">
+                        <span class="ns-strtopo__node-name">{{ cn.id }}</span>
+                        <span class="ns-strtopo__node-lag" data-tone="{{ cn.lagTone }}">lag {{ cn.lag }}</span>
+                      </div>
+                    </div>
+                  </sc-for>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Body: left = tab panel (records / partitions / consumers / config), right = live tail + drawer -->
+          <div class="ns-strbody">
+            <section class="ns-strbody__main" style="min-width:0">
+              <!-- CONSUME: partition & offset ledger (default) -->
+              <sc-if value="{{ s10IsConsume }}" hint-placeholder-val="{{ true }}">
+                <div class="ns-panel" style="background:var(--ns-card)">
+                  <div class="ns-strpanel__head">
+                    <span class="ns-panel__title">Partition &amp; offset ledger</span>
+                    <span class="ns-strpanel__hint">head → committed · lag heat inline</span>
+                  </div>
+                  <div class="ns-strledger">
+                    <div class="ns-strledger__head" role="row">
+                      <span class="ns-strledger__h">Part</span>
+                      <span class="ns-strledger__h">Leader</span>
+                      <span class="ns-strledger__h ns-strledger__h--num">Head</span>
+                      <span class="ns-strledger__h ns-strledger__h--num">Committed</span>
+                      <span class="ns-strledger__h">Lag</span>
+                      <span class="ns-strledger__h">Group</span>
+                    </div>
+                    <sc-for list="{{ s10Parts }}" as="p" hint-placeholder-count="6">
+                      <button class="ns-strledger__row" data-tone="{{ p.lagTone }}" onClick="{{ p.go }}">
+                        <span class="ns-strledger__part"><span class="ns-strledger__part-idx">{{ p.p }}</span><sc-if value="{{ p.inSync }}" hint-placeholder-val="{{ true }}"><span class="ns-strledger__sync" title="in-sync" aria-hidden="true">◆</span></sc-if></span>
+                        <span class="ns-strledger__leader">{{ p.leader }}</span>
+                        <span class="ns-strledger__num">{{ p.head }}</span>
+                        <span class="ns-strledger__num">{{ p.committed }}</span>
+                        <span class="ns-strledger__lag"><span class="ns-strledger__lagbar" data-tone="{{ p.lagTone }}" style="width:{{ p.lagPct }}%"></span><span class="ns-strledger__lagval">{{ p.lag }}</span></span>
+                        <span class="ns-strledger__group">{{ p.group }}</span>
+                      </button>
+                    </sc-for>
+                  </div>
+                </div>
+                <!-- partition × time lag heatmap (ref 10 retention heat) -->
+                <div class="ns-panel" style="background:var(--ns-card);margin-top:var(--ns-space-5)">
+                  <div class="ns-strpanel__head">
+                    <span class="ns-panel__title">Lag heatmap</span>
+                    <span class="ns-strpanel__hint">partition × recent windows · darker = further behind</span>
+                  </div>
+                  <div class="ns-strheat">
+                    <sc-for list="{{ s10Heat }}" as="hr" hint-placeholder-count="6">
+                      <div class="ns-strheat__row">
+                        <span class="ns-strheat__plabel">p{{ hr.p }}</span>
+                        <div class="ns-strheat__cells">
+                          <sc-for list="{{ hr.cells }}" as="c" hint-placeholder-count="8">
+                            <span class="ns-strheat__cell" data-v="{{ c.v }}" aria-hidden="true"></span>
+                          </sc-for>
+                        </div>
+                      </div>
+                    </sc-for>
+                    <div class="ns-strheat__legend">
+                      <span class="ns-strheat__legend-label">lag</span>
+                      <span class="ns-strheat__cell" data-v="0" aria-hidden="true"></span>
+                      <span class="ns-strheat__cell" data-v="1" aria-hidden="true"></span>
+                      <span class="ns-strheat__cell" data-v="2" aria-hidden="true"></span>
+                      <span class="ns-strheat__cell" data-v="3" aria-hidden="true"></span>
+                      <span class="ns-strheat__cell" data-v="4" aria-hidden="true"></span>
+                      <span class="ns-strheat__legend-label">more</span>
+                    </div>
+                  </div>
+                </div>
+              </sc-if>
+
+              <!-- PARTITIONS: the ledger, focused -->
+              <sc-if value="{{ s10IsParts }}" hint-placeholder-val="{{ false }}">
+                <div class="ns-panel" style="background:var(--ns-card)">
+                  <div class="ns-strpanel__head">
+                    <span class="ns-panel__title">Partitions</span>
+                    <span class="ns-strpanel__hint">{{ s10InSync }} of {{ s10Partitions }} in-sync</span>
+                  </div>
+                  <div class="ns-strledger">
+                    <div class="ns-strledger__head" role="row">
+                      <span class="ns-strledger__h">Part</span>
+                      <span class="ns-strledger__h">Leader</span>
+                      <span class="ns-strledger__h ns-strledger__h--num">Head</span>
+                      <span class="ns-strledger__h ns-strledger__h--num">Committed</span>
+                      <span class="ns-strledger__h">Lag</span>
+                      <span class="ns-strledger__h">Group</span>
+                    </div>
+                    <sc-for list="{{ s10Parts }}" as="p" hint-placeholder-count="6">
+                      <button class="ns-strledger__row" data-tone="{{ p.lagTone }}" onClick="{{ p.go }}">
+                        <span class="ns-strledger__part"><span class="ns-strledger__part-idx">{{ p.p }}</span><sc-if value="{{ p.inSync }}" hint-placeholder-val="{{ true }}"><span class="ns-strledger__sync" title="in-sync" aria-hidden="true">◆</span></sc-if></span>
+                        <span class="ns-strledger__leader">{{ p.leader }}</span>
+                        <span class="ns-strledger__num">{{ p.head }}</span>
+                        <span class="ns-strledger__num">{{ p.committed }}</span>
+                        <span class="ns-strledger__lag"><span class="ns-strledger__lagbar" data-tone="{{ p.lagTone }}" style="width:{{ p.lagPct }}%"></span><span class="ns-strledger__lagval">{{ p.lag }}</span></span>
+                        <span class="ns-strledger__group">{{ p.group }}</span>
+                      </button>
+                    </sc-for>
+                  </div>
+                </div>
+                <!-- partition × time lag heatmap (also on Partitions tab — partition-centric) -->
+                <div class="ns-panel" style="background:var(--ns-card);margin-top:var(--ns-space-5)">
+                  <div class="ns-strpanel__head">
+                    <span class="ns-panel__title">Lag heatmap</span>
+                    <span class="ns-strpanel__hint">partition × recent windows · darker = further behind</span>
+                  </div>
+                  <div class="ns-strheat">
+                    <sc-for list="{{ s10Heat }}" as="hr" hint-placeholder-count="6">
+                      <div class="ns-strheat__row">
+                        <span class="ns-strheat__plabel">p{{ hr.p }}</span>
+                        <div class="ns-strheat__cells">
+                          <sc-for list="{{ hr.cells }}" as="c" hint-placeholder-count="8">
+                            <span class="ns-strheat__cell" data-v="{{ c.v }}" aria-hidden="true"></span>
+                          </sc-for>
+                        </div>
+                      </div>
+                    </sc-for>
+                    <div class="ns-strheat__legend">
+                      <span class="ns-strheat__legend-label">lag</span>
+                      <span class="ns-strheat__cell" data-v="0" aria-hidden="true"></span>
+                      <span class="ns-strheat__cell" data-v="1" aria-hidden="true"></span>
+                      <span class="ns-strheat__cell" data-v="2" aria-hidden="true"></span>
+                      <span class="ns-strheat__cell" data-v="3" aria-hidden="true"></span>
+                      <span class="ns-strheat__cell" data-v="4" aria-hidden="true"></span>
+                      <span class="ns-strheat__legend-label">more</span>
+                    </div>
+                  </div>
+                </div>
+              </sc-if>
+
+              <!-- CONSUMERS: consumer-group lag cards with a lag gauge -->
+              <sc-if value="{{ s10IsConsumers }}" hint-placeholder-val="{{ false }}">
+                <div class="ns-strgroups">
+                  <sc-for list="{{ s10Groups }}" as="g" hint-placeholder-count="3">
+                    <button class="ns-strgroup" data-tone="{{ g.lagTone }}" onClick="{{ g.go }}">
+                      <div class="ns-strgroup__gauge ns-gauge" data-value="{{ g.lagPct }}" data-tone="{{ g.lagTone }}">
+                        <span class="ns-gauge__ring" aria-hidden="true"></span>
+                        <span class="ns-strgroup__gauge-val">{{ g.lag }}</span>
+                      </div>
+                      <div class="ns-strgroup__body">
+                        <div class="ns-strgroup__top">
+                          <span class="ns-strgroup__name">{{ g.id }}</span>
+                          <span class="{{ g.sBadge }}">{{ g.status }}</span>
+                        </div>
+                        <div class="ns-strgroup__meta">
+                          <span class="ns-strgroup__kv"><span class="ns-strgroup__k">members</span><span class="ns-strgroup__v">{{ g.members }}</span></span>
+                          <span class="ns-strgroup__kv"><span class="ns-strgroup__k">partitions</span><span class="ns-strgroup__v">{{ g.parts }}</span></span>
+                          <span class="ns-strgroup__kv"><span class="ns-strgroup__k">guarantee</span><span class="ns-strgroup__v">{{ g.policy }}</span></span>
+                        </div>
+                        <span class="ns-strgroup__lagbar"><span class="ns-strgroup__lagbar-fill" data-tone="{{ g.lagTone }}" style="width:{{ g.lagPct }}%"></span></span>
+                      </div>
+                    </button>
+                  </sc-for>
+                </div>
+              </sc-if>
+
+              <!-- CONFIG: topic configuration (KV) -->
+              <sc-if value="{{ s10IsConfig }}" hint-placeholder-val="{{ false }}">
+                <div class="ns-panel" style="background:var(--ns-card)">
+                  <div class="ns-strpanel__head"><span class="ns-panel__title">Topic configuration</span><span class="ns-strpanel__hint">payment-events</span></div>
+                  <div class="ns-strcfg">
+                    <div class="ns-strcfg__row"><span class="ns-strcfg__k">partitions</span><span class="ns-strcfg__v">{{ s10Partitions }}</span></div>
+                    <div class="ns-strcfg__row"><span class="ns-strcfg__k">replication.factor</span><span class="ns-strcfg__v">{{ s10Replication }}</span></div>
+                    <div class="ns-strcfg__row"><span class="ns-strcfg__k">retention</span><span class="ns-strcfg__v">{{ s10Retention }}</span></div>
+                    <div class="ns-strcfg__row"><span class="ns-strcfg__k">backend</span><span class="ns-strcfg__v">{{ s10TopicBackend }}</span></div>
+                    <div class="ns-strcfg__row"><span class="ns-strcfg__k">cleanup.policy</span><span class="ns-strcfg__v">delete</span></div>
+                    <div class="ns-strcfg__row"><span class="ns-strcfg__k">min.insync.replicas</span><span class="ns-strcfg__v">2</span></div>
+                  </div>
+                </div>
+                <!-- record schema (ref 13 line-numbered schema view) -->
+                <div class="ns-panel" style="background:var(--ns-card);margin-top:var(--ns-space-5)">
+                  <div class="ns-strpanel__head">
+                    <span class="ns-panel__title">Record schema</span>
+                    <span class="ns-strpanel__hint">avro · PaymentEvent · v3</span>
+                  </div>
+                  <div class="ns-strschema">
+                    <sc-for list="{{ s10Schema }}" as="ln" hint-placeholder-count="11">
+                      <div class="ns-strschema__line"><span class="ns-strschema__n">{{ ln.n }}</span><span class="ns-strschema__code">{{ ln.t }}</span></div>
+                    </sc-for>
+                  </div>
+                </div>
+              </sc-if>
+            </section>
+
+            <!-- Right rail: live event tail (Consume) + stream detail drawer -->
+            <aside class="ns-strbody__rail" style="min-width:0">
+              <div class="ns-panel ns-strtail" style="background:var(--ns-card)">
+                <div class="ns-strpanel__head">
+                  <span class="ns-panel__title" style="display:flex;align-items:center;gap:var(--ns-space-2)"><span class="ns-strlive" aria-hidden="true"><span class="ns-strlive__dot"></span></span>Live event tail</span>
+                  <span class="ns-strpanel__hint">offset · part · key</span>
+                </div>
+                <div class="ns-strtail__list">
+                  <sc-for list="{{ s10Records }}" as="r" hint-placeholder-count="6">
+                    <div class="ns-strtail__row" data-tone="{{ r.tone }}">
+                      <span class="ns-strtail__marker" aria-hidden="true"></span>
+                      <div class="ns-strtail__cols">
+                        <div class="ns-strtail__line1"><span class="ns-strtail__off">{{ r.off }}</span><span class="ns-strtail__part">p{{ r.part }}</span><span class="ns-strtail__key">{{ r.key }}</span><span class="ns-strtail__age">{{ r.age }}</span></div>
+                        <div class="ns-strtail__val">{{ r.val }}</div>
+                      </div>
+                    </div>
+                  </sc-for>
+                </div>
+              </div>
+
+              <!-- Stream detail drawer (desktop) — tabbed, opens the fan-out story -->
+              <div class="ns-panel ns-strdrawer" style="background:var(--ns-card)">
+                <div class="ns-strdrawer__head">
+                  <div class="ns-strdrawer__title">
+                    <span class="ns-strdrawer__eyebrow">selected message</span>
+                    <span class="ns-strdrawer__id" style="font-family:var(--ns-font-mono)">{{ s10SelId }}</span>
+                  </div>
+                  <span class="{{ s10VerdictBadge }}">{{ s10Verdict }}</span>
+                </div>
+                <div class="ns-strdrawer__corr" style="font-family:var(--ns-font-mono)">corr {{ s10Corr }}</div>
+                <div class="ns-strdrawer__msgs">
+                  <sc-for list="{{ s10Msgs }}" as="m" hint-placeholder-count="2">
+                    <button class="ns-strdrawer__msg" data-state="{{ m.selState }}" onClick="{{ m.select }}">
+                      <span class="ns-strdrawer__msg-id" style="font-family:var(--ns-font-mono)">{{ m.id }}</span>
+                      <span class="{{ m.sBadge }}">{{ m.status }}</span>
+                      <span class="ns-strdrawer__msg-time">{{ m.time }}</span>
+                    </button>
+                  </sc-for>
+                </div>
+                <div class="ns-strdrawer__fan">
+                  <span class="ns-mini-label">fan-out delivery</span>
+                  <div class="ns-step-timeline">
+                    <sc-for list="{{ s10Fan }}" as="st" hint-placeholder-count="3">
+                      <div class="ns-step-timeline__step" data-state="{{ st.state }}">
+                        <span class="ns-step-timeline__marker" aria-hidden="true"></span>
+                        <div class="ns-step-timeline__main">
+                          <div class="ns-step-timeline__title"><span style="font-family:var(--ns-font-mono);color:var(--ns-muted-fg)">{{ st.n }}</span>{{ st.title }}
+                            <sc-if value="{{ st.attempts }}" hint-placeholder-val="{{ false }}"><span class="ns-step-timeline__attempts">attempt {{ st.attempts }}</span></sc-if>
+                          </div>
+                          <div class="ns-step-timeline__meta"><span>{{ st.meta }}</span></div>
+                        </div>
+                      </div>
+                    </sc-for>
+                  </div>
+                </div>
+                <div class="ns-strdrawer__actions">
+                  <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s10OpenRun }}">Open full run</button>
+                  <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s10OpenTrace }}">View trace ↗</button>
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </sc-if>
+
+      <!-- @S10-END -->
+      <sc-if value="{{ isMigrations }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen ns-migscreen" data-screen-label="S11 Migrations">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-toolbar">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <h1>DB migrations &amp; drift</h1>
+              </div>
+              <div class="ns-cluster ns-cluster--sm"></div>
+            </div>
+          </header>
+
+          <!-- Ref 13: compact metadata bar, no dashboard-sized numerals. -->
+          <section class="ns-mig3-meta" aria-label="Migration summary">
+            <span><b>LIVE HEAD</b><strong>{{ s11Head.headVer }}</strong></span>
+            <span><b>DECLARED</b><strong>{{ s11Head.targetVer }}</strong><small>{{ s11Head.behind }}</small></span>
+            <span><b>LEDGER</b><strong>{{ s11Head.appliedN }} / {{ s11Head.totalN }}</strong><small>applied</small></span>
+            <span><b>DRIFT</b><strong>{{ s11Gauge.driftedN }}</strong><small>of {{ s11Gauge.trackedN }} objects</small></span>
+            <span><b>DATABASE</b><strong>PostgreSQL</strong><small>my-app</small></span>
+          </section>
+
+          <div class="ns-mig2-grid">
+            <main class="ns-mig2-main">
+              <!-- Ref 11: dense operational ledger with selection rail. -->
+              <section class="ns-data-table ns-data-table--console ns-mig3-pane ns-mig2-ledger">
+                <div class="ns-card__header ns-data-table__header ns-mig2-section-head">
+                  <div>
+                    <span class="ns-card__title">Migration ledger</span>
+                    <span class="ns-mig2__caption">newest first · select a record to inspect its schema change</span>
+                  </div>
+                  <span class="ns-mig3-count">{{ s11Head.pendingN }} queued</span>
+                </div>
+                <div class="ns-mig2-ledger__cols" aria-hidden="true">
+                  <span>version</span><span>migration</span><span>applied at</span><span>duration</span><span>rows</span><span>status</span>
+                </div>
+                <div class="ns-data-table__body">
+                  <sc-for list="{{ s11Rows }}" as="r" hint-placeholder-count="4">
+                    <button class="ns-data-table__row ns-mig2-ledger__row" data-sel="{{ r.sel }}" data-status="{{ r.status }}" onClick="{{ r.select }}" data-ns-migselect>
+                      <span class="ns-mig2-version">{{ r.ver }}</span>
+                      <span class="ns-mig2-ledger__name">{{ r.name }}</span>
+                      <span>{{ r.atShort }}</span>
+                      <span>{{ r.dur }}</span>
+                      <span>{{ r.rows }}</span>
+                      <span class="ns-mig3-status" data-status="{{ r.status }}">{{ r.statusLabel }}</span>
+                    </button>
+                  </sc-for>
+                </div>
+              </section>
+            </main>
+
+            <aside class="ns-mig2-aside">
+              <!-- Ref 13: selected schema change stays in the workspace. -->
+              <section class="ns-mig3-pane ns-mig3-inspector">
+                <div class="ns-card__header ns-mig2-section-head">
+                  <div>
+                    <span class="ns-mig2__label">selected migration</span>
+                    <span class="ns-card__title">{{ s11Detail.ver }} · {{ s11Detail.title }}</span>
+                  </div>
+                  <span class="ns-mig3-status" data-status="{{ s11Detail.status }}">{{ s11Detail.statusLabel }}</span>
+                </div>
+                <dl class="ns-property-list ns-property-list--compact ns-mig3-facts">
+                  <div><dt>applied</dt><dd>{{ s11Detail.atLabel }}</dd></div>
+                  <div><dt>duration</dt><dd>{{ s11Detail.dur }}</dd></div>
+                  <div><dt>rows</dt><dd>{{ s11Detail.rows }}</dd></div>
+                </dl>
+                <p class="ns-mig2-detail__summary">{{ s11Detail.summary }}</p>
+                <div class="ns-mig3-diff-head">
+                  <span class="ns-card__title">DDL diff</span>
+                  <span>{{ s11Detail.name }}</span>
+                </div>
+                <div class="ns-diff ns-mig3-diff">
+                  <sc-for list="{{ s11Detail.ddl }}" as="d" hint-placeholder-count="6">
+                    <span class="ns-diff__line" data-op="{{ d.op }}">{{ d.text }}</span>
+                  </sc-for>
+                </div>
+                <sc-if value="{{ s11Detail.isPending }}" hint-placeholder-val="{{ true }}">
+                  <div class="ns-inline-notice ns-inline-notice--warning ns-mig2-notice">
+                    <strong>Pending schema change</strong>
+                    <code>netscript db migrate</code>
+                  </div>
+                  <div class="ns-mig2-detail__actions">
+                    <button class="ns-btn ns-btn--secondary ns-btn--sm" onClick="{{ runMigrate }}">Apply migration</button>
+                  </div>
+                </sc-if>
+              </section>
+
+              <section class="ns-data-table ns-data-table--console ns-mig3-pane ns-mig2-drift">
+                <div class="ns-card__header ns-data-table__header ns-mig2-section-head">
+                  <div>
+                    <span class="ns-card__title">Schema drift</span>
+                    <span class="ns-mig2__caption">live database → declared schema</span>
+                  </div>
+                  <span class="ns-mig3-count">{{ s11Gauge.driftedN }} records</span>
+                </div>
+                <div class="ns-mig2-drift__cols" aria-hidden="true"><span>object</span><span>difference</span></div>
+                <div class="ns-data-table__body">
+                  <sc-for list="{{ s11DriftRows }}" as="d" hint-placeholder-count="2">
+                    <div class="ns-data-table__row ns-mig2-drift__row">
+                      <div><span class="ns-mig2-kind">{{ d.kind }}</span><strong>{{ d.obj }}</strong></div>
+                      <div><span>{{ d.has }}</span><span aria-hidden="true">→</span><strong>{{ d.wants }}</strong><small>{{ d.note }}</small></div>
+                    </div>
+                  </sc-for>
+                  <sc-if value="{{ s11InSync }}" hint-placeholder-val="{{ false }}">
+                    <div class="ns-data-table__row ns-mig2-drift__empty">No drift records. Live DB matches the migration chain.</div>
+                  </sc-if>
+                </div>
+              </section>
+            </aside>
+          </div>
+        </div>
+      </sc-if>
+
+      <!-- @S11-END -->
+      <sc-if value="{{ isDlq }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen ns-dlq" data-screen-label="S12 Dead-Letter Queues">
+          <header class="ns-dlqhead">
+            <nav class="ns-conbread" aria-label="Breadcrumb"><span class="ns-conbread__crumb">Data</span><span class="ns-conbread__sep" aria-hidden="true">/</span><span class="ns-conbread__crumb ns-conbread__crumb--current">Dead-Letter Queues</span></nav>
+            <div class="ns-dlqhead__row">
+              <div class="ns-dlqhead__title">
+                <h1>Dead-letter queues</h1>
+                <p class="ns-lede">Triage failed messages parked across backends — cluster by error signature, inspect the payload + retry history, then reprocess or purge. Raw broker internals stay in Aspire.</p>
+              </div>
+              <div class="ns-seg ns-dlqhead__seg" role="tablist" aria-label="DLQ scope">
+                <button class="ns-seg__btn" role="tab" data-state="{{ s12TabQueue.state }}" onClick="{{ s12TabQueue.set }}">Queue DLQ</button>
+                <button class="ns-seg__btn" role="tab" data-state="{{ s12TabTrigger.state }}" onClick="{{ s12TabTrigger.set }}">Trigger DLQ</button>
+              </div>
+            </div>
+          </header>
+
+          <sc-if value="{{ s12AllClear }}" hint-placeholder-val="{{ false }}">
+            <div class="ns-dlqclear">
+              <span class="ns-dlqclear__glyph" aria-hidden="true">✓</span>
+              <div class="ns-dlqclear__txt"><span class="ns-dlqclear__title">All clear — nothing dead-lettered</span><span class="ns-dlqclear__sub">Every backend queue is empty. Failed messages that exhaust their retries will surface here for triage.</span></div>
+            </div>
+          </sc-if>
+
+          <sc-if value="{{ s12NotEmpty }}" hint-placeholder-val="{{ true }}">
+            <!-- Triage strip: composite metrics with micro-viz, not plain number cards (refs 19 stat-strip / 04 gauge) -->
+            <div class="ns-dlqstrip">
+              <div class="ns-dlqstat" data-lead="true">
+                <div class="ns-dlqstat__head"><span class="ns-dlqstat__glyph" data-tone="destructive" aria-hidden="true">⊗</span><span class="ns-dlqstat__label">total parked</span></div>
+                <div class="ns-dlqstat__val">{{ s12Strip.total }}</div>
+                <div class="ns-dlqsplit" aria-label="by queue">
+                  <sc-for list="{{ s12Strip.split }}" as="sp" hint-placeholder-count="2">
+                    <span class="ns-dlqsplit__seg" data-tone="{{ sp.tone }}" style="{{ sp.style }}"><span class="ns-dlqsplit__n">{{ sp.n }}</span><span class="ns-dlqsplit__l">{{ sp.label }}</span></span>
+                  </sc-for>
+                </div>
+              </div>
+              <button class="ns-dlqstat ns-dlqstat--btn" onClick="{{ s12ClearFilter }}">
+                <div class="ns-dlqstat__head"><span class="ns-dlqstat__glyph" data-tone="warning" aria-hidden="true">◫</span><span class="ns-dlqstat__label">signatures</span></div>
+                <div class="ns-dlqstat__val">{{ s12Strip.clusters }}</div>
+                <span class="ns-dlqstat__sub">distinct error clusters</span>
+              </button>
+              <div class="ns-dlqstat">
+                <div class="ns-dlqstat__head"><span class="ns-dlqstat__glyph" data-tone="warning" aria-hidden="true">◷</span><span class="ns-dlqstat__label">oldest parked</span></div>
+                <div class="ns-dlqstat__val">{{ s12Strip.oldest }}</div>
+                <span class="ns-dlqstat__sub">ago · first to expire</span>
+              </div>
+              <div class="ns-dlqstat">
+                <div class="ns-dlqstat__head"><span class="ns-dlqstat__glyph" data-tone="{{ s12Strip.exhaustTone }}" aria-hidden="true">⛔</span><span class="ns-dlqstat__label">retry-exhausted</span></div>
+                <div class="ns-dlqstat__val">{{ s12Strip.exhausted }}</div>
+                <div class="ns-dlqpips" aria-hidden="true"><sc-for list="{{ s12Strip.exhaustedPips }}" as="p" hint-placeholder-count="8"><span class="ns-dlqpip" data-on="{{ p.on }}"></span></sc-for></div>
+              </div>
+              <div class="ns-dlqstat">
+                <div class="ns-dlqstat__head"><span class="ns-dlqstat__glyph" aria-hidden="true">⚡</span><span class="ns-dlqstat__label">dead · 2h</span></div>
+                <div class="ns-dlqstat__spark ns-spark" data-tone="destructive" aria-hidden="true"><sc-for list="{{ s12Strip.totalTrend }}" as="c" hint-placeholder-count="12"><span class="ns-spark__col {{ c.cls }}" data-z="{{ c.z }}"></span></sc-for></div>
+                <span class="ns-dlqstat__sub">arrival rate rising</span>
+              </div>
+            </div>
+
+            <div class="ns-dlqgrid">
+              <div class="ns-dlqmain">
+                <!-- Error-signature clusters — the triage signature (group failures, not a flat list) -->
+                <section class="ns-panel ns-dlqclusters">
+                  <div class="ns-panel__head">
+                    <span class="ns-panel__title">Error-signature clusters</span>
+                    <span class="ns-dlqclusters__hint">bulk-triage a whole failure mode · click to filter the table</span>
+                  </div>
+                  <div class="ns-dlqclusterlist">
+                    <sc-for list="{{ s12Clusters }}" as="c" hint-placeholder-count="3">
+                      <div class="ns-dlqcluster" data-tone="{{ c.tone }}" data-sel="{{ c.selState }}">
+                        <button class="ns-dlqcluster__body" onClick="{{ c.filter }}">
+                          <span class="ns-dlqcluster__glyph" data-tone="{{ c.tone }}" aria-hidden="true">{{ c.glyph }}</span>
+                          <span class="ns-dlqcluster__id">
+                            <span class="ns-dlqcluster__sig">{{ c.sig }}</span>
+                            <span class="ns-dlqcluster__msg">{{ c.msg }}</span>
+                          </span>
+                          <span class="ns-dlqcluster__count" data-tone="{{ c.tone }}">×{{ c.count }}</span>
+                          <span class="ns-dlqcluster__srcs">
+                            <sc-for list="{{ c.srcChips }}" as="sc" hint-placeholder-count="2"><span class="ns-dlqsrcchip">{{ sc.name }}</span></sc-for>
+                            <sc-if value="{{ c.srcMore }}" hint-placeholder-val="{{ false }}"><span class="ns-dlqsrcchip ns-dlqsrcchip--more">{{ c.srcMore }}</span></sc-if>
+                          </span>
+                          <span class="ns-dlqcluster__spark ns-spark" data-tone="{{ c.tone }}" aria-hidden="true"><sc-for list="{{ c.spark }}" as="sp" hint-placeholder-count="8"><span class="ns-spark__col {{ sp.cls }}" data-z="{{ sp.z }}"></span></sc-for></span>
+                          <span class="ns-dlqcluster__age">{{ c.ageRange }}</span>
+                        </button>
+                        <span class="ns-dlqcluster__actions">
+                          <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ c.retryAll }}">Retry all</button>
+                          <button class="ns-btn ns-btn--ghost ns-btn--sm ns-dlqcluster__purge" onClick="{{ c.purge }}">Purge</button>
+                        </span>
+                      </div>
+                    </sc-for>
+                  </div>
+                </section>
+
+                <!-- Failed-message triage table (dense: retry pips, source chip, inline inspect) -->
+                <section class="ns-panel ns-dlqtablewrap">
+                  <div class="ns-panel__head">
+                    <span class="ns-panel__title">Failed messages</span>
+                    <sc-if value="{{ s12FilterActive }}" hint-placeholder-val="{{ false }}">
+                      <button class="ns-dlqfilterchip" onClick="{{ s12ClearFilter }}"><span class="ns-dlqfilterchip__x" aria-hidden="true">✕</span>{{ s12FilterLabel }}</button>
+                    </sc-if>
+                    <span class="ns-panel__flex"></span>
+                    <span class="ns-dlqtablewrap__cap">{{ s12Caption }}</span>
+                  </div>
+                  <div class="ns-dlqtable">
+                    <div class="ns-dlqtable__head" role="row">
+                      <span class="ns-dlqtable__hcell"><input type="checkbox" checked="{{ s12AllChecked }}" onChange="{{ s12ToggleAll }}" aria-label="Select all" class="ns-dlqcheck"></span>
+                      <span class="ns-dlqtable__hcell">message</span>
+                      <span class="ns-dlqtable__hcell">source</span>
+                      <span class="ns-dlqtable__hcell">signature</span>
+                      <span class="ns-dlqtable__hcell">retries</span>
+                      <span class="ns-dlqtable__hcell">age</span>
+                      <span class="ns-dlqtable__hcell"></span>
+                    </div>
+                    <sc-for list="{{ s12Rows }}" as="r" hint-placeholder-count="4">
+                      <div class="ns-dlqrow" data-sel="{{ r.checked }}" data-exhausted="{{ r.exhausted }}">
+                        <span class="ns-dlqrow__cell"><input type="checkbox" checked="{{ r.checked }}" onChange="{{ r.toggle }}" aria-label="Select message" class="ns-dlqcheck"></span>
+                        <button class="ns-dlqrow__cell ns-dlqrow__id" onClick="{{ r.open }}">{{ r.id }}</button>
+                        <span class="ns-dlqrow__cell ns-dlqrow__src"><span class="ns-dlqrow__kind" aria-hidden="true">{{ r.kindGlyph }}</span>{{ r.src }}</span>
+                        <span class="ns-dlqrow__cell"><span class="ns-dlqsig" data-tone="{{ r.sigTone }}">{{ r.sig }}</span></span>
+                        <span class="ns-dlqrow__cell ns-dlqrow__retry"><span class="ns-dlqpips" aria-hidden="true"><sc-for list="{{ r.pips }}" as="p" hint-placeholder-count="3"><span class="ns-dlqpip" data-on="{{ p.on }}" data-exh="{{ r.exhausted }}"></span></sc-for></span><span class="ns-dlqrow__retrylabel">{{ r.retryLabel }}</span></span>
+                        <span class="ns-dlqrow__cell ns-dlqrow__age">{{ r.age }}</span>
+                        <button class="ns-dlqrow__cell ns-dlqrow__inspect" onClick="{{ r.open }}">Inspect</button>
+                      </div>
+                    </sc-for>
+                    <sc-if value="{{ s12Empty }}" hint-placeholder-val="{{ false }}">
+                      <div class="ns-dlqrow ns-dlqrow--empty"><span>No messages match this filter.</span><button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s12ClearFilter }}">Clear filter</button></div>
+                    </sc-if>
+                  </div>
+                  <!-- Sticky bulk-action bar (select → reprocess / purge) + CLI hint -->
+                  <div class="ns-dlqbulk">
+                    <span class="ns-dlqbulk__count" data-has="{{ s12HasSel }}">{{ s12Count }} selected</span>
+                    <span class="ns-inline-code ns-dlqbulk__cli">{{ s12Cli }}</span>
+                    <span class="ns-panel__flex"></span>
+                    <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s12OpenRun }}">Open original run</button>
+                    <sc-if value="{{ s12HasSel }}" hint-placeholder-val="{{ false }}">
+                      <button class="ns-btn ns-btn--secondary ns-btn--sm" onClick="{{ purgeSelected }}">Purge</button>
+                      <button class="ns-btn ns-btn--destructive ns-btn--sm" onClick="{{ reprocess }}">Reprocess selected</button>
+                    </sc-if>
+                    <sc-if value="{{ s12NoSel }}" hint-placeholder-val="{{ true }}">
+                      <button class="ns-btn ns-btn--secondary ns-btn--sm" disabled="{{ true }}" style="opacity:0.45;cursor:not-allowed">Reprocess selected</button>
+                    </sc-if>
+                  </div>
+                </section>
+              </div>
+
+              <!-- Queue-health overview: per-backend depth + capacity fill meter + trend sparkbar + oldest age (ref 04 fill/gauge) -->
+              <aside class="ns-dlqside">
+                <section class="ns-panel ns-dlqfleet">
+                  <div class="ns-panel__head"><span class="ns-panel__title">Queue health</span><span class="ns-dlqfleet__hint">depth vs capacity</span></div>
+                  <div class="ns-dlqfleetlist">
+                    <sc-for list="{{ s12Queues }}" as="q" hint-placeholder-count="3">
+                      <button class="ns-dlqqueue" data-tone="{{ q.tone }}" data-empty="{{ q.empty }}" data-sel="{{ q.selState }}" onClick="{{ q.filter }}">
+                        <div class="ns-dlqqueue__top">
+                          <span class="ns-dlqqueue__dot" data-tone="{{ q.tone }}" aria-hidden="true"></span>
+                          <span class="ns-dlqqueue__name">{{ q.label }}</span>
+                          <span class="ns-dlqqueue__sev" data-tone="{{ q.tone }}">{{ q.sevLabel }}</span>
+                          <span class="ns-panel__flex"></span>
+                          <span class="ns-dlqqueue__depth">{{ q.depth }}</span>
+                        </div>
+                        <div class="ns-dlqmeter" aria-hidden="true"><span class="ns-dlqmeter__fill" data-tone="{{ q.tone }}" style="{{ q.fillStyle }}"></span></div>
+                        <div class="ns-dlqqueue__foot">
+                          <span class="ns-dlqqueue__cap">{{ q.cap }} · {{ q.pctLabel }}</span>
+                          <span class="ns-dlqqueue__spark ns-spark" data-tone="{{ q.tone }}" aria-hidden="true"><sc-for list="{{ q.spark }}" as="sp" hint-placeholder-count="12"><span class="ns-spark__col {{ sp.cls }}" data-z="{{ sp.z }}"></span></sc-for></span>
+                          <span class="ns-dlqqueue__oldest">oldest {{ q.oldest }}</span>
+                        </div>
+                      </button>
+                    </sc-for>
+                  </div>
+                </section>
+                <section class="ns-panel ns-dlqhow">
+                  <span class="ns-dlqhow__title">How triage works</span>
+                  <ol class="ns-dlqhow__steps">
+                    <li><b>Cluster</b> — failures group by error signature so you fix a mode, not a message.</li>
+                    <li><b>Inspect</b> — open a message for its payload, reason, and full retry history.</li>
+                    <li><b>Act</b> — reprocess to re-enqueue through the original source, or purge for good. Both gated.</li>
+                  </ol>
+                </section>
+              </aside>
+            </div>
+          </sc-if>
+        </div>
+      </sc-if>
+
+      <!-- @S12-END -->
+      <sc-if value="{{ isFlows }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen" data-screen-label="S13 Live Flow">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-toolbar">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <h1>Live flow</h1>
+                <p class="ns-lede">Follow one request through the whole stack — API call → contract → job → saga steps → stream fan-out — as one causal chain with the payload at every seam. Raw timing lives in Aspire.</p>
+              </div>
+            </div>
+          </header>
+          <div class="ns-flow-grid">
+            <aside style="min-width:0;display:grid;gap:var(--ns-space-3)">
+              <div class="ns-feed-toolbar">
+                <sc-if value="{{ s13HasPending }}" hint-placeholder-val="{{ false }}">
+                  <button class="ns-newpill" onClick="{{ s13Catch }}">{{ s13PendingCount }} new flows</button>
+                </sc-if>
+                <span class="ns-livedot" data-state="{{ s13LiveState }}">sse</span>
+                <span class="ns-feed-toolbar__spacer"></span>
+                <label class="ns-choice" style="align-items:center">
+                  <span style="position:relative;display:inline-flex"><input type="checkbox" class="ns-switch" checked="{{ s13Follow }}" onChange="{{ s13ToggleFollow }}"><span class="ns-switch__track" style="display:inline-flex;align-items:center;width:2.35rem;height:1.3rem;border:1px solid var(--ns-border-strong);border-radius:var(--ns-radius-full);background:var(--ns-surface);padding:2px;transition:background 140ms ease,border-color 140ms ease"><span class="ns-switch__thumb" style="width:0.95rem;height:0.95rem;border-radius:var(--ns-radius-full);background:var(--ns-card);box-shadow:var(--ns-shadow-xs);transition:transform 140ms ease"></span></span></span>
+                  <span class="ns-choice__label" style="font-size:var(--ns-text-xs)">Follow</span>
+                </label>
+              </div>
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <select style="width:100%;padding:var(--ns-space-1-5) var(--ns-space-2-5);border:1px solid var(--ns-border);border-radius:var(--ns-radius-md);background:var(--ns-surface);color:var(--ns-fg);font-size:var(--ns-text-xs)" value="{{ s13Route }}" onChange="{{ s13SetRoute }}" aria-label="Route filter">
+                  <option value="all">Route: all</option>
+                  <option value="/webhooks/stripe">/webhooks/stripe</option>
+                </select>
+                <select style="width:100%;padding:var(--ns-space-1-5) var(--ns-space-2-5);border:1px solid var(--ns-border);border-radius:var(--ns-radius-md);background:var(--ns-surface);color:var(--ns-fg);font-size:var(--ns-text-xs)" value="{{ s13Status }}" onChange="{{ s13SetStatus }}" aria-label="Status filter">
+                  <option value="all">Status: all</option>
+                  <option value="running">running</option>
+                  <option value="halted">halted</option>
+                  <option value="completed">completed</option>
+                </select>
+              </div>
+              <div style="display:grid;gap:2px" role="listbox" aria-label="Recent flows">
+                <sc-for list="{{ s13Flows }}" as="fl" hint-placeholder-count="4">
+                  <button class="ns-flowrow" role="option" data-state="{{ fl.selState }}" onClick="{{ fl.select }}">
+                    <span class="ns-flowrow__route"><span class="ns-flowrow__dot" data-tone="{{ fl.tone }}" aria-hidden="true"></span><span>{{ fl.method }} {{ fl.route }}</span></span>
+                    <span class="ns-flowrow__chain" aria-hidden="true">
+                      <sc-for list="{{ fl.dots }}" as="d" hint-placeholder-count="4"><span class="ns-flowrow__chaindot" data-tone="{{ d.tone }}" data-prim="{{ d.prim }}"></span></sc-for>
+                    </span>
+                    <span class="ns-flowrow__meta"><span>{{ fl.seamCount }}</span><span>·</span><span>{{ fl.time }}</span><span>·</span><span>{{ fl.id }}</span></span>
+                  </button>
+                </sc-for>
+                <sc-if value="{{ s13Empty }}" hint-placeholder-val="{{ false }}">
+                  <div class="ns-empty-state" style="display:grid;gap:var(--ns-space-2)">
+                    <span>Hit an endpoint to see its journey.</span>
+                    <span class="ns-inline-code" style="font-size:var(--ns-text-2xs)">curl -X POST localhost:8000/api/orders -d '{"sku":"NS-100"}'</span>
+                  </div>
+                </sc-if>
+              </div>
+            </aside>
+            <section style="min-width:0;display:grid;gap:var(--ns-space-4)">
+              <!-- Flow-summary hero: chain-progress arc + correlation split-panel + seam-outcome split (refs 04/05 arc gauge, 01 KV panel, 03 channel split) -->
+              <div class="ns-flowhero">
+                <div class="ns-flowhero__gauge">
+                  <div class="ns-gauge" data-value="{{ s13Hero.pct }}" data-tone="{{ s13Hero.gaugeTone }}" role="img" aria-label="{{ s13Hero.seamsLabel }}">
+                    <div class="ns-gauge__ring"></div>
+                    <div class="ns-gauge__center"><span class="ns-gauge__value">{{ s13Hero.cleared }}<span class="ns-gauge__of">/{{ s13Hero.total }}</span></span><span class="ns-gauge__label">seams</span></div>
+                  </div>
+                  <div class="ns-flowhero__spine" aria-hidden="true">
+                    <sc-for list="{{ s13Hero.spine }}" as="sp" hint-placeholder-count="5">
+                      <span class="ns-flowhero__spine-dot" data-tone="{{ sp.tone }}" data-prim="{{ sp.prim }}">{{ sp.icon }}</span>
+                    </sc-for>
+                  </div>
+                </div>
+                <div class="ns-flowhero__body">
+                  <div class="ns-flowhero__top">
+                    <span class="{{ s13VerdictBadge }}">{{ s13Verdict }}</span>
+                    <span class="ns-flowhero__route">{{ s13FlowName }}</span>
+                    <span style="flex:1"></span>
+                    <div class="ns-seg" role="group" aria-label="View">
+                      <button class="ns-seg__btn" data-state="active">Journey</button>
+                      <button class="ns-seg__btn" onClick="{{ s13ToInspector }}">Inspector</button>
+                    </div>
+                    <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ s13OpenTrace }}">Raw trace ↗</button>
+                  </div>
+                  <div class="ns-kv ns-kv--split">
+                    <div class="ns-kv__row"><span class="ns-kv__key">correlation id</span><span class="ns-kv__val" style="color:var(--ns-primary)">{{ s13Hero.corr }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">trace</span><span class="ns-kv__val">{{ s13Hero.trace }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">seams cleared</span><span class="ns-kv__val">{{ s13Hero.seamsLabel }}</span></div>
+                  </div>
+                  <div class="ns-splitbar" role="img" aria-label="Seam outcomes">
+                    <span style="width:{{ s13Hero.okPct }}%;background:var(--ns-success)"></span>
+                    <span style="width:{{ s13Hero.retryPct }}%;background:var(--ns-warning)"></span>
+                    <span style="width:{{ s13Hero.failPct }}%;background:var(--ns-destructive)"></span>
+                  </div>
+                  <div class="ns-splitbar__legend">
+                    <span><span class="ns-dot" style="background:var(--ns-success)"></span>cleared <b>{{ s13Hero.okN }}</b></span>
+                    <span><span class="ns-dot" style="background:var(--ns-warning)"></span>in-flight <b>{{ s13Hero.retryN }}</b></span>
+                    <span><span class="ns-dot" style="background:var(--ns-destructive)"></span>failed <b>{{ s13Hero.failN }}</b></span>
+                  </div>
+                </div>
+              </div>
+              <!-- Journey spine: causal seam chain (NOT a waterfall) -->
+              <div class="ns-panel" style="background:var(--ns-card)">
+                <div class="ns-panel__header" style="padding:var(--ns-space-3-5) var(--ns-space-5);border-bottom:1px solid var(--ns-border);flex-direction:row;align-items:center;gap:var(--ns-space-3);flex-wrap:wrap">
+                  <span class="ns-panel__title">Causal journey</span>
+                  <span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs);color:var(--ns-muted-fg)">payload at every seam · {{ s13FlowTime }}</span>
+                  <span style="flex:1"></span>
+                  <span class="ns-journey__legend"><span class="ns-journey__legend-item"><span class="ns-journey__legend-line"></span>causal edge</span><span class="ns-journey__legend-item"><span class="ns-journey__legend-line" data-halted="1"></span>severed</span></span>
+                </div>
+                <div class="ns-panel__body" style="padding:var(--ns-space-3) var(--ns-space-4)">
+                  <div class="ns-journey ns-journey--rich">
+                    <sc-for list="{{ s13Nodes }}" as="nd" hint-placeholder-count="5">
+                      <div class="ns-journey__node" data-state="{{ nd.state }}" data-halted="{{ nd.halted }}" data-selected="{{ nd.selected }}">
+                        <span class="ns-journey__glyph" aria-hidden="true">{{ nd.icon }}</span>
+                        <div class="ns-journey__main">
+                          <button class="ns-journey__hit" onClick="{{ nd.pick }}">
+                            <span class="ns-journey__head">
+                              <span class="ns-journey__prim" data-prim="{{ nd.prim }}">{{ nd.prim }}</span>
+                              <span class="ns-journey__name">{{ nd.name }}</span>
+                              <span class="{{ nd.sBadge }}">{{ nd.statusLabel }}</span>
+                            </span>
+                            <span class="ns-journey__sub"><span class="ns-journey__caption">{{ nd.caption }}</span><span class="ns-journey__seam">{{ nd.seam }}</span></span>
+                            <span class="ns-journey__val" aria-hidden="true">{{ nd.seamVal }}</span>
+                          </button>
+                          <sc-if value="{{ nd.hasSpawns }}" hint-placeholder-val="{{ false }}">
+                            <span class="ns-journey__spawn" aria-hidden="true"><span class="ns-journey__spawn-tick"></span>spawns {{ nd.spawns }}</span>
+                          </sc-if>
+                          <sc-if value="{{ nd.hasFanout }}" hint-placeholder-val="{{ false }}">
+                            <div class="ns-fanout" role="img" aria-label="Delivery fan-out">
+                              <sc-for list="{{ nd.fanout }}" as="fo" hint-placeholder-count="3">
+                                <span class="ns-fanout__leg" data-state="{{ fo.state }}"><span class="ns-fanout__dot"></span>{{ fo.name }}</span>
+                              </sc-for>
+                            </div>
+                          </sc-if>
+                          <details class="ns-step-timeline__body">
+                            <summary>payload at seam</summary>
+                            <div class="ns-step-timeline__io"><div class="ns-code"><pre><code>{{ nd.payload }}</code></pre></div></div>
+                          </details>
+                        </div>
+                        <sc-if value="{{ nd.hasEdge }}" hint-placeholder-val="{{ false }}">
+                          <span class="ns-journey__edge" aria-hidden="true">{{ nd.edge }}</span>
+                        </sc-if>
+                      </div>
+                    </sc-for>
+                  </div>
+                </div>
+              </div>
+            </section>
+            <!-- Desktop seam-detail rail (mobile → bottom sheet) -->
+            <aside class="ns-seamrail" style="min-width:0;display:grid;gap:var(--ns-space-4);align-content:start">
+              <div class="ns-panel" style="background:var(--ns-card)">
+                <div class="ns-panel__header" style="padding:var(--ns-space-3-5) var(--ns-space-4);border-bottom:1px solid var(--ns-border);flex-direction:row;align-items:center;gap:var(--ns-space-2);flex-wrap:wrap">
+                  <span class="ns-journey__prim" data-prim="{{ s13SelPrim }}">{{ s13SelPrim }}</span>
+                  <span class="ns-panel__title" style="font-family:var(--ns-font-mono);font-size:var(--ns-text-sm)">{{ s13SelName }}</span>
+                </div>
+                <div style="padding:var(--ns-space-3-5) var(--ns-space-4);display:grid;gap:var(--ns-space-3-5)">
+                  <div class="ns-kv">
+                    <div class="ns-kv__row"><span class="ns-kv__key">status</span><span class="ns-kv__val"><span class="{{ s13SelBadge }}">{{ s13Detail.status }}</span></span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">plugin owner</span><span class="ns-kv__val">{{ s13Detail.owner }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">queue / topic</span><span class="ns-kv__val">{{ s13Detail.queue }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">correlation id</span><span class="ns-kv__val" style="color:var(--ns-primary)">{{ s13Detail.corr }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">trace</span><span class="ns-kv__val">{{ s13Detail.trace }}</span></div>
+                  </div>
+                  <div style="display:grid;gap:var(--ns-space-2)">
+                    <button class="ns-btn ns-btn--secondary ns-btn--sm" onClick="{{ s13OpenEntity }}">Open {{ s13Detail.entity }}</button>
+                    <div style="display:flex;gap:var(--ns-space-2)">
+                      <button class="ns-btn ns-btn--ghost ns-btn--sm" style="flex:1" onClick="{{ s13OpenTrace }}">Raw trace ↗</button>
+                      <button class="ns-btn ns-btn--ghost ns-btn--sm" style="flex:1" onClick="{{ s13OpenRun }}">Run Inspector →</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="ns-panel" style="background:var(--ns-card)">
+                <div class="ns-panel__header" style="padding:var(--ns-space-3) var(--ns-space-4);border-bottom:1px solid var(--ns-border)"><span class="ns-panel__title">Assist</span></div>
+                <div style="padding:var(--ns-space-3) var(--ns-space-4);display:grid;gap:var(--ns-space-2-5)">
+                  <div style="display:flex;flex-wrap:wrap;gap:var(--ns-space-2)">
+                    <button class="ns-ai-chip" onClick="{{ s13AssistExplain }}">Explain this failure</button>
+                    <button class="ns-ai-chip" onClick="{{ s13AssistFix }}">Draft a fix</button>
+                    <button class="ns-ai-chip" onClick="{{ s13AssistCompare }}">Compare with last success</button>
+                  </div>
+                  <sc-if value="{{ s13HasAssist }}" hint-placeholder-val="{{ false }}">
+                    <div class="ns-assist" data-state="ready">
+                      <div class="ns-assist__head">{{ s13Assist.head }}</div>
+                      <div class="ns-assist__summary">{{ s13Assist.summary }}</div>
+                      <div class="ns-assist__grounding"><span class="ns-assist__grounding-label">grounded in</span>
+                        <sc-for list="{{ s13Assist.grounding }}" as="g" hint-placeholder-count="2"><button class="ns-ground" style="font:inherit" onClick="{{ g.go }}">{{ g.label }}</button></sc-for>
+                      </div>
+                      <div class="ns-assist__actions"><button class="{{ s13Assist.actionClass }}" onClick="{{ s13Assist.action }}">{{ s13Assist.actionLabel }}</button></div>
+                      <div class="ns-assist__meta">{{ s13Assist.meta }}</div>
+                    </div>
+                  </sc-if>
+                </div>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </sc-if>
+
+<sc-if value="{{ isAi }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen" data-screen-label="S14 AI Agents">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-toolbar">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <h1>AI agents</h1>
+                <p class="ns-lede">Agentic workflow traceability — every agent run, every tool call, joined to the same correlation spine as jobs and sagas. Raw GenAI telemetry stays in Aspire.</p>
+                <div style="display:flex;gap:var(--ns-space-4);flex-wrap:wrap">
+                  <sc-for list="{{ aiStats }}" as="st" hint-placeholder-count="4">
+                    <span style="display:inline-flex;align-items:baseline;gap:var(--ns-space-1-5)"><span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-lg);font-weight:600">{{ st.value }}</span><span class="ns-mini-label">{{ st.label }}</span></span>
+                  </sc-for>
+                </div>
+              </div>
+              <div class="ns-cluster ns-cluster--sm" style="align-items:center">
+                <div class="ns-seg" role="group" aria-label="AI view">
+                  <button class="ns-seg__btn" data-state="{{ aiSegActivity.state }}" onClick="{{ aiSegActivity.set }}">Activity</button>
+                  <button class="ns-seg__btn" data-state="{{ aiSegTools.state }}" onClick="{{ aiSegTools.set }}">Tools</button>
+                </div>
+                <button class="ns-btn ns-btn--ghost" onClick="{{ aiOpenGenAI }}">GenAI telemetry in Aspire ↗</button>
+              </div>
+            </div>
+          </header>
+
+          <sc-if value="{{ aiTabActivity }}" hint-placeholder-val="{{ true }}">
+          <div style="display:flex;gap:var(--ns-space-2);margin-bottom:var(--ns-space-5);align-items:center;padding:var(--ns-space-2);border:1px solid color-mix(in oklab, var(--ns-primary-border), var(--ns-border) 30%);border-radius:var(--ns-radius-lg);background:var(--ns-card)">
+            <span style="color:var(--ns-primary);padding-left:var(--ns-space-2)" aria-hidden="true">✦</span>
+            <input id="ns-ai-ask" style="flex:1;min-width:0;border:0;background:transparent;color:var(--ns-fg);font-family:var(--ns-font-sans);font-size:var(--ns-text-sm);outline:none;padding:var(--ns-space-1-5)" placeholder="Ask about your app — grounded in the live registry, runs, and overrides…" value="{{ aiAsk }}" onChange="{{ aiSetAsk }}" onKeyDown="{{ aiAskKey }}">
+            <button class="ns-btn ns-btn--primary ns-btn--sm" onClick="{{ aiSubmit }}">Ask</button>
+          </div>
+
+          <div class="ns-console-grid">
+            <aside style="min-width:0">
+              <div class="ns-mini-label" style="margin-bottom:var(--ns-space-2)">Agent runs · durable chat</div>
+              <div class="ns-entity-rail" role="listbox" aria-label="Agent runs">
+                <sc-for list="{{ aiRuns }}" as="r" hint-placeholder-count="3">
+                  <button class="ns-entity-rail__item" role="option" data-state="{{ r.selState }}" onClick="{{ r.select }}">
+                    <span class="ns-entity-rail__title"><span>{{ r.agent }}</span><span class="{{ r.sBadge }}">{{ r.status }}</span></span>
+                    <span class="ns-entity-rail__meta"><span>{{ r.id }}</span><span>·</span><span>{{ r.time }}</span></span>
+                  </button>
+                </sc-for>
+              </div>
+            </aside>
+
+            <section style="min-width:0">
+              <div class="ns-panel" style="background:var(--ns-card)">
+                <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border);flex-direction:row;align-items:center;gap:var(--ns-space-3);flex-wrap:wrap">
+                  <span class="ns-panel__title" style="font-family:var(--ns-font-mono);font-size:var(--ns-text-base)">{{ ai14.agent }} · {{ ai14.id }}</span>
+                  <span class="{{ ai14.statusBadge }}">{{ ai14.status }}</span>
+                  <span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-xs);color:var(--ns-muted-fg)">{{ ai14.model }}</span>
+                </div>
+                <div class="ns-panel__body" style="padding:var(--ns-space-2) var(--ns-space-5) var(--ns-space-4)">
+                  <sc-for list="{{ aiTurns }}" as="t" hint-placeholder-count="4">
+                    <div class="ns-agent-turn">
+                      <sc-if value="{{ t.isUser }}" hint-placeholder-val="{{ false }}">
+                        <div class="ns-agent-turn__head"><span class="ns-avatar ns-avatar--sm" aria-hidden="true">U</span><span class="ns-agent-turn__role">user</span></div>
+                        <div class="ns-agent-turn__text">{{ t.text }}</div>
+                      </sc-if>
+                      <sc-if value="{{ t.isTool }}" hint-placeholder-val="{{ false }}">
+                        <details class="ns-tool-call" style="border:1px solid var(--ns-border);border-radius:var(--ns-radius-md);background:var(--ns-surface);padding:var(--ns-space-2) var(--ns-space-3)">
+                          <summary style="display:flex;align-items:center;gap:var(--ns-space-2);cursor:pointer;list-style:none">
+                            <span class="ns-achain__dot" data-state="{{ t.toolState }}" aria-hidden="true" style="width:6px;height:6px;border-radius:var(--ns-radius-full)"></span>
+                            <span class="ns-tool-call__name" style="font-family:var(--ns-font-mono);font-size:var(--ns-text-xs);font-weight:500">{{ t.name }}</span>
+                            <span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs);color:var(--ns-muted-fg)">tool call · {{ t.dur }}</span>
+                          </summary>
+                          <div class="ns-tool-call__panel" style="display:grid;gap:var(--ns-space-2);margin-top:var(--ns-space-2)">
+                            <span class="ns-tool-call__io-label ns-mini-label">input</span>
+                            <div class="ns-code"><pre><code>{{ t.input }}</code></pre></div>
+                            <sc-if value="{{ t.hasOutput }}" hint-placeholder-val="{{ false }}">
+                              <span class="ns-tool-call__io-label ns-mini-label">output</span>
+                              <div class="ns-code"><pre><code>{{ t.output }}</code></pre></div>
+                            </sc-if>
+                          </div>
+                        </details>
+                      </sc-if>
+                      <sc-if value="{{ t.isAssistant }}" hint-placeholder-val="{{ false }}">
+                        <div class="ns-agent-turn__head"><span class="ns-avatar ns-avatar--sm ns-avatar--agent" aria-hidden="true">✦</span><span class="ns-agent-turn__role">assistant</span></div>
+                        <div class="ns-agent-turn__text">{{ t.text }}</div>
+                      </sc-if>
+                    </div>
+                  </sc-for>
+                  <sc-if value="{{ ai14.thinking }}" hint-placeholder-val="{{ false }}">
+                    <div class="ns-agent-turn">
+                      <div class="ns-agent-turn__head"><span class="ns-avatar ns-avatar--sm ns-avatar--agent" aria-hidden="true">✦</span><span class="ns-agent-turn__role">assistant</span>
+                        <span class="ns-typing" aria-label="Assistant is responding"><span>·</span><span>·</span><span>·</span></span>
+                      </div>
+                    </div>
+                  </sc-if>
+                </div>
+              </div>
+            </section>
+
+            <aside style="min-width:0">
+              <div class="ns-panel" style="background:var(--ns-card)">
+                <div class="ns-panel__header" style="padding:var(--ns-space-3) var(--ns-space-4);border-bottom:1px solid var(--ns-border)"><span class="ns-panel__title">Run detail</span></div>
+                <div class="ns-panel__body" style="padding:var(--ns-space-4);display:grid;gap:var(--ns-space-4)">
+                  <div class="ns-kv">
+                    <div class="ns-kv__row"><span class="ns-kv__key">model</span><span class="ns-kv__val">{{ ai14.model }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">tokens</span><span class="ns-kv__val">{{ ai14.tokens }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">latency</span><span class="ns-kv__val">{{ ai14.latency }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">tool calls</span><span class="ns-kv__val">{{ ai14.tools }}</span></div>
+                    <div class="ns-kv__row"><span class="ns-kv__key">correlation id</span><span class="ns-kv__val" style="color:var(--ns-primary)">{{ ai14.corr }}</span></div>
+                  </div>
+                  <sc-if value="{{ ai14.corrIsSpine }}" hint-placeholder-val="{{ false }}">
+                    <div class="ns-inline-notice ns-inline-notice--info" style="display:flex;gap:var(--ns-space-2);align-items:center;padding:var(--ns-space-2-5) var(--ns-space-3);border-radius:var(--ns-radius-md)">
+                      <span style="font-size:var(--ns-text-xs)">This agent investigated the same run the whole dashboard is tracking — its tool calls hit the live spine.</span>
+                    </div>
+                  </sc-if>
+                  <div style="display:grid;gap:var(--ns-space-2)">
+                    <button class="ns-btn ns-btn--secondary ns-btn--sm" onClick="{{ aiOpenRun }}">Open investigated run</button>
+                    <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ aiOpenSaga }}">Open saga instance</button>
+                    <button class="ns-btn ns-btn--ghost ns-btn--sm" onClick="{{ aiOpenGenAI }}">Raw GenAI telemetry ↗</button>
+                  </div>
+                  <span style="font-size:var(--ns-text-2xs);color:var(--ns-muted-fg)">Tool registry: 12 tools bound at runtime — contracts (<span class="ns-inline-code">workers</span>, <span class="ns-inline-code">sagas</span>, <span class="ns-inline-code">runtimeConfig</span>, <span class="ns-inline-code">db</span>) exposed as agent tools.</span>
+                </div>
+              </div>
+            </aside>
+          </div>
+          </sc-if>
+          <sc-if value="{{ aiTabTools }}" hint-placeholder-val="{{ false }}">
+            <div class="ns-panel" style="background:var(--ns-card);margin-bottom:var(--ns-space-4)">
+              <div class="ns-panel__header" style="padding:var(--ns-space-4) var(--ns-space-5);border-bottom:1px solid var(--ns-border)">
+                <span class="ns-panel__title">Tool registry</span>
+                <span class="ns-panel__description">12 contract procedures exposed as agent tools · the policy column is the transparency surface — read-only vs mutation-via-confirm</span>
+              </div>
+            </div>
+            <section class="ns-responsive-table">
+              <div class="ns-responsive-table__scroller">
+                <table class="ns-responsive-table__table" style="min-width:40rem">
+                  <thead class="ns-responsive-table__head"><tr class="ns-responsive-table__row">
+                    <th class="ns-responsive-table__header">Tool</th><th class="ns-responsive-table__header">Plugin</th><th class="ns-responsive-table__header">Calls (24h)</th><th class="ns-responsive-table__header">Failure</th><th class="ns-responsive-table__header">Policy</th>
+                  </tr></thead>
+                  <tbody>
+                    <sc-for list="{{ aiToolRows }}" as="t" hint-placeholder-count="6">
+                      <tr class="ns-responsive-table__row">
+                        <td class="ns-responsive-table__cell"><span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-xs)">{{ t.tool }}</span></td>
+                        <td class="ns-responsive-table__cell"><span class="ns-chip">{{ t.plugin }}</span></td>
+                        <td class="ns-responsive-table__cell"><span style="font-family:var(--ns-font-mono);font-size:var(--ns-text-xs)">{{ t.calls }}</span></td>
+                        <td class="ns-responsive-table__cell"><span class="{{ t.failBadge }}">{{ t.fail }}</span></td>
+                        <td class="ns-responsive-table__cell"><span class="{{ t.policyBadge }}">{{ t.policy }}</span></td>
+                      </tr>
+                    </sc-for>
+                  </tbody>
+                </table>
+              </div>
+            </section>
+          </sc-if>
+        </div>
+      </sc-if>
+<sc-if value="{{ isAuthc }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen ns-auth" data-screen-label="S15 Auth Sessions">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-toolbar">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <h1>Auth sessions</h1>
+                <p class="ns-lede">The session projection from <span class="ns-inline-code">plugin-auth-core</span>’s durable stream — live <span class="ns-inline-code">auth.*</span> events, no provider console needed for local dev.</p>
+              </div>
+              <span class="ns-panel__flex" style="flex:1"></span>
+              <div class="ns-auth__now" aria-label="Server clock"><span class="ns-auth__now-dot" aria-hidden="true"></span>now <b>{{ s15Head.now }}</b></div>
+              <button class="ns-btn ns-btn--destructive ns-btn--sm ns-auth__revokeall" onClick="{{ s15RevokeAll }}" title="Revoke every live session"><span class="ns-auth__revokeall-glyph" aria-hidden="true">⛒</span>Revoke all <span class="ns-auth__revokeall-n">{{ s15RevokeAllN }}</span></button>
+            </div>
+          </header>
+
+          <!-- Security header composite (micro-viz, no plain number cards) -->
+          <section class="ns-authhead" aria-label="Session security summary">
+            <div class="ns-authhead__cell ns-authhead__cell--hero">
+              <span class="ns-authhead__glyph" aria-hidden="true">◐</span>
+              <div class="ns-authhead__hero-main">
+                <span class="ns-authhead__value">{{ s15Head.activeN }}<span class="ns-authhead__value-sub">/ {{ s15Head.liveN }} live</span></span>
+                <span class="ns-authhead__label">active sessions</span>
+              </div>
+              <div class="ns-authhead__chan" aria-label="Status distribution">
+                <sc-for list="{{ s15Head.dist }}" as="d" hint-placeholder-count="4">
+                  <button class="ns-authchan__seg {{ d.wClass }}" data-tone="{{ d.tone }}" data-active="{{ d.active }}" onClick="{{ d.go }}" title="{{ d.label }} · {{ d.n }}" aria-label="{{ d.label }} {{ d.n }}"></button>
+                </sc-for>
+              </div>
+              <div class="ns-authhead__chan-legend">
+                <sc-for list="{{ s15Head.dist }}" as="d" hint-placeholder-count="4">
+                  <span class="ns-authhead__legend-item"><span class="ns-authhead__legend-dot" data-tone="{{ d.tone }}" aria-hidden="true"></span>{{ d.label }} <b>{{ d.n }}</b></span>
+                </sc-for>
+              </div>
+            </div>
+            <div class="ns-authhead__cell">
+              <div class="ns-authhead__ratio-head"><span class="ns-authhead__ratio-glyph" aria-hidden="true">⚑</span><span class="ns-authhead__ratio-label">elevated scope</span><span class="ns-authhead__ratio-val">{{ s15Head.elevatedN }}<span class="ns-authhead__ratio-pct">· {{ s15Head.elevPctLbl }}</span></span></div>
+              <div class="ns-authratio" data-tone="destructive"><span class="ns-authratio__fill {{ s15Head.elevWClass }}" data-tone="destructive"></span></div>
+              <span class="ns-authhead__ratio-sub">admin / deploy / write grants across live sessions</span>
+            </div>
+            <div class="ns-authhead__cell">
+              <div class="ns-authhead__ratio-head"><span class="ns-authhead__ratio-glyph" aria-hidden="true">⛨</span><span class="ns-authhead__ratio-label">MFA coverage</span><span class="ns-authhead__ratio-val">{{ s15Head.mfaN }}<span class="ns-authhead__ratio-pct">· {{ s15Head.mfaPctLbl }}</span></span></div>
+              <div class="ns-authratio" data-tone="success"><span class="ns-authratio__fill {{ s15Head.mfaWClass }}" data-tone="success"></span></div>
+              <span class="ns-authhead__ratio-sub">totp / passkey verified · live sessions</span>
+            </div>
+            <div class="ns-authhead__cell ns-authhead__cell--hz">
+              <div class="ns-authhead__hz-head"><span class="ns-authhead__ratio-glyph" aria-hidden="true">⧗</span><span class="ns-authhead__ratio-label">expiry horizon</span><span class="ns-authhead__hz-soon">soonest · {{ s15Head.soonUser }} <b>{{ s15Head.soonRem }}</b></span></div>
+              <div class="ns-authhz" aria-label="Soonest-to-expire sessions">
+                <sc-for list="{{ s15Head.horizon }}" as="h" hint-placeholder-count="4">
+                  <button class="ns-authhz__row" data-sel="{{ h.sel }}" onClick="{{ h.go }}" title="{{ h.user }} · expires {{ h.remLbl }}">
+                    <span class="ns-authhz__u">{{ h.user }}</span>
+                    <span class="ns-authhz__track" aria-hidden="true"><span class="ns-authhz__fill {{ h.wClass }}" data-tone="{{ h.tone }}"></span></span>
+                    <span class="ns-authhz__t" data-tone="{{ h.tone }}">{{ h.remLbl }}</span>
+                  </button>
+                </sc-for>
+              </div>
+            </div>
+          </section>
+
+          <!-- Roster toolbar -->
+          <div class="ns-authbar">
+            <label class="ns-authbar__search">
+              <span class="ns-authbar__search-glyph" aria-hidden="true">⌕</span>
+              <input class="ns-authbar__input" type="text" placeholder="Search principal · provider · location…" value="{{ s15Q }}" onInput="{{ s15SetQ }}" aria-label="Search sessions" />
+            </label>
+            <div class="ns-authbar__chips" role="group" aria-label="Filter by status">
+              <sc-for list="{{ s15FilterChips }}" as="c" hint-placeholder-count="5">
+                <button class="ns-authbar__chip" data-state="{{ c.state }}" onClick="{{ c.set }}">{{ c.label }}</button>
+              </sc-for>
+            </div>
+            <span class="ns-panel__flex" style="flex:1"></span>
+            <div class="ns-seg ns-authbar__seg" role="tablist" aria-label="Sort sessions">
+              <sc-for list="{{ s15SortChips }}" as="c" hint-placeholder-count="2">
+                <button class="ns-seg__btn" role="tab" data-state="{{ c.state }}" onClick="{{ c.set }}">{{ c.label }}</button>
+              </sc-for>
+            </div>
+          </div>
+
+          <!-- Two-pane: identity-forward roster + session detail -->
+          <div class="ns-authgrid">
+            <section class="ns-authroster" aria-label="Active session roster">
+              <sc-if value="{{ s15HasResults }}" hint-placeholder-val="{{ true }}">
+                <sc-for list="{{ s15Sessions }}" as="a" hint-placeholder-count="5">
+                  <article class="ns-authcard" data-state="{{ a.effState }}" data-selected="{{ a.selState }}" data-om-id="auth-card">
+                    <button class="ns-authcard__body" data-ns-auth-card onClick="{{ a.select }}" aria-label="Inspect session {{ a.id }}">
+                      <span class="ns-authcard__avatar" data-kind="{{ a.kind }}" aria-hidden="true">{{ a.initials }}<span class="ns-authcard__dev" data-dev="{{ a.dev }}">{{ a.devGlyph }}</span></span>
+                      <div class="ns-authcard__ident">
+                        <div class="ns-authcard__id-row">
+                          <span class="ns-authcard__name">{{ a.name }}</span>
+                          <sc-if value="{{ a.elevated }}" hint-placeholder-val="{{ false }}"><span class="ns-authcard__elev" title="Elevated scope">⚑</span></sc-if>
+                        </div>
+                        <span class="ns-authcard__sub"><span class="ns-authcard__uid">{{ a.user }}</span> · {{ a.email }}</span>
+                        <div class="ns-authcard__meta">
+                          <span class="ns-authprov" data-tone="{{ a.provTone }}">{{ a.provLbl }}</span>
+                          <span class="ns-authcard__loc"><span class="ns-authcard__geo" data-geo="{{ a.geo }}" aria-hidden="true">◉</span>{{ a.loc }}</span>
+                          <span class="ns-authcard__mfa" data-on="{{ a.mfaOn }}">⛨ {{ a.mfaLbl }}</span>
+                        </div>
+                      </div>
+                      <div class="ns-authcard__right">
+                        <span class="{{ a.sBadge }}">{{ a.effState }}</span>
+                        <div class="ns-ttlbar" data-tone="{{ a.ttlTone }}" aria-label="Time-to-live {{ a.ttlPctLbl }}">
+                          <span class="ns-ttlbar__fill {{ a.ttlWClass }}" data-tone="{{ a.ttlTone }}"></span>
+                        </div>
+                        <span class="ns-authcard__ttl-lbl" data-tone="{{ a.ttlTone }}">⧗ {{ a.remLbl }} <span class="ns-authcard__ttl-pct">{{ a.ttlPctLbl }}</span></span>
+                      </div>
+                    </button>
+                    <div class="ns-authcard__foot">
+                      <div class="ns-authcard__scopes">
+                        <sc-for list="{{ a.scopeChips }}" as="sc" hint-placeholder-count="3"><span class="ns-scopechip" data-elev="{{ sc.elevated }}">{{ sc.label }}</span></sc-for>
+                      </div>
+                      <button class="ns-btn ns-btn--ghost ns-btn--sm ns-authcard__revoke" data-ns-auth-revoke onClick="{{ a.revoke }}">Revoke</button>
+                    </div>
+                  </article>
+                </sc-for>
+              </sc-if>
+              <sc-if value="{{ s15NoResults }}" hint-placeholder-val="{{ false }}">
+                <div class="ns-authroster__empty">
+                  <span class="ns-authroster__empty-glyph" aria-hidden="true">◐</span>
+                  <span class="ns-authroster__empty-title">No sessions match</span>
+                  <span class="ns-authroster__empty-sub">Adjust the status filter or clear the search.</span>
+                  <button class="ns-btn ns-btn--secondary ns-btn--sm" onClick="{{ s15ClearFilters }}">Clear filters</button>
+                </div>
+              </sc-if>
+            </section>
+
+            <!-- Session detail -->
+            <aside class="ns-authdetail" aria-label="Session detail">
+              <div class="ns-authdetail__head">
+                <span class="ns-authdetail__avatar" data-kind="{{ s15Detail.kind }}" aria-hidden="true">{{ s15Detail.initials }}<span class="ns-authcard__dev" data-dev="{{ s15Detail.dev }}">{{ s15Detail.devGlyph }}</span></span>
+                <div class="ns-authdetail__head-main">
+                  <div class="ns-authdetail__name-row"><span class="ns-authdetail__name">{{ s15Detail.name }}</span><sc-if value="{{ s15Detail.elevated }}" hint-placeholder-val="{{ false }}"><span class="ns-authcard__elev" title="Elevated scope">⚑</span></sc-if></div>
+                  <span class="ns-authdetail__uid">{{ s15Detail.id }} · {{ s15Detail.email }}</span>
+                </div>
+                <span class="{{ s15Detail.sBadge }}">{{ s15Detail.effState }}</span>
+              </div>
+
+              <!-- TTL lifespan visualization -->
+              <div class="ns-authdetail__ttl">
+                <div class="ns-authttl" data-tone="{{ s15Detail.ttlTone }}">
+                  <div class="ns-authttl__labels"><span>issued {{ s15Detail.issued }}</span><span class="ns-authttl__lifespan">{{ s15Detail.lifespan }} TTL</span><span>{{ s15Detail.remLbl }}</span></div>
+                  <div class="ns-authttl__track" aria-label="Elapsed vs remaining">
+                    <span class="ns-authttl__elapsed {{ s15Detail.elapsedWClass }}"></span>
+                    <span class="ns-authttl__marker {{ s15Detail.ttlMarkerClass }}" aria-hidden="true"></span>
+                    <span class="ns-authttl__remain {{ s15Detail.ttlWClass }}" data-tone="{{ s15Detail.ttlTone }}"></span>
+                  </div>
+                  <div class="ns-authttl__foot"><span class="ns-authttl__elapsed-lbl">{{ s15Detail.issuedAgo }} elapsed</span><span class="ns-authttl__remain-lbl" data-tone="{{ s15Detail.ttlTone }}">⧗ {{ s15Detail.ttlPctLbl }} remaining</span></div>
+                </div>
+              </div>
+
+              <!-- Identity / device / geo KV -->
+              <div class="ns-authkv">
+                <sc-for list="{{ s15Detail.kv }}" as="kv" hint-placeholder-count="8">
+                  <div class="ns-authkv__row"><span class="ns-authkv__k">{{ kv.k }}</span><span class="ns-authkv__v">{{ kv.v }}</span></div>
+                </sc-for>
+              </div>
+
+              <!-- Scopes -->
+              <div class="ns-authdetail__block">
+                <span class="ns-drawer__section-label">granted scopes <span class="ns-authdetail__count">{{ s15Detail.scopeN }}</span></span>
+                <div class="ns-authcard__scopes">
+                  <sc-for list="{{ s15Detail.scopeChips }}" as="sc" hint-placeholder-count="4"><span class="ns-scopechip ns-scopechip--lg" data-elev="{{ sc.elevated }}">{{ sc.label }}</span></sc-for>
+                </div>
+              </div>
+
+              <!-- Session lifecycle timeline -->
+              <div class="ns-authdetail__block">
+                <span class="ns-drawer__section-label">session lifecycle</span>
+                <div class="ns-authtl">
+                  <sc-for list="{{ s15Detail.timeline }}" as="t" hint-placeholder-count="2">
+                    <div class="ns-authtl__step" data-tone="{{ t.tone }}">
+                      <span class="ns-authtl__marker" aria-hidden="true"></span>
+                      <div class="ns-authtl__body"><span class="ns-authtl__text">{{ t.text }}</span><span class="ns-authtl__at">{{ t.at }}</span></div>
+                    </div>
+                  </sc-for>
+                </div>
+              </div>
+
+              <sc-if value="{{ s15Detail.canRevoke }}" hint-placeholder-val="{{ true }}">
+                <div class="ns-authdetail__actions">
+                  <button class="ns-btn ns-btn--destructive" onClick="{{ s15Detail.revoke }}">Revoke session</button>
+                  <button class="ns-btn ns-btn--ghost" onClick="{{ s15Detail.select }}">Open in Aspire ↗</button>
+                </div>
+              </sc-if>
+              <sc-if value="{{ s15Detail.cannotRevoke }}" hint-placeholder-val="{{ false }}">
+                <div class="ns-authdetail__revoked-note"><span aria-hidden="true">⛒</span> Session revoked — {{ s15Detail.last }}</div>
+              </sc-if>
+            </aside>
+          </div>
+
+          <!-- Auth event stream (folds auth.*) -->
+          <section class="ns-authstream">
+            <div class="ns-authstream__head">
+              <span class="ns-card__title">Auth event stream</span>
+              <span class="ns-card__description">signin · token refresh · revocation · oidc — folds the <span class="ns-inline-code">auth.*</span> stream</span>
+            </div>
+            <div class="ns-activity-feed ns-authstream__feed">
+              <sc-for list="{{ authFeed }}" as="f" hint-placeholder-count="4">
+                <div class="ns-activity-feed__item" data-tone="{{ f.tone }}">
+                  <span class="ns-activity-feed__marker" aria-hidden="true"></span>
+                  <div class="ns-activity-feed__body"><span class="ns-activity-feed__text">{{ f.text }}</span><span class="ns-activity-feed__time">{{ f.time }}</span></div>
+                </div>
+              </sc-for>
+            </div>
+          </section>
+        </div>
+      </sc-if>
+
+      <!-- @S13-END -->
+
+      <sc-if value="{{ isExtensions }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-screen ns-extscreen" data-screen-label="S16 Extensions">
+          <header class="ns-page-header ns-page-header--console">
+            <div class="ns-toolbar">
+              <div style="display:grid;gap:var(--ns-space-2)">
+                <h1>Extensions</h1>
+                <p class="ns-lede">Installed add-ons and the host surfaces they extend.</p>
+              </div>
+              <div class="ns-seg ns-extseg" role="group" aria-label="Extensions view">
+                <button class="ns-seg__btn ns-extseg__btn" data-state="{{ extSegPanels.state }}" onClick="{{ extSegPanels.set }}">Providers</button>
+                <button class="ns-seg__btn ns-extseg__btn" data-state="{{ extSegActions.state }}" onClick="{{ extSegActions.set }}">Surfaces</button>
+                <button class="ns-seg__btn ns-extseg__btn" data-state="{{ extSegAvail.state }}" onClick="{{ extSegAvail.set }}">Available</button>
+              </div>
+            </div>
+          </header>
+
+          <!-- ============ HEADER COMPOSITE: inventory + surface distribution + enabled facts + compatibility ============ -->
+          <section class="ns-card ns-exthead" aria-label="Extensions overview">
+            <div class="ns-exthead__cell ns-exthead__cell--hero">
+              <div class="ns-exthead__hero-main">
+                <span class="ns-exthead__hero-num">{{ extHead.installed }}<span class="ns-exthead__hero-unit">extensions</span></span>
+                <span class="ns-exthead__hero-sub">{{ extHead.enabledLbl }} · {{ extHead.contribLbl }}</span>
+              </div>
+            </div>
+            <div class="ns-exthead__cell">
+              <span class="ns-exthead__label">contributions by surface</span>
+              <div class="ns-extchan" aria-label="Contribution surface distribution">
+                <sc-for list="{{ extHead.surfSegs }}" as="sg" hint-placeholder-count="3">
+                  <button class="ns-extchan__seg {{ sg.wClass }}" data-kind="{{ sg.kind }}" data-active="{{ sg.active }}" onClick="{{ sg.filter }}" title="{{ sg.title }}"><span class="ns-extchan__seg-n">{{ sg.n }}</span></button>
+                </sc-for>
+              </div>
+              <div class="ns-extchan__legend">
+                <sc-for list="{{ extHead.surfSegs }}" as="lg" hint-placeholder-count="3">
+                  <span class="ns-extchan__leg" data-kind="{{ lg.kind }}"><span class="ns-extchan__leg-dot" aria-hidden="true"></span>{{ lg.label }} <b>{{ lg.n }}</b></span>
+                </sc-for>
+              </div>
+            </div>
+            <div class="ns-exthead__cell">
+              <span class="ns-exthead__label">enabled coverage</span>
+              <div class="ns-extcoverage">
+                <span class="ns-extcoverage__ratio">{{ extHead.enabled }} / {{ extHead.installed }}</span>
+                <span class="ns-extcoverage__label">enabled</span>
+              </div>
+              <div class="ns-extcoverage__meta">
+                <span class="ns-extcoverage__disabled">{{ extHead.disabled }} disabled</span>
+                <div class="ns-exthead__tiers">
+                  <sc-for list="{{ extHead.tierChips }}" as="tc" hint-placeholder-count="2"><span class="ns-exttier" data-tier="{{ tc.tier }}">{{ tc.label }} <b>{{ tc.n }}</b></span></sc-for>
+                </div>
+              </div>
+            </div>
+            <div class="ns-exthead__cell ns-exthead__cell--alert">
+              <span class="ns-exthead__label">compatibility</span>
+              <div class="ns-extcompat" data-state="{{ extHead.compatState }}">
+                <div class="ns-extcompat__body">
+                  <span class="ns-extcompat__head">{{ extHead.compatHead }}</span>
+                  <span class="ns-extcompat__note">{{ extHead.compatNote }}</span>
+                </div>
+              </div>
+              <span class="ns-extcompat__host">host contract <b>{{ extHead.hostContract }}</b></span>
+            </div>
+          </section>
+
+          <!-- ============ PROVIDERS: roster (contribution manifest per extension) + detail ============ -->
+          <sc-if value="{{ extTabPanels }}" hint-placeholder-val="{{ true }}">
+            <div class="ns-extfilters">
+              <span class="ns-extfilters__label">show</span>
+              <div class="ns-extfilters__tabs">
+                <sc-for list="{{ extSurfChips }}" as="fc" hint-placeholder-count="4"><button class="ns-extfilters__tab" data-kind="{{ fc.kind }}" data-state="{{ fc.state }}" onClick="{{ fc.set }}">{{ fc.label }}<span class="ns-extfilters__tab-n">{{ fc.n }}</span></button></sc-for>
+              </div>
+              <span style="flex:1"></span>
+              <span class="ns-extfilters__count">{{ extProvCount }} providers</span>
+            </div>
+            <div class="ns-extgrid">
+              <div class="ns-card ns-data-table ns-extroster" role="list" aria-label="Installed extensions">
+                <div class="ns-extroster__columns" aria-hidden="true">
+                  <span>provider</span><span>contributions</span><span>trust</span><span>source</span><span>status</span>
+                </div>
+                <sc-for list="{{ extProviders }}" as="e" hint-placeholder-count="6">
+                  <button class="ns-data-table__row ns-extprov" role="listitem" data-ext-id="{{ e.id }}" data-state="{{ e.selState }}" data-disabled="{{ e.disabled }}" onClick="{{ e.select }}">
+                    <div class="ns-extprov__identity">
+                      <div class="ns-extprov__name-row">
+                        <span class="ns-extprov__name">{{ e.name }}</span>
+                        <span class="ns-extprov__ver">{{ e.version }}</span>
+                      </div>
+                    </div>
+                    <div class="ns-extprov__pips"><sc-for list="{{ e.pips }}" as="pp" hint-placeholder-count="2"><span class="ns-extprov__pip" data-kind="{{ pp.kind }}">{{ pp.label }}</span></sc-for></div>
+                    <span class="ns-extprov__trust">{{ e.tier }}</span>
+                    <span class="ns-extprov__src">{{ e.source }}</span>
+                    <span class="ns-extprov__status" data-en="{{ e.enabled }}"><span class="ns-extprov__status-dot" aria-hidden="true"></span>{{ e.statusLbl }}</span>
+                  </button>
+                </sc-for>
+              </div>
+
+              <aside class="ns-card ns-extmanifest" aria-label="Extension manifest">
+                <div class="ns-extmanifest__head">
+                  <div class="ns-extmanifest__id">
+                    <div class="ns-extmanifest__name-row"><span class="ns-extmanifest__name">{{ extSel.name }}</span><span class="ns-extmanifest__ver">{{ extSel.version }}</span><span class="ns-extmanifest__tier">{{ extSel.tier }}</span></div>
+                    <span class="ns-extmanifest__sub">{{ extSel.source }} · contributes to {{ extSel.surfLbl }}</span>
+                  </div>
+                  <span class="ns-extmanifest__status" data-en="{{ extSel.enabled }}"><span class="ns-extprov__status-dot" aria-hidden="true"></span>{{ extSel.statusLbl }}</span>
+                </div>
+
+                <div class="ns-extmanifest__kv">
+                  <sc-for list="{{ extSel.kv }}" as="kv" hint-placeholder-count="4"><div class="ns-extmanifest__kv-row"><span class="ns-extmanifest__kv-k">{{ kv.k }}</span><span class="ns-extmanifest__kv-v" data-tone="{{ kv.tone }}">{{ kv.v }}</span></div></sc-for>
+                </div>
+
+                <div class="ns-extmanifest__section-label">contributes</div>
+                <div class="ns-extmanifest__groups">
+                  <sc-for list="{{ extSel.groups }}" as="g" hint-placeholder-count="2">
+                    <div class="ns-extgroup" data-kind="{{ g.kind }}">
+                      <div class="ns-extgroup__head"><span class="ns-extgroup__title">{{ g.title }}</span><span class="ns-extgroup__n">{{ g.n }}</span></div>
+                      <div class="ns-extgroup__items">
+                        <sc-for list="{{ g.items }}" as="it" hint-placeholder-count="2">
+                          <div class="ns-extcontrib">
+                            <div class="ns-extcontrib__main">
+                              <span class="ns-extcontrib__title">{{ it.title }}</span>
+                              <span class="ns-extcontrib__path">{{ it.meta }}</span>
+                            </div>
+                            <span class="ns-extcontrib__perm">{{ it.perm }}</span>
+                          </div>
+                        </sc-for>
+                      </div>
+                    </div>
+                  </sc-for>
+                </div>
+
+                <div class="ns-extmanifest__section-label">plugs into</div>
+                <div class="ns-extmounts">
+                  <sc-for list="{{ extSel.mounts }}" as="m" hint-placeholder-count="2"><span class="ns-extmount" data-kind="{{ m.kind }}">{{ m.label }}</span></sc-for>
+                </div>
+
+                <div class="ns-extmanifest__actions">
+                  <button class="{{ extSel.toggleClass }}" onClick="{{ extSel.toggle }}">{{ extSel.actionLabel }}</button>
+                  <button class="ns-btn ns-btn--ghost" onClick="{{ extSel.viewPlugin }}">View plugin</button>
+                </div>
+              </aside>
+            </div>
+          </sc-if>
+
+          <!-- ============ SURFACES: contribution records grouped by host surface ============ -->
+          <sc-if value="{{ extTabActions }}" hint-placeholder-val="{{ false }}">
+            <div class="ns-extlanes" aria-label="Contribution surfaces">
+              <sc-for list="{{ extLanes }}" as="ln" hint-placeholder-count="3">
+                <section class="ns-card ns-extlane" data-kind="{{ ln.kind }}">
+                  <header class="ns-extlane__head">
+                    <div class="ns-extlane__title-row"><span class="ns-extlane__title">{{ ln.title }}</span><span class="ns-extlane__n">{{ ln.n }}</span></div>
+                    <div class="ns-extlane__context"><span class="ns-extlane__mounts">{{ ln.mountSummary }}</span><span class="ns-extlane__summary">{{ ln.foot }}</span></div>
+                  </header>
+                  <div class="ns-data-table ns-extlane__items">
+                    <sc-for list="{{ ln.items }}" as="it" hint-placeholder-count="3">
+                      <div class="ns-data-table__row ns-extsurface-row">
+                        <div class="ns-extsurface-row__identity">
+                          <span class="ns-extsurface-row__title">{{ it.title }}</span>
+                          <span class="ns-extsurface-row__path">{{ it.meta }}</span>
+                        </div>
+                        <span class="ns-extsurface-row__prov" data-tier="{{ it.tier }}">{{ it.plugin }}</span>
+                        <span class="ns-extsurface-row__perm">{{ it.perm }}</span>
+                      </div>
+                    </sc-for>
+                  </div>
+                </section>
+              </sc-for>
+            </div>
+          </sc-if>
+
+          <!-- ============ AVAILABLE: install registry with categorical contract facts ============ -->
+          <sc-if value="{{ extTabAvail }}" hint-placeholder-val="{{ false }}">
+            <div class="ns-card ns-data-table ns-extavail" role="list" aria-label="Available extensions">
+              <div class="ns-extavail__columns" aria-hidden="true">
+                <span>extension</span><span>contract</span><span>contributes</span><span>status / action</span>
+              </div>
+              <sc-for list="{{ extAvailable }}" as="e" hint-placeholder-count="2">
+                <div class="ns-data-table__row ns-extavailrow" role="listitem" data-quar="{{ e.quarantine }}">
+                  <div class="ns-extavailrow__id">
+                    <div class="ns-extavailrow__name-row"><span class="ns-extavailrow__name">{{ e.title }}</span><span class="ns-extavailrow__publisher">{{ e.publisher }}</span></div>
+                    <span class="ns-extavailrow__desc">{{ e.desc }}</span>
+                  </div>
+                  <div class="ns-extcontract" aria-label="Contract compatibility">
+                    <div class="ns-extcontract__fact"><span class="ns-extcontract__label">built for</span><span class="ns-extcontract__value" data-ok="{{ e.builtOk }}">{{ e.builtFor }}</span></div>
+                    <div class="ns-extcontract__fact"><span class="ns-extcontract__label">host</span><span class="ns-extcontract__value" data-ok="true">contract v2</span></div>
+                  </div>
+                  <div class="ns-extavailrow__adds">
+                    <sc-for list="{{ e.adds }}" as="ad" hint-placeholder-count="3"><span class="ns-extprov__pip" data-kind="{{ ad.kind }}">{{ ad.label }}</span></sc-for>
+                  </div>
+                  <div class="ns-extavailrow__action">
+                    <sc-if value="{{ e.quarantine }}" hint-placeholder-val="{{ false }}">
+                      <div class="ns-inline-notice ns-inline-notice--warning ns-extavailrow__hold">
+                        <span>Held: built for contract v1; host contract v2.</span>
+                      </div>
+                    </sc-if>
+                    <div class="ns-extavailrow__action-line">
+                      <button class="{{ e.actClass }}" onClick="{{ e.act }}">{{ e.actLabel }}</button>
+                    </div>
+                  </div>
+                </div>
+              </sc-for>
+            </div>
+          </sc-if>
+        </div>
+      </sc-if>
+
+    </main>
+  </div>
+</div>
+
+<dialog class="ns-cmdk__backdrop" id="ns-cmdk-dialog" onClick="{{ cmdkBackdropClick }}">
+  <div class="ns-cmdk" onClick="{{ stopProp }}">
+    <div class="ns-cmdk__input-row">
+      <span class="ns-cmdk__search-icon" aria-hidden="true">⌕</span>
+      <input class="ns-cmdk__input" placeholder="Jump to a screen or run a command…" value="{{ cmdkQ }}" onChange="{{ cmdkType }}" id="ns-cmdk-input">
+      <span class="ns-kbd">esc</span>
+    </div>
+    <div class="ns-cmdk__list">
+      <div class="ns-cmdk__group">
+        <sc-if value="{{ cmdkHasResults }}" hint-placeholder-val="{{ true }}">
+          <div class="ns-cmdk__group-label">Commands</div>
+        </sc-if>
+        <sc-for list="{{ cmdkItems }}" as="c" hint-placeholder-count="5">
+          <div class="ns-cmdk__item" aria-selected="{{ c.sel }}" onClick="{{ c.run }}" onMouseEnter="{{ c.hover }}">
+            <span class="ns-cmdk__item-icon" aria-hidden="true">{{ c.icon }}</span>
+            <span class="ns-cmdk__item-label">{{ c.label }}</span>
+            <span class="ns-cmdk__item-kind">{{ c.kind }}</span>
+          </div>
+        </sc-for>
+        <sc-if value="{{ cmdkEmpty }}" hint-placeholder-val="{{ false }}">
+          <div class="ns-cmdk__empty">No matching command</div>
+        </sc-if>
+      </div>
+    </div>
+  </div>
+</dialog>
+
+<dialog id="ns-sheet-dialog" data-part="content" data-side="right">
+  <div class="ns-sheet-head">
+    <span class="ns-sheet-head__title">{{ sheetTitle }}</span>
+    <span style="flex:1"></span>
+    <button class="ns-iconbtn" aria-label="Close panel" onClick="{{ closeSheet }}">✕</button>
+  </div>
+  <sc-if value="{{ sheetIsS2 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body">
+      <div class="ns-cfgsheet-hero">
+        <span class="ns-cfgres__eyebrow">{{ cfgSelNs }} · {{ cfgSelType }}</span>
+        <span class="ns-cfgsheet-hero__eff">{{ cfgSelEffective }}<span class="ns-cfgres__eff-unit">{{ cfgSelEffUnit }}</span></span>
+        <span class="ns-cfglayerchip" data-tone="{{ cfgSelWinTone }}">wins · {{ cfgSelWinLabel }}</span>
+      </div>
+      <p class="ns-cfgsheet__note">{{ cfgSelNote }}</p>
+      <!-- compact waterfall in the sheet -->
+      <div class="ns-cfgwater ns-cfgwater--sheet" aria-label="Precedence waterfall">
+        <div class="ns-cfgwater__spine" aria-hidden="true"></div>
+        <sc-for list="{{ cfgWater }}" as="w" hint-placeholder-count="4">
+          <div class="ns-cfgwater__layer" data-state="{{ w.state }}" data-tone="{{ w.tone }}" data-collapsed="{{ w.collapsed }}">
+            <span class="ns-cfgwater__rail" aria-hidden="true"><span class="ns-cfgwater__ord">{{ w.ord }}</span><span class="ns-cfgwater__dot"></span></span>
+            <sc-if value="{{ w.present }}" hint-placeholder-val="{{ true }}">
+              <div class="ns-cfgwater__card">
+                <div class="ns-cfgwater__card-head">
+                  <span class="ns-cfgwater__glyph" aria-hidden="true">{{ w.glyph }}</span>
+                  <span class="ns-cfgwater__layer-name">{{ w.label }}</span>
+                  <sc-if value="{{ w.isWinner }}" hint-placeholder-val="{{ true }}"><span class="ns-cfgwater__winpill">wins</span></sc-if>
+                  <sc-if value="{{ w.isShadowed }}" hint-placeholder-val="{{ false }}"><span class="ns-cfgwater__shadowpill">shadowed</span></sc-if>
+                  <span class="ns-cfgwater__flex"></span>
+                  <span class="{{ w.valClass }}">{{ w.value }}</span>
+                </div>
+                <sc-if value="{{ w.hasProv }}" hint-placeholder-val="{{ true }}"><span class="ns-cfgwater__prov"><span class="ns-cfgwater__prov-label">from</span><code>{{ w.provenance }}</code></span></sc-if>
+              </div>
+            </sc-if>
+            <sc-if value="{{ w.silent }}" hint-placeholder-val="{{ false }}">
+              <span class="ns-cfgwater__pip"><span class="ns-cfgwater__pip-name">{{ w.label }}</span><span class="ns-cfgwater__pip-note">— {{ w.pipNote }}</span></span>
+            </sc-if>
+          </div>
+        </sc-for>
+      </div>
+      <div style="display:grid;gap:var(--ns-space-2)">
+        <button class="ns-btn ns-btn--secondary" onClick="{{ s2GoRuntime }}">Open override store →</button>
+        <button class="ns-btn ns-btn--ghost" onClick="{{ s2ViewPlugin }}">View plugin</button>
+        <button class="ns-btn ns-btn--ghost" onClick="{{ s2ViewContracts }}">View contracts</button>
+      </div>
+    </div>
+  </sc-if>
+  <sc-if value="{{ sheetIsS3 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body ns-ovsheet">
+      <div class="ns-ovsheet__hero">
+        <div class="ns-ovsheet__hero-main">
+          <span class="ns-ovsheet__eyebrow">{{ s3Detail.kind }} override</span>
+          <div class="ns-ovsheet__transition">
+            <span class="ns-ovsheet__base">{{ s3Detail.base }}</span>
+            <span class="ns-ovsheet__arrow" aria-hidden="true">→</span>
+            <span class="ns-ovsheet__val" data-tone="{{ s3Detail.tone }}">{{ s3Detail.val }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="ns-badge ns-badge--muted ns-ovsheet__reload" data-state="{{ s3Detail.reload }}">
+        <span class="ns-ovsheet__reload-txt">{{ s3Detail.reloadLabel }}</span>
+      </div>
+      <p class="ns-ovsheet__note">{{ s3Detail.note }}</p>
+      <dl class="ns-property-list ns-property-list--compact ns-ovfacts">
+        <sc-for list="{{ s3Detail.kv }}" as="kv" hint-placeholder-count="7">
+          <div class="ns-ovfacts__row"><dt class="ns-ovfacts__key">{{ kv.k }}</dt><dd class="ns-ovfacts__value">{{ kv.v }}</dd></div>
+        </sc-for>
+      </dl>
+      <div class="ns-ovsheet__actions">
+        <button class="{{ s3Detail.actClass }}" onClick="{{ s3Detail.act }}">{{ s3Detail.actLabel }} override</button>
+        <button class="ns-btn ns-btn--ghost" onClick="{{ s3Detail.go }}">Open in {{ s3Detail.goLabel }} →</button>
+      </div>
+    </div>
+  </sc-if>
+  <sc-if value="{{ sheetIsS13 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body">
+      <div class="ns-seamsheet-hero">
+        <span class="ns-journey__prim" data-prim="{{ s13SelPrim }}">{{ s13SelPrim }}</span>
+        <span class="{{ s13SelBadge }}">{{ s13Detail.status }}</span>
+      </div>
+      <div class="ns-kv">
+        <div class="ns-kv__row"><span class="ns-kv__key">plugin owner</span><span class="ns-kv__val">{{ s13Detail.owner }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">queue / topic</span><span class="ns-kv__val">{{ s13Detail.queue }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">correlation id</span><span class="ns-kv__val" style="color:var(--ns-primary)">{{ s13Detail.corr }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">trace</span><span class="ns-kv__val">{{ s13Detail.trace }}</span></div>
+      </div>
+      <div style="display:grid;gap:var(--ns-space-2)">
+        <button class="ns-btn ns-btn--primary" onClick="{{ s13OpenEntity }}">Open {{ s13Detail.entity }} →</button>
+        <button class="ns-btn ns-btn--secondary" onClick="{{ s13OpenTrace }}">View raw trace in Aspire ↗</button>
+        <button class="ns-btn ns-btn--ghost" onClick="{{ s13OpenRun }}">Open in Run Inspector</button>
+      </div>
+      <div style="display:grid;gap:var(--ns-space-2-5)">
+        <span class="ns-mini-label">assist</span>
+        <div style="display:flex;flex-wrap:wrap;gap:var(--ns-space-2)">
+          <button class="ns-ai-chip" onClick="{{ s13AssistExplain }}">Explain this failure</button>
+          <button class="ns-ai-chip" onClick="{{ s13AssistFix }}">Draft a fix</button>
+          <button class="ns-ai-chip" onClick="{{ s13AssistCompare }}">Compare with last success</button>
+        </div>
+        <sc-if value="{{ s13Assist }}" hint-placeholder-val="{{ false }}">
+          <div class="ns-assist" data-state="ready">
+            <div class="ns-assist__head">{{ s13Assist.head }}</div>
+            <div class="ns-assist__summary">{{ s13Assist.summary }}</div>
+            <div class="ns-assist__grounding"><span class="ns-assist__grounding-label">grounded in</span>
+              <sc-for list="{{ s13Assist.grounding }}" as="g" hint-placeholder-count="2"><button class="ns-ground" style="font:inherit" onClick="{{ g.go }}">{{ g.label }}</button></sc-for>
+            </div>
+            <div class="ns-assist__actions"><button class="{{ s13Assist.actionClass }}" onClick="{{ s13Assist.action }}">{{ s13Assist.actionLabel }}</button></div>
+            <div class="ns-assist__meta">{{ s13Assist.meta }}</div>
+          </div>
+        </sc-if>
+      </div>
+    </div>
+  </sc-if>
+  <sc-if value="{{ sheetIsS7 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body">
+      <div class="ns-seamsheet-hero">
+        <span class="{{ s7Detail.kindBadge }}">{{ s7Detail.kind }}</span>
+        <span class="ns-rtbadge"><span class="ns-rtbadge__dot" data-rt="{{ s7Detail.rtKey }}"></span>{{ s7Detail.rt }}</span>
+        <span class="{{ s7Detail.sBadge }}">{{ s7Detail.last }}</span>
+      </div>
+      <div class="ns-kv">
+        <div class="ns-kv__row"><span class="ns-kv__key">schedule</span><span class="ns-kv__val">{{ s7Detail.sched }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">cadence</span><span class="ns-kv__val">{{ s7Detail.human }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">queue</span><span class="ns-kv__val">{{ s7Detail.queue }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">runtime</span><span class="ns-kv__val">{{ s7Detail.rt }}</span></div>
+      </div>
+      <div style="display:grid;gap:var(--ns-space-2)">
+        <span class="ns-drawer__section-label">recent executions</span>
+        <div class="ns-step-timeline ns-step-timeline--data" data-view="compact">
+          <sc-for list="{{ s7DetailRuns }}" as="r" hint-placeholder-count="3">
+            <div class="ns-step-timeline__step" data-state="{{ r.state }}">
+              <span class="ns-step-timeline__marker" aria-hidden="true"></span>
+              <div class="ns-step-timeline__main">
+                <div class="ns-step-timeline__title"><span style="font-family:var(--ns-font-mono);color:var(--ns-fg)">{{ r.n }}</span><span class="ns-step-timeline__datum">{{ r.datum }}</span></div>
+                <div class="ns-step-timeline__meta"><span>{{ r.meta }}</span></div>
+              </div>
+            </div>
+          </sc-for>
+        </div>
+      </div>
+      <div style="display:grid;gap:var(--ns-space-2)">
+        <button class="ns-btn ns-btn--primary" onClick="{{ s7Detail.run }}">Run now</button>
+        <button class="ns-btn ns-btn--secondary" onClick="{{ s7Detail.open }}">Open {{ s7Detail.name }} →</button>
+      </div>
+    </div>
+  </sc-if>
+  <sc-if value="{{ sheetIsS9 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body">
+      <div class="ns-seamsheet-hero">
+        <span class="ns-tcatbadge" data-cat="{{ s9Detail.cat }}"><span class="ns-tcatbadge__glyph" aria-hidden="true">{{ s9Detail.catGlyph }}</span>{{ s9Detail.catLabel }}</span>
+        <span style="flex:1"></span>
+        <span class="{{ s9Detail.sBadge }}">{{ s9Detail.outcome }}</span>
+      </div>
+      <!-- when → do summary -->
+      <div class="ns-tdrawer__rule">
+        <span class="ns-tdrawer__rule-when">when {{ s9Detail.when }}</span>
+        <span class="ns-tdrawer__rule-arrow" aria-hidden="true">▶</span>
+        <span class="ns-tdrawer__rule-do">do {{ s9Detail.doesLabel }}</span>
+      </div>
+      <div class="ns-kv">
+        <div class="ns-kv__row"><span class="ns-kv__key">source</span><span class="ns-kv__val">{{ s9Detail.src }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">condition</span><span class="ns-kv__val">{{ s9Detail.cond }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">last fired</span><span class="ns-kv__val">{{ s9Detail.lastAt }} · {{ s9Detail.lat }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">next fire</span><span class="ns-kv__val">{{ s9Detail.next }} · {{ s9Detail.nextIn }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">fires · 24h</span><span class="ns-kv__val">{{ s9Detail.fires }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">correlation</span><span class="ns-kv__val" style="color:var(--ns-primary)">{{ s9Detail.corr }}</span></div>
+      </div>
+      <!-- inner tabs (ref 11 drawer docs tabs) -->
+      <div class="ns-drawer__tabs" role="tablist">
+        <button class="ns-drawer__tab" role="tab" data-state="{{ s9Detail.tabIsChain }}" onClick="{{ s9Detail.tabChain }}">Action chain</button>
+        <button class="ns-drawer__tab" role="tab" data-state="{{ s9Detail.tabIsPayload }}" onClick="{{ s9Detail.tabPayload }}">Payload</button>
+        <sc-if value="{{ s9Detail.isSched }}" hint-placeholder-val="{{ false }}">
+          <button class="ns-drawer__tab" role="tab" data-state="{{ s9Detail.tabIsSched }}" onClick="{{ s9Detail.tabSched }}">Schedule</button>
+        </sc-if>
+      </div>
+      <sc-if value="{{ s9Detail.showChain }}" hint-placeholder-val="{{ true }}">
+        <div class="ns-achain">
+          <sc-for list="{{ s9Detail.chain }}" as="a" hint-placeholder-count="2">
+            <div class="ns-achain__row" data-state="{{ a.state }}">
+              <span class="ns-achain__dot" aria-hidden="true"></span>
+              <span class="ns-achain__type">{{ a.type }}</span>
+              <span>{{ a.detail }}</span>
+              <span>· {{ a.dur }}</span>
+              <sc-if value="{{ a.go }}" hint-placeholder-val="{{ false }}">
+                <button class="ns-achain__link" onClick="{{ a.go }}">{{ a.linkLabel }} →</button>
+              </sc-if>
+            </div>
+          </sc-for>
+        </div>
+      </sc-if>
+      <sc-if value="{{ s9Detail.showPayload }}" hint-placeholder-val="{{ false }}">
+        <pre class="ns-tdrawer__payload">{{ s9Detail.payload }}</pre>
+      </sc-if>
+      <sc-if value="{{ s9Detail.showSched }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-connector">
+          <sc-for list="{{ s9Detail.sched }}" as="p" hint-placeholder-count="3">
+            <div class="ns-connector__row" data-state="{{ p.state }}">
+              <span class="ns-connector__dot" aria-hidden="true"></span>
+              <span class="ns-connector__probe">{{ p.probe }}</span>
+              <span class="ns-connector__result">{{ p.result }}</span>
+            </div>
+          </sc-for>
+        </div>
+      </sc-if>
+      <div style="display:grid;gap:var(--ns-space-2)">
+        <button class="ns-btn ns-btn--primary" onClick="{{ s9Detail.openRun }}">Open firing run →</button>
+        <button class="ns-btn ns-btn--secondary" onClick="{{ s9Detail.toggle }}">{{ s9Detail.toggleLabel }}</button>
+      </div>
+    </div>
+  </sc-if>
+  <sc-if value="{{ sheetIsS8 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body">
+      <sc-if value="{{ s8PropsIsNode }}" hint-placeholder-val="{{ true }}">
+        <div class="ns-seamsheet-hero">
+          <span class="ns-sgc__props-tile" aria-hidden="true">{{ s8Props.glyph }}</span>
+          <span class="ns-sgc__props-eyebrow" data-lane="{{ s8Props.laneAttr }}">{{ s8Props.lane }} state</span>
+          <span style="flex:1"></span>
+          <span class="{{ s8Props.statusBadge }}">{{ s8Props.statusLabel }}</span>
+        </div>
+        <div class="ns-kv">
+          <div class="ns-kv__row"><span class="ns-kv__key">capability</span><span class="ns-kv__val">{{ s8Props.cap }}</span></div>
+          <div class="ns-kv__row"><span class="ns-kv__key">timing</span><span class="ns-kv__val">{{ s8Props.timing }}</span></div>
+          <div class="ns-kv__row"><span class="ns-kv__key">attempt</span><span class="ns-kv__val">{{ s8Props.attempt }}</span></div>
+        </div>
+        <div style="display:grid;gap:var(--ns-space-2)">
+          <span class="ns-drawer__section-label">transitions</span>
+          <div class="ns-sgc__trans">
+            <sc-for list="{{ s8Props.trans }}" as="t" hint-placeholder-count="2">
+              <div class="ns-sgc__trans-row" data-lane="{{ t.laneAttr }}"><span class="ns-sgc__trans-dir" aria-hidden="true">{{ t.glyph }}</span><span>{{ t.label }}</span></div>
+            </sc-for>
+          </div>
+        </div>
+        <sc-if value="{{ s8Props.hasPayload }}" hint-placeholder-val="{{ true }}">
+          <div style="display:grid;gap:var(--ns-space-2)">
+            <span class="ns-drawer__section-label">payload at state</span>
+            <pre class="ns-sgc__props-payload">{{ s8Props.payload }}</pre>
+          </div>
+        </sc-if>
+        <div style="display:grid;gap:var(--ns-space-2)">
+          <sc-if value="{{ s8Props.hasAction }}" hint-placeholder-val="{{ false }}">
+            <button class="{{ s8Props.action.cls }}" onClick="{{ s8Props.action.run }}">{{ s8Props.action.label }}</button>
+          </sc-if>
+          <button class="ns-btn ns-btn--ghost" onClick="{{ s8OpenJob }}">Linked execution: job_4183 →</button>
+          <button class="ns-btn ns-btn--ghost" onClick="{{ s8ClearNode }}">Back to instance summary</button>
+        </div>
+      </sc-if>
+      <sc-if value="{{ s8PropsIsSummary }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-seamsheet-hero">
+          <span class="ns-sgc__props-name">{{ s8.saga }}</span>
+          <span style="flex:1"></span>
+          <span class="{{ s8.statusBadge }}">{{ s8.status }}</span>
+        </div>
+        <div class="ns-kv">
+          <div class="ns-kv__row"><span class="ns-kv__key">correlation</span><span class="ns-kv__val" style="color:var(--ns-primary)">{{ s8.id }}</span></div>
+          <div class="ns-kv__row"><span class="ns-kv__key">durability</span><span class="ns-kv__val">{{ s8.tier }}</span></div>
+          <div class="ns-kv__row"><span class="ns-kv__key">forward</span><span class="ns-kv__val">{{ s8Hero.fwd }}</span></div>
+        </div>
+        <div style="font-family:var(--ns-font-mono);font-size:var(--ns-text-2xs);color:var(--ns-muted-fg)">Tap a state node on the canvas for its config.</div>
+      </sc-if>
+    </div>
+  </sc-if>
+  <sc-if value="{{ sheetIsS11 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body">
+      <div class="ns-migsheet__hero">
+        <span class="ns-migver" data-phase="{{ s11Detail.status }}">{{ s11Detail.ver }}</span>
+        <div class="ns-migsheet__hero-txt">
+          <span class="ns-migsheet__hero-name" style="font-family:var(--ns-font-mono)">{{ s11Detail.name }}</span>
+          <span class="ns-migsheet__hero-title">{{ s11Detail.title }}</span>
+        </div>
+        <span style="flex:1"></span>
+        <span class="{{ s11Detail.sBadge }}">{{ s11Detail.statusLabel }}</span>
+      </div>
+      <div class="ns-migsheet__stats">
+        <div class="ns-migsheet__stat"><span class="ns-migsheet__stat-k">applied</span><span class="ns-migsheet__stat-v" style="font-family:var(--ns-font-mono)">{{ s11Detail.atLabel }}</span></div>
+        <div class="ns-migsheet__stat"><span class="ns-migsheet__stat-k">duration</span><span class="ns-migsheet__stat-v" style="font-family:var(--ns-font-mono)">{{ s11Detail.dur }}</span></div>
+        <div class="ns-migsheet__stat"><span class="ns-migsheet__stat-k">rows</span><span class="ns-migsheet__stat-v" style="font-family:var(--ns-font-mono)">{{ s11Detail.rows }}</span></div>
+      </div>
+      <div class="ns-seg ns-migsheet__seg" role="tablist" aria-label="Migration detail">
+        <button class="ns-seg__btn" role="tab" data-state="{{ s11TabSummary.state }}" onClick="{{ s11TabSummary.set }}" data-ns-migdrawer-summary>Summary</button>
+        <button class="ns-seg__btn" role="tab" data-state="{{ s11TabDdl.state }}" onClick="{{ s11TabDdl.set }}" data-ns-migdrawer-ddl>DDL diff</button>
+      </div>
+      <sc-if value="{{ s11DrawerSummary }}" hint-placeholder-val="{{ true }}">
+        <div class="ns-migsheet__panel">
+          <p class="ns-migsheet__summary">{{ s11Detail.summary }}</p>
+          <div class="ns-migsheet__tables">
+            <span class="ns-mini-label">tables touched</span>
+            <div class="ns-migsheet__chips">
+              <sc-for list="{{ s11Detail.tables }}" as="t" hint-placeholder-count="2">
+                <span class="ns-migchip" style="font-family:var(--ns-font-mono)">{{ t.t }}</span>
+              </sc-for>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+      <sc-if value="{{ s11DrawerDdl }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-migsheet__panel">
+          <div class="ns-code"><div class="ns-code__head"><span class="ns-code__name">schema.prisma</span><span class="ns-code__lang">diff</span></div></div>
+          <div class="ns-diff" style="margin-top:calc(-1 * var(--ns-space-2));border-top-left-radius:0;border-top-right-radius:0">
+            <sc-for list="{{ s11Detail.ddl }}" as="d" hint-placeholder-count="5">
+              <span class="ns-diff__line" data-op="{{ d.op }}">{{ d.text }}</span>
+            </sc-for>
+          </div>
+        </div>
+      </sc-if>
+      <sc-if value="{{ s11Detail.isPending }}" hint-placeholder-val="{{ true }}">
+        <div style="display:grid;gap:var(--ns-space-2)">
+          <button class="ns-btn ns-btn--primary" onClick="{{ runMigrate }}">Apply migration</button>
+          <button class="ns-btn ns-btn--ghost" onClick="{{ s11OpenAspire }}">Open DB resource in Aspire ↗</button>
+        </div>
+      </sc-if>
+    </div>
+  </sc-if>
+  <sc-if value="{{ sheetIsS12 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body">
+      <div class="ns-dlqinsp__hero">
+        <span class="ns-dlqsig ns-dlqsig--lg" data-tone="{{ s12Detail.sigTone }}">{{ s12Detail.sig }}</span>
+        <span class="ns-dlqinsp__reason">{{ s12Detail.reason }}</span>
+        <span class="ns-panel__flex"></span>
+        <span class="ns-badge ns-badge--destructive">dead-lettered</span>
+      </div>
+      <div class="ns-kv">
+        <div class="ns-kv__row"><span class="ns-kv__key">source</span><span class="ns-kv__val"><span class="ns-dlqrow__kind" aria-hidden="true">{{ s12Detail.kindGlyph }}</span>{{ s12Detail.src }} · {{ s12Detail.kind }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">queue</span><span class="ns-kv__val">{{ s12Detail.q }}</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">retries</span><span class="ns-kv__val">{{ s12Detail.retryLabel }} · exhausted</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">parked</span><span class="ns-kv__val">{{ s12Detail.age }} ago</span></div>
+        <div class="ns-kv__row"><span class="ns-kv__key">correlation</span><span class="ns-kv__val" style="color:var(--ns-primary)">{{ s12Detail.corr }}</span></div>
+      </div>
+      <div style="display:grid;gap:var(--ns-space-2)">
+        <span class="ns-drawer__section-label">payload</span>
+        <pre class="ns-dlqinsp__payload">{{ s12Detail.payload }}</pre>
+      </div>
+      <div style="display:grid;gap:var(--ns-space-2)">
+        <span class="ns-drawer__section-label">retry history</span>
+        <div class="ns-step-timeline ns-step-timeline--data" data-view="compact">
+          <sc-for list="{{ s12Detail.hist }}" as="h" hint-placeholder-count="3">
+            <div class="ns-step-timeline__step" data-state="failed">
+              <span class="ns-step-timeline__marker" aria-hidden="true"></span>
+              <div class="ns-step-timeline__main">
+                <div class="ns-step-timeline__title"><span style="font-family:var(--ns-font-mono);color:var(--ns-fg)">{{ h.n }}</span><span class="ns-step-timeline__datum">{{ h.out }}</span></div>
+                <div class="ns-step-timeline__meta"><span>{{ h.at }}</span></div>
+              </div>
+            </div>
+          </sc-for>
+        </div>
+      </div>
+      <div style="display:grid;gap:var(--ns-space-2)">
+        <button class="ns-btn ns-btn--destructive" onClick="{{ s12Detail.reprocessOne }}">Reprocess this message</button>
+        <button class="ns-btn ns-btn--secondary" onClick="{{ s12Detail.purgeOne }}">Purge</button>
+        <button class="ns-btn ns-btn--ghost" onClick="{{ s12Detail.openRun }}">Open original run →</button>
+      </div>
+    </div>
+  </sc-if>
+  <sc-if value="{{ sheetIsS4 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body">
+      <div class="ns-catsheet__hero">
+        <span class="ns-catdetail__kind" data-kind="{{ s4Detail.plugin }}" aria-hidden="true">{{ s4Detail.kindGlyph }}</span>
+        <div class="ns-catsheet__hero-main">
+          <span class="ns-catdetail__prov">{{ s4Detail.plugin }} › {{ s4Detail.ns }}</span>
+          <span class="ns-catver__tag">{{ s4Detail.ver }}</span>
+        </div>
+        <span class="ns-panel__flex" style="flex:1"></span>
+        <span class="ns-catver__compat" data-tone="{{ s4Detail.compatTone }}">compat · {{ s4Detail.compatLabel }}</span>
+      </div>
+      <div class="ns-catdetail__method-strip">
+        <span class="{{ s4Detail.mBadge }}">{{ s4Detail.method }}</span>
+        <span class="{{ s4Detail.covBadge }}">{{ s4Detail.covLabel }}</span>
+        <span class="ns-catdup ns-catdup--lg" aria-label="Transport duality">
+          <sc-for list="{{ s4Detail.dualPips }}" as="d" hint-placeholder-count="3"><span class="ns-catdup__pip" data-on="{{ d.on }}" data-key="{{ d.key }}"><span class="ns-catdup__pip-lbl">{{ d.label }}</span></span></sc-for>
+        </span>
+      </div>
+      <div class="ns-catsig" aria-label="Type signature">
+        <div class="ns-catsig__gutter" aria-hidden="true">1</div>
+        <code class="ns-catsig__code"><sc-for list="{{ s4Detail.sigCells }}" as="t" hint-placeholder-count="8"><span class="ns-catsig__tok" data-kind="{{ t.k }}">{{ t.t }}</span></sc-for></code>
+      </div>
+      <div class="ns-catschema">
+        <div class="ns-catschema__head"><span class="ns-drawer__section-label">schema</span><span class="ns-catschema__hint">{{ s4Detail.input }} · {{ s4Detail.output }}</span></div>
+        <div class="ns-catschema__code">
+          <sc-for list="{{ s4Detail.schemaLines }}" as="l" hint-placeholder-count="8">
+            <div class="ns-catschema__line">
+              <span class="ns-catschema__gutter" aria-hidden="true">{{ l.n }}</span>
+              <code class="ns-catschema__src"><span class="ns-catsig__tok" data-kind="{{ l.kind }}">{{ l.name }}</span><span class="ns-catschema__rest">{{ l.rest }}</span></code>
+            </div>
+          </sc-for>
+        </div>
+      </div>
+      <div class="ns-catrel" aria-label="Producers and consumers">
+        <div class="ns-catrel__col ns-catrel__col--prod">
+          <span class="ns-catrel__col-label">producers <span class="ns-catrel__col-n">{{ s4Detail.prodCount }}</span></span>
+          <sc-for list="{{ s4Detail.producerNodes }}" as="p" hint-placeholder-count="2"><span class="ns-catrel__node" data-role="prod">{{ p.label }}</span></sc-for>
+        </div>
+        <div class="ns-catrel__spine" aria-hidden="true"><span class="ns-catrel__hub" data-kind="{{ s4Detail.plugin }}">{{ s4Detail.kindGlyph }}</span></div>
+        <div class="ns-catrel__col ns-catrel__col--cons">
+          <span class="ns-catrel__col-label"><span class="ns-catrel__col-n">{{ s4Detail.consCount }}</span> consumers</span>
+          <sc-for list="{{ s4Detail.consumerNodes }}" as="p" hint-placeholder-count="2"><span class="ns-catrel__node" data-role="cons">{{ p.label }}</span></sc-for>
+        </div>
+      </div>
+      <div style="display:grid;gap:var(--ns-space-2)">
+        <button class="ns-btn ns-btn--secondary" onClick="{{ s4Detail.scalar }}">Open in Scalar ↗</button>
+      </div>
+    </div>
+  </sc-if>
+  <sc-if value="{{ sheetIsS15 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body">
+      <div class="ns-authdetail__head">
+        <span class="ns-authdetail__avatar" data-kind="{{ s15Detail.kind }}" aria-hidden="true">{{ s15Detail.initials }}<span class="ns-authcard__dev" data-dev="{{ s15Detail.dev }}">{{ s15Detail.devGlyph }}</span></span>
+        <div class="ns-authdetail__head-main">
+          <div class="ns-authdetail__name-row"><span class="ns-authdetail__name">{{ s15Detail.name }}</span><sc-if value="{{ s15Detail.elevated }}" hint-placeholder-val="{{ false }}"><span class="ns-authcard__elev" title="Elevated scope">⚑</span></sc-if></div>
+          <span class="ns-authdetail__uid">{{ s15Detail.id }} · {{ s15Detail.email }}</span>
+        </div>
+        <span class="{{ s15Detail.sBadge }}">{{ s15Detail.effState }}</span>
+      </div>
+      <div class="ns-authttl" data-tone="{{ s15Detail.ttlTone }}">
+        <div class="ns-authttl__labels"><span>issued {{ s15Detail.issued }}</span><span class="ns-authttl__lifespan">{{ s15Detail.lifespan }} TTL</span><span>{{ s15Detail.remLbl }}</span></div>
+        <div class="ns-authttl__track" aria-label="Elapsed vs remaining">
+          <span class="ns-authttl__elapsed {{ s15Detail.elapsedWClass }}"></span>
+          <span class="ns-authttl__marker {{ s15Detail.ttlMarkerClass }}" aria-hidden="true"></span>
+          <span class="ns-authttl__remain {{ s15Detail.ttlWClass }}" data-tone="{{ s15Detail.ttlTone }}"></span>
+        </div>
+        <div class="ns-authttl__foot"><span class="ns-authttl__elapsed-lbl">{{ s15Detail.issuedAgo }} elapsed</span><span class="ns-authttl__remain-lbl" data-tone="{{ s15Detail.ttlTone }}">⧗ {{ s15Detail.ttlPctLbl }} remaining</span></div>
+      </div>
+      <div class="ns-authkv">
+        <sc-for list="{{ s15Detail.kv }}" as="kv" hint-placeholder-count="8">
+          <div class="ns-authkv__row"><span class="ns-authkv__k">{{ kv.k }}</span><span class="ns-authkv__v">{{ kv.v }}</span></div>
+        </sc-for>
+      </div>
+      <div class="ns-authdetail__block">
+        <span class="ns-drawer__section-label">granted scopes <span class="ns-authdetail__count">{{ s15Detail.scopeN }}</span></span>
+        <div class="ns-authcard__scopes">
+          <sc-for list="{{ s15Detail.scopeChips }}" as="sc" hint-placeholder-count="4"><span class="ns-scopechip ns-scopechip--lg" data-elev="{{ sc.elevated }}">{{ sc.label }}</span></sc-for>
+        </div>
+      </div>
+      <div class="ns-authdetail__block">
+        <span class="ns-drawer__section-label">session lifecycle</span>
+        <div class="ns-authtl">
+          <sc-for list="{{ s15Detail.timeline }}" as="t" hint-placeholder-count="2">
+            <div class="ns-authtl__step" data-tone="{{ t.tone }}">
+              <span class="ns-authtl__marker" aria-hidden="true"></span>
+              <div class="ns-authtl__body"><span class="ns-authtl__text">{{ t.text }}</span><span class="ns-authtl__at">{{ t.at }}</span></div>
+            </div>
+          </sc-for>
+        </div>
+      </div>
+      <sc-if value="{{ s15Detail.canRevoke }}" hint-placeholder-val="{{ true }}">
+        <div style="display:grid;gap:var(--ns-space-2)">
+          <button class="ns-btn ns-btn--destructive" onClick="{{ s15Detail.revoke }}">Revoke session</button>
+        </div>
+      </sc-if>
+      <sc-if value="{{ s15Detail.cannotRevoke }}" hint-placeholder-val="{{ false }}">
+        <div class="ns-authdetail__revoked-note"><span aria-hidden="true">⛒</span> Session revoked — {{ s15Detail.last }}</div>
+      </sc-if>
+    </div>
+  </sc-if>
+  <sc-if value="{{ sheetIsS16 }}" hint-placeholder-val="{{ false }}">
+    <div class="ns-sheet-body">
+      <div class="ns-extmanifest__head ns-extmanifest__head--sheet">
+        <div class="ns-extmanifest__id">
+          <div class="ns-extmanifest__name-row"><span class="ns-extmanifest__name">{{ extSel.name }}</span><span class="ns-extmanifest__ver">{{ extSel.version }}</span></div>
+          <span class="ns-extmanifest__sub">{{ extSel.source }} · {{ extSel.surfLbl }}</span>
+        </div>
+        <span class="ns-extmanifest__status" data-en="{{ extSel.enabled }}"><span class="ns-extprov__status-dot" aria-hidden="true"></span>{{ extSel.statusLbl }}</span>
+      </div>
+      <div class="ns-extmanifest__kv">
+        <sc-for list="{{ extSel.kv }}" as="kv" hint-placeholder-count="4"><div class="ns-extmanifest__kv-row"><span class="ns-extmanifest__kv-k">{{ kv.k }}</span><span class="ns-extmanifest__kv-v" data-tone="{{ kv.tone }}">{{ kv.v }}</span></div></sc-for>
+      </div>
+      <div class="ns-extmanifest__section-label">contributes</div>
+      <div class="ns-extmanifest__groups">
+        <sc-for list="{{ extSel.groups }}" as="g" hint-placeholder-count="2">
+          <div class="ns-extgroup" data-kind="{{ g.kind }}">
+            <div class="ns-extgroup__head"><span class="ns-extgroup__title">{{ g.title }}</span><span class="ns-extgroup__n">{{ g.n }}</span></div>
+            <div class="ns-extgroup__items">
+              <sc-for list="{{ g.items }}" as="it" hint-placeholder-count="2">
+                <div class="ns-extcontrib">
+                  <div class="ns-extcontrib__main"><span class="ns-extcontrib__title">{{ it.title }}</span><span class="ns-extcontrib__meta">{{ it.meta }}</span></div>
+                  <span class="ns-extcontrib__perm">{{ it.perm }}</span>
+                </div>
+              </sc-for>
+            </div>
+          </div>
+        </sc-for>
+      </div>
+      <div class="ns-extmanifest__section-label">plugs into</div>
+      <div class="ns-extmounts">
+        <sc-for list="{{ extSel.mounts }}" as="m" hint-placeholder-count="2"><span class="ns-extmount" data-kind="{{ m.kind }}">{{ m.label }}</span></sc-for>
+      </div>
+      <div class="ns-extmanifest__actions">
+        <button class="{{ extSel.toggleClass }}" onClick="{{ extSel.toggle }}">{{ extSel.actionLabel }}</button>
+        <button class="ns-btn ns-btn--ghost" onClick="{{ extSel.viewPlugin }}">View plugin</button>
+      </div>
+    </div>
+  </sc-if>
+</dialog>
+
+<dialog id="ns-detailsheet-dialog" data-part="content" data-side="bottom" class="ns-detailsheet">
+  <div class="ns-detailsheet__inner">
+    <div class="ns-detailsheet__head">
+      <span class="ns-detailsheet__eyebrow">{{ s1Sheet.eyebrow }}</span>
+      <button class="ns-iconbtn ns-detailsheet__close" aria-label="Close" onClick="{{ closeDetailSheet }}">✕</button>
+    </div>
+    <div class="ns-detailsheet__hero">
+      <span class="ns-detailsheet__icon" data-tone="{{ s1Sheet.tone }}" aria-hidden="true">{{ s1Sheet.icon }}</span>
+      <div class="ns-detailsheet__hero-main">
+        <span class="ns-detailsheet__value">{{ s1Sheet.value }}</span>
+        <span class="ns-detailsheet__title">{{ s1Sheet.title }}</span>
+      </div>
+      <span class="ns-badge {{ s1Sheet.pillClass }}">{{ s1Sheet.pill }}</span>
+    </div>
+    <p class="ns-detailsheet__desc">{{ s1Sheet.desc }}</p>
+    <div class="ns-detailsheet__kv">
+      <sc-for list="{{ s1Sheet.rows }}" as="kv" hint-placeholder-count="3">
+        <div class="ns-detailsheet__kv-row"><span class="ns-detailsheet__kv-key">{{ kv.k }}</span><span class="ns-detailsheet__kv-val">{{ kv.v }}</span></div>
+      </sc-for>
+    </div>
+    <div class="ns-detailsheet__actions">
+      <button class="ns-btn ns-btn--primary" onClick="{{ s1Sheet.go }}">{{ s1Sheet.cta }} →</button>
+      <button class="ns-btn ns-btn--ghost" onClick="{{ closeDetailSheet }}">Dismiss</button>
+    </div>
+  </div>
+</dialog>
+
+<dialog class="ns-confirm" id="ns-confirm-dialog">
+  <div class="ns-confirm__body">
+    <div class="ns-confirm__title">{{ confirmTitle }}</div>
+    <div class="ns-confirm__desc">{{ confirmDesc }}</div>
+    <div class="ns-confirm__change" style="white-space:normal;overflow-wrap:anywhere">
+      <span style="white-space:nowrap">{{ confirmFrom }}</span>
+      <span class="ns-confirm__arrow" aria-hidden="true">→</span>
+      <span style="color:var(--ns-primary)">{{ confirmTo }}</span>
+    </div>
+    <div style="display:grid;gap:var(--ns-space-1-5)">
+      <span class="ns-confirm__cli-label">CLI equivalent</span>
+      <div class="ns-code"><pre><code>{{ confirmCli }}</code></pre></div>
+    </div>
+  </div>
+  <div class="ns-confirm__foot">
+    <button class="ns-btn ns-btn--ghost" onClick="{{ confirmCancel }}">Cancel</button>
+    <button class="{{ confirmBtnClass }}" disabled="{{ confirmBusy }}" onClick="{{ confirmApply }}">{{ confirmAction }}</button>
+  </div>
+</dialog>
+
+<sc-if value="{{ toastMsg }}" hint-placeholder-val="{{ false }}">
+  <div class="ns-toaster" data-tone="{{ toastTone }}" role="status">{{ toastMsg }}</div>
+</sc-if>
+
+</x-dc>
+<script type="text/x-dc" data-dc-script data-props="{&quot;$preview&quot;: {&quot;width&quot;: 1440, &quot;height&quot;: 900}, &quot;scenario&quot;: {&quot;editor&quot;: &quot;enum&quot;, &quot;options&quot;: [&quot;degraded&quot;, &quot;healthy&quot;], &quot;default&quot;: &quot;degraded&quot;, &quot;tsType&quot;: &quot;'degraded' | 'healthy'&quot;, &quot;section&quot;: &quot;Data&quot;}, &quot;simulate&quot;: {&quot;editor&quot;: &quot;boolean&quot;, &quot;default&quot;: true, &quot;tsType&quot;: &quot;boolean&quot;, &quot;section&quot;: &quot;Live feed&quot;}, &quot;tickSeconds&quot;: {&quot;editor&quot;: &quot;range&quot;, &quot;default&quot;: 5, &quot;min&quot;: 2, &quot;max&quot;: 15, &quot;step&quot;: 1, &quot;unit&quot;: &quot;s&quot;, &quot;tsType&quot;: &quot;number&quot;, &quot;section&quot;: &quot;Live feed&quot;}}">
+class Component extends DCLogic {
+  constructor(props) {
+    super(props);
+    const F = (tone, text, time) => ({ tone, text, time });
+    this.state = {
+      route: 'home', path: '/', routeParams: {}, mobileNav: false, dark: false, rail: false,
+      cmdkOpen: false, cmdkQ: '', cmdkIdx: 0,
+      confirm: null, toast: null, sheet: null, detailSheet: null,
+      clockS: 50531, // 14:02:11
+      // S2 — Config Resolution: selected effective-config key (layered-precedence resolution)
+      s2Sel: 'flags.checkout-v2', s2Coverage: false, s2Edges: [], s2NsFilter: 'all',
+      // S3 runtime config
+      s3Follow: true, s3Pending: [],
+      s3Feed: [
+        F('success', 'trigger payment-webhook → re-enabled', '14:01:48'),
+        F('primary', 'saga order.fulfillment → task override applied', '13:58:12'),
+        F('warning', 'job nightly-reconcile → disabled', '13:54:31'),
+        F('primary', 'flag checkout-v2 → 30% rollout', '13:52:07'),
+      ],
+      s3View: 'compact', s3OpenVer: 'v43', s3VerDyn: [], verSeq: 44, s3Ov: null, s3Rev: 'v43',
+      flags: [
+        { id: 'checkout-v2', on: true, rollout: 30, base: '10%', by: 'ada@ops', at: '14 min ago', rev: 'v43', reload: 'live' },
+        { id: 'new-onboarding', on: true, rollout: 100, base: 'off', by: 'sam@ops', at: '3 days ago', rev: 'v38', reload: 'live' },
+        { id: 'beta-search', on: false, rollout: 0, base: 'off', by: 'default', at: '—', rev: '—', reload: 'live' },
+      ],
+      jobs3: [ { id: 'nightly-reconcile', disabled: true, by: 'ada@ops', at: '14 min ago', rev: 'v43', reload: 'live' }, { id: 'cache-warm', disabled: true, by: 'sam@ops', at: '2 h ago', rev: 'v42', reload: 'pending' } ],
+      trigs3: [ { id: 'noisy-filewatch', disabled: true, by: 'kai@ops', at: 'yesterday', rev: 'v40', reload: 'live' } ],
+      tasks3: [ { id: 'send-receipt', note: 'timeout 30s → 90s', base: '30s', val: '90s', field: 'timeoutMs', by: 'ada@ops', at: '2 h ago', rev: 'v42', reload: 'live' }, { id: 'sync-ledger', note: 'retries 3 → 6', base: '3', val: '6', field: 'retries', by: 'kai@ops', at: 'yesterday', rev: 'v39', reload: 'live' }, { id: 'export-csv', note: 'concurrency 4 → 1', base: '4', val: '1', field: 'concurrency', by: 'sam@ops', at: '4 days ago', rev: 'v35', reload: 'pending' } ],
+      // S4 — Catalog: contract registry explorer (browse → drill)
+      s4Tab: 'contracts', s4Sel: 'order.fulfillment.start', s4Kind: 'all', s4Method: 'all', s4Cov: 'all', s4Q: '',
+      // S15 — Auth Sessions: session-security roster (identity → TTL → detail → revoke)
+      s15Sel: 'sess_31', s15Filter: 'all', s15Sort: 'expiry', s15Q: '',
+      // S5
+      s5Sel: 'triggers', s5ShowCli: false,
+      // S6
+      s6Sel: 'run-saga', s6Status: 'all', s6Cap: 'all', s6Q: '', s6View: 'all', s6AssistKind: null,
+      // S7
+      s7Follow: true, s7Pending: [], s7Sel: 'reserve-inventory', s7Q: '', s7Runtime: 'all',
+      s7Feed: [
+        F('warning', 'job_4183 reserve-inventory RUNNING · attempt 2/3', '14:01:55'),
+        F('success', 'job_4180 reserve-inventory COMPLETED · 412ms', '14:00:02'),
+        F('destructive', 'job_4177 sync-ledger FAILED · exitCode 1', '13:57:40'),
+        F('success', 'job_4176 send-receipt COMPLETED · 88ms', '13:56:19'),
+      ],
+      // S8
+      s8Sel: 'pw', s8Node: null, s8Zoom: 100, s8Tab: 'state', s8SortKey: 'seq', s8SortDir: 'asc',
+      // S9
+      s9Follow: true, s9Pending: [],
+      s9Events: [
+        { id: 'evt_2210', trigger: 'webhook.payment', kind: 'webhook', tone: 'primary', status: 'processed', time: '13:59:45', corr: 'ch_3QK9dR2eZ',
+          chain: [
+            { type: 'publishSaga', detail: 'PaymentWebhookReceived → PaymentWebhookSaga', state: 'success', dur: '4ms', link: 'sagas' },
+            { type: 'enqueueJob', detail: 'reserve-inventory → job_4183', state: 'success', dur: '2ms', link: 'runs' },
+          ] },
+        { id: 'evt_2208', trigger: 'cron.nightly-reconcile', kind: 'cron', tone: 'muted', status: 'skipped', time: '14:00:00', corr: 'f3b2c1d0-uuid',
+          chain: [
+            { type: 'enqueueJob', detail: 'skipped — disabled by runtime-config override', state: 'skipped', dur: '—', link: 'runtime' },
+          ] },
+        { id: 'evt_2205', trigger: 'file-watch.config', kind: 'file', tone: 'warning', status: 'completed', time: '13:58:03', corr: 'a41c9e22-uuid',
+          chain: [
+            { type: 'executeTask', detail: 'reload-config → task_991 (shell)', state: 'success', dur: '61ms', link: 'workers' },
+          ] },
+        { id: 'evt_2199', trigger: 'kv.cache-invalidate', kind: 'kv', tone: 'success', status: 'completed', time: '13:55:27', corr: 'c1d04b17-uuid',
+          chain: [
+            { type: 'executeBatch', detail: 'purge-batch → batch_112', state: 'success', dur: '210ms', link: null },
+            { type: 'executeTask', detail: 'warm-cache → task_988 (python)', state: 'failure', dur: '3.2s', link: 'workers' },
+          ] },
+      ],
+      s9Open: { evt_2210: true },
+      s9Enabled: { 'cron.nightly-reconcile': true, 'webhook.payment': true, 'file-watch.config': true, 'kv.cache-invalidate': true, 'poll.inventory-sync': true, 'sched.daily-digest': true, 'composite.order-guard': true, 'manual.reindex': false },
+      s9Webhook: '{ "orderId": "ord_7f3k", "amount": 129.90 }',
+      s9Sel: 'webhook.payment', s9Cat: 'all', s9Sort: 'fired', s9SortDir: 'desc', s9SheetTab: 'chain',
+      s9Query: '', s9Outcome: 'all', s9Limit: '100',
+      // S10
+      s10Sel: 'msg_88f', s10Tab: 'consume',
+      s10Feed: [
+        F('destructive', 'payment-events msg_88f → analytics FAILED · attempt 3', '14:01:20'),
+        F('warning', 'payment-events msg_88f → ledger-sync delivered · attempt 2', '14:00:41'),
+        F('success', 'payment-events msg_88f → receipt-worker delivered', '14:00:12'),
+        F('primary', 'payment-events msg_88f published', '14:00:10'),
+        F('success', 'payment-events msg_87c → 3/3 delivered', '13:48:02'),
+      ],
+      // S11
+      s11Sel: '20260711_add_delivery_attempts',
+      s11Rows: [
+        { name: '20260711_add_delivery_attempts', ver: 'v4', title: 'add delivery attempts', at: '—', status: 'pending', dur: '~40ms', rows: '~est. 12.4k', tables: ['orders', 'delivery_attempts'],
+          summary: 'Adds the delivery_attempts table and converts orders.status from a free String to the OrderStatus enum. This is the migration the live DB is missing — applying it clears the orders.status drift.',
+          ddl: [
+            { op: 'ctx', text: 'model Order {' },
+            { op: 'del', text: '-   status String' },
+            { op: 'add', text: '+   status OrderStatus @default(PENDING)' },
+            { op: 'ctx', text: '}' },
+            { op: 'add', text: '+ model DeliveryAttempt { id String @id … }' },
+          ] },
+        { name: '20260706_add_receipts', ver: 'v3', title: 'add receipts', at: '2026-07-06 14:02', status: 'applied', dur: '38ms', rows: '9.1k', tables: ['receipts'],
+          summary: 'Introduced the receipts table and a foreign key from receipts.order_id to orders.id.',
+          ddl: [
+            { op: 'ctx', text: 'model Receipt {' },
+            { op: 'add', text: '+   id      String @id @default(cuid())' },
+            { op: 'add', text: '+   orderId String' },
+            { op: 'ctx', text: '}' },
+          ] },
+        { name: '20260703_add_orders', ver: 'v2', title: 'add orders', at: '2026-07-03 09:12', status: 'applied', dur: '112ms', rows: '41.2k', tables: ['orders', 'order_items'],
+          summary: 'Created the orders and order_items tables with the initial status String column.',
+          ddl: [
+            { op: 'ctx', text: 'model Order {' },
+            { op: 'add', text: '+   id     String @id @default(cuid())' },
+            { op: 'add', text: '+   status String' },
+            { op: 'ctx', text: '}' },
+          ] },
+        { name: '20260701_init', ver: 'v1', title: 'init', at: '2026-07-01 16:40', status: 'applied', dur: '54ms', rows: '0', tables: ['users', 'sessions'],
+          summary: 'Baseline schema — users and sessions tables, extensions, and the Prisma migration bookkeeping table.',
+          ddl: [
+            { op: 'add', text: '+ model User    { id String @id … }' },
+            { op: 'add', text: '+ model Session { id String @id … }' },
+          ] },
+      ],
+      // S11 drift — what the live DB has vs what the chain expects
+      s11Drift: [
+        { obj: 'orders.status', kind: 'column', has: 'String', wants: 'OrderStatus (enum)', tone: 'warning', note: 'type mismatch' },
+        { obj: 'delivery_attempts', kind: 'table', has: '— missing —', wants: 'table + 4 columns', tone: 'warning', note: 'not created' },
+      ],
+      // S12
+      s12Tab: 'queue', s12Checked: {}, s12Sel: null, s12Filter: null,
+      // S13
+      s13Sel: 'ch_3QK9dR2eZ', s13Follow: true, s13Pending: 0, s13Node: 0, s13AssistKind: null,
+      s13Route: 'all', s13Status: 'all',
+      s13Flows: this.seedFlows(),
+      flowSeq: 205,
+      // S1 KPI series (NetScript-domain counts, not Aspire metrics)
+      kpiExec: [14, 18, 16, 22, 19, 25, 21, 28, 24, 30, 27, 26],
+      kpiFire: [6, 8, 7, 9, 12, 10, 8, 11, 9, 13, 12, 10],
+      kpiOvr: [0, 1, 0, 2, 1, 0, 3, 1, 2, 1, 4, 2],
+      // S14 — AI agents
+      aiSel: 'chat_311', aiAsk: '', aiThinking: false, aiTab: 'activity', extTab: 'panels', extDisabled: {}, extInstalled: [],
+      aiRuns: [
+        { id: 'chat_311', agent: 'ops-copilot', model: 'ops-model-large', status: 'completed', time: '13:58:02', tokens: '2.4k in · 610 out', latency: '3.8s', corr: 'ch_3QK9dR2eZ', tools: 2,
+          turns: [
+            { role: 'user', text: 'Why is the Stripe payment for ch_3QK9dR2eZ stuck?' },
+            { role: 'tool', name: 'workers.executionsByCorrelation', state: 'ok', dur: '110ms', input: '{ "correlationId": "ch_3QK9dR2eZ" }', output: '{ "executions": [{ "jobId": "reserve-inventory", "executionId": "job_4183", "status": "retrying", "attempt": 2 }] }' },
+            { role: 'tool', name: 'sagas.getInstanceHistory', state: 'ok', dur: '86ms', input: '{ "sagaName": "PaymentWebhookSaga", "correlationId": "ch_3QK9dR2eZ" }', output: '{ "status": "compensating", "history": ["charged", "reserving", "reserve failed", "compensating"] }' },
+            { role: 'assistant', text: 'The webhook fired and PaymentWebhookSaga advanced to step 3, but job_4183 (reserve-inventory) is failing with E_TIMEOUT against redis — attempt 2 of 3. The saga is compensating step 2 (refund issued). Fix the redis pool exhaustion, then the retry will complete the reserve step.' },
+          ] },
+        { id: 'chat_309', agent: 'support-agent', model: 'ops-model-small', status: 'running', time: '14:01:40', tokens: '1.1k in · …', latency: 'streaming', corr: 'a7c2e910-uuid', tools: 1,
+          turns: [
+            { role: 'user', text: 'Summarize today\u2019s failed deliveries for the ops channel.' },
+            { role: 'tool', name: 'streams.deliveries.list', state: 'running', dur: '…', input: '{ "status": "failed", "since": "today" }', output: null },
+          ] },
+        { id: 'run_298', agent: 'catalog-enricher', model: 'ops-model-large', status: 'failed', time: '12:44:19', tokens: '8.9k in · 2.1k out', latency: '41s', corr: 'batch_2214', tools: 6,
+          turns: [
+            { role: 'user', text: '(batch) Enrich 40 imported products with categories.' },
+            { role: 'tool', name: 'db.products.update', state: 'failed', dur: '5.0s', input: '{ "batchId": "batch_2214" }', output: '{ "error": "E_TOOL_TIMEOUT — schema drift on orders.status" }' },
+            { role: 'assistant', text: 'Stopped: the db tool failed on schema drift (orders.status type mismatch). Apply the pending migration 20260711_add_delivery_attempts and re-run the batch.' },
+          ] },
+      ],
+    };
+    this.jobSeq = 4184;
+  }
+
+  seedFlows() {
+    const P = (prim, icon, name, seam, state, statusLabel, payload, meta) =>
+      ({ prim, icon, name, seam, state, statusLabel, payload, meta: meta || {} });
+    // Canonical journey (the spine): Stripe webhook → trigger event evt_2210 →
+    // PaymentWebhookSaga → job_4183 reserve-inventory → payment-events msg_88f,
+    // all joined on correlationId ch_3QK9dR2eZ (listExecutionsByCorrelationId).
+    // Flows ARE correlations — the row id IS the correlation id (no synthetic fl_*).
+    // The list holds exactly three, all POST /webhooks/stripe.
+    return [
+      {
+        id: 'ch_3QK9dR2eZ', method: 'POST', route: '/webhooks/stripe', tone: 'warning', time: '13:59:45', chips: '⚡1 ⛓1 ⚙1 ≋1', canonical: true, live: true, verdict: 'running',
+        nodes: [
+          P('http', '↓', 'POST /webhooks/stripe', 'ingress · 200', 'completed', '200', '{ "type": "charge.succeeded", "data": { "object": { "id": "ch_3QK9dR2eZ" } } }', { owner: 'web', trace: 'tr_9f21', corr: 'ch_3QK9dR2eZ' }),
+          P('trigger', '⚡', 'trigger webhook.payment', 'event evt_2210 · 2 actions', 'completed', 'PROCESSED', '{ "eventId": "evt_2210", "correlationId": "ch_3QK9dR2eZ", "actions": 2 }', { owner: 'triggers', trace: 'tr_9f21', corr: 'ch_3QK9dR2eZ', goRoute: 'triggers', entity: 'trigger event evt_2210', url: '/triggers/webhook.payment/events/evt_2210' }),
+          P('saga', '⤿', 'saga PaymentWebhookSaga', 'step 2 of 4', 'retrying', 'COMPENSATING STEP 2', '{ "correlationId": "ch_3QK9dR2eZ", "state": "reserving", "compensating": true }', { owner: 'sagas', trace: 'tr_9f21', corr: 'ch_3QK9dR2eZ', goRoute: 'sagas', entity: 'saga instance ch_3QK9dR2eZ', url: '/sagas/PaymentWebhookSaga/ch_3QK9dR2eZ' }),
+          P('worker', '⚙', 'job reserve-inventory', 'attempt 2 of 3', 'retrying', 'ATTEMPT 2 OF 3 · RETRYING', '{ "executionId": "job_4183", "attempt": 2, "error": "E_TIMEOUT redis pool" }', { owner: 'workers', queue: 'inventory', trace: 'tr_9f21', corr: 'ch_3QK9dR2eZ', goRoute: 'workers', entity: 'execution job_4183', url: '/workers/jobs/reserve-inventory/executions/job_4183' }),
+          P('stream', '≋', 'stream payment-events', 'fan-out · msg_88f', 'failed', '2/3 DELIVERED · 1 FAILED', '{ "messageId": "msg_88f", "delivered": 2, "failed": ["analytics"] }', { owner: 'streams', topic: 'payment-events', trace: 'tr_9f21', corr: 'ch_3QK9dR2eZ', goRoute: 'streams', entity: 'stream payment-events', url: '/streams/payment-events?tab=deliveries', halted: true }),
+        ],
+      },
+      {
+        id: 'ch_9M2xB7pQr', method: 'POST', route: '/webhooks/stripe', tone: 'destructive', time: '13:37:12', chips: '⚡1 ⛓1', halted: true, verdict: 'halted',
+        nodes: [
+          P('http', '↓', 'POST /webhooks/stripe', 'ingress · 200', 'completed', '200', '{ "type": "charge.succeeded", "data": { "object": { "id": "ch_9M2xB7pQr" } } }', { owner: 'web', trace: 'tr_8b04', corr: 'ch_9M2xB7pQr' }),
+          P('trigger', '⚡', 'trigger webhook.payment', 'event evt_2109 · 1 action', 'completed', 'PROCESSED', '{ "eventId": "evt_2109", "correlationId": "ch_9M2xB7pQr" }', { owner: 'triggers', trace: 'tr_8b04', corr: 'ch_9M2xB7pQr', goRoute: 'triggers', entity: 'trigger event evt_2109', url: '/triggers/webhook.payment/events/evt_2109' }),
+          P('saga', '⤿', 'saga PaymentWebhookSaga', 'step 1 of 4 — charge rejected', 'failed', 'FAILED · HALTED', '{ "correlationId": "ch_9M2xB7pQr", "error": "E_CARD_DECLINED", "step": "charge" }', { owner: 'sagas', trace: 'tr_8b04', corr: 'ch_9M2xB7pQr', goRoute: 'sagas', entity: 'saga instance ch_9M2xB7pQr', url: '/sagas/PaymentWebhookSaga/ch_9M2xB7pQr', halted: true }),
+        ],
+      },
+      {
+        id: 'ch_5TzW1kL8v', method: 'POST', route: '/webhooks/stripe', tone: 'success', time: '13:04:50', chips: '⚡1 ⛓1 ⚙1 ≋1', verdict: 'completed',
+        nodes: [
+          P('http', '↓', 'POST /webhooks/stripe', 'ingress · 200', 'completed', '200', '{ "type": "charge.succeeded", "data": { "object": { "id": "ch_5TzW1kL8v" } } }', { owner: 'web', trace: 'tr_71c9', corr: 'ch_5TzW1kL8v' }),
+          P('trigger', '⚡', 'trigger webhook.payment', 'event evt_1987 · 2 actions', 'completed', 'PROCESSED', '{ "eventId": "evt_1987", "correlationId": "ch_5TzW1kL8v", "actions": 2 }', { owner: 'triggers', trace: 'tr_71c9', corr: 'ch_5TzW1kL8v', goRoute: 'triggers', entity: 'trigger event evt_1987', url: '/triggers/webhook.payment/events/evt_1987' }),
+          P('saga', '⤿', 'saga PaymentWebhookSaga', 'step 4 of 4 — committed', 'completed', 'COMPLETED', '{ "correlationId": "ch_5TzW1kL8v", "state": "committed" }', { owner: 'sagas', trace: 'tr_71c9', corr: 'ch_5TzW1kL8v', goRoute: 'sagas', entity: 'saga instance ch_5TzW1kL8v', url: '/sagas/PaymentWebhookSaga/ch_5TzW1kL8v' }),
+          P('worker', '⚙', 'job reserve-inventory', 'attempt 1 of 3', 'completed', 'COMPLETED · 214ms', '{ "executionId": "job_4102", "attempt": 1 }', { owner: 'workers', queue: 'inventory', trace: 'tr_71c9', corr: 'ch_5TzW1kL8v', goRoute: 'workers', entity: 'execution job_4102', url: '/workers/jobs/reserve-inventory/executions/job_4102' }),
+          P('stream', '≋', 'stream payment-events', 'fan-out · msg_84a', 'completed', '3/3 DELIVERED', '{ "messageId": "msg_84a", "delivered": 3 }', { owner: 'streams', topic: 'payment-events', trace: 'tr_71c9', corr: 'ch_5TzW1kL8v', goRoute: 'streams', entity: 'stream payment-events', url: '/streams/payment-events?tab=deliveries' }),
+        ],
+      },
+    ];
+  }
+
+  buildFlowAssist(kind, node, flow, go) {
+    const meta = 'ops-model-large \u00b7 grounded in listExecutionsByCorrelationId + getInstanceHistory \u00b7 14:03';
+    if (kind === 'fix') {
+      return {
+        head: 'Draft a fix',
+        summary: 'Re-run reserve-inventory on the durable queue. The last two attempts failed on a redis pool timeout (E_TIMEOUT); a queue-backed re-run picks up once the pool recovers and lands in the executions feed.',
+        grounding: [
+          { label: 'execution job_4183', go: () => this.nav('workers') },
+          { label: 'override v43', go: go('runtime') },
+        ],
+        actionLabel: 'Re-run job\u2026', actionClass: 'ns-btn ns-btn--primary ns-btn--sm',
+        action: () => this.askConfirm({
+          title: 'Re-run reserve-inventory',
+          desc: 'Enqueues a fresh execution on the durable queue \u2014 lands in the executions feed like any other run.',
+          from: 'reserve-inventory \u00b7 attempt 2 of 3 \u00b7 retrying', to: 're-run enqueued',
+          cli: 'netscript workers trigger reserve-inventory', action: 'Re-run job',
+          toast: 'Execution enqueued \u2014 watch the live feed',
+        }),
+        meta,
+      };
+    }
+    if (kind === 'compare') {
+      return {
+        head: 'Compare with last success',
+        summary: 'The last green run ch_5TzW1kL8v took the same path in 214 ms with 3/3 delivered. The only delta is the redis pool timeout on attempt 2 of reserve-inventory \u2014 everything upstream is identical.',
+        grounding: [ { label: 'ch_5TzW1kL8v', go: () => this.setState({ s13Sel: 'ch_5TzW1kL8v', s13Node: 0, s13AssistKind: null }) } ],
+        actionLabel: 'Open ch_5TzW1kL8v \u2192', actionClass: 'ns-btn ns-btn--secondary ns-btn--sm',
+        action: () => this.setState({ s13Sel: 'ch_5TzW1kL8v', s13Node: 0, s13AssistKind: null }),
+        meta,
+      };
+    }
+    return {
+      head: 'Explain this failure',
+      summary: 'The analytics subscriber timed out, so payment-events msg_88f delivered to 2 of 3. Root cause is upstream: reserve-inventory (job_4183) is retrying on a redis pool timeout, which put PaymentWebhookSaga into compensating.',
+      grounding: [
+        { label: 'execution job_4183', go: () => this.nav('workers') },
+        { label: 'saga ch_3QK9dR2eZ', go: () => this.nav('sagas') },
+      ],
+      actionLabel: 'Open the failing execution \u2192', actionClass: 'ns-btn ns-btn--secondary ns-btn--sm',
+      action: () => this.nav('workers'),
+      meta,
+    };
+  }
+
+  componentDidMount() {
+    // Restore the complete address (entity hierarchy + query-owned view state), not
+    // merely a flat screen token. Hash paths keep the single-file prototype portable.
+    try {
+      this.syncLocation();
+      if (localStorage.getItem('ns-dash-theme') === 'dark') { document.documentElement.dataset.theme = 'dark'; this.setState({ dark: true }); }
+    } catch (e) {}
+    this._keys = (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); this.setCmdk(!this.state.cmdkOpen); return; }
+      if (!this.state.cmdkOpen) return;
+      if (e.key === 'ArrowDown') { e.preventDefault(); this.setState(s => ({ cmdkIdx: Math.min(s.cmdkIdx + 1, this.filteredCmds().length - 1) })); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); this.setState(s => ({ cmdkIdx: Math.max(s.cmdkIdx - 1, 0) })); }
+      else if (e.key === 'Enter') { e.preventDefault(); const c = this.filteredCmds()[this.state.cmdkIdx]; if (c) this.runCmd(c); }
+      else if (e.key === 'Escape') { this.setCmdk(false); }
+    };
+    window.addEventListener('keydown', this._keys);
+    this._location = () => this.syncLocation();
+    window.addEventListener('hashchange', this._location);
+    window.addEventListener('popstate', this._location);
+    this._resize = () => { if (this.state.route === 'config') this.measureEdges(); if (this.state.route === 'sagas') this.measureSagaEdges(); };
+    window.addEventListener('resize', this._resize);
+    this.startSim();
+    requestAnimationFrame(() => this.drawSparks());
+    // cmdk input live filter (uncontrolled-friendly)
+    this._input = (e) => {
+      if (e.target && e.target.id === 'ns-cmdk-input') this.setState({ cmdkQ: e.target.value, cmdkIdx: 0 });
+    };
+    document.addEventListener('input', this._input);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('keydown', this._keys);
+    window.removeEventListener('hashchange', this._location);
+    window.removeEventListener('popstate', this._location);
+    window.removeEventListener('resize', this._resize);
+    document.removeEventListener('input', this._input);
+    clearInterval(this._sim);
+    clearInterval(this._edgeT);
+    clearInterval(this._sagaEdgeT);
+    clearTimeout(this._toastT);
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    const dlg = document.getElementById('ns-confirm-dialog');
+    if (dlg) {
+      if (this.state.confirm && !dlg.open) dlg.showModal();
+      if (!this.state.confirm && dlg.open) dlg.close();
+    }
+    const sh = document.getElementById('ns-sheet-dialog');
+    if (sh) {
+      if (!sh._nsCloseWired) { sh._nsCloseWired = true; sh.addEventListener('close', () => { if (this.state.sheet) this.setState({ sheet: null }); }); }
+      if (this.state.sheet && !sh.open) {
+        // right drawer on desktop, bottom sheet on mobile (refs 06 / 11 drawer)
+        const mob = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 640px)').matches;
+        sh.setAttribute('data-side', mob ? 'bottom' : 'right');
+        sh.showModal();
+      }
+      if (!this.state.sheet && sh.open) sh.close();
+    }
+    const ck = document.getElementById('ns-cmdk-dialog');
+    if (ck) {
+      if (this.state.cmdkOpen && !ck.open) { ck.showModal(); const inp = document.getElementById('ns-cmdk-input'); if (inp) { inp.value = ''; inp.focus(); } }
+      if (!this.state.cmdkOpen && ck.open) ck.close();
+    }
+    const ds = document.getElementById('ns-detailsheet-dialog');
+    if (ds) {
+      if (!ds._nsCloseWired) { ds._nsCloseWired = true; ds.addEventListener('close', () => { if (this.state.detailSheet) this.setState({ detailSheet: null }); }); }
+      if (this.state.detailSheet && !ds.open) ds.showModal();
+      if (!this.state.detailSheet && ds.open) ds.close();
+    }
+    if (this.state.route === 'config' && this._lastRoute !== 'config') {
+      this.scheduleEdgeMeasure();
+    }
+    if (this.state.route === 'sagas') {
+      if (this._lastRoute !== 'sagas' || this._lastS8Sel !== this.state.s8Sel) {
+        // route-enter or instance-switch: node cards re-render, re-schedule geometry
+        this.scheduleSagaEdges();
+      } else if (this._lastS8Node !== this.state.s8Node) {
+        // node-select only: recolour the active edges without a full re-schedule
+        this.measureSagaEdges();
+      }
+    }
+    this._lastRoute = this.state.route;
+    this._lastS8Sel = this.state.s8Sel;
+    this._lastS8Node = this.state.s8Node;
+    if ((this.props.simulate ?? true) !== this._simOn) this.startSim();
+    if (this._sparkRaf) cancelAnimationFrame(this._sparkRaf);
+    this._sparkRaf = requestAnimationFrame(() => this.drawSparks());
+  }
+
+  // ---------- live simulation ----------
+  startSim() {
+    clearInterval(this._sim);
+    this._simOn = this.props.simulate ?? true;
+    if (!this._simOn) return;
+    const period = Math.max(2, Math.min(15, this.props.tickSeconds ?? 5)) * 1000;
+    let n = 0;
+    this._sim = setInterval(() => { n++; this.tick(n); }, period);
+  }
+
+  spark(points) {
+    const max = Math.max(...points, 1), min = Math.min(...points, 0);
+    const W = 100, H = 30, pad = 2;
+    const xs = points.map((p, i) => (i / (points.length - 1)) * W);
+    const ys = points.map(p => H - pad - ((p - min) / (max - min || 1)) * (H - pad * 2));
+    const line = xs.map((x, i) => (i ? 'L' : 'M') + x.toFixed(1) + ' ' + ys[i].toFixed(1)).join(' ');
+    return { line, fill: line + ' L ' + W + ' ' + H + ' L 0 ' + H + ' Z' };
+  }
+
+  barHeights(points) {
+    const arr = points && points.length ? points : [1];
+    const max = Math.max(...arr), min = Math.min(...arr);
+    return arr.map(p => {
+      const t = (p - min) / ((max - min) || 1);
+      return Math.max(1, Math.min(20, Math.round(t * 19) + 1));
+    }).map(h => ({ cls: 'ns-spark__col ns-spark__col--h' + h }));
+  }
+
+  // Sparklines are SVG, but their geometry is drawn imperatively post-render
+  // (never via template holes inside a path element, which the runtime does not fill).
+  drawSparks() {
+    const NS = 'http://www.w3.org/2000/svg';
+    const draw = (el, withFill) => {
+      const raw = el.getAttribute('data-series');
+      if (!raw) return;
+      const pts = raw.split(',').map(Number).filter(n => !isNaN(n));
+      if (pts.length < 2) return;
+      const svg = el.matches('svg') ? el : el.querySelector('svg');
+      if (!svg) return;
+      const g = this.spark(pts);
+      let lp = svg.querySelector('path[data-part="line"]');
+      if (!lp) { lp = document.createElementNS(NS, 'path'); lp.setAttribute('data-part', 'line'); }
+      if (withFill) {
+        let fp = svg.querySelector('path[data-part="fill"]');
+        if (!fp) { fp = document.createElementNS(NS, 'path'); fp.setAttribute('data-part', 'fill'); svg.insertBefore(fp, svg.firstChild); }
+        fp.setAttribute('d', g.fill);
+      }
+      lp.setAttribute('d', g.line);
+      svg.appendChild(lp);
+    };
+    document.querySelectorAll('.ns-kpi[data-series]').forEach(el => draw(el, true));
+    document.querySelectorAll('.ns-trend[data-series]').forEach(el => draw(el, false));
+    this.drawGauges();
+    this.drawDonuts();
+    this.drawAreaCharts();
+    this.drawLineCharts();
+    this.drawBarCharts();
+    this.drawStreamsHero();
+  }
+
+  // Streams throughput hero: the area fill/line are drawn by drawAreaCharts; here
+  // we overlay a crosshair + marker dot at data-marker and wire hover so moving the
+  // pointer snaps the crosshair to the nearest sample and updates the value tip.
+  // All geometry is created imperatively — NO SVG {{ }} holes.
+  drawStreamsHero() {
+    const NS = 'http://www.w3.org/2000/svg';
+    document.querySelectorAll('.ns-strhero__chart[data-crosshair]').forEach(el => {
+      const svg = el.querySelector('svg'); if (!svg) return;
+      const pts = (el.getAttribute('data-series') || '').split(',').map(Number).filter(n => !isNaN(n));
+      if (pts.length < 2) return;
+      const vb = (svg.getAttribute('viewBox') || '0 0 300 128').split(' ').map(Number);
+      const W = vb[2] || 300, H = vb[3] || 128, padT = 8, padB = 2;
+      const max = Math.max(...pts), min = Math.min(...pts), span = (max - min) || 1;
+      const xs = pts.map((p, i) => (i / (pts.length - 1 || 1)) * W);
+      const ys = pts.map(p => padT + (1 - (p - min) / span) * (H - padT - padB));
+      const tip = el.querySelector('.ns-strhero__tip');
+      const tipVal = el.querySelector('.ns-strhero__tip-val');
+      const tipX = el.querySelector('.ns-strhero__tip-x');
+      // remove any prior overlay parts (deterministic rebuild)
+      svg.querySelectorAll('[data-part="hero-cross"],[data-part="hero-dot"]').forEach(n => n.remove());
+      const ch = document.createElementNS(NS, 'line'); ch.setAttribute('data-part', 'hero-cross');
+      const dot = document.createElementNS(NS, 'circle'); dot.setAttribute('data-part', 'hero-dot'); dot.setAttribute('r', '3.4');
+      svg.appendChild(ch); svg.appendChild(dot);
+      const place = (i) => {
+        const mx = xs[i], my = ys[i];
+        ch.setAttribute('x1', mx.toFixed(1)); ch.setAttribute('x2', mx.toFixed(1));
+        ch.setAttribute('y1', '0'); ch.setAttribute('y2', String(H));
+        dot.setAttribute('cx', mx.toFixed(1)); dot.setAttribute('cy', my.toFixed(1));
+        if (tip) { tip.style.left = ((mx / W) * 100).toFixed(1) + '%'; tip.style.top = ((my / H) * 100).toFixed(1) + '%'; }
+        if (tipVal) tipVal.textContent = pts[i] + ' msgs/s';
+        if (tipX) tipX.textContent = '−' + ((pts.length - 1 - i) * 5) + 's';
+      };
+      let mi = parseInt(el.getAttribute('data-marker'), 10);
+      if (isNaN(mi)) mi = pts.indexOf(max);
+      place(mi);
+      if (!el._nsHeroWired) {
+        el._nsHeroWired = true;
+        el.addEventListener('pointermove', (ev) => {
+          const r = el.getBoundingClientRect();
+          const frac = Math.max(0, Math.min(1, (ev.clientX - r.left) / (r.width || 1)));
+          place(Math.round(frac * (pts.length - 1)));
+        });
+        el.addEventListener('pointerleave', () => place(mi));
+      }
+    });
+  }
+
+  // Area path geometry over an explicit viewBox (used by the hero throughput card).
+  areaPath(points, W, H, padT, padB) {
+    const arr = points && points.length ? points : [0, 0];
+    const max = Math.max(...arr), min = Math.min(...arr);
+    const span = (max - min) || 1;
+    const xs = arr.map((p, i) => (i / (arr.length - 1 || 1)) * W);
+    const ys = arr.map(p => padT + (1 - (p - min) / span) * (H - padT - padB));
+    const line = xs.map((x, i) => (i ? 'L' : 'M') + x.toFixed(1) + ' ' + ys[i].toFixed(1)).join(' ');
+    return { line, fill: line + ' L ' + W.toFixed(1) + ' ' + H + ' L 0 ' + H + ' Z', xs, ys };
+  }
+
+  // Filled area chart with a faint baseline grid + a dimmer comparison under-area
+  // (Conversion-Rate archetype). All geometry is created imperatively — no holes.
+  drawAreaCharts() {
+    const NS = 'http://www.w3.org/2000/svg';
+    document.querySelectorAll('.ns-areachart[data-series]').forEach(el => {
+      const svg = el.querySelector('svg'); if (!svg) return;
+      const vb = (svg.getAttribute('viewBox') || '0 0 300 96').split(' ').map(Number);
+      const W = vb[2] || 300, H = vb[3] || 96, padT = 8, padB = 2;
+      const pts = (el.getAttribute('data-series') || '').split(',').map(Number).filter(n => !isNaN(n));
+      if (pts.length < 2) return;
+      const cmp = (el.getAttribute('data-compare') || '').split(',').map(Number).filter(n => !isNaN(n));
+      // shared scale across both series so the compare area sits under the main one
+      const all = cmp.length ? pts.concat(cmp) : pts;
+      const max = Math.max(...all), min = Math.min(...all), span = (max - min) || 1;
+      const geom = (a) => {
+        const xs = a.map((p, i) => (i / (a.length - 1 || 1)) * W);
+        const ys = a.map(p => padT + (1 - (p - min) / span) * (H - padT - padB));
+        const line = xs.map((x, i) => (i ? 'L' : 'M') + x.toFixed(1) + ' ' + ys[i].toFixed(1)).join(' ');
+        return { line, fill: line + ' L ' + W.toFixed(1) + ' ' + H + ' L 0 ' + H + ' Z' };
+      };
+      // rebuild content deterministically
+      while (svg.firstChild) svg.removeChild(svg.firstChild);
+      // grid: 3 horizontal rules + 5 vertical rules
+      const grid = document.createElementNS(NS, 'g'); grid.setAttribute('class', 'ns-areachart__grid');
+      for (let r = 1; r <= 3; r++) {
+        const y = (padT + (r / 4) * (H - padT - padB)).toFixed(1);
+        const ln = document.createElementNS(NS, 'line');
+        ln.setAttribute('x1', '0'); ln.setAttribute('x2', String(W)); ln.setAttribute('y1', y); ln.setAttribute('y2', y);
+        grid.appendChild(ln);
+      }
+      for (let c = 1; c <= 5; c++) {
+        const x = ((c / 6) * W).toFixed(1);
+        const ln = document.createElementNS(NS, 'line');
+        ln.setAttribute('x1', x); ln.setAttribute('x2', x); ln.setAttribute('y1', String(padT)); ln.setAttribute('y2', String(H));
+        grid.appendChild(ln);
+      }
+      svg.appendChild(grid);
+      if (cmp.length >= 2) {
+        const gc = geom(cmp);
+        const cf = document.createElementNS(NS, 'path'); cf.setAttribute('data-part', 'compare-fill'); cf.setAttribute('d', gc.fill); svg.appendChild(cf);
+        const cl = document.createElementNS(NS, 'path'); cl.setAttribute('data-part', 'compare-line'); cl.setAttribute('d', gc.line); svg.appendChild(cl);
+      }
+      const g = geom(pts);
+      const fp = document.createElementNS(NS, 'path'); fp.setAttribute('data-part', 'fill'); fp.setAttribute('d', g.fill); svg.appendChild(fp);
+      const lp = document.createElementNS(NS, 'path'); lp.setAttribute('data-part', 'line'); lp.setAttribute('d', g.line); svg.appendChild(lp);
+    });
+  }
+
+  // Line chart with a floating value tooltip on a marker point + crosshair
+  // (Stock-Tracker archetype). Marker sits at the series peak by default.
+  drawLineCharts() {
+    const NS = 'http://www.w3.org/2000/svg';
+    document.querySelectorAll('.ns-linechart[data-series]').forEach(el => {
+      const svg = el.querySelector('svg'); if (!svg) return;
+      const vb = (svg.getAttribute('viewBox') || '0 0 300 120').split(' ').map(Number);
+      const W = vb[2] || 300, H = vb[3] || 120, padT = 14, padB = 6;
+      const pts = (el.getAttribute('data-series') || '').split(',').map(Number).filter(n => !isNaN(n));
+      if (pts.length < 2) return;
+      const g = this.areaPath(pts, W, H, padT, padB);
+      while (svg.firstChild) svg.removeChild(svg.firstChild);
+      // marker index: prefer data-marker, else the peak
+      let mi = parseInt(el.getAttribute('data-marker'), 10);
+      if (isNaN(mi)) { let best = -Infinity; pts.forEach((v, i) => { if (v > best) { best = v; mi = i; } }); }
+      const mx = g.xs[mi], my = g.ys[mi];
+      // crosshair
+      const ch = document.createElementNS(NS, 'line'); ch.setAttribute('data-part', 'crosshair');
+      ch.setAttribute('x1', mx.toFixed(1)); ch.setAttribute('x2', mx.toFixed(1)); ch.setAttribute('y1', my.toFixed(1)); ch.setAttribute('y2', String(H)); svg.appendChild(ch);
+      const lp = document.createElementNS(NS, 'path'); lp.setAttribute('data-part', 'line'); lp.setAttribute('d', g.line); svg.appendChild(lp);
+      const dot = document.createElementNS(NS, 'circle'); dot.setAttribute('data-part', 'dot');
+      dot.setAttribute('cx', mx.toFixed(1)); dot.setAttribute('cy', my.toFixed(1)); dot.setAttribute('r', '3.5'); svg.appendChild(dot);
+      // position the HTML tooltip over the marker
+      const tip = el.querySelector('.ns-linechart__tip');
+      if (tip) { tip.style.left = ((mx / W) * 100).toFixed(1) + '%'; tip.style.top = ((my / H) * 100).toFixed(1) + '%'; }
+    });
+  }
+
+  // Bar chart with value labels on/above bars (Product-Performance archetype).
+  drawBarCharts() {
+    document.querySelectorAll('.ns-barchart[data-series]').forEach(el => {
+      const pts = (el.getAttribute('data-series') || '').split(',').map(Number).filter(n => !isNaN(n));
+      if (!pts.length) return;
+      const max = Math.max(...pts, 1);
+      const bars = el.querySelectorAll('.ns-barchart__bar');
+      bars.forEach((b, i) => {
+        const v = pts[i] ?? 0;
+        const fill = b.querySelector('.ns-barchart__fill');
+        if (fill) fill.style.height = Math.max(4, (v / max) * 100).toFixed(1) + '%';
+      });
+    });
+  }
+
+  // Radial semi-donut gauges. Geometry is a conic-gradient set imperatively from
+  // data-value (never a template hole inside a path). The ring is a masked
+  // conic-gradient sweeping 0→180deg for 0→100%.
+  drawGauges() {
+    const toneVar = { success: '--ns-success', warning: '--ns-warning', destructive: '--ns-destructive', primary: '--ns-primary' };
+    document.querySelectorAll('.ns-gauge[data-value]').forEach(el => {
+      const pct = Math.max(0, Math.min(100, parseFloat(el.getAttribute('data-value')) || 0));
+      const ring = el.querySelector('.ns-gauge__ring');
+      if (!ring) return;
+      const tone = el.getAttribute('data-tone') || 'primary';
+      const c = 'var(' + (toneVar[tone] || '--ns-primary') + ')';
+      const track = 'var(--ns-muted)';
+      const deg = (pct / 100) * 180;
+      // Half gauge: draw the bottom-half transparent via the container clip; the
+      // gradient sweeps from -90deg (left) to +90deg (right) over 180deg.
+      ring.style.background = 'conic-gradient(from -90deg, ' + c + ' 0deg ' + deg.toFixed(1) + 'deg, ' + track + ' ' + deg.toFixed(1) + 'deg 180deg, transparent 180deg 360deg)';
+    });
+  }
+
+  // Segmented donut ring via conic-gradient built from data-segments (comma pcts)
+  // and per-segment colors resolved from the sibling legend dots.
+  drawDonuts() {
+    const palette = ['var(--ns-copper-6)', 'var(--ns-teal-5)', 'var(--ns-amber-5)', 'var(--ns-copper-8, var(--ns-copper-7))', 'var(--ns-primary)'];
+    document.querySelectorAll('.ns-donut[data-segments]').forEach(el => {
+      const ring = el.querySelector('.ns-donut__ring');
+      if (!ring) return;
+      const parts = (el.getAttribute('data-segments') || '').split(',').map(Number).filter(n => !isNaN(n));
+      const sum = parts.reduce((a, b) => a + b, 0) || 1;
+      let acc = 0; const stops = [];
+      const gap = 1.4; // deg gap between segments
+      parts.forEach((p, i) => {
+        const from = (acc / sum) * 360;
+        acc += p;
+        const to = (acc / sum) * 360;
+        const col = palette[i % palette.length];
+        stops.push(col + ' ' + (from + (i ? gap : 0)).toFixed(2) + 'deg ' + Math.max(from, to - gap).toFixed(2) + 'deg');
+      });
+      ring.style.background = 'conic-gradient(' + stops.join(', ') + ')';
+    });
+  }
+
+  fmtClock(s) {
+    const p = (x) => String(x).padStart(2, '0');
+    return p(Math.floor(s / 3600)) + ':' + p(Math.floor(s / 60) % 60) + ':' + p(s % 60);
+  }
+
+  pushFeed(key, followKey, pendKey, item) {
+    this.setState(s => {
+      if (s[followKey]) return { [key]: [item, ...s[key]].slice(0, 30) };
+      return { [pendKey]: [item, ...s[pendKey]] };
+    });
+  }
+
+  tick(n) {
+    const dt = Math.max(2, Math.min(15, this.props.tickSeconds ?? 5));
+    this.setState(s => ({ clockS: s.clockS + dt }));
+    const t = this.fmtClock(this.state.clockS + dt);
+    const F = (tone, text) => ({ tone, text, time: t });
+    const mod = n % 5;
+    this.setState(st => ({
+      kpiExec: [...st.kpiExec.slice(1), 18 + ((n * 13) % 15)],
+      kpiFire: [...st.kpiFire.slice(1), 7 + ((n * 5) % 8)],
+      kpiOvr: [...st.kpiOvr.slice(1), (n * 3) % 5],
+    }));
+    if (mod === 0) {
+      const roll = 30 + ((n * 7) % 40);
+      this.pushFeed('s3Feed', 's3Follow', 's3Pending', F('primary', 'flag checkout-v2 → ' + roll + '% rollout'));
+    } else if (mod === 1) {
+      const id = 'job_' + (this.jobSeq++);
+      const ok = n % 3 !== 0;
+      this.pushFeed('s7Feed', 's7Follow', 's7Pending', ok
+        ? F('success', id + ' reserve-inventory COMPLETED · ' + (200 + (n * 37) % 400) + 'ms')
+        : F('warning', id + ' reserve-inventory RUNNING · attempt 2/3'));
+    } else if (mod === 2) {
+      const evt = n % 2
+        ? { id: 'evt_' + (2210 + n), trigger: 'webhook.payment', kind: 'webhook', tone: 'success', status: 'processed', time: t, corr: 'ch_' + (3200 + n * 7) + 'aB',
+            chain: [{ type: 'publishSaga', detail: 'PaymentWebhookReceived → PaymentWebhookSaga', state: 'success', dur: '3ms', link: 'sagas' }] }
+        : { id: 'evt_' + (2210 + n), trigger: 'poll.inventory-sync', kind: 'polling', tone: 'primary', status: 'completed', time: t, corr: (4400 + n) + 'd1c0-uuid',
+            chain: [{ type: 'enqueueJob', detail: 'inventory-sync → job_' + (this.jobSeq++), state: 'success', dur: '2ms', link: 'runs' }] };
+      this.pushFeed('s9Events', 's9Follow', 's9Pending', evt);
+    } else if (mod === 3) {
+      this.setState(s => ({ s10Feed: [F(n % 2 ? 'success' : 'warning', 'payment-events msg_' + (90 + n) + 'f → receipt-worker delivered' + (n % 2 ? '' : ' · attempt 2')), ...s.s10Feed].slice(0, 30) }));
+    } else {
+      // The flow list is the canonical three correlations — stable, no synthetic
+      // fl_* ids. Paused following still accrues a catch-up count for the pill.
+      this.setState(s => (s.s13Follow ? {} : { s13Pending: s.s13Pending + 1 }));
+    }
+  }
+
+  // ---------- infra ----------
+  routeTable() {
+    return [
+      ['/', 'home'],
+      ['/config/nodes/:nodeId', 'config'], ['/config', 'config'],
+      ['/runtime/overrides/:overrideKey', 'runtime'], ['/runtime/versions/:version', 'runtime'], ['/runtime', 'runtime'],
+      ['/catalog/procedures/:procedureId', 'catalog'], ['/catalog', 'catalog'],
+      ['/flow/:correlationId', 'flows'], ['/flow', 'flows'],
+      ['/runs/:correlationId', 'runs'], ['/runs', 'runs'],
+      ['/plugins/:pluginId', 'plugins'], ['/plugins', 'plugins'],
+      ['/workers/jobs/:jobId/executions/:executionId', 'workers'], ['/workers/jobs/:jobId', 'workers'], ['/workers/jobs', 'workers'],
+      ['/workers/tasks/:taskId/executions/:executionId', 'workers'], ['/workers/tasks/:taskId', 'workers'], ['/workers/tasks', 'workers'], ['/workers', 'workers'],
+      ['/sagas/:sagaName/:correlationId', 'sagas'], ['/sagas/:sagaName', 'sagas'], ['/sagas', 'sagas'],
+      ['/triggers/:triggerId/events/:eventId', 'triggers'], ['/triggers/:triggerId', 'triggers'], ['/triggers', 'triggers'],
+      ['/streams/:streamId/subscribers/:subscriberId', 'streams'], ['/streams/:streamId', 'streams'], ['/streams', 'streams'],
+      ['/ai/runs/:runId', 'ai'], ['/ai', 'ai'],
+      ['/migrations/:migrationId', 'migrations'], ['/migrations', 'migrations'],
+      ['/dlq/:queueId/messages/:messageId', 'dlq'], ['/dlq/:queueId', 'dlq'], ['/dlq', 'dlq'],
+      ['/auth/sessions/:sessionId', 'authc'], ['/auth', 'authc'],
+      ['/extensions/:extensionId', 'extensions'], ['/extensions', 'extensions'],
+    ];
+  }
+
+  matchRoute(path) {
+    const clean = ('/' + String(path || '').replace(/^\/+|\/+$/g, '')).replace(/^\/$/, '/');
+    for (const [pattern, route] of this.routeTable()) {
+      const keys = [];
+      const source = pattern === '/' ? '^/$' : '^' + pattern.replace(/:([^/]+)/g, (_, key) => { keys.push(key); return '([^/]+)'; }) + '$';
+      const hit = clean.match(new RegExp(source));
+      if (hit) {
+        const params = {};
+        keys.forEach((key, i) => { params[key] = decodeURIComponent(hit[i + 1]); });
+        return { route, path: clean, params };
+      }
+    }
+    return { route: 'home', path: '/', params: {} };
+  }
+
+  locationState() {
+    const raw = (location.hash || '#/').replace(/^#/, '');
+    const qAt = raw.indexOf('?');
+    const path = qAt < 0 ? raw : raw.slice(0, qAt);
+    const query = new URLSearchParams(qAt < 0 ? '' : raw.slice(qAt + 1));
+    const hit = this.matchRoute(path || '/');
+    const patch = { route: hit.route, path: hit.path, routeParams: hit.params, mobileNav: false, cmdkOpen: false };
+    const q = (key, fallback) => query.has(key) ? query.get(key) : fallback;
+    if (hit.route === 'config' && hit.params.nodeId) patch.s2Sel = hit.params.nodeId;
+    if (hit.route === 'runtime') { patch.s3View = q('view', this.state.s3View); if (hit.params.version) patch.s3OpenVer = hit.params.version; }
+    if (hit.route === 'catalog') patch.s4Tab = q('tab', this.state.s4Tab);
+    if (hit.route === 'plugins' && hit.params.pluginId) patch.s5Sel = hit.params.pluginId;
+    if (hit.route === 'runs') { patch.s6Status = q('status', 'all'); patch.s6Cap = q('capability', 'all'); patch.s6Q = q('q', ''); patch.s6View = q('view', 'all'); patch.s6Sel = q('primitive', this.state.s6Sel); }
+    if (hit.route === 'sagas' && hit.params.correlationId) patch.s8Sel = hit.params.correlationId === 'ch_3QK9dR2eZ' ? 'pw' : this.state.s8Sel;
+    if (hit.route === 'triggers' && hit.params.eventId) patch.s9Open = { ...this.state.s9Open, [hit.params.eventId]: true };
+    if (hit.route === 'streams') { patch.s10Sel = q('message', this.state.s10Sel); patch.s10Tab = q('tab', this.state.s10Tab || 'consume'); }
+    if (hit.route === 'flows') { if (hit.params.correlationId) patch.s13Sel = hit.params.correlationId; patch.s13Route = q('route', 'all'); patch.s13Status = q('status', 'all'); }
+    if (hit.route === 'ai') { if (hit.params.runId) patch.aiSel = hit.params.runId; patch.aiTab = q('tab', 'activity'); }
+    if (hit.route === 'dlq') patch.s12Tab = q('kind', 'queue');
+    if (hit.route === 'extensions') patch.extTab = q('tab', 'panels');
+    return patch;
+  }
+
+  syncLocation() {
+    const patch = this.locationState();
+    this.setState(patch);
+    if (patch.route === 'config') this.scheduleEdgeMeasure();
+    if (patch.route === 'sagas') this.scheduleSagaEdges();
+  }
+
+  pathForRoute(route) {
+    return ({ home: '/', config: '/config', runtime: '/runtime', catalog: '/catalog', plugins: '/plugins', extensions: '/extensions', runs: '/runs', workers: '/workers', sagas: '/sagas', triggers: '/triggers', streams: '/streams', migrations: '/migrations', dlq: '/dlq', flows: '/flow', ai: '/ai', authc: '/auth' })[route] || route || '/';
+  }
+
+  nav(routeOrPath, options) {
+    const target = String(routeOrPath || '/').startsWith('/') ? routeOrPath : this.pathForRoute(routeOrPath);
+    const hit = this.matchRoute(target.split('?')[0]);
+    const hash = '#' + target;
+    try { (options && options.replace ? history.replaceState : history.pushState).call(history, null, '', hash); } catch (e) { location.hash = target; }
+    this.setState({ ...this.locationState(), mobileNav: false, cmdkOpen: false });
+    if (hit.route === 'config') this.scheduleEdgeMeasure();
+    if (hit.route === 'sagas') this.scheduleSagaEdges();
+    const sc = document.querySelector('.ns-dashboard__content');
+    if (sc) sc.scrollTop = 0;
+    window.scrollTo(0, 0);
+  }
+
+  updateQuery(values, statePatch) {
+    const raw = (location.hash || '#/').replace(/^#/, '');
+    const qAt = raw.indexOf('?');
+    const path = qAt < 0 ? raw : raw.slice(0, qAt);
+    const query = new URLSearchParams(qAt < 0 ? '' : raw.slice(qAt + 1));
+    Object.keys(values).forEach(key => {
+      const value = values[key];
+      if (value === null || value === undefined || value === '' || value === 'all' || value === 'activity' || value === 'panels') query.delete(key);
+      else query.set(key, value);
+    });
+    const suffix = query.toString();
+    const target = path + (suffix ? '?' + suffix : '');
+    try { history.pushState(null, '', '#' + target); } catch (e) {}
+    this.setState({ ...(statePatch || {}), path: path });
+  }
+
+  showToast(msg, tone) {
+    clearTimeout(this._toastT);
+    this.setState({ toast: { msg, tone: tone || 'success' } });
+    this._toastT = setTimeout(() => this.setState({ toast: null }), 2800);
+  }
+
+  // In-page section scroll for console tab rows (presentational tabs that
+  // jump to the matching supporting panel — routes/logic unchanged).
+  scrollToSection(id) {
+    try {
+      const el = document.getElementById(id);
+      if (el && el.scrollIntoView) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    } catch (e) {}
+  }
+
+  askConfirm(cfg) { this.setState({ confirm: cfg }); }
+
+  applyConfirm() {
+    const c = this.state.confirm;
+    if (!c || c.status === 'applying') return;
+    this.setState({ confirm: { ...c, status: 'applying' } });
+    setTimeout(() => {
+      try {
+        if (c.apply) c.apply();
+        // Runtime writes also become the newest version step; other mutations still
+        // complete through the same explicit applying → result lifecycle.
+        if (c.feed) {
+          const item = { tone: c.feedTone || 'primary', text: c.feed, time: this.fmtClock(this.state.clockS) };
+          this.setState(s => ({
+            s3Feed: [item, ...s.s3Feed].slice(0, 30),
+            s3VerDyn: [{
+              v: 'v' + s.verSeq, title: c.feed, meta: 'just now · 1 change',
+              diff: [
+                { op: 'ctx', text: 'runtime-config/current → v' + s.verSeq },
+                { op: 'del', text: '- ' + c.from },
+                { op: 'add', text: '+ ' + c.to },
+              ],
+            }, ...s.s3VerDyn].slice(0, 5),
+            verSeq: s.verSeq + 1,
+            s3OpenVer: 'v' + s.verSeq,
+          }));
+        }
+        this.setState({ confirm: null });
+        this.showToast(c.toast || 'Change applied — event landed in the live feed');
+        if (c.resultPath) this.nav(c.resultPath);
+      } catch (error) {
+        this.setState({ confirm: { ...c, status: 'failed', desc: 'Write failed: ' + (error && error.message ? error.message : 'unknown error') + '. Review the CLI and retry.' } });
+      }
+    }, 450);
+  }
+
+  setCmdk(open) { this.setState({ cmdkOpen: open, cmdkQ: '', cmdkIdx: 0 }); }
+
+  // On narrow viewports, a stat/card tap opens a detail bottom sheet; on desktop
+  // it deep-links straight through (the sheet is a mobile affordance, refs 06).
+  openStat(item, navFn) {
+    const mobile = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 640px)').matches;
+    if (mobile) this.setState({ detailSheet: { ...item, go: navFn } });
+    else navFn();
+  }
+  closeDetailSheet() { this.setState({ detailSheet: null }); }
+
+  askAi() {
+    const q = (this.state.aiAsk || '').trim();
+    if (!q || this.state.aiThinking) return;
+    const id = 'chat_' + (312 + (this.state.aiRuns.length));
+    const run = { id, agent: 'ops-copilot', model: 'ops-model-large', status: 'running', time: this.fmtClock(this.state.clockS), tokens: '…', latency: 'streaming', corr: 'ch_3QK9dR2eZ', tools: 0,
+      turns: [{ role: 'user', text: q }] };
+    this.setState(s => ({ aiRuns: [run, ...s.aiRuns], aiSel: id, aiAsk: '', aiThinking: true }));
+    this.nav('/ai/runs/' + encodeURIComponent(id));
+    setTimeout(() => {
+      this.setState(s => ({
+        aiThinking: false,
+        aiRuns: s.aiRuns.map(r => r.id === id ? {
+          ...r, status: 'completed', tokens: '1.9k in · 420 out', latency: '2.2s', tools: 2,
+          turns: [
+            r.turns[0],
+            { role: 'tool', name: 'runtimeConfig.current', state: 'ok', dur: '12ms', input: '{}', output: '{ "version": "v43", "disabledJobs": ["nightly-reconcile", "cache-warm"] }' },
+            { role: 'tool', name: 'workers.executionsByCorrelation', state: 'ok', dur: '94ms', input: '{ "correlationId": "ch_3QK9dR2eZ" }', output: '{ "executions": [{ "jobId": "reserve-inventory", "status": "retrying", "attempt": 2 }] }' },
+            { role: 'assistant', text: 'Grounded answer from live registry state: the redis pool exhaustion is the root cause — job_4183 is retrying (attempt 2/3), PaymentWebhookSaga is compensating step 2, and payment-events is 2/3 delivered. nightly-reconcile is intentionally disabled by override v43, not drifting. Suggested next step: fix redis, then re-check the Live Flow chain for ch_3QK9dR2eZ.' },
+          ],
+        } : r),
+      }));
+    }, 2200);
+  }
+
+  allCmds() {
+    const go = (r) => () => this.nav(r);
+    return [
+      { icon: '◎', label: 'Go to Run Inspector', kind: 'nav', run: go('runs') },
+      { icon: '⇶', label: 'Go to Live Flow', kind: 'nav', run: go('flows') },
+      { icon: '⧉', label: 'Go to Runtime Config', kind: 'nav', run: go('runtime') },
+      { icon: '⊹', label: 'Go to Config Resolution', kind: 'nav', run: go('config') },
+      { icon: '▤', label: 'Go to Catalog', kind: 'nav', run: go('catalog') },
+      { icon: '❖', label: 'Go to Plugins', kind: 'nav', run: go('plugins') },
+      { icon: '⚙', label: 'Go to Workers console', kind: 'nav', run: go('workers') },
+      { icon: '⤿', label: 'Go to Sagas console', kind: 'nav', run: go('sagas') },
+      { icon: '⚡', label: 'Go to Triggers console', kind: 'nav', run: go('triggers') },
+      { icon: '≋', label: 'Go to Streams console', kind: 'nav', run: go('streams') },
+      { icon: '⛁', label: 'View pending migrations', kind: 'nav', run: go('migrations') },
+      { icon: '⊗', label: 'Go to Dead-Letter Queues', kind: 'nav', run: go('dlq') },
+      { icon: '✦', label: 'Ask AI about my app', kind: 'ai', run: () => { this.setCmdk(false); this.nav('ai'); setTimeout(() => { const el = document.getElementById('ns-ai-ask'); if (el) el.focus(); }, 300); } },
+      { icon: '✦', label: 'Go to AI Agents console', kind: 'nav', run: go('ai') },
+      { icon: '↗', label: 'Open Aspire dashboard', kind: 'external', run: () => { this.setCmdk(false); this.showToast('Would open http://localhost:18888 (Aspire)', 'info'); } },
+      { icon: '⚕', label: 'Run plugin doctor', kind: 'action', run: () => { this.nav('plugins'); this.setState({ s5ShowCli: true }); } },
+      { icon: '◐', label: 'Toggle theme', kind: 'action', run: () => { this.setCmdk(false); this.toggleTheme(); } },
+    ];
+  }
+
+  filteredCmds() {
+    const q = this.state.cmdkQ.trim().toLowerCase();
+    return this.allCmds().filter(c => !q || c.label.toLowerCase().includes(q));
+  }
+
+  runCmd(c) { c.run(); if (c.kind === 'nav') this.setCmdk(false); }
+
+  toggleTheme() {
+    this.setState(s => {
+      const dark = !s.dark;
+      if (dark) document.documentElement.dataset.theme = 'dark';
+      else delete document.documentElement.dataset.theme;
+      try { localStorage.setItem('ns-dash-theme', dark ? 'dark' : 'light'); } catch (e) {}
+      return { dark };
+    });
+  }
+
+  // Saga graph canvas edges — same measured-geometry pattern as measureEdges:
+  // read node getBoundingClientRect()s post-mount and draw bezier connectors +
+  // floating branch labels into the SVG layer. NO SVG {{ }} holes. Recomputed
+  // on resize / instance-switch / node-select.
+  scheduleSagaEdges() {
+    let tries = 0;
+    clearInterval(this._sagaEdgeT);
+    this._sagaEdgeT = setInterval(() => {
+      tries++;
+      const canvas = document.getElementById('ns-sgc-canvas');
+      const ready = canvas && canvas.querySelectorAll('[data-node]').length >= 2;
+      if (ready) this.measureSagaEdges();
+      const svg = document.getElementById('ns-sgc-edges');
+      const drawn = svg && svg.childElementCount > 0;
+      if ((ready && drawn) || tries > 22 || this.state.route !== 'sagas') clearInterval(this._sagaEdgeT);
+    }, 80);
+  }
+
+  measureSagaEdges() {
+    const canvas = document.getElementById('ns-sgc-canvas');
+    const svg = document.getElementById('ns-sgc-edges');
+    if (!canvas || !svg) return;
+    const cr = canvas.getBoundingClientRect();
+    while (svg.firstChild) svg.removeChild(svg.firstChild);
+    // the definition mini-map is independent of connector geometry — draw it at any
+    // width (on mobile the canvas stacks but the mini-map still folds in as a block)
+    this.drawSagaMinimap(this._sagaMachine || {}, this.state.s8Node);
+    // below ~640px the graph stacks to one column — no edge geometry to draw
+    if (cr.width < 640) { svg.removeAttribute('viewBox'); return; }
+    svg.setAttribute('viewBox', '0 0 ' + cr.width + ' ' + cr.height);
+    svg.setAttribute('width', cr.width); svg.setAttribute('height', cr.height);
+    const NS = 'http://www.w3.org/2000/svg';
+    const rect = (id) => {
+      const el = canvas.querySelector('[data-node="' + id + '"]');
+      if (!el) return null;
+      const r = el.getBoundingClientRect();
+      return { x: r.left - cr.left, y: r.top - cr.top, w: r.width, h: r.height };
+    };
+    const m = this._sagaMachine || {};
+    const fwd = m.forward || [];
+    const comp = m.hasComp ? (m.comp || []) : [];
+    const sel = this.state.s8Node;
+    const arrow = (x, y, dir, kind, active) => {
+      // dir: 'r' right, 'l' left, 'd' down. A small filled triangle.
+      const p = document.createElementNS(NS, 'path');
+      p.setAttribute('class', 'ns-sgc__edge-arrow');
+      if (kind) p.setAttribute('data-lane', kind);
+      if (active) p.setAttribute('data-state', 'active');
+      const s = 5;
+      let d;
+      if (dir === 'r') d = 'M ' + x + ' ' + y + ' l -' + (s + 1) + ' -' + s + ' l 0 ' + (2 * s) + ' z';
+      else if (dir === 'l') d = 'M ' + x + ' ' + y + ' l ' + (s + 1) + ' -' + s + ' l 0 ' + (2 * s) + ' z';
+      else d = 'M ' + x + ' ' + y + ' l -' + s + ' -' + (s + 1) + ' l ' + (2 * s) + ' 0 z';
+      p.setAttribute('d', d);
+      svg.appendChild(p);
+    };
+    const label = (x, y, text, kind, active) => {
+      if (!text) return;
+      const t = document.createElementNS(NS, 'text');
+      t.setAttribute('class', 'ns-sgc__edge-label');
+      if (kind) t.setAttribute('data-lane', kind);
+      if (active) t.setAttribute('data-state', 'active');
+      t.setAttribute('x', String(x)); t.setAttribute('y', String(y));
+      t.setAttribute('text-anchor', 'middle');
+      t.textContent = text;
+      // backing chip so the label reads over dots + connectors
+      const bg = document.createElementNS(NS, 'rect');
+      bg.setAttribute('class', 'ns-sgc__edge-labelbg');
+      svg.appendChild(bg); svg.appendChild(t);
+      const bb = t.getBBox();
+      bg.setAttribute('x', String(bb.x - 4)); bg.setAttribute('y', String(bb.y - 2));
+      bg.setAttribute('width', String(bb.width + 8)); bg.setAttribute('height', String(bb.height + 4));
+      bg.setAttribute('rx', '4');
+    };
+    const edge = (d, kind, active) => {
+      const p = document.createElementNS(NS, 'path');
+      p.setAttribute('class', 'ns-sgc__edge');
+      if (kind) p.setAttribute('data-lane', kind);
+      if (active) p.setAttribute('data-state', 'active');
+      p.setAttribute('d', d);
+      svg.appendChild(p);
+    };
+    // rich edge annotation on a wire (ref-21 labeled connectors): a small card
+    // carrying the branch label, an error BADGE, and a payload snippet — so the
+    // canvas itself explains WHY compensation fired. Drawn as grouped SVG rects+text.
+    const annoCard = (cx, cy, title, badge, payload, active) => {
+      const g = document.createElementNS(NS, 'g');
+      g.setAttribute('class', 'ns-sgc__anno'); if (active) g.setAttribute('data-state', 'active');
+      const box = document.createElementNS(NS, 'rect'); box.setAttribute('class', 'ns-sgc__anno-box');
+      const tEl = document.createElementNS(NS, 'text'); tEl.setAttribute('class', 'ns-sgc__anno-title');
+      tEl.setAttribute('x', String(cx)); tEl.setAttribute('y', String(cy - 4)); tEl.setAttribute('text-anchor', 'middle'); tEl.textContent = title;
+      const pEl = document.createElementNS(NS, 'text'); pEl.setAttribute('class', 'ns-sgc__anno-pay');
+      pEl.setAttribute('x', String(cx)); pEl.setAttribute('y', String(cy + 9)); pEl.setAttribute('text-anchor', 'middle'); pEl.textContent = payload || '';
+      svg.appendChild(g); g.appendChild(box); g.appendChild(tEl); if (payload) g.appendChild(pEl);
+      // size the card to its text (fall back to char-count estimate if metrics unavailable)
+      const est = (s) => (s ? s.length * 6.2 : 0);
+      let w = Math.max(tEl.getComputedTextLength ? tEl.getComputedTextLength() : 0, est(title));
+      if (payload) w = Math.max(w, pEl.getComputedTextLength ? pEl.getComputedTextLength() : 0, est(payload));
+      w = Math.max(w + 22, 130); const h = payload ? 32 : 20;
+      box.setAttribute('x', String(cx - w / 2)); box.setAttribute('y', String(cy - h / 2 - 3));
+      box.setAttribute('width', String(w)); box.setAttribute('height', String(h)); box.setAttribute('rx', '6');
+      if (badge) {
+        const bg2 = document.createElementNS(NS, 'rect'); bg2.setAttribute('class', 'ns-sgc__anno-badge');
+        const bt = document.createElementNS(NS, 'text'); bt.setAttribute('class', 'ns-sgc__anno-badge-t');
+        bt.setAttribute('text-anchor', 'middle'); bt.textContent = badge;
+        g.appendChild(bg2); g.appendChild(bt);
+        const bw = (bt.getComputedTextLength ? bt.getComputedTextLength() : 48) + 12;
+        const bx = cx, by = cy - h / 2 - 12;
+        bt.setAttribute('x', String(bx)); bt.setAttribute('y', String(by + 4));
+        bg2.setAttribute('x', String(bx - bw / 2)); bg2.setAttribute('y', String(by - 6));
+        bg2.setAttribute('width', String(bw)); bg2.setAttribute('height', '15'); bg2.setAttribute('rx', '7');
+      }
+    };
+    // forward lane: node[i] right-edge → node[i+1] left-edge, arrow pointing right
+    for (let i = 0; i < fwd.length - 1; i++) {
+      const a = rect(fwd[i].id), b = rect(fwd[i + 1].id);
+      if (!a || !b) continue;
+      const x1 = a.x + a.w, y1 = a.y + a.h / 2, x2 = b.x, y2 = b.y + b.h / 2;
+      const mx = (x1 + x2) / 2;
+      const active = (fwd[i].id === sel || fwd[i + 1].id === sel);
+      edge('M ' + x1 + ' ' + y1 + ' C ' + mx + ' ' + y1 + ', ' + mx + ' ' + y2 + ', ' + (x2 - 7) + ' ' + y2, null, active);
+      arrow(x2 - 1, y2, 'r', null, active);
+      label((x1 + x2) / 2, Math.min(y1, y2) - 9, fwd[i].edge, null, active);
+    }
+    // pin the compensation lane tag + its health stat-strip above the rollback row
+    const compTag = document.getElementById('ns-sgc-comptag');
+    const compStat = document.getElementById('ns-sgc-compstat');
+    if (comp.length) {
+      const b0 = rect(comp[0].id);
+      if (b0) {
+        // stack the lane tag above its (slim) health strip in the gap over the rollback row
+        if (compStat) compStat.style.top = Math.max(0, b0.y - 28) + 'px';
+        if (compTag) compTag.style.top = Math.max(0, b0.y - 52) + 'px';
+      }
+    }
+    // cross edge: forward crossFrom node bottom → first comp node top (drop into rollback)
+    if (comp.length && m.crossFrom) {
+      const a = rect(m.crossFrom), b = rect(comp[0].id);
+      if (a && b) {
+        const x1 = a.x + a.w / 2, y1 = a.y + a.h, x2 = b.x + b.w / 2, y2 = b.y;
+        const my = (y1 + y2) / 2;
+        const active = (m.crossFrom === sel || comp[0].id === sel);
+        edge('M ' + x1 + ' ' + y1 + ' C ' + x1 + ' ' + my + ', ' + x2 + ' ' + my + ', ' + x2 + ' ' + (y2 - 7), 'cross', active);
+        arrow(x2, y2 - 1, 'd', 'cross', active);
+        // rich annotation on the failing→compensating wire (payload + error badge)
+        if (m.crossAnno) annoCard((x1 + x2) / 2, my + 2, m.crossEdge, m.crossAnno.badge, m.crossAnno.payload, active);
+        else label((x1 + x2) / 2, my + 3, m.crossEdge, 'cross', active);
+      }
+    }
+    // compensation lane: reverse-direction dashed connectors between comp nodes.
+    // Visually the rollback settles back, so arrows point LEFT (toward the earlier column).
+    for (let i = 0; i < comp.length - 1; i++) {
+      const a = rect(comp[i].id), b = rect(comp[i + 1].id);
+      if (!a || !b) continue;
+      // comp[i] is at an earlier column than comp[i+1]; connect right-edge→left-edge
+      const aRight = a.x + a.w <= b.x;
+      const x1 = aRight ? a.x + a.w : a.x, y1 = a.y + a.h / 2;
+      const x2 = aRight ? b.x : b.x + b.w, y2 = b.y + b.h / 2;
+      const mx = (x1 + x2) / 2;
+      const active = (comp[i].id === sel || comp[i + 1].id === sel);
+      edge('M ' + x1 + ' ' + y1 + ' C ' + mx + ' ' + y1 + ', ' + mx + ' ' + y2 + ', ' + (aRight ? x2 - 7 : x2 + 7) + ' ' + y2, 'comp', active);
+      arrow(aRight ? x2 - 1 : x2 + 1, y2, aRight ? 'r' : 'l', 'comp', active);
+      label((x1 + x2) / 2, Math.min(y1, y2) - 9, comp[i].edge, 'comp', active);
+    }
+  }
+
+  // Definition mini-map: a compact thumbnail of the FULL saga definition topology
+  // docked bottom-right of the canvas, with the current instance path overlaid in
+  // teal (forward) / amber (compensation). Drawn post-mount into its own SVG from
+  // the machine `def` — data-driven, recomputed alongside the connectors.
+  drawSagaMinimap(m, sel) {
+    const svg = document.getElementById('ns-sgc-minimap');
+    if (!svg) return;
+    while (svg.firstChild) svg.removeChild(svg.firstChild);
+    const def = m && m.def; if (!def) return;
+    const W = 188, H = 84, NS = 'http://www.w3.org/2000/svg';
+    svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H); svg.setAttribute('width', W); svg.setAttribute('height', H);
+    const rowY = { fwd: H * 0.34, comp: H * 0.74 };
+    const pathSet = new Set(def.path || []);
+    const pos = {};
+    (def.fwd || []).forEach(([id, nx]) => { pos[id] = { x: 10 + nx * (W - 20), y: rowY.fwd, lane: 'fwd' }; });
+    (def.comp || []).forEach(([id, nx]) => { pos[id] = { x: 10 + nx * (W - 20), y: rowY.comp, lane: 'comp' }; });
+    const line = (a, b, cls) => {
+      if (!a || !b) return;
+      const l = document.createElementNS(NS, 'path'); l.setAttribute('class', cls);
+      const my = (a.y + b.y) / 2;
+      l.setAttribute('d', a.y === b.y ? ('M ' + a.x + ' ' + a.y + ' L ' + b.x + ' ' + b.y)
+        : ('M ' + a.x + ' ' + a.y + ' C ' + a.x + ' ' + my + ', ' + b.x + ' ' + my + ', ' + b.x + ' ' + b.y));
+      svg.appendChild(l);
+    };
+    // forward chain edges
+    const fwdIds = (def.fwd || []).map(f => f[0]);
+    for (let i = 0; i < fwdIds.length - 1; i++) {
+      const onPath = pathSet.has(fwdIds[i]) && pathSet.has(fwdIds[i + 1]);
+      line(pos[fwdIds[i]], pos[fwdIds[i + 1]], 'ns-sgc__mm-edge' + (onPath ? ' ns-sgc__mm-edge--active' : ''));
+    }
+    // comp chain edges
+    const compIds = (def.comp || []).map(c => c[0]);
+    for (let i = 0; i < compIds.length - 1; i++) {
+      const onPath = pathSet.has(compIds[i]) && pathSet.has(compIds[i + 1]);
+      line(pos[compIds[i]], pos[compIds[i + 1]], 'ns-sgc__mm-edge ns-sgc__mm-edge--comp' + (onPath ? ' ns-sgc__mm-edge--active' : ''));
+    }
+    // cross edge (forward → comp)
+    if (def.cross && pos[def.cross[0]] && pos[def.cross[1]]) {
+      const onPath = pathSet.has(def.cross[0]) && pathSet.has(def.cross[1]);
+      line(pos[def.cross[0]], pos[def.cross[1]], 'ns-sgc__mm-edge ns-sgc__mm-edge--comp' + (onPath ? ' ns-sgc__mm-edge--active' : ''));
+    }
+    // nodes
+    Object.keys(pos).forEach((id) => {
+      const p = pos[id];
+      const c = document.createElementNS(NS, 'circle');
+      c.setAttribute('cx', String(p.x)); c.setAttribute('cy', String(p.y)); c.setAttribute('r', pathSet.has(id) ? '4' : '3');
+      let cls = 'ns-sgc__mm-node ns-sgc__mm-node--' + p.lane;
+      if (pathSet.has(id)) cls += ' ns-sgc__mm-node--active';
+      if (id === sel) cls += ' ns-sgc__mm-node--sel';
+      c.setAttribute('class', cls);
+      svg.appendChild(c);
+    });
+  }
+
+  s5NewPlugin() {
+    this.askConfirm({
+      title: 'Create plugin from template',
+      desc: 'Scaffolds a new NetScript plugin from an archetype template — generated files, wired config, and CLI + dashboard contribution stubs.',
+      from: 'archetype: capability-plugin', to: 'my-plugin',
+      cli: 'netscript plugin new my-plugin', action: 'Create plugin',
+      toast: 'Plugin scaffolded — open it to develop your panel',
+    });
+  }
+
+  // ---------- S2 wiring graph ----------
+  s2NodeDefs() {
+    return [
+      { id: 'trig-cron', kind: 'triggers', icon: '⚡', name: 'cron.nightly-reconcile', coverage: 'ok', backend: 'scheduler', mode: 'persistent', plugin: 'triggers', ep: { pub: 0, auth: 0, priv: 1 }, res: ['cron 0 2 * * *'] },
+      { id: 'trig-webhook', kind: 'triggers', icon: '⚡', name: 'webhook.payment', coverage: 'ok', backend: 'http ingress', mode: 'at-least-once', plugin: 'triggers', ep: { pub: 1, auth: 0, priv: 0 }, res: ['ingress /webhooks/payment'] },
+      { id: 'saga-order', kind: 'sagas', icon: '⤿', name: 'sagas:PaymentWebhookSaga', coverage: 'ok', backend: 'postgres', mode: 'durable', plugin: 'sagas', ep: { pub: 2, auth: 1, priv: 2 }, res: ['db saga_store', 'outbox'] },
+      { id: 'worker-reserve', kind: 'workers', icon: '⚙', name: 'workers:reserve-inventory', coverage: 'ok', backend: 'kv queue', mode: 'retry ×3', plugin: 'workers', ep: { pub: 4, auth: 0, priv: 2 }, res: ['queue inventory', 'kv executions'] },
+      { id: 'worker-reconcile', kind: 'workers', icon: '⚙', name: 'workers:reconcile', coverage: 'ok', backend: 'kv queue', mode: 'cron 0 2 * * *', plugin: 'workers', ep: { pub: 2, auth: 0, priv: 1 }, res: ['queue reconcile'] },
+      { id: 'stream-pay', kind: 'topic', icon: '≋', name: 'payment-events', coverage: 'unwired', backend: 'durable-streams', mode: '3 subscribers', plugin: 'streams' },
+      { id: 'sub-receipt', kind: 'subscriber', icon: '◇', name: 'receipt-worker', coverage: 'ok', backend: 'subscriber', mode: 'at-least-once', plugin: 'workers', ep: { pub: 0, auth: 0, priv: 1 }, res: [] },
+      { id: 'sub-ledger', kind: 'subscriber', icon: '◇', name: 'ledger-sync', coverage: 'ok', backend: 'subscriber', mode: 'at-least-once', plugin: 'workers', ep: { pub: 0, auth: 0, priv: 1 }, res: [] },
+      { id: 'sub-analytics', kind: 'subscriber', icon: '◇', name: 'analytics', coverage: 'ok', backend: 'subscriber', mode: 'best-effort', plugin: 'streams', ep: { pub: 0, auth: 0, priv: 1 }, res: [] },
+    ];
+  }
+
+  s2EdgeDefs() {
+    return [
+      ['saga-order', 'worker-reserve', 'inventory queue', 'call'], ['trig-cron', 'worker-reconcile', 'reconcile queue', 'call'], ['trig-webhook', 'stream-pay', 'publish', 'pubsub'],
+      ['stream-pay', 'sub-receipt', 'at-least-once', 'pubsub'], ['stream-pay', 'sub-ledger', 'at-least-once', 'pubsub'], ['stream-pay', 'sub-analytics', 'best-effort', 'pubsub'],
+    ];
+  }
+
+  // The four precedence layers, lowest → highest. Ordinal drives the waterfall order.
+  s2LayerDefs() {
+    return [
+      { id: 'framework', ord: 0, label: 'framework default', glyph: '◇', src: '@netscript/core', tone: 'muted' },
+      { id: 'package', ord: 1, label: 'package default', glyph: '◈', src: 'plugin manifest', tone: 'primary' },
+      { id: 'profile', ord: 2, label: 'env · profile', glyph: '⬖', src: 'netscript.config.ts', tone: 'success' },
+      { id: 'override', ord: 3, label: 'runtime override', glyph: '◆', src: 'override store', tone: 'warning' },
+    ];
+  }
+
+  // Effective config keys. Each carries the value CONTRIBUTED at each layer (or null if the
+  // layer is silent). The effective value = the highest-precedence non-null contribution; every
+  // lower non-null contribution is SHADOWED. Fully data-driven — resolution is computed, not hand-set.
+  s2ConfigDefs() {
+    // c(framework, package, profile, override) — null means the layer does not set the key.
+    const L = (framework, pkg, profile, override, src) => ({ framework, package: pkg, profile, override, src });
+    return [
+      { key: 'flags.checkout-v2', ns: 'flags', type: 'rollout', unit: '%',
+        c: L(null, '0', '10', '30', { package: 'sagas/manifest.ts:44', profile: 'netscript.config.ts:71', override: 'override/current:v43' }),
+        note: 'canary flag — override bumped it from the profiled 10% to 30% for the checkout revamp.' },
+      { key: 'jobs.nightly-reconcile.enabled', ns: 'jobs', type: 'boolean',
+        c: L('true', 'true', 'true', 'false', { framework: 'core/defaults.ts:12', package: 'workers/manifest.ts:20', profile: 'netscript.config.ts:88', override: 'override/current:v43' }),
+        note: 'disabled at runtime while the reconcile query is being tuned — reverts on override clear.' },
+      { key: 'tasks.send-receipt.timeoutMs', ns: 'tasks', type: 'duration', unit: 'ms',
+        c: L('30000', '45000', null, '90000', { framework: 'core/defaults.ts:31', package: 'streams/manifest.ts:58', override: 'override/current:v42' }),
+        note: 'receipt delivery is slow against the sandbox gateway; override tripled the package timeout.' },
+      { key: 'workers.reserve-inventory.retries', ns: 'workers', type: 'int',
+        c: L('1', '3', null, null, { framework: 'core/defaults.ts:9', package: 'workers/manifest.ts:16' }),
+        note: 'package default wins — no env or runtime override in play.' },
+      { key: 'streams.payment-events.delivery', ns: 'streams', type: 'enum',
+        c: L('best-effort', 'at-least-once', 'at-least-once', null, { framework: 'core/defaults.ts:40', package: 'streams/manifest.ts:33', profile: 'netscript.config.ts:52' }),
+        note: 'profile re-affirms the package default; no shadow drama, but provenance still lands on the profile.' },
+      { key: 'telemetry.sampleRatio', ns: 'telemetry', type: 'ratio',
+        c: L('0.1', null, '1.0', null, { framework: 'core/defaults.ts:61', profile: 'netscript.config.ts:14' }),
+        note: 'local profile samples everything; framework default of 0.1 is shadowed.' },
+      { key: 'triggers.webhook-payment.auth', ns: 'triggers', type: 'enum',
+        c: L('signature', 'signature', null, null, { framework: 'core/defaults.ts:52', package: 'triggers/manifest.ts:27' }),
+        note: 'framework and package agree — resolves to the framework default with a package echo.' },
+      { key: 'db.pool.max', ns: 'database', type: 'int',
+        c: L('10', null, '20', null, { framework: 'core/defaults.ts:18', profile: 'netscript.config.ts:29' }),
+        note: 'profile widens the pool for the dev Postgres container.' },
+      { key: 'sagas.order.compensation', ns: 'sagas', type: 'enum',
+        c: L('reverse', 'reverse', null, null, { framework: 'core/defaults.ts:47', package: 'sagas/manifest.ts:61' }),
+        note: 'compensation strategy — no override, package echoes the framework default.' },
+    ];
+  }
+
+  scheduleEdgeMeasure() {
+    // Config Resolution no longer renders the stackmap canvas — precedence resolution is
+    // pure CSS/div geometry, so there are no measured SVG edges to draw here. Kept as a
+    // guarded no-op so route wiring that calls it stays inert instead of spinning an interval.
+    clearInterval(this._edgeT);
+  }
+
+  measureEdges() {
+    const canvas = document.getElementById('ns-stackmap-canvas');
+    const svg = document.getElementById('ns-stackmap-edges');
+    if (!canvas || !svg) return;
+    const cr = canvas.getBoundingClientRect();
+    while (svg.firstChild) svg.removeChild(svg.firstChild);
+    // canvas stacks to one column below ~860px — no edge geometry to draw
+    if (cr.width < 860) { svg.removeAttribute('viewBox'); return; }
+    svg.setAttribute('viewBox', '0 0 ' + cr.width + ' ' + cr.height);
+    svg.setAttribute('width', cr.width);
+    svg.setAttribute('height', cr.height);
+    const NS = 'http://www.w3.org/2000/svg';
+    const rect = (id) => {
+      const el = canvas.querySelector('[data-node="' + id + '"]');
+      if (!el) return null;
+      const r = el.getBoundingClientRect();
+      return { x: r.left - cr.left, y: r.top - cr.top, w: r.width, h: r.height };
+    };
+    const sel = this.state.s2Sel;
+    this.s2EdgeDefs().forEach(([a, b, label, flavor]) => {
+      const ra = rect(a), rb = rect(b);
+      if (!ra || !rb) return;
+      const x1 = ra.x + ra.w / 2, y1 = ra.y + ra.h;
+      const x2 = rb.x + rb.w / 2, y2 = rb.y;
+      const my = (y1 + y2) / 2;
+      const active = (a === sel || b === sel);
+      const path = document.createElementNS(NS, 'path');
+      path.setAttribute('class', 'ns-stackmap__edge');
+      path.setAttribute('data-flavor', flavor);
+      if (active) path.setAttribute('data-state', 'active');
+      path.setAttribute('d', 'M ' + x1 + ' ' + y1 + ' C ' + x1 + ' ' + my + ', ' + x2 + ' ' + my + ', ' + x2 + ' ' + y2);
+      svg.appendChild(path);
+      const text = document.createElementNS(NS, 'text');
+      text.setAttribute('class', 'ns-stackmap__edge-label');
+      if (active) text.setAttribute('data-state', 'active');
+      text.setAttribute('x', String((x1 + x2) / 2));
+      text.setAttribute('y', String(my - 4));
+      text.setAttribute('text-anchor', 'middle');
+      text.textContent = label;
+      svg.appendChild(text);
+    });
+  }
+
+  // ---------- render ----------
+  renderVals() {
+    const s = this.state;
+    const scenario = this.props.scenario ?? 'degraded';
+    const healthy = scenario === 'healthy';
+    const badge = (status) => {
+      const m = { completed: 'success', running: 'primary', failed: 'destructive', retrying: 'warning', degraded: 'warning', queued: 'muted', compensating: 'warning', compensated: 'warning', applied: 'success', pending: 'warning', healthy: 'success', drift: 'warning', bound: 'success', unbound: 'warning', ok: 'success', thin: 'warning', disabled: 'muted' };
+      return 'ns-badge ns-badge--' + (m[status] || 'muted');
+    };
+    const go = (r) => () => this.nav(r);
+
+    // ----- nav -----
+    const pendingMig = s.s11Rows.filter(r => r.status === 'pending').length;
+    const NAVG = [
+      { label: 'Overview', items: [
+        ['home', 'Home', '◉', null], ['config', 'Config Resolution', '⊹', { count: '1', tone: 'warning' }], ['runtime', 'Runtime Config', '⧉', { count: '2', tone: 'warning' }], ['catalog', 'Catalog', '▤', { count: '2', tone: 'warning' }], ['flows', 'Live Flow', '⇶', { count: '1', tone: 'primary' }], ['runs', 'Run Inspector', '◎', { count: '9', tone: 'primary' }],
+      ] },
+      { label: 'Capabilities', items: [
+        ['plugins', 'Plugins', '❖', { count: '1', tone: 'warning' }], ['workers', 'Workers', '⚙', { count: '4', tone: 'primary' }], ['sagas', 'Sagas', '⤿', { count: '1', tone: 'warning' }], ['triggers', 'Triggers', '⚡', { count: '21', tone: 'warning' }], ['streams', 'Streams', '≋', { count: '31', tone: 'warning' }],
+      ] },
+      { label: 'Data', items: [
+        ['migrations', 'Migrations', '⛁', { count: String(pendingMig || 0), tone: 'warning' }], ['dlq', 'Dead-Letter Queues', '⊗', { count: '17', tone: 'warning' }], ['authc', 'Auth Sessions', '◐', { count: '2', tone: 'muted' }],
+      ] },
+      { label: 'System', items: [
+        ['ai', 'AI', '✦', { count: '1', tone: 'primary' }], ['extensions', 'Extensions', '◈', { count: '6', tone: 'muted' }],
+      ] },
+    ];
+    const navGroups = NAVG.map(g => ({ label: g.label, items: g.items.map(([id, label, icon, badge]) => ({
+      id, label, icon, go: go(id),
+      ariaCurrent: s.route === id ? 'page' : null,
+      count: (!healthy && badge && badge.count && badge.count !== '0') ? badge.count : null,
+      badgeTone: badge && badge.tone !== 'muted' ? badge.tone : null,
+    })) }));
+
+    const TITLES = { home: 'Home', config: 'Config Resolution', runtime: 'Runtime Config', catalog: 'Catalog', plugins: 'Plugins', extensions: 'Extensions', runs: 'Run Inspector', workers: 'Workers', sagas: 'Sagas', triggers: 'Triggers', streams: 'Streams', migrations: 'Migrations', dlq: 'Dead-Letter Queues', flows: 'Live Flow', ai: 'AI', authc: 'Auth Sessions' };
+    const addr = (location.hash || '#/').replace(/^#/, '');
+    const segments = (s.path === '/' ? [] : s.path.split('/').filter(Boolean));
+    const labelFor = (segment, i) => i === 0 ? ({ flow: 'Live Flow', runs: 'Run Inspector', dlq: 'Dead-Letter Queues', auth: 'Auth Sessions' }[segment] || segment.charAt(0).toUpperCase() + segment.slice(1)) : decodeURIComponent(segment).replace(/-/g, ' ');
+    const crumbs = segments.length === 0
+      ? [{ label: 'Home', current: true, link: false, sep: false, go: () => {} }]
+      : [{ label: 'Home', current: false, link: true, sep: false, go: () => this.nav('/') }, ...segments.map((segment, i) => {
+          const target = '/' + segments.slice(0, i + 1).join('/');
+          const current = i === segments.length - 1;
+          return { label: labelFor(segment, i), current, link: !current, sep: true, go: () => this.nav(target) };
+        })];
+
+    // ----- S1 -----
+    const disabledOverrides = s.jobs3.filter(j => j.disabled).length + s.trigs3.filter(t => t.disabled).length + (s.flags.filter(f => !f.on).length);
+    const pillFor = (tone) => tone === 'warning' ? 'ns-badge--warning' : tone === 'muted' ? 'ns-badge--muted' : 'ns-badge--success';
+    const s1Stats = (healthy ? [
+      { value: '6', icon: '❖', label: 'Plugins loaded', detail: 'all healthy', tone: 'success', pill: 'ok' },
+      { value: '0', icon: '⚕', label: 'Doctor warnings', detail: 'all checks pass', tone: 'success', pill: 'clear' },
+      { value: '0', icon: '⤴', label: 'Unbound routes', detail: 'all routes bound', tone: 'success', pill: 'clear' },
+      { value: '0', icon: '⧉', label: 'Disabled overrides', detail: 'runtime config at defaults', tone: 'success', pill: 'defaults' },
+      { value: '0', icon: '⛁', label: 'Pending migrations', detail: 'schema in sync', tone: 'success', pill: 'synced' },
+      { value: '0', icon: '⚙', label: 'Scheduler drift', detail: 'live scheduler matches config', tone: 'success', pill: 'none' },
+    ] : [
+      { value: '6', icon: '❖', label: 'Plugins loaded', detail: 'workers · sagas · triggers · streams · auth · dashboard', tone: 'success', pill: 'healthy' },
+      { value: '1', icon: '⚕', label: 'Doctor warning', detail: 'triggers: DLQ port degraded — no contract route', tone: 'warning', pill: 'review' },
+      { value: '2', icon: '⤴', label: 'Unbound routes', detail: '/admin/reconcile · /reports', tone: 'warning', pill: 'unbound' },
+      { value: String(disabledOverrides), icon: '⧉', label: 'Disabled overrides', detail: 'jobs · triggers · flags', tone: 'muted', pill: 'active' },
+      { value: String(pendingMig), icon: '⛁', label: 'Pending migration', detail: '20260711_add_delivery_attempts', tone: pendingMig ? 'warning' : 'success', pill: 'pending' },
+      { value: '1', icon: '⚙', label: 'Scheduler drift', detail: 'nightly-reconcile: config ≠ live scheduler', tone: 'warning', pill: 'drift' },
+    ]).map(x => {
+      const dest = x.label.indexOf('Plugin') === 0 || x.label.indexOf('Doctor') === 0 ? 'plugins' : x.label.indexOf('Unbound') === 0 ? 'catalog' : x.label.indexOf('override') > 0 || x.label.indexOf('Disabled') === 0 ? 'runtime' : x.label.indexOf('migration') > 0 || x.label.indexOf('Pending') === 0 ? 'migrations' : 'workers';
+      const navFn = go(dest);
+      const sheet = { eyebrow: 'where to look', icon: x.icon, tone: x.tone, value: x.value, title: x.label,
+        pill: x.pill, pillClass: 'ns-badge ' + pillFor(x.tone), desc: x.detail,
+        cta: 'Open ' + dest, rows: [
+          { k: 'signal', v: x.label }, { k: 'status', v: x.pill }, { k: 'jumps to', v: dest },
+        ] };
+      return { ...x, pillClass: pillFor(x.tone), go: () => this.openStat(sheet, navFn) };
+    });
+    const s1CmdGroups = [
+      { label: 'Navigate', items: [
+        { icon: '◎', label: 'Go to Run Inspector', hint: 'nav', ext: '0', kbd: 'G R', run: go('runs') },
+        { icon: '⛁', label: 'View pending migrations', hint: 'nav', ext: '0', kbd: 'G M', run: go('migrations') },
+      ] },
+      { label: 'Act', items: [
+        { icon: '⚕', label: 'Run plugin doctor', hint: 'action', ext: '0', kbd: '⌘⇧D', run: () => { this.nav('plugins'); this.setState({ s5ShowCli: true }); } },
+        { icon: '↗', label: 'Open Aspire dashboard', hint: 'external', ext: '1', kbd: '⌘O', run: () => this.showToast('Would open http://localhost:18888 (Aspire)', 'info') },
+      ] },
+      { label: 'Recent', items: [
+        { icon: '✦', label: 'Ask about the failing run', hint: 'assist', ext: '0', kbd: '⌘K', run: () => this.setCmdk(true) },
+      ] },
+    ];
+    const s1Teaser = { go: go('flows'), items: [
+      { tone: s.s3Feed[0] ? s.s3Feed[0].tone : 'muted', text: s.s3Feed[0] ? s.s3Feed[0].text : '', entity: 'override', time: s.s3Feed[0] ? s.s3Feed[0].time : '', go: go('runtime') },
+      { tone: s.s7Feed[0] ? s.s7Feed[0].tone : 'muted', text: s.s7Feed[0] ? s.s7Feed[0].text : '', entity: 'execution', time: s.s7Feed[0] ? s.s7Feed[0].time : '', go: go('workers') },
+      { tone: s.s9Events[0] ? s.s9Events[0].tone : 'muted', text: s.s9Events[0] ? s.s9Events[0].trigger + ' · ' + s.s9Events[0].status : '', entity: 'trigger', time: s.s9Events[0] ? s.s9Events[0].time : '', go: go('triggers') },
+    ] };
+    const s1Contribs = [
+      { plugin: 'workers', panel: 'Workers', mount: 'capabilities/workers', icon: '⚙', go: go('workers') },
+      { plugin: 'sagas', panel: 'Sagas', mount: 'capabilities/sagas', icon: '⤿', go: go('sagas') },
+      { plugin: 'triggers', panel: 'Triggers', mount: 'capabilities/triggers', icon: '⚡', go: go('triggers') },
+      { plugin: 'triggers', panel: 'Dead-Letter Queues', mount: 'data/dlq', icon: '⊘', go: go('dlq') },
+      { plugin: 'streams', panel: 'Streams', mount: 'capabilities/streams', icon: '≋', go: go('streams') },
+      { plugin: 'auth', panel: 'Auth Sessions', mount: 'data/auth', icon: '◐', go: go('authc') },
+    ];
+    // ----- S16 Extensions -----
+    const extTierBadge = (t) => 'ns-badge ns-badge--' + (t === 'first-party' ? 'primary' : t === 'verified' ? 'success' : 'muted');
+    const extPanels = [
+      { id: 'workers.console', title: 'Workers', plugin: 'workers', mount: 'capabilities/workers', tier: 'first-party', slots: 'options, actions' },
+      { id: 'sagas.console', title: 'Sagas', plugin: 'sagas', mount: 'capabilities/sagas', tier: 'first-party', slots: 'options, sidebar' },
+      { id: 'triggers.console', title: 'Triggers', plugin: 'triggers', mount: 'capabilities/triggers', tier: 'first-party', slots: 'options, actions' },
+      { id: 'triggers.dlq', title: 'Dead-Letter Queues', plugin: 'triggers', mount: 'data/dlq', tier: 'first-party', slots: 'actions' },
+      { id: 'streams.console', title: 'Streams', plugin: 'streams', mount: 'capabilities/streams', tier: 'first-party', slots: 'options' },
+      { id: 'auth.sessions', title: 'Auth Sessions', plugin: 'auth', mount: 'data/auth', tier: 'first-party', slots: 'sidebar' },
+    ].map(p => { const disabled = !!s.extDisabled[p.id]; return ({ ...p, tierBadge: extTierBadge(p.tier), disabled, actionLabel: disabled ? 'Enable' : 'Disable', open: () => this.nav('/extensions/' + encodeURIComponent(p.id)),
+      toggle: () => this.askConfirm({ title: (disabled ? 'Enable ' : 'Disable ') + p.title + ' panel', desc: 'Changes this contribution in the host registry without affecting the plugin package.', from: p.id + (disabled ? ' = disabled' : ' = enabled'), to: disabled ? 'enabled' : 'disabled', cli: 'netscript plugin ' + (disabled ? 'enable ' : 'disable ') + p.plugin, action: disabled ? 'Enable panel' : 'Disable panel', apply: () => this.setState(st => ({ extDisabled: { ...st.extDisabled, [p.id]: !disabled } })), toast: p.title + ' panel ' + (disabled ? 'enabled' : 'disabled') }) }); });
+    const extActions = [
+      { kind: 'command', icon: '⌕', title: 'Run plugin doctor', plugin: 'triggers', perm: 'reads: doctor checks' },
+      { kind: 'command', icon: '⊗', title: 'Reprocess DLQ', plugin: 'triggers', perm: 'writes: via confirm only' },
+      { kind: 'tool', icon: '✦', title: 'workers.trigger', plugin: 'workers', perm: 'reads: executions · writes: via confirm only' },
+      { kind: 'tool', icon: '✦', title: 'config.overrideSet', plugin: 'runtime-config', perm: 'writes: via confirm only' },
+    ].map(a => ({ ...a, kindBadge: 'ns-badge ns-badge--' + (a.kind === 'tool' ? 'primary' : 'secondary') }));
+    const extInstall = (name) => this.askConfirm({ title: 'Install ' + name, desc: 'Generates and wires the plugin into your project — source files, config, and dashboard contributions.', from: name + ' · not installed', to: 'installed + wired', cli: 'netscript plugin add ' + name, action: 'Install', apply: () => this.setState(st => ({ extInstalled: [...new Set([...st.extInstalled, name])] })), toast: name + ' installed — contributions registered' });
+    const extAvailableRaw = [
+      { id: 'crons', title: 'crons', publisher: 'netscript', desc: 'Adds a schedule namespace, a cron dashboard panel, and ⌘K actions.', quarantine: false, act: () => extInstall('crons'), actLabel: 'Install', actClass: 'ns-btn ns-btn--primary ns-btn--sm' },
+      { id: 'analytics-plus', title: 'analytics-plus', publisher: 'community', desc: 'Delivery-analytics panels. Built for contract v1 — the host is at v2.', quarantine: true, act: () => this.askConfirm({ title: 'Update analytics-plus to contract v2', desc: 'Re-pins the extension to the current contract version and lifts the quarantine hold.', from: 'contract v1 · held', to: 'contract v2 · active', cli: 'netscript plugin update analytics-plus --contract v2', action: 'Update', apply: () => this.setState(st => ({ extInstalled: [...new Set([...st.extInstalled, 'analytics-plus'])] })), toast: 'analytics-plus updated — quarantine lifted', resultPath: '/extensions/analytics-plus' }), actLabel: 'Update & lift hold', actClass: 'ns-btn ns-btn--secondary ns-btn--sm' },
+    ];
+
+    // ===== Derived contribution-manifest model (visual metadata only; copy/logic preserved) =====
+    // width-bucket helper: map a fraction (0..1) → --w0..--w20 (5% steps)
+    const extWCls = (frac) => 'ns-w' + Math.max(0, Math.min(20, Math.round((frac || 0) * 20)));
+    // surface kinds → glyph/label/tone-token (copper/teal/amber only)
+    const SURF = {
+      panel:   { glyph: '▦', label: 'Panels',   short: 'panels',   noun: 'panel' },
+      command: { glyph: '⌘', label: 'Commands', short: 'cmds',     noun: 'command' },
+      tool:    { glyph: '✦', label: 'AI tools', short: 'tools',    noun: 'tool' },
+    };
+    // per-plugin version + source metadata (illustrative visual metadata, consistent with tier)
+    const EXTMETA = {
+      workers:           { version: 'v2.4.0', source: 'netscript', tier: 'first-party' },
+      sagas:             { version: 'v2.4.0', source: 'netscript', tier: 'first-party' },
+      triggers:          { version: 'v2.4.0', source: 'netscript', tier: 'first-party' },
+      streams:           { version: 'v2.4.0', source: 'netscript', tier: 'first-party' },
+      auth:              { version: 'v1.9.2', source: 'netscript', tier: 'first-party' },
+      'runtime-config':  { version: 'v2.4.0', source: 'netscript', tier: 'first-party' },
+    };
+    const tierGlyph = (t) => t === 'first-party' ? '◆' : t === 'verified' ? '✓' : '○';
+    // every contribution (panels + actions), tagged by surface kind
+    const extContribs = [
+      ...extPanels.map(p => ({ kind: 'panel', id: p.id, title: p.title, plugin: p.plugin, tier: p.tier, mount: p.mount, slots: p.slots, perm: 'mounts: ' + p.slots, icon: '▦', disabled: p.disabled, toggle: p.toggle, actionLabel: p.actionLabel })),
+      ...extActions.map(a => ({ kind: a.kind === 'tool' ? 'tool' : 'command', id: a.plugin + '.' + a.title, title: a.title, plugin: a.plugin, tier: (EXTMETA[a.plugin] || {}).tier || 'first-party', mount: a.kind === 'tool' ? '⌘K · AI runtime' : '⌘K palette', slots: a.kind, perm: a.perm, icon: a.icon, disabled: false })),
+    ];
+    // surface-kind roster filter
+    const extSurfFilter = s.extSurf || 'all';
+    // group contributions by provider (the extension)
+    const extProvMap = {};
+    extContribs.forEach(c => { (extProvMap[c.plugin] = extProvMap[c.plugin] || []).push(c); });
+    const extProvOrder = ['workers', 'sagas', 'triggers', 'streams', 'auth', 'runtime-config'];
+    const extProvList = extProvOrder.filter(k => extProvMap[k]).map(plugin => {
+      const items = extProvMap[plugin];
+      const meta = EXTMETA[plugin] || { version: '—', source: 'community', tier: 'community' };
+      const tier = meta.tier;
+      const byKind = { panel: 0, command: 0, tool: 0 };
+      items.forEach(i => { byKind[i.kind] = (byKind[i.kind] || 0) + 1; });
+      const total = items.length;
+      // a provider is disabled only if ALL its panel contributions are disabled and it has panels
+      const panels = items.filter(i => i.kind === 'panel');
+      const enabled = panels.length ? panels.some(p => !p.disabled) : true;
+      // contribution shape bar (segments per surface kind, width ∝ count)
+      const barSegs = ['panel', 'command', 'tool'].filter(k => byKind[k]).map(k => ({ kind: k, wClass: extWCls(byKind[k] / total), title: byKind[k] + ' ' + SURF[k].label.toLowerCase() }));
+      const pips = ['panel', 'command', 'tool'].filter(k => byKind[k]).map(k => ({ kind: k, glyph: SURF[k].glyph, label: '+' + byKind[k] + ' ' + (byKind[k] === 1 ? SURF[k].noun : SURF[k].short) }));
+      return { id: plugin, plugin, name: plugin, version: meta.version, source: meta.source, tier,
+        glyph: tierGlyph(tier), enabled, disabled: !enabled, statusLbl: enabled ? 'enabled' : 'disabled',
+        selState: (s.extSel || 'workers') === plugin ? 'selected' : null,
+        barSegs, pips, byKind, total, items,
+        select: () => { this.setState(st => ({ extSel: plugin, sheet: (typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 900px)').matches) ? 's16' : st.sheet })); },
+      };
+    });
+    // apply surface-kind filter (roster shows only providers that contribute the chosen kind)
+    const extProviders = extProvList.filter(p => extSurfFilter === 'all' || p.byKind[extSurfFilter]);
+    // resolve the selected provider (fallback to first visible)
+    const extSelId = (s.extSel && extProvList.some(p => p.id === s.extSel)) ? s.extSel : (extProviders[0] || extProvList[0]).id;
+    const extSelProv = extProvList.find(p => p.id === extSelId) || extProvList[0];
+    // build the selected extension's full manifest
+    const buildManifest = (prov) => {
+      const groups = ['panel', 'command', 'tool'].filter(k => prov.byKind[k]).map(k => ({
+        kind: k, glyph: SURF[k].glyph, title: SURF[k].label, n: String(prov.byKind[k]),
+        items: prov.items.filter(i => i.kind === k).map(i => ({ icon: i.icon, title: i.title, meta: i.mount, perm: i.perm })),
+      }));
+      const mountSet = Array.from(new Set(prov.items.map(i => i.kind === 'panel' ? i.mount.split('/')[0] : (i.kind === 'tool' ? 'ai-runtime' : 'cmdk'))));
+      const mountMeta = { capabilities: { glyph: '▣', label: 'capabilities/*', kind: 'panel' }, data: { glyph: '▤', label: 'data/*', kind: 'panel' }, cmdk: { glyph: '⌘', label: '⌘K palette', kind: 'command' }, 'ai-runtime': { glyph: '✦', label: 'AI runtime', kind: 'tool' } };
+      const mounts = mountSet.map(m => mountMeta[m] || { glyph: '▦', label: m, kind: 'panel' });
+      const firstPanel = prov.items.find(i => i.kind === 'panel');
+      const anyDisabled = prov.items.some(i => i.kind === 'panel' && i.disabled);
+      const contribSummary = ['panel', 'command', 'tool'].filter(k => prov.byKind[k]).map(k => prov.byKind[k] + ' ' + (prov.byKind[k] === 1 ? SURF[k].noun : SURF[k].short)).join(' · ');
+      return {
+        id: prov.id, name: prov.name, version: prov.version, tier: prov.tier, source: prov.source,
+        glyph: tierGlyph(prov.tier), tierBadge: extTierBadge(prov.tier),
+        enabled: prov.enabled, statusLbl: prov.enabled ? 'enabled' : 'disabled',
+        surfLbl: ['panel', 'command', 'tool'].filter(k => prov.byKind[k]).map(k => SURF[k].label.toLowerCase()).join(' + '),
+        kv: [
+          { k: 'source', v: prov.source, tone: 'str' },
+          { k: 'version', v: prov.version, tone: 'num' },
+          { k: 'trust tier', v: prov.tier, tone: 'primary' },
+          { k: 'contract', v: 'v2 · compatible', tone: 'ok' },
+          { k: 'contributes', v: contribSummary, tone: 'str' },
+        ],
+        groups, mounts,
+        toggle: firstPanel ? firstPanel.toggle : (() => this.askConfirm({ title: (prov.enabled ? 'Disable ' : 'Enable ') + prov.name, desc: 'Changes this extension in the host registry without affecting the plugin package.', from: prov.name + (prov.enabled ? ' = enabled' : ' = disabled'), to: prov.enabled ? 'disabled' : 'enabled', cli: 'netscript plugin ' + (prov.enabled ? 'disable ' : 'enable ') + prov.plugin, action: prov.enabled ? 'Disable' : 'Enable', toast: prov.name + ' ' + (prov.enabled ? 'disabled' : 'enabled') })),
+        toggleClass: prov.enabled ? 'ns-btn ns-btn--secondary' : 'ns-btn ns-btn--primary',
+        actionLabel: prov.enabled ? 'Disable extension' : 'Enable extension',
+        viewPlugin: firstPanel ? firstPanel.toggle && (() => this.nav('/extensions/' + encodeURIComponent(firstPanel.id))) : (() => this.nav('/plugins')),
+      };
+    };
+    const extSel = buildManifest(extSelProv);
+    // header composite metrics
+    const extAllProv = extProvList;
+    const totByKind = { panel: 0, command: 0, tool: 0 };
+    extContribs.forEach(c => { totByKind[c.kind] = (totByKind[c.kind] || 0) + 1; });
+    const totContribs = extContribs.length;
+    const enabledN = extAllProv.filter(p => p.enabled).length;
+    const disabledN = extAllProv.length - enabledN;
+    const tierCount = {};
+    extAllProv.forEach(p => { tierCount[p.tier] = (tierCount[p.tier] || 0) + 1; });
+    const setSurf = (k) => this.setState(st => ({ extSurf: (st.extSurf || 'all') === k ? 'all' : k }));
+    const extHead = {
+      installed: String(extAllProv.length),
+      enabledLbl: enabledN + ' enabled · ' + disabledN + ' disabled',
+      contribLbl: totContribs + ' contributions across ' + Object.keys(totByKind).filter(k => totByKind[k]).length + ' surfaces',
+      surfSegs: ['panel', 'command', 'tool'].filter(k => totByKind[k]).map(k => ({ kind: k, n: String(totByKind[k]), label: SURF[k].label, title: totByKind[k] + ' ' + SURF[k].label.toLowerCase(), wClass: extWCls(totByKind[k] / totContribs), active: extSurfFilter === k ? 'true' : null, filter: () => setSurf(k) })),
+      enabled: String(enabledN), disabled: String(disabledN), enTone: disabledN ? 'warning' : 'ok',
+      enWClass: extWCls(enabledN / Math.max(1, extAllProv.length)),
+      tierChips: Object.keys(tierCount).map(t => ({ tier: t, glyph: tierGlyph(t), label: t, n: String(tierCount[t]) })),
+      compatState: 'hold', compatGlyph: '⚠',
+      compatHead: '1 update held',
+      compatNote: 'analytics-plus built for contract v1 — quarantined at host v2',
+      hostContract: 'v2',
+    };
+    // roster surface-kind filter chips
+    const extSurfChips = [{ kind: 'all', label: 'all', n: String(extAllProv.length) },
+      ...['panel', 'command', 'tool'].filter(k => totByKind[k]).map(k => ({ kind: k, label: SURF[k].label, n: String(extAllProv.filter(p => p.byKind[k]).length) }))]
+      .map(c => ({ ...c, state: (extSurfFilter === c.kind || (c.kind === 'all' && extSurfFilter === 'all')) ? 'active' : null, set: () => this.setState({ extSurf: c.kind }) }));
+    const extProvCount = String(extProviders.length);
+
+    // SURFACES view — contribution lanes grouped by surface kind
+    const extMountHost = { panel: 'capabilities/* · data/*', command: '⌘K palette', tool: 'AI runtime' };
+    const extLanes = ['panel', 'command', 'tool'].filter(k => totByKind[k]).map(k => {
+      const laneItems = extContribs.filter(c => c.kind === k);
+      const provN = new Set(laneItems.map(c => c.plugin)).size;
+      return {
+        kind: k, glyph: SURF[k].glyph, title: SURF[k].label, n: String(totByKind[k]),
+        shareWClass: extWCls(totByKind[k] / totContribs),
+        mountSummary: extMountHost[k],
+        foot: totByKind[k] + ' ' + (totByKind[k] === 1 ? SURF[k].noun : SURF[k].short) + ' from ' + provN + ' provider' + (provN === 1 ? '' : 's'),
+        items: laneItems.map(c => ({ icon: c.icon, title: c.title, plugin: c.plugin, tier: c.tier, meta: c.mount + (c.slots && c.kind === 'panel' ? ' · slots: ' + c.slots : ''), perm: c.perm, permGlyph: /writes/.test(c.perm) ? '✎' : '◎' })),
+      };
+    });
+
+    // AVAILABLE — enrich with compat meter + adds pips (copy/CLIs preserved)
+    const extAvailMeta = {
+      crons: { tier: 'verified', glyph: tierGlyph('verified'), builtFor: 'contract v2', builtOk: 'true', compatFrac: 1, adds: [{ kind: 'panel', glyph: '▦', label: '+1 panel' }, { kind: 'command', glyph: '⌘', label: '+2 cmds' }] },
+      'analytics-plus': { tier: 'community', glyph: tierGlyph('community'), builtFor: 'contract v1', builtOk: 'false', compatFrac: 0.5, adds: [{ kind: 'panel', glyph: '▦', label: '+2 panels' }] },
+    };
+    const extAvailable = extAvailableRaw.map(e => { const m = extAvailMeta[e.id] || {}; return { ...e, tier: m.tier, glyph: m.glyph, builtFor: m.builtFor, builtOk: m.builtOk, compatWClass: extWCls(m.compatFrac), adds: m.adds || [] }; });
+
+    // ----- S2 : Config Resolution (layered-precedence) -----
+    const cfgLayers = this.s2LayerDefs();                 // low → high precedence
+    const cfgDefs = this.s2ConfigDefs();
+    const layerTone = { framework: 'muted', package: 'primary', profile: 'success', override: 'warning' };
+    const layerShort = { framework: 'framework', package: 'package', profile: 'profile', override: 'override' };
+    // value-type inference → drives the DM Mono type colouring so the grid reads as config, not a table.
+    // number/duration/ratio → amber · boolean → copper · string/enum → teal.
+    const cfgValType = (raw) => {
+      if (raw === null || raw === undefined || raw === '—') return 'none';
+      const v = String(raw).trim();
+      if (v === 'true' || v === 'false') return 'bool';
+      if (/^-?\d+(\.\d+)?$/.test(v)) return 'num';
+      return 'str';
+    };
+    // resolve(): compute winning layer + shadow flags for one key definition.
+    const resolve = (def) => {
+      const chain = cfgLayers.map(L => {
+        const v = def.c[L.id];
+        return { ...L, value: v, present: v !== null && v !== undefined,
+          src: (def.c.src && def.c.src[L.id]) || null };
+      });
+      const present = chain.filter(l => l.present);
+      const winner = present.length ? present[present.length - 1] : null;   // highest precedence present
+      const shadowed = present.filter(l => winner && l.ord < winner.ord);
+      // the value the winner directly shadows (next present layer below it) — drives the diff
+      const shadowedBelow = shadowed.length ? shadowed[shadowed.length - 1] : null;
+      return { chain, present, winner, shadowed, shadowedBelow };
+    };
+    const nsFilter = s.s2NsFilter || 'all';
+    // effective-config table rows
+    const cfgRows = cfgDefs.map(def => {
+      const r = resolve(def);
+      const w = r.winner;
+      return { key: def.key, ns: def.ns, type: def.type, unit: def.unit || '',
+        effective: w ? w.value : '—', winLayer: w ? w.id : 'framework',
+        valClass: 'ns-cfgrow__val ns-cfgval--' + cfgValType(w ? w.value : '—'),
+        winLabel: w ? layerShort[w.id] : '—', winTone: w ? layerTone[w.id] : 'muted',
+        source: w && w.src ? w.src : (w ? w.src : '—'),
+        shadowCount: r.shadowed.length,
+        hasOverride: def.c.override !== null && def.c.override !== undefined,
+        selected: def.key === s.s2Sel ? 'true' : 'false',
+        rowState: def.key === s.s2Sel ? 'selected' : null,
+        select: () => {
+          this.nav('/config/nodes/' + encodeURIComponent(def.key));
+          const mob = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 1079px)').matches;
+          if (mob) this.setState({ sheet: 's2' });
+        },
+        selectSheet: () => { this.nav('/config/nodes/' + encodeURIComponent(def.key)); this.setState({ sheet: 's2' }); },
+      };
+    }).filter(r => nsFilter === 'all' || r.ns === nsFilter);
+    // namespace filter chips
+    const cfgNsList = ['all', ...Array.from(new Set(cfgDefs.map(d => d.ns)))];
+    const cfgNsChips = cfgNsList.map(ns => ({
+      ns, label: ns === 'all' ? 'all keys' : ns,
+      count: ns === 'all' ? String(cfgDefs.length) : String(cfgDefs.filter(d => d.ns === ns).length),
+      state: (s.s2NsFilter || 'all') === ns ? 'active' : null,
+      set: () => this.setState({ s2NsFilter: ns }),
+    }));
+    // selected key resolution (hero waterfall)
+    const selDef = cfgDefs.find(d => d.key === s.s2Sel) || cfgDefs[0];
+    const selRes = resolve(selDef);
+    const selWinner = selRes.winner;
+    const cfgWater = selRes.chain.map((l, i) => {
+      const isWinner = selWinner && l.id === selWinner.id;
+      const isShadowed = l.present && selWinner && l.ord < selWinner.ord;
+      // connector label from this layer up to the next
+      const next = selRes.chain[i + 1];
+      let edge = null;
+      if (next) {
+        if (isWinner) edge = null;                                  // winner is top-most contributor visually
+        else if (l.present && next.present && next.ord > l.ord && selWinner && next.ord <= selWinner.ord) edge = 'shadowed by';
+        else if (l.present && !isShadowed && !isWinner) edge = 'inherits';
+        else edge = l.present ? 'shadowed by' : 'passes through';
+      }
+      // Non-contributing layers (silent — the value is not set at this layer) collapse to a slim
+      // one-line pip so the waterfall's vertical space is spent on the layers that actually resolve.
+      const collapsed = !l.present;
+      const state = isWinner ? 'wins' : (isShadowed ? 'shadowed' : (l.present ? 'contributes' : 'silent'));
+      return {
+        id: l.id, ord: String(l.ord + 1), label: l.label, glyph: l.glyph, src: l.src,
+        tone: layerTone[l.id],
+        value: l.present ? l.value : null, present: l.present,
+        provenance: l.src, hasProv: !!l.src && !collapsed,
+        state, collapsed: collapsed ? 'true' : 'false',
+        // pip text: what a non-contributing layer says on its single line
+        pipNote: (l.id === 'override' ? 'passes through' : (l.id === 'profile' ? 'passes through' : 'not set')),
+        isWinner, isShadowed, silent: !l.present,
+        edge, hasEdge: !!edge && !collapsed,
+        valClass: isShadowed
+          ? 'ns-cfgwater__val ns-cfgwater__val--shadowed'
+          : 'ns-cfgwater__val ns-cfgval--' + cfgValType(l.value),
+      };
+    });
+    // header composite stats
+    const cfgResolvedCount = cfgDefs.length;
+    const cfgOverrideCount = cfgDefs.filter(d => d.c.override !== null && d.c.override !== undefined).length;
+    const cfgShadowTotal = cfgDefs.reduce((n, d) => n + resolve(d).shadowed.length, 0);
+    // supporting micro-viz per KPI so they aren't four bare single-number boxes:
+    //  · keys resolved  → tiny per-namespace tick row (how the keys spread across namespaces)
+    //  · overrides active → one pip per active override (source dots)
+    //  · values shadowed  → shadowed / total-contributions meter
+    //  · profile          → precedence-position marker (which layer the active profile sits at)
+    const cfgTotalContribs = cfgDefs.reduce((n, d) => n + resolve(d).present.length, 0);
+    const cfgNsCount = new Set(cfgDefs.map(d => d.ns)).size;
+    const cfgHeadStats = [
+      { label: 'keys resolved', value: String(cfgResolvedCount), tone: null, sub: cfgNsCount + ' namespaces · my-app',
+        viz: 'ticks', ticks: Array.from({ length: Math.min(cfgNsCount, 8) }, (_, i) => ({ i })) },
+      { label: 'overrides active', value: String(cfgOverrideCount), tone: 'warning', sub: 'runtime override store',
+        viz: 'pips', pips: Array.from({ length: cfgOverrideCount }, (_, i) => ({ i })) },
+      { label: 'values shadowed', value: String(cfgShadowTotal), tone: 'primary', sub: cfgShadowTotal + ' of ' + cfgTotalContribs + ' contributions outranked',
+        viz: 'meter', meterPct: cfgTotalContribs ? Math.round(100 * cfgShadowTotal / cfgTotalContribs) + '%' : '0%' },
+      { label: 'profile', value: 'local', tone: 'success', sub: 'env · netscript dev',
+        viz: 'rank', rankPips: [{ id: 'framework' }, { id: 'package' }, { id: 'profile' }, { id: 'override' }].map(p => ({ active: p.id === 'profile' ? 'true' : 'false' })) },
+    ];
+    // precedence legend (ordered)
+    const cfgLegend = cfgLayers.map(l => ({ id: l.id, label: l.label, glyph: l.glyph, tone: layerTone[l.id], ord: String(l.ord + 1) }));
+    // override diff (ref 13) — only when the winner is a runtime override that shadows a value
+    const selHasDiff = !!(selWinner && selWinner.id === 'override' && selRes.shadowedBelow);
+    const diffBaseL = selRes.shadowedBelow;
+    // framed diff hunk: a couple of context lines (the enclosing namespace + neighbour keys) around
+    // the single changed line, so it reads as a real side-by-side diff viewer rather than one delta.
+    const diffNs = selDef.ns;
+    const diffQuote = (raw) => cfgValType(raw) === 'str' ? "'" + raw + "'" : String(raw);
+    const diffKeyLeaf = selDef.key.split('.').slice(1).join('.') || selDef.key;
+    const cfgDiff = selHasDiff ? {
+      hunk: '@@ ' + selDef.key + ' @@',
+      baseLabel: diffBaseL ? layerShort[diffBaseL.id] : '', baseSrc: diffBaseL ? diffBaseL.src : '',
+      baseTone: diffBaseL ? layerTone[diffBaseL.id] : 'muted',
+      overLabel: 'override', overSrc: selWinner.src, overTone: 'warning',
+      baseLines: [
+        { n: '14', text: diffNs + ': {', op: 'ctx' },
+        { n: '15', text: '  ' + diffKeyLeaf + ': ' + diffQuote(diffBaseL.value) + (selDef.unit ? '  // ' + selDef.unit : ''), op: 'del' },
+        { n: '16', text: '}', op: 'ctx' },
+      ],
+      overLines: [
+        { n: '14', text: diffNs + ': {', op: 'ctx' },
+        { n: '15', text: '  ' + diffKeyLeaf + ': ' + diffQuote(selWinner.value) + (selDef.unit ? '  // ' + selDef.unit : ''), op: 'add' },
+        { n: '16', text: '}', op: 'ctx' },
+      ],
+    } : null;
+    // resolution trail (provenance) — contributing layers, shadowed struck
+    const cfgTrail = selRes.chain.filter(l => l.present).map(l => ({
+      label: l.label, tone: layerTone[l.id], glyph: l.glyph, value: l.value, src: l.src || '—',
+      state: (selWinner && l.id === selWinner.id) ? 'wins' : 'shadowed',
+      isWin: !!(selWinner && l.id === selWinner.id),
+      valClass: (selWinner && l.ord < selWinner.ord) ? 'ns-cfgtrail__val ns-cfgtrail__val--shadowed' : 'ns-cfgtrail__val ns-cfgval--' + cfgValType(l.value),
+    }));
+
+    // ----- S3 — the live runtime OVERRIDE STORE (write side) -----
+    // Every overridden key is one entry in ONE store: kind · key · base→override ·
+    // provenance (who/when · revision) · hot-reload state · gated action. Flags,
+    // disabled entities, and task overrides are all rows of the same store.
+    const s3Stats = [
+      { label: 'Feature flags', value: String(s.flags.filter(f => f.on).length) + ' active' },
+      { label: 'Disabled jobs', value: String(s.jobs3.filter(j => j.disabled).length) },
+      { label: 'Disabled sagas', value: '0' },
+      { label: 'Disabled triggers', value: String(s.trigs3.filter(t => t.disabled).length) },
+      { label: 'Task overrides', value: String(s.tasks3.length) },
+    ];
+    // --- build the unified override-set entries (only keys that DIVERGE from base) ---
+    const ovConfirm = (cfg) => () => this.askConfirm(cfg);
+    const ovFlags = s.flags.filter(f => f.on).map(f => ({
+      uid: 'flags.' + f.id, kind: 'flag', glyph: '⚑', key: 'flags.' + f.id,
+      base: f.base, val: f.rollout + '%', tone: 'primary', reload: f.reload,
+      by: f.by, at: f.at, rev: f.rev, valType: 'num',
+      note: 'Feature flag rollout — served to ' + f.rollout + '% of traffic.',
+      goRoute: 'workers', goLabel: 'Workers',
+      actLabel: 'Disable', actKind: 'ghost',
+      act: {
+        title: 'Disable feature flag',
+        desc: 'Writes to the runtime-config override store. The watcher hot-reloads it; the change lands in the live feed like any other event.',
+        from: 'flags.' + f.id + ' = ' + f.rollout + '%', to: 'off',
+        cli: 'netscript config override disable flags.' + f.id,
+        feed: 'flag ' + f.id + ' → disabled', feedTone: 'warning', action: 'Disable flag',
+        apply: () => this.setState(st => ({ flags: st.flags.map(x => x.id === f.id ? { ...x, on: false, rollout: 0 } : x) })),
+      },
+    }));
+    const ovJobs = s.jobs3.filter(j => j.disabled).map(j => ({
+      uid: 'jobs.' + j.id, kind: 'job', glyph: '⚙', key: 'jobs.' + j.id,
+      base: 'enabled', val: 'disabled', tone: 'warning', reload: j.reload,
+      by: j.by, at: j.at, rev: j.rev, valType: 'off',
+      note: 'Job disabled by override — the scheduler skips it until the override is cleared.',
+      goRoute: 'workers', goLabel: 'Workers',
+      actLabel: 'Enable', actKind: 'secondary',
+      act: {
+        title: 'Enable job', desc: 'Clears the disable override for this job. The scheduler picks it up on the next hot-reload.',
+        from: 'jobs.' + j.id + ' = disabled', to: 'enabled',
+        cli: 'netscript config override clear jobs.' + j.id,
+        feed: 'job ' + j.id + ' → re-enabled', feedTone: 'success', action: 'Enable job',
+        apply: () => this.setState(st => ({ jobs3: st.jobs3.map(x => x.id === j.id ? { ...x, disabled: false } : x) })),
+      },
+    }));
+    const ovTrigs = s.trigs3.filter(t => t.disabled).map(t => ({
+      uid: 'triggers.' + t.id, kind: 'trigger', glyph: '⚡', key: 'triggers.' + t.id,
+      base: 'enabled', val: 'disabled', tone: 'warning', reload: t.reload,
+      by: t.by, at: t.at, rev: t.rev, valType: 'off',
+      note: 'Trigger disabled by override — it will not fire until the override is cleared.',
+      goRoute: 'triggers', goLabel: 'Triggers',
+      actLabel: 'Enable', actKind: 'secondary',
+      act: {
+        title: 'Enable trigger', desc: 'Clears the disable override; the trigger resumes firing immediately.',
+        from: 'triggers.' + t.id + ' = disabled', to: 'enabled',
+        cli: 'netscript triggers enable ' + t.id,
+        feed: 'trigger ' + t.id + ' → re-enabled', feedTone: 'success', action: 'Enable trigger',
+        apply: () => this.setState(st => ({ trigs3: st.trigs3.map(x => x.id === t.id ? { ...x, disabled: false } : x) })),
+      },
+    }));
+    const ovTasks = s.tasks3.map(tk => ({
+      uid: 'tasks.' + tk.id, kind: 'task', glyph: '◆', key: 'tasks.' + tk.id + '.' + tk.field,
+      base: tk.base, val: tk.val, tone: 'primary', reload: tk.reload,
+      by: tk.by, at: tk.at, rev: tk.rev, valType: 'num',
+      note: 'Task field override — ' + tk.note + '. Clearing reverts to the declared definition.',
+      goRoute: 'workers', goLabel: 'Workers',
+      actLabel: 'Clear', actKind: 'ghost',
+      act: {
+        title: 'Clear task override', desc: 'Removes the override; the task reverts to its declared definition.',
+        from: 'tasks.' + tk.id + ' · ' + tk.note, to: 'defaults',
+        cli: 'netscript config override clear tasks.' + tk.id,
+        feed: 'task ' + tk.id + ' → override cleared', feedTone: 'muted', action: 'Clear override',
+        apply: () => this.setState(st => ({ tasks3: st.tasks3.filter(x => x.id !== tk.id) })),
+      },
+    }));
+    const ovAll = [...ovFlags, ...ovJobs, ...ovTrigs, ...ovTasks];
+    const kindMeta = { flag: 'primary', job: 'warning', trigger: 'warning', task: 'primary' };
+    const s3Store = ovAll.map(o => ({
+      uid: o.uid, kind: o.kind, glyph: o.glyph, key: o.key, base: o.base, val: o.val,
+      tone: o.tone, valClass: 'ns-ovstore__val ns-ovval--' + o.valType,
+      reload: o.reload, reloadLabel: o.reload === 'pending' ? 'pending' : 'live',
+      by: o.by, at: o.at, rev: o.rev,
+      selState: s.s3Ov === o.uid ? 'sel' : null,
+      select: () => this.setState({ s3Ov: o.uid, sheet: 's3' }),
+      act: ovConfirm(o.act), actLabel: o.actLabel,
+      actClass: 'ns-btn ns-btn--ghost ns-btn--sm',
+    }));
+    const pendingReload = ovAll.filter(o => o.reload === 'pending').length;
+    const liveReload = ovAll.length - pendingReload;
+    // selected override → detail-drawer payload
+    const ovSel = ovAll.find(o => o.uid === s.s3Ov) || ovAll[0] || null;
+    const s3Detail = ovSel ? {
+      kind: ovSel.kind, glyph: ovSel.glyph, key: ovSel.key, base: ovSel.base, val: ovSel.val,
+      tone: ovSel.tone, reload: ovSel.reload, reloadLabel: ovSel.reload === 'pending' ? 'pending restart' : 'hot-reloaded · live',
+      note: ovSel.note, actLabel: ovSel.actLabel, actClass: 'ns-btn ns-btn--secondary',
+      act: ovConfirm(ovSel.act), goRoute: ovSel.goRoute, goLabel: ovSel.goLabel,
+      go: go(ovSel.goRoute),
+      kv: [
+        { k: 'key', v: ovSel.key },
+        { k: 'base (shadows)', v: ovSel.base },
+        { k: 'override value', v: ovSel.val },
+        { k: 'applied in', v: ovSel.rev },
+        { k: 'applied by', v: ovSel.by },
+        { k: 'applied', v: ovSel.at },
+        { k: 'hot-reload', v: ovSel.reload === 'pending' ? 'pending restart' : 'live' },
+      ],
+    } : null;
+    // header composite: type distribution pips (glyph → count)
+    const s3Head = {
+      total: String(ovAll.length),
+      pips: [
+        { kind: 'flag', glyph: '⚑', label: 'flags', n: ovFlags.length, tone: 'primary' },
+        { kind: 'job', glyph: '⚙', label: 'jobs', n: ovJobs.length, tone: 'warning' },
+        { kind: 'trigger', glyph: '⚡', label: 'triggers', n: ovTrigs.length, tone: 'warning' },
+        { kind: 'task', glyph: '◆', label: 'tasks', n: ovTasks.length, tone: 'primary' },
+      ],
+      divN: String(ovAll.length), baseN: 42, // keys diverging vs total known keys
+      divWClass: 'ns-rchead__ratiofill--w' + Math.min(20, Math.round(ovAll.length / 42 * 20)),
+      divPct: Math.round(ovAll.length / 42 * 100) + '%',
+      rev: 'v' + (s.verSeq - 1), revBy: s.flags.find(f => f.rev === 'v43') ? 'ada@ops' : 'ops',
+      revAt: '14 min ago',
+      typeSummary: ovFlags.length + ' flags · ' + ovJobs.length + ' jobs · ' + ovTrigs.length + ' triggers · ' + ovTasks.length + ' tasks',
+      liveN: String(liveReload), pendN: String(pendingReload),
+      reloadTone: pendingReload > 0 ? 'warning' : 'success',
+      reloadLabel: pendingReload > 0 ? pendingReload + ' pending restart' : 'all live',
+      reloadDetail: liveReload + ' hot-reloaded · ' + pendingReload + ' require restart',
+    };
+    const s3FeedItems = s.s3Feed.map(f => {
+      const parts = String(f.text || '').split('→').map(x => x.trim());
+      return { ...f, target: parts[0] || f.text, action: parts.slice(1).join(' → ') || 'updated' };
+    });
+    // --- derived aside widgets (right column) — no invented data ---
+    // (a) Pending hot-reloads: overrides that need a restart to take effect.
+    const s3PendingReloads = ovAll.filter(o => o.reload === 'pending').map(o => ({
+      key: o.key, glyph: o.glyph, tone: o.tone, rev: o.rev, at: o.at, by: o.by,
+      act: ovConfirm(o.act), actLabel: 'Restart to apply',
+    }));
+    const s3NoPending = s3PendingReloads.length === 0;
+    // (b) Change authors: operators who applied overrides — count + revisions + last change.
+    //     Derived from the override provenance (who/when/rev) already on every row.
+    const revNum = (r) => { const m = /^v(\d+)$/.exec(r || ''); return m ? +m[1] : -1; };
+    const s3AuthorMap = {};
+    ovAll.forEach(o => {
+      if (!o.by || o.by === 'default') return;
+      const a = s3AuthorMap[o.by] || (s3AuthorMap[o.by] = { by: o.by, n: 0, revs: {}, topRev: -1, at: o.at });
+      a.n += 1; a.revs[o.rev] = 1;
+      if (revNum(o.rev) > a.topRev) { a.topRev = revNum(o.rev); a.at = o.at; }
+    });
+    const s3Authors = Object.keys(s3AuthorMap).map(k => s3AuthorMap[k])
+      .sort((a, b) => b.topRev - a.topRev || b.n - a.n)
+      .map(a => ({
+        by: a.by, initials: a.by.slice(0, 2).toUpperCase(),
+        n: String(a.n), revN: String(Object.keys(a.revs).length),
+        rev: a.topRev >= 0 ? 'v' + a.topRev : '—', at: a.at,
+      }));
+    // (c) Base-drift by type — the divergence-by-kind summary (glyph · count).
+    const s3Drift = s3Head.pips.filter(p => p.n > 0).map(p => ({
+      glyph: p.glyph, label: p.label, n: String(p.n), tone: p.tone,
+    }));
+    const verDiffs = {
+      v43: [
+        { op: 'ctx', text: 'runtime-config/current → v43' },
+        { op: 'del', text: '- flags.checkout-v2: { rollout: 10 }' },
+        { op: 'add', text: '+ flags.checkout-v2: { rollout: 30 }' },
+        { op: 'add', text: '+ jobs.nightly-reconcile: { enabled: false }' },
+      ],
+      v42: [
+        { op: 'ctx', text: 'runtime-config/current → v42' },
+        { op: 'add', text: '+ tasks.send-receipt: { timeoutMs: 90000 }' },
+      ],
+      v41: [
+        { op: 'ctx', text: 'runtime-config/current → v41' },
+        { op: 'add', text: '+ flags.checkout-v2: { rollout: 10 }' },
+      ],
+    };
+    const verBase = [
+      { v: 'v43', title: 'flag rollout bumped · job disabled', meta: '14 min ago · 2 changes', by: 'ada@ops', n: 2, diff: verDiffs.v43 },
+      { v: 'v42', title: 'task override applied', meta: '2 h ago · 1 change', by: 'ada@ops', n: 1, diff: verDiffs.v42 },
+      { v: 'v41', title: 'checkout-v2 introduced at 10%', meta: 'yesterday · 1 change', by: 'kai@ops', n: 1, diff: verDiffs.v41 },
+    ];
+    const s3Vers = [...s.s3VerDyn, ...verBase].map((v, i) => ({
+      ...v,
+      by: v.by || 'ops', n: v.n || (v.diff ? v.diff.filter(d => d.op !== 'ctx').length : 1),
+      pips: Array.from({ length: Math.min(4, v.n || (v.diff ? v.diff.filter(d => d.op !== 'ctx').length : 1)) }),
+      current: i === 0 ? 'current' : null,
+      canRoll: i !== 0,
+      open: s.s3OpenVer === v.v,
+      showDiff: s.s3OpenVer === v.v && s.s3View !== 'json',
+      showJson: s.s3OpenVer === v.v && s.s3View === 'json',
+      toggleLabel: s.s3OpenVer === v.v ? 'Hide changes' : 'Show changes',
+      toggle: () => s.s3OpenVer === v.v ? this.nav('/runtime') : this.nav('/runtime/versions/' + encodeURIComponent(v.v) + (s.s3View === 'all' ? '' : '?view=' + encodeURIComponent(s.s3View))),
+      json: JSON.stringify({ version: v.v, changes: v.diff.filter(d => d.op !== 'ctx').map(d => d.text.slice(2)) }, null, 2),
+      rollback: () => this.askConfirm({
+        title: 'Roll back the override store', desc: 'Reverts the runtime-config override store to ' + v.v + '. The watcher hot-reloads it; the rollback lands in the live feed as a new revision.',
+        from: 'runtime-config/current = ' + ('v' + (s.verSeq - 1)), to: 'runtime-config/current = ' + v.v,
+        cli: 'netscript config override rollback ' + v.v,
+        feed: 'store rolled back → ' + v.v, feedTone: 'warning', action: 'Roll back to ' + v.v,
+        apply: () => {},
+      }),
+    }));
+    const segBtn = (key, val) => ({ state: s[key] === val ? 'active' : null, set: () => {
+      if (key === 's3View') this.updateQuery({ view: val }, { [key]: val });
+      else if (key === 's6View') this.updateQuery({ view: val }, { [key]: val });
+      else this.setState({ [key]: val });
+    } });
+
+    // ----- S4 -----
+    // Contract registry — each row carries visual metadata (signature, schema, producers/consumers,
+    // version, compatibility) fully derived for the explorer. No routes/logic/copy meaning changed.
+    const S4_METHOD_TONE = { GET: 'get', POST: 'post', PATCH: 'patch', DELETE: 'delete' };
+    const S4_KIND_TONE = { sagas: 'copper', workers: 'teal', triggers: 'amber', streams: 'primary' };
+    const S4_KIND_GLYPH = { sagas: '⛓', workers: '⚙', triggers: '⚡', streams: '≈' };
+    const s4Raw = [
+      { proc: 'order.fulfillment.start', plugin: 'sagas', ns: 'instances', method: 'POST', cov: 'complete', dual: ['REST', 'RPC', 'SDK'],
+        ver: 'v4', compat: 'backward', input: 'StartFulfillmentInput', output: 'SagaInstanceRef',
+        sig: [['start', 'kw'], ['(input: ', 'p'], ['StartFulfillmentInput', 't'], [') → ', 'p'], ['Promise', 't'], ['<', 'p'], ['SagaInstanceRef', 't'], ['>', 'p']],
+        schema: [['StartFulfillmentInput', 't', '{'], ['  orderId', 'k', ': string'], ['  lines', 'k', ': LineItem[]'], ['  idempotencyKey', 'k', ': string'], ['', 'p', '}'], ['SagaInstanceRef', 't', '{'], ['  correlationId', 'k', ': string'], ['  status', 'k', ': SagaStatus'], ['', 'p', '}']],
+        producers: ['/checkout', 'orders SDK'], consumers: ['saga-order', 'ledger.export'] },
+      { proc: 'jobs.trigger', plugin: 'workers', ns: 'jobs', method: 'POST', cov: 'complete', dual: ['REST', 'RPC', 'SDK'],
+        ver: 'v3', compat: 'backward', input: 'TriggerJobInput', output: 'JobRef',
+        sig: [['trigger', 'kw'], ['(input: ', 'p'], ['TriggerJobInput', 't'], [') → ', 'p'], ['Promise', 't'], ['<', 'p'], ['JobRef', 't'], ['>', 'p']],
+        schema: [['TriggerJobInput', 't', '{'], ['  job', 'k', ': string'], ['  payload', 'k', ': Json'], ['  runAt', 'k', '?: string'], ['', 'p', '}'], ['JobRef', 't', '{'], ['  id', 'k', ': string'], ['  queuedAt', 'k', ': string'], ['', 'p', '}']],
+        producers: ['scheduler', 'jobs SDK', '/admin/reconcile'], consumers: ['worker-reserve'] },
+      { proc: 'jobs.executions.list', plugin: 'workers', ns: 'jobs', method: 'GET', cov: 'thin', dual: ['RPC', 'SDK'],
+        ver: 'v2', compat: 'none', input: 'ListExecutionsQuery', output: 'Execution[]',
+        sig: [['list', 'kw'], ['(query: ', 'p'], ['ListExecutionsQuery', 't'], [') → ', 'p'], ['Promise', 't'], ['<', 'p'], ['Execution[]', 't'], ['>', 'p']],
+        schema: [['// thin — missing .describe()', 'c', ''], ['ListExecutionsQuery', 't', '{'], ['  job', 'k', '?: string'], ['  limit', 'k', '?: number'], ['', 'p', '}'], ['Execution', 't', '{ … }']],
+        producers: ['jobs SDK'], consumers: ['Run Inspector'] },
+      { proc: 'triggers.preview', plugin: 'triggers', ns: 'events', method: 'GET', cov: 'complete', dual: ['REST', 'RPC', 'SDK'],
+        ver: 'v3', compat: 'full', input: 'PreviewTriggerQuery', output: 'TriggerPreview',
+        sig: [['preview', 'kw'], ['(query: ', 'p'], ['PreviewTriggerQuery', 't'], [') → ', 'p'], ['Promise', 't'], ['<', 'p'], ['TriggerPreview', 't'], ['>', 'p']],
+        schema: [['PreviewTriggerQuery', 't', '{'], ['  trigger', 'k', ': string'], ['  sample', 'k', '?: Json'], ['', 'p', '}'], ['TriggerPreview', 't', '{'], ['  matched', 'k', ': boolean'], ['  bindings', 'k', ': Binding[]'], ['', 'p', '}']],
+        producers: ['/triggers builder'], consumers: ['trig-webhook'] },
+      { proc: 'triggers.enable', plugin: 'triggers', ns: 'events', method: 'PATCH', cov: 'thin', dual: ['REST', 'RPC'],
+        ver: 'v3', compat: 'backward', input: 'EnableTriggerInput', output: 'TriggerState',
+        sig: [['enable', 'kw'], ['(input: ', 'p'], ['EnableTriggerInput', 't'], [') → ', 'p'], ['Promise', 't'], ['<', 'p'], ['TriggerState', 't'], ['>', 'p']],
+        schema: [['// thin — missing .describe()', 'c', ''], ['EnableTriggerInput', 't', '{'], ['  trigger', 'k', ': string'], ['  enabled', 'k', ': boolean'], ['', 'p', '}'], ['TriggerState', 't', '{ … }']],
+        producers: ['/admin', 'triggers SDK'], consumers: ['trig-webhook'] },
+      { proc: 'streams.delivery.get', plugin: 'streams', ns: 'delivery', method: 'GET', cov: 'complete', dual: ['REST'],
+        ver: 'v2', compat: 'full', input: 'DeliveryQuery', output: 'DeliveryReceipt',
+        sig: [['get', 'kw'], ['(query: ', 'p'], ['DeliveryQuery', 't'], [') → ', 'p'], ['Promise', 't'], ['<', 'p'], ['DeliveryReceipt', 't'], ['>', 'p']],
+        schema: [['DeliveryQuery', 't', '{'], ['  stream', 'k', ': string'], ['  messageId', 'k', ': string'], ['', 'p', '}'], ['DeliveryReceipt', 't', '{'], ['  status', 'k', ': DeliveryStatus'], ['  attempts', 'k', ': number'], ['', 'p', '}']],
+        producers: ['stream-pay'], consumers: ['DLQ triage'] },
+      { proc: 'instances.cancel', plugin: 'sagas', ns: 'instances', method: 'DELETE', cov: 'complete', dual: ['REST', 'RPC'],
+        ver: 'v4', compat: 'backward', input: 'CancelInstanceInput', output: 'SagaInstanceRef',
+        sig: [['cancel', 'kw'], ['(input: ', 'p'], ['CancelInstanceInput', 't'], [') → ', 'p'], ['Promise', 't'], ['<', 'p'], ['SagaInstanceRef', 't'], ['>', 'p']],
+        schema: [['CancelInstanceInput', 't', '{'], ['  correlationId', 'k', ': string'], ['  reason', 'k', '?: string'], ['', 'p', '}'], ['SagaInstanceRef', 't', '{ … }']],
+        producers: ['/orders/[id]', 'sagas SDK'], consumers: ['saga-order'] },
+    ];
+    const DUAL_ALL = ['REST', 'RPC', 'SDK'];
+    const s4Contracts = s4Raw.map(c => ({
+      ...c,
+      mBadge: 'ns-badge ns-badge--' + ({ POST: 'primary', GET: 'muted', PATCH: 'warning', DELETE: 'destructive' })[c.method],
+      mTone: S4_METHOD_TONE[c.method],
+      kindTone: S4_KIND_TONE[c.plugin], kindGlyph: S4_KIND_GLYPH[c.plugin],
+      covBadge: badge(c.cov === 'complete' ? 'ok' : 'thin'),
+      covLabel: c.cov === 'complete' ? 'complete' : 'thin · missing .describe()',
+      dualChips: c.dual.map(d => ({ label: d })),
+      dualPips: DUAL_ALL.map(d => ({ label: d, on: c.dual.includes(d) ? '1' : '0', key: d.toLowerCase() })),
+      sigPreview: c.input + ' → ' + c.output,
+      compatLabel: ({ full: 'full', backward: 'backward', none: 'none' })[c.compat],
+      compatTone: ({ full: 'success', backward: 'primary', none: 'warning' })[c.compat],
+      scalar: () => this.showToast('Would open /api/docs#' + c.proc + ' (Scalar)', 'info'),
+    }));
+    // Registry grouped by kind › namespace (browse structure)
+    const s4GroupDefs = [
+      { key: 'workers', label: 'workers › jobs' }, { key: 'sagas', label: 'sagas › instances' },
+      { key: 'triggers', label: 'triggers › events' }, { key: 'streams', label: 'streams › delivery' },
+    ];
+    // Filtering
+    const s4q = (s.s4Q || '').trim().toLowerCase();
+    const s4Match = (c) => (s.s4Kind === 'all' || c.plugin === s.s4Kind)
+      && (s.s4Method === 'all' || c.method === s.s4Method)
+      && (s.s4Cov === 'all' || c.cov === s.s4Cov)
+      && (!s4q || c.proc.toLowerCase().includes(s4q) || c.input.toLowerCase().includes(s4q) || c.output.toLowerCase().includes(s4q));
+    const s4Filtered = s4Contracts.filter(s4Match);
+    const s4Groups = s4GroupDefs.map(g => {
+      const rows = s4Filtered.filter(c => c.plugin === g.key).map(c => ({
+        ...c, selState: c.proc === s.s4Sel ? 'selected' : null,
+        select: () => this.setState(st => ({ s4Sel: c.proc, sheet: (typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 640px)').matches) ? 's4' : st.sheet })),
+      }));
+      const complete = rows.filter(c => c.cov === 'complete').length;
+      return { ...g, tone: S4_KIND_TONE[g.key], glyph: S4_KIND_GLYPH[g.key], rows,
+        count: String(rows.length), complete, thin: rows.length - complete,
+        covPct: rows.length ? Math.round(complete / rows.length * 100) : 0,
+        covClass: 'ns-catreg__covbar--w' + (rows.length ? Math.round(complete / rows.length * 20) : 0),
+        empty: rows.length === 0 };
+    }).filter(g => !s4q && s.s4Kind === 'all' && s.s4Method === 'all' && s.s4Cov === 'all' ? true : !g.empty);
+    const s4HasResults = s4Filtered.length > 0;
+    // Header composite metrics (derived — kind distribution, coverage ratio, duality reach)
+    const s4Total = s4Contracts.length;
+    const s4CompleteN = s4Contracts.filter(c => c.cov === 'complete').length;
+    const s4KindDist = s4GroupDefs.map(g => {
+      const n = s4Contracts.filter(c => c.plugin === g.key).length;
+      return { key: g.key, label: g.key, tone: S4_KIND_TONE[g.key], glyph: S4_KIND_GLYPH[g.key], n,
+        pct: Math.round(n / s4Total * 100), wClass: 'ns-catchan__seg--w' + Math.round(n / s4Total * 20),
+        active: s.s4Kind === g.key, go: () => this.setState(st => ({ s4Kind: st.s4Kind === g.key ? 'all' : g.key })) };
+    });
+    const s4Reach = DUAL_ALL.map(d => {
+      const n = s4Contracts.filter(c => c.dual.includes(d)).length;
+      return { label: d, key: d.toLowerCase(), n, total: s4Total, pct: Math.round(n / s4Total * 100),
+        wClass: 'ns-catreach__fill--w' + Math.round(n / s4Total * 20) };
+    });
+    const s4Head = {
+      total: String(s4Total),
+      completeN: s4CompleteN, thinN: s4Total - s4CompleteN,
+      covPct: Math.round(s4CompleteN / s4Total * 100),
+      covPctLabel: Math.round(s4CompleteN / s4Total * 100) + '%',
+      covWClass: 'ns-catratio__fill--w' + Math.round(s4CompleteN / s4Total * 20),
+      kinds: s4KindDist, reach: s4Reach,
+      versions: '17 procedures · 4 versions',
+    };
+    // Selected contract detail
+    const s4Selected = s4Contracts.find(c => c.proc === s.s4Sel) || s4Contracts[0];
+    const s4Detail = s4Selected ? {
+      ...s4Selected,
+      sigCells: s4Selected.sig.map(([t, k]) => ({ t, k })),
+      schemaLines: s4Selected.schema.map((row, i) => ({ n: String(i + 1), name: row[0], kind: row[1], rest: row[2] })),
+      producerNodes: s4Selected.producers.map(p => ({ label: p })),
+      consumerNodes: s4Selected.consumers.map(p => ({ label: p })),
+      prodCount: String(s4Selected.producers.length), consCount: String(s4Selected.consumers.length),
+    } : null;
+    // Filter chips
+    const s4KindChips = [{ v: 'all', label: 'All kinds' }, { v: 'workers', label: 'workers' }, { v: 'sagas', label: 'sagas' }, { v: 'triggers', label: 'triggers' }, { v: 'streams', label: 'streams' }]
+      .map(o => ({ ...o, state: s.s4Kind === o.v ? 'active' : null, set: () => this.setState({ s4Kind: o.v }) }));
+    const s4MethodChips = [{ v: 'all', label: 'All methods' }, { v: 'GET', label: 'GET' }, { v: 'POST', label: 'POST' }, { v: 'PATCH', label: 'PATCH' }, { v: 'DELETE', label: 'DELETE' }]
+      .map(o => ({ ...o, state: s.s4Method === o.v ? 'active' : null, set: () => this.setState({ s4Method: o.v }) }));
+    const s4CovChips = [{ v: 'all', label: 'Any coverage' }, { v: 'complete', label: 'complete' }, { v: 'thin', label: 'thin' }]
+      .map(o => ({ ...o, state: s.s4Cov === o.v ? 'active' : null, set: () => this.setState({ s4Cov: o.v }) }));
+    const s4Routes = [
+      { route: '/checkout', status: 'bound', form: 'inline · .withRouteContract()', target: 'checkout.page.tsx' },
+      { route: '/orders/[id]', status: 'bound', form: 'sidecar · orders.route.ts', target: 'orders.page.tsx' },
+      { route: '/admin/reconcile', status: 'unbound', form: '—', target: 'add reconcile.route.ts or bind inline' },
+      { route: '/reports', status: 'unbound', form: '—', target: 'add reports.route.ts or bind inline' },
+    ].map(r => ({ ...r, sBadge: badge(r.status) }));
+    const s4Tree = s4GroupDefs.map(g => ({ label: g.label, count: String(s4Contracts.filter(c => c.plugin === g.key).length) }));
+    const s4Summary = {
+      thin: '4 of 17 procedures thin',
+      unbound: '2 routes unbound',
+    };
+
+    // ----- S15 — Auth Sessions: session-security roster ------------------------
+    // Visual metadata only (device / geo / issued→expires TTL / scopes / MFA).
+    // Fully derived; no route/logic/copy-meaning change. "now" = the app clock.
+    const s15NowLbl = '14:02:11';
+    // wbucket: value 0..1 → --w0..--w20 (5% steps), shared bar geometry idiom.
+    const wbucket = (frac) => 'w' + Math.max(0, Math.min(20, Math.round((frac || 0) * 20)));
+    // ttlFrac = remaining / lifespan. elapsedFrac = 1 - ttlFrac.
+    const S15_DEV_GLYPH = { browser: '🖥', cli: '⌨', ci: '⚙', mobile: '▢', service: '◈' };
+    const S15_PROV_TONE = { oidc: 'primary', password: 'warning', 'api-key': 'muted', magic: 'primary' };
+    const s15Raw = [
+      { id: 'sess_31', user: 'usr_31', email: 'maya@acme.dev', name: 'Maya Okonkwo', kind: 'human',
+        provider: 'oidc', idp: 'workos', dev: 'browser', agent: 'Chrome 141 · macOS 15.2',
+        ip: '81.2.69.142', loc: 'Zürich, CH', geo: 'eu', state: 'active', elevated: true, mfa: 'totp',
+        issued: '13:02:41', issuedAgo: '59m', expires: '15:02:41', ttlFrac: 0.502, lifespan: '2h',
+        scopes: ['read', 'write', 'admin:runtime', 'deploy'], last: 'token refreshed 14:00:12',
+        corr: 'ch_3QK9dR2eZ' },
+      { id: 'sess_18', user: 'usr_18', email: 'dev@local', name: 'Local Dev', kind: 'human',
+        provider: 'password', idp: 'local', dev: 'browser', agent: 'Firefox 133 · Linux',
+        ip: '127.0.0.1', loc: 'localhost', geo: 'local', state: 'active', elevated: false, mfa: 'none',
+        issued: '09:44:02', issuedAgo: '4h 18m', expires: '14:14:02', ttlFrac: 0.093, lifespan: '4h 30m',
+        scopes: ['read', 'write'], last: 'signin 09:44:02', corr: 'ch_7bV1mE0aQ' },
+      { id: 'sess_44', user: 'usr_44', email: ' next@studio.io', name: 'Nadia Petrov', kind: 'human',
+        provider: 'oidc', idp: 'google', dev: 'mobile', agent: 'Safari · iOS 18.2',
+        ip: '203.0.113.51', loc: 'Berlin, DE', geo: 'eu', state: 'idle', elevated: false, mfa: 'passkey',
+        issued: '11:20:08', issuedAgo: '2h 42m', expires: '19:20:08', ttlFrac: 0.663, lifespan: '8h',
+        scopes: ['read'], last: 'idle since 13:31:00 · 31m', corr: 'ch_9pL2xW4rN' },
+      { id: 'sess_07', user: 'usr_07', email: 'ci-bot', name: 'CI Runner', kind: 'service',
+        provider: 'api-key', idp: 'gha', dev: 'ci', agent: 'netscript-ci/2.4 · runner',
+        ip: '140.82.112.3', loc: 'GitHub Actions', geo: 'cloud', state: 'revoked', elevated: false, mfa: 'none',
+        issued: '08:11:56', issuedAgo: '5h 50m', expires: '—', ttlFrac: 0, lifespan: '—',
+        scopes: ['read', 'deploy'], last: 'session revoked 12:30:00 · by admin', corr: 'ch_2sD8kR1tP' },
+      { id: 'sess_52', user: 'svc_52', email: 'analytics-sync', name: 'Analytics Sync', kind: 'service',
+        provider: 'api-key', idp: 'kv', dev: 'service', agent: 'streams-consumer/1.4',
+        ip: '10.0.4.11', loc: 'aspire · internal', geo: 'cloud', state: 'active', elevated: false, mfa: 'none',
+        issued: '13:58:30', issuedAgo: '3m', expires: '14:07:11', ttlFrac: 0.031, lifespan: '15m',
+        scopes: ['read'], last: 'token refreshed 13:58:30', corr: 'ch_5tG3nB8vC' },
+    ];
+    const S15_STATE_TONE = { active: 'success', idle: 'warning', revoked: 'muted', expiring: 'destructive' };
+    // Derived per-session view fields.
+    const s15Sessions = s15Raw.map(x => {
+      const expiringSoon = x.state === 'active' && x.ttlFrac > 0 && x.ttlFrac <= 0.12;
+      const effState = x.state === 'active' && expiringSoon ? 'expiring' : x.state;
+      const remFrac = x.state === 'revoked' ? 0 : x.ttlFrac;
+      const elapsedFrac = x.state === 'revoked' ? 1 : (1 - x.ttlFrac);
+      const ttlPctLbl = x.state === 'revoked' ? 'revoked' : Math.round(remFrac * 100) + '%';
+      const remLbl = x.state === 'revoked' ? 'revoked' : x.expires;
+      return {
+        ...x, effState, expiringSoon,
+        devGlyph: S15_DEV_GLYPH[x.dev] || '◇',
+        provTone: S15_PROV_TONE[x.provider] || 'muted',
+        provLbl: x.provider + (x.idp ? ' · ' + x.idp : ''),
+        stTone: S15_STATE_TONE[effState] || 'muted',
+        sBadge: 'ns-badge ns-badge--' + (S15_STATE_TONE[effState] || 'muted'),
+        initials: (x.name || x.user).split(/\s+/).map(w => w[0]).slice(0, 2).join('').toUpperCase(),
+        ttlWClass: 'ns-ttlbar__fill--' + wbucket(remFrac),
+        elapsedWClass: 'ns-ttlbar__fill--' + wbucket(elapsedFrac),
+        ttlMarkerClass: 'ns-authttl__marker--' + wbucket(elapsedFrac),
+        ttlPctLbl, remLbl, ttlTone: expiringSoon ? 'destructive' : (effState === 'idle' ? 'warning' : (x.state === 'revoked' ? 'muted' : 'success')),
+        scopeChips: x.scopes.map(sc => ({ label: sc, elevated: /admin|deploy|write/.test(sc) ? '1' : '0' })),
+        scopeN: String(x.scopes.length),
+        mfaLbl: x.mfa === 'none' ? 'no MFA' : x.mfa,
+        mfaOn: x.mfa === 'none' ? '0' : '1',
+        selState: x.id === s.s15Sel ? 'selected' : null,
+        select: () => this.setState(st => ({ s15Sel: x.id, sheet: (typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 640px)').matches) ? 's15' : st.sheet })),
+        revoke: () => this.askConfirm({ title: 'Revoke auth session', desc: 'Revokes this projected session and emits auth.session.revoked.', from: x.id + ' · ' + x.state, to: 'revoked', cli: 'netscript auth sessions revoke ' + x.id, action: 'Revoke', danger: true, toast: x.id + ' revoked', resultPath: '/auth/sessions/' + x.id }),
+      };
+    });
+    // Filter + sort (roster toolbar).
+    const s15q = (s.s15Q || '').trim().toLowerCase();
+    const s15Match = (x) => (s.s15Filter === 'all'
+        || (s.s15Filter === 'active' && (x.effState === 'active' || x.effState === 'expiring'))
+        || (s.s15Filter === 'elevated' && x.elevated)
+        || (s.s15Filter === x.effState))
+      && (!s15q || (x.user + ' ' + x.email + ' ' + x.name + ' ' + x.provider + ' ' + x.loc).toLowerCase().includes(s15q));
+    let s15Filtered = s15Sessions.filter(s15Match);
+    const s15Rank = { expiring: 0, active: 1, idle: 2, revoked: 3 };
+    if (s.s15Sort === 'expiry') {
+      s15Filtered = s15Filtered.slice().sort((a, b) => {
+        const ar = a.state === 'revoked' ? 99 : (a.state === 'idle' ? 2 : 0) + a.ttlFrac;
+        const br = b.state === 'revoked' ? 99 : (b.state === 'idle' ? 2 : 0) + b.ttlFrac;
+        return ar - br;
+      });
+    } else {
+      s15Filtered = s15Filtered.slice().sort((a, b) => (s15Rank[a.effState] - s15Rank[b.effState]) || a.user.localeCompare(b.user));
+    }
+    const s15HasResults = s15Filtered.length > 0;
+    // Header composite metrics.
+    const s15Active = s15Sessions.filter(x => x.effState === 'active' || x.effState === 'expiring').length;
+    const s15Idle = s15Sessions.filter(x => x.effState === 'idle').length;
+    const s15Revoked = s15Sessions.filter(x => x.state === 'revoked').length;
+    const s15Elevated = s15Sessions.filter(x => x.elevated).length;
+    const s15Live = s15Sessions.filter(x => x.state !== 'revoked');
+    const s15Total = s15Sessions.length;
+    // status distribution channel bar (active / expiring / idle / revoked)
+    const s15Dist = [
+      { key: 'active', label: 'active', tone: 'success', n: s15Sessions.filter(x => x.effState === 'active').length },
+      { key: 'expiring', label: 'expiring', tone: 'destructive', n: s15Sessions.filter(x => x.effState === 'expiring').length },
+      { key: 'idle', label: 'idle', tone: 'warning', n: s15Idle },
+      { key: 'revoked', label: 'revoked', tone: 'muted', n: s15Revoked },
+    ].filter(d => d.n > 0).map(d => ({ ...d, wClass: 'ns-authchan__seg--w' + Math.max(1, Math.round(d.n / s15Total * 20)),
+      active: s.s15Filter === d.key, go: () => this.setState(st => ({ s15Filter: st.s15Filter === d.key ? 'all' : d.key })) }));
+    // soonest-to-expire horizon strip (live sessions, ordered by remaining)
+    const s15Horizon = s15Live.slice().sort((a, b) => a.ttlFrac - b.ttlFrac).map(x => ({
+      id: x.id, user: x.user, remLbl: x.expires, pctLbl: Math.round(x.ttlFrac * 100) + '%',
+      wClass: 'ns-authhz__fill--' + wbucket(x.ttlFrac),
+      tone: x.expiringSoon ? 'destructive' : (x.effState === 'idle' ? 'warning' : 'success'),
+      sel: x.id === s.s15Sel ? '1' : '0',
+      go: () => this.setState({ s15Sel: x.id }),
+    }));
+    const s15SoonId = s15Horizon.length ? s15Horizon[0] : null;
+    const s15Head = {
+      activeN: String(s15Active), liveN: String(s15Live.length), total: String(s15Total),
+      idleN: String(s15Idle), revokedN: String(s15Revoked),
+      elevatedN: String(s15Elevated),
+      elevWClass: 'ns-authratio__fill--' + wbucket(s15Elevated / Math.max(1, s15Live.length)),
+      elevPctLbl: Math.round(s15Elevated / Math.max(1, s15Live.length) * 100) + '%',
+      mfaN: s15Live.filter(x => x.mfa !== 'none').length,
+      mfaPctLbl: Math.round(s15Live.filter(x => x.mfa !== 'none').length / Math.max(1, s15Live.length) * 100) + '%',
+      mfaWClass: 'ns-authratio__fill--' + wbucket(s15Live.filter(x => x.mfa !== 'none').length / Math.max(1, s15Live.length)),
+      dist: s15Dist, horizon: s15Horizon,
+      soonUser: s15SoonId ? s15SoonId.user : '—', soonRem: s15SoonId ? s15SoonId.remLbl : '—',
+      now: s15NowLbl,
+    };
+    // Roster filter chips.
+    const s15FilterChips = [
+      { v: 'all', label: 'All' }, { v: 'active', label: 'Active' }, { v: 'idle', label: 'Idle' },
+      { v: 'elevated', label: 'Elevated' }, { v: 'revoked', label: 'Revoked' },
+    ].map(o => ({ ...o, state: s.s15Filter === o.v ? 'active' : null, set: () => this.setState({ s15Filter: o.v }) }));
+    const s15SortChips = [
+      { v: 'expiry', label: 'Soonest expiry' }, { v: 'identity', label: 'By status' },
+    ].map(o => ({ ...o, state: s.s15Sort === o.v ? 'active' : null, set: () => this.setState({ s15Sort: o.v }) }));
+    // Selected session detail.
+    const s15Selected = s15Sessions.find(x => x.id === s.s15Sel) || s15Sessions[0];
+    const s15Detail = s15Selected ? {
+      ...s15Selected,
+      kv: [
+        { k: 'principal', v: s15Selected.user + ' · ' + s15Selected.email },
+        { k: 'provider', v: s15Selected.provLbl },
+        { k: 'device', v: s15Selected.agent },
+        { k: 'ip · location', v: s15Selected.ip + ' · ' + s15Selected.loc },
+        { k: 'issued', v: s15Selected.issued + ' · ' + s15Selected.issuedAgo + ' ago' },
+        { k: 'expires', v: s15Selected.state === 'revoked' ? 'revoked' : s15Selected.expires + ' · ' + s15Selected.lifespan + ' TTL' },
+        { k: 'mfa', v: s15Selected.mfaLbl },
+        { k: 'correlation', v: s15Selected.corr },
+      ],
+      canRevoke: s15Selected.state !== 'revoked',
+      cannotRevoke: s15Selected.state === 'revoked',
+      timeline: (() => {
+        const t = [
+          { at: s15Selected.issued, kind: 'issued', tone: 'success', text: (s15Selected.provider === 'password' ? 'signin · password' : s15Selected.provider === 'api-key' ? 'api-key auth' : 'oidc.completed · ' + s15Selected.idp) },
+        ];
+        if (s15Selected.state === 'active' && /refreshed/.test(s15Selected.last)) t.push({ at: '14:00:12', kind: 'refresh', tone: 'primary', text: 'token.refreshed' });
+        if (s15Selected.state === 'idle') t.push({ at: '13:31:00', kind: 'idle', tone: 'warning', text: 'idle · no activity' });
+        if (s15Selected.state === 'revoked') t.push({ at: '12:30:00', kind: 'revoked', tone: 'destructive', text: 'session.revoked · by admin' });
+        return t;
+      })(),
+    } : null;
+    // all-revoked / empty edge derivations (kept clean by markup).
+    const s15AllRevoked = s15Live.length === 0;
+
+    // ----- S5 -----
+    const plugins = [
+      { id: 'workers', ver: 'v1.4.0', status: 'healthy', drift: null },
+      { id: 'sagas', ver: 'v1.4.0', status: 'healthy', drift: null },
+      { id: 'triggers', ver: 'v1.3.2', status: 'degraded', note: '1 degraded check', drift: null },
+      { id: 'streams', ver: 'v1.4.0', status: 'healthy', drift: null },
+      { id: 'auth', ver: 'v0.9.1', status: 'healthy', drift: 'latest 1.0.0' },
+      { id: 'dashboard', ver: 'v1.4.0', status: 'healthy', drift: null, self: true },
+    ];
+    const plugTrends = { workers: [12, 14, 11, 16, 13, 15, 17, 14, 16, 18, 15, 17], sagas: [4, 5, 4, 6, 5, 4, 6, 5, 7, 5, 6, 5], triggers: [8, 9, 7, 10, 8, 6, 5, 7, 6, 8, 7, 6], streams: [3, 4, 3, 5, 4, 5, 4, 3, 4, 5, 4, 5], auth: [2, 2, 3, 2, 2, 3, 2, 2, 2, 3, 2, 2] };
+    const s5Rows = plugins.map(p => ({
+      ...p, sBadge: badge(p.status), selState: p.id === s.s5Sel ? 'selected' : null,
+      series: (plugTrends[p.id] || [1, 1, 1]).join(','),
+      ttone: p.status === 'degraded' ? 'warning' : null,
+      select: () => { this.nav('/plugins/' + encodeURIComponent(p.id)); this.setState({ s5ShowCli: false }); },
+    }));
+    const selPlugin = plugins.find(p => p.id === s.s5Sel) || plugins[2];
+    const AX = ['Routes', 'DB', 'Workers', 'Streams', 'Triggers', 'Telemetry', 'Config', 'CLI'];
+    const wired = { workers: ['Routes', 'DB', 'Workers', 'Telemetry', 'Config', 'CLI'], sagas: ['Routes', 'DB', 'Telemetry', 'Config'], triggers: ['Routes', 'Triggers', 'Telemetry', 'Config', 'CLI'], streams: ['Routes', 'Streams', 'Telemetry'], auth: ['Routes', 'DB', 'Config'] };
+    const axisRoute = { routes: 'catalog', db: 'migrations', workers: 'workers', streams: 'streams', triggers: 'triggers', telemetry: 'config', config: 'runtime', cli: null };
+    const s5Axes = AX.map(a => {
+      const key = a.toLowerCase();
+      const isWired = (wired[selPlugin.id] || []).includes(a);
+      const r = axisRoute[key];
+      return { label: key, state: isWired ? 'wired' : null,
+        go: isWired && r ? go(r) : () => this.showToast(isWired ? 'CLI contributions: netscript ' + selPlugin.id + ' …' : 'Not wired by ' + selPlugin.id, 'info') };
+    });
+    const doctor = {
+      triggers: [
+        { probe: 'schedule parser', state: 'ok', result: 'ok' },
+        { probe: 'webhook ingress', state: 'ok', result: 'ok' },
+        { probe: 'DLQ port', state: 'degraded', result: 'degraded — no contract route' },
+      ],
+      auth: [ { probe: 'session stream', state: 'ok', result: 'ok' }, { probe: 'oidc discovery', state: 'ok', result: 'ok' } ],
+    };
+    const s5Doctor = (doctor[selPlugin.id] || [ { probe: 'registry manifest', state: 'ok', result: 'ok' }, { probe: 'contract routes', state: 'ok', result: 'ok' } ]);
+    const s5 = {
+      name: selPlugin.id, ver: selPlugin.ver, statusBadge: badge(selPlugin.status), status: selPlugin.status,
+      drift: selPlugin.drift, hasDrift: !!selPlugin.drift,
+      driftText: 'installed ' + selPlugin.ver + ' → ' + (selPlugin.drift || ''),
+      cli: 'netscript plugin doctor ' + selPlugin.id,
+      updateCli: 'netscript plugin update ' + selPlugin.id,
+    };
+
+    // ----- S6 ----- (one canonical journey: everything below shares correlationId ch_3QK9dR2eZ)
+    const CORR = 'ch_3QK9dR2eZ';
+    const runs = [
+      { id: 'run-saga', name: 'PaymentWebhookSaga', kind: 'saga', cap: 'sagas', status: 'compensating', meta: 'step 3/5 · ' + CORR },
+      { id: 'run-job', name: 'job_4183 reserve-inventory', kind: 'job', cap: 'workers', status: 'retrying', meta: 'attempt 2/3 · ' + CORR },
+      { id: 'run-trig', name: 'webhook.payment event evt_2210', kind: 'firing', cap: 'triggers', status: 'completed', meta: '2 actions · ' + CORR },
+      { id: 'run-stream', name: 'payment-events msg_88f', kind: 'delivery', cap: 'streams', status: 'failed', meta: '2/3 delivered · ' + CORR },
+    ];
+    // Console stat strip (ref 11): live counts over the correlated run set.
+    const s6Stats = [
+      { label: 'runs', value: String(runs.length), tone: null },
+      { label: 'retrying', value: String(runs.filter(r => r.status === 'retrying').length), tone: 'warning' },
+      { label: 'compensating', value: String(runs.filter(r => r.status === 'compensating').length), tone: 'primary' },
+      { label: 'failed', value: String(runs.filter(r => r.status === 'failed').length), tone: 'destructive' },
+    ];
+    const runGlyph = { saga: '⤿', job: '⚙', firing: '⚡', delivery: '≋' };
+    const s6Runs = runs.filter(r =>
+      (s.s6Status === 'all' || r.status === s.s6Status) &&
+      (s.s6Cap === 'all' || r.cap === s.s6Cap) &&
+      (!s.s6Q || r.name.toLowerCase().includes(s.s6Q.toLowerCase()))
+    ).map(r => ({ ...r, sBadge: badge(r.status), glyph: runGlyph[r.kind] || '◎', kindLabel: r.kind,
+      shortMeta: (r.meta || '').split(' · ')[0],
+      selState: r.id === s.s6Sel ? 'selected' : null, select: () => this.nav('/runs/' + CORR + '?primitive=' + encodeURIComponent(r.id)) }));
+    const s6Empty = s6Runs.length === 0;
+    const selRun = runs.find(r => r.id === s.s6Sel) || runs[0];
+    const s6Assist = s.s6AssistKind ? this.buildFlowAssist(s.s6AssistKind, selRun, null, go) : null;
+    const stepsBySel = {
+      'run-saga': [
+        { n: '1', title: 'validate', state: 'completed', meta: '12ms · attempt 1', io: '{ "chargeId": "ch_3QK9dR2eZ", "valid": true }' },
+        { n: '2', title: 'charge', state: 'completed', meta: '208ms · attempt 1', io: '{ "captureId": "cap_991" }' },
+        { n: '3', title: 'reserve-inventory → job_4183', state: 'retrying', meta: 'attempt 2/3 · redis degraded', attempts: '2/3', io: '{ "error": "E_TIMEOUT redis" }' },
+        { n: '2', title: 'charge → compensating', state: 'failed', comp: '1', meta: 'compensation step · refund issued', io: '{ "refundId": "ref_102" }' },
+        { n: '4', title: 'notify', state: 'queued', meta: 'blocked on step 3', io: null },
+      ],
+      'run-job': [
+        { n: '1', title: 'attempt 1', state: 'failed', meta: '5.0s · E_TIMEOUT', io: '{ "exitCode": 1 }' },
+        { n: '2', title: 'attempt 2', state: 'running', meta: 'backoff 2.0s · running 1.2s', attempts: '2/3', io: null },
+      ],
+      'run-trig': [
+        { n: '1', title: 'received · idempotency ok', state: 'completed', meta: 'evt_2210 · webhook', io: '{ "eventId": "evt_2210", "correlationId": "ch_3QK9dR2eZ" }' },
+        { n: '2', title: 'publishSaga PaymentWebhookReceived', state: 'completed', meta: '4ms → PaymentWebhookSaga', io: '{ "messageType": "PaymentWebhookReceived" }' },
+        { n: '3', title: 'enqueueJob reserve-inventory', state: 'completed', meta: '2ms → job_4183', io: '{ "jobId": "job_4183" }' },
+      ],
+      'run-stream': [
+        { n: '1', title: 'receipt-worker', state: 'completed', meta: 'attempt 1 · 40ms', io: '{ "delivered": true }' },
+        { n: '2', title: 'ledger-sync', state: 'retrying', meta: 'attempt 2 · 3.1s', attempts: '2', io: '{ "delivered": true }' },
+        { n: '3', title: 'analytics', state: 'failed', meta: 'attempt 3/3 · E_CONN', attempts: '3/3', io: '{ "error": "E_CONN sink unreachable" }' },
+      ],
+    };
+    const _rawSteps = stepsBySel[s.s6Sel] || [];
+    // Split the metric datum out of each step's meta for the data-point tooltip
+    // (ref 05 Work-Hour "Monday, 6h" bubble) — the value we surface on the timeline.
+    const _stepDatum = (st) => {
+      const m = (st.meta || '').match(/([0-9.]+\s*(?:ms|s))\b/i);
+      if (m) return m[1].replace(/\s+/g, '');
+      if (st.state === 'queued') return 'queued';
+      if (st.state === 'running') return 'running';
+      if (st.state === 'retrying') return 'retrying';
+      if (st.state === 'failed') return 'failed';
+      return st.state;
+    };
+    // The tooltip anchors on the newest active step (running/retrying), else the last.
+    let _tipIdx = _rawSteps.findIndex(x => x.state === 'running' || x.state === 'retrying');
+    if (_tipIdx < 0) _tipIdx = _rawSteps.length - 1;
+    const s6Steps = _rawSteps.map((st, i) => ({
+      ...st, hasIo: !!st.io && s.s6View !== 'compact',
+      datum: _stepDatum(st),
+      tip: i === _tipIdx ? '1' : null,
+      hasAttempts: !!st.attempts,
+    }));
+    // Run-summary hero: progress arc + attempt/compensation breakdown.
+    const _done = _rawSteps.filter(x => x.state === 'completed').length;
+    const _comps = _rawSteps.filter(x => x.comp).length;
+    const _stepTotal = _rawSteps.filter(x => !x.comp).length || _rawSteps.length || 1;
+    const _attemptsTotal = _rawSteps.reduce((a, x) => a + (x.attempts ? parseInt(String(x.attempts).split('/')[0], 10) || 1 : 1), 0);
+    const _runFail = selRun.status === 'failed';
+    const _runComp = selRun.status === 'compensating' || _comps > 0;
+    const s6Hero = {
+      done: String(_done), total: String(_stepTotal),
+      pct: Math.round((_done / _stepTotal) * 100),
+      gaugeTone: _runFail ? 'destructive' : (_runComp || selRun.status === 'retrying') ? 'warning' : 'success',
+      label: _done + ' of ' + _stepTotal + ' steps',
+      attempts: String(_attemptsTotal),
+      comps: String(_comps),
+      kind: selRun.kind,
+      corr: CORR, trace: (s.s6Sel === 'run-job' ? 'tr_9f21' : 'tr_9f21'),
+      started: '13:58:03', dur: selRun.kind === 'saga' ? '3m 09s' : '7.2s',
+    };
+    const s6 = {
+      name: selRun.name, statusBadge: badge(selRun.status), status: selRun.status.toUpperCase(), meta: selRun.meta,
+      corr: CORR,
+      input: selRun.id === 'run-saga' ? '{ "correlationId": "ch_3QK9dR2eZ", "webhookPayload": { "data": { "object": { "id": "ch_3QK9dR2eZ" } } } }' : '{ "correlationId": "ch_3QK9dR2eZ" }',
+      isJson: s.s6View === 'json',
+      json: JSON.stringify({ run: selRun.name, correlationId: CORR, status: selRun.status, steps: (stepsBySel[s.s6Sel] || []).map(x => ({ step: x.title, state: x.state })) }, null, 2),
+    };
+    const s6Feed = [
+      { tone: 'warning', text: 'step 3 retry scheduled · backoff 2.0s', time: '14:01:12' },
+      { tone: 'warning', text: 'redis degraded — connection pool at limit', time: '14:00:58' },
+      { tone: 'primary', text: 'compensation issued for step 2 (charge)', time: '13:59:44' },
+      { tone: 'success', text: 'step 2 charge completed · 208ms', time: '13:58:31' },
+    ];
+    const s6Logs = [
+      { ts: '14:01:12.482', res: 'workers', sev: 'warn', msg: 'retry scheduled job_4183 attempt=2 backoff=2000ms' },
+      { ts: '14:00:58.114', res: 'redis', sev: 'error', msg: 'pool exhausted (10/10) — deferring acquire' },
+      { ts: '13:59:44.902', res: 'sagas', sev: 'info', msg: 'compensate step=charge corr=ch_3QK9dR2eZ' },
+    ];
+
+    // ----- S7 -----
+    // job = compiled Deno unit; task = polyglot unit (runtime resolved from entrypoint ext).
+    // rtKey normalizes the runtime for the badge dot + `?runtime=` filter chips.
+    const RT_KEY = { deno: 'deno', python: 'python', shell: 'shell', '.net': 'dotnet', pwsh: 'pwsh' };
+    const s7JobsRaw = [
+      { name: 'reserve-inventory', kind: 'job', rt: 'deno', sched: '*/5 * * * *', human: 'every 5 min', last: 'running', trend: [8, 10, 9, 12, 11, 9, 13, 10, 7, 4, 6, 9], ttone: 'warning' },
+      { name: 'nightly-reconcile', kind: 'task', rt: 'python', sched: '0 2 * * *', human: 'daily 02:00', last: 'disabled', trend: [1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0], ttone: 'muted' },
+      { name: 'send-receipt', kind: 'task', rt: 'shell', sched: 'on-demand', human: 'idle', last: 'completed', trend: [3, 4, 3, 5, 4, 6, 5, 4, 5, 6, 5, 6], ttone: null },
+      { name: 'sync-ledger', kind: 'task', rt: '.net', sched: 'on-demand', human: 'idle', last: 'failed', trend: [4, 4, 5, 4, 3, 2, 1, 2, 1, 0, 1, 0], ttone: 'destructive' },
+      { name: 'export-report', kind: 'task', rt: 'pwsh', sched: '0 6 * * 1', human: 'mondays 06:00', last: 'queued', trend: [1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0], ttone: 'muted' },
+    ];
+    const s7Rt = s.s7Runtime || 'all';
+    const s7Query = (s.s7Q || '').trim().toLowerCase();
+    const s7Jobs = s7JobsRaw
+      .filter(j => (s7Rt === 'all' || RT_KEY[j.rt] === s7Rt) && (!s7Query || j.name.toLowerCase().includes(s7Query) || j.rt.includes(s7Query) || j.kind.includes(s7Query)))
+      .map(j => ({ ...j, rtKey: RT_KEY[j.rt] || 'deno', sBadge: badge(j.last === 'disabled' ? 'disabled' : j.last),
+      series: j.trend.join(','),
+      selState: j.name === s.s7Sel ? 'selected' : null,
+      kindBadge: j.kind === 'job' ? 'ns-badge ns-badge--secondary' : 'ns-badge ns-badge--muted',
+      select: () => this.setState({ s7Sel: j.name, sheet: 's7' }),
+      open: () => this.nav('/workers/' + (j.kind === 'task' ? 'tasks/' : 'jobs/') + encodeURIComponent(j.name)),
+      run: () => this.askConfirm({
+        title: 'Trigger execution', desc: 'Enqueues one execution of this ' + j.kind + ' now, outside its schedule.',
+        from: j.name + ' · ' + (j.sched === 'on-demand' ? 'idle' : j.sched), to: 'run now',
+        cli: 'netscript workers ' + (j.kind === 'task' ? 'run-task ' : 'trigger ') + j.name, action: 'Run now',
+        toast: 'Execution enqueued — watch the live feed',
+        apply: () => {
+          const id = 'job_' + (this.jobSeq++);
+          const item = { tone: 'primary', text: id + ' ' + j.name + ' QUEUED · manual trigger', time: this.fmtClock(this.state.clockS) };
+          this.setState(st => ({ s7Feed: [item, ...st.s7Feed].slice(0, 30) }));
+        },
+      }) }));
+    const s7Empty = s7Jobs.length === 0;
+    // selected registry row → detail sheet (right on desktop, bottom on mobile).
+    const s7SelJob = s7JobsRaw.find(j => j.name === s.s7Sel) || s7JobsRaw[0];
+    const s7Detail = { name: s7SelJob.name, kind: s7SelJob.kind, rt: s7SelJob.rt, rtKey: RT_KEY[s7SelJob.rt] || 'deno',
+      sBadge: badge(s7SelJob.last === 'disabled' ? 'disabled' : s7SelJob.last), last: s7SelJob.last,
+      sched: s7SelJob.sched, human: s7SelJob.human, kindBadge: s7SelJob.kind === 'job' ? 'ns-badge ns-badge--secondary' : 'ns-badge ns-badge--muted',
+      queue: s7SelJob.name === 'reserve-inventory' ? 'inventory' : s7SelJob.name === 'sync-ledger' ? 'ledger' : 'default',
+      open: () => this.nav('/workers/' + (s7SelJob.kind === 'task' ? 'tasks/' : 'jobs/') + encodeURIComponent(s7SelJob.name)),
+      run: () => this.askConfirm({
+        title: 'Trigger execution', desc: 'Enqueues one execution of this ' + s7SelJob.kind + ' now, outside its schedule.',
+        from: s7SelJob.name + ' · ' + (s7SelJob.sched === 'on-demand' ? 'idle' : s7SelJob.sched), to: 'run now',
+        cli: 'netscript workers ' + (s7SelJob.kind === 'task' ? 'run-task ' : 'trigger ') + s7SelJob.name, action: 'Run now',
+        toast: 'Execution enqueued — watch the live feed',
+        apply: () => { const id = 'job_' + (this.jobSeq++); const item = { tone: 'primary', text: id + ' ' + s7SelJob.name + ' QUEUED · manual trigger', time: this.fmtClock(this.state.clockS) }; this.setState(st => ({ s7Feed: [item, ...st.s7Feed].slice(0, 30) })); },
+      }) };
+    // recent executions for the selected row (detail-sheet mini-timeline)
+    const s7DetailRuns = [
+      { n: 'job_4183', state: 'retrying', meta: 'attempt 2/3 · running', datum: 'live' },
+      { n: 'job_4180', state: 'completed', meta: 'completed', datum: '412ms' },
+      { n: 'job_4166', state: 'completed', meta: 'completed', datum: '388ms' },
+    ];
+    // runtime distribution across the registry (bespoke stacked bar + legend)
+    const s7RtMix = [
+      { rt: 'deno', label: 'Deno', count: 9 },
+      { rt: 'python', label: 'Python', count: 3 },
+      { rt: 'shell', label: 'Shell', count: 2 },
+      { rt: 'dotnet', label: '.NET', count: 1 },
+      { rt: 'pwsh', label: 'PowerShell', count: 1 },
+    ];
+    const s7RtChips = [
+      { rt: 'all', label: 'all' }, { rt: 'deno', label: 'deno' }, { rt: 'python', label: 'python' },
+      { rt: 'shell', label: 'shell' }, { rt: 'dotnet', label: '.net' }, { rt: 'pwsh', label: 'pwsh' },
+    ].map(c => ({ ...c, state: s7Rt === c.rt ? 'active' : null, set: () => this.setState({ s7Runtime: c.rt }) }));
+    const s7StatTiles = [
+      { label: 'jobs', value: '11', tone: null }, { label: 'tasks', value: '5', tone: null },
+      { label: 'running', value: '4', tone: 'warning' }, { label: 'failed', value: '31', tone: 'destructive' },
+      { label: 'success', value: '97%', tone: 'primary' },
+    ];
+    const s7Drift = [
+      { probe: 'reserve-inventory · */5 * * * *', state: 'ok', result: 'live scheduler agrees', cause: null },
+      { probe: 'nightly-reconcile · 0 2 * * *', state: 'degraded', result: 'scheduled in config — disabled by override v43', link: 'runtime', cause: 'override v43' },
+      { probe: 'cache-warm · 30 * * * *', state: 'degraded', result: 'disabled by override v43 — not scheduled', link: 'runtime', cause: 'override v43' },
+      { probe: 'export-report · 0 6 * * 1', state: 'ok', result: 'live scheduler agrees', cause: null },
+    ].map(d => ({ ...d, openCause: d.link ? go(d.link) : null }));
+    const s7DriftCount = String(s7Drift.filter(d => d.state !== 'ok').length);
+    const s7Pool = [
+      { probe: 'inventory queue', state: 'ok', result: '2 consumers · heartbeat 1s ago' },
+      { probe: 'ledger queue', state: 'failed', result: '0 consumers — nothing polling this queue' },
+      { probe: 'default queue', state: 'ok', result: '1 consumer · heartbeat 3s ago' },
+    ];
+
+    // ----- S8 -----
+    // Real instance status enum: active | completed | failed | pending | compensating
+    // (no COMPENSATED terminal — a rolled-back instance settles to completed/failed).
+    const sagas = [
+      { id: 'pw', saga: 'PaymentWebhookSaga', corr: CORR, status: 'compensating', tier: 'durable' },
+      { id: 'csv', saga: 'CsvImportSaga', corr: 'sha1:88fe02a1', status: 'completed', tier: 'durable', note: 'settled after compensation' },
+      { id: 'batch', saga: 'ProductBatchImportSaga', corr: 'batch_2214', status: 'failed', tier: 'durable' },
+      { id: 'export', saga: 'ProductCatalogExportSaga', corr: 'exp_0907', status: 'active', tier: 'at-most-once' },
+    ];
+    const s8Rows = sagas.map(g => ({ ...g, sBadge: badge(g.status === 'active' ? 'running' : g.status), selState: g.id === s.s8Sel ? 'selected' : null, tone: ({ compensating: 'warning', completed: 'success', failed: 'destructive', active: 'primary' })[g.status] || 'muted', select: () => { this.setState({ s8Sel: g.id, s8Node: null, sheet: null }); this.nav('/sagas/' + encodeURIComponent(g.saga) + '/' + encodeURIComponent(g.corr)); } }));
+    const selSaga = sagas.find(g => g.id === s.s8Sel) || sagas[0];
+    // Saga state machine AS A NODE GRAPH (V4b canvas, ref 21 n8n flow-builder).
+    // Each node carries a grid position (col/lane) + rich detail for the
+    // click-to-open properties sidebar (status/timing/attempt/payload/in-out
+    // transitions/node action). The forward lane (row 1) flows left→right; the
+    // rollback lane (row 2) is the distinct dashed reverse branch. `edge` is the
+    // outgoing branch label toward the next forward node; `crossEdge` labels the
+    // forward→compensation drop into the rollback lane. Instances with no
+    // compensation render ONLY the forward lane (data-driven).
+    const s8MachineBy = {
+      pw: { hasComp: true, crossFrom: 'reserving', crossEdge: 'reserve failed → compensate',
+        // rich cross-edge annotation drawn on the wire: payload snippet + error badge
+        crossAnno: { badge: 'E_TIMEOUT', payload: 'job_4183 · attempt 2/3' },
+        // definition topology (normalized 0..1 coords) for the bottom-right mini-map;
+        // `path` = the def-node ids the current instance actually traversed.
+        def: { fwd: [['pending', .08], ['charged', .3], ['reserving', .52], ['notify', .74], ['done', .94]],
+          comp: [['refund', .52], ['settled', .74]],
+          cross: ['reserving', 'refund'], path: ['pending', 'charged', 'reserving', 'refund', 'settled'], activeLane: 'comp' },
+        // per-lane compensation-health stat strips (ref-11 stat strip, adapted)
+        laneHealth: { fwd: [['avg latency', '208ms'], ['retry rate', '33%', 'warning'], ['states', '3']],
+          comp: [['comp success', '50%', 'warning'], ['refunds', '1'], ['settling', 'yes', 'warning']] },
+        // left-edge step execution rail: ordered pips (current enlarged)
+        rail: [['pending', 'done'], ['charged', 'done'], ['reserving', 'now'], ['refund', 'comp'], ['settled', 'wait']],
+        forward: [
+          { id: 'charged', name: 'charged', glyph: '✓', cap: 'capture', state: 'completed', col: 1, edge: 'enqueue job',
+            timing: '208ms', attempt: '1/1', payload: '{ "captureId": "cap_991" }',
+            trans: [{ dir: 'in', label: 'pending → charged' }, { dir: 'out', label: 'charged → reserving' }] },
+          { id: 'reserving', name: 'reserving', glyph: '⚙', cap: 'inventory', state: 'retrying', current: '1', col: 2, edge: 'on reserve',
+            timing: '—', attempt: '2/3', payload: '{ "queue": "inventory", "jobId": "job_4183", "error": "E_TIMEOUT" }',
+            action: 'retry', trans: [{ dir: 'in', label: 'charged → reserving' }, { dir: 'out', label: 'reserving → notify (blocked)' }, { dir: 'comp', label: 'reserving ⇢ refund (compensating)' }] },
+          { id: 'notify', name: 'notify', glyph: '◷', cap: 'blocked', state: 'queued', col: 3, edge: null,
+            timing: 'queued', attempt: '0/1', payload: null,
+            trans: [{ dir: 'in', label: 'reserving → notify' }] },
+        ],
+        comp: [
+          { id: 'refund', name: 'refund', glyph: '⟲', cap: 'compensate charge', state: 'failed', current: '1', col: 2, lane: 'comp', edge: 'settle',
+            timing: '—', attempt: '1/1', payload: '{ "refundId": "ref_102", "status": "issued" }',
+            action: 'force', trans: [{ dir: 'comp', label: 'reserving ⇢ refund' }, { dir: 'out', label: 'refund → settled' }] },
+          { id: 'settled', name: 'settled', glyph: '◑', cap: 'terminal', state: 'queued', col: 3, lane: 'comp', edge: null,
+            timing: 'pending', attempt: '0/1', payload: null,
+            trans: [{ dir: 'in', label: 'refund → settled' }] },
+        ] },
+      csv: { hasComp: true, crossFrom: 'importing', crossEdge: 'partial batch failed → rollback',
+        crossAnno: { badge: 'PARTIAL', payload: '88 rows · re-ran clean' },
+        def: { fwd: [['pending', .1], ['parsing', .34], ['importing', .58], ['completed', .86]],
+          comp: [['rollback', .58]],
+          cross: ['importing', 'rollback'], path: ['pending', 'parsing', 'importing', 'rollback', 'completed'], activeLane: 'fwd' },
+        laneHealth: { fwd: [['avg latency', '2.7s'], ['retry rate', '0%', 'success'], ['states', '3']],
+          comp: [['comp success', '100%', 'success'], ['rows rolled', '88'], ['re-ran', 'clean', 'success']] },
+        rail: [['pending', 'done'], ['parsing', 'done'], ['importing', 'done'], ['rollback', 'comp-done'], ['completed', 'now']],
+        forward: [
+          { id: 'parsing', name: 'parsing', glyph: '✓', cap: 'ingest', state: 'completed', col: 1, edge: 'import',
+            timing: '1.2s', attempt: '1/1', payload: '{ "contentHash": "sha1:88fe02a1" }',
+            trans: [{ dir: 'in', label: 'pending → parsing' }, { dir: 'out', label: 'parsing → importing' }] },
+          { id: 'importing', name: 'importing', glyph: '✓', cap: '1,204 rows', state: 'completed', col: 2, edge: 'partial fail',
+            timing: '4.1s', attempt: '1/1', payload: '{ "rows": 1204, "rolledBack": 88 }',
+            trans: [{ dir: 'in', label: 'parsing → importing' }, { dir: 'out', label: 'importing → completed' }, { dir: 'comp', label: 'importing ⇢ rollback 88' }] },
+          { id: 'completed', name: 'completed', glyph: '✓', cap: 'terminal', state: 'completed', current: '1', col: 3, edge: null,
+            timing: 'settled', attempt: '1/1', payload: '{ "state": "completed" }',
+            trans: [{ dir: 'in', label: 'importing → completed' }] },
+        ],
+        comp: [
+          { id: 'rollback88', name: 'rollback 88', glyph: '⟲', cap: 'compensate batch', state: 'completed', col: 2, lane: 'comp', edge: 're-ran clean',
+            timing: '820ms', attempt: '1/1', payload: '{ "rolledBack": 88, "reRan": true }',
+            trans: [{ dir: 'comp', label: 'importing ⇢ rollback 88' }, { dir: 'out', label: 'rollback → re-ran clean' }] },
+        ] },
+      batch: { hasComp: true, crossFrom: 'validation', crossEdge: 'validation failed → cleanup',
+        crossAnno: { badge: 'E_SCHEMA', payload: '3 errors · schema mismatch' },
+        def: { fwd: [['pending', .12], ['staging', .4], ['validation', .68]],
+          comp: [['cleanup', .68], ['failed', .92]],
+          cross: ['validation', 'cleanup'], path: ['pending', 'staging', 'validation', 'cleanup', 'failed'], activeLane: 'comp' },
+        laneHealth: { fwd: [['avg latency', '640ms'], ['retry rate', '0%', 'success'], ['states', '2']],
+          comp: [['comp success', '100%', 'success'], ['cleaned', '1'], ['outcome', 'failed', 'destructive']] },
+        rail: [['staging', 'done'], ['validation', 'fail'], ['cleanup', 'comp-done'], ['failed', 'terminal']],
+        forward: [
+          { id: 'staging', name: 'staging', glyph: '✓', cap: 'batch_2214', state: 'completed', col: 1, edge: 'validate',
+            timing: '640ms', attempt: '1/1', payload: '{ "batchId": "batch_2214" }',
+            trans: [{ dir: 'in', label: 'pending → staging' }, { dir: 'out', label: 'staging → validation' }] },
+          { id: 'validation', name: 'validation', glyph: '✕', cap: '3 products', state: 'failed', current: '1', col: 2, edge: null,
+            timing: '—', attempt: '1/1', payload: '{ "errors": 3, "reason": "schema mismatch" }',
+            trans: [{ dir: 'in', label: 'staging → validation' }, { dir: 'comp', label: 'validation ⇢ cleanup' }] },
+        ],
+        comp: [
+          { id: 'cleanup', name: 'cleanup', glyph: '⟲', cap: 'compensate stage', state: 'completed', col: 2, lane: 'comp', edge: 'to terminal',
+            timing: '410ms', attempt: '1/1', payload: '{ "rolledBack": "batch_2214" }',
+            trans: [{ dir: 'comp', label: 'validation ⇢ cleanup' }, { dir: 'out', label: 'cleanup → failed' }] },
+          { id: 'failed', name: 'failed', glyph: '✕', cap: 'terminal', state: 'failed', col: 3, lane: 'comp', edge: null,
+            timing: 'terminal', attempt: '1/1', payload: '{ "state": "failed" }',
+            trans: [{ dir: 'in', label: 'cleanup → failed' }] },
+        ] },
+      export: { hasComp: false, crossFrom: null, crossEdge: null, crossAnno: null,
+        // no compensation lane at all — the mini-map, health strip and rail all
+        // adapt to a forward-only, at-most-once export instance (data-driven proof)
+        def: { fwd: [['pending', .14], ['querying', .44], ['writing', .74], ['done', .96]],
+          comp: [], cross: null, path: ['pending', 'querying', 'writing'], activeLane: 'fwd' },
+        laneHealth: { fwd: [['avg latency', '120ms'], ['retry rate', '0%', 'success'], ['streaming', '40k']],
+          comp: null },
+        rail: [['pending', 'done'], ['querying', 'done'], ['writing', 'now'], ['done', 'wait']],
+        forward: [
+          { id: 'querying', name: 'querying', glyph: '✓', cap: 'exp_0907', state: 'completed', col: 1, edge: 'stream',
+            timing: '120ms', attempt: '1/1', payload: '{ "exportId": "exp_0907" }',
+            trans: [{ dir: 'in', label: 'pending → querying' }, { dir: 'out', label: 'querying → writing' }] },
+          { id: 'writing', name: 'writing', glyph: '≋', cap: '40k rows', state: 'running', current: '1', col: 2, edge: null,
+            timing: 'streaming', attempt: '1/1', payload: '{ "rows": 40000, "streaming": true }',
+            trans: [{ dir: 'in', label: 'querying → writing' }] },
+        ],
+        comp: [] },
+    };
+    const s8Machine = s8MachineBy[s.s8Sel] || s8MachineBy.pw;
+    // stash the current machine for the post-mount edge measurer (getBoundingClientRect geometry).
+    // The minimap + step-rail geometry are ALSO drawn from this (measureSagaEdges), so they stay
+    // JS-measured and recompute on resize / route-enter / instance-switch / node-select.
+    this._sagaMachine = s8Machine;
+    // per-lane compensation-health stat strips (ref-11 stat strip → saga lanes)
+    const mkHealth = (arr) => (arr || []).map(([label, value, tone]) => ({ label, value, tone: tone || null }));
+    const s8FwdHealth = mkHealth(s8Machine.laneHealth && s8Machine.laneHealth.fwd);
+    const s8CompHealth = mkHealth(s8Machine.laneHealth && s8Machine.laneHealth.comp);
+    const s8HasCompHealth = !!(s8Machine.laneHealth && s8Machine.laneHealth.comp && s8Machine.laneHealth.comp.length);
+    // left-edge step execution rail (pending → … → terminal); current step enlarged
+    const s8RailStateOf = (k) => ({ done: 'done', 'comp-done': 'comp-done', now: 'now', comp: 'comp', wait: 'wait', fail: 'fail', terminal: 'terminal' })[k] || 'wait';
+    const s8Rail = (s8Machine.rail || []).map(([name, k]) => ({ name, railState: s8RailStateOf(k), isNow: k === 'now', tone: (k === 'fail' || k === 'terminal') ? 'destructive' : (k === 'comp' || k === 'comp-done') ? 'warning' : (k === 'now') ? 'primary' : (k === 'done') ? 'success' : 'muted' }));
+    // Flat node list for the canvas + the properties sidebar. Each node knows
+    // its lane, whether it is currently selected, and how to open the sidebar.
+    const s8AllNodes = [
+      ...s8Machine.forward.map(n => ({ ...n, lane: n.lane || 'fwd' })),
+      ...(s8Machine.hasComp ? s8Machine.comp.map(n => ({ ...n, lane: 'comp' })) : []),
+    ];
+    const s8NodeToneOf = (st) => ({ completed: 'success', running: 'warning', retrying: 'warning', failed: 'destructive', queued: 'muted' })[st] || 'muted';
+    const s8NodeStatusOf = (st) => ({ completed: 'settled', running: 'in flight', retrying: 'retrying', failed: 'failed', queued: 'queued' })[st] || st;
+    const s8SelNode = s8AllNodes.find(n => n.id === s.s8Node) || null;
+    // the canvas node view-model — click opens the properties sidebar (+ mobile sheet)
+    // node role for chromatic identity (ref-21): forward-path = teal, compensation
+    // = copper, terminal = neutral. A node is terminal if it is a settle/end state.
+    const s8TerminalIds = new Set(['notify', 'settled', 'failed', 'completed', 'done']);
+    const s8RoleOf = (n) => s8TerminalIds.has(n.id) ? 'terminal' : (n.lane === 'comp' ? 'comp' : 'fwd');
+    // ghost = a queued/blocked state that is in the saga SCOPE but not yet executed
+    const s8IsGhost = (n) => n.state === 'queued';
+    const s8CanvasNodes = s8AllNodes.map(n => ({
+      ...n,
+      toneAttr: s8NodeToneOf(n.state),
+      role: s8RoleOf(n),
+      ghost: s8IsGhost(n) ? '1' : null,
+      selAttr: (s8SelNode && s8SelNode.id === n.id) ? '1' : null,
+      pick: () => {
+        const mob = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 1023px)').matches;
+        this.setState({ s8Node: n.id, sheet: mob ? 's8' : null });
+      },
+    }));
+    const s8FwdNodes = s8CanvasNodes.filter(n => n.lane !== 'comp');
+    const s8CompNodes = s8CanvasNodes.filter(n => n.lane === 'comp');
+    const s8StepsBy = {
+      pw: [
+        { n: '1', title: 'pending → charged', state: 'completed', meta: '208ms', datum: '208ms', io: '{ "captureId": "cap_991" }' },
+        { n: '2', title: 'charged → reserving', state: 'completed', meta: '12ms · enqueueJob reserve-inventory → job_4183', datum: '12ms', io: '{ "queue": "inventory", "jobId": "job_4183" }' },
+        { n: '3', title: 'reserving → (reserve failed)', state: 'retrying', meta: 'attempt 2/3 · E_TIMEOUT redis', attempts: '2/3', datum: 'E_TIMEOUT', io: '{ "error": "E_TIMEOUT" }' },
+        { n: '2', title: 'charge → refund', state: 'failed', comp: '1', meta: 'compensating step 2 · refund issued', datum: 'ref_102', io: '{ "refundId": "ref_102" }' },
+        { n: '4', title: 'notify', state: 'queued', meta: 'blocked on step 3', datum: 'queued', io: null },
+      ],
+      csv: [
+        { n: '1', title: 'pending → parsing', state: 'completed', meta: '1.2s · contentHash sha1:88fe02a1', datum: '1.2s', io: null },
+        { n: '2', title: 'parsing → importing', state: 'completed', meta: '4.1s · 1,204 rows', datum: '1,204', io: null },
+        { n: '2', title: 'import rollback (partial batch)', state: 'completed', comp: '1', meta: 'compensated 88 rows, re-ran clean', datum: '88 rows', io: '{ "rolledBack": 88 }' },
+        { n: '3', title: 'importing → completed', state: 'completed', meta: 'settled after compensation', datum: 'settled', io: null },
+      ],
+      batch: [
+        { n: '1', title: 'pending → staging', state: 'completed', meta: '640ms · batchId batch_2214', datum: '640ms', io: null },
+        { n: '2', title: 'staging → (validation failed)', state: 'failed', meta: 'schema mismatch on 3 products', datum: '3 errors', io: '{ "errors": 3 }' },
+        { n: '1', title: 'staging cleanup', state: 'completed', comp: '1', meta: 'compensated step 1 · terminal failed', datum: 'rolled back', io: null },
+      ],
+      export: [
+        { n: '1', title: 'pending → querying', state: 'completed', meta: '120ms · exportId exp_0907', datum: '120ms', io: null },
+        { n: '2', title: 'querying → writing', state: 'running', meta: 'streaming 40k rows', datum: '40k', io: null },
+      ],
+    };
+    const s8Steps = s8StepsBy[s.s8Sel] || [];
+    // ---- Sortable columnar step table (ref-11 dense data table) ----------------
+    // Replaces the airy timeline bullet list with a tight table:
+    // step / timestamp / duration / error / attempt. Sortable headers; the
+    // compensation rows carry a ↩ marker. Data-driven per instance.
+    const s8StepTsBy = { pw: '13:58', csv: '13:40', batch: '13:22', export: '14:00' };
+    const s8StepRowsBy = {
+      pw: [
+        ['1', 'pending → charged', '13:58:12', '208ms', null, '1/1', 'completed', null],
+        ['2', 'charged → reserving', '13:58:40', '12ms', null, '1/1', 'completed', null],
+        ['3', 'reserving (reserve)', '13:59:12', '—', 'E_TIMEOUT', '2/3', 'retrying', null],
+        ['2c', 'charge → refund', '13:59:44', '96ms', null, '1/1', 'failed', 'comp'],
+        ['4', 'notify', '—', 'queued', null, '0/1', 'queued', null],
+      ],
+      csv: [
+        ['1', 'pending → parsing', '13:40:01', '1.2s', null, '1/1', 'completed', null],
+        ['2', 'parsing → importing', '13:40:22', '4.1s', null, '1/1', 'completed', null],
+        ['2c', 'import rollback', '13:40:55', '820ms', 'PARTIAL', '1/1', 'completed', 'comp'],
+        ['3', 'importing → completed', '13:41:03', '30ms', null, '1/1', 'completed', null],
+      ],
+      batch: [
+        ['1', 'pending → staging', '13:21:40', '640ms', null, '1/1', 'completed', null],
+        ['2', 'staging → validation', '13:22:05', '—', 'E_SCHEMA', '1/1', 'failed', null],
+        ['1c', 'staging cleanup', '13:22:18', '410ms', null, '1/1', 'completed', 'comp'],
+      ],
+      export: [
+        ['1', 'pending → querying', '14:00:02', '120ms', null, '1/1', 'completed', null],
+        ['2', 'querying → writing', '14:00:05', 'streaming', null, '1/1', 'running', null],
+      ],
+    };
+    const s8StepCols = [
+      { key: 'seq', label: 'step', num: false },
+      { key: 'title', label: 'transition', num: false },
+      { key: 'ts', label: 'timestamp', num: false },
+      { key: 'dur', label: 'duration', num: false },
+      { key: 'err', label: 'error', num: false },
+      { key: 'attempt', label: 'attempt', num: false },
+    ];
+    const s8SortKey = s.s8SortKey || 'seq', s8SortDir = s.s8SortDir || 'asc';
+    let s8StepBase = (s8StepRowsBy[s.s8Sel] || []).map((r, i) => ({
+      idx: i, seq: r[0], title: r[1], ts: r[2], dur: r[3], err: r[4], attempt: r[5],
+      state: r[6], comp: r[7] === 'comp' ? '1' : null,
+      stateBadge: badge(r[6]), errTone: r[4] ? 'destructive' : null,
+    }));
+    const s8SortVal = (row) => { const v = row[s8SortKey]; return v == null ? '' : String(v); };
+    s8StepBase = s8StepBase.slice().sort((a, b) => {
+      const av = s8SortVal(a), bv = s8SortVal(b);
+      const c = av.localeCompare(bv, undefined, { numeric: true });
+      return s8SortDir === 'asc' ? c : -c;
+    });
+    const s8StepTable = { cols: s8StepCols.map(c => ({ ...c, active: c.key === s8SortKey, dir: c.key === s8SortKey ? s8SortDir : null, sort: () => this.setState(st => ({ s8SortKey: c.key, s8SortDir: (st.s8SortKey === c.key && st.s8SortDir === 'asc') ? 'desc' : 'asc' })) })), rows: s8StepBase };
+    // hero derivation: settled forward states / total, tone by status
+    const s8HeroBy = {
+      pw: { done: '2', total: '4', pct: 50, gaugeTone: 'warning', comps: '1', attempts: '2', fwd: 'charged → reserving → notify', compLabel: 'refund issued · settling' },
+      csv: { done: '3', total: '3', pct: 100, gaugeTone: 'success', comps: '1', attempts: '1', fwd: 'parsing → importing → completed', compLabel: 'rolled back 88 rows, re-ran' },
+      batch: { done: '1', total: '2', pct: 50, gaugeTone: 'destructive', comps: '1', attempts: '1', fwd: 'staging → validation', compLabel: 'staging cleaned · terminal fail' },
+      export: { done: '1', total: '2', pct: 50, gaugeTone: 'warning', comps: '0', attempts: '1', fwd: 'querying → writing', compLabel: 'none — no rollback triggered' },
+    };
+    const s8Hero = { label: (s8HeroBy[s.s8Sel] || s8HeroBy.pw).done + ' of ' + (s8HeroBy[s.s8Sel] || s8HeroBy.pw).total + ' states', ...(s8HeroBy[s.s8Sel] || s8HeroBy.pw) };
+    // assist explaining WHY compensation triggered (grounded), null when none did
+    const s8AssistBy = {
+      pw: { head: 'Why is this compensating?', summary: 'The reserve step failed twice with E_TIMEOUT against the redis pool, so the saga issued a refund to compensate the charge. It is now settling the rollback lane before terminating.', meta: 'grounded · read-only · derived from getInstanceHistory', grounding: [{ label: 'reserve failed · E_TIMEOUT', go: () => this.nav('/runs/' + CORR + '?primitive=run-job') }, { label: 'job_4183 attempt 2/3', go: () => this.nav('/workers/jobs/reserve-inventory/executions/job_4183') }] },
+      csv: { head: 'Why did this compensate then complete?', summary: 'A partial batch failed mid-import, so the saga rolled back 88 rows, then re-ran the batch cleanly and settled to completed. Compensation here recovered the instance rather than failing it.', meta: 'grounded · read-only · derived from getInstanceHistory', grounding: [{ label: 'import rollback · 88 rows', go: () => this.nav('/runs/' + CORR) }] },
+      batch: { head: 'Why did this fail after compensating?', summary: 'Validation rejected 3 products, so the saga compensated the staging step (cleanup), but the instance still settled to terminal failed — compensation cleaned up side-effects, it did not recover the run.', meta: 'grounded · read-only · derived from getInstanceHistory', grounding: [{ label: 'validation failed · 3 products', go: () => this.nav('/dlq') }] },
+      export: null,
+    };
+    const s8Assist = s8AssistBy[s.s8Sel] || null;
+    const s8TierKey = { durable: 'durable', 'at-most-once': 'at-most-once' };
+    const s8StatTiles = [
+      { label: 'instances', value: '4', tone: null },
+      { label: 'compensating', value: '1', tone: 'warning' },
+      { label: 'completed', value: '1', tone: 'primary' },
+      { label: 'failed', value: '1', tone: 'destructive' },
+    ];
+    // ---- Saga-health composite strip (replaces four plain number cards) --------
+    // A single bespoke health band across the fleet: a compensation-rate meter,
+    // an in-flight vs terminal split, a state distribution, and a forward↔rollback
+    // ratio. Derived from the 4 instances so it reads as a saga-native summary.
+    const s8Fleet = { total: 4, compensating: 1, completed: 1, failed: 1, active: 1 };
+    const s8InFlight = s8Fleet.compensating + s8Fleet.active; // 2 in-flight
+    const s8Terminal = s8Fleet.completed + s8Fleet.failed;    // 2 terminal
+    const s8CompRate = Math.round((s8Fleet.compensating / s8Fleet.total) * 100); // 25%
+    const s8Health = {
+      // compensation-rate radial meter (how much of the fleet is unwinding)
+      compRate: s8CompRate, compRateLabel: s8CompRate + '%', compCount: s8Fleet.compensating, total: s8Fleet.total,
+      // distribution of instances by state → a stacked channel bar
+      dist: [
+        { key: 'compensating', label: 'compensating', value: s8Fleet.compensating, tone: 'warning' },
+        { key: 'active', label: 'in flight', value: s8Fleet.active, tone: 'primary' },
+        { key: 'completed', label: 'completed', value: s8Fleet.completed, tone: 'success' },
+        { key: 'failed', label: 'failed', value: s8Fleet.failed, tone: 'destructive' },
+      ].map(d => ({ ...d, pct: Math.round((d.value / s8Fleet.total) * 100) })),
+      // in-flight vs terminal split
+      split: { inFlight: s8InFlight, terminal: s8Terminal, inFlightPct: Math.round((s8InFlight / s8Fleet.total) * 100) },
+      // forward-vs-rollback ratio across the fleet's executed edges
+      ratio: { fwd: 11, comp: 4, compPct: Math.round((4 / 15) * 100) },
+    };
+    const s8 = { saga: selSaga.saga, id: selSaga.corr, statusBadge: badge(selSaga.status === 'active' ? 'running' : selSaga.status), status: selSaga.status, tier: selSaga.tier, tierKey: s8TierKey[selSaga.tier] || 'durable',
+      history: 'getInstanceHistory({ sagaName: "' + selSaga.saga + '", correlationId: "' + selSaga.corr + '" })',
+      summary: selSaga.id === 'pw' ? 'step 3 of 5 · compensating step 2 · retried once' : selSaga.note ? selSaga.note : selSaga.id === 'batch' ? 'compensated, then terminal failed' : 'in flight' };
+    // ---- Typed transition event-stream, grouped by instance --------------------
+    // Each row is a typed transition: advance (→) / compensate (↩) / terminal (◼) /
+    // fault (✕). Grouped under an instance header so the stream reads as saga
+    // history, not a generic activity list. Glyph + tone come from the type.
+    const s8TransGlyph = { advance: '→', compensate: '↩', terminal: '◼', fault: '✕' };
+    const s8FeedGroupsRaw = [
+      { saga: 'PaymentWebhookSaga', corr: 'ch_3QK9dR2eZ', status: 'compensating', rows: [
+        { type: 'compensate', label: 'charge → refund', detail: 'compensating step 2', time: '13:59:44', tone: 'warning' },
+        { type: 'fault', label: 'reserve failed', detail: 'E_TIMEOUT · redis pool', time: '13:59:12', tone: 'destructive' },
+        { type: 'advance', label: 'charged → reserving', detail: 'enqueue job_4183', time: '13:58:40', tone: 'primary' },
+      ] },
+      { saga: 'CsvImportSaga', corr: 'sha1:88fe02a1', status: 'completed', rows: [
+        { type: 'terminal', label: 'importing → completed', detail: 're-ran clean', time: '13:41:03', tone: 'success' },
+        { type: 'compensate', label: 'rollback 88 rows', detail: 'partial batch recovered', time: '13:40:55', tone: 'warning' },
+      ] },
+      { saga: 'ProductBatchImportSaga', corr: 'batch_2214', status: 'failed', rows: [
+        { type: 'terminal', label: 'cleanup → failed', detail: 'terminal after compensation', time: '13:22:18', tone: 'destructive' },
+        { type: 'fault', label: 'validation failed', detail: '3 products · schema mismatch', time: '13:22:05', tone: 'destructive' },
+      ] },
+    ];
+    const s8FeedGroups = s8FeedGroupsRaw.map(g => ({
+      ...g, sBadge: badge(g.status === 'active' ? 'running' : g.status), corrTone: ({ compensating: 'warning', completed: 'success', failed: 'destructive' })[g.status] || 'muted',
+      rows: g.rows.map(r => ({ ...r, glyph: s8TransGlyph[r.type] || '·', typeLabel: r.type })),
+    }));
+    // node action wiring (retry failed step / force-complete compensation) —
+    // the existing confirm+CLI flows, reused for the per-node sidebar actions.
+    const s8NodeAction = (kind) => kind === 'retry'
+      ? { label: 'Retry this step', cls: 'ns-btn ns-btn--secondary ns-btn--sm', run: () => this.setState({ sheet: null }, () => this.askConfirm({ title: 'Retry failed saga step', desc: 'Retries the failed reserve step for this durable instance.', from: s8.saga + ' · reserve failed', to: 'reserve retry enqueued', cli: 'netscript sagas retry-step ' + s8.saga + ' --correlation-id ' + s8.id + ' --step reserve', action: 'Retry step', toast: 'Saga step retry enqueued', resultPath: '/sagas/' + encodeURIComponent(s8.saga) + '/' + encodeURIComponent(s8.id) })) }
+      : kind === 'force'
+      ? { label: 'Force-complete compensation', cls: 'ns-btn ns-btn--destructive ns-btn--sm', run: () => this.setState({ sheet: null }, () => this.askConfirm({ title: 'Force-complete compensation', desc: 'Marks the compensation sequence complete after operator verification.', from: s8.saga + ' · compensating', to: 'compensation complete', cli: 'netscript sagas force-complete ' + s8.saga + ' --correlation-id ' + s8.id, action: 'Force complete', danger: true, toast: 'Saga compensation force-completed', resultPath: '/sagas/' + encodeURIComponent(s8.saga) + '/' + encodeURIComponent(s8.id) })) }
+      : null;
+    // The PROPERTIES SIDEBAR view-model. Default (no node selected) = instance
+    // summary (gauge + KV + why-assist + instance actions). A selected node =
+    // that state's detail (status/timing/attempt/payload/in-out transitions/
+    // node action). Both feed the same right sidebar + the mobile bottom sheet.
+    const s8Props = s8SelNode ? {
+      mode: 'node', nodeId: s8SelNode.id, glyph: s8SelNode.glyph, name: s8SelNode.name,
+      lane: s8SelNode.lane === 'comp' ? 'compensation' : 'forward',
+      laneAttr: s8SelNode.lane === 'comp' ? 'comp' : null,
+      statusLabel: s8NodeStatusOf(s8SelNode.state),
+      statusBadge: badge(s8SelNode.state),
+      cap: s8SelNode.cap, timing: s8SelNode.timing, attempt: s8SelNode.attempt,
+      payload: s8SelNode.payload, hasPayload: !!s8SelNode.payload,
+      trans: (s8SelNode.trans || []).map(t => ({ ...t, glyph: t.dir === 'in' ? '←' : t.dir === 'out' ? '→' : '⇢', laneAttr: t.dir === 'comp' ? 'comp' : null })),
+      action: s8NodeAction(s8SelNode.action),
+      hasAction: !!s8NodeAction(s8SelNode.action),
+    } : { mode: 'summary' };
+    // Tabbed node inspector (ref-11 drawer tabs): State / Transitions / Evidence / Actions.
+    // Keeps "why is this compensating?" + "retry this step" out of one long scroll.
+    const s8TabDefs = [
+      { id: 'state', label: 'State' },
+      { id: 'trans', label: 'Transitions' },
+      { id: 'evidence', label: 'Evidence' },
+      { id: 'actions', label: 'Actions' },
+    ];
+    const s8ActiveTab = s8SelNode ? (s.s8Tab || 'state') : 'state';
+    const s8Tabs = s8TabDefs.map(t => ({ ...t, active: t.id === s8ActiveTab ? '1' : null, pick: () => this.setState({ s8Tab: t.id }) }));
+    const s8TabIs = { state: s8ActiveTab === 'state', trans: s8ActiveTab === 'trans', evidence: s8ActiveTab === 'evidence', actions: s8ActiveTab === 'actions' };
+    // per-node grounded evidence (read-only, derived from getInstanceHistory) for the Evidence tab
+    const s8EvidenceBy = {
+      reserving: { head: 'Why is reserving stuck?', body: 'reserve failed twice with E_TIMEOUT against the redis pool — attempt 2/3. The saga branched into the rollback lane to refund the charge.', grounds: [{ label: 'reserve failed · E_TIMEOUT', go: () => this.nav('/runs/' + CORR + '?primitive=run-job') }, { label: 'job_4183 attempt 2/3', go: () => this.nav('/workers/jobs/reserve-inventory/executions/job_4183') }] },
+      refund: { head: 'Why did refund fire?', body: 'The forward reserve step could not complete, so the saga compensated the captured charge by issuing refund ref_102. It is now settling the rollback lane.', grounds: [{ label: 'compensating step 2', go: () => this.nav('/runs/' + CORR + '?primitive=run-saga') }] },
+    };
+    const s8Evidence = (s8SelNode && s8EvidenceBy[s8SelNode.id]) ? { ...s8EvidenceBy[s8SelNode.id], grounds: s8EvidenceBy[s8SelNode.id].grounds } : null;
+    const s8HasEvidence = !!s8Evidence;
+    if (s8Props.mode === 'node') s8Props.noEvidence = !s8HasEvidence;
+
+    // ----- S9 Triggers -----
+    // Triggers = event→action activation rules. Every trigger belongs to ONE of four
+    // activation categories (mechanism by which it fires), which drives the tinted
+    // category band, the builder "when" node, and the firing-history classification.
+    //   schedule = time-driven (cron · schedule · polling)
+    //   webhook  = inbound HTTP ingress
+    //   event    = internal signal (file-watch · kv-write · composite)
+    //   manual   = operator / CLI / dashboard invoked
+    const CAT = {
+      cron: 'schedule', schedule: 'schedule', polling: 'schedule',
+      webhook: 'webhook',
+      file: 'event', kv: 'event', composite: 'event',
+      manual: 'manual',
+    };
+    const CAT_META = {
+      schedule: { label: 'Schedule', glyph: '◷', blurb: 'time-driven · cron / interval' },
+      webhook: { label: 'Webhook', glyph: '⇲', blurb: 'inbound HTTP ingress' },
+      event: { label: 'Event', glyph: '◆', blurb: 'internal signal · file / kv' },
+      manual: { label: 'Manual', glyph: '⎇', blurb: 'operator / CLI invoked' },
+    };
+    // Full trigger fleet — the source of truth for every S9 section.
+    // fired24 = firing count sparkline (last 12 buckets); when = event source; does = wired action.
+    const trigFleet = [
+      { id: 'webhook.payment', kind: 'webhook', human: 'Stripe ingress', src: 'POST /webhooks/payment', when: 'PaymentWebhookReceived', cond: 'signature valid', does: 'publishSaga', doesLabel: 'PaymentWebhookSaga', last: 'processed', lastAt: '13:59:45', next: '—', nextIn: 'on inbound', lat: '4ms', fired24: [6,9,7,11,8,10,12,9,7,10,8,11], ttone: 'primary', fires: 148 },
+      { id: 'cron.nightly-reconcile', kind: 'cron', human: 'Daily at 02:00', src: '0 2 * * *', when: 'cron tick 02:00', cond: 'backfill honored', does: 'enqueueJob', doesLabel: 'reconcile-ledger', last: 'skipped', lastAt: '14:00:00', next: '02:00', nextIn: 'in 11h 58m', lat: '—', fired24: [1,1,1,0,1,1,0,1,1,1,0,1], ttone: 'muted', fires: 7 },
+      { id: 'file-watch.config', kind: 'file', human: 'runtime-config/*.json', src: 'fs.watch runtime-config/', when: 'file changed', cond: 'json parses', does: 'executeTask', doesLabel: 'reload-config', last: 'completed', lastAt: '13:58:03', next: '—', nextIn: 'on change', lat: '61ms', fired24: [0,2,0,1,0,3,1,0,2,1,0,1], ttone: 'warning', fires: 22 },
+      { id: 'kv.cache-invalidate', kind: 'kv', human: 'on key write', src: 'kv.watch cache:*', when: 'key write cache:*', cond: 'prefix match', does: 'executeBatch', doesLabel: 'purge-batch', last: 'completed', lastAt: '13:55:27', next: '—', nextIn: 'on write', lat: '210ms', fired24: [4,3,5,4,6,3,5,4,7,5,4,6], ttone: 'success', fires: 91 },
+      { id: 'poll.inventory-sync', kind: 'polling', human: 'every 30s', src: 'interval 30s', when: 'poll tick 30s', cond: 'delta > 0', does: 'enqueueJob', doesLabel: 'inventory-sync', last: 'completed', lastAt: '14:01:12', next: '30s', nextIn: 'in 18s', lat: '88ms', fired24: [12,11,13,12,10,13,12,11,13,12,11,12], ttone: 'primary', fires: 2880 },
+      { id: 'sched.daily-digest', kind: 'schedule', human: '07:00 local', src: '@daily 07:00', when: 'daily 07:00', cond: 'has recipients', does: 'publishSaga', doesLabel: 'DigestSaga', last: 'completed', lastAt: '07:00:00', next: '07:00', nextIn: 'in 16h 58m', lat: '1.2s', fired24: [1,0,0,0,0,0,1,0,0,0,0,0], ttone: 'muted', fires: 1 },
+      { id: 'composite.order-guard', kind: 'composite', human: 'webhook + kv', src: 'webhook ∧ kv', when: 'both conditions', cond: 'AND both', does: 'publishSaga', doesLabel: 'OrderGuardSaga', last: 'completed', lastAt: '13:52:41', next: '—', nextIn: 'on both', lat: '9ms', fired24: [2,1,3,2,1,2,3,1,2,2,1,3], ttone: 'success', fires: 43 },
+      { id: 'manual.reindex', kind: 'manual', human: 'CLI / dashboard', src: 'operator invoke', when: 'operator run', cond: 'confirm gate', does: 'executeTask', doesLabel: 'reindex-search', last: 'idle', lastAt: '—', next: '—', nextIn: 'on demand', lat: '—', fired24: [0,0,0,0,0,0,0,0,0,0,0,0], ttone: 'muted', fires: 0 },
+    ];
+    // enrich fleet with live enabled-state + category
+    const fleet = trigFleet.map(t => ({ ...t, cat: CAT[t.kind], on: !!s.s9Enabled[t.id] }));
+
+    // --- category band (bespoke triggers-health band, NOT plain number cards) ---
+    const s9Cats = ['schedule', 'webhook', 'event', 'manual'].map(cat => {
+      const members = fleet.filter(t => t.cat === cat);
+      const armed = members.filter(t => t.on).length;
+      const fires = members.reduce((a, t) => a + t.fires, 0);
+      // aggregate firing spark = element-wise sum of member sparks
+      const spark = [0,0,0,0,0,0,0,0,0,0,0,0].map((_, i) => members.reduce((a, t) => a + (t.on ? t.fired24[i] : 0), 0));
+      const max = Math.max(1, ...spark);
+      const disabled = members.length - armed;
+      // most-recent real last-fired time across members (— means never fired)
+      const lastAts = members.map(t => t.lastAt).filter(v => v && v !== '—').sort();
+      const lastAt = lastAts.length ? lastAts[lastAts.length - 1] : null;
+      const hasFires = fires > 0;
+      // meaningful foot line even for hollow categories (e.g. Manual · 0 fires):
+      // populated → "<n> fires · 24h"; never-fired + silenced → "silenced · CLI-only";
+      // never-fired + armed → "armed · awaiting invoke". No card is a void.
+      const firesLabel = fires >= 1000 ? (fires / 1000).toFixed(1) + 'k' : String(fires);
+      const emptyLabel = hasFires ? (firesLabel + ' fires · 24h')
+        : disabled >= members.length ? 'silenced · CLI-only'
+        : 'armed · awaiting invoke';
+      return {
+        cat, ...CAT_META[cat],
+        count: String(members.length), armed, disabled,
+        firesLabel,
+        bars: spark.map(v => ({ h: Math.round((v / max) * 100) })),
+        hollow: !hasFires ? 'hollow' : null, emptyLabel,
+        tone: disabled > 0 ? 'warning' : armed > 0 ? 'active' : 'muted',
+        selState: cat === s.s9Cat ? 'selected' : null,
+        pick: () => this.setState(st => ({ s9Cat: st.s9Cat === cat ? 'all' : cat })),
+        stateLabel: disabled > 0 ? disabled + ' silenced' : armed + ' armed',
+      };
+    });
+    const s9CatActive = s.s9Cat;
+
+    // --- selected trigger drives the builder + drawer ---
+    const s9SelTrig = fleet.find(t => t.id === s.s9Sel) || fleet[0];
+    const ACT_META = {
+      publishSaga: { glyph: '⤿', label: 'publish saga', tone: 'primary', route: 'sagas' },
+      enqueueJob: { glyph: '⚙', label: 'enqueue job', tone: 'success', route: 'runs' },
+      executeTask: { glyph: '❯', label: 'execute task', tone: 'warning', route: 'workers' },
+      executeBatch: { glyph: '▦', label: 'execute batch', tone: 'primary', route: null },
+    };
+    const s9Builder = {
+      id: s9SelTrig.id, cat: s9SelTrig.cat, catLabel: CAT_META[s9SelTrig.cat].label, catGlyph: CAT_META[s9SelTrig.cat].glyph,
+      when: s9SelTrig.when, whenSrc: s9SelTrig.src, cond: s9SelTrig.cond,
+      does: s9SelTrig.does, doesLabel: s9SelTrig.doesLabel,
+      actGlyph: (ACT_META[s9SelTrig.does] || {}).glyph, actName: (ACT_META[s9SelTrig.does] || {}).label,
+      actTone: (ACT_META[s9SelTrig.does] || {}).tone,
+      on: s9SelTrig.on, human: s9SelTrig.human,
+      openAction: () => { const r = (ACT_META[s9SelTrig.does] || {}).route; if (r) this.nav(r); },
+    };
+    // action-type palette (ref 21 component palette) — highlight the wired action
+    const s9Palette = Object.keys(ACT_META).map(k => ({
+      key: k, ...ACT_META[k], active: k === s9SelTrig.does ? 'active' : null,
+    }));
+
+    // --- schedule strip: next 7 days with cron/scheduled fire markers (ref 19) ---
+    const DAYW = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+    const schedTrigs = fleet.filter(t => t.cat === 'schedule' && t.on);
+    const baseDay = 14; // Tue 2026-07-14
+    const hasPolling = schedTrigs.some(t => t.kind === 'polling');
+    const s9Days = Array.from({ length: 7 }, (_, i) => {
+      const dn = baseDay + i;
+      const idx = (2 + i) % 7; // Tue=2 for i=0
+      // discrete scheduled fires this day (daily ones fire every day)
+      const fires = schedTrigs.map(t => {
+        if (t.kind === 'polling') return null; // rendered as a continuous band, not a pip
+        if (t.id === 'sched.daily-digest') return { id: t.id, at: '07:00', tone: 'muted' };
+        if (t.id === 'cron.nightly-reconcile') return { id: t.id, at: '02:00', tone: 'primary' };
+        return null;
+      }).filter(Boolean);
+      return {
+        dow: DAYW[idx], date: String(dn), isToday: i === 0 ? 'today' : null,
+        fires, hasPoll: hasPolling ? 'yes' : null, count: String(fires.length),
+      };
+    });
+    // next-fire countdown cards (the scheduled triggers, soonest first)
+    // progressPct = elapsed fraction of the current interval toward the next fire.
+    // Presentational: derived from the declared cadence so the bar reads "how close".
+    const INTERVAL_META = {
+      'poll.inventory-sync': { pct: 40, span: 'every 30s', kindLabel: 'interval' },
+      'cron.nightly-reconcile': { pct: 50, span: 'daily 02:00', kindLabel: 'cron' },
+      'sched.daily-digest': { pct: 29, span: 'daily 07:00', kindLabel: 'schedule' },
+    };
+    const s9NextFires = schedTrigs
+      .map(t => {
+        const im = INTERVAL_META[t.id] || { pct: 60, span: t.src, kindLabel: 'schedule' };
+        const imminent = t.nextIn.startsWith('in ') && t.nextIn.includes('s') && !t.nextIn.includes('h') && !t.nextIn.includes('d');
+        return { id: t.id, kind: t.kind, next: t.next, nextIn: t.nextIn, does: t.doesLabel,
+          progressPct: im.pct, span: im.span, kindLabel: im.kindLabel,
+          tone: imminent ? 'primary' : 'muted',
+          pick: () => this.setState({ s9Sel: t.id }) };
+      });
+
+    // --- firing-history table (dense, sortable) ---
+    const catFilter = s.s9Cat === 'all' ? null : s.s9Cat;
+    const sortKey = s.s9Sort || 'fired';
+    const dir = s.s9SortDir === 'asc' ? 1 : -1;
+    const outcomeRank = { failed: 0, skipped: 1, idle: 2, queued: 3, completed: 4, processed: 5 };
+    // inline query toolbar (ref 11): quick-search by name + outcome filter + limit.
+    // Quick-search is WIRED (filters rendered rows); outcome filter maps grouped
+    // outcome families; limit caps the rendered row count.
+    const q9 = (s.s9Query || '').trim().toLowerCase();
+    const outFilter = s.s9Outcome || 'all';
+    const OUT_GROUP = { ok: ['completed', 'processed'], skipped: ['skipped'], idle: ['idle'], failed: ['failed'] };
+    const s9HistRaw = fleet
+      .filter(t => !catFilter || t.cat === catFilter)
+      .filter(t => !q9 || t.id.toLowerCase().includes(q9) || t.does.toLowerCase().includes(q9) || t.doesLabel.toLowerCase().includes(q9))
+      .filter(t => outFilter === 'all' || (OUT_GROUP[outFilter] || []).includes(t.last));
+    const s9SortCols = [
+      { key: 'name', label: 'Trigger' }, { key: 'cat', label: 'Type' },
+      { key: 'fired', label: 'Last fired' }, { key: 'next', label: 'Next fire' },
+      { key: 'outcome', label: 'Outcome' }, { key: 'lat', label: 'Latency' },
+    ].map(c => ({ ...c, dir: c.key === sortKey ? (s.s9SortDir || 'desc') : null,
+      active: c.key === sortKey ? 'sorted' : null,
+      sort: () => this.setState(st => ({ s9Sort: c.key, s9SortDir: st.s9Sort === c.key && st.s9SortDir === 'desc' ? 'asc' : 'desc' })) }));
+    const outcomeBadge = (o) => badge(o === 'processed' || o === 'completed' ? 'completed' : o === 'failed' ? 'failed' : o === 'skipped' ? 'queued' : o === 'idle' ? 'disabled' : 'queued');
+    const s9Hist = s9HistRaw.slice().sort((a, b) => {
+      let av, bv;
+      if (sortKey === 'name') { av = a.id; bv = b.id; return dir * av.localeCompare(bv); }
+      if (sortKey === 'cat') { av = a.cat; bv = b.cat; return dir * av.localeCompare(bv); }
+      if (sortKey === 'outcome') { av = outcomeRank[a.last] ?? 9; bv = outcomeRank[b.last] ?? 9; return dir * (av - bv); }
+      if (sortKey === 'lat') { av = a.lat === '—' ? -1 : parseFloat(a.lat) * (a.lat.includes('s') && !a.lat.includes('ms') ? 1000 : 1); bv = b.lat === '—' ? -1 : parseFloat(b.lat) * (b.lat.includes('s') && !b.lat.includes('ms') ? 1000 : 1); return dir * (av - bv); }
+      if (sortKey === 'next') { av = a.next === '—' ? 99 : parseInt(a.next); bv = b.next === '—' ? 99 : parseInt(b.next); return dir * (av - bv); }
+      av = a.lastAt === '—' ? '' : a.lastAt; bv = b.lastAt === '—' ? '' : b.lastAt; return dir * av.localeCompare(bv);
+    }).map(t => ({
+      id: t.id, cat: t.cat, catLabel: CAT_META[t.cat].label, catGlyph: CAT_META[t.cat].glyph,
+      lastAt: t.lastAt, next: t.next, nextIn: t.nextIn, lat: t.lat, on: t.on,
+      outcome: t.last, sBadge: outcomeBadge(t.last),
+      series: t.fired24.join(','), ttone: t.ttone,
+      selState: t.id === s.s9Sel ? 'selected' : null,
+      pick: () => this.setState({ s9Sel: t.id, sheet: 's9', s9SheetTab: 'chain' }),
+      toggle: () => {
+        const on = t.on;
+        this.askConfirm({
+          title: (on ? 'Disable' : 'Enable') + ' trigger',
+          desc: on ? 'Silences this trigger locally without redeploy — a TriggerEnabledStateOverride, hot-reloaded.' : 'Re-enables firing immediately.',
+          from: t.id + ' = ' + (on ? 'enabled' : 'disabled'), to: on ? 'disabled' : 'enabled',
+          cli: 'netscript triggers ' + (on ? 'disable' : 'enable') + ' ' + t.id,
+          feed: 'trigger ' + t.id + ' → ' + (on ? 'disabled' : 're-enabled'), feedTone: on ? 'warning' : 'success',
+          action: on ? 'Disable' : 'Enable',
+          apply: () => this.setState(st => ({ s9Enabled: { ...st.s9Enabled, [t.id]: !on } })),
+        });
+      },
+    }));
+    const s9Limit = parseInt(s.s9Limit || '100', 10);
+    const s9HistShown = s9Hist.slice(0, s9Limit);
+    const s9HistEmpty = s9HistShown.length === 0;
+    const s9HistCount = s9HistShown.length === fleet.length
+      ? String(fleet.length) + ' rules'
+      : s9HistShown.length + ' of ' + fleet.length;
+
+    // --- detail drawer (sheet s9) for the selected trigger ---
+    const selEvt = s.s9Events.find(e => e.trigger === s9SelTrig.id) || null;
+    const s9DrawerChain = ((selEvt && selEvt.chain) || [{ type: s9SelTrig.does, detail: s9SelTrig.doesLabel + ' — no recent firing', state: 'queued', dur: '—', link: (ACT_META[s9SelTrig.does] || {}).route }]).map(a => ({
+      ...a, glyph: (ACT_META[a.type] || {}).glyph || '·',
+      go: a.link ? () => this.nav(a.link) : null,
+      linkLabel: a.link === 'sagas' ? 'open saga' : a.link === 'runs' ? 'open run' : a.link === 'workers' ? 'open workers' : a.link === 'runtime' ? 'open override' : a.link ? 'open' : null,
+    }));
+    const s9Detail = {
+      id: s9SelTrig.id, cat: s9SelTrig.cat, catLabel: CAT_META[s9SelTrig.cat].label, catGlyph: CAT_META[s9SelTrig.cat].glyph,
+      on: s9SelTrig.on, human: s9SelTrig.human, src: s9SelTrig.src, when: s9SelTrig.when, cond: s9SelTrig.cond,
+      does: s9SelTrig.does, doesLabel: s9SelTrig.doesLabel, lat: s9SelTrig.lat, lastAt: s9SelTrig.lastAt,
+      next: s9SelTrig.next, nextIn: s9SelTrig.nextIn, fires: String(s9SelTrig.fires),
+      outcome: s9SelTrig.last, sBadge: outcomeBadge(s9SelTrig.last),
+      corr: selEvt ? selEvt.corr : '—',
+      payload: s9SelTrig.cat === 'webhook' ? '{\n  "orderId": "ord_7f3k",\n  "amount": 129.90,\n  "currency": "usd"\n}' : s9SelTrig.cat === 'schedule' ? '{\n  "tick": "' + s9SelTrig.src + '",\n  "tz": "Europe/Zurich",\n  "backfill": true\n}' : s9SelTrig.cat === 'event' ? '{\n  "source": "' + s9SelTrig.src + '",\n  "match": "' + s9SelTrig.cond + '"\n}' : '{\n  "invoked_by": "operator",\n  "confirm": true\n}',
+      chain: s9DrawerChain,
+      sched: s9SelTrig.cat === 'schedule' ? [
+        { probe: '2026-07-14 ' + (s9SelTrig.next !== '—' ? s9SelTrig.next : '—'), result: s9SelTrig.nextIn, state: 'ok' },
+        { probe: '2026-07-15 ' + (s9SelTrig.next !== '—' ? s9SelTrig.next : '—'), result: 'in 1d', state: 'ok' },
+        { probe: '2026-07-16 ' + (s9SelTrig.next !== '—' ? s9SelTrig.next : '—'), result: 'in 2d', state: 'ok' },
+      ] : [],
+      isSched: s9SelTrig.cat === 'schedule',
+      tabChain: () => this.setState({ s9SheetTab: 'chain' }),
+      tabPayload: () => this.setState({ s9SheetTab: 'payload' }),
+      tabSched: () => this.setState({ s9SheetTab: 'sched' }),
+      tabIsChain: (s.s9SheetTab || 'chain') === 'chain' ? 'active' : null,
+      tabIsPayload: s.s9SheetTab === 'payload' ? 'active' : null,
+      tabIsSched: s.s9SheetTab === 'sched' ? 'active' : null,
+      showChain: (s.s9SheetTab || 'chain') === 'chain', showPayload: s.s9SheetTab === 'payload', showSched: s.s9SheetTab === 'sched',
+      toggleLabel: s9SelTrig.on ? 'Silence this trigger' : 'Re-enable this trigger',
+      openRun: () => this.nav('/runs/ch_3QK9dR2eZ?primitive=run-trig'),
+      toggle: () => {
+        const on = s9SelTrig.on;
+        this.askConfirm({
+          title: (on ? 'Disable' : 'Enable') + ' trigger', desc: on ? 'Silences this trigger locally without redeploy — a TriggerEnabledStateOverride, hot-reloaded.' : 'Re-enables firing immediately.',
+          from: s9SelTrig.id + ' = ' + (on ? 'enabled' : 'disabled'), to: on ? 'disabled' : 'enabled',
+          cli: 'netscript triggers ' + (on ? 'disable' : 'enable') + ' ' + s9SelTrig.id,
+          feed: 'trigger ' + s9SelTrig.id + ' → ' + (on ? 'disabled' : 're-enabled'), feedTone: on ? 'warning' : 'success', action: on ? 'Disable' : 'Enable',
+          apply: () => this.setState(st => ({ s9Enabled: { ...st.s9Enabled, [s9SelTrig.id]: !on } })),
+        });
+      },
+    };
+
+    // --- console stat strip: iconified metric strip (ref 19 summary bar) ---
+    // Each metric = type glyph + value + a micro trend/spark where meaningful:
+    // armed → shield + armed/total bar; fires → flame + 12-bucket sparkline + trend
+    // arrow; dlq → alert + trend. Denser than five equal number boxes.
+    const armedTot = fleet.filter(t => t.on).length;
+    const firesSpark = [0,0,0,0,0,0,0,0,0,0,0,0].map((_, i) => fleet.reduce((a, t) => a + (t.on ? t.fired24[i] : 0), 0));
+    const firesMax = Math.max(1, ...firesSpark);
+    const s9StatTiles = [
+      { label: 'triggers', value: String(fleet.length), glyph: '⊞', tone: null,
+        sub: armedTot + ' wired rules' },
+      { label: 'armed', value: String(armedTot), glyph: '⛨', tone: 'primary',
+        meter: Math.round((armedTot / Math.max(1, fleet.length)) * 100), meterTone: 'primary',
+        sub: 'of ' + fleet.length + ' active' },
+      { label: 'silenced', value: String(fleet.length - armedTot), glyph: '⊘',
+        tone: fleet.length - armedTot > 0 ? 'warning' : null,
+        sub: (fleet.length - armedTot > 0 ? 'hot-reload override' : 'none silenced') },
+      { label: 'fires · 24h', value: '4.1k', glyph: '⚡', tone: null, sparkTone: 'primary',
+        spark: firesSpark.map(v => ({ h: Math.max(8, Math.round((v / firesMax) * 100)) })),
+        trend: '+6%', trendDir: 'up' },
+      { label: 'dlq depth', value: '17', glyph: '⚠', tone: 'warning',
+        trend: '+3', trendDir: 'up', sub: 'redis · memory' },
+    ];
+
+    // --- dead-letter mini-table (ref 11 record log) — last failed firings ------
+    // Compact rows: trigger · error snippet · age · retry-count · inline actions.
+    // Presentational (Retry/Inspect toast or nav). Keeps a one-line depth summary.
+    const s9DeadLetters = [
+      { id: 'analytics', trig: 'composite.order-guard', err: 'E_CONN sink unreachable', age: '2m', retry: '3/3', q: 'redis', tone: 'destructive' },
+      { id: 'reload-config', trig: 'file-watch.config', err: 'SyntaxError: bad JSON at :14', age: '9m', retry: '2/3', q: 'redis', tone: 'warning' },
+      { id: 'purge-batch', trig: 'kv.cache-invalidate', err: 'timeout after 30s', age: '21m', retry: '1/3', q: 'redis', tone: 'warning' },
+      { id: 'inventory-sync', trig: 'poll.inventory-sync', err: 'delta lock contended', age: '38m', retry: '1/3', q: 'memory', tone: 'muted' },
+      { id: 'DigestSaga', trig: 'sched.daily-digest', err: 'no recipients resolved', age: '1h', retry: '0/3', q: 'memory', tone: 'muted' },
+    ].map(d => ({
+      ...d,
+      retryAction: () => this.showToast('Would reprocess ' + d.id + ' from ' + d.q + ' DLQ', 'info'),
+      inspect: () => this.nav('/dlq/triggers?kind=trigger'),
+    }));
+
+    // --- fleet armed/disabled toggle rows (kept, compact) ---
+    const s9Trigs = fleet.map(t => ({
+      id: t.id, kind: t.kind, human: t.human, on: t.on, cat: t.cat,
+      toggle: () => {
+        const on = t.on;
+        this.askConfirm({
+          title: (on ? 'Disable' : 'Enable') + ' trigger',
+          desc: on ? 'Silences this trigger locally without redeploy — a TriggerEnabledStateOverride, hot-reloaded.' : 'Re-enables firing immediately.',
+          from: t.id + ' = ' + (on ? 'enabled' : 'disabled'), to: on ? 'disabled' : 'enabled',
+          cli: 'netscript triggers ' + (on ? 'disable' : 'enable') + ' ' + t.id,
+          feed: 'trigger ' + t.id + ' → ' + (on ? 'disabled' : 're-enabled'), feedTone: on ? 'warning' : 'success',
+          action: on ? 'Disable' : 'Enable',
+          apply: () => this.setState(st => ({ s9Enabled: { ...st.s9Enabled, [t.id]: !on } })),
+        });
+      },
+    }));
+    const s9Preview = s9Detail.isSched ? s9Detail.sched : [
+      { probe: '2026-07-14 02:00', state: 'ok', result: 'in 11h 58m' },
+      { probe: '2026-07-15 02:00', state: 'ok', result: 'in 1d 11h' },
+      { probe: '2026-07-16 02:00', state: 'ok', result: 'in 2d 11h' },
+    ];
+    const sendWebhookTest = () => this.askConfirm({
+      title: 'Send webhook test payload', desc: 'Runs the trigger ingress simulation with the payload shown above.',
+      from: 'webhook.payment · idle', to: 'test event enqueued',
+      cli: 'netscript triggers test webhook.payment --payload \'' + s.s9Webhook.replace(/'/g, "'\\''") + '\'', action: 'Send test',
+      apply: () => {
+        const evt = { id: 'evt_test_' + Date.now() % 1000, trigger: 'webhook.payment', kind: 'webhook', tone: 'primary', status: 'processed', time: this.fmtClock(this.state.clockS), corr: 'ch_test',
+          chain: [{ type: 'publishSaga', detail: 'PaymentWebhookReceived → PaymentWebhookSaga (test)', state: 'success', dur: '3ms', link: 'sagas' }] };
+        this.setState(st => ({ s9Events: [evt, ...st.s9Events].slice(0, 30) }));
+      }, toast: 'Test payload delivered to webhook.payment ingress'
+    });
+    const s9EventItems = s.s9Events.map(ev => ({
+      ...ev,
+      sBadge: badge(ev.status === 'processed' || ev.status === 'completed' ? 'completed' : ev.status === 'failed' ? 'failed' : 'queued'),
+      open: !!s.s9Open[ev.id],
+      toggleOpen: () => this.nav('/triggers/' + encodeURIComponent(ev.trigger) + '/events/' + encodeURIComponent(ev.id)),
+      chainRows: (ev.chain || []).map(a => ({
+        ...a,
+        go: a.link ? () => this.nav(a.link) : null,
+        linkLabel: a.link === 'sagas' ? 'open saga' : a.link === 'runs' ? 'open run' : a.link === 'workers' ? 'open workers' : a.link === 'runtime' ? 'open override' : null,
+      })),
+    }));
+
+    // ----- S10 · Streams — topic console (payment-events) --------------------
+    // The screen is a durable-stream / topic console: live throughput, a partition
+    // & offset ledger, consumer-group lag, a partition×time lag heatmap, a
+    // producer→consumer topology, and a live record tail. All faithful to the one
+    // topic the streams plugin exposes (payment-events · 3 subscribers).
+    const s10Tab = s.s10Tab || 'consume';
+    const seg10 = (id) => ({ state: s10Tab === id ? 'active' : null, set: () => this.updateQuery({ tab: id }, { s10Tab: id }) });
+
+    // --- topic-level facts (streams-health composite header) ---
+    const s10Topic = { name: 'payment-events', partitions: 6, inSync: 5, replication: 3, retention: '7d', backend: 'durable-streams' };
+    // live throughput (msgs/sec) — extend the plugin trend into a denser series so
+    // the hero reads as a real time-window. Peak/avg/floor drive the OHLC footer.
+    const thruBase = [3, 4, 3, 5, 4, 6, 5, 4, 7, 8, 6, 9, 7, 11, 9, 8, 12, 10, 9, 13, 11, 10, 14, 12];
+    const thruSeries = thruBase.map(v => v + (s.s10Sel === 'msg_88f' ? 0 : 0)); // stable, data-driven
+    const thruPeak = Math.max(...thruSeries), thruFloor = Math.min(...thruSeries);
+    const thruAvg = Math.round(thruSeries.reduce((a, b) => a + b, 0) / thruSeries.length);
+    const thruNow = thruSeries[thruSeries.length - 1];
+    // marker default = peak index (crosshair sits there until hover moves it)
+    const thruMarker = thruSeries.indexOf(thruPeak);
+    // backpressure: analytics group is lagging → topic is under mild backpressure
+    const backpressure = { state: 'building', tone: 'warning', label: 'Backpressure building', detail: 'analytics group · 1 partition behind' };
+
+    // --- consumer groups (3, mirrors the 3 wired subscribers; analytics lags) ---
+    const s10Groups = [
+      { id: 'receipt-worker', members: 2, parts: '0-5', lag: 0, maxLag: 900, status: 'stable', policy: 'at-least-once' },
+      { id: 'ledger-sync', members: 1, parts: '0-5', lag: 128, maxLag: 900, status: 'stable', policy: 'at-least-once' },
+      { id: 'analytics', members: 1, parts: '3,4', lag: 842, maxLag: 900, status: 'lagging', policy: 'best-effort' },
+    ].map(g => ({
+      ...g,
+      sBadge: badge(g.status === 'stable' ? 'ok' : g.status === 'lagging' ? 'warning' : 'primary'),
+      lagPct: Math.min(100, Math.round((g.lag / g.maxLag) * 100)),
+      lagTone: g.lag === 0 ? 'success' : g.lag > 500 ? 'destructive' : 'warning',
+      go: () => this.nav('/streams/payment-events/subscribers/' + encodeURIComponent(g.id)),
+    }));
+    const s10TotalLag = s10Groups.reduce((a, g) => a + g.lag, 0);
+    const s10LagHot = s10Groups.filter(g => g.lag > 500).length;
+
+    // --- partition & offset ledger (6 partitions; lag heat encoded inline) ---
+    const partSeed = [
+      { p: 0, leader: 'node-a', head: 41207, committed: 41207, group: 'receipt-worker' },
+      { p: 1, leader: 'node-b', head: 39880, committed: 39880, group: 'receipt-worker' },
+      { p: 2, leader: 'node-a', head: 40551, committed: 40483, group: 'ledger-sync' },
+      { p: 3, leader: 'node-c', head: 38914, committed: 38470, group: 'analytics' },
+      { p: 4, leader: 'node-c', head: 42763, committed: 42365, group: 'analytics' },
+      { p: 5, leader: 'node-b', head: 37102, committed: 37042, group: 'ledger-sync' },
+    ];
+    const partMaxLag = Math.max(...partSeed.map(r => r.head - r.committed), 1);
+    const s10Parts = partSeed.map(r => {
+      const lag = r.head - r.committed;
+      return {
+        ...r, lag,
+        lagPct: Math.round((lag / partMaxLag) * 100),
+        lagTone: lag === 0 ? 'success' : lag > 300 ? 'destructive' : 'warning',
+        inSync: r.p === 5 ? null : '1',
+        go: () => this.nav('/streams/payment-events?partition=' + r.p),
+      };
+    });
+
+    // --- partition × time lag heatmap (6 partitions × 8 recent windows) ---
+    // magnitude 0..4 (tint intensity). analytics-owned partitions (3,4) run hot.
+    const heatRows = [
+      { p: 0, cells: [0, 0, 0, 0, 0, 0, 0, 0] },
+      { p: 1, cells: [0, 0, 1, 0, 0, 0, 0, 0] },
+      { p: 2, cells: [0, 1, 0, 0, 1, 0, 0, 0] },
+      { p: 3, cells: [1, 2, 2, 3, 3, 4, 3, 4] },
+      { p: 4, cells: [1, 1, 2, 2, 3, 3, 4, 3] },
+      { p: 5, cells: [0, 0, 0, 1, 0, 0, 1, 0] },
+    ];
+    const s10Heat = heatRows.map(r => ({
+      p: r.p,
+      cells: r.cells.map((v, i) => ({ v, cls: 'ns-strheat__cell', win: i })),
+    }));
+
+    // --- live event tail (recent records — Consume tab of a topic console) ---
+    const recSeed = [
+      { off: 42763, part: 4, key: 'ord_5xw1', val: '{ "event":"payment.captured", "amount":129.90 }', age: '0.4s', tone: 'primary' },
+      { off: 42762, part: 4, key: 'ord_5xw0', val: '{ "event":"payment.captured", "amount":54.10 }', age: '0.9s', tone: 'muted' },
+      { off: 41207, part: 0, key: 'ord_4aa9', val: '{ "event":"order.reserved", "sku":"A-14" }', age: '1.6s', tone: 'muted' },
+      { off: 38914, part: 3, key: 'ord_4aa8', val: '{ "event":"payment.captured", "amount":12.00 }', age: '2.1s', tone: 'warning' },
+      { off: 40551, part: 2, key: 'ord_4aa7', val: '{ "event":"order.reserved", "sku":"B-02" }', age: '2.8s', tone: 'muted' },
+      { off: 39880, part: 1, key: 'ord_4aa6', val: '{ "event":"payment.captured", "amount":88.40 }', age: '3.3s', tone: 'muted' },
+      { off: 38470, part: 3, key: 'ord_4aa5', val: '{ "event":"payment.captured", "amount":19.99 }', age: '4.0s', tone: 'destructive' },
+    ];
+    const s10Records = recSeed.map(r => ({ ...r }));
+
+    // --- producer → consumer topology (3-col flow: producers → log → groups) ---
+    const s10Producers = [
+      { id: 'webhook.payment', kind: 'trigger', rate: '9/s' },
+      { id: 'reconcile-job', kind: 'worker', rate: '2/s' },
+    ];
+    // consumer side reuses the group list; edge label = delivery guarantee + lag
+    const s10Consumers = s10Groups.map(g => ({ id: g.id, guarantee: g.policy, lag: g.lag, lagTone: g.lagTone, status: g.status, sBadge: g.sBadge }));
+
+    // --- record schema (Config tab · ref 13 line-numbered schema view) ---
+    const s10Schema = [
+      { t: '{' },
+      { t: '  "type": "record",' },
+      { t: '  "name": "PaymentEvent",' },
+      { t: '  "namespace": "app.streams",' },
+      { t: '  "fields": [' },
+      { t: '    { "name": "event",     "type": "string" },' },
+      { t: '    { "name": "orderId",   "type": "string" },' },
+      { t: '    { "name": "amount",    "type": ["null","double"] },' },
+      { t: '    { "name": "capturedAt","type": "long", "logicalType": "timestamp-millis" }' },
+      { t: '  ]' },
+      { t: '}' },
+    ].map((r, i) => ({ ...r, n: i + 1 }));
+
+    // --- message list + fan-out (kept — powers the detail drawer's Records tab) ---
+    const s10Msgs = [
+      { id: 'msg_88f', time: '14:00:10', status: 'failed', note: '2/3 delivered · analytics failed' },
+      { id: 'msg_87c', time: '13:48:02', status: 'completed', note: '3/3 delivered' },
+    ].map(m => ({ ...m, sBadge: badge(m.status), selState: m.id === s.s10Sel ? 'selected' : null, select: () => this.nav('/streams/payment-events?message=' + encodeURIComponent(m.id)) }));
+    const fan = {
+      msg_88f: [
+        { n: '1', title: 'receipt-worker', state: 'completed', meta: 'delivered · attempt 1 · 40ms', io: '{ "event": "order.reserved" }' },
+        { n: '2', title: 'ledger-sync', state: 'retrying', meta: 'delivered · attempt 2 · 3.1s', attempts: '2', io: '{ "event": "order.reserved" }' },
+        { n: '3', title: 'analytics', state: 'failed', meta: 'FAILED · attempt 3 · E_CONN', attempts: '3/3', io: '{ "error": "E_CONN sink unreachable" }' },
+      ],
+      msg_87c: [
+        { n: '1', title: 'receipt-worker', state: 'completed', meta: 'delivered · attempt 1', io: null },
+        { n: '2', title: 'ledger-sync', state: 'completed', meta: 'delivered · attempt 1', io: null },
+        { n: '3', title: 'analytics', state: 'completed', meta: 'delivered · attempt 1', io: null },
+      ],
+    };
+    const s10Fan = fan[s.s10Sel] || [];
+    const s10Subs = [
+      { probe: 'receipt-worker → workers', state: 'ok', result: 'at-least-once' },
+      { probe: 'ledger-sync → workers', state: 'ok', result: 'at-least-once' },
+      { probe: 'analytics → streams', state: 'failed', result: 'sink unreachable' },
+    ];
+
+    // ----- S11 — bespoke migration version-chain + drift -----
+    const migStatusLabel = { applied: 'applied', pending: 'pending', failed: 'failed' };
+    const migAll = s.s11Rows;
+    const migApplied = migAll.filter(r => r.status === 'applied'); // newest-first in data
+    const migPending = migAll.filter(r => r.status === 'pending');
+    const migFailed = migAll.filter(r => r.status === 'failed');
+    const s11HasPending = migPending.length > 0;
+    const s11HasFailed = migFailed.length > 0;
+    // drift: derived from pending / declared drift objects
+    const driftObjs = s11HasPending ? s.s11Drift : [];
+    const s11DriftCount = driftObjs.length;
+    const s11InSync = s11DriftCount === 0 && !s11HasPending;
+    // schema HEAD = highest applied version; target = highest declared version
+    const headVer = migApplied.length ? migApplied[0].ver : '—';
+    const targetVer = migAll.length ? migAll[0].ver : '—';
+    const lastApplied = migApplied.length ? migApplied[0] : null;
+
+    const s11Sel = s.s11Sel;
+    const selMig = migAll.find(r => r.name === s11Sel) || migPending[0] || migApplied[0] || null;
+    const selectMig = (name) => this.setState({ s11Sel: name });
+
+    // --- version-chain timeline nodes (applied spine → HEAD divider → pending queue) ---
+    // ordered oldest→newest for the applied spine, then pending queued after HEAD
+    const appliedChrono = migApplied.slice().reverse(); // oldest → newest
+    const nodeOf = (r, phase) => {
+      const tablesN = (r.tables || []).length;
+      return {
+        name: r.name, ver: r.ver, title: r.title, at: r.at, dur: r.dur, status: r.status,
+        statusLabel: migStatusLabel[r.status] || r.status, sBadge: badge(r.status),
+        phase, // 'applied' | 'pending'
+        // per-node metadata surfaced as inline mono chips (real data — no invention)
+        tablesN, tablesLabel: tablesN + (tablesN === 1 ? ' obj' : ' objs'),
+        rows: r.rows, rowsLabel: (r.rows && r.rows !== '0' && r.rows !== '—') ? r.rows : (r.rows === '0' ? '0 rows' : r.rows),
+        durLabel: phase === 'pending' ? ('est ' + r.dur) : r.dur,
+        atLabel: r.at === '—' ? 'not applied' : r.at,
+        sel: r.name === s11Sel ? 'true' : 'false',
+        select: () => selectMig(r.name),
+      };
+    };
+    const s11Timeline = [
+      ...appliedChrono.map(r => nodeOf(r, 'applied')),
+    ];
+    const s11Queue = migPending.map(r => nodeOf(r, 'pending'));
+
+    // --- ledger rows (dense table, ref-11) ---
+    const s11Rows = migAll.map(r => ({
+      ...r, sBadge: badge(r.status), statusLabel: migStatusLabel[r.status] || r.status,
+      sel: r.name === s11Sel ? 'true' : 'false',
+      atShort: r.at === '—' ? 'not applied' : r.at,
+      select: () => selectMig(r.name),
+      open: () => { selectMig(r.name); this.setState({ sheet: 's11', s11DrawerTab: 'summary' }); },
+    }));
+
+    // --- drift gauge: objects in-sync vs drifted (ref-04 arc gauge) ---
+    // total tracked objects across the applied schema ≈ tables touched; drifted = driftObjs
+    const trackedObjs = 8; // users, sessions, orders, order_items, receipts, + expected: delivery_attempts, orders.status(enum)
+    const driftedN = s11DriftCount;
+    const syncedN = Math.max(0, trackedObjs - driftedN);
+    const syncPct = Math.round((syncedN / trackedObjs) * 100);
+    const s11Gauge = {
+      pct: syncPct, syncedN, driftedN, trackedN: trackedObjs,
+      // arc sweep 0..180deg for the drifted portion
+      driftDeg: Math.round((driftedN / trackedObjs) * 180),
+      tone: s11InSync ? 'success' : 'warning',
+      label: s11InSync ? 'in sync' : (driftedN + ' drifted'),
+      caption: s11InSync ? 'live DB matches the migration chain' : 'live DB is behind the chain',
+    };
+    const s11DriftRows = driftObjs.map(d => ({ ...d }));
+
+    // --- header composite metrics + light micro-viz (ratio bar, pips, rel-time) ---
+    // app "now" anchor = the pending-apply timestamp used by runMigrate (2026-07-13 14:02)
+    const nowAnchor = new Date('2026-07-13T14:02:00');
+    const relDays = (at) => {
+      if (!at || at === '—') return null;
+      const d = new Date(at.replace(' ', 'T'));
+      if (isNaN(d)) return null;
+      return Math.max(0, Math.round((nowAnchor - d) / 86400000));
+    };
+    const lastRelD = lastApplied ? relDays(lastApplied.at) : null;
+    const lastRel = lastRelD === null ? '' : (lastRelD === 0 ? 'today' : lastRelD === 1 ? '1d ago' : lastRelD + 'd ago');
+    const totalMig = migAll.length;
+    const appliedRatioPct = totalMig ? Math.round((migApplied.length / totalMig) * 100) : 0;
+    // drift pips = one pip per tracked object (n-of-8), filled = in-sync
+    const driftPips = Array.from({ length: s11Gauge.trackedN }, (_, i) => ({
+      state: i < s11Gauge.syncedN ? 'sync' : 'drift',
+    }));
+    const s11Head = {
+      headVer, targetVer,
+      appliedN: migApplied.length, pendingN: migPending.length,
+      totalN: totalMig, appliedRatioPct,
+      appliedRatio: migApplied.length + '/' + totalMig,
+      pendingPips: Array.from({ length: Math.max(migPending.length, 0) }, () => ({})),
+      driftPips, driftedN: s11Gauge.driftedN, trackedN: s11Gauge.trackedN,
+      driftLabel: s11InSync ? 'in sync' : (s11DriftCount + ' drifted'),
+      driftTone: s11InSync ? 'success' : 'warning',
+      lastAppliedName: lastApplied ? lastApplied.title : '—',
+      lastAppliedAt: lastApplied ? lastApplied.at : '—',
+      lastAppliedRel: lastRel,
+      behind: s11HasPending ? (migPending.length + ' behind') : 'up to date',
+    };
+
+    // --- selected-migration detail (drawer / inline) ---
+    const s11Detail = selMig ? {
+      name: selMig.name, ver: selMig.ver, title: selMig.title, at: selMig.at, dur: selMig.dur,
+      rows: selMig.rows, status: selMig.status, statusLabel: migStatusLabel[selMig.status] || selMig.status,
+      sBadge: badge(selMig.status), summary: selMig.summary,
+      tables: (selMig.tables || []).map(t => ({ t })),
+      atLabel: selMig.at === '—' ? 'not applied yet' : selMig.at,
+      ddl: selMig.ddl || [],
+      isPending: selMig.status === 'pending',
+    } : { name: '—', ver: '—', title: '—', at: '—', dur: '—', rows: '—', status: 'applied', statusLabel: 'applied', sBadge: badge('applied'), summary: '', tables: [], atLabel: '—', ddl: [], isPending: false };
+
+    const s11DrawerTab = s.s11DrawerTab || 'summary';
+    const s11TabSummary = { state: s11DrawerTab === 'summary' ? 'active' : null, set: () => this.setState({ s11DrawerTab: 'summary' }) };
+    const s11TabDdl = { state: s11DrawerTab === 'ddl' ? 'active' : null, set: () => this.setState({ s11DrawerTab: 'ddl' }) };
+
+    const runMigrate = () => this.askConfirm({
+      title: 'Apply pending migrations', desc: 'Applies the 1 pending Prisma migration to the database. The confirm shows the plan and the exact CLI before you execute.',
+      from: '20260711_add_delivery_attempts · pending', to: 'applied',
+      cli: 'netscript db migrate', action: 'Run migrate',
+      toast: 'Migration applied — schema in sync',
+      apply: () => this.setState(st => ({ s11Rows: st.s11Rows.map(r => r.status === 'pending' ? { ...r, status: 'applied', at: '2026-07-13 14:02' } : r) })),
+    });
+    // kept for back-compat with any old binding
+    const s11Diff = s11Detail.ddl;
+
+    // ----- S12 · Dead-Letter Queues — operational triage console ------------
+    // Signature = cluster failures by error signature, make queue depth/health
+    // legible, make a message inspectable + actionable. Div/CSS geometry only.
+    // Bucket a 0..1 ratio into the shared .ns-spark height classes (--h1..--h20).
+    const sparkH = (v, max) => { const r = max > 0 ? v / max : 0; return 'ns-spark__col--h' + Math.max(1, Math.min(20, Math.round(r * 20) || (v > 0 ? 1 : 1))); };
+    const sparkCols = (arr) => { const mx = Math.max(1, ...arr); return arr.map(v => ({ cls: sparkH(v, mx), z: v === 0 })); };
+    // Failed-message corpus per scope. Each carries the triage-relevant datum:
+    // source (which trigger/worker/saga produced it), error signature, retry
+    // history, queue backend, payload, and a first/last-seen age.
+    const dlqCorpus = s.s12Tab === 'queue' ? [
+      { id: 'msg_5521', src: 'reserve-inventory', kind: 'worker', sig: 'E_CONN', reason: 'sink unreachable', q: 'redis', ageMin: 2, retry: 3, max: 3, corr: 'ch_3QK9dR2eZ',
+        payload: '{\n  "orderId": "ord_5xw1",\n  "sku": "NS-100",\n  "attempt": 3\n}', hist: [ { n: 1, at: '13:14:02', out: 'E_CONN · +180ms', tone: 'destructive' }, { n: 2, at: '13:18:20', out: 'E_CONN · +2.1s backoff', tone: 'destructive' }, { n: 3, at: '13:22:41', out: 'E_CONN · dead-lettered', tone: 'destructive' } ] },
+      { id: 'msg_5530', src: 'sync-ledger', kind: 'worker', sig: 'E_CONN', reason: 'sink unreachable', q: 'redis', ageMin: 5, retry: 3, max: 3, corr: 'ch_5xw0',
+        payload: '{\n  "captureId": "cap_991",\n  "amount": 129.90\n}', hist: [ { n: 1, at: '13:31:11', out: 'E_CONN · +140ms', tone: 'destructive' }, { n: 2, at: '13:36:02', out: 'E_CONN · +2.0s backoff', tone: 'destructive' }, { n: 3, at: '13:40:09', out: 'E_CONN · dead-lettered', tone: 'destructive' } ] },
+      { id: 'msg_5540', src: 'reserve-inventory', kind: 'worker', sig: 'E_CONN', reason: 'sink unreachable', q: 'redis', ageMin: 9, retry: 3, max: 3, corr: 'ch_5xw3',
+        payload: '{\n  "orderId": "ord_5xw3",\n  "sku": "NS-220"\n}', hist: [ { n: 1, at: '13:03:41', out: 'E_CONN · +160ms', tone: 'destructive' }, { n: 2, at: '13:07:55', out: 'E_CONN · +1.9s backoff', tone: 'destructive' }, { n: 3, at: '13:12:30', out: 'E_CONN · dead-lettered', tone: 'destructive' } ] },
+      { id: 'msg_5502', src: 'reload-config', kind: 'trigger', sig: 'E_PARSE', reason: 'bad JSON at :14', q: 'redis', ageMin: 14, retry: 2, max: 3, corr: 'ch_cfg14',
+        payload: '{\n  "flags": { "checkout-v2": tru\n  "ttl": 300\n}', hist: [ { n: 1, at: '13:12:00', out: 'SyntaxError · line 14', tone: 'destructive' }, { n: 2, at: '13:20:41', out: 'SyntaxError · dead-lettered', tone: 'destructive' } ] },
+      { id: 'msg_5488', src: 'cache-invalidate', kind: 'worker', sig: 'E_TIMEOUT', reason: 'timed out after 30s', q: 'redis', ageMin: 21, retry: 1, max: 3, corr: 'ch_pg21',
+        payload: '{\n  "keys": ["cache:orders:*"],\n  "batch": 4200\n}', hist: [ { n: 1, at: '12:59:12', out: 'E_TIMEOUT · 30.0s', tone: 'destructive' } ] },
+      { id: 'msg_5470', src: 'sync-ledger', kind: 'worker', sig: 'E_TIMEOUT', reason: 'timed out after 30s', q: 'postgres', ageMin: 42, retry: 2, max: 3, corr: 'ch_pg42',
+        payload: '{\n  "captureId": "cap_812",\n  "amount": 54.10\n}', hist: [ { n: 1, at: '12:41:03', out: 'E_TIMEOUT · 30.0s', tone: 'destructive' }, { n: 2, at: '12:48:17', out: 'E_TIMEOUT · dead-lettered', tone: 'destructive' } ] },
+      { id: 'msg_5455', src: 'send-receipt', kind: 'worker', sig: 'E_5XX', reason: 'upstream 503', q: 'postgres', ageMin: 58, retry: 3, max: 3, corr: 'ch_pg58',
+        payload: '{\n  "receiptId": "rcp_20a",\n  "to": "ops@acme.dev"\n}', hist: [ { n: 1, at: '12:18:40', out: 'HTTP 503', tone: 'destructive' }, { n: 2, at: '12:24:11', out: 'HTTP 503 · +1.5s', tone: 'destructive' }, { n: 3, at: '12:31:22', out: 'HTTP 503 · dead-lettered', tone: 'destructive' } ] },
+    ] : [
+      { id: 'evt_2188', src: 'webhook.payment', kind: 'trigger', sig: 'E_5XX', reason: 'retry exhausted', q: 'trigger', ageMin: 12, retry: 5, max: 5, corr: 'ch_4aa0',
+        payload: '{\n  "event": "payment.captured",\n  "orderId": "ord_4aa0",\n  "amount": 88.40\n}', hist: [ { n: 1, at: '12:44:12', out: 'HTTP 503 · +200ms', tone: 'destructive' }, { n: 2, at: '12:47:40', out: 'HTTP 503 · +1.0s', tone: 'destructive' }, { n: 3, at: '12:51:05', out: 'HTTP 502 · +2.0s', tone: 'destructive' }, { n: 4, at: '12:54:31', out: 'HTTP 503 · +4.0s', tone: 'destructive' }, { n: 5, at: '12:58:12', out: 'HTTP 503 · dead-lettered', tone: 'destructive' } ] },
+    ];
+    const ageLabel = (m) => m < 60 ? m + 'm' : (Math.floor(m / 60) + 'h' + (m % 60 ? ' ' + (m % 60) + 'm' : ''));
+    const sigMeta = { E_CONN: { label: 'sink unreachable', glyph: '⇥', tone: 'destructive' }, E_PARSE: { label: 'malformed payload', glyph: '⧗', tone: 'warning' }, E_TIMEOUT: { label: 'handler timeout', glyph: '◷', tone: 'warning' }, E_5XX: { label: 'upstream 5xx', glyph: '⚠', tone: 'destructive' } };
+    const kindGlyph = { worker: '⚙', trigger: '⚡', saga: '↻' };
+    // Active filter (cluster signature / queue / source) → drives table + strip.
+    const s12Filter = s.s12Filter || null;
+    const filterMatch = (m) => !s12Filter ? true : (s12Filter.type === 'sig' ? m.sig === s12Filter.key : s12Filter.type === 'queue' ? m.q === s12Filter.key : s12Filter.type === 'src' ? m.src === s12Filter.key : true);
+    const setFilter = (f) => this.setState(st => ({ s12Filter: (st.s12Filter && f && st.s12Filter.type === f.type && st.s12Filter.key === f.key) ? null : f }));
+    const s12FilterActive = !!s12Filter;
+    const s12FilterLabel = s12Filter ? (s12Filter.type === 'sig' ? s12Filter.key + ' cluster' : s12Filter.type === 'queue' ? s12Filter.key + ' queue' : 'source ' + s12Filter.key) : '';
+    const s12ClearFilter = () => this.setState({ s12Filter: null });
+
+    // --- error-signature clusters (the signature grouping) -------------------
+    const clusterMap = new Map();
+    dlqCorpus.forEach(m => { const c = clusterMap.get(m.sig) || { sig: m.sig, members: [], srcs: new Set(), ages: [] }; c.members.push(m); c.srcs.add(m.src); c.ages.push(m.ageMin); clusterMap.set(m.sig, c); });
+    const clusterAgesMax = Math.max(1, ...dlqCorpus.map(m => m.ageMin));
+    const s12Clusters = Array.from(clusterMap.values()).sort((a, b) => b.members.length - a.members.length).map(c => {
+      const meta = sigMeta[c.sig] || { label: 'failure', glyph: '⚠', tone: 'warning' };
+      const srcs = Array.from(c.srcs);
+      const minA = Math.min(...c.ages), maxA = Math.max(...c.ages);
+      const exhausted = c.members.filter(m => m.retry >= m.max).length;
+      // 8-window sparkbar of when the members died (bucket by age)
+      const buckets = [0, 0, 0, 0, 0, 0, 0, 0];
+      c.ages.forEach(a => { const idx = Math.min(7, Math.floor((a / (clusterAgesMax + 1)) * 8)); buckets[7 - idx] += 1; });
+      const active = s12Filter && s12Filter.type === 'sig' && s12Filter.key === c.sig;
+      return {
+        sig: c.sig, glyph: meta.glyph, tone: meta.tone, msg: meta.label, count: String(c.members.length),
+        srcChips: srcs.slice(0, 3).map(sName => ({ name: sName })), srcMore: srcs.length > 3 ? '+' + (srcs.length - 3) : '',
+        ageRange: minA === maxA ? ageLabel(minA) : ageLabel(minA) + '–' + ageLabel(maxA),
+        exhaustedLabel: exhausted + '/' + c.members.length + ' exhausted', hasExhausted: exhausted > 0,
+        spark: sparkCols(buckets), selState: active ? 'active' : null,
+        filter: () => setFilter({ type: 'sig', key: c.sig }),
+        retryAll: () => this.askConfirm({ title: 'Reprocess ' + c.members.length + ' × ' + c.sig, desc: 'Bulk-replays every message in the ' + c.sig + ' cluster (' + meta.label + ') through its original source. Destructive replay — confirm required.', from: c.members.length + ' dead · ' + c.sig, to: 're-enqueued', cli: (s.s12Tab === 'queue' ? 'netscript queue dlq reprocess --backend redis' : 'netscript triggers dlq reprocess webhook.payment') + ' --signature ' + c.sig, action: 'Reprocess ' + c.members.length, danger: true, toast: c.members.length + ' × ' + c.sig + ' re-enqueued', apply: () => this.setState({ s12Checked: {} }) }),
+        purge: () => this.askConfirm({ title: 'Purge ' + c.members.length + ' × ' + c.sig, desc: 'Permanently drops every message in the ' + c.sig + ' cluster from the dead-letter queue. This cannot be undone.', from: c.members.length + ' parked · ' + c.sig, to: 'purged', cli: (s.s12Tab === 'queue' ? 'netscript queue dlq purge --backend redis' : 'netscript triggers dlq purge webhook.payment') + ' --signature ' + c.sig, action: 'Purge ' + c.members.length, danger: true, toast: c.members.length + ' × ' + c.sig + ' purged', apply: () => this.setState({ s12Checked: {} }) }),
+      };
+    });
+
+    // --- queue-health overview (per backend: depth + capacity fill + trend) --
+    const queueDefs = s.s12Tab === 'queue'
+      ? [ { key: 'redis', label: 'redis', depth: 14, cap: 32, trend: [1, 2, 1, 3, 2, 4, 5, 6, 8, 10, 12, 14], oldest: 21 },
+          { key: 'postgres', label: 'postgres', depth: 2, cap: 40, trend: [0, 0, 1, 0, 0, 1, 0, 1, 1, 2, 2, 2], oldest: 58 },
+          { key: 'kv', label: 'kv (memory)', depth: 0, cap: 16, trend: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], oldest: 0 } ]
+      : [ { key: 'trigger', label: 'trigger dlq', depth: 1, cap: 20, trend: [0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1], oldest: 12 } ];
+    const s12Queues = queueDefs.map(qd => {
+      const pct = Math.min(100, Math.round((qd.depth / qd.cap) * 100));
+      const tone = qd.depth === 0 ? 'success' : pct >= 60 ? 'destructive' : pct >= 25 ? 'warning' : 'primary';
+      const active = s12Filter && s12Filter.type === 'queue' && s12Filter.key === qd.key;
+      return {
+        key: qd.key, label: qd.label, depth: String(qd.depth), cap: 'cap ' + qd.cap, pct: String(pct), tone,
+        fillStyle: 'width:' + pct + '%', pctLabel: pct + '%',
+        oldest: qd.oldest > 0 ? ageLabel(qd.oldest) : '—', empty: qd.depth === 0,
+        spark: sparkCols(qd.trend), sevLabel: qd.depth === 0 ? 'clear' : pct >= 60 ? 'critical' : pct >= 25 ? 'elevated' : 'low',
+        selState: active ? 'active' : null,
+        filter: () => qd.depth > 0 ? setFilter({ type: 'queue', key: qd.key }) : this.showToast(qd.label + ' dead-letter queue is empty', 'success'),
+      };
+    });
+
+    // --- header triage strip (composite metrics, not plain number cards) -----
+    const totalParked = dlqCorpus.length;
+    const exhaustedTot = dlqCorpus.filter(m => m.retry >= m.max).length;
+    const oldestMin = dlqCorpus.length ? Math.max(...dlqCorpus.map(m => m.ageMin)) : 0;
+    // by-queue split reflects the actual parked corpus (sums to totalParked)
+    const byQueue = queueDefs.map(q => ({ label: q.label, key: q.key, n: dlqCorpus.filter(m => m.q === q.key).length })).filter(q => q.n > 0);
+    const queueTone = { redis: 'destructive', postgres: 'warning', kv: 'muted', trigger: 'warning' };
+    const s12Strip = {
+      total: String(totalParked),
+      totalTrend: sparkCols(s.s12Tab === 'queue' ? [2, 3, 2, 4, 3, 5, 6, 5, 7, 8, 7, 9] : [0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1]),
+      split: byQueue.map(q => ({ label: q.label, n: String(q.n), tone: queueTone[q.key] || 'warning', style: 'flex:' + q.n + ' ' + q.n + ' 0%' })),
+      clusters: String(s12Clusters.length),
+      oldest: oldestMin > 0 ? ageLabel(oldestMin) : '—',
+      exhausted: String(exhaustedTot),
+      exhaustedPips: Array.from({ length: Math.min(totalParked, 8) }, (_, i) => ({ on: i < exhaustedTot })),
+      exhaustTone: exhaustedTot > 0 ? 'destructive' : 'success',
+    };
+
+    // --- failed-message triage rows (dense, retry pips + inline actions) -----
+    const filtered = dlqCorpus.filter(filterMatch);
+    const s12Rows = filtered.map(r => {
+      const meta = sigMeta[r.sig] || { tone: 'warning' };
+      return {
+        ...r, checked: !!s.s12Checked[r.id], sigTone: meta.tone, kindGlyph: kindGlyph[r.kind] || '•',
+        age: ageLabel(r.ageMin), retryLabel: r.retry + '/' + r.max,
+        pips: Array.from({ length: r.max }, (_, i) => ({ on: i < r.retry })),
+        exhausted: r.retry >= r.max,
+        open: () => this.setState({ sheet: 's12', s12Sel: r.id }),
+        toggle: () => this.setState(st => ({ s12Checked: { ...st.s12Checked, [r.id]: !st.s12Checked[r.id] } })),
+      };
+    });
+    const s12AllChecked = filtered.length > 0 && filtered.every(r => s.s12Checked[r.id]);
+    const s12ToggleAll = () => this.setState(st => { const next = { ...st.s12Checked }; const all = filtered.every(r => next[r.id]); filtered.forEach(r => { if (all) delete next[r.id]; else next[r.id] = true; }); return { s12Checked: next }; });
+    const s12Count = dlqCorpus.filter(r => s.s12Checked[r.id]).length;
+    const s12Backend = s.s12Tab === 'queue' ? 'redis' : 'trigger DLQ';
+    const s12Empty = filtered.length === 0;
+    const s12AllClear = totalParked === 0;
+    const reprocess = () => this.askConfirm({
+      title: 'Reprocess ' + s12Count + ' message' + (s12Count === 1 ? '' : 's') + ' from ' + s12Backend,
+      desc: 'Bulk-replays the selected message' + (s12Count === 1 ? '' : 's') + ' through the original ' + (s.s12Tab === 'queue' ? 'queue' : 'trigger') + '. Destructive replay — confirm required.',
+      from: s12Count + ' selected · dead (' + s12Backend + ')', to: 're-enqueued',
+      cli: s.s12Tab === 'queue' ? 'netscript queue dlq reprocess --backend redis' : 'netscript triggers dlq reprocess webhook.payment',
+      action: 'Reprocess ' + s12Count, danger: true,
+      toast: s12Count + ' message(s) re-enqueued',
+      apply: () => this.setState({ s12Checked: {} }),
+    });
+    const purgeSelected = () => this.askConfirm({
+      title: 'Purge ' + s12Count + ' message' + (s12Count === 1 ? '' : 's') + ' from ' + s12Backend,
+      desc: 'Permanently drops the selected message' + (s12Count === 1 ? '' : 's') + ' from the dead-letter queue. This cannot be undone.',
+      from: s12Count + ' selected · parked', to: 'purged',
+      cli: s.s12Tab === 'queue' ? 'netscript queue dlq purge --backend redis --ids <selected>' : 'netscript triggers dlq purge webhook.payment',
+      action: 'Purge ' + s12Count, danger: true,
+      toast: s12Count + ' message(s) purged',
+      apply: () => this.setState({ s12Checked: {} }),
+    });
+    const s12Caption = s12FilterActive
+      ? 'filtered to ' + s12FilterLabel + ' · ' + filtered.length + ' of ' + totalParked + ' parked'
+      : (s.s12Tab === 'queue' ? 'all ' + totalParked + ' dead-lettered messages (redis 14 · postgres 2)' : totalParked + ' dead-lettered trigger event' + (totalParked === 1 ? '' : 's'));
+    const s12Cli = s.s12Tab === 'queue' ? 'netscript queue dlq reprocess --backend redis' : 'netscript triggers dlq reprocess webhook.payment';
+
+    // --- message inspector detail (drawer / mobile sheet) -------------------
+    const s12SelMsg = dlqCorpus.find(m => m.id === s.s12Sel) || dlqCorpus[0] || null;
+    const s12Detail = s12SelMsg ? (() => {
+      const meta = sigMeta[s12SelMsg.sig] || { label: 'failure', tone: 'warning' };
+      return {
+        id: s12SelMsg.id, sig: s12SelMsg.sig, sigTone: meta.tone, reason: s12SelMsg.reason,
+        src: s12SelMsg.src, kind: s12SelMsg.kind, kindGlyph: kindGlyph[s12SelMsg.kind] || '•',
+        q: s12SelMsg.q, corr: s12SelMsg.corr, payload: s12SelMsg.payload,
+        retryLabel: s12SelMsg.retry + '/' + s12SelMsg.max, age: ageLabel(s12SelMsg.ageMin),
+        hist: s12SelMsg.hist.map(h => ({ n: 'attempt ' + h.n, at: h.at, out: h.out, tone: h.tone })),
+        reprocessOne: () => this.askConfirm({ title: 'Reprocess ' + s12SelMsg.id, desc: 'Replays this single dead-lettered message through ' + s12SelMsg.src + '. Destructive replay — confirm required.', from: s12SelMsg.id + ' · dead', to: 're-enqueued', cli: s12Cli + ' --id ' + s12SelMsg.id, action: 'Reprocess', danger: true, toast: s12SelMsg.id + ' re-enqueued', apply: () => this.setState({ sheet: null }) }),
+        purgeOne: () => this.askConfirm({ title: 'Purge ' + s12SelMsg.id, desc: 'Permanently drops this message from the dead-letter queue. This cannot be undone.', from: s12SelMsg.id + ' · parked', to: 'purged', cli: (s.s12Tab === 'queue' ? 'netscript queue dlq purge --backend redis' : 'netscript triggers dlq purge webhook.payment') + ' --id ' + s12SelMsg.id, action: 'Purge', danger: true, toast: s12SelMsg.id + ' purged', apply: () => this.setState({ sheet: null }) }),
+        openRun: () => { this.setState({ s6Sel: 'run-job', sheet: null }); this.nav('runs'); },
+      };
+    })() : null;
+
+    // ----- S13 -----
+    const s13Flows = s.s13Flows.filter(f =>
+      (s.s13Route === 'all' || f.route.startsWith(s.s13Route)) &&
+      (s.s13Status === 'all' || f.verdict === s.s13Status)
+    ).map(f => ({ ...f, selState: f.id === s.s13Sel ? 'selected' : null,
+      dots: (f.nodes || []).map(n => ({ prim: n.prim, tone: n.state === 'completed' ? 'success' : n.state === 'failed' ? 'destructive' : (n.state === 'retrying' || n.state === 'running') ? 'warning' : 'muted' })),
+      seamCount: (f.nodes || []).length + ' seams',
+      select: () => this.nav('/flow/' + encodeURIComponent(f.id)) }));
+    const selFlow = s.s13Flows.find(f => f.id === s.s13Sel) || s.s13Flows[0];
+    // The seam datum shown in the node's right cell — the one value that matters
+    // at that hop (status code, event id, saga step, attempt, delivery ratio).
+    const seamDatumOf = (nd) => {
+      const seam = nd.seam || '';
+      if (nd.prim === 'http') return (seam.split('·')[1] || '200').trim();
+      if (nd.prim === 'trigger') { const m = seam.match(/evt_[0-9a-z]+/i); return m ? m[0] : 'event'; }
+      if (nd.prim === 'saga') { const m = seam.match(/step \d+ of \d+|step \d+/i); return m ? m[0].replace('step ', 'step ') : 'step'; }
+      if (nd.prim === 'worker') { const m = seam.match(/attempt \d+ of \d+/i); return m ? m[0].replace('attempt ', '') : '1/1'; }
+      if (nd.prim === 'stream') { const m = (nd.statusLabel || '').match(/\d+\/\d+/); return m ? m[0] : 'fan-out'; }
+      return '';
+    };
+    // Fan-out deliveries for a stream node (subscriber-level outcome).
+    const fanoutOf = (nd) => {
+      if (nd.prim !== 'stream') return null;
+      const failed = (nd.meta && nd.meta.topic) ? (nd.statusLabel || '') : '';
+      const anyFail = /FAILED|1 FAILED|analytics/i.test(nd.statusLabel || '') || (nd.state === 'failed');
+      return [
+        { name: 'receipt-worker', state: 'ok' },
+        { name: 'ledger-sync', state: 'ok' },
+        { name: 'analytics', state: anyFail ? 'failed' : 'ok' },
+      ];
+    };
+    // Semantic node caption (ref 21) + the causal edge relationship to the next hop.
+    const captionOf = { http: 'ingress', trigger: 'event router', saga: 'orchestration', worker: 'execution', stream: 'fan-out delivery' };
+    const edgeOf = { http: 'routes to', trigger: 'publishes + enqueues', saga: 'runs job', worker: 'emits event', stream: null };
+    const _fnList = selFlow ? selFlow.nodes : [];
+    const s13Nodes = _fnList.map((nd, i) => ({
+      ...nd, idx: i, selected: i === s.s13Node ? '1' : null, halted: nd.meta && nd.meta.halted ? '1' : null,
+      seamVal: seamDatumOf(nd),
+      caption: captionOf[nd.prim] || '',
+      edge: i < _fnList.length - 1 ? (edgeOf[nd.prim] || 'then') : null,
+      hasEdge: i < _fnList.length - 1 && !!edgeOf[nd.prim],
+      fanout: fanoutOf(nd),
+      hasFanout: !!fanoutOf(nd),
+      spawns: nd.prim === 'trigger' ? 'saga + job (fan-out)' : null,
+      hasSpawns: nd.prim === 'trigger',
+      sBadge: badge(nd.state),
+      // Desktop: select the node so the live seam rail updates. Mobile (no room
+      // for a 3rd column): open the seam-detail bottom sheet.
+      pick: () => {
+        const mob = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(max-width: 1439px)').matches;
+        this.setState(mob ? { s13Node: i, sheet: 's13', s13AssistKind: null } : { s13Node: i });
+      },
+    }));
+    // Flow-summary hero: chain-progress arc + seam outcome split.
+    const _fnodes = selFlow ? selFlow.nodes : [];
+    const _cleared = _fnodes.filter(n => n.state === 'completed').length;
+    const _retry = _fnodes.filter(n => n.state === 'retrying' || n.state === 'running').length;
+    const _fail = _fnodes.filter(n => n.state === 'failed').length;
+    const _total = _fnodes.length || 1;
+    const s13Hero = {
+      cleared: String(_cleared), total: String(_total),
+      pct: Math.round((_cleared / _total) * 100),
+      gaugeTone: _fail ? 'destructive' : _retry ? 'warning' : 'success',
+      seamsLabel: _cleared + ' of ' + _total + ' seams cleared',
+      okPct: ((_cleared / _total) * 100).toFixed(1),
+      retryPct: ((_retry / _total) * 100).toFixed(1),
+      failPct: ((_fail / _total) * 100).toFixed(1),
+      okN: String(_cleared), retryN: String(_retry), failN: String(_fail),
+      spine: _fnodes.map(n => ({ prim: n.prim, icon: n.icon, tone: n.state === 'completed' ? 'success' : n.state === 'failed' ? 'destructive' : (n.state === 'retrying' || n.state === 'running') ? 'warning' : 'muted' })),
+      corr: selFlow ? selFlow.id : '—',
+      trace: (_fnodes[0] && _fnodes[0].meta && _fnodes[0].meta.trace) || 'tr_0000',
+      route: selFlow ? (selFlow.method + ' ' + selFlow.route) : '—',
+      spanCleared: _cleared, spanTotal: _total,
+    };
+    const selNode13 = (selFlow && selFlow.nodes[s.s13Node]) || (selFlow && selFlow.nodes[0]);
+    const s13Detail = selNode13 ? {
+      prim: selNode13.prim, name: selNode13.name, status: selNode13.statusLabel,
+      owner: (selNode13.meta && selNode13.meta.owner) || '—',
+      queue: (selNode13.meta && (selNode13.meta.queue || selNode13.meta.topic)) || '—',
+      trace: (selNode13.meta && selNode13.meta.trace) || 'tr_0000',
+      corr: (selNode13.meta && selNode13.meta.corr) || '—',
+      entity: (selNode13.meta && selNode13.meta.entity) || selNode13.name,
+      goRoute: (selNode13.meta && selNode13.meta.goRoute) || null,
+      url: (selNode13.meta && selNode13.meta.url) || '',
+    } : { prim: '—', name: '—', status: '—', owner: '—', queue: '—', trace: '—', corr: '—', entity: '—', goRoute: null, url: '' };
+    const s13Halted = selFlow && selFlow.halted;
+    const s13Verdict = selFlow ? selFlow.verdict : '—';
+    const s13VerdictBadge = 'ns-badge ns-badge--' + (s13Verdict === 'completed' ? 'success' : s13Verdict === 'halted' ? 'destructive' : 'primary');
+    const s13Assist = s.s13AssistKind ? this.buildFlowAssist(s.s13AssistKind, selNode13, selFlow, go) : null;
+
+    // ----- S1 KPIs (NetScript-domain counts — Aspire keeps CPU/latency metrics) -----
+    const execTotal = s.kpiExec.reduce((a, b) => a + b, 0);
+    const fireTotal = s.kpiFire.reduce((a, b) => a + b, 0);
+    const ovrTotal = s.kpiOvr.reduce((a, b) => a + b, 0);
+    // Hero throughput card (Conversion-Rate archetype): hero value + delta pill +
+    // a funnel breakdown table (dispatched → completed → compensated) + a filled
+    // area chart with a baseline grid + hour-window axis labels.
+    const s1Hero = {
+      label: 'executions / hr',
+      value: String(execTotal), unit: '/hr', delta: '↑ 12%', deltaTone: 'success',
+      tone: 'primary', go: go('runs'),
+      series: s.kpiExec.join(','),
+      // comparison under-area = prior window (dimmer)
+      compare: s.kpiExec.map((v, i) => Math.round(v * (0.82 + ((i % 3) * 0.05)))).join(','),
+      aria: 'Executions per hour trend over the last 6 windows, ' + execTotal + ' this hour',
+      axis: ['−5h', '−4h', '−3h', '−2h', '−1h', 'now'],
+      funnel: [
+        { label: 'Dispatched', metric: String(execTotal + 12), dir: 'up', arrow: '↑', delta: '+1.8%', go: go('workers') },
+        { label: 'Completed', metric: String(Math.round(execTotal * 0.912)), dir: 'up', arrow: '↑', delta: '+2.4%', go: go('runs') },
+        { label: 'Compensated', metric: '6', dir: 'down', arrow: '↓', delta: '−1.2%', go: go('sagas') },
+      ],
+    };
+    const s1Kpis = [
+      { label: 'trigger firings', value: String(fireTotal), delta: '↑ 4%', deltaTone: 'success', tone: 'success', foot: 'webhook · polling · schedule', series: s.kpiFire.join(','), go: go('triggers') },
+      { label: 'override changes', value: String(ovrTotal), delta: 'v43 current', deltaTone: 'warning', tone: 'warning', foot: '4 active · nightly-reconcile off', series: s.kpiOvr.join(','), go: go('runtime') },
+      { label: 'saga success', value: '91%', delta: '↓ 1 comp.', deltaTone: 'warning', tone: 'warning', foot: 'PaymentWebhookSaga compensating', series: '90,92,88,91,85,89,84,88,90,86,91,91', go: go('sagas') },
+    ];
+    // Wiring-health radial gauge (semi-donut). Value is a NetScript-domain
+    // wiring-health score (nodes wired & healthy / total addressable nodes).
+    const s1GaugeHealthy = healthy;
+    const s1Gauge = {
+      pct: s1GaugeHealthy ? '100' : '82',
+      value: s1GaugeHealthy ? '20/20' : '16/20',
+      caption: 'nodes wired',
+      tone: s1GaugeHealthy ? 'success' : 'warning',
+      verdict: s1GaugeHealthy ? 'all healthy' : 'attention',
+      badgeClass: s1GaugeHealthy ? 'ns-badge--success' : 'ns-badge--warning',
+      aria: s1GaugeHealthy ? 'Wiring health 20 of 20 nodes healthy' : 'Wiring health 16 of 20 nodes healthy',
+      stats: s1GaugeHealthy ? [
+        { value: '20', label: 'healthy', tone: 'success', go: go('config') },
+        { value: '0', label: 'degraded', tone: 'muted', go: go('config') },
+        { value: '0', label: 'unbound', tone: 'muted', go: go('catalog') },
+      ] : [
+        { value: '16', label: 'healthy', tone: 'success', go: go('config') },
+        { value: '2', label: 'degraded', tone: 'warning', go: go('config') },
+        { value: '2', label: 'unbound', tone: 'warning', go: go('catalog') },
+      ],
+    };
+    // Execution-outcomes channel bar (completed / retried / failed) + data rows.
+    const s1Channel = {
+      total: String(execTotal),
+      completedPct: '91.2%',
+      go: go('runs'),
+      aria: 'Execution outcomes: 91.2% completed, 5.6% retried, 3.2% failed',
+      segs: [
+        { label: 'Completed', tone: 'success', pctLabel: '91.2%', style: 'flex:0 0 91.2%' },
+        { label: 'Retried', tone: 'warning', pctLabel: '5.6%', style: 'flex:0 0 5.6%' },
+        { label: 'Failed', tone: 'destructive', pctLabel: '3.2%', style: 'flex:0 0 3.2%' },
+      ],
+      rows: [
+        { icon: '⚙', label: 'Job executions', metric: String(execTotal), dir: 'up', arrow: '↑', delta: '12%', go: go('workers') },
+        { icon: '⤿', label: 'Saga instances', metric: '48', dir: 'down', arrow: '↓', delta: '3%', go: go('sagas') },
+        { icon: '⚡', label: 'Trigger firings', metric: String(fireTotal), dir: 'up', arrow: '↑', delta: '4%', go: go('triggers') },
+      ],
+    };
+    // Capability-mix donut (share of activity by capability plugin).
+    const donutSegs = [
+      { label: 'Workers', value: '42%', pct: 42, color: 'var(--ns-copper-6)', go: go('workers') },
+      { label: 'Triggers', value: '28%', pct: 28, color: 'var(--ns-teal-5)', go: go('triggers') },
+      { label: 'Streams', value: '18%', pct: 18, color: 'var(--ns-amber-5)', go: go('streams') },
+      { label: 'Sagas', value: '12%', pct: 12, color: 'var(--ns-copper-8, var(--ns-copper-7))', go: go('sagas') },
+    ];
+    const s1Donut = {
+      total: '6', go: go('plugins'),
+      aria: 'Capability mix: Workers 42%, Triggers 28%, Streams 18%, Sagas 12%',
+      data: donutSegs.map(d => d.pct).join(','),
+      segs: donutSegs.map(d => ({ label: d.label, value: d.value, go: d.go, dotStyle: 'background:' + d.color,
+        barStyle: 'width:' + d.pct + '%;background:' + d.color })),
+    };
+    // Wiring-signals data rows (declared vs. running) with status pills.
+    const s1Seg = ['1H', '24H', '7D'].map((l, i) => ({ label: l, state: i === 1 ? 'active' : null, set: () => {} }));
+    const s1Signals = healthy ? [
+      { icon: '❖', label: 'Plugin doctor', detail: '6 plugins · all checks pass', tone: 'success', status: 'pass', badgeClass: 'ns-badge--success', go: go('plugins') },
+      { icon: '⛁', label: 'Migrations', detail: 'schema matches declared', tone: 'success', status: 'in sync', badgeClass: 'ns-badge--success', go: go('migrations') },
+      { icon: '⧉', label: 'Runtime overrides', detail: 'no live overrides', tone: 'success', status: 'defaults', badgeClass: 'ns-badge--muted', go: go('runtime') },
+      { icon: '⚙', label: 'Scheduler drift', detail: 'live matches config', tone: 'success', status: 'none', badgeClass: 'ns-badge--success', go: go('workers') },
+    ] : [
+      { icon: '❖', label: 'Plugin doctor', detail: 'triggers: DLQ port degraded', tone: 'warning', status: '1 warning', badgeClass: 'ns-badge--warning', go: go('plugins') },
+      { icon: '⛁', label: 'Migrations', detail: '20260711_add_delivery_attempts', tone: 'warning', status: String(pendingMig) + ' pending', badgeClass: 'ns-badge--warning', go: go('migrations') },
+      { icon: '⧉', label: 'Runtime overrides', detail: 'nightly-reconcile disabled', tone: 'muted', status: String(disabledOverrides) + ' active', badgeClass: 'ns-badge--muted', go: go('runtime') },
+      { icon: '⚙', label: 'Scheduler drift', detail: 'config ≠ live scheduler', tone: 'warning', status: 'drift', badgeClass: 'ns-badge--warning', go: go('workers') },
+    ];
+    const s1Ai = {
+      text: healthy
+        ? 'All capabilities wired and healthy. Nothing needs attention — scheduler, migrations, and telemetry coverage all agree with declared config.'
+        : 'One incident thread explains most of today\u2019s warnings: redis pool exhaustion is failing job_4183 (reserve-inventory), which put PaymentWebhookSaga into compensating and left payment-events at 2/3 delivered. Separately, nightly-reconcile isn\u2019t drifting — it\u2019s disabled by runtime-config override v43, and 1 migration is pending.',
+      meta: 'ops-model-large · grounded in listExecutionsByCorrelationId + getInstanceHistory · 14:02',
+      grounding: [
+        { label: 'job_4183', go: () => this.nav('/workers/jobs/reserve-inventory/executions/job_4183') },
+        { label: 'ch_3QK9dR2eZ', go: () => this.nav('/flow/ch_3QK9dR2eZ') },
+        { label: 'override v43', go: () => this.nav('/runtime/versions/v43') },
+      ],
+      chips: [
+        { label: 'Open the failing run', go: () => this.nav('/workers/jobs/reserve-inventory/executions/job_4183') },
+        { label: 'See the compensating saga', go: () => this.nav('/sagas/PaymentWebhookSaga/ch_3QK9dR2eZ') },
+        { label: 'Review override v43', go: () => this.nav('/runtime/versions/v43') },
+        { label: 'Ask about your app ✦', go: () => { this.nav('ai'); setTimeout(() => { const el = document.getElementById('ns-ai-ask'); if (el) el.focus(); }, 300); } },
+      ],
+    };
+
+    // ----- S14 AI Agents -----
+    const aiRuns = s.aiRuns.map(r => ({
+      ...r,
+      sBadge: badge(r.status === 'running' ? 'running' : r.status),
+      selState: r.id === s.aiSel ? 'selected' : null,
+      select: () => this.nav('/ai/runs/' + encodeURIComponent(r.id) + (s.aiTab === 'tools' ? '?tab=tools' : '')),
+    }));
+    const selAi = s.aiRuns.find(r => r.id === s.aiSel) || s.aiRuns[0];
+    const aiTurns = (selAi ? selAi.turns : []).map((t, i) => ({
+      ...t, key: i,
+      isUser: t.role === 'user', isAssistant: t.role === 'assistant', isTool: t.role === 'tool',
+      toolState: t.state === 'ok' ? 'success' : t.state === 'failed' ? 'failure' : 'running',
+      hasOutput: !!t.output,
+    }));
+    const aiStats = [
+      { label: 'agent runs (24h)', value: '31' }, { label: 'tool calls', value: '118' },
+      { label: 'tool failure rate', value: '4%' }, { label: 'median latency', value: '2.9s' },
+    ];
+    const AITOOLS = [
+      { tool: 'workers.executionsByCorrelation', plugin: 'workers', calls: '42', fail: '2%', policy: 'read-only' },
+      { tool: 'workers.trigger', plugin: 'workers', calls: '8', fail: '0%', policy: 'mutation · via confirm' },
+      { tool: 'sagas.instanceHistory', plugin: 'sagas', calls: '19', fail: '0%', policy: 'read-only' },
+      { tool: 'sagas.forceComplete', plugin: 'sagas', calls: '1', fail: '0%', policy: 'mutation · via confirm' },
+      { tool: 'triggers.preview', plugin: 'triggers', calls: '11', fail: '0%', policy: 'read-only' },
+      { tool: 'triggers.disable', plugin: 'triggers', calls: '3', fail: '0%', policy: 'mutation · via confirm' },
+      { tool: 'streams.deliveriesList', plugin: 'streams', calls: '14', fail: '7%', policy: 'read-only' },
+      { tool: 'queue.dlqReprocess', plugin: 'triggers', calls: '2', fail: '0%', policy: 'mutation · via confirm' },
+      { tool: 'config.overrideGet', plugin: 'runtime-config', calls: '9', fail: '0%', policy: 'read-only' },
+      { tool: 'config.overrideSet', plugin: 'runtime-config', calls: '4', fail: '0%', policy: 'mutation · via confirm' },
+      { tool: 'contract.inspect', plugin: 'catalog', calls: '6', fail: '0%', policy: 'read-only' },
+      { tool: 'db.migrate', plugin: 'workers', calls: '0', fail: '0%', policy: 'mutation · via confirm' },
+    ];
+    const aiToolRows = AITOOLS.map(t => ({ ...t,
+      failBadge: 'ns-badge ns-badge--' + (parseFloat(t.fail) > 5 ? 'destructive' : parseFloat(t.fail) > 0 ? 'warning' : 'muted'),
+      policyBadge: 'ns-badge ns-badge--' + (t.policy.indexOf('mutation') === 0 ? 'warning' : 'secondary'),
+    }));
+    const ai14 = selAi ? {
+      id: selAi.id, agent: selAi.agent, model: selAi.model, statusBadge: badge(selAi.status === 'running' ? 'running' : selAi.status),
+      status: selAi.status, tokens: selAi.tokens, latency: selAi.latency, corr: selAi.corr, tools: String(selAi.tools),
+      thinking: selAi.status === 'running',
+      corrIsSpine: selAi.corr === 'ch_3QK9dR2eZ',
+    } : {};
+
+    // confirm dialog surface
+    const c = s.confirm || {};
+
+    return {
+      // shell
+      navGroups, crumb: TITLES[s.route] || 'Home', crumbs, addr, addrFull: 'netscript://my-app' + addr, clock: this.fmtClock(s.clockS),
+      hasCrumbTrail: segments.length > 0,
+      envEyebrow: 'netscript · my-app',
+      envState: healthy ? 'running' : 'degraded',
+      themeGlyph: s.dark ? '☀' : '☾',
+      toggleTheme: () => this.toggleTheme(),
+      goHome: (e) => { if (e && e.preventDefault) e.preventDefault(); this.nav('home'); },
+      openMobileNav: () => this.setState({ mobileNav: true }),
+      closeMobileNav: () => this.setState({ mobileNav: false }),
+      sidebarClass: s.mobileNav ? 'is-open' : '',
+      backdropClass: s.mobileNav ? 'is-visible' : '',
+      railClass: s.rail ? 'ns-sidenav--rail' : '',
+      railPressed: s.rail ? 'true' : 'false',
+      railGlyph: s.rail ? '»' : '«',
+      toggleRail: () => this.setState(st => ({ rail: !st.rail })),
+      envLabel: healthy ? 'running' : 'degraded',
+      openCmdk: () => this.setCmdk(true),
+      openAsk: () => { this.nav('ai'); setTimeout(() => { const el = document.getElementById('ns-ai-ask'); if (el) el.focus(); }, 300); },
+      openAspire: () => this.showToast('Would open http://localhost:18888 (Aspire)', 'info'),
+      pinned: [
+        { label: 'Run Inspector', tone: 'primary', kbd: '1', go: go('runs') },
+        { label: 'ch_3QK9dR2eZ', tone: 'warning', kbd: '2', go: () => this.nav('/flow/ch_3QK9dR2eZ') },
+        { label: 'Runtime overrides', tone: 'muted', kbd: '3', go: go('runtime') },
+      ],
+      stopProp: (e) => e.stopPropagation(),
+      // routes
+      isHome: s.route === 'home', isConfig: s.route === 'config', isRuntime: s.route === 'runtime',
+      isCatalog: s.route === 'catalog', isPlugins: s.route === 'plugins', isRuns: s.route === 'runs',
+      isExtensions: s.route === 'extensions',
+      isWorkers: s.route === 'workers', isSagas: s.route === 'sagas', isTriggers: s.route === 'triggers',
+      isStreams: s.route === 'streams', isMigrations: s.route === 'migrations', isDlq: s.route === 'dlq',
+      isFlows: s.route === 'flows', isAi: s.route === 'ai', isAuthc: s.route === 'authc',
+      // S15 — Auth Sessions (session-security roster)
+      s15Sessions: s15Filtered, s15Head, s15Detail, s15HasResults, s15NoResults: !s15HasResults, s15AllRevoked,
+      s15FilterChips, s15SortChips, s15Q: s.s15Q,
+      s15SetQ: (e) => this.setState({ s15Q: e.target.value }),
+      s15ClearFilters: () => this.setState({ s15Filter: 'all', s15Sort: 'expiry', s15Q: '' }),
+      s15RevokeAll: () => this.askConfirm({ title: 'Revoke all live sessions', desc: 'Revokes every non-revoked session (' + s15Live.length + ') and emits auth.session.revoked for each. Elevated + human sessions included.', from: s15Live.length + ' live sessions', to: 'all revoked', cli: 'netscript auth sessions revoke --all', action: 'Revoke all', danger: true, toast: 'all sessions revoked' }),
+      s15RevokeAllN: String(s15Live.length),
+      authFeed: [
+        { tone: 'primary', text: 'auth.token.refreshed · usr_31 · workos', time: '14:00:12' },
+        { tone: 'warning', text: 'auth.session.revoked · usr_07 · by admin', time: '12:30:00' },
+        { tone: 'destructive', text: 'auth.signin.failed · unknown@ · password · 3rd attempt', time: '11:58:44' },
+        { tone: 'success', text: 'auth.oidc.completed · usr_31 · workos', time: '13:02:41' },
+      ],
+      // cmdk
+      cmdkQ: s.cmdkQ,
+      cmdkType: (e) => this.setState({ cmdkQ: e.target.value, cmdkIdx: 0 }),
+      cmdkItems: this.filteredCmds().map((cd, i) => ({ ...cd, sel: i === s.cmdkIdx ? 'true' : 'false', run: () => this.runCmd(cd), hover: () => this.setState({ cmdkIdx: i }) })),
+      cmdkHasResults: this.filteredCmds().length > 0,
+      cmdkEmpty: this.filteredCmds().length === 0,
+      cmdkBackdropClick: () => this.setCmdk(false),
+      // confirm
+      confirmTitle: c.title || '', confirmDesc: c.desc || '', confirmFrom: c.from || '', confirmTo: c.to || '',
+      confirmCli: c.cli || '', confirmAction: c.status === 'applying' ? 'Applying…' : c.status === 'failed' ? 'Retry' : (c.action || 'Confirm'),
+      confirmBtnClass: c.danger ? 'ns-btn ns-btn--destructive' : 'ns-btn ns-btn--primary',
+      confirmBusy: c.status === 'applying',
+      confirmCancel: () => this.setState({ confirm: null }),
+      confirmApply: () => this.applyConfirm(),
+      // toast
+      toastMsg: s.toast ? s.toast.msg : null, toastTone: s.toast ? s.toast.tone : 'success',
+      // detail bottom sheet (mobile stat/card tap)
+      s1Sheet: s.detailSheet || { eyebrow: '', icon: '', tone: 'muted', value: '', title: '', pill: '', pillClass: 'ns-badge ns-badge--muted', desc: '', cta: 'Open', rows: [], go: () => {} },
+      closeDetailSheet: () => this.setState({ detailSheet: null }),
+      // sheet
+      sheetIsS2: s.sheet === 's2', sheetIsS13: s.sheet === 's13', sheetIsS7: s.sheet === 's7', sheetIsS8: s.sheet === 's8', sheetIsS9: s.sheet === 's9', sheetIsS11: s.sheet === 's11', sheetIsS12: s.sheet === 's12', sheetIsS4: s.sheet === 's4', sheetIsS15: s.sheet === 's15', sheetIsS16: s.sheet === 's16', sheetIsS3: s.sheet === 's3',
+      sheetTitle: s.sheet === 's2' ? selDef.key : s.sheet === 's3' ? (s3Detail ? s3Detail.key : '') : s.sheet === 's7' ? s7Detail.name : s.sheet === 's8' ? (s8SelNode ? s8SelNode.name : s8.saga) : s.sheet === 's9' ? s9Detail.id : s.sheet === 's11' ? s11Detail.name : s.sheet === 's12' ? (s12Detail ? s12Detail.id : '') : s.sheet === 's4' ? (s4Detail ? s4Detail.proc : '') : s.sheet === 's15' ? (s15Detail ? s15Detail.id : '') : s.sheet === 's16' ? (extSel ? extSel.name : '') : (selNode13 ? selNode13.name : ''),
+      closeSheet: () => this.setState({ sheet: null }),
+      // S1
+      s1Stats, s1CmdGroups, s1Contribs, s1Teaser, s1Kpis, s1Hero, s1Ai,
+      s1Gauge, s1Channel, s1Donut, s1Seg, s1Signals,
+      s1WarnCount: healthy ? 'nothing' : String(s1Stats.filter(x => x.tone === 'warning').length),
+      s1ContribCount: String(s1Contribs.length),
+      extPanels, extActions, extAvailable,
+      extProviders, extSel, extHead, extSurfChips, extProvCount, extLanes,
+      extTabPanels: s.extTab === 'panels', extTabActions: s.extTab === 'actions', extTabAvail: s.extTab === 'available',
+      extSegPanels: { state: s.extTab === 'panels' ? 'active' : null, set: () => this.updateQuery({ tab: 'panels' }, { extTab: 'panels' }) },
+      extSegActions: { state: s.extTab === 'actions' ? 'active' : null, set: () => this.updateQuery({ tab: 'actions' }, { extTab: 'actions' }) },
+      extSegAvail: { state: s.extTab === 'available' ? 'active' : null, set: () => this.updateQuery({ tab: 'available' }, { extTab: 'available' }) },
+      // S14
+      aiRuns, aiTurns, aiStats, ai14,
+      aiToolRows,
+      aiTabActivity: s.aiTab === 'activity', aiTabTools: s.aiTab === 'tools',
+      aiSegActivity: { state: s.aiTab === 'activity' ? 'active' : null, set: () => this.updateQuery({ tab: 'activity' }, { aiTab: 'activity' }) },
+      aiSegTools: { state: s.aiTab === 'tools' ? 'active' : null, set: () => this.updateQuery({ tab: 'tools' }, { aiTab: 'tools' }) },
+      aiAsk: s.aiAsk,
+      aiSetAsk: (e) => this.setState({ aiAsk: e.target.value }),
+      aiSubmit: () => this.askAi(),
+      aiAskKey: (e) => { if (e.key === 'Enter') this.askAi(); },
+      aiThinking: s.aiThinking,
+      aiOpenGenAI: () => this.showToast('Would open Aspire GenAI telemetry view ↗', 'info'),
+      aiOpenRun: () => this.nav('/workers/jobs/reserve-inventory/executions/job_4183'),
+      aiOpenSaga: () => this.nav('/sagas/PaymentWebhookSaga/ch_3QK9dR2eZ'),
+      // S2 — Config Resolution (layered precedence)
+      cfgRows, cfgNsChips, cfgWater, cfgHeadStats, cfgLegend, cfgTrail,
+      cfgHasRows: cfgRows.length > 0,
+      cfgDiff, cfgHasDiff: selHasDiff,
+      cfgSelKey: selDef.key, cfgSelNs: selDef.ns, cfgSelType: selDef.type,
+      cfgSelEffective: selWinner ? selWinner.value : '—',
+      cfgSelEffUnit: selDef.unit || '',
+      cfgSelWinLabel: selWinner ? layerShort[selWinner.id] : '—',
+      cfgSelWinTone: selWinner ? layerTone[selWinner.id] : 'muted',
+      cfgSelNote: selDef.note,
+      cfgSelShadowCount: String(selRes.shadowed.length),
+      cfgSelLayerCount: String(selRes.present.length),
+      s2OpenAspire: () => this.showToast('Would open netscript.config for ' + selDef.key + ' ↗', 'info'),
+      s2ViewPlugin: () => { this.setState({ s5Sel: selDef.ns === 'flags' || selDef.ns === 'jobs' ? 'workers' : (selDef.ns === 'streams' ? 'streams' : (selDef.ns === 'sagas' ? 'sagas' : (selDef.ns === 'triggers' ? 'triggers' : 'workers'))) }); this.nav('plugins'); },
+      s2ViewContracts: go('catalog'),
+      s2GoRuntime: go('runtime'),
+      // S3 — override store
+      s3Stats, s3FeedItems, s3Vers, s3Store, s3Head, s3Detail,
+      s3PendingReloads, s3NoPending, s3Authors, s3Drift,
+      s3HasStore: s3Store.length > 0, s3NoStore: s3Store.length === 0,
+      s3Follow: s.s3Follow,
+      s3FollowLabel: s.s3Follow ? 'Pause feed' : 'Follow feed',
+      s3ToggleFollow: () => this.setState(st => ({ s3Follow: !st.s3Follow })),
+      s3PendingCount: s.s3Pending.length, s3HasPending: s.s3Pending.length > 0,
+      s3Catch: () => this.setState(st => ({ s3Feed: [...st.s3Pending, ...st.s3Feed].slice(0, 30), s3Pending: [], s3Follow: true })),
+      s3LiveState: s.s3Follow ? null : 'paused',
+      s3SegAll: segBtn('s3View', 'all'), s3SegCompact: segBtn('s3View', 'compact'), s3SegJson: segBtn('s3View', 'json'),
+      s3IsJson: s.s3View === 'json', s3ViewAttr: s.s3View === 'compact' ? 'compact' : 'all',
+      // S4 — Catalog: contract registry explorer
+      s4Contracts, s4Routes, s4Tree, s4Summary,
+      s4Groups, s4Head, s4Detail, s4HasResults, s4NoResults: !s4HasResults,
+      s4KindChips, s4MethodChips, s4CovChips, s4Q: s.s4Q,
+      s4SetQ: (e) => this.setState({ s4Q: e.target.value }),
+      s4ResetFilters: () => this.setState({ s4Kind: 'all', s4Method: 'all', s4Cov: 'all', s4Q: '' }),
+      s4TabContracts: { state: s.s4Tab === 'contracts' ? 'active' : null, set: () => this.updateQuery({ tab: 'contracts' }, { s4Tab: 'contracts' }) },
+      s4TabRoutes: { state: s.s4Tab === 'routes' ? 'active' : null, set: () => this.updateQuery({ tab: 'routes' }, { s4Tab: 'routes' }) },
+      s4IsContracts: s.s4Tab === 'contracts', s4IsRoutes: s.s4Tab === 'routes',
+      // S5
+      s5Rows, s5Axes, s5Doctor, s5,
+      s5ShowCli: s.s5ShowCli,
+      s5RunDoctor: () => { this.setState(st => ({ s5ShowCli: !st.s5ShowCli })); },
+      s5NewPlugin: () => this.s5NewPlugin(),
+      s5ViewWiring: () => this.nav('/config/nodes/' + encodeURIComponent(s.s5Sel === 'workers' ? 'worker-reserve' : s.s5Sel === 'sagas' ? 'saga-order' : s.s5Sel === 'streams' ? 'stream-pay' : 'trig-webhook')),
+      s5ViewContracts: go('catalog'),
+      // S6
+      s6Runs, s6Empty, s6Steps, s6, s6Feed, s6Logs, s6Hero, s6Stats, s6RunCount: String(s6Runs.length),
+      s6Status: s.s6Status, s6Cap: s.s6Cap, s6Q: s.s6Q,
+      s6SetStatus: (e) => this.updateQuery({ status: e.target.value }, { s6Status: e.target.value }),
+      s6SetCap: (e) => this.updateQuery({ capability: e.target.value }, { s6Cap: e.target.value }),
+      s6SetQ: (e) => this.updateQuery({ q: e.target.value }, { s6Q: e.target.value }),
+      s6Reset: () => this.updateQuery({ status: null, capability: null, q: null }, { s6Status: 'all', s6Cap: 'all', s6Q: '' }),
+      s6SegAll: segBtn('s6View', 'all'), s6SegCompact: segBtn('s6View', 'compact'), s6SegJson: segBtn('s6View', 'json'),
+      s6ShowSteps: s.s6View !== 'json',
+      s6ViewAttr: s.s6View === 'compact' ? 'compact' : 'all',
+      s6OpenTrace: () => this.showToast('Would open Aspire /traces/tr_9f21 ↗', 'info'),
+      s6OpenLogs: () => this.showToast('Would open Aspire structured logs ↗', 'info'),
+      s6OpenFlow: () => this.nav('/flow/ch_3QK9dR2eZ'),
+      s6OpenTrigger: () => this.nav('/triggers/webhook.payment/events/evt_2210'),
+      s6Assist,
+      s6ToJourney: () => { this.setState({ s13Node: 0, s13AssistKind: null }); this.nav('/flow/ch_3QK9dR2eZ'); },
+      s6AssistExplain: () => this.setState({ s6AssistKind: 'explain' }),
+      s6AssistFix: () => this.setState({ s6AssistKind: 'fix' }),
+      s6AssistCompare: () => this.setState({ s6AssistKind: 'compare' }),
+      s6Rerun: () => this.askConfirm({
+        title: 'Re-run reserve-inventory',
+        desc: 'Enqueues a fresh execution on the durable queue — lands in the executions feed like any other run.',
+        from: 'reserve-inventory · attempt 2 of 3 · retrying', to: 're-run enqueued',
+        cli: 'netscript workers trigger reserve-inventory', action: 'Re-run job',
+        toast: 'Execution enqueued — watch the live feed',
+      }),
+      s6Reprocess: () => this.askConfirm({
+        title: 'Reprocess failed delivery',
+        desc: 'Replays the failed analytics delivery of msg_88f from the redis dead-letter queue.',
+        from: 'msg_88f · analytics · dead (redis)', to: 're-enqueued',
+        cli: 'netscript queue dlq reprocess --backend redis', action: 'Reprocess', danger: true,
+        toast: 'Delivery re-enqueued — watch the live feed',
+      }),
+      // S7 — table-forward registry console
+      s7Jobs, s7Drift, s7Pool, s7StatTiles, s7RtMix, s7RtChips, s7Empty, s7Detail, s7DetailRuns,
+      s7RegCount: String(s7JobsRaw.length), s7RunningCount: '4', s7DriftCount,
+      s7Q: s.s7Q, s7SetQ: (e) => this.setState({ s7Q: e.target.value }),
+      s7TabExec: () => this.scrollToSection('s7-executions'),
+      s7TabPools: () => this.scrollToSection('s7-pools'),
+      s7TabDrift: () => this.scrollToSection('s7-drift'),
+      s7FeedItems: s.s7Feed,
+      s7Follow: s.s7Follow, s7ToggleFollow: () => this.setState(st => ({ s7Follow: !st.s7Follow })),
+      s7PendingCount: s.s7Pending.length, s7HasPending: s.s7Pending.length > 0,
+      s7Catch: () => this.setState(st => ({ s7Feed: [...st.s7Pending, ...st.s7Feed].slice(0, 30), s7Pending: [], s7Follow: true })),
+      s7LiveState: s.s7Follow ? null : 'paused',
+      s7OpenRun: () => this.nav('/workers/jobs/reserve-inventory/executions/job_4183'),
+      s7OpenTrace: () => this.showToast('Would open Aspire /traces/tr_9f21 ↗', 'info'),
+      // S8 — canvas-forward saga node graph (V4b)
+      s8Rows, s8Steps, s8, s8Feed: s8FeedGroups, s8FeedGroups, s8Hero, s8Machine, s8Assist, s8StatTiles,
+      s8Health, s8StepTable, s8FwdHealth, s8CompHealth, s8HasCompHealth, s8Rail,
+      s8Tabs, s8TabIs, s8Evidence, s8HasEvidence,
+      s8FwdNodes, s8CompNodes, s8HasComp: s8Machine.hasComp, s8Props,
+      s8PropsIsNode: s8Props.mode === 'node', s8PropsIsSummary: s8Props.mode === 'summary',
+      s8Zoom: s.s8Zoom,
+      s8ClearNode: () => this.setState({ s8Node: null, sheet: null }),
+      s8FitView: () => { this.setState({ s8Zoom: 100 }); this.scheduleSagaEdges(); },
+      s8ZoomOut: () => this.showToast('Fit-to-view canvas — zoom is presentational in the prototype', 'info'),
+      s8ZoomIn: () => this.showToast('Fit-to-view canvas — zoom is presentational in the prototype', 'info'),
+      s8Assistant: () => this.nav('/ai'),
+      s8SegAll: segBtn('s8View', 'all'),
+      s8OpenTrace: () => this.showToast('Would open Aspire /traces/tr_7aa4 ↗', 'info'),
+      s8OpenRun: () => this.nav('/runs/ch_3QK9dR2eZ?primitive=run-saga'),
+      s8OpenJob: () => this.nav('/workers/jobs/reserve-inventory/executions/job_4183'),
+      s8RetryStep: () => this.askConfirm({ title: 'Retry failed saga step', desc: 'Retries the failed reserve step for this durable instance.', from: s8.saga + ' · reserve failed', to: 'reserve retry enqueued', cli: 'netscript sagas retry-step ' + s8.saga + ' --correlation-id ' + s8.id + ' --step reserve', action: 'Retry step', toast: 'Saga step retry enqueued', resultPath: '/sagas/' + encodeURIComponent(s8.saga) + '/' + encodeURIComponent(s8.id) }),
+      s8ForceComplete: () => this.askConfirm({ title: 'Force-complete compensation', desc: 'Marks the compensation sequence complete after operator verification.', from: s8.saga + ' · compensating', to: 'compensation complete', cli: 'netscript sagas force-complete ' + s8.saga + ' --correlation-id ' + s8.id, action: 'Force complete', danger: true, toast: 'Saga compensation force-completed', resultPath: '/sagas/' + encodeURIComponent(s8.saga) + '/' + encodeURIComponent(s8.id) }),
+      // S9
+      s9Trigs, s9Preview,
+      s9EventItems,
+      s9Cats, s9CatActive, s9CatIsAll: s.s9Cat === 'all',
+      s9StatTiles, s9DeadLetters,
+      s9Builder, s9Palette,
+      s9Days, s9NextFires, s9HasSched: s9NextFires.length > 0,
+      s9SortCols, s9Hist: s9HistShown, s9HistEmpty, s9HistCount,
+      s9Query: s.s9Query, s9Outcome: s.s9Outcome, s9Limit: s.s9Limit,
+      s9SetQuery: (e) => this.setState({ s9Query: e.target.value }),
+      s9ClearQuery: () => this.setState({ s9Query: '' }),
+      s9SetOutcome: (e) => this.setState({ s9Outcome: e.target.value }),
+      s9SetLimit: (e) => this.setState({ s9Limit: e.target.value }),
+      s9AddFilter: () => this.showToast('JS payload filters are a preview affordance in this build', 'info'),
+      s9Detail,
+      s9ClearCat: () => this.setState({ s9Cat: 'all' }),
+      s9Follow: s.s9Follow, s9ToggleFollow: () => this.setState(st => ({ s9Follow: !st.s9Follow })),
+      s9PendingCount: s.s9Pending.length, s9HasPending: s.s9Pending.length > 0,
+      s9Catch: () => this.setState(st => ({ s9Events: [...st.s9Pending, ...st.s9Events].slice(0, 30), s9Pending: [], s9Follow: true })),
+      s9LiveState: s.s9Follow ? null : 'paused',
+      s9Webhook: s.s9Webhook,
+      s9SetWebhook: (e) => this.setState({ s9Webhook: e.target.value }),
+      s9SendTest: sendWebhookTest,
+      s9OpenRun: () => this.nav('/runs/ch_3QK9dR2eZ?primitive=run-trig'),
+      s9OpenDlq: () => this.nav('/dlq/triggers?kind=trigger'),
+      // S10 · Streams topic console
+      s10Msgs, s10Fan, s10Subs,
+      s10FeedItems: s.s10Feed,
+      s10SelId: s.s10Sel,
+      s10Verdict: s.s10Sel === 'msg_88f' ? 'msg_88f: 2/3 delivered · 1 failed (analytics)' : 'msg_87c: 3/3 delivered',
+      s10VerdictBadge: s.s10Sel === 'msg_88f' ? 'ns-badge ns-badge--destructive' : 'ns-badge ns-badge--success',
+      s10Corr: s.s10Sel === 'msg_88f' ? CORR : '7bd2e011-uuid',
+      s10OpenRun: () => this.nav('/runs/ch_3QK9dR2eZ?primitive=run-stream'),
+      s10OpenTrace: () => this.showToast('Would open Aspire /traces/tr_8e10 ↗', 'info'),
+      // topic-level composite
+      s10TopicName: s10Topic.name, s10TopicBackend: s10Topic.backend,
+      s10Partitions: s10Topic.partitions, s10InSync: s10Topic.inSync,
+      s10Replication: s10Topic.replication, s10Retention: s10Topic.retention,
+      // throughput hero (JS-measured, post-mount)
+      s10ThruSeries: thruSeries.join(','), s10ThruMarker: String(thruMarker),
+      s10ThruNow: thruNow, s10ThruPeak: thruPeak, s10ThruFloor: thruFloor, s10ThruAvg: thruAvg,
+      s10ThruSpark: thruSeries.slice(-12).join(','),
+      s10Backpressure: backpressure.label, s10BackpressureDetail: backpressure.detail, s10BackpressureTone: backpressure.tone,
+      // consumer groups + lag
+      s10Groups, s10TotalLag, s10LagHot,
+      s10Consumers, s10Producers,
+      // partitions + heatmap + records + schema
+      s10Parts, s10Heat, s10Records, s10Schema,
+      // tabs
+      s10TabConsume: seg10('consume'), s10TabParts: seg10('partitions'),
+      s10TabConsumers: seg10('consumers'), s10TabConfig: seg10('config'),
+      s10IsConsume: s10Tab === 'consume', s10IsParts: s10Tab === 'partitions',
+      s10IsConsumers: s10Tab === 'consumers', s10IsConfig: s10Tab === 'config',
+      // S11
+      s11Rows, s11HasPending, s11HasFailed, s11InSync, runMigrate, s11Diff,
+      s11Timeline, s11Queue, s11Head, s11Gauge, s11DriftRows, s11DriftCount,
+      s11Detail, s11TabSummary, s11TabDdl,
+      s11DrawerDdl: s11DrawerTab === 'ddl', s11DrawerSummary: s11DrawerTab === 'summary',
+      s11OpenDrawer: () => this.setState({ sheet: 's11', s11DrawerTab: 'summary' }),
+      s11OpenAspire: () => this.showToast('Would open Aspire postgres resource ↗', 'info'),
+      // S12 · Dead-Letter Queues (operational triage console)
+      s12Rows, s12Count, s12HasSel: s12Count > 0, s12NoSel: s12Count === 0, reprocess, purgeSelected,
+      s12TabQueue: { state: s.s12Tab === 'queue' ? 'active' : null, set: () => this.updateQuery({ kind: 'queue' }, { s12Tab: 'queue', s12Checked: {}, s12Filter: null, s12Sel: null }) },
+      s12TabTrigger: { state: s.s12Tab === 'trigger' ? 'active' : null, set: () => this.updateQuery({ kind: 'trigger' }, { s12Tab: 'trigger', s12Checked: {}, s12Filter: null, s12Sel: null }) },
+      s12Caption, s12Cli, s12Strip, s12Queues, s12Clusters, s12Detail,
+      s12Empty, s12AllClear, s12NotEmpty: !s12Empty && !s12AllClear,
+      s12AllChecked, s12ToggleAll, s12FilterActive, s12FilterLabel, s12ClearFilter,
+      s12QueueScope: s.s12Tab === 'queue', s12TriggerScope: s.s12Tab === 'trigger',
+      s12OpenRun: () => { this.setState({ s6Sel: 'run-job' }); this.nav('runs'); },
+      // S13
+      s13Flows, s13Nodes, s13Detail, s13Verdict, s13VerdictBadge, s13Assist, s13Hero,
+      s13SelName: selNode13 ? selNode13.name : '—',
+      s13SelPrim: selNode13 ? selNode13.prim : '—',
+      s13SelStatus: selNode13 ? selNode13.statusLabel : '—',
+      s13SelBadge: selNode13 ? badge(selNode13.state) : 'ns-badge ns-badge--muted',
+      s13HasAssist: !!s13Assist,
+      s13OpenEntity: () => { if (s13Detail.url) { this.nav(s13Detail.url); } else { this.showToast('This seam node has no owning entity screen', 'info'); } },
+      s13ToInspector: () => this.nav('/runs/' + encodeURIComponent(selFlow ? selFlow.id : 'ch_3QK9dR2eZ') + '?primitive=run-saga'),
+      s13AssistExplain: () => this.setState({ s13AssistKind: 'explain' }),
+      s13AssistFix: () => this.setState({ s13AssistKind: 'fix' }),
+      s13AssistCompare: () => this.setState({ s13AssistKind: 'compare' }),
+      s13Follow: s.s13Follow, s13ToggleFollow: () => this.setState(st => ({ s13Follow: !st.s13Follow })),
+      s13PendingCount: s.s13Pending, s13HasPending: s.s13Pending > 0,
+      s13Catch: () => this.setState({ s13Pending: 0, s13Follow: true }),
+      s13LiveState: s.s13Follow ? null : 'paused',
+      s13Route: s.s13Route, s13SetRoute: (e) => this.updateQuery({ route: e.target.value }, { s13Route: e.target.value }),
+      s13Status: s.s13Status, s13SetStatus: (e) => this.updateQuery({ status: e.target.value }, { s13Status: e.target.value }),
+      s13FlowName: selFlow ? (selFlow.method + ' ' + selFlow.route) : '—',
+      s13FlowTime: selFlow ? selFlow.time : '',
+      s13FlowId: selFlow ? selFlow.id : '',
+      s13Empty: s13Flows.length === 0,
+      s13OpenTrace: () => this.showToast('Would open Aspire /traces/detail/' + (s13Detail.trace) + ' ↗', 'info'),
+      s13OpenRun: () => this.nav('/runs/' + encodeURIComponent(selFlow ? selFlow.id : 'ch_3QK9dR2eZ') + '?primitive=run-saga'),
+      s13OpenScalar: () => this.showToast('Would open /api/docs#orders.create (Scalar)', 'info'),
+      s13OpenStreams: go('streams'),
+    };
+  }
+}
+</script>
+</body>
+</html>
diff --git a/.llm/runs/beta10--orchestrator/visual/DESIGN-LANGUAGE.md b/.llm/runs/beta10--orchestrator/visual/DESIGN-LANGUAGE.md
new file mode 100644
index 000000000..8d7e96973
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/DESIGN-LANGUAGE.md
@@ -0,0 +1,61 @@
+# NetScript Dev Dashboard — visual design-language (BOLD calibration, binding for V2+)
+
+The owner reset the bar: **push bolder.** V1 was too conservative. Study the 10 reference images in
+`references/` (esp. `01-synergy-hr-desktop.png` — the fullest example) and build to THAT level of
+craft — but in **NS One's identity**, not the references' palette.
+
+## The one hard rule: adopt STRUCTURE, keep IDENTITY
+- **Adopt from the refs:** layout density, "no dead space", component variety, composability,
+  information hierarchy, UX story / navigation, elegant sidebar + topbar, mobile-first responsiveness,
+  fluent breakpoints, condensed-yet-legible content.
+- **Keep NS One's identity:** warm-cream light default + dark; the hard-offset **press shadow** (NOT
+  the refs' soft-blur); `--ns-*` tokens only (no raw hex); `ns-*` class markup (round-trips to Fresh);
+  DM Sans + DM Mono; the complementary-satellite doctrine (no owned waterfall/log-tail/metrics/
+  resource-start-stop). Do **not** paste in the refs' purple/green/rounded-soft look.
+- **Never change** routes, logic, data, features, or copy meaning. Visual + layout only. Zero `{{ }}`
+  in the DOM and zero console errors after every change, both themes.
+
+## What "bolder" means here — the reference lessons
+1. **Density & composition — no dead space.** The refs pack structured content edge-to-edge: multi-
+   column card grids, tight gutters, every card earning its area. Kill large empty regions; increase
+   information-per-screen while staying scannable. Right-size cards to content.
+2. **Component variety & composability.** The refs show a rich, reusable kit — build the NS One
+   equivalents (token-driven, no SVG `{{ }}` holes; use div/CSS or post-mount JS for any geometry):
+   - **KPI blocks** with a big value + a delta chip (e.g. green `+2.1%` pill) + a mini chart.
+   - **Mini charts:** area, line (with a point + tooltip), bar, **radial gauge** ("10 out of 20"),
+     **donut/segmented ring**, **stacked horizontal channel bar** with legend. All token-colored.
+   - **Segmented time controls** (1D/1W/1M/3M/1Y) as a proper control, not plain tabs.
+   - **Status pills** (Pending/Confirmed/Rejected → warning/success/destructive tones), **trend
+     arrows** (up/down + %), **avatar stacks** (+N), **provenance/plugin chips**.
+   - **Data rows** = icon + label + metric + trend, aligned in columns.
+   Reuse these across screens so the product feels composed from one kit.
+3. **Information hierarchy.** Clear altitude: page title → section headers → card titles → the hero
+   number → supporting rows → footnotes. One dominant element per card. Strong type scale, quiet
+   labels (mono micro-caps), loud values.
+4. **Elegant chrome (top bar + side menu) — make these a signature.**
+   - **Sidebar:** grouped icon nav with section labels (Overview/Capabilities/Data/System), derived
+     badges, an **active-item treatment** (accent bar/pill), a collapsible icon rail, and a **profile/
+     workspace card pinned at the bottom** (like the refs). Consider a compact "pinned/recent" group.
+   - **Topbar:** a real header — contextual breadcrumb/title, the `local · my-app · aspire` env pill,
+     a prominent **search/⌘K**, the **Open Aspire ↗** action, theme toggle — balanced and elegant,
+     not a thin strip.
+5. **UX story / navigation.** Lean into the 41 addressable routes: list → detail → leaf should feel
+   like a guided journey; the correlation spine (`ch_3QK9dR2eZ`) is the narrative backbone; deep-links
+   everywhere; breadcrumbs that tell you where you are.
+6. **Mobile-first & responsive — fluent breakpoints (REQUIRED, currently missing).** The prototype is
+   desktop-only today. Make it responsive: a mobile-first base that scales up. Desktop = multi-column
+   grid + full sidebar; tablet = fewer columns; **mobile = single column, sidebar collapses to a
+   drawer, dense cards stack, bottom-sheet patterns for detail/forms** (see `02-synergy-mobile-nav.png`
+   + `06-mobile-sheets.png`). Verify breakpoints don't overflow or clip; the body never scrolls
+   horizontally.
+
+## Verify loop (both viewports)
+Server: `http://127.0.0.1:8899/prototype.dc.html`. Screenshot desktop (1440×900) AND mobile
+(~390×844) in both themes; **look** at the PNGs. Zero `{{ }}` / zero console errors must hold. No
+horizontal body scroll at any width.
+
+## Rollout
+Establish the bar on the **shell (sidebar+topbar) + Home** first for owner sign-off, then roll the
+same kit + density + responsiveness across every screen (investigation spine, capability consoles +
+detail/leaf, control plane incl. topology, AI, extensions), then a final dark-mode + motion +
+empty/loading/error polish. One kit, applied everywhere.
diff --git a/.llm/runs/beta10--orchestrator/visual/DS-UPLIFT-BACKLOG.md b/.llm/runs/beta10--orchestrator/visual/DS-UPLIFT-BACKLOG.md
new file mode 100644
index 000000000..174a95778
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/DS-UPLIFT-BACKLOG.md
@@ -0,0 +1,974 @@
+# NS One design-system uplift backlog — accumulated from the dashboard visual passes
+
+**Purpose.** The dashboard visual redesign is deliberately **NOT constrained** to the current NS One
+component set — it treats the design pass as the opportunity to **raise the design system's bar**.
+Every new/refined component, token, variant, option, and mobile optimization the dashboard needs is
+captured here. We do **not** uplift the design system now — we validate the dashboard prototype first.
+Once the prototype is signed off, **this ledger drives a design-system uplift** (raising
+`@netscript/fresh-ui` / NS One quality, variety, configurability, variants, new components) **before**
+the real product is built.
+
+**Standing rule for EVERY visual pass** (put this in every brief):
+- Do not limit yourself to existing NS One components. Invent the richer / more refined / more
+  configurable component the reference craft demands.
+- Keep NS One identity so it round-trips + is liftable: `--ns-*` tokens only (no raw hex), `ns-*`
+  class contracts (`ns-<block>` / `ns-<block>--<variant>` / `ns-<block>__<part>`), warm-cream light +
+  dark, hard-offset press shadow, copper/teal/amber, DM Sans / DM Mono.
+- At the end of the pass, **append** your uplift items to the ledger below.
+
+---
+
+## Ledger (append one block per pass, newest last)
+
+Each pass appends under these headings:
+
+- **New components** — name · class contract · what it does · screens using it
+- **Refinements to existing components** — component · what changed · why
+- **New tokens** — `--ns-*` · value/intent · why
+- **New variants** — `component--variant` · when to use
+- **New options / props / data-attributes** — component · option · values · behavior
+- **Mobile optimizations** — pattern (bottom sheet / drawer / stacked masonry / breakpoint) · where
+
+<!-- passes append below this line -->
+
+## Pass V3 — Investigation spine (Live Flow S13 + Run Inspector S6)
+
+Refs mined: 04-finance (arc gauge, breakdown tiles, outcome split), 05-timeoff (data-point line +
+value tooltip, arc + status list, segmented time), 01-synergy (KV split-panel, left-accent cards),
+03-analytics (funnel/step table, channel split + legend), 11/13-devconsole (stat strip, sortable
+console table, right drawer, altitude picker), 21-flow-builder (node-graph: node cards + captions +
+edge branch-labels + selected ring + properties panel).
+
+### New components
+- **`ns-flowhero`** · `.ns-flowhero` / `__gauge` / `__spine` / `__spine-dot[data-tone][data-prim]` /
+  `__body` / `__top` / `__route` · flow-summary band (chain-progress arc + mini spine + correlation
+  KV split + seam-outcome split) · Live Flow.
+- **`ns-fanout`** · `.ns-fanout` / `__leg[data-state]` / `__dot` · subscriber-level delivery fan-out
+  (per-sink ok/failed pills) · Live Flow stream node; reusable on Streams.
+- **`ns-statstrip`** · `.ns-statstrip` / `__tile` / `__label` / `__value[data-tone]` · console stat
+  strip (eyebrow micro-cap + big tone value tiles) · Run Inspector; reusable on all console screens.
+- **`ns-runtable`** · `.ns-runtable` / `__head` / `__title` / `__count` / `__cols` / `__col[--sorted]`
+  / `__sort` · console-table wrapper (titled head + sortable column header) around an entity rail ·
+  Run Inspector; reusable for any entity list wanting a console-table read.
+- **`ns-runhero`** + **`ns-runstat`** · `.ns-runhero` / `__gauge` / `__body` / `__top` / `__name` /
+  `__corr-note`; `.ns-runstat` / `__tile` / `__val[data-tone]` / `__of` / `__label` · run-summary
+  hero (step arc + correlation KV split + attempt/compensation breakdown) · Run Inspector; reusable
+  on Sagas/Workers detail.
+- **`ns-runrow`** · `.ns-runrow` / `__glyph[data-prim]` / `__body` · entity-rail row with a primitive
+  glyph tile · Run Inspector; reusable on any capability rail.
+- **`ns-seamrail`** (composed, not a single class) · desktop seam-detail properties rail (KV +
+  deep-links + grounded assist) that folds to a bottom sheet on mobile · Live Flow.
+
+### Refinements to existing components
+- **`ns-journey`** → `--rich` variant · card-row nodes, tinted glyph tiles, right seam-value chip
+  (`ns-journey__val`, tinted by `[data-state]`), semantic caption pill (`__sub`/`__caption`),
+  connector edge branch-labels (`__edge`), selected copper accent + ring, `__spawn` hint, `__legend`
+  · because the journey must read as a composed causal node-graph, not stacked text (ref 21).
+- **`ns-flowrow`** → `__chain` / `__chaindot[data-tone][data-prim]` mini seam-chain preview + seam
+  count · so each correlation previews its shape in the rail.
+- **`ns-gauge`** → `__of` (denominator) + `__label` (micro-cap) parts · so the arc gauge reads as a
+  fractional progress (`2/5`, `2/4`) not only a percentage. Reuses existing `drawGauges` geometry.
+- **`ns-kv`** → `--split` variant (auto-fit split-panel, left-aligned values) · correlation header
+  pattern from ref 01.
+- **`ns-step-timeline`** → `--data` variant · `__n` step number, right `__datum` chip (tinted by
+  `[data-state]`), active-step floating value tooltip (`__tip`, `[data-tip='1']`), and a bolder
+  **indented compensation lane** (gutter `⟲` + warning rail) so the rollback branch is unmistakable.
+- **`ns-logstrip`** → 2-row line (ts·resource / message) + severity dot · fixes resource/message
+  truncation in narrow rails and on mobile.
+- **seam-detail bottom sheet** → `ns-seamsheet-hero` badge header (primitive + status).
+
+### New tokens
+- None — everything composed from existing `--ns-*` tokens (no raw hex).
+
+### New variants
+- `ns-journey--rich`, `ns-kv--split`, `ns-step-timeline--data`.
+
+### New options / data-attributes
+- `ns-flowhero__spine-dot[data-tone][data-prim]`, `ns-flowrow__chaindot[data-tone][data-prim]`,
+  `ns-fanout__leg[data-state]`, `ns-statstrip__value[data-tone]`, `ns-runstat__val[data-tone]`,
+  `ns-runrow__glyph[data-prim]`, `ns-runtable__col--sorted`/`__sort`,
+  `ns-step-timeline__datum` (tinted by `[data-state]`), `ns-step-timeline__step[data-tip='1']`.
+
+### Mobile optimizations
+- **Live Flow seam-detail = dedicated bottom sheet** (viewport-branched click handler; desktop 3rd
+  column `.ns-seamrail` hides < 1440px).
+- `ns-flow-grid` responsive: `1fr` → `16rem 1fr` (≥1024) → `16rem 1fr 19rem` (≥1440).
+- `ns-statstrip` → 2×2 on mobile; `ns-flowhero`/`ns-runhero` → single column < 720/560px.
+- `ns-logstrip` 2-row line stays legible at 390px.
+
+## Pass V4 — Workers + Sagas
+
+Refs mined: 11 devconsole-a (breadcrumb + stat strip + sortable data table + right drawer), 12
+devconsole-b (tab row + toolbar), 13 devconsole-c (text-valued stat / cause naming), 19 pm-dashboard
+(table with a status-pill column), 21 flow-builder (node-graph: pill nodes + edge branch-labels +
+selected ring → the saga state machine), 09 analytics (stacked category bar → runtime-mix).
+
+Deliberate constraint honored: **Workers is table-forward, Sagas is diagram-forward** — different
+hero, dominant component, and grid rhythm so the two consoles never read as one template.
+
+### New components
+- **`ns-conhead`** · `.ns-conhead` (scopes denser stat tiles) · console-header wrapper (breadcrumb +
+  tab row + stat strip). · Workers, Sagas; every console + control-plane screen.
+- **`ns-conbread`** · `.ns-conbread` / `__crumb` / `__crumb--here` / `__sep` · in-content breadcrumb.
+- **`ns-contab`** · `.ns-contab` / `__btn[data-state='active']` / `__count` · console **tab row**
+  (underlined active tab + count pill). · Workers (Registry/Executions/Pools/Drift), Sagas.
+- **`ns-contoolbar`** · `.ns-contoolbar` / `__search` / `__search-ico` · table toolbar (search + slots).
+- **`ns-rtchips` / `ns-rtchip`** · `.ns-rtchip[data-state]` / `__dot[data-rt]` · `?runtime=` filter
+  chips (they filter the registry). · Workers.
+- **`ns-rtbadge`** · `.ns-rtbadge` / `__dot[data-rt]` · runtime badge column (deno/python/shell/
+  dotnet/pwsh colored dot). · Workers; reusable for any polyglot/kind marker.
+- **`ns-runtimemix`** · `.ns-runtimemix` / `__bar` / `__seg[data-rt]` / `__legend` / `__leg` · stacked
+  runtime-distribution bar + dot legend (ref 09). · Workers; reusable for any categorical split.
+- **`ns-contable`** · `.ns-contable` / `__scroll` / `__t` / `__th[--sorted][--r]` / `__sort` /
+  `__row[data-state]` / `__td` / `__name` / `__sub` / `__sched` · dense sortable console table
+  (Workers hero). · The canonical dense table for Catalog/DLQ/Auth/Migrations.
+- **`ns-drawer`** · `.ns-drawer` / `__head` / `__title` / `__body` / `__section-label` / `__tabs` /
+  `__tab` · right detail drawer (folds to bottom sheet on mobile). · Workers; reusable console detail
+  surface (Run Inspector, DLQ, Auth).
+- **`ns-poolmeter`** · `.ns-poolmeter` / `__row[data-state]` / `__pulse` / `__q` / `__consumers` /
+  `__cnum` · liveness rows with a heartbeat **pulse** + destructive dead-queue state. · Workers;
+  reusable on Streams (subscriber liveness) + DLQ.
+- **`ns-driftpanel` / `ns-driftrow`** · `.ns-driftrow[data-state]` / `__dot` / `__main` / `__probe` /
+  `__result` / `__cause` · drift rows that **name the cause** (`override v43`) + deep-link assist. ·
+  Workers; reusable on Runtime/Config/Migrations.
+- **`ns-sagahero`** · `.ns-sagahero` / `__gauge` / `__body` / `__top` / `__name` · compensation-state
+  summary band (state arc + correlation split + breakdown). · Sagas; any state-machine primitive.
+- **`ns-durabar`** · `.ns-durabar[data-tier]` / `__pips` / `__pip` / `__label` · durability-tier pip
+  viz. · Sagas; reusable for any guarantee/tier dimension (Streams delivery, DLQ backend).
+- **`ns-smd`** · `.ns-smd` / `__lane[--comp]` / `__lane-label[data-lane]` /
+  `__node[data-state][data-current]` / `__pill` / `__glyph` / `__cap` / `__edge[data-lane]` /
+  `__edge-label` / `__edge-line` · **saga state-machine mini-diagram** — forward pill-nodes + edge
+  branch-labels + a distinct dashed rollback lane + current-node ring (ref 21). · Sagas hero; the
+  reusable small state/flow diagram for Config topology, Trigger composite chains, any branching flow.
+
+### Refinements to existing components
+- **`ns-statstrip`** → `--5` variant (2→3→5 responsive) + a `ns-conhead`-scoped denser tile (shorter
+  padding, `text-xl` value) so console-header strips read tighter than the S6 default.
+- **generic right sheet** → viewport-branched `data-side` (right on desktop, **bottom on mobile**),
+  so one dialog is both a desktop detail drawer and a mobile bottom sheet (now used by Workers
+  row-detail in addition to S2/S13).
+- **`ns-step-timeline--data`** → reused on Sagas with per-step **datum chips** from the saga history
+  (`208ms` / `E_TIMEOUT` / `ref_102`); proves the V3 variant generalizes beyond Run Inspector.
+
+### New tokens
+- None. `.NET` runtime swatch uses `color-mix(in oklab, var(--ns-fg), var(--ns-card) 25%)` (theme-
+  correct in both modes, no raw hex).
+
+### New variants
+- `ns-statstrip--5`, `ns-smd__lane--comp`, `ns-driftrow[data-state]`, `ns-durabar[data-tier]`.
+
+### New options / data-attributes
+- `ns-rtchip[data-state]` + `__dot[data-rt]`, `ns-rtbadge__dot[data-rt]`,
+  `ns-runtimemix__seg[data-rt]` (deno/python/shell/dotnet/pwsh), `ns-contable__row[data-state]`,
+  `ns-contable__th--sorted`, `ns-poolmeter__row[data-state='failed']`, `ns-driftrow[data-state]`,
+  `ns-durabar[data-tier]`, `ns-smd__node[data-state][data-current]`, `ns-smd__edge[data-lane='comp']`,
+  `ns-contab__btn[data-state='active']` + `__count`.
+
+### Mobile optimizations
+- `ns-contable` scrolls horizontally inside its own `__scroll` container (body never scrolls at 390).
+- Workers registry-row → **dedicated bottom sheet** (viewport-branched `data-side` = bottom < 640px).
+- `ns-smd` lanes wrap to multiple rows on narrow viewports (no h-scroll); rollback lane stays railed.
+- `ns-statstrip--5` steps 2→3→5; `ns-sagahero` → single column < 560px.
+
+## Pass V4b — Sagas canvas
+
+The V4 Sagas screen was rejected: the state machine was a mini-diagram (`ns-smd`) *inside* the shared
+3-column console template (list → hero card → transitions rail), so it read as the same screen as
+every other console. V4b promotes the state machine to a **full-bleed n8n / flow-builder node-graph
+canvas** (ref 21) with a **click-to-open properties sidebar**, making Sagas a fundamentally different
+*kind* of screen. The `ns-smd` mini-diagram remains in the ledger as the reusable small inline
+variant; `ns-sgc` is the new canvas-scale primitive.
+
+### New components
+- **`ns-sgc`** · `.ns-sgc` (frame: canvas + docked properties sidebar; stacks < 1024px) · the
+  **saga-graph-canvas screen frame** — a dominant canvas column + a 21–23rem properties sidebar. ·
+  Sagas; the reusable canvas-forward screen shell for any node-graph route (Config topology at
+  screen scale, a Trigger composite builder, a Journey composition).
+- **`ns-sgc__canvas` / `__stagewrap` / `__grid` / `__edges`** · dotted-grid full-bleed **canvas
+  stage** (two radial-gradient dot layers, theme-blind) with an absolute SVG **edge layer** drawn
+  post-mount from `getBoundingClientRect()` (no SVG `{{ }}` holes). · Sagas; the canvas substrate for
+  any spatial graph.
+- **`ns-sgc__node[data-lane][data-state][data-current][data-selected]`** · `__node-head` / `__tile`
+  / `__name` / `__dot` / `__cap` / `__foot` / `__metric` · a **state-node card** (icon tile + name +
+  live state dot + capability + timing/attempt foot), state-tinted, with a copper **selected ring**,
+  a dashed **current ring**, a **pulsing** live dot (running/retrying), and a warning left-rail for
+  compensation-lane nodes. · Sagas; the reusable graph-node card.
+- **`ns-sgc__switcher` / `__inst[data-state]` / `__inst-dot[data-tone]` / `__inst-corr`** · a slim
+  horizontal **instance switcher strip** (status-dot chips, selected = copper ring) that replaces the
+  fat left instance column. · Sagas; reusable wherever "which instance/run am I viewing" needs a
+  compact top control instead of a rail.
+- **`ns-sgc__toolbar` / `__tool[data-variant]` / `__tool-zoom` / `__tool-sep`** · a floating **canvas
+  toolbar** (zoom −/%/+, ⤢ fit, ✦ assist) pinned bottom-center (ref 21 bottom bar). · Sagas; reusable
+  on any canvas.
+- **`ns-sgc__props` / `__props-head` / `__props-eyebrow` / `__props-title` / `__props-tile` /
+  `__props-name` / `__props-section[-label]` / `__props-clear` / `__props-payload`** · the
+  **properties sidebar** — instance summary by default (gauge + KV + why-assist + instance actions),
+  node detail when a node is picked (status badge + KV of timing/attempt/lane + transitions + payload
+  + node action). · Sagas; the reusable "click node → configure" inspector, folds to a bottom sheet
+  < 1024px.
+- **`ns-sgc__trans` / `__trans-row[data-lane]` / `__trans-dir`** · in/out/compensation **transition
+  rows** (directional glyph `←`/`→`/`⇢`, warning-toned for the compensation edge). · Sagas; reusable
+  node-transition list.
+- **`ns-sgc__lane-tag[data-lane]`** · floating **lane rails** ("forward path" / "⟲ compensation ·
+  rollback lane") pinned to the canvas edge (JS-positioned above the rollback row); hidden on mobile.
+  · Sagas; reusable lane annotation for any multi-lane canvas.
+- **`ns-sgc__edge[data-lane][data-state]` / `__edge-arrow` / `__edge-label[-bg]`** · JS-measured
+  bezier **connectors** — forward (solid, arrow →), a **cross-edge** (dashed warning, arrow ↓, drops
+  the failed forward state into the rollback lane), a **reverse rollback lane** (dashed warning), each
+  with a floating branch **label + backing chip**; edges touching the selected node recolor copper. ·
+  Sagas; the reusable measured-connector layer (companion to `ns-stackmap`'s `measureEdges`).
+
+### Refinements to existing components
+- **generic right sheet** → now also serves the **Sagas node bottom sheet** on mobile (`sheet: 's8'`,
+  `sheetIsS8`): tapping a canvas node < 1024px opens the same properties content as a bottom sheet
+  (in addition to S2/S7/S13 reuse). One dialog, four screens.
+- **`ns-durabar`** → relocated into the Sagas page-header toolbar (durability tier as a header chip)
+  now that the left instance rail is gone; unchanged contract.
+- **`ns-sagahero` gauge / `ns-kv--split` / `ns-assist`** → recomposed **inside** the properties
+  sidebar (instance-summary mode) rather than as a standalone hero band, proving they compose in a
+  narrow inspector column, not just a wide hero.
+- **`measureEdges` pattern** → generalized into a second measured-geometry drawer
+  (`measureSagaEdges` / `scheduleSagaEdges`), wired to resize + route-enter + instance-switch +
+  node-select, and suppressed < 640px (single-column stack) exactly like the stackmap. Establishes
+  the measured-connector approach as a repeatable primitive, not a one-off.
+
+### New tokens
+- None. The dotted grid uses `radial-gradient(color-mix(in oklab, var(--ns-fg), transparent 88%) …)`;
+  node/edge tints reuse the existing success/warning/destructive/primary subtle + border families and
+  `color-mix`. Fully theme-blind, no raw hex.
+
+### New variants
+- `ns-sgc__node[data-lane='comp']` (warning-railed rollback node), `ns-sgc__edge[data-lane='comp']`
+  (dashed reverse) + `[data-lane='cross']` (dashed drop-in), `ns-sgc__inst[data-state='selected']`,
+  `ns-sgc__tool[data-variant='assist']`, properties sidebar `mode: 'summary' | 'node'`.
+
+### New options / data-attributes
+- `ns-sgc__node[data-col][data-row]` (grid placement → measured connector endpoints),
+  `[data-state]` (completed/running/retrying/failed/queued), `[data-current]`, `[data-selected]`,
+  `[data-lane]`; `ns-sgc__inst-dot[data-tone]`; `ns-sgc__edge[data-lane][data-state]` +
+  `ns-sgc__edge-arrow` / `ns-sgc__edge-label` mirrors; `ns-sgc__trans-row[data-lane]`;
+  `ns-sgc__lane-tag[data-lane]`. The saga node model gained `col`/`lane`/`timing`/`attempt`/`payload`/
+  `trans`/`action` fields (data-driven; no-compensation instances render only the forward lane).
+
+### Mobile optimizations
+- The canvas **stacks to a single readable column < 640px** (JS suppresses edge geometry, matching
+  the stackmap); comp nodes keep their warning left-rail so the rollback lane stays distinct without
+  the floating lane tags (which are hidden on mobile).
+- **Tapping a node opens a dedicated bottom sheet** (properties content) via the viewport-branched
+  generic sheet — the mobile equivalent of the desktop docked sidebar.
+- The instance switcher strip **scrolls horizontally** (body never scrolls); the properties sidebar
+  reflows to a full-width block under the canvas < 1024px.
+- Canvas toolbar stays pinned bottom-center at every width.
+
+## Pass V4b-fix — Sagas canvas density + bespoke surrounding sections
+
+Density pass answering the adversarial-vision gate (canvas was ~75–80% empty grid). Fills the void
+with tailored, data-driven, JS-measured content and elevates the surrounding sections from generic
+chrome into bespoke saga components. Visual + layout only; NS One tokens only (no raw hex); no SVG
+`{{ }}` holes. Canvas cell-coverage 29% → 47% (desktop 1440).
+
+### New components
+- `ns-sgc__minimap` / `ns-sgc__mm-*` — a **definition mini-map**: ~204×112 topology thumbnail docked
+  bottom-right, drawn post-mount by `drawSagaMinimap` from `machine.def`, with the current instance
+  path overlaid in teal (forward) / amber (rollback) and the selected node ringed copper. Reusable
+  bird's-eye navigator for any node-graph route.
+- `ns-sgc__lanestat` / `ns-sgc__lanestat-cell` — a **per-lane compensation-health stat strip** (ref-11
+  stat bar adapted to saga lanes): slim single-line `label:value` pill beside each lane tag, per
+  instance; the comp strip is JS-pinned above the rollback row and absent on no-rollback instances.
+- `ns-sgc__rail` / `ns-sgc__rail-pip` — a **step-execution rail**: left-edge pips (pending → … →
+  terminal), state-tinted, current step enlarged with a copper halo. Reusable playhead/scrub rail.
+- `ns-sgc__anno` (`annoCard`) — a **rich on-wire edge annotation card**: error badge + branch label +
+  payload snippet on the failing→compensating cross-wire (ref-21 labeled connectors).
+- `ns-sgc__legend` — a **canvas node-identity legend** (forward/compensation/terminal/ghost), balances
+  the mini-map bottom-left.
+- `ns-sghealth` / `ns-sghealth__*` — a **saga-health composite band** (replaces four plain number
+  cards): compensation-rate radial meter (conic `--v`), in-flight vs terminal split, instances-by-state
+  stacked channel bar + legend, forward↔rollback edge ratio.
+- `ns-sgtable` / `ns-sgtable__*` — a **dense sortable columnar step table** (ref-11): sortable headers
+  with caret, inline error badge, comp rows `↩`-marked + tinted. Replaces the airy step timeline.
+- `ns-sgc__tabs` / `ns-sgc__tab` / `ns-sgc__tabpanel` — a **tabbed node inspector** (State /
+  Transitions / Evidence / Actions; ref-11 drawer tabs, active = copper text + 2px underline). Drives
+  the desktop sidebar and the mobile bottom sheet.
+- `ns-sgstream` / `ns-sgstream__*` — a **typed transition stream** grouped by instance: rows are typed
+  transitions (advance `→` / compensate `↩` / terminal `◼` / fault `✕`), glyph-blocked + tone-coded +
+  timestamped, with a legend key. Replaces the generic activity-feed Transitions panel.
+
+### Refinements to existing components
+- `measureSagaEdges` gained an `annoCard` helper and a `drawSagaMinimap` call (drawn at any width, so
+  the mini-map folds into the mobile stack while edge geometry is suppressed).
+- `ns-sgc__node` gained a `[data-role]` chromatic-identity accent (teal/copper/neutral top strip) and a
+  `[data-ghost]` ~30%-opacity wireframe treatment for queued scope states — layered over the existing
+  state tints (the live dot still reads state).
+- `ns-sgc__canvas` firm `min-height` + larger bottom padding reserve a clean bottom band so the
+  mini-map never collides with a row-2 rollback node on short instances; grid `row-gap` widened so the
+  comp lane tag + health strip band fits between forward and rollback rows.
+
+### New tokens
+- None. All new tints are `color-mix` over existing `--ns-teal-*` / `--ns-copper-*` / `--ns-amber-*` /
+  success/warning/destructive/primary families. Theme-blind, no raw hex.
+
+### New variants / data-attributes
+- `ns-sgc__node[data-role='fwd'|'comp'|'terminal']`, `[data-ghost='1']`;
+  `ns-sgc__lanestat[data-lane]`, `ns-sgc__lanestat-val[data-tone]`;
+  `ns-sgc__rail-pip[data-rail][data-tone][data-now]`;
+  `ns-sgc__mm-node--{fwd,comp,active,sel}` / `ns-sgc__mm-edge--{comp,active}`;
+  `ns-sgc__tab[data-active]`; `ns-sgtable__th[data-active][data-dir]`, `ns-sgtable__row[data-comp]`;
+  `ns-sgstream__gl[data-type='advance'|'compensate'|'terminal'|'fault']`;
+  `ns-sghealth__seg[data-tone]` / `ns-sghealth__meter` (`--v` conic). Saga machine model gained
+  `def` (mini-map topology + current `path`), `laneHealth`, `rail`, `crossAnno` per instance;
+  view-model gained `s8Health`, `s8StepTable` (sortable via `s8SortKey`/`s8SortDir`), `s8FeedGroups`,
+  `s8Tabs`/`s8TabIs`/`s8Evidence`, `s8Rail`, `s8FwdHealth`/`s8CompHealth`.
+
+### Mobile optimizations
+- Mini-map folds to a static full-width block; lane-health strips + saga-health band stack; step rail
+  and canvas legend hide on the single-column stack. Step table scrolls inside `overflow-x:auto` (body
+  never scrolls). Node tap → the tabbed bottom sheet. All verified 0 holes / 0 overflow / 0 errors at
+  390 in both themes.
+
+## Pass V5 — Triggers (S9)
+
+Triggers redesigned as a bespoke **rules-and-firings console** (when→do rules). Distinct from the
+Sagas node-canvas and the Workers registry table; shares only the console chrome (breadcrumb /
+statstrip / contable shell / sheet-dialog) for family consistency.
+
+### New components
+- `ns-tcat` — tinted **category-health band** (schedule=copper · webhook=teal · event=amber ·
+  manual=muted). Composite card: glyph tile + count + blurb + 12-bucket aggregate firing **sparkbar**
+  (CSS `height:%`) + foot with armed/silenced state pill + 24h fires. Click toggles a category
+  filter. Replaces plain number cards as the header treatment. (tinted category cards — ref 19/08.)
+- `ns-tbuild` — **rule builder**: `WHEN` node → dashed `ns-tbuild__wire` connector with an
+  `if <condition>` chip + ▶ arrow → `DO` node, plus `ns-tbuild__palette` action-type tiles with the
+  wired action highlighted. Horizontal rule sentence (deliberately unlike Sagas' vertical canvas).
+  (node-graph + component palette — ref 21-flow-builder.)
+- `ns-tdaystrip` — **schedule day-strip**: 7 day tiles, discrete cron/schedule pips + a continuous
+  **poll band** (`repeating-linear-gradient`) for interval triggers, today tinted. `ns-tnext`
+  next-fire countdown cards (imminent = copper accent). (day-strip + timed cards — ref 19-pm-dashboard.)
+- `ns-thist` — **firing-history table**: reuses `ns-contable`; sortable headers (JS sort, asc/desc
+  arrow via `data-dir`), `ns-tcatbadge` type badges, `ns-trend` 24h sparklines, outcome pill,
+  latency mono cell, inline arm switch, strike-through disabled rows. `ns-catfilter` filter pill.
+  (sortable dense table — ref 11/13-devconsole.)
+- `ns-tdrawer` + `sheet:'s9'` — **per-trigger detail drawer → mobile bottom sheet** on the shared
+  `ns-sheet-dialog`: category badge + outcome pill + `when → do` rule summary + KV facts + inner
+  tabs (Action chain / Payload / Schedule) + Open-run / Silence actions. (right drawer w/ docs tabs
+  — ref 11-devconsole.)
+- `ns-tdlq` (dead-letter fill-meters) + `ns-tingress` (verb+path chip over payload editor) — the
+  secondary strip.
+
+### New tokens
+- None. Category tints are a `[data-cat='…']` variable block (`--tcat` / `--tcat-subtle` /
+  `--tcat-border`) mapped via `color-mix` onto existing `--ns-primary` / `--ns-success` /
+  `--ns-warning` / `--ns-muted-fg`. Theme-blind, no raw hex.
+
+### New variants / data-attributes
+- `ns-tcat__card[data-cat][data-state='selected'][data-tone]`, `ns-tcat__state[data-tone]`;
+  `ns-tcatbadge[data-cat]`; `ns-tbuild__node[data-role='when'|'do'][data-cat][data-tone]`,
+  `ns-tbuild__chip[data-tone][data-state='active']`, `ns-tbuild__armpill[data-on]`;
+  `ns-tdaystrip__day[data-today]`, `ns-tdaystrip__pip[data-tone]`, `ns-tdaystrip__poll`;
+  `ns-tnext__card[data-tone]`; `ns-thist__th[data-active='sorted'][data-dir]`,
+  `ns-thist__row[data-off]`; `ns-catfilter[data-active]`; `ns-tdlq__row[data-tone]`.
+- S9 model gained a `CAT`/`CAT_META` taxonomy + `trigFleet` (src/when/cond/does/last/next/lat/
+  fired24/fires per trigger); view-model gained `s9Cats`, `s9StatTiles`, `s9Builder`, `s9Palette`,
+  `s9Days`, `s9NextFires`, `s9SortCols`, `s9Hist` (sortable via `s9Sort`/`s9SortDir`), `s9Detail`
+  (tabbed via `s9SheetTab`), `s9Cat` filter, `s9Sel` selection. `sheetIsS9` branch added.
+
+### Mobile optimizations
+- Category band folds 4→2×2 (<900) then keeps 2-col (<560) with shorter sparkbars; rule-builder flow
+  rotates to vertical (<720) with a vertical dashed wire + rotated arrow; day-strip stays 7-col with
+  tightened gutters + micro fonts (<560); firing table scrolls inside `overflow-x:auto` (body never
+  scrolls); row tap → tabbed bottom sheet. Verified 0 holes / 0 overflow / 0 errors at 390, both
+  themes.
+
+## Pass V5-fix — Triggers
+
+Adversarial-gate fix pass (gate 55/100 ACCEPT-WITH-FIXES). Kept the bespoke bones (category band,
+WHEN→DO builder, 7-day day-strip, firing-history sparkline table, tabbed drawer); rebuilt the five
+sections that still read as generic dashboard chrome. Visual/layout only, NS One identity, no raw
+hex, no SVG `{{ }}` holes. All CSS appended under the Pass V5 block in `ns-ext.css`.
+
+### New components / refinements
+- `ns-tmetric` — **iconified metric strip** replacing the five plain `ns-statstrip` number boxes.
+  Each tile = type-glyph chip + value + a meaningful micro-viz: `ns-tmetric__spark` (12-bar
+  sparkline, e.g. fires/flame), `ns-tmetric__meter` (armed/total ratio bar), `ns-tmetric__trend`
+  (`↑ +6%` / `↑ +3`, CSS-glyph via `data-dir`), and a quiet `ns-tmetric__sub` label. Neutral-value
+  tiles can still carry an accent glyph+spark via `data-spark-tone` (fires stays copper without
+  recoloring the number). (ref 19 summary-stats bar.)
+- `ns-thquery` — **firing-history inline query toolbar** above the table: `ns-thquery__search`
+  (WIRED quick-search, filters rendered rows by trigger/action name, with a clear ×),
+  `ns-thquery__select` × 2 (outcome family + show-limit), a dashed `ns-thquery__addfilter`
+  ("+ Add JS filter") affordance, and a right-aligned `ns-thquery__count`. (ref 11 records-table
+  toolbar.)
+- `ns-tdlt` — **dead-letter mini-table** replacing the two `ns-tdlq` progress bars: per-row
+  type-colored left bar (`data-tone`), id + queue tag (`ns-tdlt__q`) + age, error snippet, source
+  trigger + retry-count, and inline `ns-tdlt__act` Retry/Inspect buttons. `ns-tdlqsum` header pill
+  keeps the one-line `redis 14 · memory 3` depth summary; `ns-tdlt__foot` keeps the top-offender
+  line + Open-DLQ button. (ref 11 record log.)
+- `ns-tcat__idle` + `ns-tcat__spark[data-hollow]` — **hollow-category empty-state**: a 0-fires card
+  (Manual) flattens its bars to a dashed baseline and overlays "NO FIRES · 24H"; the foot line reads
+  `silenced · CLI-only` / `armed · awaiting invoke` (data-driven `emptyLabel`) so no card is a void.
+  Card header padding + gap tightened for density.
+- `ns-tnext` schedule cards — **temporal treatment**: `ns-tnext__head` (id + `ns-tnext__kind` pill:
+  CRON/INTERVAL/SCHEDULE), a `ns-tnext__prog` **progress-to-next-fire bar** (elapsed vs interval),
+  cadence label in the meta line, and a type-colored left bar. (ref 19 schedule blocks.)
+
+### New tokens
+- None. New surfaces reuse `--ns-primary` / `--ns-success` / `--ns-warning` / `--ns-destructive` /
+  `--ns-muted-fg` and the existing `--tcat` category-tint block via `color-mix`. Theme-blind, no hex.
+
+### New variants / data-attributes
+- `ns-tmetric__tile[data-tone][data-spark-tone]`, `ns-tmetric__trend[data-dir]`,
+  `ns-tmetric__meter-fill[data-tone]`, `ns-tmetric__bar`; `ns-tcat__spark[data-hollow]`,
+  `ns-tcat__card[data-hollow]`; `ns-tnext__kind[data-tone]`, `ns-tnext__prog-fill[data-tone]`;
+  `ns-tdlt__row[data-tone]`, `ns-tdlt__q[data-q]`, `ns-tdlqsum[data-tone]`; `ns-thquery__*`.
+- S9 model gained `s9DeadLetters` (5 failed firings), `s9Query`/`s9Outcome`/`s9Limit` state +
+  wired filtering (`s9HistShown`, `s9HistCount`), plus `hollow`/`emptyLabel` on `s9Cats`,
+  `progressPct`/`span`/`kindLabel` on `s9NextFires`, and `glyph`/`spark`/`meter`/`trend`/`sub` on
+  `s9StatTiles`.
+
+### Mobile optimizations
+- `ns-tmetric` folds 5→3 (<940) →2 (<560) with smaller glyph + value; `ns-thquery` wraps (search
+  full-width, count drops its `margin-left:auto`); `ns-tdlt` rows keep their 3-col grid with
+  tightened gutters. Verified 0 holes / 0 overflow / 0 errors at 390, both themes; 16-route
+  regression clean.
+
+## Pass V6 — Streams
+
+Streams was rebuilt from a fan-out delivery inspector into a **durable-stream / topic console**
+(Kafka/Conduktor mental model, refs 11/12/13) with a live-throughput identity (ref 04) and a
+lag-heat treatment (ref 10). Every section is bespoke and stream-native; it shares no signature
+component with Sagas (canvas), Workers (registry), or Triggers (`ns-tmetric`/`ns-tdlt`). Only
+`prototype.dc.html` + `assets/ns-ext.css` changed; `support.js`/`_ds`/`_ns_styles` untouched.
+
+### New components
+- `ns-strhealth` — **streams-health composite header strip** (4 tiles, each with a micro-viz):
+  throughput + `ns-trend` sparkline, consumer-lag + backpressure dot, partition **pips**
+  (per-partition in-sync colour), retention + replication. Replaces plain number cards. (ref 11/13
+  stat strip.)
+- `ns-strhero` — **live throughput hero**: a JS-measured teal area chart (`drawStreamsHero()`,
+  post-mount, no SVG holes) with a **hover crosshair + floating value tip** (`x msgs/s · −Ns`) that
+  snaps to the nearest sample on `pointermove`, a peak/avg/floor/window **OHLC footer**, and a
+  pulsing **backpressure pill**. (ref 04 stock-tracker line + crosshair + OHLC.)
+- `ns-strtopo` — **producer → log → consumer topology** in div/CSS: producer nodes (copper edge) →
+  dashed lead → partitioned-`log` node (with lag-tinted partition bars) → a **fan bus** that taps
+  each consumer group node (teal/amber/red edge by lag). No canvas. (ref 21 flow feel.)
+- `ns-strledger` — **partition & offset ledger**: Part(idx+in-sync ◆)/Leader/Head/Committed/**inline
+  lag heat-bar + value**/Group, monospace; row `data-tone` from lag; horizontal scroll on mobile.
+  (ref 11/12 record table re-cast to partition rows.)
+- `ns-strheat` — **partition × time lag heatmap**: 6 rows × 8 window cells, `data-v` 0–4 tint from
+  `--ns-warning`→`--ns-destructive` via `color-mix`, plus a lag legend. On Consume + Partitions
+  tabs. (ref 10 retention heat-triangle.)
+- `ns-strgroup` — **consumer-group lag cards**: a shared `ns-gauge` **radial lag gauge** + status
+  badge + members/partitions/guarantee KV + a lag progress bar; red left edge when lagging.
+- `ns-strtail` — **live event tail**: offset·part·key·value·age, monospace, dense, tone-marked, with
+  a live-pulse header. (Consume-tab record stream.)
+- `ns-strdrawer` — **stream detail drawer** (desktop right rail): message picker + fan-out delivery
+  `ns-step-timeline` + Open-run / View-trace actions.
+- `ns-strschema` — **line-numbered Avro record schema** on the Config tab (ref 13 schema view).
+- `ns-strlive` — reusable live-pulse pill (teal dot, `ns-strpulse` keyframe, respects
+  `prefers-reduced-motion`).
+
+### New tokens
+- None. All surfaces reuse `--ns-primary` / `--ns-teal-5` / `--ns-copper-6` / `--ns-warning` /
+  `--ns-destructive` / `--ns-muted` / subtle variants via `color-mix`. Theme-blind, no hex.
+
+### New variants / data-attributes
+- `ns-strhealth__tile[data-tone]`, `ns-strhealth__pip[data-tone]`, `ns-strhealth__bp[data-tone]`;
+  `ns-strhero__chart[data-crosshair][data-marker]` (drives `drawStreamsHero`), hero svg parts
+  `[data-part='hero-cross'|'hero-dot']`; `ns-strtopo__node[data-role][data-tone]`,
+  `ns-strtopo__spine--fan`; `ns-strledger__row[data-tone]`, `ns-strledger__lagbar[data-tone]`;
+  `ns-strheat__cell[data-v='0..4']`; `ns-strgroup[data-tone]`, `ns-strgroup__lagbar-fill[data-tone]`;
+  `ns-strtail__row[data-tone]`.
+- S10 model gained topic facts (partitions/inSync/replication/retention/backend), a 24-pt throughput
+  series (+ peak/avg/floor/marker/spark), `s10Groups` (lag/status/gauge %), `s10Parts` (head/
+  committed/lag/tone), `s10Heat` (6×8), `s10Records`, `s10Producers`/`s10Consumers`, `s10Schema`,
+  and a `s10Tab` (`consume`/`partitions`/`consumers`/`config`) deep-linked via `?tab=`. The prior
+  message/fan-out/feed data is preserved and now feeds the drawer.
+
+### Mobile optimizations
+- `ns-strhealth` folds 4→2 (<720); `ns-contab` wraps; `ns-strhero` + `ns-strtopo` collapse to one
+  column (<1024 / <720, topology spine rotates); `ns-strledger` scrolls horizontally inside its
+  panel so the body never scrolls sideways; heatmap cells shrink; gauges + tail + drawer stack.
+  Verified 0 holes / 0 overflow / 0 non-404 errors at 1440 + 390, both themes; 16-route desktop +
+  7-route mobile regression clean.
+
+### Known follow-ups
+- Topology is a div/CSS flow, not a measured-connector horizontal graph (log node + consumer bus not
+  perfectly colinear at desktop width).
+- Throughput/heatmap/records are a data-driven snapshot, not wired to the live `tick()` sim yet.
+- Consumers tab left column slightly shorter than the right rail (mild whitespace).
+
+## Pass V7 — Config Resolution
+
+Replaced the S2 topology stackmap (`ns-stackmap` node-canvas + tree-nav — a wiring view, not a config
+view) with a bespoke **layered-precedence resolution** screen centered on a **precedence waterfall**
+metaphor no other screen has. Deliberately distinct from all four capability consoles (no
+`ns-contable` / `ns-sgc` / `ns-tbuild` / `ns-strhero`/`ns-strtopo` reuse).
+
+### New components (all `--ns-*` tokens, `ns-*` classes, hard `3px 3px 0` press shadow, DM Sans/Mono)
+- **`ns-cfghero`** — header composite: title + inline **stat slab** (one pressed slab split into 4
+  divider cells: keys resolved / overrides active / values shadowed / profile) + an ordered
+  **precedence legend** of numbered layer chips (ref 19 stat-bar; ref 13 stat strip).
+- **`ns-cfglayerchip`** (+ `--sm`) — the atomic tone-driven "which layer" token (ordinal badge +
+  glyph + label), reused across header / ledger / diff / trail for consistent layer identity.
+- **`ns-cfgtable` / `ns-cfgrow` / `ns-cfgnschip`** — effective-config **ledger** (ref 11 KV table):
+  key + ns eyebrow · effective value · winning-layer chip · override ◆ · shadow count; namespace
+  filter chips; selected row gets copper left-accent + tint; header cols align at ≥480px, stack
+  below.
+- **`ns-cfgwater`** (+ `--sheet`) — **HERO precedence waterfall**: numbered rail + dashed spine,
+  per-layer card w/ `from source·line` provenance, **winner elevated w/ hard press shadow + "wins"
+  pill**, **shadowed values struck through** (destructive-red) + dimmed card, **silent layers**
+  dashed "— not set", and **connector labels** ("shadowed by"/"inherits"/"passes through") floating
+  between layers (ref 21).
+- **`ns-cfgdiff`** — ref-13 **override diff**: per-side layer chips (`shadowed → override`), per-pane
+  `source·line` label, **line-numbered red/green** (`−`/red base line vs `+`/green effective line);
+  renders **only** when the winner is a runtime override that shadows a base value.
+- **`ns-cfgtrail`** — **resolution trail / provenance**: every contributing layer as
+  `glyph · layer · value · source·line`, shadowed struck, winning row tinted + "winning" pill, footer
+  actions.
+- **Mobile bottom sheet** — tap a key < 1080px opens the shared `#ns-sheet-dialog` (right drawer
+  641–1079, **bottom sheet ≤640**) carrying the compact waterfall + actions.
+
+### Tokens / variants
+- One `[data-tone]` → `--cfg/--cfg-fg/--cfg-subtle/--cfg-border` custom-prop set colours every layer
+  (framework=muted, package=copper/primary, profile=teal/success, override=amber/warning);
+  theme-blind, recolours from one place.
+- Winning-layer highlight uses the canonical NS press shadow keyed to the layer tone:
+  `3px 3px 0 color-mix(in srgb, var(--cfg) 55%, var(--ns-gray-12))`.
+
+### Data model
+- New `s2ConfigDefs()` (9 keys across flags/jobs/tasks/workers/streams/telemetry/triggers/database/
+  sagas) + `s2LayerDefs()` (4 ordered layers). Each key declares its per-layer contribution (or
+  `null` = silent); a `resolve()` helper computes winner + shadow flags — resolution is **computed,
+  not hand-set**, so every edge state (no override, multi-shadow, silent, echo) is truthful.
+- Repurposed `s2Sel` from a node id to a config **key**; `/config/nodes/:nodeId` now deep-links a key.
+  Old `s2NodeDefs`/`s2EdgeDefs`/`scheduleEdgeMeasure` neutralized (edge-measure is now a guarded
+  no-op — no spinning interval, no SVG geometry).
+
+### Mobile optimizations
+- Header stat slab folds 4→1 (<720); ledger row goes 3-col→2-row (<480); resolution key-head stacks
+  (<640); diff panes stack 2→1 (<620); trail src truncates to its own row (<640); waterfall stays
+  single-column. Body never scrolls sideways. **Mobile h-overflow fixed 20px → 0** vs. old stackmap.
+- Verified 0 holes / 0 overflow / 0 non-404 console errors at 1440 + 390, both themes; 16-route
+  regression clean; `ns-cfgwater` confirmed loaded from `ns-ext.css`.
+
+### Known follow-ups
+- Waterfall connector-label logic is heuristic (correct for all 9 seeded keys; worth a truth-table
+  pass if unusual silent/present patterns are added).
+- Override diff is single-line/value-level (right for scalars); nested-object override would want a
+  multi-line diff — deferred until such data exists.
+- Some desktop whitespace below the left ledger when the right stack is taller (key with a diff);
+  a compact "layer coverage" mini-viz could fill it later.
+- Tablet 641–1079 uses the right-drawer sheet, not a 2-col inline; intentional, revisitable.
+
+## Pass V7-fix — Config Resolution
+
+Adversarial vision gate (`_evals/V7-config-adversarial-vision.md`) scored the screen **68/100**:
+metaphor is bespoke, but a few sections carried real dead space / generic chrome. Four surgical
+visual/layout fixes — no route/logic/data/copy-meaning change; the waterfall metaphor, namespace
+filter chips, per-key data adaptation, winning-layer chips, and trail structure are left intact.
+Report: `render/_visual-reports/V7-config-fix.md`. Shots:
+`render/_visual-reports/V7-config-shots/after-config-*`.
+
+### 1 (TOP) Collapse non-contributing waterfall layers
+Silent (`— not set`) layers were full-height padded rows eating ~30% of the waterfall in
+partial-resolution states. `cfgWater` now flags `collapsed`/`pipNote`; silent layers render a slim
+one-line `.ns-cfgwater__pip` with a hollow dashed rail tick, so contributing layers snap together.
+**Measured (package-wins key, desktop 1440):** silent row 47px→24px (−49%), silent dead-space
+94px→48px (−49%), waterfall 320px→268px (−16%). Pip ≈33% of a contributing card. Applied to both
+the desktop panel and the mobile sheet waterfall.
+
+### 2 KPI header micro-viz
+Four bare number boxes → denser cells (padding + value size down) each with a supporting micro-viz:
+namespace-spread ticks (keys resolved), one pip per active override (overrides active),
+shadowed/total meter + "N of M contributions outranked" sub (values shadowed), precedence-position
+diamonds (profile). Legend row unchanged.
+
+### 3 Override diff → framed side-by-side hunk
+`cfgDiff` now emits a `@@ <key> @@` hunk + 3 lines/pane (context / changed / context), contextual
+line numbers, `− SHADOWED`/`+ EFFECTIVE` colored pane tags with source paths. Reuses the existing
+pink/green `del`/`add` gutter. Still gated to override-wins keys only (`cfgHasDiff` unchanged).
+
+### 4 Effective-config table density + type color
+`cfgValType()` classifier drives DM Mono type colors (number→amber, string/enum→teal,
+boolean→copper; dark-mode step-up), reused for waterfall + trail values. Row padding + value size
+trimmed. Filter chips + winning-layer chips untouched.
+
+### Verification
+0 `{{ }}` holes / 0 real console errors / 0 h-overflow across all 8 Config variants + 2 mobile
+sheets; full 16-route regression clean at 1440 + 390. A single pre-existing benign background 404
+is unrelated to this markup (absent on clean load). CSS appended to `ns-ext.css`;
+`.ns-cfgwater__silent` retired.
+
+### Deliberately deferred
+Gate items 5/8 (node-graph rail; inline `<textarea>` quick-override editor + docs accordion) NOT
+done — the brief forbids converting the waterfall to a node-graph, and an editable override would
+change behavior beyond a visual pass.
+
+## Pass V8 — Migrations
+
+Redesigned S11 (`DB migrations & drift`) from a plain 3-col table + a co-star introspect-diff into a
+bespoke migration control plane. Signature = the **version-chain timeline**; the diff is demoted to a
+secondary drawer tab (Config Resolution owns diff-as-hero).
+
+### New components (all `--ns-*` tokens, `ns-*` classes, appended to `ns-ext.css`)
+- **`ns-migver`** — reusable version glyph (`v1`…`v4`), phase-tinted (applied=teal, pending=dashed
+  copper, failed=destructive), `--lg`/`--sm` sizes; dark-mode fg/border step-up for contrast.
+- **`ns-mighead`** — header composite: HEAD `v3 → v4` glyphs + `behind` pill + a 4-tile stat strip
+  (applied / pending / drift / last-applied) with an accent left-rail tinted by drift tone. Replaces
+  four plain number cards (ref-13 stat strip).
+- **`ns-migchain` / `ns-mignode`** — the **version-chain timeline** (SIGNATURE): applied spine of
+  timed-event cards on a rail (filled teal status dots) → **`ns-mighead-marker`** ringed-diamond
+  live-DB HEAD/drift divider → **`ns-migchain__queue`** dashed copper pending nodes. Node card =
+  version glyph + title + mono name + timestamp·duration + status badge, selectable (ref-19).
+- **`ns-arcgauge`** — pure-CSS conic half-ring drift gauge (teal synced + amber drifted slice,
+  masked to a ring), centered value ("N drifted" / "in sync") + object-count caption (ref-04). No
+  SVG, no `{{ }}` holes.
+- **`ns-driftrow`** — drifted-object row: kind tag (column/table) + mono object + strike-through
+  `has → wants` delta + italic note.
+- **`ns-migledger`** — dense ledger table (ver / migration / applied-at / duration / rows / status);
+  row hover + selected inset-rail; row-click opens the detail drawer (ref-11).
+- **`ns-migapply`** — pending-apply card: glyph + "1 migration pending" + "what will change" (+/~ op
+  chips) + apply/details actions + dark CLI strip.
+- **`ns-migdetail`** rail + **`sheetIsS11`** drawer/bottom-sheet — Summary / DDL-diff **segmented
+  tabs** (`ns-seg` reused), stat tiles, tables-touched chips. Desktop right-drawer, mobile bottom
+  sheet via the shared `ns-sheet-dialog` (no new dialog).
+
+### Data model (visual metadata only — copy meaning unchanged)
+`s11Rows` enriched with `ver / title / dur / rows / tables / summary / ddl`; added `s11Drift`
+(drifted objects) and `s11Sel` (selection). All derived state (timeline nodes, ledger, gauge
+fractions, header metrics, detail, drawer tab) computed in the S11 view-model builder.
+
+### Verification
+0 `{{ }}` holes / 0 real console errors / 0 h-overflow across desktop 1440 + mobile 390, both themes,
+plus selected / drawer / DDL-tab / mobile-sheet / **in-sync** interaction states. Full 16-route
+regression clean. Pre-existing benign `/favicon.ico` 404 unrelated (present in `00-BEFORE`). No edits
+to `support.js`, `_ns_styles.css`, `_ds/*`, or other screens' markup.
+
+### Deliberately deferred
+No ledger-header sort wiring (visual hint only); no horizontal branch/fork viz (migration data is
+linear — a fork would be speculative); gauge denominator is a derived constant pending a real
+schema-object census; pending rows-affected is a labelled estimate.
+
+## Pass V8-fix — Migrations
+
+Scoped density tighten after the adversarial vision gate (62/100) flagged the one valid hit: the
+hero version-chain nodes were under-filled and the header tiles were plain number boxes. VISUAL +
+LAYOUT only; no route/logic/data/copy-meaning changes; no other screen touched.
+
+### Refinements
+- **`ns-mignode`** — cut internal padding ~35% (`space-2/2.5`, gap `3px`, dot/offset trimmed) and
+  added an **inline mono chip row** (`ns-mignode__chip` × 3 + `ns-mignode__at`): `◫ N objs` (from
+  `tables.length`), `≡ <rows>`, `◷ <duration>`, with applied-at right-aligned. Chips tint copper on
+  pending, neutral on applied — nodes now earn their height with real data instead of whitespace.
+  Card height 87→81px; per-node metadata 2 fields → 4.
+- **`ns-migstat` micro-viz** — every header tile now carries a supporting mini-viz (all from existing
+  data): **`ns-migstat__bar`** applied/total ratio meter, **`ns-migstat__pips` / `ns-migpip`** n-of-8
+  drift pips (teal sync / amber drift) + one copper pip per pending, **`ns-migstat__rel`** relative
+  time (`7d ago` / `today`) beside the absolute timestamp. Head + tile padding trimmed; big number
+  `text-2xl → text-xl`.
+- **`ns-mighead-marker`** — reworked from a big dashed ghost box into a **slim one-line marker**
+  (mono uppercase label + inline note on a thin tinted strip with a 2px copper/teal left accent).
+  Height 52→23px (doctrine rule 4: no orphaned ghost rows).
+- **`ns-driftrow`** — padding halved; `has → wants` delta and status note now share one compact row
+  (note pulled inline-right via a 3rd grid column) instead of an airy 3-line block.
+- **`ns-migsheet__stats`** — Applied / Duration / Rows kept as a **3-across grid at 390px** (was
+  collapsing to a 1-col stack at ≤560px); padding tightened so the Summary/DDL tabs sit above the
+  fold on a standard phone.
+
+### Data model (visual metadata only)
+`nodeOf` now exposes `tablesLabel` / `rowsLabel` / `durLabel` / `atLabel`. `s11Head` gains
+`appliedRatioPct`, `appliedRatio`, `pendingPips`, `driftPips` (n-of-8), and `lastAppliedRel`
+(relative-time from the `runMigrate` "now" anchor — derived, not invented).
+
+### Verification
+0 `{{ }}` / 0 real console errors / 0 h-overflow across desktop 1440 + mobile 390, both themes, plus
+selected / detail-drawer / DDL-tab / mobile-sheet / **in-sync** states. In-sync applied-only state
+(`4 of 4`, full teal bar, 8 teal pips, teal HEAD marker) confirmed by applying the pending migration
+at runtime. Full 16-route regression clean (32 route-visits). No edits to `support.js`,
+`_ns_styles.css`, `_ds/*`, or other screens.
+
+### Declined (gold-plating / data-invention, per brief)
+Inline per-row DDL expanders in the ledger; tabbed docs accordion for the pending list; code-editor
+chrome (file tabs / line numbers) on the DDL diff (stays a secondary drawer tab); author avatars and
+a pre-flight-step pipeline (no such data).
+
+---
+
+## Pass V9 — Dead-Letter Queues (S12)
+
+Replaced the generic S12 screen (three plain "DEPTH / big-number" cards + a 2-row table with
+inline `<details>` payload expanders + dead space below) with a bespoke **operational triage
+console**. Only `render/prototype.dc.html` (S12 markup + JS model + a `sheetIsS12` inspector body)
+and `render/assets/ns-ext.css` (appended `ns-dlq*` block) were touched.
+
+### New components / tokens
+- **`ns-dlqstrip` / `ns-dlqstat`** — composite triage-strip tiles (accent-bar + glyph + value +
+  micro-viz + sub-label), replacing plain number cards. Includes **`ns-dlqsplit`** (by-queue split
+  micro-bar that sums to total parked), **`ns-dlqpips`** (retry-exhausted filled/empty pips), and a
+  reused **`ns-spark`** red arrival strip. Signatures tile is a click-to-clear button.
+- **`ns-dlqcluster` / `ns-dlqclusterlist`** — the screen's signature: **error-signature cluster
+  rows** (severity glyph + signature/message + ×count + source chips + `ns-spark` death sparkbar +
+  age range + per-cluster **Retry all / Purge**). Click filters the table (`data-sel='active'` ring).
+  This grouped-failure component is net-new to the kit.
+- **`ns-dlqtable` / `ns-dlqrow`** — dense triage grid: kind glyph, **`ns-dlqsig`** signature badge
+  (destructive/warning tones), inline retry pips (`ns-dlqpips` w/ `data-exh`), exhausted left-rail,
+  inline Inspect. Responsive collapse to per-message stacks < 720px.
+- **`ns-dlqbulk`** — sticky bulk-action bar (count + inline CLI hint + gated Purge/Reprocess).
+- **`ns-dlqfleet` / `ns-dlqqueue`** — queue-health cards: depth + **`ns-dlqmeter`** depth-vs-capacity
+  fill meter + trend sparkbar + oldest-age + severity pill (clear/low/elevated/critical);
+  click-to-filter non-empty queues. Horizontal fill meters chosen to stay distinct from the
+  Migrations arc gauge.
+- **`sheetIsS12` / `ns-dlqinsp`** — message inspector plugged into the shared `ns-sheet-dialog`
+  (auto right-drawer on desktop, bottom-sheet on mobile): signature+reason hero, KV panel, payload
+  JSON block, **retry-history step-timeline** (reuses `ns-step-timeline--data`), gated actions.
+- **`ns-dlqclear`** — all-clear empty state (success-toned press-shadow card).
+- Generic helpers added: **`ns-panel__head`** (horizontal panel head; DS `ns-panel__header` is a
+  vertical stack) + **`ns-panel__flex`** (spacer). Reusable across future screens.
+- Spark zero-buckets muted via `.ns-dlq .ns-spark__col[data-z='true']` (opacity 0.28).
+
+### Data model (visual metadata only, fully derived)
+`dlqCorpus` per scope (queue/trigger) carries `src/kind/sig/reason/q/ageMin/retry/max/corr/payload/
+hist`. Clusters derived by grouping on `sig`; queue-health derived from `queueDefs` (depth/cap/
+trend/oldest); triage strip derived (total, by-queue split, oldest, exhausted pips, arrival spark);
+`s12Detail` derived from the selected id. Sparkbar heights bucketed into the shared `--h1..--h20`
+classes (no `{{ }}` in geometry). New state: `s12Sel`, `s12Filter` (type sig/queue/src). Removed the
+old `s12Depths` plain-number-card binding.
+
+### Verification
+0 `{{ }}` / 0 real console errors / 0 h-overflow across desktop 1440 + mobile 390, both themes, plus
+cluster-filter+bulk-select, inspector drawer (light+dark), mobile bottom-sheet (light+dark), and the
+Trigger DLQ single-message scope. Full 16-route regression clean. No edits to `support.js`,
+`_ns_styles.css`, `_ds/*`, or other screens' markup.
+
+### Declined (gold-plating / data-invention, per brief)
+Real reprocess/purge execution (stays askConfirm→toast per satellite doctrine); in-place expandable
+cluster member lists (filter-the-table is the chosen affordance); a top-sources mini-list to fill the
+shorter right rail (candidate for a future pass); source avatars / SLA countdown timers (no such data).
+
+## Pass V10 — Catalog (Service & Contract Registry Explorer)
+
+Reframed the Catalog from a generic tree-nav + flat responsive table (a monitoring-console clone)
+into a bespoke **contract registry / explorer** — browse a grouped registry, drill into a contract's
+signature + schema + producer/consumer graph. Mined ref **13-devconsole-c** (schema registry
+breadcrumb + stat strip + line-numbered code + COMPATIBILITY), **11-devconsole-a** (registry →
+right detail drawer → mobile sheet), **07-chat-signin** (browse/detail rhythm + KV), with **03** and
+**19** as cross-pollination wildcards (channel-bar/ratio meters + grouped count rows).
+
+### New components (all `--ns-*` tokens, `ns-*` classes, warm-cream + dark, hard press shadow, DM Sans/Mono)
+- **`ns-cathead`** — header composite (NOT number cards): a glyph+value cell (`7 contracts`) +
+  **`ns-catchan`** kind-distribution channel-bar (click-to-filter, flex-bucket widths) +
+  **`ns-catratio`** describe()-coverage ratio meter (hatched thin backdrop, success fill, single-node
+  `71%`) + **`ns-catreach`** transport-reach tri-meter (REST/RPC/SDK reach bars).
+- **`ns-catbar`** — registry filter toolbar: search input + `ns-catchip` kind/method/coverage chips +
+  Reset. Drives live filtering (empty kind-groups hidden; no-results empty state).
+- **`ns-catreg`** — registry rail: **`ns-catreg__group`** (kind header + count + coverage micro-bar) →
+  **`ns-catreg__item`** compact selectable contract card (method chip + mono proc + `sigPreview`
+  input→output + **`ns-catdup`** duality tri-pip + coverage dot; method-tinted left border; selected =
+  press-shadow). Slim dashed **`ns-catreg__gated`** for the not-installed crons namespace.
+- **`ns-catdetail`** — contract detail: header (kind glyph + proc + provenance + **`ns-catver`**
+  version tag + compat chip) → method-strip (method/coverage badges + **`ns-catdup--lg`** labelled
+  duality with off-transports struck through) → **`ns-catsig`** line-numbered **type-colored** mono
+  signature → **`ns-catschema`** secondary line-numbered schema block (alternating row tint, scrolls)
+  → **`ns-catrel`** producer→consumer relationship strip (two columns + connector spine + kind hub).
+- **Type-color token set:** `.ns-catsig__tok[data-kind=kw|t|k|p|c]` (keyword=primary, type=copper,
+  field=teal, punctuation=muted, comment=amber-italic; dark-mode brightened copper/teal).
+- **Kind-tone / method-tone / transport-key** `data-*` → CSS custom-prop resolvers
+  (`[data-kind='sagas']{--catk:…}` etc.) so one card/hub/pip reads its accent from a data attribute.
+- **`sheetIsS4`** — mobile contract bottom-sheet reusing the shared `ns-sheet-dialog` (right drawer
+  desktop auto-hidden ≤720px → bottom sheet): hero + method-strip + signature + schema + relationships.
+- Geometry via shared **`--w0..--w20`** width-bucket classes (5% steps) for ratio/reach/coverage
+  fills — NO SVG `{{ }}` holes.
+
+### Data model (visual metadata only, fully derived)
+`s4Raw` extends the 7 existing contracts with `ver`/`compat`/`input`/`output`/`sig`(tokenized)/
+`schema`(tokenized)/`producers`/`consumers`. Derived: `s4Head` (total/kind-dist/coverage/reach),
+`s4Groups` (kind-grouped rows + per-group coverage%), `s4Detail` (selected), `s4KindChips`/
+`s4MethodChips`/`s4CovChips`, `s4Filtered`/`s4HasResults`/`s4NoResults`. New state
+`s4Sel`/`s4Kind`/`s4Method`/`s4Cov`/`s4Q`. `s4Tree`/`s4Summary` retained (now derived). No route/logic/
+copy-meaning change.
+
+### Verification
+0 `{{ }}` / 0 real console errors / 0 h-overflow across desktop 1440 + mobile 390 (both themes) plus
+contract-selected (complete + thin), coverage-filter narrowing, Routes tab, and mobile bottom-sheet
+(light+dark). Full 16-route regression clean. No edits to `support.js`, `_ns_styles.css`, `_ds/*`, or
+other screens' markup.
+
+### Declined (per satellite doctrine / no data-invention)
+Producer/consumer nodes stay non-interactive labels (no canonical target ids in the data); no v→v
+schema diff viewer (brief: schema is "secondary, not a giant diff" → single line-numbered block); the
+Routes secondary tab keeps the generic dense table (Contracts explorer carries the bespoke weight).
+
+## Pass V11 — Auth Sessions (session-security roster)
+
+**Design question →** *What components best showcase active authenticated sessions (who / what
+device / from where / issued→expires TTL / scopes / status) an operator inspects and can revoke?*
+**Answer: a session-security console** — identity-forward session cards + a live TTL/expiry
+visualization + a lifecycle view + revoke. The screen-owning idiom is **time-to-live** (nothing else
+in the app expresses a lifespan), which makes Auth visually distinct from the monitoring consoles,
+the Config waterfall, the Migrations arc, the DLQ clusters, and the Catalog rail.
+
+### New components / tokens
+- **`ns-authcard`** — identity-forward session card: initials **avatar** + **device-glyph badge**
+  (browser/cli/ci/mobile/service) + name + elevated flag + uid/email + tinted **`ns-authprov`**
+  provider chip + geo location + MFA state + status badge + **`ns-ttlbar`** live TTL bar + countdown
+  + scope-chip footer + revoke; left status rail (active=success / idle=warning / expiring=
+  destructive / revoked=muted, dimmed).
+- **`ns-ttlbar`** — per-card remaining-fill bar, tone by urgency, **hatched** when expiring (≤12%);
+  `--w0..--w20` width buckets. The signature per-row viz.
+- **`ns-authttl`** — detail **lifespan visualization**: hatched **elapsed** vs toned **remaining** +
+  a **now-marker** positioned at the elapsed boundary (left-bucket classes) + issued/TTL/expiry
+  labels + elapsed/remaining footnotes.
+- **`ns-authhead`** — security header composite: glyph+count hero + **`ns-authchan`** status
+  distribution channel bar (click-to-filter) + legend + **`ns-authratio`** elevated-scope meter +
+  MFA-coverage meter + **`ns-authhz`** expiry-horizon strip (live sessions ordered soonest→latest,
+  per-row track + countdown, click-selects). Zero plain number cards.
+- **`ns-authbar`** — roster toolbar: search + status filter chips (`ns-authbar__chip`) + sort
+  segmented (soonest expiry / by status).
+- **`ns-authdetail`** — sticky detail panel: identity header + TTL viz + **`ns-authkv`** (mono
+  alternating-tint KV) + scopes + **`ns-authtl`** tone-dotted lifecycle timeline + revoke;
+  revoked-note variant.
+- **`ns-scopechip`** — RBAC scope chips; elevated (admin/deploy/write) tinted copper vs muted read.
+- **`ns-auth__now`** live server-clock chip (pulsing dot) + gated **Revoke all N** (destructive).
+- **`ns-authstream`** — two-column `auth.*` event feed (reuses `ns-activity-feed`, copy preserved).
+- **`sheetIsS15`** — mobile bottom-sheet reusing the shared `ns-sheet-dialog` (right drawer desktop
+  ≤900px auto-hidden → bottom sheet ≤640px via `matchMedia`): identity + TTL + KV + scopes +
+  timeline + revoke.
+- Geometry via shared **`--w0..--w20`** width-bucket idiom (plus marker left-buckets) — NO SVG
+  `{{ }}` holes.
+
+### Data model (visual metadata only, fully derived)
+`s15Raw` enriches the session projection with derived `dev`/`agent`/`ip`/`loc`/`geo`/`issued`/
+`expires`/`ttlFrac`/`lifespan`/`scopes`/`elevated`/`mfa`/`corr`. Original 3 sessions preserved in
+meaning + enriched; 2 added (idle + service/expiring) so the roster is dense and covers every status.
+Derived: `s15Sessions`, `s15Head` (counts/dist/elevated%/MFA%/horizon), `s15Detail` (KV +
+lifecycle), `s15FilterChips`/`s15SortChips`, `s15Filtered`/`s15HasResults`/`s15NoResults`. New state
+`s15Sel`/`s15Filter`/`s15Sort`/`s15Q`. `authFeed` retained verbatim. Revoke + Revoke-all reuse shared
+`askConfirm` → `ns-confirm-dialog` with the correct `netscript auth sessions revoke` CLI. No
+route/logic/copy-meaning change.
+
+### Gotcha recorded
+**`sc-if` has no `negate`** — the engine's `walkIf` only evaluates `value` truthiness. Negated
+branches (empty-state, revoked-note) must be gated on **inverted bindings** (`s15NoResults`,
+`s15Detail.cannotRevoke`), not a `negate` attribute (which is silently ignored → both branches show).
+
+### Verification
+0 `{{ }}` / 0 real console errors (only favicon 404) / 0 h-overflow across desktop 1440 + mobile 390
+(both themes) plus session-selected (expiring @3% + active/elevated @50%, now-marker verified),
+revoke confirm (light+dark), mobile revoke-all confirm, mobile bottom-sheet (light+dark), Revoked
+filter, and empty/no-match state. Full 16-route regression clean. No edits to `support.js`,
+`proto.css`, `_ds/*`, or other screens' markup.
+
+### Declined (no data-invention)
+Auth event stream kept generic (copy-locked secondary strip); avatars are initials (no avatar URLs in
+the projection); TTL is a static snapshot at the app clock (no live tick loop); device/geo/scope are
+illustrative visual metadata; "Open in Aspire" is a placeholder (no canonical session resource to
+deep-link).
+
+## Pass V12 — Extensions
+
+**Design question → answer.** *What best showcases EXTENSIONS — installed add-ons, each with what
+it CONTRIBUTES (its surfaces), a version + source, enabled/disabled status, and config?* →
+A **contribution manifest**, not an app-store grid. An extension is a *provider* that mounts
+contributions into named host **surfaces** (UI panels/routes, ⌘K commands, AI tools). The
+screen-owning idiom is the **surface-typed contribution** (copper=panel / teal=command / amber=tool):
+a per-provider **contribution bar** + surface **pips**, a **surface-grouped manifest** with a
+**"plugs into" mount map**, and a **built-for-vs-host contract meter**. Three composable views on one
+header: Providers (roster + manifest), Surfaces (the cross-cut lanes), Available (install/quarantine).
+
+### New components (all `ns-ext*`, appended to `ns-ext.css`)
+- **`ns-exthead`** header composite — count-hero + surface **channel bar** (`ns-extchan`,
+  click-to-filter) + enabled **ratio meter** (`ns-extratio`) + tier chips + **compat alert**
+  (`ns-extcompat`). Replaces the old airy 3-col KV grid; no plain number cards.
+- **`ns-extbar`** surface-kind filter chips (all / Panels / Commands / AI-tools, tinted-active).
+- **`ns-extprov`** provider row — glyph(tier) + name + version + status dot + **`__contribbar`**
+  (signature stacked surface-colored bar) + surface **pips** + source; left status rail; the roster
+  unit. Compact, multi-metadata (density default #2).
+- **`ns-extmanifest`** manifest pane — identity head + alternating-tint **KV** (source/version/tier/
+  contract/contributes) + **`ns-extgroup`** contribution groups (by surface kind, tinted) + **`ns-extmounts`**
+  "plugs into" chips + gated toggle. Sticky desktop → **bottom sheet** (`sheetIsS16`) mobile.
+- **`ns-extlane` / `ns-extmount-card`** — Surfaces view: 3 tinted lanes (Panels/Commands/AI-tools),
+  each a dense list of contributions + provider-provenance chip + mount + perm.
+- **`ns-extavailcard` + `ns-extcompatbar`** — Available: install/quarantine cards with a
+  **contract-compatibility meter** (built-for fill teal-if-==host / amber-if-behind + host "now"
+  marker) + hold banner + adds-pips.
+
+### New tokens / variants
+- **Surface-kind colour system** on `.ns-extscreen`: `--ext-panel`(copper) / `--ext-command`(teal-5) /
+  `--ext-tool`(amber-5) each with `-subtle` / `-border`, selected by `[data-kind]`. Copper/teal/amber
+  only — no off-palette green/blue.
+- **Shared width-bucket helpers** `.ns-w0..ns-w20` setting `--wpct` (0–100%) + `--wnum` (flex-grow
+  0–20) — reusable geometry with **no SVG `{{ }}` holes** (fills use `--wpct`, flex segments `--wnum`).
+- Segmented-view relabel (visual): Panels→**Providers**, Actions→**Surfaces** (query param `extTab`
+  unchanged so routing/deep-links round-trip).
+
+### Mobile optimizations
+- Header composite: 4-col → 2-col ≤1180 → 1-col ≤720. Providers grid collapses to roster-only ≤1023;
+  manifest → shared bottom sheet on tap (`sheetIsS16`, `matchMedia(900px)`). Lanes + Available →
+  single column ≤720. No h-overflow at 390.
+
+### Reactivity / data-driven states
+Enabled/disabled fully derived from the existing `extDisabled` map: disabling a panel dims its
+provider row (gray rail + DISABLED), updates the header enabled-meter + hero sub-label, flips the
+manifest to "Enable extension", and toasts — verified end-to-end via the shared `askConfirm`.
+
+### Gotcha reused
+`sc-if` has no `negate` (from V11) — kept all branch logic on positive bindings; no empty-state
+branch needed here (roster is always non-empty; filtered-to-none falls back to first provider).
+
+### Verification
+0 `{{ }}` / 0 real console errors (only favicon/resource 404) / 0 h-overflow across Providers +
+Surfaces + Available × {desktop 1440, mobile 390} × {light, dark}, plus provider-selected, surface
+filter (Commands → roster narrows, count updates), tool-only provider, disable-confirm (light+dark),
+disabled state, and mobile bottom sheet (light+dark). **Full 16-route regression clean in both
+themes.** No edits to `support.js`, `proto.css`, `_ds/*`, or other screens' markup.
+
+### Declined (no data-invention)
+Version/source (`v2.4.0` / `netscript`) + contract-compat values are illustrative visual metadata
+consistent with each plugin's first-party tier (no real registry in the static prototype); no
+free-form config editor (prototype exposes none); the `/extensions/:extensionId` deep-link is
+preserved but the in-page manifest / bottom sheet is the primary drill; on a surface filter that
+hides the selected provider, the manifest falls back to the first visible one (keeps the pane
+populated).
+
+## Pass V12-fix — Extensions
+
+Density-only tighten after the adversarial vision gate (58/100). Idiom KEPT
+(provider roster + surface-grouped manifest + Surfaces lanes + Available); the gate's
+table-conversion / maintainer-avatar / version-timeline asks were DECLINED (echo the consoles or
+invent absent data). Overrides appended to `ns-ext.css` by cascade order, all `.ns-ext*`-scoped;
+markup + `extLanes` JS extended with values derived from existing counts (no new data).
+
+### New / refined components
+- **Slim contribution micro-bar** (`ns-extprov__contribbar`): 8px thick track → **4px** segmented
+  micro-rule with no track fill, sitting directly under the provider name. Copper/teal/amber surface
+  segmentation preserved via a faint per-segment inset. Frees ~4px + a row-gap per card.
+- **Compact provider card** (`ns-extprov`): padding `space-2-5`→`7px`, `__main` gap 8px→3px, glyph
+  `2.1rem`→`1.75rem`. **88px → 59px card height (−33%)** with every row still content-bearing.
+- **Dense CONTRIBUTES row** (`ns-extcontrib`): ~64px wrapping row → **44px** single-line row =
+  glyph + bold name + surface-tinted **path chip** (`__path`, ellipsised) + right perm. Group header
+  is now **sticky** (`position:sticky; top:0`), slim + uppercased.
+- **Surfaces lane header stat** (`ns-extlane__stat`): a 4px **share meter** (fill ∝ contribution
+  count, surface colour) + monospace **mount summary** (`capabilities/* · data/*` / `⌘K palette` /
+  `AI runtime`).
+- **Surfaces lane footer** (`ns-extlane__foot`): slim dashed `↳ N <surface> from M provider(s)`
+  summary — carries the count signal the removed description paragraph used to.
+- **Denser mount-card** (`ns-extmount-card__row`): path + perm collapsed to one `space-between` row.
+
+### New layout pattern — 2-column independent-height lanes (the Surfaces whitespace fix)
+The uneven-lane whitespace (6-item Panels lane vs two 2-item lanes leaving ~372px empty
+lower-right) is fixed by breaking the equal `auto-fit` row: **Panels spans the left column
+(`grid-row:1/span 2`, `1.35fr`); Commands (row 1) + AI-tools (row 2) stack in the right column
+(`1fr`)** — keyed to `data-kind` so it degrades if lane counts change. Right column
+(256+256+gap ≈ 525px) now matches Panels (520px); empty region **372px → ~5px**. Collapses to a
+single stacked column ≤720px.
+
+### Tighter stat composite
+`ns-exthead` cell padding `space-4/5`→`space-3/3-5`, hero glyph `2.75`→`2.25rem`, hero number
+`3xl`→`2xl`, channel bar `1.5rem`→`1.25rem`. Micro-viz (segmented surface bar, enabled meter, tier
+chips, compat alert) all preserved — denser, not flattened.
+
+### Verification
+Provider card 88→59px, micro-bar 8→4px, contrib row ~64→44px, Surfaces empty 372→~5px (measured via
+Playwright). 0 `{{ }}` / 0 real console errors (pre-existing favicon 404 only) / 0 h-overflow across
+Providers + Surfaces + Available × {1440, 390} × {light, dark} + provider-selected + mobile manifest
+sheet. **Full 16-route regression clean.** No edits to `support.js`, `_ns_styles.css`, `_ds/*`, or
+other screens' markup.
diff --git a/.llm/runs/beta10--orchestrator/visual/HOME-SPEC.md b/.llm/runs/beta10--orchestrator/visual/HOME-SPEC.md
new file mode 100644
index 000000000..cb788556e
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/HOME-SPEC.md
@@ -0,0 +1,69 @@
+# Home — exact per-widget spec (match the reference craft, widget by widget)
+
+The bar is the reference images in `references/` (esp. `03-analytics-cards`, `01-synergy-hr-desktop`).
+The rule from the owner: **each widget must be TAILORED** — a bespoke, multi-layer composition, not a
+generic tile. Dense content-sized masonry, no dead space. Every card follows the ref anatomy:
+**header (title + action) → hero (big value + delta pill) → a MID layer (table / segmented control /
+stacked bar / legend) → a chart or rich body.** In NS One identity (warm-cream/dark, press shadow,
+copper/teal/amber, `--ns-*` tokens, `ns-*` markup) — NOT the refs' palette.
+
+## Missing component types to BUILD (token-driven, no SVG `{{ }}` holes)
+- **Filled area chart** with a faint baseline grid + axis labels (ref: Conversion Rate). A comparison
+  under-area is a plus.
+- **Line chart** with a marker point + a floating value tooltip + optional crosshair (ref: Stock Tracker).
+- **Bar chart** with value labels on/above bars (ref: Product Performance).
+- **Data table** = per row: (icon) + label + metric value + colored trend arrow+% ; with column headers
+  (ref: Marketing Channels). Column-aligned.
+- **Stacked segmented bar** (rounded segments w/ gaps) + **dot legend** (ref: Marketing Channels).
+- **Radial gauge** with the value centered + a small breakdown row/tiles beneath (ref: Time Off).
+- **Delta pill** (rounded, tinted bg: success/destructive), **trend arrow** colored, **status pills**,
+  **tag pills**, **avatar/provenance stacks**, **timer/relative-time pills**, **⌘-shortcut chips**.
+- **Segmented time control** (1H/24H/7D style) as a real control.
+- **Per-card actions:** a top-right "Details/Runs →/See All" affordance on every card; a full-width
+  secondary button at the bottom where the ref uses one ("View reports").
+
+## Per-widget mapping (NetScript Home → reference archetype)
+1. **Throughput KPIs (executions/hr, firings/hr, override changes, saga success).** Do NOT leave as
+   thin sparkline tiles. Make the row RICHER: promote 1–2 to a full **Conversion-Rate-style** card
+   (hero value + delta pill + a small breakdown table + a **filled area chart w/ grid + axis**); the
+   others as compact stat tiles with a proper filled micro-area (baseline, not a hairline). Each has a
+   top-right deep-link.
+2. **Wiring health (16/20 nodes).** A **Time-Off-style** card: radial gauge centered + a 3-tile
+   breakdown (healthy/degraded/unbound with colored dots + counts) + an "ATTENTION" pill + a "View →".
+3. **Execution outcomes.** A **Marketing-Channels-style** card: hero (270 runs) + a **stacked channel
+   bar** (completed/retried/failed) + **dot legend** + a **table** (Job executions / Saga instances /
+   Trigger firings → count + colored trend) + a "Runs →" action.
+4. **Capability mix.** A **donut** card: donut (6 plugins) + a **legend table** (Workers 42% / Triggers
+   28% / Streams 18% / Sagas 12% with colored dots + %) + "Plugins →".
+5. **Wiring signals.** A **segmented control** (1H/24H/7D) + a **table** of signals (Plugin doctor,
+   Migrations, Runtime overrides, Scheduler drift → status pills + a "→"). Column-aligned.
+6. **AI incident summary.** Keep the narrative but tighten to the card anatomy: eyebrow + ✦ + title,
+   the causal paragraph, **grounding chips**, an **action-chip row**, a provenance/model footer. Give
+   it a copper left-accent. Dense, not airy.
+7. **Where to look (6 facts).** A tight **3×2 stat grid**: each = big value + label + a one-line
+   sub-detail + a deep-link arrow; warning-toned dot only when non-zero.
+8. **Just happened.** A compact **activity feed**: colored primitive dot + event text + entity chip +
+   relative-time pill, 4–5 rows.
+9. **Command palette + Contributed panels.** Composed cards: the palette as a search + grouped action
+   rows (Navigate/Act/Recent) with ⌘ hints; contributed panels as a small provenance table.
+
+## Chrome (make it a signature — refs 01/02)
+- **Sidebar:** logo tile + wordmark; grouped nav (Overview/Capabilities/Data/System) with icon-tiles,
+  derived badges, an **active pill + left accent + filled icon + chevron**; add a **PINNED/RECENT group
+  with ⌘-shortcut chips** on the right; a **profile/workspace card pinned at the bottom** (avatar +
+  workspace + env + chevron); collapsible icon rail.
+- **Topbar:** a real header — a **two-line context** (crumb/title + a one-line status like the refs'
+  greeting), the `local · my-app · aspire` env pill, a **prominent search/⌘K**, **Open Aspire ↗**, a
+  **primary action button** (e.g. "Ask ✦" styled like the refs' "Create Request"), theme toggle.
+
+## Mobile — dedicated bottom sheets (REQUIRED, called out by owner)
+- Sidebar → drawer (already have). Beyond that: **dedicated bottom-sheet modals** for detail/actions —
+  a stat/card tap opens a bottom sheet with its detail; the command palette is a bottom sheet; filters/
+  segmented views open as bottom sheets (refs `06-mobile-sheets`). Dense single-column masonry; cards
+  reflow to their mobile composition; no horizontal body scroll.
+
+## Execution discipline (this is the point)
+Build each widget, screenshot it, and **compare it directly to its named reference archetype** — if it
+is sparser / flatter / fewer layers than the ref, it is NOT done; iterate. Do not settle for
+"improved" — match the reference craft. Zero `{{ }}` in the DOM, zero console errors, no horizontal
+overflow, both themes, both viewports, every iteration.
diff --git a/.llm/runs/beta10--orchestrator/visual/ROLLOUT-DOCTRINE.md b/.llm/runs/beta10--orchestrator/visual/ROLLOUT-DOCTRINE.md
new file mode 100644
index 000000000..a407b0fe9
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/ROLLOUT-DOCTRINE.md
@@ -0,0 +1,109 @@
+# Rollout doctrine — every screen BESPOKE, every pass PUSHES the bar
+
+The V2b Home is the quality floor. The rollout is **NOT** "apply the Home kit uniformly" — that makes
+every screen look the same, which is the exact failure to avoid. For EACH screen:
+
+1. **Ask the design question FIRST (before touching CSS):**
+   *"What tailored components, layout, composition, data visualization, and data structure best
+   showcase THIS feature — and how do they compose together?"* Design the screen around its feature,
+   not around a generic template. Write your answer at the top of your report.
+
+2. **Mine a DIFFERENT reference each pass.** Before designing, open reference PNGs in
+   `references/` you haven't fully mined yet and extract NEW variants / patterns / visualizations to
+   apply here. State what you took and from which ref. The references are rich — there are many
+   visualization variants beyond what Home used (data-point / scatter charts, line + crosshair +
+   value tooltip, timeline / step charts, radial + arc gauges, sparkbars, calendar/day strips, tinted
+   category cards, avatar stacks, KV / split panels, segmented controls, stacked bars, funnel tables,
+   status/tag/timer pills, marketplace cards, thread/transcript layouts, etc.). Find the ones that fit.
+
+3. **Invent new visualizations + components** tailored to the feature — do NOT be capped by the
+   current DS or the existing kit. Keep NS One identity so it round-trips + is liftable: `--ns-*`
+   tokens only (no raw hex), `ns-*` class contracts, warm-cream/dark, hard press shadow, copper/teal/
+   amber, DM Sans/Mono. Token-driven, **NO SVG `{{ }}` holes** (div/CSS or post-mount JS geometry).
+
+4. **Reuse the shared kit + chrome** for consistency (sidenav / topbar / gauge / donut / channel-bar /
+   data-table / status-pills / segmented / filled-area / delta pill / bottom-sheet), but **each screen
+   adds its OWN tailored components** so no two screens read the same.
+
+5. **Match the reference craft:** bespoke, multi-layer, dense, no dead space, strong hierarchy, a
+   clear UX story. Responsive / mobile-first with **dedicated bottom sheets** for detail/actions/
+   filters. Verify desktop 1440 + mobile 390, both themes; zero `{{ }}` / zero console errors / zero
+   h-overflow every iteration; regression-check the other screens (shared file). Compare each widget
+   to a reference — if it's flatter/sparser, keep going.
+
+6. **Append to `DS-UPLIFT-BACKLOG.md`** every pass: new components / refinements / tokens / variants /
+   options / mobile optimizations.
+
+## Reference assignment (mine fresh patterns per pass — don't reuse the same ref every time)
+- **Home (done):** 03-analytics-cards, 01-synergy-desktop.
+- **Investigation spine (Live Flow + Run Inspector):** 04-finance-cards (line + crosshair + value
+  tooltip + OHLC footer; arc gauge), 05-timeoff-workhour (work-hour line with a data-point tooltip;
+  time-range segmented). The causal JOURNEY deserves a bespoke flow/timeline visualization, and the
+  inspector a rich step-timeline with data-point tooltips — mine these two refs for that.
+- **Capability consoles (Workers/Sagas/Triggers/Streams + leaves):** 02-synergy-mobile-nav, 08/09/10
+  (mine list→detail, tables, timelines, tinted cards, avatar/provenance).
+- **Control plane (Config/Runtime/Catalog/Migrations/DLQ/Auth):** 06-mobile-sheets (sheets/forms),
+  revisit 03/04 for tables/gauges/segmented + the topology graph deserves its own bespoke viz.
+- **AI + Extensions + Plugins:** 07-chat-signin (thread/transcript, forms), + any unmined ref.
+Each pass MUST look at its assigned refs (and browse the others) fresh and pull NEW patterns.
+
+## NEW references (added 2026-07-13 — dev-console + flow-builder; MORE on-domain, mine heavily)
+- **11 / 12 / 13-devconsole-* (Kafka / Conduktor consoles)** — the best patterns for our consoles +
+  control plane + inspector:
+  - **Console layout:** breadcrumb (`Topics > name`) + a **tab row** (Consume/Produce/Config/Schema/…)
+    + a compact **stat strip** (RECORDS / SIZE / PARTITIONS / REPLICATION) + a **dense sortable data
+    table** (sortable headers, monospace) + a toolbar (search + dropdowns + "Add filter" + "More
+    filters") + a **right-side detail/filter DRAWER** (→ mobile bottom sheet) with its own docs tabs.
+    → Workers / Sagas / Triggers / Streams consoles, **Run Inspector**, DLQ, Auth.
+  - **Version / code-diff viewer (13):** version dropdowns (v3→v4) + side-by-side **line-numbered code
+    with red/green diff highlighting**. → Catalog (contract schema), Runtime **version chain
+    v41→v42→v43**, Migrations (schema diff).
+  - **Env indicator:** workspace + green "Connected". → topbar.
+- **21-flow-builder (outamate node-graph)** — a **node-graph canvas** (nodes + connectors + branch
+  labels) + a right **properties panel** + a **component palette** (Text/Image/Gallery/Button). →
+  **Config topology** wiring graph, the **Trigger builder** ("Draft with AI" typed form), and the
+  causal **Journey** composition.
+- **19-pm-dashboard (Mondays)** — greeting header + stat strip + projects **table with status pills**
+  + a **schedule day-strip** + a notes checklist. → list/table + day-strip patterns.
+- **14–18, 20** — browse for more variants (data-point charts, etc.).
+
+### Updated per-screen reference mapping
+- **Investigation spine:** + **11** (console table + right drawer/bottom-sheet → Run Inspector), **21**
+  (node-graph feel → the journey). (still + 04/05 for line+data-point tooltip.)
+- **Capability consoles:** **11 / 12 / 13** PRIMARY (console layout: breadcrumb + tabs + stat strip +
+  sortable table + detail drawer).
+- **Control plane:** **13** (version/code diff) → Runtime/Catalog/Migrations; **21** (node graph) →
+  Config topology; 06 (sheets/forms) → DLQ/Auth actions.
+- **AI + Extensions + trigger builder:** **21** (flow + palette), 07 (thread/transcript).
+
+## Gate spec (mandatory per pass — added 2026-07-14, owner directive)
+
+Two failures the gate must now catch, beyond the hero/primary component:
+
+1. **EVERY SECTION bespoke, not just the hero.** A screen fails if its stat strip is plain number
+   cards, its lists are airy bullets, or its detail panel is a monolithic scroll — even when the
+   headline component (canvas, chart, graph) is excellent. Each section must answer *"what tailored
+   component best showcases THIS part of the feature?"* Redesign the generic sections too.
+
+2. **The adversarial gate must PRESCRIBE CONCRETE components from the reference screenshots.** Prior
+   gates gave abstract advice ("add a stat strip"). Not enough. The gate now REQUIRES a ≥8-row
+   **component-prescription table** naming the exact UI element in a named reference file and how to
+   adapt it — with ≥3 rows drawn from references the design has not yet used (cross-pollination).
+
+Run `visual/_evals/GATE-PROMPT.md` via **OpenCode Kimi K2.6 vision** (native; claude-print's
+Anthropic-skin drops images → `NO_VISION`). Feed the screen's shots + a DIVERSE reference set (assigned
+refs + 2 wildcards). Then dispatch an Opus fix pass that (a) kills dead space, (b) makes every generic
+section bespoke, (c) applies the prescribed concrete components. Screenshots to owner + commit + comment
+on PR #780 each pass.
+
+## Density defaults (front-loaded 2026-07-14 — the gate flags these on EVERY screen)
+
+Bake these into the FIRST pass so screens land ≥75 and need fewer fix passes:
+1. **No plain number-card stat rows.** A row of "LABEL / big-number" boxes always reads generic. Use a
+   composite header: icon/glyph + number + a supporting micro-viz (sparkline, ratio meter, pips, trend
+   arrow) + a short contextual sub-label. Tie metrics to click-to-filter where it fits.
+2. **Compact nodes/rows — no 100px+ padded cards for 3 lines.** Timeline/list nodes must earn their
+   height with real per-item metadata (counts, durations, deltas), not padding. Halve airy row heights.
+3. **Dense tables**: tight row height, monospace + type-color for values, inline mini-viz (sparkline /
+   heat-bar / status pill) per row rather than plain text cells.
+4. **No orphaned ghost rows**: dividers/markers should carry data or be slim, never a big empty dashed box.
diff --git a/.llm/runs/beta10--orchestrator/visual/V1-brief.md b/.llm/runs/beta10--orchestrator/visual/V1-brief.md
new file mode 100644
index 000000000..82ba458c0
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/V1-brief.md
@@ -0,0 +1,45 @@
+use harness
+
+## SKILL
+- netscript-harness
+
+# GLM visual pass V1 — global design-system polish (NS One)
+
+You are a senior product designer doing a **visual-only** refinement pass on the NetScript Dev
+Dashboard prototype. Structure, routing (41 hierarchical routes), features, data, and logic are
+already DONE by a prior pass — **do not change any route, logic, data, or feature behavior.** Your
+job is to raise the VISUAL quality to a premium operator console (Temporal / Inngest / Linear /
+Vercel-grade polish). **V1 is the GLOBAL foundation** the later per-screen passes build on — do not
+redesign individual screens yet; set the system.
+
+## Working files (edit these directly)
+- Markup + logic: `/home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/render/prototype.dc.html`
+- Component styles (most of your work): `/home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/render/assets/ns-ext.css`
+- Prototype styles: `/home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/render/assets/proto.css`
+- **Do NOT edit** `_ds/…/_ns_styles.css` (generated NS One closure) or `support.js` (DC runtime).
+
+## Verify loop (leverage Playwright — see, don't guess)
+A static server is already running: **`http://127.0.0.1:8899/prototype.dc.html`**.
+Screenshot every screen light+dark with the existing script:
+`node /tmp/claude-1000/-home-codex-repos-netscript-beta10/cd2ee104-ed45-4ed4-bcca-f960c60a1d84/scratchpad/shoot5.mjs "http://127.0.0.1:8899/prototype.dc.html" <outdir>`
+(chromium at `/home/codex/.cache/ms-playwright/chromium-1232/chrome-linux64/chrome`; playwright is in
+that scratchpad's node_modules — run node from there). **Look at the PNGs**, edit CSS, re-render,
+compare. After every change: zero `{{ }}` in the rendered DOM and zero console errors, both themes.
+
+## V1 scope — GLOBAL only
+- **Spacing & rhythm:** one consistent spatial scale; fix cramped and loose regions; align to a grid.
+- **Typography:** a clear hierarchy (display / section / label / body / mono) with consistent
+  sizes/weights/line-heights; fonts are DM Sans + DM Mono; tighten heading tracking.
+- **Color / tokens:** only `--ns-*` tokens; apply intent colors (primary/success/warning/destructive/
+  muted) consistently; **no raw hex**.
+- **Surfaces:** unify card/panel/border/shadow (the NS One hard-offset press shadow), the radius
+  scale, and hover/active/focus states.
+- **Density:** calibrate for a dense operator console — tighten the noisy, breathe the scannable.
+- **Dark mode:** every global change must hold in `[data-theme='dark']` (contrast, borders, shadows).
+Keep the warm-cream light default + dark; keep raw `ns-*` class markup (it round-trips to Fresh).
+
+## Constraints
+Visual only — no route/logic/data/feature changes; do not touch `_ns_styles.css` or `support.js`;
+keep zero `{{ }}` in the DOM and zero console errors in both themes after every edit. When done,
+write `/home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/render/_visual-reports/V1-complete.md`
+(what you changed, before/after notes, anything deferred to a later cluster).
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/GATE-PROMPT.md b/.llm/runs/beta10--orchestrator/visual/_evals/GATE-PROMPT.md
new file mode 100644
index 000000000..b589df236
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/GATE-PROMPT.md
@@ -0,0 +1,33 @@
+<!-- CANONICAL ADVERSARIAL VISION GATE — reusable per screen.
+RUNNER (orchestrator): fill {SCREEN} below, then run natively via OpenCode Kimi K2.6 vision:
+  opencode run "$(cat this-file)" -m openrouter/moonshotai/kimi-k2.6 --variant high \
+    -f <screen shot 1> -f <screen shot 2> -f <screen mobile shot> \
+    -f <ASSIGNED ref A> -f <ASSIGNED ref B> -f <WILDCARD ref C> -f <WILDCARD ref D>
+  (source ~/.config/netscript-agentic/openrouter.env for OPENROUTER_API_KEY; opencode on PATH.)
+FEED A DIVERSE REFERENCE SET — the screen's assigned refs PLUS 2 wildcards it has NOT used, so the
+gate can cross-pollinate. claude-print/Anthropic-skin drops images (NO_VISION) — OpenCode is the vision path. -->
+
+You are a ruthless senior product-design critic WITH VISION. Output GitHub-flavored markdown only. Cite what you actually SEE in specific pixels — no generic praise, no advice that isn't tied to a reference image.
+
+FIRST LINE: state your underlying model name/family. If you cannot see the images, output exactly `NO_VISION` and stop.
+
+CONTEXT — reviewing the **{SCREEN}** screen of a developer dashboard (NetScript). Design language: warm-cream light + dark theme, DM Sans + DM Mono, copper/teal/amber accents, hard-offset press shadows, DENSE with NO dead space, and EVERY screen AND EVERY SECTION must be BESPOKE to its feature — not a reused card/list/template. Quality bar: premium SaaS dashboards.
+
+IMAGES: the first images are the {SCREEN} design under review (desktop, interaction states, mobile). The remaining images are REFERENCE screenshots from a premium-dashboard library. I will not label which is which beyond order — identify them yourself and refer to each reference by what it shows.
+
+Do ALL of the following, concise and pixel-specific:
+
+1. **BESPOKE VERDICT (0–100)** — Is the design a genuinely feature-tailored layout, or generic chrome with data swapped? Rate distinctness. Call out BOTH the tailored parts AND every section that reads as a generic template (plain number cards, airy bullet lists, monolithic scroll panels, etc.).
+
+2. **DENSITY / DEAD-SPACE** — Estimate the % of each major region that is empty/low-information. Flag any region that fails "dense, no dead space." Contrast with how the reference images pack their space.
+
+3. **COMPONENT PRESCRIPTION TABLE (MANDATORY — at least 8 rows).** This is the most important section. For each weak/generic section of the design, prescribe a SPECIFIC, CONCRETE component/pattern/UI-feature that is *visible in one of the reference screenshots*. Do NOT give generic advice ("add a chart"); name the exact reference element you saw. At least 3 rows must draw from a reference the design does NOT yet appear to use (cross-pollination).
+
+   | # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to {SCREEN} |
+   |---|---|---|---|---|---|
+
+4. **VARIETY LEVERAGE** — Name 4 component/visualization patterns visible across the reference images that this screen does NOT use but should, to raise craft. For each: which reference, what the element is, and where it would go.
+
+5. **TOP 5 FIXES** — ranked, each one sentence + why, each tied to a reference or the density bar.
+
+6. **FINAL (one line)** — ACCEPT / ACCEPT-WITH-FIXES / REJECT.
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/POLISH-SWEEP.md b/.llm/runs/beta10--orchestrator/visual/_evals/POLISH-SWEEP.md
new file mode 100644
index 000000000..6835eca88
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/POLISH-SWEEP.md
@@ -0,0 +1,59 @@
+# Final polish sweep — deferred gate prescriptions (apply after the breadth pass)
+
+Each screen was accepted at its gate score with concrete residuals deferred here. The sweep re-gates
+every screen and applies the genuinely valuable items (skip subjective/gold-plating).
+
+## Triggers (gate 55 → fix → 62)
+- Rule builder → optional full node-graph (source → diamond condition → action) [ref 21] (debatable)
+- Firing-history rows → segmented 24h outcome bars vs sparklines [ref 11] (preference)
+- Webhook test box → syntax-highlighted editor + docs accordion [ref 11] (gold-plating)
+- Schedule next-fire cards → vertical timeline ribbon w/ duration bars [ref 19]
+
+## Streams (gate 72)
+- Throughput card → time-range pills (1m/5m/15m/1h) + pin crosshair readout + reclaim whitespace [ref 04]  ← valuable
+- Live event tail → filter bar (quick-search + show-from + add-JS-filter drawer) [ref 11]  ← valuable (consistency w/ Triggers)
+- Selected-message panel → accordion sections / denser; fan-out delivery → 4-col table [ref 12]  ← valuable
+- Consumer-lag stat → radial gauge (lag vs retention) [ref 04] (debatable)
+- Lag heatmap → finer grid + x-axis labels + gradient legend [ref 12] (minor)
+
+## Config Resolution (gate 68 → fix → concrete hits resolved)
+- Precedence rail → optional node-graph pipeline [ref 21] (declined — waterfall metaphor is stronger; revisit only if desired)
+- Right panel → inline quick-override <textarea> editor + docs accordion [ref 11] (out of visual-only scope; needs interactivity)
+- Category filter chips → connected tab bar [ref 11] (declined — chips are fine)
+
+## Migrations (gate 62 → node/header density fix)
+- Migration ledger → inline per-row DDL diff expander [ref 13] (declined — dense table + drawer already cover it)
+- Pending rail "what will change" → tabbed impact-docs accordion [ref 11] (gold-plating)
+- DDL diff → full code-editor chrome (file tabs, line numbers) [ref 11] (declined — diff is intentionally secondary)
+- Version-chain per-node author avatars + preflight-step pipeline [ref 19] (no author/step data — would invent data)
+
+## Dead-Letter Queues (gate 62 — ACCEPTED on verified density; gate over-reached)
+Only trivially-valid residuals (do in sweep):
+- Frame the inspector payload JSON in a bordered code block (light border + key/string color) [ref 11]
+- Connect the retry-history timeline dots with line segments showing elapsed interval [ref 19]
+- Tighten inspector vertical whitespace; fill the shorter right rail (a top-sources mini-list)
+DECLINED (gate was wrong): remove the failed-message checkboxes (breaks bulk triage — core feature);
+queue-health fill-meters → semicircular gauges (kept horizontal ON PURPOSE so DLQ ≠ Migrations arc gauge);
+"How triage works" → tabbed docs (gold-plating). Note: gate under-credited existing micro-viz
+(by-queue split bar, exhausted pips, arrival sparkbar, cluster severity left-borders).
+
+## Catalog (gate 62 — ACCEPTED on verified quality; gate over-reached OFF-DOCTRINE)
+Only valid residual (sweep): tighten the "7 CONTRACTS REGISTERED" stat into a glued borderless metadata
+strip (REGISTERED / PROCEDURES / VERSIONS / COMPATIBILITY) under the title [ref 13]; nudge transport-reach bars.
+DECLINED — the gate prescribed changes that VIOLATE the design language / variety mandate:
+- green `#22c55e` primary buttons + green upsell banner [ref 07] → RAW HEX, off the copper/teal/amber palette
+- centered modal replacing the mobile bottom sheet → the whole system uses bottom sheets BY INTENT (owner ask)
+- convert the grouped registry rail → a generic Confluent-style table → kills the explorer idiom + echoes the consoles
+- add a side-by-side schema DIFF viewer → Config Resolution owns the diff pattern; Catalog steered away ON PURPOSE
+- "Add JS filter" code-drawer query language → gold-plating (search + kind/method/coverage chips already live-filter)
+Note: gate is now applying a fixed generic wishlist to strong screens; MUST filter against NS One + variety.
+
+## Auth Sessions (gate 64 — ACCEPTED on verified quality; one valid density residual)
+Valid residuals (sweep):
+- Densify the bottom "Auth event stream" (sparse 2-col list, ~45% dead space) → dense event rows/table
+  (Timestamp · Event · Principal · correlation), status-colored dots, copy preserved [ref 11]  ← real
+- Group the detail KV into Identity / Network / Lifecycle sections with bold headers [ref 11] (minor)
+- Connect the session-lifecycle timeline dots with a line (trivial)
+DECLINED (off-doctrine / anti-variety): convert identity-forward roster CARDS → generic table (kills the
+session-roster idiom + echoes the consoles); per-provider brand icons [ref 07 off-domain]; KPI "fat cards"
+→ tiles (header already carries the status-distribution bar + scope/MFA meters + expiry-horizon — not plain cards).
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V10-catalog-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V10-catalog-adversarial-vision.md
new file mode 100644
index 000000000..d4c9c9067
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V10-catalog-adversarial-vision.md
@@ -0,0 +1,47 @@
+
+> build · moonshotai/kimi-k2.6
+
+# Agent Eyes
+Moonshot AI Kimi K2.6
+
+## 1. BESPOKE VERDICT — 62/100
+The master-detail chassis is **generic chrome**. The left procedure list and right detail panel are a stock admin-template layout seen in a thousand SaaS dashboards. What saves it from rejection:
+- **Tailored**: The BY KIND lozenges with per-category color coding (teal workers, rust sagas, amber triggers), the four-dot transport-coverage indicators on each row, the Producers/Consumers topology strip, and the line-numbered `<pre>` schema block all show feature-aware thinking.
+- **Templatey**: The massive "7 CONTRACTS REGISTERED" number-in-a-box is a generic KPI card. The search + pill-filter row is undifferentiated. The THIN badge on `triggers.enable` is just text in a pill. The mobile bottom sheet is a stock system component with no craft. The "crons > schedule not installed" box is a gray CLI dump with no visual invitation.
+
+## 2. DENSITY / DEAD-SPACE
+- **Stats row**: ~25% dead space. The big-number card has excessive internal padding and is disconnected from the BY KIND blocks beside it. The Transport Reach bars are microscopic and float in unused vertical space.
+- **Search/filter row**: ~15% dead space. Pill buttons have airy margins; no advanced query surface is exposed.
+- **Procedure list**: ~8% dead space. Acceptably dense, but the category headers (`workers › jobs`) have too much top/bottom breathing room compared to the row stack.
+- **Detail panel**: ~18% dead space. The schema block is dense, but the Producers/Consumers boxes are padded lists with empty horizontal margins, and the panel header wastes a full line on the breadcrumb before the title.
+- **Reference contrast**: `13-devconsole-c.png` packs side-by-side JSON diff, version selectors, schema ID tags, and an action button into the same vertical real estate our stats card alone occupies. `11-devconsole-a.png` glues RECORDS/TOPIC SIZE/PARTITIONS directly to the table with zero card chrome.
+
+## 3. COMPONENT PRESCRIPTION TABLE
+
+| # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to Catalog |
+|---|---|---|---|---|---|
+| 1 | Top stats card ("7" in a white rounded box with "CONTRACTS REGISTERED" label) | Generic KPI float; disconnected from the kind breakdown and coverage stats. | A tight, borderless metadata strip with bold numbers and small uppercase labels: **"CURRENT VERSION 3 | TOTAL VERSIONS 2 | FORMAT Avro | COMPATIBILITY Backward transitive"**, sitting directly under the header with no card chrome. | `13-devconsole-c.png` — the stats row directly beneath "Schema Registry › truck-position". | Replace the floating card with "REGISTERED 7 | PROCEDURES 17 | VERSIONS 4 | COMPATIBILITY Backward" glued under the "Service & contract catalog" title. |
+| 2 | Schema block in detail panel (beige `<pre>` with line 1–9, `StartFulfillmentInput{` and `SagaInstanceRef{`) | Static text block; no diff, no expansion, low scannability. | Side-by-side code diff viewer with line numbers, red minus blocks for removed lines, green plus blocks for added lines, and a vertical divider between panes. | `13-devconsole-c.png` — the dual-pane JSON schema comparison showing logicalType diffs on lines 8–9 and 18. | Add a "Coverage Diff" toggle: left pane = expected complete schema, right pane = actual thin schema, missing `.describe()` fields highlighted in red (#ffcccc), complete fields in green. |
+| 3 | Search + pill filters ("Search procedures, types..." and "All kinds / workers / sagas" pills) | Passive, low-power filtering; no query composition surface. | Slide-out "Add JS filter" panel with a labeled code textarea, "Filter name" input, "Clear all / Apply filter" buttons, and inline Documentation tabs (Basics / Parameters / Functions / Examples). | `11-devconsole-a.png` — the right-hand drawer titled "Add JS filter" with the code editor and docs section. | Replace the search bar with a "Query" button that opens a filter drawer for expressions like `coverage == 'thin' && transport.includes('REST')`, with saved presets. |
+| 4 | Procedure list rows (e.g., `POST jobs.trigger` with colored dots) | Vertical stack of labels; not tabular, no inline secondary metadata, wasteful horizontal space. | Dense data table with sortable column headers (Timestamp, Offset, Partition, Key, Value), tight alternating row backgrounds, and bold primary values. | `11-devconsole-a.png` — the Consume tab record table with alternating white/gray rows and compact padding. | Render the list as a table: Method badge | Contract Name | Input → Output | Coverage dots | Version. Use Confluent's tight row height and alternating bg. |
+| 5 | "crons > schedule not installed" empty state (gray dashed box with CLI command `netscript plugin install crons`) | Terminal dump in a gray card; no visual hierarchy, no primary action. | White rounded card with grouped input fields, a prominent green `#22c55e` rounded primary button, and a secondary text link beneath. | `07-chat-signin.png` — the right-hand "Sign in to your account" modal with email/password fields and the green "Sign in" button. | Replace the gray box with a white rounded card: icon + "Schedule contracts are not installed" + green "Install Crons" button + "View docs" link. |
+| 6 | Mobile detail sheet (`triggers.enable` full-width bottom sheet with stacked content) | Generic system bottom sheet; no elevation, no section grouping, wastes horizontal real estate. | Centered modal with soft drop shadow, clear section grouping separated by hairline dividers, and a sticky bottom CTA bar. | `07-chat-signin.png` — the right-hand sign-in modal with rounded corners, grouped OAuth buttons above a divider, then form fields, then a pinned green CTA. | Convert mobile contract detail to a centered modal with grouped Signature / Schema / Provenance sections and a pinned "Open in Scalar" green button at the bottom. |
+| 7 | "DESCRIBE() COVERAGE 71%" single abstract progress bar | Bar does not reveal which contracts are thin; passive visualization. | Segmented version selector showing "Version 3 (current)" with a dropdown, explicit schema ID tags (blue pills like "100123"), and clickable segments. | `13-devconsole-c.png` — the dropdown selectors and schema ID tags under the stats row. | Replace the bar with a segmented strip where each contract is a colored segment (teal = complete, amber = thin); clicking a segment filters the list to that contract. |
+| 8 | "Open in Scalar" button (plain text link button at bottom of detail panel) | Low visual weight; generic link styling. | Full-width green upsell banner with an arrow icon, sitting at the bottom of the view with heavy visual weight. | `07-chat-signin.png` — the "Access premium models & features · Upgrade" inline banner at the bottom of the chat screen. | Style the CTA as a full-width green banner: "Open in Scalar →" pinned to the bottom of the detail panel, matching the upsell banner's weight. |
+
+## 4. VARIETY LEVERAGE
+Patterns visible in references that this screen completely omits:
+1. **Side-by-side diff viewer with line-level red/green highlighting** (`13-devconsole-c.png`). The Catalog shows schemas as static beige blocks. A split-pane diff would let developers compare contract versions or "expected vs actual" coverage inline, turning the schema panel from a reference into a diagnostic tool.
+2. **Inline code filter panel with documentation tabs** (`11-devconsole-a.png`). The Catalog relies on text search and pills. A slide-out JS filter drawer with a code editor and inline docs tabs would add serious power-user density without cluttering the default view.
+3. **Dense metrics strip glued to the content edge** (`11-devconsole-a.png`). The Catalog uses a floating card for "7 contracts". References show RECORDS / TOPIC SIZE / PARTITIONS as tight, borderless stat blocks directly atop the table—no shadows, no padding waste. This raises density immediately.
+4. **Centered modal with grouped section dividers and sticky CTA** (`07-chat-signin.png`). The mobile view is a generic bottom sheet. A centered modal with soft shadow, grouped fields separated by 1px rules, and a pinned green action bar would feel crafted rather than system-default.
+
+## 5. TOP 5 FIXES
+1. **Kill the floating stats card** and replace it with a tight, borderless metadata strip (Current Version / Total Versions / Format / Compatibility) glued directly under the page title, exactly as `13-devconsole-c.png` does under the Schema Registry header—this eliminates the biggest dead-space offender.
+2. **Add a side-by-side schema diff viewer** in the detail panel for thin vs complete coverage, using the line-numbered red/green code block pattern from `13-devconsole-c.png`—this turns a static text dump into an interactive, feature-specific diagnostic.
+3. **Implement an "Advanced Filter" slide-out** with a code textarea and named presets, replacing the generic search bar and pills, exactly as `11-devconsole-a.png`'s "Add JS filter" panel works—this adds pro-user power without visual bloat.
+4. **Refactor the mobile detail sheet into a centered modal** with grouped section dividers and a sticky green primary CTA, borrowing the card elevation and button hierarchy from `07-chat-signin.png`—this fixes the generic mobile experience.
+5. **Pack the procedure list into a dense table** with sortable column headers and alternating row backgrounds, matching the information density of `11-devconsole-a.png`'s topic record table—this removes dead space and makes scanning faster.
+
+## 6. FINAL
+**ACCEPT-WITH-FIXES** — The foundation is competent and feature-aware, but too many sections rely on generic dashboard KPI cards, standard master-detail templates, and stock mobile sheets. Applying the 8 prescribed reference patterns will push it from "admin dashboard" to premium craft.
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V11-auth-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V11-auth-adversarial-vision.md
new file mode 100644
index 000000000..5ca5b19f2
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V11-auth-adversarial-vision.md
@@ -0,0 +1,83 @@
+
+> build · moonshotai/kimi-k2.6
+
+**moonshotai/kimi-k2.6**
+
+## 1. BESPOKE VERDICT — 64 / 100
+
+The layout is *partially* tailored. The session cards with color-coded expiry bars, the scope pill clusters (`read`/`write`/`admin:runtime`), and the status badges (`EXPIRING`, `ACTIVE`, `IDLE`, `REVOKED`) show feature-specific craft. The copper/teal/amber accent system is applied consistently, and the avatar-initial blocks (`AS`, `LD`, `MO`) are a nice bespoke touch.
+
+However, large swaths read as generic dashboard chrome:
+- The **top summary row** is four interchangeable stat-cards you’d see in any Stripe/Railway clone.
+- The **right detail panel** devolves into a generic label-value admin form.
+- The **Auth event stream** is a sparse two-column bullet list with no structural invention.
+- The **filter tabs** are plain pill buttons with no visual anchoring.
+
+The screen feels like a strong list view bolted onto a generic dashboard skeleton.
+
+---
+
+## 2. DENSITY / DEAD-SPACE
+
+| Region | Est. dead / low-info space | Verdict |
+|---|---|---|
+| Top summary KPI row | ~35% | Excessive internal padding; cards float in a wide grid with little relationship to the data below. |
+| Session list (left) | ~15% | Reasonable; card padding is acceptable but could be tighter. |
+| Right detail panel | ~25% | Label-value pairs are vertically stretched; lots of whisper-gray divider lines eating space. |
+| Auth event stream (bottom) | ~45% | Catastrophic. Two-column list with huge gutters and almost no row density. |
+| Revoke modal | ~20% | Centered narrow modal leaves massive blurred backdrop; CLI block has no visual weight. |
+
+**Contrast:** The Confluent reference (`11-devconsole-a.png`) packs a full topic stat bar, tab nav, filter bar, data table, and side panel into the same vertical real estate this design uses for four summary cards and a half-empty list. The Mondays reference (`19-pm-dashboard.png`) shows a greeting, stats, project table, schedule strip, and notes panel simultaneously without crowding.
+
+---
+
+## 3. COMPONENT PRESCRIPTION TABLE
+
+| # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to Auth Sessions |
+|---|---|---|---|---|---|
+| 1 | Top summary KPI row (3/4 live, Elevated Scope, MFA Coverage, Expiry Horizon) | Generic fat stat-cards with excessive internal padding; reads like any admin dashboard template. | Compact metric tiles: small uppercase label + large number, packed tight beneath the page title with no card borders. | `11-devconsole-a.png` — the "RECORDS / 260", "TOPIC SIZE / 1MB", "PARTITIONS / 7", "REPLICATION FACTOR / 3" tiles directly under the topic breadcrumb. | Collapse each KPI into a dense horizontal tile strip. Move the per-session expiry bars *into* the session list rows instead of a top-level summary. |
+| 2 | Filter tabs (All, Active, Idle, Elevated, Revoked) | Plain pill buttons floating in space; no active-state anchor or relationship to the list. | Underlined tab nav with bold active state and a visible bottom-border indicator, integrated with search. | `11-devconsole-a.png` — "Consume · Produce · Configuration · Schema · Consumer Groups · ACL" tab row directly above the data table. | Replace pills with a single underlined tab bar anchored to the left edge of the session list; place "Search principal…" inline at the right end of the same bar. |
+| 3 | Session list cards | Each card is a loose vertical stack of line items with a progress bar; wastes vertical space and repeats label patterns. | Dense table rows with avatar initials, colored status badge column, and a compact metadata string. | `19-pm-dashboard.png` — "My Projects" table rows (Task Name with icon + metadata, Assign avatar, Status pill). | Render sessions as a table: Principal | Provider/Location | Scopes | Status | Expiry bar | Actions. Lock avatar initials in a left column. |
+| 4 | Right detail panel (desktop) | Stretched vertical stack of label-value pairs with thin dividers; feels like a database admin form. | Grouped property cards with section headers and a top "code editor" block for the CLI equivalent. | `11-devconsole-a.png` — "Add JS filter" side panel: section header "Filter code", large bordered textarea, then "Filter name" input, then "Documentation" accordion tabs. | Cluster metadata into "Identity" (principal, provider, device), "Network" (IP, location), and "Lifecycle" (issued, expires, MFA) cards with bold section headers. |
+| 5 | Auth event stream | Two-column bullet list with huge gaps; lowest information density on screen. | Sortable data table with column headers (Timestamp, Event Type, Principal, Correlation). | `11-devconsole-a.png` — Record table with column headers "Timestamp · Offset · Partition · Key · Value" and dense zebra rows. | Convert events to a 4-column table; use status-colored dots for event type, not plain bullets. |
+| 6 | Revoke confirmation modal | Gray box CLI text with no syntax styling; generic confirmation button layout. | Elevated card overlay with syntax-highlighted command block and inline copy icon. | `11-devconsole-a.png` — The "Filter code" textarea with blue focus ring and monospace font; adopt its bordered input block styling. | Wrap the `netscript auth sessions revoke` command in a bordered dark/code block with a copy button at top-right. |
+| 7 | Mobile detail sheet (`01-after-mobile-sheet-light.png`) | Monotonic scrolling stack; no visual grouping of related fields. | Grouped card sections with rounded containers and subtle shadow separation. | `07-chat-signin.png` — Sign-in screen's grouped input blocks (Email Address card, Password card) separated by whitespace but clearly bounded. | Wrap PRINCIPAL / PROVIDER / DEVICE into one card, ISSUED / EXPIRES / MFA into another, each with a small header, instead of one long flat list. |
+| 8 | Session lifecycle timeline | Just two text bullets with colored dots; no visual connection or progression. | Vertical timeline with connecting line and event nodes. | `07-chat-signin.png` — Chat conversation thread: vertical stack of alternating bubbles with timestamps and clear reading order; the implicit left-aligned timeline structure. | Render lifecycle events as a vertical connected timeline with small nodes showing time and event name. |
+
+---
+
+## 4. VARIETY LEVERAGE
+
+Patterns visible in the references that this screen should adopt:
+
+1. **Sortable data table with column headers** — from `11-devconsole-a.png` (the Kafka record table under the topic stats).  
+   *Where it would go:* Replace the Auth event stream two-column list with a dense timestamped event table.
+
+2. **Inline bordered code/command block with copy action** — from `11-devconsole-a.png` (the "Filter code" textarea in the Add JS filter panel).  
+   *Where it would go:* The CLI equivalent in the revoke modal and potentially a "Quick actions" section in the detail panel.
+
+3. **Horizontal calendar/schedule strip + upcoming events list** — from `19-pm-dashboard.png` (the "Schedule" section with Mo/Tu/We/Th/Fr/Sa/Su strip and meeting timeline below).  
+   *Where it would go:* The Expiry Horizon summary could become a relative timeline strip showing upcoming expirations as events rather than abstract progress bars.
+
+4. **Branded social-login provider chips with icons** — from `07-chat-signin.png` ("Sign in w/ Apple" and "Sign in w/ Google" buttons with logos).  
+   *Where it would go:* The provider badges (`api-key`, `oidc`, `password`) throughout the session list and detail panel should use distinct iconography per provider instead of generic colored pills.
+
+---
+
+## 5. TOP 5 FIXES
+
+1. **Convert the Auth event stream into a dense 4-column sortable table** (Timestamp · Event · Principal · Correlation) like the Confluent record table — this single change reclaims ~45% dead space in the bottom region and fixes the weakest area of the screen.
+
+2. **Collapse the four top summary cards into compact metric tiles** with tight padding and micro sparklines, matching the Confluent topic-stat tiles — raises the bespoke feel immediately on page load.
+
+3. **Replace the revoke modal's plain CLI text row with a bordered code block featuring a copy button**, modeled on the Confluent filter code editor panel — turns a confusion point into a power-user feature.
+
+4. **Introduce grouped card sections with bold headers in the right detail panel** instead of the current flat label-value stack, adopting the Confluent side-panel section structure — reduces the ~25% dead space and improves scannability.
+
+5. **Restructure filter pills into an underlined active-tab bar** integrated with the search field, following the Confluent Consume/Produce navigation pattern — stops the tabs from feeling like disconnected stickers.
+
+---
+
+## 6. FINAL
+
+**ACCEPT-WITH-FIXES**
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V12-ext-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V12-ext-adversarial-vision.md
new file mode 100644
index 000000000..4b0bded23
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V12-ext-adversarial-vision.md
@@ -0,0 +1,87 @@
+
+> build · moonshotai/kimi-k2.6
+
+openrouter/moonshotai/kimi-k2.6
+
+## 1. BESPOKE VERDICT: 58/100
+
+**Tailored parts:**
+- The per-extension colored contribution bars (copper for Panels, teal for Commands, amber for AI tools) are feature-specific and immediately encode surface type — this reads as intentional Extensions chrome.
+- The detail panel’s provenance metadata (SOURCE → netscript, CONTRACT → v2, TRUST TIER → first-party) is bespoke to a plugin/extension registry; this isn’t generic SaaS profile data.
+- The “mounts: options, actions” micro-copy in the Panels card is domain-specific to NetScript’s slot system.
+
+**Template/generic parts:**
+- The entire top metrics row (“6 EXTENSIONS”, “CONTRIBUTIONS BY SURFACE”, “ENABLED COVERAGE”, “COMPATIBILITY”) is copy-paste dashboard chrome: four equal white blocks with a big number and a label. This exact pattern appears in thousands of admin templates.
+- The Compatibility box is a generic yellow warning alert with an icon + two lines of text — no different from Bootstrap/ToastUI.
+- The extension cards are standard list items: diamond icon, title, version pill, status dot, progress-ish bar, provider label, small tags. Remove the colors and this is any plugin manager.
+- The Surfaces tab (image 2) repackages the same data into three generic column cards with repeated headings — it’s a view-mode swap, not a feature-tailored layout.
+- The mobile sheet (image 3) is an off-the-shelf bottom drawer with key-value rows; nothing about its structure says “extension manifest.”
+
+**Verdict:** The visual identity (copper/teal/amber, warm cream, DM Mono) is strong, but the *layout vocabulary* is ~60% generic admin template. This is “branded template,” not bespoke.
+
+---
+
+## 2. DENSITY / DEAD-SPACE
+
+| Region | Dead-space estimate | Why it fails |
+|---|---|---|
+| Top stats row | ~35% | Four oversized cards with centraul alignment, huge icon boxes, and generous vertical padding. Compare to Confluent (ref 4) where metric cards are tight, edge-aligned, and share a single row with no internal padding waste. |
+| Extension list cards | ~25% | Each card uses ~24px vertical padding, a full-height colored bar that spans the card width but carries 1-bit of info (surface type), plus a second row of tags. The left gutter with the diamond icon is ~20% of card width for a 24×24px glyph. |
+| Detail panel (right) | ~30% | Key-value rows have massive vertical spacing. The “CONTRIBUTES” section is a sparse list: heading, subheading, tiny metadata line, repeated with no stacking. |
+| Surfaces tab columns | ~30% | Three-column card grid where individual cards (e.g., “Workers”, “Sagas”) have ~20px internal padding and often only 2–3 lines of content, leaving the bottom of each card empty. |
+| Mobile sheet | ~25% | Standard iOS-style grouped table: rounded section containers with 16px+ padding, section headers with extra margin, and key-value rows that stretch full-width for short strings. |
+
+**Contrast with references:** Confluent (ref 4) achieves ~10% dead space in its table view by edge-aligning text, using compact 40px row heights, inline badges, and a pinned filter bar that doubles as metadata. This screen reads as “airy marketing dashboard” rather than “dense developer tool.”
+
+---
+
+## 3. COMPONENT PRESCRIPTION TABLE
+
+| # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to Extensions |
+|---|---|---|---|---|---|
+| 1 | Top stats row: “6 EXTENSIONS”, “CONTRIBUTIONS BY SURFACE”, etc. | Four equal white cards with a big number and label — textbook dashboard template filler. | **Compact metric cards with inline value + micro-label + mini bar indicator** | `11-devconsole-a.png` — the row showing RECORDS 260, TOPIC SIZE 1MB, PARTITIONS 7, REPLICATION FACTOR 3: small caps labels, bold values, no card borders, packed into a single contiguous strip. | Replace the four isolated white cards with a single horizontal metric strip. Label: “EXTENSIONS 6 · PANELS 6 · COMMANDS 2 · AI TOOLS 2”. Remove card chrome; use a thin horizontal rule to separate from the list below. |
+| 2 | “ENABLED COVERAGE” block | A single teal progress bar with “6 enabled / 0 disabled” text. Wastes a full card for a binary state. | **Stacked mini segmented bar with per-tier color coding and precise counts** | `11-devconsole-a.png` — the “Consumer Groups” count pill and compact status badges in the upper right. | Render a 4-segment horizontal bar: first-party (copper), third-party (gray), disabled (red outline), quarantined (yellow outline). Each segment shows its count on hover. Fits in one line. |
+| 3 | “COMPATIBILITY” yellow alert | Generic warning box with icon + two lines of text. No actionability. | **Pinned alert row with an inline action button and dismiss control** | `11-devconsole-a.png` — the purple “+ Add JS filter” / “More filters” button row: it’s a compact, high-contrast action bar that sits above content without dominating. | Convert to a 40px-high pinned alert bar: “⚠ analytics-plus held — contract v1 at host v2. [Review compatibility →] [Dismiss]”. Full width, no card shadow. |
+| 4 | Extension cards (list view) | Vertical list of oversized cards with redundant rows (icon + title + version + status + bar + tags + provider). Scrolls forever and hides density. | **Dense sortable table with inline status dots, version pills, and hover-reveal actions** | `11-devconsole-a.png` — the topic records table: 40px rows, sortable columns (Timestamp, Offset, Partition, Key, Value), inline values, no card wrappers. | Table columns: Extension (icon + name + version pill), Surfaces (copper/teal/amber micro-badges), Trust Tier (first-party badge), Status (dot), Actions (··· menu on hover). Halves the scroll length. |
+| 5 | Extension card colored bars | Full-width thick horizontal bars that encode one categorical variable (surface type mix). They consume ~15% of card height for minimal info. | **Inline segmented micro-bar (3–4px height) placed directly under the extension name** | `11-devconsole-a.png` — the visual weight of the “Partitions” and “Replication Factor” numbers: tiny but scannable. | A 4px-high stacked bar under the name: copper segment = panels, teal = commands, amber = AI tools. No label needed; legend in table header. |
+| 6 | “SHOW” filter pills (“all 6”, “Panels 5”, etc.) | Floating pills with counts, isolated in whitespace. Underspecified and easy to miss. | **Tab-style segmented control with integrated counts and active underline** | `11-devconsole-a.png` — the Consume / Produce / Configuration / Schema / Consumer Groups / ACL tabs with active underline. | “Providers · Surfaces · Available” as a tab bar. Under “Surfaces”, show sub-tabs: “All 6 | Panels 5 | Commands 1 | AI tools 2” with the teal active line. Pinned to the top of the list region. |
+| 7 | Detail panel: “CONTRIBUTES” list | Plain heading + subtext + tiny metadata row, repeated. Vertical padding makes it feel like a settings form. | **Collapsible grouped row list with inline icon clusters and mount-point chips** | `19-pm-dashboard.png` — the “My Projects” task list: task name, avatar, status badge, and compact metadata in a single 48px row. | Each contribution becomes a 48px row: icon (panel/command/AI), name (e.g., “Workers”), path chip (“capabilities/workers”), mount chips (“options”, “actions”), and an expand chevron. Group by surface type with sticky headers. |
+| 8 | Mobile sheet (image 3) | Standard iOS grouped table with key-value rows and section headers. No actionability, no density. | **Card-stack summary with toggle actions and inline code blocks** | `11-devconsole-a.png` — the “Add JS filter” side panel: a code editor block, filter name input, and compact action buttons (“Apply filter”, “Clear all”). | The mobile sheet should show: extension header + trust badge, a “CONTRIBUTES” accordion with surface-type chips, a code-style “Contract” block (v2 · compatible), and bottom sticky buttons: “Disable extension” / “View plugin →”. |
+
+---
+
+## 4. VARIETY LEVERAGE
+
+Four patterns visible in the references that this screen should adopt:
+
+1. **Dense sortable data table with column badges**  
+   *Reference:* `11-devconsole-a.png` — the Timestamp/Offset/Partition/Key/Value table.  
+   *Where it goes:* Replace the entire extension card list. A developer looking at 6+ extensions needs to scan versions, trust tiers, and surface types rapidly. Cards prevent scanning; a table enables it.
+
+2. **Inline filter chip bar with “Add” affordance**  
+   *Reference:* `11-devconsole-a.png` — the “+ Add JS filter” and “More filters” buttons, plus the resulting filter tag pills.  
+   *Where it goes:* Above the extension list, allow filtering by trust tier (first-party, third-party), contract version (v1, v2), or surface type. The current “SHOW” pills are passive; this makes them active filters with clear state.
+
+3. **Mini timeline / schedule strip for versioning**  
+   *Reference:* `19-pm-dashboard.png` — the “Schedule” calendar strip showing days 15–20 and event blocks below.  
+   *Where it goes:* Inside the detail panel or as a small widget in the Providers view, showing a “Contract history” or “Version timeline” for each extension (e.g., v2.3.0 → v2.4.0 upgrade path). Makes the static metadata feel alive.
+
+4. **Status badge chips with avatar clusters for attribution**  
+   *Reference:* `19-pm-dashboard.png` — the “My Projects” status pills (In Progress, Pending, Completed) and the stacked avatars on schedule events.  
+   *Where it goes:* In the extension table, show “Enabled” as a green pill and “Quarantined” as a yellow outline pill. For team environments, show a stack of maintainer avatars next to the extension name (if multi-owner). This adds visual texture the current list lacks.
+
+---
+
+## 5. TOP 5 FIXES
+
+1. **Collapse the top stats row into a single contiguous metric strip** — because the current four isolated cards each have ~35% padding, and Confluent (ref 4) proves you can pack four metrics into one compact bar without losing scannability.
+2. **Replace extension cards with a 40px-row dense table** — because the card format doubles scroll length and prevents sorting by version or trust tier; the Confluent table (ref 4) is the correct density benchmark for a dev tool.
+3. **Convert the “CONTRIBUTES” detail list to grouped 48px rows with inline chips** — because the current heading + subtext repetition wastes 30% vertical space, and Mondays’ task list (ref 5) shows how to pack name, metadata, and status into one scannable row.
+4. **Add a tab-bar filter with integrated counts** — because the floating “SHOW” pills are easy to miss and disconnected from the view chrome; Confluent’s (ref 4) Consume/Produce/Schema tabs with active underline are a clearer navigation model.
+5. **Replace full-width colored bars with 4px inline segmented micro-bars** — because a full-width bar for a single categorical value is visual noise; reduce to a micro-indicator that sits beside the name, freeing card height for actual content.
+
+---
+
+## 6. FINAL
+
+**ACCEPT-WITH-FIXES**
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V3-adversarial-brief.md b/.llm/runs/beta10--orchestrator/visual/_evals/V3-adversarial-brief.md
new file mode 100644
index 000000000..c0623c855
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V3-adversarial-brief.md
@@ -0,0 +1,21 @@
+You are an ADVERSARIAL design evaluator (opposite family from the designer). Be harsh. A designer just redesigned two dashboard routes — **Live Flow** (a causal journey) and **Run Inspector** (a run step-timeline). The owner's verdict: they look TOO SIMILAR — "a single round trip to take a few components and applied the same on both without even thinking." Your job: PROVE the structural sameness (or distinctness) from the CODE, and prescribe how to make each genuinely distinct per its feature.
+
+## Read
+- The prototype (single file): `/home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/render/prototype.dc.html` — grep it for the Live-Flow / Run-Inspector render sections and the CSS classes each screen uses. The component CSS is in `/home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/render/assets/ns-ext.css`.
+- The bar + rules: `/home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/visual/ROLLOUT-DOCTRINE.md`, `HOME-SPEC.md`, `DESIGN-LANGUAGE.md`.
+- The designer's own report: `/home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/render/_visual-reports/V3-investigation-spine.md`.
+
+## Evaluate (assume template-reuse until disproven)
+1. **Layout skeleton:** do both routes use the SAME grid (e.g. left rail + center + right rail, same column widths)? Same page-header pattern? List every shared layout structure with the class names / line evidence.
+2. **Hero pattern:** do both lead with the same kind of hero (e.g. an arc-gauge summary band — `ns-flowhero` vs `ns-runhero`)? Are these two near-copies of one pattern? 
+3. **Component palette:** which components are shared vs unique per screen? Is the "difference" only the data, not the composition?
+4. **Feature fit:** Live Flow should read as a CAUSAL MAP (spatial/graph), Run Inspector as a DENSE CONSOLE (table-forward). Does each screen's DOMINANT composition actually differ, or is it the same template twice?
+5. Bar check: per the doctrine, is each screen bespoke to its feature?
+
+## Output
+Write a prioritized FAIL list to `/home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/visual/_evals/V3-adversarial.md`:
+- A VERDICT (too-similar / distinct-enough) with confidence.
+- Every shared structure (with evidence: class names + approx line refs).
+- Concrete DIFFERENTIATION DIRECTIVES: exactly how to re-architect each route so they read as different features (different grid rhythm, different hero, different dominant component) while keeping the shared kit (chrome/pills/tables) for consistency.
+- Anything else below the reference bar.
+Be specific and evidence-based. State your model name at the top.
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V3-adversarial.md b/.llm/runs/beta10--orchestrator/visual/_evals/V3-adversarial.md
new file mode 100644
index 000000000..a14fec699
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V3-adversarial.md
@@ -0,0 +1,242 @@
+# V3 Adversarial Evaluation — Live Flow vs Run Inspector
+
+**Evaluator model:** moonshotai/kimi-k2.6  
+**Date:** 2026-07-14  
+**Bar:** `ROLLOUT-DOCTRINE.md` — *"each screen BESPOKE"*, *"NOT 'apply the Home kit uniformly' — that makes every screen look the same"*.
+
+---
+
+## VERDICT: **TOO SIMILAR** — Confidence: HIGH (85%)
+
+The owner nailed it. The designer did not design two different screens; they designed **one layout template** and swapped the data + a handful of inner components. The structural skeleton, hero anatomy, grid rhythm, page header, right-rail assist, and overall composition are near-identical. The "difference" is primarily in the *middle-body widget* (journey node-list vs step timeline), but the container around it is a carbon copy. Below is the evidence, then concrete directives to genuinely separate them.
+
+---
+
+## 1. Layout Skeleton — SHARED GRID, SAME RHYTHM
+
+Both screens resolve to the **same 3-zone console layout** with near-identical column widths.
+
+| Screen | Grid class | Breakpoints |
+|--------|-----------|-------------|
+| **Run Inspector** | `.ns-console-grid` | 1fr → `17rem 1fr` (≥1024) → `17rem 1fr 19rem` (≥1440) |
+| **Live Flow** | `.ns-flow-grid` | 1fr → `16rem 1fr` (≥1024) → `16rem 1fr 19rem` (≥1440) |
+
+Evidence — CSS:
+```css
+/* ns-ext.css:778-781 */
+.ns-console-grid { display: grid; gap: var(--ns-space-6); align-items: start; min-width: 0; }
+@media (min-width: 1024px) { .ns-console-grid { grid-template-columns: 17rem minmax(0, 1fr); } }
+@media (min-width: 1440px) { .ns-console-grid { grid-template-columns: 17rem minmax(0, 1fr) 19rem; }
+
+/* ns-ext.css:443-445 */
+.ns-flow-grid { display: grid; gap: var(--ns-space-5); align-items: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 1024px) { .ns-flow-grid { grid-template-columns: 16rem minmax(0, 1fr); } }
+@media (min-width: 1440px) { .ns-flow-grid { grid-template-columns: 16rem minmax(0, 1fr) 19rem; } }
+```
+
+The designer changed `gap` from `6` to `5` and shaved 1 rem off the rail. That is **not a bespoke layout** — it is the *same template with parametric tweaks*.
+
+**Also shared:**
+- Both use `<header class="ns-page-header ns-page-header--console">` → `<div class="ns-toolbar">` with title + lede on the left, actions/seg on the right.
+- Both left rails are `<aside style="min-width:0;display:grid;gap:var(--ns-space-3)">` containing filters + an entity list.
+- Both main sections are `<section style="min-width:0;display:grid;gap:var(--ns-space-5)">` containing a hero + a panel.
+- Both right rails are `<aside>` containing a detail card + assist card.
+
+Prototype evidence:
+- Run Inspector rail: `prototype.dc.html:869` (`aside` + filters + `ns-runtable`)
+- Live Flow rail: `prototype.dc.html:1832` (`aside` + filters + flow list)
+- Run Inspector main: `prototype.dc.html:914` (`section` + `ns-statstrip` + `ns-runhero` + `ns-panel`)
+- Live Flow main: `prototype.dc.html:1874` (`section` + `ns-flowhero` + `ns-panel`)
+- Run Inspector right rail: `prototype.dc.html:999` (`aside` + events + logstrip + assist)
+- Live Flow right rail: `prototype.dc.html:1964` (`aside` + `ns-seamrail` + assist)
+
+**Conclusion:** The skeleton is the same screen repainted twice.
+
+---
+
+## 2. Hero Pattern — NEAR-COPIES OF ONE ARC-GAUGE + KV PANEL
+
+`ns-flowhero` and `ns-runhero` share the **exact 2-column band anatomy** (gauge left, body right) with only cosmetic differences.
+
+| Property | `ns-flowhero` | `ns-runhero` | Verdict |
+|----------|--------------|--------------|---------|
+| Layout | `grid-template-columns: minmax(0,1fr)` → `10.5rem minmax(0,1fr)` @720px | `grid-template-columns: minmax(0,1fr)` → `9.5rem minmax(0,1fr)` @560px | Same pattern, 1 rem delta |
+| Gauge | `ns-gauge` + `__spine` dot strip | `ns-gauge` only | Flow adds a spine; Run omits it |
+| Body | `__top` → verdict badge + route + seg + btn | `__top` → name + status + kind badge | Same grid: name line, KV split, then footer |
+| KV | `ns-kv--split` (correlation / trace / seams cleared) | `ns-kv--split` (correlation / trace / started / elapsed) | **Identical component**, swapped keys |
+| Footer | `ns-splitbar` + dot legend | `ns-runstat` (3 tiles) | Only real difference |
+| Tokens | same `ns-gauge__of`, `ns-gauge__label`, `ns-radius-xl`, `ns-shadow-xs` | same | Same kit |
+
+Evidence — CSS:
+```css
+/* ns-ext.css:453 */
+.ns-flowhero { display: grid; gap: var(--ns-space-4); padding: var(--ns-space-4) var(--ns-space-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-card);
+  box-shadow: var(--ns-shadow-xs); grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 720px) { .ns-flowhero { grid-template-columns: 10.5rem minmax(0, 1fr); } }
+
+/* ns-ext.css:583 */
+.ns-runhero { display: grid; gap: var(--ns-space-4); padding: var(--ns-space-4) var(--ns-space-5);
+  border: 1px solid var(--ns-border); border-radius: var(--ns-radius-xl); background: var(--ns-card);
+  box-shadow: var(--ns-shadow-xs); grid-template-columns: minmax(0, 1fr); }
+@media (min-width: 560px) { .ns-runhero { grid-template-columns: 9.5rem minmax(0, 1fr); } }
+```
+
+These are the **same rule blocks** with class names and two numeric constants changed. The designer even copy-pasted the inline comment structure.
+
+**Doctrine violation:** The doctrine says *"ask the design question FIRST … what tailored components best showcase THIS feature"*. The answer for a **causal spatial map** should NOT default to the same 2-column arc-gauge summary band as a **dense step-timeline console**. A causal map deserves a horizontal topology / node-graph canvas feel; a console deserves a stat-strip-forward, breadcrumb + tab-row rhythm.
+
+---
+
+## 3. Component Palette — Shared Kit Swamped Bespoke Parts
+
+| Component | Live Flow | Run Inspector | Shared? |
+|-----------|-----------|---------------|---------|
+| Page header (`ns-page-header--console` + `ns-toolbar`) | ✅ | ✅ | **YES** |
+| Left rail (`aside` + filters + entity list) | ✅ | ✅ | **YES** |
+| Hero band (arc gauge + KV + footer row) | `ns-flowhero` | `ns-runhero` | **Anatomy identical** |
+| Main content panel (`ns-panel` with header border-bottom) | ✅ | ✅ | **YES — same inline style block** |
+| Right rail detail card + assist | `ns-seamrail` + assist | events + logstrip + assist | **Assist card is shared** |
+| Segmented switch (Journey / Inspector) | ✅ | ✅ | **YES** |
+| `ns-kv--split` | ✅ | ✅ | **YES** |
+| `ns-gauge` | ✅ | ✅ | **YES** |
+| Status pills / badges | ✅ | ✅ | **YES** |
+| `ns-seg` (All / Compact / JSON or Journey / Inspector) | ✅ | ✅ | **YES** |
+| **Bespoke main widget** | `ns-journey--rich` (node-graph list) | `ns-step-timeline--data` | NO — genuinely different |
+| `ns-statstrip` | ❌ | ✅ | NO — console strip is unique to Run |
+| `ns-runtable` | ❌ | ✅ | NO — console table is unique to Run |
+| `ns-fanout`, edge labels, spawn hints | ✅ | ❌ | NO — flow-unique |
+| `ns-logstrip` | ❌ | ✅ | NO — run-unique |
+
+**Problem:** The *shared* components form the **visual frame** (chrome, header, hero, rails, assist). The eye processes the frame first. Because the frame is identical, both screens read as the *same feature* before the user ever reaches the bespoke middle widget.
+
+The designer's report claims they "composed" through a shared correlation KV + segmented switch + reciprocal deep-links. That is correct as a *navigation* story, but it is a **failure as a visual identity story** — navigation consistency does not excuse layout cloning.
+
+---
+
+## 4. Feature Fit — Does the DOMINANT Composition Differ?
+
+### Live Flow (should read as: **spatial causal map / node-graph**)
+Current dominant composition:
+1. Vertical list of card-row nodes inside a panel (`ns-journey--rich`)
+2. A small arc-gauge hero band above it
+3. Right-rail properties panel (desktop)
+
+This is **not a map**. It is a **vertical stack**. The designer added edge labels (`ns-journey__edge`) and a mini spine in the hero, but the *dominant visual* is still a top-to-bottom list in a bounded card panel — the same reading direction as a timeline. The node-graph "feel" the designer claims is achieved through caption pills and a selected-node ring, but the **layout grammar is still list-like, not graph-like**.
+
+A causal journey should feel **horizontal or networked**, not a scrollable column. The ref mined for this was `21-flow-builder` ("node-graph canvas"), yet the implementation is a vertical list with connector lines — a weak translation.
+
+### Run Inspector (should read as: **dense console / table-forward**)
+Current dominant composition:
+1. Arc-gauge hero band (same as flow)
+2. Console stat strip (`ns-statstrip`)
+3. Step timeline in a panel
+4. Right-rail events + logs
+
+This is closer to its feature — the stat strip and run table are console-appropriate. BUT the arc-gauge hero is the *same visual anchor* as Live Flow. When you switch between the two via the segmented control, the eye lands on the **same hero shape** and thinks "same screen, different data."
+
+The doctrine references `11-devconsole` for the inspector: "breadcrumb + tab row + stat strip + dense table." The designer took the stat strip but **ignored the breadcrumb + tab-row chrome**, opting instead for the shared hero template.
+
+---
+
+## 5. Bar Check — Doctrine Compliance
+
+`ROLLOUT-DOCTRINE.md` rule #1:
+> *"What tailored components, layout, composition, data visualization, and data structure best showcase THIS feature — and how do they compose together?"*
+
+The designer asked the question and wrote the right answer (spatial map vs vertical timeline). The **implementation betrayed the answer** by forcing both answers into the same `ns-*hero` + `ns-panel` + 3-column grid mold.
+
+Rule #4:
+> *"Reuse the shared kit + chrome for consistency … but each screen adds its OWN tailored components so no two screens read the same."*
+
+**FAIL.** The screens DO read the same at the layout/hero level. The "own tailored components" exist only in the middle-body widget, which is below the fold on mobile and visually subordinate to the hero on desktop.
+
+Rule #2:
+> *"Mine a DIFFERENT reference each pass."*
+
+The designer mined `04-finance-cards` for BOTH heros (arc gauge). The arc gauge is great for one, but using it for both is a reuse shortcut, not a bespoke choice. They mined `01-synergy-hr` for BOTH KV split-panels. They mined `11-devconsole` for the Run Inspector console table but **did not let that reference re-architect the top of the screen**.
+
+---
+
+## PRIORITIZED FAIL LIST & CONCRETE DIFFERENTIATION DIRECTIVES
+
+### P0 — Re-architect the heroes so they do NOT mirror each other
+
+**Live Flow hero:**
+- **Kill the arc-gauge hero entirely.** A causal map should lead with a **horizontal topology summary** — a mini node-graph strip (the 5 seam nodes laid out left-to-right, not top-to-bottom) showing the *shape* of the journey at a glance.
+- Replace the 2-column band with a **full-width horizontal composition**: left = route/method badge, center = the horizontal node-strip with edge connectors, right = verdict + outcome split.
+- The spatial map's hero should scream "flow left-to-right." An arc gauge screams "progress to completion." Those are different mental models.
+
+**Run Inspector hero:**
+- Keep or evolve the stat strip, but **drop the arc gauge** or reduce it to a micro ring next to the run name — NOT a 10.5rem left column that mirrors the flow hero.
+- Lead with **breadcrumb** (`runs › job › attempt 2`) + a **tab row** (Steps / Logs / Input / Diff) per ref 11. The hero space should be dominated by the **stat strip + breadcrumb + tab row**, not by a gauge that competes with the step timeline below.
+- Make the run table the **dominant surface**, not a left-rail widget. Per ref 11, the Conduktor console puts the sortable table front-and-center with a right detail drawer. The current design buries the run table in the narrow left rail.
+
+### P1 — Change the grid rhythm per screen
+
+**Live Flow:**
+- Abandon the 3-column console grid. A spatial map needs **more horizontal room**.
+- Move to a **2-column layout**: left = collapsible seam list (not a rail, a list), center = the journey canvas with room for **horizontal fan-out**.
+- On desktop ≥1440, use a **drawer that slides from the right** only when a node is selected, rather than a permanent 19rem rail that competes with the journey width.
+- The journey itself should be the **largest visual element**, not a panel inside a center column.
+
+**Run Inspector:**
+- Lean IN to the console grid, but make it **table-forward**.
+- Promote the run list from the left rail to a **full-width sortable console table** above the step detail.
+- Use the left rail for **filters + runtime chips + a slim version list**, not for the primary data table.
+- Right rail = detail drawer for the selected step/run (ref 11). Ensure the run table gets the visual weight.
+
+### P2 — Differentiate the page header / chrome
+
+**Live Flow header:**
+- Remove the segmented switch from the header area (or make it a subtle icon toggle).
+- Add a **live feed toolbar** (`ns-livedot`, follow switch, new-pill) — which it already has, but this should be the *dominant chrome*, not cluttered alongside the Journey/Inspector seg.
+- The header should emphasize the **streaming / live** nature: a liveness indicator, a route filter, and a "raw trace" out-link. It should feel like a **live observability surface**, not a console admin page.
+
+**Run Inspector header:**
+- Add a **breadcrumb** (`Correlated runs › ch_3QK9… › job_4183`) as the first visual line per ref 11/12/13.
+- Keep the segmented switch but move it **into the tab row** inside the main content, not in the page header where it mirrors Live Flow's switch.
+- Add an **env indicator** or **version dropdown** per ref 13 if applicable (runtime version of the run).
+
+### P3 — Ensure the dominant component is visually dominant
+
+**Live Flow:**
+- The `ns-journey--rich` should **break out of the `ns-panel` bounding box**. Panels with `border-radius-xl` and `1px solid var(--ns-border)` feel like cards. A causal map should feel like a **canvas** — full edge-to-edge within its container, with nodes floating in space.
+- Make the **fan-out visual** larger and more central. The current `ns-fanout` is a small pill row under one node. If fan-out is a key feature, give it spatial room — maybe a T-junction connector that branches visibly.
+
+**Run Inspector:**
+- The step timeline is appropriate, but the compensation branch should be even more visually distinct — perhaps a **reversed color wash** on the whole right side of the timeline, not just a left border.
+- The `ns-logstrip` should sit **adjacent to the timeline**, not below it in a separate rail. In a dense console, logs and steps are read together vertically.
+
+### P4 — Shared kit audit — tighten what is truly shared
+
+| Shared element | Keep? | Rationale |
+|----------------|-------|-----------|
+| `ns-page-header--console` | Yes, but **vary internal layout** | Chrome consistency is fine; internal arrangement should differ |
+| `ns-assist` | Yes | Shared AI card is acceptable as a global component |
+| `ns-kv--split` | Yes, but **position it differently** | Shared component, different visual weight (Flow: under hero; Run: in drawer) |
+| `ns-gauge` | **NO — in at least one hero** | Remove from one screen or demote to micro size |
+| `ns-panel` | Yes, but **vary border/radius treatment** | Panel chrome is fine, but don't clone the same header inline style everywhere |
+| `ns-seg` | Yes | Navigation bridge between the two is correct |
+| Arc-gauge-as-hero | **NO** | This is the #1 similarity trigger |
+
+---
+
+## Anything Else Below the Bar
+
+1. **Mobile stacking is identical.** Both reflow to: rail → hero → main widget → right-rail stuff → assist. The doctrine requires dedicated bottom sheets for detail/actions. Live Flow does this (`ns-seamrail` collapses to sheet), but Run Inspector doesn't — its right-rail events/logs just stack below. Run Inspector on mobile should use a **bottom sheet for step detail / logs**, not a long scroll stack.
+
+2. **`ns-panel__header` is copy-pasted across both.** Look at the inline style on both panels:
+   - Run Inspector: `prototype.dc.html:955` (`padding:var(--ns-space-3-5) var(--ns-space-5);border-bottom:1px solid var(--ns-border);flex-direction:row;align-items:center;gap:var(--ns-space-3);flex-wrap:wrap`)
+   - Live Flow: `prototype.dc.html:1918` (`padding:var(--ns-space-3-5) var(--ns-space-5);border-bottom:1px solid var(--ns-border);flex-direction:row;align-items:center;gap:var(--ns-space-3);flex-wrap:wrap`)
+   This is character-for-character identical. If the panel headers are the same, the panels read the same.
+
+3. **The assist card is copy-pasted.** Both right rails end with the same `ns-panel` → `ns-assist` structure with the same three `.ns-ai-chip` buttons (`Explain this failure`, `Draft a fix`, `Compare with last success`). The assist content itself is data-driven, but the **composition is identical**.
+
+4. **Color story is identical.** Both use the same tone-tinted chip pattern (success/warning/destructive borders) for status. The doctrine allows shared kit, but when the *same accent treatment* is applied to seam-value chips (Flow) and step-datum chips (Run), the visual vocabulary collapses into one language. The Run Inspector's datum chips should lean **console/monospace-dense** (no rounded pill borders, flatter) to signal "console output" rather than "card status."
+
+---
+
+## Summary
+
+The designer produced **half a bespoke design** — the inner widgets (`ns-journey--rich`, `ns-step-timeline--data`) are genuinely tailored. But the **frame, hero, grid, header, and right-rail assist** are a single template applied twice. The owner's critique is fully supported by the code evidence. To pass the bar, each screen needs its **own layout rhythm and its own hero architecture** while sharing only the low-level chrome (sidebar, topbar, tokens, pills, buttons). The arc gauge cannot anchor both screens. The 3-column console grid cannot be the universal answer.
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V3-vision-eval.md b/.llm/runs/beta10--orchestrator/visual/_evals/V3-vision-eval.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V4b-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V4b-adversarial-vision.md
new file mode 100644
index 000000000..6594520c7
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V4b-adversarial-vision.md
@@ -0,0 +1,68 @@
+
+> build · moonshotai/kimi-k2.6
+
+moonshotai/kimi-k2.6
+
+## 1. BESPOKE VERDICT
+
+**Score: 74 / 100**
+
+This is **feature-tailored information architecture wearing generic dashboard clothing**.
+
+What makes it unmistakably saga-specific:
+- The canvas is explicitly bisected into **"FORWARD PATH"** and **"COMPENSATION · ROLLBACK LANE"** labels (Image 1, center-left), with nodes named *charged*, *reserving*, *refund*, and *settled* wired accordingly.
+- The right panel contains a semi-circular **"2/4 STATES"** gauge and a dedicated **"Why is this compensating?"** callout that grounds the saga logic in a real failure mode (*E_TIMEOUT against the redis pool*).
+- The bottom **"Step timeline"** prints saga-native metadata: *compensating step 2*, *retried once*, and a linked execution ID (*job_4183*).
+
+What drags it back toward "template":
+- The four top metric cards (**INSTANCES 4 / COMPENSATING 1 / COMPLETED 1 / FAILED 1**) are indistinguishable from any generic status dashboard.
+- The left sidebar is a standard vertical dot-nav with counts.
+- The 5 canvas nodes are identical white rounded rectangles (~120×80px) differentiated only by an 8px colored status dot and a tiny icon—nowhere near the strong chromatic/node-type identity of a purpose-built flow builder.
+
+## 2. DENSITY / DEAD-SPACE
+
+**The canvas is roughly 75–80% empty dotted grid.**
+
+In Image 1, the canvas region (bounded by the instance chips at top and the **"Step timeline"** header at bottom, spanning roughly the center-left 60% of the viewport) contains only **5 small cards** and **3 thin arrows**. The grey dotted grid is visible in every direction around, between, and below the nodes—there is no texture, annotation, or secondary data layer filling that void.
+
+**Verdict: Unacceptable** against the "dense, no dead space" doctrine.
+
+Contrast with REFERENCE 21 (Image 4): the n8n canvas is saturated with **11+ vividly colored nodes**, text labels on every connector, and a persistent bottom toolbar. Even its whitespace feels like active workspace because the graph sprawls to own it. The Sagas canvas, by comparison, looks like a small diagram pasted into an oversized empty box.
+
+## 3. FILL THE VOID
+
+**a) Definition Mini-Map with Active Path Overlay** *(from REF 21's sprawling graph density + flow-builder navigator pattern)*  
+Place a compact thumbnail (~200×120px) in the bottom-right of the canvas showing the full saga *definition* topology; overlay the current instance path in amber/teal. Adapts the bird's-eye view so developers see where the current 5-node subset lives inside the whole state machine.
+
+**b) Per-Lane Compensation-Health Stat Strip** *(from REF 11's "RECORDS 260 / TOPIC SIZE 1MB / PARTITIONS 7" metric strip)*  
+Float a slim bar directly under the **"FORWARD PATH"** and **"COMPENSATION · ROLLBACK LANE"** headers showing avg latency, retry rate, and compensation success % for the selected saga type. Adapts REF 11's stat bar to saga lanes, turning plain lane labels into data-rich headers.
+
+**c) Rich Edge Annotations with Error Badges** *(from REF 21's labeled connectors like "Welcome Message" / "No Thanks")*  
+Enlarge the thin arrow labels ("enqueue job", "on reserve") to carry payload snippets and error badges (e.g., **"E_TIMEOUT"** directly on the *reserving → refund* wire). Adapts REF 21's edge-label pattern so the canvas itself explains *why* compensation fired, offloading the side panel.
+
+**d) Inline Execution Rail / Playhead** *(from REF 21's step sequence rhythm)*  
+Dock a vertical 40px rail along the left edge of the canvas showing all 5 steps as small pips (pending → charged → reserving → refund → settled), with the current step enlarged. Adapts timeline/playhead concepts so the dead left margin becomes a scrubbable navigation aid.
+
+**e) Ghost Node Outlines for Queued/Blocked States** *(from REF 21's visible future branches)*  
+Render downstream blocked/queued states (e.g., *notify*) and terminal states (e.g., *settled*) as 30%-opacity wireframes wired into the graph. Adapts REF 21's habit of exposing full topology so the canvas communicates saga *scope*, not just executed history.
+
+## 4. VARIETY LEVERAGE
+
+**Sortable, Columnar Data Table with Inline Filters** *(REFERENCE 11, Image 5)*  
+The Sagas **"Step timeline"** (Image 1) is a vertical bullet list with oversized whitespace between items. REF 11 shows a tight, sortable table with **Timestamp/Offset/Partition/Key/Value** columns and a **"+ Add JS filter"** action bar. A saga debugger needs to scan step history fast; the current airy list is the wrong pattern for event-oriented debugging density.
+
+**Tabbed Sub-Navigation Inside Detail Panels** *(REFERENCE 11's Consume/Produce/Configuration/Schema/ACL tabs; REF 21's right-panel sections)*  
+The right properties panel in Image 2 dumps **State / Transitions / Payload / Actions** into one long monolithic scroll. REF 11's right drawer uses **Basics/Parameters/Functions/Examples** tabs to compartmentalize complexity. Sagas should use tabs (e.g., **State / Payload / History / Trace**) to keep debug data scannable and prevent the "infinite scroll" anti-pattern.
+
+**Strong Node Visual Identity via Color & Icon Blocking** *(REFERENCE 21, Image 4)*  
+In REF 21, node types are instantly recognizable: **green** Start Point, **purple** Message Response, **blue** AI Assistant. Sagas nodes (Image 1) are visually homogeneous white cards with tiny 8px dots. Forward-path nodes should adopt a consistent **teal fill**, compensation nodes a **copper fill**, and terminal nodes a **neutral fill**—matching the premium craft standard of REF 21 and making the canvas scannable at a glance.
+
+## 5. TOP 3 FIXES
+
+1. **Fill the ~78% empty canvas grid with a definition mini-map and a per-lane compensation-health stat strip** — because a canvas that is mostly bare dotted background violates the "dense, no dead space" doctrine and looks like a generic diagram pasted into an empty dashboard shell.
+2. **Replace the bottom Step timeline bullet-list with a tight, sortable table using column headers (step, timestamp, duration, error, attempt)** — because the current list devours vertical space with oversized timeline markers and low scan-ability, and REF 11 proves a dense columnar table is the correct pattern for debugging event streams.
+3. **Split the right detail panel into tabs (State / Transitions / Grounded Evidence / Actions)** — because the current single-scroll dump buries the critical *"Why is this compensating?"* explanation and the *"Retry this step"* button under unrelated metadata, whereas REF 11's tabbed drawer keeps complex debug context organized and accessible.
+
+## 6. FINAL
+
+**ACCEPT-WITH-FIXES**
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V4b-fix-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V4b-fix-adversarial-vision.md
new file mode 100644
index 000000000..96cc2ec80
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V4b-fix-adversarial-vision.md
@@ -0,0 +1,69 @@
+
+> build · moonshotai/kimi-k2.6
+
+moonshotai/kimi-k2.6
+
+## 1. BESPOKE VERDICT (0–100)
+
+**82** — The core is genuinely feature-tailored, but the chrome around it drops the score.
+
+**Tailored:** The state-machine canvas is bespoke: distinct node shapes per state (`charged` with a teal checkmark, `reserving` with an amber gear and an `E_TIMEOUT` badge, `refund` with a red undo icon), color-coded forward vs. compensation edges (teal vs. amber), the `COMPENSATION · ROLLBACK LANE` label, the bottom-left canvas legend (`forward / compensation / terminal / ghost scope`), and the right-panel gauge (`2/4 STATES`) that morphs into a forward-state inspector when a node is clicked. The instance detail panel is contextual: selecting `reserving` surfaces attempt counters (`2/3`), lane labels, and payload JSON specific to that state — this is not a swapped template.
+
+**Generic/chrome:** The four top metric cards (`Compensation Rate`, `In-Flight`, `Instances by State`, `Forward · Rollback Edges`) are standard dashboard stat widgets. The `Instances by State` microscopic bar is decorative more than informative. The Step history is a plain table with no sort controls. The Transition stream is a sparse icon list. The mobile bottom sheet is a generic form sheet with a single full-width `Retry this step` button. These read as reused dashboard fill-in.
+
+---
+
+## 2. DENSITY / DEAD-SPACE
+
+| Major region | Empty/low-info estimate | Verdict |
+|---|---|---|
+| Top metric bar (4 cards) | ~20% (generous internal padding; unused right side of Edges card) | Borderline — should be a single fused bar |
+| State-machine canvas | <5% (nodes, edges, labels, legend fill the area) | Passes |
+| Right detail panel (desktop) | ~15% (gauge has padding; explanation block is a text wall) | Passes, barely |
+| Bottom split (Step history + Transition stream) | ~10% | Passes |
+| Mobile bottom sheet | ~25% (airy vertical spacing between capability/timing/attempt rows; transitions list is sparse) | **Fails** dense criterion |
+
+**Contrast with references:**  
+Reference `11-devconsole-a.png` packs its Kafka record table with tight row heights and inline filter controls — the Sagas Step history does not match that density. Reference `21-flow-builder.webp` maintains a similarly dense canvas but adds a bottom mini-map/toolbar so the user never loses spatial context; Sagas lacks this orientation aid, making the canvas feel slightly unmoored despite its node density.
+
+---
+
+## 3. COMPONENT PRESCRIPTION TABLE
+
+| # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to Sagas |
+|---|---|---|---|---|---|
+| 1 | Top four stat cards (`Compensation Rate`, `In-Flight`, `Instances by State`, `Edges`) | Isolated dashboard stat cards with excessive padding; no interactivity | The unified metric tile row `RECORDS 260 / TOPIC SIZE 1MB / PARTITIONS 7 / REPLICATION FACTOR 3` | `11-devconsole-a.png` — the horizontal metric bar beneath the topic tabs (`Consume`, `Produce`, etc.) | Merge the four cards into a single filter bar where clicking `failed 1` or `4` edges instantly filters the canvas instance list |
+| 2 | `Instances by State` tiny segmented bar | Microscopic bar chart with unreadable proportions; acts like decoration | The colored status-badge pills `In Progress` / `Pending` / `Completed` with rounded backgrounds | `19-pm-dashboard.png` — the `Status` column in the `My Projects` table | Replace the bar with a row of large, clickable status chips: amber `compensating 1`, teal `in flight 1`, red `failed 1`, matching the pill shape and saturation |
+| 3 | Step history table | Plain HTML table with no sort controls or inline search | The Kafka record table with sort-arrow column headers, `Quick search` field, `Show from` dropdown, and `Max results` selector | `11-devconsole-a.png` — the record list under the `Consume` tab | Add sortable headers to `Timestamp`, `Duration`, `Attempt`, inline search by step name, and pagination controls |
+| 4 | Transition stream | Sparse vertical list with only an icon + text per line; wastes full panel width | The Schedule event list with vertical timeline connectors, colored left bars, avatar stacks, and time ranges | `19-pm-dashboard.png` — the `Schedule` section showing `Kickoff Meeting`, `Create Wordpress website`, etc. | Draw a vertical timeline down the stream with causality lines, state-change icons, and retry loops visually nested under their parent step |
+| 5 | `Payload at state` raw JSON block | Gray box with unformatted JSON; unscanable | The `Filter code` textarea with syntax highlighting, comment support, and a collapsible `Documentation` sidebar with `Basics / Parameters / Functions / Examples` tabs | `11-devconsole-a.png` — the `Add JS filter` right-hand panel | Make payload a syntax-highlighted, collapsible JSON editor with a schema/docs sidebar and a `Copy` action |
+| 6 | Right-panel actions (`Retry this step`) | Single generic full-width button; misses adjacent power actions | The `Add Responses` icon-button grid (`Text`, `Image`, `Gallery`, `Button`, `Quick Reply`) in a dashed container | `21-flow-builder.webp` — the bottom of the right config panel under `Message Response` | Add a horizontal action palette: `Retry`, `Force Advance`, `Skip Compensation`, `View Logs` as icon buttons in a row |
+| 7 | Canvas zoom controls | Only `- / 100% / +`; no fit, no mini-map, no context | The bottom toolbar with hand tool, zoom slider, fit button, and `Ask AI` magic wand | `21-flow-builder.webp` — the bottom-center toolbar (`- 100% +`, hand, comment, `Ask AI`) | Add a `fit to view` button and a canvas mini-map in the bottom-right showing the full saga graph with current path highlighted |
+| 8 | `Why is this compensating?` text wall | Paragraph text with a single tag; low information density | The Notes checklist with colored status dots, bold titles, and threaded descriptions | `19-pm-dashboard.png` — the `Notes` panel (`Landing Page For Website`, `Fixing icons with dark backgrounds`, `Discussion regarding userflow improvement`) | Convert to a diagnostic checklist: red-dot `reserve failed · E_TIMEOUT`, yellow-dot `job_4183 attempt 2/3`, each expandable with evidence links |
+
+---
+
+## 4. VARIETY LEVERAGE
+
+Four patterns visible in the references that this screen does not use but should:
+
+1. **Decision-branch labels on connectors** (`21-flow-builder.webp`, edge labels like `Welcome Message`, `Get 30% Off`, `No Thanks` in light-gray pills directly on connector lines). Every saga transition edge should carry its trigger/event label in a pill on the line itself, not floating ambiguously nearby.
+2. **Weekly schedule strip + timed event cards** (`19-pm-dashboard.png`, the `Schedule` section with `Mo 15 / Tu 16 / We 17` selector and time-ranged event cards). Apply to the Step history: replace the flat table with a chronological timeline that maps saga steps to actual clock times, showing parallel branches as overlapping schedule blocks.
+3. **JS filter slide-out with live docs** (`11-devconsole-a.png`, the `Add JS filter` panel with a code body input and a `Documentation` tab set). Use as a `Query instances` side panel where developers write JS predicates to filter saga instances by payload fields, with live schema docs — turning the sidebar from read-only into an operational tool.
+4. **Threaded notes with completion dots** (`19-pm-dashboard.png`, the `Notes` checklist with colored circles and multi-line descriptions). Add an `Annotations` panel pinned to states so teams can leave durable context on why a compensation was triggered or a step retried.
+
+---
+
+## 5. TOP 5 FIXES
+
+1. **Merge the four isolated stat cards into a unified metric filter bar** (like `11-devconsole-a`'s `RECORDS 260 / TOPIC SIZE 1MB` row) so clicking `failed 1` filters the canvas — isolated cards waste horizontal space and don't act as controls. *(tied to density)*
+2. **Rebuild the transition stream from a sparse icon list into a vertical timeline with connector lines and timed events** (like `19-pm-dashboard`'s `Schedule` list) — the current list hides causality and wastes the full width of the panel. *(tied to density)*
+3. **Replace the `Payload at state` raw JSON block with a syntax-highlighted editor and documentation sidebar** (like `11-devconsole-a`'s `Add JS filter` panel) — raw JSON is unscanable at a glance. *(tied to 11)*
+4. **Add a bottom canvas toolbar with fit-to-view, a mini-map, and an Assist button** (like `21-flow-builder`'s bottom controls) — the canvas currently gives no spatial context of where the user is in the overall graph. *(tied to 21)*
+5. **Replace the single `Retry this step` button with a horizontal icon-button palette for multiple state actions** (like `21-flow-builder`'s `Add Responses` row) — one button underserves power users who need `Force Advance` or `View Logs` adjacent to retry. *(tied to 21/density)*
+
+---
+
+## 6. FINAL
+
+ACCEPT-WITH-FIXES
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V5-triggers-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V5-triggers-adversarial-vision.md
new file mode 100644
index 000000000..35d0541ca
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V5-triggers-adversarial-vision.md
@@ -0,0 +1,96 @@
+
+> build · moonshotai/kimi-k2.6
+
+moonshotai/kimi-k2.6
+
+## 1. BESPOKE VERDICT — 55 / 100
+
+**Tailored (what works):**
+- The four category cards with micro bar-charts (`Schedule`, `Webhook`, `Event`, `Manual`) are feature-specific; the color-coding by trigger type (copper, teal, amber, grey) is a genuinely bespoke taxonomy.
+- The `Rule builder` strip (`webhook.payment`) with its split WHEN/DO boxes and the `if signature valid` condition chip is tailored to the trigger mental model.
+- The 7-day `Schedule & next fires` horizon strip (TUE 14 … MON 20) with dotted POLL bars is a good trigger-specific calendar view.
+
+**Generic / template (what drags it down):**
+- The `Firing history` table is a stock admin-table: sort headers, row striping, status badges (`COMPLETED`, `SKIPPED`, `PROCESSED`). It could be lifted from any CRUD generator.
+- The detail drawer (`file-watch.config`) and mobile sheet (`webhook.payment`) are generic property sheets: label/value rows, a flat `Action chain` bullet list, and two full-width buttons. Zero chrome that says "trigger."
+- The `Action Types` row (`publish saga`, `enqueue job`, etc.) is a set of flat, bordered pill buttons with no visual hierarchy or node metaphor.
+- The top stats row (`TRIGGERS 8`, `ARMED 7`, `SILENCED 1`, `FIRES · 24h 4.1k`, `DLQ DEPTH 17`) is pure dashboard boilerplate—five grey boxes with big numbers.
+- The `Dead letters` panel is two progress bars with text labels; it reads like a generic monitoring widget.
+
+---
+
+## 2. DENSITY / DEAD-SPACE
+
+| Region | Empty / low-info estimate | Verdict |
+|---|---|---|
+| Top stats row (`TRIGGERS`…`DLQ DEPTH`) | ~25% | Fails — five equal boxes waste horizontal space; the numbers are visually small inside large grey cards. |
+| Category cards (`Schedule`…`Manual`) | ~30% | Fails — the `Manual` card is almost entirely hollow: a dashed line placeholder, "1 SILENCED", and "0 fires". The other three have large header padding. |
+| Rule builder (`webhook.payment`) | ~15% | Acceptable — the WHEN/DO boxes have padding but are functionally dense. |
+| Action Types (`publish saga`…) | ~20% | Fails — a single row of pills with huge vertical padding inside a full-width panel. |
+| Schedule & next fires | ~20% | Borderline — the 7-day boxes are fine, but the three schedule cards (`cron.nightly-reconcile` etc.) below have oversized internal padding and tiny text. |
+| Firing history table | ~10% dense rows, ~40% low-info per row | Fails — the `LATENCY` column is mostly empty dashes; `OUTCOME` is repetitive badge noise; toggles on the far right are isolated. |
+| Webhook ingress test | ~20% | Acceptable — payload box is reasonably filled. |
+| Dead letters | ~25% | Fails — two bars with labels in a mostly empty panel. |
+
+**Contrast with references:**
+- `11-devconsole-a` packs a stats bar, a filter toolbar, a dense data table, and a full code-editor side panel into the same vertical real estate this screen uses for just the stats + category cards.
+- `19-pm-dashboard` fills its schedule widget with stacked, color-coded time blocks and avatars; the Triggers schedule cards are comparatively barren.
+- `21-flow-builder` has zero dead space: every pixel is node, connection, or toolbar chrome.
+
+---
+
+## 3. COMPONENT PRESCRIPTION TABLE
+
+| # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to Triggers |
+|---|---|---|---|---|---|
+| 1 | **Firing history** table — sortable rows with `Trigger`, `Type`, `Last Fired`, `Next Fire`, `Outcome`, `Latency`, `24h` columns | A stock data grid with no trigger-specific chrome; latency column is often empty dashes. | A dense **log stream table** with an inline toolbar: `Quick search...`, `Show from: Latest` dropdown, `Max results: 100` dropdown, `+ Add JS filter` button, and a slide-out **code filter panel** with a syntax-highlighted editor + `Documentation` tabs (`Basics`, `Parameters`, `Functions`, `Examples`). | `11-devconsole-a.png` — the topic records table header + the `Add JS filter` right-side panel with filter code textarea and Documentation tabs. | Replace the history table header with the inline search/filter toolbar. Clicking a row or a filter button opens a right drawer where users can write a JS predicate over trigger payloads, with inline docs explaining the event schema. |
+| 2 | **Rule builder** — flat `WHEN` and `DO` grey boxes with text labels and a single condition chip (`if signature valid`) | It looks like a form, not a rule chain. No visual sense of "flow" from event to action. | A **horizontal mini node graph**: event nodes (rounded cards with type icon) connected by Bézier wires, with branching for conditions. | `21-flow-builder.webp` — the main canvas with `Start Point` → `Message Response` → `AI Assistant` nodes, plus the decision diamonds (`Get 30% Off` / `No Thanks`). | Lay out the rule as a read-only node strip: `PaymentWebhookReceived` (event node) → `signature valid` (condition diamond) → `publish saga` (action node). Hovering a node reveals its config. |
+| 3 | **Action Types** row — flat pill buttons (`publish saga`, `enqueue job`, `execute task`, `execute batch`) | Indistinguishable from any tag list; no affordance for building or ordering actions. | A **bottom node palette toolbar**: a horizontal strip of draggable/clickable node type cards with icons (e.g., Text, Image, Gallery, Button, Quick Reply). | `21-flow-builder.webp` — the bottom toolbar with `Text`, `Image`, `Gallery`, `Button`, `Quick Reply` rounded icon cards, plus zoom controls. | Place the action-type palette at the bottom of the Rule builder panel. Each action type is a铜/amber/teal icon card. Clicking one appends a new node to the rule chain and animates it in. |
+| 4 | **Stats header row** — `TRIGGERS 8`, `ARMED 7`, etc. | Generic metric cards; no icons, no sparklines, no contextual grouping. | A **greeting + summary stats bar**: icon-titled metrics with inline micro-charts and human-readable labels. | `19-pm-dashboard.png` — the top bar under the greeting: `12hrs Time Saved`, `24 Projects Completed`, `7 Projects In-progress`, each with an icon and compact layout. | Replace the five boxes with a single row: "8 Rules" (list icon), "7 Armed" (shield icon + micro sparkline), "1 Silenced" (mute icon), "4.1k Fires" (flame icon + trend), "DLQ 17" (alert icon). |
+| 5 | **Dead letters** panel — two amber/grey progress bars (`redis DLQ 14`, `memory DLQ 3`) | Low information density; bars alone don't tell you what failed or why. | A **compact dead-letter stream table**: rows of failed events with `Timestamp`, `Key`, `Error`, `Retry Count`, and inline `Reprocess` / `Inspect` actions, styled like a Kafka record log. | `11-devconsole-a.png` — the main records table with columns `Timestamp`, `Offset`, `Partition`, `Key`, `Value` and sortable headers. | Show the last 5 dead letters as a mini table (not bars). Each row shows trigger name, error snippet, time, and a one-click "Retry" icon. The `top offender` line becomes a header link to a filtered view. |
+| 6 | **Schedule & next fires** — 7 grey day-boxes + three text cards (`cron.nightly-reconcile` etc.) | The calendar boxes are fine, but the schedule cards below are plain text with no temporal visualization. | A **timeline block schedule**: vertical list of events with color-coded left-border status bars, time ranges, and stacked avatars/icons. | `19-pm-dashboard.png` — the `Schedule` widget with `Kickoff Meeting` (green bar, 01:00 PM to 02:30 PM, avatars), `Create Wordpress website...` (blue bar, avatars). | Render each upcoming trigger as a schedule block: left color bar indicating trigger type (copper=cron, teal=poll), time window, rule name, and a small latency sparkline. |
+| 7 | **Category cards** — four equal boxes, one (`Manual`) almost empty | 25%+ dead space; the `Manual` card is a void. | A **project-style summary table**: compact rows with trigger type icon, count, last fired, next fire, and status badge. | `19-pm-dashboard.png` — the `My Projects` table with `Task Name`, `Assign`, `Status` badges (`In Progress`, `Pending`, `Completed`), and inline icon metadata. | Collapse the four cards into a single "Trigger Types" panel: rows for Schedule (3 armed, next in 18s), Webhook (1 armed, last 13:59), Event (3 armed), Manual (1 silenced). Much denser, zero empty states. |
+| 8 | **Detail drawer / Mobile sheet** — label/value list + flat `Action chain` bullets + two buttons | Sparse, form-like, and visually identical to any object inspector. | A **tabbed side inspector** with `Overview`, `Payload`, `History` tabs; the `Payload` tab uses a **syntax-highlighted JSON editor**; the `History` tab uses the record table pattern; and a collapsible `Documentation` footer. | `11-devconsole-a.png` — the `Add JS filter` panel has `Filter code` editor + `Basics` / `Parameters` / `Functions` / `Examples` tabs. | The drawer should open with tabs. The `Action chain` tab shows nodes, not bullets. The `Payload` tab shows the last event JSON in a code editor with line numbers. The `History` tab shows the last 10 firings in a mini table. |
+| 9 | **Mobile sheet** (`webhook.payment`) — same flat bullet action chain on a narrow viewport | Feels like a stretched property sheet; no adaptation for mobile constraints. | A **vertical collapsible node stepper**: each action in the chain is a rounded card that expands/collapses, showing inputs/outputs, connected by a vertical line with dots. | `21-flow-builder.webp` — the node cards (`Message Response`, `Data Request`) with icons, titles, and connection ports; adapted to a vertical scroll. | On mobile, the action chain becomes a vertical stepper: `publishSaga` (expandable card) → `enqueueJob` (expandable card). Each card shows duration and a link icon. Saves vertical space and feels tactile. |
+
+---
+
+## 4. VARIETY LEVERAGE
+
+**4 patterns visible in references that this screen does NOT use but should:**
+
+1. **Visual node-based rule graph**  
+   - Reference: `21-flow-builder.webp` — the canvas with connected nodes (`Start Point` → `Message Response` → `AI Assistant`).  
+   - Where it goes: Replace the entire `Rule builder` WHEN/DO strip and the flat `Action chain` list (in both the main page and the drawer/sheet) with a horizontal node strip that visually wires event → condition → action.
+
+2. **Inline code editor with documentation tabs**  
+   - Reference: `11-devconsole-a.png` — the `Add JS filter` side panel containing a syntax-highlighted `Filter code` block and tabbed documentation (`Basics`, `Parameters`, `Functions`, `Examples`).  
+   - Where it goes: The detail drawer/mobile sheet should have a `Payload` tab with a JSON viewer/editor; the firing history should have a `Filter` button that opens a JS filter panel with autocomplete docs.
+
+3. **Timeline block schedule with color-coded status bars and avatars**  
+   - Reference: `19-pm-dashboard.png` — the `Schedule` widget showing `Kickoff Meeting` with a green vertical bar, time range, and stacked avatars.  
+   - Where it goes: The `Schedule & next fires` section should drop the plain text cards (`cron.nightly-reconcile` etc.) in favor of stacked schedule blocks with type-colored bars and relative-time badges.
+
+4. **Smart toolbar with inline filter dropdowns and query builder**  
+   - Reference: `11-devconsole-a.png` — the toolbar above the records table with `Quick search...`, `Show from: Latest`, `Max results: 100`, `+ Add JS filter`, `More filters`.  
+   - Where it goes: The `Firing history` table needs this exact toolbar instead of its current bare sort headers, so users can search by trigger name, filter by outcome, and set result limits without leaving the screen.
+
+---
+
+## 5. TOP 5 FIXES
+
+1. **Replace the generic `Firing history` table with a filterable log stream that has an inline query toolbar (`Quick search`, `Show from`, `Max results`) and a collapsible code-filter side panel, exactly as shown in `11-devconsole-a`, because the current table is indistinguishable from a default data grid and wastes 40% of each row on empty latency cells.**
+
+2. **Transform the `Rule builder`'s flat WHEN/DO boxes into a horizontal mini node graph with connection lines and type icons, borrowing the node card style from `21-flow-builder`, because the current linear text layout undersells the "rule chain" concept and turns a powerful feature into a boring form.**
+
+3. **Redesign the top four category cards as a unified dense "Trigger Types" summary table (icon, count, last fire, next fire, status badge), modeled on the `My Projects` table in `19-pm-dashboard`, because the current `Manual` card is ~80% dead space and the set fails the density bar.**
+
+4. **Add a tabbed detail drawer/sheet (`Overview`, `Action Chain`, `Payload`, `History`) where the `Payload` tab contains a syntax-highlighted JSON editor and an inline docs reference, like the filter panel in `11-devconsole-a`, because the current drawer is a sparse property sheet that does not scale with complex trigger payloads.**
+
+5. **Swap the schedule text-cards (`cron.nightly-reconcile` etc.) for a visual timeline strip with color-coded event blocks and duration bars, modeled on the `Schedule` widget in `19-pm-dashboard`, because "next fire" is inherently temporal and deserves a time-based visualization instead of static grey boxes.**
+
+---
+
+## 6. FINAL
+
+**ACCEPT-WITH-FIXES** — The screen has strong bespoke bones (category sparklines, rule builder concept, schedule horizon), but generic table and drawer patterns drag it below the premium SaaS bar; cross-pollinating the node graph, code-editor inspector, and timeline components from the reference set would raise it to ship-ready.
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V5-triggers-fix-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V5-triggers-fix-adversarial-vision.md
new file mode 100644
index 000000000..d615d19da
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V5-triggers-fix-adversarial-vision.md
@@ -0,0 +1,82 @@
+
+> build · moonshotai/kimi-k2.6
+
+openrouter/moonshotai/kimi-k2.6
+
+## 1. BESPOKE VERDICT (62 / 100)
+
+The Triggers screen is a **split personality**: the type-breakdown cards (Schedule, Webhook, Event, Manual) and the 7-day Schedule strip are genuinely tailored—each trigger family gets its own mini-visualization and the calendar strip packs 7 next-fire dayboxes with countdown badges. The copper/teal/amber accent system is consistent.
+
+However, the **Rule builder** (`webhook.payment`) is two small white cards (`WHEN` / `DO`) floating in a wide grey trough, connected by a tiny dotted arrow. It reads as a flat form, not a rule graph. The **Firing history** is an off-the-shelf sortable table with generic sparklines—indistinguishable from a Laravel Nova or Retool log view. The **Dead letters** panel is just text dumps (`SyntaxError: bad JSON at :14`) with no severity hierarchy, colored strokes, or retry visualization. The **Webhook stress test** is a POST label + bare textarea with zero developer-tool affordances.
+
+**Tailored:** type-breakdown cards, 7-day Schedule strip, action-type pills.  
+**Generic/template:** Firing history table, Dead letters list, Rule builder layout, top stat cards.
+
+---
+
+## 2. DENSITY / DEAD-SPACE
+
+- **Top summary row** (~15% empty): acceptable metric gutters, but internal card padding is loose.  
+- **Type-breakdown cards** (~10% empty): well packed; best region.  
+- **Rule builder card** (~40% empty): huge grey background surrounds two proportionally small cards; the `if signature valid` arrow floats in a void.  
+- **Schedule & next fires** (~20% empty): the 7 daily boxes have large dead zones beneath the `02:00` time labels.  
+- **Firing history** (~25% empty): filter row is sparse (single search box + two dropdowns on a wide track); latency values like `4ms` leave massive horizontal whitespace; row dividers are so faint they create perceived gaps.  
+- **Dead letters / Webhook test split** (~30% empty): the webhook test JSON textarea is a tiny block inside a tall card; dead-letter rows have multi-line text but no compacting, so each item consumes vertical real-estate without proportional information gain.
+
+By contrast, the **Confluent topic table** (`11-devconsole-a.png`) packs every row with 5 dense columns and a sticky filter bar; the **Monday schedule** (`19-pm-dashboard.png`) fills its timeline card edge-to-edge with bars and avatars.
+
+---
+
+## 3. COMPONENT PRESCRIPTION TABLE
+
+| # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to Triggers |
+|---|---|---|---|---|---|
+| 1 | **Rule builder** (`webhook.payment` WHEN/DO strip) | Two grey boxes in a wide track with a tiny dotted arrow; no sense of graph or branch topology. | **Connected node canvas** — colored start/action nodes with SVG path connectors and branch labels on exit paths. | `21-flow-builder.webp` — the canvas showing the green "Start Point" node connected to the purple "Message Response" node, with "Get 30% Off" and "No Thanks" branch labels. | Replace WHEN/DO with a horizontal mini-canvas: trigger source as a green left node, condition gate as a diamond, action as a copper right node, connected by an animated path. |
+| 2 | **Firing history** table rows | Standard admin sortable table; sparklines are too small and uniform to differentiate outcomes. | **Sticky header + filter-pill bar + segmented outcome bar** — dense rows with a top "+ Add JS filter"-style pill bar and proportional status segments per row. | `11-devconsole-a.png` — the data table with sticky Timestamp/Offset columns and the "+ Add JS filter" / "More filters" pill buttons above it. | Add a compact pill-bar above the table (`COMPLETED`, `SKIPPED`, `PROCESSED`). Replace sparklines with stacked 24h bars showing outcome ratios per row. |
+| 3 | **Webhook stress test** JSON textarea | Bare `<textarea>` with no syntax highlight or schema guidance; looks unfinished. | **Framed code block + collapsible Documentation accordion** — monospaced editor with comment + tabbed docs panel. | `11-devconsole-a.png` — the "Add JS filter" right sidebar showing a JS code block (`// record.value.Address.City.startsWith…`) and the "Documentation" accordion with Basics/Parameters/Functions/Examples tabs and bullet lists. | Wrap the JSON in a bordered code block with `json` syntax highlighting. Embed a thin right-hand docs drawer inside the card showing expected payload schema fields. |
+| 4 | **Dead letters** list items | Plain text rows with tiny retry text; no severity encoding or sink-type distinction. | **Color-stroked exception cards with radial retry badges** — rows with bold error names, colored left borders, and circular retry counters. | `19-pm-dashboard.png` — the "My Projects" table rows showing bold colored status pills ("In Progress" green, "Pending" pink, "Completed" blue) plus avatar circles; combine with severity color language from `11-devconsole-a.png`. | Transform each dead-letter into a compact row: coral left stroke for REDIS, amber for MEMORY; bold `SyntaxError` title; monospaced one-line context; circular `2/3` retry badge with radial fill. |
+| 5 | **Schedule & next fires** bottom rule cards (`cron.nightly-reconcile`, etc.) | Horizontal rule panels with text only; they repeat the calendar info without adding visual density. | **Vertical timeline ribbon** — entries with thin colored duration bars, time ranges, and small target avatars. | `19-pm-dashboard.png` — the "Schedule" card showing timeline items ("Kickoff Meeting" with a green vertical bar, time range "01:00 PM to 02:30 PM", and overlapping avatar stacks). | Under the 7-day strip, render next-fire events as timeline entries: copper left bar, countdown badge (`in 11h 58m`), and tiny target-system glyph. |
+| 6 | **Action type selector** (`publish saga`, `enqueue job`, etc.) | Four flat grey pill buttons; weak selected state; no iconography. | **Rounded dashed action palette** — icon-button grid inside a dashed container, active item gets solid fill. | `21-flow-builder.webp` — the bottom "Add Responses" palette with rounded dashes containing icon buttons for Text, Image, Gallery, Button, Quick Reply. | Replace the pill row with a dashed palette card. Each action is an icon+label square; `publish saga` gets a solid copper fill and white text. |
+| 7 | **Type summary cards** (Schedule, Webhook, Event, Manual) | Sparkbars are tiny; bottom metadata (`3 ARMED`, `1 SILENCED`) is plain text without hierarchy. | **Hero metric tile** — oversized numeral + supporting label + icon, with a micro-trend footer. | `19-pm-dashboard.png` — the top metric pills ("12hrs Time Saved", "24 Projects Completed") using large bold numbers + small caption + icon. | Make the trigger count (e.g. `3`) a large DM Sans numeral; place `ARMED` beneath as a copper pill badge; add a 7-day micro-sparkline in the tile footer. |
+| 8 | **Top summary row** (8 TRIGGERS, 7 ARMED, etc.) | Generic SaaS stat cards; numbers are too small to dominate; icons are vague squares. | **Metric header tiles** — large numerals with unit suffixes and compact secondary labels, similar to stream-processing dashboards. | `11-devconsole-a.png` — the top metric strip showing "260" Records, "1MB" Topic Size, "7" Partitions, "3" Replication Factor in large blue numerals. | Increase numeral size to fill the upper half of each tile. Replace vague icons with trigger-type glyphs. Add a copper trend arrow under the 24h fire count. |
+
+---
+
+## 4. VARIETY LEVERAGE — 4 patterns this screen does NOT use but should
+
+1. **Visual node graph / branching canvas** (`21-flow-builder.webp`): The current Rule builder is flat. A mini node graph would let users literally *see* trigger topology (source → condition → action) and later support branching (if/else).  
+   *Placement:* Replace the entire `Rule builder` grey trough.
+
+2. **Inline code editor with side Documentation accordion** (`11-devconsole-a.png`): The Webhook stress test is a raw textarea. A framed code block paired with a schema docs panel signals “developer-grade tool,” not “config form.”  
+   *Placement:* Inside the **Webhook stress test** card, split into 2/3 editor + 1/3 docs drawer.
+
+3. **Vertical timeline with duration bars and avatar stacks** (`19-pm-dashboard.png`): The Schedule strip drops calendar days but then presents the next-fire rules as plain horizontal cards. A timeline ribbon would reclaim that space and show *when* each rule runs within the day.  
+   *Placement:* Directly beneath the 7-day dayboxes.
+
+4. **Dashed-border action palette / icon dock** (`21-flow-builder.webp`): The current action-type selector is a forgettable pill row. A rounded dashed palette with icon squares would make the action type feel like an intentional creative choice, not a radio button.  
+   *Placement:* The **Action types** strip under the Rule builder.
+
+---
+
+## 5. TOP 5 FIXES (ranked)
+
+1. **Replace the Rule builder grey boxes with a connected mini node graph** (green source node → diamond condition → copper action) because the current layout wastes ~40% of the card on blank background and fails to communicate rule topology.  
+   *Reference:* `21-flow-builder.webp` node canvas.
+
+2. **Inject segmented 24h outcome bars into every Firing history row** so each row becomes a proportional health strip instead of a generic sparkline, turning logs into a scanable status board.  
+   *Reference:* `11-devconsole-a.png` dense data encoding.
+
+3. **Embed a collapsible Documentation accordion inside the Webhook stress test card** beside the JSON textarea to explain payload schema inline, matching the developer-tool standard.  
+   *Reference:* `11-devconsole-a.png` "Add JS filter" docs panel.
+
+4. **Transform Dead letters from text rows into compact exception cards** with colored sink-type strokes (coral for REDIS, amber for MEMORY) and radial retry counters, eliminating list padding and establishing severity hierarchy.  
+   *Reference:* `19-pm-dashboard.png` color-coded status pills.
+
+5. **Stack Schedule next-fire events as vertical timeline items** with copper duration bars under each day cell, reclaiming the empty space below day numerals.  
+   *Reference:* `19-pm-dashboard.png` Schedule timeline.
+
+---
+
+## 6. FINAL
+
+**ACCEPT-WITH-FIXES**
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V6-streams-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V6-streams-adversarial-vision.md
new file mode 100644
index 000000000..b95bbf92c
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V6-streams-adversarial-vision.md
@@ -0,0 +1,74 @@
+
+> build · moonshotai/kimi-k2.6
+
+moonshotai/kimi-k2.6
+
+# Streams Screen — Adversarial Vision Gate
+
+## 1. BESPOKE VERDICT: 72/100
+
+The screen is **partially bespoke, partially generic**.
+
+**Tailored / feature-native:**
+- The **"Producer → Log → Consumers" topology diagram** on the right is genuinely domain-specific: it shows `webhook.payment` and `reconcile-job` feeding into a `payment-events` log with 6 colored partition bars, then fanning out to consumer groups (`receipt-worker`, `ledger-sync`, `analytics`). This is not a reusable template.
+- The **Partition & offset ledger** table (rows 0–5 with `node-a` / `node-b` / `node-c` leaders, HEAD, COMMITTED, and LAG bars) is a stream-native data structure with per-row color coding.
+- The **Lag heatmap** (`p0`–`p5` rows of beige/orange/red blocks) is a purpose-built visualization for partition lag over recent windows.
+- The **Fan-out delivery** section (attempt 1 · 40ms / attempt 2 · 3.1s / attempt 3 · `E_CONN`) is bespoke to distributed stream delivery semantics.
+
+**Generic / template-like:**
+- The **four top metric cards** (`THROUGHPUT 12 /s`, `CONSUMER LAG 970 msgs`, `PARTITIONS 5 / 6`, `RETENTION 7d`) are plain label-over-number admin-dashboard stat cards with thin colored bars; they could be swapped with CPU load or DB connections without changing the layout.
+- The **tab bar** (`Consume / Partitions / Consumers / Config`) is an unstyled underline tab set with no active fill or connected panel chrome.
+- The **throughput chart area** is a teal line chart floating inside a white box with a black tooltip (`14 msgs/s -5s`) hovering over dead space; the container is interchangeable with any SaaS analytics widget.
+- The **"Selected Message"** right-hand panel (`msg_88f`, `FAILED`, `COMPLETED`) is a sparse vertical property list with ~30% whitespace between rows, reading like a generic JSON inspector.
+
+## 2. DENSITY / DEAD-SPACE
+
+| Region | Est. dead / low-info % | Verdict |
+|---|---|---|
+| Top header + breadcrumb (`Home / Streams / payment-events`) | ~45% | Pure chrome, no data density. |
+| Throughput chart card (the white area below the teal line) | ~55% | The tooltip floats in empty space; the "PEAK 14/s · AVG 8/s" footer sits in a vast white field. |
+| Top 4 stat cards (internal padding) | ~35% | Generous internal margins around flat numbers. |
+| "Selected Message" right panel | ~30% | Sparse key-value rows with excessive vertical breathing room. |
+| Live event tail list (right column, below diagram) | ~15% | Actually dense; small text and tight rows. |
+| Fan-out delivery list | ~20% | Chat-like vertical stacking wastes horizontal space. |
+| Lag heatmap | ~25% | Only ~10 horizontal cells; legend is a single dot row. |
+| **Overall desktop** | **~22%** | Fails the "dense, no dead space" bar. |
+| **Mobile** | **~12%** | Better due to vertical stacking, but still has airy chart margins. |
+
+**Reference contrast:** `11-devconsole-a.png` and `12-devconsole-b.png` pack their tables and forms at ~5–8% dead space with tight padding and inline controls. `04-finance-cards.png` achieves near-zero dead space by pushing content edge-to-edge inside hard-shadow cards.
+
+## 3. COMPONENT PRESCRIPTION TABLE
+
+| # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to Streams |
+|---|---|---|---|---|---|
+| 1 | Top "THROUGHPUT" stat card (copper `12 /s` over a tiny sparkline) | Plain label-over-number card with no chrome or controls; identical to a generic admin dashboard template. | A rounded white card with a hard offset shadow, an inline stream-selector dropdown in the header (e.g., `ACME ▾`), and a segmented time-range pill bar (`1D | 1W | 1M | 3M | 1Y`) snapping the sparkline to a chosen window. | `04-finance-cards.png` — Top-left "Stock Market Tracker" card: the `ACME` dropdown, the `1D | 1W | 1M | 3M | 1Y` pill control, and the pinned active-dot tooltip on the blue line. | Replace the static `WINDOW 2m` caption with interactive pills (`1m / 5m / 15m / 1h`) and move the stream name into a header dropdown. |
+| 2 | "CONSUMER LAG" stat card (large amber `970 msgs`) | Flat number with no visual ratio or capacity context; could be swapped with any metric. | A thick radial gauge arc showing proportion of lag to retention, with a color gradient from teal to amber to red, and a "SPEND"-style centered label. | `04-finance-cards.png` — Top-right "Spending Summary" card: the blue-to-cyan-to-gray radial arc, the centered `SPEND` label, and the three icon+value breakdown columns beneath it. | Show lag as a percentage of the log retention window; use the three columns beneath for "Max / Avg / Current" lag across consumer groups. |
+| 3 | Throughput chart floating tooltip (`14 msgs/s -5s` black box) | Tooltip floats in empty whitespace with no anchor or persistence; wastes the vertical space below the chart line. | A persistent, pinned tooltip dot on the line (blue point) with a fixed overlay showing the value, plus inline actions. | `04-finance-cards.png` — Stock chart: the blue dot on the line with the black fixed tooltip `$439,82.21`. | Snap the tooltip to a fixed position inside the chart card so the area below the line can be reclaimed for stat footers (Peak / Avg / Floor). |
+| 4 | "Selected Message" right-hand panel (vertical list: `msg_88f`, `FAILED`, `COMPLETED`, `corr ch...`) | Sparse property list with ~30% whitespace between rows; reads as a generic JSON inspector. | Collapsible accordion sections: `Key`, `Value`, `Headers`, `Flow`, `Options`, each with a chevron and compact form fields, stacked vertically. | `12-devconsole-b.png` — Left produce form: `Key`, `Value`, `Headers`, `Flow`, and `Options` collapsible sections with chevrons, plus the JSON editor inside `Value`. | Fold metadata, headers, and fan-out delivery into accordions so the panel stays dense and users disclose only what they need. |
+| 5 | Tab bar (`Consume / Partitions / Consumers / Config`) | Basic underline-only tabs with no active fill or connected panel chrome; indistinguishable from default UI kit tabs. | A button-group or pill tab set with a filled active state and a visible content boundary, paired with an `+ Add JS filter` side drawer triggered by a right-aligned icon button. | `11-devconsole-a.png` — Tab row `Consume Produce Configuration...` plus the `+ Add JS filter` and `More filters` buttons that sit directly adjacent to the tab area. | Add a right-aligned `+ Add filter` button that opens a drawer for filtering the live tail by key pattern or JSON path. |
+| 6 | "Live event tail" unfiltered fire-hose list | Raw scrolling list with no search, no "show from" control, and no max-results limit; forces the user to visually scan. | A compact filter bar above the table: `Quick search...` input, `Show from: Latest` dropdown, `Max results: 100` dropdown, and a `More filters` button. | `11-devconsole-a.png` — Directly beneath the stat cards: the `Quick search...` field, the `Show from: Latest` select, `Max results: 100` select, and `More filters` pill button. | Place this bar above the event tail so users can search by event type, limit noise, and filter by partition. |
+| 7 | "Fan-out delivery" vertical text list (`1 receipt-worker / 2 ledger-sync / 3 analytics`) | Chat-like stacked rows with inconsistent icon alignment and no columnar structure; hard to scan latency or status at a glance. | A dense, sortable table with aligned columns for Consumer, Status, Attempt, Latency, exactly like the produce log table. | `12-devconsole-b.png` — Right-hand message table: columns `Timestamp`, `Key`, `Value`, with many rows visible and tight vertical padding. | Convert delivery attempts into a 4-column table (Consumer / Status / Attempt / Latency) to double information density. |
+| 8 | "Lag heatmap" (`p0`–`p5` rows, beige/orange/red blocks, `more` legend) | Low-resolution grid with only ~10 horizontal cells and no visible x-axis labels; the `more` legend is vague. | Finer-grained horizontal cell grid with 20+ columns, explicit x-axis labels for time windows, and a continuous gradient legend instead of discrete dots. | `12-devconsole-b.png` — The dense right-hand table shows ~18 visible rows; replicate that density by doubling the heatmap columns and labeling each recent window. | Make each cell represent a 10s window for the last 3 minutes; replace the `more` dot legend with a horizontal gradient bar. |
+
+## 4. VARIETY LEVERAGE
+
+Four patterns visible in the references that this screen **does not use** but should:
+
+1. **Radial gauge arc for capacity visualization** — `04-finance-cards.png`, "Spending Summary" card. The thick blue-cyan-gray arc showing proportion with a centered label. Would replace the flat `CONSUMER LAG` number with a visual ratio of lag vs log retention, raising the premium feel of the top stat row.
+2. **Segmented time-range pill control** — `04-finance-cards.png`, "Stock Market Tracker" `1D | 1W | 1M | 3M | 1Y` button group. Would sit directly above the throughput chart to let users switch between `1m`, `5m`, `15m`, `1h` views instead of the static `WINDOW 2m` label.
+3. **Collapsible accordion form sections** — `12-devconsole-b.png`, Produce pane `Key`, `Value`, `Headers`, `Flow`, `Options` collapsible groups with chevrons. Would replace the flat "Selected Message" and "Fan-out Delivery" vertical lists, reclaiming ~30% whitespace and adding progressive disclosure.
+4. **Inline filter-code drawer with documentation tabs** — `11-devconsole-a.png`, "Add JS filter" panel: the comment-stub textarea (`// record.value.Address.City.startsWith("Pa")`) and the `Basics / Parameters / Functions / Examples` tab strip below. Would allow users to write JS predicates against the live event tail, turning the fire hose into a queryable log.
+
+## 5. TOP 5 FIXES
+
+1. **Add a segmented time-range switcher (`1m` / `5m` / `15m` / `1h`) inside the throughput chart card** — reference `04-finance-cards.png` `1D/1W/1M` pills; fixes the static `WINDOW 2m` caption and turns the chart into an interactive control instead of a static image.
+2. **Replace the four flat top stat cards with hard-shadow rounded cards containing micro-controls** — reference `04-finance-cards.png` stock/spend cards; fixes the generic label-over-number template look and makes each card a self-contained instrument panel.
+3. **Collapse "Selected Message" and "Fan-out Delivery" into accordion sections** — reference `12-devconsole-b.png` produce form `Key/Value/Headers/Flow/Options`; fixes the ~30% whitespace in the sparse vertical list and adds progressive disclosure.
+4. **Add a filter bar (`Quick search` + `Show from` dropdown + `Add JS filter` drawer) above the Live Event Tail** — reference `11-devconsole-a.png`; fixes the unscoped fire-hose list and gives users searchable, filterable control over the event stream.
+5. **Pin the throughput tooltip to a fixed overlay with an anchored dot instead of a floating black box** — reference `04-finance-cards.png` stock tracker active dot + fixed tooltip; fixes the awkward black tooltip hovering in empty whitespace and reclaims the area below the chart line.
+
+## 6. FINAL
+
+**ACCEPT-WITH-FIXES**
+
+The design has strong bespoke bones (topology diagram, offset ledger, fan-out delivery tracking) but is dragged down by generic stat cards, airy chart chrome, and unfiltered list panels. The prescribed finance-card and Confluent-console patterns would lift it to premium.
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V7-config-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V7-config-adversarial-vision.md
new file mode 100644
index 000000000..1c513f027
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V7-config-adversarial-vision.md
@@ -0,0 +1,98 @@
+
+> build · moonshotai/kimi-k2.6
+
+openrouter/moonshotai/kimi-k2.6
+
+## 1. BESPOKE VERDICT — 68/100
+
+The screen is **partially bespoke** but spends too much of its real estate on generic dashboard chrome.
+
+**Tailored parts (saving it from mediocrity):**
+- The **4-step precedence ladder** on the right is genuinely feature-specific: it maps framework → package → env → runtime with shadowed/win states and source file provenance. This is the strongest bespoke element.
+- The **Override Diff** block (however primitive) is domain-specific to config resolution.
+- The **winning-layer** color-coded pills inside the Effective Config table (`override`, `package`, `profile`) tie directly to the precedence concept.
+
+**Generic/template parts (dragging the score down):**
+- The **four top KPI cards** (`Keys Resolved 9`, `Overrides Active 3`, etc.) are textbook admin-template boilerplate: one number per card, enormous padding, no secondary data or sparklines. They could be swapped into any SaaS dashboard without modification.
+- The **Effective Config table** is a plain filterable data grid with bold values and generous row height; nothing about its structure signals "config resolution" beyond the column headers.
+- The **left navigation sidebar** and **global header** (search, profile badge, "Open Aspire") are standard chrome.
+- The **Resolution Trail** at the bottom of the right panel reads like a raw server log rather than a crafted UI element.
+
+Verdict: the *ideas* are bespoke (precedence ladder, diff block), but the *execution* leans heavily on generic card/table/list templates.
+
+---
+
+## 2. DENSITY / DEAD-SPACE
+
+| Major region | Estimated dead / low-info space | Failure? |
+|---|---|---|
+| **Top KPI cards** | ~55% of card interior is padding above/below the single metric + label | **Yes** — fails "dense, no dead space" |
+| **Title + description paragraph** | ~50% of the text block is line-height and margin whitespace | Yes |
+| **Category filter pill row** | ~40% horizontal dead space in the loose pill cloud; also burns a full row | Yes |
+| **Effective Config table** | ~30% per-row whitespace; only ~9 rows visible in a tall viewport | Yes |
+| **Right panel — 4-layer ladder (full state)** | ~20%; acceptable but gutters are generous | Borderline |
+| **Right panel — 2-layer ladder (package-wins state)** | **~45%**; layers 3 and 4 render as `-- not set` placeholders with full row padding | **Yes** |
+| **Override Diff block** | ~60% — tiny content inside a wide panel with no structural framing | **Yes** |
+| **Resolution Trail** | ~35%; plain text list with no visual hierarchy | Yes |
+
+**Reference contrast:**
+- The **Schema Registry** (`13-devconsole-c.png`) packs its surface into side-by-side code panels with minimal chrome; even its header is a single dense metadata strip.
+- The **Topics** table (`11-devconsole-a.png`) shows 12+ data rows with minimal vertical padding, and the right filter panel is filled edge-to-edge with a textarea, inputs, and a documentation accordion.
+- The **Flow builder** (`21-flow-builder.webp`) keeps its right properties panel dense with form fields, chips, and icon buttons; its canvas omits unused elements entirely rather than leaving blank placeholders.
+
+---
+
+## 3. COMPONENT PRESCRIPTION TABLE
+
+| # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to Config Resolution |
+|---|---|---|---|---|---|
+| 1 | **Top KPI cards** (Keys Resolved, Overrides Active, Values Shadowed, Profile) | Four oversized cards with a single metric each and ~60% internal padding; classic admin-template boilerplate. | **Horizontal metadata strip**: compact labeled metrics in a single row with tiny labels and no card chrome. | `13-devconsole-c.png` — the strip directly under the header reading "CURRENT VERSION 3 | TOTAL VERSIONS 2 | FORMAT Avro | COMPATIBILITY Backward transitive (inherited)". | Replace the four cards with one dense strip: "Keys Resolved 9 · Overrides Active 3 · Values Shadowed 14 · Profile local", using the same muted-label + emphasized-value hierarchy. |
+| 2 | **Effective Config table rows** | Generous row height, bold values floating in whitespace, plain text without type differentiation. | **Dense data grid** with inline monospaced values and tight vertical padding. | `11-devconsole-a.png` — the records table under "Consume" with columns Timestamp, Offset, Partition, Key, Value; 12+ rows visible with minimal vertical padding. | Halve row height, left-align keys, render effective values in `DM Mono` with color-coded type inference (amber numbers, teal strings, copper booleans), and show winning-layer pills on the right edge only on hover to reduce clutter. |
+| 3 | **Category filter pills** ("all keys", "flags", "jobs", etc.) | Loose pill cloud wastes horizontal space and reads as a generic tag component. | **Connected tab bar** with active underline and item counts. | `11-devconsole-a.png` — the "Consume · Produce · Configuration · Schema · Consumer Groups · ACL" tab bar directly under the topic header. | Replace the pill row with a compact, border-bottom tab bar: "All Keys 9 · Flags 1 · Jobs 1 · Tasks 1..." where the active tab highlights the table's current category. |
+| 4 | **Override Diff block** | Two plain text rows with crude +/- markers (`line 2 − 10` / `line 2 + 30`); no syntax highlighting, no structural context, consuming a full panel width. | **Side-by-side diff viewer** with line numbers, syntax highlighting, and pink/green change backgrounds. | `13-devconsole-c.png` — the split JSON diff panels for Version 3 vs Version 4, showing line 9 pink removal and line 18 green addition with `-` / `+` gutter indicators. | Render the active key's full value in two panes: left = profile value, right = override value, with `+`/`-` gutter badges and highlighted background for changed tokens; use `DM Mono` with type-aware color. |
+| 5 | **Resolution layer ladder** (vertical 1–4 list) | A numbered vertical list with `-- not set` placeholders for empty layers; reads like a generic ordered list with arrow bullets. | **Connected node pipeline**: 4 nodes wired by a vertical line, winning node filled with color, shadowed nodes dimmed with strikethrough values. | `21-flow-builder.webp` — the canvas nodes (Start Point → Message Response → AI Assistant) linked by curved connector lines, with selected nodes showing a purple border and active fill. | Layout the 4 precedence layers as nodes on a vertical rail: framework (ghosted) → package (filled circle if winning) → env (ghosted) → runtime (ghosted), using the copper/teal/amber palette for active states. |
+| 6 | **Resolution Trail footer** | Plain text list of layer names and file paths; indistinguishable from a server log dump. | **Compact audit trail** with source file rendered as clickable badge pills and an inline winning indicator. | `13-devconsole-c.png` — the "Schema ID: 100123" and "Schema ID: 100124" badge pills above each diff panel. | Convert each trail entry into a horizontal line: layer icon + layer name + source file path as a compact, rounded pill badge (e.g., `workers/manifest.ts:16`), plus a gold "WINNING" pill at the end of the winning row only. |
+| 7 | **`-- not set` layer rows** | Rendered as full-height rows with centered placeholder text; dead space consuming ~30% of the ladder's vertical real estate when only 2 layers contribute. | **Absent/collapsed nodes** for non-contributing layers. | `21-flow-builder.webp` — disconnected or future nodes simply do not appear on the canvas; there are no blank placeholder nodes wasting space between Start Point and Message Response. | If a layer has no value, omit it from the ladder entirely and bridge the connecting line across the gap, so the visible nodes snap together and eliminate empty states. |
+| 8 | **Right detail panel (entire panel)** | Read-only, static display; no interactive input, documentation, or actions. | **Inline editor inspector**: fixed-width right panel with a monospace input area, collapsible documentation accordion, and primary action button. | `11-devconsole-a.png` — the "Add JS filter" right panel containing the Filter code `<textarea>`, Filter name input, "Clear all / Apply filter" buttons, and the collapsible "Documentation" section with Basics/Parameters/Functions/Examples tabs. | Add a "Quick override" `<textarea>` at the top of the right panel (pre-filled with the current effective value), followed by collapsible "Layer details" and "Resolution trail" sections, keeping the panel actionable rather than purely informational. |
+
+---
+
+## 4. VARIETY LEVERAGE
+
+Four concrete patterns from the references that the Config Resolution screen does **not** currently use but should adopt:
+
+1. **Side-by-side code diff with syntax highlighting and +/- gutter markers**  
+   *Source:* `13-devconsole-c.png` (Schema Registry Version 3 vs 4 diff).  
+   *Placement:* Replace the current Override Diff block in the right panel.  
+   *Why:* The current diff is two lines of plain text; a structural diff viewer would make value changes instantly scannable and raise the craft to match the premium bar.
+
+2. **Inline code editor + collapsible documentation accordion in a right-side inspector**  
+   *Source:* `11-devconsole-a.png` (Add JS filter panel: `<textarea>` + Documentation tabs).  
+   *Placement:* Top of the right detail panel, above the layer ladder.  
+   *Why:* Makes the panel interactive—developers can edit runtime overrides in-place with inline docs rather than passively reading a static ladder.
+
+3. **Visual node-graph pipeline for precedence visualization**  
+   *Source:* `21-flow-builder.webp` (Start Point → Message Response → AI Assistant nodes linked by connector edges).  
+   *Placement:* Replace the vertical numbered list in the right panel.  
+   *Why:* Turns the abstract precedence concept into an instantly readable flow; "shadowed" vs "wins" becomes fill color and opacity rather than text labels.
+
+4. **Horizontal tab-bar sub-navigation with item counts**  
+   *Source:* `11-devconsole-a.png` (Consume · Produce · Configuration · Schema · Consumer Groups · ACL tabs).  
+   *Placement:* Replace the loose "all keys / flags / jobs / ..." pill cloud above the Effective Config table.  
+   *Why:* Saves vertical and horizontal space, adds a clear active state, and matches the density of the Topics reference.
+
+---
+
+## 5. TOP 5 FIXES
+
+1. **Collapse every `-- not set` precedence layer instead of rendering it as a padded placeholder row** — as the Flow builder canvas omits disconnected nodes, recovering ~25% of the right panel's height in partial-resolution states.
+2. **Replace the two-line Override Diff with a side-by-side code diff viewer featuring syntax highlighting and `+`/`-` gutter markers** — matching the Schema Registry schema comparison, turning a cryptic text delta into a scannable structural diff.
+3. **Flatten the four oversized KPI cards into a single horizontal metadata strip with 11px micro-labels** — copying Schema Registry's `Current Version / Format / Compatibility` header, eliminating card padding and reclaiming ~60px of page height.
+4. **Halve the Effective Config table's row height and switch category filters to a connected tab bar** — lifting the density and tab pattern from the Topics records grid, increasing main-viewport information density by ~30%.
+5. **Redraw the vertical layer list as a connected 4-node precedence pipeline with directional edges** — borrowing the Flow builder node canvas, replacing numbered bullets with an instant visual read of which layer wins and which are shadowed.
+
+---
+
+## 6. FINAL
+
+**ACCEPT-WITH-FIXES** — The precedence ladder and diff block prove the designer understands the domain, but generic stat cards, a plain data grid, and dead-space placeholder states bury that craft. Execute the 5 fixes above to bring density and distinctness up to the premium SaaS bar.
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V8-migrations-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V8-migrations-adversarial-vision.md
new file mode 100644
index 000000000..91354ff48
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V8-migrations-adversarial-vision.md
@@ -0,0 +1,84 @@
+
+> build · moonshotai/kimi-k2.6
+
+openrouter/moonshotai/kimi-k2.6
+
+## 1. BESPOKE VERDICT (0–100): 62
+
+**Tailored parts:**  
+- The vertical **Version chain** with the teal connector line is genuinely bespoke to migrations—timeline semantics are correct and the APPLIED/PENDING pill on each node is contextual.  
+- The **Schema drift** half-donut gauge is feature-specific (drift count + "6 of 8 objects in sync").  
+- The **DDL diff** tab in the drawer/sheet, showing `schema.prisma DIFF` with `+ model User` entries, is directly tied to migration artifacts.
+
+**Generic/template parts:**  
+- The top **SCHEMA HEAD → v4** hero area is mostly empty centered text in a oversized card—reads like a status banner swapped from any SaaS admin page.  
+- The four **APPLIED / PENDING / DRIFT / LAST APPLIED** stat cards (3, 1, 2 drifted, "add receipts") are plain number-in-box widgets with zero visual distinction beyond the amber "2 drifted" tint; could be from any analytics dashboard.  
+- The **Migration ledger** table is a generic 6-column data grid (VER, MIGRATION, APPLIED AT, DURATION, ROWS, STATUS) with no visual density or feature-specific affordances—literally a `<table>` rendered with borders.  
+- The **right-hand "1 migration pending"** rail is a generic info panel with bullet-list "WHAT WILL CHANGE" items (table bullet, orders.status bullet) and a full-bleed CTA—indistinguishable from a Stripe billing-detail sidebar.
+
+---
+
+## 2. DENSITY / DEAD-SPACE
+
+| Region | Empty/low-info % | Verdict |
+|---|---|---|
+| Top hero ("DB migrations & drift" + stat cards) | ~45% | FAIL. The hero text is centered with huge whitespace below it; stat cards are spaced loosely and the LAST APPLIED card is mostly whitespace around a two-line text block. |
+| Version chain column | ~35% | FAIL. Each timeline node is a 120px-tall card containing only a title, filename, date, and duration—vast internal padding; the "LIVE DB · HEAD AT V3" marker is a ghost row with dashed border and almost no content. |
+| Migration ledger table area | ~30% | FAIL. The table has generous row height and no inline actions, no nested DDL preview, no row hover affordances—just text floating in cells. |
+| Schema drift gauge panel | ~25% | BORDERLINE. The gauge is nice, but the DRIFTED OBJECTS list below it has oversized cards with tiny font labels ("COLUMN", "TABLE") surrounded by whitespace. |
+| Right pending-migration rail | ~40% | FAIL. The "1 migration pending" card has a small header, two tiny bullet rows, then a massive command block (`$ netscript db migrate`) consuming vertical space with almost no information density. |
+
+By contrast, the PM dashboard reference packs stats into a single horizontal chip row, the Schema Registry reference packs metadata into a compact 4-column header, and the Dev Console reference packs a data table + filter panel + docs into one viewport with zero wasted gutters.
+
+---
+
+## 3. COMPONENT PRESCRIPTION TABLE
+
+| # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to Migrations |
+|---|---|---|---|---|---|
+| 1 | Top stat cards (APPLIED 3, PENDING 1, etc.) | Four disconnected squircles with plain integers; no trend, no sparkline, no iconography. | **Horizontal metric chip row** with icon + number + micro-label, e.g., "12hrs Time Saved · 24 Projects Completed · 7 Projects In-progress". | `19-pm-dashboard.png` — the stats row directly under "Good Evening! John," | Replace the 4 tall cards with a single compact horizontal strip: v3→v4 icon, Applied count, Pending count, Drift count, Last-applied relative timestamp. |
+| 2 | Migration ledger table | Monotonic grid; no diff preview, no row expansion, no syntax highlighting. | **Inline diff/code expander**, like the side-by-side schema diff viewer with line numbers and `+`/`-` line backgrounds. | `13-devconsole-c.png` — the Schema Registry JSON diff block with green/red line highlights and line numbers | Each ledger row should expand (or slide a drawer) to reveal the actual `schema.prisma` diff inline, not just a generic "STATUS" pill. |
+| 3 | "1 migration pending" right rail | Generic bullet list with text-only changes; no visual preview of structural impact. | **Documentation explainer panel** beneath an action area, with collapsible "Basics / Parameters / Functions / Examples" tabs. | `11-devconsole-a.png` — the "Documentation" lower section in the Add JS filter panel, especially the bullet list with code formatting | Replace the "WHAT WILL CHANGE" bullets with a collapsible "Impact preview" doc panel showing before/after DDL snippets and affected table diagrams. |
+| 4 | LIVE DB · HEAD AT V3 marker | Dashed ghost box with tiny text; visually orphaned and low-confidence. | **Connection status badge + version selector dropdown**, e.g., "Version 3 (current)" dropdown arrow beside a live dot indicator. | `13-devconsole-c.png` — the "Version 3 (current)" dropdown with arrow in the Schema Registry header | Make the live DB marker a compact, pinned header chip with a green pulse dot and a dropdown to jump between live-vs-chain versions. |
+| 5 | Schema drift "2 drifted" gauge panel | Gauge is fine, but the drifted-object cards below are airy label-value blocks with no structural preview. | **Structured object diff list** with inline property highlighting, similar to the schema registry's field-level diff. | `13-devconsole-c.png` — the JSON field diff showing `"logicalType"` changing from `"time-milies"` to `"time-millis"` with red/green rows | Show each drifted object as a compact diff card: left side = expected type, right side = actual type, with a one-line DDL snippet. |
+| 6 | Migration detail drawer/sheet (Summary tab) | Summary shows only a text paragraph and "TABLES TOUCHED" chips—too sparse. | **Schedule + event card list**, using visual date/time blocks and avatar/assignee stacks to show chronology. | `19-pm-dashboard.png` — the Schedule section with Mo/Tu/We day blocks and event cards ("Kickoff Meeting", "Create Wordpress website") | In the migration detail sheet, show a timeline of "Pre-check → Apply → Seed → Verify" steps as a vertical schedule, with durations and status icons. |
+| 7 | Migration detail DDL diff | Only 2 lines of diff visible (`+ model User`, `+ model Session`) with no line numbers, no file path tabs, no navigation. | **Filter-side panel with code editor + documentation tabs**, including line-numbered textarea, file tabs, and "Apply filter" action button. | `11-devconsole-a.png` — the "Add JS filter" panel with the Filter code textarea, line numbers implied, plus the "Apply filter" primary button | Give the DDL diff a real code-editor chrome: file tabs (`schema.prisma`, `migration.sql`), line numbers, and a sticky "Run migration" action bar at the bottom of the drawer. |
+| 8 | Mobile bottom sheet | Three stacked full-width cards (APPLIED, DURATION, ROWS) consuming excessive vertical space; looks like a default BottomSheet. | **Compact inline metadata grid** with small-label-above-value cells and a draggable handle. | `11-devconsole-a.png` — the compact table header row ("Timestamp / Offset / Partition / Key / Value") and the tight Add JS filter panel | Collapse the metadata into a 3-column grid (Applied / Duration / Rows) on one row, then immediately show the Summary/DDL tabs below without scrolling. |
+
+---
+
+## 4. VARIETY LEVERAGE
+
+Four patterns from the references that the Migrations screen does NOT use but should:
+
+1. **Horizontal summary metric chips with icons** (`19-pm-dashboard.png`, the row under the greeting).  
+   *Missing from:* the top hero area.  
+   *Where it would go:* Replace the four tall stat cards with a single dense horizontal strip under the page title, showing Schema Head, Applied count, Pending count, Drift count as icon+number micro-cards.
+
+2. **Side-by-side diff viewer with line numbers and red/green row highlights** (`13-devconsole-c.png`, the Schema Registry JSON diff).  
+   *Missing from:* the Schema drift section and the DDL diff view.  
+   *Where it would go:* The Schema drift panel should show before/after structural snippets side-by-side (expected schema vs live DB), and the drawer DDL diff should be upgraded from a plain `<pre>` block to a lined, colored diff.
+
+3. **Inline tabbed documentation panel** (`11-devconsole-a.png`, the "Documentation" area in the Add JS filter panel with Basics/Parameters/Functions/Examples tabs).  
+   *Missing from:* the right pending-migration rail and the detail sheet.  
+   *Where it would go:* Replace the "WHAT WILL CHANGE" bullet list with a tabbed mini-docs panel explaining the migration's impact on queries, indexes, and constraints.
+
+4. **Status badge + avatar stack + scheduled timeline strip** (`19-pm-dashboard.png`, the Schedule section with day selectors and stacked-avatar event cards).  
+   *Missing from:* the Version chain and the migration detail sheet.  
+   *Where it would go:* The Version chain should show who/what triggered each migration (avatar or system icon) and a mini-timeline of pre-flight checks; the detail sheet should show a step-by-step execution pipeline with durations.
+
+---
+
+## 5. TOP 5 FIXES
+
+1. **Flatten the four stat cards into a horizontal metric strip** (per the PM dashboard reference) because the current cards consume 200px of vertical hero space for four integers.  
+2. **Upgrade the DDL diff to a lined, side-by-side, syntax-highlighted diff viewer** (per the Schema Registry reference) because a raw `<pre>` block with two green lines is insufficient for reviewing structural migrations.  
+3. **Add an inline "Impact preview" accordion to the pending migration rail** (per the Dev Console documentation panel) because bullet-point text ("+ table delivery_attempts") does not communicate schema risk.  
+4. **Compact the Version chain nodes by 40% and add per-node metadata** (duration, row count, author avatar) because the current cards are 120px tall with only 3 lines of text—dead space that breaks density.  
+5. **Replace the mobile sheet's stacked metadata cards with a 3-column grid and a fixed action bar** (per the Dev Console filter panel density) because the current sheet pushes the DDL diff below the fold on a standard phone.
+
+---
+
+## 6. FINAL
+
+**ACCEPT-WITH-FIXES**
diff --git a/.llm/runs/beta10--orchestrator/visual/_evals/V9-dlq-adversarial-vision.md b/.llm/runs/beta10--orchestrator/visual/_evals/V9-dlq-adversarial-vision.md
new file mode 100644
index 000000000..f18629b8e
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_evals/V9-dlq-adversarial-vision.md
@@ -0,0 +1,86 @@
+
+> build · moonshotai/kimi-k2.6
+
+**Moonshot AI Kimi K2.6 (via OpenRouter)**
+
+---
+
+## 1. BESPOKE VERDICT (0–100)
+
+**Score: 62 / 100.**  
+The design is *partially* feature-tailored, but several sections read as generic SaaS chrome with data swapped in.
+
+**Tailored / working:**
+- **Error-signature clusters:** The colored left-border severity accents, inline source chips (`reserve-inventory`, `sync-ledger`), and per-cluster micro-histogram bars (2m–9m, 21m–42m) are genuinely Dead-Letter-Queue specific.
+- **Failed-messages table:** The retry-dot indicators (red/amber blocks with exhausted counts like `3/3`) and signature tags are contextual and appropriate.
+- **Queue-health age-distribution bars:** The tiny horizontal bars showing message age per backend (`oldest 21m`, `oldest 58m`) are a bespoke touch.
+
+**Generic / template-y:**
+- **Top stat cards (TOTAL PARKED, SIGNATURES, OLDEST PARKED, RETRY-EXHAUSTED, DEAD·2H):** These are plain number-in-a-card widgets identical to every generic admin dashboard; the DEAD·2H card’s miniature static bar strip provides almost no real trend information.
+- **"How triage works" sidebar:** A generic three-step bullet list with generous padding; could belong to any onboarding page.
+- **Message payload inspector:** A gray rectangle with raw JSON and no borders, syntax treatment, or formatting; reads as an un-styled `<pre>` tag.
+- **Mobile bottom sheet:** A straight vertical compression of the desktop inspector with no mobile-specific affordances (no drag handle, no fixed action bar).
+
+---
+
+## 2. DENSITY / DEAD-SPACE
+
+| Major region | Estimated dead / low-info space | Notes |
+|---|---|---|
+| Top metric cards | ~30% | Large icon + number with minimal supporting data inside each card. |
+| Error-signature clusters | ~15% | Reasonably dense, but row padding is still generous. |
+| Failed messages table | ~20% | Checkbox column, standard table gaps, and plain text cells waste horizontal and vertical space. |
+| Queue health section | ~25% | Labels ("cap 32 · 44%", "oldest 21m") sit under bars with large gaps between backend rows. |
+| Inspector panel (slide-over) | ~30% | Huge padding around payload and sparse retry-history entries create yawning vertical gaps. |
+| "How triage works" sidebar | ~40% | Text-only with loose line-height and no structural chrome. |
+
+**Contrast with references:** The Confluent records table (`11-devconsole-a.png`) packs data into ~36px rows with no dead columns. The finance cards (`04-finance-cards.png`) have near-zero dead space—every pixel is a chart, value, or control. The DLQ screen is *looser* than all three references.
+
+---
+
+## 3. COMPONENT PRESCRIPTION TABLE (MANDATORY — 8 rows)
+
+| # | Screen section (what you see now) | Why it's generic/weak | Prescribed concrete component/pattern | Source reference — file + the EXACT element in it | How to adapt to Dead-Letter Queues |
+|---|---|---|---|---|---|
+| 1 | Top metric row (TOTAL PARKED, SIGNATURES, OLDEST PARKED, RETRY-EXHAUSTED, DEAD·2H) | Five plain number cards with icons; identical to every SaaS stat widget; the DEAD·2H card uses a microscopic static bar strip with no real trend value. | A value+sparkline card (main value + blue inline line chart + period tabs) OR a semi-circular arc gauge (value centered inside a color-coded ring). | `04-finance-cards.png`: the "Stock Market Tracker" card ($440,364.20 with blue sparkline and 1D/1W/1M/3M/1Y tabs) AND the "Spending Summary" gauge ($1,800.00 inside the blue arc). | Replace the five cards with two dense premium components: an arrival-rate sparkline card (replacing DEAD·2H) and a total-parked gauge card (replacing TOTAL PARKED), both providing trend instead of static snapshots. |
+| 2 | Queue health section (redis, postgres, kv rows) | Horizontal progress bars with large text labels underneath ("cap 32 · 44%") create ~25% dead space; reads as basic Bootstrap progress bars. | Semi-circular gauge showing utilization with color-coded arc segments and a center value. | `04-finance-cards.png`: the "Spending Summary" arc gauge showing spend against a limit with blue and gray segments. | Per-backend queue health: replace each horizontal bar with a compact 48×48px utilization ring (red/amber/blue) next to the backend name, showing depth/cap percentage in the center. |
+| 3 | Failed messages table | Standard wide table with checkboxes, excessive row padding, and plain text; looks like a generic data-grid chrome swapped in. | Dense records table with compact ~36px row height, monospaced data columns, inline sortable headers, and no checkbox column. | `11-devconsole-a.png`: the Confluent records table with Timestamp/Offset/Partition/Key/Value columns, very tight vertical spacing and small monospaced values. | Compress rows to ~36px, remove checkbox column, make Message ID monospaced, make Signature a compact badge, and Retries a dot-only inline visual. |
+| 4 | Error-signature clusters list | List items with icon + title + count pill + tags; close to a generic SaaS list template; top border is the only flair. | Task rows with a bold colored left-border accent bar and inline metadata chips. | `19-pm-dashboard.png`: the "My Projects" rows with colored status pills (In Progress/Pending/Completed) and inline chat/attachment counts. | Each cluster gets a 3px left border matching its severity (red for E_CONN, amber for E_TIMEOUT, etc.); affected-source chips become compact inline text instead of gray pills; histogram height doubles to integrate visually. |
+| 5 | Inspector retry history | Sparse vertical list of "attempt N" with hollow circles and huge whitespace between entries; feels like a boilerplate timeline. | Schedule timeline with colored left duration bars showing time blocks between events. | `19-pm-dashboard.png`: the "Schedule" panel showing "Kickoff Meeting" with a green vertical left bar and the time range 01:00 PM to 02:30 PM. | Retry attempts become a connected vertical timeline: thin line segments between colored dots show elapsed time, with attempt duration/error-state labels inline between nodes. |
+| 6 | Message payload JSON block | Gray rectangle with raw JSON; no borders, no syntax highlighting, resembling an un-styled `<pre>` tag dropped into the panel. | Bordered monospace code block with a subtle light-blue active border and clean font stack. | `11-devconsole-a.png`: the "Filter code" textarea in the "Add JS filter" drawer with its light-blue perimeter border and monospace font. | Wrap payload in a framed JSON viewer with a 1px neutral border, monospace formatting, and mild key/string color differentiation (copper keys, gray strings). |
+| 7 | "How triage works" sidebar | Bulleted text block with generous padding; could exist on any generic help page; not integrated into the UI chrome. | Tabbed inline documentation panel with subsections for Basics / Parameters / Functions / Examples. | `11-devconsole-a.png`: the "Documentation" panel inside the filter drawer with tabs "Basics", "Parameters", "Functions", "Examples". | Replace the sidebar with a compact tabbed help strip: tabs for "Cluster", "Inspect", "Act" with concise parameter-style definitions, keeping it within the right column without text-only dead space. |
+| 8 | Mobile inspector sheet (msg_5521) | Stacked vertical replication of the desktop inspector; no mobile affordances, drag handle, or fixed action bar; feels like a shrunken web page. | Compact inner card grouping with clear section borders and a sticky bottom action row. | `04-finance-cards.png`: the "Exchange" card with its bordered inner section for currency selection (USD → EUR) separating controls cleanly. | Group metadata (source, queue, retries) into a bordered summary card; move "Reprocess this message" and "Purge" to a fixed bottom action bar; add a drag handle at the top of the sheet. |
+
+---
+
+## 4. VARIETY LEVERAGE
+
+Four patterns visible across the references that this screen does **not** use but should:
+
+1. **Inline time-series sparkline inside a value card** — `04-finance-cards.png`, the "Stock Market Tracker" card’s blue mini line chart under the main dollar value. Would replace the static "DEAD · 2H" tiny bar strip in the top metric card, giving a real trend of dead-letter arrival rate over the last 2 hours.
+
+2. **Semi-circular capacity gauge (arc / donut)** — `04-finance-cards.png`, the "Spending Summary" blue arc gauge showing spend vs limit. Would go into the **Queue health** section, replacing the flat horizontal progress bars with a compact visual that immediately signals "how full" per backend.
+
+3. **Timeline with colored vertical duration bars** — `19-pm-dashboard.png`, the "Schedule" section with green/blue/pink left bars indicating event blocks and time ranges. Would go into the **Inspector retry history**, transforming the sparse timestamp list into a dense graphic timeline where gaps between attempts are visible as intervals.
+
+4. **Tabbed inline documentation panel** — `11-devconsole-a.png`, the "Documentation" sub-drawer with tabs "Basics / Parameters / Functions / Examples". Would replace the generic **"How triage works"** bullet sidebar with a compact tabbed explainer integrated directly into the right column, reducing dead space and adding structure.
+
+---
+
+## 5. TOP 5 FIXES
+
+1. **Replace the five top stat cards with two dense specialized components** — an arrival-rate sparkline card (like Stock Market Tracker) + a total-parked gauge (like Spending Summary), because the current generic stat row is interchangeable with any SaaS template and wastes ~30% internal dead space.
+
+2. **Compress the failed-messages table to Confluent-style dense rows** (~36px height, no checkboxes, monospaced values, compact sort headers) to eliminate the ~20% dead space and match reference data density.
+
+3. **Add colored 3px left-border accent bars to error-signature cluster rows** (like Mondays "My Projects" status badges) to replace the current subtle top-border, making severity instantly scannable and elevating the list above a generic pattern.
+
+4. **Redesign the inspector retry history as a connected vertical timeline with colored duration segments** (like Monday's schedule time blocks) so the minutes between attempts become visible graphic intervals, not just sparse timestamp labels surrounded by whitespace.
+
+5. **Swap Queue health horizontal bars for compact semi-circular gauges per backend** (like Spending Summary) because text+progress-bar rows consume too much vertical space and directly fail the "dense, no dead space" quality bar.
+
+---
+
+## 6. FINAL
+
+**ACCEPT-WITH-FIXES**
diff --git a/.llm/runs/beta10--orchestrator/visual/_kimi-smoke.md b/.llm/runs/beta10--orchestrator/visual/_kimi-smoke.md
new file mode 100644
index 000000000..56cf764a4
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_kimi-smoke.md
@@ -0,0 +1,9 @@
+You are a senior design critic. Do exactly this, concisely:
+
+1. State your underlying model name/family in one line.
+2. Read these TWO dashboard screenshots with your Read tool:
+   - /home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/render/_visual-reports/V3-shots/liveflow--desktop--light.png
+   - /home/codex/repos/netscript-beta10/.llm/runs/beta10--orchestrator/render/_visual-reports/V3-shots/runinspector--desktop--light.png
+   In 3-4 sentences: do these two screens look TOO SIMILAR in layout/composition (same skeleton reused) or genuinely distinct per feature? Name the specific shared structures if similar (grid, hero, rails, gauges).
+
+If you genuinely cannot view/interpret images, write exactly: NO_VISION
diff --git a/.llm/runs/beta10--orchestrator/visual/_smoke.md b/.llm/runs/beta10--orchestrator/visual/_smoke.md
new file mode 100644
index 000000000..122cb04c3
--- /dev/null
+++ b/.llm/runs/beta10--orchestrator/visual/_smoke.md
@@ -0,0 +1,7 @@
+Do exactly two things, briefly (under 6 lines total):
+
+1. State your underlying model name/family in one line.
+2. Use your Read tool to open this image file and describe in ONE sentence what UI it shows, naming 2 concrete visible elements:
+   /tmp/claude-1000/-home-codex-repos-netscript-beta10/cd2ee104-ed45-4ed4-bcca-f960c60a1d84/scratchpad/shots-current/00-home--light.png
+
+If you genuinely cannot view/interpret images, write exactly: NO_VISION
diff --git a/.llm/runs/beta10--orchestrator/visual/references/01-synergy-hr-desktop.png b/.llm/runs/beta10--orchestrator/visual/references/01-synergy-hr-desktop.png
new file mode 100644
index 000000000..1dbdeba0a
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/01-synergy-hr-desktop.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/02-synergy-mobile-nav.png b/.llm/runs/beta10--orchestrator/visual/references/02-synergy-mobile-nav.png
new file mode 100644
index 000000000..cee377043
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/02-synergy-mobile-nav.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/03-analytics-cards.png b/.llm/runs/beta10--orchestrator/visual/references/03-analytics-cards.png
new file mode 100644
index 000000000..181291491
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/03-analytics-cards.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/04-finance-cards.png b/.llm/runs/beta10--orchestrator/visual/references/04-finance-cards.png
new file mode 100644
index 000000000..fbf465671
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/04-finance-cards.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/05-timeoff-workhour-cards.png b/.llm/runs/beta10--orchestrator/visual/references/05-timeoff-workhour-cards.png
new file mode 100644
index 000000000..6bbb0d4db
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/05-timeoff-workhour-cards.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/06-mobile-sheets.png b/.llm/runs/beta10--orchestrator/visual/references/06-mobile-sheets.png
new file mode 100644
index 000000000..e351427ab
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/06-mobile-sheets.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/07-chat-signin.png b/.llm/runs/beta10--orchestrator/visual/references/07-chat-signin.png
new file mode 100644
index 000000000..c7bb8273e
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/07-chat-signin.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/08-ref.png b/.llm/runs/beta10--orchestrator/visual/references/08-ref.png
new file mode 100644
index 000000000..8bf6d0d45
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/08-ref.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/09-ref.png b/.llm/runs/beta10--orchestrator/visual/references/09-ref.png
new file mode 100644
index 000000000..daf51923f
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/09-ref.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/10-ref.png b/.llm/runs/beta10--orchestrator/visual/references/10-ref.png
new file mode 100644
index 000000000..b5a55e1a5
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/10-ref.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/11-devconsole-a.png b/.llm/runs/beta10--orchestrator/visual/references/11-devconsole-a.png
new file mode 100644
index 000000000..adaa40972
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/11-devconsole-a.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/12-devconsole-b.png b/.llm/runs/beta10--orchestrator/visual/references/12-devconsole-b.png
new file mode 100644
index 000000000..a13ec2c3f
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/12-devconsole-b.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/13-devconsole-c.png b/.llm/runs/beta10--orchestrator/visual/references/13-devconsole-c.png
new file mode 100644
index 000000000..324ea333c
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/13-devconsole-c.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/14-ref.png b/.llm/runs/beta10--orchestrator/visual/references/14-ref.png
new file mode 100644
index 000000000..dfb4a9f3c
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/14-ref.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/15-ref.png b/.llm/runs/beta10--orchestrator/visual/references/15-ref.png
new file mode 100644
index 000000000..a308a4787
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/15-ref.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/16-ref.png b/.llm/runs/beta10--orchestrator/visual/references/16-ref.png
new file mode 100644
index 000000000..7d546c3cb
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/16-ref.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/17-ref.jpg b/.llm/runs/beta10--orchestrator/visual/references/17-ref.jpg
new file mode 100644
index 000000000..8e5b4236b
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/17-ref.jpg differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/18-ref.jpg b/.llm/runs/beta10--orchestrator/visual/references/18-ref.jpg
new file mode 100644
index 000000000..d0bdaad3a
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/18-ref.jpg differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/19-pm-dashboard.png b/.llm/runs/beta10--orchestrator/visual/references/19-pm-dashboard.png
new file mode 100644
index 000000000..f3e202027
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/19-pm-dashboard.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/20-ref.png b/.llm/runs/beta10--orchestrator/visual/references/20-ref.png
new file mode 100644
index 000000000..2b978d796
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/20-ref.png differ
diff --git a/.llm/runs/beta10--orchestrator/visual/references/21-flow-builder.webp b/.llm/runs/beta10--orchestrator/visual/references/21-flow-builder.webp
new file mode 100644
index 000000000..a8285a35b
Binary files /dev/null and b/.llm/runs/beta10--orchestrator/visual/references/21-flow-builder.webp differ