diff --git a/simulator/static/app.js b/simulator/static/app.js
new file mode 100644
index 0000000..12a77f2
--- /dev/null
+++ b/simulator/static/app.js
@@ -0,0 +1,111 @@
+const DIALS = ["left", "right", "dark", "light"];
+const MODEL = ["brain_weight", "mood_weight", "pool_size"];
+
+function buildGrid(el) {
+ el.innerHTML = "";
+ // rows = first axis 0..4 top->bottom, cols = second axis 0..4 left->right
+ for (let a = 0; a < 5; a++) {
+ for (let b = 0; b < 5; b++) {
+ const cell = document.createElement("div");
+ cell.className = "cell";
+ cell.dataset.a = a;
+ cell.dataset.b = b;
+ el.appendChild(cell);
+ }
+ }
+}
+
+function paintGrid(el, axisA, axisB, point, pool) {
+ // clear
+ el.querySelectorAll(".cell").forEach((c) => {
+ c.className = "cell";
+ c.innerHTML = "";
+ });
+ const counts = {};
+ pool.forEach((c) => {
+ const r = c.record;
+ const key = `${r[axisA]},${r[axisB]}`;
+ counts[key] = (counts[key] || 0) + 1;
+ });
+ el.querySelectorAll(".cell").forEach((c) => {
+ const a = +c.dataset.a, b = +c.dataset.b;
+ const key = `${a},${b}`;
+ if (counts[key]) {
+ c.classList.add("cand");
+ const n = document.createElement("span");
+ n.className = "n";
+ n.textContent = counts[key];
+ c.appendChild(n);
+ }
+ if (a === point[axisA] && b === point[axisB]) c.classList.add("point");
+ });
+}
+
+function readState() {
+ const s = { mode: document.getElementById("mode").value, approved_only: document.getElementById("approved_only").checked };
+ DIALS.forEach((d) => (s[d] = +document.getElementById(d).value));
+ s.brain_weight = +document.getElementById("brain_weight").value;
+ s.mood_weight = +document.getElementById("mood_weight").value;
+ s.pool_size = +document.getElementById("pool_size").value;
+ return s;
+}
+
+function syncOutputs() {
+ [...DIALS, ...MODEL].forEach((id) => {
+ const out = document.getElementById(`${id}-out`);
+ if (out) out.textContent = document.getElementById(id).value;
+ });
+}
+
+async function refresh() {
+ syncOutputs();
+ const state = readState();
+ const resp = await fetch("/api/select", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify(state),
+ });
+ const data = await resp.json();
+
+ const pickEl = document.getElementById("pick");
+ if (!data.pick) {
+ pickEl.innerHTML = '∅ Void / rest — walls dark, audio silent.
';
+ } else {
+ const p = data.pick;
+ pickEl.innerHTML =
+ `${p.title}
` +
+ `mode ${p.mode} · coord (${p.left},${p.right},${p.dark},${p.light})
` +
+ `${p.rationale || ""}
`;
+ }
+
+ const poolEl = document.getElementById("pool");
+ poolEl.innerHTML = "";
+ data.pool.forEach((c, i) => {
+ const li = document.createElement("li");
+ if (i === 0) li.className = "winner";
+ li.innerHTML = `${c.record.title} d=${c.distance.toFixed(2)}`;
+ poolEl.appendChild(li);
+ });
+
+ const point = { left: state.left, right: state.right, dark: state.dark, light: state.light };
+ paintGrid(document.getElementById("brain-grid"), "left", "right", point, data.pool);
+ paintGrid(document.getElementById("mood-grid"), "dark", "light", point, data.pool);
+}
+
+async function loadMeta() {
+ const data = await (await fetch("/api/catalog/meta")).json();
+ const byMode = Object.entries(data.by_mode).map(([k, v]) => `${k}:${v}`).join(" ");
+ document.getElementById("meta").textContent = `${data.total} records · ${byMode}`;
+}
+
+function init() {
+ buildGrid(document.getElementById("brain-grid"));
+ buildGrid(document.getElementById("mood-grid"));
+ document.querySelectorAll("input, select").forEach((el) =>
+ el.addEventListener("input", refresh)
+ );
+ loadMeta();
+ refresh();
+}
+
+document.addEventListener("DOMContentLoaded", init);
diff --git a/simulator/static/index.html b/simulator/static/index.html
new file mode 100644
index 0000000..0a89203
--- /dev/null
+++ b/simulator/static/index.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+ HEF — Curator's X-ray
+
+
+
+
+ Experience Filter — Curator's X-ray
+
+
+
+
+
+
+
+
+
+
Pool (nearest first)
+
+