synabun 2.0.10 → 2.1.0

package/neural-interface/public/shared/context-menu-logic.js

@@ -0,0 +1,243 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Context menu: what decides
+// No DOM and no imports: the component (context-menu.js) and the app's
+// global registration (ui-context-menu.js) draw what these functions say,
+// and node --test checks them (tests/context-menu-logic.test.mjs).
+// ═══════════════════════════════════════════
+
+/**
+ * @typedef {object} MenuItem
+ * @property {string} [id]
+ * @property {string} [label]
+ * @property {string} [icon]      trusted SVG markup (the app's own icons, never page text)
+ * @property {string} [shortcut]  the key as menus show it ('' when the action has none)
+ * @property {boolean} [disabled]
+ * @property {boolean} [checked]  a toggle: drawn with a check, role menuitemcheckbox
+ * @property {boolean} [hidden]   left out of the menu
+ * @property {MenuItem[]} [submenu]
+ * @property {() => unknown} [run]
+ * @property {boolean} [separator]
+ */
+
+export const VIEWPORT_MARGIN = 8;
+export const SUBMENU_GAP = 2;
+// What a submenu's first row sits under: the menu's padding plus the row's margin.
+export const SUBMENU_LEAD = 6;
+
+/**
+ * Items as the menu draws them: hidden ones and ones without a label left out, a submenu with nothing in it left
+ * out, no separator at either end or next to another.
+ * @param {(MenuItem | null | undefined)[]} items
+ * @returns {MenuItem[]}
+ */
+export function normalizeItems(items) {
+  const out = [];
+  for (const item of items || []) {
+    if (!item || item.hidden) continue;
+    if (item.separator) {
+      if (out.length && !out[out.length - 1].separator) out.push({ separator: true });
+      continue;
+    }
+    if (!item.label) continue;
+    if (item.submenu) {
+      const submenu = normalizeItems(item.submenu);
+      if (!submenu.length) continue;
+      out.push({ ...item, submenu });
+      continue;
+    }
+    out.push(item);
+  }
+  while (out.length && out[out.length - 1].separator) out.pop();
+  return out;
+}
+
+/**
+ * Sections in order, one separator between two that have something in them.
+ * @param {(MenuItem[] | null | undefined)[]} sections
+ * @returns {MenuItem[]}
+ */
+export function joinSections(sections) {
+  const out = [];
+  for (const section of sections || []) {
+    const items = normalizeItems(section);
+    if (!items.length) continue;
+    if (out.length) out.push({ separator: true });
+    out.push(...items);
+  }
+  return out;
+}
+
+/** How many rows a menu has at its top level (separators do not count). */
+export function countRows(items) {
+  return (items || []).filter((item) => item && !item.separator).length;
+}
+
+/**
+ * Where a menu of `width` × `height` goes for a press at (x, y): down and to the right of it, flipped up or left
+ * when that side has no room, and kept inside the window either way. `bounds` ({ left, top, right, bottom }) is the
+ * area it is kept in instead of the window: the app frame (app-frame.js) for a press inside it.
+ * @returns {{ left: number, top: number }}
+ */
+export function placeMenu({ x, y, width, height, viewportWidth, viewportHeight, margin = VIEWPORT_MARGIN, bounds = null }) {
+  const b = bounds || { left: 0, top: 0, right: viewportWidth, bottom: viewportHeight };
+  const fit = (at, size, lo, hi) => {
+    const first = lo + margin;                  // the first place it may start
+    const furthest = hi - margin - size;        // the last place it may start and still end inside the margin
+    if (furthest < first) return first;         // larger than the area: from the margin (it scrolls)
+    if (at + size <= hi - margin) return Math.max(first, at);
+    if (at - size >= first) return Math.min(at - size, furthest);
+    return furthest;
+  };
+  return {
+    left: Math.round(fit(x, width, b.left, b.right)),
+    top: Math.round(fit(y, height, b.top, b.bottom)),
+  };
+}
+
+/**
+ * Where a submenu goes: beside the menu it opens from, its first row level with the row that opened it; on the left
+ * when the window (or `bounds`, as for placeMenu) has no room on the right, and kept inside it.
+ * @param {{ left: number, right: number }} o.menuRect the menu it opens from
+ * @param {{ top: number }} o.rowRect the row that opens it
+ * @returns {{ left: number, top: number, side: 'right' | 'left' }}
+ */
+export function placeSubmenu({ menuRect, rowRect, width, height, viewportWidth, viewportHeight,
+  margin = VIEWPORT_MARGIN, gap = SUBMENU_GAP, lead = SUBMENU_LEAD, bounds = null }) {
+  const b = bounds || { left: 0, top: 0, right: viewportWidth, bottom: viewportHeight };
+  let side = 'right';
+  let left = menuRect.right + gap;
+  if (left + width > b.right - margin) {
+    const leftSide = menuRect.left - gap - width;
+    if (leftSide >= b.left + margin) { left = leftSide; side = 'left'; }
+    else left = Math.max(b.left + margin, b.right - margin - width);
+  }
+  const top = Math.max(b.top + margin, Math.min(rowRect.top - lead, b.bottom - margin - height));
+  return { left: Math.round(left), top: Math.round(top), side };
+}
+
+/**
+ * Where a menu opened from the keyboard points: inside the focused element near its top-left corner, or at its
+ * middle when it fills most of the window (the memory map).
+ */
+export function anchorPoint(rect, viewportWidth, viewportHeight) {
+  if (!rect) return { x: Math.round(viewportWidth / 2), y: Math.round(viewportHeight / 3) };
+  if (rect.width > viewportWidth * 0.6 && rect.height > viewportHeight * 0.6) {
+    return { x: Math.round(rect.left + rect.width / 2), y: Math.round(rect.top + rect.height / 2) };
+  }
+  return { x: Math.round(rect.left + Math.min(rect.width / 2, 16)), y: Math.round(rect.top + Math.min(rect.height / 2, 16)) };
+}
+
+const selectable = (item) => !!item && !item.separator && !item.disabled;
+
+/**
+ * The next row the keyboard can land on from `from` in direction `dir` (1 down, -1 up), wrapping; -1 when none can.
+ * From -1, down is the first row and up the last.
+ */
+export function stepIndex(items, from, dir) {
+  const n = items?.length || 0;
+  if (!n) return -1;
+  let i = from;
+  for (let k = 0; k < n; k++) {
+    i = i < 0 ? (dir > 0 ? 0 : n - 1) : (i + dir + n) % n;
+    if (selectable(items[i])) return i;
+  }
+  return -1;
+}
+
+/** The first and the last row the keyboard can land on. */
+export const firstIndex = (items) => stepIndex(items, -1, 1);
+export const lastIndex = (items) => stepIndex(items, -1, -1);
+
+/**
+ * The row typed letters go to: the next one whose label starts with them, from the row after `from` (a first
+ * letter) or from `from` itself (more letters of the same word). -1 when none does.
+ */
+export function typeaheadIndex(items, from, typed) {
+  const n = items?.length || 0;
+  const want = String(typed || '').toLowerCase();
+  if (!n || !want) return -1;
+  const start = want.length > 1 ? Math.max(0, from) : from + 1;
+  for (let k = 0; k < n; k++) {
+    const i = (((start + k) % n) + n) % n;
+    if (selectable(items[i]) && String(items[i].label || '').toLowerCase().startsWith(want)) return i;
+  }
+  return -1;
+}
+
+const TEXT_INPUT_TYPES = new Set(['', 'text', 'search', 'url', 'tel', 'email', 'password', 'number',
+  'date', 'datetime-local', 'month', 'time', 'week']);
+
+/**
+ * Whether an element is a field the browser's own menu belongs to (spelling, paste): a text input, a textarea, a
+ * native select or anything editable. Checkboxes, buttons and the like are not.
+ * @param {{ tagName?: string, type?: string, isContentEditable?: boolean, closest?: Function } | null} el
+ */
+export function isEditableTarget(el) {
+  if (!el) return false;
+  if (el.isContentEditable) return true;
+  const tag = String(el.tagName || '').toUpperCase();
+  if (tag === 'TEXTAREA' || tag === 'SELECT') return true;
+  if (tag === 'INPUT') return TEXT_INPUT_TYPES.has(String(el.type || '').toLowerCase());
+  return !!el.closest?.('[contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]');
+}
+
+/**
+ * Why the app's menu stays out of a right-click, or null when it opens. In order: another handler took the event
+ * (it called preventDefault: an area with a menu of its own), the press is on the app's menu itself, Shift is held
+ * (the escape hatch to the browser's menu), the target is a field, or it is in an area that opted out.
+ * @param {{ defaultPrevented?: boolean, shiftKey?: boolean }} event
+ * @param {{ inOwnMenu?: boolean, editable?: boolean, optedOut?: boolean }} target
+ * @returns {null | 'handled' | 'own-menu' | 'shift' | 'editable' | 'opt-out'}
+ */
+export function nativeMenuReason(event, target = {}) {
+  if (event?.defaultPrevented) return 'handled';
+  if (target.inOwnMenu) return 'own-menu';
+  if (event?.shiftKey) return 'shift';
+  if (target.editable) return 'editable';
+  if (target.optedOut) return 'opt-out';
+  return null;
+}
+
+/** Whether a key press asks for a context menu: the ContextMenu key, or Shift+F10, with no other modifier. */
+export function isMenuKey(event) {
+  if (!event || event.ctrlKey || event.metaKey || event.altKey) return false;
+  return event.key === 'ContextMenu' || (event.key === 'F10' && !!event.shiftKey);
+}
+
+/**
+ * A link the menu can offer: http(s) only, and not one that only points into the page (`#`, `#…`) or runs script.
+ * @param {string | null} raw the href as written
+ * @param {string | null} resolved the href the browser resolved
+ * @returns {string | null} the address to open or copy
+ */
+export function usableLink(raw, resolved) {
+  const written = String(raw ?? '').trim();
+  if (!written || written.startsWith('#')) return null;
+  if (/^\s*javascript:/i.test(written)) return null;
+  return /^https?:\/\//i.test(String(resolved || '')) ? String(resolved) : null;
+}
+
+/**
+ * An image the menu can offer. A data: or blob: picture can be copied by address; only an http(s) one opens in a
+ * new tab (browsers refuse to open a data: address there).
+ * @returns {{ src: string, canOpen: boolean } | null}
+ */
+export function usableImage(src) {
+  const value = String(src || '');
+  if (/^https?:\/\//i.test(value)) return { src: value, canOpen: true };
+  if (/^(data|blob):/i.test(value)) return { src: value, canOpen: false };
+  return null;
+}
+
+/** A selection as a menu label shows it: one line, at most `max` characters, an ellipsis when cut. */
+export function quoteSelection(text, max = 24) {
+  const flat = String(text || '').replace(/\s+/g, ' ').trim();
+  return flat.length > max ? `${flat.slice(0, max - 1).trimEnd()}…` : flat;
+}
+
+/** The selected text an action takes: trimmed, and capped so a whole page selected is not sent anywhere at once. */
+export const SELECTION_MAX = 4000;
+export function selectionPayload(text, max = SELECTION_MAX) {
+  const value = String(text || '').trim();
+  return value.length > max ? value.slice(0, max) : value;
+}

package/neural-interface/public/shared/context-menu-model.js

@@ -0,0 +1,366 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — The app's context menu: what is in it
+// DOM-free. buildAppMenu(ctx, env) turns what was right-clicked into menu
+// items. ui-context-menu.js supplies `env`: the strings (t), the keys as the
+// central keybind registry has them now, what the page can do at this moment
+// and the actions, which are the app's own functions (registered keybind
+// actions, the event bus, the panels' buttons, the whiteboard's toolbar).
+// Nothing here runs an action itself, so tests/context-menu-model.test.mjs
+// can check every context.
+// ═══════════════════════════════════════════
+
+import { joinSections, quoteSelection } from './context-menu-logic.js';
+import { resolveViewVariant } from './view-variant.js';
+
+const svg = (body) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`;
+
+// The stroke icons of the menubar's dropdowns (same viewBox, stroke and caps).
+export const ICONS = {
+  back: svg('<line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>'),
+  forward: svg('<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>'),
+  reload: svg('<path d="M23 4v6h-6"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>'),
+  copy: svg('<rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>'),
+  link: svg('<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>'),
+  external: svg('<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>'),
+  image: svg('<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>'),
+  search: svg('<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>'),
+  fullscreen: svg('<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/>'),
+  exitFullscreen: svg('<path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"/>'),
+  send: svg('<line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>'),
+  memory: svg('<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="13" y2="17"/>'),
+  // The memory card's Linked (focus) button
+  linked: svg('<circle cx="12" cy="12" r="3"/><path d="M12 2v4m0 12v4m-7.07-14.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83"/>'),
+  hash: svg('<line x1="4" y1="9" x2="20" y2="9"/><line x1="4" y1="15" x2="20" y2="15"/><line x1="10" y1="3" x2="8" y2="21"/><line x1="16" y1="3" x2="14" y2="21"/>'),
+  select: svg('<polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>'),
+  // Apps › Map
+  map: svg('<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/>'),
+  target: svg('<circle cx="12" cy="12" r="10"/><line x1="22" y1="12" x2="18" y2="12"/><line x1="6" y1="12" x2="2" y2="12"/><line x1="12" y1="6" x2="12" y2="2"/><line x1="12" y1="22" x2="12" y2="18"/>'),
+  frame: svg('<path d="M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/>'),
+  sliders: svg('<line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>'),
+  layers: svg('<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>'),
+  clear: svg('<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>'),
+  // Apps › Browser apps
+  grid: svg('<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>'),
+  keyboard: svg('<rect x="2" y="4" width="20" height="16" rx="2"/><path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M6 12h.01M10 12h.01M14 12h.01M18 12h.01M7 16h10"/>'),
+  settings: svg('<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>'),
+  page: svg('<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="9" x2="21" y2="9"/>'),
+  panel: svg('<rect x="3" y="3" width="18" height="18" rx="2"/><line x1="15" y1="3" x2="15" y2="21"/>'),
+  terminal: svg('<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>'),
+  folder: svg('<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>'),
+  list: svg('<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>'),
+  tag: svg('<path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/>'),
+  pen: svg('<path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/>'),
+  star: svg('<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>'),
+  zap: svg('<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>'),
+  clock: svg('<circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>'),
+  play: svg('<polygon points="6 3 20 12 6 21 6 3"/>'),
+  bell: svg('<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>'),
+  help: svg('<circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/>'),
+  // The focus-mode whiteboard's toolbar (html-shell.js #wb-toolbar)
+  undo: svg('<polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>'),
+  redo: svg('<polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>'),
+  pointer: svg('<path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z"/>'),
+  // The navbar's focus-mode button (#titlebar-viz-toggle)
+  exitFocus: svg('<circle cx="12" cy="12" r="4"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/>'),
+};
+
+/**
+ * The whiteboard's tools, in the order of its toolbar (`data-tool` of #wb-toolbar). The whiteboard has no rebindable
+ * keys for them; its own fixed keys (ui-whiteboard.js onKeyDown) are WHITEBOARD_KEYS.
+ */
+export const WHITEBOARD_TOOLS = ['select', 'text', 'list', 'arrow', 'shape', 'pen', 'section'];
+
+/** The whiteboard's fixed keys, written as the keybind registry writes a key (Ctrl stands for Cmd on a Mac too). */
+export const WHITEBOARD_KEYS = { multi: 'M', undo: 'Ctrl + Z', redo: 'Ctrl + Shift + Z', selectAll: 'Ctrl + A' };
+
+/** Map options. The deprecated 2D definitions remain for the archived source; current contexts resolve to 3D. */
+export const MAP_OPTIONS = { '3d': ['neighbors', 'recency', 'grid'], '2d': ['minimap', 'regionGlow'] };
+// A switch with a registered key shows it.
+const MAP_OPTION_ACTIONS = { minimap: 'toggle-minimap' };
+
+/**
+ * The Open › submenu: the app's panels, windows and tools, each through the path its own button or key uses.
+ * `action`: a registered keybind action (its key is shown); `press`: the button that opens it; `event`: the bus
+ * event the menubar emits. `perm`: what a guest needs (the menubar's MENU_PERM_MAP). `active`: the element whose
+ * `.active` says it is open now (a `!` in front: open while that element is NOT active). `appIcon`: the Apps
+ * menu row whose icon it shows. `null` is a separator.
+ */
+export const OPEN_ENTRIES = [
+  { id: 'open-assistant', key: 'assistant', action: 'launch-assistant', appIcon: 'menu-terminal-assistant', icon: 'panel' },
+  { id: 'open-claude-panel', key: 'claudePanel', action: 'toggle-claude-panel', active: 'topright-claude-panel-btn', appIcon: 'menu-terminal-claude', icon: 'panel' },
+  { id: 'open-codex-panel', key: 'codexPanel', press: 'topright-codex-panel-btn', active: 'topright-codex-panel-btn', appIcon: 'menu-terminal-codex', icon: 'panel' },
+  { id: 'open-opencode-panel', key: 'opencodePanel', press: 'topright-opencode-panel-btn', active: 'topright-opencode-panel-btn', appIcon: 'menu-terminal-opencode', icon: 'panel' },
+  null,
+  { id: 'open-terminal', key: 'terminal', event: ['terminal:open', { profile: 'shell' }], perm: 'terminal', appIcon: 'menu-terminal-shell', icon: 'terminal' },
+  { id: 'open-claude-terminal', key: 'claudeTerminal', action: 'launch-claude', perm: 'terminal', icon: 'terminal' },
+  { id: 'open-browser', key: 'browser', action: 'launch-browser', perm: 'browser', appIcon: 'menu-terminal-browser', icon: 'page' },
+  null,
+  { id: 'open-file-explorer', key: 'fileExplorer', action: 'toggle-file-explorer', active: 'menu-toggle-file-explorer', icon: 'folder' },
+  { id: 'open-memory-explorer', key: 'memoryExplorer', action: 'toggle-explorer', active: 'menu-toggle-explorer', icon: 'list' },
+  { id: 'open-categories', key: 'categories', action: 'toggle-categories', active: 'menu-toggle-categories', icon: 'tag' },
+  { id: 'open-focus-mode', key: 'focusMode', action: 'toggle-focus-mode', active: '!titlebar-viz-toggle', perm: 'whiteboard', icon: 'pen' },
+  null,
+  { id: 'open-skills', key: 'skills', action: 'open-skills', perm: 'skills', icon: 'star' },
+  { id: 'open-automations', key: 'automations', action: 'open-automations', perm: 'automations', icon: 'zap' },
+  { id: 'open-schedules', key: 'schedules', event: ['schedules:toggle'], active: 'menubar-schedules-btn', perm: 'automations', icon: 'clock' },
+  { id: 'open-style-guide', key: 'styleGuide', event: ['styleguide:open'], perm: 'styleGuide', appIcon: 'menu-open-styleguide', icon: 'grid' },
+  { id: 'open-command-runner', key: 'commandRunner', event: ['command-runner:open'], appIcon: 'menu-command-runner', icon: 'play' },
+  { id: 'open-image-gallery', key: 'imageGallery', action: 'toggle-image-gallery', active: 'titlebar-gallery-btn', icon: 'image' },
+  { id: 'open-notifications', key: 'notifications', action: 'toggle-session-monitor', active: 'titlebar-sessions-btn', icon: 'bell' },
+  { id: 'open-help', key: 'help', action: 'toggle-help', icon: 'help' },
+];
+
+/**
+ * @typedef {object} MenuEnv
+ * @property {(key: string, params?: object) => string} t
+ * @property {(actionId: string) => string} shortcut   the key as menus show it, '' while unbound
+ * @property {(actionId: string) => boolean} hasAction  a registered keybind action
+ * @property {(id: string) => boolean} hasElement       a button on this page
+ * @property {(id: string) => boolean} isActive         that element has `.active`
+ * @property {(perm: string) => boolean} allowed        false for a guest without that permission
+ * @property {(id: string) => string} [appIcon]         the icon markup an Apps menu row shows, '' when none
+ * @property {{ url: string, canGoBack: boolean, canGoForward: boolean, fullscreen: boolean, fullscreenEnabled: boolean }} page
+ * @property {Record<string, Function>} act             the actions (see ui-context-menu.js)
+ */
+
+/**
+ * What a right-click is on.
+ * @typedef {object} MenuContext
+ * @property {string} [selection]  the selected text it is over ('' or missing: none)
+ * @property {string | null} [link] an http(s) link under it
+ * @property {{ src: string, canOpen: boolean } | null} [image]
+ * @property {{ kind: 'memory', memory: MemoryTarget, act?: object } | { kind: 'map', map: MapTarget, act?: object }
+ *   | { kind: 'focus', focus: FocusTarget, act?: object } | null} [area]
+ */
+
+/**
+ * @typedef {object} MemoryTarget
+ * @property {string} id
+ * @property {boolean} [card]     a memory card: it is open already, so Close card instead of Open
+ * @property {boolean} [onMap]    a point on the memory map: it can join the multi-selection and fly to its island
+ * @property {boolean} [selected] in the multi-selection now
+ * @property {string} [island]    its category (the island it is on)
+ */
+
+/**
+ * @typedef {object} MapTarget
+ * @property {Record<string, boolean>} [options] the switches of MAP_OPTIONS[variant], as they are now
+ * @property {boolean} [searching]  a search is dimming the map
+ * @property {boolean} [selected]   a memory is selected on it (3D) or memories are in the multi-selection (2D)
+ * @property {{ name: string, type: string } | null} [label] an island or continent name under the pointer
+ * @property {'2d' | '3d'} [variant]
+ */
+
+/**
+ * The focus-mode screen (the whiteboard), as it is now.
+ * @typedef {object} FocusTarget
+ * @property {string} [tool]        the whiteboard's active tool (WHITEBOARD_TOOLS)
+ * @property {boolean} [multi]      multi-select mode is on
+ * @property {boolean} [canUndo]
+ * @property {boolean} [canRedo]
+ * @property {boolean} [hasElements] something is on the board (Select all)
+ * @property {boolean} [canEdit]    false for a guest without the whiteboard permission: only Select is left
+ */
+
+/** The top level stays short: about 12 rows at most (tests check every context against it). */
+export const MAX_TOP_LEVEL = 12;
+
+/**
+ * The menu for a right-click.
+ * @param {MenuContext} ctx
+ * @param {MenuEnv} env
+ */
+export function buildAppMenu(ctx = {}, env) {
+  const act = { ...env.act, ...(ctx.area?.act || {}) };
+  const selection = ctx.selection || '';
+  const targeted = !!(selection || ctx.link || ctx.image || ctx.area);
+  const sections = [];
+  if (!targeted) sections.push(pageNavigation(env, act), pageTools(env, act, { withCopy: true }));
+  if (selection) sections.push(selectionItems(selection, env, act));
+  if (ctx.link) sections.push(linkItems(ctx.link, env, act));
+  if (ctx.image) sections.push(imageItems(ctx.image, env, act));
+  if (ctx.area?.kind === 'memory') sections.push(memoryItems(ctx.area.memory, env, act));
+  if (ctx.area?.kind === 'map') sections.push(mapItems(ctx.area.map, env, act));
+  if (ctx.area?.kind === 'focus') sections.push(focusItems(ctx.area.focus, env, act));
+  sections.push(appItems(env, act, { search: !selection }));
+  if (targeted) sections.push([pageSubmenu(env, act)]);
+  return joinSections(sections);
+}
+
+// ── Page ──
+
+function pageNavigation({ t, page }, act) {
+  return [
+    { id: 'back', label: t('contextMenu.page.back'), icon: ICONS.back, disabled: !page.canGoBack, run: () => act.back() },
+    { id: 'forward', label: t('contextMenu.page.forward'), icon: ICONS.forward, disabled: !page.canGoForward, run: () => act.forward() },
+    { id: 'reload', label: t('contextMenu.page.reload'), icon: ICONS.reload, run: () => act.reload() },
+  ];
+}
+
+function pageTools({ t, page }, act, { withCopy = false } = {}) {
+  return [
+    // Nothing is selected where the menu opened: Copy is there, and off.
+    withCopy && { id: 'copy', label: t('contextMenu.selection.copy'), icon: ICONS.copy, disabled: true },
+    { id: 'copy-url', label: t('contextMenu.page.copyUrl'), icon: ICONS.link, run: () => act.copyText(page.url) },
+    {
+      id: 'fullscreen',
+      label: t(page.fullscreen ? 'contextMenu.page.exitFullscreen' : 'contextMenu.page.fullscreen'),
+      icon: page.fullscreen ? ICONS.exitFullscreen : ICONS.fullscreen,
+      disabled: !page.fullscreenEnabled,
+      run: () => act.toggleFullscreen(),
+    },
+  ];
+}
+
+function pageSubmenu(env, act) {
+  return {
+    id: 'page',
+    label: env.t('contextMenu.page.submenu'),
+    icon: ICONS.page,
+    submenu: [...pageNavigation(env, act), { separator: true }, ...pageTools(env, act)],
+  };
+}
+
+// ── Selection, link, image ──
+
+function selectionItems(text, { t }, act) {
+  return [
+    { id: 'copy', label: t('contextMenu.selection.copy'), icon: ICONS.copy, run: () => act.copyText(text) },
+    { id: 'search-selection', label: t('contextMenu.selection.search', { text: quoteSelection(text) }), icon: ICONS.search, run: () => act.searchMemories(text) },
+    { id: 'send-selection', label: t('contextMenu.selection.sendToAi'), icon: ICONS.send, run: () => act.sendText(text) },
+  ];
+}
+
+function linkItems(href, { t }, act) {
+  return [
+    { id: 'open-link', label: t('contextMenu.link.open'), icon: ICONS.external, run: () => act.openInNewTab(href) },
+    { id: 'copy-link', label: t('contextMenu.link.copy'), icon: ICONS.link, run: () => act.copyText(href) },
+  ];
+}
+
+function imageItems(image, { t }, act) {
+  return [
+    { id: 'open-image', label: t('contextMenu.image.open'), icon: ICONS.image, disabled: !image.canOpen, run: () => act.openInNewTab(image.src) },
+    { id: 'copy-image', label: t('contextMenu.image.copy'), icon: ICONS.copy, run: () => act.copyText(image.src) },
+  ];
+}
+
+// ── A memory (a point on the map, an Explorer row, a memory card) ──
+
+function memoryItems(memory, { t }, act) {
+  const { id } = memory;
+  return [
+    !memory.card && { id: 'memory-open', label: t('contextMenu.memory.open'), icon: ICONS.memory, run: () => act.openMemory(id) },
+    { id: 'memory-linked', label: t('contextMenu.memory.linked'), icon: ICONS.linked, run: () => act.showLinked(id) },
+    { id: 'memory-copy-id', label: t('contextMenu.memory.copyId'), icon: ICONS.hash, run: () => act.copyText(id) },
+    { id: 'memory-send', label: t('contextMenu.memory.sendToAi'), icon: ICONS.send, run: () => act.sendMemory(id) },
+    memory.onMap && {
+      id: 'memory-select',
+      label: t(memory.selected ? 'contextMenu.memory.deselect' : 'contextMenu.memory.select'),
+      icon: ICONS.select,
+      run: () => act.toggleSelect(id),
+    },
+    memory.onMap && memory.island && {
+      id: 'memory-island',
+      label: t('contextMenu.memory.goToIsland', { name: memory.island }),
+      icon: ICONS.target,
+      run: () => act.flyToIsland(memory.island),
+    },
+    memory.card && { id: 'memory-close-card', label: t('contextMenu.memory.closeCard'), icon: ICONS.clear, run: () => act.closeCard(id) },
+  ];
+}
+
+// ── The memory map's empty space or a name on it ──
+
+function mapItems(map, { t, shortcut }, act) {
+  const options = map.options || {};
+  const variant = resolveViewVariant(map.variant);
+  const toggle = (key) => ({
+    id: `map-${key}`,
+    label: t(`contextMenu.map.${key}`),
+    checked: !!options[key],
+    shortcut: MAP_OPTION_ACTIONS[key] ? shortcut(MAP_OPTION_ACTIONS[key]) : '',
+    run: () => act.toggleOption(key),
+  });
+  return [
+    map.label && { id: 'map-go-to', label: t('contextMenu.map.goTo', { name: map.label.name }), icon: ICONS.target, run: () => act.flyToLabel() },
+    { id: 'map-frame-all', label: t('contextMenu.map.frameAll'), icon: ICONS.frame, shortcut: shortcut('map-frame-all'), run: () => act.frameAll() },
+    { id: 'map-options', label: t('contextMenu.map.options'), icon: ICONS.sliders, submenu: MAP_OPTIONS[variant].map(toggle) },
+    map.searching && { id: 'map-clear-search', label: t('contextMenu.map.clearSearch'), icon: ICONS.clear, run: () => act.clearSearch() },
+    map.selected && { id: 'map-clear-selection', label: t('contextMenu.map.clearSelection'), icon: ICONS.clear, run: () => act.clearSelection() },
+  ];
+}
+
+// ── The focus-mode screen: the whiteboard's own tools, and the way out ──
+
+function focusItems(focus, { t, shortcut }, act) {
+  const tool = focus.tool || 'select';
+  const canEdit = focus.canEdit !== false;
+  const tools = WHITEBOARD_TOOLS.map((key) => ({
+    id: `focus-tool-${key}`,
+    label: t(`contextMenu.focus.tools.${key}`),
+    checked: !focus.multi && tool === key,
+    disabled: !canEdit && key !== 'select',
+    run: () => act.setTool(key),
+  }));
+  return [
+    {
+      id: 'focus-tool',
+      label: t('contextMenu.focus.tool'),
+      icon: ICONS.pointer,
+      submenu: [
+        ...tools,
+        { separator: true },
+        { id: 'focus-multi', label: t('contextMenu.focus.multiSelect'), checked: !!focus.multi, disabled: !canEdit, shortcut: WHITEBOARD_KEYS.multi, run: () => act.toggleMulti() },
+      ],
+    },
+    { id: 'focus-undo', label: t('contextMenu.focus.undo'), icon: ICONS.undo, shortcut: WHITEBOARD_KEYS.undo, disabled: !canEdit || !focus.canUndo, run: () => act.undo() },
+    { id: 'focus-redo', label: t('contextMenu.focus.redo'), icon: ICONS.redo, shortcut: WHITEBOARD_KEYS.redo, disabled: !canEdit || !focus.canRedo, run: () => act.redo() },
+    { id: 'focus-select-all', label: t('contextMenu.focus.selectAll'), icon: ICONS.select, shortcut: WHITEBOARD_KEYS.selectAll, disabled: !focus.hasElements, run: () => act.selectAll() },
+    { id: 'focus-exit', label: t('contextMenu.focus.exit'), icon: ICONS.exitFocus, shortcut: shortcut('toggle-focus-mode'), run: () => act.exitFocus() },
+  ];
+}
+
+// ── The app ──
+
+function openItems(env, act) {
+  const { t, shortcut, hasAction, hasElement, isActive, allowed } = env;
+  return OPEN_ENTRIES.map((entry) => {
+    if (!entry) return { separator: true };
+    const item = {
+      id: entry.id,
+      label: t(`contextMenu.open.${entry.key}`),
+      icon: env.appIcon?.(entry.appIcon) || ICONS[entry.icon] || '',
+      disabled: entry.perm ? !allowed(entry.perm) : false,
+    };
+    if (entry.action) {
+      item.hidden = !hasAction(entry.action);
+      item.shortcut = shortcut(entry.action);
+      item.run = () => act.runAction(entry.action);
+    } else if (entry.press) {
+      item.hidden = !hasElement(entry.press);
+      item.run = () => act.press(entry.press);
+    } else {
+      item.run = () => act.emit(...entry.event);
+    }
+    if (entry.active) {
+      const negate = entry.active.startsWith('!');
+      const id = negate ? entry.active.slice(1) : entry.active;
+      if (hasElement(id)) item.checked = negate ? !isActive(id) : isActive(id);
+    }
+    return item;
+  });
+}
+
+function appItems(env, act, { search = true } = {}) {
+  const { t, shortcut, hasAction } = env;
+  const registered = (id, actionId, key, icon) => ({
+    id, label: t(key), icon, shortcut: shortcut(actionId), hidden: !hasAction(actionId), run: () => act.runAction(actionId),
+  });
+  return [
+    { id: 'open', label: t('contextMenu.app.open'), icon: ICONS.grid, submenu: openItems(env, act) },
+    search && registered('search', 'focus-search', 'contextMenu.app.search', ICONS.search),
+    registered('shortcuts', 'open-keybinds', 'contextMenu.app.shortcuts', ICONS.keyboard),
+    registered('settings', 'open-settings', 'contextMenu.app.settings', ICONS.settings),
+  ];
+}