` renderer
+ * the chat transcript uses, rather than the raw monospace `` it used to be.
+ */
+export function MarkdownPane({
+ body,
+ className,
+}: {
+ body: string
+ className?: string
+}) {
+ return (
+
+ {body}
+
+ )
+}
+
+export function formatRelativeTime(value: string): string {
+ if (!value) return ''
+ const ts = Date.parse(value)
+ if (Number.isNaN(ts)) return value
+ const diffMs = Date.now() - ts
+ if (diffMs < 0) return new Date(ts).toLocaleString()
+ if (diffMs < 60_000) return `${Math.floor(diffMs / 1000)}s ago`
+ if (diffMs < 3_600_000) return `${Math.floor(diffMs / 60_000)}m ago`
+ if (diffMs < 86_400_000) return `${Math.floor(diffMs / 3_600_000)}h ago`
+ if (diffMs < 7 * 86_400_000) return `${Math.floor(diffMs / 86_400_000)}d ago`
+ return new Date(ts).toLocaleDateString()
+}
+
+export function formatBytes(bytes: number): string {
+ if (bytes < 1024) return `${bytes}B`
+ if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`
+ return `${(bytes / (1024 * 1024)).toFixed(1)}MB`
+}
diff --git a/console/web/src/components/chat/engine/FunctionInfoView.tsx b/console/web/src/components/chat/engine/FunctionInfoView.tsx
new file mode 100644
index 00000000..c02449ba
--- /dev/null
+++ b/console/web/src/components/chat/engine/FunctionInfoView.tsx
@@ -0,0 +1,249 @@
+import { useState } from 'react'
+import {
+ ActionLine,
+ Chip,
+ MetaRow,
+ StatusPill,
+} from '@/components/chat/sandbox/shared'
+import { CodeHighlight } from '@/lib/syntax'
+import { cn } from '@/lib/utils'
+import {
+ type FunctionDetail,
+ functionDetailSchema,
+ functionInfoRequestSchema,
+ safeParseRequest,
+ safeParseResponse,
+} from './parsers'
+
+interface FunctionInfoViewProps {
+ input: unknown
+ output: unknown
+ running?: boolean
+}
+
+export function FunctionInfoView({
+ input,
+ output,
+ running,
+}: FunctionInfoViewProps) {
+ const req = safeParseRequest(functionInfoRequestSchema, input)
+
+ if (running) {
+ return (
+
+
+
+ {req ? (
+
+
+ function
+
+ {req.function_id}
+
+ ) : null}
+
+
+ · inspecting function…
+
+
+
+
+
+
+ worker
+
+ {detail.worker_name}
+
+
+
+ triggers
+
+
+ {detail.registered_triggers.length}
+
+
+
+
+
+ {detail.function_id}
+
+
+ {detail.description ? (
+
+ {detail.description}
+
+ ) : null}
+
+
+ {detail.metadata !== undefined ? (
+
+ ) : null}
+
+
+ · no registered triggers
+
+ )
+ }
+ return (
+
+
+ registered triggers · {triggers.length}
+
+
+
· no config
+ )
+ }
+ let pretty: string
+ try {
+ pretty = JSON.stringify(config, null, 2)
+ } catch {
+ return null
+ }
+ return (
+
+ )
+}
+
+interface SchemaSectionProps {
+ label: string
+ schema: unknown
+ treatEmptyAsAny?: boolean
+}
+
+function SchemaSection({
+ label,
+ schema,
+ treatEmptyAsAny = true,
+}: SchemaSectionProps) {
+ const [open, setOpen] = useState(false)
+ if (schema === undefined || schema === null) {
+ return (
+
+ {label} · none
+
+ )
+ }
+ const isAny = treatEmptyAsAny && isAnySchema(schema)
+ const pretty = tryStringifyJson(schema)
+ return (
+
+
+ {open && pretty != null ? (
+
+ ) : null}
+
+ )
+}
+
+function isAnySchema(value: unknown): boolean {
+ if (!value || typeof value !== 'object' || Array.isArray(value)) return false
+ const obj = value as Record
+ // JsonSchema's `AnyValue` placeholder ships `$schema` + `title: "AnyValue"`
+ // with no constraints, which the harness wraps around `Value` request /
+ // response payloads where the engine has no static schema.
+ if (obj.title === 'AnyValue') return true
+ const keys = Object.keys(obj)
+ if (keys.length === 0) return true
+ if (keys.every((k) => k === '$schema' || k === 'title')) return true
+ return false
+}
+
+function tryStringifyJson(value: unknown): string | null {
+ try {
+ return JSON.stringify(value, null, 2)
+ } catch {
+ return null
+ }
+}
+
+function shortenId(id: string): string {
+ if (id.length <= 14) return id
+ return `${id.slice(0, 8)}…${id.slice(-4)}`
+}
diff --git a/console/web/src/components/chat/engine/FunctionsListView.tsx b/console/web/src/components/chat/engine/FunctionsListView.tsx
new file mode 100644
index 00000000..fdeb715b
--- /dev/null
+++ b/console/web/src/components/chat/engine/FunctionsListView.tsx
@@ -0,0 +1,98 @@
+import type { ReactNode } from 'react'
+import {
+ type FunctionsListRequest,
+ functionsListRequestSchema,
+ functionsListResponseSchema,
+ safeParseRequest,
+ safeParseResponse,
+} from './parsers'
+import { FilterChip, InternalChip, ListHeader } from './shared'
+
+interface FunctionsListViewProps {
+ input: unknown
+ output: unknown
+ running?: boolean
+}
+
+export function FunctionsListView({
+ input,
+ output,
+ running,
+}: FunctionsListViewProps) {
+ const req = safeParseRequest(functionsListRequestSchema, input)
+
+ if (running) {
+ return (
+
+
}
+ />
+
+ · listing functions…
+
+
+
}
+ />
+ {resp.functions.length === 0 ? (
+
+ · no functions returned
+
+ ) : (
+
+ )}
+
+
}
+ />
+
+ · listing registered triggers…
+
+
+
}
+ />
+ {resp.registered_triggers.length === 0 ? (
+
+ · no registered triggers returned
+
+ ) : (
+
+ )}
+
+ {trimmed}
+
+ )
+}
+
+function prettyJsonIfPossible(text: string): string {
+ try {
+ return JSON.stringify(JSON.parse(text), null, 2)
+ } catch {
+ return text
+ }
+}
+
+function RequestFilters({ req }: { req?: RegisteredTriggersListRequest }) {
+ if (!req) return null
+ const chips: ReactNode[] = []
+ if (req.function_id) {
+ chips.push(
+ ,
+ )
+ }
+ if (req.trigger_type) {
+ chips.push(
+ ,
+ )
+ }
+ if (req.worker) {
+ chips.push()
+ }
+ if (req.search) {
+ chips.push()
+ }
+ if (req.include_internal) {
+ chips.push()
+ }
+ return chips.length > 0 ? <>{chips} : null
+}
diff --git a/console/web/src/components/chat/engine/TriggersListView.tsx b/console/web/src/components/chat/engine/TriggersListView.tsx
new file mode 100644
index 00000000..1085a101
--- /dev/null
+++ b/console/web/src/components/chat/engine/TriggersListView.tsx
@@ -0,0 +1,96 @@
+import type { ReactNode } from 'react'
+import {
+ safeParseRequest,
+ safeParseResponse,
+ type TriggersListRequest,
+ triggersListRequestSchema,
+ triggersListResponseSchema,
+} from './parsers'
+import { FilterChip, InternalChip, ListHeader } from './shared'
+
+interface TriggersListViewProps {
+ input: unknown
+ output: unknown
+ running?: boolean
+}
+
+export function TriggersListView({
+ input,
+ output,
+ running,
+}: TriggersListViewProps) {
+ const req = safeParseRequest(triggersListRequestSchema, input)
+
+ if (running) {
+ return (
+
+
}
+ />
+
+ · listing triggers…
+
+
+
}
+ />
+ {resp.triggers.length === 0 ? (
+
+ · no triggers returned
+
+ ) : (
+
+ )}
+
+
+
+ {req ? (
+
+
+ worker
+
+ {req.name}
+
+ ) : null}
+
+
+ · inspecting worker…
+
+
+
+
+ {worker.runtime ? (
+
+
+ runtime
+
+ {worker.runtime}
+
+ ) : null}
+ {worker.version ? (
+
+
+ version
+
+ {worker.version}
+
+ ) : null}
+ {worker.os ? (
+
+
+ os
+
+ {worker.os}
+
+ ) : null}
+ {worker.internal ? (
+
+
+ internal
+
+
+ ) : null}
+
+
+
+ {worker.name ?? worker.id}
+
+
+ {worker.description ? (
+
+ {worker.description}
+
+ ) : null}
+
+ {worker.latest_metrics ? (
+
+ ) : null}
+
({
+ key: fn.function_id,
+ left: fn.function_id,
+ right: fn.description ?? null,
+ }))}
+ />
+ ({
+ key: t.id,
+ left: t.id,
+ right: t.description,
+ }))}
+ />
+ ({
+ key: t.id,
+ left: `${t.trigger_type} → ${t.function_id}`,
+ right: t.config_summary,
+ }))}
+ />
+
+ {bits.map((b) => (
+ {b}
+ ))}
+
+ )
+}
+
+function MetricsRow({ metrics }: { metrics: WorkerMetrics }) {
+ const cells: { key: string; label: string; value: string }[] = []
+ if (typeof metrics.memory_heap_used === 'number') {
+ cells.push({
+ key: 'heap',
+ label: 'heap',
+ value: formatBytes(metrics.memory_heap_used),
+ })
+ }
+ if (typeof metrics.memory_rss === 'number') {
+ cells.push({
+ key: 'rss',
+ label: 'rss',
+ value: formatBytes(metrics.memory_rss),
+ })
+ }
+ if (typeof metrics.cpu_percent === 'number') {
+ cells.push({
+ key: 'cpu',
+ label: 'cpu',
+ value: `${metrics.cpu_percent.toFixed(1)}%`,
+ })
+ }
+ if (typeof metrics.event_loop_lag_ms === 'number') {
+ cells.push({
+ key: 'lag',
+ label: 'loop lag',
+ value: `${metrics.event_loop_lag_ms.toFixed(1)}ms`,
+ })
+ }
+ if (typeof metrics.uptime_seconds === 'number') {
+ cells.push({
+ key: 'uptime',
+ label: 'uptime',
+ value: formatUptime(metrics.uptime_seconds),
+ })
+ }
+ if (cells.length === 0) return null
+ return (
+
+ {cells.map((c) => (
+
+
+ {c.label}
+
+ {c.value}
+
+ ))}
+
+ )
+}
+
+interface SubListProps {
+ title: string
+ empty: string
+ items: { key: string; left: string; right: string | null }[]
+}
+
+function SubList({ title, empty, items }: SubListProps) {
+ return (
+
+
+ {title} · {items.length}
+
+ {items.length === 0 ? (
+
+ · {empty}
+
+ ) : (
+
+ {items.map((it) => (
+ -
+
+ {it.left}
+
+ {it.right ? (
+
+ {it.right}
+
+ ) : null}
+
+ ))}
+
+ )}
+
+
}
+ />
+
+ · listing workers…
+
+
+
}
+ />
+ {resp.workers.length === 0 ? (
+
+ · no workers connected
+
+ ) : (
+
+ {resp.workers.map((w) => (
+
+ ))}
+
+ )}
+
+
+ {worker.name ?? worker.id}
+
+
+ {worker.runtime ? (
+
+
+ runtime
+
+ {worker.runtime}
+
+ ) : null}
+ {worker.os ? (
+
+
+ os
+
+ {worker.os}
+
+ ) : null}
+ {worker.isolation ? (
+
+
+ isolation
+
+ {worker.isolation}
+
+ ) : null}
+
+
+ id: {shortenId(worker.id)}
+ {worker.version ? · v{worker.version} : null}
+
+ · {worker.function_count}{' '}
+ {worker.function_count === 1 ? 'fn' : 'fns'}
+
+ {worker.active_invocations > 0 ? (
+
+ · {worker.active_invocations}{' '}
+ active
+
+ ) : null}
+ {worker.ip_address ? · {worker.ip_address} : null}
+ · {formatConnectedFor(worker.connected_at_ms)}
+
+ {worker.description ? (
+
+ {worker.description}
+
+ ) : null}
+
+ )
+}
+
+function StatusBadge({ status }: { status: string }) {
+ const variant = statusToVariant(status)
+ return (
+
+ {status}
+
+ )
+}
+
+function statusToVariant(status: string): string {
+ const s = status.toLowerCase()
+ if (s === 'connected' || s === 'active' || s === 'ready') {
+ return 'text-accent border-accent/40 bg-paper-2'
+ }
+ if (s === 'disconnected' || s === 'stopped' || s === 'down') {
+ return 'text-ink-faint border-rule-2 bg-paper-2'
+ }
+ return 'text-warn border-warn/40 bg-paper-2'
+}
+
+function SmallChip({ children }: { children: ReactNode }) {
+ return (
+
+ {children}
+
+ )
+}
+
+function shortenId(id: string): string {
+ if (id.length <= 14) return id
+ return `${id.slice(0, 8)}…${id.slice(-4)}`
+}
+
+function formatConnectedFor(connectedAtMs: number): string {
+ const now = Date.now()
+ const ms = Math.max(0, now - connectedAtMs)
+ if (ms < 60_000) return `${Math.floor(ms / 1000)}s up`
+ if (ms < 3_600_000) return `${Math.floor(ms / 60_000)}m up`
+ if (ms < 86_400_000) return `${Math.floor(ms / 3_600_000)}h up`
+ return `${Math.floor(ms / 86_400_000)}d up`
+}
+
+function RequestFilters({ req }: { req?: WorkersListRequest }) {
+ if (!req) return null
+ const chips: ReactNode[] = []
+ if (req.runtime) {
+ chips.push()
+ }
+ if (req.status) {
+ chips.push()
+ }
+ if (req.search) {
+ chips.push()
+ }
+ return chips.length > 0 ? <>{chips} : null
+}
diff --git a/console/web/src/components/chat/engine/WorkersRegisterView.tsx b/console/web/src/components/chat/engine/WorkersRegisterView.tsx
new file mode 100644
index 00000000..662cd4c6
--- /dev/null
+++ b/console/web/src/components/chat/engine/WorkersRegisterView.tsx
@@ -0,0 +1,95 @@
+import {
+ ActionLine,
+ Chip,
+ MetaRow,
+ StatusPill,
+} from '@/components/chat/sandbox/shared'
+import {
+ safeParseRequest,
+ safeParseResponse,
+ workersRegisterRequestSchema,
+ workersRegisterResponseSchema,
+} from './parsers'
+
+interface WorkersRegisterViewProps {
+ input: unknown
+ output: unknown
+ running?: boolean
+}
+
+export function WorkersRegisterView({
+ input,
+ output,
+ running,
+}: WorkersRegisterViewProps) {
+ const req = safeParseRequest(workersRegisterRequestSchema, input)
+ if (!req) return null
+
+ const headerLabel = running
+ ? 'registering…'
+ : (() => {
+ const resp = safeParseResponse(workersRegisterResponseSchema, output)
+ if (resp == null) return 'register failed'
+ return resp.success ? 'registered' : 'register failed'
+ })()
+ const headerVariant: 'accent' | 'warn' | 'default' = running
+ ? 'default'
+ : headerLabel === 'registered'
+ ? 'accent'
+ : 'warn'
+
+ return (
+
+
+
+ {req.runtime ? (
+
+
+ runtime
+
+ {req.runtime}
+
+ ) : null}
+ {req.version ? (
+
+
+ version
+
+ {req.version}
+
+ ) : null}
+ {req.os ? (
+
+
+ os
+
+ {req.os}
+
+ ) : null}
+
+
+
+ {req.name ?? req._caller_worker_id}
+
+
+
+
+ id: {shortenId(req._caller_worker_id)}
+
+ {req.telemetry?.install_kind ? (
+ install: {req.telemetry.install_kind}
+ ) : null}
+ {req.telemetry?.device_id ? (
+
+ device: {shortenId(req.telemetry.device_id)}
+
+ ) : null}
+
+
+
+
+ {method}
+
+
+ {req.url}
+
+
+ · waiting for response…
+
+
+
+
+ {method}
+ {req.response_format ? (
+
+
+ format
+
+ {req.response_format}
+
+ ) : null}
+
+
+ {req.url}
+
+
+
+
+ headers
+
+ {headerCount}
+
+ {hasBody ? (
+
+
+ body
+
+
+ {req.json !== undefined ? 'json' : 'text'}
+
+
+ ) : null}
+ {typeof req.timeout_ms === 'number' ? (
+
+
+ timeout
+
+
+ {req.timeout_ms}ms
+
+
+ ) : null}
+ {req.follow_redirects === false ? (
+
+
+ no-redirect
+
+
+ ) : null}
+
+
+
+
+ {method}
+ {contentType ? (
+
+
+ type
+
+ {contentType.split(';')[0]}
+
+ ) : null}
+
+
+ format
+
+ {result.response_format}
+
+ {result.bytes_truncated ? (
+
+ truncated
+
+ ) : null}
+ {result.redirect_chain && result.redirect_chain.length > 0 ? (
+
+
+ redirects
+
+
+ {result.redirect_chain.length}
+
+
+ ) : null}
+
+
+ {req.url}
+
+ {result.parse_error ? (
+
+ parse error: {result.parse_error}
+
+ ) : null}
+ {result.redirect_chain && result.redirect_chain.length > 0 ? (
+
+ ) : null}
+
+