From 84c8e24457334417c6c14a0e35557dc9a09e8e81 Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Wed, 11 Feb 2026 20:15:31 +0000
Subject: [PATCH] style: unify token progress bars with subtle cyan opacity
 ramp

Replace the disparate gradient/orange/red color scheme with a single
soft sky-blue (rgb 56,189,248) that subtly intensifies as usage grows.
Opacity ramps from 0.35 at low usage to 1.0 at full context.
Applies to both sidebar session bars and header token bar.
---
 src/components/Header.tsx  | 5 +++--
 src/components/Sidebar.tsx | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index f3cd3d7..698e3fc 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -66,11 +66,12 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData,
         const total = activeSessionData?.totalTokens || 0;
         if (!ctx) return null;
         const pct = Math.min(100, (total / ctx) * 100);
-        const barColor = pct > 95 ? 'bg-red-500' : pct > 80 ? 'bg-amber-500' : 'bg-gradient-to-r from-cyan-400 to-violet-500';
+        const opacity = Math.max(0.35, Math.min(1, pct / 100));
+        const barStyle = { width: `${pct}%`, backgroundColor: `rgba(56, 189, 248, ${opacity})` };
         return (
           <div className="px-4 py-1.5 bg-[#232329]/60 border-b border-white/8 flex items-center gap-3">
             <div className="flex-1 h-[5px] rounded-full bg-white/5 overflow-hidden">
-              <div className={`h-full rounded-full transition-all duration-500 ${barColor}`} style={{ width: `${pct}%` }} />
+              <div className="h-full rounded-full transition-all duration-500" style={barStyle} />
             </div>
             <span className="text-[11px] text-zinc-400 tabular-nums shrink-0 whitespace-nowrap">
               {(total / 1000).toFixed(1)}k / {(ctx / 1000).toFixed(0)}k tokens
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 8ecc652..8cd34a0 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -120,11 +120,12 @@ export function Sidebar({ sessions, activeSession, onSwitch, open, onClose }: Pr
                   {(() => {
                     if (!s.contextTokens) return null;
                     const pct = Math.min(100, ((s.totalTokens || 0) / s.contextTokens) * 100);
-                    const barColor = pct > 95 ? 'bg-red-500' : pct > 80 ? 'bg-amber-500' : 'bg-gradient-to-r from-cyan-400 to-violet-500';
+                    const barOpacity = Math.max(0.35, Math.min(1, pct / 100));
+                    const barStyle = { width: `${pct}%`, backgroundColor: `rgba(56, 189, 248, ${barOpacity})` };
                     return (
                       <div className="flex items-center gap-1.5 mt-1">
                         <div className="flex-1 h-[3px] rounded-full bg-white/5 overflow-hidden">
-                          <div className={`h-full rounded-full ${barColor}`} style={{ width: `${pct}%` }} />
+                          <div className="h-full rounded-full" style={barStyle} />
                         </div>
                         <span className="text-[9px] text-zinc-500 tabular-nums shrink-0">{Math.round(pct)}%</span>
                       </div>