synabun 2.0.0-beta → 2.0.0

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

@@ -111,7 +111,7 @@ export function buildJudgmentsTab() {
       </div>
 
       ${section({ id: 'jv-sec-connection', title: kit.tx('settings.redesign.judgments.connection'), badgeId: 'jv-key-source-badge', body: `
-        <div class="settings-hint" style="margin-bottom:10px">${kit.te('settings.redesign.judgments.jevTypesafeSystemOneReturnsTyped')} <code>~/.synabun/.env</code> ${kit.te('settings.redesign.judgments.andNeverLeavesTheServerOnly')}</div>
+        <div class="settings-hint" style="margin-bottom:10px">${kit.te('settings.redesign.judgments.jevTypesafeSystemOneReturnsTyped')} <code>~/.synabun/.env</code> ${kit.te('settings.redesign.judgments.andNeverLeavesTheServerOnly')} ${kit.te('settings.redesign.judgments.learnMoreAtTypesafe')} <a href="https://typesafe.ai" target="_blank" rel="noopener noreferrer">typesafe.ai</a>.</div>
         <div class="settings-field">
           <label for="jv-api-key">${kit.te('settings.redesign.judgments.apiKey')}</label>
           <div class="settings-key-row" style="display:flex;gap:6px">

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

@@ -6,12 +6,40 @@
 import { fetchHealth, startHealth } from './api.js';
 import { emit } from './state.js';
 import { t } from './i18n.js';
+import {
+  START_STORAGE, createStartBridge, fetchStartBeacon, isMacPlatform, isWindowsPlatform,
+  manualStartCommands, openStartLink, startBeaconTarget, startButtonUsable, startStatusView,
+} from './start-bridge.js';
+// 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';
 
 const $ = (id) => document.getElementById(id);
 
 // ── Internal refs (resolved once on init) ──
 let _statusDot = null;
 let _initCallback = null;
+// The server-offline state: watches for the server and owns the Start button.
+let _offlineBridge = null;
+// The title the overlay was given for "offline" (a start replaces it while it runs).
+let _offlineTitle = '';
+// The mascot rig in the overlay, mounted the first time the server is offline.
+let _mascot = null;
+
+// What the mascot does for each thing the page knows about a start
+// (startStatusView's `mascot`), as poses of the shared rig.
+const MASCOT_POSE = {
+  asleep: 'sleep',
+  waking: 'wait',
+  working: 'think',
+  ready: 'success',
+  failed: 'error',
+  stalled: 'offline',
+};
+
+function stored(key) {
+  try { return localStorage.getItem(key); } catch { return null; }
+}
 
 // ═══════════════════════════════════════════
 // PUBLIC API
@@ -38,18 +66,31 @@ export function showLoadingError(title, sub, canStart, serverOffline) {
   const $sub = $('loading-sub');
   if ($text) $text.textContent = title;
   if ($sub) $sub.textContent = sub;
+  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));
   const $action = $('loading-action');
-  if (canStart) {
+  const $btn = $('loading-action-btn');
+  if (canStart || offlineStart) {
     if ($action) $action.style.display = 'block';
+    if ($btn) $btn.disabled = false;
     const $label = $('loading-action-label');
-    if ($label) $label.textContent = t('common.start');
+    if ($label) $label.textContent = serverOffline ? t('loading.startServer') : t('common.start');
   } else {
     if ($action) $action.style.display = 'none';
   }
 
-  const $status = $('loading-action-status');
-  if ($status) $status.textContent = '';
+  clearStartStatus();
+
+  if (serverOffline) {
+    const $hint = $('loading-server-cmd-hint');
+    if ($hint) $hint.textContent = offlineStart ? t('loading.runCommandOr') : t('loading.runCommandSetup');
+    watchForServer();
+  } else {
+    stopWatchingForServer();
+  }
 }
 
 /**
@@ -78,6 +119,7 @@ function resetLoadingToConnecting() {
   if (!$overlay) return;
 
   $overlay.classList.remove('error', 'server-offline');
+  stopWatchingForServer();
 
   const $text = $('loading-text');
   const $sub = $('loading-sub');
@@ -88,6 +130,7 @@ function resetLoadingToConnecting() {
   if ($sub) $sub.textContent = t('loading.initializingNeural');
   if ($action) $action.style.display = 'none';
   if ($actionStatus) $actionStatus.textContent = '';
+  clearStartStatus();
   if (_statusDot) _statusDot.classList.remove('error');
 }
 
@@ -95,6 +138,24 @@ function resetLoadingToConnecting() {
 // HEALTH CHECK (called during init)
 // ═══════════════════════════════════════════
 
+/**
+ * Keep what a health answer says about this install for the moment the server
+ * is down and cannot be asked: where it lives, how it was installed, and
+ * whether the Start Server launcher is registered.
+ */
+export function rememberHealth(health) {
+  if (!health) return;
+  try {
+    if (health.projectDir) {
+      localStorage.setItem('synabun-project-dir', health.projectDir);
+    }
+    if (health.install) localStorage.setItem(START_STORAGE.install, health.install);
+    if (health.startLauncher) localStorage.setItem(START_STORAGE.launcher, health.startLauncher);
+    if (health.entry) localStorage.setItem(START_STORAGE.entry, health.entry);
+  } catch {}
+  if (health.projectDir) updateCmdText(health.projectDir);
+}
+
 /**
  * Run the health check pre-flight. If the database is unhealthy,
  * show the appropriate loading error. Returns true if healthy (or
@@ -104,9 +165,7 @@ function resetLoadingToConnecting() {
 export async function checkHealth() {
   try {
     const health = await fetchHealth();
-    if (health.projectDir) {
-      localStorage.setItem('synabun-project-dir', health.projectDir);
-    }
+    rememberHealth(health);
     if (!health.ok) {
       const messages = {
         db_missing:         [t('loading.health.databaseUnreachable.title'), health.detail || t('loading.health.databaseUnreachable.sub')],
@@ -132,7 +191,158 @@ export async function checkHealth() {
  */
 function updateCmdText(projectDir) {
   const cmdEl = $('loading-cmd-text');
-  if (cmdEl) cmdEl.textContent = `cd "${projectDir}" ; npm start`;
+  if (!cmdEl) return;
+  const commands = manualStartCommands({
+    projectDir,
+    install: stored(START_STORAGE.install),
+    entry: stored(START_STORAGE.entry),
+    windows: isWindowsPlatform(navigator),
+  });
+  // One box: the command for this install (the checkout's when it is not known).
+  cmdEl.textContent = commands[commands.length - 1].command;
+}
+
+// ═══════════════════════════════════════════
+// INTERNAL — Server offline: Start Server + reconnect
+// ═══════════════════════════════════════════
+
+function stopWatchingForServer() {
+  if (_offlineBridge) _offlineBridge.stop();
+  _offlineBridge = null;
+  poseMascot('asleep');
+}
+
+/** The lines a start writes under the button, emptied. */
+function clearStartStatus() {
+  for (const id of ['loading-action-status', 'loading-action-elapsed', 'loading-action-hint', 'loading-action-log']) {
+    const el = $(id);
+    if (el) el.textContent = '';
+  }
+  const $trail = $('loading-action-trail');
+  if ($trail) $trail.replaceChildren();
+}
+
+/**
+ * The overlay's mascot as the shared rig, so a start can be acted out. The
+ * markup's own still drawing stays as the fallback when the rig cannot mount.
+ */
+function mountMascot() {
+  if (_mascot) return;
+  const host = $('loading-mascot');
+  if (!host) return;
+  try {
+    const still = host.querySelector('svg');
+    _mascot = createMascot(host, { width: 160, height: 80, pose: 'sleep', active: false });
+    if (still && still !== _mascot.el) still.style.display = 'none';
+  } catch {
+    _mascot = null;
+  }
+}
+
+/** 'asleep' is the still sleeping face (the overlay's own bob and z carry it); every other state plays its pose. */
+function poseMascot(state) {
+  const host = $('loading-mascot');
+  if (host) host.setAttribute('data-state', state);
+  if (!_mascot) return;
+  try {
+    _mascot.setPose(MASCOT_POSE[state] || 'sleep');
+    _mascot.setActive(state !== 'asleep');
+  } catch {}
+}
+
+/**
+ * Draw one snapshot of the start: the sentence (a live region, written only
+ * when it changes), the page's own clock, and the steps the launcher reported
+ * with the time each one happened. Nothing here is estimated.
+ */
+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) : '');
+
+  poseMascot(view.mascot);
+
+  const $text = $('loading-text');
+  if ($text) {
+    const title = view.mascot === 'waking' || view.mascot === 'working' ? t('loading.start.headingStarting')
+      : view.mascot === 'ready' ? t('loading.start.headingReady')
+        : view.mascot === 'failed' ? t('loading.start.headingFailed')
+          : _offlineTitle || t('loading.serverOffline');
+    if ($text.textContent !== title) $text.textContent = title;
+  }
+
+  const btn = $('loading-action-btn');
+  const $label = $('loading-action-label');
+  if (btn) btn.disabled = view.busy || view.state === 'online';
+  if ($label) {
+    $label.textContent = view.button === 'starting' ? t('loading.starting')
+      : view.button === 'retry' ? t('common.retry') : t('loading.startServer');
+  }
+
+  const $status = $('loading-action-status');
+  const line = say(view.headline);
+  if ($status && $status.textContent !== line) $status.textContent = line;
+
+  const $elapsed = $('loading-action-elapsed');
+  if ($elapsed) {
+    $elapsed.textContent = view.elapsed;
+    $elapsed.setAttribute('aria-label', view.elapsed ? `${t('loading.start.elapsedLabel')}: ${view.elapsed}` : '');
+  }
+
+  const $hint = $('loading-action-hint');
+  if ($hint) $hint.textContent = say(view.hint);
+
+  const $trail = $('loading-action-trail');
+  if ($trail) {
+    $trail.replaceChildren(...view.trail.map((row) => {
+      const item = document.createElement('li');
+      const what = document.createElement('span');
+      what.textContent = t(`loading.start.${row.key}`);
+      const when = document.createElement('span');
+      when.className = 'at';
+      when.textContent = row.time;
+      item.append(what, when);
+      return item;
+    }));
+  }
+
+  const $log = $('loading-action-log');
+  if ($log) $log.textContent = view.error?.log ? t('loading.start.failedLog', { path: view.error.log }) : '';
+}
+
+/**
+ * While the overlay says the server is offline: keep asking for it, and let
+ * the Start button hand the OS a synabun://start link. Reconnects by itself
+ * the moment the server answers, however it was started. While a start is
+ * under way it shows what the launcher itself reports (its beacon), never a
+ * guess: see start-bridge.js.
+ */
+function watchForServer() {
+  if (_offlineBridge) return;
+  mountMascot();
+  const beaconAt = startBeaconTarget(window.location);
+  const bridge = createStartBridge({
+    probe: async () => {
+      const health = await fetchHealth();
+      return !!health && health.ok !== false;
+    },
+    launch: () => openStartLink({ document, location: window.location, userAgent: navigator.userAgent }),
+    beacon: beaconAt ? () => fetchStartBeacon(beaconAt) : null,
+    port: beaconAt ? beaconAt.port : 0,
+    onUpdate(snap) {
+      if (_offlineBridge !== bridge) return;
+      renderStart(snap);
+    },
+    onState(state) {
+      if (_offlineBridge !== bridge) return;
+      if (state !== 'online') return;
+      resetLoadingToConnecting();
+      emit('loading:retried');
+      if (_initCallback) _initCallback();
+    },
+  });
+  _offlineBridge = bridge;
+  bridge.watch();
 }
 
 // ═══════════════════════════════════════════
@@ -144,6 +354,9 @@ function updateCmdText(projectDir) {
  * Calls /api/health/start and re-triggers init on success.
  */
 async function handleStartAction() {
+  // Server offline: nothing to call, the OS starts it.
+  if (_offlineBridge) { _offlineBridge.start(); return; }
+
   const btn = $('loading-action-btn');
   const $status = $('loading-action-status');
   const $label = $('loading-action-label');
@@ -165,8 +378,6 @@ async function handleStartAction() {
       if ($label) $label.textContent = t('common.retry');
     }
   } catch (err) {
-    // Server is unreachable — try protocol handler as fallback
-    window.location.href = 'synabun://start';
     if ($status) $status.textContent = t('loading.somethingWrong');
     if (btn) btn.disabled = false;
     if ($label) $label.textContent = t('common.retry');

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

@@ -9,6 +9,7 @@ import { storage } from './storage.js';
 import { KEYS } from './constants.js';
 import { getMenuItems } from './registry.js';
 import { openHelp } from './ui-help.js';
+import { initPwaInstall, isStandalone, requestPwaInstall } from './pwa-install.js';
 import { registerAction } from './ui-keybinds.js';
 import { isGuest, hasPermission } from './ui-sync.js';
 import { sendToPanel } from './ui-claude-panel.js';
@@ -83,7 +84,7 @@ export function initMenubar() {
     const dropdown = document.querySelector('.menubar-item.open .menubar-dropdown');
     if (!dropdown) return;
 
-    const allItems = [...dropdown.querySelectorAll('.menu-item:not(.disabled)')];
+    const allItems = [...dropdown.querySelectorAll('.menu-item:not(.disabled):not([hidden])')];
     if (allItems.length === 0) return;
 
     const focused = dropdown.querySelector('.menu-item.focused');
@@ -413,16 +414,9 @@ function wireTerminalMenu() {
     'menu-command-runner':   () => emit('command-runner:open'),
     'menu-terminal-link':    () => emit('link:toggle'),
     'menu-terminal-toggle':  () => emit('terminal:toggle'),
-    'menu-install-app':      async () => {
-      if (window._pwaInstallPrompt) {
-        window._pwaInstallPrompt.prompt();
-        const { outcome } = await window._pwaInstallPrompt.userChoice;
-        if (outcome === 'accepted') {
-          window._pwaInstallPrompt = null;
-          const el = $('menu-install-app');
-          if (el) el.style.display = 'none';
-        }
-      }
+    'menu-install-app': async () => {
+      const result = await requestPwaInstall();
+      if (result === 'instructions') location.assign('/install-app.html');
     },
     'menu-restart-server':   async () => {
       try {
@@ -478,23 +472,13 @@ function wireTerminalMenu() {
   registerAction('toggle-terminal', () => emit('terminal:toggle'));
   registerAction('toggle-terminal-alt', () => emit('terminal:toggle'));
 
-  // PWA install prompt — show "Install as App" when the browser supports it
-  window.addEventListener('beforeinstallprompt', (e) => {
-    e.preventDefault();
-    window._pwaInstallPrompt = e;
-    const el = $('menu-install-app');
-    if (el) el.style.display = '';
-  });
-  window.addEventListener('appinstalled', () => {
-    window._pwaInstallPrompt = null;
+  initPwaInstall({ changed: value => {
     const el = $('menu-install-app');
-    if (el) el.style.display = 'none';
-  });
-  // Hide if already running as installed PWA
-  if (window.matchMedia('(display-mode: standalone)').matches || navigator.standalone) {
-    const el = $('menu-install-app');
-    if (el) el.style.display = 'none';
-  }
+    if (el) el.style.display = value === 'installed' ? 'none' : '';
+  } });
+  const installItem = $('menu-install-app');
+  if (installItem && !isStandalone()) installItem.style.display = '';
+
 }
 
 // ── Variant menu items injection ──

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

@@ -3,6 +3,7 @@ import { buildJudgmentsTab, wireJudgmentsTab } from './ui-judgments.js';
 import { buildWhatsAppTab, wireWhatsAppTab } from './ui-whatsapp.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';
 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';
@@ -44,7 +45,8 @@ const TAB_ICONS = {
   collections: '<svg viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4.03 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5"/></svg>',
   projects: '<svg viewBox="0 0 24 24"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>',
   memory: '<svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7z"/><line x1="9" y1="21" x2="15" y2="21"/><line x1="10" y1="24" x2="14" y2="24"/></svg>',
-  judgments: '<svg viewBox="0 0 24 24"><line x1="12" y1="3" x2="12" y2="21"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="4" y1="7" x2="20" y2="7"/><path d="M4 7l-2.5 7h5z"/><path d="M20 7l-2.5 7h5z"/></svg>',
+  // TypeSafe's official mark (traced from their 400px favicon, filled: the nav CSS strokes every other icon)
+  judgments: '<svg viewBox="0 0 24 24"><path style="fill:currentColor;stroke:none" fill-rule="evenodd" d="M11.88 0 3.74 5.35 3.71 14.28 7.47 16.85 7.55 21.12 12.04 24 20.26 18.62 20.29 9.53 16.53 6.96 16.45 2.86 12.2 0.05ZM12.93 2.36 12.8 2.45 12.8 4.55 14.94 5.89 14.95 3.74ZM10.99 2.44 5.24 6.23 5.24 12.35 5.36 12.47 7.47 11.06 7.54 7.02 11.2 4.55 11.2 2.53ZM11.96 5.98 9.75 7.44 11.96 8.93 14.25 7.44ZM9.14 8.96 9.02 9.05 9.02 11.06 11.16 12.45 11.2 10.34ZM14.86 8.96 12.83 10.34 12.76 14.38 9.05 16.85 9.02 19.03 9.14 19.17 14.98 15.33 14.98 9.05ZM16.63 8.96 16.51 9.05 16.51 15.24 16.71 15.53 18.64 16.76 18.76 16.61 18.76 10.42ZM8.18 12.5 5.99 13.96 8.26 15.45 10.5 13.96ZM15.58 16.84 9.85 20.55 9.79 20.74 12.04 22.18 17.91 18.37 17.99 18.2 17.35 17.75 15.98 16.87Z"/></svg>',
   interface: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="9" y1="9" x2="21" y2="9"/></svg>',
   graphics: '<svg viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>',
   icons: '<svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>',
@@ -5199,13 +5201,9 @@ export async function openSettingsModal(options = {}) {
     // every action. `null` means the route is missing or failed, which is what
     // a server that was not restarted after the update answers: the tab keeps
     // View and Copy and says what to do, and offers no control that cannot work.
+    // What a state is called, the action it calls for and the sentence next to it come from
+    // settings/settings-rules.js, which the onboarding wizard reads too.
     const RESTART_HINT = kit.tx('settings.redesign.setup.restartSynabunToFinishThisUpdate');
-    const RULES_HOST_LABELS = { claude: 'Claude Code', codex: 'Codex', opencode: 'OpenCode', gemini: 'Gemini', cursor: 'Cursor', coexistence: 'coexistence' };
-    const RULES_BADGES = {
-      installed: [kit.tx('settings.redesign.setup.installed'), true], newer: [kit.tx('settings.redesign.setup.newer'), true], outdated: [kit.tx('settings.redesign.setup.updateAvailable'), false], modified: [kit.tx('settings.redesign.setup.edited2'), false],
-      conflict: [kit.tx('settings.redesign.setup.conflict'), false], error: [kit.tx('settings.redesign.setup.error'), false], shadowed: [kit.tx('settings.redesign.setup.shadowed'), false],
-      'not-installed': [kit.tx('settings.redesign.setup.notInstalled'), false], manual: [kit.tx('settings.redesign.setup.copyOnly'), false],
-    };
     let rulesStatus = setupStatus.rules?.ok ? setupStatus.rules : null;
     // What the last "install for all" wrote and where, shown under that button until the next rules action.
     let installNote = '';
@@ -5277,40 +5275,18 @@ export async function openSettingsModal(options = {}) {
       const row = el('row');
 
       rulesRenderers.push(() => {
-        const info = rulesStatus?.hosts?.[host];
-        if (!info) {
-          badge.className = 'setup-status-badge inactive';
-          badge.textContent = kit.tx('settings.redesign.setup.unavailable');
-          pathEl.textContent = RESTART_HINT;
-          row.classList.remove('enabled');
-          setShown(message, false); setShown(primary, false); setShown(removeBtn, false);
-          return;
-        }
-        const [text, good] = RULES_BADGES[info.state] || [info.state || kit.tx('settings.redesign.setup.unknown'), false];
-        badge.className = `setup-status-badge ${good ? 'active' : 'inactive'}`;
-        badge.textContent = text;
-        row.classList.toggle('enabled', good);
-        pathEl.textContent = info.installedVersion ? `${info.path} (v${info.installedVersion})` : (info.path || '');
-        pathEl.title = info.path || '';
-        // The action the state calls for; conflict, error and shadowed only explain themselves.
-        const action = info.detected === false ? '' : ({ 'not-installed': kit.tx('settings.redesign.setup.install'), outdated: kit.tx('settings.redesign.setup.update'), modified: kit.tx('settings.redesign.setup.replace') }[info.state] || '');
-        // A file without SynaBun's markers is the user's own: the server refuses to replace it, so no button.
-        const canAct = !!action && info.replaceable !== false;
-        primary.textContent = canAct ? action : '';
-        setShown(primary, canAct);
-        setShown(removeBtn, ['installed', 'newer', 'outdated', 'modified', 'shadowed'].includes(info.state));
-        // An edited copy is the user's: nothing replaces or removes it without the confirm behind each button.
-        const editedNote = kit.tx('settings.redesign.setup.thisCopyWasEditedSoSynabun');
-        const stateNote = info.detected === false ? kit.tx('settings.redesign.setup.wasNotFoundOnThisMachine', { label: label })
-          : info.state === 'modified' ? (info.replaceable === false ? (info.detail || '') : editedNote)
-          : info.state === 'outdated' ? (rulesStatus.version ? kit.tx('settings.redesign.setup.versionOfTheRulesIsAvailable', { version: rulesStatus.version }) : kit.tx('settings.redesign.setup.aNewerVersionOfTheRules'))
-          : ['conflict', 'error', 'shadowed', 'newer'].includes(info.state) ? (info.error || info.detail || '')
-          : '';
-        // A removal that could not finish left rules behind: say which, until a remove or an install completes.
-        const partial = info.partialRemoval?.error ? kit.tx('settings.redesign.setup.theLastRemovalDidNotFinish', { error: info.partialRemoval.error }) : '';
-        const note = partial && stateNote && !partial.includes(stateNote) ? `${partial} ${stateNote}` : (partial || stateNote);
-        message.textContent = note;
-        setShown(message, !!note);
+        // No status (the route is missing): "Unavailable", the restart hint as the path, and no action.
+        const view = describeRulesHost(rulesStatus?.hosts?.[host], { label, version: rulesStatus?.version, tx: kit.tx });
+        badge.className = `setup-status-badge ${view.good ? 'active' : 'inactive'}`;
+        badge.textContent = view.badge;
+        row.classList.toggle('enabled', view.good);
+        pathEl.textContent = view.pathText;
+        pathEl.title = view.path;
+        primary.textContent = view.actionLabel;
+        setShown(primary, !!view.action);
+        setShown(removeBtn, view.removable);
+        message.textContent = view.note;
+        setShown(message, !!view.note);
       });
 
       primary.addEventListener('click', () => {
@@ -5318,9 +5294,7 @@ export async function openSettingsModal(options = {}) {
         const force = state === 'modified';
         if (force && !confirm(kit.tx('settings.redesign.setup.replaceYourEditedRulesWithSynabun', { label: label }))) return;
         cachedText = '';
-        runRulesAction(primary, () => installRules(host, { force }), (result) => (result.changed
-          ? kit.tx(state === 'not-installed' ? 'settings.redesign.setup.rulesInstalled2' : 'settings.redesign.setup.rulesUpdated2', { label })
-          : kit.tx('settings.redesign.setup.rulesAreAlreadyCurrent', { label: label })));
+        runRulesAction(primary, () => installRules(host, { force }), (result) => describeRulesInstall(result, state, { label, tx: kit.tx }));
       });
       removeBtn.addEventListener('click', () => {
         const info = rulesStatus?.hosts?.[host];
@@ -5399,15 +5373,10 @@ export async function openSettingsModal(options = {}) {
         });
         installAllBtn.addEventListener('click', () => {
           runRulesAction(installAllBtn, () => installAllRules(), (result) => {
-            const rows = Object.entries(result.results || {});
-            if (!rows.length) return kit.tx('settings.redesign.setup.noConnectedToolNeedsRules');
-            // The file each tool reads. The rules are global, so a project's own CLAUDE.md and AGENTS.md stay as they are.
-            const where = rows.filter(([, row]) => row.ok !== false && row.path).map(([host, row]) => `${hostOf[host] || host}: ${row.path}`).join(' · ');
-            if (where) installNote = kit.tx('settings.redesign.setup.rulesInstalledAt', { where: where });
-            const failed = rows.filter(([, row]) => row.ok === false);
-            if (failed.length) return kit.tx('settings.redesign.setup.installedWithFailure', { count: rows.length - failed.length, host: hostOf[failed[0][0]] || failed[0][0], error: failed[0][1].error || failed[0][1].state });
-            const map = rows.map(([host]) => hostOf[host] || host).join(', ');
-            return kit.tx(rows.some(([, row]) => row.changed) ? 'settings.redesign.setup.rulesInstalledFor' : 'settings.redesign.setup.rulesAlreadyCurrentFor', { map: map });
+            // The sentence for the toast, and under the button the file each tool reads.
+            const report = describeRulesInstallAll(result, { tx: kit.tx });
+            installNote = report.note;
+            return report.message;
           });
         });
       }
@@ -5418,6 +5387,15 @@ export async function openSettingsModal(options = {}) {
     wireCopyBtn('setup-claude-cli-copy', () => setupStatus.claude?.cliCommand || ccIntegrations.mcp?.cliCommand || '', kit.tx('settings.redesign.setup.copyCliCommand'));
     wireRulesControls('claude', 'claude');
 
+    // What an MCP client runs: `node <script>` for an npm or Git install, the
+    // application's own executable for a packaged one. The server says which.
+    const mcpLaunch = () => {
+      const paths = setupStatus.paths || {};
+      return paths.mcpCommand && paths.mcpCommand !== 'node' && Array.isArray(paths.mcpArgs)
+        ? { command: paths.mcpCommand, args: paths.mcpArgs }
+        : { command: 'node', args: [paths.mcpIndexPath || '<path-to>/mcp-server/run.mjs'] };
+    };
+
     // ── Gemini ──
     wireSetupMcpToggle('gemini', '/api/setup/gemini/mcp', '~/.gemini/settings.json');
     // Config preview
@@ -5430,7 +5408,7 @@ export async function openSettingsModal(options = {}) {
             cachedConfig = JSON.stringify(data.config, null, 2);
             preview.textContent = cachedConfig;
           } else if (data.ok) {
-            cachedConfig = JSON.stringify({ mcpServers: { SynaBun: { command: 'node', args: [setupStatus.paths?.mcpIndexPath || '<path-to>/mcp-server/run.mjs'], env: { DOTENV_PATH: setupStatus.paths?.envPath || '<path-to>/synabun/.env' } } } }, null, 2);
+            cachedConfig = JSON.stringify({ mcpServers: { SynaBun: { ...mcpLaunch(), env: { DOTENV_PATH: setupStatus.paths?.envPath || '<path-to>/synabun/.env' } } } }, null, 2);
             preview.textContent = cachedConfig;
           } else { preview.textContent = kit.tx('settings.redesign.setup.couldNotLoadConfig'); }
         }).catch(() => { preview.textContent = kit.tx('settings.redesign.setup.failedToLoad'); });
@@ -5452,10 +5430,11 @@ export async function openSettingsModal(options = {}) {
             cachedConfig = data.toml;
             preview.textContent = cachedConfig;
           } else if (data.ok) {
-            const mp = setupStatus.paths?.mcpIndexPath || '<path-to>/mcp-server/run.mjs';
+            const launch = mcpLaunch();
             const ep = setupStatus.paths?.envPath || '<path-to>/synabun/.env';
             const dataHome = setupStatus.paths?.dataHome || '<path-to>/synabun';
-            cachedConfig = `[mcp_servers.SynaBun]\ncommand = "node"\nargs = ["${mp}"]\nenv = { DOTENV_PATH = "${ep}", SYNABUN_DATA_HOME = "${dataHome}", MEMORY_DATA_DIR = "${dataHome}/mcp-data", SYNABUN_PROFILE = "full", SYNABUN_BROWSER_FAST = "1", SYNABUN_BROWSER_COMPACT = "1", SYNABUN_TOOL_CATALOG_MODE = "deferred" }`;
+            // A JSON string is a TOML basic string: the same quotes and escapes.
+            cachedConfig = `[mcp_servers.SynaBun]\ncommand = ${JSON.stringify(launch.command)}\nargs = [${launch.args.map(arg => JSON.stringify(arg)).join(', ')}]\nenv = { DOTENV_PATH = "${ep}", SYNABUN_DATA_HOME = "${dataHome}", MEMORY_DATA_DIR = "${dataHome}/mcp-data", SYNABUN_PROFILE = "full", SYNABUN_BROWSER_FAST = "1", SYNABUN_BROWSER_COMPACT = "1", SYNABUN_TOOL_CATALOG_MODE = "deferred" }`;
             preview.textContent = cachedConfig;
           } else { preview.textContent = kit.tx('settings.redesign.setup.couldNotLoadConfig'); }
         }).catch(() => { preview.textContent = kit.tx('settings.redesign.setup.failedToLoad'); });
@@ -5471,7 +5450,6 @@ export async function openSettingsModal(options = {}) {
       const preview = overlay.querySelector('#setup-opencode-config-preview');
       let cachedConfig = '';
       if (preview) {
-        const mp = setupStatus.paths?.mcpIndexPath || '<path-to>/mcp-server/run.mjs';
         const ep = setupStatus.paths?.envPath || '<path-to>/synabun/.env';
         fetch('/api/opencode/mcp').then(r => r.json()).then(data => {
           if (data.ok && data.data && Object.keys(data.data).length) {
@@ -5482,8 +5460,7 @@ export async function openSettingsModal(options = {}) {
               mcp: {
                 SynaBun: {
                   type: 'stdio',
-                  command: 'node',
-                  args: [mp],
+                  ...mcpLaunch(),
                   env: { DOTENV_PATH: ep },
                 },
               },