synabun 2.0.5 → 2.0.7

package/neural-interface/public/shared/i18n.js

@@ -174,11 +174,29 @@ export function getLocaleChoice() {
   return matchLocale(saved) || SYSTEM_LOCALE;
 }
 
+/**
+ * The locale the page address asks for with `?lang=<tag>`, matched like a stored choice
+ * ('pt' → 'pt-BR'), or null (no tag, or one no locale answers). It holds for this page
+ * load only and is never stored: showcase captures use it to get an English UI without
+ * touching the user's own choice.
+ */
+export function getAddressLocale() {
+  const search = globalThis.window?.location?.search;
+  if (!search) return null;
+  try {
+    return matchLocale(new URLSearchParams(search).get('lang'));
+  } catch {
+    return null;
+  }
+}
+
 /**
  * Detect the user's preferred locale.
- * Priority: stored explicit choice → system language → 'en'
+ * Priority: the page address (?lang=) → stored explicit choice → system language → 'en'
  */
 function detectLocale() {
+  const address = getAddressLocale();
+  if (address) return address;
   const choice = getLocaleChoice();
   return choice === SYSTEM_LOCALE ? getSystemLocale() : choice;
 }

package/neural-interface/public/shared/install-details-view.js

@@ -0,0 +1,86 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — the setup wizard's Details: what they say
+// ═══════════════════════════════════════════
+//
+// Inside the SynaBun desktop app, the setup wizard (onboarding.html) shows
+// what it checked and what this copy has, step by step, in a Details area
+// under Environment Check and under Install & Build: the commands SynaBun ran
+// and what they answered, where `npm i -g` puts packages, and every part's
+// dependencies with the version installed. The facts are
+// GET /api/setup/install-details (lib/install-details.js); this turns them into
+// the lines shown. English, like the rest of the wizard.
+//
+// No imports and no DOM: `node --test` loads this file as it is
+// (tests/install-details-view.test.mjs).
+
+const said = (tool) => (tool.ok ? tool.output || '(no answer)' : `did not run: ${tool.output || 'no output'}`);
+
+/** Environment Check: the Node.js SynaBun runs on, its npm and npx (the command and the answer), and the user's own npm. */
+export function environmentLines(details) {
+  if (!details || typeof details !== 'object') return [];
+  const lines = [];
+  const node = details.node;
+  if (node) {
+    lines.push('$ node --version');
+    lines.push(`${node.version}  ${node.path}${node.bundled ? '  (the Node.js that came with SynaBun)' : ''}`);
+  }
+  for (const name of ['npm', 'npx']) {
+    const tool = details[name];
+    if (!tool) { lines.push(`${name}: not found`); continue; }
+    lines.push(`$ ${tool.command}`);
+    lines.push(`${said(tool)}${tool.ok && tool.bundled ? '  (came with SynaBun)' : ''}`);
+  }
+  const prefix = details.globalPrefix;
+  if (prefix?.path) {
+    const setIn = prefix.from === 'npm_config_prefix' ? ', from npm_config_prefix' : prefix.from ? `, set in ${prefix.from}` : '';
+    const why = prefix.source === 'user' ? `your own npm prefix${setIn}` : 'a folder of SynaBun\'s, outside the app';
+    lines.push(`npm i -g installs into ${prefix.path} (${why})${prefix.bin ? `, commands in ${prefix.bin}` : ''}`);
+  }
+  if (details.kind === 'app') {
+    const user = details.userNpm;
+    lines.push(user
+      ? `Your own npm: ${user.path} ${user.ok ? user.output : '(did not answer)'}. SynaBun's terminals find it first.`
+      : 'No npm of your own: SynaBun\'s terminals use the one that came with SynaBun.');
+  }
+  return lines;
+}
+
+/** One part's packages: how many, then each dependency with the version installed. */
+function partLines(part, bundled) {
+  const lines = [`${part.name}: ${part.packages} package${part.packages === 1 ? '' : 's'} installed${bundled ? ' (came with SynaBun)' : ''}`];
+  for (const dep of part.dependencies || []) {
+    lines.push(`  ${dep.name} ${dep.installed || `not installed (wants ${dep.wanted})`}`);
+  }
+  return lines;
+}
+
+/** Install & Build: what this copy has, from the runtime to every dependency, and what is still to come. */
+export function installLines(details) {
+  if (!details || typeof details !== 'object') return [];
+  const app = details.kind === 'app';
+  const lines = [];
+  if (app) {
+    const where = details.app?.target ? ` for ${details.app.target}` : '';
+    lines.push(`SynaBun ${details.app?.version || ''}${where}: nothing to install, this copy came with its dependencies.`.replace(/\s+:/, ':'));
+  }
+  if (details.node) {
+    const npm = details.npm?.ok ? `, npm ${details.npm.output}` : '';
+    const npx = details.npx?.ok ? `, npx ${details.npx.output}` : '';
+    lines.push(`Node.js ${String(details.node.version).replace(/^v/, '')}${npm}${npx}${details.node.bundled ? ' (the runtime that came with SynaBun)' : ''}`);
+  }
+  for (const part of details.parts || []) lines.push(...partLines(part, app));
+  lines.push(details.mcp?.built ? `MCP server: built (${details.mcp.file})` : 'MCP server: not built yet');
+  const bundled = details.bundled;
+  if (bundled) {
+    lines.push(bundled.embeddingModel ? `Local embedding model: ${bundled.embeddingModel} (came with SynaBun)` : 'Local embedding model: not included (keyword recall only)');
+    if (bundled.cloudflared) lines.push(`cloudflared ${bundled.cloudflared}, for invite links and remote MCP (came with SynaBun)`);
+    if (bundled.gitBash) lines.push(`Git for Windows ${bundled.gitBash}, the Git Bash Claude Code needs (came with SynaBun)`);
+    if (details.app?.electron) lines.push(`The window: Electron ${details.app.electron}`);
+  }
+  if (details.browser) {
+    lines.push(details.browser.installed
+      ? `Automation browser (Chromium for Playwright): installed, ${details.browser.path}`
+      : 'Automation browser (Chromium for Playwright): not downloaded yet; SynaBun downloads it at its next start.');
+  }
+  return lines;
+}

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

@@ -50,6 +50,7 @@ import { registerSidepanel, syncSidepanelLayout, focusSidepanel, openAnotherSide
 import { nativeLoopWindowId } from '../ui-native-window-id.js';
 import { requestGeneratedSessionTitle } from '../session-title.js';
 import { wireFileLinks } from '../ui-file-links.js';
+import { mountCliBanner } from '../ui-cli-banner.js';
 import { backToAssistant, buildWorkerEndCard, endWorkerRunOnClose, forgetWorkerEnd, trackWorkerEnd } from '../ui-worker-end.js';
 import { isDispatchedRun } from '../worker-end.js';
 import {
@@ -121,6 +122,8 @@ const _titleReassertTimers = new Map();
 // rename carries is not the session's: nothing shows it or pushes it again.
 const _pendingRenames = createPendingRenames();
 let _composer = null;           // the primary panel's composer (mountCompose)
+let _cliBanner = null;          // the CLI banner and send-block (ui-cli-banner.js)
+let _cliWasBlocked = false;    // the banner held sends back last time it said (a change to usable heals the serve)
 // Where the panel goes. Every choice of the user (a tab, a session in the
 // menu, New session, a project, a worktree) begins an intent, and a navigation
 // binds the panel only while its intent is the latest one: a later choice wins
@@ -430,6 +433,30 @@ function buildPanel() {
   // path is a path in the session's directory.
   wireFileLinks(messagesContainer, { cwd: () => getState().cwd || '' });
 
+  // ── The CLI banner (ui-cli-banner.js) ───────────────────────────────────
+  // Above the transcript while OpenCode is not usable: not installed (with
+  // Install, which runs OpenCode's own installer or official release on the
+  // server), being installed, failed to install, or found but failed to start
+  // (with the error it gave). The panel gets `ocp-cli-blocked` meanwhile, and
+  // the composer holds sends back (sendBlocked below).
+  _cliBanner = mountCliBanner({
+    toolKey: 'opencode',
+    prefix: 'ocp',
+    panel: () => panel,
+    anchor: () => messagesContainer,
+    // OpenCode was installed (or found again) while its serve could not start: start it now rather than at the
+    // next retry of the auto-heal, whose wait has grown by then.
+    onBlockedChange: (blocked) => {
+      const usableAgain = _cliWasBlocked && !blocked;
+      _cliWasBlocked = blocked;
+      if (usableAgain && getState().serverStatus !== 'ready') {
+        clearTimeout(_healTimer);
+        _healTimer = null;
+        scheduleAutoHeal('cli-usable', 0);
+      }
+    },
+  });
+
   // ── What the session changed on disk (session.diff) ─────────────────────
   mountChangesBar(panel, getDefaultStore());
 
@@ -519,6 +546,10 @@ function buildPanel() {
     // (ocp-v2-binding.js): the session the prompt or the Stop was for, frozen
     // before the first await. It is never the live state.
     canSend: (session) => !_automationRunning.has(session?.sessionId),
+    // While the CLI banner shows (OpenCode missing, broken or being installed),
+    // a send stays in the box and the banner is pointed at instead.
+    sendBlocked: () => !!_cliBanner?.blocked(),
+    onSendBlocked: () => _cliBanner?.nudge(),
     onManualSend: (session, phase, meta) => {
       const sessionId = session?.sessionId;
       if (phase === 'started') requestOpenCodeSessionTitle(session, meta);
@@ -2210,6 +2241,7 @@ function applyVisibility(nextVisible) {
   _panelEl.classList.toggle('ocpv2-open', _visible);
   if (_visible) {
     state.lastActivePanel = 'opencode';
+    _cliBanner?.refresh();
   } else {
     // The popover is a child of <body>: it does not go with the panel by itself.
     _contextMenu?.close();

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

@@ -966,6 +966,16 @@ export function mountCompose(rootEl, store = getDefaultStore(), opts = {}) {
     syncButton();
   }
 
+  // The panel holds sends back while its CLI banner shows (opts.sendBlocked,
+  // ui-cli-banner.js): nothing is sent, nothing is cleared, the banner is
+  // pointed at. A composer mounted without the option (a sub-agent's) never is.
+  function sendHeldBack() {
+    let held = false;
+    try { held = !!opts.sendBlocked?.(); } catch { held = false; }
+    if (held) { try { opts.onSendBlocked?.(); } catch {} }
+    return held;
+  }
+
   function rememberPrompt(text) {
     if (!text) return;
     _history.push(text);
@@ -1038,6 +1048,7 @@ export function mountCompose(rootEl, store = getDefaultStore(), opts = {}) {
     // read this snapshot.
     const turn = captureBinding(store);
     if (!turn.sessionId) { store.pushError({ message: 'No session. Reopen the panel to retry.' }); return false; }
+    if (sendHeldBack()) return false;
     if (opts.canSend && opts.canSend(turn) === false) {
       store.pushError({ message: 'Stop the running automation before sending a manual turn.' });
       return false;
@@ -1140,6 +1151,11 @@ export function mountCompose(rootEl, store = getDefaultStore(), opts = {}) {
     const hasPaths = (s.pendingPaths?.length || 0) > 0;
 
     if (_shell) {
+      // The CLI is missing, broken or being installed (the panel's CLI banner
+      // says so): the command stays in the box, in shell mode. (Prompts and
+      // server commands are held back where they are sent, and come back into
+      // the box from there; a local slash command needs no CLI.)
+      if (sendHeldBack()) return false;
       // Only what the user typed (or pasted) into the shell-mode composer runs.
       // Anything that got into the box another way drops back to a prompt.
       const allowed = shellRunAllowed({ shell: _shell, value: _input.value, typedValue: _shellTypedValue });
@@ -1224,6 +1240,7 @@ export function mountCompose(rootEl, store = getDefaultStore(), opts = {}) {
     // first await; everything after it reads `turn`.
     const turn = captureBinding(store);
     const s = store.getState();
+    if (sendHeldBack()) return false;
     if (opts.canSend && opts.canSend(turn) === false) {
       store.pushError({ message: 'Stop the running automation before sending a manual turn.' });
       return false;

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

@@ -3567,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/pwa-install-page.js

@@ -1,5 +1,6 @@
 import { canPromptPwaInstall, initPwaInstall, installGuideMode, installGuideRequested, isStandalone,
   leavePwaInstallHandoff, requestPwaInstall } from './pwa-install.js';
+import { isDesktopApp } from './desktop-bridge.js';
 
 // 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,
@@ -12,7 +13,8 @@ async function setupComplete() {
   } catch { return null; }
 }
 
-if (isStandalone()) location.replace('/');
+// 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 ? {

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' });
+  });
+}