synabun 2.0.0 → 2.0.7

package/neural-interface/public/shared/ocp-v2/ocp-v2-styles.js

@@ -1097,6 +1097,46 @@ const CSS = `
   cursor: default;
 }
 
+/* A dispatched worker's end (ui-worker-end.js): the post-plan card's frame. Complete keeps its
+   green; the other ends take the panel's own amber, error red or neutral. The title says the state. */
+.ocpv2-worker-end .ocpv2-post-plan-body { overflow-wrap: anywhere; }
+.ocpv2-worker-end .ocpv2-post-plan-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
+.ocpv2-worker-end[data-tone="warn"] {
+  border-color: rgba(232,180,80,0.32);
+  background: rgba(232,180,80,0.04);
+  box-shadow: 0 12px 32px rgba(0,0,0,0.22), 0 0 0 1px rgba(232,180,80,0.08) inset;
+}
+.ocpv2-worker-end[data-tone="warn"] .ocpv2-post-plan-header {
+  color: rgba(255,200,120,0.95);
+  background: rgba(232,180,80,0.14);
+  border-color: rgba(232,180,80,0.28);
+}
+.ocpv2-worker-end[data-tone="err"] {
+  border-color: rgba(220,100,100,0.32);
+  background: rgba(220,100,100,0.05);
+  box-shadow: 0 12px 32px rgba(0,0,0,0.22), 0 0 0 1px rgba(220,100,100,0.08) inset;
+}
+.ocpv2-worker-end[data-tone="err"] .ocpv2-post-plan-header {
+  color: rgba(255,166,166,0.92);
+  background: rgba(220,100,100,0.12);
+  border-color: rgba(220,100,100,0.28);
+}
+.ocpv2-worker-end[data-tone="off"] {
+  border-color: rgba(255,255,255,0.12);
+  background: rgba(255,255,255,0.03);
+  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
+}
+.ocpv2-worker-end[data-tone="off"] .ocpv2-post-plan-header {
+  color: rgba(255,255,255,0.7);
+  background: rgba(255,255,255,0.06);
+  border-color: rgba(255,255,255,0.12);
+}
+.ocpv2-worker-end:not([data-tone="ok"]) .ocpv2-post-plan-saved { color: rgba(255,255,255,0.45); }
+.ocpv2-worker-end:not([data-tone="ok"]) .ocpv2-post-plan-btn.primary {
+  background: rgba(255,255,255,0.085);
+  border-color: rgba(255,255,255,0.2);
+}
+
 /* Stub shown in place of raw question-tool JSON while the AskUser card handles it */
 .ocpv2-part-question-stub {
   font-size: 10.5px;
@@ -3527,6 +3567,124 @@ const PARITY_CSS = `
 .ocpv2-help-name { flex-shrink: 0; color: rgba(232,224,220,0.95); font-family: 'JetBrains Mono', ui-monospace, monospace; }
 .ocpv2-help-text { flex: 1; min-width: 0; color: rgba(255,255,255,0.62); overflow-wrap: anywhere; }
 .ocpv2-help-row .ocpv2-session-item-meta { flex-shrink: 0; margin-left: 0; }
+
+/* ── CLI banner (ui-cli-banner.js): OpenCode not installed / installing / failed to start ── */
+/* Mono like the rest of the panel; the panel's own amber, error red and green. */
+.ocp-cli-banner {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  margin: 6px 8px 0;
+  padding: 10px 12px;
+  border: 1px solid rgba(232,180,80,0.32);
+  border-radius: 8px;
+  background: rgba(232,180,80,0.04);
+  color: rgba(255,255,255,0.86);
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+  font-size: 11px;
+  line-height: 1.45;
+  position: relative;
+  z-index: 5;
+}
+.ocp-cli-banner [hidden] { display: none !important; }
+.ocp-cli-banner--broken, .ocp-cli-banner--failed { border-color: rgba(220,100,100,0.32); background: rgba(220,100,100,0.05); }
+.ocp-cli-banner--done { border-color: rgba(140,210,170,0.32); background: rgba(140,210,170,0.05); }
+.ocp-cli-banner-icon {
+  width: 22px; height: 22px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 50%;
+  background: rgba(232,180,80,0.14);
+  border: 1px solid rgba(232,180,80,0.28);
+  color: rgba(255,200,120,0.95);
+  font-weight: 700;
+}
+.ocp-cli-banner--broken .ocp-cli-banner-icon, .ocp-cli-banner--failed .ocp-cli-banner-icon { background: rgba(220,100,100,0.12); border-color: rgba(220,100,100,0.3); color: rgba(255,166,166,0.92); }
+.ocp-cli-banner--done .ocp-cli-banner-icon { background: rgba(140,210,170,0.14); border-color: rgba(140,210,170,0.28); color: rgba(180,230,200,0.92); }
+.ocp-cli-banner--installing .ocp-cli-banner-icon { animation: ocpv2-abort-sweep 1.2s ease-in-out infinite; }
+.ocp-cli-banner--nudge { animation: ocp-cli-nudge 0.5s ease; }
+@keyframes ocp-cli-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
+.ocp-cli-banner-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.ocp-cli-banner-title { font-size: 11.5px; font-weight: 600; color: rgba(255,200,120,0.95); }
+.ocp-cli-banner--broken .ocp-cli-banner-title, .ocp-cli-banner--failed .ocp-cli-banner-title { color: rgba(255,166,166,0.92); }
+.ocp-cli-banner--done .ocp-cli-banner-title { color: rgba(180,230,200,0.92); }
+.ocp-cli-banner-body, .ocp-cli-banner-note, .ocp-cli-banner-step { color: rgba(255,255,255,0.62); overflow-wrap: anywhere; }
+.ocp-cli-banner-command { display: flex; align-items: flex-start; gap: 6px; }
+.ocp-cli-banner-command code, .ocp-cli-banner-error code {
+  flex: 1;
+  min-width: 0;
+  padding: 3px 6px;
+  background: rgba(0,0,0,0.3);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 4px;
+  font: inherit;
+  font-size: 10.5px;
+  color: rgba(232,224,220,0.95);
+  white-space: pre-wrap;
+  word-break: break-all;
+  user-select: text;
+}
+.ocp-cli-banner-error code { display: block; max-height: 96px; overflow: auto; color: rgba(255,166,166,0.92); }
+.ocp-cli-banner-copy {
+  flex-shrink: 0;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 5px;
+  background: transparent;
+  color: rgba(255,255,255,0.62);
+  font: inherit;
+  font-size: 10.5px;
+  cursor: pointer;
+}
+.ocp-cli-banner-copy:hover { color: rgba(252,246,240,0.98); border-color: rgba(232,224,220,0.3); }
+.ocp-cli-banner-progress { display: flex; flex-direction: column; gap: 4px; }
+.ocp-cli-banner-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
+.ocp-cli-banner-bar > span { display: block; height: 100%; width: 0; background: rgba(232,224,220,0.7); transition: width 0.2s ease; }
+.ocp-cli-banner-log {
+  margin: 0;
+  max-height: 84px;
+  overflow: auto;
+  padding: 4px 6px;
+  background: rgba(0,0,0,0.25);
+  border-radius: 4px;
+  font: inherit;
+  font-size: 10px;
+  line-height: 1.45;
+  color: rgba(255,255,255,0.5);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.ocp-cli-banner-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
+.ocp-cli-banner-install, .ocp-cli-banner-link, .ocp-cli-banner-path, .ocp-cli-banner-recheck, .ocp-cli-banner-dismiss {
+  display: inline-flex; align-items: center; gap: 4px;
+  height: 22px;
+  padding: 0 10px;
+  font: inherit;
+  font-size: 11.5px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 5px;
+  border: 1px solid rgba(255,255,255,0.14);
+  background: rgba(255,255,255,0.04);
+  color: rgba(255,255,255,0.86);
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+}
+.ocp-cli-banner-install { background: rgba(232,224,220,0.15); border-color: rgba(232,224,220,0.3); color: rgba(245,239,232,0.95); }
+.ocp-cli-banner-install:hover:not(:disabled) { background: rgba(232,224,220,0.25); border-color: rgba(232,224,220,0.45); }
+.ocp-cli-banner-link:hover, .ocp-cli-banner-path:hover:not(:disabled), .ocp-cli-banner-recheck:hover:not(:disabled), .ocp-cli-banner-dismiss:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.26); }
+.ocp-cli-banner-install:disabled, .ocp-cli-banner-path:disabled, .ocp-cli-banner-recheck:disabled { opacity: 0.5; cursor: default; }
+.ocp-cli-banner button:focus-visible, .ocp-cli-banner a:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  .ocp-cli-banner--installing .ocp-cli-banner-icon, .ocp-cli-banner--nudge { animation: none; }
+  .ocp-cli-banner--nudge { box-shadow: 0 0 0 1px rgba(232,180,80,0.6); }
+  .ocp-cli-banner-bar > span { transition: none; }
+}
+.ocpv2-panel.ocp-cli-blocked .ocpv2-compose-btn:not(.ocpv2-compose-abort) { opacity: 0.4; cursor: not-allowed; }
+.ocpv2-panel.ocp-cli-blocked .ocpv2-compose-input { opacity: 0.7; }
 `;
 
 export function injectStyles() {

package/neural-interface/public/shared/ocp-v2/ocp-v2-ws.js

@@ -486,8 +486,9 @@ export const api = {
   sessionDelete:  (sessionId)     => request({ type: 'session:delete', sessionId }),
   sessionMessages:(sessionId)     => request({ type: 'session:messages', sessionId }),
   sessionContext: ({ sessionId, cwd } = {}) => request({ type: 'session:context', sessionId, cwd }),
-  send: ({ sessionId, parts, model, agent, mode, variant, cwd, mcpProfile, noAbortPrev }) =>
-    request({ type: 'message:send', sessionId, parts, model, agent, mode, variant, cwd, mcpProfile, noAbortPrev: !!noAbortPrev }, 30 * 60 * 1000),
+  // `human` / `greetingId`: lib/greeting/ (a server that does not know them ignores them).
+  send: ({ sessionId, parts, model, agent, mode, variant, cwd, mcpProfile, noAbortPrev, human, greetingId }) =>
+    request({ type: 'message:send', sessionId, parts, model, agent, mode, variant, cwd, mcpProfile, noAbortPrev: !!noAbortPrev, ...(human ? { human: true } : {}), ...(greetingId ? { greetingId } : {}) }, 30 * 60 * 1000),
   abort: (sessionId) => request({ type: 'message:abort', sessionId }),
   compact: ({ sessionId, cwd, mcpProfile, model } = {}) => request({ type: 'session:compact', sessionId, cwd, mcpProfile, model }, 5 * 60 * 1000),
   permissionReply: ({ sessionId, permissionId, response, cwd, message }) =>

package/neural-interface/public/shared/pwa-install-page.js

@@ -1,6 +1,20 @@
-import { initPwaInstall, isStandalone, requestPwaInstall } from './pwa-install.js';
+import { canPromptPwaInstall, initPwaInstall, installGuideMode, installGuideRequested, isStandalone,
+  leavePwaInstallHandoff, requestPwaInstall } from './pwa-install.js';
+import { isDesktopApp } from './desktop-bridge.js';
 
-if (isStandalone()) location.replace('/');
+// The wizard (first run) and the main UI (setup done) open the browser's dialog from a press the user makes
+// anyway, so a browser that has one shows this page only when Apps > Install as App asked for it. true, false,
+// or null for a read that did not answer: only an answer sends the user on, null keeps the guide.
+async function setupComplete() {
+  try {
+    const res = await fetch('/api/setup/onboarding', { signal: AbortSignal.timeout(3000) });
+    const { setupComplete: done } = res.ok ? await res.json() : {};
+    return typeof done === 'boolean' ? done : null;
+  } catch { return null; }
+}
+
+// Already the installed app, or the SynaBun desktop app's own window: nothing to install here.
+if (isStandalone() || isDesktopApp()) location.replace('/');
 else {
   const pt = navigator.language.toLowerCase().startsWith('pt');
   const copy = pt ? {
@@ -8,6 +22,7 @@ else {
     'install-intro': 'O servidor está rodando em segundo plano. Confirme a instalação uma vez no navegador para abrir o SynaBun em sua própria janela.',
     'install-chromium': 'Chrome ou Edge: escolha Instalar como app abaixo ou a opção Instalar app no menu do navegador.',
     'install-safari': 'Safari no macOS: escolha Arquivo → Adicionar ao Dock. Mantenha o nome SynaBun.',
+    'install-other': 'O SynaBun é instalado como app pelo Chrome, pelo Edge ou pelo Safari no macOS. Abra-o em um deles para instalar.',
     'install-later': 'Após instalar, abra novamente o iniciador nativo do SynaBun. Ele inicia ou reutiliza o servidor e abre o PWA instalado. Fechar a janela mantém o servidor ativo. Use Apps → Stop Server para pará-lo.',
     'install-button': 'Instalar como app', 'install-continue': 'Continuar para o SynaBun',
   } : {};
@@ -17,6 +32,7 @@ else {
   const instructions = pt
     ? 'Use a opção Instalar app do Chrome/Edge ou Arquivo → Adicionar ao Dock no Safari. A instalação exige sua confirmação no navegador.'
     : 'Use Chrome/Edge’s Install app menu or Safari’s File → Add to Dock. Installation requires your browser confirmation.';
+  // Before the read below: the event can arrive while it is on its way.
   initPwaInstall({ changed: value => {
     status.textContent = value === 'installed'
       ? (pt ? 'Instalado. Abra novamente o iniciador do SynaBun para usar o PWA.' : 'Installed. Reopen the SynaBun launcher to use the PWA.')
@@ -31,4 +47,18 @@ else {
     } catch { status.textContent = instructions; }
   });
   if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(() => {});
+
+  // One plain action or one plain instruction, never both: the button only where the browser has a dialog to open.
+  const canPrompt = canPromptPwaInstall();
+  const show = done => {
+    let mode = installGuideMode({ canPrompt, setupComplete: done, requested: installGuideRequested(location.search), vendor: navigator.vendor });
+    // The main UI opens the dialog only for the mark this leaves: where it cannot be left, the button stays.
+    if (mode === 'handoff' && !leavePwaInstallHandoff()) mode = 'button';
+    if (mode === 'wizard' || mode === 'handoff') return location.replace('/');
+    document.getElementById(mode === 'button' ? 'install-chromium' : `install-${mode}`).hidden = false;
+    document.getElementById('install-button').hidden = mode !== 'button';
+    document.querySelector('main').hidden = false;
+  };
+  if (canPrompt) setupComplete().then(show);
+  else show(null);
 }

package/neural-interface/public/shared/pwa-install.css

@@ -2,9 +2,9 @@
 #pwa-install { display: grid; place-items: center; overflow: auto; padding: 24px; color: var(--t-bright); }
 #pwa-install main { width: min(560px, 100%); padding: 24px; background: var(--s-panel); border: 1px solid var(--b-light); border-radius: var(--r-card); }
 #pwa-install h1 { font-family: var(--ff-heading); font-size: calc(28px * var(--font-scale)); font-weight: 600; line-height: 1.2; margin: 16px 0; }
-#pwa-install p, #pwa-install li { font-size: var(--fs-sm); line-height: 1.5; }
-#pwa-install ol { padding-left: 24px; margin: 16px 0; }
-#pwa-install li + li { margin-top: 8px; }
+#pwa-install [hidden] { display: none !important; }
+#pwa-install p { font-size: var(--fs-sm); line-height: 1.5; }
+#pwa-install p + p { margin-top: 16px; }
 #pwa-install .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
 #pwa-install button { background: var(--s-active); border: 1px solid var(--b-visible); border-radius: var(--r-small); color: var(--t-bright); font: inherit; padding: 8px 12px; cursor: pointer; }
 #pwa-install button:hover { background: var(--s-hover); }

package/neural-interface/public/shared/pwa-install.js

@@ -1,9 +1,14 @@
-/** Shared by the existing Install as App menu and the native launcher's first-run page. */
+/** Shared by the Install as App menu, the first-run wizard, the native launcher's guide page and the main UI it hands over to. */
 export function isStandalone(win = window, nav = navigator) {
   return win.matchMedia('(display-mode: standalone)').matches
     || win.matchMedia('(display-mode: window-controls-overlay)').matches || !!nav.standalone;
 }
 
+/** Chromium only: Safari and Firefox have no install event, so there is nothing a page can open there. */
+export function canPromptPwaInstall(win = window) {
+  return 'onbeforeinstallprompt' in win;
+}
+
 export function initPwaInstall({ win = window, nav = navigator, changed = () => {} } = {}) {
   win.addEventListener('beforeinstallprompt', event => {
     event.preventDefault();
@@ -26,3 +31,97 @@ export async function requestPwaInstall(win = window) {
   win._pwaInstallPrompt = null; // Browser install events are single-use, including dismissal.
   return outcome;
 }
+
+const OFFERED_KEY = 'synabun-pwa-install-offered';
+
+function wasOffered(win) {
+  if (win._pwaInstallOffered) return true;
+  try { return win.sessionStorage.getItem(OFFERED_KEY) === '1'; } catch { return false; }
+}
+
+/**
+ * The first-run wizard asks nothing itself: it opens the browser's own install dialog once, from a click the
+ * user makes anyway. Call this synchronously in that click, before any await: prompt() needs the click's user
+ * activation and uses it up, so never call it from a click that opens a popup, the clipboard or a file picker.
+ * Nobody waits for the answer. Without an event it does nothing and the next click tries again; once the dialog
+ * has opened, this tab never opens it again (sessionStorage: a reload of the wizard does not ask twice).
+ */
+export function offerPwaInstallOnce({ win = window, nav = navigator } = {}) {
+  const prompt = win._pwaInstallPrompt;
+  if (!prompt || isStandalone(win, nav) || wasOffered(win)) return false;
+  if (nav.userActivation && !nav.userActivation.isActive) return false; // A scripted click: keep the event for a real one.
+  win._pwaInstallPrompt = null; // Single-use, whatever the user answers.
+  try { Promise.resolve(prompt.prompt()).catch(() => {}); } catch { return false; }
+  win._pwaInstallOffered = true;
+  try { win.sessionStorage.setItem(OFFERED_KEY, '1'); } catch {}
+  return true;
+}
+
+const HANDOFF_KEY = 'synabun-pwa-install-handoff';
+
+/**
+ * The guide page's half of the handoff: it leaves a mark for the main UI and goes there instead of asking.
+ * sessionStorage, so the mark is this tab's alone. False when it could not be left: the guide stays then.
+ */
+export function leavePwaInstallHandoff(win = window) {
+  try { win.sessionStorage.setItem(HANDOFF_KEY, '1'); return true; } catch { return false; }
+}
+
+// A press that follows a link, or belongs to a shortcut (reload, new tab, DevTools), would spend the one dialog
+// on a page that is leaving or busy. The next press gets it.
+function keepsItsPress(event) {
+  return !!(event.ctrlKey || event.metaKey || event.altKey) || /^F\d+$/.test(event.key || '')
+    || !!event.target?.closest?.('a[href]');
+}
+
+/**
+ * The main UI's half. It takes the mark, so only the one page load the guide handed over is armed: not a
+ * reload, and never a normal tab. Armed, the first click or key press anywhere opens the browser's dialog
+ * through offerPwaInstallOnce(), in the capture phase because prompt() must run inside the press and the UI
+ * stops many of its events. Without an event yet the next press tries. `leave` names presses to keep out of
+ * it (the menu item that opens the dialog itself). Returns the function that disarms it.
+ */
+export function armPwaInstallHandoff({ win = window, nav = navigator, leave = () => false } = {}) {
+  let marked = false;
+  try {
+    marked = win.sessionStorage.getItem(HANDOFF_KEY) === '1';
+    win.sessionStorage.removeItem(HANDOFF_KEY);
+  } catch {}
+  if (!marked || isStandalone(win, nav) || wasOffered(win)) return () => {};
+  const disarm = () => ['click', 'keydown'].forEach(type => win.removeEventListener(type, press, true));
+  const press = event => {
+    if (keepsItsPress(event) || leave(event)) return;
+    if (offerPwaInstallOnce({ win, nav })) disarm();
+  };
+  ['click', 'keydown'].forEach(type => win.addEventListener(type, press, true));
+  return disarm;
+}
+
+const GUIDE_URL = '/install-app.html';
+
+/**
+ * Where Apps > Install as App goes when the browser has no dialog ready. The mark says the user asked for the
+ * page, so it shows instead of handing over. Safari can add the page it is on to the Dock and the launcher
+ * matches that URL without a query, so only a browser with the install event gets the mark.
+ */
+export function installGuideUrl(win = window) {
+  return canPromptPwaInstall(win) ? `${GUIDE_URL}?from=menu` : GUIDE_URL;
+}
+
+export function installGuideRequested(search = '') {
+  return new URLSearchParams(search).get('from') === 'menu';
+}
+
+/**
+ * What the launcher's guide page is, for this browser and this install:
+ * 'app' (already the installed app: leave), 'wizard' (first run where the wizard opens the dialog: leave),
+ * 'handoff' (setup done and nobody asked for the page: leave, the main UI opens the dialog),
+ * 'button' (one button that opens the browser's dialog: the page was asked for, or the setup read did not
+ * answer), 'safari' or 'other' (plain instructions).
+ */
+export function installGuideMode({ standalone = false, canPrompt = false, setupComplete = null, requested = false, vendor = '' } = {}) {
+  if (standalone) return 'app';
+  if (!canPrompt) return /apple/i.test(vendor) ? 'safari' : 'other';
+  if (setupComplete === false) return 'wizard';
+  return setupComplete === true && !requested ? 'handoff' : 'button';
+}

package/neural-interface/public/shared/settings/settings-about-pane.js

@@ -0,0 +1,271 @@
+// ═══════════════════════════════════════════
+// SETTINGS — About (the pane)
+// ═══════════════════════════════════════════
+//
+// The last page of Settings: who SynaBun is and what it runs on. A header that is always shown (the app's icon,
+// name, version and channel, how it was installed, the package's one-line description, "Check for updates" and
+// "Copy info"), then three sections: Links, System, Dependencies, and the license line at the foot.
+//
+// It asks GET /api/system/about once, when the page is first shown. A server from before that route (404, or not
+// JSON) gets the header and the version from /api/health and /api/system/version, and a note that the rest comes
+// with a restart. settings-about.js decides what is said; this draws it.
+//
+// "Check for updates" is the Apps menu's own item (#menu-check-cli-updates, ui-menubar.js): the same check, the
+// same toast. Links open in a new window, which the desktop app hands to the default browser.
+
+import * as kit from './settings-kit.js';
+import { revealSettingsTarget } from './settings-shell.js';
+import { desktopBridge } from '../desktop-bridge.js';
+import {
+  ABOUT_URL, ABOUT_FILTER_MIN, buildLabel, diagnosticsText, filterDependencies, installLine, isExternalUrl, linkHost, linkLabel,
+  npmUrl, osLine, packageLabel, readAboutAnswer, readClientRuntime, versionLine,
+} from './settings-about.js';
+
+const UPDATE_MENU_ITEM = 'menu-check-cli-updates';
+const EXTERNAL = 'target="_blank" rel="noopener noreferrer"';
+const ARROW = '<svg class="stg-about-arrow" viewBox="0 0 16 16" aria-hidden="true"><path d="M5.5 4.5h6v6M11.5 4.5l-7 7"/></svg>';
+
+export function buildAboutTab() {
+  return `
+      <div class="stg-pane stg-about" data-stg-pane="about">
+        <div class="stg-about-hero" id="stg-about-hero">
+          <img class="stg-about-logo" src="/icon-192.png" alt="" width="64" height="64" decoding="async">
+          <h3 class="stg-about-name">SynaBun</h3>
+          <p class="stg-about-version" id="stg-about-version" aria-live="polite">${kit.te('settings.redesign.about.loading')}</p>
+          <p class="stg-about-line" id="stg-about-install" hidden></p>
+          <p class="stg-about-line stg-about-desc" id="stg-about-desc" hidden></p>
+          <div class="stg-action-row stg-about-actions">
+            <button type="button" class="stg-action-btn" id="stg-about-update" ${kit.inv('ABT001')} title="${kit.H('ABT001')}">${kit.L('ABT001')}</button>
+            <button type="button" class="stg-action-btn" id="stg-about-copy" ${kit.inv('ABT002')} title="${kit.H('ABT002')}">${kit.L('ABT002')}</button>
+          </div>
+          <p class="stg-help stg-about-note" id="stg-about-note" role="status" hidden></p>
+        </div>
+        ${kit.card({
+          id: 'stg-sec-about-links', section: 'about.links',
+          body: `<ul class="stg-about-links" id="stg-about-links" data-stg-search="off"></ul>`,
+        })}
+        ${kit.card({
+          id: 'stg-sec-about-system', section: 'about.system',
+          body: `<dl class="stg-about-facts" id="stg-about-facts" data-stg-search="off"></dl>`,
+        })}
+        ${kit.card({
+          id: 'stg-sec-about-dependencies', section: 'about.dependencies',
+          // how many dependencies the lists hold; empty until the server has answered
+          status: '<span class="stg-about-count" id="stg-about-deps-count"></span>',
+          body: `
+          <div class="stg-about-filter" ${kit.inv('ABT003')} hidden>
+            <input type="search" class="stg-input stg-about-filter-input" id="stg-about-filter" placeholder="${kit.te('settings.redesign.about.deps.filterPlaceholder')}" aria-label="${kit.L('ABT003')}" aria-describedby="stg-about-filter-help" autocomplete="off" autocapitalize="off" spellcheck="false" enterkeyhint="search">
+            <span class="stg-sr" id="stg-about-filter-help">${kit.H('ABT003')}</span>
+          </div>
+          <div class="stg-about-deps" id="stg-about-deps" data-stg-search="off"></div>`,
+        })}
+        <footer class="stg-about-footer" id="stg-about-footer" hidden></footer>
+      </div>`;
+}
+
+// ── Drawing ──
+
+function linkRow(link) {
+  return `<li><a class="stg-about-link" href="${kit.esc(link.url)}" ${EXTERNAL}>
+      <span class="stg-about-link-label">${kit.esc(linkLabel(link, kit.tx))}</span>
+      <span class="stg-about-link-url">${kit.esc(linkHost(link.url))}</span>${ARROW}</a></li>`;
+}
+
+function fact(label, value, { mono = false } = {}) {
+  if (value == null || value === '') return '';
+  return `<div class="stg-about-fact"><dt>${label}</dt><dd${mono ? ' class="stg-about-mono"' : ''}>${kit.esc(String(value))}</dd></div>`;
+}
+
+function depRow(dep) {
+  const url = npmUrl(dep.name);
+  const name = url ? `<a class="stg-about-dep-name" href="${kit.esc(url)}" ${EXTERNAL}>${kit.esc(dep.name)}</a>` : `<span class="stg-about-dep-name">${kit.esc(dep.name)}</span>`;
+  const version = dep.installed
+    ? `<span class="stg-about-dep-version">${kit.esc(dep.version)}</span>`
+    : `<span class="stg-about-dep-version" data-state="missing">${kit.esc(dep.declared)} · ${kit.te('settings.redesign.about.deps.notInstalled')}</span>`;
+  const meta = [
+    dep.installed && dep.declared && dep.declared !== dep.version ? kit.te('settings.redesign.about.deps.declared', { range: dep.declared }) : '',
+    dep.optional ? kit.te('settings.redesign.about.deps.optional') : '',
+    dep.license ? kit.esc(dep.license) : '',
+  ].filter(Boolean).join(' · ');
+  return `<li class="stg-about-dep">${name}${version}${meta ? `<span class="stg-about-dep-meta">${meta}</span>` : ''}</li>`;
+}
+
+function depGroup(title, sub, deps, { note = '' } = {}) {
+  if (!deps.length) return '';
+  return `<div class="stg-about-group">
+      <h4 class="stg-subhead stg-about-group-head"><span>${title}</span>${sub ? `<span class="stg-about-group-sub">${sub}</span>` : ''}<span class="stg-about-count">${deps.length}</span></h4>
+      ${note ? `<p class="stg-help stg-about-group-note">${note}</p>` : ''}
+      <ul class="stg-about-dep-list">${deps.map(depRow).join('')}</ul>
+    </div>`;
+}
+
+function drawDependencies(host, shown) {
+  const { packages, vendored, counts } = shown;
+  const runtime = packages.map((p) => depGroup(kit.esc(packageLabel(p, kit.tx)), kit.esc(p.name), p.runtime, { note: p.onDemand ? kit.te('settings.redesign.about.deps.onDemand') : '' })).join('');
+  const singles = vendored.filter((b) => b.packages.length === 1).flatMap((b) => b.packages);
+  const bundles = vendored.filter((b) => b.packages.length > 1)
+    .map((b) => depGroup(kit.esc(b.label), kit.esc(b.version || ''), b.packages)).join('');
+  const bundled = singles.length || bundles
+    ? `<div class="stg-about-bundled">${depGroup(kit.te('settings.redesign.about.deps.vendored'), '', singles)}${bundles}</div>`
+    : '';
+  // A filter opens the group to show its matches; one the user opened stays open while they type.
+  const devOpen = !!shown.query || !!host.querySelector('.stg-about-dev')?.open;
+  const dev = counts.dev
+    ? `<details class="stg-advanced stg-about-dev"${devOpen ? ' open' : ''}>
+        <summary>${kit.CHEVRON}<span>${kit.te('settings.redesign.about.deps.dev', { count: counts.dev })}</span></summary>
+        <div class="stg-advanced-body">${packages.map((p) => depGroup(kit.esc(packageLabel(p, kit.tx)), kit.esc(p.name), p.dev)).join('')}</div>
+      </details>`
+    : '';
+  const empty = counts.total ? '' : `<p class="stg-help">${shown.query ? kit.te('settings.redesign.about.deps.noMatch', { query: shown.query }) : kit.te('settings.redesign.about.deps.none')}</p>`;
+  host.innerHTML = `${runtime}${bundled}${dev}${empty}`;
+}
+
+/**
+ * Load and draw the page the first time it is shown, and wire its buttons.
+ * @param {HTMLElement} overlay   the Settings panel
+ * @param {Object} [o]
+ * @param {Function} [o.fetchImpl]  fetch (tests)
+ * @param {(msg: string) => void} [o.toast]  the panel's toast
+ * @param {Window} [o.win]          where the user agent and the desktop app's bridge are read
+ */
+export function wireAboutTab(overlay, { fetchImpl = (...args) => fetch(...args), toast = () => {}, win = window } = {}) {
+  const pane = kit.paneOf(overlay, 'about');
+  if (!pane) return;
+  const $ = (id) => pane.querySelector(`#${id}`);
+  const client = readClientRuntime({ userAgent: win.navigator?.userAgent, desktop: desktopBridge(win) });
+  let model = null;
+  let loading = null;
+
+  const getJson = async (url) => {
+    try {
+      const res = await fetchImpl(url, { headers: { Accept: 'application/json' } });
+      if (!res.ok) return null;
+      return await res.json().catch(() => null);
+    } catch {
+      return null;
+    }
+  };
+
+  const show = (node, text) => {
+    if (!node) return;
+    node.textContent = text || '';
+    node.hidden = !text;
+  };
+
+  function drawHeader() {
+    const { app } = model;
+    show($('stg-about-version'), versionLine(app, kit.tx));
+    show($('stg-about-install'), installLine(app, kit.tx));
+    show($('stg-about-desc'), app.description);
+    show($('stg-about-note'), model.full ? '' : kit.tx('settings.redesign.about.restartNote'));
+  }
+
+  function drawLinks() {
+    const host = $('stg-about-links');
+    if (!host) return;
+    host.innerHTML = model.links.length
+      ? model.links.filter((l) => isExternalUrl(l.url)).map(linkRow).join('')
+      : `<li class="stg-help stg-about-empty">${model.full ? kit.te('settings.redesign.about.links.none') : kit.te('settings.redesign.about.afterRestart')}</li>`;
+  }
+
+  function drawFacts() {
+    const host = $('stg-about-facts');
+    if (!host) return;
+    const { app, runtime } = model;
+    host.innerHTML = [
+      fact(kit.te('settings.redesign.about.row.version'), app.version ? `${app.version} (${buildLabel(app, kit.tx)})` : ''),
+      fact(kit.te('settings.redesign.about.row.install'), installLine(app, kit.tx)),
+      fact('Node.js', runtime.node),
+      fact('SQLite', runtime.sqlite),
+      fact('Electron', client.electron),
+      fact('Chromium', client.chromium),
+      fact(kit.te('settings.redesign.about.row.os'), osLine(runtime, client)),
+      fact(kit.te('settings.redesign.about.row.dataFolder'), runtime.dataHome, { mono: true }),
+      fact(kit.te('settings.redesign.about.row.port'), runtime.port),
+    ].join('');
+  }
+
+  function drawDeps() {
+    const host = $('stg-about-deps');
+    const count = $('stg-about-deps-count');
+    const filter = pane.querySelector('.stg-about-filter');
+    const deps = model.dependencies;
+    if (!host) return;
+    if (!deps) {
+      host.innerHTML = `<p class="stg-help stg-about-empty">${kit.te('settings.redesign.about.afterRestart')}</p>`;
+      if (filter) filter.hidden = true;
+      return;
+    }
+    if (count) count.textContent = deps.counts.total ? String(deps.counts.total) : '';
+    if (filter) filter.hidden = deps.counts.total <= ABOUT_FILTER_MIN;
+    drawDependencies(host, filterDependencies(deps, $('stg-about-filter')?.value || ''));
+  }
+
+  function drawFooter() {
+    const host = $('stg-about-footer');
+    if (!host) return;
+    const { app } = model;
+    const lines = [];
+    if (app.license) lines.push(`<p>${kit.te('settings.redesign.about.footer.license', { license: app.license })}</p>`);
+    if (app.copyright) lines.push(`<p>${kit.te('settings.redesign.about.footer.copyright', { years: app.copyright.years, holder: app.copyright.holder })}</p>`);
+    if (model.dependencies?.counts.total) lines.push(`<p><button type="button" class="stg-about-builtwith" id="stg-about-builtwith">${kit.te('settings.redesign.about.footer.builtWith')}</button></p>`);
+    host.innerHTML = lines.join('');
+    host.hidden = !lines.length;
+  }
+
+  function draw() {
+    drawHeader();
+    drawLinks();
+    drawFacts();
+    drawDeps();
+    drawFooter();
+  }
+
+  async function load() {
+    const about = await getJson(ABOUT_URL);
+    let answer = readAboutAnswer({ about });
+    if (!answer.full) {
+      // An older server: what it has always said.
+      const [health, version] = await Promise.all([getJson('/api/health'), getJson('/api/system/version')]);
+      answer = readAboutAnswer({ health, version });
+    }
+    if (!document.body.contains(overlay)) return;
+    model = answer;
+    draw();
+  }
+
+  const ensure = () => { if (!loading) loading = load(); return loading; };
+  if (kit.paneActive(overlay, 'about')) ensure();
+  overlay.addEventListener('stg-page-change', (e) => { if (e.detail?.page === 'about') ensure(); });
+
+  // ── Buttons ──
+
+  const updateBtn = $('stg-about-update');
+  // The Apps menu's own item: no menu (an embed, a test page), no button.
+  if (updateBtn && !document.getElementById(UPDATE_MENU_ITEM)) updateBtn.hidden = true;
+  updateBtn?.addEventListener('click', () => document.getElementById(UPDATE_MENU_ITEM)?.click());
+
+  $('stg-about-copy')?.addEventListener('click', async () => {
+    if (!model) await ensure();
+    const body = diagnosticsText(model, client, { tx: kit.tx });
+    try {
+      await win.navigator.clipboard.writeText(body);
+      toast(kit.tx('settings.redesign.about.copied'));
+    } catch {
+      toast(kit.tx('settings.redesign.about.copyFailed'));
+    }
+  });
+
+  $('stg-about-filter')?.addEventListener('input', () => { if (model) drawDeps(); });
+
+  pane.addEventListener('click', (e) => {
+    if (!e.target.closest?.('#stg-about-builtwith')) return;
+    const section = $('stg-sec-about-dependencies');
+    const content = overlay.querySelector('.settings-content');
+    if (!section || !content) return;
+    revealSettingsTarget(overlay, section);
+    // Only the page scrolls, never the panel around it.
+    const top = section.getBoundingClientRect().top - content.getBoundingClientRect().top + content.scrollTop - 8;
+    content.scrollTo({ top: Math.max(0, top), behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+  });
+}