Build SENTINEL phase 3 judge demo UI

app.py

@@ -88,6 +88,14 @@ def baseline_comparison_chart():
     return FileResponse(chart_path, media_type="image/png")
 
 
+@app.get("/assets/evaluation_results.json")
+def evaluation_results():
+    results_path = _OUTPUTS_DIR / "evaluation_results.json"
+    if not results_path.exists():
+        raise HTTPException(status_code=404, detail="Evaluation results not found.")
+    return FileResponse(results_path, media_type="application/json")
+
+
 @app.get("/api")
 def api_root():
     return {

static/index.html

@@ -193,6 +193,50 @@
       flex-wrap: wrap;
     }
 
+    .modebar {
+      padding: 0 22px 14px;
+      border-bottom: 1px solid #232920;
+      background: rgba(7, 8, 6, 0.9);
+      backdrop-filter: blur(14px);
+    }
+
+    .modebar-inner {
+      width: min(1540px, 100%);
+      margin: 0 auto;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 14px;
+      flex-wrap: wrap;
+    }
+
+    .view-tabs {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .view-tab {
+      min-height: 38px;
+      border-radius: 999px;
+      padding: 0 14px;
+      background: #10140f;
+    }
+
+    .view-tab.active {
+      border-color: rgba(39, 224, 161, 0.72);
+      background: linear-gradient(180deg, #1d6a53, #133c30);
+      color: #effff7;
+    }
+
+    .view-copy {
+      color: var(--muted);
+      font-size: 13px;
+      line-height: 1.4;
+      max-width: 760px;
+    }
+
     .console {
       width: min(1540px, 100%);
       margin: 0 auto;
@@ -201,12 +245,14 @@
       gap: 14px;
       grid-template-columns: minmax(420px, 1.35fr) minmax(340px, 0.85fr);
       grid-template-areas:
+        "hero hero"
         "theater command"
         "mission playground"
         "trust playground"
-        "story readiness"
+        "story judge"
         "proof events"
-        "flow themes";
+        "flow themes"
+        "readiness readiness";
       align-items: start;
     }
 
@@ -219,18 +265,24 @@
       overflow: hidden;
     }
 
+    .hero { grid-area: hero; }
     .theater { grid-area: theater; }
     .command { grid-area: command; }
     .mission { grid-area: mission; }
     .trust { grid-area: trust; }
     .playground { grid-area: playground; }
     .story { grid-area: story; }
+    .judge { grid-area: judge; }
     .readiness { grid-area: readiness; }
     .proof { grid-area: proof; }
     .events { grid-area: events; }
     .flow { grid-area: flow; }
     .themes { grid-area: themes; }
 
+    .section-hidden {
+      display: none;
+    }
+
     .section-head {
       min-height: 54px;
       display: flex;
@@ -254,6 +306,92 @@
       padding: 15px;
     }
 
+    .hero-grid {
+      display: grid;
+      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
+      gap: 13px;
+    }
+
+    .hero-panel {
+      min-height: 208px;
+      border: 1px solid #394132;
+      border-radius: 8px;
+      padding: 15px;
+      background: var(--panel-2);
+    }
+
+    .hero-panel.primary {
+      border-color: rgba(39, 224, 161, 0.42);
+      background:
+        linear-gradient(180deg, rgba(39, 224, 161, 0.12), transparent 45%),
+        var(--panel-2);
+    }
+
+    .hero-panel h3,
+    .judge-card h3 {
+      font-size: 18px;
+      color: var(--cream);
+      margin: 0 0 10px 0;
+    }
+
+    .hero-panel p {
+      color: #e8e1ca;
+      font-size: 14px;
+      line-height: 1.55;
+    }
+
+    .hero-callouts,
+    .hero-steps,
+    .judge-list {
+      display: grid;
+      gap: 9px;
+      margin-top: 14px;
+    }
+
+    .hero-callout,
+    .hero-step,
+    .judge-step {
+      min-height: 52px;
+      border: 1px solid #394132;
+      border-radius: 8px;
+      padding: 11px 12px;
+      background: #0d100b;
+      color: #ebe5cf;
+      line-height: 1.42;
+    }
+
+    .hero-callout strong,
+    .hero-step strong,
+    .judge-step strong {
+      display: block;
+      margin-bottom: 4px;
+      color: var(--cream);
+      font-size: 13px;
+    }
+
+    .hero-stats {
+      margin-top: 14px;
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .hero-stat {
+      min-height: 80px;
+      border: 1px solid #394132;
+      border-radius: 8px;
+      padding: 11px;
+      background: #0d100b;
+    }
+
+    .hero-stat .label {
+      margin-bottom: 7px;
+    }
+
+    .hero-stat .value {
+      font-size: 22px;
+    }
+
     .chips {
       display: flex;
       flex-wrap: wrap;
@@ -904,6 +1042,57 @@
       background: rgba(10, 12, 8, 0.35);
     }
 
+    .judge-grid {
+      display: grid;
+      gap: 12px;
+    }
+
+    .judge-stats {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+
+    .judge-card {
+      min-height: 132px;
+      border: 1px solid #394132;
+      border-radius: 8px;
+      padding: 13px;
+      background: var(--panel-2);
+    }
+
+    .judge-card.good {
+      border-color: rgba(39, 224, 161, 0.4);
+      background: var(--jade-soft);
+    }
+
+    .judge-card.warn {
+      border-color: rgba(245, 186, 65, 0.4);
+      background: var(--amber-soft);
+    }
+
+    .judge-card.bad {
+      border-color: rgba(255, 95, 69, 0.4);
+      background: var(--flame-soft);
+    }
+
+    .judge-card .value {
+      font-size: 28px;
+      margin-top: 8px;
+    }
+
+    .judge-card .muted {
+      display: block;
+      margin-top: 6px;
+      line-height: 1.4;
+    }
+
+    .judge-actions {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 10px;
+    }
+
     .readiness-list {
       display: grid;
       gap: 10px;
@@ -1062,12 +1251,14 @@
       .console {
         grid-template-columns: 1fr;
         grid-template-areas:
+          "hero"
           "theater"
           "command"
           "mission"
           "trust"
           "playground"
           "story"
+          "judge"
           "readiness"
           "proof"
           "events"
@@ -1095,10 +1286,14 @@
 
       .stage-topline,
       .outcome-strip,
+      .hero-grid,
+      .hero-stats,
       .proof-grid,
       .json-grid,
       .playground-meta,
       .story-grid,
+      .judge-stats,
+      .judge-actions,
       .flow-line,
       .theme-grid,
       .stats-grid {
@@ -1146,6 +1341,20 @@
         width: 100%;
       }
 
+      .modebar {
+        padding: 0 13px 12px;
+      }
+
+      .view-tabs {
+        width: 100%;
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      .view-tab {
+        width: 100%;
+      }
+
       .specialist-grid {
         grid-template-columns: 1fr;
       }
@@ -1180,11 +1389,86 @@
         <input id="seedInput" aria-label="Seed" type="number" value="42">
         <button id="resetBtn" class="primary" type="button">Reset Episode</button>
         <button id="swapBtn" class="warn" type="button">Swap Profiles</button>
-        <button id="autoBtn" type="button">Auto Policy</button>
+        <button id="autoBtn" type="button">Heuristic Auto</button>
       </div>
     </header>
 
+    <div class="modebar">
+      <div class="modebar-inner">
+        <div class="view-tabs">
+          <button id="viewOverviewBtn" class="view-tab active" type="button">Overview</button>
+          <button id="viewPlaygroundBtn" class="view-tab" type="button">Playground</button>
+          <button id="viewJudgeBtn" class="view-tab" type="button">Judge Demo</button>
+        </div>
+        <div id="viewCopy" class="view-copy">Overview turns the environment into a judge-readable system story: the problem, the learning signal, and the live failure mode it fixes.</div>
+      </div>
+    </div>
+
     <main class="console">
+      <section class="hero">
+        <div class="section-head">
+          <h2>System Overview</h2>
+          <div class="chips">
+            <span class="chip live">reset → step → state</span>
+            <span class="chip">OpenEnv compatible</span>
+            <span class="chip warn">skill, not identity</span>
+          </div>
+        </div>
+        <div class="body">
+          <div class="hero-grid">
+            <div class="hero-panel primary">
+              <h3>What SENTINEL actually teaches</h3>
+              <p>SENTINEL is not training a specialist to solve one domain task. It trains the orchestrator to decide who to trust, when to verify, when to self-solve, and how to recover when one public slot turns unreliable or adversarial inside a long multi-agent task graph.</p>
+              <div class="hero-callouts">
+                <div class="hero-callout">
+                  <strong>Observation model</strong>
+                  The orchestrator only sees behavior: public slots, trust scores, stakes, step budget, and outcomes.
+                </div>
+                <div class="hero-callout">
+                  <strong>Core novelty</strong>
+                  Hidden specialist profiles reshuffle every reset, so the agent cannot memorize that S2 or S3 is dangerous.
+                </div>
+                <div class="hero-callout">
+                  <strong>Judge takeaway</strong>
+                  This environment turns blind agent-to-agent trust into a trainable oversight skill.
+                </div>
+              </div>
+              <div class="hero-stats">
+                <div class="hero-stat">
+                  <div class="label">Random overall</div>
+                  <div id="heroRandomScore" class="value">0.714</div>
+                </div>
+                <div class="hero-stat">
+                  <div class="label">Heuristic overall</div>
+                  <div id="heroHeuristicScore" class="value">0.816</div>
+                </div>
+                <div class="hero-stat">
+                  <div class="label">Task 3 detect</div>
+                  <div id="heroDetectionScore" class="value">0.735</div>
+                </div>
+              </div>
+            </div>
+            <div class="hero-panel">
+              <h3>How to test this fast</h3>
+              <div class="hero-steps">
+                <div class="hero-step">
+                  <strong>1. Overview mode</strong>
+                  Read the before/after lanes and reward proof. This tells the story in judge language.
+                </div>
+                <div class="hero-step">
+                  <strong>2. Playground mode</strong>
+                  Reset an episode, click Auto Policy, and watch the API payloads, trust bars, and reward stream update.
+                </div>
+                <div class="hero-step">
+                  <strong>3. Judge Demo mode</strong>
+                  Run Random, then Heuristic, then Swap + Replay. That is the live finale sequence.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <section class="theater">
         <div class="section-head">
           <h2>Live Trust Theater</h2>
@@ -1399,7 +1683,7 @@
             <div class="story-lane before">
               <div class="story-title">
                 <strong>Without SENTINEL</strong>
-                <span class="story-score">task3 random 0.699</span>
+                <span id="storyBeforeScore" class="story-score">task3 random 0.699</span>
               </div>
               <div class="story-flow">
                 <div class="story-step">All public slots start near the same trust. The orchestrator delegates with weak evidence.</div>
@@ -1412,7 +1696,7 @@
             <div class="story-lane after">
               <div class="story-title">
                 <strong>With SENTINEL</strong>
-                <span class="story-score">task3 heuristic 0.784</span>
+                <span id="storyAfterScore" class="story-score">task3 heuristic 0.784</span>
               </div>
               <div class="story-flow">
                 <div class="story-step">Behavior updates the TrustLedger after every step, so public slots diverge quickly.</div>
@@ -1426,6 +1710,56 @@
         </div>
       </section>
 
+      <section class="judge">
+        <div class="section-head">
+          <h2>Judge Demo Rail</h2>
+          <div class="chips">
+            <span class="chip live">3-minute flow</span>
+            <span class="chip">one-click policies</span>
+          </div>
+        </div>
+        <div class="body">
+          <div class="judge-grid">
+            <div class="judge-stats">
+              <div class="judge-card bad">
+                <div class="label">Random baseline</div>
+                <div id="judgeRandomScore" class="value">0.714</div>
+                <span class="muted">Blind delegation baseline. Good enough to move, weak at skepticism.</span>
+              </div>
+              <div class="judge-card warn">
+                <div class="label">Heuristic policy</div>
+                <div id="judgeHeuristicScore" class="value">0.816</div>
+                <span class="muted">Trust-weighted routing plus verification at risky gates.</span>
+              </div>
+              <div class="judge-card good">
+                <div class="label">Task 3 detection</div>
+                <div id="judgeDetectionScore" class="value">0.735</div>
+                <span class="muted">Adversarial detections before poison can cascade into later nodes.</span>
+              </div>
+            </div>
+            <div class="judge-actions">
+              <button id="randomPolicyBtn" class="danger" type="button">Run Random</button>
+              <button id="heuristicPolicyBtn" class="primary" type="button">Run Heuristic</button>
+              <button id="judgeSwapBtn" class="warn" type="button">Swap + Replay</button>
+            </div>
+            <div class="judge-list">
+              <div class="judge-step">
+                <strong>Step 1 — show the failure</strong>
+                Run Random to show how similar-looking trust scores lead to brittle routing and weak detection.
+              </div>
+              <div class="judge-step">
+                <strong>Step 2 — show the learned behavior</strong>
+                Run Heuristic to show trust divergence, verification at risky gates, and cleaner recovery.
+              </div>
+              <div class="judge-step">
+                <strong>Step 3 — show generalization</strong>
+                Hit Swap + Replay so hidden roles reshuffle and the orchestrator has to learn from fresh evidence again.
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
       <section class="readiness">
         <div class="section-head">
           <h2>Hackathon Readiness</h2>
@@ -1463,23 +1797,23 @@
             <div class="baseline-table">
               <div class="baseline-row">
                 <span>Random</span>
-                <div class="mini-bar"><span style="width:71.4%;background:#ff5f45"></span></div>
-                <strong>0.714</strong>
+                <div class="mini-bar"><span id="proofRandomBar" style="width:71.4%;background:#ff5f45"></span></div>
+                <strong id="proofRandomScore">0.714</strong>
               </div>
               <div class="baseline-row">
                 <span>Heuristic</span>
-                <div class="mini-bar"><span style="width:81.6%;background:#73a7ff"></span></div>
-                <strong>0.816</strong>
+                <div class="mini-bar"><span id="proofHeuristicBar" style="width:81.6%;background:#73a7ff"></span></div>
+                <strong id="proofHeuristicScore">0.816</strong>
               </div>
               <div class="baseline-row">
                 <span>Oracle-lite</span>
-                <div class="mini-bar"><span style="width:87.2%;background:#27e0a1"></span></div>
-                <strong>0.872</strong>
+                <div class="mini-bar"><span id="proofOracleBar" style="width:87.2%;background:#27e0a1"></span></div>
+                <strong id="proofOracleScore">0.872</strong>
               </div>
               <div class="baseline-row">
                 <span>T3 detect</span>
-                <div class="mini-bar"><span style="width:73.5%;background:#f5ba41"></span></div>
-                <strong>0.735</strong>
+                <div class="mini-bar"><span id="proofDetectBar" style="width:73.5%;background:#f5ba41"></span></div>
+                <strong id="proofDetectScore">0.735</strong>
               </div>
             </div>
             <div class="chart-frame">
@@ -1574,7 +1908,10 @@
       events: [],
       lastRequest: null,
       lastResult: null,
-      lastMode: "reset()"
+      lastMode: "reset()",
+      view: "overview",
+      evaluation: null,
+      demoPolicy: "heuristic"
     };
 
     const el = {
@@ -1585,6 +1922,13 @@
       swapBtn: document.getElementById("swapBtn"),
       swapPanelBtn: document.getElementById("swapPanelBtn"),
       autoBtn: document.getElementById("autoBtn"),
+      viewOverviewBtn: document.getElementById("viewOverviewBtn"),
+      viewPlaygroundBtn: document.getElementById("viewPlaygroundBtn"),
+      viewJudgeBtn: document.getElementById("viewJudgeBtn"),
+      viewCopy: document.getElementById("viewCopy"),
+      randomPolicyBtn: document.getElementById("randomPolicyBtn"),
+      heuristicPolicyBtn: document.getElementById("heuristicPolicyBtn"),
+      judgeSwapBtn: document.getElementById("judgeSwapBtn"),
       specialistSelect: document.getElementById("specialistSelect"),
       recommendChip: document.getElementById("recommendChip"),
       recommendText: document.getElementById("recommendText"),
@@ -1617,7 +1961,23 @@
       leadMove: document.getElementById("leadMove"),
       stageMove: document.getElementById("stageMove"),
       stageSignals: document.getElementById("stageSignals"),
-      rewardText: document.getElementById("rewardText")
+      rewardText: document.getElementById("rewardText"),
+      heroRandomScore: document.getElementById("heroRandomScore"),
+      heroHeuristicScore: document.getElementById("heroHeuristicScore"),
+      heroDetectionScore: document.getElementById("heroDetectionScore"),
+      storyBeforeScore: document.getElementById("storyBeforeScore"),
+      storyAfterScore: document.getElementById("storyAfterScore"),
+      judgeRandomScore: document.getElementById("judgeRandomScore"),
+      judgeHeuristicScore: document.getElementById("judgeHeuristicScore"),
+      judgeDetectionScore: document.getElementById("judgeDetectionScore"),
+      proofRandomBar: document.getElementById("proofRandomBar"),
+      proofRandomScore: document.getElementById("proofRandomScore"),
+      proofHeuristicBar: document.getElementById("proofHeuristicBar"),
+      proofHeuristicScore: document.getElementById("proofHeuristicScore"),
+      proofOracleBar: document.getElementById("proofOracleBar"),
+      proofOracleScore: document.getElementById("proofOracleScore"),
+      proofDetectBar: document.getElementById("proofDetectBar"),
+      proofDetectScore: document.getElementById("proofDetectScore")
     };
 
     function trustColor(value) {
@@ -1656,6 +2016,111 @@
       return {type: "delegate", specialist: best, trust};
     }
 
+    function randomMove() {
+      const obs = state.observation;
+      if (!obs) return {type: "delegate", specialist: "S0", trust: 0.5};
+      const available = obs.available_specialists || ids;
+      const specialist = available[Math.floor(Math.random() * available.length)] || "S0";
+      return {type: "delegate", specialist, trust: obs.trust_snapshot?.[specialist] ?? 0.5};
+    }
+
+    function setView(view) {
+      state.view = view;
+      const sectionViews = {
+        hero: ["overview", "judge"],
+        theater: ["playground", "judge"],
+        command: ["playground", "judge"],
+        mission: ["playground", "judge"],
+        trust: ["playground", "judge"],
+        playground: ["playground", "judge"],
+        story: ["overview", "judge"],
+        judge: ["judge"],
+        readiness: ["overview"],
+        proof: ["overview", "judge"],
+        events: ["playground", "judge"],
+        flow: ["overview"],
+        themes: ["overview"]
+      };
+
+      Object.entries(sectionViews).forEach(([name, views]) => {
+        const node = document.querySelector(`section.${name}`);
+        if (!node) return;
+        node.classList.toggle("section-hidden", !views.includes(view));
+      });
+
+      el.viewOverviewBtn.classList.toggle("active", view === "overview");
+      el.viewPlaygroundBtn.classList.toggle("active", view === "playground");
+      el.viewJudgeBtn.classList.toggle("active", view === "judge");
+
+      const copy = {
+        overview: "Overview turns the environment into a judge-readable system story: the problem, the learning signal, and the live failure mode it fixes.",
+        playground: "Playground is the backend-visible mode: every reset() and step() payload is shown so you can understand exactly what the environment returns.",
+        judge: "Judge Demo is the fast pitch mode: show baseline failure, show heuristic recovery, then swap profiles to prove the agent learned a skill instead of an identity."
+      };
+      if (el.viewCopy) {
+        el.viewCopy.textContent = copy[view] || copy.overview;
+      }
+    }
+
+    async function loadEvaluation() {
+      try {
+        const response = await fetch("/assets/evaluation_results.json");
+        if (!response.ok) throw new Error("evaluation asset missing");
+        state.evaluation = await response.json();
+        renderEvaluation();
+      } catch (error) {
+        console.warn("Failed to load evaluation results", error);
+      }
+    }
+
+    function setMetricText(node, value, digits = 3) {
+      if (!node || value === undefined || value === null || Number.isNaN(Number(value))) return;
+      node.textContent = Number(value).toFixed(digits);
+    }
+
+    function setMetricBar(node, value) {
+      if (!node || value === undefined || value === null || Number.isNaN(Number(value))) return;
+      node.style.width = `${Math.max(0, Math.min(100, Number(value) * 100))}%`;
+    }
+
+    function renderEvaluation() {
+      const data = state.evaluation;
+      if (!data) return;
+
+      const overall = data.summary || {};
+      const task3 = data.by_task?.task3 || {};
+      const random = overall.random || {};
+      const heuristic = overall.heuristic || {};
+      const oracle = overall.oracle_lite || {};
+      const task3Random = task3.random || {};
+      const task3Heuristic = task3.heuristic || {};
+
+      setMetricText(el.heroRandomScore, random.avg_score);
+      setMetricText(el.heroHeuristicScore, heuristic.avg_score);
+      setMetricText(el.heroDetectionScore, task3Heuristic.avg_detection_rate);
+
+      if (el.storyBeforeScore && task3Random.avg_score !== undefined) {
+        el.storyBeforeScore.textContent = `task3 random ${Number(task3Random.avg_score).toFixed(3)}`;
+      }
+      if (el.storyAfterScore && task3Heuristic.avg_score !== undefined) {
+        el.storyAfterScore.textContent = `task3 heuristic ${Number(task3Heuristic.avg_score).toFixed(3)}`;
+      }
+
+      setMetricText(el.judgeRandomScore, random.avg_score);
+      setMetricText(el.judgeHeuristicScore, heuristic.avg_score);
+      setMetricText(el.judgeDetectionScore, task3Heuristic.avg_detection_rate);
+
+      setMetricBar(el.proofRandomBar, random.avg_score);
+      setMetricBar(el.proofHeuristicBar, heuristic.avg_score);
+      setMetricBar(el.proofOracleBar, oracle.avg_score);
+      setMetricBar(el.proofDetectBar, task3Heuristic.avg_detection_rate);
+
+      setMetricText(el.proofRandomScore, random.avg_score);
+      setMetricText(el.proofHeuristicScore, heuristic.avg_score);
+      setMetricText(el.proofOracleScore, oracle.avg_score);
+      setMetricText(el.proofDetectScore, task3Heuristic.avg_detection_rate);
+    }
+
     function renderTrust() {
       const trust = state.observation?.trust_snapshot || Object.fromEntries(ids.map(id => [id, 0.5]));
       const values = ids.map(id => Number(trust[id] ?? 0.5));
@@ -1766,6 +2231,9 @@
       el.selfBtn.disabled = disabled;
       el.skipBtn.disabled = disabled;
       el.applyRecommendBtn.disabled = disabled;
+      if (el.randomPolicyBtn) el.randomPolicyBtn.disabled = state.running;
+      if (el.heuristicPolicyBtn) el.heuristicPolicyBtn.disabled = state.running;
+      if (el.judgeSwapBtn) el.judgeSwapBtn.disabled = state.running;
     }
 
     function render(result) {
@@ -1908,11 +2376,11 @@
       }
     }
 
-    async function autoRun() {
+    async function autoRun(policy = state.demoPolicy) {
       if (!state.observation || state.done) await resetEpisode();
       let guard = 0;
       while (!state.done && guard < 70) {
-        const move = recommendedMove();
+        const move = policy === "random" ? randomMove() : recommendedMove();
         await stepEpisode(move.type, move.specialist);
         guard += 1;
         await new Promise(resolve => setTimeout(resolve, 150));
@@ -1924,23 +2392,40 @@
       await stepEpisode(move.type, move.specialist);
     }
 
-    async function swapProfiles() {
+    async function runPolicy(policy) {
+      state.demoPolicy = policy;
+      await resetEpisode();
+      await autoRun(policy);
+    }
+
+    async function swapProfiles(policy = null) {
       const nextSeed = Number(el.seedInput.value || 0) + 1;
       el.seedInput.value = String(nextSeed);
       await resetEpisode();
+      if (policy) {
+        await autoRun(policy);
+      }
     }
 
     el.resetBtn.addEventListener("click", resetEpisode);
     el.resetPanelBtn.addEventListener("click", resetEpisode);
-    el.swapBtn.addEventListener("click", swapProfiles);
-    el.swapPanelBtn.addEventListener("click", swapProfiles);
+    el.swapBtn.addEventListener("click", () => swapProfiles());
+    el.swapPanelBtn.addEventListener("click", () => swapProfiles());
     el.delegateBtn.addEventListener("click", () => stepEpisode("delegate"));
     el.verifyBtn.addEventListener("click", () => stepEpisode("verify"));
     el.selfBtn.addEventListener("click", () => stepEpisode("solve_independently"));
     el.skipBtn.addEventListener("click", () => stepEpisode("skip"));
-    el.autoBtn.addEventListener("click", autoRun);
+    el.autoBtn.addEventListener("click", () => autoRun("heuristic"));
     el.applyRecommendBtn.addEventListener("click", applyRecommendation);
-
+    el.viewOverviewBtn.addEventListener("click", () => setView("overview"));
+    el.viewPlaygroundBtn.addEventListener("click", () => setView("playground"));
+    el.viewJudgeBtn.addEventListener("click", () => setView("judge"));
+    el.randomPolicyBtn.addEventListener("click", () => runPolicy("random"));
+    el.heuristicPolicyBtn.addEventListener("click", () => runPolicy("heuristic"));
+    el.judgeSwapBtn.addEventListener("click", () => swapProfiles(state.demoPolicy));
+
+    setView("overview");
+    loadEvaluation();
     render();
     resetEpisode();
   </script>