@genesislcap/ai-assistant 15.6.2 → 15.7.1

package/dist/esm/components/settings-modal/settings-modal.template.js

@@ -204,6 +204,12 @@ const modelTagTemplate = html `
  * 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.
  */
@@ -240,12 +246,17 @@ const tokenBreakdownTemplate = (usageOf, partPrefix) => html `
           :innerHTML="${(x) => 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"
@@ -258,6 +269,7 @@ const tokenBreakdownTemplate = (usageOf, partPrefix) => html `
           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"
@@ -270,9 +282,14 @@ const tokenBreakdownTemplate = (usageOf, partPrefix) => html `
 /**
  * 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 = () => html `
     ${when((x) => x.settingsCostLifetimeVisible, html `
@@ -509,7 +526,6 @@ export const SettingsModalTemplate = (designSystemPrefix) => {
       part="cost-tab-panel"
     >
       <div class="settings-modal-body" part="settings-modal-body">
-      ${lifetimeUsageTemplate()}
       ${sessionCostSummaryTemplate()}
       <div
         class="settings-cost-current"
@@ -518,9 +534,15 @@ export const SettingsModalTemplate = (designSystemPrefix) => {
       >
         <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"
@@ -574,7 +596,14 @@ export const SettingsModalTemplate = (designSystemPrefix) => {
                 ${when((x) => !!x.resolvedCostHistory.summaryHint, html `
                     ${(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 `
+                    Cache reads bill below the input rate (▾) and cache writes above it (▴).
+                  `)}
               </span>
             `)}
           <${buttonTag}