devui/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SocietySim dev UI</title>
<style>
  body { font: 14px/1.4 system-ui, sans-serif; margin: 16px; color: #111; background: #fff; }
  h1 { font-size: 18px; margin: 0 0 8px; }
  h2 { font-size: 15px; margin: 20px 0 6px; }
  fieldset { margin: 8px 0; }
  input[type=text], input[type=password] { width: 22em; max-width: 90%; }
  table { border-collapse: collapse; margin: 4px 0; }
  th, td { border: 1px solid #ccc; padding: 2px 6px; text-align: left; vertical-align: top; }
  th { background: #f3f3f3; }
  th.sortable { cursor: pointer; }
  .ok { color: #070; }
  .bad { color: #b00; }
  .priv { background: #fff7e0; }
  .label { background: #fde; border-radius: 3px; padding: 0 3px; margin-right: 3px; }
  .scroll { overflow-x: auto; }
  .muted { color: #666; }
  pre { margin: 0; white-space: pre-wrap; }
</style>
</head>
<body>
<h1>SocietySim dev UI <span class="muted">(throwaway test tool; not the viewer)</span></h1>

<fieldset>
  <legend>Source</legend>
  <label><input type="radio" name="mode" value="static" checked> Static files</label>
  <label>base <input type="text" id="base" value="../data/"></label>
  <label>schemas <input type="text" id="schemas" value="schema/"></label>
  <br>
  <label><input type="radio" name="mode" value="neon"> Neon Data API</label>
  <label>url <input type="text" id="neon" placeholder="https://.../rest/v1"></label>
  <label>auth url <input type="text" id="auth" placeholder="https://.../neondb/auth"></label>
  <label>token override (optional) <input type="password" id="key" autocomplete="off"></label>
  <button id="load">Load</button>
  <div class="muted">URL params: ?base=, ?schemas=, ?neon=, ?auth=, ?key=. Keys are never stored.</div>
</fieldset>

<div id="status" class="muted"></div>
<div id="out"></div>

<h2>Contract check</h2>
<table id="contract"><thead><tr><th>file</th><th>result</th></tr></thead><tbody></tbody></table>

<script>
"use strict";
const $ = (id) => document.getElementById(id);
const qs = new URLSearchParams(location.search);
if (qs.get("base")) $("base").value = qs.get("base");
if (qs.get("schemas")) $("schemas").value = qs.get("schemas");
if (qs.get("neon")) { $("neon").value = qs.get("neon"); document.querySelector("input[value=neon]").checked = true; }
if (qs.get("auth")) $("auth").value = qs.get("auth");
if (qs.get("key")) $("key").value = qs.get("key");

function el(tag, props, ...kids) {
  const e = document.createElement(tag);
  Object.assign(e, props || {});
  for (const k of kids) e.append(k);
  return e;
}
const fmt = (v) => v === null || v === undefined ? "" : typeof v === "object" ? JSON.stringify(v) : String(v);
const dirUrl = (s) => new URL(s.endsWith("/") ? s : s + "/", location.href).href;

// ---- tiny JSON Schema check: $ref anyOf const enum type required properties
// additionalProperties patternProperties propertyNames items prefixItems
// min/maxItems minimum maximum pattern. Returns a list of problems.
function check(schema, root, v, path, errs) {
  if (errs.length >= 20) return;
  if (schema.$ref) {
    let t = root;
    for (const p of schema.$ref.replace(/^#\//, "").split("/")) t = t[p];
    return check(t, root, v, path, errs);
  }
  if (schema.anyOf) {
    const subs = schema.anyOf.map((s) => { const e = []; check(s, root, v, path, e); return e; });
    if (!subs.some((e) => e.length === 0)) errs.push(`${path}: matches none of the allowed shapes (${subs[0][0] || "?"})`);
    return;
  }
  if ("const" in schema && v !== schema.const) errs.push(`${path}: expected ${JSON.stringify(schema.const)}`);
  if (schema.enum && !schema.enum.includes(v)) errs.push(`${path}: ${JSON.stringify(v)} not in ${JSON.stringify(schema.enum)}`);
  if (schema.type) {
    const t = Array.isArray(v) ? "array" : v === null ? "null" : typeof v;
    const okType = schema.type === t || (schema.type === "integer" && Number.isInteger(v)) ||
      (schema.type === "number" && t === "number");
    if (!okType) { errs.push(`${path}: expected ${schema.type}, got ${t}`); return; }
  }
  if (typeof v === "string" && schema.pattern && !new RegExp(schema.pattern).test(v)) errs.push(`${path}: does not match ${schema.pattern}`);
  if (typeof v === "number") {
    if ("minimum" in schema && v < schema.minimum) errs.push(`${path}: below ${schema.minimum}`);
    if ("maximum" in schema && v > schema.maximum) errs.push(`${path}: above ${schema.maximum}`);
  }
  if (Array.isArray(v)) {
    if ("minItems" in schema && v.length < schema.minItems) errs.push(`${path}: fewer than ${schema.minItems} items`);
    if ("maxItems" in schema && v.length > schema.maxItems) errs.push(`${path}: more than ${schema.maxItems} items`);
    v.forEach((x, i) => {
      const s = schema.prefixItems && i < schema.prefixItems.length ? schema.prefixItems[i] : schema.items;
      if (s) check(s, root, x, `${path}[${i}]`, errs);
    });
  } else if (v && typeof v === "object") {
    for (const r of schema.required || []) if (!(r in v)) errs.push(`${path}: missing required "${r}"`);
    const props = schema.properties || {}, pats = Object.entries(schema.patternProperties || {});
    for (const [k, x] of Object.entries(v)) {
      const p = `${path}.${k}`;
      if (schema.propertyNames) check(schema.propertyNames, root, k, `${p} (key)`, errs);
      const matched = pats.filter(([re]) => new RegExp(re).test(k));
      if (k in props) check(props[k], root, x, p, errs);
      else if (matched.length) matched.forEach(([, s]) => check(s, root, x, p, errs));
      else if (schema.additionalProperties === false) errs.push(`${p}: unknown field`);
      else if (schema.additionalProperties && typeof schema.additionalProperties === "object") check(schema.additionalProperties, root, x, p, errs);
    }
  }
}

const schemaCache = {};
async function getSchema(name) {
  if (!schemaCache[name]) {
    schemaCache[name] = fetch(new URL(`${name}.schema.json`, dirUrl($("schemas").value))).then((r) => {
      if (!r.ok) throw new Error(`schema ${name}: HTTP ${r.status}`);
      return r.json();
    });
  }
  return schemaCache[name];
}
const contractRows = {};
function report(file, errs) {
  let row = contractRows[file];
  if (!row) {
    row = contractRows[file] = el("tr", {}, el("td"), el("td"));
    $("contract").tBodies[0].append(row);
  }
  row.cells[0].textContent = file;
  row.cells[1].replaceChildren(errs.length === 0 ? el("span", { className: "ok", textContent: "OK" })
    : el("span", { className: "bad", textContent: errs.join("\n") + (errs.length >= 20 ? "\n..." : "") }));
  if (errs.length) row.cells[1].firstChild.style.whiteSpace = "pre-wrap";
}
async function validate(file, schemaName, data) {
  try {
    const s = await getSchema(schemaName);
    const errs = [];
    check(s, s, data, "$", errs);
    report(file, errs);
  } catch (e) { report(file, [String(e.message || e)]); }
}
async function validateLines(file, schemaName, rows, def) {
  try {
    const s = await getSchema(schemaName);
    const sub = def ? { $ref: `#/$defs/${def}` } : s;
    const errs = [];
    rows.forEach((r, i) => check(sub, s, r, `line ${i}`, errs));
    report(file, errs);
  } catch (e) { report(file, [String(e.message || e)]); }
}

// ---- tables
function table(rows, cols, opts = {}) {
  cols = cols || [...new Set(rows.flatMap((r) => Object.keys(r)))];
  const t = el("table");
  const body = el("tbody");
  let sort = { col: null, dir: 1 };
  const draw = () => {
    const rs = rows.slice();
    if (sort.col !== null) {
      const get = (r) => { const v = opts.value ? opts.value(r, sort.col) : r[sort.col]; return v === "" ? null : v; };
      rs.sort((a, b) => {
        const x = get(a), y = get(b);
        if (x === null || x === undefined) return y === null || y === undefined ? 0 : 1;
        if (y === null || y === undefined) return -1;
        return (x < y ? -1 : x > y ? 1 : 0) * sort.dir;
      });
    }
    body.replaceChildren(...rs.map((r) => {
      const tr = el("tr");
      for (const c of cols) {
        const td = el("td");
        const v = opts.cell ? opts.cell(r, c) : null;
        td.append(v instanceof Node ? v : fmt(v !== null && v !== undefined ? v : r[c]));
        tr.append(td);
      }
      return tr;
    }));
  };
  const head = el("tr", {}, ...cols.map((c) => el("th", {
    className: "sortable", textContent: c, title: "click to sort",
    onclick: () => { sort = { col: c, dir: sort.col === c ? -sort.dir : 1 }; draw(); },
  })));
  t.append(el("thead", {}, head), body);
  draw();
  return el("div", { className: "scroll" }, t);
}
function section(title, ...kids) {
  const s = el("section", {}, el("h2", { textContent: title }), ...kids);
  $("out").append(s);
  return s;
}

// ---- static mode
async function getJson(url) {
  const r = await fetch(url);
  if (!r.ok) throw new Error(`${url}: HTTP ${r.status}`);
  return r.json();
}
async function getLines(url, optional) {
  const r = await fetch(url);
  if (!r.ok) { if (optional) return null; throw new Error(`${url}: HTTP ${r.status}`); }
  return (await r.text()).split("\n").filter((l) => l.trim()).map((l) => JSON.parse(l));
}
const flat = (o, pre = "") => Object.entries(o || {}).flatMap(([k, v]) =>
  v && typeof v === "object" && !Array.isArray(v) ? flat(v, `${pre}${k}.`) : [[pre + k, v]]);

async function loadStatic() {
  const base = dirUrl($("base").value);
  const rel = (p) => new URL(p, base).href;
  const files = [
    ["report/index.json", "index"], ["report/leaderboard.json", "leaderboard"],
    ["report/metrics.json", "metrics"], ["highlights.json", "highlights"],
  ];
  const data = {};
  await Promise.all(files.map(async ([f, s]) => {
    try { data[f] = await getJson(rel(f)); validate(f, s, data[f]); }
    catch (e) { report(f, [String(e.message)]); }
  }));

  const lb = data["report/leaderboard.json"];
  if (lb) {
    section(`Leaderboard (${lb.games} games)`, table(lb.models, null, {
      cell: (r, c) => c === "openskill" ? fmt(r.openskill && r.openskill.ordinal) : c === "lie_rate" ? fmt(r.lie_rate) : null,
      value: (r, c) => c === "openskill" ? r.openskill && r.openskill.ordinal : r[c],
    }));
  }
  const m = data["report/metrics.json"];
  if (m) {
    const kv = (obj) => table(flat(obj).map(([k, v]) => ({ key: k, value: v })), ["key", "value"]);
    section("Metrics summary", kv(m.summary));
    section("Metrics speed", table(Object.entries(m.speed || {}).map(([model, s]) => ({ model, ...s }))));
  }
  const hl = data["highlights.json"];
  if (hl) {
    section(`Highlights (${hl.length})`, table(hl, ["type", "score", "game_id", "day", "description", "link"], {
      cell: (r, c) => c === "link" ? el("a", { href: `../${r.link}`, textContent: r.link, title: "opens the real viewer" }) : null,
    }));
  }
  const idx = data["report/index.json"];
  if (idx) {
    const detail = el("div");
    const games = table(idx.map((g) => ({ ...g, seats: undefined, models: [...new Set(Object.values(g.seats).map((s) => s.model))].join(", ") })),
      ["game_id", "seed", "days", "winner", "models", "open"], {
        cell: (r, c) => c === "open" ? el("button", { textContent: "open", onclick: () => openGame(idx.find((g) => g.game_id === r.game_id), base) }) : null,
        value: (r, c) => c === "open" ? null : r[c],
      });
    section(`Games (${idx.length})`, games);
    section("Game", detail);
    detail.id = "game";
    if (qs.get("game") && idx.some((g) => g.game_id === qs.get("game"))) openGame(idx.find((g) => g.game_id === qs.get("game")), base);
  }
}

async function openGame(entry, base) {
  const box = $("game");
  box.replaceChildren(`loading ${entry.game_id}...`);
  try {
    // "file" is relative to the batch dir, one level above report/index.json
    const logUrl = new URL(entry.file, base).href;
    const events = await getLines(logUrl, false);
    const labels = (await getLines(logUrl.replace(/\.jsonl$/, ".labels.jsonl"), true)) || [];
    validateLines(`${entry.file}`, "events", events);
    if (labels.length) validateLines(entry.file.replace(/\.jsonl$/, ".labels.jsonl"), "events", labels, "Label");
    else report(entry.file.replace(/\.jsonl$/, ".labels.jsonl"), []);
    const bySeq = {};
    for (const l of labels) (bySeq[l.source_seq] = bySeq[l.source_seq] || []).push(l);
    const toggle = el("input", { type: "checkbox" });
    const wrap = el("div", { className: "scroll" });
    const seatLine = el("div", { className: "muted" });
    const draw = () => {
      const priv = toggle.checked;
      seatLine.textContent = priv
        ? Object.entries(entry.seats).map(([s, v]) => `${s} ${v.name} (${v.model}, ${v.role})`).join("; ")
        : Object.entries(entry.seats).map(([s, v]) => `${s} ${v.name}`).join("; ");
      const cols = ["seq", "day/phase", "actor", "type", "target", "public_text", "labels"].concat(priv ? ["visibility", "private_reasoning", "suspicion"] : []);
      wrap.replaceChildren(table(events.filter((e) => priv || e.visibility === "public"), cols, {
        cell: (e, c) => {
          if (c === "day/phase") return `${e.day} ${e.phase}`;
          if (c === "labels") return el("span", {}, ...(bySeq[e.seq] || []).map((l) => el("span", { className: "label", textContent: `${l.label} [${l.source}]`, title: l.detail })));
          if (c === "private_reasoning" || c === "visibility" || c === "suspicion") {
            const td = el("pre", { className: "priv", textContent: fmt(e[c]) });
            return td;
          }
          return null;
        },
        value: (e, c) => c === "day/phase" ? e.day : c === "labels" ? (bySeq[e.seq] || []).length : e[c],
      }));
    };
    toggle.onchange = draw;
    box.replaceChildren(el("h3", { textContent: `${entry.game_id}  winner: ${entry.winner}` }),
      el("label", {}, toggle, " narrator view (private reasoning, suspicion, wolf channel, roles)"), seatLine, wrap);
    draw();
  } catch (e) { box.replaceChildren(el("span", { className: "bad", textContent: String(e.message) })); }
}

// ---- Neon mode
// Anonymous JWT from Neon Auth: GET <auth>/token/anonymous -> {token, expires_at}. Cached in memory,
// refreshed 60 s before expiry, or on a 400/401. The token is never logged or stored.
let anon = null;
async function anonToken(force) {
  const auth = $("auth").value.replace(/\/+$/, "");
  if (!auth) return null;
  if (!force && anon && anon.auth === auth && Date.parse(anon.exp) - 60000 > Date.now()) return anon.token;
  const r = await fetch(`${auth}/token/anonymous`);
  if (!r.ok) throw new Error(`anonymous token: HTTP ${r.status}`);
  const j = await r.json();
  anon = { auth, token: j.token, exp: j.expires_at };
  return anon.token;
}
async function neonFetch(url, force) {
  const tok = $("key").value || (await anonToken(force));
  const r = await fetch(url, { headers: tok ? { Authorization: `Bearer ${tok}` } : {} });
  if ((r.status === 400 || r.status === 401) && !force && !$("key").value && $("auth").value) return neonFetch(url, true);
  return r;
}
async function loadNeon() {
  const base = $("neon").value.replace(/\/+$/, "");
  const q = async (name, query) => {
    const r = await neonFetch(`${base}/${name}?${query}`);
    if (!r.ok) throw new Error(`${name}: HTTP ${r.status}`);
    const rows = await r.json();
    section(`${name} (${rows.length})`, rows.length ? table(rows) : el("div", { className: "muted", textContent: "no rows" }));
    return rows;
  };
  const jobs = [
    ["games", "select=game_id,batch_id,status,winner,models,agents&status=eq.finished&or=(agents.is.null,agents.neq.scripted)&order=started_at.desc.nullslast"],
    ["leaderboard", "select=model,seat_games,wins,win_rate&order=win_rate.desc.nullslast"],
    ["leaderboard_by_batch", "select=*"],
    ["lies_by_model", "select=*"],
  ];
  for (const [name, query] of jobs) {
    try { await q(name, query); } catch (e) { section(name, el("span", { className: "bad", textContent: String(e.message) })); }
  }
}

async function load() {
  $("out").replaceChildren();
  $("contract").tBodies[0].replaceChildren();
  for (const k of Object.keys(contractRows)) delete contractRows[k];
  for (const k of Object.keys(schemaCache)) delete schemaCache[k];
  $("status").textContent = "loading...";
  try {
    if (document.querySelector("input[name=mode]:checked").value === "neon") {
      if (!$("neon").value) throw new Error("enter a Data API url");
      await loadNeon();
      report("(Neon rows)", []);
      $("contract").tBodies[0].rows[0].cells[1].textContent = "not checked: schemas cover the static files only";
    } else await loadStatic();
    $("status").textContent = "done";
  } catch (e) { $("status").textContent = ""; $("out").append(el("div", { className: "bad", textContent: String(e.message) })); }
}
$("load").onclick = load;
// config.json (written by scripts/deploy-space.sh when the Neon build vars are set) fills the Neon fields.
fetch("config.json").then((r) => (r.ok ? r.json() : {})).catch(() => ({})).then((c) => {
  if (c.neon_url && !$("neon").value) $("neon").value = c.neon_url;
  if (c.auth_url && !$("auth").value) $("auth").value = c.auth_url;
  if (c.neon_anon_key && !$("key").value) $("key").value = c.neon_anon_key;
  load();
});
</script>
</body>
</html>