@clawpump/claw-agent 0.1.5 → 0.1.6

package/agent/apps/desktop/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/agent/apps/desktop/src/themes/presets.ts

@@ -5,10 +5,19 @@
 
 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'
+  '"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'
+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 }
 
@@ -228,8 +237,8 @@ export const cyberpunkTheme: DesktopTheme = {
     userBubbleBorder: '#004800'
   },
   typography: {
-    fontMono: `"Courier New", Courier, monospace`,
-    fontSans: `"Courier New", Courier, monospace`
+    fontMono: `"Courier New", Courier, monospace, ${EMOJI_FALLBACK}`,
+    fontSans: `"Courier New", Courier, monospace, ${EMOJI_FALLBACK}`
   }
 }
 

package/agent/apps/desktop/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/agent/apps/desktop/src/themes/types.ts

@@ -54,6 +54,37 @@ export interface DesktopThemeTypography {
   fontUrl?: string
 }
 
+/**
+ * Integrated-terminal ANSI palette (xterm `ITheme`, minus `background`).
+ *
+ * Populated only when a converted VS Code theme ships a full `terminal.ansi*`
+ * set; otherwise the terminal keeps its built-in VS Code default palette.
+ * `background` is intentionally absent — the pane always paints the live skin
+ * surface so it stays translucent.
+ */
+export interface DesktopTerminalPalette {
+  foreground?: string
+  cursor?: string
+  /** Keeps its source alpha — xterm blends it over the surface. */
+  selectionBackground?: string
+  black?: string
+  red?: string
+  green?: string
+  yellow?: string
+  blue?: string
+  magenta?: string
+  cyan?: string
+  white?: string
+  brightBlack?: string
+  brightRed?: string
+  brightGreen?: string
+  brightYellow?: string
+  brightBlue?: string
+  brightMagenta?: string
+  brightCyan?: string
+  brightWhite?: string
+}
+
 export interface DesktopTheme {
   name: string
   label: string
@@ -63,4 +94,8 @@ export interface DesktopTheme {
   /** Hand-tuned dark palette. Skins like `nous` ship one. */
   darkColors?: DesktopThemeColors
   typography?: Partial<DesktopThemeTypography>
+  /** Light-variant terminal ANSI palette (also the fallback for dark). */
+  terminal?: DesktopTerminalPalette
+  /** Dark-variant terminal ANSI palette. Falls back to `terminal`. */
+  darkTerminal?: DesktopTerminalPalette
 }

package/agent/apps/desktop/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('hermes-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/)
+  })
+})

package/agent/apps/desktop/src/themes/user-themes.ts

@@ -0,0 +1,122 @@
+/**
+ * User-installed desktop themes (currently: converted VS Code themes).
+ *
+ * This is the extensibility seam. The theme context reads the *merged* registry
+ * (built-ins + user themes) for `availableThemes` and for every skin lookup, so
+ * an installed theme shows up everywhere a built-in does — the Cmd-K palette,
+ * the Appearance settings grid, and `/skin` — with no per-surface wiring.
+ *
+ * Stored as a localStorage record so the boot-time paint (which runs before
+ * React mounts) can resolve a user theme synchronously, same as built-ins.
+ */
+
+import { atom } from 'nanostores'
+
+import { BUILTIN_THEMES } from './presets'
+import type { DesktopTheme, DesktopThemeColors } from './types'
+
+const USER_THEMES_KEY = 'hermes-desktop-user-themes-v1'
+
+// The minimal set of color keys a stored theme must carry to be usable. We keep
+// this loose — `applyTheme` tolerates missing optionals via fallbacks — but a
+// theme with no background/foreground/primary is junk and gets dropped.
+const REQUIRED_COLOR_KEYS: ReadonlyArray<keyof DesktopThemeColors> = ['background', 'foreground', 'primary']
+
+function isValidTheme(value: unknown): value is DesktopTheme {
+  if (!value || typeof value !== 'object') {
+    return false
+  }
+
+  const theme = value as Partial<DesktopTheme>
+
+  if (typeof theme.name !== 'string' || typeof theme.label !== 'string' || !theme.colors) {
+    return false
+  }
+
+  const colors = theme.colors as unknown as Record<string, unknown>
+
+  return REQUIRED_COLOR_KEYS.every(key => typeof colors[key] === 'string')
+}
+
+function readStored(): Record<string, DesktopTheme> {
+  try {
+    const raw = window.localStorage.getItem(USER_THEMES_KEY)
+
+    if (!raw) {
+      return {}
+    }
+
+    const parsed: unknown = JSON.parse(raw)
+
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      return {}
+    }
+
+    const out: Record<string, DesktopTheme> = {}
+
+    for (const [key, value] of Object.entries(parsed)) {
+      // Never let a stored theme shadow a built-in name.
+      if (!BUILTIN_THEMES[key] && isValidTheme(value)) {
+        out[key] = value
+      }
+    }
+
+    return out
+  } catch {
+    return {}
+  }
+}
+
+function persist(record: Record<string, DesktopTheme>) {
+  try {
+    window.localStorage.setItem(USER_THEMES_KEY, JSON.stringify(record))
+  } catch {
+    // Best-effort: a restricted storage context shouldn't break theming.
+  }
+}
+
+/** Reactive map of installed user themes, keyed by slug. */
+export const $userThemes = atom<Record<string, DesktopTheme>>(typeof window === 'undefined' ? {} : readStored())
+
+/** Install (or replace) a user theme. Returns the stored theme. */
+export function installUserTheme(theme: DesktopTheme): DesktopTheme {
+  if (BUILTIN_THEMES[theme.name]) {
+    throw new Error(`"${theme.name}" collides with a built-in theme.`)
+  }
+
+  if (!isValidTheme(theme)) {
+    throw new Error('Theme is missing required colors.')
+  }
+
+  const next = { ...$userThemes.get(), [theme.name]: theme }
+  $userThemes.set(next)
+  persist(next)
+
+  return theme
+}
+
+/** Remove a user theme by slug. No-op for unknown / built-in names. */
+export function removeUserTheme(name: string): void {
+  const current = $userThemes.get()
+
+  if (!current[name]) {
+    return
+  }
+
+  const next = { ...current }
+  delete next[name]
+  $userThemes.set(next)
+  persist(next)
+}
+
+export const isUserTheme = (name: string): boolean => Boolean($userThemes.get()[name])
+
+/** Resolve a theme by name across the merged registry (built-in + user). */
+export function resolveTheme(name: string): DesktopTheme | undefined {
+  return BUILTIN_THEMES[name] ?? $userThemes.get()[name]
+}
+
+/** Built-ins first (stable order), then user themes by install order. */
+export function listAllThemes(): DesktopTheme[] {
+  return [...Object.values(BUILTIN_THEMES), ...Object.values($userThemes.get())]
+}

package/agent/apps/desktop/src/themes/vscode.test.ts

@@ -0,0 +1,171 @@
+import { describe, expect, it } from 'vitest'
+
+import { contrastRatio } from './color'
+import { convertVscodeColorTheme, parseVscodeTheme, vscodeThemeSlug } from './vscode'
+
+describe('vscodeThemeSlug', () => {
+  it('namespaces, lowercases, and dashes', () => {
+    expect(vscodeThemeSlug('Dracula Soft')).toBe('vsc-dracula-soft')
+    expect(vscodeThemeSlug('  One Dark Pro!! ')).toBe('vsc-one-dark-pro')
+  })
+
+  it('falls back when the name has no usable characters', () => {
+    expect(vscodeThemeSlug('—')).toBe('vsc-theme')
+  })
+})
+
+describe('parseVscodeTheme (JSONC tolerance)', () => {
+  it('strips comments and trailing commas', () => {
+    const text = `{
+      // a line comment
+      "name": "Demo",
+      /* block comment */
+      "type": "dark",
+      "colors": {
+        "editor.background": "#1e1e2e", // inline
+      },
+    }`
+
+    const parsed = parseVscodeTheme(text)
+    expect(parsed.name).toBe('Demo')
+    expect(parsed.colors?.['editor.background']).toBe('#1e1e2e')
+  })
+
+  it('throws on a non-object', () => {
+    expect(() => parseVscodeTheme('42')).toThrow()
+  })
+})
+
+describe('convertVscodeColorTheme', () => {
+  const dracula = {
+    name: 'Dracula',
+    type: 'dark',
+    colors: {
+      'editor.background': '#282a36',
+      'editor.foreground': '#f8f8f2',
+      focusBorder: '#6272a4',
+      'editorWidget.background': '#21222c',
+      'sideBar.background': '#21222c',
+      errorForeground: '#ff5555',
+      // 8-digit hex (alpha) — must flatten over the background.
+      'panel.border': '#bd93f900'
+    }
+  }
+
+  it('maps the load-bearing tokens onto the palette', () => {
+    const { theme } = convertVscodeColorTheme(dracula, { source: 'dracula-theme.theme-dracula' })
+
+    expect(theme.name).toBe('vsc-dracula')
+    expect(theme.label).toBe('Dracula')
+    expect(theme.description).toContain('dracula-theme.theme-dracula')
+    expect(theme.colors.background).toBe('#282a36')
+    expect(theme.colors.foreground).toBe('#f8f8f2')
+    // One accent drives primary + ring + midground together...
+    expect(theme.colors.ring).toBe(theme.colors.primary)
+    expect(theme.colors.midground).toBe(theme.colors.primary)
+    // ...and it's nudged until it reads on the sidebar it labels (the dim
+    // focusBorder #6272a4 sits below AA, so it's lifted).
+    expect(contrastRatio(theme.colors.primary, theme.colors.sidebarBackground!)).toBeGreaterThanOrEqual(4.5)
+    expect(theme.colors.popover).toBe('#21222c')
+    expect(theme.colors.sidebarBackground).toBe('#21222c')
+    expect(theme.colors.destructive).toBe('#ff5555')
+  })
+
+  it('flattens alpha hex over the background (no #rrggbbaa leaks)', () => {
+    const { theme } = convertVscodeColorTheme(dracula)
+    expect(theme.colors.border).toMatch(/^#[0-9a-f]{6}$/)
+    // 00 alpha over the bg means the border collapses to the background.
+    expect(theme.colors.border).toBe('#282a36')
+  })
+
+  it('renders identically in both modes (single palette in both slots)', () => {
+    const { theme } = convertVscodeColorTheme(dracula)
+    expect(theme.darkColors).toBe(theme.colors)
+  })
+
+  it('records derived fallbacks for omitted tokens', () => {
+    const { derived } = convertVscodeColorTheme({
+      name: 'Sparse',
+      type: 'dark',
+      colors: { 'editor.background': '#101010', 'editor.foreground': '#fafafa' }
+    })
+
+    // No accent/elevated/sidebar/error tokens → all derived. The accent records
+    // its first candidate (button.background) when none of the family is present.
+    expect(derived).toContain('button.background')
+    expect(derived).toContain('editorWidget.background')
+    expect(derived).toContain('editorError.foreground')
+  })
+
+  it('buckets light vs dark from background luminance when type is absent', () => {
+    const light = convertVscodeColorTheme({
+      name: 'Bright',
+      colors: { 'editor.background': '#ffffff', 'editor.foreground': '#1a1a1a' }
+    }).theme
+
+    // A light background should keep a near-white background, not synth dark.
+    expect(light.colors.background).toBe('#ffffff')
+  })
+
+  it('throws when there is no colors map', () => {
+    expect(() => convertVscodeColorTheme({ name: 'Empty' })).toThrow(/colors/)
+  })
+
+  const fullAnsi = {
+    'terminal.ansiBlack': '#073642',
+    'terminal.ansiRed': '#dc322f',
+    'terminal.ansiGreen': '#859900',
+    'terminal.ansiYellow': '#b58900',
+    'terminal.ansiBlue': '#268bd2',
+    'terminal.ansiMagenta': '#d33682',
+    'terminal.ansiCyan': '#2aa198',
+    'terminal.ansiWhite': '#eee8d5',
+    'terminal.ansiBrightBlack': '#002b36',
+    'terminal.ansiBrightRed': '#cb4b16',
+    'terminal.ansiBrightGreen': '#586e75',
+    'terminal.ansiBrightYellow': '#657b83',
+    'terminal.ansiBrightBlue': '#839496',
+    'terminal.ansiBrightMagenta': '#6c71c4',
+    'terminal.ansiBrightCyan': '#93a1a1',
+    'terminal.ansiBrightWhite': '#fdf6e3'
+  }
+
+  it('lifts the ANSI palette when the full base-8 set is present', () => {
+    const { theme } = convertVscodeColorTheme({
+      name: 'Solarized Dark',
+      type: 'dark',
+      colors: {
+        'editor.background': '#002b36',
+        'editor.foreground': '#93a1a1',
+        'terminal.foreground': '#839496',
+        'terminalCursor.foreground': '#93a1a1',
+        // Alpha selection must survive un-flattened — xterm blends it.
+        'terminal.selectionBackground': '#073642aa',
+        ...fullAnsi
+      }
+    })
+
+    expect(theme.terminal?.red).toBe('#dc322f')
+    expect(theme.terminal?.brightWhite).toBe('#fdf6e3')
+    expect(theme.terminal?.foreground).toBe('#839496')
+    expect(theme.terminal?.cursor).toBe('#93a1a1')
+    expect(theme.terminal?.selectionBackground).toBe('#073642aa')
+    // No background slot — the pane keeps the live surface (transparency).
+    expect('background' in (theme.terminal ?? {})).toBe(false)
+  })
+
+  it('keeps the default palette (no terminal slot) when the ANSI set is partial', () => {
+    const { theme } = convertVscodeColorTheme({
+      name: 'Half',
+      type: 'dark',
+      colors: {
+        'editor.background': '#101010',
+        'editor.foreground': '#fafafa',
+        'terminal.ansiRed': '#ff0000',
+        'terminal.ansiGreen': '#00ff00'
+      }
+    })
+
+    expect(theme.terminal).toBeUndefined()
+  })
+})