loom-agent 1.2.33 → 1.2.37

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>
           );
         })}
@@ -705,15 +716,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>
           );
         })}

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__" });

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: {