Show claude subscription usage in /usage

Author: jahooma

cli/src/components/progress-bar.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+import { useTheme } from '../hooks/use-theme'
+
+interface ProgressBarProps {
+  /** Value from 0 to 100 */
+  value: number
+  /** Width in characters (default: 20) */
+  width?: number
+  /** Optional label to show before the bar */
+  label?: string
+  /** Show percentage text after the bar */
+  showPercentage?: boolean
+}
+
+/**
+ * Get color based on progress percentage - muted for normal, warning/error when low
+ */
+const getProgressColor = (
+  value: number,
+  theme: { primary: string; muted: 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
+}
+
+/**
+ * Get color for the filled portion of the bar
+ */
+const getBarColor = (
+  value: number,
+  theme: { primary: string; warning: string; error: string },
+): string => {
+  if (value <= 10) return theme.error
+  if (value <= 25) return theme.warning
+  return theme.primary // Use primary for the bar itself
+}
+
+/**
+ * Terminal progress bar component
+ * Uses block characters for visual display
+ */
+export const ProgressBar: React.FC<ProgressBarProps> = ({
+  value,
+  width = 20,
+  label,
+  showPercentage = true,
+}) => {
+  const theme = useTheme()
+  const clampedValue = Math.max(0, Math.min(100, value))
+  const filledWidth = Math.round((clampedValue / 100) * width)
+  const emptyWidth = width - filledWidth
+
+  const filledChar = '█'
+  const emptyChar = '░'
+
+  const filled = filledChar.repeat(filledWidth)
+  const empty = emptyChar.repeat(emptyWidth)
+
+  const barColor = getBarColor(clampedValue, theme)
+  const textColor = getProgressColor(clampedValue, theme)
+
+  return (
+    <box style={{ flexDirection: 'row', alignItems: 'center', gap: 0 }}>
+      {label && (
+        <text style={{ fg: theme.muted }}>{label} </text>
+      )}
+      <text style={{ fg: barColor }}>{filled}</text>
+      <text style={{ fg: theme.muted }}>{empty}</text>
+      {showPercentage && (
+        <text style={{ fg: textColor }}> {Math.round(clampedValue)}%</text>
+      )}
+    </box>
+  )
+}

cli/src/components/usage-banner.tsx

@@ -3,6 +3,9 @@ import React, { useEffect } from 'react'
 import open from 'open'
 
 import { BottomBanner } from './bottom-banner'
+import { Button } from './button'
+import { ProgressBar } from './progress-bar'
+import { useClaudeQuotaQuery } from '../hooks/use-claude-quota-query'
 import { usageQueryKeys, useUsageQuery } from '../hooks/use-usage-query'
 import { useChatStore } from '../state/chat-store'
 import {
@@ -12,16 +15,44 @@ import {
 } from '../utils/usage-banner-state'
 import { WEBSITE_URL } from '../login/constants'
 import { useTheme } from '../hooks/use-theme'
-import { Button } from './button'
+import { isClaudeOAuthValid } from '@codebuff/sdk'
 
 const MANUAL_SHOW_TIMEOUT = 60 * 1000 // 1 minute
 const USAGE_POLL_INTERVAL = 30 * 1000 // 30 seconds
 
+/**
+ * Format time until reset in human-readable form
+ */
+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`
+}
+
 export const UsageBanner = ({ showTime }: { showTime: number }) => {
   const queryClient = useQueryClient()
   const sessionCreditsUsed = useChatStore((state) => state.sessionCreditsUsed)
   const setInputMode = useChatStore((state) => state.setInputMode)
 
+  // Check if Claude OAuth is connected
+  const isClaudeConnected = isClaudeOAuthValid()
+
+  // Fetch Claude quota data if connected
+  const { data: claudeQuota, isLoading: isClaudeLoading } = useClaudeQuotaQuery({
+    enabled: isClaudeConnected,
+    refetchInterval: 30 * 1000, // Refresh every 30 seconds when banner is open
+  })
+
   const {
     data: apiData,
     isLoading,
@@ -91,13 +122,50 @@ export const UsageBanner = ({ showTime }: { showTime: number }) => {
       borderColorKey={isLoadingData ? 'muted' : colorLevel}
       onClose={() => setInputMode('default')}
     >
-      <Button
-        onClick={() => {
-          open(WEBSITE_URL + '/usage')
-        }}
-      >
-        <text style={{ fg: theme.foreground }}>{text}</text>
-      </Button>
+      <box style={{ flexDirection: 'column', gap: 0 }}>
+        {/* Codebuff credits section */}
+        <Button
+          onClick={() => {
+            open(WEBSITE_URL + '/usage')
+          }}
+        >
+          <text style={{ fg: theme.foreground }}>{text}</text>
+        </Button>
+
+        {/* Claude subscription section - only show if connected */}
+        {isClaudeConnected && (
+          <box style={{ flexDirection: 'column', marginTop: 1 }}>
+            <text style={{ fg: theme.primary }}>Claude subscription</text>
+            {isClaudeLoading ? (
+              <text style={{ fg: theme.muted }}>Loading quota...</text>
+            ) : claudeQuota ? (
+              <box style={{ flexDirection: 'column', gap: 0 }}>
+                <box style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
+                  <text style={{ fg: theme.muted }}>5-hour:</text>
+                  <ProgressBar value={claudeQuota.fiveHourRemaining} width={15} />
+                  {claudeQuota.fiveHourResetsAt && (
+                    <text style={{ fg: theme.muted }}>
+                      (resets in {formatResetTime(claudeQuota.fiveHourResetsAt)})
+                    </text>
+                  )}
+                </box>
+                {/* Only show 7-day bar if the user has a 7-day limit */}
+                {claudeQuota.sevenDayResetsAt && (
+                  <box style={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
+                    <text style={{ fg: theme.muted }}>7-day: </text>
+                    <ProgressBar value={claudeQuota.sevenDayRemaining} width={15} />
+                    <text style={{ fg: theme.muted }}>
+                      (resets in {formatResetTime(claudeQuota.sevenDayResetsAt)})
+                    </text>
+                  </box>
+                )}
+              </box>
+            ) : (
+              <text style={{ fg: theme.muted }}>Unable to fetch quota</text>
+            )}
+          </box>
+        )}
+      </box>
     </BottomBanner>
   )
 }