summaryrefslogtreecommitdiff
path: root/packages/cli/src/ui/utils
diff options
context:
space:
mode:
Diffstat (limited to 'packages/cli/src/ui/utils')
-rw-r--r--packages/cli/src/ui/utils/CodeColorizer.tsx5
-rw-r--r--packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx38
-rw-r--r--packages/cli/src/ui/utils/MarkdownDisplay.tsx28
-rw-r--r--packages/cli/src/ui/utils/TableRenderer.tsx10
-rw-r--r--packages/cli/src/ui/utils/displayUtils.test.ts18
-rw-r--r--packages/cli/src/ui/utils/displayUtils.ts8
6 files changed, 60 insertions, 47 deletions
diff --git a/packages/cli/src/ui/utils/CodeColorizer.tsx b/packages/cli/src/ui/utils/CodeColorizer.tsx
index b183d556..047e7bae 100644
--- a/packages/cli/src/ui/utils/CodeColorizer.tsx
+++ b/packages/cli/src/ui/utils/CodeColorizer.tsx
@@ -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>
diff --git a/packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx b/packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx
index ff8d6257..28c47b83 100644
--- a/packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx
+++ b/packages/cli/src/ui/utils/InlineMarkdownRenderer.tsx
@@ -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)}</>;
diff --git a/packages/cli/src/ui/utils/MarkdownDisplay.tsx b/packages/cli/src/ui/utils/MarkdownDisplay.tsx
index 7568e1f8..d656dbc8 100644
--- a/packages/cli/src/ui/utils/MarkdownDisplay.tsx
+++ b/packages/cli/src/ui/utils/MarkdownDisplay.tsx
@@ -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>
diff --git a/packages/cli/src/ui/utils/TableRenderer.tsx b/packages/cli/src/ui/utils/TableRenderer.tsx
index 2ec19549..478a0893 100644
--- a/packages/cli/src/ui/utils/TableRenderer.tsx
+++ b/packages/cli/src/ui/utils/TableRenderer.tsx
@@ -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}>
diff --git a/packages/cli/src/ui/utils/displayUtils.test.ts b/packages/cli/src/ui/utils/displayUtils.test.ts
index 7dd9f0e8..64b0a727 100644
--- a/packages/cli/src/ui/utils/displayUtils.test.ts
+++ b/packages/cli/src/ui/utils/displayUtils.test.ts
@@ -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);
});
});
diff --git a/packages/cli/src/ui/utils/displayUtils.ts b/packages/cli/src/ui/utils/displayUtils.ts
index a52c6ff0..6f6c9209 100644
--- a/packages/cli/src/ui/utils/displayUtils.ts
+++ b/packages/cli/src/ui/utils/displayUtils.ts
@@ -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;
};
generated by cgit v1.2.3 (git 2.51.0) at 2025-11-26 01:39:03 +0000