free-coding-models 0.5.0 → 0.5.4

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

@@ -0,0 +1,138 @@
+/**
+ * @file web/src/components/atoms/HealthCell.jsx
+ * @description Detailed health/status column — matches CLI Health column.
+ * 📖 Shows the current provider status next to a Tabler icon that matches the
+ * 📖 state. The icon is color-coded so a quick glance is enough to know if
+ * 📖 the row is healthy, slow, down, blocked, etc.
+ * 📖
+ * 📖 Icon → state mapping:
+ * 📖   ✅ up           → IconChecks         (green)
+ * 📖   ⏳ timeout      → IconHourglassOff   (yellow)
+ * 📖   ⏳ pending      → IconHourglass      (yellow)
+ * 📖   🔐 AUTH FAIL    → IconLock           (red, bold)
+ * 📖   🔑 NO KEY       → NoKeyIcon          (yellow key + red slash)
+ * 📖   🔥 429          → IconFlame          (red)
+ * 📖   🚫 404          → IconError404       (red)
+ * 📖   💥 500          → IconAlertOctagon   (red)
+ * 📖   🔌 502          → IconPlug           (red)
+ * 📖   🔒 503          → IconCloudOff       (red)
+ * 📖   ⏰ 504          → IconClock          (red)
+ * 📖   ❌ unknown      → IconBan            (red)
+ */
+import {
+  IconChecks,
+  IconHourglass,
+  IconHourglassOff,
+  IconLock,
+  IconFlame,
+  IconError404,
+  IconAlertOctagon,
+  IconPlug,
+  IconCloudOff,
+  IconClock,
+  IconBan,
+} from '@tabler/icons-react'
+import NoKeyIcon from './NoKeyIcon.jsx'
+import styles from './HealthCell.module.css'
+
+const ICON_SIZE = 12
+const ICON_STROKE = 1.8
+
+// 📖 Themed icon helper: same color palette as the rest of the Health cell text,
+// 📖 so the icon + label always match. Reading the CSS var at render time keeps
+// 📖 the dark/light palettes aligned with the rest of the dashboard.
+const HEALTH_ICON_COLOR = {
+  success: 'var(--color-success, #00ff88)',
+  warning: 'var(--color-warning, #ffaa00)',
+  danger:  'var(--color-danger,  #ff4444)',
+  dim:     'var(--color-text-dim, #444)',
+}
+
+const ERROR_LABELS = {
+  '404': '404 NOT FOUND',
+  '410': '410 GONE',
+  '429': '429 TRY LATER',
+  '500': '500 ERROR',
+  '502': '502 ERROR',
+  '503': '503 ERROR',
+  '504': '504 TIMEOUT',
+}
+
+// 📖 Per-HTTP-code icon + color picker. Anything not in this map falls back to
+// 📖 the generic down-state rendering below.
+const ERROR_ICON = {
+  '429': { Icon: IconFlame,        color: HEALTH_ICON_COLOR.danger  },
+  '404': { Icon: IconError404,     color: HEALTH_ICON_COLOR.danger  },
+  '500': { Icon: IconAlertOctagon, color: HEALTH_ICON_COLOR.danger  },
+  '502': { Icon: IconPlug,         color: HEALTH_ICON_COLOR.danger  },
+  '503': { Icon: IconCloudOff,     color: HEALTH_ICON_COLOR.danger  },
+  '504': { Icon: IconClock,        color: HEALTH_ICON_COLOR.danger  },
+}
+
+function statusLabel(status, httpCode) {
+  if (status === 'noauth')  return 'NO KEY'
+  if (status === 'auth_error') return 'AUTH FAIL'
+  if (status === 'pending') return 'wait'
+  if (status === 'timeout') return 'TIMEOUT'
+  if (status === 'down') {
+    return ERROR_LABELS[httpCode] || (httpCode || 'ERROR')
+  }
+  if (status === 'up') return 'UP'
+  return '?'
+}
+
+function statusClass(status) {
+  if (status === 'noauth')     return styles.noKey
+  if (status === 'up')         return styles.up
+  if (status === 'down')       return styles.error
+  if (status === 'timeout')    return styles.warning
+  if (status === 'auth_error') return styles.errorBold
+  if (status === 'pending')    return styles.warning
+  return styles.dim
+}
+
+export default function HealthCell({ status, httpCode }) {
+  const text = statusLabel(status, httpCode)
+  const cls = statusClass(status)
+  const isNoKey = status === 'noauth'
+
+  // 📖 Pick the right icon + color combo for this state.
+  let Icon = null
+  let iconColor = null
+  if (status === 'up') {
+    Icon = IconChecks
+    iconColor = HEALTH_ICON_COLOR.success
+  } else if (status === 'timeout') {
+    Icon = IconHourglassOff
+    iconColor = HEALTH_ICON_COLOR.warning
+  } else if (status === 'pending') {
+    Icon = IconHourglass
+    iconColor = HEALTH_ICON_COLOR.warning
+  } else if (status === 'auth_error') {
+    Icon = IconLock
+    iconColor = HEALTH_ICON_COLOR.danger
+  } else if (status === 'down' && ERROR_ICON[httpCode]) {
+    Icon = ERROR_ICON[httpCode].Icon
+    iconColor = ERROR_ICON[httpCode].color
+  } else if (status === 'down') {
+    // 📖 Generic "down" fallback (no recognized HTTP code).
+    Icon = IconBan
+    iconColor = HEALTH_ICON_COLOR.danger
+  }
+
+  return (
+    <span className={`${styles.cell} ${cls}`}>
+      {isNoKey ? (
+        <NoKeyIcon size={15} title="No API key configured for this provider" />
+      ) : Icon ? (
+        <Icon
+          size={ICON_SIZE}
+          stroke={ICON_STROKE}
+          style={{ color: iconColor, flexShrink: 0 }}
+          aria-hidden="true"
+        />
+      ) : null}
+      <span className={isNoKey ? styles.noKeyText : undefined}>{text}</span>
+    </span>
+  )
+}

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

@@ -0,0 +1,56 @@
+/**
+ * @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-flex;
+  align-items: center;
+  gap: 5px;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.up         { color: #00ff88; }
+.warning    { color: #ffaa00; }
+.error      { color: #ff4444; }
+.errorBold  { color: #ff4444; font-weight: 800; }
+.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.jsx

@@ -0,0 +1,35 @@
+/**
+ * @file web/src/components/atoms/LastPingCell.jsx
+ * @description Last ping latency number with color coding + animated spinner during pings.
+ * 📖 Values are milliseconds, displayed without the `ms` suffix to keep table cells compact.
+ * 📖 During ping rounds: animated CSS spinner shows which models are being tested.
+ */
+import styles from './LastPingCell.module.css'
+
+function pingClass(ms) {
+  if (ms == null || ms === Infinity) return styles.none
+  if (ms < 500) return styles.fast
+  if (ms < 1500) return styles.medium
+  return styles.slow
+}
+
+export default function LastPingCell({ ms, isPinging }) {
+  if (ms == null) {
+    return (
+      <span className={`${styles.cell} ${styles.none}`}>
+        {isPinging ? (
+          <span className={styles.spinner} title="Testing…" />
+        ) : (
+          '—'
+        )}
+      </span>
+    )
+  }
+
+  return (
+    <span className={`${styles.cell} ${pingClass(ms)}`}>
+      <span className={styles.value}>{ms}</span>
+      {isPinging && <span className={styles.spinner} />}
+    </span>
+  )
+}

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

@@ -0,0 +1,45 @@
+.cell {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 54px;
+}
+.value { }
+.fast   { color: #00ff88; }
+.medium { color: #ffaa00; }
+.slow   { color: #ff4444; }
+.none   { color: var(--color-text-dim); }
+
+/* ── Animated spinner for active pings ── */
+@keyframes pingPulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.3; }
+}
+@keyframes pingRing {
+  0%   { transform: rotate(0deg) scale(1);   opacity: 1; }
+  70%  { transform: rotate(180deg) scale(0.6); opacity: 0.6; }
+  100% { transform: rotate(360deg) scale(1);   opacity: 1; }
+}
+.spinner {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid rgba(0, 255, 136, 0.25);
+  border-top-color: #00ff88;
+  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/MoodCell.jsx

@@ -0,0 +1,25 @@
+/**
+ * @file web/src/components/atoms/MoodCell.jsx
+ * @description Tiny verdict indicator emoji (1st column) matching CLI ❔ column.
+ * 📖 Mirrors the full Verdict as a compact emoji: 🟩 Perfect, 🟢 Normal, 🟡 Spiky,
+ * 🟠 Slow, 🔴 Very Slow, 🔥 Overloaded, 🟥 Unstable, ⚫ Not Active, ⏳ Pending.
+ */
+import styles from './MoodCell.module.css'
+
+const VERDICT_EMOJI = {
+  Perfect:     '🟩',
+  Normal:      '🟢',
+  Spiky:       '🟡',
+  Slow:        '🟠',
+  'Very Slow': '🔴',
+  Overloaded:  '🔥',
+  Unstable:    '🟥',
+  'Not Active':'⚫',
+  Pending:     '⏳',
+  Usable:      '🟠',   // fallback
+}
+
+export default function MoodCell({ verdict }) {
+  const emoji = VERDICT_EMOJI[verdict] || '❔'
+  return <span className={styles.mood}>{emoji}</span>
+}

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

@@ -0,0 +1,6 @@
+.mood {
+  display: inline-block;
+  font-size: 14px;
+  text-align: center;
+  width: 20px;
+}

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>
+}