# Agent Switcher Feature ## Goal Add an agent switcher UI component that allows users to toggle between different OpenCode agents configured in their workspace. ## Research Findings ### OpenCode API Agent Support 1. **Agent List API**: `app.agents()` returns `Array` where `Agent` has: - `name: string` - agent identifier - `description?: string` - description of when to use the agent - `mode: "subagent" | "primary" | "all"` - determines if agent can be used as primary - `builtIn: boolean` - whether it's a built-in agent - `model?: { modelID, providerID }` - optional model override - `prompt?: string` - custom system prompt - `temperature, topP` - optional model parameters - `tools, permission, options` - configuration 2. **Session Prompt API**: `session.prompt()` accepts an `agent?: string` parameter in the body to specify which agent to use for that prompt. 3. **Config Structure**: Agents are defined in `opencode.json` under the `agents` key: ```json { "agents": { "general": { "description": "General purpose", "mode": "primary" }, "build": { "description": "Build focused", "mode": "primary" }, "plan": { "description": "Planning", "mode": "primary" } } } ``` ### Current UI Implementation 1. **Prompt Editor**: Located in `App.tsx` lines 327-351, rendered via `renderInput()` function 2. **Layout**: Currently uses absolute positioning for the submit button (`shortcut-button`) 3. **Styling**: Uses VSCode theme variables, blue focus outline, quiet button style 4. **Structure**: - `.input-container` - form wrapper with padding/border - `.textarea-wrapper` - relative positioned container - `.prompt-input` - textarea with auto-resize (36-120px) - `.shortcut-button` - ⌘⏎ button absolutely positioned bottom-right ## Implementation Spec ### 1. Backend Changes (OpenCodeService.ts) #### Add Agent Management ```typescript // New property to track available agents private agents: Agent[] = []; private selectedAgent: string | null = null; // New method to fetch agents async getAgents(): Promise { if (!this.opencode) { throw new Error('OpenCode not initialized'); } const result = await this.opencode.client.app.agents(); if (result.error) { throw new Error(`Failed to get agents: ${JSON.stringify(result.error)}`); } // Filter to only "primary" or "all" mode agents (not "subagent" only) this.agents = (result.data || []).filter( (agent) => agent.mode === 'primary' || agent.mode === 'all' ); return this.agents; } // Update prompt methods to include agent parameter async sendPrompt(text: string, sessionId?: string, agent?: string): Promise<...> async sendPromptStreaming( text: string, onEvent: (event: Event) => void, sessionId?: string, agent?: string ): Promise ``` #### Update Prompt Sending Modify both `sendPrompt` and `sendPromptStreaming` to include the agent parameter: ```typescript const result = await this.opencode.client.session.prompt({ path: { id: sid }, body: { model: { providerID, modelID }, parts: [{ type: 'text', text }], agent: agent || undefined, // Add agent if specified }, }); ``` ### 2. Backend Changes (OpenCodeViewProvider.ts) #### Handle New Messages Add handling for agent-related messages: - `getAgents` - request to fetch available agents - `setAgent` - update the selected agent ```typescript case 'getAgents': const agents = await this.openCodeService.getAgents(); this._view.webview.postMessage({ type: 'agentList', agents: agents }); break; case 'setAgent': // Just pass through - will be used when sending prompt break; ``` Update `sendPrompt` message handler to include agent: ```typescript case 'sendPrompt': await this.openCodeService.sendPromptStreaming( message.text, (event) => { /* ... */ }, undefined, message.agent // Pass selected agent ); break; ``` ### 3. Frontend Changes (App.tsx) #### Add State for Agents ```typescript const [agents, setAgents] = createSignal([]); const [selectedAgent, setSelectedAgent] = createSignal(null); interface Agent { name: string; description?: string; mode: "subagent" | "primary" | "all"; builtIn: boolean; } ``` #### Update Message Handlers Add handling for `agentList` message: ```typescript case 'agentList': setAgents(message.agents || []); // Select first agent by default if none selected if (!selectedAgent() && message.agents.length > 0) { setSelectedAgent(message.agents[0].name); } break; ``` Request agents on mount: ```typescript onMount(() => { // ... existing message handler setup ... // Request agent list vscode.postMessage({ type: 'getAgents' }); }); ``` #### Update Submit Handler Include selected agent when sending prompt: ```typescript const handleSubmit = (e: Event) => { e.preventDefault(); if (!input().trim() || isThinking()) return; vscode.postMessage({ type: 'sendPrompt', text: input(), agent: selectedAgent(), // Include selected agent }); setInput(""); }; ``` #### Update Input Rendering Modify `renderInput()` to include agent switcher: ```typescript const renderInput = () => (