synabun 2.0.5 → 2.0.9

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

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

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

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

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

@@ -419,9 +419,12 @@ export function createChildPanel({
         _statusEl.removeAttribute('data-tooltip');
       }
     }
+    const title = sessionTitleFor(store);
     if (_titleEl && !_titleEl.querySelector('.ocpv2-rename-input')) {
-      _titleEl.textContent = sessionTitleFor(store);
+      _titleEl.textContent = title;
     }
+    // The whole name, for when the header shows only part of it.
+    if (_titleEl?.parentElement) _titleEl.parentElement.title = title;
     if (_renameBtn) _renameBtn.disabled = !s.sessionId;
     renderCrumbs();
     renderPill();

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

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

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

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

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

@@ -98,8 +98,12 @@ const CSS = `
   padding: 5px 10px;
   border-radius: 8px 0 0 8px;
   transition: background 0.15s, color 0.15s;
-  max-width: 100%;
-  min-width: 0;
+  /* The session name gives way first: it starts from nothing and takes only
+     the room the pencil and the actions leave, up to its own width, so a long
+     name can never push them. 32px keeps the caret in view. */
+  flex: 1 1 0;
+  min-width: 32px;
+  max-width: max-content;
   overflow: hidden;
 }
 .ocpv2-session-btn:hover {
@@ -135,6 +139,7 @@ const CSS = `
 .ocpv2-rename-input:focus { border-color: rgba(100,160,255,0.5); }
 .ocpv2-rename-input::placeholder { color: rgba(255,255,255,0.3); }
 .ocpv2-session-btn .ocpv2-dd-arrow {
+  flex-shrink: 0;
   font-size: 9px;
   padding: 4px 6px;
   margin: -4px -6px -4px 0;
@@ -164,6 +169,8 @@ const CSS = `
   -webkit-tap-highlight-color: transparent;
   touch-action: manipulation;
   flex-shrink: 0;
+  /* The actions' own gap, kept when the name fills the row. */
+  margin-right: 3px;
 }
 .ocpv2-header-rename:hover:not(:disabled) {
   color: rgba(100,160,255,0.95);
@@ -359,6 +366,8 @@ const CSS = `
   margin-left: auto;
   flex-shrink: 0;
 }
+/* The header buttons never shrink, whatever the session name's length. */
+.ocpv2-actions > * { flex-shrink: 0; }
 .ocpv2-btn {
   display: flex;
   align-items: center;
@@ -2718,16 +2727,56 @@ const CHILD_CSS = `
      set inline via --right-panel-offset-{owner}. */
   border: 0.5px dashed rgba(180, 200, 255, 0.18);
 }
+/* A query container measured in controls: 1em is one header button (24px
+   docked, the window's control size when detached, which follows the font
+   scale), so the thresholds below hold at any scale. Nothing in this row
+   inherits it: the crumbs and the title set their own sizes. */
+.ocpv2-panel-child > .ocpv2-header {
+  container: ocpv2-child-header / inline-size;
+  font-size: 24px;
+}
+.ocpv2-panel-child.sp-floating > .ocpv2-header { font-size: var(--fw-header-control-size); }
+/* The sub-agent's name keeps a readable 88px (or its own width if shorter):
+   the chain of parents gives way first. */
+.ocpv2-panel-child .ocpv2-session-btn { flex: 1 0 88px; }
+/* The chain of parents: at most 40% of the row, and it gives way before the
+   name. When it is cut, it is cut from the left, so the nearest parent (the
+   last crumb, which keeps its own width, at most 140px) stays readable. */
 .ocpv2-panel-child .ocpv2-child-crumbs {
   display: inline-flex;
   align-items: center;
+  justify-content: flex-end;
   gap: 3px;
   min-width: 0;
+  max-width: 40%;
   flex-shrink: 1;
   overflow: hidden;
   margin-right: 6px;
 }
 .ocpv2-panel-child .ocpv2-child-crumbs:empty { display: none; }
+.ocpv2-panel-child .ocpv2-child-crumbs > .ocpv2-child-crumb:last-child { flex-shrink: 0; }
+/* Narrow headers, in order: with less than 140px for the chain, only the
+   nearest parent shows, truncated; with less than 64px, the chain is hidden
+   and the name goes down to its caret. Room counted in controls (em) plus px:
+   docked, the pencil and six buttons are 7em with 18px of gaps; detached, the
+   move handle makes 8em and the window's 6px gaps 42px. Thresholds: the
+   name's 88px + the chain's 6px margin + 140px or 64px + that row. */
+@container ocpv2-child-header (width < calc(7em + 252px)) {
+  .ocpv2-panel-child:not(.sp-floating) .ocpv2-child-crumbs > :not(:last-child) { display: none; }
+  .ocpv2-panel-child:not(.sp-floating) .ocpv2-child-crumbs > .ocpv2-child-crumb:last-child { flex-shrink: 1; min-width: 0; }
+}
+@container ocpv2-child-header (width < calc(7em + 176px)) {
+  .ocpv2-panel-child:not(.sp-floating) .ocpv2-child-crumbs { display: none; }
+  .ocpv2-panel-child:not(.sp-floating) .ocpv2-session-btn { flex: 1 1 0; }
+}
+@container ocpv2-child-header (width < calc(8em + 276px)) {
+  .ocpv2-panel-child.sp-floating .ocpv2-child-crumbs > :not(:last-child) { display: none; }
+  .ocpv2-panel-child.sp-floating .ocpv2-child-crumbs > .ocpv2-child-crumb:last-child { flex-shrink: 1; min-width: 0; }
+}
+@container ocpv2-child-header (width < calc(8em + 200px)) {
+  .ocpv2-panel-child.sp-floating .ocpv2-child-crumbs { display: none; }
+  .ocpv2-panel-child.sp-floating .ocpv2-session-btn { flex: 1 1 0; }
+}
 .ocpv2-panel-child .ocpv2-child-crumb-sep {
   flex-shrink: 0;
   color: rgba(180, 200, 255, 0.4);
@@ -3567,6 +3616,124 @@ const PARITY_CSS = `
 .ocpv2-help-name { flex-shrink: 0; color: rgba(232,224,220,0.95); font-family: 'JetBrains Mono', ui-monospace, monospace; }
 .ocpv2-help-text { flex: 1; min-width: 0; color: rgba(255,255,255,0.62); overflow-wrap: anywhere; }
 .ocpv2-help-row .ocpv2-session-item-meta { flex-shrink: 0; margin-left: 0; }
+
+/* ── CLI banner (ui-cli-banner.js): OpenCode not installed / installing / failed to start ── */
+/* Mono like the rest of the panel; the panel's own amber, error red and green. */
+.ocp-cli-banner {
+  flex-shrink: 0;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  margin: 6px 8px 0;
+  padding: 10px 12px;
+  border: 1px solid rgba(232,180,80,0.32);
+  border-radius: 8px;
+  background: rgba(232,180,80,0.04);
+  color: rgba(255,255,255,0.86);
+  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
+  font-size: 11px;
+  line-height: 1.45;
+  position: relative;
+  z-index: 5;
+}
+.ocp-cli-banner [hidden] { display: none !important; }
+.ocp-cli-banner--broken, .ocp-cli-banner--failed { border-color: rgba(220,100,100,0.32); background: rgba(220,100,100,0.05); }
+.ocp-cli-banner--done { border-color: rgba(140,210,170,0.32); background: rgba(140,210,170,0.05); }
+.ocp-cli-banner-icon {
+  width: 22px; height: 22px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 50%;
+  background: rgba(232,180,80,0.14);
+  border: 1px solid rgba(232,180,80,0.28);
+  color: rgba(255,200,120,0.95);
+  font-weight: 700;
+}
+.ocp-cli-banner--broken .ocp-cli-banner-icon, .ocp-cli-banner--failed .ocp-cli-banner-icon { background: rgba(220,100,100,0.12); border-color: rgba(220,100,100,0.3); color: rgba(255,166,166,0.92); }
+.ocp-cli-banner--done .ocp-cli-banner-icon { background: rgba(140,210,170,0.14); border-color: rgba(140,210,170,0.28); color: rgba(180,230,200,0.92); }
+.ocp-cli-banner--installing .ocp-cli-banner-icon { animation: ocpv2-abort-sweep 1.2s ease-in-out infinite; }
+.ocp-cli-banner--nudge { animation: ocp-cli-nudge 0.5s ease; }
+@keyframes ocp-cli-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
+.ocp-cli-banner-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+.ocp-cli-banner-title { font-size: 11.5px; font-weight: 600; color: rgba(255,200,120,0.95); }
+.ocp-cli-banner--broken .ocp-cli-banner-title, .ocp-cli-banner--failed .ocp-cli-banner-title { color: rgba(255,166,166,0.92); }
+.ocp-cli-banner--done .ocp-cli-banner-title { color: rgba(180,230,200,0.92); }
+.ocp-cli-banner-body, .ocp-cli-banner-note, .ocp-cli-banner-step { color: rgba(255,255,255,0.62); overflow-wrap: anywhere; }
+.ocp-cli-banner-command { display: flex; align-items: flex-start; gap: 6px; }
+.ocp-cli-banner-command code, .ocp-cli-banner-error code {
+  flex: 1;
+  min-width: 0;
+  padding: 3px 6px;
+  background: rgba(0,0,0,0.3);
+  border: 1px solid rgba(255,255,255,0.06);
+  border-radius: 4px;
+  font: inherit;
+  font-size: 10.5px;
+  color: rgba(232,224,220,0.95);
+  white-space: pre-wrap;
+  word-break: break-all;
+  user-select: text;
+}
+.ocp-cli-banner-error code { display: block; max-height: 96px; overflow: auto; color: rgba(255,166,166,0.92); }
+.ocp-cli-banner-copy {
+  flex-shrink: 0;
+  height: 22px;
+  padding: 0 8px;
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 5px;
+  background: transparent;
+  color: rgba(255,255,255,0.62);
+  font: inherit;
+  font-size: 10.5px;
+  cursor: pointer;
+}
+.ocp-cli-banner-copy:hover { color: rgba(252,246,240,0.98); border-color: rgba(232,224,220,0.3); }
+.ocp-cli-banner-progress { display: flex; flex-direction: column; gap: 4px; }
+.ocp-cli-banner-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; }
+.ocp-cli-banner-bar > span { display: block; height: 100%; width: 0; background: rgba(232,224,220,0.7); transition: width 0.2s ease; }
+.ocp-cli-banner-log {
+  margin: 0;
+  max-height: 84px;
+  overflow: auto;
+  padding: 4px 6px;
+  background: rgba(0,0,0,0.25);
+  border-radius: 4px;
+  font: inherit;
+  font-size: 10px;
+  line-height: 1.45;
+  color: rgba(255,255,255,0.5);
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+.ocp-cli-banner-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
+.ocp-cli-banner-install, .ocp-cli-banner-link, .ocp-cli-banner-path, .ocp-cli-banner-recheck, .ocp-cli-banner-dismiss {
+  display: inline-flex; align-items: center; gap: 4px;
+  height: 22px;
+  padding: 0 10px;
+  font: inherit;
+  font-size: 11.5px;
+  font-weight: 500;
+  line-height: 1;
+  border-radius: 5px;
+  border: 1px solid rgba(255,255,255,0.14);
+  background: rgba(255,255,255,0.04);
+  color: rgba(255,255,255,0.86);
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+}
+.ocp-cli-banner-install { background: rgba(232,224,220,0.15); border-color: rgba(232,224,220,0.3); color: rgba(245,239,232,0.95); }
+.ocp-cli-banner-install:hover:not(:disabled) { background: rgba(232,224,220,0.25); border-color: rgba(232,224,220,0.45); }
+.ocp-cli-banner-link:hover, .ocp-cli-banner-path:hover:not(:disabled), .ocp-cli-banner-recheck:hover:not(:disabled), .ocp-cli-banner-dismiss:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.26); }
+.ocp-cli-banner-install:disabled, .ocp-cli-banner-path:disabled, .ocp-cli-banner-recheck:disabled { opacity: 0.5; cursor: default; }
+.ocp-cli-banner button:focus-visible, .ocp-cli-banner a:focus-visible { outline: 2px solid rgba(255,255,255,0.7); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) {
+  .ocp-cli-banner--installing .ocp-cli-banner-icon, .ocp-cli-banner--nudge { animation: none; }
+  .ocp-cli-banner--nudge { box-shadow: 0 0 0 1px rgba(232,180,80,0.6); }
+  .ocp-cli-banner-bar > span { transition: none; }
+}
+.ocpv2-panel.ocp-cli-blocked .ocpv2-compose-btn:not(.ocpv2-compose-abort) { opacity: 0.4; cursor: not-allowed; }
+.ocpv2-panel.ocp-cli-blocked .ocpv2-compose-input { opacity: 0.7; }
 `;
 
 export function injectStyles() {

package/neural-interface/public/shared/pwa-install-page.js

@@ -1,5 +1,6 @@
 import { canPromptPwaInstall, initPwaInstall, installGuideMode, installGuideRequested, isStandalone,
   leavePwaInstallHandoff, requestPwaInstall } from './pwa-install.js';
+import { isDesktopApp } from './desktop-bridge.js';
 
 // The wizard (first run) and the main UI (setup done) open the browser's dialog from a press the user makes
 // anyway, so a browser that has one shows this page only when Apps > Install as App asked for it. true, false,
@@ -12,7 +13,8 @@ async function setupComplete() {
   } catch { return null; }
 }
 
-if (isStandalone()) location.replace('/');
+// Already the installed app, or the SynaBun desktop app's own window: nothing to install here.
+if (isStandalone() || isDesktopApp()) location.replace('/');
 else {
   const pt = navigator.language.toLowerCase().startsWith('pt');
   const copy = pt ? {