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:
+1
-1
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user