synabun 2.0.0-beta → 2.0.0

package/neural-interface/public/shared/assistant/asst-mascot.js

@@ -2,9 +2,10 @@
 // SynaBun Assistant — the panel's mascot director
 // ═══════════════════════════════════════════
 // The renderer (asst-render.js) owns the rigs and says which one is on screen:
-// the hero (the empty state's character, parked after a send until the first
-// stage takes it over) or the live rack's stage. This module dresses that one
-// in the panel's own state, above the pose the renderer gives it:
+// the hero (the empty state's character; a send hands it over to the
+// "Thinking" row's at once), the live rack's stage or the "Thinking" row's.
+// This module dresses that one in the panel's own state, above the pose the
+// renderer gives it:
 //
 //   offline         the socket dropped (the Reconnecting banner); one startle on reconnect
 //   blocked         a card waits on you: eyes on it, two pulses, then still
@@ -14,12 +15,13 @@
 //   sleep           the hero only, after 90 s with no input while nothing runs;
 //                   the rig wakes itself on a pointer move or a key
 //
-// Anything else is the renderer's pose: the hero idles (thinks once parked),
-// the stage acts out its call. A pose the director sets is held: the renderer
-// leaves it alone until the director lets go and asks it to restore its own.
-// Only one panel animates its rigs: the visible one used last (typing, focus,
-// a new stage). Pure logic: the clock, timers and page input come in through
-// `env`, so node:test drives it with fakes (tests/assistant-mascot.test.mjs).
+// Anything else is the renderer's pose: the hero idles, the "Thinking" row's
+// character thinks, the stage acts out its call. A pose the director sets is
+// held: the renderer leaves it alone until the director lets go and asks it
+// to restore its own. Only one panel animates its rigs: the visible one used
+// last (typing, focus, a new stage). Pure logic: the clock, timers and page
+// input come in through `env`, so node:test drives it with fakes
+// (tests/assistant-mascot.test.mjs).
 
 export const MASCOT_TIMING = Object.freeze({
   watchEveryMs: 120,
@@ -254,7 +256,7 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
     type,
     /** Blur, or the draft went away. */
     stopTyping,
-    /** A prompt went out: the watch hands over at once (the renderer parks the hero thinking). */
+    /** A prompt went out: the watch hands over at once (the renderer gives the hero to the "Thinking" row). */
     sent() { touch(); stopTyping(); },
     /** A card waits on the user (`rectOf()` → its box), or none (null). */
     setBlocked(rectOf) {

package/neural-interface/public/shared/assistant/asst-rack-styles.js

@@ -98,9 +98,6 @@ export const RACK_CSS = `
   }
   .asst-rack-face { grid-area: face; align-self: center; color: var(--rk-text); line-height: 0; }
   .asst-rack-face svg { display: block; width: 72px; height: 36px; }
-  /* The hero's hand-off (asst-render.js flipIntoStage): the face flies in from outside the stage. */
-  .asst-rack.is-flip > .asst-rack-stage { overflow: visible; }
-  .asst-rack.is-flip .asst-rack-face { position: relative; z-index: 3; }
   .asst-rack-caption {
     grid-area: caption;
     align-self: end;

package/neural-interface/public/shared/assistant/asst-render.js

@@ -11,12 +11,12 @@
 // Replay runs the same handleEvent path with { silent: true }: live minus
 // motion, durations from the journal's `at`. Every row is inserted before the
 // "Working…" indicator so it always stays last.
-// The empty state's character (the hero) outlives a send: parked where it
-// stood, thinking, until the first stage of the turn takes it over (the
-// stage's face flies in from the hero's box) or other content arrives (it
-// fades out). mascot() names the character on screen for the panel's
-// director (asst-mascot.js), which may hold its pose; stills are painted SVGs,
-// never rigs.
+// The empty state's character (the hero) outlives a send only for its
+// hand-off: the "Thinking" row's character flies in from the hero's box at
+// once, so nothing sits on the prompt, and with no such row the hero fades
+// out. mascot() names the character on screen for the panel's director
+// (asst-mascot.js), which may hold its pose; stills are painted SVGs, never
+// rigs.
 
 import { assistantEventKey, fmtCost, fmtElapsed, isRemovableRun, isRunIdle, isTerminalRunStatus, modelShortName, providerShortLabel, routeTargetLabel, runTone, summarizeMailbox } from './asst-state.js';
 import { createRouteLine } from './asst-route.js';
@@ -408,8 +408,8 @@ const BURST_MS = 800; // 3+ calls started within this window read "newest ×N"
 const STATUS_GAP_MS = 1500; // screen-reader announcements at most this often
 const FOLD_MS = 180; // narration collapsing into the stage caption
 const COLLAPSE_MS = 260; // the stage folding into the receipt
-const FLIP_MS = 320; // the hero flying into the first stage (--asst-dur-slow)
-const HERO_LEAVE_MS = 140; // a parked hero nobody took over fades out
+const FLIP_MS = 320; // the hero flying into the "Thinking" row (--asst-dur-slow)
+const HERO_LEAVE_MS = 140; // a parked hero the "Thinking" row did not take over fades out
 const MAX_TICKS = 60;
 const NARROW_TICKS = 12;
 const PREVIEW_LINES = 5;
@@ -535,7 +535,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     return scope;
   }
 
-  /** The empty state goes; `park` (the user sent a prompt) keeps its character on screen, thinking. */
+  /** The empty state goes; `park` (a turn starts) hands its character over to the "Thinking" row. */
   function hideEmpty({ park = false } = {}) {
     if (!emptyEl) return;
     if (!(park && parkHero())) dropHero();
@@ -561,9 +561,11 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   /**
    * Park the hero where it stands, in an overlay of the transcript's parent,
-   * so it outlives the empty state and thinks until the first stage of the
-   * turn takes it over. Not on replay, under reduced motion or while the UI
-   * is dragged, and not when it is off screen.
+   * so it outlives the empty state for its hand-off. It stays there only
+   * until the rows of this task are in (the prompt, "Thinking"): settleHero()
+   * then gives it to the "Thinking" row, so it is never drawn over the
+   * prompt that took the empty state's place. Not on replay, under reduced
+   * motion or while the UI is dragged, and not when it is off screen.
    */
   function parkHero() {
     const h = hero;
@@ -585,10 +587,33 @@ export function createRenderer(transcriptEl, hooks = {}) {
     h.dock = dock;
     h.parked = true;
     if (!h.held) h.rig.setPose('think');
+    queueMicrotask(() => settleHero(h));
     mascotChanged();
     return true;
   }
 
+  /**
+   * The parked hero's hand-off, once the task that parked it has put its rows
+   * in: the "Thinking" row's character flies in from the hero's box and the
+   * hero leaves in the same frame. With no such row to take it over (a slash
+   * command's echo, a rack already live) it fades out.
+   */
+  function settleHero(h) {
+    if (hero !== h || !h.parked || h.leaving) return;
+    if (!workingFree()) { dismissHero(); return; }
+    const from = h.el.getBoundingClientRect();
+    dropHero(); // the "Thinking" row wears the character now (syncWorkingFace)
+    const face = workingFace;
+    if (!face?.rig) return;
+    const row = working;
+    row.classList.add('is-flip');
+    const anim = flipFrom(face.el, from);
+    const done = () => row.classList.remove('is-flip');
+    if (!anim) { done(); return; }
+    anim.onfinish = done;
+    anim.oncancel = done;
+  }
+
   function dropHero() {
     const h = hero;
     if (!h) return;
@@ -600,20 +625,15 @@ export function createRenderer(transcriptEl, hooks = {}) {
     syncWorkingFace(); // the "Thinking" row may wear the character now
   }
 
-  /** A parked hero no stage took over leaves: it fades out (at once when calm), after `delay` ms. */
-  function dismissHero(delay = 0) {
+  /** A parked hero the "Thinking" row did not take over leaves: it fades out (at once when calm). */
+  function dismissHero() {
     const h = hero;
     if (!h?.parked || h.leaving) return;
     h.leaving = true;
-    const go = () => {
-      if (hero !== h) return;
-      if (calm() || typeof h.dock.animate !== 'function') { dropHero(); return; }
-      const anim = h.dock.animate([{ opacity: 1 }, { opacity: 0 }], { duration: HERO_LEAVE_MS, easing: cssEase('--asst-ease-exit', 'cubic-bezier(.2,0,1,.9)'), fill: 'forwards' });
-      anim.onfinish = () => { if (hero === h) dropHero(); };
-      h.leaveTimer = setTimeout(() => { if (hero === h) dropHero(); }, HERO_LEAVE_MS + 120);
-    };
-    if (delay > 0) h.leaveTimer = setTimeout(go, delay);
-    else go();
+    if (calm() || typeof h.dock.animate !== 'function') { dropHero(); return; }
+    const anim = h.dock.animate([{ opacity: 1 }, { opacity: 0 }], { duration: HERO_LEAVE_MS, easing: cssEase('--asst-ease-exit', 'cubic-bezier(.2,0,1,.9)'), fill: 'forwards' });
+    anim.onfinish = () => { if (hero === h) dropHero(); };
+    h.leaveTimer = setTimeout(() => { if (hero === h) dropHero(); }, HERO_LEAVE_MS + 120);
   }
 
   /**
@@ -635,19 +655,6 @@ export function createRenderer(transcriptEl, hooks = {}) {
     ], { duration: FLIP_MS, easing: cssEase('--asst-ease-emphasized', 'cubic-bezier(.4,.14,.3,1)') });
   }
 
-  /** The hand-off: the first stage's face flies in from the parked hero, which leaves in the same frame. */
-  function flipIntoStage(rack) {
-    const h = hero;
-    const from = h.el.getBoundingClientRect();
-    dropHero();
-    rack.row.classList.add('is-flip');
-    const anim = flipFrom(rack.stage.face, from);
-    const done = () => rack.row.classList.remove('is-flip');
-    if (!anim) { done(); return; }
-    anim.onfinish = done;
-    anim.oncancel = done;
-  }
-
   /** Triple-click the character: its eyes part and re-form, once per mount. Silent. */
   function wireEgg(h) {
     const hit = (e) => {
@@ -709,7 +716,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     if (scope.container === $msgs && working && working.parentNode === $msgs) $msgs.insertBefore(node, working);
     else scope.container.appendChild(node);
     if (scope === rootScope) prune();
-    // Text, a card, a notice…: the parked hero would sit on it. Only a rack (its stage takes it over) and the prompt keep it.
+    // Text, a card, a notice…: the parked hero would sit on it. The prompt and a rack leave it to settleHero().
     if (hero?.parked && scope === rootScope && !node._rack && !node.classList.contains('msg-user')) dismissHero();
     if (racks.size) syncRacks();
     scrollEnd();
@@ -1495,13 +1502,10 @@ export function createRenderer(transcriptEl, hooks = {}) {
       rack.clearTimer = 0;
       rack.row.classList.add('is-staged');
       if (!rack.rig) {
-        // The parked hero hands over: the stage's character starts in its pose and flies in from its box.
-        const heir = hero?.parked && !hero.leaving && !calm() ? hero : null;
-        try { rack.rig = mascotLib.createMascot(rack.stage.face, { width: 72, height: 36, rangeX: 10, rangeY: 7, active: rigsOn, pose: heir ? heir.rig.pose : 'idle' }); } catch { rack.rig = null; }
+        try { rack.rig = mascotLib.createMascot(rack.stage.face, { width: 72, height: 36, rangeX: 10, rangeY: 7, active: rigsOn, pose: 'idle' }); } catch { rack.rig = null; }
         rack.pose = null;
         rack.target = rack.rig ? stageTarget(rack) : null;
-        if (heir && rack.rig) flipIntoStage(rack);
-        else if (hero?.parked) dropHero();
+        if (hero?.parked) dropHero(); // the stage is the character now: a hero still on its way out goes at once
       }
       mascotChanged();
       return;
@@ -2605,18 +2609,23 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   // ── The "Thinking" row's character ──
   // The row wears the mascot, thinking, only when no other character is on
-  // screen: no parked hero, no stage (a live rack right above it hides the
-  // row altogether). A rig, so the director can dress it; a painted still
-  // when calm.
+  // screen: no hero, no stage (a live rack right above it hides the row
+  // altogether). A rig, so the director can dress it; a painted still when
+  // calm. A send hands the hero over to it (settleHero).
   function workingCovered() {
     let prev = working?.previousElementSibling || null;
     while (prev && prev.classList.contains('asst-folding')) prev = prev.previousElementSibling;
     return !!prev?._rack?.live;
   }
 
+  /** The row is up and neither a stage nor a live rack stands in for it. */
+  function workingFree() {
+    return !!working?.isConnected && !newestStage() && !workingCovered();
+  }
+
   function syncWorkingFace() {
     const host = working?.querySelector('.asst-working-face');
-    const wanted = !!host && working.isConnected && !hero && !newestStage() && !workingCovered();
+    const wanted = !!host && !hero && workingFree();
     if (!wanted) { dropWorkingFace(); return; }
     if (workingFace && workingFace.still === calm()) return;
     dropWorkingFace();
@@ -2638,6 +2647,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
     if (!face) return;
     workingFace = null;
     try { face.rig?.destroy(); } catch { /* gone */ }
+    working?.classList.remove('is-flip');
     working?.querySelector('.asst-working-face')?.replaceChildren();
     if (face.rig) mascotChanged();
   }
@@ -3131,8 +3141,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   /**
    * The turn ended. `holdMs`: the panel plays a one-shot (success, error) on
-   * the character on screen, so its stage stays up that long before it folds
-   * and a parked hero waits as long before it fades.
+   * the character on screen, so its stage stays up that long before it folds.
    */
   function finishTurn({ holdMs = 0 } = {}) {
     flushStream(rootScope);
@@ -3154,7 +3163,7 @@ export function createRenderer(transcriptEl, hooks = {}) {
       rack.closed = true;
       if (rack.live || tail || rack === stage) renderRack(rack);
     }
-    if (hero?.parked) dismissHero(hold ? holdMs : 0);
+    if (hero?.parked) dismissHero();
   }
 
   /**

package/neural-interface/public/shared/assistant/asst-styles.js

@@ -446,6 +446,8 @@ export function injectAssistantStyles() {
     .asst-working-face { display: inline-flex; flex-shrink: 0; color: var(--asst-text); line-height: 0; }
     .asst-working-face:empty { display: none; }
     .asst-working-face svg { display: block; width: 56px; height: 28px; }
+    /* The hero's hand-off (asst-render.js settleHero): the face flies in from the empty state, over the prompt. */
+    .asst-working.is-flip .asst-working-face { position: relative; z-index: 3; }
 
     /* ── Tool rows ──────────────────────────────────────────────────── */
     .asst-tool { min-width: 0; font-size: 12.5px; }
@@ -1575,8 +1577,8 @@ export function injectAssistantStyles() {
 
     /* ── Empty state character (shared/synabun-mascot.js, the onboarding eyes) ──
        The rig moves by itself (idle, blinks, the cursor); nothing floats it.
-       After a send it is parked where it stood (.asst-hero-dock, positioned
-       by asst-render.js) until the first stage of the turn takes it over. */
+       A send hands it over to the "Thinking" row at once; with no such row it
+       fades out where it stood (.asst-hero-dock, positioned by asst-render.js). */
     .asst-empty-mascot { display: flex; justify-content: center; margin-bottom: 2px; color: var(--asst-text); pointer-events: none; user-select: none; }
     :is(.asst-empty-mascot, .asst-hero-dock) svg { display: block; }
     .asst-hero-dock { position: absolute; z-index: 4; display: flex; align-items: center; justify-content: center; color: var(--asst-text); pointer-events: none; user-select: none; }

package/neural-interface/public/shared/command-runner-model.js

@@ -0,0 +1,30 @@
+// Pure library selection; saved command text and user ordering stay untouched.
+const normalize = value => String(value ?? '').normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLocaleLowerCase();
+const byOrder = (a, b) => (a.order ?? 0) - (b.order ?? 0);
+const lastRun = command => Number(command.lastRunAt) || 0;
+
+export function selectCommandGroups(data, { query = '', categoryId = '', sort = 'saved' } = {}) {
+  const terms = normalize(query).trim().split(/\s+/).filter(Boolean);
+  const groups = [...data.categories].sort(byOrder)
+    .filter(category => !categoryId || category.id === categoryId)
+    .map(category => {
+      const commands = data.commands.filter(command => {
+        if (command.categoryId !== category.id) return false;
+        const text = normalize([command.name, command.command, command.cwd, category.name].join(' '));
+        return terms.every(term => text.includes(term));
+      }).sort(sort === 'recent' ? (a, b) => lastRun(b) - lastRun(a) || byOrder(a, b) : byOrder);
+      return { category, commands };
+    }).filter(group => !terms.length || group.commands.length);
+  if (sort === 'recent') groups.sort((a, b) =>
+    Math.max(0, ...b.commands.map(lastRun)) - Math.max(0, ...a.commands.map(lastRun)) || byOrder(a.category, b.category));
+  return groups;
+}
+
+export function commandLaunchPayload(command) {
+  return { command: command.command, cwd: command.cwd || null, label: command.name };
+}
+
+// Internet connectivity does not gate commands served by the local workspace.
+export function isCommandLaunchAvailable(online, hostname) {
+  return online !== false || ['localhost', '127.0.0.1', '[::1]', '::1'].includes(hostname);
+}

package/neural-interface/public/shared/html-shell.js

@@ -18,8 +18,8 @@ export function getSharedHTML() {
   return `
 <!-- Loading Overlay -->
 <div id="loading-overlay">
-  <div id="loading-mascot">
-    <svg viewBox="0 0 280 140" width="160" height="80" style="overflow:visible">
+  <div id="loading-mascot" data-state="asleep">
+    <svg viewBox="0 0 280 140" width="160" height="80" style="overflow:visible" aria-hidden="true">
       <g class="syna-eye">
         <g class="syna-lid" transform="translate(0,60) scale(1,0.08) translate(0,-60)">
           <rect x="80" y="24" width="38" height="72" rx="19" fill="#ffffff"/>
@@ -42,7 +42,11 @@ export function getSharedHTML() {
       <svg viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
       <span id="loading-action-label">${t('loading.startServer')}</span>
     </button>
-    <div id="loading-action-status"></div>
+    <div id="loading-action-status" role="status" aria-live="polite" aria-atomic="true"></div>
+    <div id="loading-action-elapsed" role="timer" aria-live="off"></div>
+    <div id="loading-action-hint"></div>
+    <ul id="loading-action-trail"></ul>
+    <div id="loading-action-log"></div>
   </div>
   <div id="loading-server-cmd">
     <div id="loading-server-cmd-hint">${t('loading.runCommand')}</div>
@@ -146,7 +150,7 @@ export function getSharedHTML() {
             <span class="menu-check"></span>
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg></span> WhatsApp</span>
           </div>
-          <div class="menu-item" id="menu-app-leonardo">
+          <div class="menu-item" id="menu-app-leonardo" hidden>
             <span class="menu-check"></span>
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M9.5 2l1.5 3.5L14.5 7l-3.5 1.5L9.5 12l-1.5-3.5L4.5 7l3.5-1.5L9.5 2zM19 10l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2zM5 17l1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2z"/></svg></span> Leonardo.AI</span>
           </div>
@@ -155,7 +159,7 @@ export function getSharedHTML() {
             <span class="menu-check"></span>
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></svg></span> Command Runner</span>
           </div>
-          <div class="menu-item" id="menu-terminal-link">
+          <div class="menu-item" id="menu-terminal-link" hidden>
             <span class="menu-check"></span>
             <span class="menu-text"><span class="menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg></span> Link Terminals</span>
           </div>

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

@@ -0,0 +1,34 @@
+import { initPwaInstall, isStandalone, requestPwaInstall } from './pwa-install.js';
+
+if (isStandalone()) location.replace('/');
+else {
+  const pt = navigator.language.toLowerCase().startsWith('pt');
+  const copy = pt ? {
+    'install-title': 'Instale o SynaBun como app',
+    'install-intro': 'O servidor está rodando em segundo plano. Confirme a instalação uma vez no navegador para abrir o SynaBun em sua própria janela.',
+    'install-chromium': 'Chrome ou Edge: escolha Instalar como app abaixo ou a opção Instalar app no menu do navegador.',
+    'install-safari': 'Safari no macOS: escolha Arquivo → Adicionar ao Dock. Mantenha o nome SynaBun.',
+    'install-later': 'Após instalar, abra novamente o iniciador nativo do SynaBun. Ele inicia ou reutiliza o servidor e abre o PWA instalado. Fechar a janela mantém o servidor ativo. Use Apps → Stop Server para pará-lo.',
+    'install-button': 'Instalar como app', 'install-continue': 'Continuar para o SynaBun',
+  } : {};
+  if (pt) document.documentElement.lang = 'pt-BR';
+  for (const [id, text] of Object.entries(copy)) document.getElementById(id).textContent = text;
+  const status = document.getElementById('install-status');
+  const instructions = pt
+    ? 'Use a opção Instalar app do Chrome/Edge ou Arquivo → Adicionar ao Dock no Safari. A instalação exige sua confirmação no navegador.'
+    : 'Use Chrome/Edge’s Install app menu or Safari’s File → Add to Dock. Installation requires your browser confirmation.';
+  initPwaInstall({ changed: value => {
+    status.textContent = value === 'installed'
+      ? (pt ? 'Instalado. Abra novamente o iniciador do SynaBun para usar o PWA.' : 'Installed. Reopen the SynaBun launcher to use the PWA.')
+      : (pt ? 'Pronto para instalar. Escolha Instalar como app.' : 'Ready to install. Choose Install as App.');
+  } });
+  document.getElementById('install-button').addEventListener('click', async () => {
+    try {
+      const result = await requestPwaInstall();
+      status.textContent = result === 'accepted'
+        ? (pt ? 'Confirmação aceita. O navegador está concluindo a instalação.' : 'Confirmation accepted. The browser is completing installation.')
+        : instructions;
+    } catch { status.textContent = instructions; }
+  });
+  if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(() => {});
+}

package/neural-interface/public/shared/pwa-install.css

@@ -0,0 +1,12 @@
+/* Scoped first-run route; the application owns all colors, fonts and radii. */
+#pwa-install { display: grid; place-items: center; overflow: auto; padding: 24px; color: var(--t-bright); }
+#pwa-install main { width: min(560px, 100%); padding: 24px; background: var(--s-panel); border: 1px solid var(--b-light); border-radius: var(--r-card); }
+#pwa-install h1 { font-family: var(--ff-heading); font-size: calc(28px * var(--font-scale)); font-weight: 600; line-height: 1.2; margin: 16px 0; }
+#pwa-install p, #pwa-install li { font-size: var(--fs-sm); line-height: 1.5; }
+#pwa-install ol { padding-left: 24px; margin: 16px 0; }
+#pwa-install li + li { margin-top: 8px; }
+#pwa-install .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
+#pwa-install button { background: var(--s-active); border: 1px solid var(--b-visible); border-radius: var(--r-small); color: var(--t-bright); font: inherit; padding: 8px 12px; cursor: pointer; }
+#pwa-install button:hover { background: var(--s-hover); }
+#pwa-install a { color: var(--t-bright); font-size: var(--fs-sm); }
+#pwa-install #install-status { color: var(--t-primary); margin-top: 16px; min-height: 1.5em; }

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

@@ -0,0 +1,28 @@
+/** Shared by the existing Install as App menu and the native launcher's first-run page. */
+export function isStandalone(win = window, nav = navigator) {
+  return win.matchMedia('(display-mode: standalone)').matches
+    || win.matchMedia('(display-mode: window-controls-overlay)').matches || !!nav.standalone;
+}
+
+export function initPwaInstall({ win = window, nav = navigator, changed = () => {} } = {}) {
+  win.addEventListener('beforeinstallprompt', event => {
+    event.preventDefault();
+    win._pwaInstallPrompt = event;
+    changed('available');
+  });
+  win.addEventListener('appinstalled', () => {
+    win._pwaInstallPrompt = null;
+    changed('installed');
+  });
+  if (isStandalone(win, nav)) changed('installed');
+}
+
+export async function requestPwaInstall(win = window) {
+  const prompt = win._pwaInstallPrompt;
+  if (!prompt) return 'instructions';
+  // Called only by a click: genuine browser confirmation, never silent installation.
+  await prompt.prompt();
+  const { outcome } = await prompt.userChoice;
+  win._pwaInstallPrompt = null; // Browser install events are single-use, including dismissal.
+  return outcome;
+}

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

@@ -0,0 +1,160 @@
+// ═══════════════════════════════════════════
+// SETTINGS — SynaBun rules, in words
+// ═══════════════════════════════════════════
+//
+// What the rules status (GET /api/setup/rules, lib/rulesets/installer.js) says about a tool: the name of its
+// state, the action that state calls for, the sentence next to it, and what an install answered. Pure: no DOM
+// and no import, so node runs it (tests/rulesets-rules-view.test.mjs).
+//
+// Two surfaces render the status, Settings → AI connections (ui-settings.js) and the onboarding wizard
+// (onboarding.html). Both ask this module, so a state reads the same and offers the same action in both.
+//
+//   describeRulesHost(info, { label, version, tx })     one tool: badge, path, action, note
+//   describeRulesInstall(result, state, { label, tx })  what Install / Update / Replace answered
+//   describeRulesInstallAll(result, { tx, labels })     what "install for all" answered, and where the rules live
+//   rulesInstallPlan(status)                            what "install for all" would find to do
+//   describeRulesInPlace(status, { tx, labels })        the same report for rules that are already there
+//   catalogueTranslator(messages)                       `tx` for a page that does not run the app's i18n
+//
+// `tx(key, params)` is the caller's translate function over the settings.redesign.setup.* strings (the kit's
+// `tx` in Settings; the wizard reads the same catalogue, i18n/en.json).
+
+/** The tools SynaBun installs rules for, in the order both surfaces list them. Cursor is copy-only. */
+export const RULES_INSTALL_HOSTS = Object.freeze(['claude', 'gemini', 'codex', 'opencode']);
+
+export const RULES_HOST_LABELS = Object.freeze({ claude: 'Claude Code', codex: 'Codex', opencode: 'OpenCode', gemini: 'Gemini', cursor: 'Cursor', coexistence: 'coexistence' });
+
+/** The states that count as "the rules are in place". `shadowed` is installed too, only not loaded (Codex's override file). */
+export const RULES_IN_PLACE = Object.freeze(['installed', 'newer', 'shadowed']);
+
+/**
+ * One tool's rules as both surfaces show them.
+ *
+ * `info` is `status.hosts[host]`, or nothing when the status could not be read (a server that was not restarted
+ * after the update answers 404): then the badge says "Unavailable", the path line says what to do and no action
+ * is offered, because none could work.
+ *
+ * @returns {{ known: boolean, state: string, badge: string, good: boolean, path: string, pathText: string,
+ *   action: ''|'install'|'update'|'replace', actionLabel: string, force: boolean, removable: boolean, note: string }}
+ */
+export function describeRulesHost(info, { label, version = null, tx }) {
+  if (!info) {
+    return {
+      known: false, state: '', badge: tx('settings.redesign.setup.unavailable'), good: false, path: '',
+      pathText: tx('settings.redesign.setup.restartSynabunToFinishThisUpdate'), action: '', actionLabel: '', force: false, removable: false, note: '',
+    };
+  }
+  const badges = {
+    installed: [tx('settings.redesign.setup.installed'), true], newer: [tx('settings.redesign.setup.newer'), true], outdated: [tx('settings.redesign.setup.updateAvailable'), false], modified: [tx('settings.redesign.setup.edited2'), false],
+    conflict: [tx('settings.redesign.setup.conflict'), false], error: [tx('settings.redesign.setup.error'), false], shadowed: [tx('settings.redesign.setup.shadowed'), false],
+    'not-installed': [tx('settings.redesign.setup.notInstalled'), false], manual: [tx('settings.redesign.setup.copyOnly'), false],
+  };
+  const [badge, good] = badges[info.state] || [info.state || tx('settings.redesign.setup.unknown'), false];
+  // The action the state calls for; conflict, error and shadowed only explain themselves.
+  const actions = { 'not-installed': ['install', tx('settings.redesign.setup.install')], outdated: ['update', tx('settings.redesign.setup.update')], modified: ['replace', tx('settings.redesign.setup.replace')] };
+  const [action, actionLabel] = info.detected === false ? ['', ''] : (actions[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;
+  // An edited copy is the user's: nothing replaces or removes it without the confirm behind each button.
+  const editedNote = tx('settings.redesign.setup.thisCopyWasEditedSoSynabun');
+  const stateNote = info.detected === false ? tx('settings.redesign.setup.wasNotFoundOnThisMachine', { label })
+    : info.state === 'modified' ? (info.replaceable === false ? (info.detail || '') : editedNote)
+    : info.state === 'outdated' ? (version ? tx('settings.redesign.setup.versionOfTheRulesIsAvailable', { version }) : 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 ? tx('settings.redesign.setup.theLastRemovalDidNotFinish', { error: info.partialRemoval.error }) : '';
+  const note = partial && stateNote && !partial.includes(stateNote) ? `${partial} ${stateNote}` : (partial || stateNote);
+  return {
+    known: true,
+    state: info.state || '',
+    badge,
+    good,
+    path: info.path || '',
+    pathText: info.installedVersion ? `${info.path} (v${info.installedVersion})` : (info.path || ''),
+    action: canAct ? action : '',
+    actionLabel: canAct ? actionLabel : '',
+    // Replace sends force, and only after the confirm that says the edited copy is backed up first.
+    force: canAct && action === 'replace',
+    removable: ['installed', 'newer', 'outdated', 'modified', 'shadowed'].includes(info.state),
+    note,
+  };
+}
+
+/** The sentence for what one tool's Install, Update or Replace answered. `state` is what the tool was in before. */
+export function describeRulesInstall(result, state, { label, tx }) {
+  if (!result?.changed) return tx('settings.redesign.setup.rulesAreAlreadyCurrent', { label });
+  return tx(state === 'not-installed' ? 'settings.redesign.setup.rulesInstalled2' : 'settings.redesign.setup.rulesUpdated2', { label });
+}
+
+/**
+ * What "install for all" answered: `message` is the result in one sentence, `note` says which file each tool
+ * reads ('' when nothing was written or found), `failed` lists the tools that were refused.
+ * The rules are global, so a project's own CLAUDE.md and AGENTS.md stay as they are; the note says so.
+ */
+export function describeRulesInstallAll(result, { tx, labels = RULES_HOST_LABELS }) {
+  const name = (host) => labels[host] || RULES_HOST_LABELS[host] || host;
+  const rows = Object.entries(result?.results || {});
+  if (!rows.length) return { message: tx('settings.redesign.setup.noConnectedToolNeedsRules'), note: '', failed: [] };
+  const where = rows.filter(([, row]) => row.ok !== false && row.path).map(([host, row]) => `${name(host)}: ${row.path}`).join(' · ');
+  const note = where ? tx('settings.redesign.setup.rulesInstalledAt', { where }) : '';
+  const failed = rows.filter(([, row]) => row.ok === false);
+  if (failed.length) {
+    return {
+      message: tx('settings.redesign.setup.installedWithFailure', { count: rows.length - failed.length, host: name(failed[0][0]), error: failed[0][1].error || failed[0][1].state }),
+      note,
+      failed: failed.map(([host]) => host),
+    };
+  }
+  const map = rows.map(([host]) => name(host)).join(', ');
+  return { message: tx(rows.some(([, row]) => row.changed) ? 'settings.redesign.setup.rulesInstalledFor' : 'settings.redesign.setup.rulesAlreadyCurrentFor', { map }), note, failed: [] };
+}
+
+/**
+ * What "install for all" would find to do, by the installer's own rule (installAll in lib/rulesets/installer.js):
+ * it takes a tool that is on this machine, connected to SynaBun (or already managed), not opted out and not in
+ * the middle of a removal.
+ *
+ *   pending    tools it would install or update
+ *   inPlace    tools whose rules are there already
+ *   attention  tools it would be refused for (an edited copy, damaged markers, an error): each needs its own answer
+ *   skipped    connected tools it leaves alone because the user took their rules out
+ *   connected  every tool above
+ */
+export function rulesInstallPlan(status) {
+  const plan = { pending: [], inPlace: [], attention: [], skipped: [], connected: [] };
+  for (const host of RULES_INSTALL_HOSTS) {
+    const info = status?.hosts?.[host];
+    if (!info || info.detected === false) continue;
+    if (info.managed !== true && info.mcp !== true) continue;
+    plan.connected.push(host);
+    if (RULES_IN_PLACE.includes(info.state)) plan.inPlace.push(host);
+    else if (info.managed === false || info.partialRemoval) plan.skipped.push(host);
+    else if (info.state === 'not-installed' || info.state === 'outdated') plan.pending.push(host);
+    else plan.attention.push(host);
+  }
+  return plan;
+}
+
+/**
+ * The same report for rules that are in place already: the wizard reaches its rules step after its own toggles
+ * installed them, and says what Settings says after "install for all". Null when no connected tool has rules.
+ */
+export function describeRulesInPlace(status, { tx, labels = RULES_HOST_LABELS }) {
+  const results = {};
+  for (const host of rulesInstallPlan(status).inPlace) results[host] = { ok: true, changed: true, path: status.hosts[host].path };
+  return Object.keys(results).length ? describeRulesInstallAll({ results }, { tx, labels }) : null;
+}
+
+/**
+ * `tx` over a loaded catalogue (the parsed i18n/en.json), for a page that does not run the app's i18n: the
+ * onboarding wizard is English only and must not wait for the app's storage. Same rules as t() in i18n.js:
+ * a missing key comes back as the key, `{name}` is filled from `params`.
+ */
+export function catalogueTranslator(messages) {
+  return (key, params) => {
+    const value = String(key).split('.').reduce((node, part) => node?.[part], messages);
+    if (typeof value !== 'string') return key;
+    return params ? value.replace(/\{(\w+)\}/g, (_, name) => (params[name] != null ? params[name] : `{${name}}`)) : value;
+  };
+}