harivansh-afk/sandbox-agent
1
0
Fork 0
mirror of https://github.com/harivansh-afk/sandbox-agent.git synced 2026-04-16 17:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'origin/main' into factory/onboarding-app-shell

Browse source 
# Conflicts:
#	factory/CLAUDE.md
#	factory/packages/backend/package.json
#	factory/packages/client/package.json
#	pnpm-lock.yaml
#	research/acp/friction.md
This commit is contained in:
Nathan Flurry 2026-03-10 21:59:12 -07:00
commit 0a8fda040b
57 changed files with 1465 additions and 503 deletions
Download patch file Download diff file Expand all files Collapse all files

112
frontend/packages/inspector/index.html
View file

@ -1594,6 +1594,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;

104
frontend/packages/inspector/src/App.tsx
View file

@ -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

91
frontend/packages/inspector/src/components/chat/ChatMessages.tsx
View file

@ -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} />;
}

3
frontend/packages/inspector/src/components/chat/ChatPanel.tsx
View file

@ -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>

17
frontend/packages/inspector/src/components/chat/types.ts
View file

@ -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;
};
};