a625ea9fd8
Collapse scattered per-request console lines (request/routing/auth/pending/ usage/stream-usage/stream) into 3 correlated lines: request, transform, done. Add stable per-session color tag so concurrent request lines are easy to follow, surface thinking intent, always-on full error logging for debug, re-enable warn level, and uppercase keyword labels. Also fix usage overview cards wrapping (5 cards -> grid-cols-5). Co-authored-by: Cursor <cursoragent@cursor.com>
39 lines
1.9 KiB
JavaScript
39 lines
1.9 KiB
JavaScript
"use client";
|
|
|
|
import PropTypes from "prop-types";
|
|
import Card from "@/shared/components/Card";
|
|
|
|
const fmt = (n) => new Intl.NumberFormat().format(n || 0);
|
|
const fmtCost = (n) => `$${(n || 0).toFixed(2)}`;
|
|
|
|
export default function OverviewCards({ stats }) {
|
|
return (
|
|
<div className="grid min-w-0 grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 sm:gap-4">
|
|
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
|
|
<span className="text-text-muted text-sm uppercase font-semibold">Total Requests</span>
|
|
<span className="truncate text-2xl font-bold">{fmt(stats.totalRequests)}</span>
|
|
</Card>
|
|
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
|
|
<span className="text-text-muted text-sm uppercase font-semibold">Total Input Tokens</span>
|
|
<span className="truncate text-2xl font-bold text-primary">{fmt(stats.totalPromptTokens)}</span>
|
|
</Card>
|
|
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
|
|
<span className="text-text-muted text-sm uppercase font-semibold">Cached Tokens</span>
|
|
<span className="truncate text-2xl font-bold text-info">{fmt(stats.totalCachedTokens)}</span>
|
|
</Card>
|
|
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
|
|
<span className="text-text-muted text-sm uppercase font-semibold">Output Tokens</span>
|
|
<span className="truncate text-2xl font-bold text-success">{fmt(stats.totalCompletionTokens)}</span>
|
|
</Card>
|
|
<Card className="flex min-w-0 flex-col gap-1 px-4 py-3">
|
|
<span className="text-text-muted text-sm uppercase font-semibold">Est. Cost</span>
|
|
<span className="truncate text-2xl font-bold text-warning">~{fmtCost(stats.totalCost)}</span>
|
|
<span className="text-[10px] text-text-muted">Estimated, not actual billing</span>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
OverviewCards.propTypes = {
|
|
stats: PropTypes.object.isRequired,
|
|
};
|