loom-agent 1.2.33 → 1.2.37

package/src/tools/browser.js

@@ -0,0 +1,204 @@
+// Headless browser control for the Web agent (and any build-mode session).
+// Wraps Playwright behind a single-page singleton: the first action launches
+// a headless Chromium and every later action reuses it, so "open a page, click
+// around, read the DOM" works across tool calls without re-launching.
+//
+// Engine resolution order:
+//   1. `playwright` (bundled chromium download, if the user installed it)
+//   2. `playwright-core` + a system Chrome / Edge channel (zero download)
+// Everything runs in the page context only — no filesystem access beyond the
+// screenshot path the caller passes (enforced by the tool-layer sandbox for
+// writes is intentionally NOT applied here: screenshots land in the OS temp
+// dir by default and the tool returns the absolute path).
+const fs = require('fs');
+const os = require('os');
+const path = require('path');
+
+const INSTALL_HINT = 'Install a browser engine:  npm i playwright  then  npx playwright install chromium  (or install playwright-core and have Chrome/Edge available)';
+const ACTION_TIMEOUT_MS = 30000;
+
+/** @type {{ browser: any, page: any }|null} */
+let _engine = null;
+let _playwright = null; // null = not tried, false = unavailable, else module
+
+const ACTIONS = ['goto', 'click', 'fill', 'press', 'text', 'eval', 'links', 'screenshot', 'close'];
+
+function loadPlaywright() {
+  if (_playwright !== null) return _playwright || null;
+  for (const mod of ['playwright', 'playwright-core']) {
+    try { _playwright = require(mod); return _playwright; } catch {}
+  }
+  _playwright = false;
+  return null;
+}
+
+function withTimeout(promise, ms) {
+  let timer;
+  const timeout = new Promise((_, reject) => {
+    timer = setTimeout(() => reject(new Error('browser action timed out after ' + ms + 'ms')), ms);
+  });
+  return Promise.race([promise, timeout]).finally(() => clearTimeout(timer));
+}
+
+function checkUrl(url) {
+  const u = String(url || '').trim();
+  if (!u) return { error: 'goto needs a url.' };
+  let parsed;
+  try { parsed = new URL(u); } catch { return { error: 'Invalid url: ' + u }; }
+  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+    return { error: 'Only http/https urls are allowed (got ' + parsed.protocol + ').' };
+  }
+  return { url: parsed.href };
+}
+
+async function pageSnapshot(page) {
+  const title = await page.title().catch(() => '');
+  return 'URL: ' + page.url() + (title ? '\nTitle: ' + title : '');
+}
+
+/** Launch (or reuse) the headless browser. Returns the page or {error}. */
+async function ensurePage() {
+  if (_engine && _engine.page && !_engine.page.isClosed()) return _engine.page;
+  const pw = loadPlaywright();
+  if (!pw) {
+    return { error: 'No browser engine found. ' + INSTALL_HINT };
+  }
+  const attempts = [
+    () => pw.chromium.launch({ headless: true }),
+    () => pw.chromium.launch({ headless: true, channel: 'chrome' }),
+    () => pw.chromium.launch({ headless: true, channel: 'msedge' }),
+  ];
+  let lastErr = null;
+  for (const attempt of attempts) {
+    try {
+      const browser = await withTimeout(attempt(), 20000);
+      const context = await browser.newContext({ viewport: { width: 1280, height: 800 } });
+      const page = await context.newPage();
+      _engine = { browser, page };
+      return page;
+    } catch (err) { lastErr = err; }
+  }
+  return { error: 'Failed to launch a browser: ' + (lastErr && lastErr.message) + '. ' + INSTALL_HINT };
+}
+
+/** Close the singleton browser (also used as the `close` action). */
+async function closeBrowser() {
+  if (!_engine) return 'No browser is running.';
+  try { await _engine.browser.close(); } catch {}
+  _engine = null;
+  return 'Browser closed.';
+}
+
+/**
+ * Execute one browser action. `params` comes straight from the tool call:
+ *   action, url, selector, text, key, script, path
+ * @param {Record<string, any>} params
+ * @returns {Promise<string|{error: string}>}
+ */
+async function run(params) {
+  const action = String(params.action || '').toLowerCase().trim();
+  if (!ACTIONS.includes(action)) {
+    return { error: 'Unknown action "' + action + '". Use one of: ' + ACTIONS.join(' | ') };
+  }
+  if (action === 'close') return closeBrowser();
+
+  // Validate inputs BEFORE launching a browser so bad calls fail fast and
+  // never spawn a headless process.
+  if (action === 'goto') {
+    const u = checkUrl(params.url);
+    if (u.error) return u;
+  }
+  if ((action === 'click' || action === 'fill') && !String(params.selector || '').trim()) {
+    return { error: action + ' needs a CSS selector.' };
+  }
+  if (action === 'press' && !String(params.key || '').trim()) {
+    return { error: 'press needs a key (e.g. Enter, Tab, Escape, Control+A).' };
+  }
+  if (action === 'eval' && !String(params.script || '').trim()) {
+    return { error: 'eval needs a JavaScript expression (runs in the page context).' };
+  }
+
+  const page = await ensurePage();
+  if (page && typeof page === 'object' && 'error' in page) return page;
+
+  try {
+    switch (action) {
+      case 'goto': {
+        const u = checkUrl(params.url);
+        if (u.error) return u;
+        await withTimeout(page.goto(u.url, { waitUntil: 'domcontentloaded', timeout: ACTION_TIMEOUT_MS }), ACTION_TIMEOUT_MS + 2000);
+        await page.waitForLoadState('load', { timeout: 10000 }).catch(() => {});
+        return 'Opened ' + (await pageSnapshot(page));
+      }
+      case 'click': {
+        const sel = String(params.selector || '').trim();
+        if (!sel) return { error: 'click needs a CSS selector.' };
+        await withTimeout(page.click(sel, { timeout: 10000 }), 12000);
+        await page.waitForLoadState('domcontentloaded', { timeout: 5000 }).catch(() => {});
+        return 'Clicked "' + sel + '".\n' + (await pageSnapshot(page));
+      }
+      case 'fill': {
+        const sel = String(params.selector || '').trim();
+        if (!sel) return { error: 'fill needs a CSS selector.' };
+        await withTimeout(page.fill(sel, String(params.text ?? ''), { timeout: 10000 }), 12000);
+        return 'Filled "' + sel + '" with ' + String(params.text ?? '').length + ' chars.';
+      }
+      case 'press': {
+        const key = String(params.key || '').trim();
+        if (!key) return { error: 'press needs a key (e.g. Enter, Tab, Escape, Control+A).' };
+        await page.keyboard.press(key);
+        await page.waitForLoadState('domcontentloaded', { timeout: 5000 }).catch(() => {});
+        return 'Pressed ' + key + '.\n' + (await pageSnapshot(page));
+      }
+      case 'text': {
+        const body = await withTimeout(page.innerText('body').catch(() => ''), 10000);
+        const text = String(body || '').replace(/\n{3,}/g, '\n\n').trim();
+        const head = await pageSnapshot(page);
+        return head + '\n\n' + (text ? text.slice(0, 10000) : '(page has no visible text — try action="eval" or action="links")');
+      }
+      case 'eval': {
+        const script = String(params.script || '').trim();
+        if (!script) return { error: 'eval needs a JavaScript expression (runs in the page context).' };
+        // Function-body form keeps multi-statement scripts working.
+        const result = await withTimeout(page.evaluate((src) => {
+          try { return JSON.stringify({ ok: true, value: new Function('return (' + src + ')')() }); }
+          catch (e) { return JSON.stringify({ ok: false, error: String(e && e.message || e) }); }
+        }, script), 10000);
+        const parsed = JSON.parse(String(result));
+        if (!parsed.ok) return { error: 'eval failed: ' + parsed.error };
+        const out = typeof parsed.value === 'string' ? parsed.value : JSON.stringify(parsed.value, null, 2);
+        return String(out == null ? 'null' : out).slice(0, 10000);
+      }
+      case 'links': {
+        const links = await withTimeout(
+          page.$$eval('a[href]', (els) => els.slice(0, 100).map((a) => ({
+            href: a.getAttribute('href') || '',
+            text: (a.textContent || '').trim().replace(/\s+/g, ' ').slice(0, 120),
+          }))),
+          10000,
+        );
+        if (!links.length) return (await pageSnapshot(page)) + '\n\n(no links found)';
+        return links.map((l, i) => (i + 1) + '. ' + l.text + ' — ' + l.href).join('\n').slice(0, 10000);
+      }
+      case 'screenshot': {
+        const dest = params.path
+          ? path.resolve(String(params.path))
+          : path.join(os.tmpdir(), 'loom-browser-' + Date.now() + '.png');
+        fs.mkdirSync(path.dirname(dest), { recursive: true });
+        await withTimeout(page.screenshot({ path: dest, fullPage: false }), 15000);
+        return 'Screenshot saved: ' + dest + '\n' + (await pageSnapshot(page));
+      }
+      default:
+        return { error: 'Unknown action "' + action + '".' };
+    }
+  } catch (err) {
+    return { error: 'browser ' + action + ' failed: ' + (err && err.message || err) };
+  }
+}
+
+// Test/diagnostic hook — true when a browser page is live.
+function isRunning() {
+  return !!( _engine && _engine.page && !_engine.page.isClosed() );
+}
+
+module.exports = { run, closeBrowser, isRunning, ACTIONS };

package/src/tools/index.js

@@ -5,6 +5,7 @@ const { execSync, spawn } = require('child_process');
 const { glob: globLib } = require('glob');
 const { commandRiskLabel } = require('../core/permissions');
 const { loadConfig } = require('../config/settings');
+const dnsPromises = require('dns').promises;
 
 const cwd = process.cwd();
 
@@ -15,6 +16,74 @@ function globIgnore(full) {
   return ['node_modules', '.git'].map((n) => path.posix.join(base, '**', n, '**'));
 }
 
+// ---------------------------------------------------------------------------
+// SSRF guard (webfetch)
+//
+// The agent model decides which URLs webfetch opens, and prompt-injected page
+// content can steer it toward "check http://169.254.169.254/latest/meta-data"
+// or "read localhost:5984/_config". Those must fail closed:
+//   - only http/https, never file:/ftp:/data: transport tricks
+//   - loopback, link-local (cloud metadata!), RFC1918 private ranges, CGNAT,
+//     IPv6 ULA/link-local and IPv4-mapped addresses are refused
+//   - hostnames are resolved BEFORE connecting so a DNS name pointing into
+//     internal space is caught (checking the literal hostname is not enough)
+//   - redirects are followed manually and every hop re-checked, because a
+//     public URL can bounce straight at an internal one
+// ---------------------------------------------------------------------------
+/**
+ * True when an IPv4/IPv6 address string falls in a range the agent must never
+ * fetch (loopback, link-local/metadata, private, CGNAT, malformed).
+ * @param {string} ip
+ * @returns {boolean}
+ */
+function isPrivateAddress(ip) {
+  const s = String(ip || '').toLowerCase();
+  // IPv6 handling first: exact forms and prefix families we care about.
+  if (s.includes(':')) {
+    let bare = s.replace(/^\[|\]$/g, '');
+    if (bare === '::' || bare === '::1') return true;
+    const mapped = /^::ffff:(\d{1,3}(?:\.\d{1,3}){3})$/.exec(bare);
+    if (mapped) return isPrivateAddress(mapped[1]);
+    if (/^f[cd][0-9a-f]{2}:/.test(bare)) return true;      // fc00::/7 ULA
+    if (/^fe[89ab][0-9a-f]:/.test(bare)) return true;      // fe80::/10 link-local
+    if (/^2001:db8:/.test(bare)) return true;              // documentation
+    return false;
+  }
+  const m = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(s);
+  if (!m) return false;
+  const o = m.slice(1).map(Number);
+  if (o.some((x) => x > 255)) return true;                 // malformed → refuse
+  const [a, b] = o;
+  return (
+    a === 0 ||                                             // this-network
+    a === 10 ||                                            // RFC1918
+    a === 127 ||                                           // loopback
+    (a === 100 && b >= 64 && b <= 127) ||                  // CGNAT 100.64/10
+    (a === 169 && b === 254) ||                            // link-local / metadata
+    (a === 172 && b >= 16 && b <= 31) ||                   // RFC1918
+    (a === 192 && b === 168)                               // RFC1918
+  );
+}
+
+/**
+ * Resolve a URL's host and report whether every resolved address is public.
+ * Unresolvable hosts fail closed (false).
+ * @param {URL} u
+ * @returns {Promise<boolean>}
+ */
+async function urlIsPublic(u) {
+  const host = u.hostname.toLowerCase().replace(/^\[|\]$/g, '');
+  if (!host || host === 'localhost' || host.endsWith('.localhost')) return false;
+  if (isPrivateAddress(host)) return false;
+  let addrs;
+  try {
+    addrs = /** @type {{address: string}[]} */ (await dnsPromises.lookup(host, { all: true }));
+  } catch {
+    return false;
+  }
+  return addrs.length > 0 && addrs.every((a) => !isPrivateAddress(a.address));
+}
+
 const MODES = ['build', 'plan', 'chat'];
 
 // Tools that never mutate the filesystem/state — safe to expose in plan mode.
@@ -251,10 +320,36 @@ const TOOLS = {
       url: { type: 'string', required: true, description: 'URL to fetch' },
     },
     async execute(params) {
+      let u;
+      try {
+        u = new URL(String(params.url || ''));
+      } catch {
+        return { error: 'Invalid URL' };
+      }
+      if (u.protocol !== 'http:' && u.protocol !== 'https:') {
+        return { error: 'Blocked by webfetch policy: only http/https URLs are allowed' };
+      }
       try {
-        const resp = await fetch(params.url, { signal: AbortSignal.timeout(15000) });
-        const text = await resp.text();
-        return text.slice(0, 10000);
+        // Follow redirects manually so every hop passes the SSRF guard — a
+        // public URL may legitimately bounce into an internal address.
+        let current = u;
+        const signal = AbortSignal.timeout(15000);
+        for (let hop = 0; hop < 5; hop++) {
+          if (!(await urlIsPublic(current))) {
+            return { error: `Blocked by webfetch policy: ${current.hostname} resolves to a private/reserved address (SSRF guard)` };
+          }
+          const resp = await fetch(current.toString(), { redirect: 'manual', signal });
+          if ([301, 302, 303, 307, 308].includes(resp.status)) {
+            const loc = resp.headers.get('location');
+            try { resp.body && resp.body.cancel(); } catch {}
+            if (!loc) return { error: `Fetch failed: redirect ${resp.status} without Location header` };
+            current = new URL(loc, current);
+            continue;
+          }
+          const text = await resp.text();
+          return text.slice(0, 10000);
+        }
+        return { error: 'Fetch failed: too many redirects' };
       } catch (e) {
         return { error: `Fetch failed: ${e.message}` };
       }
@@ -345,7 +440,7 @@ const TOOLS = {
   },
   task: {
     name: 'task',
-    description: 'Delegate a self-contained subtask to a subagent that runs fully autonomously and returns its final answer. Use when a piece of work can run independently (parallelizable), needs a focused toolset, or benefits from a different model. Pick the smallest suitable agent: explore (fast read-only code search), scout (web/docs research), general (full toolset except delegation). Pass the agent a COMPLETE, self-contained instruction: the goal, relevant file paths, and exactly what to return. The subagent may run tools autonomously; fold its findings into your own answer afterwards.',
+    description: 'Delegate a self-contained subtask to a subagent that runs fully autonomously and returns its final answer. Use when a piece of work can run independently (parallelizable), needs a focused toolset, or benefits from a different model. Agents: general (full toolset, default), explore (fast read-only code search), scout (quick docs lookups), research (deep multi-source investigation with a sourced report), coder (isolated implementation packages), reviewer (severity-ranked code review), tester (write/run tests until green), web (headless-browser work on live pages). Pick the smallest suitable agent. Pass a COMPLETE, self-contained instruction: the goal, relevant file paths, and exactly what to return. The subagent may run tools autonomously; fold its findings into your own answer afterwards.',
     parameters: {
       prompt: { type: 'string', required: true, description: 'Complete instructions for the subagent — goal, relevant file paths, and the exact output to return' },
       agent: { type: 'string', required: false, description: 'Subagent id: general (default), explore, scout, or a custom one from config.agents' },
@@ -367,6 +462,22 @@ const TOOLS = {
       return usage + '\n\n' + res.content;
     }
   },
+  browser: {
+    name: 'browser',
+    description: 'Drive a real headless browser (Playwright). Actions: goto (open an http/https url), click (CSS selector), fill (selector + text), press (key like Enter), text (visible page text + title/url), eval (JS expression in the page context), links (list page links), screenshot (save PNG, returns the file path), close. The browser stays open between calls so you can navigate, interact, and re-read the page. Prefer this over webfetch when the page needs JavaScript rendering or interaction.',
+    parameters: {
+      action: { type: 'string', required: true, description: '"goto" | "click" | "fill" | "press" | "text" | "eval" | "links" | "screenshot" | "close"' },
+      url: { type: 'string', required: false, description: 'Page url (action=goto)' },
+      selector: { type: 'string', required: false, description: 'CSS selector (action=click or fill)' },
+      text: { type: 'string', required: false, description: 'Text to type into the selector (action=fill)' },
+      key: { type: 'string', required: false, description: 'Key to press, e.g. Enter (action=press)' },
+      script: { type: 'string', required: false, description: 'JS expression evaluated in the page (action=eval)' },
+      path: { type: 'string', required: false, description: 'Screenshot destination path (action=screenshot; default: OS temp dir)' },
+    },
+    async execute(params) {
+      return require('./browser').run(params);
+    }
+  },
   mcp: {
     name: 'mcp',
     description: 'Manage MCP (tool) servers for this workspace. Use when the user asks to add/remove/enable/disable an MCP server or connector (e.g. github, filesystem, gmail) or when a task requires tools the session does not have yet. In the TUI, hosting/cloud services (supabase, vercel, nextjs, railway, netlify, cloudflare) live under /connectors; dev-tool MCP servers (playwright, github, sentry, figma, postgres, mongodb, linear, slack, brave-search, exa, context7, filesystem, sqlite, puppeteer) live under /mcp. Common packages: Playwright=@playwright/mcp, Sentry=@sentry/mcp-server (needs --access-token TOKEN), Figma=figma-developer-mcp (env FIGMA_API_KEY), Postgres=@modelcontextprotocol/server-postgres (env DATABASE_URL), MongoDB=mongodb-mcp-server (env MONGODB_CONNECTION_STRING), Linear=linear-mcp-server (env LINEAR_API_KEY), Slack=@modelcontextprotocol/server-slack (env SLACK_BOT_TOKEN + SLACK_TEAM_ID), Brave=@modelcontextprotocol/server-brave-search (env BRAVE_API_KEY), Exa=exa-mcp-server (env EXA_API_KEY), Context7=@upstash/context7-mcp, Vercel=vercel-mcp-server (env VERCEL_TOKEN), Railway=@railway/mcp-server (env RAILWAY_API_TOKEN), Netlify=netlify-mcp-server (env NETLIFY_AUTH_TOKEN), Cloudflare=@cloudflare/mcp-server-cloudflare (env CLOUDFLARE_API_TOKEN + CLOUDFLARE_ACCOUNT_ID), Supabase=@supabase/mcp-server-supabase (needs --access-token TOKEN), GitHub=ghcr.io/github/github-mcp-server (docker). If unsure about an MCP package, verify it exists first with webfetch (e.g. https://registry.npmjs.org/<pkg>) or web search (fetch or bash curl) — never trust an unverified npm package.',
@@ -540,4 +651,4 @@ async function getAllToolDefinitions(mode = 'build') {
   }
 }
 
-module.exports = { TOOLS, MODES, READ_ONLY_TOOLS, getToolDefinitions, getAllToolDefinitions, executeTool };
+module.exports = { TOOLS, MODES, READ_ONLY_TOOLS, getToolDefinitions, getAllToolDefinitions, executeTool, isPrivateAddress };

package/src/tui/App.tsx

@@ -464,12 +464,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) {
@@ -710,7 +725,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);

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 }) {