@genesislcap/ai-assistant 15.7.0 → 15.7.2

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

@@ -305,9 +305,9 @@ export const settingsModalStyles = css`
   }
 
   /*
-   * Deliberately quieter than the live block: no pulsing badge and no accent, so the
-   * eye still lands on what is being built now. It leads only because it is the wider
-   * figure, not because it is the more urgent one.
+   * Deliberately quieter than the live block: no pulsing badge and no accent, so the eye lands
+   * on what is being built now — which is why that block leads the tab and this one follows,
+   * under the history heading whose rows it totals.
    */
   .settings-lifetime-usage-top {
     display: flex;
@@ -490,7 +490,14 @@ export const settingsModalStyles = css`
 
   .settings-token-bucket {
     display: flex;
-    min-width: 0;
+
+    /*
+     * min-content (not 0) so a bucket cannot be shrunk narrower than its own unbreakable label.
+     * With the label set to nowrap, a zero minimum would overflow it into the next column instead
+     * of wrapping — so the container's flex-wrap takes over and moves a bucket to a second row,
+     * which is the degradation we want when the modal is dragged narrow.
+     */
+    min-width: min-content;
     flex-direction: column;
     gap: 2px;
   }
@@ -501,6 +508,15 @@ export const settingsModalStyles = css`
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: var(--neutral-foreground-hint);
+
+    /*
+     * One line, always. The rate marker is a separate inline box after collapsible whitespace, so
+     * a wrappable label gives it a break opportunity of its own — in a narrow column it orphaned
+     * onto line 2, which also pushed that bucket's value a line below the other three and broke
+     * the row of figures. nowrap removes every break opportunity in the label, the space before
+     * the marker included, so no glue character is needed.
+     */
+    white-space: nowrap;
   }
 
   .settings-token-bucket-value {
@@ -510,13 +526,24 @@ export const settingsModalStyles = css`
   }
 
   /*
-   * Cache reads bill at a fraction of the uncached input rate, and in an agentic
-   * session they are usually the largest bucket by a wide margin. Muted so the biggest
-   * number on the row doesn't read as the dominant cost driver when it is the cheapest.
+   * The price-direction marker on a cache bucket's label — down for reads (a fraction of the
+   * uncached input rate), up for writes (a premium over it). Three tiers, so a bucket with no
+   * marker is the reference rate rather than an unlabelled fourth case.
+   *
+   * Carried by the label rather than the value, which is what this used to do: cache reads are
+   * usually the largest bucket by a wide margin in an agentic session, so the value was muted to
+   * stop the biggest number reading as the dominant cost driver. That priced the treatment to the
+   * wrong thing — a dimmed 0 (every Gemini cache write) looked disabled next to a normal 0, and a
+   * rate is a property of the bucket, not of this turn's figure.
+   *
+   * Sized down and nudged up rather than tinted: the label is already the hint colour, so a
+   * dimmer marker would vanish and a brighter one would out-shout the word it qualifies.
    */
-  .settings-token-bucket.is-discounted .settings-token-bucket-value {
-    font-weight: 500;
-    color: var(--neutral-foreground-hint);
+  .settings-token-bucket-rate {
+    font-size: 8px;
+    line-height: 1;
+    vertical-align: 0.15em;
+    letter-spacing: 0;
   }
 
   /*
@@ -538,9 +565,15 @@ export const settingsModalStyles = css`
     margin-bottom: 0;
   }
 
-  /* Equal columns, so the four buckets line up as a grid rather than bunching left. */
+  /*
+   * Basis auto, not 0: a zero basis splits the row into four equal columns, so CACHE WRITE is
+   * squeezed exactly as hard as INPUT despite being twice the label. Sizing from content gives the
+   * long labels the room their text needs and lets the short ones concede it, which is what makes
+   * white-space: nowrap above safe — every column starts at least as wide as its own content,
+   * then shares the slack. Still grows and shrinks, so the four stay flush edge to edge.
+   */
   .settings-usage-row .settings-token-bucket {
-    flex: 1 1 0;
+    flex: 1 1 auto;
   }
 
   .settings-model-tags {
@@ -580,6 +613,16 @@ export const settingsModalStyles = css`
     margin: calc(var(--design-unit) * 4px) 0 calc(var(--design-unit) * 2px);
   }
 
+  /*
+   * The heading labels the lifetime card as well as the rows, so the card gives up its own top
+   * margin and the gap becomes the heading's alone. Adjacent siblings collapse to the LARGER of
+   * the two margins, so leaving both would space the caps 3 units off the block they label while
+   * the rows below sit at 2 — reading as though the heading belonged to neither.
+   */
+  .settings-cost-history-title + .settings-lifetime-usage {
+    margin-top: 0;
+  }
+
   .settings-cost-history {
     display: flex;
     flex-direction: column;
@@ -616,14 +659,16 @@ export const settingsModalStyles = css`
   }
 
   /*
-   * Both of these carry a ?hidden binding (showTokens), and both declare display: flex — which
-   * silently beat the UA [hidden] { display: none } rule, because author-origin declarations
-   * outrank user-agent origin whatever the specificity. Without this, showTokens: false still
-   * rendered the full breakdown in the lifetime block, the live block and every history row.
-   * Sibling elements that hide correctly do so only by declaring no display at all. Same
-   * treatment as .settings-modal-tab-panel[hidden] near the top of this file.
+   * All of these carry a ?hidden binding, and all declare display: flex — which silently beat the
+   * UA [hidden] { display: none } rule, because author-origin declarations outrank user-agent
+   * origin whatever the specificity. Without this, showTokens: false still rendered the full
+   * breakdown in the lifetime block, the live block and every history row, and an empty row list
+   * still occupied its padding under the lifetime total. Sibling elements that hide correctly do
+   * so only by declaring no display at all. Same treatment as .settings-modal-tab-panel[hidden]
+   * near the top of this file.
    */
   .settings-usage-row-tokens[hidden],
+  .settings-cost-history[hidden],
   .settings-cost-history-row-content[hidden] {
     display: none !important;
   }

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

@@ -375,6 +375,12 @@ const modelTagTemplate = html<CostSessionModelEntry>`
  * this puts output between the three buckets that partition the prompt, so their relationship is
  * carried by the tooltips rather than by adjacency.
  *
+ * The two cache buckets carry a direction marker on their LABEL, not their value: below the input
+ * rate for reads, above it for writes. On the label because the rate is a fixed property of the
+ * bucket, whereas the value changes every turn — and because styling the values instead means a
+ * bucket reading 0 (every Gemini cache write, which has no write bucket to bill) renders in a
+ * dimmed treatment that looks disabled beside a normal 0. All four values stay identical.
+ *
  * `partPrefix` keeps the shadow-part names caller-specific (`session-tokens-input`,
  * `lifetime-tokens-input`, …) so a host can style one context without hitting the others.
  */
@@ -414,12 +420,17 @@ const tokenBreakdownTemplate = <T>(
           :innerHTML="${(x: T) => formatCompactTokenCountSafe(usageOf(x).outputTokens)}"
         ></span>
       </div>
-      <div class="settings-token-bucket is-discounted" part="${partPrefix}-tokens-cache-read">
+      <div class="settings-token-bucket" part="${partPrefix}-tokens-cache-read">
         <span
           class="settings-token-bucket-label"
           title="Prompt tokens served from the provider cache — billed at a fraction of the uncached rate"
         >
           Cache read
+          <!--
+            aria-hidden: the marker is a restatement of the tooltip this label already carries, and
+            a screen reader announcing "black down-pointing small triangle" mid-heading is noise.
+          -->
+          <span class="settings-token-bucket-rate" aria-hidden="true">▾</span>
         </span>
         <span
           class="settings-token-bucket-value"
@@ -432,6 +443,7 @@ const tokenBreakdownTemplate = <T>(
           title="Prompt tokens written to the provider cache — billed at a premium over the uncached rate"
         >
           Cache write
+          <span class="settings-token-bucket-rate" aria-hidden="true">▴</span>
         </span>
         <span
           class="settings-token-bucket-value"
@@ -445,9 +457,14 @@ const tokenBreakdownTemplate = <T>(
 /**
  * Lifetime usage across every project in the history scope.
  *
- * Sits above the live session block because it is the wider figure. It used to live inside
- * that block as a lone "Total build cost", where the live badge and project name directly
- * above it implied the total belonged to the open project.
+ * Sits under the "Build history" heading, above the rows it totals — the live block leads the tab
+ * instead, because the project open now is what a user came to check. Being inside the history
+ * grouping is also what identifies this figure: it is the sum of the rows below it, not a rival
+ * reading of the block above it.
+ *
+ * It must not sit inside the live block, which is where it began life as a lone "Total build
+ * cost": the live badge and project name directly above it implied the total belonged to the open
+ * project.
  */
 const lifetimeUsageTemplate =
   (): ViewTemplate<FoundationAiAssistant> => html<FoundationAiAssistant>`
@@ -727,7 +744,6 @@ export const SettingsModalTemplate = (
       part="cost-tab-panel"
     >
       <div class="settings-modal-body" part="settings-modal-body">
-      ${lifetimeUsageTemplate()}
       ${sessionCostSummaryTemplate()}
       <div
         class="settings-cost-current"
@@ -736,9 +752,15 @@ export const SettingsModalTemplate = (
       >
         <slot name="settings-cost-current" ${slotted('settingsCostCurrentSlotted')}></slot>
       </div>
-      <p class="settings-cost-history-title" ?hidden=${(x) => !x.settingsCostHistorySectionVisible}>
+      <!--
+        The heading covers everything below it, lifetime total included — that total IS the sum of
+        the history rows, so it reads as their summary rather than a rival figure. Hence the
+        heading's own visibility gate, which is broader than the rows'.
+      -->
+      <p class="settings-cost-history-title" ?hidden=${(x) => !x.settingsCostHistoryHeadingVisible}>
         Build history
       </p>
+      ${lifetimeUsageTemplate()}
       <div
         class="settings-cost-history"
         part="settings-cost-history"
@@ -801,7 +823,16 @@ export const SettingsModalTemplate = (
                     ${(x) => x.resolvedCostHistory.summaryHint}
                   `,
                 )}Costs
-                are estimated from token usage at list price.
+                are estimated from token usage at list
+                price.${when(
+                  // Only where the markers actually render. Every place they appear is gated on
+                  // showTokens, so with cost figures but no token buckets this sentence would
+                  // define two glyphs that are nowhere on screen.
+                  (x) => x.resolvedCostHistory.showTokens,
+                  html<FoundationAiAssistant>`
+                    Cache reads bill below the input rate (▾) and cache writes above it (▴).
+                  `,
+                )}
               </span>
             `,
           )}

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

@@ -93,6 +93,33 @@ suite('the blocked banner keeps its unblocked container visually inert', () => {
   }
 });
 
+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

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%;
@@ -644,7 +657,7 @@ const baseStyles = css`
     /* 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: calc(var(--design-unit) * 1px);
+    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);
@@ -710,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;
   }