feat(web): charmbracelet-aesthetic tapir spinner with charm palette
CI / Lint / Test / Vet (push) Successful in 10s
CI / Build & Import (push) Successful in 10s
CI / Mirror to GitHub (push) Has been skipped

Replace the plain ASCII spinner with a Charmbracelet-style TUI panel rendered in
the browser: a dark terminal card holding a rounded purple box (╭─╮╰─╯│) around a
pink block-char tapir (▄▓▀█) with mint eyes (◕ ◕) and a snout that wiggles ∩→∪→~
across three cross-faded frames, plus a lipgloss-style progress bar whose mint
fill grows over a dim track via an 8s CSS clip animation.

Colours come from named palette consts (CharmPurple/Pink/Mint/Cream/Dim) applied
as inline span styles, so the box and CSS share one source of truth. Frames are
built by a small run/line helper that pads each row to a fixed interior width —
an internal test asserts every box row is the same cell width so the border stays
flush. Honours prefers-reduced-motion (static frame + partial bar).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-03 20:11:17 +02:00
co-authored by Claude Opus 4.8
parent 8c6c7ca947
commit a4aeb5efcd
5 changed files with 435 additions and 321 deletions
+4 -2
View File
@@ -48,8 +48,10 @@ func TestRequestSummarizeImmediateProcessing(t *testing.T) {
// The processing card came back while ProcessVideo is still parked on block:
// the work runs in a goroutine, the handler did not wait for it.
require.Contains(t, html, "Summarizing", "processing card returned")
require.Contains(t, html, "ω", "ascii tapir frame rendered")
require.Contains(t, html, "∪∪", "all tapir frames rendered")
require.Contains(t, html, "", "charm box rendered")
require.Contains(t, html, "", "tapir body block chars rendered")
require.Contains(t, html, "∩", "wiggling snout frame rendered")
require.Contains(t, html, web.CharmPurple, "charm palette applied to the border")
require.Contains(t, html, "/v/"+videoX+"/status", "card polls the status endpoint")
require.Contains(t, html, `hx-trigger="every 2s"`, "card auto-polls every 2s")
require.NotContains(t, html, "Queued", "not the queue-only card")