agentbox-app 0.1.7 → 0.1.11

package/main/feedback.mjs

@@ -0,0 +1,55 @@
+// SENDING FEEDBACK TO THE AGENTBOX TEAM (w-1b574413db, 2026-10-04).
+//
+// The card hands the main process what you wrote and what you attached, and
+// this file posts it to one server function. That function holds who it goes
+// to as a secret (`FEEDBACK_TO`, cloud/supabase/functions/feedback), so the
+// address is in no file of this public repository and no install can show it.
+//
+// WHERE IT GOES IS BAKED IN, like the analytics key (main/analytics.mjs): the
+// release writes `bakedFeedbackUrl` into the packaged package.json, a copy run
+// from source carries none, and a `feedbackUrl` in zero.config.json outranks
+// both. A copy with nowhere to send says so in words rather than pretending.
+//
+// It is not behind the diagnostics switch. That switch is about what Agentbox
+// sends on its own; this is something a person typed and pressed Send on.
+import { createRequire } from 'node:module';
+import { checkFeedback } from '../shared/feedback.mjs';
+import { Name, readEnv } from '../shared/product-name.mjs';
+
+function bakedUrl() {
+  try {
+    return createRequire(import.meta.url)('../package.json')?.bakedFeedbackUrl ?? null;
+  } catch {
+    return null;
+  }
+}
+
+const BAKED = bakedUrl();
+const clean = (v) => (typeof v === 'string' && v.trim() ? v.trim() : null);
+
+export function feedbackUrl(config, baked = BAKED, env = process.env) {
+  return clean(config?.feedbackUrl) ?? clean(readEnv('FEEDBACK_URL', env)) ?? clean(baked);
+}
+
+// Answers { ok: true } or { ok: false, error } with the error as a sentence.
+// It never throws, so the card always has something to say.
+export async function sendFeedback({ url, payload, fetchImpl = globalThis.fetch, timeoutMs = 60_000 }) {
+  if (!url) return { ok: false, error: `Feedback is not set up in this copy of ${Name}.` };
+  // Checked again here, off the bytes that would actually travel, since the
+  // renderer is not the last word on what leaves this machine.
+  const sized = (payload?.files ?? []).map((f) => ({ size: Math.floor((String(f?.data ?? '').length * 3) / 4) }));
+  const check = checkFeedback({ text: payload?.text, files: sized });
+  if (!check.ok) return { ok: false, error: check.reason };
+  try {
+    const res = await fetchImpl(url, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+      signal: AbortSignal.timeout(timeoutMs),
+    });
+    if (res?.ok) return { ok: true };
+    return { ok: false, error: 'It did not send. Try again in a moment.' };
+  } catch {
+    return { ok: false, error: 'It did not send. Check your connection and try again.' };
+  }
+}

package/main/folder-pictures.mjs

@@ -0,0 +1,48 @@
+// THE PICTURES IN A FOLDER A MESSAGE NAMES, newest first.
+//
+// A worker that drew several versions names their folder on a line of its own,
+// and until 2026-10-04 that line was grey text. Focus now draws the pictures
+// under it (FolderPreview), and this is the one thing the window cannot do for
+// itself: look inside a folder.
+//
+// Two rules, the same two the picture scheme enforces (./img-scheme.mjs), so a
+// folder line is never a way to list anything else: the folder is inside this
+// product's own folders or the account root, and only pictures come back. One
+// level only, because a design folder keeps old rounds in folders of their own.
+// tests/a-named-folder-shows-its-pictures.test.mjs holds every edge.
+import fsDefault from 'node:fs';
+import path from 'node:path';
+import { resolveArtifact } from './artifact-path.mjs';
+import { servable } from './img-scheme.mjs';
+
+const PICTURE = /\.(png|jpe?g|gif|webp|avif)$/i;
+
+export function folderPictures({ src, product, products = [], accountRoot, storeRoot, limit = 60, fs = fsDefault }) {
+  if (typeof src !== 'string' || !src.trim()) return { ok: false, error: 'No folder was named.' };
+  const named = src.replace(/\/+$/, '');
+  const found = resolveArtifact({ src: named, product, products, accountRoot, storeRoot, fs });
+  if (!found.ok) return { ok: false, error: found.error };
+  const own = products.find((p) => p.slug === product) ?? null;
+  const roots = [accountRoot, own?.dir, own?.repoPath].filter(Boolean);
+  let entries;
+  try {
+    if (!fs.statSync(found.path).isDirectory()) return { ok: false, error: `${src} is not a folder.` };
+    entries = fs.readdirSync(found.path, { withFileTypes: true });
+  } catch (e) {
+    return { ok: false, error: `${src} could not be read (${e.message}).` };
+  }
+  const pictures = [];
+  for (const entry of entries) {
+    if (!entry.isFile() || !PICTURE.test(entry.name)) continue;
+    const file = path.join(found.path, entry.name);
+    if (!servable(file, roots)) continue;
+    let mtime = 0;
+    try { mtime = fs.statSync(file).mtimeMs; } catch { continue; }
+    pictures.push({ file, mtime });
+  }
+  if (!pictures.length && !roots.some((r) => found.path === r || found.path.startsWith(r + path.sep))) {
+    return { ok: false, error: `${src} is not in this project.` };
+  }
+  pictures.sort((a, b) => b.mtime - a.mtime || a.file.localeCompare(b.file));
+  return { ok: true, folder: found.path, pictures: pictures.slice(0, limit).map((p) => p.file), total: pictures.length };
+}

package/main/frame-scrollbars.mjs

@@ -0,0 +1,90 @@
+// A PAGE IN THE PANE KEEPS ITS SCROLLBAR OUT OF SIGHT UNTIL YOU SCROLL.
+//
+// The app's own scrollbars are invisible at rest (styles.css, "SCROLLBARS ARE
+// NOT FURNITURE"), but a page drawn in the document pane is its own document
+// and that stylesheet stops at the frame. With a mouse plugged in, macOS draws
+// classic scrollbars, and a page that does not declare itself dark gets the
+// light ones: a white track the full height of the pane with a grey thumb in
+// it. That was the report, with a screenshot, on 2026-10-05.
+//
+// THE FILE IS STILL SERVED EXACTLY AS IT WAS WRITTEN (doc-scheme.mjs). What is
+// added here is the app's own chrome, from outside, once the page's document
+// exists: one adopted stylesheet that touches nothing but scrollbars, inside a
+// cascade layer so a page that styled its own scrollbars keeps them, and two
+// passive listeners that only ever swap that sheet. Nothing a page does is
+// changed or stopped, and no key or gesture of hers is listened to.
+//
+// A frame whose sandbox has no allow-scripts cannot be handed this (measured:
+// "Script not run"). The one such frame is the small preview under a message,
+// and that one is told not to scroll at all (ArtifactThumbnail.tsx).
+import { DOC_SCHEMES, isScheme } from '../shared/schemes.mjs';
+
+const RULES = (thumb) => `@layer agentbox-scrollbars {
+  ::-webkit-scrollbar { width: 10px; height: 10px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  ::-webkit-scrollbar-corner { background: transparent; }
+  ::-webkit-scrollbar-thumb { background: ${thumb}; border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
+  ::-webkit-scrollbar-thumb:hover { background: rgba(150, 150, 150, 0.7); background-clip: content-box; }
+}`;
+
+/** No track and no thumb: what a page looks like while nobody is scrolling it. */
+export const AT_REST = RULES('transparent');
+/** A thin soft thumb that reads on a dark page and a light one alike. */
+export const SHOWN = RULES('rgba(140, 140, 140, 0.45)');
+
+/** Is this a page of ours or a file, rather than a running app or the web. */
+export function wantsQuietScrollbars(url) {
+  let parsed;
+  try { parsed = new URL(String(url ?? '')); } catch { return false; }
+  return parsed.protocol === 'file:' || isScheme(DOC_SCHEMES, parsed.protocol);
+}
+
+/**
+ * Runs INSIDE the page, so it is written to be serialised: everything it uses
+ * comes in through its arguments. Shown while the page or anything in it
+ * scrolls and for a moment after, and while the pointer is at the right edge
+ * where the thumb would be grabbed.
+ */
+export function quietScrollbars(page, atRest, shown) {
+  const doc = page.document;
+  if (doc.adoptedStyleSheets.some((s) => s.agentboxScrollbars)) return;
+  const sheet = new page.CSSStyleSheet();
+  sheet.agentboxScrollbars = true;
+  sheet.replaceSync(atRest);
+  doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, sheet];
+  let showing = false;
+  let atEdge = false;
+  let timer = null;
+  const show = () => { if (!showing) { sheet.replaceSync(shown); showing = true; } };
+  const hideSoon = () => {
+    page.clearTimeout(timer);
+    timer = page.setTimeout(() => { timer = null; if (!atEdge) { sheet.replaceSync(atRest); showing = false; } }, 900);
+  };
+  page.addEventListener('scroll', () => { show(); if (!atEdge) hideSoon(); }, { capture: true, passive: true });
+  page.addEventListener('mousemove', (e) => {
+    const edge = e.clientX >= doc.documentElement.clientWidth - 14;
+    if (edge === atEdge) return;
+    atEdge = edge;
+    if (edge) { page.clearTimeout(timer); timer = null; show(); } else hideSoon();
+  }, { passive: true });
+  page.addEventListener('mouseout', (e) => {
+    if (e.relatedTarget || !atEdge) return;
+    atEdge = false;
+    hideSoon();
+  }, { passive: true });
+}
+
+const SCRIPT = `(${quietScrollbars.toString()})(window, ${JSON.stringify(AT_REST)}, ${JSON.stringify(SHOWN)})`;
+
+function quiet(frame) {
+  if (!frame || !wantsQuietScrollbars(frame.url)) return;
+  frame.executeJavaScript(SCRIPT).catch(() => { /* a sandbox without scripts, or the frame went away */ });
+}
+
+/** Every page frame in this window gets the quiet scrollbar as its document is ready. */
+export function quietTheFramesScrollbars(contents) {
+  contents.on('frame-created', (_event, { frame }) => {
+    if (!frame || frame === contents.mainFrame) return;
+    frame.on('dom-ready', () => quiet(frame));
+  });
+}

package/main/fresh-user.mjs

@@ -57,6 +57,9 @@ export function relaunchCommand({ execPath = process.execPath, argv = process.ar
  *  It cannot break inbox zero: the walk shows only its own three examples. */
 export function openFreshUser({
   withAgents = true,
+  // False is a new user with no Claude Code or Codex of hers, who signs in
+  // for itself: the way to see the walk's plan question (w-9f6975906c).
+  withTools = true,
   execPath = process.execPath,
   argv = process.argv,
   packaged = true,
@@ -65,7 +68,7 @@ export function openFreshUser({
 } = {}) {
   let prepared;
   try {
-    prepared = prepareHome(makeHome(now), { withAgents });
+    prepared = prepareHome(makeHome(now), { withAgents: withTools && withAgents, withTools });
   } catch (err) {
     return { ok: false, error: `Could not make a throwaway home under ${HOMES}: ${err?.message ?? err}` };
   }
@@ -80,7 +83,7 @@ export function openFreshUser({
     child = spawnFn(bin, args, {
       detached: true,
       stdio: 'ignore',
-      env: freshEnv(prepared.home),
+      env: freshEnv(prepared.home, process.env, { ownSignIns: !withTools }),
     });
     child.unref?.();
   } catch (err) {
@@ -91,7 +94,7 @@ export function openFreshUser({
   // be missing without looking broken, and a test that quietly cannot run an
   // agent is a test that lies. They are said rather than assumed.
   const notes = [];
-  if (!prepared.claudeBin) notes.push('Claude Code is not at ~/.local/bin/claude, so agents will not run in it.');
+  if (withTools && !prepared.claudeBin) notes.push('Claude Code is not at ~/.local/bin/claude, so agents will not run in it.');
   if (!prepared.keychain) notes.push('There is no ~/Library/Keychains here, so Claude Code will say it is not logged in.');
   if (withAgents && !prepared.agents) notes.push('There is no ~/.claude on this Mac, so it will have no agents to offer.');
 

package/main/git-change-offthread.mjs

@@ -0,0 +1,70 @@
+// THE CHECKOUT IS PHOTOGRAPHED OFF THE THREAD THAT DRAWS HER WINDOW.
+//
+// Measured 2026-10-01 on a test copy: one snapshot of the app took 2.56 seconds
+// while an agent was starting, against a few milliseconds either side. The
+// spawn ran `snapshotRepo` inline, which is four git commands and a read of
+// every untracked file, and on a busy Mac each git command costs half a second.
+// That is the "long delay" after pressing Send. The same shape as
+// main/task-folders-offthread.mjs: main/git-change.mjs stays synchronous and
+// runs whole inside a worker thread, and if the thread cannot start the job
+// runs here, the old way.
+import { Worker } from 'node:worker_threads';
+import * as change from './git-change.mjs';
+
+const JOBS = new Set(['snapshotRepo']);
+
+let worker = null;
+let broken = false;
+let seq = 0;
+const waiting = new Map();
+
+function runHere({ name, args, resolve, reject }) {
+  try { resolve(change[name](...args)); } catch (error) { reject(error); }
+}
+
+function giveUp() {
+  broken = true;
+  worker = null;
+  const left = [...waiting.values()];
+  waiting.clear();
+  for (const job of left) runHere(job);
+}
+
+function thread() {
+  if (worker || broken) return worker;
+  try {
+    worker = new Worker(new URL('./git-change-thread.mjs', import.meta.url));
+  } catch (error) {
+    console.warn('zero: the checkout will be read on the main thread:', error.message);
+    broken = true;
+    return null;
+  }
+  worker.on('message', ({ id, ok, value, error }) => {
+    const job = waiting.get(id);
+    if (!job) return;
+    waiting.delete(id);
+    if (!waiting.size) worker?.unref();
+    if (ok) job.resolve(value); else job.reject(new Error(error));
+  });
+  worker.on('error', (error) => {
+    console.warn('zero: the checkout thread failed:', error.message);
+    giveUp();
+  });
+  worker.on('exit', () => { if (worker) giveUp(); });
+  worker.unref();
+  return worker;
+}
+
+/** Run one of git-change.mjs's exports without blocking this thread. */
+export function gitJob(name, ...args) {
+  if (!JOBS.has(name)) return Promise.reject(new Error(`not a git job: ${name}`));
+  return new Promise((resolve, reject) => {
+    const job = { name, args, resolve, reject };
+    const w = thread();
+    if (!w) { runHere(job); return; }
+    const id = ++seq;
+    waiting.set(id, job);
+    w.ref();
+    w.postMessage({ id, name, args });
+  });
+}

package/main/git-change-thread.mjs

@@ -0,0 +1,11 @@
+// THE OTHER END OF main/git-change-offthread.mjs. One job at a time, in order.
+import { parentPort } from 'node:worker_threads';
+import * as change from './git-change.mjs';
+
+parentPort.on('message', ({ id, name, args }) => {
+  try {
+    parentPort.postMessage({ id, ok: true, value: change[name](...args) });
+  } catch (error) {
+    parentPort.postMessage({ id, ok: false, error: String(error?.message ?? error) });
+  }
+});

package/main/git-change.mjs

@@ -5,7 +5,7 @@
 // the Edit or Write tool. Measured on this Mac 2026-08-24: of 105 runs that
 // changed a file over two days, 4 would have shown the whole change. The other
 // 101 rewrote their files with sed, a heredoc or a script, and a card drawn
-// from the conversation has nothing in it. That is what David was clicking.
+// from the conversation has nothing in it. That is what a tester was clicking.
 //
 // SO THE CARD STOPS ASKING HOW THE AGENT TYPED. A run's checkout is
 // photographed when the session spawns and read again when it exits, and the

package/main/img-scheme.mjs

@@ -36,7 +36,9 @@
 //      product's docs, its attachments, its designs and the `.staging` folder a
 //      paste lands in) or a product's own code repo, which is where a worker
 //      writes `shots/…` and then names it on a card.
+import fs from 'node:fs';
 import path from 'node:path';
+import { Readable } from 'node:stream';
 import { IMG_SCHEME, IMG_SCHEMES, isScheme } from '../shared/schemes.mjs';
 
 // The name is read rather than typed, and every spelling this app has used is
@@ -51,6 +53,12 @@ export const IMG_HOST = 'file';
 
 const PICTURES = new Set(['.png', '.jpg', '.jpeg', '.gif', '.webp', '.avif', '.bmp', '.ico']);
 
+// AND A SOUND OR A FILM, SINCE 2026-09-29, so a voice sample or a render a
+// worker names plays in the message (ArtifactMedia in Focus.tsx) instead of
+// sitting there as a grey path. Same two rules, same roots: this only widens
+// what counts as something to look at, to include something to listen to.
+const MEDIA = new Set(['.mp3', '.wav', '.m4a', '.aac', '.ogg', '.mp4', '.mov', '.m4v', '.webm']);
+
 /** The url the renderer draws, for a picture already resolved on disk. */
 export function imgUrl(file) {
   if (typeof file !== 'string' || !path.isAbsolute(file)) return null;
@@ -82,9 +90,70 @@ function inside(dir, file) {
   return f === d || f.startsWith(d + path.sep);
 }
 
+const MEDIA_TYPES = {
+  '.mp3': 'audio/mpeg', '.wav': 'audio/wav', '.m4a': 'audio/mp4', '.aac': 'audio/aac', '.ogg': 'audio/ogg',
+  '.mp4': 'video/mp4', '.mov': 'video/quicktime', '.m4v': 'video/mp4', '.webm': 'video/webm',
+};
+
+/** The content type of a sound or a film, or null when `file` is neither. */
+export function mediaType(file) {
+  return MEDIA_TYPES[path.extname(String(file ?? '')).toLowerCase()] ?? null;
+}
+
+// A PLAYER ASKS FOR A SOUND IN PIECES, AND net.fetch IGNORES THE ASK.
+// Measured in a hidden Electron window on 2026-09-29 against one of her voice
+// samples, served on this scheme through net.fetch: it loaded and reported its
+// 39.36 seconds, and could not be moved. `seekable` was [0, 0] and a jump to
+// the middle stayed at 0, with or without the Range header passed through,
+// because a file:// fetch answers every range with the whole file and a 200.
+// So a sound or a film is answered here, in the byte range the player asked
+// for, with a 206.
+/**
+ * The bytes a Range header asks for, as { start, end } inclusive, or null for
+ * the whole file, or false when the range cannot be served. Only one range.
+ */
+export function byteRange(header, size) {
+  if (!header) return null;
+  const m = /^bytes=(\d*)-(\d*)$/.exec(String(header).trim());
+  if (!m || (m[1] === '' && m[2] === '')) return null;
+  let start;
+  let end;
+  if (m[1] === '') {
+    // The last N bytes.
+    start = Math.max(0, size - Number(m[2]));
+    end = size - 1;
+  } else {
+    start = Number(m[1]);
+    end = m[2] === '' ? size - 1 : Math.min(Number(m[2]), size - 1);
+  }
+  if (start >= size || start > end) return false;
+  return { start, end };
+}
+
+/**
+ * A sound or a film off disk, answered in the range the player asked for.
+ * The caller has already decided the file may be served (`servable`).
+ */
+export async function mediaResponse(file, rangeHeader) {
+  const { size } = await fs.promises.stat(file);
+  const range = byteRange(rangeHeader, size);
+  const headers = new Headers({ 'content-type': mediaType(file) ?? 'application/octet-stream', 'accept-ranges': 'bytes' });
+  if (range === false) {
+    headers.set('content-range', `bytes */${size}`);
+    return new Response(null, { status: 416, headers });
+  }
+  if (size === 0) return new Response(null, { status: 200, headers });
+  const { start, end } = range ?? { start: 0, end: size - 1 };
+  headers.set('content-length', String(end - start + 1));
+  if (range) headers.set('content-range', `bytes ${start}-${end}/${size}`);
+  const body = Readable.toWeb(fs.createReadStream(file, { start, end }));
+  return new Response(body, { status: range ? 206 : 200, headers });
+}
+
 /** Is this a picture the window is allowed to draw? Pure, so it is testable. */
 export function servable(file, roots) {
   if (typeof file !== 'string' || !path.isAbsolute(file)) return false;
-  if (!PICTURES.has(path.extname(file).toLowerCase())) return false;
+  const ext = path.extname(file).toLowerCase();
+  if (!PICTURES.has(ext) && !MEDIA.has(ext)) return false;
   return (roots ?? []).some((root) => inside(root, file));
 }