loom-agent 1.3.2 → 1.5.0

package/src/tui/components/Modals.tsx

@@ -1,5 +1,5 @@
 // Modals -- provider picker, model picker, key input, base URL, settings, palette.
-import { createSignal, createMemo, onMount } from "solid-js";
+import { createSignal, createMemo, onMount, onCleanup } from "solid-js";
 import { useKeyboard, usePaste } from "@opentui/solid";
 import { palette } from "../theme.ts";
 import * as kbs from "../keybinds.ts";
@@ -441,7 +441,8 @@ export function showAgentsText() {
 
 // ── MCP server / connector browser popup ──
 // Lists every configured server (seeded defaults + user-added) with on/off
-// state; Enter toggles, A opens the add flow, Esc closes.
+// state; Enter toggles a server (or opens the add flow on the pinned "+ Add"
+// row at the end of the list), A opens the add flow, Esc closes.
 // `kind` decides which preset list the "A" flow offers: "mcp" (dev tools) or
 // "connector" (hosting/cloud services). Both share the same underlying
 // mcp-manager — a connector IS an MCP server, just surfaced separately.
@@ -470,11 +471,15 @@ function presetAddLine(p: any, envValues?: Record<string, string>): string {
 function openPresetPicker(presets: any[], kind: "mcp" | "connector") {
   const addLabel = kind === "connector" ? "Add connector" : "Add MCP server";
   const backType = kind === "connector" ? "connectors" : "mcp";
+  // Connector adds run through the preset-aware engine: a bare preset name
+  // plus -e KEY=V flags expands to the full one-liner; full one-liners (with
+  // "--") pass through unchanged.
+  const addLine = kind === "connector" ? plugin.connectorAddLineCmd : plugin.mcpAddLineCmd;
 
   // Build the server from collected env + optional args and land it; reopen
   // the browser on success, toast the error otherwise.
   const submitLine = (line: string, reopenOnError: boolean) => {
-    const msg = plugin.mcpAddLineCmd(line);
+    const msg = addLine(line);
     if (msg.startsWith("Added")) {
       showToast(msg, "ok");
       closeModal();
@@ -547,7 +552,7 @@ const openLine = function(line: string) {
       caretStart: line ? line.lastIndexOf("=") + 1 : 0,
       onCancel: function() { closeModal(); setTimeout(function() { openModal({ type: backType as any }); }, 10); },
       onPick: function(line2: string) {
-        const msg = plugin.mcpAddLineCmd(line2);
+        const msg = addLine(line2);
         if (msg.startsWith("Added")) {
           showToast(msg, "ok");
           closeModal();
@@ -592,9 +597,11 @@ function ServerBrowser(props: { kind: "mcp" | "connector" }) {
     const ks = kbs.keyString(key);
     if (kbs.is("modal_cancel", ks)) { closeModal(); return; }
     if (kbs.dialogIs("dialog_select_prev", ks)) { setSel(i => Math.max(0, i - 1)); return; }
-    if (kbs.dialogIs("dialog_select_next", ks)) { setSel(i => Math.min(servers().length - 1, i + 1)); return; }
+    // One past the last server is the pinned "+ Add" row.
+    if (kbs.dialogIs("dialog_select_next", ks)) { setSel(i => Math.min(servers().length, i + 1)); return; }
     if (key.name === "a" || key.name === "A") { openPresetPicker(presets, kind); return; }
     if (kbs.dialogIs("dialog_select_submit", ks)) {
+      if (sel() >= servers().length) { openPresetPicker(presets, kind); return; }
       const s = servers()[sel()];
       if (!s) return;
       const res = toggleServer(s.name);
@@ -605,7 +612,7 @@ function ServerBrowser(props: { kind: "mcp" | "connector" }) {
     }
   });
 
-  const scrollBy = (e: any) => { setSel(i => Math.max(0, Math.min(servers().length - 1, i + wheelStep(e, 1)))); };
+  const scrollBy = (e: any) => { setSel(i => Math.max(0, Math.min(servers().length, i + wheelStep(e, 1)))); };
   let winStart = 0;
   const win = () => {
     const total = servers().length;
@@ -626,7 +633,7 @@ function ServerBrowser(props: { kind: "mcp" | "connector" }) {
   const cmdW = () => Math.max(22, 60 - nameW());
 
   return (
-    <ModalFrame title={title} subtitle={"Enter toggles a server" + rangeSub()} footer={kbNav().submit + " toggle  ·  A add  ·  " + kbNav().cancel + " close"}>
+    <ModalFrame title={title} subtitle={"Enter toggles, + Add row adds" + rangeSub()} footer={kbNav().submit + " toggle/add  ·  A add  ·  " + kbNav().cancel + " close"}>
       <box onMouseScroll={scrollBy} flexDirection="column" flexShrink={0}>
         {win().items.map((s, i) => {
           const abs = win().start + i;
@@ -648,6 +655,25 @@ function ServerBrowser(props: { kind: "mcp" | "connector" }) {
             </box>
           );
         })}
+        {/* Pinned add row — always visible under the list; Enter (or a click)
+            opens the preset picker, same as the A shortcut. */}
+        {(() => {
+          const addActive = sel() >= servers().length;
+          const addLabel2 = "+ Add " + (kind === "connector" ? "connector" : "MCP server") + "…";
+          return (
+            <box
+              flexDirection="row" paddingY={0} height={1} flexShrink={0}
+              paddingLeft={1}
+              backgroundColor={addActive ? ui.bgPanelAlt : undefined}
+              onMouseDown={() => setSel(servers().length)}
+              onMouseUp={() => { if (sel() >= servers().length) openPresetPicker(presets, kind); }}
+            >
+              <text fg={addActive ? ui.primary : ui.fgMuted} height={1}>
+                {(addActive ? "▸ " : "  ") + addLabel2}
+              </text>
+            </box>
+          );
+        })()}
       </box>
     </ModalFrame>
   );
@@ -663,29 +689,66 @@ export function ConnectorsModal() {
 
 // ── 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.
+// live setup with a real progress bar (setup streams from the core layer —
+// the TUI never freezes). The container is global and idles in the
+// background; the agent's sandbox tool uses it on demand.
 export function SandboxModal() {
   const sb = require("../../core/sandbox.js");
   const [step, setStep] = createSignal<"docker" | "os" | "setup">("docker");
-  const [docker, setDocker] = createSignal(sb.detectDocker());
+  // null = detection running (spawn-based, non-blocking — the old sync
+  // detectDocker() froze the whole TUI for up to 10s while docker answered).
+  const [docker, setDocker] = createSignal<{ state: string; version: string } | null>(null);
   const [osSel, setOsSel] = createSignal(0);
   const [logs, setLogs] = createSignal<string[]>([]);
   const [busy, setBusy] = createSignal(false);
   const [err, setErr] = createSignal<string | null>(null);
+  const [prog, setProg] = createSignal<{ stage: string; pct: number | null; step: number; total: number } | null>(null);
+  const [spin, setSpin] = createSignal(0);
+  let spinTimer: ReturnType<typeof setInterval> | null = null;
+  onCleanup(() => { if (spinTimer) clearInterval(spinTimer); });
+
+  // Spinner frames while setup is busy (drives the "working…" indicator).
+  function startSpinner() {
+    if (spinTimer) clearInterval(spinTimer);
+    spinTimer = setInterval(() => setSpin((s) => (s + 1) % 10), 120);
+  }
+  function stopSpinner() {
+    if (spinTimer) clearInterval(spinTimer);
+    spinTimer = null;
+  }
+  const SPIN_FRAMES = "⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏";
+
+  const STAGE_LABELS: Record<string, string> = {
+    pull: "Pulling image",
+    create: "Creating container",
+    start: "Starting container",
+    essentials: "Installing essentials",
+    browser: "Installing browser",
+    done: "Ready",
+  };
 
-  // Docker already installed → advance straight to OS selection (with a
-  // brief "installed" flash so the user sees the check happened).
+  // Async Docker check on open — never blocks the render loop.
   onMount(() => {
-    if (docker().state === "ready") {
-      setTimeout(() => { if (step() === "docker") setStep("os"); }, 600);
-    }
+    startSpinner();
+    sb.detectDockerAsync().then((/** @type {{ state: string; version: string }} */ d) => {
+      setDocker(d);
+      if (d.state === "ready") {
+        // brief "installed" flash, then straight to OS selection.
+        setTimeout(() => { if (step() === "docker") setStep("os"); }, 600);
+      } else {
+        stopSpinner();
+      }
+    });
   });
 
   function recheck() {
-    const d = sb.detectDocker();
-    setDocker(d);
-    if (d.state === "ready") setStep("os");
+    setDocker(null);
+    startSpinner();
+    sb.detectDockerAsync().then((/** @type {{ state: string; version: string }} */ d) => {
+      setDocker(d);
+      stopSpinner();
+      if (d.state === "ready") setStep("os");
+    });
   }
 
   function startSetup() {
@@ -693,14 +756,18 @@ export function SandboxModal() {
     setStep("setup");
     setBusy(true);
     setErr(null);
+    setProg(null);
+    startSpinner();
     setLogs(["Preparing " + os.label + " (" + os.image + ")…"]);
     sb.setupSandbox({
       osId: os.id,
       onLog: (/** @type {string} */ l) => setLogs((xs) => [...xs, l]),
+      onProgress: (/** @type {{ stage: string; pct: number | null; step: number; total: number }} */ p) => setProg(p),
     }).then((/** @type {{ ok: boolean, error?: string }} */ res) => {
       setBusy(false);
+      stopSpinner();
       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." });
+        appendMessage({ role: "system", content: "Sandbox is live (" + os.label + "). The container idles in the background; the agent will use it via the sandbox tool whenever isolation is needed. Your project is mounted at /workspace." });
         showToast("Sandbox ready — " + os.label, "ok");
         closeModal();
       } else {
@@ -722,12 +789,14 @@ export function SandboxModal() {
     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") {
+        const d = docker();
+        if (!d) return; // still detecting — enter does nothing yet
+        if (d.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") {
+        } else if (d.state === "no_daemon") {
           recheck();
         } else {
           setStep("os");
@@ -740,7 +809,7 @@ export function SandboxModal() {
   });
 
   const link = sb.installLink();
-  const st = () => docker().state;
+  const st = () => (docker() ? docker()!.state : "checking");
 
   return (
     <ModalFrame
@@ -760,6 +829,11 @@ export function SandboxModal() {
           : "enter retry · esc close"
       }
     >
+      {step() === "docker" && st() === "checking" ? (
+        <box flexDirection="column">
+          <text fg={ui.fgMuted}>{SPIN_FRAMES[spin()] + " Checking Docker…"}</text>
+        </box>
+      ) : null}
       {step() === "docker" && st() === "not_installed" ? (
         <box flexDirection="column">
           <text fg={ui.warning}>Docker is not installed</text>
@@ -780,7 +854,7 @@ export function SandboxModal() {
       ) : null}
       {step() === "docker" && st() === "ready" ? (
         <box flexDirection="column">
-          <text fg={ui.success}>Docker installed (v{docker().version})</text>
+          <text fg={ui.success}>Docker installed (v{(docker() || { version: "?" }).version})</text>
           <text fg={ui.fgMuted} marginTop={1}>Opening OS selection…</text>
         </box>
       ) : null}
@@ -805,9 +879,39 @@ export function SandboxModal() {
         </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}
+        <box flexDirection="column" maxWidth={72}>
+          {/* Stage checklist with a live pull-progress bar (pct from core). */}
+          {prog() ? (() => {
+            const p = prog()!;
+            const os = sb.OS_CATALOG[osSel()];
+            // Same stage order the core reports (browser only when offered).
+            const keys = ["pull", "create", "start", "essentials"]
+              .concat(os.browser ? ["browser"] : [], ["done"])
+              .slice(0, p.total);
+            return (
+              <box flexDirection="column" marginBottom={1}>
+                {keys.map((key, i) => {
+                  const done = i < p.step || p.stage === "done";
+                  const active = i === p.step && p.stage !== "done";
+                  const mark = done ? "✓" : active ? SPIN_FRAMES[spin()] : "○";
+                  const color = done ? ui.success : active ? ui.primary : ui.fgDim;
+                  let bar = "";
+                  if (active && p.pct != null) {
+                    const width = 20;
+                    const filled = Math.round((p.pct / 100) * width);
+                    bar = " [" + "█".repeat(filled) + "░".repeat(width - filled) + "] " + p.pct + "%";
+                  } else if (active) {
+                    bar = " …";
+                  }
+                  return (
+                    <text fg={color}>{mark + " " + STAGE_LABELS[key] + bar}</text>
+                  );
+                })}
+              </box>
+            );
+          })() : <text fg={ui.fgMuted}>Starting…</text>}
+          {logs().slice(-6).map((l) => <text fg={ui.fgMuted}>{"▸ " + l.slice(0, 68)}</text>)}
+          {busy() ? <text fg={ui.primary}>{SPIN_FRAMES[spin()] + " working — you can esc; setup continues in the background"}</text> : null}
           {err() ? (
             <box flexDirection="column" marginTop={1}>
               <text fg={ui.error}>{err()}</text>

package/src/tui/mcp-presets.ts

@@ -114,71 +114,10 @@ export const MCP_PRESETS = [
 ];
 
 // Hosting / cloud-service connectors — platforms you "connect" your project to
-// rather than dev-tool servers. Surfaced under /connectors, not /mcp.
-export const CONNECTOR_PRESETS = [
-  {
-    id: "supabase",
-    label: "Supabase",
-    package: "@supabase/mcp-server-supabase",
-    description: "Query schema, run SQL, manage Supabase projects",
-    args: ["--access-token", "$SUPABASE_ACCESS_TOKEN"],
-    env: { SUPABASE_ACCESS_TOKEN: "" },
-    prompts: [
-      { key: "SUPABASE_ACCESS_TOKEN", label: "Personal access token (supabase.com/dashboard/account/tokens)", mask: true },
-    ],
-    optionalArgsPrompt: { flag: "--project-ref", label: "Project ref (optional, e.g. abcdefghijklmnop) — Enter to skip" },
-  },
-  {
-    id: "nextjs",
-    label: "Next.js",
-    package: "nextjs-mcp-server",
-    description: "Next.js project introspection (routes, pages, config)",
-    args: [],
-    env: {},
-    prompts: [],
-  },
-  {
-    id: "railway",
-    label: "Railway",
-    package: "@railway/mcp-server",
-    description: "Railway deploys, services, variables",
-    args: [],
-    env: { RAILWAY_API_TOKEN: "" },
-    prompts: [
-      { key: "RAILWAY_API_TOKEN", label: "API token (railway.app/account/tokens)", mask: true },
-    ],
-  },
-  {
-    id: "vercel",
-    label: "Vercel",
-    command: "npx",
-    args: ["-y", "mcp-remote", "https://mcp.vercel.com"],
-    description: "Vercel deployments and projects (remote MCP endpoint, OAuth)",
-    env: {},
-    prompts: [],
-  },
-  {
-    id: "netlify",
-    label: "Netlify",
-    command: "npx",
-    args: ["-y", "mcp-remote", "https://api.netlify.com/mcp"],
-    description: "Netlify sites, deploys, and environment vars (remote MCP endpoint, OAuth)",
-    env: {},
-    prompts: [],
-  },
-  {
-    id: "cloudflare",
-    label: "Cloudflare",
-    package: "@cloudflare/mcp-server-cloudflare",
-    description: "Workers, DNS, and account management",
-    args: [],
-    env: { CLOUDFLARE_API_TOKEN: "", CLOUDFLARE_ACCOUNT_ID: "" },
-    prompts: [
-      { key: "CLOUDFLARE_API_TOKEN", label: "API token (dash.cloudflare.com/profile/api-tokens)", mask: true },
-      { key: "CLOUDFLARE_ACCOUNT_ID", label: "Account ID (dash.cloudflare.com — right sidebar)", mask: false },
-    ],
-  },
-];
+// rather than dev-tool servers. Surfaced under /connectors, not /mcp. The
+// catalog lives in the core layer (src/mcp/connector-presets.js) so the CLI
+// (`loom add connector <preset> -e KEY=V`) and this picker share one source.
+export const CONNECTOR_PRESETS: any[] = require("../mcp/connector-presets.js").CONNECTOR_PRESETS;
 
 export function presetSpawn(preset, resolvedEnv) {
   if (preset.command) {

package/src/tui/store.ts

@@ -523,7 +523,7 @@ export const SLASH_LIST: SlashCmd[] = [
   { cmd: "graph", desc: "Memory graph" },
   { cmd: "skills", desc: "Manage skills", args: "install <dir|git> | remove <name>" },
   { cmd: "mcp", desc: "Manage MCP servers", args: "add <name> <cmd> | remove | toggle" },
-  { cmd: "connectors", desc: "Manage connectors", args: "add <name> <cmd> | remove | toggle" },
+  { cmd: "connectors", desc: "Manage connectors", args: "add <preset|spec> | remove | toggle" },
   { cmd: "permissions", desc: "Permission rules", args: "reset | auto" },
   { cmd: "exit", desc: "Quit Loom Code" },
   // Newer commands sit at the END so early rows (help/connect/…) keep their
@@ -539,6 +539,11 @@ export const SLASH_LIST: SlashCmd[] = [
   { cmd: "style", desc: "Output style preset" },
   { cmd: "vim", desc: "Toggle vim editing" },
   { cmd: "remember", desc: "Save a fact to LOOM.md", args: "<fact>" },
+  { cmd: "compact", desc: "Summarize older messages to free context" },
+  { cmd: "undo", desc: "Undo the last exchange" },
+  { cmd: "redo", desc: "Redo the last undone exchange" },
+  { cmd: "undo-files", desc: "Rewind working tree to last undo point" },
+  { cmd: "export", desc: "Export chat as markdown" },
 ];
 
 // ─── TUI prefs ───