server/static/app.js

const taskSelect = document.getElementById("task-select");
const taskSummary = document.getElementById("task-summary");
const currentScore = document.getElementById("current-score");
const currentSteps = document.getElementById("current-steps");
const currentStatus = document.getElementById("current-status");
const allScore = document.getElementById("all-score");
const allResults = document.getElementById("all-results");
const episodeLog = document.getElementById("episode-log");
const rewardChart = document.getElementById("reward-chart");
const finalSummary = document.getElementById("final-summary");

let taskCatalog = [];

function renderTaskSummary(task) {
  taskSummary.innerHTML = `
    <h3>${task.name}</h3>
    <p><strong>Difficulty:</strong> ${task.difficulty}</p>
    <p>${task.objective}</p>
    <p><strong>Max steps:</strong> ${task.max_steps}</p>
  `;
}

function buildLineChart(logs) {
  if (!logs.length) {
    rewardChart.innerHTML = "No rewards available.";
    return;
  }

  const width = 380;
  const height = 220;
  const padding = 28;
  const values = logs.map((entry) => entry.reward);
  const maxReward = Math.max(...values, 1);
  const minReward = Math.min(...values, 0);
  const range = Math.max(maxReward - minReward, 0.25);

  const toX = (index) => {
    if (logs.length === 1) {
      return width / 2;
    }
    return padding + (index * (width - padding * 2)) / (logs.length - 1);
  };

  const toY = (value) => {
    return height - padding - ((value - minReward) / range) * (height - padding * 2);
  };

  const linePoints = logs
    .map((entry, index) => `${toX(index)},${toY(entry.reward)}`)
    .join(" ");

  const horizontalGuides = [0, 0.25, 0.5, 0.75, 1]
    .map((ratio) => {
      const y = padding + ratio * (height - padding * 2);
      return `<line class="chart-grid" x1="${padding}" y1="${y}" x2="${width - padding}" y2="${y}"></line>`;
    })
    .join("");

  const labels = logs
    .map((entry, index) => {
      const x = toX(index);
      return `<text class="chart-label" x="${x}" y="${height - 8}" text-anchor="middle">S${entry.step}</text>`;
    })
    .join("");

  const points = logs
    .map((entry, index) => {
      const x = toX(index);
      const y = toY(entry.reward);
      return `
        <circle class="chart-point" cx="${x}" cy="${y}" r="5"></circle>
        <text class="chart-label" x="${x}" y="${y - 10}" text-anchor="middle">${entry.reward.toFixed(2)}</text>
      `;
    })
    .join("");

  rewardChart.innerHTML = `
    <svg viewBox="0 0 ${width} ${height}" aria-label="Reward line chart">
      ${horizontalGuides}
      <line class="chart-axis" x1="${padding}" y1="${height - padding}" x2="${width - padding}" y2="${height - padding}"></line>
      <line class="chart-axis" x1="${padding}" y1="${padding}" x2="${padding}" y2="${height - padding}"></line>
      <polyline class="chart-line" points="${linePoints}"></polyline>
      ${points}
      ${labels}
    </svg>
  `;
}

function renderEpisode(data) {
  currentScore.textContent = data.score.toFixed(4);
  currentSteps.textContent = String(data.steps_taken);
  currentStatus.textContent = data.success ? "Contained" : "Needs work";

  buildLineChart(data.logs);

  finalSummary.innerHTML = `
    <div class="summary-grid">
      <div class="summary-pill">
        <span>Final score</span>
        <strong>${data.score.toFixed(4)}</strong>
      </div>
      <div class="summary-pill">
        <span>Status</span>
        <strong>${data.success ? "Success" : "Needs improvement"}</strong>
      </div>
      <div class="summary-pill">
        <span>Steps used</span>
        <strong>${data.steps_taken}</strong>
      </div>
      <div class="summary-pill">
        <span>Quarantine quality</span>
        <strong>${(data.final_info.quarantine_score ?? 0).toFixed(4)}</strong>
      </div>
    </div>
    <div class="summary-card">
      <strong>Containment outcome</strong>
      <div>All affected nodes notified: ${data.final_info.all_affected_nodes_notified ? "Yes" : "No"}</div>
      <div>All affected stock quarantined: ${data.final_info.all_affected_stock_quarantined ? "Yes" : "No"}</div>
    </div>
    <div class="summary-card">
      <strong>Grader focus</strong>
      <div>Notification score: ${(data.final_info.notification_score ?? 0).toFixed(4)}</div>
      <div>Investigation score: ${(data.final_info.investigation_score ?? 0).toFixed(4)}</div>
      <div>Efficiency score: ${(data.final_info.efficiency_score ?? 0).toFixed(4)}</div>
    </div>
  `;

  const logMarkup = data.logs.map((entry) => {
    const actionType = entry.action.type || "action";
    const detailBits = [];
    if (entry.action.node_id) detailBits.push(`Node: ${entry.action.node_id}`);
    if (entry.action.lot_id) detailBits.push(`Lot: ${entry.action.lot_id}`);
    if (entry.action.quantity) detailBits.push(`Qty: ${entry.action.quantity}`);

    return `
      <div class="log-step">
        <div class="log-title">
          <strong>Step ${entry.step}</strong>
          <span class="action-chip">${actionType.replace("_", " ")}</span>
        </div>
        <div class="action-meta">
          <div>${detailBits.length ? detailBits.join(" | ") : "No extra parameters"}</div>
          <div>Reward: ${entry.reward.toFixed(4)}</div>
          <div>Message: ${entry.message || "-"}</div>
        </div>
      </div>
    `;
  }).join("");

  episodeLog.innerHTML = `
    <div class="log-step">
      <strong>Task:</strong> ${data.task.name}
    </div>
    ${logMarkup}
  `;
}

function renderRunAll(data) {
  allScore.textContent = data.average_score.toFixed(4);
  allResults.innerHTML = data.episodes.map((episode) => `
    <div class="log-step">
      <strong>${episode.task.name}</strong>
      <div>Difficulty: ${episode.task.difficulty}</div>
      <div>Score: ${episode.score.toFixed(4)}</div>
      <div>Steps: ${episode.steps_taken}</div>
      <div>Status: ${episode.success ? "Success" : "Needs work"}</div>
    </div>
  `).join("");
}

async function fetchTasks() {
  const response = await fetch("/api/tasks");
  const data = await response.json();
  taskCatalog = data.tasks;

  taskSelect.innerHTML = taskCatalog.map((task) => `
    <option value="${task.task_id}">${task.difficulty.toUpperCase()} - ${task.name}</option>
  `).join("");

  renderTaskSummary(taskCatalog[0]);
}

async function resetTask() {
  const taskId = taskSelect.value;
  const response = await fetch(`/reset?task_id=${encodeURIComponent(taskId)}`);
  const data = await response.json();
  currentScore.textContent = "-";
  currentSteps.textContent = String(data.steps_taken || 0);
  currentStatus.textContent = "Reset";
  rewardChart.innerHTML = "Task reset. Run a task to render the reward trajectory.";
  finalSummary.innerHTML = "Readable scoring highlights will appear here.";
  episodeLog.textContent = JSON.stringify(data, null, 2);
}

async function runEpisode() {
  const response = await fetch("/api/run_episode", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ task_id: taskSelect.value }),
  });
  const data = await response.json();
  renderEpisode(data);
}

async function runAllTasks() {
  const response = await fetch("/api/run_all");
  const data = await response.json();
  renderRunAll(data);
}

taskSelect.addEventListener("change", () => {
  const task = taskCatalog.find((item) => item.task_id === taskSelect.value);
  if (task) {
    renderTaskSummary(task);
  }
});

document.getElementById("reset-button").addEventListener("click", resetTask);
document.getElementById("run-button").addEventListener("click", runEpisode);
document.getElementById("run-all-button").addEventListener("click", runAllTasks);

fetchTasks();