What task are you trying to do?
When I scan the sidebar I want to tell at a glance whether each session is currently working, has a permission request waiting, errored out, or just has unread output. Today the only signal is a 6px colored dot to the left of each title — red, orange, brand-red, or a spinner — and the only way to learn which color means what is to read the source.
What do you do today?
I either click into each session to find out, or I rely on the spinner alone (the only state that is shape-differentiated rather than color-only). The four colored-dot states (working is the spinner; unseen / permission / error are all 6px filled circles distinguished only by hue) collapse into "there is a colored dot" for anyone with reduced color perception or anyone unfamiliar with the convention.
This was flagged during the #300 brainstorm as a real gap. We pulled it out of #300 because #300 is scoped to typography and this is a different problem (icon design + accessibility), but it is a real piece of engineering — same category as the right-side session summary panel redesign tracked in #154.
What would a good result look like?
Each session indicator state is shape-differentiated, not color-only. The shapes carry the meaning even if the color rendered identically. Approximate target mapping (subject to iteration):
working — spinner (already shape-distinct, keep)unseen — small filled dot or pulse (canonical "new" pattern, color = brand)permission — key icon (or similar lock/auth glyph) in warning colorerror — alert-circle in error coloridle — agent identity icon (already in place via leadingSlot, no change)
All non-spinner shapes come from the existing Lucide icon set used elsewhere in the app, sized to fit the existing 20px slot in sidebar-items.tsx. Color stays as the secondary signal.
The implementation should keep the four state semantics intact (the JS branching at sidebar-items.tsx:102-108 does not change); only the visual rendering of each branch changes.
Which audience does this matter to most?
Both
Extra context
What task are you trying to do?
When I scan the sidebar I want to tell at a glance whether each session is currently working, has a permission request waiting, errored out, or just has unread output. Today the only signal is a 6px colored dot to the left of each title — red, orange, brand-red, or a spinner — and the only way to learn which color means what is to read the source.
What do you do today?
I either click into each session to find out, or I rely on the spinner alone (the only state that is shape-differentiated rather than color-only). The four colored-dot states (
workingis the spinner;unseen/permission/errorare all 6px filled circles distinguished only by hue) collapse into "there is a colored dot" for anyone with reduced color perception or anyone unfamiliar with the convention.This was flagged during the #300 brainstorm as a real gap. We pulled it out of #300 because #300 is scoped to typography and this is a different problem (icon design + accessibility), but it is a real piece of engineering — same category as the right-side session summary panel redesign tracked in #154.
What would a good result look like?
Each session indicator state is shape-differentiated, not color-only. The shapes carry the meaning even if the color rendered identically. Approximate target mapping (subject to iteration):
working— spinner (already shape-distinct, keep)unseen— small filled dot or pulse (canonical "new" pattern, color = brand)permission— key icon (or similar lock/auth glyph) in warning colorerror— alert-circle in error coloridle— agent identity icon (already in place vialeadingSlot, no change)All non-spinner shapes come from the existing Lucide icon set used elsewhere in the app, sized to fit the existing 20px slot in
sidebar-items.tsx. Color stays as the secondary signal.The implementation should keep the four state semantics intact (the JS branching at
sidebar-items.tsx:102-108does not change); only the visual rendering of each branch changes.Which audience does this matter to most?
Both
Extra context
packages/app/src/pages/layout/sidebar-items.tsxlines 102-108