@genesislcap/ai-assistant 15.7.3-alpha-e7d4aa5.0 → 15.8.0

package/dist/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["../src/chat-driver-node.ts","../src/index.ts","../src/channel/ai-activity-bus.ts","../src/channel/ai-activity-channel.ts","../src/components/flowing-waves-indicator.ts","../src/components/halo-overlay.ts","../src/components/plasma-orb-indicator.ts","../src/components/waves-indicator.ts","../src/components/activity-halo/activity-halo.ts","../src/components/agent-picker/agent-picker.constants.ts","../src/components/agent-picker/agent-picker.styles.ts","../src/components/agent-picker/agent-picker.template.ts","../src/components/agent-picker/agent-picker.ts","../src/components/agent-picker/index.ts","../src/components/ai-driver/ai-driver.ts","../src/components/ai-driver/index.ts","../src/components/chat-bubble/chat-bubble.styles.ts","../src/components/chat-bubble/chat-bubble.template.ts","../src/components/chat-bubble/chat-bubble.ts","../src/components/chat-bubble/index.ts","../src/components/chat-driver/align-event-globals.ts","../src/components/chat-driver/chat-driver.compact.test.ts","../src/components/chat-driver/chat-driver.test.ts","../src/components/chat-driver/chat-driver.ts","../src/components/chat-driver/index.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.styles.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.template.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.test.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.ts","../src/components/chat-interaction-wrapper/index.ts","../src/components/chat-markdown/chat-markdown.ts","../src/components/chat-markdown/index.ts","../src/components/orchestrating-driver/index.ts","../src/components/orchestrating-driver/orchestrating-driver.budget.test.ts","../src/components/orchestrating-driver/orchestrating-driver.pin.test.ts","../src/components/orchestrating-driver/orchestrating-driver.ts","../src/components/popout-manager/index.ts","../src/components/popout-manager/popout-manager.ts","../src/components/settings-modal/index.ts","../src/components/settings-modal/settings-modal.styles.ts","../src/components/settings-modal/settings-modal.template.ts","../src/config/config.ts","../src/config/define-stateful-agent.test.ts","../src/config/define-stateful-agent.ts","../src/config/fallback-agents.ts","../src/config/index.ts","../src/config/validate-providers.test.ts","../src/config/validate-providers.ts","../src/main/blocked-state.test.ts","../src/main/cost-session-banking.test.ts","../src/main/index.ts","../src/main/main.styles.test.ts","../src/main/main.styles.ts","../src/main/main.template.ts","../src/main/main.ts","../src/main/main.types.ts","../src/main/popout-interaction-gate.test.ts","../src/provider/ai-provider-switcher.ts","../src/provider/assistant-app-settings.ts","../src/state/ai-assistant-slice.test.ts","../src/state/ai-assistant-slice.ts","../src/state/debug-event-log.test.ts","../src/state/debug-event-log.ts","../src/state/driver-registry.test.ts","../src/state/driver-registry.ts","../src/state/interaction-context.test.ts","../src/state/interaction-context.ts","../src/state/session-store.ts","../src/state/persistence/build-timeline-entries.ts","../src/state/persistence/diagnostics-cursors.test.ts","../src/state/persistence/diagnostics-cursors.ts","../src/state/persistence/diagnostics.test.ts","../src/state/persistence/diagnostics.ts","../src/state/persistence/index.ts","../src/state/persistence/persister-registry.ts","../src/state/persistence/session-persistence-provider.test.ts","../src/state/persistence/session-persistence-provider.ts","../src/state/persistence/session-persistence.integration.test.ts","../src/state/persistence/session-persister.test.ts","../src/state/persistence/session-persister.ts","../src/state/persistence/session-snapshot.test.ts","../src/state/persistence/session-snapshot.ts","../src/state/persistence/stateful-restore.e2e.test.ts","../src/styles/ai-colours.ts","../src/styles/settings-section.ts","../src/suggestions/chat-suggestions.ts","../src/tags/index.ts","../src/types/ai-chat-widget.ts","../src/types/interaction-context.ts","../src/utils/animated-panel-toggle.ts","../src/utils/animation-exclusivity.test.ts","../src/utils/animation-exclusivity.ts","../src/utils/banked-usage-baselines.ts","../src/utils/collect-session-models.test.ts","../src/utils/collect-session-models.ts","../src/utils/condense-history.test.ts","../src/utils/condense-history.ts","../src/utils/cost-session-history.test.ts","../src/utils/cost-session-history.ts","../src/utils/derive-cost-session-title.test.ts","../src/utils/derive-cost-session-title.ts","../src/utils/flatten-sub-agent-messages.test.ts","../src/utils/flatten-sub-agent-messages.ts","../src/utils/history-transform.test.ts","../src/utils/history-transform.ts","../src/utils/index.ts","../src/utils/logger.ts","../src/utils/message-partition.test.ts","../src/utils/message-partition.ts","../src/utils/resolve-cost-history-config.test.ts","../src/utils/resolve-cost-history-config.ts","../src/utils/resolve-preference-baseline.test.ts","../src/utils/resolve-preference-baseline.ts","../src/utils/strip-agent-handlers.test.ts","../src/utils/strip-agent-handlers.ts","../src/utils/sum-costs.test.ts","../src/utils/sum-costs.ts","../src/utils/sum-tokens.test.ts","../src/utils/sum-tokens.ts","../src/utils/sum-usage.test.ts","../src/utils/sum-usage.ts","../src/utils/tool-fold.ts","../src/utils/with-timeout.ts"],"version":"5.9.2"}
+{"root":["../src/chat-driver-node.ts","../src/index.ts","../src/channel/ai-activity-bus.ts","../src/channel/ai-activity-channel.ts","../src/components/flowing-waves-indicator.ts","../src/components/halo-overlay.ts","../src/components/plasma-orb-indicator.ts","../src/components/waves-indicator.ts","../src/components/activity-halo/activity-halo.ts","../src/components/agent-picker/agent-picker.constants.ts","../src/components/agent-picker/agent-picker.styles.ts","../src/components/agent-picker/agent-picker.template.ts","../src/components/agent-picker/agent-picker.ts","../src/components/agent-picker/index.ts","../src/components/ai-driver/ai-driver.ts","../src/components/ai-driver/index.ts","../src/components/chat-bubble/chat-bubble.styles.ts","../src/components/chat-bubble/chat-bubble.template.ts","../src/components/chat-bubble/chat-bubble.ts","../src/components/chat-bubble/index.ts","../src/components/chat-driver/align-event-globals.ts","../src/components/chat-driver/chat-driver.compact.test.ts","../src/components/chat-driver/chat-driver.test.ts","../src/components/chat-driver/chat-driver.ts","../src/components/chat-driver/index.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.styles.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.template.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.test.ts","../src/components/chat-interaction-wrapper/chat-interaction-wrapper.ts","../src/components/chat-interaction-wrapper/index.ts","../src/components/chat-markdown/chat-markdown.ts","../src/components/chat-markdown/index.ts","../src/components/orchestrating-driver/index.ts","../src/components/orchestrating-driver/orchestrating-driver.budget.test.ts","../src/components/orchestrating-driver/orchestrating-driver.pin.test.ts","../src/components/orchestrating-driver/orchestrating-driver.ts","../src/components/popout-manager/index.ts","../src/components/popout-manager/popout-manager.ts","../src/components/settings-modal/index.ts","../src/components/settings-modal/settings-modal.styles.test.ts","../src/components/settings-modal/settings-modal.styles.ts","../src/components/settings-modal/settings-modal.template.test.ts","../src/components/settings-modal/settings-modal.template.ts","../src/config/config.ts","../src/config/define-stateful-agent.test.ts","../src/config/define-stateful-agent.ts","../src/config/fallback-agents.ts","../src/config/index.ts","../src/config/validate-providers.test.ts","../src/config/validate-providers.ts","../src/main/blocked-state.test.ts","../src/main/budget-meter.test.ts","../src/main/cost-session-banking.test.ts","../src/main/index.ts","../src/main/main.styles.test.ts","../src/main/main.styles.ts","../src/main/main.template.ts","../src/main/main.ts","../src/main/main.types.ts","../src/main/popout-interaction-gate.test.ts","../src/provider/ai-provider-switcher.ts","../src/provider/assistant-app-settings.ts","../src/state/ai-assistant-slice.test.ts","../src/state/ai-assistant-slice.ts","../src/state/debug-event-log.test.ts","../src/state/debug-event-log.ts","../src/state/driver-registry.test.ts","../src/state/driver-registry.ts","../src/state/interaction-context.test.ts","../src/state/interaction-context.ts","../src/state/session-store.ts","../src/state/persistence/build-timeline-entries.ts","../src/state/persistence/diagnostics-cursors.test.ts","../src/state/persistence/diagnostics-cursors.ts","../src/state/persistence/diagnostics.test.ts","../src/state/persistence/diagnostics.ts","../src/state/persistence/index.ts","../src/state/persistence/persister-registry.ts","../src/state/persistence/session-persistence-provider.test.ts","../src/state/persistence/session-persistence-provider.ts","../src/state/persistence/session-persistence.integration.test.ts","../src/state/persistence/session-persister.test.ts","../src/state/persistence/session-persister.ts","../src/state/persistence/session-snapshot.test.ts","../src/state/persistence/session-snapshot.ts","../src/state/persistence/stateful-restore.e2e.test.ts","../src/styles/ai-colours.ts","../src/styles/settings-section.ts","../src/suggestions/chat-suggestions.ts","../src/tags/index.ts","../src/types/ai-chat-widget.ts","../src/types/interaction-context.ts","../src/utils/animated-panel-toggle.ts","../src/utils/animation-exclusivity.test.ts","../src/utils/animation-exclusivity.ts","../src/utils/banked-usage-baselines.ts","../src/utils/collect-session-models.test.ts","../src/utils/collect-session-models.ts","../src/utils/condense-history.test.ts","../src/utils/condense-history.ts","../src/utils/cost-session-history.test.ts","../src/utils/cost-session-history.ts","../src/utils/derive-cost-session-title.test.ts","../src/utils/derive-cost-session-title.ts","../src/utils/flatten-sub-agent-messages.test.ts","../src/utils/flatten-sub-agent-messages.ts","../src/utils/format-usd.ts","../src/utils/history-transform.test.ts","../src/utils/history-transform.ts","../src/utils/index.ts","../src/utils/logger.ts","../src/utils/message-partition.test.ts","../src/utils/message-partition.ts","../src/utils/resolve-cost-history-config.test.ts","../src/utils/resolve-cost-history-config.ts","../src/utils/resolve-preference-baseline.test.ts","../src/utils/resolve-preference-baseline.ts","../src/utils/strip-agent-handlers.test.ts","../src/utils/strip-agent-handlers.ts","../src/utils/sum-costs.test.ts","../src/utils/sum-costs.ts","../src/utils/sum-tokens.test.ts","../src/utils/sum-tokens.ts","../src/utils/sum-usage.test.ts","../src/utils/sum-usage.ts","../src/utils/tool-fold.ts","../src/utils/with-timeout.ts"],"version":"5.9.2"}

package/docs/migration-GENC-1464.md

@@ -512,6 +512,69 @@ you `switch` exhaustively over either with a `never` guard, TypeScript will now
 member — that is the intended prompt to decide how your app should treat it, not a breaking
 change to runtime behaviour.
 
+### Feeding the budget meter
+
+Orthogonal to Options A–C (combine it with any of them): the settings modal can show a
+**per-vendor budget meter** — one row per vendor with `$spent / $limit (P%)` text and a
+progress bar — but only if the host feeds it. The element meters nothing itself; the
+meter renders exactly the vendors that currently have figures, fed through the public
+`setVendorBudget(vendor, figures)` API from the same budget endpoint the pre-flight
+(Option B) already consumes:
+
+```ts
+async function feedBudgetMeter(assistantEl: FoundationAiAssistant) {
+  // `vendors` is an OBJECT keyed by vendor id, not an array.
+  const { vendors } = await (await fetch('/api/budget')).json();
+  for (const v of Object.values(vendors)) {
+    // An UNLIMITED vendor (`unlimited: true` / `limitUsd: null`) gets no row —
+    // simply do not feed it. There is no "unlimited" figure shape: a bar with
+    // no cap has nothing truthful to fill to.
+    if (v.unlimited || v.limitUsd == null) {
+      assistantEl.setVendorBudget(v.vendor, null);
+      continue;
+    }
+    assistantEl.setVendorBudget(v.vendor, { budgetUsd: v.limitUsd, spentUsd: v.spentUsd });
+  }
+}
+
+// on mount (alongside the Option B pre-flight, if you run one)…
+await feedBudgetMeter(assistantEl);
+// …and re-run it after every completed turn, so the meter tracks the spend
+// that turn just caused.
+```
+
+What to expect from that loop:
+
+- **Re-feed after each turn, unconditionally.** The call is idempotent — identical
+  figures are a stored no-op — so there is no cheaper "only if changed" protocol worth
+  building. `setVendorBudget(vendor, null)` clears a vendor's row.
+- **The figures lag by one turn, and that is expected.** The server meters a turn's
+  spend as it happens, but the host only re-fetches after the turn completes — so the
+  meter the user watches *during* a turn shows the total up to the previous one. The
+  meter is a gauge, not a live ticker; the authoritative gate is the server's (the 402
+  and the pre-flight), which reads the live account.
+- **Spend can exceed the limit.** The last allowed call may overshoot the cap, and the
+  row's text shows the real figures (`$62.34 / $50.00 (125%)`); only the bar clamps
+  at 100%.
+- **Validation is forgiving at run time.** An unbudgeted vendor (`chrome`, `openai`,
+  `'none'`, anything unknown) or non-finite/negative figures make the call return
+  `false` — with a single warning per element, not one per turn — and change nothing.
+  `undefined` figures behave exactly like `null` and clear the row, so an untyped
+  per-vendor lookup that misses is a clear, not a crash.
+- **`false` also means "too early".** A feed that lands before the element has its
+  session store — ahead of the first append, or during a pop-out remount — stores
+  nothing and returns `false`, without a warning (a lifecycle window is not bad
+  input). Nothing to handle: the per-turn re-feed above lands the figures as soon as
+  the element is ready.
+- **Lifetime follows the blocked latch, minus persistence.** The figures survive
+  pop-in/out and "Clear" / "New chat" (a new chat refills no budget), but are *not*
+  written to the session snapshot: the server is authoritative, and your mount-time
+  feed is what restores the meter after a reload — a persisted copy could only ever
+  show stale dollars.
+- **Config:** `chatConfig.ui.showBudgetUsage: false` hides the meter (default is on,
+  like `showContextUsage`). Styling hooks: `::part(budget-usage)` and
+  `::part(budget-progress)` — see `docs/styling.md`.
+
 ---
 
 ## Styling the banner

package/docs/styling.md

@@ -81,6 +81,29 @@ foundation-ai-assistant::part(message) {
 }
 ```
 
+### The settings-modal budget meter
+
+The per-vendor AI budget meter (GENC-1464) renders in the settings modal's
+"AI Model Settings" section — one row per vendor the host has fed via
+`setVendorBudget` — and follows the context-usage indicator's part convention:
+
+| Part | Element |
+| --- | --- |
+| `budget-usage` | The meter's container (all vendor rows) |
+| `budget-progress` | One vendor's budget bar (repeats per rendered row) |
+
+```css
+/* Tighten the meter's row spacing */
+foundation-ai-assistant::part(budget-usage) {
+  gap: 4px;
+}
+
+/* Restyle every vendor's bar at once */
+foundation-ai-assistant::part(budget-progress) {
+  height: 6px;
+}
+```
+
 ### The conversation column (`messages-content`)
 
 Messages sit in a column capped at `1000px` and centred inside the full-width

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/ai-assistant",
   "description": "Genesis AI Assistant micro-frontend",
-  "version": "15.7.3-alpha-e7d4aa5.0",
+  "version": "15.8.0",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/ai-assistant.d.ts",
@@ -73,26 +73,26 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/genx": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/rollup-builder": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/ts-builder": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/uvu-playwright-builder": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/vite-builder": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/webpack-builder": "15.7.3-alpha-e7d4aa5.0",
+    "@genesislcap/foundation-testing": "15.8.0",
+    "@genesislcap/genx": "15.8.0",
+    "@genesislcap/rollup-builder": "15.8.0",
+    "@genesislcap/ts-builder": "15.8.0",
+    "@genesislcap/uvu-playwright-builder": "15.8.0",
+    "@genesislcap/vite-builder": "15.8.0",
+    "@genesislcap/webpack-builder": "15.8.0",
     "@types/dompurify": "^3.0.5",
     "@types/marked": "^5.0.2",
     "esbuild": "0.25.12"
   },
   "dependencies": {
-    "@genesislcap/foundation-ai": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/foundation-logger": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/foundation-notifications": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/foundation-redux": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/foundation-ui": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/foundation-utils": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/rapid-design-system": "15.7.3-alpha-e7d4aa5.0",
-    "@genesislcap/web-core": "15.7.3-alpha-e7d4aa5.0",
+    "@genesislcap/foundation-ai": "15.8.0",
+    "@genesislcap/foundation-logger": "15.8.0",
+    "@genesislcap/foundation-notifications": "15.8.0",
+    "@genesislcap/foundation-redux": "15.8.0",
+    "@genesislcap/foundation-ui": "15.8.0",
+    "@genesislcap/foundation-utils": "15.8.0",
+    "@genesislcap/rapid-design-system": "15.8.0",
+    "@genesislcap/web-core": "15.8.0",
     "dompurify": "^3.3.1",
     "marked": "^17.0.3"
   },
@@ -105,5 +105,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "47329b0160faf49d52b2964ea22ed9362f275130"
+  "gitHead": "10412a7d63fbdf104e0c8f8704a03a7f3b7ad347"
 }

package/src/components/settings-modal/settings-modal.styles.test.ts

@@ -0,0 +1,94 @@
+import { assert, createLogicSuite } from '@genesislcap/foundation-testing';
+import { settingsModalStyles } from './settings-modal.styles';
+
+// GENC-1464 budget meter — the styling invariants a reviewer would otherwise
+// have to catch by eye, following main.styles.test.ts (see there for why CSS
+// gets asserted from the generated text at all, and for the scoping lesson:
+// these assertions are about the BUDGET rules only, not a global style policy).
+//
+//   1. Design-system tokens are consumed UNFALLBACKED — the #2411/#2436 review
+//      rule. Every token the meter reads ships a DS default, so a
+//      `var(--token, fallback)` is dead code at best and a silently-broken
+//      token name at worst.
+//   2. The meter's row anatomy is SHARED with the context indicator via grouped
+//      selectors, not copied. The two indicators are siblings by design;
+//      copied declarations would let them drift apart one edit at a time, which
+//      is exactly what the grouping was chosen to make impossible.
+
+const suite = createLogicSuite('settings-modal.styles budget-meter rules');
+
+/**
+ * The generated stylesheet text, flattened recursively — `css` composes nested
+ * `ElementStyles`, and a shallow read can return almost nothing, making every
+ * negative assertion below pass vacuously. The first test guards that.
+ */
+const flatten = (value: unknown): string => {
+  if (typeof value === 'string') return value;
+  if (Array.isArray(value)) return value.map(flatten).join('\n');
+  const nested = (value as { styles?: unknown } | null | undefined)?.styles;
+  return nested ? flatten(nested) : '';
+};
+
+/**
+ * Comments stripped before matching: the assertions below are about
+ * DECLARATIONS, and the sheet's own prose legitimately mentions the very
+ * pattern (`var(--x, y)`) the negative assertion hunts for.
+ */
+const cssText = flatten(settingsModalStyles).replace(/\/\*[\s\S]*?\*\//g, '');
+
+/** Every declaration block whose selector mentions `.settings-budget-`, joined. */
+const budgetRules = (cssText.match(/[^{}]*\.settings-budget-[^{}]*\{[^}]*\}/g) ?? []).join('\n');
+
+suite('the budget rules were extracted as text (guards the assertions below)', () => {
+  assert.ok(cssText.includes('.settings-budget-usage'), 'the meter container rule is in the sheet');
+  assert.ok(budgetRules.length > 0, 'the extraction found the budget rules');
+});
+
+suite('the meter consumes design-system tokens without dead fallbacks', () => {
+  // One structural probe rather than a per-token list: ANY `var(--x,` inside a
+  // budget rule is a fallback, and the meter reads only tokens that ship DS
+  // defaults (--design-unit, --neutral-foreground-*), so there is no legitimate
+  // fallback for this scope. Scoped to the budget rules on purpose — see
+  // main.styles.test.ts for why a whole-sheet grep is the wrong test.
+  assert.not.ok(/var\(--[a-z-]+\s*,/.test(budgetRules), 'no var(--token, fallback) in the meter');
+  assert.ok(budgetRules.includes('var(--design-unit)'), 'and it does consume tokens');
+});
+
+suite('every meter row sits on one shared rhythm', () => {
+  // The 4/2/2 fix. `.settings-modal-section-body` gaps at 4 units and the
+  // budget meter at 2, so an unwrapped context indicator sat 4 units above the
+  // FIRST vendor row while the vendor rows sat 2 apart — three visually
+  // identical meter rows, unevenly spaced. Both meters now live in
+  // `.settings-usage-meters`, which must carry the SAME gap as the meter it
+  // wraps: asserted as ONE grouped rule, so the two cannot drift to different
+  // rhythms. (settings-modal.template.test.ts pins the other half — that the
+  // wrapper is conditional, so a host with no meters pays no stray gap for it.)
+  const shared = /\.settings-usage-meters\s*,\s*\.settings-budget-usage\s*\{([^}]*)\}/.exec(
+    cssText,
+  );
+  assert.ok(shared, '.settings-usage-meters is grouped with .settings-budget-usage');
+  assert.ok(shared![1].includes('flex-direction: column'), 'the shared container is a column');
+  assert.ok(
+    shared![1].includes('gap: calc(var(--design-unit) * 2px)'),
+    'gapped at the meter rhythm (2 units), not the section body 4',
+  );
+});
+
+suite("the meter shares the context indicator's row anatomy by grouped selector", () => {
+  // The invariant is the SHARING, not the shape: each budget class must sit in
+  // the same selector list as its context sibling, so restyling one restyles
+  // both and the two indicators cannot drift apart.
+  const sharedPairs: Array<[string, string]> = [
+    ['.settings-context-header', '.settings-budget-header'],
+    ['.settings-context-label', '.settings-budget-label'],
+    ['.settings-context-tokens', '.settings-budget-figures'],
+  ];
+  for (const [contextClass, budgetClass] of sharedPairs) {
+    const grouped = new RegExp(
+      `${contextClass.replace(/\./g, '\\.')}\\s*,\\s*${budgetClass.replace(/\./g, '\\.')}\\s*\\{`,
+    );
+    assert.ok(grouped.test(cssText), `${budgetClass} is grouped with ${contextClass}`);
+  }
+});
+
+suite.run();

package/src/components/settings-modal/settings-modal.styles.ts

@@ -275,7 +275,17 @@ export const settingsModalStyles = css`
     font-style: italic;
   }
 
-  .settings-context-header {
+  /*
+   * The budget meter (GENC-1464) is the context indicator's money sibling and
+   * shares its row anatomy 1:1, so the budget classes JOIN these rules rather
+   * than restating them — one place to restyle the header/label/figures shape,
+   * and the two indicators cannot drift apart. Design-system tokens only, and
+   * unfallbacked: every token here ships a DS default, so a var(--x, y)
+   * fallback would be dead code that hides a broken token name (#2411/#2436
+   * review rule, pinned by settings-modal.styles.test.ts).
+   */
+  .settings-context-header,
+  .settings-budget-header {
     display: flex;
     justify-content: space-between;
     gap: calc(var(--design-unit) * 2px);
@@ -283,7 +293,8 @@ export const settingsModalStyles = css`
     font-size: 12px;
   }
 
-  .settings-context-label {
+  .settings-context-label,
+  .settings-budget-label {
     color: var(--neutral-foreground-hint);
     font-size: 11px;
     font-weight: 600;
@@ -291,10 +302,29 @@ export const settingsModalStyles = css`
     letter-spacing: 0.06em;
   }
 
-  .settings-context-tokens {
+  .settings-context-tokens,
+  .settings-budget-figures {
     color: var(--neutral-foreground-rest);
   }
 
+  /*
+   * ONE rhythm for every meter row. The outer wrapper holds the context
+   * indicator and the budget meter; the inner one holds the budget meter's
+   * vendor rows — and both gap by the same 2 units (half the section body's 4)
+   * so that visually identical meter rows are evenly spaced whatever mix of
+   * them is on screen. Without the wrapper the context row inherits the body's
+   * 4-unit gap while the vendor rows keep 2, and three identical-looking rows
+   * read as an uneven 4/2/2. The wrapper renders only when at least one meter
+   * does — see settingsUsageMetersTemplate for why an always-on one would cost
+   * a stray gap.
+   */
+  .settings-usage-meters,
+  .settings-budget-usage {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
   .settings-current-build,
   .settings-lifetime-usage {
     background: var(--neutral-layer-2);

package/src/components/settings-modal/settings-modal.template.test.ts

@@ -0,0 +1,124 @@
+import { assert, createLogicSuite } from '@genesislcap/foundation-testing';
+import { FoundationAiAssistant } from '../../main/main';
+import { getSessionStore, clearAllSessionStores } from '../../state/session-store';
+import { settingsUsageMetersTemplate } from './settings-modal.template';
+
+// Hold a reference so the custom-element registration isn't tree-shaken.
+FoundationAiAssistant;
+
+// GENC-1464 — the shared meter column in the settings modal's "AI Model
+// Settings" section.
+//
+// The section body is a 4-unit flex column and the budget meter is a 2-unit
+// one, so an unwrapped context indicator sat 4 units above the first vendor row
+// while the vendor rows sat 2 apart — three visually identical meter rows
+// reading as an uneven 4/2/2. Both meters now share ONE 2-unit column
+// (`.settings-usage-meters`, grouped with `.settings-budget-usage` in the
+// styles — see settings-modal.styles.test.ts for the gap itself).
+//
+// The wrapper must also be ABSENT when neither meter shows: a permanent wrapper
+// is a permanent flex child of the section body, so a host with no meters would
+// pay a stray 4-unit gap after its model slot for a div that renders nothing.
+// That is a structural claim about the template, so this suite renders the
+// template rather than reading a getter — the getter cannot show whether the
+// `when` was wired to it.
+//
+// The element is created but never CONNECTED (`document.createElement` upgrades
+// only), for the reason budget-meter.test.ts gives: connecting subscribes to
+// `agenticActivityBus` and leaves the runner's event loop open.
+
+const Suite = createLogicSuite('settings-modal usage meters structure');
+
+const template = settingsUsageMetersTemplate('test-progress');
+
+let storeSeq = 0;
+
+/** A fresh (unconnected) element wired to its own real session store. */
+function element(): FoundationAiAssistant {
+  const el = document.createElement('foundation-ai-assistant') as FoundationAiAssistant;
+  storeSeq += 1;
+  (el as unknown as { _sessionRef: unknown })._sessionRef = getSessionStore(
+    `usage-meters-test-${storeSeq}`,
+    false,
+  );
+  return el;
+}
+
+/** Renders the meters for `el` into a detached host and returns it. */
+function render(el: FoundationAiAssistant): HTMLElement {
+  const host = document.createElement('div');
+  template.render(el, host);
+  return host;
+}
+
+Suite.after(() => {
+  clearAllSessionStores();
+});
+
+Suite('both meters render inside one shared column', () => {
+  const el = element();
+  el.contextTokens = 1000;
+  el.contextLimit = 4000;
+  el.setVendorBudget('anthropic', { budgetUsd: 50, spentUsd: 45 });
+
+  const host = render(el);
+  const wrapper = host.querySelector('.settings-usage-meters');
+
+  assert.ok(wrapper, 'the shared column is rendered');
+  assert.ok(
+    wrapper!.querySelector('.settings-context-usage'),
+    'the context indicator is inside it',
+  );
+  assert.ok(wrapper!.querySelector('.settings-budget-usage'), 'so is the budget meter');
+  // The rhythm the wrapper exists for: every meter row is a child of a 2-unit
+  // column, none of them of the section body's 4-unit one.
+  assert.is(
+    host.querySelectorAll('.settings-usage-meters').length,
+    1,
+    'one column, not one per meter',
+  );
+});
+
+Suite('neither meter visible → no wrapper at all, not an empty one', () => {
+  // The stray-gap case. Nothing fed, no context figures: the section body must
+  // see no flex child from the meters.
+  const el = element();
+
+  const host = render(el);
+
+  assert.is(el.settingsContextUsageVisible, false, 'precondition: no context data');
+  assert.is(el.settingsBudgetUsageVisible, false, 'precondition: no budget data');
+  assert.is(host.querySelector('.settings-usage-meters'), null, 'no wrapper element');
+  assert.is(
+    host.querySelectorAll('*').length,
+    0,
+    'and no element of any kind — comment markers only',
+  );
+});
+
+Suite('one meter alone still gets the shared column, with only its own child', () => {
+  // Both single-meter cases: the wrapper appears for either meter on its own,
+  // and the hidden sibling contributes NO element inside it (both gate with
+  // `when`, which emplaces comment markers, not empty divs — an empty div would
+  // be a second stray gap, inside the column this time).
+  const contextOnly = element();
+  contextOnly.contextTokens = 1000;
+  contextOnly.contextLimit = 4000;
+
+  const contextHost = render(contextOnly);
+  const contextWrapper = contextHost.querySelector('.settings-usage-meters');
+  assert.ok(contextWrapper, 'context alone still gets the column');
+  assert.is(contextWrapper!.children.length, 1, 'the hidden budget meter adds no flex child');
+  assert.ok(contextWrapper!.querySelector('.settings-context-usage'));
+
+  const budgetOnly = element();
+  budgetOnly.setVendorBudget('gemini', { budgetUsd: 50, spentUsd: 15 });
+
+  const budgetHost = render(budgetOnly);
+  const budgetWrapper = budgetHost.querySelector('.settings-usage-meters');
+  assert.ok(budgetWrapper, 'budget alone still gets the column');
+  assert.is(budgetWrapper!.children.length, 1, 'the hidden context indicator adds no flex child');
+  assert.ok(budgetWrapper!.querySelector('.settings-budget-usage'));
+});
+
+Suite.run();

package/src/components/settings-modal/settings-modal.template.ts

@@ -1,17 +1,20 @@
 import type { AggregateUsage } from '@genesislcap/foundation-ai';
 import { html, ref, repeat, slotted, when, type ViewTemplate } from '@genesislcap/web-core';
 import type { FoundationAiAssistant } from '../../main/main';
-import { ANIMATION_DEFS, type AiAssistantAnimation } from '../../main/main.types';
+import {
+  ANIMATION_DEFS,
+  type AiAssistantAnimation,
+  type SettingsBudgetRow,
+} from '../../main/main.types';
 import type { AssistantAppSettingsToggle } from '../../provider/assistant-app-settings';
 import {
   formatCostSessionDate,
   type CostSessionModelEntry,
   type CostSessionRecord,
 } from '../../utils/cost-session-history';
+import { formatUsd, formatUsdAmount } from '../../utils/format-usd';
 import { formatCompactTokenCountSafe } from '../../utils/sum-tokens';
 
-const SESSION_COST_DECIMALS = 2;
-
 type AnimationCategoryGroup = {
   category: string;
   items: Array<{ value: AiAssistantAnimation; label: string; description: string }>;
@@ -182,10 +185,10 @@ const platformContextUsageTemplate = (
   progressTag: string,
 ): ViewTemplate<FoundationAiAssistant> => html<FoundationAiAssistant>`
   ${when(
-    (x) =>
-      x.chatConfig.ui?.showContextUsage !== false &&
-      x.contextTokens != null &&
-      x.contextLimit != null,
+    // The getter, not a copy of its expression: `settingsUsageMetersTemplate`
+    // gates its shared wrapper on this same getter, and the two must agree —
+    // a drifted copy would leave the wrapper rendering around nothing.
+    (x) => x.settingsContextUsageVisible,
     html<FoundationAiAssistant>`
       <div class="settings-context-usage" part="context-usage">
         <div class="settings-context-header">
@@ -205,6 +208,74 @@ const platformContextUsageTemplate = (
   )}
 `;
 
+/**
+ * Per-vendor AI budget meter (GENC-1464) — the money sibling of
+ * {@link platformContextUsageTemplate}, one row per vendor the host has fed
+ * figures for. The row text is unclamped (overshoot is real and shown); only
+ * the bar clamps — both computed in `settingsBudgetRows`, so the bindings here
+ * stay pure reads and the arithmetic is unit-testable.
+ */
+const platformBudgetUsageTemplate = (
+  progressTag: string,
+): ViewTemplate<FoundationAiAssistant> => html<FoundationAiAssistant>`
+  ${when(
+    (x) => x.settingsBudgetUsageVisible,
+    html<FoundationAiAssistant>`
+      <div class="settings-budget-usage" part="budget-usage">
+        ${repeat(
+          (x) => x.settingsBudgetRows,
+          html<SettingsBudgetRow, FoundationAiAssistant>`
+            <div class="settings-budget-vendor">
+              <div class="settings-budget-header">
+                <span class="settings-budget-label">${(row) => row.label} budget</span>
+                <span class="settings-budget-figures">${(row) => row.figures}</span>
+              </div>
+              <${progressTag}
+                part="budget-progress"
+                value="${(row) => row.barValue}"
+              ></${progressTag}>
+            </div>
+          `,
+        )}
+      </div>
+    `,
+  )}
+`;
+
+/**
+ * The two usage meters in one shared, evenly-gapped column.
+ *
+ * Without it the context row and the FIRST budget row sit the section body's
+ * 4 units apart while the budget rows sit 2 apart — three visually identical
+ * meter rows reading as an uneven 4/2/2. The wrapper puts every meter row on
+ * the same 2-unit rhythm; see `.settings-usage-meters` in the styles.
+ *
+ * CONDITIONAL on purpose. An always-present wrapper is a permanent flex child
+ * of `.settings-modal-section-body`, so a host with neither meter would get a
+ * stray 4-unit gap after its model slot from a div that renders nothing. The
+ * gate is exactly the disjunction of the two children's own gates — both of
+ * which are `when`, which emplaces only comment markers when false, so a
+ * hidden meter contributes no flex child inside the wrapper either.
+ *
+ * Exported for `settings-modal.template.test.ts`, which renders it in isolation
+ * to pin both of those properties; `index.ts` does not re-export it, so it is
+ * not package API.
+ *
+ * @internal
+ */
+export const settingsUsageMetersTemplate = (
+  progressTag: string,
+): ViewTemplate<FoundationAiAssistant> => html<FoundationAiAssistant>`
+  ${when(
+    (x) => x.settingsContextUsageVisible || x.settingsBudgetUsageVisible,
+    html<FoundationAiAssistant>`
+      <div class="settings-usage-meters">
+        ${platformContextUsageTemplate(progressTag)} ${platformBudgetUsageTemplate(progressTag)}
+      </div>
+    `,
+  )}
+`;
+
 const chatBotSettingsTemplate = (
   switchTag: string,
   buttonTag: string,
@@ -484,9 +555,7 @@ const lifetimeUsageTemplate =
               <div class="settings-build-stat-label">Total build cost</div>
               <div class="settings-build-stat-value">
                 <span class="prefix">$</span>
-                <span class="value">
-                  ${(x) => x.cumulativeCostUsd.toFixed(SESSION_COST_DECIMALS)}
-                </span>
+                <span class="value">${(x) => formatUsdAmount(x.cumulativeCostUsd)}</span>
               </div>
             </div>
             <div
@@ -536,7 +605,7 @@ const sessionCostSummaryTemplate =
               </div>
               <div class="settings-build-stat-value">
                 <span class="prefix">$</span>
-                <span class="value">${(x) => x.sessionCostUsd.toFixed(SESSION_COST_DECIMALS)}</span>
+                <span class="value">${(x) => formatUsdAmount(x.sessionCostUsd)}</span>
               </div>
             </div>
             <div
@@ -590,7 +659,7 @@ const costSessionHistoryTemplate = (
             <div class="settings-cost-history-row-right">
               <div class="settings-cost-history-row-metrics">
                 <div class="settings-cost-history-row-cost">
-                  $${(record) => record.usage.costUsd.toFixed(SESSION_COST_DECIMALS)}
+                  ${(record) => formatUsd(record.usage.costUsd)}
                 </div>
               </div>
               <${buttonTag}
@@ -666,7 +735,7 @@ export const SettingsModalTemplate = (
         </h3>
         <div class="settings-modal-section-body">
           <slot name="settings-model" ${slotted('settingsModelSlotted')}></slot>
-          ${platformContextUsageTemplate(progressTag)}
+          ${settingsUsageMetersTemplate(progressTag)}
         </div>
       </section>
       <!--