From 1465ae1887ece7a3dd54ca36c6ad5677eb2c37bd Mon Sep 17 00:00:00 2001
From: Nicolas Varrot <contact@nicolasvarrot.fr>
Date: Thu, 12 Feb 2026 12:25:17 +0000
Subject: [PATCH] style: move model badge from header to token progress bar
 area

---
 FEEDBACK.md               | 11 +++++++++++
 src/components/Header.tsx | 16 +++++++---------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/FEEDBACK.md b/FEEDBACK.md
index 4318564..455c5f4 100644
--- a/FEEDBACK.md
+++ b/FEEDBACK.md
@@ -209,3 +209,14 @@
   - If the gateway doesn't expose this info via WebSocket, check if there's another endpoint or if it can be inferred from the session key
   - Keep it subtle/non-intrusive — small text or an info icon that reveals details on hover
   - This helps users know which agent/model is handling their conversation
+
+## Item #25
+- **Date:** 2026-02-12
+- **Priority:** high
+- **Status:** pending
+- **Description:** Move model badge from header to left of token progress bar
+- **Details:**
+  - Currently the model chip is in the navbar/header — too cramped on mobile
+  - Move it to the left of the token usage progress bar instead
+  - Should be subtle, same style as surrounding elements
+  - Remove it from the header entirely
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 03fbff0..fd462f3 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -30,15 +30,7 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData,
             <span className="font-semibold text-zinc-300 text-sm tracking-wide">{t('header.title')}</span>
             <Sparkles className="h-3.5 w-3.5 text-cyan-300/60" />
           </div>
-          <div className="flex items-center gap-2 min-w-0">
-            <span className="text-xs text-zinc-500 truncate">{sessionLabel}</span>
-            {activeSessionData?.model && (
-              <span className="inline-flex items-center gap-1 text-[10px] text-zinc-500 bg-white/5 rounded-full px-2 py-0.5 shrink-0" title={`Model: ${activeSessionData.model}${activeSessionData.agentId ? ` · Agent: ${activeSessionData.agentId}` : ''}`}>
-                <Cpu className="h-2.5 w-2.5" />
-                <span className="truncate max-w-[120px]">{activeSessionData.model.replace(/^.*\//, '')}</span>
-              </span>
-            )}
-          </div>
+          <span className="text-xs text-zinc-500 truncate">{sessionLabel}</span>
         </div>
       </div>
       <div className="flex items-center gap-2 text-sm">
@@ -90,6 +82,12 @@ export function Header({ status, sessionKey, onToggleSidebar, activeSessionData,
         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">
+            {activeSessionData?.model && (
+              <span className="inline-flex items-center gap-1 text-[10px] text-zinc-500 shrink-0" title={`Model: ${activeSessionData.model}${activeSessionData.agentId ? ` · Agent: ${activeSessionData.agentId}` : ''}`}>
+                <Cpu className="h-2.5 w-2.5" />
+                <span className="truncate max-w-[120px]">{activeSessionData.model.replace(/^.*\//, '')}</span>
+              </span>
+            )}
             <div className="flex-1 h-[5px] rounded-full bg-white/5 overflow-hidden">
               <div className="h-full rounded-full transition-all duration-500" style={barStyle} />
             </div>