Show the workspace credit balance in the topbar

Read from GET /organizations/me, refreshed after every action and every
30 seconds, since agents and schedules spend credits in the background.
The date is dropped from the topbar, and its items wrap on phones.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/AppLayout.tsx

@@ -1,7 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 import { useClerk, useOrganization, useUser } from '@clerk/react'
+import { useQuery } from '@tanstack/react-query'
 import { NavLink, Outlet, useLocation } from 'react-router-dom'
 import { LANGS, locale, setLang, t, useLang, type Key } from '../i18n'
+import { workspaceCredits } from '../api/engine'
 import { Brand, Icon, type IconName } from './Icon'
 import { Toaster } from './Toast'
 
@@ -57,6 +59,17 @@ function HelpDialog({ onClose }: { onClose: () => void }) {
   )
 }
 
+// Polled because agents and schedules also spend credits outside this tab; main.tsx refreshes it after every mutation.
+function CreditBalance() {
+  const credits = useQuery({ queryKey: ['credits'], queryFn: workspaceCredits, refetchInterval: 30_000 })
+  if (credits.data == null) return null
+  return (
+    <span className="credit-pill" title={t('layout.creditsTitle')}>
+      <Icon name="coin" />{t('common.credits', { n: credits.data.toLocaleString(locale()) })}
+    </span>
+  )
+}
+
 export function AppLayout() {
   useLang()
   const [help, setHelp] = useState(false)
@@ -66,7 +79,6 @@ export function AppLayout() {
   const { pathname } = useLocation()
   const current = NAV.find(n => pathname.startsWith(n.to))
   const name = user?.fullName || user?.primaryEmailAddress?.emailAddress || '-'
-  const today = new Intl.DateTimeFormat(locale(), { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })
 
   return (
     <div className="app">
@@ -101,7 +113,7 @@ export function AppLayout() {
           <div className="breadcrumb">{t('layout.breadcrumb')} <span>/</span> <b>{current ? t(current.label) : ''}</b></div>
           <div className="topbar-right">
             <span className="demo-indicator"><i></i> {t('layout.engine')}</span>
-            <span>{today.format(new Date())}</span>
+            <CreditBalance />
             <LanguageSwitch />
           </div>
         </header>