feat(web): frontend redesign — aurora telemetry instrument + live Markdown (v0.17.0)

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.
This commit is contained in:
vh
2026-05-29 21:42:36 -07:00
parent bbeaa2325a
commit 922ef34b48
3 changed files with 821 additions and 285 deletions
+1 -1
View File
@@ -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"