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

feat: Add visual compact threshold indicators to context bar

Browse Source 
- Add red marker line at 78% showing auto-compact threshold
- Change bar color to orange at 70% usage (warning stage)
- Show pulsing warning icon at 77% (imminent compact)
- Add tooltip explaining auto-compact threshold

🤖 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-19 13:06:58 +01:00
parent 6df37b8a08
commit 17e3d80e86
1 changed files with 30 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
import { useState } from 'react';
import {
Coins, MessageSquare, Database, Zap, Loader2,
Brain, ShieldCheck, FileEdit, ChevronDown
Brain, ShieldCheck, FileEdit, ChevronDown, AlertTriangle
} from 'lucide-react';
// Permission mode definitions with display info
@@ -36,12 +36,18 @@ export function StatusBar({ sessionStats, isProcessing, connected, permissionMod
const contextRemaining = contextLeftPercent;
const contextUsedPercent = contextRemaining !== null ? (100 - contextRemaining) : 0;
// Compact threshold - auto-compact triggers at 78%
const COMPACT_THRESHOLD = 78;
const WARNING_THRESHOLD = 77;
const ORANGE_THRESHOLD = 70;
// Determine color based on usage (higher usage = more warning)
// Orange at 70%, then red stages approaching compact threshold
const getContextColor = (usedPercent) => {
if (usedPercent === null) return 'bg-dark-600';
if (usedPercent >= 95) return 'bg-red-500';
if (usedPercent >= 85) return 'bg-red-400';
if (usedPercent >= 70) return 'bg-yellow-400';
if (usedPercent >= ORANGE_THRESHOLD) return 'bg-orange-400';
if (usedPercent >= 50) return 'bg-yellow-300';
return 'bg-green-400';
};
@@ -50,10 +56,13 @@ export function StatusBar({ sessionStats, isProcessing, connected, permissionMod
if (usedPercent === null) return 'text-dark-500';
if (usedPercent >= 95) return 'text-red-400 font-medium animate-pulse';
if (usedPercent >= 85) return 'text-red-400';
if (usedPercent >= 70) return 'text-yellow-400';
if (usedPercent >= ORANGE_THRESHOLD) return 'text-orange-400';
return 'text-green-400';
};
// Show warning icon when approaching compact threshold
const showCompactWarning = contextUsedPercent >= WARNING_THRESHOLD;
// Format cost
const formatCost = (cost) => {
if (cost < 0.01) return `$${cost.toFixed(4)}`;
@@ -162,12 +171,29 @@ export function StatusBar({ sessionStats, isProcessing, connected, permissionMod
<Database className="w-3 h-3 text-dark-500" />
<div className="flex items-center gap-2">
{/* Progress bar container - fills up as context is used */}
<div className="w-24 h-2 bg-dark-700 rounded-full overflow-hidden" title={`${tokensUsed.toLocaleString()} / ${contextWindow.toLocaleString()} tokens used`}>
<div
className="relative w-24 h-2 bg-dark-700 rounded-full overflow-hidden"
title={`${tokensUsed.toLocaleString()} / ${contextWindow.toLocaleString()} tokens used\nAuto-compact at ${COMPACT_THRESHOLD}%`}
>
{/* Progress fill */}
<div
className={`h-full transition-all duration-300 ${getContextColor(contextUsedPercent)}`}
style={{ width: `${contextUsedPercent}%` }}
/>
{/* Compact threshold marker at 78% */}
<div
className="absolute top-0 bottom-0 w-0.5 bg-red-500/70"
style={{ left: `${COMPACT_THRESHOLD}%` }}
title={`Auto-compact at ${COMPACT_THRESHOLD}%`}
/>
</div>
{/* Warning icon when approaching compact threshold */}
{showCompactWarning && (
<AlertTriangle
className="w-3 h-3 text-orange-400 animate-pulse"
title="Approaching auto-compact threshold"
/>
)}
{/* Percentage text - shows how full the context is */}
<span className={`min-w-[45px] text-right ${getContextTextColor(contextUsedPercent)}`}>
{contextUsedPercent}%