{errorToasts.map((toast) => (
-
+ {endpoint}
-
@@ -1083,6 +1593,7 @@ export default function App() {
-
+ Request failed
- {toast.message}
- pauseErrorToastDismiss(toast.id)}
+ onMouseLeave={() => resumeErrorToastDismiss(toast.id)}
+ onFocus={() => pauseErrorToastDismiss(toast.id)}
+ onBlur={() => resumeErrorToastDismiss(toast.id)}
+ >
+
))}
+
Request failed
+ {toast.message}
+
@@ -1097,7 +1608,6 @@ export default function App() {
Issues
- {endpoint}
@@ -1130,6 +1640,7 @@ export default function App() {
{
+ if (sessionId) {
+ void archiveSession(sessionId);
+ }
+ }}
+ onUnarchiveSession={() => {
+ if (sessionId) {
+ void unarchiveSession(sessionId);
+ }
+ }}
modesByAgent={modesByAgent}
modelsByAgent={modelsByAgent}
defaultModelByAgent={defaultModelByAgent}
+ onEventClick={(eventId) => {
+ setDebugTab("events");
+ setHighlightedEventId(eventId);
+ }}
+ isThinking={isThinking}
+ agentId={agentId}
+ tokenUsage={tokenUsage}
/>
setEvents([])}
+ highlightedEventId={highlightedEventId}
+ onClearHighlight={() => setHighlightedEventId(null)}
requestLog={requestLog}
copiedLogId={copiedLogId}
onClearRequestLog={() => setRequestLog([])}
diff --git a/frontend/packages/inspector/src/components/SessionCreateMenu.tsx b/frontend/packages/inspector/src/components/SessionCreateMenu.tsx
index b20b0af..e952890 100644
--- a/frontend/packages/inspector/src/components/SessionCreateMenu.tsx
+++ b/frontend/packages/inspector/src/components/SessionCreateMenu.tsx
@@ -16,7 +16,17 @@ const agentLabels: Record = {
claude: "Claude Code",
codex: "Codex",
opencode: "OpenCode",
- amp: "Amp"
+ amp: "Amp",
+ pi: "Pi",
+ cursor: "Cursor"
+};
+
+const agentLogos: Record = {
+ claude: `${import.meta.env.BASE_URL}logos/claude.svg`,
+ codex: `${import.meta.env.BASE_URL}logos/openai.svg`,
+ opencode: `${import.meta.env.BASE_URL}logos/opencode.svg`,
+ amp: `${import.meta.env.BASE_URL}logos/amp.svg`,
+ pi: `${import.meta.env.BASE_URL}logos/pi.svg`,
};
const SessionCreateMenu = ({
@@ -37,7 +47,7 @@ const SessionCreateMenu = ({
modesByAgent: Record;
modelsByAgent: Record;
defaultModelByAgent: Record;
- onCreateSession: (agentId: string, config: SessionConfig) => void;
+ onCreateSession: (agentId: string, config: SessionConfig) => Promise;
onSelectAgent: (agentId: string) => Promise;
open: boolean;
onClose: () => void;
@@ -48,7 +58,7 @@ const SessionCreateMenu = ({
const [selectedModel, setSelectedModel] = useState("");
const [customModel, setCustomModel] = useState("");
const [isCustomModel, setIsCustomModel] = useState(false);
- const [configLoadDone, setConfigLoadDone] = useState(false);
+ const [creating, setCreating] = useState(false);
// Reset state when menu closes
useEffect(() => {
@@ -59,18 +69,10 @@ const SessionCreateMenu = ({
setSelectedModel("");
setCustomModel("");
setIsCustomModel(false);
- setConfigLoadDone(false);
+ setCreating(false);
}
}, [open]);
- // Transition to config phase after load completes — deferred via useEffect
- // so parent props (modelsByAgent) have settled before we render the config form
- useEffect(() => {
- if (phase === "loading-config" && configLoadDone) {
- setPhase("config");
- }
- }, [phase, configLoadDone]);
-
// Auto-select first mode when modes load for selected agent
useEffect(() => {
if (!selectedAgent) return;
@@ -80,6 +82,14 @@ const SessionCreateMenu = ({
}
}, [modesByAgent, selectedAgent, agentMode]);
+ // Agent-specific config should not leak between agent selections.
+ useEffect(() => {
+ setAgentMode("");
+ setSelectedModel("");
+ setCustomModel("");
+ setIsCustomModel(false);
+ }, [selectedAgent]);
+
// Auto-select default model when agent is selected
useEffect(() => {
if (!selectedAgent) return;
@@ -99,21 +109,21 @@ const SessionCreateMenu = ({
const handleAgentClick = (agentId: string) => {
setSelectedAgent(agentId);
- setPhase("loading-config");
- setConfigLoadDone(false);
- onSelectAgent(agentId).finally(() => {
- setConfigLoadDone(true);
+ setPhase("config");
+ // Load agent config in background; creation should not block on this call.
+ void onSelectAgent(agentId).catch((error) => {
+ console.error("[SessionCreateMenu] Failed to load agent config:", error);
});
};
const handleBack = () => {
+ if (creating) return;
setPhase("agent");
setSelectedAgent("");
setAgentMode("");
setSelectedModel("");
setCustomModel("");
setIsCustomModel(false);
- setConfigLoadDone(false);
};
const handleModelSelectChange = (value: string) => {
@@ -129,9 +139,17 @@ const SessionCreateMenu = ({
const resolvedModel = isCustomModel ? customModel : selectedModel;
- const handleCreate = () => {
- onCreateSession(selectedAgent, { agentMode, model: resolvedModel });
- onClose();
+ const handleCreate = async () => {
+ if (!selectedAgent) return;
+ setCreating(true);
+ try {
+ await onCreateSession(selectedAgent, { agentMode, model: resolvedModel });
+ onClose();
+ } catch (error) {
+ console.error("[SessionCreateMenu] Failed to create session:", error);
+ } finally {
+ setCreating(false);
+ }
};
if (phase === "agent") {
@@ -142,43 +160,57 @@ const SessionCreateMenu = ({
{!agentsLoading && !agentsError && agents.length === 0 && (
);
}
const agentLabel = agentLabels[selectedAgent] ?? selectedAgent;
- if (phase === "loading-config") {
- return (
- No agents available.
)}
- {!agentsLoading && !agentsError &&
- agents.map((agent) => (
-
- ))}
+ {!agentsLoading && !agentsError && (() => {
+ const codingAgents = agents.filter((a) => a.id !== "mock");
+ const mockAgent = agents.find((a) => a.id === "mock");
+ return (
+ <>
+ {codingAgents.map((agent) => (
+
+ ))}
+ {mockAgent && (
+ <>
+
+
+
+ )}
+
+ );
+ })()}
-
- );
- }
-
// Phase 2: config form
const activeModes = modesByAgent[selectedAgent] ?? [];
const activeModels = modelsByAgent[selectedAgent] ?? [];
@@ -257,8 +289,8 @@ const SessionCreateMenu = ({
-
- {agentLabel}
-
- Loading config...
-
-
diff --git a/frontend/packages/inspector/src/components/SessionSidebar.tsx b/frontend/packages/inspector/src/components/SessionSidebar.tsx
index d45df21..311032b 100644
--- a/frontend/packages/inspector/src/components/SessionSidebar.tsx
+++ b/frontend/packages/inspector/src/components/SessionSidebar.tsx
@@ -1,6 +1,7 @@
-import { Plus, RefreshCw } from "lucide-react";
+import { Archive, ArrowLeft, ArrowUpRight, Plus, RefreshCw } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import type { AgentInfo } from "sandbox-agent";
+import { formatShortId } from "../utils/format";
type AgentModeInfo = { id: string; name: string; description: string };
type AgentModelInfo = { id: string; name?: string };
@@ -10,6 +11,7 @@ type SessionListItem = {
sessionId: string;
agent: string;
ended: boolean;
+ archived: boolean;
};
const agentLabels: Record
Sessions
);
diff --git a/frontend/packages/inspector/src/components/chat/ChatMessages.tsx b/frontend/packages/inspector/src/components/chat/ChatMessages.tsx
index b57f13c..b35943b 100644
--- a/frontend/packages/inspector/src/components/chat/ChatMessages.tsx
+++ b/frontend/packages/inspector/src/components/chat/ChatMessages.tsx
@@ -1,130 +1,256 @@
import { useState } from "react";
-import { getAvatarLabel, getMessageClass } from "./messageUtils";
+import { getMessageClass } from "./messageUtils";
import type { TimelineEntry } from "./types";
-import { AlertTriangle, Settings, ChevronRight, ChevronDown } from "lucide-react";
+import { AlertTriangle, ChevronRight, ChevronDown, Wrench, Brain, Info, ExternalLink, PlayCircle } from "lucide-react";
-const CollapsibleMessage = ({
- id,
- icon,
- label,
- children,
- className = ""
+const ToolItem = ({
+ entry,
+ isLast,
+ onEventClick
}: {
- id: string;
- icon: React.ReactNode;
- label: string;
- children: React.ReactNode;
- className?: string;
+ entry: TimelineEntry;
+ isLast: boolean;
+ onEventClick?: (eventId: string) => void;
}) => {
const [expanded, setExpanded] = useState(false);
+ const isTool = entry.kind === "tool";
+ const isReasoning = entry.kind === "reasoning";
+ const isMeta = entry.kind === "meta";
+
+ const isComplete = isTool && (entry.toolStatus === "completed" || entry.toolStatus === "failed");
+ const isFailed = isTool && entry.toolStatus === "failed";
+ const isInProgress = isTool && entry.toolStatus === "in_progress";
+
+ let label = "";
+ let icon =
-
Sessions are persisted in your browser using IndexedDB.{" "}
-
+
Configure persistence
+
-
- {expanded && = {
+ claude: `${import.meta.env.BASE_URL}logos/claude.svg`,
+ codex: `${import.meta.env.BASE_URL}logos/openai.svg`,
+ opencode: `${import.meta.env.BASE_URL}logos/opencode.svg`,
+ amp: `${import.meta.env.BASE_URL}logos/amp.svg`,
+ pi: `${import.meta.env.BASE_URL}logos/pi.svg`,
+};
+
const ChatMessages = ({
entries,
sessionError,
- messagesEndRef
+ eventError,
+ messagesEndRef,
+ onEventClick,
+ isThinking,
+ agentId
}: {
entries: TimelineEntry[];
sessionError: string | null;
+ eventError?: string | null;
messagesEndRef: React.RefObject;
+ onEventClick?: (eventId: string) => void;
+ isThinking?: boolean;
+ agentId?: string;
}) => {
+ // Group consecutive tool/reasoning/meta entries together
+ const groupedEntries: Array<{ type: "message" | "tool-group" | "divider"; entries: TimelineEntry[] }> = [];
+
+ let currentToolGroup: TimelineEntry[] = [];
+
+ const flushToolGroup = () => {
+ if (currentToolGroup.length > 0) {
+ groupedEntries.push({ type: "tool-group", entries: currentToolGroup });
+ currentToolGroup = [];
+ }
+ };
+
+ for (const entry of entries) {
+ const isStatusDivider = entry.kind === "meta" &&
+ ["Session Started", "Turn Started", "Turn Ended"].includes(entry.meta?.title ?? "");
+
+ if (isStatusDivider) {
+ flushToolGroup();
+ groupedEntries.push({ type: "divider", entries: [entry] });
+ } else if (entry.kind === "tool" || entry.kind === "reasoning" || (entry.kind === "meta" && entry.meta?.detail)) {
+ currentToolGroup.push(entry);
+ } else if (entry.kind === "meta" && !entry.meta?.detail) {
+ // Simple meta without detail - add to tool group as single item
+ currentToolGroup.push(entry);
+ } else {
+ // Regular message
+ flushToolGroup();
+ groupedEntries.push({ type: "message", entries: [entry] });
+ }
+ }
+ flushToolGroup();
+
return (
{children}
}
+
+
);
};
+const ToolGroup = ({ entries, onEventClick }: { entries: TimelineEntry[]; onEventClick?: (eventId: string) => void }) => {
+ const [expanded, setExpanded] = useState(false);
+
+ // If only one item, render it directly without macro wrapper
+ if (entries.length === 1) {
+ return (
+
+
+ {!isLast && }
+
+
+
+ {expanded && hasContent && (
+
+ {isTool && entry.toolInput && (
+
+ )}
+
+
+ )}
+ {isTool && isComplete && entry.toolOutput && (
+ Input
+ {entry.toolInput}
+
+
+ )}
+ {isReasoning && entry.reasoning?.text && (
+ Output
+ {entry.toolOutput}
+
+
+ )}
+ {isMeta && entry.meta?.detail && (
+ {entry.reasoning.text}
+
+
+ )}
+ {entry.meta.detail}
+
+
+ );
+ }
+
+ const totalCount = entries.length;
+ const summary = `${totalCount} Event${totalCount > 1 ? "s" : ""}`;
+
+ // Check if any are in progress
+ const hasInProgress = entries.some(e => e.kind === "tool" && e.toolStatus === "in_progress");
+ const hasFailed = entries.some(e => e.kind === "tool" && e.toolStatus === "failed");
+
+ return (
+
+
+ {expanded && (
+
+ );
+};
+
+const agentLogos: Record
+ {entries.map((entry, idx) => (
+
+ )}
+
- {entries.map((entry) => {
- const messageClass = getMessageClass(entry);
-
- if (entry.kind === "meta") {
- const isError = entry.meta?.severity === "error";
+ {groupedEntries.map((group, idx) => {
+ if (group.type === "divider") {
+ const entry = group.entries[0];
const title = entry.meta?.title ?? "Status";
- const isStatusDivider = ["Session Started", "Turn Started", "Turn Ended"].includes(title);
-
- if (isStatusDivider) {
- return (
-
-
-
-
- );
- }
-
return (
- {entry.meta.detail}
}
-
- );
- }
-
- if (entry.kind === "reasoning") {
- return (
-
- T}
- label={`tool call - ${entry.toolName ?? "tool"}${statusLabel ? ` (${statusLabel})` : ""}`}
- className={`tool${isFailed ? " error" : ""}`}
- >
- {entry.toolInput &&
- );
+ if (group.type === "tool-group") {
+ return
{getAvatarLabel("assistant")}
-
-
+
- reasoning - {entry.reasoning?.visibility ?? "public"}
-
- {entry.reasoning?.text ?? ""}
-
+
+ {title}
+
);
}
- if (entry.kind === "tool") {
- const isComplete = entry.toolStatus === "completed" || entry.toolStatus === "failed";
- const isFailed = entry.toolStatus === "failed";
- const statusLabel = entry.toolStatus && entry.toolStatus !== "completed"
- ? entry.toolStatus.replace("_", " ")
- : "";
-
- return (
- {entry.toolInput}}
- {isComplete && entry.toolOutput && (
-
-
- )}
- {!isComplete && !entry.toolInput && (
-
-
-
-
-
- )}
- result
- {entry.toolOutput}
-
-
) => void;
- onCreateSession: (agentId: string, config: SessionConfig) => void;
+ onCreateSession: (agentId: string, config: SessionConfig) => Promise;
onSelectAgent: (agentId: string) => Promise;
agents: AgentInfo[];
agentsLoading: boolean;
agentsError: string | null;
messagesEndRef: React.RefObject;
agentLabel: string;
+ modelLabel?: string | null;
currentAgentVersion?: string | null;
sessionEnded: boolean;
+ sessionArchived: boolean;
onEndSession: () => void;
+ onArchiveSession: () => void;
+ onUnarchiveSession: () => void;
modesByAgent: Record;
modelsByAgent: Record;
defaultModelByAgent: Record;
+ onEventClick?: (eventId: string) => void;
+ isThinking?: boolean;
+ agentId?: string;
+ tokenUsage?: { used: number; size: number; cost?: number } | null;
}) => {
const [showAgentMenu, setShowAgentMenu] = useState(false);
+ const [copiedSessionId, setCopiedSessionId] = useState(false);
const menuRef = useRef(null);
useEffect(() => {
@@ -67,21 +104,92 @@ const ChatPanel = ({
return () => document.removeEventListener("mousedown", handler);
}, [showAgentMenu]);
+ const copySessionId = async () => {
+ if (!sessionId) return;
+ const onSuccess = () => {
+ setCopiedSessionId(true);
+ window.setTimeout(() => setCopiedSessionId(false), 1200);
+ };
+ try {
+ if (navigator.clipboard && window.isSecureContext) {
+ await navigator.clipboard.writeText(sessionId);
+ onSuccess();
+ return;
+ }
+ } catch {
+ // Fallback below for older/insecure contexts.
+ }
+
+ const textarea = document.createElement("textarea");
+ textarea.value = sessionId;
+ textarea.style.position = "fixed";
+ textarea.style.opacity = "0";
+ document.body.appendChild(textarea);
+ textarea.select();
+ try {
+ document.execCommand("copy");
+ onSuccess();
+ } finally {
+ document.body.removeChild(textarea);
+ }
+ };
+
+ const handleArchiveSession = () => {
+ if (!sessionId) return;
+ onArchiveSession();
+ };
+
+ const handleUnarchiveSession = () => {
+ if (!sessionId) return;
+ onUnarchiveSession();
+ };
+
return (
(null);
+ const [refreshing, setRefreshing] = useState(false);
const handleInstall = async (agentId: string, reinstall: boolean) => {
setInstallingAgent(agentId);
@@ -34,16 +36,30 @@ const AgentsTab = ({
}
};
+ const handleRefresh = async () => {
+ if (refreshing) return;
+ const startedAt = Date.now();
+ setRefreshing(true);
+ try {
+ await Promise.resolve(onRefresh());
+ } finally {
+ const elapsedMs = Date.now() - startedAt;
+ if (elapsedMs < MIN_REFRESH_SPIN_MS) {
+ await new Promise((resolve) => window.setTimeout(resolve, MIN_REFRESH_SPIN_MS - elapsedMs));
+ }
+ setRefreshing(false);
+ }
+ };
+
return (
<>
): EventIc
const EventsTab = ({
events,
onClear,
+ highlightedEventId,
+ onClearHighlight,
}: {
events: SessionEvent[];
onClear: () => void;
+ highlightedEventId?: string | null;
+ onClearHighlight?: () => void;
}) => {
const [collapsedEvents, setCollapsedEvents] = useState>({});
const [copied, setCopied] = useState(false);
@@ -155,6 +159,25 @@ const EventsTab = ({
}
}, [events.length]);
+ // Scroll to highlighted event (with delay to ensure DOM is ready after tab switch)
+ useEffect(() => {
+ if (highlightedEventId) {
+ const scrollToEvent = () => {
+ const el = document.getElementById(`event-${highlightedEventId}`);
+ if (el) {
+ el.scrollIntoView({ behavior: "smooth", block: "center" });
+ // Clear highlight after animation
+ setTimeout(() => {
+ onClearHighlight?.();
+ }, 2000);
+ }
+ };
+ // Small delay to ensure tab switch and DOM render completes
+ const timer = setTimeout(scrollToEvent, 100);
+ return () => clearTimeout(timer);
+ }
+ }, [highlightedEventId, onClearHighlight]);
+
const getMethod = (event: SessionEvent): string => {
const payload = event.payload as Record;
return typeof payload.method === "string" ? payload.method : "(response)";
@@ -200,8 +223,14 @@ const EventsTab = ({
const time = formatTime(new Date(event.createdAt).toISOString());
const senderClass = event.sender === "client" ? "client" : "agent";
+ const isHighlighted = highlightedEventId === event.id;
+
return (
-
)}
- {entries.map((entry) => (
-
{getAvatarLabel(messageClass)}
+
{entry.text ? (
);
diff --git a/frontend/packages/inspector/src/components/chat/ChatPanel.tsx b/frontend/packages/inspector/src/components/chat/ChatPanel.tsx
index 9c64889..273ccf6 100644
--- a/frontend/packages/inspector/src/components/chat/ChatPanel.tsx
+++ b/frontend/packages/inspector/src/components/chat/ChatPanel.tsx
@@ -1,6 +1,7 @@
-import { CheckSquare, MessageSquare, Plus, Square, Terminal } from "lucide-react";
+import { AlertTriangle, Archive, CheckSquare, MessageSquare, Plus, Square, Terminal } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import type { AgentInfo } from "sandbox-agent";
+import { formatShortId } from "../../utils/format";
type AgentModeInfo = { id: string; name: string; description: string };
type AgentModelInfo = { id: string; name?: string };
@@ -9,9 +10,27 @@ import ChatInput from "./ChatInput";
import ChatMessages from "./ChatMessages";
import type { TimelineEntry } from "./types";
+const HistoryLoadingSkeleton = () => (
+ {entry.text}
@@ -140,6 +266,23 @@ const ChatMessages = ({
);
})}
{sessionError && {sessionError}
}
+ {eventError && {eventError}
}
+ {isThinking && (
+
+
+ )}
+ {agentId && agentLogos[agentId] ? (
+ 
+ ) : (
+ AI
+ )}
+
+
+
+
+
+
+
+
+);
+
const ChatPanel = ({
sessionId,
transcriptEntries,
+ isLoadingHistory,
sessionError,
message,
onMessageChange,
@@ -24,35 +43,53 @@ const ChatPanel = ({
agentsError,
messagesEndRef,
agentLabel,
+ modelLabel,
currentAgentVersion,
sessionEnded,
+ sessionArchived,
onEndSession,
+ onArchiveSession,
+ onUnarchiveSession,
modesByAgent,
modelsByAgent,
defaultModelByAgent,
+ onEventClick,
+ isThinking,
+ agentId,
+ tokenUsage,
}: {
sessionId: string;
transcriptEntries: TimelineEntry[];
+ isLoadingHistory?: boolean;
sessionError: string | null;
message: string;
onMessageChange: (value: string) => void;
onSendMessage: () => void;
onKeyDown: (event: React.KeyboardEvent
+
+
+
+
+
+
+
+
+
+
+
+
+ {sessionId && tokenUsage && (
+ {tokenUsage.used.toLocaleString()} tokens
+ )}
{sessionId && (
sessionEnded ? (
-
-
+ {sessionError && (
+
+
+ )}
+
{!sessionId ? (
);
};
diff --git a/frontend/packages/inspector/src/components/chat/messageUtils.tsx b/frontend/packages/inspector/src/components/chat/messageUtils.tsx
index bdf9f2d..148f3d1 100644
--- a/frontend/packages/inspector/src/components/chat/messageUtils.tsx
+++ b/frontend/packages/inspector/src/components/chat/messageUtils.tsx
@@ -1,5 +1,5 @@
import type { TimelineEntry } from "./types";
-import { Settings, AlertTriangle, User } from "lucide-react";
+import { Settings, AlertTriangle } from "lucide-react";
import type { ReactNode } from "react";
export const getMessageClass = (entry: TimelineEntry) => {
@@ -11,7 +11,7 @@ export const getMessageClass = (entry: TimelineEntry) => {
};
export const getAvatarLabel = (messageClass: string): ReactNode => {
- if (messageClass === "user") return
-
@@ -145,24 +267,9 @@ const ChatPanel = ({
onMessageChange={onMessageChange}
onSendMessage={onSendMessage}
onKeyDown={onKeyDown}
- placeholder={sessionId ? "Send a message..." : "Select or create a session first"}
- disabled={!sessionId}
+ placeholder={sessionEnded ? "Session ended" : sessionId ? "Send a message..." : "Select or create a session first"}
+ disabled={!sessionId || sessionEnded}
/>
-
- {sessionId && (
- No Session Selected
- Create a new session to start chatting with an agent.
+Create a new session to start chatting with an agent.
-
+ isLoadingHistory ? (
+ Ready to Chat
- Send a message to start a conversation with the agent.
-
+
+ )
) : (
Ready to Chat
+ Send a message to start a conversation with the agent.
+
-
- )}
- Agent
- {agentLabel}
-
- {currentAgentVersion && (
-
- Version
- {currentAgentVersion}
-
- )}
-
-
{error && {error}
}
- {loading && Loading agents...
}
{!loading && agents.length === 0 && (
No agents reported. Click refresh to check.
)}
diff --git a/frontend/packages/inspector/src/components/debug/DebugPanel.tsx b/frontend/packages/inspector/src/components/debug/DebugPanel.tsx
index f945355..cd9e816 100644
--- a/frontend/packages/inspector/src/components/debug/DebugPanel.tsx
+++ b/frontend/packages/inspector/src/components/debug/DebugPanel.tsx
@@ -16,6 +16,8 @@ const DebugPanel = ({
onDebugTabChange,
events,
onResetEvents,
+ highlightedEventId,
+ onClearHighlight,
requestLog,
copiedLogId,
onClearRequestLog,
@@ -33,6 +35,8 @@ const DebugPanel = ({
onDebugTabChange: (tab: DebugTab) => void;
events: SessionEvent[];
onResetEvents: () => void;
+ highlightedEventId?: string | null;
+ onClearHighlight?: () => void;
requestLog: RequestLog[];
copiedLogId: number | null;
onClearRequestLog: () => void;
@@ -86,6 +90,8 @@ const DebugPanel = ({
+
- ;
};
+const MCP_DIRECTORY_STORAGE_KEY = "sandbox-agent-inspector-mcp-directory";
+
const McpTab = ({
getClient,
}: {
getClient: () => SandboxAgent;
}) => {
- const [directory, setDirectory] = useState("/");
+ const [directory, setDirectory] = useState(() => {
+ if (typeof window === "undefined") return "/";
+ try {
+ return window.localStorage.getItem(MCP_DIRECTORY_STORAGE_KEY) ?? "/";
+ } catch {
+ return "/";
+ }
+ });
const [entries, setEntries] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
+ const [collapsedServers, setCollapsedServers] = useState>({});
// Add/edit form state
const [editing, setEditing] = useState(false);
@@ -52,6 +62,14 @@ const McpTab = ({
loadAll(directory);
}, [directory, loadAll]);
+ useEffect(() => {
+ try {
+ window.localStorage.setItem(MCP_DIRECTORY_STORAGE_KEY, directory);
+ } catch {
+ // Ignore storage failures.
+ }
+ }, [directory]);
+
const startAdd = () => {
setEditing(true);
setEditName("");
@@ -158,7 +176,7 @@ const McpTab = ({
value={editJson}
onChange={(e) => { setEditJson(e.target.value); setEditError(null); }}
rows={6}
- style={{ width: "100%", boxSizing: "border-box", fontFamily: "monospace", fontSize: 11 }}
+ style={{ width: "100%", boxSizing: "border-box", fontFamily: "monospace", fontSize: 11, resize: "vertical" }}
/>
{editError &&
@@ -180,29 +198,44 @@ const McpTab = ({
- {event.id}
+
diff --git a/frontend/packages/inspector/src/components/debug/McpTab.tsx b/frontend/packages/inspector/src/components/debug/McpTab.tsx
index c6f259c..d9ebcf8 100644
--- a/frontend/packages/inspector/src/components/debug/McpTab.tsx
+++ b/frontend/packages/inspector/src/components/debug/McpTab.tsx
@@ -1,4 +1,4 @@
-import { FolderOpen, Loader2, Plus, Trash2 } from "lucide-react";
+import { ChevronDown, ChevronRight, FolderOpen, Loader2, Plus, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import type { SandboxAgent } from "sandbox-agent";
import { formatJson } from "../../utils/format";
@@ -8,15 +8,25 @@ type McpEntry = {
config: Record
+ {formatShortId(event.id)}
{editError}
}
-
- {entry.name}
- ([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
+ const [copiedId, setCopiedId] = useState(null);
+ const [showSdkSkills, setShowSdkSkills] = useState(false);
+ const [collapsedSkills, setCollapsedSkills] = useState>({});
// Add form state
const [editing, setEditing] = useState(false);
@@ -56,6 +90,14 @@ const SkillsTab = ({
loadAll(directory);
}, [directory, loadAll]);
+ useEffect(() => {
+ try {
+ window.localStorage.setItem(SKILLS_DIRECTORY_STORAGE_KEY, directory);
+ } catch {
+ // Ignore storage failures.
+ }
+ }, [directory]);
+
const startAdd = () => {
setEditing(true);
setEditName("");
@@ -128,11 +170,66 @@ const SkillsTab = ({
}
};
+ const fallbackCopy = (text: string) => {
+ const textarea = document.createElement("textarea");
+ textarea.value = text;
+ textarea.style.position = "fixed";
+ textarea.style.opacity = "0";
+ document.body.appendChild(textarea);
+ textarea.select();
+ document.execCommand("copy");
+ document.body.removeChild(textarea);
+ };
+
+ const copyText = async (id: string, text: string) => {
+ try {
+ if (navigator.clipboard && window.isSecureContext) {
+ await navigator.clipboard.writeText(text);
+ } else {
+ fallbackCopy(text);
+ }
+ setCopiedId(id);
+ window.setTimeout(() => {
+ setCopiedId((current) => (current === id ? null : current));
+ }, 1800);
+ } catch {
+ setError("Failed to copy snippet");
+ }
+ };
+
+ const applySkillPreset = (skill: typeof officialSkills[0]) => {
+ setEditing(true);
+ setEditName(skill.skillId);
+ setEditSource(skill.source);
+ setEditType("github");
+ setEditRef("");
+ setEditSubpath("");
+ setEditSkills(skill.skillId);
+ setEditError(null);
+ setShowSdkSkills(false);
+ };
+
+ const copySkillToInput = async (skillId: string) => {
+ const skill = officialSkills.find((s) => s.skillId === skillId);
+ if (skill) {
+ applySkillPreset(skill);
+ await copyText(`skill-input-${skillId}`, skillId);
+ }
+ };
+
return (
<>
-
- {(entry.config as { type?: string }).type ?? "unknown"}
-
-
+ {entries.map((entry) => {
+ const isCollapsed = collapsedServers[entry.name] ?? true;
+ return (
+
- ))}
+ );
+ })}
);
};
diff --git a/frontend/packages/inspector/src/components/debug/SkillsTab.tsx b/frontend/packages/inspector/src/components/debug/SkillsTab.tsx
index cd2dd92..2a6fab3 100644
--- a/frontend/packages/inspector/src/components/debug/SkillsTab.tsx
+++ b/frontend/packages/inspector/src/components/debug/SkillsTab.tsx
@@ -1,4 +1,4 @@
-import { FolderOpen, Loader2, Plus, Trash2 } from "lucide-react";
+import { ChevronDown, ChevronRight, FolderOpen, Loader2, Plus, Trash2 } from "lucide-react";
import { useCallback, useEffect, useState } from "react";
import type { SandboxAgent } from "sandbox-agent";
import { formatJson } from "../../utils/format";
@@ -8,15 +8,49 @@ type SkillEntry = {
config: { sources: Array<{ source: string; type: string; ref?: string | null; subpath?: string | null; skills?: string[] | null }> };
};
+const SKILLS_DIRECTORY_STORAGE_KEY = "sandbox-agent-inspector-skills-directory";
+
const SkillsTab = ({
getClient,
}: {
getClient: () => SandboxAgent;
}) => {
- const [directory, setDirectory] = useState("/");
+ const officialSkills = [
+ {
+ name: "Sandbox Agent SDK",
+ skillId: "sandbox-agent",
+ source: "rivet-dev/skills",
+ summary: "Skills bundle for fast Sandbox Agent SDK setup and consistent workflows.",
+ },
+ {
+ name: "Rivet",
+ skillId: "rivet",
+ source: "rivet-dev/skills",
+ summary: "Open-source platform for building, deploying, and scaling AI agents.",
+ features: [
+ "Session Persistence",
+ "Resumable Sessions",
+ "Multi-Agent Support",
+ "Realtime Events",
+ "Tool Call Visibility",
+ ],
+ },
+ ];
+
+ const [directory, setDirectory] = useState(() => {
+ if (typeof window === "undefined") return "/";
+ try {
+ return window.localStorage.getItem(SKILLS_DIRECTORY_STORAGE_KEY) ?? "/";
+ } catch {
+ return "/";
+ }
+ });
const [entries, setEntries] = useState
+
-
+
+ {!isCollapsed && (
+
+
+ {entry.name}
+
+
+
+ {(entry.config as { type?: string }).type ?? "unknown"}
+
+
+
+ {formatJson(entry.config)}
+
+ )}
- {formatJson(entry.config)}
-
-
Skills Configuration
-
+
+ {showSdkSkills && (
+
+
{!editing && (
+
+ )}
+
+ Pick a skill to auto-fill the form.
+
+ {officialSkills.map((skill) => (
+
+
+ ))}
+
+
+ {skill.name}
+
+ {skill.summary}
+ {skill.features && (
+
+ {skill.features.map((feature) => (
+
+ {feature}
+
+ ))}
+
+ )}
+
-
- {entry.name}
- | null = null;
private postedOnce = false;
+ private readonly seenResponseIds = new Set();
+ private readonly seenResponseIdOrder: string[] = [];
constructor(options: StreamableHttpAcpTransportOptions) {
this.baseUrl = options.baseUrl.replace(/\/$/, "");
@@ -535,6 +537,21 @@ class StreamableHttpAcpTransport {
return;
}
+ const responseId = responseEnvelopeId(envelope);
+ if (responseId) {
+ if (this.seenResponseIds.has(responseId)) {
+ return;
+ }
+ this.seenResponseIds.add(responseId);
+ this.seenResponseIdOrder.push(responseId);
+ if (this.seenResponseIdOrder.length > 2048) {
+ const oldest = this.seenResponseIdOrder.shift();
+ if (oldest) {
+ this.seenResponseIds.delete(oldest);
+ }
+ }
+ }
+
this.observeEnvelope(envelope, "inbound");
try {
@@ -632,10 +649,32 @@ function buildClientHandlers(client?: Partial): Client {
waitForTerminalExit: client?.waitForTerminalExit,
killTerminal: client?.killTerminal,
extMethod: client?.extMethod,
- extNotification: client?.extNotification,
+ extNotification: async (method: string, params: Record) => {
+ if (client?.extNotification) {
+ await client.extNotification(method, params);
+ }
+ },
};
}
+function responseEnvelopeId(message: AnyMessage): string | null {
+ if (typeof message !== "object" || message === null) {
+ return null;
+ }
+ const record = message as Record;
+ if ("method" in record) {
+ return null;
+ }
+ if (!("result" in record) && !("error" in record)) {
+ return null;
+ }
+ const id = record.id;
+ if (id === null || id === undefined) {
+ return null;
+ }
+ return String(id);
+}
+
async function readProblem(response: Response): Promise {
try {
const text = await response.clone().text();
diff --git a/sdks/typescript/src/client.ts b/sdks/typescript/src/client.ts
index e724e24..4e81909 100644
--- a/sdks/typescript/src/client.ts
+++ b/sdks/typescript/src/client.ts
@@ -175,6 +175,8 @@ export class LiveAcpConnection {
private readonly pendingNewSessionLocals: string[] = [];
private readonly pendingRequestSessionById = new Map();
private readonly pendingReplayByLocalSessionId = new Map();
+ private lastAdapterExit: { success: boolean; code: number | null } | null = null;
+ private lastAdapterExitAt = 0;
private readonly onObservedEnvelope: (
connection: LiveAcpConnection,
@@ -230,6 +232,10 @@ export class LiveAcpConnection {
sessionUpdate: async (_notification: SessionNotification) => {
// Session updates are observed via envelope persistence.
},
+ extNotification: async (method: string, params: Record) => {
+ if (!live) return;
+ live.handleAdapterNotification(method, params);
+ },
},
onEnvelope: (envelope, direction) => {
if (!live) {
@@ -286,6 +292,7 @@ export class LiveAcpConnection {
localSessionId: string,
sessionInit: Omit,
): Promise {
+ const createStartedAt = Date.now();
this.pendingNewSessionLocals.push(localSessionId);
try {
@@ -297,6 +304,11 @@ export class LiveAcpConnection {
if (index !== -1) {
this.pendingNewSessionLocals.splice(index, 1);
}
+ const adapterExit = this.lastAdapterExit;
+ if (adapterExit && this.lastAdapterExitAt >= createStartedAt) {
+ const suffix = adapterExit.code == null ? "" : ` (code ${adapterExit.code})`;
+ throw new Error(`Agent process exited while creating session${suffix}`);
+ }
throw error;
}
}
@@ -356,6 +368,17 @@ export class LiveAcpConnection {
this.onObservedEnvelope(this, envelope, direction, localSessionId);
}
+ private handleAdapterNotification(method: string, params: Record): void {
+ if (method !== "_adapter/agent_exited") {
+ return;
+ }
+ this.lastAdapterExit = {
+ success: params.success === true,
+ code: typeof params.code === "number" ? params.code : null,
+ };
+ this.lastAdapterExitAt = Date.now();
+ }
+
private resolveSessionId(envelope: AnyMessage, direction: AcpEnvelopeDirection): string | null {
const id = envelopeId(envelope);
const method = envelopeMethod(envelope);
@@ -413,6 +436,7 @@ export class SandboxAgent {
private spawnHandle?: SandboxAgentSpawnHandle;
private readonly liveConnections = new Map();
+ private readonly pendingLiveConnections = new Map>();
private readonly sessionHandles = new Map();
private readonly eventListeners = new Map>();
private readonly nextSessionEventIndexBySession = new Map();
@@ -463,6 +487,15 @@ export class SandboxAgent {
async dispose(): Promise {
const connections = [...this.liveConnections.values()];
this.liveConnections.clear();
+ const pending = [...this.pendingLiveConnections.values()];
+ this.pendingLiveConnections.clear();
+
+ const pendingSettled = await Promise.allSettled(pending);
+ for (const item of pendingSettled) {
+ if (item.status === "fulfilled") {
+ connections.push(item.value);
+ }
+ }
await Promise.all(
connections.map(async (connection) => {
@@ -725,21 +758,43 @@ export class SandboxAgent {
return existing;
}
- const serverId = `sdk-${agent}-${randomId()}`;
- const created = await LiveAcpConnection.create({
- baseUrl: this.baseUrl,
- token: this.token,
- fetcher: this.fetcher,
- headers: this.defaultHeaders,
- agent,
- serverId,
- onObservedEnvelope: (connection, envelope, direction, localSessionId) => {
- void this.persistObservedEnvelope(connection, envelope, direction, localSessionId);
- },
- });
+ const pending = this.pendingLiveConnections.get(agent);
+ if (pending) {
+ return pending;
+ }
- this.liveConnections.set(agent, created);
- return created;
+ const creating = (async () => {
+ const serverId = `sdk-${agent}-${randomId()}`;
+ const created = await LiveAcpConnection.create({
+ baseUrl: this.baseUrl,
+ token: this.token,
+ fetcher: this.fetcher,
+ headers: this.defaultHeaders,
+ agent,
+ serverId,
+ onObservedEnvelope: (connection, envelope, direction, localSessionId) => {
+ void this.persistObservedEnvelope(connection, envelope, direction, localSessionId);
+ },
+ });
+
+ const raced = this.liveConnections.get(agent);
+ if (raced) {
+ await created.close();
+ return raced;
+ }
+
+ this.liveConnections.set(agent, created);
+ return created;
+ })();
+
+ this.pendingLiveConnections.set(agent, creating);
+ try {
+ return await creating;
+ } finally {
+ if (this.pendingLiveConnections.get(agent) === creating) {
+ this.pendingLiveConnections.delete(agent);
+ }
+ }
}
private async persistObservedEnvelope(
-
- {entry.config.sources.length} source{entry.config.sources.length !== 1 ? "s" : ""}
-
-
+ {entries.map((entry) => {
+ const isCollapsed = collapsedSkills[entry.name] ?? true;
+ return (
+
- ))}
+ );
+ })}
);
};
diff --git a/frontend/packages/inspector/src/utils/format.ts b/frontend/packages/inspector/src/utils/format.ts
index fca69c7..cce1665 100644
--- a/frontend/packages/inspector/src/utils/format.ts
+++ b/frontend/packages/inspector/src/utils/format.ts
@@ -16,3 +16,9 @@ export const formatTime = (value: string) => {
};
export const escapeSingleQuotes = (value: string) => value.replace(/'/g, `'\\''`);
+
+export const formatShortId = (value: string, head = 8, tail = 4) => {
+ if (!value) return "";
+ if (value.length <= head + tail + 1) return value;
+ return `${value.slice(0, head)}...${value.slice(-tail)}`;
+};
diff --git a/frontend/packages/inspector/vite.config.ts b/frontend/packages/inspector/vite.config.ts
index 076e709..5280cd7 100644
--- a/frontend/packages/inspector/vite.config.ts
+++ b/frontend/packages/inspector/vite.config.ts
@@ -11,10 +11,6 @@ export default defineConfig(({ command }) => ({
target: "http://localhost:2468",
changeOrigin: true,
},
- "/v1": {
- target: "http://localhost:2468",
- changeOrigin: true,
- },
},
},
}));
diff --git a/sdks/acp-http-client/src/index.ts b/sdks/acp-http-client/src/index.ts
index 976a464..5f67997 100644
--- a/sdks/acp-http-client/src/index.ts
+++ b/sdks/acp-http-client/src/index.ts
@@ -271,6 +271,8 @@ class StreamableHttpAcpTransport {
private closed = false;
private closingPromise: Promise
+
-
+
+ {!isCollapsed && (
+
+
+ {entry.name}
+
+
+
+ {entry.config.sources.length} source{entry.config.sources.length !== 1 ? "s" : ""}
+
+
+
+ {formatJson(entry.config)}
+
+ )}
- {formatJson(entry.config)}
-
-