Refine footer agent status icons

Author: IM.codes

web/src/components/UsageFooter.tsx

@@ -95,6 +95,7 @@ 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 liveStatusText = useMemo(() => {
     if (sessionState === 'running') {
       if (statusText) return statusText;
@@ -116,12 +117,6 @@ export function UsageFooter({ usage, sessionName, sessionState, agentType, model
           <div class="session-ctx-input" style={{ width: `${newPct}%`, left: `${cachePct}%` }} />
         </div>
       )}
-      {showLiveStatus && liveStatusText && (
-        <div class="session-live-status">
-          {sessionState === 'running' && <span class="chat-thinking-dots">···</span>}
-          <span>{liveStatusText}</span>
-        </div>
-      )}
       {codexQuotaLines.length > 0 && (
         <div class="session-usage-codex-quota">
           {codexQuotaLines.map((line) => (
@@ -130,6 +125,14 @@ export function UsageFooter({ usage, sessionName, sessionState, agentType, model
         </div>
       )}
       <div class="session-usage-stats">
+        {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>}
+          </span>
+        )}
         <span style={{ marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
           {modelLabel && <span class="session-usage-model">{modelLabel}</span>}
           {total > 0 && <span class="session-usage-tokens">{fmt(total)} / {fmt(ctx)} ({pctStr}%)</span>}

web/src/styles.css

@@ -852,18 +852,27 @@ body {
 /* Usage footer — between chat/terminal and input controls */
 .session-usage-footer { flex-shrink: 0; padding: 4px 10px 3px; background: #0f1117; border-top: 1px solid #1e293b; }
 .session-ctx-bar { position: relative; width: 100%; height: 5px; background: #1e293b; border-radius: 3px; overflow: hidden; margin-bottom: 3px; }
-.session-live-status { display: flex; align-items: center; gap: 6px; min-height: 16px; margin-bottom: 3px; color: #818cf8; font-size: 10px; }
 .session-usage-codex-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; align-items: center; }
 .session-usage-codex-quota { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; margin-bottom: 2px; }
 .session-usage-codex-line { color: #64748b; font-size: 9px; line-height: 1.2; text-align: right; }
 .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-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-inline.running .session-live-status-emoji.gear { animation: status-gear-spin 0.8s linear 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-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; }
+}
 .subsession-input-bar { display: flex; gap: 6px; padding: 6px 8px; background: #0d1117; border-top: 1px solid #1e293b; flex-shrink: 0; }
 .subsession-input { flex: 1; background: #1e293b; border: 1px solid #334155; border-radius: 6px; color: #e2e8f0; font-family: inherit; font-size: 13px; padding: 5px 10px; outline: none; }
 .subsession-input:focus { border-color: #3b82f6; }

web/test/usage-footer.test.tsx

@@ -34,7 +34,7 @@ afterEach(() => {
 });
 
 describe('UsageFooter', () => {
-  it('renders live status below the ctx bar and only animates while running', () => {
+  it('renders emoji live status inline with footer stats and only animates while running', () => {
     const { container, rerender } = render(
       <UsageFooter
         usage={{
@@ -49,8 +49,12 @@ describe('UsageFooter', () => {
       />,
     );
 
-    expect(container.querySelector('.session-live-status')?.textContent).toContain('Agent idle');
+    const idleStatus = container.querySelector('.session-live-status-inline') as HTMLSpanElement | null;
+    expect(idleStatus?.textContent).toContain('🤖');
+    expect(idleStatus?.textContent).toContain('💤');
+    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();
 
     rerender(
       <UsageFooter
@@ -66,12 +70,16 @@ describe('UsageFooter', () => {
       />,
     );
 
-    expect(container.querySelector('.session-live-status')?.textContent).toContain('thinking');
-    expect(container.querySelector('.chat-thinking-dots')).toBeTruthy();
+    const runningStatus = container.querySelector('.session-live-status-inline') as HTMLSpanElement | null;
+    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.running .session-live-status-emoji.gear')).toBeTruthy();
   });
 
   it('prefers explicit running status text in the live status row', () => {
-    render(
+    const { container } = render(
       <UsageFooter
         usage={{
           inputTokens: 0,
@@ -85,7 +93,7 @@ describe('UsageFooter', () => {
       />,
     );
 
-    expect(screen.getByText('Reading file...')).toBeDefined();
+    expect((container.querySelector('.session-live-status-inline') as HTMLSpanElement | null)?.getAttribute('aria-label')).toBe('Reading file...');
   });
 
   it('renders explicit quota label inline in the ctx footer', () => {