Hermes
40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
"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>
|
|
);
|
|
}
|