synabun 2.0.5 → 2.0.7

package/neural-interface/public/shared/ui-cli-banner.js

@@ -0,0 +1,355 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — the CLI banner of the side panels (page side)
+// ═══════════════════════════════════════════
+//
+// One banner for the Claude Code, Codex and OpenCode panels, above their
+// transcript, whenever their CLI is not usable: not installed (with Install,
+// which runs the vendor's official installer on the server, the command to run
+// by hand and the install guide), being installed (its steps and the
+// installer's last lines), failed to install, or found but failed to start
+// (with the error it gave). Each panel keeps its own look through a class
+// prefix: cp-cli-banner* (Claude), cxp-cli-banner* (Codex), ocp-cli-banner*
+// (OpenCode); the panel element gets `<prefix>-cli-blocked` while sending is
+// off.
+//
+// What it says is cli-install-view.js (DOM-free, tested under node); the data
+// and the install stream are cli-status.js. A panel mounts one controller:
+//
+//   const cli = mountCliBanner({ toolKey: 'codex', prefix: 'cxp',
+//     panel: () => panelEl, anchor: () => messagesContainer,
+//     onBlockedChange: (blocked) => syncSendButton() });
+//   cli.refresh();         when the panel is shown
+//   cli.blocked();         before a send
+//   cli.nudge();           a send that was held back
+//   cli.flagFailure(text); a session could not start the CLI
+
+import { subscribeCliStatus, recheckCliStatus, getCliDocUrl, getCliInstallCommand, getCliLabel, installCli, followCliInstall, getCliInstallJobs, addCliToPath } from './cli-status.js';
+import { cliBannerView, cliInstallText, cliStateOf, reduceInstallJob, setCliInstallTranslator, INSTALLABLE_CLIS } from './cli-install-view.js';
+import { t } from './i18n.js';
+
+setCliInstallTranslator((key, params) => t(`cliInstall.${key}`, params));
+
+/** How long the note about where an install put the CLI stays, when it has one. */
+const DONE_NOTICE_MS = 12000;
+const NUDGE_MS = 700;
+
+/**
+ * @param {object} o
+ * @param {'claude-code' | 'codex' | 'opencode'} o.toolKey
+ * @param {'cp' | 'cxp' | 'ocp'} o.prefix the panel's class prefix
+ * @param {() => HTMLElement | null} o.panel the panel element (gets `<prefix>-cli-blocked`)
+ * @param {() => HTMLElement | null} o.anchor the banner goes right before this element (the transcript's container)
+ * @param {(blocked: boolean, view: object) => void} [o.onBlockedChange] sending was held back / let go
+ * @param {number} [o.doneNoticeMs]
+ */
+export function mountCliBanner({ toolKey, prefix, panel, anchor, onBlockedChange = () => {}, doneNoticeMs = DONE_NOTICE_MS } = {}) {
+  const p = String(prefix || 'cp');
+  let info = null;        // this CLI in the latest answer of /api/system/tool-versions (null: none yet)
+  let forced = null;      // { reason }: a session could not start it, and the server was not asked again yet
+  let job = null;         // the install under way or just ended (cli-install-view.js reduceInstallJob)
+  let installing = false;
+  let addingPath = false;
+  let pathError = '';
+  let looked = false;     // asked whether the server is already installing it since it went missing
+  let el = null;
+  let doneTimer = null;
+  let nudgeTimer = null;
+  let lastBlocked = null;
+  let destroyed = false;
+
+  const view = () => cliBannerView({
+    toolKey,
+    label: getCliLabel(toolKey),
+    info,
+    forced,
+    job,
+    addingPath, pathError,
+    guideUrl: getCliDocUrl(toolKey),
+    installCommand: getCliInstallCommand(toolKey),
+  }, { t: cliInstallText });
+
+  const cls = (name) => `${p}-cli-banner-${name}`;
+
+  function build() {
+    const root = document.createElement('div');
+    root.className = `${p}-cli-banner`;
+    root.dataset.cliTool = toolKey;
+    root.innerHTML = `
+      <div class="${cls('icon')}" aria-hidden="true"></div>
+      <div class="${cls('text')}">
+        <div class="${cls('title')}"></div>
+        <div class="${cls('body')}"></div>
+        <div class="${cls('command')}" hidden><code></code><button class="${cls('copy')}" type="button"></button></div>
+        <div class="${cls('error')}" hidden><code></code></div>
+        <div class="${cls('note')}" hidden></div>
+        <div class="${cls('progress')}" hidden><div class="${cls('step')}"></div><div class="${cls('bar')}" hidden><span></span></div></div>
+        <pre class="${cls('log')}" hidden></pre>
+        <div class="${cls('actions')}">
+          <button class="${cls('install')}" type="button" hidden></button>
+          <a class="${cls('link')}" target="_blank" rel="noopener noreferrer"></a>
+          <button class="${cls('recheck')}" type="button"></button>
+          <button class="${cls('path')}" type="button" hidden></button>
+          <button class="${cls('dismiss')}" type="button" hidden></button>
+        </div>
+      </div>
+    `;
+    root.querySelector(`.${cls('install')}`).addEventListener('click', () => { startInstall(); });
+    root.querySelector(`.${cls('recheck')}`).addEventListener('click', () => { recheck(); });
+    root.querySelector(`.${cls('path')}`).addEventListener('click', () => { addPath(); });
+    root.querySelector(`.${cls('dismiss')}`).addEventListener('click', () => { clearDone(); });
+    root.querySelector(`.${cls('copy')}`).addEventListener('click', async (event) => {
+      const button = event.currentTarget;
+      const command = root.querySelector(`.${cls('command')} code`)?.textContent || '';
+      if (!command) return;
+      try { await navigator.clipboard.writeText(command); } catch { return; }
+      button.textContent = cliInstallText('copied');
+      setTimeout(() => { if (button.isConnected) button.textContent = cliInstallText('copy'); }, 1500);
+    });
+    return root;
+  }
+
+  function place() {
+    const before = anchor?.();
+    if (!before || !before.parentNode) return false;
+    if (!el) el = build();
+    if (el.parentNode !== before.parentNode || el.nextSibling !== before) before.parentNode.insertBefore(el, before);
+    return true;
+  }
+
+  function paint(v) {
+    el.className = `${p}-cli-banner ${p}-cli-banner--${v.kind}${nudgeTimer ? ` ${p}-cli-banner--nudge` : ''}`;
+    el.setAttribute('role', v.live === 'assertive' ? 'alert' : 'status');
+    el.setAttribute('aria-live', v.live);
+    el.querySelector(`.${cls('icon')}`).textContent = v.icon;
+    el.querySelector(`.${cls('title')}`).textContent = v.title;
+    const body = el.querySelector(`.${cls('body')}`);
+    body.textContent = v.text;
+    body.hidden = !v.text;
+
+    const command = el.querySelector(`.${cls('command')}`);
+    command.hidden = !v.command;
+    command.querySelector('code').textContent = v.command || '';
+    const copy = command.querySelector(`.${cls('copy')}`);
+    if (copy.textContent !== cliInstallText('copied')) copy.textContent = cliInstallText('copy');
+
+    const error = el.querySelector(`.${cls('error')}`);
+    error.hidden = !v.error;
+    error.querySelector('code').textContent = v.error || '';
+
+    const note = el.querySelector(`.${cls('note')}`);
+    note.hidden = !v.note;
+    note.textContent = v.note || '';
+    // The command to run by hand is announced after the note that introduces it. (Moved only when it is
+    // elsewhere: a node that moves loses the focus of what is in it.)
+    const before = v.kind === 'failed' && v.note && v.command ? note : body;
+    if (command.previousElementSibling !== before) before.after(command);
+
+    const progress = el.querySelector(`.${cls('progress')}`);
+    progress.hidden = !v.progress;
+    el.querySelector(`.${cls('step')}`).textContent = v.progress?.text || '';
+    const bar = el.querySelector(`.${cls('bar')}`);
+    const percent = v.progress?.percent;
+    bar.hidden = !(typeof percent === 'number');
+    if (typeof percent === 'number') {
+      bar.setAttribute('role', 'progressbar');
+      bar.setAttribute('aria-valuemin', '0');
+      bar.setAttribute('aria-valuemax', '100');
+      bar.setAttribute('aria-valuenow', String(percent));
+      bar.firstElementChild.style.width = `${percent}%`;
+    }
+
+    const log = el.querySelector(`.${cls('log')}`);
+    log.hidden = !v.log.length;
+    log.setAttribute('aria-label', cliInstallText('logLabel'));
+    const logText = v.log.join('\n');
+    if (log.textContent !== logText) {
+      log.textContent = logText;
+      log.scrollTop = log.scrollHeight;
+    }
+
+    const install = el.querySelector(`.${cls('install')}`);
+    install.hidden = !v.install;
+    if (v.install) {
+      install.textContent = v.install.label;
+      install.disabled = !!v.install.disabled;
+      install.setAttribute('aria-busy', v.kind === 'installing' ? 'true' : 'false');
+    }
+    const link = el.querySelector(`.${cls('link')}`);
+    link.hidden = !v.guide;
+    if (v.guide) { link.href = v.guide; link.textContent = cliInstallText('guide'); }
+    else link.removeAttribute('href');
+    const recheckButton = el.querySelector(`.${cls('recheck')}`);
+    recheckButton.hidden = !v.recheck;
+    if (!recheckButton.disabled) recheckButton.textContent = cliInstallText('recheck');
+    const pathButton = el.querySelector(`.${cls('path')}`);
+    pathButton.hidden = !v.addPath;
+    pathButton.textContent = v.addPath?.label || '';
+    pathButton.disabled = !!v.addPath?.disabled;
+    const dismiss = el.querySelector(`.${cls('dismiss')}`);
+    dismiss.hidden = !v.dismiss;
+    dismiss.textContent = cliInstallText('dismiss');
+  }
+
+  function render() {
+    if (destroyed) return;
+    const v = view();
+    const panelEl = panel?.();
+    if (panelEl) panelEl.classList.toggle(`${p}-cli-blocked`, v.blocked);
+    if (v.show && place()) paint(v);
+    else if (!v.show && el) el.remove();
+    if (v.blocked !== lastBlocked) {
+      lastBlocked = v.blocked;
+      try { onBlockedChange(v.blocked, v); } catch (error) { console.error('[cli-banner] onBlockedChange:', error); }
+    }
+  }
+
+  function clearDone() {
+    clearTimeout(doneTimer);
+    doneTimer = null;
+    if (job?.phase === 'done') job = null;
+    render();
+  }
+
+  function apply(event) {
+    if (!job && event?.type !== 'start') job = reduceInstallJob(null, { type: 'start' });
+    job = reduceInstallJob(job, event);
+    if (event?.type === 'done' && event.ok && event.status && typeof event.status === 'object') {
+      info = event.status;
+      forced = null;
+    }
+    render();
+  }
+
+  function settle(final) {
+    if (job?.phase === 'running' && final) job = reduceInstallJob(job, final);
+    if (job?.phase === 'done') {
+      clearTimeout(doneTimer);
+      const where = job.path;
+      if (where && (where.onPath === false || where.added === true)) doneTimer = setTimeout(clearDone, doneNoticeMs);
+      else job = null;
+    }
+    render();
+  }
+
+  async function startInstall() {
+    if (installing || !INSTALLABLE_CLIS.includes(toolKey)) return;
+    installing = true;
+    clearTimeout(doneTimer);
+    job = reduceInstallJob(null, { type: 'start' });
+    render();
+    let final = null;
+    try {
+      final = await installCli(toolKey, { onEvent: apply });
+    } catch (error) {
+      final = { type: 'done', ok: false, code: 'internal', error: error?.message || null };
+    } finally {
+      installing = false;
+      settle(final);
+    }
+  }
+
+  async function addPath() {
+    if (addingPath) return;
+    addingPath = true; pathError = ''; render();
+    try {
+      const result = await addCliToPath(toolKey);
+      info = { ...info, pathStatus: { dir: result.dir, onPath: true, canAdd: false } };
+      job = reduceInstallJob(null, { type: 'done', ok: true, status: info, path: { ...result, added: true } });
+      settle();
+    } catch (error) { pathError = error.message; }
+    finally { addingPath = false; render(); }
+  }
+
+  // An install the server is already running (another window started it, or this page was reloaded during
+  // one): followed here as if this banner had started it.
+  async function followRunning() {
+    if (installing) return;
+    const jobs = await getCliInstallJobs();
+    if (destroyed || installing || jobs?.[toolKey]?.state !== 'running') return;
+    installing = true;
+    job = reduceInstallJob(null, { type: 'start' });
+    render();
+    let final = null;
+    try {
+      final = await followCliInstall(toolKey, { onEvent: apply });
+    } catch (error) {
+      final = { type: 'done', ok: false, code: 'connection', error: error?.message || null };
+    } finally {
+      installing = false;
+      settle(final);
+    }
+  }
+
+  async function recheck() {
+    const button = el?.querySelector(`.${cls('recheck')}`);
+    if (button) { button.disabled = true; button.textContent = cliInstallText('checking'); }
+    // Asking again starts over: an earlier failure is not repeated over a fresh answer.
+    if (job?.phase === 'failed') job = null;
+    try {
+      const next = await recheckCliStatus(toolKey);
+      info = next || info;
+      if (cliStateOf(info) === 'installed' || cliStateOf(info) === 'broken') forced = null;
+    } catch { /* the banner stays as it is */ }
+    finally {
+      if (button?.isConnected) { button.disabled = false; button.textContent = cliInstallText('recheck'); }
+      render();
+    }
+  }
+
+  const unsubscribe = subscribeCliStatus(toolKey, (next) => {
+    info = next || null;
+    const state = cliStateOf(info);
+    if (state === 'installed') {
+      forced = null;
+      if (job?.phase === 'failed') job = null;
+    }
+    if (state === 'missing') {
+      if (!looked) { looked = true; followRunning().catch(() => {}); }
+    } else {
+      looked = false;
+    }
+    render();
+  });
+
+  return {
+    /** Draw again (the panel was shown, or rebuilt). */
+    refresh: render,
+    /** Sending is held back: the CLI is missing, broken, failed to install, or being installed. */
+    blocked: () => view().blocked,
+    /** What the banner shows now (cli-install-view.js cliBannerView). */
+    view,
+    /** A send was held back: draw attention to the banner for a moment. */
+    nudge() {
+      if (!view().show) return;
+      clearTimeout(nudgeTimer);
+      nudgeTimer = setTimeout(() => { nudgeTimer = null; render(); }, NUDGE_MS);
+      render();
+    },
+    /**
+     * A session could not start the CLI ("Claude CLI not found", a spawn error): show "failed to start" with its
+     * words at once, then ask the server again; its answer decides what stays.
+     */
+    flagFailure(reason = null) {
+      forced = { reason: reason ? String(reason).slice(0, 300) : null };
+      render();
+      recheckCliStatus(toolKey)
+        .then((next) => {
+          info = next || info;
+          const state = cliStateOf(info);
+          if (state === 'installed' || state === 'broken') forced = null;
+          render();
+        })
+        .catch(() => {});
+    },
+    /** Install from the banner's own button (for a panel's own entry point). */
+    install: startInstall,
+    destroy() {
+      destroyed = true;
+      unsubscribe();
+      clearTimeout(doneTimer);
+      clearTimeout(nudgeTimer);
+      el?.remove();
+      el = null;
+    },
+  };
+}

package/neural-interface/public/shared/ui-git-bash.js

@@ -0,0 +1,124 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — the Git Bash row of Settings
+// ═══════════════════════════════════════════
+//
+// The page side of git-bash-view.js: the row of Settings → AI connections →
+// Executable paths that shows the Git Bash every Claude Code SynaBun starts
+// gets on Windows, with Download / Try again and Re-check. It asks
+// GET /api/cli/git-bash, follows a download while it runs (a few times a
+// second, until the row has left the page), and posts what the buttons ask
+// with the guards of SynaBun's other local routes (a JSON body, X-SynaBun-UI).
+// A server that has no such route (an older one), and every macOS or Linux
+// server, leaves the row hidden.
+
+import { gitBashText, gitBashView } from './git-bash-view.js';
+
+const POST = Object.freeze({ method: 'POST', headers: { 'Content-Type': 'application/json', 'X-SynaBun-UI': '1' }, body: '{}' });
+
+const ICON = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 4h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 2v12h16V6H4zm2.3 2.3 3.7 3.7-3.7 3.7-1.4-1.4L7.2 12 4.9 9.7l1.4-1.4zM11 15h6v2h-6v-2z"/></svg>';
+
+const escapeHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[char]));
+
+/** The row's markup: hidden until the server says there is something to show (Windows). */
+export function gitBashRowHtml() {
+  return `
+            <div class="cli-path-row" id="cli-git-bash" data-git-bash hidden>
+              <div class="cli-path-icon" style="color:var(--t-secondary)">${ICON}</div>
+              <div class="cli-path-field">
+                <span class="cli-path-label" id="cli-git-bash-label">${escapeHtml(gitBashText('label'))}</span>
+                <div class="cli-path-input-row">
+                  <span class="stg-help" data-git-bash-line role="status" aria-live="polite" aria-labelledby="cli-git-bash-label" style="flex:1;min-width:0;margin:0"></span>
+                  <button type="button" class="cli-detect-btn" data-git-bash-action hidden></button>
+                  <button type="button" class="cli-detect-btn" data-git-bash-recheck hidden>${escapeHtml(gitBashText('recheck'))}</button>
+                  <span class="cli-path-status" data-git-bash-badge></span>
+                </div>
+                <div class="stg-help" data-git-bash-note hidden></div>
+                <div class="stg-help">${escapeHtml(gitBashText('help'))}</div>
+              </div>
+            </div>`;
+}
+
+/**
+ * Fill the row and keep it current. `fetchImpl`, `schedule` and `cancel` are the page's own unless a test gives
+ * others. Returns `{ refresh, stop }`; the row stops following a download by itself once it is off the page.
+ */
+export function wireGitBashRow(row, { fetchImpl = (...args) => fetch(...args), pollMs = 1500, schedule = (fn, ms) => setTimeout(fn, ms), cancel = (id) => clearTimeout(id) } = {}) {
+  if (!row) return { refresh: async () => null, stop: () => {} };
+  const badge = row.querySelector('[data-git-bash-badge]');
+  const line = row.querySelector('[data-git-bash-line]');
+  const note = row.querySelector('[data-git-bash-note]');
+  const action = row.querySelector('[data-git-bash-action]');
+  const recheck = row.querySelector('[data-git-bash-recheck]');
+  let timer = null;
+  let stopped = false;
+
+  const clearPoll = () => { if (timer !== null) { cancel(timer); timer = null; } };
+  const stop = () => { stopped = true; clearPoll(); };
+
+  function draw(status) {
+    const view = gitBashView(status);
+    row.hidden = !view.visible;
+    clearPoll();
+    if (!view.visible) return view;
+    if (badge) {
+      badge.textContent = view.badge?.text || '';
+      badge.className = `cli-path-status${view.badge?.tone ? ` ${view.badge.tone}` : ''}`;
+    }
+    if (line) line.textContent = view.line;
+    if (note) { note.textContent = view.note || ''; note.hidden = !view.note; }
+    if (action) {
+      action.hidden = !view.action;
+      action.disabled = false;
+      action.textContent = view.action ? gitBashText(view.action) : '';
+    }
+    if (recheck) {
+      recheck.hidden = !view.recheck;
+      recheck.disabled = false;
+      recheck.textContent = gitBashText('recheck');
+    }
+    if (view.busy && !stopped) {
+      timer = schedule(() => {
+        timer = null;
+        if (row.isConnected === false) { stop(); return; }
+        refresh();
+      }, pollMs);
+    }
+    return view;
+  }
+
+  async function ask(path, init) {
+    const res = await fetchImpl(path, init);
+    let body = null;
+    try { body = await res.json(); } catch { body = null; }
+    // A refusal that still says how things are (422: nothing to fetch here) is drawn as it is.
+    if (!res.ok && !(body && typeof body.state === 'string')) throw new Error(body?.error || body?.code || `HTTP ${res.status}`);
+    return body;
+  }
+
+  const said = (error) => { if (line) line.textContent = gitBashText('errorRequest', { message: error?.message || String(error) }); };
+
+  async function refresh() {
+    try { return draw(await ask('/api/cli/git-bash')); } catch {
+      // An older server, or none: there is no row to show.
+      row.hidden = true;
+      return null;
+    }
+  }
+
+  action?.addEventListener('click', async () => {
+    action.disabled = true;
+    try { draw(await ask('/api/cli/git-bash/install', POST)); } catch (error) { said(error); action.disabled = false; }
+  });
+  recheck?.addEventListener('click', async () => {
+    recheck.disabled = true;
+    recheck.textContent = gitBashText('checking');
+    try { draw(await ask('/api/cli/git-bash/recheck', POST)); } catch (error) {
+      said(error);
+      recheck.disabled = false;
+      recheck.textContent = gitBashText('recheck');
+    }
+  });
+
+  refresh();
+  return { refresh, stop };
+}

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

@@ -862,7 +862,7 @@ export function wireJudgmentsTab(overlay, { toast = () => {}, initial = null } =
     const outcome = row.outcome && typeof row.outcome === 'object' ? row.outcome : null;
     const summary = `${clock(row.created_at)} · <code>${escapeHtml(row.surface)}</code>${riders.map(x => ` <span style="${CHIP}">+${escapeHtml(x)}</span>`).join('')} ${kit.th('settings.redesign.judgments.qMs', { origin: escapeHtml(row.origin), model: escapeHtml(row.model || ''), num: num(row.question_count), num2: num(row.latency_ms), num3: num(row.input_tokens) })}${num(row.output_tokens)}${row.cached ? ' · <span style="color:var(--accent)">' + kit.te('settings.redesign.judgments.cached') + '</span>' : ''}${row.error ? ` · <span style="color:#f66">${escapeHtml(row.error)}</span>` : ''}${row.entity_id ? ` · ${memLink(row.entity_id)}` : ''}${row.session_id ? ` · <a href="#" class="jv-session-link" data-session="${attr(row.session_id)}" title="${attr(row.session_id)}${kit.te('settings.redesign.judgments.thisSessionSJudgments')}" style="${LINK};font-family:monospace">${kit.te('settings.redesign.judgments.session')} ${escapeHtml(shortId(row.session_id))}</a>` : ''}${row.project ? ` · ${escapeHtml(row.project)}` : ''}`;
     return `<details class="jv-log-row" data-id="${attr(row.id)}"${state.openLogIds.has(String(row.id)) ? ' open' : ''} style="font-size:12px;border:1px solid var(--s-medium);border-radius:6px;padding:4px 8px;background:var(--s-darker)">
-      <summary style="cursor:pointer;list-style:none" title="${attr(row.created_at)}">${summary}</summary>
+      <summary style="cursor:pointer;list-style:none" title="${attr(row.created_at)}">${summary}${row.surface === 'budget-split' && budgetSplitLine(row, row.answers || {}).line ? ' · ' + budgetSplitLine(row, row.answers || {}).line : ''}</summary>
       <div class="settings-hint" style="margin:6px 0 2px">${kit.te('settings.redesign.judgments.state')}</div><pre style="margin:0;white-space:pre-wrap;font-size:11px;max-height:160px;overflow:auto">${escapeHtml(row.state_preview || '')}</pre>
       <div class="settings-hint" style="margin:6px 0 2px">${kit.te('settings.redesign.judgments.answers')}</div><pre style="margin:0;white-space:pre-wrap;font-size:11px;max-height:200px;overflow:auto">${escapeHtml(answers || '—')}</pre>
       ${outcome ? `<div class="settings-hint" style="margin:6px 0 2px">${kit.te('settings.redesign.judgments.outcome')}</div><pre style="${PRE}">${escapeHtml(JSON.stringify(outcome, null, 2))}</pre>` : ''}
@@ -1029,7 +1029,16 @@ export function wireJudgmentsTab(overlay, { toast = () => {}, initial = null } =
     const p = prob(a.goal_met);
     return { line: p == null ? '' : flagged(kit.tx('settings.redesign.judgments.pGoalMet', { pct: pct(p) }), p >= knob('loop-goal', 'minConfidence', 0.8)) };
   }
+  function budgetSplitLine(row, answers) {
+    const names = { share_claude_code: 'Claude Code', share_codex: 'Codex', share_opencode: 'OpenCode' };
+    const parts = Object.entries(names).filter(([key]) => answers[key]?.type === 'score').map(([key, label]) => {
+      const a = answers[key];
+      return escapeHtml(kit.tx('settings.redesign.judgments.budgetShareScore', { provider: label, score: num(a.score ?? a.value), confidence: pct(a.confidence) }));
+    });
+    return { line: parts.join(' · ') };
+  }
   const TIMELINE = {
+    'budget-split': budgetSplitLine,
     'prompt-urgency': urgencyLine, 'rerank': rankLine, 'brief-rank': rankLine,
     'agent-message': stopLine, 'turn-worth': stopLine, 'claim-check': stopLine,
     'edit-stale': staleLine, 'stale-check': staleLine, 'plan-conflict': planLine, 'compact-digest': digestLine, 'loop-goal': loopLine,

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

@@ -14,6 +14,7 @@ import {
 // Imported with the app, not when it is needed: once the server is down
 // nothing more can be fetched, and that is exactly when the overlay wants it.
 import { createMascot } from './synabun-mascot.js';
+import { isDesktopApp } from './desktop-bridge.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -48,6 +49,22 @@ function stored(key) {
   try { return localStorage.getItem(key); } catch { return null; }
 }
 
+// Inside the desktop app the app starts and restarts its server itself: no
+// Start button, no command to type. The sentences of a start that point at
+// them say what to do in the app instead (desktop.offline.* in i18n).
+const DESKTOP_LINES = { stalled: 'stalled', restartStalled: 'stalled', gaveUp: 'stalled', failedHint: 'failedHint' };
+
+function desktopLine(line) {
+  const key = isDesktopApp() ? DESKTOP_LINES[line.key] : null;
+  return key ? t(`desktop.offline.${key}`) : '';
+}
+
+/** The command box under the overlay: a terminal command, which the desktop app has no use for. */
+function showStartCommand(show) {
+  const $box = $('loading-server-cmd-box');
+  if ($box) $box.style.display = show ? '' : 'none';
+}
+
 // ═══════════════════════════════════════════
 // PUBLIC API
 // ═══════════════════════════════════════════
@@ -76,8 +93,10 @@ export function showLoadingError(title, sub, canStart, serverOffline) {
   if (serverOffline) _offlineTitle = title;
 
   // Offline, the button asks the OS to start the server (synabun://start); it
-  // is left out only when that launcher is known not to be registered.
-  const offlineStart = !!serverOffline && startButtonUsable(stored(START_STORAGE.launcher));
+  // is left out only when that launcher is known not to be registered, and in
+  // the desktop app, which starts its server itself.
+  const desktopApp = isDesktopApp();
+  const offlineStart = !!serverOffline && !desktopApp && startButtonUsable(stored(START_STORAGE.launcher));
   const $action = $('loading-action');
   const $btn = $('loading-action-btn');
   if (canStart || offlineStart) {
@@ -94,7 +113,8 @@ export function showLoadingError(title, sub, canStart, serverOffline) {
 
   if (serverOffline) {
     const $hint = $('loading-server-cmd-hint');
-    if ($hint) $hint.textContent = offlineStart ? t('loading.runCommandOr') : t('loading.runCommandSetup');
+    if ($hint) $hint.textContent = desktopApp ? t('desktop.offline.hint') : offlineStart ? t('loading.runCommandOr') : t('loading.runCommandSetup');
+    if (desktopApp) showStartCommand(false);
     watchForServer();
   } else {
     stopWatchingForServer();
@@ -275,7 +295,7 @@ function poseMascot(state) {
 function renderStart(snap) {
   const platform = isWindowsPlatform(navigator) ? 'windows' : isMacPlatform(navigator) ? 'mac' : 'linux';
   const view = startStatusView(snap, { platform });
-  const say = (line) => (line ? t(`loading.start.${line.key}`, line.params) : '');
+  const say = (line) => (line ? desktopLine(line) || t(`loading.start.${line.key}`, line.params) : '');
   // A restart this page asked for or was told of, while it runs.
   const restarting = !!snap.restart && (view.busy || view.state === 'online');
 
@@ -315,7 +335,8 @@ function renderStart(snap) {
     // No dead button: when a restart did not bring the server back, Start is
     // offered only if its launcher is there (the command below always is).
     const startOffered = view.button === 'start' || view.button === 'retry';
-    btn.style.display = _restartShown && startOffered && !startButtonUsable(stored(START_STORAGE.launcher)) ? 'none' : '';
+    // The desktop app keeps only the way back from a refused restart.
+    btn.style.display = (isDesktopApp() ? view.button !== 'back' : _restartShown && startOffered && !startButtonUsable(stored(START_STORAGE.launcher))) ? 'none' : '';
   }
   if ($label) {
     $label.textContent = view.button === 'starting' ? t('loading.starting')
@@ -465,7 +486,10 @@ function beginRestart({ request = null, announced = false, boot = '' } = {}) {
   const $action = $('loading-action');
   if ($action) $action.style.display = 'block';
   const $hint = $('loading-server-cmd-hint');
-  if ($hint) $hint.textContent = startButtonUsable(stored(START_STORAGE.launcher)) ? t('loading.runCommandOr') : t('loading.runCommandSetup');
+  if (isDesktopApp()) {
+    if ($hint) $hint.textContent = t('desktop.offline.hint');
+    showStartCommand(false);
+  } else if ($hint) $hint.textContent = startButtonUsable(stored(START_STORAGE.launcher)) ? t('loading.runCommandOr') : t('loading.runCommandSetup');
   const $retry = $('loading-retry-status');
   if ($retry) $retry.textContent = '';
   clearStartStatus();

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

@@ -14,8 +14,10 @@ import { registerAction } from './ui-keybinds.js';
 import { isGuest, hasPermission } from './ui-sync.js';
 import { sendToPanel } from './ui-claude-panel.js';
 import { forceCheckToolUpdates, showUpdateToast, TOOL_LABELS } from './ui-tool-updates.js';
-import { forceCheckSynabunUpdate, openSynabunUpdateModal } from './ui-update.js';
+import { forceCheckSynabunUpdate, openSynabunUpdateModal, synabunUpdateSourceLabel } from './ui-update.js';
 import { requestServerRestart } from './ui-loading.js';
+import { desktopBridge, isDesktopApp } from './desktop-bridge.js';
+import { t } from './i18n.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -391,8 +393,7 @@ function wireTerminalMenu() {
         }
       }
       if (syn?.updateAvailable) {
-        const srcLabel = syn.source === 'both' ? 'npm + GitHub' : syn.source === 'github' ? 'GitHub' : 'npm';
-        updates.push({ label: `SynaBun v${syn.current} → v${syn.latest}`, source: srcLabel });
+        updates.push({ label: `SynaBun v${syn.current} → v${syn.latest}`, source: synabunUpdateSourceLabel(syn) });
       }
 
       const errors = [];
@@ -426,6 +427,9 @@ function wireTerminalMenu() {
     // when the server is back (ui-loading.js requestServerRestart).
     'menu-restart-server':   () => { requestServerRestart(); },
     'menu-stop-server':      async () => {
+      // Inside the desktop app the server is the app's: stopping it is quitting SynaBun.
+      const desktop = desktopBridge();
+      if (desktop) { await desktop.quit(); return; }
       const previousTitle = document.title;
       try {
         document.title = 'Stopping...';
@@ -451,6 +455,12 @@ function wireTerminalMenu() {
   registerAction('toggle-terminal', () => emit('terminal:toggle'));
   registerAction('toggle-terminal-alt', () => emit('terminal:toggle'));
 
+  // The desktop app is SynaBun's own window: no browser installs it, and Stop Server is Quit SynaBun there.
+  if (isDesktopApp()) {
+    const quitLabel = [...($('menu-stop-server')?.querySelector('.menu-text')?.childNodes || [])].filter(node => node.nodeType === 3).pop();
+    if (quitLabel) quitLabel.textContent = ` ${t('desktop.menu.quit')}`;
+    return;
+  }
   initPwaInstall({ changed: value => {
     const el = $('menu-install-app');
     if (el) el.style.display = value === 'installed' ? 'none' : '';

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

@@ -24,6 +24,7 @@ import { toggleScheduleQueue } from './ui-schedule-queue.js';
 import { initUpdate } from './ui-update.js';
 import { initToolUpdates } from './ui-tool-updates.js';
 import { initSidepanelTrayPlaceholders } from './ui-sidepanel-tray.js';
+import { initDesktopTitleBar } from './desktop-titlebar.js';
 
 const $ = (id) => document.getElementById(id);
 
@@ -304,7 +305,8 @@ export function initNavbar() {
 
   // ── Window Controls Overlay (PWA standalone) ──
   // Toggles body.wco-active when the overlay chevron is clicked (traffic lights move into content).
-  if ('windowControlsOverlay' in navigator) {
+  // Inside the SynaBun desktop app the bar is the window's title bar, and desktop-titlebar.js does this and more.
+  if (!initDesktopTitleBar() && 'windowControlsOverlay' in navigator) {
     const wco = navigator.windowControlsOverlay;
     const updateWco = () => document.body.classList.toggle('wco-active', wco.visible);
     updateWco();