@swarmclawai/swarmclaw 1.0.0 → 1.0.3

package/src/app/api/webhooks/[id]/helpers.ts

@@ -0,0 +1,253 @@
+import { genId } from '@/lib/id'
+import { NextResponse } from 'next/server'
+import { loadAgents, loadSessions, saveSessions, loadWebhooks, appendWebhookLog, upsertWebhookRetry } from '@/lib/server/storage'
+import { WORKSPACE_DIR } from '@/lib/server/data-dir'
+import { enqueueSessionRun } from '@/lib/server/runtime/session-run-manager'
+import { enqueueSystemEvent } from '@/lib/server/runtime/system-events'
+import { requestHeartbeatNow } from '@/lib/server/runtime/heartbeat-wake'
+import { notFound } from '@/lib/server/collection-helpers'
+import type { WebhookRetryEntry } from '@/types'
+import { triggerWebhookWatchJobs } from '@/lib/server/runtime/watch-jobs'
+import { errorMessage } from '@/lib/shared-utils'
+
+export type WebhookPostDeps = {
+  enqueueRun: typeof enqueueSessionRun
+  enqueueEvent: typeof enqueueSystemEvent
+  requestHeartbeat: typeof requestHeartbeatNow
+}
+
+export const defaultWebhookPostDeps: WebhookPostDeps = {
+  enqueueRun: enqueueSessionRun,
+  enqueueEvent: enqueueSystemEvent,
+  requestHeartbeat: requestHeartbeatNow,
+}
+
+function normalizeEvents(value: unknown): string[] {
+  if (!Array.isArray(value)) return []
+  return value
+    .filter((v): v is string => typeof v === 'string')
+    .map((v) => v.trim())
+    .filter(Boolean)
+}
+
+function eventMatches(registered: string[], incoming: string): boolean {
+  if (registered.length === 0) return true
+  if (registered.includes('*')) return true
+  return registered.includes(incoming)
+}
+
+export async function handleWebhookPost(
+  req: Request,
+  id: string,
+  deps: WebhookPostDeps = defaultWebhookPostDeps,
+) {
+  const webhooks = loadWebhooks()
+  const webhook = webhooks[id]
+  if (!webhook) return notFound('Webhook not found')
+  if (webhook.isEnabled === false) {
+    appendWebhookLog(genId(8), {
+      id: genId(8), webhookId: id, event: 'unknown',
+      payload: '', status: 'error', error: 'Webhook is disabled', timestamp: Date.now(),
+    })
+    return NextResponse.json({ error: 'Webhook is disabled' }, { status: 409 })
+  }
+
+  const { timingSafeEqual } = await import('node:crypto')
+  const secret = typeof webhook.secret === 'string' ? webhook.secret.trim() : ''
+  if (secret) {
+    const url = new URL(req.url)
+    const provided = req.headers.get('x-webhook-secret') || url.searchParams.get('secret') || ''
+    const secretBuf = Buffer.from(secret)
+    const providedBuf = Buffer.from(provided)
+    // timingSafeEqual requires equal lengths; compare against secretBuf if lengths differ
+    const compareBuf = providedBuf.length === secretBuf.length ? providedBuf : secretBuf
+    const isInvalid = providedBuf.length !== secretBuf.length || !timingSafeEqual(secretBuf, compareBuf)
+    if (isInvalid) {
+      appendWebhookLog(genId(8), {
+        id: genId(8), webhookId: id, event: 'unknown',
+        payload: '', status: 'error', error: 'Invalid webhook secret', timestamp: Date.now(),
+      })
+      return NextResponse.json({ error: 'Invalid webhook secret' }, { status: 401 })
+    }
+  }
+
+  let payload: unknown = null
+  let rawBody = ''
+  const contentType = req.headers.get('content-type') || ''
+  if (contentType.includes('application/json')) {
+    try {
+      payload = await req.json()
+      rawBody = JSON.stringify(payload)
+    } catch {
+      payload = {}
+      rawBody = '{}'
+    }
+  } else {
+    rawBody = await req.text()
+    try {
+      payload = JSON.parse(rawBody)
+    } catch {
+      payload = { raw: rawBody }
+    }
+  }
+
+  const url = new URL(req.url)
+  const incomingEvent = String(
+    (payload as Record<string, unknown> | null)?.type
+      || (payload as Record<string, unknown> | null)?.event
+      || req.headers.get('x-event-type')
+      || url.searchParams.get('event')
+      || 'unknown',
+  )
+  const registeredEvents = normalizeEvents(webhook.events)
+  if (!eventMatches(registeredEvents, incomingEvent)) {
+    return NextResponse.json({
+      ok: true,
+      ignored: true,
+      reason: 'Event does not match webhook filters',
+      event: incomingEvent,
+    })
+  }
+
+  triggerWebhookWatchJobs({
+    webhookId: id,
+    event: incomingEvent,
+    payloadPreview: rawBody,
+  })
+
+  const agents = loadAgents()
+  const agent = webhook.agentId ? agents[webhook.agentId] : null
+  if (!agent) {
+    appendWebhookLog(genId(8), {
+      id: genId(8), webhookId: id, event: incomingEvent,
+      payload: (rawBody || '').slice(0, 2000), status: 'error', error: 'Webhook agent is not configured or missing', timestamp: Date.now(),
+    })
+    return NextResponse.json({ error: 'Webhook agent is not configured or missing' }, { status: 400 })
+  }
+
+  const sessions = loadSessions()
+  const sessionName = `webhook:${id}`
+  let session = Object.values(sessions).find((s: unknown) => {
+    const rec = s as Record<string, unknown>
+    return rec.name === sessionName && rec.agentId === agent.id
+  }) as Record<string, unknown> | undefined
+  if (!session) {
+    const sessionId = genId()
+    const now = Date.now()
+    session = {
+      id: sessionId,
+      name: sessionName,
+      cwd: WORKSPACE_DIR,
+      user: 'system',
+      provider: agent.provider || 'claude-cli',
+      model: agent.model || '',
+      credentialId: agent.credentialId || null,
+      apiEndpoint: agent.apiEndpoint || null,
+      claudeSessionId: null,
+      codexThreadId: null,
+      opencodeSessionId: null,
+      delegateResumeIds: {
+        claudeCode: null,
+        codex: null,
+        opencode: null,
+      },
+      messages: [],
+      createdAt: now,
+      lastActiveAt: now,
+      sessionType: 'human',
+      agentId: agent.id,
+      parentSessionId: null,
+      tools: agent.tools || [],
+      heartbeatEnabled: agent.heartbeatEnabled ?? false,
+      heartbeatIntervalSec: agent.heartbeatIntervalSec ?? null,
+    }
+    sessions[session.id as string] = session
+    saveSessions(sessions)
+  }
+
+  const sid = session.id as string
+  const payloadPreview = (rawBody || '').slice(0, 12_000)
+  const prompt = [
+    'Webhook event received.',
+    `Webhook ID: ${id}`,
+    `Webhook Name: ${webhook.name || id}`,
+    `Source: ${webhook.source || 'custom'}`,
+    `Event: ${incomingEvent}`,
+    `Received At: ${new Date().toISOString()}`,
+    '',
+    'Payload:',
+    payloadPreview || '(empty payload)',
+    '',
+    'Handle this event now. If this requires notifying the user, use configured connector tools.',
+  ].join('\n')
+
+  try {
+    const run = deps.enqueueRun({
+      sessionId: sid,
+      message: prompt,
+      source: 'webhook',
+      internal: false,
+      mode: 'followup',
+    })
+
+    // Enqueue system event + heartbeat wake
+    deps.enqueueEvent(sid, `Webhook received: ${webhook.name || id} (${incomingEvent})`)
+    if (webhook.agentId) {
+      deps.requestHeartbeat({
+        agentId: webhook.agentId,
+        eventId: `webhook:${id}:${incomingEvent}:${Date.now()}`,
+        reason: 'webhook',
+        source: `webhook:${id}`,
+        resumeMessage: `Webhook received: ${webhook.name || id} (${incomingEvent})`,
+        detail: payloadPreview || '(empty payload)',
+      })
+    }
+
+    appendWebhookLog(genId(8), {
+      id: genId(8), webhookId: id, event: incomingEvent,
+      payload: (rawBody || '').slice(0, 2000), status: 'success',
+      sessionId: sid, runId: run.runId, timestamp: Date.now(),
+    })
+
+    return NextResponse.json({
+      ok: true,
+      webhookId: id,
+      event: incomingEvent,
+      sessionId: sid,
+      runId: run.runId,
+    })
+  } catch (err: unknown) {
+    const errorMsg = errorMessage(err)
+
+    // Enqueue for retry with exponential backoff
+    const retryId = genId()
+    const now = Date.now()
+    const retryEntry: WebhookRetryEntry = {
+      id: retryId,
+      webhookId: id,
+      event: incomingEvent,
+      payload: (rawBody || '').slice(0, 12_000),
+      attempts: 1,
+      maxAttempts: 3,
+      nextRetryAt: now + 30_000,
+      deadLettered: false,
+      createdAt: now,
+    }
+    upsertWebhookRetry(retryId, retryEntry)
+
+    appendWebhookLog(genId(8), {
+      id: genId(8), webhookId: id, event: incomingEvent,
+      payload: (rawBody || '').slice(0, 2000), status: 'error',
+      error: `Dispatch failed, queued for retry: ${errorMsg}`, timestamp: Date.now(),
+    })
+
+    return NextResponse.json({
+      ok: true,
+      webhookId: id,
+      event: incomingEvent,
+      retryQueued: true,
+      retryId,
+      error: errorMsg,
+    })
+  }
+}

package/src/app/api/webhooks/[id]/route.ts

@@ -1,31 +1,11 @@
-import { genId } from '@/lib/id'
-import { timingSafeEqual } from 'node:crypto'
 import { NextResponse } from 'next/server'
-import { loadAgents, loadSessions, loadWebhooks, saveSessions, saveWebhooks, appendWebhookLog, upsertWebhookRetry } from '@/lib/server/storage'
-import { WORKSPACE_DIR } from '@/lib/server/data-dir'
-import { enqueueSessionRun } from '@/lib/server/runtime/session-run-manager'
-import { enqueueSystemEvent } from '@/lib/server/runtime/system-events'
-import { requestHeartbeatNow } from '@/lib/server/runtime/heartbeat-wake'
+import { loadWebhooks, saveWebhooks } from '@/lib/server/storage'
 import { mutateItem, deleteItem, notFound, type CollectionOps } from '@/lib/server/collection-helpers'
-import type { WebhookRetryEntry } from '@/types'
-import { triggerWebhookWatchJobs } from '@/lib/server/runtime/watch-jobs'
-import { errorMessage } from '@/lib/shared-utils'
+import { handleWebhookPost } from './helpers'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ops: CollectionOps<any> = { load: loadWebhooks, save: saveWebhooks }
 
-type WebhookPostDeps = {
-  enqueueRun: typeof enqueueSessionRun
-  enqueueEvent: typeof enqueueSystemEvent
-  requestHeartbeat: typeof requestHeartbeatNow
-}
-
-const defaultWebhookPostDeps: WebhookPostDeps = {
-  enqueueRun: enqueueSessionRun,
-  enqueueEvent: enqueueSystemEvent,
-  requestHeartbeat: requestHeartbeatNow,
-}
-
 function normalizeEvents(value: unknown): string[] {
   if (!Array.isArray(value)) return []
   return value
@@ -34,12 +14,6 @@ function normalizeEvents(value: unknown): string[] {
     .filter(Boolean)
 }
 
-function eventMatches(registered: string[], incoming: string): boolean {
-  if (registered.length === 0) return true
-  if (registered.includes('*')) return true
-  return registered.includes(incoming)
-}
-
 export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
   const webhooks = loadWebhooks()
@@ -71,221 +45,6 @@ export async function DELETE(_req: Request, { params }: { params: Promise<{ id:
   return NextResponse.json({ ok: true })
 }
 
-export async function handleWebhookPost(
-  req: Request,
-  id: string,
-  deps: WebhookPostDeps = defaultWebhookPostDeps,
-) {
-  const webhooks = loadWebhooks()
-  const webhook = webhooks[id]
-  if (!webhook) return notFound('Webhook not found')
-  if (webhook.isEnabled === false) {
-    appendWebhookLog(genId(8), {
-      id: genId(8), webhookId: id, event: 'unknown',
-      payload: '', status: 'error', error: 'Webhook is disabled', timestamp: Date.now(),
-    })
-    return NextResponse.json({ error: 'Webhook is disabled' }, { status: 409 })
-  }
-
-  const secret = typeof webhook.secret === 'string' ? webhook.secret.trim() : ''
-  if (secret) {
-    const url = new URL(req.url)
-    const provided = req.headers.get('x-webhook-secret') || url.searchParams.get('secret') || ''
-    const secretBuf = Buffer.from(secret)
-    const providedBuf = Buffer.from(provided)
-    // timingSafeEqual requires equal lengths; compare against secretBuf if lengths differ
-    const compareBuf = providedBuf.length === secretBuf.length ? providedBuf : secretBuf
-    const isInvalid = providedBuf.length !== secretBuf.length || !timingSafeEqual(secretBuf, compareBuf)
-    if (isInvalid) {
-      appendWebhookLog(genId(8), {
-        id: genId(8), webhookId: id, event: 'unknown',
-        payload: '', status: 'error', error: 'Invalid webhook secret', timestamp: Date.now(),
-      })
-      return NextResponse.json({ error: 'Invalid webhook secret' }, { status: 401 })
-    }
-  }
-
-  let payload: unknown = null
-  let rawBody = ''
-  const contentType = req.headers.get('content-type') || ''
-  if (contentType.includes('application/json')) {
-    try {
-      payload = await req.json()
-      rawBody = JSON.stringify(payload)
-    } catch {
-      payload = {}
-      rawBody = '{}'
-    }
-  } else {
-    rawBody = await req.text()
-    try {
-      payload = JSON.parse(rawBody)
-    } catch {
-      payload = { raw: rawBody }
-    }
-  }
-
-  const url = new URL(req.url)
-  const incomingEvent = String(
-    (payload as Record<string, unknown> | null)?.type
-      || (payload as Record<string, unknown> | null)?.event
-      || req.headers.get('x-event-type')
-      || url.searchParams.get('event')
-      || 'unknown',
-  )
-  const registeredEvents = normalizeEvents(webhook.events)
-  if (!eventMatches(registeredEvents, incomingEvent)) {
-    return NextResponse.json({
-      ok: true,
-      ignored: true,
-      reason: 'Event does not match webhook filters',
-      event: incomingEvent,
-    })
-  }
-
-  triggerWebhookWatchJobs({
-    webhookId: id,
-    event: incomingEvent,
-    payloadPreview: rawBody,
-  })
-
-  const agents = loadAgents()
-  const agent = webhook.agentId ? agents[webhook.agentId] : null
-  if (!agent) {
-    appendWebhookLog(genId(8), {
-      id: genId(8), webhookId: id, event: incomingEvent,
-      payload: (rawBody || '').slice(0, 2000), status: 'error', error: 'Webhook agent is not configured or missing', timestamp: Date.now(),
-    })
-    return NextResponse.json({ error: 'Webhook agent is not configured or missing' }, { status: 400 })
-  }
-
-  const sessions = loadSessions()
-  const sessionName = `webhook:${id}`
-  let session = Object.values(sessions).find((s: unknown) => {
-    const rec = s as Record<string, unknown>
-    return rec.name === sessionName && rec.agentId === agent.id
-  }) as Record<string, unknown> | undefined
-  if (!session) {
-    const sessionId = genId()
-    const now = Date.now()
-    session = {
-      id: sessionId,
-      name: sessionName,
-      cwd: WORKSPACE_DIR,
-      user: 'system',
-      provider: agent.provider || 'claude-cli',
-      model: agent.model || '',
-      credentialId: agent.credentialId || null,
-      apiEndpoint: agent.apiEndpoint || null,
-      claudeSessionId: null,
-      codexThreadId: null,
-      opencodeSessionId: null,
-      delegateResumeIds: {
-        claudeCode: null,
-        codex: null,
-        opencode: null,
-      },
-      messages: [],
-      createdAt: now,
-      lastActiveAt: now,
-      sessionType: 'human',
-      agentId: agent.id,
-      parentSessionId: null,
-      tools: agent.tools || [],
-      heartbeatEnabled: agent.heartbeatEnabled ?? false,
-      heartbeatIntervalSec: agent.heartbeatIntervalSec ?? null,
-    }
-    sessions[session.id as string] = session
-    saveSessions(sessions)
-  }
-
-  const sid = session.id as string
-  const payloadPreview = (rawBody || '').slice(0, 12_000)
-  const prompt = [
-    'Webhook event received.',
-    `Webhook ID: ${id}`,
-    `Webhook Name: ${webhook.name || id}`,
-    `Source: ${webhook.source || 'custom'}`,
-    `Event: ${incomingEvent}`,
-    `Received At: ${new Date().toISOString()}`,
-    '',
-    'Payload:',
-    payloadPreview || '(empty payload)',
-    '',
-    'Handle this event now. If this requires notifying the user, use configured connector tools.',
-  ].join('\n')
-
-  try {
-    const run = deps.enqueueRun({
-      sessionId: sid,
-      message: prompt,
-      source: 'webhook',
-      internal: false,
-      mode: 'followup',
-    })
-
-    // Enqueue system event + heartbeat wake
-    deps.enqueueEvent(sid, `Webhook received: ${webhook.name || id} (${incomingEvent})`)
-    if (webhook.agentId) {
-      deps.requestHeartbeat({
-        agentId: webhook.agentId,
-        eventId: `webhook:${id}:${incomingEvent}:${Date.now()}`,
-        reason: 'webhook',
-        source: `webhook:${id}`,
-        resumeMessage: `Webhook received: ${webhook.name || id} (${incomingEvent})`,
-        detail: payloadPreview || '(empty payload)',
-      })
-    }
-
-    appendWebhookLog(genId(8), {
-      id: genId(8), webhookId: id, event: incomingEvent,
-      payload: (rawBody || '').slice(0, 2000), status: 'success',
-      sessionId: sid, runId: run.runId, timestamp: Date.now(),
-    })
-
-    return NextResponse.json({
-      ok: true,
-      webhookId: id,
-      event: incomingEvent,
-      sessionId: sid,
-      runId: run.runId,
-    })
-  } catch (err: unknown) {
-    const errorMsg = errorMessage(err)
-
-    // Enqueue for retry with exponential backoff
-    const retryId = genId()
-    const now = Date.now()
-    const retryEntry: WebhookRetryEntry = {
-      id: retryId,
-      webhookId: id,
-      event: incomingEvent,
-      payload: (rawBody || '').slice(0, 12_000),
-      attempts: 1,
-      maxAttempts: 3,
-      nextRetryAt: now + 30_000,
-      deadLettered: false,
-      createdAt: now,
-    }
-    upsertWebhookRetry(retryId, retryEntry)
-
-    appendWebhookLog(genId(8), {
-      id: genId(8), webhookId: id, event: incomingEvent,
-      payload: (rawBody || '').slice(0, 2000), status: 'error',
-      error: `Dispatch failed, queued for retry: ${errorMsg}`, timestamp: Date.now(),
-    })
-
-    return NextResponse.json({
-      ok: true,
-      webhookId: id,
-      event: incomingEvent,
-      retryQueued: true,
-      retryId,
-      error: errorMsg,
-    })
-  }
-}
-
 export async function POST(req: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
   return handleWebhookPost(req, id)

package/src/app/api/webhooks/route.test.ts

@@ -2,7 +2,7 @@ import assert from 'node:assert/strict'
 import test, { afterEach } from 'node:test'
 
 import { GET as getWebhookHistory } from './[id]/history/route'
-import { handleWebhookPost } from './[id]/route'
+import { handleWebhookPost } from './[id]/helpers'
 import {
   loadAgents,
   loadSessions,
@@ -126,7 +126,9 @@ test('handleWebhookPost creates a session, records success history, and triggers
   assert.match(String(calls.runs[0].message), /Event: build\.completed/)
 
   assert.deepEqual(calls.events, [[sessionId, 'Webhook received: Webhook Smoke (build.completed)']])
-  assert.deepEqual(calls.heartbeats, [{ agentId: 'agent-webhook-smoke', reason: 'webhook' }])
+  assert.equal(calls.heartbeats.length, 1)
+  assert.equal(calls.heartbeats[0].agentId, 'agent-webhook-smoke')
+  assert.equal(calls.heartbeats[0].reason, 'webhook')
 
   const logEntries = Object.values(loadWebhookLogs()) as Array<Record<string, unknown>>
   const successEntry = logEntries.find((entry) => entry.webhookId === webhookId && entry.status === 'success')

package/src/app/usage/page.tsx

@@ -61,6 +61,16 @@ const CHART_COLORS = [
   '#60A5FA', '#4ADE80',
 ]
 
+function numericChartValue(value: unknown): number {
+  if (Array.isArray(value)) return numericChartValue(value[0])
+  if (typeof value === 'number') return Number.isFinite(value) ? value : 0
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : 0
+  }
+  return 0
+}
+
 
 function formatBucketLabel(bucket: string, range: Range): string {
   if (range === '24h') {
@@ -306,7 +316,7 @@ export default function UsagePage() {
                       <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
                       <XAxis dataKey="label" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} />
                       <YAxis tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} tickFormatter={formatTokens} />
-                      <Tooltip {...tooltipStyle} formatter={(value: number | undefined) => [formatTokens(value ?? 0), 'Tokens']} />
+                      <Tooltip {...tooltipStyle} formatter={(value) => [formatTokens(numericChartValue(value)), 'Tokens']} />
                       <Line type="monotone" dataKey="tokens" stroke="#818CF8" strokeWidth={2} dot={false} activeDot={{ r: 4, fill: '#818CF8' }} />
                     </LineChart>
                   </ResponsiveContainer>
@@ -324,8 +334,8 @@ export default function UsagePage() {
                     <BarChart data={providerData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
                       <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
                       <XAxis dataKey="name" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} />
-                      <YAxis tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} tickFormatter={(v: number) => `$${v}`} />
-                      <Tooltip {...tooltipStyle} formatter={(value: number | undefined) => [formatCost(value ?? 0), 'Cost']} />
+                      <YAxis tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} tickFormatter={(value) => `$${numericChartValue(value)}`} />
+                      <Tooltip {...tooltipStyle} formatter={(value) => [formatCost(numericChartValue(value)), 'Cost']} />
                       <Bar dataKey="cost" radius={[4, 4, 0, 0]}>
                         {providerData.map((_entry, i) => (
                           <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
@@ -343,9 +353,9 @@ export default function UsagePage() {
                   <ResponsiveContainer width="100%" height={280}>
                     <BarChart data={agentData} layout="vertical" margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
                       <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" horizontal={false} />
-                      <XAxis type="number" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} tickFormatter={(v: number) => `$${v}`} />
+                      <XAxis type="number" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} tickFormatter={(value) => `$${numericChartValue(value)}`} />
                       <YAxis type="category" dataKey="name" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} width={100} />
-                      <Tooltip {...tooltipStyle} formatter={(value: number | undefined) => [formatCost(value ?? 0), 'Cost']} />
+                      <Tooltip {...tooltipStyle} formatter={(value) => [formatCost(numericChartValue(value)), 'Cost']} />
                       <Bar dataKey="cost" radius={[0, 4, 4, 0]}>
                         {agentData.map((_entry, i) => (
                           <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
@@ -370,9 +380,9 @@ export default function UsagePage() {
                       <YAxis type="category" dataKey="name" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} width={120} />
                       <Tooltip
                         {...tooltipStyle}
-                        formatter={(value: number | undefined, name?: string) => [
-                          formatTokens(value ?? 0),
-                          name === 'definitionTokens' ? 'Context (definitions)' : 'Invocations',
+                        formatter={(value, name) => [
+                          formatTokens(numericChartValue(value)),
+                          String(name) === 'definitionTokens' ? 'Context (definitions)' : 'Invocations',
                         ]}
                       />
                       <Bar dataKey="definitionTokens" fill="#818CF8" radius={[0, 0, 0, 0]} stackId="a" name="definitionTokens" />
@@ -381,9 +391,9 @@ export default function UsagePage() {
                         verticalAlign="bottom"
                         iconType="circle"
                         iconSize={8}
-                        formatter={(value: string) => (
+                        formatter={(value) => (
                           <span style={{ color: '#a0a0b0', fontSize: 11 }}>
-                            {value === 'definitionTokens' ? 'Context (definitions)' : 'Invocations'}
+                            {String(value) === 'definitionTokens' ? 'Context (definitions)' : 'Invocations'}
                           </span>
                         )}
                       />
@@ -431,7 +441,7 @@ export default function UsagePage() {
                           <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.06)" />
                           <XAxis dataKey="label" tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} />
                           <YAxis tick={{ fill: '#888', fontSize: 11 }} axisLine={false} tickLine={false} allowDecimals={false} />
-                          <Tooltip {...tooltipStyle} formatter={(value: number | undefined) => [value ?? 0, 'Completed']} />
+                          <Tooltip {...tooltipStyle} formatter={(value) => [numericChartValue(value), 'Completed']} />
                           <Bar dataKey="count" fill="#34D399" radius={[4, 4, 0, 0]} />
                         </BarChart>
                       </ResponsiveContainer>
@@ -458,7 +468,7 @@ export default function UsagePage() {
                           <Bar dataKey="completed" fill="#34D399" radius={[4, 4, 0, 0]} stackId="a" name="Completed" />
                           <Bar dataKey="failed" fill="#F87171" radius={[4, 4, 0, 0]} stackId="a" name="Failed" />
                           <Legend verticalAlign="bottom" iconType="circle" iconSize={8}
-                            formatter={(value: string) => <span style={{ color: '#a0a0b0', fontSize: 11 }}>{value}</span>} />
+                            formatter={(value) => <span style={{ color: '#a0a0b0', fontSize: 11 }}>{String(value)}</span>} />
                         </BarChart>
                       </ResponsiveContainer>
                     ) : (