summaryrefslogtreecommitdiff
path: root/packages/cli/src
diff options
context:
space:
mode:
Diffstat (limited to 'packages/cli/src')
-rw-r--r--packages/cli/src/ui/App.tsx35
-rw-r--r--packages/cli/src/ui/colors.ts12
-rw-r--r--packages/cli/src/ui/components/Footer.tsx7
-rw-r--r--packages/cli/src/ui/components/Header.tsx51
-rw-r--r--packages/cli/src/ui/components/InputPrompt.tsx28
-rw-r--r--packages/cli/src/ui/components/LoadingIndicator.tsx5
-rw-r--r--packages/cli/src/ui/components/Tips.tsx29
-rw-r--r--packages/cli/src/ui/components/messages/DiffRenderer.tsx14
-rw-r--r--packages/cli/src/ui/components/messages/ErrorMessage.tsx5
-rw-r--r--packages/cli/src/ui/components/messages/GeminiMessage.tsx5
-rw-r--r--packages/cli/src/ui/components/messages/InfoMessage.tsx5
-rw-r--r--packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx5
-rw-r--r--packages/cli/src/ui/components/messages/ToolGroupMessage.tsx3
-rw-r--r--packages/cli/src/ui/components/messages/ToolMessage.tsx15
-rw-r--r--packages/cli/src/ui/components/messages/UserMessage.tsx3
-rw-r--r--packages/cli/src/ui/utils/MarkdownRenderer.tsx15
16 files changed, 141 insertions, 96 deletions
diff --git a/packages/cli/src/ui/App.tsx b/packages/cli/src/ui/App.tsx
index fa9b6f9b..14b76c8f 100644
--- a/packages/cli/src/ui/App.tsx
+++ b/packages/cli/src/ui/App.tsx
@@ -11,7 +11,6 @@ import { useGeminiStream } from './hooks/useGeminiStream.js';
import { useLoadingIndicator } from './hooks/useLoadingIndicator.js';
import { useInputHistory } from './hooks/useInputHistory.js';
import { Header } from './components/Header.js';
-import { Tips } from './components/Tips.js';
import { HistoryDisplay } from './components/HistoryDisplay.js';
import { LoadingIndicator } from './components/LoadingIndicator.js';
import { InputPrompt } from './components/InputPrompt.js';
@@ -22,7 +21,8 @@ import {
useStartupWarnings,
useInitializationErrorEffect,
} from './hooks/useAppEffects.js';
-import type { Config } from '@gemini-code/server';
+import { shortenPath, type Config } from '@gemini-code/server';
+import { Colors } from './colors.js';
interface AppProps {
config: Config;
@@ -73,39 +73,37 @@ export const App = ({ config }: AppProps) => {
return (
<Box flexDirection="column" padding={1} marginBottom={1} width="100%">
- <Header cwd={config.getTargetDir()} />
+ <Header />
{startupWarnings.length > 0 && (
<Box
borderStyle="round"
- borderColor="yellow"
+ borderColor={Colors.AccentYellow}
paddingX={1}
marginY={1}
flexDirection="column"
>
{startupWarnings.map((warning, index) => (
- <Text key={index} color="yellow">
+ <Text key={index} color={Colors.AccentYellow}>
{warning}
</Text>
))}
</Box>
)}
- <Tips />
-
{initError &&
streamingState !== StreamingState.Responding &&
!isWaitingForToolConfirmation && (
<Box
borderStyle="round"
- borderColor="red"
+ borderColor={Colors.AccentRed}
paddingX={1}
marginBottom={1}
>
{history.find(
(item) => item.type === 'error' && item.text?.includes(initError),
)?.text ? (
- <Text color="red">
+ <Text color={Colors.AccentRed}>
{
history.find(
(item) =>
@@ -115,8 +113,10 @@ export const App = ({ config }: AppProps) => {
</Text>
) : (
<>
- <Text color="red">Initialization Error: {initError}</Text>
- <Text color="red">
+ <Text color={Colors.AccentRed}>
+ Initialization Error: {initError}
+ </Text>
+ <Text color={Colors.AccentRed}>
{' '}
Please check API key and configuration.
</Text>
@@ -134,7 +134,18 @@ export const App = ({ config }: AppProps) => {
/>
</Box>
- {isInputActive && <InputPrompt onSubmit={handleHistorySubmit} />}
+ {isInputActive && (
+ <>
+ <Box>
+ <Text color={Colors.SubtleComment}>cwd: </Text>
+ <Text color={Colors.LightBlue}>
+ {shortenPath(config.getTargetDir(), /*maxLength*/ 70)}
+ </Text>
+ </Box>
+
+ <InputPrompt onSubmit={handleHistorySubmit} />
+ </>
+ )}
<Footer queryLength={query.length} />
<ITermDetectionWarning />
diff --git a/packages/cli/src/ui/colors.ts b/packages/cli/src/ui/colors.ts
new file mode 100644
index 00000000..be8dac19
--- /dev/null
+++ b/packages/cli/src/ui/colors.ts
@@ -0,0 +1,12 @@
+export const Colors = {
+ Background: '#1E1E2E',
+ Foreground: 'white',
+ LightBlue: '#CDD6F4',
+ AccentBlue: '#89B4FA',
+ AccentPurple: '#CBA6F7',
+ AccentCyan: '#89DCEB',
+ AccentGreen: '#A6E3A1',
+ AccentYellow: '#F9E2AF',
+ AccentRed: '#F38BA8',
+ SubtleComment: '#6C7086',
+};
diff --git a/packages/cli/src/ui/components/Footer.tsx b/packages/cli/src/ui/components/Footer.tsx
index 45167ab3..3b4e197b 100644
--- a/packages/cli/src/ui/components/Footer.tsx
+++ b/packages/cli/src/ui/components/Footer.tsx
@@ -6,6 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
+import { Colors } from '../colors.js';
interface FooterProps {
queryLength: number;
@@ -14,8 +15,10 @@ interface FooterProps {
export const Footer: React.FC<FooterProps> = ({ queryLength }) => (
<Box marginTop={1} justifyContent="space-between">
<Box minWidth={15}>
- <Text color="gray">{queryLength === 0 ? '? for shortcuts' : ''}</Text>
+ <Text color={Colors.SubtleComment}>
+ {queryLength === 0 ? '? for shortcuts' : ''}
+ </Text>
</Box>
- <Text color="blue">Gemini</Text>
+ <Text color={Colors.AccentBlue}>Gemini</Text>
</Box>
);
diff --git a/packages/cli/src/ui/components/Header.tsx b/packages/cli/src/ui/components/Header.tsx
index 62649996..8861389b 100644
--- a/packages/cli/src/ui/components/Header.tsx
+++ b/packages/cli/src/ui/components/Header.tsx
@@ -6,37 +6,32 @@
import React from 'react';
import { Box, Text } from 'ink';
-import { UI_WIDTH, BOX_PADDING_X } from '../constants.js';
-import { shortenPath } from '@gemini-code/server';
+import Gradient from 'ink-gradient';
+import { Tips } from './Tips.js';
-interface HeaderProps {
- cwd: string;
-}
+const gradientColors = ['#4796E4', '#847ACE', '#C3677F'];
-export const Header: React.FC<HeaderProps> = ({ cwd }) => (
+export const Header: React.FC = () => (
<>
- {/* Static Header Art */}
- <Box marginBottom={1}>
- <Text color="blue">{`
- ______ ________ ____ ____ _____ ____ _____ _____
- .' ___ ||_ __ ||_ \\ / _||_ _||_ \\|_ _||_ _|
-/ .' \\_| | |_ \\_| | \\/ | | | | \\ | | | |
-| | ____ | _| _ | |\\ /| | | | | |\\ \\| | | |
-\\ \`.___] |_| |__/ | _| |_\\/_| |_ _| |_ _| |_\\ |_ _| |_
- \`._____.'|________||_____||_____||_____||_____|\\____||_____|`}</Text>
- </Box>
- {/* CWD Display */}
- <Box
- borderStyle="round"
- borderColor="blue"
- paddingX={BOX_PADDING_X}
- flexDirection="column"
- marginBottom={1}
- width={UI_WIDTH}
- >
- <Box paddingLeft={2}>
- <Text color="gray">cwd: {shortenPath(cwd, /*maxLength*/ 70)}</Text>
- </Box>
+ <Box marginBottom={1} alignItems="flex-start">
+ <Gradient colors={gradientColors}>
+ <Text>{`
+ ██████╗ ███████╗███╗ ███╗██╗███╗ ██╗██╗
+██╔════╝ ██╔════╝████╗ ████║██║████╗ ██║██║
+██║ ███╗█████╗ ██╔████╔██║██║██╔██╗ ██║██║
+██║ ██║██╔══╝ ██║╚██╔╝██║██║██║╚██╗██║██║
+╚██████╔╝███████╗██║ ╚═╝ ██║██║██║ ╚████║██║
+ ╚═════╝ ╚══════╝╚═╝ ╚═╝╚═╝╚═╝ ╚═══╝╚═╝
+
+ ██████╗ ██████╗ ██████╗ ███████╗
+██╔════╝██╔═══██╗██╔══██╗██╔════╝
+██║ ██║ ██║██║ ██║█████╗
+██║ ██║ ██║██║ ██║██╔══╝
+╚██████╗╚██████╔╝██████╔╝███████╗
+ ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝
+`}</Text>
+ </Gradient>
</Box>
+ <Tips />
</>
);
diff --git a/packages/cli/src/ui/components/InputPrompt.tsx b/packages/cli/src/ui/components/InputPrompt.tsx
index 86e760ee..b5c3cc7d 100644
--- a/packages/cli/src/ui/components/InputPrompt.tsx
+++ b/packages/cli/src/ui/components/InputPrompt.tsx
@@ -5,8 +5,9 @@
*/
import React from 'react';
-import { Box, useInput, useFocus } from 'ink';
+import { Text, Box, useInput, useFocus } from 'ink';
import TextInput from 'ink-text-input';
+import { Colors } from '../colors.js';
interface InputPromptProps {
onSubmit: (value: string) => void;
@@ -29,19 +30,18 @@ export const InputPrompt: React.FC<InputPromptProps> = ({ onSubmit }) => {
);
return (
- <Box
- borderStyle="round"
- borderColor={isFocused ? 'blue' : 'gray'}
- paddingX={1}
- >
- <TextInput
- value={value}
- onChange={setValue}
- placeholder="Enter your message or use tools..."
- onSubmit={() => {
- /* Empty to prevent double submission */
- }}
- />
+ <Box borderStyle="round" borderColor={Colors.AccentBlue} paddingX={1}>
+ <Text color={Colors.AccentPurple}>&gt; </Text>
+ <Box flexGrow={1}>
+ <TextInput
+ value={value}
+ onChange={setValue}
+ placeholder="Enter your message or use tools..."
+ onSubmit={() => {
+ /* Empty to prevent double submission */
+ }}
+ />
+ </Box>
</Box>
);
};
diff --git a/packages/cli/src/ui/components/LoadingIndicator.tsx b/packages/cli/src/ui/components/LoadingIndicator.tsx
index be7f0fdd..ca5fb5de 100644
--- a/packages/cli/src/ui/components/LoadingIndicator.tsx
+++ b/packages/cli/src/ui/components/LoadingIndicator.tsx
@@ -7,6 +7,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import Spinner from 'ink-spinner';
+import { Colors } from '../colors.js';
interface LoadingIndicatorProps {
isLoading: boolean;
@@ -28,11 +29,11 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
<Box marginRight={1}>
<Spinner type="dots" />
</Box>
- <Text color="cyan">
+ <Text color={Colors.AccentPurple}>
{currentLoadingPhrase} ({elapsedTime}s)
</Text>
<Box flexGrow={1}>{/* Spacer */}</Box>
- <Text color="gray">(ESC to cancel)</Text>
+ <Text color={Colors.SubtleComment}>(ESC to cancel)</Text>
</Box>
);
};
diff --git a/packages/cli/src/ui/components/Tips.tsx b/packages/cli/src/ui/components/Tips.tsx
index bb4aa5e6..21d95966 100644
--- a/packages/cli/src/ui/components/Tips.tsx
+++ b/packages/cli/src/ui/components/Tips.tsx
@@ -6,19 +6,28 @@
import React from 'react';
import { Box, Text } from 'ink';
-import { UI_WIDTH } from '../constants.js';
+import { Colors } from '../colors.js';
export const Tips: React.FC = () => (
- <Box flexDirection="column" marginBottom={1} width={UI_WIDTH}>
- <Text>Tips for getting started:</Text>
- <Text>
- 1. <Text bold>/help</Text> for more information.
+ <Box flexDirection="column" marginBottom={1}>
+ <Text color={Colors.Foreground}>Tips for getting started:</Text>
+ <Text color={Colors.Foreground}>
+ 1.{' '}
+ <Text bold color={Colors.AccentPurple}>
+ /help
+ </Text>{' '}
+ for more information.
</Text>
- <Text>
- 2. <Text bold>/init</Text> to create a GEMINI.md for instructions &
- context.
+ <Text color={Colors.Foreground}>
+ 2.{' '}
+ <Text bold color={Colors.AccentPurple}>
+ /init
+ </Text>{' '}
+ to create a GEMINI.md for instructions & context.
</Text>
- <Text>3. Ask coding questions, edit code or run commands.</Text>
- <Text>4. Be specific for the best results.</Text>
+ <Text color={Colors.Foreground}>
+ 3. Ask coding questions, edit code or run commands.
+ </Text>
+ <Text color={Colors.Foreground}>4. Be specific for the best results.</Text>
</Box>
);
diff --git a/packages/cli/src/ui/components/messages/DiffRenderer.tsx b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
index b16a2561..01cc4938 100644
--- a/packages/cli/src/ui/components/messages/DiffRenderer.tsx
+++ b/packages/cli/src/ui/components/messages/DiffRenderer.tsx
@@ -6,6 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
+import { Colors } from '../../colors.js';
interface DiffLine {
type: 'add' | 'del' | 'context' | 'hunk' | 'other';
@@ -96,7 +97,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
tabWidth = DEFAULT_TAB_WIDTH,
}) => {
if (!diffContent || typeof diffContent !== 'string') {
- return <Text color="yellow">No diff content.</Text>;
+ return <Text color={Colors.AccentYellow}>No diff content.</Text>;
}
const parsedLines = parseDiffWithLineNumbers(diffContent);
@@ -114,7 +115,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
if (displayableLines.length === 0) {
return (
- <Box borderStyle="round" borderColor="gray" padding={1}>
+ <Box borderStyle="round" borderColor={Colors.SubtleComment} padding={1}>
<Text dimColor>No changes detected.</Text>
</Box>
);
@@ -137,7 +138,11 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
// --- End Modification ---
return (
- <Box borderStyle="round" borderColor="gray" flexDirection="column">
+ <Box
+ borderStyle="round"
+ borderColor={Colors.SubtleComment}
+ flexDirection="column"
+ >
{/* Iterate over the lines that should be displayed (already normalized) */}
{displayableLines.map((line, index) => {
const key = `diff-line-${index}`;
@@ -165,7 +170,6 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
break;
default:
throw new Error(`Unknown line type: ${line.type}`);
- break;
}
// Render the line content *after* stripping the calculated *minimum* baseIndentation.
@@ -175,7 +179,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
return (
// Using your original rendering structure
<Box key={key} flexDirection="row">
- <Text color="gray">{gutterNumStr} </Text>
+ <Text color={Colors.SubtleComment}>{gutterNumStr} </Text>
<Text color={color} dimColor={dim}>
{prefixSymbol}{' '}
</Text>
diff --git a/packages/cli/src/ui/components/messages/ErrorMessage.tsx b/packages/cli/src/ui/components/messages/ErrorMessage.tsx
index fc770dc0..22d82465 100644
--- a/packages/cli/src/ui/components/messages/ErrorMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ErrorMessage.tsx
@@ -6,6 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
+import { Colors } from '../../colors.js';
interface ErrorMessageProps {
text: string;
@@ -18,10 +19,10 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text }) => {
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
- <Text color="red">{prefix}</Text>
+ <Text color={Colors.AccentRed}>{prefix}</Text>
</Box>
<Box flexGrow={1}>
- <Text wrap="wrap" color="red">
+ <Text wrap="wrap" color={Colors.AccentRed}>
{text}
</Text>
</Box>
diff --git a/packages/cli/src/ui/components/messages/GeminiMessage.tsx b/packages/cli/src/ui/components/messages/GeminiMessage.tsx
index 08f6cc68..3319dd63 100644
--- a/packages/cli/src/ui/components/messages/GeminiMessage.tsx
+++ b/packages/cli/src/ui/components/messages/GeminiMessage.tsx
@@ -7,6 +7,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { MarkdownRenderer } from '../../utils/MarkdownRenderer.js';
+import { Colors } from '../../colors.js';
interface GeminiMessageProps {
text: string;
@@ -28,7 +29,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({ text }) => {
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
- <Text color="blue">{prefix}</Text>
+ <Text color={Colors.AccentPurple}>{prefix}</Text>
</Box>
<Box flexGrow={1}></Box>
</Box>
@@ -38,7 +39,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({ text }) => {
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
- <Text color="blue">{prefix}</Text>
+ <Text color={Colors.AccentPurple}>{prefix}</Text>
</Box>
<Box flexGrow={1} flexDirection="column">
{renderedBlocks}
diff --git a/packages/cli/src/ui/components/messages/InfoMessage.tsx b/packages/cli/src/ui/components/messages/InfoMessage.tsx
index 95f49522..b30e4473 100644
--- a/packages/cli/src/ui/components/messages/InfoMessage.tsx
+++ b/packages/cli/src/ui/components/messages/InfoMessage.tsx
@@ -6,6 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
+import { Colors } from '../../colors.js';
interface InfoMessageProps {
text: string;
@@ -18,10 +19,10 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
- <Text color="yellow">{prefix}</Text>
+ <Text color={Colors.AccentYellow}>{prefix}</Text>
</Box>
<Box flexGrow={1}>
- <Text wrap="wrap" color="yellow">
+ <Text wrap="wrap" color={Colors.AccentYellow}>
{text}
</Text>
</Box>
diff --git a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
index 32a7dc1d..ee0b7ef7 100644
--- a/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
@@ -16,6 +16,7 @@ import {
import { PartListUnion } from '@google/genai';
import { DiffRenderer } from './DiffRenderer.js';
import { UI_WIDTH } from '../../constants.js';
+import { Colors } from '../../colors.js';
export interface ToolConfirmationMessageProps {
confirmationDetails: ToolCallConfirmationDetails;
@@ -74,7 +75,9 @@ export const ToolConfirmationMessage: React.FC<
confirmationDetails as ToolExecuteConfirmationDetails;
// For execution, we still need context display and description
- const commandDisplay = <Text color="cyan">{executionProps.command}</Text>;
+ const commandDisplay = (
+ <Text color={Colors.AccentCyan}>{executionProps.command}</Text>
+ );
// Combine command and description into bodyContent for layout consistency
bodyContent = (
diff --git a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
index 0662e333..448ed4c5 100644
--- a/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
@@ -10,6 +10,7 @@ import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
import { ToolMessage } from './ToolMessage.js';
import { PartListUnion } from '@google/genai';
import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
+import { Colors } from '../../colors.js';
interface ToolGroupMessageProps {
toolCalls: IndividualToolCallDisplay[];
@@ -22,7 +23,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
onSubmit,
}) => {
const hasPending = toolCalls.some((t) => t.status === ToolCallStatus.Pending);
- const borderColor = hasPending ? 'yellow' : 'blue';
+ const borderColor = hasPending ? Colors.AccentYellow : Colors.AccentBlue;
return (
<Box flexDirection="column" borderStyle="round" borderColor={borderColor}>
diff --git a/packages/cli/src/ui/components/messages/ToolMessage.tsx b/packages/cli/src/ui/components/messages/ToolMessage.tsx
index 9c1dd36b..372d5ffe 100644
--- a/packages/cli/src/ui/components/messages/ToolMessage.tsx
+++ b/packages/cli/src/ui/components/messages/ToolMessage.tsx
@@ -16,6 +16,7 @@ import {
} from '../../types.js';
import { DiffRenderer } from './DiffRenderer.js';
import { FileDiff, ToolResultDisplay } from '../../../tools/tools.js';
+import { Colors } from '../../colors.js';
export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
callId,
@@ -31,7 +32,7 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
| undefined;
const typedResultDisplay = resultDisplay as ToolResultDisplay | undefined;
- let color = 'gray';
+ let color = Colors.SubtleComment;
let prefix = '';
switch (status) {
case ToolCallStatus.Pending:
@@ -41,15 +42,15 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
prefix = 'Executing:';
break;
case ToolCallStatus.Confirming:
- color = 'yellow';
+ color = Colors.AccentYellow;
prefix = 'Confirm:';
break;
case ToolCallStatus.Success:
- color = 'green';
+ color = Colors.AccentGreen;
prefix = 'Success:';
break;
case ToolCallStatus.Error:
- color = 'red';
+ color = Colors.AccentRed;
prefix = 'Error:';
break;
default:
@@ -60,11 +61,11 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
const title = `${prefix} ${name}`;
return (
- <Box key={callId} borderStyle="round" paddingX={1} flexDirection="column">
+ <Box key={callId} flexDirection="column" paddingX={1}>
<Box>
{status === ToolCallStatus.Invoked && (
<Box marginRight={1}>
- <Text color="blue">
+ <Text color={Colors.AccentBlue}>
<Spinner type="dots" />
</Text>
</Box>
@@ -91,7 +92,7 @@ export const ToolMessage: React.FC<IndividualToolCallDisplay> = ({
)}
{/* Display command for execute */}
{'command' in typedConfirmationDetails && (
- <Text color="yellow">
+ <Text color={Colors.AccentYellow}>
Command:{' '}
{
(typedConfirmationDetails as ToolExecuteConfirmationDetails)
diff --git a/packages/cli/src/ui/components/messages/UserMessage.tsx b/packages/cli/src/ui/components/messages/UserMessage.tsx
index bc9822a4..e9771b82 100644
--- a/packages/cli/src/ui/components/messages/UserMessage.tsx
+++ b/packages/cli/src/ui/components/messages/UserMessage.tsx
@@ -6,6 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
+import { Colors } from '../../colors.js';
interface UserMessageProps {
text: string;
@@ -18,7 +19,7 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text }) => {
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
- <Text color="gray">{prefix}</Text>
+ <Text color={Colors.SubtleComment}>{prefix}</Text>
</Box>
<Box flexGrow={1}>
<Text wrap="wrap">{text}</Text>
diff --git a/packages/cli/src/ui/utils/MarkdownRenderer.tsx b/packages/cli/src/ui/utils/MarkdownRenderer.tsx
index d15926ee..f9e8167c 100644
--- a/packages/cli/src/ui/utils/MarkdownRenderer.tsx
+++ b/packages/cli/src/ui/utils/MarkdownRenderer.tsx
@@ -6,6 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
+import { Colors } from '../colors.js';
/**
* A utility class to render a subset of Markdown into Ink components.
@@ -83,14 +84,14 @@ export class MarkdownRenderer {
const codeMatch = fullMatch.match(/^(`+)(.+?)\1$/s);
if (codeMatch && codeMatch[2]) {
renderedNode = (
- <Text key={key} color="yellow">
+ <Text key={key} color={Colors.AccentPurple}>
{codeMatch[2]}
</Text>
);
} else {
// Fallback for simple or non-matching cases
renderedNode = (
- <Text key={key} color="yellow">
+ <Text key={key} color={Colors.AccentPurple}>
{fullMatch.slice(1, -1)}
</Text>
);
@@ -109,7 +110,7 @@ export class MarkdownRenderer {
renderedNode = (
<Text key={key}>
{linkText}
- <Text color="blue"> ({url})</Text>
+ <Text color={Colors.AccentBlue}> ({url})</Text>
</Text>
);
}
@@ -160,7 +161,7 @@ export class MarkdownRenderer {
key={key}
borderStyle="round"
paddingX={1}
- borderColor="gray"
+ borderColor={Colors.SubtleComment}
flexDirection="column"
>
{lang && <Text dimColor> {lang}</Text>}
@@ -281,14 +282,14 @@ export class MarkdownRenderer {
switch (level /* ... (header styling as before) ... */) {
case 1:
headerNode = (
- <Text bold color="cyan">
+ <Text bold color={Colors.AccentCyan}>
{renderedHeaderText}
</Text>
);
break;
case 2:
headerNode = (
- <Text bold color="blue">
+ <Text bold color={Colors.AccentBlue}>
{renderedHeaderText}
</Text>
);
@@ -298,7 +299,7 @@ export class MarkdownRenderer {
break;
case 4:
headerNode = (
- <Text italic color="gray">
+ <Text italic color={Colors.SubtleComment}>
{renderedHeaderText}
</Text>
);
generated by cgit v1.2.3 (git 2.51.0) at 2025-11-05 14:43:49 +0000