synabun 2.0.5 → 2.0.9

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

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

@@ -0,0 +1,254 @@
+// ═══════════════════════════════════════════
+// SETTINGS — About (what it says)
+// ═══════════════════════════════════════════
+//
+// The About page reads GET /api/system/about (lib/system-about.js). A server from before that route answers 404
+// until it restarts (the page's files are served live): the page then shows what /api/health and
+// /api/system/version already say, with a note, and nothing fails. This module turns either answer into what the
+// page draws: labels, the dependency lists a filter leaves, the plain-text block "Copy info" puts on the clipboard.
+//
+// No DOM and no imports: node --test loads it as it is (tests/settings-about.test.mjs). Strings come through the
+// translate function the caller passes (`tx`, the kit's); the keys are written out in full so the i18n audit sees them.
+
+export const ABOUT_URL = '/api/system/about';
+/** The filter field shows once there are more dependencies than this. */
+export const ABOUT_FILTER_MIN = 20;
+
+const INSTALL_KEYS = {
+  desktop: 'settings.redesign.about.install.desktop',
+  app: 'settings.redesign.about.install.app',
+  npm: 'settings.redesign.about.install.npm',
+  git: 'settings.redesign.about.install.git',
+};
+const BUILD_KEYS = {
+  stable: 'settings.redesign.about.channel.stable',
+  prerelease: 'settings.redesign.about.channel.prerelease',
+  dev: 'settings.redesign.about.channel.dev',
+};
+export const LINK_KEYS = {
+  repository: 'settings.redesign.about.link.repository',
+  releases: 'settings.redesign.about.link.releases',
+  changelog: 'settings.redesign.about.link.changelog',
+  issues: 'settings.redesign.about.link.issues',
+  website: 'settings.redesign.about.link.website',
+  docs: 'settings.redesign.about.link.docs',
+  npm: 'settings.redesign.about.link.npm',
+  license: 'settings.redesign.about.link.license',
+  discord: 'settings.redesign.about.link.discord',
+  x: 'settings.redesign.about.link.x',
+};
+const PACKAGE_KEYS = {
+  'neural-interface': 'settings.redesign.about.package.neural_interface',
+  'mcp-server': 'settings.redesign.about.package.mcp_server',
+  desktop: 'settings.redesign.about.package.desktop',
+  'whatsapp-connector': 'settings.redesign.about.package.whatsapp_connector',
+};
+
+const NPM_NAME = /^(?:@[a-z0-9][a-z0-9._~-]*\/)?[a-z0-9][a-z0-9._~-]*$/i;
+const SEP = ' · ';
+
+const str = (value) => (typeof value === 'string' && value.trim() ? value.trim() : null);
+const list = (value) => (Array.isArray(value) ? value : []);
+
+/** An address the page may link to: https only. */
+export const isExternalUrl = (url) => typeof url === 'string' && /^https:\/\/[^\s"'<>]+$/.test(url);
+
+/** A link's address without the scheme, for the quiet line beside its name. */
+export const linkHost = (url) => String(url || '').replace(/^https:\/\//, '').replace(/\/+$/, '');
+
+/** A package's page on npm, or null for a name npm would not have. */
+export const npmUrl = (name) => (typeof name === 'string' && NPM_NAME.test(name) ? `https://www.npmjs.com/package/${name}` : null);
+
+function readDependency(dep) {
+  if (!dep || typeof dep !== 'object' || !str(dep.name)) return null;
+  return {
+    name: dep.name,
+    declared: str(dep.declared) || '',
+    version: dep.installed ? str(dep.version) : null,
+    installed: !!dep.installed && !!str(dep.version),
+    license: str(dep.license),
+    optional: !!dep.optional,
+  };
+}
+
+function readDependencies(deps) {
+  if (!deps || typeof deps !== 'object') return null;
+  const packages = list(deps.packages).filter((p) => p && str(p.id)).map((p) => ({
+    id: p.id,
+    name: str(p.name) || p.id,
+    onDemand: !!p.onDemand,
+    runtime: list(p.runtime).map(readDependency).filter(Boolean),
+    dev: list(p.dev).map(readDependency).filter(Boolean),
+  }));
+  const vendored = list(deps.vendored).filter((b) => b && str(b.id)).map((b) => ({
+    id: b.id,
+    label: str(b.label) || b.id,
+    version: str(b.version),
+    packages: list(b.packages).filter((p) => p && str(p.name) && str(p.version))
+      .map((p) => ({ name: p.name, declared: '', version: p.version, installed: true, license: str(p.license), optional: false })),
+  }));
+  return { packages, vendored, counts: countDependencies({ packages, vendored }) };
+}
+
+/** How many runtime, dev and vendored dependencies a set of lists holds. */
+export function countDependencies({ packages = [], vendored = [] } = {}) {
+  const runtime = packages.reduce((n, p) => n + p.runtime.length, 0);
+  const dev = packages.reduce((n, p) => n + p.dev.length, 0);
+  const bundled = vendored.reduce((n, b) => n + b.packages.length, 0);
+  return { runtime, dev, vendored: bundled, total: runtime + dev + bundled };
+}
+
+/**
+ * What the page shows, from the answers it got. `about` is the body of GET /api/system/about when it answered
+ * (anything else: null); `health` and `version` are the bodies of /api/health and /api/system/version, or null.
+ * `full` is false when the About route did not answer: the page then says that a restart brings the rest.
+ */
+export function readAboutAnswer({ about = null, health = null, version = null } = {}) {
+  const full = !!(about && typeof about === 'object' && about.app && typeof about.app === 'object');
+  if (full) {
+    const app = about.app;
+    const install = INSTALL_KEYS[app.install] ? app.install : null;
+    const channel = app.channel === 'prerelease' ? 'prerelease' : 'stable';
+    const git = app.git && typeof app.git === 'object' ? { branch: str(app.git.branch), commit: str(app.git.commit) } : null;
+    const rt = about.runtime && typeof about.runtime === 'object' ? about.runtime : {};
+    const os = rt.os && typeof rt.os === 'object' ? rt.os : null;
+    return {
+      full: true,
+      app: {
+        version: str(app.version),
+        channel,
+        build: install === 'git' ? 'dev' : channel,
+        install,
+        git: git && (git.branch || git.commit) ? git : null,
+        description: str(app.description),
+        license: str(app.license),
+        copyright: app.copyright && str(app.copyright.years) && str(app.copyright.holder) ? { years: app.copyright.years, holder: app.copyright.holder } : null,
+      },
+      runtime: {
+        node: str(rt.node),
+        sqlite: str(rt.sqlite),
+        os: os ? { name: str(os.name), version: str(os.version), arch: str(os.arch), kernel: str(os.kernel) } : null,
+        dataHome: str(rt.dataHome),
+        port: Number.isFinite(Number(rt.port)) && Number(rt.port) > 0 ? Number(rt.port) : null,
+      },
+      links: list(about.links).filter((l) => l && LINK_KEYS[l.id] && isExternalUrl(l.url)).map((l) => ({ id: l.id, url: l.url })),
+      dependencies: readDependencies(about.dependencies),
+    };
+  }
+  // An older server: what /api/health and /api/system/version say.
+  const h = health && typeof health === 'object' ? health : {};
+  const v = version && typeof version === 'object' ? version : {};
+  const install = v.desktopManaged ? 'desktop' : (INSTALL_KEYS[h.install] && h.install !== 'desktop' ? h.install : null);
+  const channel = v.installedChannel === 'prerelease' ? 'prerelease' : 'stable';
+  return {
+    full: false,
+    app: {
+      version: str(h.version) || str(v.current),
+      channel,
+      build: install === 'git' ? 'dev' : channel,
+      install,
+      git: null,
+      description: null,
+      license: null,
+      copyright: null,
+    },
+    runtime: { node: null, sqlite: null, os: null, dataHome: null, port: null },
+    links: [],
+    dependencies: null,
+  };
+}
+
+/**
+ * What the page itself knows about where it runs: inside the desktop app, the Electron and Chromium versions
+ * its window reports in the user agent (the app never changes it), and the app's own platform and processor.
+ */
+export function readClientRuntime({ userAgent = '', desktop = null } = {}) {
+  const ua = String(userAgent || '');
+  const electron = /\bElectron\/(\d[\w.-]*)/.exec(ua)?.[1] || null;
+  const inApp = !!desktop || !!electron;
+  return {
+    desktop: inApp,
+    electron: inApp ? electron : null,
+    chromium: inApp ? (/\bChrome\/(\d[\w.-]*)/.exec(ua)?.[1] || null) : null,
+    platform: desktop && str(desktop.platform),
+    arch: desktop && str(desktop.arch),
+  };
+}
+
+/** "Stable", "Pre-release" or "Development build". */
+export const buildLabel = (app, tx) => tx(BUILD_KEYS[app?.build] || BUILD_KEYS.stable);
+
+/** "Desktop app", "npm install", "Git clone" …, or null when the server did not say. */
+export const installLabel = (app, tx) => (INSTALL_KEYS[app?.install] ? tx(INSTALL_KEYS[app.install]) : null);
+
+/** The install line under the version: "Git clone · Dev · 295547c". */
+export function installLine(app, tx) {
+  const parts = [installLabel(app, tx)];
+  if (app?.git) parts.push(app.git.branch, app.git.commit);
+  return parts.filter(Boolean).join(SEP);
+}
+
+/** The version line: "Version 2.0.5 · Stable". */
+export function versionLine(app, tx) {
+  if (!app?.version) return buildLabel(app, tx);
+  return `${tx('settings.redesign.about.version', { version: app.version })}${SEP}${buildLabel(app, tx)}`;
+}
+
+/** "macOS 26.1 · arm64" from the server's answer; the desktop app's platform and processor when there is none. */
+export function osLine(runtime, client = {}) {
+  const os = runtime?.os;
+  if (os && (os.name || os.version)) return [[os.name, os.version].filter(Boolean).join(' '), os.arch].filter(Boolean).join(SEP);
+  return [client.platform, client.arch].filter(Boolean).join(SEP) || null;
+}
+
+/** A package of the product by its id, in the page's language; its npm name otherwise. */
+export const packageLabel = (pkg, tx) => (PACKAGE_KEYS[pkg?.id] ? tx(PACKAGE_KEYS[pkg.id]) : (pkg?.name || ''));
+
+/** A link's name in the page's language. */
+export const linkLabel = (link, tx) => (LINK_KEYS[link?.id] ? tx(LINK_KEYS[link.id]) : linkHost(link?.url));
+
+/**
+ * The lists a filter leaves: every dependency whose name holds the query (case-insensitive), and the counts of
+ * what is shown. An empty query leaves everything.
+ */
+export function filterDependencies(deps, query = '') {
+  const q = String(query || '').trim().toLowerCase();
+  const keep = (dep) => !q || dep.name.toLowerCase().includes(q);
+  const packages = list(deps?.packages).map((p) => ({ ...p, runtime: p.runtime.filter(keep), dev: p.dev.filter(keep) }));
+  const vendored = list(deps?.vendored).map((b) => ({ ...b, packages: b.packages.filter(keep) }));
+  return { query: q, packages, vendored, counts: countDependencies({ packages, vendored }) };
+}
+
+/**
+ * The plain-text block "Copy info" copies: version and channel, install, runtime, system, and the version of every
+ * runtime dependency and bundled library. No path, no address, nothing from a setting.
+ */
+export function diagnosticsText(model, client = {}, { tx }) {
+  const lines = [];
+  const app = model?.app || {};
+  const rt = model?.runtime || {};
+  lines.push(`SynaBun ${app.version || '?'} (${buildLabel(app, tx)})`);
+  const install = installLine(app, tx);
+  if (install) lines.push(`${tx('settings.redesign.about.row.install')}: ${install}`);
+  if (rt.node) lines.push(`Node.js: ${rt.node}`);
+  if (rt.sqlite) lines.push(`SQLite: ${rt.sqlite}`);
+  if (client.electron) lines.push(`Electron: ${client.electron}`);
+  if (client.chromium) lines.push(`Chromium: ${client.chromium}`);
+  const os = osLine(rt, client);
+  if (os) lines.push(`${tx('settings.redesign.about.row.os')}: ${os}`);
+  const deps = model?.dependencies;
+  if (deps) {
+    for (const pkg of deps.packages) {
+      if (!pkg.runtime.length) continue;
+      lines.push('', `${packageLabel(pkg, tx)} (${pkg.name})`);
+      for (const dep of pkg.runtime) lines.push(`  ${dep.name} ${dep.installed ? dep.version : `${dep.declared} (${tx('settings.redesign.about.deps.notInstalled')})`}`);
+    }
+    if (deps.vendored.length) {
+      lines.push('', tx('settings.redesign.about.deps.vendored'));
+      for (const bundle of deps.vendored) lines.push(`  ${bundle.label} ${bundle.version || '?'}`);
+    }
+  } else if (model && !model.full) {
+    lines.push('', tx('settings.redesign.about.restartNote'));
+  }
+  return lines.join('\n');
+}

package/neural-interface/public/shared/settings/settings-ia.js

@@ -29,6 +29,7 @@ export const SETTINGS_GROUPS = [
   { id: 'tools',       labelKey: k('group.tools') },
   { id: 'automations', labelKey: k('group.automations') },
   { id: 'personalize', labelKey: k('group.personalize') },
+  { id: 'app',         labelKey: k('group.app') },
 ];
 
 /** `key` is the i18n slug under settings.redesign.{nav,page,section}; `icon` names a TAB_ICONS entry. */
@@ -183,6 +184,17 @@ export const SETTINGS_PAGES = [
       { id: 'stg-sec-2d-graph',      key: 'd2_graph',               state: 'advanced', variant: 'graphics' },
     ],
   },
+  {
+    // The last page: version, links, system and dependencies (settings-about-pane.js, GET /api/system/about).
+    // Its header (icon, version, Check for updates, Copy info) is not a section: it is always shown.
+    id: 'about', key: 'about', group: 'app', icon: 'about',
+    panes: [{ id: 'about' }],
+    sections: [
+      { id: 'stg-sec-about-links',        key: 'links',        state: 'open' },
+      { id: 'stg-sec-about-system',       key: 'system',       state: 'open' },
+      { id: 'stg-sec-about-dependencies', key: 'dependencies', state: 'open' },
+    ],
+  },
 ];
 
 export const DEFAULT_SETTINGS_PAGE = 'ai-connections';
@@ -278,11 +290,13 @@ export const SETTINGS_CONTROLS = {
   'stg-sec-visual-tuning': 'UI003 UI004 UI005 UI006 UI007 UI008 UI009 UI010',
   'stg-sec-file-icons': 'ICO001 ICO003 ICO002 ICO004 ICO005',
   'stg-sec-2d-graph': 'GFX001 GFX002 GFX003 GFX004 GFX005 GFX006 GFX007 GFX008',
+  'stg-sec-about-dependencies': 'ABT003',
 };
 /** Controls of a page that sit outside its sections (a pane's save bar, the tabs of a pane). */
 export const SETTINGS_PAGE_CONTROLS = {
   browser: 'BRW081 BRW082 BRW085',
   'connected-tools': 'MCP001',
+  about: 'ABT001 ABT002',
 };
 /** The window's own controls (dim the background, close, the page list): not settings, so never search results. */
 export const SETTINGS_SHELL_CONTROLS = 'SH002 SH003 SH005';
@@ -306,6 +320,7 @@ export const homeOfControl = (controlId) => CONTROL_HOME.get(controlId) || null;
 // ── Deep-link aliases ──────────────────────────────────────────────────────
 // Old tab id → the page that took it over, and the section a link to that tab
 // should land on. Old callers keep working; new code uses the page ids.
+// A page that never had an old tab needs no entry: `{ tab: 'about' }` names the About page itself.
 
 export const SETTINGS_TAB_ALIASES = {
   server:        { page: 'memory-backups',  section: 'stg-sec-database' },