@vladimirven/openswe 0.1.0

package/src/theme/context.tsx

@@ -0,0 +1,170 @@
+/**
+ * Theme context for OpenSWE
+ *
+ * Provides reactive theme access throughout the TUI
+ */
+
+import {
+  createContext,
+  useContext,
+  createSignal,
+  onMount,
+  createMemo,
+  type JSX,
+  type Accessor,
+} from "solid-js"
+import type { ResolvedTheme, ThemeJson, ThemeMode } from "./types"
+import { BUNDLED_THEMES, DEFAULT_THEME, resolveTheme } from "./loader"
+import { loadCustomThemes } from "./custom"
+
+// ============================================================================
+// Theme Context Type
+// ============================================================================
+
+interface ThemeContextValue {
+  /** Current resolved theme colors */
+  theme: Accessor<ResolvedTheme>
+  /** Current theme name */
+  themeName: Accessor<string>
+  /** Current theme mode (dark/light) */
+  themeMode: Accessor<ThemeMode>
+  /** Set the active theme by name */
+  setTheme: (name: string) => void
+  /** Set the theme mode */
+  setThemeMode: (mode: ThemeMode) => void
+  /** List of all available theme names */
+  availableThemes: Accessor<string[]>
+  /** Check if a theme is a custom (user-defined) theme */
+  isCustomTheme: (name: string) => boolean
+}
+
+// ============================================================================
+// Context Creation
+// ============================================================================
+
+const ThemeContext = createContext<ThemeContextValue>()
+
+// ============================================================================
+// Theme Provider
+// ============================================================================
+
+interface ThemeProviderProps {
+  children: JSX.Element
+  /** Initial theme name (default: tokyonight) */
+  initialTheme?: string
+  /** Initial theme mode (default: dark) */
+  initialMode?: ThemeMode
+}
+
+/**
+ * Theme provider component
+ *
+ * Wraps the application and provides reactive theme access
+ */
+export function ThemeProvider(props: ThemeProviderProps): JSX.Element {
+  const [themeName, setThemeName] = createSignal(
+    props.initialTheme ?? DEFAULT_THEME,
+  )
+  const [themeMode, setThemeMode] = createSignal<ThemeMode>(
+    props.initialMode ?? "dark",
+  )
+  const [customThemes, setCustomThemes] = createSignal<
+    Record<string, ThemeJson>
+  >({})
+
+  // Load custom themes on mount
+  onMount(async () => {
+    const themes = await loadCustomThemes()
+    setCustomThemes(themes)
+  })
+
+  // Combined themes (bundled + custom)
+  const allThemes = createMemo(() => ({
+    ...BUNDLED_THEMES,
+    ...customThemes(),
+  }))
+
+  // Available theme names (sorted)
+  const availableThemes = createMemo(() =>
+    Object.keys(allThemes()).sort(),
+  )
+
+  // Check if a theme is custom
+  const isCustomTheme = (name: string): boolean => {
+    return name in customThemes()
+  }
+
+  // Resolved theme (reactive)
+  const theme = createMemo(() => {
+    const name = themeName()
+    const mode = themeMode()
+    const themes = allThemes()
+
+    // Try to get the requested theme, fall back to default
+    // DEFAULT_THEME is always present in BUNDLED_THEMES
+    const themeJson = themes[name] ?? BUNDLED_THEMES[DEFAULT_THEME]!
+    return resolveTheme(themeJson, mode)
+  })
+
+  // Set theme with validation
+  const setTheme = (name: string): void => {
+    const themes = allThemes()
+    if (name in themes) {
+      setThemeName(name)
+    } else {
+      // Fall back to default if theme doesn't exist
+      setThemeName(DEFAULT_THEME)
+    }
+  }
+
+  const contextValue: ThemeContextValue = {
+    theme,
+    themeName,
+    themeMode,
+    setTheme,
+    setThemeMode,
+    availableThemes,
+    isCustomTheme,
+  }
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {props.children}
+    </ThemeContext.Provider>
+  )
+}
+
+// ============================================================================
+// Hook
+// ============================================================================
+
+/**
+ * Use the theme context
+ *
+ * Must be used within a ThemeProvider
+ *
+ * @returns Theme context value
+ * @throws Error if used outside ThemeProvider
+ */
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider")
+  }
+  return context
+}
+
+// ============================================================================
+// Static Theme Access
+// ============================================================================
+
+/**
+ * Get the default theme (for use outside of reactive context)
+ *
+ * This is useful for components that need theme colors but can't use
+ * the reactive context (e.g., during initialization)
+ */
+export function getDefaultTheme(): ResolvedTheme {
+  // DEFAULT_THEME is always present in BUNDLED_THEMES
+  return resolveTheme(BUNDLED_THEMES[DEFAULT_THEME]!, "dark")
+}

package/src/theme/custom.ts

@@ -0,0 +1,134 @@
+/**
+ * Custom theme loader for OpenSWE
+ *
+ * Loads user-defined themes from ~/.config/openswe/themes/
+ */
+
+import { homedir } from "os"
+import path from "path"
+import { Glob } from "bun"
+import type { ThemeJson } from "./types"
+import { logger } from "@/utils/logger"
+
+// ============================================================================
+// Custom Theme Directory
+// ============================================================================
+
+/** Get the custom themes directory path */
+export function getCustomThemesDir(): string {
+  return path.join(homedir(), ".config", "openswe", "themes")
+}
+
+// ============================================================================
+// Custom Theme Loader
+// ============================================================================
+
+/**
+ * Load all custom themes from the user's config directory
+ *
+ * Themes are loaded from ~/.config/openswe/themes/*.json
+ * Invalid themes are skipped with a warning
+ *
+ * @returns Record of theme name to theme JSON
+ */
+export async function loadCustomThemes(): Promise<Record<string, ThemeJson>> {
+  const themesDir = getCustomThemesDir()
+  const result: Record<string, ThemeJson> = {}
+
+  try {
+    // Check if themes directory exists
+    const dirFile = Bun.file(themesDir)
+    const dirExists = await dirFile.exists()
+
+    if (!dirExists) {
+      // Directory doesn't exist - that's fine, no custom themes
+      return result
+    }
+
+    // Scan for JSON files
+    const glob = new Glob("*.json")
+
+    for await (const file of glob.scan({ cwd: themesDir, absolute: false })) {
+      const name = path.basename(file, ".json")
+      const filePath = path.join(themesDir, file)
+
+      try {
+        const content = await Bun.file(filePath).json()
+
+        // Basic validation - must have a theme object
+        if (!content.theme || typeof content.theme !== "object") {
+          logger.warn(`Invalid custom theme ${name}: missing 'theme' object`)
+          continue
+        }
+
+        // Validate required colors exist
+        const requiredColors = [
+          "primary",
+          "secondary",
+          "accent",
+          "error",
+          "warning",
+          "success",
+          "info",
+          "text",
+          "textMuted",
+          "background",
+          "backgroundPanel",
+          "backgroundElement",
+          "border",
+          "borderActive",
+          "borderSubtle",
+        ]
+
+        const missingColors = requiredColors.filter(
+          (c) => !(c in content.theme),
+        )
+        if (missingColors.length > 0) {
+          logger.warn(
+            `Invalid custom theme ${name}: missing colors: ${missingColors.join(", ")}`,
+          )
+          continue
+        }
+
+        result[name] = content as ThemeJson
+        logger.debug(`Loaded custom theme: ${name}`)
+      } catch (error) {
+        logger.warn(`Failed to load custom theme ${name}:`, error)
+      }
+    }
+  } catch (error) {
+    // If we can't read the directory at all, just return empty
+    logger.debug("Could not read custom themes directory:", error)
+  }
+
+  return result
+}
+
+/**
+ * Load a single custom theme by name
+ *
+ * @param name - Theme name (without .json extension)
+ * @returns Theme JSON if found, undefined otherwise
+ */
+export async function loadCustomTheme(
+  name: string,
+): Promise<ThemeJson | undefined> {
+  const themesDir = getCustomThemesDir()
+  const filePath = path.join(themesDir, `${name}.json`)
+
+  try {
+    const file = Bun.file(filePath)
+    if (!(await file.exists())) {
+      return undefined
+    }
+
+    const content = await file.json()
+    if (!content.theme || typeof content.theme !== "object") {
+      return undefined
+    }
+
+    return content as ThemeJson
+  } catch {
+    return undefined
+  }
+}

package/src/theme/index.ts

@@ -0,0 +1,58 @@
+/**
+ * Theme module for OpenSWE
+ *
+ * Provides a complete theming system with 33+ bundled themes
+ * and support for custom user themes.
+ *
+ * @example
+ * ```tsx
+ * // In app root
+ * import { ThemeProvider } from "@/theme"
+ *
+ * <ThemeProvider initialTheme="tokyonight">
+ *   <App />
+ * </ThemeProvider>
+ *
+ * // In components
+ * import { useTheme } from "@/theme"
+ *
+ * const { theme, themeName, setTheme } = useTheme()
+ * console.log(theme().primary)  // "#7aa2f7"
+ * ```
+ */
+
+// Types
+export type {
+  ThemeJson,
+  ResolvedTheme,
+  ThemeMode,
+  BundledThemeName,
+  ColorValue,
+  ColorVariant,
+  HexColor,
+  RefName,
+} from "./types"
+export { isHexColor, isColorVariant } from "./types"
+
+// Loader
+export {
+  BUNDLED_THEMES,
+  DEFAULT_THEME,
+  getBundledThemeNames,
+  resolveTheme,
+  getTheme,
+} from "./loader"
+
+// Custom themes
+export {
+  getCustomThemesDir,
+  loadCustomThemes,
+  loadCustomTheme,
+} from "./custom"
+
+// Context
+export {
+  ThemeProvider,
+  useTheme,
+  getDefaultTheme,
+} from "./context"

package/src/theme/loader.ts

@@ -0,0 +1,264 @@
+/**
+ * Theme loader for OpenSWE
+ *
+ * Loads bundled themes and resolves color references
+ */
+
+import type {
+  ThemeJson,
+  ResolvedTheme,
+  ColorValue,
+  ThemeMode,
+  HexColor,
+  RefName,
+} from "./types"
+import { isHexColor, isColorVariant } from "./types"
+
+// ============================================================================
+// Bundled Theme Imports
+// ============================================================================
+
+import aura from "./themes/aura.json"
+import ayu from "./themes/ayu.json"
+import carbonfox from "./themes/carbonfox.json"
+import catppuccin from "./themes/catppuccin.json"
+import catppuccinFrappe from "./themes/catppuccin-frappe.json"
+import catppuccinMacchiato from "./themes/catppuccin-macchiato.json"
+import cobalt2 from "./themes/cobalt2.json"
+import cursor from "./themes/cursor.json"
+import dracula from "./themes/dracula.json"
+import everforest from "./themes/everforest.json"
+import flexoki from "./themes/flexoki.json"
+import github from "./themes/github.json"
+import gruvbox from "./themes/gruvbox.json"
+import kanagawa from "./themes/kanagawa.json"
+import lucentOrng from "./themes/lucent-orng.json"
+import material from "./themes/material.json"
+import matrix from "./themes/matrix.json"
+import mercury from "./themes/mercury.json"
+import monokai from "./themes/monokai.json"
+import nightowl from "./themes/nightowl.json"
+import nord from "./themes/nord.json"
+import oneDark from "./themes/one-dark.json"
+import opencode from "./themes/opencode.json"
+import orng from "./themes/orng.json"
+import osakaJade from "./themes/osaka-jade.json"
+import palenight from "./themes/palenight.json"
+import rosepine from "./themes/rosepine.json"
+import solarized from "./themes/solarized.json"
+import synthwave84 from "./themes/synthwave84.json"
+import tokyonight from "./themes/tokyonight.json"
+import vercel from "./themes/vercel.json"
+import vesper from "./themes/vesper.json"
+import zenburn from "./themes/zenburn.json"
+
+// ============================================================================
+// Bundled Themes Registry
+// ============================================================================
+
+/** All bundled themes, keyed by name */
+export const BUNDLED_THEMES: Record<string, ThemeJson> = {
+  aura: aura as ThemeJson,
+  ayu: ayu as ThemeJson,
+  carbonfox: carbonfox as ThemeJson,
+  catppuccin: catppuccin as ThemeJson,
+  "catppuccin-frappe": catppuccinFrappe as ThemeJson,
+  "catppuccin-macchiato": catppuccinMacchiato as ThemeJson,
+  cobalt2: cobalt2 as ThemeJson,
+  cursor: cursor as ThemeJson,
+  dracula: dracula as ThemeJson,
+  everforest: everforest as ThemeJson,
+  flexoki: flexoki as ThemeJson,
+  github: github as ThemeJson,
+  gruvbox: gruvbox as ThemeJson,
+  kanagawa: kanagawa as ThemeJson,
+  "lucent-orng": lucentOrng as ThemeJson,
+  material: material as ThemeJson,
+  matrix: matrix as ThemeJson,
+  mercury: mercury as ThemeJson,
+  monokai: monokai as ThemeJson,
+  nightowl: nightowl as ThemeJson,
+  nord: nord as ThemeJson,
+  "one-dark": oneDark as ThemeJson,
+  opencode: opencode as ThemeJson,
+  orng: orng as ThemeJson,
+  "osaka-jade": osakaJade as ThemeJson,
+  palenight: palenight as ThemeJson,
+  rosepine: rosepine as ThemeJson,
+  solarized: solarized as ThemeJson,
+  synthwave84: synthwave84 as ThemeJson,
+  tokyonight: tokyonight as ThemeJson,
+  vercel: vercel as ThemeJson,
+  vesper: vesper as ThemeJson,
+  zenburn: zenburn as ThemeJson,
+}
+
+/** Default theme name */
+export const DEFAULT_THEME = "tokyonight"
+
+/** Get list of all bundled theme names */
+export function getBundledThemeNames(): string[] {
+  return Object.keys(BUNDLED_THEMES).sort()
+}
+
+// ============================================================================
+// Theme Resolution
+// ============================================================================
+
+/**
+ * Resolve a color value to a hex string
+ *
+ * @param color - The color value to resolve
+ * @param defs - Color definitions from the theme
+ * @param mode - Dark or light mode
+ * @param visited - Track visited refs to detect cycles
+ * @returns Resolved hex color string
+ */
+function resolveColor(
+  color: ColorValue,
+  defs: Record<string, HexColor | RefName>,
+  mode: ThemeMode,
+  visited: Set<string> = new Set(),
+): string {
+  // If it's a variant object, extract the appropriate mode value
+  if (isColorVariant(color)) {
+    return resolveColor(color[mode], defs, mode, visited)
+  }
+
+  // If it's a hex color, return it directly
+  if (isHexColor(color)) {
+    return color
+  }
+
+  // It's a reference name - look it up in defs
+  const refName = color as RefName
+
+  // Check for circular reference
+  if (visited.has(refName)) {
+    throw new Error(`Circular color reference detected: ${refName}`)
+  }
+
+  const resolved = defs[refName]
+  if (resolved === undefined) {
+    throw new Error(`Unknown color reference: ${refName}`)
+  }
+
+  // Add to visited set and recurse
+  visited.add(refName)
+  return resolveColor(resolved, defs, mode, visited)
+}
+
+/**
+ * Resolve a theme JSON to a fully resolved theme object
+ *
+ * @param theme - The theme JSON to resolve
+ * @param mode - Dark or light mode (default: dark)
+ * @returns Resolved theme with all hex colors
+ */
+export function resolveTheme(
+  theme: ThemeJson,
+  mode: ThemeMode = "dark",
+): ResolvedTheme {
+  const defs = theme.defs ?? {}
+  const t = theme.theme
+
+  // Helper to resolve with fallback
+  const resolve = (color: ColorValue | undefined, fallback: string): string => {
+    if (color === undefined) return fallback
+    try {
+      return resolveColor(color, defs, mode)
+    } catch {
+      return fallback
+    }
+  }
+
+  // Resolve core colors (required)
+  const primary = resolveColor(t.primary, defs, mode)
+  const secondary = resolveColor(t.secondary, defs, mode)
+  const accent = resolveColor(t.accent, defs, mode)
+  const error = resolveColor(t.error, defs, mode)
+  const warning = resolveColor(t.warning, defs, mode)
+  const success = resolveColor(t.success, defs, mode)
+  const info = resolveColor(t.info, defs, mode)
+  const text = resolveColor(t.text, defs, mode)
+  const textMuted = resolveColor(t.textMuted, defs, mode)
+  const background = resolveColor(t.background, defs, mode)
+  const backgroundPanel = resolveColor(t.backgroundPanel, defs, mode)
+  const backgroundElement = resolveColor(t.backgroundElement, defs, mode)
+  const border = resolveColor(t.border, defs, mode)
+  const borderActive = resolveColor(t.borderActive, defs, mode)
+  const borderSubtle = resolveColor(t.borderSubtle, defs, mode)
+
+  return {
+    // Core colors
+    primary,
+    secondary,
+    accent,
+    error,
+    warning,
+    success,
+    info,
+    text,
+    textMuted,
+    background,
+    backgroundPanel,
+    backgroundElement,
+    border,
+    borderActive,
+    borderSubtle,
+
+    // Diff colors (with sensible defaults)
+    diffAdded: resolve(t.diffAdded, success),
+    diffRemoved: resolve(t.diffRemoved, error),
+    diffContext: resolve(t.diffContext, textMuted),
+    diffHunkHeader: resolve(t.diffHunkHeader, secondary),
+    diffHighlightAdded: resolve(t.diffHighlightAdded, success),
+    diffHighlightRemoved: resolve(t.diffHighlightRemoved, error),
+    diffAddedBg: resolve(t.diffAddedBg, backgroundPanel),
+    diffRemovedBg: resolve(t.diffRemovedBg, backgroundPanel),
+    diffContextBg: resolve(t.diffContextBg, backgroundPanel),
+    diffLineNumber: resolve(t.diffLineNumber, borderSubtle),
+    diffAddedLineNumberBg: resolve(t.diffAddedLineNumberBg, backgroundPanel),
+    diffRemovedLineNumberBg: resolve(t.diffRemovedLineNumberBg, backgroundPanel),
+
+    // Markdown colors (with sensible defaults)
+    markdownText: resolve(t.markdownText, text),
+    markdownHeading: resolve(t.markdownHeading, secondary),
+    markdownLink: resolve(t.markdownLink, primary),
+    markdownLinkText: resolve(t.markdownLinkText, info),
+    markdownCode: resolve(t.markdownCode, success),
+    markdownBlockQuote: resolve(t.markdownBlockQuote, warning),
+    markdownEmph: resolve(t.markdownEmph, warning),
+    markdownStrong: resolve(t.markdownStrong, accent),
+    markdownHorizontalRule: resolve(t.markdownHorizontalRule, textMuted),
+    markdownListItem: resolve(t.markdownListItem, primary),
+    markdownListEnumeration: resolve(t.markdownListEnumeration, info),
+    markdownImage: resolve(t.markdownImage, primary),
+    markdownImageText: resolve(t.markdownImageText, info),
+    markdownCodeBlock: resolve(t.markdownCodeBlock, text),
+
+    // Syntax highlighting (with sensible defaults)
+    syntaxComment: resolve(t.syntaxComment, textMuted),
+    syntaxKeyword: resolve(t.syntaxKeyword, secondary),
+    syntaxFunction: resolve(t.syntaxFunction, primary),
+    syntaxVariable: resolve(t.syntaxVariable, error),
+    syntaxString: resolve(t.syntaxString, success),
+    syntaxNumber: resolve(t.syntaxNumber, accent),
+    syntaxType: resolve(t.syntaxType, warning),
+    syntaxOperator: resolve(t.syntaxOperator, info),
+    syntaxPunctuation: resolve(t.syntaxPunctuation, text),
+  }
+}
+
+/**
+ * Get a resolved theme by name
+ *
+ * @param name - Theme name (must be a bundled theme name)
+ * @param mode - Dark or light mode (default: dark)
+ * @returns Resolved theme, or default theme if not found
+ */
+export function getTheme(name: string, mode: ThemeMode = "dark"): ResolvedTheme {
+  // DEFAULT_THEME is always present in BUNDLED_THEMES
+  const theme = BUNDLED_THEMES[name] ?? BUNDLED_THEMES[DEFAULT_THEME]!
+  return resolveTheme(theme, mode)
+}

package/src/theme/themes/aura.json

@@ -0,0 +1,69 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "darkBg": "#0f0f0f",
+    "darkBgPanel": "#15141b",
+    "darkBorder": "#2d2d2d",
+    "darkFgMuted": "#6d6d6d",
+    "darkFg": "#edecee",
+    "purple": "#a277ff",
+    "pink": "#f694ff",
+    "blue": "#82e2ff",
+    "red": "#ff6767",
+    "orange": "#ffca85",
+    "cyan": "#61ffca",
+    "green": "#9dff65"
+  },
+  "theme": {
+    "primary": "purple",
+    "secondary": "pink",
+    "accent": "purple",
+    "error": "red",
+    "warning": "orange",
+    "success": "cyan",
+    "info": "purple",
+    "text": "darkFg",
+    "textMuted": "darkFgMuted",
+    "background": "darkBg",
+    "backgroundPanel": "darkBgPanel",
+    "backgroundElement": "darkBgPanel",
+    "border": "darkBorder",
+    "borderActive": "darkFgMuted",
+    "borderSubtle": "darkBorder",
+    "diffAdded": "cyan",
+    "diffRemoved": "red",
+    "diffContext": "darkFgMuted",
+    "diffHunkHeader": "darkFgMuted",
+    "diffHighlightAdded": "cyan",
+    "diffHighlightRemoved": "red",
+    "diffAddedBg": "#354933",
+    "diffRemovedBg": "#3f191a",
+    "diffContextBg": "darkBgPanel",
+    "diffLineNumber": "darkBorder",
+    "diffAddedLineNumberBg": "#162620",
+    "diffRemovedLineNumberBg": "#26161a",
+    "markdownText": "darkFg",
+    "markdownHeading": "purple",
+    "markdownLink": "pink",
+    "markdownLinkText": "purple",
+    "markdownCode": "cyan",
+    "markdownBlockQuote": "darkFgMuted",
+    "markdownEmph": "orange",
+    "markdownStrong": "purple",
+    "markdownHorizontalRule": "darkFgMuted",
+    "markdownListItem": "purple",
+    "markdownListEnumeration": "purple",
+    "markdownImage": "pink",
+    "markdownImageText": "purple",
+    "markdownCodeBlock": "darkFg",
+    "syntaxComment": "darkFgMuted",
+    "syntaxKeyword": "pink",
+    "syntaxFunction": "purple",
+    "syntaxVariable": "purple",
+    "syntaxString": "cyan",
+    "syntaxNumber": "green",
+    "syntaxType": "purple",
+    "syntaxOperator": "pink",
+    "syntaxPunctuation": "darkFg"
+  }
+}