@swarmclawai/swarmclaw 0.5.1 → 0.5.2

package/src/components/usage/metrics-dashboard.tsx

@@ -0,0 +1,278 @@
+'use client'
+
+import { useEffect, useState, useCallback } from 'react'
+import {
+  LineChart, Line, BarChart, Bar, PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend,
+} from 'recharts'
+import { useAppStore } from '@/stores/use-app-store'
+import { useWs } from '@/hooks/use-ws'
+import { api } from '@/lib/api-client'
+import type { BoardTask } from '@/types'
+
+type Range = '24h' | '7d' | '30d'
+
+interface TimePoint {
+  bucket: string
+  tokens: number
+  cost: number
+}
+
+interface UsageResponse {
+  records: unknown[]
+  totalTokens: number
+  totalCost: number
+  byAgent: Record<string, { tokens: number; cost: number }>
+  byProvider: Record<string, { tokens: number; cost: number }>
+  timeSeries: TimePoint[]
+}
+
+const RANGES: Range[] = ['24h', '7d', '30d']
+const RANGE_LABELS: Record<Range, string> = { '24h': '24 Hours', '7d': '7 Days', '30d': '30 Days' }
+
+const CHART_COLORS = [
+  '#818CF8', '#34D399', '#F59E0B', '#F87171',
+  '#A78BFA', '#2DD4BF', '#FB923C', '#E879F9',
+  '#60A5FA', '#4ADE80',
+]
+
+function formatTokens(n: number): string {
+  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
+  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
+  return String(n)
+}
+
+function formatCost(n: number): string {
+  return `$${n.toFixed(4)}`
+}
+
+function formatBucketLabel(bucket: string, range: Range): string {
+  if (range === '24h') {
+    // "2026-03-01T14" → "14:00"
+    const hour = bucket.split('T')[1]
+    return hour ? `${hour}:00` : bucket
+  }
+  // "2026-03-01" → "Mar 1"
+  const parts = bucket.split('-')
+  if (parts.length === 3) {
+    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+    const monthIdx = parseInt(parts[1], 10) - 1
+    return `${months[monthIdx]} ${parseInt(parts[2], 10)}`
+  }
+  return bucket
+}
+
+function computeCompletionRate(tasks: Record<string, BoardTask>): number {
+  const all = Object.values(tasks)
+  const eligible = all.filter((t) => t.status !== 'backlog' && t.status !== 'archived')
+  if (eligible.length === 0) return 0
+  const completed = eligible.filter((t) => t.status === 'completed').length
+  return Math.round((completed / eligible.length) * 100)
+}
+
+export function MetricsDashboard() {
+  const [range, setRange] = useState<Range>('24h')
+  const [data, setData] = useState<UsageResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const tasks = useAppStore((s) => s.tasks)
+  const loadTasks = useAppStore((s) => s.loadTasks)
+
+  const loadData = useCallback(async () => {
+    try {
+      const res = await api<UsageResponse>('GET', `/usage?range=${range}`)
+      setData(res)
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false)
+    }
+  }, [range])
+
+  useEffect(() => {
+    setLoading(true)
+    loadData()
+  }, [loadData])
+
+  useEffect(() => {
+    loadTasks()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useWs('usage', loadData, 30_000)
+
+  const completionRate = computeCompletionRate(tasks)
+
+  // Prepare chart data
+  const timeSeriesFormatted = (data?.timeSeries ?? []).map((pt) => ({
+    ...pt,
+    label: formatBucketLabel(pt.bucket, range),
+  }))
+
+  const providerData = Object.entries(data?.byProvider ?? {}).map(([name, v]) => ({
+    name,
+    cost: Math.round(v.cost * 10000) / 10000,
+    tokens: v.tokens,
+  }))
+
+  const agentData = Object.entries(data?.byAgent ?? {})
+    .sort((a, b) => b[1].cost - a[1].cost)
+    .slice(0, 10)
+    .map(([name, v]) => ({
+      name: name.length > 12 ? name.slice(0, 12) + '…' : name,
+      cost: Math.round(v.cost * 10000) / 10000,
+    }))
+
+  const tooltipStyle = {
+    contentStyle: {
+      background: '#1a1a2e',
+      border: '1px solid rgba(255,255,255,0.08)',
+      borderRadius: 8,
+      fontSize: 12,
+      color: '#e0e0e0',
+    },
+    itemStyle: { color: '#e0e0e0' },
+    labelStyle: { color: '#a0a0b0' },
+  }
+
+  return (
+    <div className="flex-1 flex flex-col h-full overflow-y-auto">
+      <div className="px-8 pt-6 pb-4 shrink-0">
+        <h1 className="font-display text-[28px] font-800 tracking-[-0.03em]">Usage</h1>
+        <p className="text-[13px] text-text-3 mt-1">Token usage, cost tracking &amp; agent performance</p>
+      </div>
+
+      {/* Range tabs */}
+      <div className="px-8 pb-4 shrink-0">
+        <div className="flex gap-1 bg-surface-2 rounded-[10px] p-1 w-fit">
+          {RANGES.map((r) => (
+            <button
+              key={r}
+              onClick={() => setRange(r)}
+              className={`px-3.5 py-1.5 rounded-[8px] text-[12px] font-600 transition-all cursor-pointer ${
+                range === r
+                  ? 'bg-accent-soft text-accent-bright'
+                  : 'text-text-3 hover:text-text-2'
+              }`}
+            >
+              {RANGE_LABELS[r]}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {loading && !data ? (
+        <div className="flex-1 flex items-center justify-center">
+          <p className="text-text-3 text-[13px]">Loading metrics…</p>
+        </div>
+      ) : (
+        <div className="px-8 pb-8 space-y-6">
+          {/* Stats cards */}
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            <StatCard label="Total Tokens" value={formatTokens(data?.totalTokens ?? 0)} />
+            <StatCard label="Total Cost" value={formatCost(data?.totalCost ?? 0)} />
+            <StatCard label="Requests" value={String(data?.records.length ?? 0)} />
+            <StatCard label="Completion Rate" value={`${completionRate}%`} />
+          </div>
+
+          {/* Token usage over time */}
+          <ChartCard title="Token Usage Over Time">
+            {timeSeriesFormatted.length > 0 ? (
+              <ResponsiveContainer width="100%" height={280}>
+                <LineChart data={timeSeriesFormatted} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
+                  <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']} />
+                  <Line type="monotone" dataKey="tokens" stroke="#818CF8" strokeWidth={2} dot={false} activeDot={{ r: 4, fill: '#818CF8' }} />
+                </LineChart>
+              </ResponsiveContainer>
+            ) : (
+              <EmptyChart />
+            )}
+          </ChartCard>
+
+          {/* Cost by provider + cost by agent */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            <ChartCard title="Cost by Provider">
+              {providerData.length > 0 ? (
+                <ResponsiveContainer width="100%" height={280}>
+                  <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']} />
+                    <Bar dataKey="cost" radius={[4, 4, 0, 0]}>
+                      {providerData.map((_entry, i) => (
+                        <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
+                      ))}
+                    </Bar>
+                  </BarChart>
+                </ResponsiveContainer>
+              ) : (
+                <EmptyChart />
+              )}
+            </ChartCard>
+
+            <ChartCard title="Cost by Session">
+              {agentData.length > 0 ? (
+                <ResponsiveContainer width="100%" height={280}>
+                  <PieChart>
+                    <Pie
+                      data={agentData}
+                      cx="50%"
+                      cy="50%"
+                      innerRadius={60}
+                      outerRadius={100}
+                      paddingAngle={2}
+                      dataKey="cost"
+                      nameKey="name"
+                    >
+                      {agentData.map((_entry, i) => (
+                        <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
+                      ))}
+                    </Pie>
+                    <Tooltip {...tooltipStyle} formatter={(value: number | undefined) => [formatCost(value ?? 0), 'Cost']} />
+                    <Legend
+                      verticalAlign="bottom"
+                      iconType="circle"
+                      iconSize={8}
+                      formatter={(value: string) => <span style={{ color: '#a0a0b0', fontSize: 11 }}>{value}</span>}
+                    />
+                  </PieChart>
+                </ResponsiveContainer>
+              ) : (
+                <EmptyChart />
+              )}
+            </ChartCard>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+function StatCard({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="bg-surface-2 rounded-[12px] p-4 border border-white/[0.04]">
+      <p className="text-[11px] font-500 text-text-3 uppercase tracking-[0.05em] mb-1">{label}</p>
+      <p className="text-[22px] font-display font-700 tracking-[-0.02em] text-text">{value}</p>
+    </div>
+  )
+}
+
+function ChartCard({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="bg-surface-2 rounded-[12px] p-5 border border-white/[0.04]">
+      <h3 className="font-display text-[14px] font-600 text-text-2 mb-4">{title}</h3>
+      {children}
+    </div>
+  )
+}
+
+function EmptyChart() {
+  return (
+    <div className="h-[280px] flex items-center justify-center">
+      <p className="text-text-3 text-[13px]">No data for this time range</p>
+    </div>
+  )
+}

package/src/hooks/use-page-active.ts

@@ -0,0 +1,21 @@
+'use client'
+
+import { useSyncExternalStore } from 'react'
+
+function subscribe(cb: () => void) {
+  document.addEventListener('visibilitychange', cb)
+  return () => document.removeEventListener('visibilitychange', cb)
+}
+
+function getSnapshot(): boolean {
+  return document.visibilityState === 'visible'
+}
+
+function getServerSnapshot(): boolean {
+  return true
+}
+
+/** Returns `true` when the page is visible, `false` when hidden. SSR-safe. */
+export function usePageActive(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/hooks/use-ws.ts

@@ -2,12 +2,14 @@
 
 import { useEffect, useRef } from 'react'
 import { subscribeWs, unsubscribeWs, isWsConnected } from '@/lib/ws-client'
+import { usePageActive } from './use-page-active'
 
 /**
  * Subscribe to a WebSocket topic. Calls `handler` on push events.
  * Falls back to polling at `fallbackMs` when WS is disconnected.
  */
 export function useWs(topic: string, handler: () => void, fallbackMs?: number) {
+  const isActive = usePageActive()
   const handlerRef = useRef(handler)
   handlerRef.current = handler
   const fallbackMsRef = useRef(fallbackMs)
@@ -23,12 +25,21 @@ export function useWs(topic: string, handler: () => void, fallbackMs?: number) {
   }, [topic])
 
   // Fallback polling — separate effect so it doesn't tear down WS subscription
+  // Pauses when tab is hidden; triggers immediate fetch when tab becomes visible again
   useEffect(() => {
     if (!topic) return
 
     let fallbackId: ReturnType<typeof setInterval> | null = null
     const cb = () => handlerRef.current()
 
+    // When page becomes visible again, fire an immediate refresh
+    if (isActive) {
+      cb()
+    }
+
+    // Don't run polling while the tab is hidden
+    if (!isActive) return
+
     const startFallback = () => {
       const ms = fallbackMsRef.current
       if (fallbackId || !ms || ms <= 0) return
@@ -62,5 +73,6 @@ export function useWs(topic: string, handler: () => void, fallbackMs?: number) {
       stopFallback()
       clearInterval(checkId)
     }
-  }, [topic])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [topic, isActive])
 }

package/src/lib/fetch-dedup.ts

@@ -0,0 +1,20 @@
+const inflight = new Map<string, Promise<Response>>()
+
+/**
+ * Deduplicates concurrent GET requests to the same URL.
+ * Non-GET requests pass through without dedup.
+ */
+export function dedupedFetch(url: string, init?: RequestInit): Promise<Response> {
+  const method = (init?.method ?? 'GET').toUpperCase()
+  if (method !== 'GET') return fetch(url, init)
+
+  const existing = inflight.get(url)
+  if (existing) return existing
+
+  const promise = fetch(url, init).finally(() => {
+    inflight.delete(url)
+  })
+
+  inflight.set(url, promise)
+  return promise
+}

package/src/lib/optimistic.ts

@@ -0,0 +1,25 @@
+/**
+ * Generic optimistic mutation helper for Zustand stores.
+ * Applies a patch immediately, then fires the API call.
+ * On failure, rolls back to the previous state and calls an optional error handler.
+ */
+export async function optimistic<T>(
+  storeSetter: (updater: (state: T) => Partial<T>) => void,
+  patch: (state: T) => Partial<T>,
+  apiCall: () => Promise<unknown>,
+  rollback: (state: T) => Partial<T>,
+  onError?: (err: unknown) => void,
+): Promise<boolean> {
+  // Apply optimistic update
+  storeSetter(patch)
+
+  try {
+    await apiCall()
+    return true
+  } catch (err: unknown) {
+    // Rollback
+    storeSetter(rollback)
+    if (onError) onError(err)
+    return false
+  }
+}

package/src/lib/server/connectors/manager.ts

@@ -53,6 +53,21 @@ const lockKey = '__swarmclaw_connector_locks__' as const
 const locks: Map<string, Promise<void>> =
   g[lockKey] ?? (g[lockKey] = new Map<string, Promise<void>>())
 
+/** Generation counter per connector — used to detect stale lifecycle events after restart */
+const genCounterKey = '__swarmclaw_connector_gen__' as const
+const generationCounter: Map<string, number> =
+  g[genCounterKey] ?? (g[genCounterKey] = new Map<string, number>())
+
+/** Get the current generation number for a connector (0 if never started) */
+export function getConnectorGeneration(connectorId: string): number {
+  return generationCounter.get(connectorId) ?? 0
+}
+
+/** Check whether a given generation is still the current one for a connector */
+export function isCurrentGeneration(connectorId: string, gen: number): boolean {
+  return generationCounter.get(connectorId) === gen
+}
+
 /** Get platform implementation lazily */
 export async function getPlatform(platform: string) {
   switch (platform) {
@@ -726,6 +741,9 @@ async function _startConnectorImpl(connectorId: string): Promise<void> {
 
   const platform = await getPlatform(connector.platform)
 
+  // Bump generation counter so stale events from previous instances are ignored
+  generationCounter.set(connectorId, (generationCounter.get(connectorId) ?? 0) + 1)
+
   try {
     const instance = await platform.start(connector, botToken, (msg) => routeMessage(connector, msg))
     running.set(connectorId, instance)