index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>MoNaCo Dev Viewer</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="topbar">
    <h1>🧩 MoNaCo <span class="topbar-sub" id="topbarSub">dev subset · 100 questions</span></h1>
    <div class="topbar-right">
      <div class="view-mode-row" id="viewModeRow" role="tablist" aria-label="View mode">
        <button class="view-mode-btn active" data-view-mode="dataset" role="tab" aria-selected="true" title="Browse the 100-question dev subset (source monaco raw schema: question, gold answer, question_decomposition + steps, supporting docs, BM25 distractors)">📑 Dataset</button>
        <button class="view-mode-btn" data-view-mode="unified" role="tab" aria-selected="false" title="The cross-dataset unified eval bundle: 100-qid dev subset with gold answers + gold docs (markdown)">🔧 Unified eval</button>
        <button class="view-mode-btn" data-view-mode="trajectories" role="tab" aria-selected="false" title="Standalone agentic_answer · structure per q (per-qid scaffolds, cell4_agentic_a) — formerly Baseline A · LLM judge_score = 90.48">🛠 Structure per q</button>
        <button class="view-mode-btn" data-view-mode="trajectories_corpus" role="tab" aria-selected="false" title="Standalone agentic_answer · structure per ds (flat structure corpus, cell5_agentic_b) — formerly Baseline B · LLM judge_score = 88.83">🛠 Structure per ds</button>
        <button class="view-mode-btn" data-view-mode="trajectories_rawtext" role="tab" aria-selected="false" title="Standalone agentic_answer · DCI (flat rawtext corpus, cell6_agentic_c v2 rerun) — formerly Baseline C · LLM judge_score = 86.42">🛠 DCI</button>
        <button class="view-mode-btn" data-view-mode="e2e_v0" role="tab" aria-selected="false" title="e2e_pipeline run v0 (agentic trajectories on freshly-extracted scaffolds) · LLM judge_score = 82.01">🤖 e2e v0</button>
        <button class="view-mode-btn" data-view-mode="e2e_v2" role="tab" aria-selected="false" title="e2e_pipeline run v2 · LLM judge_score = 80.94">🤖 e2e v2</button>
        <button class="view-mode-btn" data-view-mode="e2e_v3" role="tab" aria-selected="false" title="e2e_pipeline run v3 · LLM judge_score = 81.32">🤖 e2e v3</button>
        <button class="view-mode-btn" data-view-mode="e2e_structures_v0" role="tab" aria-selected="false" title="For each test question, the supporting docs and the e2e v0 pipeline's generated structures (tabular records / timelines / claims / QA shortcuts / relation edges) per doc.">🏗 e2e structures v0</button>
        <button class="view-mode-btn" data-view-mode="e2e_structures_v2" role="tab" aria-selected="false" title="For each test question, the supporting docs and the e2e v2 pipeline's generated structures per doc.">🏗 e2e structures v2</button>
        <button class="view-mode-btn" data-view-mode="e2e_structures_v3" role="tab" aria-selected="false" title="For each test question, the supporting docs and the e2e v3 pipeline's generated structures per doc.">🏗 e2e structures v3</button>
        <button class="view-mode-btn" data-view-mode="compare" role="tab" aria-selected="false" title="Side-by-side per-qid comparison across all 9 configs (closed-book, with-docs, with-structures, structure per q, structure per ds, DCI, e2e v0, e2e v2, e2e v3) — LLM judge_score">📊 Compare</button>
      </div>
      <a class="topbar-link" href="https://github.com/tomerwolgithub/monaco" target="_blank" rel="noopener">GitHub ↗</a>
      <a class="topbar-link" href="https://arxiv.org/abs/2506.12523" target="_blank" rel="noopener">Paper ↗</a>
    </div>
  </header>

  <div class="layout">
    <aside class="sidebar">
      <div class="sidebar-controls">
        <input id="searchBox" type="search" placeholder="search qid · question · answer" autocomplete="off" />
        <div class="filter-row e2e-filter" id="stopReasonFilter" data-show-in="trajectories trajectories_corpus trajectories_rawtext e2e_v0 e2e_v2 e2e_v3" hidden>
          <button class="filter-pill active" data-stop="all">All</button>
          <button class="filter-pill" data-stop="end_turn">end_turn</button>
          <button class="filter-pill" data-stop="error">error</button>
          <button class="filter-pill" data-stop="max_turns">max_turns</button>
        </div>
        <div class="filter-row e2e-filter" id="scoreFilter" data-show-in="trajectories trajectories_corpus trajectories_rawtext e2e_v0 e2e_v2 e2e_v3" hidden>
          <button class="filter-pill active" data-score="all">All scores</button>
          <button class="filter-pill" data-score="correct">correct (J≥.99)</button>
          <button class="filter-pill" data-score="partial">0&lt;J&lt;.99</button>
          <button class="filter-pill" data-score="zero">J=0</button>
        </div>
        <div class="filter-row compare-filter" id="compareDisagreeFilter" data-show-in="compare" hidden title="Filter by judge-score disagreement across the 9 cells">
          <button class="filter-pill active" data-disagree="all">All</button>
          <button class="filter-pill" data-disagree="agree_high" title="every cell scores judge_score ≥ 0.99">all correct</button>
          <button class="filter-pill" data-disagree="agree_zero" title="every cell scores judge_score = 0">all zero</button>
          <button class="filter-pill" data-disagree="disagree" title="at least one cell disagrees with the others">disagree</button>
        </div>
        <div class="nav-row">
          <button id="prevBtn" title="Previous (←)">◀ Prev</button>
          <span id="counter" class="counter">0 / 0</span>
          <button id="nextBtn" title="Next (→)">Next ▶</button>
        </div>
        <div class="e2e-meta" id="e2eMeta" data-show-in="trajectories trajectories_corpus trajectories_rawtext e2e_v0 e2e_v2 e2e_v3 e2e_structures_v0 e2e_structures_v2 e2e_structures_v3 compare" hidden></div>
      </div>
      <ul id="qidList" class="qid-list" tabindex="-1"></ul>
    </aside>

    <main id="mainPane" class="main-pane">
      <div id="placeholder" class="placeholder">Loading…</div>
    </main>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
  <script src="viewer.js"></script>
</body>
</html>