it is time

tasks/subtasks/theme-refactoring-01-create-schema.md

@@ -0,0 +1,63 @@
+# 01. Create JSON Theme Schema and File Structure
+
+meta:
+  id: theme-refactoring-01
+  feature: theme-refactoring-json-format
+  priority: P0
+  depends_on: []
+  tags: [implementation, infrastructure]
+
+objective:
+- Create the JSON theme schema and establish the file structure for theme definitions
+- Define the theme.json schema that opencode uses
+- Create the directory structure for JSON theme files
+
+deliverables:
+- `src/types/theme-schema.ts` - JSON theme schema definition
+- `src/themes/*.json` - Directory for theme JSON files
+- `src/themes/schema.json` - Theme schema reference
+
+steps:
+- Step 1.1: Create `src/types/theme-schema.ts` with TypeScript interfaces matching the opencode theme JSON structure
+  - Define `ThemeJson` interface with `$schema`, `defs`, and `theme` properties
+  - Define `ColorValue` type supporting hex colors, color references, variants, and RGBA
+  - Define `Variant` type for light/dark mode color definitions
+  - Export interfaces for type checking
+
+- Step 1.2: Create `src/themes/schema.json` with the opencode theme schema reference
+  - Add `$schema: "https://opencode.ai/theme.json"`
+  - Document the theme structure in comments
+
+- Step 1.3: Create `src/themes/` directory
+  - Ensure directory exists for JSON theme files
+
+- Step 1.4: Create a sample theme file in `src/themes/opencode.json`
+  - Use the opencode theme as reference
+  - Include proper `$schema` reference
+  - Define `defs` with all color references
+  - Define `theme` with semantic color mappings
+
+tests:
+- Unit:
+  - Test `ThemeJson` type definition matches opencode structure
+  - Test `ColorValue` type accepts hex colors, references, variants, and RGBA
+  - Test `Variant` type structure is correct
+
+- Integration/e2e:
+  - Verify JSON file can be parsed without errors
+  - Validate schema reference is correct
+
+acceptance_criteria:
+- `src/types/theme-schema.ts` file exists with all required interfaces
+- `src/themes/schema.json` contains valid schema reference
+- `src/themes/` directory is created
+- `src/themes/opencode.json` can be imported and parsed successfully
+
+validation:
+- Run: `bun run typecheck` - Should pass with no type errors
+- Run: `cat src/themes/opencode.json | jq .` - Should be valid JSON
+
+notes:
+- Follow opencode's theme.json structure exactly
+- Use TypeScript interfaces to ensure type safety
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme/`

tasks/subtasks/theme-refactoring-02-convert-themes.md

@@ -0,0 +1,77 @@
+# 02. Convert Existing Themes to JSON Format
+
+meta:
+  id: theme-refactoring-02
+  feature: theme-refactoring-json-format
+  priority: P0
+  depends_on: [theme-refactoring-01]
+  tags: [implementation, migration]
+
+objective:
+- Convert all existing PodTui themes (catppuccin, gruvbox, tokyo, nord) from TypeScript constants to JSON format
+- Ensure each theme matches the opencode JSON structure
+- Maintain color fidelity with original theme definitions
+
+deliverables:
+- `src/themes/catppuccin.json` - Catppuccin theme in JSON format
+- `src/themes/gruvbox.json` - Gruvbox theme in JSON format
+- `src/themes/tokyo.json` - Tokyo Night theme in JSON format
+- `src/themes/nord.json` - Nord theme in JSON format
+
+steps:
+- Step 2.1: Convert `catppuccin` theme from `src/types/desktop-theme.ts` to JSON
+  - Extract all color definitions from `THEMES_DESKTOP.variants.find((v) => v.name === "catppuccin")!.colors`
+  - Create `defs` object with all color references (dark and light variants)
+  - Create `theme` object with semantic mappings
+  - Add `$schema` reference
+  - Verify color values match original definitions
+
+- Step 2.2: Convert `gruvbox` theme from `src/types/desktop-theme.ts` to JSON
+  - Extract all color definitions from `THEMES_DESKTOP.variants.find((v) => v.name === "gruvbox")!.colors`
+  - Create `defs` object with all color references
+  - Create `theme` object with semantic mappings
+  - Add `$schema` reference
+
+- Step 2.3: Convert `tokyo` theme from `src/types/desktop-theme.ts` to JSON
+  - Extract all color definitions from `THEMES_DESKTOP.variants.find((v) => v.name === "tokyo")!.colors`
+  - Create `defs` object with all color references
+  - Create `theme` object with semantic mappings
+  - Add `$schema` reference
+
+- Step 2.4: Convert `nord` theme from `src/types/desktop-theme.ts` to JSON
+  - Extract all color definitions from `THEMES_DESKTOP.variants.find((v) => v.name === "nord")!.colors`
+  - Create `defs` object with all color references
+  - Create `theme` object with semantic mappings
+  - Add `$schema` reference
+
+- Step 2.5: Verify all JSON files are valid
+  - Check syntax with `bun run typecheck`
+  - Ensure all imports work correctly
+
+tests:
+- Unit:
+  - Test each JSON file can be imported without errors
+  - Verify color values match original TypeScript definitions
+
+- Integration/e2e:
+  - Load each theme and verify all colors are present
+  - Check that theme structure matches expected schema
+
+acceptance_criteria:
+- All four theme JSON files exist in `src/themes/`
+- Each JSON file follows the theme schema
+- Color values match original theme definitions exactly
+- All JSON files are valid and can be parsed
+
+validation:
+- Run: `bun run typecheck` - Should pass
+- Run: `cat src/themes/catppuccin.json | jq .` - Should be valid JSON
+- Run: `cat src/themes/gruvbox.json | jq .` - Should be valid JSON
+- Run: `cat src/themes/tokyo.json | jq .` - Should be valid JSON
+- Run: `cat src/themes/nord.json | jq .` - Should be valid JSON
+
+notes:
+- Use opencode's theme structure as reference
+- Maintain backward compatibility with existing color definitions
+- Ensure both dark and light variants are included if available
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme/`

tasks/subtasks/theme-refactoring-03-update-types.md

@@ -0,0 +1,70 @@
+# 03. Update Type Definitions for Color References and Variants
+
+meta:
+  id: theme-refactoring-03
+  feature: theme-refactoring-json-format
+  priority: P0
+  depends_on: [theme-refactoring-01]
+  tags: [implementation, types]
+
+objective:
+- Update type definitions to support the new JSON theme structure
+- Add support for color references, variants, and light/dark mode
+- Maintain backward compatibility with existing code
+
+deliverables:
+- `src/types/theme-schema.ts` - Updated with new types
+- `src/types/settings.ts` - Updated with color reference types
+- `src/types/desktop-theme.ts` - Updated to support JSON themes
+
+steps:
+- Step 3.1: Update `src/types/theme-schema.ts`
+  - Export `ThemeJson` interface
+  - Export `ColorValue` type
+  - Export `Variant` type
+  - Add `ThemeColors` type for resolved theme colors
+
+- Step 3.2: Update `src/types/settings.ts`
+  - Add `ThemeJson` import
+  - Add `ColorValue` type definition
+  - Add `Variant` type definition
+  - Update `ThemeColors` to support color references
+  - Add `ThemeJson` type for JSON theme files
+
+- Step 3.3: Update `src/types/desktop-theme.ts`
+  - Add imports for `ThemeJson`, `ColorValue`, `Variant`
+  - Add `ThemeJson` type for JSON theme files
+  - Update existing types to support color references
+  - Add helper functions for JSON theme loading
+
+- Step 3.4: Ensure backward compatibility
+  - Keep existing `ThemeColors` structure for resolved themes
+  - Ensure existing code can still use theme colors as strings
+  - Add type guards for color references
+
+tests:
+- Unit:
+  - Test `ThemeJson` type accepts valid JSON theme structure
+  - Test `ColorValue` type accepts hex colors, references, variants, and RGBA
+  - Test `Variant` type structure is correct
+  - Test existing `ThemeColors` type remains compatible
+
+- Integration/e2e:
+  - Verify type imports work correctly
+  - Test type inference with JSON theme files
+
+acceptance_criteria:
+- All type definitions are updated and exported
+- Backward compatibility maintained with existing code
+- New types support color references and variants
+- Type checking passes without errors
+
+validation:
+- Run: `bun run typecheck` - Should pass with no errors
+- Verify existing components can still use theme colors
+- Test type inference with new theme JSON files
+
+notes:
+- Use TypeScript's `with { type: "json" }` for JSON imports
+- Ensure all types are properly exported for use across the codebase
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme.tsx`

tasks/subtasks/theme-refactoring-04-theme-resolution.md

@@ -0,0 +1,83 @@
+# 04. Create Theme Resolution Logic with Color Reference Lookup
+
+meta:
+  id: theme-refactoring-04
+  feature: theme-refactoring-json-format
+  priority: P0
+  depends_on: [theme-refactoring-02, theme-refactoring-03]
+  tags: [implementation, logic]
+
+objective:
+- Implement theme resolution logic that handles color references and variants
+- Create function to resolve colors from theme JSON files
+- Support hex colors, color references, ANSI codes, and RGBA values
+- Handle light/dark mode selection based on current mode
+
+deliverables:
+- `src/utils/theme-resolver.ts` - Theme resolution utility
+- `src/utils/ansi-to-rgba.ts` - ANSI color conversion utility
+
+steps:
+- Step 4.1: Create `src/utils/ansi-to-rgba.ts`
+  - Implement `ansiToRgba(code: number): RGBA` function
+  - Handle standard ANSI colors (0-15)
+  - Handle 6x6x6 color cube (16-231)
+  - Handle grayscale ramp (232-255)
+  - Add type definitions for RGBA
+
+- Step 4.2: Create `src/utils/theme-resolver.ts`
+  - Implement `resolveTheme(theme: ThemeJson, mode: "dark" | "light"): ThemeColors`
+  - Create `resolveColor(c: ColorValue): RGBA` helper function
+  - Handle RGBA objects directly
+  - Handle hex color strings
+  - Handle color references from `defs`
+  - Handle variants (dark/light mode)
+  - Handle ANSI codes
+  - Add error handling for invalid color references
+
+- Step 4.3: Implement color reference resolution
+  - Create lookup logic for `defs` object
+  - Add fallback to theme colors if reference not in defs
+  - Throw descriptive errors for invalid references
+
+- Step 4.4: Handle optional theme properties
+  - Support `selectedListItemText` property
+  - Support `backgroundMenu` property
+  - Support `thinkingOpacity` property
+  - Add default values for missing properties
+
+tests:
+- Unit:
+  - Test `ansiToRgba` with ANSI codes 0-15
+  - Test `ansiToRgba` with color cube codes 16-231
+  - Test `ansiToRgba` with grayscale codes 232-255
+  - Test `resolveColor` with hex colors
+  - Test `resolveColor` with color references
+  - Test `resolveColor` with light/dark variants
+  - Test `resolveColor` with RGBA objects
+  - Test `resolveTheme` with complete theme JSON
+  - Test `resolveTheme` with missing optional properties
+  - Test error handling for invalid color references
+
+- Integration/e2e:
+  - Test resolving colors from actual theme JSON files
+  - Verify light/dark mode selection works correctly
+
+acceptance_criteria:
+- `src/utils/ansi-to-rgba.ts` file exists with conversion functions
+- `src/utils/theme-resolver.ts` file exists with resolution logic
+- All color value types are handled correctly
+- Error messages are descriptive and helpful
+- Theme resolution works with both light and dark modes
+
+validation:
+- Run: `bun run typecheck` - Should pass
+- Run unit tests with `bun test src/utils/theme-resolver.test.ts`
+- Test with sample theme JSON files
+- Verify error messages are clear
+
+notes:
+- Use opencode's implementation as reference for color resolution
+- Ensure RGBA values are normalized to 0-1 range
+- Add comprehensive error handling for invalid inputs
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme.tsx` (lines 176-277)

tasks/subtasks/theme-refactoring-05-theme-context.md

@@ -0,0 +1,80 @@
+# 05. Migrate ThemeContext to SolidJS Pattern
+
+meta:
+  id: theme-refactoring-05
+  feature: theme-refactoring-json-format
+  priority: P0
+  depends_on: [theme-refactoring-04]
+  tags: [implementation, context]
+
+objective:
+- Migrate ThemeContext from basic React context to SolidJS context pattern
+- Implement reactive state management for theme switching
+- Add persistence for theme selection and mode
+- Support system theme detection
+
+deliverables:
+- `src/context/ThemeContext.tsx` - Updated with SolidJS pattern
+- `src/utils/theme-context.ts` - Theme context utilities
+
+steps:
+- Step 5.1: Update `src/context/ThemeContext.tsx`
+  - Import SolidJS hooks: `createSignal`, `createEffect`, `createMemo`, `createStore`
+  - Replace React context with SolidJS `createSimpleContext` pattern (from opencode)
+  - Add theme loading logic
+  - Implement reactive theme state
+  - Add system theme detection
+  - Support theme persistence via localStorage
+
+- Step 5.2: Implement theme state management
+  - Create store with `themes`, `mode`, `active`, `ready`
+  - Initialize with default theme (opencode)
+  - Load custom themes from JSON files
+  - Handle system theme detection
+
+- Step 5.3: Add reactive theme resolution
+  - Create `createMemo` for resolved theme colors
+  - Create `createMemo` for syntax highlighting
+  - Create `createMemo` for subtle syntax
+
+- Step 5.4: Implement theme switching
+  - Add `setTheme(theme: string)` method
+  - Add `setMode(mode: "dark" | "light")` method
+  - Persist theme and mode to localStorage
+
+- Step 5.5: Add system theme detection
+  - Detect terminal background and foreground colors
+  - Generate system theme based on terminal palette
+  - Handle system theme preference changes
+
+tests:
+- Unit:
+  - Test theme state initialization
+  - Test theme switching logic
+  - Test mode switching logic
+  - Test system theme detection
+  - Test localStorage persistence
+
+- Integration/e2e:
+  - Test theme context in component tree
+  - Test reactive theme updates
+  - Test system theme changes
+
+acceptance_criteria:
+- `src/context/ThemeContext.tsx` uses SolidJS pattern
+- Theme context provides reactive theme state
+- Theme switching works correctly
+- System theme detection is functional
+- Theme and mode are persisted to localStorage
+
+validation:
+- Run: `bun run typecheck` - Should pass
+- Run: `bun test src/context/ThemeContext.test.ts`
+- Test theme switching in application
+- Test system theme detection
+
+notes:
+- Use opencode's ThemeProvider pattern as reference
+- Follow SolidJS best practices for reactive state
+- Ensure proper cleanup of effects and listeners
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme.tsx` (lines 279-392)

tasks/subtasks/theme-refactoring-06-theme-loader.md

@@ -0,0 +1,79 @@
+# 06. Add Theme Loader for JSON Files and Custom Themes
+
+meta:
+  id: theme-refactoring-06
+  feature: theme-refactoring-json-format
+  priority: P1
+  depends_on: [theme-refactoring-02, theme-refactoring-04]
+  tags: [implementation, loading]
+
+objective:
+- Create theme loader to load JSON theme files
+- Support loading custom themes from multiple directories
+- Provide API for theme discovery and loading
+- Handle theme file validation
+
+deliverables:
+- `src/utils/theme-loader.ts` - Theme loader utilities
+- `src/utils/custom-themes.ts` - Custom theme loading logic
+
+steps:
+- Step 6.1: Create `src/utils/theme-loader.ts`
+  - Implement `loadTheme(name: string): Promise<ThemeJson>`
+  - Implement `loadThemeFromPath(path: string): Promise<ThemeJson>`
+  - Implement `getAllThemes(): Promise<Record<string, ThemeJson>>`
+  - Add error handling for missing or invalid theme files
+
+- Step 6.2: Create `src/utils/custom-themes.ts`
+  - Implement `getCustomThemes()` function
+  - Scan for theme files in multiple directories:
+    - `~/.config/podtui/themes/`
+    - `./.podtui/themes/`
+    - Project root `./themes/`
+  - Support custom theme files with `.json` extension
+  - Return merged theme registry
+
+- Step 6.3: Add theme file validation
+  - Validate theme JSON structure
+  - Check required properties (`defs`, `theme`)
+  - Validate color references in `defs`
+  - Add warning for optional properties
+
+- Step 6.4: Implement theme discovery
+  - List all available theme files
+  - Provide theme metadata (name, description)
+  - Support theme aliases (e.g., "catppuccin" -> "catppuccin.json")
+
+tests:
+- Unit:
+  - Test `loadTheme` with existing theme files
+  - Test `loadTheme` with missing theme files
+  - Test `loadThemeFromPath` with custom paths
+  - Test `getAllThemes` returns all available themes
+  - Test `getCustomThemes` scans multiple directories
+  - Test theme file validation
+
+- Integration/e2e:
+  - Test loading all available themes
+  - Test custom theme loading from directories
+  - Verify theme discovery works correctly
+
+acceptance_criteria:
+- `src/utils/theme-loader.ts` file exists with loading functions
+- `src/utils/custom-themes.ts` file exists with custom theme logic
+- Custom themes can be loaded from multiple directories
+- Theme validation prevents invalid files
+- Theme discovery API is functional
+
+validation:
+- Run: `bun run typecheck` - Should pass
+- Run: `bun test src/utils/theme-loader.test.ts`
+- Run: `bun test src/utils/custom-themes.test.ts`
+- Test loading all available themes manually
+- Test custom theme loading from directories
+
+notes:
+- Use opencode's `getCustomThemes` pattern as reference
+- Support both local and global theme directories
+- Add comprehensive error messages for invalid theme files
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme.tsx` (lines 394-419)

tasks/subtasks/theme-refactoring-07-system-theme.md

@@ -0,0 +1,83 @@
+# 07. Implement System Theme Detection with Terminal Palette
+
+meta:
+  id: theme-refactoring-07
+  feature: theme-refactoring-json-format
+  priority: P1
+  depends_on: [theme-refactoring-04, theme-refactoring-06]
+  tags: [implementation, detection]
+
+objective:
+- Implement system theme detection based on terminal palette
+- Generate system theme from terminal colors
+- Detect light/dark mode based on terminal background
+- Handle terminal color palette limitations
+
+deliverables:
+- `src/utils/system-theme.ts` - System theme detection utilities
+- `src/utils/color-generation.ts` - Color generation helpers
+
+steps:
+- Step 7.1: Create `src/utils/system-theme.ts`
+  - Implement `detectSystemTheme()` function
+  - Detect terminal background and foreground colors
+  - Determine light/dark mode based on luminance
+  - Return detected theme information
+
+- Step 7.2: Implement terminal palette detection
+  - Detect terminal colors using `@opentui/core` renderer
+  - Get default background and foreground colors
+  - Extract color palette (16 standard colors)
+  - Handle missing or invalid palette data
+
+- Step 7.3: Create `src/utils/color-generation.ts`
+  - Implement `generateGrayScale(bg: RGBA, isDark: boolean): Record<number, RGBA>`
+  - Implement `generateMutedTextColor(bg: RGBA, isDark: boolean): RGBA`
+  - Implement `tint(base: RGBA, overlay: RGBA, alpha: number): RGBA`
+  - Generate gray scale based on background luminance
+  - Generate muted text colors for readability
+
+- Step 7.4: Create system theme JSON generator
+  - Implement `generateSystemTheme(colors: TerminalColors, mode: "dark" | "light"): ThemeJson`
+  - Use ANSI color references for primary colors
+  - Generate appropriate background colors
+  - Generate diff colors with alpha blending
+  - Generate markdown and syntax colors
+
+- Step 7.5: Add system theme caching
+  - Cache terminal palette detection results
+  - Handle palette cache invalidation
+  - Support manual cache clear on SIGUSR2
+
+tests:
+- Unit:
+  - Test `detectSystemTheme` returns correct mode
+  - Test `generateGrayScale` produces correct grays
+  - Test `generateMutedTextColor` produces readable colors
+  - Test `tint` produces correct blended colors
+  - Test `generateSystemTheme` produces valid theme JSON
+
+- Integration/e2e:
+  - Test system theme detection in terminal
+  - Test theme generation with actual terminal palette
+  - Verify light/dark mode detection is accurate
+
+acceptance_criteria:
+- `src/utils/system-theme.ts` file exists with detection functions
+- `src/utils/color-generation.ts` file exists with generation helpers
+- System theme detection works correctly
+- Light/dark mode detection is accurate
+- Theme generation produces valid JSON
+
+validation:
+- Run: `bun run typecheck` - Should pass
+- Run: `bun test src/utils/system-theme.test.ts`
+- Run: `bun test src/utils/color-generation.test.ts`
+- Test system theme detection manually in terminal
+- Verify theme colors are readable
+
+notes:
+- Use opencode's system theme detection as reference
+- Handle terminal transparency gracefully
+- Add fallback for terminals without palette support
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme.tsx` (lines 428-535)

tasks/subtasks/theme-refactoring-08-syntax-highlighting.md

@@ -0,0 +1,83 @@
+# 08. Add Syntax Highlighting Integration
+
+meta:
+  id: theme-refactoring-08
+  feature: theme-refactoring-json-format
+  priority: P1
+  depends_on: [theme-refactoring-04, theme-refactoring-05]
+  tags: [implementation, syntax]
+
+objective:
+- Add syntax highlighting support using theme colors
+- Generate syntax rules from theme definitions
+- Support markdown syntax highlighting
+- Integrate with OpenTUI syntax highlighting
+
+deliverables:
+- `src/utils/syntax-highlighter.ts` - Syntax highlighting utilities
+- `src/utils/syntax-rules.ts` - Syntax rule generation
+
+steps:
+- Step 8.1: Create `src/utils/syntax-rules.ts`
+  - Implement `getSyntaxRules(theme: ThemeColors)` function
+  - Define syntax scopes and their mappings
+  - Map theme colors to syntax scopes:
+    - Default text
+    - Keywords (return, conditional, repeat, coroutine)
+    - Types (function, class, module)
+    - Variables (parameter, member, builtin)
+    - Strings, numbers, booleans
+    - Comments
+    - Operators and punctuation
+    - Markdown-specific scopes (headings, bold, italic, links)
+    - Diff scopes (added, removed, context)
+  - Add style properties (foreground, bold, italic, underline)
+
+- Step 8.2: Create `src/utils/syntax-highlighter.ts`
+  - Implement `generateSyntax(theme: ThemeColors)` function
+  - Implement `generateSubtleSyntax(theme: ThemeColors)` function
+  - Apply opacity to syntax colors for subtle highlighting
+  - Use theme's `thinkingOpacity` property
+
+- Step 8.3: Integrate with OpenTUI syntax highlighting
+  - Import `SyntaxStyle` from `@opentui/core`
+  - Use `SyntaxStyle.fromTheme()` to create syntax styles
+  - Apply syntax styles to code components
+
+- Step 8.4: Add syntax scope mappings
+  - Map common programming language scopes
+  - Map markdown and markup scopes
+  - Map diff and git scopes
+  - Add scope aliases for common patterns
+
+tests:
+- Unit:
+  - Test `getSyntaxRules` generates correct rules
+  - Test `generateSyntax` creates valid syntax styles
+  - Test `generateSubtleSyntax` applies opacity correctly
+  - Test syntax rules cover all expected scopes
+
+- Integration/e2e:
+  - Test syntax highlighting with different themes
+  - Verify syntax colors match theme definitions
+  - Test markdown highlighting
+
+acceptance_criteria:
+- `src/utils/syntax-rules.ts` file exists with rule generation
+- `src/utils/syntax-highlighter.ts` file exists with style generation
+- Syntax highlighting works with theme colors
+- Markdown highlighting is supported
+- Syntax rules cover common programming patterns
+
+validation:
+- Run: `bun run typecheck` - Should pass
+- Run: `bun test src/utils/syntax-rules.test.ts`
+- Run: `bun test src/utils/syntax-highlighter.test.ts`
+- Test syntax highlighting in application
+- Verify syntax colors are readable
+
+notes:
+- Use opencode's syntax rule generation as reference
+- Include comprehensive scope mappings
+- Support common programming languages
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme.tsx` (lines 622-1152)

tasks/subtasks/theme-refactoring-09-theme-utils.md

@@ -0,0 +1,77 @@
+# 09. Update Theme Utilities and CSS Variable Application
+
+meta:
+  id: theme-refactoring-09
+  feature: theme-refactoring-json-format
+  priority: P1
+  depends_on: [theme-refactoring-04]
+  tags: [implementation, utilities]
+
+objective:
+- Update existing theme utilities to work with JSON theme structure
+- Refactor CSS variable application logic
+- Add support for theme color references
+- Ensure backward compatibility with existing components
+
+deliverables:
+- `src/utils/theme.ts` - Updated theme utilities
+- `src/utils/theme-css.ts` - CSS variable application utilities
+
+steps:
+- Step 9.1: Update `src/utils/theme.ts`
+  - Refactor `applyTheme()` to accept `ThemeColors` type
+  - Keep existing function signature for backward compatibility
+  - Update to work with resolved theme colors
+
+- Step 9.2: Create `src/utils/theme-css.ts`
+  - Implement `applyThemeToCSS(theme: ThemeColors)` function
+  - Apply theme colors as CSS custom properties
+  - Support all theme color properties
+  - Handle layer backgrounds if present
+
+- Step 9.3: Update theme attribute handling
+  - Implement `setThemeAttribute(themeName: string)` function
+  - Update to use data-theme attribute
+  - Support system theme attribute
+
+- Step 9.4: Add color reference support
+  - Implement `resolveColorReference(color: string): string` function
+  - Convert color references to CSS values
+  - Handle hex colors, color references, and RGBA
+
+- Step 9.5: Add theme utility functions
+  - Implement `getThemeByName(name: string): ThemeJson | undefined`
+  - Implement `getDefaultTheme(): ThemeJson`
+  - Implement `getAllThemes(): ThemeJson[]`
+
+tests:
+- Unit:
+  - Test `applyThemeToCSS` applies all colors correctly
+  - Test `setThemeAttribute` sets attribute correctly
+  - Test `resolveColorReference` converts references correctly
+  - Test theme utility functions return correct results
+
+- Integration/e2e:
+  - Test theme application in browser
+  - Verify CSS variables are updated correctly
+  - Test theme attribute changes
+
+acceptance_criteria:
+- `src/utils/theme.ts` is updated and backward compatible
+- `src/utils/theme-css.ts` file exists with CSS utilities
+- CSS variables are applied correctly
+- Color references are resolved properly
+- Theme utilities are functional
+
+validation:
+- Run: `bun run typecheck` - Should pass
+- Run: `bun test src/utils/theme.test.ts`
+- Run: `bun test src/utils/theme-css.test.ts`
+- Test theme application in browser
+- Verify CSS variables are applied correctly
+
+notes:
+- Maintain backward compatibility with existing code
+- Use CSS custom properties for theming
+- Ensure all theme colors are applied
+- Reference: `/home/mike/code/PodTui/src/utils/theme.ts` (original file)

tasks/subtasks/theme-refactoring-10-theme-switching.md

@@ -0,0 +1,80 @@
+# 10. Test Theme Switching and Light/Dark Mode
+
+meta:
+  id: theme-refactoring-10
+  feature: theme-refactoring-json-format
+  priority: P0
+  depends_on: [theme-refactoring-05, theme-refactoring-09]
+  tags: [testing, verification]
+
+objective:
+- Comprehensive testing of theme switching functionality
+- Verify light/dark mode switching works correctly
+- Test all theme JSON files load and apply correctly
+- Ensure theme persistence works across sessions
+
+deliverables:
+- `src/utils/theme.test.ts` - Theme utility tests
+- `src/context/ThemeContext.test.ts` - Context tests
+- Test results showing all themes work correctly
+
+steps:
+- Step 10.1: Create `src/utils/theme.test.ts`
+  - Test theme loading functions
+  - Test theme resolution logic
+  - Test color reference resolution
+  - Test ANSI color conversion
+
+- Step 10.2: Create `src/context/ThemeContext.test.ts`
+  - Test theme context initialization
+  - Test theme switching
+  - Test mode switching
+  - Test system theme detection
+  - Test localStorage persistence
+  - Test reactive theme updates
+
+- Step 10.3: Manual testing
+  - Test switching between all themes (catppuccin, gruvbox, tokyo, nord)
+  - Test light/dark mode switching
+  - Test system theme detection
+  - Test theme persistence (close and reopen app)
+  - Test custom theme loading
+
+- Step 10.4: Visual verification
+  - Verify all theme colors are correct
+  - Check readability of text colors
+  - Verify background colors are appropriate
+  - Check that all UI elements use theme colors
+
+tests:
+- Unit:
+  - Run all theme utility tests
+  - Run all theme context tests
+  - Verify all tests pass
+
+- Integration/e2e:
+  - Test theme switching in application
+  - Test light/dark mode switching
+  - Test theme persistence
+  - Test system theme detection
+
+acceptance_criteria:
+- All unit tests pass
+- All integration tests pass
+- Theme switching works correctly
+- Light/dark mode switching works correctly
+- All themes load and apply correctly
+- Theme persistence works across sessions
+
+validation:
+- Run: `bun test src/utils/theme.test.ts`
+- Run: `bun test src/context/ThemeContext.test.ts`
+- Run: `bun test` - Run all tests
+- Manual testing of all themes
+- Visual verification of theme appearance
+
+notes:
+- Test with actual terminal to verify system theme detection
+- Verify all theme colors are visually appealing
+- Check for any color contrast issues
+- Test edge cases (missing themes, invalid colors)

tasks/subtasks/theme-refactoring-11-custom-themes.md

@@ -0,0 +1,77 @@
+# 11. Verify Custom Theme Loading and Persistence
+
+meta:
+  id: theme-refactoring-11
+  feature: theme-refactoring-json-format
+  priority: P1
+  depends_on: [theme-refactoring-06, theme-refactoring-10]
+  tags: [testing, verification]
+
+objective:
+- Test custom theme loading from directories
+- Verify theme persistence works correctly
+- Test custom theme switching
+- Ensure custom themes are loaded on app start
+
+deliverables:
+- Test results for custom theme loading
+- Documentation for custom theme format
+- Verification that custom themes work correctly
+
+steps:
+- Step 11.1: Create test theme files
+  - Create test theme in `~/.config/podtui/themes/`
+  - Create test theme in `./.podtui/themes/`
+  - Create test theme in `./themes/`
+
+- Step 11.2: Test custom theme loading
+  - Start application and verify custom themes are loaded
+  - Switch to custom theme
+  - Verify custom theme applies correctly
+
+- Step 11.3: Test theme persistence
+  - Set custom theme
+  - Close application
+  - Reopen application
+  - Verify custom theme is still selected
+
+- Step 11.4: Test theme discovery
+  - List all available themes
+  - Verify custom themes appear in list
+  - Test switching to custom themes
+
+- Step 11.5: Test invalid theme handling
+  - Create invalid theme JSON
+  - Verify error is handled gracefully
+  - Verify app doesn't crash
+
+tests:
+- Unit:
+  - Test custom theme loading functions
+  - Test theme discovery
+  - Test invalid theme handling
+
+- Integration/e2e:
+  - Test custom theme loading from directories
+  - Test theme persistence
+  - Test theme discovery
+  - Test invalid theme handling
+
+acceptance_criteria:
+- Custom themes can be loaded from directories
+- Custom themes persist across sessions
+- Custom themes appear in theme list
+- Invalid themes are handled gracefully
+- Theme discovery works correctly
+
+validation:
+- Run: `bun test src/utils/custom-themes.test.ts`
+- Run: `bun test` - Run all tests
+- Manual testing of custom themes
+- Verify themes persist after restart
+
+notes:
+- Create documentation for custom theme format
+- Reference: `/home/mike/code/PodTui/opencode/packages/opencode/src/cli/cmd/tui/context/theme.tsx` (lines 394-419)
+- Test with multiple custom themes
+- Verify all custom themes work correctly