@genesislcap/ai-assistant 15.6.2 → 15.7.1

package/src/main/cost-session-banking.test.ts

@@ -1,5 +1,10 @@
 import type { AggregateUsage, ChatConfig, ChatMessage } from '@genesislcap/foundation-ai';
 import { assert, createLogicSuite } from '@genesislcap/foundation-testing';
+import {
+  getBankedBaseline,
+  resetBankedBaselines,
+  setBankedBaseline,
+} from '../utils/banked-usage-baselines';
 import {
   clearCostSessionHistory,
   loadCostSessionHistory,
@@ -48,6 +53,12 @@ type Internals = {
 /**
  * An unconnected element with just enough session state wired for `finalizeCostSession`:
  * the live usage it projects, the transcript it titles from, and the key it upserts against.
+ *
+ * Banked baselines are module state keyed by session (so remounts share one), which means they
+ * outlive an element. Cleared by default, because every suite but the remount ones is modelling
+ * a *fresh page load* — and because leaving them would leak one suite's baseline into the next
+ * under the shared `PROJECT` key. Pass `remount: true` to model a new element joining a session
+ * that has already banked, which is the case this file exists to pin.
  */
 function element(options: {
   scope: string;
@@ -56,7 +67,9 @@ function element(options: {
   persistenceActive?: boolean;
   loaded?: boolean;
   providerStatuses?: unknown[];
+  remount?: boolean;
 }): FoundationAiAssistant {
+  if (!options.remount) resetBankedBaselines();
   const el = document.createElement('foundation-ai-assistant') as FoundationAiAssistant;
   const messages: ChatMessage[] = [{ role: 'user', content: 'build me a blotter' } as ChatMessage];
   const internals = el as unknown as Internals;
@@ -351,10 +364,10 @@ Suite(
 );
 
 Suite('deleting a provider row whose id differs from its projectKey still drops the memo', () => {
-  // `_bankedFor` holds a projectKey; the delete action passes a row id. A host provider can assign
-  // any id, so comparing across the two namespaces skipped the reset and the next turn resurrected
-  // the deleted total. Reachable when a provider load lands AFTER a finalize has banked: our own
-  // upsert would otherwise have rewritten the row's id to the projectKey.
+  // Baselines are keyed by projectKey; the delete action passes a row id. A host provider can
+  // assign any id, so deleting by the wrong namespace left the baseline in place and the next
+  // turn resurrected the deleted total. Reachable when a provider load lands AFTER a finalize has
+  // banked: our own upsert would otherwise have rewritten the row's id to the projectKey.
   const scope = 'ledger-remove-id';
   clearCostSessionHistory(scope);
   const el = element({
@@ -363,13 +376,10 @@ Suite('deleting a provider row whose id differs from its projectKey still drops
     rows: [row({ id: 'host-assigned-uuid', projectKey: PROJECT, usage: usage(10) })],
     persistenceActive: false,
   });
-  // Memo already populated for this project, as it would be after a turn.
-  const internals = el as unknown as Internals & {
-    _bankedFor?: string;
-    _bankedUsage: AggregateUsage;
-  };
-  internals._bankedFor = PROJECT;
-  internals._bankedUsage = usage(10);
+  // Baseline already resolved for this project, as it would be after a turn — set directly
+  // rather than by finalizing, because our own upsert would rewrite the row's id to the
+  // projectKey and the id mismatch under test would vanish with it.
+  setBankedBaseline(PROJECT, usage(10));
 
   el.removeCostSessionFromHistory('host-assigned-uuid');
   assert.is(el.costSessionHistory.length, 0);
@@ -379,6 +389,250 @@ Suite('deleting a provider row whose id differs from its projectKey still drops
   clearCostSessionHistory(scope);
 });
 
+Suite('a remount mid-session does not re-bank what the row already holds', () => {
+  // The reported regression (GENC-1475). Reproduces the field report exactly: with persistence
+  // off, the host remounted the assistant part-way through a session (a layout re-render — the
+  // debug log showed seven connects in one session) and the LIFETIME figure jumped by the whole
+  // session-to-date while the live figure kept climbing normally.
+  //
+  // The new element joins a live session: same key, same transcript, and rows that already
+  // contain the previous instance's upsert. An element-scoped baseline re-derived here and, with
+  // no restore to defer to, banked `row.usage` — which already included this very transcript.
+  const scope = 'bank-remount';
+  clearCostSessionHistory(scope);
+  const first = element({
+    scope,
+    live: usage(6),
+    rows: [row({ usage: usage(1), banked: usage(1) })],
+    persistenceActive: false,
+  });
+  first.finalizeCostSession();
+  assert.is(first.costSessionHistory[0].usage.costUsd, 7, '1 banked + 6 live');
+
+  // Remount: a brand new element wired to the same session, handed the rows as they now stand.
+  const second = element({
+    scope,
+    live: usage(6),
+    rows: first.costSessionHistory,
+    persistenceActive: false,
+    remount: true,
+  });
+  second.finalizeCostSession();
+
+  assert.is(second.costSessionHistory[0].usage.costUsd, 7, 'remount must not inflate the row');
+  assert.is(second.costSessionHistory[0].banked?.costUsd, 1, 'baseline unchanged by the remount');
+
+  // And the session keeps accruing normally afterwards, on top of the SAME baseline.
+  const third = element({
+    scope,
+    live: usage(9),
+    rows: second.costSessionHistory,
+    persistenceActive: false,
+    remount: true,
+  });
+  third.finalizeCostSession();
+  assert.is(third.costSessionHistory[0].usage.costUsd, 10, '1 banked + 9 live');
+  clearCostSessionHistory(scope);
+});
+
+Suite('a page reload still absorbs the prior total after a remount banked nothing new', () => {
+  // The other half of the pairing: dropping the baseline on remount is wrong, but keeping it
+  // across a *page load* would be too — the transcript starts empty there (persistence off), so
+  // the row's whole total must be banked. `resetBankedBaselines` stands in for the realm dying.
+  const scope = 'bank-reload';
+  clearCostSessionHistory(scope);
+  const before = element({
+    scope,
+    live: usage(6),
+    rows: [row({ usage: usage(1), banked: usage(1) })],
+    persistenceActive: false,
+  });
+  before.finalizeCostSession();
+  assert.is(before.costSessionHistory[0].usage.costUsd, 7);
+
+  const afterReload = element({
+    scope,
+    live: usage(2),
+    rows: before.costSessionHistory,
+    persistenceActive: false,
+  });
+  afterReload.finalizeCostSession();
+  assert.is(afterReload.costSessionHistory[0].usage.costUsd, 9, 'prior 7 banked, this load adds 2');
+  clearCostSessionHistory(scope);
+});
+
+Suite('clearing the transcript re-baselines instead of discarding spend', () => {
+  // Clear empties the transcript, so the row's total now predates what is on screen and has to be
+  // banked wholesale. Merely dropping the baseline would re-derive through `persistenceActive`,
+  // which with persistence ON carries the row's OLD banked figure forward and silently loses
+  // every turn between that baseline and the clear.
+  const scope = 'bank-clear-session';
+  clearCostSessionHistory(scope);
+  const el = element({
+    scope,
+    live: usage(6),
+    rows: [row({ usage: usage(10), banked: usage(4) })],
+    persistenceActive: true,
+  });
+  el.finalizeCostSession();
+  assert.is(el.costSessionHistory[0].usage.costUsd, 10);
+
+  // `clearSession` itself tears down and rebuilds the driver, which an unconnected element has
+  // none of — so drive the one step under test. `clearSession` reads the live figure before
+  // `resetSession` zeroes it and passes it in; the 6 here is that capture.
+  const priv = el as unknown as {
+    rebaselineOnClearedTranscript(key: string, discarded: AggregateUsage): void;
+    _sessionRef: { store: { aiAssistant: { sessionUsage: AggregateUsage } } };
+    _costHistoryLoaded: boolean;
+  };
+  priv.rebaselineOnClearedTranscript(PROJECT, usage(6));
+
+  // A fresh transcript worth 3, on top of the whole 10 the project had accrued.
+  priv._sessionRef.store.aiAssistant.sessionUsage = usage(3);
+  el.finalizeCostSession();
+  assert.is(el.costSessionHistory[0].usage.costUsd, 13, 'pre-clear spend kept, new turn added');
+  assert.is(el.costSessionHistory[0].banked?.costUsd, 10, 'whole pre-clear total banked');
+  clearCostSessionHistory(scope);
+});
+
+Suite('clearing while the ledger is still loading must not pin a baseline', () => {
+  // Review case. A stamped baseline is sticky — `bankedUsageFor` short-circuits on any stored
+  // entry and a zero usage is a *resolved* value there. On the provider path the row list is empty
+  // and `_costHistoryLoaded` false while the read is in flight, so a clear landing in that window
+  // used to pin a baseline derived from no rows at all. The load arriving afterwards with the
+  // project's real total was then never consulted, and the next write replaced its row with
+  // `banked: 0` — the project's whole history gone.
+  const scope = 'bank-clear-unloaded';
+  clearCostSessionHistory(scope);
+  const el = element({ scope, live: usage(5), loaded: false });
+  const priv = el as unknown as {
+    rebaselineOnClearedTranscript(key: string, discarded: AggregateUsage): void;
+    _sessionRef: { store: { aiAssistant: { sessionUsage: AggregateUsage } } };
+    _costHistoryLoaded: boolean;
+  };
+
+  // Clear arrives before the provider read lands: rows are empty and nothing is known yet.
+  priv.rebaselineOnClearedTranscript(PROJECT, usage(5));
+  assert.is(getBankedBaseline(PROJECT), undefined, 'nothing pinned from a ledger we cannot see');
+
+  // The read lands with this project's real history, and a turn follows.
+  el.costSessionHistory = [row({ usage: usage(42), banked: usage(40) })];
+  priv._costHistoryLoaded = true;
+  priv._sessionRef.store.aiAssistant.sessionUsage = usage(1);
+  el.finalizeCostSession();
+
+  assert.is(el.costSessionHistory[0].usage.costUsd, 43, "the project's 42 survives the race");
+  assert.is(el.costSessionHistory[0].banked?.costUsd, 42, 'baseline re-derived from real rows');
+  clearCostSessionHistory(scope);
+});
+
+Suite('clearing banks a transcript the row has not caught up with', () => {
+  // Review case: without this, the suite passed identically against the OLD derivation
+  // (`existing?.usage`), because everywhere else the row already agreed with baseline + live.
+  //
+  // The formulas only diverge when the row is STALE relative to the transcript — which is exactly
+  // what the new one exists for, since `finalizeCostSession` skips its write while the ledger is
+  // unloaded and while the session has no usage. No finalize here, so the row lags by 3.
+  const scope = 'bank-clear-stale-row';
+  clearCostSessionHistory(scope);
+  const el = element({
+    scope,
+    live: usage(3),
+    rows: [row({ usage: usage(42), banked: usage(40) })],
+    persistenceActive: false,
+  });
+  const priv = el as unknown as {
+    rebaselineOnClearedTranscript(key: string, discarded: AggregateUsage): void;
+    _sessionRef: { store: { aiAssistant: { sessionUsage: AggregateUsage } } };
+  };
+
+  priv.rebaselineOnClearedTranscript(PROJECT, usage(3));
+  // 42 from the row plus the 3 the discarded transcript proved. The old row-read banked 42 flat.
+  assert.is(getBankedBaseline(PROJECT)?.costUsd, 45, 'the stale 3 is banked, not dropped');
+
+  priv._sessionRef.store.aiAssistant.sessionUsage = usage(1);
+  el.finalizeCostSession();
+  assert.is(el.costSessionHistory[0].usage.costUsd, 46, '45 banked + the new turn');
+  clearCostSessionHistory(scope);
+});
+
+Suite('a memoised baseline survives a clear during a reload instead of being dropped', () => {
+  // Review case. The guard is broader than the derivation needs: once a baseline is memoised the
+  // new figure is determined without any rows, so deleting it there throws away something correct.
+  // Concretely — row at usage 120 / banked 90, baseline memoised at 90, 30 on screen — dropping it
+  // made the next turn re-derive `row.banked` and rewrite the row BACKWARDS from 120 to 95.
+  const scope = 'bank-clear-memoised';
+  clearCostSessionHistory(scope);
+  const el = element({
+    scope,
+    live: usage(30),
+    rows: [row({ usage: usage(120), banked: usage(90) })],
+    persistenceActive: true,
+  });
+  el.finalizeCostSession();
+  assert.is(getBankedBaseline(PROJECT)?.costUsd, 90, 'baseline memoised off the restored row');
+
+  // A chatConfig rebind puts the ledger back in flight, and the clear lands inside that window.
+  const priv = el as unknown as {
+    rebaselineOnClearedTranscript(key: string, discarded: AggregateUsage): void;
+    _sessionRef: { store: { aiAssistant: { sessionUsage: AggregateUsage } } };
+    _costHistoryLoaded: boolean;
+  };
+  priv._costHistoryLoaded = false;
+  priv.rebaselineOnClearedTranscript(PROJECT, usage(30));
+  assert.is(getBankedBaseline(PROJECT)?.costUsd, 120, '90 kept and the discarded 30 added');
+
+  priv._costHistoryLoaded = true;
+  priv._sessionRef.store.aiAssistant.sessionUsage = usage(5);
+  el.finalizeCostSession();
+  assert.is(el.costSessionHistory[0].usage.costUsd, 125, 'row moves forward, never backwards');
+  clearCostSessionHistory(scope);
+});
+
+Suite('clearing with the ledger disabled pins nothing, even though it reads as loaded', () => {
+  // Review case. `reloadCostSessionHistory` sets `_costHistoryLoaded` TRUE over a deliberately
+  // empty list when `enabled` is false — "nothing will be loaded", not "rows are known" — so the
+  // flag alone let a clear pin a baseline from a ledger that was never read. A host enabling
+  // history afterwards (an async setting, a feature flag) then had its real row buried by it.
+  const scope = 'bank-clear-disabled';
+  clearCostSessionHistory(scope);
+  const el = element({ scope, live: usage(3) });
+  el.chatConfig = { costHistory: { enabled: false, scope } } as ChatConfig;
+  const priv = el as unknown as {
+    rebaselineOnClearedTranscript(key: string, discarded: AggregateUsage): void;
+    _sessionRef: { store: { aiAssistant: { sessionUsage: AggregateUsage } } };
+    _costHistoryLoaded: boolean;
+  };
+  assert.is(priv._costHistoryLoaded, true, 'reads as loaded despite nothing being known');
+
+  priv.rebaselineOnClearedTranscript(PROJECT, usage(3));
+  assert.is(getBankedBaseline(PROJECT), undefined, 'nothing pinned while the ledger is off');
+
+  // History switched on afterwards, and this project turns out to have real spend.
+  el.chatConfig = { costHistory: { enabled: true, scope, title: 'Trade Blotter' } } as ChatConfig;
+  el.costSessionHistory = [row({ usage: usage(50), banked: usage(50) })];
+  priv._costHistoryLoaded = true;
+  priv._sessionRef.store.aiAssistant.sessionUsage = usage(1);
+  el.finalizeCostSession();
+
+  assert.is(el.costSessionHistory[0].usage.costUsd, 51, "the project's 50 is not buried");
+  clearCostSessionHistory(scope);
+});
+
+Suite('a host slotting its own build history does not have to enable our ledger', () => {
+  // Review case. `enabled` governs the BUILT-IN ledger and defaults false, while the Usage tab
+  // shows for showCost/showTokens which default true. Once the section's ?hidden binding became
+  // effective, short-circuiting on `enabled` above the slot check hid a host's own markup — and
+  // the slot is the only thing in that container.
+  const el = element({ scope: 'slotted-history', live: usage(1) });
+  el.chatConfig = { costHistory: { enabled: false } } as ChatConfig;
+  assert.is(el.settingsCostHistorySectionVisible, false, 'nothing slotted, ledger off → hidden');
+
+  el.settingsCostHistorySlotted = [document.createElement('div')];
+  assert.is(el.settingsCostHistorySectionVisible, true, 'slotted content shows without `enabled`');
+  assert.is(el.settingsCostHistoryHeadingVisible, true, 'and the heading comes with it');
+});
+
 Suite('hides the lifetime section when no state key at all can produce a row', () => {
   const el = element({ scope: 'ledger-nokey', live: usage(3) });
   assert.is(el.settingsCostLifetimeVisible, true, 'visible with a key');
@@ -404,4 +658,22 @@ Suite('labels the live figures by whether the transcript is authoritative', () =
   assert.is(without.liveUsageIsProjectLifetime, false, 'not restored → this session only');
 });
 
+Suite('a stored baseline is isolated from the row and the caller it passed through', () => {
+  // A baseline arrives as a reference into a ledger row (`resolveBankedUsage` returns `row.banked`
+  // or `row.usage`) and is read back onto the NEXT row's `banked` field, so an uncloned map entry
+  // is reachable from page-global state, two rows, and any host handed the row list. Mutating
+  // either end must not move the stored figure, or a project's baseline is silently rewritten for
+  // the rest of the page.
+  resetBankedBaselines();
+  const source = usage(10);
+  setBankedBaseline(PROJECT, source);
+
+  source.costUsd = 999;
+  assert.is(getBankedBaseline(PROJECT)?.costUsd, 10, 'mutating the source cannot reach the map');
+
+  const readBack = getBankedBaseline(PROJECT)!;
+  readBack.costUsd = 777;
+  assert.is(getBankedBaseline(PROJECT)?.costUsd, 10, 'mutating a read copy cannot reach the map');
+});
+
 Suite.run();

package/src/main/main.styles.test.ts

@@ -0,0 +1,130 @@
+import { assert, createLogicSuite } from '@genesislcap/foundation-testing';
+import { styles } from './main.styles';
+
+// CSS is not otherwise unit-tested in this package, so this covers the two
+// properties of the BLOCKED BANNER that are cheap to assert from the generated
+// text and that a reviewer had to catch by eye:
+//
+//   1. Design-system tokens are consumed UNFALLBACKED, as every other rule in the
+//      file does. A `var(--token, fallback)` here is dead code at best — both
+//      tokens below ship with defaults — and actively wrong at worst: the blocked
+//      banner's old `var(--neutral-layer-2, transparent)` would, if it ever fired,
+//      have produced a banner with no surface at all.
+//   2. The blocked banner's visual treatment hangs off `.is-visible`, not the bare
+//      class, because the container stays mounted while unblocked so that its
+//      `role="status"` region is registered before the text arrives (see
+//      main.template.ts). Collapsing the empty container would undo that.
+//
+// Scope: the banner's own rules, and nothing else. Both negative assertions were
+// written for one component, but an earlier version grepped the WHOLE stylesheet
+// — quietly turning a banner test into a global style policy nobody agreed to, so
+// any future rule anywhere in an 800-line sheet that legitimately wanted a
+// fallback on either token would have failed a test named after the banner.
+
+const suite = createLogicSuite('main.styles blocked-banner rules');
+
+/**
+ * The generated stylesheet text. `css` composes nested `ElementStyles` (this file
+ * builds the sheet from several partials), so flatten recursively rather than
+ * only reading the top level — a shallow read silently returns almost nothing,
+ * which would make every `assert.not.ok` below pass vacuously. The first test
+ * guards exactly 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) : '';
+};
+
+const cssText = flatten(styles);
+
+/**
+ * Every declaration block whose selector mentions `.blocked-banner`, joined.
+ *
+ * Deliberately crude — one regex over the generated text, no CSS parser — but
+ * enough to keep these assertions about the banner rather than about the whole
+ * sheet, which was the only thing wrong with them. It matches
+ * `<selector> { <declarations> }` for any selector containing `.blocked-banner`,
+ * so it picks up the bare class, the `.is-visible` / `.is-partial` modifiers, the
+ * shared composer-width group and the copy inside the container query alike.
+ */
+const bannerRules = (cssText.match(/[^{}]*\.blocked-banner[^{}]*\{[^}]*\}/g) ?? []).join('\n');
+
+/** Declarations of the bare-class rule — the one that applies while empty. */
+const emptyStateRule = cssText.match(/[\s{}](\.blocked-banner)\s*\{([^}]*)\}/)?.[2] ?? '';
+
+suite('the banner rules were extracted as text (guards the assertions below)', () => {
+  assert.ok(cssText.includes('.blocked-banner'), 'the banner rules are in the sheet');
+  assert.ok(bannerRules.includes('.is-visible'), 'the extraction found the modifier rules');
+  assert.ok(emptyStateRule.length > 0, 'and isolated the bare-class rule');
+});
+
+suite('the banner consumes design-system tokens without dead fallbacks', () => {
+  assert.not.ok(
+    bannerRules.includes('var(--neutral-layer-2,'),
+    '--neutral-layer-2 has a DS default and is used unfallbacked everywhere else here',
+  );
+  assert.not.ok(
+    bannerRules.includes('var(--warning-color,'),
+    '--warning-color has a DS default and is used unfallbacked by toast/badge styles',
+  );
+});
+
+suite('the blocked banner keeps its unblocked container visually inert', () => {
+  // `::part(blocked-banner)` matches at all times, so the empty state must set
+  // nothing that reserves space — and must not remove the container from the
+  // accessibility tree, which is where the `role="status"` region is registered.
+  //
+  // Asserted against the bare-class rule's own declarations rather than by
+  // grepping for a `:empty` selector nobody wrote: this catches the mistake as it
+  // would actually be made — a padding or border creeping onto the always-present
+  // container — instead of one specific spelling of it.
+  //
+  // `margin-block` rather than `margin`: the shared composer-width group sets
+  // `margin-inline: auto` on the banner along with the rest of the composer
+  // column, which centres it and reserves nothing.
+  assert.ok(cssText.includes('.blocked-banner.is-visible'), 'visuals hang off is-visible');
+  for (const property of ['display: none', 'padding', 'border', 'background', 'margin-block']) {
+    assert.not.ok(
+      emptyStateRule.includes(property),
+      `the always-present container must not set ${property} — that is .is-visible's job`,
+    );
+  }
+});
+
+suite('the visible banner hands its end margin to the resize handle', () => {
+  // Reviewer's manual-testing note: the banner's block-end margin plus the 7px
+  // handle stacked into a gap the hover pill was NOT centred in (it centres in
+  // the handle alone). The adjacency rule collapses the two so the handle IS
+  // the gap. What gets pinned is the INVARIANT, not the selector's existence:
+  // both rules must read the ONE shared token, because the cancellation only
+  // works while the banner's margin and the handle's pull are equal-and-
+  // opposite — two hand-kept magnitudes ~80 lines apart regress silently, and
+  // an existence-only assertion stayed green while they did.
+  assert.ok(
+    /:host\s*\{[^}]*--blocked-banner-gap:/.test(cssText),
+    'the shared gap token is declared on the host (a sibling cannot read one on the banner)',
+  );
+  assert.ok(
+    /\.blocked-banner\.is-visible\s*\{[^}]*margin-block:\s*var\(--blocked-banner-gap\)/.test(
+      cssText,
+    ),
+    "the banner's block margin IS the token",
+  );
+  assert.ok(
+    /\.blocked-banner\.is-visible \+ \.composer-resize-handle\s*\{[^}]*margin-block-start:\s*calc\(var\(--blocked-banner-gap\) \* -1\)/.test(
+      cssText,
+    ),
+    'and the handle pulls up by exactly that token, negated — equal and opposite by construction',
+  );
+});
+
+suite('partial exhaustion has its own modifier, layered on the visible state', () => {
+  // `.is-visible` carries the layout and surface for BOTH states; `.is-partial`
+  // only softens it. Additive, never a replacement — so host CSS keyed on the
+  // visible state needs to know nothing about partial exhaustion.
+  assert.ok(cssText.includes('.blocked-banner.is-partial'), 'the partial modifier exists');
+});
+
+suite.run();

package/src/main/main.styles.ts

@@ -16,6 +16,19 @@ const baseStyles = css`
        float still triggers at 1500px. */
     --ai-conversation-max-width: 1500px;
 
+    /* INTERNAL — not a supported override point, despite sitting beside one.
+       Deliberately NOT --ai-*-namespaced and absent from docs/styling.md: the
+       documented banner surface is ::part(blocked-banner), and this token is
+       plumbing, not a knob. It is the banner's block margin AND the exact
+       amount the resize handle pulls itself up by when it follows the banner —
+       one name, on the host only because a sibling cannot read a custom
+       property declared on the banner (they inherit downward), so the
+       cancellation is structural: change the gap here and both rules move
+       together, instead of two magnitudes ~80 lines apart that only prose kept
+       in sync. A host that overrides it anyway gets a consistent gap, but that
+       is a side effect, not a promise. */
+    --blocked-banner-gap: calc(var(--design-unit) * 1px);
+
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -441,6 +454,7 @@ const baseStyles = css`
   .attachment-chips,
   .agent-picker-panel,
   .session-menu-panel,
+  .blocked-banner,
   chat-suggestions {
     box-sizing: border-box;
     width: 100%;
@@ -464,6 +478,13 @@ const baseStyles = css`
       border-radius: 12px;
     }
 
+    /* The banner joins the same floating-card family, but keeps its own
+       warning-toned border — overriding it with the neutral stroke would erase
+       the one colour signal it carries. Only the radius needs to match. */
+    .blocked-banner.is-visible {
+      border-radius: 12px;
+    }
+
     /* chat-suggestions paints its background on an inner element, so clip it to the
        rounded corners — otherwise that square inner background bleeds past the radius
        and the corners read as square with the border hidden behind them. */
@@ -617,6 +638,45 @@ const baseStyles = css`
     font-size: 0.9em;
   }
 
+  /* Backend-blocked banner (GENC-1464) — sits between the transcript and the
+     disabled composer. Flat and quiet rather than an error toast: the condition
+     is standing, not a momentary failure, so it should read as part of the
+     chrome the user is now working within. */
+
+  /* The container is ALWAYS in the DOM so the live region is registered before the
+     text arrives (see main.template.ts) — so the bare selector carries only layout,
+     and an unblocked banner is an empty, zero-height, invisible box. Everything
+     that would make it visible hangs off .is-visible. */
+  .blocked-banner {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .blocked-banner.is-visible {
+    /* Block axis only. The inline-axis margin is owned by the composer width group
+       above (margin-inline: auto), which centres the banner on the same column as
+       the input row — an inline margin here would fight it. */
+    margin-block: var(--blocked-banner-gap);
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    border: calc(var(--stroke-width) * 1px) solid var(--warning-color);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    background: var(--neutral-layer-2);
+    color: var(--neutral-foreground-rest);
+  }
+
+  /* Partial exhaustion: at least one vendor is walled but the composer is still
+     live, so the banner is advice rather than a wall. Softened to match — same
+     layout, same part, lower alarm. */
+  .blocked-banner.is-partial {
+    border-color: var(--neutral-stroke-rest);
+  }
+
+  .blocked-banner-text {
+    font-size: 0.9em;
+    line-height: 1.4;
+  }
+
   .chat-input {
     flex: 1;
     resize: none;
@@ -663,6 +723,18 @@ const baseStyles = css`
     opacity: 70%;
   }
 
+  /* With the banner visible, its block-end margin and the handle's height used
+     to STACK into an ~11px void between the exhausted message and the composer
+     — and the hover pill centres in the handle's own 7px slice, i.e. below the
+     middle of the gap the user actually sees. Pull the handle up over the
+     banner's end margin instead: the handle's height becomes the whole gap and
+     the pill lands dead-centre of it. FAST's when-anchors are comment nodes,
+     so the adjacency holds whenever the handle renders; without a handle
+     (resize disabled) the banner keeps its normal margin before the input row. */
+  .blocked-banner.is-visible + .composer-resize-handle {
+    margin-block-start: calc(var(--blocked-banner-gap) * -1);
+  }
+
   .file-input {
     display: none;
   }