From 17e3d80e869578c3441e7e2c60fca4a8313276a8 Mon Sep 17 00:00:00 2001
From: Nikolas Syring <nikolas@syringonline.de>
Date: Fri, 19 Dec 2025 13:06:58 +0100
Subject: [PATCH] feat: Add visual compact threshold indicators to context bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 frontend/src/components/StatusBar.jsx | 34 +++++++++++++++++++++++----
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/StatusBar.jsx b/frontend/src/components/StatusBar.jsx
index 327f3db..42e59d1 100644
--- a/frontend/src/components/StatusBar.jsx
+++ b/frontend/src/components/StatusBar.jsx
@@ -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}%