Skip to content

Dashboard: collapse per-level status badges into a single highest-level badge #347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Dashboard: collapse per-level status badges into a single highest-level badge #347

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b9e8321
Initial plan
Copilot Jun 9, 2026
ce12232
Dashboard: show only highest-level status badge per model
Copilot Jun 9, 2026
59b4740
Dashboard: include L4/L5 skip in single-badge precedence
Copilot Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 39 additions & 28 deletions scripts/templates/dashboard.html.j2
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -581,33 +581,44 @@ function renderModelRow(m) {
return `<div class="${cls}" title="${label}" role="img" aria-label="${label}"></div>`;
}).join('');

// Per-level inline badges next to the model_type. L3 surfaces all three
// pass/xfail/skip outcomes; L2/L4/L5 surface only xfail because their
// dot already conveys pass/skip unambiguously and xfail is the only
// state that is otherwise visually identical to a fail.
let l2Badge = '';
if (m.l2_status === 'xfail') {
l2Badge = ` <span class="status-badge status-xfail" title="L2 known failure: ${esc(m.l2_reason || '')}">XFail</span>`;
} else if (m.l2_status === 'xfail_graph_only') {
l2Badge = ` <span class="status-badge status-xfail" title="L2 graph-build xfail: ${esc(m.l2_reason || '')}">XFail</span>`;
}
// Positive states (L3 parity pass, L5 e2e verified) are intentionally NOT
// badged here: they would duplicate the Confidence column and the L1-L5 dot
// strip. Only exception states (xfail / skip) get inline badges, since those
// are the signals not otherwise distinguishable at a glance.
let l3Badge = '';
if (m.l3_status === 'xfail') {
l3Badge = ` <span class="status-badge status-xfail" title="L3 known failure: ${esc(m.l3_reason || '')}">XFail</span>`;
} else if (m.l3_status === 'skip') {
l3Badge = ` <span class="status-badge status-skip" title="L3 skipped / not run: ${esc(m.l3_reason || '')}">Skip</span>`;
}
let l4Badge = '';
if (m.l4_status === 'xfail') {
l4Badge = ` <span class="status-badge status-xfail" title="L4 known failure: ${esc(m.l4_reason || '')}">XFail</span>`;
}
let l5Badge = '';
if (m.l5_status === 'xfail') {
l5Badge = ` <span class="status-badge status-xfail" title="L5 known failure: ${esc(m.l5_reason || '')}">XFail</span>`;
// Per-level inline badge next to the model_type. To avoid duplicated
// badges (e.g. an L3 Skip alongside an L5 XFail for the same model), we
// emit at most ONE badge per row, picking the highest-level non-pass
// status. Higher-level outcomes supersede lower-level ones because the
// confidence column already reflects the highest attained level — the
// badge calls out the most consequential outstanding issue.
//
// Precedence: walk L5 → L2 and emit the first xfail/skip encountered.
// Both xfail and skip are reportable at every level (each level can be
// skipped or marked xfail independently). Within a level, xfail and
// skip are mutually exclusive in the data model, so we just check each.
// L2 also admits "xfail_graph_only" (parse passes, full-graph build
// xfails). Positive states (L3 parity pass, L5 e2e verified) are
// intentionally NOT badged: they would duplicate the Confidence column
// and the L1-L5 dot strip. Only exception states (xfail / skip) get
// inline badges, since those are the signals not otherwise
// distinguishable at a glance.
const xfailBadge = (level, reason) =>
` <span class="status-badge status-xfail" title="L${level} known failure: ${esc(reason || '')}">XFail</span>`;
const skipBadge = (level, reason) =>
` <span class="status-badge status-skip" title="L${level} skipped / not run: ${esc(reason || '')}">Skip</span>`;
let statusBadge = '';
for (const [level, status, reason] of [
[5, m.l5_status, m.l5_reason],
[4, m.l4_status, m.l4_reason],
[3, m.l3_status, m.l3_reason],
[2, m.l2_status, m.l2_reason],
]) {
if (status === 'xfail' || status === 'xfail_graph_only') {
statusBadge = (level === 2 && status === 'xfail_graph_only')
? ` <span class="status-badge status-xfail" title="L2 graph-build xfail: ${esc(reason || '')}">XFail</span>`
: xfailBadge(level, reason);
break;
}
if (status === 'skip') {
statusBadge = skipBadge(level, reason);
break;
}
}

// min_token_match_ratio badge
Expand All @@ -626,7 +637,7 @@ function renderModelRow(m) {
// Use single-quoted HTML attributes so JSON.stringify's double quotes don't
// break attribute parsing when this string is set via innerHTML.
let row = `<tr style="cursor:pointer" onclick='toggleDetail(${JSON.stringify(m.model_type)})'>
<td style="padding-left: ${groupByFamily ? '32px' : '12px'}">${esc(m.model_type)}${l2Badge}${l3Badge}${l4Badge}${l5Badge}${ratioBadge}</td>
<td style="padding-left: ${groupByFamily ? '32px' : '12px'}">${esc(m.model_type)}${statusBadge}${ratioBadge}</td>
<td>${esc(m.category)}</td>
<td><code style="font-size:0.8em">${esc(m.module_class)}</code></td>
<td><span class="badge badge-${m.confidence_level}">${LEVEL_LABELS[m.confidence_level]}</span></td>
Expand Down
Loading