openzoo 0.50.95 → 0.50.97

package/lib/ozSpendChip.js

@@ -1,5 +1,6 @@
 /**
- * Cafe spend chip — the ⓘ $N <details> that folds formatSpendFooter.
+ * Cafe/Grok Bot spend HUD. Live totals come from /oz-spend and /api/ozSpend;
+ * leftover ::oz-spend:: footers in old transcripts still fold into a chip.
  *
  * Cafe injects this via grokbotweb-shim concatenation. Grok Bot.app cannot
  * be patched (asar integrity), so `openzoo bot` launches Chromium with a
@@ -14,18 +15,82 @@ import { spendChipLabel } from './spendProof.js';
 
 export const GROKBOT_CDP_PORT = Number(process.env.OZ_GROKBOT_CDP_PORT || 9444);
 
-/** Session totals for a floating pill when the open canvas has no footer. */
-export function sessionSpendLabel(home = os.homedir()) {
+export function spendHudPath(home = os.homedir()) {
+  return path.join(home, '.openzoo', 'spend-hud.json');
+}
+
+export function writeSpendHud(state, home = os.homedir()) {
+  try {
+    const spent = Number(state?.spent) || 0;
+    const would = Number(state?.would) || 0;
+    const saved = Number(state?.saved) || 0;
+    const pct = Number(state?.pct) || 0;
+    const payload = {
+      spent,
+      would,
+      saved,
+      pct,
+      label: String(state?.label || ''),
+      body: String(state?.body || ''),
+      billedUsd: state?.billedUsd ?? null,
+      updatedAt: Date.now(),
+    };
+    fs.mkdirSync(path.dirname(spendHudPath(home)), { recursive: true, mode: 0o700 });
+    fs.writeFileSync(spendHudPath(home), JSON.stringify(payload), { mode: 0o600 });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function readSpendHud(home = os.homedir()) {
+  try {
+    const j = JSON.parse(fs.readFileSync(spendHudPath(home), 'utf8'));
+    return j && typeof j === 'object' ? j : null;
+  } catch {
+    return null;
+  }
+}
+
+function sessionTotals(home) {
   try {
     const s = JSON.parse(fs.readFileSync(path.join(home, '.openzoo', 'session.json'), 'utf8'));
     const spent = Number(s.spentUsd || s.spendUsd || 0);
     const would = Number(s.directUsd || 0);
     const saved = Number(s.savedUsd != null ? s.savedUsd : Math.max(0, would - spent));
-    if (!(spent > 0.00005)) return '';
-    return spendChipLabel({ spent, would, saved, pct: would > 0 ? (100 * saved) / would : 0 });
+    const pct = would > 0 ? (100 * saved) / would : 0;
+    const label = spent > 0.00005 ? spendChipLabel({ spent, would, saved, pct }) : '';
+    return { spent, would, saved, pct, label };
   } catch {
-    return '';
+    return { spent: 0, would: 0, saved: 0, pct: 0, label: '' };
+  }
+}
+
+function sessionBody(sess) {
+  if (!(sess.spent > 0.00005)) return '';
+  return `spent $${sess.spent.toFixed(4)} · OpenRouter would $${sess.would.toFixed(4)} · saved $${sess.saved.toFixed(4)} (${Math.round(sess.pct)}%)`;
+}
+
+/** Session totals + last-call dump for the HUD pill. */
+export function sessionSpendState(home = os.homedir()) {
+  const sess = sessionTotals(home);
+  const hud = readSpendHud(home);
+  if (hud && (hud.label || hud.body)) {
+    return {
+      spent: Number(hud.spent) || sess.spent,
+      would: Number(hud.would) || sess.would,
+      saved: Number(hud.saved) || sess.saved,
+      pct: Number(hud.pct) || sess.pct,
+      label: String(hud.label || sess.label || ''),
+      body: String(hud.body || sessionBody(sess)),
+      billedUsd: hud.billedUsd ?? null,
+    };
   }
+  return { ...sess, body: sessionBody(sess), billedUsd: null };
+}
+
+export function sessionSpendLabel(home = os.homedir()) {
+  return sessionSpendState(home).label;
 }
 
 export function grokBotChromiumArgs(port = GROKBOT_CDP_PORT) {
@@ -159,9 +224,13 @@ function ozEnsureSpendCss() {
   }
   s.textContent = [
     '.oz-spend{margin:.55rem 0 0;font-size:12px;color:inherit;opacity:.82;max-width:36em}',
-    '#oz-spend-float>summary{cursor:grab}',
+    '#oz-spend-hud{opacity:1;max-width:min(28em,calc(100vw - 24px));pointer-events:auto}',
+    '#oz-spend-hud>summary{cursor:grab;background:#e85d1c;color:#fff;font-weight:600;font-size:13px;',
+    'border:0;box-shadow:0 4px 18px rgba(0,0,0,.5)}',
+    '#oz-spend-hud>.oz-spend-body{background:rgba(20,20,22,.94);color:#f4f4f5;padding:8px 10px;',
+    'border-radius:10px;margin-top:6px}',
     '.oz-spend>summary{cursor:help;list-style:none;display:inline-flex;align-items:center;gap:.35rem;',
-    'padding:3px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.18);white-space:nowrap;',
+    'padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);white-space:nowrap;',
     'max-width:100%;overflow:hidden;text-overflow:ellipsis}',
     '.oz-spend>summary::-webkit-details-marker{display:none}',
     '.oz-spend-body{white-space:pre-wrap;margin:.55rem 0 0;font-size:11px;line-height:1.45;opacity:.88;overflow-wrap:anywhere}',
@@ -213,11 +282,19 @@ export function stripSpendFromText(s) {
   return t;
 }
 
+function ozInComposer(el) {
+  if (!el) return false;
+  if (el.tagName === 'TEXTAREA' || el.tagName === 'INPUT' || el.isContentEditable) return true;
+  return !!(el.closest && el.closest('textarea, input, [contenteditable="true"]'));
+}
+
 function ozBlankSpendIn(root) {
+  if (ozInComposer(root)) return;
   const w = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, null);
   while (w.nextNode()) {
     const tn = w.currentNode;
     if (tn.parentElement && tn.parentElement.closest && tn.parentElement.closest('.oz-spend')) continue;
+    if (ozInComposer(tn.parentElement)) continue;
     const next = stripSpendFromText(tn.nodeValue || '');
     if (next !== tn.nodeValue) tn.nodeValue = next;
   }
@@ -228,6 +305,7 @@ function ozHideSpendLeftovers() {
   for (let i = 0; i < nodes.length; i += 1) {
     const el = nodes[i];
     if (el.closest && el.closest('.oz-spend')) continue;
+    if (ozInComposer(el)) continue;
     if (el.querySelector && el.querySelector('.oz-spend')) continue;
     const vis = ozVisibleSpendText(el);
     if (!spendOnlyText(vis)) continue;
@@ -290,10 +368,11 @@ function ozCollapseSpend() {
   for (let i = 0; i < nodes.length; i += 1) {
     const el = nodes[i];
     if (el.closest && el.closest('.oz-spend')) continue;
+    if (ozInComposer(el)) continue;
     const t = ozVisibleSpendText(el);
     if (!/::oz-spend::|this call \$|spent \$/i.test(t)) continue;
     const host = ozSpendHost(el);
-    if (!host || seen.has(host)) continue;
+    if (!host || seen.has(host) || ozInComposer(host)) continue;
     seen.add(host);
     hosts.push(host);
   }
@@ -302,10 +381,11 @@ function ozCollapseSpend() {
     const vis = ozVisibleSpendText(host);
     const split = splitSpendText(vis);
     if (!split || !split.body || split.body.length < 12) continue;
+    if (split.summary) window.__OZ_SPEND_LAST__ = split.summary;
     ozEnsureSpendCss();
     if (spendOnlyText(vis)) {
       const prev = ozPreviousMessageCard(host);
-      if (prev && prev !== host) {
+      if (prev && prev !== host && !ozInComposer(prev)) {
         ozAttachSpendChip(prev, split);
         host.setAttribute('data-oz-spend-hide', '1');
         continue;
@@ -318,19 +398,44 @@ function ozCollapseSpend() {
   ozEnsureFloatSpend();
 }
 
-function ozEnsureFloatSpend() {
-  const label = String(window.__OZ_SESSION_SPEND__ || '').trim();
-  const msgPills = document.querySelectorAll('.oz-spend:not(#oz-spend-float)').length;
-  let el = document.getElementById('oz-spend-float');
-  if (!label || msgPills) {
-    if (el) el.remove();
-    return;
+/** Live HUD label: latest folded chip, then a read-only canvas scan, then inject snapshot. */
+function ozFloatLabel() {
+  const pills = document.querySelectorAll('.oz-spend:not(#oz-spend-hud):not(#oz-spend-float) summary');
+  if (pills.length) {
+    const lab = String(pills[pills.length - 1].textContent || '').replace(/^ⓘ\s*/, '').trim();
+    if (lab) {
+      window.__OZ_SPEND_LAST__ = lab;
+      return lab;
+    }
   }
+  try {
+    const nodes = document.querySelectorAll('[class*="sand-message"]');
+    for (let i = nodes.length - 1; i >= 0; i -= 1) {
+      if (ozInComposer(nodes[i])) continue;
+      const vis = ozVisibleSpendText(nodes[i]);
+      if (!/::oz-spend::|this call \$|spent \$/i.test(vis)) continue;
+      const split = splitSpendText(vis);
+      if (split && split.summary) {
+        window.__OZ_SPEND_LAST__ = split.summary;
+        return split.summary;
+      }
+    }
+  } catch (e) {}
+  if (window.__OZ_SPEND_LAST__) return String(window.__OZ_SPEND_LAST__);
+  return String(window.__OZ_SESSION_SPEND__ || '').trim();
+}
+
+function ozEnsureFloatSpend() {
+  const leftover = document.getElementById('oz-spend-float');
+  if (leftover) leftover.remove();
+  const label = ozFloatLabel() || String(window.__OZ_SESSION_SPEND__ || '').trim() || 'openzoo';
+  let el = document.getElementById('oz-spend-hud');
   ozEnsureSpendCss();
   if (!el) {
     el = document.createElement('details');
-    el.id = 'oz-spend-float';
+    el.id = 'oz-spend-hud';
     el.className = 'oz-spend';
+    el.open = true;
     const sum = document.createElement('summary');
     const body = document.createElement('div');
     body.className = 'oz-spend-body';
@@ -343,6 +448,9 @@ function ozEnsureFloatSpend() {
   ozDragFloat(el);
   const sum = el.querySelector('summary');
   if (sum) sum.textContent = 'ⓘ ' + label;
+  const bodyEl = el.querySelector('.oz-spend-body');
+  const dump = String(window.__OZ_SPEND_BODY__ || '').trim();
+  if (bodyEl && dump) bodyEl.textContent = dump;
 }
 
 function ozSavedFloatPos() {
@@ -357,9 +465,15 @@ function ozPlaceFloat(el) {
   if (!el) return;
   el.style.position = 'fixed';
   el.style.zIndex = '2147483646';
-  el.style.opacity = '0.95';
+  el.style.opacity = '1';
+  el.style.pointerEvents = 'auto';
+  const vw = Math.max(320, Number(window.innerWidth) || 800);
+  const vh = Math.max(240, Number(window.innerHeight) || 600);
   const saved = ozSavedFloatPos();
-  if (saved) {
+  const onScreen = saved
+    && saved.left >= 0 && saved.top >= 0
+    && saved.left < vw - 24 && saved.top < vh - 24;
+  if (onScreen) {
     el.style.left = Math.max(8, saved.left) + 'px';
     el.style.top = Math.max(8, saved.top) + 'px';
     el.style.right = 'auto';
@@ -368,8 +482,8 @@ function ozPlaceFloat(el) {
   }
   el.style.left = 'auto';
   el.style.right = '16px';
-  el.style.top = '48px';
-  el.style.bottom = 'auto';
+  el.style.top = 'auto';
+  el.style.bottom = '88px';
 }
 
 function ozDragFloat(el) {
@@ -414,31 +528,71 @@ function ozDragFloat(el) {
   }, true);
 }
 
+function ozLabelFromInfo(j) {
+  if (!j || typeof j !== 'object') return '';
+  if (typeof j.label === 'string' && j.label.trim()) return j.label.trim();
+  const spent = Number(j.spentUsd ?? j.spendUsd ?? j.spent ?? 0);
+  const would = Number(j.directUsd ?? j.would ?? 0);
+  const saved = Number(j.savedUsd != null ? j.savedUsd : (j.saved != null ? j.saved : Math.max(0, would - spent)));
+  if (!(spent > 0.00005)) return '';
+  return labelFromSpendBody(
+    'spent $' + spent.toFixed(4) + ' OpenRouter would $' + would.toFixed(4) + ' saved $' + saved.toFixed(4),
+    '',
+  );
+}
+
+function ozPollSpend() {
+  const urls = ['/oz-spend', '/api/ozSpend', 'https://127.0.0.1:8443/api/ozSpend', 'http://127.0.0.1:8402/v1/info'];
+  (async () => {
+    for (let i = 0; i < urls.length; i += 1) {
+      try {
+        const r = await fetch(urls[i], { signal: AbortSignal.timeout(1500) });
+        if (!r || !r.ok) continue;
+        const j = await r.json();
+        const lab = ozLabelFromInfo(j);
+        if (!lab) continue;
+        window.__OZ_SESSION_SPEND__ = lab;
+        if (typeof j.body === 'string' && j.body.trim()) window.__OZ_SPEND_BODY__ = j.body.trim();
+        ozEnsureFloatSpend();
+        return;
+      } catch (e) {}
+    }
+  })();
+}
+
 function ozWatchSpend() {
   let t = 0;
+  const inComposer = () => ozInComposer(document.activeElement);
   const run = () => {
-    const a = document.activeElement;
-    if (a && (a.tagName === 'TEXTAREA' || a.tagName === 'INPUT' || a.isContentEditable)) return;
-    try { ozCollapseSpend(); } catch (e) {}
+    try {
+      if (inComposer()) {
+        ozEnsureSpendCss();
+        ozEnsureFloatSpend();
+      } else {
+        ozCollapseSpend();
+      }
+    } catch (e) {}
   };
-  const debounced = () => { clearTimeout(t); t = setTimeout(run, 600); };
+  const debounced = () => { clearTimeout(t); t = setTimeout(run, 400); };
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', run);
   else run();
   try {
     const mo = new MutationObserver(debounced);
-    const start = () => { if (document.body) mo.observe(document.body, { childList: true, subtree: false }); };
+    const start = () => { if (document.body) mo.observe(document.body, { childList: true, subtree: true }); };
     if (document.body) start();
     else document.addEventListener('DOMContentLoaded', start);
   } catch (e) {}
   try { window.addEventListener('resize', debounced); } catch (e) {}
+  try { setInterval(() => { run(); ozPollSpend(); }, 2000); } catch (e) {}
+  try { ozPollSpend(); } catch (e) {}
 }
 
 export function spendChipSource() {
   return [
     '(function ozSpendChip(){',
     "'use strict';",
-    'if (window.__OZ_SPEND_CHIP__ === 12) return;',
-    'window.__OZ_SPEND_CHIP__ = 12;',
+    'if (window.__OZ_SPEND_CHIP__ === 16) return;',
+    'window.__OZ_SPEND_CHIP__ = 16;',
     chipUsd.toString(),
     labelFromSpendBody.toString(),
     spendLinesOnly.toString(),
@@ -448,15 +602,19 @@ export function spendChipSource() {
     ozSpendHost.toString(),
     ozVisibleSpendText.toString(),
     stripSpendFromText.toString(),
+    ozInComposer.toString(),
     ozBlankSpendIn.toString(),
     ozHideSpendLeftovers.toString(),
     ozPreviousMessageCard.toString(),
     ozAttachSpendChip.toString(),
     ozCollapseSpend.toString(),
+    ozFloatLabel.toString(),
     ozEnsureFloatSpend.toString(),
     ozSavedFloatPos.toString(),
     ozPlaceFloat.toString(),
     ozDragFloat.toString(),
+    ozLabelFromInfo.toString(),
+    ozPollSpend.toString(),
     ozWatchSpend.toString(),
     'ozWatchSpend();',
     '})();',