Add task specifications for Phase 5 advanced input features

- 015-keyboard-shortcuts.md (completed)
- 020-command-palette.md (completed)
- 021-file-attachments.md (next: @mentions, drag-drop, chips)
- 022-long-paste-handling.md (summarize long pastes)
- 023-symbol-attachments.md (LSP integration)
- 024-agent-attachments.md (agent context)
- 025-image-clipboard-support.md (image handling)

tasks/todo/015-keyboard-shortcuts.md

@@ -0,0 +1,849 @@
+# Task 015: Keyboard Shortcuts
+
+## Goal
+
+Implement comprehensive keyboard shortcuts for efficient keyboard-first navigation, inspired by the TUI's keyboard system but adapted for desktop multi-instance/multi-session workflow.
+
+## Prerequisites
+
+- ✅ 001-013 completed
+- ✅ All core UI components built
+- ✅ Message stream, prompt input, tabs working
+
+## Decisions Made
+
+1. **Tab Navigation**: Use `Cmd/Ctrl+[/]` for instances, `Cmd/Ctrl+Shift+[/]` for sessions
+2. **Clear Input**: Use `Cmd/Ctrl+K` (common in Slack, Discord, VS Code)
+3. **Escape Behavior**: Context-dependent (blur when idle, interrupt when busy)
+4. **Message History**: Per-instance, stored in IndexedDB (embedded local database)
+5. **Agent Cycling**: Include Tab/Shift+Tab for agent cycling, add model selector focus shortcut
+6. **Leader Key**: Skip it - use standard Cmd/Ctrl patterns
+7. **Platform**: Cmd on macOS, Ctrl elsewhere (standard cross-platform pattern)
+8. **View Controls**: Not needed for MVP
+9. **Help Dialog**: Not needed - inline hints instead
+
+## Key Principles
+
+### Smart Inline Hints
+
+Instead of a help dialog, show shortcuts contextually:
+
+- Display hints next to actions they affect
+- Keep hints subtle (small text, muted color)
+- Use platform-specific symbols (⌘ on Mac, Ctrl elsewhere)
+- Examples already in app: "Enter to send • Shift+Enter for new line"
+
+### Modular Architecture
+
+Build shortcuts in a centralized, configurable system:
+
+- Single source of truth for all shortcuts
+- Easy to extend for future customization
+- Clear separation between shortcut definition and handler logic
+- Registry pattern for discoverability
+
+## Shortcuts to Implement
+
+### Navigation (Tabs)
+
+**Already Implemented:**
+
+- [x] `Cmd/Ctrl+1-9` - Switch to instance tab by index
+- [x] `Cmd/Ctrl+N` - New instance (select folder)
+- [x] `Cmd/Ctrl+T` - New session in active instance
+- [x] `Cmd/Ctrl+W` - Close active **parent** session (only)
+
+**To Implement:**
+
+- [ ] `Cmd/Ctrl+[` - Previous instance tab
+- [ ] `Cmd/Ctrl+]` - Next instance tab
+- [ ] `Cmd/Ctrl+Shift+[` - Previous session tab
+- [ ] `Cmd/Ctrl+Shift+]` - Next session tab
+- [ ] `Cmd/Ctrl+Shift+L` - Switch to Logs tab
+
+### Input Management
+
+**Already Implemented:**
+
+- [x] `Enter` - Send message
+- [x] `Shift+Enter` - New line
+
+**To Implement:**
+
+- [ ] `Cmd/Ctrl+K` - Clear input
+- [ ] `Cmd/Ctrl+L` - Focus prompt input
+- [ ] `Up Arrow` - Previous message in history (when at start of input)
+- [ ] `Down Arrow` - Next message in history (when in history mode)
+- [ ] `Escape` - Context-dependent:
+  - When idle: Blur input / close modals
+  - When busy: Interrupt session (requires confirmation)
+
+### Agent/Model Selection
+
+**To Implement:**
+
+- [ ] `Tab` - Cycle to next agent (when input empty or not focused)
+- [ ] `Shift+Tab` - Cycle to previous agent
+- [ ] `Cmd/Ctrl+M` - Focus model selector dropdown
+
+### Message Navigation
+
+**To Implement:**
+
+- [ ] `PgUp` - Scroll messages up
+- [ ] `PgDown` - Scroll messages down
+- [ ] `Home` - Jump to first message
+- [ ] `End` - Jump to last message
+
+## Architecture Design
+
+### 1. Centralized Keyboard Registry
+
+```typescript
+// src/lib/keyboard-registry.ts
+
+export interface KeyboardShortcut {
+  id: string
+  key: string
+  modifiers: {
+    ctrl?: boolean
+    meta?: boolean
+    shift?: boolean
+    alt?: boolean
+  }
+  handler: () => void
+  description: string
+  context?: "global" | "input" | "messages" // Where it works
+  condition?: () => boolean // Runtime condition check
+}
+
+class KeyboardRegistry {
+  private shortcuts = new Map<string, KeyboardShortcut>()
+
+  register(shortcut: KeyboardShortcut) {
+    this.shortcuts.set(shortcut.id, shortcut)
+  }
+
+  unregister(id: string) {
+    this.shortcuts.delete(id)
+  }
+
+  findMatch(event: KeyboardEvent): KeyboardShortcut | null {
+    for (const shortcut of this.shortcuts.values()) {
+      if (this.matches(event, shortcut)) {
+        // Check context
+        if (shortcut.context === "input" && !this.isInputFocused()) continue
+        if (shortcut.context === "messages" && this.isInputFocused()) continue
+
+        // Check runtime condition
+        if (shortcut.condition && !shortcut.condition()) continue
+
+        return shortcut
+      }
+    }
+    return null
+  }
+
+  private matches(event: KeyboardEvent, shortcut: KeyboardShortcut): boolean {
+    const keyMatch = event.key.toLowerCase() === shortcut.key.toLowerCase()
+    const ctrlMatch = event.ctrlKey === !!shortcut.modifiers.ctrl
+    const metaMatch = event.metaKey === !!shortcut.modifiers.meta
+    const shiftMatch = event.shiftKey === !!shortcut.modifiers.shift
+    const altMatch = event.altKey === !!shortcut.modifiers.alt
+
+    return keyMatch && ctrlMatch && metaMatch && shiftMatch && altMatch
+  }
+
+  private isInputFocused(): boolean {
+    const active = document.activeElement
+    return active?.tagName === "TEXTAREA" || active?.tagName === "INPUT" || active?.hasAttribute("contenteditable")
+  }
+
+  getByContext(context: string): KeyboardShortcut[] {
+    return Array.from(this.shortcuts.values()).filter((s) => !s.context || s.context === context)
+  }
+}
+
+export const keyboardRegistry = new KeyboardRegistry()
+```
+
+### 2. Cross-Platform Key Helper
+
+```typescript
+// src/lib/keyboard-utils.ts
+
+export const isMac = () => navigator.platform.includes("Mac")
+
+export const modKey = (event?: KeyboardEvent) => {
+  if (!event) return isMac() ? "metaKey" : "ctrlKey"
+  return isMac() ? event.metaKey : event.ctrlKey
+}
+
+export const modKeyPressed = (event: KeyboardEvent) => {
+  return isMac() ? event.metaKey : event.ctrlKey
+}
+
+export const formatShortcut = (shortcut: KeyboardShortcut): string => {
+  const parts: string[] = []
+
+  if (shortcut.modifiers.ctrl || shortcut.modifiers.meta) {
+    parts.push(isMac() ? "⌘" : "Ctrl")
+  }
+  if (shortcut.modifiers.shift) {
+    parts.push(isMac() ? "⇧" : "Shift")
+  }
+  if (shortcut.modifiers.alt) {
+    parts.push(isMac() ? "⌥" : "Alt")
+  }
+
+  parts.push(shortcut.key.toUpperCase())
+
+  return parts.join(isMac() ? "" : "+")
+}
+```
+
+### 3. IndexedDB Storage Layer
+
+```typescript
+// src/lib/db.ts
+
+const DB_NAME = "opencode-client"
+const DB_VERSION = 1
+const HISTORY_STORE = "message-history"
+
+let db: IDBDatabase | null = null
+
+async function getDB(): Promise<IDBDatabase> {
+  if (db) return db
+
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION)
+
+    request.onerror = () => reject(request.error)
+    request.onsuccess = () => {
+      db = request.result
+      resolve(db)
+    }
+
+    request.onupgradeneeded = (event) => {
+      const db = (event.target as IDBOpenDBRequest).result
+
+      // Create object stores
+      if (!db.objectStoreNames.contains(HISTORY_STORE)) {
+        db.createObjectStore(HISTORY_STORE)
+      }
+    }
+  })
+}
+
+export async function saveHistory(instanceId: string, history: string[]): Promise<void> {
+  const database = await getDB()
+  return new Promise((resolve, reject) => {
+    const tx = database.transaction(HISTORY_STORE, "readwrite")
+    const store = tx.objectStore(HISTORY_STORE)
+    const request = store.put(history, instanceId)
+
+    request.onerror = () => reject(request.error)
+    request.onsuccess = () => resolve()
+  })
+}
+
+export async function loadHistory(instanceId: string): Promise<string[]> {
+  try {
+    const database = await getDB()
+    return new Promise((resolve, reject) => {
+      const tx = database.transaction(HISTORY_STORE, "readonly")
+      const store = tx.objectStore(HISTORY_STORE)
+      const request = store.get(instanceId)
+
+      request.onerror = () => reject(request.error)
+      request.onsuccess = () => resolve(request.result || [])
+    })
+  } catch (error) {
+    console.warn("Failed to load history from IndexedDB:", error)
+    return []
+  }
+}
+
+export async function deleteHistory(instanceId: string): Promise<void> {
+  const database = await getDB()
+  return new Promise((resolve, reject) => {
+    const tx = database.transaction(HISTORY_STORE, "readwrite")
+    const store = tx.objectStore(HISTORY_STORE)
+    const request = store.delete(instanceId)
+
+    request.onerror = () => reject(request.error)
+    request.onsuccess = () => resolve()
+  })
+}
+```
+
+### 4. Message History Management
+
+Per-instance storage using IndexedDB (persists across app restarts):
+
+```typescript
+// src/stores/message-history.ts
+
+import { saveHistory, loadHistory, deleteHistory } from "../lib/db"
+
+const MAX_HISTORY = 100
+
+// In-memory cache
+const instanceHistories = new Map<string, string[]>()
+const historyLoaded = new Set<string>()
+
+export async function addToHistory(instanceId: string, text: string): Promise<void> {
+  // Ensure history is loaded
+  await ensureHistoryLoaded(instanceId)
+
+  const history = instanceHistories.get(instanceId) || []
+
+  // Add to front (newest first)
+  history.unshift(text)
+
+  // Limit to MAX_HISTORY
+  if (history.length > MAX_HISTORY) {
+    history.length = MAX_HISTORY
+  }
+
+  // Update cache and persist
+  instanceHistories.set(instanceId, history)
+
+  // Persist to IndexedDB (async, don't wait)
+  saveHistory(instanceId, history).catch((err) => {
+    console.warn("Failed to persist message history:", err)
+  })
+}
+
+export async function getHistory(instanceId: string): Promise<string[]> {
+  await ensureHistoryLoaded(instanceId)
+  return instanceHistories.get(instanceId) || []
+}
+
+export async function clearHistory(instanceId: string): Promise<void> {
+  // Manually clear history (not called on instance stop)
+  instanceHistories.delete(instanceId)
+  historyLoaded.delete(instanceId)
+  await deleteHistory(instanceId)
+}
+
+async function ensureHistoryLoaded(instanceId: string): Promise<void> {
+  if (historyLoaded.has(instanceId)) {
+    return
+  }
+
+  try {
+    const history = await loadHistory(instanceId)
+    instanceHistories.set(instanceId, history)
+    historyLoaded.add(instanceId)
+  } catch (error) {
+    console.warn("Failed to load history:", error)
+    instanceHistories.set(instanceId, [])
+    historyLoaded.add(instanceId)
+  }
+}
+```
+
+### 4. Inline Hint Component
+
+```typescript
+// src/components/keyboard-hint.tsx
+
+import { Component } from 'solid-js'
+import { formatShortcut, type KeyboardShortcut } from '../lib/keyboard-utils'
+
+const KeyboardHint: Component<{
+  shortcuts: KeyboardShortcut[]
+  separator?: string
+}> = (props) => {
+  return (
+    <span class="text-xs text-gray-500 dark:text-gray-400">
+      {props.shortcuts.map((shortcut, i) => (
+        <>
+          {i > 0 && <span class="mx-1">{props.separator || '•'}</span>}
+          <kbd class="font-mono">{formatShortcut(shortcut)}</kbd>
+          <span class="ml-1">{shortcut.description}</span>
+        </>
+      ))}
+    </span>
+  )
+}
+
+export default KeyboardHint
+```
+
+## Implementation Steps
+
+### Step 1: Create Keyboard Infrastructure
+
+1. Create `src/lib/keyboard-registry.ts` - Central registry
+2. Create `src/lib/keyboard-utils.ts` - Platform helpers
+3. Create `src/lib/db.ts` - IndexedDB storage layer
+4. Create `src/stores/message-history.ts` - History management
+5. Create `src/components/keyboard-hint.tsx` - Inline hints component
+
+### Step 2: Register Navigation Shortcuts
+
+```typescript
+// src/lib/shortcuts/navigation.ts
+
+import { keyboardRegistry } from "../keyboard-registry"
+import { instances, activeInstanceId, setActiveInstanceId } from "../../stores/instances"
+import { getSessions, activeSessionId, setActiveSession } from "../../stores/sessions"
+
+export function registerNavigationShortcuts() {
+  // Instance navigation
+  keyboardRegistry.register({
+    id: "instance-prev",
+    key: "[",
+    modifiers: { ctrl: true, meta: true },
+    handler: () => {
+      const ids = Array.from(instances().keys())
+      const current = ids.indexOf(activeInstanceId() || "")
+      const prev = current === 0 ? ids.length - 1 : current - 1
+      if (ids[prev]) setActiveInstanceId(ids[prev])
+    },
+    description: "previous instance",
+    context: "global",
+  })
+
+  keyboardRegistry.register({
+    id: "instance-next",
+    key: "]",
+    modifiers: { ctrl: true, meta: true },
+    handler: () => {
+      const ids = Array.from(instances().keys())
+      const current = ids.indexOf(activeInstanceId() || "")
+      const next = (current + 1) % ids.length
+      if (ids[next]) setActiveInstanceId(ids[next])
+    },
+    description: "next instance",
+    context: "global",
+  })
+
+  // Session navigation
+  keyboardRegistry.register({
+    id: "session-prev",
+    key: "[",
+    modifiers: { ctrl: true, meta: true, shift: true },
+    handler: () => {
+      const instanceId = activeInstanceId()
+      if (!instanceId) return
+
+      const sessions = getSessions(instanceId)
+      const ids = sessions.map((s) => s.id).concat(["logs"])
+      const current = ids.indexOf(activeSessionId().get(instanceId) || "")
+      const prev = current === 0 ? ids.length - 1 : current - 1
+      if (ids[prev]) setActiveSession(instanceId, ids[prev])
+    },
+    description: "previous session",
+    context: "global",
+  })
+
+  keyboardRegistry.register({
+    id: "session-next",
+    key: "]",
+    modifiers: { ctrl: true, meta: true, shift: true },
+    handler: () => {
+      const instanceId = activeInstanceId()
+      if (!instanceId) return
+
+      const sessions = getSessions(instanceId)
+      const ids = sessions.map((s) => s.id).concat(["logs"])
+      const current = ids.indexOf(activeSessionId().get(instanceId) || "")
+      const next = (current + 1) % ids.length
+      if (ids[next]) setActiveSession(instanceId, ids[next])
+    },
+    description: "next session",
+    context: "global",
+  })
+
+  // Logs tab
+  keyboardRegistry.register({
+    id: "switch-to-logs",
+    key: "l",
+    modifiers: { ctrl: true, meta: true, shift: true },
+    handler: () => {
+      const instanceId = activeInstanceId()
+      if (instanceId) setActiveSession(instanceId, "logs")
+    },
+    description: "logs tab",
+    context: "global",
+  })
+}
+```
+
+### Step 3: Register Input Shortcuts
+
+```typescript
+// src/lib/shortcuts/input.ts
+
+export function registerInputShortcuts(clearInput: () => void, focusInput: () => void) {
+  keyboardRegistry.register({
+    id: "clear-input",
+    key: "k",
+    modifiers: { ctrl: true, meta: true },
+    handler: clearInput,
+    description: "clear input",
+    context: "global",
+  })
+
+  keyboardRegistry.register({
+    id: "focus-input",
+    key: "l",
+    modifiers: { ctrl: true, meta: true },
+    handler: focusInput,
+    description: "focus input",
+    context: "global",
+  })
+}
+```
+
+### Step 4: Update PromptInput with History Navigation
+
+```typescript
+// src/components/prompt-input.tsx
+
+import { createSignal, onMount } from 'solid-js'
+import { addToHistory, getHistory } from '../stores/message-history'
+
+const PromptInput: Component<Props> = (props) => {
+  const [input, setInput] = createSignal('')
+  const [historyIndex, setHistoryIndex] = createSignal(-1)
+  const [history, setHistory] = createSignal<string[]>([])
+
+  let textareaRef: HTMLTextAreaElement | undefined
+
+  // Load history on mount
+  onMount(async () => {
+    const loaded = await getHistory(props.instanceId)
+    setHistory(loaded)
+  })
+
+  async function handleKeyDown(e: KeyboardEvent) {
+    const textarea = textareaRef
+    if (!textarea) return
+
+    const atStart = textarea.selectionStart === 0
+    const currentHistory = history()
+
+    // Up arrow - navigate to older message
+    if (e.key === 'ArrowUp' && atStart && currentHistory.length > 0) {
+      e.preventDefault()
+      const newIndex = Math.min(historyIndex() + 1, currentHistory.length - 1)
+      setHistoryIndex(newIndex)
+      setInput(currentHistory[newIndex])
+    }
+
+    // Down arrow - navigate to newer message
+    if (e.key === 'ArrowDown' && historyIndex() >= 0) {
+      e.preventDefault()
+      const newIndex = historyIndex() - 1
+      if (newIndex >= 0) {
+        setHistoryIndex(newIndex)
+        setInput(currentHistory[newIndex])
+      } else {
+        setHistoryIndex(-1)
+        setInput('')
+      }
+    }
+  }
+
+  async function handleSend() {
+    const text = input().trim()
+    if (!text) return
+
+    // Add to history (async, per instance)
+    await addToHistory(props.instanceId, text)
+
+    // Reload history for next navigation
+    const updated = await getHistory(props.instanceId)
+    setHistory(updated)
+    setHistoryIndex(-1)
+
+    await props.onSend(text)
+    setInput('')
+  }
+
+  return (
+    <div class="prompt-input">
+      <textarea
+        ref={textareaRef}
+        value={input()}
+        onInput={(e) => setInput(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Type your message..."
+      />
+
+      <KeyboardHint shortcuts={[
+        { description: 'to send', key: 'Enter', modifiers: {} },
+        { description: 'for new line', key: 'Enter', modifiers: { shift: true } }
+      ]} />
+    </div>
+  )
+}
+```
+
+### Step 5: Agent Cycling
+
+```typescript
+// src/lib/shortcuts/agent.ts
+
+export function registerAgentShortcuts(
+  cycleAgent: () => void,
+  cycleAgentReverse: () => void,
+  focusModelSelector: () => void,
+) {
+  keyboardRegistry.register({
+    id: "agent-next",
+    key: "Tab",
+    modifiers: {},
+    handler: cycleAgent,
+    description: "next agent",
+    context: "global",
+    condition: () => !isInputFocused(), // Only when not typing
+  })
+
+  keyboardRegistry.register({
+    id: "agent-prev",
+    key: "Tab",
+    modifiers: { shift: true },
+    handler: cycleAgentReverse,
+    description: "previous agent",
+    context: "global",
+    condition: () => !isInputFocused(),
+  })
+
+  keyboardRegistry.register({
+    id: "focus-model",
+    key: "m",
+    modifiers: { ctrl: true, meta: true },
+    handler: focusModelSelector,
+    description: "focus model",
+    context: "global",
+  })
+}
+```
+
+### Step 6: Escape Key Context Handling
+
+```typescript
+// src/lib/shortcuts/escape.ts
+
+export function registerEscapeShortcut(
+  isSessionBusy: () => boolean,
+  interruptSession: () => void,
+  blurInput: () => void,
+  closeModal: () => void,
+) {
+  keyboardRegistry.register({
+    id: "escape",
+    key: "Escape",
+    modifiers: {},
+    handler: () => {
+      // Priority 1: Close modal if open
+      if (hasOpenModal()) {
+        closeModal()
+        return
+      }
+
+      // Priority 2: Interrupt if session is busy
+      if (isSessionBusy()) {
+        interruptSession()
+        return
+      }
+
+      // Priority 3: Blur input
+      blurInput()
+    },
+    description: "cancel/close",
+    context: "global",
+  })
+}
+```
+
+### Step 7: Setup Global Listener in App
+
+```typescript
+// src/App.tsx
+
+import { registerNavigationShortcuts } from "./lib/shortcuts/navigation"
+import { registerInputShortcuts } from "./lib/shortcuts/input"
+import { registerAgentShortcuts } from "./lib/shortcuts/agent"
+import { registerEscapeShortcut } from "./lib/shortcuts/escape"
+import { keyboardRegistry } from "./lib/keyboard-registry"
+
+onMount(() => {
+  // Register all shortcuts
+  registerNavigationShortcuts()
+  registerInputShortcuts(
+    () => setInput(""),
+    () => document.querySelector("textarea")?.focus(),
+  )
+  registerAgentShortcuts(handleCycleAgent, handleCycleAgentReverse, () =>
+    document.querySelector("[data-model-selector]")?.focus(),
+  )
+  registerEscapeShortcut(
+    () => activeInstance()?.status === "streaming",
+    handleInterrupt,
+    () => document.activeElement?.blur(),
+    hideModal,
+  )
+
+  // Global keydown handler
+  const handleKeyDown = (e: KeyboardEvent) => {
+    const shortcut = keyboardRegistry.findMatch(e)
+    if (shortcut) {
+      e.preventDefault()
+      shortcut.handler()
+    }
+  }
+
+  window.addEventListener("keydown", handleKeyDown)
+
+  onCleanup(() => {
+    window.removeEventListener("keydown", handleKeyDown)
+  })
+})
+```
+
+### Step 8: Add Inline Hints Throughout UI
+
+**In PromptInput:**
+
+```tsx
+<KeyboardHint
+  shortcuts={[getShortcut("enter-to-send"), getShortcut("shift-enter-newline"), getShortcut("cmd-k-clear")]}
+/>
+```
+
+**In Instance Tabs:**
+
+```tsx
+<KeyboardHint shortcuts={[getShortcut("cmd-1-9"), getShortcut("cmd-brackets")]} />
+```
+
+**In Agent Selector:**
+
+```tsx
+<KeyboardHint shortcuts={[getShortcut("tab-cycle")]} />
+```
+
+## Where to Show Hints
+
+1. **Prompt Input Area** (bottom)
+   - Enter/Shift+Enter (already shown)
+   - Add: Cmd+K to clear, ↑↓ for history
+
+2. **Instance Tabs** (subtle tooltip or header)
+   - Cmd+1-9, Cmd+[/]
+
+3. **Session Tabs** (same as instance)
+   - Cmd+Shift+[/]
+
+4. **Agent/Model Selectors** (placeholder or label)
+   - Tab/Shift+Tab, Cmd+M
+
+5. **Empty State** (when no messages)
+   - Common shortcuts overview
+
+## Testing Checklist
+
+### Navigation
+
+- [ ] Cmd/Ctrl+[ / ] cycles instance tabs
+- [ ] Cmd/Ctrl+Shift+[ / ] cycles session tabs
+- [ ] Cmd/Ctrl+1-9 jumps to instance
+- [ ] Cmd/Ctrl+T creates new session
+- [ ] Cmd/Ctrl+W closes parent session only
+- [ ] Cmd/Ctrl+Shift+L switches to logs
+
+### Input
+
+- [ ] Cmd/Ctrl+K clears input
+- [ ] Cmd/Ctrl+L focuses input
+- [ ] Up arrow loads previous message (when at start)
+- [ ] Down arrow navigates forward in history
+- [ ] History is per-instance
+- [ ] History persists in IndexedDB across app restarts
+- [ ] History limited to 100 entries (not 50)
+- [ ] History loads on component mount
+- [ ] History NOT cleared when instance stops
+
+### Agent/Model
+
+- [ ] Tab cycles agents (when not in input)
+- [ ] Shift+Tab cycles agents backward
+- [ ] Cmd/Ctrl+M focuses model selector
+
+### Context Behavior
+
+- [ ] Escape closes modals first
+- [ ] Escape interrupts when busy
+- [ ] Escape blurs input when idle
+- [ ] Shortcuts don't fire in wrong context
+
+### Cross-Platform
+
+- [ ] Works with Cmd on macOS
+- [ ] Works with Ctrl on Windows
+- [ ] Works with Ctrl on Linux
+- [ ] Hints show correct keys per platform
+
+### Inline Hints
+
+- [ ] Hints visible but not intrusive
+- [ ] Correct platform symbols shown
+- [ ] Hints appear in relevant locations
+- [ ] No excessive screen space used
+
+## Dependencies
+
+**Requires:**
+
+- Tasks 001-013 completed
+
+**Blocks:**
+
+- None (final MVP task)
+
+## Estimated Time
+
+4-5 hours
+
+## Success Criteria
+
+✅ Task complete when:
+
+- All shortcuts implemented and working
+- Message history per-instance, persisted in IndexedDB
+- History stores 100 most recent prompts
+- History persists across app restarts and instance stops
+- Agent cycling with Tab/Shift+Tab
+- Context-aware Escape behavior
+- Inline hints shown throughout UI
+- Cross-platform (Cmd/Ctrl) working
+- Modular registry system for future customization
+- Can navigate entire app efficiently with keyboard
+
+## Notes on History Storage
+
+**Why per-instance (folder path)?**
+
+- User opens same project folder multiple times → same history
+- More intuitive: history tied to project, not ephemeral instance
+- Survives instance restarts without losing context
+
+**Why 100 entries?**
+
+- More generous than TUI's 50
+- ~20KB per instance (100 × ~200 chars)
+- Plenty for typical usage patterns
+- Can increase later if needed
+
+**Cleanup Strategy:**
+
+- No automatic cleanup (history persists indefinitely)
+- Could add manual "Clear History" option in future
+- IndexedDB handles storage efficiently

tasks/todo/020-command-palette.md

@@ -0,0 +1,217 @@
+---
+title: Command Palette
+description: Implement VSCode-style command palette with Cmd+Shift+P
+---
+
+# Implement Command Palette
+
+Build a VSCode-style command palette that opens as a centered modal dialog.
+
+---
+
+## Requirements
+
+### Visual Design
+
+- **Trigger**: Keyboard shortcut `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux)
+- **Appearance**: Modal dialog centered on screen with backdrop overlay
+- **Size**: ~600px wide, auto height with max height
+- **Components**:
+  - Search/filter input at top
+  - Scrollable list of commands below
+  - Each command shows: name, description, keyboard shortcut (if any)
+
+### Behavior
+
+- Opens on `Cmd+Shift+P`
+- Closes on `Escape` or clicking outside
+- Search input is auto-focused when opened
+- Filter commands as user types (fuzzy search preferred)
+- Arrow keys navigate through filtered list
+- Enter executes selected command
+- Mouse click on command also executes it
+- Closes automatically after command execution
+
+---
+
+## Commands to Include
+
+### Essential Commands (MVP)
+
+1. **Initialize AGENTS.md** (`/init`)
+   - Description: "Create or update AGENTS.md file"
+   - Action: Call `client.session.init()`
+
+2. **Compact Session** (`/compact`)
+   - Description: "Summarize and compact the current session"
+   - Action: Call `client.session.summarize()`
+
+3. **Undo Last Message** (`/undo`)
+   - Description: "Revert the last message"
+   - Action: Call `client.session.revert()`
+
+4. **Toggle Thinking Blocks** (`/thinking`)
+   - Description: "Show/hide AI thinking process"
+   - Action: Toggle UI state (placeholder for now)
+
+5. **Show Help** (`/help`)
+   - Description: "Display keyboard shortcuts and help"
+   - Action: Open help modal (placeholder for now)
+
+### Navigation Commands (Trigger Existing Shortcuts)
+
+6. **New Session**
+   - Description: "Create a new session"
+   - Shortcut: `Cmd+Shift+N`
+   - Action: Trigger existing `new-session` keyboard shortcut
+
+7. **Open Model Selector**
+   - Description: "Choose a different model"
+   - Shortcut: `Cmd+P`
+   - Action: Focus model selector input
+
+8. **Open Agent Selector**
+   - Description: "Choose a different agent"
+   - Action: Click agent selector to open dropdown
+
+---
+
+## Implementation Details
+
+### File Structure
+
+```
+src/
+  components/
+    command-palette.tsx          # Main command palette component
+  lib/
+    commands.ts                  # Command registry and definitions
+  stores/
+    command-palette.ts           # State for showing/hiding palette
+```
+
+### Command Registry Structure
+
+```typescript
+interface Command {
+  id: string
+  label: string
+  description: string
+  keywords?: string[] // For fuzzy search
+  shortcut?: KeyboardShortcut
+  action: () => void | Promise<void>
+  category?: string // Group commands by category
+}
+```
+
+### Integration Points
+
+1. **Register global keyboard shortcut** in App.tsx:
+
+   ```typescript
+   keyboardRegistry.register({
+     id: "command-palette",
+     key: "p",
+     modifiers: { meta: true, shift: true },
+     handler: () => setShowCommandPalette(true),
+   })
+   ```
+
+2. **Pass necessary props** to command palette:
+   - Current instance ID
+   - Current session ID
+   - SDK client reference
+   - Handler functions for UI actions
+
+3. **Execute commands** based on type:
+   - API calls: Use SDK client
+   - UI actions: Call selector focus/click
+   - Shortcuts: Trigger registered keyboard shortcuts
+
+---
+
+## UI Component Details
+
+### Layout
+
+```
+┌──────────────────────────────────────────────────────┐
+│                   Command Palette                     │
+├──────────────────────────────────────────────────────┤
+│  🔍 Type a command or search...                      │
+├──────────────────────────────────────────────────────┤
+│  › Initialize AGENTS.md                              │
+│    Create or update AGENTS.md file                   │
+│                                                       │
+│    Compact Session                                   │
+│    Summarize and compact the current session         │
+│                                                       │
+│    New Session                            ⌘⇧N        │
+│    Create a new session                              │
+│                                                       │
+│    Open Model Selector                    ⌘P         │
+│    Choose a different model                          │
+└──────────────────────────────────────────────────────┘
+```
+
+### Styling
+
+- Use Kobalte Dialog for modal foundation
+- Dark/light mode support matching app theme
+- Highlight selected command with blue background
+- Show keyboard shortcuts right-aligned in gray
+- Smooth animations for open/close
+
+### Keyboard Navigation
+
+- `Cmd+Shift+P`: Open palette
+- `Escape`: Close palette
+- `ArrowUp`: Previous command
+- `ArrowDown`: Next command
+- `Enter`: Execute selected command
+- Type to filter
+
+---
+
+## Acceptance Criteria
+
+- [ ] Palette opens with `Cmd+Shift+P`
+- [ ] Search input is auto-focused
+- [ ] All 8 commands are listed
+- [ ] Typing filters commands (case-insensitive substring match)
+- [ ] Arrow keys navigate through list
+- [ ] Enter executes selected command
+- [ ] Click executes command
+- [ ] Escape or click outside closes palette
+- [ ] Palette closes after command execution
+- [ ] Keyboard shortcuts display correctly (⌘⇧N, ⌘P, etc.)
+- [ ] Commands execute their intended actions:
+  - `/init` calls API
+  - `/compact` calls API
+  - `/undo` calls API
+  - New Session creates a session
+  - Model/Agent selectors open
+- [ ] Works in both light and dark mode
+- [ ] Smooth open/close animations
+
+---
+
+## Future Enhancements (Post-MVP)
+
+- Fuzzy search algorithm (not just substring)
+- Command history (recently used commands first)
+- Command categories/grouping
+- Custom user-defined commands
+- Command arguments/parameters
+- Command aliases
+- Search by keyboard shortcut
+- Quick switch between sessions/instances
+
+---
+
+## Notes
+
+- This replaces the slash command (`/command`) approach
+- Command palette is more discoverable and flexible
+- Provides a foundation for adding more commands in the future
+- Similar to VSCode Cmd+Shift+P, Sublime Text Cmd+Shift+P, etc.

tasks/todo/021-file-attachments.md

@@ -0,0 +1,40 @@
+---
+title: File Attachments
+description: Add @mentions, drag & drop, and chips for files.
+---
+
+Implement File Attachments
+
+---
+
+### Implement @ Mentions
+
+When a user types `@` in the input field, display a file picker with search functionality.
+
+Allow users to select files to attach to their prompt.
+
+---
+
+### Visual Attachment Chips
+
+Display attached files as interactive chips above the input area.
+
+Chips should include a filename and a removable "x" button.
+
+---
+
+### Drag and Drop Files
+
+Enable dragging files from the operating system directly onto the input area.
+
+Automatically create an attachment chip for dropped files.
+
+---
+
+### Acceptance Criteria
+
+- Typing `@` brings up a file selection autocomplete.
+- Files can be selected and appear as chips.
+- Users can drag and drop files onto the input, creating chips.
+- Attached files are included in the prompt submission.
+- Attachment chips can be removed by clicking "x".

tasks/todo/022-long-paste-handling.md

@@ -0,0 +1,29 @@
+---
+title: Long Paste Handling
+description: Summarize large pasted text into attachments.
+---
+
+Implement Long Paste Handling
+
+---
+
+### Detect Long Pastes
+
+Monitor clipboard paste events for text content. Identify if the pasted text exceeds a defined length (e.g., >150 characters or >3 lines).
+
+---
+
+### Create Summarized Attachments
+
+If a paste is identified as "long", prevent direct insertion into the input field. Instead, create a new text attachment containing the full content.
+
+Display a summarized chip for the attachment, such as `[pasted #1 10+ lines]`.
+
+---
+
+### Acceptance Criteria
+
+- Pasting short text directly inserts it into the input.
+- Pasting long text creates a summarized attachment chip.
+- The full content of the long paste is retained within the attachment for submission.
+- Multiple long pastes create distinct numbered chips.

tasks/todo/023-symbol-attachments.md

@@ -0,0 +1,37 @@
+---
+title: Symbol Attachments
+description: Attach code symbols with LSP integration.
+---
+
+Implement Symbol Attachments
+
+---
+
+### LSP Integration
+
+Integrate with the Language Server Protocol (LSP) to get a list of symbols in the current project.
+
+---
+
+### @ Symbol Autocomplete
+
+When a user types `@` followed by a symbol-like pattern, trigger an autocomplete with relevant code symbols.
+
+Include symbols from various file types supported by LSP.
+
+---
+
+### Attach and Navigate Symbols
+
+Allow users to select a symbol from the autocomplete list to attach it to the prompt.
+
+Display attached symbols as interactive chips. Optionally, implement functionality to jump to the symbol definition in an editor.
+
+---
+
+### Acceptance Criteria
+
+- Typing `@` followed by a partial symbol name displays matching symbol suggestions.
+- Selecting a symbol creates an attachment chip.
+- Attached symbols are correctly formatted for submission.
+- (Optional) Clicking a symbol chip navigates to its definition.

tasks/todo/024-agent-attachments.md

@@ -0,0 +1,31 @@
+---
+title: Agent Attachments
+description: Allow @agent mentions for multi-agent conversations.
+---
+
+Implement Agent Attachments
+
+---
+
+### @ Agent Autocomplete
+
+When a user types `@` followed by an agent name, display an autocomplete list of available agents.
+
+Filter agent suggestions as the user types.
+
+---
+
+### Attach Agents
+
+Enable users to select an agent from the autocomplete list to attach to their prompt.
+
+Display attached agents as interactive chips.
+
+---
+
+### Acceptance Criteria
+
+- Typing `@` followed by a partial agent name displays matching agent suggestions.
+- Selecting an agent creates an attachment chip.
+- Attached agents are included in the prompt submission.
+- Agent chips can be removed.

tasks/todo/025-image-clipboard-support.md

@@ -0,0 +1,31 @@
+---
+title: Image Clipboard
+description: Support pasting images from the clipboard.
+---
+
+Implement Image Clipboard Support
+
+---
+
+### Detect Image Paste
+
+Detect when image data is present in the system clipboard during a paste event.
+
+Prioritize image data over text data if both are present.
+
+---
+
+### Create Image Attachment
+
+Automatically create an image attachment from the pasted image data. Convert the image to a base64 encoded format for internal handling and submission.
+
+Display the image attachment as a chip in the input area.
+
+---
+
+### Acceptance Criteria
+
+- Pasting an image from the clipboard creates an image attachment chip.
+- The image data is base64 encoded and associated with the attachment.
+- The attachment chip has a suitable display name (e.g., `[Image #1]`).
+- Users can clear the image attachment.