feat: Port TUI customizations from my-claude-code#134
Closed
Icarus603 wants to merge 2 commits intoclaude-code-best:mainfrom
Closed
feat: Port TUI customizations from my-claude-code#134Icarus603 wants to merge 2 commits intoclaude-code-best:mainfrom
Icarus603 wants to merge 2 commits intoclaude-code-best:mainfrom
Conversation
Comprehensive theme and UI customizations: Theme Colors: - Change brand color from Claude orange to blue (rgb(88,190,255)) - Add BRAND_RED (rgb(162,0,67)) and BRAND_GREEN (rgb(34,139,34)) constants - Update all theme variants: light, dark, ansi, daltonized - Change permission/suggestion/remember to cyan-blue (rgb(131,210,238)) - Update diff colors to brand burgundy/forest green - Set dark theme userMessageBackground to #0f0f0f Syntax Highlighting: - Add Royal Gold Dark theme (gold/blue palette, lower saturation) - Replace Monokai Extended as default dark theme - Fine-tune diff highlight colors UI Behavior: - Remove spinner stalled-to-red warning (cleaner UX) - Remove syntax highlighting toggle from ThemePicker - Remove top padding from FullscreenLayout - Set inline code color to amber gold (#FEC84A) in dark mode Files modified: - packages/color-diff-napi/src/index.ts - src/utils/theme.ts - src/utils/markdown.ts - src/components/Spinner/*.tsx - src/components/ThemePicker.tsx - src/components/HighlightedCode.tsx - src/components/FullscreenLayout.tsx Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughIntroduces brand color constants and remaps theme/diff palettes; selects a dark syntax theme for certain names; removes the syntax-highlighting toggle and its keybinding; eliminates stalled-intensity color interpolation from spinner/glimmer components; simplifies highlighted-code coloring and top padding. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/ThemePicker.tsx (1)
101-124:⚠️ Potential issue | 🟠 MajorRemove the stale syntax-highlighting shortcut or keep handling it here.
This screen no longer responds to
theme:toggleSyntaxHighlighting, butsrc/keybindings/defaultBindings.ts, Lines 190-194 andsrc/keybindings/schema.ts, Lines 122-123 still registerCtrl+Tfor theThemePickercontext. That leaves a dead keybinding in the picker. If the toggle is intentionally gone, prune those registrations and the now-orphanedsyntaxHighlightingDisabledsetting too.Also applies to: 155-161
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ThemePicker.tsx` around lines 101 - 124, The project still registers the command theme:toggleSyntaxHighlighting (Ctrl+T) but ThemePicker no longer handles it, leaving a dead keybinding; either restore handling here or remove the registration and setting—if the toggle was intentionally removed, delete the Ctrl+T registration in defaultBindings (the entry that maps Ctrl+T to theme:toggleSyntaxHighlighting) and remove its schema entry in src/keybindings/schema.ts as well as the now-orphaned syntaxHighlightingDisabled setting; alternatively, if you want the shortcut to work, implement a handler in the ThemePicker (use existing functions like setPreviewTheme/cancelPreview/savePreview or add a new toggleSyntaxHighlighting function and wire it into the picker’s keyboard handling or props) and ensure the keybinding in defaultBindings and schema reference that handler.
🧹 Nitpick comments (1)
src/components/Spinner/SpinnerGlyph.tsx (1)
16-29: UnusedstalledIntensityprop creates dead code.The
stalledIntensityprop is still declared in thePropstype (line 19) but is no longer destructured or used in the function (lines 24-29). Per the relevant snippet,SpinnerAnimationRow.tsx:337still passes this prop, which is now silently ignored.Either remove the prop from the type definition and update callers to stop passing it, or add a comment explaining why it's retained for API compatibility.
♻️ Proposed fix to remove unused prop
type Props = { frame: number messageColor: keyof Theme - stalledIntensity?: number reducedMotion?: boolean time?: number } export function SpinnerGlyph({ frame, messageColor, reducedMotion = false, time = 0, }: Props): React.ReactNode {Then update the caller in
SpinnerAnimationRow.tsx:<SpinnerGlyph frame={frame} messageColor={messageColor} - stalledIntensity={overrideColor ? 0 : stalledIntensity} reducedMotion={reducedMotion} time={time} />🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Spinner/SpinnerGlyph.tsx` around lines 16 - 29, Props for SpinnerGlyph declare stalledIntensity but it is not consumed, causing dead/ignored prop when callers (e.g., SpinnerAnimationRow -> SpinnerGlyph) pass it; either remove stalledIntensity from the Props type and update all callers (like SpinnerAnimationRow) to stop passing stalledIntensity, or explicitly keep it for API compatibility by adding it to the SpinnerGlyph parameter destructure (stalledIntensity?: number) with a clear comment explaining it is intentionally unused for backward compatibility; update SpinnerAnimationRow to match whichever approach you choose so there are no mismatched/ignored props.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/HighlightedCode.tsx`:
- Around line 37-43: When expectColorFile() returns null due to the
CLAUDE_CODE_SYNTAX_HIGHLIGHT env flag, we must propagate that disable to the
fallback renderer instead of forcing skipColoring={false}; update the render
paths that use the colorFile result (references: colorFile variable,
expectColorFile(), and the fallback prop skipColoring) so that when ColorFile is
null you pass skipColoring={true} (or otherwise base skipColoring on
!!colorFile), and apply the same change to the other occurrence noted (lines
88-93) to keep the env-based disable consistent.
In `@src/utils/markdown.ts`:
- Around line 90-92: The inline-code color branch only checks theme === 'dark',
so dark-daltonized and dark-ansi still use the non-gold color; update the
ternary in the return that calls color(...)(token.text) to treat any dark
variant as dark (e.g., replace theme === 'dark' with theme?.startsWith('dark')
or an explicit OR list like theme === 'dark' || theme === 'dark-daltonized' ||
theme === 'dark-ansi') so all dark variants use the gold codespan color.
In `@src/utils/theme.ts`:
- Around line 384-394: The success and diffAddedWord keys were set to
BRAND_GREEN and error/diffRemovedWord set to BRAND_RED which reintroduces the
red/green axis into the color-blind-friendly (daltonized) theme; change those
keys back to the daltonized palette values used for this theme (use the
daltonized success/added and error/removed color variables or the explicit
daltonized RGB strings used elsewhere in this file) so success, diffAddedWord,
error and diffRemovedWord no longer reference BRAND_GREEN or BRAND_RED and
instead reference the theme's daltonized equivalents (update the entries for
success, error, diffAddedWord, diffRemovedWord accordingly).
- Around line 122-123: The two theme entries use the same color so the shimmer
loses contrast: change claudeShimmer to a lighter variant instead of
BRAND_COLOR. Locate the claude and claudeShimmer entries in src/utils/theme.ts
and set claudeShimmer to an existing lighter token (e.g., BRAND_COLOR_LIGHT) or
derive a lighter hex via the project's color helper (e.g.,
lightenColor(BRAND_COLOR, 20)) and replace the current assignment; apply the
same change for the other duplicate pairs that mirror claude/claudeShimmer in
this file.
- Around line 573-574: The hover state for the dark daltonized user message is
invisible because userMessageBackground and userMessageBackgroundHover are both
'#191919'; update userMessageBackgroundHover (and any related daltonized hover
token such as userMessageBackgroundHover if duplicated elsewhere) to a slightly
different color (e.g., a lighter or darker hex with sufficient contrast/visible
difference) so hover produces a visible change while preserving the dark theme
and accessibility contrast; pick a value consistent with existing hover
increments in the theme (or compute via a small brightness adjustment from
'#191919') and replace the duplicate '#191919' with that value.
---
Outside diff comments:
In `@src/components/ThemePicker.tsx`:
- Around line 101-124: The project still registers the command
theme:toggleSyntaxHighlighting (Ctrl+T) but ThemePicker no longer handles it,
leaving a dead keybinding; either restore handling here or remove the
registration and setting—if the toggle was intentionally removed, delete the
Ctrl+T registration in defaultBindings (the entry that maps Ctrl+T to
theme:toggleSyntaxHighlighting) and remove its schema entry in
src/keybindings/schema.ts as well as the now-orphaned syntaxHighlightingDisabled
setting; alternatively, if you want the shortcut to work, implement a handler in
the ThemePicker (use existing functions like
setPreviewTheme/cancelPreview/savePreview or add a new toggleSyntaxHighlighting
function and wire it into the picker’s keyboard handling or props) and ensure
the keybinding in defaultBindings and schema reference that handler.
---
Nitpick comments:
In `@src/components/Spinner/SpinnerGlyph.tsx`:
- Around line 16-29: Props for SpinnerGlyph declare stalledIntensity but it is
not consumed, causing dead/ignored prop when callers (e.g., SpinnerAnimationRow
-> SpinnerGlyph) pass it; either remove stalledIntensity from the Props type and
update all callers (like SpinnerAnimationRow) to stop passing stalledIntensity,
or explicitly keep it for API compatibility by adding it to the SpinnerGlyph
parameter destructure (stalledIntensity?: number) with a clear comment
explaining it is intentionally unused for backward compatibility; update
SpinnerAnimationRow to match whichever approach you choose so there are no
mismatched/ignored props.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: b546c2e1-5cea-4da6-935d-56ff68de70f1
📒 Files selected for processing (8)
packages/color-diff-napi/src/index.tssrc/components/FullscreenLayout.tsxsrc/components/HighlightedCode.tsxsrc/components/Spinner/GlimmerMessage.tsxsrc/components/Spinner/SpinnerGlyph.tsxsrc/components/ThemePicker.tsxsrc/utils/markdown.tssrc/utils/theme.ts
💤 Files with no reviewable changes (1)
- src/components/Spinner/GlimmerMessage.tsx
Comment on lines
37
to
+43
| const colorFile = useMemo(() => { | ||
| if (syntaxHighlightingDisabled) { | ||
| return null | ||
| } | ||
| const ColorFile = expectColorFile() | ||
| if (!ColorFile) { | ||
| return null | ||
| } | ||
| return new ColorFile(code, filePath) | ||
| }, [code, filePath, syntaxHighlightingDisabled]) | ||
| }, [code, filePath]) |
There was a problem hiding this comment.
Preserve the env-based disable in the fallback path.
expectColorFile() already returns null when CLAUDE_CODE_SYNTAX_HIGHLIGHT disables syntax highlighting in src/components/StructuredDiff/colorDiff.ts, Lines 18-31. Falling back with skipColoring={false} means this path still tells the fallback renderer to colorize, so the env switch no longer fully disables highlighting and now disagrees with the “Syntax highlighting unavailable” status in ThemePicker.
💡 Minimal fix
-import { expectColorFile } from './StructuredDiff/colorDiff.js'
+import {
+ expectColorFile,
+ getColorModuleUnavailableReason,
+} from './StructuredDiff/colorDiff.js' const [theme] = useTheme()
+ const syntaxHighlightingUnavailable =
+ getColorModuleUnavailableReason() !== null
const colorFile = useMemo(() => {
const ColorFile = expectColorFile()
if (!ColorFile) {
return null
@@
<HighlightedCodeFallback
code={code}
filePath={filePath}
dim={dim}
- skipColoring={false}
+ skipColoring={syntaxHighlightingUnavailable}
/>Also applies to: 88-93
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/HighlightedCode.tsx` around lines 37 - 43, When
expectColorFile() returns null due to the CLAUDE_CODE_SYNTAX_HIGHLIGHT env flag,
we must propagate that disable to the fallback renderer instead of forcing
skipColoring={false}; update the render paths that use the colorFile result
(references: colorFile variable, expectColorFile(), and the fallback prop
skipColoring) so that when ColorFile is null you pass skipColoring={true} (or
otherwise base skipColoring on !!colorFile), and apply the same change to the
other occurrence noted (lines 88-93) to keep the env-based disable consistent.
Author
|
@coderabbitai full review |
✅ Actions performedFull review triggered. |
- Remove dead theme:toggleSyntaxHighlighting keybinding (Ctrl+T) - Remove unused stalledIntensity prop from Spinner components - Fix markdown inline code color for all dark theme variants - Add BRAND_COLOR_LIGHT for shimmer effects - Fix daltonized themes to use colorblind-friendly palette - Fix hover colors to have visible contrast
Icarus603
force-pushed
the
feature/tui-customizations
branch
from
6db4452 to
298129e
Compare
Author
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/Spinner/SpinnerGlyph.tsx (1)
16-22:⚠️ Potential issue | 🟡 MinorRemove
stalledIntensityfromSpinnerGlyphprops to avoid a silent no-op API.
SpinnerGlyphno longer reads this prop, and current internal usage (src/components/Spinner/SpinnerAnimationRow.tsx, Lines 334-348) no longer passes it. Keeping it inPropsmakes callers think stalled behavior still exists.Suggested cleanup
type Props = { frame: number messageColor: keyof Theme - stalledIntensity?: number reducedMotion?: boolean time?: number }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Spinner/SpinnerGlyph.tsx` around lines 16 - 22, The Props type for the SpinnerGlyph component still declares stalledIntensity but the component no longer reads it, creating a silent no-op API; remove the stalledIntensity?: number entry from the Props type in SpinnerGlyph (and any associated JSDoc/prop references) so the prop is no longer advertised, and run a quick grep for stalledIntensity usage (e.g., references in SpinnerGlyph and nearby SpinnerAnimationRow usages) to ensure no remaining references need cleanup.
♻️ Duplicate comments (1)
src/components/HighlightedCode.tsx (1)
37-43:⚠️ Potential issue | 🟠 MajorHonor the env disable in the fallback path.
When Line 38 returns
nullbecauseCLAUDE_CODE_SYNTAX_HIGHLIGHTdisabled syntax coloring, this branch still passesskipColoring={false}toHighlightedCodeFallback, so the fallback highlighter still runs.💡 Minimal fix
) : ( <HighlightedCodeFallback code={code} filePath={filePath} dim={dim} - skipColoring={false} + skipColoring={colorFile === null} /> )}Also applies to: 88-92
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/HighlightedCode.tsx` around lines 37 - 43, The current logic constructs colorFile with expectColorFile() and returns null when syntax coloring is disabled, but the fallback component HighlightedCodeFallback is still invoked with skipColoring={false}; update usages so skipColoring reflects the absence of a ColorFile (e.g., set skipColoring={!colorFile} or skipColoring={true} when expectColorFile() returns null) wherever HighlightedCodeFallback is rendered (including the colorFile useMemo block and the similar branch around the code at lines ~88-92) so the fallback honors the CLAUDE_CODE_SYNTAX_HIGHLIGHT disable flag.
🧹 Nitpick comments (2)
src/components/Spinner/SpinnerGlyph.tsx (1)
2-4: Usesrc/*alias imports instead of relative paths in this TSX file.Suggested import update
-import { Box, Text } from '../../ink.js' -import type { Theme } from '../../utils/theme.js' -import { getDefaultCharacters } from './utils.js' +import { Box, Text } from 'src/ink.js' +import type { Theme } from 'src/utils/theme.js' +import { getDefaultCharacters } from 'src/components/Spinner/utils.js'As per coding guidelines, "Use
src/*path alias for imports in TypeScript files (e.g.,import { ... } from 'src/utils/...')."🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/Spinner/SpinnerGlyph.tsx` around lines 2 - 4, The imports in SpinnerGlyph.tsx use relative paths; update them to use the src/* path alias: replace "../../ink.js" import for Box and Text with "src/ink" (or the canonical src module for ink), replace "../../utils/theme.js" (Theme type) with "src/utils/theme", and replace "./utils.js" (getDefaultCharacters) with "src/components/Spinner/utils" (or the appropriate src path for the Spinner utils) so all imports use the src/* alias and TypeScript resolves them correctly.packages/color-diff-napi/src/index.ts (1)
369-370: Redundant ternary — both branches return the same value.The
tc ?check has no effect since both sides are identical. This can be simplified.♻️ Proposed simplification
- addLine: tc ? BRAND_DIFF_GREEN_DARK_LINE : BRAND_DIFF_GREEN_DARK_LINE, - addWord: tc ? BRAND_DIFF_GREEN_DARK_WORD : BRAND_DIFF_GREEN_DARK_WORD, + addLine: BRAND_DIFF_GREEN_DARK_LINE, + addWord: BRAND_DIFF_GREEN_DARK_WORD,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/color-diff-napi/src/index.ts` around lines 369 - 370, The ternary expressions for addLine and addWord are redundant because both branches use the same constants; remove the unnecessary conditional on tc and assign addLine to BRAND_DIFF_GREEN_DARK_LINE and addWord to BRAND_DIFF_GREEN_DARK_WORD directly (locate the properties addLine and addWord in the object where tc is referenced and replace the ternary expressions that use BRAND_DIFF_GREEN_DARK_LINE / BRAND_DIFF_GREEN_DARK_WORD with the constant values).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/color-diff-napi/src/index.ts`:
- Around line 386-397: The two addition color constants
BRAND_DIFF_GREEN_LIGHT_LINE and BRAND_DIFF_GREEN_LIGHT_WORD should be changed
from green to the blue used for light daltonized diffs; replace their values
with the same blue used in src/utils/theme.ts (diffAdded: 'rgb(153,204,255)') so
the addLine/addWord colors align with the accessible blue palette used for light
daltonized diffs.
In `@src/components/ThemePicker.tsx`:
- Around line 157-161: The footer in ThemePicker.tsx no longer respects
settings.syntaxHighlightingDisabled, causing a UI mismatch with StructuredDiff
and Markdown which still honor that flag; update ThemePicker.tsx to read
settings.syntaxHighlightingDisabled and include it in the logic that computes
colorModuleUnavailableReason/syntaxTheme so the footer shows "Syntax
highlighting disabled" when that flag is true, and add a clear/reset action
(e.g., a button or toggle in the picker UI) that calls the same settings update
used elsewhere to unset syntaxHighlightingDisabled; alternatively, if you intend
to remove the flag entirely, remove references to
settings.syntaxHighlightingDisabled from StructuredDiff.tsx and Markdown.tsx and
from the settings schema so behavior is consistent across ThemePicker,
StructuredDiff, and Markdown.
In `@src/utils/theme.ts`:
- Line 262: The ANSI theme entries briefLabelClaude (and the equivalent in
darkAnsiTheme) use BRAND_COLOR ('rgb(88,190,255)') which is invalid for ANSI
palettes; update briefLabelClaude and the darkAnsiTheme entry to use an existing
ANSI palette constant (e.g., an existing ANSI_* color defined in this module) or
the nearest 256/16-color name instead of the RGB string so the theme uses
terminal-safe ANSI colors; locate the briefLabelClaude property and the
darkAnsiTheme mapping and swap BRAND_COLOR for the appropriate ANSI constant
used elsewhere in this file.
- Around line 394-395: Replace the inaccessible green used for the light
daltonized word-diff by changing the diffAddedWord that currently references
BRAND_GREEN (rgb(34,139,34)) to the blue daltonized value used in the dark
variant (rgb(81,160,200)); update the diffAddedWord in the light daltonized
theme configuration to match the dark variant's blue to ensure
colorblind-accessible red/green contrast handling.
---
Outside diff comments:
In `@src/components/Spinner/SpinnerGlyph.tsx`:
- Around line 16-22: The Props type for the SpinnerGlyph component still
declares stalledIntensity but the component no longer reads it, creating a
silent no-op API; remove the stalledIntensity?: number entry from the Props type
in SpinnerGlyph (and any associated JSDoc/prop references) so the prop is no
longer advertised, and run a quick grep for stalledIntensity usage (e.g.,
references in SpinnerGlyph and nearby SpinnerAnimationRow usages) to ensure no
remaining references need cleanup.
---
Duplicate comments:
In `@src/components/HighlightedCode.tsx`:
- Around line 37-43: The current logic constructs colorFile with
expectColorFile() and returns null when syntax coloring is disabled, but the
fallback component HighlightedCodeFallback is still invoked with
skipColoring={false}; update usages so skipColoring reflects the absence of a
ColorFile (e.g., set skipColoring={!colorFile} or skipColoring={true} when
expectColorFile() returns null) wherever HighlightedCodeFallback is rendered
(including the colorFile useMemo block and the similar branch around the code at
lines ~88-92) so the fallback honors the CLAUDE_CODE_SYNTAX_HIGHLIGHT disable
flag.
---
Nitpick comments:
In `@packages/color-diff-napi/src/index.ts`:
- Around line 369-370: The ternary expressions for addLine and addWord are
redundant because both branches use the same constants; remove the unnecessary
conditional on tc and assign addLine to BRAND_DIFF_GREEN_DARK_LINE and addWord
to BRAND_DIFF_GREEN_DARK_WORD directly (locate the properties addLine and
addWord in the object where tc is referenced and replace the ternary expressions
that use BRAND_DIFF_GREEN_DARK_LINE / BRAND_DIFF_GREEN_DARK_WORD with the
constant values).
In `@src/components/Spinner/SpinnerGlyph.tsx`:
- Around line 2-4: The imports in SpinnerGlyph.tsx use relative paths; update
them to use the src/* path alias: replace "../../ink.js" import for Box and Text
with "src/ink" (or the canonical src module for ink), replace
"../../utils/theme.js" (Theme type) with "src/utils/theme", and replace
"./utils.js" (getDefaultCharacters) with "src/components/Spinner/utils" (or the
appropriate src path for the Spinner utils) so all imports use the src/* alias
and TypeScript resolves them correctly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: aac3cdad-b118-4894-998a-ea5c88bfad08
📒 Files selected for processing (11)
packages/color-diff-napi/src/index.tssrc/components/FullscreenLayout.tsxsrc/components/HighlightedCode.tsxsrc/components/Spinner/GlimmerMessage.tsxsrc/components/Spinner/SpinnerAnimationRow.tsxsrc/components/Spinner/SpinnerGlyph.tsxsrc/components/ThemePicker.tsxsrc/keybindings/defaultBindings.tssrc/keybindings/schema.tssrc/utils/markdown.tssrc/utils/theme.ts
💤 Files with no reviewable changes (4)
- src/keybindings/defaultBindings.ts
- src/keybindings/schema.ts
- src/components/Spinner/GlimmerMessage.tsx
- src/components/Spinner/SpinnerAnimationRow.tsx
Comment on lines
157
to
+161
| {colorModuleUnavailableReason === 'env' | ||
| ? `Syntax highlighting disabled (via CLAUDE_CODE_SYNTAX_HIGHLIGHT=${process.env.CLAUDE_CODE_SYNTAX_HIGHLIGHT})` | ||
| : syntaxHighlightingDisabled | ||
| ? `Syntax highlighting disabled (${syntaxToggleShortcut} to enable)` | ||
| : syntaxTheme | ||
| ? `Syntax theme: ${syntaxTheme.theme}${syntaxTheme.source ? ` (from ${syntaxTheme.source})` : ''} (${syntaxToggleShortcut} to disable)` | ||
| : `Syntax highlighting enabled (${syntaxToggleShortcut} to disable)`} | ||
| ? `Syntax highlighting unavailable (via CLAUDE_CODE_SYNTAX_HIGHLIGHT=${process.env.CLAUDE_CODE_SYNTAX_HIGHLIGHT})` | ||
| : syntaxTheme | ||
| ? `Syntax theme: ${syntaxTheme.theme}${syntaxTheme.source ? ` (from ${syntaxTheme.source})` : ''}` | ||
| : 'Syntax highlighting enabled'} |
There was a problem hiding this comment.
Finish removing syntaxHighlightingDisabled or keep the picker aware of it.
This footer now only treats the env path as “unavailable”, but the preview on this screen still flows through StructuredDiff, and both src/components/StructuredDiff.tsx:127-145 and src/components/Markdown.tsx:80-84 still honor settings.syntaxHighlightingDisabled. Since src/utils/settings/types.ts:693-696 still keeps that field in the schema, existing configs can stay stuck with highlighting disabled while this screen says “enabled” and no longer offers a way to clear it.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/ThemePicker.tsx` around lines 157 - 161, The footer in
ThemePicker.tsx no longer respects settings.syntaxHighlightingDisabled, causing
a UI mismatch with StructuredDiff and Markdown which still honor that flag;
update ThemePicker.tsx to read settings.syntaxHighlightingDisabled and include
it in the logic that computes colorModuleUnavailableReason/syntaxTheme so the
footer shows "Syntax highlighting disabled" when that flag is true, and add a
clear/reset action (e.g., a button or toggle in the picker UI) that calls the
same settings update used elsewhere to unset syntaxHighlightingDisabled;
alternatively, if you intend to remove the flag entirely, remove references to
settings.syntaxHighlightingDisabled from StructuredDiff.tsx and Markdown.tsx and
from the settings schema so behavior is consistent across ThemePicker,
StructuredDiff, and Markdown.
| fastModeShimmer: 'ansi:redBright', | ||
| briefLabelYou: 'ansi:blue', | ||
| briefLabelClaude: 'ansi:redBright', | ||
| briefLabelClaude: BRAND_COLOR, |
There was a problem hiding this comment.
ANSI theme should not use RGB color value.
BRAND_COLOR is 'rgb(88,190,255)', but ANSI themes target terminals without true color support. Using an RGB value here breaks the consistency of the ANSI palette and may render incorrectly on limited terminals. The same issue occurs at line 343 for darkAnsiTheme.
🛠️ Proposed fix
briefLabelYou: 'ansi:blue',
- briefLabelClaude: BRAND_COLOR,
+ briefLabelClaude: 'ansi:cyanBright',And at line 343:
briefLabelYou: 'ansi:blueBright',
- briefLabelClaude: BRAND_COLOR,
+ briefLabelClaude: 'ansi:cyanBright',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| briefLabelClaude: BRAND_COLOR, | |
| briefLabelClaude: 'ansi:cyanBright', |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/utils/theme.ts` at line 262, The ANSI theme entries briefLabelClaude (and
the equivalent in darkAnsiTheme) use BRAND_COLOR ('rgb(88,190,255)') which is
invalid for ANSI palettes; update briefLabelClaude and the darkAnsiTheme entry
to use an existing ANSI palette constant (e.g., an existing ANSI_* color defined
in this module) or the nearest 256/16-color name instead of the RGB string so
the theme uses terminal-safe ANSI colors; locate the briefLabelClaude property
and the darkAnsiTheme mapping and swap BRAND_COLOR for the appropriate ANSI
constant used elsewhere in this file.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Summary
This PR ports comprehensive TUI customizations from the my-claude-code fork:
Theme Colors
rgb(88,190,255))BRAND_RED(rgb(162,0,67)) andBRAND_GREEN(rgb(34,139,34)) constantsrgb(131,210,238))#0f0f0fSyntax Highlighting
UI Behavior
#FEC84A) in dark modeFiles Changed
packages/color-diff-napi/src/index.ts- Royal Gold theme, brand diff colorssrc/utils/theme.ts- Brand color system, theme variantssrc/utils/markdown.ts- Inline code colorsrc/components/Spinner/*.tsx- Remove stalled warningsrc/components/ThemePicker.tsx- Simplify UIsrc/components/HighlightedCode.tsx- Remove toggle checksrc/components/FullscreenLayout.tsx- Remove paddingSummary by CodeRabbit
Style
Bug Fixes
Chores