thepopebot 1.2.76-beta.2 → 1.2.76-beta.21

package/lib/chat/api.js

@@ -1,7 +1,6 @@
 import { auth } from '../auth/index.js';
 import { chatStream } from '../ai/index.js';
 import { v4 as uuidv4 } from 'uuid';
-import { getConfig } from '../config.js';
 
 /**
  * POST handler for /stream/chat — streaming chat with session auth.
@@ -14,7 +13,7 @@ export async function POST(request) {
   }
 
   const body = await request.json();
-  const { messages, chatId: rawChatId, trigger, codeMode, repo, branch, workspaceId, codeModeType } = body;
+  const { messages, chatId: rawChatId, trigger, codeMode, repo, branch, workspaceId, codeModeType, scope } = body;
 
   if (!messages?.length) {
     return Response.json({ error: 'No messages' }, { status: 400 });
@@ -87,6 +86,7 @@ export async function POST(request) {
         codeModeType: codeModeType || 'plan',
       };
       if (workspaceId) streamOptions.workspaceId = workspaceId;
+      if (scope) streamOptions.scope = scope;
       const chunks = chatStream(threadId, userText, attachments, streamOptions);
 
       // Signal start of assistant message
@@ -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,47 +127,49 @@ 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
-          let input = chunk.args;
-          if (chunk.toolName === 'coding_agent') {
-            const agent = getConfig('CODING_AGENT') || 'claude-code';
-            const providerKeys = {
-              'claude-code': 'CODING_AGENT_CLAUDE_CODE_BACKEND',
-              'pi-coding-agent': 'CODING_AGENT_PI_PROVIDER',
-              'gemini-cli': 'CODING_AGENT_GEMINI_CLI_PROVIDER',
-              'codex-cli': 'CODING_AGENT_CODEX_CLI_PROVIDER',
-              'opencode': 'CODING_AGENT_OPENCODE_PROVIDER',
-              'kimi-cli': 'CODING_AGENT_KIMI_CLI_PROVIDER',
-            };
-            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,
             toolName: chunk.toolName,
-            input,
+            input: chunk.args,
           });
 
         } 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,9 +177,60 @@ 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
 
+        } else if (chunk.type === 'error') {
+          // Stream a typed data part so the client renders a red error message.
+          // Persisted by chatStream() as a JSON row — rehydrated in chat-page.jsx.
+          if (textStarted) {
+            writer.write({ type: 'text-end', id: textId });
+            textStarted = false;
+          }
+          writer.write({
+            type: 'data-error',
+            id: `error-${uuidv4().slice(0, 8)}`,
+            data: { message: chunk.message },
+          });
+
         } else if (chunk.type === 'unknown') {
           // Close any open text block before unknown event
           if (textStarted) {
@@ -449,6 +524,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.
  */
@@ -469,6 +566,26 @@ export async function getBranchesHandler(request) {
   }
 }
 
+/**
+ * GET handler for /code/default-branch?repo=owner/name — repo's default branch.
+ */
+export async function getDefaultBranchHandler(request) {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return Response.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  const url = new URL(request.url);
+  const repoFullName = url.searchParams.get('repo');
+  if (!repoFullName) return Response.json({ branch: null });
+  try {
+    const { getDefaultBranch } = await import('../tools/github.js');
+    const branch = await getDefaultBranch(repoFullName);
+    return Response.json({ branch });
+  } catch {
+    return Response.json({ branch: null });
+  }
+}
+
 /**
  * GET handler for /chat/voice-token — AssemblyAI temporary token with session auth.
  */
@@ -493,6 +610,43 @@ export async function getVoiceTokenHandler(request) {
   return Response.json({ token: data.token });
 }
 
+/**
+ * GET handler for /chat/scopes — list available agent scopes (subdirectories in agents/).
+ * Returns an array of { name, path } objects.
+ */
+export async function getScopesHandler() {
+  const session = await auth();
+  if (!session?.user?.id) {
+    return Response.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+  try {
+    const { readdirSync, statSync } = await import('fs');
+    const { join } = await import('path');
+    const { PROJECT_ROOT } = await import('../paths.js');
+    const agentsDir = join(PROJECT_ROOT, 'agents');
+
+    try {
+      const entries = readdirSync(agentsDir, { withFileTypes: true });
+      const scopes = entries
+        .filter(e => e.isDirectory() || e.isSymbolicLink())
+        .filter(e => {
+          // Verify symlinks resolve to directories
+          if (e.isSymbolicLink()) {
+            try { return statSync(join(agentsDir, e.name)).isDirectory(); } catch { return false; }
+          }
+          return true;
+        })
+        .map(e => ({ name: e.name, path: `agents/${e.name}` }));
+      return Response.json(scopes);
+    } catch (err) {
+      if (err.code === 'ENOENT') return Response.json([]);
+      throw err;
+    }
+  } catch {
+    return Response.json([]);
+  }
+}
+
 export async function finalizeChat(request) {
   const session = await auth();
   if (!session?.user?.id) {

package/lib/chat/components/CLAUDE.md

@@ -8,8 +8,8 @@ Admin pages live under `/admin/` with two top-level sections:
 
 - **`/admin/event-handler/`** — Event handler config with pill-style sub-tabs via `SubTabLayout` (`settings-secrets-layout.jsx`):
   - `/admin/event-handler/llms` — LLM provider credentials
-  - `/admin/event-handler/chat` — Chat LLM settings
   - `/admin/event-handler/coding-agents` — Multi-agent config (5 backends)
+  - `/admin/event-handler/helper-llm` — Helper LLM settings (provider/model used for chat titles, agent-job titles + summaries)
   - `/admin/event-handler/jobs` — Agent job custom secrets
   - `/admin/event-handler/telegram` — Telegram integration
   - `/admin/event-handler/voice` — Voice input (AssemblyAI)
@@ -29,7 +29,11 @@ Admin pages live under `/admin/` with two top-level sections:
 
 `tool-names.js` auto-generates display names from the tool's snake_case name (split on `_`, capitalize each word). No map to maintain — adding a new tool automatically gets a display name.
 
-This file is **UI-only** — it controls display text, not which tools are available. Tool-to-agent assignment lives in `lib/ai/agent.js`.
+This file is **UI-only** — it controls display text. There is no host-side tool registry; every tool name in the UI comes from the coding agent's own stream (e.g. `Read`, `Bash`, `Edit`) plus the synthetic `workspace` setup tool emitted by `chatStream()`.
+
+## Error Messages
+
+`chatStream()` emits `{ type: 'error', message }` on failure. `lib/chat/api.js` writes it as an AI SDK `data-error` part; `chat-page.jsx` rehydrates stored errors into the same part shape on refresh; `message.jsx` renders `data-error` parts as a red banner using `text-destructive` / `border-destructive/30 bg-destructive/5`. Errors persist to the `messages` table as JSON (`{"type":"error","message":"..."}`).
 
 ## Settings UI Standards
 

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;
@@ -127,6 +146,7 @@ function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, d
     if (e) e.preventDefault();
     if (disabled || !input.trim() && !partialText.trim() && files.length === 0 || isStreaming) return;
     if (canSendOverride !== void 0 && !canSendOverride) return;
+    if (isRecording) stopRecording();
     if (partialText) {
       const needsSpace = input && !input.endsWith(" ");
       setInput(input + (needsSpace ? " " : "") + partialText);
@@ -240,10 +260,10 @@ function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, d
                   onClick: () => setModeDropdownOpen((prev) => !prev),
                   className: cn(
                     "inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors",
-                    codeModeSettings.mode === "code" ? "bg-green-500/15 text-green-500 hover:bg-green-500/25" : codeModeSettings.mode === "job" ? "bg-blue-500/15 text-blue-500 hover:bg-blue-500/25" : "bg-destructive/10 text-destructive hover:bg-destructive/20"
+                    codeModeSettings.mode === "code" ? "bg-green-500/15 text-green-500 hover:bg-green-500/25" : "bg-destructive/10 text-destructive hover:bg-destructive/20"
                   ),
                   children: [
-                    codeModeSettings.mode === "code" ? "Code" : codeModeSettings.mode === "job" ? "Job" : "Plan",
+                    codeModeSettings.mode === "code" ? "Code" : "Plan",
                     " \u25BE"
                   ]
                 }
@@ -278,58 +298,68 @@ function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, d
                     ),
                     children: "Code"
                   }
-                ),
-                !codeMode && /* @__PURE__ */ jsx(
+                )
+              ] })
+            ] }),
+            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: () => {
-                      codeModeSettings.onModeChange("job");
-                      setModeDropdownOpen(false);
+                      setAgentPickerOpen(false);
+                      codeModeSettings.onInteractiveToggle(agent.value);
                     },
-                    className: cn(
-                      "w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors",
-                      codeModeSettings.mode === "job" ? "text-blue-500 font-medium" : "text-foreground"
+                    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 && codeModeSettings.hasMessages) {
+                      setAgentPickerOpen((prev) => !prev);
+                    }
+                  },
+                  disabled: codeModeSettings.togglingMode || codeModeSettings.isInteractiveActive,
+                  title: codeModeSettings.availableAgents?.length > 1 && codeModeSettings.hasMessages ? "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"
+                            )
+                          }
+                        )
+                      }
                     ),
-                    children: "Job"
-                  }
-                )
-              ] })
+                    codeModeSettings.togglingMode ? "Launching..." : "Interactive"
+                  ]
+                }
+              )
             ] }),
-            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.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;
@@ -119,6 +140,7 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
     if (e) e.preventDefault();
     if (disabled || (!input.trim() && !partialText.trim() && files.length === 0) || isStreaming) return;
     if (canSendOverride !== undefined && !canSendOverride) return;
+    if (isRecording) stopRecording();
     if (partialText) {
       const needsSpace = input && !input.endsWith(' ');
       setInput(input + (needsSpace ? ' ' : '') + partialText);
@@ -247,7 +269,7 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
                 <PaperclipIcon size={16} />
               </button>
 
-              {/* Plan/Code/Job dropdown */}
+              {/* Plan/Code dropdown */}
               {codeModeSettings && (
                 <div className="relative" ref={dropdownRef}>
                   <button
@@ -257,12 +279,10 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
                       'inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition-colors',
                       codeModeSettings.mode === 'code'
                         ? 'bg-green-500/15 text-green-500 hover:bg-green-500/25'
-                        : codeModeSettings.mode === 'job'
-                          ? 'bg-blue-500/15 text-blue-500 hover:bg-blue-500/25'
-                          : 'bg-destructive/10 text-destructive hover:bg-destructive/20'
+                        : 'bg-destructive/10 text-destructive hover:bg-destructive/20'
                     )}
                   >
-                    {codeModeSettings.mode === 'code' ? 'Code' : codeModeSettings.mode === 'job' ? 'Job' : 'Plan'} &#9662;
+                    {codeModeSettings.mode === 'code' ? 'Code' : 'Plan'} &#9662;
                   </button>
                   {modeDropdownOpen && (
                     <div className="absolute bottom-full left-0 mb-1 rounded-lg border border-border bg-background shadow-lg py-1 min-w-[100px] z-50">
@@ -286,52 +306,69 @@ export function ChatInput({ input, setInput, onSubmit, status, stop, files, setF
                       >
                         Code
                       </button>
-                      {!codeMode && (
-                        <button
-                          type="button"
-                          onClick={() => { codeModeSettings.onModeChange('job'); setModeDropdownOpen(false); }}
-                          className={cn(
-                            'w-full text-left px-3 py-1.5 text-xs hover:bg-muted transition-colors',
-                            codeModeSettings.mode === 'job' ? 'text-blue-500 font-medium' : 'text-foreground'
-                          )}
-                        >
-                          Job
-                        </button>
-                      )}
                     </div>
                   )}
                 </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 && codeModeSettings.hasMessages) {
+                        setAgentPickerOpen(prev => !prev);
+                      }
+                    }}
+                    disabled={codeModeSettings.togglingMode || codeModeSettings.isInteractiveActive}
+                    title={codeModeSettings.availableAgents?.length > 1 && codeModeSettings.hasMessages ? '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