mirror of
https://github.com/lukaszraczylo/traefik-llmgateway.git
synced 2026-10-14 05:18:54 +00:00
fix(webui): accessible warn token, day-window model badges, review minors
Review round (v0.22) — MUST-1, SHOULD-2's frontend half, and every folded minor that touched webui/. MUST-1 (contrast): the degraded badge's amber previously reused --color-chart-tokens-out, tuned for a chart mark, not body text — measured ~2.22:1 against --card in light mode, a WCAG 1.4.3 failure on exactly the "something's wrong" tier. A new semantic --status-warn token pair (main.css, with a @theme inline mapping) replaces it: #a35c00 light (~5.06:1), #f0ac1f dark (~8.97:1, already passing, redefined anyway so every semantic-color token's dark value lives in one place). ProviderRateBadge.vue's degraded tier now uses border-status-warn/40 text-status-warn. SHOULD-2 (frontend half — see the backend commit for admin.go/limits.go): AdminModelRateView drops attemptsMinute/failuresMinute (the backend no longer sends them at all). ProviderRateBadge.vue's attempts-minute/ failures-minute props become optional; their absence (not a passed- through 0) triggers a new dayRateTitle fallback (lib/provider-rate.ts) — a real "0 attempts this minute" and "no minute data fetched at all" read identically as 0 otherwise, which would misreport a model badge as having live-minute data it never measured. Folded minors: - formatRatePercent floors instead of rounds — only a true 100% rate (zero failures) ever renders "100%"; 99.6% now shows "99%", not a round-tripped "100%" that would overstate it. - providerSuccessRate NaN-guards both inputs (Number.isFinite). - ProvidersView's modelRateFor uses `p.modelRates?.[model]` — a stale client against an older server build could otherwise throw rather than fall back, matching its own doc comment's stated intent. - ProviderRateBadge's title is now also its aria-label — title alone is mouse-only; a keyboard/screen-reader user previously got none of the minute/day detail. - The accordion's "Last refresh" DETAIL row (not just the trigger's compact text) now shares refreshLabel's three-state logic via a new refreshDetailLabel (lib/format.ts) — it previously called formatTimestamp directly, so a discovery-off provider's expanded row still said "never" beside a trigger that correctly said "discovery off". - providerModelScopeID's Go doc comment (limits.go, backend commit) cross-references configNamePattern for why the "/" join is collision- safe even though a model id may itself contain "/". - useTabHash.ts documents its two intentional URL-normalization quirks: case-sensitive hash matching, and an invalid/absent initial hash normalizing only in memory, not in the address bar, until the next tab change.
This commit is contained in:
@@ -53,6 +53,7 @@
|
||||
--color-chart-tokens-in: var(--chart-tokens-in);
|
||||
--color-chart-tokens-out: var(--chart-tokens-out);
|
||||
--color-chart-cost: var(--chart-cost);
|
||||
--color-status-warn: var(--status-warn);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
@@ -86,6 +87,20 @@
|
||||
--chart-tokens-in: #0072b2;
|
||||
--chart-tokens-out: #e69f00;
|
||||
--chart-cost: #d55e00;
|
||||
|
||||
/*
|
||||
* --status-warn: a semantic "degraded, not broken" indicator (the
|
||||
* Providers tab's amber success-rate badge, ProviderRateBadge.vue) —
|
||||
* deliberately its OWN token, not a reuse of --chart-tokens-out despite
|
||||
* sharing that token's hue family. --chart-tokens-out is tuned to read
|
||||
* against a chart's plot background at a small mark size, not as body
|
||||
* text on --card; measured here at #e69f00-on-card it comes out to
|
||||
* ~2.22:1, well under WCAG 1.4.3's 4.5:1 text-contrast minimum — a
|
||||
* genuine accessibility bug on exactly the badge tier meant to say
|
||||
* "something's wrong" (MUST-1, v0.22 review round). #a35c00 on the
|
||||
* light --card measures ~5.06:1.
|
||||
*/
|
||||
--status-warn: #a35c00;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@@ -116,6 +131,14 @@
|
||||
--chart-tokens-in: #4098d7;
|
||||
--chart-tokens-out: #f0ac1f;
|
||||
--chart-cost: #e8763a;
|
||||
|
||||
/* #f0ac1f on the dark --card measures ~8.97:1 — no separate dark
|
||||
value was needed to clear WCAG 1.4.3 here, unlike light mode
|
||||
(see --status-warn's own doc comment above), but the token is
|
||||
still redefined per-mode rather than left to fall through, so a
|
||||
reader auditing this block sees every semantic-color token's
|
||||
dark value in one place. */
|
||||
--status-warn: #f0ac1f;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user