synabun 2.0.9 → 2.1.0

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);
 }
 
 /**

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

@@ -1,4 +1,5 @@
 // ═══════════════════════════════════════════
+// DEPRECATED: 2D memory map retained for compatibility; no supported page boots this entry point.
 // SynaBun Neural Interface — 2D Variant Entry Point
 // ═══════════════════════════════════════════
 //
@@ -24,7 +25,7 @@ import { initPanelSystem, initPinToggle, clampPanelsToViewport } from '../../sha
 import { initLoading, showLoadingError, hideLoading, rememberHealth } from '../../shared/ui-loading.js';
 import { initNavbar } from '../../shared/ui-navbar.js';
 import { initMenubar } from '../../shared/ui-menubar.js';
-import { initSearch } from '../../shared/ui-search.js';
+import { initSearch, clearSearch } from '../../shared/ui-search.js';
 import { buildCategorySidebar, initSidebar, loadCategories } from '../../shared/ui-sidebar.js';
 import { openMemoryCard, restoreOpenCards, initDetailPanel, setDetailCallbacks } from '../../shared/ui-detail.js';
 import { initSettings, restoreInterfaceConfig, restoreSkin, loadIfaceConfig } from '../../shared/ui-settings.js';
@@ -46,7 +47,8 @@ import { initCostWidget } from '../../shared/ui-cost-widget.js';
 import { initGames, clearGameOnLoad } from '../../shared/ui-games.js';
 import { initWorkspaces } from '../../shared/ui-workspaces.js';
 import { initInvite } from '../../shared/ui-invite.js';
-import { initSync } from '../../shared/ui-sync.js';
+import { initSync, isGuest } from '../../shared/ui-sync.js';
+import { startLaunchPrefetch } from '../../shared/launch-prefetch.js';
 import { initKeybinds, registerAction, getDisplayKey } from '../../shared/ui-keybinds.js';
 import { initTutorial } from '../../shared/ui-tutorial.js';
 import { initImageGallery } from '../../shared/ui-image-gallery.js';
@@ -59,6 +61,7 @@ import { initAutomationStudio } from '../../shared/ui-automation-studio.js';
 import { initSchedulesStudio } from '../../shared/ui-schedules-studio.js';
 import { initNativeLoopRouter } from '../../shared/ui-native-loop-router.js';
 import { initCommandRunner } from '../../shared/ui-command-runner.js';
+import { initAppContextMenu, registerContextMenuArea } from '../../shared/ui-context-menu.js';
 import { stopBackground } from './background.js';
 import { initMinimap, drawMinimap, toggleMinimap, isMinimapVisible, forceHideMinimap, restoreMinimap } from './minimap.js';
 import { initLasso, clearLasso } from './lasso.js';
@@ -257,6 +260,34 @@ on('layout:frame', () => {
   const g = getGraph();
   if (g) g.zoomToFit(400, 60);
 });
+// The 3D map's Frame whole map key (H by default) fits the graph here: the same function as a double-click on its empty space.
+registerAction('map-frame-all', () => emit('layout:frame'));
+
+// The app's right-click menu on the graph's empty space and the minimap (a card keeps its own menu, graph.js):
+// the graph's rows, each through what the page already does (View › Minimap / Region Glow, the navbar's 3D link).
+registerContextMenuArea({
+  id: 'graph-2d',
+  match(el) {
+    if (!el?.closest?.('#canvas-main, #minimap')) return null;
+    return {
+      kind: 'map',
+      map: {
+        variant: '2d',
+        options: { minimap: isMinimapVisible(), regionGlow: gfx.regionGlowOpacity > 0 },
+        searching: !!state.searchResults,
+        selected: state.multiSelected.size > 0,
+        label: null,
+      },
+      act: {
+        frameAll: () => emit('layout:frame'),
+        toggleOption: (key) => document.getElementById(key === 'minimap' ? 'menu-minimap' : 'menu-region-glow')?.click(),
+        clearSearch: () => clearSearch(),
+        clearSelection: () => clearMultiSelect(),
+        switchView: () => document.getElementById('nav-3d-link')?.click(), // keeps the selected memory, as the navbar does
+      },
+    };
+  },
+});
 
 // Stats update
 on('stats-changed', () => {
@@ -401,6 +432,8 @@ async function boot() {
 
     // Mark boot complete
     _bootComplete = true;
+    // Painted: what the windows, menus and Settings wait for is read now, in idle time (launch-prefetch.js).
+    startLaunchPrefetch({ isGuest });
 
     // Focus mode restored at load: the viz:toggle emitted by applyIfaceConfig
     // ran before boot and was ignored above, so apply the persisted state to
@@ -463,6 +496,7 @@ initWhiteboard();
 initCostWidget();
 initGames();
 initTutorial();
+initAppContextMenu(); // a graph card keeps its own menu (context-menu.js); everything else gets the app's
 
 // View switch handler
 {