From a651fc2a0d34a2443fad3a9b0f834a121262dfcb Mon Sep 17 00:00:00 2001 From: Keith Guerin Date: Thu, 26 Feb 2026 14:31:32 -0800 Subject: [PATCH] feat(ui): refine /theme colors debug visualizer layout and styling --- .../cli/src/ui/components/ColorsDisplay.tsx | 71 +++++------ .../cli/src/ui/components/ThemeDialog.tsx | 79 ++++++------ .../__snapshots__/ThemeDialog.test.tsx.snap | 112 ++++++++---------- 3 files changed, 125 insertions(+), 137 deletions(-) diff --git a/packages/cli/src/ui/components/ColorsDisplay.tsx b/packages/cli/src/ui/components/ColorsDisplay.tsx index 6668aee72a..3a63191b1c 100644 --- a/packages/cli/src/ui/components/ColorsDisplay.tsx +++ b/packages/cli/src/ui/components/ColorsDisplay.tsx @@ -134,57 +134,58 @@ export const ColorsDisplay: React.FC = ({ ]; return ( - + - + + DEVELOPER TOOLS (Not visible to users) + + + How themes and terminals interact: + + - How themes and terminals interact: + • TrueColor (Hex): Modern terminals render hex + codes exactly. They are not overridden by + terminal app themes. + + + • ANSI Names: Colors like 'red' or + 'green' are mapped to your terminal + app's specific palette. + + + • Default colors: When Value is + '(blank)', the app uses your terminal's default + foreground/background. + + + • Compatibility: In terminals with limited color, + hex colors are automatically approximated to the closest available + ANSI color. - - - • TrueColor (Hex): Modern terminals render hex - codes exactly. They are not overridden by - terminal app themes. - - - • ANSI Names: Colors like 'red' or - 'green' (used in our ANSI theme) are{' '} - mapped to your terminal app's specific palette. - - - • Default colors: When Name or Value is - '(blank)', the app uses your terminal's default - foreground/background. - - - • Compatibility: In terminals with limited - color, hex colors are automatically approximated to the closest - available ANSI color. - - {/* Header */} - + - + Value - + Name - + Usage diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx index feac24dc2f..4bfb623db7 100644 --- a/packages/cli/src/ui/components/ThemeDialog.tsx +++ b/packages/cli/src/ui/components/ThemeDialog.tsx @@ -247,6 +247,11 @@ export function ThemeDialog({ // The code block is slightly longer than the diff, so give it more space. const codeBlockHeight = Math.ceil(availableHeightForPanes * 0.6); const diffHeight = Math.floor(availableHeightForPanes * 0.4); + + const previewTheme = + themeManager.getTheme(highlightedThemeName || DEFAULT_THEME.name) || + DEFAULT_THEME; + return ( Preview - {/* Get the Theme object for the highlighted theme, fall back to default if not found */} - {(() => { - const previewTheme = - themeManager.getTheme( - highlightedThemeName || DEFAULT_THEME.name, - ) || DEFAULT_THEME; - - return ( - - {colorizeCode({ - code: `# function + + {colorizeCode({ + code: `# function def fibonacci(n): a, b = 0, 1 for _ in range(n): a, b = b, a + b return a`, - language: 'python', - availableHeight: - isAlternateBuffer === false ? codeBlockHeight : undefined, - maxWidth: colorizeCodeWidth, - settings, - })} - - + - {isDevelopment && ( - - - - )} - - ); - })()} + availableTerminalHeight={ + isAlternateBuffer === false ? diffHeight : undefined + } + terminalWidth={colorizeCodeWidth} + theme={previewTheme} + /> + + {isDevelopment && ( + + + + )} ) : ( diff --git a/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap b/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap index 1a9c194cf1..4d1c9e61da 100644 --- a/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap +++ b/packages/cli/src/ui/components/__snapshots__/ThemeDialog.test.tsx.snap @@ -16,27 +16,27 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal │ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │ │ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │ │ 11. Ayu Light │ │ │ -│ 12. Default Light │ │ │ -│ ▼ │ How themes and terminals interact: │ │ +│ 12. Default Light └─────────────────────────────────────────────────┘ │ +│ ▼ │ +│ ╭─────────────────────────────────────────────────╮ │ +│ │ DEVELOPER TOOLS (Not visible to users) │ │ +│ │ How themes and terminals interact: │ │ │ │ • TrueColor (Hex): Modern terminals render │ │ │ │ hex codes exactly. They are not overridden by │ │ │ │ terminal app themes. │ │ │ │ • ANSI Names: Colors like 'red' or 'green' │ │ -│ │ (used in our ANSI theme) are mapped to your │ │ -│ │ terminal app's specific palette. │ │ -│ │ • Default colors: When Name or Value is │ │ -│ │ '(blank)', the app uses your terminal's │ │ -│ │ default foreground/background. │ │ +│ │ are mapped to your terminal app's specific │ │ +│ │ palette. │ │ +│ │ • Default colors: When Value is '(blank)', │ │ +│ │ the app uses your terminal's default │ │ +│ │ foreground/background. │ │ │ │ • Compatibility: In terminals with limited │ │ │ │ color, hex colors are automatically │ │ │ │ approximated to the closest available ANSI │ │ │ │ color. │ │ │ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ ValuName Usage │ │ │ -│ │ │ e │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ +│ │ ValuName Usage │ │ +│ │ e │ │ │ │ #… background.pMain terminal background │ │ │ │ rimary color │ │ │ │ … backgroundSubtle background for message │ │ @@ -81,9 +81,7 @@ exports[`Initial Theme Selection > should default to a dark theme when terminal │ │ CE │ │ │ │ #C367 │ │ │ │ 7F │ │ -│ │ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────┘ │ +│ ╰─────────────────────────────────────────────────╯ │ │ │ │ (Use Enter to select, Tab to configure scope, Esc to close) │ │ │ @@ -107,27 +105,27 @@ exports[`Initial Theme Selection > should default to a light theme when terminal │ 9. Atom One Dark (Incompatible) │ 1 - print("Hello, " + name) │ │ │ 10. Ayu Dark (Incompatible) │ 1 + print(f"Hello, {name}!") │ │ │ 11. Default Dark (Incompatible) │ │ │ -│ 12. Dracula Dark (Incompatible) │ │ │ -│ ▼ │ How themes and terminals interact: │ │ +│ 12. Dracula Dark (Incompatible) └─────────────────────────────────────────────────┘ │ +│ ▼ │ +│ ╭─────────────────────────────────────────────────╮ │ +│ │ DEVELOPER TOOLS (Not visible to users) │ │ +│ │ How themes and terminals interact: │ │ │ │ • TrueColor (Hex): Modern terminals render │ │ │ │ hex codes exactly. They are not overridden by │ │ │ │ terminal app themes. │ │ │ │ • ANSI Names: Colors like 'red' or 'green' │ │ -│ │ (used in our ANSI theme) are mapped to your │ │ -│ │ terminal app's specific palette. │ │ -│ │ • Default colors: When Name or Value is │ │ -│ │ '(blank)', the app uses your terminal's │ │ -│ │ default foreground/background. │ │ +│ │ are mapped to your terminal app's specific │ │ +│ │ palette. │ │ +│ │ • Default colors: When Value is '(blank)', │ │ +│ │ the app uses your terminal's default │ │ +│ │ foreground/background. │ │ │ │ • Compatibility: In terminals with limited │ │ │ │ color, hex colors are automatically │ │ │ │ approximated to the closest available ANSI │ │ │ │ color. │ │ │ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ ValuName Usage │ │ │ -│ │ │ e │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ +│ │ ValuName Usage │ │ +│ │ e │ │ │ │ #… background.pMain terminal background │ │ │ │ rimary color │ │ │ │ … backgroundSubtle background for message │ │ @@ -172,9 +170,7 @@ exports[`Initial Theme Selection > should default to a light theme when terminal │ │ CE │ │ │ │ #C367 │ │ │ │ 7F │ │ -│ │ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────┘ │ +│ ╰─────────────────────────────────────────────────╯ │ │ │ │ (Use Enter to select, Tab to configure scope, Esc to close) │ │ │ @@ -198,27 +194,27 @@ exports[`Initial Theme Selection > should use the theme from settings even if te │ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │ │ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │ │ 11. Ayu Light │ │ │ -│ 12. Default Light │ │ │ -│ ▼ │ How themes and terminals interact: │ │ +│ 12. Default Light └─────────────────────────────────────────────────┘ │ +│ ▼ │ +│ ╭─────────────────────────────────────────────────╮ │ +│ │ DEVELOPER TOOLS (Not visible to users) │ │ +│ │ How themes and terminals interact: │ │ │ │ • TrueColor (Hex): Modern terminals render │ │ │ │ hex codes exactly. They are not overridden by │ │ │ │ terminal app themes. │ │ │ │ • ANSI Names: Colors like 'red' or 'green' │ │ -│ │ (used in our ANSI theme) are mapped to your │ │ -│ │ terminal app's specific palette. │ │ -│ │ • Default colors: When Name or Value is │ │ -│ │ '(blank)', the app uses your terminal's │ │ -│ │ default foreground/background. │ │ +│ │ are mapped to your terminal app's specific │ │ +│ │ palette. │ │ +│ │ • Default colors: When Value is '(blank)', │ │ +│ │ the app uses your terminal's default │ │ +│ │ foreground/background. │ │ │ │ • Compatibility: In terminals with limited │ │ │ │ color, hex colors are automatically │ │ │ │ approximated to the closest available ANSI │ │ │ │ color. │ │ │ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ ValuName Usage │ │ │ -│ │ │ e │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ +│ │ ValuName Usage │ │ +│ │ e │ │ │ │ #… background.pMain terminal background │ │ │ │ rimary color │ │ │ │ … backgroundSubtle background for message │ │ @@ -263,9 +259,7 @@ exports[`Initial Theme Selection > should use the theme from settings even if te │ │ CE │ │ │ │ #C367 │ │ │ │ 7F │ │ -│ │ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────┘ │ +│ ╰─────────────────────────────────────────────────╯ │ │ │ │ (Use Enter to select, Tab to configure scope, Esc to close) │ │ │ @@ -303,27 +297,27 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode │ 9. Solarized Dark │ 1 - print("Hello, " + name) │ │ │ 10. ANSI Light │ 1 + print(f"Hello, {name}!") │ │ │ 11. Ayu Light │ │ │ -│ 12. Default Light │ │ │ -│ ▼ │ How themes and terminals interact: │ │ +│ 12. Default Light └─────────────────────────────────────────────────┘ │ +│ ▼ │ +│ ╭─────────────────────────────────────────────────╮ │ +│ │ DEVELOPER TOOLS (Not visible to users) │ │ +│ │ How themes and terminals interact: │ │ │ │ • TrueColor (Hex): Modern terminals render │ │ │ │ hex codes exactly. They are not overridden by │ │ │ │ terminal app themes. │ │ │ │ • ANSI Names: Colors like 'red' or 'green' │ │ -│ │ (used in our ANSI theme) are mapped to your │ │ -│ │ terminal app's specific palette. │ │ -│ │ • Default colors: When Name or Value is │ │ -│ │ '(blank)', the app uses your terminal's │ │ -│ │ default foreground/background. │ │ +│ │ are mapped to your terminal app's specific │ │ +│ │ palette. │ │ +│ │ • Default colors: When Value is '(blank)', │ │ +│ │ the app uses your terminal's default │ │ +│ │ foreground/background. │ │ │ │ • Compatibility: In terminals with limited │ │ │ │ color, hex colors are automatically │ │ │ │ approximated to the closest available ANSI │ │ │ │ color. │ │ │ │ │ │ -│ │ ┌─────────────────────────────────────────────┐ │ │ -│ │ │ ValuName Usage │ │ │ -│ │ │ e │ │ │ -│ │ └─────────────────────────────────────────────┘ │ │ -│ │ │ │ +│ │ ValuName Usage │ │ +│ │ e │ │ │ │ #… background.pMain terminal background │ │ │ │ rimary color │ │ │ │ … backgroundSubtle background for message │ │ @@ -368,9 +362,7 @@ exports[`ThemeDialog Snapshots > should render correctly in theme selection mode │ │ CE │ │ │ │ #C367 │ │ │ │ 7F │ │ -│ │ │ │ -│ │ │ │ -│ └─────────────────────────────────────────────────┘ │ +│ ╰─────────────────────────────────────────────────╯ │ │ │ │ (Use Enter to select, Tab to configure scope, Esc to close) │ │ │