mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-17 12:04:15 +00:00
feat(inspector): improve session UI, skills dropdown, and visual polish (#179)
- Add delete button on ended sessions (visible on hover) - Darken ended sessions with opacity and "ended" pill badge - Sort ended sessions to bottom of list - Add token usage pill in chat header - Disable input when session ended - Add Official Skills dropdown with SDK and Rivet presets - Format session IDs shorter with full ID on hover - Add arrow icon to "Configure persistence" link - Add agent logo SVGs
This commit is contained in:
NicholasKissel
parent
1c381c552a
commit
e134012955
22 changed files with 2283 additions and 395 deletions
|
|
@ -16,7 +16,17 @@ const agentLabels: Record<string, string> = {
|
|||
claude: "Claude Code",
|
||||
codex: "Codex",
|
||||
opencode: "OpenCode",
|
||||
amp: "Amp"
|
||||
amp: "Amp",
|
||||
pi: "Pi",
|
||||
cursor: "Cursor"
|
||||
};
|
||||
|
||||
const agentLogos: Record<string, string> = {
|
||||
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<string, AgentModeInfo[]>;
|
||||
modelsByAgent: Record<string, AgentModelInfo[]>;
|
||||
defaultModelByAgent: Record<string, string>;
|
||||
onCreateSession: (agentId: string, config: SessionConfig) => void;
|
||||
onCreateSession: (agentId: string, config: SessionConfig) => Promise<void>;
|
||||
onSelectAgent: (agentId: string) => Promise<void>;
|
||||
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 && (
|
||||
<div className="sidebar-add-status">No agents available.</div>
|
||||
)}
|
||||
{!agentsLoading && !agentsError &&
|
||||
agents.map((agent) => (
|
||||
<button
|
||||
key={agent.id}
|
||||
className="sidebar-add-option"
|
||||
onClick={() => handleAgentClick(agent.id)}
|
||||
>
|
||||
<div className="agent-option-left">
|
||||
<span className="agent-option-name">{agentLabels[agent.id] ?? agent.id}</span>
|
||||
{agent.version && <span className="agent-option-version">{agent.version}</span>}
|
||||
</div>
|
||||
<div className="agent-option-badges">
|
||||
{agent.installed && <span className="agent-badge installed">Installed</span>}
|
||||
<ArrowRight size={12} className="agent-option-arrow" />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{!agentsLoading && !agentsError && (() => {
|
||||
const codingAgents = agents.filter((a) => a.id !== "mock");
|
||||
const mockAgent = agents.find((a) => a.id === "mock");
|
||||
return (
|
||||
<>
|
||||
{codingAgents.map((agent) => (
|
||||
<button
|
||||
key={agent.id}
|
||||
className="sidebar-add-option"
|
||||
onClick={() => handleAgentClick(agent.id)}
|
||||
>
|
||||
<div className="agent-option-left">
|
||||
{agentLogos[agent.id] && (
|
||||
<img src={agentLogos[agent.id]} alt="" className="agent-option-logo" />
|
||||
)}
|
||||
<span className="agent-option-name">{agentLabels[agent.id] ?? agent.id}</span>
|
||||
{agent.version && <span className="agent-option-version">{agent.version}</span>}
|
||||
</div>
|
||||
<div className="agent-option-badges">
|
||||
{agent.installed && <span className="agent-badge installed">Installed</span>}
|
||||
<ArrowRight size={12} className="agent-option-arrow" />
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
{mockAgent && (
|
||||
<>
|
||||
<div className="agent-divider" />
|
||||
<button
|
||||
className="sidebar-add-option"
|
||||
onClick={() => handleAgentClick(mockAgent.id)}
|
||||
>
|
||||
<div className="agent-option-left">
|
||||
<span className="agent-option-name">{agentLabels[mockAgent.id] ?? mockAgent.id}</span>
|
||||
{mockAgent.version && <span className="agent-option-version">{mockAgent.version}</span>}
|
||||
</div>
|
||||
<div className="agent-option-badges">
|
||||
{mockAgent.installed && <span className="agent-badge installed">Installed</span>}
|
||||
<ArrowRight size={12} className="agent-option-arrow" />
|
||||
</div>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const agentLabel = agentLabels[selectedAgent] ?? selectedAgent;
|
||||
|
||||
if (phase === "loading-config") {
|
||||
return (
|
||||
<div className="session-create-menu">
|
||||
<div className="session-create-header">
|
||||
<button className="session-create-back" onClick={handleBack} title="Back to agents">
|
||||
<ArrowLeft size={14} />
|
||||
</button>
|
||||
<span className="session-create-agent-name">{agentLabel}</span>
|
||||
</div>
|
||||
<div className="sidebar-add-status">Loading config...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Phase 2: config form
|
||||
const activeModes = modesByAgent[selectedAgent] ?? [];
|
||||
const activeModels = modelsByAgent[selectedAgent] ?? [];
|
||||
|
|
@ -257,8 +289,8 @@ const SessionCreateMenu = ({
|
|||
</div>
|
||||
|
||||
<div className="session-create-actions">
|
||||
<button className="button primary" onClick={handleCreate}>
|
||||
Create Session
|
||||
<button className="button primary" onClick={() => void handleCreate()} disabled={creating}>
|
||||
{creating ? "Creating..." : "Create Session"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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<string, string> = {
|
||||
|
|
@ -21,6 +23,7 @@ const agentLabels: Record<string, string> = {
|
|||
cursor: "Cursor"
|
||||
};
|
||||
const persistenceDocsUrl = "https://sandboxagent.dev/docs/session-persistence";
|
||||
const MIN_REFRESH_SPIN_MS = 350;
|
||||
|
||||
const SessionSidebar = ({
|
||||
sessions,
|
||||
|
|
@ -42,7 +45,7 @@ const SessionSidebar = ({
|
|||
selectedSessionId: string;
|
||||
onSelectSession: (session: SessionListItem) => void;
|
||||
onRefresh: () => void;
|
||||
onCreateSession: (agentId: string, config: SessionConfig) => void;
|
||||
onCreateSession: (agentId: string, config: SessionConfig) => Promise<void>;
|
||||
onSelectAgent: (agentId: string) => Promise<void>;
|
||||
agents: AgentInfo[];
|
||||
agentsLoading: boolean;
|
||||
|
|
@ -54,7 +57,16 @@ const SessionSidebar = ({
|
|||
defaultModelByAgent: Record<string, string>;
|
||||
}) => {
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [showArchived, setShowArchived] = useState(false);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const menuRef = useRef<HTMLDivElement | null>(null);
|
||||
const archivedCount = sessions.filter((session) => session.archived).length;
|
||||
const activeSessions = sessions.filter((session) => !session.archived);
|
||||
const archivedSessions = sessions.filter((session) => session.archived);
|
||||
const visibleSessions = showArchived ? archivedSessions : activeSessions;
|
||||
const orderedVisibleSessions = showArchived
|
||||
? [...visibleSessions].sort((a, b) => Number(a.ended) - Number(b.ended))
|
||||
: visibleSessions;
|
||||
|
||||
useEffect(() => {
|
||||
if (!showMenu) return;
|
||||
|
|
@ -68,13 +80,54 @@ const SessionSidebar = ({
|
|||
return () => document.removeEventListener("mousedown", handler);
|
||||
}, [showMenu]);
|
||||
|
||||
useEffect(() => {
|
||||
// Prevent getting stuck in archived view when there are no archived sessions.
|
||||
if (!showArchived) return;
|
||||
if (archivedSessions.length === 0) {
|
||||
setShowArchived(false);
|
||||
}
|
||||
}, [showArchived, archivedSessions.length]);
|
||||
|
||||
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 (
|
||||
<div className="session-sidebar">
|
||||
<div className="sidebar-header">
|
||||
<span className="sidebar-title">Sessions</span>
|
||||
<div className="sidebar-header-actions">
|
||||
<button className="sidebar-icon-btn" onClick={onRefresh} title="Refresh sessions">
|
||||
<RefreshCw size={14} />
|
||||
{archivedCount > 0 && (
|
||||
<button
|
||||
className={`button secondary small ${showArchived ? "active" : ""}`}
|
||||
onClick={() => setShowArchived((value) => !value)}
|
||||
title={showArchived ? "Hide archived sessions" : `Show archived sessions (${archivedCount})`}
|
||||
>
|
||||
{showArchived ? (
|
||||
<ArrowLeft size={12} className="button-icon" />
|
||||
) : (
|
||||
<Archive size={12} className="button-icon" />
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="button secondary small"
|
||||
onClick={() => void handleRefresh()}
|
||||
title="Refresh sessions"
|
||||
disabled={sessionsLoading || refreshing}
|
||||
>
|
||||
<RefreshCw size={12} className={`button-icon ${sessionsLoading || refreshing ? "spinner-icon" : ""}`} />
|
||||
</button>
|
||||
<div className="sidebar-add-menu-wrapper" ref={menuRef}>
|
||||
<button
|
||||
|
|
@ -105,30 +158,41 @@ const SessionSidebar = ({
|
|||
<div className="sidebar-empty">Loading sessions...</div>
|
||||
) : sessionsError ? (
|
||||
<div className="sidebar-empty error">{sessionsError}</div>
|
||||
) : sessions.length === 0 ? (
|
||||
<div className="sidebar-empty">No sessions yet.</div>
|
||||
) : visibleSessions.length === 0 ? (
|
||||
<div className="sidebar-empty">{showArchived ? "No archived sessions." : "No sessions yet."}</div>
|
||||
) : (
|
||||
sessions.map((session) => (
|
||||
<button
|
||||
key={session.sessionId}
|
||||
className={`session-item ${session.sessionId === selectedSessionId ? "active" : ""}`}
|
||||
onClick={() => onSelectSession(session)}
|
||||
>
|
||||
<div className="session-item-id">{session.sessionId}</div>
|
||||
<div className="session-item-meta">
|
||||
<span className="session-item-agent">{agentLabels[session.agent] ?? session.agent}</span>
|
||||
{session.ended && <span className="session-item-ended">ended</span>}
|
||||
</div>
|
||||
</button>
|
||||
))
|
||||
<>
|
||||
{showArchived && <div className="sidebar-empty">Archived Sessions</div>}
|
||||
{orderedVisibleSessions.map((session) => (
|
||||
<div
|
||||
key={session.sessionId}
|
||||
className={`session-item ${session.sessionId === selectedSessionId ? "active" : ""} ${session.ended ? "ended" : ""} ${session.archived ? "ended" : ""}`}
|
||||
>
|
||||
<button
|
||||
className="session-item-content"
|
||||
onClick={() => onSelectSession(session)}
|
||||
>
|
||||
<div className="session-item-id" title={session.sessionId}>
|
||||
{formatShortId(session.sessionId)}
|
||||
</div>
|
||||
<div className="session-item-meta">
|
||||
<span className="session-item-agent">
|
||||
{agentLabels[session.agent] ?? session.agent}
|
||||
</span>
|
||||
{(session.archived || session.ended) && <span className="session-item-ended">ended</span>}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="session-persistence-note">
|
||||
Sessions are persisted in your browser using IndexedDB.{" "}
|
||||
<a href={persistenceDocsUrl} target="_blank" rel="noreferrer">
|
||||
<a href={persistenceDocsUrl} target="_blank" rel="noreferrer" style={{ display: "inline-flex", alignItems: "center", gap: 2 }}>
|
||||
Configure persistence
|
||||
<ArrowUpRight size={10} />
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 = <Info size={12} />;
|
||||
|
||||
if (isTool) {
|
||||
const statusLabel = entry.toolStatus && entry.toolStatus !== "completed"
|
||||
? ` (${entry.toolStatus.replace("_", " ")})`
|
||||
: "";
|
||||
label = `${entry.toolName ?? "tool"}${statusLabel}`;
|
||||
icon = <Wrench size={12} />;
|
||||
} else if (isReasoning) {
|
||||
label = `Reasoning${entry.reasoning?.visibility ? ` (${entry.reasoning.visibility})` : ""}`;
|
||||
icon = <Brain size={12} />;
|
||||
} else if (isMeta) {
|
||||
label = entry.meta?.title ?? "Status";
|
||||
icon = entry.meta?.severity === "error" ? <AlertTriangle size={12} /> : <Info size={12} />;
|
||||
}
|
||||
|
||||
const hasContent = isTool
|
||||
? Boolean(entry.toolInput || entry.toolOutput)
|
||||
: isReasoning
|
||||
? Boolean(entry.reasoning?.text?.trim())
|
||||
: Boolean(entry.meta?.detail?.trim());
|
||||
const canOpenEvent = Boolean(
|
||||
entry.eventId &&
|
||||
onEventClick &&
|
||||
!(isMeta && entry.meta?.title === "Available commands update"),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`collapsible-message ${className}`}>
|
||||
<button className="collapsible-header" onClick={() => setExpanded(!expanded)}>
|
||||
{expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
||||
{icon}
|
||||
<span>{label}</span>
|
||||
</button>
|
||||
{expanded && <div className="collapsible-content">{children}</div>}
|
||||
<div className={`tool-item ${isLast ? "last" : ""} ${isFailed ? "failed" : ""}`}>
|
||||
<div className="tool-item-connector">
|
||||
<div className="tool-item-dot" />
|
||||
{!isLast && <div className="tool-item-line" />}
|
||||
</div>
|
||||
<div className="tool-item-content">
|
||||
<button
|
||||
className={`tool-item-header ${expanded ? "expanded" : ""}`}
|
||||
onClick={() => hasContent && setExpanded(!expanded)}
|
||||
disabled={!hasContent}
|
||||
>
|
||||
<span className="tool-item-icon">{icon}</span>
|
||||
<span className="tool-item-label">{label}</span>
|
||||
{isInProgress && (
|
||||
<span className="tool-item-spinner">
|
||||
<span className="thinking-dot" />
|
||||
<span className="thinking-dot" />
|
||||
<span className="thinking-dot" />
|
||||
</span>
|
||||
)}
|
||||
{canOpenEvent && (
|
||||
<span
|
||||
className="tool-item-link"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEventClick(entry.eventId!);
|
||||
}}
|
||||
title="View in Events"
|
||||
>
|
||||
<ExternalLink size={10} />
|
||||
</span>
|
||||
)}
|
||||
{hasContent && (
|
||||
<span className="tool-item-chevron">
|
||||
{expanded ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
{expanded && hasContent && (
|
||||
<div className="tool-item-body">
|
||||
{isTool && entry.toolInput && (
|
||||
<div className="tool-section">
|
||||
<div className="tool-section-title">Input</div>
|
||||
<pre className="tool-code">{entry.toolInput}</pre>
|
||||
</div>
|
||||
)}
|
||||
{isTool && isComplete && entry.toolOutput && (
|
||||
<div className="tool-section">
|
||||
<div className="tool-section-title">Output</div>
|
||||
<pre className="tool-code">{entry.toolOutput}</pre>
|
||||
</div>
|
||||
)}
|
||||
{isReasoning && entry.reasoning?.text && (
|
||||
<div className="tool-section">
|
||||
<pre className="tool-code muted">{entry.reasoning.text}</pre>
|
||||
</div>
|
||||
)}
|
||||
{isMeta && entry.meta?.detail && (
|
||||
<div className="tool-section">
|
||||
<pre className="tool-code">{entry.meta.detail}</pre>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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 (
|
||||
<div className="tool-group-single">
|
||||
<ToolItem entry={entries[0]} isLast={true} onEventClick={onEventClick} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className={`tool-group-container ${hasFailed ? "failed" : ""}`}>
|
||||
<button
|
||||
className={`tool-group-header ${expanded ? "expanded" : ""}`}
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
>
|
||||
<span className="tool-group-icon">
|
||||
<PlayCircle size={14} />
|
||||
</span>
|
||||
<span className="tool-group-label">{summary}</span>
|
||||
<span className="tool-group-chevron">
|
||||
{expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
|
||||
</span>
|
||||
</button>
|
||||
{expanded && (
|
||||
<div className="tool-group">
|
||||
{entries.map((entry, idx) => (
|
||||
<ToolItem
|
||||
key={entry.id}
|
||||
entry={entry}
|
||||
isLast={idx === entries.length - 1}
|
||||
onEventClick={onEventClick}
|
||||
/>
|
||||
))}
|
||||
</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`,
|
||||
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<HTMLDivElement>;
|
||||
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 (
|
||||
<div className="messages">
|
||||
{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 (
|
||||
<div key={entry.id} className="status-divider">
|
||||
<div className="status-divider-line" />
|
||||
<span className="status-divider-text">
|
||||
<Settings size={12} />
|
||||
{title}
|
||||
</span>
|
||||
<div className="status-divider-line" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<CollapsibleMessage
|
||||
key={entry.id}
|
||||
id={entry.id}
|
||||
icon={isError ? <AlertTriangle size={14} className="error-icon" /> : <Settings size={14} className="system-icon" />}
|
||||
label={title}
|
||||
className={isError ? "error" : "system"}
|
||||
>
|
||||
{entry.meta?.detail && <div className="part-body">{entry.meta.detail}</div>}
|
||||
</CollapsibleMessage>
|
||||
);
|
||||
}
|
||||
|
||||
if (entry.kind === "reasoning") {
|
||||
return (
|
||||
<div key={entry.id} className="message assistant">
|
||||
<div className="avatar">{getAvatarLabel("assistant")}</div>
|
||||
<div className="message-content">
|
||||
<div className="message-meta">
|
||||
<span>reasoning - {entry.reasoning?.visibility ?? "public"}</span>
|
||||
</div>
|
||||
<div className="part-body muted">{entry.reasoning?.text ?? ""}</div>
|
||||
</div>
|
||||
<div key={entry.id} className="status-divider">
|
||||
<div className="status-divider-line" />
|
||||
<span className="status-divider-text">{title}</span>
|
||||
<div className="status-divider-line" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<CollapsibleMessage
|
||||
key={entry.id}
|
||||
id={entry.id}
|
||||
icon={<span className="tool-icon">T</span>}
|
||||
label={`tool call - ${entry.toolName ?? "tool"}${statusLabel ? ` (${statusLabel})` : ""}`}
|
||||
className={`tool${isFailed ? " error" : ""}`}
|
||||
>
|
||||
{entry.toolInput && <pre className="code-block">{entry.toolInput}</pre>}
|
||||
{isComplete && entry.toolOutput && (
|
||||
<div className="part">
|
||||
<div className="part-title">result</div>
|
||||
<pre className="code-block">{entry.toolOutput}</pre>
|
||||
</div>
|
||||
)}
|
||||
{!isComplete && !entry.toolInput && (
|
||||
<span className="thinking-indicator">
|
||||
<span className="thinking-dot" />
|
||||
<span className="thinking-dot" />
|
||||
<span className="thinking-dot" />
|
||||
</span>
|
||||
)}
|
||||
</CollapsibleMessage>
|
||||
);
|
||||
if (group.type === "tool-group") {
|
||||
return <ToolGroup key={`group-${idx}`} entries={group.entries} onEventClick={onEventClick} />;
|
||||
}
|
||||
|
||||
// Regular message
|
||||
const entry = group.entries[0];
|
||||
const messageClass = getMessageClass(entry);
|
||||
|
||||
return (
|
||||
<div key={entry.id} className={`message ${messageClass}`}>
|
||||
<div className="avatar">{getAvatarLabel(messageClass)}</div>
|
||||
<div key={entry.id} className={`message ${messageClass} no-avatar`}>
|
||||
<div className="message-content">
|
||||
{entry.text ? (
|
||||
<div className="part-body">{entry.text}</div>
|
||||
|
|
@ -140,6 +266,23 @@ const ChatMessages = ({
|
|||
);
|
||||
})}
|
||||
{sessionError && <div className="message-error">{sessionError}</div>}
|
||||
{eventError && <div className="message-error">{eventError}</div>}
|
||||
{isThinking && (
|
||||
<div className="thinking-row">
|
||||
<div className="thinking-avatar">
|
||||
{agentId && agentLogos[agentId] ? (
|
||||
<img src={agentLogos[agentId]} alt="" className="thinking-avatar-img" />
|
||||
) : (
|
||||
<span className="ai-label">AI</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="thinking-indicator">
|
||||
<span className="thinking-dot" />
|
||||
<span className="thinking-dot" />
|
||||
<span className="thinking-dot" />
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<div ref={messagesEndRef} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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 = () => (
|
||||
<div className="chat-loading-skeleton" aria-hidden>
|
||||
<div className="chat-skeleton-row assistant">
|
||||
<div className="chat-skeleton-bubble w-lg" />
|
||||
</div>
|
||||
<div className="chat-skeleton-row user">
|
||||
<div className="chat-skeleton-bubble w-md" />
|
||||
</div>
|
||||
<div className="chat-skeleton-row assistant">
|
||||
<div className="chat-skeleton-bubble w-xl" />
|
||||
</div>
|
||||
<div className="chat-skeleton-row assistant">
|
||||
<div className="chat-skeleton-bubble w-sm" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
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<HTMLTextAreaElement>) => void;
|
||||
onCreateSession: (agentId: string, config: SessionConfig) => void;
|
||||
onCreateSession: (agentId: string, config: SessionConfig) => Promise<void>;
|
||||
onSelectAgent: (agentId: string) => Promise<void>;
|
||||
agents: AgentInfo[];
|
||||
agentsLoading: boolean;
|
||||
agentsError: string | null;
|
||||
messagesEndRef: React.RefObject<HTMLDivElement>;
|
||||
agentLabel: string;
|
||||
modelLabel?: string | null;
|
||||
currentAgentVersion?: string | null;
|
||||
sessionEnded: boolean;
|
||||
sessionArchived: boolean;
|
||||
onEndSession: () => void;
|
||||
onArchiveSession: () => void;
|
||||
onUnarchiveSession: () => void;
|
||||
modesByAgent: Record<string, AgentModeInfo[]>;
|
||||
modelsByAgent: Record<string, AgentModelInfo[]>;
|
||||
defaultModelByAgent: Record<string, string>;
|
||||
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<HTMLDivElement | null>(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 (
|
||||
<div className="chat-panel">
|
||||
<div className="panel-header">
|
||||
<div className="panel-header-left">
|
||||
<MessageSquare className="button-icon" />
|
||||
<span className="panel-title">{sessionId ? "Session" : "No Session"}</span>
|
||||
{sessionId && <span className="session-id-display">{sessionId}</span>}
|
||||
<span className="panel-title">{sessionId ? agentLabel : "No Session"}</span>
|
||||
{sessionId && modelLabel && (
|
||||
<span className="header-meta-pill" title={modelLabel}>
|
||||
{modelLabel}
|
||||
</span>
|
||||
)}
|
||||
{sessionId && currentAgentVersion && (
|
||||
<span className="header-meta-pill">v{currentAgentVersion}</span>
|
||||
)}
|
||||
{sessionId && (
|
||||
<button
|
||||
type="button"
|
||||
className="session-id-display"
|
||||
title={copiedSessionId ? "Copied" : `${sessionId} (click to copy)`}
|
||||
onClick={() => void copySessionId()}
|
||||
>
|
||||
{copiedSessionId ? "Copied" : formatShortId(sessionId)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="panel-header-right">
|
||||
{sessionId && tokenUsage && (
|
||||
<span className="token-pill">{tokenUsage.used.toLocaleString()} tokens</span>
|
||||
)}
|
||||
{sessionId && (
|
||||
sessionEnded ? (
|
||||
<span className="button ghost small" style={{ opacity: 0.5, cursor: "default" }} title="Session ended">
|
||||
<CheckSquare size={12} />
|
||||
Ended
|
||||
</span>
|
||||
<>
|
||||
<span className="button ghost small session-ended-status" title="Session ended">
|
||||
<CheckSquare size={12} />
|
||||
Ended
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="button ghost small"
|
||||
onClick={sessionArchived ? handleUnarchiveSession : handleArchiveSession}
|
||||
title={sessionArchived ? "Unarchive session" : "Archive session"}
|
||||
>
|
||||
<Archive size={12} />
|
||||
{sessionArchived ? "Unarchive" : "Archive"}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
|
|
@ -97,12 +205,18 @@ const ChatPanel = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{sessionError && (
|
||||
<div className="error-banner">
|
||||
<AlertTriangle size={14} />
|
||||
<span>{sessionError}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="messages-container">
|
||||
{!sessionId ? (
|
||||
<div className="empty-state">
|
||||
<MessageSquare className="empty-state-icon" />
|
||||
<div className="empty-state-title">No Session Selected</div>
|
||||
<p className="empty-state-text">Create a new session to start chatting with an agent.</p>
|
||||
<p className="empty-state-text no-session-subtext">Create a new session to start chatting with an agent.</p>
|
||||
<div className="empty-state-menu-wrapper" ref={menuRef}>
|
||||
<button
|
||||
className="button primary"
|
||||
|
|
@ -126,16 +240,24 @@ const ChatPanel = ({
|
|||
</div>
|
||||
</div>
|
||||
) : transcriptEntries.length === 0 && !sessionError ? (
|
||||
<div className="empty-state">
|
||||
<Terminal className="empty-state-icon" />
|
||||
<div className="empty-state-title">Ready to Chat</div>
|
||||
<p className="empty-state-text">Send a message to start a conversation with the agent.</p>
|
||||
</div>
|
||||
isLoadingHistory ? (
|
||||
<HistoryLoadingSkeleton />
|
||||
) : (
|
||||
<div className="empty-state">
|
||||
<Terminal className="empty-state-icon" />
|
||||
<div className="empty-state-title">Ready to Chat</div>
|
||||
<p className="empty-state-text">Send a message to start a conversation with the agent.</p>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<ChatMessages
|
||||
entries={transcriptEntries}
|
||||
sessionError={sessionError}
|
||||
eventError={null}
|
||||
messagesEndRef={messagesEndRef}
|
||||
onEventClick={onEventClick}
|
||||
isThinking={isThinking}
|
||||
agentId={agentId}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -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 && (
|
||||
<div className="session-config-bar">
|
||||
<div className="session-config-field">
|
||||
<span className="session-config-label">Agent</span>
|
||||
<span className="session-config-value">{agentLabel}</span>
|
||||
</div>
|
||||
{currentAgentVersion && (
|
||||
<div className="session-config-field">
|
||||
<span className="session-config-label">Version</span>
|
||||
<span className="session-config-value">{currentAgentVersion}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 <User size={14} />;
|
||||
if (messageClass === "user") return null;
|
||||
if (messageClass === "tool") return "T";
|
||||
if (messageClass === "system") return <Settings size={14} />;
|
||||
if (messageClass === "error") return <AlertTriangle size={14} />;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
export type TimelineEntry = {
|
||||
id: string;
|
||||
eventId?: string; // Links back to the original event for navigation
|
||||
kind: "message" | "tool" | "meta" | "reasoning";
|
||||
time: string;
|
||||
// For messages:
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import type { AgentInfo } from "sandbox-agent";
|
|||
type AgentModeInfo = { id: string; name: string; description: string };
|
||||
import FeatureCoverageBadges from "../agents/FeatureCoverageBadges";
|
||||
import { emptyFeatureCoverage } from "../../types/agents";
|
||||
const MIN_REFRESH_SPIN_MS = 350;
|
||||
|
||||
const AgentsTab = ({
|
||||
agents,
|
||||
|
|
@ -24,6 +25,7 @@ const AgentsTab = ({
|
|||
error: string | null;
|
||||
}) => {
|
||||
const [installingAgent, setInstallingAgent] = useState<string | null>(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 (
|
||||
<>
|
||||
<div className="inline-row" style={{ marginBottom: 16 }}>
|
||||
<button className="button secondary small" onClick={onRefresh} disabled={loading}>
|
||||
<RefreshCw className="button-icon" /> Refresh
|
||||
<button className="button secondary small" onClick={() => void handleRefresh()} disabled={loading || refreshing}>
|
||||
<RefreshCw className={`button-icon ${loading || refreshing ? "spinner-icon" : ""}`} /> Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error && <div className="banner error">{error}</div>}
|
||||
{loading && <div className="card-meta">Loading agents...</div>}
|
||||
{!loading && agents.length === 0 && (
|
||||
<div className="card-meta">No agents reported. Click refresh to check.</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -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 = ({
|
|||
<EventsTab
|
||||
events={events}
|
||||
onClear={onResetEvents}
|
||||
highlightedEventId={highlightedEventId}
|
||||
onClearHighlight={onClearHighlight}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -28,9 +28,9 @@ import {
|
|||
Wrench,
|
||||
type LucideIcon,
|
||||
} from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import type { SessionEvent } from "sandbox-agent";
|
||||
import { formatJson, formatTime } from "../../utils/format";
|
||||
import { formatJson, formatShortId, formatTime } from "../../utils/format";
|
||||
|
||||
type EventIconInfo = { Icon: LucideIcon; category: string };
|
||||
|
||||
|
|
@ -111,9 +111,13 @@ function getEventIcon(method: string, payload: Record<string, unknown>): EventIc
|
|||
const EventsTab = ({
|
||||
events,
|
||||
onClear,
|
||||
highlightedEventId,
|
||||
onClearHighlight,
|
||||
}: {
|
||||
events: SessionEvent[];
|
||||
onClear: () => void;
|
||||
highlightedEventId?: string | null;
|
||||
onClearHighlight?: () => void;
|
||||
}) => {
|
||||
const [collapsedEvents, setCollapsedEvents] = useState<Record<string, boolean>>({});
|
||||
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<string, unknown>;
|
||||
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 (
|
||||
<div key={eventKey} className={`event-item ${isCollapsed ? "collapsed" : "expanded"}`}>
|
||||
<div
|
||||
key={eventKey}
|
||||
id={`event-${event.id}`}
|
||||
className={`event-item ${isCollapsed ? "collapsed" : "expanded"} ${isHighlighted ? "highlighted" : ""}`}
|
||||
>
|
||||
<button
|
||||
className="event-summary"
|
||||
type="button"
|
||||
|
|
@ -219,8 +248,8 @@ const EventsTab = ({
|
|||
</span>
|
||||
<span className="event-time">{time}</span>
|
||||
</div>
|
||||
<div className="event-id">
|
||||
{event.id}
|
||||
<div className="event-id" title={event.id}>
|
||||
{formatShortId(event.id)}
|
||||
</div>
|
||||
</div>
|
||||
<span className="event-chevron">
|
||||
|
|
|
|||
|
|
@ -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<string, unknown>;
|
||||
};
|
||||
|
||||
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<McpEntry[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [collapsedServers, setCollapsedServers] = useState<Record<string, boolean>>({});
|
||||
|
||||
// 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 && <div className="banner error" style={{ marginTop: 4 }}>{editError}</div>}
|
||||
</div>
|
||||
|
|
@ -180,29 +198,44 @@ const McpTab = ({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{entries.map((entry) => (
|
||||
<div key={entry.name} className="card" style={{ marginBottom: 8 }}>
|
||||
<div className="card-header">
|
||||
<span className="card-title">{entry.name}</span>
|
||||
<div className="card-header-pills">
|
||||
<span className="pill accent">
|
||||
{(entry.config as { type?: string }).type ?? "unknown"}
|
||||
</span>
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={() => remove(entry.name)}
|
||||
title="Remove"
|
||||
style={{ padding: "2px 4px" }}
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
{entries.map((entry) => {
|
||||
const isCollapsed = collapsedServers[entry.name] ?? true;
|
||||
return (
|
||||
<div key={entry.name} className="card" style={{ marginBottom: 8 }}>
|
||||
<div className="card-header">
|
||||
<div className="inline-row" style={{ gap: 6 }}>
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={() => setCollapsedServers((prev) => ({ ...prev, [entry.name]: !(prev[entry.name] ?? true) }))}
|
||||
title={isCollapsed ? "Expand" : "Collapse"}
|
||||
style={{ padding: "2px 4px" }}
|
||||
>
|
||||
{isCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
|
||||
</button>
|
||||
<span className="card-title">{entry.name}</span>
|
||||
</div>
|
||||
<div className="card-header-pills">
|
||||
<span className="pill accent">
|
||||
{(entry.config as { type?: string }).type ?? "unknown"}
|
||||
</span>
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={() => remove(entry.name)}
|
||||
title="Remove"
|
||||
style={{ padding: "2px 4px" }}
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<pre className="code-block" style={{ marginTop: 4, fontSize: 10 }}>
|
||||
{formatJson(entry.config)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
<pre className="code-block" style={{ marginTop: 4, fontSize: 10 }}>
|
||||
{formatJson(entry.config)}
|
||||
</pre>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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<SkillEntry[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
const [showSdkSkills, setShowSdkSkills] = useState(false);
|
||||
const [collapsedSkills, setCollapsedSkills] = useState<Record<string, boolean>>({});
|
||||
|
||||
// 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 (
|
||||
<>
|
||||
<div className="inline-row" style={{ marginBottom: 12, justifyContent: "space-between" }}>
|
||||
<span className="card-meta">Skills Configuration</span>
|
||||
<div className="inline-row">
|
||||
<div className="inline-row" style={{ gap: 6 }}>
|
||||
<button
|
||||
className="button secondary small"
|
||||
onClick={() => setShowSdkSkills((prev) => !prev)}
|
||||
title="Toggle official skills list"
|
||||
>
|
||||
{showSdkSkills ? <ChevronDown className="button-icon" style={{ width: 12, height: 12 }} /> : <ChevronRight className="button-icon" style={{ width: 12, height: 12 }} />}
|
||||
Official Skills
|
||||
</button>
|
||||
{!editing && (
|
||||
<button className="button secondary small" onClick={startAdd}>
|
||||
<Plus className="button-icon" style={{ width: 12, height: 12 }} />
|
||||
|
|
@ -142,6 +239,43 @@ const SkillsTab = ({
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{showSdkSkills && (
|
||||
<div className="card" style={{ marginBottom: 12 }}>
|
||||
<div className="card-meta" style={{ marginBottom: 8 }}>
|
||||
Pick a skill to auto-fill the form.
|
||||
</div>
|
||||
{officialSkills.map((skill) => (
|
||||
<div
|
||||
key={skill.name}
|
||||
style={{
|
||||
border: "1px solid var(--border)",
|
||||
borderRadius: 6,
|
||||
padding: "8px 10px",
|
||||
background: "var(--surface-2)",
|
||||
marginBottom: 6,
|
||||
}}
|
||||
>
|
||||
<div className="inline-row" style={{ justifyContent: "space-between", gap: 8, marginBottom: 4 }}>
|
||||
<div style={{ fontWeight: 500, fontSize: 12 }}>{skill.name}</div>
|
||||
<button className="button ghost small" onClick={() => void copySkillToInput(skill.skillId)}>
|
||||
{copiedId === `skill-input-${skill.skillId}` ? "Filled" : "Use"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="card-meta" style={{ fontSize: 10, marginBottom: skill.features ? 6 : 0 }}>{skill.summary}</div>
|
||||
{skill.features && (
|
||||
<div style={{ display: "flex", flexWrap: "wrap", gap: 4 }}>
|
||||
{skill.features.map((feature) => (
|
||||
<span key={feature} className="pill accent" style={{ fontSize: 9 }}>
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="inline-row" style={{ marginBottom: 12, gap: 6 }}>
|
||||
<FolderOpen size={14} className="muted" style={{ flexShrink: 0 }} />
|
||||
<input
|
||||
|
|
@ -233,29 +367,44 @@ const SkillsTab = ({
|
|||
</div>
|
||||
)}
|
||||
|
||||
{entries.map((entry) => (
|
||||
<div key={entry.name} className="card" style={{ marginBottom: 8 }}>
|
||||
<div className="card-header">
|
||||
<span className="card-title">{entry.name}</span>
|
||||
<div className="card-header-pills">
|
||||
<span className="pill accent">
|
||||
{entry.config.sources.length} source{entry.config.sources.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={() => remove(entry.name)}
|
||||
title="Remove"
|
||||
style={{ padding: "2px 4px" }}
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
{entries.map((entry) => {
|
||||
const isCollapsed = collapsedSkills[entry.name] ?? true;
|
||||
return (
|
||||
<div key={entry.name} className="card" style={{ marginBottom: 8 }}>
|
||||
<div className="card-header">
|
||||
<div className="inline-row" style={{ gap: 6 }}>
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={() => setCollapsedSkills((prev) => ({ ...prev, [entry.name]: !(prev[entry.name] ?? true) }))}
|
||||
title={isCollapsed ? "Expand" : "Collapse"}
|
||||
style={{ padding: "2px 4px" }}
|
||||
>
|
||||
{isCollapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
|
||||
</button>
|
||||
<span className="card-title">{entry.name}</span>
|
||||
</div>
|
||||
<div className="card-header-pills">
|
||||
<span className="pill accent">
|
||||
{entry.config.sources.length} source{entry.config.sources.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
<button
|
||||
className="button ghost small"
|
||||
onClick={() => remove(entry.name)}
|
||||
title="Remove"
|
||||
style={{ padding: "2px 4px" }}
|
||||
>
|
||||
<Trash2 size={12} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{!isCollapsed && (
|
||||
<pre className="code-block" style={{ marginTop: 4, fontSize: 10 }}>
|
||||
{formatJson(entry.config)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
<pre className="code-block" style={{ marginTop: 4, fontSize: 10 }}>
|
||||
{formatJson(entry.config)}
|
||||
</pre>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue