synabun 2.0.5 → 2.0.7

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

@@ -12,6 +12,8 @@
 //   success, error  once, when a turn that did real work ends (then idle)
 //   watch           while you type: eyes on the caret column, look() at most
 //                   every 120 ms; back 1.5 s after the last key, at once on send
+//   project/budget  attention owned by this panel's empty-state chip/menu;
+//                   commits react once; a menu prevents idle sleep
 //   sleep           the hero only, after 90 s with no input while nothing runs;
 //                   the rig wakes itself on a pointer move or a key
 //
@@ -28,6 +30,7 @@
 export const MASCOT_TIMING = Object.freeze({
   watchEveryMs: 120,
   watchIdleMs: 1500,
+  controlDwellMs: 1500,
   sleepAfterMs: 90_000,
   realWorkMs: 3000,
   oneShotMs: Object.freeze({ success: 1000, error: 900 }),
@@ -67,6 +70,9 @@ export function lookToward(box, point, { horizontal = false } = {}) {
  * getTarget() → the renderer's visible mascot { kind: 'hero'|'stage'|'working',
  *   rig, el, parked?(), hold(on), restore() } or null; caret() → the caret's
  *   client point or null.
+ * Control API: attend(owner, { pose, rectOf, options, open }), leave(owner),
+ * controlCommitted({ pose, options, reaction }); type(present, pointOf?) also
+ * watches a budget amount field using the same throttling as the composer.
  * env: { now, setTimeout, clearTimeout, input(fn) → unsubscribe (page pointer
  *   and key input), lastInputAt() }.
  * All of its state is its own: one director per panel, any number at once.
@@ -83,6 +89,9 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
   let holding = false; // hold(true) is in force on `target`
   let shown = ''; // the pose (and then) set on `target`
   let typing = false;
+  let typingPoint = null;
+  let attention = null; // { owner, pose, rectOf, options, open }; this panel's empty-state control
+  let attentionTimer = 0;
   let typingTimer = 0;
   let lookTimer = 0;
   let lookedAt = -Infinity;
@@ -106,9 +115,16 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
       const point = card && card.width ? { x: card.left + Math.min(card.width * 0.3, 160), y: card.top + Math.min(card.height / 2, 28) } : null;
       return { pose: 'blocked', look: lookToward(boxOf(t), point) };
     }
-    if (oneShot && oneShot.target === t) return { pose: oneShot.pose, opts: { then: 'idle' } };
-    if (typing) return { pose: 'watch', look: lookToward(boxOf(t), safe(caret), { horizontal: true }) };
+    const attentionLook = () => {
+      const rect = attention && safe(attention.rectOf);
+      return lookToward(boxOf(t), rect && { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 });
+    };
+    if (oneShot && oneShot.target === t) return { pose: oneShot.pose, opts: oneShot.opts || { then: 'idle' }, ...(attention ? { look: attentionLook() } : {}) };
+    if (typing) return { pose: 'watch', look: lookToward(boxOf(t), safe(typingPoint || caret), { horizontal: true }) };
     if (sleeping && t.kind === 'hero' && !safe(() => t.parked?.())) return { pose: 'sleep' };
+    if (attention && t.kind === 'hero' && !safe(() => t.parked?.())) {
+      return { pose: attention.pose, opts: safe(attention.options) || {}, look: attentionLook() };
+    }
     return null;
   }
 
@@ -136,7 +152,7 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
       return;
     }
     if (!holding) { holding = true; safe(() => t.hold(true)); }
-    const key = `${want.pose}|${want.opts?.then || ''}`;
+    const key = `${want.pose}|${want.opts?.then || ''}|${!!want.opts?.unlimited}`;
     if (key !== shown) { shown = key; safe(() => t.rig.setPose(want.pose, want.opts)); }
     if (want.look) safe(() => t.rig.look(want.look.x, want.look.y));
   }
@@ -155,7 +171,7 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
 
   function canSleep() {
     const t = target;
-    return !destroyed && !!t && t.kind === 'hero' && !safe(() => t.parked?.()) && !turnActive && !typing && !blocked && !offline && !oneShot;
+    return !destroyed && !!t && t.kind === 'hero' && !safe(() => t.parked?.()) && !turnActive && !typing && !attention?.open && !blocked && !offline && !oneShot;
   }
 
   function armSleep() {
@@ -177,17 +193,20 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
     if (lookTimer) { cancel(lookTimer); lookTimer = 0; }
     if (!typing) return;
     typing = false;
+    typingPoint = null;
     apply();
     armSleep();
   }
 
   /** The draft changed: `present` false (an empty draft) ends the watch. */
-  function type(present = true) {
+  function type(present = true, pointOf = null) {
     if (destroyed) return;
     noteInput();
     if (!present) { stopTyping(); return; }
+    if (oneShot?.control) dropOneShot(); // a new edit resumes watching after an acknowledgement
     const first = !typing;
     typing = true;
+    typingPoint = typeof pointOf === 'function' ? pointOf : null;
     if (sleepTimer) { cancel(sleepTimer); sleepTimer = 0; }
     if (typingTimer) cancel(typingTimer);
     typingTimer = later(() => { typingTimer = 0; stopTyping(); }, MASCOT_TIMING.watchIdleMs);
@@ -221,13 +240,53 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
     armSleep();
   }
 
+  function clearAttention() {
+    if (attentionTimer) { cancel(attentionTimer); attentionTimer = 0; }
+    attention = null;
+  }
+
   return {
     /** The draft changed (typing): the mascot watches the caret column. */
     type,
     /** Blur, or the draft went away. */
     stopTyping,
+    /** Chip previews relax after a short dwell; only open menus hold attention and block sleep. */
+    attend(owner, spec) {
+      if (destroyed || (attention?.open && attention.owner !== owner && !spec.open)) return;
+      noteInput();
+      clearAttention();
+      attention = { owner, ...spec };
+      if (!attention.open) attentionTimer = later(() => {
+        clearAttention();
+        apply();
+        armSleep();
+      }, MASCOT_TIMING.controlDwellMs);
+      apply();
+      armSleep();
+    },
+    leave(owner) {
+      if (attention?.owner !== owner) return;
+      clearAttention();
+      apply();
+      armSleep();
+    },
+    /** Only acknowledged user commits call this; loads, live updates and keystrokes do not. */
+    controlCommitted({ pose, options = {}, reaction = 'nod' }) {
+      if (destroyed) return;
+      const t = safe(getTarget);
+      if (!t || t.kind !== 'hero' || safe(() => t.parked?.()) || turnActive || offline || blocked) return;
+      stopTyping();
+      noteInput();
+      dropOneShot();
+      const shot = { pose, opts: options, target: t, timer: 0, control: true };
+      shot.timer = later(() => { if (oneShot !== shot) return; oneShot = null; apply(); armSleep(); }, 900);
+      oneShot = shot;
+      apply();
+      safe(() => t.rig.react(reaction));
+      armSleep();
+    },
     /** A prompt went out: the watch hands over at once (the renderer gives the hero to the "Thinking" row). */
-    sent() { stopTyping(); },
+    sent() { clearAttention(); dropOneShot(); stopTyping(); apply(); armSleep(); },
     /** A card waits on the user (`rectOf()` → its box), or none (null). */
     setBlocked(rectOf) {
       blocked = typeof rectOf === 'function' ? rectOf : null;
@@ -248,6 +307,7 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
     },
     turnStarted() {
       turnActive = true;
+      clearAttention();
       dropOneShot();
       if (sleeping) sleeping = false;
       apply();
@@ -260,14 +320,73 @@ export function createMascotDirector({ getTarget = () => null, caret = () => nul
     /** The user is here (focus, a click): a sleeping hero wakes, the quiet starts over. */
     touch() { if (!destroyed) noteInput(); },
     /** For tests and devtools: what the director holds right now. */
-    state: () => ({ target: target?.kind || null, pose: shown.split('|')[0] || null, typing, blocked: !!blocked, offline, sleeping, oneShot: oneShot?.pose || null }),
+    state: () => ({ target: target?.kind || null, pose: shown.split('|')[0] || null, typing, attention: attention?.pose || null, menuOpen: !!attention?.open, blocked: !!blocked, offline, sleeping, oneShot: oneShot?.pose || null }),
     destroy() {
       if (destroyed) return;
       if (target && holding) safe(() => target.hold(false));
       destroyed = true;
+      clearAttention();
       for (const id of [typingTimer, lookTimer, sleepTimer]) if (id) cancel(id);
       dropOneShot();
       if (stopInput) { safe(stopInput); stopInput = null; }
     },
   };
 }
+
+/** Wire one empty-state chip and its body-level menu to its panel's director. No rig or clock here. */
+export function createMascotControl(anchor, { director = () => null, pose, options = () => ({}) } = {}) {
+  const owner = {};
+  let menu = null, preview = null, watched = false, destroyed = false;
+  const listeners = [];
+  const listen = (node, event, fn) => { node.addEventListener(event, fn); listeners.push(() => node.removeEventListener(event, fn)); };
+  function attend(node = anchor) {
+    if (destroyed) return;
+    preview = node;
+    director()?.attend(owner, { pose, options, open: !!menu, rectOf: () => node.getBoundingClientRect() });
+  }
+  const leave = () => { if (!menu) { preview = null; director()?.leave(owner); } };
+  listen(anchor, 'pointerenter', () => attend(menu || anchor));
+  listen(anchor, 'focus', () => attend(menu || anchor));
+  listen(anchor, 'pointerleave', () => { if (document.activeElement !== anchor) leave(); });
+  listen(anchor, 'blur', leave);
+  let stopMenu = () => {};
+  return {
+    open(node) {
+      if (destroyed || !node) return;
+      stopMenu();
+      menu = node;
+      const follow = e => {
+        const option = e.target.closest?.('.asst-dd-item, input, label, button');
+        if (option && node.contains(option)) attend(option);
+      };
+      const type = e => {
+        if (!e.target.matches?.('.asst-budget-input')) return;
+        watched = true;
+        director()?.type(true, () => {
+          const r = e.target.getBoundingClientRect();
+          return { x: r.left + Math.min(r.width - 12, 12 + e.target.value.length * 7), y: r.top + r.height / 2 };
+        });
+      };
+      node.addEventListener('pointerover', follow);
+      node.addEventListener('focusin', follow);
+      node.addEventListener('input', type);
+      stopMenu = () => {
+        node.removeEventListener('pointerover', follow);
+        node.removeEventListener('focusin', follow);
+        node.removeEventListener('input', type);
+      };
+      attend(node.contains(document.activeElement) ? document.activeElement : node);
+    },
+    close() {
+      stopMenu(); menu = null; preview = null;
+      if (watched) { director()?.stopTyping(); watched = false; }
+      director()?.leave(owner);
+    },
+    commit(reaction) { if (!destroyed) director()?.controlCommitted({ pose, options: options(), reaction }); },
+    refresh() { if (preview) attend(preview); },
+    destroy() {
+      this.close(); destroyed = true;
+      for (const off of listeners) off();
+    },
+  };
+}

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

@@ -288,7 +288,8 @@ export function openMenu(anchor, opts = {}) {
     closeMenu({ restoreFocus: !!item.restoreFocus });
     item.onSelect?.(item, node);
   };
-  buildItems(list, items, { role, onActivate: activate });
+  if (opts.content) list.appendChild(opts.content);
+  else buildItems(list, items, { role, onActivate: activate });
   if (width) menu.style.minWidth = opts.repositionOnResize ? `min(${width}px, calc(100vw - 16px))` : `${width}px`;
   if (width && opts.repositionOnResize) menu.style.width = `min(${width}px, calc(100vw - 16px))`;
   document.body.appendChild(menu);
@@ -311,6 +312,15 @@ export function openMenu(anchor, opts = {}) {
     const nodes = focusables(menu);
     const idx = nodes.indexOf(document.activeElement);
     if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeMenu({ restoreFocus: true }); return; }
+    if (role === 'dialog') {
+      if (e.key === 'Tab') {
+        const fields = [...menu.querySelectorAll('button, input')].filter(node => !node.disabled && !node.hidden);
+        const index = fields.indexOf(document.activeElement);
+        if (e.shiftKey && index <= 0) { e.preventDefault(); fields.at(-1)?.focus(); }
+        else if (!e.shiftKey && (index < 0 || index === fields.length - 1)) { e.preventDefault(); fields[0]?.focus(); }
+      }
+      return; // native number/switch keys and Enter belong to the form
+    }
     if (e.key === 'Tab') { closeMenu(); return; }
     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
       e.preventDefault(); e.stopPropagation();
@@ -347,12 +357,13 @@ export function openMenu(anchor, opts = {}) {
   const onResize = () => opts.repositionOnResize ? positionMenu(menu, anchor, placement) : closeMenu();
   const onBlur = () => closeMenu();
   document.addEventListener('mousedown', onDocDown, true);
-  document.addEventListener('keydown', onKey, true);
+  const keyTarget = role === 'dialog' ? window : document;
+  keyTarget.addEventListener('keydown', onKey, true);
   window.addEventListener('resize', onResize);
   window.addEventListener('blur', onBlur);
   const cleanup = () => {
     document.removeEventListener('mousedown', onDocDown, true);
-    document.removeEventListener('keydown', onKey, true);
+    keyTarget.removeEventListener('keydown', onKey, true);
     window.removeEventListener('resize', onResize);
     window.removeEventListener('blur', onBlur);
   };
@@ -360,6 +371,7 @@ export function openMenu(anchor, opts = {}) {
   _open = { menu, anchor, onClose, cleanup };
   if (anchor.getAttribute('aria-haspopup')) anchor.setAttribute('aria-expanded', 'true');
   anchor.setAttribute('aria-controls', menu.id);
+  opts.onOpen?.(menu);
 
   const selected = list.querySelector('.asst-dd-item[data-checked="1"]:not([disabled])');
   const first = focusables(menu).find(n => n.classList.contains('asst-dd-item')) || focusables(menu)[0];

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

@@ -29,6 +29,9 @@ import { emit, on, state as appState } from '../state.js';
 import { storage } from '../storage.js';
 import { KEYS } from '../constants.js';
 import { t } from '../i18n.js';
+// The account words of the brain picker and the accounts manager (account-view.js) in the page's language.
+// Here, not in those modules: node tests load them, and i18n.js reads the page's storage.
+import '../account-i18n.js';
 import { forgetGreeting, mountGreeting } from '../greeting/greeting-card.js';
 import { notify, NOTIF_TYPE } from '../ui-notifications.js';
 import { getProviderMeta } from '../provider-icons.js';
@@ -51,7 +54,7 @@ import { createAgentsDock } from './asst-agents-dock.js';
 import { createUsageGauge } from './asst-usage.js';
 import { closeMenu, isMenuOpen, openMenu } from './asst-menu.js';
 import { createRouteModeControl, openModelsManager, openRoutesEditor, refreshModelsManager, renderRouteCard, routeModeLabel } from './asst-route.js';
-import { budgetChipText, budgetTone, openBudgetEditor } from './asst-budget.js';
+import { budgetChipText, budgetSpendText, budgetTone, closeBudgetEditor, createBudgetController, mountBudgetChip, openBudgetEditor } from './asst-budget.js';
 import { computerRemoteView, createComputerPanel, createComputerToggle, normalizeComputerRemote, openFrameLightbox, closeFrameLightbox, requestDesktopStop } from './asst-computer.js';
 import {
   applyLimit, applyLimitPacket, applyUsagePacket, brainLabel, createRenameWriter, createTabState, DEFAULT_ROUTE_MODE, deserializeTabState, fmtCost, fmtRunLine, limitExpiresIn, limitNoticeText, modelShortName,
@@ -365,11 +368,11 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   }
 
   function renderCost() {
-    // The server's budget view (brain + agents, the caps) when it sends one.
-    const budget = st.budget && Number.isFinite(Number(st.budget.totalUsd)) ? st.budget : null;
-    const total = budget ? Number(budget.totalUsd) : totalCost();
-    costEl.textContent = fmtCost(total);
-    costEl.hidden = !(total > 0);
+    // The confirmed SessionBudget includes both brain and worker spend.
+    const budget = st.budget && Number.isFinite(Number(st.budget.spentUsd)) ? st.budget : null;
+    const total = budget ? Number(budget.spentUsd) : totalCost();
+    costEl.textContent = budget ? budgetSpendText(budget, { t }) : fmtCost(total);
+    costEl.hidden = !budget && !(total > 0);
     const tone = budgetTone(budget);
     if (tone && tone !== 'ok') costEl.dataset.tone = tone;
     else delete costEl.dataset.tone;
@@ -379,6 +382,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
         ? tt('assistant.topbar.costSplit', 'Session {session} · agents {agents}', { session: fmtCost(st.costUsd || 0), agents: fmtCost(st.dispatchUsd) })
         : tt('assistant.topbar.cost', 'Session cost');
     costEl.setAttribute('data-tooltip', tip);
+    costEl.setAttribute('aria-label', `${tt('assistant.budget.title', 'Budget')}: ${tip}`);
   }
 
   function brainModelLabel() {
@@ -441,6 +445,12 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   });
 
   // ── Renderer ──
+  let emptyBudgetChip = null;
+  const budgetController = createBudgetController({ t, sessionId, onSaved: (data) => {
+    if (destroyed) return;
+    if (data?.session) st.budget = data.session;
+    renderCost();
+  } });
   const renderer = createRenderer(transcriptEl, {
     t,
     providerIcon,
@@ -463,6 +473,16 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     emptySuggestions: () => emptySuggestions(),
     // "Choose a project" in the empty state is the toolbar's Working project field (asst-brain-picker.js).
     mountEmptyProject: (slot) => picker.mountEmptyProject(slot),
+    mountEmptyBudget: (slot) => {
+      emptyBudgetChip?.destroy();
+      emptyBudgetChip = mountBudgetChip(slot, budgetController, { t, mascot: () => director });
+      return emptyBudgetChip.el;
+    },
+    unmountEmptyControls: () => {
+      picker.mountEmptyProject(null);
+      emptyBudgetChip?.destroy();
+      emptyBudgetChip = null;
+    },
     onSuggestion: (template) => composer.fillTemplate(template),
     heroOrigin: () => { try { return host.takeHeroOrigin?.() || null; } catch { return null; } },
     onMascotChange: () => director?.retarget(),
@@ -549,7 +569,9 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   // Model · effort · permission mode · account sit in the composer row next to attach; project and MCP in the toolbar.
   const picker = createBrainPicker({ brain: composer.el.querySelector('.asst-composer-brain'), context: barGroups.context }, {
     t,
+    mascot: () => director,
     getBrain: () => st.brain,
+    getRunning: () => st.running,
     onChange: (next, meta) => applyBrain(next, meta),
     onAddAccount: (provider) => openAccountsManager({ provider, ...accountHooks() }).openAdd(),
     onManageAccounts: (provider) => openAccountsManager({ provider, ...accountHooks() }),
@@ -625,7 +647,10 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
   function fetchUsage() {
     const seq = ++usageFetchSeq;
     getAssistantSessionUsage(sessionId).then((data) => {
-      if (!destroyed && seq === usageFetchSeq && data?.ok && data.usage) applyUsage(data.usage);
+      if (!destroyed && seq === usageFetchSeq && data?.ok) {
+        if (data.budget) budgetController.receiveSession(data.budget);
+        if (data.usage) applyUsage(data.usage);
+      }
     }).catch(() => { /* older servers do not expose usage */ });
   }
   function applyUsage(packet) {
@@ -813,6 +838,9 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
       case 'assistant:mailbox':
         renderer.appendMailbox(packet.items || packet.events || packet.mailbox || []);
         return;
+      case 'assistant:budget':
+        budgetController.receiveSession(packet.budget);
+        return;
       case 'assistant:cost':
         applyCost(packet);
         return;
@@ -885,7 +913,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     if (session != null) st.costUsd = session;
     else if (!packet?.runId && num(packet?.costUsd) != null) st.costUsd = num(packet.costUsd);
     if (num(packet?.dispatchUsd) != null) st.dispatchUsd = num(packet.dispatchUsd);
-    if (packet?.budget && typeof packet.budget === 'object') st.budget = packet.budget;
+    if (packet?.budget && typeof packet.budget === 'object') budgetController.receiveSession(packet.budget);
     if (typeof packet?.brainMetered === 'boolean') st.brainMetered = packet.brainMetered;
     if (packet?.runId && num(packet.costUsd) != null) dock.patchRun(packet.runId, { costUsd: num(packet.costUsd) });
     if (session != null) st.serverCost = true;
@@ -905,7 +933,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
       const next = normalizeBrain({ ...st.brain, provider: meta.brain, model: meta.model ?? st.brain.model, effort: meta.effort ?? st.brain.effort, accountId: meta.accountId ?? st.brain.accountId, mcpProfile: meta.mcpProfile ?? st.brain.mcpProfile, project: meta.cwd ?? st.brain.project });
       if (JSON.stringify(next) !== JSON.stringify(st.brain)) { st.brain = next; picker.render(); host.setBrain?.(next); persist(); }
     }
-    if (meta.budget && typeof meta.budget === 'object') st.budget = meta.budget;
+    if (meta.budget && typeof meta.budget === 'object') budgetController.receiveSession(meta.budget);
     if (Number.isFinite(Number(meta.costUsd))) { st.costUsd = Number(meta.costUsd); renderCost(); }
     if (meta.providerSessionId) st.providerSessionId = meta.providerSessionId;
     if (meta.routing && typeof meta.routing === 'object') {
@@ -1468,13 +1496,13 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     if (meta.silent) return;
     if (meta.requiresSwitch) {
       const b = st.brain;
-      sock.send({ type: 'switch_brain', brain: b.provider, model: b.model || undefined, effort: b.effort || undefined, accountId: b.accountId || undefined, mcpProfile: b.mcpProfile || undefined, cwd: b.project || undefined, agent: b.agent || undefined, permissionMode: b.permissionMode, planMode: b.planMode === true });
+      if (!meta.restartBrain) sock.send({ type: 'switch_brain', brain: b.provider, model: b.model || undefined, effort: b.effort || undefined, accountId: b.accountId || undefined, mcpProfile: b.mcpProfile || undefined, cwd: b.project || undefined, agent: b.agent || undefined, permissionMode: b.permissionMode, planMode: b.planMode === true });
       renderer.appendDivider(`${tt('assistant.status.brain', 'brain')} → ${brainLabel(b)}`);
       renderer.forgetSeen(); // the new brain's ids start over
     } else if (before.permissionMode !== st.brain.permissionMode || !!before.planMode !== !!st.brain.planMode) {
       sock.send({ type: 'set_permission_mode', mode: st.brain.permissionMode, planMode: st.brain.planMode === true });
     }
-    patchAssistantSession(sessionId, { brain: st.brain }).catch((err) => {
+    patchAssistantSession(sessionId, { brain: st.brain, ...(meta.restartBrain ? { restartBrain: true } : {}) }).catch((err) => {
       // Refused (a model disabled in Assistant → Models): undo, so the refused
       // brain is neither shown nor saved as the last used one — the next start
       // would ask for it again. A brain switch already got the error on the socket.
@@ -1653,7 +1681,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     items.push({ id: 'compact', label: tt('assistant.topbar.compact', 'Compact context'), onSelect: () => compact() });
     if (routingAvailable()) items.push({ id: 'routes', label: tt('assistant.routes.editor', 'Model routes…'), icon: ICON_ROUTE, onSelect: () => openRoutes() });
     items.push({ id: 'models', label: tt('assistant.models.menu', 'Models…'), onSelect: () => openModels() });
-    items.push({ id: 'budget', label: tt('assistant.budget.menu', 'Budget…'), desc: st.budget ? `${fmtCost(st.budget.totalUsd) || '$0.00'} / ${fmtCost(st.budget.hardUsd)}` : '', onSelect: () => openBudget() });
+    items.push({ id: 'budget', label: tt('assistant.budget.menu', 'Budget…'), desc: budgetSpendText(st.budget, { t }), onSelect: () => openBudget() });
     items.push({ id: 'clear', label: tt('assistant.topbar.clear', 'Clear transcript'), onSelect: () => clearTranscript() });
     items.push({ id: 'help', label: tt('assistant.topbar.helpShortcuts', 'Help & shortcuts'), onSelect: () => openHelp() });
     items.push({ kind: 'separator' });
@@ -1707,12 +1735,12 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     }
   }
 
-  // Assistant → Budget: the money caps (applied live by the server).
+  // Assistant → Budget: one saved amount plus the current session's live split.
   function openBudget() {
     openBudgetEditor({
       t,
       sessionId,
-      brainMetered: st.brainMetered !== false && st.brain?.provider !== 'codex',
+      controller: budgetController,
       onToast: toast,
       onSaved: (res) => { if (res?.session) { st.budget = res.session; renderCost(); } },
     }).catch(() => {});
@@ -1821,6 +1849,8 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
 
   // ── Bus ──
   unsubs.push(on('sync:assistant:session-updated', (msg) => { const s = msg?.session || msg; if (s?.id === sessionId) applySessionMeta(s); }));
+  unsubs.push(on('sync:assistant:budget', (msg) => { if ((msg?.assistantSessionId || msg?.sessionId) === sessionId) budgetController.receiveSession(msg.budget); }));
+  unsubs.push(on('sync:assistant:budget-changed', () => budgetController.load()));
   unsubs.push(on('sync:assistant:cost', (msg) => { if (!msg?.assistantSessionId || msg.assistantSessionId === sessionId) applyCost(msg); }));
   unsubs.push(on('sync:assistant:mailbox', (msg) => { if (msg?.assistantSessionId === sessionId) renderer.appendMailbox(msg.items || msg.events || []); }));
   unsubs.push(on('sync:assistant:permission-request', (msg) => {
@@ -1891,6 +1921,7 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
     sock.connect();
   });
   fetchUsage();
+  budgetController.load();
 
   const controller = {
     sessionId,
@@ -1934,6 +1965,9 @@ export function mountAssistant(viewport, { sessionId, brain, host = {}, session
       if (persistTimer) { clearTimeout(persistTimer); persistTimer = null; }
       clearTimeout(announceTimer);
       if (replay) { clearTimeout(replay.timer); replay = null; }
+      closeBudgetEditor(budgetController);
+      emptyBudgetChip?.destroy();
+      budgetController.destroy();
       director.destroy();
       usage.destroy();
       clearTimeout(limitTimer);

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

@@ -228,6 +228,7 @@ export function updateRunCard(card, run, opts = {}) {
       const r = run.route;
       const routeBits = [r.taskClassLabel || r.taskClass || t('assistant.routes.task', 'task')];
       if (r.status === 'pending') routeBits.push(t('assistant.routes.state.pending', 'waiting for your choice'));
+      else if (r.decidedBy === 'budget' || r.source === 'budget') routeBits.push(t('assistant.routes.budgetDecision', 'budget re-route'));
       else if (r.decidedBy === 'user') routeBits.push(t('assistant.routes.youChose', 'you chose'));
       else if (r.remembered || r.decidedBy === 'remembered') routeBits.push(t('assistant.routes.remembered', 'your saved choice'));
       else if (Number.isFinite(Number(r.confidence))) routeBits.push(`${Math.round(Number(r.confidence) <= 1 ? Number(r.confidence) * 100 : Number(r.confidence))}%`);
@@ -548,8 +549,10 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   /** A menu opened from the empty state's project picker does not outlive it. */
   function closeEmptyMenu() {
-    const btn = emptyEl?.querySelector('.asst-empty-project-btn');
-    if (btn && isMenuOpen(btn)) closeMenu();
+    for (const btn of emptyEl?.querySelectorAll('.asst-empty-project-btn') || []) {
+      if (isMenuOpen(btn)) closeMenu();
+    }
+    hooks.unmountEmptyControls?.();
   }
 
   // ── The hero ──
@@ -2689,7 +2692,12 @@ export function createRenderer(transcriptEl, hooks = {}) {
 
   function upsertRunCard(run, { result = null } = {}) {
     if (!run?.runId) return null;
-    runInfo.set(run.runId, { ...runInfo.get(run.runId), title: run.title || run.task || runInfo.get(run.runId)?.title, state: run.status || runInfo.get(run.runId)?.state, provider: run.provider });
+    const prev = runInfo.get(run.runId);
+    const status = run.status || prev?.state;
+    const tone = status ? runTone({ ...run, status }) : '';
+    const routeId = run.route?.routeId || prev?.routeId || '';
+    runInfo.set(run.runId, { ...prev, title: run.title || run.task || prev?.title, state: status, provider: run.provider, routeId, working: tone === 'running' || tone === 'queued' });
+    if (routeId) syncRouteLive(routeId);
     const cardOpts = runCardOpts(result);
     let card = runCards.get(run.runId);
     if (card && card.isConnected) {
@@ -2745,21 +2753,42 @@ export function createRenderer(transcriptEl, hooks = {}) {
     return { phase, t: hooks.t, providerIcon: hooks.providerIcon, brainLabel: hooks.brainLabel, onChangeRoutes: hooks.onChangeRoutes };
   }
 
-  /** Create or update the line for `route.routeId` in place. */
+  /** Create or update the line for `route.routeId` in place. Only a new line enters (never on replay). */
   function upsertRouteLine(route, phase = 'decided') {
     const routeId = route?.routeId;
     if (!routeId) return null;
     const existing = routeLines.get(routeId);
-    if (existing && existing.el.isConnected) { existing.update(route, phase); return existing; }
+    if (existing && existing.el.isConnected) { existing.update(route, phase); syncRouteLive(routeId); return existing; }
     const line = createRouteLine(route, routeLineOpts(phase));
     routeLines.set(routeId, line);
     append(line.el);
+    syncRouteLive(routeId);
+    enterRow(line.el);
     return line;
   }
 
   /** Adopt a line created by a collapsing route card so later events update it. */
   function registerRouteLine(routeId, line) {
-    if (routeId && line) routeLines.set(routeId, line);
+    if (!routeId || !line) return;
+    const fresh = routeLines.get(routeId) !== line;
+    routeLines.set(routeId, line);
+    syncRouteLive(routeId);
+    if (fresh && line.el?.isConnected) enterRow(line.el);
+  }
+
+  /** The line is live while a run it dispatched is queued or working (run cards keep runInfo current). */
+  function syncRouteLive(routeId) {
+    const line = routeLines.get(routeId);
+    if (!line?.setRunning) return;
+    let working = false;
+    for (const info of runInfo.values()) if (info.routeId === routeId && info.working) { working = true; break; }
+    line.setRunning(working);
+  }
+
+  /** A new row's entrance: the rack ledger's (4px rise and fade, --asst-dur-fast, --asst-ease-enter); none when calm. */
+  function enterRow(node) {
+    if (calm() || typeof node?.animate !== 'function') return;
+    node.animate([{ opacity: 0, transform: 'translateY(4px)' }, { opacity: 1, transform: 'none' }], { duration: 140, easing: cssEase('--asst-ease-enter', 'cubic-bezier(0,0,.38,.9)') });
   }
 
   function removeRouteLine(routeId) {
@@ -2899,7 +2928,9 @@ export function createRenderer(transcriptEl, hooks = {}) {
     const projectSlot = emptyEl.querySelector('.asst-empty-project');
     let picker = null;
     try { picker = typeof hooks.mountEmptyProject === 'function' ? hooks.mountEmptyProject(projectSlot) : null; } catch { picker = null; }
-    projectSlot.hidden = !picker;
+    let budget = null;
+    try { budget = hooks.mountEmptyBudget?.(projectSlot); } catch { /* unavailable */ }
+    projectSlot.hidden = !picker && !budget;
     renderSuggestions();
     $msgs.appendChild(emptyEl);
     // The host's "Starting…" character flies into place (not on replay or reduced motion).