From 2911cd4823611a62e03c8cbc599cfd6d14be7050 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Feb 2026 05:29:55 +0000
Subject: [PATCH 1/2] Add comprehensive UI/UX review of the Keystone app

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
---
 UI_UX_REVIEW.md | 173 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 UI_UX_REVIEW.md

diff --git a/UI_UX_REVIEW.md b/UI_UX_REVIEW.md
new file mode 100644
index 0000000..a0782ae
--- /dev/null
+++ b/UI_UX_REVIEW.md
@@ -0,0 +1,173 @@
+# Keystone UI/UX Review
+
+Comprehensive review of all renderer components, stores, styling configuration, and shared UI primitives.
+
+---
+
+## 1. CRITICAL USABILITY ISSUES
+
+### 1a. No markdown rendering for AI responses
+**File:** `src/renderer/features/conversation/MessageBubble.tsx:37`
+
+The assistant messages use `whitespace-pre-wrap` and render `message.content` as raw text. Since the AI generates markdown (headings, code blocks, lists), users see raw markdown syntax instead of formatted output. The document panel has a full `renderMarkdown` pipeline (`src/renderer/lib/markdown.ts`), but the chat does not use it.
+
+**Impact:** The primary interaction surface (chat) looks broken for any non-trivial AI response.
+
+### 1b. No loading state during project open
+**File:** `src/renderer/App.tsx:236-281`
+
+`handleSelectProject` makes 5+ sequential network calls (open, list threads, get each thread, list docs, get each doc). During this time there is zero visual feedback -- the user sees the previous project content or an empty state until everything resolves.
+
+**Impact:** Users will think the app froze or the click didn't register, especially with larger projects.
+
+### 1c. No error feedback visible to users
+**Files:** `src/renderer/App.tsx:88-98, :100-111, :175-193, :195-213, :215-233`
+
+All error handling in `handleCreateProject`, `handleNewThread`, `handleBranchThread`, `handleInquire`, and `handleRefine` silently `console.error` and swallow the failure. The user has no indication that their action failed.
+
+**Impact:** Users will repeat actions thinking they didn't click, or abandon the app thinking it's broken.
+
+---
+
+## 2. SIGNIFICANT UX ISSUES
+
+### 2a. Theme toggle exists in store but is not exposed in the UI
+**File:** `src/renderer/stores/uiStore.ts:8`
+
+The store defines `theme: 'light' | 'dark' | 'system'` and `setTheme`, but no component exposes this to the user. The Tailwind config uses `darkMode: 'class'`, and there is no code applying the `dark` class to the HTML element based on the store state. Dark mode is currently non-functional despite being wired up in the store.
+
+### 2b. Panel ratio in uiStore is disconnected from ResizablePanel
+**Files:** `src/renderer/stores/uiStore.ts:6`, `src/renderer/components/ui/ResizablePanel.tsx:18`
+
+`uiStore` stores `panelRatio` and `setPanelRatio`, but `ResizablePanel` manages its own local `useState(defaultRatio)`. Resizing is lost on navigation or re-render. The store value is never read or written by ResizablePanel.
+
+### 2c. Thread list shows no timestamps or context
+**File:** `src/renderer/features/conversation/ThreadListItem.tsx:9`
+
+`ThreadListItem` accepts `updatedAt` but never renders it. The `id` prop is also unused. Users with many threads have only the title to distinguish between them.
+
+### 2d. Document tabs show only type abbreviation, not titles
+**File:** `src/renderer/features/document/DocumentTabs.tsx:24`
+
+Tabs render `doc.type.toUpperCase()` (e.g., "PRD", "TDD", "ADR") but not the document title. When a project has multiple ADRs, all tabs display "ADR" identically, making them indistinguishable.
+
+### 2e. No confirmation before destructive actions
+
+There is no delete/archive functionality for threads, projects, or documents exposed in the UI. If delete were added later, no confirmation pattern exists.
+
+---
+
+## 3. LAYOUT & VISUAL ISSUES
+
+### 3a. Double sidebar creates a cramped workspace
+**Files:** `src/renderer/components/Sidebar.tsx:12`, `src/renderer/features/conversation/ConversationPanel.tsx:27`
+
+The project Sidebar (w-56, 224px) alongside the thread list (w-56, 224px) consumes 448px -- 35% of a 1280px display -- leaving only ~832px for the split conversation+document panels.
+
+### 3b. Message bubble max-width is relative to wrong container
+**File:** `src/renderer/features/conversation/MessageBubble.tsx:31`
+
+`max-w-[80%]` is relative to the parent flex row with padding. On narrow panes, bubbles become uncomfortably narrow. A fixed `max-w-prose` or `max-w-2xl` would be more predictable.
+
+### 3c. Document outline has no fixed width
+**File:** `src/renderer/features/document/DocumentOutline.tsx:13`
+
+The outline has no width constraint, causing layout shifts when switching between documents with different heading lengths.
+
+### 3d. Selection toolbar positioning can overflow viewport
+**File:** `src/renderer/features/document/MarkdownPreview.tsx:32`
+
+Toolbar position is computed without clamping. Selections near container edges cause the toolbar to render partially off-screen.
+
+### 3e. Resizable panel divider is too thin
+**File:** `src/renderer/components/ui/ResizablePanel.tsx:58`
+
+The `w-1` (4px) drag handle is at the lower end of comfortable click targets. Most applications use 6-8px with a wider hover zone.
+
+---
+
+## 4. ACCESSIBILITY ISSUES
+
+### 4a. Dialog lacks focus trap
+**File:** `src/renderer/components/ui/Dialog.tsx`
+
+The Dialog handles Escape to close but does not trap focus within the dialog or return focus to the trigger on close. Keyboard users can tab behind the modal.
+
+### 4b. No ARIA attributes on interactive elements
+- Sidebar toggle in `TitleBar.tsx:19-28` -- no `aria-label` or `aria-expanded`
+- Radio buttons in `ProviderCard.tsx:41-46` -- no proper label association
+- `ThreadListItem` buttons -- no `aria-current` for active state
+- `Dialog` component -- uses plain `<div>` instead of `role="dialog"` with `aria-modal`
+
+### 4c. SVG icons have no accessible text
+
+All inline SVGs (send button, settings gear, sidebar toggle, branch, inquire, refine) have no `aria-label` or `<title>` element.
+
+### 4d. Insufficient color contrast in subtle text
+
+`text-gray-400` and `text-gray-500` used for secondary text may not meet WCAG AA contrast requirements against white or dark backgrounds.
+
+---
+
+## 5. INTERACTION DESIGN GAPS
+
+### 5a. No keyboard shortcuts
+
+No keyboard shortcuts for common actions: new thread (Cmd+N), toggle sidebar (Cmd+B), send message (Cmd+Enter), switch document tabs, etc.
+
+### 5b. Message input doesn't indicate Shift+Enter for newlines
+**File:** `src/renderer/features/conversation/MessageInput.tsx:21-26`
+
+Enter to send and Shift+Enter for newlines is supported but not visually indicated.
+
+### 5c. No drag-and-drop or file attachment
+
+Users cannot drag in existing documents, images, or reference files into conversations.
+
+### 5d. Streaming indicator logic has a brief gap
+**File:** `src/renderer/features/conversation/ChatView.tsx:18`
+
+The bouncing-dots indicator appears only when `isStreaming && !streamingMessageId` -- the brief window before the first chunk. The transition from dots to cursor-in-bubble can feel jarring.
+
+### 5e. No search or filter in thread list
+
+Users with many conversation threads have no way to search or filter. Only "active" threads are shown with no way to view archived ones.
+
+---
+
+## 6. DESIGN SYSTEM OBSERVATIONS
+
+### 6a. Custom semantic colors defined but not used
+**File:** `tailwind.config.ts`
+
+Custom tokens `surface`, `panel`, and `accent` are defined but components use raw Tailwind colors directly (`bg-gray-100`, `bg-indigo-600`, etc.), making global theme changes require touching every file.
+
+### 6b. Inconsistent button patterns
+
+`ADRPromptDialog.tsx:33-45` uses raw `<button>` elements with inline classes, while other dialogs use the `<Button>` component. This creates visual inconsistency.
+
+### 6c. No transition animations between states
+
+State changes (project switching, thread selection, sidebar toggle) happen instantly with no transitions. Even subtle 150ms fade-ins would improve perceived polish.
+
+---
+
+## 7. RECOMMENDED PRIORITY FIXES
+
+| Priority | Issue | Effort |
+|----------|-------|--------|
+| P0 | Render markdown in chat messages | Low |
+| P0 | Add loading state for project open | Low |
+| P0 | Surface errors as toast notifications | Medium |
+| P1 | Wire up dark mode toggle in Settings | Low |
+| P1 | Show document title in tabs, not just type | Low |
+| P1 | Add timestamps to ThreadListItem | Low |
+| P1 | Add `role="dialog"` and focus trap to Dialog | Medium |
+| P2 | Use custom design tokens instead of raw colors | Medium-High |
+| P2 | Add keyboard shortcuts for common actions | Medium |
+| P2 | Persist panel ratio in uiStore/ResizablePanel | Low |
+| P2 | Widen resizable panel drag handle | Low |
+| P2 | Add Shift+Enter hint to message input | Low |
+| P3 | Add thread search/filter | Medium |
+| P3 | Clamp SelectionToolbar position to viewport | Low |
+| P3 | Standardize Button usage across all dialogs | Low |

From 4726aefa9e6dfdd8964bceac11d6dff99b3827fa Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 6 Feb 2026 06:09:57 +0000
Subject: [PATCH 2/2] Address all UI/UX review findings across the entire
 renderer

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
---
 src/renderer/App.tsx                          | 57 ++++++++++---
 src/renderer/components/Sidebar.tsx           |  9 ++-
 src/renderer/components/StatusBar.tsx         |  9 ++-
 src/renderer/components/TitleBar.tsx          | 11 ++-
 src/renderer/components/ui/Dialog.tsx         | 69 +++++++++++++---
 src/renderer/components/ui/ResizablePanel.tsx | 23 ++++--
 src/renderer/components/ui/Toast.tsx          | 80 +++++++++++++++++++
 .../features/conversation/ChatView.tsx        |  2 +-
 .../conversation/ConversationPanel.tsx        | 74 +++++++++++------
 .../features/conversation/MessageBubble.tsx   | 24 +++++-
 .../features/conversation/MessageInput.tsx    |  8 +-
 .../conversation/StreamingIndicator.tsx       |  6 +-
 .../features/conversation/ThreadList.tsx      | 26 +++++-
 .../features/conversation/ThreadListItem.tsx  | 23 +++++-
 .../features/document/ADRPromptDialog.tsx     | 15 ++--
 .../features/document/DocumentOutline.tsx     |  8 +-
 .../features/document/DocumentTabs.tsx        | 13 ++-
 .../features/document/SelectionToolbar.tsx    | 40 ++++++++--
 .../features/settings/ProviderCard.tsx        |  7 +-
 .../features/settings/SettingsDialog.tsx      | 32 ++++++++
 src/renderer/globals.css                      | 10 ++-
 src/renderer/hooks/useKeyboardShortcuts.ts    | 45 +++++++++++
 src/renderer/stores/uiStore.ts                | 32 +++++++-
 tailwind.config.ts                            | 20 +++++
 24 files changed, 543 insertions(+), 100 deletions(-)
 create mode 100644 src/renderer/components/ui/Toast.tsx
 create mode 100644 src/renderer/hooks/useKeyboardShortcuts.ts

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 1833f59..f1cab9b 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -4,6 +4,8 @@ import { TitleBar } from './components/TitleBar'
 import { Sidebar } from './components/Sidebar'
 import { StatusBar } from './components/StatusBar'
 import { ResizablePanel } from './components/ui/ResizablePanel'
+import { Spinner } from './components/ui/Spinner'
+import { ToastContainer, useToastStore } from './components/ui/Toast'
 import { ConversationPanel } from './features/conversation/ConversationPanel'
 import { DocumentPanel } from './features/document/DocumentPanel'
 import { NewProjectDialog } from './features/project/NewProjectDialog'
@@ -16,18 +18,22 @@ import { useThreadStore } from './stores/threadStore'
 import { useDocumentStore } from './stores/documentStore'
 import { useSettingsStore } from './stores/settingsStore'
 import { trpc } from './lib/trpc'
+import { useKeyboardShortcuts } from './hooks/useKeyboardShortcuts'
 import { ADR_TEMPLATE } from '@shared/constants'
 
 export function App() {
   const sidebarOpen = useUIStore((s) => s.sidebarOpen)
   const [showNewProject, setShowNewProject] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
+  const [loadingProject, setLoadingProject] = useState(false)
   const [pendingPivot, setPendingPivot] = useState<{
     previousDecision: string
     newDecision: string
     threadId: string
   } | null>(null)
 
+  const addToast = useToastStore((s) => s.addToast)
+
   const activeProject = useProjectStore((s) => s.activeProject)
   const setProjects = useProjectStore((s) => s.setProjects)
   const addProject = useProjectStore((s) => s.addProject)
@@ -48,6 +54,13 @@ export function App() {
 
   const loadSettings = useSettingsStore((s) => s.loadSettings)
 
+  // Keyboard shortcuts
+  useKeyboardShortcuts({
+    onNewThread: () => { if (activeProject) handleNewThread() },
+    onOpenSettings: () => setShowSettings(true),
+    onNewProject: () => setShowNewProject(true),
+  })
+
   // Check if the active project has any content
   const hasContent = threads.length > 0 || documents.length > 0
 
@@ -79,22 +92,25 @@ export function App() {
         setProjects(projects)
       } catch (err) {
         console.error('Failed to load projects:', err)
+        addToast('Failed to load projects. Please restart the app.')
       }
     }
     loadProjects()
     loadSettings()
-  }, [setProjects, loadSettings])
+  }, [setProjects, loadSettings, addToast])
 
   const handleCreateProject = useCallback(
     async (name: string, path: string) => {
       try {
         const project = await trpc.project.create.mutate({ name, path })
         addProject(project)
+        addToast(`Project "${name}" created successfully.`, 'success')
       } catch (err) {
         console.error('Failed to create project:', err)
+        addToast('Failed to create project. Please try again.')
       }
     },
-    [addProject],
+    [addProject, addToast],
   )
 
   const handleNewThread = useCallback(async () => {
@@ -107,8 +123,9 @@ export function App() {
       addThread(thread)
     } catch (err) {
       console.error('Failed to create thread:', err)
+      addToast('Failed to create thread. Please try again.')
     }
-  }, [activeProject, addThread])
+  }, [activeProject, addThread, addToast])
 
   const handleSendMessage = useCallback(
     async (content: string) => {
@@ -167,9 +184,10 @@ export function App() {
           content: 'Failed to get a response. Please try again.',
           createdAt: new Date().toISOString(),
         })
+        addToast('Failed to get AI response. Check your provider settings.')
       }
     },
-    [addMessage, addStreamingMessage, setStreamingMessageId],
+    [addMessage, addStreamingMessage, setStreamingMessageId, addToast],
   )
 
   const handleBranchThread = useCallback(
@@ -185,11 +203,13 @@ export function App() {
           fromMessageId: messageId,
         })
         addThread(newThread)
+        addToast('Conversation branched successfully.', 'success')
       } catch (err) {
         console.error('Failed to branch thread:', err)
+        addToast('Failed to branch conversation. Please try again.')
       }
     },
-    [addThread],
+    [addThread, addToast],
   )
 
   const handleInquire = useCallback(
@@ -207,9 +227,10 @@ export function App() {
         addThread(thread)
       } catch (err) {
         console.error('Failed to create inquiry thread:', err)
+        addToast('Failed to create inquiry. Please try again.')
       }
     },
-    [activeProject, addThread],
+    [activeProject, addThread, addToast],
   )
 
   const handleRefine = useCallback(
@@ -227,13 +248,15 @@ export function App() {
         addThread(thread)
       } catch (err) {
         console.error('Failed to create refinement thread:', err)
+        addToast('Failed to create refinement. Please try again.')
       }
     },
-    [activeProject, addThread],
+    [activeProject, addThread, addToast],
   )
 
   const handleSelectProject = useCallback(
     async (_path: string) => {
+      setLoadingProject(true)
       try {
         // Open project via backend (loads full project with doc/thread refs)
         const project = await trpc.project.open.mutate({ path: _path })
@@ -275,9 +298,12 @@ export function App() {
         setDocuments(fullDocs)
       } catch (err) {
         console.error('Failed to select project:', err)
+        addToast('Failed to open project. Please try again.')
+      } finally {
+        setLoadingProject(false)
       }
     },
-    [setActiveProject, updateThreads, updateDocuments, setThreads, setDocuments],
+    [setActiveProject, updateThreads, updateDocuments, setThreads, setDocuments, addToast],
   )
 
   const handleCreateADR = useCallback(async () => {
@@ -335,10 +361,12 @@ export function App() {
 
       // Clear pending pivot
       setPendingPivot(null)
+      addToast('ADR created successfully.', 'success')
     } catch (err) {
       console.error('Failed to create ADR:', err)
+      addToast('Failed to create ADR. Please try again.')
     }
-  }, [pendingPivot, activeProject, addDocument, updateDocuments])
+  }, [pendingPivot, activeProject, addDocument, updateDocuments, addToast])
 
   return (
     <ErrorBoundary>
@@ -351,7 +379,14 @@ export function App() {
         <div className="flex flex-1 overflow-hidden">
           {sidebarOpen && <Sidebar onSelectProject={handleSelectProject} />}
 
-          {activeProject ? (
+          {loadingProject ? (
+            <div className="flex flex-1 items-center justify-center">
+              <div className="flex flex-col items-center gap-3">
+                <Spinner size="lg" />
+                <p className="text-sm text-gray-500 dark:text-gray-400">Loading project...</p>
+              </div>
+            </div>
+          ) : activeProject ? (
             hasContent ? (
               <ResizablePanel
                 left={
@@ -390,6 +425,8 @@ export function App() {
 
         <StatusBar />
 
+        <ToastContainer />
+
         <NewProjectDialog
           open={showNewProject}
           onClose={() => setShowNewProject(false)}
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
index 41a8414..9acc803 100644
--- a/src/renderer/components/Sidebar.tsx
+++ b/src/renderer/components/Sidebar.tsx
@@ -9,13 +9,13 @@ export function Sidebar({ onSelectProject }: SidebarProps) {
   const activeProject = useProjectStore((s) => s.activeProject)
 
   return (
-    <div className="flex h-full w-56 flex-col border-r border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-[#181825]">
+    <aside className="flex h-full w-52 flex-shrink-0 flex-col border-r border-gray-200 bg-gray-50 transition-all dark:border-gray-700 dark:bg-[#181825]">
       <div className="border-b border-gray-200 px-3 py-2 dark:border-gray-700">
         <h3 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
           Projects
         </h3>
       </div>
-      <div className="flex-1 overflow-y-auto p-2">
+      <nav className="flex-1 overflow-y-auto p-2" aria-label="Project list">
         {projects.length === 0 ? (
           <p className="px-3 py-4 text-center text-xs text-gray-400">
             No projects yet. Create one to get started.
@@ -26,6 +26,7 @@ export function Sidebar({ onSelectProject }: SidebarProps) {
               <button
                 key={project.id}
                 onClick={() => onSelectProject(project.path)}
+                aria-current={activeProject?.id === project.id ? 'page' : undefined}
                 className={`w-full rounded-md px-3 py-2 text-left text-sm transition-colors ${
                   activeProject?.id === project.id
                     ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
@@ -37,7 +38,7 @@ export function Sidebar({ onSelectProject }: SidebarProps) {
             ))}
           </div>
         )}
-      </div>
-    </div>
+      </nav>
+    </aside>
   )
 }
diff --git a/src/renderer/components/StatusBar.tsx b/src/renderer/components/StatusBar.tsx
index 4c82919..03dd968 100644
--- a/src/renderer/components/StatusBar.tsx
+++ b/src/renderer/components/StatusBar.tsx
@@ -5,13 +5,16 @@ export function StatusBar() {
   const activeProvider = useSettingsStore((s) => s.activeProvider)
 
   return (
-    <footer className="flex h-6 items-center justify-between border-t border-gray-200 px-4 text-xs text-gray-500 dark:border-gray-700 dark:text-gray-400">
+    <footer className="flex h-6 items-center justify-between border-t border-gray-200 px-4 text-xs text-gray-600 dark:border-gray-700 dark:text-gray-400" role="contentinfo">
       <span>Keystone v{APP_VERSION}</span>
       <span>
         {activeProvider ? (
-          <>AI: {activeProvider}</>
+          <span className="flex items-center gap-1.5">
+            <span className="inline-block h-1.5 w-1.5 rounded-full bg-green-500" aria-hidden="true" />
+            AI: {activeProvider}
+          </span>
         ) : (
-          <span className="text-amber-500">No AI provider configured</span>
+          <span className="text-amber-600 dark:text-amber-400">No AI provider configured</span>
         )}
       </span>
     </footer>
diff --git a/src/renderer/components/TitleBar.tsx b/src/renderer/components/TitleBar.tsx
index 86fdc3a..9504484 100644
--- a/src/renderer/components/TitleBar.tsx
+++ b/src/renderer/components/TitleBar.tsx
@@ -7,6 +7,7 @@ interface TitleBarProps {
 }
 
 export function TitleBar({ onOpenSettings, onNewProject }: TitleBarProps) {
+  const sidebarOpen = useUIStore((s) => s.sidebarOpen)
   const toggleSidebar = useUIStore((s) => s.toggleSidebar)
   const activeProject = useProjectStore((s) => s.activeProject)
 
@@ -20,8 +21,10 @@ export function TitleBar({ onOpenSettings, onNewProject }: TitleBarProps) {
           onClick={toggleSidebar}
           className="rounded p-1 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800"
           style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
+          aria-label={sidebarOpen ? 'Hide sidebar' : 'Show sidebar'}
+          aria-expanded={sidebarOpen}
         >
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
             <rect x="3" y="3" width="18" height="18" rx="2" />
             <line x1="9" y1="3" x2="9" y2="21" />
           </svg>
@@ -38,8 +41,9 @@ export function TitleBar({ onOpenSettings, onNewProject }: TitleBarProps) {
           onClick={onNewProject}
           className="rounded p-1.5 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800"
           title="New Project"
+          aria-label="Create new project"
         >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
             <path d="M12 5v14M5 12h14" />
           </svg>
         </button>
@@ -47,8 +51,9 @@ export function TitleBar({ onOpenSettings, onNewProject }: TitleBarProps) {
           onClick={onOpenSettings}
           className="rounded p-1.5 text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800"
           title="Settings"
+          aria-label="Open settings"
         >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
             <circle cx="12" cy="12" r="3" />
             <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
           </svg>
diff --git a/src/renderer/components/ui/Dialog.tsx b/src/renderer/components/ui/Dialog.tsx
index e02d7ac..1e55868 100644
--- a/src/renderer/components/ui/Dialog.tsx
+++ b/src/renderer/components/ui/Dialog.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, useEffect, useRef } from 'react'
+import { type ReactNode, useEffect, useRef, useCallback } from 'react'
 
 interface DialogProps {
   open: boolean
@@ -9,27 +9,76 @@ interface DialogProps {
 
 export function Dialog({ open, onClose, title, children }: DialogProps) {
   const dialogRef = useRef<HTMLDivElement>(null)
+  const previousFocusRef = useRef<HTMLElement | null>(null)
+
+  // Focus trap: keep focus within dialog
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose()
+        return
+      }
+
+      if (e.key !== 'Tab' || !dialogRef.current) return
+
+      const focusableElements = dialogRef.current.querySelectorAll<HTMLElement>(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      )
+      const firstEl = focusableElements[0]
+      const lastEl = focusableElements[focusableElements.length - 1]
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstEl) {
+          e.preventDefault()
+          lastEl?.focus()
+        }
+      } else {
+        if (document.activeElement === lastEl) {
+          e.preventDefault()
+          firstEl?.focus()
+        }
+      }
+    },
+    [onClose],
+  )
 
   useEffect(() => {
-    const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-    }
     if (open) {
-      document.addEventListener('keydown', handleEsc)
+      previousFocusRef.current = document.activeElement as HTMLElement
+      document.addEventListener('keydown', handleKeyDown)
+
+      // Focus the first focusable element in the dialog
+      requestAnimationFrame(() => {
+        const firstFocusable = dialogRef.current?.querySelector<HTMLElement>(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+        )
+        firstFocusable?.focus()
+      })
+    }
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      // Return focus to previously focused element
+      if (previousFocusRef.current) {
+        previousFocusRef.current.focus()
+        previousFocusRef.current = null
+      }
     }
-    return () => document.removeEventListener('keydown', handleEsc)
-  }, [open, onClose])
+  }, [open, handleKeyDown])
 
   if (!open) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="fixed inset-0 bg-black/50" onClick={onClose} />
+    <div className="fixed inset-0 z-50 flex items-center justify-center" role="presentation">
+      <div className="fixed inset-0 bg-black/50 transition-opacity" onClick={onClose} aria-hidden="true" />
       <div
         ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="dialog-title"
         className="relative z-50 w-full max-w-lg rounded-lg bg-white p-6 shadow-xl dark:bg-gray-800"
       >
-        <h2 className="mb-4 text-lg font-semibold">{title}</h2>
+        <h2 id="dialog-title" className="mb-4 text-lg font-semibold">{title}</h2>
         {children}
       </div>
     </div>
diff --git a/src/renderer/components/ui/ResizablePanel.tsx b/src/renderer/components/ui/ResizablePanel.tsx
index d801439..1221171 100644
--- a/src/renderer/components/ui/ResizablePanel.tsx
+++ b/src/renderer/components/ui/ResizablePanel.tsx
@@ -1,9 +1,9 @@
-import { type ReactNode, useState, useCallback, useRef, useEffect } from 'react'
+import { type ReactNode, useCallback, useRef, useEffect } from 'react'
+import { useUIStore } from '../../stores/uiStore'
 
 interface ResizablePanelProps {
   left: ReactNode
   right: ReactNode
-  defaultRatio?: number
   minRatio?: number
   maxRatio?: number
 }
@@ -11,11 +11,11 @@ interface ResizablePanelProps {
 export function ResizablePanel({
   left,
   right,
-  defaultRatio = 0.5,
   minRatio = 0.2,
   maxRatio = 0.8,
 }: ResizablePanelProps) {
-  const [ratio, setRatio] = useState(defaultRatio)
+  const ratio = useUIStore((s) => s.panelRatio)
+  const setPanelRatio = useUIStore((s) => s.setPanelRatio)
   const containerRef = useRef<HTMLDivElement>(null)
   const isDragging = useRef(false)
 
@@ -31,7 +31,7 @@ export function ResizablePanel({
       if (!isDragging.current || !containerRef.current) return
       const rect = containerRef.current.getBoundingClientRect()
       const newRatio = Math.min(maxRatio, Math.max(minRatio, (e.clientX - rect.left) / rect.width))
-      setRatio(newRatio)
+      setPanelRatio(newRatio)
     }
 
     const handleMouseUp = () => {
@@ -46,7 +46,7 @@ export function ResizablePanel({
       document.removeEventListener('mousemove', handleMouseMove)
       document.removeEventListener('mouseup', handleMouseUp)
     }
-  }, [minRatio, maxRatio])
+  }, [minRatio, maxRatio, setPanelRatio])
 
   return (
     <div ref={containerRef} className="flex h-full">
@@ -55,8 +55,15 @@ export function ResizablePanel({
       </div>
       <div
         onMouseDown={handleMouseDown}
-        className="w-1 cursor-col-resize bg-gray-200 transition-colors hover:bg-indigo-400 dark:bg-gray-700 dark:hover:bg-indigo-500"
-      />
+        role="separator"
+        aria-orientation="vertical"
+        aria-valuenow={Math.round(ratio * 100)}
+        tabIndex={0}
+        className="group relative w-1.5 cursor-col-resize bg-gray-200 transition-colors hover:bg-indigo-400 dark:bg-gray-700 dark:hover:bg-indigo-500"
+      >
+        {/* Wider invisible hit zone for easier grabbing */}
+        <div className="absolute inset-y-0 -left-1 -right-1" />
+      </div>
       <div style={{ width: `${(1 - ratio) * 100}%` }} className="overflow-hidden">
         {right}
       </div>
diff --git a/src/renderer/components/ui/Toast.tsx b/src/renderer/components/ui/Toast.tsx
new file mode 100644
index 0000000..1467eeb
--- /dev/null
+++ b/src/renderer/components/ui/Toast.tsx
@@ -0,0 +1,80 @@
+import { useEffect } from 'react'
+import { create } from 'zustand'
+
+interface ToastItem {
+  id: string
+  message: string
+  type: 'error' | 'success' | 'info'
+}
+
+interface ToastState {
+  toasts: ToastItem[]
+  addToast: (message: string, type?: ToastItem['type']) => void
+  removeToast: (id: string) => void
+}
+
+export const useToastStore = create<ToastState>((set) => ({
+  toasts: [],
+  addToast: (message, type = 'error') => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`
+    set((state) => ({ toasts: [...state.toasts, { id, message, type }] }))
+  },
+  removeToast: (id) => {
+    set((state) => ({ toasts: state.toasts.filter((t) => t.id !== id) }))
+  },
+}))
+
+const typeStyles: Record<ToastItem['type'], string> = {
+  error: 'bg-red-600 text-white',
+  success: 'bg-green-600 text-white',
+  info: 'bg-gray-800 text-white dark:bg-gray-200 dark:text-gray-900',
+}
+
+const typeIcons: Record<ToastItem['type'], string> = {
+  error: 'M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z',
+  success: 'M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+  info: 'M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z',
+}
+
+function ToastItem({ toast, onDismiss }: { toast: ToastItem; onDismiss: () => void }) {
+  useEffect(() => {
+    const timer = setTimeout(onDismiss, 5000)
+    return () => clearTimeout(timer)
+  }, [onDismiss])
+
+  return (
+    <div
+      className={`flex items-center gap-2 rounded-lg px-4 py-3 text-sm shadow-lg transition-all animate-in slide-in-from-right ${typeStyles[toast.type]}`}
+      role="alert"
+    >
+      <svg className="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" d={typeIcons[toast.type]} />
+      </svg>
+      <span className="flex-1">{toast.message}</span>
+      <button
+        onClick={onDismiss}
+        className="ml-2 rounded p-0.5 opacity-70 hover:opacity-100"
+        aria-label="Dismiss notification"
+      >
+        <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+      </button>
+    </div>
+  )
+}
+
+export function ToastContainer() {
+  const toasts = useToastStore((s) => s.toasts)
+  const removeToast = useToastStore((s) => s.removeToast)
+
+  if (toasts.length === 0) return null
+
+  return (
+    <div className="fixed bottom-12 right-4 z-[100] flex flex-col gap-2" aria-live="polite">
+      {toasts.map((toast) => (
+        <ToastItem key={toast.id} toast={toast} onDismiss={() => removeToast(toast.id)} />
+      ))}
+    </div>
+  )
+}
diff --git a/src/renderer/features/conversation/ChatView.tsx b/src/renderer/features/conversation/ChatView.tsx
index 3441d3c..4f556c3 100644
--- a/src/renderer/features/conversation/ChatView.tsx
+++ b/src/renderer/features/conversation/ChatView.tsx
@@ -15,7 +15,7 @@ export function ChatView({ messages, streamingMessageId, isStreaming, onSendMess
   return (
     <div className="flex h-full flex-col">
       <MessageList messages={messages} streamingMessageId={streamingMessageId} onBranch={onBranch} />
-      {isStreaming && !streamingMessageId && <StreamingIndicator />}
+      {isStreaming && <StreamingIndicator />}
       <MessageInput onSend={onSendMessage} disabled={isStreaming} />
     </div>
   )
diff --git a/src/renderer/features/conversation/ConversationPanel.tsx b/src/renderer/features/conversation/ConversationPanel.tsx
index 5535bf7..6ea64a3 100644
--- a/src/renderer/features/conversation/ConversationPanel.tsx
+++ b/src/renderer/features/conversation/ConversationPanel.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { ThreadList } from './ThreadList'
 import { ChatView } from './ChatView'
 import { useThreadStore } from '../../stores/threadStore'
@@ -13,6 +14,7 @@ export function ConversationPanel({ onSendMessage, onNewThread, onBranch }: Conv
   const activeThreadId = useThreadStore((s) => s.activeThreadId)
   const streamingMessageId = useThreadStore((s) => s.streamingMessageId)
   const setActiveThread = useThreadStore((s) => s.setActiveThread)
+  const [threadListCollapsed, setThreadListCollapsed] = useState(false)
 
   const activeThread = threads.find((t) => t.id === activeThreadId)
   const threadInfos = threads.map((t) => ({
@@ -24,31 +26,57 @@ export function ConversationPanel({ onSendMessage, onNewThread, onBranch }: Conv
 
   return (
     <div className="flex h-full">
-      <div className="w-56 flex-shrink-0 border-r border-gray-200 dark:border-gray-700">
-        <ThreadList
-          threads={threadInfos}
-          activeThreadId={activeThreadId}
-          onSelectThread={setActiveThread}
-          onNewThread={onNewThread}
-        />
-      </div>
-      <div className="flex-1">
-        {activeThread ? (
-          <ChatView
-            messages={activeThread.messages}
-            streamingMessageId={streamingMessageId}
-            isStreaming={!!streamingMessageId}
-            onSendMessage={onSendMessage}
-            onBranch={onBranch}
+      {!threadListCollapsed && (
+        <div className="w-48 flex-shrink-0 border-r border-gray-200 transition-all dark:border-gray-700">
+          <ThreadList
+            threads={threadInfos}
+            activeThreadId={activeThreadId}
+            onSelectThread={setActiveThread}
+            onNewThread={onNewThread}
           />
-        ) : (
-          <div className="flex h-full items-center justify-center text-gray-400 dark:text-gray-500">
-            <div className="text-center">
-              <p className="text-lg font-medium">No thread selected</p>
-              <p className="mt-1 text-sm">Create a new thread to start a conversation</p>
+        </div>
+      )}
+      <div className="flex flex-1 flex-col">
+        {/* Thread list collapse toggle */}
+        <div className="flex items-center border-b border-gray-200 px-2 py-1 dark:border-gray-700">
+          <button
+            onClick={() => setThreadListCollapsed(!threadListCollapsed)}
+            className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800 dark:hover:text-gray-300"
+            aria-label={threadListCollapsed ? 'Show thread list' : 'Hide thread list'}
+            aria-expanded={!threadListCollapsed}
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
+              {threadListCollapsed ? (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+              ) : (
+                <path strokeLinecap="round" strokeLinejoin="round" d="M11 19l-7-7 7-7M18 19l-7-7 7-7" />
+              )}
+            </svg>
+          </button>
+          {activeThread && (
+            <span className="ml-2 truncate text-xs font-medium text-gray-600 dark:text-gray-400">
+              {activeThread.title}
+            </span>
+          )}
+        </div>
+        <div className="flex-1">
+          {activeThread ? (
+            <ChatView
+              messages={activeThread.messages}
+              streamingMessageId={streamingMessageId}
+              isStreaming={!!streamingMessageId}
+              onSendMessage={onSendMessage}
+              onBranch={onBranch}
+            />
+          ) : (
+            <div className="flex h-full items-center justify-center text-gray-400 dark:text-gray-500">
+              <div className="text-center">
+                <p className="text-lg font-medium">No thread selected</p>
+                <p className="mt-1 text-sm">Create a new thread to start a conversation</p>
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </div>
     </div>
   )
diff --git a/src/renderer/features/conversation/MessageBubble.tsx b/src/renderer/features/conversation/MessageBubble.tsx
index b11115f..0ef89b4 100644
--- a/src/renderer/features/conversation/MessageBubble.tsx
+++ b/src/renderer/features/conversation/MessageBubble.tsx
@@ -1,4 +1,6 @@
+import { useState, useEffect } from 'react'
 import type { Message } from '@shared/types'
+import { renderMarkdown } from '@/lib/markdown'
 
 interface MessageBubbleProps {
   message: Message
@@ -11,6 +13,14 @@ export function MessageBubble({ message, isStreaming, onBranch }: MessageBubbleP
   const isSystem = message.role === 'system'
   const isAssistant = message.role === 'assistant'
 
+  const [renderedHtml, setRenderedHtml] = useState<string>('')
+
+  useEffect(() => {
+    if (isAssistant && message.content) {
+      renderMarkdown(message.content).then(setRenderedHtml)
+    }
+  }, [isAssistant, message.content])
+
   if (isSystem) {
     return (
       <div className="mx-auto my-2 max-w-lg rounded bg-gray-100 px-3 py-1 text-center text-xs text-gray-500 dark:bg-gray-800 dark:text-gray-400">
@@ -26,15 +36,22 @@ export function MessageBubble({ message, isStreaming, onBranch }: MessageBubbleP
           K
         </div>
       )}
-      <div className="flex flex-col">
+      <div className="flex max-w-2xl flex-col">
         <div
-          className={`max-w-[80%] rounded-lg px-4 py-2 text-sm ${
+          className={`rounded-lg px-4 py-2 text-sm ${
             isUser
               ? 'bg-indigo-600 text-white'
               : 'bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-100'
           }`}
         >
-          <div className="whitespace-pre-wrap">{message.content}</div>
+          {isAssistant && renderedHtml ? (
+            <div
+              className="prose prose-sm max-w-none dark:prose-invert"
+              dangerouslySetInnerHTML={{ __html: renderedHtml }}
+            />
+          ) : (
+            <div className="whitespace-pre-wrap">{message.content}</div>
+          )}
           {isStreaming && (
             <span className="inline-block h-4 w-1 animate-pulse bg-current opacity-70" />
           )}
@@ -44,6 +61,7 @@ export function MessageBubble({ message, isStreaming, onBranch }: MessageBubbleP
             onClick={() => onBranch(message.id)}
             className="mt-1 self-start rounded px-1.5 py-0.5 text-xs text-gray-400 opacity-0 transition-opacity hover:bg-gray-100 hover:text-gray-600 group-hover:opacity-100 dark:hover:bg-gray-700 dark:hover:text-gray-300"
             title="Branch conversation from this message"
+            aria-label="Branch conversation from this message"
           >
             Branch
           </button>
diff --git a/src/renderer/features/conversation/MessageInput.tsx b/src/renderer/features/conversation/MessageInput.tsx
index 4c55cd2..6bfc307 100644
--- a/src/renderer/features/conversation/MessageInput.tsx
+++ b/src/renderer/features/conversation/MessageInput.tsx
@@ -36,6 +36,7 @@ export function MessageInput({ onSend, disabled, placeholder = 'Type a message..
           placeholder={placeholder}
           disabled={disabled}
           rows={1}
+          aria-label="Message input"
           className="flex-1 resize-none rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:placeholder:text-gray-500"
           style={{ maxHeight: '120px' }}
           onInput={(e) => {
@@ -48,12 +49,17 @@ export function MessageInput({ onSend, disabled, placeholder = 'Type a message..
           onClick={handleSend}
           disabled={disabled || !value.trim()}
           className="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-600 text-white transition-colors hover:bg-indigo-700 disabled:opacity-50"
+          aria-label="Send message"
         >
-          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
             <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
           </svg>
         </button>
       </div>
+      <p className="mt-1 text-[11px] text-gray-400 dark:text-gray-500">
+        <kbd className="rounded border border-gray-300 px-1 py-0.5 text-[10px] dark:border-gray-600">Enter</kbd> to send,{' '}
+        <kbd className="rounded border border-gray-300 px-1 py-0.5 text-[10px] dark:border-gray-600">Shift+Enter</kbd> for new line
+      </p>
     </div>
   )
 }
diff --git a/src/renderer/features/conversation/StreamingIndicator.tsx b/src/renderer/features/conversation/StreamingIndicator.tsx
index 1448e03..5e72d6a 100644
--- a/src/renderer/features/conversation/StreamingIndicator.tsx
+++ b/src/renderer/features/conversation/StreamingIndicator.tsx
@@ -1,14 +1,14 @@
 export function StreamingIndicator() {
   return (
-    <div className="flex items-center gap-2 px-4 py-2">
+    <div className="flex items-center gap-2 px-4 py-2" role="status" aria-label="AI is generating a response">
       <div className="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900">
-        <div className="flex gap-1">
+        <div className="flex gap-1" aria-hidden="true">
           <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-indigo-600 dark:bg-indigo-300" style={{ animationDelay: '0ms' }} />
           <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-indigo-600 dark:bg-indigo-300" style={{ animationDelay: '150ms' }} />
           <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-indigo-600 dark:bg-indigo-300" style={{ animationDelay: '300ms' }} />
         </div>
       </div>
-      <span className="text-xs text-gray-400">Keystone is thinking...</span>
+      <span className="text-xs text-gray-500 dark:text-gray-400">Keystone is thinking...</span>
     </div>
   )
 }
diff --git a/src/renderer/features/conversation/ThreadList.tsx b/src/renderer/features/conversation/ThreadList.tsx
index 2f523af..9d42b52 100644
--- a/src/renderer/features/conversation/ThreadList.tsx
+++ b/src/renderer/features/conversation/ThreadList.tsx
@@ -1,3 +1,4 @@
+import { useState, useMemo } from 'react'
 import { ThreadListItem } from './ThreadListItem'
 import { Button } from '../../components/ui/Button'
 
@@ -16,24 +17,45 @@ interface ThreadListProps {
 }
 
 export function ThreadList({ threads, activeThreadId, onSelectThread, onNewThread }: ThreadListProps) {
+  const [searchQuery, setSearchQuery] = useState('')
   const activeThreads = threads.filter((t) => t.status === 'active')
 
+  const filteredThreads = useMemo(() => {
+    if (!searchQuery.trim()) return activeThreads
+    const query = searchQuery.toLowerCase()
+    return activeThreads.filter((t) => t.title.toLowerCase().includes(query))
+  }, [activeThreads, searchQuery])
+
   return (
     <div className="flex h-full flex-col">
       <div className="flex items-center justify-between border-b border-gray-200 px-3 py-2 dark:border-gray-700">
         <h3 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
           Threads
         </h3>
-        <Button variant="ghost" size="sm" onClick={onNewThread}>
+        <Button variant="ghost" size="sm" onClick={onNewThread} aria-label="Create new thread">
           + New
         </Button>
       </div>
+      {activeThreads.length > 3 && (
+        <div className="border-b border-gray-200 px-2 py-1.5 dark:border-gray-700">
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search threads..."
+            aria-label="Search threads"
+            className="w-full rounded-md border border-gray-200 bg-white px-2.5 py-1 text-xs placeholder:text-gray-400 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 dark:border-gray-600 dark:bg-gray-800 dark:placeholder:text-gray-500"
+          />
+        </div>
+      )}
       <div className="flex-1 overflow-y-auto p-2">
         {activeThreads.length === 0 ? (
           <p className="px-3 py-4 text-center text-xs text-gray-400">No threads yet</p>
+        ) : filteredThreads.length === 0 ? (
+          <p className="px-3 py-4 text-center text-xs text-gray-400">No matching threads</p>
         ) : (
           <div className="space-y-1">
-            {activeThreads.map((thread) => (
+            {filteredThreads.map((thread) => (
               <ThreadListItem
                 key={thread.id}
                 id={thread.id}
diff --git a/src/renderer/features/conversation/ThreadListItem.tsx b/src/renderer/features/conversation/ThreadListItem.tsx
index 58dd157..045ee9f 100644
--- a/src/renderer/features/conversation/ThreadListItem.tsx
+++ b/src/renderer/features/conversation/ThreadListItem.tsx
@@ -6,10 +6,26 @@ interface ThreadListItemProps {
   onClick: () => void
 }
 
-export function ThreadListItem({ title, isActive, onClick }: ThreadListItemProps) {
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr)
+  const now = new Date()
+  const diffMs = now.getTime() - date.getTime()
+  const diffMins = Math.floor(diffMs / 60000)
+  const diffHours = Math.floor(diffMs / 3600000)
+  const diffDays = Math.floor(diffMs / 86400000)
+
+  if (diffMins < 1) return 'just now'
+  if (diffMins < 60) return `${diffMins}m ago`
+  if (diffHours < 24) return `${diffHours}h ago`
+  if (diffDays < 7) return `${diffDays}d ago`
+  return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+}
+
+export function ThreadListItem({ title, isActive, updatedAt, onClick }: ThreadListItemProps) {
   return (
     <button
       onClick={onClick}
+      aria-current={isActive ? 'true' : undefined}
       className={`w-full rounded-md px-3 py-2 text-left text-sm transition-colors ${
         isActive
           ? 'bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
@@ -17,6 +33,11 @@ export function ThreadListItem({ title, isActive, onClick }: ThreadListItemProps
       }`}
     >
       <div className="truncate font-medium">{title}</div>
+      {updatedAt && (
+        <div className="mt-0.5 truncate text-xs text-gray-400 dark:text-gray-500">
+          {formatRelativeTime(updatedAt)}
+        </div>
+      )}
     </button>
   )
 }
diff --git a/src/renderer/features/document/ADRPromptDialog.tsx b/src/renderer/features/document/ADRPromptDialog.tsx
index 983487a..1037141 100644
--- a/src/renderer/features/document/ADRPromptDialog.tsx
+++ b/src/renderer/features/document/ADRPromptDialog.tsx
@@ -1,4 +1,5 @@
 import { Dialog } from '../../components/ui/Dialog'
+import { Button } from '../../components/ui/Button'
 
 interface ADRPromptDialogProps {
   open: boolean
@@ -30,18 +31,12 @@ export function ADRPromptDialog({
         </div>
 
         <div className="flex justify-end gap-2">
-          <button
-            onClick={onDismiss}
-            className="rounded-md px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
-          >
+          <Button variant="secondary" onClick={onDismiss}>
             Dismiss
-          </button>
-          <button
-            onClick={onCreateADR}
-            className="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700"
-          >
+          </Button>
+          <Button onClick={onCreateADR}>
             Create ADR
-          </button>
+          </Button>
         </div>
       </div>
     </Dialog>
diff --git a/src/renderer/features/document/DocumentOutline.tsx b/src/renderer/features/document/DocumentOutline.tsx
index 67ca6a7..00496c1 100644
--- a/src/renderer/features/document/DocumentOutline.tsx
+++ b/src/renderer/features/document/DocumentOutline.tsx
@@ -10,14 +10,14 @@ export function DocumentOutline({ content }: DocumentOutlineProps) {
   if (headings.length === 0) return null
 
   return (
-    <div className="border-l border-gray-200 p-3 dark:border-gray-700">
-      <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500">Outline</h4>
-      <nav className="space-y-1">
+    <div className="w-48 flex-shrink-0 border-l border-gray-200 p-3 dark:border-gray-700">
+      <h4 className="mb-2 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">Outline</h4>
+      <nav className="space-y-1" aria-label="Document outline">
         {headings.map((heading, i) => (
           <a
             key={i}
             href={`#${heading.id}`}
-            className="block truncate text-xs text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
+            className="block truncate text-xs text-gray-600 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
             style={{ paddingLeft: `${(heading.level - 1) * 12}px` }}
           >
             {heading.text}
diff --git a/src/renderer/features/document/DocumentTabs.tsx b/src/renderer/features/document/DocumentTabs.tsx
index 45594fe..ba0821c 100644
--- a/src/renderer/features/document/DocumentTabs.tsx
+++ b/src/renderer/features/document/DocumentTabs.tsx
@@ -10,18 +10,25 @@ export function DocumentTabs({ documents, activeDocumentId, onSelect }: Document
   if (documents.length === 0) return null
 
   return (
-    <div className="flex border-b border-gray-200 dark:border-gray-700">
+    <div className="flex overflow-x-auto border-b border-gray-200 dark:border-gray-700" role="tablist">
       {documents.map((doc) => (
         <button
           key={doc.id}
           onClick={() => onSelect(doc.id)}
-          className={`border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
+          role="tab"
+          aria-selected={doc.id === activeDocumentId}
+          className={`flex-shrink-0 border-b-2 px-4 py-2 text-sm font-medium transition-colors ${
             doc.id === activeDocumentId
               ? 'border-indigo-500 text-indigo-600 dark:text-indigo-400'
               : 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
           }`}
         >
-          {doc.type.toUpperCase()}
+          <span className="uppercase">{doc.type}</span>
+          {doc.title && (
+            <span className="ml-1.5 max-w-[120px] truncate text-xs font-normal opacity-70">
+              {doc.title}
+            </span>
+          )}
         </button>
       ))}
     </div>
diff --git a/src/renderer/features/document/SelectionToolbar.tsx b/src/renderer/features/document/SelectionToolbar.tsx
index bcd2e46..fae9612 100644
--- a/src/renderer/features/document/SelectionToolbar.tsx
+++ b/src/renderer/features/document/SelectionToolbar.tsx
@@ -1,3 +1,5 @@
+import { useRef, useEffect, useState } from 'react'
+
 interface SelectionToolbarProps {
   position: { top: number; left: number }
   onInquire: () => void
@@ -5,27 +7,55 @@ interface SelectionToolbarProps {
 }
 
 export function SelectionToolbar({ position, onInquire, onRefine }: SelectionToolbarProps) {
+  const toolbarRef = useRef<HTMLDivElement>(null)
+  const [clampedPos, setClampedPos] = useState(position)
+
+  useEffect(() => {
+    if (!toolbarRef.current) {
+      setClampedPos(position)
+      return
+    }
+    const el = toolbarRef.current
+    const parent = el.offsetParent as HTMLElement | null
+    if (!parent) {
+      setClampedPos(position)
+      return
+    }
+
+    const parentWidth = parent.clientWidth
+    const elWidth = el.offsetWidth
+    const clampedLeft = Math.max(4, Math.min(position.left, parentWidth - elWidth - 4))
+    const clampedTop = Math.max(4, position.top)
+
+    setClampedPos({ top: clampedTop, left: clampedLeft })
+  }, [position])
+
   return (
     <div
-      className="absolute z-40 flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-1 shadow-lg dark:border-gray-600 dark:bg-gray-800"
-      style={{ top: position.top, left: position.left }}
+      ref={toolbarRef}
+      className="absolute z-40 flex items-center gap-1 rounded-lg border border-gray-200 bg-white p-1 shadow-lg animate-fade-in dark:border-gray-600 dark:bg-gray-800"
+      style={{ top: clampedPos.top, left: clampedPos.left }}
+      role="toolbar"
+      aria-label="Text selection actions"
     >
       <button
         onClick={onInquire}
         className="flex items-center gap-1 rounded px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+        aria-label="Inquire about selected text"
       >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
           <circle cx="11" cy="11" r="8" />
           <path d="M21 21l-4.35-4.35" />
         </svg>
         Inquire
       </button>
-      <div className="h-5 w-px bg-gray-200 dark:bg-gray-600" />
+      <div className="h-5 w-px bg-gray-200 dark:bg-gray-600" aria-hidden="true" />
       <button
         onClick={onRefine}
         className="flex items-center gap-1 rounded px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+        aria-label="Refine selected text"
       >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
           <path d="M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
         </svg>
         Refine
diff --git a/src/renderer/features/settings/ProviderCard.tsx b/src/renderer/features/settings/ProviderCard.tsx
index df7cccc..dc2c76b 100644
--- a/src/renderer/features/settings/ProviderCard.tsx
+++ b/src/renderer/features/settings/ProviderCard.tsx
@@ -41,13 +41,15 @@ export function ProviderCard({ type, name, isActive, onSelect }: ProviderCardPro
         <input
           type="radio"
           name="provider"
+          id={`provider-${type}`}
           checked={isActive}
           onChange={onSelect}
           className="text-indigo-600"
+          aria-label={`Select ${name} as AI provider`}
         />
         <div className="flex-1">
           <div className="flex items-center gap-2">
-            <span className="text-sm font-medium">{name}</span>
+            <label htmlFor={`provider-${type}`} className="text-sm font-medium cursor-pointer">{name}</label>
             {isExperimental && (
               <span className="rounded bg-yellow-100 px-1.5 py-0.5 text-[10px] font-medium text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400">
                 Experimental
@@ -75,8 +77,9 @@ export function ProviderCard({ type, name, isActive, onSelect }: ProviderCardPro
                 }}
                 className="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-700 dark:hover:text-gray-300"
                 title="Disconnect"
+                aria-label={`Disconnect ${name}`}
               >
-                <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                <svg className="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} aria-hidden="true">
                   <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
                 </svg>
               </button>
diff --git a/src/renderer/features/settings/SettingsDialog.tsx b/src/renderer/features/settings/SettingsDialog.tsx
index 50f0288..3abceab 100644
--- a/src/renderer/features/settings/SettingsDialog.tsx
+++ b/src/renderer/features/settings/SettingsDialog.tsx
@@ -3,6 +3,7 @@ import { Dialog } from '../../components/ui/Dialog'
 import { Input } from '../../components/ui/Input'
 import { Button } from '../../components/ui/Button'
 import { useSettingsStore } from '../../stores/settingsStore'
+import { useUIStore } from '../../stores/uiStore'
 import { ProviderCard } from './ProviderCard'
 import type { ProviderType } from '@shared/types'
 
@@ -17,8 +18,16 @@ const providers: Array<{ type: ProviderType; name: string; placeholder: string }
   { type: 'google', name: 'Google (Gemini)', placeholder: 'AI...' },
 ]
 
+const themeOptions = [
+  { value: 'light' as const, label: 'Light' },
+  { value: 'dark' as const, label: 'Dark' },
+  { value: 'system' as const, label: 'System' },
+]
+
 export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   const { apiKeys, activeProvider, setApiKey, setActiveProvider, loadSettings } = useSettingsStore()
+  const theme = useUIStore((s) => s.theme)
+  const setTheme = useUIStore((s) => s.setTheme)
   const [showAdvanced, setShowAdvanced] = useState(false)
 
   useEffect(() => {
@@ -43,6 +52,27 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
   return (
     <Dialog open={open} onClose={onClose} title="Settings">
       <div className="space-y-5">
+        {/* Theme selector */}
+        <div>
+          <h3 className="mb-3 text-sm font-semibold">Appearance</h3>
+          <div className="flex gap-2">
+            {themeOptions.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => setTheme(opt.value)}
+                className={`rounded-lg border px-4 py-2 text-sm font-medium transition-colors ${
+                  theme === opt.value
+                    ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300'
+                    : 'border-gray-200 text-gray-600 hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:bg-gray-800'
+                }`}
+                aria-pressed={theme === opt.value}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+
         <div>
           <h3 className="mb-3 text-sm font-semibold">AI Providers</h3>
           <div className="space-y-2">
@@ -64,6 +94,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
             type="button"
             onClick={() => setShowAdvanced(!showAdvanced)}
             className="flex items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+            aria-expanded={showAdvanced}
           >
             <svg
               className={`h-3 w-3 transition-transform ${showAdvanced ? 'rotate-90' : ''}`}
@@ -71,6 +102,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
               viewBox="0 0 24 24"
               stroke="currentColor"
               strokeWidth={2}
+              aria-hidden="true"
             >
               <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
             </svg>
diff --git a/src/renderer/globals.css b/src/renderer/globals.css
index c55b037..54fef61 100644
--- a/src/renderer/globals.css
+++ b/src/renderer/globals.css
@@ -13,7 +13,7 @@
     -webkit-font-smoothing: antialiased;
   }
 
-  /* Hide scrollbar but keep functionality */
+  /* Scrollbar styling */
   ::-webkit-scrollbar {
     width: 8px;
     height: 8px;
@@ -32,3 +32,11 @@
     @apply bg-gray-400 dark:bg-gray-500;
   }
 }
+
+/* Keyboard shortcut hint styling */
+@layer components {
+  kbd {
+    font-family: inherit;
+    font-size: 0.7rem;
+  }
+}
diff --git a/src/renderer/hooks/useKeyboardShortcuts.ts b/src/renderer/hooks/useKeyboardShortcuts.ts
new file mode 100644
index 0000000..592045d
--- /dev/null
+++ b/src/renderer/hooks/useKeyboardShortcuts.ts
@@ -0,0 +1,45 @@
+import { useEffect } from 'react'
+import { useUIStore } from '../stores/uiStore'
+
+interface ShortcutHandlers {
+  onNewThread?: () => void
+  onOpenSettings?: () => void
+  onNewProject?: () => void
+}
+
+export function useKeyboardShortcuts({ onNewThread, onOpenSettings, onNewProject }: ShortcutHandlers) {
+  const toggleSidebar = useUIStore((s) => s.toggleSidebar)
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      const mod = e.metaKey || e.ctrlKey
+
+      // Cmd/Ctrl+B: Toggle sidebar
+      if (mod && e.key === 'b') {
+        e.preventDefault()
+        toggleSidebar()
+      }
+
+      // Cmd/Ctrl+N: New thread
+      if (mod && e.key === 'n' && !e.shiftKey) {
+        e.preventDefault()
+        onNewThread?.()
+      }
+
+      // Cmd/Ctrl+Shift+N: New project
+      if (mod && e.key === 'N' && e.shiftKey) {
+        e.preventDefault()
+        onNewProject?.()
+      }
+
+      // Cmd/Ctrl+,: Open settings
+      if (mod && e.key === ',') {
+        e.preventDefault()
+        onOpenSettings?.()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [toggleSidebar, onNewThread, onOpenSettings, onNewProject])
+}
diff --git a/src/renderer/stores/uiStore.ts b/src/renderer/stores/uiStore.ts
index 49d2edc..a12ecf0 100644
--- a/src/renderer/stores/uiStore.ts
+++ b/src/renderer/stores/uiStore.ts
@@ -1,14 +1,26 @@
 import { create } from 'zustand'
 
+type Theme = 'light' | 'dark' | 'system'
+
+function applyTheme(theme: Theme): void {
+  const root = document.documentElement
+  if (theme === 'system') {
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+    root.classList.toggle('dark', prefersDark)
+  } else {
+    root.classList.toggle('dark', theme === 'dark')
+  }
+}
+
 interface UIState {
   sidebarOpen: boolean
   panelRatio: number
   activeModal: string | null
-  theme: 'light' | 'dark' | 'system'
+  theme: Theme
   toggleSidebar: () => void
   setPanelRatio: (ratio: number) => void
   setActiveModal: (modal: string | null) => void
-  setTheme: (theme: 'light' | 'dark' | 'system') => void
+  setTheme: (theme: Theme) => void
 }
 
 export const useUIStore = create<UIState>((set) => ({
@@ -19,5 +31,19 @@ export const useUIStore = create<UIState>((set) => ({
   toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
   setPanelRatio: (ratio) => set({ panelRatio: ratio }),
   setActiveModal: (modal) => set({ activeModal: modal }),
-  setTheme: (theme) => set({ theme }),
+  setTheme: (theme) => {
+    applyTheme(theme)
+    set({ theme })
+  },
 }))
+
+// Apply initial theme on load
+applyTheme(useUIStore.getState().theme)
+
+// Listen for system theme changes when using 'system' mode
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+  const currentTheme = useUIStore.getState().theme
+  if (currentTheme === 'system') {
+    applyTheme('system')
+  }
+})
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 95263a2..a67495f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,7 +17,27 @@ const config: Config = {
         accent: {
           DEFAULT: '#6366f1',
           hover: '#4f46e5',
+          light: '#e0e7ff',
+          muted: '#818cf8',
         },
+        muted: {
+          DEFAULT: '#6b7280',
+          foreground: '#9ca3af',
+        },
+      },
+      keyframes: {
+        'slide-in-from-right': {
+          from: { transform: 'translateX(100%)', opacity: '0' },
+          to: { transform: 'translateX(0)', opacity: '1' },
+        },
+        'fade-in': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+      },
+      animation: {
+        'slide-in-from-right': 'slide-in-from-right 0.2s ease-out',
+        'fade-in': 'fade-in 0.15s ease-out',
       },
     },
   },