loom-agent 1.2.0

package/src/tui/components/PermissionPopup.tsx

@@ -0,0 +1,264 @@
+// PermissionPopup -- raised above the input bar when the model wants to run a
+// command or change a file, OR when the model is asking a question (the ask
+// tool). Two modes:
+//   • permission: Allow / Always allow / Deny only — a permission is a yes/no
+//     verdict, so there is no "type your answer" row.
+//   • question: the model's question + its provided options, plus a "Type your
+//     answer…" row — questions may legitimately need an answer that is not one
+//     of the offered options. Typing opens the inline editor in this popup —
+//     no separate overlay ever opens for typing.
+import { createSignal, Show } from "solid-js";
+import { useKeyboard } from "@opentui/solid";
+import { palette } from "../theme.ts";
+import {
+  permission, getSession,
+  questionOpen, questionText, setQuestionText, openQuestion, closeQuestion,
+  setAutoPerm,
+} from "../store.ts";
+
+const ui = palette("loom");
+
+const FIT = 54;
+function fit(s: string, n = FIT) {
+  const flat = String(s || "").replace(/\s+/g, " ").trim();
+  return flat.length <= n ? flat : flat.slice(0, Math.max(1, n - 1)) + "\u2026";
+}
+
+export function PermissionPopup() {
+  // Keyed Show: every request is a NEW object, so the inner prompt remounts
+  // with fresh selection/custom state (a plain Show kept the previous answer).
+  return (
+    <Show when={permission()} keyed>
+      {() => <PermissionPrompt />}
+    </Show>
+  );
+}
+
+function PermissionPrompt() {
+  const pr = permission()!;
+  const isQ = !!pr.isQuestion;
+  const isStart = !!pr.sessionStart;
+  const opts = isQ && pr.options && pr.options.length ? pr.options : [];
+  // Row index: 0..opts.length-1 are the question options; the last row is
+  // "Type your answer…" (question mode) — or 0 Allow · 1 Always · 2 Deny ·
+  // 3 Allow-all-in-session (bash only). The session-start prompt is a
+  // question with exactly its two options and no free-answer row.
+  const maxSel = isStart ? opts.length - 1 : isQ ? opts.length : (pr.tool === "bash" ? 3 : 2);
+  const [sel, setSel] = createSignal(0);
+  const custom = () => questionOpen();
+  const customText = () => questionText();
+
+  // Note: the question state lives in the STORE (not in this component) on
+  // purpose — the reconciler remounts this subtree on signal changes, and a
+  // mount-time reset would wipe a typed answer mid-keystroke.
+
+  const answerWith = (text: string) => {
+    const p = permission();
+    if (!p) return;
+    closeQuestion();
+    const t = String(text || "").trim();
+    if (!t) return;
+    p.resolve(true, t); // questions: any text is the answer
+  };
+
+  const submitCustom = () => answerWith(customText());
+
+  // Mouse: rows are click-to-select + click-to-act (same action as Enter on
+  // the highlighted row), so the popup is fully reachable with the mouse.
+  const execSel = (i: number) => {
+    const p = permission()!;
+    if (isQ) {
+      if (isStart) {
+        if (i === 0) {
+          // "Allow all commands" — session-wide auto-approve (Shift+Tab
+          // toggles it off/on too).
+          try { getSession().permissions.setAuto(true); } catch {}
+          setAutoPerm(true);
+          p.resolve(true, "allow");
+          return;
+        }
+        p.resolve(false, "ask");
+        return;
+      }
+      if (i >= opts.length) { openQuestion(""); return; }
+      answerWith(opts[i]);
+      return;
+    }
+    if (i === 0) { p.resolve(true); return; }
+    if (i === 1) {
+      try { getSession().permissions.setRule(p.command, "allow", true); } catch {}
+      p.resolve(true);
+      return;
+    }
+    if (i === 3) {
+      // Session-wide auto-approve (bash only): the rest of THIS turn (and any
+      // later turn in this session) stops asking for command approval.
+      try { getSession().permissions.setAuto(true); } catch {}
+      p.resolve(true);
+      return;
+    }
+    p.resolve(false);
+  };
+  const row = (i: number) => ({
+    onMouseDown: () => setSel(i),
+    onMouseUp: () => execSel(i),
+  });
+
+  useKeyboard(function(key) {
+    const p = permission();
+    if (!p) return;
+    const k = key.name;
+
+    if (k === "escape") {
+      if (custom()) { closeQuestion(); return; }
+      p.resolve(false, "(esc)");
+      return;
+    }
+
+    if (custom()) {
+      if (k === "return") { submitCustom(); return; }
+      if (k === "backspace" || k === "delete") { setQuestionText(v => v.slice(0, -1)); return; }
+      const s = key.sequence;
+      if (!key.ctrl && !key.meta && s && s.length <= 10 && s !== "\r" && s !== "\n" && s !== "\t") {
+        setQuestionText(v => v + s);
+      }
+      return;
+    }
+
+    // Session-start prompt: only up/down + enter + esc, never the answer
+    // editor (there is no "type your own answer" for this one).
+    if (isStart) {
+      if (k === "up" || k === "down") {
+        setSel(i => (k === "up" ? Math.max(0, i - 1) : Math.min(maxSel, i + 1)));
+        return;
+      }
+      if (k === "return") { execSel(sel()); return; }
+      return;
+    }
+
+    if (k === "up" || k === "down") {
+      setSel(i => (k === "up" ? Math.max(0, i - 1) : Math.min(maxSel, i + 1)));
+      return;
+    }
+
+    // Question mode: typing opens the inline editor (the user's answer may
+    // not be one of the offered options). Permission mode: ignored — a
+    // permission is Allow / Always allow / Deny, nothing else.
+    if (isQ && !key.ctrl && !key.meta && key.sequence && key.sequence.length <= 10 && key.sequence !== "\r" && key.sequence !== "\n" && key.sequence !== "\t") {
+      openQuestion(key.sequence);
+      return;
+    }
+
+    if (k === "return") {
+      if (isQ) {
+        if (sel() >= opts.length) { openQuestion(""); return; }
+        answerWith(opts[sel()]);
+        return;
+      }
+      if (sel() === 0) { p.resolve(true); return; }
+      if (sel() === 1) {
+        try { getSession().permissions.setRule(p.command, "allow", true); } catch {}
+        p.resolve(true);
+        return;
+      }
+      if (sel() === 3) {
+        try { getSession().permissions.setAuto(true); } catch {}
+        p.resolve(true);
+        return;
+      }
+      p.resolve(false);
+    }
+  });
+
+  return (
+    <box
+      border borderStyle="rounded" borderColor={custom() ? ui.accent : isStart ? ui.accent : isQ ? ui.accent : ui.warning}
+      paddingX={2} paddingY={1}
+      flexDirection="column" marginBottom={0}
+      backgroundColor={ui.bgPanel}
+    >
+      <text fg={custom() ? ui.accent : isStart ? ui.accent : isQ ? ui.accent : ui.warning}>
+        {custom() ? "\u2753 Answer" : isStart ? "Session permissions" : isQ ? "\u2753 Question" : "\u26A0 Permission needed"}
+      </text>
+      <Show when={!custom()}>
+        <text fg={ui.fgMuted} marginTop={1}>
+          {isStart
+            ? "New session \u00B7 you can toggle anytime with Shift+Tab:"
+            : isQ
+              ? "The model wants to know:"
+              : "Model wants to " + (pr.tool === "bash" ? "run a command" : "change a file") + ":"}
+        </text>
+        <text fg={isQ ? ui.fg : ui.primary}>
+          {isQ ? pr.command : pr.tool + ": " + fit(pr.command)}
+        </text>
+        <Show when={pr.label && pr.label !== "dangerous command"}>
+          <text fg={ui.warning} marginTop={1}>
+            {"\u26A0 " + pr.label}
+          </text>
+        </Show>
+
+        <box flexDirection="column" marginTop={1} gap={0}>
+          {isQ ? (
+            opts.map((o, i) => (
+              <box {...row(i)} flexDirection="row" paddingY={0}>
+                <text fg={sel() === i ? ui.primary : ui.fgDim} paddingRight={1}>
+                  {(sel() === i ? "\u25B6 " : "  ") + fit(o, 40)}
+                </text>
+              </box>
+            ))
+          ) : (
+            <>
+              <box {...row(0)} flexDirection="row" paddingY={0}>
+                <text fg={sel() === 0 ? ui.primary : ui.fgDim} paddingRight={1}>
+                  {(sel() === 0 ? "\u25B6 " : "  ") + "Allow"}
+                </text>
+                <text fg={ui.success}>{"(recommended)"}</text>
+              </box>
+              <box {...row(1)} flexDirection="row" paddingY={0}>
+                <text fg={sel() === 1 ? ui.primary : ui.fgDim} paddingRight={1}>
+                  {(sel() === 1 ? "\u25B6 " : "  ") + "Always allow"}
+                </text>
+                <text fg={ui.fgMuted}>{"remember for this command"}</text>
+              </box>
+              <box {...row(2)}>
+                <text fg={sel() === 2 ? ui.primary : ui.fgDim} paddingY={0}>
+                  {(sel() === 2 ? "\u25B6 " : "  ") + "Deny"}
+                </text>
+              </box>
+              {pr.tool === "bash" ? (
+                <box {...row(3)}>
+                  <text fg={sel() === 3 ? ui.primary : ui.fgDim} paddingY={0}>
+                    {(sel() === 3 ? "\u25B6 " : "  ") + "Allow all commands in this session"}
+                  </text>
+                </box>
+              ) : null}
+            </>
+          )}
+          {isQ && !isStart ? (
+            <box {...row(opts.length)}>
+              <text fg={sel() === opts.length ? ui.primary : ui.fgDim} paddingY={0}>
+                {(sel() === opts.length ? "\u25B6 " : "  ") + "Type your answer\u2026"}
+              </text>
+            </box>
+          ) : null}
+        </box>
+      </Show>
+
+      <Show when={custom()}>
+        <box border borderStyle="rounded" borderColor={ui.border} paddingX={1} marginTop={1}>
+          <text fg={ui.fg}>{customText() || " "}</text>
+        </box>
+      </Show>
+
+      <text fg={ui.fgMuted} marginTop={1}>
+        {custom()
+          ? "Enter send \u00B7 Esc back"
+          : isStart
+            ? "\u2191\u2193 choose \u00B7 Enter confirm \u00B7 ESC skip"
+            : isQ
+              ? "\u2191\u2193 choose \u00B7 Enter confirm \u00B7 type = your own answer \u00B7 ESC skip"
+              : "\u2191\u2193 choose \u00B7 Enter confirm \u00B7 ESC deny"}
+      </text>
+    </box>
+  );
+}

package/src/tui/components/Sidebar.tsx

@@ -0,0 +1,182 @@
+// Sidebar — right panel. All signal reads inside JSX handles SolidJS
+// reactivity; agent todos live-update via the todos:changed event (wired in
+// App onMount); todo rows toggle done on click, file rows click to open in the
+// OS default app.
+import { Show } from "solid-js";
+import { palette, VERSION } from "../theme.ts";
+import {
+  sidebarTab, setSidebarTab, todos, setTodos, messages, providerName, modelName,
+  cwdShort, getProjectFiles, speedStats, sessionUsage, budgetLevel, skillActive, autoPerm,
+  getSession, showToast, welcomeTipSeen, dismissWelcomeTips,
+} from "../store.ts";
+import { formatUsd } from "../../core/usage.js";
+import path from "path";
+import os from "os";
+import { spawn } from "child_process";
+
+const ui = palette("loom");
+const TAB_NAMES = ["Info", "Todos", "Files"];
+
+// Open a file/folder with the platform's default handler (explorer/open/xdg-open).
+// openFileSpawn is a module seam so the interactive test suite can stub the
+// real spawn (clicking a row must never pop windows on a dev machine).
+export let openFileSpawn = spawn;
+export function __stubOpenFileSpawn(fn: any) { openFileSpawn = fn || spawn; }
+// Repo files that would EXECUTE on open (.bat/.cmd/.exe/.ps1/…) are never
+// launched directly — their containing folder opens instead, so a file click
+// can't run anything.
+const EXEC_EXT = /\.(bat|cmd|com|exe|msi|ps1|psm1|reg|vbs|scr)$/i;
+export function openWithDefault(rel: string) {
+  const abs = path.resolve(process.cwd(), rel);
+  const target = EXEC_EXT.test(abs) ? path.dirname(abs) : abs;
+  // explorer.exe takes a plain path argument — no cmd /c start, so filenames
+  // with shell metacharacters (& ^ | etc.) can never be parsed as commands.
+  const opener = process.platform === "win32" ? "explorer.exe" : process.platform === "darwin" ? "open" : "xdg-open";
+  const args = [target];
+  try { openFileSpawn(opener, args, { detached: true, stdio: "ignore", windowsHide: true }).unref(); } catch {}
+  return abs;
+}
+
+// Toggle the clicked todo between done (✓) and open ( ).
+// Also updates the canonical session list (matched by text) so a later
+// recomputeTodos() doesn't stomp the flip. `i` is the index into the FULL
+// todos() list (the render slices the tail, so the row passes listStart + row).
+function toggleTodoAt(i: number) {
+  const list = todos().slice();
+  const t = list[i];
+  if (!t) return;
+  list[i] = { ...t, done: !t.done, inProgress: false, cancelled: false };
+  setTodos(list);
+  try {
+    const sess = getSession();
+    const idx = (sess.todos || []).findIndex((x: any) => String(x.content || "").trim() === String(t.text || "").trim());
+    if (idx >= 0) {
+      sess.todos[idx] = { ...sess.todos[idx], status: !t.done ? "completed" : "pending" };
+    }
+  } catch {}
+}
+
+// Pure helper (no component boundary) — computed inline in JSX below so the
+// signal read stays reactive: component wrappers were rendering stale values.
+function speedInfo(sp: any): { label: string; color: string } {
+  const live = sp && sp.live ? sp.live : null;
+  const last = sp && sp.last ? sp.last : null;
+  const tps = live ? live.tokensPerSec : (last && last.tokensPerSec != null ? last.tokensPerSec : null);
+  const latency = live ? live.firstTokenMs : (last ? last.latencyMs : null);
+  let label: string;
+  if (live && live.firstTokenMs == null) label = "waiting\u2026";
+  else if (tps != null) label = tps + " tok/s \u00B7 " + (latency != null ? (latency / 1000).toFixed(1) + "s" : "\u2014") + " first";
+  else label = "\u2014";
+  let 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";
+  return { label, color };
+}
+
+export function Sidebar(props: { show: boolean }) {
+  return (
+    <Show when={props.show}>
+      <box flexDirection="column" width={38}
+        backgroundColor={ui.bgPanel} paddingX={1} paddingY={0} flexShrink={0}>
+
+        <box flexDirection="row" justifyContent="space-between" flexShrink={0}>
+          <text fg={ui.primary} height={1} flexShrink={0}>{" Loom Code"}</text>
+          <text fg={ui.fgMuted} height={1} flexShrink={0}>{"v" + VERSION}</text>
+        </box>
+
+        <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>
+          <box flexDirection="row" height={1} flexShrink={0}><text fg={ui.fgMuted}>{"Speed:     "}</text>
+            <text fg={ui.fg}>{speedInfo(speedStats()).label}</text>
+          </box>
+          <box flexDirection="row" height={1} flexShrink={0}><text fg={ui.fgMuted}>{"Cost:      "}</text>
+            <text fg={sessionUsage().cost > 0.02 ? ui.warning : ui.fg}>{formatUsd(sessionUsage().cost)}</text>
+            <text fg={budgetLevel() === "auto" ? ui.fgMuted : ui.primary}>{"  [" + budgetLevel() + "]"}</text>
+          </box>
+          <box flexDirection="row" height={1} flexShrink={0}><text fg={ui.fgMuted}>{"Messages:  "}</text><text fg={ui.fg}>{String(messages().length)}</text></box>
+          <box flexDirection="row" height={1} flexShrink={0}><text fg={ui.fgMuted}>{"Path:      "}</text><text fg={ui.fgDim}>{cwdShort() || "~"}</text></box>
+          <box flexDirection="row" height={1} flexShrink={0}><text fg={ui.fgMuted}>{"Auto:      "}</text>
+            <text fg={autoPerm() ? ui.success : ui.fgDim}>{autoPerm() ? "on — no asks" : "off — asks per command"}</text>
+          </box>
+          {skillActive().length > 0 ? (
+            <box flexDirection="row" height={1} flexShrink={0}><text fg={ui.fgMuted}>{"Skills:    "}</text><text fg={ui.primary}>{skillActive().join(", ")}</text></box>
+          ) : null}
+        </box>
+
+        <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 + "  "}
+            </text>
+          ))}
+        </box>
+
+        <Show when={!welcomeTipSeen()}>
+          <box flexDirection="column" marginTop={1} paddingX={1} paddingY={0} flexShrink={0}
+            border borderStyle="rounded" borderColor={ui.warning} backgroundColor={ui.bgInput}>
+            <box flexDirection="row" justifyContent="space-between" flexShrink={0}>
+              <text fg={ui.primary} height={1}>{"Welcome"}</text>
+              <text fg={ui.fgMuted} height={1} onMouseUp={dismissWelcomeTips}>{" \u2715 "}</text>
+            </box>
+            {(() => {
+              let n = 0;
+              try { n = Object.keys(require("../../providers/index.js").PROVIDERS).length; } catch {}
+              return (
+                <box flexDirection="column" flexShrink={0}>
+                  <text fg={ui.fgDim} width={34}>{"Loom supports " + n + " providers \u2014 /connect to add a key"}</text>
+                  <text fg={ui.fgDim} width={34}>{"\u00B7 /models lists them all once a key is set"}</text>
+                </box>
+              );
+            })()}
+          </box>
+        </Show>
+
+        <box flexGrow={1} flexShrink={1} flexDirection="column" overflow="hidden">
+            <scrollbox flexGrow={1} stickyScroll>
+              <Show when={TAB_NAMES[sidebarTab()] === "Todos"}>
+                <Show
+                  when={todos().length > 0}
+                  fallback={<text fg={ui.fgMuted}>{"No tasks -- [ ] [x] [+] in replies"}</text>}
+                >
+                  {todos().map((td, i) => {
+                    if (i < todos().length - 10) return null;
+                    // OpenTUI TextNode only accepts strings/StyledText — nested
+                    // <text> elements inside <text> crash the renderer, so the
+                    // marker+text is built as one string with a row color. width
+                    // is explicit: without it the native yoga layout shrinks the
+                    // text nodes and the rows wrap/overlap (garbled glyphs).
+                    const mark = td.inProgress ? "[+] " : td.done ? "[x] " : td.cancelled ? "[-] " : "[ ] ";
+                    const color = td.inProgress ? ui.warning : td.done ? ui.success : td.cancelled ? ui.fgMuted : ui.fgDim;
+                    return (
+                      <text width={34} fg={color} onMouseUp={() => toggleTodoAt(i)}>
+                        {mark + td.text}
+                      </text>
+                    );
+                  })}
+                </Show>
+              </Show>
+              <Show when={TAB_NAMES[sidebarTab()] === "Files"}>
+                {getProjectFiles().slice(0, 20).map(f => (
+                  <text width={34} fg={ui.fgDim} onMouseUp={() => {
+                    openWithDefault(f);
+                    showToast("Opened " + f, "ok", 2200);
+                  }}>{f}</text>
+                ))}
+              </Show>
+              <Show when={TAB_NAMES[sidebarTab()] === "Info"}>
+                <text fg={ui.fgDim}>{"ctrl+b toggle sidebar, esc interrupt"}</text>
+              </Show>
+            </scrollbox>
+        </box>
+
+        <box paddingTop={1} flexShrink={0}>
+          <text fg={ui.fgMuted} height={1} flexShrink={0}>{"~/" + cwdShort()}</text>
+        </box>
+      </box>
+    </Show>
+  );
+}

package/src/tui/components/SplashScreen.tsx

@@ -0,0 +1,51 @@
+// Splash screen -- logo + embedded InputBar when no messages yet. Signal reads in JSX.
+import { palette, LOOM_LOGO } from "../theme.ts";
+import { providerName, modelName, providerKeyOk } from "../store.ts";
+import { InputBar } from "./InputBar.tsx";
+
+export function SplashScreen() {
+  const ui = palette("loom");
+
+  return (
+    // Centered like opencode: the whole block (logo + status + chatbox)
+    // floats mid-screen and grows symmetrically around its center as the
+    // chatbox lines up.
+    <box flexDirection="column" flexGrow={1} alignItems="center" justifyContent="center" backgroundColor={ui.bg}>
+      <box flexGrow={1} />
+
+      <box flexDirection="column" alignItems="center" marginBottom={1}>
+        {LOOM_LOGO.map((line, i) => (
+          <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.fg}>{modelName()}</text>
+        <text fg={ui.fgDim}>{"  "}</text>
+        <text fg={providerKeyOk() ? "green" : "yellow"}>{providerKeyOk() ? "connected" : "no key"}</text>
+      </box>
+
+      <box marginTop={0}>
+        <text fg={ui.fgMuted}>{"v1.1.0"}</text>
+      </box>
+
+      <box marginY={1} width={74}>
+        <InputBar />
+      </box>
+
+      <box flexDirection="column" alignItems="center">
+        <box flexDirection="row">
+          <text fg={ui.warning}>{"Tip: "}</text>
+          <text fg={ui.fgDim}>{"Type /help  @ for files  ! for shell  tab to cycle mode"}</text>
+        </box>
+        <text fg={ui.fgMuted}>{"ctrl+p palette  ctrl+b sidebar  esc interrupt"}</text>
+      </box>
+
+      <box flexGrow={1} />
+    </box>
+  );
+}