@genesislcap/ai-assistant 15.4.1 → 15.6.0

package/src/components/chat-driver/chat-driver.ts

@@ -65,6 +65,7 @@ import {
   normalizeForProvider,
 } from '../../utils/history-transform';
 import { logger } from '../../utils/logger';
+import { sumUsage } from '../../utils/sum-usage';
 import { TOOL_FOLD_SYMBOL, type ToolFold } from '../../utils/tool-fold';
 import type { AiDriver, AllAgentSummary } from '../ai-driver/ai-driver';
 
@@ -217,6 +218,16 @@ export interface ChatDriverConfig {
   maxToolIterations?: number;
   /** Hard cap on fold operations. Default `5`. */
   maxFoldOperations?: number;
+  /**
+   * Collapse `condenseWhen` payloads in batches of this many model-calls rather than as
+   * soon as each trigger fires. A positive integer; decimals are floored and anything
+   * below `1` becomes `1`. Default `1` — collapse immediately, the historical behaviour.
+   *
+   * Condensation rewrites history in place, so collapsing continuously breaks the
+   * provider's prompt cache on nearly every call of a re-read loop. Raising this trades
+   * up to that many calls' worth of extra context for one cache break per batch.
+   */
+  condenseBatchCalls?: number;
   /** Ring-buffer size for per-turn snapshots. Default `400`. */
   maxTurnSnapshots?: number;
   /** Session identity used to file meta events onto the shared debug-log timeline. */
@@ -565,6 +576,8 @@ export class ChatDriver extends EventTarget implements AiDriver {
 
   /** Hard cap on tool-loop iterations. */
   private readonly maxToolIterations: number;
+  /** Model-calls per condensation batch; `1` collapses as soon as a trigger fires. */
+  private readonly condenseBatchCalls: number;
   /** Session identity used to file meta events onto the shared debug-log timeline. */
   private readonly sessionKey: string;
   /** Injected activity bus; defaults to a no-op off-browser (Node/tests/headless). */
@@ -582,11 +595,13 @@ export class ChatDriver extends EventTarget implements AiDriver {
       primerHistory,
       maxToolIterations = DEFAULT_MAX_TOOL_ITERATIONS,
       maxFoldOperations = DEFAULT_MAX_FOLD_OPERATIONS,
+      condenseBatchCalls = 1,
       maxTurnSnapshots = DEFAULT_MAX_TURN_SNAPSHOTS,
       sessionKey = '',
       activityBus = NOOP_ACTIVITY_BUS,
     } = config;
     this.maxToolIterations = maxToolIterations;
+    this.condenseBatchCalls = condenseBatchCalls;
     this.sessionKey = sessionKey;
     this.activityBus = activityBus;
     if (typeof toolHandlers === 'function') {
@@ -1299,6 +1314,11 @@ export class ChatDriver extends EventTarget implements AiDriver {
         tokensBefore,
         model: status?.model,
         createdAt,
+        // Bank what the replaced turns spent. `toCompact` is dropped from history
+        // below, taking its per-message cost/token fields with it — so a host total
+        // re-derived from the transcript would otherwise fall by exactly this much
+        // on every compaction. Summarising a turn does not refund what it cost.
+        rolledUpUsage: sumUsage(toCompact),
       },
     };
 
@@ -2329,6 +2349,7 @@ export class ChatDriver extends EventTarget implements AiDriver {
           // A call's phase has ended once the app declared a later phase epoch
           // current via `endPhase()`.
           phaseEnded: (phaseEpoch) => phaseEpoch < this.currentPhaseEpoch,
+          batchCalls: this.condenseBatchCalls,
         },
         (detail) => recordMetaEvent(this.sessionKey, 'context.condensed', detail),
       );

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

@@ -1,7 +1,14 @@
 import { css } from '@genesislcap/web-core';
+import { assistantSettingsSectionTitleStyles } from '../../styles/settings-section';
 
 /** Styles for the assistant settings modal (tabs, sections, toggles, cost summary). */
 export const settingsModalStyles = css`
+  /*
+   * Section headings come from the shared fragment the package also exports, so a host titling
+   * its own slotted section applies the same rule rather than a copy of it.
+   */
+  ${assistantSettingsSectionTitleStyles}
+
   *,
   *::before,
   *::after {
@@ -116,16 +123,13 @@ export const settingsModalStyles = css`
     border-bottom: none;
   }
 
-  .settings-modal-section-title {
+  /*
+   * Only the spacing. Everything else about this heading comes from the exported fragment
+   * above, which the assistant and its hosts share; margin is deliberately not in there,
+   * since the gap below a heading depends on the layout around it.
+   */
+  .ai-settings-section-title {
     margin: 0 0 calc(var(--design-unit) * 3px);
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    color: var(--neutral-foreground-hint);
-    display: flex;
-    align-items: center;
-    gap: calc(var(--design-unit) * 2px);
   }
 
   .settings-modal-section-note {
@@ -159,6 +163,15 @@ export const settingsModalStyles = css`
     gap: calc(var(--design-unit) * 2px);
   }
 
+  /*
+   * For rows whose control is a button rather than a switch. The base row top-aligns, which suits
+   * a switch (it lands level with the title), but a button is tall enough that top-aligning leaves
+   * it above the title-plus-description block it acts on.
+   */
+  .settings-toggle-row.is-centered {
+    align-items: center;
+  }
+
   .settings-animation-list {
     display: flex;
     flex-direction: column;
@@ -236,6 +249,18 @@ export const settingsModalStyles = css`
     max-width: none;
   }
 
+  /*
+   * Sub-heading over the provider toggle group. Unlike the section headings it sits INSIDE
+   * .settings-modal-section-body, so the parent's 4-unit flex gap already separates it from the
+   * first toggle — and flex does not collapse margins, so the shared rule's 3-unit margin-bottom
+   * would add to that gap rather than replace it, leaving the label adrift from the rows it
+   * names. Zero the margin and pull back 2 of the 4 gap units, expressed in the same token so it
+   * tracks if that gap changes.
+   */
+  .settings-app-toggles-title {
+    margin: 0 0 calc(var(--design-unit) * -2px);
+  }
+
   .settings-app-toggle-block {
     display: flex;
     flex-direction: column;
@@ -270,7 +295,8 @@ export const settingsModalStyles = css`
     color: var(--neutral-foreground-rest);
   }
 
-  .settings-current-build {
+  .settings-current-build,
+  .settings-lifetime-usage {
     background: var(--neutral-layer-2);
     border: 1px solid var(--neutral-stroke-rest);
     border-radius: calc(var(--control-corner-radius) * 1.5px);
@@ -278,6 +304,28 @@ export const settingsModalStyles = css`
     margin: calc(var(--design-unit) * 3px) 0;
   }
 
+  /*
+   * 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.
+   */
+  .settings-lifetime-usage-top {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: calc(var(--design-unit) * 2px);
+    margin-bottom: calc(var(--design-unit) * 3px);
+  }
+
+  .settings-lifetime-label {
+    font-size: 10px;
+    line-height: 1;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--neutral-foreground-hint);
+  }
+
   .settings-current-build-top {
     display: flex;
     align-items: center;
@@ -286,20 +334,44 @@ export const settingsModalStyles = css`
     margin-bottom: calc(var(--design-unit) * 3px);
   }
 
+  /*
+   * Optically centring these 10px caps against the 14px project name beside them. Flex offers
+   * only two alignments and neither lands it, because a box centre and a text baseline are
+   * different lines:
+   *   - align-items: center   sits the badge baseline about 1.2px high
+   *   - align-items: baseline matches baselines, but the caps then read as bottom-aligned
+   *     against the name's ascenders, so the badge looks low
+   * The eye wants the midpoint, so: centre the boxes, then translate down by the ~1px of
+   * overshoot. This is a nudge, but it corrects a fixed relationship between two font sizes
+   * rather than some neighbouring element's layout, so unlike a margin tuned to a sibling it
+   * cannot rot when that sibling changes. In em, so it tracks the badge text.
+   *
+   * display: block, not inline-flex: a flex container has no text baseline of its own and
+   * synthesizes one from its first child, which here is the dot, an empty span. As a block box
+   * the badge takes the baseline of its first line, i.e. the text.
+   */
   .settings-live-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: calc(var(--design-unit) * 1px);
+    display: block;
     font-size: 10px;
+    line-height: 1;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: var(--accent-fill-rest);
+    white-space: nowrap;
+    transform: translateY(0.1em);
   }
 
   .settings-live-dot {
+    display: inline-block;
     width: 7px;
     height: 7px;
+
+    /* Replaces the flex gap the badge no longer has. */
+    margin-right: calc(var(--design-unit) * 1px);
+
+    /* Centres the dot on the text beside it without disturbing that text's baseline. */
+    vertical-align: middle;
     border-radius: 50%;
     background: var(--accent-fill-rest);
     animation: settings-live-pulse 1.6s ease-out infinite;
@@ -321,18 +393,30 @@ export const settingsModalStyles = css`
 
   .settings-current-build-name {
     font-size: 14px;
+    line-height: 1;
     font-weight: 600;
   }
 
-  .settings-current-build-stats {
+  /*
+   * Cost and the token buckets side by side: one number in its own box, the four buckets
+   * sharing the box next to it. Stretch, so the two are the same height however tall the 22px
+   * cost value makes the left one.
+   */
+  .settings-usage-row {
     display: flex;
     flex-wrap: wrap;
+    align-items: stretch;
     gap: calc(var(--design-unit) * 3px);
     margin-bottom: calc(var(--design-unit) * 3px);
   }
 
+  .settings-usage-row-tokens {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
   .settings-build-stat {
-    flex: 1;
     min-width: 0;
     background: var(--neutral-layer-1);
     border: 1px solid var(--neutral-stroke-rest);
@@ -360,6 +444,105 @@ export const settingsModalStyles = css`
     color: var(--accent-fill-rest);
   }
 
+  /*
+   * Per-bucket token split, beneath the headline cost. Small paired label/value cells
+   * rather than four more stat cards: they are the detail behind the cost above, so they
+   * have to read as subordinate to it rather than compete with it. The four buckets ARE
+   * the token figure now — there is no merged total anywhere for them to break down.
+   */
+  .settings-token-breakdown {
+    display: flex;
+    flex-direction: column;
+
+    /*
+     * Tight against the buckets below. One design unit rather than two, because each bucket
+     * separates its own label from its value by only 2px — at two units the title sat four
+     * times further from the bucket labels than they sit from their own numbers, which read
+     * as a gap between unrelated blocks instead of a heading over its content.
+     */
+    gap: calc(var(--design-unit) * 1px);
+    margin-bottom: calc(var(--design-unit) * 3px);
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 3px);
+    background: var(--neutral-layer-1);
+    border: 1px solid var(--neutral-stroke-rest);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  /*
+   * Titles the box, because nothing else in it named the unit. Same styling and position as
+   * the cost box's label, so two boxes sitting side by side are titled the same way; the
+   * hierarchy against the bucket labels comes from position, not a second type size.
+   */
+  .settings-token-breakdown-label {
+    font-size: 10px;
+    line-height: 1;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--neutral-foreground-hint);
+  }
+
+  .settings-token-buckets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(var(--design-unit) * 4px);
+  }
+
+  .settings-token-bucket {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .settings-token-bucket-label {
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--neutral-foreground-hint);
+  }
+
+  .settings-token-bucket-value {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--neutral-foreground-rest);
+  }
+
+  /*
+   * 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.
+   */
+  .settings-token-bucket.is-discounted .settings-token-bucket-value {
+    font-weight: 500;
+    color: var(--neutral-foreground-hint);
+  }
+
+  /*
+   * Usage-row overrides. Placed after the base rules they refine rather than up beside
+   * .settings-usage-row itself, because stylelint's no-descending-specificity rejects a
+   * compound selector appearing before the plain one it overrides.
+   */
+
+  /* Sized by its content; the buckets take the rest, since four cells need the width. */
+  .settings-usage-row > .settings-build-stat {
+    flex: 0 1 auto;
+  }
+
+  .settings-usage-row .settings-token-breakdown {
+    flex: 1 1 auto;
+
+    /* The row owns the spacing now; this centres the column against the taller cost box. */
+    justify-content: center;
+    margin-bottom: 0;
+  }
+
+  /* Equal columns, so the four buckets line up as a grid rather than bunching left. */
+  .settings-usage-row .settings-token-bucket {
+    flex: 1 1 0;
+  }
+
   .settings-model-tags {
     display: flex;
     flex-wrap: wrap;
@@ -432,6 +615,32 @@ export const settingsModalStyles = css`
     gap: calc(var(--design-unit) * 2px);
   }
 
+  /*
+   * 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.
+   */
+  .settings-usage-row-tokens[hidden],
+  .settings-cost-history-row-content[hidden] {
+    display: none !important;
+  }
+
+  /*
+   * The buckets inside a history row drop the panel treatment they carry in the summary
+   * blocks — the row is already a bordered card, and a second box inside it reads as a
+   * nested panel. The adjacent-sibling rule above supplies the separator instead.
+   */
+  .settings-cost-history-row-breakdown .settings-token-breakdown {
+    flex: 1 1 auto;
+    margin-bottom: 0;
+    padding: 0;
+    background: none;
+    border: none;
+  }
+
   .settings-cost-history-row-content + .settings-cost-history-row-content {
     border-top: 1px solid var(--neutral-stroke-rest);
     margin-top: calc(var(--design-unit) * 2px);
@@ -446,8 +655,20 @@ export const settingsModalStyles = css`
     justify-content: space-between;
   }
 
+  /*
+   * Holds the cost and the delete button as one centred pair. The button used to be a sibling
+   * of the whole row body, kept in place by a -2px nudge tuned for when the metrics column had
+   * two lines (cost plus a merged token total). Dropping that second line left the nudge
+   * compensating for nothing. Centring the two against each other needs no magic number and
+   * cannot drift again if the metrics content changes.
+   *
+   * NB this rule previously set align-items with no display:flex, so it had no effect at all.
+   */
   .settings-cost-history-row-right {
-    align-items: flex-end;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--design-unit) * 1px);
+    flex: 0 0 auto;
   }
 
   .settings-cost-history-row-cost,
@@ -468,7 +689,6 @@ export const settingsModalStyles = css`
     white-space: nowrap;
   }
 
-  .settings-cost-history-row-tokens,
   .settings-cost-history-row-date {
     font-size: 12px;
     color: var(--neutral-foreground-hint);
@@ -476,7 +696,6 @@ export const settingsModalStyles = css`
 
   .settings-cost-history-delete {
     flex: 0 0 auto;
-    margin-top: -2px;
     color: var(--neutral-foreground-hint);
   }