openzoo 0.48.87 → 0.48.92

package/lib/grokui.mjs

@@ -12,6 +12,14 @@ import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, statSyn
 import { cpus, homedir } from 'node:os';
 import path from 'node:path';
 import { adaptiveTopK, brain, brainRace, brainStream, tierModels, MODEL, PROXY, TIER_NAMES } from './podagent.mjs';
+import { peekDirectiveStatus, STALE_THINKING_MS } from './livestatus.js';
+import { creditBalance } from './info.js';
+import {
+  SUBSCRIPTIONS_PAGE,
+  saveSubscription, clearSubscription,
+  subscriptionPublicView, parseSubscriptionPaste,
+  billingTiers, billingCheckout, fetchBillingKey, ingestBillingKeyResponse,
+} from './subscription.js';
 
 const PORT = Number(process.env.OZ_GROKUI_PORT || 4173);
 // BIND HOST. Default 127.0.0.1 so the desktop app never exposes a shell-capable
@@ -26,9 +34,12 @@ const STORE_FILE = path.join(STORE_DIR, 'grokui-threads.json');
 // Real but SANDBOXED filesystem access for the bots — each THREAD has its own
 // root dir (default: a dedicated workspace, never the user's whole disk), and
 // the user can point a thread at a real project folder with "/dir <path>" in
-// chat. safeResolveIn rejects any path that would escape that thread's root
-// (../, absolute paths, symlink tricks via normalize) — access is real, but
-// always contained to whatever root was explicitly chosen for that thread.
+// chat. inDir / safeResolveIn reject any path that would escape that thread's
+// root (../, symlink tricks). An absolute path that is ALREADY inside the
+// root is used as-is — path.join(base, '/Users/...') doubles the prefix
+// (MEASURED live: LIST of t.dir produced
+// ENOENT scandir '/Users/…/Users/…/'). path.resolve treats an absolute
+// second arg as a new root, which is the right join.
 // Where a thread's WRITE/READ/RUN/LS/GLOB/GREP are scoped by default.
 //
 // Overridable because a BOX puts uploaded files somewhere else: box-server
@@ -43,17 +54,74 @@ const WORKSPACE_DIR = process.env.OZ_WORKSPACE_DIR
 mkdirSync(WORKSPACE_DIR, { recursive: true });
 function expandHome(p) { return p.startsWith('~') ? path.join(homedir(), p.slice(1)) : p; }
 function dirFor(threadId) { return threads.get(threadId)?.dir || WORKSPACE_DIR; }
-function safeResolveIn(base, rel) {
-  const full = path.normalize(path.join(base, rel));
-  if (full !== base && !full.startsWith(base + path.sep)) {
+/**
+ * Resolve `rel` inside `base`. If `rel` is already absolute, use it as-is
+ * when it stays inside `base` — never path.join(base, '/Users/...').
+ */
+function inDir(base, rel) {
+  const root = path.resolve(expandHome(String(base || '.')));
+  const raw = expandHome(String(rel ?? '').trim() || '.');
+  const full = path.isAbsolute(raw) ? path.resolve(raw) : path.resolve(root, raw);
+  if (full !== root && !full.startsWith(root + path.sep)) {
     throw new Error("path escapes this thread's directory");
   }
   return full;
 }
+function safeResolveIn(base, rel) { return inDir(base, rel); }
+function listDir(base, rel = '.') {
+  return readdirSync(inDir(base, rel), { withFileTypes: true });
+}
+/** If `spec` is an absolute path inside `base`, return the relative remainder
+ *  ('' when it IS the base). Non-absolute specs are left alone (null). */
+function stripBasePrefix(base, spec) {
+  const raw = expandHome(String(spec || '').trim());
+  if (!raw || !path.isAbsolute(raw)) return null;
+  const root = path.resolve(expandHome(String(base || '.')));
+  const full = path.resolve(raw);
+  if (full === root) return '';
+  if (full.startsWith(root + path.sep)) return full.slice(root.length + 1);
+  throw new Error("path escapes this thread's directory");
+}
+
+/**
+ * Reasoning models leak `<think>…</think>` / `<thinking>…` into the visible
+ * reply. MEASURED live on thread tetris: the user-visible bubble contained
+ * the raw tags, and the next turn sent them back to the model. Strip complete
+ * blocks, an unclosed opener (live stream), and stray closers.
+ */
+function stripThinkTags(text) {
+  let s = String(text ?? '');
+  s = s.replace(/<think(?:ing)?\b[^>]*>[\s\S]*?<\/think(?:ing)?>/gi, '');
+  s = s.replace(/<think(?:ing)?\b[^>]*>[\s\S]*$/i, '');
+  s = s.replace(/<\/think(?:ing)?>/gi, '');
+  return s.replace(/^\n+|\n+$/g, '').trim();
+}
 const MIME = { html: 'text/html', htm: 'text/html', css: 'text/css', js: 'application/javascript',
   mjs: 'application/javascript', json: 'application/json', png: 'image/png', jpg: 'image/jpeg',
   jpeg: 'image/jpeg', gif: 'image/gif', svg: 'image/svg+xml', txt: 'text/plain', md: 'text/plain' };
 let workspacePort = null;
+let workspacePortResolve = () => {};
+let workspaceBinding = false;
+const workspacePortReady = new Promise((resolve) => { workspacePortResolve = resolve; });
+function bindWorkspaceServer() {
+  if (workspaceServer.listening) {
+    workspacePort = workspaceServer.address().port;
+    workspacePortResolve(workspacePort);
+    return;
+  }
+  if (workspaceBinding) return;
+  workspaceBinding = true;
+  try {
+    workspaceServer.listen(0, '127.0.0.1', () => {
+      workspacePort = workspaceServer.address().port;
+      workspacePortResolve(workspacePort);
+    });
+  } catch (err) {
+    workspaceBinding = false;
+    console.error('[grokui] workspace server:', err.message);
+    setTimeout(bindWorkspaceServer, 250);
+  }
+}
 // route: /<threadId>/<relpath...> — each thread is served from ITS OWN dir
 const workspaceServer = http.createServer((req, res) => {
   try {
@@ -65,14 +133,65 @@ const workspaceServer = http.createServer((req, res) => {
     const full = safeResolveIn(dirFor(threadId), rel);
     const data = readFileSync(full);
     const ext = full.split('.').pop();
-    res.writeHead(200, { 'content-type': MIME[ext] || 'application/octet-stream' });
+    res.writeHead(200, {
+      'content-type': MIME[ext] || 'application/octet-stream',
+      // EDIT of the same html must not be served from a cached first write.
+      'cache-control': 'no-store',
+    });
     res.end(data);
   } catch {
     res.writeHead(404, { 'content-type': 'text/plain' });
     res.end('not found');
   }
 });
-workspaceServer.listen(0, '127.0.0.1', () => { workspacePort = workspaceServer.address().port; });
+workspaceServer.on('error', (err) => {
+  workspaceBinding = false;
+  console.error('[grokui] workspace server:', err.message);
+  setTimeout(bindWorkspaceServer, 250);
+});
+bindWorkspaceServer();
+
+function isPreviewableRel(rel) {
+  const base = path.basename(String(rel || '').split('?')[0]).toLowerCase();
+  return base.endsWith('.html') || base.endsWith('.htm');
+}
+
+async function ensureWorkspacePort(ms = 4000) {
+  if (workspacePort) return workspacePort;
+  if (!workspaceServer.listening) bindWorkspaceServer();
+  let timer;
+  const timeout = new Promise((resolve) => { timer = setTimeout(() => resolve(null), ms); });
+  const port = await Promise.race([workspacePortReady, timeout]);
+  clearTimeout(timer);
+  return port || workspacePort;
+}
+
+function workspaceFileUrl(originId, rel) {
+  const clean = String(rel || '').replace(/^\/+/, '');
+  return `http://localhost:${workspacePort}/${originId}/${clean}`;
+}
+
+// WRITE/EDIT of a playable page must ack a real http:// URL (same shape as
+// SERVE), not a dead disk path. Wait for the static server rather than
+// telling the user to try again after they just wrote a game.
+async function previewAck(originId, rel) {
+  if (!isPreviewableRel(rel)) return '';
+  const port = await ensureWorkspacePort();
+  if (!port) {
+    return `\nPreview: the workspace server is binding; the page is ${rel} and will be at `
+      + `http://localhost/<port>/${originId}/${String(rel).replace(/^\/+/, '')}.`;
+  }
+  return `\nPreview: ${workspaceFileUrl(originId, rel)}`;
+}
+
+const HTML_PREVIEW_RULE = `
+PREVIEW IS AUTOMATIC. After you WRITE or EDIT a .html / .htm file (including index.html),
+the harness already served it — the WRITE ack includes a real http://localhost URL and the
+chat bubble shows a live iframe. The harness will preview. Do not tell the user you
+"can't preview", cannot open a browser, or dump a raw disk path (/Users/..., ~/.openzoo/...)
+as the punchline. The page is already on screen. If you mention a location, use that
+http://localhost link, never a filesystem path.
+`;
 
 const PALETTE = ['#e91e8c', '#34c759', '#ff9500', '#5e5ce6', '#ff3b30', '#0a84ff', '#00c7be'];
 function colorFor(name) {
@@ -117,11 +236,15 @@ workspace folder, not their real project. Same one-line-no-prose reply format:
   SERVE: <relative path, or blank for the dir root>   get a real http:// URL for a file —
                                                        use this instead of claiming you
                                                        "can't expose a port": you can serve
-                                                       static files, just not run a process
+                                                       static files, just not run a process.
+                                                       HTML writes are auto-served — you do
+                                                       not need a separate SERVE for a
+                                                       playable page.
   FETCH: <url>                                        actually fetch and read a page's real
                                                        text — web search only gives you short
                                                        snippets; use FETCH when asked to
                                                        "read" or quote something specific
+${HTML_PREVIEW_RULE}
 
 HOW YOUR SITE ACTUALLY GETS A URL — read this before writing web files.
 
@@ -296,7 +419,26 @@ function loadThreads() {
     if (!existsSync(STORE_FILE)) return false;
     const arr = JSON.parse(readFileSync(STORE_FILE, 'utf8'));
     if (!Array.isArray(arr) || !arr.length) return false;
-    for (const t of arr) threads.set(t.id, t);
+    for (const t of arr) {
+      // A crash mid-turn persisted status=thinking. Do not reload into mute "…".
+      if (t.status === 'thinking') {
+        t.status = 'idle';
+        t.liveStatus = '';
+      }
+      if (Array.isArray(t.history)) {
+        for (const h of t.history) {
+          if (h && h.who === 'bot' && typeof h.text === 'string') h.text = stripThinkTags(h.text);
+        }
+      }
+      if (Array.isArray(t.messages)) {
+        for (const m of t.messages) {
+          if (m && m.role === 'assistant' && typeof m.content === 'string') {
+            m.content = stripThinkTags(m.content);
+          }
+        }
+      }
+      threads.set(t.id, t);
+    }
     return true;
   } catch { return false; }
 }
@@ -367,9 +509,12 @@ the user sets or changes it with "/dir <path>" in chat. Same format:
   READ: <relative path>                              read a file back
   SERVE: <relative path, or blank for the dir root>   get a real http:// URL for it — use
                                                        this instead of saying you can't
-                                                       expose a port
+                                                       expose a port. HTML writes are
+                                                       auto-served; you do not need SERVE
+                                                       just to preview a playable page.
   FETCH: <url>                                        actually fetch and read a page's real
                                                        text — web search only gives snippets
+${HTML_PREVIEW_RULE}
   RUN: <shell command>                                run a REAL shell command in this
                                                        group's shared directory — pauses the
                                                        WHOLE round for the user's approval
@@ -632,6 +777,21 @@ function sanitizeRunCommand(command) {
 //
 // Also tolerates the directive being wrapped in a markdown code fence, which
 // is the other shape models reach for unprompted.
+const MCP_AS_BASH_REFUSE = 'That RUN: body is MCP tool names, not a shell command. '
+  + 'get_skill, proofnetwork-*, publish-update, and MCP: lines must not be executed by bash '
+  + '— that is how a live thread printed `/bin/bash: get_skill: command not found`. '
+  + 'Emit a real MCP call instead:\n'
+  + '  MCP: <url> | <tool> | {"arg": "value"}\n'
+  + 'or list tools with:\n'
+  + '  MCP: <url>';
+
+/** Skill names / MCP: lines the model listed, then a RUN: tried to shell. */
+function looksLikeMcpAsBash(command) {
+  const text = String(command || '');
+  if (/^[ \t>*-]*MCP:/m.test(text)) return true;
+  return /^(?:[ \t>*-]*)(?:get_skill|publish-update|proofnetwork[-_][A-Za-z0-9._-]*)\b/im.test(text);
+}
+
 function parseRun(reply) {
   // NATIVE TOOL-CALL ENVELOPE FIRST. deepseek-v4-pro has real function calling,
   // and when told to emit "RUN: <cmd>" it frequently wraps the call in its own
@@ -658,10 +818,8 @@ function parseRun(reply) {
   // the whole envelope was dropped in silence: the bot then explained what it
   // was "about to run" forever, never running anything. Match the shape of the
   // envelope, not one vendor's spelling of it.
-  const SEP = '[|｜\\s]*';
-  const NAME = '(?:command|cmd|shell_command|script)';
-  const dsml = new RegExp(`<${SEP}DSML[^>]*\\bparameter\\b[^>]*\\bname="${NAME}"[^>]*>([\\s\\S]*?)<\\/${SEP}DSML`, 'i').exec(reply);
-  if (dsml) return sanitizeRunCommand(dsml[1]);
+  const dsmlCmd = dsmlRunCommand(reply);
+  if (dsmlCmd !== undefined) return dsmlCmd && !looksLikeMcpAsBash(dsmlCmd) ? dsmlCmd : null;
 
   // SEVERAL "RUN:" LINES IN ONE REPLY RUN BACK TO BACK.
   //
@@ -693,12 +851,26 @@ function parseRun(reply) {
     const fenced = /^```[\w-]*\n([\s\S]*?)```/.exec(cmd.trim());
     if (fenced) cmd = fenced[1];
     else cmd = cmd.replace(/\n```[\s\S]*$/, ''); // trailing fence + any posttext
+    cmd = sliceToNextDirective(cmd);
     cmd = sanitizeRunCommand(cmd);
+    // A RUN: that swallowed MCP: / get_skill / proofnetwork-* is the
+    // over-match that produced `/bin/bash: line 3: RUN:: command not found`
+    // and then `/bin/bash: get_skill: command not found`. Refuse the batch
+    // rather than join skill names into one script.
+    if (cmd && looksLikeMcpAsBash(cmd)) return null;
     if (cmd) cmds.push(cmd);
   }
   return cmds.length ? cmds.join('\n') : null;
 }
 
+function dsmlRunCommand(reply) {
+  const SEP = '[|｜\\s]*';
+  const NAME = '(?:command|cmd|shell_command|script)';
+  const dsml = new RegExp(`<${SEP}DSML[^>]*\\bparameter\\b[^>]*\\bname="${NAME}"[^>]*>([\\s\\S]*?)<\\/${SEP}DSML`, 'i').exec(reply);
+  if (!dsml) return undefined;
+  return sanitizeRunCommand(dsml[1]);
+}
+
 // RUN through BASH, not /bin/sh. node's exec() defaults to /bin/sh, which on
 // Debian is dash — so every bash-ism a model writes (`for … do`, `[[ ]]`,
 // arrays, process substitution) dies as
@@ -1106,6 +1278,24 @@ setInterval(() => {
   }
 }, 15000).unref();
 
+// A turn that is thinking with no deltas/status for too long is dead — the
+// stream reader used to hang forever and block the next user prompt behind
+// mute dots. Bump turnSeq so the in-flight runTurn bails, then idle.
+setInterval(() => {
+  const now = Date.now();
+  let dirty = false;
+  for (const t of threads.values()) {
+    if (t.status !== 'thinking') continue;
+    const last = t.lastDeltaAt || t.thinkingAt || 0;
+    if (!last || now - last < STALE_THINKING_MS) continue;
+    t.turnSeq = (t.turnSeq || 0) + 1;
+    t.status = 'idle';
+    t.liveStatus = '';
+    dirty = true;
+  }
+  if (dirty) saveThreads();
+}, 5000).unref();
+
 // Directives that only READ. These are safe to run at the same time, so a
 // reply carrying several of them costs one round trip instead of N — a model
 // that wants four files currently spends four full turns (and four payments)
@@ -1121,7 +1311,10 @@ const SKIP_DIRS = new Set(['node_modules', '.git', 'dist', 'build', '.next', '__
 function walkDir(base, rel = '', out = [], depth = 0) {
   if (depth > 12 || out.length > 5000) return out;
   let entries = [];
-  try { entries = readdirSync(path.join(base, rel), { withFileTypes: true }); } catch { return out; }
+  try {
+    const dir = rel && path.isAbsolute(rel) ? inDir(base, rel) : path.join(base, rel);
+    entries = readdirSync(dir, { withFileTypes: true });
+  } catch { return out; }
   for (const e of entries) {
     const r = rel ? path.join(rel, e.name) : e.name;
     if (e.isDirectory()) {
@@ -1487,7 +1680,19 @@ function nameAddressedToSend(reply, originId) {
   }).join('\n');
 }
 
-async function tryDirective(reply, originId) {
+function emitLiveStatus(originId, onEvent, detail) {
+  if (!detail) return;
+  const t = threads.get(originId);
+  if (t) {
+    t.liveStatus = detail;
+    t.lastDeltaAt = Date.now();
+  }
+  onEvent?.({ type: 'status', name: t?.name, color: t?.color, detail });
+}
+
+async function tryDirective(reply, originId, onEvent) {
+  const trail = peekDirectiveStatus(reply);
+  if (trail) emitLiveStatus(originId, onEvent, trail);
   // Foreign envelope in, our directives out — before any matching runs, so
   // every branch below sees the shape it was written for.
   const translated = translateForeignToolCall(reply);
@@ -1507,12 +1712,20 @@ async function tryDirective(reply, originId) {
   // separator-insensitive. That is what makes this safe: "Note:" or "Step 2:"
   // never matches a live agent, so ordinary prose is untouched.
   reply = nameAddressedToSend(reply, originId);
+  // MCP SKILL NAMES ARE NOT SHELL. parseRun used to hand get_skill /
+  // proofnetwork-* / MCP: to bash. Refuse here so the model sees the
+  // real MCP: directive, including DSML-wrapped RUN bodies with no RUN: line.
+  const runBodies = directiveLines(reply, 'RUN');
+  const dsmlCmd = dsmlRunCommand(reply);
+  if (runBodies.some(looksLikeMcpAsBash) || (dsmlCmd && looksLikeMcpAsBash(dsmlCmd))) {
+    return MCP_AS_BASH_REFUSE;
+  }
   // FAN OUT FIRST. Each line is re-entered on its own, so every branch below
   // stays single-directive and none of them had to learn about batching.
   const batch = [...reply.matchAll(PARALLEL_DIRECTIVE)];
   if (batch.length > 1) {
     const results = await Promise.all(
-      batch.map((m) => tryDirective(m[0].replace(/^[ \t>*-]*/, ''), originId)
+      batch.map((m) => tryDirective(m[0].replace(/^[ \t>*-]*/, ''), originId, onEvent)
         .catch((e) => `${m[1]}: ${e.message}`)),
     );
     return results.filter(Boolean).join('\n\n');
@@ -1613,7 +1826,7 @@ async function tryDirective(reply, originId) {
   const sendAll = directiveLines(reply, 'SEND');
   if (sendAll.length > 1) {
     const out = [];
-    for (const line of sendAll) out.push(await tryDirective('SEND: ' + line, originId));
+    for (const line of sendAll) out.push(await tryDirective('SEND: ' + line, originId, onEvent));
     return out.filter(Boolean).join('\n');
   }
   const sendM = sendAll.length === 1 ? /^([^|]+)\|([\s\S]+)/.exec(sendAll[0]) : null;
@@ -1642,7 +1855,7 @@ async function tryDirective(reply, originId) {
   const pingAll = directiveLines(reply, 'PING');
   if (pingAll.length > 1) {
     const out = [];
-    for (const line of pingAll) out.push(await tryDirective('PING: ' + line, originId));
+    for (const line of pingAll) out.push(await tryDirective('PING: ' + line, originId, onEvent));
     return out.filter(Boolean).join('\n');
   }
   const ping = pingAll.length === 1 ? [null, pingAll[0]] : null;
@@ -1687,7 +1900,7 @@ async function tryDirective(reply, originId) {
       const full = safeResolveIn(dirFor(originId), rel);
       mkdirSync(path.dirname(full), { recursive: true });
       writeFileSync(full, content);
-      return `Wrote ${rel} (${Buffer.byteLength(content)} bytes) to ${dirFor(originId)}.`;
+      return `Wrote ${rel} (${Buffer.byteLength(content)} bytes) to ${dirFor(originId)}.${await previewAck(originId, rel)}`;
     } catch (e) { return `Couldn't write ${rel}: ${e.message}`; }
   }
   const readD = /^[ \t>*-]*READ:\s*(.+)/m.exec(reply);
@@ -1713,7 +1926,7 @@ async function tryDirective(reply, originId) {
       if (hits === 0) return `EDIT ${rel}: that exact text isn't in the file — READ it first, the copy must match byte for byte.`;
       if (hits > 1) return `EDIT ${rel}: that text appears ${hits} times — include more surrounding context so it matches exactly once.`;
       writeFileSync(full, before.replace(oldStr, newStr));
-      return `Edited ${rel} (${before.length} -> ${before.replace(oldStr, newStr).length} bytes).`;
+      return `Edited ${rel} (${before.length} -> ${before.replace(oldStr, newStr).length} bytes).${await previewAck(originId, rel)}`;
     } catch (e) { return `Couldn't edit ${rel}: ${e.message}`; }
   }
 
@@ -1739,7 +1952,7 @@ async function tryDirective(reply, originId) {
         applied.push(o.slice(0, 40));
       }
       writeFileSync(full, next);
-      return `MULTIEDIT ${rel}: ${applied.length} edit(s) applied (${before.length} -> ${next.length} bytes).`;
+      return `MULTIEDIT ${rel}: ${applied.length} edit(s) applied (${before.length} -> ${next.length} bytes).${await previewAck(originId, rel)}`;
     } catch (e) { return `Couldn't multiedit ${rel}: ${e.message}`; }
   }
 
@@ -1770,8 +1983,8 @@ async function tryDirective(reply, originId) {
   if (ls) {
     const rel = ls[1].trim() || '.';
     try {
-      const full = safeResolveIn(dirFor(originId), rel);
-      const entries = readdirSync(full, { withFileTypes: true });
+      const full = inDir(dirFor(originId), rel);
+      const entries = listDir(dirFor(originId), rel);
       if (!entries.length) return `${rel}: (empty)`;
       const lines = entries.slice(0, 300).map((e) => {
         if (e.isDirectory()) return `  ${e.name}/`;
@@ -1796,9 +2009,11 @@ async function tryDirective(reply, originId) {
   // becomes `*`, which is what was meant.
   const glob = /^(?:GLOB|LS|LIST|DIR|FIND):[ \t]*(.*)$/m.exec(reply);
   if (glob) {
-    const pattern = glob[1].trim() || '*';
+    let pattern = glob[1].trim() || '*';
     try {
       const base = dirFor(originId);
+      const stripped = stripBasePrefix(base, pattern);
+      if (stripped !== null) pattern = stripped || '*';
       const re = globToRe(pattern.startsWith('./') ? pattern.slice(2) : pattern);
       const hits = walkDir(base).filter((f) => re.test(f) || re.test(path.basename(f)));
       if (!hits.length) return `GLOB ${pattern}: no matches`;
@@ -1817,7 +2032,12 @@ async function tryDirective(reply, originId) {
       try { re = new RegExp(pattern, 'i'); }
       catch { return `GREP: ${pattern} isn't a valid regex.`; }
       let files = walkDir(base);
-      if (scope) { const sre = globToRe(scope); files = files.filter((f) => sre.test(f) || f.startsWith(scope)); }
+      if (scope) {
+        const stripped = stripBasePrefix(base, scope);
+        const use = stripped !== null ? stripped : scope;
+        const sre = globToRe(use);
+        files = files.filter((f) => sre.test(f) || f.startsWith(use));
+      }
       const out = [];
       for (const f of files) {
         if (out.length > 200) break;
@@ -1887,9 +2107,19 @@ async function tryDirective(reply, originId) {
 
   const serve = /^[ \t>*-]*SERVE:\s*(.*)$/m.exec(reply);
   if (serve) {
-    const rel = serve[1].trim();
-    if (!workspacePort) return 'Workspace server is still starting — try again in a second.';
-    return `Serving at http://localhost:${workspacePort}/${originId}/${rel}`;
+    let rel = serve[1].trim();
+    try {
+      if (rel) {
+        const root = path.resolve(dirFor(originId));
+        const full = inDir(root, rel);
+        rel = full === root ? '' : full.slice(root.length + 1);
+      }
+    } catch (e) { return `Couldn't serve ${serve[1].trim()}: ${e.message}`; }
+    const port = await ensureWorkspacePort();
+    if (!port) {
+      return `Serving ${rel || 'index.html'} from ${dirFor(originId)} — waiting for the workspace port to bind.`;
+    }
+    return `Serving at http://localhost:${port}/${originId}/${rel}`;
   }
   const fetchD = /^[ \t>*-]*FETCH:\s*(\S+)/m.exec(reply);
   if (fetchD) {
@@ -2026,59 +2256,79 @@ async function mcpDirective(url, tool, args) {
 }
 
 // onEvent (optional) gets live progress for whoever's actually watching this
-// call: {type:'start',name,color} when a bot begins its turn, {type:'delta',
-// name,color,delta} per streamed token, {type:'final',name,color,text} once
-// its full reply (or directive ack) is settled. Background turns — a SPAWNed
+// call: {type:'start',name,color} when a bot begins its turn, {type:'status',
+// detail} while paying / waiting / walking tools, {type:'delta',name,color,
+// delta} per streamed token, {type:'final',name,color,text} once its full
+// reply (or directive ack) is settled. Background turns — a SPAWNed
 // subagent nobody's looking at yet — run with onEvent omitted and just use
 // the plain non-streaming brain(), which is cheaper when nothing renders it.
 async function runTurn(threadId, userText, onEvent, images) {
   const t = threads.get(threadId);
   if (!t) return;
+  // A new user prompt must not sit behind a dead auto-continue. Bump the
+  // generation so the previous runTurn's awaits bail instead of keeping
+  // status=thinking and the UI on "…".
+  if (!isHarnessUserText(userText)) t.turnSeq = (t.turnSeq || 0) + 1;
+  const seq = t.turnSeq || 0;
+  const stillMine = () => threads.get(threadId)?.turnSeq === seq;
+  const paint = (ev) => {
+    if (!stillMine()) return;
+    if (ev.type === 'status' && ev.detail) t.liveStatus = ev.detail;
+    if (ev.type === 'delta' || ev.type === 'status' || ev.type === 'start') t.lastDeltaAt = Date.now();
+    onEvent?.(ev);
+  };
   t.history.push(images && images.length ? { who: 'user', text: userText, images } : { who: 'user', text: userText });
   t.lastActivityAt = Date.now();
+  t.status = 'thinking';
+  t.thinkingAt = Date.now();
+  t.lastDeltaAt = Date.now();
+  t.liveStatus = 'waiting on model…';
+  let chained = false;
+  let parked = false;
+  try {
   if (t.members) {
-    t.status = 'thinking';
     // sequential, not parallel: each member's context is rebuilt from
     // t.history right before its turn, so it sees every reply (including
     // spawns/sends) the earlier members in THIS round already made
     for (const m of t.members) {
+      if (!stillMine()) return;
       const msgs = buildMemberMessages(t, m);
       let r = '';
-      onEvent?.({ type: 'start', name: m.name, color: m.color });
+      paint({ type: 'start', name: m.name, color: m.color, detail: 'waiting on model…' });
+      const emitStatus = (detail) => paint({ type: 'status', name: m.name, color: m.color, detail });
       try {
         r = onEvent
-          ? (await brainStream(msgs, (delta) => onEvent({ type: 'delta', name: m.name, color: m.color, delta }), t.contextId)).trim()
+          ? (await brainStream(msgs, (delta) => paint({ type: 'delta', name: m.name, color: m.color, delta }), t.contextId, undefined, undefined, 0, 0, emitStatus)).trim()
           : (await brain(msgs, t.contextId)).trim();
       } catch (e) { r = `error: ${e.message}`; }
+      if (!stillMine()) return;
+      r = stripThinkTags(r);
       const runCmd = parseRun(r);
       if (runCmd) {
         const command = runCmd;
         if (t.runMode === 'auto') {
+          emitLiveStatus(t.id, paint, peekDirectiveStatus('', command));
           const output = await execCommand(command, dirFor(t.id));
           const shown = `$ ${command}\n${output}`;
           t.history.push({ who: 'bot', text: shown, name: m.name, color: m.color });
-          onEvent?.({ type: 'final', name: m.name, color: m.color, text: shown });
+          paint({ type: 'final', name: m.name, color: m.color, text: shown });
           // this member's turn is done; the round continues to the next member
           continue;
         }
         const runId = randomUUID();
         t.pendingRun = { runId, command, cwd: dirFor(t.id) };
         t.history.push({ who: 'bot', text: command, runId, runStatus: 'pending', name: m.name, color: m.color });
-        onEvent?.({ type: 'run-pending', runId, command, name: m.name, color: m.color });
+        paint({ type: 'run-pending', runId, command, name: m.name, color: m.color });
         // pauses the WHOLE round here — the rest of the group gets their turn
         // on the round that runs after the user approves/denies
-        t.status = 'idle';
-        t.lastActivityAt = Date.now();
-        saveThreads();
+        parked = true;
         return;
       }
-      const ack = await tryDirective(r, t.id);
+      const ack = await tryDirective(r, t.id, paint);
       const finalText = ack ?? (r || '(no response)');
       t.history.push({ who: 'bot', text: finalText, name: m.name, color: m.color });
-      onEvent?.({ type: 'final', name: m.name, color: m.color, text: finalText });
+      paint({ type: 'final', name: m.name, color: m.color, text: finalText });
     }
-    t.status = 'idle';
-    saveThreads();
     bindThread(t).catch(() => {});
     return;
   }
@@ -2092,9 +2342,8 @@ async function runTurn(threadId, userText, onEvent, images) {
     delete t.autoNudged;
   }
   t.messages.push({ role: 'user', content: contentFor(userText, images) });
-  t.status = 'thinking';
   let reply = '';
-  onEvent?.({ type: 'start', name: t.name, color: t.color });
+  paint({ type: 'start', name: t.name, color: t.color, detail: 'waiting on model…' });
   // Transient: the nudge is appended for THIS call only and never pushed into
   // t.messages, so it can't accumulate across a chained auto run or get bound
   // into the thread's context.
@@ -2119,7 +2368,8 @@ async function runTurn(threadId, userText, onEvent, images) {
   // `attempt` exists because a retry must be allowed to land somewhere else:
   // see the empty-completion loop below.
   const ask = async (attempt = 0) => {
-    const emit = (delta) => onEvent && onEvent({ type: 'delta', name: t.name, color: t.color, delta });
+    const emit = (delta) => paint({ type: 'delta', name: t.name, color: t.color, delta });
+    const emitStatus = (detail) => paint({ type: 'status', name: t.name, color: t.color, detail });
     // Retrieval breadth scales with the PROJECT's corpus, not this thread's —
     // the holobrain is shared at the root, so that is the pool being searched.
     const topK = adaptiveTopK((threads.get(rootOf(t).rootId) || t).boundItems);
@@ -2131,16 +2381,18 @@ async function runTurn(threadId, userText, onEvent, images) {
       // the middle (2 of 3) is a judged answer without the slowest entrant
       // setting the latency.
       const need = Math.min(Math.max(Number(t.raceNeed) || 1, 1), race);
+      emitStatus('waiting on model…');
       return (await brainRace(callMsgs, emit, t.contextId, models, need)).trim();
     }
     // A retry draws a DIFFERENT model from the tier rather than the same one.
     const model = t.model || (await tierModels(t.tier || 'medium', attempt + 1, attempt > 0))[attempt] || undefined;
     return (onEvent
-      ? (await brainStream(callMsgs, emit, t.contextId, model)).trim()
+      ? (await brainStream(callMsgs, emit, t.contextId, model, undefined, 0, topK, emitStatus)).trim()
       : (await brain(callMsgs, t.contextId, model, topK)).trim());
   };
   try {
     reply = await ask();
+    if (!stillMine()) return;
     // An EMPTY completion is transient far more often than it is meaningful —
     // it showed up repeatedly as a dead "(no response)" bubble that cost the
     // user a turn and told them nothing. Retry once before giving up, and if
@@ -2157,7 +2409,9 @@ async function runTurn(threadId, userText, onEvent, images) {
     // fix. A thread pinned with /model stays pinned; that was an explicit
     // choice and silently answering as something else would be worse.
     for (let i = 0; !reply && i < AUTO_EMPTY_RETRIES; i++) {
+      paint({ type: 'status', name: t.name, color: t.color, detail: 'retrying…' });
       await new Promise((r) => setTimeout(r, 400 * (i + 1)));
+      if (!stillMine()) return;
       reply = await ask(t.model ? 0 : i + 1);
     }
     if (!reply) {
@@ -2168,15 +2422,19 @@ async function runTurn(threadId, userText, onEvent, images) {
   } catch (e) {
     reply = `error: ${e.message}`;
   }
+  if (!stillMine()) return;
+  reply = stripThinkTags(reply);
   t.messages.push({ role: 'assistant', content: reply });
   const runCmd = parseRun(reply);
   if (runCmd) {
     const command = runCmd;
     if (t.runMode === 'auto') {
+      emitLiveStatus(t.id, paint, peekDirectiveStatus('', command));
       const output = await execCommand(command, dirFor(t.id));
+      if (!stillMine()) return;
       const shown = `$ ${command}\n${output}`;
       t.history.push({ who: 'bot', text: shown });
-      onEvent?.({ type: 'final', name: t.name, color: t.color, text: shown });
+      paint({ type: 'final', name: t.name, color: t.color, text: shown });
       // FEED THE OUTPUT BACK. The 'ask' path already does this on approve, so
       // auto mode was strictly LESS capable than the gated one: the command
       // ran, the result was shown, and the model never saw it — no diagnosis,
@@ -2186,9 +2444,6 @@ async function runTurn(threadId, userText, onEvent, images) {
       // AUTO_MAX_STEPS chained commands per user message, reset whenever the
       // user speaks again.
       t.autoSteps = (t.autoSteps || 0) + 1;
-      t.status = 'idle';
-      t.lastActivityAt = Date.now();
-      saveThreads();
       if (t.autoSteps < AUTO_MAX_STEPS) {
         // BIND BEFORE CHAINING. bindThread only ran at the end of a normal
         // turn, and both auto paths return before reaching it — so in auto
@@ -2196,12 +2451,14 @@ async function runTurn(threadId, userText, onEvent, images) {
         // most material (command output, GLOB results, MCP tool lists). The
         // holographic context stopped growing precisely when it mattered.
         bindThread(t).catch(() => {});
+        chained = true;
         runTurn(threadId, condense('(command output)', output), onEvent).catch(() => {});
       } else {
         // Do not park. A "say continue" note is the failure mode auto exists
         // to avoid — inject continue and keep going until DONE or ask.
         t.autoSteps = 0;
         bindThread(t).catch(() => {});
+        chained = true;
         runTurn(threadId, AUTO_CONTINUE, onEvent).catch(() => {});
       }
       return;
@@ -2210,20 +2467,16 @@ async function runTurn(threadId, userText, onEvent, images) {
       const runId = randomUUID();
       t.pendingRun = { runId, command, cwd: dirFor(t.id) };
       t.history.push({ who: 'bot', text: command, runId, runStatus: 'pending' });
-      onEvent?.({ type: 'run-pending', runId, command, name: t.name, color: t.color });
+      paint({ type: 'run-pending', runId, command, name: t.name, color: t.color });
     }
-    t.status = 'idle';
-    t.lastActivityAt = Date.now();
-    saveThreads();
+    parked = true;
     return;
   }
-  const ack = await tryDirective(reply, t.id);
+  const ack = await tryDirective(reply, t.id, paint);
+  if (!stillMine()) return;
   const finalText = ack ?? (reply || '(no response)');
   t.history.push({ who: 'bot', text: finalText });
-  onEvent?.({ type: 'final', name: t.name, color: t.color, text: finalText });
-  t.status = 'idle';
-  t.lastActivityAt = Date.now();
-  saveThreads();
+  paint({ type: 'final', name: t.name, color: t.color, text: finalText });
 
   // AUTO CONTINUES AFTER *ANY* DIRECTIVE, not just RUN.
   //
@@ -2240,6 +2493,7 @@ async function runTurn(threadId, userText, onEvent, images) {
       && !/^[ \t>*-]*DONE:/m.test(reply)) {
     t.autoSteps = (t.autoSteps || 0) + 1;
     bindThread(t).catch(() => {});   // bind every hop, not just the last one
+    chained = true;
     if (t.autoSteps < AUTO_MAX_STEPS) {
       runTurn(threadId, condense('(directive result)', ack), onEvent).catch(() => {});
     } else {
@@ -2273,8 +2527,8 @@ async function runTurn(threadId, userText, onEvent, images) {
     // another continue rather than stopping.
     t.autoNudged = true;
     t.autoSteps = (t.autoSteps || 0) + 1;
-    saveThreads();
     bindThread(t).catch(() => {});
+    chained = true;
     if (t.autoSteps < AUTO_MAX_STEPS) {
       runTurn(threadId, NUDGE, onEvent).catch(() => {});
     } else {
@@ -2284,6 +2538,17 @@ async function runTurn(threadId, userText, onEvent, images) {
     return;
   }
   bindThread(t).catch(() => {});
+  } finally {
+    // A hung or thrown brainStream used to leave t.status = 'thinking' and the
+    // UI on mute "…" forever. Always idle unless this hop chained or parked
+    // on an approval — the next runTurn sets thinking again itself.
+    if (stillMine() && !chained && !parked && !t.pendingRun) {
+      t.status = 'idle';
+      t.liveStatus = '';
+    }
+    t.lastActivityAt = Date.now();
+    saveThreads();
+  }
 }
 
 // Said it would, without a directive line. "Spawned X" and "working on it" are
@@ -2418,6 +2683,7 @@ function threadSummary(t) {
     // an approval nobody knew it wanted. The blue dot means "working"; this
     // means "your move".
     awaitingUser: Boolean(t.pendingRun),
+    liveStatus: t.status === 'thinking' ? (t.liveStatus || '') : '',
     rootId: rootOf(t).rootId, depth: rootOf(t).depth,
     rootName: (threads.get(rootOf(t).rootId) || t).name,
     // The spend dial, so the header can show it without a round trip per
@@ -2425,7 +2691,11 @@ function threadSummary(t) {
     tier: t.tier || 'medium', race: Number(t.race) || 0, raceNeed: Number(t.raceNeed) || 1, model: t.model || '',
     // How many bots sit BELOW this one. The ping-all affordance belongs on
     // anyone with a crew, not only on a project root.
-    kids: subtreeOf(t.id).length };
+    kids: subtreeOf(t.id).length,
+    // Names only — enough for the sidebar/header to stack a little crew PFP
+    // without shipping every member's system prompt to the browser.
+    members: t.members ? t.members.map((m) => m.name) : undefined,
+    workspacePort: workspacePort || 0 };
 }
 
 const APP_HTML = `<!doctype html>
@@ -2478,8 +2748,22 @@ const APP_HTML = `<!doctype html>
             font-size: 13px; }
   .trow:hover .tclose { display: flex; }
   .tclose:hover { background: #3a3a3c; color: #ececec; }
-  .tavatar { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 36px; display: flex; align-items: center;
-             justify-content: center; color: #fff; font-weight: 600; font-size: 14px; }
+  /* BOT PFPs. Grok Bot uses a cute illustrated face, not two letters in a
+     rounded square. The SVG is generated in botPfp(); this just frames it
+     as a round clip and runs a cheap idle bob/blink. overflow:hidden clips
+     the bounce so it cannot paint over the HUD or wallet. */
+  .tavatar { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px; overflow: hidden;
+             display: flex; align-items: center; justify-content: center; background: #1c1c1e;
+             color: #fff; font-weight: 600; font-size: 14px; }
+  .tavatar svg { width: 100%; height: 100%; display: block; }
+  .tavatar-sm { width: 28px; height: 28px; flex: 0 0 28px; }
+  .tavatar-plus { background: #3a3a3c; font-size: 15px; }
+  .bot-pfp .bot-bob { transform-box: fill-box; transform-origin: 50% 70%;
+                      animation: botbob 2.8s ease-in-out infinite; animation-delay: var(--bot-delay, 0s); }
+  .bot-pfp .bot-eyes { transform-box: fill-box; transform-origin: 50% 50%;
+                       animation: botblink 3.8s step-end infinite; animation-delay: var(--bot-blink, 0s); }
+  @keyframes botbob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
+  @keyframes botblink { 0%,88%,100% { transform: scaleY(1); } 90%,94% { transform: scaleY(0.08); } }
   .tmeta { min-width: 0; flex: 1; }
   .tname { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .tprev { font-size: 12px; color: #8e8e93; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -2494,11 +2778,13 @@ const APP_HTML = `<!doctype html>
     animation: twarnpulse 1.6s ease-in-out infinite;
   }
   @keyframes twarnpulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
-  @media (prefers-reduced-motion: reduce) { .twarn { animation: none; } }
+  @media (prefers-reduced-motion: reduce) {
+    .twarn, .bot-pfp .bot-bob, .bot-pfp .bot-eyes { animation: none; }
+  }
   #main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
   #chatHeader { padding: 14px 20px; border-bottom: 1px solid #1c1c1e; display: flex; align-items: center;
                 flex-wrap: wrap; gap: 8px 10px; font-weight: 600; }
-  #chatHeader .tavatar { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; flex: 0 0 26px; }
+  #chatHeader .tavatar { width: 26px; height: 26px; border-radius: 50%; font-size: 11px; flex: 0 0 26px; }
   /* Title shrinks and wraps; the spend dials must stay on screen. margin-left:auto
      on #modeToggle used to shove cheap/race/wallet off the right edge. */
   #chatHeaderId { display: flex; align-items: center; gap: 10px; flex: 1 1 120px; min-width: 0; overflow: hidden; }
@@ -2557,10 +2843,38 @@ const APP_HTML = `<!doctype html>
   .wrow .wcopy { flex: 0 0 auto; color: #6f7080; font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
                  user-select: none; }
   .wrow:hover .wcopy { color: #b8f240; }
+  .wcredit { border: 1px solid #2a3a18; background: rgba(184,242,64,.08); border-radius: 12px;
+             padding: 12px 14px; margin-bottom: 12px; }
+  .wcredit .wbig { color: #b8f240; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
+  .wcredit .wlab2 { color: #8e8e93; font-size: 11px; margin-top: 2px; }
   .wbal { border: 1px solid #1c1c1e; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
           font-size: 12px; color: #ececec; line-height: 1.7; word-break: break-word; }
   .wnote { color: #6f7080; font-size: 11px; line-height: 1.6; margin-top: 12px; }
   .wempty { color: #f28c4d; }
+  .wlane { border-top: 1px solid #2c2c2e; margin-top: 16px; padding-top: 14px; }
+  .wlanetitle { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
+                color: #ececec; margin-bottom: 4px; }
+  .wtag { color: #b8f240; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 8px; }
+  .wtier { border: 1px solid #1c1c1e; border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
+  .wtier.hot { border-color: #b8f240; }
+  .wtier .wtn { font-size: 14px; font-weight: 600; }
+  .wtier .wtp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px;
+                font-weight: 700; margin: 4px 0 2px; }
+  .wtier .wts { color: #b8f240; font-size: 11px; }
+  .wtier .wtb { color: #8e8e93; font-size: 11px; margin: 4px 0 8px; }
+  .wtier button { border: 1px solid #2c2c2e; background: #131315; color: #ececec; font: inherit;
+                  font-size: 12px; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
+  .wtier.hot button { background: #b8f240; border-color: #b8f240; color: #0b0b0d; font-weight: 600; }
+  .wtier button:disabled { opacity: .5; cursor: default; }
+  .wpaste { margin-top: 10px; }
+  .wpaste input { width: 100%; background: #0b0b0d; border: 1px solid #2c2c2e; border-radius: 8px;
+                  color: #ececec; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
+                  padding: 8px 10px; margin: 6px 0; }
+  .wpaste button { border: 1px solid #2c2c2e; background: #131315; color: #ececec; font: inherit;
+                   font-size: 12px; border-radius: 8px; padding: 6px 10px; cursor: pointer; }
+  .wquiet { margin-top: 10px; font-size: 11px; }
+  .wquiet a { color: #6ab0ff; }
+  .wsubon { color: #b8f240; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
   /* Slash autocomplete. Anchored above the composer because the composer sits
      at the bottom of the viewport — a dropdown BELOW it would render off
      screen. */
@@ -2579,11 +2893,14 @@ const APP_HTML = `<!doctype html>
      inside the dials (race / wallet / ◎) once they take a second row. top is
      set from the header's live bottom in placeHud(). z-index stays high; the
      bug was geometry, not stacking. */
-  #hud { position: absolute; right: 14px; width: 250px; background: rgba(14,14,17,.94);
+  #hud { position: absolute; right: 14px; width: 270px; background: rgba(14,14,17,.94);
          border: 1px solid #333340; border-radius: 10px; padding: 12px 14px; font: 11px/1.5 Menlo, monospace;
          display: none; z-index: 300; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
   #hud.show { display: block; }
   #hud .htitle { color: #b8f240; font-size: 10px; letter-spacing: .04em; margin-bottom: 10px; }
+  #hud .htitle.hsession { margin-top: 12px; padding-top: 10px; border-top: 1px solid #333340; color: #6f7080; }
+  #hud .hcredit { color: #b8f240; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
+  #hud .hcreditlab { color: #999aa8; font-size: 10px; margin: 2px 0 8px; }
   #hud .hrow { display: flex; justify-content: space-between; margin: 6px 0; color: #f0f0eb; font-size: 12px; }
   #hud .hrow span:first-child { color: #999aa8; font-size: 10.5px; }
   #hud .hlime { color: #b8f240; }
@@ -2604,8 +2921,8 @@ const APP_HTML = `<!doctype html>
          -webkit-user-select: text; user-select: text; }
   .hdr { align-self: flex-start; display: flex; align-items: center; gap: 6px; margin: 12px 0 4px;
          color: #8e8e93; font-size: 13px; }
-  .hdr .avatar { width: 18px; height: 18px; border-radius: 5px; display: flex; align-items: center;
-                 justify-content: center; color: #fff; font-size: 9px; font-weight: 700; }
+  .hdr .avatar { width: 18px; height: 18px; border-radius: 50%; overflow: hidden; display: flex;
+                 align-items: center; justify-content: center; background: #1c1c1e; }
   /* min-width:0 is load-bearing. A flex item defaults to min-width:auto, so it
      refuses to shrink below its content's intrinsic width — one long
      unbreakable line (a curl command, a JSON blob) in a <pre> then stretches
@@ -2621,7 +2938,13 @@ const APP_HTML = `<!doctype html>
   /* rendered markdown. The bubble is pre-wrap for plain text, but block
      elements carry their own spacing — leaving pre-wrap on would add the
      source newlines back on top of it and double every gap. */
-  .bubble:has(> p, > .md-h, > .md-table, > .md-list, > .md-pre) { white-space: normal; }
+  .bubble:has(> p, > .md-h, > .md-table, > .md-list, > .md-pre, > .html-preview-wrap) { white-space: normal; }
+  .row:has(.html-preview) { max-width: 92%; }
+  .html-preview-wrap { margin-top: 10px; }
+  .html-preview-open { display: inline-block; margin-bottom: 6px; font-size: 12px; color: #6ab0ff;
+                       text-decoration: underline; cursor: pointer; }
+  .html-preview { display: block; width: 100%; height: 420px; border: 1px solid #3a3a3c;
+                  border-radius: 12px; background: #111; }
   .bubble > p { margin: 0 0 10px; }
   .bubble > p:last-child { margin-bottom: 0; }
   .md-h { margin: 14px 0 8px; font-size: 15px; font-weight: 600; line-height: 1.3; }
@@ -2690,6 +3013,8 @@ const APP_HTML = `<!doctype html>
                background: #8e8e93; animation: blink 1.2s infinite ease-in-out; }
   .dots span:nth-child(2) { animation-delay: .2s; } .dots span:nth-child(3) { animation-delay: .4s; }
   @keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
+  .tstatus { color: #8e8e93; font-size: 13px; margin-left: 6px; }
+  .ttrail { display: block; color: #8e8e93; font-size: 12.5px; margin-top: 8px; }
   #bar { padding: 10px 16px 18px; position: relative; }
   #row-input { display: flex; align-items: center; gap: 8px; }
   #plusMenu { position: absolute; bottom: 62px; left: 16px; background: #1c1c1e; border-radius: 14px;
@@ -2797,8 +3122,26 @@ const APP_HTML = `<!doctype html>
   <div id="walletOverlay" data-component="wallet-modal">
     <div id="walletBox">
       <h3>Your wallet</h3>
+      <div class="wsub">Two ways to pay, side by side. Wallet/x402 stays. A card subscription sits next to it — not instead of it.</div>
+      <div class="wlanetitle">Wallet / x402</div>
       <div class="wsub">This is <b>your</b> local burner on this machine (or this box). Keys stay in ~/.openzoo/wallet.json. It is not openzoo’s wallet, not a shared zoo account, not the model’s. You fund these deposit addresses; the app pays x402 per call from this wallet. Public addresses only — the UI never shows the key.</div>
       <div id="walletBody">loading…</div>
+      <div class="wlane" id="subLane" data-component="subscribe-lane">
+        <div class="wlanetitle">Subscribe with a card</div>
+        <div class="wtag">Subscription key · no x402</div>
+        <div class="wsub">Same plans as the public page. Checkout opens in the system browser — never an in-app Stripe window. After Stripe, this app polls the site’s key endpoint with the checkout session, or you paste the key from the success page.</div>
+        <div id="subStatus"></div>
+        <div id="subTiers">loading plans…</div>
+        <div class="wpaste">
+          <div class="wlab">I already subscribed — paste key</div>
+          <input id="subKeyInp" type="text" autocomplete="off" spellcheck="false"
+                 placeholder="key, or the /billing/done?session=… URL">
+          <button type="button" id="subKeyBtn">Save key</button>
+          <button type="button" id="subForgetBtn" hidden>Remove key</button>
+        </div>
+        <div class="wnote" id="subNote"></div>
+        <div class="wquiet"><a id="subPageLink" href="${SUBSCRIPTIONS_PAGE}" target="_blank" rel="noopener">Full subscriptions page</a></div>
+      </div>
     </div>
   </div>
   <div id="main">
@@ -2833,13 +3176,14 @@ const APP_HTML = `<!doctype html>
         </optgroup>
       </select>
       <button class="dial" id="walletBtn" data-component="wallet-open"
-              title="Your local burner wallet — deposit addresses and live balances">wallet</button>
+              title="Wallet/x402 or subscribe with a card — deposit addresses, live balances, Stripe plans">wallet</button>
       <button class="icon-btn" id="reloadBtn" title="Restart grokui on this box">&#8635;</button>
       <button class="icon-btn" id="hudBtn">◎</button>
       </div>
     </div>
     <div id="hud">
       <div class="htitle">YOUR WALLET · THIS SESSION</div>
+      <div class="hrow" id="hSubRow" hidden><span>subscription</span><span id="hSub" class="hlime">—</span></div>
       <div class="hrow"><span>prepaid credit</span><span id="hCredit" class="hlime">—</span></div>
       <div class="hrow"><span>you've paid</span><span id="hYouSpent">—</span></div>
       <div class="hrow"><span>our cost (cogs)</span><span id="hYouCogs">—</span></div>
@@ -2904,8 +3248,155 @@ const APP_HTML = `<!doctype html>
     : '';
   let activeId = null;
   let knownThreads = [];
-
-  function initials(name) { return name.slice(0, 2).toUpperCase(); }
+  let workspacePort = 0;
+
+  // BOT PFPs. Same job as Grok Bot's agent faces: a round illustrated
+  // creature, unique per name, idle-animated, no network. Hash is the same
+  // 31-multiply used by colorFor, so a name always paints the same bot.
+  // Built with string concat — template literals inside APP_HTML would be
+  // interpolated by the outer backtick string before the browser sees them.
+  let botPfpSeq = 0;
+  function nameHash(name) {
+    let h = 0;
+    const s = String(name || '');
+    for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) >>> 0;
+    return h;
+  }
+  function botPalettes() {
+    return [
+      ['#ff6b9d', '#ffd0e0', '#c9184a'],
+      ['#ffb347', '#ffe4b3', '#c27800'],
+      ['#5eead4', '#ccfbf1', '#0f766e'],
+      ['#b8f240', '#e6ffb3', '#4d7c0f'],
+      ['#c084fc', '#edd4ff', '#7e22ce'],
+      ['#60a5fa', '#dbeafe', '#1d4ed8'],
+      ['#fb7185', '#ffe4e6', '#be123c'],
+      ['#34d399', '#d1fae5', '#047857'],
+      ['#fbbf24', '#fef3c7', '#b45309'],
+      ['#a78bfa', '#ede9fe', '#6d28d9'],
+      ['#38bdf8', '#e0f2fe', '#0369a1'],
+      ['#f472b6', '#fce7f3', '#9d174d']
+    ];
+  }
+  function botFaceInner(name) {
+    const h = nameHash(name);
+    const pal = botPalettes()[h % 12];
+    const fur = pal[0], light = pal[1], line = pal[2];
+    const ears = (h >>> 4) % 5;
+    const eyes = (h >>> 8) % 5;
+    const mouth = (h >>> 12) % 5;
+    const extra = (h >>> 16) % 4;
+    const gid = 'bfg' + (++botPfpSeq);
+    let s = '<g class="bot-bob">';
+    s += '<defs><radialGradient id="' + gid + '" cx="35%" cy="30%" r="75%">'
+      + '<stop offset="0%" stop-color="' + light + '"/>'
+      + '<stop offset="100%" stop-color="' + fur + '"/>'
+      + '</radialGradient></defs>';
+    if (ears === 0) {
+      s += '<ellipse cx="16" cy="18" rx="9" ry="10" fill="' + fur + '"/>'
+        + '<ellipse cx="48" cy="18" rx="9" ry="10" fill="' + fur + '"/>'
+        + '<ellipse cx="16" cy="19" rx="4.5" ry="5.5" fill="' + light + '"/>'
+        + '<ellipse cx="48" cy="19" rx="4.5" ry="5.5" fill="' + light + '"/>';
+    } else if (ears === 1) {
+      s += '<polygon points="10,28 17,6 29,22" fill="' + fur + '"/>'
+        + '<polygon points="54,28 47,6 35,22" fill="' + fur + '"/>'
+        + '<polygon points="14,26 18,11 26,22" fill="' + light + '"/>'
+        + '<polygon points="50,26 46,11 38,22" fill="' + light + '"/>';
+    } else if (ears === 2) {
+      s += '<ellipse cx="11" cy="34" rx="8" ry="14" fill="' + fur + '" transform="rotate(-28 11 34)"/>'
+        + '<ellipse cx="53" cy="34" rx="8" ry="14" fill="' + fur + '" transform="rotate(28 53 34)"/>'
+        + '<ellipse cx="12" cy="34" rx="4" ry="8" fill="' + light + '" transform="rotate(-28 12 34)"/>'
+        + '<ellipse cx="52" cy="34" rx="4" ry="8" fill="' + light + '" transform="rotate(28 52 34)"/>';
+    } else if (ears === 3) {
+      s += '<line x1="22" y1="20" x2="17" y2="6" stroke="' + line + '" stroke-width="2.2" stroke-linecap="round"/>'
+        + '<line x1="42" y1="20" x2="47" y2="6" stroke="' + line + '" stroke-width="2.2" stroke-linecap="round"/>'
+        + '<circle cx="16" cy="5" r="3.6" fill="' + light + '" stroke="' + line + '" stroke-width="1"/>'
+        + '<circle cx="48" cy="5" r="3.6" fill="' + light + '" stroke="' + line + '" stroke-width="1"/>';
+    } else {
+      s += '<ellipse cx="22" cy="10" rx="6" ry="16" fill="' + fur + '"/>'
+        + '<ellipse cx="42" cy="10" rx="6" ry="16" fill="' + fur + '"/>'
+        + '<ellipse cx="22" cy="11" rx="2.6" ry="10" fill="' + light + '"/>'
+        + '<ellipse cx="42" cy="11" rx="2.6" ry="10" fill="' + light + '"/>';
+    }
+    s += '<circle cx="32" cy="36" r="22" fill="url(#' + gid + ')" stroke="' + line + '" stroke-width="1.1"/>'
+      + '<ellipse cx="24" cy="26" rx="8" ry="5" fill="#fff" opacity="0.28"/>';
+    if (extra === 1 || extra === 2) {
+      s += '<ellipse cx="20" cy="42" rx="5.5" ry="3.2" fill="#ff8fab" opacity="0.5"/>'
+        + '<ellipse cx="44" cy="42" rx="5.5" ry="3.2" fill="#ff8fab" opacity="0.5"/>';
+    }
+    if (extra === 3) {
+      s += '<circle cx="22" cy="40" r="1.1" fill="' + line + '" opacity="0.4"/>'
+        + '<circle cx="26" cy="43" r="0.9" fill="' + line + '" opacity="0.35"/>'
+        + '<circle cx="42" cy="40" r="1.1" fill="' + line + '" opacity="0.4"/>'
+        + '<circle cx="38" cy="43" r="0.9" fill="' + line + '" opacity="0.35"/>';
+    }
+    s += '<g class="bot-eyes">';
+    if (eyes === 0) {
+      s += '<circle cx="24" cy="35" r="3.6" fill="#1a1220"/>'
+        + '<circle cx="40" cy="35" r="3.6" fill="#1a1220"/>'
+        + '<circle cx="25.2" cy="33.8" r="1.15" fill="#fff"/>'
+        + '<circle cx="41.2" cy="33.8" r="1.15" fill="#fff"/>';
+    } else if (eyes === 1) {
+      s += '<ellipse cx="24" cy="35" rx="3.2" ry="4.6" fill="#1a1220"/>'
+        + '<ellipse cx="40" cy="35" rx="3.2" ry="4.6" fill="#1a1220"/>'
+        + '<circle cx="24.8" cy="33.2" r="1" fill="#fff"/>'
+        + '<circle cx="40.8" cy="33.2" r="1" fill="#fff"/>';
+    } else if (eyes === 2) {
+      s += '<path d="M20 36 q4 -6 8 0" fill="none" stroke="#1a1220" stroke-width="2.2" stroke-linecap="round"/>'
+        + '<path d="M36 36 q4 -6 8 0" fill="none" stroke="#1a1220" stroke-width="2.2" stroke-linecap="round"/>';
+    } else if (eyes === 3) {
+      s += '<circle cx="24" cy="35" r="4.4" fill="#1a1220"/>'
+        + '<circle cx="40" cy="35" r="4.4" fill="#1a1220"/>'
+        + '<circle cx="25.4" cy="33.4" r="1.5" fill="#fff"/>'
+        + '<circle cx="41.4" cy="33.4" r="1.5" fill="#fff"/>'
+        + '<circle cx="22.8" cy="36.4" r="0.7" fill="#fff" opacity="0.7"/>';
+    } else {
+      s += '<path d="M20 35 q4 5 8 0" fill="none" stroke="#1a1220" stroke-width="2.2" stroke-linecap="round"/>'
+        + '<circle cx="40" cy="35" r="3.6" fill="#1a1220"/>'
+        + '<circle cx="41.2" cy="33.8" r="1.15" fill="#fff"/>';
+    }
+    s += '</g>';
+    if (mouth === 0) {
+      s += '<path d="M26 46 q6 7 12 0" fill="none" stroke="#1a1220" stroke-width="2" stroke-linecap="round"/>';
+    } else if (mouth === 1) {
+      s += '<ellipse cx="32" cy="48" rx="5" ry="3.4" fill="#3a1a22"/>'
+        + '<ellipse cx="32" cy="49.4" rx="3.2" ry="1.6" fill="#ff6b8a" opacity="0.85"/>';
+    } else if (mouth === 2) {
+      s += '<path d="M25 46 q4 6 6 0 q4 6 6 0" fill="none" stroke="#1a1220" stroke-width="2" stroke-linecap="round"/>';
+    } else if (mouth === 3) {
+      s += '<path d="M26 45 q6 6 12 0" fill="none" stroke="#1a1220" stroke-width="2" stroke-linecap="round"/>'
+        + '<ellipse cx="34" cy="50.5" rx="3.1" ry="3.4" fill="#ff6b8a"/>';
+    } else {
+      s += '<circle cx="32" cy="47.5" r="1.7" fill="#1a1220"/>';
+    }
+    s += '</g>';
+    return s;
+  }
+  function botPfp(name, members) {
+    let names = (members && members.length > 1) ? members.slice(0, 3) : [name || 'Bot'];
+    if (names.length === 1 && String(name || '').indexOf(', ') !== -1) {
+      const parts = String(name).split(', ');
+      const cleaned = [];
+      for (let i = 0; i < parts.length && cleaned.length < 3; i++) {
+        if (parts[i]) cleaned.push(parts[i]);
+      }
+      if (cleaned.length > 1) names = cleaned;
+    }
+    const delay = nameHash(names[0]);
+    let inner = '';
+    if (names.length === 1) inner = botFaceInner(names[0]);
+    else if (names.length === 2) {
+      inner = '<g transform="translate(-2,6) scale(0.7)">' + botFaceInner(names[0]) + '</g>'
+        + '<g transform="translate(20,8) scale(0.7)">' + botFaceInner(names[1]) + '</g>';
+    } else {
+      inner = '<g transform="translate(-4,2) scale(0.58)">' + botFaceInner(names[0]) + '</g>'
+        + '<g transform="translate(22,4) scale(0.58)">' + botFaceInner(names[1]) + '</g>'
+        + '<g transform="translate(8,16) scale(0.62)">' + botFaceInner(names[2]) + '</g>';
+    }
+    return '<svg class="bot-pfp" viewBox="0 0 64 64" aria-hidden="true" style="--bot-delay:-'
+      + ((delay % 20) / 8) + 's;--bot-blink:-' + (((delay >>> 3) % 30) / 10) + 's">'
+      + inner + '</svg>';
+  }
 
   // SEARCH. The input existed with no handler at all — typing in it did
   // nothing, which is worse than not shipping it. Debounced because every
@@ -2937,6 +3428,7 @@ const APP_HTML = `<!doctype html>
     // seeing WHY something matched, not just that it did.
     const hitById = searchHits ? new Map(searchHits.map((h) => [h.id, h])) : null;
     knownThreads = list;
+    if (list[0] && list[0].workspacePort) workspacePort = Number(list[0].workspacePort) || workspacePort;
     if (!activeId && list.length) activeId = list[0].id;
     threadsEl.innerHTML = '';
     const shown = hitById
@@ -2979,11 +3471,11 @@ const APP_HTML = `<!doctype html>
       // to nothing.
       if (t.depth) row.style.paddingLeft = (10 + Math.min(t.depth, 4) * 12) + 'px';
       if (t.depth) row.title = 'spawned under ' + (t.rootName || 'a parent');
-      row.innerHTML = '<div class="tavatar" style="background:' + t.color + '">' + initials(t.name) + '</div>' +
+      row.innerHTML = '<div class="tavatar">' + botPfp(t.name, t.members) + '</div>' +
         '<div class="tmeta"><div class="tname">' + t.name + '</div><div class="tprev">' +
         (hitById && hitById.get(t.id) && hitById.get(t.id).snippet
             ? hitById.get(t.id).snippet
-            : t.awaitingUser ? 'waiting for you' : t.status === 'thinking' ? 'typing…' : (t.preview || '')) + '</div></div>' +
+            : t.awaitingUser ? 'waiting for you' : t.status === 'thinking' ? escapeHtml(t.liveStatus || 'typing…') : (t.preview || '')) + '</div></div>' +
           // awaitingUser WINS over thinking: a thread blocked on an approval is
           // NOT working, and showing a working indicator there is a lie that
           // quietly costs you a subagent nobody knows is stuck.
@@ -3039,12 +3531,14 @@ const APP_HTML = `<!doctype html>
 
   async function loadActiveMessages() {
     if (!activeId) return null;
-    return await (await fetch(API + '/threads/' + activeId)).json();
+    const data = await (await fetch(API + '/threads/' + activeId)).json();
+    if (data && data.workspacePort) workspacePort = Number(data.workspacePort) || workspacePort;
+    return data;
   }
 
   function renderHeader(t) {
     document.getElementById('chatHeaderId').innerHTML =
-      '<div class="tavatar" style="background:' + t.color + '">' + initials(t.name) + '</div>' +
+      '<div class="tavatar">' + botPfp(t.name, t.members) + '</div>' +
       '<div class="hname"><div>' + t.name + '</div><div class="hdir" title="' + escapeHtml(t.dir || '') +
       '">' + escapeHtml(t.dir || '') + ' · type /dir &lt;path&gt; to change</div></div>';
     setModeButtons(t.runMode || 'ask');
@@ -3126,11 +3620,12 @@ const APP_HTML = `<!doctype html>
       w = r.ok ? await r.json() : null;
     } catch (e) { w = null; }
     walletBody.innerHTML = '';
-    if (!w || (!w.solana && !w.evm)) {
+    if (!w || (!w.solana && !w.evm && w.creditUsd == null)) {
       const p = document.createElement('div');
       p.className = 'wnote wempty';
-      p.textContent = 'Could not reach the local openzoo proxy on :8402. It may still be starting — try again in a few seconds.';
+      p.textContent = 'Could not reach the local openzoo proxy on :8402. It may still be starting — try again in a few seconds. You can still subscribe with a card below.';
       walletBody.appendChild(p);
+      renderSubLane(w && w.subscription ? w.subscription : null);
       return;
     }
     if (w.creditUsd != null && w.creditUsd !== '') {
@@ -3144,7 +3639,17 @@ const APP_HTML = `<!doctype html>
     }
     if (w.solana) walletBody.appendChild(walletRow('Solana', w.solana));
     if (w.evm) walletBody.appendChild(walletRow('Base / RH', w.evm));
-    if (w.balances) {
+    if (Array.isArray(w.holdings) && w.holdings.length) {
+      const b = document.createElement('div');
+      b.className = 'wbal';
+      b.textContent = w.holdings.filter((h) => h.chain === 'solana' || Number(h.ui) > 0).map((h) => {
+        const qty = (h.ui) + ' ' + h.symbol + (h.chain && h.chain !== 'solana' ? ' (' + h.chain + ')' : '');
+        if (h.usd == null || !isFinite(Number(h.usd))) return qty;
+        const n = Number(h.usd);
+        return qty + '  ($' + (n >= 0.01 || n === 0 ? n.toFixed(2) : n.toFixed(4)) + ')';
+      }).join('\\n');
+      walletBody.appendChild(b);
+    } else if (w.balances) {
       const b = document.createElement('div');
       b.className = 'wbal';
       b.textContent = w.balances;
@@ -3154,29 +3659,193 @@ const APP_HTML = `<!doctype html>
     note.className = 'wnote';
     // funded === false is the genuinely-empty case. Undefined means the proxy
     // did not say, and guessing "empty" there would send someone to top up a
-    // wallet that is fine.
-    note.textContent = w.funded === false
-      ? 'This wallet is EMPTY — calls will fail with HTTP 402 until you fund the addresses above. ' + (w.funding || '')
-      : (w.funding || '');
-    if (w.funded === false) note.classList.add('wempty');
+    // wallet that is fine. A live subscription is the other pay lane — do not
+    // nag an empty wallet as fatal when calls already skip x402.
+    const subOn = w.subscription && w.subscription.active;
+    note.textContent = subOn
+      ? ('Wallet is optional while a subscription is active. ' + (w.funding || ''))
+      : (w.funded === false
+        ? 'This wallet is EMPTY — wallet/x402 calls will fail with HTTP 402 until you fund the addresses above, or subscribe with a card below. ' + (w.funding || '')
+        : (w.funding || ''));
+    if (w.funded === false && !subOn) note.classList.add('wempty');
     if (note.textContent.trim()) walletBody.appendChild(note);
+    renderSubLane(w.subscription || null);
+  }
+  var subPollTimer = null;
+  var subBuying = null;
+  function setSubNote(text, empty) {
+    const el = document.getElementById('subNote');
+    if (!el) return;
+    el.textContent = text || '';
+    el.className = empty ? 'wnote wempty' : 'wnote';
+  }
+  function renderSubLane(sub) {
+    const status = document.getElementById('subStatus');
+    const forget = document.getElementById('subForgetBtn');
+    if (status) {
+      status.innerHTML = '';
+      if (sub && sub.active) {
+        const p = document.createElement('div');
+        p.className = 'wsubon';
+        p.textContent = sub.label || (sub.tierName || 'Subscription') + ' · no x402';
+        status.appendChild(p);
+      }
+    }
+    if (forget) forget.hidden = !(sub && sub.active);
+    loadSubTiers();
+  }
+  async function loadSubTiers() {
+    const box = document.getElementById('subTiers');
+    if (!box) return;
+    let body = null;
+    try {
+      const r = await fetch(API + '/billing/tiers');
+      body = r.ok ? await r.json() : null;
+    } catch (e) { body = null; }
+    box.innerHTML = '';
+    const tiers = body && body.ok && Array.isArray(body.tiers) ? body.tiers : [];
+    if (!tiers.length) {
+      const p = document.createElement('div');
+      p.className = 'wnote wempty';
+      p.textContent = 'Could not load live plans from zoo.openzoo.fun — try again, or use the full subscriptions page.';
+      box.appendChild(p);
+      return;
+    }
+    tiers.forEach(function (t) {
+      const art = document.createElement('div');
+      art.className = 'wtier' + (t.id === 'pro' ? ' hot' : '');
+      art.setAttribute('data-tier', t.id);
+      const tag = document.createElement('div');
+      tag.className = 'wtag';
+      tag.textContent = t.id === 'pro' ? 'Most teams want this' : '';
+      const name = document.createElement('div');
+      name.className = 'wtn';
+      name.textContent = t.name || t.id;
+      const price = document.createElement('div');
+      price.className = 'wtp';
+      price.textContent = '$' + ((Number(t.monthlyCents) || 0) / 100).toFixed(0) + '/mo';
+      const share = document.createElement('div');
+      share.className = 'wts';
+      share.textContent = (t.savingsSharePct != null ? t.savingsSharePct : '?') + '% savings share';
+      const blurb = document.createElement('div');
+      blurb.className = 'wtb';
+      blurb.textContent = t.blurb || '';
+      const btn = document.createElement('button');
+      btn.type = 'button';
+      btn.textContent = subBuying === t.id ? 'Opening checkout…' : ('Get ' + (t.name || t.id));
+      btn.disabled = subBuying != null;
+      btn.addEventListener('click', function () { buyTier(t.id); });
+      art.append(tag, name, price, share, blurb, btn);
+      box.appendChild(art);
+    });
+  }
+  function openSystemBrowser(url) {
+    // Electron's setWindowOpenHandler routes target=_blank to shell.openExternal.
+    // Never load Stripe inside this window.
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }
+  function stopSubPoll() {
+    if (subPollTimer) { clearInterval(subPollTimer); subPollTimer = null; }
+  }
+  function startSubPoll(sessionId) {
+    stopSubPoll();
+    var tries = 0;
+    async function tick() {
+      tries += 1;
+      try {
+        const r = await fetch(API + '/billing/key?session=' + encodeURIComponent(sessionId));
+        const j = r.ok ? await r.json() : null;
+        if (j && j.saved) {
+          stopSubPoll();
+          setSubNote('Subscription key saved · no x402');
+          await openWallet();
+          return;
+        }
+        if (j && j.pending) setSubNote('Waiting for Stripe to confirm…');
+        else if (j && j.error && j.error !== 'session required') setSubNote(j.error, true);
+      } catch (e) { /* keep polling */ }
+      if (tries >= 60) {
+        stopSubPoll();
+        setSubNote('Still waiting on Stripe — paste the key from the success page if you have it.');
+      }
+    }
+    subPollTimer = setInterval(tick, 2000);
+    tick();
+  }
+  async function buyTier(tier) {
+    subBuying = tier;
+    setSubNote('');
+    loadSubTiers();
+    try {
+      const r = await fetch(API + '/billing/checkout', {
+        method: 'POST', headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ tier: tier }),
+      });
+      const j = await r.json();
+      if (!j || !j.ok || !j.url) throw new Error((j && j.error) || 'checkout failed');
+      openSystemBrowser(j.url);
+      setSubNote('Checkout opened in your system browser. This window will pick up the key when Stripe confirms.');
+      if (j.sessionId) startSubPoll(j.sessionId);
+    } catch (e) {
+      setSubNote(e.message || String(e), true);
+    }
+    subBuying = null;
+    loadSubTiers();
+  }
+  async function savePastedSub() {
+    const inp = document.getElementById('subKeyInp');
+    const paste = inp ? inp.value.trim() : '';
+    if (!paste) { setSubNote('Paste a key or the billing/done URL.', true); return; }
+    try {
+      const r = await fetch(API + '/billing/key', {
+        method: 'POST', headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ paste: paste }),
+      });
+      const j = await r.json();
+      if (j && j.pending && j.session) {
+        setSubNote('Waiting for Stripe to confirm…');
+        startSubPoll(j.session);
+        return;
+      }
+      if (!j || !j.saved) throw new Error((j && j.error) || 'could not save key');
+      if (inp) inp.value = '';
+      setSubNote('Subscription key saved · no x402');
+      await openWallet();
+    } catch (e) {
+      setSubNote(e.message || String(e), true);
+    }
+  }
+  async function forgetSub() {
+    try {
+      await fetch(API + '/billing/key', { method: 'DELETE' });
+    } catch (e) { /* still refresh */ }
+    setSubNote('Subscription key removed. Wallet/x402 is the pay method again.');
+    await openWallet();
   }
   document.getElementById('walletBtn').addEventListener('click', openWallet);
-  // First launch: if the burner is empty, open the wallet once so they see
-  // addresses they can copy — and whose wallet this is. localStorage so a
-  // funded session or a dismiss does not keep popping it.
+  const subKeyBtn = document.getElementById('subKeyBtn');
+  if (subKeyBtn) subKeyBtn.addEventListener('click', savePastedSub);
+  const subForgetBtn = document.getElementById('subForgetBtn');
+  if (subForgetBtn) subForgetBtn.addEventListener('click', forgetSub);
+  const subKeyInp = document.getElementById('subKeyInp');
+  if (subKeyInp) subKeyInp.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter') { e.preventDefault(); savePastedSub(); }
+  });
+  // First launch: if the burner is empty AND there is no subscription, open
+  // the wallet once so they see addresses — and the card lane. localStorage
+  // so a funded session, a saved key, or a dismiss does not keep popping it.
   (async function maybeOpenWalletOnce() {
     if (localStorage.getItem('openzoo.wallet.seen')) return;
     for (let i = 0; i < 8; i++) {
       try {
         const r = await fetch(API + '/wallet');
         const w = r.ok ? await r.json() : null;
-        if (!w || (!w.solana && !w.evm)) {
+        if (!w || (!w.solana && !w.evm && !(w.subscription && w.subscription.active))) {
           await new Promise((res) => setTimeout(res, 400));
           continue;
         }
         localStorage.setItem('openzoo.wallet.seen', '1');
-        if (w.funded === false) await openWallet();
+        if (w.funded === false && !(w.subscription && w.subscription.active)) await openWallet();
         return;
       } catch (e) {
         await new Promise((res) => setTimeout(res, 400));
@@ -3217,6 +3886,121 @@ const APP_HTML = `<!doctype html>
   document.getElementById('modeAuto').addEventListener('click', () => setMode('auto'));
 
   function escapeHtml(s) { return s.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c])); }
+  function stripThinkTags(s) {
+    s = String(s == null ? '' : s);
+    s = s.replace(/<think(?:ing)?\\b[^>]*>[\\s\\S]*?<\\/think(?:ing)?>/gi, '');
+    s = s.replace(/<think(?:ing)?\\b[^>]*>[\\s\\S]*$/i, '');
+    s = s.replace(/<\\/think(?:ing)?>/gi, '');
+    return s.replace(/^\\n+|\\n+$/g, '').trim();
+  }
+  function clientWorkspaceUrl(rel) {
+    if (!workspacePort || !activeId) return '';
+    rel = String(rel || '').replace(/^\\/+/, '');
+    return 'http://localhost:' + workspacePort + '/' + activeId + '/' + rel;
+  }
+  function relFromDiskPath(p) {
+    p = String(p || '');
+    if (p.indexOf('file://') === 0) p = decodeURIComponent(p.slice(7));
+    const t = knownThreads.find(function (x) { return x.id === activeId; });
+    const dir = (t && t.dir) || '';
+    if (dir && (p === dir || p.indexOf(dir + '/') === 0)) {
+      return p.slice(dir.length).replace(/^\\/+/, '');
+    }
+    const marker = '/grokui-workspace/';
+    const i = p.indexOf(marker);
+    if (i >= 0) return p.slice(i + marker.length);
+    const base = p.split('/').pop() || '';
+    return /\\.(html?|HTML?)$/.test(base) ? base : '';
+  }
+  function servedHrefForPath(p) {
+    p = String(p || '');
+    const t = knownThreads.find(function (x) { return x.id === activeId; });
+    const dir = (t && t.dir) || '';
+    if (dir && p === dir) return clientWorkspaceUrl('');
+    if (/\\.(html?|HTML?)$/.test(p) || p.indexOf('grokui-workspace') >= 0 || (dir && p.indexOf(dir) === 0)) {
+      return clientWorkspaceUrl(relFromDiskPath(p));
+    }
+    return '';
+  }
+  // Turn "Wrote foo.html" and /Users/.../foo.html into the live localhost URL
+  // the workspace server already exposes — never a file:// Electron blocks.
+  function linkWorkspacePaths(o) {
+    o = o.replace(/\\b(Wrote|Edited)\\s+([^\\n<]+?)\\s+\\(/g, function (m, verb, file) {
+      const f = file.trim();
+      if (!/\\.(html?|HTML?)$/.test(f)) return m;
+      const url = clientWorkspaceUrl(f);
+      if (!url) return m;
+      return verb + ' <a href="' + url + '" target="_blank" rel="noopener">' + f + '</a> (';
+    });
+    o = o.replace(/\\b(MULTIEDIT)\\s+([^\\s:<]+\\.(?:html?|HTML?))/g, function (m, verb, file) {
+      const url = clientWorkspaceUrl(file);
+      if (!url) return m;
+      return verb + ' <a href="' + url + '" target="_blank" rel="noopener">' + file + '</a>';
+    });
+    o = o.replace(/file:\\/\\/([^\\s<)]+)/g, function (m, raw) {
+      return servedHrefForPath(decodeURIComponent(raw)) || m;
+    });
+    o = o.replace(/(^|[\\s(])((?:\\/Users\\/|\\/home\\/|\\/opt\\/|\\/workspace\\/|\\/tmp\\/|\\/var\\/|~\\/)[^\\s<)]+)/g, function (m, pre, raw) {
+      const punct = /[.,;:]+$/.exec(raw);
+      const p = punct ? raw.slice(0, -punct[0].length) : raw;
+      const href = servedHrefForPath(p);
+      if (!href) return m;
+      return pre + '<a href="' + href + '" target="_blank" rel="noopener">' + p + '</a>' + (punct ? punct[0] : '');
+    });
+    return o;
+  }
+  function htmlPreviewUrl(text) {
+    const s = String(text || '');
+    let m = /https?:\\/\\/localhost:\\d+\\/\\S+\\.(?:html?|HTML?)/.exec(s);
+    if (m) return m[0].replace(/[.,;)]+$/, '');
+    m = /(?:Preview:|Serving at)\\s+(https?:\\/\\/localhost:\\d+\\/\\S+)/.exec(s);
+    if (m) {
+      const u = m[1].replace(/[.,;)]+$/, '');
+      if (/\\.(html?|HTML?)/.test(u) || /\\/[0-9a-fA-F-]{36}\\/?$/.test(u)) return u;
+    }
+    m = /\\b(?:Wrote|Edited|MULTIEDIT)\\s+([^\\n]+?)\\s*(?:\\(|:)/.exec(s);
+    if (m && /\\.(html?|HTML?)$/.test(m[1].trim())) return clientWorkspaceUrl(m[1].trim());
+    m = /(?:\\/Users\\/|\\/home\\/|\\/workspace\\/)\\S+\\.(?:html?|HTML?)/.exec(s);
+    if (m) return servedHrefForPath(m[0].replace(/[.,;)]+$/, '')) || '';
+    return '';
+  }
+  function htmlPreviewKey(text, url) {
+    const bytes = /\\((\\d+)\\s+bytes/.exec(text) || /->\\s+(\\d+)\\s+bytes/.exec(text);
+    return url + '#' + (bytes ? bytes[1] : '0');
+  }
+  let parkedPreviews = {};
+  function parkPreviews() {
+    const parked = {};
+    const nodes = log.querySelectorAll('.html-preview-wrap');
+    for (let i = 0; i < nodes.length; i++) {
+      const el = nodes[i];
+      const k = el.getAttribute('data-preview');
+      if (k) parked[k] = el;
+      el.remove();
+    }
+    return parked;
+  }
+  function previewFrame(url, key) {
+    const existing = parkedPreviews[key];
+    if (existing) { delete parkedPreviews[key]; return existing; }
+    const wrap = document.createElement('div');
+    wrap.className = 'html-preview-wrap';
+    wrap.setAttribute('data-preview', key);
+    const open = document.createElement('a');
+    open.className = 'html-preview-open';
+    open.href = url;
+    open.target = '_blank';
+    open.rel = 'noopener';
+    open.textContent = 'open';
+    const frame = document.createElement('iframe');
+    frame.className = 'html-preview';
+    frame.src = url;
+    frame.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-pointer-lock allow-forms');
+    frame.title = 'preview';
+    wrap.appendChild(open);
+    wrap.appendChild(frame);
+    return wrap;
+  }
   // Inline span-level markdown. Runs AFTER escapeHtml, so every tag below is
   // one we created — model output can never inject its own.
   function mdInline(s) {
@@ -3225,6 +4009,7 @@ const APP_HTML = `<!doctype html>
     o = o.replace(/\\*\\*([^*]+)\\*\\*/g, '<strong>$1</strong>');
     o = o.replace(/(^|[^*])\\*([^*\\n]+)\\*/g, '$1<em>$2</em>');
     o = o.replace(/\\[([^\\]]+)\\]\\((https?:[^)\\s]+)\\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+    o = linkWorkspacePaths(o);
     // bare URLs, but only at a boundary — inside href="..." the preceding
     // char is a quote, so links we just built are left alone
     o = o.replace(/(^|[\\s(])(https?:\\/\\/[^\\s<)]+)/g, '$1<a href="$2" target="_blank" rel="noopener">$2</a>');
@@ -3491,11 +4276,12 @@ const APP_HTML = `<!doctype html>
 
   let lastSpeaker = null;
   function addRow(who, text, color, name, run, images) {
+    if (who === 'bot') text = stripThinkTags(text);
     const speakerKey = who + '|' + name;
     if (who === 'bot' && speakerKey !== lastSpeaker) {
       const hdr = document.createElement('div');
       hdr.className = 'hdr';
-      hdr.innerHTML = '<span class="avatar" style="background:' + color + '">' + initials(name) + '</span><span>' + name + '</span>';
+      hdr.innerHTML = '<span class="avatar">' + botPfp(name) + '</span><span>' + name + '</span>';
       log.appendChild(hdr);
     }
     lastSpeaker = speakerKey;
@@ -3562,6 +4348,10 @@ const APP_HTML = `<!doctype html>
       }
       const textEl = document.createElement('div');
       textEl.innerHTML = renderMentions(text);
+      if (who === 'bot') {
+        const preview = htmlPreviewUrl(text);
+        if (preview) textEl.appendChild(previewFrame(preview, htmlPreviewKey(text, preview)));
+      }
       bubble.appendChild(textEl);
       row.appendChild(bubble);
       // Copy the message SOURCE, not rendered HTML — markdown, code fences and
@@ -3582,6 +4372,7 @@ const APP_HTML = `<!doctype html>
     log.appendChild(row);
   }
 
+  let lastRenderKey = '';
   async function render() {
     const t = knownThreads.find((x) => x.id === activeId);
     if (!t) return;
@@ -3589,9 +4380,18 @@ const APP_HTML = `<!doctype html>
     inp.placeholder = 'Message ' + t.name;
     const full = await loadActiveMessages();
     if (!full || full.id !== activeId) return;
+    const renderKey = String(workspacePort) + '|' + full.id + '|' + full.status + '|' + (full.history || []).map(function (h) {
+      return [h.who, h.text, h.runStatus, h.runOutput, (h.images || []).join(',')].join('|#');
+    }).join('||');
+    if (renderKey === lastRenderKey) {
+      if (streamBuf) paintStream();
+      return;
+    }
+    lastRenderKey = renderKey;
     // only re-pin to bottom if the reader was already there — otherwise a
     // background poll (tick() runs every 1.2s) yanks them back mid-scroll
     const wasNearBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 80;
+    parkedPreviews = parkPreviews();
     log.innerHTML = '';
     lastSpeaker = null;
     for (const h of full.history) {
@@ -3599,11 +4399,12 @@ const APP_HTML = `<!doctype html>
         h.runId ? { id: h.runId, status: h.runStatus, output: h.runOutput } : undefined, h.images);
     }
     if (full.status === 'thinking') {
+      if (full.liveStatus) streamStatus = full.liveStatus;
       addRow('bot', streamBuf || '…', t.color, t.name);
       // Tag the live bubble so deltas can repaint just this node instead of
       // re-rendering (and re-fetching) the whole thread on every token.
       const b = log.querySelector('.row:last-child .bubble');
-      if (b) b.id = 'streamBubble';
+      if (b) { b.id = 'streamBubble'; paintStream(); }
     }
     if (wasNearBottom) log.scrollTop = log.scrollHeight;
   }
@@ -3612,13 +4413,28 @@ const APP_HTML = `<!doctype html>
   // The server has always been able to stream; /drive just never asked for it,
   // so a turn showed "…" for its whole duration and then arrived in one lump.
   let streamBuf = '';
+  let streamStatus = '';
   let es = null, esId = null;
+  function liveBubbleHtml() {
+    if (streamBuf) {
+      const trail = streamStatus && /^(RUN|READ|WRITE|EDIT|SPAWN|SEND|GLOB|GREP|MCP|FETCH|TODO|SERVE|PING|PEEK|MULTIEDIT|NOTEBOOK):/i.test(streamStatus)
+        ? '<span class="ttrail">' + escapeHtml(streamStatus) + '</span>' : '';
+      return escapeHtml(stripThinkTags(streamBuf)) + trail;
+    }
+    const dots = '<span class="dots"><span></span><span></span><span></span></span>';
+    const st = streamStatus ? '<span class="tstatus">' + escapeHtml(streamStatus) + '</span>' : '';
+    return dots + (st ? ' ' + st : '');
+  }
   function paintStream() {
     const b = document.getElementById('streamBubble');
     if (!b) { render(); return; }
-    // textContent, not markdown: the partial text is frequently mid-fence or
-    // mid-link, and half-parsed markdown flickers. The final render formats it.
-    b.textContent = streamBuf || '…';
+    // Deltas stay as text; a silent wait paints dots + one mutating status
+    // line so a 20–40s pay/model wait is obviously alive.
+    if (streamBuf && !(streamStatus && /^(RUN|READ|WRITE|EDIT|SPAWN|SEND|GLOB|GREP|MCP|FETCH|TODO|SERVE|PING|PEEK|MULTIEDIT|NOTEBOOK):/i.test(streamStatus))) {
+      b.textContent = streamBuf;
+    } else {
+      b.innerHTML = liveBubbleHtml();
+    }
     if (log.scrollHeight - log.scrollTop - log.clientHeight < 140) log.scrollTop = log.scrollHeight;
   }
   function connectStream(id) {
@@ -3626,13 +4442,15 @@ const APP_HTML = `<!doctype html>
     if (es) es.close();
     esId = id;
     streamBuf = '';
+    streamStatus = '';
     es = new EventSource('/stream/' + id);   // EventSource reconnects on its own
     es.onmessage = (e) => {
       let ev;
       try { ev = JSON.parse(e.data); } catch { return; }
-      if (ev.type === 'start') { streamBuf = ''; paintStream(); }
+      if (ev.type === 'start') { streamBuf = ''; streamStatus = ev.detail || 'waiting on model…'; paintStream(); }
+      else if (ev.type === 'status') { streamStatus = ev.detail || streamStatus; paintStream(); }
       else if (ev.type === 'delta') { streamBuf += ev.delta || ''; paintStream(); }
-      else if (ev.type === 'final' || ev.type === 'run-pending') { streamBuf = ''; render(); }
+      else if (ev.type === 'final' || ev.type === 'run-pending') { streamBuf = ''; streamStatus = ''; render(); }
     };
     es.onerror = () => { /* EventSource retries; the 1.2s poll is the backstop */ };
   }
@@ -3828,7 +4646,7 @@ const APP_HTML = `<!doctype html>
     composeList.innerHTML = '';
     const createRow = document.createElement('div');
     createRow.className = 'crow';
-    createRow.innerHTML = '<div class="tavatar" style="background:#3a3a3c;width:28px;height:28px;border-radius:8px;font-size:15px">+</div>' +
+    createRow.innerHTML = '<div class="tavatar tavatar-sm tavatar-plus">+</div>' +
       '<div>Create new Bot' + (q ? ': ' + escapeHtml(composeInp.value.trim()) : '') + '</div>' +
       '<div class="kbd"><kbd>⌘</kbd><kbd>1</kbd></div>';
     createRow.addEventListener('click', async () => {
@@ -3843,7 +4661,7 @@ const APP_HTML = `<!doctype html>
     candidates.slice(0, 8).forEach((t, i) => {
       const row = document.createElement('div');
       row.className = 'crow';
-      row.innerHTML = '<div class="tavatar" style="background:' + t.color + ';width:28px;height:28px;border-radius:8px;font-size:11px">' + initials(t.name) + '</div>' +
+      row.innerHTML = '<div class="tavatar tavatar-sm">' + botPfp(t.name) + '</div>' +
         '<div>' + escapeHtml(t.name) + '</div><div class="kbd"><kbd>⌘</kbd><kbd>' + (i + 2) + '</kbd></div>';
       row.addEventListener('click', () => addChip(t));
       composeList.appendChild(row);
@@ -3951,6 +4769,16 @@ const APP_HTML = `<!doctype html>
       const you = await (await fetch(API + '/hud-summary')).json();
       const creditEl = document.getElementById('hCredit');
       if (creditEl) creditEl.textContent = (you.creditUsd == null) ? '—' : usd(Number(you.creditUsd) || 0);
+      const subRow = document.getElementById('hSubRow');
+      const subEl = document.getElementById('hSub');
+      if (subRow && subEl) {
+        if (you.subscription && you.subscription.active) {
+          subRow.hidden = false;
+          subEl.textContent = you.subscription.label || you.subscription.tierName || 'Subscription key · no x402';
+        } else {
+          subRow.hidden = true;
+        }
+      }
       const spent = Number(you.spentUsd) || 0;
       const cogs = Number(you.cogsUsd) || 0;
       const direct = Number(you.directUsd) || 0;
@@ -4020,15 +4848,118 @@ const server = http.createServer((req, res) => {
       try { w = await (await fetch(`${PROXY}/wallet`)).json(); }
       catch { /* proxy not up yet — say so rather than render an empty modal */ }
       try {
-        const { creditBalance } = await import('./info.js');
         w.creditUsd = await creditBalance();
       } catch { /* leave credit off if the gateway is down */ }
+      // Subscription is local (~/.openzoo/subscription.json). Merge it here so
+      // an older :8402 that does not yet know about Stripe still shows the lane.
+      w.subscription = subscriptionPublicView();
       res.writeHead(200, { 'content-type': 'application/json' });
       res.end(JSON.stringify(w));
     })();
     return;
   }
 
+  // Live Stripe plans — never a stale hardcoded $9/$29/$99. Same origin so
+  // the renderer does not have to talk to zoo.openzoo.fun itself.
+  if (req.method === 'GET' && req.url === '/billing/tiers') {
+    (async () => {
+      try {
+        const body = await billingTiers();
+        res.writeHead(200, { 'content-type': 'application/json' });
+        res.end(JSON.stringify(body));
+      } catch (e) {
+        res.writeHead(502, { 'content-type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: e.message }));
+      }
+    })();
+    return;
+  }
+
+  if (req.method === 'POST' && req.url === '/billing/checkout') {
+    const chunks = [];
+    req.on('data', (d) => chunks.push(d));
+    req.on('end', async () => {
+      let tier = '';
+      try { tier = JSON.parse(Buffer.concat(chunks).toString('utf8') || '{}').tier || ''; }
+      catch { /* ignore */ }
+      try {
+        const body = await billingCheckout(tier);
+        res.writeHead(200, { 'content-type': 'application/json' });
+        res.end(JSON.stringify(body));
+      } catch (e) {
+        res.writeHead(502, { 'content-type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: e.message }));
+      }
+    });
+    return;
+  }
+
+  // GET ?session= polls the same endpoint the public /billing/done page uses.
+  // On a key, persist it locally and return a public view — never the secret
+  // (this UI can sit on a public box URL).
+  if (req.method === 'GET' && (req.url || '').startsWith('/billing/key')) {
+    (async () => {
+      const q = new URL(req.url, 'http://x').searchParams;
+      const session = q.get('session') || q.get('session_id') || '';
+      try {
+        const body = await fetchBillingKey(session);
+        res.writeHead(200, { 'content-type': 'application/json' });
+        res.end(JSON.stringify(ingestBillingKeyResponse(body, {
+          sessionId: session,
+          tier: q.get('tier') || null,
+        })));
+      } catch (e) {
+        res.writeHead(502, { 'content-type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: e.message }));
+      }
+    })();
+    return;
+  }
+
+  if (req.method === 'POST' && req.url === '/billing/key') {
+    const chunks = [];
+    req.on('data', (d) => chunks.push(d));
+    req.on('end', async () => {
+      let paste = '';
+      let tier = '';
+      try {
+        const j = JSON.parse(Buffer.concat(chunks).toString('utf8') || '{}');
+        paste = j.paste || j.key || '';
+        tier = j.tier || '';
+      } catch { /* ignore */ }
+      const parsed = parseSubscriptionPaste(paste);
+      if (parsed.error) {
+        res.writeHead(400, { 'content-type': 'application/json' });
+        res.end(JSON.stringify({ ok: false, error: parsed.error }));
+        return;
+      }
+      if (parsed.session) {
+        try {
+          const body = await fetchBillingKey(parsed.session);
+          const out = ingestBillingKeyResponse(body, { sessionId: parsed.session, tier });
+          if (out.pending) out.session = parsed.session;
+          res.writeHead(200, { 'content-type': 'application/json' });
+          res.end(JSON.stringify(out));
+        } catch (e) {
+          res.writeHead(502, { 'content-type': 'application/json' });
+          res.end(JSON.stringify({ ok: false, error: e.message }));
+        }
+        return;
+      }
+      saveSubscription({ key: parsed.key, tier: tier || null });
+      res.writeHead(200, { 'content-type': 'application/json' });
+      res.end(JSON.stringify({ ok: true, saved: true, ...subscriptionPublicView() }));
+    });
+    return;
+  }
+
+  if (req.method === 'DELETE' && req.url === '/billing/key') {
+    clearSubscription();
+    res.writeHead(200, { 'content-type': 'application/json' });
+    res.end(JSON.stringify({ ok: true, saved: false, ...subscriptionPublicView() }));
+    return;
+  }
+
   // Restart grokui in place — and ACTUALLY PICK UP THE NEW BUILD.
   //
   // Exiting is the restart: on a production box, box-server's ensureOz() poll
@@ -4078,13 +5009,13 @@ const server = http.createServer((req, res) => {
 
   if (req.method === 'GET' && req.url === '/hud-summary') {
     (async () => {
-      let you = { spentUsd: 0, cogsUsd: 0, directUsd: 0, paidCalls: 0, creditUsd: null };
+      let you = { spentUsd: 0, cogsUsd: 0, directUsd: 0, paidCalls: 0, creditUsd: null, chainUsd: null };
       try { you = { ...you, ...(await (await fetch('http://127.0.0.1:8402/v1/session')).json()) }; }
       catch { /* local proxy not running — HUD shows zeros rather than guessing */ }
       try {
-        const { creditBalance } = await import('./info.js');
         you.creditUsd = await creditBalance();
       } catch { /* credit is advisory */ }
+      you.subscription = subscriptionPublicView();
       res.writeHead(200, { 'content-type': 'application/json' });
       res.end(JSON.stringify(you));
     })();
@@ -4165,7 +5096,11 @@ const server = http.createServer((req, res) => {
   if (req.method === 'GET' && req.url.startsWith('/threads/')) {
     const t = threads.get(req.url.split('/')[2]);
     res.writeHead(200, { 'content-type': 'application/json' });
-    res.end(t ? JSON.stringify({ id: t.id, history: t.history, status: t.status }) : '{}');
+    res.end(t ? JSON.stringify({
+      id: t.id, history: t.history, status: t.status,
+      liveStatus: t.liveStatus || '',
+      workspacePort: workspacePort || 0, dir: t.dir || WORKSPACE_DIR,
+    }) : '{}');
     return;
   }
   if (req.method === 'DELETE' && req.url.startsWith('/threads/')) {
@@ -4298,3 +5233,8 @@ const server = http.createServer((req, res) => {
 });
 
 server.listen(PORT, BIND, () => console.log(`[grokui] http://${BIND === '0.0.0.0' ? 'localhost' : BIND}:${PORT}`));
+
+export {
+  tryDirective, ensureWorkspacePort, isPreviewableRel, previewAck, workspaceFileUrl,
+  parseRun, looksLikeMcpAsBash, stripThinkTags, safeResolveIn, inDir, listDir,
+};