blob: d620416ecdb75cd6da6c4fab54f7cefbceffbc45 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
/**
* @license
* Copyright 2025 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import React from 'react';
import { Box, Text } from 'ink';
import { Colors } from '../colors.js';
// --- Prop and Data Structures ---
export interface FormattedStats {
inputTokens: number;
outputTokens: number;
toolUseTokens: number;
thoughtsTokens: number;
cachedTokens: number;
totalTokens: number;
}
// --- Helper Components ---
/**
* Renders a single row with a colored label on the left and a value on the right.
*/
export const StatRow: React.FC<{
label: string;
value: string | number;
valueColor?: string;
}> = ({ label, value, valueColor }) => (
<Box justifyContent="space-between" gap={2}>
<Text color={Colors.LightBlue}>{label}</Text>
<Text color={valueColor}>{value}</Text>
</Box>
);
/**
* Renders a full column for either "Last Turn" or "Cumulative" stats.
*/
export const StatsColumn: React.FC<{
title: string;
stats: FormattedStats;
isCumulative?: boolean;
width?: string | number;
children?: React.ReactNode;
}> = ({ title, stats, isCumulative = false, width, children }) => {
const cachedDisplay =
isCumulative && stats.totalTokens > 0
? `${stats.cachedTokens.toLocaleString()} (${((stats.cachedTokens / stats.totalTokens) * 100).toFixed(1)}%)`
: stats.cachedTokens.toLocaleString();
const cachedColor =
isCumulative && stats.cachedTokens > 0 ? Colors.AccentGreen : undefined;
return (
<Box flexDirection="column" width={width}>
<Text bold>{title}</Text>
<Box marginTop={1} flexDirection="column">
{/* All StatRows below will now inherit the gap */}
<StatRow
label="Input Tokens"
value={stats.inputTokens.toLocaleString()}
/>
<StatRow
label="Output Tokens"
value={stats.outputTokens.toLocaleString()}
/>
{stats.toolUseTokens > 0 && (
<StatRow
label="Tool Use Tokens"
value={stats.toolUseTokens.toLocaleString()}
/>
)}
<StatRow
label="Thoughts Tokens"
value={stats.thoughtsTokens.toLocaleString()}
/>
{stats.cachedTokens > 0 && (
<StatRow
label="Cached Tokens"
value={cachedDisplay}
valueColor={cachedColor}
/>
)}
{/* Divider Line */}
<Box
borderTop={true}
borderLeft={false}
borderRight={false}
borderBottom={false}
borderStyle="single"
/>
<StatRow
label="Total Tokens"
value={stats.totalTokens.toLocaleString()}
/>
{children}
</Box>
</Box>
);
};
/**
* Renders a column for displaying duration information.
*/
export const DurationColumn: React.FC<{
apiTime: string;
wallTime: string;
}> = ({ apiTime, wallTime }) => (
<Box flexDirection="column" width={'48%'}>
<Text bold>Duration</Text>
<Box marginTop={1} flexDirection="column">
<StatRow label="API Time" value={apiTime} />
<StatRow label="Wall Time" value={wallTime} />
</Box>
</Box>
);
|
