✨ feat(analytics): add model cost chart + stats endpoint tests

- Add "Cost by Model" horizontal bar chart (4th column in Row 3)
- costsApi.getBreakdown type now includes byModel + totalCost fields
- Remove duplicate ProviderBreakdownItem/DailyUsageItem types,
  reuse shared ProviderBreakdown/DailyUsage from api/types
- Add 2 route tests for GET /claws/stats (aggregate + empty)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: ersinkoc

packages/gateway/src/routes/claws.test.ts

@@ -84,6 +84,61 @@ describe('Claws Routes', () => {
     app = createApp();
   });
 
+  // ---- Stats ----
+
+  describe('GET /claws/stats', () => {
+    it('should return aggregate statistics', async () => {
+      service.listClaws.mockResolvedValue([
+        { id: 'c1', mode: 'continuous' },
+        { id: 'c2', mode: 'interval' },
+        { id: 'c3', mode: 'continuous' },
+      ]);
+      service.listSessions.mockReturnValue([
+        {
+          config: { id: 'c1' },
+          state: 'running',
+          totalCostUsd: 0.05,
+          cyclesCompleted: 10,
+          totalToolCalls: 42,
+        },
+        {
+          config: { id: 'c3' },
+          state: 'paused',
+          totalCostUsd: 0.02,
+          cyclesCompleted: 3,
+          totalToolCalls: 8,
+        },
+      ]);
+
+      const res = await app.request('/claws/stats');
+      expect(res.status).toBe(200);
+
+      const body = await res.json();
+      expect(body.data.total).toBe(3);
+      expect(body.data.running).toBe(1);
+      expect(body.data.totalCycles).toBe(13);
+      expect(body.data.totalToolCalls).toBe(50);
+      expect(body.data.totalCost).toBeCloseTo(0.07);
+      expect(body.data.byMode).toEqual({ continuous: 2, interval: 1 });
+      expect(body.data.byState.running).toBe(1);
+      expect(body.data.byState.paused).toBe(1);
+      expect(body.data.byState.stopped).toBe(1);
+    });
+
+    it('should return empty stats when no claws', async () => {
+      service.listClaws.mockResolvedValue([]);
+      service.listSessions.mockReturnValue([]);
+
+      const res = await app.request('/claws/stats');
+      expect(res.status).toBe(200);
+
+      const body = await res.json();
+      expect(body.data.total).toBe(0);
+      expect(body.data.running).toBe(0);
+      expect(body.data.totalCost).toBe(0);
+    });
+  });
+
   // ---- List ----
 
   describe('GET /claws', () => {

packages/ui/src/api/endpoints/summary.ts

@@ -17,7 +17,12 @@ export const costsApi = {
       params: { period },
     }),
   getBreakdown: (period: string) =>
-    apiClient.get<{ byProvider: ProviderBreakdown[]; daily: DailyUsage[] }>('/costs/breakdown', {
+    apiClient.get<{
+      byProvider: ProviderBreakdown[];
+      byModel: ProviderBreakdown[];
+      daily: DailyUsage[];
+      totalCost: number;
+    }>('/costs/breakdown', {
       params: { period },
     }),
   setBudget: (budget: { dailyLimit?: number; weeklyLimit?: number; monthlyLimit?: number }) =>

packages/ui/src/pages/AnalyticsPage.tsx

@@ -53,30 +53,14 @@ import {
   fleetApi,
   workflowsApi,
 } from '../api';
+import type { ProviderBreakdown, DailyUsage } from '../api';
 import type { SummaryData, CostsData } from '../types';
 import { Skeleton } from '../components/Skeleton';
 
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
 
-interface ProviderBreakdownItem {
-  provider: string;
-  requests: number;
-  cost: number;
-  percentOfTotal: number;
-  inputTokens: number;
-  outputTokens: number;
-}
-
-interface DailyUsageItem {
-  date: string;
-  requests: number;
-  cost: number;
-  inputTokens: number;
-  outputTokens: number;
-}
-
 interface ClawStats {
   total: number;
   running: number;
@@ -376,8 +360,10 @@ export function AnalyticsPage() {
   // Data
   const [usage, setUsage] = useState<CostsData | null>(null);
   const [breakdown, setBreakdown] = useState<{
-    byProvider: ProviderBreakdownItem[];
-    daily: DailyUsageItem[];
+    byProvider: ProviderBreakdown[];
+    byModel: ProviderBreakdown[];
+    daily: DailyUsage[];
+    totalCost: number;
   } | null>(null);
   const [summary, setSummary] = useState<SummaryData | null>(null);
   const [clawStats, setClawStats] = useState<ClawStats | null>(null);
@@ -469,6 +455,17 @@ export function AnalyticsPage() {
       output: p.outputTokens,
     }));
 
+  const modelCostData = (
+    (breakdown?.byModel ?? []) as Array<ProviderBreakdown & { model?: string }>
+  )
+    .filter((m) => m.cost > 0)
+    .slice(0, 6)
+    .map((m) => ({
+      name: m.model ?? m.provider,
+      cost: Math.round(m.cost * 10000) / 10000,
+      requests: m.requests,
+    }));
+
   const clawModeData = clawStats
     ? Object.entries(clawStats.byMode)
         .filter(([, v]) => v > 0)
@@ -690,8 +687,8 @@ export function AnalyticsPage() {
         </SectionCard>
       </div>
 
-      {/* ---- Row 3: Provider Breakdown + Agent Distribution + Requests ---- */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {/* ---- Row 3: Provider Breakdown + Model Cost + Agent Distribution + Requests ---- */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
         <SectionCard title="Cost by Provider" icon={DollarSign} iconColor="text-pink-500">
           {providerDonut.length > 0 ? (
             <div className="flex items-center gap-4">
@@ -705,6 +702,22 @@ export function AnalyticsPage() {
           )}
         </SectionCard>
 
+        <SectionCard title="Cost by Model" icon={BarChart3} iconColor="text-violet-500">
+          {modelCostData.length > 0 ? (
+            <ResponsiveContainer width="100%" height={170}>
+              <BarChart data={modelCostData} layout="vertical" margin={{ left: 0 }}>
+                <CartesianGrid {...gridProps} horizontal={false} />
+                <XAxis type="number" {...axisProps} tickFormatter={(v) => `$${v}`} />
+                <YAxis dataKey="name" type="category" {...axisProps} width={80} />
+                <Tooltip content={<ChartTooltip />} />
+                <Bar dataKey="cost" name="Cost" fill="#8b5cf6" radius={[0, 4, 4, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          ) : (
+            <EmptyChart height={170} message="No model data" />
+          )}
+        </SectionCard>
+
         <SectionCard title="Agent Distribution" icon={Bot} iconColor="text-emerald-500">
           <ResponsiveContainer width="100%" height={170}>
             <BarChart data={agentBarData} layout="vertical" margin={{ left: 0 }}>