Add web UI lineage section and operator token meter - #1188
Merged
Conversation
Bring the sidebar in line with the TUI: a collapsible lineage tree for the selected session (fork/subagent graph, subagents collapsed by default) and an ambient operator panel with the fleet token meter (seeded from usage.token_history, fed by live Cost events) plus a rain mode toggle.
Token meter columns use monospaced cell width (one 1-minute bar per cell, right-aligned) instead of 1px hairs, and the empty state no longer shows under a visible canvas. Lineage renders the TUI boxed-lane diagram by default (boxes, vertical lanes, fork/merge arrows, turn-info segments) with a compact rails mode toggle, matching the TUI full/compact switch.
Replace the ASCII boxed-lane canvas with a real HTML/CSS graph: session cards, status chips, fork/subagent badges, and CSS rails/connectors. Compact mode densifies the same structure instead of drawing character rails. Drive rain at 60fps with faster fall speed, a bright head, near-head highlight, and a darkening alpha tail — instead of a 1Hz repaint with uniform glyphs.
Move the drag strips above the section headers so they sit on the top border of each title bar, matching the TUI, instead of under the header between title and body.
A broken quote in the symbol set string made the browser parse an assignment (`":·" = *+<>...`), which threw Invalid left-hand side in assignment and blocked the whole web UI script from loading.
Session cards keep title and harness only. Volume and elapsed (`12.4k tok · 8m12s`) render as a separate lane segment under each card — a distinct graph node with •/✓/✗, matching the TUI turn-info placement outside the boxed session.
Draw a vertical lane under each session card so the turn-info segment sits on a continuous │-style line instead of floating disconnected below the box.
Match render_lineage_row / segment conventions: - Status glyph alone carries state color; name is recessed unless selected/hovered - Selection fills the box; hover brightens the border only and demotes another session's selection - Turn-info sits on the lane as plain text with • / live spinner / ✓ / ✗ (outcome uses ok/warn, not a chip) - Branch edges use ⑂ / ▸ / ↺ glyphs on the stub instead of colored pills - Box label is `title (harness)`; discarded names strike through - Subagent toggle is a muted disclosure; +N more is muted italic - Shared spinner keeps lineage status + live bullets in phase with the list
Audit pass against TUI lineage semantics: - Isolate hover to the leaf-most node so parents don't light up when a child is hovered; demote selection the same way - Mid-timeline segment mark stays • when idle (only spins while working) - Preserve scroll position and skip full rebuild when structure is unchanged - Clicking the lane segment (or node) selects the session, not only the card - Flush lane under the card; align child rails; edge glyphs only hot on the active branch; discarded strikes the name only
- Brighten only the branch into a selected/hovered child, not the whole path - Stop the child-stack rail at the last connector instead of hanging past it - Live-refresh segment duration/outcome without rebuilding the DOM - Scroll the selected box into view; preserve scroll across rebuilds - aria-level / aria-expanded; drop unused focusId and dead tally helpers - Respect prefers-reduced-motion on lineage transitions
Lineage is event time top-to-bottom. Subagent/fork nodes are spawn events and must appear under the session box before the parent's turn-info (tok · duration), which closes a later window on that lane. Use a continuous parent spine through children then the segment.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
usage.token_history, fed by every session's liveCostevents, rates from model-backedbusy_ms), with a rain mode toggle; collapse/height/mode persist.specs/0186-webui-lineage-and-token-meter.md.This PR only touches
crates/daemon/assets/index.html(embedded web UI) and the new spec — relevant binary isconstruct(daemon serves the assets).Test plan
CONSTRUCT_ASSETS_DIR=…/crates/daemon/assets).