npm - openzoo - Versions diffs - 0.48.83 → 0.48.85 - Mend

openzoo 0.48.83 → 0.48.85

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/lib/grokui.mjs +177 -120
package/package.json +1 -1

package/lib/grokui.mjs CHANGED Viewed

@@ -5,7 +5,7 @@
 // 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, execFile } from 'node:child_process';
+import { exec } from 'node:child_process';
 import http from 'node:http';
 import { randomUUID } from 'node:crypto';
 import { copyFileSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'node:fs';
@@ -2495,7 +2495,7 @@ const APP_HTML = `<!doctype html>
   }
   @keyframes twarnpulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
   @media (prefers-reduced-motion: reduce) { .twarn { animation: none; } }
-  #main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
+  #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; }
@@ -2537,9 +2537,9 @@ const APP_HTML = `<!doctype html>
      whose entire premise is that the box pays for itself. Click-to-copy is a
      shortcut; the address is selectable so Cmd/Ctrl+C still works if copy
      fails. */
-  #walletOverlay, #assetsOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.66); z-index: 1200;
+  #walletOverlay { position: fixed; inset: 0; background: rgba(0,0,0,.66); z-index: 1200;
                    display: none; align-items: center; justify-content: center; padding: 24px; }
-  #walletOverlay.show, #assetsOverlay.show { display: flex; }
+  #walletOverlay.show { display: flex; }
   #walletBox { width: 100%; max-width: 560px; max-height: 82vh; overflow-y: auto; background: #111113;
                border: 1px solid #2c2c2e; border-radius: 16px; padding: 20px 22px; }
   #walletBox h3 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
@@ -2561,16 +2561,6 @@ 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; }
-  /* The passphrase field. type=password so it never renders in clear, and
-     autocomplete off so a browser is not tempted to remember a key that
-     unlocks a public blob. */
-  .wpass { width: 100%; margin-top: 4px; padding: 9px 12px; background: #0d0d0f; color: #ececec;
-           border: 1px solid #2c2c2e; border-radius: 10px; font: inherit; font-size: 13px;
-           font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
-  .wpass:focus { outline: none; border-color: #6ab0ff; }
-  .wgo { margin-top: 10px; width: 100%; padding: 9px; border: 0; border-radius: 10px;
-         background: #b8f240; color: #000; font: inherit; font-weight: 600; cursor: pointer; }
-  .wgo[disabled] { background: #2c2c2e; color: #6f7080; cursor: default; }
   /* Slash autocomplete. Anchored above the composer because the composer sits
      at the bottom of the viewport — a dropdown BELOW it would render off
      screen. */
@@ -2585,7 +2575,11 @@ const APP_HTML = `<!doctype html>
   .scmd i { color: #6f7080; font-style: normal; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
   .scmd span { color: #999aa8; margin-left: auto; text-align: right; }
   #hudBtn { margin-left: 2px; }
-  #hud { position: fixed; top: 40px; right: 14px; width: 250px; background: rgba(14,14,17,.94);
+  /* Below #chatHeader, not a hardcoded 40px — the header wraps, so 40px lands
+     inside the dials (race / wallet / ◎) once they take a second row. top is
+     set from the header's live bottom in placeHud(). z-index stays high; the
+     bug was geometry, not stacking. */
+  #hud { position: absolute; right: 14px; width: 250px; background: rgba(14,14,17,.94);
          border: 1px solid #333340; border-radius: 10px; padding: 12px 14px; font: 11px/1.5 Menlo, monospace;
          display: none; z-index: 300; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
   #hud.show { display: block; }
@@ -2602,8 +2596,8 @@ const APP_HTML = `<!doctype html>
                 color: #f0c9a8; font-size: 10.5px; line-height: 1.45; }
   #hud .hhint.show { display: block; }
   #hud .hhint b { color: #f28c4d; font-weight: 600; }
-  #sidebar, #main, #walletOverlay, #assetsOverlay, #composeOverlay,
-  #inp, #search, #composeInp, .wpass, .bubble, .md-pre, .runoutput, .runcmd {
+  #sidebar, #main, #walletOverlay, #composeOverlay,
+  #inp, #search, #composeInp, .bubble, .md-pre, .runoutput, .runcmd {
     -webkit-app-region: no-drag; }
   #log { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 20px 24px 12px;
          display: flex; flex-direction: column; gap: 6px;
@@ -2757,8 +2751,25 @@ const APP_HTML = `<!doctype html>
                  font-size: 12px; }
   #composeFoot kbd { margin-right: 4px; }
   .mention { background: #3a3a3c; border-radius: 10px; padding: 1px 8px; font-size: 0.92em; }
+  /* Sidebar names and header titles are readable text — they must be
+     selectable so select-to-copy works there, not only in bubbles. */
+  .tname, .tprev, .pname, .hname, .hdir, .hdr, .wbal, .wnote, .wsub, #chatHeader {
+    -webkit-user-select: text; user-select: text; }
+  /* SELECT-TO-COPY. A blink, not a dialog: selection landed on the clipboard. */
+  #copiedToast {
+    position: fixed; z-index: 4000; pointer-events: none;
+    padding: 7px 14px; border-radius: 999px;
+    background: #b8f240; color: #0b0b0d;
+    font: 700 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    letter-spacing: .06em;
+    box-shadow: 0 8px 24px rgba(0,0,0,.5);
+    opacity: 0; transform: translate(-50%, -6px);
+    transition: opacity .14s ease, transform .14s ease;
+  }
+  #copiedToast.show { opacity: 1; transform: translate(-50%, 0); }
 </style></head>
 <body>
+  <div id="copiedToast" role="status" aria-live="polite">copied</div>
   <div id="dragbar"></div>
   <div id="sidebar">
     <div id="sideTop">
@@ -2783,16 +2794,6 @@ const APP_HTML = `<!doctype html>
       <div id="composeFoot"><span><kbd>Tab</kbd> add</span><span><kbd>Enter</kbd> open</span></div>
     </div>
   </div>
-  <div id="assetsOverlay" data-component="assets-modal">
-    <div id="walletBox">
-      <h3>Unlock baked assets</h3>
-      <div class="wsub">ProofFront ships encrypted inside this box's image. Your passphrase decrypts it here; it is never stored.</div>
-      <input class="wpass" id="assetsPass" type="password" autocomplete="off" spellcheck="false" placeholder="passphrase">
-      <button class="wgo" id="assetsGo" data-testid="assets-decrypt">decrypt</button>
-      <div class="wnote" id="assetsMsg"></div>
-      <div class="wnote">Once unlocked the files are served like anything else in the workspace, and this box's :8080 has no authentication — the lock protects the public image, not a running box whose id someone knows.</div>
-    </div>
-  </div>
   <div id="walletOverlay" data-component="wallet-modal">
     <div id="walletBox">
       <h3>Your wallet</h3>
@@ -2831,8 +2832,6 @@ const APP_HTML = `<!doctype html>
           <option value="4 4">best 4 of 4</option>
         </optgroup>
       </select>
-      <button class="dial" id="assetsBtn" data-component="assets-unlock"
-              title="Unlock the encrypted assets baked into this box's image">assets</button>
       <button class="dial" id="walletBtn" data-component="wallet-open"
               title="Your local burner wallet — deposit addresses and live balances">wallet</button>
       <button class="icon-btn" id="reloadBtn" title="Restart grokui on this box">&#8635;</button>
@@ -3152,53 +3151,6 @@ const APP_HTML = `<!doctype html>
     if (w.funded === false) note.classList.add('wempty');
     if (note.textContent.trim()) walletBody.appendChild(note);
   }
-  // ASSETS UNLOCK. The passphrase lives in the input and in one fetch body and
-  // nowhere else — not in a variable that outlives the call, not in
-  // localStorage, and the field is cleared the moment it succeeds.
-  const assetsOverlay = document.getElementById('assetsOverlay');
-  const assetsPass = document.getElementById('assetsPass');
-  const assetsGo = document.getElementById('assetsGo');
-  const assetsMsg = document.getElementById('assetsMsg');
-  async function unlockAssets() {
-    const pass = assetsPass.value;
-    if (!pass) { assetsMsg.textContent = 'enter the passphrase'; return; }
-    assetsGo.disabled = true;
-    assetsGo.textContent = 'decrypting…';
-    assetsMsg.textContent = 'this takes a minute — 800MB';
-    try {
-      const r = await fetch(API + '/decrypt-assets', {
-        method: 'POST', headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ pass }),
-      });
-      const j = await r.json().catch(() => ({}));
-      if (j.ok) {
-        assetsPass.value = '';   // do not leave it sitting in the DOM
-        assetsMsg.textContent = j.already ? 'already unlocked' : ('unlocked — ' + j.files + ' files in /workspace/prooffront');
-        assetsMsg.className = 'wnote';
-      } else {
-        assetsMsg.textContent = j.error || ('failed (HTTP ' + r.status + ')');
-        assetsMsg.className = 'wnote wempty';
-      }
-    } catch (e) {
-      assetsMsg.textContent = 'could not reach the box';
-      assetsMsg.className = 'wnote wempty';
-    }
-    assetsGo.disabled = false;
-    assetsGo.textContent = 'decrypt';
-  }
-  assetsGo.addEventListener('click', unlockAssets);
-  assetsPass.addEventListener('keydown', (e) => { if (e.key === 'Enter') unlockAssets(); });
-  document.getElementById('assetsBtn').addEventListener('click', () => {
-    assetsOverlay.classList.add('show');
-    assetsMsg.textContent = '';
-    assetsMsg.className = 'wnote';
-    requestAnimationFrame(() => { try { assetsPass.focus(); } catch (e) {} });
-  });
-  assetsOverlay.addEventListener('click', (e) => {
-    // Clear on dismiss so a passphrase never lingers behind a closed modal.
-    if (e.target === assetsOverlay) { assetsPass.value = ''; assetsOverlay.classList.remove('show'); }
-  });
   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
@@ -3228,7 +3180,6 @@ const APP_HTML = `<!doctype html>
   });
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape' && walletOverlay.classList.contains('show')) walletOverlay.classList.remove('show');
-    if (e.key === 'Escape' && assetsOverlay.classList.contains('show')) { assetsPass.value = ''; assetsOverlay.classList.remove('show'); }
   });
   document.getElementById('tierSel').addEventListener('change', (e) => setDial('tier', e.target.value));
@@ -3338,6 +3289,140 @@ const APP_HTML = `<!doctype html>
     return b;
   }
+  /* SELECT → CLIPBOARD. A finished selection copies itself. No ⌘C, no hunting
+     for a 10px button. Empty click / caret-only is a no-op so we do not spam
+     "copied". The highlight stays put: copy must not steal focus or collapse
+     the range. */
+  function selectedText() {
+    const el = document.activeElement;
+    if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA')) {
+      if (el.type === 'password') return '';
+      const a = el.selectionStart;
+      const b = el.selectionEnd;
+      if (typeof a === 'number' && typeof b === 'number' && b > a) {
+        return String(el.value || '').slice(a, b);
+      }
+      return '';
+    }
+    const sel = window.getSelection();
+    return sel ? sel.toString() : '';
+  }
+  function selectedRect() {
+    const el = document.activeElement;
+    if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') && el.type !== 'password') {
+      const a = el.selectionStart;
+      const b = el.selectionEnd;
+      if (typeof a === 'number' && typeof b === 'number' && b > a) return el.getBoundingClientRect();
+    }
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) return null;
+    const r = sel.getRangeAt(0).getBoundingClientRect();
+    if (!r || (r.width === 0 && r.height === 0)) return null;
+    return r;
+  }
+  function snapshotSelection() {
+    const el = document.activeElement;
+    if (el && (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA')) {
+      return { kind: 'field', el: el, start: el.selectionStart, end: el.selectionEnd };
+    }
+    const sel = window.getSelection();
+    if (!sel || !sel.rangeCount) return { kind: 'none' };
+    const ranges = [];
+    for (let i = 0; i < sel.rangeCount; i++) ranges.push(sel.getRangeAt(i).cloneRange());
+    return { kind: 'dom', ranges: ranges };
+  }
+  function restoreSelection(snap) {
+    if (!snap) return;
+    if (snap.kind === 'field' && snap.el && document.contains(snap.el)) {
+      try {
+        snap.el.focus({ preventScroll: true });
+        snap.el.setSelectionRange(snap.start, snap.end);
+      } catch (e) {}
+      return;
+    }
+    if (snap.kind === 'dom') {
+      const sel = window.getSelection();
+      sel.removeAllRanges();
+      for (let i = 0; i < snap.ranges.length; i++) {
+        try { sel.addRange(snap.ranges[i]); } catch (e) {}
+      }
+    }
+  }
+  let copiedToastTimer = 0;
+  function showCopiedToast(rect) {
+    const el = document.getElementById('copiedToast');
+    if (!el) return;
+    let x = window.innerWidth / 2;
+    let y = 40;
+    if (rect && (rect.width || rect.height)) {
+      x = rect.left + rect.width / 2;
+      y = rect.top - 38;
+      if (y < 8) y = rect.bottom + 10;
+    }
+    if (x < 48) x = 48;
+    if (x > window.innerWidth - 48) x = window.innerWidth - 48;
+    if (y < 8) y = 8;
+    if (y > window.innerHeight - 36) y = window.innerHeight - 36;
+    el.style.left = x + 'px';
+    el.style.top = y + 'px';
+    el.classList.add('show');
+    clearTimeout(copiedToastTimer);
+    copiedToastTimer = setTimeout(function () { el.classList.remove('show'); }, 1200);
+  }
+  let selectPointerDown = false;
+  let selectShiftHeld = false;
+  let selectCopying = false;
+  let selectTimer = 0;
+  let selectLastText = '';
+  let selectLastAt = 0;
+  async function copySettledSelection() {
+    if (selectCopying) return;
+    const text = selectedText();
+    if (!text) return;
+    const now = Date.now();
+    if (text === selectLastText && (now - selectLastAt) < 500) return;
+    selectLastText = text;
+    selectLastAt = now;
+    const rect = selectedRect();
+    const snap = snapshotSelection();
+    selectCopying = true;
+    let ok = false;
+    try { ok = await copyText(text); }
+    finally { restoreSelection(snap); selectCopying = false; }
+    if (ok) showCopiedToast(rect);
+  }
+  function scheduleCopySelection() {
+    if (selectPointerDown || selectCopying) return;
+    clearTimeout(selectTimer);
+    selectTimer = setTimeout(copySettledSelection, 40);
+  }
+  document.addEventListener('pointerdown', function (e) {
+    if (e.button !== undefined && e.button !== 0) return;
+    selectPointerDown = true;
+  });
+  document.addEventListener('pointerup', function (e) {
+    if (e.button !== undefined && e.button !== 0) return;
+    selectPointerDown = false;
+    scheduleCopySelection();
+  });
+  document.addEventListener('pointercancel', function () { selectPointerDown = false; });
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Shift') selectShiftHeld = true;
+  });
+  document.addEventListener('keyup', function (e) {
+    if (e.key === 'Shift') selectShiftHeld = false;
+    const withMod = e.metaKey || e.ctrlKey;
+    const selectish = e.key === 'Shift'
+      || e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'ArrowUp' || e.key === 'ArrowDown'
+      || e.key === 'Home' || e.key === 'End' || e.key === 'PageUp' || e.key === 'PageDown'
+      || ((e.key === 'a' || e.key === 'A') && withMod);
+    if (selectish) scheduleCopySelection();
+  });
+  document.addEventListener('selectionchange', function () {
+    if (selectPointerDown || selectCopying || selectShiftHeld) return;
+    scheduleCopySelection();
+  });
   function renderMentions(text) {
     const fences = [];
     const src = String(text).replace(/\`\`\`([\\w-]*)\\n?([\\s\\S]*?)\`\`\`/g, (m, lang, code) => {
@@ -3833,6 +3918,16 @@ const APP_HTML = `<!doctype html>
   const hudBtn = document.getElementById('hudBtn');
   const hud = document.getElementById('hud');
+  const chatHeader = document.getElementById('chatHeader');
+  const mainEl = document.getElementById('main');
+  // Pin the cost card just under the header. #chatHeader wraps, so a fixed
+  // 40px sat on top of the spend dials. Measure the live bottom each time
+  // it opens or the header changes height.
+  function placeHud() {
+    if (!hud || !chatHeader || !mainEl) return;
+    const top = chatHeader.getBoundingClientRect().bottom - mainEl.getBoundingClientRect().top + 8;
+    hud.style.top = Math.max(8, Math.round(top)) + 'px';
+  }
   function usd(n) {
     if (n === null || n === undefined) return '—';
     if (n === 0) return '$0';
@@ -3888,12 +3983,17 @@ const APP_HTML = `<!doctype html>
     e.stopPropagation();
     hud.classList.toggle('show');
     if (hud.classList.contains('show')) {
+      placeHud();
       refreshHud();
       hudTimer = setInterval(refreshHud, 30000);
     } else if (hudTimer) {
       clearInterval(hudTimer); hudTimer = null;
     }
   });
+  window.addEventListener('resize', () => { if (hud.classList.contains('show')) placeHud(); });
+  if (typeof ResizeObserver !== 'undefined' && chatHeader) {
+    new ResizeObserver(() => { if (hud.classList.contains('show')) placeHud(); }).observe(chatHeader);
+  }
   document.addEventListener('click', (e) => { if (!hud.contains(e.target)) hud.classList.remove('show'); });
 </script>
 </body></html>`;
@@ -3914,49 +4014,6 @@ const server = http.createServer((req, res) => {
     return;
   }
-  // UNLOCK THE BAKED ASSETS. The image ships ProofFront as ciphertext; this is
-  // where the operator supplies the passphrase that opens it.
-  //
-  // The passphrase is used and dropped: passed to openssl via an ENV VAR (never
-  // argv — a command line is world-readable in /proc), never written to disk,
-  // never logged, never stored on the thread. A wrong one is reported as wrong
-  // and nothing else happens.
-  //
-  // SAY WHAT THIS DOES: once decrypted the files are served by /api/files and
-  // /site like anything else in the workspace, and :8080 has no authentication.
-  // The lock protects the IMAGE, which is public. It does not protect a running
-  // box from anyone who knows its pod id.
-  if (req.method === 'POST' && req.url === '/decrypt-assets') {
-    const chunks = [];
-    req.on('data', (d) => chunks.push(d));
-    req.on('end', () => {
-      let pass = '';
-      try { pass = String(JSON.parse(Buffer.concat(chunks).toString('utf8')).pass || ''); } catch { /* ignore */ }
-      const done = (code, obj) => { res.writeHead(code, { 'content-type': 'application/json' }); res.end(JSON.stringify(obj)); };
-      if (!pass) return done(400, { ok: false, error: 'no passphrase' });
-      if (!existsSync('/opt/prooffront.enc')) return done(404, { ok: false, error: 'this image has no encrypted assets baked in' });
-      if (existsSync('/workspace/prooffront')) return done(200, { ok: true, already: true, note: 'already unlocked' });
-      // Same shape as box-boot: decrypt to temp, verify it is really a zip,
-      // then unpack and swap. Never unzip unverified plaintext into /workspace.
-      const script = 'set -e; '
-        + 'openssl enc -d -aes-256-cbc -pbkdf2 -iter 600000 -in /opt/prooffront.enc -out /tmp/pf.zip -pass env:OZ_PF_PASS 2>/dev/null; '
-        + 'head -c 2 /tmp/pf.zip | grep -q PK; '
-        + 'rm -rf /workspace/.pf.tmp; mkdir -p /workspace/.pf.tmp; '
-        + 'unzip -q /tmp/pf.zip -d /workspace/.pf.tmp; '
-        + 'mv /workspace/.pf.tmp /workspace/prooffront; '
-        + 'rm -f /tmp/pf.zip; '
-        + 'find /workspace/prooffront -type f | wc -l';
-      execFile('bash', ['-lc', script], { env: { ...process.env, OZ_PF_PASS: pass }, timeout: 600000, maxBuffer: 1 << 20 },
-        (err, stdout) => {
-          // Wipe the copy we were handed as soon as openssl is done with it.
-          pass = '';
-          if (err) return done(200, { ok: false, error: 'wrong passphrase, or the blob is corrupt' });
-          done(200, { ok: true, files: Number(String(stdout).trim()) || 0 });
-        });
-    });
-    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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "openzoo",
-  "version": "0.48.83",
+  "version": "0.48.85",
   "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",