Show session drain as status bar fill, with final-5m countdown

Ambient bar fills proportionally to time remaining so users
have a passive sense of session progress; a bold warning-colored
"X:XX" readout appears only for the final five minutes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: jahooma

cli/src/components/status-bar.tsx

@@ -1,9 +1,10 @@
+import { TextAttributes } from '@opentui/core'
 import React, { useEffect, useState } from 'react'
 
-import { FreebuffSessionCountdown } from './freebuff-session-countdown'
 import { ScrollToBottomButton } from './scroll-to-bottom-button'
 import { ShimmerText } from './shimmer-text'
 import { StopButton } from './stop-button'
+import { useFreebuffSessionProgress } from '../hooks/use-freebuff-session-progress'
 import { useTheme } from '../hooks/use-theme'
 import { formatElapsedTime } from '../utils/format-elapsed-time'
 
@@ -13,6 +14,17 @@ import type { StatusIndicatorState } from '../utils/status-indicator-state'
 
 const SHIMMER_INTERVAL_MS = 160
 
+/** Show the "X:XX left" urgency readout under this many ms remaining. */
+const COUNTDOWN_VISIBLE_MS = 5 * 60_000
+
+const formatCountdown = (ms: number): string => {
+  if (ms <= 0) return 'expiring…'
+  const totalSeconds = Math.ceil(ms / 1000)
+  const m = Math.floor(totalSeconds / 60)
+  const s = totalSeconds % 60
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
 interface StatusBarProps {
   timerStartTime: number | null
   isAtBottom: boolean
@@ -132,8 +144,13 @@ export const StatusBar = ({
   const statusIndicatorContent = renderStatusIndicator()
   const elapsedTimeContent = renderElapsedTime()
 
-  // Only show gray background when there's status indicator or timer
-  const hasContent = statusIndicatorContent || elapsedTimeContent
+  const sessionProgress = useFreebuffSessionProgress(freebuffSession)
+
+  // Show gray background when there's status indicator, timer, or when the
+  // freebuff session fill is visible (otherwise the fill would float over
+  // transparent space).
+  const hasContent =
+    statusIndicatorContent || elapsedTimeContent || sessionProgress !== null
 
   return (
     <box
@@ -147,6 +164,20 @@ export const StatusBar = ({
         backgroundColor: hasContent ? theme.surface : 'transparent',
       }}
     >
+      {sessionProgress !== null && (
+        <box
+          style={{
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            bottom: 0,
+            // Fill anchors left and shrinks as time passes — the draining
+            // bar is the countdown; no separate numeric readout needed.
+            width: `${sessionProgress.fraction * 100}%`,
+            backgroundColor: theme.surfaceHover,
+          }}
+        />
+      )}
       <box
         style={{
           flexGrow: 1,
@@ -176,9 +207,14 @@ export const StatusBar = ({
         {onStop && (statusIndicatorState.kind === 'waiting' || statusIndicatorState.kind === 'streaming') && (
           <StopButton onClick={onStop} />
         )}
-        <text style={{ wrapMode: 'none' }}>
-          <FreebuffSessionCountdown session={freebuffSession} />
-        </text>
+        {sessionProgress !== null &&
+          sessionProgress.remainingMs < COUNTDOWN_VISIBLE_MS && (
+            <text style={{ wrapMode: 'none' }}>
+              <span fg={theme.warning} attributes={TextAttributes.BOLD}>
+                {formatCountdown(sessionProgress.remainingMs)}
+              </span>
+            </text>
+          )}
       </box>
     </box>
   )