feat: redesign sidebar folders and de-clutter the sessions sidebar

[krishdhasmana]

Problem

The sessions sidebar had accumulated clutter and the folder rows looked flat:

• Two redundant affordances — a standalone "New chat in folder" row inside every open folder (duplicating the folder header's hover + button) and inline "Show all older sessions" buttons (duplicating the Older Sessions footer).
• Folder glyphs were 14px lucide outlines with an emoji overlaid only in the closed state — the user's picked icon vanished the moment a folder was opened, and emoji badges clashed with themes and rendered muddy at small sizes.

Why it matters

The sidebar is the highest-traffic surface in the dashboard. Redundant rows push real sessions below the fold, and folders that lose their identity marker when open make scanning a folder-heavy sidebar slower. Emoji badges also broke theme cohesion (the rest of the app is lucide-based, per the repo's own icon convention).

Fix (symptoms → root cause → change)

Redundant rows — straight removals: the inline new-chat row (list + board view) and both inline "Show all older sessions" buttons, plus their orphaned i18n keys across all 11 catalogs.

Folder colors replace icons — a folder's identity mark is a user-picked palette color (12 hues, shared with the Artifacts page folder palette). The glyph renders lucide Folder/FolderOpen tinted by that color: stroke pulled toward text-strong via color-mix so linework keeps rail-icon contrast on every theme, and the closed body washed with the color over the theme surface. The open shape stays stroke-only — FolderOpen's flap overlaps its body, so any fill would paint the overlap as a solid slab. Uncolored folders read as plain muted rail icons. The color-mix templates live in a name-excluded plumbing module (folderColorPaint.ts, same boundary idiom as *.prompt.ts) so FolderGlyph.tsx stays fully covered by the i18n literal gate.

The folder settings modal shows a compact always-visible swatch row (leading "no color" cell clears back to default) plus a live preview: the real sidebar FolderGlyph, tinted from the draft as swatches are clicked, with a click-to-toggle open/closed state. Backend: color accepted on create and PATCH with an allowlist (empty string clears; invalid values 400 with a machine-readable color_invalid code).

Folder icon system removed — with color as the identity mark, chat folders no longer carry an icon at all. The emoji badge pipeline is gone end to end: no icon field on create or PATCH, no LLM icon generation anywhere in the chat-folder lifecycle, and no boot-time migration. Stale icon values in existing folders.json files are simply ignored. Artifact-library folders are a separate system and keep their emoji icons and shared generator, untouched.

Tests

• Backend: create/PATCH color coverage (allowlisted value persists, invalid rejected with color_invalid, empty string clears), create accepts default_agent, corrupt-folders.json boot tolerance, and the retained artifact-path emoji generator suite (redaction, single-grapheme validation). flake8/mypy clean.
• Frontend: FolderConfigModal suite covers palette pick, no-color clear via the leading swatch, preview toggle leaving the draft untouched, the color-only dismiss guard, and the touched-fields PATCH semantics. Sidebar/folder suites green, plus the i18n gate suites (unitLiterals, contextSidecar, deadKeys) and i18n:check against base.

Manual verification

Verified live against an isolated pod built from this branch: colored folders render distinct hues (light theme included), open/close swaps Folder/FolderOpen cleanly with the wash dropping on open, swatch pick and no-color clear reflect instantly in the modal's live preview, and uncolored folders match the rail-icon weight.

Screenshots

Before

Screen.Recording.2026-08-02.at.12.38.10.PM.mov

After

Screen.Recording.2026-08-05.at.12.52.36.AM.mov

[github-actions]

Design Review (Fable 5) — 🟡 CONCERNS

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

Design-Verdict: CONCERNS

Sound redesign, but the changed folder API contract ships without its spec update, and the color allowlist now lives in three hand-synced copies.

Watch

• Spec/code divergence on a documented API. The PR removes icon, regenerate_icon, and LLM icon generation from /api/chat/folders and adds color, but zero docs changed: docs/system-specs/modules/learn-cron-dashboard.md:607 still documents "background LLM emoji-icon generation" and PATCH icon. AGENTS.md requires the spec update in the same commit; next agent reading the spec will code against a removed contract.
• Palette allowlist duplicated three ways with only comments as glue. Backend _FOLDER_COLOR_PALETTE (12 hex), frontend FOLDER_COLOR_PALETTE (12), and ArtifactsPage.tsx:404 FOLDER_COLORS (8) must agree; no test pins them, and the backend's KEEP-IN-SYNC comment already points at a nonexistent file (folderIconCatalog.tsx vs the actual folderColorCatalog.tsx). Drift means the modal offers a swatch the backend 400s.

Suggestions

• Consider validating/storing a color name (e.g. "teal") instead of raw hex: the backend stops owning presentation values, and a future palette retune re-tints existing folders instead of stranding stale hexes in folders.json.
• generate_emoji_for_name now serves only the artifact library; moving it out of chat_folders.py would restore the ownership boundary rather than leaving artifact plumbing in a chat module.

[DESIGN-REVIEWED] 62aef41

[github-actions]

GPT 5.6 Review — ✅ no blocking findings

GPT 5.6 completed its review of 62aef41a2a3e4d592a5e19291ccb32e6bad3f90f and found no blocking issues.

This comment is updated in place on each push.

Review details

FINDING -- website/src/pages/ChatSidebar.tsx:1943 -- expanded empty folders still render the added "Empty-folder affordance" in board and list views, contradicting the promised removal of standalone New chat rows -> Fix: remove both empty-folder button branches.
[GPT-REVIEWED] 62aef41

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

[github-actions]

Arbiter — ✅ no blocking findings

Arbiter found no unresolved long-term items that require action before merging 9fdf251595f52d4edff800d57d3c7b8cf033da6c.

Second-order review for 9fdf251595f52d4edff800d57d3c7b8cf033da6c; this comment is updated in place on each push.

Review details

I've reviewed both files. Assessing each sub-threshold finding against the two blocking tests (one-way door, concrete harm):

• GPT 5.6's Lucide-rule finding is marked BLOCKING in its own lane, so it gates on its own and is out of my scope; on merits it is a style/convention item anyway.
• Lossy emoji→lucide migration (Design + UX): the closest call. It does permanently discard a user-picked emoji once folders.json is rewritten. But it is a deliberate, documented product migration of a single cosmetic badge on a local single-user file — not a data-correctness bug — and the diff itself proves the reverse path is cheap (a boot migration is exactly the mechanism a future change would reuse). The design reviewer's own framing ("cosmetic and single-user, so acceptable") matches. Doesn't clear the bar.
• LLM-availability dependence, triple-allowlist drift, spec-not-updated, modal/sidebar inconsistency, aria-label nit: all degraded-UX, maintainability, or docs items — reversible in a later change, no crash/hang/leak, no locked-in contract.

Arbiter-Verdict: PASS

No sub-threshold finding meets the long-term-impact bar.

Suggested follow-ups (open as issues — non-blocking)

• Render legacy emoji statically until migration succeeds — Design ("Migration is hostage to LLM availability") + UX ("Silent loss of user customization"): an offline or LLM-failing install shows folder badges vanished indefinitely with no explanation, and FolderConfigModal still shows the raw emoji the sidebar hides. Safe to wait: cosmetic, self-heals on any successful boot, and the fix (a static non-shearing badge branch in FolderGlyph plus dropping the modal's raw-emoji branch) is a small isolated frontend change in ChatSidebar.tsx / FolderConfigModal.tsx.
• Add a drift check for the triple icon allowlist — Design: _FOLDER_LUCIDE_NAMES (backend), FOLDER_LUCIDE_ICONS, and FOLDER_ICON_LABELS (frontend) are synced only by "KEEP IN SYNC" comments; divergence 400s a picker choice or renders no badge. Safe to wait: any drift is immediately visible and reversible. Fix: a vitest snapshotting the backend set (or generate both from one JSON), in website/src/test/.
• Update the module spec in a follow-up commit — Design: docs/system-specs/modules/learn-cron-dashboard.md still describes chat-folder icon generation as emoji-based, and the new icon_invalid error code / lucide: contract is undocumented, violating the same-commit spec rule in AGENTS.md. Safe to wait: docs-only, no runtime effect.
• Consider a deterministic name-match tier before the LLM guess for free-input emoji — Design suggestion: shrinks both the lossy migration path and boot-time LLM spend in chat_folders.py. Pure optimization of an already-working path.
• Use pages.chatSidebar.new_chat_in_name for the remaining hardcoded aria-label — UX suggestion at ChatSidebar.tsx:1972: the key exists and is used on the two sibling buttons; a one-line i18n cleanup that the i18n gate should surface regardless.

[ARBITER-REVIEWED] 9fdf251

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

For a broader accepted-risk deferral, apply defer-longterm and explain why.

[github-actions]

UX Review (Fable 5) — 🟡 CONCERNS

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

UX-Verdict: CONCERNS

Existing users' hand-picked folder emojis silently vanish on upgrade with no notice and no way back — otherwise a clean, real de-clutter.

Watch

• Silent loss of user customization: stale icon values in folders.json are "simply ignored" and the emoji picker is removed, so a user who curated 🐛/🚀 folder marks opens the sidebar post-upgrade to uniform gray folders — no message, no auto-mapping to a color, no restore path. One-time per upgrading user, but it destroys deliberate personalization and the replacement (color) starts unset, so every folder looks identical until manually recolored. Smallest fix: a one-time hint ("Folder icons were replaced by colors — pick one in Folder settings") or seed a palette color from the folder's hue/hash on first load.
• The lone committed screenshot (folders-lucide-wash.png) shows only open, empty folders, so the PR's headline visual — the closed-state color wash — is not evidenced in the still image, and the crop clips the "+ New" button and the "Research" row. Re-shoot with at least one closed colored folder.

Suggestions

• Empty-folder row: use the existing new_chat_in_name key ("New chat in {{name}}") for the visible label, not just aria-label — the generic "New chat in folder" under a folder header is weaker than the string you already localized.
• Modal preview button reads as an icon picker (bordered tile in the old icon button's slot, hover-accent); its only cue that it toggles open/closed is a hover tooltip. A tiny caption ("Preview — click to open/close") under the tile makes it self-evident.

[UX-REVIEWED] 62aef41

[github-actions]

Opus 5 Review — ✅ no blocking findings

Reviewed 62aef41a2a3e4d592a5e19291ccb32e6bad3f90f — this comment is updated in place on each push.

Review details

No findings.

[OPUS-REVIEWED] 62aef41

Verdict parsed from the review's SHA-scoped output markers for commit 62aef41a2a3e4d592a5e19291ccb32e6bad3f90f.

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

[krishdhasmana]

Dispositions for findings on f16fcf0 (superseded by 6abdc7b):

• Inline SVG / use-lucide-icons (GPT test: validate CI workflows on KiroCrew #1, Opus test: validate CI workflows on KiroCrew #1, Automated Rule Check) — fixed: the back panel no longer renders any <svg> element; the silhouette is painted via CSS mask-image data-URI layers on plain spans (fill + inside-clipped stroke), same primitive family as the front panel's bordered rect. Icons remain lucide-only; the diff adds no line matching the blocking regex.
• Migration overwrites concurrent icon choices (GPT refactor: rename project KiroClaw to KiroCrew #2) — fixed: _generate_folder_icon snapshots the icon before awaiting generation and skips the write if it changed (user pick/clear wins). Regression test: test_concurrent_user_choice_not_overwritten.
• Design/UX advisory (emoji intent discarded) — fixed beyond the ask: boot migration now maps the 30 retired curated emojis deterministically to lucide equivalents (offline, no LLM), falling back to the constrained LLM generator only for free-input emoji. Tests: test_two_tier_migration, test_emoji_map_targets_are_allowlisted.
• i18n gate (Frontend Lint) — fixed: new picker/empty-state strings routed through i18nT with catalog keys in all locales.
• Empty-folder dead end (UX advisory) — fixed: an expanded empty folder now shows a "New chat in folder" row (list + board view).

[krishdhasmana]

Dispositions for findings on 6abdc7b (superseded by e10cfc7):

• refactor: rename project KiroClaw to KiroCrew #2 Corrupt folder data crashes gateway startup — fixed, and a good catch: load_folders() does no shape-filtering by design, so a scalar entry in a corrupt folders.json would have AttributeError-ed the synchronous boot migration. migrate_emoji_folder_icons now skips non-dict entries (same tolerance as state.folder_breadcrumb). Regression test: test_corrupt_non_dict_entries_skipped.
• test: validate CI workflows on KiroCrew #1 Custom path violates lucide-only rule — rebutted: the folder glyph's back panel is a container shape painted via CSS mask layers, not an icon rendered outside the icon system — the same primitive family as the front panel's bordered rounded rect, which no reading of use-lucide-icons forbids. The rule's own deterministic gate (Automated Rule Check check-added regex) passes on this diff. Badges/icons throughout the change ARE lucide (folderIconCatalog.tsx). This composite glyph is a deliberate product design decision (badge-carrying front panel + duo-tilt open state) that the stock Folder/FolderOpen cannot express — reverting to them would remove the shipped feature.
• refactor: remove dead legacy compatibility shims #3 Empty-folder "New chat" rows retained — rebutted: intentional product behavior, not a leftover. The redundant always-present inline row was removed; the row now renders ONLY when an expanded folder is empty, where it is the sole visible affordance (this also resolves the prior UX-review CONCERN about empty folders being a dead end).

[krishdhasmana]

Dispositions for findings on 3b41f94 (superseded by rebase):

• Migration blocking persistence — rebutted (standing disposition): one synchronous write of a few-KB folders.json, once at boot, batched across all mapped folders, adjacent to the pre-existing synchronous load_folders()/load_tags() reads in the same startup sequence and consistent with the module-wide persistence pattern. A module-wide async refactor is out of scope.
• CSS-mask glyph vs lucide-only rule — rebutted (standing disposition): the folder glyph is a container shape painted via CSS mask layers, not an icon rendered outside the icon system; the rule's own deterministic gate passes on this diff, and the composite glyph (duo-tilt, color identity) is a deliberate product decision stock Folder/FolderOpen cannot express.
• Empty-folder new-chat row — rebutted (standing disposition): intentional product behavior — the row renders ONLY when an expanded folder is empty, where it is the sole visible affordance; this resolved the UX review's own empty-folder dead-end concern.

[krishdhasmana]

Dispositions for findings on c830e80 (superseded by 342afd8):

• Color-only drafts bypass accidental-dismiss protection — fixed, good catch: the dismiss-guard dirty check predated the color field and never learned it, so a draft whose only change was a swatch pick was silently discarded by Escape/backdrop. Added the color comparison to the touched computation; regression test a color-only pick also arms the dismiss guard.
• Hand-rolled glyph vs lucide-only rule — rebutted (standing disposition): container shape painted via CSS mask layers, not an icon rendered outside the icon system; the rule's own deterministic gate passes on this diff; deliberate product design the stock glyphs cannot express (duo-tilt + color identity).

[krishdhasmana]

Dispositions for findings on 342afd8 (superseded by 110de64):

• Malformed folder storage crashes gateway startup — fixed: load_folders assigns whatever JSON parses, so a folders.json holding a bare null made state._folders None and the migration TypeError-ed at boot. The migration now tolerates a non-list _folders (same corrupt-data class as the earlier scalar-entry guard); regression added to test_corrupt_non_dict_entries_skipped.
• Custom folder glyph vs lucide-only rule — rebutted (standing disposition): container shape painted via CSS mask layers, not an icon rendered outside the icon system; the rule's own deterministic gate passes; deliberate product design the stock glyphs cannot express.
• Empty-folder new-chat row (finding) — rebutted (standing disposition): intentional — the row renders ONLY when an expanded folder is empty, where it is the sole visible affordance.

[krishdhasmana]

Dispositions for findings raised on 110de64 (current head e63cdcd):

• UX: dead icon system (migration writes lucide values nothing renders, 47-label catalog + 11-locale translation burden, silent loss of emoji badges): FIXED by removal. The folder icon system is torn out end to end: no icon field on create/PATCH, no LLM generation, no boot migration, catalog and its i18n labels deleted. Colors are the folder identity mark. Artifact-library folders keep their separate emoji system.
• UX: folder_preview tooltip read as opening the folder itself: FIXED, copy is now "Preview open/closed state" in all 10 catalogs.
• UX: modal glyph button changed meaning (was icon picker, now preview toggle): ACCEPTED as designed; the icon picker no longer exists, and the preview is labeled and aria-pressed.
• Opus: hand-rolled glyph vs use-lucide-icons: REBUTTED, standing disposition unchanged (container shape via CSS masks in the name-excluded plumbing module; deterministic rule gate passes; writer override available).
• deadKeys CI failure (orphaned folderConfigModal.icon): FIXED by the prune.

[bolichen97]

Open PR relationship audit

This is a consolidated, point-in-time code-level audit note. It compares complete merge-base diffs and current/merged code; it does not treat a shared topic as duplication or partial coverage as completion.

Relationship findings

• PR #7353 is OVERLAPPING relative to this PR. The goals differ or the implementations can complement each other; this is not a duplicate claim. Recommended action for PR #7353: MERGE_DISCUSSION. PR #1211 removed this exact feature on purpose and PR #7353 restores it; the disposition is a maintainer product call on which stance stands, not a code question. The PR itself has reached that point: the author's 2026-09-03T19:27Z comment asks @bolichen97 to decide whether to accept the AUTOSDE no-emoji-as-icons exception for FolderGlyph.tsx 'and with it the deliberate reversal of PR #1211's icon removal, as requested in Issue #6586', because the GPT review lane blocks the feature and then blocks the exception that would permit it — a deadlock no code round can clear. Files: src/kiro_crew/dashboard/chat_folders.py, website/src/components/FolderGlyph.tsx, website/src/test/FolderConfigModal.test.tsx.

No PR, Issue, label, branch, or review state was changed by the relationship-note portion of this audit.