Add comprehensive UI/UX review of the Keystone app#12
Open
Conversation
Covers all renderer components, stores, design tokens, and shared primitives. Identifies 3 critical usability issues (no markdown in chat, no loading states, silent error swallowing), accessibility gaps, layout problems, and design system inconsistencies. Includes prioritized fix recommendations. https://claude.ai/code/session_01JwumdxZkaPEigcLfFzJ9Eb
P0 Critical fixes: - Render markdown in chat messages using existing renderMarkdown pipeline - Add loading spinner during project open (5+ sequential API calls) - Surface all errors as toast notifications instead of silent console.error - Create Toast notification system with auto-dismiss and slide-in animation P1 Significant fixes: - Wire up dark mode toggle in Settings with Light/Dark/System options - Apply dark class to document element via uiStore, listen for system changes - Show document title alongside type in DocumentTabs (distinguishes multiple ADRs) - Add relative timestamps to ThreadListItem (e.g., "5m ago", "2d ago") - Add focus trap, role="dialog", aria-modal to Dialog component - Restore focus to trigger element on dialog close P2 Improvements: - Add keyboard shortcuts: Cmd+B (sidebar), Cmd+N (new thread), Cmd+Shift+N (new project), Cmd+, (settings) - Persist panel ratio in uiStore so resize survives navigation - Widen resizable panel drag handle (w-1 -> w-1.5) with invisible hit zone - Add Shift+Enter hint below message input with kbd styling - Expand Tailwind design tokens (accent-light, accent-muted, muted colors) - Add slide-in-from-right and fade-in animation keyframes P3 & Layout fixes: - Add thread search/filter (auto-shows when >3 threads) - Clamp SelectionToolbar position to prevent viewport overflow - Standardize ADRPromptDialog to use Button component - Make thread list collapsible to reduce double-sidebar space usage - Reduce sidebar width (w-56 -> w-52) and thread list (w-56 -> w-48) - Fix DocumentOutline with fixed w-48 width to prevent layout shifts Accessibility: - Add aria-label to all icon buttons (sidebar toggle, settings, send, etc.) - Add aria-hidden="true" to all decorative SVG icons - Add role="tablist"/role="tab"/aria-selected to DocumentTabs - Add role="separator" and aria-orientation to ResizablePanel divider - Add role="status" to StreamingIndicator - Add role="toolbar" to SelectionToolbar - Add aria-current to active sidebar/thread items - Add aria-expanded to collapsible controls - Add aria-label to ProviderCard radio inputs with htmlFor/id association - Improve color contrast (text-gray-400 -> text-gray-500/600 in key places) - Add role="contentinfo" to StatusBar, active provider status indicator https://claude.ai/code/session_01JwumdxZkaPEigcLfFzJ9Eb
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Covers all renderer components, stores, design tokens, and shared primitives.
Identifies 3 critical usability issues (no markdown in chat, no loading states,
silent error swallowing), accessibility gaps, layout problems, and design system
inconsistencies. Includes prioritized fix recommendations.
https://claude.ai/code/session_01JwumdxZkaPEigcLfFzJ9Eb