Add StatsCard to Pulse — session count, tokens, platforms

2026-04-09 21:01:52 -05:00
parent 3f6d515b4c
commit abf387fa6b
2 changed files with 41 additions and 1 deletions
@@ -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>
+  );
+}