Session countdown

Author: jahooma

cli/src/chat.tsx

@@ -21,6 +21,7 @@ import { ReviewScreen } from './components/review-screen'
 import { MessageWithAgents } from './components/message-with-agents'
 import { areCreditsRestored } from './components/out-of-credits-banner'
 import { PendingBashMessage } from './components/pending-bash-message'
+import { useHasActiveFreebuffSession } from './components/freebuff-session-countdown'
 import { StatusBar } from './components/status-bar'
 import { TopBanner } from './components/top-banner'
 import { getSlashCommandsWithSkills } from './data/slash-commands'
@@ -1337,9 +1338,13 @@ export const Chat = ({
     return ` ${segments.join('   ')} `
   }, [queuePreviewTitle, pausedQueueText])
 
+  const hasActiveFreebuffSession = useHasActiveFreebuffSession()
   const shouldShowStatusLine =
     !feedbackMode &&
-    (hasStatusIndicatorContent || shouldShowQueuePreview || !isAtBottom)
+    (hasStatusIndicatorContent ||
+      shouldShowQueuePreview ||
+      !isAtBottom ||
+      hasActiveFreebuffSession)
 
   // Track mouse movement for ad activity (throttled)
   const lastMouseActivityRef = useRef<number>(0)

cli/src/components/freebuff-session-countdown.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react'
+
+import { useTheme } from '../hooks/use-theme'
+import { useFreebuffSessionStore } from '../state/freebuff-session-store'
+import { IS_FREEBUFF } from '../utils/constants'
+
+const LOW_THRESHOLD_MS = 5 * 60_000
+const CRITICAL_THRESHOLD_MS = 60_000
+
+const formatRemaining = (ms: number): string => {
+  if (ms <= 0) return 'expiring…'
+  const totalSeconds = Math.ceil(ms / 1000)
+  if (totalSeconds < 60) return `${totalSeconds}s left`
+  const minutes = Math.floor(totalSeconds / 60)
+  if (minutes < 60) return `${minutes}m left`
+  const hours = Math.floor(minutes / 60)
+  const rem = minutes % 60
+  return rem === 0 ? `${hours}h left` : `${hours}h ${rem}m left`
+}
+
+/**
+ * Small countdown shown while a freebuff session is active. Renders the
+ * time remaining until the server-issued `expiresAt` so users aren't
+ * surprised when their seat is released. Returns null in non-freebuff
+ * builds or when no active session exists — safe to always mount.
+ */
+export const FreebuffSessionCountdown: React.FC = () => {
+  const theme = useTheme()
+  const session = useFreebuffSessionStore((s) => s.session)
+  const expiresAtMs =
+    session?.status === 'active' ? Date.parse(session.expiresAt) : null
+
+  const [now, setNow] = useState(() => Date.now())
+  useEffect(() => {
+    if (!expiresAtMs) return
+    const id = setInterval(() => setNow(Date.now()), 1000)
+    return () => clearInterval(id)
+  }, [expiresAtMs])
+
+  if (!IS_FREEBUFF || !expiresAtMs) return null
+
+  const remainingMs = expiresAtMs - now
+  const color =
+    remainingMs < CRITICAL_THRESHOLD_MS
+      ? theme.error
+      : remainingMs < LOW_THRESHOLD_MS
+        ? theme.warning
+        : theme.muted
+
+  return <span fg={color}>{formatRemaining(remainingMs)}</span>
+}
+
+/** True when the freebuff session countdown will render non-null content.
+ *  Used by the chat surface to keep the status bar visible while a
+ *  session is active, even when there's no streaming/queue activity. */
+export const useHasActiveFreebuffSession = (): boolean => {
+  return useFreebuffSessionStore(
+    (s) => IS_FREEBUFF && s.session?.status === 'active',
+  )
+}

cli/src/components/status-bar.tsx

@@ -1,5 +1,6 @@
 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'
@@ -169,6 +170,9 @@ export const StatusBar = ({
         }}
       >
         <text style={{ wrapMode: 'none' }}>{elapsedTimeContent}</text>
+        <text style={{ wrapMode: 'none' }}>
+          <FreebuffSessionCountdown />
+        </text>
         {onStop && (statusIndicatorState.kind === 'waiting' || statusIndicatorState.kind === 'streaming') && (
           <StopButton onClick={onStop} />
         )}