if (s == null) return null;
try { return JSON.stringify(JSON.parse(s), null, 2); } catch (e) { return s; }
}
+ // Compact token counts: 103673 -> "103.7k". Raw six-digit numbers in a
+ // dense table are hard to compare at a glance.
+ function compactTokens(n) {
+ if (n == null) return '0';
+ if (n < 1000) return String(n);
+ if (n < 1000000) return (n / 1000).toFixed(1) + 'k';
+ return (n / 1000000).toFixed(2) + 'M';
+ }
+ // "103.7k (98%)" — total prompt size plus how much of it came from cache.
+ // The hit rate is the early warning for a broken cache prefix: it should
+ // sit high and stable, and a sudden drop means the prompt stopped
+ // matching and every turn is paying full price again.
+ function formatInput(r) {
+ const total = r.input_tokens ?? 0;
+ const read = r.cache_read_input_tokens ?? 0;
+ if (total === 0) return '0';
+ if (read === 0) return compactTokens(total);
+ const pct = Math.round(read / total * 100);
+ return `${compactTokens(total)} (${pct}%)`;
+ }
+ // `output_tokens` only becomes authoritative when the upstream's closing
+ // `message_delta` arrives. A stream cut short before that leaves the
+ // opening placeholder from `message_start` — 3, for a turn that went on to
+ // emit 35899 — so show a dash rather than a number that reads as fact.
+ function formatOutput(r) {
+ if (r.output_tokens_final === false) {
+ return '—';
+ }
+ return r.output_tokens;
+ }
+ // Inline SVGs rather than emoji: clipboard/check glyphs render wildly
+ // differently across platforms, and these inherit the button's color.
+ const ICON_COPY = '';
+ const ICON_DONE = '';
+
+ function bodyBlock(title, content) {
+ return `
+
+
${title}
+
+
+
${escapeHtml(content ?? '(none)')}
+
`;
+ }
+
+ let lastSignature = '';
+
+ // Longest upstream silence. This is the number that assigns blame when a
+ // stream stalls: a large value means the upstream went quiet, a small one
+ // means it kept sending and the stall was downstream of the proxy.
+ // Highlighted past 60s, which is where intermediaries start dropping
+ // idle connections.
+ function formatIdle(r) {
+ const ms = r.upstream_idle_max_ms;
+ if (ms == null) return '—';
+ const s = ms / 1000;
+ const txt = s < 10 ? s.toFixed(1) + 's' : Math.round(s) + 's';
+ return s >= 60 ? `${txt}` : txt;
+ }
function render(data) {
+ // Records are immutable once stored, so an identical id list means
+ // nothing on screen would change. Skipping the rebuild entirely keeps
+ // text selection and scroll position untouched while the user reads.
+ const signature = `${data.page}|${data.total}|${(data.items || []).map(r => r.id).join(',')}`;
+ if (signature === lastSignature) return;
+ lastSignature = signature;
+
+ // The 5s auto-refresh rebuilds this table wholesale, which resets the
+ // scroll offset of any expanded body the user is in the middle of
+ // reading. Snapshot those offsets and put them back afterwards.
+ const scrollTops = new Map();
+ document.querySelectorAll('tr.detail-row').forEach(tr => {
+ const id = tr.getAttribute('data-detail');
+ tr.querySelectorAll('pre').forEach((pre, i) => {
+ if (pre.scrollTop > 0) scrollTops.set(`${id}:${i}`, pre.scrollTop);
+ });
+ });
+
const rows = (data.items || []).map(r => {
const ok = r.status_code >= 200 && r.status_code < 400;
const model = r.translated_model ? `${r.model} → ${r.translated_model}` : r.model;
@@ -65,23 +168,63 @@