@tianshu-ai/tianshu 0.3.0

package/plugins/microsandbox/dist/client.js

@@ -0,0 +1,941 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// MicroSandbox plugin — client side.
+//
+// Surfaces:
+//   - MicroSandboxAdminPage  — Sandboxfile editor + builds list +
+//                              use / reset, rendered in the chat
+//                              shell's `/admin` surface
+//                              (adminPages contribution, ADR-0004 §12).
+//   - BrowserViewportPanel   — noVNC iframe inlined in the chat
+//                              shell's right column so the user can
+//                              watch the agent drive the browser
+//                              without leaving the conversation.
+//
+// (We used to ship two more surfaces: a SandboxStatusPanel right-
+// column widget and a separate BrowserAdminPage. Both went away —
+// the Sandbox admin page covers status, and the chat-shell
+// BrowserViewportPanel is the only place the live VNC view needs
+// to live; admin Browser would have been a third copy of the same
+// iframe.)
+//
+// We bundle every component into one client entry because manifests
+// carry one `client.entry` per plugin. Tree-shaking keeps the
+// admin-only paths cheap when the chat shell is the only thing open.
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AlertTriangle, CheckCircle2, Globe, Hammer, Loader2, RefreshCw, RotateCcw, Save, Settings, Terminal, Trash2, UploadCloud, X, } from "lucide-react";
+import { PluginConfigForm } from "@tianshu/plugin-sdk/client";
+const ROUTE_BASE = "/api/p/microsandbox";
+async function fetchJson(url, init) {
+    const r = await fetch(url, { credentials: "include", ...init });
+    const text = await r.text();
+    let parsed = null;
+    if (text) {
+        try {
+            parsed = JSON.parse(text);
+        }
+        catch {
+            /* not JSON */
+        }
+    }
+    if (!r.ok) {
+        const detail = parsed?.message ??
+            parsed?.error ??
+            `HTTP ${r.status}`;
+        throw new Error(detail);
+    }
+    return parsed;
+}
+function formatRelative(iso) {
+    const t = Date.parse(iso);
+    if (Number.isNaN(t))
+        return iso;
+    const diff = Date.now() - t;
+    const m = Math.floor(diff / 60_000);
+    if (m < 1)
+        return "just now";
+    if (m < 60)
+        return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24)
+        return `${h}h ago`;
+    const d = Math.floor(h / 24);
+    return `${d}d ago`;
+}
+function formatUptime(ms) {
+    if (ms < 1000)
+        return `${ms}ms`;
+    const s = Math.floor(ms / 1000);
+    if (s < 60)
+        return `${s}s`;
+    const m = Math.floor(s / 60);
+    if (m < 60)
+        return `${m}m ${s % 60}s`;
+    const h = Math.floor(m / 60);
+    return `${h}h ${m % 60}m`;
+}
+/** Render kB values from /proc/meminfo as a compact human
+ *  string ("1.2 GiB" / "864 MiB"). meminfo's "kB" is actually
+ *  KiB (1024-based) so we use 1024 throughout. */
+function formatKb(kb) {
+    if (!Number.isFinite(kb) || kb < 0)
+        return "—";
+    if (kb < 1024)
+        return `${kb} KiB`;
+    const mib = kb / 1024;
+    if (mib < 1024)
+        return `${Math.round(mib)} MiB`;
+    const gib = mib / 1024;
+    // 0.1 GiB precision; "1.2 GiB" is more readable than "1234 MiB".
+    return `${gib.toFixed(1)} GiB`;
+}
+function extractMetaString(meta, key) {
+    if (!meta)
+        return null;
+    const v = meta[key];
+    return typeof v === "string" ? v : null;
+}
+function MicroSandboxAdminPage(_props) {
+    // Bumping this counter signals "something changed in the sandbox
+    // lifecycle; sections that fetch derived state should re-fetch."
+    // BuildsSection bumps it after switching the in-use build
+    // (with or without reset). ResetSection listens and re-fetches
+    // status whenever it changes.
+    const [refreshTick, setRefreshTick] = useState(0);
+    const bumpRefresh = useCallback(() => setRefreshTick((n) => n + 1), []);
+    return (_jsxs("div", { className: "mx-auto max-w-4xl px-6 py-6 text-gray-200", children: [_jsxs("header", { className: "mb-6 border-b border-gray-800 pb-4", children: [_jsx("h1", { className: "text-lg font-semibold text-gray-100", children: "MicroSandbox" }), _jsx("p", { className: "mt-1 text-[12px] leading-relaxed text-gray-500", children: "Edit your Sandboxfile, build a new image, and switch this tenant to use it. Sanity-check a fresh build via the shell's preview target (\u201Cdoes my apt package show up on PATH?\u201D) before flipping the tenant to it." })] }), _jsx(SandboxfileSection, {}), _jsx("div", { className: "my-6 border-t border-gray-800" }), _jsx(BuildsSection, { onMutate: bumpRefresh }), _jsx("div", { className: "my-6 border-t border-gray-800" }), _jsx(TaskPoolSection, { refreshTick: refreshTick }), _jsx("div", { className: "my-6 border-t border-gray-800" }), _jsx(ShellSection, {}), _jsx("div", { className: "my-6 border-t border-gray-800" }), _jsx(ResetSection, { refreshTick: refreshTick, onMutate: bumpRefresh })] }));
+}
+function SandboxfileSection() {
+    const [payload, setPayload] = useState(null);
+    const [draft, setDraft] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const [parseError, setParseError] = useState(null);
+    const [savedAt, setSavedAt] = useState(null);
+    const [templates, setTemplates] = useState([]);
+    const load = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const r = await fetchJson(`${ROUTE_BASE}/sandboxfile`);
+            setPayload(r);
+            setDraft(r.content);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    // Templates are server-static; fetch once.
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const r = await fetchJson(`${ROUTE_BASE}/sandboxfile/templates`);
+                if (!cancelled)
+                    setTemplates(r.templates);
+            }
+            catch {
+                // Non-fatal: leave the dropdown empty so users can still
+                // author from scratch.
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const dirty = payload != null && draft !== payload.content;
+    function loadTemplate(id) {
+        if (!id)
+            return;
+        const t = templates.find((x) => x.id === id);
+        if (!t)
+            return;
+        if (payload &&
+            draft !== payload.content &&
+            !window.confirm(`You have unsaved changes. Replace the editor with the "${t.displayName}" template?`)) {
+            return;
+        }
+        setDraft(t.content);
+    }
+    async function save() {
+        setSaving(true);
+        setError(null);
+        setParseError(null);
+        try {
+            const r = await fetchJson(`${ROUTE_BASE}/sandboxfile`, {
+                method: "PUT",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ content: draft }),
+            });
+            setPayload({ content: draft, exists: true, path: r.path });
+            setParseError(r.parseError);
+            setSavedAt(Date.now());
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    return (_jsxs("section", { children: [_jsx(SectionHeader, { title: "Sandboxfile", description: payload?.exists === false
+                    ? "No Sandboxfile yet. Edit and save to create one."
+                    : payload?.path
+                        ? `Saved at ${payload.path}`
+                        : "", actions: _jsxs(_Fragment, { children: [templates.length > 0 && (_jsxs("select", { value: "", onChange: (e) => {
+                                loadTemplate(e.target.value);
+                                e.target.value = "";
+                            }, className: "rounded-md border border-gray-800 bg-gray-900 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-700 focus:border-blue-700 focus:outline-none", title: "Replace the editor contents with a starting template", children: [_jsx("option", { value: "", children: "Load template\u2026" }), templates.map((t) => (_jsx("option", { value: t.id, title: t.description, children: t.displayName }, t.id)))] })), _jsxs("button", { type: "button", onClick: () => void load(), disabled: loading, className: "btn-ghost flex items-center gap-1.5 px-2 py-1 text-[11px] text-gray-400", title: "Reload from disk", children: [_jsx(RefreshCw, { size: 12, className: loading ? "animate-spin" : "" }), "Reload"] }), _jsxs("button", { type: "button", onClick: () => void save(), disabled: !dirty || saving, className: "flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-[11px] font-medium text-white hover:bg-blue-500 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-500", children: [saving ? (_jsx(Loader2, { size: 12, className: "animate-spin" })) : (_jsx(Save, { size: 12 })), "Save"] })] }) }), error && _jsx(Banner, { kind: "error", text: error }), parseError && (_jsx(Banner, { kind: "warn", text: `Saved, but the file does not parse: ${parseError}` })), !error && !parseError && savedAt && Date.now() - savedAt < 4000 && (_jsx(Banner, { kind: "ok", text: "Saved." })), _jsx("textarea", { value: draft, onChange: (e) => setDraft(e.target.value), spellCheck: false, className: "mt-2 h-64 w-full resize-y rounded-md border border-gray-800 bg-gray-950 px-3 py-2 font-mono text-[12px] leading-relaxed text-gray-200 outline-none focus:border-blue-700", placeholder: "image: python:3.12-slim\ncpus: 4\nmemory_mib: 4096" }), _jsxs("p", { className: "mt-2 text-[11px] leading-relaxed text-gray-500", children: ["Path: ", _jsx("code", { className: "rounded bg-gray-800 px-1", children: payload?.path ?? "…" }), ". v0 grammar: ", _jsx("code", { className: "rounded bg-gray-800 px-1", children: "image:" }), ",", " ", _jsx("code", { className: "rounded bg-gray-800 px-1", children: "cpus:" }), ",", " ", _jsx("code", { className: "rounded bg-gray-800 px-1", children: "memory_mib:" }), ", and the lists", " ", _jsx("code", { className: "rounded bg-gray-800 px-1", children: "apt" }), ",", " ", _jsx("code", { className: "rounded bg-gray-800 px-1", children: "pip" }), ",", " ", _jsx("code", { className: "rounded bg-gray-800 px-1", children: "npm" }), ",", " ", _jsx("code", { className: "rounded bg-gray-800 px-1", children: "exec" }), "."] })] }));
+}
+function BuildsSection({ onMutate }) {
+    const [data, setData] = useState(null);
+    const [error, setError] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [building, setBuilding] = useState(false);
+    const [usingId, setUsingId] = useState(null);
+    /** When set, the next build will layer on top of this snapshot
+     *  instead of pulling the Sandboxfile's `image:`. UI surfaces
+     *  the picker as a dropdown next to the Build button. */
+    const [basedOnSnapshot, setBasedOnSnapshot] = useState("");
+    /** Live log lines for the in-progress build (or the most recent
+     *  one if it just finished). Cleared when a new build starts. */
+    const [buildLog, setBuildLog] = useState([]);
+    /** When set, the current build is in the start → done/error window. */
+    const [buildStartedAt, setBuildStartedAt] = useState(null);
+    const [elapsedMs, setElapsedMs] = useState(0);
+    const logRef = useRef(null);
+    // Tick the elapsed counter so the spinner doesn't feel frozen even
+    // when the SDK goes quiet for many seconds (e.g. while it pulls a
+    // base image).
+    useEffect(() => {
+        if (buildStartedAt === null)
+            return;
+        const i = window.setInterval(() => setElapsedMs(Date.now() - buildStartedAt), 250);
+        return () => window.clearInterval(i);
+    }, [buildStartedAt]);
+    // Auto-scroll the log pane on every new line.
+    useEffect(() => {
+        const el = logRef.current;
+        if (el)
+            el.scrollTop = el.scrollHeight;
+    }, [buildLog]);
+    const load = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const r = await fetchJson(`${ROUTE_BASE}/builds`);
+            setData(r);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    async function build() {
+        setBuilding(true);
+        setError(null);
+        setBuildLog([]);
+        setBuildStartedAt(Date.now());
+        setElapsedMs(0);
+        try {
+            const params = new URLSearchParams({ stream: "1" });
+            if (basedOnSnapshot)
+                params.set("from_snapshot", basedOnSnapshot);
+            const r = await fetch(`${ROUTE_BASE}/builds?${params.toString()}`, {
+                method: "POST",
+                credentials: "include",
+                headers: { "Content-Type": "application/json" },
+                body: "{}",
+            });
+            if (!r.ok || !r.body) {
+                throw new Error(`build request failed: HTTP ${r.status}${r.statusText ? " " + r.statusText : ""}`);
+            }
+            // Read NDJSON: one JSON object per "\n"-terminated line.
+            const reader = r.body.getReader();
+            const decoder = new TextDecoder();
+            let buf = "";
+            let finalError = null;
+            // eslint-disable-next-line no-constant-condition
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done)
+                    break;
+                buf += decoder.decode(value, { stream: true });
+                let nl;
+                // eslint-disable-next-line no-cond-assign
+                while ((nl = buf.indexOf("\n")) >= 0) {
+                    const raw = buf.slice(0, nl).trim();
+                    buf = buf.slice(nl + 1);
+                    if (!raw)
+                        continue;
+                    let evt;
+                    try {
+                        evt = JSON.parse(raw);
+                    }
+                    catch {
+                        // Treat malformed lines as raw log so we don't lose them.
+                        setBuildLog((prev) => [...prev, raw]);
+                        continue;
+                    }
+                    if (evt.type === "log" && typeof evt.line === "string") {
+                        const line = evt.line;
+                        setBuildLog((prev) => [...prev, line]);
+                    }
+                    else if (evt.type === "start") {
+                        setBuildLog((prev) => [
+                            ...prev,
+                            `[stream] build ${String(evt.buildId ?? "?")} started (image=${String(evt.image ?? "?")})`,
+                        ]);
+                    }
+                    else if (evt.type === "done") {
+                        // The list reload below will surface the new entry; we
+                        // don't need to do anything else here.
+                    }
+                    else if (evt.type === "error") {
+                        finalError = String(evt.message ?? "build failed");
+                        const stderr = typeof evt.stderr === "string" && evt.stderr.length > 0
+                            ? `\n${evt.stderr}`
+                            : "";
+                        setBuildLog((prev) => [...prev, `[error] ${finalError}${stderr}`]);
+                    }
+                }
+            }
+            // Drain any trailing partial line.
+            const tail = buf.trim();
+            if (tail) {
+                try {
+                    const evt = JSON.parse(tail);
+                    if (evt.type === "log" && typeof evt.line === "string") {
+                        setBuildLog((prev) => [...prev, evt.line]);
+                    }
+                }
+                catch {
+                    /* swallow */
+                }
+            }
+            if (finalError) {
+                setError(finalError);
+            }
+            await load();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBuilding(false);
+            setBuildStartedAt(null);
+        }
+    }
+    /**
+     * Pin a build to a role.
+     *
+     * @param role  "browser" updates the live long-lived sandbox pointer
+     *              (resets the VM when `reset=true`); "task" updates the
+     *              per-task pool pointer (no live VM today, so reset is
+     *              ignored on the wire); "both" matches the legacy
+     *              behaviour where one snapshot served everything.
+     */
+    async function useBuild(buildId, role, reset) {
+        setUsingId(buildId);
+        setError(null);
+        try {
+            const params = new URLSearchParams({ build_id: buildId, role });
+            if (reset)
+                params.set("reset", "1");
+            const url = `${ROUTE_BASE}/builds/use?${params.toString()}`;
+            const r = await fetchJson(url, { method: "POST" });
+            if (reset &&
+                typeof r.reset === "object" &&
+                r.reset !== null &&
+                "failed" in r.reset) {
+                setError(`Switched, but reset failed: ${r.reset.failed}`);
+            }
+            await load();
+            // Tell sibling sections (Live sandbox status panel) the
+            // sandbox lifecycle changed so they can re-fetch.
+            onMutate();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setUsingId(null);
+        }
+    }
+    return (_jsxs("section", { children: [_jsx(SectionHeader, { title: "Builds", description: (() => {
+                    const b = data?.pointers?.browser;
+                    const t = data?.pointers?.task;
+                    if (!b && !t) {
+                        return "No build selected — the runner uses the configured default image.";
+                    }
+                    if (b && t && b.snapshotName === t.snapshotName) {
+                        return `In use (Browser + Task): ${b.snapshotName}`;
+                    }
+                    const parts = [];
+                    if (b)
+                        parts.push(`Browser: ${b.snapshotName}`);
+                    if (t)
+                        parts.push(`Task: ${t.snapshotName}`);
+                    return parts.join(" · ");
+                })(), actions: _jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => void load(), disabled: loading, className: "btn-ghost flex items-center gap-1.5 px-2 py-1 text-[11px] text-gray-400", children: [_jsx(RefreshCw, { size: 12, className: loading ? "animate-spin" : "" }), "Refresh"] }), _jsxs("select", { value: basedOnSnapshot, onChange: (e) => setBasedOnSnapshot(e.target.value), disabled: building, className: "rounded border border-gray-700 bg-gray-900 px-2 py-1 text-[11px] text-gray-200 disabled:cursor-not-allowed disabled:opacity-50", title: "Optional: layer this build on top of an existing snapshot. Leave as 'fresh image' to use the Sandboxfile's image: line.", children: [_jsx("option", { value: "", children: "based on: fresh image" }), (data?.builds ?? []).map((b) => (_jsxs("option", { value: b.snapshotName, children: ["based on: ", b.buildId] }, b.snapshotName)))] }), _jsxs("button", { type: "button", onClick: () => void build(), disabled: building, className: "flex items-center gap-1.5 rounded-md bg-emerald-600 px-3 py-1.5 text-[11px] font-medium text-white hover:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-500", title: basedOnSnapshot
+                                ? `Build on top of ${basedOnSnapshot}`
+                                : "Run apt/pip/npm/exec from your saved Sandboxfile and capture a snapshot", children: [building ? (_jsx(Loader2, { size: 12, className: "animate-spin" })) : (_jsx(Hammer, { size: 12 })), "Build"] })] }) }), error && _jsx(Banner, { kind: "error", text: error }), building && buildLog.length === 0 && (_jsx(Banner, { kind: "info", text: "Building… this typically takes 10-30s for a slim base image plus a few apt/pip layers. " +
+                    (elapsedMs > 0
+                        ? `(${(elapsedMs / 1000).toFixed(0)}s elapsed)`
+                        : "") })), (building || buildLog.length > 0) && (_jsxs("div", { className: "mb-3 overflow-hidden rounded-md border border-gray-800 bg-gray-950", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-800 px-3 py-1.5", children: _jsxs("div", { className: "flex items-center gap-2 text-[11px] text-gray-300", children: [building ? (_jsx(Loader2, { size: 11, className: "animate-spin text-emerald-400" })) : (_jsx(CheckCircle2, { size: 11, className: "text-emerald-400" })), _jsx("span", { children: building ? "Build in progress" : "Last build log" }), building && elapsedMs > 0 && (_jsxs("span", { className: "text-[10px] text-gray-500", children: [(elapsedMs / 1000).toFixed(0), "s"] })), _jsxs("span", { className: "text-[10px] text-gray-600", children: [buildLog.length, " line", buildLog.length === 1 ? "" : "s"] })] }) }), _jsx("pre", { ref: logRef, className: "max-h-72 overflow-auto whitespace-pre-wrap px-3 py-2 font-mono text-[11px] leading-relaxed text-gray-300", children: buildLog.length > 0
+                            ? buildLog.join("\n")
+                            : "… waiting for first log line …" })] })), data && data.builds.length === 0 && !building && (_jsxs("p", { className: "rounded-md border border-dashed border-gray-800 px-3 py-6 text-center text-[12px] text-gray-500", children: ["No builds yet. Click ", _jsx("strong", { children: "Build" }), " to create one from your saved Sandboxfile."] })), data && data.builds.length > 0 && (_jsx("ul", { className: "space-y-2", children: data.builds.map((b) => (_jsxs("li", { className: "rounded-md border border-gray-800 bg-gray-900/50 px-3 py-2", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("code", { className: "rounded bg-gray-800 px-1.5 py-0.5 text-[11px] text-gray-100", children: b.buildId }), (b.roles?.browser ?? b.published) && (_jsxs("span", { className: "flex items-center gap-1 rounded bg-emerald-900/40 px-1.5 py-0.5 text-[10px] uppercase text-emerald-300", children: [_jsx(CheckCircle2, { size: 10 }), " Browser"] })), b.roles?.task && (_jsxs("span", { className: "flex items-center gap-1 rounded bg-sky-900/40 px-1.5 py-0.5 text-[10px] uppercase text-sky-300", children: [_jsx(CheckCircle2, { size: 10 }), " Task"] })), _jsx("span", { className: "text-[11px] text-gray-400", title: b.basedOnSnapshot ? `layered on snapshot ${b.basedOnSnapshot}` : `image: ${b.baseImage}`, children: b.basedOnSnapshot ? `↳ ${b.basedOnSnapshot.split('-build-').pop() ?? b.basedOnSnapshot}` : b.baseImage }), _jsxs("span", { className: "text-[10px] text-gray-600", children: [(b.durationMs / 1000).toFixed(1), "s \u00B7 ", formatRelative(b.builtAt)] })] }), _jsxs("p", { className: "mt-1 truncate text-[11px] text-gray-500", children: ["snapshot:", " ", _jsx("code", { className: "rounded bg-gray-800 px-1 text-gray-400", children: b.snapshotName })] })] }), (() => {
+                                    // Defensive read: an older server (pre-roles) only
+                                    // sends `b.published` for the browser role and no
+                                    // task field at all. Fall back so the UI keeps
+                                    // rendering during a partial deploy.
+                                    const browserActive = b.roles?.browser ?? b.published;
+                                    const taskActive = b.roles?.task ?? false;
+                                    return (_jsxs("div", { className: "flex flex-shrink-0 flex-col items-stretch gap-1", children: [_jsxs("div", { className: "flex items-stretch gap-px overflow-hidden rounded-md border border-gray-800", children: [_jsxs("button", { type: "button", onClick: () => void useBuild(b.buildId, "browser", false), disabled: usingId === b.buildId || browserActive, className: "flex items-center gap-1 px-2 py-1 text-[11px] text-emerald-200 hover:bg-emerald-900/30 disabled:cursor-not-allowed disabled:opacity-40", title: browserActive
+                                                            ? "This build is already the active Browser snapshot."
+                                                            : "Pin this build as the long-lived Browser sandbox snapshot. The live VM keeps running its current snapshot until you reset.", children: [usingId === b.buildId ? (_jsx(Loader2, { size: 11, className: "animate-spin" })) : (_jsx(UploadCloud, { size: 11 })), browserActive ? "Browser \u2713" : "Use as Browser"] }), !browserActive && (_jsxs("button", { type: "button", onClick: () => void useBuild(b.buildId, "browser", true), disabled: usingId === b.buildId, className: "flex items-center gap-1 border-l border-gray-800 px-2 py-1 text-[11px] text-emerald-300 hover:bg-emerald-900/30 disabled:cursor-not-allowed disabled:opacity-40", title: "Pin as Browser + reset the live VM so the new snapshot takes effect immediately. Adds ~10-20s for the reset.", children: [_jsx(RotateCcw, { size: 11 }), "& Reset"] }))] }), _jsxs("button", { type: "button", onClick: () => void useBuild(b.buildId, "task", false), disabled: usingId === b.buildId || taskActive, className: "flex items-center justify-center gap-1 rounded-md border border-gray-800 px-2 py-1 text-[11px] text-sky-200 hover:bg-sky-900/30 disabled:cursor-not-allowed disabled:opacity-40", title: taskActive
+                                                    ? "This build is already the active Task snapshot."
+                                                    : "Pin this build as the per-task sandbox snapshot. Future per-task sandboxes will boot from it; takes effect on the next task acquire.", children: [usingId === b.buildId ? (_jsx(Loader2, { size: 11, className: "animate-spin" })) : (_jsx(UploadCloud, { size: 11 })), taskActive ? "Task \u2713" : "Use as Task"] })] }));
+                                })()] }), b.logTail && (_jsxs("details", { className: "mt-1.5 text-[11px]", children: [_jsx("summary", { className: "cursor-pointer text-gray-500 hover:text-gray-400", children: "Log tail" }), _jsx("pre", { className: "mt-1 max-h-40 overflow-auto whitespace-pre-wrap rounded bg-gray-950 px-2 py-1 text-[11px] leading-relaxed text-gray-400", children: b.logTail })] }))] }, b.buildId))) }))] }));
+}
+function ShellSection() {
+    const [command, setCommand] = useState("");
+    const [workdir, setWorkdir] = useState("/workspace");
+    const [target, setTarget] = useState("live");
+    const [history, setHistory] = useState([]);
+    const [running, setRunning] = useState(false);
+    const [historyIdx, setHistoryIdx] = useState(null);
+    const [builds, setBuilds] = useState([]);
+    const inputRef = useRef(null);
+    const idCounter = useRef(0);
+    /** AbortController for the in-flight /exec request; lets the user
+     *  bail out of a hanging command without waiting for the server
+     *  timeout. */
+    const abortRef = useRef(null);
+    const recentCommands = history.map((h) => h.command);
+    // Pull the build list (newest first) so the user can pick a target.
+    // We re-fetch on focus to pick up freshly-built snapshots without
+    // a full page reload.
+    const loadBuilds = useCallback(async () => {
+        try {
+            const r = await fetchJson(`${ROUTE_BASE}/builds`);
+            setBuilds(r.builds);
+        }
+        catch {
+            /* non-fatal: just leave the dropdown without build entries */
+        }
+    }, []);
+    useEffect(() => {
+        void loadBuilds();
+    }, [loadBuilds]);
+    async function run() {
+        const cmd = command.trim();
+        if (!cmd || running)
+            return;
+        const id = ++idCounter.current;
+        const wd = workdir.trim() || "/workspace";
+        const targetSnapshot = target;
+        const entry = {
+            id,
+            command: cmd,
+            workdir: wd,
+            target: targetSnapshot,
+            startedAt: Date.now(),
+            result: null,
+            transportError: null,
+        };
+        setHistory((h) => [...h, entry]);
+        setCommand("");
+        setHistoryIdx(null);
+        setRunning(true);
+        const ac = new AbortController();
+        abortRef.current = ac;
+        try {
+            const payload = { command: cmd, workdir: wd };
+            if (targetSnapshot !== "live") {
+                payload.build_id = targetSnapshot;
+            }
+            const r = await fetchJson(`${ROUTE_BASE}/exec`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(payload),
+                signal: ac.signal,
+            });
+            setHistory((h) => h.map((e) => (e.id === id ? { ...e, result: r } : e)));
+        }
+        catch (err) {
+            const aborted = err instanceof DOMException && err.name === "AbortError";
+            const message = aborted
+                ? "Cancelled by user. The server-side timeout (60s default) will eventually tear the preview VM down."
+                : err instanceof Error
+                    ? err.message
+                    : String(err);
+            setHistory((h) => h.map((e) => e.id === id ? { ...e, transportError: message } : e));
+        }
+        finally {
+            setRunning(false);
+            abortRef.current = null;
+            // Refocus so the user can type the next command without
+            // chasing the cursor.
+            requestAnimationFrame(() => inputRef.current?.focus());
+        }
+    }
+    function cancel() {
+        if (abortRef.current) {
+            abortRef.current.abort();
+            abortRef.current = null;
+        }
+    }
+    function clear() {
+        setHistory([]);
+        idCounter.current = 0;
+    }
+    function recall(direction) {
+        if (recentCommands.length === 0)
+            return;
+        let next;
+        if (direction === -1) {
+            // ↑ — walk backwards through history.
+            if (historyIdx === null) {
+                next = recentCommands.length - 1;
+            }
+            else if (historyIdx === 0) {
+                return;
+            }
+            else {
+                next = historyIdx - 1;
+            }
+        }
+        else {
+            // ↓ — walk forward, exit history at the bottom.
+            if (historyIdx === null)
+                return;
+            if (historyIdx >= recentCommands.length - 1) {
+                setHistoryIdx(null);
+                setCommand("");
+                return;
+            }
+            next = historyIdx + 1;
+        }
+        setHistoryIdx(next);
+        setCommand(recentCommands[next] ?? "");
+    }
+    function onKeyDown(e) {
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            void run();
+            return;
+        }
+        // Recall when the textarea is single-line; multi-line composition
+        // (Shift+Enter) keeps native arrow-key navigation.
+        const isSingleLine = !command.includes("\n");
+        if (e.key === "ArrowUp" && isSingleLine) {
+            e.preventDefault();
+            recall(-1);
+        }
+        else if (e.key === "ArrowDown" && isSingleLine) {
+            e.preventDefault();
+            recall(1);
+        }
+    }
+    const targetLabel = target === "live"
+        ? "Live sandbox"
+        : `Preview build ${target}`;
+    return (_jsxs("section", { children: [_jsx(SectionHeader, { title: "Shell", description: target === "live"
+                    ? "Run a one-shot command inside the running sandbox. Defaults to bash semantics; equivalent to the agent's exec tool."
+                    : "Boot a throwaway VM from the selected build's snapshot, run the command, then tear it down. Lets you sanity-check a build before switching the tenant to it. The live sandbox is not touched.", actions: _jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => void loadBuilds(), className: "btn-ghost flex items-center gap-1.5 px-2 py-1 text-[11px] text-gray-400", title: "Refresh build list", children: [_jsx(RefreshCw, { size: 11 }), "Reload builds"] }), _jsxs("button", { type: "button", onClick: clear, disabled: history.length === 0, className: "btn-ghost flex items-center gap-1.5 px-2 py-1 text-[11px] text-gray-400 disabled:opacity-50", title: "Clear command history (does not affect the sandbox)", children: [_jsx(Trash2, { size: 12 }), "Clear"] })] }) }), history.length === 0 && (_jsxs("p", { className: "mb-2 rounded-md border border-dashed border-gray-800 px-3 py-3 text-center text-[11px] text-gray-500", children: ["Try", " ", _jsx("code", { className: "rounded bg-gray-800 px-1 text-gray-300", children: "ls /workspace" }), " · ", _jsx("code", { className: "rounded bg-gray-800 px-1 text-gray-300", children: "python3 --version" }), " · ", _jsx("code", { className: "rounded bg-gray-800 px-1 text-gray-300", children: "which libreoffice" }), "."] })), _jsx("div", { className: "mb-2 max-h-[420px] space-y-2 overflow-y-auto", children: history.map((e) => (_jsx(ShellEntryView, { entry: e }, e.id))) }), _jsxs("div", { className: "rounded-md border border-gray-800 bg-gray-950 p-2", children: [_jsxs("div", { className: "mb-1.5 flex flex-wrap items-center gap-2 text-[10px] text-gray-500", children: [_jsx("span", { children: "target:" }), _jsxs("select", { value: target, onChange: (e) => setTarget(e.target.value), className: `rounded border px-2 py-0.5 font-mono text-[11px] text-gray-200 outline-none focus:border-blue-700 ${target === "live"
+                                    ? "border-emerald-700/40 bg-gray-900"
+                                    : "border-amber-700/40 bg-amber-950/30"}`, title: "Run against the live sandbox or boot a throwaway preview VM from a build", children: [_jsx("option", { value: "live", children: "Live sandbox" }), builds.length > 0 && (_jsx("optgroup", { label: "Preview build\u2026", children: builds.map((b) => (_jsxs("option", { value: b.buildId, children: [b.buildId, " \u00B7 ", b.baseImage, b.published ? " (in use)" : ""] }, b.buildId))) }))] }), _jsx("span", { className: "text-gray-600", children: "\u00B7" }), _jsx("span", { children: "workdir:" }), _jsx("input", { type: "text", value: workdir, onChange: (e) => setWorkdir(e.target.value), spellCheck: false, className: "flex-1 rounded border border-gray-800 bg-gray-900 px-2 py-0.5 font-mono text-[11px] text-gray-200 outline-none focus:border-blue-700" })] }), _jsxs("div", { className: "flex items-end gap-2", children: [_jsx("textarea", { ref: inputRef, value: command, onChange: (e) => {
+                                    setCommand(e.target.value);
+                                    setHistoryIdx(null);
+                                }, onKeyDown: onKeyDown, disabled: running, spellCheck: false, placeholder: "echo hello", rows: 2, className: "flex-1 resize-y rounded border border-gray-800 bg-gray-900 px-2 py-1 font-mono text-[12px] leading-relaxed text-gray-100 outline-none placeholder:text-gray-600 focus:border-blue-700 disabled:opacity-60" }), running ? (_jsxs("button", { type: "button", onClick: cancel, className: "flex items-center gap-1.5 rounded-md bg-rose-600 px-3 py-1.5 text-[11px] font-medium text-white hover:bg-rose-500", title: "Abort the in-flight request. The preview VM is also torn down server-side after a server-enforced timeout (60s default).", children: [_jsx(X, { size: 12 }), "Cancel"] })) : (_jsxs("button", { type: "button", onClick: () => void run(), disabled: command.trim().length === 0, className: "flex items-center gap-1.5 rounded-md bg-emerald-600 px-3 py-1.5 text-[11px] font-medium text-white hover:bg-emerald-500 disabled:cursor-not-allowed disabled:bg-gray-800 disabled:text-gray-500", children: [_jsx(Terminal, { size: 12 }), "Run"] }))] }), _jsxs("p", { className: "mt-1 text-[10px] text-gray-600", children: ["Target: ", _jsx("strong", { className: "text-gray-400", children: targetLabel }), " · ", "Enter to run \u00B7 Shift+Enter for a newline \u00B7 \u2191/\u2193 to walk history. Per-call timeout 60s (max 5 min). Preview boots add ~5-10s on top of the command time."] })] })] }));
+}
+function ShellEntryView({ entry }) {
+    const { result, transportError } = entry;
+    const running = result === null && transportError === null;
+    const ok = result?.ok === true;
+    const failed = (result && !result.ok) || transportError != null;
+    return (_jsxs("div", { className: "rounded-md border border-gray-800 bg-gray-900/50 px-3 py-2 font-mono text-[11px] leading-relaxed", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [running ? (_jsx(Loader2, { size: 11, className: "animate-spin text-gray-400" })) : ok ? (_jsx(CheckCircle2, { size: 11, className: "text-emerald-400" })) : (_jsx(AlertTriangle, { size: 11, className: "text-rose-400" })), _jsx("code", { className: "flex-1 break-all text-gray-200", children: entry.command }), _jsx("span", { className: `rounded px-1 py-0.5 text-[9px] uppercase tracking-wide ${entry.target === "live"
+                            ? "bg-emerald-900/40 text-emerald-300"
+                            : "bg-amber-900/40 text-amber-300"}`, title: entry.target === "live"
+                            ? "Ran against the tenant's live sandbox"
+                            : `Ran against build ${entry.target}'s snapshot in a throwaway preview VM`, children: entry.target === "live" ? "live" : `preview ${entry.target}` }), _jsxs("span", { className: "text-[9px] text-gray-600", children: ["cwd:", entry.workdir] }), result && (_jsxs("span", { className: ok
+                            ? "rounded bg-emerald-900/40 px-1.5 py-0.5 text-[9px] text-emerald-300"
+                            : "rounded bg-rose-900/40 px-1.5 py-0.5 text-[9px] text-rose-300", children: ["exit ", result.exitCode, result.timedOut && " · timed out", " · ", (result.durationMs / 1000).toFixed(2), "s"] }))] }), transportError && (_jsx("pre", { className: "max-h-40 overflow-auto whitespace-pre-wrap rounded bg-rose-950/40 px-2 py-1 text-[11px] text-rose-200", children: transportError })), result && (result.stdout || result.stderr) && (_jsxs("div", { className: "space-y-1", children: [result.stdout && (_jsx("pre", { className: "max-h-72 overflow-auto whitespace-pre-wrap rounded bg-gray-950 px-2 py-1 text-[11px] text-gray-200", children: result.stdout })), result.stderr && (_jsx("pre", { className: "max-h-72 overflow-auto whitespace-pre-wrap rounded bg-amber-950/30 px-2 py-1 text-[11px] text-amber-200", children: result.stderr }))] })), result && !result.stdout && !result.stderr && !failed && (_jsx("p", { className: "text-[10px] italic text-gray-500", children: "(no output)" }))] }));
+}
+function ResetSection({ refreshTick, onMutate, }) {
+    const [resetting, setResetting] = useState(false);
+    const [status, setStatus] = useState(null);
+    const [error, setError] = useState(null);
+    const [configOpen, setConfigOpen] = useState(false);
+    const loadStatus = useCallback(async () => {
+        try {
+            const r = await fetchJson(`${ROUTE_BASE}/status`);
+            setStatus(r);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    }, []);
+    useEffect(() => {
+        void loadStatus();
+    }, [loadStatus]);
+    // Re-fetch status whenever a sibling section signals the sandbox
+    // lifecycle changed (e.g. publish + reset, or a build was deleted).
+    // Skip on the initial render because loadStatus already ran above.
+    const firstTick = useRef(refreshTick);
+    useEffect(() => {
+        if (refreshTick === firstTick.current)
+            return;
+        void loadStatus();
+    }, [refreshTick, loadStatus]);
+    // Live ticker: poll status while the VM is in a transient state
+    // (starting / stopping). Stops once we see a steady state so we
+    // don't hammer the runner forever.
+    useEffect(() => {
+        if (!status)
+            return;
+        const transient = status.state === "starting" || status.state === "stopped";
+        if (!transient)
+            return;
+        const id = window.setInterval(() => void loadStatus(), 2000);
+        return () => window.clearInterval(id);
+    }, [status, loadStatus]);
+    async function reset() {
+        setResetting(true);
+        setError(null);
+        try {
+            const r = await fetchJson(`${ROUTE_BASE}/reset`, { method: "POST" });
+            setStatus(r.status);
+            // Reset returns immediately after the runner promises to
+            // restart, but the VM may still be transitioning through
+            // “starting”. The transient-state ticker above will follow it
+            // until it settles on “ready”.
+            onMutate();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setResetting(false);
+        }
+    }
+    return (_jsxs("section", { children: [_jsx(SectionHeader, { title: "Live sandbox", description: "Reset the running VM. After publishing a new build, reset to make it live.", actions: _jsxs(_Fragment, { children: [_jsxs("button", { type: "button", onClick: () => void loadStatus(), className: "btn-ghost flex items-center gap-1.5 px-2 py-1 text-[11px] text-gray-400", children: [_jsx(RefreshCw, { size: 12 }), "Refresh"] }), _jsxs("button", { type: "button", onClick: () => setConfigOpen(true), className: "btn-ghost flex items-center gap-1.5 px-2 py-1 text-[11px] text-gray-300", title: "Edit cpu / memory / timeout for both Browser and Task sandboxes", children: [_jsx(Settings, { size: 12 }), "Configure"] }), _jsxs("button", { type: "button", onClick: () => void reset(), disabled: resetting, className: "flex items-center gap-1.5 rounded-md border border-rose-700/60 bg-rose-950/40 px-3 py-1.5 text-[11px] font-medium text-rose-200 hover:bg-rose-900/40 disabled:cursor-not-allowed disabled:opacity-50", title: "Stop and rebuild the VM from the published snapshot (or default image)", children: [resetting ? (_jsx(Loader2, { size: 12, className: "animate-spin" })) : (_jsx(RotateCcw, { size: 12 })), "Reset sandbox"] })] }) }), error && _jsx(Banner, { kind: "error", text: error }), _jsx("div", { className: "rounded-md border border-gray-800 bg-gray-900/40", children: status && (_jsxs("dl", { className: "grid grid-cols-3 gap-x-4 gap-y-1.5 p-3 text-[11px]", children: [_jsx(Field, { label: "State", children: status.runner === "nullable" ? "not running" : status.state }), _jsx(Field, { label: "Runner", children: status.runner }), _jsx(Field, { label: "Uptime", children: formatUptime(status.uptimeMs) }), extractMetaString(status.meta, "sandboxName") && (_jsx(Field, { label: "Sandbox", children: _jsx("code", { className: "rounded bg-gray-800 px-1", children: extractMetaString(status.meta, "sandboxName") }) })), extractMetaString(status.meta, "activeSnapshot") ? (_jsx(Field, { label: "Booted from", children: _jsxs("code", { className: "rounded bg-emerald-900/40 px-1 text-emerald-200", children: ["snapshot \u00B7 ", extractMetaString(status.meta, "activeSnapshot")] }) })) : extractMetaString(status.meta, "image") ? (_jsx(Field, { label: "Booted from", children: _jsxs("code", { className: "rounded bg-gray-800 px-1", children: ["image \u00B7 ", extractMetaString(status.meta, "image")] }) })) : null, extractMetaString(status.meta, "image") &&
+                            extractMetaString(status.meta, "activeSnapshot") && (_jsx(Field, { label: "Default image", children: _jsx("code", { className: "rounded bg-gray-800 px-1 text-gray-400", children: extractMetaString(status.meta, "image") }) })), status.liveMemory && (_jsx(Field, { label: "Memory", children: _jsxs("span", { title: `${formatKb(status.liveMemory.usedKb)} used · ${formatKb(status.liveMemory.availableKb)} available · ${formatKb(status.liveMemory.totalKb)} total`, children: [formatKb(status.liveMemory.usedKb), _jsxs("span", { className: "text-gray-500", children: [" / ", formatKb(status.liveMemory.totalKb), " (", " ", Math.round((status.liveMemory.usedKb / status.liveMemory.totalKb) * 100), "%)"] })] }) })), status.lastError && (_jsx(Field, { label: "Last error", children: _jsx("span", { className: "text-rose-300", children: status.lastError }) }))] })) }), _jsx(ConfigureSandboxDialog, { open: configOpen, onClose: () => setConfigOpen(false) })] }));
+}
+function TaskPoolSection({ refreshTick }) {
+    const [entries, setEntries] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [destroying, setDestroying] = useState(null);
+    const load = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const r = await fetchJson(`${ROUTE_BASE}/task-pool`);
+            setEntries(r.entries);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    useEffect(() => {
+        void load();
+    }, [load, refreshTick]);
+    // Cheap auto-refresh: poll every 5s while the page is open.
+    // Sandbox state changes off-channel (a worker pickup spawns a
+    // VM, a finally hook stops it) and there's no event we can
+    // subscribe to, so the polling loop keeps the panel honest.
+    useEffect(() => {
+        const t = window.setInterval(() => void load(), 5_000);
+        return () => window.clearInterval(t);
+    }, [load]);
+    async function destroy(name) {
+        setDestroying(name);
+        setError(null);
+        try {
+            const url = `${ROUTE_BASE}/task-pool/destroy?sandbox_name=${encodeURIComponent(name)}`;
+            await fetchJson(url, { method: "POST" });
+            await load();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setDestroying(null);
+        }
+    }
+    const running = entries?.filter((e) => e.poolState === "running").length ?? 0;
+    const total = entries?.length ?? 0;
+    return (_jsxs("section", { children: [_jsx(SectionHeader, { title: "Per-task sandbox pool", description: total === 0
+                    ? "No per-task sandboxes yet. The pool spawns one when a workboard task is picked up by a worker."
+                    : `${total} sandbox${total === 1 ? "" : "es"} (${running} running)`, actions: _jsxs("button", { type: "button", onClick: () => void load(), disabled: loading, className: "btn-ghost flex items-center gap-1.5 px-2 py-1 text-[11px] text-gray-400", children: [_jsx(RefreshCw, { size: 12, className: loading ? "animate-spin" : "" }), "Refresh"] }) }), error && _jsx(Banner, { kind: "error", text: error }), entries !== null && entries.length > 0 && (_jsx("div", { className: "overflow-hidden rounded-md border border-gray-800", children: _jsxs("table", { className: "w-full text-[11px]", children: [_jsx("thead", { className: "bg-gray-900/60 text-[10px] uppercase tracking-wide text-gray-500", children: _jsxs("tr", { children: [_jsx("th", { className: "px-3 py-1.5 text-left", children: "State" }), _jsx("th", { className: "px-3 py-1.5 text-left", children: "Sandbox" }), _jsx("th", { className: "px-3 py-1.5 text-left", children: "Task" }), _jsx("th", { className: "px-3 py-1.5 text-left", children: "Created" }), _jsx("th", { className: "px-3 py-1.5 text-right", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-gray-800", children: entries.map((e) => (_jsxs("tr", { className: "text-gray-300", children: [_jsx("td", { className: "px-3 py-1.5", children: _jsx(PoolStateChip, { state: e.poolState }) }), _jsx("td", { className: "px-3 py-1.5 font-mono text-[10px] text-gray-400", children: _jsx("code", { className: "cursor-pointer hover:text-gray-100", title: "Click to copy", onClick: () => {
+                                                void navigator.clipboard
+                                                    ?.writeText(e.sandboxName)
+                                                    .catch(() => { });
+                                            }, children: e.sandboxName }) }), _jsxs("td", { className: "px-3 py-1.5 font-mono text-[10px] text-gray-500", children: [e.taskId.slice(0, 8), "\u2026"] }), _jsx("td", { className: "px-3 py-1.5 text-[10px] text-gray-500", children: e.createdAt
+                                            ? formatRelative(e.createdAt)
+                                            : "—" }), _jsx("td", { className: "px-3 py-1.5 text-right", children: _jsxs("button", { type: "button", onClick: () => void destroy(e.sandboxName), disabled: destroying === e.sandboxName, className: "flex items-center gap-1 rounded border border-gray-800 px-2 py-0.5 text-[10px] text-rose-300 hover:bg-rose-950/40 disabled:cursor-not-allowed disabled:opacity-40", title: e.poolState === "running"
+                                                ? "Stop and remove this sandbox (also kills the running task)"
+                                                : "Remove the sandbox image from disk", children: [destroying === e.sandboxName ? (_jsx(Loader2, { size: 10, className: "animate-spin" })) : (_jsx(Trash2, { size: 10 })), e.poolState === "orphan" ? "Forget" : "Destroy"] }) })] }, e.sandboxName))) })] }) }))] }));
+}
+function PoolStateChip({ state }) {
+    const className = state === "running"
+        ? "bg-emerald-900/40 text-emerald-200 border-emerald-700/50"
+        : state === "starting"
+            ? "bg-amber-900/40 text-amber-200 border-amber-700/50"
+            : state === "error"
+                ? "bg-rose-900/40 text-rose-200 border-rose-700/50"
+                : state === "orphan"
+                    ? "bg-gray-900/40 text-gray-400 border-gray-700/50"
+                    : "bg-gray-900/30 text-gray-300 border-gray-800";
+    return (_jsx("span", { className: `inline-flex items-center rounded border px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide ${className}`, children: state }));
+}
+/**
+ * Modal wrapper around the auto-generated PluginConfigForm. The
+ * form surface is large (7 numeric fields after the role split),
+ * so we keep it out of the always-visible Live sandbox card and
+ * surface it on demand.
+ */
+function ConfigureSandboxDialog({ open, onClose, }) {
+    if (!open)
+        return null;
+    return (_jsx("div", { className: "fixed inset-0 z-40 flex items-center justify-center bg-black/60 p-6", onClick: onClose, children: _jsxs("div", { className: "flex max-h-[80vh] w-full max-w-lg flex-col overflow-hidden rounded-lg border border-gray-800 bg-gray-950 shadow-2xl", onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { className: "flex shrink-0 items-center justify-between border-b border-gray-800 px-4 py-3", children: [_jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-gray-100", children: "Sandbox runtime parameters" }), _jsx("div", { className: "mt-0.5 text-[11px] text-gray-500", children: "Browser sandbox changes take effect on the next Reset; Task sandbox changes take effect on the next task acquire." })] }), _jsx("button", { type: "button", onClick: onClose, className: "rounded p-1 text-gray-400 hover:bg-gray-800 hover:text-gray-100", "aria-label": "Close configure dialog", children: _jsx(X, { size: 14 }) })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 pt-3 [&>div>div>div:last-child]:sticky [&>div>div>div:last-child]:bottom-0 [&>div>div>div:last-child]:bg-gray-950 [&>div>div>div:last-child]:pt-3 [&>div>div>div:last-child]:pb-3", children: _jsx(PluginConfigForm, { pluginId: "microsandbox" }) })] }) }));
+}
+// ─── shared layout helpers ─────────────────────────────────────
+function Field({ label, children }) {
+    return (_jsxs(_Fragment, { children: [_jsx("dt", { className: "col-span-1 text-gray-500", children: label }), _jsx("dd", { className: "col-span-2 text-gray-300", children: children })] }));
+}
+function SectionHeader({ title, description, actions, }) {
+    return (_jsxs("div", { className: "mb-2 flex items-end justify-between gap-3", children: [_jsxs("div", { children: [_jsx("h2", { className: "text-sm font-semibold text-gray-100", children: title }), description && (_jsx("p", { className: "mt-0.5 text-[11px] text-gray-500", children: description }))] }), actions && _jsx("div", { className: "flex items-center gap-1.5", children: actions })] }));
+}
+function Banner({ kind, text, }) {
+    const cls = kind === "ok"
+        ? "border-emerald-700/40 bg-emerald-950/40 text-emerald-300"
+        : kind === "warn"
+            ? "border-amber-700/40 bg-amber-950/40 text-amber-200"
+            : kind === "error"
+                ? "border-rose-700/50 bg-rose-950/40 text-rose-300"
+                : "border-blue-700/40 bg-blue-950/40 text-blue-200";
+    const Icon = kind === "ok"
+        ? CheckCircle2
+        : kind === "info"
+            ? Loader2
+            : AlertTriangle;
+    return (_jsxs("div", { className: `mb-2 flex items-start gap-2 rounded-md border px-3 py-2 text-[11px] ${cls}`, children: [_jsx(Icon, { size: 12, className: kind === "info" ? "mt-0.5 animate-spin" : "mt-0.5 flex-shrink-0" }), _jsx("span", { className: "break-words", children: text })] }));
+}
+// ─── right-panel: BrowserViewportPanel ───────────────────────
+//
+// Embeds the per-tenant noVNC viewport in the chat shell's right
+// column so the user can watch what the agent's browser tools are
+// doing without leaving the conversation. This is the only
+// surface for the live browser view today — the prior
+// /admin/microsandbox/browser admin page was redundant once the
+// in-chat panel handled both viewing and the dynamic resize loop,
+// so it was retired.
+//
+// Wiring: the BrowserSidecar reports the host port that supervisor's
+// websockify is forwarded to. We poll /browser/status for it (same
+// shape as the admin page uses) and slot it into an iframe pointing
+// at noVNC's `vnc.html?autoconnect=true&resize=scale&reconnect=true`.
+// When the browser stack isn't running yet, the panel shows an empty
+// state with a deep link to the admin Browser page.
+//
+// `resize=scale` (not `remote`): the closed-source predecessor's
+// BrowserPanel ran the same way and copying that decision pays off
+// because it is the more forgiving combination. Logic, briefly:
+//
+//   - We drive the *real* Xvfb framebuffer from the host with
+//     `xrandr --fb` to match the iframe's pixel size, so chromium
+//     gets a 1:1 viewport and page content reflows correctly.
+//   - noVNC's client-side `scale` then becomes a no-op in the
+//     happy path; when the framebuffer and iframe drift by a few
+//     pixels (during a drag, after a layout settle), scaling
+//     keeps the canvas stretched edge-to-edge with no black bars
+//     or right-side cropping. `resize=remote` would instead ask
+//     the noVNC server to RandR-resize, but our Xvfb only has the
+//     initial 2400x1800 framebuffer mode — the request would either
+//     no-op or fight the host-driven xrandr.
+//   - `reconnect=true` so the iframe auto-recovers when a sandbox
+//     reset / supervisord restart drops websockify.
+//   - We use the full `vnc.html` (not the lite variant) because
+//     it ships the toolbar / settings / clipboard helpers users
+//     occasionally need; toolbar collapses to a thin strip.
+//
+// Why three resize layers — see browser-routes.ts postBrowserResize.
+// In short: xrandr keeps Xvfb sized to the iframe so chromium
+// fills it; wmctrl re-fits the chrome window inside the new
+// framebuffer; Playwright MCP's browser_resize tells chromium to
+// re-layout the *page viewport* (which is what makes pages reflow
+// to fit the new width — X11 alone won't do that).
+function BrowserViewportPanel(_props) {
+    const [data, setData] = useState(null);
+    const [error, setError] = useState(null);
+    const containerRef = useRef(null);
+    const [dragging, setDragging] = useState(false);
+    const load = useCallback(async () => {
+        try {
+            const r = await fetchJson(`${ROUTE_BASE}/browser/status`);
+            setData(r);
+            setError(null);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    }, []);
+    useEffect(() => {
+        void load();
+    }, [load]);
+    // Re-poll while the stack isn't ready so the iframe pops in the
+    // moment supervisord finishes booting. Stops polling once ready
+    // — the iframe handles its own connection lifecycle from there.
+    useEffect(() => {
+        if (data?.ready)
+            return;
+        const id = window.setInterval(() => void load(), 4000);
+        return () => window.clearInterval(id);
+    }, [data?.ready, load]);
+    // Drive the server-side three-layer resize from this panel's
+    // actual rendered size. We keep this self-contained instead of
+    // wiring through the chat shell because the panel is the only
+    // consumer that cares about pixel-perfect viewport sync, and the
+    // chat shell already throttles its own layout work elsewhere.
+    useDebouncedViewportSync({
+        container: containerRef,
+        enabled: !!(data?.ready && data.ports.vnc),
+        onDraggingChange: setDragging,
+    });
+    return (_jsxs("div", { className: "flex h-full flex-col", children: [_jsx("div", { className: "flex items-center justify-between border-b border-gray-800 px-4 py-2", children: _jsxs("div", { className: "flex items-center gap-2 text-sm font-medium text-gray-200", children: [_jsx(Globe, { size: 14, className: "text-brand-400" }), "Browser"] }) }), error && (_jsxs("div", { className: "m-3 flex items-start gap-1.5 rounded-md border border-rose-700/50 bg-rose-950/40 px-3 py-2 text-[11px] text-rose-300", children: [_jsx(AlertTriangle, { size: 12, className: "mt-px flex-shrink-0" }), _jsx("span", { className: "break-all", children: error })] })), _jsx("div", { ref: containerRef, className: "relative min-h-0 flex-1 bg-gray-950", children: data?.ready && data.ports.vnc ? (_jsx("iframe", { title: "Browser viewport", src: `http://localhost:${data.ports.vnc}/vnc.html?autoconnect=true&resize=scale&reconnect=true&reconnect_delay=1000`, 
+                    // Disable iframe pointer events while the user drags
+                    // the chat-shell panel divider — otherwise noVNC swallows
+                    // the cursor and the resize feels stuck.
+                    style: { pointerEvents: dragging ? "none" : undefined }, className: "absolute inset-0 h-full w-full bg-gray-950" })) : (_jsx("div", { className: "flex h-full items-center justify-center px-6 text-center text-[12px] text-gray-500", children: data
+                        ? data.hint ?? "Browser stack not running."
+                        : "Loading…" })) })] }));
+}
+/**
+ * Watches a container's box, debounces resize events, and POSTs the
+ * latest size to `/browser/resize` once the user stops dragging.
+ *
+ * Implementation notes copied from the closed-source tianshu
+ * BrowserPanel:
+ *  - We listen to BOTH pointer and mouse events because the chat-shell
+ *    panel divider uses mousedown/move/up while pinch-zoom uses
+ *    pointer events.
+ *  - While a button is down we record the latest size but never send
+ *    it; on release we wait QUIET_MS for layout to settle, then send
+ *    once. This avoids hammering the backend (xrandr + wmctrl +
+ *    Playwright MCP ≈ 200ms each per call) during a continuous drag.
+ *  - We cap DPR at 2 because retina + a wide panel can balloon to
+ *    framebuffer sizes Xvfb's `-screen` ceiling will silently
+ *    truncate.
+ */
+function useDebouncedViewportSync(opts) {
+    const { container, enabled, onDraggingChange } = opts;
+    useEffect(() => {
+        if (!enabled)
+            return;
+        const el = container.current;
+        if (!el)
+            return;
+        const QUIET_MS = 300;
+        const dpr = Math.min(window.devicePixelRatio || 1, 2);
+        let timer = null;
+        let dragging = false;
+        let pending = null;
+        let lastSent = { w: 0, h: 0 };
+        const post = (w, h) => {
+            void fetch(`${ROUTE_BASE}/browser/resize`, {
+                method: "POST",
+                credentials: "include",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ width: w, height: h }),
+            }).catch(() => {
+                // Best-effort — a resize that doesn't reach the server
+                // just means the viewport stays at its last value, which
+                // noVNC's client-side scaling renders fine.
+            });
+        };
+        const flush = () => {
+            if (!pending)
+                return;
+            const { w, h } = pending;
+            if (w < 320 || h < 240)
+                return; // panel hidden / collapsed
+            if (Math.abs(w - lastSent.w) < 8 &&
+                Math.abs(h - lastSent.h) < 8) {
+                return;
+            }
+            lastSent = { w, h };
+            pending = null;
+            post(w, h);
+        };
+        const scheduleFlush = () => {
+            if (timer)
+                clearTimeout(timer);
+            timer = setTimeout(() => {
+                timer = null;
+                if (dragging)
+                    return; // still dragging — wait for release
+                flush();
+            }, QUIET_MS);
+        };
+        const onResize = (entries) => {
+            const entry = entries[0];
+            if (!entry)
+                return;
+            const w = Math.round(entry.contentRect.width * dpr);
+            const h = Math.round(entry.contentRect.height * dpr);
+            pending = { w, h };
+            scheduleFlush();
+        };
+        const ro = new ResizeObserver(onResize);
+        ro.observe(el);
+        const setDragging = (v) => {
+            dragging = v;
+            onDraggingChange(v);
+            if (!v)
+                scheduleFlush();
+        };
+        const onDown = () => setDragging(true);
+        const onUp = () => setDragging(false);
+        window.addEventListener("mousedown", onDown);
+        window.addEventListener("mouseup", onUp);
+        window.addEventListener("pointerdown", onDown);
+        window.addEventListener("pointerup", onUp);
+        window.addEventListener("pointercancel", onUp);
+        return () => {
+            ro.disconnect();
+            if (timer)
+                clearTimeout(timer);
+            window.removeEventListener("mousedown", onDown);
+            window.removeEventListener("mouseup", onUp);
+            window.removeEventListener("pointerdown", onDown);
+            window.removeEventListener("pointerup", onUp);
+            window.removeEventListener("pointercancel", onUp);
+        };
+    }, [container, enabled, onDraggingChange]);
+}
+const clientExports = {
+    components: {
+        BrowserViewportPanel: BrowserViewportPanel,
+        MicroSandboxAdminPage: MicroSandboxAdminPage,
+    },
+};
+export const components = clientExports.components;
+export default clientExports;
+//# sourceMappingURL=client.js.map