diff options
Diffstat (limited to 'packages/cli/src/ui/components')
17 files changed, 37 insertions, 47 deletions
diff --git a/packages/cli/src/ui/components/AboutBox.tsx b/packages/cli/src/ui/components/AboutBox.tsx index 472bf979..0744beff 100644 --- a/packages/cli/src/ui/components/AboutBox.tsx +++ b/packages/cli/src/ui/components/AboutBox.tsx @@ -24,7 +24,7 @@ export const AboutBox: React.FC<AboutBoxProps> = ({ }) => ( <Box borderStyle="round" - borderColor={Colors.SubtleComment} + borderColor={Colors.Gray} flexDirection="column" padding={1} marginY={1} diff --git a/packages/cli/src/ui/components/AutoAcceptIndicator.tsx b/packages/cli/src/ui/components/AutoAcceptIndicator.tsx index dbdb3e9a..9375a7d6 100644 --- a/packages/cli/src/ui/components/AutoAcceptIndicator.tsx +++ b/packages/cli/src/ui/components/AutoAcceptIndicator.tsx @@ -40,7 +40,7 @@ export const AutoAcceptIndicator: React.FC<AutoAcceptIndicatorProps> = ({ <Box> <Text color={textColor}> {textContent} - {subText && <Text color={Colors.SubtleComment}>{subText}</Text>} + {subText && <Text color={Colors.Gray}>{subText}</Text>} </Text> </Box> ); diff --git a/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx b/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx index fba536d2..6012b565 100644 --- a/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx +++ b/packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx @@ -27,7 +27,7 @@ export const ConsoleSummaryDisplay: React.FC<ConsoleSummaryDisplayProps> = ({ {errorCount > 0 && ( <Text color={Colors.AccentRed}> {errorIcon} {errorCount} error{errorCount > 1 ? 's' : ''}{' '} - <Text color={Colors.SubtleComment}>(ctrl+O for details)</Text> + <Text color={Colors.Gray}>(ctrl+O for details)</Text> </Text> )} </Box> diff --git a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx index 3cfb4d8d..b42785a2 100644 --- a/packages/cli/src/ui/components/ContextSummaryDisplay.tsx +++ b/packages/cli/src/ui/components/ContextSummaryDisplay.tsx @@ -47,5 +47,5 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({ summaryText += mcpText; } - return <Text color={Colors.SubtleComment}>{summaryText}</Text>; + return <Text color={Colors.Gray}>{summaryText}</Text>; }; diff --git a/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx b/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx index cd3f37bb..c2ecb803 100644 --- a/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx +++ b/packages/cli/src/ui/components/DetailedMessagesDisplay.tsx @@ -27,13 +27,12 @@ export const DetailedMessagesDisplay: React.FC< flexDirection="column" marginTop={1} borderStyle="round" - borderColor={Colors.SubtleComment} + borderColor={Colors.Gray} paddingX={1} > <Box marginBottom={1}> <Text bold color={Colors.Foreground}> - Debug Console{' '} - <Text color={Colors.SubtleComment}>(ctrl+O to close)</Text> + Debug Console <Text color={Colors.Gray}>(ctrl+O to close)</Text> </Text> </Box> {messages.map((msg, index) => { @@ -50,7 +49,7 @@ export const DetailedMessagesDisplay: React.FC< icon = '\u2716'; // Heavy multiplication x (✖) break; case 'debug': - textColor = Colors.SubtleComment; // Or Colors.Gray + textColor = Colors.Gray; // Or Colors.Gray icon = '\u1F50D'; // Left-pointing magnifying glass (????) break; case 'log': @@ -65,7 +64,7 @@ export const DetailedMessagesDisplay: React.FC< <Text color={textColor} wrap="wrap"> {msg.content} {msg.count && msg.count > 1 && ( - <Text color={Colors.SubtleComment}> (x{msg.count})</Text> + <Text color={Colors.Gray}> (x{msg.count})</Text> )} </Text> </Box> diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx index 46d669b7..ea83a031 100644 --- a/packages/cli/src/ui/components/Footer.tsx +++ b/packages/cli/src/ui/components/Footer.tsx @@ -40,9 +40,7 @@ export const Footer: React.FC<FooterProps> = ({ <Box> <Text color={Colors.LightBlue}> {shortenPath(tildeifyPath(targetDir), 70)} - {branchName && ( - <Text color={Colors.SubtleComment}> ({branchName}*)</Text> - )} + {branchName && <Text color={Colors.Gray}> ({branchName}*)</Text>} </Text> {debugMode && ( <Text color={Colors.AccentRed}> @@ -65,13 +63,11 @@ export const Footer: React.FC<FooterProps> = ({ ) : process.env.SANDBOX === 'sandbox-exec' ? ( <Text color={Colors.AccentYellow}> sandbox-exec{' '} - <Text color={Colors.SubtleComment}> - ({process.env.SEATBELT_PROFILE}) - </Text> + <Text color={Colors.Gray}>({process.env.SEATBELT_PROFILE})</Text> </Text> ) : ( <Text color={Colors.AccentRed}> - no sandbox <Text color={Colors.SubtleComment}>(see README)</Text> + no sandbox <Text color={Colors.Gray}>(see README)</Text> </Text> )} </Box> @@ -81,7 +77,7 @@ export const Footer: React.FC<FooterProps> = ({ <Text color={Colors.AccentBlue}> {model} </Text> {corgiMode && ( <Text> - <Text color={Colors.SubtleComment}>| </Text> + <Text color={Colors.Gray}>| </Text> <Text color={Colors.AccentRed}>▼</Text> <Text color={Colors.Foreground}>(´</Text> <Text color={Colors.AccentRed}>ᴥ</Text> @@ -91,7 +87,7 @@ export const Footer: React.FC<FooterProps> = ({ )} {!showErrorDetails && errorCount > 0 && ( <Box> - <Text color={Colors.SubtleComment}>| </Text> + <Text color={Colors.Gray}>| </Text> <ConsoleSummaryDisplay errorCount={errorCount} /> </Box> )} diff --git a/packages/cli/src/ui/components/Help.tsx b/packages/cli/src/ui/components/Help.tsx index 74d03573..92e94a8a 100644 --- a/packages/cli/src/ui/components/Help.tsx +++ b/packages/cli/src/ui/components/Help.tsx @@ -31,7 +31,7 @@ export const Help: React.FC<Help> = ({ commands }) => ( {commands .filter((command) => command.description) .map((command: SlashCommand) => ( - <Text key={command.name} color={Colors.SubtleComment}> + <Text key={command.name} color={Colors.Gray}> <Text bold color={Colors.AccentPurple}> {' '} /{command.name} @@ -39,7 +39,7 @@ export const Help: React.FC<Help> = ({ commands }) => ( {command.description && ' - ' + command.description} </Text> ))} - <Text color={Colors.SubtleComment}> + <Text color={Colors.Gray}> <Text bold color={Colors.AccentPurple}> {' '} !{' '} diff --git a/packages/cli/src/ui/components/InputPrompt.tsx b/packages/cli/src/ui/components/InputPrompt.tsx index 7e4c8c8b..4d71e612 100644 --- a/packages/cli/src/ui/components/InputPrompt.tsx +++ b/packages/cli/src/ui/components/InputPrompt.tsx @@ -349,7 +349,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({ </Text> <Box flexGrow={1} flexDirection="column"> {buffer.text.length === 0 && placeholder ? ( - <Text color={Colors.SubtleComment}>{placeholder}</Text> + <Text color={Colors.Gray}>{placeholder}</Text> ) : ( linesToRender.map((lineText, visualIdxInRenderedSet) => { const cursorVisualRow = cursorVisualRowAbsolute - scrollVisualRow; diff --git a/packages/cli/src/ui/components/LoadingIndicator.tsx b/packages/cli/src/ui/components/LoadingIndicator.tsx index 6ff4dac8..61b74b89 100644 --- a/packages/cli/src/ui/components/LoadingIndicator.tsx +++ b/packages/cli/src/ui/components/LoadingIndicator.tsx @@ -40,7 +40,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({ {currentLoadingPhrase && ( <Text color={Colors.AccentPurple}>{currentLoadingPhrase}</Text> )} - <Text color={Colors.SubtleComment}> + <Text color={Colors.Gray}> {streamingState === StreamingState.WaitingForConfirmation ? '' : ` (esc to cancel, ${elapsedTime}s)`} diff --git a/packages/cli/src/ui/components/MemoryUsageDisplay.tsx b/packages/cli/src/ui/components/MemoryUsageDisplay.tsx index 5d9a7c49..d768445c 100644 --- a/packages/cli/src/ui/components/MemoryUsageDisplay.tsx +++ b/packages/cli/src/ui/components/MemoryUsageDisplay.tsx @@ -12,18 +12,14 @@ import { formatMemoryUsage } from '../utils/formatters.js'; export const MemoryUsageDisplay: React.FC = () => { const [memoryUsage, setMemoryUsage] = useState<string>(''); - const [memoryUsageColor, setMemoryUsageColor] = useState<string>( - Colors.SubtleComment, - ); + const [memoryUsageColor, setMemoryUsageColor] = useState<string>(Colors.Gray); useEffect(() => { const updateMemory = () => { const usage = process.memoryUsage().rss; setMemoryUsage(formatMemoryUsage(usage)); setMemoryUsageColor( - usage >= 2 * 1024 * 1024 * 1024 - ? Colors.AccentRed - : Colors.SubtleComment, + usage >= 2 * 1024 * 1024 * 1024 ? Colors.AccentRed : Colors.Gray, ); }; const intervalId = setInterval(updateMemory, 2000); @@ -33,7 +29,7 @@ export const MemoryUsageDisplay: React.FC = () => { return ( <Box> - <Text color={Colors.SubtleComment}>| </Text> + <Text color={Colors.Gray}>| </Text> <Text color={memoryUsageColor}>{memoryUsage}</Text> </Box> ); diff --git a/packages/cli/src/ui/components/ShellModeIndicator.tsx b/packages/cli/src/ui/components/ShellModeIndicator.tsx index 612af1a6..f5b11b24 100644 --- a/packages/cli/src/ui/components/ShellModeIndicator.tsx +++ b/packages/cli/src/ui/components/ShellModeIndicator.tsx @@ -12,7 +12,7 @@ export const ShellModeIndicator: React.FC = () => ( <Box> <Text color={Colors.AccentYellow}> shell mode enabled - <Text color={Colors.SubtleComment}> (esc to disable)</Text> + <Text color={Colors.Gray}> (esc to disable)</Text> </Text> </Box> ); diff --git a/packages/cli/src/ui/components/SuggestionsDisplay.tsx b/packages/cli/src/ui/components/SuggestionsDisplay.tsx index fb8005f6..0620665f 100644 --- a/packages/cli/src/ui/components/SuggestionsDisplay.tsx +++ b/packages/cli/src/ui/components/SuggestionsDisplay.tsx @@ -57,7 +57,7 @@ export function SuggestionsDisplay({ {visibleSuggestions.map((suggestion, index) => { const originalIndex = startIndex + index; const isActive = originalIndex === activeIndex; - const textColor = isActive ? Colors.AccentPurple : Colors.SubtleComment; + const textColor = isActive ? Colors.AccentPurple : Colors.Gray; return ( <Box key={`${suggestion}-${originalIndex}`} width={width}> diff --git a/packages/cli/src/ui/components/ThemeDialog.tsx b/packages/cli/src/ui/components/ThemeDialog.tsx index 81a34ff4..eeccee4c 100644 --- a/packages/cli/src/ui/components/ThemeDialog.tsx +++ b/packages/cli/src/ui/components/ThemeDialog.tsx @@ -97,7 +97,7 @@ export function ThemeDialog({ return ( <Box borderStyle="round" - borderColor={Colors.SubtleComment} + borderColor={Colors.Gray} flexDirection="row" padding={1} width="100%" @@ -106,7 +106,7 @@ export function ThemeDialog({ <Box flexDirection="column" width="45%" paddingRight={2}> <Text bold={focusedSection === 'theme'}> {focusedSection === 'theme' ? '> ' : ' '}Select Theme{' '} - <Text color={Colors.SubtleComment}>{otherScopeModifiedMessage}</Text> + <Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text> </Text> <RadioButtonSelect key={selectInputKey} @@ -132,7 +132,7 @@ export function ThemeDialog({ </Box> <Box marginTop={1}> - <Text color={Colors.SubtleComment}> + <Text color={Colors.Gray}> (Use Enter to select, Tab to change focus) </Text> </Box> @@ -143,12 +143,13 @@ export function ThemeDialog({ <Text bold>Preview</Text> <Box borderStyle="single" - borderColor={Colors.SubtleComment} + borderColor={Colors.Gray} padding={1} flexDirection="column" > {colorizeCode( - `def fibonacci(n): + `# function +def fibonacci(n): a, b = 0, 1 for _ in range(n): a, b = b, a + b diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx index 1a4c69c0..0b35e32d 100644 --- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx +++ b/packages/cli/src/ui/components/messages/DiffRenderer.tsx @@ -107,7 +107,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({ if (parsedLines.length === 0) { return ( - <Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}> + <Box borderStyle="round" borderColor={Colors.Gray} padding={1}> <Text dimColor>No changes detected.</Text> </Box> ); @@ -162,7 +162,7 @@ const renderDiffContent = ( if (displayableLines.length === 0) { return ( - <Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}> + <Box borderStyle="round" borderColor={Colors.Gray} padding={1}> <Text dimColor>No changes detected.</Text> </Box> ); @@ -217,7 +217,7 @@ const renderDiffContent = ( borderRight={false} borderLeft={false} borderStyle="double" - borderColor={Colors.SubtleComment} + borderColor={Colors.Gray} ></Box>, ); } @@ -260,7 +260,7 @@ const renderDiffContent = ( acc.push( <Box key={lineKey} flexDirection="row"> - <Text color={Colors.SubtleComment}>{gutterNumStr.padEnd(4)} </Text> + <Text color={Colors.Gray}>{gutterNumStr.padEnd(4)} </Text> <Text color={color} dimColor={dim}> {prefixSymbol}{' '} </Text> diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx index 280b4321..71e6a59b 100644 --- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx @@ -25,7 +25,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({ const hasPending = !toolCalls.every( (t) => t.status === ToolCallStatus.Success, ); - const borderColor = hasPending ? Colors.AccentYellow : Colors.SubtleComment; + const borderColor = hasPending ? Colors.AccentYellow : Colors.Gray; const staticHeight = /* border */ 2 + /* marginBottom */ 1; diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx index 0cb5a101..3883d361 100644 --- a/packages/cli/src/ui/components/messages/ToolMessage.tsx +++ b/packages/cli/src/ui/components/messages/ToolMessage.tsx @@ -72,7 +72,7 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({ <Box flexDirection="column"> {hiddenLines > 0 && ( <Box> - <Text color={Colors.SubtleComment}> + <Text color={Colors.Gray}> ... first {hiddenLines} line{hiddenLines === 1 ? '' : 's'}{' '} hidden ... </Text> @@ -162,7 +162,7 @@ const ToolInfo: React.FC<ToolInfo> = ({ case 'medium': return Colors.Foreground; case 'low': - return Colors.SubtleComment; + return Colors.Gray; default: { const exhaustiveCheck: never = emphasis; return exhaustiveCheck; @@ -178,7 +178,7 @@ const ToolInfo: React.FC<ToolInfo> = ({ <Text color={nameColor} bold> {name} </Text>{' '} - <Text color={Colors.SubtleComment}>{description}</Text> + <Text color={Colors.Gray}>{description}</Text> </Text> </Box> ); diff --git a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx index 5cd25c7c..22b5cecd 100644 --- a/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx +++ b/packages/cli/src/ui/components/shared/RadioButtonSelect.tsx @@ -111,9 +111,7 @@ export function RadioButtonSelect<T>({ return ( <Text color={textColor}> {itemWithThemeProps.themeNameDisplay}{' '} - <Text color={Colors.SubtleComment}> - {itemWithThemeProps.themeTypeDisplay} - </Text> + <Text color={Colors.Gray}>{itemWithThemeProps.themeTypeDisplay}</Text> </Text> ); } |