openzoo 0.48.89 → 0.48.94

package/lib/grokui.mjs

@@ -14,6 +14,12 @@ 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
@@ -28,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
@@ -45,13 +54,48 @@ 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' };
@@ -177,10 +221,12 @@ subtasks), you may instead reply with EXACTLY one line, no prose, using one of:
                                                      independent agent and give it a task
   SEND: <name> | <message>                          message an agent thread that already
                                                      exists (yours or one you spawned)
-  PING: <name>                                       one-line status: still working, or
-                                                       its last result
+  PING: <name>                                       wake that agent to take a turn now
+                                                       (* / all / everyone = the whole project).
+                                                       You get back "pinged, working" — that is
+                                                       an ack, not the child's result
   PEEK: <name>                                       a fuller look — its last few messages,
-                                                       not just the latest one
+                                                       not just the latest one. Read-only.
 You are given the result before your next line, so none of these block you — check back
 later if it's still working.
 
@@ -381,6 +427,18 @@ function loadThreads() {
         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;
@@ -444,7 +502,7 @@ spawn/delegate/create agents AND no other bot has already done it this round, re
 EXACTLY one line, no prose, using one of:
   SPAWN: <short name> | <task for the new agent>   create a new thread with its own agent
   SEND: <name> | <message>                          message an existing agent thread
-  PING: <name>                                       one-line status, or its last result
+  PING: <name>                                       wake that agent (* / all = the project)
   PEEK: <name>                                       a fuller look at its last few messages
 
 You ALSO have real (sandboxed) filesystem access, scoped to THIS group's own directory —
@@ -605,6 +663,32 @@ const NUDGE = 'That reply announced work instead of doing it — no directive li
 const AUTO_CONTINUE = 'AUTO is still on — do not stop and do not ask the user to type continue. '
   + 'Emit the next directive now (RUN:/SPAWN:/SEND:/READ:/WRITE:/GLOB:/FETCH:/MCP:/SERVE:), '
   + 'or DONE: if the job is actually finished.';
+// PING used to be a read: last-line status, no turn. Idle children stayed idle
+// while the parent treated the dump as evidence they had acted. A ping is a
+// wake — the same harness continue AUTO already uses, unless a custom message
+// was given. Thinking threads are left alone; pendingRun stays on the human.
+let runTurnOverride = null;
+function setRunTurnForTest(fn) {
+  runTurnOverride = typeof fn === 'function' ? fn : null;
+}
+function kickTurn(threadId, userText, onEvent, images) {
+  return (runTurnOverride || runTurn)(threadId, userText, onEvent, images);
+}
+function pingWakeText(extra) {
+  const msg = String(extra || '').trim();
+  // A restated spawn brief is not a nudge. MEASURED live: existing-SPAWN
+  // wrapped children in childKickoff({fresh:false}) → "CONTEXT REFRESH —
+  // you already exist" and they thought, then refused to redo the job.
+  if (!msg || /CONTEXT REFRESH|--- your specific job ---|ROOT ASK —/.test(msg)) return AUTO_CONTINUE;
+  return msg;
+}
+function pingCanWake(x) {
+  return Boolean(x) && !x.pendingRun && x.status !== 'thinking';
+}
+function wakeOnPing(x, extra) {
+  // Never childKickoff. Ping is a short continue, not a first-day re-brief.
+  kickTurn(x.id, pingWakeText(extra)).catch(() => {});
+}
 // Ceiling on subagents per thread. Spawning is fire-and-forget and each child
 // can spawn too, so without a count it is unbounded — MEASURED as 15+ threads
 // all named tetris-contract, every one of them a live agent making paid calls.
@@ -721,6 +805,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
@@ -747,10 +846,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.
   //
@@ -782,12 +879,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
@@ -844,7 +955,7 @@ const SLASH_COMMANDS = [
   { name: '/memory', args: '[text|clear]', help: 'facts injected into every turn' },
   { name: '/sessions', args: '', help: 'list all threads' },
   { name: '/all', args: '<message>', help: 'send a message to every bot in this project' },
-  { name: '/ping', args: '', help: 'status of every bot in this project' },
+  { name: '/ping', args: '', help: 'wake idle bots below you to take a turn now' },
   { name: '/cron', args: '<mins> | <message>', help: 'repeat a message on a timer' },
   { name: '/crons', args: '', help: 'list timers  (/cron del <id> removes one)' },
   { name: '/dir', args: '<path>', help: 'set this thread’s working directory' },
@@ -954,7 +1065,8 @@ async function handleSlash(task, t) {
       + '  SPAWN: <name> | <task>              a NEW subagent (names are unique —\n'
       + '                                      spawning an existing one sends to it)\n'
       + '  SEND: <name> | <msg>                more work for an EXISTING subagent\n'
-      + '  PING / PEEK                         reach or inspect another bot\n\n'
+      + '  PING: <name>                        wake that bot (* wakes the project)\n'
+      + '  PEEK: <name>                        read-only look at another bot\n\n'
       + 'READ, LS, GLOB, GREP, FETCH, PEEK and MCP run CONCURRENTLY when several\n'
       + 'appear in one reply — four files cost one round trip, not four.';
   }
@@ -1127,19 +1239,26 @@ async function handleSlash(task, t) {
     return `Sent down your branch to ${crew.length} bot(s): ${crew.map((x) => x.name).join(', ')}`;
   }
 
-  // Read the room without spending anything: who is working, who is blocked on
-  // an approval, what each said last.
+  // Wake the room. Used to be a free last-line dump — idle children stayed
+  // idle, and a parent reading "kid: <old reply>" thought they had acted.
+  // Empty extra is a nudge (AUTO_CONTINUE), not a cancel. Thinking stays
+  // thinking; pendingRun stays on the human. Same branch scope as /all.
   if (cmd === 'ping') {
-    // Same scoping as /all: your branch, not the whole project.
     const crew = subtreeOf(t.id, true);
     if (crew.length < 2) return 'You have no subagents yet.';
     return crew.map((x) => {
       const mark = x.id === t.id ? ' (here)' : '';
-      const last = x.history[x.history.length - 1];
-      return x.pendingRun ? `  ${x.name}${mark}: BLOCKED — waiting for your approval`
-        : x.status === 'thinking' ? `  ${x.name}${mark}: working`
-        : last ? `  ${x.name}${mark}: ${String(last.text).replace(/\s+/g, ' ').slice(0, 90)}`
-        : `  ${x.name}${mark}: nothing yet`;
+      if (x.id === t.id) {
+        const last = x.history[x.history.length - 1];
+        return x.pendingRun ? `  ${x.name}${mark}: BLOCKED — waiting for your approval`
+          : x.status === 'thinking' ? `  ${x.name}${mark}: working`
+          : last ? `  ${x.name}${mark}: ${String(last.text).replace(/\s+/g, ' ').slice(0, 90)}`
+          : `  ${x.name}${mark}: nothing yet`;
+      }
+      if (x.pendingRun) return `  ${x.name}${mark}: BLOCKED — waiting for your approval`;
+      if (x.status === 'thinking') return `  ${x.name}${mark}: working`;
+      wakeOnPing(x, arg);
+      return `  ${x.name}${mark}: pinged, working`;
     }).join('\n');
   }
 
@@ -1228,7 +1347,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()) {
@@ -1626,6 +1748,14 @@ async function tryDirective(reply, originId, onEvent) {
   // 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)];
@@ -1673,14 +1803,15 @@ async function tryDirective(reply, originId, onEvent) {
     const notes = [];
     for (const { name, task } of parsed) {
       const existing = findByName(name);
-      if (existing) { notes.push(`${name} already exists — sending it the task.`); made.push({ t: existing, task, fresh: false }); continue; }
+      if (existing) { notes.push(`${name} already exists — woke it to keep working.`); made.push({ t: existing, task, fresh: false }); continue; }
       const siblings = [...threads.values()].filter((x) => x.parent === originId).length;
       if (siblings >= SPAWN_MAX_CHILDREN) { notes.push(`Not spawning "${name}": already at ${SPAWN_MAX_CHILDREN} subagents.`); continue; }
       made.push({ t: newThread(name, originId), task, fresh: true });
     }
     // Every thread now exists, so spawnPosition sees the COMPLETE cohort.
     for (const { t: sub, task, fresh } of made) {
-      runTurn(sub.id, childKickoff(parent, sub.name, task, { fresh })).catch(() => {});
+      if (fresh) runTurn(sub.id, childKickoff(parent, sub.name, task, { fresh })).catch(() => {});
+      else wakeOnPing(sub);
     }
     const fresh = made.filter((m) => m.fresh).map((m) => m.t.name);
     return [fresh.length ? `Spawned ${fresh.length} together (they can each see the full crew): ${fresh.join(', ')}` : '', ...notes]
@@ -1699,8 +1830,11 @@ async function tryDirective(reply, originId, onEvent) {
     // is what SEND already does.
     const existing = findByName(name);
     if (existing) {
-      runTurn(existing.id, childKickoff(threads.get(originId), existing.name, task, { fresh: false })).catch(() => {});
-      return `${name} already exists — sent it the task instead of spawning a duplicate.`;
+      // Repeat SPAWN is a wake, not a CONTEXT REFRESH. childKickoff({fresh:false})
+      // restates the original job and tells the child it already exists — MEASURED,
+      // the crew flipped to that preview, thought once, and sat.
+      wakeOnPing(existing);
+      return `${name} already exists — woke it to keep working.`;
     }
     // Storm guard. Fire-and-forget spawning is unbounded by construction: each
     // child can spawn, and nothing above it is counting.
@@ -1767,27 +1901,29 @@ async function tryDirective(reply, originId, onEvent) {
   const ping = pingAll.length === 1 ? [null, pingAll[0]] : null;
   if (ping) {
     const name = ping[1].trim();
-    // PING: * (or 'all' / 'project') reaches EVERY bot in this project.
+    // PING: * (or 'all' / 'project') WAKES every other bot in this project.
     // Coordinating a spawn tree by naming siblings one at a time is a chore
     // the parent should not have to do, and it cannot know who else exists.
+    // The return is an ack ("pinged, working"), not a last-line dump that
+    // lets the parent think the child already acted.
     if (/^(\*|all|project|everyone)$/i.test(name)) {
       const me = threads.get(originId);
       const root = me ? rootOf(me).rootId : null;
       const crew = [...threads.values()].filter((x) => x.id !== originId && rootOf(x).rootId === root);
       if (!crew.length) return 'No other bots in this project yet.';
       return crew.map((x) => {
-        const last = x.history[x.history.length - 1];
-        return x.pendingRun ? x.name + ': BLOCKED — waiting for approval'
-          : x.status === 'thinking' ? x.name + ': still working'
-          : last ? x.name + ': ' + String(last.text).slice(0, 200)
-          : x.name + ': no reply yet';
+        if (x.pendingRun) return x.name + ': BLOCKED — waiting for approval';
+        if (x.status === 'thinking') return x.name + ': still working';
+        wakeOnPing(x);
+        return x.name + ': pinged, working';
       }).join('\n');
     }
     const target = findByName(name);
-    const last = target?.history[target.history.length - 1];
-    return !target ? `No thread named "${name}".`
-      : target.status === 'thinking' ? `${name} is still working.`
-      : last ? `${name}: ${last.text}` : `${name} hasn't replied yet.`;
+    if (!target) return `No thread named "${name}".`;
+    if (target.pendingRun) return `${name}: BLOCKED — waiting for approval`;
+    if (target.status === 'thinking') return `${name} is still working.`;
+    wakeOnPing(target);
+    return `${name}: pinged, working`;
   }
   const peek = /^[ \t>*-]*PEEK:\s*(.+)/m.exec(reply);
   if (peek) {
@@ -1889,8 +2025,8 @@ async function tryDirective(reply, originId, onEvent) {
   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}/`;
@@ -1915,9 +2051,11 @@ async function tryDirective(reply, originId, onEvent) {
   // 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`;
@@ -1936,7 +2074,12 @@ async function tryDirective(reply, originId, onEvent) {
       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;
@@ -2006,7 +2149,14 @@ async function tryDirective(reply, originId, onEvent) {
 
   const serve = /^[ \t>*-]*SERVE:\s*(.*)$/m.exec(reply);
   if (serve) {
-    const rel = serve[1].trim();
+    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.`;
@@ -2194,6 +2344,7 @@ async function runTurn(threadId, userText, onEvent, images) {
           : (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;
@@ -2314,6 +2465,7 @@ async function runTurn(threadId, userText, onEvent, images) {
     reply = `error: ${e.message}`;
   }
   if (!stillMine()) return;
+  reply = stripThinkTags(reply);
   t.messages.push({ role: 'assistant', content: reply });
   const runCmd = parseRun(reply);
   if (runCmd) {
@@ -2582,6 +2734,9 @@ function threadSummary(t) {
     // 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,
+    // 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 };
 }
 
@@ -2635,8 +2790,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; }
@@ -2651,11 +2820,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; }
@@ -2722,6 +2893,30 @@ const APP_HTML = `<!doctype html>
           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. */
@@ -2768,8 +2963,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
@@ -2968,9 +3163,29 @@ const APP_HTML = `<!doctype html>
   </div>
   <div id="walletOverlay" data-component="wallet-modal">
     <div id="walletBox">
-      <h3>Your wallet</h3>
-      <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>
+      <h3>Pay with a card</h3>
+      <div class="wsub">Pay with a card. Basic, Pro, and Ultra are first. Wallet/x402 is the other option below — it stays; it is not the lead.</div>
+      <div 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 class="wlane" id="x402Lane" data-component="x402-lane">
+        <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>
     </div>
   </div>
   <div id="main">
@@ -3005,13 +3220,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="Pay with a card, or use wallet/x402">pay</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>
@@ -3078,7 +3294,153 @@ const APP_HTML = `<!doctype html>
   let knownThreads = [];
   let workspacePort = 0;
 
-  function initials(name) { return name.slice(0, 2).toUpperCase(); }
+  // 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
@@ -3153,7 +3515,7 @@ 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
@@ -3168,7 +3530,7 @@ const APP_HTML = `<!doctype html>
         // subagents without retyping — and pressing it addressed the WHOLE
         // project, cousins included. Now every thread with descendants gets
         // one, scoped to its own branch.
-        (t.kids ? '<button class="pingall trow-ping" data-testid="ping-all" title="Message all '
+        (t.kids ? '<button class="pingall trow-ping" data-testid="ping-all" title="Wake all '
           + t.kids + ' bot(s) below ' + escapeHtml(t.name) + '">\u21f2 ' + t.kids + '</button>' : '') +
         '<button class="tclose" title="Remove">✕</button>';
       row.addEventListener('click', () => {
@@ -3183,18 +3545,17 @@ const APP_HTML = `<!doctype html>
       if (pingBtn) {
         pingBtn.addEventListener('click', async (e) => {
           e.stopPropagation();
-          const msg = prompt('Send to all ' + t.kids + ' bot(s) below ' + t.name + ':');
-          // Empty is a cancel — sending "" would spend a paid turn on every
-          // bot in the branch for nothing.
-          if (msg === null || !msg.trim()) return;
+          // Default click = wake with the harness continue. window.prompt is
+          // missing or blocked in Electron, so a modal here silently no-op'd
+          // the only UI path that tried to reach the crew. /all still sends
+          // exact text; ping is "poke them to work".
           pingBtn.disabled = true;
           const was = pingBtn.textContent;
           pingBtn.textContent = '…';
           try {
-            // Routed through THIS thread, so /all scopes to its own subtree.
             await fetch(API + '/drive', { method: 'POST', headers: { 'content-type': 'application/json' },
-              body: JSON.stringify({ threadId: t.id, task: '/all ' + msg.trim() }) });
-            pingBtn.textContent = 'sent';
+              body: JSON.stringify({ threadId: t.id, task: '/ping' }) });
+            pingBtn.textContent = 'pinged';
           } catch (err) { pingBtn.textContent = 'failed'; }
           setTimeout(() => { pingBtn.disabled = false; pingBtn.textContent = was; }, 1500);
           await loadThreads();
@@ -3220,7 +3581,7 @@ const APP_HTML = `<!doctype html>
 
   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');
@@ -3305,8 +3666,9 @@ const APP_HTML = `<!doctype html>
     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 above.';
       walletBody.appendChild(p);
+      renderSubLane(w && w.subscription ? w.subscription : null);
       return;
     }
     if (w.creditUsd != null && w.creditUsd !== '') {
@@ -3340,29 +3702,194 @@ 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 at the top. ' + (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 pay modal once so they see card plans first — and burner addresses
+  // below. 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));
@@ -3403,6 +3930,13 @@ 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(/^\\/+/, '');
@@ -3786,11 +4320,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;
@@ -3928,7 +4463,7 @@ const APP_HTML = `<!doctype html>
     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(streamBuf) + trail;
+      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>' : '';
@@ -4155,7 +4690,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 () => {
@@ -4170,7 +4705,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);
@@ -4278,6 +4813,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;
@@ -4349,12 +4894,116 @@ const server = http.createServer((req, res) => {
       try {
         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
@@ -4410,6 +5059,7 @@ const server = http.createServer((req, res) => {
       try {
         you.creditUsd = await creditBalance();
       } catch { /* credit is advisory */ }
+      you.subscription = subscriptionPublicView();
       res.writeHead(200, { 'content-type': 'application/json' });
       res.end(JSON.stringify(you));
     })();
@@ -4628,4 +5278,9 @@ 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 };
+export {
+  tryDirective, ensureWorkspacePort, isPreviewableRel, previewAck, workspaceFileUrl,
+  parseRun, looksLikeMcpAsBash, stripThinkTags, safeResolveIn, inDir, listDir,
+  handleSlash, newThread, setRunTurnForTest, AUTO_CONTINUE, pingWakeText, pingCanWake,
+  childKickoff,
+};