feat(dashboard): 10ft UI — iPad/tvOS-style home + go-proxy playback (#438)

## Summary

Adds a TV/iPad-style "10ft UI" to the dashboard — two new pages modeled
on the iOS/tvOS app's Home + Playback screens. Existing Mosaic
(`grid.html`) is untouched.

- **`/dashboard/mosaic-10ft.html`** — Home: 16:9 hero pane on top +
CSS-grid LIVE row of preview tiles (0–16, user-tunable). Left-click tile
swaps to hero (preview-only), right-click tile or click hero starts
full-screen playback. Slide-in TV-style settings drawer (46vw / 78vw,
240ms ease-out). Keyboard: ↑/↓ between hero ↔ strip, ← → moves tile
focus, **Enter** swaps tile→hero or plays the hero, **S** settings,
**F** fullscreen, **?** help.
- **`/dashboard/play-10ft.html`** — Full-screen playback through
go-proxy with native HTML5 controls. Big 56×56 icon top bar: ‹ Back · 🔄
Reload · ↻ Restart · 🚨 911 · ⚙︎ Settings. TV-style nested drawer with
main list (Stream / Protocol / Codec / Segment / Max Res / Advanced) →
sub-pages with checkmark selection rows + back chevron. HUD overlay
(Engine / State / Resolution / Bitrate / Buffer / Live offset / Dropped
frames / Stalls, 1 Hz). Lean hls.js / Shaka config (`enableWorker:
true`, default ABR ramp from low variant) to keep cold-start CPU low.
- `content/shared/shared-nav.js` adds the **📺 10ft UI** sidebar entry.
- `content/dashboard/dashboard.html` adds a 10ft UI card link.
- `PRD.md` §7.2 — new "Mosaic (10ft)" bullet.

Reuses the existing `ismSelected*` localStorage keys for cross-page
state, and the same Shaka / hls.js / native HLS init shapes as
`grid.html`. `play-10ft.html` builds the manifest URL through go-proxy
(`<ui-port-prefix>081`) using the same shape as `grid.html`'s
testing-window helper.

## Pre-commit review

Ran `code-reviewer` (Sonnet) on the staged diff. Three real issues found
and fixed in this commit before push:

1. **`loadHero()` race** — added a monotonic `heroLoadGen` counter so
rapid overlapping calls (fast tile clicks) can't land two engines on the
same `<video>`. Same guard added on `play-10ft.html`'s `loadStream()`
for Reload/Restart spam.
2. **Drawer Tab-trap fired when drawer closed** — added `if
(!drawerOpen) return;` guard on both pages.
3. **Hero leak on empty filter** — `setHeroFromInitial()` now calls
`destroyHero()` when nothing resolves, preventing a stale hero engine
from continuing to decode.

Other reviewer feedback (`shaka.polyfill.installAll()` redundancy, drift
between mosaic-10ft and play-10ft) is acknowledged as deferred-for-v1
per CLAUDE.md ("Don't add features, refactor, or introduce abstractions
beyond what the task requires"). A shared module is the right move once
a third caller appears.

## Test plan

- [x] Hand-tested on `test-deploy-dev`
(`http://jonathanoliver-ubuntu.local:21000/dashboard/mosaic-10ft.html`)
— hero focus on entry, ↑/↓ between hero and strip, ← → tile focus wraps,
Enter swaps and plays correctly.
- [x] Right-click tile lands on `play-10ft.html` with go-proxy URL
routed via `:21081`.
- [x] Settings drawer opens / closes / Tab-trap behaves; preview-pane
counter applies and resizes the grid.
- [x] play-10ft Reload / Restart / 911 each behave correctly; Advanced
toggles persist; HUD updates at 1 Hz.
- [x] Existing `grid.html` unchanged — no regression on the original
Mosaic page.
- [x] CPU usage during cold-start playback now comparable to
`testing-session.html` (Web Worker + default ABR ramp).
- [ ] Cross-compare with `testing-session.html` — N/A, no edits to
testing pages.

Closes #434

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: jonathaneoliver

PRD.md

@@ -147,6 +147,11 @@ The system is intended for:
 - Clicking a tile selects audio and updates global selection.
  - Developer context menu includes an HLS.js demo link for the selected test URL (developer=1).
 
+**Mosaic (10ft)**
+- TV‑style lean‑back layout: large 16:9 hero on top + horizontally‑scrolling LIVE row of preview tiles below.
+- Mirrors the iPad/tvOS Home layout (`apple/InfiniteStreamPlayer/HomeScreen.swift`); reuses the global `ismSelectedContent` selection state.
+- Arrow keys + Enter promote a tile to hero; `S` opens a slide‑in settings drawer (filters); `F` toggles fullscreen. Mouse: tile click promotes, hero click toggles audio, vertical wheel scrolls the row horizontally, click‑and‑drag scrolls the row.
+
 **Live Offset Comparison**
 - Compare live offset and buffering for LL‑HLS vs 2s/6s HLS vs DASH variants.
 

content/dashboard/dashboard.html

@@ -107,6 +107,9 @@ <h1 style="font-size: 32px; font-weight: 400; margin-bottom: 8px; color: var(--t
                         <a href="/dashboard/grid.html" class="btn btn-secondary" style="width: 100%;">
                             Mosaic ⚠️
                         </a>
+                        <a href="/dashboard/mosaic-10ft.html" class="btn btn-secondary" style="width: 100%;">
+                            10ft UI
+                        </a>
                         <a href="/dashboard/segment-duration-comparison.html" class="btn btn-secondary" style="width: 100%;">
                             Live Offset (2s/4s/6s)
                         </a>