c84127adf8
An always-present invariant in the TopBar chrome: the live serving triplet (N correct · N refused · 0 wrong) aggregated across lanes from /serving/metrics, the wrong count load-bearing — 0 in the verified token, >0 in the contradicted token. It is a MIRROR, never a hard-coded zero: renders a non-zero wrong honestly, and an honest 'metrics unavailable' when the reports can't be read. Links to the Calibration route (the discipline behind the number). Tests: aggregate triplet + 0-wrong, non-zero-wrong-honest (not hard-coded), metrics-unavailable-not-fake-zero. (Adds fetchServingMetrics/useServingMetrics locally; unioned with B2 on rebase.)
59 lines
2 KiB
TypeScript
59 lines
2 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { useServingMetrics } from "../api/queries";
|
|
|
|
// The project's thesis, made a constant presence: the live serving outcome
|
|
// with the wrong count load-bearing. It is a MIRROR of /serving/metrics —
|
|
// it shows whatever the committed reports say, never a hard-coded zero, and
|
|
// says so honestly when the metrics can't be read.
|
|
export function WrongZeroFrame() {
|
|
const { data, isLoading, isError } = useServingMetrics();
|
|
|
|
const base =
|
|
"shrink-0 rounded-full border px-3 py-1 text-xs tabular-nums focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--color-focus-ring)]";
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<span
|
|
className={`${base} border-[var(--color-border-subtle)] text-[var(--color-text-secondary)]`}
|
|
aria-live="polite"
|
|
>
|
|
wrong=0 …
|
|
</span>
|
|
);
|
|
}
|
|
|
|
if (isError || !data || data.length === 0) {
|
|
return (
|
|
<span
|
|
className={`${base} border-[var(--color-border-subtle)] text-[var(--color-text-muted)]`}
|
|
aria-live="polite"
|
|
title="serving metrics could not be read"
|
|
>
|
|
wrong=0: metrics unavailable
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const correct = data.reduce((sum, m) => sum + m.correct, 0);
|
|
const refused = data.reduce((sum, m) => sum + m.refused, 0);
|
|
const wrong = data.reduce((sum, m) => sum + m.wrong, 0);
|
|
|
|
return (
|
|
<Link
|
|
to="/calibration"
|
|
className={`${base} border-[var(--color-border-subtle)] bg-[var(--color-surface-sunken)] no-underline text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)]`}
|
|
aria-label={`Serving outcome: ${correct} correct, ${refused} refused, ${wrong} wrong. View calibration.`}
|
|
>
|
|
<span>{correct} correct · {refused} refused · </span>
|
|
<span
|
|
className={
|
|
wrong > 0
|
|
? "font-semibold text-[var(--color-state-contradicted)]"
|
|
: "font-semibold text-[var(--color-state-verified)]"
|
|
}
|
|
>
|
|
{wrong} wrong
|
|
</span>
|
|
</Link>
|
|
);
|
|
}
|