feat(web): the side panel's headline and lane ledger (#40)

[bgent19]

Closes #40.

The instructor's dashboard beside the graph: a headline and a lane ledger that lists every lane, always, in a fixed order, so a lane's numbers are in the same place on every beat of all four days and can be read aloud without hunting.

What's here

• Headline — six fixed slots (Supply, Demand, Flow, Cut, Struck, Over cap) plus one A/B pair line.
• Ledger — one row per stored lane, always, in fixed order, keyed by edge id: Lane / From / To / Cap / Cost / Risk / Flow. Columns and frame are generated from one list, so a header cannot exist without its cell.
• Row states — .removed, .in-cut, .violating, .on-path, .hot as classes on that one row. No separate DOM for any lane subset.
• Click-to-pin — a ledger row pins that lane hot; R clears it.

Both slots are built once per dataset in the same topology pass as the canvas and thereafter mutated only by class and text content. No innerHTML after build, in any slot — a slot rebuilt from a string loses its handles, and the handle is what makes a row and its lane demonstrably the same object.

Decisions worth reading

• The cut's certifying lane list and the interdicted subset were never components. They are subsets of the lanes, so they are row states rather than separate DOM that could disagree with the row. The struck and violation counts are counted from the very flags that class those rows.
• Throughput and cut capacity are not derived here. They are solver scalars the server computed. Summing cut capacity in the browser would put two numbers that max-flow/min-cut says must be equal on the dashboard by two different routes, one slot apart. Flow and Cut view (Days 2-3) #42 must set state.cut and marks.inCut from one /maxflow response.
• The ledger is never filtered to the cold lanes. Filtering reflows on every keypress, and it empties itself on the pristine network, where an empty hot set means every lane is hot. Showing everything gives the ledger the job it needed anyway: it is the printed key to the canvas.
• No reflow, structurally. The tick's width is reserved transparently from the first paint, and the table is laid out fixed — an auto table re-measures its columns from their content, so a two-digit flow becoming three-digit would shift every column on a beat that changed nothing else.
• A pointer may never reach a state the keyboard cannot, which is why R ships alongside the click rather than after it.

Known follow-ups

• R clears the pin, but "until the next beat" cannot be honoured until the beat engine (The beat engine, keyboard controls and layer catalog #41) lands. clearPin() documents that the beat mutator must call it.
• Tick colours for cut, path and violation are provisional stand-ins: they are meant to be low-chroma echoes of canvas hues that Flow and Cut view (Days 2-3) #42–Cost and Risk view (Day 1) #44 have not authored yet. Only removed and hot echo a colour that exists today. The stylesheet flags them for re-derivation.
• A pinned lane also brightens on the canvas, so the click is visible in the room and not only on the instructor's display. It spends no hue — weight and brightness only — and is scoped away from removed lanes so it cannot overpaint a struck-out reading.

Verification

tests/test_web_assets.py gains four checks, written before the implementation:

• no asset writes markup as a string (innerHTML and friends);
• every row state is both painted by the stylesheet and computed by state.js;
• every row state has a --panel-tick-* token;
• the ticks are strictly less saturated than every categorical role on the canvas — a relationship rather than a value, since the palette is expected to be retuned against the real projector.

Full suite: 294 passed. No JavaScript test runner is introduced; the frontend stays verified from Python or not at all.

🤖 Generated with Claude Code