improvement(usage): update usage limit in realtime, standardize token output object across providers (#2553)

* improvement(usage-limit): update usage in real time, fix token output object

* updated tokenBreakdown to tokens, standardized input/output/total token object type across providers

* update remaining references

* ack PR comment

* remove singleton query client instance from hooks, leave only in zustand

Author: waleedlatif1

apps/sim/app/(landing)/components/nav/nav.tsx

@@ -20,7 +20,7 @@ interface NavProps {
 }
 
 export default function Nav({ hideAuthButtons = false, variant = 'landing' }: NavProps = {}) {
-  const [githubStars, setGithubStars] = useState('18.6k')
+  const [githubStars, setGithubStars] = useState('24k')
   const [isHovered, setIsHovered] = useState(false)
   const [isLoginHovered, setIsLoginHovered] = useState(false)
   const router = useRouter()

apps/sim/app/_shell/providers/query-provider.tsx

@@ -1,26 +1,42 @@
 'use client'
 
-import { type ReactNode, useState } from 'react'
+import type { ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 
-export function QueryProvider({ children }: { children: ReactNode }) {
-  const [queryClient] = useState(
-    () =>
-      new QueryClient({
-        defaultOptions: {
-          queries: {
-            staleTime: 30 * 1000,
-            gcTime: 5 * 60 * 1000,
-            refetchOnWindowFocus: false,
-            retry: 1,
-            retryOnMount: false,
-          },
-          mutations: {
-            retry: 1,
-          },
-        },
-      })
-  )
+/**
+ * Singleton QueryClient instance for client-side use.
+ * Can be imported directly for cache operations outside React components.
+ */
+function makeQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 30 * 1000,
+        gcTime: 5 * 60 * 1000,
+        refetchOnWindowFocus: false,
+        retry: 1,
+        retryOnMount: false,
+      },
+      mutations: {
+        retry: 1,
+      },
+    },
+  })
+}
+
+let browserQueryClient: QueryClient | undefined
 
+export function getQueryClient() {
+  if (typeof window === 'undefined') {
+    return makeQueryClient()
+  }
+  if (!browserQueryClient) {
+    browserQueryClient = makeQueryClient()
+  }
+  return browserQueryClient
+}
+
+export function QueryProvider({ children }: { children: ReactNode }) {
+  const queryClient = getQueryClient()
   return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
 }

apps/sim/app/api/logs/route.ts

@@ -259,15 +259,16 @@ export async function GET(request: NextRequest) {
                   input: 0,
                   output: 0,
                   total: 0,
-                  tokens: { prompt: 0, completion: 0, total: 0 },
+                  tokens: { input: 0, output: 0, total: 0 },
                 })
               }
               const modelCost = models.get(block.cost.model)
               modelCost.input += Number(block.cost.input) || 0
               modelCost.output += Number(block.cost.output) || 0
               modelCost.total += Number(block.cost.total) || 0
-              modelCost.tokens.prompt += block.cost.tokens?.prompt || 0
-              modelCost.tokens.completion += block.cost.tokens?.completion || 0
+              modelCost.tokens.input += block.cost.tokens?.input || block.cost.tokens?.prompt || 0
+              modelCost.tokens.output +=
+                block.cost.tokens?.output || block.cost.tokens?.completion || 0
               modelCost.tokens.total += block.cost.tokens?.total || 0
             }
           }
@@ -279,8 +280,8 @@ export async function GET(request: NextRequest) {
           output: totalOutputCost,
           tokens: {
             total: totalTokens,
-            prompt: totalPromptTokens,
-            completion: totalCompletionTokens,
+            input: totalPromptTokens,
+            output: totalCompletionTokens,
           },
           models: Object.fromEntries(models),
         }

apps/sim/app/api/providers/route.ts

@@ -165,8 +165,8 @@ export async function POST(request: NextRequest) {
               : '',
             model: executionData.output?.model,
             tokens: executionData.output?.tokens || {
-              prompt: 0,
-              completion: 0,
+              input: 0,
+              output: 0,
               total: 0,
             },
             // Sanitize any potential Unicode characters in tool calls

apps/sim/app/api/tools/search/route.ts

@@ -87,8 +87,8 @@ export async function POST(request: NextRequest) {
       output: 0,
       total: SEARCH_TOOL_COST,
       tokens: {
-        prompt: 0,
-        completion: 0,
+        input: 0,
+        output: 0,
         total: 0,
       },
       model: 'search-exa',

apps/sim/app/api/workspaces/[id]/notifications/[notificationId]/test/route.ts

@@ -53,7 +53,7 @@ function buildTestPayload(subscription: typeof workspaceNotificationSubscription
       totalDurationMs: 5000,
       cost: {
         total: 0.00123,
-        tokens: { prompt: 100, completion: 50, total: 150 },
+        tokens: { input: 100, output: 50, total: 150 },
       },
     },
     links: {

apps/sim/app/chat/[identifier]/chat.tsx

@@ -117,7 +117,7 @@ export default function ChatClient({ identifier }: { identifier: string }) {
   const [error, setError] = useState<string | null>(null)
   const messagesEndRef = useRef<HTMLDivElement>(null)
   const messagesContainerRef = useRef<HTMLDivElement>(null)
-  const [starCount, setStarCount] = useState('19.4k')
+  const [starCount, setStarCount] = useState('24k')
   const [conversationId, setConversationId] = useState('')
 
   const [showScrollButton, setShowScrollButton] = useState(false)

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/frozen-canvas/frozen-canvas.tsx

@@ -131,8 +131,8 @@ function formatExecutionData(executionData: any) {
       : null,
     tokens: tokens
       ? {
-          prompt: tokens.prompt || 0,
-          completion: tokens.completion || 0,
+          input: tokens.input || tokens.prompt || 0,
+          output: tokens.output || tokens.completion || 0,
           total: tokens.total || 0,
         }
       : null,
@@ -347,12 +347,12 @@ function PinnedLogs({
             </h4>
             <div className='space-y-[4px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-3)] p-[12px] text-[13px]'>
               <div className='flex justify-between text-[var(--text-primary)]'>
-                <span>Prompt:</span>
-                <span>{formatted.tokens.prompt}</span>
+                <span>Input:</span>
+                <span>{formatted.tokens.input}</span>
               </div>
               <div className='flex justify-between text-[var(--text-primary)]'>
-                <span>Completion:</span>
-                <span>{formatted.tokens.completion}</span>
+                <span>Output:</span>
+                <span>{formatted.tokens.output}</span>
               </div>
               <div className='flex justify-between border-[var(--border)] border-t pt-[4px] font-medium text-[var(--text-primary)]'>
                 <span>Total:</span>
@@ -498,8 +498,8 @@ export function FrozenCanvas({
               total: null,
             },
             tokens: span.tokens || {
-              prompt: null,
-              completion: null,
+              input: null,
+              output: null,
               total: null,
             },
             modelUsed: span.model || null,

apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx

@@ -344,8 +344,8 @@ export const LogDetails = memo(function LogDetails({
                             Tokens:
                           </span>
                           <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
-                            {log.cost?.tokens?.prompt || 0} in / {log.cost?.tokens?.completion || 0}{' '}
-                            out
+                            {log.cost?.tokens?.input || log.cost?.tokens?.prompt || 0} in /{' '}
+                            {log.cost?.tokens?.output || log.cost?.tokens?.completion || 0} out
                           </span>
                         </div>
                       </div>

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx

@@ -116,7 +116,7 @@ export function CredentialSelector({
     setStoreValue('')
   }, [invalidSelection, selectedId, effectiveProviderId, setStoreValue])
 
-  useCredentialRefreshTriggers(refetchCredentials, effectiveProviderId, provider)
+  useCredentialRefreshTriggers(refetchCredentials)
 
   const handleOpenChange = useCallback(
     (isOpen: boolean) => {
@@ -268,11 +268,7 @@ export function CredentialSelector({
   )
 }
 
-function useCredentialRefreshTriggers(
-  refetchCredentials: () => Promise<unknown>,
-  effectiveProviderId?: string,
-  provider?: OAuthProvider
-) {
+function useCredentialRefreshTriggers(refetchCredentials: () => Promise<unknown>) {
   useEffect(() => {
     const refresh = () => {
       void refetchCredentials()
@@ -290,26 +286,12 @@ function useCredentialRefreshTriggers(
       }
     }
 
-    const handleCredentialDisconnected = (event: Event) => {
-      const customEvent = event as CustomEvent<{ providerId?: string }>
-      const providerId = customEvent.detail?.providerId
-
-      if (
-        providerId &&
-        (providerId === effectiveProviderId || (provider && providerId.startsWith(provider)))
-      ) {
-        refresh()
-      }
-    }
-
     document.addEventListener('visibilitychange', handleVisibilityChange)
     window.addEventListener('pageshow', handlePageShow)
-    window.addEventListener('credential-disconnected', handleCredentialDisconnected)
 
     return () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange)
       window.removeEventListener('pageshow', handlePageShow)
-      window.removeEventListener('credential-disconnected', handleCredentialDisconnected)
     }
-  }, [refetchCredentials, effectiveProviderId, provider])
+  }, [refetchCredentials])
 }