loom-agent 1.2.36 → 1.3.2

package/src/tui/App.tsx

@@ -52,7 +52,7 @@ import { prettyToolName, stripAnsi } from "./toolname.ts";
 import { toolDisplay } from "./tool-display.ts";
 import {
   ProviderPicker, SelectModal, InputModal, SettingsModal,
-  PaletteModal, McpModal, ConnectorsModal, GraphModal,
+  PaletteModal, McpModal, ConnectorsModal, GraphModal, SandboxModal,
   openModelPicker, openKeyModal, openBaseUrlEditor,
   showProvidersText, showHelpText, showAgentsText,
   openGraphModal,
@@ -65,6 +65,7 @@ import { snapshotBefore, snapshotAfter, snapshotBashBefore, diffBashAfter, clear
 import { createRestorePoint, listRestorePoints, restoreTo } from "../core/restore.js";
 import { PROVIDERS, PROVIDER_ORDER, PROVIDER_LABELS } from "../providers/index.js";
 import * as plugin from "../core/plugin-cmd.js";
+import * as sandbox from "../core/sandbox.js";
 import { on } from "../core/events.js";
 import { listSkills } from "../skills/skills-manager.js";
 
@@ -117,14 +118,15 @@ export function App(props: { initialPrompt?: string; resumeSession?: string; aut
     if (text.startsWith("/")) {
       var q = text.slice(1).toLowerCase();
       var hits = SLASH_LIST.filter(function(c) { return c.cmd.startsWith(q); }).map(function(c) {
-        var s: Suggestion = { label: "/" + c.cmd, desc: c.desc + (c.args ? " \u2014 " + c.args : "") };
+        // Popup stays terse: short desc only — syntax lives in /help (args).
+        var s: Suggestion = { label: "/" + c.cmd, desc: c.desc };
         return s;
       });
       // Custom commands (.loom/commands/*.md) join the picker after built-ins.
       try {
         const { listCustomCommands } = require("../core/custom-commands.js");
         for (const cc of listCustomCommands()) {
-          if (cc.name.toLowerCase().startsWith(q)) hits.push({ label: "/" + cc.name, desc: "custom command \u2014 " + cc.file });
+          if (cc.name.toLowerCase().startsWith(q)) hits.push({ label: "/" + cc.name, desc: "custom command" });
         }
       } catch {}
       setSuggestions(hits); setAutoKind("slash"); setAutoIndex(0);
@@ -163,6 +165,25 @@ export function App(props: { initialPrompt?: string; resumeSession?: string; aut
     if (raw.startsWith("/")) { recordPrompt(raw); setDraft(""); processSlash(raw); return; }
     if (raw.startsWith("!")) { recordPrompt(raw); setDraft(""); appendMessage({ role: "user", content: raw }); appendMessage({ role: "system", content: runShell(raw.slice(1)) }); return; }
 
+    // Docker-install resume: while an install is pending, "docker is ready"
+    // continues the sandbox setup in THIS session instead of going to the
+    // model. Outside the pending flow the phrase is ordinary conversation.
+    if (sandbox.isReadySignal(raw)) {
+      var st0 = sandbox.sandboxStatus();
+      if (st0.pending || st0.docker === "ready" && st0.container === "absent" && /set ?up|build|create|make/i.test(raw)) {
+        recordPrompt(raw); setDraft("");
+        appendMessage({ role: "user", content: raw });
+        if (st0.docker === "ready" || st0.docker === "no_daemon") {
+          appendMessage({ role: "system", content: "Docker detected \u2014 pick an OS to finish the sandbox setup." });
+          openModal({ type: "sandbox" });
+        } else {
+          sandbox.markInstallPending();
+          appendMessage({ role: "system", content: sandbox.installGuide() });
+        }
+        return;
+      }
+    }
+
     // "@agent …" delegates the whole turn to that subagent (same as the model
     // calling the task tool — but explicit). "@file …" still inlines the file.
     var agentId: string | null = null;
@@ -464,12 +485,27 @@ export function App(props: { initialPrompt?: string; resumeSession?: string; aut
         // Keep the partial text in the bubble; the session already stored it,
         // so the user can type "continue" to resume the task.
         patchMessageAt(idx, { thinking: false, interrupted: true, thinkTime: Date.now() - t0, isError: false, parts: snapshotParts() });
-        appendMessage({ role: "system", content: "Interrupted \u2014 partial response kept. Type \"continue\" to resume the task." });
+        var keptChars = String(resp.content || "").length;
+        var inProgress = null;
+        var tdNow = sess.todos || [];
+        for (var ti = 0; ti < tdNow.length; ti++) { if (tdNow[ti].status === "in_progress") { inProgress = tdNow[ti]; break; } }
+        appendMessage({ role: "system", content: "Interrupted \u2014 kept " + keptChars + " chars of the partial response" + (inProgress ? " (in progress: " + inProgress.content + ")" : "") + ". Type \"continue\" to resume the task." });
       } else {
-        patchMessageAt(idx, { content: resp.content || "(no response)", thinking: false, thinkTime: Date.now() - t0, isError: isErr, parts: snapshotParts() });
+        patchMessageAt(idx, { content: resp.content || "(the model ended the turn without any text)", thinking: false, thinkTime: Date.now() - t0, isError: isErr, parts: snapshotParts() });
+        // Real leftovers, not a generic stop line: when the turn wrote todos
+        // and still has open ones, the session reports exactly which.
+        var openTodos = resp.openTodos;
+        if (!isErr && openTodos && openTodos.length) {
+          var openNames = [];
+          for (var oi = 0; oi < Math.min(openTodos.length, 8); oi++) openNames.push("- [" + openTodos[oi].status + "] " + openTodos[oi].content);
+          appendMessage({ role: "system", content: "Stopped with " + openTodos.length + " todo(s) still open:\n" + openNames.join("\n") + (openTodos.length > 8 ? "\n- \u2026" : "") + "\nSay \"continue\" to keep going." });
+        }
       }
       if (!isErr && sess.mode === "plan") {
-        appendMessage({ role: "system", content: "Plan complete \u2014 press Tab to switch to Build, then send \"go\" to execute." });
+        var plannedSteps = 0;
+        var planTodos = sess.todos || [];
+        for (var pi = 0; pi < planTodos.length; pi++) { if (planTodos[pi].status !== "completed" && planTodos[pi].status !== "cancelled") plannedSteps++; }
+        appendMessage({ role: "system", content: "Plan complete \u2014 " + (plannedSteps ? plannedSteps + " step(s) planned. " : "") + "press Tab to switch to Build, then send \"go\" to execute." });
       }
       setSpeedStats({ live: null, last: sess.getSpeed().last });
     }).catch(function(e) {
@@ -573,7 +609,15 @@ export function App(props: { initialPrompt?: string; resumeSession?: string; aut
     getSession().conversationId = id;
     var pendingParts: Record<string, any> = {};
     getSession().messages = data.messages.map(function(m) {
-      var clean: any = { role: m.role, content: m.content, toolCalls: m.toolCalls };
+      // toolCallId MUST survive the resume: the provider wire format sends it
+      // as tool_call_id / tool_use_id — dropping it makes the next turn fail
+      // with "400: missing field tool_call_id" (NVIDIA) after a resume.
+      var clean: any = {
+        role: m.role,
+        content: m.content,
+        toolCalls: m.toolCalls || (m as any).tool_calls,
+        toolCallId: m.toolCallId || (m as any).tool_call_id,
+      };
       if (m.reasoning) clean.reasoning = m.reasoning;
       return clean;
     });
@@ -710,7 +754,7 @@ export function App(props: { initialPrompt?: string; resumeSession?: string; aut
           fsx.mkdirSync(dir, { recursive: true });
           const esc = (s: string) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
           const body = messages().map((m: any) => `<div class="m ${esc(m.role)}"><b>${esc(m.role)}</b><pre>${esc(String(m.content ?? ""))}</pre></div>`).join("\n");
-          const html = `<!doctype html><meta charset="utf-8"><title>Loom session</title><style>body{background:#191817;color:#e8e2d9;font-family:ui-monospace,monospace;max-width:900px;margin:2rem auto;padding:0 1rem}.m{border-left:3px solid #555;padding:.25rem .75rem;margin:.6rem 0}.m.user{border-color:#d7a35f}.m.assistant{border-color:#7aa2f7}.m.system{color:#9a938a}pre{white-space:pre-wrap;font-family:inherit;margin:.2rem 0}</style><h1>Loom Code session</h1>${body}`;
+          const html = `<!doctype html><meta charset="utf-8"><title>Loom session</title><style>body{background:#171512;color:#f2ede4;font-family:ui-monospace,monospace;max-width:900px;margin:2rem auto;padding:0 1rem}.m{border-left:3px solid #463f36;padding:.25rem .75rem;margin:.6rem 0}.m.user{border-color:#a8c496}.m.assistant{border-color:#e8845c}.m.system{color:#a89d8d}pre{white-space:pre-wrap;font-family:inherit;margin:.2rem 0}</style><h1>Loom Code session</h1>${body}`;
           const f = pathx.join(dir, (sessionId() || "session") + ".html");
           fsx.writeFileSync(f, html);
           showToast("Shared: " + f, "ok", 6000);
@@ -1043,6 +1087,46 @@ export function App(props: { initialPrompt?: string; resumeSession?: string; aut
         openModal({ type: "connectors" });
         return;
       }
+      case "sandbox": {
+        var ssub = args[0];
+        var st = sandbox.sandboxStatus();
+        // The setup wizard is a modal: docker check (with download link) →
+        // OS pick → live build. Bare /sandbox and /sandbox setup open it.
+        if (!ssub || ssub === "setup" || ssub === "os") { openModal({ type: "sandbox" }); return; }
+        if (ssub === "guide") { appendMessage({ role: "system", content: sandbox.installGuide() }); return; }
+        if (ssub === "off") {
+          sandbox.setSandboxEnabled(false);
+          appendMessage({ role: "system", content: "Sandbox off — agent commands run on the host again. The container is kept (run /sandbox on to re-enable, /sandbox rm to delete it)." });
+          return;
+        }
+        if (ssub === "on") {
+          if (st.container !== "running") { appendMessage({ role: "system", content: "Sandbox container is not running. Run /sandbox setup first." }); return; }
+          sandbox.setSandboxEnabled(true);
+          appendMessage({ role: "system", content: "Sandbox on — agent commands now run inside " + sandbox.CONTAINER + "." });
+          return;
+        }
+        if (ssub === "rm") {
+          try {
+            require("child_process").execFileSync("docker", ["rm", "-f", sandbox.CONTAINER], { windowsHide: true, timeout: 30000, stdio: "ignore" });
+            sandbox.setSandboxEnabled(false);
+            appendMessage({ role: "system", content: "Sandbox container removed. Run /sandbox setup to rebuild it." });
+          } catch { appendMessage({ role: "system", content: "No sandbox container to remove." }); }
+          return;
+        }
+        if (ssub === "status") {
+          var line = "Sandbox: ";
+          if (st.docker === "not_installed") line += "Docker not installed";
+          else if (st.docker === "no_daemon") line += "Docker installed, daemon not running";
+          else line += "Docker " + st.dockerVersion + " \u00b7 container " + st.container + (st.enabled ? " \u00b7 routing ON" : " \u00b7 routing off");
+          if (st.pending) line += "\nWaiting for you to install Docker \u2014 when it's done say \"docker is ready\" (or run /sandbox).";
+          else if (st.docker === "not_installed") line += "\nRun /sandbox for the setup wizard.";
+          else if (st.container === "absent") line += "\nRun /sandbox to build it.";
+          appendMessage({ role: "system", content: line });
+          return;
+        }
+        appendMessage({ role: "system", content: "Usage: /sandbox (wizard) | status | on | off | rm | guide" });
+        return;
+      }
       case "sessions": {
         const saved = listSessions();
         if (!saved.length) {
@@ -1512,6 +1596,16 @@ export function App(props: { initialPrompt?: string; resumeSession?: string; aut
         if (!autoPerm() && !permission() && !modal()) askSessionPermissions();
       }, 500);
     }
+    // Sandbox install pending from a previous session: remind on start so
+    // the user knows to come back with "docker is ready". Skipped in the
+    // test harness (same flag as the session prompt).
+    try {
+      if (!process.env.LOOM_NO_SESSION_PROMPT && sandbox.sandboxStatus().pending) {
+        setTimeout(function() {
+          appendMessage({ role: "system", content: "Docker sandbox setup is still pending. Install Docker (see /sandbox guide), then say \"docker is ready\" and I'll build it automatically." });
+        }, 800);
+      }
+    } catch {}
     _skillToastOff = on("trigger:skill", function(d: any) {
       const names = (d?.skills || []).join(", ");
       showToast("skill: " + names, "ok", 5000);
@@ -1581,6 +1675,7 @@ export function App(props: { initialPrompt?: string; resumeSession?: string; aut
             {m.type === "palette" ? <PaletteModal onPick={m.onPick} /> : null}
             {m.type === "mcp" ? <McpModal /> : null}
             {m.type === "connectors" ? <ConnectorsModal /> : null}
+            {m.type === "sandbox" ? <SandboxModal /> : null}
             {m.type === "graph" ? <GraphModal graph={m.graph} err={m.graphError} /> : null}
             {m.type === "subagents" ? <SubagentPanel /> : null}
             {m.type === "subagent_detail" ? <SubagentDetailPanel /> : null}

package/src/tui/components/BreadcrumbBar.tsx

@@ -1,6 +1,7 @@
-// Top breadcrumb bar — project path, session info, model.
+// Top breadcrumb bar — project path, session info, model. bgPanel surface
+// plus a dim right-hand cluster; no frame (the TUI stays grid-line-free).
 import { palette } from "../theme.ts";
-import { providerName, modelName, sessionId, cwdShort, username, inputMode } from "../store.ts";
+import { providerName, modelName, sessionId, cwdShort, inputMode } from "../store.ts";
 
 const MODE_LABELS: Record<string, string> = { build: "B", plan: "P", chat: "C" };
 
@@ -15,19 +16,19 @@ export function BreadcrumbBar() {
       paddingX={1}
       backgroundColor={ui.bgPanel}
     >
-      <box flexDirection="row">
+      <box flexDirection="row" alignItems="center">
         <text fg={ui.primary}>{"loom"}</text>
-        <text fg={ui.fgMuted}>{" / "}</text>
+        <text fg={ui.fgMuted}>{" · "}</text>
         <text fg={ui.fg}>{cwdShort() || "~"}</text>
-        <text fg={ui.fgMuted}>{"  ·  "}</text>
-        <text fg={ui.fgDim}>{sessionId().slice(0, 8)}</text>
-        <text fg={ui.fgMuted}>{"  ·  "}</text>
+        <text fg={ui.fgMuted}>{" · "}</text>
+        <text fg={ui.fgMuted}>{sessionId().slice(0, 8)}</text>
+        <text fg={ui.fgMuted}>{"  "}</text>
         <text fg={modeColors[inputMode()] || ui.primary}>{"[" + (MODE_LABELS[inputMode()] || "B") + "]"}</text>
       </box>
-      <box flexDirection="row">
+      <box flexDirection="row" alignItems="center">
         <text fg={ui.secondary}>{providerName()}</text>
         <text fg={ui.fgMuted}>{" / "}</text>
-        <text fg={ui.fg}>{modelName()}</text>
+        <text fg={ui.fgDim}>{modelName()}</text>
       </box>
     </box>
   );

package/src/tui/components/ChatArea.tsx

@@ -441,8 +441,8 @@ function MsgBubble(props: { m: any; idx: number }) {
 
   if (m.role === "system") {
     return (
-      <box marginBottom={1} paddingX={2}>
-        <text fg={ui.fgMuted}>{m.content}</text>
+      <box marginBottom={1} paddingX={2} backgroundColor={ui.bgMsg}>
+        <text fg={ui.fgMuted}>{"· " + m.content}</text>
       </box>
     );
   }
@@ -486,7 +486,7 @@ function MsgBubble(props: { m: any; idx: number }) {
       {!todoShown && m.todos?.length ? <TodosBlock todos={m.todos} /> : null}
       {!isThink ? (
         <box flexDirection="row" paddingLeft={3} marginTop={1}>
-          <text fg={isErr ? ui.error : ui.secondary}>{"\u25A3 " + (agentTag || "Loom")}</text>
+          <text fg={isErr ? ui.error : ui.primary}>{"\u25A3 " + (agentTag || "Loom")}</text>
           <text fg={ui.fgMuted}>
             {(m.thinkTime ? " \u00B7 " + fmtMs(m.thinkTime) : "") + (isStop ? " \u00B7 interrupted" : "")}
           </text>

package/src/tui/components/InputBar.tsx

@@ -201,17 +201,19 @@ export function InputBar() {
           </text>
           {slashWin().items.map((item, i) => {
             const abs = slashWin().start + i;
+            const act = abs === autoIndex();
             return (
               <box
- flexDirection="row" paddingY={0}
+                flexDirection="row" paddingY={0}
+                backgroundColor={act ? ui.bgPanelAlt : undefined}
                 onMouseDown={() => selectSuggestionAt(abs)}
                 onMouseUp={() => pickSuggestionAt(abs)}
               >
-                <text fg={abs === autoIndex() ? ui.primary : ui.fgDim}>
-                  {(abs === autoIndex() ? "\u25B6 " : "   ") + item.label.split(" ")[0]}
+                <text fg={act ? ui.primary : ui.fgDim}>
+                  {(act ? "▸ " : "  ") + item.label.split(" ")[0]}
                 </text>
                 <Show when={!!item.desc}>
-                  <text fg={abs === autoIndex() ? ui.fg : ui.fgMuted}>
+                  <text fg={act ? ui.fg : ui.fgMuted}>
                     {"  " + item.desc}
                   </text>
                 </Show>
@@ -230,15 +232,19 @@ export function InputBar() {
         >
           {fileWin().items.map((item, i) => {
             const abs = fileWin().start + i;
+            const act = abs === autoIndex();
             return (
-              <text
-
-                fg={abs === autoIndex() ? ui.primary : ui.fgDim}
+              // Box wrapper: text nodes ignore a direct backgroundColor prop.
+              <box
+                flexDirection="row"
+                backgroundColor={act ? ui.bgPanelAlt : undefined}
                 onMouseDown={() => selectSuggestionAt(abs)}
                 onMouseUp={() => pickSuggestionAt(abs)}
               >
-                {(abs === autoIndex() ? ">  " : "   ") + item.label}
-              </text>
+                <text fg={act ? ui.primary : ui.fgDim}>
+                  {(act ? "▸ " : "  ") + item.label}
+                </text>
+              </box>
             );
           })}
           <text fg={ui.fgMuted}>{"  UP/DN TAB/ENTER pick  wheel/click  ESC close" + rangeHint(fileWin().start, fileWin().total)}</text>
@@ -271,8 +277,13 @@ export function InputBar() {
             <box flexGrow={1} flexDirection="column" justifyContent="center">
               <text>
                 {/* @ts-ignore OpenTUI text nodes take fg/bg via the style prop (TextNodeOptions), not as direct props */}
-                <span style={{ fg: showCursor() ? ui.fgMuted : ui.bgInput }}>{"\u2588"}</span>
-                <span style={{ fg: ui.fgMuted }}>{" Ask anything...  /commands  @file  !shell"}</span>
+                <span style={{ fg: showCursor() ? ui.fg : ui.bgInput }}>{"\u2588"}</span>
+                <span style={{ fg: ui.fgMuted }}>{" Ask anything...  "}</span>
+                <span style={{ fg: ui.primary }}>{"/commands"}</span>
+                <span style={{ fg: ui.fgMuted }}>{"  "}</span>
+                <span style={{ fg: ui.accent }}>{"@file"}</span>
+                <span style={{ fg: ui.fgMuted }}>{"  "}</span>
+                <span style={{ fg: ui.warning }}>{"!shell"}</span>
               </text>
             </box>
           }

package/src/tui/components/MdText.tsx

@@ -57,7 +57,8 @@ function spansToNodes(spans: any[], keyPrefix: string) {
 
 function HeadingText(props: { level: 1 | 2 | 3; spans: any[]; keyPrefix: string }) {
   const marker = props.level === 1 ? "# " : props.level === 2 ? "## " : "### ";
-  return <text fg={ui.primary}>{marker}{spansToNodes(props.spans, props.keyPrefix)}</text>;
+  const color = props.level === 1 ? ui.primary : props.level === 2 ? ui.primarySoft : ui.secondary;
+  return <text fg={color}>{marker}{spansToNodes(props.spans, props.keyPrefix)}</text>;
 }
 
 export function MdText(props: { md: string; wrap?: boolean }) {

package/src/tui/components/Modals.tsx

@@ -35,12 +35,16 @@ export function ModalFrame(props: { title: string; subtitle?: string; children:
   // Floating panel: centered over the terminal but NOT a full-screen takeover —
   // no backdrop fill, so the chat and any running agent stay visible behind it
   // ("same window, hovering"). Keys still belong to the modal while open.
+  // Border is subtle (ui.border) — the title carries the accent, no divider
+  // rules inside (they read as a grid).
   return (
     <box position="absolute" top={0} left={0} right={0} bottom={0}
       alignItems="center" justifyContent="center" flexDirection="column">
-      <box border borderStyle="rounded" borderColor={ui.primary} backgroundColor={ui.bgPanel}
-        paddingX={3} paddingY={2} flexDirection="column" minWidth={52} maxWidth={72}>
-        <text fg={ui.primary}>{props.title}</text>
+      <box border borderStyle="rounded" borderColor={ui.border} backgroundColor={ui.bgPanel}
+        paddingX={3} paddingY={1} flexDirection="column" minWidth={52} maxWidth={72}>
+        <box flexDirection="row" alignItems="center">
+          <text fg={ui.primary}>{"◆ " + props.title}</text>
+        </box>
         {props.subtitle ? <text fg={ui.fgMuted} marginTop={0}>{props.subtitle}</text> : null}
         <box flexDirection="column" marginTop={1}>{props.children}</box>
         {props.footer ? <text fg={ui.fgMuted} marginTop={1}>{props.footer}</text> : null}
@@ -298,6 +302,7 @@ export function SelectModal(props: {
           return (
             <box
               flexDirection="row" paddingLeft={2}
+              backgroundColor={active ? ui.bgPanelAlt : undefined}
               // Hover moves the selection (live theme preview via onPreview) —
               // but only for genuine pointer movement, never while a
               // keyboard/wheel scroll is settling (see hoverLockUntil).
@@ -306,10 +311,10 @@ export function SelectModal(props: {
               onMouseUp={() => clickRow(abs)}
             >
               <text fg={active ? ui.primary : ui.fgDim}>
-                {(active ? " > " : "   ") + fit(opt.label, LABEL_MAX)}
+                {(active ? " ▸ " : "   ") + fit(opt.label, LABEL_MAX)}
               </text>
-              {opt.recent ? <text fg={ui.fgMuted}> {" \u2713 recent"}</text> : null}
-              {opt.sub ? <text fg={ui.fgDim}>  {"(" + fit(opt.sub, SUB_MAX) + ")"}</text> : null}
+              {opt.recent ? <text fg={ui.fgMuted}> {" ✓ recent"}</text> : null}
+              {opt.sub ? <text fg={active ? ui.fg : ui.fgDim}>  {"(" + fit(opt.sub, SUB_MAX) + ")"}</text> : null}
             </box>
           );
         })}
@@ -615,25 +620,31 @@ function ServerBrowser(props: { kind: "mcp" | "connector" }) {
   // capped so the command column keeps ~28 chars. Without an explicit width the
   // name text yoga-shrinks to zero width when the command is long.
   const nameW = () => Math.min(30, Math.max(18, ...servers().map(s => String(s.name).length + 9)));
-  // Command column budget: modal inner ~64 chars minus name column minus the
-  // "→  " arrow — any longer and the text pixel-punches past the right border.
-  const cmdW = () => Math.max(24, 62 - nameW());
+  // Command column budget: modal inner ~62 chars (64 minus the row's left
+  // padding) minus name column — any longer and the text pixel-punches past
+  // the right border.
+  const cmdW = () => Math.max(22, 60 - nameW());
 
   return (
-    <ModalFrame title={title} subtitle={"Enter toggles a server on/off" + rangeSub()} footer={kbNav().submit + " toggle  |  A add " + (kind === "connector" ? "connector" : "server") + "  |  wheel scroll  |  " + kbNav().cancel + " close"}>
+    <ModalFrame title={title} subtitle={"Enter toggles a server" + rangeSub()} footer={kbNav().submit + " toggle  ·  A add  ·  " + kbNav().cancel + " close"}>
       <box onMouseScroll={scrollBy} flexDirection="column" flexShrink={0}>
         {win().items.map((s, i) => {
           const abs = win().start + i;
+          const active = abs === sel();
           return (
             <box
- flexDirection="row" paddingY={0} height={1} flexShrink={0}
+              flexDirection="row" paddingY={0} height={1} flexShrink={0}
+              paddingLeft={1}
+              backgroundColor={active ? ui.bgPanelAlt : undefined}
               onMouseDown={() => setSel(abs)}
               onMouseUp={() => { if (abs === sel()) { const r = toggleServer(s.name); if (!r || !r.error) refresh(); } }}
             >
-              <text fg={abs === sel() ? ui.primary : ui.fgDim} width={nameW()} height={1} flexShrink={0}>
-                {"  " + (s.enabled ? "[on] " : "[off] ") + s.name}
+              <text fg={active ? ui.primary : ui.fgDim} width={nameW()} height={1} flexShrink={0}>
+                {(active ? "▸ " : "  ") + "[" + (s.enabled ? "on" : "off") + "] " + s.name}
+              </text>
+              <text fg={s.enabled ? ui.success : ui.fgMuted} height={1} flexGrow={1}>
+                {mcpFit(s.command + " " + (s.args || []).join(" "), cmdW())}
               </text>
-              <text fg={ui.fgMuted} height={1} flexGrow={1}>{"\u2192  " + mcpFit(s.command + " " + (s.args || []).join(" "), cmdW())}</text>
             </box>
           );
         })}
@@ -650,6 +661,166 @@ export function ConnectorsModal() {
   return <ServerBrowser kind="connector" />;
 }
 
+// ── Sandbox setup wizard ──
+// Three steps: docker check (with install link when missing) → OS pick →
+// live setup. The container is global — once built, every session and every
+// agent routes commands through it.
+export function SandboxModal() {
+  const sb = require("../../core/sandbox.js");
+  const [step, setStep] = createSignal<"docker" | "os" | "setup">("docker");
+  const [docker, setDocker] = createSignal(sb.detectDocker());
+  const [osSel, setOsSel] = createSignal(0);
+  const [logs, setLogs] = createSignal<string[]>([]);
+  const [busy, setBusy] = createSignal(false);
+  const [err, setErr] = createSignal<string | null>(null);
+
+  // Docker already installed → advance straight to OS selection (with a
+  // brief "installed" flash so the user sees the check happened).
+  onMount(() => {
+    if (docker().state === "ready") {
+      setTimeout(() => { if (step() === "docker") setStep("os"); }, 600);
+    }
+  });
+
+  function recheck() {
+    const d = sb.detectDocker();
+    setDocker(d);
+    if (d.state === "ready") setStep("os");
+  }
+
+  function startSetup() {
+    const os = sb.OS_CATALOG[osSel()];
+    setStep("setup");
+    setBusy(true);
+    setErr(null);
+    setLogs(["Preparing " + os.label + " (" + os.image + ")…"]);
+    sb.setupSandbox({
+      osId: os.id,
+      onLog: (/** @type {string} */ l) => setLogs((xs) => [...xs, l]),
+    }).then((/** @type {{ ok: boolean, error?: string }} */ res) => {
+      setBusy(false);
+      if (res.ok) {
+        appendMessage({ role: "system", content: "Sandbox is live (" + os.label + "). Agent commands now run inside Docker; your project is mounted at /workspace. The sandbox is shared: every session and agent uses it." });
+        showToast("Sandbox ready — " + os.label, "ok");
+        closeModal();
+      } else {
+        setErr(res.error || "setup failed");
+      }
+    });
+  }
+
+  useKeyboard((key) => {
+    const ks = kbs.keyString(key);
+    if (kbs.is("modal_cancel", ks)) { closeModal(); return; }
+    const s = step();
+    if (s === "setup") {
+      // Retry after a failed setup; while busy esc is the only exit.
+      if (!busy() && err() && kbs.dialogIs("dialog_select_submit", ks)) { setErr(null); startSetup(); }
+      return;
+    }
+    if (kbs.dialogIs("dialog_select_prev", ks)) { if (s === "os") setOsSel((i) => Math.max(0, i - 1)); return; }
+    if (kbs.dialogIs("dialog_select_next", ks)) { if (s === "os") setOsSel((i) => Math.min(sb.OS_CATALOG.length - 1, i + 1)); return; }
+    if (kbs.dialogIs("dialog_select_submit", ks)) {
+      if (s === "docker") {
+        if (docker().state === "not_installed") {
+          sb.markInstallPending();
+          sb.openInstallPage();
+          appendMessage({ role: "system", content: "Opened the Docker download page. Install Docker (restart if asked), then run /sandbox again — or just say \"docker is ready\" in chat." });
+          closeModal();
+        } else if (docker().state === "no_daemon") {
+          recheck();
+        } else {
+          setStep("os");
+        }
+        return;
+      }
+      if (s === "os" && !busy()) startSetup();
+      return;
+    }
+  });
+
+  const link = sb.installLink();
+  const st = () => docker().state;
+
+  return (
+    <ModalFrame
+      title="Sandbox Setup"
+      subtitle={
+        step() === "docker" ? "Step 1/3 — Docker check"
+        : step() === "os" ? "Step 2/3 — pick a lightweight OS"
+        : "Step 3/3 — building the sandbox"
+      }
+      footer={
+        step() === "docker"
+          ? (st() === "not_installed" ? "enter open download page · esc close"
+             : st() === "no_daemon" ? "enter re-check · esc close"
+             : "checking…")
+          : step() === "os" ? "up/down pick · enter start setup · esc close"
+          : busy() ? "working… esc to keep running in background"
+          : "enter retry · esc close"
+      }
+    >
+      {step() === "docker" && st() === "not_installed" ? (
+        <box flexDirection="column">
+          <text fg={ui.warning}>Docker is not installed</text>
+          <text fg={ui.fgMuted} marginTop={1}>The sandbox needs Docker once. After that it is permanent.</text>
+          <box flexDirection="column" marginTop={1}>
+            <text fg={ui.fg}>1. Install Docker Desktop (restart if asked)</text>
+            <text fg={ui.primary}>   {link}</text>
+            <text fg={ui.fg}>2. Start it and wait for "running"</text>
+            <text fg={ui.fg}>3. Come back here and press enter</text>
+          </box>
+        </box>
+      ) : null}
+      {step() === "docker" && st() === "no_daemon" ? (
+        <box flexDirection="column">
+          <text fg={ui.warning}>Docker is installed but not running</text>
+          <text fg={ui.fgMuted} marginTop={1}>Start Docker Desktop (or: sudo systemctl start docker), wait for it, then press enter to re-check.</text>
+        </box>
+      ) : null}
+      {step() === "docker" && st() === "ready" ? (
+        <box flexDirection="column">
+          <text fg={ui.success}>Docker installed (v{docker().version})</text>
+          <text fg={ui.fgMuted} marginTop={1}>Opening OS selection…</text>
+        </box>
+      ) : null}
+      {step() === "os" ? (
+        <box flexDirection="column">
+          {sb.OS_CATALOG.map((/** @type {{ id: string, label: string, sizeNote: string, browser: boolean }} */ os, /** @type {number} */ i) => {
+            const active = i === osSel();
+            return (
+              <box
+                key={os.id} flexDirection="row" paddingY={0}
+                backgroundColor={active ? ui.bgPanelAlt : undefined}
+                onMouseDown={() => setOsSel(i)}
+                onMouseUp={() => { if (osSel() === i) startSetup(); }}
+              >
+                <text fg={active ? ui.primary : ui.fgDim}>{active ? "▸ " : "  "}{os.label}</text>
+                <text fg={active ? ui.fg : ui.fgMuted}>{"  " + os.sizeNote}</text>
+                {os.browser ? <text fg={ui.success}>  +browser</text> : null}
+              </box>
+            );
+          })}
+          <text fg={ui.fgMuted} marginTop={1}>All options include git, curl, ripgrep and a shell.</text>
+        </box>
+      ) : null}
+      {step() === "setup" ? (
+        <box flexDirection="column" maxWidth={64}>
+          {logs().slice(-8).map((l) => <text fg={ui.fgMuted}>{"▸ " + l}</text>)}
+          {busy() ? <text fg={ui.primary}>…</text> : null}
+          {err() ? (
+            <box flexDirection="column" marginTop={1}>
+              <text fg={ui.error}>{err()}</text>
+              <text fg={ui.fgMuted}>press enter to retry, esc to close</text>
+            </box>
+          ) : null}
+          {!busy() && !err() ? <text fg={ui.success}>done</text> : null}
+        </box>
+      ) : null}
+    </ModalFrame>
+  );
+}
+
 // Palette modal (ctrl+p) - proper popup window
 export function PaletteModal(props: { onPick: (cmd: string) => void }) {
   const items = SLASH_LIST.map(c => ({ label: "/" + c.cmd, value: c.cmd, sub: c.desc }));
@@ -705,15 +876,18 @@ export function PaletteModal(props: { onPick: (cmd: string) => void }) {
       <box onMouseScroll={scrollBy}>
         {win().items.map((it, i) => {
           const abs = win().start + i;
+          const active = abs === sel();
           return (
             <box
- flexDirection="row" paddingY={0}
+              flexDirection="row" paddingY={0}
+              backgroundColor={active ? ui.bgPanelAlt : undefined}
               onMouseDown={() => setSel(abs)}
               onMouseUp={() => clickRow(abs)}
             >
-              <text fg={abs === sel() ? ui.primary : ui.fgDim}>
-                {abs === sel() ? "> " : "   "}{it.label.split("/")[1] || it.label}
+              <text fg={active ? ui.primary : ui.fgDim}>
+                {active ? "▸ " : "  "}{it.label.split("/")[1] || it.label}
               </text>
+              {it.sub ? <text fg={active ? ui.fg : ui.fgMuted}>{"  " + String(it.sub).slice(0, 36)}</text> : null}
             </box>
           );
         })}