synabun 2.0.9 → 2.1.0

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

@@ -0,0 +1,295 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — The app's right-click menu
+// A right-click anywhere that has no menu of its own opens the app's menu
+// instead of the browser's: page actions, then what fits what was clicked
+// (selected text, a link, an image, a memory, the memory map, the 2D graph,
+// the focus-mode whiteboard), then the app's panels and tools. The
+// ContextMenu key and Shift+F10 open it at the focused element.
+//
+// The rule: the app's menu opens unless the element under the pointer shows
+// a menu of its own for that very click. Such an element takes the event
+// (preventDefault) only when it opens its menu: the terminal's viewport, a
+// File Explorer row or its empty tree, an editor tab, a 2D graph card, an
+// Automation Studio item or folder, the map's canvas (OrbitControls takes
+// every right-click there for right-drag pan; the map opens this menu itself
+// when the right button comes up where it went down). An area that only
+// suppressed the browser's menu would leave the user with nothing, so none
+// does. NATIVE_CONTEXTMENU_SELECTORS names exact elements, never a whole
+// screen or panel. Fields keep the browser's menu (spelling, paste), and so
+// does any right-click with Shift held.
+//
+// The items are context-menu-model.js; the component is context-menu.js;
+// the areas registry is context-menu-areas.js. Every action is a function the
+// app already has: a registered keybind action, a bus event the menubar
+// emits, a panel's button, sendToPanel, the memory card's functions.
+// ═══════════════════════════════════════════
+
+import { openContextMenu, isContextMenuOpen } from './context-menu.js';
+import { isEditableTarget, isMenuKey, nativeMenuReason, selectionPayload, usableImage, usableLink } from './context-menu-logic.js';
+import { buildAppMenu } from './context-menu-model.js';
+import { areaAt, registerContextMenuArea } from './context-menu-areas.js';
+import { t } from './i18n.js';
+import { state, emit } from './state.js';
+import { actionForKey, getShortcutLabel, hasAction, runAction } from './ui-keybinds.js';
+import { isGuest, hasPermission } from './ui-sync.js';
+import { sendToPanel } from './ui-claude-panel.js';
+import { closeMemoryCard, focusLinkedMemories, getOpenCardsSnapshot } from './ui-detail.js';
+import { formatMemoryForCLI } from './ui-terminal.js';
+import { fetchMemory } from './api.js';
+
+/**
+ * Where the browser's menu stays: the exact elements with a menu of their own (also for a click their handler did
+ * not take, such as Shift+F10 on them or a moment before they are wired), the other menus themselves, code editors,
+ * and what is not SynaBun's page or sits above the menu. Never a whole screen or panel: the rest of a panel gets the
+ * app's menu. Add `data-native-contextmenu` to an element to keep the browser's menu there.
+ */
+export const NATIVE_CONTEXTMENU_SELECTORS = [
+  '[data-native-contextmenu]',
+  '.term-viewport', '.xterm', '#term-context-menu',             // terminals (docked and floating) and their menu
+  '#fe-tree', '.fe-ctx-flyout',                                 // the File Explorer's tree (rows and its empty space) and its menus
+  '.cm-editor', '.fe-editor-menu',                              // a code editor anywhere; the editor's menus and palette
+  '#context-menu',                                              // the 2D graph's card menu
+  '.explorer-ctx-menu', '.as-context-menu',                     // the Explorer's and the Automation Studio's menus
+  '.browser-canvas',                                            // the SynaBun browser's view of another site (Back / Reload here would act on SynaBun)
+  '#loading-overlay',                                           // the loading / restart screen, above the menu
+];
+const OPT_OUT = NATIVE_CONTEXTMENU_SELECTORS.join(', ');
+const SEARCH_MAX = 500;   // a search for the selection takes its first 500 characters
+const KEY_ECHO_MS = 800;  // the contextmenu event a menu key sends after its keydown already opened the menu
+
+let _installed = false;
+let _keyboardOpenedAt = -Infinity;
+
+// ═══════════════════════════════════════════
+// AREAS (context-menu-areas.js; re-exported here for the pages that already import this module)
+// ═══════════════════════════════════════════
+
+export { registerContextMenuArea };
+
+// A row of the memory Explorer.
+const explorerArea = {
+  id: 'memory-explorer',
+  match(el) {
+    const row = el?.closest?.('.explorer-memory[data-id]');
+    return row ? { kind: 'memory', memory: { id: row.dataset.id } } : null;
+  },
+};
+
+// A memory card (ui-detail.js names its element after the memory's first 8 characters).
+const cardArea = {
+  id: 'memory-card',
+  match(el) {
+    const card = el?.closest?.('.detail-card');
+    if (!card?.id) return null;
+    const open = getOpenCardsSnapshot().find((c) => card.id === `detail-card-${String(c.memoryId).slice(0, 8)}`);
+    return open ? { kind: 'memory', memory: { id: open.memoryId, card: true } } : null;
+  },
+};
+
+// ═══════════════════════════════════════════
+// WHAT WAS CLICKED
+// ═══════════════════════════════════════════
+
+const elementOf = (node) => (node && node.nodeType !== 1 ? node.parentElement : node) || null;
+
+// The selected text, when the right-click is on it (or the keyboard opened the menu while something is selected).
+function selectionAt(el) {
+  const sel = window.getSelection?.();
+  if (!sel || sel.isCollapsed || !sel.rangeCount) return '';
+  const text = selectionPayload(sel.toString());
+  if (!text) return '';
+  if (!el || el === document.body || el === document.documentElement) return text;
+  for (let i = 0; i < sel.rangeCount; i++) {
+    try { if (sel.getRangeAt(i).intersectsNode(el)) return text; } catch { /* a node from another document */ }
+  }
+  return '';
+}
+
+function linkAt(el) {
+  const a = el?.closest?.('a[href]');
+  if (!a) return null;
+  const raw = a.getAttribute('href');
+  let resolved = null;
+  try { resolved = new URL(raw, document.baseURI).href; } catch { /* not an address */ }
+  return usableLink(raw, resolved);
+}
+
+function imageAt(el) {
+  const img = el?.closest?.('img');
+  return img ? usableImage(img.currentSrc || img.src) : null;
+}
+
+/** What the menu is about for an element (null: the page itself). */
+export function contextAt(el) {
+  return { selection: selectionAt(el), link: linkAt(el), image: imageAt(el), area: areaAt(el) };
+}
+
+// ═══════════════════════════════════════════
+// WHAT THE MENU CAN DO (the app's own functions)
+// ═══════════════════════════════════════════
+
+async function copyText(text) {
+  const value = String(text ?? '');
+  try {
+    if (navigator.clipboard?.writeText) { await navigator.clipboard.writeText(value); return true; }
+  } catch { /* not allowed here (an address that is not secure): the fallback below */ }
+  const area = document.createElement('textarea');
+  area.value = value;
+  area.setAttribute('readonly', '');
+  area.style.cssText = 'position:fixed;top:-1000px;left:0;opacity:0;';
+  document.body.appendChild(area);
+  area.select();
+  let ok = false;
+  try { ok = document.execCommand('copy'); } catch { /* nothing more to try */ }
+  area.remove();
+  return ok;
+}
+
+function toggleFullscreen() {
+  if (document.fullscreenElement) return document.exitFullscreen?.();
+  return document.documentElement.requestFullscreen?.();
+}
+
+// The search bar's own path: its input event shows "Searching…", waits its debounce and searches.
+function searchMemories(text) {
+  const query = selectionPayload(text, SEARCH_MAX);
+  const input = document.getElementById('search-input');
+  if (!input || !query) return;
+  input.value = query;
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+}
+
+const findNode = (id) => state.allNodes?.find((n) => n.id === id) || null;
+
+// A memory the page has (the slim graph copy is enough to open it), else the one the server has.
+async function withMemory(id, fn) {
+  const node = findNode(id);
+  if (node) return fn(node);
+  const full = await fetchMemory(id).catch(() => null);
+  if (full?.payload) return fn({ id, payload: full.payload });
+  return undefined;
+}
+
+// The AI panel gets the whole memory (the graph's copy of its content is cut at 500 characters).
+async function sendMemory(id) {
+  const full = await fetchMemory(id).catch(() => null);
+  const node = full?.payload ? { id, payload: full.payload } : findNode(id);
+  if (node) await sendToPanel(formatMemoryForCLI(node));
+}
+
+export const ACTIONS = {
+  back: () => history.back(),
+  forward: () => history.forward(),
+  reload: () => location.reload(),
+  copyText,
+  toggleFullscreen,
+  openInNewTab: (href) => { window.open(href, '_blank', 'noopener,noreferrer'); },
+  searchMemories,
+  sendText: (text) => sendToPanel(text),
+  runAction: (actionId) => runAction(actionId),
+  press: (id) => document.getElementById(id)?.click(),
+  emit: (name, payload) => emit(name, payload),
+  openMemory: (id) => withMemory(id, (node) => emit('node-selected', node)),
+  showLinked: (id) => withMemory(id, (node) => { emit('node-selected', node); focusLinkedMemories(node.id); }),
+  sendMemory,
+  closeCard: (id) => closeMemoryCard(id),
+};
+
+function canGoBack() {
+  const nav = window.navigation;
+  return typeof nav?.canGoBack === 'boolean' ? nav.canGoBack : history.length > 1;
+}
+
+function canGoForward() {
+  const nav = window.navigation;
+  return typeof nav?.canGoForward === 'boolean' ? nav.canGoForward : true; // unknown without the Navigation API
+}
+
+/** The menu model's environment as the page is now (labels, keys and states are read at every open). */
+export function menuEnv() {
+  return {
+    t,
+    shortcut: (actionId) => getShortcutLabel(actionId),
+    hasAction,
+    hasElement: (id) => !!document.getElementById(id),
+    isActive: (id) => !!document.getElementById(id)?.classList.contains('active'),
+    allowed: (perm) => !isGuest() || hasPermission(perm),
+    appIcon: (id) => (id && document.getElementById(id)?.querySelector('.menu-icon')?.innerHTML) || '',
+    page: {
+      url: location.href,
+      canGoBack: canGoBack(),
+      canGoForward: canGoForward(),
+      fullscreen: !!document.fullscreenElement,
+      fullscreenEnabled: document.fullscreenEnabled !== false && typeof document.documentElement.requestFullscreen === 'function',
+    },
+    act: ACTIONS,
+  };
+}
+
+// ═══════════════════════════════════════════
+// OPENING
+// ═══════════════════════════════════════════
+
+// One menu at a time: the menubar, the dropdowns that listen for it, and the menus that only close on a click.
+function closeOtherMenus() {
+  emit('panel:close-all-dropdowns');
+  document.getElementById('term-context-menu')?.classList.remove('open');
+  document.getElementById('context-menu')?.classList.remove('open');
+  document.querySelectorAll('.as-context-menu, .explorer-ctx-menu').forEach((el) => el.remove());
+}
+
+function open(ctx, placement) {
+  const items = buildAppMenu(ctx, menuEnv());
+  closeOtherMenus();
+  return openContextMenu({ items, label: t('contextMenu.label'), ...placement });
+}
+
+/**
+ * Open the app's menu from an area that detects its own right-click (the memory map, where a right-drag pans):
+ * what is at `target`, with `area` in place of what the registered areas would say.
+ * @param {{ x?: number, y?: number, target?: Element | null, area?: object | null, keyboard?: boolean,
+ *   anchorRect?: DOMRect | null, returnFocus?: Element | null }} o
+ */
+export function openAppContextMenu({ x, y, target = null, area = null, keyboard = false, anchorRect = null, returnFocus } = {}) {
+  const el = elementOf(target);
+  const ctx = contextAt(el);
+  if (area) ctx.area = area;
+  return open(ctx, { x, y, anchorRect, keyboard, returnFocus: returnFocus === undefined ? document.activeElement : returnFocus });
+}
+
+function onContextMenu(event) {
+  // The menu key's own contextmenu event, after its keydown opened the menu.
+  if (isContextMenuOpen() && performance.now() - _keyboardOpenedAt < KEY_ECHO_MS) { event.preventDefault(); return; }
+  const el = elementOf(event.target);
+  const reason = nativeMenuReason(event, {
+    inOwnMenu: !!el?.closest?.('.app-ctx-menu'),
+    editable: isEditableTarget(el),
+    optedOut: !!el?.closest?.(OPT_OUT),
+  });
+  if (reason === 'own-menu') { event.preventDefault(); return; }
+  if (reason) return;
+  event.preventDefault();
+  open(contextAt(el), { x: event.clientX, y: event.clientY, keyboard: false, returnFocus: document.activeElement });
+}
+
+function onKeyDown(event) {
+  if (event.defaultPrevented || !isMenuKey(event) || isContextMenuOpen() || actionForKey(event)) return;
+  const active = document.activeElement;
+  const el = active && active !== document.body && active !== document.documentElement ? active : null;
+  if (el && (isEditableTarget(el) || el.closest(OPT_OUT) || el.closest('.app-ctx-menu'))) return;
+  event.preventDefault();
+  _keyboardOpenedAt = performance.now();
+  open(contextAt(el), { anchorRect: el?.getBoundingClientRect() || null, keyboard: true, returnFocus: el });
+}
+
+/** Install the app's right-click menu (once per page). */
+export function initAppContextMenu() {
+  if (_installed) return;
+  _installed = true;
+  registerContextMenuArea(explorerArea);
+  registerContextMenuArea(cardArea);
+  // Bubble phase at the window: every handler of the page has had the event first.
+  window.addEventListener('contextmenu', onContextMenu);
+  // A menu key the user bound to an action stays that action (actionForKey), whichever listener runs first.
+  document.addEventListener('keydown', onKeyDown);
+}

package/neural-interface/public/shared/ui-cost-widget.js

@@ -9,6 +9,7 @@
 import { on, emit } from './state.js';
 import { KEYS } from './constants.js';
 import { storage } from './storage.js';
+import { clampToFrame } from './app-frame.js';
 
 // ── State ──
 
@@ -39,10 +40,10 @@ export function initCostWidget() {
   if (!_docked) {
     const savedPos = _loadPos();
     if (savedPos) {
-      const maxLeft = window.innerWidth - 270;
-      const maxTop = window.innerHeight - 60;
-      _widget.style.left = Math.max(0, Math.min(savedPos.left, maxLeft)) + 'px';
-      _widget.style.top = Math.max(0, Math.min(savedPos.top, maxTop)) + 'px';
+      // Inside the app frame (about 270 × 60 of it on screen)
+      const at = clampToFrame(savedPos.left, savedPos.top, 270, 60);
+      _widget.style.left = at.x + 'px';
+      _widget.style.top = at.y + 'px';
     } else {
       _widget.style.right = '24px';
       _widget.style.bottom = '24px';
@@ -531,47 +532,47 @@ function _toggleCollapse() {
 
 // ── Drag ──
 
-function _makeDraggable(header) {
-  header.style.cursor = 'grab';
-
-  header.addEventListener('mousedown', (e) => {
+function _makeDraggable(header) {
+  header.style.cursor = 'move';
+
+  header.addEventListener('mousedown', (e) => {
     if (e.target.closest('.cw-collapse') || e.target.closest('.cw-scan')) return;
     e.preventDefault();
 
     // If docked, undock on drag
     if (_docked) _undock();
-
-    const rect = _widget.getBoundingClientRect();
-    _drag = {
-      startX: e.clientX,
-      startY: e.clientY,
-      origLeft: rect.left,
-      origTop: rect.top,
-      width: rect.width,
-      height: rect.height,
-    };
-    let dragRaf = 0;
-    let pendingPos = null;
-    const applyDrag = () => {
-      dragRaf = 0;
-      if (!_widget || !pendingPos) return;
-      _widget.style.left = pendingPos.left + 'px';
-      _widget.style.top = pendingPos.top + 'px';
-    };
-    const scheduleDrag = (left, top) => {
-      pendingPos = { left, top };
-      if (!dragRaf) dragRaf = requestAnimationFrame(applyDrag);
-    };
-    const flushDrag = () => {
-      if (dragRaf) {
-        cancelAnimationFrame(dragRaf);
-        dragRaf = 0;
-      }
-      applyDrag();
-    };
-    header.style.cursor = 'grabbing';
-
-    // Reset right/bottom positioning and switch to left/top
+
+    const rect = _widget.getBoundingClientRect();
+    _drag = {
+      startX: e.clientX,
+      startY: e.clientY,
+      origLeft: rect.left,
+      origTop: rect.top,
+      width: rect.width,
+      height: rect.height,
+    };
+    let dragRaf = 0;
+    let pendingPos = null;
+    const applyDrag = () => {
+      dragRaf = 0;
+      if (!_widget || !pendingPos) return;
+      _widget.style.left = pendingPos.left + 'px';
+      _widget.style.top = pendingPos.top + 'px';
+    };
+    const scheduleDrag = (left, top) => {
+      pendingPos = { left, top };
+      if (!dragRaf) dragRaf = requestAnimationFrame(applyDrag);
+    };
+    const flushDrag = () => {
+      if (dragRaf) {
+        cancelAnimationFrame(dragRaf);
+        dragRaf = 0;
+      }
+      applyDrag();
+    };
+    header.style.cursor = 'move';
+
+    // Reset right/bottom positioning and switch to left/top
     _widget.style.right = 'auto';
     _widget.style.bottom = 'auto';
     _widget.style.left = _drag.origLeft + 'px';
@@ -581,25 +582,22 @@ function _makeDraggable(header) {
       if (!_drag) return;
       const dx = ev.clientX - _drag.startX;
       const dy = ev.clientY - _drag.startY;
-      let newLeft = _drag.origLeft + dx;
-      let newTop = _drag.origTop + dy;
-      // Constrain to viewport
-      const ww = _drag.width;
-      const wh = _drag.height;
-      newLeft = Math.max(0, Math.min(window.innerWidth - ww, newLeft));
-      newTop = Math.max(0, Math.min(window.innerHeight - wh, newTop));
-      scheduleDrag(newLeft, newTop);
-    };
-
-    const onUp = () => {
-      document.removeEventListener('mousemove', onMove);
-      document.removeEventListener('mouseup', onUp);
-      header.style.cursor = 'grab';
-      if (_drag) {
-        flushDrag();
-        _savePos(parseInt(_widget.style.left), parseInt(_widget.style.top));
-        _drag = null;
-      }
+      let newLeft = _drag.origLeft + dx;
+      let newTop = _drag.origTop + dy;
+      // Constrain to the app frame
+      ({ x: newLeft, y: newTop } = clampToFrame(newLeft, newTop, _drag.width, _drag.height));
+      scheduleDrag(newLeft, newTop);
+    };
+
+    const onUp = () => {
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      header.style.cursor = 'move';
+      if (_drag) {
+        flushDrag();
+        _savePos(parseInt(_widget.style.left), parseInt(_widget.style.top));
+        _drag = null;
+      }
     };
 
     document.addEventListener('mousemove', onMove);

package/neural-interface/public/shared/ui-crash-notice.js

@@ -0,0 +1,187 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — the notice after an automatic restart: the page side
+// ═══════════════════════════════════════════
+//
+// Asks GET /api/system/crash-notice when the page starts and every time its sync
+// socket connects: a page that was open through the crash is not reloaded, its
+// sockets reconnect (ui-sync.js `session:info`). What crash-notice-view.js says is
+// drawn in the update toast's shape (bottom right, styles.css .update-check-toast,
+// .crash-notice) once the loading screen is gone, and stays until it is dismissed.
+// Dismiss asks the server to drop it (POST /api/system/crash-notice/dismiss), which
+// tells every other window (`sync:crash-notice:changed`); this browser also keeps
+// the id it dismissed, for a server that could not remove its record. Open logs
+// is Settings > App's own: the desktop app's bridge, or POST
+// /api/system/app/open-folder, which only a page on this computer may ask. Never
+// asked by an invite guest, and never drawn for one, whatever reaches its sync
+// socket: /api/system is the owner's (the server sends `crash-notice:` to the
+// owner's pages only).
+
+import { on } from './state.js';
+import { getLocale, t } from './i18n.js';
+import { desktopApp } from './desktop-bridge.js';
+import { isGuest } from './ui-sync.js';
+import { crashNoticeView, isLoopbackHost, readCrashNotice } from './crash-notice-view.js';
+
+const NOTICE_URL = '/api/system/crash-notice';
+const OPEN_FOLDER_URL = '/api/system/app/open-folder';
+const WRITE = Object.freeze({ 'Content-Type': 'application/json', 'X-SynaBun-UI': '1', Accept: 'application/json' });
+const DISMISSED_KEY = 'synabun-crash-notice-dismissed';
+const NOTICE_ID = 'crash-notice';
+
+const translate = (key, params) => t(`crashNotice.${key}`, params);
+
+let _wired = false;
+let _asking = null;
+let _current = null; // { id, el }
+let _waiting = null; // the notice that waits for the loading screen to go
+let _guest = false;  // what the last `session:info` said (ui-sync.js isGuest() is the socket's own word)
+
+const guestPage = () => _guest || isGuest();
+
+function esc(value) {
+  return String(value ?? '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+function dismissedHere(id) {
+  try { return localStorage.getItem(DISMISSED_KEY) === id; } catch { return false; }
+}
+
+function rememberDismissed(id) {
+  try { localStorage.setItem(DISMISSED_KEY, id); } catch { /* storage refused: the server's word is enough */ }
+}
+
+function canOpenLogs() {
+  if (typeof desktopApp()?.openFolder === 'function') return true;
+  return isLoopbackHost(location.hostname);
+}
+
+function hide() {
+  const current = _current;
+  _current = null;
+  if (!current) return;
+  current.el.classList.remove('show');
+  setTimeout(() => current.el.remove(), 250);
+}
+
+/** The loading screen covers the page while it starts: the notice waits for it to go. */
+function whenPageShown(run) {
+  const overlay = document.getElementById('loading-overlay');
+  if (!overlay || overlay.classList.contains('hidden')) { run(); return; }
+  const watch = new MutationObserver(() => {
+    if (!overlay.classList.contains('hidden')) return;
+    watch.disconnect();
+    run();
+  });
+  watch.observe(overlay, { attributes: true, attributeFilter: ['class'] });
+}
+
+function show(view) {
+  hide();
+  document.querySelectorAll(`#${NOTICE_ID}`).forEach((el) => el.remove());
+  const el = document.createElement('div');
+  el.className = 'update-check-toast crash-notice';
+  el.id = NOTICE_ID;
+  el.setAttribute('role', 'status');
+  el.setAttribute('aria-label', view.label);
+  el.dataset.noticeId = view.id;
+  const buttons = view.actions.map((item) => `<button class="action-btn action-btn--ghost crash-notice-btn" type="button" data-crash-action="${esc(item.id)}" id="crash-notice-${esc(item.id)}">${esc(item.label)}</button>`).join('');
+  el.innerHTML = `
+      <div class="utc-icon utc-icon--err" aria-hidden="true">!</div>
+      <div class="utc-body">
+        <div class="utc-title" id="crash-notice-title">${esc(view.title)}</div>
+        <div class="utc-sub" id="crash-notice-when">${esc(view.when)}</div>
+        ${view.how ? `<div class="utc-sub" id="crash-notice-how">${esc(view.how)}</div>` : ''}
+        <div class="crash-notice-lost-title" id="crash-notice-lost-title">${esc(view.lostTitle)}</div>
+        <ul class="utc-list crash-notice-lost" aria-labelledby="crash-notice-lost-title">${view.lost.map((line) => `<li>${esc(line)}</li>`).join('')}</ul>
+        <div class="utc-sub crash-notice-note" id="crash-notice-note" role="status" hidden></div>
+        <div class="update-notice-actions">${buttons}</div>
+      </div>`;
+  el.querySelectorAll('[data-crash-action]').forEach((btn) => {
+    btn.addEventListener('click', (event) => {
+      event.stopPropagation();
+      if (btn.dataset.crashAction === 'dismiss') dismiss(view.id);
+      else if (btn.dataset.crashAction === 'logs') openLogs(el);
+    });
+  });
+  document.body.appendChild(el);
+  requestAnimationFrame(() => el.classList.add('show'));
+  _current = { id: view.id, el };
+}
+
+/** Show this notice (or none): once per crash, never one this browser dismissed, never on a guest's page. */
+function present(notice) {
+  if (!notice || guestPage()) {
+    _waiting = null;
+    hide();
+    return;
+  }
+  // A notice something else took off the page is drawn again: it stays until it is dismissed.
+  if (_current && !_current.el.isConnected) _current = null;
+  if (dismissedHere(notice.id) || _current?.id === notice.id || _waiting?.id === notice.id) return;
+  _waiting = notice;
+  whenPageShown(() => {
+    if (_waiting !== notice) return;
+    _waiting = null;
+    if (dismissedHere(notice.id) || guestPage()) return;
+    show(crashNoticeView(notice, { t: translate, locale: getLocale(), canOpenLogs: canOpenLogs() }));
+  });
+}
+
+/** Ask the server; an older server (404) or a guest (403) has nothing to say. */
+export function checkCrashNotice() {
+  if (guestPage()) return Promise.resolve(null);
+  if (_asking) return _asking;
+  _asking = (async () => {
+    try {
+      const res = await fetch(NOTICE_URL, { headers: { Accept: 'application/json' }, cache: 'no-store' });
+      if (!res.ok) return null;
+      const notice = readCrashNotice(await res.json());
+      present(notice);
+      return notice;
+    } catch {
+      return null;
+    }
+  })().finally(() => { _asking = null; });
+  return _asking;
+}
+
+async function dismiss(id) {
+  rememberDismissed(id);
+  hide();
+  try {
+    const res = await fetch(`${NOTICE_URL}/dismiss`, { method: 'POST', headers: WRITE, body: JSON.stringify({ id }) });
+    const next = res.ok ? readCrashNotice(await res.json()) : null;
+    // A newer crash came while this one was shown: that one is news.
+    if (next && next.id !== id) present(next);
+  } catch { /* the server is away: this browser keeps it dismissed */ }
+}
+
+async function openLogs(el) {
+  const note = el.querySelector('#crash-notice-note');
+  const bridge = desktopApp();
+  let ok = false;
+  if (typeof bridge?.openFolder === 'function') {
+    try { ok = !!(await bridge.openFolder('logs'))?.ok; } catch { ok = false; }
+  } else {
+    try {
+      const res = await fetch(OPEN_FOLDER_URL, { method: 'POST', headers: WRITE, body: JSON.stringify({ which: 'logs' }) });
+      ok = res.ok;
+    } catch { ok = false; }
+  }
+  if (!note) return;
+  note.hidden = ok;
+  note.textContent = ok ? '' : translate('openLogsFailed');
+}
+
+/** Wire the notice once: ask now, and again every time the sync socket connects. */
+export function initCrashNotice() {
+  if (_wired) return;
+  _wired = true;
+  on('session:info', (info) => {
+    _guest = !!info?.isGuest;
+    if (_guest) present(null);
+    else checkCrashNotice();
+  });
+  on('sync:crash-notice:changed', (message) => present(readCrashNotice(message)));
+  checkCrashNotice();
+}