feat(web): Claude Design console — 3-column wire monitor (v0.20.0)

Adapt the Claude Design "Ratatoskr Console" prototype into the web SPA:
translate out of the .dc.html dialect (x-dc / sc-if / sc-for / {{}} /
DCLogic / external _ds CSS) into single-file / no-CDN / vanilla, and wire
all real /api/* fetch + SSE into its DOM. New 3-column command-console
replaces the tabbed telemetry layout; endpoint set + SSE vocab unchanged.

- left engine-ticker rail: DEBUG + ADMIN + tool/turn-lifecycle merged into
  one timeline (tickerAdd); tools-armed chips; full-detail Bifrost rail pane
  (endpoint / connected / consumer / caps / tools)
- center conversation: per-turn INLINE chain-of-thought
- right resizable affect console: dominant / canonical-mood centerpiece;
  bipolar PAD faders EACH with a turn-to-turn delta + sparkline; P×A mood
  orbit; relations metric rows; canonical directive
- light / dark theme toggle (dark default; full token override —
  surfaces + fg + borders + accent-as-text)
- inlined data-URI favicon (downscaled 1024->64px), kills /favicon.ico 404
- ticker spine re-anchored to a content-height wrapper (was scrolling out of
  view on auto-scroll)
- honest-shape (INV-001): dominant-emotion shows a real OCC emotion (Tier-1)
  or the canonical mood word (Tier-3), never a fabricated one; affect-derived
  grid drops non-emitted metrics (intensity / decay-tau)

All server routes unchanged. web_debug_surface.contract.md amended for the
presenter renames (renderBifrostState->renderBifrost, renderAffectPane->
renderConsole, setPersonaStrip removed).

Verified: pytest tests/test_web_* (84 passed) + node Playwright end-to-end
against personal :8081 (session open, Sindra seeded greeting, live turn SSE,
affect console + relations + bifrost detail, theme toggle, PAD deltas,
no favicon 404).

.gitignore

@@ -121,3 +121,7 @@ graphify-out/*
 *.db
 *.db-shm
 *.db-wal
+
+# Node deps (Playwright for web-UI DOM verification — see persistent-memory)
+node_modules/
+package-lock.json

docs/contracts/web_debug_surface.contract.md

@@ -3,7 +3,7 @@ contract_version: "2.1"
 module: "ratatoskr.web"
 purpose: "v0.19.2 web debug-surface parity: 3 admin/debug panes (Tools inventory, BifrostState, AdminEvents SSE) proxied server-side with the admin key server-held, plus a reliable PAD-refresh poll and a non-engine reasoning indicator in the transcript."
 target_module: "ratatoskr.web (server.py routes + entrypoint.py + static/index.html)"
-scope: "v0.19.2 web debug-surface parity — bring the browser surface (now the PRIMARY debug surface) to TUI parity. THREE new admin/debug panes proxied server-side + TWO transcript affordances. (1) Tools inventory: GET /api/sessions/{id}/tools proxies owner-scoped get_session_tools into the tools pane (what the LLM HAS at turn-fire), above the live tool events. (2) BifrostState pane: GET /api/sessions/{id}/bifrost proxies admin-scoped get_session_bifrost; the admin key is SERVER-HELD (app.state.admin_key from RATATOSKR_ADMIN_API_KEY), never sent to the browser. (3) AdminEvents pane: GET /api/admin/events is an SSE proxy of stream_admin_events, session-filtered SERVER-side (heartbeats + other-session events dropped), re-emitted under a fixed 'admin_event' name so every dotted type renders with one browser listener. (4) PAD refresh: the persona/affect pane polls a bounded window instead of a single 2s shot that raced the post-turn-async affect.emit. (5) Reasoning indicator: an ephemeral, clearly-non-engine transcript line on `thinking` deltas, cleared when text begins. Direct in-session TDD (the #17/#18 pattern); this contract is authored post-implementation to anchor the heid code review (the client wrappers get_session_tools/get_session_bifrost/stream_admin_events are already contracted in the sessions/sse_client specs — this contract governs the WEB proxy + presenter surface only)."
+scope: "v0.19.2 web debug-surface parity — bring the browser surface (now the PRIMARY debug surface) to TUI parity. THREE new admin/debug panes proxied server-side + TWO transcript affordances. (1) Tools inventory: GET /api/sessions/{id}/tools proxies owner-scoped get_session_tools into the tools pane (what the LLM HAS at turn-fire), above the live tool events. (2) BifrostState pane: GET /api/sessions/{id}/bifrost proxies admin-scoped get_session_bifrost; the admin key is SERVER-HELD (app.state.admin_key from RATATOSKR_ADMIN_API_KEY), never sent to the browser. (3) AdminEvents pane: GET /api/admin/events is an SSE proxy of stream_admin_events, session-filtered SERVER-side (heartbeats + other-session events dropped), re-emitted under a fixed 'admin_event' name so every dotted type renders with one browser listener. (4) PAD refresh: the persona/affect pane polls a bounded window instead of a single 2s shot that raced the post-turn-async affect.emit. (5) Reasoning indicator: an ephemeral, clearly-non-engine transcript line on `thinking` deltas, cleared when text begins. Direct in-session TDD (the #17/#18 pattern); this contract is authored post-implementation to anchor the heid code review (the client wrappers get_session_tools/get_session_bifrost/stream_admin_events are already contracted in the sessions/sse_client specs — this contract governs the WEB proxy + presenter surface only. v0.20.0 REDESIGN (Claude Design 'Ratatoskr Console' import): the tabbed telemetry column is replaced by a 3-column command-console — a left engine-ticker rail (the DEBUG + ADMIN + tool/turn-lifecycle feeds MERGED into one timeline via tickerAdd, plus a tools-armed chip list + a full-detail Bifrost rail pane) · a center conversation (per-turn INLINE chain-of-thought, replacing the separate Think pane) · a right resizable affect console (dominant/canonical-mood centerpiece + bipolar PAD faders each carrying a turn-to-turn Δ+sparkline + a P×A mood orbit + relations metric rows + canonical directive). ALL SERVER ROUTES UNCHANGED. Single-file/no-CDN/vanilla preserved; adds a light/dark theme toggle (dark default) + an inlined data-URI favicon. Presenter FN renames tracked below (renderBifrostState→renderBifrost; renderAffectPane→renderConsole; setPersonaStrip removed; tickerAdd/setFader/setFaderTrend/renderOrbit/renderDominant/renderDerived/renderRelations/renderDirective added). INV-001/INV-004 held.)."
 depends_on:
   - "httpx"
   - "starlette"
@@ -114,24 +114,24 @@ functions:
       - "POST-002: any non-200, fetch error, or parse error is swallowed (best-effort) — a blank transcript is acceptable; opening the workspace is never blocked."
     flexibility: "prescriptive"
 
-  - name: "web pane renderers (index.html: renderToolsInventory / renderBifrostState / openAdminEvents)"
-    signature: "renderToolsInventory(inv) ; renderBifrostState(b) ; openAdminEvents(sessionId)"
-    description: "Render the three new surfaces; all content escaped (INV-004)."
+  - name: "web pane renderers (v0.20.0: index.html: renderToolsInventory / renderBifrost / openAdminEvents + tickerAdd)"
+    signature: "renderToolsInventory(inv) ; renderBifrost(b) ; openAdminEvents(sessionId) ; tickerAdd(kind, msg, dim)"
+    description: "Render the debug/admin surfaces into the 3-column console; all content escaped (INV-004). v0.20.0: BifrostState is now a full-detail LEFT-RAIL pane (renderBifrost, renamed from renderBifrostState); AdminEvents + the raw debug/op log + tool_start/result + turn lifecycle are MERGED into one engine-ticker timeline via tickerAdd (openAdminEvents routes admin_event → tickerAdd; the turn SSE handlers route worker_phase/tool/text_boundary/affect_update → tickerAdd); Tools inventory is a rail chip list (renderToolsInventory)."
     postconditions:
-      - "POST-001: every dynamic value (agent_id, tool names/descriptions, endpoint, caps, admin event type + data) is passed through esc() or esc(JSON.stringify(...)); no upstream string reaches innerHTML unescaped."
-      - "POST-002: openAdminEvents closes a prior EventSource before opening a new one (state.adminES); the admin data blob renders via esc(JSON.stringify(d.data))."
-      - "POST-003: renderToolsInventory prepends the static inventory ABOVE live tool events without clobbering them (a re-render replaces only the .tools-inventory block)."
-      - "POST-004: the Tools inventory renders tool NAMES only — a compact comma-joined summary ('what does the LLM have', the debug glance); per-tool DESCRIPTIONS are surfaced in the BifrostState pane's tools list, deliberately NOT duplicated here. (Heid panel Hulda/Regin precision finding — accepted: contract wording clarified, code unchanged; the earlier 'names/descriptions' phrasing in INV-004 refers to the SET of value types that MAY appear across the new panes and must be escaped, not a mandate that every pane render descriptions.)"
+      - "POST-001: every dynamic value (agent_id, tool names/descriptions, endpoint, caps, consumer_id, admin event type + data, ticker msg/dim) is passed through esc() or esc(JSON.stringify(...)); no upstream string reaches innerHTML unescaped."
+      - "POST-002: openAdminEvents closes a prior EventSource before opening a new one (state.adminES) and, on stream_error, closes so native EventSource does NOT retry-loop; admin events render into the engine ticker via tickerAdd."
+      - "POST-003: renderToolsInventory renders builtin + bifrost tool NAMES as rail chips (a compact 'what does the LLM have' glance); renderBifrost renders endpoint + connected + consumer_id + capabilities_granted chips + per-tool name/description rows (the full detail, admin-gated; the admin key stays server-held). tickerAdd bounds the feed to the last 400 rows (a tail, not an archive)."
+      - "POST-004: tool NAME-vs-DESCRIPTION split preserved — the rail chip list shows names only; per-tool descriptions live in the Bifrost pane's tools list. The engine-ticker spine (.ticker-inner::before) lives on the content-height wrapper so it stays visible when auto-scrolled to the newest entry."
     flexibility: "open"
 
-  - name: "renderAffectPane + trend (v0.19.4 — relation_edge/1 render + sparkline)"
-    signature: "renderAffectPane(snap) ; pushAffectHistory(snap) ; sparkline(vals) ; trendDelta(vals)"
-    description: "Render the Tier-3 affect snapshot as PAD mood + the durable per-entity relational model, each value with a Δ-vs-previous + a session-lived sparkline."
+  - name: "renderConsole + trend (v0.20.0 — unified persona/affect console; supersedes renderAffectPane/renderPersonaPane/setPersonaStrip)"
+    signature: "renderConsole(snap) ; setFader(axis,v) ; setFaderTrend(axis) ; renderOrbit() ; renderDominant(snap) ; renderDerived(snap) ; renderRelations(snap) ; renderDirective(snap) ; pushAffectHistory(snap) ; sparkline(vals) ; trendDelta(vals)"
+    description: "ONE render path for BOTH the Tier-1 persona_state snapshot and the Tier-3 affect snapshot (renderConsole), feeding the right affect console: dominant/canonical-mood centerpiece, bipolar PAD faders (each with a turn-to-turn Δ + sparkline), a P×A mood orbit from PAD history, an affect-derived grid, relations metric rows, and the canonical directive. Replaces the v0.19.x split of renderPersonaPane (Tier-1 pane) + renderAffectPane (Tier-3 pane) + setPersonaStrip (top-bar strip, removed — PAD now lives in the console faders)."
     postconditions:
-      - "POST-001: reads snap.relations (relation_edge/1: target_entity + trust_ability/benevolence/integrity + warmth as {value,confidence,evidence_count} + agency + relation_context + obligation_balance) — the CURRENT Worldtree emit shape; falls back to the legacy flat snap.valence for an older emitter. SUPERSEDES the #18-D2 contract's valence assumption (Worldtree's #265 Vili rework replaced valence/regard with the relation_edge/trust model; the old renderer read snap.valence and showed an empty 'valence (0)' — the bug this fixes)."
-      - "POST-002: each metric shows current value + Δ-vs-previous (▲/▼) + a unicode sparkline auto-scaled to its OWN observed range (flat ▄ when sub-0.01 stable — no noise amplification), drawn from AFFECT_HIST (rolling, HIST_CAP=24, session-lived)."
-      - "POST-003: pushAffectHistory dedupes by emitted_at so the ~4x/turn post-turn PAD poll contributes ONE sample/turn; history is CLIENT-side only (lost on reload — durable cross-session history via a provider-side snapshot log is a deferred follow-up, NOT built here)."
-      - "POST-004: INV-001 honesty — no fabricated Tier-1 fields (no synthesized dominant_emotion). INV-004 — head() escapes its whole argument (incl. target_entity + relation_context from the snapshot) and metric() escapes every cell; numeric values go through toFixed, never innerHTML-raw."
+      - "POST-001: reads snap.relations (relation_edge/1: target_entity + trust_ability/benevolence/integrity + warmth as {value,confidence,evidence_count} + agency + relation_context) — the CURRENT Worldtree emit shape; falls back to the legacy flat snap.valence for an older emitter. Tier-1 fields (baseline_pad, mood_drift, dominant_emotion, emotions_active) render WHEN PRESENT, '—' when absent (Tier-3 lacks them)."
+      - "POST-002: each PAD fader + relation metric shows current value + Δ-vs-previous (▲/▼) + a unicode sparkline auto-scaled to its OWN observed range (flat ▄/— when sub-0.01 stable — no noise amplification), drawn from AFFECT_HIST (rolling, HIST_CAP=24, session-lived). setFaderTrend fills the per-meter Δ+spark slots; renderOrbit plots the last N (P,A) samples as a scaled trail with a pulsing current marker."
+      - "POST-003: pushAffectHistory dedupes by emitted_at||last_updated_at so the ~4x/turn post-turn PAD poll contributes ONE sample/turn; history is CLIENT-side only (lost on reload — durable cross-session history via a provider-side snapshot log is a deferred follow-up, NOT built here)."
+      - "POST-004: INV-001 honesty — no fabricated Tier-1 fields. The dominant-emotion centerpiece shows a real OCC dominant_emotion (Tier-1) OR the CANONICAL mood word from canonMood(pad) (Tier-3, dimmed) OR '—'; NEVER a synthesized emotion. The affect-derived grid drops non-emitted metrics (intensity/decay-τ) and shows only real/client-derived cells (baseline/drift real for Tier-1, client-derived samples/volatility). INV-004 — every dynamic value passes through esc(); numerics go through toFixed, never innerHTML-raw."
     flexibility: "open"
 
   - name: "canonical affect-NL (v0.19.5 — vendored Worldtree d2 render canons)"

docs/design/ratatoskr-web-design-brief.md

@@ -0,0 +1,270 @@
+# Design brief — `ratatoskr-web` (Worldtree wire monitor)
+
+> **For:** a visual design pass (Claude Design). **Deliverable:** a single
+> self-contained HTML prototype, fully populated with representative static
+> data, that an engineer will wire live data into. **Do not** build a data
+> layer — build the *shell* and *every state*, beautifully, with placeholder
+> content in every slot.
+
+---
+
+## 1. What you're designing
+
+`ratatoskr-web` is a **developer-grade debug/observability console** for a
+conversational-AI engine (Worldtree). Its tagline is *"wire monitor"*: you open
+a session with an AI agent, send it turns, and **watch that turn flow through
+every layer of the system at once** — the streaming response, the model's
+chain-of-thought, the tools it can call, the agent's live emotional/persona
+state, the provider handshake, and the engine's admin lifecycle events — all
+side-by-side on one screen.
+
+**The product IS the observability surface. Chat is just the input.** This is
+not a chat app, not a marketing page, not an end-user product. The user is one
+developer (occasionally a few LAN peers) staring at a dense instrument to debug
+what the engine is doing. Think **oscilloscope / flight-data console / a well-lit
+`htop`**, not a messaging UI.
+
+**Design values, in priority order:**
+1. **Information density earns the screen.** Every region shows live, changing
+   data. Nothing is decorative filler. A quiet, legible, glanceable density is
+   the whole point — the user reads six data streams at a glance.
+2. **Calm under motion.** Multiple regions update in real time (token streams,
+   live metrics, event logs). The design must stay readable while things move —
+   no jitter, no attention-grabbing per-item animation. Motion is for *state
+   change*, used sparingly.
+3. **Legibility first.** Monospace, high contrast where it counts, generous but
+   not wasteful spacing. This runs for hours; it must not tire the eye.
+
+---
+
+## 2. Aesthetic direction — Australis
+
+Use the **Australis design system** (a cool-toned, terminal-first dark theme —
+the `australis-design` skill has the canonical tokens: colors, spacing, radii,
+shadows, motion). Import/inline `colors_and_type.css`; don't reinvent tokens.
+
+Non-negotiables from the brand:
+- **Dark only.** Base is a cool near-black **`#222531` — never pure `#000`.**
+  The eye rests in low-contrast cool grey; **emphasis comes from *brightness*,
+  not saturation.** Layer surfaces up the Sea neutral ramp (`#222531 →
+  `#373b46` → `#414751`).
+- **Palette families:** *Ice* (surface neutrals), *Aurora* (blue → cyan → green,
+  the primary accents — used generously in that preference order), *Dawn*
+  (red/yellow/magenta — sparingly, for status only). Semantic: info=blue,
+  success=green, warning=yellow, danger=red.
+- **The signature motif is the aurora glow** — a low-opacity cyan→blue→green
+  light coming *through* the top of the screen, plus a 3px aurora focus ring on
+  interactive controls. Lean into this as the one memorable thing.
+- **No noise, no textures, no patterns.** *"The screen is the polar sky — empty,
+  with light coming through it."* The one sanctioned gradient is the aurora glow.
+- **Never a colored left-border on cards** (the LLM-slop trope). Featured cards
+  accent the *top* edge instead.
+- **Type:** this instrument is **mono-first** — that IS on-brand for Australis
+  ("terminal-first"). Use a monospace stack (JetBrains Mono / system mono; see
+  §9 — no web-font CDN allowed). Eyebrows/labels are **mono, UPPERCASE, ~11px,
+  wide-tracked (`0.08–0.16em`)** — use them liberally; they're a system
+  signature.
+- **Motion:** calm, never bouncy. ~120ms hover, ~200ms state, ~320ms panels.
+  Focus = aurora glow ring. Hover = one step *brighter* (not lower opacity).
+  A slow (8–14s) aurora drift on a hairline top band is welcome; nothing else
+  should loop.
+
+The current UI already borrows this palette — you're not inheriting it, you're
+**redesigning the layout and craft from scratch** with the brand as the guide.
+Feel free to rethink the spatial composition entirely (see §10).
+
+---
+
+## 3. The two screens
+
+### Screen A — **Session setup** (entry)
+A single centered card on the aurora canvas. Fields:
+- **Agent** — a `<select>` (populated live; show 3–4 sample options incl.
+  `ratatoskr:sindra`, `forseti`, `mimir`).
+- **Bifrost binding (Tier-3 provider)** — a `<select>`: `combined (:8392)` /
+  `none — observe only` / `memory (:8391)` / `affect (:8390)`.
+- **Open session** — primary button.
+- An error line (design the error state too — e.g. "agent not available").
+
+### Screen B — **Live workspace** (the main event — 95% of the design effort)
+Persistent top bar + status line spanning full width; between them a **two-region
+body: a conversation column (left, dominant) and a telemetry column (right,
+tabbed).** Current split is ~1.85 : 1 — you may re-proportion. The information
+inventory below is exhaustive; **every item needs a home.**
+
+---
+
+## 4. THE COMPLETE INFORMATION INVENTORY
+
+This is the core of the brief. Design a slot for **every** item, in a sensible
+state. Data shapes are given so your placeholders read true.
+
+### 4.1 Top bar (persistent)
+| Item | Shape / example | Notes |
+|---|---|---|
+| Brand | `ᛯ ratatoskr` + eyebrow `WIRE MONITOR` | the mark is a rune glyph; small |
+| **Connection status** | one of: `offline`, `connected` (idle), `streaming`, `error` | dot + label; **streaming pulses**; color-coded (grey/green/cyan/red) |
+| **Persona strip** (appears after a session hydrates) | dominant-emotion word (`love`) + **PAD bars**: `P`, `A`, `D` | each PAD bar is **bipolar** — centered on 0, fills left (negative) or right (positive), value ∈ [−1, 1]; **live-updates every turn** |
+| Session identity | `ratatoskr:sindra · …381b99f4` | agent id + last-8 of session id |
+| Bound-plane badge (when bound) | `⇄ combined  http://10.100.10.50:8392` | plane + endpoint; only when a Bifrost binding is active |
+
+### 4.2 Conversation column (the transcript + composer)
+The transcript is a scrollable stream of turns. Design each element:
+
+| Element | Example content | Notes |
+|---|---|---|
+| **Turn divider** | `TURN 3` between hairlines | uppercase eyebrow, rule lines each side |
+| **User prompt echo** | `❯ what's your intensity setting?` | the user's message, accent-marked |
+| **Assistant response** | streaming **Markdown** (headings, bold, italic, `code`, lists, quotes, links) | accumulates token-by-token while live; distinct "live" treatment vs settled |
+| **Seeded first-message** | a full assistant turn present *before the user speaks* (an authored greeting) | renders **identical to a lived assistant turn** — the session can OPEN already showing the agent's opener |
+| **Reasoning / "thinking" note** | `✦ sindra is reasoning···` (italic) | **ephemeral** app affordance — appears while the model reasons, vanishes the instant real text begins; visually distinct from the response so it never reads as engine output |
+| **Awaiting-first-token** | `···` animated | heartbeat before the first token |
+| **End-of-turn status chips** | `✓ DONE 1.84s` · `✗ ERROR agent_not_available` · `⚠ CANCELLED` · `✗ WIRE lost` | small bordered chips; color per state |
+| **Composer** (pinned bottom) | `❯ [ message input ]  [SEND]` | Enter=send, Shift+Enter=newline; during a turn the Send button becomes **CANCEL** (amber) |
+
+### 4.3 Telemetry column (six tabbed panes)
+A tab bar + a pane header (with a **Copy** button) + the active pane body.
+
+**Tabs** (each: name · keybinding hint · a count **badge** that *flashes* on new
+data): `TOOLS ^1` · `DEBUG ^2` · `THINK ^3` · `PERSONA ^4` · `BIFROST ^5` ·
+`ADMIN ^6`. Active tab is accent-marked.
+
+Pane contents — design each, populated:
+
+1. **Tools** — the tool inventory the model saw at turn-fire:
+   `agent_id`, `builtin_tools[]` (names), `bifrost_tools[]` (name + description +
+   parameters). Below it, **live tool-call events** stream in (`tool_start` →
+   `tool_result`) as the turn runs. Empty state: `— live tool events —`.
+2. **Debug** — a raw structured op/lifecycle log (mono lines; new lines flash
+   once). Think `tail -f`.
+3. **Think** — the model's **full chain-of-thought**, per-turn dividers,
+   live-Markdown. Longer prose than the response.
+4. **Persona / affect** — *the richest pane.* Contains:
+   - **The canonical NL directive** the engine injects into the agent's context
+     — the literal text: a **mood descriptor** ("neutral", "faintly excited",
+     ±0.3 bands) + a **relationship directive**. Show this verbatim, quoted.
+   - **PAD mood point** — pleasure / arousal / dominance current values.
+   - **relations[]** — for each related entity (e.g. the user): **trust**
+     (ability / benevolence / integrity), **warmth**, **agency**,
+     `relation_context` (a tie-type word like "stranger" / "expressive"), each as
+     a **metric row**: `label · value · Δ-since-last (▲/▼) · unicode sparkline ·
+     n (evidence count) · descriptor`. Values are 0–1 with 2–3 decimals.
+   - **dominant_emotion** (an OCC type: joy/anger/fear/…) + **emotions_active[]**.
+   - Design the **metric row** as a reusable component — it's the densest,
+     most-repeated element in the whole UI. Tabular-aligned numbers, a tiny
+     inline sparkline, a subtle up/down Δ.
+5. **Bifrost** — the live provider binding (admin-gated): `endpoint`,
+   `connected` (bool), `capabilities_granted[]`, `consumer_id`, `tools[]`.
+   **Self-labeling states:** `not configured` (no admin key) / `not bound`
+   (session has no live binding) / an auth-denied state.
+6. **Admin events** — a live event log of the engine's lifecycle broadcast
+   (a ~17-type vocabulary: `turn.started`, `session.created`, `system.*`, …),
+   filtered to the active session. Streaming; timestamped lines.
+
+### 4.4 Status line (persistent, bottom)
+- **Keybinding legend:** `Enter send · ⇧Enter newline · ^1–^6 panes · ^C cancel`
+  (rendered as little `kbd` chips).
+- **Version:** `ratatoskr 0.19.9` (right-aligned).
+
+---
+
+## 5. States to design (show these explicitly)
+
+Provide a mock (or a toggle) for each — these are where debug UIs live or die:
+
+- **Setup:** loading-agents · ready · create-error.
+- **Connection:** offline · connected/idle · streaming (pulsing) · wire-error.
+- **Turn lifecycle:** awaiting-first-token · reasoning (✦) · streaming response ·
+  done (+timing chip) · error · cancelled.
+- **Panes:** empty/placeholder · hydrated/dense · **not-configured** (admin key
+  absent) · **not-bound** (Bifrost) · error · a **badge flash** on new data.
+- **Persona pane specifically:** a fully-populated relations block AND a
+  cold/empty one (a fresh agent with no accumulated state).
+
+---
+
+## 6. Interaction & motion
+
+- **Real-time is the defining trait.** The response + thinking panes stream
+  token-by-token; the metric rows tick; event logs append; the persona strip
+  re-animates each turn. Design so all of this is *calm* — the reader's eye
+  isn't yanked around. Reserve motion for genuine state transitions
+  (turn-start, done, a new event) and keep it short.
+- **Keyboard-first.** `^1–^6` switch panes; `Enter`/`⇧Enter`/`^C` drive the turn.
+  Panes are also clickable. Show focus states.
+- **The aurora glow is the interaction signature** — focus rings, the top band,
+  the connection pulse, the primary-button hover. Make it the thing someone
+  remembers.
+- **Copy-to-clipboard** on each pane header (with a copied-confirm state).
+
+---
+
+## 7. Layout — you have latitude
+
+The current layout is a fixed two-column split. **You may rethink it** — as long
+as every §4 item has a legible home and the density stays high. Directions worth
+exploring (pick one, commit):
+- A **command-console** feel: a slim persistent left rail of "instruments," a
+  dominant conversation center, a right telemetry stack.
+- A **grid of live tiles** (the metrics/panes as a dashboard) with the
+  conversation as the anchor column.
+- The **classic monitor** split, but with far better hierarchy, grouping, and
+  breathing room than today.
+
+Desktop-first; design at **1440–1512px** wide. Graceful down to ~1100px is a
+plus (this runs on a dev laptop). No mobile.
+
+---
+
+## 8. Deliverable — what to hand back
+
+**A single self-contained `index.html`** (inline `<style>` + `<script>`; see §9
+constraints) that:
+1. Renders **Screen A** and **Screen B** (a toggle/hash is fine).
+2. Has **representative static placeholder data in every §4 slot** and shows the
+   key §5 states (either multiple mocks or lightweight JS toggles). I want to see
+   the design *fully populated and dense*, not empty scaffolding.
+3. Uses **clean, semantic, stable hooks** — meaningful `id`s / `class`es /
+   `data-*` on every dynamic slot (the transcript container, each pane body, the
+   PAD bars, a metric-row template, the connection dot, the tab badges, etc.).
+   This is how I wire real data in — treat the DOM structure as an API.
+4. Imports/inlines the Australis tokens; no invented palette.
+
+I will then **swap your placeholder content for live `fetch()` + `EventSource`
+calls** against the real endpoints (§9). The cleaner and more component-shaped
+your DOM, the faster and safer that wiring is. A short note listing your mount
+points / how you'd expect data injected is very welcome.
+
+---
+
+## 9. Hard technical constraints (these make it wire-able)
+
+- **Single file. No build step. No CDN. No external network at runtime.** This
+  ships to an internal LAN and must work offline. That means: **no Google Fonts /
+  no web-font CDN** (use a system monospace stack), no CDN JS/CSS libraries,
+  everything inline. (Icons: use unicode glyphs `➜ ✓ ✗ ! ● ✦ ❯` or hand-inlined
+  SVG — Australis uses Lucide-style 1.75-stroke line icons; inline them.)
+- **Vanilla HTML/CSS/JS.** No framework (the production app is framework-free
+  vanilla JS). React/Vue prototypes can't be wired in.
+- **All dynamic text is escaped** on the real side (untrusted upstream content);
+  assistant/reasoning bodies go through a safe-Markdown renderer (escape-first,
+  whitelist subset). Don't design anything that depends on raw HTML injection.
+- **The real data contracts** (so your structure maps to the wire — you don't
+  implement these, just leave homes for their outputs):
+  - `GET /api/agents` → agent list (for the setup picker).
+  - `POST /api/sessions {agent_id, bifrost_plane?}` → `{session_id, agent_id, bifrost?}`.
+  - `GET /api/sessions/{id}/messages` → `{items:[{seq, role, content}], …}` (the transcript on open, incl. the seeded first-message).
+  - `POST /api/turns/{id} {content}` → `{turn_id}`, then **`GET /api/turns/{id}/stream` (SSE)** — event vocab: `text`, `thinking`, `tool_start`, `tool_result`, `done`, `error`, `awaiting_llm_first_token`, terminal events. `POST /api/turns/{id}/cancel`.
+  - `GET /api/sessions/{id}/tools` → tool inventory. `GET /api/sessions/{id}/bifrost` → binding state.
+  - `GET /api/affect/{agent_id}` / `GET /api/agents/{id}/persona_state` → PAD + relations + dominant_emotion (the persona pane + strip).
+  - **`GET /api/admin/events` (SSE)** → the admin lifecycle log.
+
+---
+
+## 10. Tone check
+
+The user is an engineer who respects the tool that respects *their* attention.
+The winning design is **quietly excellent**: dense but never cramped, alive but
+never busy, cool and legible, with the aurora as a single confident signature.
+Impress by making six live data streams feel *calm and readable at a glance* —
+that's the hard, valuable thing here, not decoration.

persistent-memory.md

@@ -39,9 +39,11 @@ upstream API key stays server-side (INV-003).
 
 ## Current state / in-flight
 
-_As of 2026-07-06:_
+_As of 2026-07-06 (session cont.):_
 
-**LATEST (2026-07-06 cont.): #347 authored-history-write CONSUMER SIDE SHIPPED (`v0.19.6`) + OpenAPI re-vendored 2.2.0->2.3.0 (`75da676`).** worldtree-dev shipped #347 as spec 2.3.0 (deployed on personal b22 `879cefe`); ratatoskr built the consumer side via direct in-session TDD: `write_authored_history` (POST /sessions/{id}/history) + `get_session_messages` (un-deferred read-back) + a `--seed-first-message` one-shot probe (create session -> seed -> read-back), with **404-as-feature-absent per hide-existence** (`AuthoredHistoryUnavailable`, distinct from SessionApiFailed; caller never capability-probes). Contract #2 amended + TDD (19 new tests; suite 601 green; ruff clean; mypy only the sibling-consistent `resp.json()` no-any-return). Coverage-map re-converged: **REST 19/41** (#347 route + messages read-back close the one gap the re-vendor opened). **LIVE-PROVEN 2026-07-06 on personal :8081.** Vuong approved the `session.history.write` grant; worldtree-dev authored a **rule-based Heimdall allow** (the PDP is rule-based, NOT scope-on-key -- our key user_id=ratatoskr is unchanged; policy: user_id=ratatoskr->ALLOW, all others->DENY with hide-404 preserved), applied to personal's bind-mounted `policies.yaml` by infra-ops. Smoke: create mimir session -> seed -> **201** (seq=0, phase=seeded, turn_id=1798) -> GET /messages reads it back as a plain role=assistant turn (**model-invisible provenance confirmed**). The full #347 consumer side is now live-proven; hide-404 for ungranted stays unit+probe covered. **OPEN TAIL-2 (worldtree-dev `c9e59ec`, LOCAL not-yet-origin):** Tier-3 persona/memory/persona_state PROSE docs landed in `docs/conversation-api-spec.md` § "Tier 3" (they serialize as freeform `Any` in the OpenAPI JSON, hence prose-not-schema) -> (a) prose markdown re-vendor pending (tolerate_drift pin), (b) a **likely `set_persona_state` body-shape drift to align**: my `--set-persona-pad` sends `{pad:[list]}`, the doc's canonical is `{pad:{pleasure,arousal,dominance}}` (PAD-only #317, pull-over-push #289, cross-owner 404; never live-proven so untested). worldtree-dev foot-guns: persona.ocean = SINGLE-LETTER UPPERCASE `{O,C,E,A,N}` on /agents/define (spelled-out -> 422; the #348 mismatch) vs spelled-out lowercase on POST /characters; memory = `{embedder_version(==pinned else 422), tier3_dreaming}`, stm_* deprecated no-ops, allows_world_scope removed->422; only `valence` still 422s (layer_deferred).
+**SHIPPED — web UI redesign via Claude Design (`v0.20.0`, MINOR, operator-approved).** The Claude Design prototype **`Ratatoskr Console.dc.html`** (project `bc0b65d1-a33e-422a-8bc1-3635c9112775`) was pulled via `DesignSync get_file` (design scopes already granted this session — no `/design-login` needed) and adapted into `src/ratatoskr/web/static/index.html`: translated OUT of the `.dc.html` dialect (`<x-dc>`/`<sc-if>`/`<sc-for>`/`{{}}`/`DCLogic`/external `_ds/` CSS — none runnable) into single-file/no-CDN/vanilla, with ALL real `/api/*` fetch + SSE wired into its DOM (endpoint set + SSE vocab unchanged from the prior SPA — ported verbatim, only DOM hooks re-targeted). New shape = a **3-column command-console**: left engine-ticker rail (DEBUG+ADMIN+tool/turn-lifecycle MERGED into one timeline via `tickerAdd` + a tools-armed chip list + a FULL-detail Bifrost rail pane) · center conversation (per-turn INLINE chain-of-thought, replacing the Think pane) · right RESIZABLE affect console (dominant/canonical-mood centerpiece + bipolar PAD faders EACH with a turn-to-turn Δ+sparkline + a P×A mood orbit + relations metric rows + canonical directive). ADDED (round 2, operator-requested): a **light/dark theme toggle** (dark default; FULL token override — surfaces+fg+borders+accent-as-text, since the designer's light theme only did surfaces → would've been light-on-light) + a **full-detail Bifrost pane** (endpoint/connected/consumer/caps/tools) + fixed the **engine-ticker spine** (was a container-anchored `::before` that scrolled out of view on auto-scroll → re-anchored to a content-height `.ticker-inner` wrapper) + **per-fader PAD turn-to-turn Δ+sparkline** (fills the room beside each meter, from the deduped-per-turn AFFECT_HIST) + an **INLINED data-URI favicon** (operator's `/home/lkraven/rata.png` — chibi aurora squirrel — downscaled 1024→64px via PIL, ~8.6KB base64, kills the /favicon.ico 404). ALL server routes UNCHANGED (**84 web tests green**). Verified BOTH lenses: `pytest tests/test_web_*` (84) + node Playwright drove the real UI end-to-end against personal :8081 (session open → Sindra seeded greeting → live turn SSE → affect console + relations + bifrost detail; theme toggle + PAD deltas + ticker spine + no-favicon-404 all confirmed, dark+light screenshots). `:8765` restarted on the new code. Contract `web_debug_surface.contract.md` amended in-commit (v0.20.0 presenter renames: `renderBifrostState`→`renderBifrost`, `renderAffectPane`→`renderConsole`, `setPersonaStrip` removed; INV-001/INV-004 held). **HONEST-SHAPE call (INV-001, agent-discretion within settled policy):** the dominant-emotion centerpiece shows a real OCC emotion (Tier-1) OR the CANONICAL mood word (Tier-3 e.g. Sindra→"positive and energized", dimmed) OR "—", NEVER a fabricated emotion; the affect-derived grid drops non-emitted intensity/decay-τ, shows only real/client-derived cells. **OPEN (operator's call):** the per-fader PAD Δ placement is a sensible default — operator offered to have the designer spec the exact treatment (hooks are in place to swap it).
+
+**SHIPPED THIS SESSION (all pushed; origin/main == `d75c4e8`; code tip `v0.19.9`) — details in Recent decisions:** the whole **#347 authored-history-write** arc landed end-to-end — OpenAPI re-vendor 2.2.0->2.3.0 (`75da676`), the CONSUMER side (`v0.19.6`: `write_authored_history` + `get_session_messages` + `--seed-first-message`, **live-proven on personal :8081** via a rule-based Heimdall allow — the PDP is rule-based NOT scope-on-key, policy user_id=ratatoskr->ALLOW/others->DENY-hide-404), persona_state `{pad:{pleasure,arousal,dominance}}` canonical alignment (#317) + Tier-3 prose re-vendor (`v0.19.7`), the **first-message-preset AUTO-SEED** (`v0.19.8`: new module `ratatoskr.first_message` wired into all 3 session-create paths, best-effort never-raise/never-block; heid-code-review + heid-bug-hunt hardened), and the web now RENDERS the seeded first-message (`v0.19.9`: new `GET /api/sessions/{id}/messages` route + SPA `loadTranscript`, Playwright-verified). Coverage-map re-converged **REST 19/41**. **Sindra:** her card was PATCHed (the `Startup:` workaround moved into a #347 first-message; non-destructive PATCH — OCEAN/persona/memory intact), and she's currently **RESET clean (0/0)** on the provider stores.
 
 **Prior arcs this session (2026-07-04 -> 07-06), both with worldtree-dev (a tooling script + proposal docs; the #347 CONSUMER work above is the new production code):**
 
@@ -165,6 +167,9 @@ decision. Captures rationale that won't be obvious from code alone.
 
 - `[2026-07-06]` **Web UI now RENDERS the seeded first-message (`v0.19.9`) — operator-reported "i don't see Sindra's greeting on the web ui".** Diagnosis: the auto-seed WORKED (greeting was in the ledger at seq-0), but the web SPA never fetched a session's EXISTING history — NO `/api/sessions/{id}/messages` route (GET /messages was originally deferred out-of-scope; sessions used to start empty so it never mattered) and `startSession()` went straight from create → persona/tools/admin hydration, so the transcript only filled from the live turn stream + user echoes. Fix: (1) NEW web proxy route `GET /api/sessions/{id}/messages` → `get_session_messages` (mirrors the tools/bifrost proxies; status-preserving `session_messages_unavailable` envelope); (2) SPA `loadTranscript(sessionId)` — fetches the route on open, renders assistant items as `.response .md-body` (markdownSafe, same escape-first path as appendResponse) + user items as `.prompt-echo` (textContent), called in `startSession` after the workspace opens; best-effort (swallows failures). Contract `web_debug_surface.contract.md` amended (server endpoint + loadTranscript entries). TDD (2 web route tests, suite 617 green) + **Playwright DOM check PROVED the render** (drove the real UI: pick sindra → open → her greeting bubble appears — the JS-render lens unit tests can't reach; [[feedback_debug_surface_uses_canonical_surface_only]] cousin lesson). Web restarted on the fix. **FOOT-GUN (self-inflicted): `pkill -f "ratatoskr-web --host"` SELF-MATCHES the bash command running it → exit 144, killed its own restart mid-flight — kill the web by PID, never `pkill -f` on a pattern your own command contains.** **FOOT-GUN: uvicorn hangs on SIGTERM with an open admin-events SSE → needed SIGKILL.** **Playwright: python module absent from the venv; use node + `executablePath=/opt/ms-playwright/chromium-1223/chrome-linux64/chrome` — the shared browser is build 1223, npm-latest playwright wants 1228 (version-mismatch), so pin executablePath instead of letting playwright resolve.**
 
+- `[2026-07-06]` **Web UI: pivot from incremental CSS polish to a designed prototype (Claude Design) that I wire into.** Operator saw an Australis polish pass ("looks fine, but we're attacking it differently") and chose the prototype route — a designer builds the visual shell, I wire real data/SSE into its DOM. Authored the full design brief `docs/design/ratatoskr-web-design-brief.md` (complete information inventory of every pane/datum/state + Australis direction + single-file/no-CDN/vanilla wire-ability constraints). **Tracking surface:** the brief file + Claude Design project `bc0b65d1-a33e-422a-8bc1-3635c9112775` (file `Ratatoskr Console.dc.html`). Import mechanism = the `DesignSync` MCP; blocked on `/design-login` (claude.ai design scopes) — see Current state for the post-auth wiring plan.
+- `[2026-07-06]` **Claude Design console SHIPPED (`v0.20.0` MINOR, operator-approved) — see Current state for the full record.** Pulled via `DesignSync get_file` (scopes already granted), adapted `.dc.html`→vanilla single-file, wired all `/api/*`+SSE into the new 3-column console DOM, then a round-2 fixup (light theme, full Bifrost pane, ticker-spine fix, per-fader PAD Δ, inlined favicon). 84 web tests + node-Playwright-vs-personal-:8081 both green; contract amended in-commit; INV-001 honest-shape held (canonical mood word for Tier-3, no fabricated emotion). **Foot-guns reconfirmed:** the `.dc.html` dialect is NOT runnable (translate, don't paste); a scroll-container-anchored `::before` timeline spine scrolls out of view on auto-scroll (anchor it to a content-height inner wrapper instead); a favicon 404 shows as a browser `console.error` even when handled (don't count it as a JS-test failure). **Foot-gun (favicon):** operator PNGs are full-res (1024² / 805KB) — downscale to ≤64px before inlining as a data URI.
+
 _41 older entries (2026-05-* — the original debug-TUI/web build era) archived to archival-memory.md._
 
 _For per-issue TDD implementation notes, Volva findings, and contract amendments, see the git log — every per-issue commit carries a structured message capturing the trail._
@@ -210,4 +215,9 @@ defense against re-attempting the same cul-de-sac.
 - `[2026-07-06]` **A fast/"no-op" deploy can leave a STALE container running the old image -- verify the running version, not the deploy status.** Personal's b22 deploy (run 8204) "completed" in ~1m (vs ~6m normal): a pull-only deploy racing ahead of the main build, leaving the container on the pre-#348 image. A clean bound mood read stayed neutral DESPITE the persona being declared and the fix being in the code (worldtree-dev proved the b22 derivation is correct). infra-ops force-swapped to the real b22 (run 8211, verified `info.version 2.3.0` on `879cefe`). **Lesson: when engine-proven-correct code produces wrong runtime behavior, suspect the deploy -- check the actual running image version.**
 - `[2026-07-06]` **#348 OCEAN key-mismatch: a declared OCEAN silently resolved to neutral.** The define validator required single-letter `{O,C,E,A,N}` but the mood-derivation code read spelled-out `openness`/.../`neuroticism` with a 0.0 default and no remap -> every API-declared trait defaulted to 0.0 -> neutral setpoint/gain/decay. #343's tests bypassed the validator (spelled-out keys) so CI never caught it. Fixed in b21 (`Personality.from_config` accepts both key forms). **My reset+smoke diagnosis flushed it out** -- the consumer/provider thesis paying off again.
 
+- `[2026-07-06]` **`pkill -f "ratatoskr-web --host"` SELF-MATCHES the bash command running it** (its own command line contains that string) -> killed its own shell mid-restart (exit 144, restart aborted, :8765 left down). Kill the web by PID (`ss -ltnp | grep :8765`), never `pkill -f` on a pattern your own command contains. Also: **uvicorn hangs on SIGTERM with an admin-events SSE stream open -> needs SIGKILL.**
+- `[2026-07-06]` **Playwright: no python `playwright` module in the venv; use NODE playwright + an explicit `executablePath`.** Shared box browsers live at `/opt/ms-playwright` build **1223**; `npm i playwright` (latest) wants build **1228** -> "Executable doesn't exist" mismatch. Fix: `chromium.launch({ executablePath: '/opt/ms-playwright/chromium-1223/chrome-linux64/chrome' })` (+ `export PLAYWRIGHT_BROWSERS_PATH=/opt/ms-playwright`). A node script drives the SPA (pick agent -> open -> assert transcript). The Playwright DOM check is the only lens that catches SPA JS-render bugs — unit tests can't reach them.
+- `[2026-07-06]` **The Bash tool's `grep` is a ugrep-wrapper (`--ignore-files -I`) that silently returns NOTHING on some files** (e.g. `src/ratatoskr/web/static/index.html`) — greps for `<script`/`/api` came back empty on a file that clearly contains them. Use `python3` (regex over `open(f)`), `/usr/bin/rg`, or the Read tool for those files; never trust an empty `grep` result on the SPA.
+- `[2026-07-06]` **`DesignSync` (claude.ai/design MCP) needs claude.ai design scopes before ANY method works** — first call errors `needs a claude.ai login ... Run /login, select "Claude account with subscription"`. It's an interactive auth only the operator can complete (`/design-login` or `/login`); can't be done on their behalf.
+
 _18 older entries (2026-05-* — the original debug-TUI/web build era) archived to archival-memory.md._

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "ratatoskr"
-version = "0.19.9"
+version = "0.20.0"
 description = "Worldtree Conversation API debug TUI — multi-pane observability dashboard"
 readme = "README.md"
 requires-python = ">=3.12"

uv.lock

@@ -1052,7 +1052,7 @@ wheels = [
 
 [[package]]
 name = "ratatoskr"
-version = "0.19.9"
+version = "0.20.0"
 source = { editable = "." }
 dependencies = [
     { name = "httpx" },