feat(web): terminal material — cctrace's design language, ccx's bones

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to ccx are documented here.
 Format: [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
 Versioning: [Semantic Versioning](https://semver.org/spec/v2.0.0.html)
 
+## [Unreleased]
+
+### Changed
+- **Web UI wears terminal material now** — cctrace's design language ported onto ccx's markup (every selector and JS hook kept, values rewritten). 13px `ui-monospace` body replaces 17px system sans ('Courier New' led the old mono stack); warm-tinted neutrals with terracotta as the single accent plus a five-hue semantic set (green/red/amber/purple/blue) replace ~12 stray hues; pastel role bubbles become hairline surfaces with faint washes — user turns get the cctrace anchor mechanic (space above + accent-washed header row); thinking is muted italic. Chrome details: thin scrollbars, accent selection, visible focus, tinted shadows, one radius scale. Second side-stripe purge caught what 0.11 missed (tool blocks, outline active item, agent turns, doctor/memory cards). Devlog: `docs/devlog/2026-07-29-web-terminal-material.org`.
+- **Long tool outputs clamp with an explicit "show all" expander** instead of an inner scrollbar — the mouse wheel never gets trapped inside a pane (cctrace's msg-clamp mechanic). Progressive enhancement: JS measures overflow and adds the fade mask + button; panes inside collapsed details clamp lazily on first open; without JS the old scroll behavior remains.
+
 ## [0.12.0] - 2026-07-24
 
 Both changes answer the second field report — the first one produced by ccx tracing itself: a user audited a live session's trace and caught its two headline numbers lying. Findings 3-5 from the same report are tracked in issues #21-#23.

docs/devlog/2026-07-29-web-terminal-material.org

@@ -0,0 +1,58 @@
+* [2026-07-29] Dev Log: Web UI terminal material                :WEB:DESIGN:
+
+** Context
+Eric's verdict on the web UI: cctrace's session UI is the taste
+reference ("good taste especially on the session concepts and UX, the
+timeline, reply etc"); ccx's "color/font, layouts, interactions,
+details are looking bad". Direction: adopt cctrace's design language,
+keep ccx's single-binary Go architecture and information architecture.
+
+** Why
+The old surface was a pastel chat app: 17px system sans body, role-
+tinted bubbles (user warm / assistant green / tool yellow / error
+red), ~12 stray hues (#e9a, #a80, #5a9, #fa0, #d55, #c55, #86c,
+blue/violet/cyan context accents), 'Courier New' first in the mono
+stack, radii from 3 to 12px, pure-black shadows. cctrace reads as a
+well-kept terminal: 13px ui-monospace, one accent, a small semantic
+set, hairline surfaces, quiet chrome.
+
+** What
+- =CHANGE= Material swap in place: every selector and JS hook kept;
+  values rewritten. 13px ui-monospace body (Courier New gone),
+  10/11/12/13 sub-scale, 18px page h1.
+- =CHANGE= Palette: warm-tinted neutrals (kiln: tint neutrals toward
+  brand hue — light #fcfbfa ground, dark #131110), terracotta as the
+  ONE accent (#c65d3e light / #e08662 dark, deepened for contrast),
+  semantic set green/red/amber/purple/blue. All stray hues collapsed
+  onto tokens; provider + event tokens ride the set.
+- =CHANGE= Bubbles -> hairline material. Role backgrounds are faint
+  washes (color-mix 6-9%) or transparent; user turns get cctrace's
+  anchor mechanic: extra space above + accent-washed header row in a
+  hairline box. Thinking is muted italic (was amber + pastel ground).
+- =FIX= Side-stripe purge, round 2 (kiln permanent anti-pattern; the
+  0.11 pass missed these): tool blocks (2px blue), outline active item
+  (2px cyan), agent turns (2px purple), doctor/memory/settings cards
+  (3px). Now hairline full borders, tinted where identity matters.
+- =CHANGE= Chrome details from cctrace: thin scrollbars, accent
+  selection, :focus-visible outlines, two shadow tokens (tinted, not
+  black), radius scale 6/4/999.
+- =FIX= Uppercase role labels exempt command names and agent types
+  (/init must not render /INIT).
+
+** How
+CSS-only where possible (style.css rewritten value-by-value), plus
+embedded page styles in templates.go (doctor, memory, settings,
+Tailwind @theme) and two inline hexes in server.go. Favicon x
+re-inked #c65d3e.
+
+** Decisions
+| Decision | Alternatives | Rationale | DRI | Timestamp |
+| Terracotta stays the accent | Copy cctrace's GitHub blue | The badness was hue-scatter + pastels, not the brand hue; one warm accent on warm-tinted neutrals keeps ccx identity and avoids clone territory | claude | 2026-07-29 |
+| Warm-tinted neutrals, not GitHub blue-grays | Verbatim GitHub palette | Kiln L0: tint neutrals toward brand hue; blue-gray ground under a terracotta accent reads accidental | claude | 2026-07-29 |
+| Values swapped in place, selectors untouched | Rewrite templates to cctrace's markup | Same information architecture, zero JS breakage, reviewable diff; structural ports (clamp+expander, replay bar) are separate features | claude | 2026-07-29 |
+
+** Notes
+Not ported yet, candidates for follow-up: cctrace's msg-clamp (380px
+mask + explicit expander instead of inner scroll on long outputs),
+replay transport, tabular-nums pass on stat rows. Screenshots remain
+host-gated (no browser in deva).

internal/web/server.go

@@ -1674,11 +1674,11 @@ func handleInsights(w http.ResponseWriter, r *http.Request) {
 			size := fmt.Sprintf("%.0fKB", float64(rpt.Size)/1024)
 			b.WriteString(fmt.Sprintf(`<tr style="cursor:pointer" onclick="location='/insights/%s'">`,
 				rpt.Name))
-			b.WriteString(fmt.Sprintf(`<td style="padding:6px 8px;border-bottom:1px solid #e5e5e0"><a href="/insights/%s" style="color:#da7756;text-decoration:none">%s</a></td>`,
+			b.WriteString(fmt.Sprintf(`<td style="padding:6px 8px;border-bottom:1px solid var(--border)"><a href="/insights/%s" style="color:var(--primary);text-decoration:none">%s</a></td>`,
 				rpt.Name, rpt.Name))
-			b.WriteString(fmt.Sprintf(`<td style="padding:6px 8px;border-bottom:1px solid #e5e5e0">%s</td>`, rpt.Scope))
-			b.WriteString(fmt.Sprintf(`<td style="text-align:right;padding:6px 8px;border-bottom:1px solid #e5e5e0;font-family:monospace">%s</td>`, size))
-			b.WriteString(fmt.Sprintf(`<td style="padding:6px 8px;border-bottom:1px solid #e5e5e0">%s</td>`, formatAge(rpt.CreatedAt)))
+			b.WriteString(fmt.Sprintf(`<td style="padding:6px 8px;border-bottom:1px solid var(--border)">%s</td>`, rpt.Scope))
+			b.WriteString(fmt.Sprintf(`<td style="text-align:right;padding:6px 8px;border-bottom:1px solid var(--border);font-family:monospace">%s</td>`, size))
+			b.WriteString(fmt.Sprintf(`<td style="padding:6px 8px;border-bottom:1px solid var(--border)">%s</td>`, formatAge(rpt.CreatedAt)))
 			b.WriteString(`</tr>`)
 		}
 		b.WriteString(`</table>`)