boxglow 0.6.7 → 0.6.8

package/README.md

@@ -11,6 +11,18 @@ Tasks are boxes with inputs and outputs; a box goes New (BlackBox: output decide
 - CLI for agents: `npx boxglow` (status / start / done / split / ask / answer ...)
 - License: MIT
 
+## What's new in 0.6.8
+
+- **Find a box and zoom to it**: Ctrl+F (Cmd+F on a Mac) jumps to the search box from anywhere. Picking a result while zoomed out too far to read titles zooms until the whole box fits, and the new target button next to the box's ID in the side panel does the same on demand. A ring blinks around the box.
+- **Very large plans are much faster**: in a tab with about 1,000 boxes, selecting a box took 12 seconds and switching to Edit about 2.5 minutes; they now take about 0.4 and 2 seconds. On a plan with about 1,200 boxes every edit takes about half a second (5 to 6 seconds before), and zooming is about three times lighter.
+
+Details: [CHANGELOG.md](CHANGELOG.md). Update the CLI, `serve` and the VS Code extension (0.5.8) together.
+
+### 日本語: 0.6.8 の要点
+
+- **箱を探して寄る**: Ctrl+F (Mac は Cmd+F) で、どこからでも検索欄へ移る。題名が読めないほど縮小しているときは、検索で選んだ箱全体が収まるまで寄る。右パネルの ID の横にある照準のボタンでも、選んだ箱へ寄る。寄った箱のまわりで輪が点滅する。
+- **とても大きな計画が速くなった**: 箱が約 1000 個のタブで、箱を選ぶのに 12 秒、Edit への切り替えに約 2.5 分かかっていたのを、約 0.4 秒と約 2 秒にした。箱が約 1200 個の計画で、編集 1 回が約 0.5 秒 (以前は 5〜6 秒) になり、倍率を変えたときの重さも約 3 分の 1 になった。
+
 ## What's new in 0.6.7
 
 - **Large plans respond faster**: on a plan with about 480 boxes, opening the file, switching tabs, selecting a box, typing in the search box and editing now mostly take under a second (they took 1 to 7 seconds).
@@ -274,7 +286,7 @@ Writes become new versions on the server and reach the synced devices on their n
 
 ## VS Code extension
 
-Install **Boxglow** from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=sukima.boxglow-vscode): search for "Boxglow" in the Extensions view, or run `code --install-extension sukima.boxglow-vscode`. Keep the extension and the CLI on matching releases (extension 0.5.7 goes with boxglow 0.6.7).
+Install **Boxglow** from the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=sukima.boxglow-vscode): search for "Boxglow" in the Extensions view, or run `code --install-extension sukima.boxglow-vscode`. Keep the extension and the CLI on matching releases (extension 0.5.8 goes with boxglow 0.6.8).
 
 `vscode/` holds the extension's source. It opens `boxglow.json` as the same diagram inside the editor (custom editor "Boxglow"; right-click the file or use the editor title button / command *Boxglow: Open boxglow.json as a diagram*). The diagram follows the file when the CLI or an agent writes it, edits in the diagram are written back, and light / dark follow the VS Code theme. Deliverables, materials and relative links in Notes (Ctrl / Cmd + click) that point to a file open in the editor beside the diagram. To build it yourself: `npm run build:vscode` (bundles the web app into `vscode/media/`), then `cd vscode && npm run package` (`.vsix`, install via *Extensions: Install from VSIX...*).
 
@@ -332,7 +344,7 @@ Expanded boxes (containers) are drawn as frames: the shallower the level, the th
 - Readiness: "the inputs are in" and "the work is concrete enough to start" are judged separately. An output carries a planned deliverable (`expect`, e.g. `file:src/auth/callback.ts`; `note` for an investigation) next to the real deliverables, and the acceptance criteria live in the scope. `boxglow context` prints the `readiness` (ready / needs detail / waiting, with reasons and the next commands), candidates are grouped the same way, and the canvas, side panel and In charge table show "needs detail". `start` warns on such a box (`policy --unprepared reject` refuses AI starts; a reason does not bypass it), and `boxglow claim <block>` holds a box for planning without starting it. `split` takes `expect` / `acceptance` per child (only for the ones you start now) and `parentMakes` for outputs the parent makes itself.
 - Branches: a branch box (+ Block → Branch, or `boxglow branch "<title>" --options "A|B"`) shows a fork that is not decided yet (an existing box can be turned into one from the Actions row on its More tab, or `boxglow branch --box <block>`). Each option is a path (output). Boxes on the paths wait for the answer; once you pick a path (Choose a path at the top of the side panel, or `boxglow answer`), the paths not chosen are skipped (faded, left out of progress, next candidates and lists). A branch is drawn as a card with cut corners and an "IF" diamond on its edge. Where paths come together, a merge part drawn like an OR gate (+ Block → Merge, or `boxglow join`) passes the work on as soon as any one path arrives.
 - Edit / View: a top-bar toggle; in View mode drag-and-drop editing and the Delete key are off. View lays boxes out in dependency order as numbered stages (left to right, or top to bottom with the vertical view in the zoom panel); Edit shows and edits the layout saved in the file. You cannot zoom out further than the whole diagram (Fit), and selecting a box or opening a panel keeps your zoom and position.
-- Short IDs: every box gets `B1`, `B2`, ... shown on the box; search by ID or title from the top bar (`/`), and use the ID in the CLI.
+- Short IDs: every box gets `B1`, `B2`, ... shown on the box; search by ID or title from the top bar (Ctrl+F or `/`), and use the ID in the CLI. The target button next to the ID in the side panel zooms to the box.
 - Schedule: start date, due date, estimate and actual hours per box; overdue boxes are flagged.
 - One source of truth: an input's description is the description of the output it is connected to (edit it there); only unconnected inputs carry their own text.
 - Progress: set a percentage per box (slider in the inspector or `boxglow set <block> --progress 60`); parents average their children, WhiteBox counts as 100.

package/bin/boxglow.js

@@ -970,6 +970,8 @@ var inspector = {
   "\u300C{name}\u300D\u3092\u90E8\u54C1\u3068\u3057\u3066\u4FDD\u5B58\u3057\u307E\u3057\u305F (\u2630 \u306E\u300C\u90E8\u54C1\u300D\u304B\u3089\u633F\u5165)": 'Saved "{name}" as a part (insert it from Parts in \u2630)',
   "\u77ED\u3044 ID (\u62BC\u3059\u3068\u30B3\u30D4\u30FC\u3002\u691C\u7D22\u3084 CLI \u3067\u4F7F\u3048\u307E\u3059)": "Short ID (click to copy; works in search and the CLI)",
   "ID {key} \u3092\u30B3\u30D4\u30FC\u3057\u307E\u3057\u305F": "Copied ID {key}",
+  "\u56F3\u3067\u3053\u306E\u7BB1\u306B\u5BC4\u308B (\u7BB1\u5168\u4F53\u304C\u753B\u9762\u306B\u53CE\u307E\u308B\u4F4D\u7F6E\u3078)": "Zoom to this box on the canvas (fit the whole box)",
+  "\u56F3\u3067\u3053\u306E\u7BB1\u306B\u5BC4\u308B": "Zoom to this box",
   "Title (\u4F55\u3092\u4F5C\u308B\u304B)": "Title (what to make)",
   "\u72B6\u614B\u30FB\u9032\u6357\u30FB\u6D3B\u52D5\u30FB\u5224\u65AD": "Status, progress, activity, decisions",
   "\u5165\u529B\u3068\u51FA\u529B (\u6210\u679C\u7269)": "Inputs and outputs (deliverables)",
@@ -1261,6 +1263,8 @@ var app = {
   "\u524A\u9664": "Delete",
   "\u5143\u306B\u623B\u3059 / \u3084\u308A\u76F4\u3059": "Undo / Redo",
   "\u9078\u629E\u3092\u89E3\u9664": "Clear selection",
+  "\u7BB1\u3092\u63A2\u3059": "Find a box",
+  "(\u53F3\u30D1\u30CD\u30EB\u306E\u7167\u6E96\u306E\u30DC\u30BF\u30F3\u3067\u3001\u305D\u306E\u7BB1\u306B\u5BC4\u308B)": "(the target button in the side panel zooms to the box)",
   "\u30DC\u30C3\u30AF\u30B9\u306F\u300C\u5165\u529B\u304B\u3089\u51FA\u529B\u3092\u4F5C\u308B\u30BF\u30B9\u30AF\u300D\u3002\u51FA\u529B\u3092\u5148\u306B\u6C7A\u3081\u3001\u5927\u304D\u306A\u30DC\u30C3\u30AF\u30B9\u306F\u300C\u5206\u89E3\u3059\u308B\u300D\u3067\u4E2D\u306B\u30DC\u30C3\u30AF\u30B9\u3092\u7F6E\u304F\u3002\u4F9B\u7D66\u5143\u306E\u7121\u3044\u5165\u529B\u306F\u5DE6\u7AEF\u306E\u5165\u529B\u307E\u3067\u81EA\u52D5\u3067\u70B9\u7DDA\u304C\u4F38\u3073\u308B\u3002": "A box is a task that turns inputs into an output. Decide the output first; break big boxes down by putting boxes inside. Inputs with no source get a dotted line from the left edge automatically.",
   "Boxglow \u3067\u958B\u304F": "Open in Boxglow",
   "\u30D3\u30EB\u30C9\u65E5\u6642 (\u65E5\u672C\u6642\u9593)\u3002\u53E4\u3044\u5834\u5408\u306F\u518D\u8AAD\u307F\u8FBC\u307F (Ctrl+F5) \u3057\u3066\u304F\u3060\u3055\u3044": "Build time (JST). If it looks old, reload with Ctrl+F5",
@@ -1275,6 +1279,7 @@ var app = {
   "Edit \u30E2\u30FC\u30C9: \u30C9\u30E9\u30C3\u30B0\u3067\u79FB\u52D5\u30FB\u7D50\u7DDA\u30FB\u968E\u5C64\u79FB\u52D5\u304C\u3067\u304D\u307E\u3059\u3002\u62BC\u3059\u3068 View (\u95B2\u89A7) \u306B": "Edit mode: drag to move, wire and re-parent. Click to switch to View",
   "View \u30E2\u30FC\u30C9: \u30C9\u30E9\u30C3\u30B0\u3067\u306E\u7DE8\u96C6\u306F\u52B9\u304D\u307E\u305B\u3093\u3002\u62BC\u3059\u3068 Edit \u306B": "View mode: dragging does not edit. Click to switch to Edit",
   "Search  ID / \u984C\u540D": "Search  ID / title",
+  "ID \u304B\u984C\u540D\u3067\u7BB1\u3092\u63A2\u3059 (Ctrl+F \u307E\u305F\u306F /)": "Find a box by ID or title (Ctrl+F or /)",
   "\u898B\u3064\u304B\u308A\u307E\u305B\u3093": "No matches",
   "\u30D6\u30ED\u30C3\u30AF\u3092\u8FFD\u52A0 (N)\u3002\u30DC\u30C3\u30AF\u30B9\u3092\u9078\u3093\u3067\u3044\u308C\u3070\u305D\u306E\u4E2D\u306B\u3001\u9078\u3093\u3067\u3044\u306A\u3051\u308C\u3070\u30D7\u30ED\u30B8\u30A7\u30AF\u30C8\u306E\u4E2D\u306B": "Add a box (N): inside the selected box, or in the project if nothing is selected",
   "Auto Layout: \u4F9D\u5B58\u95A2\u4FC2\u3067\u4E26\u3079\u76F4\u3059 (\u5927\u9805\u76EE\u306F\u7573\u3093\u3060\u524D\u63D0)": "Auto Layout: arrange by dependencies (top-level boxes assumed collapsed)",
@@ -3083,9 +3088,9 @@ function customAlphabet(alphabet, defaultSize = 21) {
         while (accepted < target) {
           fillRandom(randomBytes);
           for (let i = 0; i < randomBytes.length; i++) {
-            let index2 = randomBytes[i] & mask;
-            if (index2 < alphabetLen) {
-              buffer[accepted++] = charCodes[index2];
+            let index = randomBytes[i] & mask;
+            if (index < alphabetLen) {
+              buffer[accepted++] = charCodes[index];
               if (accepted === target) break;
             }
           }
@@ -3238,11 +3243,86 @@ function createArtifact(title, url = "") {
 function createGitArtifact(title, git2) {
   return { id: newId(), title, url: git2.url ?? "", kind: "git", note: "", repo: git2.repo, path: git2.path, commit: git2.commit, blob: git2.blob, state: "ok", checkedAt: now() };
 }
-var index = null;
+var indexes = [];
 var endpointKey = (ep) => `${ep.portId}
 ${ep.side}`;
+function buildIndex(p, opts) {
+  const portsByBlock = /* @__PURE__ */ new Map();
+  for (const q of Object.values(p.ports)) {
+    const list2 = portsByBlock.get(q.blockId);
+    if (list2) list2.push(q);
+    else portsByBlock.set(q.blockId, [q]);
+  }
+  const kidsByParent = /* @__PURE__ */ new Map();
+  const kidIds = opts.kidIds ? /* @__PURE__ */ new Map() : null;
+  if (opts.children !== false) {
+    for (const b of Object.values(p.blocks)) {
+      if (b.parentId === null) continue;
+      const list2 = kidsByParent.get(b.parentId);
+      if (list2) list2.push(b);
+      else kidsByParent.set(b.parentId, [b]);
+      if (kidIds) {
+        const ids = kidIds.get(b.parentId);
+        if (ids) ids.push(b.id);
+        else kidIds.set(b.parentId, [b.id]);
+      }
+    }
+  }
+  const edgesTo = /* @__PURE__ */ new Map();
+  const edgesFrom = /* @__PURE__ */ new Map();
+  if (opts.edges) {
+    for (const e of Object.values(p.edges)) {
+      const to = endpointKey(e.to), from = endpointKey(e.from);
+      const tl = edgesTo.get(to);
+      if (tl) tl.push(e);
+      else edgesTo.set(to, [e]);
+      const fl = edgesFrom.get(from);
+      if (fl) fl.push(e);
+      else edgesFrom.set(from, [e]);
+    }
+  }
+  return { ports: p.ports, portsByBlock, blocks: opts.children !== false ? p.blocks : null, kidsByParent, kidIds, edges: opts.edges ? p.edges : null, edgesTo, edgesFrom, memo: opts.memo ? /* @__PURE__ */ new Map() : null };
+}
+function usingIndex(ix, fn) {
+  indexes.push(ix);
+  try {
+    return fn();
+  } finally {
+    indexes.pop();
+  }
+}
+var VIEW_INDEX = /* @__PURE__ */ new WeakMap();
+function withViewIndex(p, fn) {
+  let ix = VIEW_INDEX.get(p);
+  if (!ix) {
+    ix = buildIndex(p, { children: true, edges: true, memo: true });
+    VIEW_INDEX.set(p, ix);
+  }
+  return usingIndex(ix, fn);
+}
+function withMoveIndex(p, fn) {
+  return usingIndex(buildIndex(p, { children: true, edges: true, kidIds: true }), fn);
+}
+function viewMemo(p, name) {
+  for (let i = indexes.length - 1; i >= 0; i--) {
+    const ix = indexes[i];
+    if (ix.memo && ix.ports === p.ports && ix.blocks === p.blocks && ix.edges === p.edges) {
+      let m = ix.memo.get(name);
+      if (!m) {
+        m = /* @__PURE__ */ new Map();
+        ix.memo.set(name, m);
+      }
+      return m;
+    }
+  }
+  return null;
+}
 function childrenOf(p, blockId) {
-  if (index && index.blocks === p.blocks) return (index.kidsByParent.get(blockId) ?? []).slice();
+  for (let i = indexes.length - 1; i >= 0; i--) {
+    const ix = indexes[i];
+    if (ix.blocks === p.blocks) return (ix.kidsByParent.get(blockId) ?? []).slice();
+    if (ix.kidIds && ix.ports === p.ports && ix.edges === p.edges) return (ix.kidIds.get(blockId) ?? []).map((id) => p.blocks[id]).filter((b) => !!b);
+  }
   return Object.values(p.blocks).filter((b) => b.parentId === blockId);
 }
 function descendantsOf(p, blockId) {
@@ -3269,19 +3349,20 @@ function ancestorsOf(p, blockId) {
   return out2;
 }
 function portsOf(p, blockId, direction) {
-  if (index && index.ports === p.ports) {
-    const list2 = index.portsByBlock.get(blockId) ?? [];
+  for (let i = indexes.length - 1; i >= 0; i--) {
+    if (indexes[i].ports !== p.ports) continue;
+    const list2 = indexes[i].portsByBlock.get(blockId) ?? [];
     return direction === void 0 ? list2.slice() : list2.filter((q) => q.direction === direction);
   }
   return Object.values(p.ports).filter((q) => q.blockId === blockId && (direction === void 0 || q.direction === direction));
 }
 var sameEndpoint = (a, b) => a.portId === b.portId && a.side === b.side;
 function incomingEdges(p, ep) {
-  if (index && index.edges === p.edges) return (index.edgesTo.get(endpointKey(ep)) ?? []).slice();
+  for (let i = indexes.length - 1; i >= 0; i--) if (indexes[i].edges === p.edges) return (indexes[i].edgesTo.get(endpointKey(ep)) ?? []).slice();
   return Object.values(p.edges).filter((e) => sameEndpoint(e.to, ep));
 }
 function outgoingEdges(p, ep) {
-  if (index && index.edges === p.edges) return (index.edgesFrom.get(endpointKey(ep)) ?? []).slice();
+  for (let i = indexes.length - 1; i >= 0; i--) if (indexes[i].edges === p.edges) return (indexes[i].edgesFrom.get(endpointKey(ep)) ?? []).slice();
   return Object.values(p.edges).filter((e) => sameEndpoint(e.from, ep));
 }
 function scopeOf(p, ep) {
@@ -6312,7 +6393,7 @@ function resolveToken(server, allowEnvironmentToken = true) {
 import { hostname as hostname2 } from "node:os";
 
 // package.json
-var version = "0.6.7";
+var version = "0.6.8";
 
 // src/model/version.ts
 var APP_VERSION = version;
@@ -13972,39 +14053,10 @@ function metaRowWidth(opts) {
   w += opts.keyLen * 7 + 8;
   return w;
 }
-function taskCardPorts(p, blockId, direction) {
-  const ports = portsOf(p, blockId, direction);
-  if (ports.length < 2) return ports;
-  const absoluteY = (id) => {
-    let y = 0, current3 = id;
-    while (current3 && current3 !== ROOT_ID) {
-      const b = p.blocks[current3];
-      if (!b) break;
-      y += b.position.y;
-      current3 = b.parentId;
-    }
-    return y;
-  };
-  const rows = ports.map((port2, index2) => {
-    const edges = direction === "in" ? incomingEdges(p, { portId: port2.id, side: "outer" }) : outgoingEdges(p, { portId: port2.id, side: "outer" });
-    const peerY = (portId) => {
-      const peer = p.ports[portId];
-      if (!peer) return void 0;
-      const inside = isExpanded(p, peer.blockId) ? (peer.direction === "out" ? incomingEdges(p, { portId, side: "inner" }).map((e) => e.from.portId) : outgoingEdges(p, { portId, side: "inner" }).map((e) => e.to.portId)).map((id) => p.ports[id]?.blockId).filter((id) => !!id && id !== peer.blockId) : [];
-      return inside.length ? inside.map(absoluteY).reduce((a, b) => a + b, 0) / inside.length : absoluteY(peer.blockId);
-    };
-    const ys = edges.map((e) => peerY(direction === "in" ? e.from.portId : e.to.portId)).filter((y) => y !== void 0);
-    return { port: port2, index: index2, y: ys.length ? ys.reduce((a, b) => a + b, 0) / ys.length : Infinity };
-  });
-  return rows.sort((a, b) => (a.y === b.y ? 0 : a.y - b.y) || a.index - b.index).map((row) => row.port);
-}
 var MERGE_W = 136;
 var MERGE_MIN_H = 80;
 var MERGE_ROW = 32;
-function taskCardLayout(p, blockId) {
-  const b = p.blocks[blockId];
-  const ins = taskCardPorts(p, blockId, "in");
-  const outs = taskCardPorts(p, blockId, "out");
+function cardLayoutOf(b, ins, outs) {
   if (b?.merge) {
     const height = Math.max(MERGE_MIN_H, ins.length * MERGE_ROW + 16);
     const step = (height - 16) / Math.max(1, ins.length);
@@ -14030,12 +14082,43 @@ function taskCardLayout(p, blockId) {
   const outputs = rows(outs);
   return { width, height: cursor + 8, headerH, metaH, inputs, outputs };
 }
+function cardSize(p, blockId) {
+  const l = cardLayoutOf(p.blocks[blockId], portsOf(p, blockId, "in"), portsOf(p, blockId, "out"));
+  return { width: l.width, height: l.height, headerH: l.headerH };
+}
 function isExpanded(p, blockId) {
   const b = p.blocks[blockId];
   return !!b && !b.collapsed && childrenOf(p, blockId).length > 0;
 }
 function blockSize(p, blockId) {
-  if (!isExpanded(p, blockId)) return taskCardLayout(p, blockId);
+  const memo = viewMemo(p, `blockSize:${getLang()}`);
+  if (!memo) return blockSizeWith(p, blockId, blockSize);
+  let hit = memo.get(blockId);
+  if (!hit) {
+    hit = blockSizeWith(p, blockId, blockSize);
+    memo.set(blockId, hit);
+  }
+  return hit;
+}
+function memoBlockSize() {
+  const memo = /* @__PURE__ */ new WeakMap();
+  const size = (p, blockId) => {
+    let m = memo.get(p);
+    if (!m) {
+      m = /* @__PURE__ */ new Map();
+      memo.set(p, m);
+    }
+    let hit = m.get(blockId);
+    if (!hit) {
+      hit = blockSizeWith(p, blockId, size);
+      m.set(blockId, hit);
+    }
+    return hit;
+  };
+  return size;
+}
+function blockSizeWith(p, blockId, kidSize) {
+  if (!isExpanded(p, blockId)) return cardSize(p, blockId);
   const b = p.blocks[blockId];
   const insP = portsOf(p, blockId, "in");
   const outsP = portsOf(p, blockId, "out");
@@ -14071,7 +14154,7 @@ function blockSize(p, blockId) {
   let right = 0;
   let bottom = 0;
   for (const c of kids) {
-    const s = blockSize(p, c.id);
+    const s = kidSize(p, c.id);
     right = Math.max(right, c.position.x + s.width);
     bottom = Math.max(bottom, c.position.y + s.height);
   }
@@ -14087,6 +14170,14 @@ function terminalHeight(p, which) {
   return HEADER_H + Math.max(n, 1) * ROW_H + PAD_BOTTOM;
 }
 
+// src/model/overlaps.ts
+function resolveEditOverlaps(before, after) {
+  return withViewIndex(before, () => withMoveIndex(after, () => resolveChangedOverlaps(before, after, memoBlockSize())));
+}
+function resolveShownOverlaps(p) {
+  return withMoveIndex(p, () => resolveAllOverlaps(p, memoBlockSize()));
+}
+
 // cli/main.ts
 import { dirname as dirname11, join as join13, resolve as resolve7 } from "node:path";
 
@@ -14631,7 +14722,7 @@ function save(path, p) {
   let text2 = toJSON(normalized) + "\n";
   const warnings = [];
   const revision = planIO().commit(path, text2, expected, { prepare: (current3) => {
-    const next = current3 ? resolveChangedOverlaps(fromJSON(current3), normalized, blockSize) : resolveAllOverlaps(normalized, blockSize);
+    const next = current3 ? resolveEditOverlaps(fromJSON(current3), normalized) : resolveShownOverlaps(normalized);
     text2 = prepareClaimSave(current3, toJSON(next) + "\n", claimRequest, (warning) => warnings.push(warning));
     return text2;
   } });