thepopebot 1.2.76-beta.4 → 1.2.76-beta.5

package/bin/cli.js

@@ -305,6 +305,38 @@ async function init() {
     console.log('  Created .claude/skills → ../skills/active');
   }
 
+  // Create .codex/skills → ../skills/active symlink
+  const codexSkillsLink = path.join(cwd, '.codex', 'skills');
+  if (!fs.existsSync(codexSkillsLink)) {
+    fs.mkdirSync(path.dirname(codexSkillsLink), { recursive: true });
+    createDirLink('../skills/active', codexSkillsLink);
+    console.log('  Created .codex/skills → ../skills/active');
+  }
+
+  // Create .gemini/skills → ../skills/active symlink
+  const geminiSkillsLink = path.join(cwd, '.gemini', 'skills');
+  if (!fs.existsSync(geminiSkillsLink)) {
+    fs.mkdirSync(path.dirname(geminiSkillsLink), { recursive: true });
+    createDirLink('../skills/active', geminiSkillsLink);
+    console.log('  Created .gemini/skills → ../skills/active');
+  }
+
+  // Create .kimi/skills → ../skills/active symlink
+  const kimiSkillsLink = path.join(cwd, '.kimi', 'skills');
+  if (!fs.existsSync(kimiSkillsLink)) {
+    fs.mkdirSync(path.dirname(kimiSkillsLink), { recursive: true });
+    createDirLink('../skills/active', kimiSkillsLink);
+    console.log('  Created .kimi/skills → ../skills/active');
+  }
+
+  // Create .agents/skills → ../skills/active symlink
+  const agentsSkillsLink = path.join(cwd, '.agents', 'skills');
+  if (!fs.existsSync(agentsSkillsLink)) {
+    fs.mkdirSync(path.dirname(agentsSkillsLink), { recursive: true });
+    createDirLink('../skills/active', agentsSkillsLink);
+    console.log('  Created .agents/skills → ../skills/active');
+  }
+
   // Report backed-up files
   if (backedUp.length > 0) {
     console.log(`\n  Backed up ${backedUp.length} file(s) to ${path.relative(cwd, backupDir)}/`);

package/drizzle/0021_coding_agent_workspace.sql

@@ -0,0 +1 @@
+ALTER TABLE `code_workspaces` ADD `coding_agent` text;

package/drizzle/meta/_journal.json

@@ -148,6 +148,13 @@
       "when": 1774327178886,
       "tag": "0020_natural_fabian_cortez",
       "breakpoints": true
+    },
+    {
+      "idx": 21,
+      "version": "6",
+      "when": 1775865600000,
+      "tag": "0021_coding_agent_workspace",
+      "breakpoints": true
     }
   ]
 }

package/lib/ai/index.js

@@ -185,7 +185,7 @@ async function* chatStream(threadId, message, attachments = [], options = {}) {
       await ensureWorkspaceRepo({ workspaceDir: repoDir, repo, branch, featureBranch });
       ensureSkills(repoDir, isCodeMode ? 'code' : 'agent');
       if (needsSetup) {
-        const result = JSON.stringify({ result: `Workspace ready on ${featureBranch || branch}` });
+        const result = `Workspace ready on ${featureBranch || branch}`;
         yield { type: 'tool-result', toolCallId: setupToolCallId, result };
         persistMessage(threadId, 'assistant', JSON.stringify({
           type: 'tool-invocation',
@@ -198,7 +198,7 @@ async function* chatStream(threadId, message, attachments = [], options = {}) {
       }
     } catch (err) {
       if (needsSetup) {
-        yield { type: 'tool-result', toolCallId: setupToolCallId, result: JSON.stringify({ result: `Setup failed: ${err.message}` }) };
+        yield { type: 'tool-result', toolCallId: setupToolCallId, result: `Setup failed: ${err.message}` };
       }
       throw err;
     }

package/lib/ai/sdk-adapters/claude-code.js

@@ -98,6 +98,7 @@ export async function* claudeCodeStream({ prompt, workspaceDir, systemPrompt, se
     cwd: workspaceDir,
     env,
     includePartialMessages: true,
+    model: getConfig('CODING_AGENT_CLAUDE_CODE_MODEL') || undefined,
   };
 
   // Permission mode → allowed tools
@@ -133,6 +134,7 @@ export async function* claudeCodeStream({ prompt, workspaceDir, systemPrompt, se
 
   // Track tool call state for mapping stream events
   const activeToolCalls = new Map(); // index → { id, name, argsJson }
+  const activeThinkingBlocks = new Set(); // indices of active thinking blocks
 
   try {
     for await (const message of query({ prompt: sdkPrompt, options })) {
@@ -156,8 +158,11 @@ export async function* claudeCodeStream({ prompt, workspaceDir, systemPrompt, se
           if (block.type === 'tool_use') {
             activeToolCalls.set(event.index, { id: block.id, name: block.name, argsJson: '' });
             yield { type: 'tool-call', toolCallId: block.id, toolName: block.name, args: {} };
+          } else if (block.type === 'thinking') {
+            activeThinkingBlocks.add(event.index);
+            yield { type: 'thinking-start' };
           }
-          // Skip 'thinking', 'text' start (deltas handle text)
+          // Skip 'text' start (deltas handle text)
           continue;
         }
 
@@ -167,11 +172,17 @@ export async function* claudeCodeStream({ prompt, workspaceDir, systemPrompt, se
           } else if (event.delta.type === 'input_json_delta') {
             const tc = activeToolCalls.get(event.index);
             if (tc) tc.argsJson += event.delta.partial_json;
+          } else if (event.delta.type === 'thinking_delta') {
+            yield { type: 'thinking', delta: event.delta.thinking };
           }
           continue;
         }
 
         if (event.type === 'content_block_stop') {
+          if (activeThinkingBlocks.has(event.index)) {
+            activeThinkingBlocks.delete(event.index);
+            yield { type: 'thinking-end' };
+          }
           const tc = activeToolCalls.get(event.index);
           if (tc && tc.argsJson) {
             try {

package/lib/chat/actions.js

@@ -7,7 +7,6 @@ import {
   getChatByWorkspaceId,
   getMessagesByChatId,
   deleteChat as dbDeleteChat,
-  deleteAllChatsByUser,
   updateChatTitle,
   toggleChatStarred,
 } from '../db/chats.js';
@@ -139,15 +138,6 @@ export async function starChat(chatId) {
   return { success: true, starred };
 }
 
-/**
- * Delete all chats for the authenticated user.
- * @returns {Promise<{success: boolean}>}
- */
-export async function deleteAllChats() {
-  const user = await requireAuth();
-  deleteAllChatsByUser(user.id);
-  return { success: true };
-}
 
 /**
  * Get notifications, newest first, with pagination.
@@ -722,6 +712,66 @@ export async function getCodingAgentSettings() {
   }
 }
 
+/**
+ * Return the list of coding agents that are enabled and have valid credentials.
+ * Used to populate the right-click agent picker on the Interactive toggle.
+ * @returns {Promise<Array<{value: string, label: string}>>}
+ */
+export async function getAvailableCodingAgents() {
+  await requireAuth();
+  try {
+    const settings = await getCodingAgentSettings();
+    if (settings.error) return [];
+
+    const statusMap = new Map((settings.credentialStatuses || []).map(s => [s.key, s.isSet]));
+
+    function isProviderReady(provider) {
+      const builtin = settings.builtinProviders?.[provider];
+      if (builtin?.credentialKey) return statusMap.get(builtin.credentialKey) || false;
+      // Custom providers store their own credentials — if selected they're ready
+      const custom = (settings.customProviders || []).find(p => p.id === provider);
+      return !!custom;
+    }
+
+    const available = [];
+
+    if (settings.claudeCode?.enabled) {
+      const { claudeCode } = settings;
+      const backend = claudeCode.backend || 'anthropic';
+      const ready = backend === 'anthropic'
+        ? (claudeCode.auth === 'oauth' ? claudeCode.oauthTokenCount > 0 : claudeCode.anthropicKeySet)
+        : isProviderReady(backend);
+      if (ready) available.push({ value: 'claude-code', label: 'Claude Code' });
+    }
+
+    if (settings.pi?.enabled && settings.pi?.provider && isProviderReady(settings.pi.provider)) {
+      available.push({ value: 'pi-coding-agent', label: 'Pi' });
+    }
+
+    if (settings.geminiCli?.enabled && settings.geminiCli?.googleKeySet) {
+      available.push({ value: 'gemini-cli', label: 'Gemini CLI' });
+    }
+
+    if (settings.codexCli?.enabled) {
+      const { codexCli } = settings;
+      const ready = codexCli.auth === 'oauth' ? codexCli.oauthTokenCount > 0 : codexCli.codexKeySet;
+      if (ready) available.push({ value: 'codex-cli', label: 'Codex CLI' });
+    }
+
+    if (settings.openCode?.enabled && settings.openCode?.provider && isProviderReady(settings.openCode.provider)) {
+      available.push({ value: 'opencode', label: 'OpenCode' });
+    }
+
+    if (settings.kimiCli?.enabled && settings.kimiCli?.provider && isProviderReady(settings.kimiCli.provider)) {
+      available.push({ value: 'kimi-cli', label: 'Kimi CLI' });
+    }
+
+    return available;
+  } catch {
+    return [];
+  }
+}
+
 /**
  * Update per-agent coding agent config.
  * @param {string} agent - 'claude-code' or 'pi-coding-agent'

package/lib/chat/api.js

@@ -94,6 +94,28 @@ export async function POST(request) {
 
       let textStarted = false;
       let textId = uuidv4();
+      // Ephemeral thinking block state — tunneled as __thinking__ tool calls.
+      // Content is never persisted to DB (not a real tool-call/result pair in chatStream).
+      let thinkingId = null;
+      let thinkingText = '';
+      // Track which toolCallIds have had tool-input-start emitted.
+      //
+      // Two problems this solves:
+      //
+      // 1. The Claude Agent SDK emits tool-call twice per tool use: once at
+      //    content_block_start (args: {}) and again at content_block_stop
+      //    (args: complete). Sending tool-input-start twice for the same ID
+      //    resets the AI SDK's internal part state to input-streaming and
+      //    clears its stored input, causing a visual flicker. Deduplicate here.
+      //
+      // 2. When Claude Code resumes a session, the adapter skips assistant
+      //    messages (to avoid duplicate UI) but still emits tool-result chunks
+      //    for tool_result blocks in subsequent user messages. Those tool-result
+      //    chunks have no matching tool-call in this stream, so tool-input-start
+      //    is never sent for them. The AI SDK then throws
+      //    "tool-output-error must be preceded by a tool-input-available"
+      //    when tool-output-available arrives. Emit the open events defensively.
+      const openedToolCalls = new Set();
 
       for await (const chunk of chunks) {
         if (chunk.type === 'text') {
@@ -105,17 +127,7 @@ export async function POST(request) {
           writer.write({ type: 'text-delta', id: textId, delta: chunk.text });
 
         } else if (chunk.type === 'tool-call') {
-          // Close any open text block before tool events
-          if (textStarted) {
-            writer.write({ type: 'text-end', id: textId });
-            textStarted = false;
-          }
-          writer.write({
-            type: 'tool-input-start',
-            toolCallId: chunk.toolCallId,
-            toolName: chunk.toolName,
-          });
-          // Enrich coding_agent input with active agent identity from config
+          // Enrich coding_agent input with active agent identity (LangGraph fallback path)
           let input = chunk.args;
           if (chunk.toolName === 'coding_agent') {
             const agent = getConfig('CODING_AGENT') || 'claude-code';
@@ -130,6 +142,21 @@ export async function POST(request) {
             const backendApi = getConfig(providerKeys[agent]) || 'anthropic';
             input = { ...chunk.args, codingAgent: agent, backendApi };
           }
+          if (!openedToolCalls.has(chunk.toolCallId)) {
+            // First time seeing this ID — open the tool block
+            if (textStarted) {
+              writer.write({ type: 'text-end', id: textId });
+              textStarted = false;
+            }
+            writer.write({
+              type: 'tool-input-start',
+              toolCallId: chunk.toolCallId,
+              toolName: chunk.toolName,
+            });
+            openedToolCalls.add(chunk.toolCallId);
+          }
+          // Always emit tool-input-available: first call shows empty args while
+          // streaming, second call (content_block_stop) updates to complete args
           writer.write({
             type: 'tool-input-available',
             toolCallId: chunk.toolCallId,
@@ -138,14 +165,26 @@ export async function POST(request) {
           });
 
         } else if (chunk.type === 'tool-result') {
-          // Update input with complete args (accumulated from all streaming chunks)
-          if (chunk.args) {
+          if (!openedToolCalls.has(chunk.toolCallId)) {
+            // tool-result arrived with no preceding tool-call in this stream
+            // (session resume replays tool results from skipped assistant messages).
+            // Emit the required open events so the AI SDK does not throw.
+            if (textStarted) {
+              writer.write({ type: 'text-end', id: textId });
+              textStarted = false;
+            }
+            writer.write({
+              type: 'tool-input-start',
+              toolCallId: chunk.toolCallId,
+              toolName: chunk.toolName || 'unknown',
+            });
             writer.write({
               type: 'tool-input-available',
               toolCallId: chunk.toolCallId,
-              toolName: chunk.toolName,
-              input: chunk.args,
+              toolName: chunk.toolName || 'unknown',
+              input: chunk.args || {},
             });
+            openedToolCalls.add(chunk.toolCallId);
           }
           writer.write({
             type: 'tool-output-available',
@@ -153,6 +192,44 @@ export async function POST(request) {
             output: chunk.result,
           });
 
+        } else if (chunk.type === 'thinking-start') {
+          // Open a new ephemeral thinking block as a pseudo-tool
+          if (textStarted) {
+            writer.write({ type: 'text-end', id: textId });
+            textStarted = false;
+          }
+          thinkingId = uuidv4();
+          thinkingText = '';
+          writer.write({
+            type: 'tool-input-start',
+            toolCallId: thinkingId,
+            toolName: '__thinking__',
+          });
+
+        } else if (chunk.type === 'thinking') {
+          // Accumulate and stream thinking deltas progressively
+          if (thinkingId) {
+            thinkingText += chunk.delta;
+            writer.write({
+              type: 'tool-input-available',
+              toolCallId: thinkingId,
+              toolName: '__thinking__',
+              input: thinkingText,
+            });
+          }
+
+        } else if (chunk.type === 'thinking-end') {
+          // Close the thinking block — empty output marks it done
+          if (thinkingId) {
+            writer.write({
+              type: 'tool-output-available',
+              toolCallId: thinkingId,
+              output: '',
+            });
+            thinkingId = null;
+            thinkingText = '';
+          }
+
         } else if (chunk.type === 'meta' || chunk.type === 'result') {
           // Internal events — no SSE output needed
 
@@ -449,6 +526,28 @@ export async function getRepositoriesHandler() {
   }
 }
 
+/**
+ * POST handler for /code/repositories/create — create a new GitHub repository.
+ */
+export async function createRepositoryHandler(request) {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return Response.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  try {
+    const { name } = await request.json();
+    if (!name || typeof name !== 'string') {
+      return Response.json({ error: 'Repository name is required' }, { status: 400 });
+    }
+    const { createRepository } = await import('../tools/github.js');
+    const repo = await createRepository(name.trim());
+    return Response.json(repo);
+  } catch (err) {
+    const message = err.message || 'Failed to create repository';
+    return Response.json({ error: message }, { status: 422 });
+  }
+}
+
 /**
  * GET handler for /code/branches?repo=owner/name — list branches with session auth.
  */

package/lib/chat/components/chat-input.js

@@ -65,8 +65,10 @@ function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, d
   const fileInputRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const [modeDropdownOpen, setModeDropdownOpen] = useState(false);
+  const [agentPickerOpen, setAgentPickerOpen] = useState(false);
   const [partialText, setPartialText] = useState("");
   const dropdownRef = useRef(null);
+  const agentPickerRef = useRef(null);
   const isStreaming = status === "streaming" || status === "submitted";
   const volumeRef = useRef(0);
   const { voiceAvailable, isConnecting, isRecording, startRecording, stopRecording } = useVoiceInput({
@@ -106,6 +108,23 @@ function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, d
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [modeDropdownOpen]);
+  useEffect(() => {
+    if (!agentPickerOpen) return;
+    const handleClickOutside = (e) => {
+      if (agentPickerRef.current && !agentPickerRef.current.contains(e.target)) {
+        setAgentPickerOpen(false);
+      }
+    };
+    const handleKeyDown2 = (e) => {
+      if (e.key === "Escape") setAgentPickerOpen(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown2);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown2);
+    };
+  }, [agentPickerOpen]);
   const handleFiles = useCallback((fileList) => {
     const newFiles = Array.from(fileList).filter(isAcceptedType);
     if (newFiles.length === 0) return;
@@ -296,40 +315,65 @@ function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, d
                 )
               ] })
             ] }),
-            codeModeSettings && !codeModeSettings.isInteractiveActive && /* @__PURE__ */ jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: codeModeSettings.onInteractiveToggle,
-                disabled: codeModeSettings.togglingMode || codeModeSettings.isInteractiveActive,
-                className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
-                children: [
-                  codeModeSettings.togglingMode && /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-3 w-3", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-                    /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                    /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "relative inline-flex h-3.5 w-6 shrink-0 rounded-full transition-colors duration-200",
-                        codeModeSettings.isInteractiveActive ? "bg-primary" : "bg-muted-foreground/30"
-                      ),
-                      children: /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: cn(
-                            "absolute top-0.5 left-0.5 h-2.5 w-2.5 rounded-full bg-white shadow-sm transition-transform duration-200",
-                            codeModeSettings.isInteractiveActive && "translate-x-2.5"
-                          )
-                        }
-                      )
+            codeModeSettings && !codeModeSettings.isInteractiveActive && /* @__PURE__ */ jsxs("div", { className: "relative", ref: agentPickerRef, children: [
+              agentPickerOpen && codeModeSettings.availableAgents?.length > 1 && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full left-0 mb-1.5 z-50 min-w-[140px] rounded-md border border-border bg-background shadow-md py-1 overflow-hidden", children: [
+                /* @__PURE__ */ jsx("p", { className: "px-3 pt-0.5 pb-1 text-[10px] font-medium text-muted-foreground uppercase tracking-wide", children: "Launch with" }),
+                codeModeSettings.availableAgents.map((agent) => /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setAgentPickerOpen(false);
+                      codeModeSettings.onInteractiveToggle(agent.value);
+                    },
+                    className: "w-full text-left px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors",
+                    children: agent.label
+                  },
+                  agent.value
+                ))
+              ] }),
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => codeModeSettings.onInteractiveToggle(),
+                  onContextMenu: (e) => {
+                    e.preventDefault();
+                    if (!codeModeSettings.togglingMode && codeModeSettings.availableAgents?.length > 1) {
+                      setAgentPickerOpen((prev) => !prev);
                     }
-                  ),
-                  codeModeSettings.togglingMode ? "Launching..." : "Interactive"
-                ]
-              }
-            ),
+                  },
+                  disabled: codeModeSettings.togglingMode || codeModeSettings.isInteractiveActive,
+                  title: codeModeSettings.availableAgents?.length > 1 ? "Left-click to launch \xB7 Right-click to pick agent" : void 0,
+                  className: "inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors",
+                  children: [
+                    codeModeSettings.togglingMode && /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-3 w-3", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                      /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                      /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "relative inline-flex h-3.5 w-6 shrink-0 rounded-full transition-colors duration-200",
+                          codeModeSettings.isInteractiveActive ? "bg-primary" : "bg-muted-foreground/30"
+                        ),
+                        children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: cn(
+                              "absolute top-0.5 left-0.5 h-2.5 w-2.5 rounded-full bg-white shadow-sm transition-transform duration-200",
+                              codeModeSettings.isInteractiveActive && "translate-x-2.5"
+                            )
+                          }
+                        )
+                      }
+                    ),
+                    codeModeSettings.togglingMode ? "Launching..." : "Interactive"
+                  ]
+                }
+              )
+            ] }),
             /* @__PURE__ */ jsx(
               "input",
               {

package/lib/chat/components/chat-input.jsx

@@ -46,8 +46,10 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
   const fileInputRef = useRef(null);
   const [isDragging, setIsDragging] = useState(false);
   const [modeDropdownOpen, setModeDropdownOpen] = useState(false);
+  const [agentPickerOpen, setAgentPickerOpen] = useState(false);
   const [partialText, setPartialText] = useState('');
   const dropdownRef = useRef(null);
+  const agentPickerRef = useRef(null);
   const isStreaming = status === 'streaming' || status === 'submitted';
   const volumeRef = useRef(0);
 
@@ -94,6 +96,25 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [modeDropdownOpen]);
 
+  // Close agent picker on outside click or Escape
+  useEffect(() => {
+    if (!agentPickerOpen) return;
+    const handleClickOutside = (e) => {
+      if (agentPickerRef.current && !agentPickerRef.current.contains(e.target)) {
+        setAgentPickerOpen(false);
+      }
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === 'Escape') setAgentPickerOpen(false);
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [agentPickerOpen]);
+
   const handleFiles = useCallback((fileList) => {
     const newFiles = Array.from(fileList).filter(isAcceptedType);
     if (newFiles.length === 0) return;
@@ -303,35 +324,64 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
                 </div>
               )}
 
-              {/* Interactive toggle */}
+              {/* Interactive toggle — left-click to launch with default agent,
+                  right-click to pick a specific agent (when multiple are available) */}
               {codeModeSettings && !codeModeSettings.isInteractiveActive && (
-                <button
-                  type="button"
-                  onClick={codeModeSettings.onInteractiveToggle}
-                  disabled={codeModeSettings.togglingMode || codeModeSettings.isInteractiveActive}
-                  className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  {codeModeSettings.togglingMode && (
-                    <svg className="animate-spin h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-                    </svg>
+                <div className="relative" ref={agentPickerRef}>
+                  {/* Agent picker popup — appears above the toggle on right-click */}
+                  {agentPickerOpen && codeModeSettings.availableAgents?.length > 1 && (
+                    <div className="absolute bottom-full left-0 mb-1.5 z-50 min-w-[140px] rounded-md border border-border bg-background shadow-md py-1 overflow-hidden">
+                      <p className="px-3 pt-0.5 pb-1 text-[10px] font-medium text-muted-foreground uppercase tracking-wide">Launch with</p>
+                      {codeModeSettings.availableAgents.map(agent => (
+                        <button
+                          key={agent.value}
+                          type="button"
+                          onClick={() => {
+                            setAgentPickerOpen(false);
+                            codeModeSettings.onInteractiveToggle(agent.value);
+                          }}
+                          className="w-full text-left px-3 py-1.5 text-xs text-foreground hover:bg-muted transition-colors"
+                        >
+                          {agent.label}
+                        </button>
+                      ))}
+                    </div>
                   )}
-                  <span
-                    className={cn(
-                      'relative inline-flex h-3.5 w-6 shrink-0 rounded-full transition-colors duration-200',
-                      codeModeSettings.isInteractiveActive ? 'bg-primary' : 'bg-muted-foreground/30'
-                    )}
+                  <button
+                    type="button"
+                    onClick={() => codeModeSettings.onInteractiveToggle()}
+                    onContextMenu={(e) => {
+                      e.preventDefault();
+                      if (!codeModeSettings.togglingMode && codeModeSettings.availableAgents?.length > 1) {
+                        setAgentPickerOpen(prev => !prev);
+                      }
+                    }}
+                    disabled={codeModeSettings.togglingMode || codeModeSettings.isInteractiveActive}
+                    title={codeModeSettings.availableAgents?.length > 1 ? 'Left-click to launch · Right-click to pick agent' : undefined}
+                    className="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
                   >
+                    {codeModeSettings.togglingMode && (
+                      <svg className="animate-spin h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                      </svg>
+                    )}
                     <span
                       className={cn(
-                        'absolute top-0.5 left-0.5 h-2.5 w-2.5 rounded-full bg-white shadow-sm transition-transform duration-200',
-                        codeModeSettings.isInteractiveActive && 'translate-x-2.5'
+                        'relative inline-flex h-3.5 w-6 shrink-0 rounded-full transition-colors duration-200',
+                        codeModeSettings.isInteractiveActive ? 'bg-primary' : 'bg-muted-foreground/30'
                       )}
-                    />
-                  </span>
-                  {codeModeSettings.togglingMode ? 'Launching...' : 'Interactive'}
-                </button>
+                    >
+                      <span
+                        className={cn(
+                          'absolute top-0.5 left-0.5 h-2.5 w-2.5 rounded-full bg-white shadow-sm transition-transform duration-200',
+                          codeModeSettings.isInteractiveActive && 'translate-x-2.5'
+                        )}
+                      />
+                    </span>
+                    {codeModeSettings.togglingMode ? 'Launching...' : 'Interactive'}
+                  </button>
+                </div>
               )}
 
               <input