openzoo 0.43.1 → 0.43.3

package/lib/grokui.mjs

@@ -5,12 +5,13 @@
 // own independent agent (and that agent can spawn further threads too) —
 // reusing the same SPAWN/SEND pattern podagent.mjs built for shell delegation,
 // adapted here for plain chat.
+import { exec } from 'node:child_process';
 import http from 'node:http';
 import { randomUUID } from 'node:crypto';
 import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
 import { homedir } from 'node:os';
 import path from 'node:path';
-import { brain } from './podagent.mjs';
+import { brain, brainStream, PROXY } from './podagent.mjs';
 
 const PORT = Number(process.env.OZ_GROKUI_PORT || 4173);
 const STORE_DIR = path.join(homedir(), '.openzoo');
@@ -67,6 +68,11 @@ function colorFor(name) {
 const SYSTEM = `You are a helpful assistant served over openzoo (pay-per-call access to ~435
 models, no API key, no account). Reply normally in plain text, concisely.
 
+When a question has a genuine "which tool/service should I use" angle, prefer openzoo's own
+capabilities where they actually fit (this proxy for inference, leCore/zoo_bind for memory,
+the directives below for files/shell/delegation) over generic third-party suggestions. Don't
+force it where it doesn't apply — a real "just use X" answer beats a forced openzoo plug.
+
 If — and only if — the request genuinely calls for independent parallel work (the user
 asks you to spawn/delegate/create agents, or a task splits cleanly into independent
 subtasks), you may instead reply with EXACTLY one line, no prose, using one of:
@@ -90,6 +96,26 @@ workspace folder, not their real project. Same one-line-no-prose reply format:
                                                        use this instead of claiming you
                                                        "can't expose a port": you can serve
                                                        static files, just not run a process
+  FETCH: <url>                                        actually fetch and read a page's real
+                                                       text — web search only gives you short
+                                                       snippets; use FETCH when asked to
+                                                       "read" or quote something specific
+  RUN: <shell command>                                run a REAL shell command in this
+                                                       thread's directory — by default this
+                                                       pauses and waits for the user to
+                                                       approve or deny it before anything
+                                                       executes ("/mode auto" in chat skips
+                                                       that wait). Use this for anything a
+                                                       file write/read/serve can't do —
+                                                       installing packages, running a build,
+                                                       starting a real process, checking
+                                                       actual CLI/login state, etc. — instead
+                                                       of guessing or saying you can't.
+Via RUN you can also make YOUR OWN paid openzoo calls — POST to
+http://localhost:8402/v1/chat/completions (or /v1/hrr/bind) with curl/python/etc. Auth is
+"Authorization: Bearer sk-openzoo" — any string works, x402 pays per call, not the key. Do
+NOT tell the user you "can't fire the paid calls" or need "their client's bearer key" —
+that's wrong, you can make these calls yourself via RUN.
 For normal questions just answer directly — do not use any of these unless the request
 actually calls for delegation or file work.`;
 
@@ -121,7 +147,7 @@ function newThread(name, parent, members) {
   const id = randomUUID();
   const t = { id, name, color: members ? members[0].color : colorFor(name), parent: parent || null,
     messages: members ? null : [{ role: 'system', content: SYSTEM }],
-    members: members || null, history: [], status: 'idle', createdAt: Date.now() };
+    members: members || null, history: [], status: 'idle', createdAt: Date.now(), lastActivityAt: Date.now() };
   threads.set(id, t);
   saveThreads();
   return t;
@@ -138,6 +164,9 @@ own take even if brief ("Passed." is fine when you have nothing to add). COORDIN
 another bot already handled or is handling the request (e.g. already spawned the exact
 agent being asked for), do NOT repeat it — just acknowledge, or add something genuinely new.
 
+When a question has a genuine "which tool/service" angle, prefer openzoo's own capabilities
+where they actually fit over generic third-party suggestions — but don't force it.
+
 You can ALSO delegate, same as any other agent here. If — and only if — asked to
 spawn/delegate/create agents AND no other bot has already done it this round, reply with
 EXACTLY one line, no prose, using one of:
@@ -153,6 +182,15 @@ the user sets or changes it with "/dir <path>" in chat. Same format:
   SERVE: <relative path, or blank for the dir root>   get a real http:// URL for it — use
                                                        this instead of saying you can't
                                                        expose a port
+  FETCH: <url>                                        actually fetch and read a page's real
+                                                       text — web search only gives snippets
+  RUN: <shell command>                                run a REAL shell command in this
+                                                       group's shared directory — pauses the
+                                                       WHOLE round for the user's approval
+                                                       before anything executes ("/mode auto"
+                                                       in chat skips that wait). Use this
+                                                       instead of guessing or saying you
+                                                       can't do something real.
 For normal replies just answer directly — do not use any of these unless the request
 actually calls for delegation or file work.` };
 }
@@ -161,10 +199,21 @@ actually calls for delegation or file work.` };
 // (instead of a private per-member log) so each bot sees what the others in
 // the group already said — including earlier replies from THIS round, since
 // runTurn pushes to t.history sequentially, one member at a time.
+// OpenAI-shaped multimodal content: plain string when there's no image,
+// [{type:'text',...}, {type:'image_url',...}] array when there is — mixing
+// the two shapes on a string-only history entry would break providers that
+// expect ONE consistent form per message.
+function contentFor(text, images) {
+  if (!images || !images.length) return text;
+  // an empty text block alongside image_url content gets rejected (400) by
+  // at least one provider path — always give it something
+  return [{ type: 'text', text: text || 'Describe this image.' }, ...images.map((url) => ({ type: 'image_url', image_url: { url } }))];
+}
+
 function buildMemberMessages(t, member) {
   const msgs = [{ role: 'system', content: member.systemPrompt || SYSTEM }];
   for (const h of t.history) {
-    if (h.who === 'user') msgs.push({ role: 'user', content: h.text });
+    if (h.who === 'user') msgs.push({ role: 'user', content: contentFor(h.text, h.images) });
     else if (h.name === member.name) msgs.push({ role: 'assistant', content: h.text });
     else msgs.push({ role: 'user', content: `[${h.name}]: ${h.text}` });
   }
@@ -176,6 +225,40 @@ function newGroupThread(names) {
   return newThread(names.join(', '), null, members);
 }
 
+// Real leCore binding — POST /v1/hrr/bind on the local proxy, same free
+// passthrough the wiki documents. Fire-and-forget after each turn: the next
+// turn's brain()/brainStream() call picks up t.contextId once it lands, via
+// the X-HRR-Context header, so retrieval is real and automatic, not a prompt
+// claim about a mechanism that doesn't exist.
+async function bindThread(t) {
+  const corpus = t.history.map((h) => (h.who === 'user' ? 'you' : (h.name || t.name)) + ': ' + h.text).join('\n');
+  if (!corpus.trim()) return;
+  try {
+    const r = await fetch(`${PROXY}/hrr/bind`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ corpus }),
+    });
+    const j = await r.json().catch(() => ({}));
+    if (j?.context_id) { t.contextId = j.context_id; saveThreads(); }
+  } catch { /* leCore sidecar unreachable — thread still works, just not bound this round */ }
+}
+
+// REAL shell execution, scoped to the thread's own directory. 'ask' mode
+// (default) pauses and waits for an explicit approve/deny over HTTP before
+// anything runs; 'auto' mode (set via "/mode auto" in chat) runs immediately.
+// Either way this is not sandboxed like WRITE/READ — it can do anything the
+// signed-in user's shell can — so 'ask' is the default, not 'auto'.
+function execCommand(command, cwd) {
+  return new Promise((resolve) => {
+    exec(command, { cwd, timeout: 120000, maxBuffer: 10 * 1024 * 1024 }, (err, stdout, stderr) => {
+      let out = (stdout || '') + (stderr ? '\n' + stderr : '');
+      if (err) out += `\n(exit ${err.code ?? 1})`;
+      resolve(out.slice(0, 6000) || '(no output)');
+    });
+  });
+}
+
 function findByName(name) {
   let best = null;
   for (const t of threads.values()) {
@@ -189,7 +272,7 @@ if (!loadThreads()) newThread('openzoo', null);
 // Parses a SPAWN/SEND/PING directive out of a reply, performs its side effect
 // (creating or messaging another thread), and returns the ack text to show in
 // place of the raw directive line — or null if the reply wasn't a directive.
-function tryDirective(reply, originId) {
+async function tryDirective(reply, originId) {
   const spawn = /^SPAWN:\s*([^|]+)\|\s*([\s\S]+)/.exec(reply);
   if (spawn) {
     const name = spawn[1].trim();
@@ -249,13 +332,36 @@ function tryDirective(reply, originId) {
     if (!workspacePort) return 'Workspace server is still starting — try again in a second.';
     return `Serving at http://localhost:${workspacePort}/${originId}/${rel}`;
   }
+  const fetchD = /^FETCH:\s*(\S+)/.exec(reply);
+  if (fetchD) {
+    const url = fetchD[1].trim();
+    try {
+      const r = await fetch(url, { headers: { 'user-agent': 'Mozilla/5.0 (openzoo grokui)' } });
+      const ct = r.headers.get('content-type') || '';
+      let text = await r.text();
+      if (ct.includes('html')) {
+        text = text
+          .replace(/<script[\s\S]*?<\/script>/gi, '').replace(/<style[\s\S]*?<\/style>/gi, '')
+          .replace(/<[^>]+>/g, ' ').replace(/&nbsp;/g, ' ').replace(/&amp;/g, '&')
+          .replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/\s+/g, ' ').trim();
+      }
+      return `${url} (${r.status}):\n${text.slice(0, 8000)}${text.length > 8000 ? '\n…(truncated)' : ''}`;
+    } catch (e) { return `Couldn't fetch ${url}: ${e.message}`; }
+  }
   return null;
 }
 
-async function runTurn(threadId, userText) {
+// onEvent (optional) gets live progress for whoever's actually watching this
+// call: {type:'start',name,color} when a bot begins its turn, {type:'delta',
+// name,color,delta} per streamed token, {type:'final',name,color,text} once
+// its full reply (or directive ack) is settled. Background turns — a SPAWNed
+// subagent nobody's looking at yet — run with onEvent omitted and just use
+// the plain non-streaming brain(), which is cheaper when nothing renders it.
+async function runTurn(threadId, userText, onEvent, images) {
   const t = threads.get(threadId);
   if (!t) return;
-  t.history.push({ who: 'user', text: userText });
+  t.history.push(images && images.length ? { who: 'user', text: userText, images } : { who: 'user', text: userText });
+  t.lastActivityAt = Date.now();
   if (t.members) {
     t.status = 'thinking';
     // sequential, not parallel: each member's context is rebuilt from
@@ -264,33 +370,92 @@ async function runTurn(threadId, userText) {
     for (const m of t.members) {
       const msgs = buildMemberMessages(t, m);
       let r = '';
-      try { r = (await brain(msgs)).trim(); } catch (e) { r = `error: ${e.message}`; }
-      const ack = tryDirective(r, t.id);
-      t.history.push({ who: 'bot', text: ack ?? (r || '(no response)'), name: m.name, color: m.color });
+      onEvent?.({ type: 'start', name: m.name, color: m.color });
+      try {
+        r = onEvent
+          ? (await brainStream(msgs, (delta) => onEvent({ type: 'delta', name: m.name, color: m.color, delta }), t.contextId)).trim()
+          : (await brain(msgs, t.contextId)).trim();
+      } catch (e) { r = `error: ${e.message}`; }
+      const runMatch = /^RUN:\s*([\s\S]+)/.exec(r);
+      if (runMatch) {
+        const command = runMatch[1].trim();
+        if (t.runMode === 'auto') {
+          const output = await execCommand(command, dirFor(t.id));
+          const shown = `$ ${command}\n${output}`;
+          t.history.push({ who: 'bot', text: shown, name: m.name, color: m.color });
+          onEvent?.({ type: 'final', name: m.name, color: m.color, text: shown });
+          // this member's turn is done; the round continues to the next member
+          continue;
+        }
+        const runId = randomUUID();
+        t.pendingRun = { runId, command, cwd: dirFor(t.id) };
+        t.history.push({ who: 'bot', text: command, runId, runStatus: 'pending', name: m.name, color: m.color });
+        onEvent?.({ type: 'run-pending', runId, command, name: m.name, color: m.color });
+        // pauses the WHOLE round here — the rest of the group gets their turn
+        // on the round that runs after the user approves/denies
+        t.status = 'idle';
+        t.lastActivityAt = Date.now();
+        saveThreads();
+        return;
+      }
+      const ack = await tryDirective(r, t.id);
+      const finalText = ack ?? (r || '(no response)');
+      t.history.push({ who: 'bot', text: finalText, name: m.name, color: m.color });
+      onEvent?.({ type: 'final', name: m.name, color: m.color, text: finalText });
     }
     t.status = 'idle';
     saveThreads();
+    bindThread(t).catch(() => {});
     return;
   }
-  t.messages.push({ role: 'user', content: userText });
+  t.messages.push({ role: 'user', content: contentFor(userText, images) });
   t.status = 'thinking';
   let reply = '';
+  onEvent?.({ type: 'start', name: t.name, color: t.color });
   try {
-    reply = (await brain(t.messages)).trim();
+    reply = onEvent
+      ? (await brainStream(t.messages, (delta) => onEvent({ type: 'delta', name: t.name, color: t.color, delta }), t.contextId)).trim()
+      : (await brain(t.messages, t.contextId)).trim();
   } catch (e) {
     reply = `error: ${e.message}`;
   }
   t.messages.push({ role: 'assistant', content: reply });
-  const ack = tryDirective(reply, t.id);
-  t.history.push({ who: 'bot', text: ack ?? (reply || '(no response)') });
+  const runMatch = /^RUN:\s*([\s\S]+)/.exec(reply);
+  if (runMatch) {
+    const command = runMatch[1].trim();
+    if (t.runMode === 'auto') {
+      const output = await execCommand(command, dirFor(t.id));
+      const shown = `$ ${command}\n${output}`;
+      t.messages.push({ role: 'user', content: `output:\n${output}` });
+      t.history.push({ who: 'bot', text: shown });
+      onEvent?.({ type: 'final', name: t.name, color: t.color, text: shown });
+    } else {
+      const runId = randomUUID();
+      t.pendingRun = { runId, command, cwd: dirFor(t.id) };
+      t.history.push({ who: 'bot', text: command, runId, runStatus: 'pending' });
+      onEvent?.({ type: 'run-pending', runId, command, name: t.name, color: t.color });
+    }
+    t.status = 'idle';
+    t.lastActivityAt = Date.now();
+    saveThreads();
+    return;
+  }
+  const ack = await tryDirective(reply, t.id);
+  const finalText = ack ?? (reply || '(no response)');
+  t.history.push({ who: 'bot', text: finalText });
+  onEvent?.({ type: 'final', name: t.name, color: t.color, text: finalText });
   t.status = 'idle';
+  t.lastActivityAt = Date.now();
   saveThreads();
+  bindThread(t).catch(() => {});
 }
 
 function threadSummary(t) {
   const last = t.history[t.history.length - 1];
   return { id: t.id, name: t.name, color: t.color, parent: t.parent, status: t.status,
-    preview: last ? (last.who === 'user' ? last.text : last.text).slice(0, 60) : '', createdAt: t.createdAt };
+    preview: last ? (last.who === 'user' ? last.text : last.text).slice(0, 60) : '',
+    createdAt: t.createdAt, lastActivityAt: t.lastActivityAt || t.createdAt,
+    dir: t.dir || WORKSPACE_DIR };
 }
 
 const APP_HTML = `<!doctype html>
@@ -316,6 +481,11 @@ const APP_HTML = `<!doctype html>
           margin: 0 6px 2px; }
   .trow:hover { background: #17171a; }
   .trow.active { background: #1c1c1e; }
+  .tclose { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent;
+            color: #8e8e93; display: none; align-items: center; justify-content: center; cursor: pointer;
+            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; }
   .tmeta { min-width: 0; flex: 1; }
@@ -326,6 +496,9 @@ const APP_HTML = `<!doctype html>
   #chatHeader { padding: 14px 20px; border-bottom: 1px solid #1c1c1e; display: flex; align-items: center; gap: 10px;
                 font-weight: 600; }
   #chatHeader .tavatar { width: 26px; height: 26px; border-radius: 7px; font-size: 11px; flex: 0 0 26px; }
+  .hname { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+  .hdir { font-weight: 400; font-size: 11px; color: #8e8e93; white-space: nowrap; overflow: hidden;
+          text-overflow: ellipsis; max-width: 420px; }
   #hudBtn { margin-left: auto; }
   #chatHeaderId { display: flex; align-items: center; gap: 10px; }
   #hud { position: fixed; top: 40px; right: 14px; width: 250px; background: rgba(14,14,17,.94);
@@ -338,7 +511,9 @@ const APP_HTML = `<!doctype html>
   #hud .hlime { color: #b8f240; }
   #hud .hember { color: #f28c4d; }
   #hud .hfoot { border-top: 1px solid #333340; margin-top: 10px; padding-top: 8px; color: #999aa8; font-size: 10px; }
-  #log { flex: 1; overflow-y: auto; padding: 20px 24px 12px; display: flex; flex-direction: column; gap: 6px; }
+  #sidebar, #main { -webkit-app-region: no-drag; }
+  #log { flex: 1; overflow-y: auto; padding: 20px 24px 12px; display: flex; flex-direction: column; gap: 6px;
+         -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;
@@ -346,7 +521,22 @@ const APP_HTML = `<!doctype html>
   .row { display: flex; max-width: 78%; margin: 2px 0; }
   .row.user { align-self: flex-end; }
   .row.bot { align-self: flex-start; }
-  .bubble { padding: 11px 16px; border-radius: 20px; white-space: pre-wrap; word-break: break-word; }
+  .bubble { padding: 11px 16px; border-radius: 20px; white-space: pre-wrap; word-break: break-word;
+            -webkit-user-select: text; user-select: text; cursor: text; }
+  .bubble a { color: #6ab0ff; text-decoration: underline; cursor: pointer; }
+  .bubble-images { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
+  .bubble-images img { max-width: 160px; max-height: 160px; border-radius: 12px; display: block; }
+  .runcard { background: #1c1c1e; border: 1px solid #333; border-radius: 14px; padding: 12px 14px; max-width: 100%; }
+  .runcmd { font-family: Menlo, monospace; font-size: 12.5px; color: #ececec; white-space: pre-wrap;
+            word-break: break-word; margin-bottom: 8px; }
+  .runactions { display: flex; gap: 8px; }
+  .runbtn { border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; }
+  .runbtn.approve { background: #34c759; color: #000; }
+  .runbtn.deny { background: #3a3a3c; color: #ececec; }
+  .runbtn:disabled { opacity: .5; cursor: default; }
+  .runstatus { font-size: 12px; color: #8e8e93; margin-bottom: 6px; }
+  .runoutput { font-family: Menlo, monospace; font-size: 11.5px; color: #b8b8b8; white-space: pre-wrap;
+               word-break: break-word; max-height: 240px; overflow-y: auto; margin: 0; }
   .row.user .bubble { background: #57575c; }
   .row.bot .bubble { background: #262626; color: #ececec; }
   .row.bot.pending .bubble { color: #8e8e93; }
@@ -376,6 +566,11 @@ const APP_HTML = `<!doctype html>
   .achip { display: flex; align-items: center; gap: 6px; background: #2c2c2e; color: #ececec; border-radius: 10px;
            padding: 4px 8px; font-size: 12px; }
   .achip .ax { cursor: pointer; color: #8e8e93; }
+  .achip.aimg { padding: 4px; position: relative; }
+  .achip.aimg img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
+  .achip.aimg .ax { position: absolute; top: -4px; right: -4px; background: #000; border-radius: 50%;
+                     width: 16px; height: 16px; display: flex; align-items: center; justify-content: center;
+                     font-size: 10px; }
   #inp { flex: 1; background: transparent; border: none; color: #ececec; font: inherit;
          padding: 6px 0; min-width: 0; }
   #inp::placeholder { color: #8e8e93; }
@@ -439,16 +634,12 @@ const APP_HTML = `<!doctype html>
       <button class="icon-btn" id="hudBtn">◎</button>
     </div>
     <div id="hud">
-      <div class="htitle">ALL OF OPENZOO · TODAY</div>
-      <div class="hrow"><span>paid (metered)</span><span id="hPaid">—</span></div>
-      <div class="hrow"><span>our cost (cogs)</span><span id="hCogs">—</span></div>
-      <div class="hrow"><span>margin</span><span id="hMargin" class="hlime">—</span></div>
-      <div class="hrow"><span>direct would be</span><span id="hDirect" class="hember">—</span></div>
-      <div class="hrow"><span>leCore saving</span><span id="hSaved" class="hlime">—</span></div>
+      <div class="htitle">YOUR WALLET · THIS SESSION</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>
+      <div class="hrow"><span>margin</span><span id="hYouMargin" class="hlime">—</span></div>
+      <div class="hrow"><span>direct would be</span><span id="hYouDirect" class="hember">—</span></div>
       <div class="hfoot" id="hFoot">loading…</div>
-      <div class="htitle" style="margin-top:10px">YOUR WALLET · THIS SESSION</div>
-      <div class="hrow"><span>you've spent</span><span id="hYouSpent">—</span></div>
-      <div class="hrow"><span>your paid calls</span><span id="hYouCalls">—</span></div>
     </div>
     <div id="log"></div>
     <div id="bar">
@@ -498,8 +689,16 @@ const APP_HTML = `<!doctype html>
       row.innerHTML = '<div class="tavatar" style="background:' + t.color + '">' + initials(t.name) + '</div>' +
         '<div class="tmeta"><div class="tname">' + t.name + '</div><div class="tprev">' +
         (t.status === 'thinking' ? 'typing…' : (t.preview || '')) + '</div></div>' +
-        (t.status === 'thinking' ? '<div class="tdot"></div>' : '');
+        (t.status === 'thinking' ? '<div class="tdot"></div>' : '') +
+        '<button class="tclose" title="Remove">✕</button>';
       row.addEventListener('click', () => { activeId = t.id; render(); });
+      row.querySelector('.tclose').addEventListener('click', async (e) => {
+        e.stopPropagation();
+        await fetch('/threads/' + t.id, { method: 'DELETE' });
+        if (activeId === t.id) activeId = null;
+        await loadThreads();
+        if (activeId) render();
+      });
       threadsEl.appendChild(row);
     }
   }
@@ -511,14 +710,21 @@ const APP_HTML = `<!doctype html>
 
   function renderHeader(t) {
     document.getElementById('chatHeaderId').innerHTML =
-      '<div class="tavatar" style="background:' + t.color + '">' + initials(t.name) + '</div><div>' + t.name + '</div>';
+      '<div class="tavatar" style="background:' + t.color + '">' + initials(t.name) + '</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>';
   }
 
   function escapeHtml(s) { return s.replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c])); }
-  function renderMentions(text) { return escapeHtml(text).replace(/@(\\w+)/g, '<span class="mention">\u{1F465} $1</span>'); }
+  function renderMentions(text) {
+    let out = escapeHtml(text);
+    out = out.replace(/(https?:\\/\\/[^\\s<]+)/g, '<a href="$1" target="_blank" rel="noopener">$1</a>');
+    out = out.replace(/@(\\w+)/g, '<span class="mention">\u{1F465} $1</span>');
+    return out;
+  }
 
   let lastSpeaker = null;
-  function addRow(who, text, color, name) {
+  function addRow(who, text, color, name, run, images) {
     const speakerKey = who + '|' + name;
     if (who === 'bot' && speakerKey !== lastSpeaker) {
       const hdr = document.createElement('div');
@@ -529,10 +735,66 @@ const APP_HTML = `<!doctype html>
     lastSpeaker = speakerKey;
     const row = document.createElement('div');
     row.className = 'row ' + who;
-    const bubble = document.createElement('div');
-    bubble.className = 'bubble';
-    bubble.innerHTML = renderMentions(text);
-    row.appendChild(bubble);
+    if (run) {
+      const card = document.createElement('div');
+      card.className = 'runcard';
+      const cmdEl = document.createElement('div');
+      cmdEl.className = 'runcmd';
+      cmdEl.textContent = '$ ' + text;
+      card.appendChild(cmdEl);
+      if (run.status === 'pending') {
+        const actions = document.createElement('div');
+        actions.className = 'runactions';
+        const approve = document.createElement('button');
+        approve.className = 'runbtn approve';
+        approve.textContent = 'Approve';
+        const deny = document.createElement('button');
+        deny.className = 'runbtn deny';
+        deny.textContent = 'Deny';
+        approve.addEventListener('click', async () => {
+          approve.disabled = true; deny.disabled = true;
+          await fetch('/threads/' + activeId + '/run/' + run.id + '/approve', { method: 'POST' });
+          render();
+        });
+        deny.addEventListener('click', async () => {
+          approve.disabled = true; deny.disabled = true;
+          await fetch('/threads/' + activeId + '/run/' + run.id + '/deny', { method: 'POST' });
+          render();
+        });
+        actions.appendChild(approve);
+        actions.appendChild(deny);
+        card.appendChild(actions);
+      } else {
+        const status = document.createElement('div');
+        status.className = 'runstatus';
+        status.textContent = run.status === 'running' ? 'Running…' : run.status === 'denied' ? 'Denied' : 'Done';
+        card.appendChild(status);
+        if (run.output) {
+          const out = document.createElement('pre');
+          out.className = 'runoutput';
+          out.textContent = run.output;
+          card.appendChild(out);
+        }
+      }
+      row.appendChild(card);
+    } else {
+      const bubble = document.createElement('div');
+      bubble.className = 'bubble';
+      if (images && images.length) {
+        const strip = document.createElement('div');
+        strip.className = 'bubble-images';
+        for (const url of images) {
+          const img = document.createElement('img');
+          img.src = url;
+          strip.appendChild(img);
+        }
+        bubble.appendChild(strip);
+      }
+      const textEl = document.createElement('div');
+      textEl.innerHTML = renderMentions(text);
+      bubble.appendChild(textEl);
+      row.appendChild(bubble);
+    }
     log.appendChild(row);
   }
 
@@ -548,12 +810,16 @@ const APP_HTML = `<!doctype html>
     const wasNearBottom = log.scrollHeight - log.scrollTop - log.clientHeight < 80;
     log.innerHTML = '';
     lastSpeaker = null;
-    for (const h of full.history) addRow(h.who, h.text, h.color || t.color, h.name || t.name);
+    for (const h of full.history) {
+      addRow(h.who, h.text, h.color || t.color, h.name || t.name,
+        h.runId ? { id: h.runId, status: h.runStatus, output: h.runOutput } : undefined, h.images);
+    }
     if (full.status === 'thinking') addRow('bot', '…', t.color, t.name);
     if (wasNearBottom) log.scrollTop = log.scrollHeight;
   }
 
   let pendingFiles = [];
+  let pendingImages = [];
   const attachChips = document.getElementById('attachChips');
   function renderAttachChips() {
     attachChips.innerHTML = '';
@@ -564,6 +830,13 @@ const APP_HTML = `<!doctype html>
       chip.querySelector('.ax').addEventListener('click', () => { pendingFiles.splice(i, 1); renderAttachChips(); });
       attachChips.appendChild(chip);
     });
+    pendingImages.forEach((img, i) => {
+      const chip = document.createElement('span');
+      chip.className = 'achip aimg';
+      chip.innerHTML = '<img src="' + img.dataUrl + '"><span class="ax">✕</span>';
+      chip.querySelector('.ax').addEventListener('click', () => { pendingImages.splice(i, 1); renderAttachChips(); });
+      attachChips.appendChild(chip);
+    });
   }
   function readFileAsText(file) {
     return new Promise((resolve) => {
@@ -573,28 +846,54 @@ const APP_HTML = `<!doctype html>
       r.readAsText(file);
     });
   }
+  function readFileAsDataUrl(file) {
+    return new Promise((resolve) => {
+      const r = new FileReader();
+      r.onload = () => resolve(r.result);
+      r.onerror = () => resolve(null);
+      r.readAsDataURL(file);
+    });
+  }
+  async function addPastedImage(file) {
+    const dataUrl = await readFileAsDataUrl(file);
+    if (dataUrl) pendingImages.push({ name: file.name || 'pasted-image', dataUrl });
+    renderAttachChips();
+    send.classList.toggle('show', inp.value.trim().length > 0 || pendingFiles.length > 0 || pendingImages.length > 0);
+  }
+  inp.addEventListener('paste', (e) => {
+    const items = Array.from(e.clipboardData?.items || []);
+    const imageItems = items.filter((it) => it.type && it.type.startsWith('image/'));
+    if (!imageItems.length) return; // let normal text paste through
+    e.preventDefault();
+    for (const it of imageItems) { const f = it.getAsFile(); if (f) addPastedImage(f); }
+  });
 
   async function submit() {
     const task = inp.value.trim();
-    if ((!task && !pendingFiles.length) || !activeId) return;
+    if ((!task && !pendingFiles.length && !pendingImages.length) || !activeId) return;
     inp.value = '';
     send.classList.remove('show');
     let full = task;
+    // an image with no caption still needs SOME text — an empty text block
+    // alongside image_url content gets rejected (400) by at least one path
+    if (!full && pendingImages.length) full = 'Describe this image.';
     for (const f of pendingFiles) {
       full += f.content !== null
         ? '\\n\\n--- attached: ' + f.name + ' ---\\n' + f.content
         : '\\n\\n(attached binary file: ' + f.name + ', ' + f.size + ' bytes — content not readable as text)';
     }
+    const images = pendingImages.map((i) => i.dataUrl);
     pendingFiles = [];
+    pendingImages = [];
     renderAttachChips();
     await fetch('/drive', {
       method: 'POST', headers: { 'content-type': 'application/json' },
-      body: JSON.stringify({ threadId: activeId, task: full }),
+      body: JSON.stringify({ threadId: activeId, task: full, images }),
     });
     render();
   }
 
-  inp.addEventListener('input', () => { send.classList.toggle('show', inp.value.trim().length > 0 || pendingFiles.length > 0); });
+  inp.addEventListener('input', () => { send.classList.toggle('show', inp.value.trim().length > 0 || pendingFiles.length > 0 || pendingImages.length > 0); });
   send.addEventListener('click', submit);
   inp.addEventListener('keydown', (e) => { if (e.key === 'Enter') submit(); });
 
@@ -724,27 +1023,18 @@ const APP_HTML = `<!doctype html>
   async function refreshHud() {
     try {
       // fetched server-side by US (see /hud-summary below) — a renderer fetch
-      // straight to x402-tokens.fly.dev fails as an opaque "Failed to fetch":
-      // no Access-Control-Allow-Origin on that response, so Chromium blocks
-      // reading it even though the request itself succeeds. Our own backend
-      // has no such restriction.
-      const j = await (await fetch('/hud-summary')).json();
-      const t = j.today || {};
-      const matched = Number(t.usdPaidWithCogs) || null;
-      const cogs = Number(t.usdCogs) || null;
-      const direct = Number(t.usdDirect) || null;
-      const margin = (cogs !== null && matched) ? Math.round((matched - cogs) / matched * 100) + '%' : '—';
-      const saved = (direct !== null && matched) ? (direct / matched).toFixed(1) + 'x' : '—';
-      document.getElementById('hPaid').textContent = usd(matched);
-      document.getElementById('hCogs').textContent = usd(cogs);
-      document.getElementById('hMargin').textContent = margin;
-      document.getElementById('hDirect').textContent = usd(direct);
-      document.getElementById('hSaved').textContent = saved;
-      document.getElementById('hFoot').textContent =
-        (t.calls || 0) + ' calls · ' + (t.paid || 0) + ' paid · ' + (t.distinctPayers || 0) + ' payers';
-      const you = j.you;
-      document.getElementById('hYouSpent').textContent = you ? usd(you.spentUsd) : '— (local proxy not reachable)';
-      document.getElementById('hYouCalls').textContent = you ? String(you.paidCalls) : '—';
+      // straight to localhost:8402 would work fine, but routing it through
+      // our own backend keeps one fetch path if that ever needs to change.
+      const you = await (await fetch('/hud-summary')).json();
+      const spent = Number(you.spentUsd) || 0;
+      const cogs = Number(you.cogsUsd) || 0;
+      const direct = Number(you.directUsd) || 0;
+      const margin = spent > 0 ? Math.round((spent - cogs) / spent * 100) + '%' : '—';
+      document.getElementById('hYouSpent').textContent = usd(spent);
+      document.getElementById('hYouCogs').textContent = usd(cogs);
+      document.getElementById('hYouMargin').textContent = margin;
+      document.getElementById('hYouDirect').textContent = usd(direct);
+      document.getElementById('hFoot').textContent = (you.paidCalls || 0) + ' paid calls this session';
     } catch (e) {
       document.getElementById('hFoot').textContent = 'error: ' + e.message;
     }
@@ -767,20 +1057,17 @@ const APP_HTML = `<!doctype html>
 const server = http.createServer((req, res) => {
   if (req.method === 'GET' && req.url === '/hud-summary') {
     (async () => {
-      let today = {};
-      try { today = (await (await fetch('https://x402-tokens.fly.dev/v1/usage/summary')).json()).today || {}; }
-      catch { /* gateway unreachable — HUD shows — for the global rows */ }
-      let you = null;
+      let you = { spentUsd: 0, cogsUsd: 0, directUsd: 0, paidCalls: 0 };
       try { you = await (await fetch('http://127.0.0.1:8402/v1/session')).json(); }
-      catch { /* local proxy not running — HUD says so instead of guessing */ }
+      catch { /* local proxy not running — HUD shows zeros rather than guessing */ }
       res.writeHead(200, { 'content-type': 'application/json' });
-      res.end(JSON.stringify({ today, you }));
+      res.end(JSON.stringify(you));
     })();
     return;
   }
   if (req.method === 'GET' && req.url === '/threads') {
     res.writeHead(200, { 'content-type': 'application/json' });
-    res.end(JSON.stringify([...threads.values()].sort((a, b) => b.createdAt - a.createdAt).map(threadSummary)));
+    res.end(JSON.stringify([...threads.values()].sort((a, b) => b.lastActivityAt - a.lastActivityAt).map(threadSummary)));
     return;
   }
   if (req.method === 'GET' && req.url.startsWith('/threads/')) {
@@ -789,6 +1076,47 @@ const server = http.createServer((req, res) => {
     res.end(t ? JSON.stringify({ id: t.id, history: t.history, status: t.status }) : '{}');
     return;
   }
+  if (req.method === 'DELETE' && req.url.startsWith('/threads/')) {
+    threads.delete(req.url.split('/')[2]);
+    saveThreads();
+    res.writeHead(200, { 'content-type': 'application/json' });
+    res.end('{"ok":true}');
+    return;
+  }
+  {
+    const runMatch = /^\/threads\/([^/]+)\/run\/([^/]+)\/(approve|deny)$/.exec(req.url || '');
+    if (req.method === 'POST' && runMatch) {
+      const [, id, runId, action] = runMatch;
+      const t = threads.get(id);
+      const entry = t?.history.find((h) => h.runId === runId && h.runStatus === 'pending');
+      if (!t || !t.pendingRun || t.pendingRun.runId !== runId || !entry) {
+        res.writeHead(404, { 'content-type': 'application/json' });
+        res.end('{"ok":false}');
+        return;
+      }
+      const { command, cwd } = t.pendingRun;
+      delete t.pendingRun;
+      if (action === 'deny') {
+        entry.runStatus = 'denied';
+        saveThreads();
+        res.writeHead(200, { 'content-type': 'application/json' });
+        res.end('{"ok":true}');
+        runTurn(t.id, '(you denied running that command)').catch(() => {});
+        return;
+      }
+      entry.runStatus = 'running';
+      saveThreads();
+      res.writeHead(200, { 'content-type': 'application/json' });
+      res.end('{"ok":true}');
+      execCommand(command, cwd).then((output) => {
+        entry.runStatus = 'done';
+        entry.runOutput = output;
+        saveThreads();
+        runTurn(t.id, `(command output)\n${output}`).catch(() => {});
+      });
+      return;
+    }
+  }
   if (req.method === 'POST' && req.url === '/threads') {
     const chunks = [];
     req.on('data', (d) => chunks.push(d));
@@ -820,10 +1148,11 @@ const server = http.createServer((req, res) => {
     const chunks = [];
     req.on('data', (d) => chunks.push(d));
     req.on('end', async () => {
-      let threadId = '', task = '';
+      let threadId = '', task = '', images = [];
       try {
         const j = JSON.parse(Buffer.concat(chunks).toString('utf8'));
         threadId = j.threadId; task = (j.task || '').toString();
+        images = Array.isArray(j.images) ? j.images.filter((u) => typeof u === 'string') : [];
       } catch { /* ignore */ }
       res.writeHead(200, { 'content-type': 'application/json' });
       res.end(JSON.stringify({ ok: true }));
@@ -845,7 +1174,16 @@ const server = http.createServer((req, res) => {
         saveThreads();
         return;
       }
-      runTurn(threadId, task).catch(() => {});
+      // "/mode auto|ask" toggles whether RUN: commands execute immediately
+      // or wait for an explicit approve/deny — also free/instant, no model call
+      const modeCmd = /^\/mode\s+(auto|ask)\b/.exec(task.trim());
+      if (modeCmd && t) {
+        t.runMode = modeCmd[1];
+        t.history.push({ who: 'bot', text: `Run mode set to ${modeCmd[1]}${modeCmd[1] === 'auto' ? ' — commands execute immediately, no approval.' : ' — commands wait for your approval.'}` });
+        saveThreads();
+        return;
+      }
+      runTurn(threadId, task, undefined, images).catch(() => {});
     });
     return;
   }

package/lib/podagent.mjs

@@ -26,7 +26,7 @@ import { randomUUID } from 'node:crypto';
 const PORTS = (process.env.OZ_AGENT_PORTS || '1337,6080,1340,6081')
   .split(',').map((s) => Number(s.trim())).filter(Boolean);
 const LOG = process.env.OZ_AGENT_LOG || '/var/log/openzoo/agent.jsonl';
-const PROXY = process.env.OZ_PROXY || 'http://127.0.0.1:8402/v1';
+export const PROXY = process.env.OZ_PROXY || 'http://127.0.0.1:8402/v1';
 const MODEL = process.env.OZ_BRAIN_MODEL || 'deepseek/deepseek-v4-pro-0813';
 const MAX_STEPS = Number(process.env.OZ_MAX_STEPS || 10);
 
@@ -179,22 +179,79 @@ function execFrame(command, cwd = '/tmp') {
 
 // ------------------------------------------------------------------- brain --
 
+// deepseek-v4-pro-0813 (the default MODEL) doesn't expose modality info via
+// /v1/models, and it's not something we can verify blind — rather than gamble
+// on a text-only model silently ignoring pasted images, any message with
+// multimodal (image_url) content routes to a model KNOWN to support vision.
+const VISION_MODEL = process.env.OZ_VISION_MODEL || 'anthropic/claude-sonnet-5';
+function hasImages(messages) {
+  return messages.some((m) => Array.isArray(m.content) && m.content.some((c) => c?.type === 'image_url'));
+}
+
 /** One openzoo chat turn. Paid per call by the box's own wallet via the local
  *  proxy — no key, no account. */
-export async function brain(messages) {
+export async function brain(messages, contextId) {
   const r = await fetch(`${PROXY}/chat/completions`, {
     method: 'POST',
-    headers: { 'content-type': 'application/json', authorization: 'Bearer sk-openzoo' },
+    headers: {
+      'content-type': 'application/json', authorization: 'Bearer sk-openzoo',
+      // real leCore memory for this thread, bound via POST /v1/hrr/bind — NOT
+      // a fabricated mechanism. Retrieval runs automatically once this header
+      // is set; nothing more for the model to invent or explain.
+      ...(contextId ? { 'x-hrr-context': contextId } : {}),
+    },
     // explicit, not relying on the gateway's "inject when caller said nothing"
     // default — an explicit plugins array is always respected as-is, so this
     // guarantees every bot on every model actually has web search, instead of
     // hoping nothing upstream (local proxy, gateway config) already set one.
-    body: JSON.stringify({ model: MODEL, max_tokens: 900, messages, plugins: [{ id: 'web' }] }),
+    // 900 was cutting real (especially web-search-backed) answers off mid-sentence
+    body: JSON.stringify({ model: hasImages(messages) ? VISION_MODEL : MODEL, max_tokens: 4096, messages, plugins: [{ id: 'web' }] }),
   });
   const j = await r.json().catch(() => ({}));
   return j?.choices?.[0]?.message?.content ?? '';
 }
 
+/** Same call, but streamed — invokes onDelta(text) as tokens arrive (for a
+ *  live-typing UI) and resolves with the full accumulated text at the end, so
+ *  callers that need to parse a directive out of the complete reply still can. */
+export async function brainStream(messages, onDelta, contextId) {
+  const r = await fetch(`${PROXY}/chat/completions`, {
+    method: 'POST',
+    headers: {
+      'content-type': 'application/json', authorization: 'Bearer sk-openzoo',
+      ...(contextId ? { 'x-hrr-context': contextId } : {}),
+    },
+    body: JSON.stringify({ model: hasImages(messages) ? VISION_MODEL : MODEL, max_tokens: 4096, messages, plugins: [{ id: 'web' }], stream: true }),
+  });
+  if (!r.ok || !r.body) {
+    // fall back to the non-streaming path rather than fail outright
+    const text = await r.json().then((j) => j?.choices?.[0]?.message?.content ?? '').catch(() => '');
+    if (text) onDelta(text);
+    return text;
+  }
+  const reader = r.body.getReader();
+  const decoder = new TextDecoder();
+  let buf = '', full = '';
+  for (;;) {
+    const { value, done } = await reader.read();
+    if (done) break;
+    buf += decoder.decode(value, { stream: true });
+    const lines = buf.split('\n');
+    buf = lines.pop(); // last line may be incomplete — keep it for next chunk
+    for (const line of lines) {
+      const s = line.trim();
+      if (!s.startsWith('data:')) continue;
+      const payload = s.slice(5).trim();
+      if (payload === '[DONE]') continue;
+      try {
+        const delta = JSON.parse(payload)?.choices?.[0]?.delta?.content;
+        if (delta) { full += delta; onDelta(delta); }
+      } catch { /* keep-alive line or partial JSON — ignore */ }
+    }
+  }
+  return full;
+}
+
 const SYSTEM = `You are the brain of a Grok-Bot-style coding/ops agent. The polished chat UI
 the user sees is Grok Bot (Anysphere's app); its "sandbox" has been pointed at THIS box, and
 your reasoning is served by openzoo (pay-per-call access to ~435 models over x402 — no API key,

package/lib/proxy.js

@@ -315,6 +315,9 @@ export async function startProxy({ silent = false, requireToken = null, sessionM
     console.log(line);
   };
   let sessionSpent = 0;
+  let sessionCogs = 0;
+  let sessionDirect = 0;
+  const MARKUP = 3; // confirmed constant, see .claude/wiki.md "Margin needs a like-for-like denominator"
   let tunnelSpent = 0;
   // Live balance refresh state — the real implementation is assigned in the
   // banner section below; the handler only ever calls scheduleRefresh().
@@ -348,7 +351,7 @@ export async function startProxy({ silent = false, requireToken = null, sessionM
     // it's a number, not a capability.
     if (req.method === 'GET' && (req.url || '').split('?')[0] === '/v1/session') {
       res.writeHead(200, { 'content-type': 'application/json' });
-      res.end(JSON.stringify({ spentUsd: sessionSpent, paidCalls }));
+      res.end(JSON.stringify({ spentUsd: sessionSpent, cogsUsd: sessionCogs, directUsd: sessionDirect, paidCalls }));
       return;
     }
 
@@ -653,6 +656,20 @@ export async function startProxy({ silent = false, requireToken = null, sessionM
       if (paid && receipt) {
         if (receipt.ok && typeof receipt.billedUsd === 'number') {
           sessionSpent += receipt.billedUsd;
+          // cogs: no per-call field for it, but MARKUP is a known constant
+          // (3x — confirmed against the gateway's own margin math), and
+          // billedUsd = cogs * markup on a straight-markup call. Close enough
+          // on a counterfactual (leCore-discounted) call too since markup is
+          // still the ceiling those get capped against.
+          sessionCogs += receipt.billedUsd / MARKUP;
+          // direct: savesVsDirect = direct / billedUsd is on the receipt when
+          // leCore compression engaged (server derives it from real token
+          // counts) — exact, not estimated. When absent, nothing was
+          // compressed, so direct === what was paid (same reasoning as the
+          // like-for-like fix: no compression, no saving, not zero).
+          sessionDirect += typeof receipt.savesVsDirect === 'number'
+            ? receipt.savesVsDirect * receipt.billedUsd
+            : receipt.billedUsd;
           // The public-URL ceiling meters only public-origin spend — your own
           // local calls never eat into it.
           if (viaTunnel) tunnelSpent += receipt.billedUsd;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openzoo",
-  "version": "0.43.1",
+  "version": "0.43.3",
   "description": "Local x402-paying proxy + MCP server for openzoo.fun — 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",