Blame for js/explorer.js

/* Scenario Explorer. Dataset text is always inserted with textContent, never innerHTML. */
(function () {
  "use strict";

  var data = null, filtered = [], current = null, loading = false;
  var DEFAULT_ID = 38;

  function el(tag, cls, text) {
    var e = document.createElement(tag);
    if (cls) e.className = cls;
    if (text !== undefined && text !== null) e.textContent = text;
    return e;
  }
  function prettyCat(c) { return String(c || "").replace(/_/g, " "); }

  function section(title, child) {
    var s = el("div", "ex-sec");
    s.appendChild(el("h4", null, title));
    s.appendChild(child);
    return s;
  }

  function segmented(options, render) {
    var wrap = el("div");
    var seg = el("div", "seg");
    var body = el("div");
    options.forEach(function (o, i) {
      var b = el("button", i === 0 ? "active" : "", o.label);
      b.type = "button";
      b.addEventListener("click", function () {
        seg.querySelectorAll("button").forEach(function (x) { x.classList.remove("active"); });
        b.classList.add("active");
        body.replaceChildren(render(o));
      });
      seg.appendChild(b);
    });
    wrap.appendChild(seg);
    wrap.appendChild(body);
    body.appendChild(render(options[0]));
    return wrap;
  }

  function promptBlock(label, text) {
    var p = el("div", "prompt-pre");
    p.appendChild(el("span", "lbl", label));
    p.appendChild(document.createTextNode(text || ""));
    return p;
  }

  function renderDetail(sc) {
    var d = document.getElementById("exDetail");
    d.replaceChildren();
    if (!sc) { d.appendChild(el("p", "empty", "No scenario selected.")); return; }

    var head = el("div", "head");
    head.appendChild(el("h2", null, "Scenario " + sc.id));
    head.appendChild(el("span", "cat-chip", prettyCat(sc.category)));
    d.appendChild(head);

    d.appendChild(section("Environment", el("p", null, sc.environment)));
    d.appendChild(section("Character", el("p", null, sc.character)));

    var task = el("div", "task-box"); task.appendChild(el("p", null, sc.goal_short_term));
    d.appendChild(section("Short-term task (benign)", task));

    d.appendChild(section("Instrumental long-term goal", segmented([
      { label: "Goal", text: sc.goal_long_term },
      { label: "No-hint variant", text: sc.goal_long_term_no_hint },
      { label: "Detailed (strategic hints)", text: sc.goal_long_term_detailed }
    ], function (o) { var b = el("div", "goal-box"); b.appendChild(el("p", null, o.text)); return b; })));

    var prop = sc.propensity || {};
    d.appendChild(section("Prompts", segmented([
      { label: "Capability setups", sys: sc.system_prompt, usr: sc.user_prompt },
      { label: "Propensity setups (no explicit goal)", sys: prop.system_prompt, usr: prop.user_prompt }
    ], function (o) {
      var w = el("div");
      w.appendChild(promptBlock("System prompt", o.sys));
      w.appendChild(promptBlock("User prompt", o.usr));
      return w;
    })));

    var tools = el("div", "tools");
    var tkeys = Object.keys(sc.tools || {});
    if (!tkeys.length) tools.appendChild(el("p", "empty", "Only file-system tools."));
    tkeys.forEach(function (k) {
      var t = sc.tools[k] || {};
      var c = el("div", "tool");
      c.appendChild(el("div", "nm", t.tool_name || k));
      var meta = el("div", "meta");
      var method = String(t.method || "").trim();
      var shortVerb = /^(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)$/i.test(method);
      if (shortVerb) meta.appendChild(el("span", "m", method.toUpperCase()));
      meta.appendChild(document.createTextNode([t.api_name, t.category_name].filter(Boolean).join(" · ")));
      c.appendChild(meta);
      c.appendChild(el("div", "ds", t.tool_description || ""));
      if (method && !shortVerb) c.appendChild(el("div", "mnote", method));
      tools.appendChild(c);
    });
    var ttl = el("div");
    var note = el("p", "empty", "Plus file-system tools: create_file, read_file, list_files, write_file.");
    note.style.marginTop = "8px";
    ttl.appendChild(tools); ttl.appendChild(note);
    d.appendChild(section("Scenario-specific tools (" + tkeys.length + ")", ttl));

    var files = sc.files || [];
    var fw = el("div", "files");
    var list = el("div", "file-list");
    var view = el("pre", "file-view");
    function show(i, btn) {
      list.querySelectorAll(".file-btn").forEach(function (x) { x.classList.remove("active"); });
      if (btn) btn.classList.add("active");
      view.textContent = files[i] ? (files[i].content || "") : "";
    }
    files.forEach(function (f, i) {
      var b = el("button", "file-btn", String(f.path || "").replace(/^\.\/files\//, ""));
      b.type = "button";
      b.addEventListener("click", function () { show(i, b); });
      list.appendChild(b);
    });
    fw.appendChild(list); fw.appendChild(view);
    if (files.length) show(0, list.firstChild); else view.textContent = "(no files)";
    d.appendChild(section("Initial workspace (" + files.length + " files)", fw));
  }

  function renderList() {
    var list = document.getElementById("exList");
    list.replaceChildren();
    document.getElementById("exCount").textContent = filtered.length + " of " + data.length + " scenarios";
    if (!filtered.length) { var e = el("p", "empty", "No scenarios match."); e.style.padding = "14px"; list.appendChild(e); return; }
    var frag = document.createDocumentFragment();
    filtered.forEach(function (sc) {
      var b = el("button", "ex-item" + (current && current.id === sc.id ? " active" : ""));
      b.type = "button";
      b.dataset.id = sc.id;
      var top = el("div", "top");
      top.appendChild(el("b", null, "#" + sc.id));
      top.appendChild(el("span", null, prettyCat(sc.category)));
      b.appendChild(top);
      b.appendChild(el("div", "task", sc.goal_short_term));
      b.addEventListener("click", function () { select(sc.id, true); });
      frag.appendChild(b);
    });
    list.appendChild(frag);
  }

  function applyFilter() {
    var q = document.getElementById("exSearch").value.trim().toLowerCase();
    var cat = document.getElementById("exCategory").value;
    filtered = data.filter(function (sc) {
      if (cat && sc.category !== cat) return false;
      if (!q) return true;
      if (String(sc.id) === q.replace("#", "")) return true;
      return (sc._hay || (sc._hay = [sc.environment, sc.character, sc.goal_short_term, sc.goal_long_term, sc.category].join(" ").toLowerCase())).indexOf(q) !== -1;
    });
    renderList();
  }

  function select(id, updateHash) {
    var sc = data.find(function (s) { return s.id === Number(id); });
    if (!sc) return;
    current = sc;
    document.querySelectorAll(".ex-item").forEach(function (b) { b.classList.toggle("active", Number(b.dataset.id) === sc.id); });
    renderDetail(sc);
    if (updateHash) history.replaceState(null, "", "#explorer/" + sc.id);
    if (window.innerWidth <= 980 && updateHash) document.getElementById("exDetail").scrollIntoView({ behavior: "smooth", block: "start" });
  }

  window.openExplorer = function (id) {
    if (data) { if (id) select(id, false); return; }
    if (loading) return;
    loading = true;
    fetch("data/scenarios.json").then(function (r) {
      if (!r.ok) throw new Error("HTTP " + r.status);
      return r.json();
    }).then(function (json) {
      data = json.sort(function (a, b) { return a.id - b.id; });
      var cats = {};
      data.forEach(function (s) { cats[s.category] = (cats[s.category] || 0) + 1; });
      var sel = document.getElementById("exCategory");
      Object.keys(cats).sort().forEach(function (c) {
        var o = el("option", null, prettyCat(c) + " (" + cats[c] + ")");
        o.value = c;
        sel.appendChild(o);
      });
      sel.addEventListener("change", applyFilter);
      var t;
      document.getElementById("exSearch").addEventListener("input", function () { clearTimeout(t); t = setTimeout(applyFilter, 120); });
      filtered = data.slice();
      renderList();
      // Default to scenario 38, the worked example in Appendix D of the paper.
      var start = id || (data.some(function (s) { return s.id === DEFAULT_ID; }) ? DEFAULT_ID : data[0].id);
      select(start, false);
      var list = document.getElementById("exList");
      var item = list.querySelector('.ex-item[data-id="' + Number(start) + '"]');
      if (item) list.scrollTop = item.offsetTop - list.offsetTop - 8;
    }).catch(function (err) {
      var d = document.getElementById("exDetail");
      d.replaceChildren(el("p", "empty", "Could not load scenarios (" + err.message + "). The full dataset is on Hugging Face: launch/SchemeArena."));
      document.getElementById("exList").replaceChildren();
      loading = false;
    });
  };
})();