Reorganize the web UI session list into a TUI-style tree

[edwin-zvs]

Problem

The TUI session list is easy to scan — aligned names, right-aligned harness labels, a clear indent ladder for project/session/subagent/fork structure. The web UI, although structurally similar, was much harder to read:

• Rows were two lines tall (harness label under the name), so the list was tall and noisy.
• Grouped members indented by only 2px (visually flat); subagents jumped a fixed 40px regardless of parent depth.
• "N archived" rows didn't line up with the rows they summarize, so it was unclear whether they belonged to the session above or to the group.
• Forks rendered as flat top-level rows with no lineage marker — unlike the TUI, which nests them under their parent per spec 0081 ("a fork renders as an indented child row under its parent … never as its own top-level row, and a parent row badges its live fork count").

before (dark)	after (dark)	after (light)

Phone viewport (390px)

Structure — orderedItems() now mirrors the TUI's list_items

• Forks nest under their fork parent, recursively, flat at one child level (a fork of a fork sits at the same indent, matching the TUI convention). The parent badges its live fork count (⑂N). A fork whose parent summary is gone falls back to a top-level row instead of disappearing.
• A parent's archived forks — any generation — fold into the same "N archived" row as its archived subagents (spec 0081), expanded to reveal each as a selectable row.
• Group headers show the active member count, like the TUI's ▾ name (n).

Presentation

• Single-line rows: fixed [disclosure][status] gutter → name → trailing markers (fork count, pin ★, needs-attention ●) → harness label right-aligned in muted small type. Names at one depth share a left edge; a long name truncates before the harness label does.
• Depth-classed indent ladder (18px/level) so a child's status glyph sits under its parent's name — the same relationship the TUI draws.
• A fork's ⑂ marker occupies the gutter cell a disclosure triangle would, so fork and subagent names align.
• Archived rows indent to the depth of the rows they reveal; smaller, fainter type keeps them out of the way.
• The needs-attention dot moves from before the name to trailing it, matching the TUI (spec 0054: "a blue dot trailing the title") and keeping the name column flush.
• Compact rows on desktop; taller touch targets on ≤720px viewports.

All row classes/datasets the delegated click handler, drag-reorder, and activity-spinner refresh rely on (.item[data-id], .disclosure.can-toggle[data-parent-id], .archived-row[data-archived-section], .group-header[data-group-id], .state[data-session-id]) are unchanged.

Testing

• cargo test --workspace: 1,591 tests across 37 binaries, all green (includes web_smoke e2e).
• Verified live against a running daemon via webui hot-reload: dark/light/matrix themes, disclosure collapse/expand (rows hide/show), archived-row toggle, fork-row selection, phone viewport.

The two pr-media commits exist only to host the screenshots above (added then removed; the pinned raw URLs stay alive via the PR ref).

🤖 Generated with Claude Code