File size: 2,460 Bytes
557ab38 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | /**
* MetricsStrip — cost, latency, tokens, and model, styled like the marginalia
* on an accountant's ledger. Each is a small block with an eyebrow label and
* a display-font number, separated by thin ruled dividers.
*
* The cost gets a wax-stamp treatment — a small angled disc behind the number.
*/
import type { ExtractionMetrics } from "@/types";
interface Props {
metrics: ExtractionMetrics;
}
export function MetricsStrip({ metrics }: Props) {
return (
<div className="grid grid-cols-2 gap-6 border-t border-b border-[var(--rule)] py-6 sm:grid-cols-4">
<Cell label="Cost / doc" value={formatCost(metrics.cost_usd)} stamp />
<Cell label="Latency" value={formatLatency(metrics.latency_ms)} />
<Cell
label="Tokens"
value={`${metrics.input_tokens.toLocaleString()} + ${metrics.output_tokens.toLocaleString()}`}
small
/>
<Cell label="Model" value={metrics.model} small mono />
</div>
);
}
/* ------------------------------------------------------------------------ */
function Cell({
label,
value,
small,
mono,
stamp,
}: {
label: string;
value: string;
small?: boolean;
mono?: boolean;
stamp?: boolean;
}) {
return (
<div className="relative">
<p className="eyebrow mb-2">{label}</p>
<p
className={
(mono ? "font-mono " : "font-display ") +
"relative inline-block leading-none text-[var(--ink-strong)] " +
(small ? "text-[18px] pt-1" : "text-[34px]")
}
>
{stamp && <StampBg />}
<span className="relative">{value}</span>
</p>
</div>
);
}
function StampBg() {
return (
<svg
aria-hidden
className="pointer-events-none absolute -left-3 -top-3 h-14 w-14 -rotate-6 opacity-70"
viewBox="0 0 60 60"
fill="none"
>
<circle
cx="30"
cy="30"
r="26"
stroke="var(--accent)"
strokeWidth="1.2"
strokeDasharray="3 3"
/>
<circle cx="30" cy="30" r="22" stroke="var(--accent)" strokeWidth="0.8" />
</svg>
);
}
/* -- formatters ----------------------------------------------------------- */
function formatCost(usd: number): string {
if (usd < 0.001) return `$${(usd * 1000).toFixed(2)}m`; // in mills
return `$${usd.toFixed(4)}`;
}
function formatLatency(ms: number): string {
if (ms < 1000) return `${Math.round(ms)}ms`;
return `${(ms / 1000).toFixed(2)}s`;
}
|