Connect claude subscription (#403)

Author: jahooma

bun.lock

@@ -15,6 +15,7 @@ import { getAdsEnabled } from './commands/ads'
 import { routeUserPrompt, addBashMessageToHistory } from './commands/router'
 import { AdBanner } from './components/ad-banner'
 import { ChatInputBar } from './components/chat-input-bar'
+import { BottomStatusLine } from './components/bottom-status-line'
 import { areCreditsRestored } from './components/out-of-credits-banner'
 import { LoadPreviousButton } from './components/load-previous-button'
 import { MessageWithAgents } from './components/message-with-agents'
@@ -26,6 +27,7 @@ import { useAgentValidation } from './hooks/use-agent-validation'
 import { useAskUserBridge } from './hooks/use-ask-user-bridge'
 import { authQueryKeys } from './hooks/use-auth-query'
 import { useChatInput } from './hooks/use-chat-input'
+import { useClaudeQuotaQuery } from './hooks/use-claude-quota-query'
 import {
   useChatKeyboard,
   type ChatKeyboardHandlers,
@@ -73,6 +75,7 @@ import {
   getStatusIndicatorState,
   type AuthStatus,
 } from './utils/status-indicator-state'
+import { getClaudeOAuthStatus } from './utils/claude-oauth'
 import { createPasteHandler } from './utils/strings'
 import { computeInputLayoutMetrics } from './utils/text-layout'
 import { createMarkdownPalette } from './utils/theme-system'
@@ -1360,6 +1363,15 @@ export const Chat = ({
     isAskUserActive: askUserState !== null,
   })
   const hasStatusIndicatorContent = statusIndicatorState.kind !== 'idle'
+
+  const isClaudeOAuthActive = getClaudeOAuthStatus().connected
+
+  // Fetch Claude quota when OAuth is active
+  const { data: claudeQuota } = useClaudeQuotaQuery({
+    enabled: isClaudeOAuthActive,
+    refetchInterval: 60 * 1000, // Refetch every 60 seconds
+  })
+
   const inputBoxTitle = useMemo(() => {
     const segments: string[] = []
 
@@ -1380,6 +1392,9 @@ export const Chat = ({
     !feedbackMode &&
     (hasStatusIndicatorContent || shouldShowQueuePreview || !isAtBottom)
 
+  // Determine if Claude is actively streaming/waiting
+  const isClaudeActive = isStreaming || isWaitingForResponse
+
   // Track mouse movement for ad activity (throttled)
   const lastMouseActivityRef = useRef<number>(0)
   const handleMouseActivity = useCallback(() => {
@@ -1541,6 +1556,12 @@ export const Chat = ({
             cwd: getProjectRoot() ?? process.cwd(),
           })}
         />
+
+        <BottomStatusLine
+          isClaudeConnected={isClaudeOAuthActive}
+          isClaudeActive={isClaudeActive}
+          claudeQuota={claudeQuota}
+        />
       </box>
     </box>
   )

cli/src/chat.tsx

@@ -442,6 +442,16 @@ export const COMMAND_REGISTRY: CommandDefinition[] = [
       return { openPublishMode: true }
     },
   }),
+  defineCommand({
+    name: 'connect:claude',
+    aliases: ['claude'],
+    handler: (params) => {
+      // Enter connect:claude mode to show the OAuth banner
+      useChatStore.getState().setInputMode('connect:claude')
+      params.saveToHistory(params.inputValue.trim())
+      clearInput(params)
+    },
+  }),
 ]
 
 export function findCommand(cmd: string): CommandDefinition | undefined {

cli/src/commands/command-registry.ts

@@ -14,6 +14,7 @@ import {
   extractReferralCode,
   normalizeReferralCode,
 } from './router-utils'
+import { handleClaudeAuthCode } from '../components/claude-connect-banner'
 import { getProjectRoot } from '../project-files'
 import { useChatStore } from '../state/chat-store'
 import {
@@ -284,6 +285,23 @@ export async function routeUserPrompt(
     return
   }
 
+  // Handle connect:claude mode input (authorization code)
+  if (inputMode === 'connect:claude') {
+    const code = trimmed
+    if (code) {
+      const result = await handleClaudeAuthCode(code)
+      setMessages((prev) => [
+        ...prev,
+        getUserMessage(trimmed),
+        getSystemMessage(result.message),
+      ])
+    }
+    saveToHistory(trimmed)
+    setInputValue({ text: '', cursorPosition: 0, lastEditDueToNav: false })
+    setInputMode('default')
+    return
+  }
+
   // Handle referral mode input
   if (inputMode === 'referral') {
     // Validate the referral code (3-50 alphanumeric chars with optional dashes)

cli/src/commands/router.ts

@@ -0,0 +1,82 @@
+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'
+
+interface BottomStatusLineProps {
+  /** Whether Claude OAuth is connected */
+  isClaudeConnected: boolean
+  /** Whether Claude is actively being used (streaming/waiting) */
+  isClaudeActive: boolean
+  /** Quota data from Anthropic API */
+  claudeQuota?: ClaudeQuotaData | null
+}
+
+/**
+ * Bottom status line component - shows below the input box
+ * Currently displays Claude subscription status when connected
+ */
+export const BottomStatusLine: React.FC<BottomStatusLineProps> = ({
+  isClaudeConnected,
+  isClaudeActive,
+  claudeQuota,
+}) => {
+  const theme = useTheme()
+
+  // Don't render if there's nothing to show
+  if (!isClaudeConnected) {
+    return null
+  }
+
+  // Use the more restrictive of the two quotas (5-hour window is usually the limiting factor)
+  const displayRemaining = claudeQuota
+    ? 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={{
+        width: '100%',
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        paddingRight: 1,
+      }}
+    >
+      <box
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 0,
+        }}
+      >
+        <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>
+  )
+}