Skip to content

Commit 98f2d5a

Browse files
tifojitifoji
committed
Refactor: Update live rendering to use shared token utilities
- Import getTotalTokens from shared _token-utils.ts - Remove duplicate helper function - Fix alignment issues by using consistent token counting - Maintain consistent live display behavior
1 parent fba95f4 commit 98f2d5a

File tree

1 file changed

+45
-58
lines changed

1 file changed

+45
-58
lines changed

‎src/_live-rendering.ts‎

Lines changed: 45 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import prettyMs from 'pretty-ms';
1616
import stringWidth from 'string-width';
1717
import { calculateBurnRate, projectBlockUsage } from './_session-blocks.ts';
1818
import { centerText, createProgressBar } from './_terminal-utils.ts';
19+
import { getTotalTokens } from './_token-utils.ts';
1920
import { formatCurrency, formatModelsDisplay, formatNumber } from './_utils.ts';
2021

2122
/**
@@ -30,20 +31,6 @@ export type LiveMonitoringConfig = {
3031
order: SortOrder;
3132
};
3233

33-
/**
34-
* Helper function to calculate total tokens including cache tokens
35-
* @param tokenCounts - Token counts from SessionBlock
36-
* @returns Total number of tokens
37-
*/
38-
function getTotalTokens(tokenCounts: SessionBlock['tokenCounts']): number {
39-
return (
40-
tokenCounts.inputTokens
41-
+ tokenCounts.outputTokens
42-
+ tokenCounts.cacheCreationInputTokens
43-
+ tokenCounts.cacheReadInputTokens
44-
);
45-
}
46-
4734
/**
4835
* Delay with AbortSignal support and graceful error handling
4936
*/
@@ -172,7 +159,7 @@ export function renderLiveDisplay(terminal: TerminalManager, block: SessionBlock
172159
const pad1 = ' '.repeat(Math.max(0, DETAIL_COLUMN_WIDTHS.col1 - col1Visible));
173160
const pad2 = ' '.repeat(Math.max(0, DETAIL_COLUMN_WIDTHS.col2 - col2Visible));
174161
const sessionDetails = ` ${col1}${pad1}${pad2}${col3}`;
175-
const sessionDetailsPadded = sessionDetails + ' '.repeat(Math.max(0, boxWidth - 3 - stringWidth(sessionDetails)));
162+
const sessionDetailsPadded = sessionDetails + ' '.repeat(Math.max(0, boxWidth - 2 - stringWidth(sessionDetails)));
176163
terminal.write(`${marginStr}│ ${sessionDetailsPadded}│\n`);
177164
terminal.write(`${marginStr}│${' '.repeat(boxWidth - 2)}│\n`);
178165
terminal.write(`${marginStr}├${'─'.repeat(boxWidth - 2)}┤\n`);
@@ -195,17 +182,17 @@ export function renderLiveDisplay(terminal: TerminalManager, block: SessionBlock
195182
// Create colored progress bar
196183
const usageBar = config.tokenLimit != null && config.tokenLimit > 0
197184
? createProgressBar(
198-
totalTokens,
199-
config.tokenLimit,
200-
barWidth,
201-
{
202-
showPercentage: false,
203-
fillChar: barColor('█'),
204-
emptyChar: pc.gray('░'),
205-
leftBracket: '[',
206-
rightBracket: ']',
207-
},
208-
)
185+
totalTokens,
186+
config.tokenLimit,
187+
barWidth,
188+
{
189+
showPercentage: false,
190+
fillChar: barColor('█'),
191+
emptyChar: pc.gray('░'),
192+
leftBracket: '[',
193+
rightBracket: ']',
194+
},
195+
)
209196
: `[${pc.green('█'.repeat(Math.floor(barWidth * 0.1)))}${pc.gray('░'.repeat(barWidth - Math.floor(barWidth * 0.1)))}]`;
210197

211198
// Burn rate with better formatting
@@ -226,20 +213,20 @@ export function renderLiveDisplay(terminal: TerminalManager, block: SessionBlock
226213
// This creates immutable values based on the condition, improving code clarity
227214
const { usageBarStr, usageCol1, usageCol2, usageCol3 } = config.tokenLimit != null && config.tokenLimit > 0
228215
? {
229-
usageBarStr: `${usageLabel}${''.padEnd(Math.max(0, labelWidth - usageLabelWidth))} ${usageBar} ${tokenPercent.toFixed(1).padStart(6)}% (${formatTokensShort(totalTokens)}/${formatTokensShort(config.tokenLimit)})`,
230-
usageCol1: `${pc.gray('Tokens:')} ${formatNumber(totalTokens)} (${rateDisplay})`,
231-
usageCol2: `${pc.gray('Limit:')} ${formatNumber(config.tokenLimit)} tokens`,
232-
usageCol3: `${pc.gray('Cost:')} ${formatCurrency(block.costUSD)}`,
233-
}
216+
usageBarStr: `${usageLabel}${''.padEnd(Math.max(0, labelWidth - usageLabelWidth))} ${usageBar} ${tokenPercent.toFixed(1).padStart(6)}% (${formatTokensShort(totalTokens)}/${formatTokensShort(config.tokenLimit)})`,
217+
usageCol1: `${pc.gray('Tokens:')} ${formatNumber(totalTokens)} (${rateDisplay})`,
218+
usageCol2: `${pc.gray('Limit:')} ${formatNumber(config.tokenLimit)} tokens`,
219+
usageCol3: `${pc.gray('Cost:')} ${formatCurrency(block.costUSD)}`,
220+
}
234221
: {
235-
usageBarStr: `${usageLabel}${''.padEnd(Math.max(0, labelWidth - usageLabelWidth))} ${usageBar} (${formatTokensShort(totalTokens)} tokens)`,
236-
usageCol1: `${pc.gray('Tokens:')} ${formatNumber(totalTokens)} (${rateDisplay})`,
237-
usageCol2: '',
238-
usageCol3: `${pc.gray('Cost:')} ${formatCurrency(block.costUSD)}`,
239-
};
222+
usageBarStr: `${usageLabel}${''.padEnd(Math.max(0, labelWidth - usageLabelWidth))} ${usageBar} (${formatTokensShort(totalTokens)} tokens)`,
223+
usageCol1: `${pc.gray('Tokens:')} ${formatNumber(totalTokens)} (${rateDisplay})`,
224+
usageCol2: '',
225+
usageCol3: `${pc.gray('Cost:')} ${formatCurrency(block.costUSD)}`,
226+
};
240227

241228
// Render usage bar
242-
const usageBarPadded = usageBarStr + ' '.repeat(Math.max(0, boxWidth - 3 - stringWidth(usageBarStr)));
229+
const usageBarPadded = usageBarStr + ' '.repeat(Math.max(0, boxWidth - 2 - stringWidth(usageBarStr)));
243230
terminal.write(`${marginStr}│ ${usageBarPadded}│\n`);
244231

245232
// Render usage details (indented and aligned)
@@ -248,7 +235,7 @@ export function renderLiveDisplay(terminal: TerminalManager, block: SessionBlock
248235
const usagePad1 = ' '.repeat(Math.max(0, DETAIL_COLUMN_WIDTHS.col1 - usageCol1Visible));
249236
const usagePad2 = usageCol2.length > 0 ? ' '.repeat(Math.max(0, DETAIL_COLUMN_WIDTHS.col2 - usageCol2Visible)) : ' '.repeat(DETAIL_COLUMN_WIDTHS.col2);
250237
const usageDetails = ` ${usageCol1}${usagePad1}${usageCol2}${usagePad2}${usageCol3}`;
251-
const usageDetailsPadded = usageDetails + ' '.repeat(Math.max(0, boxWidth - 3 - stringWidth(usageDetails)));
238+
const usageDetailsPadded = usageDetails + ' '.repeat(Math.max(0, boxWidth - 2 - stringWidth(usageDetails)));
252239
terminal.write(`${marginStr}│ ${usageDetailsPadded}│\n`);
253240

254241
terminal.write(`${marginStr}│${' '.repeat(boxWidth - 2)}│\n`);
@@ -274,33 +261,33 @@ export function renderLiveDisplay(terminal: TerminalManager, block: SessionBlock
274261
// Create projection bar
275262
const projectionBar = config.tokenLimit != null && config.tokenLimit > 0
276263
? createProgressBar(
277-
projection.totalTokens,
278-
config.tokenLimit,
279-
barWidth,
280-
{
281-
showPercentage: false,
282-
fillChar: projBarColor('█'),
283-
emptyChar: pc.gray('░'),
284-
leftBracket: '[',
285-
rightBracket: ']',
286-
},
287-
)
264+
projection.totalTokens,
265+
config.tokenLimit,
266+
barWidth,
267+
{
268+
showPercentage: false,
269+
fillChar: projBarColor('█'),
270+
emptyChar: pc.gray('░'),
271+
leftBracket: '[',
272+
rightBracket: ']',
273+
},
274+
)
288275
: `[${pc.green('█'.repeat(Math.floor(barWidth * 0.15)))}${pc.gray('░'.repeat(barWidth - Math.floor(barWidth * 0.15)))}]`;
289276

290277
const limitStatus = config.tokenLimit != null && config.tokenLimit > 0
291278
? (projectedPercent > 100
292-
? pc.red('❌ WILL EXCEED LIMIT')
293-
: projectedPercent > 80
294-
? pc.yellow('⚠️ APPROACHING LIMIT')
295-
: pc.green('✓ WITHIN LIMIT'))
279+
? pc.red('❌ WILL EXCEED LIMIT')
280+
: projectedPercent > 80
281+
? pc.yellow('⚠️ APPROACHING LIMIT')
282+
: pc.green('✓ WITHIN LIMIT'))
296283
: pc.green('✓ ON TRACK');
297284

298285
// Projection section
299286
const projLabel = pc.bold('📈 PROJECTION');
300287
const projLabelWidth = stringWidth(projLabel);
301288
if (config.tokenLimit != null && config.tokenLimit > 0) {
302289
const projBarStr = `${projLabel}${''.padEnd(Math.max(0, labelWidth - projLabelWidth))} ${projectionBar} ${projectedPercent.toFixed(1).padStart(6)}% (${formatTokensShort(projection.totalTokens)}/${formatTokensShort(config.tokenLimit)})`;
303-
const projBarPadded = projBarStr + ' '.repeat(Math.max(0, boxWidth - 3 - stringWidth(projBarStr)));
290+
const projBarPadded = projBarStr + ' '.repeat(Math.max(0, boxWidth - 2 - stringWidth(projBarStr)));
304291
terminal.write(`${marginStr}│ ${projBarPadded}│\n`);
305292

306293
// Projection details (indented and aligned)
@@ -314,12 +301,12 @@ export function renderLiveDisplay(terminal: TerminalManager, block: SessionBlock
314301
const pad1 = ' '.repeat(Math.max(0, DETAIL_COLUMN_WIDTHS.col1 - col1Visible));
315302
const pad2 = ' '.repeat(Math.max(0, DETAIL_COLUMN_WIDTHS.col2 - col2Visible));
316303
const projDetails = ` ${col1}${pad1}${col2}${pad2}${col3}`;
317-
const projDetailsPadded = projDetails + ' '.repeat(Math.max(0, boxWidth - 3 - stringWidth(projDetails)));
304+
const projDetailsPadded = projDetails + ' '.repeat(Math.max(0, boxWidth - 2 - stringWidth(projDetails)));
318305
terminal.write(`${marginStr}│ ${projDetailsPadded}│\n`);
319306
}
320307
else {
321308
const projBarStr = `${projLabel}${''.padEnd(Math.max(0, labelWidth - projLabelWidth))} ${projectionBar} (${formatTokensShort(projection.totalTokens)} tokens)`;
322-
const projBarPadded = projBarStr + ' '.repeat(Math.max(0, boxWidth - 3 - stringWidth(projBarStr)));
309+
const projBarPadded = projBarStr + ' '.repeat(Math.max(0, boxWidth - 2 - stringWidth(projBarStr)));
323310
terminal.write(`${marginStr}│ ${projBarPadded}│\n`);
324311

325312
// Projection details (indented)
@@ -333,7 +320,7 @@ export function renderLiveDisplay(terminal: TerminalManager, block: SessionBlock
333320
const pad1 = ' '.repeat(Math.max(0, DETAIL_COLUMN_WIDTHS.col1 - col1Visible));
334321
const pad2 = ' '.repeat(Math.max(0, DETAIL_COLUMN_WIDTHS.col2 - col2Visible));
335322
const projDetails = ` ${col1}${pad1}${col2}${pad2}${col3}`;
336-
const projDetailsPadded = projDetails + ' '.repeat(Math.max(0, boxWidth - 3 - stringWidth(projDetails)));
323+
const projDetailsPadded = projDetails + ' '.repeat(Math.max(0, boxWidth - 2 - stringWidth(projDetails)));
337324
terminal.write(`${marginStr}│ ${projDetailsPadded}│\n`);
338325
}
339326

@@ -433,4 +420,4 @@ if (import.meta.vitest != null) {
433420
.toThrow('This operation was aborted');
434421
});
435422
});
436-
}
423+
}

0 commit comments

Comments
 (0)