@sean.holung/minicode 0.3.9 → 0.3.11

package/dist/src/serve/agent-bridge.js

@@ -1,4 +1,6 @@
 import { CodingAgent, createModelClient } from "@minicode/agent-sdk";
+import { randomUUID } from "node:crypto";
+import { isGatedTool, shouldAutoAllow, } from "../auto-allow.js";
 import { readFile } from "node:fs/promises";
 import { watch } from "node:fs";
 import path from "node:path";
@@ -27,6 +29,29 @@ export class AgentBridge {
     annotations = new Map();
     fileWatcher = null;
     reindexTimers = new Map();
+    /**
+     * Per-session auto-allow mode. Default `none` — every gated tool call
+     * prompts the user. Set via the web UI dropdown or via a CLI shortcut
+     * (which is encoded in `permission_response.setAutoAllowMode`).
+     */
+    autoAllowMode = "none";
+    /**
+     * Set for the duration of a programmatic API turn (OpenAI-compatible
+     * `/v1/chat/completions`). When true, the permission gate is bypassed
+     * entirely — API clients can't answer prompts, so prompting them
+     * would just hang the agent (and a human in another browser tab
+     * shouldn't be approving someone else's script either). Counter so
+     * concurrent or nested API calls don't clear the flag prematurely;
+     * `runTurn`'s busy check still serializes turns, but defending in
+     * depth costs nothing.
+     */
+    apiBypassDepth = 0;
+    /**
+     * In-flight permission requests keyed by `requestId`. The agent loop is
+     * paused on the promise; the WebSocket handler calls
+     * `resolvePermissionRequest(requestId, ...)` when the user responds.
+     */
+    pendingPermissions = new Map();
     constructor(broadcast, verbose) {
         this.broadcast = broadcast;
         this.verbose = verbose;
@@ -118,8 +143,94 @@ export class AgentBridge {
                 this.emit(event);
             }),
             getSystemPromptSuffix: () => this.buildAnnotationSuffix(),
+            beforeToolCall: this.gateToolCall,
         });
     }
+    /**
+     * Permission gate for tool calls. Read-only tools bypass; mutating
+     * tools (`write_file`, `edit_file`, `run_command`) either auto-allow
+     * (when the current `autoAllowMode` covers that tool) or open a
+     * round-trip prompt against the connected web client.
+     *
+     * Defined as an arrow-property so `this` binding survives passing it
+     * straight into `CodingAgent` as `beforeToolCall`.
+     */
+    gateToolCall = async (toolCall) => {
+        if (!isGatedTool(toolCall.name)) {
+            return { outcome: "allow" };
+        }
+        if (this.apiBypassDepth > 0) {
+            // Programmatic API turn: no UI to prompt, treat as fully auto-allowed.
+            return { outcome: "allow" };
+        }
+        if (shouldAutoAllow(this.autoAllowMode, toolCall.name)) {
+            return { outcome: "allow" };
+        }
+        return new Promise((resolve) => {
+            const requestId = randomUUID();
+            this.pendingPermissions.set(requestId, resolve);
+            this.emit({
+                type: "permission_required",
+                requestId,
+                toolName: toolCall.name,
+                input: toolCall.input,
+            });
+        });
+    };
+    /**
+     * Resolve a pending permission request. Called by the WebSocket handler
+     * when a `permission_response` arrives. Idempotent: a duplicate response
+     * for the same requestId is silently ignored. When the response carries
+     * `setAutoAllowMode` (used by CLI shortcuts), the mode is updated and
+     * broadcast before the promise resolves.
+     */
+    resolvePermissionRequest(requestId, response) {
+        const resolve = this.pendingPermissions.get(requestId);
+        if (!resolve)
+            return;
+        this.pendingPermissions.delete(requestId);
+        if (response.decision === "allow" && response.setAutoAllowMode) {
+            this.setAutoAllowMode(response.setAutoAllowMode);
+        }
+        if (response.decision === "allow") {
+            resolve({ outcome: "allow" });
+        }
+        else {
+            resolve({
+                outcome: "deny",
+                reason: "User declined the tool call.",
+            });
+        }
+    }
+    /**
+     * Set the per-session auto-allow mode and broadcast the new value so
+     * any connected client UI stays in sync.
+     */
+    setAutoAllowMode(mode) {
+        if (this.autoAllowMode === mode)
+            return;
+        this.autoAllowMode = mode;
+        this.emit({ type: "auto_allow_mode_changed", mode });
+    }
+    getAutoAllowMode() {
+        return this.autoAllowMode;
+    }
+    /**
+     * @internal
+     * Exposed for tests so the gating logic can be exercised without spinning
+     * up a full agent + model client.
+     */
+    invokeToolPermissionGateForTesting(toolCall) {
+        return this.gateToolCall(toolCall);
+    }
+    /**
+     * @internal
+     * Exposed for tests so the API-bypass branch can be exercised without
+     * spinning up a real OpenAI-compatible HTTP request.
+     */
+    setApiBypassForTesting(active) {
+        this.apiBypassDepth = active ? 1 : 0;
+    }
     // ── File watcher for automatic reindexing ──
     static WATCH_EXTENSIONS = new Set([".ts", ".tsx", ".js", ".jsx"]);
     static SKIP_DIRS = new Set(["node_modules", ".git", "dist", "build", "coverage"]);
@@ -176,7 +287,7 @@ export class AgentBridge {
         const absPath = path.resolve(this.config.workspaceRoot, relPath);
         try {
             const content = await readFile(absPath, "utf-8");
-            this.projectIndex.reindexFile(relPath, content);
+            await this.projectIndex.reindexFile(relPath, content);
             if (this.verbose) {
                 console.error(`[watch] Reindexed: ${relPath}`);
             }
@@ -316,6 +427,22 @@ export class AgentBridge {
             this.abortController = null;
         }
     }
+    /**
+     * Run a turn for a programmatic caller (the OpenAI-compatible
+     * `/v1/chat/completions` endpoint). Identical to `runTurn` but bypasses
+     * the permission gate for the duration of the turn — API clients can't
+     * answer interactive prompts, so gating would just hang the agent.
+     * Read-only tools and the `confirmDestructive` guardrail are unaffected.
+     */
+    async runApiTurn(message) {
+        this.apiBypassDepth += 1;
+        try {
+            return await this.runTurn(message);
+        }
+        finally {
+            this.apiBypassDepth -= 1;
+        }
+    }
     cancel() {
         if (this.abortController) {
             this.abortController.abort();

package/dist/src/serve/openai-compat.js

@@ -66,7 +66,7 @@ export async function handleChatCompletions(req, res, bridge) {
 }
 async function handleNonStreaming(res, bridge, message, completionId, created) {
     try {
-        const result = await bridge.runTurn(message);
+        const result = await bridge.runApiTurn(message);
         sendJson(res, 200, {
             id: completionId,
             object: "chat.completion",
@@ -123,7 +123,7 @@ async function handleStreaming(res, bridge, message, completionId, created) {
     };
     bridge.addListener(listener);
     try {
-        await bridge.runTurn(message);
+        await bridge.runApiTurn(message);
         sendSSE({
             id: completionId,
             object: "chat.completion.chunk",

package/dist/src/serve/websocket.js

@@ -30,6 +30,17 @@ export function createWebSocketServer(httpServer, bridge) {
                     client.send(JSON.stringify(changed));
                 }
             }
+            else if (msg.type === "permission_response") {
+                bridge.resolvePermissionRequest(msg.requestId, {
+                    decision: msg.decision,
+                    ...(msg.setAutoAllowMode !== undefined
+                        ? { setAutoAllowMode: msg.setAutoAllowMode }
+                        : {}),
+                });
+            }
+            else if (msg.type === "set_auto_allow_mode") {
+                bridge.setAutoAllowMode(msg.mode);
+            }
         });
     });
     return wss;

package/dist/src/tools/registry.js

@@ -5,6 +5,14 @@ import { createReadSymbolTool } from "./read-symbol.js";
 import { createFindPathTool } from "./find-path.js";
 import { createSearchCodeMapTool } from "./search-code-map.js";
 export { ToolRegistry };
+async function reindexBestEffort(projectIndex, relPath, content) {
+    try {
+        await projectIndex.reindexFile(relPath, content);
+    }
+    catch {
+        // Best effort only: the file mutation already succeeded.
+    }
+}
 /**
  * Create a ToolRegistry with the SDK's core tools plus indexer-specific tools
  * when a ProjectIndex is available.
@@ -12,8 +20,8 @@ export { ToolRegistry };
 export function createToolRegistry(config, projectIndex) {
     const hooks = projectIndex
         ? {
-            afterWrite: (relPath, content) => projectIndex.reindexFile(relPath, content),
-            afterEdit: (relPath, content) => projectIndex.reindexFile(relPath, content),
+            afterWrite: (relPath, content) => reindexBestEffort(projectIndex, relPath, content),
+            afterEdit: (relPath, content) => reindexBestEffort(projectIndex, relPath, content),
             afterCommand: async () => {
                 await projectIndex.refreshFromWorkspace();
             },

package/dist/src/ui/app.js

@@ -4,6 +4,7 @@ import { render, Box, Text } from "ink";
 import { HeaderBar } from "./components/header-bar.js";
 import { ActivityPane } from "./components/activity-pane.js";
 import { InputComposer } from "./components/input-composer.js";
+import { PermissionPrompt } from "./components/permission-prompt.js";
 function AppInner({ store, onRunTurn, onCtrlC }) {
     const [state, setState] = useState(store.getState());
     useEffect(() => {
@@ -15,8 +16,13 @@ function AppInner({ store, onRunTurn, onCtrlC }) {
     const handleSubmit = useCallback((input) => {
         onRunTurn(input);
     }, [onRunTurn]);
-    const disabled = state.phase !== "idle" && state.phase !== "loading";
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ActivityPane, { items: state.items }), _jsx(HeaderBar, { model: state.model, step: state.step, maxSteps: state.maxSteps, inputTokens: state.inputTokens, outputTokens: state.outputTokens, contextTokens: state.contextTokens, maxContextTokens: state.maxContextTokens, workspaceRoot: state.workspaceRoot, indexStatus: state.indexStatus }), _jsx(InputComposer, { onSubmit: handleSubmit, disabled: disabled, ...(onCtrlC && { onCtrlC }) }), state.errorMessage && (_jsx(Box, { paddingX: 1, children: _jsx(Box, { borderStyle: "single", borderColor: "red", paddingX: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", state.errorMessage] }) }) }))] }));
+    // Disable the chat input while the agent is working OR while a permission
+    // prompt is active. The prompt's `useInput` hook would otherwise compete
+    // with InputComposer's for keystrokes, and any non-{y,n,a,Esc} key would
+    // get echoed into the chat buffer.
+    const disabled = (state.phase !== "idle" && state.phase !== "loading") ||
+        state.pendingPermission !== null;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(ActivityPane, { items: state.items }), _jsx(HeaderBar, { model: state.model, step: state.step, maxSteps: state.maxSteps, inputTokens: state.inputTokens, outputTokens: state.outputTokens, contextTokens: state.contextTokens, maxContextTokens: state.maxContextTokens, workspaceRoot: state.workspaceRoot, indexStatus: state.indexStatus }), state.pendingPermission && (_jsx(PermissionPrompt, { prompt: state.pendingPermission })), _jsx(InputComposer, { onSubmit: handleSubmit, disabled: disabled, ...(onCtrlC && { onCtrlC }) }), state.errorMessage && (_jsx(Box, { paddingX: 1, children: _jsx(Box, { borderStyle: "single", borderColor: "red", paddingX: 1, children: _jsxs(Text, { color: "red", children: ["Error: ", state.errorMessage] }) }) }))] }));
 }
 export function runInkApp(store, onRunTurn, onCtrlC) {
     process.stdout.write("\x1b[2J\x1b[H");

package/dist/src/ui/cli-ink.js

@@ -9,6 +9,8 @@ import { listSessions, loadSession, loadSessionByLabel, saveSession, } from "../
 import { createToolRegistry } from "../tools/registry.js";
 import { UiStore } from "./state/ui-store.js";
 import { runInkApp } from "./app.js";
+import { createPermissionGate } from "./permission-gate.js";
+import { handlePermissionsSlashCommand } from "../cli/permissions-slash-command.js";
 export async function runInkCli(verbose, initialTask) {
     const store = new UiStore();
     store.setPhase("loading");
@@ -105,6 +107,7 @@ export async function runInkCli(verbose, initialTask) {
                 }
                 : {}),
             onUiUpdate: createUiUpdateHandler(),
+            beforeToolCall: createPermissionGate(store),
         });
     }
     let agent = buildAgent();
@@ -133,7 +136,15 @@ export async function runInkCli(verbose, initialTask) {
         if (trimmed === "/help") {
             store.addItem({
                 type: "system",
-                content: 'Commands: "/help", "/config [keys|get|set|unset]", "/compact", "/reasoning [level]", "/models", "/model [name]", "/save [label]", "/load [label]", "/sessions", "/exit".',
+                content: 'Commands: "/help", "/config [keys|get|set|unset]", "/permissions [auto on|off|status]", "/compact", "/reasoning [level]", "/models", "/model [name]", "/save [label]", "/load [label]", "/sessions", "/exit".',
+            });
+            return;
+        }
+        const permissionsCommand = handlePermissionsSlashCommand(trimmed, store);
+        if (permissionsCommand.handled) {
+            store.addItem({
+                type: "system",
+                content: permissionsCommand.message ?? "",
             });
             return;
         }
@@ -149,7 +160,7 @@ export async function runInkCli(verbose, initialTask) {
             const session = agent.getSession();
             const result = await agent.compactContext();
             if (result) {
-                const method = config.compactionModel ? "LLM" : "mechanical";
+                const method = result.method === "llm" ? "LLM" : "mechanical";
                 store.addItem({
                     type: "system",
                     content: `Compacted (${method}): ${result.removedMessages} messages summarized, ` +

package/dist/src/ui/components/permission-prompt.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+const MAX_FIELD_CHARS = 600;
+/**
+ * Render the tool input compactly. Long string fields (file content, full
+ * commands) are truncated with a marker so the prompt stays readable.
+ */
+function formatInput(input) {
+    const truncated = {};
+    for (const [key, value] of Object.entries(input)) {
+        if (typeof value === "string" && value.length > MAX_FIELD_CHARS) {
+            truncated[key] =
+                value.slice(0, MAX_FIELD_CHARS) +
+                    `… [${value.length - MAX_FIELD_CHARS} more chars]`;
+        }
+        else {
+            truncated[key] = value;
+        }
+    }
+    return JSON.stringify(truncated, null, 2);
+}
+/**
+ * Mid-turn permission prompt for gated tool calls. Captures the agent's
+ * input loop while visible — `useInput` here pre-empts the InputComposer
+ * because Ink delivers raw stdin events to every mounted `useInput`. The
+ * InputComposer is rendered with `disabled` while a prompt is active so
+ * keystrokes here don't bleed into the chat input.
+ *
+ * Keys:
+ *   y / Return  → allow once
+ *   a           → allow every gated tool for the rest of the session
+ *                 (equivalent to `/permissions auto all`). For narrower
+ *                 modes (writes-only or commands-only), use the slash
+ *                 command directly.
+ *   n / Esc     → deny
+ */
+export function PermissionPrompt({ prompt }) {
+    useInput((input, key) => {
+        if (input === "y" || key.return) {
+            prompt.resolve({ decision: "allow" });
+        }
+        else if (input === "a") {
+            // Flip the auto-allow mode to "all" so the rest of the session
+            // skips the prompt for every gated tool. Equivalent to running
+            // `/permissions auto all`.
+            prompt.resolve({ decision: "allow", setMode: "all" });
+        }
+        else if (input === "n" || key.escape) {
+            prompt.resolve({ decision: "deny" });
+        }
+    });
+    return (_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: "yellow", paddingX: 1, marginY: 1, children: [_jsx(Box, { children: _jsx(Text, { bold: true, color: "yellow", children: "\u26A0 Permission required" }) }), _jsxs(Box, { children: [_jsx(Text, { children: "The agent wants to run " }), _jsx(Text, { bold: true, color: "cyan", children: prompt.toolName }), _jsx(Text, { children: ":" })] }), _jsx(Box, { marginTop: 1, flexDirection: "column", children: _jsx(Text, { dimColor: true, children: formatInput(prompt.input) }) }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: [_jsx(Text, { bold: true, color: "green", children: "[y]" }), _jsx(Text, { children: " allow once  " }), _jsx(Text, { bold: true, color: "green", children: "[a]" }), _jsx(Text, { children: " allow all (session)  " }), _jsx(Text, { bold: true, color: "red", children: "[n]" }), _jsx(Text, { children: " deny" })] }) }), _jsx(Box, { children: _jsx(Text, { dimColor: true, children: "For finer control: /permissions auto writes|commands|all" }) })] }));
+}

package/dist/src/ui/permission-gate.js

@@ -0,0 +1,42 @@
+import { isGatedTool, shouldAutoAllow } from "../auto-allow.js";
+/**
+ * Build a `beforeToolCall` hook for the Ink CLI. Read-only tools bypass
+ * the gate; mutating tools either auto-allow (when the current
+ * `autoAllowMode` covers that tool — set via `/permissions auto MODE`
+ * or via the `[a]` shortcut on a prompt) or park a `pendingPermission`
+ * on the store and wait for the `<PermissionPrompt>` component to
+ * resolve it.
+ */
+export function createPermissionGate(store) {
+    return (toolCall) => {
+        if (!isGatedTool(toolCall.name)) {
+            return Promise.resolve({ outcome: "allow" });
+        }
+        if (shouldAutoAllow(store.getAutoAllowMode(), toolCall.name)) {
+            return Promise.resolve({ outcome: "allow" });
+        }
+        return new Promise((resolve) => {
+            store.setPendingPermission({
+                toolName: toolCall.name,
+                input: toolCall.input,
+                resolve: (response) => {
+                    // Clear the prompt before resolving so the UI redraws without
+                    // the modal in the same React tick the agent resumes.
+                    store.setPendingPermission(null);
+                    if (response.decision === "allow") {
+                        if (response.setMode) {
+                            store.setAutoAllowMode(response.setMode);
+                        }
+                        resolve({ outcome: "allow" });
+                    }
+                    else {
+                        resolve({
+                            outcome: "deny",
+                            reason: "User declined the tool call.",
+                        });
+                    }
+                },
+            });
+        });
+    };
+}

package/dist/src/ui/state/ui-store.js

@@ -11,6 +11,8 @@ const DEFAULT_STATE = {
     indexStatus: "",
     items: [],
     errorMessage: null,
+    pendingPermission: null,
+    autoAllowMode: "none",
 };
 export class UiStore {
     state = { ...DEFAULT_STATE };
@@ -91,4 +93,15 @@ export class UiStore {
         this.state = { ...DEFAULT_STATE };
         this.notify();
     }
+    setPendingPermission(prompt) {
+        this.update({ pendingPermission: prompt });
+    }
+    setAutoAllowMode(mode) {
+        if (this.state.autoAllowMode === mode)
+            return;
+        this.update({ autoAllowMode: mode });
+    }
+    getAutoAllowMode() {
+        return this.state.autoAllowMode;
+    }
 }

package/dist/src/web/app.js

@@ -1787,6 +1787,13 @@ function highlightAgentActivity(symbolName) {
 function resizeGraph() {
   if (cy) cy.resize();
 }
+function syncDetailPanelLayout({ fit = false } = {}) {
+  if (!cy) return;
+  cy.resize();
+  if (fit && cy.nodes().length > 0) {
+    cy.fit(80);
+  }
+}
 async function loadGraphSnapshot(refreshIndex) {
   if (refreshIndex) {
     const refreshRes = await fetch("/api/index/refresh", { method: "POST" });
@@ -1848,6 +1855,7 @@ function renderGraphAfterDataRefresh(previousVisibleIds, preserveVisible) {
   if (!cy) return;
   cy.elements().remove();
   document.getElementById("symbol-detail")?.classList.add("hidden");
+  syncDetailPanelLayout();
   const visibleIds = preserveVisible ? [...new Set(previousVisibleIds)].filter((id) => graphNodes.has(id)) : [];
   for (const id of visibleIds) {
     addNodeToGraph(id);
@@ -1936,6 +1944,7 @@ function focusFileInGraph(filePath) {
   });
   cy.elements().remove();
   document.getElementById("symbol-detail")?.classList.add("hidden");
+  syncDetailPanelLayout();
   if (selection.nodeIds.length === 0) {
     const cyEl = document.getElementById("cy");
     if (cyEl) showOnboardingHint(cyEl);
@@ -1951,13 +1960,15 @@ function focusFileInGraph(filePath) {
   refreshAnalysisGraphState();
   runLayout();
 }
-function getFilePreviewLanguage(filePath) {
+function getHljsLanguage(filePath) {
   const ext = filePath.split(".").pop()?.toLowerCase() || "";
   const langMap = {
     ts: "typescript",
     tsx: "typescript",
     js: "javascript",
     jsx: "javascript",
+    py: "python",
+    pyi: "python",
     json: "json",
     md: "markdown",
     css: "css",
@@ -2011,7 +2022,7 @@ async function openFilePreview(filePath) {
       return;
     }
     pathEl.textContent = data.filePath;
-    codeEl.className = `file-preview-code language-${getFilePreviewLanguage(data.filePath)}`;
+    codeEl.className = `file-preview-code language-${getHljsLanguage(data.filePath)}`;
     codeEl.textContent = data.source;
     if (typeof hljs !== "undefined") {
       hljs.highlightElement(codeEl);
@@ -2513,6 +2524,7 @@ function setupInteractions(cyInst, detailEl) {
   cyInst.on("tap", function(evt) {
     if (evt.target === cyInst) {
       detailEl.classList.add("hidden");
+      syncDetailPanelLayout();
     }
   });
 }
@@ -2568,6 +2580,7 @@ async function showDetail(node, detailEl) {
   html += '<div class="detail-section" id="detail-refs"><div class="detail-section-title">References</div><div class="detail-section-list">Loading...</div></div>';
   detailEl.innerHTML = '<div class="resize-handle"></div>' + html;
   detailEl.classList.remove("hidden");
+  syncDetailPanelLayout({ fit: true });
   const handle = detailEl.querySelector(".resize-handle");
   handle.addEventListener("mousedown", (e) => {
     e.preventDefault();
@@ -2577,6 +2590,7 @@ async function showDetail(node, detailEl) {
     function onMove(ev) {
       const newWidth = startWidth - (ev.clientX - startX);
       detailEl.style.width = Math.max(200, newWidth) + "px";
+      syncDetailPanelLayout();
     }
     function onUp() {
       handle.classList.remove("dragging");
@@ -2629,9 +2643,7 @@ async function loadSource(name, detailEl) {
     const res = await fetch(`/api/symbols/${encodeURIComponent(name)}/source`);
     if (res.ok) {
       const data = await res.json();
-      const ext = (data.filePath || "").split(".").pop() || "";
-      const langMap = { ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript" };
-      const lang = langMap[ext] || "typescript";
+      const lang = getHljsLanguage(data.filePath || "");
       codeEl.className = "detail-code language-" + lang;
       codeEl.textContent = data.source;
       if (typeof hljs !== "undefined") {
@@ -2876,6 +2888,7 @@ function setupToolbar() {
     if (!cy) return;
     cy.elements().remove();
     document.getElementById("symbol-detail").classList.add("hidden");
+    syncDetailPanelLayout();
     const cyEl = document.getElementById("cy");
     if (cyEl) showOnboardingHint(cyEl);
     refreshAnalysisGraphState();
@@ -2939,6 +2952,13 @@ var chatForm = document.getElementById("chat-form");
 var chatInput = document.getElementById("chat-input");
 var sendBtn = document.getElementById("send-btn");
 var cancelBtn = document.getElementById("cancel-btn");
+var autoAllowMode = document.getElementById("auto-allow-mode");
+var permissionModal = document.getElementById("permission-modal");
+var permissionToolName = document.getElementById("permission-tool-name");
+var permissionToolInput = document.getElementById("permission-tool-input");
+var permissionAllowBtn = document.getElementById("permission-allow");
+var permissionDenyBtn = document.getElementById("permission-deny");
+var pendingPermissionRequestId = null;
 var statusBadge = document.getElementById("status-badge");
 var modelInfo = document.getElementById("model-info");
 var modelBtn = document.getElementById("model-btn");
@@ -3458,6 +3478,12 @@ function handleServerMessage(msg) {
       void fetchStatus();
       break;
     }
+    case "permission_required":
+      showPermissionModal(msg.requestId, msg.toolName, msg.input);
+      break;
+    case "auto_allow_mode_changed":
+      autoAllowMode.value = msg.mode;
+      break;
   }
 }
 function addMessage(text, type, markdown = false) {
@@ -3884,6 +3910,52 @@ chatForm.addEventListener("submit", (e) => {
 cancelBtn.addEventListener("click", () => {
   ws.send(JSON.stringify({ type: "cancel" }));
 });
+function showPermissionModal(requestId, toolName, input) {
+  pendingPermissionRequestId = requestId;
+  permissionToolName.textContent = toolName;
+  permissionToolInput.textContent = formatPermissionInput(input);
+  permissionModal.classList.remove("hidden");
+  permissionModal.setAttribute("aria-hidden", "false");
+  permissionAllowBtn.focus();
+}
+function hidePermissionModal() {
+  pendingPermissionRequestId = null;
+  permissionModal.classList.add("hidden");
+  permissionModal.setAttribute("aria-hidden", "true");
+}
+function formatPermissionInput(input) {
+  const truncated = {};
+  const MAX_FIELD_CHARS = 800;
+  for (const [key, value] of Object.entries(input)) {
+    if (typeof value === "string" && value.length > MAX_FIELD_CHARS) {
+      truncated[key] = value.slice(0, MAX_FIELD_CHARS) + `\u2026 [${value.length - MAX_FIELD_CHARS} more chars]`;
+    } else {
+      truncated[key] = value;
+    }
+  }
+  return JSON.stringify(truncated, null, 2);
+}
+function respondToPermission(decision) {
+  if (pendingPermissionRequestId === null) return;
+  ws.send(
+    JSON.stringify({
+      type: "permission_response",
+      requestId: pendingPermissionRequestId,
+      decision
+    })
+  );
+  hidePermissionModal();
+}
+permissionAllowBtn.addEventListener("click", () => respondToPermission("allow"));
+permissionDenyBtn.addEventListener("click", () => respondToPermission("deny"));
+autoAllowMode.addEventListener("change", () => {
+  ws.send(
+    JSON.stringify({
+      type: "set_auto_allow_mode",
+      mode: autoAllowMode.value
+    })
+  );
+});
 chatInput.addEventListener("input", () => {
   chatInput.style.height = "auto";
   chatInput.style.height = Math.min(chatInput.scrollHeight, 150) + "px";