Live Hub: showing it in ten minutes
Audience: whoever shows the Live Hub to someone: the product owner, a
colleague in sales, a coach who tells another coach. Status: written on
2026-10-08 as work block P4 of LIVE_HUB_CONCEPT.html. The script follows
the screens as they are in the code that day, and was walked in a browser:
see The checked run.
The showing needs a laptop with the portal open and nothing else. No tablet, no sensor, no session of your own: the demo plays a small weightlifting meet in the real screens. The portal has to reach its server once, to sign in.
Before you start
- Sign in to the portal and open Live Hub once, so the page is loaded.
- Use a second screen or a projector if there is one, and put the browser window on it. The display is made to be read from across a room.
- Close the first-visit tour if it comes up ("Skip all tours").
- For the video overlay (step 8) add
?beta=1to the Live Hub's address once. The switch is remembered in that browser. - Decide which theme you show. The portal follows the system's light or dark setting; a dark display reads best in a dim room.
The script
Each step says what to press, what is on screen then, and one sentence to say. The demo opens leading: it holds at its first station, the set-up, and waits for "Next". This script uses the evening that runs by itself, so step 1 presses Play by itself. (Showing the demo station by station instead needs no script: every station says its own sentence.) The demo then runs on a clock: its lobby lasts 13 seconds, the meet 70 seconds. The strip above the view (1 · Lobby, 2 · Live, 3 · Result) jumps to the start of a chapter at any moment, so nothing has to be waited for and nothing can be missed.
| Press | On screen | Say | |
|---|---|---|---|
| 1 | Live Hub, then Watch the demo, then Play by itself | The lobby: the code K7M 2QX as the largest thing, two tablets that join by themselves, three marks per device (joined, sensor, test set), then "2 of 2 ready" | "A coach sets a session up here. Tablets join with six characters, typed in the tracking app. The lobby shows that every platform works before anybody lifts." |
| 2 | Go live · 2 of 2 ready, then Go live in the question | The board, empty, and the first attempts of the Snatch arriving, one line per lift | "From here every completed set is on the board in under a second. Without a connection it waits on the tablet and arrives once." |
| 3 | Present | The same board as a display: who is on the platform and with which load before a lift, the reps while it is lifted, the outcome after it. A new leader glows green, a record yellow | "This is the television in the gym. Any browser, full screen. It names who is next, so the room looks up before the lift, not after." |
| 4 | Move the pointer, Screen, On a projector | The Hall profile: each lift has the screen to itself for a few seconds, then the board returns | "A screen is told where it hangs. On a projector across a hall the type is larger and one lift is shown at a time." |
| 5 | Screen, On the gym's television; move the pointer, Exit presentation; then Competition | One panel for the attempt: the load, good lift or no lift, the three attempts as a strip, the bar path with its peak values; the standings beside it | "For a meet. Three attempts, a judge's ruling on each, a total. A no-lift is struck through and does not move the standings." |
| 6 | An attempt in the strip ("Attempt 2: details"), then No lift or Good lift, then Close | The attempt's sheet with its ruling; the standings follow | "The tablet asks the judge after every attempt. The coach can rule or correct from here, and every display follows within a second." |
| 7 | Stream | Every set, rep by rep, the newest on top, the bar path over the full height | "For a normal training without a ranking: what was just lifted, on every platform." |
| 8 | 3 · Result, then Present | Who won, by total; the records of the evening; the podium on the display. Back on the page: Export PDF | "When the session ends, the result is there by itself: podium, final table, records, as a PDF for the notice board." |
| 9 | Exit presentation, Video overlay (needs ?beta=1), pick a lift, Take; Open output | The control page: the lifts, a stage, the graphics. The output window is what a video mixer would show over a camera picture | "A beta: the same data as graphics for someone's live stream. Run by itself follows the meet without a hand." |
| 10 | Back to the hub, New live session | Three steps beside a picture of the display that follows each choice; the rules as a sentence | "Setting one up takes a minute. The rules read as a sentence: who is ranked, by what, with how many attempts." Do not press Create and open the lobby unless you want a real session. |
A shorter showing, five minutes: steps 1, 2, 3, 5 and 8.
What the demo cannot show
Say it before somebody asks.
- A tablet. Joining, the question to an athlete's own phone, the judge's question after an attempt and the standings on the tablet are in the tracking app. The demo plays the portal's side only.
- A device that goes quiet. On a real session a line on the display and in the coach's view names a tablet that stopped sending.
- A recorded lift. The demo's bar paths are drawn from each rep's peak bar speed. They are shaped like a snatch, a clean and a jerk, and they are made up.
- A real room. Nobody has seen the display on a television or a projector yet (work block W16).
If something goes wrong
| What you see | What to do |
|---|---|
| The demo has moved on to the result by itself | Press 1 · Lobby or 2 · Live: each starts its chapter from the beginning |
| The display's buttons are gone | Move the pointer. They leave after four seconds without one |
| No Video overlay button | Add ?beta=1 to the address and load the page again |
| The portal cannot sign in | The demo asks the server nothing, but the portal needs it once to sign in. Sign in before the showing and keep the tab open |
| The first-visit tour covers the page | Skip all tours |
The checked run
The script is held by three tests of the live suite. Each drives the portal
of the working tree in a headless Chrome and writes a folder of pictures with
a protocol into tests/live/out/walkthrough/. Every picture is read by the
same checks (tests/live/support/walk.ts): text that is cut, texts that lie
on each other, text below 3 to 1 against its background, a page that scrolls
sideways, and strings on screen that are in no translation catalogue.
| Test | What it walks | Sizes |
|---|---|---|
96-walkthrough-demo | The script above, against the demo | 1440 × 900 and 1024 × 768 for a page, 1920 × 1080 for a display; dark and light |
97-walkthrough-real-session | The same stations on a real session on the test server: two simulated tablets that join by code, fourteen athletes, one with a name of 40 characters, a ruling, the end, the result | the same |
98-walkthrough-access | Tab order, names for a screen reader and visible focus on the hub, the set-up and the lobby; the two dialogs; a display under "reduce motion" | 1440 × 900 |
Run one with:
ENODE_WALK=1 npx vitest run --config tests/live/vitest.config.ts tests/live/offline/96-walkthrough-demo.live.test.ts
They need a portal on http://localhost:3001 (ENODE_PORTAL_URL), the test
server, and puppeteer-core by path (ENODE_PUPPETEER), as live test 71 does.
Test 97 creates fifteen accounts and deletes them; do not stop it half way.
Protocol
Run on 2026-10-08 between 10:35 and 10:59, against the working tree and the test server: all three tests twice in a row, six runs, all green (96: 3 of 3 tests, 98: 4 of 4, 97: 1 of 1, each time). One run of 96 takes about five and a half minutes, 98 two, 97 a little over four. Every account the runs created is deleted. An earlier run of 96 that morning failed on answers of 502 while the test server was restarting; the test does not filter them.
What the run looked at: 70 pictures of the demo, 48 of the real session and
8 of the keyboard walk, in tests/live/out/walkthrough/ (not in the
repository). Every picture of the demo and of the real session was looked at
once, on 2026-10-08, beside what the checks pointed at.
Held. Every station of the script is reached in both themes and all sizes. No page throws, none scrolls sideways, and the demo asks the server nothing. Dark and light say the same on every station. No Live Hub string is missing from the translation catalogue. Fourteen athletes are on the board, on a display across its pages, and in the result. A name of 40 characters ends in "…" wherever it does not fit. Every Tab stop on the hub, the set-up and the lobby has a name, can be seen, shows its focus and comes in reading order. Under "reduce motion" nothing moves on a display, also not in the Hall profile.
Fixed during the run.
- A long name in the display's cards (the last lift, the attempt, who is on
the platform, the Stream's hero) was cut in the middle of a letter. It is
drawn smaller first and then ends in "…" (
FitValuewithellipsis). - "How it works" and "Go live?" did not hold the keyboard: Tab left the
dialog and the focus was lost when it closed. Both take the focus, keep Tab
inside and give the focus back (
useModalFocusin@enode/ui, so everyConfirmDialogand every how-to of both apps has it). - The lobby did not tell a screen reader that a device joined or is ready. The line "n devices joined · n ready" is a live region.
- Heading levels in the set-up and the lobby skipped one.
- In the Leaderboard's table a long name pushed the last column out at 1024 px. The athlete's column takes what the others leave.
Open after the first run, and what became of it. The run listed thirteen rows and changed none. Block P5 took them up the same afternoon, together with what the blocks of 8 Oct had left. The second run, between 14:45 and 15:05: tests 96, 97 and 98 green, 72 pictures of the demo and 50 of the real session; live tests 71, 93 and 95 (light theme) green as well.
Closed:
| Where | What it was | Now |
|---|---|---|
| Display, before a lift | "Up next" named a load without its exercise | Beside a board of another exercise the load carries the exercise's name; where nobody can name it, the load is left out |
| Display, before a lift | An empty outline under "Bar speed per rep" | The block is not drawn before the first rep; its room is kept, so nothing moves when the rep arrives |
| Display on a desk | No lifter was named before a lift | One line over the Leaderboard names who is on the platform, with exercise, attempt and load |
| Display, controls shown | Buttons on the clock and the wordmark, a star on "KG" | Clock and wordmark step back under the controls; a display's row has no star |
| Display, Competition | The bar path's peak values touched their markers, lay on the path and had no names | In the room the path's panel is wide enough for the names: "Peak velocity", "Peak power", "Peak force" over their values, beside the path, as on the Stream |
| Display, Leaderboard | A last page with one athlete | The pages share the rows: 14 rows at 9 a page are 7 and 7 |
| Display, Leaderboard | The rank control was an icon | "Ranked by Load · best set", as on the coach's page; it leaves with the controls and the top line keeps saying what is ranked |
| Attempt sheet, a no-lift | A place beside "Not ranked and not announced" | The chip says where the athlete stands, not the attempt; the gap to the next athlete is left out |
| Attempt sheet, light theme | Cyan figures below 2 to 1 | Every figure in the text colour (16.7 to 1), the metric's colour as a small tick |
| Stream, a set without a bar path | "No sensor data" beside drawn bar speeds | The sentence appears only when there are neither curves nor a bar path |
| Words | "in the chosen exercises"; "−1 KG behind"; "Lift analysis" and "Lift card" | The display names the exercises; "1 KG behind"; "Lift card" in both places |
| Numbers | "2449 W" and "2,449 W"; "m/s" and "M/S"; "−0.0" | One formatting for a chart's head and the figures beside it; units as the figures print them; a number that rounds to zero has no sign |
| Result | One athlete alone had no podium; a display's exercise headings carried the total's rule line; an ended session had no "Displays" | A podium of one; the rule line stands over the total only; "Displays" in the result's menu lists the screens with "Remove" |
| At 1024 px | The logo field's icon cut; a step that opened scrolled; "Take back" on a line of its own; two footers | The icon stands whole; every step opens at its top; the three rulings share a line; one foot |
| A finger | Tabs and the Side/Front picker 26 px high, header buttons 40 px | On a touch screen each takes a tap in at least 44 × 44 px around it; nothing is drawn larger |
| The logo | Never picked by hand | Picked, replaced and removed in a browser, seen in the lobby and on the hub's card |
| The demo | A jump from its first step to a later one showed an empty board, result or display | The lifts are delivered again when the set-up's picture leaves |
| Tests | Live test 93 failed on the board; live test 95 had not finished in the light theme; no production build of the join page | 93's last step waited for the wrong words and is corrected; 95 passes in light; next build exports /join and /display |
Open, each with who decides. None stops a showing.
| Where | What | Who |
|---|---|---|
| Words | "Set" and "attempt" for the same lift. Proposed: "attempt" wherever a lift is judged or counted (a session with rules, the Competition view, every display, the overlay), "set" where training is logged (Stream, lobby, counts) | Product owner |
| Display, a full board | A name of 40 characters loses its "Just in" in rows of 7 to 9 a page: the tag gives way to the name, by rule. The other way round would keep the tag | Product owner |
| Display, top line | A long rules sentence ends in "…" and loses its last clause; in a result's heading it loses the counts | Product owner: two lines, or the counts first |
| Result on a display | Two equal totals have their sentence on the page and on a desk, not in the room or the hall | Product owner |
| Hub at 1024 px with sessions | The subtitle ends in "…" beside three labelled actions | Product owner: the subtitle or the label "How it works" gives way |
| Set-up at 1024 px | "Create and open the lobby" takes two lines in the foot | Product owner: a shorter label |
| Competition at 1024 px | The standings start about 250 px below the fold: they stand beside the lifter only from 960 px of room | Product owner |
| A finger | The round button (34 px high) and the choice chip (32 px) are the design system's sizes in both apps | Product owner |
| The demo | Its two lifts have no animation: they are in no catalogue | Product owner supplies them |
| Outside the Live Hub | On a new account the sidebar's "New" cards take the place of the navigation. Close them before a showing | — |
What the checks cannot tell: whether a real television shows what the headless browser draws, and whether the script's sentences are the ones the product owner wants to say. The block's last bar is hers: read this page.