Redesign snapshot detail: image-centered layout, checkmark approve, masks as hashtags

[stolau]

Summary

Follow-up UX pass on the snapshot detail view, prompted by two observations:

1. The image was competing for space with a full-width Approve button, a
   two-row header, and an always-open History section.
2. Masks (global, per-image, category scopes all exist on the backend) were
   only ever visible as overlay rectangles on one specific snapshot's own
   candidate image -- nowhere else, on that view or any other, was there any
   indication a snapshot had masks applied at all.

• Header line: status pill + category field, compact.
• One control line directly above the image: Dual/Single, Show diff,
  Baseline/Candidate tabs.
• Approve is now a small circular checkmark pinned to the top-right of the
  image area (covers both panes in Dual view), colored via the same
  statusStyles().dot the status pill uses -- amber/red/green/grey -- and
  disabled once status === "pass". This is a deliberate tradeoff: approve
  on pass isn't actually a no-op server-side (compare()'s MAX_DIFF_RATIO
  tolerates ~0.1% drift, so it can still re-pin the baseline), but a simpler
  "green = nothing to click" affordance won out over keeping that reachable
  from this button.
• Masks now render as a row of hashtag-style chips below the image
  (#global, #this image, #<category>), color-dotted by scope, with a
  remove control only when the mask's id is actually resolvable -- mirrors
  the overlay's own pre-existing limit rather than inventing a new one.
• History is now a collapsed-by-default <details> section.

Process

Went through two architect SOLID-gate rounds:

• Round 1 CONCERNS: the chip row's delete control couldn't always resolve a
  per-image mask's id (no backend endpoint lists them), and the original
  "disable Approve on pass" reasoning rested on a false "it's a no-op"
  premise. Both fixed in the design before implementation.
• Round 2 SOUND.

Real Docker + Playwright verification against the actual built image caught
a bug neither review nor the unit suite could have: in Single view the
checkmark floated far right of the image, because its positioned ancestor
was a full-width flex row rather than shrink-wrapped to the visible pane.
Fixed by nesting the image content in its own relative div, centered by an
outer flex justify-center, so the checkmark anchors to the pane's real
rendered width in both view modes. Confirmed visually after the fix.

Test plan

• Both architect-flagged fixes mutation-tested (reverted, confirmed the
  dependent test fails, restored)
• New tests: checkmark disabled on pass / enabled on fail and
  approved-baseline-missing; chip row scope labels + remove-only-when-
  id-known (60 viewer tests total, up from 55)
• npm run lint --workspaces clean
• npm test --workspaces -- 36 client + 60 viewer, all passing
• npm run test:e2e -w examples/demo-app -- 6/6, live-browser run through
  Approve/masks/category flows against this exact redesigned markup
• backend ruff check + pytest -- 141/141 (no backend changes)
• Real Docker build + Playwright screenshots of dual view, single view,
  expanded history, and the disabled green checkmark state
• viewer/CODEMAP.md updated

Co-Authored-By: Claude Sonnet 5 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_01NrQeh9CXrigN1cvpJuyzy4