pause to fix nav/theme

2026-02-04 12:38:35 -05:00
parent cdabf2c3e0
commit 624a6ba022
20 changed files with 1078 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .opencode
+opencode
 # dependencies (bun install)
 node_modules

--- a/tasks/podtui-navigation-theming-improvements/01-analyze-navigation-system.md
+++ b/tasks/podtui-navigation-theming-improvements/01-analyze-navigation-system.md
@@ -0,0 +1,50 @@
+# 01. Analyze Current Navigation and Layer System
+
+meta:
+  id: podtui-navigation-theming-improvements-01
+  feature: podtui-navigation-theming-improvements
+  priority: P1
+  depends_on: []
+  tags: [analysis, debugging, navigation]
+
+objective:
+- Analyze current navigation implementation and layer system
+- Identify issues with the existing layerDepth signal
+- Document current navigation behavior and identify gaps
+- Understand how layers should work per user requirements
+
+deliverables:
+- Analysis document with current navigation state
+- List of identified issues and gaps
+- Recommendations for navigation improvements
+
+steps:
+- Read src/App.tsx to understand current layerDepth implementation
+- Read src/components/Layout.tsx to understand layout structure
+- Read src/hooks/useAppKeyboard.ts to understand keyboard handling
+- Read src/components/TabNavigation.tsx and src/components/Navigation.tsx
+- Review how layerDepth is used across components
+- Identify issues with current navigation UX
+- Document requirements: clear layer separation, active layer bg colors, left/right navigation, enter/escape controls
+- Create analysis summary
+
+tests:
+- Unit: None (analysis task)
+- Integration: None (analysis task)
+
+acceptance_criteria:
+- Analysis document is created and saved
+- All current navigation patterns are documented
+- All identified issues and gaps are listed
+- Clear recommendations are provided for navigation improvements
+
+validation:
+- Review analysis document for completeness
+- Verify all relevant files were analyzed
+- Check that requirements are clearly documented
+
+notes:
+- Focus on understanding the gap between current implementation and user requirements
+- Pay special attention to how layerDepth signal is managed
+- Note any issues with keyboard event handling
+- Consider how to make navigation more intuitive
--- a/tasks/podtui-navigation-theming-improvements/02-fix-discover-tab-crash.md
+++ b/tasks/podtui-navigation-theming-improvements/02-fix-discover-tab-crash.md
@@ -0,0 +1,51 @@
+# 02. Fix Discover Tab Crash
+
+meta:
+  id: podtui-navigation-theming-improvements-02
+  feature: podtui-navigation-theming-improvements
+  priority: P1
+  depends_on: [podtui-navigation-theming-improvements-01]
+  tags: [bug-fix, discover, crash]
+
+objective:
+- Identify and fix crash when Discover tab is selected
+- Ensure DiscoverPage component loads without errors
+- Test all functionality in Discover tab
+
+deliverables:
+- Fixed DiscoverPage.tsx component
+- Debugged crash identified and resolved
+- Test results showing no crashes
+
+steps:
+- Read src/components/DiscoverPage.tsx thoroughly
+- Check for null/undefined references in DiscoverPage
+- Verify useDiscoverStore() is properly initialized
+- Check DISCOVER_CATEGORIES constant
+- Verify TrendingShows component works correctly
+- Check CategoryFilter component for issues
+- Add null checks and error boundaries if needed
+- Test tab selection in App.tsx
+- Verify no console errors
+- Test all keyboard shortcuts in Discover tab
+
+tests:
+- Unit: Test DiscoverPage component with mocked store
+- Integration: Test Discover tab selection and navigation
+
+acceptance_criteria:
+- Discover tab can be selected without crashes
+- No console errors when Discover tab is active
+- All DiscoverPage functionality works (keyboard shortcuts, navigation)
+- TrendingShows and CategoryFilter components render correctly
+
+validation:
+- Run `bun run start` and select Discover tab
+- Check console for errors
+- Test all keyboard interactions (j/k, tab, enter, escape, r)
+- Verify content renders correctly
+
+notes:
+- Common crash causes: null store, undefined categories, missing component imports
+- Check for unhandled promises or async operations
+- Verify all props are properly passed from App.tsx
--- a/tasks/podtui-navigation-theming-improvements/03-fix-feeds-tab-crash.md
+++ b/tasks/podtui-navigation-theming-improvements/03-fix-feeds-tab-crash.md
@@ -0,0 +1,50 @@
+# 03. Fix My Feeds Tab Crash
+
+meta:
+  id: podtui-navigation-theming-improvements-03
+  feature: podtui-navigation-theming-improvements
+  priority: P1
+  depends_on: [podtui-navigation-theming-improvements-01]
+  tags: [bug-fix, feeds, crash]
+
+objective:
+- Identify and fix crash when My Feeds tab is selected
+- Ensure FeedList component loads without errors
+- Test all functionality in My Feeds tab
+
+deliverables:
+- Fixed FeedList.tsx component
+- Debugged crash identified and resolved
+- Test results showing no crashes
+
+steps:
+- Read src/components/FeedList.tsx thoroughly
+- Check for null/undefined references in FeedList
+- Verify useFeedStore() is properly initialized
+- Check FeedItem component for issues
+- Verify filteredFeeds() returns valid array
+- Add null checks and error boundaries if needed
+- Test tab selection in App.tsx
+- Verify no console errors
+- Test all keyboard shortcuts in FeedList
+
+tests:
+- Unit: Test FeedList component with mocked store
+- Integration: Test Feeds tab selection and navigation
+
+acceptance_criteria:
+- My Feeds tab can be selected without crashes
+- No console errors when My Feeds tab is active
+- All FeedList functionality works (keyboard shortcuts, navigation)
+- FeedItem components render correctly
+
+validation:
+- Run `bun run start` and select My Feeds tab
+- Check console for errors
+- Test all keyboard interactions (j/k, enter, f, s, esc)
+- Verify feed list renders correctly
+
+notes:
+- Common crash causes: null store, undefined feeds, missing component imports
+- Check for unhandled promises or async operations
+- Verify all props are properly passed from App.tsx
--- a/tasks/podtui-navigation-theming-improvements/04-fix-settings-sources-crash.md
+++ b/tasks/podtui-navigation-theming-improvements/04-fix-settings-sources-crash.md
@@ -0,0 +1,54 @@
+# 04. Fix Settings/Sources Sub-tab Crash
+
+meta:
+  id: podtui-navigation-theming-improvements-04
+  feature: podtui-navigation-theming-improvements
+  priority: P1
+  depends_on: [podtui-navigation-theming-improvements-01]
+  tags: [bug-fix, settings, crash]
+
+objective:
+- Identify and fix crash when Settings/Sources sub-tab is selected
+- Ensure SourceManager component loads without errors
+- Test all functionality in Settings/Sources sub-tab
+
+deliverables:
+- Fixed SourceManager.tsx component
+- Debugged crash identified and resolved
+- Test results showing no crashes
+
+steps:
+- Read src/components/SourceManager.tsx thoroughly
+- Check for null/undefined references in SourceManager
+- Verify useFeedStore() is properly initialized
+- Check all focus areas (list, add, url, country, explicit, language)
+- Verify input component is properly imported and used
+- Add null checks and error boundaries if needed
+- Test Settings tab selection in App.tsx
+- Test Sources sub-tab selection in SettingsScreen.tsx
+- Verify no console errors
+- Test all keyboard shortcuts and interactions
+
+tests:
+- Unit: Test SourceManager component with mocked store
+- Integration: Test Settings tab → Sources sub-tab navigation
+
+acceptance_criteria:
+- Settings tab can be selected without crashes
+- Sources sub-tab can be selected without crashes
+- No console errors when Settings/Sources sub-tab is active
+- All SourceManager functionality works (keyboard shortcuts, navigation)
+- All form inputs and buttons work correctly
+
+validation:
+- Run `bun run start` and select Settings tab
+- Select Sources sub-tab and verify it loads
+- Check console for errors
+- Test all keyboard interactions (tab, esc, enter, space, a, d)
+- Verify form inputs work correctly
+
+notes:
+- Common crash causes: null store, undefined sources, missing component imports
+- Check for unhandled promises or async operations
+- Verify all props are properly passed from SettingsScreen.tsx
+- Ensure useKeyboard hook doesn't conflict with parent keyboard handlers
--- a/tasks/podtui-navigation-theming-improvements/05-design-layered-navigation-ui.md
+++ b/tasks/podtui-navigation-theming-improvements/05-design-layered-navigation-ui.md
@@ -0,0 +1,53 @@
+# 05. Design Layered Navigation UI System
+
+meta:
+  id: podtui-navigation-theming-improvements-05
+  feature: podtui-navigation-theming-improvements
+  priority: P2
+  depends_on: [podtui-navigation-theming-improvements-02, podtui-navigation-theming-improvements-03, podtui-navigation-theming-improvements-04]
+  tags: [design, navigation, ui]
+
+objective:
+- Design the layered navigation UI based on user requirements
+- Create visual design for layer separation and active states
+- Define how layers should be displayed and navigated
+
+deliverables:
+- Navigation design document
+- Layer visualization mockups
+- Clear specifications for layer colors and borders
+- Implementation plan for layered navigation
+
+steps:
+- Review user requirements for navigation (clear layer separation, bg colors, left/right navigation, enter/escape controls)
+- Analyze current layerDepth signal implementation
+- Design layer separation mechanism (borders, backgrounds, spacing)
+- Define active layer visual state (bg color, borders, indicators)
+- Design navigation controls (left/right arrows, enter arrow down, escape arrow up)
+- Create layer visualization showing how multiple layers should work
+- Document layer structure and hierarchy
+- Create implementation plan for Navigation component
+- Define theme colors for layer backgrounds
+
+tests:
+- Unit: None (design task)
+- Integration: None (design task)
+
+acceptance_criteria:
+- Navigation design document is created
+- Layer separation mechanism is clearly specified
+- Active layer visual state is defined
+- Navigation controls are documented
+- Implementation plan is provided
+
+validation:
+- Review design document for clarity
+- Verify it addresses all user requirements
+- Check that design is feasible to implement
+
+notes:
+- Layers should be clearly delineated with visual separation
+- Active layer should have distinct background color
+- Navigation should be intuitive with clear visual feedback
+- Consider terminal width limitations
+- Design should work with existing theme system
--- a/tasks/podtui-navigation-theming-improvements/06-implement-layer-navigation-controls.md
+++ b/tasks/podtui-navigation-theming-improvements/06-implement-layer-navigation-controls.md
@@ -0,0 +1,54 @@
+# 06. Implement Left/Right Layer Navigation Controls
+
+meta:
+  id: podtui-navigation-theming-improvements-06
+  feature: podtui-navigation-theming-improvements
+  priority: P2
+  depends_on: [podtui-navigation-theming-improvements-05]
+  tags: [implementation, navigation, keyboard]
+
+objective:
+- Implement left/right arrow key navigation between layers
+- Add keyboard handlers for <left> and <right> keys
+- Update navigation state to track current layer index
+
+deliverables:
+- Updated Navigation component with left/right navigation
+- Keyboard handler implementation in App.tsx
+- Updated layer management logic
+
+steps:
+- Read references/keyboard/REFERENCE.md for keyboard handling patterns
+- Design layer index management (currentLayer, maxLayers)
+- Update Navigation component to show layer navigation hints
+- Add <left> and <right> key handlers in App.tsx useAppKeyboard hook
+- Update layerDepth signal to reflect current layer index
+- Add visual indicators for current layer position
+- Update layer rendering to show active layer with left/right arrows
+- Test navigation between layers
+- Ensure keyboard shortcuts don't conflict with page-specific shortcuts
+
+tests:
+- Unit: Test keyboard handler with mocked key events
+- Integration: Test left/right navigation between layers
+
+acceptance_criteria:
+- <left> key navigates to previous layer
+- <right> key navigates to next layer
+- Current layer is visually indicated
+- Navigation hints are shown in Navigation component
+- No keyboard conflicts with page-specific shortcuts
+- Navigation works correctly at layer boundaries
+
+validation:
+- Run `bun run start` and test left/right navigation
+- Verify current layer is highlighted
+- Check that navigation hints are visible
+- Test at layer boundaries (first/last layer)
+- Verify no conflicts with page shortcuts
+
+notes:
+- Use references/keyboard/REFERENCE.md for proper keyboard handling patterns
+- Consider accessibility and screen reader support
+- Ensure consistent behavior across all pages
+- Test with different terminal sizes
--- a/tasks/podtui-navigation-theming-improvements/07-implement-enter-escape-controls.md
+++ b/tasks/podtui-navigation-theming-improvements/07-implement-enter-escape-controls.md
@@ -0,0 +1,57 @@
+# 07. Implement Enter/Escape Layer Navigation Controls
+
+meta:
+  id: podtui-navigation-theming-improvements-07
+  feature: podtui-navigation-theming-improvements
+  priority: P2
+  depends_on: [podtui-navigation-theming-improvements-05]
+  tags: [implementation, navigation, keyboard]
+
+objective:
+- Implement <enter> key to go down into a layer
+- Implement <escape> key to go up one layer
+- Update layer navigation to support entering/exiting layers
+
+deliverables:
+- Updated layer navigation logic for enter/escape
+- Updated Navigation component to show enter/escape hints
+- Updated App.tsx keyboard handlers
+
+steps:
+- Update Navigation component to show enter/escape navigation hints
+- Add <enter> key handler in App.tsx useAppKeyboard hook
+- Add <escape> key handler in App.tsx useAppKeyboard hook
+- Update layerDepth signal to track current layer (0 = top level)
+- Implement logic for entering a layer (increase layerDepth)
+- Implement logic for exiting a layer (decrease layerDepth)
+- Add visual feedback when entering/exiting layers
+- Update all page components to handle layerDepth prop
+- Test enter to go down, escape to go up
+- Ensure proper layer nesting behavior
+
+tests:
+- Unit: Test keyboard handler with mocked key events
+- Integration: Test enter/escape navigation between layers
+
+acceptance_criteria:
+- <enter> key goes down into a layer
+- <escape> key goes up one layer
+- Navigation hints show enter/escape directions
+- Layer depth is properly tracked and managed
+- Visual feedback shows current layer depth
+- No keyboard conflicts with page-specific shortcuts
+- Proper layer nesting behavior
+
+validation:
+- Run `bun run start` and test enter/escape navigation
+- Verify layer depth is visually indicated
+- Check that navigation hints are visible
+- Test proper layer nesting behavior
+- Verify no conflicts with page shortcuts
+
+notes:
+- Use references/keyboard/REFERENCE.md for proper keyboard handling patterns
+- Consider terminal width limitations for layer hints
+- Ensure consistent behavior across all pages
+- Test with different layer depths
+- Verify escape works at all layer depths
--- a/tasks/podtui-navigation-theming-improvements/08-design-active-layer-colors.md
+++ b/tasks/podtui-navigation-theming-improvements/08-design-active-layer-colors.md
@@ -0,0 +1,53 @@
+# 08. Design Active Layer Background Color System
+
+meta:
+  id: podtui-navigation-theming-improvements-08
+  feature: podtui-navigation-theming-improvements
+  priority: P3
+  depends_on: [podtui-navigation-theming-improvements-05]
+  tags: [design, theming, navigation]
+
+objective:
+- Design active layer background colors
+- Define color palette for layer backgrounds
+- Create theme-aware layer styling
+
+deliverables:
+- Layer color design document
+- Theme tokens for layer backgrounds
+- Implementation plan for layer styling
+
+steps:
+- Review existing theme system in src/constants/themes.ts
+- Design layer background colors (active layer, inactive layers)
+- Define color palette that works with existing themes
+- Create theme tokens for layer backgrounds (e.g., layer-active-bg, layer-inactive-bg)
+- Design border colors for layer separation
+- Design indicator colors for current layer position
+- Create implementation plan for applying layer colors
+- Ensure colors work with system/light/dark modes
+
+tests:
+- Unit: None (design task)
+- Integration: None (design task)
+
+acceptance_criteria:
+- Layer color design document is created
+- Active layer background color is defined
+- Inactive layer background color is defined
+- Theme tokens are designed for layer backgrounds
+- Colors work with existing theme system
+- Implementation plan is provided
+
+validation:
+- Review design document for clarity
+- Verify colors work with existing themes
+- Check that colors are accessible and readable
+- Ensure colors work in both light and dark modes
+
+notes:
+- Use existing theme tokens where possible
+- Ensure contrast ratios meet accessibility standards
+- Colors should be subtle but clearly visible
+- Consider terminal color limitations
+- Design should be consistent with existing UI elements
--- a/tasks/podtui-navigation-theming-improvements/09-create-theme-context-provider.md
+++ b/tasks/podtui-navigation-theming-improvements/09-create-theme-context-provider.md
@@ -0,0 +1,57 @@
+# 09. Create Theme Context Provider
+
+meta:
+  id: podtui-navigation-theming-improvements-09
+  feature: podtui-navigation-theming-improvements
+  priority: P2
+  depends_on: []
+  tags: [theming, implementation, solid-js]
+
+objective:
+- Create theme context provider based on opencode implementation
+- Implement theme state management
+- Provide theme tokens to all components
+
+deliverables:
+- Theme context provider component
+- Theme state management hooks
+- Theme provider integration
+
+steps:
+- Read opencode/packages/ui/src/theme/context.tsx for reference
+- Create theme context using SolidJS createContext
+- Design theme state structure (themeId, colorScheme, mode, etc.)
+- Implement theme state management with signals
+- Add theme selection and color scheme management functions
+- Create ThemeProvider component
+- Add theme persistence to localStorage
+- Implement system theme detection
+- Add theme change listeners
+- Test theme context provider
+
+tests:
+- Unit: Test theme context provider with mocked state
+- Integration: Test theme provider integration
+
+acceptance_criteria:
+- Theme context provider is created
+- Theme state management works correctly
+- Theme selection and color scheme management functions work
+- Theme persistence to localStorage works
+- System theme detection works
+- Theme change listeners work
+- Theme provider can be used to wrap App component
+
+validation:
+- Run `bun run start` and verify theme context provider works
+- Test theme selection functionality
+- Test color scheme switching
+- Verify localStorage persistence
+- Check system theme detection
+
+notes:
+- Use references/solid/REFERENCE.md for SolidJS patterns
+- Follow opencode theming implementation patterns
+- Use createSignal for reactive theme state
+- Ensure proper cleanup in onCleanup
+- Test with different theme configurations
--- a/tasks/podtui-navigation-theming-improvements/10-implement-desktop-theme-types.md
+++ b/tasks/podtui-navigation-theming-improvements/10-implement-desktop-theme-types.md
@@ -0,0 +1,57 @@
+# 10. Implement DesktopTheme Type and Structure
+
+meta:
+  id: podtui-navigation-theming-improvements-10
+  feature: podtui-navigation-theming-improvements
+  priority: P2
+  depends_on: [podtui-navigation-theming-improvements-09]
+  tags: [theming, implementation, types]
+
+objective:
+- Implement DesktopTheme type and structure based on opencode
+- Define theme data structure for light and dark variants
+- Create theme token types
+
+deliverables:
+- DesktopTheme type definition
+- Theme variant structure
+- Token type definitions
+- Example theme data
+
+steps:
+- Read opencode/packages/ui/src/theme/types.ts for reference
+- Create DesktopTheme type interface
+- Define ThemeVariant structure with seeds and overrides
+- Define ThemeColor type
+- Define ColorScheme type
+- Define ResolvedTheme type
+- Define ColorValue type
+- Create theme constants file
+- Add example theme data (system, catppuccin, gruvbox, tokyo, nord)
+- Test type definitions
+
+tests:
+- Unit: Test type definitions with TypeScript compiler
+- Integration: None (type definition task)
+
+acceptance_criteria:
+- DesktopTheme type is defined
+- ThemeVariant structure is defined
+- ThemeColor type is defined
+- ColorScheme type is defined
+- ResolvedTheme type is defined
+- ColorValue type is defined
+- Example theme data is provided
+- All types are exported correctly
+
+validation:
+- Run `tsc --noEmit` to verify no TypeScript errors
+- Test theme type usage in components
+- Verify theme data structure is correct
+
+notes:
+- Use references/solid/REFERENCE.md for SolidJS patterns
+- Follow opencode theming implementation patterns
+- Ensure types are comprehensive and well-documented
+- Add JSDoc comments for complex types
+- Consider TypeScript strict mode compliance
--- a/tasks/podtui-navigation-theming-improvements/11-implement-theme-resolution.md
+++ b/tasks/podtui-navigation-theming-improvements/11-implement-theme-resolution.md
@@ -0,0 +1,59 @@
+# 11. Implement Theme Resolution System
+
+meta:
+  id: podtui-navigation-theming-improvements-11
+  feature: podtui-navigation-theming-improvements
+  priority: P2
+  depends_on: [podtui-navigation-theming-improvements-10]
+  tags: [theming, implementation, theme-resolution]
+
+objective:
+- Implement theme resolution system for light and dark variants
+- Create theme token generation logic
+- Define color scale generation functions
+
+deliverables:
+- Theme resolution functions
+- Color scale generation functions
+- Theme token generation logic
+- Theme CSS variable generation
+
+steps:
+- Read opencode/packages/ui/src/theme/resolve.ts for reference
+- Implement resolveThemeVariant function
+- Implement generateNeutralScale function
+- Implement generateScale function
+- Implement hexToOklch and oklchToHex functions
+- Implement withAlpha function
+- Implement themeToCss function
+- Create theme resolution constants
+- Define color scale configurations
+- Implement theme resolution for each theme
+- Test theme resolution functions
+
+tests:
+- Unit: Test theme resolution with mocked themes
+- Integration: Test theme resolution in context provider
+
+acceptance_criteria:
+- resolveThemeVariant function works correctly
+- generateNeutralScale function works correctly
+- generateScale function works correctly
+- Color conversion functions work correctly
+- themeToCss function generates valid CSS
+- Theme resolution works for all themes
+- Light and dark variants are resolved correctly
+
+validation:
+- Run `bun run start` and verify theme resolution works
+- Test theme resolution for all themes
+- Verify light/dark variants are correct
+- Check CSS variable generation
+- Test with different color schemes
+
+notes:
+- Use references/solid/REFERENCE.md for SolidJS patterns
+- Follow opencode theming implementation patterns
+- Ensure color scales are generated correctly
+- Test color conversion functions
+- Verify theme tokens match expected values
--- a/tasks/podtui-navigation-theming-improvements/12-create-css-token-system.md
+++ b/tasks/podtui-navigation-theming-improvements/12-create-css-token-system.md
@@ -0,0 +1,57 @@
+# 12. Create CSS Variable Token System
+
+meta:
+  id: podtui-navigation-theming-improvements-12
+  feature: podtui-navigation-theming-improvements
+  priority: P3
+  depends_on: [podtui-navigation-theming-improvements-11]
+  tags: [theming, implementation, css-variables]
+
+objective:
+- Create comprehensive CSS variable token system
+- Define all theme tokens for OpenTUI components
+- Generate CSS variables from theme tokens
+
+deliverables:
+- CSS variable token definitions
+- Theme CSS generation functions
+- CSS variable application utilities
+
+steps:
+- Read opencode/packages/ui/src/theme/resolve.ts for reference
+- Review opencode theme token definitions
+- Define theme tokens for OpenTUI components:
+  - Background tokens (background-base, background-weak, etc.)
+  - Surface tokens (surface-base, surface-raised, etc.)
+  - Text tokens (text-base, text-weak, etc.)
+  - Border tokens (border-base, border-hover, etc.)
+  - Interactive tokens (interactive-base, interactive-hover, etc.)
+  - Color tokens for specific states (success, warning, error, etc.)
+  - Layer navigation tokens (layer-active-bg, layer-inactive-bg, etc.)
+- Implement themeToCss function to generate CSS variables
+- Create utility to apply theme tokens to components
+- Test CSS variable generation
+
+tests:
+- Unit: Test CSS variable generation
+- Integration: Test CSS variable application in components
+
+acceptance_criteria:
+- All OpenTUI theme tokens are defined
+- CSS variable generation works correctly
+- Theme tokens can be applied to components
+- Generated CSS is valid
+- Tokens cover all component styling needs
+
+validation:
+- Run `bun run start` and verify CSS variables are applied
+- Test theme token application in components
+- Check CSS variable values
+- Verify tokens work with existing components
+
+notes:
+- Use references/solid/REFERENCE.md for SolidJS patterns
+- Follow opencode theming implementation patterns
+- Ensure tokens are comprehensive and well-organized
+- Test token application in various components
+- Consider backward compatibility with existing hardcoded colors
--- a/tasks/podtui-navigation-theming-improvements/13-implement-system-theme-detection.md
+++ b/tasks/podtui-navigation-theming-improvements/13-implement-system-theme-detection.md
@@ -0,0 +1,55 @@
+# 13. Implement System Theme Detection
+
+meta:
+  id: podtui-navigation-theming-improvements-13
+  feature: podtui-navigation-theming-improvements
+  priority: P2
+  depends_on: [podtui-navigation-theming-improvements-12]
+  tags: [theming, implementation, system-theme]
+
+objective:
+- Implement system theme detection (prefers-color-scheme)
+- Add theme mode management (light/dark/auto)
+- Implement automatic theme switching based on system preferences
+
+deliverables:
+- System theme detection implementation
+- Theme mode management functions
+- Automatic theme switching logic
+
+steps:
+- Read opencode/packages/ui/src/theme/context.tsx for reference
+- Implement getSystemMode function
+- Add theme mode state to theme context
+- Implement colorScheme state management
+- Add window.matchMedia listener for system theme changes
+- Implement automatic mode switching when colorScheme is "system"
+- Add theme mode persistence to localStorage
+- Test system theme detection
+- Test automatic theme switching
+
+tests:
+- Unit: Test system theme detection with mocked media queries
+- Integration: Test theme mode switching
+
+acceptance_criteria:
+- getSystemMode function works correctly
+- Theme mode state is managed correctly
+- Window.matchMedia listener works correctly
+- Automatic theme switching works when colorScheme is "system"
+- Theme mode persistence to localStorage works
+- System theme changes are detected and applied
+
+validation:
+- Run `bun run start` and test system theme detection
+- Test switching system between light/dark modes
+- Verify automatic theme switching works
+- Check localStorage persistence
+- Test theme mode selection (system/light/dark)
+
+notes:
+- Use references/solid/REFERENCE.md for SolidJS patterns
+- Follow opencode theming implementation patterns
+- Ensure proper cleanup in onCleanup
+- Test with different system theme settings
+- Verify theme updates are reactive
--- a/tasks/podtui-navigation-theming-improvements/14-integrate-theme-provider.md
+++ b/tasks/podtui-navigation-theming-improvements/14-integrate-theme-provider.md
@@ -0,0 +1,59 @@
+# 14. Integrate Theme Provider into App Component
+
+meta:
+  id: podtui-navigation-theming-improvements-14
+  feature: podtui-navigation-theming-improvements
+  priority: P2
+  depends_on: [podtui-navigation-theming-improvements-09, podtui-navigation-theming-improvements-13]
+  tags: [integration, theming, app]
+
+objective:
+- Integrate theme provider into App component
+- Apply theme tokens to all components
+- Ensure theme changes are reactive
+
+deliverables:
+- Updated App.tsx with theme provider
+- Theme application logic
+- Theme integration tests
+
+steps:
+- Read references/solid/REFERENCE.md for SolidJS patterns
+- Wrap App component with ThemeProvider
+- Implement theme application in Layout component
+- Apply theme tokens to all components:
+  - TabNavigation (active tab background)
+  - Navigation (footer navigation)
+  - DiscoverPage (background, borders, text colors)
+  - FeedList (background, borders, text colors)
+  - SettingsScreen (background, borders, text colors)
+  - SourceManager (background, borders, text colors)
+  - All other components
+- Update theme tokens usage in src/constants/themes.ts
+- Test theme application in all components
+- Test theme changes are reactive
+
+tests:
+- Unit: Test theme provider integration
+- Integration: Test theme changes in all components
+
+acceptance_criteria:
+- ThemeProvider is integrated into App component
+- Theme tokens are applied to all components
+- Theme changes are reactive
+- All components render correctly with theme tokens
+- No console errors related to theming
+
+validation:
+- Run `bun run start` and verify theme is applied
+- Test theme selection and color scheme switching
+- Test system theme detection
+- Verify all components use theme tokens
+- Check console for errors
+
+notes:
+- Use references/solid/REFERENCE.md for SolidJS patterns
+- Follow opencode theming implementation patterns
+- Ensure theme tokens are used consistently
+- Test theme changes in all components
+- Verify no hardcoded colors remain
--- a/tasks/podtui-navigation-theming-improvements/15-update-components-to-use-themes.md
+++ b/tasks/podtui-navigation-theming-improvements/15-update-components-to-use-themes.md
@@ -0,0 +1,60 @@
+# 15. Update Components to Use Theme Tokens
+
+meta:
+  id: podtui-navigation-theming-improvements-15
+  feature: podtui-navigation-theming-improvements
+  priority: P3
+  depends_on: [podtui-navigation-theming-improvements-14]
+  tags: [theming, implementation, component-updates]
+
+objective:
+- Replace all hardcoded colors with theme tokens
+- Update all components to use theme context
+- Ensure consistent theme application across all components
+
+deliverables:
+- Updated components using theme tokens
+- Theme token usage guide
+- List of components updated
+
+steps:
+- Review all components in src/components/
+- Identify all hardcoded color values
+- Replace hardcoded colors with theme tokens:
+  - Background colors (background-base, surface-base, etc.)
+  - Text colors (text-base, text-weak, etc.)
+  - Border colors (border-base, border-hover, etc.)
+  - Interactive colors (interactive-base, interactive-hover, etc.)
+  - Color tokens (success, warning, error, etc.)
+  - Layer navigation colors (layer-active-bg, layer-inactive-bg, etc.)
+- Update src/constants/themes.ts to export theme tokens
+- Update all components to use theme context
+- Test theme tokens in all components
+- Verify no hardcoded colors remain
+- Create theme token usage guide
+
+tests:
+- Unit: Test theme tokens in individual components
+- Integration: Test theme tokens in all components
+
+acceptance_criteria:
+- All hardcoded colors are replaced with theme tokens
+- All components use theme tokens
+- Theme tokens are exported from themes.ts
+- Theme token usage guide is created
+- No console errors related to theming
+- All components render correctly with theme tokens
+
+validation:
+- Run `bun run start` and verify all components use theme tokens
+- Test theme selection and color scheme switching
+- Verify all components render correctly
+- Check console for errors
+- Verify no hardcoded colors remain
+
+notes:
+- Use references/solid/REFERENCE.md for SolidJS patterns
+- Follow opencode theming implementation patterns
+- Ensure consistent theme application across all components
+- Test theme tokens in all components
+- Verify backward compatibility if needed
--- a/tasks/podtui-navigation-theming-improvements/16-test-navigation-flows.md
+++ b/tasks/podtui-navigation-theming-improvements/16-test-navigation-flows.md
@@ -0,0 +1,65 @@
+# 16. Test Navigation Flows and Layer Transitions
+
+meta:
+  id: podtui-navigation-theming-improvements-16
+  feature: podtui-navigation-theming-improvements
+  priority: P2
+  depends_on: [podtui-navigation-theming-improvements-06, podtui-navigation-theming-improvements-07, podtui-navigation-theming-improvements-08]
+  tags: [testing, navigation, integration]
+
+objective:
+- Test all navigation flows and layer transitions
+- Verify left/right navigation works correctly
+- Verify enter/escape navigation works correctly
+- Test layer transitions between different pages
+
+deliverables:
+- Navigation test results
+- Test cases for navigation flows
+- Bug reports for any issues
+
+steps:
+- Create test cases for navigation flows:
+  - Test left/right navigation between layers
+  - Test enter to go down into layers
+  - Test escape to go up from layers
+  - Test layer boundaries (first/last layer)
+  - Test layer nesting behavior
+  - Test navigation with different terminal sizes
+- Run `bun run start` and perform all test cases
+- Document any issues or bugs
+- Test navigation in all pages:
+  - Discover tab
+  - My Feeds tab
+  - Search tab
+  - Player tab
+  - Settings tab
+- Test keyboard shortcut conflicts
+- Test visual feedback for navigation
+- Test layer color visibility
+
+tests:
+- Unit: Test navigation logic with mocked state
+- Integration: Test navigation flows in actual application
+
+acceptance_criteria:
+- All navigation flows work correctly
+- Left/right navigation works between layers
+- Enter/escape navigation works correctly
+- Layer boundaries are handled correctly
+- No keyboard shortcut conflicts
+- Visual feedback is clear and accurate
+- All pages work correctly with navigation
+
+validation:
+- Run `bun run start` and perform all test cases
+- Document all test results
+- Report any issues found
+- Verify all navigation flows work
+
+notes:
+- Test with different terminal sizes
+- Test with different layer depths
+- Test keyboard shortcuts in all pages
+- Verify visual feedback is clear
+- Test edge cases and error conditions
--- a/tasks/podtui-navigation-theming-improvements/17-test-tab-crash-fixes.md
+++ b/tasks/podtui-navigation-theming-improvements/17-test-tab-crash-fixes.md
@@ -0,0 +1,64 @@
+# 17. Test Tab Crash Fixes and Edge Cases
+
+meta:
+  id: podtui-navigation-theming-improvements-17
+  feature: podtui-navigation-theming-improvements
+  priority: P1
+  depends_on: [podtui-navigation-theming-improvements-02, podtui-navigation-theming-improvements-03, podtui-navigation-theming-improvements-04]
+  tags: [testing, crash-fix, integration]
+
+objective:
+- Test all tab crash fixes
+- Verify Discover, My Feeds, and Settings tabs load without errors
+- Test edge cases and error conditions
+
+deliverables:
+- Crash fix test results
+- Test cases for tab crashes
+- Bug reports for any remaining issues
+
+steps:
+- Create test cases for tab crashes:
+  - Test Discover tab selection
+  - Test My Feeds tab selection
+  - Test Settings tab selection
+  - Test Settings/Sources sub-tab selection
+  - Test navigation between tabs
+- Run `bun run start` and perform all test cases
+- Test all keyboard shortcuts in each tab
+- Test edge cases:
+  - Empty feed lists
+  - Missing data
+  - Network errors
+  - Invalid inputs
+  - Rapid tab switching
+- Test error boundaries
+- Document any remaining issues
+- Verify no console errors
+
+tests:
+- Unit: Test components with mocked data
+- Integration: Test all tabs and sub-tabs in actual application
+
+acceptance_criteria:
+- All tabs load without crashes
+- No console errors when selecting tabs
+- All keyboard shortcuts work correctly
+- Edge cases are handled gracefully
+- Error boundaries work correctly
+- All test cases pass
+
+validation:
+- Run `bun run start` and perform all test cases
+- Check console for errors
+- Test all keyboard shortcuts
+- Test edge cases
+- Document all test results
+- Report any remaining issues
+
+notes:
+- Test with different data states (empty, full, partial)
+- Test network error scenarios
+- Test rapid user interactions
+- Verify error messages are clear
+- Test with different terminal sizes
--- a/tasks/podtui-navigation-theming-improvements/18-test-theming-system.md
+++ b/tasks/podtui-navigation-theming-improvements/18-test-theming-system.md
@@ -0,0 +1,72 @@
+# 18. Test Theming System with All Modes
+
+meta:
+  id: podtui-navigation-theming-improvements-18
+  feature: podtui-navigation-theming-improvements
+  priority: P2
+  depends_on: [podtui-navigation-theming-improvements-15, podtui-navigation-theming-improvements-16, podtui-navigation-theming-improvements-17]
+  tags: [testing, theming, integration]
+
+objective:
+- Test theming system with all modes (system/light/dark)
+- Verify theme tokens work correctly
+- Ensure theming is consistent across all components
+- Test theme persistence and system theme detection
+
+deliverables:
+- Theming system test results
+- Theme token test cases
+- Theme consistency report
+
+steps:
+- Create test cases for theming system:
+  - Test system theme mode
+  - Test light theme mode
+  - Test dark theme mode
+  - Test theme persistence
+  - Test system theme detection
+  - Test theme selection
+  - Test color scheme switching
+- Run `bun run start` and perform all test cases
+- Test theme tokens in all components:
+  - Background colors
+  - Text colors
+  - Border colors
+  - Interactive colors
+  - Color tokens (success, warning, error, etc.)
+  - Layer navigation colors
+- Test theme changes are reactive
+- Test theme tokens work in all terminals
+- Verify theme consistency across all components
+- Document any issues
+
+tests:
+- Unit: Test theme tokens with mocked themes
+- Integration: Test theming in all components and modes
+
+acceptance_criteria:
+- Theming system works correctly in all modes
+- Theme tokens work correctly in all components
+- Theme changes are reactive
+- Theme persistence works correctly
+- System theme detection works correctly
+- Theme consistency is maintained across all components
+- All test cases pass
+
+validation:
+- Run `bun run start` and perform all test cases
+- Test all theme modes (system/light/dark)
+- Test theme selection and color scheme switching
+- Verify theme persistence
+- Test system theme detection
+- Check console for errors
+- Verify theme consistency across all components
+- Document all test results
+
+notes:
+- Test with different terminal sizes
+- Test with different color schemes
+- Test rapid theme changes
+- Verify theme updates are reactive
+- Test all components with all themes
+- Ensure accessibility standards are met
--- a/tasks/podtui-navigation-theming-improvements/README.md
+++ b/tasks/podtui-navigation-theming-improvements/README.md
@@ -0,0 +1,50 @@
+# PodTUI Navigation and Theming Improvements
+
+Objective: Implement layered navigation system, fix tab crashes, and integrate sophisticated theming based on opencode
+
+Status legend: [ ] todo, [~] in-progress, [x] done
+
+Tasks
+- [ ] 01 — Analyze current navigation and layer system → `01-analyze-navigation-system.md`
+- [ ] 02 — Fix Discover tab crash → `02-fix-discover-tab-crash.md`
+- [ ] 03 — Fix My Feeds tab crash → `03-fix-feeds-tab-crash.md`
+- [ ] 04 — Fix Settings/Sources sub-tab crash → `04-fix-settings-sources-crash.md`
+- [ ] 05 — Design layered navigation UI system → `05-design-layered-navigation-ui.md`
+- [ ] 06 — Implement left/right layer navigation controls → `06-implement-layer-navigation-controls.md`
+- [ ] 07 — Implement enter/escape layer navigation controls → `07-implement-enter-escape-controls.md`
+- [ ] 08 — Design active layer background color system → `08-design-active-layer-colors.md`
+- [ ] 09 — Create theme context provider → `09-create-theme-context-provider.md`
+- [ ] 10 — Implement DesktopTheme type and structure → `10-implement-desktop-theme-types.md`
+- [ ] 11 — Implement theme resolution system → `11-implement-theme-resolution.md`
+- [ ] 12 — Create CSS variable token system → `12-create-css-token-system.md`
+- [ ] 13 — Implement system theme detection → `13-implement-system-theme-detection.md`
+- [ ] 14 — Integrate theme provider into App component → `14-integrate-theme-provider.md`
+- [ ] 15 — Update components to use theme tokens → `15-update-components-to-use-themes.md`
+- [ ] 16 — Test navigation flows and layer transitions → `16-test-navigation-flows.md`
+- [ ] 17 — Test tab crash fixes and edge cases → `17-test-tab-crash-fixes.md`
+- [ ] 18 — Test theming system with all modes → `18-test-theming-system.md`
+
+Dependencies
+- 01 depends on
+- 02, 03, 04 depends on 01
+- 05 depends on 02, 03, 04
+- 06, 07, 08 depends on 05
+- 16 depends on 06, 07, 08
+- 09 depends on
+- 10 depends on 09
+- 11 depends on 10
+- 12 depends on 11
+- 13 depends on 12
+- 14 depends on 13
+- 15 depends on 14
+- 18 depends on 15, 16, 17
+
+Exit criteria
+- Navigation is clearly visualized with layered backgrounds and active states
+- Left/right keys navigate between layers, enter goes down, escape goes up
+- All tabs (Discover, My Feeds, Settings) load without crashes
+- Settings/Sources sub-tab loads without crashes
+- Theming system works correctly with system/light/dark/auto modes
+- All components use theme tokens consistently
+- No hardcoded colors remain in components
+- All tests pass and crashes are resolved