diff --git a/internal/gateway/ui/index.html b/internal/gateway/ui/index.html index bbfa786..5a62bdc 100644 --- a/internal/gateway/ui/index.html +++ b/internal/gateway/ui/index.html @@ -126,6 +126,16 @@ td .errc { color:var(--err); font-weight:600; } .bar i { display:block; height:100%; background:var(--accent); border-radius:3px; } .bar.ok i { background:var(--ok); } .bar.err i { background:var(--err); } +.donut-wrap { display:flex; align-items:center; gap:22px; padding:6px 2px; flex-wrap:wrap; } +.donut { position:relative; width:150px; height:150px; flex:0 0 auto; } +.donut svg { transform:rotate(-90deg); } +.donut .center { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; } +.donut .center b { font-size:24px; font-weight:800; } +.donut .center span { font-size:11px; color:var(--muted); } +.donut-legend { display:flex; flex-direction:column; gap:7px; min-width:130px; } +.donut-legend .dl { display:flex; align-items:center; gap:8px; font-size:12.5px; cursor:help; } +.donut-legend .dl i { width:11px; height:11px; border-radius:3px; flex:0 0 auto; } +.donut-legend .dl b { margin-left:auto; font-variant-numeric:tabular-nums; } table th { white-space:nowrap; } .recs-scroll { max-height:420px; overflow:auto; } .recs-scroll table th { position:sticky; top:0; background:var(--card); z-index:1; } @@ -763,13 +773,15 @@ async function paintStats() { function paintModelTable(rows) { const el = $('#tb-model'); if (!el) return; if (!rows.length) { el.innerHTML = `
| ${t('thModel')} | ${t('thReqs')} | ${t('thOk')} | ${t('thErr')} | ${t('thPrompt')} | ${t('thCompl')} | ${t('thAvgLat')} | ${t('thMaxLat')} | |
|---|---|---|---|---|---|---|---|---|
| ${esc(r.name)} | -${w.toFixed(0)}%${fmtN(r.reqs)} | +${sharePct}%${fmtN(r.reqs)} | ${fmtN(r.ok)} | ${fmtN(r.err)} | ${fmtTok(r.prompt_tokens)} | ${fmtTok(r.completion_tokens)} | ${fmtMs(fmtLat(r.latency_sum_ms, r.reqs))} | ${fmtMs(r.latency_max_ms)} |
| ${t('thCode')} | ${t('thReqs')} | ${t('thOk')} | ${t('thErr')} |
|---|---|---|---|
| ${esc(r.name)} | -${fmtN(r.reqs)} | ${fmtN(r.ok)} | ${fmtN(r.err)} |