Add StatsCard to Pulse — session count, tokens, platforms

app/page.tsx

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { Puzzle, Timer, Sparkles } from "lucide-react";
 import { StatusCard } from "@/components/StatusCard";
+import { StatsCard } from "@/components/StatsCard";
 import { SessionCard } from "@/components/SessionCard";
 import { MemorySnapshotCard } from "@/components/MemorySnapshotCard";
 import { useSessions } from "@/lib/hooks";
@@ -23,9 +24,9 @@ export default function PulsePage() {
       </h1>
 
       <StatusCard />
+      <StatsCard />
       <MemorySnapshotCard />
 
-      {/* Quick links */}
       <div className="grid grid-cols-3 gap-2">
         {QUICK_LINKS.map(({ href, label, icon: Icon, color }) => (
           <Link key={href} href={href}>

components/StatsCard.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { BarChart3 } from "lucide-react";
+import { useSessions } from "@/lib/hooks";
+import { formatTokens } from "@/lib/utils";
+
+export function StatsCard() {
+  const { data } = useSessions(50);
+
+  const items = data?.items || [];
+  const total = data?.total || 0;
+  const totalTokens = items.reduce((s, i) => s + i.input_tokens + i.output_tokens, 0);
+  const totalCost = items.reduce((s, i) => s + (i.estimated_cost_usd || 0), 0);
+  const platforms = new Set(items.map((i) => i.source));
+
+  const stats = [
+    { label: "Sessions", value: String(total) },
+    { label: "Tokens (recent)", value: formatTokens(totalTokens) },
+    { label: "Platforms", value: String(platforms.size) },
+    ...(totalCost > 0 ? [{ label: "Est. Cost", value: "$" + totalCost.toFixed(2) }] : []),
+  ];
+
+  return (
+    <div className="glass p-4">
+      <div className="flex items-center gap-2 mb-3">
+        <BarChart3 size={16} style={{ color: "#22c55e" }} />
+        <span className="text-sm font-medium text-zinc-200">Stats</span>
+      </div>
+      <div className="grid grid-cols-3 gap-3">
+        {stats.map((s) => (
+          <div key={s.label} className="text-center">
+            <div className="text-lg font-bold text-zinc-200">{s.value}</div>
+            <div className="text-[10px] text-zinc-500">{s.label}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}