@bahulam/code 2.6.0

package/pulse/app/benchmarks/page.tsx

@@ -0,0 +1,224 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+
+interface BenchmarkStats {
+  total_runs: number
+  passed: number
+  failed: number
+  error: number
+  success_rate: number
+  avg_duration: number
+  total_cost: number
+  total_tokens: number
+  avg_tokens_per_run: number
+  by_status: Record<string, number>
+  by_repo: Record<string, { count: number; passed: number; success_rate: number }>
+  by_model: Record<string, { count: number; passed: number; success_rate: number }>
+}
+
+interface BenchmarkResponse {
+  stats: BenchmarkStats
+  filters: {
+    repo: string | null
+    model: string | null
+    status: string | null
+  }
+}
+
+export default function BenchmarksPage() {
+  const [data, setData] = useState<BenchmarkResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    const fetchBenchmarks = async () => {
+      try {
+        const response = await fetch('/api/benchmarks')
+        if (!response.ok) {
+          throw new Error('Failed to fetch benchmarks')
+        }
+        const json = await response.json()
+        setData(json)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Unknown error')
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchBenchmarks()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <p className="text-muted-foreground">Loading benchmarks...</p>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <p className="text-destructive">Error: {error}</p>
+      </div>
+    )
+  }
+
+  if (!data) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <p className="text-muted-foreground">No benchmark data available</p>
+      </div>
+    )
+  }
+
+  const stats = data.stats
+
+  return (
+    <div className="space-y-6 p-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Benchmarks</h1>
+        <p className="text-muted-foreground mt-2">SWE-Bench v4 Flash 300 Results</p>
+      </div>
+
+      {/* Key Metrics */}
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Total Runs</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.total_runs}</div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Success Rate</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.success_rate.toFixed(1)}%</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {stats.passed} passed, {stats.failed} failed
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Total Cost</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">${stats.total_cost.toFixed(2)}</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {stats.avg_tokens_per_run.toFixed(0)} tokens/run
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Avg Duration</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stats.avg_duration.toFixed(1)}s</div>
+            <p className="text-xs text-muted-foreground mt-1">
+              {(stats.total_tokens / 1000).toFixed(1)}K tokens total
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Status Breakdown */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Status Breakdown</CardTitle>
+          <CardDescription>Distribution of run statuses</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {Object.entries(stats.by_status).map(([status, count]) => (
+              <div key={status} className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Badge
+                    variant={
+                      status === 'success'
+                        ? 'default'
+                        : status === 'failed'
+                          ? 'destructive'
+                          : 'secondary'
+                    }
+                  >
+                    {status}
+                  </Badge>
+                  <span className="text-sm text-muted-foreground">{count} runs</span>
+                </div>
+                <span className="text-sm font-medium">
+                  {((count / stats.total_runs) * 100).toFixed(1)}%
+                </span>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* By Repository */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Performance by Repository</CardTitle>
+          <CardDescription>Success rate and run count per repository</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {Object.entries(stats.by_repo)
+              .sort((a, b) => b[1].count - a[1].count)
+              .map(([repo, data]) => (
+                <div key={repo} className="flex items-center justify-between border-b pb-3 last:border-0">
+                  <div>
+                    <p className="font-medium text-sm">{repo}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {data.count} runs, {data.passed} passed
+                    </p>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-bold text-sm">{data.success_rate.toFixed(1)}%</p>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* By Model */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Performance by Model</CardTitle>
+          <CardDescription>Success rate and run count per model</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            {Object.entries(stats.by_model)
+              .sort((a, b) => b[1].count - a[1].count)
+              .map(([model, data]) => (
+                <div key={model} className="flex items-center justify-between border-b pb-3 last:border-0">
+                  <div>
+                    <p className="font-medium text-sm">{model}</p>
+                    <p className="text-xs text-muted-foreground">
+                      {data.count} runs, {data.passed} passed
+                    </p>
+                  </div>
+                  <div className="text-right">
+                    <p className="font-bold text-sm">{data.success_rate.toFixed(1)}%</p>
+                  </div>
+                </div>
+              ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/pulse/app/costs/page.tsx

@@ -0,0 +1,179 @@
+'use client'
+
+import useSWR from 'swr'
+import { TopBar } from '@/components/layout/top-bar'
+import { CostOverTimeChart } from '@/components/costs/cost-over-time-chart'
+import { CostByProjectChart } from '@/components/costs/cost-by-project-chart'
+import { ModelTokenTable } from '@/components/costs/model-token-table'
+import { CacheEfficiencyPanel } from '@/components/costs/cache-efficiency-panel'
+import { formatCost, formatTokens } from '@/lib/decode'
+import { PRICING } from '@/lib/pricing'
+import type { CostAnalytics } from '@/types/claude'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { AlertTriangle, TrendingDown, DollarSign, Banknote } from 'lucide-react'
+
+const fetcher = (url: string) =>
+  fetch(url).then(r => { if (!r.ok) throw new Error(`API error ${r.status}`); return r.json() })
+
+export default function CostsPage() {
+  const { data, error, isLoading } = useSWR<CostAnalytics>('/api/costs', fetcher, { refreshInterval: 5_000 })
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <TopBar title="Costs" subtitle="Estimated spend from ~/.bahulam/" />
+      <div className="p-6 space-y-6">
+
+        {error && (
+          <Alert variant="destructive">
+            <AlertTriangle className="h-4 w-4" />
+            <AlertDescription>Error loading data: {String(error)}</AlertDescription>
+          </Alert>
+        )}
+
+        {isLoading && (
+          <div className="space-y-4">
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-28 rounded-xl" />)}
+            </div>
+            {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-56 rounded-xl" />)}
+          </div>
+        )}
+
+        {data && (
+          <>
+            {/* Hero stat cards */}
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardDescription className="flex items-center gap-2">
+                    <DollarSign className="w-4 h-4" /> Total Estimated Cost
+                  </CardDescription>
+                  <CardTitle className="text-3xl font-bold tabular-nums text-[#d97706]">
+                    {formatCost(data.total_cost)}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-xs text-muted-foreground">All time spend across all projects</p>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardDescription className="flex items-center gap-2">
+                    <TrendingDown className="w-4 h-4" /> Cache Savings
+                  </CardDescription>
+                  <CardTitle className="text-3xl font-bold tabular-nums text-[#34d399]">
+                    {formatCost(data.total_savings)}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-xs text-muted-foreground">Saved by prompt caching</p>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardDescription className="flex items-center gap-2">
+                    <Banknote className="w-4 h-4" /> Without Cache
+                  </CardDescription>
+                  <CardTitle className="text-3xl font-bold tabular-nums text-red-400">
+                    {formatCost(data.total_cost + data.total_savings)}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-xs text-muted-foreground">What you would have spent</p>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Cost over time */}
+            {data.daily.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle>Cost Over Time</CardTitle>
+                  <CardDescription>Daily estimated spend</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <CostOverTimeChart daily={data.daily} />
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Cost by project */}
+            {data.by_project.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle>Cost by Project</CardTitle>
+                  <CardDescription>Spend breakdown across projects</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <CostByProjectChart projects={data.by_project} />
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Per-model table */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Per-Model Token Breakdown</CardTitle>
+                <CardDescription>Token usage and cost by model</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ModelTokenTable models={data.models} />
+              </CardContent>
+            </Card>
+
+            {/* Cache efficiency */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Cache Efficiency</CardTitle>
+                <CardDescription>How much caching is saving you</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <CacheEfficiencyPanel models={data.models} totalSavings={data.total_savings} />
+              </CardContent>
+            </Card>
+
+            {/* Pricing reference */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Pricing Reference</CardTitle>
+                <CardDescription>
+                  Estimates only — update rates in{' '}
+                  <code className="text-xs bg-muted px-1 rounded">lib/pricing.ts</code>
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Table>
+                  <TableHeader>
+                    <TableRow>
+                      <TableHead>Model</TableHead>
+                      <TableHead className="text-right">Input /MTok</TableHead>
+                      <TableHead className="text-right">Output /MTok</TableHead>
+                      <TableHead className="text-right">Cache Write /MTok</TableHead>
+                      <TableHead className="text-right">Cache Read /MTok</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {Object.entries(PRICING).map(([model, p]) => (
+                      <TableRow key={model}>
+                        <TableCell className="font-mono text-sm">{model}</TableCell>
+                        <TableCell className="text-right font-mono text-blue-700 dark:text-[#60a5fa]">${(p.input * 1_000_000).toFixed(2)}</TableCell>
+                        <TableCell className="text-right font-mono text-[#d97706]">${(p.output * 1_000_000).toFixed(2)}</TableCell>
+                        <TableCell className="text-right font-mono text-[#a78bfa]">${(p.cacheWrite * 1_000_000).toFixed(2)}</TableCell>
+                        <TableCell className="text-right font-mono text-[#34d399]">${(p.cacheRead * 1_000_000).toFixed(2)}</TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </CardContent>
+            </Card>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}