nastechai-desktop 18.1.0

package/src/themes/install.ts

@@ -0,0 +1,95 @@
+/**
+ * Install desktop themes from external sources.
+ *
+ * The heavy lifting (network + .vsix unzip) lives in the Electron main process
+ * (`electron/vscode-marketplace.cjs`), reached via `window.NASTECHDesktop.themes`.
+ * Main hands back the raw theme JSON; we parse + convert + persist here so the
+ * conversion stays in one unit-testable place.
+ */
+
+import type { DesktopMarketplaceThemeResult } from '@/global'
+
+import type { DesktopTheme } from './types'
+import { installUserTheme } from './user-themes'
+import { convertVscodeColorTheme, parseVscodeTheme, vscodeThemeSlug } from './vscode'
+
+/** A `publisher.extension` id, e.g. `dracula-theme.theme-dracula`. */
+export const MARKETPLACE_ID_RE = /^[\w-]+\.[\w-]+$/
+
+/** Parse + convert + persist a pasted VS Code theme JSON. */
+export function installVscodeThemeFromText(
+  text: string,
+  opts?: { label?: string; source?: string }
+): DesktopTheme {
+  const raw = parseVscodeTheme(text)
+  const { theme } = convertVscodeColorTheme(raw, opts)
+
+  return installUserTheme(theme)
+}
+
+/**
+ * Fold every color theme an extension contributes into ONE desktop theme family.
+ *
+ * Many extensions ship a light *and* a dark variant (GitHub, Solarized, Winter
+ * is Coming…). Rather than install them as separate flat entries — which made
+ * the light/dark toggle a no-op and let "install in dark mode" land on the light
+ * variant — we map the first light variant onto `colors` and the first dark
+ * variant onto `darkColors`. The result is a single picker entry whose light/dark
+ * toggle switches between the real variants. A single-variant extension fills
+ * both slots with its one palette (the toggle is a no-op, as it must be).
+ */
+export function buildThemeFromMarketplace(result: DesktopMarketplaceThemeResult): DesktopTheme {
+  if (!result.themes.length) {
+    throw new Error(`"${result.extensionId}" does not contribute any color themes.`)
+  }
+
+  const variants = result.themes.map(file => {
+    const raw = parseVscodeTheme(file.contents)
+    const label = file.label || raw.name || result.displayName
+    const { mode, theme } = convertVscodeColorTheme(raw, { label, source: result.extensionId })
+
+    return { mode, palette: theme.colors, terminal: theme.terminal }
+  })
+
+  const fallback = variants[0]
+  const light = variants.find(variant => variant.mode === 'light') ?? fallback
+  const dark = variants.find(variant => variant.mode === 'dark') ?? fallback
+
+  // The terminal ANSI palette tracks the painted variant the same way colors do
+  // (light → terminal, dark → darkTerminal); each falls back to the other so a
+  // single-variant import still themes the terminal in both modes.
+  const terminal = light.terminal ?? dark.terminal
+  const darkTerminal = dark.terminal ?? light.terminal
+
+  return {
+    name: vscodeThemeSlug(result.displayName),
+    label: result.displayName,
+    description: `VS Code · ${result.extensionId}`,
+    colors: light.palette,
+    darkColors: dark.palette,
+    ...(terminal ? { terminal } : {}),
+    ...(darkTerminal ? { darkTerminal } : {})
+  }
+}
+
+/**
+ * Download a Marketplace extension and install the theme family it contributes
+ * (see `buildThemeFromMarketplace`). Returns the single installed theme.
+ */
+export async function installVscodeThemeFromMarketplace(id: string): Promise<DesktopTheme> {
+  const trimmed = id.trim()
+
+  if (!MARKETPLACE_ID_RE.test(trimmed)) {
+    throw new Error('Expected a Marketplace id like "publisher.extension".')
+  }
+
+  const api = window.NASTECHDesktop?.themes
+
+  if (!api?.fetchMarketplace) {
+    throw new Error('Marketplace install is only available in the desktop app.')
+  }
+
+  const result = await api.fetchMarketplace(trimmed)
+
+  return installUserTheme(buildThemeFromMarketplace(result))
+}

package/src/themes/presets.test.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from 'vitest'
+
+import { BUILTIN_THEME_LIST, DEFAULT_TYPOGRAPHY, EMOJI_FALLBACK } from './presets'
+
+// #40364: none of the UI text/mono fonts carry emoji glyphs, so every font
+// stack must end with a color-emoji fallback or emoji render as tofu on
+// platforms whose default font lacks them (e.g. Linux).
+describe('theme typography emoji fallback (#40364)', () => {
+  const stacks: Array<[string, string]> = [
+    ['DEFAULT_TYPOGRAPHY.fontSans', DEFAULT_TYPOGRAPHY.fontSans],
+    ['DEFAULT_TYPOGRAPHY.fontMono', DEFAULT_TYPOGRAPHY.fontMono],
+    // A theme may override only fontMono (fontSans then falls back to the
+    // default, which already carries the emoji stack), so skip undefined.
+    ...BUILTIN_THEME_LIST.flatMap(theme =>
+      (
+        [
+          [`${theme.name}.fontSans`, theme.typography?.fontSans],
+          [`${theme.name}.fontMono`, theme.typography?.fontMono]
+        ] as Array<[string, string | undefined]>
+      ).filter((entry): entry is [string, string] => typeof entry[1] === 'string')
+    )
+  ]
+
+  it.each(stacks)('%s includes a color-emoji font', (_label, stack) => {
+    expect(stack).toMatch(/Apple Color Emoji|Segoe UI Emoji|Noto Color Emoji|(^|,\s*)emoji\b/)
+  })
+
+  it('EMOJI_FALLBACK lists the major platform emoji fonts', () => {
+    expect(EMOJI_FALLBACK).toContain('Apple Color Emoji')
+    expect(EMOJI_FALLBACK).toContain('Segoe UI Emoji')
+    expect(EMOJI_FALLBACK).toContain('Noto Color Emoji')
+  })
+})

package/src/themes/presets.ts

@@ -0,0 +1,293 @@
+/**
+ * Built-in desktop themes. Names match the CLI skins / dashboard presets.
+ * Add new themes here — no code changes needed elsewhere.
+ */
+
+import type { DesktopTheme, DesktopThemeTypography } from './types'
+
+// Color-emoji fonts to append to every stack as a last resort. None of the UI
+// text/mono fonts carry emoji glyphs, so without this emoji render as tofu
+// boxes on platforms whose default text font lacks them (e.g. Linux/#40364).
+// Covers macOS, Windows, Linux, plus the `emoji` generic for anything else.
+export const EMOJI_FALLBACK =
+  '"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", emoji'
+
+const SYSTEM_SANS =
+  '"Segoe WPC", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif, ' +
+  EMOJI_FALLBACK
+
+const SYSTEM_MONO =
+  '"Cascadia Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace, ' + EMOJI_FALLBACK
+
+export const DEFAULT_TYPOGRAPHY: DesktopThemeTypography = { fontSans: SYSTEM_SANS, fontMono: SYSTEM_MONO }
+
+const NASTECH_BLUE = '#0053FD'
+const PSYCHE_BLUE = '#1540B1'
+const PSYCHE_WARM = '#FFE6CB'
+
+const nastechTint = (pct: number) => `color-mix(in srgb, ${NASTECH_BLUE} ${pct}%, #FFFFFF)`
+const nastechTintTransparent = (pct: number) => `color-mix(in srgb, ${NASTECH_BLUE} ${pct}%, transparent)`
+
+/**
+ * NasTech — canonical NasTech desktop identity. The palette keeps the current
+ * glass geometry neutral, then lets the old bb/gui blue and psyche cream
+ * return as accent seeds.
+ */
+export const nousTheme: DesktopTheme = {
+  name: 'nastech',
+  label: 'NasTech',
+  description: 'Glass neutrals with NasTech blue accents',
+  colors: {
+    background: '#F8FAFF',
+    foreground: '#17171A',
+    card: '#FFFFFF',
+    cardForeground: '#17171A',
+    muted: nastechTint(5),
+    mutedForeground: '#666678',
+    popover: '#FFFFFF',
+    popoverForeground: '#17171A',
+    primary: NASTECH_BLUE,
+    primaryForeground: '#FCFCFC',
+    secondary: nastechTint(7),
+    secondaryForeground: '#242432',
+    accent: nastechTint(10),
+    accentForeground: '#202030',
+    border: nastechTintTransparent(22),
+    input: nastechTintTransparent(30),
+    ring: NASTECH_BLUE,
+    midground: NASTECH_BLUE,
+    composerRing: NASTECH_BLUE,
+    destructive: '#C72E4D',
+    destructiveForeground: '#FFFFFF',
+    sidebarBackground: '#F3F7FF',
+    sidebarBorder: nastechTintTransparent(18),
+    userBubble: nastechTint(6),
+    userBubbleBorder: nastechTintTransparent(24)
+  },
+  darkColors: {
+    background: '#0D2F86',
+    foreground: PSYCHE_WARM,
+    card: '#12378F',
+    cardForeground: PSYCHE_WARM,
+    muted: '#183F9A',
+    mutedForeground: '#B5C7F3',
+    popover: '#123A96',
+    popoverForeground: PSYCHE_WARM,
+    primary: PSYCHE_WARM,
+    primaryForeground: '#0D2F86',
+    secondary: '#1B45A4',
+    secondaryForeground: '#E0E8FF',
+    accent: PSYCHE_BLUE,
+    accentForeground: '#F0F4FF',
+    border: '#3158AD',
+    input: '#0B2566',
+    ring: PSYCHE_WARM,
+    midground: NASTECH_BLUE,
+    composerRing: PSYCHE_WARM,
+    destructive: '#C0473A',
+    destructiveForeground: '#FEF2F2',
+    sidebarBackground: '#09286F',
+    sidebarBorder: '#234A9C',
+    userBubble: '#143B91',
+    userBubbleBorder: '#3A63BD'
+  },
+  typography: {
+    fontSans: SYSTEM_SANS,
+    fontMono: `"Courier Prime", ${SYSTEM_MONO}`,
+    fontUrl: 'https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap'
+  }
+}
+
+/** Deep blue-violet with cool accents. Matches the dashboard midnight theme. */
+export const midnightTheme: DesktopTheme = {
+  name: 'midnight',
+  label: 'Midnight',
+  description: 'Deep blue-violet with cool accents',
+  colors: {
+    background: '#08081c',
+    foreground: '#ddd6ff',
+    card: '#0d0d28',
+    cardForeground: '#ddd6ff',
+    muted: '#13133a',
+    mutedForeground: '#7c7ab0',
+    popover: '#0f0f2e',
+    popoverForeground: '#ddd6ff',
+    primary: '#ddd6ff',
+    primaryForeground: '#08081c',
+    secondary: '#1a1a4a',
+    secondaryForeground: '#c4bff0',
+    accent: '#1a1a44',
+    accentForeground: '#d0c8ff',
+    border: '#1e1e52',
+    input: '#1e1e52',
+    ring: '#8b80e8',
+    midground: '#8b80e8',
+    destructive: '#b03060',
+    destructiveForeground: '#fef2f2',
+    sidebarBackground: '#06061a',
+    sidebarBorder: '#12123a',
+    userBubble: '#14143a',
+    userBubbleBorder: '#242466'
+  },
+  typography: {
+    fontMono: `"JetBrains Mono", ${SYSTEM_MONO}`,
+    fontUrl: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap'
+  }
+}
+
+/** Warm crimson and bronze — forge vibes. Matches the CLI ares skin. */
+export const emberTheme: DesktopTheme = {
+  name: 'ember',
+  label: 'Ember',
+  description: 'Warm crimson and bronze — forge vibes',
+  colors: {
+    background: '#160800',
+    foreground: '#ffd8b0',
+    card: '#1e0e04',
+    cardForeground: '#ffd8b0',
+    muted: '#2a1408',
+    mutedForeground: '#aa7a56',
+    popover: '#221008',
+    popoverForeground: '#ffd8b0',
+    primary: '#ffd8b0',
+    primaryForeground: '#160800',
+    secondary: '#341800',
+    secondaryForeground: '#f0c090',
+    accent: '#301600',
+    accentForeground: '#e8c080',
+    border: '#3a1c08',
+    input: '#3a1c08',
+    ring: '#d97316',
+    midground: '#d97316',
+    destructive: '#c43010',
+    destructiveForeground: '#fef2f2',
+    sidebarBackground: '#100600',
+    sidebarBorder: '#2a1004',
+    userBubble: '#2a1000',
+    userBubbleBorder: '#4a2010'
+  },
+  typography: {
+    fontMono: `"IBM Plex Mono", ${SYSTEM_MONO}`,
+    fontUrl: 'https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;700&display=swap'
+  }
+}
+
+/** Clean grayscale. Matches the CLI mono skin and dashboard mono theme. */
+export const monoTheme: DesktopTheme = {
+  name: 'mono',
+  label: 'Mono',
+  description: 'Clean grayscale — minimal and focused',
+  colors: {
+    background: '#0e0e0e',
+    foreground: '#eaeaea',
+    card: '#141414',
+    cardForeground: '#eaeaea',
+    muted: '#1e1e1e',
+    mutedForeground: '#808080',
+    popover: '#181818',
+    popoverForeground: '#eaeaea',
+    primary: '#eaeaea',
+    primaryForeground: '#0e0e0e',
+    secondary: '#262626',
+    secondaryForeground: '#c8c8c8',
+    accent: '#222222',
+    accentForeground: '#d8d8d8',
+    border: '#2a2a2a',
+    input: '#2a2a2a',
+    ring: '#9a9a9a',
+    midground: '#9a9a9a',
+    destructive: '#a84040',
+    destructiveForeground: '#fef2f2',
+    sidebarBackground: '#0a0a0a',
+    sidebarBorder: '#202020',
+    userBubble: '#1a1a1a',
+    userBubbleBorder: '#363636'
+  }
+}
+
+/** Neon green on black. Matches the CLI cyberpunk skin and dashboard theme. */
+export const cyberpunkTheme: DesktopTheme = {
+  name: 'cyberpunk',
+  label: 'Cyberpunk',
+  description: 'Neon green on black — matrix terminal',
+  colors: {
+    background: '#000a00',
+    foreground: '#00ff41',
+    card: '#001200',
+    cardForeground: '#00ff41',
+    muted: '#001a00',
+    mutedForeground: '#1a8a30',
+    popover: '#001000',
+    popoverForeground: '#00ff41',
+    primary: '#00ff41',
+    primaryForeground: '#000a00',
+    secondary: '#002800',
+    secondaryForeground: '#00cc34',
+    accent: '#002000',
+    accentForeground: '#00e038',
+    border: '#003000',
+    input: '#003000',
+    ring: '#00ff41',
+    midground: '#00ff41',
+    destructive: '#ff003c',
+    destructiveForeground: '#000a00',
+    sidebarBackground: '#000600',
+    sidebarBorder: '#001800',
+    userBubble: '#001400',
+    userBubbleBorder: '#004800'
+  },
+  typography: {
+    fontMono: `"Courier New", Courier, monospace, ${EMOJI_FALLBACK}`,
+    fontSans: `"Courier New", Courier, monospace, ${EMOJI_FALLBACK}`
+  }
+}
+
+/** Cool slate blue for developers. Matches the CLI slate skin. */
+export const slateTheme: DesktopTheme = {
+  name: 'slate',
+  label: 'Slate',
+  description: 'Cool slate blue — focused developer theme',
+  colors: {
+    background: '#0d1117',
+    foreground: '#c9d1d9',
+    card: '#161b22',
+    cardForeground: '#c9d1d9',
+    muted: '#21262d',
+    mutedForeground: '#8b949e',
+    popover: '#1c2128',
+    popoverForeground: '#c9d1d9',
+    primary: '#c9d1d9',
+    primaryForeground: '#0d1117',
+    secondary: '#2a3038',
+    secondaryForeground: '#adb5bf',
+    accent: '#1e2530',
+    accentForeground: '#c0c8d0',
+    border: '#30363d',
+    input: '#30363d',
+    ring: '#58a6ff',
+    midground: '#58a6ff',
+    destructive: '#cf4848',
+    destructiveForeground: '#fef2f2',
+    sidebarBackground: '#090d13',
+    sidebarBorder: '#1c2228',
+    userBubble: '#1e2a38',
+    userBubbleBorder: '#2e4060'
+  },
+  typography: {
+    fontMono: `"JetBrains Mono", ${SYSTEM_MONO}`
+  }
+}
+
+export const BUILTIN_THEMES: Record<string, DesktopTheme> = {
+  nastech: nousTheme,
+  midnight: midnightTheme,
+  ember: emberTheme,
+  mono: monoTheme,
+  cyberpunk: cyberpunkTheme,
+  slate: slateTheme
+}
+
+export const BUILTIN_THEME_LIST = Object.values(BUILTIN_THEMES)
+
+/** Skin used when nothing is persisted or the persisted name is retired. */
+export const DEFAULT_SKIN_NAME = 'nastech'

package/src/themes/profile-theme.test.ts

@@ -0,0 +1,41 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { modePref, skinPref } from './context'
+import { DEFAULT_SKIN_NAME } from './presets'
+
+// Skin and mode share one per-profile contract, so assert it once over both.
+interface Pref {
+  resolve: (profile: string) => string
+  assign: (profile: string, value: string) => void
+}
+
+const cases = [
+  { name: 'skin', pref: skinPref as unknown as Pref, fallback: DEFAULT_SKIN_NAME, a: 'ember', b: 'midnight', junk: 'nope' },
+  { name: 'mode', pref: modePref as unknown as Pref, fallback: 'light', a: 'dark', b: 'system', junk: 'dusk' }
+]
+
+describe.each(cases)('per-profile $name', ({ pref, fallback, a, b, junk }) => {
+  beforeEach(() => window.localStorage.clear())
+
+  it('falls back to the default when unassigned', () => {
+    expect(pref.resolve('default')).toBe(fallback)
+    expect(pref.resolve('work')).toBe(fallback)
+  })
+
+  it('keeps each profile on its own value', () => {
+    pref.assign('work', a)
+    pref.assign('default', b)
+    expect(pref.resolve('work')).toBe(a)
+    expect(pref.resolve('default')).toBe(b)
+  })
+
+  it('lets unassigned profiles inherit the default profile as the global fallback', () => {
+    pref.assign('default', a)
+    expect(pref.resolve('never-themed')).toBe(a)
+  })
+
+  it('normalizes an unknown stored value back to the default', () => {
+    pref.assign('work', junk)
+    expect(pref.resolve('work')).toBe(fallback)
+  })
+})

package/src/themes/types.ts

@@ -0,0 +1,66 @@
+/**
+ * Desktop app theme model.
+ *
+ *   colors      — Tailwind color tokens written directly to CSS vars.
+ *   darkColors  — optional hand-tuned dark variant (else `colors` is reused
+ *                 unchanged for dark, and a synth pass generates light).
+ *   typography  — font families + optional stylesheet URL.
+ *
+ * Everything else (layout, sizing, radius, line-height) lives in styles.css.
+ * Add new themes in `presets.ts` — no other code changes needed.
+ */
+
+export interface DesktopThemeColors {
+  background: string
+  foreground: string
+  card: string
+  cardForeground: string
+  muted: string
+  mutedForeground: string
+  popover: string
+  popoverForeground: string
+  primary: string
+  primaryForeground: string
+  secondary: string
+  secondaryForeground: string
+  accent: string
+  accentForeground: string
+  border: string
+  input: string
+  /** Generic focus ring — buttons, inputs, etc. */
+  ring: string
+  /**
+   * Brand-accent stroke — focus rings, streaming cursors, active session
+   * pills, branded scrollbars, text selection. Falls back to `ring`.
+   * Aliased to the DS `--midground` token.
+   */
+  midground?: string
+  /** Auto-derived from `midground` luminance when omitted. */
+  midgroundForeground?: string
+  /** Composer outline / focus color. Falls back to `midground`. */
+  composerRing?: string
+  destructive: string
+  destructiveForeground: string
+  sidebarBackground?: string
+  sidebarBorder?: string
+  userBubble?: string
+  userBubbleBorder?: string
+}
+
+export interface DesktopThemeTypography {
+  fontSans: string
+  fontMono: string
+  /** Google/Bunny/self-hosted font stylesheet URL. */
+  fontUrl?: string
+}
+
+export interface DesktopTheme {
+  name: string
+  label: string
+  description: string
+  /** Light palette (also reused for dark when `darkColors` is omitted). */
+  colors: DesktopThemeColors
+  /** Hand-tuned dark palette. Skins like `nastech` ship one. */
+  darkColors?: DesktopThemeColors
+  typography?: Partial<DesktopThemeTypography>
+}

package/src/themes/use-skin-command.ts

@@ -0,0 +1,60 @@
+import { useCallback } from 'react'
+
+import { useTheme } from './context'
+
+// Retired skin names land on the canonical NasTech skin so old muscle memory works.
+const ALIASES: Record<string, string> = {
+  ares: 'ember',
+  default: 'nastech',
+  gold: 'nastech',
+  NASTECH: 'nastech',
+  'nastech-light': 'nastech'
+}
+
+export function useSkinCommand() {
+  const { availableThemes, setTheme, themeName } = useTheme()
+
+  return useCallback(
+    (rawArg: string) => {
+      const arg = rawArg.trim()
+
+      if (!availableThemes.length) {
+        return 'No desktop themes are available.'
+      }
+
+      const activeIndex = Math.max(
+        0,
+        availableThemes.findIndex(t => t.name === themeName)
+      )
+
+      if (!arg || arg === 'next') {
+        const next = availableThemes[(activeIndex + 1) % availableThemes.length]
+        setTheme(next.name)
+
+        return `Desktop theme switched to ${next.label}.`
+      }
+
+      if (arg === 'list' || arg === 'ls' || arg === 'status') {
+        const rows = availableThemes.map(t => `${t.name === themeName ? '*' : ' '} ${t.name.padEnd(10)} ${t.label}`)
+
+        return ['Desktop themes:', ...rows, '', 'Use /skin <name>, or /skin to cycle.'].join('\n')
+      }
+
+      const normalized = arg.toLowerCase()
+      const targetName = ALIASES[normalized] || normalized
+
+      const target = availableThemes.find(
+        t => t.name.toLowerCase() === targetName || t.label.toLowerCase() === normalized
+      )
+
+      if (!target) {
+        return `Unknown desktop theme: ${arg}\nAvailable: ${availableThemes.map(t => t.name).join(', ')}`
+      }
+
+      setTheme(target.name)
+
+      return `Desktop theme switched to ${target.label}.`
+    },
+    [availableThemes, setTheme, themeName]
+  )
+}

package/src/themes/user-themes.test.ts

@@ -0,0 +1,63 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+
+import { BUILTIN_THEMES, DEFAULT_SKIN_NAME } from './presets'
+import { $userThemes, installUserTheme, isUserTheme, listAllThemes, removeUserTheme, resolveTheme } from './user-themes'
+import { convertVscodeColorTheme } from './vscode'
+
+const makeTheme = (label: string) =>
+  convertVscodeColorTheme({
+    name: label,
+    type: 'dark',
+    colors: { 'editor.background': '#101014', 'editor.foreground': '#fafafa', focusBorder: '#7aa2f7' }
+  }).theme
+
+describe('user theme registry', () => {
+  beforeEach(() => {
+    window.localStorage.clear()
+    $userThemes.set({})
+  })
+
+  it('installs a theme into the merged registry and persists it', () => {
+    const theme = installUserTheme(makeTheme('Tokyo Night'))
+
+    expect(isUserTheme(theme.name)).toBe(true)
+    expect(resolveTheme(theme.name)).toEqual(theme)
+    expect(listAllThemes().map(t => t.name)).toContain(theme.name)
+    expect(window.localStorage.getItem('nastech-desktop-user-themes-v1')).toContain(theme.name)
+  })
+
+  it('lists built-ins before user themes', () => {
+    installUserTheme(makeTheme('Custom'))
+    const names = listAllThemes().map(t => t.name)
+
+    expect(names.slice(0, Object.keys(BUILTIN_THEMES).length)).toEqual(Object.keys(BUILTIN_THEMES))
+    expect(names.at(-1)).toBe('vsc-custom')
+  })
+
+  it('removes a theme', () => {
+    const theme = installUserTheme(makeTheme('Throwaway'))
+    removeUserTheme(theme.name)
+
+    expect(isUserTheme(theme.name)).toBe(false)
+    expect(resolveTheme(theme.name)).toBeUndefined()
+  })
+
+  it('resolves built-ins through the same lookup', () => {
+    expect(resolveTheme(DEFAULT_SKIN_NAME)).toBe(BUILTIN_THEMES[DEFAULT_SKIN_NAME])
+  })
+
+  it('refuses to shadow a built-in name', () => {
+    const builtinName = makeTheme('x')
+    builtinName.name = DEFAULT_SKIN_NAME
+
+    expect(() => installUserTheme(builtinName)).toThrow(/built-in/)
+  })
+
+  it('rejects a theme missing required colors', () => {
+    const broken = makeTheme('Broken')
+    // @ts-expect-error — intentionally corrupt the palette for the test.
+    broken.colors = { background: '#000000' }
+
+    expect(() => installUserTheme(broken)).toThrow(/colors/)
+  })
+})