Improve status bar and /usage UI

jahooma · jahooma · commit 4afccd184b83 · 2026-01-05T18:05:52.000-08:00
diff --git a/cli/src/components/bottom-status-line.tsx b/cli/src/components/bottom-status-line.tsx
@@ -2,8 +2,9 @@ import React from 'react'
 
 import { useTheme } from '../hooks/use-theme'
 
+import { formatResetTime } from '../utils/time-format'
+
 import type { ClaudeQuotaData } from '../hooks/use-claude-quota-query'
-import type { ChatTheme } from '../types/theme-system'
 
 interface BottomStatusLineProps {
   /** Whether Claude OAuth is connected */
@@ -14,23 +15,6 @@ interface BottomStatusLineProps {
   claudeQuota?: ClaudeQuotaData | null
 }
 
-/**
- * Format remaining quota for display
- */
-const formatQuota = (remaining: number): string => {
-  const rounded = Math.round(remaining)
-  return `${rounded}%`
-}
-
-/**
- * Get color for quota percentage - only highlight when approaching limit
- */
-const getQuotaColor = (remaining: number, theme: ChatTheme): string => {
-  if (remaining <= 10) return theme.error
-  if (remaining <= 25) return theme.warning
-  return theme.muted // Use muted for normal levels - doesn't need to be salient
-}
-
 /**
  * Bottom status line component - shows below the input box
  * Currently displays Claude subscription status when connected
@@ -52,6 +36,23 @@ export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
     ? Math.min(claudeQuota.fiveHourRemaining, claudeQuota.sevenDayRemaining)
     : null
 
+  // Check if quota is exhausted (0%)
+  const isExhausted = displayRemaining !== null && displayRemaining <= 0
+
+  // Get the reset time for the limiting quota window
+  const resetTime = claudeQuota
+    ? claudeQuota.fiveHourRemaining <= claudeQuota.sevenDayRemaining
+      ? claudeQuota.fiveHourResetsAt
+      : claudeQuota.sevenDayResetsAt
+    : null
+
+  // Determine dot color: red if exhausted, green if active, muted otherwise
+  const dotColor = isExhausted
+    ? theme.error
+    : isClaudeActive
+      ? theme.success
+      : theme.muted
+
   return (
     <box
       style={{
@@ -68,13 +69,13 @@ export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
           gap: 0,
         }}
       >
-        <text style={{ fg: isClaudeActive ? theme.success : theme.muted }}>●</text>
-        <text style={{ fg: isClaudeActive ? theme.primary : theme.muted }}> Claude subscription</text>
-        {displayRemaining !== null && (
-          <text style={{ fg: getQuotaColor(displayRemaining, theme) }}>
-            {' '}{formatQuota(displayRemaining)}
-          </text>
-        )}
+        <text style={{ fg: dotColor }}>●</text>
+        <text style={{ fg: theme.muted }}> Claude subscription</text>
+        {isExhausted && resetTime ? (
+          <text style={{ fg: theme.muted }}>{` · resets in ${formatResetTime(resetTime)}`}</text>
+        ) : displayRemaining !== null ? (
+          <text style={{ fg: theme.foreground }}>{` ${Math.round(displayRemaining)}%`}</text>
+        ) : null}
       </box>
     </box>
   )
diff --git a/cli/src/components/progress-bar.tsx b/cli/src/components/progress-bar.tsx
@@ -18,11 +18,16 @@ interface ProgressBarProps {
  */
 const getProgressColor = (
   value: number,
-  theme: { primary: string; muted: string; warning: string; error: string },
+  theme: {
+    primary: string
+    foreground: string
+    warning: string
+    error: string
+  },
 ): string => {
   if (value <= 10) return theme.error
   if (value <= 25) return theme.warning
-  return theme.muted // Use muted for normal levels
+  return theme.foreground
 }
 
 /**
@@ -63,9 +68,7 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({
 
   return (
     <box style={{ flexDirection: 'row', alignItems: 'center', gap: 0 }}>
-      {label && (
-        <text style={{ fg: theme.muted }}>{label} </text>
-      )}
+      {label && <text style={{ fg: theme.muted }}>{label} </text>}
       <text style={{ fg: barColor }}>{filled}</text>
       <text style={{ fg: theme.muted }}>{empty}</text>
       {showPercentage && (
diff --git a/cli/src/components/usage-banner.tsx b/cli/src/components/usage-banner.tsx
@@ -10,33 +10,34 @@ import { usageQueryKeys, useUsageQuery } from '../hooks/use-usage-query'
 import { useChatStore } from '../state/chat-store'
 import {
   getBannerColorLevel,
-  generateUsageBannerText,
   generateLoadingBannerText,
 } from '../utils/usage-banner-state'
 import { WEBSITE_URL } from '../login/constants'
 import { useTheme } from '../hooks/use-theme'
 import { isClaudeOAuthValid } from '@codebuff/sdk'
 
+import { formatResetTime } from '../utils/time-format'
+
 const MANUAL_SHOW_TIMEOUT = 60 * 1000 // 1 minute
 const USAGE_POLL_INTERVAL = 30 * 1000 // 30 seconds
 
 /**
- * Format time until reset in human-readable form
+ * Format the renewal date for display
  */
-const formatResetTime = (resetDate: Date | null): string => {
-  if (!resetDate) return ''
-  const now = new Date()
-  const diffMs = resetDate.getTime() - now.getTime()
-  if (diffMs <= 0) return 'now'
-
-  const diffMins = Math.floor(diffMs / (1000 * 60))
-  const diffHours = Math.floor(diffMins / 60)
-  const remainingMins = diffMins % 60
-
-  if (diffHours > 0) {
-    return `${diffHours}h ${remainingMins}m`
-  }
-  return `${diffMins}m`
+const formatRenewalDate = (dateStr: string | null): string => {
+  if (!dateStr) return ''
+  const resetDate = new Date(dateStr)
+  const today = new Date()
+  const isToday = resetDate.toDateString() === today.toDateString()
+  return isToday
+    ? resetDate.toLocaleString('en-US', {
+        hour: 'numeric',
+        minute: '2-digit',
+      })
+    : resetDate.toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+      })
 }
 
 export const UsageBanner = ({ showTime }: { showTime: number }) => {
@@ -106,36 +107,54 @@ export const UsageBanner = ({ showTime }: { showTime: number }) => {
   }
 
   const colorLevel = getBannerColorLevel(activeData.remainingBalance)
-
-  // Show loading indicator if refreshing data
-  const text = isLoadingData
-    ? generateLoadingBannerText(sessionCreditsUsed)
-    : generateUsageBannerText({
-        sessionCreditsUsed,
-        remainingBalance: activeData.remainingBalance,
-        next_quota_reset: activeData.next_quota_reset,
-        adCredits: activeData.balanceBreakdown?.ad,
-      })
+  const adCredits = activeData.balanceBreakdown?.ad
+  const renewalDate = activeData.next_quota_reset ? formatRenewalDate(activeData.next_quota_reset) : null
 
   return (
     <BottomBanner
       borderColorKey={isLoadingData ? 'muted' : colorLevel}
       onClose={() => setInputMode('default')}
     >
       <box style={{ flexDirection: 'column', gap: 0 }}>
-        {/* Codebuff credits section */}
+        {/* Codebuff credits section - structured layout */}
         <Button
           onClick={() => {
             open(WEBSITE_URL + '/usage')
           }}
         >
-          <text style={{ fg: theme.foreground }}>{text}</text>
+          <box style={{ flexDirection: 'column', gap: 0 }}>
+            {/* Main stats row */}
+            <box style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 1 }}>
+              <text style={{ fg: theme.muted }}>Session:</text>
+              <text style={{ fg: theme.foreground }}>{sessionCreditsUsed.toLocaleString()}</text>
+              <text style={{ fg: theme.muted }}>·</text>
+              <text style={{ fg: theme.muted }}>Remaining:</text>
+              {isLoadingData ? (
+                <text style={{ fg: theme.muted }}>...</text>
+              ) : (
+                <text style={{ fg: theme.foreground }}>
+                  {activeData.remainingBalance?.toLocaleString() ?? '?'}
+                </text>
+              )}
+              {adCredits != null && adCredits > 0 && (
+                <text style={{ fg: theme.muted }}>{`(${adCredits} from ads)`}</text>
+              )}
+              {renewalDate && (
+                <>
+                  <text style={{ fg: theme.muted }}>· Renews:</text>
+                  <text style={{ fg: theme.foreground }}>{renewalDate}</text>
+                </>
+              )}
+            </box>
+            {/* See more link */}
+            <text style={{ fg: theme.muted }}>↗ See more on codebuff.com</text>
+          </box>
         </Button>
 
         {/* Claude subscription section - only show if connected */}
         {isClaudeConnected && (
           <box style={{ flexDirection: 'column', marginTop: 1 }}>
-            <text style={{ fg: theme.primary }}>Claude subscription</text>
+            <text style={{ fg: theme.muted }}>Claude subscription</text>
             {isClaudeLoading ? (
               <text style={{ fg: theme.muted }}>Loading quota...</text>
             ) : claudeQuota ? (
diff --git a/cli/src/utils/__tests__/usage-banner-state.test.ts b/cli/src/utils/__tests__/usage-banner-state.test.ts
@@ -3,7 +3,6 @@ import { describe, test, expect } from 'bun:test'
 import {
   getBannerColorLevel,
   getThresholdInfo,
-  generateUsageBannerText,
   generateLoadingBannerText,
   shouldAutoShowBanner,
 } from '../usage-banner-state'
@@ -111,55 +110,6 @@ describe('usage-banner-state', () => {
     })
   })
 
-  describe('generateUsageBannerText', () => {
-    test('always shows session usage', () => {
-      const text = generateUsageBannerText({
-        sessionCreditsUsed: 250,
-        remainingBalance: null,
-        next_quota_reset: null,
-      })
-      expect(text).toContain('250')
-    })
-
-    test('shows remaining balance when available', () => {
-      const text = generateUsageBannerText({
-        sessionCreditsUsed: 100,
-        remainingBalance: 500,
-        next_quota_reset: null,
-      })
-      expect(text).toContain('500')
-    })
-
-    test('omits balance when not available', () => {
-      const text = generateUsageBannerText({
-        sessionCreditsUsed: 100,
-        remainingBalance: null,
-        next_quota_reset: null,
-      })
-      expect(text).not.toContain('remaining')
-    })
-
-    test('shows renewal date when available', () => {
-      const text = generateUsageBannerText({
-        sessionCreditsUsed: 100,
-        remainingBalance: 500,
-        next_quota_reset: '2025-03-15T00:00:00.000Z',
-        today: new Date('2025-03-01'),
-      })
-      expect(text).toContain('Mar')
-      expect(text).toContain('15')
-    })
-
-    test('omits renewal date when not available', () => {
-      const text = generateUsageBannerText({
-        sessionCreditsUsed: 100,
-        remainingBalance: 500,
-        next_quota_reset: null,
-      })
-      expect(text.toLowerCase()).not.toContain('renew')
-    })
-  })
-
   describe('shouldAutoShowBanner', () => {
     describe('when banner should NOT auto-show', () => {
       test('during active AI response chain', () => {
diff --git a/cli/src/utils/time-format.ts b/cli/src/utils/time-format.ts
@@ -0,0 +1,20 @@
+/**
+ * Format time until reset in human-readable form
+ * @param resetDate - The date when the quota/resource resets
+ * @returns Human-readable string like "2h 30m" or "45m"
+ */
+export const formatResetTime = (resetDate: Date | null): string => {
+  if (!resetDate) return ''
+  const now = new Date()
+  const diffMs = resetDate.getTime() - now.getTime()
+  if (diffMs <= 0) return 'now'
+
+  const diffMins = Math.floor(diffMs / (1000 * 60))
+  const diffHours = Math.floor(diffMins / 60)
+  const remainingMins = diffMins % 60
+
+  if (diffHours > 0) {
+    return `${diffHours}h ${remainingMins}m`
+  }
+  return `${diffMins}m`
+}
diff --git a/cli/src/utils/usage-banner-state.ts b/cli/src/utils/usage-banner-state.ts
@@ -62,74 +62,13 @@ export function getBannerColorLevel(balance: number | null): BannerColorLevel {
   return getThresholdInfo(balance).colorLevel
 }
 
-export interface UsageBannerTextOptions {
-  sessionCreditsUsed: number
-  remainingBalance: number | null
-  next_quota_reset: string | null
-  /** Ad impression credits earned */
-  adCredits?: number
-  /** For testing purposes, allows overriding "today" */
-  today?: Date
-}
-
 /**
  * Generates loading text for the usage banner while data is being fetched.
  */
 export function generateLoadingBannerText(sessionCreditsUsed: number): string {
   return `Session usage: ${sessionCreditsUsed.toLocaleString()}. Loading credit balance...`
 }
 
-/**
- * Generates the text content for the usage banner.
- */
-export function generateUsageBannerText(
-  options: UsageBannerTextOptions,
-): string {
-  const {
-    sessionCreditsUsed,
-    remainingBalance,
-    next_quota_reset,
-    adCredits,
-    today = new Date(),
-  } = options
-
-  let text = `Session usage: ${sessionCreditsUsed.toLocaleString()}`
-
-  if (remainingBalance !== null) {
-    text += `. Credits remaining: ${remainingBalance.toLocaleString()}`
-  }
-
-  // Show ad credits earned if any
-  if (adCredits && adCredits > 0) {
-    text += ` (${adCredits.toLocaleString()} from ads)`
-  }
-
-  if (next_quota_reset) {
-    const resetDate = new Date(next_quota_reset)
-    const isToday = resetDate.toDateString() === today.toDateString()
-
-    const dateDisplay = isToday
-      ? resetDate.toLocaleString('en-US', {
-          month: 'short',
-          day: 'numeric',
-          year: 'numeric',
-          hour: 'numeric',
-          minute: '2-digit',
-        })
-      : resetDate.toLocaleDateString('en-US', {
-          month: 'short',
-          day: 'numeric',
-          year: 'numeric',
-        })
-
-    text += `. Free credits renew ${dateDisplay}`
-  }
-
-  text += `. See more`
-
-  return text
-}
-
 /**
  * Gets the threshold tier for a given balance.
  * Returns null if balance is above all thresholds.
