synabun 2.0.5 → 2.0.7

package/neural-interface/public/shared/ui-provider-auth.js

@@ -0,0 +1,104 @@
+// Small shared sign-in view; each caller supplies its panel's existing classes
+// and native transport. Nothing here handles provider credentials.
+export function providerAuthUrl(value) {
+  try {
+    const url = new URL(value);
+    return url.protocol === 'https:' && !url.username && !url.password ? url.href : '';
+  } catch { return ''; }
+}
+
+export function providerAuthSnapshot(container) {
+  if (!container?.querySelector?.('[data-provider-auth-card], [data-provider-auth], [data-provider-logged-out]')) return container?.innerHTML || '';
+  const clone = container.cloneNode(true);
+  clone.querySelectorAll('[data-provider-auth-card], [data-provider-auth], [data-provider-logged-out]').forEach(node => node.remove());
+  return clone.innerHTML;
+}
+
+// `statusText(account, state)` (optional): what the card says while no sign-in is under way, from the
+// caller's own account model (Claude: its subscription and API key). `providerSignedIn(account)`
+// (optional): whether the provider's own login is there ("Sign in again" instead of "Sign in").
+export function mountProviderAuth({ host, provider, read, start, cancel, refresh, submitCode, buttonClass, inputClass, textClass, isCurrent = () => true, onSuccess = () => {}, onAccountChange = () => {}, pollMs = 1500, statusText = null, providerSignedIn = null }) {
+  const root = document.createElement('div');
+  root.dataset.providerAuth = provider;
+  const status = document.createElement('div'); status.className = textClass; status.setAttribute('role', 'status'); status.setAttribute('aria-live', 'polite');
+  const actions = document.createElement('div');
+  const handoff = document.createElement('a'); handoff.className = buttonClass; handoff.target = '_blank'; handoff.rel = 'noopener noreferrer'; handoff.textContent = 'Open sign-in page'; handoff.hidden = true;
+  const code = document.createElement('div'); code.className = textClass; code.hidden = true;
+  const manual = document.createElement('form'); manual.hidden = true;
+  const codeInput = document.createElement('input'); codeInput.type = 'password'; codeInput.autocomplete = 'off'; codeInput.className = inputClass || ''; codeInput.setAttribute('aria-label', 'Claude sign-in code'); codeInput.placeholder = 'Paste code only if Claude asks';
+  const codeSubmit = document.createElement('button'); codeSubmit.type = 'submit'; codeSubmit.className = buttonClass; codeSubmit.textContent = 'Submit code';
+  manual.append(codeInput, codeSubmit);
+  manual.addEventListener('submit', event => { event.preventDefault(); const value = codeInput.value; codeInput.value = ''; if (value && submitCode) void perform(() => submitCode(state, value)); });
+  root.append(status, actions, handoff, code, manual); host.append(root);
+  let state = { status: 'idle' }, account = null, timer, disposed = false, busy = false, succeeded = false, version = 0, pushed = 0, transportError = '';
+  const current = () => !disposed && root.isConnected && isCurrent();
+  const pending = () => ['starting', 'pending'].includes(state.status);
+  function button(label, work) {
+    const el = document.createElement('button'); el.type = 'button'; el.className = buttonClass; el.textContent = label; el.disabled = busy;
+    el.addEventListener('click', () => void perform(work)); actions.append(el); return el;
+  }
+  function apply(result) {
+    if (result?.state) { state = result.state; if (pending()) succeeded = false; }
+    if (result?.account) {
+      account = result.account;
+      if (account.loggedIn === false && state.status === 'success') state = { ...state, status: 'idle' };
+      onAccountChange(account);
+    }
+  }
+  function render() {
+    actions.replaceChildren();
+    const signedIn = typeof providerSignedIn === 'function' ? providerSignedIn(account) === true : account?.loggedIn === true;
+    // Asked on every render (the caller also learns the state); used only while no sign-in is under way.
+    const own = typeof statusText === 'function' ? statusText(account, state) : '';
+    status.textContent = transportError || state.error || (['starting', 'pending', 'cancelled'].includes(state.status) ? '' : own) || ({ starting: 'Starting sign-in…', pending: 'Finish sign-in in your browser, then return here.', success: `Signed in${account?.email ? ` as ${account.email}` : ''}.`, cancelled: 'Sign-in cancelled.' }[state.status])
+      || (signedIn ? `Signed in${account.email ? ` as ${account.email}` : ''}.` : 'Not signed in.');
+    if (pending()) button('Cancel sign-in', () => cancel(state));
+    else button(signedIn ? `Sign in again with ${provider}` : `Sign in with ${provider}`, () => start());
+    button('Refresh', async () => {
+      const result = await refresh();
+      return result;
+    });
+    const url = providerAuthUrl(state.authUrl || state.verificationUrl);
+    handoff.hidden = !pending() || !url;
+    if (url && pending()) handoff.href = url; else handoff.removeAttribute('href');
+    code.hidden = !pending() || !state.userCode;
+    code.textContent = state.userCode ? `Enter this code: ${state.userCode}` : '';
+    manual.hidden = !submitCode || state.status !== 'pending'; codeSubmit.disabled = busy;
+    if (manual.hidden) codeInput.value = '';
+  }
+  async function perform(work) {
+    if (busy || !current()) return;
+    busy = true; transportError = ''; const epoch = ++version; const push = pushed; clearTimeout(timer); render();
+    try {
+      const result = await work();
+      if (!current() || epoch !== version) return;
+      // Native notifications may have completed while a request was in flight.
+      if (push === pushed) apply(result);
+    } catch (error) { if (current() && epoch === version) transportError = error.message || 'Sign-in could not continue. Try again.'; }
+    finally {
+      busy = false;
+      if (current() && epoch === version) {
+        render();
+        schedule();
+      }
+    }
+  }
+  function schedule() {
+    clearTimeout(timer);
+    if (!current()) return;
+    if (pending()) timer = setTimeout(poll, pollMs);
+    else if (state.status === 'success' && !succeeded) {
+      succeeded = true;
+      void perform(async () => { const result = await refresh(); await onSuccess(result); return result; });
+    }
+  }
+  async function poll() {
+    if (!current()) return;
+    const epoch = version, push = pushed;
+    try { const result = await read(); if (!current() || epoch !== version || push !== pushed) return; apply(result); render(); schedule(); }
+    catch (error) { if (current()) { status.textContent = error.message || 'Could not refresh sign-in. Use Refresh to retry.'; } }
+  }
+  render();
+  void perform(() => refresh());
+  return { update(result) { if (!current()) return; ++pushed; apply(result); render(); if (!busy) schedule(); }, dispose() { disposed = true; ++version; clearTimeout(timer); root.remove(); } };
+}

package/neural-interface/public/shared/ui-provider-terminal-auth.js

@@ -0,0 +1,223 @@
+import { apiKeyErrorText } from './account-view.js';
+
+export const PROVIDER_TERMINAL_AUTH_STYLES = `
+  .provider-auth-required { padding: 0 !important; }
+  .provider-auth-required::before,
+  .provider-auth-required > :not([data-provider-logged-out]) { display: none !important; }
+  [data-provider-logged-out] {
+    display: flex; flex: 1; min-height: 100%; box-sizing: border-box;
+    flex-direction: column; align-items: center; justify-content: center;
+    gap: 12px; padding: 24px; text-align: center;
+    color: var(--cxp-text-2, var(--t-primary)); font: inherit;
+  }
+  [data-provider-logged-out][hidden] { display: none; }
+  .provider-auth-logo { width: 48px; height: 48px; color: var(--cxp-text, var(--t-bright)); }
+  .provider-auth-logo svg { width: 100%; height: 100%; }
+  .provider-auth-message { margin: 0; font-size: var(--cxp-fs-md, 13px); }
+  .provider-auth-button {
+    border: none; border-radius: var(--cxp-radius-sm, var(--r-small)); padding: 8px 12px;
+    background: var(--cxp-solid, var(--s-active)); color: var(--cxp-on-solid, var(--t-bright));
+    font: inherit; font-size: var(--cxp-fs-sm, 12px); font-weight: 500; cursor: pointer;
+  }
+  .provider-auth-button:disabled { opacity: .6; cursor: default; }
+  .provider-auth-button:focus-visible { outline: 2px solid var(--cxp-focus, var(--t-bright)); outline-offset: 2px; }
+  .provider-auth-secondary {
+    background: transparent; color: var(--cxp-text-2, var(--t-muted));
+    border: 1px solid var(--cxp-border, var(--b-light));
+  }
+  .provider-auth-key { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
+  .provider-auth-key[hidden], .provider-auth-secondary[hidden] { display: none; }
+  .provider-auth-key input {
+    min-width: 0; box-sizing: border-box; width: 100%; padding: 8px 12px;
+    border: 1px solid var(--cxp-border, var(--b-light)); border-radius: var(--cxp-radius-sm, var(--r-small));
+    background: var(--cxp-surface-1, var(--s-subtle)); color: var(--cxp-text, var(--t-bright)); font: inherit;
+  }
+  .provider-auth-key input:focus-visible { outline: 2px solid var(--cxp-focus, var(--t-bright)); outline-offset: 2px; }
+  .provider-auth-key-actions { display: flex; justify-content: center; gap: 8px; }
+  .provider-auth-error { margin: 0; color: var(--cxp-danger, var(--t-muted)); font-size: var(--cxp-fs-sm, 12px); }
+`;
+
+async function terminalRequest(provider, accountId, method = 'GET') {
+  const response = await fetch(`/api/provider-panel-auth/${provider}/${encodeURIComponent(accountId)}/terminal`, {
+    method, cache: 'no-store', ...(method === 'POST' ? { headers: { 'Content-Type': 'application/json' }, body: '{}' } : {}),
+  });
+  const data = await response.json();
+  if (!response.ok || data.error) throw new Error(data.error || 'Could not open the sign-in terminal.');
+  return data.terminal;
+}
+
+// Open a provider's own sign-in for an account in SynaBun's terminal (the guarded route picks the
+// CLI, the account's config directory and its environment; no command text leaves the page).
+export async function startProviderTerminalLogin(provider, accountId, label = '') {
+  const terminal = await terminalRequest(provider, accountId, 'POST');
+  if (terminal.status === 'error') throw new Error(terminal.error || 'Could not open the sign-in terminal.');
+  const { openProviderLoginTerminal } = await import('./ui-terminal.js');
+  await openProviderLoginTerminal(terminal.sessionId, label || `${provider === 'claude' ? 'Claude' : 'Codex'} sign-in`);
+  return terminal;
+}
+
+// Only local, allowlisted messages enter the DOM; never provider error text (account-view.js words them).
+function apiKeyErrorMessage(provider, code) {
+  return apiKeyErrorText(provider, code);
+}
+
+// `target` is ignored by servers since keys are kept per account (an older page sent its connection's).
+export async function providerApiKeyRequest(provider, accountId, key, target) {
+  const failure = code => Object.assign(new Error(apiKeyErrorMessage(provider, code)), { code });
+  try {
+    let response;
+    try {
+      response = await fetch(`/api/provider-panel-auth/${provider}/${encodeURIComponent(accountId)}/api-key`, {
+        method: 'POST', cache: 'no-store', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key, ...(target ? { target } : {}) }),
+      });
+    } catch { throw failure('server_unreachable'); }
+    const data = await response.json().catch(() => null);
+    if (!response.ok) {
+      let code = { 400: 'invalid_key', 401: 'key_rejected', 403: 'permission_denied', 404: 'account_unavailable', 409: 'account_busy', 413: 'invalid_key', 503: 'verification_unavailable' }[response.status] || 'storage_failed';
+      if (response.status === 400 && data?.code === 'oauth_token') code = 'oauth_token';
+      if (response.status === 503 && data?.code === 'verification_unreachable') code = 'verification_unreachable';
+      throw failure(code);
+    }
+    if (data?.ok !== true) throw failure('storage_failed');
+  } finally { key = null; }
+}
+
+// Auth is unknown until a provider says otherwise; a failed read never means logout.
+// `message` (optional): the line under the logo (default "Sign in to Claude to continue.").
+// `moreAction` (optional): { label, run } — one more quiet button under the others (the header account menu).
+export function mountProviderTerminalAuth({ host, provider, accountId, logo, readAccount, isCurrent = () => true, message: messageText = '', moreAction = null,
+  onSignedIn = () => {}, requestApiKey = providerApiKeyRequest, pollMs = 3000, requestTerminal = terminalRequest,
+  openTerminal = async terminal => {
+    const { openProviderLoginTerminal } = await import('./ui-terminal.js');
+    await openProviderLoginTerminal(terminal.sessionId, `${provider === 'claude' ? 'Claude' : 'Codex'} sign-in`);
+  } }) {
+  if (!document.getElementById('provider-terminal-auth-styles')) {
+    const style = document.createElement('style'); style.id = 'provider-terminal-auth-styles';
+    style.textContent = PROVIDER_TERMINAL_AUTH_STYLES; document.head.append(style);
+  }
+  const root = document.createElement('div'); root.dataset.providerLoggedOut = provider;
+  const icon = document.createElement('div'); icon.className = 'provider-auth-logo'; icon.setAttribute('aria-hidden', 'true');
+  icon.innerHTML = logo; // A bundled provider SVG supplied by the owning panel.
+  const message = document.createElement('p'); message.className = 'provider-auth-message';
+  message.textContent = messageText || `Sign in to ${provider === 'claude' ? 'Claude' : 'Codex'} to continue.`;
+  const button = document.createElement('button'); button.type = 'button'; button.className = 'provider-auth-button';
+  const error = document.createElement('p'); error.className = 'provider-auth-error'; error.setAttribute('role', 'status'); error.setAttribute('aria-live', 'polite');
+  const secondary = document.createElement('button'); secondary.type = 'button';
+  secondary.className = 'provider-auth-button provider-auth-secondary'; secondary.textContent = 'Use an API key instead';
+  secondary.setAttribute('aria-expanded', 'false');
+  const form = document.createElement('form'); form.className = 'provider-auth-key'; form.hidden = true;
+  const input = document.createElement('input'); input.type = 'password'; input.autocomplete = 'off'; input.spellcheck = false;
+  input.setAttribute('aria-label', 'API key'); input.placeholder = 'Paste API key'; input.required = true;
+  const actions = document.createElement('div'); actions.className = 'provider-auth-key-actions';
+  const save = document.createElement('button'); save.type = 'submit'; save.className = 'provider-auth-button provider-auth-secondary'; save.textContent = 'Save';
+  const cancel = document.createElement('button'); cancel.type = 'button'; cancel.className = 'provider-auth-button provider-auth-secondary'; cancel.textContent = 'Cancel';
+  actions.append(save, cancel); form.append(input, actions);
+  root.append(icon, message, button, secondary, form, error);
+  if (moreAction?.label && typeof moreAction.run === 'function') {
+    const more = document.createElement('button'); more.type = 'button';
+    more.className = 'provider-auth-button provider-auth-secondary provider-auth-more'; more.textContent = moreAction.label;
+    more.addEventListener('click', () => { if (current()) moreAction.run(); });
+    root.append(more);
+  }
+  let loggedIn, terminal = null, busy = false, disposed = false, suspended = false, checking = false, unattached = false, timer, push = 0, issue = '', keyOpen = false, keyBusy = false;
+  const current = () => !disposed && isCurrent();
+  const pending = () => busy || (!unattached && ['starting', 'pending'].includes(terminal?.status));
+  function render() {
+    if (!current()) return;
+    const visible = loggedIn === false && !suspended;
+    root.hidden = !visible; host.classList.toggle('provider-auth-required', visible);
+    if (visible) { if (root.parentNode !== host) host.append(root); }
+    else root.remove();
+    button.disabled = pending() || keyBusy;
+    secondary.hidden = keyOpen; secondary.disabled = pending() || keyBusy;
+    secondary.setAttribute('aria-expanded', String(keyOpen));
+    form.hidden = !keyOpen;
+    input.disabled = save.disabled = cancel.disabled = keyBusy || pending();
+    save.textContent = keyBusy ? 'Saving…' : 'Save';
+    form.setAttribute('aria-busy', String(keyBusy));
+    button.textContent = pending() ? 'Finish signing in in the terminal' : `Sign in with ${provider === 'claude' ? 'Claude' : 'Codex'}`;
+    error.textContent = issue; error.hidden = !issue;
+  }
+  function apply(account) {
+    if (typeof account?.loggedIn !== 'boolean') return;
+    const was = loggedIn; loggedIn = account.loggedIn;
+    if (loggedIn) {
+      terminal = null; issue = ''; suspended = false; unattached = false; keyOpen = false; input.value = '';
+      if (was === false) void onSignedIn();
+    }
+  }
+  function schedule() {
+    clearTimeout(timer);
+    if (current()) timer = setTimeout(() => void refresh(), pending() ? pollMs : pollMs * 5);
+  }
+  async function refresh() {
+    if (!current() || checking) return;
+    if (busy || keyBusy) { schedule(); return; }
+    checking = true; const epoch = push;
+    try {
+      const account = await readAccount();
+      if (!current() || epoch !== push) return;
+      apply(account);
+      if (loggedIn === false) {
+        const next = await requestTerminal(provider, accountId);
+        if (!current() || epoch !== push) return;
+        const ended = terminal?.sessionId && terminal.sessionId === next.sessionId && ['exited', 'error'].includes(next.status);
+        terminal = next;
+        if (ended || next.status === 'error') issue = next.error || 'Sign-in finished without connecting. Try again.';
+      }
+    } catch {
+      if (current() && epoch === push && pending()) {
+        issue = 'Could not check sign-in. Try again.'; terminal = null;
+      }
+    } finally { checking = false; if (current()) { render(); schedule(); } }
+  }
+  button.addEventListener('click', async () => {
+    if (!current() || pending() || keyBusy || loggedIn !== false) return;
+    input.value = ''; keyOpen = false;
+    busy = true; issue = ''; unattached = false; ++push; clearTimeout(timer); render();
+    try {
+      const next = await requestTerminal(provider, accountId, 'POST');
+      if (!current() || loggedIn === true) return;
+      terminal = next;
+      if (next.status === 'error') throw new Error(next.error);
+      await openTerminal(next);
+    } catch (failure) {
+      if (current()) { issue = failure.message || 'Could not open the sign-in terminal.'; unattached = true; }
+    } finally { busy = false; if (current()) { render(); schedule(); } }
+  });
+  secondary.addEventListener('click', () => {
+    if (!current() || pending() || keyBusy) return;
+    keyOpen = true; issue = ''; render(); input.focus?.();
+  });
+  cancel.addEventListener('click', () => {
+    if (keyBusy) return;
+    input.value = ''; keyOpen = false; issue = ''; render(); secondary.focus?.();
+  });
+  form.addEventListener('submit', async event => {
+    event.preventDefault();
+    let key = input.value; input.value = '';
+    if (!current() || pending() || keyBusy || loggedIn !== false || !key) { key = null; return; }
+    keyBusy = true; issue = 'Saving API key…'; ++push; clearTimeout(timer); render();
+    let saved = false;
+    try {
+      await requestApiKey(provider, accountId, key);
+      key = null; saved = true;
+      if (!current()) return;
+      const epoch = push, account = await readAccount();
+      if (!current() || epoch !== push) return;
+      apply(account);
+      if (loggedIn !== true) issue = 'Key saved. Checking sign-in…';
+    } catch (failure) {
+      if (current() && loggedIn !== true) issue = saved ? 'Key saved. Could not refresh sign-in. Reload the panel.' : apiKeyErrorMessage(provider, failure.code);
+    } finally { key = null; keyBusy = false; if (current()) { render(); schedule(); } }
+  });
+  const observer = new MutationObserver(() => { if (current() && loggedIn === false && !suspended && root.parentNode !== host) render(); });
+  observer.observe(host, { childList: true });
+  render(); void refresh();
+  return {
+    refresh,
+    update(account) { if (!current()) return; ++push; apply(account); render(); schedule(); },
+    suspend() { suspended = true; input.value = ''; render(); },
+    dispose() { input.value = ''; disposed = true; ++push; clearTimeout(timer); observer.disconnect(); host.classList.remove('provider-auth-required'); root.remove(); },
+  };
+}

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

@@ -9,7 +9,7 @@
 // ═══════════════════════════════════════════
 
 import { emit, on } from './state.js';
-import { getSynabunUpdateData, openSynabunUpdateModal, forceCheckSynabunUpdate } from './ui-update.js';
+import { getSynabunUpdateData, openSynabunUpdateModal, syncSynabunUpdateData, synabunUpdateMeta } from './ui-update.js';
 import { getToolUpdateData, runToolUpdate, TOOL_LABELS } from './ui-tool-updates.js';
 import { openSettingsModal } from './ui-settings.js';
 import { getProviderMeta } from './provider-icons.js';
@@ -222,7 +222,7 @@ function computeUpdates() {
       key: 'synabun',
       title: 'SynaBun',
       subtitle: `v${synabun.current} → v${synabun.latest}`,
-      meta: synabun.source ? `Source: ${synabun.source}` : '',
+      meta: synabunUpdateMeta(synabun),
       action: 'Open updater',
       severity: 'normal',
     });
@@ -308,6 +308,12 @@ async function refreshRulesStatus() {
   emitNotificationsUpdate();
 }
 
+// Inside the desktop app its updater reports on its own schedule (ui-update.js): the drawer and its count follow.
+on('synabun-update:changed', () => {
+  emitNotificationsUpdate();
+  if (_panel) render();
+});
+
 // Settings > Setup re-reads the status after every rules action and passes it on.
 on('rules:changed', (status) => {
   _rulesStatus = status?.ok ? status : null;
@@ -894,7 +900,7 @@ async function refreshSessions() {
     emitLoopsUpdate();
     // Refresh notification feed alongside session/loop data
     refreshRulesStatus().then(() => render()).catch(() => {});
-    forceCheckSynabunUpdate().then(() => render()).catch(() => {});
+    syncSynabunUpdateData().then(() => render()).catch(() => {});
     render();
   } catch {}
 }

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

@@ -2,6 +2,7 @@ import { mountMemoryMaintenance } from './ui-memory-maintenance.js';
 import { buildJudgmentsTab, wireJudgmentsTab } from './ui-judgments.js';
 import { buildWhatsAppTab, wireWhatsAppTab } from './ui-whatsapp.js';
 import { buildCodeEditorTab, wireCodeEditorTab } from './settings/settings-code-editor-pane.js';
+import { buildAboutTab, wireAboutTab } from './settings/settings-about-pane.js';
 import { SETTINGS_GROUPS, SETTINGS_PAGES, DEFAULT_SETTINGS_PAGE, pageKeys, getSettingsPage, resolveSettingsTarget, homeOfControl } from './settings/settings-ia.js';
 import * as kit from './settings/settings-kit.js';
 import { RULES_HOST_LABELS, describeRulesHost, describeRulesInstall, describeRulesInstallAll } from './settings/settings-rules.js';
@@ -10,6 +11,12 @@ import { readGreetingStatus, describeGreeting, describeGreetingSaveFailure } fro
 import { renderGreeting, clearGreeting } from './greeting/greeting-card.js';
 import { createTunnelCard, drawInto, mcpKeyNeededText, readTunnel } from './ui-tunnel.js';
 import { remoteMcpAddress } from './tunnel-view.js';
+import { recheckCliStatus, getCliStatus, addCliToPath } from './cli-status.js';
+import { cliInstallText, setCliInstallTranslator } from './cli-install-view.js';
+setCliInstallTranslator((key, params) => kit.tx(`cliInstall.${key}`, params));
+import { setGitBashTranslator } from './git-bash-view.js';
+import { gitBashRowHtml, wireGitBashRow } from './ui-git-bash.js';
+setGitBashTranslator((key, params) => kit.tx(`gitBash.${key}`, params));
 import { initI18n, isReady as i18nReady, SUPPORTED_LOCALES, LOCALE_NAMES, SYSTEM_LOCALE, getLocale, getLocaleChoice, setLocaleChoice, getSystemLocale, englishTranslator, loadEnglishTranslator } from './i18n.js';
 import { wireSettingsShell, wireSettingsSearch, collectSearchRows, revealSettingsTarget, followSettingsTarget, onSettingsTakeover, applyStoredSections, storeSectionState } from './settings/settings-shell.js';
 import { buildSettingsSearchIndex } from './settings/settings-search.js';
@@ -18,7 +25,7 @@ import { buildSettingsSearchIndex } from './settings/settings-search.js';
 // ═══════════════════════════════════════════
 //
 // The most complex shared UI module. Builds a floating settings panel with
-// twelve task pages in five groups (./settings/settings-ia.js). A page is a
+// thirteen task pages in six groups (./settings/settings-ia.js). A page is a
 // title, a one-line purpose and section cards (./settings/settings-kit.js);
 // each builder below owns one pane of a page. Variant-registered tabs (the 2D
 // Graphics tab) join the Appearance page. Old tab ids still open the right page.
@@ -69,6 +76,7 @@ const TAB_ICONS = {
   whatsapp: '<svg viewBox="0 0 24 24"><path d="M3.5 20.5l1.3-3.9A8.5 8.5 0 1 1 8 19.6z"/><path d="M9.5 8.5c.4 2.6 2.9 5.2 5.5 5.6l1-1.2 1.6.8c-.3 1-1.1 1.6-2.1 1.5-2.9-.3-5.8-3.2-6.1-6.1-.1-1 .5-1.8 1.5-2.1l.8 1.6z"/></svg>',
   morelogin: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M12 11.5a1 1 0 0 0-1 1c0 1.8-.3 3.6-1.2 5.2"/><path d="M7.8 14.5a8 8 0 0 0-.6 4.3"/><path d="M12 7.5a4.5 4.5 0 0 1 4.5 4.5c0 .6 0 1.2-.1 1.8"/><path d="M5 9.2a7 7 0 0 1 11-1.9"/><path d="M15 13a3 3 0 0 1-3 3"/></svg>',
   editor: '<svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/><line x1="13.5" y1="5" x2="10.5" y2="19"/></svg>',
+  about: '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="11"/><line x1="12" y1="7.5" x2="12.01" y2="7.5"/></svg>',
 };
 
 // ── Shared icon constants ──
@@ -1105,6 +1113,7 @@ function buildTerminalTab(cliConfig) {
                     <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                     ${kit.L('CLI002')}
                   </button>
+                  ${p.id === 'gemini' ? '' : `<button type="button" class="cli-detect-btn" data-cli-add-path="${p.id}" hidden>${escapeHtml(cliInstallText('addPath'))}</button>`}
                   <span class="cli-path-status${isDefault ? '' : ' custom'}" id="cli-status-${p.id}" ${kit.inv('CLI007')}>${kit.te(isDefault ? 'settings.redesign.terminal.cliStatus.default' : 'settings.redesign.terminal.cliStatus.custom')}</span>
                 </div>
                 <div class="stg-help" id="cli-path-${p.id}-help">${kit.H(p.inv)}</div>
@@ -1129,9 +1138,11 @@ function buildTerminalTab(cliConfig) {
           <p class="stg-help">${kit.th('settings.redesign.terminal.pathsIntro', { code: '<code class="stg-code">wsl</code>' })}</p>
           ${kit.help('CLI002', { forId: 'cli-paths-detect' })}
           ${cliProfiles.map(pathRow).join('')}
+          ${gitBashRowHtml()}
           <button type="button" class="stg-action-btn stg-save-btn" id="cli-paths-save" ${kit.inv('CLI006')} aria-describedby="cli-paths-save-help">
             ${kit.L('CLI006')}
           </button>
+          <button type="button" class="cli-detect-btn" id="cli-path-diagnostics">${escapeHtml(cliInstallText('copyPathDiagnostics'))}</button>
           ${kit.help('CLI006', { forId: 'cli-paths-save' })}
 
           ${kit.subhead(kit.te('settings.redesign.terminal.examples'))}
@@ -3309,6 +3320,7 @@ export async function openSettingsModal(options = {}) {
             skins: buildSkinsTab(skinsData.skins, skinsData.active),
             interface: buildInterfaceTab(),
             icons: buildIconsTab(customIconsData),
+            about: buildAboutTab(),
           }, variantTabs, initialPage)}
         </div>
       </div>
@@ -4398,6 +4410,9 @@ export async function openSettingsModal(options = {}) {
   // ── Code editor: AI autocomplete (loads and saves itself) ──
   wireCodeEditorTab(overlay);
 
+  // ── About: version, links, system and dependencies (loads itself the first time its page is shown) ──
+  wireAboutTab(overlay, { toast: showCCToast });
+
   // ── Discord tab handlers ──
   {
     // Token save
@@ -4539,6 +4554,36 @@ export async function openSettingsModal(options = {}) {
     const cliDefaults = { 'claude-code': 'claude', 'codex': 'codex', 'gemini': 'gemini', 'opencode': 'opencode' };
     const cliProfileIds = Object.keys(cliDefaults);
 
+    const pathButtons = overlay.querySelectorAll('[data-cli-add-path]');
+    const showPathAction = (tool, info) => {
+      const button = overlay.querySelector(`[data-cli-add-path="${tool}"]`);
+      if (button) button.hidden = !(info?.state === 'installed' && info.pathStatus?.canAdd === true);
+    };
+    pathButtons.forEach(button => {
+      const tool = button.dataset.cliAddPath;
+      getCliStatus(tool).then(info => showPathAction(tool, info)).catch(() => {});
+      button.addEventListener('click', async () => {
+        button.disabled = true; button.textContent = cliInstallText('addingPath');
+        try {
+          const result = await addCliToPath(tool);
+          showCCToast(cliInstallText('doneAddedToPath', { dir: result.dir }) + (result.warning ? ` ${result.warning}` : ''));
+          for (const pathButton of pathButtons) getCliStatus(pathButton.dataset.cliAddPath).then(info => showPathAction(pathButton.dataset.cliAddPath, info)).catch(() => {});
+        } catch (error) { showCCToast(cliInstallText('pathFailed', { error: error.message })); }
+        finally { button.disabled = false; button.textContent = cliInstallText('addPath'); }
+      });
+    });
+    // Windows: the Git Bash every Claude Code SynaBun starts gets (ui-git-bash.js; hidden on macOS and Linux).
+    wireGitBashRow(overlay.querySelector('#cli-git-bash'));
+    overlay.querySelector('#cli-path-diagnostics')?.addEventListener('click', async () => {
+      try {
+        const response = await fetch('/api/cli/path');
+        const diagnostics = await response.json();
+        if (!response.ok) throw new Error(diagnostics.error || `HTTP ${response.status}`);
+        await navigator.clipboard.writeText(JSON.stringify(diagnostics, null, 2));
+        showCCToast(cliInstallText('copied'));
+      } catch (error) { showCCToast(error.message); }
+    });
+
     // Detect buttons
     overlay.querySelectorAll('.cli-detect-btn[data-cli-detect]').forEach(btn => {
       btn.addEventListener('click', async () => {
@@ -4552,9 +4597,13 @@ export async function openSettingsModal(options = {}) {
             body: '{}',
           });
           const data = await res.json();
-          if (data.ok && data.found && data.path) {
+          showPathAction(profileId, data);
+          if (data.ok && data.found && data.path && data.state === 'broken') {
+            // Found, but it does not start: not put in the field, so a broken path is never saved by accident.
+            showCCToast(kit.tx('settings.redesign.terminal.detectionFailed', { message: data.error ? `${data.path}: ${data.error}` : data.path }));
+          } else if (data.ok && data.found && data.path) {
             input.value = data.path;
-            showCCToast(kit.tx('settings.redesign.terminal.found', { path: data.path }));
+            showCCToast(kit.tx('settings.redesign.terminal.found', { path: data.version ? `${data.path} (${data.version})` : data.path }));
           } else {
             showCCToast(kit.tx('settings.redesign.terminal.cliNotFoundInPath'));
           }
@@ -4594,6 +4643,9 @@ export async function openSettingsModal(options = {}) {
               }
             });
             showCCToast(kit.tx('settings.redesign.terminal.cliPathsSaved'));
+            // The panels' CLI banners and the update badges follow the paths just saved (one forced
+            // re-check answers for every CLI).
+            recheckCliStatus('claude-code').catch(() => {});
           } else {
             alert(data.error || kit.tx('settings.redesign.terminal.failedToSave'));
           }

package/neural-interface/public/shared/ui-sidepanel-sessions.js

@@ -99,7 +99,9 @@ function show(entry) {
     entry.unregister = registerSidepanel({ owner: entry.id, layoutKey: entry.id, provider: entry.provider,
       element, header, actions, buttonClass: 'sp-session-button', applyVisibility: () => renderPill(entry) });
     if (!storage.getItem(`synabun-sidepanel-layout-${entry.id}`)) detachSidepanel(entry.id);
-    frame.src = `/sidepanel-session.html?provider=${entry.provider}`;
+    // A language the page address forces (?lang=, showcase captures) holds in the session's frame too.
+    const lang = new URLSearchParams(window.location.search).get('lang');
+    frame.src = `/sidepanel-session.html?provider=${entry.provider}${lang ? `&lang=${encodeURIComponent(lang)}` : ''}`;
   }
   setSidepanelVisible(entry.id, true);
 }

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

@@ -118,7 +118,13 @@ const SYNC_HANDLERS = {
   'assistant:permission-resolved': (msg) => emit('sync:assistant:permission-resolved', msg),
   'assistant:focus':               (msg) => emit('sync:assistant:focus', msg),
   'assistant:accounts-changed':    (msg) => emit('sync:assistant:accounts-changed', msg),
+  // Claude accounts (lib/claude-accounts.js): any account's state changed — signed in or out, a key saved or removed, its mode, renamed, added, removed
+  'claude:accounts-changed':       (msg) => emit('sync:claude:accounts-changed', msg),
+  // Codex accounts (lib/codex-accounts.js): the same, for every Codex account
+  'codex:accounts-changed':        (msg) => emit('sync:codex:accounts-changed', msg),
   'assistant:mailbox':             (msg) => emit('sync:assistant:mailbox', msg),
+  'assistant:budget':              (msg) => emit('sync:assistant:budget', msg),
+  'assistant:budget-changed':      (msg) => emit('sync:assistant:budget-changed', msg),
   'assistant:cost':                (msg) => emit('sync:assistant:cost', msg),
   'assistant:desktop':             (msg) => emit('sync:assistant:desktop', msg),
   'assistant:desktop-setup':       (msg) => emit('sync:assistant:desktop-setup', msg),

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

@@ -6289,6 +6289,23 @@ export function openTerminalPanel(profile) {
   emit('terminal:open', { profile });
 }
 
+// Attach only: the guarded provider-auth route has already chosen and started
+// the CLI. No command text is accepted from either panel.
+export async function openProviderLoginTerminal(sessionId, label) {
+  if (!/^[a-f0-9]{32}$/.test(sessionId || '')) throw new Error('Invalid sign-in terminal session.');
+  await _whenOpenIdle();
+  let session = _sessions.find(s => s.id === sessionId);
+  if (!session) session = await openSession('shell', null, sessionId, { label });
+  if (!session) throw new Error('Could not attach the sign-in terminal. Try again.');
+  showPanel();
+  const index = _sessions.indexOf(session);
+  if (_detachedTabs.has(sessionId)) {
+    bringTabToFront(sessionId);
+  } else if (index >= 0) switchToSession(index);
+  session.term?.focus();
+  return session;
+}
+
 // ── Diagnostics (no UI) ──
 // window.__synabunTermStats(): keystroke → echo-parsed latency, bytes handed
 // to xterm but not yet parsed, flow-control acks pending, renderer state and

package/neural-interface/public/shared/ui-tool-updates.js

@@ -52,6 +52,11 @@ const SOURCE_LABELS = {
   'winget': 'winget',
   'scoop': 'Scoop',
   'choco': 'Chocolatey',
+  'mise': 'mise',
+  'asdf': 'asdf',
+  'cargo': 'Cargo',
+  'snap': 'Snap',
+  'system': 'your system package manager',
 };
 
 function sourceLabel(src) {