-
- );
-}
-```
-
----
-
-## Handling Questions
-
-When `question.requested` arrives, show a selection UI:
-
-```ts
-const pendingQuestions = new MapAllow: {data.action}
- - - -
-
- );
-}
-```
-
----
-
-## Testing with Mock Agent
-
-The `mock` agent lets you test UI behaviors without external credentials:
-
-```ts
-await client.createSession("test-session", { agent: "mock" });
-```
-
-Send `help` to see available commands:
-
-| Command | Tests |
-|---------|-------|
-| `help` | Lists all commands |
-| `demo` | Full UI coverage sequence with markers |
-| `markdown` | Streaming markdown rendering |
-| `tool` | Tool call + result with file refs |
-| `status` | Status item updates |
-| `image` | Image content part |
-| `permission` | Permission request flow |
-| `question` | Question request flow |
-| `error` | Error + unparsed events |
-| `end` | Session ended event |
-| `echo {data.prompt}
- {data.options.map((option) => ( - - ))} - - -
- {messages.map((msg, i) => (
-
- );
-}
-```
-
-{JSON.stringify(msg)}
- ))}
-
- 
@@ -354,13 +282,13 @@ icon: "rocket"
## Next steps
@@ -28,11 +32,26 @@ const ConnectScreen = ({
- {reportUrl && (
+ {(docsUrl || discordUrl || reportUrl) && (
= {
claude: "Claude Code",
codex: "Codex",
@@ -17,59 +19,6 @@ const agentLabels: Record = {
amp: "Amp"
};
-const validateServerJson = (json: string): string | null => {
- const trimmed = json.trim();
- if (!trimmed) return "Config is required";
- try {
- const parsed = JSON.parse(trimmed);
- if (parsed === null || typeof parsed !== "object" || Array.isArray(parsed)) {
- return "Must be a JSON object";
- }
- if (!parsed.type) return 'Missing "type" field';
- if (parsed.type !== "local" && parsed.type !== "remote") {
- return 'Type must be "local" or "remote"';
- }
- if (parsed.type === "local" && !parsed.command) return 'Local server requires "command"';
- if (parsed.type === "remote" && !parsed.url) return 'Remote server requires "url"';
- return null;
- } catch {
- return "Invalid JSON";
- }
-};
-
-const getServerType = (configJson: string): string | null => {
- try {
- const parsed = JSON.parse(configJson);
- return parsed?.type ?? null;
- } catch {
- return null;
- }
-};
-
-const getServerSummary = (configJson: string): string => {
- try {
- const parsed = JSON.parse(configJson);
- if (parsed?.type === "local") {
- const cmd = Array.isArray(parsed.command) ? parsed.command.join(" ") : parsed.command;
- return cmd ?? "local";
- }
- if (parsed?.type === "remote") {
- return parsed.url ?? "remote";
- }
- return parsed?.type ?? "";
- } catch {
- return "";
- }
-};
-
-const skillSourceSummary = (source: SkillSource): string => {
- let summary = source.source;
- if (source.skills && source.skills.length > 0) {
- summary += ` [${source.skills.join(", ")}]`;
- }
- return summary;
-};
-
const SessionCreateMenu = ({
agents,
agentsLoading,
@@ -77,17 +26,8 @@ const SessionCreateMenu = ({
modesByAgent,
modelsByAgent,
defaultModelByAgent,
- modesLoadingByAgent,
- modelsLoadingByAgent,
- modesErrorByAgent,
- modelsErrorByAgent,
- mcpServers,
- onMcpServersChange,
- mcpConfigError,
- skillSources,
- onSkillSourcesChange,
- onSelectAgent,
onCreateSession,
+ onSelectAgent,
open,
onClose
}: {
@@ -97,60 +37,18 @@ const SessionCreateMenu = ({
modesByAgent: Record;
modelsByAgent: Record;
defaultModelByAgent: Record;
- modesLoadingByAgent: Record;
- modelsLoadingByAgent: Record;
- modesErrorByAgent: Record;
- modelsErrorByAgent: Record;
- mcpServers: McpServerEntry[];
- onMcpServersChange: (servers: McpServerEntry[]) => void;
- mcpConfigError: string | null;
- skillSources: SkillSource[];
- onSkillSourcesChange: (sources: SkillSource[]) => void;
- onSelectAgent: (agentId: string) => void;
onCreateSession: (agentId: string, config: SessionConfig) => void;
+ onSelectAgent: (agentId: string) => Promise;
open: boolean;
onClose: () => void;
}) => {
- const [phase, setPhase] = useState<"agent" | "config">("agent");
+ const [phase, setPhase] = useState<"agent" | "config" | "loading-config">("agent");
const [selectedAgent, setSelectedAgent] = useState("");
const [agentMode, setAgentMode] = useState("");
- const [permissionMode, setPermissionMode] = useState("default");
- const [model, setModel] = useState("");
- const [variant, setVariant] = useState("");
-
- const [mcpExpanded, setMcpExpanded] = useState(false);
- const [skillsExpanded, setSkillsExpanded] = useState(false);
-
- // Skill add/edit state
- const [addingSkill, setAddingSkill] = useState(false);
- const [editingSkillIndex, setEditingSkillIndex] = useState(null);
- const [skillType, setSkillType] = useState<"github" | "local" | "git">("github");
- const [skillSource, setSkillSource] = useState("");
- const [skillFilter, setSkillFilter] = useState("");
- const [skillRef, setSkillRef] = useState("");
- const [skillSubpath, setSkillSubpath] = useState("");
- const [skillLocalError, setSkillLocalError] = useState(null);
- const skillSourceRef = useRef(null);
-
- // MCP add/edit state
- const [addingMcp, setAddingMcp] = useState(false);
- const [editingMcpIndex, setEditingMcpIndex] = useState(null);
- const [mcpName, setMcpName] = useState("");
- const [mcpJson, setMcpJson] = useState("");
- const [mcpLocalError, setMcpLocalError] = useState(null);
- const mcpNameRef = useRef(null);
- const mcpJsonRef = useRef(null);
-
- const cancelSkillEdit = () => {
- setAddingSkill(false);
- setEditingSkillIndex(null);
- setSkillType("github");
- setSkillSource("");
- setSkillFilter("");
- setSkillRef("");
- setSkillSubpath("");
- setSkillLocalError(null);
- };
+ const [selectedModel, setSelectedModel] = useState("");
+ const [customModel, setCustomModel] = useState("");
+ const [isCustomModel, setIsCustomModel] = useState(false);
+ const [configLoadDone, setConfigLoadDone] = useState(false);
// Reset state when menu closes
useEffect(() => {
@@ -158,20 +56,21 @@ const SessionCreateMenu = ({
setPhase("agent");
setSelectedAgent("");
setAgentMode("");
- setPermissionMode("default");
- setModel("");
- setVariant("");
- setMcpExpanded(false);
- setSkillsExpanded(false);
- cancelSkillEdit();
- setAddingMcp(false);
- setEditingMcpIndex(null);
- setMcpName("");
- setMcpJson("");
- setMcpLocalError(null);
+ setSelectedModel("");
+ setCustomModel("");
+ setIsCustomModel(false);
+ setConfigLoadDone(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;
@@ -181,174 +80,60 @@ const SessionCreateMenu = ({
}
}, [modesByAgent, selectedAgent, agentMode]);
- // Focus skill source input when adding
+ // Auto-select default model when agent is selected
useEffect(() => {
- if ((addingSkill || editingSkillIndex !== null) && skillSourceRef.current) {
- skillSourceRef.current.focus();
+ if (!selectedAgent) return;
+ if (selectedModel) return;
+ const defaultModel = defaultModelByAgent[selectedAgent];
+ if (defaultModel) {
+ setSelectedModel(defaultModel);
+ } else {
+ const models = modelsByAgent[selectedAgent];
+ if (models && models.length > 0) {
+ setSelectedModel(models[0].id);
+ }
}
- }, [addingSkill, editingSkillIndex]);
-
- // Focus MCP name input when adding
- useEffect(() => {
- if (addingMcp && mcpNameRef.current) {
- mcpNameRef.current.focus();
- }
- }, [addingMcp]);
-
- // Focus MCP json textarea when editing
- useEffect(() => {
- if (editingMcpIndex !== null && mcpJsonRef.current) {
- mcpJsonRef.current.focus();
- }
- }, [editingMcpIndex]);
+ }, [modelsByAgent, defaultModelByAgent, selectedAgent, selectedModel]);
if (!open) return null;
const handleAgentClick = (agentId: string) => {
setSelectedAgent(agentId);
- setPhase("config");
- onSelectAgent(agentId);
+ setPhase("loading-config");
+ setConfigLoadDone(false);
+ onSelectAgent(agentId).finally(() => {
+ setConfigLoadDone(true);
+ });
};
const handleBack = () => {
setPhase("agent");
setSelectedAgent("");
setAgentMode("");
- setPermissionMode("default");
- setModel("");
- setVariant("");
+ setSelectedModel("");
+ setCustomModel("");
+ setIsCustomModel(false);
+ setConfigLoadDone(false);
};
+ const handleModelSelectChange = (value: string) => {
+ if (value === CUSTOM_MODEL_VALUE) {
+ setIsCustomModel(true);
+ setSelectedModel("");
+ } else {
+ setIsCustomModel(false);
+ setCustomModel("");
+ setSelectedModel(value);
+ }
+ };
+
+ const resolvedModel = isCustomModel ? customModel : selectedModel;
+
const handleCreate = () => {
- if (mcpConfigError) return;
- onCreateSession(selectedAgent, { model, agentMode, permissionMode, variant });
+ onCreateSession(selectedAgent, { agentMode, model: resolvedModel });
onClose();
};
- // Skill source helpers
- const startAddSkill = () => {
- setAddingSkill(true);
- setEditingSkillIndex(null);
- setSkillType("github");
- setSkillSource("rivet-dev/skills");
- setSkillFilter("sandbox-agent");
- setSkillRef("");
- setSkillSubpath("");
- setSkillLocalError(null);
- };
-
- const startEditSkill = (index: number) => {
- const entry = skillSources[index];
- setEditingSkillIndex(index);
- setAddingSkill(false);
- setSkillType(entry.type as "github" | "local" | "git");
- setSkillSource(entry.source);
- setSkillFilter(entry.skills?.join(", ") ?? "");
- setSkillRef(entry.ref ?? "");
- setSkillSubpath(entry.subpath ?? "");
- setSkillLocalError(null);
- };
-
- const commitSkill = () => {
- const src = skillSource.trim();
- if (!src) {
- setSkillLocalError("Source is required");
- return;
- }
- const entry: SkillSource = {
- type: skillType,
- source: src,
- };
- const filterList = skillFilter.trim()
- ? skillFilter.split(",").map((s) => s.trim()).filter(Boolean)
- : undefined;
- if (filterList && filterList.length > 0) entry.skills = filterList;
- if (skillRef.trim()) entry.ref = skillRef.trim();
- if (skillSubpath.trim()) entry.subpath = skillSubpath.trim();
-
- if (editingSkillIndex !== null) {
- const updated = [...skillSources];
- updated[editingSkillIndex] = entry;
- onSkillSourcesChange(updated);
- } else {
- onSkillSourcesChange([...skillSources, entry]);
- }
- cancelSkillEdit();
- };
-
- const removeSkill = (index: number) => {
- onSkillSourcesChange(skillSources.filter((_, i) => i !== index));
- if (editingSkillIndex === index) {
- cancelSkillEdit();
- }
- };
-
- const isEditingSkill = addingSkill || editingSkillIndex !== null;
-
- const startAddMcp = () => {
- setAddingMcp(true);
- setEditingMcpIndex(null);
- setMcpName("everything");
- setMcpJson('{\n "type": "local",\n "command": "npx",\n "args": ["@modelcontextprotocol/server-everything"]\n}');
- setMcpLocalError(null);
- };
-
- const startEditMcp = (index: number) => {
- const entry = mcpServers[index];
- setEditingMcpIndex(index);
- setAddingMcp(false);
- setMcpName(entry.name);
- setMcpJson(entry.configJson);
- setMcpLocalError(entry.error);
- };
-
- const cancelMcpEdit = () => {
- setAddingMcp(false);
- setEditingMcpIndex(null);
- setMcpName("");
- setMcpJson("");
- setMcpLocalError(null);
- };
-
- const commitMcp = () => {
- const name = mcpName.trim();
- if (!name) {
- setMcpLocalError("Server name is required");
- return;
- }
- const error = validateServerJson(mcpJson);
- if (error) {
- setMcpLocalError(error);
- return;
- }
- // Check for duplicate names (except when editing the same entry)
- const duplicate = mcpServers.findIndex((e) => e.name === name);
- if (duplicate !== -1 && duplicate !== editingMcpIndex) {
- setMcpLocalError(`Server "${name}" already exists`);
- return;
- }
-
- const entry: McpServerEntry = { name, configJson: mcpJson.trim(), error: null };
-
- if (editingMcpIndex !== null) {
- const updated = [...mcpServers];
- updated[editingMcpIndex] = entry;
- onMcpServersChange(updated);
- } else {
- onMcpServersChange([...mcpServers, entry]);
- }
- cancelMcpEdit();
- };
-
- const removeMcp = (index: number) => {
- onMcpServersChange(mcpServers.filter((_, i) => i !== index));
- if (editingMcpIndex === index) {
- cancelMcpEdit();
- }
- };
-
- const isEditingMcp = addingMcp || editingMcpIndex !== null;
-
if (phase === "agent") {
return (
-
- Report Bug
-
+ {docsUrl && (
+
+
)}
diff --git a/frontend/packages/inspector/src/components/SessionCreateMenu.tsx b/frontend/packages/inspector/src/components/SessionCreateMenu.tsx
index 96c390f..b20b0af 100644
--- a/frontend/packages/inspector/src/components/SessionCreateMenu.tsx
+++ b/frontend/packages/inspector/src/components/SessionCreateMenu.tsx
@@ -1,15 +1,17 @@
-import { ArrowLeft, ArrowRight, ChevronDown, ChevronRight, Pencil, Plus, X } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import type { McpServerEntry } from "../App";
-import type { AgentInfo, AgentModelInfo, AgentModeInfo, SkillSource } from "../types/legacyApi";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { useEffect, useState } from "react";
+import type { AgentInfo } from "sandbox-agent";
+
+type AgentModeInfo = { id: string; name: string; description: string };
+type AgentModelInfo = { id: string; name?: string };
export type SessionConfig = {
- model: string;
agentMode: string;
- permissionMode: string;
- variant: string;
+ model: string;
};
+const CUSTOM_MODEL_VALUE = "__custom__";
+
const agentLabels: Record
@@ -378,30 +163,25 @@ const SessionCreateMenu = ({
);
}
+ const agentLabel = agentLabels[selectedAgent] ?? selectedAgent;
+
+ if (phase === "loading-config") {
+ return (
+
+
+ );
+ }
+
// Phase 2: config form
const activeModes = modesByAgent[selectedAgent] ?? [];
- const modesLoading = modesLoadingByAgent[selectedAgent] ?? false;
- const modesError = modesErrorByAgent[selectedAgent] ?? null;
- const modelOptions = modelsByAgent[selectedAgent] ?? [];
- const modelsLoading = modelsLoadingByAgent[selectedAgent] ?? false;
- const modelsError = modelsErrorByAgent[selectedAgent] ?? null;
- const defaultModel = defaultModelByAgent[selectedAgent] ?? "";
- const selectedModelId = model || defaultModel;
- const selectedModelObj = modelOptions.find((entry) => entry.id === selectedModelId);
- const variantOptions = selectedModelObj?.variants ?? [];
- const showModelSelect = modelsLoading || Boolean(modelsError) || modelOptions.length > 0;
- const hasModelOptions = modelOptions.length > 0;
- const modelCustom =
- model && hasModelOptions && !modelOptions.some((entry) => entry.id === model);
- const supportsVariants =
- modelsLoading ||
- Boolean(modelsError) ||
- modelOptions.some((entry) => (entry.variants?.length ?? 0) > 0);
- const showVariantSelect =
- supportsVariants && (modelsLoading || Boolean(modelsError) || variantOptions.length > 0);
- const hasVariantOptions = variantOptions.length > 0;
- const variantCustom = variant && hasVariantOptions && !variantOptions.includes(variant);
- const agentLabel = agentLabels[selectedAgent] ?? selectedAgent;
+ const activeModels = modelsByAgent[selectedAgent] ?? [];
return (
+
+ {agentLabel}
+
+ Loading config...
+
@@ -415,330 +195,69 @@ const SessionCreateMenu = ({
Model
- {showModelSelect ? (
-
- ) : (
+ {isCustomModel ? (
setModel(e.target.value)}
- placeholder="Model"
- title="Model"
+ type="text"
+ value={customModel}
+ onChange={(e) => setCustomModel(e.target.value)}
+ placeholder="Enter model name..."
+ autoFocus
/>
- )}
-
-
-
- Mode
-
+ )}
+ {isCustomModel && (
+
+ )}
-
-
- Permission
-
-
-
- {supportsVariants && (
+ {activeModes.length > 0 && (
- Variant
- {showVariantSelect ? (
-
- ) : (
- setVariant(e.target.value)}
- placeholder="Variant"
- title="Variant"
- />
- )}
+ Mode
+
)}
-
- {/* MCP Servers - collapsible */}
-
-
- {mcpExpanded && (
-
- {mcpServers.length > 0 && !isEditingMcp && (
-
- {mcpServers.map((entry, index) => (
-
- )}
- {isEditingMcp ? (
-
-
- ))}
-
- {entry.name}
- {getServerType(entry.configJson) && (
- {getServerType(entry.configJson)}
- )}
- {getServerSummary(entry.configJson)}
-
-
-
-
-
-
- { setMcpName(e.target.value); setMcpLocalError(null); }}
- placeholder="server-name"
- disabled={editingMcpIndex !== null}
- />
-