@chalky/chalky 0.1.5 → 0.1.7

package/agent/extensions/doodle/browser.js

@@ -175,13 +175,14 @@ export default async function (page) {
   const picture = (full, box) => screen.picture(full, box);  // crop a frame to box (window px) and upload it: {path, url}
 
   // ---- where things are ----
+  const zoom = () => parseFloat(area.style.zoom) || 1;  // the board's zoom (board/browser.js): window px per main px (and per app-frame px)
   const inMain = (x, y) => {  // window px -> main-space px (as note/browser.js)
-    const m = area.getBoundingClientRect();
-    return { x: x - m.left + area.scrollLeft, y: y - m.top + area.scrollTop };
+    const m = area.getBoundingClientRect(), z = zoom();
+    return { x: (x - m.left) / z + area.scrollLeft, y: (y - m.top) / z + area.scrollTop };
   };
   const inWindow = (p) => {
-    const m = area.getBoundingClientRect();
-    return { x: p.x + m.left - area.scrollLeft, y: p.y + m.top - area.scrollTop };
+    const m = area.getBoundingClientRect(), z = zoom();
+    return { x: m.left + (p.x - area.scrollLeft) * z, y: m.top + (p.y - area.scrollTop) * z };
   };
   const short = (s, n = 40) => { s = (s || "").replace(/\s+/g, " ").trim(); return s.length > n ? s.slice(0, n - 1) + "…" : s; };
 
@@ -266,7 +267,7 @@ export default async function (page) {
     const at = inMain(box.x, box.y);  // the part of the main space the picture shows, so the agent can place things
     const step = { drawn: marks.length > 0, words: marks.filter((m) => m.text).map((m) => m.text), then: [], shot: null,
                    board: Number(document.body.dataset.board) || 1,  // the board shown (board/)
-                   area: { x: Math.round(at.x), y: Math.round(at.y), width: Math.round(box.w), height: Math.round(box.h) } };
+                   area: { x: Math.round(at.x), y: Math.round(at.y), width: Math.round(box.w / zoom()), height: Math.round(box.h / zoom()) } };
     step.ready = full ? picture(full, box).then((s) => { step.shot = s; }, () => {}) : Promise.resolve();
     steps.push(step);
     for (const m of marks) m.el.remove();
@@ -303,10 +304,10 @@ export default async function (page) {
       doc.head.append(s);
       classes(doc.documentElement);
     }
-    const offset = () => {
-      if (!frameEl) return { x: 0, y: 0 };
-      const r = frameEl.getBoundingClientRect();
-      return { x: r.left + frameEl.clientLeft, y: r.top + frameEl.clientTop };
+    const offset = () => {  // an app frame's (0, 0) in window px, and window px per frame px (k: zoomed with the main space)
+      if (!frameEl) return { x: 0, y: 0, k: 1 };
+      const r = frameEl.getBoundingClientRect(), k = zoom();
+      return { x: r.left + frameEl.clientLeft * k, y: r.top + frameEl.clientTop * k, k };
     };
     const root = frameEl ? doc : area;
     root.addEventListener("pointerdown", (e) => {
@@ -316,16 +317,16 @@ export default async function (page) {
       if (erasing) {  // the press is for the eraser, not for what's under it
         e.preventDefault();
         press = { erase: true, win };
-        eraseAt(inMain(e.clientX + o.x, e.clientY + o.y));
+        eraseAt(inMain(o.x + e.clientX * o.k, o.y + e.clientY * o.k));
         return;
       }
       grabbed = marks.length ? frame() : null;  // before the click acts
       if (e.target.closest?.(texting && !drawing ? ".doodle-note" : OWN_DRAG)) return;
       if (texting) e.preventDefault();  // the press is for the words (or a line), not for what's under it
-      press = { x: e.clientX + o.x, y: e.clientY + o.y, id: e.pointerId, target: e.target, win, o, text: texting };
+      press = { x: o.x + e.clientX * o.k, y: o.y + e.clientY * o.k, id: e.pointerId, target: e.target, win, o, text: texting };
     }, true);
     win.addEventListener("pointermove", (e) => {
-      const o = offset(), x = e.clientX + o.x, y = e.clientY + o.y;
+      const o = offset(), x = o.x + e.clientX * o.k, y = o.y + e.clientY * o.k;
       over = frameEl || e.target.closest?.("#top") ? { x, y } : null;
       if (press?.erase && press.win === win) { win.getSelection().removeAllRanges(); eraseAt(inMain(x, y)); return; }
       if (!press || press.win !== win || !drawing) return;
@@ -495,7 +496,7 @@ export default async function (page) {
     hideAsk();
     const last = marks.at(-1).points.at(-1), to = document.getElementById("to")?.value || "agent1";
     ask = Object.assign(document.createElement("form"), { className: "doodle-ask" });
-    const m = area.getBoundingClientRect(), room = inMain(m.left + area.clientWidth - 316, m.bottom - 140);  // inside the view (not under the scrollbar)
+    const m = area.getBoundingClientRect(), z = zoom(), room = inMain(m.left + (area.clientWidth - 316) * z, m.bottom - 140 * z);  // inside the view (not under the scrollbar)
     Object.assign(ask.style, { left: `${Math.min(last.x + 16, room.x)}px`, top: `${Math.min(last.y + 12, room.y)}px` });
     const field = Object.assign(document.createElement("input"), { placeholder: `Say something… (Enter sends to ${to})`, autocomplete: "off" });
     field.setAttribute("aria-label", "Words to send with your marks");
@@ -527,10 +528,11 @@ export default async function (page) {
   const distBox = (b, q) => Math.hypot(Math.max(b.x - q.x, 0, q.x - b.x - b.w), Math.max(b.y - q.y, 0, q.y - b.y - b.h));
   const inPoly = (pts, q) => { let c = false; for (let i = 0, j = pts.length - 1; i < pts.length; j = i++) { const a = pts[i], b = pts[j];
                                if ((a.y > q.y) !== (b.y > q.y) && q.x < (b.x - a.x) * (q.y - a.y) / (b.y - a.y) + a.x) c = !c; } return c; };
-  const frameOffset = (fr) => { const r = fr.getBoundingClientRect(); return { x: r.left + fr.clientLeft, y: r.top + fr.clientTop }; };
-  function rectOf(el, fr) {  // an element (or a Range), in main px; fr: the app frame it is in
-    const r = el.getBoundingClientRect(), o = fr ? frameOffset(fr) : { x: 0, y: 0 }, p = inMain(r.left + o.x, r.top + o.y);
-    return { x: p.x, y: p.y, w: r.width, h: r.height };
+  const frameOffset = (fr) => { const r = fr.getBoundingClientRect(), k = zoom(); return { x: r.left + fr.clientLeft * k, y: r.top + fr.clientTop * k, k }; };
+  function rectOf(el, fr) {  // an element (or a Range), in main px; fr: the app frame it is in (its px: main px)
+    const r = el.getBoundingClientRect(), o = fr ? frameOffset(fr) : { x: 0, y: 0, k: 1 }, p = inMain(o.x + r.left * o.k, o.y + r.top * o.k);
+    const s = fr ? 1 : 1 / zoom();  // window px -> main px
+    return { x: p.x, y: p.y, w: r.width * s, h: r.height * s };
   }
   const scopes = (el) => [{ root: el, fr: null }, ...[...(el.localName === "iframe" ? [el] : el.querySelectorAll("iframe"))].flatMap((fr) => {
     try { return fr.contentDocument?.body ? [{ root: fr.contentDocument.body, fr }] : []; } catch { return []; }  // other origins: not ours
@@ -671,7 +673,7 @@ export default async function (page) {
     if (under && !area.contains(under) && under !== document.documentElement && under !== document.body)
       return { box: { x, y, w, h }, board: Number(board()), fixed: true };
     const p = inMain(x, y);
-    return { box: { x: p.x, y: p.y, w, h }, board: Number(board()) };
+    return { box: { x: p.x, y: p.y, w: w / zoom(), h: h / zoom() }, board: Number(board()) };
   }
   function findMain(t, every) {
     if (t.mark) {

package/agent/extensions/file/browser.js

@@ -3,6 +3,8 @@
 //   Files dragged from the computer onto the page: uploaded (POST /file/upload), then a "file-dropped"
 //   DOM event {x, y, files: [{name, path, size}]} at the drop spot (the note extension opens its note box
 //   there). Dropped onto the panel itself: only stored.
+//   Pasted (Ctrl+V / ⌘V) with files on the clipboard: the same as a drop where the pointer last was (copied
+//   images, all named image.png, become pasted-<date>-<time>.png). Text pastes as usual.
 //   A row dragged out of the panel onto the page: the same event, with that file.
 //   A click on a row, or files dropped from the computer (the first of them): a "file-open" DOM event
 //   {file, row} (the viewer extension opens a preview window attached to the row; rows carry data-path).
@@ -42,7 +44,11 @@ export default async function (page) {
     #side .file-bar button { font: inherit; color: var(--text); background: var(--glass-strong); border: 1px solid var(--line);
                               border-radius: 8px; padding: 3px 10px; cursor: pointer; }
     #side .file-bar .delete { color: #fff; background: var(--danger); border-color: transparent; }
-    #side .file-row:hover, #side .file-row.viewing { background: var(--hover); color: var(--text); }`;
+    #side .file-row:hover, #side .file-row.viewing { background: var(--hover); color: var(--text); }
+    .file-uploading { position: fixed; z-index: 200000; max-width: 240px; padding: 5px 10px; border-radius: 10px; font-size: 12px;
+                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
+                      background: var(--glass-strong); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
+                      border: 1px solid var(--edge); box-shadow: var(--shadow); }`;
   document.head.append(style);
 
   const toggle = document.createElement("button");
@@ -129,15 +135,48 @@ export default async function (page) {
     side.removeAttribute("data-over");
     const { clientX: x, clientY: y } = e;
     if (k === "row") return onPanel(e) || dropped(x, y, [JSON.parse(e.dataTransfer.getData(ROW))]);
-    const stored = [];
-    for (const f of [...e.dataTransfer.files].slice(0, 10)) {
+    store([...e.dataTransfer.files], x, y, onPanel(e));
+  });
+
+  // Upload files (at most MAX), then preview the first and fire "file-dropped" at (x, y), unless they landed on the panel
+  const MAX = 10;
+  async function store(all, x, y, panel, names = all.map((f) => f.name)) {
+    if (all.length > MAX) page.notice([`You added ${all.length} files: only the first ${MAX} were kept.`]);
+    const stored = [], files = all.slice(0, MAX), size = files.reduce((n, f) => n + f.size, 0);
+    const tag = Object.assign(document.createElement("div"), { className: "file-uploading",
+      textContent: `Uploading ${files.length > 1 ? `${files.length} files` : names[0]} · ${Math.ceil(size / 1024)} KB` });
+    Object.assign(tag.style, { left: `${Math.min(x + 14, innerWidth - 260)}px`, top: `${Math.min(y + 16, innerHeight - 40)}px` });
+    const slow = setTimeout(() => document.body.append(tag), 500);  // only when it takes a while
+    for (const [i, f] of files.entries()) {
       try {
-        const out = await (await fetch(`/file/upload?name=${encodeURIComponent(f.name)}`, { method: "POST", body: f })).json();
+        const out = await (await fetch(`/file/upload?name=${encodeURIComponent(names[i])}`, { method: "POST", body: f })).json();
         if (out.path) stored.push({ name: out.path.split("/").pop(), path: out.path, size: out.size });
-        else page.note(`Could not upload ${f.name}: ${out.error}`);
-      } catch (err) { page.note(`Could not upload ${f.name}: ${err}`); }
+        else page.notice([`Could not upload ${names[i]}: ${out.error}`]);
+      } catch (err) { page.notice([`Could not upload ${names[i]}: ${err}`]); }
     }
+    clearTimeout(slow); tag.remove();
     if (stored.length) opened(stored[0]);  // the list has its row by now (the "file" event comes before the reply)
-    if (stored.length && !onPanel(e)) dropped(x, y, stored);
+    if (stored.length && !panel) dropped(x, y, stored);
+  }
+
+  // Paste (Ctrl+V / ⌘V): files on the clipboard are added as if dropped where the pointer last was.
+  // Text pastes as usual. A paste inside a card's app goes to that app (its own page): Chalky never hears it.
+  let pointer = { x: innerWidth / 2, y: innerHeight / 2 };
+  document.addEventListener("pointermove", (e) => { pointer = { x: e.clientX, y: e.clientY }; }, { passive: true });
+  document.addEventListener("paste", (e) => {
+    const files = [...(e.clipboardData?.files || [])];
+    if (!files.length) {  // a Linux file manager copies the file's address, not the file
+      const text = e.clipboardData?.getData("text/plain") ?? "";
+      const typing = e.target.closest?.("input, textarea, [contenteditable]");
+      if (!typing && /^file:\/\//.test(text.trim())) page.notice(["You copied a file's address, not the file. Drag the file onto the page instead."]);
+      return;
+    }
+    e.preventDefault();
+    const d = new Date(), p = (n) => String(n).padStart(2, "0");
+    const stamp = `pasted-${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}-${p(d.getHours())}${p(d.getMinutes())}`;
+    let n = 0;  // every copied image arrives as image.png
+    const names = files.map((f) => (!f.name || f.name === "image.png") ? `${stamp}${n++ ? `-${n}` : ""}.${f.type.split("/")[1] || "png"}` : f.name);
+    const { x, y } = pointer;
+    store(files, x, y, side.contains(document.elementFromPoint(x, y)), names);
   });
 }

package/agent/extensions/file/index.ts

@@ -3,7 +3,8 @@
 // the page (from the computer: uploaded here, listed, and a "file-dropped" DOM event so note's browser.js opens its note
 // box there; onto the panel itself: only stored; a row from the panel: the same event with that file).
 // The agent always knows the folder (its prompt section); files it saves there show in the panel too (the list is
-// sent again when an agent's turn is over: pi's agent_settled).
+// sent again after each of its tool calls, pi's tool_execution_end, if it changed: a file it saves shows at once,
+// while it is still working).
 //   POST /file/upload?name=<file name>  the file's bytes: saved in DIR (a safe, new name), returns {path, size}
 //   GET  /file                           [{name, path, size}], newest first; files in folders too ("q3/costs.xlsx")
 //   POST /file/delete                   {names: [...]} (names as listed): deleted for good, returns {deleted, errors}
@@ -37,7 +38,7 @@ function changed(always = false) {  // tell the pages, if the list is not what t
 }
 
 export default function (pi: ExtensionAPI) {
-  pi.on("agent_settled", () => changed());  // the agent may have saved files there
+  pi.on("tool_execution_end", () => changed());  // the agent may have saved files there
   if (!host.shared.has("file-last")) host.shared.set("file-last", JSON.stringify(listing()));
 
   host.routes.set("/file", (_req: any, res: any) => res.writeHead(200, { "content-type": "application/json" }).end(JSON.stringify(listing())));

package/agent/extensions/frame/README.md

@@ -24,8 +24,8 @@ one design, not separate requests: they share one look, and often each other's d
   on the page, with no agent in between. Separate block cards with {"ref"} props are for a frame that only
   shows another's data (refs only read). Don't change the page's own code (page.html, the browser.js files) to
   link frames.
-- Fill a frame with card_show(card=<its id>, place=<its place>, ...): its dashed box goes when that
-  card appears. Keep the place: the user chose where and how big.
+- Fill a frame with card_show(place=<its place>, ...), with any card id (a name for what it is): its
+  dashed box goes when a card appears exactly there. Keep the place: the user chose where and how big.
 - Split the work when it pays: several frames that are each real work and don't depend on each other can
   go to helpers in parallel (team_spawn, or idle agents you have): tell each one its frame, and what done
   means: "card <id> shown at <place>, doing <their words>". Say the shared look in each message

package/agent/extensions/frame/browser.js

@@ -71,9 +71,10 @@ export default async function (page) {
   const board = () => Number(document.body.dataset.board) || 1;  // the board shown (board/): frames are drawn and sent there
   document.addEventListener("board", () => setTimeout(() => render(shown)));  // after the switch: count that board's
 
+  const zoom = () => parseFloat(area.style.zoom) || 1;  // the board's zoom (board/browser.js)
   const inMain = (x, y) => {  // window px -> main-space px (as note/browser.js)
-    const m = area.getBoundingClientRect();
-    return { x: Math.round(x - m.left + area.scrollLeft), y: Math.round(y - m.top + area.scrollTop) };
+    const m = area.getBoundingClientRect(), z = zoom();
+    return { x: Math.round((x - m.left) / z + area.scrollLeft), y: Math.round((y - m.top) / z + area.scrollTop) };
   };
   const put = (box, f) => Object.assign(box.style, { left: `${f.x}px`, top: `${f.y}px`, width: `${f.width}px`, height: `${f.height}px` });
 
@@ -154,8 +155,9 @@ export default async function (page) {
     const corner = e.currentTarget, x = box.offsetLeft, y = box.offsetTop, w0 = box.offsetWidth, h0 = box.offsetHeight;
     corner.setPointerCapture(e.pointerId);
     let place = null;
+    const z = zoom();  // window px moved -> main px
     corner.onpointermove = (ev) => {
-      place = { x, y, width: Math.max(40, Math.round(w0 + ev.clientX - e.clientX)), height: Math.max(30, Math.round(h0 + ev.clientY - e.clientY)) };
+      place = { x, y, width: Math.max(40, Math.round(w0 + (ev.clientX - e.clientX) / z)), height: Math.max(30, Math.round(h0 + (ev.clientY - e.clientY) / z)) };
       put(box, place);
     };
     corner.onpointerup = () => {

package/agent/extensions/frame/index.ts

@@ -3,12 +3,12 @@
 // so it sees the whole layout and decides how to split the work (alone, or with helpers: README.md, not code).
 // A frame is {x, y, width, height, text, sent, to?, board} (main-space px, where card_show's place puts a card;
 // board: the one it was drawn on, board/; Implement sends the frames of the board shown), with an
-// id (frame-1, frame-2, ...: never reused). An agent fills it with card_show(card="frame-1", place=<its place>);
-// when that card appears (a card watcher, host.api.card.watch), the frame is done and its dashed box goes. The user
+// id (frame-1, frame-2, ...: never reused). An agent fills it with card_show(place=<its place>) (any card id);
+// when a card appears at its place (or with its id) (a card watcher, host.api.card.watch), the frame is done and its dashed box goes. The user
 // can remove a frame (its ✕); if it was sent, its agent is told. Until a frame is sent, its corner resizes it.
 //   GET /frame              {id: frame}
 //   page messages           frame_add {x, y, width, height, board}, frame_place {id, x, y, width, height}, frame_text {id, text},
-//                           frame_remove {id}, frame_send {to, board}
+//                           frame_remove {id}, frame_send {to, board, by?} (by: the agent whose code pressed Implement)
 //   event "frame"           {frames: {id: frame}} to every open page, when they changed
 // Saved in data/frame.json as {last: <last id number>, frames: {id: frame}}; shared by every agent (host.shared).
 import fs from "node:fs";
@@ -32,10 +32,17 @@ const place = (f: any) => JSON.stringify({ x: f.x, y: f.y, width: f.width, heigh
 
 export default function (pi: ExtensionAPI) {
 
-  // a frame is done when a card with its id appears (after all extensions loaded: the card one may come later)
+  // a frame is done when a card appears at its place on its board, or with its id (after all extensions loaded: the
+  // card one may come later). The place is what the user chose; agents often give the card a name of its own.
   pi.on("session_start", () => {
     host.api.card?.watch("frame", (sid: string) => {
-      if (frames[sid] && host.shared.get("card")?.cards[sid]) { delete frames[sid]; changed(); }
+      const card = host.shared.get("card")?.cards[sid];
+      if (!card) return;
+      const at = (f: any) => card.place && (card.board ?? 1) === (f.board ?? 1)
+        && ["x", "y", "width", "height"].every((k) => Math.round(card.place[k]) === f[k]);
+      const done = Object.keys(frames).filter((id) => id === sid || at(frames[id]));
+      for (const id of done) delete frames[id];
+      if (done.length) changed();
     });
     host.api.board?.onRemove("frame", (n: number) => {  // a removed board (board/) takes its frames with it
       const ids = Object.keys(frames).filter((id) => (frames[id].board ?? 1) === n);
@@ -70,9 +77,11 @@ export default function (pi: ExtensionAPI) {
       if (!ready.length) return;
       for (const [, f] of ready as any) Object.assign(f, { sent: true, to });
       changed();
-      const lines = [`[frames on the page] the user laid out ${ready.length} frame${ready.length > 1 ? "s" : ""} on board ${board} to fill:`,
+      // by: an agent's code pressed Implement (page/browser.js), not the user
+      const who = !msg.by ? "the user laid out" : msg.by === to ? "you pressed Implement for" : `${msg.by} pressed Implement for`;
+      const lines = [`[frames on the page] ${who} ${ready.length} frame${ready.length > 1 ? "s" : ""} on board ${board} to fill:`,
         ...ready.map(([id, f]: any) => `  ${id}: "${f.text}" · place=${place(f)}`),
-        `  Fill each with card_show(card=<its id>, place=<its place>, board=${board}, ...); its dashed box goes when it appears.`];
+        `  Fill each with card_show(place=<its place>, board=${board}, ...) (any card id): its dashed box goes when a card appears there.`];
       const waiting = Object.keys(frames).filter((id) => frames[id].sent && !ready.some(([r]) => r === id));
       if (waiting.length) lines.push(`  Sent before and not filled yet: ${waiting.join(", ")}.`);
       team.send("user", to, lines.join("\n"));

package/agent/extensions/history/index.ts

@@ -88,7 +88,9 @@ export default function (pi: ExtensionAPI) {
   pi.on("session_start", () => {
     if (!host.shared.has("history")) host.shared.set("history", new History(host.shared.get("card")));
     host.api.history = host.shared.get("history");
-    host.api.card?.watch("history", (_id: string, by?: string, what?: string) => { if (what) host.api.history.add(by, what); });
+    host.api.card?.watch("history", (_id: string, by?: string, what?: string) => {  // the card's words don't say who
+      if (what) host.api.history.add(by, `${by === "user" ? "you" : by} ${what}`);
+    });
   });
   const shared = (): History | undefined => host.shared.get("history");
 

package/agent/extensions/note/README.md

@@ -32,4 +32,6 @@ thing has partAt), its text, and the file it comes from. Act on that exact thing
   pointer ("this one") use the pen (doodle_mark) instead.
 - When you did what a note asked, note_done(id): its pin turns into a faded ✓, which the user can reopen or delete. If your
   answer leaves anything to them (you suggest something, ask, or offer a choice), leave the note open: their reply
-  comes in the same thread, and you close it once that is settled. The user can close one too (✓ Done); you get an fyi.
+  comes in the same thread, and you close it once that is settled. The user can close one too (✓) or delete it (✕);
+  you get an fyi. A note you started that is no longer needed (it explained a step, the step is past) can go for
+  good: note_done(id, delete: true). Notes the user or another agent started you only close.

package/agent/extensions/note/browser.js

@@ -1,5 +1,5 @@
-// The page side of the note extension. A pencil button in the tool palette (top) turns on a clear
-// layer over the page; the cursor is a pen, blue over something a click would point at.
+// The page side of the note extension. A speech-bubble button in the tool palette (top) turns on a clear
+// layer over the page; the cursor is a speech bubble, blue over something a click would point at.
 //   Click: a note box opens there.  Hold the button and draw: on release the note box opens, and the note
 //   covers the drawn area (its bounding box, in main-space px: where card_show's place puts a card).
 // The user sees only the box; the target goes to the agent with the note: card and block (from
@@ -9,7 +9,8 @@
 // tells every open page to pin it, with its drawing). Esc or the button turns it off.
 // Pins: a numbered pin per note (the agents' in their colour), on the thing it is on, scrolling with the main space
 // and moving with its card. Click one for its thread: who wrote what, a reply box (Enter sends it to the note's
-// agent), ✓ Done; a closed note stays as a faded ✓ (Reopen, or Delete for good). An agent's reply opens the bubble while
+// agent), ✓ (close) and ✕ (delete) at its top right; a closed note stays as a faded ✓ (Reopen). ✕ asks nothing: the pin
+// goes, a notice offers Undo for a few seconds, and only then is the delete sent. An agent's new note, or its reply, opens the bubble while
 // the note stays open. Show marks (doodle/)
 // hides the pins with the other marks.
 // The same note box opens for two more things (Enter on an empty box sends its faded suggestion):
@@ -27,11 +28,11 @@ export default async function (page) {
 
   const layer = document.createElement("div");  // catches clicks, so the page underneath doesn't react
   layer.style.cssText = "position:fixed;inset:0;z-index:9998;display:none";
-  // The cursor: the button's pen (white edge, so it shows on dark too), its tip (4, 20) is the spot pointed at.
+  // The cursor: the button's speech bubble (white edge, so it shows on dark too); its tail's tip (2, 22) is the spot pointed at.
+  const BUBBLE = "M7.9 20A9 9 0 1 0 4 16.1L2 22z";
   const pen = (color) => `url("data:image/svg+xml,${encodeURIComponent(
     `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round">` +
-    `<g stroke="#fff" stroke-width="4"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13 7 4 4"/></g>` +
-    `<g stroke="${color}" stroke-width="2"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13 7 4 4"/></g></svg>`)}") 4 20, crosshair`;
+    `<path d="${BUBBLE}" stroke="#fff" stroke-width="4"/><path d="${BUBBLE}" stroke="${color}" stroke-width="2"/></svg>`)}") 2 22, crosshair`;
   const PEN = pen("#6e6e73"), PEN_ON = pen("#0071e3");  // grey: empty space; blue: over a thing
   layer.style.cursor = PEN;
   const input = document.createElement("input");  // the note box, opened where the user clicked
@@ -59,7 +60,7 @@ export default async function (page) {
   document.body.append(layer, ink, input);
 
   const button = document.createElement("button");
-  button.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20h4L19 9l-4-4L4 16z"/><path d="m13 7 4 4"/></svg>`;
+  button.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true"><path d="${BUBBLE}"/></svg>`;  // a speech bubble
   button.title = "Point: click anything, or hold and draw around an area, then write a note (Esc to stop)";
   button.dataset.name = "note";  // names an agent's pen can point at
   page.slot("status").prepend(button);  // the first tool in the palette, whichever script loads first
@@ -78,8 +79,13 @@ export default async function (page) {
     [...e.classList].slice(0, 2).map((c) => `.${c}`).join("");
 
   function inMain(x, y) {  // window px -> main-space px (the main space scrolls; card_show's place uses these)
-    const main = page.slot("top"), m = main.getBoundingClientRect();
-    return { x: Math.round(x - m.left + main.scrollLeft), y: Math.round(y - m.top + main.scrollTop) };
+    const main = page.slot("top"), m = main.getBoundingClientRect(), z = zoom();  // the board's zoom (board/browser.js)
+    return { x: Math.round((x - m.left) / z + main.scrollLeft), y: Math.round((y - m.top) / z + main.scrollTop) };
+  }
+  function zoom() { return parseFloat(page.slot("top").style.zoom) || 1; }  // window px per main px (and per app-frame px)
+  function inFrame(fr, x, y) {  // window px -> px in an app's frame (zoomed with the main space)
+    const r = fr.getBoundingClientRect(), z = zoom();
+    return [(x - r.left) / z - fr.clientLeft, (y - r.top) / z - fr.clientTop];
   }
 
   function target(x, y) {
@@ -88,9 +94,9 @@ export default async function (page) {
     let inner = null, frame = null, box = el.getBoundingClientRect();
     if (el.localName === "iframe") {  // look inside the frame (an App): same origin, so its document is readable
       try {
-        const r = el.getBoundingClientRect(), dx = r.left + el.clientLeft, dy = r.top + el.clientTop;
-        inner = el.contentDocument?.elementFromPoint(x - dx, y - dy);
-        if (inner) { frame = el; const b = inner.getBoundingClientRect(); box = new DOMRect(b.x + dx, b.y + dy, b.width, b.height); }
+        const r = el.getBoundingClientRect(), z = zoom(), dx = r.left + el.clientLeft * z, dy = r.top + el.clientTop * z;
+        inner = el.contentDocument?.elementFromPoint(...inFrame(el, x, y));
+        if (inner) { frame = el; const b = inner.getBoundingClientRect(); box = new DOMRect(dx + b.x * z, dy + b.y * z, b.width * z, b.height * z); }
       } catch {}
     }
     const hitEl = inner || el;
@@ -109,8 +115,7 @@ export default async function (page) {
     let part = null;  // what the thing itself says is at this spot (partAt), e.g. {"name": "enemy-2"}
     try {
       if (frame?.contentWindow?.partAt) {
-        const r = frame.getBoundingClientRect();
-        part = frame.contentWindow.partAt(x - r.left - frame.clientLeft, y - r.top - frame.clientTop);
+        part = frame.contentWindow.partAt(...inFrame(frame, x, y));
       } else {
         const owner = [hitEl, ...[...document.elementsFromPoint(x, y)]].find((e) => typeof e?.partAt === "function");
         if (owner) { const r = owner.getBoundingClientRect(); part = owner.partAt(x - r.left, y - r.top); }
@@ -187,8 +192,7 @@ export default async function (page) {
     const el = document.elementsFromPoint(x, y).find((e) => e !== layer && e !== ink);
     if (el?.localName === "iframe") {
       try {
-        const r = el.getBoundingClientRect(), dx = r.left + el.clientLeft, dy = r.top + el.clientTop;
-        if (typeof el.contentWindow.partIn === "function") return await el.contentWindow.partIn(points.map(([px, py]) => [px - dx, py - dy]));
+        if (typeof el.contentWindow.partIn === "function") return await el.contentWindow.partIn(points.map(([px, py]) => inFrame(el, px, py)));
       } catch (err) { console.warn("partIn:", err); }
     }
     const owner = document.elementsFromPoint(x, y).find((e) => typeof e.partIn === "function");
@@ -203,7 +207,7 @@ export default async function (page) {
     const left = Math.min(...xs), top = Math.min(...ys), width = Math.max(...xs) - left, height = Math.max(...ys) - top;
     if (width < 12 && height < 12) return openNote(target(e.clientX, e.clientY), e.clientX, e.clientY);
     const t = target(left + width / 2, top + height / 2);  // what is under the middle of the drawing
-    if (t) t.area = { ...inMain(left, top), width: Math.round(width), height: Math.round(height) };
+    if (t) t.area = { ...inMain(left, top), width: Math.round(width / zoom()), height: Math.round(height / zoom()) };
     const inside = t && (await partIn(left + width / 2, top + height / 2, points));
     if (inside) t.part = inside;
     openNote(t, e.clientX, e.clientY, points);
@@ -246,6 +250,9 @@ export default async function (page) {
     .note-pin .bubble .busy { color: var(--muted, #888); font-style: italic; }
     .note-pin .bubble textarea { width: 100%; box-sizing: border-box; min-height: 48px; resize: vertical; font: inherit; padding: 6px 8px;
       border-radius: 8px; border: 1px solid rgba(0, 0, 0, .15); outline: none; background: rgba(255, 255, 255, .8); }
+    .note-pin .bubble .top { float: right; display: flex; gap: 2px; margin: -4px -6px 0 6px; }
+    .note-pin .bubble .top button { width: 24px; height: 24px; border-radius: 6px; font-size: 13px; color: var(--soft, #555); }
+    .note-pin .bubble .top button:hover { background: var(--hover, rgba(0, 0, 0, .05)); color: var(--text, #1d1d1f); }
     .note-pin .bubble .acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
     .note-pin .bubble .acts button { padding: 3px 10px; border-radius: 999px; font-size: 12px; border: 1px solid rgba(0, 0, 0, .12); }
     .note-pin .bubble .acts button.primary { color: #fff; background: var(--accent, #0071e3); border-color: transparent; }`;
@@ -262,7 +269,21 @@ export default async function (page) {
     if (card) { const r = card.getBoundingClientRect(), c = inMain(r.left, r.top); return { x: c.x + n.anchor.dx, y: c.y + n.anchor.dy }; }
     return n.at ?? { x: 0, y: 0 };
   }
+  // Deleting: the pin goes at once, and a notice offers Undo for UNDO_MS; only then is the delete sent (so an undo
+  // needs nothing from the server, and other pages keep the note until it is really gone)
+  const UNDO_MS = 6000;
+  const leaving = {};  // id -> timer, while its undo is offered
+  function remove(id) {
+    openId = null;
+    pins[id]?.remove(); delete pins[id];
+    const undo = Object.assign(document.createElement("button"), { type: "button", className: "go", textContent: "Undo" });
+    const notice = page.notice(["Note deleted", undo], () => {});
+    const gone = () => { delete leaving[id]; notice.close(); page.send({ type: "note_delete", id }); };
+    leaving[id] = setTimeout(gone, UNDO_MS);
+    undo.onclick = () => { clearTimeout(leaving[id]); delete leaving[id]; notice.close(); if (notes[id]) draw(id); };
+  }
   function draw(id) {
+    if (id in leaving) return;  // deleted, its undo still offered
     const n = notes[id];
     let el = pins[id];
     if (!el) {
@@ -283,6 +304,7 @@ export default async function (page) {
     }
     const b = Object.assign(document.createElement("button"), { className: "pin", type: "button", textContent: n.state === "open" ? id.slice(1) : "✓",
       title: `${n.thread[0]?.text ?? ""}${n.state === "open" ? "" : " (closed)"}` });
+    b.setAttribute("aria-label", `note ${id}${n.state === "open" ? "" : " (closed)"}: ${n.thread[0]?.text ?? ""}`);  // what read() and screen readers say
     Object.assign(b.style, { left: `${p.x}px`, top: `${p.y}px` });
     b.onclick = (e) => { e.stopPropagation(); openId = openId === id ? null : id; for (const k of Object.keys(pins)) draw(k); };
     el.append(b);
@@ -309,6 +331,16 @@ export default async function (page) {
       b.onclick = fn;
       acts.append(b);
     };
+    // top right: ✓ closes (a faded pin, can be reopened), ✕ deletes (no question: a few seconds to undo instead)
+    const top = Object.assign(document.createElement("div"), { className: "top" });
+    const corner = (text, title, fn) => {
+      const b = Object.assign(document.createElement("button"), { type: "button", textContent: text, title });
+      b.onclick = fn;
+      top.append(b);
+    };
+    if (n.state === "open") corner("✓", "Done: close this note", () => { openId = null; page.send({ type: "note_close", id }); });
+    corner("✕", "Delete this note", () => remove(id));
+    d.prepend(top);
     if (n.state === "open") {
       const ta = Object.assign(document.createElement("textarea"), { placeholder: "Reply… (Enter sends)", value: drafts[id] ?? "" });
       ta.oninput = () => { drafts[id] = ta.value; };
@@ -319,13 +351,9 @@ export default async function (page) {
         if (e.key === "Escape") { openId = null; draw(id); }
       };
       d.append(ta);
-      button("✓ Done", () => { openId = null; page.send({ type: "note_close", id }); });
       button("Reply", go, true);
       setTimeout(() => ta.focus(), 0);
-    } else {
-      button("Delete", () => { if (confirm("Delete this note for good?")) { openId = null; page.send({ type: "note_delete", id }); } });
-      button("Reopen", () => page.send({ type: "note_reopen", id }));
-    }
+    } else button("Reopen", () => page.send({ type: "note_reopen", id }));
     d.append(acts);
     return d;
   }
@@ -338,8 +366,9 @@ export default async function (page) {
   setInterval(layout, 1500);
   page.on("note_pin", ({ id, type, agent, ts, ...n }) => {
     const reply = notes[id] && n.thread.length > notes[id].thread.length && n.thread.at(-1).by !== "user" && n.state === "open";  // an answer still waiting on the user
+    const started = !notes[id] && n.by !== "user" && n.state === "open";  // an agent's new note (the notes there at load come from /note/all)
     notes[id] = n;
-    if (reply && openId !== id) openId = id;  // an agent answered in the thread: show it
+    if ((reply || started) && openId !== id) openId = id;  // an agent wrote: show it open, so the user sees it
     if (openId === id && n.state !== "open" && n.thread.at(-1)?.by !== "user") openId = null;  // and closed it: done, so out of the way
     draw(id);
   });

package/agent/extensions/note/guide.md

@@ -4,5 +4,6 @@ A note is a thread pinned on a thing; you and the user can both start one. The u
 - Change that exact thing. If its text is data (a row, a score), change the card's data, not the block.
 - Answer in the note's thread (note_reply), not in chat. Ask or explain on a thing with note_add(on, text).
 - When you did what it asked, call note_done(id): the pin stays as a faded ✓ the user can reopen. If your answer
-  leaves anything to them (a suggestion, a question, a choice), leave it open for their reply.
+  leaves anything to them (a suggestion, a question, a choice), leave it open for their reply. A note you started
+  that has served its purpose can go: note_done(id, delete: true).
 Before you handle your first note, read README.md.

package/agent/extensions/note/index.ts

@@ -3,13 +3,16 @@
 //   note_add (page)  click anything on the page (or draw around an area) and write: the target is the card,
 //                    block, element, part (partAt), its text and source file, the spot and the area.
 //                    Files dropped on the page come as a note too ("files": paths in <workspace>/drops).
+//                    Written by an agent's code through the page (msg.by, page/browser.js): that agent's own note.
 //   note_combine     the user dragged card a onto card b and wrote how to combine them. The agent changes b to
 //                    take a in, reading a's data live ({"ref"} props); a stays as it is.
 //   note_reply       the user wrote in a note's thread (its bubble): it goes to the note's agent, with the thread so far
-//   note_close / note_reopen / note_delete   the user's ✓ Done in the bubble; Reopen or Delete (for good) on a closed one
+//   note_close / note_reopen / note_delete   the user's ✓ (close) or ✕ (delete, for good; open or closed) at the
+//                    bubble's top right, Reopen on a closed one
 // The agents' tools: note_add(on, text) starts a thread on a thing (on: as doodle_mark's, checked on the open page),
-// note_reply(id, text) writes in one, note_done(id) closes one. A closed note stays as a faded ✓ pin (the user can
-// reopen or delete it); the agents never delete notes, and a removed board takes its notes with it.
+// note_reply(id, text) writes in one, note_done(id) closes one, note_done(id, delete: true) removes one the agent started
+// (never the user's or another agent's). A closed note stays as a faded ✓ pin (the user can reopen or delete it); a
+// removed board takes its notes with it.
 // Each note goes to the card's owner (else the agent picked in the chat; an agent's own note: that agent), gets an id
 // (n1, n2, ...: never reused) and is saved: data/note.json {"last", "notes": {id: {thread: [{by, text, ts}], to, by,
 // board, state: "open" | "done", at: {x, y} (main px), anchor: {card, dx, dy}, stroke, target?, box?}}}. The pin sits
@@ -40,6 +43,12 @@ const save = () => fs.writeFileSync(FILE, JSON.stringify(D));
 const result = (text: string) => ({ content: [{ type: "text" as const, text }], details: undefined });
 const show = (id: string) => host.broadcast("note_pin", { id, ...D.notes[id] });
 const opened = () => Object.keys(D.notes).filter((id) => D.notes[id].state === "open");
+const remove = (id: string) => {  // a note, for good: off every page
+  delete D.notes[id];
+  items.delete(id);
+  save();
+  host.broadcast("note_gone", { id });
+};
 
 function pin(note: any) {  // a new note: saved, pinned on every page
   const id = `n${++D.last}`;
@@ -114,10 +123,18 @@ export default function (pi: ExtensionAPI) {
 
   pi.registerTool({
     name: "note_done", label: "Note done", description: "Close a note that is dealt with (you did what it asked): its pin turns into a faded ✓ (the user can "
-      + "reopen it). Not while your answer waits on the user (a suggestion, a question).",
-    parameters: Type.Object({ id: Type.String({ description: "e.g. n3" }) }),
+      + "reopen it). Not while your answer waits on the user (a suggestion, a question). With delete: true, a note you started "
+      + "goes from the page instead (open or closed), e.g. one that explained a step and has served its purpose.",
+    parameters: Type.Object({ id: Type.String({ description: "e.g. n3" }),
+      delete: Type.Optional(Type.Boolean({ description: "remove it from the page for good: only notes you started" })) }),
     async execute(_id, a) {
       const n = D.notes[a.id];
+      if (a.delete) {
+        if (!n) return result(`error: no note '${a.id}'`);
+        if (n.by !== me()) return result(`error: ${a.id} was started by ${n.by === "user" ? "the user" : n.by}: only its starter deletes it. Close it instead (note_done without delete).`);
+        remove(a.id);
+        return result(`note ${a.id} is gone from the page`);
+      }
       if (!n || n.state !== "open") return result(`error: no open note '${a.id}'. Open notes: ${opened().join(", ") || "none"}`);
       n.state = "done";
       items.delete(a.id);
@@ -142,12 +159,11 @@ export default function (pi: ExtensionAPI) {
       return;
     }
     if (msg.type === "note_reopen" && n?.state === "done") { n.state = "open"; save(); return show(msg.id); }
-    if (msg.type === "note_delete" && n?.state === "done") {  // a closed note, for good
-      delete D.notes[msg.id];
-      items.delete(msg.id);
-      save();
-      host.broadcast("note_gone", { id: msg.id });
-      if (host.agents.has(n.to)) team?.fyi("page", n.to, `[note on the page] the user deleted note ${msg.id} ("${n.thread[0]?.text}"): it is gone from the page.`);
+    if (msg.type === "note_delete" && n) {  // open or closed, for good
+      const item = items.get(msg.id);
+      remove(msg.id);
+      if (host.agents.has(n.to) && !(item && team?.withdraw(item)))  // not seen yet: just take it back
+        team?.fyi("page", n.to, `[note on the page] the user deleted note ${msg.id} ("${n.thread[0]?.text}"): it is gone from the page; drop it if you haven't finished it.`);
       return;
     }
     if (msg.type === "note_reply" && n && team && String(msg.text ?? "").trim()) {
@@ -163,10 +179,17 @@ export default function (pi: ExtensionAPI) {
     }
     if (!["note_add", "note_combine"].includes(msg.type) || !team) return;
     host.api.doodle?.dim();
-    const to = host.agents.has(msg.to) ? msg.to : "agent1";
     const text = msg.text ?? "";
-    const note = { to, by: "user", board: Number(msg.board) || 1, at: msg.at ?? { x: 0, y: 0 }, ...(msg.anchor && { anchor: msg.anchor }),
+    const base = { board: Number(msg.board) || 1, at: msg.at ?? { x: 0, y: 0 }, ...(msg.anchor && { anchor: msg.anchor }),
                    stroke: msg.stroke ?? null };  // with its drawing, if any (main px)
+    // an agent's code wrote it through the page's tools (msg.by, page/browser.js): that agent's own note, as if it
+    // called note_add; nothing to tell it, it knows (the reply to page_run says what happened)
+    if (host.agents.has(msg.by)) {
+      pin({ ...base, to: msg.by, by: msg.by, thread: [{ by: msg.by, text: msg.type === "note_combine" ? `combine ${msg.a} into ${msg.b}: ${text}` : text, ts: Date.now() }] });
+      return;
+    }
+    const to = host.agents.has(msg.to) ? msg.to : "agent1";
+    const note = { ...base, to, by: "user" };
     if (msg.type === "note_combine") {
       const { a, b } = msg;
       const madeFrom = [...(host.shared.get("card")?.cards[b]?.made_from ?? []).filter((m: string) => m !== a), a];