UI Console Page

UI: Console page

The operator's view during a show. Pre-show, this is where you stage and load. During a show, this is where you watch the timeline cursor sweep, monitor receiver health, and abort if needed.

📷 Screenshot placeholder: the Console with a staged show. Show controls top, timeline middle, receiver health strip, and show details below.

When no show is staged

You see a Show Picker:

• A search box that filters the list of shows by name.
• A scrollable list of every show in the database. Each row has the show's name, duration, and a Stage / Delete button.
• Clicking Stage writes stagedShowId to localStorage and re-renders the page with the staged show.
• Clicking Delete confirms then DELETEs the show from SQLite (this is irreversible — there's no trash).

📷 Screenshot placeholder: the show picker.

When a show is staged

The Console rebuilds itself around the staged show. Top to bottom:

1. Show controls (ShowControl.jsx)

The big action area. The primary action button changes label and color depending on system state:

State	Primary button	Other buttons
Not loaded, no errors	Load show	Unstage, Audio offset ±
Not loaded, missing/disabled receivers	Resolve receivers (greyed out)	—
Loading	(spinner)	Cancel
Loaded, not armed	Arm (just an instruction)	Unload
Loaded, armed	Launch	Unload, Pause
Delegate wait	Launch (live styling)	—
Pre-check / countdown	Abort (red)	—
Live	Abort (red)	Pause
Stopped (post-show)	Unload	—

Click Load show and you'll be prompted for the show's authorization code. Type it correctly and the daemon receives { "type": "load_show", "id": <showId> }.

When the daemon's dstc (delegate-to-client) flag is on (the default), Launch happens in two steps:

1. Click Launch in the UI → daemon enters DELEGATE_WAIT.
2. Either click Launch again (now styled as the "Live" launch button) or flip the dongle's start switch to START. Either action causes the daemon to actually begin run_show.

See Show lifecycle for the whole flow.

2. Show health strip (ShowHealthStrip)

A compact row showing each receiver's online state, battery level, and any continuity warnings. Clicking a receiver opens a tooltip with detail; clicking through goes to the Receivers page filtered to that receiver.

3. Timeline (read-only)

A scrollable, zoomable view of every item in the staged show. During Preview Play (a non-firing playback for reviewing the timeline against music), the cursor sweeps through and items light up at their start times. During a real show run, the cursor is driven by fw_cursor from the daemon and items light up as they actually fire.

You cannot edit items here. To change anything, go to the Editor.

4. Show details (ShowDetails)

Show metadata: name, total duration, item count, total cost (sum of inventory unit_cost × references), authorization code (visible while loaded so you can re-type it during arming). Below that, the show's audio tracks (if any) and the optional spatial layout map are summarized.

5. Optional video preview popup (VideoPreviewPopup)

If you've ticked Use YouTube previews (gear icon top-right of timeline), each shell with a YouTube link will play its video at the corresponding moment during preview playback. Useful for visualizing a complex pyromusical without firing anything.

Audio offset controls

A small ±50 ms cluster lets you nudge the audio relative to the cues. Save persists to the show row's audio_file.audioOffsetMs field via updateShow. This is the right place to dial in the latency between "audio plays in your speakers" and "cues actually fire" — every venue has different audio setup latency.

During the show

The Console becomes mostly informational:

• The mode badge cycles Pre-check → Countdown → Live.
• A big T-NN.N countdown takes over the top during pre-launch.
• The timeline cursor moves at real-time speed.
• The big red Abort button stays prominently available. Clicking it sends { "type": "stop_show" } to the daemon, which broadcasts stop to all receivers. The receivers immediately quit firing.

If both the start switch and the abort button are unreachable, flip the arming switch off. The daemon's switch interlock will trigger a stop.

Pause / resume

Mid-show, clicking Pause:

1. Sends { "type": "pause_show" }.
2. Daemon broadcasts pause to receivers; they freeze their local schedules.
3. Mode badge → Paused.
4. The host accumulates pause_offset.

To resume: click the resume button (or, in delegate mode, flip the start switch back). The host calls play 0 and continues the schedule from where it left off.

After the show

The mode badge returns to Stopped (and then to Loaded if you Reset) or you can hit Unload to send reset to all receivers and clear local state. The next staged show starts fresh.

Implementation

• host/byh_app/backyardhero/src/components/console/ShowControl.jsx — primary action ladder + load/launch/abort flow.
• host/byh_app/backyardhero/src/components/console/ConsolePanel.jsx — the page container; gates show picker vs. staged view; handles preview play.
• host/byh_app/backyardhero/src/components/console/ShowDetails.jsx
• host/byh_app/backyardhero/src/components/builder/Timeline.jsx (used read-only here).
• host/byh_app/backyardhero/src/components/console/ShowHealthStrip.jsx
• host/byh_app/backyardhero/src/store/useAppStore.js — stagedShow, hydrateStagedShowFromId.