Skip to content

Commit eae247b

Browse files
DennisYu07DennisYu07
authored
fix: display (#2766)
1 parent 8ad9a5b commit eae247b

9 files changed

Lines changed: 97 additions & 8 deletions

File tree

‎packages/cli/src/i18n/locales/de.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1897,6 +1897,11 @@ export default {
18971897
// Context Usage Component
18981898
// ============================================================================
18991899
'Context Usage': 'Kontextnutzung',
1900+
'% used': '% verwendet',
1901+
'% context used': '% Kontext verwendet',
1902+
'Context exceeds limit! Use /compress or /clear to reduce.':
1903+
'Kontext überschreitet Limit! Verwenden Sie /compress oder /clear zum Reduzieren.',
1904+
'Use /compress or /clear': 'Verwenden Sie /compress oder /clear',
19001905
'No API response yet. Send a message to see actual usage.':
19011906
'Noch keine API-Antwort. Senden Sie eine Nachricht, um die tatsächliche Nutzung anzuzeigen.',
19021907
'Estimated pre-conversation overhead':

‎packages/cli/src/i18n/locales/en.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1947,6 +1947,11 @@ export default {
19471947
// Context Usage Component
19481948
// ============================================================================
19491949
'Context Usage': 'Context Usage',
1950+
'% used': '% used',
1951+
'% context used': '% context used',
1952+
'Context exceeds limit! Use /compress or /clear to reduce.':
1953+
'Context exceeds limit! Use /compress or /clear to reduce.',
1954+
'Use /compress or /clear': 'Use /compress or /clear',
19501955
'No API response yet. Send a message to see actual usage.':
19511956
'No API response yet. Send a message to see actual usage.',
19521957
'Estimated pre-conversation overhead': 'Estimated pre-conversation overhead',

‎packages/cli/src/i18n/locales/ja.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1395,6 +1395,11 @@ export default {
13951395
// Context Usage Component
13961396
// ============================================================================
13971397
'Context Usage': 'コンテキスト使用量',
1398+
'% used': '% 使用',
1399+
'% context used': '% コンテキスト使用',
1400+
'Context exceeds limit! Use /compress or /clear to reduce.':
1401+
'コンテキストが制限を超えています！/compress または /clear を使用して減らしてください。',
1402+
'Use /compress or /clear': '/compress または /clear を使用',
13981403
'No API response yet. Send a message to see actual usage.':
13991404
'API応答はありません。メッセージを送信して実際の使用量を確認してください。',
14001405
'Estimated pre-conversation overhead': '推定事前会話オーバーヘッド',

‎packages/cli/src/i18n/locales/pt.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1892,6 +1892,11 @@ export default {
18921892
// Context Usage Component
18931893
// ============================================================================
18941894
'Context Usage': 'Uso do Contexto',
1895+
'% used': '% usado',
1896+
'% context used': '% contexto usado',
1897+
'Context exceeds limit! Use /compress or /clear to reduce.':
1898+
'Contexto excede o limite! Use /compress ou /clear para reduzir.',
1899+
'Use /compress or /clear': 'Use /compress ou /clear',
18951900
'No API response yet. Send a message to see actual usage.':
18961901
'Ainda não há resposta da API. Envie uma mensagem para ver o uso real.',
18971902
'Estimated pre-conversation overhead': 'Sobrecarga estimada pré-conversa',

‎packages/cli/src/i18n/locales/ru.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1823,6 +1823,11 @@ export default {
18231823
// Context Usage Component
18241824
// ============================================================================
18251825
'Context Usage': 'Использование контекста',
1826+
'% used': '% использовано',
1827+
'% context used': '% контекста использовано',
1828+
'Context exceeds limit! Use /compress or /clear to reduce.':
1829+
'Контекст превышает лимит! Используйте /compress или /clear для уменьшения.',
1830+
'Use /compress or /clear': 'Используйте /compress или /clear',
18261831
'No API response yet. Send a message to see actual usage.':
18271832
'Пока нет ответа от API. Отправьте сообщение, чтобы увидеть фактическое использование.',
18281833
'Estimated pre-conversation overhead':

‎packages/cli/src/i18n/locales/zh.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1760,6 +1760,11 @@ export default {
17601760
// Context Usage
17611761
// ============================================================================
17621762
'Context Usage': '上下文使用情况',
1763+
'% used': '% 已用',
1764+
'% context used': '% 上下文已用',
1765+
'Context exceeds limit! Use /compress or /clear to reduce.':
1766+
'上下文超出限制！请使用 /compress 或 /clear 来减少上下文。',
1767+
'Use /compress or /clear': '使用 /compress 或 /clear',
17631768
'Context window': '上下文窗口',
17641769
Used: '已用',
17651770
Free: '空闲',

‎packages/cli/src/ui/components/ContextUsageDisplay.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,17 @@
66

77
import { Text } from 'ink';
88
import { theme } from '../semantic-colors.js';
9+
import { t } from '../../i18n/index.js';
10+
11+
/**
12+
* Format percentage for display, showing ">100" when exceeding limit.
13+
*/
14+
function formatPercentageUsed(percentage: number): string {
15+
if (percentage > 1) {
16+
return '>100';
17+
}
18+
return (percentage * 100).toFixed(1);
19+
}
920

1021
export const ContextUsageDisplay = ({
1122
promptTokenCount,
@@ -21,9 +32,22 @@ export const ContextUsageDisplay = ({
2132
}
2233

2334
const percentage = promptTokenCount / contextWindowSize;
24-
const percentageUsed = (percentage * 100).toFixed(1);
35+
const percentageUsed = formatPercentageUsed(percentage);
36+
const isOverLimit = percentage > 1;
37+
38+
const label = terminalWidth < 100 ? t('% used') : t('% context used');
2539

26-
const label = terminalWidth < 100 ? '% used' : '% context used';
40+
// Show warning when over limit
41+
if (isOverLimit) {
42+
return (
43+
<>
44+
<Text color={theme.status.error}>
45+
{percentageUsed}
46+
{label}
47+
</Text>
48+
</>
49+
);
50+
}
2751

2852
return (
2953
<Text color={theme.text.secondary}>

‎packages/cli/src/ui/components/views/ContextUsage.tsx‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,18 @@ const ProgressBar: React.FC<{
9090
);
9191
};
9292

93+
/**
94+
* Format percentage for display, showing ">100%" when exceeding limit.
95+
*/
96+
function formatPercentage(tokens: number, contextWindowSize: number): string {
97+
if (contextWindowSize <= 0) return '0.0';
98+
const percentage = (tokens / contextWindowSize) * 100;
99+
if (percentage > 100) {
100+
return '>100';
101+
}
102+
return percentage.toFixed(1);
103+
}
104+
93105
/**
94106
* A row showing a category with its token count and percentage.
95107
*/
@@ -99,9 +111,17 @@ const CategoryRow: React.FC<{
99111
tokens: number;
100112
contextWindowSize: number;
101113
symbolColor?: string;
102-
}> = ({ symbol, label, tokens, contextWindowSize, symbolColor }) => {
103-
const percentage = ((tokens / contextWindowSize) * 100).toFixed(1);
104-
const tokenStr = `${formatTokens(tokens)} ${t('tokens')} (${percentage}%)`;
114+
isOverLimit?: boolean;
115+
}> = ({
116+
symbol,
117+
label,
118+
tokens,
119+
contextWindowSize,
120+
symbolColor,
121+
isOverLimit,
122+
}) => {
123+
const percentageStr = formatPercentage(tokens, contextWindowSize);
124+
const tokenStr = `${formatTokens(tokens)} ${t('tokens')} (${percentageStr}%)`;
105125

106126
return (
107127
<Box width={CONTENT_WIDTH}>
@@ -112,7 +132,9 @@ const CategoryRow: React.FC<{
112132
<Text color={theme.text.primary}>{label}</Text>
113133
</Box>
114134
<Box flexGrow={1} justifyContent="flex-end">
115-
<Text color={theme.text.secondary}>{tokenStr}</Text>
135+
<Text color={isOverLimit ? theme.status.error : theme.text.secondary}>
136+
{tokenStr}
137+
</Text>
116138
</Box>
117139
</Box>
118140
);
@@ -158,6 +180,7 @@ export const ContextUsage: React.FC<ContextUsageProps> = ({
158180
}) => {
159181
const percentage =
160182
contextWindowSize > 0 ? (totalTokens / contextWindowSize) * 100 : 0;
183+
const isOverLimit = percentage > 100;
161184

162185
// Sort detail items by token count (descending) for better readability
163186
const sortedBuiltinTools = [...builtinTools].sort(
@@ -236,14 +259,23 @@ export const ContextUsage: React.FC<ContextUsageProps> = ({
236259
width={CONTENT_WIDTH}
237260
/>
238261
</Box>
262+
{/* Warning when context exceeds limit */}
263+
{isOverLimit && (
264+
<Box marginBottom={1}>
265+
<Text color={theme.status.error}>
266+
{t('Context exceeds limit! Use /compress or /clear to reduce.')}
267+
</Text>
268+
</Box>
269+
)}
239270
<Box height={1} />
240271
{/* Legend — same layout as CategoryRow for alignment */}
241272
<CategoryRow
242273
symbol={FILLED}
243274
label={t('Used')}
244275
tokens={totalTokens}
245276
contextWindowSize={contextWindowSize}
246-
symbolColor={theme.text.accent}
277+
symbolColor={isOverLimit ? theme.status.error : theme.text.accent}
278+
isOverLimit={isOverLimit}
247279
/>
248280
<CategoryRow
249281
symbol={EMPTY}

‎packages/web-templates/src/export-html/src/components/MetadataSidebar.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,10 @@ export const MetadataSidebar = ({ metadata }: MetadataSidebarProps) => (
4242
metadata.contextWindowSize !== undefined && (
4343
<MetadataItem
4444
label="Context"
45-
value={`${metadata.contextUsagePercent}% of ${formatTokenLimit(metadata.contextWindowSize)}`}
45+
value={`${metadata.contextUsagePercent > 100 ? '>100' : metadata.contextUsagePercent}% of ${formatTokenLimit(metadata.contextWindowSize)}`}
46+
valueClass={
47+
metadata.contextUsagePercent > 100 ? 'text-red' : undefined
48+
}
4649
/>
4750
)}
4851
{metadata.totalTokens !== undefined && (

0 commit comments

Comments
 (0)