[ShuhaoZQGG]

Plan 13, Phase 1 of design B: the new panel's shell and Timer tab. Stacked on #153 (Phase 0);
this PR's base is that branch, so the diff is Phase 1 only. It retargets to dev when #153 merges.

Why

The approved design B boards: BTop, BCard, BLook, B-T01–T15, B-L01–L07 and B-P01. The timer becomes
the centre of the panel, settings move into sheets, and the footer's buttons move into the top bar.

What changes

Only with new_look on (off everywhere today):

• Top row: Agenda / Timer / Report as a segmented switch (PostHog tab_viewed ids unchanged),
  the Pro chip and ⋯. No footer.
  • Pro chip replaces the footer's Upgrade/Pro button. While pro is off it is locked and lists
    what is coming. Once pro is on it opens Upgrade, with the launch dot for free plans and amber
    for Pro.
  • ⋯ menu: Your plan and Join my club with a code (only once pro is on), Roles & timing rules,
    Clear the timer from my video (works from any tab: it switches to Timer first), How-to videos
    (toastmusters.com/tutorials), Send feedback, Rate the app.
• Timer card: the whole card takes the meeting's colour.
  • Speaker picker: agenda, people in the meeting, a typed name added with Enter, rename the current
    speaker. A row that needs a role is marked and still refused.
  • Role picker with thresholds, and the rules line with "Edit rules".
  • A 16:9 preview with the count-up chip and club badge. Drag, resize and hide work as before; the
    controls now show on hover or keyboard focus. A one-time "Drag me to move…" hint.
  • The clock, one status line ("Ready · green at 4:00", "Green · yellow at 5:00", "Paused · red at
    6:00", …), the preview swatches, and Start + Reset / Stop + Finish / Continue + Reset + Finish.
• Around the card: Up next (with "Pick a role"), an after-Finish note when the next row needs a
  role, the video-off notice, break length (10/5/3/Custom) with a new Stop music button while
  break music plays, and custom times in one row.
• Look & sound: four rows showing their current values. Each opens only its own sheet:
  • On your video: three modes, and Clear from my video.
  • Cards: the card sets only. The own-background picker moved out.
  • Sounds: same lock and copy as today.
  • Between speeches: "Timer card" (today's default) or "My video", with the optional
    own-background picker under My video.
• Code: everything that talks to Zoom still comes from useLiveTimer, Phase 0's lift of LiveTab's
  logic. The new tab adds no video code. Components live in apps/zoom-app/src/b/.
  VideoPreviewLayer gained revealControls="hover" and a hint; today's panel keeps the old
  behaviour.

Design calls the boards left open:

• Between speeches is two choices plus an optional image, not three radios. Picking "No
  background" while an image was saved would have had to delete the image.
• How-to videos opens the published tutorials page.
• Phase 2/3 work still on the old screens: Roles & timing rules opens the existing dialog until
  Phase 2's sheet, and the stage still uses today's TimerStage until Phase 3.

Security

None. No routes, no data changes.

Production impact

None while new_look is off. Rollback is a revert.

Testing

• npm test: 128 files, 2420 tests pass. New: TopBar.test.jsx, TimerCard.test.jsx, NewLookShell.test.jsx
  (each row opens one sheet, Timer-only toast, between-speeches choice, clear from ⋯ on another tab, the
  after-Finish note), format.test.js.
• npm run test:e2e: 64 passed, including e2e/zoom.new-look.spec.js (fits 360 and 400 px with no
  sideways scroll and one top row, Start above 560 px, a full speech into the report, every sheet, hover
  reveal, the ⋯ menu with Pro on).
• npm run test:specs: 14 valid, no drift.
• Checked by hand in the browser at 360 and 400 px: card, role list, ⋯ menu, speaker add, running and
  paused states, both sheets.

Evidence (real Zoom client)

Held on purpose: the Zoom-client runs happen once, after plan 13's last phase, as asked.

Not verified

• New spec e2e/zoom-client/new-look.md: NL-01 to NL-12, not run.
• Specs whose covered code changed, with new_look off: timer-core, timer-sounds,
  club-card-sets, zoom-deeplink (doc note only).

All are held until the last phase. Old specs now say to deploy FLAGS_FORCE "1,new_look=0".

Look here first

• apps/zoom-app/src/b/TimerTab.jsx: the wiring to useLiveTimer, the ⋯ clear request, the after-Finish note.
• apps/zoom-app/src/components/VideoPreviewLayer.jsx: hover reveal (shared with today's panel).
• apps/zoom-app/src/b/LookSheets.jsx BetweenSheet: the between-speeches model.