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
60 changed files with 606 additions and 502 deletions

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>