feat(sessions): redesign the session list rows

[michellemxm]

Problem

The middle scrollable session list in the sessions panel had drifted from the current design (Figma node 3209:1006). Status was scattered — a running dot before the secondary line, an unread dot pinned to the row's far right, six other status glyphs each rendered inline before their own subtitle — so a row had no single place to look for "what is this session doing". Session context was absent from the row's meta line, tags rendered as bordered chips below the title, and the left colour bar floated 5px inside the row rather than marking its edge.

Why it matters

The session list is the primary navigation surface of the dashboard; a designer scanning 40+ rows needs one predictable spot per signal. Scattered status markers and duplicated context (folder chip + tag chip both spelling the project name) add visual noise that slows the scan, and a colour bar that doesn't touch the row edge reads as decoration rather than identity.

Fix (symptoms → root cause → change)

The row had accreted markers in whatever spot each feature landed in. The redesign gives each concern one home:

• Meta line now reads agent · tag · tag … timestamp [pin]. The session's tags render as tinted plain text (each in its own tag colour, no border) after the agent name; the pin moved to the right of the timestamp. Tags are the context the row needs — the auto-tagger already labels each session with its project — so no separate repo-name derivation is added.
• Status gutter: all 8 status indicators (pending-approval, sub-agent awaiting approval, unanswered question, goal loop, workflow running, sub-agents running, running, unread) consolidated into one reserved-width gutter left of the headline, so every row's meta/headline/secondary/chip content shares one left edge. Running renders a Loader2 spinner (was a pulsing dot); the unread "your turn" dot moved into the gutter and now sits last in precedence (it yields to any more specific state). Distinct glyphs replace the former bare dots: Goal (loop), ShieldCheck (needs approval), MessageCircleQuestionMark (needs your answer).
• Colour bar sits flush against the row's left edge (left:0) with length = row height − 2 × corner radius, expressed as a var(--radius-md) vertical inset so it tracks the theme's radius instead of a hardcoded pixel. Applied identically to the solid and gradient colour modes.
• Spacing: session rows tightened to px-3 / gap-1.5; the row divider is inset to the content x (ml-[30px]) so it underlines the text block rather than boxing the whole row; folder rows use symmetric px-2.5 (the inline 16px left-pad override removed); the nested connector line indents ml-2.
• The separate bordered tag-chip row is removed — every tag now lives in the meta line, printed exactly once.

Tests

• ChatSidebar.metaLine.test.tsx (new) — pins all-tags-inline rendering, tag order, tinted-no-border, the dangling-dot guard, pin-last ordering, and no-separate-chip-row.
• ChatSidebar.statusGutter.test.tsx (new) — pins one glyph per row, the subtitle-chain precedence (owed decision > working signal), the spinner-not-dot for running, the unread dot in the gutter, reserved width when idle, the accessible name, and each distinct glyph (ShieldCheck / MessageCircleQuestionMark / Goal).
• sessionColorBar.test.ts (new) — a rule-text drift guard over index.css: flush-left, radius-derived inset, pill radius, both colour-mode selectors agree.
• ChatSidebar.folderAlignment.test.tsx — updated to the new folder-header geometry (px-2.5 pad, no inline override) with token-exact class assertions (substring matching would pass vacuously on a fractional Tailwind step).
• ChatSidebar.flatView.test.tsx, ChatSidebar.listTags.test.tsx — updated: the flat-view folder annotation and the list-view tag pills are gone; tags render in the meta line.

Manual verification

Verified each increment against a loopback preview that serves the real built bundle with fixtures (meta line, status gutter, colour bar, spacing, folder rows) and read every frame. Screenshots below are from that preview. All local gates green on the final commit: tsc -b, eslint (0 errors), I18N_BASE_REF=origin/main npm run i18n:check, brand gate, and 676 sidebar/chat/colour-bar tests.

Screenshots

Tag run ellipsizes at a narrow sidebar width

Deliberately traded / not included

• Folder-header alignment guides (the #1211 regression guards) no longer hold: the status gutter shifts a session row's content 12px right, so the folder glyph/name no longer land on sibling/child session text. This was a measured guide; it is abandoned on purpose and ChatSidebar.folderAlignment.test.tsx now pins the folder row's own proportions instead. The folder row reads as a header over its sessions rather than a peer.
• Flat-view location context for untagged sessions: removing the folder chip means an untagged session in flat view shows no on-row location. Open question for the maintainer (see review replies) — whether to show the folder name as a fallback when a session has no tags.

no linked issue: iterative design-driven redesign, no tracked issue.

[github-actions]

Design Review (Fable 5) — 🟡 CONCERNS

Advisory design-level review of 9c2403ee4ba8fd1e82c8983ca01f3c94234f82bc — updated in place on each push; does not block merge.

Design-Verdict: CONCERNS

Sound consolidation, but row context now hangs entirely on the auto-tagger, and the unread signal's new ranking contradicts the PR's own precedence principle.

Watch

• Removing the folder chip makes tags the only on-row location cue: an untagged session in flat view (auto-tagger off, failed, or pre-existing sessions) shows nothing, on what the description calls "the primary navigation surface". The PR itself leaves this as an "open question for the maintainer" — decide it before merge, not after, since the fallback also means re-adding the in_folder key just deleted from 13 locale files.
• The gutter's own comment states "an owed decision outranks every 'working' signal, because a decision rendered as work in progress is how an owed approval goes unnoticed" — yet unread ("agent finished, your turn"), which is also an owed action, now "sits LAST" and is masked by a workflow or sub-agent glyph. A parent turn awaiting the user behind a long-running workflow shows only a spinner, reproducing exactly the failure mode the comment warns about. Worth an explicit call on whether unread should outrank the passive working states.

Suggestions

• If the folder-name fallback lands, render it in the meta line's tag slot only when tags.length === 0, rather than resurrecting the trailing chip — keeps the one-home-per-concern design intact.

[DESIGN-REVIEWED] 9c2403e

[github-actions]

GPT 5.6 Review — ✅ no blocking findings

GPT 5.6 completed its review of 9c2403ee4ba8fd1e82c8983ca01f3c94234f82bc and found no blocking issues.

This comment is updated in place on each push.

Review details

No findings.
[GPT-REVIEWED] 9c2403e

False positive or not applicable? A repository writer can comment:
/ai-review override gpt 9c2403ee4ba8fd1e82c8983ca01f3c94234f82bc: <one-sentence reason>

[github-actions]

UX Review (Fable 5) — 🟡 CONCERNS

Advisory UX-level review of 9c2403ee4ba8fd1e82c8983ca01f3c94234f82bc — updated in place on each push; does not block merge.

UX-Verdict: CONCERNS

The redesign's flagship signal — tags as row context — ellipsizes to nothing at the demonstrated width, and the status gutter's own tooltip can never appear.

Watch

• Tags are illegible at the shipped width. The timestamp and pin are shrink-0 while the tag run is the only truncating node, so in 01-session-list.png most rows read default · …, · Pla…, · Kir… — the context the PR exists to add carries near-zero information on every scan (high frequency, every row, persistent). Smallest fix: compact the timestamp (time-only when "Yesterday") or guarantee the tag run a minimum width before ellipsis.
• The gutter tooltip is dead. The gutter div carries title={status.label} but also pointer-events-none, which blocks hover — the title never shows. Every glyph except unread has a secondary-line text label, so the unread dot ("agent finished — your turn") becomes the one state with no discoverable meaning for mouse users; the old right-edge dot's title worked. Fix: drop pointer-events-none or hoist the title to a hoverable wrapper.
• Untagged sessions in flat view lose all location context (folder chip removed, in_folder key deleted); the only recovery is the context menu. The author's own open question — resolve it before merge with the proposed folder-name fallback when resolvedSlotTags is empty.
• Arbitrary per-tag colors now render as bare 11px text (style={{ color: t.color }}); the removed chip's tinted background buffered contrast. A light tag color on the light theme may be unreadable — only dark screenshots were provided.

Suggestions

• Swap ShieldCheck for ShieldAlert/ShieldQuestion on the needs-approval gutter state — a check inside a shield reads "verified/approved", the opposite of awaiting approval.

[UX-REVIEWED] 9c2403e

[github-actions]

Opus 4.8 Review — ✅ no blocking findings

Reviewed 9c2403ee4ba8fd1e82c8983ca01f3c94234f82bc — this comment is updated in place on each push.

Review details

All variables are defined before use, the removed in_folder key is gone consistently across all locales with no remaining references, and the status-object precedence matches the subtitle chain. This is a presentation-only change with no reachable defect. The candidate list correctly found nothing, and my independent pass confirms it.

No findings.

[OPUS-REVIEWED] 9c2403e

Verdict parsed from the review's SHA-scoped output markers for commit 9c2403ee4ba8fd1e82c8983ca01f3c94234f82bc.

False positive or not applicable? A repository writer can comment:
/ai-review override fable 9c2403ee4ba8fd1e82c8983ca01f3c94234f82bc: <one-sentence reason>

[github-actions]

First Principles Review (Fable 5) — 🟡 CONCERNS

Advisory premise-level review of 9c2403ee4ba8fd1e82c8983ca01f3c94234f82bc — why this exists and whether the shipped surface is the smallest honest version. Updated in place on each push; does not block merge.

Evidence gathered: I read the contract, the intent file, the full patch, the surrounding ChatSidebar.tsx (both the new gutter chain and the untouched subtitle chain), the CSS token definitions, and grepped for existing mechanisms (in_folder consumers, --radius-md definers, existing CSS rule-text tests, inferLane). Final review follows.

First-Principles-Verdict: CONCERNS

The gutter re-spells the subtitle chain's seven-branch precedence a second time — the exact drift the comment claims it prevents.

What this change ships

Intent: give every session-row signal one predictable home so a user scanning many rows finds status, context, and identity in fixed spots — an ADDITION (design-driven redesign), and the diff matches the stated job.

1. All tags render as tinted text in the meta line after the agent name — justified
2. The separate bordered tag-chip row is deleted — justified (deletion, prints each tag once)
3. Eight scattered status markers consolidate into one gutter glyph per row — justified
4. Running shows a spinner instead of a pulsing dot — justified relabel, declared
5. Unread dot moved into the gutter and now yields to workflow/sub-agent states — declared changed default
6. Approval/question/loop get distinct glyphs instead of bare dots — justified
7. Pin moved after the timestamp — declared move, mechanical harm named (pin pushed the agent-name column)
8. Colour bar flush-left, ends tracking the theme radius token — justified (2 definers of --radius-md counted, both themed)
9. Flat view no longer names a session's folder; in_folder deleted from 12 locales — declared removal, trade-off left open
10. Row/folder/divider spacing tightened; the feat: redesign sidebar folders and de-clutter the sessions sidebar #1211 alignment guides abandoned on purpose — declared

Watch

• The status chain (ChatSidebar.tsx:2515) duplicates the subtitle chain's predicates (ChatSidebar.tsx:2796–2862): I counted 7 branch conditions and 6 label expressions spelled twice, in an order only a comment and tests hold in sync. The comment claims "glyph and secondary line can never disagree" — they can, by editing one chain. The subtraction: compute glyph and subtitle from the one resolved status, deleting the second predicate chain.
• Item 9 ships the removal while the fallback for untagged flat-view sessions is "open question for the maintainer" — the one user-felt regression rides on a decision not yet made; keeping the chip only in flat view for untagged sessions was the smaller cut.

Subtractions

• Fold the seven subtitle-branch predicates into the chain that already builds status (ChatSidebar.tsx:2515) — one resolved value, two renderings; delete the parallel chain at ChatSidebar.tsx:2796–2862.

[FIRST-PRINCIPLES-REVIEWED] 9c2403e

[michellemxm]

Dispositions for the advisory reviews (Design 🟡 / UX 🟡 / First Principles 🟡) as of 35ad90bacc6e0b77b863ac08f2e8f185e1869a47:

Fixed

• Tag run clipped mid-word with no ellipsis (UX): the meta-line tag group was inline-flex, across whose children text-overflow: ellipsis does not render — hence "KiroC" / "kc-them". Changed to a plain inline block (truncate) with inline <span> children, so a multi-tag run ellipsizes as one line while each tag keeps its own colour. Verified at a 210px sidebar: it now reads agent · … rather than a clipped fragment.
• Stale colour-bar screenshot (UX): the previous 02-colour-bar.png predated this redesign (it showed the removed folder chip and a hover popup occluding text). Recaptured at HEAD; replaced with 02-tags-truncate.png (the narrow-width ellipsis proof) and refreshed 01-session-list.png.
• Dead capture harness + abandoned-design comments (First Principles): deleted website/scripts/capture-session-meta-line.mjs (zero referrers, probed an agent · repo-name design that never shipped); removed the "names the session's REPO" phrasing from the derivation comment and the "identity tag wins the meta slot / status tag stays a chip / prefer-non-status" notes from ChatSidebar.metaLine.test.tsx and the "repo name carries that slot" title in ChatSidebar.flatView.test.tsx. Recorded rationale now matches shipped behaviour (all tags render inline; no chip row).

Accepted / documented

• Undeclared folder-alignment-guide trade (First Principles): added a "Deliberately traded / not included" section to the PR body — the #1211 guides are abandoned on purpose because the status gutter shifts content 12px, and the test now pins the folder row's own proportions.

Needs a decision (maintainer) — not silently changed

• Flat-view loses location context for untagged sessions (Design + UX + First Principles, independently): removing the folder chip means an untagged session in flat view shows only agent + timestamp. The chip removal was an explicit product request, and the suggested fallback — show the folder name in the meta slot only when a session has no tags, in flat view — is a product call, not a code fix. Flagged to the maintainer; leaving the code as requested until they rule. (In practice most sessions carry the project auto-tag, so the gap is narrow, but it is real for genuinely untagged sessions.)

Rebutted / declined (advisory suggestions)

• Divider ml-[30px] hand-summed constant (Design suggestion): acknowledged — it is px-3 + w-3 + gap-1.5. Left inline for now: it is one call site, no test drift-guards it today, and extracting a shared token for a single consumer trades one clarity for another. Reasonable future hardening, out of scope here.
• Clamp tag text colour to a minimum contrast (UX suggestion): the tinted-plain-text treatment (no chip background) was the explicit design direction; a contrast clamp changes the requested visual and is a separate enhancement. Deferred to the maintainer's call alongside the tinting decision.

[michellemxm]

Dispositions for the advisory reviews as of 9c2403ee4ba8fd1e82c8983ca01f3c94234f82bc (rebased onto main; absorbed the stalled-goal-loop feature into the status gutter):

Fixed

• Agent name capped at max-w-[50%] even on untagged rows (First Principles, undeclared regression): the cap exists to stop a long agent name crushing the tag run — but an untagged row has no tags to protect, so the cap only truncated the agent name for no reason. Now applied only when resolvedSlotTags.length > 0; untagged rows use the full line.
• Stalled goal loop × gutter (rebase integration): main's goalLoopStalled feature landed while this branch was open. Integrated it into the redesign — the gutter Goal glyph is static/warn when stalled and pulsing/accent when live (pulse still means "work is happening"), and the subtitle keeps main's "— interrupted" label. Updated ChatSidebar.goalLoop.test.tsx to assert the pulse on the gutter glyph (its new home) rather than the removed inline dot.

Accepted / deferred (out of scope for this PR)

• Two precedence chains maintained twice (Design + First Principles): the gutter status ternary and the subtitle chain share the same 7-branch order, derived independently. A single ordered state-resolver feeding both would remove the drift risk. It's a real maintainability improvement but a structural refactor touching both chains — deferring to a follow-up rather than widening this PR late; filing an issue.

Needs a decision (maintainer) — explicitly your calls, not silently changed

• Tag run legibility at default width (UX): even with the ellipsis fix (no more mid-word clip), at the default sidebar width the agent name + timestamp leave the tag run little room, so it can collapse toward ·…. The all-tags-inline-tinted treatment was your explicit design direction; the reviewer's alternative (first tag shrink-0 + a +N overflow, render nothing when nothing fits) is a different design. Your call whether to keep all-inline or move to first-tag-+N.
• ShieldCheck vs ShieldAlert for needs-approval (UX): a checked shield can read as "already approved". You picked ShieldCheck explicitly; leaving it. Say the word and I'll swap to ShieldAlert.
• unread demoted below workflow/sub-agent activity (Design): a background workflow can run for hours after the turn ends, hiding the "your turn" dot while you're away. This was a deliberate precedence choice (pinned in tests). Reviewer suggests ranking unread above the working signals but below owed decisions. Your call.
• Flat-view location context for untagged sessions (all three, re-raised): still the open question from the prior round — show the folder name as a fallback only when a session has no tags, in flat view. Left as-is pending your ruling.

None of these block: the PR is green and mergeable; every item above is advisory.