nastechai-desktop 18.1.0

package/src/themes/color.ts

@@ -0,0 +1,142 @@
+/**
+ * Small color helpers shared by the theme context (synthesised light variants)
+ * and the VS Code theme converter (token → seed mapping).
+ *
+ * Everything works in 6-digit `#rrggbb`. `normalizeHex` is the front door for
+ * untrusted input (VS Code themes use `#rgb`, `#rgba`, `#rrggbbaa`, and named
+ * tokens), flattening alpha over a backdrop so downstream math stays simple.
+ */
+
+export function hexToRgb(hex: string): [number, number, number] | null {
+  const clean = hex.trim().replace(/^#/, '')
+
+  if (!/^[0-9a-f]{6}$/i.test(clean)) {
+    return null
+  }
+
+  return [0, 2, 4].map(i => parseInt(clean.slice(i, i + 2), 16)) as [number, number, number]
+}
+
+export const rgbToHex = ([r, g, b]: [number, number, number]): string =>
+  `#${[r, g, b].map(n => Math.round(Math.min(255, Math.max(0, n))).toString(16).padStart(2, '0')).join('')}`
+
+export function mix(a: string, b: string, amount: number): string {
+  const ar = hexToRgb(a)
+  const br = hexToRgb(b)
+
+  return ar && br
+    ? rgbToHex([ar[0] + (br[0] - ar[0]) * amount, ar[1] + (br[1] - ar[1]) * amount, ar[2] + (br[2] - ar[2]) * amount])
+    : a
+}
+
+const linearize = (channel: number): number =>
+  channel <= 0.03928 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
+
+/** WCAG relative luminance (gamma-corrected), 0..1. */
+export function relativeLuminance(hex: string): number {
+  const rgb = hexToRgb(hex)
+
+  if (!rgb) {
+    return 0
+  }
+
+  const [r, g, b] = rgb.map(v => linearize(v / 255))
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+/** WCAG contrast ratio (1..21) between two hex colors. */
+export function contrastRatio(a: string, b: string): number {
+  const la = relativeLuminance(a)
+  const lb = relativeLuminance(b)
+
+  return la >= lb ? (la + 0.05) / (lb + 0.05) : (lb + 0.05) / (la + 0.05)
+}
+
+/** Returns a readable foreground (#161616 or #ffffff) for a background hex. */
+export function readableOn(hex: string): string {
+  return relativeLuminance(hex) > 0.58 ? '#161616' : '#ffffff'
+}
+
+/**
+ * Guarantee `color` reads against `bg`: if it's below `min` contrast, mix it
+ * toward white (on a dark bg) or black (on a light bg) in steps until it clears,
+ * keeping the hue as much as possible. Used so imported accents never collapse
+ * into a near-background sidebar (the "invisible label" case).
+ */
+export function ensureContrast(color: string, bg: string, min: number): string {
+  if (contrastRatio(color, bg) >= min) {
+    return color
+  }
+
+  const towards = relativeLuminance(bg) < 0.5 ? '#ffffff' : '#000000'
+  let best = color
+
+  for (let amount = 0.2; amount <= 1.0001; amount += 0.2) {
+    best = mix(color, towards, Math.min(amount, 1))
+
+    if (contrastRatio(best, bg) >= min) {
+      return best
+    }
+  }
+
+  return best
+}
+
+/** Perceptual-ish luminance in 0..1 (naive, for light/dark bucketing). */
+export function luminance(hex: string): number {
+  const rgb = hexToRgb(hex)
+
+  if (!rgb) {
+    return 0
+  }
+
+  const [r, g, b] = rgb.map(v => v / 255)
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+/**
+ * Coerce any CSS hex color VS Code themes throw at us into a flat 6-digit
+ * `#rrggbb`, compositing alpha over `backdrop`. Accepts `#rgb`, `#rgba`,
+ * `#rrggbb`, `#rrggbbaa` (with or without the leading `#`). Returns null for
+ * non-hex values (named colors, `rgb()`, etc.) so callers can fall back.
+ */
+export function normalizeHex(input: string | undefined | null, backdrop = '#000000'): string | null {
+  if (typeof input !== 'string') {
+    return null
+  }
+
+  let clean = input.trim().replace(/^#/, '')
+
+  // Expand shorthand (#rgb / #rgba) to full width.
+  if (clean.length === 3 || clean.length === 4) {
+    clean = clean
+      .split('')
+      .map(ch => ch + ch)
+      .join('')
+  }
+
+  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(clean)) {
+    return null
+  }
+
+  const rgb = hexToRgb(`#${clean.slice(0, 6)}`)
+
+  if (!rgb) {
+    return null
+  }
+
+  if (clean.length === 6) {
+    return rgbToHex(rgb)
+  }
+
+  const alpha = parseInt(clean.slice(6, 8), 16) / 255
+  const base = hexToRgb(backdrop) ?? [0, 0, 0]
+
+  return rgbToHex([
+    base[0] + (rgb[0] - base[0]) * alpha,
+    base[1] + (rgb[1] - base[1]) * alpha,
+    base[2] + (rgb[2] - base[2]) * alpha
+  ])
+}

package/src/themes/context.tsx

@@ -0,0 +1,339 @@
+/**
+ * Desktop theme context.
+ *
+ * Applies the active theme as CSS custom properties on :root so every
+ * Tailwind utility that references a color or font-family token picks up
+ * the change automatically.
+ *
+ * Mode (light/dark/system) controls brightness; skin controls accent.
+ * The two are persisted independently. Shift+X toggles light/dark.
+ */
+
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+
+import { matchesQuery, useMediaQuery } from '@/hooks/use-media-query'
+import { persistString, persistStringRecord, storedString, storedStringRecord } from '@/lib/storage'
+
+import { BUILTIN_THEME_LIST, BUILTIN_THEMES, DEFAULT_SKIN_NAME, DEFAULT_TYPOGRAPHY, nousTheme } from './presets'
+import type { DesktopTheme, DesktopThemeColors } from './types'
+
+const SKIN_KEY = 'NASTECH-desktop-theme-v2'
+const MODE_KEY = 'NASTECH-desktop-mode-v1'
+// Per-profile skin + light/dark mode assignments: { [profileKey]: value }.
+// A profile inherits the global default until it's given its own assignment.
+const PROFILE_SKINS_KEY = 'NASTECH-desktop-profile-themes-v1'
+const PROFILE_MODES_KEY = 'NASTECH-desktop-profile-modes-v1'
+const RETIRED_SKINS = new Set(['nastech-light', 'default', 'gold'])
+
+export type ThemeMode = 'light' | 'dark' | 'system'
+
+const INJECTED_FONT_URLS = new Set<string>()
+
+const resolveMode = (mode: ThemeMode, systemDark = matchesQuery('(prefers-color-scheme: dark)')): 'light' | 'dark' =>
+  mode === 'system' ? (systemDark ? 'dark' : 'light') : mode
+
+const normalizeSkin = (name: string | null): string =>
+  name && BUILTIN_THEMES[name] && !RETIRED_SKINS.has(name) ? name : DEFAULT_SKIN_NAME
+
+const normalizeMode = (value: string | null): ThemeMode =>
+  value === 'light' || value === 'dark' || value === 'system' ? value : 'light'
+
+// ─── Per-profile appearance persistence ─────────────────────────────────────
+// Skin and mode are each stored per profile. "default" is the legacy global
+// slot — it reads/writes the global key directly. Named profiles get their own
+// entry and fall back to the global until assigned, so unassigned profiles and
+// pre-per-profile installs are unaffected.
+const profilePref = <T extends string>(record: string, legacy: string, normalize: (v: string | null) => T) => ({
+  resolve: (profile: string): T => normalize(storedStringRecord(record)[profile] ?? storedString(legacy)),
+  assign: (profile: string, value: T): void => {
+    if (profile === 'default') {
+      persistString(legacy, value)
+    } else {
+      persistStringRecord(record, { ...storedStringRecord(record), [profile]: value })
+    }
+  }
+})
+
+export const skinPref = profilePref(PROFILE_SKINS_KEY, SKIN_KEY, normalizeSkin)
+export const modePref = profilePref(PROFILE_MODES_KEY, MODE_KEY, normalizeMode)
+
+// ─── Color math (for synthesised light variants of dark-only skins) ────────
+
+function hexToRgb(hex: string): [number, number, number] | null {
+  const clean = hex.trim().replace(/^#/, '')
+
+  if (!/^[0-9a-f]{6}$/i.test(clean)) {
+    return null
+  }
+
+  return [0, 2, 4].map(i => parseInt(clean.slice(i, i + 2), 16)) as [number, number, number]
+}
+
+const rgbToHex = ([r, g, b]: [number, number, number]) =>
+  `#${[r, g, b].map(n => Math.round(n).toString(16).padStart(2, '0')).join('')}`
+
+function mix(a: string, b: string, amount: number): string {
+  const ar = hexToRgb(a)
+  const br = hexToRgb(b)
+
+  return ar && br
+    ? rgbToHex([ar[0] + (br[0] - ar[0]) * amount, ar[1] + (br[1] - ar[1]) * amount, ar[2] + (br[2] - ar[2]) * amount])
+    : a
+}
+
+function readableOn(hex: string): string {
+  const rgb = hexToRgb(hex)
+
+  if (!rgb) {
+    return '#ffffff'
+  }
+
+  const [r, g, b] = rgb.map(v => {
+    const c = v / 255
+
+    return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
+  })
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.58 ? '#161616' : '#ffffff'
+}
+
+function synthLightColors(seed: DesktopTheme): DesktopThemeColors {
+  const accent = seed.colors.ring || seed.colors.primary
+  const soft = mix('#ffffff', accent, 0.1)
+  const softer = mix('#ffffff', accent, 0.06)
+  const border = mix('#ececef', accent, 0.14)
+  const midground = seed.colors.midground ?? accent
+
+  return {
+    background: '#ffffff',
+    foreground: '#161616',
+    card: '#ffffff',
+    cardForeground: '#161616',
+    muted: softer,
+    mutedForeground: mix('#6b6b70', accent, 0.16),
+    popover: '#ffffff',
+    popoverForeground: '#161616',
+    primary: accent,
+    primaryForeground: readableOn(accent),
+    secondary: soft,
+    secondaryForeground: mix('#2a2a2a', accent, 0.34),
+    accent: soft,
+    accentForeground: mix('#2a2a2a', accent, 0.34),
+    border,
+    input: mix('#e2e2e6', accent, 0.18),
+    ring: accent,
+    midground,
+    midgroundForeground: readableOn(midground),
+    destructive: '#b94a3a',
+    destructiveForeground: '#ffffff',
+    sidebarBackground: mix('#fafafa', accent, 0.05),
+    sidebarBorder: border,
+    userBubble: soft,
+    userBubbleBorder: border
+  }
+}
+
+/** Returns the seed palette for a given skin + mode (no overrides applied). */
+export function getBaseColors(skinName: string, mode: 'light' | 'dark'): DesktopThemeColors {
+  const seed = BUILTIN_THEMES[skinName] ?? nousTheme
+
+  if (mode === 'dark') {
+    return seed.darkColors ?? seed.colors
+  }
+
+  return seed.darkColors ? seed.colors : synthLightColors(seed)
+}
+
+function deriveTheme(skinName: string, mode: 'light' | 'dark'): DesktopTheme {
+  const seed = BUILTIN_THEMES[skinName] ?? nousTheme
+
+  return {
+    ...seed,
+    name: `${skinName}-${mode}`,
+    label: `${seed.label} ${mode === 'light' ? 'Light' : 'Dark'}`,
+    description: `${seed.label} ${mode} palette`,
+    colors: getBaseColors(skinName, mode)
+  }
+}
+
+/**
+ * Some palettes intentionally keep a bright background even when
+ * `mode === 'dark'`, so we shouldn't apply the `.dark` class. Decide from
+ * the actual background luminance.
+ */
+function renderedModeFor(colors: DesktopThemeColors, mode: 'light' | 'dark'): 'light' | 'dark' {
+  const rgb = hexToRgb(colors.background)
+
+  if (!rgb) {
+    return mode
+  }
+
+  const [r, g, b] = rgb.map(v => v / 255)
+
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b > 0.5 ? 'light' : 'dark'
+}
+
+// ─── CSS application ────────────────────────────────────────────────────────
+
+// Per-mode mix knobs. Light/dark fallbacks live in styles.css `:root` /
+// `:root.dark`; setting them inline keeps active-skin overrides surviving
+// the boot-time paint.
+const mixesFor = (isDark: boolean): Record<string, string> => ({
+  '--theme-mix-chrome': isDark ? '74%' : '92%',
+  '--theme-mix-sidebar': '100%',
+  '--theme-mix-card': isDark ? '38%' : '22%',
+  '--theme-mix-elevated': isDark ? '46%' : '28%',
+  '--theme-mix-bubble': isDark ? '46%' : '0%'
+})
+
+function applyTheme(theme: DesktopTheme, mode: 'light' | 'dark') {
+  if (typeof document === 'undefined') {
+    return
+  }
+
+  const root = document.documentElement
+  const c = theme.colors
+  const typo = { ...DEFAULT_TYPOGRAPHY, ...nousTheme.typography, ...theme.typography }
+  const rendered = renderedModeFor(c, mode)
+  const isDark = rendered === 'dark'
+  const midground = c.midground ?? c.ring
+  const skinName = theme.name.endsWith(`-${mode}`) ? theme.name.slice(0, -mode.length - 1) : theme.name
+
+  root.style.setProperty('color-scheme', rendered)
+  root.dataset.NASTECHTheme = skinName
+  root.dataset.NASTECHMode = rendered
+  root.classList.toggle('dark', isDark)
+
+  // Brand seeds feed every glass + shadcn token via `color-mix()` in styles.css.
+  const seeds: Record<string, string> = {
+    '--theme-foreground': c.foreground,
+    '--theme-primary': c.primary,
+    '--theme-secondary': c.secondary,
+    '--theme-accent-soft': c.accent,
+    '--theme-midground': midground,
+    '--theme-warm': c.primary,
+    '--theme-background-seed': c.background,
+    '--theme-sidebar-seed': c.sidebarBackground ?? c.background,
+    '--theme-card-seed': c.card,
+    '--theme-elevated-seed': c.popover,
+    '--theme-bubble-seed': c.userBubble ?? c.popover
+  }
+
+  // shadcn/Tailwind tokens that aren't derived from the seed chain.
+  const palette: Record<string, string> = {
+    '--dt-primary-foreground': c.primaryForeground,
+    '--dt-secondary-foreground': c.secondaryForeground,
+    '--dt-accent-foreground': c.accentForeground,
+    '--dt-border': c.border,
+    '--dt-input': c.input,
+    '--dt-ring': c.ring,
+    '--dt-muted': c.muted,
+    '--dt-midground-foreground': c.midgroundForeground ?? readableOn(midground),
+    '--dt-composer-ring': c.composerRing ?? midground,
+    '--dt-destructive': c.destructive,
+    '--dt-destructive-foreground': c.destructiveForeground,
+    '--dt-sidebar-border': c.sidebarBorder ?? c.border,
+    '--dt-user-bubble-border': c.userBubbleBorder ?? c.border,
+    '--dt-font-sans': typo.fontSans,
+    '--dt-font-mono': typo.fontMono,
+    '--noise-opacity-mul': isDark ? 'calc(0.04 / 0.21)' : 'calc(0.34 / 0.21)'
+  }
+
+  for (const [k, v] of Object.entries({ ...seeds, ...mixesFor(isDark), ...palette })) {
+    root.style.setProperty(k, v)
+  }
+
+  window.NASTECHDesktop?.setTitleBarTheme?.({
+    background: c.background,
+    foreground: c.foreground
+  })
+
+  if (typo.fontUrl && !INJECTED_FONT_URLS.has(typo.fontUrl)) {
+    const link = document.createElement('link')
+    link.rel = 'stylesheet'
+    link.href = typo.fontUrl
+    link.dataset.NASTECHThemeFont = 'true'
+    document.head.appendChild(link)
+    INJECTED_FONT_URLS.add(typo.fontUrl)
+  }
+}
+
+// Boot-time paint to avoid a flash before <ThemeProvider> mounts.
+if (typeof window !== 'undefined') {
+  const skin = normalizeSkin(window.localStorage.getItem(SKIN_KEY))
+  const mode = (window.localStorage.getItem(MODE_KEY) as ThemeMode) ?? 'light'
+  const resolved = resolveMode(mode)
+  applyTheme(deriveTheme(skin, resolved), resolved)
+}
+
+// ─── Context ────────────────────────────────────────────────────────────────
+
+interface ThemeContextValue {
+  theme: DesktopTheme
+  themeName: string
+  mode: ThemeMode
+  resolvedMode: 'light' | 'dark'
+  availableThemes: Array<{ name: string; label: string; description: string }>
+  setTheme: (name: string) => void
+  setMode: (mode: ThemeMode) => void
+}
+
+const SKIN_LIST = BUILTIN_THEME_LIST.map(({ name, label, description }) => ({ name, label, description }))
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: nousTheme,
+  themeName: DEFAULT_SKIN_NAME,
+  mode: 'light',
+  resolvedMode: 'light',
+  availableThemes: SKIN_LIST,
+  setTheme: () => {},
+  setMode: () => {}
+})
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [themeName, setThemeNameState] = useState(() =>
+    typeof window === 'undefined' ? DEFAULT_SKIN_NAME : normalizeSkin(window.localStorage.getItem(SKIN_KEY))
+  )
+
+  const [mode, setModeState] = useState<ThemeMode>(() =>
+    typeof window === 'undefined' ? 'light' : ((window.localStorage.getItem(MODE_KEY) as ThemeMode) ?? 'light')
+  )
+
+  const systemDark = useMediaQuery('(prefers-color-scheme: dark)')
+  const resolvedMode = resolveMode(mode, systemDark)
+  const activeTheme = useMemo(() => deriveTheme(themeName, resolvedMode), [themeName, resolvedMode])
+
+  useEffect(() => applyTheme(activeTheme, resolvedMode), [activeTheme, resolvedMode])
+
+  const setTheme = useCallback((name: string) => {
+    const next = normalizeSkin(name)
+    setThemeNameState(next)
+    window.localStorage.setItem(SKIN_KEY, next)
+  }, [])
+
+  const setMode = useCallback((next: ThemeMode) => {
+    setModeState(next)
+    window.localStorage.setItem(MODE_KEY, next)
+  }, [])
+
+  // The light/dark toggle (Shift+X by default) is owned by the keybind runtime
+  // (`appearance.toggleMode`) so it shows up in the hotkey map and is rebindable.
+
+  const value = useMemo<ThemeContextValue>(
+    () => ({ theme: activeTheme, themeName, mode, resolvedMode, availableThemes: SKIN_LIST, setTheme, setMode }),
+    [activeTheme, themeName, mode, resolvedMode, setTheme, setMode]
+  )
+
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+}
+
+export const useTheme = (): ThemeContextValue => useContext(ThemeContext)
+
+/** Sync the desktop skin with the active NasTech backend theme on connect. */
+export function useSyncThemeFromBackend(backendThemeName: string | undefined, setTheme: (name: string) => void) {
+  useEffect(() => {
+    if (backendThemeName && BUILTIN_THEMES[backendThemeName]) {
+      setTheme(backendThemeName)
+    }
+  }, [backendThemeName, setTheme])
+}

package/src/themes/index.ts

@@ -0,0 +1,3 @@
+export { ThemeProvider, useSyncThemeFromBackend, useTheme } from './context'
+export { BUILTIN_THEME_LIST, BUILTIN_THEMES, DEFAULT_SKIN_NAME } from './presets'
+export type { DesktopTheme, DesktopThemeColors, DesktopThemeTypography } from './types'

package/src/themes/install.test.ts

@@ -0,0 +1,119 @@
+import { describe, expect, it } from 'vitest'
+
+import type { DesktopMarketplaceThemeResult } from '@/global'
+
+import { luminance } from './color'
+import { buildThemeFromMarketplace } from './install'
+
+const themeJson = (type: 'light' | 'dark', background: string, foreground: string) =>
+  JSON.stringify({ type, colors: { 'editor.background': background, 'editor.foreground': foreground } })
+
+// A full base-8 ANSI set keyed off `red` so each variant is distinguishable.
+const ansiColors = (red: string) => ({
+  'terminal.ansiBlack': '#000000',
+  'terminal.ansiRed': red,
+  'terminal.ansiGreen': '#00aa00',
+  'terminal.ansiYellow': '#aaaa00',
+  'terminal.ansiBlue': '#0000aa',
+  'terminal.ansiMagenta': '#aa00aa',
+  'terminal.ansiCyan': '#00aaaa',
+  'terminal.ansiWhite': '#aaaaaa'
+})
+
+const themeJsonWithAnsi = (type: 'light' | 'dark', background: string, foreground: string, red: string) =>
+  JSON.stringify({ type, colors: { 'editor.background': background, 'editor.foreground': foreground, ...ansiColors(red) } })
+
+describe('buildThemeFromMarketplace', () => {
+  it('folds a light + dark variant into one family with both slots', () => {
+    const result: DesktopMarketplaceThemeResult = {
+      extensionId: 'ryanolsonx.solarized',
+      displayName: 'Solarized',
+      themes: [
+        { label: 'Solarized Light', uiTheme: 'vs', contents: themeJson('light', '#fdf6e3', '#586e75') },
+        { label: 'Solarized Dark', uiTheme: 'vs-dark', contents: themeJson('dark', '#002b36', '#93a1a1') }
+      ]
+    }
+
+    const theme = buildThemeFromMarketplace(result)
+
+    expect(theme.label).toBe('Solarized')
+    expect(theme.name).toBe('vsc-solarized')
+    // colors = the light variant, darkColors = the dark variant → the toggle works.
+    expect(theme.colors.background).toBe('#fdf6e3')
+    expect(theme.darkColors?.background).toBe('#002b36')
+    expect(luminance(theme.colors.background)).toBeGreaterThan(0.5)
+    expect(luminance(theme.darkColors!.background)).toBeLessThan(0.5)
+  })
+
+  it('orders variants by contribution regardless of light/dark sequence', () => {
+    const result: DesktopMarketplaceThemeResult = {
+      extensionId: 'github.github-vscode-theme',
+      displayName: 'GitHub Theme',
+      themes: [
+        { label: 'GitHub Dark Default', uiTheme: 'vs-dark', contents: themeJson('dark', '#0d1117', '#e6edf3') },
+        { label: 'GitHub Light Default', uiTheme: 'vs', contents: themeJson('light', '#ffffff', '#1f2328') }
+      ]
+    }
+
+    const theme = buildThemeFromMarketplace(result)
+    expect(theme.colors.background).toBe('#ffffff')
+    expect(theme.darkColors?.background).toBe('#0d1117')
+  })
+
+  it('fills both slots with the sole palette for a single-variant extension', () => {
+    const result: DesktopMarketplaceThemeResult = {
+      extensionId: 'dracula-theme.theme-dracula',
+      displayName: 'Dracula',
+      themes: [{ label: 'Dracula', uiTheme: 'vs-dark', contents: themeJson('dark', '#282a36', '#f8f8f2') }]
+    }
+
+    const theme = buildThemeFromMarketplace(result)
+    expect(theme.colors.background).toBe('#282a36')
+    expect(theme.darkColors).toBe(theme.colors)
+  })
+
+  it('keys each variant terminal palette to its mode (terminal / darkTerminal)', () => {
+    const result: DesktopMarketplaceThemeResult = {
+      extensionId: 'ryanolsonx.solarized',
+      displayName: 'Solarized',
+      themes: [
+        { label: 'Solarized Light', uiTheme: 'vs', contents: themeJsonWithAnsi('light', '#fdf6e3', '#586e75', '#dc322f') },
+        { label: 'Solarized Dark', uiTheme: 'vs-dark', contents: themeJsonWithAnsi('dark', '#002b36', '#93a1a1', '#ff5f56') }
+      ]
+    }
+
+    const theme = buildThemeFromMarketplace(result)
+    expect(theme.terminal?.red).toBe('#dc322f')
+    expect(theme.darkTerminal?.red).toBe('#ff5f56')
+  })
+
+  it('reuses the sole variant terminal palette for both modes', () => {
+    const result: DesktopMarketplaceThemeResult = {
+      extensionId: 'dracula-theme.theme-dracula',
+      displayName: 'Dracula',
+      themes: [{ label: 'Dracula', uiTheme: 'vs-dark', contents: themeJsonWithAnsi('dark', '#282a36', '#f8f8f2', '#ff5555') }]
+    }
+
+    const theme = buildThemeFromMarketplace(result)
+    expect(theme.terminal?.red).toBe('#ff5555')
+    expect(theme.darkTerminal?.red).toBe('#ff5555')
+  })
+
+  it('leaves terminal slots unset when no variant ships an ANSI palette', () => {
+    const result: DesktopMarketplaceThemeResult = {
+      extensionId: 'x.plain',
+      displayName: 'Plain',
+      themes: [{ label: 'Plain', uiTheme: 'vs-dark', contents: themeJson('dark', '#101010', '#fafafa') }]
+    }
+
+    const theme = buildThemeFromMarketplace(result)
+    expect(theme.terminal).toBeUndefined()
+    expect(theme.darkTerminal).toBeUndefined()
+  })
+
+  it('throws when the extension contributes no themes', () => {
+    expect(() =>
+      buildThemeFromMarketplace({ extensionId: 'x.y', displayName: 'X', themes: [] })
+    ).toThrow(/does not contribute/i)
+  })
+})