synabun 2.0.0 → 2.0.7

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

@@ -1,333 +1,289 @@
-// ═══════════════════════════════════════════
-// SynaBun Assistant — Budget (⋯ → Budget…)
-// ═══════════════════════════════════════════
-// The money caps of the assistant: default and largest per-run cap, the
-// session warning, the session hard cap (brain + every run) and the brain cap.
-// Saved to assistant-config.json through PUT /api/assistant/budget; the
-// dispatcher and the runtime read them on their next check, so a change
-// applies to running sessions without a restart. The pure helpers
-// (validateBudgetDraft, budgetTone, budgetChipText) are covered by node:test;
-// nothing here touches `document` at import time.
-
+// One saved per-session budget. Both entry points use this controller and form;
+// chips display confirmed server values, while an unsaved edit stays in the form.
 import { getBudget, putBudget } from './asst-api.js';
+import { openMenu, closeMenu, isMenuOpen } from './asst-menu.js';
+import { createMascotControl } from './asst-mascot.js';
 
-export const BUDGET_FIELDS = Object.freeze([
-  { id: 'defaultRunUsd', key: 'assistant.budget.defaultRun', label: 'Default per-run cap', desc: 'Each dispatched run stops at this spend unless the brain asks for another cap.' },
-  { id: 'maxRunUsd', key: 'assistant.budget.maxRun', label: 'Largest per-run cap', desc: 'The most a brain may give one run (budget_usd).' },
-  { id: 'sessionWarnUsd', key: 'assistant.budget.sessionWarn', label: 'Session warning', desc: 'The brain and this panel are warned once when the session spends this much.' },
-  { id: 'sessionHardUsd', key: 'assistant.budget.sessionHard', label: 'Session hard cap', desc: 'Brain + every run of the session. At this spend runs stop, and dispatches, follow-ups and brain turns are refused.' },
-  { id: 'brainUsd', key: 'assistant.budget.brain', label: 'Brain cap', desc: 'The central brain\'s own spend in one session, checked before every brain turn.' },
-]);
 export const BUDGET_BOUNDS = Object.freeze({ minUsd: 0.1, maxUsd: 1000 });
-
-function tf(t) {
-  return (key, fallback, vars) => {
-    let text = typeof t === 'function' ? t(key, vars) : null;
-    if (!text || text === key) text = fallback;
-    if (vars) for (const [name, value] of Object.entries(vars)) text = String(text).replaceAll(`{${name}}`, String(value));
-    return text;
-  };
-}
-const money = (value) => `$${(Number(value) || 0).toFixed(2)}`;
-function esc(value) {
-  return String(value ?? '').replace(/[&<>"']/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
-}
-function el(tag, className, text) {
+const money = value => `$${(Number(value) || 0).toFixed(2)}`;
+// The saved amount: whole dollars as typed ("$1000"), cents always with two digits ("$12.50").
+const amountText = value => (Number.isInteger(Number(value)) ? `$${Number(value)}` : money(value));
+const tf = t => (key, fallback, vars = {}) => {
+  const value = t?.(key, vars);
+  return String(!value || value === key ? fallback : value).replace(/\{(\w+)\}/g, (all, key) => vars[key] ?? all);
+};
+const el = (tag, cls, text) => {
   const node = document.createElement(tag);
-  if (className) node.className = className;
+  if (cls) node.className = cls;
   if (text != null) node.textContent = text;
   return node;
-}
+};
 
-/**
- * Check a draft ({ field: string|number }) the way the server does: each value
- * an amount between the bounds, then default ≤ largest ≤ hard, warning < hard,
- * brain ≤ hard. → { values, errors: { field: message } }.
- */
-export function validateBudgetDraft(draft = {}, { bounds = BUDGET_BOUNDS, t = null } = {}) {
-  const tr = tf(t);
-  const values = {};
-  const errors = {};
-  for (const field of BUDGET_FIELDS) {
-    const raw = draft[field.id];
-    const text = typeof raw === 'string' ? raw.trim().replace(/^\$/, '') : raw;
-    const n = text === '' || text === null || text === undefined ? NaN : Number(text);
-    if (!Number.isFinite(n)) { errors[field.id] = tr('assistant.budget.errNumber', 'Enter an amount in US dollars.'); continue; }
-    if (n < bounds.minUsd || n > bounds.maxUsd) { errors[field.id] = tr('assistant.budget.errRange', 'Between {min} and {max}.', { min: money(bounds.minUsd), max: `$${bounds.maxUsd}` }); continue; }
-    values[field.id] = Math.round(n * 100) / 100;
+export function validateBudgetDraft(draft = {}, { bounds = BUDGET_BOUNDS, t } = {}) {
+  const tr = tf(t), errors = {}, values = { unlimited: draft.unlimited === true };
+  const raw = typeof draft.amountUsd === 'string' ? draft.amountUsd.trim() : draft.amountUsd;
+  const amount = raw === '' || raw == null ? NaN : Number(raw);
+  if (!values.unlimited) {
+    if (!Number.isFinite(amount)) errors.amountUsd = tr('assistant.budget.errNumber', 'Enter an amount in US dollars.');
+    else if (amount < bounds.minUsd || amount > bounds.maxUsd) errors.amountUsd = tr('assistant.budget.errRange', 'Between {min} and {max}.', { min: money(bounds.minUsd), max: money(bounds.maxUsd) });
   }
-  const v = values;
-  const has = (...ids) => ids.every((id) => Number.isFinite(v[id]));
-  if (has('maxRunUsd', 'sessionHardUsd') && v.maxRunUsd > v.sessionHardUsd && !errors.maxRunUsd) errors.maxRunUsd = tr('assistant.budget.errMaxOverHard', 'Cannot exceed the session hard cap ({hard}).', { hard: money(v.sessionHardUsd) });
-  if (has('defaultRunUsd', 'maxRunUsd') && v.defaultRunUsd > v.maxRunUsd && !errors.defaultRunUsd) errors.defaultRunUsd = tr('assistant.budget.errDefaultOverMax', 'Cannot exceed the largest per-run cap ({max}).', { max: money(v.maxRunUsd) });
-  if (has('sessionWarnUsd', 'sessionHardUsd') && v.sessionWarnUsd >= v.sessionHardUsd && !errors.sessionWarnUsd) errors.sessionWarnUsd = tr('assistant.budget.errWarnOverHard', 'Must be below the session hard cap ({hard}).', { hard: money(v.sessionHardUsd) });
-  if (has('brainUsd', 'sessionHardUsd') && v.brainUsd > v.sessionHardUsd && !errors.brainUsd) errors.brainUsd = tr('assistant.budget.errBrainOverHard', 'Cannot exceed the session hard cap ({hard}).', { hard: money(v.sessionHardUsd) });
+  // No limit must work even if the unfinished amount field is invalid.
+  if (Number.isFinite(amount) && amount >= bounds.minUsd && amount <= bounds.maxUsd) values.amountUsd = Math.round(amount * 100) / 100;
   return { values, errors };
 }
-
-/** 'over' at the hard cap, 'warn' at the warning, else 'ok' (null without a budget view). */
 export function budgetTone(view) {
-  if (!view || !Number.isFinite(Number(view.totalUsd))) return null;
-  if (Number(view.totalUsd) >= Number(view.hardUsd)) return 'over';
-  if (Number(view.totalUsd) >= Number(view.warnUsd)) return 'warn';
+  if (!view) return null;
+  if (view.unlimited) return 'ok';
+  if (view.exceeded || Number(view.spentUsd) >= Number(view.amountUsd)) return 'over';
+  if (Number(view.spentUsd) >= Number(view.warnAtUsd ?? Number(view.amountUsd) * 0.8)) return 'warn';
   return 'ok';
 }
-
-/** Cost chip tooltip: "Brain $x · agents $y · $z of $cap cap". */
-export function budgetChipText(view, { t = null, brainMetered = true } = {}) {
-  const tr = tf(t);
+export function budgetSpendText(view, { t } = {}) {
   if (!view) return '';
-  const brain = brainMetered ? money(view.brainUsd) : tr('assistant.budget.notMetered', 'not metered');
-  const parts = [
-    tr('assistant.budget.chipSplit', 'Brain {brain} · agents {agents}', { brain, agents: money(view.dispatchUsd) }),
-    tr('assistant.budget.chipCap', '{total} of the {hard} session cap', { total: money(view.totalUsd), hard: money(view.hardUsd) }),
-  ];
-  if (Number(view.unpricedRuns) > 0) parts.push(tr('assistant.budget.chipUnpriced', '{n} run(s) with unpriced usage', { n: view.unpricedRuns }));
-  return parts.join(' · ');
+  return view.unlimited
+    ? tf(t)('assistant.budget.spendUnlimited', '{spent} · no limit', { spent: money(view.spentUsd) })
+    : `${money(view.spentUsd)} / ${money(view.amountUsd)}`;
+}
+export function budgetSettingText(budget, { t } = {}) {
+  if (!budget) return '…';
+  return budget.unlimited ? tf(t)('assistant.budget.noLimit', 'No limit')
+    : tf(t)('assistant.budget.perSession', '{amount} / session', { amount: amountText(budget.amountUsd) });
+}
+export function budgetChipText(view, { t } = {}) {
+  if (!view) return '';
+  const tr = tf(t);
+  return [budgetSpendText(view, { t }), tr('assistant.budget.chipSplit', 'Brain {brain} · agents {agents}', { brain: money(view.brainUsd), agents: money(view.dispatchUsd) }),
+    Number(view.unpricedRuns) > 0 ? tr('assistant.budget.chipUnpriced', '{n} run(s) with unpriced usage', { n: view.unpricedRuns }) : ''].filter(Boolean).join(' · ');
 }
 
-let _editor = null;
-
-/**
- * Open the Budget modal. hooks: { t, sessionId, brainMetered, onToast, onSaved(payload) }.
- */
-export async function openBudgetEditor(hooks = {}) {
-  if (_editor) _editor.close();
-  const tr = tf(hooks.t);
-  const overlay = el('div', 'asst-modal-overlay');
-  overlay.setAttribute('role', 'dialog');
-  overlay.setAttribute('aria-modal', 'true');
-  overlay.setAttribute('aria-label', tr('assistant.budget.title', 'Budget'));
-  const modal = el('div', 'asst-modal asst-routes-modal asst-budget-modal');
-  modal.innerHTML = `
-    <div class="asst-modal-head"><span class="asst-icon" aria-hidden="true">$</span><span>${esc(tr('assistant.budget.title', 'Budget'))}</span><button type="button" class="asst-iconbtn asst-modal-close" aria-label="${esc(tr('common.close', 'Close'))}">✕</button></div>
-    <div class="asst-modal-body"><div class="asst-modal-note">${esc(tr('common.loading', 'Loading...'))}</div></div>
-    <div class="asst-modal-foot">
-      <button type="button" class="asst-btn asst-btn-secondary asst-budget-reset-all">${esc(tr('assistant.budget.resetAll', 'Defaults'))}</button>
-      <span class="asst-modal-spacer"></span>
-      <button type="button" class="asst-btn asst-btn-secondary asst-budget-cancel">${esc(tr('common.cancel', 'Cancel'))}</button>
-      <button type="button" class="asst-btn asst-btn-primary asst-budget-save">${esc(tr('common.save', 'Save'))}</button>
-    </div>`;
-  overlay.appendChild(modal);
-  const body = modal.querySelector('.asst-modal-body');
-  const saveBtn = modal.querySelector('.asst-budget-save');
-  const returnTo = document.activeElement;
-  const state = { data: null, draft: {}, error: '', conflict: false, serverField: null, saving: false };
-
-  function close() {
-    if (!overlay.isConnected) return;
-    document.removeEventListener('keydown', onKey, true);
-    overlay.remove();
-    _editor = null;
-    if (returnTo?.isConnected) { try { returnTo.focus({ preventScroll: true }); } catch { /* ignore */ } }
+/** Serializable writer with one conflict retry, no polling and no local persistence. */
+export function createBudgetController({ sessionId = null, t, get = getBudget, put = putBudget, onSaved, debounceMs = 450 } = {}) {
+  const tr = tf(t), listeners = new Set(), commits = new Set(), edits = new Map();
+  const state = { data: null, draft: { unlimited: false, amountUsd: '' }, dirty: false, saving: false, loading: false, error: '', fieldError: '', saved: false };
+  let timer, revision = 0, loading, writing, disposed = false;
+  const notify = () => { if (!disposed) for (const fn of listeners) fn(state); };
+  const committed = event => { if (!disposed) for (const fn of commits) { try { fn(event); } catch { /* an observer cannot fail a save */ } } };
+  const adopt = data => {
+    if (!data?.budget || (state.data && Number(data.version) < Number(state.data.version))) return;
+    // A PUT returns before the split finishes: don't overwrite a newer live split
+    // that arrived during this request with the old split from its response.
+    const live = state.data?.session;
+    if (live && data.session && live.version >= data.session.version &&
+        Date.parse(live.split?.updatedAt || 0) > Date.parse(data.session.split?.updatedAt || 0)) data = { ...data, session: live };
+    state.data = data;
+    if (!edits.has('unlimited')) state.draft.unlimited = data.budget.unlimited;
+    if (!edits.has('amountUsd')) state.draft.amountUsd = String(data.budget.amountUsd ?? '');
+    if (!disposed) onSaved?.(data);
+  };
+  async function load() {
+    if (loading) return loading;
+    state.loading = true; state.error = ''; notify();
+    loading = (async () => {
+      try { adopt(await get(sessionId)); }
+      catch { state.error = tr('assistant.budget.loadFailed', 'Could not load the budget. Try again.'); }
+      finally { state.loading = false; loading = null; notify(); }
+      return state.data;
+    })();
+    return loading;
   }
-  function onKey(e) {
-    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(); return; }
-    if (e.key === 'Enter' && e.target?.matches?.('.asst-budget-input')) { e.preventDefault(); save(); return; }
-    e.stopPropagation();
+  function edit(patch, { immediate = false } = {}) {
+    revision++; state.draft = { ...state.draft, ...patch }; state.dirty = true;
+    for (const field of Object.keys(patch)) edits.set(field, revision);
+    state.error = ''; state.fieldError = ''; state.saved = false;
+    clearTimeout(timer); notify();
+    if (immediate) return flush();
+    timer = setTimeout(flush, debounceMs);
   }
-  document.addEventListener('keydown', onKey, true);
-  overlay.addEventListener('mousedown', (e) => { if (e.target === overlay) close(); });
-  modal.querySelector('.asst-modal-close').addEventListener('click', close);
-  modal.querySelector('.asst-budget-cancel').addEventListener('click', close);
-  modal.querySelector('.asst-budget-reset-all').addEventListener('click', () => {
-    if (!state.data) return;
-    for (const field of BUDGET_FIELDS) state.draft[field.id] = String(state.data.defaults?.[field.id] ?? '');
-    render();
-  });
-  document.body.appendChild(overlay);
-  _editor = { close };
-
-  function sourceLabel(source) {
-    if (source === 'saved') return tr('assistant.budget.sourceSaved', 'saved');
-    if (source === 'legacy') return tr('assistant.budget.sourceLegacy', 'from soft budget');
-    return tr('assistant.budget.sourceDefault', 'default');
+  async function flush() {
+    clearTimeout(timer);
+    if (writing) return writing;
+    if (!state.data || !state.dirty) return;
+    writing = (async () => {
+      while (state.dirty) {
+        const changed = new Map(edits);
+        const { values, errors } = validateBudgetDraft(state.draft, { bounds: state.data.bounds, t });
+        state.fieldError = errors.amountUsd || '';
+        if (state.fieldError) { notify(); break; }
+        const patch = Object.fromEntries([...changed.keys()].filter(field => Object.hasOwn(values, field)).map(field => [field, values[field]]));
+        state.saving = true; state.error = ''; notify();
+        try {
+          let response;
+          try { response = await put(patch, state.data.version, sessionId); }
+          catch (err) {
+            if (err.code !== 'VERSION_CONFLICT' && err.status !== 409) throw err;
+            adopt(await get(sessionId));
+            response = await put(patch, state.data.version, sessionId); // retry the edit once
+          }
+          for (const [field, at] of changed) if (edits.get(field) === at) edits.delete(field);
+          state.dirty = edits.size > 0;
+          adopt(response); state.saved = !state.dirty;
+          committed({ ok: true, patch, budget: response.budget });
+        } catch (err) {
+          if (err.code === 'BUDGET_INVALID') state.fieldError = tr('assistant.budget.invalid', 'The server rejected this budget. Check the amount and try again.');
+          else if (err.code === 'VERSION_CONFLICT' || err.status === 409) state.error = tr('assistant.budget.conflict', 'Changed elsewhere again. Your edit is kept; try again.');
+          else state.error = tr('assistant.budget.saveFailed', 'Could not save the budget. Your edit is kept; try again.');
+          committed({ ok: false, patch, error: err });
+          break;
+        } finally { state.saving = false; notify(); }
+      }
+    })();
+    try { await writing; } finally { writing = null; }
   }
-
-  function sessionSection(view) {
-    const section = el('section', 'asst-routes-section asst-budget-session');
-    section.appendChild(el('div', 'asst-routes-section-title', tr('assistant.budget.thisSession', 'This session')));
-    const tone = budgetTone(view) || 'ok';
-    const hard = Math.max(0.01, Number(view.hardUsd) || 0);
-    const meter = el('div', 'asst-budget-meter');
-    meter.dataset.tone = tone;
-    meter.setAttribute('role', 'meter');
-    meter.setAttribute('aria-valuemin', '0');
-    meter.setAttribute('aria-valuemax', String(hard));
-    meter.setAttribute('aria-valuenow', String(Number(view.totalUsd) || 0));
-    meter.setAttribute('aria-label', tr('assistant.budget.meterLabel', 'Session spend against the hard cap'));
-    const fill = el('span', 'asst-budget-meter-fill');
-    fill.style.width = `${Math.min(100, (Number(view.totalUsd) / hard) * 100)}%`;
-    const tick = el('span', 'asst-budget-meter-warn');
-    tick.style.left = `${Math.min(100, (Number(view.warnUsd) / hard) * 100)}%`;
-    meter.append(fill, tick);
-    section.appendChild(meter);
-    const brain = hooks.brainMetered === false ? tr('assistant.budget.notMeteredCodex', 'not metered (Codex brain)') : money(view.brainUsd);
-    const line = tr('assistant.budget.sessionLine', '{total} spent of {hard} — brain {brain}, agents {agents}; {reserved} reserved by live runs, {available} left for new runs.', {
-      total: money(view.totalUsd), hard: money(view.hardUsd), brain, agents: money(view.dispatchUsd), reserved: money(view.reservedUsd), available: money(view.availableUsd),
-    });
-    section.appendChild(el('div', 'asst-modal-note', line));
-    if (Number(view.unpricedRuns) > 0) {
-      const note = el('div', 'asst-modal-note asst-budget-unpriced', tr('assistant.budget.unpriced', '{n} run(s) used a model with no known price: their tokens are recorded but the dollar caps cannot meter them.', { n: view.unpricedRuns }));
-      section.appendChild(note);
-    }
-    return section;
+  function receiveSession(view) {
+    if (!view || (sessionId && view.sessionId !== sessionId)) return;
+    if (state.data && Number(view.version) < Number(state.data.version)) return;
+    const saved = state.data?.budget || {};
+    adopt({ ...(state.data || {}), version: view.version, budget: { ...saved, unlimited: view.unlimited, amountUsd: view.amountUsd ?? saved.amountUsd, version: view.version }, session: view });
+    notify();
   }
+  return { state, load, edit, flush, receiveSession,
+    subscribe(fn) { listeners.add(fn); fn(state); return () => listeners.delete(fn); },
+    onCommit(fn) { commits.add(fn); return () => commits.delete(fn); },
+    destroy() { flush(); disposed = true; clearTimeout(timer); listeners.clear(); commits.clear(); },
+  };
+}
 
-  function capRow(field, errors) {
-    const data = state.data;
-    const row = el('div', 'asst-routes-row asst-budget-row');
-    row.dataset.field = field.id;
-    const main = el('div', 'asst-routes-row-main');
-    const inputId = `asst-budget-${field.id}`;
-    const label = el('label', 'asst-routes-row-label', tr(field.key, field.label));
-    label.htmlFor = inputId;
-    main.appendChild(label);
-    main.appendChild(el('div', 'asst-budget-desc', tr(`${field.key}Desc`, field.desc)));
-    const effective = data.budget?.[field.id];
-    const def = data.defaults?.[field.id];
-    main.appendChild(el('div', 'asst-budget-meta', tr('assistant.budget.effective', 'In effect: {value} · default {def}', { value: money(effective), def: money(def) })));
-    const error = errors[field.id] || (state.serverField === field.id ? state.error : '');
-    if (error) {
-      const msg = el('div', 'asst-budget-field-error', error);
-      msg.id = `${inputId}-error`;
-      main.appendChild(msg);
-    }
-    row.appendChild(main);
-    const wrap = el('div', 'asst-budget-amount');
-    wrap.appendChild(el('span', 'asst-budget-unit', 'USD $'));
-    const input = el('input', 'asst-dd-input asst-budget-input');
-    input.id = inputId;
-    input.type = 'number';
-    input.inputMode = 'decimal';
-    input.step = '0.01';
-    input.min = String(data.bounds?.minUsd ?? BUDGET_BOUNDS.minUsd);
-    input.max = String(data.bounds?.maxUsd ?? BUDGET_BOUNDS.maxUsd);
-    input.value = state.draft[field.id] ?? '';
-    if (error) { input.setAttribute('aria-invalid', 'true'); input.setAttribute('aria-describedby', `${inputId}-error`); }
-    input.addEventListener('input', () => {
-      state.draft[field.id] = input.value;
-      if (state.serverField === field.id) { state.serverField = null; state.error = ''; }
-      const pos = input.selectionStart;
-      render();
-      const again = modal.querySelector(`#${CSS.escape(inputId)}`);
-      again?.focus({ preventScroll: true });
-      try { again?.setSelectionRange?.(pos, pos); } catch { /* number inputs have no selection */ }
-    });
-    wrap.appendChild(input);
-    row.appendChild(wrap);
-    const source = String(state.draft[field.id]) === String(effective) ? (data.sources?.[field.id] || 'default') : 'edited';
-    const badge = el('span', 'asst-routes-source', source === 'edited' ? tr('assistant.budget.sourceEdited', 'edited') : sourceLabel(source));
-    badge.dataset.source = source === 'saved' || source === 'edited' ? 'yours' : 'default';
-    row.appendChild(badge);
-    return row;
-  }
+let uid = 0;
+/** The identical autosave control in the empty-state popover and the session modal. */
+export function createBudgetControls(controller, { t } = {}) {
+  const tr = tf(t), id = `asst-budget-${++uid}`;
+  const root = el('section', 'asst-budget-controls'); root.tabIndex = -1;
+  const label = el('label', 'asst-routes-row-label', tr('assistant.budget.amount', 'Budget per session (USD)'));
+  label.htmlFor = id;
+  const input = el('input', 'asst-dd-input asst-budget-input');
+  input.id = id; input.type = 'number'; input.inputMode = 'decimal'; input.step = '0.01';
+  const switchLabel = el('label', 'asst-budget-switch-label');
+  const toggle = el('input', 'asst-budget-switch');
+  toggle.type = 'checkbox'; toggle.setAttribute('role', 'switch');
+  switchLabel.append(toggle, el('span', '', tr('assistant.budget.noLimit', 'No limit')));
+  const note = el('div', 'asst-modal-note', tr('assistant.budget.applies', 'Applies to each new session and all open sessions. Jev splits it across providers.'));
+  const error = el('div', 'asst-budget-field-error'); error.id = `${id}-error`; error.setAttribute('role', 'alert');
+  const status = el('div', 'asst-modal-note'); status.setAttribute('role', 'status');
+  note.id = `${id}-note`; input.setAttribute('aria-describedby', `${note.id} ${error.id}`);
+  const retry = el('button', 'asst-btn asst-btn-secondary', tr('assistant.budget.retry', 'Try again')); retry.type = 'button';
+  retry.addEventListener('click', () => controller.state.dirty ? controller.flush() : controller.load());
+  input.addEventListener('input', () => controller.edit({ amountUsd: input.value }));
+  input.addEventListener('blur', () => controller.flush());
+  input.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); controller.flush(); } });
+  toggle.addEventListener('change', () => controller.edit({ unlimited: toggle.checked }, { immediate: true }));
+  root.append(label, input, switchLabel, note, error, status, retry);
+  root.addEventListener('keydown', e => { if (e.key !== 'Escape' && e.key !== 'Tab') e.stopPropagation(); });
+  const unsubscribe = controller.subscribe(state => {
+    if (input.value !== String(state.draft.amountUsd)) input.value = state.draft.amountUsd;
+    input.min = String(state.data?.bounds?.minUsd ?? BUDGET_BOUNDS.minUsd); input.max = String(state.data?.bounds?.maxUsd ?? BUDGET_BOUNDS.maxUsd);
+    input.disabled = !state.data || state.draft.unlimited;
+    toggle.disabled = !state.data; toggle.checked = state.draft.unlimited;
+    input.setAttribute('aria-invalid', state.fieldError ? 'true' : 'false');
+    error.textContent = state.fieldError || state.error; error.hidden = !error.textContent;
+    status.textContent = state.loading ? tr('common.loading', 'Loading...') : state.saving ? tr('assistant.budget.saving', 'Saving…') : state.saved ? tr('assistant.budget.saved', 'Budget saved — applies now.') : '';
+    retry.hidden = !(state.error || state.fieldError);
+  });
+  return { el: root, focus: () => (!input.disabled ? input : !toggle.disabled ? toggle : !retry.hidden ? retry : root).focus({ preventScroll: true }), destroy: unsubscribe };
+}
 
-  function enforcementSection(data) {
-    const section = el('section', 'asst-routes-section');
-    section.appendChild(el('div', 'asst-routes-section-title', tr('assistant.budget.howEnforced', 'How caps are enforced')));
-    const names = { 'claude-code': 'Claude', codex: 'Codex', opencode: 'OpenCode', brain: tr('assistant.budget.brainRow', 'Brain') };
-    const list = el('ul', 'asst-budget-enforcement');
-    for (const [id, info] of Object.entries(data.enforcement || {})) {
-      const item = el('li');
-      item.appendChild(el('strong', null, `${names[id] || id}: `));
-      item.appendChild(document.createTextNode(`${info.perRun} ${info.session}`));
-      list.appendChild(item);
-    }
-    section.appendChild(list);
-    const pricing = data.pricing;
-    if (pricing) {
-      // One table prices the catalog and the usage ledger; models.dev only fills in Codex models it lacks.
-      const fromTable = pricing.source === 'table' && pricing.table;
-      section.appendChild(el('div', 'asst-modal-note', fromTable
-        ? tr('assistant.budget.pricingTable', "List prices: SynaBun's table, checked against the Anthropic and OpenAI pricing pages on {date}. A Codex model it does not list is priced from models.dev.", { date: pricing.table.verified || '' })
-        : pricing.available
-          ? tr('assistant.budget.pricingOk', 'Codex list prices: models.dev (OpenCode cache).')
-          : tr('assistant.budget.pricingMissing', 'Codex list prices unavailable (no OpenCode models.dev cache): Codex runs are flagged unpriced.')));
-      const drift = Array.isArray(pricing.drift) ? [...new Set(pricing.drift.map((row) => row.model))] : [];
-      if (drift.length) section.appendChild(el('div', 'asst-modal-note', tr('assistant.budget.pricingDrift', 'models.dev lists another price for {models}: the table may be out of date.', { models: drift.join(', ') })));
-    }
-    if (Array.isArray(data.repairs) && data.repairs.length) {
-      section.appendChild(el('div', 'asst-modal-note asst-budget-unpriced', tr('assistant.budget.repaired', 'The saved file broke a rule ({fields}); the values in effect were corrected. Save to store them.', { fields: data.repairs.join(', ') })));
-    }
-    return section;
-  }
+export function mountBudgetChip(slot, controller, { t, mascot } = {}) {
+  const tr = tf(t), btn = el('button', 'asst-dd asst-empty-control-btn asst-empty-budget-btn');
+  btn.type = 'button'; btn.setAttribute('aria-haspopup', 'dialog'); btn.setAttribute('aria-expanded', 'false');
+  const icon = el('span', 'asst-icon'); icon.setAttribute('aria-hidden', 'true');
+  icon.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M16 10h5v5h-5zM7 9h4"/></svg>';
+  const value = el('span', 'asst-dd-label'), caret = el('span', 'asst-dd-caret'); caret.setAttribute('aria-hidden', 'true');
+  caret.innerHTML = '<svg viewBox="0 0 12 12"><path d="m3 4.5 3 3 3-3"/></svg>';
+  btn.append(icon, el('span', 'asst-empty-project-key', tr('assistant.budget.title', 'Budget')), value, caret);
+  const actor = createMascotControl(btn, { director: mascot, pose: 'budget', options: () => ({ unlimited: !!controller.state.data?.budget.unlimited }) });
+  const offCommit = controller.onCommit(event => actor.commit(!event.ok ? 'wince' : Object.hasOwn(event.patch, 'unlimited') ? event.patch.unlimited ? 'pulse' : 'pop' : 'nod'));
+  let unlimited;
+  const off = controller.subscribe(state => {
+    value.textContent = budgetSettingText(state.data?.budget, { t });
+    btn.setAttribute('aria-label', `${tr('assistant.budget.title', 'Budget')}: ${value.textContent}`);
+    if (unlimited !== state.data?.budget.unlimited) { unlimited = state.data?.budget.unlimited; actor.refresh(); }
+  });
+  btn.addEventListener('click', () => {
+    if (isMenuOpen(btn)) { closeMenu({ restoreFocus: true }); return; }
+    const controls = createBudgetControls(controller, { t });
+    openMenu(btn, { title: tr('assistant.budget.title', 'Budget'), role: 'dialog', content: controls.el, width: 320, repositionOnResize: true,
+      className: 'asst-budget-popover', placement: 'prefer-below', onOpen: node => actor.open(node), onClose: () => { actor.close(); controller.flush(); controls.destroy(); } });
+    controls.focus();
+    if (!controller.state.data) controller.load().then(() => { if (isMenuOpen(btn)) controls.focus(); });
+  });
+  slot.appendChild(btn);
+  return { el: btn, destroy() { if (isMenuOpen(btn)) closeMenu(); actor.destroy(); offCommit(); off(); btn.remove(); } };
+}
 
-  function render() {
-    body.innerHTML = '';
-    const { errors } = state.data ? validateBudgetDraft(state.draft, { bounds: state.data.bounds || BUDGET_BOUNDS, t: hooks.t }) : { errors: {} };
-    if (state.error && !state.serverField) {
-      const banner = el('div', 'asst-routes-error');
-      banner.setAttribute('role', 'alert');
-      banner.appendChild(el('span', null, state.error));
-      if (state.conflict) {
-        const reload = el('button', 'asst-btn asst-btn-secondary', tr('assistant.budget.reload', 'Reload'));
-        reload.type = 'button';
-        reload.addEventListener('click', () => load());
-        banner.appendChild(reload);
-      }
-      body.appendChild(banner);
-    }
-    if (!state.data) { saveBtn.disabled = true; return; }
-    if (state.data.session) body.appendChild(sessionSection(state.data.session));
-    const caps = el('section', 'asst-routes-section');
-    caps.appendChild(el('div', 'asst-routes-section-title', tr('assistant.budget.caps', 'Caps (US dollars)')));
-    const list = el('div', 'asst-routes-list');
-    for (const field of BUDGET_FIELDS) list.appendChild(capRow(field, errors));
-    caps.appendChild(list);
-    caps.appendChild(el('div', 'asst-modal-note', tr('assistant.budget.applies', 'Saved caps apply at once to open sessions and their runs: the next dispatch, follow-up, turn end and metered step. A Claude run keeps the CLI cap it started with, and the dispatcher also stops it at the new cap after its turn.')));
-    body.appendChild(caps);
-    body.appendChild(enforcementSection(state.data));
-    saveBtn.disabled = state.saving || Object.keys(errors).length > 0;
+export function renderBudgetSession(view, { t } = {}) {
+  const tr = tf(t), section = el('section', 'asst-budget-session');
+  section.append(el('h3', 'asst-routes-section-title', tr('assistant.budget.thisSession', 'This session')), el('div', 'asst-budget-total', budgetSpendText(view, { t })));
+  section.dataset.tone = budgetTone(view);
+  if (!view.unlimited) {
+    const meter = el('meter', 'asst-budget-meter'); meter.min = 0; meter.max = view.amountUsd; meter.value = view.spentUsd;
+    meter.setAttribute('aria-label', tr('assistant.budget.meterLabel', 'Session spend against the budget')); section.append(meter);
   }
-
-  async function load() {
-    state.error = '';
-    state.conflict = false;
-    state.serverField = null;
-    try {
-      const data = await getBudget(hooks.sessionId || null);
-      state.data = data || null;
-      state.draft = Object.fromEntries(BUDGET_FIELDS.map((field) => [field.id, String(data?.budget?.[field.id] ?? '')]));
-    } catch (err) {
-      state.data = null;
-      state.error = err?.status === 404
-        ? tr('assistant.budget.unavailable', 'Budget settings are not available on this server yet (restart SynaBun to load them).')
-        : `${tr('assistant.budget.loadFailed', 'Could not load the budget')}: ${err?.message || err}`;
+  const providers = el('div', 'asst-budget-providers');
+  for (const row of view.providers || []) {
+    const item = el('div', 'asst-budget-provider'); item.dataset.provider = row.provider;
+    item.dataset.eligible = String(row.eligible); item.dataset.dry = String((view.dry || []).includes(row.provider));
+    const heading = el('div', 'asst-budget-provider-name', row.label || row.provider);
+    if (row.isBrain) heading.append(el('span', 'asst-budget-brain', tr('assistant.budget.brainRow', 'Brain')));
+    item.append(heading);
+    item.append(el('div', 'asst-budget-provider-money', view.unlimited
+      ? tr('assistant.budget.providerSpend', '{spent} spent', { spent: money(row.spentUsd) })
+      : tr('assistant.budget.providerAmounts', 'Share {share} · spent {spent} · left for tasks {left}', { share: row.shareUsd == null ? '—' : money(row.shareUsd), spent: money(row.spentUsd), left: row.workerLeftUsd == null ? '—' : money(row.workerLeftUsd) })));
+    if (!view.unlimited && row.isBrain && view.split) item.append(el('div', 'asst-modal-note', tr('assistant.budget.reserve', '{reserve} reserved for the brain within this share.', { reserve: money(view.split.brainReserveLeftUsd) })));
+    if (!view.unlimited && (view.dry || []).includes(row.provider)) item.append(el('div', 'asst-budget-dry', tr('assistant.budget.dry', 'Share used up')));
+    if (!row.eligible && row.reason) {
+      const reason = String(row.reason).replace(/^brain:/, '');
+      item.append(el('div', 'asst-modal-note', tr(`assistant.budget.ineligible.${reason}`, { no_models: 'No available models', signed_out: 'Signed out', limited: 'Provider usage limit reached' }[reason] || reason)));
     }
-    render();
-    modal.querySelector('.asst-budget-input')?.focus({ preventScroll: true });
+    providers.append(item);
+  }
+  section.append(providers);
+  if (!view.unlimited) {
+    if (view.split) {
+      const split = view.split;
+      const source = split.source === 'jev' ? 'Jev' : tr('assistant.budget.fixedRule', 'Fixed rule');
+      const why = split.fallbackWhy ? tr(`assistant.budget.fallback.${split.fallbackWhy}`, { jev_off: 'Jev is off', jev_unavailable: 'Jev is unavailable', jev_incomplete: 'Jev returned an incomplete split', nothing_left: 'No budget left' }[split.fallbackWhy] || split.fallbackWhy) : '';
+      const time = el('time'); time.dateTime = split.updatedAt || '';
+      time.textContent = split.updatedAt && Number.isFinite(Date.parse(split.updatedAt)) ? new Date(split.updatedAt).toLocaleString() : '';
+      const meta = el('div', 'asst-modal-note', [source, why].filter(Boolean).join(' · ') + ' · '); meta.append(time); section.append(meta);
+    } else section.append(el('div', 'asst-modal-note', tr('assistant.budget.awaitingSplit', 'The split is prepared when work starts.')));
   }
+  if (view.unpricedRuns > 0) section.append(el('div', 'asst-budget-unpriced', tr('assistant.budget.chipUnpriced', '{n} run(s) with unpriced usage', { n: view.unpricedRuns })));
+  return section;
+}
 
-  async function save() {
-    if (!state.data || state.saving) return;
-    const { values, errors } = validateBudgetDraft(state.draft, { bounds: state.data.bounds || BUDGET_BOUNDS, t: hooks.t });
-    if (Object.keys(errors).length) { render(); return; }
-    state.saving = true;
-    saveBtn.disabled = true;
-    try {
-      const res = await putBudget(values, state.data.version, hooks.sessionId || null);
-      state.saving = false;
-      state.data = res;
-      try { hooks.onSaved?.(res); } catch { /* ignore */ }
-      hooks.onToast?.(tr('assistant.budget.saved', 'Budget saved — applies now.'));
-      close();
-    } catch (err) {
-      state.saving = false;
-      if (err?.status === 409 || err?.code === 'VERSION_CONFLICT') {
-        state.error = tr('assistant.budget.conflict', 'Changed elsewhere — reload to see the saved caps.');
-        state.conflict = true;
-      } else if (err?.code === 'BUDGET_INVALID' && err?.field && BUDGET_FIELDS.some((f) => f.id === err.field)) {
-        state.error = err.message;
-        state.serverField = err.field;
-      } else {
-        state.error = `${tr('assistant.budget.saveFailed', 'Could not save the budget')}: ${err?.message || err}`;
-      }
-      render();
+let editor;
+export async function openBudgetEditor(hooks = {}) {
+  editor?.close();
+  const controller = hooks.controller || createBudgetController(hooks), tr = tf(hooks.t);
+  const returnTo = document.activeElement, overlay = el('div', 'asst-modal-overlay asst-budget-overlay');
+  overlay.setAttribute('role', 'dialog'); overlay.setAttribute('aria-modal', 'true'); overlay.setAttribute('aria-label', tr('assistant.budget.title', 'Budget'));
+  const modal = el('div', 'asst-modal asst-budget-modal'), head = el('div', 'asst-modal-head');
+  const closeBtn = el('button', 'asst-iconbtn asst-modal-close', '✕'); closeBtn.type = 'button'; closeBtn.setAttribute('aria-label', tr('common.close', 'Close'));
+  head.append(el('span', '', tr('assistant.budget.title', 'Budget')), closeBtn);
+  const body = el('div', 'asst-modal-body'), controls = createBudgetControls(controller, hooks), live = el('div');
+  body.append(controls.el, live); modal.append(head, body); overlay.append(modal); document.body.append(overlay);
+  const off = controller.subscribe(state => { live.replaceChildren(...(state.data?.session ? [renderBudgetSession(state.data.session, hooks)] : [])); });
+  function close() {
+    if (!overlay.isConnected) return;
+    controller.flush(); off(); controls.destroy(); if (!hooks.controller) controller.destroy();
+    window.removeEventListener('keydown', onKey, true); overlay.remove(); editor = null;
+    if (returnTo?.isConnected) returnTo.focus({ preventScroll: true });
+  }
+  function onKey(e) {
+    if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); close(); return; }
+    if (e.key === 'Tab') {
+      const nodes = [...modal.querySelectorAll('button, input')].filter(node => !node.disabled && !node.hidden);
+      const index = nodes.indexOf(document.activeElement);
+      if (e.shiftKey && index <= 0) { e.preventDefault(); nodes.at(-1)?.focus(); }
+      else if (!e.shiftKey && (index < 0 || index === nodes.length - 1)) { e.preventDefault(); nodes[0]?.focus(); }
     }
   }
-  saveBtn.addEventListener('click', () => save());
-
-  await load();
-  return { el: overlay, close };
+  closeBtn.addEventListener('click', close); overlay.addEventListener('mousedown', e => { if (e.target === overlay) close(); });
+  window.addEventListener('keydown', onKey, true);
+  overlay.addEventListener('keydown', e => e.stopPropagation());
+  const handle = { el: overlay, close, controller }; editor = handle;
+  closeBtn.focus({ preventScroll: true });
+  await controller.load(); if (overlay.isConnected) controls.focus();
+  return handle;
 }
+
+export function closeBudgetEditor(controller) { if (editor?.controller === controller) editor.close(); }