feat: add interactive permission prompt UI to Inspector

Add permission request handling to the Inspector UI so users can
Allow, Always Allow, or Reject tool calls that require permissions
instead of having them auto-cancelled. Wires up SDK
onPermissionRequest/respondPermission through App → ChatPanel →
ChatMessages with proper toolCallId-to-pendingId mapping.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/packages/inspector/index.html

@@ -1595,6 +1595,118 @@
         flex-shrink: 0;
       }
 
+      /* Permission prompt */
+      .permission-prompt {
+        margin: 8px 0;
+        padding: 12px 14px;
+        background: var(--surface);
+        border: 1px solid var(--border);
+        border-radius: var(--radius-sm);
+      }
+
+      .permission-prompt.resolved {
+        opacity: 0.7;
+      }
+
+      .permission-header {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 6px;
+      }
+
+      .permission-icon {
+        color: var(--warning, #f59e0b);
+        flex-shrink: 0;
+      }
+
+      .permission-prompt.resolved .permission-icon {
+        color: var(--muted);
+      }
+
+      .permission-title {
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--text);
+      }
+
+      .permission-description {
+        font-size: 12px;
+        color: var(--text-secondary);
+        margin-bottom: 8px;
+        padding-left: 22px;
+      }
+
+      .permission-actions {
+        display: flex;
+        gap: 6px;
+        padding-left: 22px;
+      }
+
+      .permission-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 4px 10px;
+        font-size: 12px;
+        font-weight: 500;
+        border-radius: var(--radius-sm);
+        border: 1px solid var(--border);
+        background: transparent;
+        color: var(--text-secondary);
+        cursor: pointer;
+        transition: background var(--transition), color var(--transition), border-color var(--transition);
+      }
+
+      .permission-btn:hover:not(:disabled) {
+        background: var(--surface);
+        color: var(--text);
+        border-color: rgba(255, 255, 255, 0.2);
+      }
+
+      .permission-btn.allow:hover:not(:disabled) {
+        background: rgba(34, 197, 94, 0.1);
+        border-color: rgba(34, 197, 94, 0.3);
+        color: #22c55e;
+      }
+
+      .permission-btn.reject:hover:not(:disabled) {
+        background: rgba(239, 68, 68, 0.1);
+        border-color: rgba(239, 68, 68, 0.3);
+        color: #ef4444;
+      }
+
+      .permission-btn:disabled {
+        cursor: default;
+        opacity: 0.6;
+      }
+
+      .permission-btn.selected {
+        opacity: 1;
+      }
+
+      .permission-btn.selected.allow {
+        background: rgba(34, 197, 94, 0.15);
+        border-color: rgba(34, 197, 94, 0.4);
+        color: #22c55e;
+      }
+
+      .permission-btn.selected.reject {
+        background: rgba(239, 68, 68, 0.15);
+        border-color: rgba(239, 68, 68, 0.4);
+        color: #ef4444;
+      }
+
+      .permission-btn.dimmed {
+        opacity: 0.35;
+      }
+
+      .permission-auto-resolved {
+        font-size: 11px;
+        color: var(--muted);
+        font-style: italic;
+      }
+
       .status-divider {
         display: flex;
         align-items: center;

frontend/packages/inspector/src/App.tsx

@@ -6,6 +6,8 @@ import {
   type AgentInfo,
   type SessionEvent,
   type Session,
+  type SessionPermissionRequest,
+  type PermissionReply,
   InMemorySessionPersistDriver,
   type SessionPersistDriver,
 } from "sandbox-agent";
@@ -295,6 +297,11 @@ export default function App() {
   const clientRef = useRef<SandboxAgent | null>(null);
   const activeSessionRef = useRef<Session | null>(null);
   const eventUnsubRef = useRef<(() => void) | null>(null);
+  const permissionUnsubRef = useRef<(() => void) | null>(null);
+  const pendingPermissionsRef = useRef<Map<string, SessionPermissionRequest>>(new Map());
+  const permissionToolCallToIdRef = useRef<Map<string, string>>(new Map());
+  const [pendingPermissionIds, setPendingPermissionIds] = useState<Set<string>>(new Set());
+  const [resolvedPermissions, setResolvedPermissions] = useState<Map<string, string>>(new Map());
   const sessionEventsCacheRef = useRef<Map<string, SessionEvent[]>>(new Map());
   const selectedSessionIdRef = useRef(sessionId);
   const resumeInFlightSessionIdRef = useRef<string | null>(null);
@@ -538,8 +545,45 @@ export default function App() {
       });
     });
     eventUnsubRef.current = unsub;
+
+    // Subscribe to permission requests
+    if (permissionUnsubRef.current) {
+      permissionUnsubRef.current();
+      permissionUnsubRef.current = null;
+    }
+    const permUnsub = session.onPermissionRequest((request: SessionPermissionRequest) => {
+      if (!isCurrentSubscription()) return;
+      pendingPermissionsRef.current.set(request.id, request);
+      if (request.toolCall?.toolCallId) {
+        permissionToolCallToIdRef.current.set(request.toolCall.toolCallId, request.id);
+      }
+      setPendingPermissionIds((prev) => new Set([...prev, request.id]));
+    });
+    permissionUnsubRef.current = permUnsub;
   }, [getClient]);
 
+  const handlePermissionReply = useCallback(async (permissionId: string, reply: PermissionReply) => {
+    const session = activeSessionRef.current;
+    if (!session) return;
+    try {
+      await session.respondPermission(permissionId, reply);
+      const request = pendingPermissionsRef.current.get(permissionId);
+      const selectedOption = request?.options.find((o) =>
+        reply === "always" ? o.kind === "allow_always" :
+        reply === "once" ? o.kind === "allow_once" :
+        o.kind === "reject_once" || o.kind === "reject_always"
+      );
+      setResolvedPermissions((prev) => new Map([...prev, [permissionId, selectedOption?.optionId ?? reply]]));
+      setPendingPermissionIds((prev) => {
+        const next = new Set(prev);
+        next.delete(permissionId);
+        return next;
+      });
+    } catch (error) {
+      pushErrorToast(error, "Failed to respond to permission request");
+    }
+  }, [pushErrorToast]);
+
   const connectToDaemon = async (reportError: boolean, overrideEndpoint?: string) => {
     setConnecting(true);
     if (reportError) {
@@ -551,6 +595,10 @@ export default function App() {
         eventUnsubRef.current();
         eventUnsubRef.current = null;
       }
+      if (permissionUnsubRef.current) {
+        permissionUnsubRef.current();
+        permissionUnsubRef.current = null;
+      }
       subscriptionGenerationRef.current += 1;
       activeSessionRef.current = null;
       if (clientRef.current) {
@@ -603,6 +651,10 @@ export default function App() {
       eventUnsubRef.current();
       eventUnsubRef.current = null;
     }
+    if (permissionUnsubRef.current) {
+      permissionUnsubRef.current();
+      permissionUnsubRef.current = null;
+    }
     subscriptionGenerationRef.current += 1;
     activeSessionRef.current = null;
     if (clientRef.current) {
@@ -880,6 +932,10 @@ export default function App() {
         eventUnsubRef.current();
         eventUnsubRef.current = null;
       }
+      if (permissionUnsubRef.current) {
+        permissionUnsubRef.current();
+        permissionUnsubRef.current = null;
+      }
       activeSessionRef.current = null;
       await fetchSessions();
     } catch (error) {
@@ -1165,6 +1221,44 @@ export default function App() {
         continue;
       }
 
+      if (event.sender === "agent" && method === "session/request_permission") {
+        const params = payload.params as {
+          options?: Array<{ optionId: string; name: string; kind: string }>;
+          toolCall?: { title?: string; toolCallId?: string; description?: string };
+        } | undefined;
+        const toolCallId = params?.toolCall?.toolCallId;
+        const sdkPermissionId = toolCallId
+          ? permissionToolCallToIdRef.current.get(toolCallId)
+          : undefined;
+        const permissionId = sdkPermissionId
+          ?? (typeof payload.id === "number" || typeof payload.id === "string"
+            ? String(payload.id)
+            : event.id);
+        const options = (params?.options ?? []).map((o) => ({
+          optionId: o.optionId,
+          name: o.name,
+          kind: o.kind,
+        }));
+        const title = params?.toolCall?.title ?? params?.toolCall?.toolCallId ?? "Permission request";
+        const resolved = resolvedPermissions.get(permissionId);
+        const isPending = pendingPermissionIds.has(permissionId);
+        entries.push({
+          id: event.id,
+          eventId: event.id,
+          kind: "permission",
+          time,
+          permission: {
+            permissionId,
+            title,
+            description: params?.toolCall?.description,
+            options,
+            resolved: resolved != null || !isPending,
+            selectedOptionId: resolved,
+          },
+        });
+        continue;
+      }
+
       if (event.sender === "agent" && method === "_sandboxagent/agent/unparsed") {
         const params = payload.params as { error?: string; location?: string } | undefined;
         entries.push({
@@ -1194,7 +1288,7 @@ export default function App() {
     }
 
     return entries;
-  }, [events]);
+  }, [events, pendingPermissionIds, resolvedPermissions]);
 
   useEffect(() => {
     return () => {
@@ -1202,6 +1296,10 @@ export default function App() {
         eventUnsubRef.current();
         eventUnsubRef.current = null;
       }
+      if (permissionUnsubRef.current) {
+        permissionUnsubRef.current();
+        permissionUnsubRef.current = null;
+      }
     };
   }, []);
 
@@ -1684,6 +1782,7 @@ export default function App() {
           isThinking={isThinking}
           agentId={agentId}
           tokenUsage={tokenUsage}
+          onPermissionReply={handlePermissionReply}
         />
 
         <DebugPanel

frontend/packages/inspector/src/components/chat/ChatMessages.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { getMessageClass } from "./messageUtils";
 import type { TimelineEntry } from "./types";
-import { AlertTriangle, ChevronRight, ChevronDown, Wrench, Brain, Info, ExternalLink, PlayCircle } from "lucide-react";
+import { AlertTriangle, ChevronRight, ChevronDown, Wrench, Brain, Info, ExternalLink, PlayCircle, Shield, Check, X } from "lucide-react";
 import MarkdownText from "./MarkdownText";
 
 const ToolItem = ({
@@ -170,6 +170,73 @@ const ToolGroup = ({ entries, onEventClick }: { entries: TimelineEntry[]; onEven
   );
 };
 
+const PermissionPrompt = ({
+  entry,
+  onPermissionReply,
+}: {
+  entry: TimelineEntry;
+  onPermissionReply?: (permissionId: string, reply: "once" | "always" | "reject") => void;
+}) => {
+  const perm = entry.permission;
+  if (!perm) return null;
+
+  const resolved = perm.resolved;
+  const selectedId = perm.selectedOptionId;
+
+  const replyForOption = (kind: string): "once" | "always" | "reject" => {
+    if (kind === "allow_once") return "once";
+    if (kind === "allow_always") return "always";
+    return "reject";
+  };
+
+  const labelForKind = (kind: string, name: string): string => {
+    if (name) return name;
+    if (kind === "allow_once") return "Allow Once";
+    if (kind === "allow_always") return "Always Allow";
+    if (kind === "reject_once") return "Reject";
+    if (kind === "reject_always") return "Reject Always";
+    return kind;
+  };
+
+  const classForKind = (kind: string): string => {
+    if (kind.startsWith("allow")) return "allow";
+    return "reject";
+  };
+
+  return (
+    <div className={`permission-prompt ${resolved ? "resolved" : ""}`}>
+      <div className="permission-header">
+        <Shield size={14} className="permission-icon" />
+        <span className="permission-title">{perm.title}</span>
+      </div>
+      {perm.description && (
+        <div className="permission-description">{perm.description}</div>
+      )}
+      <div className="permission-actions">
+        {perm.options.map((opt) => {
+          const isSelected = resolved && selectedId === opt.optionId;
+          const wasRejected = resolved && !isSelected && selectedId != null;
+          return (
+            <button
+              key={opt.optionId}
+              type="button"
+              className={`permission-btn ${classForKind(opt.kind)} ${isSelected ? "selected" : ""} ${wasRejected ? "dimmed" : ""}`}
+              disabled={resolved}
+              onClick={() => onPermissionReply?.(perm.permissionId, replyForOption(opt.kind))}
+            >
+              {isSelected && (opt.kind.startsWith("allow") ? <Check size={12} /> : <X size={12} />)}
+              {labelForKind(opt.kind, opt.name)}
+            </button>
+          );
+        })}
+        {resolved && !selectedId && (
+          <span className="permission-auto-resolved">Auto-resolved</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
 const agentLogos: Record<string, string> = {
   claude: `${import.meta.env.BASE_URL}logos/claude.svg`,
   codex: `${import.meta.env.BASE_URL}logos/openai.svg`,
@@ -185,7 +252,8 @@ const ChatMessages = ({
   messagesEndRef,
   onEventClick,
   isThinking,
-  agentId
+  agentId,
+  onPermissionReply,
 }: {
   entries: TimelineEntry[];
   sessionError: string | null;
@@ -194,9 +262,10 @@ const ChatMessages = ({
   onEventClick?: (eventId: string) => void;
   isThinking?: boolean;
   agentId?: string;
+  onPermissionReply?: (permissionId: string, reply: "once" | "always" | "reject") => void;
 }) => {
   // Group consecutive tool/reasoning/meta entries together
-  const groupedEntries: Array<{ type: "message" | "tool-group" | "divider"; entries: TimelineEntry[] }> = [];
+  const groupedEntries: Array<{ type: "message" | "tool-group" | "divider" | "permission"; entries: TimelineEntry[] }> = [];
 
   let currentToolGroup: TimelineEntry[] = [];
 
@@ -211,7 +280,10 @@ const ChatMessages = ({
     const isStatusDivider = entry.kind === "meta" &&
       ["Session Started", "Turn Started", "Turn Ended"].includes(entry.meta?.title ?? "");
 
-    if (isStatusDivider) {
+    if (entry.kind === "permission") {
+      flushToolGroup();
+      groupedEntries.push({ type: "permission", entries: [entry] });
+    } else if (isStatusDivider) {
       flushToolGroup();
       groupedEntries.push({ type: "divider", entries: [entry] });
     } else if (entry.kind === "tool" || entry.kind === "reasoning" || (entry.kind === "meta" && entry.meta?.detail)) {
@@ -242,6 +314,17 @@ const ChatMessages = ({
           );
         }
 
+        if (group.type === "permission") {
+          const entry = group.entries[0];
+          return (
+            <PermissionPrompt
+              key={entry.id}
+              entry={entry}
+              onPermissionReply={onPermissionReply}
+            />
+          );
+        }
+
         if (group.type === "tool-group") {
           return <ToolGroup key={`group-${idx}`} entries={group.entries} onEventClick={onEventClick} />;
         }

frontend/packages/inspector/src/components/chat/ChatPanel.tsx

@@ -57,6 +57,7 @@ const ChatPanel = ({
   isThinking,
   agentId,
   tokenUsage,
+  onPermissionReply,
 }: {
   sessionId: string;
   transcriptEntries: TimelineEntry[];
@@ -87,6 +88,7 @@ const ChatPanel = ({
   isThinking?: boolean;
   agentId?: string;
   tokenUsage?: { used: number; size: number; cost?: number } | null;
+  onPermissionReply?: (permissionId: string, reply: "once" | "always" | "reject") => void;
 }) => {
   const [showAgentMenu, setShowAgentMenu] = useState(false);
   const [copiedSessionId, setCopiedSessionId] = useState(false);
@@ -258,6 +260,7 @@ const ChatPanel = ({
             onEventClick={onEventClick}
             isThinking={isThinking}
             agentId={agentId}
+            onPermissionReply={onPermissionReply}
           />
         )}
       </div>

frontend/packages/inspector/src/components/chat/types.ts

@@ -1,7 +1,13 @@
+export type PermissionOption = {
+  optionId: string;
+  name: string;
+  kind: string;
+};
+
 export type TimelineEntry = {
   id: string;
   eventId?: string; // Links back to the original event for navigation
-  kind: "message" | "tool" | "meta" | "reasoning";
+  kind: "message" | "tool" | "meta" | "reasoning" | "permission";
   time: string;
   // For messages:
   role?: "user" | "assistant";
@@ -15,4 +21,13 @@ export type TimelineEntry = {
   reasoning?: { text: string; visibility?: string };
   // For meta:
   meta?: { title: string; detail?: string; severity?: "info" | "error" };
+  // For permission requests:
+  permission?: {
+    permissionId: string;
+    title: string;
+    description?: string;
+    options: PermissionOption[];
+    resolved?: boolean;
+    selectedOptionId?: string;
+  };
 };