From 922ef34b4862c9a003ba8d4c449c4d8a8239c546 Mon Sep 17 00:00:00 2001
From: Vuong Hoang <vh@phasefinal.com>
Date: Fri, 29 May 2026 21:42:36 -0700
Subject: [PATCH] =?UTF-8?q?feat(web):=20frontend=20redesign=20=E2=80=94=20?=
 =?UTF-8?q?aurora=20telemetry=20instrument=20+=20live=20Markdown=20(v0.17.?=
 =?UTF-8?q?0)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A design pass through /frontend-design on the web companion to retain
all debugging richness while raising usability and polish. Single-file
vanilla HTML/CSS/JS; no build, no CDN, no node_modules. HTTP surface,
endpoints, presentation contract, and INV-001..009 all unchanged.

Aesthetic direction: "Aurora telemetry instrument."
- Runic glyph + wordmark, live connection dot (idle = aurora-green,
  streaming = pulsing cyan, error = dawn-red), session identity right-
  aligned. Persona summary lives inline in the top bar with labeled
  P/A/D micro-bars (centered baseline, [-1,1] mapped).
- Aurora signature band — thin cyan→blue→green shimmer animation
  at the top edge, echoed on the setup card.
- Conversation column with turn-divider rules, cyan ❯ prompt echoes,
  assistant text with a live cyan left-rule. Terminal events become
  status chips (done = aurora-green, error = dawn-red, cancelled =
  dawn-yellow) with metadata. Animated "awaiting first token · Ns"
  indicator with elapsed counter.
- Telemetry column: tabs with live count badges that flash on new
  events, sticky pane header carries the active pane name + copy
  button, new-line flash highlight on each pane append, structured
  empty states, persona pane structured render.
- Composer: real input, send/cancel buttons, streaming-lock state.
- Status line: keyboard legend + version footer.
- Centered setup card overlay with styled agent select on first open.
- All-monospace by intent (no-CDN constraint + right for a wire-
  monitor tool); system mono stack. CSS-only motion (pulse, shimmer,
  staggered rise, flash, awaiting dots).

Live Markdown — transcript response + thinking panes:
- Hand-rolled markdownSafe() renderer: escape-FIRST (INV-004
  preserved), then a whitelist subset (headings, bold, italic, inline
  code, fenced code blocks, ordered/unordered lists, blockquotes,
  links). No raw HTML passthrough. Link href restricted to http(s):// +
  conservative charset (rejects javascript:, attribute-breakout URLs).
- Per-turn live buffer; each text/thinking delta re-renders the
  accumulated buffer in place (same pattern as the TUI's v0.9.0 live
  MD rendering).
- Verified under node: rendering (bold/italic/code/lists/headings/
  fences/safe links) + XSS neutralization (script tags, javascript:
  schemes, attribute-breakout URLs, img onerror) all behave correctly.
- Tools/Debug/Persona panes stay literal monospace by deliberate
  choice: they carry our structured audit lines + JSON, where MD would
  corrupt readability (underscores in tool names, JSON braces, etc.).

Thinking pane per-turn breaks:
- Each turn lays down a labeled `── turn N ──` divider in the
  thinking pane. The prior turn's live block is closed and a fresh
  MD-rendered block opens below the divider, so each turn's chain-
  of-thought is its own break-separated section.

Tests: 378 passing (no test change — server-side surface unchanged).
Markdown safety verified via standalone node harness exercising
rendering + 4 XSS vectors.

Minor per SemVer discipline: substantial new browser-side behavior
(live Markdown rendering, redesigned presentation) that consumers
would opt into via the next launch. No HTTP-caller adapts.
---
 pyproject.toml                      |    2 +-
 src/ratatoskr/web/static/index.html | 1102 ++++++++++++++++++++-------
 uv.lock                             |    2 +-
 3 files changed, 821 insertions(+), 285 deletions(-)

diff --git a/pyproject.toml b/pyproject.toml
index da89db9..ccf108f 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "ratatoskr"
-version = "0.16.1"
+version = "0.17.0"
 description = "Worldtree Conversation API debug TUI — multi-pane observability dashboard"
 readme = "README.md"
 requires-python = ">=3.12"
diff --git a/src/ratatoskr/web/static/index.html b/src/ratatoskr/web/static/index.html
index 455eb35..89321e7 100644
--- a/src/ratatoskr/web/static/index.html
+++ b/src/ratatoskr/web/static/index.html
@@ -2,315 +2,838 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8" />
-<title>ratatoskr</title>
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>ratatoskr · wire monitor</title>
 <style>
-  :root {
-    --bg: #000000;
-    --surface: #373b46;
-    --panel: #414751;
-    --fg: #a9bcc3;
-    --dark-50: #6e7882;
-    --dark-60: #86929d;
-    --bright-70: #9daeb6;
-    --bright-cyan: #42dcd1;
-    --bright-blue: #a4c4ff;
-    --aurora-green: #16B866;
-    --dawn-red: #ff491a;
-    --dawn-yellow: #e1c631;
-  }
-  * { box-sizing: border-box; }
-  html, body { margin: 0; padding: 0; height: 100%; }
-  body {
-    font-family: ui-monospace, "SF Mono", Menlo, monospace;
-    font-size: 13px;
-    background: var(--bg);
-    color: var(--fg);
-    display: flex; flex-direction: column;
-  }
-  #persona-header {
-    flex: 0 0 auto;
-    height: 24px; padding: 4px 12px;
-    background: var(--surface); color: var(--bright-70);
-    display: none;
-  }
-  #persona-header.show { display: flex; align-items: center; }
-  #main {
-    flex: 1 1 auto;
-    display: grid;
-    grid-template-columns: 2fr 1fr;
-    overflow: hidden;
-  }
-  #left, #right { display: flex; flex-direction: column; overflow: hidden; }
-  #left { border-right: 1px solid var(--panel); }
-  #transcript { flex: 1 1 auto; overflow-y: auto; padding: 8px 12px; }
-  #transcript .turn-header { color: var(--dark-60); padding: 4px 0; }
-  #transcript .prompt-echo { color: var(--bright-cyan); font-weight: bold; padding: 4px 0; }
-  #transcript .response { white-space: pre-wrap; padding: 4px 0; }
-  #transcript .done-label { color: var(--aurora-green); padding: 4px 0; }
-  #transcript .error-label { color: var(--dawn-red); padding: 4px 0; }
-  #transcript .cancelled-label { color: var(--dawn-yellow); padding: 4px 0; }
-  #transcript .awaiting { color: var(--dark-60); padding: 4px 0; font-style: italic; }
-  #prompt-row {
-    flex: 0 0 auto;
-    padding: 8px 12px; border-top: 1px solid var(--panel);
-  }
-  #prompt-input {
-    width: 100%;
-    background: transparent; color: var(--fg);
-    border: 1px solid var(--dark-50); padding: 6px 8px;
-    font-family: inherit; font-size: inherit;
-  }
-  #right .tabs {
-    flex: 0 0 auto;
-    display: flex; gap: 4px; padding: 4px 8px;
-    border-bottom: 1px solid var(--panel);
-  }
-  #right .tab {
-    padding: 4px 12px; cursor: pointer;
-    color: var(--dark-60); user-select: none;
-  }
-  #right .tab.active { color: var(--bright-cyan); border-bottom: 2px solid var(--bright-cyan); }
-  #right .pane {
-    flex: 1 1 auto;
-    overflow-y: auto; padding: 8px 12px;
-    white-space: pre-wrap; word-break: break-word;
-    display: none;
-  }
-  #right .pane.active { display: block; }
-  #right .pane-actions {
-    padding: 4px 12px; border-top: 1px solid var(--panel);
-    display: flex; justify-content: flex-end;
-  }
-  #right .copy-btn {
-    background: transparent; color: var(--dark-60);
-    border: 1px solid var(--dark-50); padding: 2px 8px;
-    cursor: pointer; font-family: inherit; font-size: 11px;
-  }
-  #footer {
-    flex: 0 0 auto;
-    padding: 4px 12px; border-top: 1px solid var(--panel);
-    color: var(--dark-60); font-size: 11px;
-    display: flex; justify-content: space-between;
-  }
-  #setup {
-    flex: 1 1 auto; padding: 32px;
-    display: flex; flex-direction: column; gap: 12px;
-  }
-  #setup select { padding: 4px 8px; background: var(--surface); color: var(--fg); border: 1px solid var(--panel); }
-  #setup button { padding: 6px 14px; background: var(--bright-cyan); color: var(--bg); border: 0; cursor: pointer; }
+/* ============================================================
+   ratatoskr-web — Aurora telemetry instrument
+   A precision wire-monitoring console for the Worldtree
+   Conversation API. All-monospace by intent; Australis dark
+   cool-tone palette with aurora-borealis accents on LIVE
+   surfaces. Single file, no build, no CDN.
+   ============================================================ */
+:root {
+  /* layered voids */
+  --void:       #000000;
+  --surface-1:  #07090c;
+  --surface-2:  #0d1117;
+  --surface-3:  #141a22;
+  --line:       #1b212a;
+  --line-2:     #283039;
+
+  /* Australis Sea — text ramp */
+  --fg:         #b9c8ce;
+  --fg-2:       #8a97a0;
+  --fg-dim:     #6e7882;
+  --fg-faint:   #49525c;
+
+  /* Aurora accents */
+  --cyan:       #42dcd1;
+  --blue:       #a4c4ff;
+  --green:      #51e08a;
+  --green-deep: #16b866;
+  --red:        #ff5a36;
+  --amber:      #e1c631;
+
+  --glow-cyan:  rgba(66, 220, 209, 0.14);
+
+  --mono: "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono",
+          "SFMono-Regular", "Cascadia Code", "Roboto Mono",
+          ui-monospace, Menlo, Consolas, monospace;
+
+  --row: 30px;
+}
+
+* { box-sizing: border-box; }
+html, body { height: 100%; margin: 0; }
+
+body {
+  background: var(--void);
+  color: var(--fg);
+  font-family: var(--mono);
+  font-size: 13px;
+  line-height: 1.5;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  /* faint cyan glow at top + grain */
+  background-image:
+    radial-gradient(120% 60% at 50% -10%, var(--glow-cyan), transparent 60%),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
+}
+
+/* selection */
+::selection { background: rgba(66,220,209,0.25); color: #fff; }
+
+/* scrollbars */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 0; }
+::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }
+
+/* ---- aurora signature band ---- */
+.aurora {
+  height: 2px;
+  flex: 0 0 auto;
+  background: linear-gradient(90deg,
+    transparent, var(--cyan), var(--blue), var(--green), var(--cyan), transparent);
+  background-size: 300% 100%;
+  animation: aurora-drift 14s linear infinite;
+  opacity: 0.85;
+}
+@keyframes aurora-drift {
+  0% { background-position: 0% 0; }
+  100% { background-position: 300% 0; }
+}
+
+/* ---- top command bar ---- */
+#topbar {
+  flex: 0 0 auto;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 0 16px;
+  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
+  border-bottom: 1px solid var(--line);
+}
+.brand { display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }
+.brand .glyph {
+  font-size: 16px; color: var(--cyan);
+  text-shadow: 0 0 12px var(--glow-cyan);
+  transform: translateY(1px);
+}
+.brand .name {
+  font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--fg);
+}
+.brand .tag {
+  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
+  color: var(--fg-faint);
+}
+
+.conn {
+  display: flex; align-items: center; gap: 7px; flex: 0 0 auto;
+  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
+  color: var(--fg-dim);
+}
+.conn .dot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--fg-faint);
+  box-shadow: 0 0 0 0 transparent;
+}
+.conn[data-state="idle"] .dot { background: var(--green-deep); }
+.conn[data-state="streaming"] .dot {
+  background: var(--cyan);
+  animation: pulse 1.1s ease-in-out infinite;
+}
+.conn[data-state="error"] .dot { background: var(--red); }
+.conn[data-state="streaming"] { color: var(--cyan); }
+.conn[data-state="error"] { color: var(--red); }
+@keyframes pulse {
+  0%,100% { box-shadow: 0 0 0 0 rgba(66,220,209,0.55); }
+  50%     { box-shadow: 0 0 0 5px rgba(66,220,209,0); }
+}
+
+/* persona strip — lives in the top bar, hidden until hydrated */
+#persona-strip {
+  display: none;
+  align-items: center; gap: 14px;
+  flex: 1 1 auto;
+  min-width: 0;
+  padding-left: 18px;
+  border-left: 1px solid var(--line);
+  height: 26px;
+}
+#persona-strip.show { display: flex; }
+#persona-strip .emo {
+  font-size: 11px; color: var(--blue); letter-spacing: 0.02em;
+  white-space: nowrap; flex: 0 0 auto;
+}
+#persona-strip .emo b { color: var(--cyan); font-weight: 600; }
+.pad-bars { display: flex; gap: 12px; flex: 0 0 auto; }
+.pad { display: flex; align-items: center; gap: 5px; }
+.pad .k { font-size: 9px; color: var(--fg-faint); width: 8px; }
+.pad .track {
+  width: 46px; height: 4px; background: var(--line-2);
+  position: relative; overflow: hidden;
+}
+.pad .track::before { /* center baseline tick */
+  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
+  width: 1px; background: var(--fg-faint); opacity: 0.5;
+}
+.pad .fill {
+  position: absolute; top: 0; bottom: 0; left: 50%;
+  background: linear-gradient(90deg, var(--cyan), var(--blue));
+  transition: width 0.4s ease, left 0.4s ease;
+}
+
+.spacer { flex: 1 1 auto; }
+#identity {
+  font-size: 11px; color: var(--fg-dim); letter-spacing: 0.02em;
+  white-space: nowrap; flex: 0 0 auto;
+}
+#identity .a { color: var(--blue); }
+
+/* ---- workspace split ---- */
+#workspace {
+  display: none;
+  flex: 1 1 auto;
+  min-height: 0;
+  grid-template-columns: 1.85fr 1fr;
+}
+#workspace.live { display: grid; }
+
+.conversation, .telemetry { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
+.conversation { border-right: 1px solid var(--line); }
+
+/* transcript */
+#transcript {
+  flex: 1 1 auto; overflow-y: auto; padding: 18px 22px 28px;
+  scroll-behavior: smooth;
+}
+.turn-header {
+  display: flex; align-items: center; gap: 10px;
+  margin: 18px 0 10px; color: var(--fg-faint);
+  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
+}
+.turn-header::before, .turn-header::after {
+  content: ""; height: 1px; background: var(--line); flex: 1 1 auto;
+}
+.turn-header:first-child { margin-top: 0; }
+
+.prompt-echo {
+  color: var(--cyan); font-weight: 500; margin: 4px 0 10px;
+  display: flex; gap: 9px; align-items: baseline;
+  animation: rise 0.3s ease both;
+}
+.prompt-echo::before {
+  content: "❯"; color: var(--cyan); font-weight: 700;
+  text-shadow: 0 0 10px var(--glow-cyan);
+}
+.response {
+  white-space: pre-wrap; word-break: break-word;
+  color: var(--fg); margin: 0 0 6px;
+  padding-left: 18px; border-left: 2px solid var(--line-2);
+}
+.response.live { border-left-color: var(--cyan); }
+
+.awaiting {
+  display: inline-flex; align-items: center; gap: 8px;
+  color: var(--fg-dim); font-style: italic; font-size: 12px;
+  margin: 6px 0; padding-left: 18px;
+}
+.awaiting::after {
+  content: ""; width: 16px; text-align: left;
+  animation: dots 1.4s steps(4, end) infinite;
+}
+@keyframes dots {
+  0% { content: ""; } 25% { content: "·"; }
+  50% { content: "··"; } 75% { content: "···"; }
+}
+
+/* terminal status chips */
+.chip {
+  display: inline-flex; align-items: center; gap: 7px;
+  margin: 8px 0 4px; padding: 3px 10px;
+  font-size: 10px; letter-spacing: 0.08em;
+  border: 1px solid currentColor; border-radius: 2px;
+  animation: rise 0.3s ease both;
+}
+.chip .lbl { text-transform: uppercase; font-weight: 600; }
+.chip .meta { color: var(--fg-dim); border: 0; letter-spacing: 0; }
+.chip.done      { color: var(--green); }
+.chip.error     { color: var(--red); }
+.chip.cancelled { color: var(--amber); }
+.chip.wire      { color: var(--red); }
+@keyframes rise { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
+
+/* composer */
+.composer {
+  flex: 0 0 auto; border-top: 1px solid var(--line);
+  background: var(--surface-1);
+  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
+}
+.composer .prompt-mark { color: var(--cyan); font-weight: 700; }
+#prompt-input {
+  flex: 1 1 auto; background: transparent; border: 0; outline: none;
+  color: var(--fg); font-family: var(--mono); font-size: 13px;
+  padding: 6px 2px;
+}
+#prompt-input::placeholder { color: var(--fg-faint); }
+#send-btn {
+  flex: 0 0 auto; cursor: pointer;
+  background: transparent; color: var(--cyan);
+  border: 1px solid var(--line-2); border-radius: 2px;
+  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
+  text-transform: uppercase; padding: 6px 12px;
+  transition: all 0.15s ease;
+}
+#send-btn:hover { border-color: var(--cyan); background: rgba(66,220,209,0.08); }
+.composer.streaming #send-btn { display: none; }
+#cancel-btn {
+  display: none; flex: 0 0 auto; cursor: pointer;
+  background: transparent; color: var(--amber);
+  border: 1px solid rgba(225,198,49,0.4); border-radius: 2px;
+  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
+  text-transform: uppercase; padding: 6px 12px;
+}
+.composer.streaming #cancel-btn { display: inline-block; }
+#cancel-btn:hover { border-color: var(--amber); background: rgba(225,198,49,0.08); }
+
+/* ---- telemetry column ---- */
+.telemetry { background: var(--surface-1); }
+.tabs {
+  flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--line);
+  background: var(--surface-2);
+}
+.tab {
+  flex: 1 1 0; cursor: pointer; user-select: none;
+  background: transparent; border: 0; border-bottom: 2px solid transparent;
+  color: var(--fg-dim); font-family: var(--mono);
+  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
+  padding: 11px 6px 9px; display: flex; align-items: center;
+  justify-content: center; gap: 6px; transition: color 0.15s ease;
+}
+.tab:hover { color: var(--fg-2); }
+.tab.active { color: var(--cyan); border-bottom-color: var(--cyan); }
+.tab .kbd { color: var(--fg-faint); font-size: 9px; }
+.tab .badge {
+  min-width: 16px; padding: 0 4px; height: 14px; line-height: 14px;
+  font-size: 9px; text-align: center; border-radius: 7px;
+  background: var(--line-2); color: var(--fg-dim);
+  transition: background 0.2s ease, color 0.2s ease;
+}
+.tab.active .badge { background: rgba(66,220,209,0.16); color: var(--cyan); }
+.tab .badge.flash { background: var(--cyan); color: var(--void); }
+
+.pane-head {
+  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
+  padding: 7px 12px; border-bottom: 1px solid var(--line);
+  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
+  color: var(--fg-dim); background: var(--surface-1);
+}
+.pane-head .copy {
+  cursor: pointer; background: transparent; border: 1px solid var(--line-2);
+  color: var(--fg-dim); border-radius: 2px; font-family: var(--mono);
+  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
+  padding: 2px 8px; transition: all 0.15s ease;
+}
+.pane-head .copy:hover { border-color: var(--cyan); color: var(--cyan); }
+.pane-head .copy.copied { border-color: var(--green); color: var(--green); }
+
+.pane-wrap { flex: 1 1 auto; min-height: 0; position: relative; }
+.pane {
+  position: absolute; inset: 0; overflow-y: auto;
+  padding: 10px 12px; display: none;
+  white-space: pre-wrap; word-break: break-word;
+  font-size: 12px; color: var(--fg-2);
+}
+.pane.active { display: block; }
+.pane > div { padding: 1px 0; }
+.pane .empty {
+  color: var(--fg-faint); font-style: italic;
+}
+.pane .rule { color: var(--fg-faint); }
+/* new-line flash */
+.pane > div.fresh { animation: flash 0.9s ease; }
+@keyframes flash { from { background: rgba(66,220,209,0.12); } to { background: transparent; } }
+
+/* persona pane structured render */
+#pane-persona .pk { color: var(--fg-dim); }
+#pane-persona .pv { color: var(--blue); }
+#pane-persona .ph { color: var(--cyan); letter-spacing: 0.1em; text-transform: uppercase; font-size: 10px; }
+
+/* thinking-pane per-turn dividers */
+.pane-turn {
+  display: flex; align-items: center; gap: 10px;
+  margin: 14px 0 8px; color: var(--fg-faint);
+  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
+}
+.pane-turn:first-child { margin-top: 0; }
+.pane-turn::before, .pane-turn::after {
+  content: ""; height: 1px; background: var(--line); flex: 1 1 auto;
+}
+
+/* ---- safe live Markdown (transcript response + thinking) ---- */
+/* Renderer escapes first, then applies a whitelist subset; no raw HTML
+   passthrough, link schemes restricted to http(s). See markdownSafe(). */
+.md-body { white-space: normal; }
+.md-body .md-p { margin: 0 0 7px; white-space: pre-wrap; }
+.md-body .md-p:last-child { margin-bottom: 0; }
+.md-body .md-h { margin: 10px 0 5px; color: var(--blue); font-weight: 600; letter-spacing: 0.01em; }
+.md-body .md-h1 { font-size: 15px; } .md-body .md-h2 { font-size: 14px; }
+.md-body .md-h3, .md-body .md-h4, .md-body .md-h5, .md-body .md-h6 { font-size: 13px; }
+.md-body strong { color: var(--fg); font-weight: 700; }
+.md-body em { color: var(--blue); font-style: italic; }
+.md-body code {
+  background: var(--surface-3); color: var(--cyan);
+  padding: 0 4px; border-radius: 2px; font-size: 0.92em;
+}
+.md-body pre.md-code {
+  background: var(--surface-2); border: 1px solid var(--line);
+  border-radius: 3px; padding: 8px 10px; margin: 7px 0;
+  white-space: pre-wrap; word-break: break-word; color: var(--fg-2);
+}
+.md-body ul, .md-body ol { margin: 5px 0; padding-left: 20px; }
+.md-body li { margin: 2px 0; }
+.md-body .md-quote {
+  border-left: 2px solid var(--line-2); padding-left: 10px;
+  margin: 5px 0; color: var(--fg-dim);
+}
+.md-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
+.md-body a:hover { color: var(--blue); }
+
+/* ---- status line ---- */
+#statusline {
+  flex: 0 0 auto; height: 24px; display: flex; align-items: center;
+  gap: 16px; padding: 0 14px; background: var(--surface-2);
+  border-top: 1px solid var(--line); font-size: 10px; color: var(--fg-faint);
+  letter-spacing: 0.04em;
+}
+#statusline .legend { display: flex; gap: 14px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
+#statusline kbd {
+  font-family: var(--mono); color: var(--fg-dim);
+  border: 1px solid var(--line-2); border-radius: 2px;
+  padding: 0 4px; font-size: 9px;
+}
+#version { flex: 0 0 auto; color: var(--fg-dim); }
+
+/* ---- setup overlay ---- */
+#setup {
+  position: fixed; inset: 0; z-index: 20;
+  display: flex; align-items: center; justify-content: center;
+  background: radial-gradient(80% 80% at 50% 30%, rgba(13,17,23,0.6), var(--void) 80%);
+  backdrop-filter: blur(2px);
+}
+.setup-card {
+  width: 440px; max-width: 90vw;
+  background: linear-gradient(180deg, var(--surface-3), var(--surface-1));
+  border: 1px solid var(--line-2); border-radius: 4px;
+  padding: 30px 30px 26px; position: relative; overflow: hidden;
+  animation: rise 0.4s ease both;
+}
+.setup-card .aurora { position: absolute; top: 0; left: 0; right: 0; }
+.setup-card h1 {
+  margin: 6px 0 4px; font-size: 18px; font-weight: 600; letter-spacing: 0.02em;
+  color: var(--fg);
+}
+.setup-card h1 .glyph { color: var(--cyan); text-shadow: 0 0 14px var(--glow-cyan); }
+.setup-card .sub {
+  margin: 0 0 22px; font-size: 11px; color: var(--fg-dim);
+  letter-spacing: 0.04em; line-height: 1.6;
+}
+.field-label {
+  display: block; font-size: 10px; letter-spacing: 0.14em;
+  text-transform: uppercase; color: var(--fg-dim); margin: 0 0 7px;
+}
+.select-wrap { position: relative; margin-bottom: 22px; }
+.select-wrap::after {
+  content: "▾"; position: absolute; right: 12px; top: 50%;
+  transform: translateY(-50%); color: var(--cyan); pointer-events: none; font-size: 11px;
+}
+#agent-picker {
+  width: 100%; appearance: none; -webkit-appearance: none;
+  background: var(--surface-1); color: var(--fg);
+  border: 1px solid var(--line-2); border-radius: 3px;
+  font-family: var(--mono); font-size: 13px; padding: 10px 34px 10px 12px;
+  cursor: pointer; outline: none; transition: border-color 0.15s ease;
+}
+#agent-picker:focus { border-color: var(--cyan); }
+#start-btn {
+  width: 100%; cursor: pointer;
+  background: linear-gradient(180deg, rgba(66,220,209,0.16), rgba(66,220,209,0.06));
+  color: var(--cyan); border: 1px solid var(--cyan); border-radius: 3px;
+  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
+  text-transform: uppercase; padding: 11px; font-weight: 600;
+  transition: all 0.15s ease;
+}
+#start-btn:hover { background: rgba(66,220,209,0.2); box-shadow: 0 0 22px var(--glow-cyan); }
+#start-btn:disabled { opacity: 0.4; cursor: wait; }
+.setup-err { color: var(--red); font-size: 11px; margin-top: 12px; min-height: 14px; }
 </style>
 </head>
 <body>
-<div id="persona-header"></div>
-<div id="setup">
-  <h2 style="color: var(--bright-cyan); margin: 0;">ratatoskr-web</h2>
-  <p>Internal LAN debug surface. Pick an agent and start a session.</p>
-  <label>Agent:
-    <select id="agent-picker"></select>
-  </label>
-  <button id="start-btn">Start new session</button>
-</div>
-<div id="main" style="display: none;">
-  <div id="left">
+<div class="aurora"></div>
+
+<header id="topbar">
+  <div class="brand">
+    <span class="glyph">ᛯ</span>
+    <span class="name">ratatoskr</span>
+    <span class="tag">wire monitor</span>
+  </div>
+  <div class="conn" id="conn" data-state="">
+    <span class="dot"></span><span id="conn-label">offline</span>
+  </div>
+  <div id="persona-strip"></div>
+  <div class="spacer"></div>
+  <div id="identity">—</div>
+</header>
+
+<main id="workspace">
+  <section class="conversation">
     <div id="transcript"></div>
-    <div id="prompt-row">
-      <input id="prompt-input" type="text"
-             placeholder="Type a message and press Enter (Ctrl-C cancels in-flight)" autofocus />
+    <div class="composer" id="composer">
+      <span class="prompt-mark">❯</span>
+      <input id="prompt-input" type="text" autocomplete="off"
+             placeholder="Message — Enter sends, Shift+Enter newline" />
+      <button id="send-btn">send</button>
+      <button id="cancel-btn">cancel ⌃C</button>
     </div>
-  </div>
-  <div id="right">
-    <div class="tabs">
-      <div class="tab active" data-pane="tools">Tools</div>
-      <div class="tab" data-pane="debug">Debug</div>
-      <div class="tab" data-pane="thinking">Thinking</div>
-      <div class="tab" data-pane="persona">Persona</div>
+  </section>
+
+  <section class="telemetry">
+    <nav class="tabs" id="tabs">
+      <button class="tab active" data-pane="tools">tools <span class="kbd">⌃1</span><span class="badge">0</span></button>
+      <button class="tab" data-pane="debug">debug <span class="kbd">⌃2</span><span class="badge">0</span></button>
+      <button class="tab" data-pane="thinking">think <span class="kbd">⌃3</span><span class="badge">0</span></button>
+      <button class="tab" data-pane="persona">persona <span class="kbd">⌃4</span></button>
+    </nav>
+    <div class="pane-head">
+      <span id="pane-name">tools</span>
+      <button class="copy" id="copy-btn">copy</button>
     </div>
-    <div class="pane active" id="pane-tools"></div>
-    <div class="pane" id="pane-debug"></div>
-    <div class="pane" id="pane-thinking"></div>
-    <div class="pane" id="pane-persona"></div>
-    <div class="pane-actions">
-      <button class="copy-btn" id="copy-btn">copy pane</button>
+    <div class="pane-wrap">
+      <div class="pane active" id="pane-tools"><div class="empty">no tool events yet</div></div>
+      <div class="pane" id="pane-debug"><div class="empty">waiting for wire telemetry…</div></div>
+      <div class="pane" id="pane-thinking"><div class="empty">no chain-of-thought captured yet</div></div>
+      <div class="pane" id="pane-persona"><div class="empty">persona state loads on session open</div></div>
     </div>
+  </section>
+</main>
+
+<div id="setup">
+  <div class="setup-card">
+    <div class="aurora"></div>
+    <h1><span class="glyph">ᛯ</span> ratatoskr-web</h1>
+    <p class="sub">Internal-LAN debug companion to the Worldtree Conversation API. Pick an agent and open a session to begin watching the wire.</p>
+    <label class="field-label" for="agent-picker">Agent</label>
+    <div class="select-wrap">
+      <select id="agent-picker"><option>loading…</option></select>
+    </div>
+    <button id="start-btn">open session</button>
+    <div class="setup-err" id="setup-err"></div>
   </div>
 </div>
-<div id="footer">
-  <span id="identity">—</span>
-  <span id="version">ratatoskr —</span>
-</div>
+
+<footer id="statusline">
+  <div class="legend">
+    <span><kbd>Enter</kbd> send</span>
+    <span><kbd>⇧Enter</kbd> newline</span>
+    <span><kbd>⌃1</kbd>–<kbd>⌃4</kbd> panes</span>
+    <span><kbd>⌃C</kbd> cancel turn</span>
+  </div>
+  <div id="version">ratatoskr —</div>
+</footer>
+
 <script>
 // ratatoskr-web — vanilla JS client.
-// Five-pane debug surface; HTML-escapes assistant content (INV-004).
+// Five-pane debug surface. HTML-escapes ALL model/tool output (INV-004 —
+// model output is untrusted text; adversarial HTML must not execute).
 // Drift-detection contract: tests/fixtures/presentation_contract.json
 "use strict";
 
 const $ = (id) => document.getElementById(id);
-const state = {
-  sessionId: null,
-  agentId: null,
-  turnId: null,
-  eventSource: null,
-};
+const state = { sessionId: null, agentId: null, turnId: null, eventSource: null };
 
 function esc(s) {
   const d = document.createElement("div");
   d.appendChild(document.createTextNode(String(s)));
   return d.innerHTML;
 }
-
-function appendTo(paneId, html) {
-  const el = $(paneId);
-  el.insertAdjacentHTML("beforeend", html);
-  el.scrollTop = el.scrollHeight;
-}
-
 function ts() {
   const d = new Date();
   return d.toTimeString().slice(0, 8) + "." + String(d.getMilliseconds()).padStart(3, "0");
 }
 
+// ---- safe live Markdown ------------------------------------------------
+// Model output is UNTRUSTED (INV-004). Strategy: escape EVERYTHING first
+// (esc neutralizes < > &), THEN apply a whitelist of markdown transforms
+// on the already-escaped text. No raw HTML ever passes through; link
+// hrefs are restricted to http(s) and a conservative charset so a
+// crafted URL can't break out of the attribute. Hand-rolled (no CDN,
+// no library) — a deliberately small subset for a debug surface.
+function mdInline(s) {
+  s = s.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  s = s.replace(/__([^_]+)__/g, "<strong>$1</strong>");
+  s = s.replace(/(^|[^*])\*([^*\n]+)\*/g, "$1<em>$2</em>");
+  s = s.replace(/(^|[^_\w])_([^_\n]+)_/g, "$1<em>$2</em>");
+  // [text](url) — http(s) only, conservative charset (no quotes/brackets/ws)
+  s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (m, text, url) =>
+    /^https?:\/\/[^\s"'<>)]+$/.test(url)
+      ? `<a href="${url}" target="_blank" rel="noopener noreferrer">${text}</a>`
+      : text);
+  return s;
+}
+function markdownSafe(raw) {
+  let s = esc(raw);  // escape < > & FIRST
+  const cb = [], ic = [];
+  // fenced code blocks (no inline transforms inside)
+  s = s.replace(/```[^\n`]*\n([\s\S]*?)```/g, (m, body) => { cb.push(body); return `CB${cb.length - 1}`; });
+  // inline code
+  s = s.replace(/`([^`\n]+)`/g, (m, body) => { ic.push(body); return `IC${ic.length - 1}`; });
+  const out = [];
+  let para = [], list = null;
+  const flushPara = () => { if (para.length) { out.push(`<div class="md-p">${para.map(mdInline).join("<br>")}</div>`); para = []; } };
+  const closeList = () => { if (list) { out.push(`</${list}>`); list = null; } };
+  for (const line of s.split("\n")) {
+    let m;
+    if ((m = /^(#{1,6})\s+(.*)$/.exec(line))) { flushPara(); closeList(); out.push(`<div class="md-h md-h${m[1].length}">${mdInline(m[2])}</div>`); }
+    else if ((m = /^&gt;\s?(.*)$/.exec(line))) { flushPara(); closeList(); out.push(`<div class="md-quote">${mdInline(m[1])}</div>`); }
+    else if ((m = /^\s*[-*+]\s+(.*)$/.exec(line))) { flushPara(); if (list !== "ul") { closeList(); out.push("<ul>"); list = "ul"; } out.push(`<li>${mdInline(m[1])}</li>`); }
+    else if ((m = /^\s*\d+\.\s+(.*)$/.exec(line))) { flushPara(); if (list !== "ol") { closeList(); out.push("<ol>"); list = "ol"; } out.push(`<li>${mdInline(m[1])}</li>`); }
+    else if (/^\s*$/.test(line)) { flushPara(); closeList(); }
+    else { closeList(); para.push(line); }
+  }
+  flushPara(); closeList();
+  let html = out.join("");
+  html = html.replace(/IC(\d+)/g, (m, i) => `<code>${ic[+i]}</code>`);
+  html = html.replace(/CB(\d+)/g, (m, i) => `<pre class="md-code">${cb[+i]}</pre>`);
+  return html;
+}
+
+// per-turn live buffers (reset at turn open)
+const LIVE = { resp: "", think: "" };
+
+// ---- pane helpers ----
+const PANE_BADGE = { tools: 0, debug: 0, thinking: 0 };
+function bumpBadge(pane) {
+  if (!(pane in PANE_BADGE)) return;
+  PANE_BADGE[pane] += 1;
+  const tab = document.querySelector(`.tab[data-pane="${pane}"]`);
+  if (!tab) return;
+  const b = tab.querySelector(".badge");
+  if (b) {
+    b.textContent = PANE_BADGE[pane];
+    b.classList.add("flash");
+    setTimeout(() => b.classList.remove("flash"), 220);
+  }
+}
+function paneOf(paneId) { return paneId.replace("pane-", ""); }
+
+function appendTo(paneId, html) {
+  const el = $(paneId);
+  const empty = el.querySelector(".empty");
+  if (empty) empty.remove();
+  el.insertAdjacentHTML("beforeend", html);
+  const last = el.lastElementChild;
+  if (last) { last.classList.add("fresh"); setTimeout(() => last.classList.remove("fresh"), 900); }
+  el.scrollTop = el.scrollHeight;
+  bumpBadge(paneOf(paneId));
+}
+
+// ---- connection state ----
+function setConn(stateName, label) {
+  const c = $("conn");
+  c.dataset.state = stateName;
+  $("conn-label").textContent = label;
+}
+
+// ---- bootstrap fetches ----
 async function loadAgents() {
-  const r = await fetch("/api/agents");
-  const agents = await r.json();
-  const picker = $("agent-picker");
-  for (const a of agents) {
-    const opt = document.createElement("option");
-    opt.value = a.agent_id;
-    opt.textContent = a.agent_id + (a.name ? " · " + a.name : "");
-    picker.appendChild(opt);
+  try {
+    const r = await fetch("/api/agents");
+    const agents = await r.json();
+    const picker = $("agent-picker");
+    picker.innerHTML = "";
+    for (const a of agents) {
+      const opt = document.createElement("option");
+      opt.value = a.agent_id;
+      opt.textContent = a.agent_id + (a.name ? " · " + a.name : "");
+      picker.appendChild(opt);
+    }
+    if (!agents.length) {
+      $("setup-err").textContent = "no agents available from upstream";
+    }
+  } catch (e) {
+    $("setup-err").textContent = "failed to load agents";
   }
 }
 
 async function loadVersion() {
   try {
-    const r = await fetch("/version");
-    const v = await r.json();
+    const v = await (await fetch("/version")).json();
     $("version").textContent = "ratatoskr " + v.ratatoskr;
   } catch (_) {}
 }
 
+// ---- persona rendering ----
+function clamp01(v) { return Math.max(0, Math.min(1, (Number(v) + 1) / 2)); }
+function setPersonaStrip(snap) {
+  const strip = $("persona-strip");
+  const pad = snap.pad || {};
+  const axes = [["P", pad.pleasure], ["A", pad.arousal], ["D", pad.dominance]];
+  let bars = "";
+  for (const [k, v] of axes) {
+    const frac = (v === undefined || v === null) ? 0.5 : clamp01(v);
+    // fill grows from center baseline toward the value
+    const left = Math.min(0.5, frac) * 100;
+    const width = Math.abs(frac - 0.5) * 100;
+    bars += `<div class="pad"><span class="k">${k}</span>`
+          + `<span class="track"><span class="fill" style="left:${left}%;width:${width}%"></span></span></div>`;
+  }
+  strip.innerHTML =
+    `<span class="emo">${esc(snap.agent_id || "?")} · <b>${esc(snap.dominant_emotion || "neutral")}</b></span>`
+    + `<span class="pad-bars">${bars}</span>`;
+  strip.classList.add("show");
+}
+function renderPersonaPane(snap) {
+  const row = (k, v) => `<div><span class="pk">${esc(k)}</span> <span class="pv">${esc(v)}</span></div>`;
+  const head = (t) => `<div class="ph">${esc(t)}</div>`;
+  const pane = $("pane-persona");
+  pane.innerHTML =
+    head("persona snapshot · " + (snap.agent_id || "?")) +
+    `<div> </div>` +
+    row("dominant", snap.dominant_emotion || "?") +
+    `<div> </div>` + head("pad") +
+    row("pleasure", JSON.stringify(snap.pad?.pleasure)) +
+    row("arousal", JSON.stringify(snap.pad?.arousal)) +
+    row("dominance", JSON.stringify(snap.pad?.dominance)) +
+    `<div> </div>` + head("baseline / drift") +
+    row("baseline", JSON.stringify(snap.baseline_pad || {})) +
+    row("mood_drift", JSON.stringify(snap.mood_drift || {})) +
+    `<div> </div>` + head("active emotions (" + (snap.emotions_active || []).length + ")") +
+    (snap.emotions_active || []).map((e) => row("·", JSON.stringify(e))).join("") +
+    `<div> </div>` + row("last_updated", snap.last_updated_at || "?");
+}
+
 async function loadPersona(agentId) {
   try {
     const r = await fetch("/api/agents/" + encodeURIComponent(agentId) + "/persona_state");
     if (r.status === 200) {
       const snap = await r.json();
-      renderPersona(snap);
-      $("persona-header").classList.add("show");
-      $("persona-header").textContent =
-        snap.agent_id + " · " + (snap.dominant_emotion || "?") +
-        " · pad(" + (snap.pad?.pleasure ?? "?") + ", " +
-        (snap.pad?.arousal ?? "?") + ", " +
-        (snap.pad?.dominance ?? "?") + ")";
+      renderPersonaPane(snap);
+      setPersonaStrip(snap);
     } else {
-      appendTo("pane-persona",
-        '<div class="awaiting">(persona not available: ' + esc(r.status) + ')</div>');
+      $("pane-persona").innerHTML = `<div class="empty">persona not available (HTTP ${esc(r.status)})</div>`;
     }
   } catch (e) {
-    appendTo("pane-persona", '<div class="awaiting">(persona fetch failed)</div>');
+    $("pane-persona").innerHTML = `<div class="empty">persona fetch failed</div>`;
   }
 }
 
-function renderPersona(snap) {
-  const html = "Persona snapshot · " + esc(snap.agent_id) + "\n\n" +
-    "Dominant emotion: " + esc(snap.dominant_emotion || "?") + "\n\n" +
-    "PAD: " + JSON.stringify(snap.pad) + "\n" +
-    "Baseline: " + JSON.stringify(snap.baseline_pad || {}) + "\n" +
-    "Mood drift: " + JSON.stringify(snap.mood_drift || {}) + "\n\n" +
-    "Active emotions: " + JSON.stringify(snap.emotions_active || []) + "\n\n" +
-    "Last updated: " + esc(snap.last_updated_at || "?");
-  $("pane-persona").textContent = html;
-}
-
+// ---- session lifecycle ----
 async function startSession() {
   const agentId = $("agent-picker").value;
   if (!agentId) return;
   state.agentId = agentId;
-  // end_user_id is server-configured (RATATOSKR_END_USER_ID) — not sent
-  // from the browser. The server ignores any end_user_id in this body.
-  const r = await fetch("/api/sessions", {
-    method: "POST",
-    headers: {"Content-Type": "application/json"},
-    body: JSON.stringify({agent_id: agentId}),
-  });
-  if (r.status !== 201) {
-    alert("create session failed: " + r.status);
-    return;
+  $("start-btn").disabled = true;
+  $("setup-err").textContent = "";
+  try {
+    // end_user_id is server-configured (RATATOSKR_END_USER_ID) — not sent
+    // from the browser; the server ignores any end_user_id in this body.
+    const r = await fetch("/api/sessions", {
+      method: "POST", headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ agent_id: agentId }),
+    });
+    if (r.status !== 201) {
+      $("setup-err").textContent = "create session failed: HTTP " + r.status;
+      $("start-btn").disabled = false;
+      return;
+    }
+    const info = await r.json();
+    state.sessionId = info.session_id;
+    $("identity").innerHTML =
+      `<span class="a">${esc(agentId)}</span> · …${esc(info.session_id.slice(-8))}`;
+    setConn("idle", "connected");
+    $("setup").style.display = "none";
+    $("workspace").classList.add("live");
+    await loadPersona(agentId);
+    $("prompt-input").focus();
+  } catch (e) {
+    $("setup-err").textContent = "network error opening session";
+    $("start-btn").disabled = false;
   }
-  const info = await r.json();
-  state.sessionId = info.session_id;
-  $("identity").textContent = agentId + " · …" + info.session_id.slice(-8);
-  $("setup").style.display = "none";
-  $("main").style.display = "grid";
-  await loadPersona(agentId);
-  $("prompt-input").focus();
 }
 
-function clearPanes() {
-  $("pane-tools").innerHTML = "";
-  $("pane-debug").innerHTML = "";
-  $("pane-thinking").innerHTML = "";
-}
-
-function appendTranscriptResponse(text) {
-  // INV-004: transcript content is HTML-escaped (model output is untrusted).
+// ---- transcript ----
+// Live Markdown: accumulate the turn's raw response, re-render the whole
+// bubble each delta via markdownSafe (escape-first, whitelist subset).
+function appendResponse(text) {
+  LIVE.resp += text;
   let bubble = document.querySelector("#transcript .response.live");
   if (!bubble) {
     bubble = document.createElement("div");
-    bubble.className = "response live";
+    bubble.className = "response live md-body";
     $("transcript").appendChild(bubble);
   }
-  bubble.textContent += text;
+  bubble.innerHTML = markdownSafe(LIVE.resp);
   $("transcript").scrollTop = $("transcript").scrollHeight;
 }
-
 function finalizeResponse() {
   const live = document.querySelector("#transcript .response.live");
   if (live) live.classList.remove("live");
 }
+// Thinking: same live-Markdown treatment into the current turn's block.
+function appendThinking(text) {
+  LIVE.think += text;
+  let block = document.querySelector("#pane-thinking .think-live");
+  if (!block) {
+    const empty = $("pane-thinking").querySelector(".empty");
+    if (empty) empty.remove();
+    block = document.createElement("div");
+    block.className = "think-live md-body";
+    $("pane-thinking").appendChild(block);
+  }
+  block.innerHTML = markdownSafe(LIVE.think);
+  $("pane-thinking").scrollTop = $("pane-thinking").scrollHeight;
+  bumpBadge("thinking");
+}
 
+// ---- turn ----
 async function submitPrompt() {
   const input = $("prompt-input");
   const content = input.value.trim();
-  if (!content || !state.sessionId) return;
+  if (!content || !state.sessionId || state.turnId) return;
   input.value = "";
 
-  // Echo prompt
   const echo = document.createElement("div");
   echo.className = "prompt-echo";
-  echo.textContent = "❯ " + content;
+  echo.textContent = content;
   $("transcript").appendChild(echo);
 
-  // Submit POST → turn_id
-  const r = await fetch("/api/turns/" + encodeURIComponent(state.sessionId), {
-    method: "POST",
-    headers: {"Content-Type": "application/json"},
-    body: JSON.stringify({content}),
-  });
-  if (r.status !== 200) {
-    appendTo("pane-debug",
-      '<div>[' + ts() + '] submit_failed status=' + r.status + '</div>');
+  let r;
+  try {
+    r = await fetch("/api/turns/" + encodeURIComponent(state.sessionId), {
+      method: "POST", headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content }),
+    });
+  } catch (e) {
+    appendTo("pane-debug", `<div>[${ts()}] submit_failed network_error</div>`);
     return;
   }
-  const {turn_id} = await r.json();
+  if (r.status !== 200) {
+    appendTo("pane-debug", `<div>[${ts()}] submit_failed status=${r.status}</div>`);
+    return;
+  }
+  const { turn_id } = await r.json();
   state.turnId = turn_id;
+  setConn("streaming", "streaming");
+  $("composer").classList.add("streaming");
 
-  // Turn-header divider in transcript
   const head = document.createElement("div");
   head.className = "turn-header";
-  head.textContent = "── turn " + turn_id + " ──";
+  head.textContent = "turn " + turn_id;
   $("transcript").appendChild(head);
 
-  // Open SSE stream
-  const url = "/api/turns/" + encodeURIComponent(state.sessionId) +
-              "/stream?turn_id=" + turn_id;
+  // Reset per-turn live buffers; lay down a labeled divider in the
+  // thinking pane and close the prior turn's live thinking block so each
+  // turn's chain-of-thought renders as its own break-separated section.
+  LIVE.resp = ""; LIVE.think = "";
+  const tp = $("pane-thinking");
+  const tpEmpty = tp.querySelector(".empty");
+  if (tpEmpty) tpEmpty.remove();
+  tp.querySelectorAll(".think-live").forEach((b) => b.classList.remove("think-live"));
+  const tdiv = document.createElement("div");
+  tdiv.className = "pane-turn";
+  tdiv.textContent = "turn " + turn_id;
+  tp.appendChild(tdiv);
+
+  const url = "/api/turns/" + encodeURIComponent(state.sessionId) + "/stream?turn_id=" + turn_id;
   const es = new EventSource(url);
   state.eventSource = es;
   let textDeltas = 0, thinkingDeltas = 0, heartbeats = 0;
   const turnStart = Date.now();
-
-  function audit(line) {
-    appendTo("pane-debug", "<div>[" + ts() + "] " + esc(line) + "</div>");
-  }
+  const audit = (line) => appendTo("pane-debug", `<div>[${ts()}] ${esc(line)}</div>`);
 
   audit("turn_open turn_id=" + turn_id);
 
@@ -321,12 +844,12 @@ async function submitPrompt() {
   es.addEventListener("thinking", (e) => {
     const d = JSON.parse(e.data);
     thinkingDeltas += 1;
-    appendTo("pane-thinking", esc(d.content));
+    appendThinking(d.content);
   });
   es.addEventListener("text", (e) => {
     const d = JSON.parse(e.data);
     textDeltas += 1;
-    appendTranscriptResponse(d.content);
+    appendResponse(d.content);
   });
   es.addEventListener("text_boundary", (e) => {
     const d = JSON.parse(e.data);
@@ -335,12 +858,12 @@ async function submitPrompt() {
   es.addEventListener("tool_start", (e) => {
     const d = JSON.parse(e.data);
     appendTo("pane-tools",
-      "<div>· tool_start name=" + esc(d.name) + " args=" + esc(JSON.stringify(d.arguments)) + "</div>");
+      `<div>· <span style="color:var(--cyan)">tool_start</span> name=${esc(d.name)} args=${esc(JSON.stringify(d.arguments))}</div>`);
   });
   es.addEventListener("tool_result", (e) => {
     const d = JSON.parse(e.data);
     appendTo("pane-tools",
-      "<div>· tool_result name=" + esc(d.name) + " duration_ms=" + d.duration_ms + "</div>");
+      `<div>· <span style="color:var(--green)">tool_result</span> name=${esc(d.name)} duration_ms=${esc(d.duration_ms)}</div>`);
   });
   es.addEventListener("awaiting_llm_first_token", (e) => {
     const d = JSON.parse(e.data);
@@ -351,93 +874,106 @@ async function submitPrompt() {
       el.className = "awaiting live";
       $("transcript").appendChild(el);
     }
-    el.textContent = "awaiting first token · " +
-      (d.elapsed_ms_since_building_prompt / 1000).toFixed(1) + "s";
+    el.firstChild ? (el.firstChild.textContent =
+        "awaiting first token · " + (d.elapsed_ms_since_building_prompt / 1000).toFixed(1) + "s ")
+      : el.append(document.createTextNode(
+        "awaiting first token · " + (d.elapsed_ms_since_building_prompt / 1000).toFixed(1) + "s "));
   });
   es.addEventListener("affect_update", (e) => {
     const d = JSON.parse(e.data);
     audit("affect_update status=" + d.status + " turn_id=" + d.turn_id);
     if (d.status === "current" && d.snapshot) {
-      renderPersona(d.snapshot);
-      $("persona-header").classList.add("show");
-      $("persona-header").textContent =
-        d.snapshot.agent_id + " · " + (d.snapshot.dominant_emotion || "?") +
-        " · pad(" + (d.snapshot.pad?.pleasure ?? "?") + ", " +
-        (d.snapshot.pad?.arousal ?? "?") + ", " +
-        (d.snapshot.pad?.dominance ?? "?") + ")";
+      renderPersonaPane(d.snapshot);
+      setPersonaStrip(d.snapshot);
     }
   });
+
   function terminal(label, cls, e) {
-    // Remove the awaiting indicator if it's still showing
     const aw = document.querySelector("#transcript .awaiting.live");
     if (aw) aw.remove();
     finalizeResponse();
-    const div = document.createElement("div");
-    div.className = cls;
-    div.textContent = "[" + label + "] " + (e ? e.data : "");
-    $("transcript").appendChild(div);
+    document.querySelectorAll("#pane-thinking .think-live").forEach((b) => b.classList.remove("think-live"));
+    let meta = "";
+    try { meta = e && e.data ? JSON.parse(e.data) && summarizeTerminal(cls, JSON.parse(e.data)) : ""; } catch (_) { meta = ""; }
+    const chip = document.createElement("div");
+    chip.className = "chip " + cls;
+    chip.innerHTML = `<span class="lbl">${esc(label)}</span>` + (meta ? `<span class="meta">${esc(meta)}</span>` : "");
+    $("transcript").appendChild(chip);
+    $("transcript").scrollTop = $("transcript").scrollHeight;
     const elapsed = Math.round((Date.now() - turnStart) / 100) / 10;
-    audit("turn_summary turn_id=" + turn_id +
-          " text_deltas=" + textDeltas +
-          " thinking_deltas=" + thinkingDeltas +
-          " heartbeats=" + heartbeats +
-          " elapsed_s=" + elapsed);
+    audit(`turn_summary turn_id=${turn_id} text_deltas=${textDeltas} thinking_deltas=${thinkingDeltas} heartbeats=${heartbeats} elapsed_s=${elapsed}`);
     es.close();
-    state.eventSource = null;
-    state.turnId = null;
+    state.eventSource = null; state.turnId = null;
+    $("composer").classList.remove("streaming");
+    setConn(cls === "error" ? "error" : "idle", cls === "error" ? "error" : "connected");
+    $("prompt-input").focus();
   }
-  es.addEventListener("done", (e) => terminal("done", "done-label", e));
-  es.addEventListener("error", (e) => terminal("error", "error-label", e));
-  es.addEventListener("cancelled", (e) => terminal("cancelled", "cancelled-label", e));
+  es.addEventListener("done", (e) => terminal("done", "done", e));
+  es.addEventListener("error", (e) => terminal("error", "error", e));
+  es.addEventListener("cancelled", (e) => terminal("cancelled", "cancelled", e));
   es.onerror = () => {
-    // Connection lost — log to debug, don't terminate transcript with a label
     audit("sse_connection_dropped turn_id=" + turn_id);
     es.close();
-    state.eventSource = null;
+    state.eventSource = null; state.turnId = null;
+    $("composer").classList.remove("streaming");
+    setConn("idle", "connected");
   };
 }
 
+function summarizeTerminal(cls, d) {
+  if (cls === "done") return `model=${d.model} duration_ms=${d.duration_ms}`;
+  if (cls === "error") return `code=${d.error_code} ${d.message || ""}`;
+  if (cls === "cancelled") return `reason=${d.reason}`;
+  return "";
+}
+
 async function cancelTurn() {
   if (!state.sessionId || !state.turnId) return;
-  await fetch("/api/turns/" + encodeURIComponent(state.sessionId) +
-              "/cancel?turn_id=" + state.turnId, {method: "POST"});
+  try {
+    await fetch("/api/turns/" + encodeURIComponent(state.sessionId) +
+                "/cancel?turn_id=" + state.turnId, { method: "POST" });
+  } catch (_) {}
 }
 
-// Tab switching
-document.querySelectorAll("#right .tab").forEach((t) => {
-  t.addEventListener("click", () => {
-    document.querySelectorAll("#right .tab").forEach((x) => x.classList.remove("active"));
-    document.querySelectorAll("#right .pane").forEach((x) => x.classList.remove("active"));
-    t.classList.add("active");
-    $("pane-" + t.dataset.pane).classList.add("active");
+// ---- tabs ----
+function activateTab(tab) {
+  document.querySelectorAll(".tab").forEach((x) => x.classList.remove("active"));
+  document.querySelectorAll(".pane").forEach((x) => x.classList.remove("active"));
+  tab.classList.add("active");
+  const pane = tab.dataset.pane;
+  $("pane-" + pane).classList.add("active");
+  $("pane-name").textContent = pane;
+}
+document.querySelectorAll(".tab").forEach((t) =>
+  t.addEventListener("click", () => activateTab(t)));
+
+// ---- keyboard ----
+document.addEventListener("keydown", (e) => {
+  if (e.ctrlKey && ["1", "2", "3", "4"].includes(e.key)) {
+    const tabs = document.querySelectorAll(".tab");
+    const idx = parseInt(e.key, 10) - 1;
+    if (tabs[idx]) { activateTab(tabs[idx]); e.preventDefault(); }
+  }
+  if (e.ctrlKey && e.key === "c" && state.turnId) { cancelTurn(); e.preventDefault(); }
+});
+
+// ---- copy active pane ----
+$("copy-btn").addEventListener("click", () => {
+  const active = document.querySelector(".pane.active");
+  if (!active) return;
+  navigator.clipboard.writeText(active.textContent || "").then(() => {
+    const btn = $("copy-btn");
+    btn.classList.add("copied"); btn.textContent = "copied";
+    setTimeout(() => { btn.classList.remove("copied"); btn.textContent = "copy"; }, 1200);
   });
 });
 
-// Ctrl+1..4 tab shortcuts (matches TUI)
-document.addEventListener("keydown", (e) => {
-  if (e.ctrlKey && ["1", "2", "3", "4"].includes(e.key)) {
-    const idx = parseInt(e.key, 10) - 1;
-    const tabs = document.querySelectorAll("#right .tab");
-    if (tabs[idx]) { tabs[idx].click(); e.preventDefault(); }
-  }
-  // Ctrl-C cancels in-flight turn
-  if (e.ctrlKey && e.key === "c" && state.turnId) {
-    cancelTurn(); e.preventDefault();
-  }
-});
-
-// Copy active pane to clipboard
-$("copy-btn").addEventListener("click", () => {
-  const active = document.querySelector("#right .pane.active");
-  if (active) navigator.clipboard.writeText(active.textContent || "");
-});
-
+// ---- wiring ----
 $("start-btn").addEventListener("click", startSession);
+$("send-btn").addEventListener("click", submitPrompt);
+$("cancel-btn").addEventListener("click", cancelTurn);
 $("prompt-input").addEventListener("keydown", (e) => {
-  if (e.key === "Enter" && !e.shiftKey) {
-    e.preventDefault();
-    submitPrompt();
-  }
+  if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); submitPrompt(); }
 });
 
 loadAgents();
diff --git a/uv.lock b/uv.lock
index f08547c..3471be3 100644
--- a/uv.lock
+++ b/uv.lock
@@ -1013,7 +1013,7 @@ wheels = [
 
 [[package]]
 name = "ratatoskr"
-version = "0.16.1"
+version = "0.17.0"
 source = { editable = "." }
 dependencies = [
     { name = "httpx" },