@genesislcap/ai-assistant 15.4.1 → 15.5.0

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

@@ -1,6 +1,13 @@
 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 {
@@ -115,16 +122,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 {
@@ -158,6 +162,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;
@@ -235,6 +248,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;
@@ -269,7 +294,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);
@@ -277,6 +303,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;
@@ -285,20 +333,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;
@@ -320,18 +392,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);
@@ -359,6 +443,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;
@@ -431,6 +614,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);
@@ -445,8 +654,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,
@@ -467,7 +688,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);
@@ -475,7 +695,6 @@ export const settingsModalStyles = css `
 
   .settings-cost-history-delete {
     flex: 0 0 auto;
-    margin-top: -2px;
     color: var(--neutral-foreground-hint);
   }