fix(sidebar): restore the folder row's two left alignment guides

[CrysisDeu]

Problem

In the sessions sidebar, a folder row no longer lines up with the session rows around it. Measured in a real browser on main:

Guide	main	should be
root folder glyph left edge vs root-lane session text	254 vs 261 — 7px off	equal
root folder name vs the text of sessions INSIDE it	278 vs 280 — 2px off	equal
depth-1 folder glyph vs its sibling sessions' text	273 vs 280 — 7px off	equal
depth-1 folder name vs depth-2 session text	297 vs 299 — 2px off	equal

The break repeats at every nesting depth, so the deeper the tree the more visibly the folder column drifts out of the session column.

Separately, the folder-settings modal still renders a clickable folder glyph preview — a control for an icon that no longer exists. #1211 deleted the folder icon/emoji system; a folder's identity mark is now a palette color, which the swatch row directly below the preview already shows.

Why it matters

The sidebar's left edge is its only structural guide — it is how you read the tree at a glance. Two independent guides ride on it:

1. the folder glyph opens the same column as the sessions at the folder's own level, so a folder and its siblings read as peers;
2. the folder name opens the same column as the sessions inside it, so a folder's contents read as belonging to it.

With both off, every folder row is a small visual snag, and nesting compounds it. The stale modal preview is worse than cosmetic: it presents an interactive affordance whose backing feature was removed, so clicking it does nothing a user can name.

Fix (symptom → root cause → change)

Symptom. Folder rows sit left of where they used to, by 7px (glyph) and 2px (name).

Root cause. Both guides are satisfied by exactly one triple of numbers, and the code that established it said so:

// 16px left pad puts the folder GLYPH on the same x as the text of the
// session rows at the folder's OWN level (both `px-4`) ... The 5px glyph→name
// gap is chosen (not cosmetic) so glyph 14px + 5px == the 19px indent step of
// the nested body ... Both guides hold at once; changing either breaks one.
// Measured: glyph == sibling session text, name == child session text.

The arithmetic: session rows reach their text x via px-4 (16px), so the header's pad must also be 16px for guide 1. The folder body indents by ml-3 (12px) + 1px border-l + pl-1 (4px) = 19px, so glyph (14) + gap (5) must equal 19 for guide 2. #1211 changed all three at once — pad 16px→9px, glyph 14→17, gap 5px→7px — which breaks guide 1 by 7px and guide 2 by 2px, and rewrote the comment to describe a 19px glyph the code never had.

Change. Restore the triple (and the board view's 11px glyph, changed to 15 by the same PR), and restore the comment that explains why the numbers are load-bearing. Nothing else moves: renderSessionRow's px-4, the folder body's ml-3 pl-1 border-l, and the panel's own margins are untouched — the session rows are the reference, so the fix moves the folder header back onto them rather than moving them.

Result — the 19px ladder closes at every depth:

	main	this PR
root folder glyph / root-lane session text	254 / 261	261 / 261
root folder name / depth-1 session text	278 / 280	280 / 280
depth-1 glyph / depth-1 session text	273 / 280	280 / 280
depth-1 name / depth-2 session text	297 / 299	299 / 299
depth-2 glyph / depth-2 session text	292 / 299	299 / 299

Verified against the SVG's own box, not just the wrapper span: folder-collapse-f1's <svg> left, its wrapper's left, and the root-lane session text left are all 261.

Modal. Remove the preview button, its previewOpen state, and the now-unused FolderGlyph import; the name label takes the full width, matching the flex flex-col gap-1.5 shape of the Color / Project directory / Default agent fields below it. The orphaned components.folderConfigModal.folder_preview key is pruned from all 12 catalogs (one line each; no reformatting or key reordering).

Drive-by. capture-folder-modal.mjs has been broken since #1211: step 03 clicks data-testid="folder-config-icon", a testid that removal deleted, so the harness times out before writing frames 03 and 04. Repointed at the palette using the adjacent sibling (+ button) — ~ button matches all 12 swatches and would only survive on page.click's non-strict first-match.

Tests

• website/src/test/ChatSidebar.folderAlignment.test.tsx (new) — locks the three numbers (header paddingLeft: 16px, glyph width/height: 14px, gap-[5px] on the collapse toggle) and, separately, the ml-3 + border-l + pl-1 body indent and the session row's px-4 that the gap is derived from. jsdom has no layout engine, so it asserts the geometry inputs; the measured-pixel counterpart is scripts/capture-folder-glyph.mjs under MEASURE=1, and each references the other so a future editor finds both halves.
• FolderConfigModal.test.tsx — the preview-toggle test is replaced by a regression assertion that no preview control mounts, with folder-config-color-reset asserted present as a positive control so the test cannot pass vacuously on a modal that failed to render.

Gates: tsc -b clean, npm run build clean, vitest 9626 passed, lint:i18n OK (615 untranslated, baseline 1037), eslint 0 errors. Two vitest failures are pre-existing on main and unrelated: catalogParity > ja (missing 11 components.kiroPrerequisiteGate.* keys — ja.json on origin/main has no linux_sandbox_guide) and format.test.ts (Intl.DurationFormat present under Node 24). No backend files changed, so the Python gates are not exercised by this diff.

Manual verification

Screenshots below were captured by running the built dist through the repo's own gateway-free harnesses and reading the frames, plus the MEASURE=1 probe for the numbers in the tables above. capture-folder-modal.mjs was re-run after the selector change to confirm it now completes all four frames and that + button selects the first swatch (the ring lands on red, not on the "no color" cell).

Screenshots

Before / after at the same crop origin (CLIP_X=210), so the columns are directly comparable — on the left the folder glyphs hang left of the session text; on the right they sit on it.

main	this PR

Folder settings, with the icon preview gone and the name input spanning the dialog:

Realistic sidebar (colored + uncolored folders, depth 3, running session) and full-page context

Colored folders (Kiro purple, Sidebar blue, Updater amber, Design pink) and uncolored ones (Folder glyph, Infra) both land on the guides — the palette tint is applied via inline style and does not affect geometry.

Out of scope (noted, not fixed here)

• website/AUTOSDE.yaml's no-emoji-as-icons exception list still names folderEmoji.ts and the "FolderConfigModal folder icon picker", both deleted by feat: redesign sidebar folders and de-clutter the sessions sidebar #1211. The stale exception is inert (it can never fire), and editing an untouched rule file to prune it would widen this PR.
• feat: redesign sidebar folders and de-clutter the sessions sidebar #1211 also removed the standalone "New chat in folder" row from expanded folders, leaving the hover-only ⊕ on the folder header as the sole one-step entry point (invisible at rest, absent on touch). Not addressed here — this PR is geometry plus the dead modal control only.

[github-actions]

UX Review (Fable 5) — ✅ PASS

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

Both screenshots confirm the claims: glyphs land on the session-text column in the after shot, and the modal reads cleanly as Name → Color → Project directory → Default agent with no dead control. The diff is pure geometry restoration (pad 16px, glyph 14, gap 5px), removal of the non-functional preview button, and the pruned i18n key — no new strings, no flow changes, no moved controls beyond the alignment fix itself. The removed preview eliminates a click-does-nothing affordance, which is a UX improvement, and the color swatches below already carry the identity-mark job. Nothing trips any lens.

UX-Verdict: PASS

Restores the sidebar's alignment guides exactly as claimed and deletes a click-does-nothing control; screenshots verify both, no new copy or flow risk.

[UX-REVIEWED] 95267a3

[github-actions]

Opus 5 Review — ✅ no blocking findings

Reviewed 95267a3f9cd9c46caf958e3aec8f895fad8b7865 — this comment is updated in place on each push.

Review details

No findings.

[OPUS-REVIEWED] 95267a3

Verdict parsed from the review's SHA-scoped output markers for commit 95267a3f9cd9c46caf958e3aec8f895fad8b7865.

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

[github-actions]

GPT 5.6 Review — ✅ no blocking findings

GPT 5.6 completed its review of 95267a3f9cd9c46caf958e3aec8f895fad8b7865 and found no blocking issues.

This comment is updated in place on each push.

Review details

No findings.
[GPT-REVIEWED] 95267a3

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

[github-actions]

Design Review (Fable 5) — ✅ PASS

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

Design-Verdict: PASS

A measured regression, fixed at its arithmetic root cause, with the load-bearing numbers locked by a test so it cannot silently recur.

Watch

• This reverts an aesthetic feat: redesign sidebar folders and de-clutter the sessions sidebar #1211 stated as deliberate — "Finder-style: bigger icons hang left, text stays on the guide" — not just its broken arithmetic. If feat: redesign sidebar folders and de-clutter the sessions sidebar #1211's larger-glyph look was a product decision, the numbers will ping-pong; the new pinned test makes this PR win by default, so confirm the intent with a human rather than by test precedence.

Suggestions

• "Both guides are satisfied by exactly one triple" is overstated: only pad=16 and glyph+gap=19 are constrained, so glyph 17 + gap 2 also holds both guides while keeping feat: redesign sidebar folders and de-clutter the sessions sidebar #1211's larger glyph — worth stating in the comment/test why 14/5 was picked over that split (presumably gap legibility), so the constraint recorded is the real one.

[DESIGN-REVIEWED] 95267a3