synabun 2.0.0 → 2.0.5

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

@@ -1,13 +1,14 @@
 // ═══════════════════════════════════════════
 // SynaBun Neural Interface — Loading Overlay
-// Health check, server start, server-offline retry, command copy
+// Health check, server start, server-offline retry, command copy,
+// and the restart the user asked for (the same screen, one more reason)
 // ═══════════════════════════════════════════
 
 import { fetchHealth, startHealth } from './api.js';
-import { emit } from './state.js';
+import { emit, on } from './state.js';
 import { t } from './i18n.js';
 import {
-  START_STORAGE, createStartBridge, fetchStartBeacon, isMacPlatform, isWindowsPlatform,
+  START_LIMITS, 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
@@ -25,6 +26,12 @@ let _offlineBridge = null;
 let _offlineTitle = '';
 // The mascot rig in the overlay, mounted the first time the server is offline.
 let _mascot = null;
+// The overlay was put over the running app for a restart. Everything the page
+// held (sockets, terminals, panel sessions) was the old server's, so once the
+// server is back the page loads again instead of carrying on.
+let _restartShown = false;
+// The tab's title from before the restart, for when it is refused.
+let _restartTitle = null;
 
 // What the mascot does for each thing the page knows about a start
 // (startStatusView's `mascot`), as poses of the shared rig.
@@ -83,6 +90,7 @@ export function showLoadingError(title, sub, canStart, serverOffline) {
   }
 
   clearStartStatus();
+  clearRestartLook();
 
   if (serverOffline) {
     const $hint = $('loading-server-cmd-hint');
@@ -131,6 +139,7 @@ function resetLoadingToConnecting() {
   if ($action) $action.style.display = 'none';
   if ($actionStatus) $actionStatus.textContent = '';
   clearStartStatus();
+  clearRestartLook();
   if (_statusDot) _statusDot.classList.remove('error');
 }
 
@@ -222,6 +231,14 @@ function clearStartStatus() {
   if ($trail) $trail.replaceChildren();
 }
 
+/** What a restart changed about the overlay's look, undone. */
+function clearRestartLook() {
+  const $overlay = $('loading-overlay');
+  if ($overlay) $overlay.classList.remove('over-app', 'restart-busy', 'restart-refused');
+  const btn = $('loading-action-btn');
+  if (btn) btn.style.display = '';
+}
+
 /**
  * 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.
@@ -259,24 +276,51 @@ 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) : '');
+  // A restart this page asked for or was told of, while it runs.
+  const restarting = !!snap.restart && (view.busy || view.state === 'online');
 
   poseMascot(view.mascot);
 
+  const $overlay = $('loading-overlay');
+  if ($overlay) {
+    // While a restart runs there is nothing to press and no command to type;
+    // refused, the server is still there and only the way back is offered.
+    $overlay.classList.toggle('restart-busy', restarting);
+    $overlay.classList.toggle('restart-refused', view.state === 'refused');
+  }
+
   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');
+    const title = view.heading ? t(`loading.start.${view.heading}`)
+      : 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;
   }
 
+  // Under the title: whose restart this is, for as long as it is one.
+  const $sub = $('loading-sub');
+  if ($sub && _restartShown) {
+    const sub = view.state === 'refused' ? t('loading.restartSubRefused')
+      : restarting ? (snap.restart.asked ? t('loading.restartSubAsked') : t('loading.restartSubTold'))
+        : t('loading.serverNotRunning');
+    if ($sub.textContent !== sub) $sub.textContent = sub;
+  }
+
   const btn = $('loading-action-btn');
   const $label = $('loading-action-label');
-  if (btn) btn.disabled = view.busy || view.state === 'online';
+  if (btn) {
+    btn.disabled = view.busy || view.state === 'online';
+    // No dead button: when a restart did not bring the server back, Start is
+    // offered only if its launcher is there (the command below always is).
+    const startOffered = view.button === 'start' || view.button === 'retry';
+    btn.style.display = _restartShown && startOffered && !startButtonUsable(stored(START_STORAGE.launcher)) ? 'none' : '';
+  }
   if ($label) {
     $label.textContent = view.button === 'starting' ? t('loading.starting')
-      : view.button === 'retry' ? t('common.retry') : t('loading.startServer');
+      : view.button === 'retry' ? t('common.retry')
+        : view.button === 'back' ? t('loading.restartBack') : t('loading.startServer');
   }
 
   const $status = $('loading-action-status');
@@ -286,7 +330,7 @@ function renderStart(snap) {
   const $elapsed = $('loading-action-elapsed');
   if ($elapsed) {
     $elapsed.textContent = view.elapsed;
-    $elapsed.setAttribute('aria-label', view.elapsed ? `${t('loading.start.elapsedLabel')}: ${view.elapsed}` : '');
+    $elapsed.setAttribute('aria-label', view.elapsed ? `${t(`loading.start.${view.elapsedLabel}`)}: ${view.elapsed}` : '');
   }
 
   const $hint = $('loading-action-hint');
@@ -319,13 +363,28 @@ function renderStart(snap) {
  */
 function watchForServer() {
   if (_offlineBridge) return;
+  openBridge().watch();
+}
+
+/**
+ * Is the server answering, which server is it (`bootId`), and does it say it
+ * is on its way out for a restart. One that predates those two says neither.
+ */
+async function probeServer() {
+  const health = await fetchHealth();
+  return {
+    up: !!health && health.ok !== false,
+    boot: typeof health?.bootId === 'string' ? health.bootId : '',
+    stopping: health?.restarting === true,
+  };
+}
+
+/** The bridge behind the overlay, for either reason it is up: the server is offline, or it is being restarted. */
+function openBridge() {
   mountMascot();
   const beaconAt = startBeaconTarget(window.location);
   const bridge = createStartBridge({
-    probe: async () => {
-      const health = await fetchHealth();
-      return !!health && health.ok !== false;
-    },
+    probe: probeServer,
     launch: () => openStartLink({ document, location: window.location, userAgent: navigator.userAgent }),
     beacon: beaconAt ? () => fetchStartBeacon(beaconAt) : null,
     port: beaconAt ? beaconAt.port : 0,
@@ -336,13 +395,91 @@ function watchForServer() {
     onState(state) {
       if (_offlineBridge !== bridge) return;
       if (state !== 'online') return;
+      // Back from a restart: the page loads again, after the frame that says so.
+      if (_restartShown) {
+        setTimeout(() => window.location.reload(), START_LIMITS.reloadDelayMs);
+        return;
+      }
       resetLoadingToConnecting();
       emit('loading:retried');
       if (_initCallback) _initCallback();
     },
   });
   _offlineBridge = bridge;
-  bridge.watch();
+  return bridge;
+}
+
+// ═══════════════════════════════════════════
+// Restart Server
+// ═══════════════════════════════════════════
+
+/**
+ * The user chose Restart Server. The screen changes here, in the click: the
+ * overlay is up and says a restart was asked for before the request has even
+ * left, and nothing on the way to that first frame waits for the network.
+ * From there it shows what is really known (start-bridge.js `restart()`): the
+ * server's answer, its own word that it is shutting down, the probe that finds
+ * it gone, the supervisor's report of bringing it back. The page loads again
+ * by itself when another server than the one that was asked answers.
+ */
+export function requestServerRestart() {
+  return beginRestart({ request: postRestart });
+}
+
+/** Ask for the restart: { ok, boot } when the server says it will, { ok: false, status, message } when it will not. */
+async function postRestart() {
+  const res = await fetch('/api/server/restart', { method: 'POST', signal: AbortSignal.timeout(10000) });
+  let body = null;
+  try { body = await res.json(); } catch {}
+  if (!res.ok || !body || body.ok === false) {
+    return { ok: false, status: res.status, message: String(body?.error || body?.message || '') };
+  }
+  return { ok: true, boot: typeof body.bootId === 'string' ? body.bootId : '' };
+}
+
+/**
+ * Show the restart: this window asked for it (`request`), or the server told
+ * every window that it is restarting (`announced`, over the sync socket).
+ */
+function beginRestart({ request = null, announced = false, boot = '' } = {}) {
+  // Already on screen (this window asked, and here is the server saying so too).
+  if (_restartShown && _offlineBridge) {
+    _offlineBridge.restart({ announced, boot });
+    return false;
+  }
+  // The overlay is up because the server is offline: there is nothing to restart.
+  if (_offlineBridge) return false;
+  const $overlay = $('loading-overlay');
+  if (!$overlay) return false;
+
+  _restartShown = true;
+  _restartTitle = document.title;
+  document.title = t('loading.start.headingRestarting');
+  _offlineTitle = t('loading.serverOffline');
+  // `over-app`: no fade-in and above whatever is open. The screen is there in the frame of the click.
+  $overlay.classList.add('over-app', 'error', 'server-offline');
+  $overlay.classList.remove('hidden');
+  // Nothing behind the screen keeps the keyboard (a terminal, an editor).
+  try { document.activeElement?.blur?.(); } catch {}
+  if (_statusDot) _statusDot.classList.add('error');
+  const $action = $('loading-action');
+  if ($action) $action.style.display = 'block';
+  const $hint = $('loading-server-cmd-hint');
+  if ($hint) $hint.textContent = startButtonUsable(stored(START_STORAGE.launcher)) ? t('loading.runCommandOr') : t('loading.runCommandSetup');
+  const $retry = $('loading-retry-status');
+  if ($retry) $retry.textContent = '';
+  clearStartStatus();
+  return openBridge().restart({ request, announced, boot });
+}
+
+/** The restart did not happen and the server is still there: give the app back. */
+function dismissRestart() {
+  resetLoadingToConnecting();
+  _restartShown = false;
+  if (_restartTitle !== null) document.title = _restartTitle;
+  _restartTitle = null;
+  const $overlay = $('loading-overlay');
+  if ($overlay) $overlay.classList.add('hidden');
 }
 
 // ═══════════════════════════════════════════
@@ -354,6 +491,8 @@ function watchForServer() {
  * Calls /api/health/start and re-triggers init on success.
  */
 async function handleStartAction() {
+  // A restart the server refused: the button is the way back to the app.
+  if (_offlineBridge && _offlineBridge.state === 'refused') { dismissRestart(); return; }
   // Server offline: nothing to call, the OS starts it.
   if (_offlineBridge) { _offlineBridge.start(); return; }
 
@@ -416,6 +555,8 @@ async function handleRetryConnection() {
     // fetchHealth uses AbortSignal.timeout(3000) internally
     if (health && health.ok !== false) {
       if ($status) $status.textContent = t('loading.connectedLoading');
+      // After a restart the page loads again (see openBridge).
+      if (_restartShown) { window.location.reload(); return; }
       resetLoadingToConnecting();
       emit('loading:retried');
       if (_initCallback) _initCallback();
@@ -463,4 +604,7 @@ export function initLoading({ onInit } = {}) {
   // ── Retry connection ──
   const retryBtn = $('loading-retry-btn');
   if (retryBtn) retryBtn.addEventListener('click', handleRetryConnection);
+
+  // ── The server says it is restarting (ui-sync.js): every window shows it ──
+  on('server:restarting', (msg) => beginRestart({ announced: true, boot: typeof msg?.bootId === 'string' ? msg.bootId : '' }));
 }

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

@@ -9,12 +9,13 @@ import { storage } from './storage.js';
 import { KEYS } from './constants.js';
 import { getMenuItems } from './registry.js';
 import { openHelp } from './ui-help.js';
-import { initPwaInstall, isStandalone, requestPwaInstall } from './pwa-install.js';
+import { armPwaInstallHandoff, initPwaInstall, installGuideUrl, isStandalone, requestPwaInstall } from './pwa-install.js';
 import { registerAction } from './ui-keybinds.js';
 import { isGuest, hasPermission } from './ui-sync.js';
 import { sendToPanel } from './ui-claude-panel.js';
 import { forceCheckToolUpdates, showUpdateToast, TOOL_LABELS } from './ui-tool-updates.js';
 import { forceCheckSynabunUpdate, openSynabunUpdateModal } from './ui-update.js';
+import { requestServerRestart } from './ui-loading.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -369,6 +370,7 @@ function wireAutomationsMenu() {
 // ── Apps Menu (formerly Terminal) ──
 
 function wireTerminalMenu() {
+  let disarmInstallHandoff = () => {};
   const items = {
     'menu-terminal-assistant': () => emit('assistant:open'),
     'menu-terminal-claude':  () => emit('terminal:open', { profile: 'claude-code' }),
@@ -415,37 +417,14 @@ function wireTerminalMenu() {
     'menu-terminal-link':    () => emit('link:toggle'),
     'menu-terminal-toggle':  () => emit('terminal:toggle'),
     'menu-install-app': async () => {
+      disarmInstallHandoff(); // asked for here: this click opens the dialog, no later one does
       const result = await requestPwaInstall();
-      if (result === 'instructions') location.assign('/install-app.html');
-    },
-    'menu-restart-server':   async () => {
-      try {
-        // Cache project path before server goes down
-        try {
-          const h = await fetch('/api/health');
-          const hd = await h.json();
-          if (hd.projectDir) localStorage.setItem('synabun-project-dir', hd.projectDir);
-        } catch {}
-        document.title = 'Restarting...';
-        await fetch('/api/server/restart', { method: 'POST' });
-
-        // Poll /api/health until the server has gone down AND come back up.
-        // The everDown flag prevents premature reload during the brief window
-        // where the old process is still serving requests during shutdown grace.
-        const deadline = Date.now() + 15000;
-        let everDown = false;
-        while (Date.now() < deadline) {
-          await new Promise(r => setTimeout(r, 250));
-          try {
-            const r = await fetch('/api/health', { cache: 'no-store' });
-            if (!r.ok) { everDown = true; continue; }
-            if (everDown) { location.reload(); return; }
-          } catch { everDown = true; }
-        }
-        // Timeout safety net — reload anyway so the user isn't stranded.
-        location.reload();
-      } catch {}
+      if (result === 'instructions') location.assign(installGuideUrl());
     },
+    // The restart screen is drawn in this click, before anything is asked of
+    // the network; from there it follows the restart and loads the page again
+    // when the server is back (ui-loading.js requestServerRestart).
+    'menu-restart-server':   () => { requestServerRestart(); },
     'menu-stop-server':      async () => {
       const previousTitle = document.title;
       try {
@@ -478,6 +457,9 @@ function wireTerminalMenu() {
   } });
   const installItem = $('menu-install-app');
   if (installItem && !isStandalone()) installItem.style.display = '';
+  // Sent on by the launcher's guide page: the browser's install dialog opens from the first click or key press,
+  // for this one page load. The event it uses is spent, so the menu item goes to the guide page after that.
+  disarmInstallHandoff = armPwaInstallHandoff({ leave: event => !!installItem?.contains(event.target) });
 
 }
 

package/neural-interface/public/shared/ui-native-loop-router-state.js

@@ -92,3 +92,14 @@ export class LocalReleaseTracker {
     }
   }
 }
+
+/**
+ * The saved list of dismissed runs (localStorage, `[{ runId, at }]`) without
+ * one run: what the agents dock's Focus leaves when it reopens a closed tab.
+ * Anything unreadable becomes an empty list.
+ */
+export function withoutDismissed(raw, runId) {
+  let stored;
+  try { stored = JSON.parse(raw || '[]'); } catch { stored = []; }
+  return JSON.stringify((Array.isArray(stored) ? stored : []).filter((entry) => entry?.runId && entry.runId !== runId));
+}

package/neural-interface/public/shared/ui-native-loop-router.js

@@ -7,6 +7,7 @@ import {
   isNewerRunDescriptor,
   LocalReleaseTracker,
   resolveRouteClaim,
+  withoutDismissed,
 } from './ui-native-loop-router-state.js';
 
 const DISMISSED_KEY = 'synabun-native-loop-dismissed';
@@ -48,6 +49,15 @@ function mergeDismissed(raw) {
 
 try { mergeDismissed(localStorage.getItem(DISMISSED_KEY)); } catch {}
 
+// A closed tab's run is dismissed: nothing routes it back here by itself (a
+// reconcile, a late event, another window's claim). Only the user asks for it
+// again, with the agents dock's Focus (focusNativeLoopRun with `reopen`).
+function undismiss(runId) {
+  if (!_dismissed.delete(runId)) return false;
+  try { localStorage.setItem(DISMISSED_KEY, withoutDismissed(localStorage.getItem(DISMISSED_KEY), runId)); } catch {}
+  return true;
+}
+
 function persistDismissed() {
   try {
     const existing = JSON.parse(localStorage.getItem(DISMISSED_KEY) || '[]');
@@ -279,10 +289,13 @@ export function getNativeLoopRun(runId) {
  * Bring a dispatched run's sidepanel tab to the front. Attaches with
  * focus:true even when this window already owns the claim (the normal route
  * path only focuses on first attach). Falls back to a fetch when the run has
- * not been broadcast to this window yet.
+ * not been broadcast to this window yet. With `reopen` (the user's own Focus,
+ * in the agents dock) a run whose tab was closed opens again: a live run
+ * attaches as it would have, an ended one with its transcript and end card.
  */
-export async function focusNativeLoopRun(runId) {
+export async function focusNativeLoopRun(runId, { reopen = false } = {}) {
   if (!runId || _suspended) return false;
+  if (reopen) undismiss(runId);
   let run = getNativeLoopRun(runId);
   if (!run) {
     try {

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

@@ -8,6 +8,8 @@ import { initDetachedAgentSessions } from './ui-sidepanel-sessions.js';
 import { state, emit, on } from './state.js';
 import { getVariant } from './registry.js';
 import { KEYS } from './constants.js';
+import { storage } from './storage.js';
+import { t } from './i18n.js';
 import { loadIfaceConfig, saveIfaceConfig, applyIfaceConfig } from './ui-settings.js';
 import { registerAction } from './ui-keybinds.js';
 import { startTutorial } from './ui-tutorial.js';
@@ -324,33 +326,55 @@ export function initNavbar() {
     document.addEventListener('visibilitychange', () => { if (!document.hidden) updateClock(); });
   }
 
-  // ── "Hide all toolbars" toggle (workspace toolbar + whiteboard tool rail) ──
-  // Sidepanel buttons and the session-pill tray (#term-minimized-tray) stay visible.
-  const collapseBtn = $('topright-collapse-btn');
+  // ── The workspace tools toggle (#topright-tools-btn) ──
+  // A plain on/off button for the dock (the workspace switcher and the tools), remembered across reloads. The agent
+  // buttons and the session pills stay where they are either way. A menu the dock had open closes with it.
   const controls = $('topright-controls');
-  if (collapseBtn && controls) {
-    const applyToolbarsHidden = (hidden) => {
-      controls.classList.toggle('collapsed', hidden);
-      // Body-level flag reaches #wb-toolbar, which lives outside #topright-controls.
-      document.body.classList.toggle('toolbars-hidden', hidden);
-      collapseBtn.setAttribute('data-tooltip', hidden ? 'Show all toolbars' : 'Hide all toolbars');
+  const toolsBtn = $('topright-tools-btn');
+  if (controls && toolsBtn) {
+    const showTools = (shown) => {
+      if (!shown) emit('panel:close-all-dropdowns');
+      controls.classList.toggle('tools-hidden', !shown);
+      const label = t(shown ? 'toolbar.hideTools' : 'toolbar.showTools');
+      toolsBtn.dataset.tooltip = label;
+      toolsBtn.setAttribute('aria-label', label);
+      toolsBtn.setAttribute('aria-expanded', String(shown));
     };
-
-    // Restore persisted state
-    applyToolbarsHidden(localStorage.getItem('synabun-toolbar-collapsed') === '1');
-
-    collapseBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      const hidden = !controls.classList.contains('collapsed');
-      applyToolbarsHidden(hidden);
-      localStorage.setItem('synabun-toolbar-collapsed', hidden ? '1' : '0');
-      // Close any open dropdowns when hiding
-      if (hidden) emit('panel:close-all-dropdowns');
+    showTools(storage.getItem(KEYS.TOPRIGHT_TOOLS_HIDDEN) !== 'true');
+    toolsBtn.addEventListener('click', () => {
+      const shown = controls.classList.contains('tools-hidden');
+      showTools(shown);
+      storage.setItem(KEYS.TOPRIGHT_TOOLS_HIDDEN, String(!shown));
     });
+  }
 
-    registerAction('toggle-toolbar', () => collapseBtn.click());
+  // ── Session pills in the row: the whole name is the tooltip ──
+  // Laid out in a row, a pill keeps its width on hover (styles.css): widening, it would push the others onto another
+  // line under the pointer. A name cut short is read from the tooltip instead; a pill that brings a tooltip of its own
+  // (the Assistant's) keeps it.
+  const tray = $('term-minimized-tray');
+  if (controls && tray && controls.contains(tray)) {
+    const nameTips = () => {
+      for (const pill of tray.children) {
+        const name = pill.querySelector('.term-minimized-pill-label')?.textContent.trim() || '';
+        if (pill.hasAttribute('data-tooltip') && pill.dataset.tooltip !== pill.dataset.nameTip) {
+          delete pill.dataset.nameTip;
+        } else if (name) {
+          pill.dataset.tooltip = name;
+          pill.dataset.nameTip = name;
+        } else if (pill.dataset.nameTip != null) {
+          pill.removeAttribute('data-tooltip');
+          delete pill.dataset.nameTip;
+        }
+      }
+    };
+    new MutationObserver(nameTips).observe(tray, { childList: true, subtree: true, characterData: true });
+    nameTips();
   }
 
+  // "Hide all toolbars" is gone: whoever had it on gets every toolbar back, and its key goes with it.
+  try { localStorage.removeItem('synabun-toolbar-collapsed'); } catch { /* storage refused: nothing to clear */ }
+
   // ── Update alert ──
   initUpdate();
   initToolUpdates();