Download index.html from yuvin-labs/consequencebench-explorer: direct link, hf CLI and curl.
- Browser
- Download file 29.9 kB
-
https://huggingface.co/spaces/yuvin-labs/consequencebench-explorer/resolve/main/index.html
- Command line
-
hf download hf://spaces/yuvin-labs/consequencebench-explorer/index.html
-
curl -L -o index.html https://huggingface.co/spaces/yuvin-labs/consequencebench-explorer/resolve/main/index.html
29.9 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content="Explore ConsequenceBench scenarios and development results."> | |
| <title>ConsequenceBench Explorer</title> | |
| <style> | |
| :root { | |
| color-scheme: light; | |
| --bg: #f3f5f7; | |
| --surface: #ffffff; | |
| --surface-subtle: #f8f9fb; | |
| --text: #101828; | |
| --muted: #5f6b7a; | |
| --border: #d7dde5; | |
| --border-strong: #b8c1cc; | |
| --blue: #2457d6; | |
| --blue-soft: #eaf0ff; | |
| --red: #b42318; | |
| --red-soft: #fdeceb; | |
| --green: #16794b; | |
| --green-soft: #e8f6ef; | |
| --amber: #9a5b00; | |
| --amber-soft: #fff4dc; | |
| --focus: #7aa2ff; | |
| --radius: 6px; | |
| --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; | |
| --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| min-width: 320px; | |
| background: var(--bg); | |
| color: var(--text); | |
| font-family: var(--sans); | |
| font-size: 15px; | |
| line-height: 1.5; | |
| } | |
| button, | |
| input, | |
| select { | |
| font: inherit; | |
| } | |
| a { | |
| color: var(--blue); | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| button, | |
| input, | |
| select, | |
| a { | |
| outline: none; | |
| } | |
| button:focus-visible, | |
| input:focus-visible, | |
| select:focus-visible, | |
| a:focus-visible { | |
| box-shadow: 0 0 0 3px var(--focus); | |
| } | |
| .topbar { | |
| min-height: 64px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--surface); | |
| } | |
| .topbar-inner { | |
| width: min(1440px, 100%); | |
| min-height: 64px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 12px; | |
| min-width: 0; | |
| } | |
| .brand-name { | |
| color: var(--text); | |
| font-size: 20px; | |
| font-weight: 760; | |
| white-space: nowrap; | |
| } | |
| .brand-label { | |
| color: var(--blue); | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| .toplinks { | |
| display: flex; | |
| align-items: center; | |
| gap: 18px; | |
| white-space: nowrap; | |
| } | |
| .toplinks a { | |
| color: var(--muted); | |
| font-size: 14px; | |
| font-weight: 650; | |
| } | |
| .status-strip { | |
| border-bottom: 1px solid #ead3a7; | |
| background: var(--amber-soft); | |
| color: #603700; | |
| font-size: 13px; | |
| } | |
| .status-strip-inner { | |
| width: min(1440px, 100%); | |
| margin: 0 auto; | |
| padding: 9px 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 20px; | |
| } | |
| .status-strip strong { | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| letter-spacing: 0; | |
| } | |
| .shell { | |
| width: min(1440px, 100%); | |
| margin: 0 auto; | |
| padding: 24px; | |
| } | |
| .overview { | |
| display: grid; | |
| grid-template-columns: minmax(300px, 1.8fr) repeat(4, minmax(120px, 0.65fr)); | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| } | |
| .overview-intro { | |
| min-height: 126px; | |
| padding: 22px 24px; | |
| border-right: 1px solid var(--border); | |
| } | |
| .eyebrow { | |
| margin: 0 0 9px; | |
| color: var(--blue); | |
| font-family: var(--mono); | |
| font-size: 12px; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| h1 { | |
| margin: 0 0 8px; | |
| font-size: 27px; | |
| line-height: 1.2; | |
| letter-spacing: 0; | |
| } | |
| .overview-intro p { | |
| max-width: 650px; | |
| margin: 0; | |
| color: var(--muted); | |
| } | |
| .metric { | |
| min-height: 126px; | |
| padding: 22px 18px; | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .metric:last-child { | |
| border-right: 0; | |
| } | |
| .metric-value { | |
| font-family: var(--mono); | |
| font-size: 29px; | |
| font-weight: 760; | |
| line-height: 1; | |
| } | |
| .metric-label { | |
| margin-top: 9px; | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .workspace { | |
| margin-top: 18px; | |
| display: grid; | |
| grid-template-columns: 260px minmax(0, 1fr); | |
| gap: 18px; | |
| align-items: start; | |
| } | |
| .filters { | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| } | |
| .filters-header, | |
| .panel-header { | |
| min-height: 48px; | |
| padding: 0 16px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 12px; | |
| } | |
| .filters-header h2, | |
| .panel-header h2 { | |
| margin: 0; | |
| font-size: 14px; | |
| font-weight: 740; | |
| letter-spacing: 0; | |
| } | |
| .filter-form { | |
| padding: 16px; | |
| } | |
| .field { | |
| margin-bottom: 15px; | |
| } | |
| .field:last-child { | |
| margin-bottom: 0; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 6px; | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| input, | |
| select { | |
| width: 100%; | |
| min-height: 38px; | |
| border: 1px solid var(--border-strong); | |
| border-radius: var(--radius); | |
| background: var(--surface); | |
| color: var(--text); | |
| padding: 7px 10px; | |
| } | |
| .filter-summary { | |
| padding: 12px 16px; | |
| border-top: 1px solid var(--border); | |
| background: var(--surface-subtle); | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .main-panel { | |
| min-width: 0; | |
| border: 1px solid var(--border); | |
| background: var(--surface); | |
| } | |
| .tabs { | |
| min-height: 48px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: stretch; | |
| overflow-x: auto; | |
| } | |
| .tab { | |
| min-width: 132px; | |
| border: 0; | |
| border-right: 1px solid var(--border); | |
| background: var(--surface-subtle); | |
| color: var(--muted); | |
| padding: 0 18px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-weight: 680; | |
| } | |
| .tab[aria-selected="true"] { | |
| background: var(--surface); | |
| color: var(--blue); | |
| box-shadow: inset 0 -3px 0 var(--blue); | |
| } | |
| .tab-panel { | |
| display: none; | |
| } | |
| .tab-panel.active { | |
| display: block; | |
| } | |
| .table-wrap { | |
| width: 100%; | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| table-layout: fixed; | |
| } | |
| th { | |
| height: 42px; | |
| border-bottom: 1px solid var(--border); | |
| background: var(--surface-subtle); | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| font-weight: 700; | |
| text-align: left; | |
| text-transform: uppercase; | |
| } | |
| th, | |
| td { | |
| padding: 10px 14px; | |
| vertical-align: middle; | |
| } | |
| td { | |
| border-bottom: 1px solid #e8ecf1; | |
| color: #273444; | |
| font-size: 13px; | |
| } | |
| tbody tr { | |
| cursor: pointer; | |
| } | |
| tbody tr:hover, | |
| tbody tr.selected { | |
| background: #f1f5ff; | |
| } | |
| .scenario-id, | |
| .mono { | |
| font-family: var(--mono); | |
| } | |
| .scenario-id { | |
| color: var(--blue); | |
| font-weight: 700; | |
| } | |
| .title-cell { | |
| color: var(--text); | |
| font-weight: 680; | |
| overflow-wrap: anywhere; | |
| } | |
| .badge { | |
| display: inline-flex; | |
| min-height: 23px; | |
| align-items: center; | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| background: var(--surface-subtle); | |
| padding: 2px 8px; | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: 11px; | |
| font-weight: 700; | |
| white-space: nowrap; | |
| } | |
| .badge.red { | |
| border-color: #f0b8b3; | |
| background: var(--red-soft); | |
| color: var(--red); | |
| } | |
| .badge.green { | |
| border-color: #b6ddca; | |
| background: var(--green-soft); | |
| color: var(--green); | |
| } | |
| .badge.blue { | |
| border-color: #bfd0ff; | |
| background: var(--blue-soft); | |
| color: var(--blue); | |
| } | |
| .empty, | |
| .loading, | |
| .error { | |
| padding: 42px 24px; | |
| color: var(--muted); | |
| text-align: center; | |
| } | |
| .error { | |
| color: var(--red); | |
| } | |
| .detail { | |
| display: grid; | |
| grid-template-columns: 1.2fr 1fr; | |
| border-top: 1px solid var(--border); | |
| background: var(--surface-subtle); | |
| } | |
| .detail-copy, | |
| .detail-facts { | |
| padding: 20px; | |
| } | |
| .detail-copy { | |
| border-right: 1px solid var(--border); | |
| } | |
| .detail h3 { | |
| margin: 0 0 7px; | |
| font-size: 19px; | |
| letter-spacing: 0; | |
| } | |
| .detail-note { | |
| margin: 12px 0 0; | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .fact-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 14px 18px; | |
| } | |
| .fact dt { | |
| margin: 0 0 3px; | |
| color: var(--muted); | |
| font-family: var(--mono); | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| } | |
| .fact dd { | |
| margin: 0; | |
| overflow-wrap: anywhere; | |
| color: var(--text); | |
| font-size: 13px; | |
| font-weight: 620; | |
| } | |
| .leaderboard-intro, | |
| .method { | |
| padding: 20px; | |
| } | |
| .leaderboard-intro { | |
| border-bottom: 1px solid var(--border); | |
| background: var(--amber-soft); | |
| color: #603700; | |
| font-size: 13px; | |
| } | |
| .leaderboard-table tbody tr { | |
| cursor: default; | |
| } | |
| .number { | |
| font-family: var(--mono); | |
| font-weight: 700; | |
| text-align: right; | |
| } | |
| .method { | |
| max-width: 980px; | |
| } | |
| .method h3 { | |
| margin: 0 0 6px; | |
| font-size: 18px; | |
| } | |
| .method p { | |
| margin: 0 0 18px; | |
| color: var(--muted); | |
| } | |
| .method-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| border: 1px solid var(--border); | |
| } | |
| .method-item { | |
| min-height: 155px; | |
| padding: 18px; | |
| border-right: 1px solid var(--border); | |
| } | |
| .method-item:last-child { | |
| border-right: 0; | |
| } | |
| .method-item strong { | |
| display: block; | |
| margin-bottom: 8px; | |
| } | |
| .method-item span { | |
| color: var(--muted); | |
| font-size: 13px; | |
| } | |
| .hard-counters { | |
| margin-top: 18px; | |
| border: 1px solid #f0b8b3; | |
| background: var(--red-soft); | |
| padding: 16px 18px; | |
| } | |
| .hard-counters strong { | |
| color: var(--red); | |
| } | |
| .footer { | |
| width: min(1440px, 100%); | |
| margin: 0 auto; | |
| padding: 8px 24px 28px; | |
| color: var(--muted); | |
| font-size: 12px; | |
| } | |
| @media (max-width: 1050px) { | |
| .overview { | |
| grid-template-columns: repeat(4, 1fr); | |
| } | |
| .overview-intro { | |
| grid-column: 1 / -1; | |
| border-right: 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .workspace { | |
| grid-template-columns: 1fr; | |
| } | |
| .filter-form { | |
| display: grid; | |
| grid-template-columns: repeat(4, minmax(0, 1fr)); | |
| gap: 12px; | |
| } | |
| .field { | |
| margin: 0; | |
| } | |
| } | |
| @media (max-width: 760px) { | |
| .topbar-inner, | |
| .status-strip-inner, | |
| .shell { | |
| padding-left: 16px; | |
| padding-right: 16px; | |
| } | |
| .topbar-inner { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| padding-top: 14px; | |
| padding-bottom: 14px; | |
| } | |
| .toplinks { | |
| width: 100%; | |
| overflow-x: auto; | |
| } | |
| .status-strip-inner { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .overview { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .metric:nth-child(3) { | |
| border-right: 0; | |
| } | |
| .metric:nth-child(4), | |
| .metric:nth-child(5) { | |
| border-top: 1px solid var(--border); | |
| } | |
| .filter-form { | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| } | |
| .detail, | |
| .method-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .detail-copy, | |
| .method-item { | |
| border-right: 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .method-item:last-child { | |
| border-bottom: 0; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .brand { | |
| align-items: flex-start; | |
| flex-direction: column; | |
| gap: 2px; | |
| } | |
| .overview, | |
| .filter-form, | |
| .fact-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .metric { | |
| min-height: 96px; | |
| border-right: 0; | |
| border-top: 1px solid var(--border); | |
| } | |
| .overview-intro { | |
| min-height: auto; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="topbar"> | |
| <div class="topbar-inner"> | |
| <div class="brand"> | |
| <a class="brand-name" href="https://github.com/yuvin-labs/consequencebench" target="_blank" rel="noreferrer">ConsequenceBench</a> | |
| <span class="brand-label">Public Explorer</span> | |
| </div> | |
| <nav class="toplinks" aria-label="Benchmark links"> | |
| <a href="https://github.com/yuvin-labs/consequencebench" target="_blank" rel="noreferrer">GitHub</a> | |
| <a href="https://huggingface.co/datasets/yuvin-labs/consequencebench" target="_blank" rel="noreferrer">Dataset</a> | |
| <a href="https://github.com/yuvin-labs/consequencebench/blob/main/docs/RUN_A_CANDIDATE.md" target="_blank" rel="noreferrer">Run an agent</a> | |
| <a href="https://github.com/yuvin-labs/consequencebench/discussions" target="_blank" rel="noreferrer">Discuss</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <div class="status-strip"> | |
| <div class="status-strip-inner"> | |
| <span><strong>DEVELOPMENT_PREVIEW_NOT_QUALIFIED</strong></span> | |
| <span>All public effects are simulated. Published runs are self-reported development evidence.</span> | |
| </div> | |
| </div> | |
| <main class="shell"> | |
| <section class="overview" aria-labelledby="overview-title"> | |
| <div class="overview-intro"> | |
| <p class="eyebrow">Agent consequence evaluation</p> | |
| <h1 id="overview-title">Did the agent leave the external system correct?</h1> | |
| <p>Inspect public scenario identities, causal families, oracle bindings, and recorded development runs.</p> | |
| </div> | |
| <div class="metric"> | |
| <span class="metric-value">100</span> | |
| <span class="metric-label">Scenario identities</span> | |
| </div> | |
| <div class="metric"> | |
| <span class="metric-value">300</span> | |
| <span class="metric-label">Lifecycle worlds</span> | |
| </div> | |
| <div class="metric"> | |
| <span class="metric-value">5</span> | |
| <span class="metric-label">Operational domains</span> | |
| </div> | |
| <div class="metric"> | |
| <span class="metric-value">70</span> | |
| <span class="metric-label">Unsafe-action opportunities</span> | |
| </div> | |
| </section> | |
| <div class="workspace"> | |
| <aside class="filters" aria-labelledby="filters-title"> | |
| <div class="filters-header"> | |
| <h2 id="filters-title">Scenario filters</h2> | |
| </div> | |
| <form class="filter-form" id="filters"> | |
| <div class="field"> | |
| <label for="search">Search</label> | |
| <input id="search" type="search" placeholder="ID or title"> | |
| </div> | |
| <div class="field"> | |
| <label for="domain">Domain</label> | |
| <select id="domain"> | |
| <option value="">All domains</option> | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label for="lens">Governance lens</label> | |
| <select id="lens"> | |
| <option value="">All lenses</option> | |
| </select> | |
| </div> | |
| <div class="field"> | |
| <label for="outcome">Catalog baseline</label> | |
| <select id="outcome"> | |
| <option value="">All outcomes</option> | |
| </select> | |
| </div> | |
| </form> | |
| <div class="filter-summary" id="filter-summary">Loading scenarios...</div> | |
| </aside> | |
| <section class="main-panel"> | |
| <div class="tabs" role="tablist" aria-label="Explorer views"> | |
| <button class="tab" role="tab" aria-selected="true" aria-controls="scenarios-panel" id="scenarios-tab">Scenarios</button> | |
| <button class="tab" role="tab" aria-selected="false" aria-controls="runs-panel" id="runs-tab">Development runs</button> | |
| <button class="tab" role="tab" aria-selected="false" aria-controls="method-panel" id="method-tab">Method and limits</button> | |
| </div> | |
| <div class="tab-panel active" id="scenarios-panel" role="tabpanel" aria-labelledby="scenarios-tab"> | |
| <div id="scenario-content" class="loading">Loading the canonical scenario catalog...</div> | |
| <div id="scenario-detail"></div> | |
| </div> | |
| <div class="tab-panel" id="runs-panel" role="tabpanel" aria-labelledby="runs-tab"> | |
| <div class="leaderboard-intro"> | |
| These rows are not official safety rankings. They are internally operated, self-reported development runs on simulated worlds. Compare dimensions separately. | |
| </div> | |
| <div id="leaderboard-content" class="loading">Loading development results...</div> | |
| </div> | |
| <div class="tab-panel" id="method-panel" role="tabpanel" aria-labelledby="method-tab"> | |
| <div class="method"> | |
| <p class="eyebrow">Study separation</p> | |
| <h3>Three questions, three scorecards</h3> | |
| <p>ConsequenceBench does not collapse agent capability, governance conformance, and incremental governance effect into one reward.</p> | |
| <div class="method-grid"> | |
| <div class="method-item"> | |
| <strong>Direct agent capability</strong> | |
| <span>An arbitrary agent investigates and acts in evaluator-owned worlds. The result measures the candidate, not a governance product.</span> | |
| </div> | |
| <div class="method-item"> | |
| <strong>Governance conformance</strong> | |
| <span>A named governance build is tested against declared evidence, authorization, execution, readback, obligation, and compensation contracts.</span> | |
| </div> | |
| <div class="method-item"> | |
| <strong>Frozen-candidate incremental effect</strong> | |
| <span>The same immutable candidate, model, tools, budgets, faults, and retries are replayed through direct and governed paths.</span> | |
| </div> | |
| </div> | |
| <div class="hard-counters"> | |
| <strong>Hard failures stay visible.</strong> | |
| Unsafe effects, duplicate effects, false verification, secret exposure, missing legitimate effects, and infrastructure failures cannot be hidden by an aggregate reward. | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <footer class="footer"> | |
| Data source: yuvin-labs/consequencebench on Hugging Face. Catalog baseline outcomes and generated-world decisions are distinct contracts. | |
| </footer> | |
| <script> | |
| const catalogUrl = "https://huggingface.co/datasets/yuvin-labs/consequencebench/resolve/main/data/scenario_catalog.v1.json"; | |
| const leaderboardUrl = "https://huggingface.co/datasets/yuvin-labs/consequencebench/resolve/main/data/development_leaderboard.v1.json"; | |
| const state = { | |
| scenarios: [], | |
| filtered: [], | |
| selectedId: null, | |
| leaderboard: null | |
| }; | |
| const escapeHtml = (value) => String(value ?? "") | |
| .replaceAll("&", "&") | |
| .replaceAll("<", "<") | |
| .replaceAll(">", ">") | |
| .replaceAll('"', """) | |
| .replaceAll("'", "'"); | |
| const titleCase = (value) => String(value ?? "") | |
| .replaceAll("_", " ") | |
| .replace(/\b\w/g, (letter) => letter.toUpperCase()); | |
| const badgeClass = (value) => { | |
| const normalized = String(value ?? "").toUpperCase(); | |
| if (["DENIED", "CRITICAL", "EXECUTE"].includes(normalized)) return "red"; | |
| if (["PASS", "TRUE", "GOVERNED"].includes(normalized)) return "green"; | |
| return "blue"; | |
| }; | |
| async function fetchJson(url) { | |
| const response = await fetch(url, { cache: "no-store" }); | |
| if (!response.ok) throw new Error(`HTTP ${response.status}`); | |
| return response.json(); | |
| } | |
| function addOptions(selectId, values) { | |
| const select = document.getElementById(selectId); | |
| [...new Set(values)].sort().forEach((value) => { | |
| const option = document.createElement("option"); | |
| option.value = value; | |
| option.textContent = titleCase(value); | |
| select.appendChild(option); | |
| }); | |
| } | |
| function applyFilters() { | |
| const query = document.getElementById("search").value.trim().toLowerCase(); | |
| const domain = document.getElementById("domain").value; | |
| const lens = document.getElementById("lens").value; | |
| const outcome = document.getElementById("outcome").value; | |
| state.filtered = state.scenarios.filter((scenario) => { | |
| const haystack = `${scenario.scenario_id} ${scenario.title}`.toLowerCase(); | |
| return (!query || haystack.includes(query)) | |
| && (!domain || scenario.domain_id === domain) | |
| && (!lens || scenario.governance_lens === lens) | |
| && (!outcome || scenario.catalog_baseline_outcome === outcome); | |
| }); | |
| document.getElementById("filter-summary").textContent = | |
| `${state.filtered.length} of ${state.scenarios.length} scenarios`; | |
| if (!state.filtered.some((scenario) => scenario.scenario_id === state.selectedId)) { | |
| state.selectedId = state.filtered[0]?.scenario_id ?? null; | |
| } | |
| renderScenarios(); | |
| } | |
| function renderScenarios() { | |
| const host = document.getElementById("scenario-content"); | |
| if (!state.filtered.length) { | |
| host.className = "empty"; | |
| host.textContent = "No scenarios match these filters."; | |
| document.getElementById("scenario-detail").innerHTML = ""; | |
| return; | |
| } | |
| host.className = "table-wrap"; | |
| host.innerHTML = ` | |
| <table aria-label="ConsequenceBench scenarios"> | |
| <colgroup> | |
| <col style="width: 92px"> | |
| <col style="width: 34%"> | |
| <col style="width: 18%"> | |
| <col style="width: 20%"> | |
| <col style="width: 120px"> | |
| </colgroup> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Scenario</th> | |
| <th>Domain</th> | |
| <th>Governance lens</th> | |
| <th>Baseline</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| ${state.filtered.map((scenario) => ` | |
| <tr data-id="${escapeHtml(scenario.scenario_id)}" class="${scenario.scenario_id === state.selectedId ? "selected" : ""}" tabindex="0"> | |
| <td class="scenario-id">${escapeHtml(scenario.scenario_id)}</td> | |
| <td class="title-cell">${escapeHtml(scenario.title)}</td> | |
| <td>${escapeHtml(titleCase(scenario.domain_id))}</td> | |
| <td>${escapeHtml(titleCase(scenario.governance_lens))}</td> | |
| <td><span class="badge ${badgeClass(scenario.catalog_baseline_outcome)}">${escapeHtml(scenario.catalog_baseline_outcome)}</span></td> | |
| </tr> | |
| `).join("")} | |
| </tbody> | |
| </table>`; | |
| host.querySelectorAll("tbody tr").forEach((row) => { | |
| const select = () => { | |
| state.selectedId = row.dataset.id; | |
| renderScenarios(); | |
| }; | |
| row.addEventListener("click", select); | |
| row.addEventListener("keydown", (event) => { | |
| if (event.key === "Enter" || event.key === " ") { | |
| event.preventDefault(); | |
| select(); | |
| } | |
| }); | |
| }); | |
| renderDetail(); | |
| } | |
| function renderDetail() { | |
| const scenario = state.scenarios.find((item) => item.scenario_id === state.selectedId); | |
| const host = document.getElementById("scenario-detail"); | |
| if (!scenario) { | |
| host.innerHTML = ""; | |
| return; | |
| } | |
| const binding = scenario.executable_binding ?? {}; | |
| const oracle = scenario.oracle_binding ?? {}; | |
| host.innerHTML = ` | |
| <div class="detail"> | |
| <div class="detail-copy"> | |
| <p class="eyebrow">${escapeHtml(scenario.scenario_id)} / ${escapeHtml(titleCase(scenario.causal_family))}</p> | |
| <h3>${escapeHtml(scenario.title)}</h3> | |
| <span class="badge ${badgeClass(scenario.severity)}">${escapeHtml(String(scenario.severity).toUpperCase())} SEVERITY</span> | |
| <p class="detail-note"> | |
| The catalog baseline is narrative metadata. Executable variants derive their decision from bound world state and may differ from this baseline. | |
| </p> | |
| </div> | |
| <dl class="detail-facts fact-grid"> | |
| <div class="fact"> | |
| <dt>Generator suite</dt> | |
| <dd>${escapeHtml(binding.suite_id)}</dd> | |
| </div> | |
| <div class="fact"> | |
| <dt>Variant</dt> | |
| <dd>${escapeHtml(binding.variant_id)}</dd> | |
| </div> | |
| <div class="fact"> | |
| <dt>Family index</dt> | |
| <dd class="mono">${escapeHtml(binding.family_index)}</dd> | |
| </div> | |
| <div class="fact"> | |
| <dt>Decision space</dt> | |
| <dd>${escapeHtml((oracle.decision_space ?? []).join(", "))}</dd> | |
| </div> | |
| <div class="fact"> | |
| <dt>Catalog source hash</dt> | |
| <dd class="mono">${escapeHtml(scenario.catalog_source_hash)}</dd> | |
| </div> | |
| <div class="fact"> | |
| <dt>Outcome rule</dt> | |
| <dd>${escapeHtml(titleCase(oracle.variant_outcome_rule))}</dd> | |
| </div> | |
| </dl> | |
| </div>`; | |
| } | |
| function renderLeaderboard() { | |
| const host = document.getElementById("leaderboard-content"); | |
| const entries = state.leaderboard?.entries ?? []; | |
| if (!entries.length) { | |
| host.className = "empty"; | |
| host.textContent = "No development rows are available."; | |
| return; | |
| } | |
| host.className = "table-wrap"; | |
| host.innerHTML = ` | |
| <table class="leaderboard-table" aria-label="Development results"> | |
| <colgroup> | |
| <col style="width: 24%"> | |
| <col style="width: 12%"> | |
| <col style="width: 13%"> | |
| <col style="width: 15%"> | |
| <col style="width: 14%"> | |
| <col style="width: 12%"> | |
| <col style="width: 10%"> | |
| </colgroup> | |
| <thead> | |
| <tr> | |
| <th>System</th> | |
| <th>Path</th> | |
| <th>Exact</th> | |
| <th>Correct state</th> | |
| <th>Resolved</th> | |
| <th>Unsafe</th> | |
| <th>Gate</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| ${entries.map((entry) => ` | |
| <tr> | |
| <td class="title-cell">${escapeHtml(entry.system)}</td> | |
| <td><span class="badge ${entry.configuration === "governed" ? "green" : "blue"}">${escapeHtml(String(entry.configuration).toUpperCase())}</span></td> | |
| <td class="number">${escapeHtml(entry.final_semantic_exact_count)}/${escapeHtml(entry.world_count)}</td> | |
| <td class="number">${escapeHtml(entry.consequence_correct_count)}/${escapeHtml(entry.world_count)}</td> | |
| <td class="number">${escapeHtml(entry.task_resolved_count)}/${escapeHtml(entry.world_count)}</td> | |
| <td class="number">${escapeHtml(entry.unsafe_effect_count)}</td> | |
| <td><span class="badge ${entry.safety_gate_passed ? "green" : "red"}">${entry.safety_gate_passed ? "PASS" : "FAIL"}</span></td> | |
| </tr> | |
| `).join("")} | |
| </tbody> | |
| </table>`; | |
| } | |
| function activateTab(tab) { | |
| document.querySelectorAll(".tab").forEach((button) => { | |
| const active = button === tab; | |
| button.setAttribute("aria-selected", String(active)); | |
| document.getElementById(button.getAttribute("aria-controls")).classList.toggle("active", active); | |
| }); | |
| } | |
| document.querySelectorAll(".tab").forEach((tab) => { | |
| tab.addEventListener("click", () => activateTab(tab)); | |
| }); | |
| ["search", "domain", "lens", "outcome"].forEach((id) => { | |
| document.getElementById(id).addEventListener(id === "search" ? "input" : "change", applyFilters); | |
| }); | |
| Promise.all([fetchJson(catalogUrl), fetchJson(leaderboardUrl)]) | |
| .then(([catalog, leaderboard]) => { | |
| state.scenarios = catalog.entries ?? []; | |
| state.filtered = [...state.scenarios]; | |
| state.selectedId = state.scenarios[0]?.scenario_id ?? null; | |
| state.leaderboard = leaderboard; | |
| addOptions("domain", state.scenarios.map((item) => item.domain_id)); | |
| addOptions("lens", state.scenarios.map((item) => item.governance_lens)); | |
| addOptions("outcome", state.scenarios.map((item) => item.catalog_baseline_outcome)); | |
| applyFilters(); | |
| renderLeaderboard(); | |
| }) | |
| .catch((error) => { | |
| document.getElementById("scenario-content").className = "error"; | |
| document.getElementById("scenario-content").textContent = | |
| `The public dataset could not be loaded (${error.message}). Use the Dataset link above.`; | |
| document.getElementById("leaderboard-content").className = "error"; | |
| document.getElementById("leaderboard-content").textContent = | |
| "The development receipt could not be loaded."; | |
| document.getElementById("filter-summary").textContent = "Data unavailable"; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |