diff options
Diffstat (limited to 'packages/cli/src/ui/components/ToolStatsDisplay.tsx')
| -rw-r--r-- | packages/cli/src/ui/components/ToolStatsDisplay.tsx | 61 |
1 files changed, 38 insertions, 23 deletions
diff --git a/packages/cli/src/ui/components/ToolStatsDisplay.tsx b/packages/cli/src/ui/components/ToolStatsDisplay.tsx index f2335d9e..4bcee9fc 100644 --- a/packages/cli/src/ui/components/ToolStatsDisplay.tsx +++ b/packages/cli/src/ui/components/ToolStatsDisplay.tsx @@ -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> |