Merge pull request #43292 from NousResearch/bb/vscode-marketplace-themes

feat(desktop): install any VS Code theme from the Marketplace
2026-06-09 23:53:59 -05:00
parent d03cdd63eb 7803cbfbb9
commit bf7abc2f73
26 changed files with 2164 additions and 128 deletions
@@ -4,6 +4,7 @@ import { Dialog as DialogPrimitive } from 'radix-ui'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'

+import { HUD_HEADING, HUD_ITEM, HUD_POSITION, HUD_SURFACE, HUD_TEXT } from '@/app/floating-hud'
 import { setTerminalTakeover } from '@/app/right-sidebar/store'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { KbdGroup } from '@/components/ui/kbd'
@@ -18,6 +19,7 @@ import {
  ChevronRight,
  Clock,
  Cpu,
+  Download,
  Globe,
  type IconComponent,
  Info,
@@ -40,7 +42,9 @@ import { comboTokens } from '@/lib/keybinds/combo'
 import { cn } from '@/lib/utils'
 import { $commandPaletteOpen, closeCommandPalette, setCommandPaletteOpen } from '@/store/command-palette'
 import { $bindings } from '@/store/keybinds'
+import { luminance } from '@/themes/color'
 import { type ThemeMode, useTheme } from '@/themes/context'
+import { isUserTheme, resolveTheme } from '@/themes/user-themes'

 import {
  AGENTS_ROUTE,
@@ -58,6 +62,8 @@ import { FIELD_LABELS, SECTIONS } from '../settings/constants'
 import { fieldCopyForSchemaKey } from '../settings/field-copy'
 import { prettyName } from '../settings/helpers'

+import { MarketplaceThemePage } from './marketplace-theme-page'
+
 interface PaletteItem {
  /** Keybind action id — its live combo renders as a hotkey hint. */
  action?: string
@@ -74,10 +80,16 @@ interface PaletteItem {
 }

 interface PaletteGroup {
-  heading: string
+  /** Optional: a headingless group renders as a bare action row (e.g. the
+   *  "Install theme…" entry pinned atop the theme picker). */
+  heading?: string
  items: PaletteItem[]
 }

+// Nested page → its parent, so Back / Esc step up one level instead of closing
+// the palette. Pages absent here go straight back to the root list.
+const PAGE_PARENTS: Record<string, string> = { 'install-theme': 'theme' }
+
 /** A nested page reachable from a root item via `to`. */
 interface PalettePage {
  groups: PaletteGroup[]
@@ -167,12 +179,32 @@ const THEME_MODES: ReadonlyArray<{ icon: IconComponent; mode: ThemeMode }> = [
  { icon: Monitor, mode: 'system' }
 ]

+// Which Light/Dark groups a theme belongs in. Built-ins render in both modes
+// (the engine synthesises the missing side). Imported VS Code themes only carry
+// the variant(s) the extension shipped — a single dark theme like Dracula lives
+// under Dark only, while a GitHub/Solarized family (light + dark) lives in both.
+function themeSupportsMode(name: string, target: 'light' | 'dark'): boolean {
+  if (!isUserTheme(name)) {
+    return true
+  }
+
+  const resolved = resolveTheme(name)
+
+  if (!resolved) {
+    return true
+  }
+
+  const background = target === 'dark' ? (resolved.darkColors ?? resolved.colors).background : resolved.colors.background
+
+  return target === 'dark' ? luminance(background) <= 0.5 : luminance(background) > 0.5
+}
+
 export function CommandPalette() {
  const { t } = useI18n()
  const open = useStore($commandPaletteOpen)
  const bindings = useStore($bindings)
  const navigate = useNavigate()
-  const { availableThemes, setMode, setTheme } = useTheme()
+  const { availableThemes, resolvedMode, setMode, setTheme, themeName } = useTheme()
  const [search, setSearch] = useState('')
  const [page, setPage] = useState<string | null>(null)

@@ -217,6 +249,13 @@ export function CommandPalette() {

  const go = useCallback((path: string) => () => navigate(path), [navigate])

+  // Step up one nested page (or back to the root list), clearing the filter so
+  // the parent page doesn't reopen mid-search.
+  const goBack = useCallback(() => {
+    setSearch('')
+    setPage(prev => (prev ? (PAGE_PARENTS[prev] ?? null) : null))
+  }, [])
+
  const settingsSectionLabel = useCallback(
    (section: (typeof SECTIONS)[number]) => t.settings.sections[section.id] ?? section.label,
    [t.settings.sections]
@@ -438,23 +477,40 @@ export function CommandPalette() {
      theme: {
        title: t.settings.appearance.themeTitle,
        placeholder: t.settings.appearance.themeDesc,
-        // Skins aren't inherently light/dark — the same skin renders in either
-        // mode. Group by appearance so picking an entry sets skin + mode at
-        // once, and keep the palette open so each pick previews live.
-        groups: (['light', 'dark'] as const).map(groupMode => ({
-          heading: groupMode === 'light' ? t.settings.modeOptions.light.label : t.settings.modeOptions.dark.label,
-          items: availableThemes.map(theme => ({
-            icon: groupMode === 'light' ? Sun : Moon,
-            id: `theme-${theme.name}-${groupMode}`,
-            keepOpen: true,
-            keywords: ['theme', 'appearance', 'palette', groupMode, theme.label, theme.description ?? ''],
-            label: theme.label,
-            run: () => {
-              setTheme(theme.name)
-              setMode(groupMode)
-            }
+        groups: [
+          // Pinned at the top: drills into the Marketplace browser.
+          {
+            items: [
+              {
+                icon: Download,
+                id: 'theme-install',
+                keywords: ['install', 'marketplace', 'vscode', 'vs code', 'download', 'new', 'color'],
+                label: t.commandCenter.installTheme.title,
+                to: 'install-theme'
+              }
+            ]
+          },
+          // Built-ins and imported families list under the mode(s) they support;
+          // picking sets skin + mode at once. A multi-variant import (GitHub,
+          // Solarized) appears in both groups and switches variants with the mode.
+          ...(['light', 'dark'] as const).map(groupMode => ({
+            heading: groupMode === 'light' ? t.settings.modeOptions.light.label : t.settings.modeOptions.dark.label,
+            items: availableThemes
+              .filter(theme => themeSupportsMode(theme.name, groupMode))
+              .map(theme => ({
+                active: themeName === theme.name && resolvedMode === groupMode,
+                icon: groupMode === 'light' ? Sun : Moon,
+                id: `theme-${theme.name}-${groupMode}`,
+                keepOpen: true,
+                keywords: ['theme', 'appearance', 'palette', groupMode, theme.label, theme.description ?? ''],
+                label: theme.label,
+                run: () => {
+                  setTheme(theme.name)
+                  setMode(groupMode)
+                }
+              }))
          }))
-        }))
+        ]
      },
      'color-mode': {
        title: t.settings.appearance.colorMode,
@@ -472,9 +528,16 @@ export function CommandPalette() {
            }))
          }
        ]
+      },
+      // Server-driven page: items come from the Marketplace, rendered by
+      // <MarketplaceThemePage> (loader + live search + per-row install).
+      'install-theme': {
+        title: t.commandCenter.installTheme.title,
+        placeholder: t.commandCenter.installTheme.placeholder,
+        groups: []
      }
    }),
-    [availableThemes, setMode, setTheme, t]
+    [availableThemes, resolvedMode, setMode, setTheme, t, themeName]
  )

  const activePage = page ? subPages[page] : null
@@ -499,17 +562,22 @@ export function CommandPalette() {
  return (
    <DialogPrimitive.Root onOpenChange={setCommandPaletteOpen} open={open}>
      <DialogPrimitive.Portal>
-        <DialogPrimitive.Overlay className="fixed inset-0 z-[200] bg-black/15 backdrop-blur-[1px] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0" />
+        {/* Transparent overlay: keeps click-away + focus trap, but no dim/blur. */}
+        <DialogPrimitive.Overlay className="fixed inset-0 z-[200]" />
        <DialogPrimitive.Content
          aria-describedby={undefined}
-          className="fixed left-1/2 top-[14vh] z-[210] w-[min(40rem,calc(100vw-2rem))] -translate-x-1/2 overflow-hidden rounded-xl border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) shadow-lg duration-150 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2 data-[state=open]:zoom-in-95"
+          className={cn(
+            HUD_POSITION,
+            HUD_SURFACE,
+            'z-[210] w-[min(34rem,calc(100vw-2rem))] overflow-hidden duration-150 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top-2 data-[state=open]:zoom-in-95'
+          )}
        >
          <DialogPrimitive.Title className="sr-only">{t.commandCenter.paletteTitle}</DialogPrimitive.Title>
          <Command className="bg-transparent" filter={paletteFilter} loop>
            {activePage && (
              <button
                className="flex w-full items-center gap-1.5 border-b border-border px-3 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:text-foreground"
-                onClick={() => setPage(null)}
+                onClick={goBack}
                type="button"
              >
                <ChevronLeft className="size-3.5" />
@@ -519,6 +587,7 @@ export function CommandPalette() {
              </button>
            )}
            <CommandInput
+              className={HUD_TEXT}
              onKeyDown={event => {
                if (!activePage) {
                  return
@@ -529,20 +598,24 @@ export function CommandPalette() {
                if (event.key === 'Escape' || (event.key === 'Backspace' && search === '')) {
                  event.preventDefault()
                  event.stopPropagation()
-                  setPage(null)
+                  goBack()
                }
              }}
              onValueChange={setSearch}
              placeholder={placeholder}
              value={search}
            />
-            <CommandList className="max-h-[min(24rem,60vh)]">
-              <CommandEmpty>{t.commandCenter.noResults}</CommandEmpty>
-              {visibleGroups.map(group => (
+            <CommandList className="dt-portal-scrollbar max-h-[min(20rem,56vh)]">
+              {page === 'install-theme' ? (
+                <MarketplaceThemePage onPickTheme={setTheme} search={search} />
+              ) : (
+                <CommandEmpty>{t.commandCenter.noResults}</CommandEmpty>
+              )}
+              {visibleGroups.map((group, index) => (
                <CommandGroup
-                  className="**:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-[0.6875rem] **:[[cmdk-group-heading]]:text-muted-foreground/70"
+                  className={HUD_HEADING}
                  heading={group.heading}
-                  key={group.heading}
+                  key={group.heading ?? `palette-group-${index}`}
                >
                  {group.items.map(item => {
                    const Icon = item.icon
@@ -551,18 +624,18 @@ export function CommandPalette() {

                    return (
                      <CommandItem
-                        className="gap-2.5"
+                        className={cn(HUD_ITEM, HUD_TEXT)}
                        key={item.id}
                        keywords={item.keywords}
                        onSelect={() => handleSelect(item)}
                        value={`${item.label} ${item.keywords?.join(' ') ?? ''} ${item.id}`}
                      >
-                        <Icon className="size-4 shrink-0 text-muted-foreground" />
+                        <Icon className="size-3.5 shrink-0 text-muted-foreground" />
                        <span className="truncate">{item.label}</span>
                        {keys && <KbdGroup className="ml-auto" keys={keys} />}
                        {item.to && (
                          <ChevronRight
-                            className={cn('size-4 shrink-0 text-muted-foreground/70', !keys && 'ml-auto')}
+                            className={cn('size-3.5 shrink-0 text-muted-foreground/70', !keys && 'ml-auto')}
                          />
                        )}
                      </CommandItem>
@@ -0,0 +1,157 @@
+/**
+ * Cmd-K "Install theme…" page.
+ *
+ * Browses the VS Code Marketplace for color themes: an empty query shows the
+ * most-installed themes, typing runs a live (debounced) search against the
+ * Marketplace. Selecting a row downloads + converts + installs it via the same
+ * pipeline as the settings importer, then activates it — and stays open so the
+ * user can grab several.
+ */
+
+import { useQuery } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+
+import { HUD_ITEM, HUD_TEXT } from '@/app/floating-hud'
+import type { DesktopMarketplaceSearchItem } from '@/global'
+import { useI18n } from '@/i18n'
+import { triggerHaptic } from '@/lib/haptics'
+import { Check, Download, Loader2, Palette } from '@/lib/icons'
+import { cn } from '@/lib/utils'
+import { installVscodeThemeFromMarketplace } from '@/themes/install'
+
+const compactNumber = new Intl.NumberFormat(undefined, { notation: 'compact', maximumFractionDigits: 1 })
+
+function useDebounced<T>(value: T, delayMs: number): T {
+  const [debounced, setDebounced] = useState(value)
+
+  useEffect(() => {
+    const handle = setTimeout(() => setDebounced(value), delayMs)
+
+    return () => clearTimeout(handle)
+  }, [value, delayMs])
+
+  return debounced
+}
+
+interface MarketplaceThemePageProps {
+  search: string
+  /** Activate a freshly installed theme by slug. */
+  onPickTheme: (name: string) => void
+}
+
+export function MarketplaceThemePage({ search, onPickTheme }: MarketplaceThemePageProps) {
+  const { t } = useI18n()
+  const copy = t.commandCenter.installTheme
+  const debouncedSearch = useDebounced(search.trim(), 300)
+  const [installingId, setInstallingId] = useState<string | null>(null)
+  const [installed, setInstalled] = useState<Record<string, true>>({})
+  const [installError, setInstallError] = useState<string | null>(null)
+
+  const query = useQuery({
+    queryKey: ['marketplace-themes', debouncedSearch],
+    queryFn: () => window.hermesDesktop?.themes?.searchMarketplace(debouncedSearch) ?? Promise.resolve([]),
+    staleTime: 5 * 60 * 1000
+  })
+
+  const install = async (item: DesktopMarketplaceSearchItem) => {
+    if (installingId) {
+      return
+    }
+
+    setInstallingId(item.extensionId)
+    setInstallError(null)
+
+    try {
+      const theme = await installVscodeThemeFromMarketplace(item.extensionId)
+
+      triggerHaptic('crisp')
+      setInstalled(prev => ({ ...prev, [item.extensionId]: true }))
+      onPickTheme(theme.name)
+    } catch (error) {
+      setInstallError(error instanceof Error ? error.message : copy.error)
+    } finally {
+      setInstallingId(null)
+    }
+  }
+
+  if (query.isLoading) {
+    return <Status icon={<Loader2 className="size-3.5 animate-spin" />} text={copy.loading} />
+  }
+
+  if (query.isError) {
+    return <Status text={copy.error} tone="error" />
+  }
+
+  const results = query.data ?? []
+
+  if (results.length === 0) {
+    return <Status text={copy.empty} />
+  }
+
+  return (
+    <div role="listbox">
+      {installError && <p className="px-2 pb-1 pt-1.5 text-[0.6875rem] text-(--ui-red)">{installError}</p>}
+      {results.map(item => {
+        const busy = installingId === item.extensionId
+        const done = installed[item.extensionId]
+
+        return (
+          <button
+            className={cn(
+              'flex w-full items-start rounded-md text-left transition-colors hover:bg-(--chrome-action-hover) disabled:opacity-60 aria-disabled:opacity-60',
+              HUD_ITEM,
+              HUD_TEXT
+            )}
+            disabled={Boolean(installingId) && !busy}
+            key={item.extensionId}
+            onClick={() => void install(item)}
+            onMouseDown={event => event.preventDefault()}
+            role="option"
+            type="button"
+          >
+            <Palette className="mt-0.5 size-3.5 shrink-0 text-muted-foreground" />
+            <span className="flex min-w-0 flex-col">
+              <span className="truncate font-medium">{item.displayName}</span>
+              <span className="truncate text-[0.6875rem] text-muted-foreground/80">
+                {item.publisher}
+                {item.installs > 0 ? ` · ${copy.installs(compactNumber.format(item.installs))}` : ''}
+              </span>
+            </span>
+            <span className="ml-auto mt-0.5 flex shrink-0 items-center gap-1 text-[0.6875rem] text-muted-foreground">
+              {busy ? (
+                <>
+                  <Loader2 className="size-3 animate-spin" />
+                  {copy.installing}
+                </>
+              ) : done ? (
+                <>
+                  <Check className="size-3 text-(--ui-green)" />
+                  {copy.installed}
+                </>
+              ) : (
+                <>
+                  <Download className="size-3" />
+                  {copy.install}
+                </>
+              )}
+            </span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+function Status({ icon, text, tone }: { icon?: React.ReactNode; text: string; tone?: 'error' }) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center gap-2 px-2 py-6 text-xs',
+        tone === 'error' ? 'text-(--ui-red)' : 'text-muted-foreground'
+      )}
+    >
+      {icon}
+      {text}
+    </div>
+  )
+}
@@ -0,0 +1,22 @@
+// Shared chrome for the top-center floating HUDs (command palette + session
+// switcher). They pin just under the title bar, centered, and lean on a crisp
+// border + shadow to separate from the app — no dimming/blurring backdrop.
+// Each caller layers on its own z-index, width, and overflow.
+export const HUD_POSITION = 'fixed left-1/2 top-3 -translate-x-1/2'
+
+// Matches the app's borderless-overlay surface (dialog, keybind panel, …):
+// hairline `--stroke-nous` paired with the soft `--shadow-nous` float.
+export const HUD_SURFACE = 'rounded-xl border border-(--stroke-nous) bg-(--ui-chat-bubble-background) shadow-nous'
+
+// One row/text size for both HUDs (compact — two notches under `text-sm`).
+export const HUD_TEXT = 'text-xs'
+
+// Shared item layout + padding for both HUDs. Tight vertical rhythm so rows
+// don't feel chunky; overrides the shadcn `CommandItem` default (`px-2 py-1.5`).
+export const HUD_ITEM = 'gap-2 px-2 py-1'
+
+// Section headings styled like the sidebar panel labels: brand-tinted, uppercase,
+// tightly tracked — plain text, no sticky chrome bar. Targets the cmdk group
+// heading via the universal-descendant variant.
+export const HUD_HEADING =
+  '**:[[cmdk-group-heading]]:static **:[[cmdk-group-heading]]:bg-transparent **:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:pb-1 **:[[cmdk-group-heading]]:pt-2.5 **:[[cmdk-group-heading]]:text-[0.64rem] **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:uppercase **:[[cmdk-group-heading]]:tracking-[0.16em] **:[[cmdk-group-heading]]:text-(--theme-primary)'
@@ -1,6 +1,8 @@
 import type { ITheme, Terminal } from '@xterm/xterm'
 import type { CSSProperties } from 'react'

+import type { DesktopTerminalPalette } from '@/themes/types'
+
 // VS Code's default integrated-terminal palette (terminalColorRegistry.ts) — a
 // fixed table per theme type, not luminance-derived. Light/dark diverge on
 // purpose so each stays legible (e.g. mustard yellow on white).
@@ -52,9 +54,29 @@ const LIGHT_THEME: ITheme = {
  brightWhite: '#a5a5a5'
 }

-// Palette by painted mode. `background` is only a fallback — withSurface swaps
-// in the live skin surface at runtime; minimumContrastRatio keeps colors crisp.
-export const terminalTheme = (mode: 'light' | 'dark'): ITheme => (mode === 'dark' ? DARK_THEME : LIGHT_THEME)
+// Palette by painted mode, optionally overlaid with an imported theme's ANSI
+// palette (Solarized terminal for the Solarized skin, etc.). `palette` only
+// fills the slots it defines, so a partial import keeps the mode defaults for
+// the rest. `background` is a fallback only — withSurface swaps in the live skin
+// surface at runtime (keeping transparency); minimumContrastRatio keeps colors
+// crisp against it.
+export function terminalTheme(mode: 'light' | 'dark', palette?: DesktopTerminalPalette): ITheme {
+  const base = mode === 'dark' ? DARK_THEME : LIGHT_THEME
+
+  if (!palette) {
+    return base
+  }
+
+  const overlay = { ...base } as Record<string, string>
+
+  for (const [slot, value] of Object.entries(palette)) {
+    if (value) {
+      overlay[slot] = value
+    }
+  }
+
+  return overlay as ITheme
+}

 // Resolve --ui-editor-surface-background (a color-mix on the skin seed) to a
 // concrete rgb for the WebGL renderer + contrast clamp. Custom props don't
@@ -223,8 +223,13 @@ export function useTerminalSession({ cwd, onAddSelectionToChat }: UseTerminalSes
  // clicked switch) — a skin can keep a light surface in "dark" mode, and we
  // must match the surface or the ANSI palette inverts against it. themeName
  // re-resolves the canvas surface on skin switches (same mode, new tint).
-  const { renderedMode, themeName } = useTheme()
-  const activeTheme = useMemo(() => terminalTheme(renderedMode), [renderedMode])
+  const { renderedMode, theme, themeName } = useTheme()
+  // Adopt the skin's ANSI palette when it ships one (imported VS Code themes do),
+  // matched to the painted variant; built-in skins carry none, so the terminal
+  // keeps its VS Code defaults. withSurface still owns the background, so this
+  // never touches transparency.
+  const ansiPalette = renderedMode === 'dark' ? (theme.darkTerminal ?? theme.terminal) : theme.terminal
+  const activeTheme = useMemo(() => terminalTheme(renderedMode, ansiPalette), [renderedMode, ansiPalette])
  const initialThemeRef = useRef(activeTheme)
  const hostRef = useRef<HTMLDivElement | null>(null)
  const termRef = useRef<Terminal | null>(null)
@@ -8,6 +8,7 @@ import { cn } from '@/lib/utils'
 import { $attentionSessionIds, $workingSessionIds } from '@/store/session'
 import { $switcherIndex, $switcherOpen, $switcherSessions, closeSwitcher } from '@/store/session-switcher'

+import { HUD_ITEM, HUD_POSITION, HUD_SURFACE, HUD_TEXT } from './floating-hud'
 import { sessionRoute } from './routes'

 // Compact session-switcher HUD — keyboard-driven from `use-keybinds`, rows
@@ -39,22 +40,31 @@ export function SessionSwitcher() {
  }

  return createPortal(
-    <div className="fixed inset-0 z-[220] flex select-none items-center justify-center">
+    <>
+      {/* Transparent click-catcher: click-away closes, but no dim/blur. */}
      <div
-        className="absolute inset-0 bg-black/15 backdrop-blur-[1px]"
+        className="fixed inset-0 z-[219]"
        onMouseDown={e => {
          e.preventDefault()
          closeSwitcher()
        }}
      />
-      <div className="relative max-h-[min(26rem,70vh)] w-[min(20rem,calc(100vw-2rem))] overflow-y-auto rounded-lg border border-(--ui-stroke-secondary) bg-(--ui-chat-bubble-background) p-1 shadow-lg">
+      <div
+        className={cn(
+          HUD_POSITION,
+          HUD_SURFACE,
+          'dt-portal-scrollbar z-[220] max-h-[min(22rem,64vh)] w-[min(19rem,calc(100vw-2rem))] select-none overflow-y-auto p-1'
+        )}
+      >
        {sessions.map((session, i) => {
          const selected = i === index

          return (
            <div
              className={cn(
-                'flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-xs leading-tight',
+                'flex cursor-pointer items-center rounded leading-tight',
+                HUD_ITEM,
+                HUD_TEXT,
                selected ? 'bg-accent text-accent-foreground' : 'text-(--ui-text-secondary) hover:bg-(--ui-row-hover-background)'
              )}
              key={session.id}
@@ -80,7 +90,7 @@ export function SessionSwitcher() {
          )
        })}
      </div>
-    </div>,
+    </>,
    document.body
  )
 }
@@ -1,21 +1,23 @@
 import { useStore } from '@nanostores/react'
+import { useState } from 'react'

 import { LanguageSwitcher } from '@/components/language-switcher'
 import { SegmentedControl } from '@/components/ui/segmented-control'
 import { useI18n } from '@/i18n'
 import { triggerHaptic } from '@/lib/haptics'
-import { Check, Palette } from '@/lib/icons'
+import { Check, Download, Loader2, Palette, Trash2 } from '@/lib/icons'
 import { cn } from '@/lib/utils'
 import { $activeGatewayProfile, $profiles, normalizeProfileKey } from '@/store/profile'
 import { $toolViewMode, setToolViewMode } from '@/store/tool-view'
 import { useTheme } from '@/themes/context'
-import { BUILTIN_THEMES } from '@/themes/presets'
+import { installVscodeThemeFromMarketplace } from '@/themes/install'
+import { isUserTheme, removeUserTheme, resolveTheme } from '@/themes/user-themes'

 import { MODE_OPTIONS } from './constants'
 import { ListRow, SectionHeading, SettingsContent } from './primitives'

 function ThemePreview({ name }: { name: string }) {
-  const t = BUILTIN_THEMES[name]
+  const t = resolveTheme(name)

  if (!t) {
    return null
@@ -54,6 +56,81 @@ function ThemePreview({ name }: { name: string }) {
  )
 }

+function VscodeThemeInstaller() {
+  const { t } = useI18n()
+  const { setTheme } = useTheme()
+  const a = t.settings.appearance
+  const [id, setId] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [status, setStatus] = useState<{ kind: 'error' | 'success'; text: string } | null>(null)
+
+  const install = async () => {
+    const trimmed = id.trim()
+
+    if (!trimmed || busy) {
+      return
+    }
+
+    setBusy(true)
+    setStatus(null)
+
+    try {
+      const theme = await installVscodeThemeFromMarketplace(trimmed)
+
+      triggerHaptic('crisp')
+      setTheme(theme.name)
+      setStatus({ kind: 'success', text: a.installed(theme.label) })
+      setId('')
+    } catch (error) {
+      setStatus({ kind: 'error', text: error instanceof Error ? error.message : a.installError })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div className="mt-3">
+      <div className="flex flex-wrap items-center gap-2">
+        <input
+          className="min-w-0 flex-1 rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) px-3 py-1.5 font-mono text-[length:var(--conversation-caption-font-size)] outline-none placeholder:text-(--ui-text-tertiary) focus:border-(--ui-stroke-secondary)"
+          disabled={busy}
+          onChange={event => {
+            setId(event.target.value)
+            setStatus(null)
+          }}
+          onKeyDown={event => {
+            if (event.key === 'Enter') {
+              void install()
+            }
+          }}
+          placeholder={a.installPlaceholder}
+          spellCheck={false}
+          value={id}
+        />
+        <button
+          className="inline-flex items-center gap-1.5 rounded-lg border border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary) px-3 py-1.5 text-[length:var(--conversation-caption-font-size)] font-medium transition hover:bg-(--chrome-action-hover) disabled:opacity-50"
+          disabled={busy || !id.trim()}
+          onClick={() => void install()}
+          type="button"
+        >
+          {busy ? <Loader2 className="size-3.5 animate-spin" /> : <Download className="size-3.5" />}
+          {busy ? a.installing : a.installButton}
+        </button>
+      </div>
+      {status && (
+        <p
+          className={cn(
+            'mt-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height)',
+            status.kind === 'error' ? 'text-(--ui-red)' : 'text-(--ui-text-tertiary)'
+          )}
+        >
+          {status.text}
+        </p>
+      )}
+    </div>
+  )
+}
+
 export function AppearanceSettings() {
  const { t, isSavingLocale } = useI18n()
  const { themeName, mode, availableThemes, setTheme, setMode } = useTheme()
@@ -112,40 +189,62 @@ export function AppearanceSettings() {
                <div className="mt-3 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                  {availableThemes.map(theme => {
                    const active = themeName === theme.name
+                    const removable = isUserTheme(theme.name)

                    return (
-                      <button
-                        className={cn(
-                          'rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2 text-left transition hover:bg-(--chrome-action-hover)',
-                          active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
-                        )}
-                        key={theme.name}
-                        onClick={() => {
-                          triggerHaptic('crisp')
-                          setTheme(theme.name)
-                        }}
-                        type="button"
-                      >
-                        <ThemePreview name={theme.name} />
-                        <div className="mt-3 flex items-start justify-between gap-3 px-1">
-                          <div className="min-w-0">
-                            <div className="truncate text-[length:var(--conversation-text-font-size)] font-medium">
-                              {theme.label}
-                            </div>
-                            <div className="mt-0.5 line-clamp-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
-                              {theme.description}
-                            </div>
-                          </div>
-                          {active && (
-                            <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground">
-                              <Check className="size-3.5" />
-                            </span>
+                      <div className="group relative" key={theme.name}>
+                        <button
+                          className={cn(
+                            'w-full rounded-lg border border-(--ui-stroke-tertiary) bg-(--ui-bg-quinary) p-2 text-left transition hover:bg-(--chrome-action-hover)',
+                            active && 'border-(--ui-stroke-secondary) bg-(--ui-bg-tertiary)'
                          )}
-                        </div>
-                      </button>
+                          onClick={() => {
+                            triggerHaptic('crisp')
+                            setTheme(theme.name)
+                          }}
+                          type="button"
+                        >
+                          <ThemePreview name={theme.name} />
+                          <div className="mt-3 flex items-start justify-between gap-3 px-1">
+                            <div className="min-w-0">
+                              <div className="truncate text-[length:var(--conversation-text-font-size)] font-medium">
+                                {theme.label}
+                              </div>
+                              <div className="mt-0.5 line-clamp-2 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
+                                {theme.description}
+                              </div>
+                            </div>
+                            {active && (
+                              <span className="mt-0.5 grid size-5 shrink-0 place-items-center rounded-full bg-primary text-primary-foreground">
+                                <Check className="size-3.5" />
+                              </span>
+                            )}
+                          </div>
+                        </button>
+                        {removable && (
+                          <button
+                            aria-label={a.removeTheme}
+                            className="absolute right-1.5 top-1.5 grid size-6 place-items-center rounded-md bg-(--ui-bg-elevated)/80 text-(--ui-text-tertiary) opacity-0 backdrop-blur-sm transition hover:text-(--ui-red) focus-visible:opacity-100 group-hover:opacity-100"
+                            onClick={() => {
+                              triggerHaptic('crisp')
+                              removeUserTheme(theme.name)
+
+                              // Re-normalize off the now-missing skin → default.
+                              if (active) {
+                                setTheme(theme.name)
+                              }
+                            }}
+                            title={a.removeTheme}
+                            type="button"
+                          >
+                            <Trash2 className="size-3.5" />
+                          </button>
+                        )}
+                      </div>
                    )
                  })}
                </div>
+                <VscodeThemeInstaller />
                {showProfileNote && (
                  <p className="mt-3 text-[length:var(--conversation-caption-font-size)] leading-(--conversation-caption-line-height) text-(--ui-text-tertiary)">
                    {a.themeProfileNote(activeProfileName)}