spb/polyllm

1"use client";2import * as React from "react";3import { ArrowDownRight, ArrowUpRight } from "lucide-react";4import { Skeleton } from "@/components/ui/misc";5import { Tooltip } from "@/components/ui/tooltip";6import { cn, formatUsd, formatTokens, formatNumber, formatMs } from "@/lib/utils";7import { formatPercent } from "@/lib/client/humanize";8import { Sparkline } from "./charts";9import type { UsageKpis, UsageProjection, UsageSeriesPoint } from "./types";1011/**12 * Stat tile contract (dataviz): label (sentence case) · value (semibold, proportional figures,13 * auto-compact) · optional delta (signed, vs the previous period; colour = direction × whether up is good)14 * · optional sparkline (de-emphasised).15 */16export function KpiTile({ label, value, hint, delta, upIsGood = true, spark, sparkColor, className, tooltip }: { label: string; value: React.ReactNode; hint?: React.ReactNode; delta?: number | null; upIsGood?: boolean; spark?: number[]; sparkColor?: string; className?: string; tooltip?: string }) {17  const showDelta = typeof delta === "number" && Number.isFinite(delta) && Math.abs(delta) >= 0.5;18  const good = showDelta ? (delta! > 0) === upIsGood : true;19  const inner = (20    <div className={cn("panel flex min-h-[88px] flex-col justify-between px-4 py-3.5", className)}>21      <div className="flex items-start justify-between gap-2">22        <p className="text-[12px] font-medium text-fg-muted">{label}</p>23        {spark ? <Sparkline values={spark} color={sparkColor} /> : null}24      </div>25      <div>26        <p className="mt-1 text-[22px] font-semibold leading-7 tracking-tight">{value}</p>27        <div className="mt-0.5 flex flex-wrap items-center gap-x-2 text-xs text-fg-subtle">28          {showDelta ? (29            <span className={cn("inline-flex items-center gap-0.5 font-medium", good ? "text-success" : "text-danger")}>30              {delta! > 0 ? <ArrowUpRight className="size-3" /> : <ArrowDownRight className="size-3" />}31              {Math.abs(delta!).toFixed(delta! >= 100 ? 0 : 1)}%32            </span>33          ) : null}34          {hint ? <span className="truncate">{hint}</span> : null}35        </div>36      </div>37    </div>38  );39  return tooltip ? (40    <Tooltip content={tooltip}>41      <div className="min-w-0">{inner}</div>42    </Tooltip>43  ) : (44    inner45  );46}4748export function KpiSkeleton({ count = 8 }: { count?: number }) {49  return (50    <div className="grid grid-cols-2 gap-3 md:grid-cols-4">51      {Array.from({ length: count }).map((_, i) => (52        <Skeleton key={i} className="h-[88px] rounded-xl" />53      ))}54    </div>55  );56}5758export function KpiGrid({ kpis, projection, series }: { kpis: UsageKpis; projection: UsageProjection; series: UsageSeriesPoint[] }) {59  const cost = series.map((s) => s.costUsd);60  const req = series.map((s) => s.requests);61  const tok = series.map((s) => s.inputTokens + s.outputTokens);62  const cacheShare = kpis.inputTokens ? kpis.cachedTokens / kpis.inputTokens : 0;63  return (64    <div className="grid grid-cols-2 gap-3 md:grid-cols-4">65      <KpiTile label="Estimated cost" value={formatUsd(kpis.costUsd)} delta={projection.costTrendPct} upIsGood={false} hint={projection.previous ? "vs previous period" : "public list prices"} spark={cost} tooltip={kpis.unpricedRequests ? `${formatNumber(kpis.unpricedRequests)} request(s) have no known price and are counted as $0.` : "Estimated from public list prices at request time; your provider invoice is the source of truth."} />66      <KpiTile label="Requests" value={formatNumber(kpis.requests)} delta={projection.requestsTrendPct} hint={kpis.failures ? `${formatNumber(kpis.failures)} failed` : kpis.stopped ? `${formatNumber(kpis.stopped)} stopped` : "all succeeded"} spark={req} />67      <KpiTile label="Tokens" value={formatTokens(kpis.totalTokens)} hint={`${formatTokens(kpis.inputTokens)} in · ${formatTokens(kpis.outputTokens)} out`} spark={tok} sparkColor="var(--fg-muted)" />68      <KpiTile label="Reasoning tokens" value={formatTokens(kpis.reasoningTokens)} hint={kpis.outputTokens ? `${formatPercent(kpis.reasoningTokens / kpis.outputTokens, 0)} of output` : "billed as output"} />69      <KpiTile label="Cached input" value={formatTokens(kpis.cachedTokens)} hint={kpis.cachedTokens ? `${formatPercent(cacheShare, 0)} of input` : "no cache hits"} />70      <KpiTile label="Avg first token" value={kpis.avgTtftMs === null ? "—" : formatMs(kpis.avgTtftMs)} hint={kpis.avgTokensPerSec === null ? `avg latency ${formatMs(kpis.avgLatencyMs)}` : `${kpis.avgTokensPerSec.toFixed(0)} tok/s output`} />71      <KpiTile label="Avg context" value={kpis.avgContextTokens === null ? "—" : formatTokens(Math.round(kpis.avgContextTokens))} hint="input tokens per request" />72      <KpiTile label="Error rate" value={formatPercent(kpis.errorRate, kpis.errorRate > 0 && kpis.errorRate < 0.01 ? 2 : 1)} hint={kpis.errorRate > 0.05 ? "check provider status" : kpis.requests ? "healthy" : undefined} className={cn(kpis.errorRate > 0.05 && "ring-1 ring-warning/40")} />73    </div>74  );75}76