synabun 2.0.5 → 2.0.7

package/neural-interface/public/shared/cli-status.js

@@ -3,28 +3,40 @@
 // Detects whether Claude / Codex / OpenCode CLIs are installed by
 // querying /api/system/tool-versions. Caches the response, fans out
 // updates to subscribers, and auto-polls (every 30s) while at least
-// one subscribed tool reports installed=null.
+// one subscribed tool is not installed (missing, or found but broken).
+//
+// Each tool's answer carries `state` ('installed' | 'missing' | 'broken'),
+// the version, where it was found, the error of a CLI that would not start,
+// and `install`: whether the server can install it with one click from the
+// vendor's official source. installCli() runs that install (POST
+// /api/cli/install/:tool, an NDJSON stream) and re-checks when it ends.
+// What the panels show for all of it is cli-install-view.js.
 // ═══════════════════════════════════════════
 
+import { cliStateOf, cliInstallOffer, INSTALLABLE_CLIS } from './cli-install-view.js';
+
+export { cliStateOf, cliInstallOffer };
+
 const TOOL_KEYS = ['claude-code', 'codex', 'opencode', 'gemini'];
 
+// The vendors' install pages. The server's `guideUrl` wins when it sends one.
 const CLI_DOC_URLS = {
-  'claude-code': 'https://docs.claude.com/en/docs/claude-code/setup',
-  'codex':       'https://developers.openai.com/codex/cli/',
+  'claude-code': 'https://code.claude.com/docs/en/setup',
+  'codex':       'https://learn.chatgpt.com/docs/codex/cli',
   'opencode':    'https://opencode.ai/docs/',
   'gemini':      'https://github.com/google-gemini/gemini-cli',
 };
 
-// Fallback only. The server computes the channel-correct command (see
-// buildInstallCommand in lib/cli-update-planner.js) and returns it as
-// `installCommand`, so a Homebrew user is told `brew install --cask codex`
-// rather than an npm command that would create a second conflicting install.
-// These npm defaults apply only before the first tool-versions response.
+// Fallback only. The server computes the command that fits the machine (the
+// vendor's recommended installer for its system, or the package manager the
+// other CLIs came from: buildInstallCommand in lib/cli-update-planner.js) and
+// returns it as `installCommand`. These apply only before the first
+// tool-versions response.
 const CLI_INSTALL_CMDS = {
-  'claude-code': 'npm install -g @anthropic-ai/claude-code',
-  'codex':       'npm install -g @openai/codex',
-  'opencode':    'npm install -g opencode-ai',
-  'gemini':      'npm install -g @google/gemini-cli',
+  'claude-code': { posix: 'curl -fsSL https://claude.ai/install.sh | bash', windows: 'irm https://claude.ai/install.ps1 | iex' },
+  'codex':       { posix: 'curl -fsSL https://chatgpt.com/codex/install.sh | sh', windows: 'powershell -ExecutionPolicy ByPass -c "irm https://chatgpt.com/codex/install.ps1 | iex"' },
+  'opencode':    { posix: 'curl -fsSL https://opencode.ai/install | bash', windows: 'npm install -g opencode-ai' },
+  'gemini':      { posix: 'npm install -g @google/gemini-cli', windows: 'npm install -g @google/gemini-cli' },
 };
 
 const CLI_LABELS = {
@@ -36,24 +48,67 @@ const CLI_LABELS = {
 
 const POLL_INTERVAL_MS = 30000;
 const CACHE_TTL_MS = 10000;
+// How often an install another window (or an earlier page) started is asked
+// about, and for how long at most.
+const INSTALL_POLL_MS = 2000;
+const INSTALL_FOLLOW_MAX_MS = 30 * 60 * 1000;
 
 let _cache = { fetchedAt: 0, tools: null };
+// What a subscriber is handed for a CLI the answer says nothing about: not
+// "missing" (nothing was said), and `installed: null` for the callers that only
+// read that field.
+const unknownInfo = () => ({ installed: null, state: 'unknown' });
 let _inflight = null;
 const _subscribers = new Map();
 let _pollTimer = null;
+const _installs = new Map(); // toolKey → { promise, listeners: Set }
+
+function isWindowsPage() {
+  const nav = globalThis.navigator;
+  if (!nav) return false;
+  if (nav.userAgentData?.platform && /windows/i.test(nav.userAgentData.platform)) return true;
+  return /windows/i.test(nav.userAgent || '');
+}
 
 export function getCliDocUrl(toolKey) {
+  const fromServer = _cache.tools?.[toolKey]?.guideUrl;
+  if (typeof fromServer === 'string' && /^https:\/\/[^\s"'<>]+$/i.test(fromServer)) return fromServer;
   return CLI_DOC_URLS[toolKey] || null;
 }
 
 export function getCliInstallCommand(toolKey) {
-  return _cache.tools?.[toolKey]?.installCommand || CLI_INSTALL_CMDS[toolKey] || '';
+  const fromServer = _cache.tools?.[toolKey]?.installCommand;
+  if (fromServer) return fromServer;
+  const fallback = CLI_INSTALL_CMDS[toolKey];
+  if (!fallback) return '';
+  return isWindowsPage() ? fallback.windows : fallback.posix;
 }
 
 export function getCliLabel(toolKey) {
   return CLI_LABELS[toolKey] || toolKey;
 }
 
+/** This CLI in the latest answer, or null before the first one. */
+export function getCliInfo(toolKey) {
+  return _cache.tools?.[toolKey] || null;
+}
+
+/** 'installed' | 'missing' | 'broken' | 'unknown' (no answer yet), from the latest answer. */
+export function getCliState(toolKey) {
+  return cliStateOf(getCliInfo(toolKey));
+}
+
+/** The error a found-but-broken CLI gave when it was started, or null. */
+export function getCliError(toolKey) {
+  const info = getCliInfo(toolKey);
+  return cliStateOf(info) === 'broken' && typeof info?.error === 'string' && info.error ? info.error : null;
+}
+
+/** The one-click install the server offers for this CLI, or null (none for this system, or an older server). */
+export function getCliInstallOffer(toolKey) {
+  return cliInstallOffer(getCliInfo(toolKey));
+}
+
 async function _fetchToolVersions(force) {
   if (!force && _cache.tools && (Date.now() - _cache.fetchedAt) < CACHE_TTL_MS) {
     return _cache.tools;
@@ -74,6 +129,26 @@ async function _fetchToolVersions(force) {
   return _inflight;
 }
 
+// What a subscriber is told about: a change of state, version or place. A
+// broken CLI and a missing one both have `installed: null`, so the version
+// alone would hide a CLI that went from missing to broken (or back).
+function _signature(info) {
+  if (!info) return 'none';
+  return [cliStateOf(info), info.installed ?? '', info.binPath ?? '', info.error ?? '', JSON.stringify(info.pathStatus || null)].join('|');
+}
+
+/** Explicit consent from Add to PATH. The server accepts only a tool key. */
+export async function addCliToPath(toolKey) {
+  if (!INSTALLABLE_CLIS.includes(toolKey)) throw new Error('Unknown CLI');
+  const res = await fetch(`/api/cli/path/${encodeURIComponent(toolKey)}`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json', 'X-SynaBun-UI': '1' }, body: '{}',
+  });
+  const result = await res.json();
+  if (!res.ok && !(res.status === 409 && result.code === 'NOT_NEEDED')) throw new Error(result.error || result.code || `HTTP ${res.status}`);
+  await recheckCliStatus(toolKey);
+  return result;
+}
+
 // `force` makes a deliberate re-check notify subscribers even when the
 // version string is unchanged. Without it the Re-check button was a no-op by
 // construction: a panel that latched a "CLI not installed" banner after a
@@ -82,12 +157,10 @@ async function _fetchToolVersions(force) {
 // The background poller deliberately keeps the change-only behaviour.
 function _emitChange(prevTools, nextTools, { force = false } = {}) {
   for (const key of TOOL_KEYS) {
-    const prev = prevTools?.[key]?.installed ?? null;
-    const next = nextTools?.[key]?.installed ?? null;
     const subs = _subscribers.get(key);
     if (!subs || !subs.size) continue;
-    if (force || prev !== next || prevTools == null) {
-      const info = nextTools?.[key] || { installed: null };
+    if (force || prevTools == null || _signature(prevTools?.[key]) !== _signature(nextTools?.[key])) {
+      const info = nextTools?.[key] || unknownInfo();
       for (const cb of subs) {
         try { cb(info); } catch (e) { console.error('[cli-status] subscriber error:', e); }
       }
@@ -95,12 +168,18 @@ function _emitChange(prevTools, nextTools, { force = false } = {}) {
   }
 }
 
+// Asked again every 30 s while a subscribed CLI is missing or broken: one
+// installed (or repaired) meanwhile is found without a click. A CLI the answer
+// says nothing about is not waited for.
 function _hasMissingSubscribed() {
   for (const key of _subscribers.keys()) {
     const subs = _subscribers.get(key);
     if (!subs?.size) continue;
-    const installed = _cache.tools?.[key]?.installed ?? null;
-    if (!installed) return true;
+    if (!_cache.tools) return true;
+    const info = _cache.tools[key];
+    if (!info) continue;
+    const state = cliStateOf(info);
+    if (state === 'missing' || state === 'broken') return true;
   }
   return false;
 }
@@ -132,7 +211,7 @@ function _stopPoller() {
 
 export async function getCliStatus(toolKey, { force = false } = {}) {
   const tools = await _fetchToolVersions(force);
-  return tools?.[toolKey] || { installed: null, latest: null };
+  return tools?.[toolKey] || { ...unknownInfo(), latest: null };
 }
 
 export function subscribeCliStatus(toolKey, callback) {
@@ -147,7 +226,7 @@ export function subscribeCliStatus(toolKey, callback) {
     _maybeStartPoller();
   } else {
     _fetchToolVersions(false).then((tools) => {
-      try { callback(tools?.[toolKey] || { installed: null }); } catch {}
+      try { callback(tools?.[toolKey] || unknownInfo()); } catch {}
       _maybeStartPoller();
     }).catch(() => {});
   }
@@ -165,5 +244,186 @@ export async function recheckCliStatus(toolKey) {
   const prev = _cache.tools;
   const next = await _fetchToolVersions(true);
   _emitChange(prev, next, { force: true });
-  return next?.[toolKey] || { installed: null };
+  return next?.[toolKey] || unknownInfo();
+}
+
+// ── One-click install ──────────────────────────────────────────────────────
+
+const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+/** What a refusal before the stream (a JSON answer) means, as a `done` event. */
+function _refusal(status, body) {
+  const code = String(body?.code || '');
+  let reason = 'internal';
+  if (code === 'UNSUPPORTED' || code === 'UNKNOWN_TOOL' || status === 422) reason = 'unsupported';
+  else if (status === 403 || status === 415) reason = 'refused';
+  return {
+    type: 'done', ok: false, code: reason,
+    error: typeof body?.error === 'string' && body.error ? body.error : (code || `HTTP ${status}`),
+    manualCommand: typeof body?.manualCommand === 'string' ? body.manualCommand : null,
+    guideUrl: typeof body?.guideUrl === 'string' ? body.guideUrl : null,
+  };
+}
+
+/**
+ * The installs the server knows about: { [tool]: { state: 'running' | 'done' | 'failed', step, code, error,
+ * log, startedAt, endedAt } }. An older server (no install route) answers {}.
+ */
+export async function getCliInstallJobs() {
+  try {
+    const res = await fetch('/api/cli/install', { headers: { Accept: 'application/json' } });
+    if (!res.ok) return {};
+    const data = await res.json();
+    return data?.jobs && typeof data.jobs === 'object' ? data.jobs : {};
+  } catch {
+    return {};
+  }
+}
+
+/**
+ * Follow an install that is already running on the server (started from another window, or before this page
+ * was loaded) through GET /api/cli/install: its steps and new log lines go to `onEvent`, and the end is a
+ * `done` event like the stream's. Resolves that event.
+ */
+export async function followCliInstall(toolKey, { onEvent = () => {}, pollMs = INSTALL_POLL_MS, maxMs = INSTALL_FOLLOW_MAX_MS } = {}) {
+  const startedAt = Date.now();
+  let seenLines = 0;
+  let lastStep = null;
+  let sawJob = false;
+  for (;;) {
+    const job = (await getCliInstallJobs())[toolKey];
+    if (job && typeof job === 'object') {
+      sawJob = true;
+      if (job.step && job.step !== lastStep) {
+        lastStep = job.step;
+        onEvent({ type: 'step', step: job.step });
+      }
+      const log = Array.isArray(job.log) ? job.log : [];
+      if (log.length < seenLines) seenLines = 0; // a new job: its log starts again
+      for (const entry of log.slice(seenLines)) onEvent({ type: 'log', line: entry });
+      seenLines = log.length;
+      if (job.state && job.state !== 'running') {
+        if (job.state === 'done') {
+          const status = await recheckCliStatus(toolKey).catch(() => null);
+          const done = { type: 'done', ok: true, status, path: job.path && typeof job.path === 'object' ? job.path : null };
+          onEvent(done);
+          return done;
+        }
+        const failed = { type: 'done', ok: false, code: job.code || 'internal', error: job.error || null, manualCommand: job.manualCommand || null, guideUrl: job.guideUrl || null, log };
+        onEvent(failed);
+        return failed;
+      }
+    } else if (sawJob || Date.now() - startedAt > pollMs * 3) {
+      // The job is gone (a restarted server), or never showed up: ask about the CLI itself.
+      const status = await recheckCliStatus(toolKey).catch(() => null);
+      const done = cliStateOf(status) === 'installed'
+        ? { type: 'done', ok: true, status, path: null }
+        : { type: 'done', ok: false, code: 'connection', error: null };
+      onEvent(done);
+      return done;
+    }
+    if (Date.now() - startedAt > maxMs) {
+      const done = { type: 'done', ok: false, code: 'timeout', error: null };
+      onEvent(done);
+      return done;
+    }
+    await wait(pollMs);
+  }
+}
+
+async function _readNdjson(res, onEvent) {
+  let final = null;
+  const take = (text) => {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    let event;
+    try { event = JSON.parse(trimmed); } catch { return; }
+    if (!event || typeof event !== 'object') return;
+    onEvent(event);
+    if (event.type === 'done') final = event;
+  };
+  if (res.body && typeof res.body.getReader === 'function') {
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let buffer = '';
+    for (;;) {
+      const { value, done } = await reader.read();
+      if (done) break;
+      buffer += decoder.decode(value, { stream: true });
+      let at;
+      while ((at = buffer.indexOf('\n')) >= 0) {
+        take(buffer.slice(0, at));
+        buffer = buffer.slice(at + 1);
+      }
+    }
+    buffer += decoder.decode();
+    take(buffer);
+  } else {
+    for (const piece of String(await res.text()).split('\n')) take(piece);
+  }
+  return final;
+}
+
+/**
+ * Install a CLI with one click: the server runs the vendor's official installer for its system and streams what
+ * happens (`start`, `step`, `progress`, `log`, then one `done`). Every event goes to `onEvent`; the promise
+ * resolves the `done` event. After a successful install the status is asked again (with force), so every panel
+ * subscribed to this CLI hears of it. Never rejects.
+ *
+ * One install per CLI at a time in this page: a second call follows the first one.
+ * An install already running on the server (409 BUSY) is followed through GET /api/cli/install.
+ */
+export function installCli(toolKey, { onEvent = () => {}, pollMs = INSTALL_POLL_MS } = {}) {
+  const running = _installs.get(toolKey);
+  if (running) {
+    running.listeners.add(onEvent);
+    return running.promise;
+  }
+  const listeners = new Set([onEvent]);
+  const emit = (event) => {
+    for (const listener of listeners) {
+      try { listener(event); } catch (e) { console.error('[cli-status] install listener error:', e); }
+    }
+  };
+  const promise = (async () => {
+    if (!INSTALLABLE_CLIS.includes(toolKey)) {
+      const refused = { type: 'done', ok: false, code: 'unsupported', error: null };
+      emit(refused);
+      return refused;
+    }
+    let final = null;
+    try {
+      const res = await fetch(`/api/cli/install/${encodeURIComponent(toolKey)}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', 'X-SynaBun-UI': '1', Accept: 'application/x-ndjson' },
+        body: '{}',
+      });
+      if (!res.ok) {
+        let body = {};
+        try { body = await res.json(); } catch { /* no body */ }
+        if (res.status === 409 && String(body?.code || '').toUpperCase() === 'BUSY') {
+          return await followCliInstall(toolKey, { onEvent: emit, pollMs });
+        }
+        final = _refusal(res.status, body);
+        emit(final);
+        return final;
+      }
+      final = await _readNdjson(res, emit);
+    } catch {
+      final = null;
+    }
+    if (!final) {
+      // The connection closed without an end: the server may still be at it.
+      return await followCliInstall(toolKey, { onEvent: emit, pollMs });
+    }
+    if (final.ok) await recheckCliStatus(toolKey).catch(() => null);
+    return final;
+  })().finally(() => { _installs.delete(toolKey); });
+  _installs.set(toolKey, { promise, listeners });
+  return promise;
+}
+
+/** Whether this page has an install of this CLI under way. */
+export function isCliInstalling(toolKey) {
+  return _installs.has(toolKey);
 }

package/neural-interface/public/shared/cp/cp-events.js

@@ -626,7 +626,8 @@ export function statusRows({ init = null, account = null, tab = {} } = {}) {
   add('Model', init.model);
   add('Claude Code', init.cliVersion + (tab.sdkVersion ? ` · SDK ${tab.sdkVersion}` : ''));
   add('Working directory', init.cwd);
-  if (account?.email || account?.organization) add('Account', [account.email, account.organization, account.subscriptionType].filter(Boolean).join(' · '));
+  if (account?.authMethod === 'apiKey') add('Account', 'API key');
+  else if (account?.email || account?.organization) add('Account', [account.email, account.organization, account.subscriptionType].filter(Boolean).join(' · '));
   add('Credential', KEY_SOURCES[init.apiKeySource] || init.apiKeySource);
   add('Permission mode', init.permissionMode);
   if (init.effort) add('Effort', init.effort);

package/neural-interface/public/shared/cp/cp-styles.js

@@ -166,6 +166,10 @@ export const CP_STYLES = `
 #cp-mode .cp-dd-item-note { margin-left: 6px; font-size: 9.5px; color: rgba(255,255,255,0.35); }
 .cp-plan-btn-bypass { border-color: rgba(239,112,112,0.45) !important; color: #ef7070 !important; }
 
+/* ═══ Claude accounts: the header account menu is account-menu.js (shared with the Codex panel, its own styles) ═══ */
+/* Its trigger gives way before the session name does. */
+.cp-header-actions:has(> .acct-menu-trigger) { flex-shrink: 1; min-width: 0; }
+
 /* ═══ Rewind ═══ */
 .msg-user { position: relative; }
 .cp-rewind-btn { position: absolute; top: -8px; right: 4px; opacity: 0; pointer-events: none; transition: opacity 0.15s; font: 600 9px/1 Inter, sans-serif; color: rgba(220,195,140,0.9); background: rgba(30,25,18,0.95); border: 1px solid rgba(212,168,72,0.35); border-radius: 8px; padding: 3px 7px; cursor: pointer; z-index: 3; }
@@ -361,4 +365,46 @@ a.cp-chip:hover { text-decoration: underline; }
 .cp-worker-end .post-plan-actions { margin-top: 8px; }
 .cp-worker-end .post-plan-action:disabled { opacity: 0.45; cursor: default; }
 .cp-worker-end .post-plan-action:focus-visible { outline: 1px solid rgba(255,255,255,0.45); outline-offset: 2px; }
+
+/* ═══ CLI banner (ui-cli-banner.js): Claude Code not installed / installing / failed to start ═══ */
+/* Above the transcript, warm like the panel; red once something failed, green for where an install put it. */
+.cp-cli-banner { flex-shrink: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; margin: 6px 8px 0; padding: 10px 12px; border: 1px solid rgba(255,180,80,0.45); border-radius: 8px; background: rgba(255,180,80,0.08); color: rgba(255,235,200,0.92); font-size: 11px; line-height: 1.4; pointer-events: auto; position: relative; z-index: 5; }
+.cp-cli-banner [hidden] { display: none !important; }
+.cp-cli-banner--broken, .cp-cli-banner--failed { border-color: rgba(239,112,112,0.45); background: rgba(239,112,112,0.07); }
+.cp-cli-banner--done { border-color: rgba(95,207,131,0.4); background: rgba(95,207,131,0.06); }
+.cp-cli-banner-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,180,80,0.25); color: rgba(255,210,140,1); font-weight: 700; }
+.cp-cli-banner--broken .cp-cli-banner-icon, .cp-cli-banner--failed .cp-cli-banner-icon { background: rgba(239,112,112,0.2); color: #ef7070; }
+.cp-cli-banner--done .cp-cli-banner-icon { background: rgba(95,207,131,0.18); color: #5fcf83; }
+.cp-cli-banner--installing .cp-cli-banner-icon { animation: cp-cli-working 1.2s ease-in-out infinite; }
+@keyframes cp-cli-working { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
+.cp-cli-banner--nudge { animation: cp-cli-nudge 0.5s ease; }
+@keyframes cp-cli-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
+.cp-cli-banner-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.cp-cli-banner-title { font-size: 12px; font-weight: 600; color: rgba(255,210,140,0.95); }
+.cp-cli-banner--broken .cp-cli-banner-title, .cp-cli-banner--failed .cp-cli-banner-title { color: #ef7070; }
+.cp-cli-banner--done .cp-cli-banner-title { color: #5fcf83; }
+.cp-cli-banner-body, .cp-cli-banner-note, .cp-cli-banner-step { font-size: 11px; color: rgba(255,255,255,0.7); overflow-wrap: anywhere; }
+.cp-cli-banner-command { display: flex; align-items: flex-start; gap: 6px; }
+.cp-cli-banner-command code, .cp-cli-banner-error code { flex: 1; min-width: 0; padding: 3px 6px; background: rgba(0,0,0,0.35); border-radius: 4px; font: 10.5px/1.45 "SF Mono", Menlo, monospace; color: rgba(255,255,255,0.85); white-space: pre-wrap; word-break: break-all; user-select: text; }
+.cp-cli-banner-error code { display: block; max-height: 96px; overflow: auto; color: rgba(255,200,200,0.92); }
+.cp-cli-banner-copy { flex-shrink: 0; height: 22px; padding: 0 8px; border: 1px solid rgba(255,255,255,0.14); border-radius: 5px; background: transparent; color: rgba(255,255,255,0.7); font-family: inherit; font-size: 11px; cursor: pointer; }
+.cp-cli-banner-copy:hover { color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.3); }
+.cp-cli-banner-progress { display: flex; flex-direction: column; gap: 4px; }
+.cp-cli-banner-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
+.cp-cli-banner-bar > span { display: block; height: 100%; width: 0; background: rgba(212,162,127,0.85); transition: width 0.2s ease; }
+.cp-cli-banner-log { margin: 0; max-height: 84px; overflow: auto; padding: 4px 6px; background: rgba(0,0,0,0.3); border-radius: 4px; font: 10px/1.45 "SF Mono", Menlo, monospace; color: rgba(255,255,255,0.55); white-space: pre-wrap; word-break: break-all; }
+.cp-cli-banner-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
+.cp-cli-banner-install, .cp-cli-banner-link, .cp-cli-banner-path, .cp-cli-banner-recheck, .cp-cli-banner-dismiss { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 10px; font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1; border-radius: 5px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.9); text-decoration: none; cursor: pointer; user-select: none; }
+.cp-cli-banner-install { background: rgba(212,162,127,0.22); border-color: rgba(212,162,127,0.55); color: rgba(255,236,220,0.96); }
+.cp-cli-banner-install:hover:not(:disabled) { background: rgba(212,162,127,0.34); border-color: rgba(212,162,127,0.75); }
+.cp-cli-banner-link:hover, .cp-cli-banner-path:hover:not(:disabled), .cp-cli-banner-recheck:hover:not(:disabled), .cp-cli-banner-dismiss:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.4); }
+.cp-cli-banner-install:disabled, .cp-cli-banner-path:disabled, .cp-cli-banner-recheck:disabled { opacity: 0.5; cursor: default; }
+.cp-cli-banner button:focus-visible, .cp-cli-banner a:focus-visible { outline: 2px solid rgba(212,162,127,0.9); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  .cp-cli-banner--installing .cp-cli-banner-icon, .cp-cli-banner--nudge { animation: none; }
+  .cp-cli-banner--nudge { box-shadow: 0 0 0 1px rgba(255,180,80,0.8); }
+  .cp-cli-banner-bar > span { transition: none; }
+}
+.claude-panel.cp-cli-blocked .cp-send { opacity: 0.4 !important; cursor: not-allowed !important; }
+.claude-panel.cp-cli-blocked .cp-input { opacity: 0.7; }
 `;

package/neural-interface/public/shared/desktop-bridge.js

@@ -0,0 +1,39 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — the desktop app's bridge
+// ═══════════════════════════════════════════
+//
+// Inside the SynaBun desktop app (packaging/desktop) the window's preload puts
+// `window.synabunDesktop` on the pages of the app's own server: the app's
+// version and system, its updater, and Quit. A browser tab has none, and every
+// caller then keeps what an npm or Git install does.
+//
+// No imports and no DOM: `node --test` loads this file as it is
+// (tests/desktop-update-view.test.mjs).
+
+/** The bridge of the desktop app, or null in a browser. Only one with the updater the app exposes counts. */
+export function desktopBridge(win = globalThis.window) {
+  let bridge;
+  try { bridge = win?.synabunDesktop; } catch { return null; }
+  if (!bridge || typeof bridge !== 'object') return null;
+  const updates = bridge.updates;
+  if (!updates || typeof updates !== 'object' || typeof updates.state !== 'function' || typeof updates.check !== 'function') return null;
+  return bridge;
+}
+
+/** True inside the window of the SynaBun desktop app. */
+export function isDesktopApp(win = globalThis.window) {
+  return desktopBridge(win) !== null;
+}
+
+/**
+ * The title bar of the desktop app's main window (packaging/desktop/src/titlebar.mjs): its facts
+ * ({ style, platform, height, controls, appMenu }), its state, the app's menu and the caption buttons' colours.
+ * Null in a browser, in the installed PWA, and in any other window of the app (a detached session has a native frame).
+ */
+export function desktopWindow(win = globalThis.window) {
+  const api = desktopBridge(win)?.window;
+  if (!api || typeof api !== 'object' || typeof api.state !== 'function' || typeof api.setColors !== 'function') return null;
+  const facts = api.titleBar;
+  if (!facts || facts.style !== 'overlay' || !['darwin', 'win32', 'linux'].includes(facts.platform)) return null;
+  return api;
+}

package/neural-interface/public/shared/desktop-titlebar-page.js

@@ -0,0 +1,59 @@
+// ═══════════════════════════════════════════
+// SynaBun Neural Interface — the desktop app's title bar on a page without the navbar
+// ═══════════════════════════════════════════
+//
+// The SynaBun desktop app's main window has no native title bar
+// (packaging/desktop/src/titlebar.mjs). A page of it without #title-bar
+// (onboarding.html) declares that it lays out its own top with
+// <meta name="synabun-titlebar">, then calls initDesktopPageTitleBar(): a strip
+// along its top drags the window (the system double-clicks it too) and the
+// caption buttons (Windows, Linux) take the page's background. The strip comes
+// first in the page, under what the page draws there, so a control drawn over
+// it keeps its clicks when it says -webkit-app-region: no-drag.
+//
+// Imports only import-free modules: the wizard still loads nothing of the app.
+// The map pages use desktop-titlebar.js.
+
+import { desktopWindow } from './desktop-bridge.js';
+import { colorsKey, overlayColorsFor } from './desktop-titlebar-view.js';
+
+/** The bar's text tone for the caption symbols (DESIGN.md nav-bar: text-primary), as the page defines it now. */
+export function textTone(doc, view) {
+  return view.getComputedStyle(doc.documentElement).getPropertyValue('--t-primary').trim() || 'rgba(255, 255, 255, 0.7)';
+}
+
+/** A sender of the caption buttons' colours that only sends a change; the page keeps the last pair on <html>. */
+export function colorSender(api, doc) {
+  let last = '';
+  return (colors) => {
+    const key = colorsKey(colors);
+    if (!key || key === last) return;
+    last = key;
+    doc.documentElement.dataset.desktopTitlebarColors = key;
+    Promise.resolve(api.setColors(colors)).catch(() => {});
+  };
+}
+
+/** A page of the main window without the navbar: the strip, the classes, the caption colours. Null outside the app. */
+export function initDesktopPageTitleBar({ doc = document, view = window } = {}) {
+  const api = desktopWindow(view);
+  if (!api || !doc.body) return null;
+  const facts = api.titleBar;
+  const html = doc.documentElement;
+  html.classList.add('desktop-titlebar', `desktop-titlebar--${facts.platform}`, 'desktop-titlebar--page');
+  let strip = doc.getElementById('synabun-desktop-drag-strip');
+  if (!strip) {
+    strip = doc.createElement('div');
+    strip.id = 'synabun-desktop-drag-strip';
+    strip.setAttribute('aria-hidden', 'true');
+    strip.style.cssText = `position:fixed;top:0;left:0;right:0;height:env(titlebar-area-height,${facts.height}px);`
+      + '-webkit-app-region:drag;app-region:drag;z-index:1;pointer-events:none;';
+    doc.body.prepend(strip);
+  }
+  const send = colorSender(api, doc);
+  const sendColors = () => {
+    try { send(overlayColorsFor({ bar: 'transparent', base: view.getComputedStyle(doc.body).backgroundColor, text: textTone(doc, view) })); } catch {}
+  };
+  sendColors();
+  return { facts, strip, refresh: sendColors };
+}