UX overhaul: stop being an admin tool, build live-event confidence, feel alive

[jeroenniesen]

Summary

Three coordinated tracks of UX work driven by an Apple HIG audit of the operator-facing surfaces.

Phase 0 — Shared primitives (5 commits)
Sheet, ConfirmDialog, Toast (with undo), Button, Skeleton — the foundation every later phase reuses.

Phase 1 — Stop being an admin tool (7 commits)

• Humane role labels replace EventAdmin/RoomOperator/Viewer PascalCase enums in the UI
• Setup auto-derives tenant slug + auto-signs-in (no more re-login after first-run)
• Branding page swaps its raw JSON textarea for a visual token + threshold editor; default message background flipped from alarm-red to warm amber
• + New event sheet with illustrated empty state (Events page previously instructed the user to run --seed)
• Every window.confirm() replaced with the new ConfirmDialog primitive (6+ sites)
• Sign-in errors are now humane (apiErrorMessage) instead of a generic string
• Empty states for Schedule / Templates / Members / 404 rewritten with helpful copy + CTAs

Phase 2 — Live-event confidence (8 commits)

• Hub errors normalized via humaniseHubError (no more raw Microsoft.AspNetCore.SignalR.HubException: StaleVersion strings)
• Persistent AppShell with event switcher + Run/Setup tabs (every screen now knows where it is)
• TransportControlsV2 — dominant Start action, Reset/Skip moved to overflow menu
• CueStrip on room control surfacing the next cue with relative time hints
• Keyboard shortcuts on room control: Space / S / R / M / 1–4 / ?
• Undo toast for deleted schedule items (8s grace window)
• Branded Connecting… screen on speaker/door/lobby (no more 14px grey text on black)
• Larger, higher-contrast SessionHeader/Footer for confidence monitors

Phase 3 — Feel alive (5 commits + 1 lint fix)

• Countdown gets a 250ms color crossfade on phase change + final-10s pulse
• Message overlay slide+fade in/out
• Skeleton placeholders replace Loading… text everywhere
• Lobby RoomCard phase-color transitions + subtle ring indicator
• Global visible focus rings restored, aria-live on countdown's final minute

Notes

• Frontend-only (src/web/). No domain or hub changes. POST /api/events already existed.
• Hub-side connected-client presence tracking is deliberately out of scope for the access-code rotation sheet (would need backplane-aware presence registry — separate plan).
• Plan: docs/superpowers/plans/2026-05-11-ux-overhaul.md.
• Each task went through two-stage review (spec + quality) per task, plus a final cross-task integration review.

Test plan

• cd src/web && npm install && npm run build — green
• cd src/web && npx vitest run — 50/50 tests across 12 files
• First-run setup → auto sign-in → empty events list with illustrated CTA
• Create event → land on dashboard inside the AppShell
• Open room control → CueStrip + dominant Start visible; press ? for shortcuts overlay
• Delete a schedule item → Undo toast appears, click Undo, item restored
• Reset access code → ConfirmDialog sheet with explanatory copy
• Open Branding page → visual editors, no JSON textarea
• Open speaker view → branded Connecting state, then large readable header/timer

🤖 Generated with Claude Code