| const state = { data: null, packet: null }; |
| const byId = (id) => document.getElementById(id); |
| const esc = (value) => String(value ?? "").replace(/[&<>'"]/g, (char) => ({"&":"&","<":"<",">":">","'":"'",'"':"""}[char])); |
| const percent = (part, total) => total ? `${Math.round(part * 100 / total)}%` : "—"; |
|
|
| async function loadData() { |
| const response = await fetch("benchmark.json"); |
| if (!response.ok) throw new Error(`data request failed (${response.status})`); |
| return response.json(); |
| } |
|
|
| function renderResults(runs) { |
| byId("results-body").innerHTML = runs.map((run) => ` |
| <tr> |
| <td><strong>${esc(run.domain_label)}</strong></td> |
| <td>${run.packet_count}</td> |
| <td>${run.trajectory_passed}/${run.packet_count} <span class="badge">${percent(run.trajectory_passed, run.packet_count)}</span></td> |
| <td>${run.independent_end_task_passed}/${run.packet_count} <span class="badge">${percent(run.independent_end_task_passed, run.packet_count)}</span></td> |
| <td>${run.primary_routing_decisions}</td> |
| <td>${run.suppressed_by_budget}</td> |
| </tr>`).join(""); |
| } |
|
|
| function unique(values) { return [...new Set(values.filter(Boolean))].sort(); } |
| function fillSelect(select, values, label) { |
| select.innerHTML = `<option value="">${label}</option>` + values.map((value) => `<option value="${esc(value)}">${esc(value)}</option>`).join(""); |
| } |
|
|
| function availablePackets() { |
| const domain = byId("domain-filter").value; |
| return state.data.packets.filter((packet) => !domain || packet.domain === domain); |
| } |
|
|
| function updatePacketOptions(keepSelection = true) { |
| const select = byId("packet-filter"); |
| const previous = keepSelection ? select.value : ""; |
| const packets = availablePackets(); |
| select.innerHTML = packets.map((packet) => `<option value="${esc(packet.packet_id)}">${esc(packet.packet_id)}</option>`).join(""); |
| if (packets.some((packet) => packet.packet_id === previous)) select.value = previous; |
| renderPacket(); |
| } |
|
|
| function renderPacket() { |
| const id = byId("packet-filter").value; |
| state.packet = state.data.packets.find((packet) => packet.packet_id === id) || availablePackets()[0]; |
| if (!state.packet) return; |
| byId("packet-filter").value = state.packet.packet_id; |
| const p = state.packet; |
| byId("packet-summary").innerHTML = ` |
| <div class="packet-summary-head"> |
| <div><h3>${esc(p.packet_id)}</h3><div class="badges"><span class="badge">${esc(p.domain_label)}</span><span class="badge">${esc(p.executor_model)}</span><span class="badge">${p.primary_routing_decisions} primary decisions</span></div></div> |
| <div class="badges"><span class="status ${p.trajectory_passed ? "success" : "failed"}">trajectory ${p.trajectory_passed ? "pass" : "fail"}</span><span class="status ${p.independent_end_task_passed ? "success" : "failed"}">trusted ${p.independent_end_task_passed ? "pass" : "fail"}</span></div> |
| </div><p>${esc(p.task)}</p>`; |
| renderSteps(); |
| } |
|
|
| function renderSteps() { |
| const role = byId("role-filter").value; |
| const status = byId("status-filter").value; |
| const rows = state.packet.steps.filter((step) => (!role || step.role === role) && (!status || step.event_status === status)); |
| byId("trajectory").innerHTML = rows.length ? rows.map((step) => ` |
| <article class="trajectory-step"> |
| <div class="step-number">#${String(step.index).padStart(2,"0")}</div> |
| <div class="step-role"><strong>${esc(step.role)}</strong><small>budget before: ${esc(step.budget_before)} · confidence: ${step.confidence == null ? "—" : Number(step.confidence).toFixed(2)}</small><span class="event-pill">${esc(step.event_status)} · ${esc(step.semantic_delta)}</span></div> |
| <div class="state-change"><small>state before → after</small><code>${esc(step.state_before || "not executed")}</code><code>→ ${esc(step.state_after || "not executed")}</code></div> |
| <div class="choice-list">top choices<br>${step.top_choices.map((choice) => `${esc(choice.role)} ${(choice.probability * 100).toFixed(0)}%`).join(" · ") || "not recorded"}</div> |
| </article>`).join("") : `<p class="error">No step matches the active role and status filters.</p>`; |
| } |
|
|
| async function init() { |
| try { |
| state.data = await loadData(); |
| renderResults(state.data.runs); |
| const domains = state.data.runs.map((run) => run.domain); |
| byId("domain-filter").innerHTML += domains.map((domain) => `<option value="${esc(domain)}">${esc(state.data.runs.find((run) => run.domain === domain).domain_label)}</option>`).join(""); |
| fillSelect(byId("role-filter"), unique(state.data.packets.flatMap((packet) => packet.steps.map((step) => step.role))), "All roles"); |
| fillSelect(byId("status-filter"), unique(state.data.packets.flatMap((packet) => packet.steps.map((step) => step.event_status))), "All statuses"); |
| updatePacketOptions(false); |
| byId("domain-filter").addEventListener("change", () => updatePacketOptions(false)); |
| byId("packet-filter").addEventListener("change", renderPacket); |
| byId("role-filter").addEventListener("change", renderSteps); |
| byId("status-filter").addEventListener("change", renderSteps); |
| } catch (error) { |
| byId("results-body").innerHTML = `<tr><td colspan="6" class="error">Could not load explorer data: ${esc(error.message)}</td></tr>`; |
| byId("trajectory").innerHTML = `<p class="error">Explorer data is unavailable.</p>`; |
| } |
| } |
|
|
| document.addEventListener("DOMContentLoaded", init); |
|
|
