loom-agent 1.2.36 → 1.3.2

package/src/tui/components/PermissionPopup.tsx

@@ -200,44 +200,47 @@ function PermissionPrompt() {
         <box flexDirection="column" marginTop={1} gap={0}>
           {isQ ? (
             opts.map((o, i) => (
-              <box {...row(i)} flexDirection="row" paddingY={0}>
+              <box {...row(i)} flexDirection="row" paddingY={0}
+                backgroundColor={sel() === i ? ui.bgPanelAlt : ui.bgPanel}>
                 <text fg={sel() === i ? ui.primary : ui.fgDim} paddingRight={1}>
-                  {(sel() === i ? "\u25B6 " : "  ") + fit(o, 40)}
+                  {(sel() === i ? "▸ " : "  ") + fit(o, 40)}
                 </text>
               </box>
             ))
           ) : (
             <>
-              <box {...row(0)} flexDirection="row" paddingY={0}>
+              <box {...row(0)} flexDirection="row" paddingY={0}
+                backgroundColor={sel() === 0 ? ui.bgPanelAlt : ui.bgPanel}>
                 <text fg={sel() === 0 ? ui.primary : ui.fgDim} paddingRight={1}>
-                  {(sel() === 0 ? "\u25B6 " : "  ") + "Allow"}
+                  {(sel() === 0 ? "▸ " : "  ") + "Allow"}
                 </text>
                 <text fg={ui.success}>{"(recommended)"}</text>
               </box>
-              <box {...row(1)} flexDirection="row" paddingY={0}>
+              <box {...row(1)} flexDirection="row" paddingY={0}
+                backgroundColor={sel() === 1 ? ui.bgPanelAlt : ui.bgPanel}>
                 <text fg={sel() === 1 ? ui.primary : ui.fgDim} paddingRight={1}>
-                  {(sel() === 1 ? "\u25B6 " : "  ") + "Always allow"}
+                  {(sel() === 1 ? "▸ " : "  ") + "Always allow"}
                 </text>
                 <text fg={ui.fgMuted}>{"remember for this command"}</text>
               </box>
-              <box {...row(2)}>
+              <box {...row(2)} backgroundColor={sel() === 2 ? ui.bgPanelAlt : ui.bgPanel}>
                 <text fg={sel() === 2 ? ui.primary : ui.fgDim} paddingY={0}>
-                  {(sel() === 2 ? "\u25B6 " : "  ") + "Deny"}
+                  {(sel() === 2 ? "▸ " : "  ") + "Deny"}
                 </text>
               </box>
               {pr.tool === "bash" ? (
-                <box {...row(3)}>
+                <box {...row(3)} backgroundColor={sel() === 3 ? ui.bgPanelAlt : ui.bgPanel}>
                   <text fg={sel() === 3 ? ui.primary : ui.fgDim} paddingY={0}>
-                    {(sel() === 3 ? "\u25B6 " : "  ") + "Allow all commands in this session"}
+                    {(sel() === 3 ? "▸ " : "  ") + "Allow all commands in this session"}
                   </text>
                 </box>
               ) : null}
             </>
           )}
           {isQ && !isStart ? (
-            <box {...row(opts.length)}>
+            <box {...row(opts.length)} backgroundColor={sel() === opts.length ? ui.bgPanelAlt : ui.bgPanel}>
               <text fg={sel() === opts.length ? ui.primary : ui.fgDim} paddingY={0}>
-                {(sel() === opts.length ? "\u25B6 " : "  ") + "Type your answer\u2026"}
+                {(sel() === opts.length ? "▸ " : "  ") + "Type your answer…"}
               </text>
             </box>
           ) : null}

package/src/tui/components/Sidebar.tsx

@@ -71,7 +71,7 @@ function speedInfo(sp: any): { label: string; color: string } {
   if (tps == null) color = ui.fgMuted;
   else if (tps >= 25 && (latency == null || latency <= 2500)) color = ui.success;
   else if (tps >= 8 || (latency != null && latency <= 6000)) color = ui.warning;
-  else color = "#ff5555";
+  else color = ui.error;
   return { label, color };
 }
 
@@ -86,6 +86,8 @@ export function Sidebar(props: { show: boolean }) {
           <text fg={ui.fgMuted} height={1} flexShrink={0}>{"v" + VERSION}</text>
         </box>
 
+        <text fg={ui.border} height={1} flexShrink={0}>{"─".repeat(36)}</text>
+
         <box flexDirection="column" height={skillActive().length > 0 ? 8 : 7} flexShrink={0}>
           <box flexDirection="row" height={1} flexShrink={0}><text fg={ui.fgMuted}>{"Provider:  "}</text><text fg={ui.primary}>{providerName()}</text></box>
           <box flexDirection="row" height={1} flexShrink={0}><text fg={ui.fgMuted}>{"Model:     "}</text><text fg={ui.fg}>{modelName()}</text></box>
@@ -106,11 +108,13 @@ export function Sidebar(props: { show: boolean }) {
           ) : null}
         </box>
 
+        <text fg={ui.border} height={1} flexShrink={0}>{"─".repeat(36)}</text>
+
         <box flexDirection="row" gap={1} flexShrink={0}>
           {TAB_NAMES.map((name, i) => (
             <text fg={sidebarTab() === i ? ui.primary : ui.fgMuted} height={1} flexShrink={0}
               onMouseUp={() => setSidebarTab(i)}>
-              {"  " + name + "  "}
+              {(sidebarTab() === i ? "▌" : "  ") + name + "  "}
             </text>
           ))}
         </box>

package/src/tui/components/SplashScreen.tsx

@@ -1,21 +1,8 @@
 // Splash screen -- logo + embedded InputBar when no messages yet. Signal reads in JSX.
-import fs from "fs";
-import path from "path";
-import { palette, LOOM_LOGO } from "../theme.ts";
+import { palette, LOOM_LOGO, VERSION } from "../theme.ts";
 import { providerName, modelName, providerKeyOk } from "../store.ts";
 import { InputBar } from "./InputBar.tsx";
 
-// Read the real version from package.json (same source as `loom --version`),
-// never a hardcoded label that drifts out of sync with releases.
-const LOOM_VERSION = (() => {
-  try {
-    const pkg = fs.readFileSync(path.join(import.meta.dir, "..", "..", "package.json"), "utf8");
-    return "v" + pkg.match(/"version":\s*"([^"]+)"/)[1];
-  } catch {
-    return "";
-  }
-})();
-
 export function SplashScreen() {
   const ui = palette("loom");
 
@@ -24,23 +11,29 @@ export function SplashScreen() {
       <box flexGrow={1} />
 
       <box flexDirection="column" alignItems="center" marginBottom={1}>
-        {LOOM_LOGO.map((line, i) => (
+        {LOOM_LOGO.map((line) => (
           <text fg={ui.primary}>{line}</text>
         ))}
       </box>
 
-      <box marginTop={2} flexDirection="row">
-        <text fg={ui.primary}>{"Build"}</text>
-        <text fg={ui.fgDim}>{"  "}</text>
-        <text fg={ui.fg}>{providerName()}</text>
-        <text fg={ui.fgDim}>{"  "}</text>
+      <text fg={ui.border}>{"─".repeat(60)}</text>
+
+      <box marginTop={1} flexDirection="row" alignItems="center">
+        {/* OpenTUI text nodes take fg/bg via the style prop — a direct
+            backgroundColor prop is silently ignored (the pill vanished). */}
+        {/* @ts-ignore styled span for the build chip */}
+        <text><span style={{ fg: ui.bgPanel, bg: ui.primary }}>{" build "}</span></text>
+        <text fg={ui.fgMuted}>{"  " + providerName()}</text>
+        <text fg={ui.fgMuted}>{" / "}</text>
         <text fg={ui.fg}>{modelName()}</text>
-        <text fg={ui.fgDim}>{"  "}</text>
-        <text fg={providerKeyOk() ? "green" : "yellow"}>{providerKeyOk() ? "connected" : "no key"}</text>
+        <text fg={ui.fgMuted}>{"  "}</text>
+        <text fg={providerKeyOk() ? ui.success : ui.warning}>
+          {"● " + (providerKeyOk() ? "connected" : "no key")}
+        </text>
       </box>
 
       <box marginTop={0}>
-        <text fg={ui.fgMuted}>{LOOM_VERSION}</text>
+        <text fg={ui.fgMuted}>{"v" + VERSION}</text>
       </box>
 
       <box marginY={1} width={74}>
@@ -58,4 +51,4 @@ export function SplashScreen() {
       <box flexGrow={1} />
     </box>
   );
-}
+}

package/src/tui/components/SubagentPanel.tsx

@@ -25,7 +25,7 @@ function statusColor(s: SubagentEntry["status"]): string {
   if (s === "running") return ui.warning || ui.primary;
   if (s === "done") return ui.success || ui.primary;
   if (s === "cancelled") return ui.fgMuted;
-  return "#ff5555";
+  return ui.error || "#ff5555";
 }
 
 function fmtCost(c: number): string {

package/src/tui/components/ToastOverlay.tsx

@@ -15,18 +15,29 @@ export function ToastOverlay() {
         flexDirection="column" paddingX={1} paddingY={0}
       >
         <For each={list()}>
-          {(t) => (
-            <box
-              border borderStyle="rounded"
-              borderColor={t.kind === "error" ? ui.error : t.kind === "ok" ? ui.success : ui.primary}
-              paddingX={1} paddingY={0} marginTop={0}
-              backgroundColor={ui.bgPanel}
-            >
-              <text fg={t.kind === "error" ? ui.error : t.kind === "ok" ? ui.success : ui.fg}>
-                {" " + t.text}
-              </text>
-            </box>
-          )}
+          {(t) => {
+            const c = t.kind === "error" ? ui.error : t.kind === "ok" ? ui.success : ui.primary;
+            const dot = t.kind === "error" ? "✖" : t.kind === "ok" ? "●" : "◆";
+            // Cap the rendered width: a wide toast overlaps the chat's last
+            // rows (the box is opaque) — the store keeps the full text, only
+            // the floating chip clips with an ellipsis.
+            const body = t.text.length > 40 ? t.text.slice(0, 39) + "\u2026" : t.text;
+            return (
+              <box
+                border borderStyle="rounded"
+                borderColor={c}
+                paddingX={1} paddingY={0} marginTop={0}
+                backgroundColor={ui.bgPanel}
+              >
+                <text fg={c}>
+                  {" " + dot + " "}
+                </text>
+                <text fg={t.kind === "error" ? ui.error : ui.fg}>
+                  {body}
+                </text>
+              </box>
+            );
+          }}
         </For>
       </box>
     </Show>

package/src/tui/store.ts

@@ -324,7 +324,9 @@ export function allModelOptions() {
       if (!m) continue;
       const key = r.provider + "/" + r.model;
       seen.add(key);
-      out.push({ label: m.name, value: m.id, sub: m.id, provider: r.provider, tags: m.tags, recent: true });
+      // No sub: the full id repeated under every name was pure clutter — the
+      // id is still searchable (filtered() matches value + tags).
+      out.push({ label: m.name, value: m.id, provider: r.provider, tags: m.tags, recent: true });
     }
   }
   for (const p of PROVIDER_ORDER) {
@@ -337,7 +339,7 @@ export function allModelOptions() {
     for (const m of mods) {
       const key = p + "/" + m.id;
       if (seen.has(key)) continue;
-      out.push({ label: m.name, value: m.id, sub: m.id, provider: p, tags: m.tags });
+      out.push({ label: m.name, value: m.id, provider: p, tags: m.tags });
     }
   }
   out.push({ label: "(custom model ID)", value: "__custom__" });
@@ -492,50 +494,51 @@ export function wireTodoEvents() {
 }
 
 // ─── Slash commands (for autocomplete) ───
+// Terse descs only: this list feeds the popup + command palette, so every
+// extra word adds clutter. Syntax lives in `args` and shows up in /help,
+// NOT in the popup. Aliases keep their handlers but stay out of the list:
+//   /model → /models · /thinking + /details → /settings · /rewind → /restore
 export interface SlashCmd { cmd: string; desc: string; args?: string; }
 
 export const SLASH_LIST: SlashCmd[] = [
-  { cmd: "help", desc: "Show help dialog" },
-  { cmd: "agents", desc: "List agents — primaries + subagents (@mention or task tool)" },
-  { cmd: "build", desc: "Build mode — full agent tools (Tab cycles)" },
-  { cmd: "plan", desc: "Plan mode — read-only analysis, no file changes" },
-  { cmd: "chat", desc: "Chat mode — conversation only, no tools" },
-  { cmd: "connect", desc: "Add/connect a provider", args: "[provider]" },
+  { cmd: "help", desc: "Show help" },
+  { cmd: "agents", desc: "List agents" },
+  { cmd: "build", desc: "Build mode — full tools" },
+  { cmd: "plan", desc: "Plan mode — read only" },
+  { cmd: "chat", desc: "Chat mode — no tools" },
+  { cmd: "connect", desc: "Connect a provider" },
   { cmd: "key", desc: "Edit API key" },
-  { cmd: "baseurl", desc: "Set provider base URL", args: "[provider] [url]" },
-  { cmd: "model", desc: "Pick the active model", args: "[model-id]" },
-  { cmd: "models", desc: "Open the model picker (grouped by provider)" },
-  { cmd: "providers", desc: "List supported providers" },
-  { cmd: "status", desc: "Show connection status" },
-  { cmd: "usage", desc: "Show token usage and billing" },
-  { cmd: "budget", desc: "Budget level: free | cheap | best | auto", args: "[level]" },
-  { cmd: "new", desc: "Start a new session" },
+  { cmd: "baseurl", desc: "Set provider base URL" },
+  { cmd: "models", desc: "Model picker" },
+  { cmd: "providers", desc: "List providers" },
+  { cmd: "status", desc: "Connection status" },
+  { cmd: "usage", desc: "Token usage & billing" },
+  { cmd: "budget", desc: "Budget level", args: "free | cheap | best | auto" },
+  { cmd: "new", desc: "New session" },
   { cmd: "clear", desc: "Clear the chat" },
-  { cmd: "restore", desc: "Restore project to an earlier state" },
-  { cmd: "settings", desc: "Toggle details/thinking display" },
-  { cmd: "sessions", desc: "Browse saved sessions (jump to one)" },
-  { cmd: "thinking", desc: "Toggle thinking visibility" },
-  { cmd: "details", desc: "Toggle tool detail visibility" },
+  { cmd: "restore", desc: "Restore earlier state" },
+  { cmd: "settings", desc: "Settings — details, thinking, sidebar" },
+  { cmd: "sessions", desc: "Browse saved sessions" },
   { cmd: "theme", desc: "Switch UI theme" },
-  { cmd: "graph", desc: "View the memory graph (nodes + links)" },
+  { 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 (hosting & cloud services)", args: "add <name> <cmd> | remove | toggle" },
-  { cmd: "permissions", desc: "Show saved permission rules", args: "| reset | auto" },
+  { cmd: "connectors", desc: "Manage connectors", args: "add <name> <cmd> | 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
   // popup positions — the interactive suite and muscle memory rely on it.
-  { cmd: "subagents", desc: "View subagent runs (live + history, cancel, details)" },
-  { cmd: "context", desc: "Show ~token breakdown of the current context window" },
-  { cmd: "think", desc: "Thinking budget", args: "off|low|medium|high" },
-  { cmd: "approve", desc: "Approve the plan & switch to Build (Plan mode)" },
-  { cmd: "tasks", desc: "List background tasks (bash background:true)" },
-  { cmd: "rewind", desc: "Pick a restore point and rewind files" },
-  { cmd: "share", desc: "Export this chat as a self-contained HTML file" },
-  { cmd: "worktree", desc: "New git worktree + branch for parallel work", args: "<name>" },
-  { cmd: "style", desc: "Output style preset or free text; empty clears" },
-  { cmd: "vim", desc: "Toggle vim modal editing (Esc = NORMAL)" },
-  { cmd: "remember", desc: "Save a fact to project LOOM.md (or type # fact)", args: "<fact>" },
+  { cmd: "subagents", desc: "Subagent runs" },
+  { cmd: "context", desc: "Context window usage" },
+  { cmd: "think", desc: "Thinking budget", args: "off | low | medium | high" },
+  { cmd: "approve", desc: "Approve plan → Build" },
+  { cmd: "tasks", desc: "Background tasks" },
+  { cmd: "share", desc: "Export chat as HTML" },
+  { cmd: "worktree", desc: "New git worktree", args: "<name>" },
+  { cmd: "sandbox", desc: "Docker sandbox", args: "setup | status | on | off | rm" },
+  { cmd: "style", desc: "Output style preset" },
+  { cmd: "vim", desc: "Toggle vim editing" },
+  { cmd: "remember", desc: "Save a fact to LOOM.md", args: "<fact>" },
 ];
 
 // ─── TUI prefs ───

package/src/tui/theme.ts

@@ -2,6 +2,8 @@
 // palette() returns a live Proxy: each property is read from the currently
 // selected theme at render time, so switching themes re-renders instantly.
 import { createSignal } from "solid-js";
+import fs from "fs";
+import path from "path";
 import { loadTuiJson, saveTuiJson } from "./tui-config.ts";
 
 export type Palette = {
@@ -22,49 +24,50 @@ export type Palette = {
 export type Theme = { id: string; label: string; desc: string; palette: Palette };
 
 const LOOM_DARK: Palette = {
-  // Deep warm charcoal — terracotta accents
-  bg: "#191817",
-  bgMsg: "#131211",
-  bgPanel: "#211f1e",
-  bgPanelAlt: "#2a2725",
-  bgInput: "#25221f",
-  bgHover: "#322e2a",
-  border: "#4a4440",
-  borderFocus: "#e07856",
-  fg: "#f0ebe4",
-  fgDim: "#a89e93",
-  fgMuted: "#6e655c",
-  primary: "#e07856",
-  primarySoft: "#f4a27f",
-  secondary: "#b8d0a8",
-  accent: "#e8b06f",
+  // Deep warm charcoal — terracotta accents (ember layers: every surface
+  // steps clearly toward bgPanelAlt so panels read without any borders)
+  bg: "#171512",
+  bgMsg: "#121009",
+  bgPanel: "#1f1c18",
+  bgPanelAlt: "#282420",
+  bgInput: "#201d18",
+  bgHover: "#322c24",
+  border: "#463f36",
+  borderFocus: "#e8845c",
+  fg: "#f2ede4",
+  fgDim: "#a89d8d",
+  fgMuted: "#6b6252",
+  primary: "#e8845c",
+  primarySoft: "#f5a883",
+  secondary: "#a8c496",
+  accent: "#edb56f",
   success: "#a3c084",
   warning: "#e0b356",
-  error: "#e06c5a",
+  error: "#e06858",
   thinking: "#d9a35f",
   syntax: {
-    kw: "#e07856",
+    kw: "#e8845c",
     str: "#a3c084",
-    com: "#6e655c",
+    com: "#6b6252",
     num: "#e0b356",
-    call: "#e8b06f",
-    plain: "#f0ebe4",
+    call: "#edb56f",
+    plain: "#f2ede4",
   },
 };
 
 const LIGHT: Palette = {
   // Paper light — warm parchment with terracotta
-  bg: "#faf7f2",
-  bgMsg: "#efe9df",
-  bgPanel: "#f3eee6",
-  bgPanelAlt: "#eae3d8",
+  bg: "#faf7f0",
+  bgMsg: "#efe8dc",
+  bgPanel: "#f2ece1",
+  bgPanelAlt: "#e8e0d1",
   bgInput: "#ffffff",
-  bgHover: "#e0d6c8",
-  border: "#c9bfae",
+  bgHover: "#ddd3c2",
+  border: "#c4b9a5",
   borderFocus: "#c2593a",
   fg: "#2b2620",
   fgDim: "#6f675c",
-  fgMuted: "#9a9082",
+  fgMuted: "#968c7c",
   primary: "#c2593a",
   primarySoft: "#a34a2f",
   secondary: "#5c7a4a",
@@ -76,7 +79,7 @@ const LIGHT: Palette = {
   syntax: {
     kw: "#c2593a",
     str: "#5f8a3d",
-    com: "#9a9082",
+    com: "#968c7c",
     num: "#a97a1a",
     call: "#b0742f",
     plain: "#2b2620",
@@ -301,8 +304,20 @@ export function palette(_name?: string): Palette {
   }) as Palette;
 }
 
-export const VERSION = "1.2.0";
+// Version read from package.json — the single source of truth for `loom
+// --version`, the splash, and the sidebar (a hardcoded const drifted to 1.2.0
+// while the package moved on).
+export const VERSION = (() => {
+  try {
+    const pkg = JSON.parse(fs.readFileSync(path.join(import.meta.dir, "..", "..", "package.json"), "utf8"));
+    return String(pkg.version || "0.0.0");
+  } catch {
+    return "0.0.0";
+  }
+})();
 
+// Full "LOOM CODE" block wordmark for the splash, rendered in the theme's
+// primary (terracotta on the default theme).
 export const LOOM_LOGO = [
   " ██╗      ██████╗  ██████╗ ███╗   ███╗      ██████╗ ██████╗ ██████╗ ███████╗",
   " ██║     ██╔═══██╗██╔═══██╗████╗ ████║     ██╔════╝██╔═══██╗██╔══██╗██╔════╝",

package/src/tui/tool-display.ts

@@ -87,9 +87,20 @@ const TOOL_DISPLAY: Record<string, ToolDisplay> = Object.assign(Object.create(nu
     diffs: null,
   },
   websearch: {
-    icon: "\u25C8",
+    icon: "◈",
     pending: "Searching web...",
-    label: (i) => "WebSearch \u0022" + String(i?.query || "") + "\u0022",
+    label: (i) => "WebSearch \"" + String(i?.query || "") + "\"",
+    diffs: null,
+  },
+  browser: {
+    icon: "◉",
+    pending: "Browsing...",
+    spinner: true,
+    label: (i) => {
+      const a = String(i?.action || "");
+      const target = String(i?.url || i?.selector || i?.key || "");
+      return "Browser " + a + (target ? " " + target.slice(0, 60) : "");
+    },
     diffs: null,
   },
   todowrite: {