tiennm99/ccstatusline
1
0
Fork 0
mirror of https://github.com/tiennm99/ccstatusline.git synced 2026-07-20 06:18:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add remaining mode to context % widgets (#83)

Browse Source
This commit is contained in:
Jake Nelson
2025-09-17 22:34:41 -04:00
committed by GitHub
parent 3bc8e225f4
commit 2ecaf023b7
2 changed files with 80 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/widgets/ContextPercentage.ts
+40 -5
View File
@@ -1,6 +1,7 @@
import type { RenderContext } from '../types/RenderContext';
import type { Settings } from '../types/Settings';
import type {
CustomKeybind,
Widget,
WidgetEditorDisplay,
WidgetItem
@@ -8,22 +9,56 @@ import type {
export class ContextPercentageWidget implements Widget {
getDefaultColor(): string { return 'blue'; }
getDescription(): string { return 'Shows percentage of context window used (of 200k tokens)'; }
getDescription(): string { return 'Shows percentage of context window used or remaining (of 200k tokens)'; }
getDisplayName(): string { return 'Context %'; }
getEditorDisplay(item: WidgetItem): WidgetEditorDisplay {
return { displayText: this.getDisplayName() };
const isInverse = item.metadata?.inverse === 'true';
const modifiers: string[] = [];
if (isInverse) {
modifiers.push('remaining');
}
return {
displayText: this.getDisplayName(),
modifierText: modifiers.length > 0 ? `(${modifiers.join(', ')})` : undefined
};
}
handleEditorAction(action: string, item: WidgetItem): WidgetItem | null {
if (action === 'toggle-inverse') {
const currentState = item.metadata?.inverse === 'true';
return {
...item,
metadata: {
...item.metadata,
inverse: (!currentState).toString()
}
};
}
return null;
}
render(item: WidgetItem, context: RenderContext, settings: Settings): string | null {
const isInverse = item.metadata?.inverse === 'true';
if (context.isPreview) {
return item.rawValue ? '9.3%' : 'Ctx: 9.3%';
const previewValue = isInverse ? '90.7%' : '9.3%';
return item.rawValue ? previewValue : `Ctx: ${previewValue}`;
} else if (context.tokenMetrics) {
const percentage = Math.min(100, (context.tokenMetrics.contextLength / 200000) * 100);
return item.rawValue ? `${percentage.toFixed(1)}%` : `Ctx: ${percentage.toFixed(1)}%`;
const usedPercentage = Math.min(100, (context.tokenMetrics.contextLength / 200000) * 100);
const displayPercentage = isInverse ? (100 - usedPercentage) : usedPercentage;
return item.rawValue ? `${displayPercentage.toFixed(1)}%` : `Ctx: ${displayPercentage.toFixed(1)}%`;
}
return null;
}
getCustomKeybinds(): CustomKeybind[] {
return [
{ key: 'l', label: '(l)eft/remaining', action: 'toggle-inverse' }
];
}
supportsRawValue(): boolean { return true; }
supportsColors(item: WidgetItem): boolean { return true; }
}
src/widgets/ContextPercentageUsable.ts
+40 -5
View File
@@ -1,6 +1,7 @@
import type { RenderContext } from '../types/RenderContext';
import type { Settings } from '../types/Settings';
import type {
CustomKeybind,
Widget,
WidgetEditorDisplay,
WidgetItem
@@ -8,22 +9,56 @@ import type {
export class ContextPercentageUsableWidget implements Widget {
getDefaultColor(): string { return 'green'; }
getDescription(): string { return 'Shows percentage of usable context window used (of 160k tokens before auto-compact)'; }
getDescription(): string { return 'Shows percentage of usable context window used or remaining (of 160k tokens before auto-compact)'; }
getDisplayName(): string { return 'Context % (usable)'; }
getEditorDisplay(item: WidgetItem): WidgetEditorDisplay {
return { displayText: this.getDisplayName() };
const isInverse = item.metadata?.inverse === 'true';
const modifiers: string[] = [];
if (isInverse) {
modifiers.push('remaining');
}
return {
displayText: this.getDisplayName(),
modifierText: modifiers.length > 0 ? `(${modifiers.join(', ')})` : undefined
};
}
handleEditorAction(action: string, item: WidgetItem): WidgetItem | null {
if (action === 'toggle-inverse') {
const currentState = item.metadata?.inverse === 'true';
return {
...item,
metadata: {
...item.metadata,
inverse: (!currentState).toString()
}
};
}
return null;
}
render(item: WidgetItem, context: RenderContext, settings: Settings): string | null {
const isInverse = item.metadata?.inverse === 'true';
if (context.isPreview) {
return item.rawValue ? '11.6%' : 'Ctx(u): 11.6%';
const previewValue = isInverse ? '88.4%' : '11.6%';
return item.rawValue ? previewValue : `Ctx(u): ${previewValue}`;
} else if (context.tokenMetrics) {
const percentage = Math.min(100, (context.tokenMetrics.contextLength / 160000) * 100);
return item.rawValue ? `${percentage.toFixed(1)}%` : `Ctx(u): ${percentage.toFixed(1)}%`;
const usedPercentage = Math.min(100, (context.tokenMetrics.contextLength / 160000) * 100);
const displayPercentage = isInverse ? (100 - usedPercentage) : usedPercentage;
return item.rawValue ? `${displayPercentage.toFixed(1)}%` : `Ctx(u): ${displayPercentage.toFixed(1)}%`;
}
return null;
}
getCustomKeybinds(): CustomKeybind[] {
return [
{ key: 'l', label: '(l)eft/remaining', action: 'toggle-inverse' }
];
}
supportsRawValue(): boolean { return true; }
supportsColors(item: WidgetItem): boolean { return true; }
}