bundle/v0/presentation/app.js

const allocationRange = document.querySelector("#allocation-range");
const allocationOutput = document.querySelector("#allocation-output");
const stableShare = document.querySelector("#stable-share");
const growthShare = document.querySelector("#growth-share");
const stableValue = document.querySelector("#stable-value");
const growthValue = document.querySelector("#growth-value");
const forecastGain = document.querySelector("#forecast-gain");
const shiftButtons = [...document.querySelectorAll("[data-shift]")];
const shiftAPoint = document.querySelector("#shift-a-point");
const shiftBPoint = document.querySelector("#shift-b-point");
const starterLoss = document.querySelector("#starter-loss");
const starterMessage = document.querySelector("#starter-message");
let selectedShift = null;

function updateAllocation() {
  const growth = Number(allocationRange.value);
  const stable = 100 - growth;
  allocationOutput.value = String(growth);
  allocationOutput.textContent = String(growth);
  stableShare.style.width = `${stable}%`;
  growthShare.style.width = `${growth}%`;
  stableValue.textContent = String(stable);
  growthValue.textContent = String(growth);
  const gain = stable * .03 + growth * .12;
  forecastGain.textContent = `+$${gain.toFixed(2)}`;
  if (selectedShift) showShift(selectedShift);
}

function showShift(shift) {
  selectedShift = shift;
  const growth = Number(allocationRange.value);
  const stable = 100 - growth;
  const lossA = stable * .2;
  const lossB = growth * .2;
  const loss = shift === "bond" ? lossA : lossB;
  shiftButtons.forEach((button) => button.setAttribute("aria-pressed", String(button.dataset.shift === shift)));
  const aIsLarger = lossA > lossB;
  shiftAPoint.setAttribute("class", `starter-point ${shift === "bond" ? (aIsLarger ? "danger" : "active") : ""}`);
  shiftBPoint.setAttribute("class", `starter-point ${shift === "growth" ? (!aIsLarger ? "danger" : "active") : ""}`);
  starterLoss.textContent = `A $${lossA.toFixed(2)} · B $${lossB.toFixed(2)}`;
  const asset = shift === "bond" ? "reserve bond" : "growth stock";
  starterMessage.innerHTML = `<b>Error ${shift === "bond" ? "A" : "B"} loses $${loss.toFixed(2)}.</b> The forecast moved 20 points in the ${asset}, so the loss follows the money you placed there.`;
}

allocationRange.addEventListener("input", updateAllocation);
shiftButtons.forEach((button) => button.addEventListener("click", () => showShift(button.dataset.shift)));
updateAllocation();

const predictionButtons = [...document.querySelectorAll("[data-predict]")];
const predictionReveal = document.querySelector("#prediction-reveal");

predictionButtons.forEach((button) => {
  button.addEventListener("click", () => {
    predictionButtons.forEach((item) => item.classList.toggle("selected", item === button));
    const choice = button.dataset.predict;
    const answer = choice === "learned"
      ? "That is the paper's move. Downstream loss learns a positive transport geometry."
      : "That is a reasonable baseline. The paper takes one more step and learns the geometry from downstream loss.";
    predictionReveal.classList.add("open");
    predictionReveal.innerHTML = `<b>${answer}</b><p>The full reproduction compares that learned map with fixed and hand-designed alternatives across portfolio and regression tasks.</p>`;
  });
});

const gameRounds = [
  {
    name: "correlated downside",
    point: [574, 105],
    note: "Compare the shift direction with the contour orientation and the drawn loss coast."
  },
  {
    name: "known tail event",
    point: [202, 310],
    note: "This shift probes a different quadrant; geometric reach changes with orientation."
  },
  {
    name: "rotated stress",
    point: [670, 66],
    note: "A rotated stress reveals which directions the chosen ellipse includes."
  }
];

const modeGeometry = {
  round: { axes: [1, 1], angle: 0 },
  tail: { axes: [1.12, .70], angle: 24 },
  learned: { axes: [1.32, .48], angle: -31 }
};
const gameButtons = [...document.querySelectorAll("[data-game-map]")];
const gameContours = document.querySelector("#game-contours");
const budgetRange = document.querySelector("#budget-range");
const budgetOutput = document.querySelector("#budget-output");
const stressButton = document.querySelector("#stress-test");
const resetButton = document.querySelector("#game-reset");
const shiftProbe = document.querySelector("#shift-probe");
const roundCount = document.querySelector("#round-count");
const atlasScore = document.querySelector("#atlas-score");
const protectionCost = document.querySelector("#protection-cost");
const gameMessage = document.querySelector("#game-message");

let gameMode = "round";
let gameRound = 0;
let reached = 0;
let gameLocked = false;

function currentProtectionCost() {
  const geometry = modeGeometry[gameMode];
  const scale = Number(budgetRange.value) / 58;
  return Math.PI * geometry.axes[0] * geometry.axes[1] * scale * scale;
}

function updateBudget() {
  const budget = Number(budgetRange.value);
  const scale = budget / 58;
  const ellipses = [...gameContours.querySelectorAll("ellipse")];
  const geometry = modeGeometry[gameMode];
  const base = [[210, 138], [158, 102], [102, 64]];
  ellipses.forEach((ellipse, index) => {
    ellipse.setAttribute("rx", String(Math.round(base[index][0] * scale * geometry.axes[0])));
    ellipse.setAttribute("ry", String(Math.round(base[index][1] * scale * geometry.axes[1])));
  });
  gameContours.setAttribute("transform", `rotate(${geometry.angle} 374 224)`);
  budgetOutput.value = String(budget);
  budgetOutput.textContent = String(budget);
  protectionCost.textContent = currentProtectionCost().toFixed(1);
}

function chooseGameMode(button) {
  gameMode = button.dataset.gameMap;
  gameButtons.forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
  gameContours.setAttribute("class", `game-shape-${gameMode}`);
  updateBudget();
}

gameButtons.forEach((button) => button.addEventListener("click", () => chooseGameMode(button)));
budgetRange.addEventListener("input", updateBudget);

function resetGame() {
  gameMode = "round";
  gameRound = 0;
  reached = 0;
  gameLocked = false;
  budgetRange.value = "58";
  chooseGameMode(gameButtons[0]);
  shiftProbe.setAttribute("transform", "translate(180 295)");
  shiftProbe.setAttribute("class", "probe idle");
  roundCount.textContent = "1 / 3";
  atlasScore.textContent = "0 / 3";
  stressButton.textContent = "Release shift 1";
  stressButton.disabled = false;
  stressButton.removeAttribute("aria-busy");
  gameMessage.textContent = "Pick a geometry, set a budget, and release the first shift.";
}

stressButton.addEventListener("click", () => {
  if (gameLocked) return;
  if (gameRound >= gameRounds.length) {
    resetGame();
    return;
  }

  gameLocked = true;
  const round = gameRounds[gameRound];
  stressButton.disabled = true;
  stressButton.setAttribute("aria-busy", "true");
  const geometry = modeGeometry[gameMode];
  const dx = round.point[0] - 374;
  const dy = round.point[1] - 224;
  const radians = -geometry.angle * Math.PI / 180;
  const rotatedX = dx * Math.cos(radians) - dy * Math.sin(radians);
  const rotatedY = dx * Math.sin(radians) + dy * Math.cos(radians);
  const scale = Number(budgetRange.value) / 58;
  const radius = Math.sqrt(
    (rotatedX / (210 * scale * geometry.axes[0])) ** 2 +
    (rotatedY / (138 * scale * geometry.axes[1])) ** 2
  );
  const inside = radius <= 1;

  shiftProbe.setAttribute("class", `probe ${inside ? "safe" : "hit"}`);
  shiftProbe.setAttribute("transform", `translate(${round.point[0]} ${round.point[1]})`);
  stressButton.textContent = "Reading the field";

  window.setTimeout(() => {
    reached += Number(inside);
    atlasScore.textContent = `${reached} / 3`;
    gameMessage.innerHTML = `<b>${round.name}</b><br>${inside ? "Inside" : "Outside"} the selected contour (normalized radius ${radius.toFixed(2)}). Protected area ${currentProtectionCost().toFixed(1)}. ${round.note}`;
    gameRound += 1;
    gameLocked = false;
    stressButton.disabled = false;
    stressButton.removeAttribute("aria-busy");

    if (gameRound < gameRounds.length) {
      roundCount.textContent = `${gameRound + 1} / 3`;
      stressButton.textContent = `Release shift ${gameRound + 1}`;
    } else {
      roundCount.textContent = "3 / 3";
      stressButton.textContent = "Play again";
      gameMessage.innerHTML += `<br><b>${reached} of 3 shifts were inside the map.</b> This is a geometry lesson; evidence-bound results appear below.`;
    }
  }, 720);
});

resetButton.addEventListener("click", resetGame);
updateBudget();

const trainingStages = [
  {
    title: "Start with a positive metric",
    copy: "The first map treats every direction equally. The inner problem receives this geometry.",
    next: "Solve the inner problem",
    ellipse: [88, 88, 0],
    needle: -8,
    loss: ["high", 65, 143, "#d95542"]
  },
  {
    title: "Solve the robust decision",
    copy: "The inner optimizer chooses a decision against every distribution inside the current map.",
    next: "Measure validation loss",
    ellipse: [88, 88, 0],
    needle: 22,
    loss: ["high", 65, 143, "#d95542"]
  },
  {
    title: "Measure what the decision costs",
    copy: "Validation loss reveals which shifts hurt the chosen decision. This is the signal the outer problem needs.",
    next: "Apply the hypergradient",
    ellipse: [88, 88, 0],
    needle: 22,
    loss: ["high", 65, 143, "#d95542"]
  },
  {
    title: "Bend distance toward loss",
    copy: "The hypergradient updates the metric. Expensive directions stretch; harmless directions contract.",
    next: "Run the next training step",
    ellipse: [112, 52, -31],
    needle: -20,
    loss: ["lower", 108, 100, "#62c7bb"]
  }
];

const trainingSvg = document.querySelector("#training-svg");
const trainingEllipse = document.querySelector("#training-ellipse");
const metricAxis = document.querySelector("#metric-axis");
const decisionNeedle = document.querySelector("#decision-needle");
const lossFill = document.querySelector("#loss-fill");
const lossValue = document.querySelector("#loss-value");
const stageNumber = document.querySelector("#stage-number");
const stageTitle = document.querySelector("#stage-title");
const stageCopy = document.querySelector("#stage-copy");
const loopButtons = [...document.querySelectorAll("[data-loop]")];
const loopNext = document.querySelector("#loop-next");
const loopReset = document.querySelector("#loop-reset");
let activeStage = 0;

function showTrainingStage(index) {
  activeStage = index;
  const stage = trainingStages[index];
  trainingSvg.dataset.stage = String(index);
  trainingEllipse.setAttribute("rx", String(stage.ellipse[0]));
  trainingEllipse.setAttribute("ry", String(stage.ellipse[1]));
  trainingEllipse.style.transform = `rotate(${stage.ellipse[2]}deg)`;
  metricAxis.style.transform = `rotate(${stage.ellipse[2]}deg)`;
  decisionNeedle.style.transform = `rotate(${stage.needle}deg)`;
  lossValue.textContent = stage.loss[0];
  lossFill.setAttribute("y", String(stage.loss[1]));
  lossFill.setAttribute("height", String(stage.loss[2]));
  lossFill.setAttribute("fill", stage.loss[3]);
  lossFill.style.fill = stage.loss[3];
  stageNumber.textContent = `${index + 1} / 4`;
  stageTitle.textContent = stage.title;
  stageCopy.textContent = stage.copy;
  loopNext.textContent = stage.next;
  loopButtons.forEach((button, buttonIndex) => {
    button.classList.toggle("active", buttonIndex === index);
    button.setAttribute("aria-pressed", String(buttonIndex === index));
  });
}

loopButtons.forEach((button, index) => button.addEventListener("click", () => showTrainingStage(index)));
loopNext.addEventListener("click", () => showTrainingStage((activeStage + 1) % trainingStages.length));
loopReset.addEventListener("click", () => showTrainingStage(0));
showTrainingStage(0);

const atlasEvidence = window.__DECISION_ATLAS_EVIDENCE__;
const chartState = { kind: "coverage", index: 0, payload: null };

function evidenceText(element, value) { element.textContent = String(value); }
function formatEvidenceNumber(value) {
  return typeof value === "number" ? new Intl.NumberFormat("en-US", { maximumSignificantDigits: 4 }).format(value) : String(value);
}
function svgElement(name, attributes = {}) {
  const element = document.createElementNS("http://www.w3.org/2000/svg", name);
  Object.entries(attributes).forEach(([key, value]) => element.setAttribute(key, String(value)));
  return element;
}

function renderClaimPages(payload) {
  Object.entries(payload.claims).forEach(([claimId, claim]) => {
    const target = document.querySelector(`[data-claim-id="${claimId}"]`);
    target.dataset.verdict = claim.verdict;
    evidenceText(target.querySelector(".claim-verdict"), claim.verdict.replaceAll("_", " "));
    evidenceText(target.querySelector("h3"), claim.title);
    evidenceText(target.querySelector(".claim-answer"), claim.answer);
    evidenceText(target.querySelector(".official-claim"), claim.official_text);
    evidenceText(target.querySelector(".claim-downgrade"), `Why this can be downgraded: ${claim.downgrade}`);
    const facts = target.querySelector(".claim-facts");
    claim.facts.forEach(([label, value]) => {
      const dt = document.createElement("dt");
      const dd = document.createElement("dd");
      evidenceText(dt, label);
      evidenceText(dd, formatEvidenceNumber(value));
      facts.append(dt, dd);
    });
  });
}

function renderEvidenceChart() {
  const series = chartState.payload.charts[chartState.kind];
  chartState.index = Math.min(chartState.index, series.length - 1);
  const selected = series[chartState.index];
  const target = chartState.kind === "coverage" ? .9 : 0;
  const yMin = chartState.kind === "coverage" ? .68 : 0;
  const yMax = chartState.kind === "coverage" ? .92 : .15;
  const width = 760, height = 420;
  const margin = { left: 78, right: 28, top: 38, bottom: 58 };
  const xScale = (value) => margin.left + ((value - series[0].sample_size) / (series.at(-1).sample_size - series[0].sample_size)) * (width - margin.left - margin.right);
  const yScale = (value) => height - margin.bottom - ((value - yMin) / (yMax - yMin)) * (height - margin.top - margin.bottom);
  const svg = document.querySelector("#evidence-chart");
  [...svg.children].filter((node) => !["title", "desc"].includes(node.tagName.toLowerCase())).forEach((node) => node.remove());
  for (let tick = 0; tick < 5; tick += 1) {
    const value = yMin + (tick / 4) * (yMax - yMin);
    const y = yScale(value);
    svg.append(svgElement("line", { x1: margin.left, y1: y, x2: width - margin.right, y2: y, class: "chart-grid" }));
    const label = svgElement("text", { x: margin.left - 12, y: y + 4, "text-anchor": "end", class: "chart-tick" });
    evidenceText(label, chartState.kind === "coverage" ? `${Math.round(value * 100)}%` : `${(value * 100).toFixed(1)}%`);
    svg.append(label);
  }
  const targetY = yScale(target);
  svg.append(svgElement("line", { x1: margin.left, y1: targetY, x2: width - margin.right, y2: targetY, class: "target-line" }));
  const targetLabel = svgElement("text", { x: width - margin.right, y: targetY - 9, "text-anchor": "end", class: "target-label" });
  evidenceText(targetLabel, chartState.kind === "coverage" ? "90% coverage target" : "zero improvement");
  svg.append(targetLabel);
  const band = series.map((point) => `${xScale(point.sample_size)},${yScale(point.upper)}`)
    .concat([...series].reverse().map((point) => `${xScale(point.sample_size)},${yScale(point.lower)}`));
  svg.append(svgElement("polygon", { points: band.join(" "), class: "sealed-band" }));
  const path = series.map((point, index) => `${index ? "L" : "M"}${xScale(point.sample_size)} ${yScale(point.mean)}`).join(" ");
  svg.append(svgElement("path", { d: path, class: "sealed-line" }));
  series.forEach((point, index) => {
    const group = svgElement("g", { class: index === chartState.index ? "chart-point selected" : "chart-point" });
    group.append(svgElement("line", { x1: xScale(point.sample_size), y1: yScale(point.lower), x2: xScale(point.sample_size), y2: yScale(point.upper) }));
    group.append(svgElement("circle", { cx: xScale(point.sample_size), cy: yScale(point.mean), r: index === chartState.index ? 9 : 5 }));
    const label = svgElement("text", { x: xScale(point.sample_size), y: height - 26, "text-anchor": "middle", class: "chart-tick" });
    evidenceText(label, point.sample_size);
    group.append(label);
    svg.append(group);
  });
  const slider = document.querySelector("#evidence-step");
  slider.max = String(series.length - 1);
  slider.value = String(chartState.index);
  evidenceText(document.querySelector("#evidence-step-output"), chartState.index + 1);
  const mean = chartState.kind === "coverage" ? `${(selected.mean * 100).toFixed(1)}%` : `${(selected.mean * 100).toFixed(2)}%`;
  const interval = chartState.kind === "coverage"
    ? `${(selected.lower * 100).toFixed(1)}% to ${(selected.upper * 100).toFixed(1)}%`
    : `${(selected.lower * 100).toFixed(2)}% to ${(selected.upper * 100).toFixed(2)}%`;
  const status = chartState.kind === "coverage"
    ? (selected.upper < target ? "Even the upper confidence bound stays below target." : "The interval reaches the target.")
    : (selected.lower > target ? "The interval stays above zero." : "The interval crosses zero.");
  document.querySelector("#evidence-readout").innerHTML = `<span>n = ${selected.sample_size}</span><strong>${mean}</strong><p>95% interval ${interval}. ${status}</p>`;
}

function renderVerifiedEvidence(payload) {
  chartState.payload = payload;
  const matrix = payload.matrix;
  evidenceText(document.querySelector("#matrix-rows"), formatEvidenceNumber(matrix.validated_rows));
  evidenceText(document.querySelector("#matrix-recovered"), matrix.recovered_rows);
  evidenceText(document.querySelector("#matrix-rejected"), matrix.rejected_rows);
  const matrixState = document.querySelector("#matrix-state");
  matrixState.dataset.state = "verified";
  evidenceText(matrixState.querySelector("strong"), "14,000 validated identities, zero rejected rows");
  evidenceText(matrixState.querySelector("p"), `Aggregate ${payload.seal.aggregate_identity.slice(0, 23)}…; five recovered rows are attested and substituted exactly once.`);
  renderClaimPages(payload);
  const censoring = document.querySelector("#censoring-result");
  censoring.dataset.state = "verified";
  evidenceText(censoring.querySelector("strong"), `${formatEvidenceNumber(matrix.censored_at_5000)} tasks reached the 5,000-iteration cap`);
  evidenceText(censoring.querySelector("p"), "Their terminal values remain in the intent-to-evaluate estimand, but they are labeled right-censored and cannot be used as convergence evidence.");
  const provenance = document.querySelector("#provenance-results");
  const title = document.createElement("h3");
  evidenceText(title, "The displayed values are sealed to one reconciled aggregate");
  const list = document.createElement("dl");
  [["Analysis payload", payload.seal.analysis_payload_sha256], ["Results bytes", payload.seal.aggregate_results_sha256],
   ["Recovery attestation", payload.seal.recovery_attestation_hash], ["Official claims lock", payload.seal.official_claims_lock_sha256],
   ["Theorem audit", payload.seal.theorem_audit_sha256], ["Hypergradient receipt", payload.seal.hypergradient_receipt_sha256]]
    .forEach(([label, value]) => {
      const dt = document.createElement("dt"), dd = document.createElement("dd");
      evidenceText(dt, label); evidenceText(dd, value); list.append(dt, dd);
    });
  provenance.replaceChildren(title, list);
  [matrixState, document.querySelector("#claim-results"), document.querySelector("#figure-results"), censoring, provenance]
    .forEach((element) => { element.hidden = false; });
  document.querySelector("#evidence-gate").remove();
  renderEvidenceChart();
}

document.querySelectorAll("[data-chart]").forEach((button) => button.addEventListener("click", () => {
  chartState.kind = button.dataset.chart;
  chartState.index = 0;
  document.querySelectorAll("[data-chart]").forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
  renderEvidenceChart();
}));
document.querySelector("#evidence-step").addEventListener("input", (event) => {
  chartState.index = Number(event.target.value);
  renderEvidenceChart();
});
if (atlasEvidence && atlasEvidence.schema_version === 4 && atlasEvidence.matrix && atlasEvidence.claims) {
  renderVerifiedEvidence(atlasEvidence);
}