+
+ {tokens.map((line, lineIdx) => {
+ const lineProps = getLineProps({ line })
+ /* Prism tokenization is deterministic for a given `code`;
+ positional+content keys stay stable across renders. */
+ const lineKey = `${lineIdx}:${line.length}`
+ return (
+
+ {line.map((token, tokenIdx) => {
+ const tokenProps = getTokenProps({ token })
+ const tokenKey = `${tokenIdx}:${token.types.join('.')}:${token.content}`
+ return
+ })}
+ {lineIdx < tokens.length - 1 ? '\n' : ''}
+
+ )
+ })}
+
+
+ )}
+
+ {truncateMiddle(respData.sandbox_id, 24)}
+
+ ) : null}
+
+ {error.message}
+
+
+ {error.fix_note ? (
+ {error.functionId}
+
+ {error.message}
+
+
+ {showDetailText ? (
+
+ {error.detailText}
+
+ ) : null}
+
+
+ {renderWithHighlight(
+ m.content,
+ req.data.pattern,
+ !!req.data.ignore_case,
+ )}
+
+
+ |
+ |
+ {e.name} | ++ {e.is_dir ? '—' : formatBytes(e.size)} + | ++ {`${e.is_dir ? 'd' : '-'}${formatMode(e.mode)}`} + | ++ {formatMtime(e.mtime)} + | +
{req.data.path}
+
+ {inline}
+
+ )
+ ) : stream?.success ? (
+
+ {truncateMiddle(stream.data.channel_id, 18)}
+
+ ({stream.data.direction})
+ | path | ++ replacements + | +status | +
|---|---|---|
| {r.path} | ++ {r.replacements} + | +
+ {r.success ? (
+ ok
+ ) : r.error ? (
+ |
+
| + total + | +
+ |
+
| sandbox | +name | +image | +age | +exec | +state | +
|---|---|---|---|---|---|
+
+ {truncateMiddle(s.sandbox_id, 14)}
+
+ |
+ {s.name ?? '—'} | +{s.image} | ++ {formatAgeSecs(s.age_secs)} + | +
+ |
+ + {s.stopped ? ( + stopped + ) : ( + live + )} + | +
+ {req.code}
+
+ )
+ ) : null}
+
+ {truncateMiddle(respData?.sandbox_id ?? req.data.sandbox_id, 24)}
+
+ `. Names mirror `prism-react-renderer` defaults plus the
+ handful we manually register in `@/lib/syntax`. */
+export function inferLangFromPath(path: string): string | null {
+ const lower = path.toLowerCase()
+ const ext = lower.match(/\.([a-z0-9]+)$/)?.[1]
+ if (!ext) {
+ if (lower.endsWith('dockerfile') || lower.includes('/dockerfile'))
+ return 'bash'
+ if (lower.endsWith('makefile') || lower.includes('/makefile')) return 'bash'
+ return null
+ }
+ switch (ext) {
+ case 'js':
+ case 'mjs':
+ case 'cjs':
+ return 'javascript'
+ case 'jsx':
+ return 'jsx'
+ case 'ts':
+ return 'typescript'
+ case 'tsx':
+ return 'tsx'
+ case 'json':
+ case 'jsonc':
+ return 'json'
+ case 'py':
+ case 'pyi':
+ return 'python'
+ case 'sh':
+ case 'bash':
+ case 'zsh':
+ return 'bash'
+ case 'rs':
+ return 'rust'
+ case 'go':
+ return 'go'
+ case 'rb':
+ return 'ruby'
+ case 'html':
+ case 'htm':
+ return 'markup'
+ case 'css':
+ return 'css'
+ case 'md':
+ case 'mdx':
+ return 'markdown'
+ case 'yml':
+ case 'yaml':
+ return 'yaml'
+ case 'toml':
+ return 'toml'
+ default:
+ return null
+ }
+}
+
+/** Map a `lang` field from `sandbox::run` to a highlight language. */
+export function langFromRunLang(lang: string): string | null {
+ const l = lang.toLowerCase()
+ if (l === 'node' || l === 'js' || l === 'javascript') return 'javascript'
+ if (l === 'python' || l === 'py') return 'python'
+ if (l === 'shell' || l === 'sh' || l === 'bash') return 'bash'
+ if (l === 'typescript' || l === 'ts') return 'typescript'
+ return null
+}
+
+/** Quote an argv slot for terminal display. Single-tokens come through
+ bare; anything with whitespace, quotes, or shell metacharacters
+ gets single-quoted with embedded single quotes escaped via the
+ POSIX `'\''` dance. Output is human-paste-able into a shell. */
+export function quoteShellArg(arg: string): string {
+ if (arg === '') return "''"
+ if (/^[A-Za-z0-9_@%+=:,./-]+$/.test(arg)) return arg
+ return `'${arg.replace(/'/g, `'\\''`)}'`
+}
+
+/** Render a `(cmd, args | argv)` ExecRequest as a single `cmd args`
+ string suitable for the terminal prompt. `argv` wins when present;
+ `cmd` shell-line shape (whitespace in `cmd`, no `args`) is left as-is
+ because the daemon shlex-splits it server-side. */
+export function formatExecCommand(req: {
+ cmd?: string | null
+ args?: string[] | null
+ argv?: string[] | null
+}): string {
+ const argv = req.argv ?? []
+ if (argv.length > 0) {
+ return argv.map(quoteShellArg).join(' ')
+ }
+ const cmd = req.cmd ?? ''
+ const args = req.args ?? []
+ if (args.length === 0) return cmd
+ return [cmd, ...args.map(quoteShellArg)].join(' ')
+}
+
+/** Alias used by terminal renderers. */
+export const formatCommandLine = formatExecCommand
+
+/** Normalise an `EnvShape` to an array of `[key, value]` tuples,
+ sorted by key (the daemon's BTreeMap ordering). */
+/** Matches `engine/src/protocol.rs::StreamChannelRef` on the wire. */
+export function isStreamChannelRef(
+ value: unknown,
+): value is { channel_id: string; access_key: string; direction: string } {
+ return (
+ !!value &&
+ typeof value === 'object' &&
+ 'channel_id' in value &&
+ typeof (value as { channel_id: unknown }).channel_id === 'string'
+ )
+}
+
+const INLINE_BUFFER_CAP = 1024 * 1024
+
+/** Note when streamed output likely hit the daemon inline cap. */
+export function streamCapNote(byteLen: number): string | null {
+ if (byteLen >= INLINE_BUFFER_CAP) return 'stdout 1.0 MiB cap reached'
+ return null
+}
+
+export function normaliseEnv(env: EnvShape | undefined): [string, string][] {
+ if (!env) return []
+ if (Array.isArray(env)) {
+ return env
+ .map<[string, string]>((kv) => {
+ const eq = kv.indexOf('=')
+ if (eq < 0) return [kv, '']
+ return [kv.slice(0, eq), kv.slice(eq + 1)]
+ })
+ .sort(([a], [b]) => a.localeCompare(b))
+ }
+ return Object.entries(env).sort(([a], [b]) => a.localeCompare(b))
+}
diff --git a/console/web/src/components/chat/sandbox/index.tsx b/console/web/src/components/chat/sandbox/index.tsx
new file mode 100644
index 00000000..4c108b8a
--- /dev/null
+++ b/console/web/src/components/chat/sandbox/index.tsx
@@ -0,0 +1,139 @@
+import type { FunctionCallMessage } from '@/types/chat'
+import { CreateView } from './CreateView'
+import { SandboxErrorView } from './ErrorView'
+import { ExecPreview, ExecView } from './ExecView'
+import { FsChmodView } from './FsChmodView'
+import { FsGrepView } from './FsGrepView'
+import { FsLsView } from './FsLsView'
+import { FsMkdirView } from './FsMkdirView'
+import { FsMvView } from './FsMvView'
+import { FsReadView } from './FsReadView'
+import { FsRmView } from './FsRmView'
+import { FsSedView } from './FsSedView'
+import { FsStatView } from './FsStatView'
+import { FsWriteView } from './FsWriteView'
+import { ListView } from './ListView'
+import { parseSandboxErrorDisplay, unwrapEnvelope } from './parsers'
+import { RunPreview, RunView } from './RunView'
+import { StopView } from './StopView'
+
+/* The known sandbox::* set. Listed explicitly (not derived from
+ regex) so the dispatcher's "is this a sandbox call?" check is
+ never accidentally too broad. */
+const SANDBOX_FN_IDS = new Set([
+ 'sandbox::exec',
+ 'sandbox::run',
+ 'sandbox::create',
+ 'sandbox::stop',
+ 'sandbox::list',
+ 'sandbox::fs::ls',
+ 'sandbox::fs::stat',
+ 'sandbox::fs::read',
+ 'sandbox::fs::write',
+ 'sandbox::fs::mkdir',
+ 'sandbox::fs::rm',
+ 'sandbox::fs::mv',
+ 'sandbox::fs::chmod',
+ 'sandbox::fs::grep',
+ 'sandbox::fs::sed',
+])
+
+export function isSandboxFunction(functionId: string): boolean {
+ return SANDBOX_FN_IDS.has(functionId)
+}
+
+/* Public surface mirrors the plan exactly. Both helpers return `null`
+ for unknown function ids or unparseable payloads so the caller can
+ silently fall back to the existing JSON view. */
+export function SandboxFunctionIdLabel({ functionId }: { functionId: string }) {
+ if (!functionId.startsWith('sandbox::')) {
+ return {functionId}
+ }
+ const tail = functionId.slice('sandbox::'.length)
+ return (
+ <>
+ sandbox::
+ {tail}
+
+ )
+}
+
+function tryRender(message: FunctionCallMessage): React.ReactNode | null {
+ if (!isSandboxFunction(message.functionId)) return null
+ if (message.pendingApproval) return null
+
+ // The done-state view is what tryRender owns; the pending preview
+ // lives in tryRenderPreview. Running-state cards are rendered by
+ // the per-tool view with `running=true` so the shell chrome stays
+ // identical and only the body swaps to the executing-shimmer.
+ const input = unwrapEnvelope(message.input)
+ const rawOutput = message.output
+ const output = rawOutput != null ? unwrapEnvelope(rawOutput) : undefined
+ const running = !!message.running
+
+ const errorDisplay =
+ !running && rawOutput != null
+ ? parseSandboxErrorDisplay(rawOutput)
+ : null
+ if (errorDisplay) {
+ return
+
+/** Either an inline UTF-8 body or a streaming channel ref. */
+export const fileContentSchema = z.union([z.string(), streamChannelRefSchema])
+export type FileContent = z.infer
+
+/** `iii-shell-proto::FsEntry`. */
+export const fsEntrySchema = z.object({
+ name: z.string(),
+ is_dir: z.boolean(),
+ size: z.number(),
+ mode: z.string(),
+ mtime: z.number(),
+ is_symlink: z.boolean(),
+})
+export type FsEntry = z.infer
+
+/** `iii-shell-proto::FsMatch`. `path` is canonical; older guests sent
+ `file` — `aliasPath` peels that legacy spelling. */
+export const fsMatchSchema = z
+ .object({
+ path: z.string().optional(),
+ file: z.string().optional(),
+ line: z.number(),
+ content: z.string(),
+ })
+ .transform((m) => ({
+ path: m.path ?? m.file ?? '',
+ line: m.line,
+ content: m.content,
+ }))
+export type FsMatch = z.infer
+
+/** `iii-shell-proto::FsSedFileResult`. */
+export const fsSedFileResultSchema = z
+ .object({
+ path: z.string().optional(),
+ file: z.string().optional(),
+ replacements: z.number(),
+ success: z.boolean(),
+ error: z.string().nullable().optional(),
+ })
+ .transform((r) => ({
+ path: r.path ?? r.file ?? '',
+ replacements: r.replacements,
+ success: r.success,
+ error: r.error ?? null,
+ }))
+export type FsSedFileResult = z.infer
+
+/** EnvShape from exec.rs — accepts either Vec<"K=V"> or {K:V}. */
+export const envShapeSchema = z.union([
+ z.array(z.string()),
+ z.record(z.string(), z.string()),
+])
+export type EnvShape = z.infer
+
+// ---------------------------------------------------------------------------
+// SandboxErrorWire — the Stripe-style flat error payload from errors.rs.
+// ---------------------------------------------------------------------------
+
+export const sandboxErrorWireSchema = z.object({
+ type: z.string(),
+ code: z.string().regex(/^S\d{3}$/),
+ message: z.string(),
+ docs_url: z.string().optional(),
+ retryable: z.boolean().optional(),
+ fix: z.unknown().optional(),
+ fix_note: z.string().nullable().optional(),
+})
+export type SandboxErrorWire = z.infer
+
+// ---------------------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------------------
+
+export const execRequestSchema = z.object({
+ sandbox_id: z.string(),
+ cmd: z.string().optional(),
+ args: z.array(z.string()).optional(),
+ argv: z.array(z.string()).optional(),
+ stdin: z.string().nullable().optional(),
+ env: envShapeSchema.optional(),
+ timeout_ms: z.number().nullable().optional(),
+ workdir: z.string().nullable().optional(),
+})
+export type ExecRequest = z.infer
+
+export const execResponseSchema = z.object({
+ stdout: z.string(),
+ stderr: z.string(),
+ exit_code: z.number().nullable(),
+ timed_out: z.boolean(),
+ duration_ms: z.number(),
+ success: z.boolean(),
+})
+export type ExecResponse = z.infer
+
+export const runFileSchema = z.object({
+ path: z.string(),
+ content: z.string(),
+})
+
+export const runRequestSchema = z.object({
+ image: z.string(),
+ code: z.string(),
+ lang: z.string(),
+ files: z.array(runFileSchema).optional(),
+ env: envShapeSchema.optional(),
+ stdin: z.string().nullable().optional(),
+ timeout_ms: z.number().nullable().optional(),
+ keep_sandbox: z.boolean().optional(),
+})
+export type RunRequest = z.infer
+
+export const runResponseSchema = z.object({
+ stdout: z.string(),
+ stderr: z.string(),
+ exit_code: z.number().nullable(),
+ timed_out: z.boolean(),
+ duration_ms: z.number(),
+ success: z.boolean(),
+ sandbox_id: z.string().nullable().optional(),
+})
+export type RunResponse = z.infer
+
+export const createRequestSchema = z.object({
+ image: z.string(),
+ cpus: z.number().nullable().optional(),
+ memory_mb: z.number().nullable().optional(),
+ name: z.string().nullable().optional(),
+ network: z.boolean().nullable().optional(),
+ idle_timeout_secs: z.number().nullable().optional(),
+ env: envShapeSchema.optional(),
+})
+export type CreateRequest = z.infer
+
+export const createResponseSchema = z.object({
+ sandbox_id: z.string(),
+ image: z.string(),
+})
+export type CreateResponse = z.infer
+
+export const stopRequestSchema = z.object({
+ sandbox_id: z.string(),
+ wait: z.boolean().optional(),
+})
+export type StopRequest = z.infer
+
+export const stopResponseSchema = z.object({
+ sandbox_id: z.string(),
+ stopped: z.boolean(),
+})
+export type StopResponse = z.infer
+
+export const listRequestSchema = z.object({}).passthrough()
+export type ListRequest = z.infer
+
+export const sandboxSummarySchema = z.object({
+ sandbox_id: z.string(),
+ name: z.string().nullable().optional(),
+ image: z.string(),
+ age_secs: z.number(),
+ exec_in_progress: z.boolean(),
+ stopped: z.boolean(),
+})
+export type SandboxSummary = z.infer
+
+export const listResponseSchema = z.object({
+ sandboxes: z.array(sandboxSummarySchema),
+})
+export type ListResponse = z.infer
+
+// ---------------------------------------------------------------------------
+// Filesystem
+// ---------------------------------------------------------------------------
+
+export const fsLsRequestSchema = z.object({
+ sandbox_id: z.string(),
+ path: z.string(),
+})
+export type FsLsRequest = z.infer
+
+export const fsLsResponseSchema = z.object({
+ entries: z.array(fsEntrySchema),
+})
+export type FsLsResponse = z.infer
+
+export const fsStatRequestSchema = z.object({
+ sandbox_id: z.string(),
+ path: z.string(),
+})
+export type FsStatRequest = z.infer
+
+export const fsStatResponseSchema = z.object({
+ name: z.string(),
+ is_dir: z.boolean(),
+ size: z.number(),
+ mode: z.string(),
+ mtime: z.number(),
+ is_symlink: z.boolean(),
+})
+export type FsStatResponse = z.infer
+
+export const fsMkdirRequestSchema = z.object({
+ sandbox_id: z.string(),
+ path: z.string(),
+ mode: z.string().optional(),
+ parents: z.boolean().optional(),
+})
+export type FsMkdirRequest = z.infer
+
+export const fsMkdirResponseSchema = z.object({
+ created: z.boolean(),
+})
+export type FsMkdirResponse = z.infer
+
+export const fsWriteRequestSchema = z.object({
+ sandbox_id: z.string(),
+ path: z.string(),
+ mode: z.string().optional(),
+ parents: z.boolean().optional(),
+ content: fileContentSchema.nullable().optional(),
+ content_b64: z.string().nullable().optional(),
+})
+export type FsWriteRequest = z.infer
+
+export const fsWriteResponseSchema = z.object({
+ bytes_written: z.number(),
+ path: z.string(),
+})
+export type FsWriteResponse = z.infer
+
+export const fsReadRequestSchema = z.object({
+ sandbox_id: z.string(),
+ path: z.string(),
+})
+export type FsReadRequest = z.infer
+
+export const fsReadResponseSchema = z.object({
+ content: fileContentSchema,
+ size: z.number(),
+ mode: z.string(),
+ mtime: z.number(),
+})
+export type FsReadResponse = z.infer
+
+export const fsRmRequestSchema = z.object({
+ sandbox_id: z.string(),
+ path: z.string(),
+ recursive: z.boolean().optional(),
+})
+export type FsRmRequest = z.infer
+
+export const fsRmResponseSchema = z.object({
+ removed: z.boolean(),
+})
+export type FsRmResponse = z.infer
+
+export const fsMvRequestSchema = z.object({
+ sandbox_id: z.string(),
+ src: z.string(),
+ dst: z.string(),
+ overwrite: z.boolean().optional(),
+})
+export type FsMvRequest = z.infer
+
+export const fsMvResponseSchema = z.object({
+ moved: z.boolean(),
+})
+export type FsMvResponse = z.infer
+
+export const fsChmodRequestSchema = z.object({
+ sandbox_id: z.string(),
+ path: z.string(),
+ mode: z.string(),
+ uid: z.number().nullable().optional(),
+ gid: z.number().nullable().optional(),
+ recursive: z.boolean().optional(),
+})
+export type FsChmodRequest = z.infer
+
+export const fsChmodResponseSchema = z.object({
+ updated: z.number(),
+})
+export type FsChmodResponse = z.infer
+
+export const fsGrepRequestSchema = z.object({
+ sandbox_id: z.string(),
+ path: z.string(),
+ pattern: z.string(),
+ recursive: z.boolean().optional(),
+ ignore_case: z.boolean().optional(),
+ include_glob: z.array(z.string()).optional(),
+ exclude_glob: z.array(z.string()).optional(),
+ max_matches: z.number().optional(),
+ max_line_bytes: z.number().optional(),
+})
+export type FsGrepRequest = z.infer
+
+export const fsGrepResponseSchema = z.object({
+ matches: z.array(fsMatchSchema),
+ truncated: z.boolean(),
+})
+export type FsGrepResponse = z.infer
+
+export const fsSedRequestSchema = z.object({
+ sandbox_id: z.string(),
+ files: z.array(z.string()).optional(),
+ path: z.string().nullable().optional(),
+ recursive: z.boolean().optional(),
+ include_glob: z.array(z.string()).optional(),
+ exclude_glob: z.array(z.string()).optional(),
+ pattern: z.string(),
+ replacement: z.string(),
+ regex: z.boolean().optional(),
+ first_only: z.boolean().optional(),
+ ignore_case: z.boolean().optional(),
+})
+export type FsSedRequest = z.infer
+
+export const fsSedResponseSchema = z.object({
+ results: z.array(fsSedFileResultSchema),
+ total_replacements: z.number(),
+})
+export type FsSedResponse = z.infer
+
+// ---------------------------------------------------------------------------
+// Envelope unwrap
+// ---------------------------------------------------------------------------
+
+/**
+ * The harness `agent-trigger.ts` wraps every tool result in a
+ * `{ content: ContentBlock[], details: unknown, terminate: boolean }`
+ * envelope before relaying it to the agent. The console receives the
+ * same shape via the engine's function_call output stream.
+ *
+ * This peels the wrapper so renderers operate on the flat sandbox
+ * response. Idempotent — calling it on an already-flat payload
+ * (i.e. one that didn't go through the envelope) returns the input
+ * unchanged. The discriminator is `Array.isArray(value.content)` —
+ * that's the structural marker harness sets unconditionally for
+ * every wrapped result.
+ */
+export function unwrapEnvelope(value: unknown): unknown {
+ if (!value || typeof value !== 'object' || Array.isArray(value)) {
+ return value
+ }
+ const obj = value as Record
+ if (Array.isArray(obj.content) && 'details' in obj) {
+ return obj.details
+ }
+ return value
+}
+
+const denialEnvelopeSchema = z.object({
+ schema_version: z.number().optional(),
+ status: z.string().optional(),
+ denied_by: z.string().optional(),
+ function_id: z.string().optional(),
+ reason: z.string().optional(),
+})
+export type DenialEnvelopeWire = z.infer
+
+const functionErrorEnvelopeSchema = z.object({
+ kind: z.string(),
+ message: z.string(),
+ details: z.unknown().optional(),
+ content: z.array(z.unknown()).optional(),
+})
+
+export type SandboxInvocationError = {
+ title: string
+ message: string
+ functionId?: string
+ deniedBy?: string
+ reason?: string
+ detailText?: string
+}
+
+export type SandboxErrorDisplay =
+ | { variant: 'wire'; error: SandboxErrorWire }
+ | { variant: 'invocation'; error: SandboxInvocationError }
+
+function contentBlocksText(content: unknown): string | undefined {
+ if (!Array.isArray(content)) return undefined
+ const parts: string[] = []
+ for (const block of content) {
+ if (!block || typeof block !== 'object') continue
+ const obj = block as Record
+ if (obj.type === 'text' && typeof obj.text === 'string' && obj.text.length > 0) {
+ parts.push(obj.text)
+ }
+ }
+ return parts.length > 0 ? parts.join('\n') : undefined
+}
+
+/** Pull the first balanced `{…}` JSON object out of a string. */
+export function extractFirstJsonObject(text: string): unknown | null {
+ const start = text.indexOf('{')
+ if (start === -1) return null
+ let depth = 0
+ for (let i = start; i < text.length; i++) {
+ const ch = text[i]
+ if (ch === '{') depth++
+ else if (ch === '}') {
+ depth--
+ if (depth === 0) {
+ try {
+ return JSON.parse(text.slice(start, i + 1))
+ } catch {
+ return null
+ }
+ }
+ }
+ }
+ return null
+}
+
+function tryParseWire(value: unknown): SandboxErrorWire | null {
+ const parsed = sandboxErrorWireSchema.safeParse(unwrapEnvelope(value))
+ if (parsed.success) return parsed.data
+
+ if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+ const obj = value as Record
+ if (obj.error === 'handler_error' || (typeof obj.code === 'string' && /^S\d{3}$/.test(obj.code))) {
+ const { error: _tag, ...rest } = obj
+ const tagged = sandboxErrorWireSchema.safeParse(rest)
+ if (tagged.success) return tagged.data
+ }
+ return null
+}
+
+function tryParseDenial(value: unknown): DenialEnvelopeWire | null {
+ const parsed = denialEnvelopeSchema.safeParse(unwrapEnvelope(value))
+ if (!parsed.success) return null
+ if (parsed.data.status !== 'denied' && !parsed.data.denied_by) return null
+ return parsed.data
+}
+
+function denialToInvocation(
+ denial: DenialEnvelopeWire,
+ fallbackMessage?: string,
+ detailText?: string,
+): SandboxInvocationError {
+ const deniedBy = denial.denied_by
+ const title =
+ deniedBy === 'gate_unavailable'
+ ? 'Gate unavailable'
+ : deniedBy === 'permissions'
+ ? 'Permission denied'
+ : deniedBy === 'user'
+ ? 'Denied by user'
+ : denial.status === 'denied'
+ ? 'Denied'
+ : 'Invocation failed'
+ const message = denial.reason ?? fallbackMessage ?? 'The sandbox call could not complete.'
+ return {
+ title,
+ message,
+ functionId: denial.function_id,
+ deniedBy,
+ reason: denial.reason,
+ detailText,
+ }
+}
+
+function invocationFromFunctionError(
+ envelope: z.infer,
+): SandboxInvocationError | null {
+ const detailText = contentBlocksText(envelope.content)
+ const denial = envelope.details != null ? tryParseDenial(envelope.details) : null
+ if (denial) {
+ return denialToInvocation(denial, envelope.message, detailText)
+ }
+ return {
+ title: 'Invocation failed',
+ message: envelope.message,
+ detailText,
+ }
+}
+
+function collectErrorCandidates(value: unknown): unknown[] {
+ const seen = new Set()
+ const out: unknown[] = []
+ const push = (candidate: unknown) => {
+ if (seen.has(candidate)) return
+ seen.add(candidate)
+ out.push(candidate)
+ }
+
+ push(value)
+ push(unwrapEnvelope(value))
+
+ if (value && typeof value === 'object' && !Array.isArray(value)) {
+ const obj = value as Record
+ if (obj.error && typeof obj.error === 'object') {
+ const err = obj.error as Record
+ push(err)
+ if ('details' in err) push(err.details)
+ if (typeof err.message === 'string') push(err.message)
+ const text = contentBlocksText(err.content)
+ if (text) push(text)
+ }
+ }
+
+ return out
+}
+
+/**
+ * Normalise every failure shape the console may receive for sandbox calls:
+ * flat `SandboxErrorWire`, harness `{ content, details }` wrappers, the
+ * translate `{ error: { kind, message, details, content } }` envelope,
+ * handler-tagged payloads, denial envelopes, and JSON embedded in strings.
+ */
+export function parseSandboxErrorDisplay(
+ value: unknown,
+): SandboxErrorDisplay | null {
+ const candidates = collectErrorCandidates(value)
+
+ for (const candidate of candidates) {
+ const wire = tryParseWire(candidate)
+ if (wire) return { variant: 'wire', error: wire }
+
+ if (typeof candidate === 'string') {
+ const embedded = extractFirstJsonObject(candidate)
+ if (embedded != null) {
+ const wireFromText = tryParseWire(embedded)
+ if (wireFromText) return { variant: 'wire', error: wireFromText }
+ }
+ }
+ }
+
+ for (const candidate of candidates) {
+ const denial = tryParseDenial(candidate)
+ if (denial) {
+ return {
+ variant: 'invocation',
+ error: denialToInvocation(denial),
+ }
+ }
+ }
+
+ if (value && typeof value === 'object' && !Array.isArray(value)) {
+ const parsed = functionErrorEnvelopeSchema.safeParse(
+ (value as Record).error,
+ )
+ if (parsed.success && parsed.data.kind === 'function_error') {
+ const invocation = invocationFromFunctionError(parsed.data)
+ if (invocation) {
+ return { variant: 'invocation', error: invocation }
+ }
+ }
+ }
+
+ return null
+}
+
+/** Returns true if a value looks like a `SandboxErrorWire` payload. */
+export function isSandboxErrorWire(value: unknown): value is SandboxErrorWire {
+ return tryParseWire(value) != null
+}
+
+export const SANDBOX_FUNCTION_IDS = [
+ 'sandbox::create',
+ 'sandbox::exec',
+ 'sandbox::stop',
+ 'sandbox::list',
+ 'sandbox::run',
+ 'sandbox::fs::ls',
+ 'sandbox::fs::stat',
+ 'sandbox::fs::mkdir',
+ 'sandbox::fs::write',
+ 'sandbox::fs::read',
+ 'sandbox::fs::rm',
+ 'sandbox::fs::chmod',
+ 'sandbox::fs::mv',
+ 'sandbox::fs::grep',
+ 'sandbox::fs::sed',
+] as const
+
+export type SandboxFunctionId = (typeof SANDBOX_FUNCTION_IDS)[number]
+
+export function isSandboxFunctionId(id: string): id is SandboxFunctionId {
+ return (SANDBOX_FUNCTION_IDS as readonly string[]).includes(id)
+}
+
+export function parseSandboxError(value: unknown): SandboxErrorWire | null {
+ return tryParseWire(value)
+}
+
+export function safeParseRequest(
+ schema: z.ZodType,
+ value: unknown,
+): T | null {
+ const parsed = schema.safeParse(value ?? {})
+ return parsed.success ? parsed.data : null
+}
+
+export function safeParseResponse(
+ schema: z.ZodType,
+ value: unknown,
+): T | null {
+ const parsed = schema.safeParse(unwrapEnvelope(value))
+ return parsed.success ? parsed.data : null
+}
diff --git a/console/web/src/components/chat/sandbox/shared.tsx b/console/web/src/components/chat/sandbox/shared.tsx
new file mode 100644
index 00000000..2c9cf002
--- /dev/null
+++ b/console/web/src/components/chat/sandbox/shared.tsx
@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react'
+import { Badge } from '@/components/ui/Badge'
+import { cn } from '@/lib/utils'
+
+export function Chip({
+ children,
+ className,
+}: {
+ children: ReactNode
+ className?: string
+}) {
+ return (
+
+ {children}
+
+ )
+}
+
+export function MetaRow({ children }: { children: ReactNode }) {
+ return (
+
+ {children}
+
+ )
+}
+
+export function StatusPill({
+ label,
+ variant = 'default',
+}: {
+ label: string
+ variant?: 'default' | 'warn' | 'alert' | 'accent'
+}) {
+ return (
+
+ {label}
+
+ )
+}
+
+export function ActionLine({
+ symbol,
+ children,
+ tone = 'accent',
+}: {
+ symbol: string
+ children: ReactNode
+ tone?: 'accent' | 'warn' | 'ink'
+}) {
+ const toneClass =
+ tone === 'warn' ? 'text-warn' : tone === 'ink' ? 'text-ink' : 'text-accent'
+ return (
+
+
+ {symbol}
+
+ {children}
+
+ )
+}
diff --git a/console/web/src/components/chat/sandbox/terminal/AnsiOutput.tsx b/console/web/src/components/chat/sandbox/terminal/AnsiOutput.tsx
new file mode 100644
index 00000000..1c4d4ec7
--- /dev/null
+++ b/console/web/src/components/chat/sandbox/terminal/AnsiOutput.tsx
@@ -0,0 +1,69 @@
+import { cn } from '@/lib/utils'
+
+interface AnsiOutputProps {
+ stdout?: string
+ stderr?: string
+ className?: string
+}
+
+/**
+ * Stream-coloured stdout/stderr pane. Sandbox exec is buffered (see
+ * `adapters.rs::run` — no incremental writes are surfaced), so we
+ * just stack stdout above stderr with distinct tones rather than
+ * try to interleave by timestamp (which the wire shape doesn't
+ * carry). ANSI escape parsing is explicitly out of scope per the
+ * plan; we strip the escape introducer to avoid leaking the raw
+ * `\x1b[` bytes into the rendered text.
+ */
+export function AnsiOutput({ stdout, stderr, className }: AnsiOutputProps) {
+ const hasStdout = !!stdout && stdout.length > 0
+ const hasStderr = !!stderr && stderr.length > 0
+
+ if (!hasStdout && !hasStderr) {
+ return (
+
+ · no output
+
+ )
+ }
+
+ return (
+
+ {hasStdout ? (
+
+ {stripAnsi(stdout ?? '')}
+
+ ) : null}
+ {hasStdout && hasStderr ? : null}
+ {hasStderr ? (
+
+ {stripAnsi(stderr ?? '')}
+
+ ) : null}
+
+ )
+}
+
+/* Single-pass strip of CSI/OSC escape sequences. Keeps the visible
+ text intact (newlines, tabs) so monospace alignment in tools like
+ `ls -l` / `cargo test` survives. The two control-char ranges are
+ intentional: 0x1B is the ANSI ESC introducer (CSI/OSC) and 0x07 is
+ the BEL terminator for OSC sequences. */
+// biome-ignore lint/suspicious/noControlCharactersInRegex: stripping ANSI escape sequences.
+const CSI_REGEX = /\x1b\[[0-9;?]*[ -/]*[@-~]/g
+// biome-ignore lint/suspicious/noControlCharactersInRegex: stripping ANSI OSC (ESC ] … BEL) sequences.
+const OSC_REGEX = /\x1b\][^\x07]*\x07/g
+
+function stripAnsi(s: string): string {
+ return s.replace(CSI_REGEX, '').replace(OSC_REGEX, '')
+}
diff --git a/console/web/src/components/chat/sandbox/terminal/Terminal.tsx b/console/web/src/components/chat/sandbox/terminal/Terminal.tsx
new file mode 100644
index 00000000..cb542218
--- /dev/null
+++ b/console/web/src/components/chat/sandbox/terminal/Terminal.tsx
@@ -0,0 +1,111 @@
+import type * as React from 'react'
+import { Badge } from '@/components/ui/Badge'
+import { Prompt } from '@/components/ui/Prompt'
+import { cn } from '@/lib/utils'
+
+/** A small mono pill used for header chips (image / workdir / lang).
+ Distinct from `Badge` (which is text-only) — Chip carries a key
+ and value pair separated by a hair line. */
+interface ChipProps {
+ label?: string
+ children: React.ReactNode
+ className?: string
+}
+
+export function Chip({ label, children, className }: ChipProps) {
+ return (
+
+ {label ? (
+
+ {label}
+
+ ) : null}
+ {children}
+
+ )
+}
+
+interface TerminalProps {
+ /** Single-line command shown to the right of the `$` prompt. */
+ command?: React.ReactNode
+ /** Pulsing prompt + `executing…` shimmer in place of stdout. */
+ running?: boolean
+ /** Optional chip row above the body. */
+ chips?: React.ReactNode
+ /** Body region — usually `` or a code block. */
+ children?: React.ReactNode
+ /** Footer pill row (exit code, duration, timed-out). */
+ footer?: React.ReactNode
+ className?: string
+}
+
+/**
+ * Shared terminal chrome. The exec card sets `command`, `chips`,
+ * ``, and `footer`. `sandbox::run` reuses the chrome
+ * with an extra code-preview pane in the body slot. `fs::read`
+ * borrows just the header + body styling (no command line).
+ */
+export function Terminal({
+ command,
+ running,
+ chips,
+ children,
+ footer,
+ className,
+}: TerminalProps) {
+ return (
+
+ {command !== undefined ? (
+
+
+
+ {children}
+
+ )
+}
diff --git a/console/web/src/components/providers/ProviderRow.tsx b/console/web/src/components/providers/ProviderRow.tsx
index 8824456d..de83664f 100644
--- a/console/web/src/components/providers/ProviderRow.tsx
+++ b/console/web/src/components/providers/ProviderRow.tsx
@@ -1,11 +1,11 @@
import { Settings } from 'lucide-react'
import { useEffect, useState } from 'react'
+import { ProviderSettingsDialog } from '@/components/providers/ProviderSettingsDialog'
import {
type ActiveProvider,
isLocalProvider,
PROVIDER_DISPLAY,
} from '@/components/providers/provider-registry'
-import { ProviderSettingsDialog } from '@/components/providers/ProviderSettingsDialog'
import { StatusBadge } from '@/components/providers/StatusBadge'
import { useAuthStatus, useProviderConfig } from '@/hooks/use-providers'
import { cn } from '@/lib/utils'
diff --git a/console/web/src/components/providers/ProviderSettingsDialog.tsx b/console/web/src/components/providers/ProviderSettingsDialog.tsx
index edf5465b..ba422d48 100644
--- a/console/web/src/components/providers/ProviderSettingsDialog.tsx
+++ b/console/web/src/components/providers/ProviderSettingsDialog.tsx
@@ -451,9 +451,7 @@ export function ProviderSettingsDialog({
// receipt appears below the destructive zone with the key field
// potentially off-screen — operator reads "type a new key above"
// with nothing above to type into.
- const scrollContainer = dialogBodyRef.current?.closest(
- '[role="dialog"]',
- )
+ const scrollContainer = dialogBodyRef.current?.closest('[role="dialog"]')
if (scrollContainer) scrollContainer.scrollTop = 0
} catch {
// Error surfaces via the remove error memo; keep armed for retry.
@@ -565,10 +563,9 @@ export function ProviderSettingsDialog({
{status?.source === 'environment' ? (
keyDirty ? (
- note: {envVar} is set in the environment and takes
- precedence at runtime. saving stores this key as a
- fallback — it will take effect once the env var is
- unset.
+ note: {envVar} is set in the environment and takes precedence
+ at runtime. saving stores this key as a fallback — it will
+ take effect once the env var is unset.
) : (
@@ -618,11 +615,7 @@ export function ProviderSettingsDialog({
configQuery.isLoading ? 'loading stored overrides...' : undefined
}
>
- {showAdvanced ? (
-
ceiling enforced by the harness on tokens the model may
- generate per request. if the model's own max is lower,
- the model wins.
+ generate per request. if the model's own max is lower, the
+ model wins.
{isLocalProvider(provider) ? (
- local provider · the {localBaseUrlEnv(provider)} env var, if set,
- overrides this on startup.
+ local provider · the {localBaseUrlEnv(provider)} env var, if
+ set, overrides this on startup.
) : null}
{overridesError ? (
@@ -794,7 +787,6 @@ export function ProviderSettingsDialog({
) : null}
keyboard shortcuts: ↑↓ navigate rows · press 1–
diff --git a/console/web/src/pages/Examples/sections/message-variants.tsx b/console/web/src/pages/Examples/sections/message-variants.tsx
index d29c482d..0cf4719e 100644
--- a/console/web/src/pages/Examples/sections/message-variants.tsx
+++ b/console/web/src/pages/Examples/sections/message-variants.tsx
@@ -10,6 +10,7 @@ import type {
UserMessage,
} from '@/types/chat'
import { Section, VariantCard } from '../Section'
+import { sandboxFixtures } from './sandbox-fixtures'
const sampleAttachments: Attachment[] = [
{
@@ -67,7 +68,8 @@ const assistantStreaming: AssistantMessage = {
role: 'assistant',
model: 'openai::gpt-5',
mode: 'ask',
- content: 'sure — a btree-backed index gives you both `O(log n)` lookups and cheap range',
+ content:
+ 'sure — a btree-backed index gives you both `O(log n)` lookups and cheap range',
streaming: true,
createdAt: Date.now(),
}
@@ -85,7 +87,8 @@ const assistantThinking: AssistantMessage = {
const thoughtBrief: ThoughtType = {
id: 't1',
role: 'thought',
- content: 'this is a one-line clarification. trivial to resolve, no branching to consider.',
+ content:
+ 'this is a one-line clarification. trivial to resolve, no branching to consider.',
durationMs: 800,
createdAt: Date.now(),
}
@@ -306,9 +309,21 @@ export function MessageVariantsSection() {