From 0908b52fc2ff836d52a2ba6aff95aedf5e2047be Mon Sep 17 00:00:00 2001
From: Jiayuan <forrestchang7@gmail.com>
Date: Thu, 15 Jan 2026 13:22:57 +0800
Subject: [PATCH] docs: Add chatbox agent selector design

Design for inline agent switcher in MessageInput that allows
switching the current session's agent mid-conversation.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 ...026-01-15-chatbox-agent-selector-design.md | 79 +++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 docs/plans/2026-01-15-chatbox-agent-selector-design.md

diff --git a/docs/plans/2026-01-15-chatbox-agent-selector-design.md b/docs/plans/2026-01-15-chatbox-agent-selector-design.md
new file mode 100644
index 000000000..535a93a29
--- /dev/null
+++ b/docs/plans/2026-01-15-chatbox-agent-selector-design.md
@@ -0,0 +1,79 @@
+# Chatbox Agent Selector Design
+
+## Overview
+
+Add an inline agent selector to the MessageInput chatbox, allowing users to switch the current session's agent mid-conversation.
+
+## Behavior
+
+- **Scope**: Changes the current session's agent (restarts agent process)
+- **Disabled during**: Active processing only (users can switch when agent is idle)
+- **No session**: Changes default agent for next session (syncs with localStorage)
+
+## UI Design
+
+### Trigger Button
+
+- Position: Bottom-left of MessageInput, left of folder indicator
+- Layout: `[Sparkles icon] [Agent name] [ChevronDown icon]`
+- Style: Ghost button (transparent bg, subtle hover)
+- Text: `text-sm text-muted-foreground`
+- Icons: 14px, muted color
+
+### Dropdown Menu
+
+- Type: Radix UI DropdownMenu
+- Position: Above trigger (`side="top"`)
+- Width: Auto, min-width matches trigger
+
+### Dropdown Items
+
+- Layout: `[Agent name] [status dot]`
+- Status dot: 8px circle
+  - Green (`bg-green-500`): Installed
+  - Grey (`bg-muted`): Needs setup
+- Disabled items: Reduced opacity, tooltip explaining setup needed
+- Selected item: Highlighted background
+
+## Component Structure
+
+### New Component: `AgentSelector.tsx`
+
+```typescript
+interface AgentSelectorProps {
+  currentAgentId: string
+  onAgentChange: (agentId: string) => void
+  disabled?: boolean
+}
+```
+
+### Integration
+
+Add to MessageInput.tsx in the bottom toolbar, positioned left of folder indicator.
+
+## Data Flow
+
+1. Fetch agents via `window.electronAPI.checkAgents()` on mount
+2. Store in local component state
+3. On agent change:
+   - Call `onAgentChange(newAgentId)`
+   - Parent stops current agent process
+   - Parent updates session's agentId
+   - Parent starts new agent process (same working directory)
+   - Show toast: "Switched to [Agent Name]"
+
+## Edge Cases
+
+| Scenario | Behavior |
+|----------|----------|
+| No session active | Changes default agent for next session |
+| Agent switch fails | Error toast, revert to previous agent |
+| All agents unavailable | Disabled selector with tooltip |
+| Loading agents | Show spinner instead of chevron |
+
+## Files to Modify
+
+1. **Create**: `src/renderer/src/components/AgentSelector.tsx`
+2. **Modify**: `src/renderer/src/components/MessageInput.tsx` - Add AgentSelector to bottom toolbar
+3. **Modify**: `src/renderer/src/hooks/useApp.ts` - Add `switchAgent` function
+4. **Modify**: `src/renderer/src/App.tsx` - Wire up agent switching to session management