[feat] upgrade opentui to 0.1.33 and set up theming system (transparent by default) #356
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Create tool-renderer component for custom tool display logic - Add special rendering for list_directory with path and file summaries - Store raw tool output alongside formatted output - Add title accessory support to ToolItem component - Enable custom collapsed previews and content rendering - Add tool name display overrides for better UX
- Set explicit input text colors for light/dark modes instead of 'default' - Dark mode: #e2e8f0 (brighter slate), Light mode: #334155 (darker slate) - Remove hardcoded fallback color that was causing black text in dark mode - Add dedicated orange/red colors for FAST/MAX mode toggle - Simplify agent-mode-toggle to use new dedicated theme properties
- Make user message vertical line extend full height with calculated line count - Italicize user input text for better visual distinction - Fix markdown paragraph spacing (single newlines instead of double) - Add spacing between consecutive text blocks to prevent bleeding - Update userLine colors for better visibility in both themes
- Simplify marginTop ternary logic - Don't trim markdown content to preserve paragraph spacing - Only strip trailing newlines from markdown output, not all whitespace
- Add handlers for strong and emphasis nodes in markdown renderer - Remove debug logging from message block rendering
brandonkachen
force-pushed
the
brandon/upgrade-opentui-2025-10-28
branch
from
ad6e505 to
ddad28c
Compare
brandonkachen
force-pushed
the
brandon/upgrade-opentui-2025-10-28
branch
from
eed711b to
951ed71
Compare
codebuff-team
changed the title
…ui-2025-10-28 # Conflicts: # cli/src/chat.tsx
…ui-2025-10-28 # Conflicts: # cli/src/chat.tsx
- Use solid background colors (white/black) instead of transparent theme.background - Fix light/dark mode detection by checking text color instead of background - Center modal horizontally and vertically in terminal window
- Create theme-config.ts with variant types (transparent, modal, embedded, custom) - Add ThemeProvider and useTheme() hook for context-based theme access - Add VariantProvider for setting theme variants in component trees - Migrate all components to use useTheme() instead of theme props - Add logoColor to theme interface, automatically resolved per light/dark mode - Centralize background color resolution with applyVariantBackgrounds utility - Export mergeThemeOverrides and cloneChatTheme from theme-system - Clean up LoginModal to use modal variant with solid backgrounds - Add plugin system foundation for future theme extensibility This provides a clean, hook-based API where components call useTheme() with no arguments and automatically get the appropriate theme variant based on their parent context. Modal components wrap with VariantProvider to get solid backgrounds instead of transparent ones.
brandonkachen
changed the title
brandonkachen
changed the title
- Remove resolveThemeColor calls from components (handled in theme building) - Components now use theme properties directly with ?? fallbacks - Simplify AgentBranchItem and ToolCallItem props (remove showBorder, toggleEnabled) - Auto-resolve 'default' color values to actual colors during theme building - ThemeColor is always a string (never undefined or 'default') Components are now simpler and just consume ready-to-use theme values.
- Remove resolveFg/resolveThemeColor from SuggestionMenu, MultilineInput, RaisedPill
- Components use theme properties directly (e.g., fg={theme.inputFg})
- All color resolution happens during theme building, not in components
- Cleaner, more maintainable component code
brandonkachen
changed the title
- Add missing theme properties: linkColor, linkActiveColor, validationBorderColor, shimmerPrimaryColor, shimmerFallbackColor - Remove all resolveThemeColor/resolveFg calls from components - Fix import paths: use ../types/theme-system for type imports - Refactor MessageBlock, ToolItem to use useTheme() hook instead of theme prop - Update TerminalLink to use theme colors as defaults - Update ShimmerText to use theme shimmer colors - Replace hardcoded colors in chat.tsx with theme properties - All components now use clean, direct theme property access Theme system is now completely consistent - no resolution logic in components, all colors pre-resolved during theme building, single source of truth.
Drop the second HTML welcome block in buildBlocks so the intro text only renders once on startup.
Replace 60+ specific color properties with semantic roles: - Core: primary, secondary, success, error, warning, info - Neutrals: foreground, background, muted, border, surface, surfaceHover - Context: aiLine, userLine, aiText, agentContent, etc. Changes: - Update ChatTheme interface with semantic color structure - Refactor dark and light theme definitions to use semantic colors - Update all 50+ component files to use new property names - statusAccent → primary - statusSecondary → secondary - messageAiText → aiText - chromeText → foreground - agentResponseCount → muted - logoColor → logo - linkColor → link - (and 20+ more mappings) - Remove color constants from login/constants.ts - Update LoginModal to use theme.success/error instead of constants - Fix background property mapping in theme-config.ts Benefits: - Much easier to create custom themes (15 semantic colors vs 60+ specific) - Cleaner component code (theme.primary vs theme.statusAccent) - Matches modern design system patterns (Tailwind, Chakra, MUI) - Single source of truth for color roles
- Wrap MessageBlock tests in ThemeProvider - Remove theme prop from test fixtures (now uses useTheme hook) - Update property names to match semantic structure (aiText, aiTimestamp) All 50 unit tests passing.
Removed unnecessary theme variant system (transparent/modal/embedded): - Variants were solving a non-existent problem (themes have solid backgrounds now) - Removed ThemeVariant type and all variant-related code - Removed VariantProvider component - Simplified theme-config.ts (300+ lines → 140 lines) - Simplified use-theme.tsx (180+ lines → 110 lines) - LoginModal now directly uses useTheme() without wrapper Theme system is now much simpler: - useTheme() hook returns the current theme - ThemeProvider wraps the app - Plugin system remains for future extensibility - All customization via themeConfig.customColors or plugins All typechecks pass, all 50 unit tests pass.
Replace EventEmitter + React Context with zustand store: - Create theme-store.ts with zustand (consistent with login-store, chat-store) - Simplify use-theme.tsx to just hooks (110 lines → 34 lines!) - Remove ThemeProvider component entirely - No more Context needed - components just use useTheme() hook - Reactive theme detection on macOS now calls store.setThemeName() - Update test files to import theme-store instead of using ThemeProvider Benefits: - Consistent state management across codebase (all zustand) - Simpler mental model (no Context wrappers) - Better performance (selective subscriptions) - Less boilerplate (no Provider needed) All typechecks pass, all 50 unit tests pass, build succeeds.
Resolved merge conflicts following the guidance: - Preferred our theming/UI work (theme system, Separator component) - Preferred their engineering/systems work (PLAN mode, BuildModeButtons) Key changes: - Added PLAN mode support to agent mode toggle with theme system - Added BuildModeButtons component for plan mode workflow - Updated theme types to include modePlanBg and modePlanText - Fixed TypeScript errors in BuildModeButtons (wrap -> wrapMode) All type checks and builds pass successfully.
Changed wrap prop to wrapMode to match OpenTUI text component API.
Reduced theme properties from 35 → 24 by removing redundant properties: Removed and replaced with semantics: - aiText, userText → foreground (unified text color) - aiTimestamp, userTimestamp → muted (timestamps are subdued) - agentPrefix, agentName → success (green elements) - agentContent, agentToggleHeaderText → foreground (default text) - logo → foreground - inputPlaceholder → muted - cursor → primary - link → info - linkActive → success - shimmer → info - accentBg, accentText → removed (redundant with primary) Kept essential context colors: - aiLine, userLine (visual differentiation) - Agent backgrounds (specific UI states) - Input bg/fg (component-specific) - Mode toggles (distinct UI elements) Benefits: - Easier to create custom themes (fewer properties to set) - More intuitive (use semantic colors for most things) - Cleaner theme definitions (less duplication) - Better alignment with design system best practices All typechecks pass, all 50 tests pass.
Replace polling with event-driven directory watching for more reliable theme detection on macOS. The issue was that watching files directly doesn't reliably catch key deletions in plist files (which happens when switching from dark to light mode). Changes: - Watch parent directories instead of individual files for better reliability - Use fs.watch (event-driven) instead of fs.watchFile (polling) - Add IDE config file watchers (VS Code, Zed, JetBrains) in addition to system preferences - Simplify theme update logic to always call updater and let store decide if update needed
Merged in changes from origin/main including: - Subsequence matching for suggestion menu - New utility files (highlighted-text, arrays, strings, utils types) - Engineering improvements to suggestion engine - Web API and store updates Adapted suggestion menu to use our semantic theme system: - Uses useTheme hook instead of theme prop - Maps theme properties to semantic equivalents (foreground, muted, primary, surface, background) - Keeps background highlight for selected items with agentFocusedBg
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.