jcarr
/
gemini-cli
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update semantic color tokens (#6253) 

Co-authored-by: jacob314 <jacob314@gmail.com>
This commit is contained in:
Miguel Solorio 2025-08-15 15:39:54 -07:00 committed by GitHub
parent 5246aa11f4
commit 3c0af3654a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
60 changed files with 606 additions and 502 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/cli/src/ui/App.tsx
View File

@ -38,7 +38,7 @@ import { EditorSettingsDialog } from './components/EditorSettingsDialog.js';
import { FolderTrustDialog } from './components/FolderTrustDialog.js';
import { ShellConfirmationDialog } from './components/ShellConfirmationDialog.js';
import { RadioButtonSelect } from './components/shared/RadioButtonSelect.js';
import { Colors } from './colors.js';
import { theme } from './semantic-colors.js';
import { loadHierarchicalGeminiMemory } from '../config/config.js';
import { LoadedSettings, SettingScope } from '../config/settings.js';
import { Tips } from './components/Tips.js';
@ -949,13 +949,13 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
{startupWarnings.length > 0 && (
<Box
borderStyle="round"
borderColor={Colors.AccentYellow}
borderColor={theme.status.warning}
paddingX={1}
marginY={1}
flexDirection="column"
>
{startupWarnings.map((warning, index) => (
<Text key={index} color={Colors.AccentYellow}>
<Text key={index} color={theme.status.warning}>
{warning}
</Text>
))}
@ -991,7 +991,7 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
<Box flexDirection="column">
{themeError && (
<Box marginBottom={1}>
<Text color={Colors.AccentRed}>{themeError}</Text>
<Text color={theme.status.error}>{themeError}</Text>
</Box>
)}
<ThemeDialog
@ -1050,7 +1050,7 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
<Box flexDirection="column">
{editorError && (
<Box marginBottom={1}>
<Text color={Colors.AccentRed}>{editorError}</Text>
<Text color={theme.status.error}>{editorError}</Text>
</Box>
)}
<EditorSettingsDialog
@ -1090,18 +1090,20 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
>
<Box>
{process.env.GEMINI_SYSTEM_MD && (
<Text color={Colors.AccentRed}>|⌐■_■| </Text>
<Text color={theme.status.error}>|⌐■_■| </Text>
)}
{ctrlCPressedOnce ? (
<Text color={Colors.AccentYellow}>
<Text color={theme.status.warning}>
Press Ctrl+C again to exit.
</Text>
) : ctrlDPressedOnce ? (
<Text color={Colors.AccentYellow}>
<Text color={theme.status.warning}>
Press Ctrl+D again to exit.
</Text>
) : showEscapePrompt ? (
<Text color={Colors.Gray}>Press Esc again to clear.</Text>
<Text color={theme.text.secondary}>
Press Esc again to clear.
</Text>
) : (
<ContextSummaryDisplay
ideContext={ideContextState}
@ -1164,7 +1166,7 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
{initError && streamingState !== StreamingState.Responding && (
<Box
borderStyle="round"
borderColor={Colors.AccentRed}
borderColor={theme.status.error}
paddingX={1}
marginBottom={1}
>
@ -1172,7 +1174,7 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
(item) =>
item.type === 'error' && item.text?.includes(initError),
)?.text ? (
<Text color={Colors.AccentRed}>
<Text color={theme.status.error}>
{
history.find(
(item) =>
@ -1182,10 +1184,10 @@ const App = ({ config, settings, startupWarnings = [], version }: AppProps) => {
</Text>
) : (
<>
<Text color={Colors.AccentRed}>
<Text color={theme.status.error}>
Initialization Error: {initError}
</Text>
<Text color={Colors.AccentRed}>
<Text color={theme.status.error}>
{' '}
Please check API key and configuration.
</Text>

4
packages/cli/src/ui/commands/chatCommand.ts
View File

@ -7,7 +7,7 @@
import * as fsPromises from 'fs/promises';
import React from 'react';
import { Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import {
CommandContext,
SlashCommand,
@ -124,7 +124,7 @@ const saveCommand: SlashCommand = {
Text,
null,
'A checkpoint with the tag ',
React.createElement(Text, { color: Colors.AccentPurple }, tag),
React.createElement(Text, { color: theme.text.accent }, tag),
' already exists. Do you want to overwrite it?',
),
originalInvocation: {

36
packages/cli/src/ui/components/AboutBox.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { GIT_COMMIT_INFO } from '../../generated/git-commit.js';
interface AboutBoxProps {
@ -30,77 +30,77 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
}) => (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
flexDirection="column"
padding={1}
marginY={1}
width="100%"
>
<Box marginBottom={1}>
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
About Gemini CLI
</Text>
</Box>
<Box flexDirection="row">
<Box width="35%">
<Text bold color={Colors.LightBlue}>
<Text bold color={theme.text.link}>
CLI Version
</Text>
</Box>
<Box>
<Text>{cliVersion}</Text>
<Text color={theme.text.primary}>{cliVersion}</Text>
</Box>
</Box>
{GIT_COMMIT_INFO && !['N/A'].includes(GIT_COMMIT_INFO) && (
<Box flexDirection="row">
<Box width="35%">
<Text bold color={Colors.LightBlue}>
<Text bold color={theme.text.link}>
Git Commit
</Text>
</Box>
<Box>
<Text>{GIT_COMMIT_INFO}</Text>
<Text color={theme.text.primary}>{GIT_COMMIT_INFO}</Text>
</Box>
</Box>
)}
<Box flexDirection="row">
<Box width="35%">
<Text bold color={Colors.LightBlue}>
<Text bold color={theme.text.link}>
Model
</Text>
</Box>
<Box>
<Text>{modelVersion}</Text>
<Text color={theme.text.primary}>{modelVersion}</Text>
</Box>
</Box>
<Box flexDirection="row">
<Box width="35%">
<Text bold color={Colors.LightBlue}>
<Text bold color={theme.text.link}>
Sandbox
</Text>
</Box>
<Box>
<Text>{sandboxEnv}</Text>
<Text color={theme.text.primary}>{sandboxEnv}</Text>
</Box>
</Box>
<Box flexDirection="row">
<Box width="35%">
<Text bold color={Colors.LightBlue}>
<Text bold color={theme.text.link}>
OS
</Text>
</Box>
<Box>
<Text>{osVersion}</Text>
<Text color={theme.text.primary}>{osVersion}</Text>
</Box>
</Box>
<Box flexDirection="row">
<Box width="35%">
<Text bold color={Colors.LightBlue}>
<Text bold color={theme.text.link}>
Auth Method
</Text>
</Box>
<Box>
<Text>
<Text color={theme.text.primary}>
{selectedAuthType.startsWith('oauth') ? 'OAuth' : selectedAuthType}
</Text>
</Box>
@ -108,19 +108,19 @@ export const AboutBox: React.FC<AboutBoxProps> = ({
{gcpProject && (
<Box flexDirection="row">
<Box width="35%">
<Text bold color={Colors.LightBlue}>
<Text bold color={theme.text.link}>
GCP Project
</Text>
</Box>
<Box>
<Text>{gcpProject}</Text>
<Text color={theme.text.primary}>{gcpProject}</Text>
</Box>
</Box>
)}
{ideClient && (
<Box flexDirection="row">
<Box width="35%">
<Text bold color={Colors.LightBlue}>
<Text bold color={theme.text.link}>
IDE Client
</Text>
</Box>

22
packages/cli/src/ui/components/AuthDialog.tsx
View File

@ -6,7 +6,7 @@
import React, { useState } from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
import { LoadedSettings, SettingScope } from '../../config/settings.js';
import { AuthType } from '@google/gemini-cli-core';
@ -133,14 +133,18 @@ export function AuthDialog({
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
flexDirection="column"
padding={1}
width="100%"
>
<Text bold>Get started</Text>
<Text bold color={theme.text.primary}>
Get started
</Text>
<Box marginTop={1}>
<Text>How would you like to authenticate for this project?</Text>
<Text color={theme.text.primary}>
How would you like to authenticate for this project?
</Text>
</Box>
<Box marginTop={1}>
<RadioButtonSelect
@ -151,17 +155,19 @@ export function AuthDialog({
</Box>
{errorMessage && (
<Box marginTop={1}>
<Text color={Colors.AccentRed}>{errorMessage}</Text>
<Text color={theme.status.error}>{errorMessage}</Text>
</Box>
)}
<Box marginTop={1}>
<Text color={Colors.Gray}>(Use Enter to select)</Text>
<Text color={theme.text.secondary}>(Use Enter to select)</Text>
</Box>
<Box marginTop={1}>
<Text>Terms of Services and Privacy Notice for Gemini CLI</Text>
<Text color={theme.text.primary}>
Terms of Services and Privacy Notice for Gemini CLI
</Text>
</Box>
<Box marginTop={1}>
<Text color={Colors.AccentBlue}>
<Text color={theme.text.link}>
{
'https://github.com/google-gemini/gemini-cli/blob/main/docs/tos-privacy.md'
}

8
packages/cli/src/ui/components/AuthInProgress.tsx
View File

@ -7,7 +7,7 @@
import React, { useState, useEffect } from 'react';
import { Box, Text } from 'ink';
import Spinner from 'ink-spinner';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { useKeypress } from '../hooks/useKeypress.js';
interface AuthInProgressProps {
@ -40,18 +40,18 @@ export function AuthInProgress({
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
flexDirection="column"
padding={1}
width="100%"
>
{timedOut ? (
<Text color={Colors.AccentRed}>
<Text color={theme.status.error}>
Authentication timed out. Please try again.
</Text>
) : (
<Box>
<Text>
<Text color={theme.text.primary}>
<Spinner type="dots" /> Waiting for auth... (Press ESC or CTRL+C to
cancel)
</Text>

8
packages/cli/src/ui/components/AutoAcceptIndicator.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { ApprovalMode } from '@google/gemini-cli-core';
interface AutoAcceptIndicatorProps {
@ -22,12 +22,12 @@ export const AutoAcceptIndicator: React.FC<AutoAcceptIndicatorProps> = ({
switch (approvalMode) {
case ApprovalMode.AUTO_EDIT:
textColor = Colors.AccentGreen;
textColor = theme.status.success;
textContent = 'accepting edits';
subText = ' (shift + tab to toggle)';
break;
case ApprovalMode.YOLO:
textColor = Colors.AccentRed;
textColor = theme.status.error;
textContent = 'YOLO mode';
subText = ' (ctrl + y to toggle)';
break;
@ -40,7 +40,7 @@ export const AutoAcceptIndicator: React.FC<AutoAcceptIndicatorProps> = ({
<Box>
<Text color={textColor}>
{textContent}
{subText && <Text color={Colors.Gray}>{subText}</Text>}
{subText && <Text color={theme.text.secondary}>{subText}</Text>}
</Text>
</Box>
);

6
packages/cli/src/ui/components/ConsoleSummaryDisplay.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
interface ConsoleSummaryDisplayProps {
errorCount: number;
@ -25,9 +25,9 @@ export const ConsoleSummaryDisplay: React.FC<ConsoleSummaryDisplayProps> = ({
return (
<Box>
{errorCount > 0 && (
<Text color={Colors.AccentRed}>
<Text color={theme.status.error}>
{errorIcon} {errorCount} error{errorCount > 1 ? 's' : ''}{' '}
<Text color={Colors.Gray}>(ctrl+o for details)</Text>
<Text color={theme.text.secondary}>(ctrl+o for details)</Text>
</Text>
)}
</Box>

10
packages/cli/src/ui/components/ContextSummaryDisplay.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { type IdeContext, type MCPServerConfig } from '@google/gemini-cli-core';
import { useTerminalSize } from '../hooks/useTerminalSize.js';
import { isNarrowWidth } from '../utils/isNarrowWidth.js';
@ -99,9 +99,9 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
if (isNarrow) {
return (
<Box flexDirection="column">
<Text color={Colors.Gray}>Using:</Text>
<Text color={theme.text.secondary}>Using:</Text>
{summaryParts.map((part, index) => (
<Text key={index} color={Colors.Gray}>
<Text key={index} color={theme.text.secondary}>
{' '}- {part}
</Text>
))}
@ -111,7 +111,9 @@ export const ContextSummaryDisplay: React.FC<ContextSummaryDisplayProps> = ({
return (
<Box>
<Text color={Colors.Gray}>Using: {summaryParts.join(' | ')}</Text>
<Text color={theme.text.secondary}>
Using: {summaryParts.join(' | ')}
</Text>
</Box>
);
};

4
packages/cli/src/ui/components/ContextUsageDisplay.tsx
View File

@ -5,7 +5,7 @@
*/
import { Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { tokenLimit } from '@google/gemini-cli-core';
export const ContextUsageDisplay = ({
@ -18,7 +18,7 @@ export const ContextUsageDisplay = ({
const percentage = promptTokenCount / tokenLimit(model);
return (
<Text color={Colors.Gray}>
<Text color={theme.text.secondary}>
({((1 - percentage) * 100).toFixed(0)}% context left)
</Text>
);

4
packages/cli/src/ui/components/DebugProfiler.tsx
View File

@ -6,7 +6,7 @@
import { Text } from 'ink';
import { useEffect, useRef, useState } from 'react';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { useKeypress } from '../hooks/useKeypress.js';
export const DebugProfiler = () => {
@ -31,6 +31,6 @@ export const DebugProfiler = () => {
}
return (
<Text color={Colors.AccentYellow}>Renders: {numRenders.current} </Text>
<Text color={theme.status.warning}>Renders: {numRenders.current} </Text>
);
};

19
packages/cli/src/ui/components/DetailedMessagesDisplay.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { ConsoleMessageItem } from '../types.js';
import { MaxSizedBox } from './shared/MaxSizedBox.js';
@ -31,31 +31,32 @@ export const DetailedMessagesDisplay: React.FC<
flexDirection="column"
marginTop={1}
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
paddingX={1}
width={width}
>
<Box marginBottom={1}>
<Text bold color={Colors.Foreground}>
Debug Console <Text color={Colors.Gray}>(ctrl+o to close)</Text>
<Text bold color={theme.text.primary}>
Debug Console{' '}
<Text color={theme.text.secondary}>(ctrl+o to close)</Text>
</Text>
</Box>
<MaxSizedBox maxHeight={maxHeight} maxWidth={width - borderAndPadding}>
{messages.map((msg, index) => {
let textColor = Colors.Foreground;
let textColor = theme.text.primary;
let icon = '\u2139'; // Information source (ℹ)
switch (msg.type) {
case 'warn':
textColor = Colors.AccentYellow;
textColor = theme.status.warning;
icon = '\u26A0'; // Warning sign (⚠)
break;
case 'error':
textColor = Colors.AccentRed;
textColor = theme.status.error;
icon = '\u2716'; // Heavy multiplication x (✖)
break;
case 'debug':
textColor = Colors.Gray; // Or Colors.Gray
textColor = theme.text.secondary;
icon = '\u1F50D'; // Left-pointing magnifying glass (????)
break;
case 'log':
@ -70,7 +71,7 @@ export const DetailedMessagesDisplay: React.FC<
<Text color={textColor} wrap="wrap">
{msg.content}
{msg.count && msg.count > 1 && (
<Text color={Colors.Gray}> (x{msg.count})</Text>
<Text color={theme.text.secondary}> (x{msg.count})</Text>
)}
</Text>
</Box>

16
packages/cli/src/ui/components/EditorSettingsDialog.tsx
View File

@ -6,7 +6,7 @@
import React, { useState } from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import {
EDITOR_DISPLAY_NAMES,
editorSettingsManager,
@ -103,7 +103,7 @@ export function EditorSettingsDialog({
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
flexDirection="row"
padding={1}
width="100%"
@ -111,7 +111,7 @@ export function EditorSettingsDialog({
<Box flexDirection="column" width="45%" paddingRight={2}>
<Text bold={focusedSection === 'editor'}>
{focusedSection === 'editor' ? '> ' : ' '}Select Editor{' '}
<Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text>
<Text color={theme.text.secondary}>{otherScopeModifiedMessage}</Text>
</Text>
<RadioButtonSelect
items={editorItems.map((item) => ({
@ -138,7 +138,7 @@ export function EditorSettingsDialog({
</Box>
<Box marginTop={1}>
<Text color={Colors.Gray}>
<Text color={theme.text.secondary}>
(Use Enter to select, Tab to change focus)
</Text>
</Box>
@ -147,17 +147,17 @@ export function EditorSettingsDialog({
<Box flexDirection="column" width="55%" paddingLeft={2}>
<Text bold>Editor Preference</Text>
<Box flexDirection="column" gap={1} marginTop={1}>
<Text color={Colors.Gray}>
<Text color={theme.text.secondary}>
These editors are currently supported. Please note that some editors
cannot be used in sandbox mode.
</Text>
<Text color={Colors.Gray}>
<Text color={theme.text.secondary}>
Your preferred editor is:{' '}
<Text
color={
mergedEditorName === 'None'
? Colors.AccentRed
: Colors.AccentCyan
? theme.status.error
: theme.text.accent
}
bold
>

10
packages/cli/src/ui/components/FolderTrustDialog.tsx
View File

@ -6,7 +6,7 @@
import { Box, Text } from 'ink';
import React from 'react';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import {
RadioButtonSelect,
RadioSelectItem,
@ -54,14 +54,16 @@ export const FolderTrustDialog: React.FC<FolderTrustDialogProps> = ({
<Box
flexDirection="column"
borderStyle="round"
borderColor={Colors.AccentYellow}
borderColor={theme.status.warning}
padding={1}
width="100%"
marginLeft={1}
>
<Box flexDirection="column" marginBottom={1}>
<Text bold>Do you trust this folder?</Text>
<Text>
<Text bold color={theme.text.primary}>
Do you trust this folder?
</Text>
<Text color={theme.text.primary}>
Trusting a folder allows Gemini to execute commands it suggests. This
is a security feature to prevent accidental execution in untrusted
directories.

8
packages/cli/src/ui/components/Footer.tsx
View File

@ -72,7 +72,7 @@ export const Footer: React.FC<FooterProps> = ({
{vimMode && <Text color={theme.text.secondary}>[{vimMode}] </Text>}
{nightly ? (
<Gradient colors={theme.ui.gradient}>
<Text>
<Text color={theme.text.primary}>
{displayPath}
{branchName && <Text> ({branchName}*)</Text>}
</Text>
@ -132,8 +132,8 @@ export const Footer: React.FC<FooterProps> = ({
/>
</Text>
{corgiMode && (
<Text>
<Text color={theme.ui.symbol}>| </Text>
<Text color={theme.text.primary}>
<Text color={theme.text.secondary}>| </Text>
<Text color={theme.status.error}>▼</Text>
<Text color={theme.text.primary}>(´</Text>
<Text color={theme.status.error}>ᴥ</Text>
@ -143,7 +143,7 @@ export const Footer: React.FC<FooterProps> = ({
)}
{!showErrorDetails && errorCount > 0 && (
<Box>
<Text color={theme.ui.symbol}>| </Text>
<Text color={theme.text.secondary}>| </Text>
<ConsoleSummaryDisplay errorCount={errorCount} />
</Box>
)}

3
packages/cli/src/ui/components/GeminiRespondingSpinner.tsx
View File

@ -10,6 +10,7 @@ import Spinner from 'ink-spinner';
import type { SpinnerName } from 'cli-spinners';
import { useStreamingContext } from '../contexts/StreamingContext.js';
import { StreamingState } from '../types.js';
import { theme } from '../semantic-colors.js';
interface GeminiRespondingSpinnerProps {
/**
@ -28,7 +29,7 @@ export const GeminiRespondingSpinner: React.FC<
if (streamingState === StreamingState.Responding) {
return <Spinner type={spinnerType} />;
} else if (nonRespondingDisplay) {
return <Text>{nonRespondingDisplay}</Text>;
return <Text color={theme.text.primary}>{nonRespondingDisplay}</Text>;
}
return null;
};

16
packages/cli/src/ui/components/Header.test.tsx
View File

@ -5,7 +5,7 @@
*/
import { render } from 'ink-testing-library';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { describe, it, expect, vi } from 'vitest';
import { Header } from './Header.js';
import * as useTerminalSize from '../hooks/useTerminalSize.js';
import { longAsciiLogo } from './AsciiArt.js';
@ -13,15 +13,13 @@ import { longAsciiLogo } from './AsciiArt.js';
vi.mock('../hooks/useTerminalSize.js');
describe('<Header />', () => {
beforeEach(() => {});
it('renders the long logo on a wide terminal', () => {
vi.spyOn(useTerminalSize, 'useTerminalSize').mockReturnValue({
columns: 120,
rows: 20,
});
const { lastFrame } = render(<Header version="1.0.0" nightly={false} />);
expect(lastFrame()).toContain(longAsciiLogo);
expect(lastFrame()?.trim()).toContain(longAsciiLogo.trim());
});
it('renders custom ASCII art when provided', () => {
@ -29,16 +27,20 @@ describe('<Header />', () => {
const { lastFrame } = render(
<Header version="1.0.0" nightly={false} customAsciiArt={customArt} />,
);
expect(lastFrame()).toContain(customArt);
expect(lastFrame()?.trim()).toContain(customArt);
});
it('displays the version number when nightly is true', () => {
const { lastFrame } = render(<Header version="1.0.0" nightly={true} />);
expect(lastFrame()).toContain('v1.0.0');
expect(lastFrame()?.trim()).toContain('v1.0.0');
});
it('does not display the version number when nightly is false', () => {
vi.spyOn(useTerminalSize, 'useTerminalSize').mockReturnValue({
columns: 40,
rows: 20,
});
const { lastFrame } = render(<Header version="1.0.0" nightly={false} />);
expect(lastFrame()).not.toContain('v1.0.0');
expect(lastFrame()?.trim()).not.toContain('v1.0.0');
});
});

30
packages/cli/src/ui/components/Header.tsx
View File

@ -7,7 +7,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import Gradient from 'ink-gradient';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { shortAsciiLogo, longAsciiLogo, tinyAsciiLogo } from './AsciiArt.js';
import { getAsciiArtWidth } from '../utils/textUtils.js';
import { useTerminalSize } from '../hooks/useTerminalSize.js';
@ -18,6 +18,16 @@ interface HeaderProps {
nightly: boolean;
}
const GradientText: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
const textElement = <Text color={theme.text.primary}>{children}</Text>;
if (theme.ui.gradient && theme.ui.gradient.length > 0) {
return <Gradient colors={theme.ui.gradient}>{textElement}</Gradient>;
}
return textElement;
};
export const Header: React.FC<HeaderProps> = ({
customAsciiArt,
version,
@ -47,22 +57,12 @@ export const Header: React.FC<HeaderProps> = ({
flexShrink={0}
flexDirection="column"
>
{Colors.GradientColors ? (
<Gradient colors={Colors.GradientColors}>
<Text>{displayTitle}</Text>
</Gradient>
) : (
<Text>{displayTitle}</Text>
)}
<Box>
<GradientText>{displayTitle}</GradientText>
</Box>
{nightly && (
<Box width="100%" flexDirection="row" justifyContent="flex-end">
{Colors.GradientColors ? (
<Gradient colors={Colors.GradientColors}>
<Text>v{version}</Text>
</Gradient>
) : (
<Text>v{version}</Text>
)}
<Text color={theme.text.primary}>v{version}</Text>
</Box>
)}
</Box>

84
packages/cli/src/ui/components/Help.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { SlashCommand } from '../commands/types.js';
interface Help {
@ -17,42 +17,42 @@ export const Help: React.FC<Help> = ({ commands }) => (
<Box
flexDirection="column"
marginBottom={1}
borderColor={Colors.Gray}
borderColor={theme.border.default}
borderStyle="round"
padding={1}
>
{/* Basics */}
<Text bold color={Colors.Foreground}>
<Text bold color={theme.text.primary}>
Basics:
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
Add context
</Text>
: Use{' '}
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
@
</Text>{' '}
to specify files for context (e.g.,{' '}
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
@src/myFile.ts
</Text>
) to target specific files or folders.
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
Shell mode
</Text>
: Execute shell commands via{' '}
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
!
</Text>{' '}
(e.g.,{' '}
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
!npm run start
</Text>
) or use natural language (e.g.{' '}
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
start server
</Text>
).
@ -61,15 +61,15 @@ export const Help: React.FC<Help> = ({ commands }) => (
<Box height={1} />
{/* Commands */}
<Text bold color={Colors.Foreground}>
<Text bold color={theme.text.primary}>
Commands:
</Text>
{commands
.filter((command) => command.description)
.map((command: SlashCommand) => (
<Box key={command.name} flexDirection="column">
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
{' '}
/{command.name}
</Text>
@ -77,8 +77,8 @@ export const Help: React.FC<Help> = ({ commands }) => (
</Text>
{command.subCommands &&
command.subCommands.map((subCommand) => (
<Text key={subCommand.name} color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text key={subCommand.name} color={theme.text.primary}>
<Text bold color={theme.text.accent}>
{' '}
{subCommand.name}
</Text>
@ -87,8 +87,8 @@ export const Help: React.FC<Help> = ({ commands }) => (
))}
</Box>
))}
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
{' '}
!{' '}
</Text>
@ -98,75 +98,75 @@ export const Help: React.FC<Help> = ({ commands }) => (
<Box height={1} />
{/* Shortcuts */}
<Text bold color={Colors.Foreground}>
<Text bold color={theme.text.primary}>
Keyboard Shortcuts:
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
Alt+Left/Right
</Text>{' '}
- Jump through words in the input
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
Ctrl+C
</Text>{' '}
- Quit application
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
{process.platform === 'win32' ? 'Ctrl+Enter' : 'Ctrl+J'}
</Text>{' '}
{process.platform === 'linux'
? '- New line (Alt+Enter works for certain linux distros)'
: '- New line'}
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
Ctrl+L
</Text>{' '}
- Clear the screen
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
{process.platform === 'darwin' ? 'Ctrl+X / Meta+Enter' : 'Ctrl+X'}
</Text>{' '}
- Open input in external editor
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
Ctrl+Y
</Text>{' '}
- Toggle YOLO mode
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
Enter
</Text>{' '}
- Send message
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
Esc
</Text>{' '}
- Cancel operation
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
Shift+Tab
</Text>{' '}
- Toggle auto-accepting edits
</Text>
<Text color={Colors.Foreground}>
<Text bold color={Colors.AccentPurple}>
<Text color={theme.text.primary}>
<Text bold color={theme.text.accent}>
Up/Down
</Text>{' '}
- Cycle through your prompt history
</Text>
<Box height={1} />
<Text color={Colors.Foreground}>
<Text color={theme.text.primary}>
For a full list of shortcuts, see{' '}
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
docs/keyboard-shortcuts.md
</Text>
</Text>

9
packages/cli/src/ui/components/InputPrompt.tsx
View File

@ -559,7 +559,7 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
<Box flexGrow={1} flexDirection="column">
{buffer.text.length === 0 && placeholder ? (
focus ? (
<Text>
<Text color={theme.text.primary}>
{chalk.inverse(placeholder.slice(0, 1))}
<Text color={theme.text.secondary}>{placeholder.slice(1)}</Text>
</Text>
@ -600,7 +600,12 @@ export const InputPrompt: React.FC<InputPromptProps> = ({
}
}
return (
<Text key={`line-${visualIdxInRenderedSet}`}>{display}</Text>
<Text
key={`line-${visualIdxInRenderedSet}`}
color={theme.text.primary}
>
{display}
</Text>
);
})
)}

10
packages/cli/src/ui/components/LoadingIndicator.tsx
View File

@ -7,7 +7,7 @@
import { ThoughtSummary } from '@google/gemini-cli-core';
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { useStreamingContext } from '../contexts/StreamingContext.js';
import { StreamingState } from '../types.js';
import { GeminiRespondingSpinner } from './GeminiRespondingSpinner.js';
@ -61,11 +61,9 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
}
/>
</Box>
{primaryText && (
<Text color={Colors.AccentPurple}>{primaryText}</Text>
)}
{primaryText && <Text color={theme.text.accent}>{primaryText}</Text>}
{!isNarrow && cancelAndTimerContent && (
<Text color={Colors.Gray}> {cancelAndTimerContent}</Text>
<Text color={theme.text.secondary}> {cancelAndTimerContent}</Text>
)}
</Box>
{!isNarrow && <Box flexGrow={1}>{/* Spacer */}</Box>}
@ -73,7 +71,7 @@ export const LoadingIndicator: React.FC<LoadingIndicatorProps> = ({
</Box>
{isNarrow && cancelAndTimerContent && (
<Box>
<Text color={Colors.Gray}>{cancelAndTimerContent}</Text>
<Text color={theme.text.secondary}>{cancelAndTimerContent}</Text>
</Box>
)}
{isNarrow && rightContent && <Box>{rightContent}</Box>}

12
packages/cli/src/ui/components/MemoryUsageDisplay.tsx
View File

@ -6,20 +6,24 @@
import React, { useEffect, useState } from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import process from 'node:process';
import { formatMemoryUsage } from '../utils/formatters.js';
export const MemoryUsageDisplay: React.FC = () => {
const [memoryUsage, setMemoryUsage] = useState<string>('');
const [memoryUsageColor, setMemoryUsageColor] = useState<string>(Colors.Gray);
const [memoryUsageColor, setMemoryUsageColor] = useState<string>(
theme.text.secondary,
);
useEffect(() => {
const updateMemory = () => {
const usage = process.memoryUsage().rss;
setMemoryUsage(formatMemoryUsage(usage));
setMemoryUsageColor(
usage >= 2 * 1024 * 1024 * 1024 ? Colors.AccentRed : Colors.Gray,
usage >= 2 * 1024 * 1024 * 1024
? theme.status.error
: theme.text.secondary,
);
};
const intervalId = setInterval(updateMemory, 2000);
@ -29,7 +33,7 @@ export const MemoryUsageDisplay: React.FC = () => {
return (
<Box>
<Text color={Colors.Gray}>| </Text>
<Text color={theme.text.secondary}>| </Text>
<Text color={memoryUsageColor}>{memoryUsage}</Text>
</Box>
);

30
packages/cli/src/ui/components/ModelStatsDisplay.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { formatDuration } from '../utils/formatters.js';
import {
calculateAverageLatency,
@ -33,13 +33,13 @@ const StatRow: React.FC<StatRowProps> = ({
}) => (
<Box>
<Box width={METRIC_COL_WIDTH}>
<Text bold={isSection} color={isSection ? undefined : Colors.LightBlue}>
<Text bold color={isSection ? theme.text.primary : theme.text.link}>
{isSubtle ? ` ↳ ${title}` : title}
</Text>
</Box>
{values.map((value, index) => (
<Box width={MODEL_COL_WIDTH} key={index}>
<Text>{value}</Text>
<Text color={theme.text.primary}>{value}</Text>
</Box>
))}
</Box>
@ -56,11 +56,13 @@ export const ModelStatsDisplay: React.FC = () => {
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
paddingY={1}
paddingX={2}
>
<Text>No API calls have been made in this session.</Text>
<Text color={theme.text.primary}>
No API calls have been made in this session.
</Text>
</Box>
);
}
@ -82,12 +84,12 @@ export const ModelStatsDisplay: React.FC = () => {
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
flexDirection="column"
paddingY={1}
paddingX={2}
>
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
Model Stats For Nerds
</Text>
<Box height={1} />
@ -95,11 +97,15 @@ export const ModelStatsDisplay: React.FC = () => {
{/* Header */}
<Box>
<Box width={METRIC_COL_WIDTH}>
<Text bold>Metric</Text>
<Text bold color={theme.text.primary}>
Metric
</Text>
</Box>
{modelNames.map((name) => (
<Box width={MODEL_COL_WIDTH} key={name}>
<Text bold>{name}</Text>
<Text bold color={theme.text.primary}>
{name}
</Text>
</Box>
))}
</Box>
@ -126,7 +132,7 @@ export const ModelStatsDisplay: React.FC = () => {
return (
<Text
color={
m.api.totalErrors > 0 ? Colors.AccentRed : Colors.Foreground
m.api.totalErrors > 0 ? theme.status.error : theme.text.primary
}
>
{m.api.totalErrors.toLocaleString()} ({errorRate.toFixed(1)}%)
@ -149,7 +155,7 @@ export const ModelStatsDisplay: React.FC = () => {
<StatRow
title="Total"
values={getModelValues((m) => (
<Text color={Colors.AccentYellow}>
<Text color={theme.status.warning}>
{m.tokens.total.toLocaleString()}
</Text>
))}
@ -166,7 +172,7 @@ export const ModelStatsDisplay: React.FC = () => {
values={getModelValues((m) => {
const cacheHitRate = calculateCacheHitRate(m);
return (
<Text color={Colors.AccentGreen}>
<Text color={theme.status.success}>
{m.tokens.cached.toLocaleString()} ({cacheHitRate.toFixed(1)}%)
</Text>
);

6
packages/cli/src/ui/components/PrepareLabel.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
interface PrepareLabelProps {
label: string;
@ -21,7 +21,7 @@ export const PrepareLabel: React.FC<PrepareLabelProps> = ({
matchedIndex,
userInput,
textColor,
highlightColor = Colors.AccentYellow,
highlightColor = theme.status.warning,
}) => {
if (
matchedIndex === undefined ||
@ -37,7 +37,7 @@ export const PrepareLabel: React.FC<PrepareLabelProps> = ({
const end = label.slice(matchedIndex + userInput.length);
return (
<Text>
<Text color={theme.text.primary}>
<Text color={textColor}>{start}</Text>
<Text color="black" bold backgroundColor={highlightColor}>
{match}

36
packages/cli/src/ui/components/SettingsDialog.tsx
View File

@ -6,7 +6,7 @@
import React, { useState, useEffect } from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import {
LoadedSettings,
SettingScope,
@ -366,18 +366,18 @@ export function SettingsDialog({
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
flexDirection="row"
padding={1}
width="100%"
height="100%"
>
<Box flexDirection="column" flexGrow={1}>
<Text bold color={Colors.AccentBlue}>
<Text bold color={theme.text.link}>
Settings
</Text>
<Box height={1} />
{showScrollUp && <Text color={Colors.Gray}>▲</Text>}
{showScrollUp && <Text color={theme.text.secondary}>▲</Text>}
{visibleItems.map((item, idx) => {
const isActive =
focusSection === 'settings' &&
@ -405,17 +405,21 @@ export function SettingsDialog({
<React.Fragment key={item.value}>
<Box flexDirection="row" alignItems="center">
<Box minWidth={2} flexShrink={0}>
<Text color={isActive ? Colors.AccentGreen : Colors.Gray}>
<Text
color={
isActive ? theme.status.success : theme.text.secondary
}
>
{isActive ? '●' : ''}
</Text>
</Box>
<Box minWidth={50}>
<Text
color={isActive ? Colors.AccentGreen : Colors.Foreground}
color={isActive ? theme.status.success : theme.text.primary}
>
{item.label}
{scopeMessage && (
<Text color={Colors.Gray}> {scopeMessage}</Text>
<Text color={theme.text.secondary}> {scopeMessage}</Text>
)}
</Text>
</Box>
@ -423,10 +427,10 @@ export function SettingsDialog({
<Text
color={
isActive
? Colors.AccentGreen
? theme.status.success
: shouldBeGreyedOut
? Colors.Gray
: Colors.Foreground
? theme.text.secondary
: theme.text.primary
}
>
{displayValue}
@ -436,12 +440,16 @@ export function SettingsDialog({
</React.Fragment>
);
})}
{showScrollDown && <Text color={Colors.Gray}>▼</Text>}
{showScrollDown && <Text color={theme.text.secondary}>▼</Text>}
<Box height={1} />
<Box marginTop={1} flexDirection="column">
<Text bold={focusSection === 'scope'} wrap="truncate">
<Text
bold={focusSection === 'scope'}
wrap="truncate"
color={theme.text.primary}
>
{focusSection === 'scope' ? '> ' : ' '}Apply To
</Text>
<RadioButtonSelect
@ -455,11 +463,11 @@ export function SettingsDialog({
</Box>
<Box height={1} />
<Text color={Colors.Gray}>
<Text color={theme.text.secondary}>
(Use Enter to select, Tab to change focus)
</Text>
{showRestartPrompt && (
<Text color={Colors.AccentYellow}>
<Text color={theme.status.warning}>
To see changes, Gemini CLI must be restarted. Press r to exit and
apply changes now.
</Text>

18
packages/cli/src/ui/components/ShellConfirmationDialog.tsx
View File

@ -7,7 +7,7 @@
import { ToolConfirmationOutcome } from '@google/gemini-cli-core';
import { Box, Text } from 'ink';
import React from 'react';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import {
RadioButtonSelect,
RadioSelectItem,
@ -69,23 +69,27 @@ export const ShellConfirmationDialog: React.FC<
<Box
flexDirection="column"
borderStyle="round"
borderColor={Colors.AccentYellow}
borderColor={theme.status.warning}
padding={1}
width="100%"
marginLeft={1}
>
<Box flexDirection="column" marginBottom={1}>
<Text bold>Shell Command Execution</Text>
<Text>A custom command wants to run the following shell commands:</Text>
<Text bold color={theme.text.primary}>
Shell Command Execution
</Text>
<Text color={theme.text.primary}>
A custom command wants to run the following shell commands:
</Text>
<Box
flexDirection="column"
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
paddingX={1}
marginTop={1}
>
{commands.map((cmd) => (
<Text key={cmd} color={Colors.AccentCyan}>
<Text key={cmd} color={theme.text.accent}>
{cmd}
</Text>
))}
@ -93,7 +97,7 @@ export const ShellConfirmationDialog: React.FC<
</Box>
<Box marginBottom={1}>
<Text>Do you want to proceed?</Text>
<Text color={theme.text.primary}>Do you want to proceed?</Text>
</Box>
<RadioButtonSelect items={options} onSelect={handleSelect} isFocused />

6
packages/cli/src/ui/components/ShellModeIndicator.tsx
View File

@ -6,13 +6,13 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
export const ShellModeIndicator: React.FC = () => (
<Box>
<Text color={Colors.AccentYellow}>
<Text color={theme.status.warning}>
shell mode enabled
<Text color={Colors.Gray}> (esc to disable)</Text>
<Text color={theme.text.secondary}> (esc to disable)</Text>
</Text>
</Box>
);

4
packages/cli/src/ui/components/ShowMoreLines.tsx
View File

@ -8,7 +8,7 @@ import { Box, Text } from 'ink';
import { useOverflowState } from '../contexts/OverflowContext.js';
import { useStreamingContext } from '../contexts/StreamingContext.js';
import { StreamingState } from '../types.js';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
interface ShowMoreLinesProps {
constrainHeight: boolean;
@ -32,7 +32,7 @@ export const ShowMoreLines = ({ constrainHeight }: ShowMoreLinesProps) => {
return (
<Box>
<Text color={Colors.Gray} wrap="truncate">
<Text color={theme.text.secondary} wrap="truncate">
Press ctrl-s to show more lines
</Text>
</Box>

2
packages/cli/src/ui/components/StatsDisplay.test.tsx
View File

@ -43,7 +43,7 @@ describe('<StatsDisplay />', () => {
const zeroMetrics: SessionMetrics = {
models: {},
tools: {
totalCalls: 0,
totalCalls: 1,
totalSuccess: 0,
totalFail: 0,
totalDurationMs: 0,

115
packages/cli/src/ui/components/StatsDisplay.tsx
View File

@ -7,7 +7,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import Gradient from 'ink-gradient';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { formatDuration } from '../utils/formatters.js';
import { useSessionStats, ModelMetrics } from '../contexts/SessionContext.js';
import {
@ -29,7 +29,7 @@ const StatRow: React.FC<StatRowProps> = ({ title, children }) => (
<Box>
{/* Fixed width for the label creates a clean "gutter" for alignment */}
<Box width={28}>
<Text color={Colors.LightBlue}>{title}</Text>
<Text color={theme.text.link}>{title}</Text>
</Box>
{children}
</Box>
@ -45,7 +45,7 @@ const SubStatRow: React.FC<SubStatRowProps> = ({ title, children }) => (
<Box paddingLeft={2}>
{/* Adjust width for the "» " prefix */}
<Box width={26}>
<Text>» {title}</Text>
<Text color={theme.text.secondary}>» {title}</Text>
</Box>
{children}
</Box>
@ -59,7 +59,9 @@ interface SectionProps {
const Section: React.FC<SectionProps> = ({ title, children }) => (
<Box flexDirection="column" width="100%" marginBottom={1}>
<Text bold>{title}</Text>
<Text bold color={theme.text.primary}>
{title}
</Text>
{children}
</Box>
);
@ -79,16 +81,24 @@ const ModelUsageTable: React.FC<{
{/* Header */}
<Box>
<Box width={nameWidth}>
<Text bold>Model Usage</Text>
<Text bold color={theme.text.primary}>
Model Usage
</Text>
</Box>
<Box width={requestsWidth} justifyContent="flex-end">
<Text bold>Reqs</Text>
<Text bold color={theme.text.primary}>
Reqs
</Text>
</Box>
<Box width={inputTokensWidth} justifyContent="flex-end">
<Text bold>Input Tokens</Text>
<Text bold color={theme.text.primary}>
Input Tokens
</Text>
</Box>
<Box width={outputTokensWidth} justifyContent="flex-end">
<Text bold>Output Tokens</Text>
<Text bold color={theme.text.primary}>
Output Tokens
</Text>
</Box>
</Box>
{/* Divider */}
@ -98,6 +108,7 @@ const ModelUsageTable: React.FC<{
borderTop={false}
borderLeft={false}
borderRight={false}
borderColor={theme.border.default}
width={nameWidth + requestsWidth + inputTokensWidth + outputTokensWidth}
></Box>
@ -105,18 +116,20 @@ const ModelUsageTable: React.FC<{
{Object.entries(models).map(([name, modelMetrics]) => (
<Box key={name}>
<Box width={nameWidth}>
<Text>{name.replace('-001', '')}</Text>
<Text color={theme.text.primary}>{name.replace('-001', '')}</Text>
</Box>
<Box width={requestsWidth} justifyContent="flex-end">
<Text>{modelMetrics.api.totalRequests}</Text>
<Text color={theme.text.primary}>
{modelMetrics.api.totalRequests}
</Text>
</Box>
<Box width={inputTokensWidth} justifyContent="flex-end">
<Text color={Colors.AccentYellow}>
<Text color={theme.status.warning}>
{modelMetrics.tokens.prompt.toLocaleString()}
</Text>
</Box>
<Box width={outputTokensWidth} justifyContent="flex-end">
<Text color={Colors.AccentYellow}>
<Text color={theme.status.warning}>
{modelMetrics.tokens.candidates.toLocaleString()}
</Text>
</Box>
@ -124,13 +137,13 @@ const ModelUsageTable: React.FC<{
))}
{cacheEfficiency > 0 && (
<Box flexDirection="column" marginTop={1}>
<Text>
<Text color={Colors.AccentGreen}>Savings Highlight:</Text>{' '}
<Text color={theme.text.primary}>
<Text color={theme.status.success}>Savings Highlight:</Text>{' '}
{totalCachedTokens.toLocaleString()} ({cacheEfficiency.toFixed(1)}
%) of input tokens were served from the cache, reducing costs.
</Text>
<Box height={1} />
<Text color={Colors.Gray}>
<Text color={theme.text.secondary}>
» Tip: For a full token breakdown, run `/stats model`.
</Text>
</Box>
@ -169,18 +182,18 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
const renderTitle = () => {
if (title) {
return Colors.GradientColors && Colors.GradientColors.length > 0 ? (
<Gradient colors={Colors.GradientColors}>
return theme.ui.gradient && theme.ui.gradient.length > 0 ? (
<Gradient colors={theme.ui.gradient}>
<Text bold>{title}</Text>
</Gradient>
) : (
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
{title}
</Text>
);
}
return (
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
Session Stats
</Text>
);
@ -189,7 +202,7 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
flexDirection="column"
paddingY={1}
paddingX={2}
@ -197,51 +210,55 @@ export const StatsDisplay: React.FC<StatsDisplayProps> = ({
{renderTitle()}
<Box height={1} />
<Section title="Interaction Summary">
<StatRow title="Session ID:">
<Text>{stats.sessionId}</Text>
</StatRow>
<StatRow title="Tool Calls:">
<Text>
{tools.totalCalls} ({' '}
<Text color={Colors.AccentGreen}>✔ {tools.totalSuccess}</Text>{' '}
<Text color={Colors.AccentRed}>✖ {tools.totalFail}</Text> )
</Text>
</StatRow>
<StatRow title="Success Rate:">
<Text color={successColor}>{computed.successRate.toFixed(1)}%</Text>
</StatRow>
{computed.totalDecisions > 0 && (
<StatRow title="User Agreement:">
<Text color={agreementColor}>
{computed.agreementRate.toFixed(1)}%{' '}
<Text color={Colors.Gray}>
({computed.totalDecisions} reviewed)
</Text>
{tools.totalCalls > 0 && (
<Section title="Interaction Summary">
<StatRow title="Session ID:">
<Text>{stats.sessionId}</Text>
</StatRow>
<StatRow title="Tool Calls:">
<Text color={theme.text.primary}>
{tools.totalCalls} ({' '}
<Text color={theme.status.success}>✔ {tools.totalSuccess}</Text>{' '}
<Text color={theme.status.error}>✖ {tools.totalFail}</Text> )
</Text>
</StatRow>
)}
</Section>
<StatRow title="Success Rate:">
<Text color={successColor}>{computed.successRate.toFixed(1)}%</Text>
</StatRow>
{computed.totalDecisions > 0 && (
<StatRow title="User Agreement:">
<Text color={agreementColor}>
{computed.agreementRate.toFixed(1)}%{' '}
<Text color={theme.text.secondary}>
({computed.totalDecisions} reviewed)
</Text>
</Text>
</StatRow>
)}
</Section>
)}
<Section title="Performance">
<StatRow title="Wall Time:">
<Text>{duration}</Text>
<Text color={theme.text.primary}>{duration}</Text>
</StatRow>
<StatRow title="Agent Active:">
<Text>{formatDuration(computed.agentActiveTime)}</Text>
<Text color={theme.text.primary}>
{formatDuration(computed.agentActiveTime)}
</Text>
</StatRow>
<SubStatRow title="API Time:">
<Text>
<Text color={theme.text.primary}>
{formatDuration(computed.totalApiTime)}{' '}
<Text color={Colors.Gray}>
<Text color={theme.text.secondary}>
({computed.apiTimePercent.toFixed(1)}%)
</Text>
</Text>
</SubStatRow>
<SubStatRow title="Tool Time:">
<Text>
<Text color={theme.text.primary}>
{formatDuration(computed.totalToolTime)}{' '}
<Text color={Colors.Gray}>
<Text color={theme.text.secondary}>
({computed.toolTimePercent.toFixed(1)}%)
</Text>
</Text>

14
packages/cli/src/ui/components/SuggestionsDisplay.tsx
View File

@ -5,7 +5,7 @@
*/
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { PrepareLabel } from './PrepareLabel.js';
export interface Suggestion {
label: string;
@ -35,7 +35,7 @@ export function SuggestionsDisplay({
if (isLoading) {
return (
<Box paddingX={1} width={width}>
<Text color="gray">Loading suggestions...</Text>
<Text color={theme.text.secondary}>Loading suggestions...</Text>
</Box>
);
}
@ -54,12 +54,12 @@ export function SuggestionsDisplay({
return (
<Box flexDirection="column" paddingX={1} width={width}>
{scrollOffset > 0 && <Text color={Colors.Foreground}>▲</Text>}
{scrollOffset > 0 && <Text color={theme.text.primary}>▲</Text>}
{visibleSuggestions.map((suggestion, index) => {
const originalIndex = startIndex + index;
const isActive = originalIndex === activeIndex;
const textColor = isActive ? Colors.AccentPurple : Colors.Gray;
const textColor = isActive ? theme.text.accent : theme.text.secondary;
const labelElement = (
<PrepareLabel
label={suggestion.label}
@ -91,9 +91,11 @@ export function SuggestionsDisplay({
</Box>
);
})}
{endIndex < suggestions.length && <Text color="gray">▼</Text>}
{endIndex < suggestions.length && (
<Text color={theme.text.secondary}>▼</Text>
)}
{suggestions.length > MAX_SUGGESTIONS_TO_SHOW && (
<Text color="gray">
<Text color={theme.text.secondary}>
({activeIndex + 1}/{suggestions.length})
</Text>
)}

37
packages/cli/src/ui/components/ThemeDialog.tsx
View File

@ -6,7 +6,7 @@
import React, { useCallback, useState } from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { themeManager, DEFAULT_THEME } from '../themes/theme-manager.js';
import { RadioButtonSelect } from './shared/RadioButtonSelect.js';
import { DiffRenderer } from './messages/DiffRenderer.js';
@ -207,7 +207,7 @@ export function ThemeDialog({
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
flexDirection="column"
paddingTop={includePadding ? 1 : 0}
paddingBottom={includePadding ? 1 : 0}
@ -218,9 +218,19 @@ export function ThemeDialog({
<Box flexDirection="row">
{/* Left Column: Selection */}
<Box flexDirection="column" width="45%" paddingRight={2}>
<Text bold={currentFocusedSection === 'theme'} wrap="truncate">
<Text
bold={currentFocusedSection === 'theme'}
wrap="truncate"
color={
currentFocusedSection === 'theme'
? theme.text.primary
: theme.text.secondary
}
>
{currentFocusedSection === 'theme' ? '> ' : ' '}Select Theme{' '}
<Text color={Colors.Gray}>{otherScopeModifiedMessage}</Text>
<Text color={theme.text.secondary}>
{otherScopeModifiedMessage}
</Text>
</Text>
<RadioButtonSelect
key={selectInputKey}
@ -237,7 +247,15 @@ export function ThemeDialog({
{/* Scope Selection */}
{showScopeSelection && (
<Box marginTop={1} flexDirection="column">
<Text bold={currentFocusedSection === 'scope'} wrap="truncate">
<Text
bold={currentFocusedSection === 'scope'}
wrap="truncate"
color={
currentFocusedSection === 'scope'
? theme.text.primary
: theme.text.secondary
}
>
{currentFocusedSection === 'scope' ? '> ' : ' '}Apply To
</Text>
<RadioButtonSelect
@ -254,7 +272,9 @@ export function ThemeDialog({
{/* Right Column: Preview */}
<Box flexDirection="column" width="55%" paddingLeft={2}>
<Text bold>Preview</Text>
<Text bold color={theme.text.primary}>
Preview
</Text>
{/* Get the Theme object for the highlighted theme, fall back to default if not found */}
{(() => {
const previewTheme =
@ -264,7 +284,7 @@ export function ThemeDialog({
return (
<Box
borderStyle="single"
borderColor={Colors.Gray}
borderColor={theme.border.default}
paddingTop={includePadding ? 1 : 0}
paddingBottom={includePadding ? 1 : 0}
paddingLeft={1}
@ -281,6 +301,7 @@ def fibonacci(n):
'python',
codeBlockHeight,
colorizeCodeWidth,
previewTheme,
)}
<Box marginTop={1} />
<DiffRenderer
@ -300,7 +321,7 @@ def fibonacci(n):
</Box>
</Box>
<Box marginTop={1}>
<Text color={Colors.Gray} wrap="truncate">
<Text color={theme.text.secondary} wrap="truncate">
(Use Enter to select
{showScopeSelection ? ', Tab to change focus' : ''})
</Text>

16
packages/cli/src/ui/components/Tips.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { type Config } from '@google/gemini-cli-core';
interface TipsProps {
@ -17,25 +17,25 @@ export const Tips: React.FC<TipsProps> = ({ config }) => {
const geminiMdFileCount = config.getGeminiMdFileCount();
return (
<Box flexDirection="column">
<Text color={Colors.Foreground}>Tips for getting started:</Text>
<Text color={Colors.Foreground}>
<Text color={theme.text.primary}>Tips for getting started:</Text>
<Text color={theme.text.primary}>
1. Ask questions, edit files, or run commands.
</Text>
<Text color={Colors.Foreground}>
<Text color={theme.text.primary}>
2. Be specific for the best results.
</Text>
{geminiMdFileCount === 0 && (
<Text color={Colors.Foreground}>
<Text color={theme.text.primary}>
3. Create{' '}
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
GEMINI.md
</Text>{' '}
files to customize your interactions with Gemini.
</Text>
)}
<Text color={Colors.Foreground}>
<Text color={theme.text.primary}>
{geminiMdFileCount === 0 ? '4.' : '3.'}{' '}
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
/help
</Text>{' '}
for more information.

61
packages/cli/src/ui/components/ToolStatsDisplay.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { formatDuration } from '../utils/formatters.js';
import {
getStatusColor,
@ -37,16 +37,16 @@ const StatRow: React.FC<{
return (
<Box>
<Box width={TOOL_NAME_COL_WIDTH}>
<Text color={Colors.LightBlue}>{name}</Text>
<Text color={theme.text.link}>{name}</Text>
</Box>
<Box width={CALLS_COL_WIDTH} justifyContent="flex-end">
<Text>{stats.count}</Text>
<Text color={theme.text.primary}>{stats.count}</Text>
</Box>
<Box width={SUCCESS_RATE_COL_WIDTH} justifyContent="flex-end">
<Text color={successColor}>{successRate.toFixed(1)}%</Text>
</Box>
<Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
<Text>{formatDuration(avgDuration)}</Text>
<Text color={theme.text.primary}>{formatDuration(avgDuration)}</Text>
</Box>
</Box>
);
@ -63,11 +63,13 @@ export const ToolStatsDisplay: React.FC = () => {
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
paddingY={1}
paddingX={2}
>
<Text>No tool calls have been made in this session.</Text>
<Text color={theme.text.primary}>
No tool calls have been made in this session.
</Text>
</Box>
);
}
@ -94,13 +96,13 @@ export const ToolStatsDisplay: React.FC = () => {
return (
<Box
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
flexDirection="column"
paddingY={1}
paddingX={2}
width={70}
>
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
Tool Stats For Nerds
</Text>
<Box height={1} />
@ -108,16 +110,24 @@ export const ToolStatsDisplay: React.FC = () => {
{/* Header */}
<Box>
<Box width={TOOL_NAME_COL_WIDTH}>
<Text bold>Tool Name</Text>
<Text bold color={theme.text.primary}>
Tool Name
</Text>
</Box>
<Box width={CALLS_COL_WIDTH} justifyContent="flex-end">
<Text bold>Calls</Text>
<Text bold color={theme.text.primary}>
Calls
</Text>
</Box>
<Box width={SUCCESS_RATE_COL_WIDTH} justifyContent="flex-end">
<Text bold>Success Rate</Text>
<Text bold color={theme.text.primary}>
Success Rate
</Text>
</Box>
<Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
<Text bold>Avg Duration</Text>
<Text bold color={theme.text.primary}>
Avg Duration
</Text>
</Box>
</Box>
@ -139,45 +149,47 @@ export const ToolStatsDisplay: React.FC = () => {
<Box height={1} />
{/* User Decision Summary */}
<Text bold>User Decision Summary</Text>
<Text bold color={theme.text.primary}>
User Decision Summary
</Text>
<Box>
<Box
width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
>
<Text color={Colors.LightBlue}>Total Reviewed Suggestions:</Text>
<Text color={theme.text.link}>Total Reviewed Suggestions:</Text>
</Box>
<Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
<Text>{totalReviewed}</Text>
<Text color={theme.text.primary}>{totalReviewed}</Text>
</Box>
</Box>
<Box>
<Box
width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
>
<Text> » Accepted:</Text>
<Text color={theme.text.primary}> » Accepted:</Text>
</Box>
<Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
<Text color={Colors.AccentGreen}>{totalDecisions.accept}</Text>
<Text color={theme.status.success}>{totalDecisions.accept}</Text>
</Box>
</Box>
<Box>
<Box
width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
>
<Text> » Rejected:</Text>
<Text color={theme.text.primary}> » Rejected:</Text>
</Box>
<Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
<Text color={Colors.AccentRed}>{totalDecisions.reject}</Text>
<Text color={theme.status.error}>{totalDecisions.reject}</Text>
</Box>
</Box>
<Box>
<Box
width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
>
<Text> » Modified:</Text>
<Text color={theme.text.primary}> » Modified:</Text>
</Box>
<Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
<Text color={Colors.AccentYellow}>{totalDecisions.modify}</Text>
<Text color={theme.status.warning}>{totalDecisions.modify}</Text>
</Box>
</Box>
@ -195,10 +207,13 @@ export const ToolStatsDisplay: React.FC = () => {
<Box
width={TOOL_NAME_COL_WIDTH + CALLS_COL_WIDTH + SUCCESS_RATE_COL_WIDTH}
>
<Text> Overall Agreement Rate:</Text>
<Text color={theme.text.primary}> Overall Agreement Rate:</Text>
</Box>
<Box width={AVG_DURATION_COL_WIDTH} justifyContent="flex-end">
<Text bold color={totalReviewed > 0 ? agreementColor : undefined}>
<Text
bold
color={totalReviewed > 0 ? agreementColor : theme.text.primary}
>
{totalReviewed > 0 ? `${agreementRate.toFixed(1)}%` : '--'}
</Text>
</Box>

6
packages/cli/src/ui/components/UpdateNotification.tsx
View File

@ -5,7 +5,7 @@
*/
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
interface UpdateNotificationProps {
message: string;
@ -14,10 +14,10 @@ interface UpdateNotificationProps {
export const UpdateNotification = ({ message }: UpdateNotificationProps) => (
<Box
borderStyle="round"
borderColor={Colors.AccentYellow}
borderColor={theme.status.warning}
paddingX={1}
marginY={1}
>
<Text color={Colors.AccentYellow}>{message}</Text>
<Text color={theme.status.warning}>{message}</Text>
</Box>
);

5
packages/cli/src/ui/components/__snapshots__/SessionSummaryDisplay.test.tsx.snap
View File

@ -5,11 +5,6 @@ exports[`<SessionSummaryDisplay /> > renders the summary display with a title 1`
│ │
│ Agent powering down. Goodbye! │
│ │
│ Interaction Summary │
│ Session ID: │
│ Tool Calls: 0 ( ✔ 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │
│ Wall Time: 1h 23m 45s │
│ Agent Active: 50.2s │

22
packages/cli/src/ui/components/__snapshots__/StatsDisplay.test.tsx.snap
View File

@ -65,11 +65,6 @@ exports[`<StatsDisplay /> > Conditional Rendering Tests > hides Efficiency secti
│ │
│ Session Stats │
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 0 ( ✔ 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │
│ Wall Time: 1s │
│ Agent Active: 100ms │
@ -109,11 +104,6 @@ exports[`<StatsDisplay /> > Title Rendering > renders the custom title when a ti
│ │
│ Agent powering down. Goodbye! │
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 0 ( ✔ 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │
│ Wall Time: 1s │
│ Agent Active: 0s │
@ -129,11 +119,6 @@ exports[`<StatsDisplay /> > Title Rendering > renders the default title when no
│ │
│ Session Stats │
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 0 ( ✔ 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │
│ Wall Time: 1s │
│ Agent Active: 0s │
@ -149,11 +134,6 @@ exports[`<StatsDisplay /> > renders a table with two models correctly 1`] = `
│ │
│ Session Stats │
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 0 ( ✔ 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │
│ Wall Time: 1s │
│ Agent Active: 19.5s │
@ -209,7 +189,7 @@ exports[`<StatsDisplay /> > renders only the Performance section in its zero sta
│ │
│ Interaction Summary │
│ Session ID: test-session-id │
│ Tool Calls: 0 ( ✔ 0 ✖ 0 ) │
│ Tool Calls: 1 ( ✔ 0 ✖ 0 ) │
│ Success Rate: 0.0% │
│ │
│ Performance │

6
packages/cli/src/ui/components/messages/CompressionMessage.tsx
View File

@ -8,7 +8,7 @@ import React from 'react';
import { Box, Text } from 'ink';
import { CompressionProps } from '../../types.js';
import Spinner from 'ink-spinner';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
export interface CompressionDisplayProps {
compression: CompressionProps;
@ -32,13 +32,13 @@ export const CompressionMessage: React.FC<CompressionDisplayProps> = ({
{compression.isPending ? (
<Spinner type="dots" />
) : (
<Text color={Colors.AccentPurple}>✦</Text>
<Text color={theme.text.accent}>✦</Text>
)}
</Box>
<Box>
<Text
color={
compression.isPending ? Colors.AccentPurple : Colors.AccentGreen
compression.isPending ? theme.text.accent : theme.status.success
}
>
{text}

47
packages/cli/src/ui/components/messages/DiffRenderer.tsx
View File

@ -6,11 +6,9 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../../colors.js';
import crypto from 'crypto';
import { colorizeCode, colorizeLine } from '../../utils/CodeColorizer.js';
import { MaxSizedBox } from '../shared/MaxSizedBox.js';
import { theme } from '../../semantic-colors.js';
interface DiffLine {
type: 'add' | 'del' | 'context' | 'hunk' | 'other';
@ -108,14 +106,20 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
theme,
}) => {
if (!diffContent || typeof diffContent !== 'string') {
return <Text color={Colors.AccentYellow}>No diff content.</Text>;
return (
<Text color={theme?.semanticColors.status.warning}>No diff content.</Text>
);
}
const parsedLines = parseDiffWithLineNumbers(diffContent);
if (parsedLines.length === 0) {
return (
<Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
<Box
borderStyle="round"
borderColor={theme?.semanticColors.border.default}
padding={1}
>
<Text dimColor>No changes detected.</Text>
</Box>
);
@ -158,6 +162,7 @@ export const DiffRenderer: React.FC<DiffRendererProps> = ({
tabWidth,
availableTerminalHeight,
terminalWidth,
theme,
);
}
@ -170,6 +175,7 @@ const renderDiffContent = (
tabWidth = DEFAULT_TAB_WIDTH,
availableTerminalHeight: number | undefined,
terminalWidth: number,
theme: import('../../themes/theme.js').Theme | undefined,
) => {
// 1. Normalize whitespace (replace tabs with spaces) *before* further processing
const normalizedLines = parsedLines.map((line) => ({
@ -184,7 +190,11 @@ const renderDiffContent = (
if (displayableLines.length === 0) {
return (
<Box borderStyle="round" borderColor={Colors.Gray} padding={1}>
<Box
borderStyle="round"
borderColor={theme?.semanticColors.border.default}
padding={1}
>
<Text dimColor>No changes detected.</Text>
</Box>
);
@ -248,7 +258,10 @@ const renderDiffContent = (
) {
acc.push(
<Box key={`gap-${index}`}>
<Text wrap="truncate" color={Colors.Gray}>
<Text
wrap="truncate"
color={theme?.semanticColors.border.default}
>
{'═'.repeat(terminalWidth)}
</Text>
</Box>,
@ -289,12 +302,12 @@ const renderDiffContent = (
acc.push(
<Box key={lineKey} flexDirection="row">
<Text
color={theme.text.secondary}
color={theme?.semanticColors.text.secondary}
backgroundColor={
line.type === 'add'
? theme.background.diff.added
? theme?.semanticColors.background.diff.added
: line.type === 'del'
? theme.background.diff.removed
? theme?.semanticColors.background.diff.removed
: undefined
}
>
@ -302,30 +315,32 @@ const renderDiffContent = (
</Text>
{line.type === 'context' ? (
<>
<Text>{prefixSymbol} </Text>
<Text color={theme?.semanticColors.text.primary}>
{prefixSymbol}{' '}
</Text>
<Text wrap="wrap">
{colorizeLine(displayContent, language)}
{colorizeLine(displayContent, language, theme)}
</Text>
</>
) : (
<Text
backgroundColor={
line.type === 'add'
? theme.background.diff.added
: theme.background.diff.removed
? theme?.semanticColors.background.diff.added
: theme?.semanticColors.background.diff.removed
}
wrap="wrap"
>
<Text
color={
line.type === 'add'
? theme.status.success
: theme.status.error
? theme?.semanticColors.status.success
: theme?.semanticColors.status.error
}
>
{prefixSymbol}
</Text>{' '}
{colorizeLine(displayContent, language)}
{colorizeLine(displayContent, language, theme)}
</Text>
)}
</Box>,

6
packages/cli/src/ui/components/messages/ErrorMessage.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
interface ErrorMessageProps {
text: string;
@ -19,10 +19,10 @@ export const ErrorMessage: React.FC<ErrorMessageProps> = ({ text }) => {
return (
<Box flexDirection="row" marginBottom={1}>
<Box width={prefixWidth}>
<Text color={Colors.AccentRed}>{prefix}</Text>
<Text color={theme.status.error}>{prefix}</Text>
</Box>
<Box flexGrow={1}>
<Text wrap="wrap" color={Colors.AccentRed}>
<Text wrap="wrap" color={theme.status.error}>
{text}
</Text>
</Box>

4
packages/cli/src/ui/components/messages/GeminiMessage.tsx
View File

@ -7,7 +7,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
interface GeminiMessageProps {
text: string;
@ -28,7 +28,7 @@ export const GeminiMessage: React.FC<GeminiMessageProps> = ({
return (
<Box flexDirection="row">
<Box width={prefixWidth}>
<Text color={Colors.AccentPurple}>{prefix}</Text>
<Text color={theme.text.accent}>{prefix}</Text>
</Box>
<Box flexGrow={1} flexDirection="column">
<MarkdownDisplay

6
packages/cli/src/ui/components/messages/InfoMessage.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
interface InfoMessageProps {
text: string;
@ -19,10 +19,10 @@ export const InfoMessage: React.FC<InfoMessageProps> = ({ text }) => {
return (
<Box flexDirection="row" marginTop={1}>
<Box width={prefixWidth}>
<Text color={Colors.AccentYellow}>{prefix}</Text>
<Text color={theme.status.warning}>{prefix}</Text>
</Box>
<Box flexGrow={1}>
<Text wrap="wrap" color={Colors.AccentYellow}>
<Text wrap="wrap" color={theme.status.warning}>
{text}
</Text>
</Box>

27
packages/cli/src/ui/components/messages/ToolConfirmationMessage.tsx
View File

@ -7,7 +7,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { DiffRenderer } from './DiffRenderer.js';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
import {
ToolCallConfirmationDetails,
ToolConfirmationOutcome,
@ -112,13 +112,13 @@ export const ToolConfirmationMessage: React.FC<
<Box
minWidth="90%"
borderStyle="round"
borderColor={Colors.Gray}
borderColor={theme.border.default}
justifyContent="space-around"
padding={1}
overflow="hidden"
>
<Text>Modify in progress: </Text>
<Text color={Colors.AccentGreen}>
<Text color={theme.text.primary}>Modify in progress: </Text>
<Text color={theme.status.success}>
Save and close external editor to continue
</Text>
</Box>
@ -192,7 +192,7 @@ export const ToolConfirmationMessage: React.FC<
maxWidth={Math.max(childWidth - 4, 1)}
>
<Box>
<Text color={Colors.AccentCyan}>{executionProps.command}</Text>
<Text color={theme.text.accent}>{executionProps.command}</Text>
</Box>
</MaxSizedBox>
</Box>
@ -222,12 +222,15 @@ export const ToolConfirmationMessage: React.FC<
bodyContent = (
<Box flexDirection="column" paddingX={1} marginLeft={1}>
<Text color={Colors.AccentCyan}>{infoProps.prompt}</Text>
<Text color={theme.text.accent}>{infoProps.prompt}</Text>
{displayUrls && infoProps.urls && infoProps.urls.length > 0 && (
<Box flexDirection="column" marginTop={1}>
<Text>URLs to fetch:</Text>
<Text color={theme.text.primary}>URLs to fetch:</Text>
{infoProps.urls.map((url) => (
<Text key={url}> - {url}</Text>
<Text key={url} color={theme.text.primary}>
{' '}
- {url}
</Text>
))}
</Box>
)}
@ -239,8 +242,8 @@ export const ToolConfirmationMessage: React.FC<
bodyContent = (
<Box flexDirection="column" paddingX={1} marginLeft={1}>
<Text color={Colors.AccentCyan}>MCP Server: {mcpProps.serverName}</Text>
<Text color={Colors.AccentCyan}>Tool: {mcpProps.toolName}</Text>
<Text color={theme.text.accent}>MCP Server: {mcpProps.serverName}</Text>
<Text color={theme.text.accent}>Tool: {mcpProps.toolName}</Text>
</Box>
);
@ -275,7 +278,9 @@ export const ToolConfirmationMessage: React.FC<
{/* Confirmation Question */}
<Box marginBottom={1} flexShrink={0}>
<Text wrap="truncate">{question}</Text>
<Text wrap="truncate" color={theme.text.primary}>
{question}
</Text>
</Box>
{/* Select Input for Options */}

4
packages/cli/src/ui/components/messages/ToolGroupMessage.tsx
View File

@ -9,7 +9,7 @@ import { Box } from 'ink';
import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
import { ToolMessage } from './ToolMessage.js';
import { ToolConfirmationMessage } from './ToolConfirmationMessage.js';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
import { Config } from '@google/gemini-cli-core';
import { SHELL_COMMAND_NAME } from '../../constants.js';
@ -35,7 +35,7 @@ export const ToolGroupMessage: React.FC<ToolGroupMessageProps> = ({
);
const isShellCommand = toolCalls.some((t) => t.name === SHELL_COMMAND_NAME);
const borderColor =
hasPending || isShellCommand ? Colors.AccentYellow : Colors.Gray;
hasPending || isShellCommand ? theme.status.warning : theme.border.default;
const staticHeight = /* border */ 2 + /* marginBottom */ 1;
// This is a bit of a magic number, but it accounts for the border and

27
packages/cli/src/ui/components/messages/ToolMessage.tsx
View File

@ -8,7 +8,7 @@ import React from 'react';
import { Box, Text } from 'ink';
import { IndividualToolCallDisplay, ToolCallStatus } from '../../types.js';
import { DiffRenderer } from './DiffRenderer.js';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
import { MarkdownDisplay } from '../../utils/MarkdownDisplay.js';
import { GeminiRespondingSpinner } from '../GeminiRespondingSpinner.js';
import { MaxSizedBox } from '../shared/MaxSizedBox.js';
@ -90,7 +90,9 @@ export const ToolMessage: React.FC<ToolMessageProps> = ({
{typeof resultDisplay === 'string' && !renderOutputAsMarkdown && (
<MaxSizedBox maxHeight={availableHeight} maxWidth={childWidth}>
<Box>
<Text wrap="wrap">{resultDisplay}</Text>
<Text wrap="wrap" color={theme.text.primary}>
{resultDisplay}
</Text>
</Box>
</MaxSizedBox>
)}
@ -118,7 +120,7 @@ const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
}) => (
<Box minWidth={STATUS_INDICATOR_WIDTH}>
{status === ToolCallStatus.Pending && (
<Text color={Colors.AccentGreen}>o</Text>
<Text color={theme.status.success}>o</Text>
)}
{status === ToolCallStatus.Executing && (
<GeminiRespondingSpinner
@ -127,18 +129,18 @@ const ToolStatusIndicator: React.FC<ToolStatusIndicatorProps> = ({
/>
)}
{status === ToolCallStatus.Success && (
<Text color={Colors.AccentGreen}>✔</Text>
<Text color={theme.status.success}>✔</Text>
)}
{status === ToolCallStatus.Confirming && (
<Text color={Colors.AccentYellow}>?</Text>
<Text color={theme.status.warning}>?</Text>
)}
{status === ToolCallStatus.Canceled && (
<Text color={Colors.AccentYellow} bold>
<Text color={theme.status.warning} bold>
-
</Text>
)}
{status === ToolCallStatus.Error && (
<Text color={Colors.AccentRed} bold>
<Text color={theme.status.error} bold>
x
</Text>
)}
@ -160,11 +162,11 @@ const ToolInfo: React.FC<ToolInfo> = ({
const nameColor = React.useMemo<string>(() => {
switch (emphasis) {
case 'high':
return Colors.Foreground;
return theme.text.primary;
case 'medium':
return Colors.Foreground;
return theme.text.primary;
case 'low':
return Colors.Gray;
return theme.text.secondary;
default: {
const exhaustiveCheck: never = emphasis;
return exhaustiveCheck;
@ -176,18 +178,19 @@ const ToolInfo: React.FC<ToolInfo> = ({
<Text
wrap="truncate-end"
strikethrough={status === ToolCallStatus.Canceled}
color={theme.text.primary}
>
<Text color={nameColor} bold>
{name}
</Text>{' '}
<Text color={Colors.Gray}>{description}</Text>
<Text color={theme.text.secondary}>{description}</Text>
</Text>
</Box>
);
};
const TrailingIndicator: React.FC = () => (
<Text color={Colors.Foreground} wrap="truncate">
<Text color={theme.text.primary} wrap="truncate">
{' '}
←
</Text>

6
packages/cli/src/ui/components/messages/UserMessage.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
interface UserMessageProps {
text: string;
@ -17,8 +17,8 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text }) => {
const prefixWidth = prefix.length;
const isSlashCommand = text.startsWith('/');
const textColor = isSlashCommand ? Colors.AccentPurple : Colors.Gray;
const borderColor = isSlashCommand ? Colors.AccentPurple : Colors.Gray;
const textColor = isSlashCommand ? theme.text.accent : theme.text.secondary;
const borderColor = isSlashCommand ? theme.text.accent : theme.border.default;
return (
<Box

6
packages/cli/src/ui/components/messages/UserShellMessage.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
interface UserShellMessageProps {
text: string;
@ -18,8 +18,8 @@ export const UserShellMessage: React.FC<UserShellMessageProps> = ({ text }) => {
return (
<Box>
<Text color={Colors.AccentCyan}>$ </Text>
<Text>{commandToDisplay}</Text>
<Text color={theme.text.accent}>$ </Text>
<Text color={theme.text.primary}>{commandToDisplay}</Text>
</Box>
);
};

7
packages/cli/src/ui/components/shared/MaxSizedBox.tsx
View File

@ -7,7 +7,7 @@
import React, { Fragment, useEffect, useId } from 'react';
import { Box, Text } from 'ink';
import stringWidth from 'string-width';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
import { toCodePoints } from '../../utils/textUtils.js';
import { useOverflowActions } from '../../contexts/OverflowContext.js';
@ -173,6 +173,7 @@ export const MaxSizedBox: React.FC<MaxSizedBoxProps> = ({
<Box key={index}>
{line.length > 0 ? (
line.map((segment, segIndex) => (
// Avoid adding color styles to this <Text> element, breaks code colorization
<Text key={segIndex} {...segment.props}>
{segment.text}
</Text>
@ -186,14 +187,14 @@ export const MaxSizedBox: React.FC<MaxSizedBoxProps> = ({
return (
<Box flexDirection="column" width={maxWidth} flexShrink={0}>
{totalHiddenLines > 0 && overflowDirection === 'top' && (
<Text color={Colors.Gray} wrap="truncate">
<Text color={theme.text.secondary} wrap="truncate">
... first {totalHiddenLines} line{totalHiddenLines === 1 ? '' : 's'}{' '}
hidden ...
</Text>
)}
{visibleLines}
{totalHiddenLines > 0 && overflowDirection === 'bottom' && (
<Text color={Colors.Gray} wrap="truncate">
<Text color={theme.text.secondary} wrap="truncate">
... last {totalHiddenLines} line{totalHiddenLines === 1 ? '' : 's'}{' '}
hidden ...
</Text>

32
packages/cli/src/ui/components/shared/RadioButtonSelect.tsx
View File

@ -6,7 +6,7 @@
import React, { useEffect, useState, useRef } from 'react';
import { Text, Box } from 'ink';
import { Colors } from '../../colors.js';
import { theme } from '../../semantic-colors.js';
import { useKeypress } from '../../hooks/useKeypress.js';
/**
@ -164,7 +164,9 @@ export function RadioButtonSelect<T>({
return (
<Box flexDirection="column">
{showScrollArrows && (
<Text color={scrollOffset > 0 ? Colors.Foreground : Colors.Gray}>
<Text
color={scrollOffset > 0 ? theme.text.primary : theme.text.secondary}
>
▲
</Text>
)}
@ -172,18 +174,18 @@ export function RadioButtonSelect<T>({
const itemIndex = scrollOffset + index;
const isSelected = activeIndex === itemIndex;
let textColor = Colors.Foreground;
let numberColor = Colors.Foreground;
let textColor = theme.text.primary;
let numberColor = theme.text.primary;
if (isSelected) {
textColor = Colors.AccentGreen;
numberColor = Colors.AccentGreen;
textColor = theme.status.success;
numberColor = theme.status.success;
} else if (item.disabled) {
textColor = Colors.Gray;
numberColor = Colors.Gray;
textColor = theme.text.secondary;
numberColor = theme.text.secondary;
}
if (!showNumbers) {
numberColor = Colors.Gray;
numberColor = theme.text.secondary;
}
const numberColumnWidth = String(items.length).length;
@ -194,7 +196,9 @@ export function RadioButtonSelect<T>({
return (
<Box key={item.label} alignItems="center">
<Box minWidth={2} flexShrink={0}>
<Text color={isSelected ? Colors.AccentGreen : Colors.Foreground}>
<Text
color={isSelected ? theme.status.success : theme.text.primary}
>
{isSelected ? '●' : ' '}
</Text>
</Box>
@ -208,7 +212,9 @@ export function RadioButtonSelect<T>({
{item.themeNameDisplay && item.themeTypeDisplay ? (
<Text color={textColor} wrap="truncate">
{item.themeNameDisplay}{' '}
<Text color={Colors.Gray}>{item.themeTypeDisplay}</Text>
<Text color={theme.text.secondary}>
{item.themeTypeDisplay}
</Text>
</Text>
) : (
<Text color={textColor} wrap="truncate">
@ -222,8 +228,8 @@ export function RadioButtonSelect<T>({
<Text
color={
scrollOffset + maxItemsToShow < items.length
? Colors.Foreground
: Colors.Gray
? theme.text.primary
: theme.text.secondary
}
>
▼

30
packages/cli/src/ui/privacy/CloudFreePrivacyNotice.tsx
View File

@ -9,7 +9,7 @@ import { RadioButtonSelect } from '../components/shared/RadioButtonSelect.js';
import { usePrivacySettings } from '../hooks/usePrivacySettings.js';
import { CloudPaidPrivacyNotice } from './CloudPaidPrivacyNotice.js';
import { Config } from '@google/gemini-cli-core';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { useKeypress } from '../hooks/useKeypress.js';
interface CloudFreePrivacyNoticeProps {
@ -34,16 +34,16 @@ export const CloudFreePrivacyNotice = ({
);
if (privacyState.isLoading) {
return <Text color={Colors.Gray}>Loading...</Text>;
return <Text color={theme.text.secondary}>Loading...</Text>;
}
if (privacyState.error) {
return (
<Box flexDirection="column" marginY={1}>
<Text color={Colors.AccentRed}>
<Text color={theme.status.error}>
Error loading Opt-in settings: {privacyState.error}
</Text>
<Text color={Colors.Gray}>Press Esc to exit.</Text>
<Text color={theme.text.secondary}>Press Esc to exit.</Text>
</Box>
);
}
@ -59,17 +59,17 @@ export const CloudFreePrivacyNotice = ({
return (
<Box flexDirection="column" marginY={1}>
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
Gemini Code Assist for Individuals Privacy Notice
</Text>
<Newline />
<Text>
<Text color={theme.text.primary}>
This notice and our Privacy Policy
<Text color={Colors.AccentBlue}>[1]</Text> describe how Gemini Code
Assist handles your data. Please read them carefully.
<Text color={theme.text.link}>[1]</Text> describe how Gemini Code Assist
handles your data. Please read them carefully.
</Text>
<Newline />
<Text>
<Text color={theme.text.primary}>
When you use Gemini Code Assist for individuals with Gemini CLI, Google
collects your prompts, related code, generated output, code edits,
related feature usage information, and your feedback to provide,
@ -77,7 +77,7 @@ export const CloudFreePrivacyNotice = ({
technologies.
</Text>
<Newline />
<Text>
<Text color={theme.text.primary}>
To help with quality and improve our products (such as generative
machine-learning models), human reviewers may read, annotate, and
process the data collected above. We take steps to protect your privacy
@ -90,7 +90,7 @@ export const CloudFreePrivacyNotice = ({
</Text>
<Newline />
<Box flexDirection="column">
<Text>
<Text color={theme.text.primary}>
Allow Google to use this data to develop and improve our products?
</Text>
<RadioButtonSelect
@ -106,12 +106,14 @@ export const CloudFreePrivacyNotice = ({
/>
</Box>
<Newline />
<Text>
<Text color={Colors.AccentBlue}>[1]</Text>{' '}
<Text color={theme.text.primary}>
<Text color={theme.text.link}>[1]</Text>{' '}
https://policies.google.com/privacy
</Text>
<Newline />
<Text color={Colors.Gray}>Press Enter to choose an option and exit.</Text>
<Text color={theme.text.secondary}>
Press Enter to choose an option and exit.
</Text>
</Box>
);
};

20
packages/cli/src/ui/privacy/CloudPaidPrivacyNotice.tsx
View File

@ -5,7 +5,7 @@
*/
import { Box, Newline, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { useKeypress } from '../hooks/useKeypress.js';
interface CloudPaidPrivacyNoticeProps {
@ -26,14 +26,14 @@ export const CloudPaidPrivacyNotice = ({
return (
<Box flexDirection="column" marginBottom={1}>
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
Vertex AI Notice
</Text>
<Newline />
<Text>
Service Specific Terms<Text color={Colors.AccentBlue}>[1]</Text> are
<Text color={theme.text.primary}>
Service Specific Terms<Text color={theme.text.link}>[1]</Text> are
incorporated into the agreement under which Google has agreed to provide
Google Cloud Platform<Text color={Colors.AccentGreen}>[2]</Text> to
Google Cloud Platform<Text color={theme.status.success}>[2]</Text> to
Customer (the “Agreement”). If the Agreement authorizes the resale or
supply of Google Cloud Platform under a Google Cloud partner or reseller
program, then except for in the section entitled “Partner-Specific
@ -44,16 +44,16 @@ export const CloudPaidPrivacyNotice = ({
them in the Agreement.
</Text>
<Newline />
<Text>
<Text color={Colors.AccentBlue}>[1]</Text>{' '}
<Text color={theme.text.primary}>
<Text color={theme.text.link}>[1]</Text>{' '}
https://cloud.google.com/terms/service-terms
</Text>
<Text>
<Text color={Colors.AccentGreen}>[2]</Text>{' '}
<Text color={theme.text.primary}>
<Text color={theme.status.success}>[2]</Text>{' '}
https://cloud.google.com/terms/services
</Text>
<Newline />
<Text color={Colors.Gray}>Press Esc to exit.</Text>
<Text color={theme.text.secondary}>Press Esc to exit.</Text>
</Box>
);
};

34
packages/cli/src/ui/privacy/GeminiPrivacyNotice.tsx
View File

@ -5,7 +5,7 @@
*/
import { Box, Newline, Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { useKeypress } from '../hooks/useKeypress.js';
interface GeminiPrivacyNoticeProps {
@ -24,39 +24,39 @@ export const GeminiPrivacyNotice = ({ onExit }: GeminiPrivacyNoticeProps) => {
return (
<Box flexDirection="column" marginBottom={1}>
<Text bold color={Colors.AccentPurple}>
<Text bold color={theme.text.accent}>
Gemini API Key Notice
</Text>
<Newline />
<Text>
By using the Gemini API<Text color={Colors.AccentBlue}>[1]</Text>,
Google AI Studio
<Text color={Colors.AccentRed}>[2]</Text>, and the other Google
<Text color={theme.text.primary}>
By using the Gemini API<Text color={theme.text.link}>[1]</Text>, Google
AI Studio
<Text color={theme.status.error}>[2]</Text>, and the other Google
developer services that reference these terms (collectively, the
&quot;APIs&quot; or &quot;Services&quot;), you are agreeing to Google
APIs Terms of Service (the &quot;API Terms&quot;)
<Text color={Colors.AccentGreen}>[3]</Text>, and the Gemini API
<Text color={theme.status.success}>[3]</Text>, and the Gemini API
Additional Terms of Service (the &quot;Additional Terms&quot;)
<Text color={Colors.AccentPurple}>[4]</Text>.
<Text color={theme.text.accent}>[4]</Text>.
</Text>
<Newline />
<Text>
<Text color={Colors.AccentBlue}>[1]</Text>{' '}
<Text color={theme.text.primary}>
<Text color={theme.text.link}>[1]</Text>{' '}
https://ai.google.dev/docs/gemini_api_overview
</Text>
<Text>
<Text color={Colors.AccentRed}>[2]</Text> https://aistudio.google.com/
<Text color={theme.text.primary}>
<Text color={theme.status.error}>[2]</Text> https://aistudio.google.com/
</Text>
<Text>
<Text color={Colors.AccentGreen}>[3]</Text>{' '}
<Text color={theme.text.primary}>
<Text color={theme.status.success}>[3]</Text>{' '}
https://developers.google.com/terms
</Text>
<Text>
<Text color={Colors.AccentPurple}>[4]</Text>{' '}
<Text color={theme.text.primary}>
<Text color={theme.text.accent}>[4]</Text>{' '}
https://ai.google.dev/gemini-api/terms
</Text>
<Newline />
<Text color={Colors.Gray}>Press Esc to exit.</Text>
<Text color={theme.text.secondary}>Press Esc to exit.</Text>
</Box>
);
};

2
packages/cli/src/ui/themes/no-color.ts
View File

@ -43,8 +43,6 @@ const noColorSemanticColors: SemanticColors = {
focused: '',
},
ui: {
comment: '',
symbol: '',
gradient: [],
},
status: {

8
packages/cli/src/ui/themes/semantic-tokens.ts
View File

@ -25,8 +25,6 @@ export interface SemanticColors {
focused: string;
};
ui: {
comment: string;
symbol: string;
gradient: string[] | undefined;
};
status: {
@ -55,8 +53,6 @@ export const lightSemanticColors: SemanticColors = {
focused: lightTheme.AccentBlue,
},
ui: {
comment: lightTheme.Comment,
symbol: lightTheme.Gray,
gradient: lightTheme.GradientColors,
},
status: {
@ -85,8 +81,6 @@ export const darkSemanticColors: SemanticColors = {
focused: darkTheme.AccentBlue,
},
ui: {
comment: darkTheme.Comment,
symbol: darkTheme.Gray,
gradient: darkTheme.GradientColors,
},
status: {
@ -115,8 +109,6 @@ export const ansiSemanticColors: SemanticColors = {
focused: ansiTheme.AccentBlue,
},
ui: {
comment: ansiTheme.Comment,
symbol: ansiTheme.Gray,
gradient: ansiTheme.GradientColors,
},
status: {

4
packages/cli/src/ui/themes/theme.ts
View File

@ -235,7 +235,7 @@ export function createCustomTheme(customTheme: CustomTheme): Theme {
customTheme.background?.diff?.added ?? customTheme.DiffAdded ?? '',
DiffRemoved:
customTheme.background?.diff?.removed ?? customTheme.DiffRemoved ?? '',
Comment: customTheme.ui?.comment ?? customTheme.Comment ?? '',
Comment: customTheme.text?.secondary ?? customTheme.Comment ?? '',
Gray: customTheme.text?.secondary ?? customTheme.Gray ?? '',
GradientColors: customTheme.ui?.gradient ?? customTheme.GradientColors,
};
@ -397,8 +397,6 @@ export function createCustomTheme(customTheme: CustomTheme): Theme {
focused: colors.AccentBlue,
},
ui: {
comment: colors.Comment,
symbol: colors.Gray,
gradient: colors.GradientColors,
},
status: {

5
packages/cli/src/ui/utils/CodeColorizer.tsx
View File

@ -21,6 +21,7 @@ import {
MINIMUM_MAX_HEIGHT,
} from '../components/shared/MaxSizedBox.js';
import { LoadedSettings } from '../../config/settings.js';
import { theme as semanticTheme } from '../semantic-colors.js';
// Configure theming and parsing utilities.
const lowlight = createLowlight(common);
@ -171,7 +172,7 @@ export function colorizeCode(
return (
<Box key={index}>
{showLineNumbers && (
<Text color={activeTheme.colors.Gray}>
<Text color={semanticTheme.text.secondary}>
{`${String(index + 1 + hiddenLinesCount).padStart(
padWidth,
' ',
@ -208,7 +209,7 @@ export function colorizeCode(
{`${String(index + 1).padStart(padWidth, ' ')} `}
</Text>
)}
<Text color={activeTheme.colors.Gray}>{line}</Text>
<Text color={semanticTheme.text.secondary}>{line}</Text>
</Box>
))}
</MaxSizedBox>

38
packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Text } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import stringWidth from 'string-width';
// Constants for Markdown parsing
@ -31,7 +31,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
while ((match = inlineRegex.exec(text)) !== null) {
if (match.index > lastIndex) {
nodes.push(
<Text key={`t-${lastIndex}`}>
<Text key={`t-${lastIndex}`} color={theme.text.primary}>
{text.slice(lastIndex, match.index)}
</Text>,
);
@ -48,7 +48,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
fullMatch.length > BOLD_MARKER_LENGTH * 2
) {
renderedNode = (
<Text key={key} bold>
<Text key={key} bold color={theme.text.primary}>
{fullMatch.slice(BOLD_MARKER_LENGTH, -BOLD_MARKER_LENGTH)}
</Text>
);
@ -60,13 +60,13 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
!/\w/.test(
text.substring(inlineRegex.lastIndex, inlineRegex.lastIndex + 1),
) &&
!/\S[./\\]/.test(text.substring(match.index - 2, match.index)) &&
!/[./\\]\S/.test(
!/\S[./]/.test(text.substring(match.index - 2, match.index)) &&
!/[./]\S/.test(
text.substring(inlineRegex.lastIndex, inlineRegex.lastIndex + 2),
)
) {
renderedNode = (
<Text key={key} italic>
<Text key={key} italic color={theme.text.primary}>
{fullMatch.slice(ITALIC_MARKER_LENGTH, -ITALIC_MARKER_LENGTH)}
</Text>
);
@ -76,7 +76,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
fullMatch.length > STRIKETHROUGH_MARKER_LENGTH * 2
) {
renderedNode = (
<Text key={key} strikethrough>
<Text key={key} strikethrough color={theme.text.primary}>
{fullMatch.slice(
STRIKETHROUGH_MARKER_LENGTH,
-STRIKETHROUGH_MARKER_LENGTH,
@ -91,7 +91,7 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
const codeMatch = fullMatch.match(/^(`+)(.+?)\1$/s);
if (codeMatch && codeMatch[2]) {
renderedNode = (
<Text key={key} color={Colors.AccentPurple}>
<Text key={key} color={theme.text.accent}>
{codeMatch[2]}
</Text>
);
@ -106,9 +106,9 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
const linkText = linkMatch[1];
const url = linkMatch[2];
renderedNode = (
<Text key={key}>
<Text key={key} color={theme.text.primary}>
{linkText}
<Text color={Colors.AccentBlue}> ({url})</Text>
<Text color={theme.text.link}> ({url})</Text>
</Text>
);
}
@ -116,10 +116,10 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
fullMatch.startsWith('<u>') &&
fullMatch.endsWith('</u>') &&
fullMatch.length >
UNDERLINE_TAG_START_LENGTH + UNDERLINE_TAG_END_LENGTH - 1 // -1 because length is compared to combined length of start and end tags
UNDERLINE_TAG_START_LENGTH + UNDERLINE_TAG_END_LENGTH - 1
) {
renderedNode = (
<Text key={key} underline>
<Text key={key} underline color={theme.text.primary}>
{fullMatch.slice(
UNDERLINE_TAG_START_LENGTH,
-UNDERLINE_TAG_END_LENGTH,
@ -132,12 +132,22 @@ const RenderInlineInternal: React.FC<RenderInlineProps> = ({ text }) => {
renderedNode = null;
}
nodes.push(renderedNode ?? <Text key={key}>{fullMatch}</Text>);
nodes.push(
renderedNode ?? (
<Text key={key} color={theme.text.primary}>
{fullMatch}
</Text>
),
);
lastIndex = inlineRegex.lastIndex;
}
if (lastIndex < text.length) {
nodes.push(<Text key={`t-${lastIndex}`}>{text.slice(lastIndex)}</Text>);
nodes.push(
<Text key={`t-${lastIndex}`} color={theme.text.primary}>
{text.slice(lastIndex)}
</Text>,
);
}
return <>{nodes.filter((node) => node !== null)}</>;

28
packages/cli/src/ui/utils/MarkdownDisplay.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { colorizeCode } from './CodeColorizer.js';
import { TableRenderer } from './TableRenderer.js';
import { RenderInline } from './InlineMarkdownRenderer.js';
@ -115,7 +115,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
// Not a table, treat as regular text
addContentBlock(
<Box key={key}>
<Text wrap="wrap">
<Text wrap="wrap" color={theme.text.primary}>
<RenderInline text={line} />
</Text>
</Box>,
@ -154,7 +154,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
if (line.trim().length > 0) {
addContentBlock(
<Box key={key}>
<Text wrap="wrap">
<Text wrap="wrap" color={theme.text.primary}>
<RenderInline text={line} />
</Text>
</Box>,
@ -173,35 +173,35 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
switch (level) {
case 1:
headerNode = (
<Text bold color={Colors.AccentCyan}>
<Text bold color={theme.text.accent}>
<RenderInline text={headerText} />
</Text>
);
break;
case 2:
headerNode = (
<Text bold color={Colors.AccentBlue}>
<Text bold color={theme.text.link}>
<RenderInline text={headerText} />
</Text>
);
break;
case 3:
headerNode = (
<Text bold>
<Text bold color={theme.text.primary}>
<RenderInline text={headerText} />
</Text>
);
break;
case 4:
headerNode = (
<Text italic color={Colors.Gray}>
<Text italic color={theme.text.secondary}>
<RenderInline text={headerText} />
</Text>
);
break;
default:
headerNode = (
<Text>
<Text color={theme.text.primary}>
<RenderInline text={headerText} />
</Text>
);
@ -245,7 +245,7 @@ const MarkdownDisplayInternal: React.FC<MarkdownDisplayProps> = ({
} else {
addContentBlock(
<Box key={key}>
<Text wrap="wrap">
<Text wrap="wrap" color={theme.text.primary}>
<RenderInline text={line} />
</Text>
</Box>,
@ -314,7 +314,9 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
// Not enough space to even show the message meaningfully
return (
<Box paddingLeft={CODE_BLOCK_PREFIX_PADDING}>
<Text color={Colors.Gray}>... code is being written ...</Text>
<Text color={theme.text.secondary}>
... code is being written ...
</Text>
</Box>
);
}
@ -330,7 +332,7 @@ const RenderCodeBlockInternal: React.FC<RenderCodeBlockProps> = ({
return (
<Box paddingLeft={CODE_BLOCK_PREFIX_PADDING} flexDirection="column">
{colorizedTruncatedCode}
<Text color={Colors.Gray}>... generating more ...</Text>
<Text color={theme.text.secondary}>... generating more ...</Text>
</Box>
);
}
@ -383,10 +385,10 @@ const RenderListItemInternal: React.FC<RenderListItemProps> = ({
flexDirection="row"
>
<Box width={prefixWidth}>
<Text>{prefix}</Text>
<Text color={theme.text.accent}>{prefix}</Text>
</Box>
<Box flexGrow={LIST_ITEM_TEXT_FLEX_GROW}>
<Text wrap="wrap">
<Text wrap="wrap" color={theme.text.primary}>
<RenderInline text={itemText} />
</Text>
</Box>

10
packages/cli/src/ui/utils/TableRenderer.tsx
View File

@ -6,7 +6,7 @@
import React from 'react';
import { Text, Box } from 'ink';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
import { RenderInline, getPlainTextLength } from './InlineMarkdownRenderer.js';
interface TableRendererProps {
@ -87,9 +87,9 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
const paddingNeeded = Math.max(0, contentWidth - actualDisplayWidth);
return (
<Text>
<Text color={theme.text.primary}>
{isHeader ? (
<Text bold color={Colors.AccentCyan}>
<Text bold color={theme.text.accent}>
<RenderInline text={cellContent} />
</Text>
) : (
@ -112,7 +112,7 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
const borderParts = adjustedWidths.map((w) => char.horizontal.repeat(w));
const border = char.left + borderParts.join(char.middle) + char.right;
return <Text>{border}</Text>;
return <Text color={theme.text.primary}>{border}</Text>;
};
// Helper function to render a table row
@ -123,7 +123,7 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
});
return (
<Text>
<Text color={theme.text.primary}>
│{' '}
{renderedCells.map((cell, index) => (
<React.Fragment key={index}>

18
packages/cli/src/ui/utils/displayUtils.test.ts
View File

@ -14,7 +14,7 @@ import {
CACHE_EFFICIENCY_HIGH,
CACHE_EFFICIENCY_MEDIUM,
} from './displayUtils.js';
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
describe('displayUtils', () => {
describe('getStatusColor', () => {
@ -24,24 +24,24 @@ describe('displayUtils', () => {
};
it('should return green for values >= green threshold', () => {
expect(getStatusColor(90, thresholds)).toBe(Colors.AccentGreen);
expect(getStatusColor(80, thresholds)).toBe(Colors.AccentGreen);
expect(getStatusColor(90, thresholds)).toBe(theme.status.success);
expect(getStatusColor(80, thresholds)).toBe(theme.status.success);
});
it('should return yellow for values < green and >= yellow threshold', () => {
expect(getStatusColor(79, thresholds)).toBe(Colors.AccentYellow);
expect(getStatusColor(50, thresholds)).toBe(Colors.AccentYellow);
expect(getStatusColor(79, thresholds)).toBe(theme.status.warning);
expect(getStatusColor(50, thresholds)).toBe(theme.status.warning);
});
it('should return red for values < yellow threshold', () => {
expect(getStatusColor(49, thresholds)).toBe(Colors.AccentRed);
expect(getStatusColor(0, thresholds)).toBe(Colors.AccentRed);
expect(getStatusColor(49, thresholds)).toBe(theme.status.error);
expect(getStatusColor(0, thresholds)).toBe(theme.status.error);
});
it('should return defaultColor for values < yellow threshold when provided', () => {
expect(
getStatusColor(49, thresholds, { defaultColor: Colors.Foreground }),
).toBe(Colors.Foreground);
getStatusColor(49, thresholds, { defaultColor: theme.text.primary }),
).toBe(theme.text.primary);
});
});

8
packages/cli/src/ui/utils/displayUtils.ts
View File

@ -4,7 +4,7 @@
* SPDX-License-Identifier: Apache-2.0
*/
import { Colors } from '../colors.js';
import { theme } from '../semantic-colors.js';
// --- Thresholds ---
export const TOOL_SUCCESS_RATE_HIGH = 95;
@ -23,10 +23,10 @@ export const getStatusColor = (
options: { defaultColor?: string } = {},
) => {
if (value >= thresholds.green) {
return Colors.AccentGreen;
return theme.status.success;
}
if (value >= thresholds.yellow) {
return Colors.AccentYellow;
return theme.status.warning;
}
return options.defaultColor || Colors.AccentRed;
return options.defaultColor || theme.status.error;
};