mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-15 06:04:43 +00:00
Add ACP permission mode support to the SDK (#224)
* chore: recover hamburg workspace state * chore: drop workspace context files * refactor: generalize permissions example * refactor: parse permissions example flags * docs: clarify why fs and terminal stay native * 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> * fix: prevent permission reply from silently escalating "once" to "always" Remove allow_always from the fallback chain when the user replies "once", aligning with the ACP spec which says "map by option kind first" with no fallback for allow_once. Also fix Inspector to use rawSend, revert hydration guard to accept empty configOptions, and handle respondPermission errors by rejecting the pending promise. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Nathan Flurry
GitHub
parent
5d65013aa5
commit
76586f409f
35 changed files with 1786 additions and 472 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
@ -818,7 +870,7 @@ export default function App() {
|
|||
// Apply mode if selected
|
||||
if (!skipPostCreateConfig && config.agentMode) {
|
||||
try {
|
||||
await session.send("session/set_mode", { modeId: config.agentMode });
|
||||
await session.rawSend("session/set_mode", { modeId: config.agentMode });
|
||||
} catch {
|
||||
// Mode application is best-effort
|
||||
}
|
||||
|
|
@ -834,7 +886,7 @@ export default function App() {
|
|||
(opt) => opt.category === "model" && opt.type === "select" && typeof opt.id === "string"
|
||||
);
|
||||
if (modelOption && config.model !== modelOption.currentValue) {
|
||||
await session.send("session/set_config_option", {
|
||||
await session.rawSend("session/set_config_option", {
|
||||
optionId: modelOption.id,
|
||||
value: config.model,
|
||||
});
|
||||
|
|
@ -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,43 @@ 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);
|
||||
entries.push({
|
||||
id: event.id,
|
||||
eventId: event.id,
|
||||
kind: "permission",
|
||||
time,
|
||||
permission: {
|
||||
permissionId,
|
||||
title,
|
||||
description: params?.toolCall?.description,
|
||||
options,
|
||||
resolved: resolved != null || sdkPermissionId == null,
|
||||
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 +1287,7 @@ export default function App() {
|
|||
}
|
||||
|
||||
return entries;
|
||||
}, [events]);
|
||||
}, [events, resolvedPermissions]);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
|
|
@ -1202,6 +1295,10 @@ export default function App() {
|
|||
eventUnsubRef.current();
|
||||
eventUnsubRef.current = null;
|
||||
}
|
||||
if (permissionUnsubRef.current) {
|
||||
permissionUnsubRef.current();
|
||||
permissionUnsubRef.current = null;
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
|
@ -1684,6 +1781,7 @@ export default function App() {
|
|||
isThinking={isThinking}
|
||||
agentId={agentId}
|
||||
tokenUsage={tokenUsage}
|
||||
onPermissionReply={handlePermissionReply}
|
||||
/>
|
||||
|
||||
<DebugPanel
|
||||
|
|
|
|||
|
|
@ -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} />;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue