useActivityQuery as our own alternative to tanstackquery. activity tracker singelton that knows when the user was last active.

Author: jahooma

cli/src/chat.tsx

@@ -79,6 +79,7 @@ import { getClaudeOAuthStatus } from './utils/claude-oauth'
 import { createPasteHandler } from './utils/strings'
 import { computeInputLayoutMetrics } from './utils/text-layout'
 import { createMarkdownPalette } from './utils/theme-system'
+import { reportActivity } from './utils/activity-tracker'
 
 import type { CommandResult } from './commands/command-registry'
 import type { MultilineInputHandle } from './components/multiline-input'
@@ -249,7 +250,7 @@ export const Chat = ({
 
   const isConnected = useConnectionStatus(handleReconnection)
   const mainAgentTimer = useElapsedTime()
-  const { ad, reportActivity } = useGravityAd()
+  const { ad } = useGravityAd()
   const timerStartTime = mainAgentTimer.startTime
 
   // Set initial mode from CLI flag on mount
@@ -912,7 +913,7 @@ export const Chat = ({
       lastReportedActivityRef.current = now
       reportActivity()
     }
-  }, [inputValue, reportActivity])
+  }, [inputValue])
   useEffect(() => {
     cursorPositionRef.current = cursorPosition
   }, [cursorPosition])
@@ -989,13 +990,7 @@ export const Chat = ({
     reportActivity()
     const result = await onSubmitPrompt(inputValue, agentMode)
     handleCommandResult(result)
-  }, [
-    onSubmitPrompt,
-    inputValue,
-    agentMode,
-    handleCommandResult,
-    reportActivity,
-  ])
+  }, [onSubmitPrompt, inputValue, agentMode, handleCommandResult])
 
   const totalMentionMatches = agentMatches.length + fileMatches.length
   const historyNavUpEnabled =
@@ -1404,7 +1399,7 @@ export const Chat = ({
       lastMouseActivityRef.current = now
       reportActivity()
     }
-  }, [reportActivity])
+  }, [])
 
   return (
     <box

cli/src/components/out-of-credits-banner.tsx

@@ -1,6 +1,6 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query'
 import React, { useEffect, useState } from 'react'
 
+import { getActivityQueryData } from '../hooks/use-activity-query'
 import { usageQueryKeys, useUsageQuery } from '../hooks/use-usage-query'
 import { useChatStore } from '../state/chat-store'
 import { useTheme } from '../hooks/use-theme'
@@ -16,36 +16,26 @@ export const areCreditsRestored = () => creditsRestoredGlobal
 
 export const OutOfCreditsBanner = () => {
   const sessionCreditsUsed = useChatStore((state) => state.sessionCreditsUsed)
-  const queryClient = useQueryClient()
   const [creditsRestored, setCreditsRestored] = useState(false)
 
   const { data: apiData } = useUsageQuery({
     enabled: true,
+    refetchInterval: CREDIT_POLL_INTERVAL,
   })
 
-  const { data: cachedUsageData } = useQuery<{
+  // Get cached data for immediate display
+  const cachedUsageData = getActivityQueryData<{
     type: 'usage-response'
     usage: number
     remainingBalance: number | null
     balanceBreakdown?: { free: number; paid: number; ad?: number }
     next_quota_reset: string | null
-  }>({
-    queryKey: usageQueryKeys.current(),
-    enabled: false,
-  })
+  }>(usageQueryKeys.current())
 
   const theme = useTheme()
   const activeData = apiData || cachedUsageData
   const remainingBalance = activeData?.remainingBalance ?? 0
 
-  // Poll for credit updates
-  useEffect(() => {
-    const interval = setInterval(() => {
-      queryClient.invalidateQueries({ queryKey: usageQueryKeys.current() })
-    }, CREDIT_POLL_INTERVAL)
-    return () => clearInterval(interval)
-  }, [queryClient])
-
   // Track if we've confirmed the zero-balance state to avoid false positives from stale cache
   const [confirmedZeroBalance, setConfirmedZeroBalance] = useState(false)
 

cli/src/components/usage-banner.tsx

@@ -1,10 +1,10 @@
-import { useQuery, useQueryClient } from '@tanstack/react-query'
 import React, { useEffect } from 'react'
 import open from 'open'
 
 import { BottomBanner } from './bottom-banner'
 import { Button } from './button'
 import { ProgressBar } from './progress-bar'
+import { getActivityQueryData } from '../hooks/use-activity-query'
 import { useClaudeQuotaQuery } from '../hooks/use-claude-quota-query'
 import { usageQueryKeys, useUsageQuery } from '../hooks/use-usage-query'
 import { useChatStore } from '../state/chat-store'
@@ -41,7 +41,6 @@ const formatRenewalDate = (dateStr: string | null): string => {
 }
 
 export const UsageBanner = ({ showTime }: { showTime: number }) => {
-  const queryClient = useQueryClient()
   const sessionCreditsUsed = useChatStore((state) => state.sessionCreditsUsed)
   const setInputMode = useChatStore((state) => state.setInputMode)
 
@@ -60,27 +59,17 @@ export const UsageBanner = ({ showTime }: { showTime: number }) => {
     isFetching,
   } = useUsageQuery({
     enabled: true,
+    refetchInterval: USAGE_POLL_INTERVAL,
   })
 
-  // Manual polling using setInterval - TanStack Query's refetchInterval doesn't work
-  // reliably in terminal environments even with focusManager configuration
-  useEffect(() => {
-    const interval = setInterval(() => {
-      queryClient.invalidateQueries({ queryKey: usageQueryKeys.current() })
-    }, USAGE_POLL_INTERVAL)
-    return () => clearInterval(interval)
-  }, [queryClient])
-
-  const { data: cachedUsageData } = useQuery<{
+  // Get cached data for immediate display
+  const cachedUsageData = getActivityQueryData<{
     type: 'usage-response'
     usage: number
     remainingBalance: number | null
     balanceBreakdown?: { free: number; paid: number; ad?: number }
     next_quota_reset: string | null
-  }>({
-    queryKey: usageQueryKeys.current(),
-    enabled: false,
-  })
+  }>(usageQueryKeys.current())
 
   // Auto-hide after timeout
   useEffect(() => {