app.js

"use strict";

const state = { data: null, cases: [], filtered: [], current: null };
const byId = (id) => document.getElementById(id);

function setText(id, value) {
  byId(id).textContent = value == null ? "" : String(value);
}

function clear(node) {
  while (node.firstChild) node.removeChild(node.firstChild);
}

function addOption(select, label, value) {
  const option = document.createElement("option");
  option.value = value;
  option.textContent = label;
  select.appendChild(option);
}

function displayCategory(value) {
  return String(value).replaceAll("_", " ");
}

function shortUid(uid) {
  return `${uid.slice(0, 12)}...${uid.slice(-8)}`;
}

function caseLabel(item) {
  const strata = item.review_strata;
  return `${item.split_label} | ${displayCategory(item.category)} | ${strata.rating} stars | ${strata.length_band} | ${shortUid(item.uid)}`;
}

function populateSelect(id, values, includeAll = true) {
  const select = byId(id);
  clear(select);
  if (includeAll) addOption(select, "All", "All");
  values.forEach((value) => addOption(select, displayCategory(value), value));
}

function populateFilters() {
  const unique = (values) => [...new Set(values)].sort();
  populateSelect("split-filter", unique(state.cases.map((item) => item.split_label)));
  populateSelect("category-filter", unique(state.cases.map((item) => item.category)));
  populateSelect("rating-filter", unique(state.cases.map((item) => String(item.review_strata.rating))));
  populateSelect("length-filter", ["Short", "Medium", "Long"]);
}

function selectedValue(id) {
  return byId(id).value;
}

function applyFilters(preferredCaseId = null) {
  const split = selectedValue("split-filter");
  const category = selectedValue("category-filter");
  const rating = selectedValue("rating-filter");
  const length = selectedValue("length-filter");
  state.filtered = state.cases.filter((item) =>
    (split === "All" || item.split_label === split) &&
    (category === "All" || item.category === category) &&
    (rating === "All" || String(item.review_strata.rating) === rating) &&
    (length === "All" || item.review_strata.length_band === length)
  );
  const select = byId("case-select");
  clear(select);
  state.filtered.forEach((item) => addOption(select, caseLabel(item), item.case_id));
  const chosen = state.filtered.find((item) => item.case_id === preferredCaseId) || state.filtered[0];
  byId("empty-state").hidden = Boolean(chosen);
  document.querySelectorAll(".panel, .tabs, .case-band").forEach((node) => {
    node.style.display = chosen ? "" : "none";
  });
  if (chosen) {
    select.value = chosen.case_id;
    renderCase(chosen);
  }
}

function addDefinition(list, label, value) {
  const wrapper = document.createElement("div");
  const term = document.createElement("dt");
  const detail = document.createElement("dd");
  term.textContent = label;
  detail.textContent = value == null || value === "" ? "-" : String(value);
  wrapper.append(term, detail);
  list.appendChild(wrapper);
}

function renderMetrics(item) {
  const metrics = byId("case-metrics");
  clear(metrics);
  addDefinition(metrics, "User", shortUid(item.uid));
  addDefinition(metrics, "Source", item.split_label);
  addDefinition(metrics, "Category", displayCategory(item.category));
  addDefinition(metrics, "Target", `${item.review_strata.rating} / 5, ${item.review_strata.length_band}`);
  addDefinition(metrics, "Pool", `${item.candidate_pool.valid_candidates} valid / ${item.candidate_pool.error_candidates} errors`);
}

function renderDetails(id, details) {
  const list = byId(id);
  clear(list);
  Object.entries(details).forEach(([key, value]) => {
    const term = document.createElement("dt");
    const detail = document.createElement("dd");
    term.textContent = key;
    detail.textContent = value;
    list.append(term, detail);
  });
}

function renderTarget(item) {
  const target = item.target;
  const product = target.product;
  setText("target-title", product.title);
  setText("target-rating", `${target.rating} / 5 | ${target.date || "unknown date"}`);
  setText("target-review", target.text);
  setText("target-description", product.description_excerpt || "No description available.");
  const features = byId("target-features");
  clear(features);
  (product.features.length ? product.features : ["No features available."]).forEach((feature) => {
    const row = document.createElement("li");
    row.textContent = feature;
    features.appendChild(row);
  });
  renderDetails("target-details", product.details);
}

function appendCell(row, value, className = "") {
  const cell = document.createElement("td");
  cell.textContent = value == null ? "-" : String(value);
  if (className) cell.className = className;
  row.appendChild(cell);
}

function renderHistory(item) {
  const body = byId("history-body");
  clear(body);
  const demos = item.history.sampled_demonstrations;
  setText("history-count", `${demos.length} shown / ${item.history.total_demonstrations} total`);
  demos.forEach((demo) => {
    const row = document.createElement("tr");
    appendCell(row, demo.date);
    appendCell(row, demo.rating);
    appendCell(row, demo.length_band);
    appendCell(row, demo.product.title);
    appendCell(row, demo.text);
    body.appendChild(row);
  });
}

function modelName(model) {
  return String(model || "unknown").split("/").pop();
}

function candidateLabel(candidate, index) {
  return `${index + 1}. ${candidate.family} | ${modelName(candidate.model)} | ${candidate.judge_score.toFixed(2)} | ${candidate.sample_role}`;
}

function renderCandidates(item) {
  const candidates = item.candidate_pool.sampled_candidates;
  const select = byId("candidate-select");
  const body = byId("candidate-body");
  clear(select);
  clear(body);
  candidates.forEach((candidate, index) => {
    addOption(select, candidateLabel(candidate, index), String(index));
    const row = document.createElement("tr");
    appendCell(row, candidate.family);
    appendCell(row, candidate.sample_role);
    appendCell(row, modelName(candidate.model));
    appendCell(row, candidate.gen_label);
    appendCell(row, candidate.judge_score.toFixed(2), `score-${candidate.score_band.toLowerCase()}`);
    appendCell(row, candidate.eligible_views.join(", "));
    appendCell(row, candidate.response.slice(0, 220));
    body.appendChild(row);
  });
  renderCandidate(candidates[0]);
}

function renderCandidate(candidate) {
  if (!candidate) return;
  setText("candidate-recipe", `${modelName(candidate.model)} | ${candidate.gen_label}`);
  setText("candidate-family", `${candidate.family} candidate`);
  const score = byId("candidate-score");
  score.textContent = candidate.judge_score.toFixed(2);
  score.className = `score ${candidate.score_band.toLowerCase()}`;
  setText("candidate-response", candidate.response);
  renderDetails("candidate-metadata", {
    Selection: candidate.sample_role,
    "ICL examples": candidate.n_icl,
    Privilege: candidate.privileged || "none",
    "Refine round": candidate.refine_round,
    Views: candidate.eligible_views.join(", "),
  });
  setText("judge-key-points", candidate.judge_key_points || "Not available.");
  setText("judge-thought", candidate.judge_thought || "Not available.");
}

function scoreValue(value) {
  return value == null ? "-" : Number(value).toFixed(3);
}

function renderPool(item) {
  const pool = item.candidate_pool;
  const body = byId("pool-body");
  clear(body);
  Object.entries(pool.family_stats).forEach(([family, stats]) => {
    const row = document.createElement("tr");
    appendCell(row, family);
    appendCell(row, stats.expected);
    appendCell(row, stats.valid);
    appendCell(row, stats.error, stats.error ? "status-error" : "status-ok");
    appendCell(row, scoreValue(stats.score_min));
    appendCell(row, scoreValue(stats.score_median));
    appendCell(row, scoreValue(stats.score_mean));
    appendCell(row, scoreValue(stats.score_max));
    body.appendChild(row);
  });
  const status = pool.error_candidates
    ? `${pool.error_candidates} unavailable slots are retained in coverage counts`
    : "All candidate slots are valid";
  setText("pool-status", status);
  byId("pool-status").className = `section-stat ${pool.error_candidates ? "status-error" : "status-ok"}`;
}

function renderCase(item) {
  state.current = item;
  renderMetrics(item);
  renderTarget(item);
  renderHistory(item);
  renderCandidates(item);
  renderPool(item);
  history.replaceState(null, "", `#${encodeURIComponent(item.case_id)}`);
}

function activateTab(name) {
  document.querySelectorAll(".tab").forEach((tab) => {
    const active = tab.dataset.tab === name;
    tab.classList.toggle("active", active);
    tab.setAttribute("aria-selected", String(active));
  });
  document.querySelectorAll(".panel").forEach((panel) => {
    const active = panel.id === `${name}-panel`;
    panel.classList.toggle("active", active);
    panel.hidden = !active;
  });
}

function bindEvents() {
  ["split-filter", "category-filter", "rating-filter", "length-filter"].forEach((id) => {
    byId(id).addEventListener("change", () =>
      applyFilters(state.current ? state.current.case_id : null)
    );
  });
  byId("reset-filters").addEventListener("click", () => {
    ["split-filter", "category-filter", "rating-filter", "length-filter"].forEach((id) => {
      byId(id).value = "All";
    });
    applyFilters();
  });
  byId("case-select").addEventListener("change", (event) => {
    const item = state.cases.find((entry) => entry.case_id === event.target.value);
    if (item) renderCase(item);
  });
  byId("candidate-select").addEventListener("change", (event) => {
    const candidates = state.current ? state.current.candidate_pool.sampled_candidates : [];
    renderCandidate(candidates[Number(event.target.value)]);
  });
  document.querySelectorAll(".tab").forEach((tab) => {
    tab.addEventListener("click", () => activateTab(tab.dataset.tab));
  });
}

async function start() {
  try {
    const response = await fetch("examples.json", { cache: "no-store" });
    if (!response.ok) throw new Error(`Snapshot request failed: ${response.status}`);
    state.data = await response.json();
    state.cases = state.data.cases;
    setText("notice", state.data.notice);
    const generated = new Date(state.data.generated_at).toLocaleString();
    setText(
      "snapshot-meta",
      `${state.data.selection.selected_cases} users | ${generated} | active checkpoint`
    );
    populateFilters();
    bindEvents();
    const requested = decodeURIComponent(location.hash.slice(1));
    applyFilters(requested || null);
  } catch (error) {
    setText("notice", `Unable to load the review snapshot: ${error.message}`);
    byId("notice").classList.add("status-error");
  }
}

start();