niko/claude-web-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Simplify context display to use Claude's reported value

Browse Source 
Remove broken token-based context calculation. The StatusBar now only
shows context remaining when Claude reports "Context left until
auto-compact: X%" - which happens when context is actually getting low.

This eliminates confusing/incorrect percentages and only shows relevant
information when needed.

TODO: Test this in a long session to verify the context warning appears
when Claude reports it.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Support
2025-12-18 09:24:51 +01:00
parent a91ba61dd8
commit a3fcc3cb7f
2 changed files with 56 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/components/StatusBar.jsx
View File

@@ -23,6 +23,7 @@ export function StatusBar({ sessionStats, isProcessing, connected, permissionMod
cacheCreationTokens = 0,
numTurns = 0,
contextWindow = 200000,
contextLeftPercent = null, // From Claude's "Context left until auto-compact: X%" message
isCompacting = false,
} = sessionStats || {};
@@ -30,12 +31,9 @@ export function StatusBar({ sessionStats, isProcessing, connected, permissionMod
const currentMode = PERMISSION_MODES.find(m => m.value === permissionMode) || PERMISSION_MODES[0];
const ModeIcon = currentMode.icon;
// Calculate context usage
// inputTokens from modelUsage represents tokens in current context (including cache reads)
// contextWindow is the model's max context size (e.g., 200000 for opus)
const contextUsed = inputTokens + outputTokens;
const contextPercent = contextWindow > 0 ? Math.min(100, (contextUsed / contextWindow) * 100) : 0;
const contextRemaining = Math.max(0, 100 - contextPercent);
// Context remaining: Use Claude's reported value if available, otherwise don't show
// Claude only reports this when context is getting low (< ~15%)
const contextRemaining = contextLeftPercent;
// Format cost
const formatCost = (cost) => {
@@ -139,43 +137,19 @@ export function StatusBar({ sessionStats, isProcessing, connected, permissionMod
{/* Right side: Token usage */}
<div className="flex items-center gap-4">
{/* Token counts */}
{contextUsed > 0 && (
<div className="flex items-center gap-3 text-dark-400">
<span className="flex items-center gap-1">
<span className="text-dark-500">In:</span>
<span className="text-cyan-400">{formatTokens(inputTokens)}</span>
</span>
<span className="flex items-center gap-1">
<span className="text-dark-500">Out:</span>
<span className="text-green-400">{formatTokens(outputTokens)}</span>
</span>
{cacheReadTokens > 0 && (
<span className="flex items-center gap-1">
<Database className="w-3 h-3 text-purple-400" />
<span className="text-purple-400">{formatTokens(cacheReadTokens)}</span>
</span>
)}
</div>
)}
{/* Context status - shows remaining context percentage */}
<div className="flex items-center gap-2">
<span className="text-dark-500">Context:</span>
{contextUsed > 0 ? (
{/* Context status - only shown when Claude reports it (context getting low) */}
{contextRemaining !== null && (
<div className="flex items-center gap-2">
<span className="text-dark-500">Context:</span>
<span className={`${
contextRemaining <= 5 ? 'text-red-400 font-medium animate-pulse' :
contextRemaining <= 15 ? 'text-red-400' :
contextRemaining <= 30 ? 'text-yellow-400' : 'text-green-400'
}`}>
{contextRemaining <= 30
? `${contextRemaining.toFixed(0)}% left`
: `${contextPercent.toFixed(0)}% used`}
{contextRemaining}% left
</span>
) : (
<span className="text-green-400">ok</span>
)}
</div>
</div>
)}
</div>
</div>
</div>