Spaces:
Runtime error
Runtime error
File size: 1,860 Bytes
cd8bd0a | 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 | "use client";
import { useEffect, useState } from "react";
import { useTranslations } from "next-intl";
interface Summary {
totalRuns: number;
totalTokensSaved: number;
runsWithStyles: number;
bypassCount: number;
totalOutputTokens: number;
appliedStyleCounts: Record<string, number>;
}
const EMPTY: Summary = {
totalRuns: 0,
totalTokensSaved: 0,
runsWithStyles: 0,
bypassCount: 0,
totalOutputTokens: 0,
appliedStyleCounts: {},
};
export default function CompressionStylesTile() {
const t = useTranslations("settings");
const [summary, setSummary] = useState<Summary>(EMPTY);
useEffect(() => {
fetch("/api/settings/compression/run-telemetry")
.then((r) => (r.ok ? r.json() : null))
.then((data: Summary | null) => {
if (data) setSummary(data);
})
.catch(() => {});
}, []);
const styles = Object.entries(summary.appliedStyleCounts);
return (
<div
data-testid="compression-styles-tile"
className="rounded-lg border border-border/40 bg-surface p-4"
>
<p className="text-sm font-medium text-text-main">{t("compressionStylesTileTitle")}</p>
<p className="mt-1 text-2xl font-semibold text-text-main">
{summary.totalTokensSaved.toLocaleString("en-US", { useGrouping: false })}
</p>
<p className="text-xs text-text-muted">tokens saved · {summary.runsWithStyles} runs styled</p>
<div className="mt-2 flex flex-wrap gap-1">
{styles.length === 0 ? (
<span className="text-xs text-text-muted">No styled runs yet.</span>
) : (
styles.map(([id, count]) => (
<span
key={id}
className="rounded bg-border/30 px-2 py-0.5 text-xs text-text-main"
>
{id} · {count}
</span>
))
)}
</div>
</div>
);
}
|