synabun 1.3.0 → 2.0.0

package/neural-interface/public/shared/ui-keybinds.js

@@ -9,6 +9,7 @@ import { fetchKeybinds, saveKeybindsToServer } from './api.js';
 // ── CLI icons for Launch group ──
 
 const CLI_ICONS = {
+  assistant: '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="8" y="5.5" width="11" height="5" rx="2.5" transform="rotate(-12 13.5 8)"/><rect x="4.5" y="12.5" width="11" height="5" rx="2.5" transform="rotate(-12 10 15)"/></svg>',
   claude: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/></svg>',
   codex: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.205 8.658v-2.26c0-.19.072-.333.238-.428l4.543-2.616c.619-.357 1.356-.523 2.117-.523 2.854 0 4.662 2.212 4.662 4.566 0 .167 0 .357-.024.547l-4.71-2.759a.797.797 0 00-.856 0l-5.97 3.473zm10.609 8.8V12.06c0-.333-.143-.57-.429-.737l-5.97-3.473 1.95-1.118a.433.433 0 01.476 0l4.543 2.617c1.309.76 2.189 2.378 2.189 3.948 0 1.808-1.07 3.473-2.76 4.163zM7.802 12.703l-1.95-1.142c-.167-.095-.239-.238-.239-.428V5.899c0-2.545 1.95-4.472 4.591-4.472 1 0 1.927.333 2.712.928L8.23 5.067c-.285.166-.428.404-.428.737v6.898zM12 15.128l-2.795-1.57v-3.33L12 8.658l2.795 1.57v3.33L12 15.128zm1.796 7.23c-1 0-1.927-.332-2.712-.927l4.686-2.712c.285-.166.428-.404.428-.737v-6.898l1.974 1.142c.167.095.238.238.238.428v5.233c0 2.545-1.974 4.472-4.614 4.472zm-5.637-5.303l-4.544-2.617c-1.308-.761-2.188-2.378-2.188-3.948A4.482 4.482 0 014.21 6.327v5.423c0 .333.143.571.428.738l5.947 3.449-1.95 1.118a.432.432 0 01-.476 0zm-.262 3.9c-2.688 0-4.662-2.021-4.662-4.519 0-.19.024-.38.047-.57l4.686 2.71c.286.167.571.167.856 0l5.97-3.448v2.26c0 .19-.07.333-.237.428l-4.543 2.616c-.619.357-1.356.523-2.117.523zm5.899 2.83a5.947 5.947 0 005.827-4.756C22.287 18.339 24 15.84 24 13.296c0-1.665-.713-3.282-1.998-4.448.119-.5.19-.999.19-1.498 0-3.401-2.759-5.947-5.946-5.947-.642 0-1.26.095-1.88.31A5.962 5.962 0 0010.205 0a5.947 5.947 0 00-5.827 4.757C1.713 5.447 0 7.945 0 10.49c0 1.666.713 3.283 1.998 4.448-.119.5-.19 1-.19 1.499 0 3.401 2.759 5.946 5.946 5.946.642 0 1.26-.095 1.88-.309a5.96 5.96 0 004.162 1.713z"/></svg>',
   gemini: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.616 10.835a14.147 14.147 0 01-4.45-3.001 14.111 14.111 0 01-3.678-6.452.503.503 0 00-.975 0 14.134 14.134 0 01-3.679 6.452 14.155 14.155 0 01-4.45 3.001c-.65.28-1.318.505-2.002.678a.502.502 0 000 .975c.684.172 1.35.397 2.002.677a14.147 14.147 0 014.45 3.001 14.112 14.112 0 013.679 6.453.502.502 0 00.975 0c.172-.685.397-1.351.677-2.003a14.145 14.145 0 013.001-4.45 14.113 14.113 0 016.453-3.678.503.503 0 000-.975 13.245 13.245 0 01-2.003-.678z"/></svg>',
@@ -100,8 +101,8 @@ function centralKeyHandler(e) {
   // Skip if in text input
   const tag = document.activeElement?.tagName;
   if (tag === 'INPUT' || tag === 'TEXTAREA') return;
-  // Skip if in xterm.js terminal
-  if (document.activeElement?.closest('.term-viewport')) return;
+  // Skip if in xterm.js terminal or the Assistant (terminal tab or sidepanel)
+  if (document.activeElement?.closest('.term-viewport, .asst-root, .asst-bar')) return;
   // Skip if contenteditable
   if (document.activeElement?.isContentEditable) return;
 

package/neural-interface/public/shared/ui-link.js

@@ -43,14 +43,61 @@ let _history = [];          // local copy of conversation history
 let _minimized = false;
 let _visible = false;
 
-// Drag state
-let _dragState = null;
-// Resize state
-let _resizeState = null;
-
-/**
- * Open the Link Panel. If no link exists, shows setup view.
- */
+// Drag state
+let _dragState = null;
+let _dragRaf = 0;
+let _pendingDragFrame = null;
+// Resize state
+let _resizeState = null;
+let _resizeRaf = 0;
+let _pendingResizeFrame = null;
+
+function _applyDragFrame() {
+  _dragRaf = 0;
+  if (!_panel || !_pendingDragFrame) return;
+  _panel.style.left = _pendingDragFrame.left + 'px';
+  _panel.style.top = _pendingDragFrame.top + 'px';
+}
+
+function _scheduleDragFrame(left, top) {
+  _pendingDragFrame = { left, top };
+  if (!_dragRaf) _dragRaf = requestAnimationFrame(_applyDragFrame);
+}
+
+function _flushDragFrame() {
+  if (_dragRaf) {
+    cancelAnimationFrame(_dragRaf);
+    _dragRaf = 0;
+  }
+  _applyDragFrame();
+}
+
+function _applyResizeFrame() {
+  _resizeRaf = 0;
+  if (!_panel || !_pendingResizeFrame) return;
+  const { width, height, left, top } = _pendingResizeFrame;
+  if (width != null) _panel.style.width = width + 'px';
+  if (height != null) _panel.style.height = height + 'px';
+  if (left != null) _panel.style.left = left + 'px';
+  if (top != null) _panel.style.top = top + 'px';
+}
+
+function _scheduleResizeFrame(frame) {
+  _pendingResizeFrame = frame;
+  if (!_resizeRaf) _resizeRaf = requestAnimationFrame(_applyResizeFrame);
+}
+
+function _flushResizeFrame() {
+  if (_resizeRaf) {
+    cancelAnimationFrame(_resizeRaf);
+    _resizeRaf = 0;
+  }
+  _applyResizeFrame();
+}
+
+/**
+ * Open the Link Panel. If no link exists, shows setup view.
+ */
 export async function openLinkPanel() {
   console.log('[link-panel] openLinkPanel called, _panel=', !!_panel, '_visible=', _visible);
   if (_panel) {
@@ -575,26 +622,28 @@ function _onSyncResumed() {
 function _onDragStart(e) {
   if (e.target.closest('.link-panel-btn')) return;
   e.preventDefault();
-  const rect = _panel.getBoundingClientRect();
-  _panel.style.transform = 'none';
-  _dragState = { startX: e.clientX, startY: e.clientY, startLeft: rect.left, startTop: rect.top };
-  _panel.classList.add('dragging');
+  const rect = _panel.getBoundingClientRect();
+  _panel.style.transform = 'none';
+  _dragState = { startX: e.clientX, startY: e.clientY, startLeft: rect.left, startTop: rect.top };
+  _pendingDragFrame = null;
+  _panel.classList.add('dragging');
   document.addEventListener('mousemove', _onDragMove);
   document.addEventListener('mouseup', _onDragEnd);
 }
 
-function _onDragMove(e) {
-  if (!_dragState) return;
-  const dx = e.clientX - _dragState.startX;
-  const dy = e.clientY - _dragState.startY;
-  _panel.style.left = (_dragState.startLeft + dx) + 'px';
-  _panel.style.top = (_dragState.startTop + dy) + 'px';
-}
-
-function _onDragEnd() {
-  _dragState = null;
-  _panel.classList.remove('dragging');
-  document.removeEventListener('mousemove', _onDragMove);
+function _onDragMove(e) {
+  if (!_dragState) return;
+  const dx = e.clientX - _dragState.startX;
+  const dy = e.clientY - _dragState.startY;
+  _scheduleDragFrame(_dragState.startLeft + dx, _dragState.startTop + dy);
+}
+
+function _onDragEnd() {
+  if (!_dragState) return;
+  _flushDragFrame();
+  _dragState = null;
+  _panel.classList.remove('dragging');
+  document.removeEventListener('mousemove', _onDragMove);
   document.removeEventListener('mouseup', _onDragEnd);
   _savePosition();
 }
@@ -625,36 +674,41 @@ function _onResizeStart(e) {
     left: x < edge, right: x > rect.width - edge,
     top: y < edge, bottom: y > rect.height - edge,
   };
-  if (!dirs.left && !dirs.right && !dirs.top && !dirs.bottom) return;
-  e.preventDefault();
-  _resizeState = { dirs, startX: e.clientX, startY: e.clientY, startRect: rect };
-  document.addEventListener('mousemove', _onResizeMove);
+  if (!dirs.left && !dirs.right && !dirs.top && !dirs.bottom) return;
+  e.preventDefault();
+  _resizeState = { dirs, startX: e.clientX, startY: e.clientY, startRect: rect };
+  _pendingResizeFrame = null;
+  document.addEventListener('mousemove', _onResizeMove);
   document.addEventListener('mouseup', _onResizeEnd);
 }
 
-function _onResizeMove(e) {
-  if (!_resizeState) return;
-  const { dirs, startX, startY, startRect } = _resizeState;
-  const dx = e.clientX - startX, dy = e.clientY - startY;
-  const minW = 320, minH = 300;
-  if (dirs.right) _panel.style.width = Math.max(minW, startRect.width + dx) + 'px';
-  if (dirs.bottom) _panel.style.height = Math.max(minH, startRect.height + dy) + 'px';
-  if (dirs.left) {
-    const newW = Math.max(minW, startRect.width - dx);
-    _panel.style.width = newW + 'px';
-    _panel.style.left = (startRect.left + startRect.width - newW) + 'px';
-  }
-  if (dirs.top) {
-    const newH = Math.max(minH, startRect.height - dy);
-    _panel.style.height = newH + 'px';
-    _panel.style.top = (startRect.top + startRect.height - newH) + 'px';
-  }
-}
-
-function _onResizeEnd() {
-  _resizeState = null;
-  document.removeEventListener('mousemove', _onResizeMove);
-  document.removeEventListener('mouseup', _onResizeEnd);
+function _onResizeMove(e) {
+  if (!_resizeState) return;
+  const { dirs, startX, startY, startRect } = _resizeState;
+  const dx = e.clientX - startX, dy = e.clientY - startY;
+  const minW = 320, minH = 300;
+  const frame = {};
+  if (dirs.right) frame.width = Math.max(minW, startRect.width + dx);
+  if (dirs.bottom) frame.height = Math.max(minH, startRect.height + dy);
+  if (dirs.left) {
+    const newW = Math.max(minW, startRect.width - dx);
+    frame.width = newW;
+    frame.left = startRect.left + startRect.width - newW;
+  }
+  if (dirs.top) {
+    const newH = Math.max(minH, startRect.height - dy);
+    frame.height = newH;
+    frame.top = startRect.top + startRect.height - newH;
+  }
+  _scheduleResizeFrame(frame);
+}
+
+function _onResizeEnd() {
+  if (!_resizeState) return;
+  _flushResizeFrame();
+  _resizeState = null;
+  document.removeEventListener('mousemove', _onResizeMove);
+  document.removeEventListener('mouseup', _onResizeEnd);
   _savePosition();
 }
 

package/neural-interface/public/shared/ui-loading.js

@@ -6,12 +6,40 @@
 import { fetchHealth, startHealth } from './api.js';
 import { emit } from './state.js';
 import { t } from './i18n.js';
+import {
+  START_STORAGE, createStartBridge, fetchStartBeacon, isMacPlatform, isWindowsPlatform,
+  manualStartCommands, openStartLink, startBeaconTarget, startButtonUsable, startStatusView,
+} from './start-bridge.js';
+// Imported with the app, not when it is needed: once the server is down
+// nothing more can be fetched, and that is exactly when the overlay wants it.
+import { createMascot } from './synabun-mascot.js';
 
 const $ = (id) => document.getElementById(id);
 
 // ── Internal refs (resolved once on init) ──
 let _statusDot = null;
 let _initCallback = null;
+// The server-offline state: watches for the server and owns the Start button.
+let _offlineBridge = null;
+// The title the overlay was given for "offline" (a start replaces it while it runs).
+let _offlineTitle = '';
+// The mascot rig in the overlay, mounted the first time the server is offline.
+let _mascot = null;
+
+// What the mascot does for each thing the page knows about a start
+// (startStatusView's `mascot`), as poses of the shared rig.
+const MASCOT_POSE = {
+  asleep: 'sleep',
+  waking: 'wait',
+  working: 'think',
+  ready: 'success',
+  failed: 'error',
+  stalled: 'offline',
+};
+
+function stored(key) {
+  try { return localStorage.getItem(key); } catch { return null; }
+}
 
 // ═══════════════════════════════════════════
 // PUBLIC API
@@ -38,18 +66,31 @@ export function showLoadingError(title, sub, canStart, serverOffline) {
   const $sub = $('loading-sub');
   if ($text) $text.textContent = title;
   if ($sub) $sub.textContent = sub;
+  if (serverOffline) _offlineTitle = title;
 
+  // Offline, the button asks the OS to start the server (synabun://start); it
+  // is left out only when that launcher is known not to be registered.
+  const offlineStart = !!serverOffline && startButtonUsable(stored(START_STORAGE.launcher));
   const $action = $('loading-action');
-  if (canStart) {
+  const $btn = $('loading-action-btn');
+  if (canStart || offlineStart) {
     if ($action) $action.style.display = 'block';
+    if ($btn) $btn.disabled = false;
     const $label = $('loading-action-label');
-    if ($label) $label.textContent = t('common.start');
+    if ($label) $label.textContent = serverOffline ? t('loading.startServer') : t('common.start');
   } else {
     if ($action) $action.style.display = 'none';
   }
 
-  const $status = $('loading-action-status');
-  if ($status) $status.textContent = '';
+  clearStartStatus();
+
+  if (serverOffline) {
+    const $hint = $('loading-server-cmd-hint');
+    if ($hint) $hint.textContent = offlineStart ? t('loading.runCommandOr') : t('loading.runCommandSetup');
+    watchForServer();
+  } else {
+    stopWatchingForServer();
+  }
 }
 
 /**
@@ -78,6 +119,7 @@ function resetLoadingToConnecting() {
   if (!$overlay) return;
 
   $overlay.classList.remove('error', 'server-offline');
+  stopWatchingForServer();
 
   const $text = $('loading-text');
   const $sub = $('loading-sub');
@@ -88,6 +130,7 @@ function resetLoadingToConnecting() {
   if ($sub) $sub.textContent = t('loading.initializingNeural');
   if ($action) $action.style.display = 'none';
   if ($actionStatus) $actionStatus.textContent = '';
+  clearStartStatus();
   if (_statusDot) _statusDot.classList.remove('error');
 }
 
@@ -95,6 +138,24 @@ function resetLoadingToConnecting() {
 // HEALTH CHECK (called during init)
 // ═══════════════════════════════════════════
 
+/**
+ * Keep what a health answer says about this install for the moment the server
+ * is down and cannot be asked: where it lives, how it was installed, and
+ * whether the Start Server launcher is registered.
+ */
+export function rememberHealth(health) {
+  if (!health) return;
+  try {
+    if (health.projectDir) {
+      localStorage.setItem('synabun-project-dir', health.projectDir);
+    }
+    if (health.install) localStorage.setItem(START_STORAGE.install, health.install);
+    if (health.startLauncher) localStorage.setItem(START_STORAGE.launcher, health.startLauncher);
+    if (health.entry) localStorage.setItem(START_STORAGE.entry, health.entry);
+  } catch {}
+  if (health.projectDir) updateCmdText(health.projectDir);
+}
+
 /**
  * Run the health check pre-flight. If the database is unhealthy,
  * show the appropriate loading error. Returns true if healthy (or
@@ -104,11 +165,7 @@ function resetLoadingToConnecting() {
 export async function checkHealth() {
   try {
     const health = await fetchHealth();
-    // Cache projectDir for the server-offline command display
-    if (health.projectDir) {
-      localStorage.setItem('synabun-project-dir', health.projectDir);
-      updateCmdText(health.projectDir);
-    }
+    rememberHealth(health);
     if (!health.ok) {
       const messages = {
         db_missing:         [t('loading.health.databaseUnreachable.title'), health.detail || t('loading.health.databaseUnreachable.sub')],
@@ -130,11 +187,162 @@ export async function checkHealth() {
 }
 
 /**
- * Update the command text element with the full path to npm start.
+ * Update the command text element with the restart command.
  */
 function updateCmdText(projectDir) {
   const cmdEl = $('loading-cmd-text');
-  if (cmdEl) cmdEl.textContent = `cd ${projectDir} && npm start`;
+  if (!cmdEl) return;
+  const commands = manualStartCommands({
+    projectDir,
+    install: stored(START_STORAGE.install),
+    entry: stored(START_STORAGE.entry),
+    windows: isWindowsPlatform(navigator),
+  });
+  // One box: the command for this install (the checkout's when it is not known).
+  cmdEl.textContent = commands[commands.length - 1].command;
+}
+
+// ═══════════════════════════════════════════
+// INTERNAL — Server offline: Start Server + reconnect
+// ═══════════════════════════════════════════
+
+function stopWatchingForServer() {
+  if (_offlineBridge) _offlineBridge.stop();
+  _offlineBridge = null;
+  poseMascot('asleep');
+}
+
+/** The lines a start writes under the button, emptied. */
+function clearStartStatus() {
+  for (const id of ['loading-action-status', 'loading-action-elapsed', 'loading-action-hint', 'loading-action-log']) {
+    const el = $(id);
+    if (el) el.textContent = '';
+  }
+  const $trail = $('loading-action-trail');
+  if ($trail) $trail.replaceChildren();
+}
+
+/**
+ * The overlay's mascot as the shared rig, so a start can be acted out. The
+ * markup's own still drawing stays as the fallback when the rig cannot mount.
+ */
+function mountMascot() {
+  if (_mascot) return;
+  const host = $('loading-mascot');
+  if (!host) return;
+  try {
+    const still = host.querySelector('svg');
+    _mascot = createMascot(host, { width: 160, height: 80, pose: 'sleep', active: false });
+    if (still && still !== _mascot.el) still.style.display = 'none';
+  } catch {
+    _mascot = null;
+  }
+}
+
+/** 'asleep' is the still sleeping face (the overlay's own bob and z carry it); every other state plays its pose. */
+function poseMascot(state) {
+  const host = $('loading-mascot');
+  if (host) host.setAttribute('data-state', state);
+  if (!_mascot) return;
+  try {
+    _mascot.setPose(MASCOT_POSE[state] || 'sleep');
+    _mascot.setActive(state !== 'asleep');
+  } catch {}
+}
+
+/**
+ * Draw one snapshot of the start: the sentence (a live region, written only
+ * when it changes), the page's own clock, and the steps the launcher reported
+ * with the time each one happened. Nothing here is estimated.
+ */
+function renderStart(snap) {
+  const platform = isWindowsPlatform(navigator) ? 'windows' : isMacPlatform(navigator) ? 'mac' : 'linux';
+  const view = startStatusView(snap, { platform });
+  const say = (line) => (line ? t(`loading.start.${line.key}`, line.params) : '');
+
+  poseMascot(view.mascot);
+
+  const $text = $('loading-text');
+  if ($text) {
+    const title = view.mascot === 'waking' || view.mascot === 'working' ? t('loading.start.headingStarting')
+      : view.mascot === 'ready' ? t('loading.start.headingReady')
+        : view.mascot === 'failed' ? t('loading.start.headingFailed')
+          : _offlineTitle || t('loading.serverOffline');
+    if ($text.textContent !== title) $text.textContent = title;
+  }
+
+  const btn = $('loading-action-btn');
+  const $label = $('loading-action-label');
+  if (btn) btn.disabled = view.busy || view.state === 'online';
+  if ($label) {
+    $label.textContent = view.button === 'starting' ? t('loading.starting')
+      : view.button === 'retry' ? t('common.retry') : t('loading.startServer');
+  }
+
+  const $status = $('loading-action-status');
+  const line = say(view.headline);
+  if ($status && $status.textContent !== line) $status.textContent = line;
+
+  const $elapsed = $('loading-action-elapsed');
+  if ($elapsed) {
+    $elapsed.textContent = view.elapsed;
+    $elapsed.setAttribute('aria-label', view.elapsed ? `${t('loading.start.elapsedLabel')}: ${view.elapsed}` : '');
+  }
+
+  const $hint = $('loading-action-hint');
+  if ($hint) $hint.textContent = say(view.hint);
+
+  const $trail = $('loading-action-trail');
+  if ($trail) {
+    $trail.replaceChildren(...view.trail.map((row) => {
+      const item = document.createElement('li');
+      const what = document.createElement('span');
+      what.textContent = t(`loading.start.${row.key}`);
+      const when = document.createElement('span');
+      when.className = 'at';
+      when.textContent = row.time;
+      item.append(what, when);
+      return item;
+    }));
+  }
+
+  const $log = $('loading-action-log');
+  if ($log) $log.textContent = view.error?.log ? t('loading.start.failedLog', { path: view.error.log }) : '';
+}
+
+/**
+ * While the overlay says the server is offline: keep asking for it, and let
+ * the Start button hand the OS a synabun://start link. Reconnects by itself
+ * the moment the server answers, however it was started. While a start is
+ * under way it shows what the launcher itself reports (its beacon), never a
+ * guess: see start-bridge.js.
+ */
+function watchForServer() {
+  if (_offlineBridge) return;
+  mountMascot();
+  const beaconAt = startBeaconTarget(window.location);
+  const bridge = createStartBridge({
+    probe: async () => {
+      const health = await fetchHealth();
+      return !!health && health.ok !== false;
+    },
+    launch: () => openStartLink({ document, location: window.location, userAgent: navigator.userAgent }),
+    beacon: beaconAt ? () => fetchStartBeacon(beaconAt) : null,
+    port: beaconAt ? beaconAt.port : 0,
+    onUpdate(snap) {
+      if (_offlineBridge !== bridge) return;
+      renderStart(snap);
+    },
+    onState(state) {
+      if (_offlineBridge !== bridge) return;
+      if (state !== 'online') return;
+      resetLoadingToConnecting();
+      emit('loading:retried');
+      if (_initCallback) _initCallback();
+    },
+  });
+  _offlineBridge = bridge;
+  bridge.watch();
 }
 
 // ═══════════════════════════════════════════
@@ -146,6 +354,9 @@ function updateCmdText(projectDir) {
  * Calls /api/health/start and re-triggers init on success.
  */
 async function handleStartAction() {
+  // Server offline: nothing to call, the OS starts it.
+  if (_offlineBridge) { _offlineBridge.start(); return; }
+
   const btn = $('loading-action-btn');
   const $status = $('loading-action-status');
   const $label = $('loading-action-label');

package/neural-interface/public/shared/ui-memory-maintenance.js

@@ -0,0 +1,111 @@
+async function api(path,body) {
+  const response=await fetch(path,body ? {method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)} : {});
+  const data=await response.json();
+  if(!response.ok)throw new Error(data.error || DEFAULT_STRINGS.requestFailed);
+  return data;
+}
+function element(tag,text,className) {
+  const el=document.createElement(tag); if(text)el.textContent=text; if(className)el.className=className; return el;
+}
+function button(label,action,tag,help) {
+  const el=element('button',label,'conn-action-btn'); el.type='button';
+  if(tag)el.dataset.stgId=tag;
+  if(help)el.title=help;
+  el.addEventListener('click',async()=>{el.disabled=true;try{await action();}finally{el.disabled=false;}});
+  return el;
+}
+const fill=(text,params)=>String(text).replace(/\{(\w+)\}/g,(m,name)=>params&&params[name]!=null?params[name]:m);
+
+// English defaults. Settings passes translated copy as `strings`, which is merged over these
+// (the browser test mounts this module alone and relies on the defaults).
+// `tag` ids are the Settings inventory ids of the controls this module renders.
+const DEFAULT_STRINGS = {
+  requestFailed:'Memory request failed',
+  loading:'Loading memory status…',
+  running:'Maintenance running',
+  paused:'Maintenance paused',
+  noWork:'No pending work',
+  pause:'Pause maintenance',
+  resume:'Resume maintenance',
+  refresh:'Refresh',
+  retry:'Retry failed jobs',
+  undo:'Undo relationship',
+  confirm:'Confirm conflict',
+  noReview:'No relationships awaiting review.',
+  jobCount:'{count} {status}',
+  help:{pause:'',resume:'',refresh:'',retry:'',undo:'',confirm:'',details:''},
+  jobStatus:{},
+  relationKind:{},
+};
+
+export function mountMemoryMaintenance(root,{strings={},onStatus}={}) {
+  if(!root || root.dataset.mounted)return;
+  root.dataset.mounted='true';
+  const text={...DEFAULT_STRINGS,...strings,help:{...DEFAULT_STRINGS.help,...strings.help},jobStatus:{...DEFAULT_STRINGS.jobStatus,...strings.jobStatus},relationKind:{...DEFAULT_STRINGS.relationKind,...strings.relationKind}};
+  const status=element('p',text.loading,'stg-help');
+  status.setAttribute('role','status');
+  const actions=element('div');actions.style.cssText='display:flex;gap:8px;flex-wrap:wrap;margin:8px 0';
+  const review=element('div');
+  root.append(status,actions,review);
+  async function load(operation) {
+    try {
+      const data=await api('/api/memory-maintenance',operation);
+      const jobs=data.jobs.map(j=>fill(text.jobCount,{count:j.count,status:text.jobStatus[j.status]||j.status})).join(' · ') || text.noWork;
+      status.textContent=`${data.paused ? text.paused : text.running} · ${jobs}`;
+      if(onStatus)try{onStatus(data);}catch{}
+      actions.replaceChildren(
+        data.paused ? button(text.resume,()=>load({operation:'resume'}),'MEM012',text.help.resume) : button(text.pause,()=>load({operation:'pause'}),'MEM012',text.help.pause),
+        button(text.refresh,()=>load(),'MEM013',text.help.refresh),button(text.retry,()=>load({operation:'retry'}),'MEM014',text.help.retry),
+      );
+      review.replaceChildren();
+      for(const relation of data.relationships || []) {
+        const row=element('details');row.style.margin='8px 0';
+        const summary=element('summary',`${text.relationKind[relation.kind]||relation.kind.replaceAll('_',' ')} · ${relation.from_id.slice(0,8)} → ${relation.to_id.slice(0,8)}`);
+        summary.dataset.stgId='MEM001';
+        if(text.help.details)summary.title=text.help.details;
+        row.append(summary);
+        const evidence=element('div');
+        let loaded=false;
+        row.addEventListener('toggle',async()=>{
+          if(!row.open || loaded)return; loaded=true;
+          try {
+            for(const id of [relation.from_id,relation.to_id]) {
+              const m=await api('/api/memory/'+encodeURIComponent(id));
+              const pre=element('pre',`[${id}]\n${m.payload.content}`);pre.style.cssText='white-space:pre-wrap;overflow-wrap:anywhere;max-height:240px;overflow:auto';evidence.append(pre);
+            }
+          }catch(error){evidence.textContent=error.message;loaded=false;}
+        });
+        row.append(evidence,button(text.undo,()=>load({operation:'undo-relation',id:relation.id}),'MEM015',text.help.undo));
+        if(relation.kind==='possible_conflict')row.append(button(text.confirm,()=>load({operation:'confirm-relation',id:relation.id,from_id:relation.from_id,to_id:relation.to_id,kind:'conflicts_with'}),'MEM016',text.help.confirm));
+        review.append(row);
+      }
+      if(!data.relationships?.length)review.append(element('p',text.noReview,'stg-help'));
+    }catch(error){status.textContent=error.message;}
+  }
+  load();
+}
+
+export function mountMemoryHistory(root,id,onRestore=()=>{}) {
+  if(!root)return;
+  const details=element('details'); details.style.marginTop='12px';
+  details.append(element('summary','Revision history'));
+  const body=element('div');details.append(body);root.append(details);
+  async function load() {
+    body.textContent='Loading revisions…';
+    try {
+      const data=await api(`/api/memory/${encodeURIComponent(id)}/history`);
+      body.replaceChildren();
+      for(const revision of data.revisions) {
+        const entry=element('details');entry.append(element('summary',`Revision ${revision.revision} · ${revision.recorded_at}`));
+        const pre=element('pre',revision.payload.content);pre.style.cssText='white-space:pre-wrap;overflow-wrap:anywhere;max-height:300px;overflow:auto';
+        entry.append(pre);
+        if(revision.revision!==data.revision)entry.append(button('Restore this revision',async()=>{
+          try {await api(`/api/memory/${encodeURIComponent(id)}/undo`,{revision:revision.revision,expected_revision:data.revision});await onRestore();await load();}
+          catch(error){body.prepend(element('p',error.message));}
+        }));
+        body.append(entry);
+      }
+    }catch(error){body.textContent=error.message;}
+  }
+  details.addEventListener('toggle',()=>{if(details.open)load();});
+}