synabun 2.0.10 → 2.1.0

package/neural-interface/public/shared/view-variant.js

@@ -0,0 +1,66 @@
+// The Neural Interface offers only the 3D memory map. The 2D implementation is deprecated, kept on disk.
+import { KEYS } from './constants.js';
+
+export function resolveViewVariant(_requested) { return '3d'; }
+
+/** Preserve other URL state, including memory anchors, when retiring a 2D address. Shared with the server. */
+export function normalizeViewUrl(input) {
+  const url = new URL(input, 'http://localhost');
+  if (url.pathname.toLowerCase() === '/index2d.html') url.pathname = '/';
+  if (url.searchParams.has('variant')) url.searchParams.set('variant', resolveViewVariant(url.searchParams.get('variant')));
+  const hash = url.hash.slice(1);
+  if (hash === '2d') url.hash = '3d';
+  else {
+    const start = hash.includes('?') ? hash.indexOf('?') + 1 : 0;
+    const params = new URLSearchParams(hash.slice(start));
+    if (params.has('variant')) {
+      params.set('variant', resolveViewVariant(params.get('variant')));
+      url.hash = hash.slice(0, start) + params.toString();
+    }
+  }
+  return url.pathname + url.search + url.hash;
+}
+
+/** Optional legacy config fields are normalized without changing Focus Mode, glass or accent settings. */
+export function normalizeViewConfig(config) {
+  if (!config || typeof config !== 'object' || Array.isArray(config)) return config;
+  const next = { ...config };
+  for (const key of ['variant', 'viewVariant']) {
+    if (Object.hasOwn(next, key)) next[key] = resolveViewVariant(next[key]);
+  }
+  return next;
+}
+
+/** Retain archived 2D coordinates, but never reinterpret their x/y positions as 3D positions. */
+export function normalizeWorkspaceVariant(workspace) {
+  if (workspace?.variant !== '2d') return workspace;
+  return {
+    ...workspace,
+    variant: '3d',
+    nodePositions2d: workspace.nodePositions2d || workspace.nodePositions || {},
+    nodePositions3d: workspace.nodePositions3d || {},
+  };
+}
+
+/** Rewrite persisted preferences at boot, in both the hydrated server store and any browser-local copy. */
+export function migrateViewPreferences(...stores) {
+  for (const store of new Set(stores.filter(Boolean))) {
+    // A refused read/write or malformed old value must not stop the supported view from booting.
+    try {
+      if (store.getItem(KEYS.VIEW_VARIANT) !== '3d') store.setItem(KEYS.VIEW_VARIANT, '3d');
+    } catch {}
+    for (const [key, normalize] of [
+      [KEYS.INTERFACE_CONFIG, normalizeViewConfig],
+      [KEYS.WORKSPACES, (list) => Array.isArray(list) ? list.map(normalizeWorkspaceVariant) : list],
+    ]) {
+      try {
+        const raw = store.getItem(key);
+        if (!raw) continue;
+        const value = JSON.parse(raw);
+        const next = normalize(value);
+        if (JSON.stringify(next) !== JSON.stringify(value)) store.setItem(key, JSON.stringify(next));
+      } catch {}
+    }
+  }
+  return resolveViewVariant();
+}

package/neural-interface/public/shared/whatsapp/wa-view.js

@@ -242,7 +242,7 @@ export const HELP = Object.freeze({
     'Stuck on "Reconnecting"? Check this computer\'s internet connection, then press Reconnect now.',
     'Voice notes not transcribed? This computer needs whisper.cpp, its speech model and FFmpeg, which you install yourself; the line under "Transcribe voice notes" says what is missing.',
   ],
-  browserTools: 'Not the same as the WhatsApp browser tools. The whatsapp MCP profile lets agents read WhatsApp Web in SynaBun\'s browser; this tab is you chatting with SynaBun from your phone. They do not share a session.',
+  browserTools: 'Not the same as the WhatsApp browser tools. The browser_whatsapp tool group lets agents read WhatsApp Web in SynaBun\'s browser; this tab is you chatting with SynaBun from your phone. They do not share a session.',
   uninstall: 'Uninstalling SynaBun does not unlink WhatsApp. Use Unlink or Remove here first, or log SynaBun out under WhatsApp → Settings → Linked devices.',
 });
 

package/neural-interface/public/shared/whiteboard-list.js

@@ -0,0 +1,172 @@
+// ═══════════════════════════════════════════
+// WHITEBOARD-LIST — nesting levels of a list card (DOM-free)
+// ═══════════════════════════════════════════
+//
+// A list element keeps its bullets as `items: string[]`, as every board always has, and, only while some bullet
+// is nested, `levels: number[]` beside them: levels[i] is how deep items[i] sits, 0 = top level. A list without
+// `levels` (every board saved before nesting existed) reads as all level 0, and a reader that does not know
+// `levels` still shows every bullet, flat. Callers may also hand items over as { text, level } objects; they are
+// stored as the two arrays. Every writer keeps three rules: the first item is level 0, an item sits at most one
+// level deeper than the item above it, and no item is deeper than WB_LIST_MAX_LEVEL.
+//
+// No imports: ui-whiteboard.js (the board), server.js (whiteboard_add / whiteboard_update) and node --test load it.
+// mcp-server/src/services/whiteboard-geometry.ts reads the same format for the MCP tools.
+
+export const WB_LIST_MAX_LEVEL = 4;
+
+/** Level of one value: a whole number from 0 to WB_LIST_MAX_LEVEL (anything else is 0, more is the maximum). */
+function levelOf(value) {
+  const n = Math.floor(Number(value));
+  return Number.isFinite(n) && n > 0 ? Math.min(n, WB_LIST_MAX_LEVEL) : 0;
+}
+
+/** Text of one stored entry: a string, or the { text, level } form. */
+export function listItemText(item) {
+  if (typeof item === 'string') return item;
+  if (item && typeof item === 'object') return item.text == null ? '' : String(item.text);
+  return item == null ? '' : String(item);
+}
+
+/** `count` levels that keep the rules, read from `levels` (missing entries are 0). */
+export function fitListLevels(levels, count) {
+  const out = [];
+  let above = -1;
+  for (let i = 0; i < count; i++) {
+    const level = Math.min(levelOf(Array.isArray(levels) ? levels[i] : 0), above + 1);
+    out.push(level);
+    above = level;
+  }
+  return out;
+}
+
+/**
+ * A list's items in either form → { items: string[], levels: number[] } (levels always as long as items, keeping
+ * the rules). A plain string is level `levels[i]` (0 when there is no such entry); a { text, level } object's own
+ * level wins over `levels[i]`.
+ */
+export function readListItems(items, levels) {
+  const list = Array.isArray(items) ? items : [];
+  const texts = list.map(listItemText);
+  const wanted = list.map((item, i) => (item && typeof item === 'object' && item.level !== undefined
+    ? item.level
+    : (Array.isArray(levels) ? levels[i] : 0)));
+  return { items: texts, levels: fitListLevels(wanted, texts.length) };
+}
+
+/** True when some level is above 0 (only then is `levels` stored). */
+export function hasNestedLevels(levels) {
+  return Array.isArray(levels) && levels.some(level => level > 0);
+}
+
+/**
+ * Store items + levels on a list element: `items` always, `levels` only while something is nested (removed
+ * otherwise, so a flat list is stored exactly as before). Always new arrays, never an edit in place: copies of
+ * an element (undo entries, the clipboard, a duplicate) share the arrays of the original.
+ */
+export function writeListItems(el, items, levels) {
+  const read = readListItems(items, levels);
+  el.items = read.items;
+  if (hasNestedLevels(read.levels)) el.levels = read.levels;
+  else delete el.levels;
+  return el;
+}
+
+/**
+ * The `items` / `levels` fields of an update to a list, made to keep the rules. Items sent without levels are
+ * read in their own form (a plain string is level 0, an object carries its level): replacing the items of a
+ * nested list with plain strings flattens it. Levels sent alone apply to the items the list already has.
+ * `levels` comes back as null when nothing is nested (the update then removes it).
+ */
+export function normalizeListUpdate(currentItems, patch) {
+  if (!patch || typeof patch !== 'object') return patch;
+  const hasItems = Object.hasOwn(patch, 'items');
+  const hasLevels = Object.hasOwn(patch, 'levels');
+  if (!hasItems && !hasLevels) return patch;
+  const read = hasItems ? readListItems(patch.items, patch.levels) : readListItems(currentItems, patch.levels);
+  const out = { ...patch, levels: hasNestedLevels(read.levels) ? read.levels : null };
+  if (hasItems) out.items = read.items;
+  return out;
+}
+
+/** End (exclusive) of the item at `index` and its sub-items: the items right after it that sit deeper. */
+export function listSubtreeEnd(levels, index) {
+  let end = index + 1;
+  while (end < levels.length && levels[end] > levels[index]) end++;
+  return end;
+}
+
+/** Whether the item at `index` can go one level deeper: never the first, never more than one level deeper than
+ *  the item above it, and neither it nor a sub-item of it past the maximum. */
+export function canIndentListItem(levels, index) {
+  if (!Array.isArray(levels) || index <= 0 || index >= levels.length) return false;
+  if (levels[index] > levels[index - 1]) return false;
+  const deepest = Math.max(...levels.slice(index, listSubtreeEnd(levels, index)));
+  return deepest < WB_LIST_MAX_LEVEL;
+}
+
+/** Levels with the item at `index` one level deeper, its sub-items with it (they stay its sub-items), or null
+ *  when it cannot go deeper. */
+export function indentListItem(levels, index) {
+  if (!canIndentListItem(levels, index)) return null;
+  const next = levels.slice();
+  for (let i = index, end = listSubtreeEnd(levels, index); i < end; i++) next[i] += 1;
+  return fitListLevels(next, next.length);
+}
+
+/** Levels with the item at `index` one level shallower, its sub-items with it, or null when it is at the top
+ *  level. The items after them keep their level (one that was its sibling becomes its sub-item, as in a flat
+ *  outline nothing is reordered). */
+export function outdentListItem(levels, index) {
+  if (!Array.isArray(levels) || index < 0 || index >= levels.length || levels[index] <= 0) return null;
+  const next = levels.slice();
+  for (let i = index, end = listSubtreeEnd(levels, index); i < end; i++) next[i] -= 1;
+  return fitListLevels(next, next.length);
+}
+
+// Bullet and number styles per level, in the order browsers nest them: the level-0 style is what a flat list
+// always showed (a disc, a decimal number); deeper levels cycle.
+export const UNORDERED_STYLES = ['disc', 'circle', 'square'];
+export const ORDERED_STYLES = ['decimal', 'lower-alpha', 'lower-roman'];
+const BULLET_GLYPHS = { disc: '•', circle: '◦', square: '▪' };
+
+/** The list-style name of a level (the CSS in styles.css uses the same cycle). */
+export function listStyleForLevel(level, ordered) {
+  const styles = ordered ? ORDERED_STYLES : UNORDERED_STYLES;
+  return styles[levelOf(level) % styles.length];
+}
+
+function toRoman(n) {
+  const table = [[1000, 'm'], [900, 'cm'], [500, 'd'], [400, 'cd'], [100, 'c'], [90, 'xc'], [50, 'l'], [40, 'xl'], [10, 'x'], [9, 'ix'], [5, 'v'], [4, 'iv'], [1, 'i']];
+  let out = '';
+  for (const [value, digits] of table) while (n >= value) { out += digits; n -= value; }
+  return out;
+}
+
+function toAlpha(n) {
+  let out = '';
+  while (n > 0) { n -= 1; out = String.fromCharCode(97 + (n % 26)) + out; n = Math.floor(n / 26); }
+  return out;
+}
+
+/** A counter value in one of the ordered styles: 1 → "1", "a", "i". */
+export function formatListCounter(n, style) {
+  if (style === 'lower-alpha') return toAlpha(n);
+  if (style === 'lower-roman') return toRoman(n);
+  return String(n);
+}
+
+/**
+ * The marker drawn before each item: a bullet glyph per level, or the item's number in its level's style followed
+ * by "." (numbering restarts under every item above, as nested ordered lists do).
+ */
+export function listMarkers(levels, ordered) {
+  const counters = [];
+  return (Array.isArray(levels) ? levels : []).map((raw) => {
+    const level = levelOf(raw);
+    const style = listStyleForLevel(level, ordered);
+    if (!ordered) return BULLET_GLYPHS[style];
+    counters.length = level + 1;
+    counters[level] = (counters[level] || 0) + 1;
+    return `${formatListCounter(counters[level], style)}.`;
+  });
+}

package/neural-interface/public/shared/worker-end.js

@@ -47,6 +47,7 @@ export const WORKER_END_COPY = Object.freeze({
   reasonMaxTurns: 'The run reached its turn limit.',
   reasonIdle: 'The worker waited for a follow-up that did not come, and closed.',
   reasonRestart: 'The server restarted while the run was open.',
+  reasonRestartNotResumed: 'The server restarted while the run was open, and it could not continue: {reason}',
   reasonKillAll: 'Stopped together with every other run.',
   reasonCleared: 'The run\'s state was removed.',
   reasonOther: 'Stopped ({reason}).',
@@ -61,8 +62,9 @@ export const WORKER_END_CLASS = 'worker-end-card';
 /** The run states (runtime and dispatcher alike) after which nothing more happens. */
 export const TERMINAL_STATES = new Set(['completed', 'failed', 'stopped', 'interrupted']);
 const TERMINAL = TERMINAL_STATES;
-// Dispatcher states in which a turn is in progress (or about to be): the card waits.
-const WORKING = new Set(['queued', 'awaiting_route', 'starting', 'running', 'awaiting_permission']);
+// Dispatcher states in which a turn is in progress (or about to be): the card waits. A run a server restart cut off
+// (suspended) and one the next start resumes (resuming) are not over either.
+const WORKING = new Set(['queued', 'awaiting_route', 'starting', 'running', 'awaiting_permission', 'suspended', 'resuming']);
 const SUMMARY_CHARS = 320;
 
 /** A WORKER_END_COPY sentence with its `{params}` filled in: the translator when the page gives none. */
@@ -85,6 +87,7 @@ export function isRunWorking(run, dispatch = null) {
   if (TERMINAL.has(state) || TERMINAL.has(String(run?.status || ''))) return false;
   if (state) return WORKING.has(state);
   const status = String(run?.status || '');
+  if (status === 'suspended') return true;
   if (status !== 'starting' && status !== 'running') return false;
   return run?.turnState !== 'idle' && run?.turnState !== 'terminal';
 }
@@ -159,7 +162,7 @@ function stopReason(reason, t) {
     case 'budget_share': return t('reasonBudgetShare');
     case 'max_turns': return t('reasonMaxTurns');
     case 'idle_timeout': return t('reasonIdle');
-    case 'server_restart': case 'server_shutdown': return t('reasonRestart');
+    case 'server_restart': case 'server_shutdown': case 'resume_failed': return t('reasonRestart');
     case 'kill_all': return t('reasonKillAll');
     case 'state_removed': case 'state_inactive': return t('reasonCleared');
     case '': return '';
@@ -226,6 +229,10 @@ export function workerEndView(run, dispatch = null, { t = fillWorkerEndCopy, bus
   } else {
     kind = endState === 'interrupted' ? 'interrupted' : 'stopped';
     detail = stopReason(dispatch?.completionReason || run?.stoppedReason || '', t);
+    // A Claude Code worker the server could not resume after a restart says why (lib/worker-resume.js; a resume that
+    // failed to start has the reason resume_failed and the error).
+    const notResumed = dispatch?.resumeRefused || (dispatch?.completionReason === 'resume_failed' ? (dispatch?.error || run?.error || '') : '');
+    if (kind === 'interrupted' && notResumed) detail = t('reasonRestartNotResumed', { reason: plain(notResumed, 200) });
   }
 
   if (kind === 'complete' || kind === 'blocked') detail = plain(result?.summary || '');

package/neural-interface/public/shared/worker-restart.js

@@ -0,0 +1,12 @@
+/** Shared provider-panel status. A suspension still owns the tab, but is not working. */
+export function workerRestart(run) {
+  const suspended = run?.status === 'suspended';
+  const resumes = Number(run?.resumes) || 0;
+  return {
+    suspended,
+    active: suspended || ['starting', 'running'].includes(run?.status),
+    key: suspended ? 'workerRestart.suspended' : resumes ? 'workerRestart.resumed' : null,
+    stamp: suspended ? `suspended:${run.suspendedAt || ''}` : `resumed:${resumes}`,
+    resumes,
+  };
+}

package/neural-interface/public/sidepanel-session.html

@@ -14,5 +14,5 @@
     #term-minimized-tray { position:fixed; right:8px; top:45px; z-index:20000; }
   </style>
 </head>
-<body><div id="term-minimized-tray"></div><script type="module" src="/shared/ui-sidepanel-session-entry.js"></script></body>
+<body><div id="term-minimized-tray"></div><script type="module" src="/shared/page-session.js"></script><script type="module" src="/shared/ui-sidepanel-session-entry.js"></script></body>
 </html>

package/neural-interface/public/variant/2d/background.js

@@ -58,7 +58,8 @@ export function drawBackground(ctx, time, w, h) {
     const maxDim = Math.max(w, h);
     _bgGrad = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, maxDim * 0.7);
     _bgGrad.addColorStop(0, '#0e1218');
-    _bgGrad.addColorStop(1, '#070709');
+    // The app frame's interior (styles.css --frame-surface): the card's edge reads as one surface with the 3D map's
+    _bgGrad.addColorStop(1, '#07080b');
     _bgGradW = w;
     _bgGradH = h;
   }

package/neural-interface/public/variant/2d/context-menu.js

@@ -7,6 +7,8 @@
 
 import { state, emit, on } from '../../shared/state.js';
 import { getAllCards } from './graph.js';
+import { frameRect } from '../../shared/app-frame.js';
+import { placeMenu } from '../../shared/context-menu-logic.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -51,9 +53,13 @@ export function showContextMenu(node, event) {
   if (!_contextMenu) return;
 
   _contextMenuNode = node;
-  _contextMenu.style.left = event.clientX + 'px';
-  _contextMenu.style.top = event.clientY + 'px';
   _contextMenu.classList.add('open');
+  // At the pointer, flipped and kept inside the app frame (the card is in it)
+  const box = _contextMenu.getBoundingClientRect();
+  const at = placeMenu({ x: event.clientX, y: event.clientY, width: box.width, height: box.height,
+    viewportWidth: window.innerWidth, viewportHeight: window.innerHeight, bounds: frameRect() });
+  _contextMenu.style.left = at.left + 'px';
+  _contextMenu.style.top = at.top + 'px';
 
   // Update pin text based on card pinned state
   const pinItem = _contextMenu.querySelector('[data-action="pin"]');

package/neural-interface/public/variant/2d/graph.js

@@ -131,17 +131,24 @@ const _panInertia = {
 // COORDINATE TRANSFORMS
 // ═══════════════════════════════════════════
 
+// The canvas fills the app frame (index2d.html #canvas-main), not the window: a pointer's client coordinates are
+// turned into the canvas's own by its box (kept from the last resize: the canvas moves only when it is resized).
+let _box = { left: 0, top: 0 };
+let _boxMeasured = false;
+
+/** Client (viewport) coordinates → world. */
 export function screenToWorld(sx, sy) {
   return {
-    x: (sx * _dpr - _viewport.offsetX) / _viewport.scale,
-    y: (sy * _dpr - _viewport.offsetY) / _viewport.scale,
+    x: ((sx - _box.left) * _dpr - _viewport.offsetX) / _viewport.scale,
+    y: ((sy - _box.top) * _dpr - _viewport.offsetY) / _viewport.scale,
   };
 }
 
+/** World → client (viewport) coordinates. */
 export function worldToScreen(wx, wy) {
   return {
-    x: (wx * _viewport.scale + _viewport.offsetX) / _dpr,
-    y: (wy * _viewport.scale + _viewport.offsetY) / _dpr,
+    x: (wx * _viewport.scale + _viewport.offsetX) / _dpr + _box.left,
+    y: (wy * _viewport.scale + _viewport.offsetY) / _dpr + _box.top,
   };
 }
 
@@ -163,7 +170,10 @@ function _getVisibleBounds(margin = 0) {
 // PUBLIC API: Viewport accessors
 // ═══════════════════════════════════════════
 
-export function getViewport() { return { ..._viewport, dpr: _dpr }; }
+export function getViewport() {
+  // width / height: the canvas buffer (device pixels, like the offsets)
+  return { ..._viewport, dpr: _dpr, width: _canvas?.width || 0, height: _canvas?.height || 0 };
+}
 export function getAllCards() { return _cards; }
 export function getRegions() { return _regions; }
 
@@ -187,7 +197,7 @@ export function initGraph(container, callbacks = {}) {
   if (!_canvas) {
     _canvas = document.createElement('canvas');
     _canvas.id = 'canvas-main';
-    _canvas.style.cssText = 'position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;';
+    _canvas.style.cssText = 'position:fixed;top:var(--frame-top);left:var(--frame-left);width:calc(100% - var(--sidebar-total-width, 0px) - 2 * var(--frame-gap));height:calc(100dvh - var(--frame-top) - var(--frame-gap));border-radius:var(--frame-radius);z-index:1;';
     container.appendChild(_canvas);
   }
   _ctx = _canvas.getContext('2d');
@@ -210,6 +220,8 @@ export function initGraph(container, callbacks = {}) {
   _canvas.addEventListener('dblclick', _onDblClick);
   _canvas.addEventListener('contextmenu', _onContextMenu);
   window.addEventListener('resize', _scheduleCanvasResize);
+  // The frame changes the canvas's box without a window resize (an explorer opening, the bar's height)
+  if (typeof ResizeObserver === 'function') new ResizeObserver(_scheduleCanvasResize).observe(_canvas);
 
   // Hidden tab → stop the loop entirely; resume on return unless externally stopped
   document.addEventListener('visibilitychange', () => {
@@ -1397,7 +1409,7 @@ const _scheduleHover2D = rafThrottle(() => {
   if (newHoverId !== state.hoveredNodeId) {
     state.hoveredNodeId = newHoverId;
   }
-  _canvas.style.cursor = hit ? 'pointer' : 'grab';
+  _canvas.style.cursor = hit ? 'pointer' : 'move';
   if (newHoverId) emit('node-hover', hit.node);
   else if (!hit) emit('node-hover', null);
 });
@@ -1469,7 +1481,7 @@ function _onPointerLeave() {
   if (_focusPaused) return;
   if (state.hoveredNodeId) {
     state.hoveredNodeId = null;
-    _canvas.style.cursor = 'grab';
+    _canvas.style.cursor = 'move';
     emit('node-hover', null);
   }
 }
@@ -1483,9 +1495,9 @@ function _onWheel(e) {
     _viewport.minScale,
     Math.min(_viewport.maxScale, (_smoothZoom.active ? _smoothZoom.targetScale : _viewport.scale) * zoomFactor)
   );
-  // Update anchor to cursor position (buffer coords)
-  _smoothZoom.anchorX = e.clientX * _dpr;
-  _smoothZoom.anchorY = e.clientY * _dpr;
+  // Update anchor to cursor position (buffer coords, from the canvas's own corner)
+  _smoothZoom.anchorX = (e.clientX - _box.left) * _dpr;
+  _smoothZoom.anchorY = (e.clientY - _box.top) * _dpr;
   _smoothZoom.active = true;
 }
 
@@ -1502,11 +1514,14 @@ function _onDblClick(e) {
   }
 }
 
+// A card has its own menu (context-menu.js): the event is taken only then. Anywhere else on the graph (its empty
+// space, a region, while focus mode pauses it) it is left to the app's right-click menu, which adds the graph's
+// own rows (main.js registers that area): taking it there would leave the user with no menu at all.
 function _onContextMenu(e) {
-  if (_focusPaused) { e.preventDefault(); return; }
-  e.preventDefault();
+  if (_focusPaused) return;
   const hit = _hitTest(e.clientX, e.clientY);
   if (hit && hit.type === 'card') {
+    e.preventDefault();
     emit('node-context-menu', { node: hit.node, event: e });
   }
 }
@@ -1622,14 +1637,20 @@ function _resizeCanvas() {
   if (!_canvas) return;
   _resizePending = false;
   _dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);
-  const w = window.innerWidth;
-  const h = window.innerHeight;
+  // The CSS box is the app frame's (index2d.html); the buffer follows it. Hidden (no box): the window's size.
+  const box = _canvas.getBoundingClientRect();
+  const w = box.width || window.innerWidth;
+  const h = box.height || window.innerHeight;
+  // The world stays where it was on screen when the canvas's corner moves (an explorer opening or closing):
+  // what was under the pointer is still under it, as when the canvas was the whole window.
+  if (box.width && box.height && _boxMeasured) {
+    _viewport.offsetX -= (box.left - _box.left) * _dpr;
+    _viewport.offsetY -= (box.top - _box.top) * _dpr;
+  }
+  if (box.width && box.height) { _box = { left: box.left, top: box.top }; _boxMeasured = true; }
   // Set canvas buffer size to DPR-scaled resolution for crisp rendering
   _canvas.width = Math.round(w * _dpr);
   _canvas.height = Math.round(h * _dpr);
-  // CSS display size stays at viewport dimensions
-  _canvas.style.width = w + 'px';
-  _canvas.style.height = h + 'px';
 }
 
 // Window resizes arrive many times per frame while a window or sidepanel is
@@ -1692,12 +1713,13 @@ function _getPublicAPI() {
       })),
       links: state.allLinks,
     }),
+    // The canvas's size is the app frame's (CSS): a value given here only measures it again.
     width: (w) => {
-      if (w != null) { _canvas.style.width = w + 'px'; _resizeCanvas(); }
+      if (w != null) _resizeCanvas();
       return _canvas ? Math.round(_canvas.width / _dpr) : 0;
     },
     height: (h) => {
-      if (h != null) { _canvas.style.height = h + 'px'; _resizeCanvas(); }
+      if (h != null) _resizeCanvas();
       return _canvas ? Math.round(_canvas.height / _dpr) : 0;
     },
     // No-ops for compatibility

package/neural-interface/public/variant/2d/hulls.js

@@ -31,8 +31,7 @@ export function initHulls(graphInstance) {
   if (!_hullCanvas) return;
   _hullCtx = _hullCanvas.getContext('2d');
 
-  _hullCanvas.width = window.innerWidth;
-  _hullCanvas.height = window.innerHeight;
+  _sizeHullCanvas();
 
   // Toggle button
   const toggleBtn = $('hull-toggle-btn');
@@ -68,8 +67,7 @@ export function drawHulls() {
 
   if (!_hullCanvas || !_hullCtx) return;
 
-  _hullCanvas.width = window.innerWidth;
-  _hullCanvas.height = window.innerHeight;
+  _sizeHullCanvas();
   const ctx = _hullCtx;
   ctx.clearRect(0, 0, _hullCanvas.width, _hullCanvas.height);
 
@@ -86,11 +84,12 @@ export function drawHulls() {
     catGroups[cat].push(n);
   });
 
-  // Convert graph coords to screen coords
+  // Convert graph coords to the overlay's own (it covers the graph's box, centred on the same point)
+  const halfW = _hullCanvas.width / 2, halfH = _hullCanvas.height / 2;
   function toScreen(gx, gy) {
     return {
-      x: (gx - center.x) * zoom + window.innerWidth / 2,
-      y: (gy - center.y) * zoom + window.innerHeight / 2,
+      x: (gx - center.x) * zoom + halfW,
+      y: (gy - center.y) * zoom + halfH,
     };
   }
 
@@ -186,8 +185,14 @@ export function isHullsVisible() {
 
 function _onResize() {
   if (!_hullCanvas) return;
-  _hullCanvas.width = window.innerWidth;
-  _hullCanvas.height = window.innerHeight;
+  _sizeHullCanvas();
+}
+
+/** The overlay's buffer follows its CSS box (the graph's, inside the app frame); no box: the window's size. */
+function _sizeHullCanvas() {
+  const box = _hullCanvas.getBoundingClientRect();
+  _hullCanvas.width = Math.round(box.width || window.innerWidth);
+  _hullCanvas.height = Math.round(box.height || window.innerHeight);
 }
 
 /**

package/neural-interface/public/variant/2d/lasso.js

@@ -18,6 +18,7 @@ let _lassoStart = null;
 let _lassoEnd = null;
 let _lassoCanvas = null;
 let _lassoCtx = null;
+let _lassoBox = { left: 0, top: 0 };
 
 // ═══════════════════════════════════════════
 // INIT
@@ -32,8 +33,9 @@ export function initLasso(_graphInstance) {
   if (!_lassoCanvas) return;
   _lassoCtx = _lassoCanvas.getContext('2d');
 
-  _lassoCanvas.width = window.innerWidth;
-  _lassoCanvas.height = window.innerHeight;
+  _onResize();
+  // It fills the app frame like the graph: an explorer opening resizes it without a window resize.
+  if (typeof ResizeObserver === 'function') new ResizeObserver(_onResize).observe(_lassoCanvas);
 
   document.addEventListener('pointerdown', _onPointerDown);
   document.addEventListener('pointermove', _onPointerMove);
@@ -50,6 +52,7 @@ function _onPointerDown(e) {
   // #wb-root: Shift+drag on the focus-mode whiteboard is its own marquee selection
   if (e.target.closest('#title-bar, #category-sidebar, .detail-card, #minimap, .glass, #wb-root')) return;
   _lassoActive = true;
+  _lassoBox = _lassoCanvas.getBoundingClientRect();
   _lassoStart = { x: e.clientX, y: e.clientY };
   _lassoEnd = { x: e.clientX, y: e.clientY };
   e.preventDefault();
@@ -59,10 +62,10 @@ function _onPointerMove(e) {
   if (!_lassoActive) return;
   _lassoEnd = { x: e.clientX, y: e.clientY };
 
-  // Draw selection rect
+  // Draw selection rect (client coordinates → the canvas's own: it sits in the app frame)
   _lassoCtx.clearRect(0, 0, _lassoCanvas.width, _lassoCanvas.height);
-  const x = Math.min(_lassoStart.x, _lassoEnd.x);
-  const y = Math.min(_lassoStart.y, _lassoEnd.y);
+  const x = Math.min(_lassoStart.x, _lassoEnd.x) - _lassoBox.left;
+  const y = Math.min(_lassoStart.y, _lassoEnd.y) - _lassoBox.top;
   const w = Math.abs(_lassoEnd.x - _lassoStart.x);
   const h = Math.abs(_lassoEnd.y - _lassoStart.y);
   _lassoCtx.strokeStyle = 'rgba(100, 180, 255, 0.6)';
@@ -120,8 +123,9 @@ export function clearLasso() {
 
 function _onResize() {
   if (!_lassoCanvas) return;
-  _lassoCanvas.width = window.innerWidth;
-  _lassoCanvas.height = window.innerHeight;
+  const box = _lassoCanvas.getBoundingClientRect();
+  _lassoCanvas.width = Math.round(box.width || window.innerWidth);
+  _lassoCanvas.height = Math.round(box.height || window.innerHeight);
 }
 
 /**