free-coding-models 0.5.1 → 0.5.4

package/web/src/components/atoms/HealthCell.module.css

@@ -1,8 +1,16 @@
+/**
+ * @file web/src/components/atoms/HealthCell.module.css
+ * @description Styles for the HealthCell atom — matches CLI Health column typography.
+ * 📖 "NO KEY" is rendered as a louder, bold, warning-yellow chip with the NoKeyIcon
+ * 📖 sitting inline next to the label, so a missing credential jumps out at the user.
+ */
 .cell {
   font-family: var(--font-mono);
   font-size: 11px;
   font-weight: 600;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   letter-spacing: 0.2px;
   white-space: nowrap;
   overflow: hidden;
@@ -12,4 +20,37 @@
 .warning    { color: #ffaa00; }
 .error      { color: #ff4444; }
 .errorBold  { color: #ff4444; font-weight: 800; }
-.dim        { color: var(--color-text-dim); }
+.dim        { color: var(--color-text-dim); }
+
+/* 📖 The "NO KEY" treatment is intentionally louder than the other states:
+   📖   - yellow chip background instead of plain text
+   📖   - 13px font (vs 11px elsewhere in the column)
+   📖   - bold weight, slightly more letter-spacing
+   📖   - dark text on yellow for AA contrast in dark + light themes */
+.noKey {
+  background: rgba(255, 170, 0, 0.18);
+  color: #ffaa00;
+  border: 1px solid rgba(255, 170, 0, 0.45);
+  padding: 1px 7px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.4px;
+}
+.noKeyText {
+  /* 📖 Inherits the surrounding font, just bumps the weight and tracking for the
+   📖 label so the chip reads as a single badge even at narrow column widths. */
+  font-weight: 700;
+  letter-spacing: 0.4px;
+}
+
+:global([data-theme="light"]) .noKey {
+  background: rgba(255, 170, 0, 0.25);
+  border-color: rgba(255, 170, 0, 0.55);
+  color: #b86b00;
+}
+:global([data-theme="light"]) .up         { color: #008f4d; }
+:global([data-theme="light"]) .warning    { color: #b86b00; }
+:global([data-theme="light"]) .error,
+:global([data-theme="light"]) .errorBold  { color: #c02323; }
+:global([data-theme="light"]) .dim        { color: #888; }

package/web/src/components/atoms/LastPingCell.module.css

@@ -32,4 +32,14 @@
   border-radius: 50%;
   animation: pingRing 0.8s linear infinite;
   flex-shrink: 0;
+}
+
+/* 📖 Light theme: the neon green ring is unreadable on white, swap to a deep
+   📖 green ring on a soft neutral track so the spinner stays visible. */
+:global([data-theme="light"]) .fast   { color: #008f4d; }
+:global([data-theme="light"]) .medium { color: #b86b00; }
+:global([data-theme="light"]) .slow   { color: #c8143a; }
+:global([data-theme="light"]) .spinner {
+  border-color: rgba(0, 0, 0, 0.12);
+  border-top-color: #008f4d;
 }

package/web/src/components/atoms/NoKeyIcon.jsx

@@ -0,0 +1,65 @@
+/**
+ * @file web/src/components/atoms/NoKeyIcon.jsx
+ * @description Compact "no API key" indicator — yellow key with a red diagonal strikethrough.
+ *
+ * 📖 Used in two places to surface the missing-key state without duplicating the
+ * 📖 verbose "NO KEY" pill that used to live next to the model label:
+ * 📖   1. Inline next to the model name in the Model cell (replaces the old orange pill)
+ * 📖   2. Inside the Health cell, sitting next to the "NO KEY" text label
+ *
+ * 📖 The strikethrough is rendered as an inline SVG `<line>` on top of the Tabler
+ * 📖 `IconKey`. Doing it in SVG (instead of CSS) keeps the line aligned with the
+ * 📖 icon at any size and avoids the CSS overflow quirks that come with rotating
+ * 📖 a pseudo-element inside a flex parent.
+ *
+ * 📖 `size` defaults to 14px which is the same as the Tabler icons used in Settings;
+ * 📖 pass a smaller value (e.g. 11) for inline use next to model names where space is tight.
+ *
+ * @functions
+ *   → NoKeyIcon — renders a yellow key with a red strikethrough
+ * @exports NoKeyIcon
+ */
+import { IconKey } from '@tabler/icons-react'
+import styles from './NoKeyIcon.module.css'
+
+export default function NoKeyIcon({ size = 14, title = 'No API key configured' }) {
+  // 📖 Stroke width follows the rest of the dashboard's icon style (1.5).
+  // 📖 The key is yellow (warning palette); the slash is a bright red so it reads
+  // 📖 as a "blocked" state at a glance even in peripheral vision.
+  const strokeWidth = 1.5
+  const slashPadding = Math.max(1, Math.round(size * 0.07))
+
+  return (
+    <span
+      className={styles.wrapper}
+      style={{ width: `${size}px`, height: `${size}px` }}
+      role="img"
+      aria-label={title}
+      title={title}
+    >
+      <IconKey
+        size={size}
+        stroke={strokeWidth}
+        className={styles.key}
+      />
+      <svg
+        className={styles.slash}
+        width={size + slashPadding * 2}
+        height={size + slashPadding * 2}
+        viewBox={`0 0 ${size + slashPadding * 2} ${size + slashPadding * 2}`}
+        aria-hidden="true"
+        focusable="false"
+      >
+        <line
+          x1={slashPadding + 1}
+          y1={slashPadding + 1}
+          x2={slashPadding + size - 1}
+          y2={slashPadding + size - 1}
+          stroke="var(--color-danger, #ff4444)"
+          strokeWidth="1.1"
+          strokeLinecap="round"
+        />
+      </svg>
+    </span>
+  )
+}

package/web/src/components/atoms/NoKeyIcon.module.css

@@ -0,0 +1,30 @@
+/**
+ * @file web/src/components/atoms/NoKeyIcon.module.css
+ * @description Styles for the NoKeyIcon atom — yellow key with a red diagonal slash.
+ * 📖 The wrapper is a fixed-size box so the absolutely-positioned slash SVG can
+ * 📖 center itself over the icon regardless of the parent's flex alignment.
+ */
+.wrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex-shrink: 0;
+  line-height: 0;
+  vertical-align: middle;
+}
+
+.key {
+  color: #ffaa00;            /* 📖 warning yellow — same family as the rest of the dashboard */
+  position: relative;
+  z-index: 1;
+  filter: drop-shadow(0 0 1px rgba(255, 170, 0, 0.35));
+}
+
+.slash {
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  pointer-events: none;
+  z-index: 2;
+}

package/web/src/components/atoms/ProviderLogo.jsx

@@ -0,0 +1,188 @@
+/**
+ * @file web/src/components/atoms/ProviderLogo.jsx
+ * @description Renders a provider cell as [icon + text-wordmark] on a single line.
+ *
+ * @details
+ *   - Looks up the provider's assets under `web/assets/providers/<folder>/`.
+ *   - Prefers the **color** icon when available (recognizable + lively in both themes);
+ *     falls back to the **mono** (currentColor) icon when no color variant exists.
+ *   - Renders the **text** wordmark (`<id>-text.svg`) next to the icon when available.
+ *     Text wordmarks use `fill="currentColor"`, so they automatically adapt to the
+ *     active theme (white in dark mode, black in light mode) without any JS.
+ *   - For providers without a text wordmark (legacy OVH / Scaleway SVGs, or models
+ *     like Codestral that share a parent's brand), shows the graphic icon + the
+ *     human-readable caption as plain text.
+ *   - Inlines the SVGs as raw strings via `import.meta.glob(..., { as: 'raw' })` so
+ *     `currentColor` resolves against the cell's text color. Using `<img src>` would
+ *     sandbox the SVG and break the theme inheritance.
+ *   - Constrained to a single row height (~22px) via `--pl-max-h` so the cell never
+ *     grows taller than the rest of the table, regardless of which variant is shown.
+ *
+ * @param {object} props
+ * @param {string} props.providerKey - The kebab-case key from sources.js (e.g. 'nvidia', 'github-models', 'opencode-zen', 'googleai').
+ * @param {string} props.origin      - Human-readable name from sources.js, used as fallback text / tooltip.
+ * @functions
+ *   → ProviderLogo (default export)
+ *   → getSvg (internal) – raw-string lookup keyed by asset path
+ * @see  web/src/components/dashboard/ModelTable.jsx (consumer)
+ * @see  web/assets/providers/ (asset source)
+ * @see  https://lobehub.com/icons (variant inventory source)
+ */
+import styles from './ProviderLogo.module.css'
+
+// 📖 Eager raw import of every provider SVG. The key is a relative path from this
+// 📖 file; the value is the SVG markup as a string. Vite bundles it at build time.
+// 📖 Path resolves to `web/assets/providers/**/*.svg` (3 levels up from atoms/).
+const svgModules = import.meta.glob('../../../assets/providers/**/*.svg', {
+  query: '?raw',
+  import: 'default',
+  eager: true,
+})
+
+// 📖 Provider key → asset folder + variant availability.
+// 📖 `folder` MUST match the directory name under web/assets/providers/.
+// 📖 `hasColor` / `hasText` are derived from the lobe-icons static-svg inventory
+// 📖 (see https://lobehub.com/icons). `legacy` marks providers that ship with a
+// 📖 single graphic SVG and no wordmark — for those we render icon + caption.
+// 📖 Keys MUST match the `providerKey` field sent by the backend (kebab-case for
+// 📖 compound names like `github-models` / `opencode-zen` — see sources.js).
+const PROVIDER_CONFIG = {
+  nvidia:           { folder: 'nvidia',      hasColor: true,  hasText: true  },
+  groq:             { folder: 'groq',        hasColor: false, hasText: true  },
+  cerebras:         { folder: 'cerebras',    hasColor: true,  hasText: true  },
+  googleai:         { folder: 'aistudio',    hasColor: false, hasText: true  },
+  'github-models':  { folder: 'github',      hasColor: false, hasText: true  },
+  mistral:          { folder: 'mistral',     hasColor: true,  hasText: true  },
+  cloudflare:       { folder: 'cloudflare',  hasColor: true,  hasText: true  },
+  openrouter:       { folder: 'openrouter',  hasColor: false, hasText: true  },
+  sambanova:        { folder: 'sambanova',   hasColor: true,  hasText: true  },
+  // 📖 OVH's logo is itself a full wordmark ("OVHcloud") — adding the origin
+  // 📖 name "OVHcloud AI" as a caption would be redundant. `noCaption` skips
+  // 📖 the text label and lets the wordmark stand on its own. The user pointed
+  // 📖 us to https://www.ovhcloud.com/.../OVHcloud_logo.svg#ocmscloud_logo for
+  // 📖 the international wordmark; we extract the inner <symbol> and save it as
+  // 📖 a renderable <svg> with the same viewBox.
+  ovhcloud:         { folder: 'ovhcloud',    hasColor: false, hasText: false, legacy: true, noCaption: true },
+  // 📖 Scaleway's pre-existing asset is `ScalewayLogo.svg` (capitalized) inside
+  // 📖 `scalewaylogo/`. The default filename lookup would look for
+  // 📖 `scalewaylogo/scalewaylogo.svg` which doesn't exist, so `iconFile`
+  // 📖 overrides it. The wordmark IS the brand name ("Scaleway") so adding
+  // 📖 the origin name as a separate caption is redundant — `noCaption` skips it.
+  // 📖 `iconClass: 'scalewayLogo'` attaches a global class so CSS can swap to
+  // 📖 a lighter purple in dark mode (the brand #521094 is barely visible on
+  // 📖 the near-black background). SVG paths were rewritten to use
+  // 📖 `fill="currentColor"` for this CSS control.
+  scaleway:         { folder: 'scalewaylogo', iconFile: 'ScalewayLogo', iconClass: 'scalewayLogo', hasColor: false, hasText: false, legacy: true, noCaption: true },
+  zai:              { folder: 'zai',         hasColor: false, hasText: true  },
+  qwen:             { folder: 'qwen',        hasColor: true,  hasText: true  },
+  gemini:           { folder: 'gemini',      hasColor: true,  hasText: true  },
+  'opencode-zen':   { folder: 'opencode',    hasColor: false, hasText: true  },
+  // 📖 Codestral intentionally reuses Mistral's branding — the colored Mistral
+  // 📖 icon (so the brand association is visible) + the literal caption
+  // 📖 "Codestral" as plain text. `iconFile` overrides the default filename
+  // 📖 lookup (we want mistral-color, not codestral-color which doesn't exist),
+  // 📖 and `caption` overrides the origin so we don't show "Codestral" twice.
+  codestral:        { folder: 'mistral',     iconFile: 'mistral-color', hasColor: true, hasText: false, legacy: true, caption: 'Codestral' },
+}
+
+function getSvg(folder, filename) {
+  if (!folder || !filename) return null
+  return svgModules[`../../../assets/providers/${folder}/${filename}.svg`] || null
+}
+
+export default function ProviderLogo({ providerKey, origin }) {
+  const cfg = PROVIDER_CONFIG[providerKey]
+
+  // 📖 Unknown / unmapped provider: fall back to plain text. Same as the old
+  // 📖 `.providerPill` so we don't visually regress on rows we couldn't classify.
+  if (!cfg) {
+    return <span className={styles.fallback}>{origin}</span>
+  }
+
+  // 📖 Pick the best icon: prefer the colorful variant, fall back to mono.
+  // 📖 Mono uses currentColor → inherits the cell's text color → theme-adaptive.
+  // 📖 `cfg.iconFile` overrides the default filename so providers like Codestral
+  // 📖 can borrow another provider's icon (e.g. mistral-color for brand parity).
+  const iconSvg =
+    (cfg.iconFile && getSvg(cfg.folder, cfg.iconFile)) ||
+    (cfg.hasColor && getSvg(cfg.folder, `${cfg.folder}-color`)) ||
+    getSvg(cfg.folder, cfg.folder)
+
+  // 📖 Pick the text wordmark (currentColor-based, theme-adaptive).
+  const textSvg = cfg.hasText ? getSvg(cfg.folder, `${cfg.folder}-text`) : null
+
+  // ─── Layouts ─────────────────────────────────────────────────────────────
+  // 📖 Single horizontal row: [icon | gap | wordmark], all in --pl-max-h tall.
+  // 📖 `overflow: hidden` on the row is a safety net for the rare case where
+  // 📖 a particularly wide wordmark (e.g. cloudflare ~145px) still overflows
+  // 📖 the column even at 12px height — better clipped than warping the table.
+  if (iconSvg && textSvg) {
+    return (
+      <span className={styles.row} title={origin}>
+        <span
+          className={styles.icon}
+          aria-hidden="true"
+          dangerouslySetInnerHTML={{ __html: iconSvg }}
+        />
+        <span
+          className={styles.textLogo}
+          aria-hidden="true"
+          dangerouslySetInnerHTML={{ __html: textSvg }}
+        />
+      </span>
+    )
+  }
+
+  // 📖 Legacy providers (Scaleway, OVH by default): graphic only, no wordmark SVG.
+  // 📖 Show the graphic + a caption as plain text so the cell stays scannable
+  // 📖 in the table. `cfg.caption` overrides the origin name (Codestral wants
+  // 📖 its own label, not whatever sources.js returns). `cfg.noCaption` skips
+  // 📖 the caption entirely (OVH's graphic is itself a full wordmark, and
+  // 📖 Scaleway's wordmark already contains the brand name).
+  // 📖 `cfg.iconClass` (when set) is appended to the icon span — used to attach
+  // 📖 a global class for per-theme color overrides (e.g. Scaleway's lighter
+  // 📖 purple in dark mode).
+  if (iconSvg) {
+    const captionText = cfg.caption ?? origin
+    if (cfg.noCaption) {
+      const wordmarkClass = cfg.iconClass
+        ? `${styles.iconLegacyWordmark} ${cfg.iconClass}`
+        : styles.iconLegacyWordmark
+      return (
+        <span className={styles.row} title={origin}>
+          <span
+            className={wordmarkClass}
+            aria-hidden="true"
+            dangerouslySetInnerHTML={{ __html: iconSvg }}
+          />
+        </span>
+      )
+    }
+    return (
+      <span className={styles.row} title={origin}>
+        <span
+          className={styles.icon}
+          aria-hidden="true"
+          dangerouslySetInnerHTML={{ __html: iconSvg }}
+        />
+        <span className={styles.fallback}>{captionText}</span>
+      </span>
+    )
+  }
+
+  // 📖 Icon-only fallback (shouldn't happen with current assets, but safe).
+  if (textSvg) {
+    return (
+      <span className={styles.row} title={origin}>
+        <span
+          className={styles.textLogo}
+          aria-hidden="true"
+          dangerouslySetInnerHTML={{ __html: textSvg }}
+        />
+      </span>
+    )
+  }
+
+  // 📖 No assets at all (e.g. codestral without icon). Plain text fallback.
+  return <span className={styles.fallback}>{origin}</span>
+}

package/web/src/components/atoms/ProviderLogo.module.css

@@ -0,0 +1,103 @@
+/**
+ * @file web/src/components/atoms/ProviderLogo.module.css
+ * @description Styles for the inline [icon + wordmark] provider cell.
+ *
+ *   - Single horizontal row, max-height pinned so the cell never exceeds the
+ *     table's row height (matches the 7px vertical padding on .td).
+ *   - `color: var(--color-text)` propagates the active theme's text color into
+ *     inlined SVGs that use `fill="currentColor"` (mono icons + all wordmarks).
+ *   - Sized to fit within a ~150px column at default row height. Cloudflare
+ *     is the widest wordmark (~145px at 12px high) — it fits but is tight.
+ */
+
+.row {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  max-height: var(--pl-max-h, 22px);
+  overflow: hidden;
+  /* 📖 Inherited by the inlined SVGs that use `fill="currentColor"`. Set on
+     📖 the row so both the mono icon and the wordmark pick up the theme. */
+  color: var(--color-text);
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--pl-icon-h, 16px);
+  width: auto;
+  flex-shrink: 0;
+}
+/* 📖 The inlined <svg> from lobe-icons ships with `width="1em" height="1em"`.
+   📖 We override both so the wrapper's height controls the rendered size, and
+   📖 let the viewBox dictate the width (preserves each icon's aspect ratio). */
+.icon svg {
+  height: 100%;
+  width: auto;
+  display: block;
+}
+
+.textLogo {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--pl-text-h, 12px);
+  width: auto;
+  flex-shrink: 0;
+}
+.textLogo svg {
+  height: 100%;
+  width: auto;
+  display: block;
+}
+
+/* 📖 Wordmark-only variant used by OVH (and any future provider whose "icon"
+   📖 asset is itself a full horizontal wordmark). Sized to a slightly tighter
+   📖 max height than the square icons so the wordmark doesn't visually crowd
+   📖 the row. The viewBox aspect ratio of the OVH wordmark is ~6.3:1, so at
+   📖 14px high it renders ~88px wide — fits comfortably in 150px. */
+.iconLegacyWordmark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--pl-icon-h, 14px);
+  width: auto;
+  flex-shrink: 0;
+  /* 📖 Default text color is inherited from the row. Wordmarks that use
+     📖 `fill="currentColor"` (OVH) follow the theme automatically. Wordmarks
+     📖 with hardcoded fills (Scaleway) need a per-theme override — see
+     📖 `.scalewayLogo` below. */
+  color: var(--color-text);
+}
+.iconLegacyWordmark svg {
+  height: 100%;
+  width: auto;
+  display: block;
+}
+
+/* 📖 Scaleway: brand purple #521094 is the official color. It looks great on
+   📖 white but is barely visible on the dark background — the contrast is
+   📖 too low (dark purple on near-black). Bump to a lighter, more saturated
+   📖 shade in dark mode so the wordmark reads cleanly without losing brand
+   📖 identity. Paths were rewritten to use `fill="currentColor"` so this
+   📖 single CSS color property controls the whole wordmark. */
+:global(.scalewayLogo) {
+  color: #521094;
+  transition: color 200ms var(--ease-out, ease);
+}
+:global([data-theme="dark"]) :global(.scalewayLogo) {
+  color: #a78bfa;
+}
+
+.fallback {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-text);
+  white-space: nowrap;
+  /* 📖 Slight tracking so the origin name reads cleanly next to the icon. */
+  letter-spacing: 0.2px;
+}

package/web/src/components/atoms/Sparkline.jsx

@@ -2,9 +2,28 @@
  * @file web/src/components/atoms/Sparkline.jsx
  * @description SVG sparkline chart for ping history trend visualization.
  * 📖 Renders a polyline with gradient area fill and endpoint dot.
+ * 📖 Colors are theme-aware: reads CSS custom properties from :root so the
+ * 📖 stroke/dot swap to the AA-contrast palette in light mode automatically.
  */
 import { useMemo } from 'react'
 
+// 📖 Read CSS custom properties at module scope; falls back to dark-mode neon
+// 📖 values when running outside the browser (e.g. during server rendering).
+function readCssVar(name, fallback) {
+  if (typeof window === 'undefined' || !window.document?.documentElement) return fallback
+  const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim()
+  return v || fallback
+}
+
+// 📖 Threshold-based color picker that returns the current theme's variant of
+// 📖 each color. Reading the variables on every render is fine — they only
+// 📖 change when the user toggles the theme, and the memo cache key catches it.
+function pickSparkColor(lastVal) {
+  if (lastVal < 500)  return readCssVar('--color-success', '#00ff88')
+  if (lastVal < 1500) return readCssVar('--color-warning', '#ffaa00')
+  return readCssVar('--color-danger', '#ff4444')
+}
+
 export default function Sparkline({ history }) {
   const svg = useMemo(() => {
     if (!history || history.length < 2) return null
@@ -28,13 +47,13 @@ export default function Sparkline({ history }) {
       .join(' ')
 
     const lastVal = values[values.length - 1]
-    const color = lastVal < 500 ? '#00ff88' : lastVal < 1500 ? '#ffaa00' : '#ff4444'
+    const color = pickSparkColor(lastVal)
     const lastX = ((values.length - 1) * step).toFixed(1)
     const lastY = (h - ((lastVal - min) / range) * (h - 4) - 2).toFixed(1)
 
     return (
       <svg className="sparkline-svg" width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-        <polyline fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" points={points} opacity="0.8" />
+        <polyline fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="round" points={points} opacity="0.85" />
         <circle cx={lastX} cy={lastY} r="2.5" fill={color} />
       </svg>
     )

package/web/src/components/atoms/StabilityCell.module.css

@@ -6,3 +6,8 @@
 .low  { background: linear-gradient(90deg, #ff4444, #cc0000); }
 .value { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; }
 .none  { color: var(--color-text-dim); }
+
+/* 📖 Light theme: drop the neon gradients to deep, saturated versions. */
+:global([data-theme="light"]) .high { background: linear-gradient(90deg, #008f4d, #4a7a00); }
+:global([data-theme="light"]) .mid  { background: linear-gradient(90deg, #b86b00, #c45a00); }
+:global([data-theme="light"]) .low  { background: linear-gradient(90deg, #c8143a, #990000); }

package/web/src/components/atoms/StatusDot.module.css

@@ -15,3 +15,10 @@
   0%, 100% { box-shadow: 0 0 0 0 rgba(118,185,0,0.25); }
   50% { box-shadow: 0 0 0 6px transparent; }
 }
+
+/* 📖 Light theme: deep green/red for the dot so it still reads as "up"/"down"
+   📖 on a white card; the glow halo is dimmed so it doesn't blow out. */
+:global([data-theme="light"]) .up      { background: #008f4d; box-shadow: 0 0 4px rgba(0,143,77,0.35); }
+:global([data-theme="light"]) .down,
+:global([data-theme="light"]) .timeout { background: #c8143a; }
+:global([data-theme="light"]) .pending { background: #888899; }

package/web/src/components/atoms/TPSCell.module.css

@@ -35,4 +35,10 @@
   border-radius: 50%;
   animation: miniSpin 0.6s linear infinite;
   flex-shrink: 0;
-}
+}
+
+/* 📖 Light theme overrides — match AILatencyCell. */
+:global([data-theme="light"]) .fast   { color: #008f4d; }
+:global([data-theme="light"]) .slow   { color: #c8143a; }
+:global([data-theme="light"]) .badge  { color: #0e7490; }
+:global([data-theme="light"]) .runningCell { background: rgba(125, 0, 180, 0.08); }

package/web/src/components/atoms/TierBadge.module.css

@@ -16,3 +16,14 @@
 .tier_bplus { background: rgba(168,168,200,0.1); color: #a8a8c8; border: 1px solid rgba(168,168,200,0.15); }
 .tier_b     { background: rgba(128,128,152,0.1); color: #808098; border: 1px solid rgba(128,128,152,0.15); }
 .tier_c     { background: rgba(96,96,120,0.1); color: #606078; border: 1px solid rgba(96,96,120,0.15); }
+
+/* 📖 Light theme: darker, AA-contrast tier text colors. Borders stay the same
+   📖 hue so the badge still feels "tier-colored", just more legible. */
+:global([data-theme="light"]) .tier_splus  { color: #7a5e00; border-color: rgba(176,136,0,0.4); }
+:global([data-theme="light"]) .tier_s      { color: #a14a00; border-color: rgba(196,90,0,0.4); }
+:global([data-theme="light"]) .tier_aplus  { color: #005d8a; border-color: rgba(0,115,168,0.4); }
+:global([data-theme="light"]) .tier_a      { color: #1f7a3e; border-color: rgba(31,122,62,0.4); }
+:global([data-theme="light"]) .tier_aminus { color: #2f7a2f; border-color: rgba(47,122,47,0.4); }
+:global([data-theme="light"]) .tier_bplus  { color: #4a4a72; border-color: rgba(90,90,138,0.4); }
+:global([data-theme="light"]) .tier_b      { color: #555566; border-color: rgba(85,85,102,0.4); }
+:global([data-theme="light"]) .tier_c      { color: #5a5a6a; border-color: rgba(106,106,122,0.4); }

package/web/src/components/atoms/Toast.module.css

@@ -18,6 +18,12 @@
 .error   { border-left: 4px solid #ff4444; }
 .warning { border-left: 4px solid #ffaa00; }
 .info    { border-left: 4px solid #06b6d4; }
+
+/* 📖 Light theme: deeper accent bars so they pop on the white toast card. */
+:global([data-theme="light"]) .success { border-left-color: #008f4d; }
+:global([data-theme="light"]) .error   { border-left-color: #c8143a; }
+:global([data-theme="light"]) .warning { border-left-color: #b86b00; }
+:global([data-theme="light"]) .info    { border-left-color: #0e7490; }
 .icon    { font-size: 18px; flex-shrink: 0; }
 .message { flex: 1; }
 .close {

package/web/src/components/atoms/VerdictBadge.module.css

@@ -26,3 +26,15 @@
 .unstable   { background: rgba(204,0,0,0.12); color: #cc0000; }
 .notactive  { background: rgba(85,85,112,0.12); color: #555570; }
 .pending    { background: rgba(68,68,96,0.1); color: #444460; }
+
+/* 📖 Light theme: deeper, more saturated text colors. Backgrounds stay
+   📖 the same since they are translucent and adapt to the white card. */
+:global([data-theme="light"]) .perfect    { color: #008f4d; background: rgba(0,143,77,0.10); }
+:global([data-theme="light"]) .normal     { color: #4a7a00; background: rgba(74,122,0,0.10); }
+:global([data-theme="light"]) .slow       { color: #b86b00; background: rgba(184,107,0,0.10); }
+:global([data-theme="light"]) .spiky      { color: #c45000; background: rgba(196,80,0,0.10); }
+:global([data-theme="light"]) .veryslow   { color: #c8143a; background: rgba(200,20,58,0.10); }
+:global([data-theme="light"]) .overloaded { color: #b8101f; background: rgba(184,16,31,0.10); }
+:global([data-theme="light"]) .unstable   { color: #990000; background: rgba(153,0,0,0.10); }
+:global([data-theme="light"]) .notactive  { color: #5a5a72; }
+:global([data-theme="light"]) .pending    { color: #5a5a8a; }