feat(demo): token heat map · acceptance strip · watermark radar · speedup gauge

[konjoinfinity]

Summary

• Token Confidence Heat Map (Generate tab): after every generation run a "☀ Heat" button appears; clicking it calls /api/token-heat and re-renders the output with each word colored by MockModel softmax confidence — purple for high-confidence tokens, amber/coral for uncertain ones; hover tooltip shows exact probability and rank
• Speculative Acceptance Strip (Engine tab): after a race simulation completes, an animated strip of colored dots appears below the comparison bars — purple dots for accepted draft tokens, red for rejected, gold for bonus target tokens, with 9ms staggered entry animation
• Watermark Radar Chart (Watermark tab): a 5-axis canvas radar (Z-Score, Green %, Bias δ, Tokens, Confidence) animates from the center outward with a 650ms ease-out-cubic fill after every watermark detection run
• Speed-Up Arc Gauge (Speed-Up tab): clicking any heatmap cell now draws an animated half-circle arc gauge (purple → gold gradient) showing the speedup value with a 700ms ease-out-cubic sweep; replaces the plain text readout

Backend change

demo/server.py: new /api/token-heat endpoint — real_token_heat(text, seed) splits on whitespace, runs MockModel next_token_logits + softmax for each word, returns {tokens: [{text, prob, rank}], n_tokens} — deterministic via stable character-code hash.

Test plan

• Generate text → "☀ Heat" button appears → click → words colored by confidence; hover shows prob + rank
• Engine tab → Run speculative decoder → animated dot strip appears below comparison bars
• Watermark tab → Forge Watermark → radar chart grows from center after detection stats render
• Speed-Up tab → click any heatmap cell → animated arc gauge replaces plain speedup text

https://claude.ai/code/session_018AUTq7p346dUTQ6xe5eNVK

---

Generated by Claude Code