@axplusb/kepler 0.0.1 → 1.0.0

package/pulse/app/tools/page.tsx

@@ -0,0 +1,249 @@
+'use client'
+
+import useSWR from 'swr'
+import { TopBar } from '@/components/layout/top-bar'
+import { ToolRankingChart } from '@/components/tools/tool-ranking-chart'
+import { McpServerPanel } from '@/components/tools/mcp-server-panel'
+import { FeatureAdoptionTable } from '@/components/tools/feature-adoption-table'
+import { VersionHistoryTable } from '@/components/tools/version-history-table'
+import { CATEGORY_COLORS, CATEGORY_LABELS } from '@/lib/tool-categories'
+import type { ToolsAnalytics } 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 { Badge } from '@/components/ui/badge'
+import { AlertTriangle, Wrench, Server, Zap, GitBranch } 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 ToolsPage() {
+  const { data, error, isLoading } = useSWR<ToolsAnalytics>('/api/tools', fetcher, { refreshInterval: 5_000 })
+
+  return (
+    <div className="flex flex-col min-h-screen">
+      <TopBar title="Tools & Features" subtitle="Every tool call, MCP server, and feature" />
+      <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-2 sm:grid-cols-4 gap-4">
+              {Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="h-28 rounded-xl" />)}
+            </div>
+            {Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-48 rounded-xl" />)}
+          </div>
+        )}
+
+        {data && (
+          <>
+            {/* Hero stat cards */}
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardDescription className="flex items-center gap-2">
+                    <Zap className="w-4 h-4" /> Tool Calls
+                  </CardDescription>
+                  <CardTitle className="text-3xl font-bold tabular-nums text-[#d97706]">
+                    {data.total_tool_calls.toLocaleString()}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-xs text-muted-foreground">Total all time</p>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardDescription className="flex items-center gap-2">
+                    <Wrench className="w-4 h-4" /> Unique Tools
+                  </CardDescription>
+                  <CardTitle className="text-3xl font-bold tabular-nums">
+                    {data.tools.length}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-xs text-muted-foreground">Distinct tools used</p>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardDescription className="flex items-center gap-2">
+                    <Server className="w-4 h-4" /> MCP Servers
+                  </CardDescription>
+                  <CardTitle className="text-3xl font-bold tabular-nums text-[#34d399]">
+                    {data.mcp_servers.length}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-xs text-muted-foreground">Connected servers</p>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader className="pb-2">
+                  <CardDescription className="flex items-center gap-2">
+                    <AlertTriangle className="w-4 h-4" /> Errors
+                  </CardDescription>
+                  <CardTitle className={`text-3xl font-bold tabular-nums ${data.total_errors > 0 ? 'text-red-400' : 'text-muted-foreground'}`}>
+                    {data.total_errors}
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <p className="text-xs text-muted-foreground">
+                    {data.total_tool_calls > 0
+                      ? `${((data.total_errors / data.total_tool_calls) * 100).toFixed(1)}% error rate`
+                      : 'No errors'}
+                  </p>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Category legend */}
+            <div className="flex flex-wrap gap-2">
+              {Object.entries(CATEGORY_COLORS).map(([cat, color]) => (
+                <Badge key={cat} variant="outline" className="gap-1.5">
+                  <span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: color }} />
+                  {CATEGORY_LABELS[cat as keyof typeof CATEGORY_LABELS]}
+                </Badge>
+              ))}
+            </div>
+
+            {/* Tool ranking */}
+            <Card>
+              <CardHeader>
+                <div className="flex items-start justify-between">
+                  <div>
+                    <CardTitle>Tool Ranking</CardTitle>
+                    <CardDescription>All tools ranked by total calls</CardDescription>
+                  </div>
+                  <Wrench className="w-4 h-4 text-muted-foreground mt-0.5" />
+                </div>
+              </CardHeader>
+              <CardContent>
+                <ToolRankingChart tools={data.tools} />
+              </CardContent>
+            </Card>
+
+            {/* MCP server details */}
+            {data.mcp_servers.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <CardTitle>MCP Server Details</CardTitle>
+                      <CardDescription>Connected MCP servers and their tools</CardDescription>
+                    </div>
+                    <Server className="w-4 h-4 text-muted-foreground mt-0.5" />
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <McpServerPanel servers={data.mcp_servers} />
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Feature adoption */}
+            <Card>
+              <CardHeader>
+                <CardTitle>Feature Adoption</CardTitle>
+                <CardDescription>How often advanced features are used across sessions</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <FeatureAdoptionTable
+                  adoption={data.feature_adoption}
+                  totalSessions={(() => {
+                    const first = Object.values(data.feature_adoption ?? {})[0]
+                    return first ? Math.round(first.sessions / Math.max(0.001, first.pct)) : 0
+                  })()}
+                />
+              </CardContent>
+            </Card>
+
+            {/* Error analysis */}
+            {data.total_errors > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle>Tool Error Analysis</CardTitle>
+                  <CardDescription>
+                    {data.total_errors} errors ·{' '}
+                    {((data.total_errors / data.total_tool_calls) * 100).toFixed(1)}% error rate
+                  </CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2.5">
+                    {Object.entries(data.error_categories).sort(([, a], [, b]) => b - a).map(([cat, count]) => {
+                      const max = Math.max(...Object.values(data.error_categories))
+                      const width = Math.max(4, Math.round((count / max) * 100))
+                      return (
+                        <div key={cat} className="flex items-center gap-3">
+                          <span className="text-sm text-muted-foreground w-36 truncate">{cat}</span>
+                          <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                            <div className="h-full rounded-full bg-red-400/50" style={{ width: `${width}%` }} />
+                          </div>
+                          <span className="text-sm text-red-400 tabular-nums w-8 text-right">{count}</span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Version history */}
+            {data.versions.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <CardTitle>Orca Version History</CardTitle>
+                  <CardDescription>Versions seen across your sessions</CardDescription>
+                </CardHeader>
+                <CardContent>
+                  <VersionHistoryTable versions={data.versions} />
+                </CardContent>
+              </Card>
+            )}
+
+            {/* Git branch analytics */}
+            {data.branches.length > 0 && (
+              <Card>
+                <CardHeader>
+                  <div className="flex items-start justify-between">
+                    <div>
+                      <CardTitle>Git Branch Analytics</CardTitle>
+                      <CardDescription>Most active branches by turn count</CardDescription>
+                    </div>
+                    <GitBranch className="w-4 h-4 text-muted-foreground mt-0.5" />
+                  </div>
+                </CardHeader>
+                <CardContent>
+                  <div className="space-y-2">
+                    {data.branches.map(({ branch, turns }) => {
+                      const max = data.branches[0]?.turns ?? 1
+                      const width = Math.max(4, Math.round((turns / max) * 100))
+                      return (
+                        <div key={branch} className="flex items-center gap-3">
+                          <span className="text-sm text-muted-foreground w-28 truncate font-mono">{branch}</span>
+                          <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+                            <div className="h-full rounded-full bg-[#34d399]/50" style={{ width: `${width}%` }} />
+                          </div>
+                          <span className="text-xs text-muted-foreground tabular-nums w-24 text-right">{turns.toLocaleString()} turns</span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </CardContent>
+              </Card>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/pulse/cli.js

@@ -0,0 +1,159 @@
+#!/usr/bin/env node
+/**
+ * Orca Pulse — local analytics dashboard launcher.
+ * Launches a Next.js dev server from ~/.orca-pulse/ cache directory.
+ */
+
+const { spawn, exec } = require('child_process')
+const net  = require('net')
+const os   = require('os')
+const path = require('path')
+const fs   = require('fs')
+
+const PKG_DIR   = __dirname
+const CACHE_DIR = path.join(os.homedir(), '.orca-pulse')
+
+// ANSI helpers — Orca cyan palette
+const C   = '\x1b[36m'     // cyan
+const C2  = '\x1b[96m'     // bright cyan
+const DIM = '\x1b[2m'
+const B   = '\x1b[1m'
+const R   = '\x1b[0m'
+const G   = '\x1b[32m'
+
+function printBanner() {
+  const art = [
+    `${C}${B} ██████╗ ██████╗  ██████╗ █████╗     ██████╗ ██╗   ██╗██╗     ███████╗███████╗${R}`,
+    `${C}${B}██╔═══██╗██╔══██╗██╔════╝██╔══██╗    ██╔══██╗██║   ██║██║     ██╔════╝██╔════╝${R}`,
+    `${C2}${B}██║   ██║██████╔╝██║     ███████║    ██████╔╝██║   ██║██║     ███████╗█████╗  ${R}`,
+    `${C2}${B}██║   ██║██╔══██╗██║     ██╔══██║    ██╔═══╝ ██║   ██║██║     ╚════██║██╔══╝  ${R}`,
+    `${C}${B}╚██████╔╝██║  ██║╚██████╗██║  ██║    ██║     ╚██████╔╝███████╗███████║███████╗${R}`,
+    `${C}${B} ╚═════╝ ╚═╝  ╚═╝ ╚═════╝╚═╝  ╚═╝    ╚═╝      ╚═════╝ ╚══════╝╚══════╝╚══════╝${R}`,
+  ]
+
+  console.log()
+  art.forEach((line) => console.log('  ' + line))
+  console.log()
+  const configDir = process.env.ORCA_CONFIG_DIR ?? path.join(os.homedir(), '.orca')
+  console.log(`  ${B}${C}Orca Pulse${R}   ${DIM}— real-time analytics for your Orca sessions${R}`)
+  console.log()
+  console.log(`  ${DIM}Data dir:${R}    ${C2}${configDir}${R}`)
+  console.log()
+}
+
+function findFreePort(port = 3000) {
+  return new Promise((resolve) => {
+    const server = net.createServer()
+    server.unref()
+    server.on('error', () => resolve(findFreePort(port + 1)))
+    server.listen(port, () => server.close(() => resolve(port)))
+  })
+}
+
+function openBrowser(url) {
+  const cmd =
+    process.platform === 'darwin' ? `open "${url}"` :
+    process.platform === 'win32'  ? `start "" "${url}"` :
+                                    `xdg-open "${url}"`
+  exec(cmd)
+}
+
+// Source dirs/files to mirror into ~/.orca-pulse/
+const SRC_DIRS  = ['app', 'components', 'lib', 'types', 'public']
+const SRC_FILES = ['next.config.ts', 'tsconfig.json', 'postcss.config.mjs', 'components.json']
+
+function syncSource(pkg) {
+  fs.mkdirSync(CACHE_DIR, { recursive: true })
+  for (const dir of SRC_DIRS) {
+    const src = path.join(PKG_DIR, dir)
+    if (fs.existsSync(src)) {
+      fs.cpSync(src, path.join(CACHE_DIR, dir), { recursive: true, force: true })
+    }
+  }
+  for (const file of SRC_FILES) {
+    const src = path.join(PKG_DIR, file)
+    if (fs.existsSync(src)) {
+      fs.copyFileSync(src, path.join(CACHE_DIR, file))
+    }
+  }
+  // Write a minimal package.json with only runtime dependencies
+  fs.writeFileSync(path.join(CACHE_DIR, 'package.json'), JSON.stringify({
+    name: 'orca-pulse-runtime',
+    version: pkg.version,
+    dependencies: pkg.dependencies,
+  }, null, 2))
+}
+
+async function main() {
+  printBanner()
+
+  const pkg = require(path.join(PKG_DIR, 'package.json'))
+
+  // Check whether ~/.orca-pulse/ is up-to-date for this version
+  const versionFile = path.join(CACHE_DIR, '.orca-pulse-version')
+  const cachedVersion = fs.existsSync(versionFile)
+    ? fs.readFileSync(versionFile, 'utf8').trim()
+    : null
+
+  const nextCli = path.join(CACHE_DIR, 'node_modules', 'next', 'dist', 'bin', 'next')
+  const needsSetup = cachedVersion !== pkg.version || !fs.existsSync(nextCli)
+
+  if (needsSetup) {
+    console.log(`  ${DIM}Setting up (first run, may take a minute)...${R}\n`)
+
+    syncSource(pkg)
+
+    await new Promise((resolve, reject) => {
+      const install = spawn('npm', ['install', '--prefer-offline', '--no-package-lock'], {
+        cwd: CACHE_DIR,
+        stdio: 'inherit',
+        shell: true,
+      })
+      install.on('exit', (code) =>
+        code === 0 ? resolve() : reject(new Error(`npm install failed (exit ${code})`))
+      )
+    })
+
+    fs.writeFileSync(versionFile, pkg.version)
+  }
+
+  const port = await findFreePort(3000)
+  const url  = `http://localhost:${port}`
+
+  // Pass ORCA_CONFIG_DIR to the Next.js process so it reads from ~/.orca/
+  const orcaDir = process.env.ORCA_CONFIG_DIR ?? path.join(os.homedir(), '.orca')
+  const env = {
+    ...process.env,
+    PORT: String(port),
+    ORCA_CONFIG_DIR: orcaDir,
+    CLAUDE_CONFIG_DIR: orcaDir,
+  }
+
+  console.log(`  ${DIM}Starting server on${R} ${C2}${B}${url}${R}\n`)
+
+  const child = spawn(process.execPath, [nextCli, 'dev', '--port', String(port)], {
+    cwd: CACHE_DIR,
+    stdio: [process.platform === 'win32' ? 'ignore' : 'inherit', 'pipe', 'pipe'],
+    env,
+  })
+
+  let opened = false
+
+  function checkReady(text) {
+    if (!opened && /Local:|ready|started server/i.test(text)) {
+      opened = true
+      console.log(`\n  ${G}${B}Ready${R}  ${C}${url}${R}\n`)
+      openBrowser(url)
+    }
+  }
+
+  child.stdout.on('data', (d) => { process.stdout.write(d); checkReady(d.toString()) })
+  child.stderr.on('data', (d) => { process.stderr.write(d); checkReady(d.toString()) })
+
+  child.on('exit', (code) => process.exit(code ?? 0))
+
+  process.on('SIGINT',  () => { child.kill(); process.exit(0) })
+  process.on('SIGTERM', () => { child.kill(); process.exit(0) })
+}
+
+main().catch((err) => { console.error(err); process.exit(1) })

package/pulse/components/activity/day-of-week-chart.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, Cell, ResponsiveContainer } from 'recharts'
+
+interface Props {
+  data: Array<{ day: string; count: number }>
+}
+
+export function DayOfWeekChart({ data }: Props) {
+  const max = Math.max(...data.map(d => d.count), 1)
+  return (
+    <div>
+      <h3 className="text-[13px] font-bold text-muted-foreground uppercase tracking-widest mb-3">Day of Week</h3>
+      <ResponsiveContainer width="100%" height={140}>
+        <BarChart data={data} margin={{ top: 4, right: 8, bottom: 0, left: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" vertical={false} />
+          <XAxis dataKey="day" tick={{ fontSize: 12, fill: 'var(--muted-foreground)' }} tickLine={false} axisLine={false} />
+          <YAxis tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }} tickLine={false} axisLine={false} width={28} />
+          <Tooltip
+            contentStyle={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }}
+            formatter={(val: number | undefined) => [(val ?? 0).toLocaleString(), 'messages']}
+          />
+          <Bar dataKey="count" radius={[3, 3, 0, 0]}>
+            {data.map((d, i) => (
+              <Cell
+                key={i}
+                fill={d.count === max ? '#d97706' : d.count > max * 0.6 ? '#d97706aa' : '#d9770640'}
+              />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

package/pulse/components/activity/streak-card.tsx

@@ -0,0 +1,36 @@
+interface Props {
+  current: number
+  longest: number
+  totalActiveDays: number
+  mostActiveDay: string
+  mostActiveDayMsgs: number
+}
+
+export function StreakCard({ current, longest, totalActiveDays, mostActiveDay, mostActiveDayMsgs }: Props) {
+  return (
+    <div className="grid grid-cols-2 gap-3 text-[13px]">
+      <div className="border border-border rounded p-3 bg-card">
+        <p className="text-muted-foreground uppercase tracking-wider text-[12px] mb-1">Current Streak</p>
+        <p className="text-2xl font-bold text-primary">{current}</p>
+        <p className="text-muted-foreground/60 text-[12px]">consecutive days</p>
+      </div>
+      <div className="border border-border rounded p-3 bg-card">
+        <p className="text-muted-foreground uppercase tracking-wider text-[12px] mb-1">Longest Streak</p>
+        <p className="text-2xl font-bold text-blue-700 dark:text-[#60a5fa]">{longest}</p>
+        <p className="text-muted-foreground/60 text-[12px]">consecutive days</p>
+      </div>
+      <div className="border border-border rounded p-3 bg-card">
+        <p className="text-muted-foreground uppercase tracking-wider text-[12px] mb-1">Active Days</p>
+        <p className="text-2xl font-bold text-foreground">{totalActiveDays}</p>
+        <p className="text-muted-foreground/60 text-[12px]">total days with activity</p>
+      </div>
+      {mostActiveDay && (
+        <div className="border border-border rounded p-3 bg-card">
+          <p className="text-muted-foreground uppercase tracking-wider text-[12px] mb-1">Most Active Day</p>
+          <p className="text-sm font-bold text-[#34d399]">{mostActiveDay}</p>
+          <p className="text-muted-foreground/60 text-[12px]">{mostActiveDayMsgs.toLocaleString()} messages</p>
+        </div>
+      )}
+    </div>
+  )
+}

package/pulse/components/costs/cache-efficiency-panel.tsx

@@ -0,0 +1,76 @@
+import { formatCost, formatPct, formatTokens } from '@/lib/decode'
+import type { ModelCostBreakdown } from '@/types/claude'
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts'
+
+interface Props {
+  models: ModelCostBreakdown[]
+  totalSavings: number
+}
+
+export function CacheEfficiencyPanel({ models, totalSavings }: Props) {
+  const totalCacheRead = models.reduce((s, m) => s + m.cache_read_tokens, 0)
+  const totalInput     = models.reduce((s, m) => s + m.input_tokens, 0)
+  const totalContext   = totalInput + totalCacheRead
+  const hitRate        = totalContext > 0 ? totalCacheRead / totalContext : 0
+  const totalCost      = models.reduce((s, m) => s + m.estimated_cost, 0)
+  const wouldHavePaid  = totalCost + totalSavings
+
+  const pieData = [
+    { name: 'Cache Read', value: totalCacheRead, color: '#34d399' },
+    { name: 'Direct Input', value: totalInput, color: 'var(--viz-sky)' },
+  ]
+
+  return (
+    <div className="grid grid-cols-[1fr_160px] gap-4 items-start">
+      <div className="space-y-2 text-[13px]">
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">Cache hit rate</span>
+          <span className="text-[#34d399] font-bold text-lg">{(hitRate * 100).toFixed(1)}%</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">Context from cache</span>
+          <span className="text-foreground font-mono">{formatTokens(totalCacheRead)}</span>
+        </div>
+        <div className="flex items-center justify-between">
+          <span className="text-muted-foreground">Context from input</span>
+          <span className="text-foreground font-mono">{formatTokens(totalInput)}</span>
+        </div>
+        <div className="border-t border-border/50 pt-2 mt-2 space-y-1.5">
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">Without cache</span>
+            <span className="text-red-400 font-mono">{formatCost(wouldHavePaid)}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-muted-foreground">You paid</span>
+            <span className="text-foreground font-mono">{formatCost(totalCost)}</span>
+          </div>
+          <div className="flex items-center justify-between font-bold">
+            <span className="text-[#34d399]">Savings</span>
+            <span className="text-[#34d399] font-mono">{formatCost(totalSavings)}</span>
+          </div>
+        </div>
+      </div>
+      <ResponsiveContainer width="100%" height={140}>
+        <PieChart>
+          <Pie
+            data={pieData}
+            cx="50%"
+            cy="50%"
+            innerRadius={35}
+            outerRadius={60}
+            dataKey="value"
+            strokeWidth={0}
+          >
+            {pieData.map((entry, i) => (
+              <Cell key={i} fill={entry.color} />
+            ))}
+          </Pie>
+          <Tooltip
+            contentStyle={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }}
+            formatter={(val: number | undefined, name?: string) => [formatTokens(val ?? 0), name ?? '']}
+          />
+        </PieChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}

package/pulse/components/costs/cost-by-project-chart.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { BarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid, Cell, ResponsiveContainer } from 'recharts'
+import { formatCost } from '@/lib/decode'
+import type { ProjectCost } from '@/types/claude'
+
+interface Props {
+  projects: ProjectCost[]
+}
+
+export function CostByProjectChart({ projects }: Props) {
+  const top = projects.slice(0, 12)
+
+  return (
+    <div>
+      <h3 className="text-[13px] font-bold text-muted-foreground uppercase tracking-widest mb-3">Cost by Project</h3>
+      <ResponsiveContainer width="100%" height={Math.max(120, top.length * 28)}>
+        <BarChart data={top} layout="vertical" margin={{ top: 0, right: 60, bottom: 0, left: 8 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" horizontal={false} />
+          <XAxis
+            type="number"
+            tick={{ fontSize: 11, fill: 'var(--muted-foreground)' }}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={v => `$${v.toFixed(2)}`}
+          />
+          <YAxis
+            type="category"
+            dataKey="display_name"
+            tick={{ fontSize: 12, fill: 'var(--muted-foreground)' }}
+            tickLine={false}
+            axisLine={false}
+            width={90}
+          />
+          <Tooltip
+            contentStyle={{ background: 'var(--card)', border: '1px solid var(--border)', borderRadius: 4, fontSize: 12 }}
+            formatter={(val: number | undefined) => [formatCost(val ?? 0), 'Estimated cost']}
+          />
+          <Bar dataKey="estimated_cost" radius={[0, 3, 3, 0]}>
+            {top.map((_, i) => (
+              <Cell key={i} fill={i === 0 ? '#d97706' : '#d97706' + Math.max(30, 100 - i * 7).toString(16)} />
+            ))}
+          </Bar>
+        </BarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}