@genesislcap/ai-assistant 15.6.2 → 15.7.1

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>
             `,
           )}