synabun 2.0.9 → 2.1.0

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

@@ -0,0 +1,372 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — Context menu component
+// One menu at a time, at the pointer or by the focused element, in the box of
+// the menubar's dropdown and with its rows (.menu-item, .menu-shortcut,
+// .menu-submenu-arrow, .menu-sep). Items are data (context-menu-logic.js);
+// this module draws them, places the menu and its submenus inside the window,
+// takes the keys while it is open and closes on a press outside, Escape,
+// Tab, scroll, resize, window blur and after an action. Any area can open
+// one; the app's global right-click menu is ui-context-menu.js.
+// ═══════════════════════════════════════════
+
+import {
+  anchorPoint, firstIndex, lastIndex, normalizeItems, placeMenu, placeSubmenu, stepIndex, typeaheadIndex,
+} from './context-menu-logic.js';
+import { boundsForPoint, frameRect } from './app-frame.js';
+
+const SUBMENU_OPEN_DELAY = 120; // hover intent before a submenu opens
+const SUBMENU_GRACE = 300;      // the pointer may cross other rows on its way into an open submenu
+const TYPEAHEAD_RESET = 600;
+const ARROW_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>';
+
+let _open = null; // the open menu's handle
+
+/** Whether a menu is open. */
+export const isContextMenuOpen = () => !!_open;
+
+/** Close the open menu, if there is one. `refocus: false` leaves the keyboard where it is. */
+export function closeContextMenu(o) { _open?.close(o); }
+
+/** The root element of the open menu, or null. */
+export const openContextMenuElement = () => _open?.element || null;
+
+/**
+ * Open a menu.
+ * @param {object} o
+ * @param {import('./context-menu-logic.js').MenuItem[]} o.items
+ * @param {number} [o.x] @param {number} [o.y] where the press was (client px)
+ * @param {DOMRect | null} [o.anchorRect] opened from the keyboard: the focused element's box, used when x/y are missing
+ * @param {string} [o.label] the menu's accessible name
+ * @param {boolean} [o.keyboard] opened from the keyboard: the first row has the focus from the start
+ * @param {Element | null} [o.returnFocus] where the keyboard goes back to when the menu closes
+ * @param {() => void} [o.onClose]
+ * @returns {{ close: Function, element: HTMLElement } | null} null when no item is left to show
+ */
+export function openContextMenu({ items, x, y, anchorRect = null, label = '', keyboard = false,
+  returnFocus = document.activeElement, onClose } = {}) {
+  // A menu opened over another one hands the keyboard back to where the first one would have.
+  if (_open && (!returnFocus || _open.contains(returnFocus))) returnFocus = _open.returnFocus;
+  closeContextMenu({ refocus: false });
+  const list = normalizeItems(items);
+  if (!list.length) return null;
+
+  const levels = []; // [{ el, items, rows, active, parentRow }]
+  let bounds = null;  // the app frame for a menu opened inside it (it and its submenus stay in it), else the window
+  let closed = false;
+  let subTimer = 0;
+  let subPending = null;
+  let typed = '';
+  let typedAt = 0;
+
+  // ── Drawing ──
+  function drawRow(item) {
+    if (item.separator) {
+      const sep = document.createElement('div');
+      sep.className = 'menu-sep';
+      sep.setAttribute('role', 'separator');
+      return sep;
+    }
+    const row = document.createElement('div');
+    row.className = 'menu-item';
+    row.tabIndex = -1;
+    const checkable = typeof item.checked === 'boolean';
+    row.setAttribute('role', checkable ? 'menuitemcheckbox' : 'menuitem');
+    if (checkable) {
+      row.setAttribute('aria-checked', String(item.checked));
+      row.classList.toggle('active', item.checked);
+    }
+    if (item.id) row.dataset.ctxId = item.id;
+    if (item.disabled) {
+      row.classList.add('disabled');
+      row.setAttribute('aria-disabled', 'true');
+    }
+    const check = document.createElement('span');
+    check.className = 'menu-check';
+    check.setAttribute('aria-hidden', 'true');
+    check.textContent = checkable ? '✓' : '';
+    const text = document.createElement('span');
+    text.className = 'menu-text';
+    if (item.icon) {
+      const icon = document.createElement('span');
+      icon.className = 'menu-icon';
+      icon.setAttribute('aria-hidden', 'true');
+      icon.innerHTML = item.icon; // the app's own markup, never text from the page
+      text.append(icon);
+    }
+    const name = document.createElement('span');
+    name.className = 'app-ctx-label';
+    name.textContent = item.label;
+    text.append(name);
+    row.append(check, text);
+    if (item.submenu) {
+      row.setAttribute('aria-haspopup', 'menu');
+      row.setAttribute('aria-expanded', 'false');
+      const arrow = document.createElement('span');
+      arrow.className = 'menu-submenu-arrow';
+      arrow.setAttribute('aria-hidden', 'true');
+      arrow.innerHTML = ARROW_SVG;
+      row.append(arrow);
+    } else if (item.shortcut) {
+      const key = document.createElement('span');
+      key.className = 'menu-shortcut';
+      key.textContent = item.shortcut;
+      row.append(key);
+    }
+    return row;
+  }
+
+  function drawLevel(levelItems, name) {
+    const el = document.createElement('div');
+    el.className = 'app-ctx-menu';
+    el.setAttribute('role', 'menu');
+    if (name) el.setAttribute('aria-label', name);
+    el.tabIndex = -1;
+    el.style.visibility = 'hidden';
+    const rows = levelItems.map(drawRow);
+    el.append(...rows);
+    const level = { el, items: levelItems, rows, active: -1, parentRow: null };
+    el.addEventListener('pointermove', (event) => onHover(level, event));
+    el.addEventListener('click', (event) => {
+      const index = rowIndex(level, event.target);
+      if (index >= 0) activate(level, index);
+    });
+    // The press stays off the page: nothing selected there is cleared, nothing behind the menu is focused.
+    el.addEventListener('pointerdown', (event) => event.preventDefault());
+    el.addEventListener('mousedown', (event) => event.preventDefault());
+    el.addEventListener('contextmenu', (event) => event.preventDefault());
+    document.body.appendChild(el);
+    return level;
+  }
+
+  const rowIndex = (level, node) => {
+    const row = node?.closest?.('.menu-item');
+    return row ? level.rows.indexOf(row) : -1;
+  };
+  const levelOf = (index) => levels[index];
+  const levelIndex = (level) => levels.indexOf(level);
+
+  // ── The row the keyboard and the pointer are on ──
+  function setActive(level, index, { focus = true } = {}) {
+    if (level.active >= 0) level.rows[level.active]?.classList.remove('focused');
+    level.active = index;
+    const row = index >= 0 ? level.rows[index] : null;
+    if (!row) { if (focus) level.el.focus({ preventScroll: true }); return; }
+    row.classList.add('focused');
+    if (focus) row.focus({ preventScroll: true });
+    row.scrollIntoView?.({ block: 'nearest' });
+  }
+
+  // The level the keyboard is in: the deepest one with a row on, else the deepest one open.
+  function keyLevel() {
+    for (let i = levels.length - 1; i >= 0; i--) if (levels[i].active >= 0) return levels[i];
+    return levels[levels.length - 1];
+  }
+
+  // ── Submenus ──
+  function openSubmenu(level, index, { focusFirst = false } = {}) {
+    cancelTimer();
+    const item = level.items[index];
+    const row = level.rows[index];
+    if (!item?.submenu || item.disabled) return;
+    const depth = levelIndex(level);
+    const next = levelOf(depth + 1);
+    if (next?.parentRow !== row) {
+      closeFrom(depth + 1);
+      const sub = drawLevel(item.submenu, item.label);
+      sub.parentRow = row;
+      levels.push(sub);
+      row.classList.add('submenu-open');
+      row.setAttribute('aria-expanded', 'true');
+      const menuRect = level.el.getBoundingClientRect();
+      const rowRect = row.getBoundingClientRect();
+      const box = sub.el.getBoundingClientRect();
+      const at = placeSubmenu({ menuRect, rowRect, width: box.width, height: box.height,
+        viewportWidth: window.innerWidth, viewportHeight: window.innerHeight, bounds });
+      sub.el.style.left = `${at.left}px`;
+      sub.el.style.top = `${at.top}px`;
+      sub.el.dataset.side = at.side;
+      sub.el.style.visibility = '';
+    }
+    if (focusFirst) setActive(levelOf(depth + 1), firstIndex(item.submenu));
+  }
+
+  // Close every level from `depth` down; the row that opened the first of them is no longer open.
+  function closeFrom(depth) {
+    while (levels.length > Math.max(depth, 1)) {
+      const level = levels.pop();
+      level.parentRow?.classList.remove('submenu-open');
+      level.parentRow?.setAttribute('aria-expanded', 'false');
+      level.el.remove();
+    }
+  }
+
+  function scheduleTimer(row, fn, ms) {
+    clearTimeout(subTimer);
+    subPending = row;
+    subTimer = setTimeout(() => { subTimer = 0; subPending = null; if (!closed) fn(); }, ms);
+  }
+  function cancelTimer() {
+    clearTimeout(subTimer);
+    subTimer = 0;
+    subPending = null;
+  }
+
+  function onHover(level, event) {
+    const index = rowIndex(level, event.target);
+    if (index < 0) return;
+    const item = level.items[index];
+    const row = level.rows[index];
+    if (item.disabled) return;
+    if (level.active !== index) setActive(level, index);
+    // Back in a parent level: the deeper ones lose their highlight, not their place.
+    const depth = levelIndex(level);
+    for (let i = depth + 1; i < levels.length; i++) setActive(levels[i], -1, { focus: false });
+    if (row === subPending) return;
+    const next = levelOf(depth + 1);
+    if (next) {
+      if (next.parentRow === row) { cancelTimer(); return; }
+      scheduleTimer(row, () => (item.submenu ? openSubmenu(level, index) : closeFrom(depth + 1)), SUBMENU_GRACE);
+    } else if (item.submenu) {
+      scheduleTimer(row, () => openSubmenu(level, index), SUBMENU_OPEN_DELAY);
+    } else {
+      cancelTimer();
+    }
+  }
+
+  // ── Choosing ──
+  function activate(level, index) {
+    const item = level.items[index];
+    if (!item || item.separator || item.disabled) return;
+    if (item.submenu) { openSubmenu(level, index, { focusFirst: true }); return; }
+    close({ refocus: true });
+    try {
+      const result = item.run?.();
+      if (result && typeof result.catch === 'function') result.catch((err) => console.warn('[context-menu] action failed:', err));
+    } catch (err) {
+      console.warn('[context-menu] action failed:', err);
+    }
+  }
+
+  // ── Keys (at the window, before anything in the page; the app's single-key shortcuts must not fire) ──
+  function onKey(event) {
+    if (event.ctrlKey || event.metaKey || event.altKey) {
+      if (event.key === 'Escape') { event.preventDefault(); close({ refocus: true }); }
+      return; // the browser's and the system's keys stay theirs
+    }
+    const level = keyLevel();
+    const depth = levelIndex(level);
+    const deepest = levels.length - 1; // a submenu the pointer opened may be open without the keyboard in it
+    const { key } = event;
+    const handled = () => { event.preventDefault(); event.stopPropagation(); };
+    // Moving to another row closes a submenu that belongs to the row left.
+    const move = (index) => {
+      setActive(level, index);
+      if (levelOf(depth + 1) && levelOf(depth + 1).parentRow !== level.rows[level.active]) closeFrom(depth + 1);
+    };
+    switch (key) {
+      case 'ArrowDown': handled(); move(stepIndex(level.items, level.active, 1)); return;
+      case 'ArrowUp': handled(); move(stepIndex(level.items, level.active, -1)); return;
+      case 'Home': handled(); move(firstIndex(level.items)); return;
+      case 'End': handled(); move(lastIndex(level.items)); return;
+      case 'ArrowRight':
+        handled();
+        if (level.items[level.active]?.submenu) openSubmenu(level, level.active, { focusFirst: true });
+        return;
+      case 'ArrowLeft':
+        handled();
+        if (deepest > 0) backTo(deepest);
+        return;
+      case 'Escape':
+        handled();
+        if (deepest > 0) backTo(deepest); else close({ refocus: true });
+        return;
+      case 'Tab': handled(); close({ refocus: true }); return;
+      case 'Enter':
+      case ' ':
+        handled();
+        if (level.active >= 0) activate(level, level.active);
+        return;
+      default:
+        if (key.length !== 1) return;
+        handled();
+        {
+          const now = Date.now();
+          typed = now - typedAt > TYPEAHEAD_RESET ? key : typed + key;
+          typedAt = now;
+          const index = typeaheadIndex(level.items, level.active, typed);
+          if (index >= 0) move(index);
+        }
+    }
+  }
+  // A Space released on a row must not reach it as a click either.
+  function onKeyUp(event) {
+    if (!event.ctrlKey && !event.metaKey && !event.altKey && (event.key === ' ' || event.key === 'Enter')) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+
+  // Leave a submenu for the row that opened it.
+  function backTo(depth) {
+    const parent = levelOf(depth - 1);
+    const row = levelOf(depth).parentRow;
+    closeFrom(depth);
+    setActive(parent, parent.rows.indexOf(row));
+  }
+
+  // ── Closing ──
+  const inside = (node) => levels.some((level) => level.el.contains(node));
+  const onOutsidePress = (event) => { if (!inside(event.target)) close({ refocus: false }); };
+  const onScroll = (event) => { if (!inside(event.target)) close({ refocus: false }); };
+  const onGone = () => close({ refocus: false });
+
+  function close({ refocus = true } = {}) {
+    if (closed) return;
+    closed = true;
+    if (_open === handle) _open = null;
+    cancelTimer();
+    window.removeEventListener('keydown', onKey, true);
+    window.removeEventListener('keyup', onKeyUp, true);
+    document.removeEventListener('pointerdown', onOutsidePress, true);
+    document.removeEventListener('scroll', onScroll, true);
+    document.removeEventListener('wheel', onScroll, true);
+    window.removeEventListener('resize', onGone);
+    window.removeEventListener('blur', onGone);
+    // The keyboard goes back where it was, unless the press outside already took it somewhere.
+    const active = document.activeElement;
+    const held = !active || active === document.body || inside(active);
+    for (const level of levels.splice(0)) level.el.remove();
+    if (refocus && held && returnFocus?.isConnected && typeof returnFocus.focus === 'function') {
+      try { returnFocus.focus({ preventScroll: true }); } catch { /* not focusable any more */ }
+    }
+    try { onClose?.(); } catch (err) { console.warn('[context-menu] onClose failed:', err); }
+  }
+
+  // ── Open ──
+  const root = drawLevel(list, label);
+  levels.push(root);
+  const box = root.el.getBoundingClientRect();
+  let px = x;
+  let py = y;
+  if (!Number.isFinite(px) || !Number.isFinite(py)) ({ x: px, y: py } = anchorPoint(anchorRect, window.innerWidth, window.innerHeight));
+  bounds = boundsForPoint(frameRect(), px, py);
+  const at = placeMenu({ x: px, y: py, width: box.width, height: box.height,
+    viewportWidth: window.innerWidth, viewportHeight: window.innerHeight, bounds });
+  root.el.style.left = `${at.left}px`;
+  root.el.style.top = `${at.top}px`;
+  root.el.style.visibility = '';
+  root.el.classList.add('app-ctx-menu--root');
+
+  const handle = { close, element: root.el, returnFocus, contains: inside };
+  _open = handle;
+  window.addEventListener('keydown', onKey, true);
+  window.addEventListener('keyup', onKeyUp, true);
+  document.addEventListener('pointerdown', onOutsidePress, true);
+  document.addEventListener('scroll', onScroll, true);
+  document.addEventListener('wheel', onScroll, { capture: true, passive: true });
+  window.addEventListener('resize', onGone);
+  window.addEventListener('blur', onGone);
+  if (keyboard) setActive(root, firstIndex(list));
+  else root.el.focus({ preventScroll: true });
+  return handle;
+}

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

@@ -12,6 +12,7 @@
 
 import { cpCtx } from './cp-ctx.js';
 import { contextReading, contextMenuModel, isUnset } from './cp-context-model.js';
+import { frameRect } from '../app-frame.js';
 
 const POP_ID = 'cp-context-popover';
 const LABEL = 'Context settings';
@@ -149,24 +150,24 @@ function tipClipped() {
 }
 
 // Below the cog, its right edge on the cog's; above it when there is more room
-// there; always inside the viewport, scrolling inside when it is taller.
+// there; always inside the app frame, scrolling inside when it is taller.
 function place() {
   const $cog = cog();
   if (!_open || !_pop || !$cog) return;
   const r = $cog.getBoundingClientRect();
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const width = Math.max(0, Math.min(WIDTH, vw - MARGIN * 2));
+  // Inside the app frame (app-frame.js; the whole window on a page without it)
+  const f = frameRect();
+  const width = Math.max(0, Math.min(WIDTH, f.width - MARGIN * 2));
   _pop.style.width = `${width}px`;
-  const below = vh - r.bottom - GAP - MARGIN;
-  const above = r.top - GAP - MARGIN;
+  const below = f.bottom - r.bottom - GAP - MARGIN;
+  const above = r.top - f.top - GAP - MARGIN;
   const up = below < 220 && above > below;
   _pop.style.maxHeight = `${Math.max(120, up ? above : below)}px`;
   const height = _pop.offsetHeight;
-  const left = Math.max(MARGIN, Math.min(r.right - width, vw - width - MARGIN));
+  const left = Math.max(f.left + MARGIN, Math.min(r.right - width, f.right - width - MARGIN));
   const top = up
-    ? Math.max(MARGIN, r.top - GAP - height)
-    : Math.max(MARGIN, Math.min(r.bottom + GAP, vh - MARGIN - height));
+    ? Math.max(f.top + MARGIN, r.top - GAP - height)
+    : Math.max(f.top + MARGIN, Math.min(r.bottom + GAP, f.bottom - MARGIN - height));
   _pop.style.left = `${Math.round(left)}px`;
   _pop.style.top = `${Math.round(top)}px`;
   // Once it has its width: only now is a cut value known.

package/neural-interface/public/shared/cp/cp-markdown.js

@@ -1,5 +1,4 @@
-// Markdown → HTML for every Markdown sink of the Claude panel, and the scrub a
-// stored transcript snapshot goes through before it is put back on the page.
+// Markdown → HTML for every Markdown sink of the Claude panel, and the panel's one escaper.
 //
 // What a model writes, what a command prints and what a transcript replays is
 // not ours: marked passes raw HTML through, so `<img onerror>` or a
@@ -47,58 +46,6 @@ export function renderMarkdown(text, { parse = null, sanitize = sanitizeHtmlStri
   }
 }
 
-// ── Stored snapshots ──
-// A snapshot is the transcript's own innerHTML, saved to be shown again on a
-// reopen. It is the panel's markup (cards, icons, buttons, data attributes),
-// so the Markdown allowlist would destroy it; but it may have been written by
-// a build that did not sanitise, and it comes back from storage. It is parsed
-// into an inert <template> and stripped of everything that can run or load
-// code before it reaches the page.
-
-const STORED_DROPPED = new Set(['script', 'iframe', 'frame', 'frameset', 'object', 'embed', 'applet', 'base', 'meta', 'link', 'style', 'template', 'noscript', 'foreignobject', 'animate', 'set', 'animatetransform', 'animatemotion']);
-const URL_ATTRS = new Set(['href', 'src', 'xlink:href', 'action', 'formaction', 'poster', 'data', 'background', 'ping']);
-const REMOVED_ATTRS = new Set(['srcdoc', 'srcset']);
-const SAFE_URL_SCHEMES = new Set(['http', 'https', 'mailto']);
-
-/** The scheme of a URL attribute as a browser reads it (whitespace and control characters ignored), or ''. */
-function schemeOf(value) {
-  const m = /^([a-z][a-z0-9+.-]*):/i.exec(String(value ?? '').replace(/[\u0000- ]/g, ''));
-  return m ? m[1].toLowerCase() : '';
-}
-
-function storedImageAllowed(src) {
-  const compact = String(src ?? '').replace(/[\u0000- ]/g, '');
-  if (!compact) return false;
-  if (/^data:image\//i.test(compact) || /^blob:/i.test(compact)) return true;
-  // A path on this server; a remote image is not loaded again from storage.
-  return !schemeOf(compact) && !compact.startsWith('//');
-}
-
-function scrubNode(parent) {
-  for (const node of [...parent.childNodes]) {
-    if (node.nodeType === 3) continue;
-    if (node.nodeType !== 1) { parent.removeChild(node); continue; }
-    const tag = String(node.localName || '').toLowerCase();
-    if (STORED_DROPPED.has(tag) || (tag === 'img' && !storedImageAllowed(node.getAttribute('src')))) { parent.removeChild(node); continue; }
-    for (const name of node.getAttributeNames()) {
-      const lower = name.toLowerCase();
-      if (lower.startsWith('on') || REMOVED_ATTRS.has(lower)) { node.removeAttribute(name); continue; }
-      if (!URL_ATTRS.has(lower)) continue;
-      const scheme = schemeOf(node.getAttribute(name));
-      if (!scheme || SAFE_URL_SCHEMES.has(scheme)) continue;
-      if (tag === 'img' && lower === 'src') continue; // data:image / blob, checked above
-      node.removeAttribute(name);
-    }
-    scrubNode(node);
-  }
-}
-
-/** A stored snapshot's markup → a DocumentFragment with nothing executable left in it. */
-export function scrubStoredHtml(html, doc = globalThis.document) {
-  const tpl = doc.createElement('template');
-  tpl.innerHTML = String(html ?? '');
-  scrubNode(tpl.content);
-  const out = doc.createDocumentFragment();
-  for (const node of [...tpl.content.childNodes]) out.appendChild(node);
-  return out;
-}
+// A stored transcript snapshot is not scrubbed here: the panel puts it back through
+// sanitizeStoredHtml() of assistant/asst-sanitize.js, the stored-transcript allowlist
+// every panel uses.

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

@@ -0,0 +1,168 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — the notice after an automatic restart: what it says
+// ═══════════════════════════════════════════
+//
+// When SynaBun's server crashes after it was up, its supervisor starts it again
+// and leaves the new server a record of the crash (lib/server-crash-record.js,
+// GET /api/system/crash-notice). The owner's pages say so until it is dismissed:
+// that the server stopped unexpectedly and was restarted, when and how it ended,
+// and what the restart ended. This module decides the words; ui-crash-notice.js
+// asks the server and draws them.
+//
+// What the restart ends is what the code does when the server process dies and
+// a new one starts, nothing more:
+//   - terminals: the pty host ends with the server and kills its shells
+//     (lib/pty-host/host.js on 'disconnect'); a new host has none of them
+//   - runs: dispatched worker runs and native loops that were running are marked
+//     interrupted at boot (lib/assistant-dispatch.js, lib/native-loop-runtime.js);
+//     Quick Timers, schedule timers set for later and the schedule queue live in
+//     memory; saved schedules keep firing. The program a run had started is not
+//     always ended with the server: on macOS and Linux a CLI whose input is not
+//     the server's (`claude -p`, `codex exec`) ends at its next write to the
+//     server, and on Windows one started through a shell is not in the server's
+//     job: hence "a step already under way may still finish"
+//   - replies: a Claude Code, Codex or Assistant turn in progress is gone, the
+//     conversation stays and the next message resumes it (an OpenCode serve that
+//     outlived the server may be adopted and go on: hence "may have been")
+//   - browser: the sessions SynaBun drove live in memory; their profiles stay
+//   - public address: cloudflared is not started again, a new start gets a new
+//     one. Windows ends it with the server (its job); on macOS and Linux it
+//     outlives a crash, and the new server ends it by its record at start
+//     (server.js sweepLeftoverTunnels). One it could not end is `tunnel:
+//     'unknown'` in the notice, and the notice says the address may still be open
+//
+// No imports and no DOM: `node --test` loads this file as it is
+// (tests/crash-notice-view.test.mjs). CRASH_NOTICE_COPY is the English of every
+// sentence; `crashNotice.*` in i18n/en.json must equal it and i18n/pt-BR.json
+// must have the same keys.
+
+export const CRASH_NOTICE_COPY = Object.freeze({
+  title: 'SynaBun\'s server stopped unexpectedly and was restarted automatically.',
+  whenToday: 'It happened at {time}.',
+  whenEarlier: 'It happened on {date} at {time}.',
+  whenManyToday: 'It happened {count} times, the last at {time}.',
+  whenManyEarlier: 'It happened {count} times, the last on {date} at {time}.',
+  how: 'How it ended: {exit}.',
+  lostTitle: 'What the restart ended',
+  lostTerminals: 'Open terminals were closed.',
+  lostRuns: 'Agent runs and loops that were running were interrupted, though a step already under way may still finish on its own. Timers and queued runs were cleared. Saved schedules keep running.',
+  lostReplies: 'Replies being written in the side panels or the Assistant may have been cut off. The conversations are kept: send again what did not finish.',
+  lostBrowser: 'Browser sessions SynaBun was driving ended. Their saved sign-ins are kept.',
+  lostTunnel: 'The public address, if it was on, is off. Turning it on again gives a new address.',
+  lostTunnelUnknown: 'The public address, if it was on, may still be open: SynaBun could not end the cloudflared that served it. Ending that process, or restarting the computer, closes it.',
+  openLogs: 'Open logs',
+  openLogsFailed: 'The logs folder could not be opened.',
+  dismiss: 'Dismiss',
+  label: 'Server restarted after a crash',
+  exitCode: 'exit code {code}',
+  exitText: '{status}, {kind}',
+  kindNativeCrash: 'native crash',
+  kindOutOfMemory: 'out of memory',
+  kindNodeFatal: 'Node.js fatal error',
+  kindError: 'stopped by an error',
+  kindKilled: 'ended by force',
+  kindInterrupted: 'interrupted',
+});
+
+/** The order the notice lists what the restart ended (the last: lostTunnelUnknown for a notice whose `tunnel` is 'unknown'). */
+export const CRASH_NOTICE_LOST = Object.freeze(['lostTerminals', 'lostRuns', 'lostReplies', 'lostBrowser', 'lostTunnel']);
+
+/** The word for each kind lib/server-exit.js names; a kind without one shows the status alone. */
+export const CRASH_KIND_KEYS = Object.freeze({
+  'native-crash': 'kindNativeCrash',
+  'out-of-memory': 'kindOutOfMemory',
+  'node-fatal': 'kindNodeFatal',
+  error: 'kindError',
+  killed: 'kindKilled',
+  interrupted: 'kindInterrupted',
+});
+
+/** A sentence of CRASH_NOTICE_COPY in English with its {values} filled; an unknown key is itself. */
+export function fillCrashNoticeCopy(key, params = {}) {
+  const text = Object.prototype.hasOwnProperty.call(CRASH_NOTICE_COPY, key) ? CRASH_NOTICE_COPY[key] : key;
+  return text.replace(/\{(\w+)\}/g, (whole, name) => (params[name] != null ? String(params[name]) : whole));
+}
+
+const ID = /^[0-9a-f]{16}$/;
+
+/**
+ * The notice in an answer of GET /api/system/crash-notice (or a `crash-notice:changed`
+ * message: both carry `notice`), checked field by field; null when there is none.
+ * `tunnel: 'unknown'` is there only when the server could not end the crashed
+ * server's cloudflared.
+ */
+export function readCrashNotice(answer) {
+  const notice = answer && typeof answer === 'object' ? answer.notice : null;
+  if (!notice || typeof notice !== 'object' || Array.isArray(notice)) return null;
+  if (typeof notice.id !== 'string' || !ID.test(notice.id)) return null;
+  const at = Number(notice.at);
+  if (!Number.isFinite(at) || at <= 0) return null;
+  const exit = notice.exit && typeof notice.exit === 'object' && !Array.isArray(notice.exit) ? notice.exit : {};
+  return {
+    id: notice.id,
+    at,
+    count: Number.isInteger(notice.count) && notice.count > 0 ? Math.min(notice.count, 999) : 1,
+    exit: {
+      hex: typeof exit.hex === 'string' && /^0x[0-9a-f]{8}$/i.test(exit.hex) ? `0x${exit.hex.slice(2).toUpperCase()}` : '',
+      signal: typeof exit.signal === 'string' && /^SIG[A-Z0-9]{1,10}$/.test(exit.signal) ? exit.signal : '',
+      code: Number.isInteger(exit.code) ? exit.code : null,
+      kind: typeof exit.kind === 'string' && /^[a-z][a-z-]{0,23}$/.test(exit.kind) ? exit.kind : '',
+    },
+    ...(notice.tunnel === 'unknown' ? { tunnel: 'unknown' } : {}),
+  };
+}
+
+/** How it ended in the reader's words ("0xC0000409, native crash"), or '' when the record names nothing. */
+export function crashExitWords(exit, t = fillCrashNoticeCopy) {
+  if (!exit || typeof exit !== 'object') return '';
+  const status = exit.hex || exit.signal || (Number.isInteger(exit.code) ? t('exitCode', { code: exit.code }) : '');
+  if (!status) return '';
+  const key = CRASH_KIND_KEYS[exit.kind];
+  return key ? t('exitText', { status, kind: t(key) }) : status;
+}
+
+/** When it happened, in the reader's locale: { today, date, time } (the date is for another day). */
+export function crashTimeParts(at, { now = Date.now(), locale = undefined } = {}) {
+  const when = new Date(at);
+  if (!Number.isFinite(when.getTime())) return null;
+  const day = new Date(now);
+  const today = when.getFullYear() === day.getFullYear() && when.getMonth() === day.getMonth() && when.getDate() === day.getDate();
+  const format = (fn, options, fallback) => { try { return fn.call(when, locale, options); } catch { return fallback; } };
+  return {
+    today,
+    date: format(Date.prototype.toLocaleDateString, { dateStyle: 'medium' }, when.toISOString().slice(0, 10)),
+    time: format(Date.prototype.toLocaleTimeString, { hour: '2-digit', minute: '2-digit' }, when.toISOString().slice(11, 16)),
+  };
+}
+
+/**
+ * What the notice shows, or null: { id, label, title, when, how, lostTitle, lost[], actions[] }.
+ * `t(key, params)` is a sentence of CRASH_NOTICE_COPY in the page's language; `canOpenLogs`
+ * says whether this page can open the logs folder (the desktop app, or a page on this computer).
+ */
+export function crashNoticeView(notice, { t = fillCrashNoticeCopy, now = Date.now(), locale = undefined, canOpenLogs = false } = {}) {
+  if (!notice || typeof notice !== 'object' || !notice.id) return null;
+  const parts = crashTimeParts(notice.at, { now, locale }) || { today: true, date: '', time: '' };
+  const many = notice.count > 1;
+  const whenKey = `${many ? 'whenMany' : 'when'}${parts.today ? 'Today' : 'Earlier'}`;
+  const exit = crashExitWords(notice.exit, t);
+  return {
+    id: notice.id,
+    label: t('label'),
+    title: t('title'),
+    when: t(whenKey, { count: notice.count, date: parts.date, time: parts.time }),
+    how: exit ? t('how', { exit }) : '',
+    lostTitle: t('lostTitle'),
+    lost: CRASH_NOTICE_LOST.map((key) => t(key === 'lostTunnel' && notice.tunnel === 'unknown' ? 'lostTunnelUnknown' : key)),
+    actions: [
+      ...(canOpenLogs ? [{ id: 'logs', label: t('openLogs') }] : []),
+      { id: 'dismiss', label: t('dismiss') },
+    ],
+  };
+}
+
+/** True for a page served from this computer's loopback address: the only one the logs folder opens for. */
+export function isLoopbackHost(hostname) {
+  const host = String(hostname || '').toLowerCase().replace(/^\[|\]$/g, '');
+  return host === 'localhost' || host === '::1' || /^127(?:\.\d{1,3}){3}$/.test(host);
+}