Refine footer thinking status icons

Author: IM.codes

web/src/components/UsageFooter.tsx

@@ -95,7 +95,9 @@ export function UsageFooter({ usage, sessionName, sessionState, agentType, model
   const monthlyCost = sessionCost > 0 ? getMonthlyCost() : 0;
   const modelLabel = shortModelLabel(displayModel);
   const inlineQuotaText = displayQuotaLabel;
-  const liveStatusMode = sessionState === 'running' ? 'running' : sessionState === 'idle' ? 'idle' : null;
+  const liveStatusMode = sessionState === 'running'
+    ? (statusText ? 'tool' : activeThinkingTs ? 'thinking' : 'running')
+    : sessionState === 'idle' ? 'idle' : null;
   const liveStatusText = useMemo(() => {
     if (sessionState === 'running') {
       if (statusText) return statusText;
@@ -105,6 +107,7 @@ export function UsageFooter({ usage, sessionName, sessionState, agentType, model
     if (sessionState === 'idle') return 'Agent idle — waiting for input';
     return null;
   }, [activeThinkingTs, now, sessionState, statusText, t]);
+  const showInlineStatusText = liveStatusMode === 'running' || liveStatusMode === 'thinking' || liveStatusMode === 'tool';
   const codexQuotaLines = (agentType === 'codex' || agentType === 'codex-sdk')
     ? (displayQuotaLabel ?? '').split(' · ').filter(Boolean)
     : [];
@@ -128,9 +131,11 @@ export function UsageFooter({ usage, sessionName, sessionState, agentType, model
         {showLiveStatus && liveStatusText && liveStatusMode && (
           <span class={`session-live-status-inline ${liveStatusMode}`} title={liveStatusText} aria-label={liveStatusText}>
             <span class="session-live-status-emoji robot">🤖</span>
-            {liveStatusMode === 'running'
-              ? <span class="session-live-status-emoji gear">⚙️</span>
-              : <span class="session-live-status-emoji sleep">💤</span>}
+            {liveStatusMode === 'running' && <span class="session-live-status-emoji gear">⚙️</span>}
+            {liveStatusMode === 'thinking' && <span class="session-live-status-emoji thought">💭</span>}
+            {liveStatusMode === 'tool' && <span class="session-live-status-emoji tool">🔍</span>}
+            {liveStatusMode === 'idle' && <span class="session-live-status-emoji sleep">💤</span>}
+            {showInlineStatusText && <span class="session-live-status-text">{liveStatusText}</span>}
           </span>
         )}
         <span style={{ marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'flex-end' }}>

web/src/styles.css

@@ -858,17 +858,29 @@ body {
 .session-ctx-input { position: absolute; left: 0; top: 0; height: 100%; background: #34d399; border-radius: 3px; }
 .session-ctx-cache { position: absolute; left: 0; top: 0; height: 100%; background: #818cf8; border-radius: 3px; }
 .session-usage-stats { display: flex; justify-content: space-between; font-size: 10px; color: #475569; }
-.session-live-status-inline { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 20px; color: #818cf8; }
+.session-live-status-inline { display: inline-flex; align-items: center; justify-content: center; gap: 1px; min-width: 20px; color: #818cf8; min-width: 0; max-width: min(42vw, 240px); }
 .session-live-status-emoji { display: inline-block; font-size: 12px; line-height: 1; filter: saturate(1.1); }
 .session-live-status-emoji.robot { transform: translateY(0.2px); }
+.session-live-status-text { color: #818cf8; font-size: 10px; line-height: 1.1; margin-left: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.92; }
 .session-live-status-inline.running .session-live-status-emoji.gear { animation: status-gear-spin 0.8s linear infinite; transform-origin: 50% 50%; }
+.session-live-status-inline.thinking .session-live-status-emoji.thought { font-size: 10px; transform: translateY(-2px) translateX(-1px); opacity: 0.94; animation: status-thought-breathe 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
+.session-live-status-inline.tool .session-live-status-emoji.tool { animation: status-tool-peek 1.15s ease-in-out infinite; transform-origin: 50% 50%; }
 .session-live-status-inline.idle .session-live-status-emoji.sleep { font-size: 9px; transform: translateY(-3px) translateX(-1px); opacity: 0.9; animation: status-sleep-breathe 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
 .session-usage-model { color: #a78bfa; font-size: 10px; font-weight: 500; margin-right: 6px; }
 .session-usage-tokens { color: #64748b; }
 .session-usage-badge { color: #93c5fd; border: 1px solid #1d4ed8; border-radius: 999px; padding: 1px 6px; line-height: 1.4; }
 .session-usage-quota-inline { color: #64748b; font-size: 9px; line-height: 1.4; white-space: nowrap; }
 .session-usage-cost { color: #94a3b8; }
 @keyframes status-gear-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+@keyframes status-thought-breathe {
+  0%, 100% { transform: translateY(-2px) translateX(-1px) scale(0.9); opacity: 0.72; }
+  50% { transform: translateY(-3px) translateX(-1px) scale(1.06); opacity: 1; }
+}
+@keyframes status-tool-peek {
+  0%, 100% { transform: translateX(0) rotate(0deg) scale(0.98); }
+  35% { transform: translateX(0.5px) rotate(-8deg) scale(1.03); }
+  65% { transform: translateX(0.5px) rotate(8deg) scale(1.03); }
+}
 @keyframes status-sleep-breathe {
   0%, 100% { transform: translateY(-3px) translateX(-1px) scale(0.88); opacity: 0.72; }
   50% { transform: translateY(-4px) translateX(-1px) scale(1.08); opacity: 1; }

web/test/usage-footer.test.tsx

@@ -34,7 +34,7 @@ afterEach(() => {
 });
 
 describe('UsageFooter', () => {
-  it('renders emoji live status inline with footer stats and only animates while running', () => {
+  it('renders idle, thinking, and running live status inline with footer stats', () => {
     const { container, rerender } = render(
       <UsageFooter
         usage={{
@@ -55,6 +55,7 @@ describe('UsageFooter', () => {
     expect(idleStatus?.getAttribute('aria-label')).toContain('Agent idle');
     expect(container.querySelector('.chat-thinking-dots')).toBeNull();
     expect(container.querySelector('.session-live-status-inline.idle .session-live-status-emoji.sleep')).toBeTruthy();
+    expect(container.querySelector('.session-live-status-text')).toBeNull();
 
     rerender(
       <UsageFooter
@@ -72,13 +73,32 @@ describe('UsageFooter', () => {
 
     const runningStatus = container.querySelector('.session-live-status-inline') as HTMLSpanElement | null;
     expect(runningStatus?.textContent).toContain('🤖');
-    expect(runningStatus?.textContent).toContain('⚙️');
+    expect(runningStatus?.textContent).toContain('💭');
     expect(runningStatus?.getAttribute('aria-label')).toContain('thinking');
-    expect(container.querySelector('.session-live-status-inline.running')).toBeTruthy();
+    expect(container.querySelector('.session-live-status-inline.thinking')).toBeTruthy();
+    expect(container.querySelector('.session-live-status-inline.thinking .session-live-status-emoji.thought')).toBeTruthy();
+    expect(container.querySelector('.session-live-status-text')?.textContent).toContain('thinking');
+
+    rerender(
+      <UsageFooter
+        usage={{
+          inputTokens: 0,
+          cacheTokens: 0,
+          contextWindow: 1_000_000,
+          model: 'coder-model',
+        }}
+        sessionName="deck_test_brain"
+        sessionState="running"
+      />,
+    );
+
+    const plainRunningStatus = container.querySelector('.session-live-status-inline') as HTMLSpanElement | null;
+    expect(plainRunningStatus?.textContent).toContain('🤖');
+    expect(plainRunningStatus?.textContent).toContain('⚙️');
     expect(container.querySelector('.session-live-status-inline.running .session-live-status-emoji.gear')).toBeTruthy();
   });
 
-  it('prefers explicit running status text in the live status row', () => {
+  it('shows tool-call icon when explicit running status text is present', () => {
     const { container } = render(
       <UsageFooter
         usage={{
@@ -93,6 +113,9 @@ describe('UsageFooter', () => {
       />,
     );
 
+    expect((container.querySelector('.session-live-status-inline') as HTMLSpanElement | null)?.textContent).toContain('🔍');
+    expect(container.querySelector('.session-live-status-inline.tool .session-live-status-emoji.tool')).toBeTruthy();
+    expect(container.querySelector('.session-live-status-text')?.textContent).toBe('Reading file...');
     expect((container.querySelector('.session-live-status-inline') as HTMLSpanElement | null)?.getAttribute('aria-label')).toBe('Reading file...');
   });