Pass-1 verdicts Space; conversion locks until pass 1 is complete

README.md

@@ -1,10 +1,27 @@
 ---
-title: Audit Verdicts
-emoji: 🐨
-colorFrom: purple
-colorTo: red
+title: LocalGate Audit — Conversion Pass 1
+emoji: ✅
+colorFrom: gray
+colorTo: gray
 sdk: static
+app_file: index.html
 pinned: false
+license: apache-2.0
+hf_oauth: true
+hf_oauth_expiration_minutes: 1440
+hf_oauth_scopes:
+  - read-repos
+  - contribute-repos
+hf_oauth_authorized_org: localgate
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# LocalGate audit — conversion pass 1 (blind verdicts)
+
+Private static annotation Space. Use the **direct URL**
+(https://localgate-audit-verdicts.static.hf.space) — the embedded view links out.
+Sign in with your HF account; judgments are committed to a private dataset in
+**your own namespace** (`{you}/localgate-audit-results`) under your own token,
+so every grade is attributed by commit author. Progress saves continuously and
+resumes across sessions. Incident response: revoke a leaked token at
+https://huggingface.co/settings/tokens and remove this app under Settings →
+Connected Applications.

app.js

@@ -0,0 +1,559 @@
+/* LocalGate audit engine — shared by both audit Spaces.
+ *
+ * Design contract (deliverables/AUDIT_SPACES_BUILD.md, FINAL SPEC):
+ *  - Same-tab OAuth on the direct *.static.hf.space URL; embedded views link out.
+ *  - Token lives in sessionStorage only; the hub library persists nothing itself.
+ *  - Scopes are read-repos + contribute-repos: results go to a private dataset in
+ *    the ANNOTATOR'S OWN namespace ({user}/localgate-audit-results), created on
+ *    first login. Nobody can write anyone else's results at the permission layer.
+ *  - Append-only event log: every judgment/revision is a new row; analysis takes
+ *    the LAST row per key in file order (position is the authority — client
+ *    clocks are metadata, immune to skew). Every push is read-merge-write: the
+ *    remote file is pulled and unioned first, so a push can only grow the file.
+ *  - One tab at a time: a localStorage heartbeat blocks a second tab of the
+ *    same task in the same browser (two browsers merge safely, last-write races
+ *    are bounded by the merge-before-push).
+ *  - All content rendered via textContent. No innerHTML anywhere in this file.
+ *  - localStorage holds the event log per (task, user) — loss bound is zero;
+ *    uploads every SAVE_EVERY judgments / on 's' / on tab-hide / at the end.
+ */
+import { oauthLoginUrl, oauthHandleRedirectIfPresent, uploadFiles, downloadFile,
+         createRepo } from "./hub-2.15.0.bundle.mjs";
+
+/* global CONFIG */
+const ORG_ID = "6a7af86a89612db0d39b0b14";           // localgate — forces the org grant
+const ITEMS_REPO = { type: "dataset", name: "localgate/audit-items" };
+const SAVE_EVERY = 5;
+
+const $ = (sel) => document.querySelector(sel);
+const el = (tag, cls, text) => {
+  const node = document.createElement(tag);
+  if (cls) node.className = cls;
+  if (text !== undefined) node.textContent = text;
+  return node;
+};
+
+// ── rubric fingerprint (same discipline as convert.py's PROMPT_VERSION) ──────
+async function rubricVersion() {
+  const data = new TextEncoder().encode(CONFIG.rubric + "\0" + JSON.stringify(CONFIG.fields));
+  const hash = await crypto.subtle.digest("SHA-256", data);
+  return [...new Uint8Array(hash)].slice(0, 6).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+// ── auth ─────────────────────────────────────────────────────────────────────
+function storedAuth() {
+  try {
+    const raw = sessionStorage.getItem("oauth");
+    if (!raw) return null;
+    const auth = JSON.parse(raw);
+    if (new Date(auth.accessTokenExpiresAt) <= new Date()) return null;
+    return auth;
+  } catch { return null; }
+}
+
+async function ensureAuth() {
+  let auth = storedAuth();
+  if (auth) return auth;
+  const fresh = await oauthHandleRedirectIfPresent();
+  if (fresh) {
+    sessionStorage.setItem("oauth", JSON.stringify(fresh));
+    history.replaceState(null, "", location.pathname);   // ?code is single-use; keep it out of history
+    return fresh;
+  }
+  return null;
+}
+
+async function signIn() {
+  const url = await oauthLoginUrl();                     // reads window.huggingface.variables in a Space
+  window.location.href = url + "&orgIds=" + ORG_ID;      // no param passthrough in the helper; append
+}
+
+// ── state ────────────────────────────────────────────────────────────────────
+const state = {
+  auth: null, user: null, items: [], order: [], idx: 0,
+  events: [],                    // append-only, mirrored to localStorage
+  unsaved: 0, sessionId: crypto.randomUUID().slice(0, 8),
+  shownAt: 0, rubricVersion: "", resultsRepo: null, last: null,
+  breakShownAt: Date.now(), stickyBanner: null, hbTimer: null,
+};
+
+const logKey = () => `audit:${CONFIG.task}:${state.user}`;
+const latestByKey = (events) => {
+  const map = new Map();
+  for (const ev of events) map.set(ev.key, ev);          // log order: later position wins
+  return map;
+};
+
+// Union preserving log order: remote rows first (their order is the published
+// history), then local rows not yet in remote, in local append order. No ts
+// sort — a skewed clock must never reorder a revision before its original.
+function mergeEvents(remote, local) {
+  const seen = new Set(remote.map((ev) => ev.key + "|" + ev.ts));
+  return [...remote, ...local.filter((ev) => !seen.has(ev.key + "|" + ev.ts))];
+}
+
+function loadLocalEvents() {
+  try { return JSON.parse(localStorage.getItem(logKey()) ?? "[]"); }
+  catch { return []; }
+}
+function persistLocal() {
+  localStorage.setItem(logKey(), JSON.stringify(state.events));
+}
+
+// Seeded per-user order (fatigue decorrelation) — mulberry32 over a string hash.
+function seededOrder(n, seed) {
+  let h = 1779033703;
+  for (const ch of seed) { h = Math.imul(h ^ ch.charCodeAt(0), 3432918353); h = (h << 13) | (h >>> 19); }
+  const rand = () => {
+    h = Math.imul(h ^ (h >>> 16), 2246822507); h = Math.imul(h ^ (h >>> 13), 3266489909);
+    return ((h ^= h >>> 16) >>> 0) / 4294967296;
+  };
+  const order = [...Array(n).keys()];
+  for (let i = n - 1; i > 0; i--) { const j = Math.floor(rand() * (i + 1)); [order[i], order[j]] = [order[j], order[i]]; }
+  return order;
+}
+
+// Warm-ups always come first, in file order; real items follow in seeded order.
+function buildOrder() {
+  const warm = [], real = [];
+  state.items.forEach((item, i) => (item.warmup ? warm : real).push(i));
+  const shuffled = seededOrder(real.length, `${CONFIG.task}:${state.user}`).map((i) => real[i]);
+  state.order = [...warm, ...shuffled];
+}
+
+function keyOf(item) { return String(item.id ?? item.key); }
+
+function firstUngraded() {
+  const done = latestByKey(state.events);
+  for (let pos = 0; pos < state.order.length; pos++) {
+    const item = state.items[state.order[pos]];
+    const ev = done.get(keyOf(item));
+    if (!ev || !CONFIG.isComplete(ev)) return pos;
+  }
+  return state.order.length;
+}
+
+// ── results repo (own namespace; contribute-repos scope) ─────────────────────
+async function ensureResultsRepo() {
+  const name = `${state.user}/localgate-audit-results`;
+  state.resultsRepo = { type: "dataset", name };
+  try {
+    await createRepo({ repo: state.resultsRepo, accessToken: state.auth.accessToken,
+                       private: true });
+  } catch (err) {
+    // Already exists (any prior session) is the expected steady state; the hub's
+    // message says "You already created this dataset repo" with no status code.
+    if (!/409|exist|already/i.test(String(err))) throw err;
+  }
+}
+
+const remotePath = () => `${CONFIG.task}/${state.user}.jsonl`;
+
+async function pullRemote() {
+  const blob = await downloadFile({ repo: state.resultsRepo, path: remotePath(),
+                                    accessToken: state.auth.accessToken });
+  if (blob === null) return [];                          // no file yet — first session
+  return (await blob.text()).split("\n").filter(Boolean).map((line) => JSON.parse(line));
+}
+
+async function push() {
+  if (!state.events.length) return;
+  // Read-merge-write: never upload without having just read the remote head.
+  // A pull failure aborts the push — an unreadable remote must not be replaced.
+  const remote = await pullRemote();
+  state.events = mergeEvents(remote, state.events);
+  persistLocal();
+  const jsonl = state.events.map((ev) => JSON.stringify(ev)).join("\n") + "\n";
+  await uploadFiles({
+    repo: state.resultsRepo, accessToken: state.auth.accessToken,
+    commitTitle: `${CONFIG.task}: ${state.user} — ${state.events.length} events`,
+    files: [{ path: remotePath(), content: new Blob([jsonl]) }],
+  });
+  state.unsaved = 0;
+  banner("", true);                                      // clear any stale failure notice
+  renderStatus();
+}
+
+async function pushGuarded() {
+  try { await push(); }
+  catch (err) {
+    banner(/403|401/.test(String(err))
+      ? "Saved locally, but publishing failed (permissions). Nothing is lost — press s to retry after it's fixed."
+      : `Saved locally; publishing failed: ${String(err).slice(0, 120)} — press s to retry.`, true);
+  }
+}
+
+// ── one-tab guard (heartbeat in localStorage; pagehide releases it) ──────────
+const HEARTBEAT_MS = 5000;
+const heartbeatKey = () => `audit:hb:${CONFIG.task}`;
+
+function foreignTabAlive() {
+  try {
+    const hb = JSON.parse(localStorage.getItem(heartbeatKey()) ?? "null");
+    return !!hb && hb.session !== state.sessionId && Date.now() - hb.at < HEARTBEAT_MS * 3;
+  } catch { return false; }
+}
+function readHeartbeat() {
+  try { return JSON.parse(localStorage.getItem(heartbeatKey()) ?? "null"); }
+  catch { return null; }
+}
+
+// Ownership is an epoch: taking over bumps it, and a tab stands down only to a
+// fresh foreign heartbeat of an equal-or-newer epoch — so a seizure is
+// one-directional even while the old tab is still beating.
+function startHeartbeat(force = false) {
+  const stored = readHeartbeat();
+  state.hbEpoch = (stored?.epoch ?? 0) + (force ? 1 : 0);
+  const beat = () => {
+    const hb = readHeartbeat();
+    const foreignFresh = hb && hb.session !== state.sessionId
+      && Date.now() - hb.at < HEARTBEAT_MS * 3;
+    if (foreignFresh && (hb.epoch ?? 0) >= state.hbEpoch) { supersede(); return; }
+    localStorage.setItem(heartbeatKey(),
+      JSON.stringify({ session: state.sessionId, at: Date.now(), epoch: state.hbEpoch }));
+  };
+  beat();
+  clearInterval(state.hbTimer);
+  state.hbTimer = setInterval(beat, HEARTBEAT_MS);
+}
+
+function supersede() {
+  clearInterval(state.hbTimer);
+  commitCurrent();
+  if (state.unsaved) pushGuarded();                      // merge-safe: the other tab re-pulls
+  $("#controls").hidden = true;
+  $("#main").replaceChildren(el("p", null,
+    "Grading moved to another tab. This tab is paused — you can close it; everything here was saved."));
+}
+function releaseHeartbeat() {
+  try {
+    const hb = JSON.parse(localStorage.getItem(heartbeatKey()) ?? "null");
+    if (hb?.session === state.sessionId) localStorage.removeItem(heartbeatKey());
+  } catch { /* releasing is best-effort */ }
+}
+
+// ── recording ────────────────────────────────────────────────────────────────
+function stampClass(values) {
+  // The stamp inks in the verdict's own color; any failing answer turns it red.
+  const vals = Object.values(values);
+  if (vals.includes("no_match") || vals.includes("no")) return "v-no_match";
+  if (vals.includes("no_answer") || vals.includes("borderline")) return "v-no_answer";
+  return "v-match";
+}
+
+function record(item, values, unsure, note) {
+  const key = keyOf(item);
+  const prior = [...state.events].reverse().find((ev) => ev.key === key);
+  state.events.push({
+    key, ...values,
+    unsure: !!unsure, note: note || "",
+    seq: state.events.length,                            // position cross-check for the loader
+    user: state.user, ts: new Date().toISOString(),
+    order_index: state.idx, elapsed_ms: Date.now() - state.shownAt,
+    edit_count: prior ? (prior.edit_count ?? 0) + 1 : 0,
+    session_id: state.sessionId, rubric_version: state.rubricVersion,
+    client: `${CONFIG.task}@${CONFIG.build}`,
+    ...(item.warmup ? { warmup: true } : {}),
+  });
+  persistLocal();
+  state.last = { key, text: CONFIG.summarize(values), unsure: !!unsure,
+                 cls: stampClass(values) };
+  state.unsaved += 1;
+  if (state.unsaved >= SAVE_EVERY) pushGuarded();
+}
+
+// ── UI ───────────────────────────────────────────────────────────────────────
+// Sticky banners (save failures) survive item renders until a push succeeds;
+// transient ones (break reminder) clear on the next item.
+function banner(text, sticky = false) {
+  if (sticky) state.stickyBanner = text || null;
+  const box = $("#banner");
+  const shown = text || state.stickyBanner || "";
+  box.textContent = shown;
+  box.hidden = !shown;
+}
+
+function renderStatus() {
+  const done = [...latestByKey(state.events).values()]
+    .filter((ev) => !ev.warmup && CONFIG.isComplete(ev)).length;
+  const total = state.items.filter((item) => !item.warmup).length;
+  $("#progress").textContent =
+    `${done}/${total} graded · ${state.unsaved} unsaved` +
+    (state.items[state.order[state.idx]]?.warmup ? " · WARM-UP" : "");
+  $("#bar-fill").style.width = `${(100 * done) / total}%`;
+}
+
+function contentBlock(label, text, opts = {}) {
+  const wrap = el("section", "field" + (opts.scroll ? " response" : "")
+                             + (opts.ref ? " reference" : ""));
+  const head = el("b", null, label + (opts.count ? ` · ${text.length} chars` : ""));
+  wrap.append(head);
+  const body = el("div", "content");
+  body.textContent = text;                               // textContent ONLY — never innerHTML
+  wrap.append(body);
+  if (opts.scroll) wrap.append(el("div", "endmark", "· · · end of response · · ·"));
+  return wrap;
+}
+
+function renderItem() {
+  const main = $("#main");
+  main.replaceChildren();
+  banner("");
+
+  if (state.idx >= state.order.length) {
+    main.append(el("h2", null, "All items graded — thank you!"));
+    main.append(el("p", null, "Final save in progress. You can close this tab once the counter reads 0 unsaved."));
+    pushGuarded();
+    renderStatus();
+    $("#controls").hidden = true;
+    return;
+  }
+  const item = state.items[state.order[state.idx]];
+  if (item.warmup) {
+    main.append(el("p", "warmup-note",
+      "Warm-up item — discussable with the others; real items start after these and must be graded independently."));
+  }
+  for (const block of CONFIG.blocks(item)) {
+    main.append(contentBlock(block.label, block.text, block));
+  }
+  state.shownAt = Date.now();
+  renderControls(item);
+  renderStatus();
+  if (Date.now() - state.breakShownAt > 45 * 60 * 1000) {
+    banner("You've been at this a while — good moment for a break. Everything up to the counter is saved.");
+    state.breakShownAt = Date.now();
+  }
+}
+
+function renderControls(item) {
+  const controls = $("#controls");
+  controls.hidden = false;
+  controls.replaceChildren();
+  const current = latestByKey(state.events).get(keyOf(item));
+  const selection = { ...(current ? CONFIG.valuesOf(current) : {}) };
+  let unsure = current?.unsure ?? false;
+
+  const groups = [];
+  for (const field of CONFIG.fields) {
+    const group = el("div", "grp");
+    group.append(el("span", "lbl", field.label));
+    for (const [value, hotkey] of field.options) {
+      const button = el("button", null, value);
+      button.dataset.v = value;                          // semantic verdict color hook
+      button.append(el("kbd", null, hotkey));
+      if (selection[field.name] === value) button.classList.add("sel");
+      button.addEventListener("click", () => choose(field.name, value));
+      group.append(button);
+    }
+    controls.append(group);
+    groups.push(group);
+  }
+
+  const unsureBtn = el("button", "unsure" + (unsure ? " sel" : ""), "unsure");
+  unsureBtn.append(el("kbd", null, "u"));
+  unsureBtn.title = "marks this judgment as uncertain — it still counts, the flag is analysis metadata";
+  unsureBtn.addEventListener("click", () => { unsure = !unsure; unsureBtn.classList.toggle("sel", unsure); });
+  controls.append(unsureBtn);
+
+  const note = el("input", null);
+  note.id = "note"; note.placeholder = CONFIG.notePlaceholder;
+  note.value = current?.note ?? "";
+  controls.append(note);
+
+  const nav = el("div", "nav");
+  const prev = el("button", null, "← prev"); prev.append(el("kbd", null, "j"));
+  prev.addEventListener("click", () => move(-1));
+  const skip = el("button", null, "next →"); skip.append(el("kbd", null, "k"));
+  skip.addEventListener("click", () => move(1));
+  const save = el("button", null, "save"); save.append(el("kbd", null, "s"));
+  save.addEventListener("click", () => { commitCurrent(); pushGuarded(); });
+  nav.append(prev, skip, save);
+  controls.append(nav);
+
+  if (state.last) {
+    const last = el("div", "last");
+    last.append(el("span", null, `last · ${state.last.key}`));
+    last.append(el("span", "stamp " + state.last.cls,
+                   state.last.text + (state.last.unsure ? " · unsure" : "")));
+    last.append(el("span", null, "j to revisit"));
+    controls.append(last);
+  }
+
+  function choose(name, value) {
+    selection[name] = value;
+    CONFIG.fields.forEach((field, fi) => {
+      groups[fi].querySelectorAll("button").forEach((button) => {
+        const label = button.childNodes[0].textContent;
+        button.classList.toggle("sel", selection[field.name] === label);
+      });
+    });
+    if (CONFIG.fields.every((field) => selection[field.name])) move(1);
+  }
+
+  // The one recording path: leaving an item (nav, save, tab-hide) commits a
+  // complete selection whose verdicts, unsure flag, or note differ from the
+  // last recorded event — so a note typed or unsure toggled after the final
+  // verdict click is never lost.
+  controls._commitIfDirty = () => {
+    if (!CONFIG.fields.every((field) => selection[field.name])) return;
+    const now = latestByKey(state.events).get(keyOf(item));
+    const values = Object.fromEntries(CONFIG.fields.map((f) => [f.name, selection[f.name]]));
+    const dirty = !now
+      || CONFIG.fields.some((field) => now[field.name] !== selection[field.name])
+      || (now.unsure ?? false) !== unsure
+      || (now.note ?? "") !== (note.value || "");
+    if (dirty) record(item, values, unsure, note.value);
+  };
+  controls._choose = choose;   // for the keyboard handler
+  controls._toggleUnsure = () => unsureBtn.click();
+}
+
+function commitCurrent() { $("#controls")._commitIfDirty?.(); }
+
+function move(delta) {
+  commitCurrent();
+  state.idx = Math.max(0, Math.min(state.order.length, state.idx + delta));
+  renderItem();
+}
+
+document.addEventListener("keydown", (event) => {
+  if (event.target.tagName === "INPUT" || $("#controls").hidden) return;
+  const controls = $("#controls");
+  if (event.key === "j") { event.preventDefault(); move(-1); return; }
+  if (event.key === "k") { event.preventDefault(); move(1); return; }
+  if (event.key === "s") { event.preventDefault(); commitCurrent(); pushGuarded(); return; }
+  if (event.key === "u") { event.preventDefault(); controls._toggleUnsure?.(); return; }
+  if (event.key === "e") {
+    event.preventDefault();
+    const resp = document.querySelector(".response .content");
+    if (resp) resp.parentElement.scrollTop = resp.parentElement.scrollHeight;
+    return;
+  }
+  const binding = CONFIG.hotkeys[event.key];
+  if (binding) { event.preventDefault(); controls._choose?.(binding[0], binding[1]); }
+});
+
+document.addEventListener("visibilitychange", () => {
+  if (document.visibilityState !== "hidden") return;
+  commitCurrent();                                       // capture a trailing note/unsure edit
+  if (state.unsaved) pushGuarded();                      // best-effort
+});
+window.addEventListener("pagehide", () => {
+  commitCurrent();
+  if (state.unsaved) pushGuarded();                      // best-effort; localStorage is the backstop
+  releaseHeartbeat();                                    // so a reload doesn't trip the one-tab guard
+});
+
+// ── boot ─────────────────────────────────────────────────────────────────────
+async function boot() {
+  $("#task-title").textContent = CONFIG.title;
+  state.rubricVersion = await rubricVersion();
+  $("#rubric-body").textContent = CONFIG.rubric;
+  // Wide screens hold the rubric in a side rail — open it so it reads at a glance.
+  if (matchMedia("(min-width: 1240px)").matches) $("#rubric").open = true;
+
+  if (window.self !== window.top) {
+    // Embedded in hf.co: OAuth storage is partitioned here — link out instead.
+    const main = $("#main");
+    main.replaceChildren(el("p", null, "Open this Space in its own tab to sign in:"));
+    const link = el("a", "open-out", location.href);
+    link.href = location.href; link.target = "_blank"; link.rel = "noopener";
+    main.append(link);
+    return;
+  }
+
+  state.auth = await ensureAuth();
+  if (!state.auth) {
+    const main = $("#main");
+    main.replaceChildren(el("p", null, CONFIG.landing));
+    main.append(el("p", "independence", CONFIG.independence));
+    const button = el("button", "signin", "Sign in with Hugging Face");
+    button.addEventListener("click", signIn);
+    main.append(button);
+    return;
+  }
+
+  const username = state.auth.userInfo.preferred_username;
+  const inOrg = (state.auth.userInfo.orgs ?? []).some((org) => org.preferred_username === "localgate");
+  if (!inOrg) {
+    $("#main").replaceChildren(el("p", null,
+      `@${username} is not on this study's annotator list — ask Samuel to add you to the localgate org.`));
+    return;
+  }
+  state.user = username;
+  $("#whoami").textContent = `@${username}`;
+
+  if (!state.hbTimer && foreignTabAlive()) {
+    const main = $("#main");
+    main.replaceChildren(el("p", null,
+      "This audit is already open in another tab of this browser. Two open copies " +
+      "can overwrite each other's work, so grading is paused here."));
+    const takeOver = el("button", "signin", "Continue in this tab instead");
+    takeOver.addEventListener("click", () => { startHeartbeat(true); boot(); });
+    main.append(takeOver);
+    return;
+  }
+  if (!state.hbTimer) startHeartbeat();
+
+  try {
+    const blob = await downloadFile({ repo: ITEMS_REPO, path: CONFIG.itemsPath,
+                                      accessToken: state.auth.accessToken });
+    if (blob === null) throw new Error("items file missing from localgate/audit-items");
+    state.items = JSON.parse(await blob.text());
+  } catch (err) {
+    $("#main").replaceChildren(el("p", null, `Could not load items: ${String(err).slice(0, 140)}`));
+    const retry = el("button", null, "retry");
+    retry.addEventListener("click", boot);
+    $("#main").append(retry);
+    return;
+  }
+
+  await ensureResultsRepo();
+
+  // Ordering gate: a task can require another task's completion first (the
+  // conversion fidelity pass must not open before the blind verdict pass,
+  // because it reveals which items the filter kept).
+  if (CONFIG.requires) {
+    let done = 0;
+    try {
+      const blob = await downloadFile({
+        repo: state.resultsRepo, accessToken: state.auth.accessToken,
+        path: `${CONFIG.requires.task}/${state.user}.jsonl`,
+      });
+      if (blob !== null) {
+        const rows = (await blob.text()).split("\n").filter(Boolean).map((l) => JSON.parse(l));
+        done = [...latestByKey(rows).values()]
+          .filter((ev) => !ev.warmup && CONFIG.requires.fields.every((f) => ev[f])).length;
+      }
+    } catch { /* unreadable counts as not done — the gate stays shut */ }
+    if (done < CONFIG.requires.count) {
+      $("#main").replaceChildren(el("p", null,
+        `${CONFIG.requires.label} must be finished first — you have graded ` +
+        `${done} of ${CONFIG.requires.count} items there. This pass reveals ` +
+        "information that must not color that one, so it stays locked until " +
+        "you are done."));
+      const link = el("a", "open-out", CONFIG.requires.url);
+      link.href = CONFIG.requires.url; link.rel = "noopener";
+      $("#main").append(link);
+      return;
+    }
+  }
+
+  // Merge remote history with the local log, remote order first (mergeEvents).
+  // A pull FAILURE is not "no file yet": grading continues from the local log,
+  // and because every push re-pulls first, nothing can be overwritten blind.
+  let remote = [];
+  try { remote = await pullRemote(); }
+  catch (err) {
+    banner(`Could not read your previous progress (${String(err).slice(0, 80)}) — ` +
+           "grading continues and is kept in this browser; publishing retries on the next save.", true);
+  }
+  state.events = mergeEvents(remote, loadLocalEvents());
+  persistLocal();
+
+  buildOrder();
+  state.idx = firstUngraded();
+  renderItem();
+}
+
+boot();

config.js

@@ -0,0 +1,61 @@
+window.CONFIG = {
+  task: "verdicts",
+  title: "Conversion audit, pass 1 — 248 items",
+  itemsPath: "verdict_items.json",
+  build: "ef8b962-p1space",
+  landing: "Pass 1 of the conversion audit. You will see original exam questions "
+    + "with their answer options and judge whether each could survive losing its "
+    + "options — you are never told what the automated filter decided. 248 items; "
+    + "expect 2–3 hours, in as many sittings as you like — progress saves "
+    + "continuously. Please stick to one browser: work is guarded per browser, "
+    + "and switching browsers mid-audit merges on save rather than instantly.",
+  independence: "Grade independently: no discussing items until everyone has "
+    + "finished both conversion passes. Do not try to guess or track what the "
+    + "filter kept — every item is shown the same way on purpose.",
+  rubric: "CONVERTS — imagine the options deleted and the question reworded to "
+    + "stand alone. Would a knowledgeable person give the reference answer, "
+    + "rather than a different, equally correct one?\n\nyes — the reference is "
+    + "the single correct answer. no — stripped of options it admits many "
+    + "correct answers, or stops meaning anything. borderline — you genuinely "
+    + "cannot decide; use sparingly.\n\nAlways 'no': exclusion questions "
+    + "('which is NOT', 'EXCEPT', 'least likely') and answers that only mean "
+    + "something beside the other options ('all of the above') — except when "
+    + "the stem itself lists the alternatives ('i) … ii) … iii)'). Common "
+    + "failures: asking for one member of a large category; ranking the "
+    + "options ('best', 'closest'); an answer true among these ten but false "
+    + "about the world; leaning on a unit or convention only the options "
+    + "supplied. A superlative is not automatically a ranking — if the stem "
+    + "fixes the quantity, 'best approximates' has nothing left to rank.\n\n"
+    + "Not failures: multi-part questions (judge uniqueness, not simplicity), "
+    + "working the answer out from supplied figures, clumsy phrasing (a "
+    + "rewrite fixes that), and the reference's wording (a later stage "
+    + "accepts any phrasing of the same fact).\n\nANSWER STANDS ALONE — judge "
+    + "this independently: a grader will see the question, this reference, "
+    + "and a model response. yes — usable target. no — units or magnitude "
+    + "stripped ('1.12' for a speed), a fragment ('greater and grander'), it "
+    + "does not answer what was asked, or it names option labels ('I and II "
+    + "only'). borderline — sparingly.\n\nWHY — half a line on what decided "
+    + "it, written for the other two annotators when you disagree. Do not "
+    + "track your own yes/no ratio: the sample is deliberately not a picture "
+    + "of the corpus.",
+  fields: [
+    { name: "converts", label: "converts?",
+      options: [["yes","1"],["no","2"],["borderline","3"]] },
+    { name: "answer_stands_alone", label: "answer stands alone?",
+      options: [["yes","4"],["no","5"],["borderline","6"]] },
+  ],
+  hotkeys: { "1":["converts","yes"], "2":["converts","no"],
+             "3":["converts","borderline"],
+             "4":["answer_stands_alone","yes"], "5":["answer_stands_alone","no"],
+             "6":["answer_stands_alone","borderline"] },
+  notePlaceholder: "why (half a line)",
+  isComplete: (ev) => !!(ev.converts && ev.answer_stands_alone),
+  valuesOf: (ev) => ({ converts: ev.converts,
+                       answer_stands_alone: ev.answer_stands_alone }),
+  summarize: (v) => `converts:${v.converts} alone:${v.answer_stands_alone}`,
+  blocks: (item) => [
+    { label: "original (with options)",
+      text: item.original + "\n\n" + item.options.map((o,i)=>String.fromCharCode(65+i)+". "+o).join("\n") },
+    { label: "correct answer", text: item.reference_answer, ref: true },
+  ],
+};

index.html

@@ -1,19 +1,27 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; style-src 'self'; font-src 'self'; connect-src https://huggingface.co https://*.hf.co; img-src 'self' data:; base-uri 'none'; form-action 'none'">
+<title>LocalGate audit</title>
+<link rel="stylesheet" href="style.css?v=ef8b962-p1space">
+</head>
+<body>
+<header>
+  <h1 id="task-title">Loading…</h1>
+  <span id="whoami"></span>
+  <span id="progress"></span>
+</header>
+<div id="bar"><div id="bar-fill"></div></div>
+<div id="banner" hidden></div>
+<div id="layout">
+<main id="main"><p>Loading…</p></main>
+<details id="rubric"><summary>Rubric &amp; edge rules (keep open while grading)</summary>
+<pre id="rubric-body"></pre></details>
+</div>
+<div id="controls" hidden></div>
+<script src="config.js?v=ef8b962-p1space"></script>
+<script type="module" src="app.js?v=ef8b962-p1space"></script>
+</body>
 </html>

style.css

@@ -1,28 +1,181 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
+/* LocalGate audit instrument — grading-desk design.
+   Chroma is semantic only: verdict inks + the reference yardstick. Everything
+   instrumental speaks mono; everything read speaks serif. */
+
+@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-400-normal.woff2") format("woff2");
+             font-weight: 400; font-display: swap; }
+@font-face { font-family: "Source Serif 4"; src: url("fonts/source-serif-4-latin-600-normal.woff2") format("woff2");
+             font-weight: 600; font-display: swap; }
+@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
+             font-weight: 400; font-display: swap; }
+@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
+             font-weight: 600; font-display: swap; }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+:root {
+  --ground: #f3f5f4;          /* cool exam paper, not cream */
+  --field: #ffffff;
+  --ink: #1c2430;             /* blue-black */
+  --dim: #5c6672;
+  --line: #d4dad8;
+  --line-strong: #aeb8b4;
+  --ref-ground: #fbf7e6;      /* annotation-yellow: the yardstick, nothing else */
+  --ref-line: #e3d9ae;
+  --match: #2f7a4d;
+  --nomatch: #a63d2a;
+  --noanswer: #58657a;
+  --unsure: #9a7b1f;
+  --yes: #2f7a4d;
+  --no: #a63d2a;
+  --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;
+  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --ground: #171b1f; --field: #1f242a; --ink: #dde3e8; --dim: #8b95a0;
+    --line: #323a41; --line-strong: #49535c;
+    --ref-ground: #2b2618; --ref-line: #4a3f1e;
+    --match: #5cb885; --nomatch: #d9765f; --noanswer: #93a2b8; --unsure: #cfa93e;
+    --yes: #5cb885; --no: #d9765f;
+  }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+* { box-sizing: border-box; }
+html { height: 100%; }
+body { margin: 0; min-height: 100%; background: var(--ground); color: var(--ink);
+       font: 16.5px/1.62 var(--serif); }
+
+/* ── header: instrument panel ── */
+header { display: flex; gap: 1.2rem; align-items: baseline; flex-wrap: wrap;
+         padding: .65rem 1.2rem; background: var(--field);
+         border-bottom: 2px solid var(--ink); font-family: var(--mono); }
+header h1 { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .14em;
+            text-transform: uppercase; }
+#whoami { color: var(--dim); font-size: .75rem; }
+#progress { margin-left: auto; color: var(--dim); font-size: .75rem;
+            font-variant-numeric: tabular-nums; }
+
+/* gauge with ticks every 10% */
+#bar { height: 6px; background:
+         repeating-linear-gradient(to right,
+           transparent 0, transparent calc(10% - 1px),
+           var(--line-strong) calc(10% - 1px), var(--line-strong) 10%),
+         var(--line); }
+#bar-fill { height: 100%; width: 0; background: var(--ink); transition: width .25s ease; }
+
+#banner { padding: .55rem 1.2rem; font-family: var(--mono); font-size: .78rem;
+          color: var(--unsure); background: color-mix(in srgb, var(--unsure) 9%, var(--field));
+          border-bottom: 1px solid var(--line); }
+
+/* ── layout: reading column + rubric rail on wide screens ── */
+#layout { max-width: 100rem; margin: 0 auto; }
+main { max-width: 46rem; margin: 1.1rem auto 12rem; padding: 0 1.2rem; }
+@media (min-width: 1240px) {
+  #layout { display: grid; grid-template-columns: 1fr 21rem; gap: 0; }
+  main { grid-column: 1; margin-left: auto; margin-right: 3vw; }
+  details#rubric { grid-column: 2; position: sticky; top: 0; align-self: start;
+                   max-height: calc(100vh - 8rem); border-left: 1px solid var(--line);
+                   border-top: none; background: transparent; }
+  details#rubric[open] summary { border-bottom: 1px solid var(--line); }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* ── fields ── */
+.field { background: var(--field); border: 1px solid var(--line);
+         border-left: 3px solid var(--line-strong); padding: .8rem 1.1rem;
+         margin: .8rem 0; }
+.field b { display: block; font-family: var(--mono); font-weight: 600;
+           font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
+           color: var(--dim); margin-bottom: .4rem; }
+.field .content { white-space: pre-wrap; overflow-wrap: anywhere; }
+
+/* the yardstick: only the reference wears the annotation highlight */
+.field.reference { background: var(--ref-ground); border-color: var(--ref-line);
+                   border-left-color: var(--unsure); }
+
+.response { max-height: 26rem; overflow-y: auto; border-left-color: var(--ink); }
+.endmark { text-align: center; color: var(--dim); font-family: var(--mono);
+           font-size: .68rem; letter-spacing: .18em; padding-top: .6rem; }
+
+.warmup-note { font-family: var(--mono); font-size: .78rem; padding: .55rem .9rem;
+               border: 1px dashed var(--line-strong); color: var(--dim); }
+.independence { color: var(--dim); font-style: italic; }
+
+button.signin { font: 600 .95rem var(--mono); padding: .7rem 1.5rem; cursor: pointer;
+                border: 2px solid var(--ink); background: var(--ink); color: var(--ground); }
+button.signin:hover { background: transparent; color: var(--ink); }
+
+/* ── rubric ── */
+details#rubric { background: var(--field); border-top: 1px solid var(--line);
+                 font-family: var(--mono); font-size: .74rem; line-height: 1.55;
+                 overflow-y: auto; }
+details#rubric summary { cursor: pointer; padding: .55rem 1.1rem; font-weight: 600;
+                         letter-spacing: .08em; text-transform: uppercase;
+                         font-size: .66rem; color: var(--dim); list-style: none; }
+details#rubric summary::before { content: "▸ "; }
+details#rubric[open] summary::before { content: "▾ "; }
+details#rubric pre { white-space: pre-wrap; font: inherit; margin: 0;
+                     padding: .3rem 1.1rem 1rem; }
+@media (max-width: 1239px) {
+  details#rubric { position: fixed; bottom: 5.9rem; left: 0; right: 0; max-height: 38vh;
+                   border-top: 2px solid var(--line-strong); }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* ── controls: the bench ── */
+#controls { position: fixed; bottom: 0; left: 0; right: 0; background: var(--field);
+            border-top: 2px solid var(--ink); padding: .65rem 1.2rem;
+            display: flex; gap: .7rem; align-items: center; flex-wrap: wrap;
+            font-family: var(--mono); }
+#controls .grp { display: flex; gap: .4rem; align-items: center; }
+#controls .lbl { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
+                 color: var(--dim); }
+#controls button { font: 600 .82rem var(--mono); padding: .48rem .8rem; cursor: pointer;
+                   background: var(--field); color: var(--ink);
+                   border: 2px solid var(--line-strong); }
+#controls button:hover { border-color: var(--ink); }
+
+/* verdict identity: a colored stamp edge; full ink when committed */
+#controls button[data-v] { border-left-width: 5px; }
+#controls button[data-v="match"], #controls button[data-v="yes"] { border-left-color: var(--match); }
+#controls button[data-v="no_match"], #controls button[data-v="no"] { border-left-color: var(--nomatch); }
+#controls button[data-v="no_answer"] { border-left-color: var(--noanswer); }
+#controls button[data-v].sel { color: var(--field); }
+#controls button[data-v="match"].sel, #controls button[data-v="yes"].sel
+  { background: var(--match); border-color: var(--match); }
+#controls button[data-v="no_match"].sel, #controls button[data-v="no"].sel
+  { background: var(--nomatch); border-color: var(--nomatch); }
+#controls button[data-v="no_answer"].sel
+  { background: var(--noanswer); border-color: var(--noanswer); }
+
+#controls button.unsure { border-style: dashed; color: var(--dim); }
+#controls button.unsure.sel { background: var(--unsure); border-color: var(--unsure);
+                              border-style: solid; color: var(--field); }
+
+#controls kbd { display: inline-block; font-size: .62rem; font-weight: 400;
+                padding: 0 .3em; margin-left: .45em; border: 1px solid currentColor;
+                border-bottom-width: 2px; border-radius: 3px; opacity: .65; }
+
+#controls #note { font: .8rem var(--mono); padding: .45rem .6rem; width: 13rem;
+                  border: 1px solid var(--line); background: var(--ground);
+                  color: var(--ink); }
+#controls #note::placeholder { color: var(--dim); }
+#controls .nav { margin-left: auto; display: flex; gap: .4rem; }
+
+/* ── the signature: the verdict stamp ── */
+#controls .last { width: 100%; color: var(--dim); font-size: .72rem;
+                  display: flex; align-items: center; gap: .5rem; }
+#controls .last .stamp { display: inline-block; font-weight: 600; font-size: .7rem;
+                         letter-spacing: .06em; padding: .12rem .5rem;
+                         border: 2px solid var(--stamp, var(--dim));
+                         color: var(--stamp, var(--dim));
+                         transform: rotate(-1.2deg);
+                         animation: stamp .14s ease-out; }
+#controls .last .stamp.v-match { --stamp: var(--match); }
+#controls .last .stamp.v-no_match { --stamp: var(--nomatch); }
+#controls .last .stamp.v-no_answer { --stamp: var(--noanswer); }
+@keyframes stamp { from { transform: rotate(-1.2deg) scale(1.12); opacity: .4; }
+                   to   { transform: rotate(-1.2deg) scale(1); opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .last .stamp { animation: none; }
+  #bar-fill { transition: none; }
 }
+
+:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }