openzoo 0.48.89 → 0.48.92

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' };
@@ -381,6 +425,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;
@@ -721,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
@@ -747,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.
   //
@@ -782,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
@@ -1228,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()) {
@@ -1626,6 +1712,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)];
@@ -1889,8 +1983,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 +2009,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 +2032,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 +2107,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 +2302,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 +2423,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 +2692,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 +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; }
@@ -2651,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; }
@@ -2722,6 +2851,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 +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
@@ -2969,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">
@@ -3005,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>
@@ -3078,7 +3250,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 +3471,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
@@ -3220,7 +3538,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 +3623,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 below.';
       walletBody.appendChild(p);
+      renderSubLane(w && w.subscription ? w.subscription : null);
       return;
     }
     if (w.creditUsd != null && w.creditUsd !== '') {
@@ -3340,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));
@@ -3403,6 +3886,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 +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;
@@ -3928,7 +4419,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 +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 () => {
@@ -4170,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);
@@ -4278,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;
@@ -4349,12 +4850,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 +5015,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 +5234,7 @@ 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,
+};

package/lib/mcp.js

@@ -8,6 +8,7 @@ import { tokenBalance } from './x402.js';
 import { askWithContext, contextCacheDisabled, BIND_MIN_CHARS } from './hrr.js';
 import { listContexts } from './contexts.js';
 import { withNamespace } from './namespace.js';
+import { subscriptionPublicView } from './subscription.js';
 
 const pkg = JSON.parse(readFileSync(new URL('../package.json', import.meta.url), 'utf8'));
 // The model zoo_ask uses when the caller does not name one. Opus 5 by default:
@@ -383,6 +384,7 @@ export function buildMcpServer() {
       fundHint: 'send a few cents of a listed asset to the address for that rail — Solana assets to solanaAddress, Base assets to evmAddress. The shim converts to whatever the 402 quotes, at payment time. Force a rail with OPENZOO_RAIL=solana|base|robinhood.',
       balances,
       receipts: client.receipts.map((r) => ({ at: r.at, line: r.line })),
+      subscription: subscriptionPublicView(),
     });
   });
 

package/lib/pay.js

@@ -13,6 +13,7 @@ import { withNamespace } from './namespace.js';
 import {
   resolvePool, poolState, depositForShares, buildWrapInstructions, sendWrap,
 } from './wrap.js';
+import { applySubscriptionHeaders, loadSubscription, stripAuthorization } from './subscription.js';
 
 export class QuoteTooHighError extends Error {
   constructor(billedUsd, quote) {
@@ -333,8 +334,15 @@ export class PayClient {
     // Contexts are tenanted by this namespace server-side — a request without
     // it cannot see corpora this wallet bound.
     init = { ...init, headers: withNamespace(init.headers || {}) };
+    // Subscription key · no x402. A stored Stripe key is a bearer on the zoo
+    // API (same as the public /billing/done snippet). Wallet/x402 stays if
+    // there is no key, or if the gateway still answers 402.
+    const sub = loadSubscription();
+    if (sub?.key) init = { ...init, headers: applySubscriptionHeaders(init.headers, sub) };
     const first = await fetch(url, init);
-    if (first.status !== 402) return { response: first, paid: false };
+    if (first.status !== 402) {
+      return { response: first, paid: false, subscription: Boolean(sub?.key && first.ok) };
+    }
 
     const quote = parse402(await first.json());
     // config.rail (OPENZOO_RAIL) steers every front — proxy, demo, MCP — since
@@ -394,7 +402,7 @@ export class PayClient {
     onStage?.('paying');
     const response = await fetch(url, {
       ...init,
-      headers: { ...(init.headers || {}), 'X-PAYMENT': payment.header },
+      headers: { ...stripAuthorization(init.headers || {}), 'X-PAYMENT': payment.header },
     });
     const settle = decodeSettleHeader(response.headers.get('x-payment-response'))
       || { signature: payment.ownerSignature };

package/lib/proxy.js

@@ -24,6 +24,7 @@ import { anthropicToOpenAI, openAIToAnthropic, streamOpenAIToAnthropic, writeAnt
 import { responsesToChat, chatToResponses, writeResponsesSse } from './responses.js';
 import { loadSessionSpend, saveSessionSpend } from './session.js';
 import { creditBalance, quotedPrices } from './info.js';
+import { subscriptionPublicView } from './subscription.js';
 import { priceHoldings } from './livestatus.js';
 
 const HOP_BY_HOP = new Set([
@@ -891,6 +892,7 @@ export async function startProxy({ silent = false, requireToken = null, sessionM
       res.end(JSON.stringify({
         spentUsd: sessionSpent, cogsUsd: sessionCogs, directUsd: sessionDirect, paidCalls,
         creditUsd, chainUsd: money.chainUsd,
+        subscription: subscriptionPublicView(),
       }));
       return;
     }
@@ -914,6 +916,7 @@ export async function startProxy({ silent = false, requireToken = null, sessionM
         creditUsd,
         chainUsd: money.chainUsd,
         holdings: money.holdings,
+        subscription: subscriptionPublicView(),
       }));
       return;
     }
@@ -1021,7 +1024,9 @@ export async function startProxy({ silent = false, requireToken = null, sessionM
           },
           mcp: `${self.replace(/\/v1$/, '')}/mcp`,
           upstream: config.apiBase,
-          payment: 'x402 per request from the operator\'s local burner wallet — no API key, no account',
+          payment: subscriptionPublicView().active
+            ? 'subscription key � no x402 � wallet/x402 remains the other method'
+            : 'x402 per request from the operator\'s local burner wallet � no API key, no account',
           auth: viaTunnel
             ? 'this public URL requires the oz_… bearer for paid endpoints; /v1/models and /v1/hrr/bind are free'
             : 'localhost is keyless',

package/lib/subscription.js

@@ -0,0 +1,207 @@
+/**
+ * Stripe subscription keys for the zoo API — the other pay lane next to
+ * wallet/x402. The live billing API is zoo.openzoo.fun; this file does not
+ * invent a second backend.
+ *
+ * After checkout the site lands on /billing/done?session=<cs_…> and polls
+ * GET /api/billing/key?session=… until Stripe confirms. That response is how
+ * a desktop client receives the key (no Stripe cookie on Electron). A user
+ * who already subscribed can paste the same key, or that success URL.
+ *
+ * Use: Authorization: Bearer <key> against x402-tokens.fly.dev — no 402
+ * signing. Wallet/x402 stays if no key is stored.
+ */
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+
+export const BILLING_ORIGIN = 'https://zoo.openzoo.fun';
+export const SUBSCRIPTIONS_PAGE = 'https://zoo.openzoo.fun/subscriptions';
+
+export function subscriptionFile(home = os.homedir()) {
+  return process.env.OPENZOO_SUBSCRIPTION_PATH
+    || path.join(home, '.openzoo', 'subscription.json');
+}
+
+function titleCase(id) {
+  const s = String(id || '').trim();
+  if (!s) return '';
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+function asKey(v) {
+  return String(v || '').trim();
+}
+
+/** Persist a subscription key (chmod 600). Never log the value. */
+export function saveSubscription(rec, file = subscriptionFile()) {
+  const key = asKey(rec?.key);
+  if (!key) return null;
+  const payload = {
+    key,
+    tier: rec.tier ? String(rec.tier) : null,
+    tierName: rec.tierName ? String(rec.tierName) : (rec.tier ? titleCase(rec.tier) : null),
+    sessionId: rec.sessionId ? String(rec.sessionId) : null,
+    savedAt: Date.now(),
+  };
+  fs.mkdirSync(path.dirname(file), { recursive: true, mode: 0o700 });
+  const tmp = `${file}.tmp`;
+  fs.writeFileSync(tmp, JSON.stringify(payload), { mode: 0o600 });
+  fs.renameSync(tmp, file);
+  cached = { file, mtime: fs.statSync(file).mtimeMs, data: payload };
+  return payload;
+}
+
+export function clearSubscription(file = subscriptionFile()) {
+  try { fs.unlinkSync(file); } catch { /* already gone */ }
+  if (cached.file === file) cached = { file: '', mtime: 0, data: null };
+}
+
+let cached = { file: '', mtime: 0, data: null };
+
+export function loadSubscription(file = subscriptionFile()) {
+  const envKey = asKey(process.env.OPENZOO_SUBSCRIPTION_KEY);
+  if (envKey) {
+    return {
+      key: envKey,
+      tier: process.env.OPENZOO_SUBSCRIPTION_TIER || null,
+      tierName: process.env.OPENZOO_SUBSCRIPTION_TIER
+        ? titleCase(process.env.OPENZOO_SUBSCRIPTION_TIER)
+        : null,
+      sessionId: null,
+      source: 'env',
+    };
+  }
+  try {
+    const st = fs.statSync(file);
+    if (cached.file === file && cached.mtime === st.mtimeMs && cached.data) return cached.data;
+    const data = JSON.parse(fs.readFileSync(file, 'utf8'));
+    if (!asKey(data?.key)) {
+      cached = { file, mtime: st.mtimeMs, data: null };
+      return null;
+    }
+    const rec = {
+      key: asKey(data.key),
+      tier: data.tier || null,
+      tierName: data.tierName || (data.tier ? titleCase(data.tier) : null),
+      sessionId: data.sessionId || null,
+      source: 'file',
+    };
+    cached = { file, mtime: st.mtimeMs, data: rec };
+    return rec;
+  } catch {
+    return null;
+  }
+}
+
+/** Public HUD/wallet view — never includes the secret. */
+export function subscriptionPublicView(sub = loadSubscription()) {
+  if (!asKey(sub?.key)) return { active: false };
+  const name = String(sub.tierName || titleCase(sub.tier) || '').trim();
+  return {
+    active: true,
+    tier: sub.tier || null,
+    tierName: name || null,
+    label: name ? `${name} · no x402` : 'Subscription key · no x402',
+  };
+}
+
+/**
+ * A paste is either the bearer key itself, or the site's success URL
+ * (`/billing/done?session=cs_…`). session_id is accepted too — Stripe's
+ * default query name — but the live page uses `session`.
+ */
+export function parseSubscriptionPaste(text) {
+  const raw = String(text || '').trim();
+  if (!raw) return { error: 'empty' };
+  let session = '';
+  try {
+    if (/^https?:\/\//i.test(raw) || raw.includes('session=')) {
+      const url = new URL(raw, BILLING_ORIGIN);
+      session = url.searchParams.get('session') || url.searchParams.get('session_id') || '';
+    }
+  } catch { /* not a URL */ }
+  if (!session) {
+    const m = /(?:session_id|session)=([A-Za-z0-9_]+)/.exec(raw);
+    if (m) session = m[1];
+  }
+  if (session) return { session };
+  if (/^https?:\/\//i.test(raw)) return { error: 'no session in URL' };
+  if (raw.length < 8 || /\s/.test(raw)) return { error: 'not a key' };
+  return { key: raw };
+}
+
+export function applySubscriptionHeaders(headers = {}, sub = loadSubscription()) {
+  const key = asKey(sub?.key);
+  if (!key) return headers;
+  return { ...headers, authorization: `Bearer ${key}` };
+}
+
+export function stripAuthorization(headers = {}) {
+  const out = { ...headers };
+  delete out.authorization;
+  delete out.Authorization;
+  return out;
+}
+
+async function billingJson(url, init) {
+  const r = await fetch(url, init);
+  const body = await r.json().catch(() => ({}));
+  return { http: r.status, body };
+}
+
+export async function billingTiers() {
+  const { http, body } = await billingJson(`${BILLING_ORIGIN}/api/billing/tiers`);
+  if (!body?.ok || !Array.isArray(body.tiers)) {
+    throw new Error(body?.error || `tiers HTTP ${http}`);
+  }
+  return body;
+}
+
+export async function billingCheckout(tier) {
+  const id = String(tier || '').trim();
+  if (!id) throw new Error('tier required');
+  const { http, body } = await billingJson(`${BILLING_ORIGIN}/api/billing/checkout`, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ tier: id }),
+  });
+  if (!body?.ok || !body.url) {
+    throw new Error(body?.error || `checkout HTTP ${http}`);
+  }
+  return { ok: true, url: body.url, sessionId: body.sessionId || null, tier: id };
+}
+
+/** Poll the same endpoint the public /billing/done page uses. */
+export async function fetchBillingKey(session) {
+  const sid = String(session || '').trim();
+  if (!sid) return { ok: false, error: 'session required' };
+  const { body } = await billingJson(
+    `${BILLING_ORIGIN}/api/billing/key?session=${encodeURIComponent(sid)}`,
+  );
+  return body && typeof body === 'object' ? body : { ok: false, error: 'empty key response' };
+}
+
+/**
+ * If the live key endpoint returned a key, persist it and return a public
+ * view (the secret stays on disk). Pending/error bodies pass through.
+ */
+export function ingestBillingKeyResponse(body, extra = {}, file = subscriptionFile()) {
+  const key = asKey(body?.key);
+  if (!key) {
+    if (body?.pending) return { ok: true, pending: true, saved: false };
+    return {
+      ok: false,
+      pending: false,
+      saved: false,
+      error: body?.error || 'no key yet',
+    };
+  }
+  const rec = saveSubscription({
+    key,
+    tier: body.tier || extra.tier || null,
+    tierName: body.tierName || body.name || extra.tierName || null,
+    sessionId: extra.sessionId || extra.session || null,
+  }, file);
+  return { ok: true, pending: false, saved: true, ...subscriptionPublicView(rec) };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openzoo",
-  "version": "0.48.89",
+  "version": "0.48.92",
   "description": "Local x402-paying proxy + MCP server for openzoo.fun \u2014 point any OpenAI-compatible harness (Cursor, Claude Code, aider, SDKs) at localhost and it pays per call from a local burner wallet. Solana and Base rails live; Robinhood experimental.",
   "license": "MIT",
   "type": "module",