mirror of
https://github.com/harivansh-afk/sandbox-agent.git
synced 2026-04-15 06:04:43 +00:00
feat: add process management support (#207)
* feat: improve inspector UI for processes and fix PTY terminal
- Simplify ProcessRunTab layout: compact form with collapsible Advanced section for timeout/maxOutputBytes
- Rewrite ProcessesTab: collapsible create form, lightweight list items with status dots, clean detail panel with tabs
- Extract error details: use problem.detail instead of generic "Stream Error" title for better error messages
- Fix GhosttyTerminal binary frame parsing: handle server's binary ArrayBuffer control frames (ready/exit/error)
- Enable WebSocket proxying in Vite dev server with ws: true
- Set TERM=xterm-256color default for TTY processes so tools like tmux, vim, htop work out of the box
- Remove orange gradient background from terminal container for cleaner look
- Remove orange left border from selected process list items
- Update inspector CSS with new process/terminal styles
Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
* fix: address review issues and add processes documentation
- Fix unstable onExit callback in ProcessesTab (useCallback)
- Fix SSE follow stream race condition (subscribe before history read)
- Update inspector.mdx with new process management features
- Change observability icon to avoid conflict with processes
- Add docs/processes.mdx covering the full process management API
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* docs: simplify processes doc — rename sections, remove low-level protocol
- Rename "Interactive terminals" to "Terminals" with "Connect to a terminal" sub-heading
- Add TTY process creation step at top of Terminals section
- Remove low-level WebSocket protocol table and raw WebSocket example
- Keep browser terminal emulator reference with Ghostty link
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* docs: update GhosttyTerminal permalink to latest commit
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* docs: use main branch permalink for GhosttyTerminal reference
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* feat: refine process API — WebSocket binary protocol, SDK terminal session, updated tests
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* docs: update GhosttyTerminal permalink to 636eefb
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
* inspector: use websocket terminal API
* sdk: restore high-level terminal session
* docs: update inspector terminal permalink
* inspector: update run once placeholder
* Fix lazy install v1 API test fixture
* Add reusable React terminal component
* Fix terminal WebSocket ready state checks
---------
Co-authored-by: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Nathan Flurry
GitHub
parent
e7656d78f0
commit
febe8601f6
28 changed files with 2098 additions and 83 deletions
|
|
@ -1,26 +1,4 @@
|
|||
# Frontend Instructions
|
||||
|
||||
## Inspector Architecture
|
||||
|
||||
- Inspector source is `frontend/packages/inspector/`.
|
||||
- `/ui/` must use ACP over HTTP (`/v2/rpc`) for session/prompt traffic.
|
||||
- Primary flow:
|
||||
- `initialize`
|
||||
- `session/new`
|
||||
- `session/prompt`
|
||||
- `session/update` over SSE
|
||||
- Keep backend/protocol changes in client bindings; avoid unnecessary full UI rewrites.
|
||||
|
||||
## Testing
|
||||
|
||||
Run inspector checks after transport or chat-flow changes:
|
||||
```bash
|
||||
pnpm --filter @sandbox-agent/inspector test
|
||||
pnpm --filter @sandbox-agent/inspector test:agent-browser
|
||||
```
|
||||
|
||||
## Docs Sync
|
||||
|
||||
- Update `docs/inspector.mdx` when `/ui/` behavior changes.
|
||||
- Update `docs/sdks/typescript.mdx` when inspector SDK bindings or ACP transport behavior changes.
|
||||
|
||||
- When the user asks for UI changes, capture screenshots of the updated UI after implementation and verification.
|
||||
- At the end, offer to open those screenshots for the user and provide absolute filesystem paths to the screenshot files.
|
||||
|
|
|
|||
|
|
@ -2648,6 +2648,350 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── Process form buttons ── */
|
||||
.process-run-form .button.primary,
|
||||
.process-create-form .button.primary {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.process-detail > .button {
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
/* ── Run Once tab ── */
|
||||
.process-run-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.process-run-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.process-run-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.process-run-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.process-run-field-grow {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.process-run-field .setup-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.process-run-field textarea.setup-input {
|
||||
resize: vertical;
|
||||
min-height: 42px;
|
||||
}
|
||||
|
||||
.process-advanced-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.process-advanced-toggle:hover {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.process-run-result {
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.process-run-result-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.process-run-output {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.process-run-output-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.process-run-output-section + .process-run-output-section {
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.process-run-output-label {
|
||||
padding: 6px 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
color: var(--muted);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.process-run-output-section .process-log-block {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
/* ── Processes tab ── */
|
||||
.processes-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.processes-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.processes-section-toggle {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
padding: 2px 0;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.processes-section-toggle:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.processes-section-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.processes-list-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.process-create-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.process-checkbox-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.process-checkbox {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.process-checkbox input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Process list items */
|
||||
.process-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.process-list-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
padding: 8px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition);
|
||||
}
|
||||
|
||||
.process-list-item:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.process-list-item.selected {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.process-list-item-main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.process-status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
.process-status-dot.running {
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
.process-status-dot.exited {
|
||||
background: var(--muted);
|
||||
}
|
||||
|
||||
.process-list-item-cmd {
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.process-list-item-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 10px;
|
||||
color: var(--muted);
|
||||
padding-left: 14px;
|
||||
}
|
||||
|
||||
.process-list-item-id {
|
||||
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.process-list-item-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding-left: 14px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.process-list-item-actions .button {
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Process detail panel */
|
||||
.process-detail {
|
||||
padding: 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.process-detail-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.process-detail-cmd {
|
||||
font-size: 12px;
|
||||
color: var(--text);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.process-detail-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px 14px;
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.process-detail-logs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.process-detail-logs-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.process-detail-logs-header .button {
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.process-terminal-empty {
|
||||
margin-top: 4px;
|
||||
padding: 10px 12px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.1);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* Log block (shared) */
|
||||
.process-log-block {
|
||||
margin: 0;
|
||||
min-height: 80px;
|
||||
max-height: 280px;
|
||||
overflow: auto;
|
||||
padding: 10px 12px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(9, 9, 11, 0.95);
|
||||
color: #e4e4e7;
|
||||
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, monospace;
|
||||
font-size: 11px;
|
||||
line-height: 1.55;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
|
@ -3026,6 +3370,26 @@
|
|||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.process-run-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.process-run-output {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.process-run-output-section + .process-run-output-section {
|
||||
border-left: none;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.process-terminal-meta {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
/* Scrollbar - match landing page */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
|
|
|
|||
|
|
@ -6,12 +6,13 @@
|
|||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/persist-indexeddb build && vite build",
|
||||
"build": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/persist-indexeddb build && pnpm --filter @sandbox-agent/react build && vite build",
|
||||
"preview": "vite preview",
|
||||
"typecheck": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/persist-indexeddb build && tsc --noEmit",
|
||||
"test": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/persist-indexeddb build && vitest run"
|
||||
"typecheck": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/persist-indexeddb build && pnpm --filter @sandbox-agent/react build && tsc --noEmit",
|
||||
"test": "SKIP_OPENAPI_GEN=1 pnpm --filter @sandbox-agent/persist-indexeddb build && pnpm --filter @sandbox-agent/react build && vitest run"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sandbox-agent/react": "workspace:*",
|
||||
"sandbox-agent": "workspace:*",
|
||||
"@types/react": "^18.3.3",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
|
|
|
|||
|
|
@ -1,15 +1,17 @@
|
|||
import { ChevronLeft, ChevronRight, Cloud, PlayCircle, Server, Terminal, Wrench } from "lucide-react";
|
||||
import { ChevronLeft, ChevronRight, Cloud, Play, PlayCircle, Server, Terminal, Wrench } from "lucide-react";
|
||||
import type { AgentInfo, SandboxAgent, SessionEvent } from "sandbox-agent";
|
||||
|
||||
type AgentModeInfo = { id: string; name: string; description: string };
|
||||
import AgentsTab from "./AgentsTab";
|
||||
import EventsTab from "./EventsTab";
|
||||
import McpTab from "./McpTab";
|
||||
import ProcessesTab from "./ProcessesTab";
|
||||
import ProcessRunTab from "./ProcessRunTab";
|
||||
import SkillsTab from "./SkillsTab";
|
||||
import RequestLogTab from "./RequestLogTab";
|
||||
import type { RequestLog } from "../../types/requestLog";
|
||||
|
||||
export type DebugTab = "log" | "events" | "agents" | "mcp" | "skills";
|
||||
export type DebugTab = "log" | "events" | "agents" | "mcp" | "skills" | "processes" | "run-process";
|
||||
|
||||
const DebugPanel = ({
|
||||
debugTab,
|
||||
|
|
@ -81,6 +83,14 @@ const DebugPanel = ({
|
|||
<Server className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
|
||||
MCP
|
||||
</button>
|
||||
<button className={`debug-tab ${debugTab === "processes" ? "active" : ""}`} onClick={() => onDebugTabChange("processes")}>
|
||||
<Terminal className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
|
||||
Processes
|
||||
</button>
|
||||
<button className={`debug-tab ${debugTab === "run-process" ? "active" : ""}`} onClick={() => onDebugTabChange("run-process")}>
|
||||
<Play className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
|
||||
Run Once
|
||||
</button>
|
||||
<button className={`debug-tab ${debugTab === "skills" ? "active" : ""}`} onClick={() => onDebugTabChange("skills")}>
|
||||
<Wrench className="button-icon" style={{ marginRight: 4, width: 12, height: 12 }} />
|
||||
Skills
|
||||
|
|
@ -122,6 +132,14 @@ const DebugPanel = ({
|
|||
<McpTab getClient={getClient} />
|
||||
)}
|
||||
|
||||
{debugTab === "processes" && (
|
||||
<ProcessesTab getClient={getClient} />
|
||||
)}
|
||||
|
||||
{debugTab === "run-process" && (
|
||||
<ProcessRunTab getClient={getClient} />
|
||||
)}
|
||||
|
||||
{debugTab === "skills" && (
|
||||
<SkillsTab getClient={getClient} />
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,165 @@
|
|||
import { ChevronDown, ChevronRight, Loader2, Play } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { SandboxAgentError } from "sandbox-agent";
|
||||
import type { ProcessRunResponse, SandboxAgent } from "sandbox-agent";
|
||||
|
||||
const parseArgs = (value: string): string[] => value.split("\n").map((part) => part.trim()).filter(Boolean);
|
||||
|
||||
const ProcessRunTab = ({
|
||||
getClient,
|
||||
}: {
|
||||
getClient: () => SandboxAgent;
|
||||
}) => {
|
||||
const [command, setCommand] = useState("");
|
||||
const [argsText, setArgsText] = useState("");
|
||||
const [cwd, setCwd] = useState("");
|
||||
const [timeoutMs, setTimeoutMs] = useState("30000");
|
||||
const [maxOutputBytes, setMaxOutputBytes] = useState("");
|
||||
const [showAdvanced, setShowAdvanced] = useState(false);
|
||||
const [running, setRunning] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [result, setResult] = useState<ProcessRunResponse | null>(null);
|
||||
|
||||
const handleRun = async () => {
|
||||
const trimmedCommand = command.trim();
|
||||
if (!trimmedCommand) {
|
||||
setError("Command is required.");
|
||||
return;
|
||||
}
|
||||
|
||||
setRunning(true);
|
||||
setError(null);
|
||||
try {
|
||||
const response = await getClient().runProcess({
|
||||
command: trimmedCommand,
|
||||
args: parseArgs(argsText),
|
||||
cwd: cwd.trim() || undefined,
|
||||
timeoutMs: timeoutMs.trim() ? Number(timeoutMs) : undefined,
|
||||
maxOutputBytes: maxOutputBytes.trim() ? Number(maxOutputBytes) : undefined,
|
||||
});
|
||||
setResult(response);
|
||||
} catch (runError) {
|
||||
const detail = runError instanceof SandboxAgentError ? runError.problem?.detail : undefined;
|
||||
setError(detail || (runError instanceof Error ? runError.message : "Unable to run process."));
|
||||
setResult(null);
|
||||
} finally {
|
||||
setRunning(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="process-run-container">
|
||||
<div className="process-run-form">
|
||||
<div className="process-run-row">
|
||||
<div className="process-run-field process-run-field-grow">
|
||||
<label className="label">Command</label>
|
||||
<input
|
||||
className="setup-input mono"
|
||||
value={command}
|
||||
onChange={(event) => {
|
||||
setCommand(event.target.value);
|
||||
setError(null);
|
||||
}}
|
||||
placeholder="ls"
|
||||
/>
|
||||
</div>
|
||||
<div className="process-run-field process-run-field-grow">
|
||||
<label className="label">Working Directory</label>
|
||||
<input
|
||||
className="setup-input mono"
|
||||
value={cwd}
|
||||
onChange={(event) => {
|
||||
setCwd(event.target.value);
|
||||
setError(null);
|
||||
}}
|
||||
placeholder="/workspace"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="process-run-field">
|
||||
<label className="label">Arguments</label>
|
||||
<textarea
|
||||
className="setup-input mono"
|
||||
rows={2}
|
||||
value={argsText}
|
||||
onChange={(event) => {
|
||||
setArgsText(event.target.value);
|
||||
setError(null);
|
||||
}}
|
||||
placeholder={"One argument per line, e.g.\n-lc"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="process-advanced-toggle"
|
||||
onClick={() => setShowAdvanced((prev) => !prev)}
|
||||
type="button"
|
||||
>
|
||||
{showAdvanced ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||
Advanced
|
||||
</button>
|
||||
|
||||
{showAdvanced && (
|
||||
<div className="process-run-row">
|
||||
<div className="process-run-field process-run-field-grow">
|
||||
<label className="label">Timeout (ms)</label>
|
||||
<input
|
||||
className="setup-input mono"
|
||||
value={timeoutMs}
|
||||
onChange={(event) => {
|
||||
setTimeoutMs(event.target.value);
|
||||
setError(null);
|
||||
}}
|
||||
placeholder="30000"
|
||||
/>
|
||||
</div>
|
||||
<div className="process-run-field process-run-field-grow">
|
||||
<label className="label">Max Output Bytes</label>
|
||||
<input
|
||||
className="setup-input mono"
|
||||
value={maxOutputBytes}
|
||||
onChange={(event) => {
|
||||
setMaxOutputBytes(event.target.value);
|
||||
setError(null);
|
||||
}}
|
||||
placeholder="Default"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error ? <div className="banner error">{error}</div> : null}
|
||||
|
||||
<button className="button primary small" onClick={() => void handleRun()} disabled={running} style={{ alignSelf: "flex-start" }}>
|
||||
{running ? <Loader2 className="button-icon spinner-icon" /> : <Play className="button-icon" />}
|
||||
{running ? "Running..." : "Run"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{result ? (
|
||||
<div className="process-run-result">
|
||||
<div className="process-run-result-header">
|
||||
<span className={`pill ${result.timedOut ? "warning" : result.exitCode === 0 ? "success" : "danger"}`}>
|
||||
{result.timedOut ? "Timed Out" : `exit ${result.exitCode ?? "?"}`}
|
||||
</span>
|
||||
<span className="card-meta">{result.durationMs}ms</span>
|
||||
</div>
|
||||
|
||||
<div className="process-run-output">
|
||||
<div className="process-run-output-section">
|
||||
<div className="process-run-output-label">stdout{result.stdoutTruncated ? " (truncated)" : ""}</div>
|
||||
<pre className="process-log-block">{result.stdout || "(empty)"}</pre>
|
||||
</div>
|
||||
<div className="process-run-output-section">
|
||||
<div className="process-run-output-label">stderr{result.stderrTruncated ? " (truncated)" : ""}</div>
|
||||
<pre className="process-log-block">{result.stderr || "(empty)"}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProcessRunTab;
|
||||
|
|
@ -0,0 +1,433 @@
|
|||
import { ChevronDown, ChevronRight, Loader2, Play, RefreshCw, Skull, SquareTerminal, Trash2 } from "lucide-react";
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { ProcessTerminal } from "@sandbox-agent/react";
|
||||
import { SandboxAgentError } from "sandbox-agent";
|
||||
import type { ProcessInfo, SandboxAgent } from "sandbox-agent";
|
||||
|
||||
const extractErrorMessage = (error: unknown, fallback: string): string => {
|
||||
if (error instanceof SandboxAgentError && error.problem?.detail) return error.problem.detail;
|
||||
if (error instanceof Error) return error.message;
|
||||
return fallback;
|
||||
};
|
||||
|
||||
const decodeBase64Utf8 = (value: string): string => {
|
||||
try {
|
||||
const bytes = Uint8Array.from(window.atob(value), (char) => char.charCodeAt(0));
|
||||
return new TextDecoder().decode(bytes);
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
};
|
||||
|
||||
const formatDateTime = (value: number | null | undefined): string => {
|
||||
if (!value) {
|
||||
return "Unknown";
|
||||
}
|
||||
return new Date(value).toLocaleString();
|
||||
};
|
||||
|
||||
const parseArgs = (value: string): string[] => value.split("\n").map((part) => part.trim()).filter(Boolean);
|
||||
|
||||
const formatCommandSummary = (process: Pick<ProcessInfo, "command" | "args">): string => {
|
||||
return [process.command, ...process.args].join(" ").trim();
|
||||
};
|
||||
|
||||
const canOpenTerminal = (process: ProcessInfo | null | undefined): boolean => {
|
||||
return Boolean(process && process.status === "running" && process.interactive && process.tty);
|
||||
};
|
||||
|
||||
const ProcessesTab = ({
|
||||
getClient,
|
||||
}: {
|
||||
getClient: () => SandboxAgent;
|
||||
}) => {
|
||||
const [processes, setProcesses] = useState<ProcessInfo[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [command, setCommand] = useState("");
|
||||
const [argsText, setArgsText] = useState("");
|
||||
const [cwd, setCwd] = useState("");
|
||||
const [interactive, setInteractive] = useState(true);
|
||||
const [tty, setTty] = useState(true);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
const [showCreateForm, setShowCreateForm] = useState(true);
|
||||
|
||||
const [selectedProcessId, setSelectedProcessId] = useState<string | null>(null);
|
||||
const [logsText, setLogsText] = useState("");
|
||||
const [logsLoading, setLogsLoading] = useState(false);
|
||||
const [logsError, setLogsError] = useState<string | null>(null);
|
||||
const [terminalOpen, setTerminalOpen] = useState(false);
|
||||
const [actingProcessId, setActingProcessId] = useState<string | null>(null);
|
||||
|
||||
const loadProcesses = useCallback(async (mode: "initial" | "refresh" = "initial") => {
|
||||
if (mode === "initial") {
|
||||
setLoading(true);
|
||||
} else {
|
||||
setRefreshing(true);
|
||||
}
|
||||
setError(null);
|
||||
try {
|
||||
const response = await getClient().listProcesses();
|
||||
setProcesses(response.processes);
|
||||
setSelectedProcessId((current) => {
|
||||
if (!current) {
|
||||
return response.processes[0]?.id ?? null;
|
||||
}
|
||||
return response.processes.some((listedProcess) => listedProcess.id === current)
|
||||
? current
|
||||
: response.processes[0]?.id ?? null;
|
||||
});
|
||||
} catch (loadError) {
|
||||
setError(extractErrorMessage(loadError, "Unable to load processes."));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRefreshing(false);
|
||||
}
|
||||
}, [getClient]);
|
||||
|
||||
const loadSelectedLogs = useCallback(async (process: ProcessInfo | null) => {
|
||||
if (!process) {
|
||||
setLogsText("");
|
||||
setLogsError(null);
|
||||
return;
|
||||
}
|
||||
setLogsLoading(true);
|
||||
setLogsError(null);
|
||||
try {
|
||||
const response = await getClient().getProcessLogs(process.id, {
|
||||
stream: process.tty ? "pty" : "combined",
|
||||
tail: 200,
|
||||
});
|
||||
const text = response.entries.map((logEntry) => decodeBase64Utf8(logEntry.data)).join("");
|
||||
setLogsText(text);
|
||||
} catch (loadError) {
|
||||
setLogsError(extractErrorMessage(loadError, "Unable to load process logs."));
|
||||
setLogsText("");
|
||||
} finally {
|
||||
setLogsLoading(false);
|
||||
}
|
||||
}, [getClient]);
|
||||
|
||||
useEffect(() => {
|
||||
void loadProcesses();
|
||||
}, [loadProcesses]);
|
||||
|
||||
const selectedProcess = useMemo(
|
||||
() => processes.find((process) => process.id === selectedProcessId) ?? null,
|
||||
[processes, selectedProcessId]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
void loadSelectedLogs(selectedProcess);
|
||||
if (!canOpenTerminal(selectedProcess)) {
|
||||
setTerminalOpen(false);
|
||||
}
|
||||
}, [loadSelectedLogs, selectedProcess]);
|
||||
|
||||
const handleCreateProcess = async () => {
|
||||
const trimmedCommand = command.trim();
|
||||
if (!trimmedCommand) {
|
||||
setCreateError("Command is required.");
|
||||
return;
|
||||
}
|
||||
|
||||
setCreating(true);
|
||||
setCreateError(null);
|
||||
try {
|
||||
const created = await getClient().createProcess({
|
||||
command: trimmedCommand,
|
||||
args: parseArgs(argsText),
|
||||
cwd: cwd.trim() || undefined,
|
||||
interactive,
|
||||
tty,
|
||||
});
|
||||
await loadProcesses("refresh");
|
||||
setSelectedProcessId(created.id);
|
||||
setTerminalOpen(created.interactive && created.tty);
|
||||
setCommand("");
|
||||
setArgsText("");
|
||||
setCwd("");
|
||||
setInteractive(true);
|
||||
setTty(true);
|
||||
} catch (createFailure) {
|
||||
setCreateError(extractErrorMessage(createFailure, "Unable to create process."));
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAction = async (processId: string, action: "stop" | "kill" | "delete") => {
|
||||
setActingProcessId(`${action}:${processId}`);
|
||||
setError(null);
|
||||
try {
|
||||
const client = getClient();
|
||||
if (action === "stop") {
|
||||
await client.stopProcess(processId, { waitMs: 2_000 });
|
||||
} else if (action === "kill") {
|
||||
await client.killProcess(processId, { waitMs: 2_000 });
|
||||
} else {
|
||||
await client.deleteProcess(processId);
|
||||
}
|
||||
await loadProcesses("refresh");
|
||||
} catch (actionError) {
|
||||
setError(extractErrorMessage(actionError, `Unable to ${action} process.`));
|
||||
} finally {
|
||||
setActingProcessId(null);
|
||||
}
|
||||
};
|
||||
|
||||
const handleTerminalExit = useCallback(() => {
|
||||
void loadProcesses("refresh");
|
||||
}, [loadProcesses]);
|
||||
|
||||
return (
|
||||
<div className="processes-container">
|
||||
{/* Create form */}
|
||||
<div className="processes-section">
|
||||
<button
|
||||
className="processes-section-toggle"
|
||||
onClick={() => setShowCreateForm((prev) => !prev)}
|
||||
type="button"
|
||||
>
|
||||
{showCreateForm ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
|
||||
<span>Create Process</span>
|
||||
</button>
|
||||
|
||||
{showCreateForm && (
|
||||
<div className="process-create-form">
|
||||
<div className="process-run-row">
|
||||
<div className="process-run-field process-run-field-grow">
|
||||
<label className="label">Command</label>
|
||||
<input
|
||||
className="setup-input mono"
|
||||
value={command}
|
||||
onChange={(event) => {
|
||||
setCommand(event.target.value);
|
||||
setCreateError(null);
|
||||
}}
|
||||
placeholder="bash"
|
||||
/>
|
||||
</div>
|
||||
<div className="process-run-field process-run-field-grow">
|
||||
<label className="label">Working Directory</label>
|
||||
<input
|
||||
className="setup-input mono"
|
||||
value={cwd}
|
||||
onChange={(event) => {
|
||||
setCwd(event.target.value);
|
||||
setCreateError(null);
|
||||
}}
|
||||
placeholder="/workspace"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="process-run-field">
|
||||
<label className="label">Arguments</label>
|
||||
<textarea
|
||||
className="setup-input mono"
|
||||
rows={2}
|
||||
value={argsText}
|
||||
onChange={(event) => {
|
||||
setArgsText(event.target.value);
|
||||
setCreateError(null);
|
||||
}}
|
||||
placeholder={"One argument per line"}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="process-checkbox-row">
|
||||
<label className="process-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={interactive}
|
||||
onChange={(event) => {
|
||||
setInteractive(event.target.checked);
|
||||
if (!event.target.checked) {
|
||||
setTty(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span>interactive</span>
|
||||
</label>
|
||||
<label className="process-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={tty}
|
||||
onChange={(event) => {
|
||||
setTty(event.target.checked);
|
||||
if (event.target.checked) {
|
||||
setInteractive(true);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<span>tty</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{createError ? <div className="banner error">{createError}</div> : null}
|
||||
|
||||
<button className="button primary small" onClick={() => void handleCreateProcess()} disabled={creating} style={{ alignSelf: "flex-start" }}>
|
||||
{creating ? <Loader2 className="button-icon spinner-icon" /> : <Play className="button-icon" />}
|
||||
{creating ? "Creating..." : "Create"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Process list */}
|
||||
<div className="processes-section">
|
||||
<div className="processes-list-header">
|
||||
<span className="processes-section-label">Processes</span>
|
||||
<button className="button secondary small" onClick={() => void loadProcesses("refresh")} disabled={loading || refreshing}>
|
||||
<RefreshCw className={`button-icon ${loading || refreshing ? "spinner-icon" : ""}`} size={12} />
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{error ? <div className="banner error">{error}</div> : null}
|
||||
{loading ? <div className="card-meta">Loading...</div> : null}
|
||||
{!loading && processes.length === 0 ? <div className="card-meta">No processes yet.</div> : null}
|
||||
|
||||
<div className="process-list">
|
||||
{processes.map((process) => {
|
||||
const isSelected = selectedProcessId === process.id;
|
||||
const isStopping = actingProcessId === `stop:${process.id}`;
|
||||
const isKilling = actingProcessId === `kill:${process.id}`;
|
||||
const isDeleting = actingProcessId === `delete:${process.id}`;
|
||||
return (
|
||||
<div
|
||||
key={process.id}
|
||||
className={`process-list-item ${isSelected ? "selected" : ""}`}
|
||||
onClick={() => {
|
||||
setSelectedProcessId(process.id);
|
||||
setTerminalOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="process-list-item-main">
|
||||
<span className={`process-status-dot ${process.status}`} />
|
||||
<span className="process-list-item-cmd mono">{formatCommandSummary(process)}</span>
|
||||
{process.interactive && process.tty && (
|
||||
<span className="pill neutral" style={{ fontSize: 9 }}>tty</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="process-list-item-meta">
|
||||
<span>PID {process.pid ?? "?"}</span>
|
||||
<span className="process-list-item-id">{process.id.slice(0, 8)}</span>
|
||||
</div>
|
||||
<div className="process-list-item-actions">
|
||||
{canOpenTerminal(process) ? (
|
||||
<button
|
||||
className="button secondary small"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedProcessId(process.id);
|
||||
setTerminalOpen(true);
|
||||
}}
|
||||
>
|
||||
<SquareTerminal className="button-icon" size={12} />
|
||||
Terminal
|
||||
</button>
|
||||
) : null}
|
||||
{process.status === "running" ? (
|
||||
<>
|
||||
<button
|
||||
className="button secondary small"
|
||||
onClick={(e) => { e.stopPropagation(); void handleAction(process.id, "stop"); }}
|
||||
disabled={Boolean(actingProcessId)}
|
||||
>
|
||||
{isStopping ? <Loader2 className="button-icon spinner-icon" size={12} /> : null}
|
||||
Stop
|
||||
</button>
|
||||
<button
|
||||
className="button secondary small"
|
||||
onClick={(e) => { e.stopPropagation(); void handleAction(process.id, "kill"); }}
|
||||
disabled={Boolean(actingProcessId)}
|
||||
>
|
||||
{isKilling ? <Loader2 className="button-icon spinner-icon" size={12} /> : <Skull className="button-icon" size={12} />}
|
||||
Kill
|
||||
</button>
|
||||
</>
|
||||
) : null}
|
||||
{process.status === "exited" ? (
|
||||
<button
|
||||
className="button secondary small"
|
||||
onClick={(e) => { e.stopPropagation(); void handleAction(process.id, "delete"); }}
|
||||
disabled={Boolean(actingProcessId)}
|
||||
>
|
||||
{isDeleting ? <Loader2 className="button-icon spinner-icon" size={12} /> : <Trash2 className="button-icon" size={12} />}
|
||||
Delete
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Selected process detail */}
|
||||
{selectedProcess ? (
|
||||
<div className="processes-section">
|
||||
<div className="processes-section-label">Detail</div>
|
||||
|
||||
<div className="process-detail">
|
||||
<div className="process-detail-header">
|
||||
<span className="process-detail-cmd mono">{formatCommandSummary(selectedProcess)}</span>
|
||||
<span className={`pill ${selectedProcess.status === "running" ? "success" : "neutral"}`}>{selectedProcess.status}</span>
|
||||
</div>
|
||||
|
||||
<div className="process-detail-meta">
|
||||
<span>PID: {selectedProcess.pid ?? "?"}</span>
|
||||
<span>Created: {formatDateTime(selectedProcess.createdAtMs)}</span>
|
||||
{selectedProcess.exitedAtMs ? <span>Exited: {formatDateTime(selectedProcess.exitedAtMs)}</span> : null}
|
||||
{selectedProcess.exitCode != null ? <span>Exit code: {selectedProcess.exitCode}</span> : null}
|
||||
<span className="mono" style={{ opacity: 0.6 }}>{selectedProcess.id}</span>
|
||||
</div>
|
||||
|
||||
{/* Terminal */}
|
||||
{terminalOpen && canOpenTerminal(selectedProcess) ? (
|
||||
<ProcessTerminal
|
||||
client={getClient()}
|
||||
processId={selectedProcess.id}
|
||||
style={{ marginTop: 4 }}
|
||||
onExit={handleTerminalExit}
|
||||
/>
|
||||
) : canOpenTerminal(selectedProcess) ? (
|
||||
<button
|
||||
className="button secondary small"
|
||||
onClick={() => setTerminalOpen(true)}
|
||||
style={{ marginTop: 8 }}
|
||||
>
|
||||
<SquareTerminal className="button-icon" size={12} />
|
||||
Open Terminal
|
||||
</button>
|
||||
) : selectedProcess.interactive && selectedProcess.tty ? (
|
||||
<div className="process-terminal-empty">
|
||||
Terminal available while process is running.
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{/* Logs */}
|
||||
<div className="process-detail-logs">
|
||||
<div className="process-detail-logs-header">
|
||||
<span className="label">Logs</span>
|
||||
<button className="button secondary small" onClick={() => void loadSelectedLogs(selectedProcess)} disabled={logsLoading}>
|
||||
{logsLoading ? <Loader2 className="button-icon spinner-icon" size={12} /> : <RefreshCw className="button-icon" size={12} />}
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
{logsError ? <div className="banner error">{logsError}</div> : null}
|
||||
<pre className="process-log-block">{logsText || (logsLoading ? "Loading..." : "(no output)")}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProcessesTab;
|
||||
|
|
@ -10,6 +10,7 @@ export default defineConfig(({ command }) => ({
|
|||
"/v1": {
|
||||
target: "http://localhost:2468",
|
||||
changeOrigin: true,
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue