const navRoot = document.getElementById("nav-root");
const appRoot = document.getElementById("app");
const toastTemplate = document.getElementById("toast-template");

const API = {
  scenarios: "/api/v1/scenarios",
  scenario: (key) => `/api/v1/scenarios/${encodeURIComponent(key)}`,
  reset: "/api/v1/env/reset",
  step: (envId) => `/api/v1/env/${encodeURIComponent(envId)}/step`,
  destroy: (envId) => `/api/v1/env/${encodeURIComponent(envId)}`,
};

const state = {
  path: normalizePath(window.location.pathname),
  scenarios: {},
  order: [],
  builderScenario: null,
  playground: {
    envId: null,
    scenarioKey: null,
    score: 0,
    step: 0,
    maxSteps: 50,
    taskName: "",
    description: "",
    cwd: "~",
    done: false,
  },
};

const AUTO_PLAYBOOK = {
  llm: {
    log_analysis: ["grep 500 /var/log/app.log"],
    permission_repair: ["chmod 0755 /home/user/scripts/cleanup.sh"],
    process_recovery: ["ps", "systemctl restart postgres", "systemctl status postgres"],
    cascading_db_failure: ["ps", "systemctl restart postgres", "df -h", "rm /var/log/nginx/error.log", "systemctl restart app"],
    full_incident: ["ps", "df -h", "systemctl restart postgres", "rm /var/log/nginx/error.log", "grep auth /var/log/auth.log"],
  },
  rl: {
    log_analysis: ["cat /var/log/app.log", "grep 500 /var/log/app.log"],
    process_recovery: ["systemctl restart postgres", "systemctl status postgres"],
    cascading_db_failure: ["systemctl restart postgres", "rm /var/log/nginx/error.log", "systemctl restart app"],
  },
};

function normalizePath(pathname) {
  const normalized = pathname.replace(/\/+$/, "");
  return normalized.length ? normalized : "/";
}

function routeKey(path) {
  if (path === "/builder") return "builder";
  if (path === "/playground") return "playground";
  if (path === "/arena") return "arena";
  return "hub";
}

function escapeHtml(value) {
  return String(value)
    .replaceAll("&", "&")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll('"', "&quot;")
    .replaceAll("'", "&#39;");
}

function splitLines(text) {
  return String(text || "")
    .split(/\r?\n/)
    .map((line) => line.trim())
    .filter(Boolean);
}

function getQueryScenario() {
  const params = new URLSearchParams(window.location.search);
  return params.get("scenario") || "";
}

function showToast(message) {
  if (!toastTemplate) return;
  const toast = toastTemplate.content.firstElementChild.cloneNode(true);
  toast.textContent = message;
  document.body.appendChild(toast);
  window.setTimeout(() => toast.remove(), 2200);
}

async function fetchJSON(url, options = {}) {
  const config = { ...options };
  config.headers = {
    ...(options.headers || {}),
  };
  if (config.body && !config.headers["Content-Type"]) {
    config.headers["Content-Type"] = "application/json";
  }

  const response = await fetch(url, config);
  if (!response.ok) {
    let details = `${response.status} ${response.statusText}`;
    try {
      const payload = await response.json();
      if (payload?.detail) {
        details = payload.detail;
      }
    } catch {
      // Fallback to status text.
    }
    throw new Error(details);
  }

  return response.json();
}

function difficultyMeta(diff) {
  const value = (diff || "").toLowerCase();
  if (value === "easy") {
    return {
      label: "SAFE",
      textClass: "text-chaos-green",
      bgClass: "bg-chaos-green/10",
      borderClass: "border-chaos-green/20",
      specsClass: "text-chaos-green",
      iconColorClass: "text-chaos-green",
    };
  }
  if (value === "medium") {
    return {
      label: "MEDIUM",
      textClass: "text-chaos-cyan",
      bgClass: "bg-chaos-cyan/10",
      borderClass: "border-chaos-cyan/20",
      specsClass: "text-chaos-cyan",
      iconColorClass: "text-chaos-cyan",
    };
  }
  if (value === "hard") {
    return {
      label: "CRITICAL",
      textClass: "text-chaos-red",
      bgClass: "bg-chaos-red/10",
      borderClass: "border-chaos-red/20",
      specsClass: "text-chaos-red",
      iconColorClass: "text-chaos-red",
    };
  }
  return {
    label: "EXPERT",
    textClass: "text-chaos-red",
    bgClass: "bg-chaos-red/10",
    borderClass: "border-chaos-red/50",
    specsClass: "text-chaos-red",
    iconColorClass: "text-chaos-red",
  };
}

function scenarioEntries() {
  return state.order.map((key) => [key, state.scenarios[key]]).filter(([, value]) => Boolean(value));
}

function iconMarkup(key, colorClass) {
  if (key === "process_recovery" || key === "cascading_db_failure") {
    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-server w-5 h-5 ${colorClass}" aria-hidden="true"><rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect><rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect><line x1="6" x2="6.01" y1="6" y2="6"></line><line x1="6" x2="6.01" y1="18" y2="18"></line></svg>`;
  }
  if (key === "disk_space_crisis") {
    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-hard-drive w-5 h-5 ${colorClass}" aria-hidden="true"><path d="M10 16h.01"></path><path d="M2.212 11.577a2 2 0 0 0-.212.896V18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-5.527a2 2 0 0 0-.212-.896L18.55 5.11A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path><path d="M21.946 12.013H2.054"></path><path d="M6 16h.01"></path></svg>`;
  }
  if (key === "security_incident") {
    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-skull w-5 h-5 ${colorClass}" aria-hidden="true"><path d="m12.5 17-.5-1-.5 1h1z"></path><path d="M15 22a1 1 0 0 0 1-1v-1a2 2 0 0 0 1.56-3.25 8 8 0 1 0-11.12 0A2 2 0 0 0 8 20v1a1 1 0 0 0 1 1z"></path><circle cx="15" cy="12" r="1"></circle><circle cx="9" cy="12" r="1"></circle></svg>`;
  }
  if (key === "memory_leak") {
    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity w-5 h-5 ${colorClass}" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg>`;
  }
  if (key === "network_troubleshooting") {
    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-globe w-5 h-5 ${colorClass}" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"></path><path d="M2 12h20"></path></svg>`;
  }
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-cpu w-5 h-5 ${colorClass}" aria-hidden="true"><path d="M12 20v2"></path><path d="M12 2v2"></path><path d="M17 20v2"></path><path d="M17 2v2"></path><path d="M2 12h2"></path><path d="M2 17h2"></path><path d="M2 7h2"></path><path d="M20 12h2"></path><path d="M20 17h2"></path><path d="M20 7h2"></path><path d="M7 20v2"></path><path d="M7 2v2"></path><rect x="4" y="4" width="16" height="16" rx="2"></rect><rect x="8" y="8" width="8" height="8" rx="1"></rect></svg>`;
}

function renderNav() {
  const active = routeKey(state.path);

  const navLink = (href, key, label) => {
    const activeClass = key === active
      ? "text-chaos-green border-b-2 border-chaos-green py-5 -mb-[22px]"
      : "text-chaos-muted";
    return `<a class="hover:text-chaos-text transition-colors ${activeClass}" href="${href}">${label}</a>`;
  };

  navRoot.innerHTML = `
    <nav class="sticky top-0 z-50 w-full border-b border-chaos-border bg-chaos-dark/80 backdrop-blur-md">
      <div class="flex h-16 items-center px-4 gap-6">
        <a class="flex items-center gap-2" href="/">
          <span class="text-xl font-bold text-chaos-green tracking-tight">Chaos<span class="text-chaos-text">Lab</span></span>
        </a>
        <div class="flex items-center gap-6 flex-1 ml-4 text-sm font-medium overflow-x-auto">
          ${navLink("/", "hub", "Hub")}
          ${navLink("/builder", "builder", "Builder")}
          ${navLink("/playground", "playground", "Playground")}
          ${navLink("/arena", "arena", "Arena")}
        </div>
        <div class="flex items-center gap-4">
          <div class="relative group hidden md:block">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-chaos-muted group-focus-within:text-chaos-green transition-colors" aria-hidden="true"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
            <input id="navbar-search" placeholder="Search experiments..." class="bg-chaos-panel border border-chaos-border rounded-md pl-9 pr-8 py-1.5 text-sm outline-none focus:border-chaos-green/50 focus:bg-chaos-panel-hover focus:shadow-[0_0_12px_rgba(57,255,20,0.1)] transition-all w-64 text-chaos-text placeholder:text-chaos-muted" type="text" value="" />
          </div>
        </div>
      </div>
    </nav>
  `;
}

function buildManifest(detail) {
  const lines = [
    `scenario: "${detail.name}"`,
    `key: "${detail.key}"`,
    `difficulty: ${detail.difficulty}`,
    `max_steps: ${detail.max_steps}`,
    "",
    "faults:",
  ];

  detail.faults.forEach((fault, index) => {
    lines.push(`  - id: "fault-${index}"`);
    lines.push(`    name: "${fault.name}"`);
    lines.push(`    type: "${fault.apply_fn}"`);
    lines.push(`    args: ${JSON.stringify(fault.params)}`);
  });

  lines.push("", "cascades:");
  detail.cascades.forEach((cascade) => {
    lines.push(`  - condition: "${cascade.condition_fn}"`);
    lines.push(`    when: ${JSON.stringify(cascade.condition_params)}`);
    lines.push(`    trigger: "${cascade.effect.apply_fn}"`);
    lines.push(`    opts: ${JSON.stringify(cascade.effect.params)}`);
  });

  lines.push("", "objectives:");
  detail.objectives.forEach((objective) => {
    lines.push(`  - check: "${objective.check_fn}"`);
    lines.push(`    description: "${objective.description}"`);
    lines.push(`    points: ${objective.points}`);
  });

  return lines.join("\n");
}

function metrics(detail) {
  const faults = detail.faults.length;
  const cascades = detail.cascades.length;
  const objectives = detail.objectives.length;
  const blastRadius = Math.min(99, faults * 3 + cascades * 2 + objectives * 1.2);
  const complexityBase = detail.difficulty === "expert" ? 0.9 : detail.difficulty === "hard" ? 0.76 : detail.difficulty === "medium" ? 0.58 : 0.42;
  const complexity = Math.min(0.99, complexityBase + faults * 0.01 + cascades * 0.01);
  return { faults, cascades, objectives, blastRadius, complexity };
}

function renderHub() {
  const cards = scenarioEntries().map(([key, scenario]) => {
    const meta = difficultyMeta(scenario.difficulty);
    return `
      <a href="/playground?scenario=${encodeURIComponent(key)}">
        <div class="h-full group flex flex-col bg-chaos-panel/50 border border-chaos-border hover:border-chaos-green/50 rounded-lg p-6 transition-all hover:bg-chaos-panel hover:shadow-[0_0_20px_rgba(57,255,20,0.05)] cursor-pointer">
          <div class="flex justify-between items-start mb-4">
            <div class="w-10 h-10 rounded-md bg-chaos-darker flex items-center justify-center border border-chaos-border group-hover:border-chaos-green/30 transition-colors">
              ${iconMarkup(key, meta.iconColorClass)}
            </div>
            <span class="text-[10px] font-bold px-2 py-1 rounded border ${meta.textClass} ${meta.bgClass} ${meta.borderClass}">${meta.label}</span>
          </div>
          <h3 class="text-lg font-bold mb-2">${escapeHtml(scenario.name)}</h3>
          <p class="text-chaos-muted text-sm flex-1 mb-6 leading-relaxed line-clamp-3">${escapeHtml(scenario.description || "")}</p>
          <div class="flex flex-wrap gap-2 text-[10px] font-mono text-chaos-muted">
            <span class="bg-chaos-darker px-2 py-1 rounded border border-chaos-border">${escapeHtml(String(scenario.objectives_count || 0))} OBJS</span>
            <span class="bg-chaos-darker px-2 py-1 rounded border border-chaos-border">MAX ${escapeHtml(String(scenario.max_steps || 50))} STEPS</span>
          </div>
        </div>
      </a>
    `;
  }).join("");

  const featuredKey = state.scenarios.full_incident ? "full_incident" : state.order[0];
  const featured = state.scenarios[featuredKey] || null;
  const featuredName = featured ? featured.name : "Full Incident Response";
  const featuredDifficulty = featured ? difficultyMeta(featured.difficulty).specsClass : "text-chaos-red";
  const featuredSteps = featured ? String(featured.max_steps || 100) : "100";
  const featuredObjectives = featured ? String(featured.objectives_count || 6) : "6";

  appRoot.innerHTML = `
    <div class="max-w-7xl mx-auto px-6 py-10 pb-20">
      <div class="flex justify-between items-start mb-10">
        <div>
          <h1 class="text-4xl font-bold mb-3 tracking-tight">Chaos<span class="text-chaos-green/80">Hub</span></h1>
          <p class="text-chaos-muted max-w-2xl text-lg">Central nervous system for system resilience. Browse production-hardened tools and scenarios to stress test your architecture.</p>
        </div>
        <div class="flex gap-3 items-center">
          <div class="relative">
            <button id="complexity-filter" class="flex items-center gap-2 bg-chaos-panel border px-4 py-2 rounded text-sm transition-all border-chaos-border hover:border-chaos-muted text-chaos-text">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sliders-horizontal w-4 h-4" aria-hidden="true"><path d="M10 5H3"></path><path d="M12 19H3"></path><path d="M14 3v4"></path><path d="M16 17v4"></path><path d="M21 12h-9"></path><path d="M21 19h-5"></path><path d="M21 5h-7"></path><path d="M8 10v4"></path><path d="M8 12H3"></path></svg>
              <span>All Levels</span>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-3.5 h-3.5 text-chaos-muted transition-transform" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg>
            </button>
          </div>
        </div>
      </div>

      <div class="flex gap-8 border-b border-chaos-border mb-8">
        <button class="text-chaos-green border-b-2 border-chaos-green pb-3 font-medium">Scenarios</button>
        <button id="integrations-tab" class="text-chaos-muted hover:text-chaos-text pb-3 font-medium transition-colors">Integrations</button>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
        ${cards}
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 bg-chaos-panel/30 border border-chaos-border rounded-lg p-8 relative overflow-hidden flex flex-col justify-center">
          <div class="absolute top-0 right-0 w-64 h-64 bg-chaos-green/5 rounded-full blur-3xl -translate-y-1/2 translate-x-1/4 pointer-events-none"></div>
          <div class="bg-chaos-green/10 text-chaos-green text-xs font-bold px-3 py-1 rounded w-max tracking-widest mb-4">FEATURED SCENARIO</div>
          <h2 class="text-3xl font-bold mb-4">${escapeHtml(featuredName)}</h2>
          <p class="text-chaos-muted max-w-xl mb-8 leading-relaxed">The ultimate challenge. A cascading failure involving database crash, disk overfilling, cron breakdown, and a concurrent security incident. Triage, prioritize, and restore all systems to 100% functionality.</p>
          <div class="flex items-center gap-6">
            <a href="/playground?scenario=${encodeURIComponent(featuredKey)}"><button class="bg-chaos-green text-chaos-dark font-bold px-6 py-3 rounded hover:bg-chaos-green/90 transition-colors">Initialize Sandbox</button></a>
          </div>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings absolute right-8 bottom-8 w-32 h-32 text-chaos-border/50 -rotate-45" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>
        </div>

        <div class="bg-chaos-panel/30 border border-chaos-border rounded-lg p-8">
          <h3 class="text-lg font-bold mb-6">Technical Specs</h3>
          <div class="space-y-4 font-mono text-sm">
            <div class="flex justify-between border-b border-chaos-border/50 pb-2"><span class="text-chaos-muted">Complexity</span><span class="${featuredDifficulty}">Expert</span></div>
            <div class="flex justify-between border-b border-chaos-border/50 pb-2"><span class="text-chaos-muted">Max Steps</span><span class="text-chaos-cyan">${escapeHtml(featuredSteps)}</span></div>
            <div class="flex justify-between pb-2"><span class="text-chaos-muted">Grading Logic</span><span class="text-chaos-green">${escapeHtml(featuredObjectives)} Objectives</span></div>
          </div>
        </div>
      </div>
    </div>
  `;

  const integrations = document.getElementById("integrations-tab");
  integrations?.addEventListener("click", () => {
    showToast("Integrations view is not available yet.");
  });
}

function builderScenarioOptionButtons(selectedKey) {
  return scenarioEntries().map(([key, meta]) => {
    return `<button data-scenario-key="${escapeHtml(key)}" class="w-full text-left px-3 py-2 text-sm hover:bg-chaos-panel hover:text-chaos-green ${key === selectedKey ? "text-chaos-green" : "text-chaos-text"}">${escapeHtml(meta.name)}</button>`;
  }).join("");
}

async function renderBuilder() {
  const queryScenario = getQueryScenario();
  if (!state.builderScenario) {
    if (state.scenarios[queryScenario]) {
      state.builderScenario = queryScenario;
    } else if (state.scenarios.cascading_db_failure) {
      state.builderScenario = "cascading_db_failure";
    } else {
      state.builderScenario = state.order[0];
    }
  }

  const key = state.builderScenario;
  const detail = await fetchJSON(API.scenario(key));
  const live = metrics(detail);

  const faultsMarkup = detail.faults.map((fault) => {
    return `<div class="flex items-center gap-3 p-3 bg-chaos-panel border border-chaos-border rounded border-l-2 border-l-chaos-red/70 transition-colors group"><div class="text-chaos-red">${iconMarkup("process_recovery", "w-4 h-4")}</div><div class="min-w-0"><div class="text-sm font-bold truncate group-hover:text-chaos-red transition-colors">${escapeHtml(fault.name)}</div><div class="text-[10px] text-chaos-muted uppercase truncate">${escapeHtml(fault.apply_fn.replaceAll("_", " "))}</div></div></div>`;
  }).join("");

  const cascadeMarkup = detail.cascades.map((cascade) => {
    const effectLabel = cascade.effect?.name || cascade.effect?.apply_fn || "";
    return `<div class="flex items-center gap-3 p-3 bg-chaos-panel border border-chaos-border rounded border-l-2 border-l-chaos-cyan/70 transition-colors group"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-network w-4 h-4 text-chaos-cyan" aria-hidden="true"><rect x="16" y="16" width="6" height="6" rx="1"></rect><rect x="2" y="16" width="6" height="6" rx="1"></rect><rect x="9" y="2" width="6" height="6" rx="1"></rect><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"></path><path d="M12 12V8"></path></svg><div class="min-w-0"><div class="text-sm font-bold truncate group-hover:text-chaos-cyan transition-colors">${escapeHtml(cascade.condition_fn.replaceAll("_", " "))}</div><div class="text-[10px] text-chaos-muted uppercase truncate">→ ${escapeHtml(effectLabel)}</div></div></div>`;
  }).join("");

  const objectiveMarkup = detail.objectives.map((objective) => {
    return `<div class="flex items-center gap-3 p-2.5 bg-chaos-panel border border-chaos-border rounded border-l-2 border-l-chaos-green/70 transition-colors"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-target w-3.5 h-3.5 text-chaos-green shrink-0" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="6"></circle><circle cx="12" cy="12" r="2"></circle></svg><div class="text-[11px] text-chaos-muted truncate">${escapeHtml(objective.description)}</div><span class="text-[10px] font-mono text-chaos-green shrink-0">${Math.round((objective.points || 0) * 100)}%</span></div>`;
  }).join("");

  const formatNodeValue = (paramKey, paramValue) => {
    if (paramKey === "count") {
      const numeric = Number(paramValue);
      if (Number.isFinite(numeric) && numeric >= 1000) {
        return `${(numeric / 1000).toFixed(1)}K`;
      }
    }
    return String(paramValue);
  };

  const actionDescription = (actionName) => {
    if (actionName === "fill_disk") return "Log flood fills /var/log partition";
    if (actionName === "crash_service" || actionName === "app_degraded") return "App can't write logs, starts failing";
    return actionName.replaceAll("_", " ");
  };

  const faultNodes = detail.faults.map((fault, index) => {
    const id = `${fault.apply_fn.slice(0, 3).toUpperCase()}-${String(index).padStart(2, "0")}`;
    const paramRows = Object.entries(fault.params || {}).map(([paramKey, paramValue]) => {
      return `<div class="flex justify-between text-xs gap-2"><span class="text-chaos-muted">${escapeHtml(paramKey)}</span><span class="text-chaos-green font-mono truncate max-w-[130px]">${escapeHtml(formatNodeValue(paramKey, paramValue))}</span></div>`;
    }).join("");

    return `<div class="w-[240px] bg-chaos-panel border border-chaos-red/50 rounded-lg p-4 shadow-[0_0_15px_rgba(255,51,51,0.1)] hover:border-chaos-red/80 transition-all hover:shadow-[0_0_25px_rgba(255,51,51,0.2)] group relative"><div class="flex justify-between items-center mb-3"><div class="flex flex-col min-w-0"><span class="text-sm font-bold text-chaos-text truncate">${escapeHtml(fault.name.toUpperCase())}</span><span class="text-[10px] font-mono text-chaos-red">ID: ${escapeHtml(id)}</span></div><div class="text-chaos-red">${iconMarkup("process_recovery", "w-4 h-4")}</div></div><div class="text-[11px] text-chaos-muted mb-3 line-clamp-2">${escapeHtml(fault.description || fault.name)}</div><div class="space-y-1.5">${paramRows || `<div class="flex justify-between text-xs"><span class="text-chaos-muted">type</span><span class="text-chaos-green font-mono">-</span></div>`}</div><div class="absolute right-0 top-1/2 translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-chaos-red border-[3px] border-chaos-panel z-20"></div></div>`;
  }).join("");

  const cascadeNodes = detail.cascades.map((cascade, index) => {
    const cond = cascade.condition_fn.replaceAll("_", " ");
    const actionKey = String(cascade.effect.apply_fn || "");
    const actionText = cascade.effect.description || actionDescription(actionKey);
    const firstParam = Object.entries(cascade.condition_params || {}).map(([k, v]) => `${k}: ${v}`).join(", ");
    const actionMeta = Object.entries(cascade.effect.params || {}).map(([k, v]) => `<div class="flex justify-between gap-2 text-[10px] font-mono"><span class="text-chaos-muted">${escapeHtml(`${k}:`)}</span><span class="text-chaos-text">${escapeHtml(formatNodeValue(k, v))}</span></div>`).join("");
    return `<div class="relative"><div class="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-chaos-cyan border-[3px] border-chaos-panel z-20"></div><div class="w-[260px] bg-chaos-panel border border-chaos-cyan/50 rounded-lg p-4 shadow-[0_0_15px_rgba(0,255,255,0.08)]"><div class="flex items-center justify-between mb-2"><span class="text-[10px] font-bold text-chaos-muted uppercase tracking-wider flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-network w-3.5 h-3.5" aria-hidden="true"><rect x="16" y="16" width="6" height="6" rx="1"></rect><rect x="2" y="16" width="6" height="6" rx="1"></rect><rect x="9" y="2" width="6" height="6" rx="1"></rect><path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3"></path><path d="M12 12V8"></path></svg>TRIGGER CONDITION</span><span class="text-[10px] font-bold text-chaos-cyan">#${index + 1}</span></div><div class="text-xs text-chaos-text mb-2">IF ${escapeHtml(cond)}</div><div class="text-[10px] text-chaos-muted mb-3">(${escapeHtml(firstParam)})</div><div class="text-[10px] font-bold text-chaos-green mb-1">ACTION: ${escapeHtml(actionKey.toUpperCase())}</div><div class="text-[10px] text-chaos-muted mb-2">${escapeHtml(actionText)}</div><div class="space-y-1">${actionMeta}</div></div></div>`;
  }).join("");

  const objectiveNodes = detail.objectives.map((objective, index) => {
    return `<div class="relative"><div class="absolute left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-chaos-green border-[3px] border-chaos-panel z-20"></div><div class="w-[220px] bg-chaos-panel border border-chaos-border rounded-lg p-4 hover:border-chaos-green/50 transition-all bg-chaos-green/[0.02] hover:bg-chaos-green/5"><div class="flex items-center gap-2 mb-3"><span class="w-2 h-2 rounded-full bg-chaos-green animate-pulse"></span><span class="text-[10px] font-bold text-chaos-muted font-mono uppercase tracking-wider">OBJ-${String(index + 1).padStart(2, "0")}</span><span class="ml-auto text-sm font-bold text-chaos-green font-mono">${Math.round((objective.points || 0) * 100)}%</span></div><div class="text-xs text-chaos-text mb-3 leading-relaxed">${escapeHtml(objective.description)}</div><div class="flex items-center justify-between"><span class="text-[10px] text-chaos-muted font-mono bg-chaos-darker px-2 py-1 rounded border border-chaos-border">${escapeHtml(objective.check_fn.replaceAll("_", " "))}</span><div class="w-5 h-5 rounded-full bg-chaos-green/20 flex items-center justify-center border border-chaos-green/50"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check w-3 h-3 text-chaos-green" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m9 12 2 2 4-4"></path></svg></div></div></div></div>`;
  }).join("");

  const scenarioButtonLabel = state.scenarios[key]?.name || detail.name;
  const diff = difficultyMeta(detail.difficulty);

  appRoot.innerHTML = `
    <div class="flex w-full h-[calc(100vh-64px)] bg-chaos-dark overflow-hidden">
      <div class="w-[280px] bg-chaos-panel/30 border-r border-chaos-border flex flex-col shrink-0">
        <div class="p-4 border-b border-chaos-border">
          <div class="text-[10px] font-bold text-chaos-muted uppercase tracking-widest mb-3">Select Scenario</div>
          <div class="relative">
            <button id="builder-scenario-trigger" class="w-full flex items-center justify-between bg-chaos-panel border border-chaos-border rounded px-3 py-2.5 text-sm font-bold hover:border-chaos-green/50 transition-colors text-left"><span class="truncate">${escapeHtml(scenarioButtonLabel)}</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down w-4 h-4 text-chaos-muted shrink-0 transition-transform" aria-hidden="true"><path d="m6 9 6 6 6-6"></path></svg></button>
            <div id="builder-scenario-menu" class="hidden absolute left-0 right-0 top-[calc(100%+6px)] bg-chaos-darker border border-chaos-border rounded max-h-72 overflow-y-auto z-50">
              ${builderScenarioOptionButtons(key)}
            </div>
          </div>
        </div>

        <div class="p-4 border-b border-chaos-border flex-1 overflow-y-auto">
          <div class="text-[10px] font-bold text-chaos-muted uppercase tracking-widest mb-3">Injected Faults <span class="text-chaos-text">${detail.faults.length}</span></div>
          <div class="space-y-2">${faultsMarkup}</div>
        </div>

        <div class="p-4 border-b border-chaos-border">
          <div class="text-[10px] font-bold text-chaos-muted uppercase tracking-widest mb-3">Cascade Rules <span class="text-chaos-text">${detail.cascades.length}</span></div>
          <div class="space-y-2">${cascadeMarkup}</div>
        </div>

        <div class="p-4">
          <div class="text-[10px] font-bold text-chaos-muted uppercase tracking-widest mb-3">Objectives <span class="text-chaos-text">${detail.objectives.length}</span></div>
          <div class="space-y-2">${objectiveMarkup}</div>
        </div>
      </div>

      <div class="flex-1 relative overflow-auto">
        <div class="absolute inset-0" style="background-image:radial-gradient(circle, rgba(57,255,20,0.03) 1px, transparent 1px);background-size:24px 24px"></div>
        <div class="absolute inset-0 bg-gradient-to-br from-chaos-dark via-chaos-dark to-chaos-darker/50"></div>

        <div class="absolute top-0 left-0 right-0 p-4 flex justify-around text-[10px] font-bold text-chaos-muted uppercase tracking-widest z-10 pointer-events-none">
          <div class="flex flex-col items-center"><span>Fault Nodes</span><span class="mt-1 text-chaos-text">${detail.faults.length} Active</span></div>
          <div class="flex flex-col items-center"><span>Cascade Logic</span><span class="mt-1 text-chaos-text">${detail.cascades.length} Triggers</span></div>
          <div class="flex flex-col items-center"><span>Validation Targets</span><span class="mt-1 text-chaos-text">${detail.objectives.length} Criteria</span></div>
        </div>

        <div class="relative z-10 p-12 min-w-[800px] min-h-[500px] flex items-start justify-around pt-20 gap-8">
          <div class="flex flex-col gap-6 relative min-w-[240px]">${faultNodes}</div>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move-right w-7 h-7 text-chaos-cyan/40 mt-20 shrink-0" aria-hidden="true"><path d="M18 8L22 12L18 16"></path><path d="M2 12H22"></path></svg>
          <div class="flex flex-col gap-8 relative min-w-[260px]">${cascadeNodes}</div>
          <div class="flex flex-col gap-8 relative min-w-[220px]">${objectiveNodes}</div>
        </div>
      </div>

      <div class="w-[320px] bg-chaos-panel/30 border-l border-chaos-border shrink-0 flex flex-col">
        <div class="p-6 border-b border-chaos-border">
          <div class="text-[10px] font-bold text-chaos-muted uppercase tracking-widest mb-1">Active Scenario</div>
          <h2 class="text-lg font-bold mb-3">${escapeHtml(detail.name)}</h2>
          <div class="flex items-center gap-3">
            <span class="text-[10px] font-bold px-2 py-1 rounded border ${diff.textClass} ${diff.bgClass} ${diff.borderClass}">${diff.label}</span>
            <span class="text-[10px] font-bold text-chaos-muted">MAX: ${detail.max_steps} STEPS</span>
          </div>
        </div>

        <div class="p-6 flex-1 overflow-y-auto">
          <div class="mb-6"><p class="text-xs text-chaos-muted leading-relaxed">${escapeHtml(detail.description)}</p></div>

          <div class="mb-8">
            <h3 class="text-xs font-bold text-chaos-muted uppercase tracking-widest mb-4 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity w-4 h-4" aria-hidden="true"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg> Live Projections</h3>
            <div class="space-y-3 font-mono text-sm">
              <div class="flex justify-between"><span>Fault Nodes</span><span class="text-chaos-red">${live.faults}</span></div>
              <div class="flex justify-between"><span>Cascade Depth</span><span class="text-chaos-cyan">${live.cascades}</span></div>
              <div class="flex justify-between"><span>Objectives</span><span class="text-chaos-green">${live.objectives}</span></div>
              <div class="flex justify-between"><span>Blast Radius</span><span class="text-chaos-red">${live.blastRadius.toFixed(1)}%</span></div>
              <div class="flex justify-between"><span>Complexity</span><span class="text-chaos-cyan">${live.complexity.toFixed(3)}</span></div>
            </div>
          </div>

          <div class="mb-8">
            <h3 class="text-xs font-bold text-chaos-muted uppercase tracking-widest mb-3">Hints</h3>
            <ul class="space-y-2">
              ${detail.hints.map((hint) => `<li class="text-[11px] text-chaos-muted flex gap-2"><span class="text-chaos-cyan shrink-0">›</span>${escapeHtml(hint)}</li>`).join("")}
            </ul>
          </div>

          <div>
            <h3 class="text-xs font-bold text-chaos-muted uppercase tracking-widest mb-4 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-database w-4 h-4" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5V19A9 3 0 0 0 21 19V5"></path><path d="M3 12A9 3 0 0 0 21 12"></path></svg> Config Manifest</h3>
            <pre class="text-[10px] font-mono text-chaos-green bg-chaos-darker p-4 rounded border border-chaos-border overflow-x-auto max-h-[240px] overflow-y-auto">${escapeHtml(buildManifest(detail))}</pre>
          </div>
        </div>

        <div class="p-4 border-t border-chaos-border bg-chaos-panel space-y-3">
          <button id="builder-btn-execute" class="w-full flex items-center justify-center gap-2 bg-chaos-green text-chaos-dark font-bold px-4 py-3 rounded hover:bg-chaos-green/90 transition-colors uppercase tracking-widest text-sm shadow-[0_0_15px_rgba(57,255,20,0.2)]"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play w-4 h-4" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"></polygon></svg>Execute Experiment</button>
          <div class="flex gap-2">
            <button id="builder-btn-llm" class="flex-1 flex items-center justify-center gap-2 bg-chaos-darker border border-chaos-cyan text-chaos-cyan font-bold px-2 py-2 rounded hover:bg-chaos-cyan/10 transition-colors uppercase text-[10px] tracking-widest"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-3.5 h-3.5" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.25.25 0 0 1 0-.962L8.5 9.937A2 2 0 0 0 9.937 8.5l1.582-6.135a.25.25 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.25.25 0 0 1 0 .962L15.5 14.063A2 2 0 0 0 14.063 15.5l-1.582 6.135a.25.25 0 0 1-.962 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>Test LLM</button>
            <button id="builder-btn-rl" class="flex-1 flex items-center justify-center gap-2 bg-chaos-darker border border-chaos-cyan text-chaos-cyan font-bold px-2 py-2 rounded hover:bg-chaos-cyan/10 transition-colors uppercase text-[10px] tracking-widest"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot w-3.5 h-3.5" aria-hidden="true"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>Test RL</button>
          </div>
          <button id="builder-btn-export" class="w-full flex items-center justify-center gap-2 bg-transparent border border-chaos-border text-chaos-text font-bold px-4 py-3 rounded hover:bg-chaos-darker transition-colors text-xs uppercase tracking-widest"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download w-4 h-4" aria-hidden="true"><path d="M12 15V3"></path><path d="M17 10l-5 5-5-5"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path></svg>Export YAML Bundle</button>
        </div>
      </div>
    </div>
  `;

  const trigger = document.getElementById("builder-scenario-trigger");
  const menu = document.getElementById("builder-scenario-menu");
  trigger?.addEventListener("click", () => {
    menu?.classList.toggle("hidden");
  });

  menu?.querySelectorAll("button[data-scenario-key]").forEach((button) => {
    button.addEventListener("click", async () => {
      const selected = button.getAttribute("data-scenario-key");
      if (!selected) return;
      state.builderScenario = selected;
      await renderBuilder();
    });
  });

  [["builder-btn-execute", "Experiment queued."], ["builder-btn-llm", "LLM test started."], ["builder-btn-rl", "RL test started."], ["builder-btn-export", "YAML bundle exported."]].forEach(([id, msg]) => {
    document.getElementById(id)?.addEventListener("click", () => showToast(msg));
  });
}

function getRingDash(score) {
  const pct = Math.max(0, Math.min(99, Math.round(score * 100)));
  return `${pct}, 100`;
}

function appendTerminalOutput(line) {
  const stream = document.getElementById("terminal-stream");
  const output = document.getElementById("terminal-output-area");
  if (!stream || !output) return;
  const row = document.createElement("div");
  row.className = "mb-2 whitespace-pre-wrap flex flex-col";
  row.innerHTML = `<div class="text-chaos-text/90">${escapeHtml(line)}</div>`;
  stream.appendChild(row);
  output.scrollTop = output.scrollHeight;
}

function appendTerminalSystem(line) {
  const stream = document.getElementById("terminal-stream");
  const output = document.getElementById("terminal-output-area");
  if (!stream || !output) return;
  const row = document.createElement("div");
  row.className = "mb-2 whitespace-pre-wrap flex flex-col";
  row.innerHTML = `<div class="text-chaos-cyan opacity-80 mt-1 italic">${escapeHtml(line)}</div>`;
  stream.appendChild(row);
  output.scrollTop = output.scrollHeight;
}

function renderPlaygroundFrame() {
  const envLabel = "ENV_0";
  const scorePct = Math.max(0, Math.min(99, Math.round(state.playground.score * 100)));

  appRoot.innerHTML = `
    <div class="flex h-full w-full bg-chaos-dark overflow-hidden p-6 gap-6">
      <div class="w-[300px] flex flex-col gap-8 shrink-0">
        <div>
          <div class="flex justify-between items-start mb-2">
            <h2 id="playground-task-name" class="text-2xl font-bold leading-tight">${escapeHtml(state.playground.taskName || "Log Analysis")}</h2>
            <div class="bg-chaos-cyan/10 border border-chaos-cyan/30 text-chaos-cyan text-[10px] font-mono px-2 py-1 rounded">ID:<br>${escapeHtml(envLabel)}</div>
          </div>
          <p id="playground-task-desc" class="text-chaos-muted text-sm leading-relaxed mt-4">${escapeHtml(state.playground.description || "")}</p>
        </div>

        <div class="flex items-center gap-6 p-4 bg-chaos-panel/30 border border-chaos-border rounded-lg">
          <div class="relative w-16 h-16 flex items-center justify-center">
            <svg class="w-full h-full transform -rotate-90" viewBox="0 0 36 36">
              <path class="text-chaos-border" stroke-width="3" stroke="currentColor" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
              <path id="playground-progress-arc" class="text-chaos-green transition-all duration-1000" stroke-width="3" stroke-dasharray="${getRingDash(state.playground.score)}" stroke="currentColor" fill="none" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"></path>
            </svg>
            <span id="playground-progress-text" class="absolute text-sm font-bold">${scorePct}%</span>
          </div>
          <div>
            <div class="text-[10px] font-bold text-chaos-muted tracking-widest mb-1 uppercase">Completion Level</div>
            <div class="text-2xl font-bold text-chaos-green"><span id="playground-score-points">${scorePct}</span> <span class="text-xs text-chaos-green/50">PTS</span></div>
          </div>
        </div>

        <div class="flex-1">
          <div class="flex justify-between text-xs font-bold text-chaos-muted uppercase tracking-widest mb-6"><span>Step Progress</span><span id="playground-step-progress">${state.playground.step} / ${state.playground.maxSteps}</span></div>
          <div class="text-xs font-bold text-chaos-muted uppercase tracking-widest mb-4">Objectives Meta</div>
          <div class="space-y-6">
            <p class="text-xs text-chaos-muted italic">Complete actions in the terminal and verify fixes to achieve 100% completion in this sandbox.</p>
          </div>
        </div>
      </div>

      <div class="flex-1 bg-chaos-panel/40 border border-chaos-border rounded-xl flex flex-col overflow-hidden relative shadow-2xl">
        <div class="bg-chaos-panel border-b border-chaos-border px-4 py-3 flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div class="flex gap-1.5"><div class="w-3 h-3 rounded-full bg-chaos-red/80"></div><div class="w-3 h-3 rounded-full bg-chaos-muted/50"></div><div class="w-3 h-3 rounded-full bg-chaos-green/80"></div></div>
            <div class="ml-4 flex text-xs font-mono text-chaos-muted space-x-1 border-r border-chaos-border/50 pr-4"><span id="playground-shell-label" class="text-chaos-text px-2 py-1 bg-chaos-darker rounded border border-chaos-border/50">root@chaoslab-env_0 ~ (ssh)</span></div>
            <div class="flex items-center text-xs font-mono pl-1"><div class="flex items-center gap-2"><span class="text-chaos-muted uppercase ml-2 tracking-widest">Auto-Solve:</span><button disabled class="text-chaos-muted tracking-widest border border-chaos-border px-2 py-1 rounded transition-colors opacity-50 cursor-not-allowed">LLM</button><button id="playground-auto-rl" class="text-chaos-muted tracking-widest hover:text-chaos-green border border-chaos-border hover:border-chaos-green px-2 py-1 rounded transition-colors flex items-center gap-1">RL<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-3 h-3" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div></div>
          </div>
        </div>

        <div id="terminal-output-area" class="p-6 font-mono text-sm overflow-y-auto flex-1 flex flex-col">
          <div id="terminal-stream" class="flex-1">
            <div class="text-chaos-muted mb-4 opacity-70">ChaosLab Live Terminal [Version 2.0.42-STABLE]<br>(c) 2026 ChaosLab System. All rights reserved.</div>
          </div>
          <div id="terminal-input-row" class="flex items-center gap-2 mt-1"><span id="playground-prompt" class="text-chaos-green font-bold shrink-0">root@chaoslab:~$</span><input id="cli-input" disabled class="bg-transparent border-none outline-none flex-1 font-mono text-chaos-text focus:ring-0 disabled:opacity-50" autocomplete="off" type="text" value="" /></div>
        </div>

        <div class="bg-chaos-panel/80 px-4 py-2 border-t border-chaos-border flex justify-between text-[10px] font-mono uppercase tracking-widest text-chaos-muted"><div class="flex gap-6"><span class="flex items-center gap-2"><span class="w-1.5 h-1.5 rounded-full bg-chaos-red"></span>OFFLINE</span></div><div class="flex gap-6"><span>ENCRYPTION: AES-256-GCM</span></div></div>
      </div>

      <div class="w-[280px] shrink-0 flex flex-col gap-6 h-full overflow-hidden">
        <div class="bg-chaos-panel/30 border border-chaos-border p-4 rounded-xl flex flex-col overflow-hidden flex-1">
          <div class="flex justify-between items-center mb-4 shrink-0"><h3 class="text-xs font-bold uppercase tracking-widest text-chaos-muted flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-3.5 h-3.5" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.25.25 0 0 1 0-.962L8.5 9.937A2 2 0 0 0 9.937 8.5l1.582-6.135a.25.25 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.25.25 0 0 1 0 .962L15.5 14.063A2 2 0 0 0 14.063 15.5l-1.582 6.135a.25.25 0 0 1-.962 0z"></path><path d="M20 3v4"></path><path d="M22 5h-4"></path><path d="M4 17v2"></path><path d="M5 18H3"></path></svg>AI Assistant</h3><span class="text-[8px] text-chaos-muted bg-chaos-muted/20 px-1.5 py-0.5 rounded">OFFLINE</span></div>
          <div class="flex-1 overflow-y-auto mb-3 space-y-3 pr-2"><div class="text-[11px] text-chaos-muted/60 italic">Ask the LLM for help with the current task. Get suggestions for the next command to run.</div><div></div></div>
          <div class="flex gap-2 shrink-0"><input placeholder="LLM offline" disabled class="flex-1 bg-chaos-darker/50 border border-chaos-border/50 rounded px-2 py-1.5 text-[11px] text-chaos-text placeholder-chaos-muted/50 focus:outline-none focus:border-chaos-cyan/50 disabled:opacity-50" type="text" value="" /><button disabled class="bg-chaos-cyan/10 border border-chaos-cyan/30 text-chaos-cyan p-1.5 rounded hover:bg-chaos-cyan/20 disabled:opacity-30 transition-colors flex items-center gap-1.5" title="Send to LLM">Send to LLM<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-send-horizontal w-3 h-3" aria-hidden="true"><path d="m3 3 3 9-3 9 19-9Z"></path><path d="M6 12h16"></path></svg></button></div>
        </div>
      </div>
    </div>
  `;
}

async function destroyPlaygroundEnv() {
  if (!state.playground.envId) return;
  try {
    await fetchJSON(API.destroy(state.playground.envId), { method: "DELETE" });
  } catch {
    // Ignore cleanup errors.
  }
}

function updatePlaygroundWidgets() {
  const scorePct = Math.max(0, Math.min(99, Math.round(state.playground.score * 100)));
  const envLabel = "ENV_0";

  const progressArc = document.getElementById("playground-progress-arc");
  if (progressArc) progressArc.setAttribute("stroke-dasharray", getRingDash(state.playground.score));

  const progressText = document.getElementById("playground-progress-text");
  if (progressText) progressText.textContent = `${scorePct}%`;

  const score = document.getElementById("playground-score-points");
  if (score) score.textContent = String(scorePct);

  const step = document.getElementById("playground-step-progress");
  if (step) step.textContent = `${state.playground.step} / ${state.playground.maxSteps}`;

  const name = document.getElementById("playground-task-name");
  if (name) name.textContent = state.playground.taskName;

  const description = document.getElementById("playground-task-desc");
  if (description) description.textContent = state.playground.description;

  const shell = document.getElementById("playground-shell-label");
  if (shell) shell.textContent = `root@chaoslab-${envLabel.toLowerCase()} ~ (ssh)`;

  const prompt = document.getElementById("playground-prompt");
  if (prompt) prompt.textContent = `root@chaoslab:${state.playground.cwd}$`;
}

async function initializePlayground(scenarioKey) {
  await destroyPlaygroundEnv();

  const payload = await fetchJSON(API.reset, {
    method: "POST",
    body: JSON.stringify({ scenario: scenarioKey }),
  });

  state.playground.envId = payload.env_id;
  state.playground.scenarioKey = scenarioKey;
  state.playground.score = 0;
  state.playground.step = 0;
  state.playground.maxSteps = Number(payload.info?.max_steps || 50);
  state.playground.done = false;
  state.playground.cwd = "~";
  state.playground.taskName = payload.info?.task_name || (state.scenarios[scenarioKey]?.name || "Scenario");
  state.playground.description = state.scenarios[scenarioKey]?.description || "";

  appendTerminalSystem(":: Successfully initialized sandbox [env_0]");
  appendTerminalSystem(`:: Task: ${state.playground.taskName}`);

  updatePlaygroundWidgets();
}

async function runPlaygroundCommand(command) {
  if (!command || !state.playground.envId || state.playground.done) return;

  appendTerminalOutput(`root@chaoslab:${state.playground.cwd}$ ${command}`);

  const payload = await fetchJSON(API.step(state.playground.envId), {
    method: "POST",
    body: JSON.stringify({ action: command }),
  });

  const output = payload.info?.command_output || "";
  if (output.trim()) {
    output.split(/\r?\n/).forEach((line) => {
      if (line.trim()) appendTerminalOutput(line);
    });
  }

  state.playground.score = Number(payload.info?.task_score || 0);
  state.playground.step = Number(payload.info?.step || state.playground.step + 1);
  state.playground.maxSteps = Number(payload.info?.max_steps || state.playground.maxSteps);
  state.playground.cwd = payload.observation?.current_directory || state.playground.cwd;
  state.playground.done = Boolean(payload.done);

  if (state.playground.done) {
    appendTerminalSystem(":: Sandbox run ended.");
  }

  updatePlaygroundWidgets();
}

async function renderPlayground() {
  renderPlaygroundFrame();

  const queryScenario = getQueryScenario();
  const key = state.scenarios[queryScenario] ? queryScenario : state.order[0];

  await initializePlayground(key);

  const input = document.getElementById("cli-input");
  input?.addEventListener("keydown", async (event) => {
    if (event.key !== "Enter") return;
    event.preventDefault();
    const command = input.value.trim();
    if (!command) return;
    input.value = "";
    try {
      await runPlaygroundCommand(command);
    } catch (error) {
      appendTerminalOutput(`error: ${error.message}`);
    }
  });

  document.getElementById("playground-auto-rl")?.addEventListener("click", async () => {
    const commands = AUTO_PLAYBOOK.rl[state.playground.scenarioKey] || AUTO_PLAYBOOK.llm[state.playground.scenarioKey] || [];
    for (const command of commands) {
      if (state.playground.done) break;
      try {
        await runPlaygroundCommand(command);
      } catch {
        break;
      }
    }
  });
}

function resolveArenaCommands(mode, scriptText, scenarioKey) {
  const normalized = (mode || "script").toLowerCase();
  if (normalized === "script") {
    const commands = splitLines(scriptText);
    if (commands.length) return commands;
  }
  if (AUTO_PLAYBOOK[normalized]?.[scenarioKey]?.length) {
    return AUTO_PLAYBOOK[normalized][scenarioKey];
  }
  if (AUTO_PLAYBOOK.llm[scenarioKey]?.length) {
    return AUTO_PLAYBOOK.llm[scenarioKey];
  }
  return ["ps", "df -h", "free -m"];
}

async function runArenaAgent(label, mode, scriptText, scenarioKey) {
  const commands = resolveArenaCommands(mode, scriptText, scenarioKey);
  const resetPayload = await fetchJSON(API.reset, {
    method: "POST",
    body: JSON.stringify({ scenario: scenarioKey }),
  });

  const envId = resetPayload.env_id;
  let score = 0;
  let step = 0;
  let done = false;

  try {
    for (const command of commands) {
      const payload = await fetchJSON(API.step(envId), {
        method: "POST",
        body: JSON.stringify({ action: command }),
      });
      score = Number(payload.info?.task_score || score);
      step = Number(payload.info?.step || step + 1);
      done = Boolean(payload.done);
      if (done) break;
    }
  } finally {
    try {
      await fetchJSON(API.destroy(envId), { method: "DELETE" });
    } catch {
      // Ignore cleanup error.
    }
  }

  return { label, mode, score, step, done };
}

function renderArenaResult(resultA, resultB) {
  const winner = resultA.score > resultB.score
    ? resultA.label
    : resultB.score > resultA.score
      ? resultB.label
      : resultA.step < resultB.step
        ? resultA.label
        : resultB.step < resultA.step
          ? resultB.label
          : "DRAW";

  return `
    <div class="max-w-7xl mx-auto px-6 pb-20">
      <div class="bg-chaos-panel/50 border border-chaos-border rounded-lg p-5">
        <h3 class="text-lg font-bold mb-4">${winner === "DRAW" ? "Result: Draw" : `Winner: ${winner}`}</h3>
        <table class="w-full text-sm">
          <thead>
            <tr class="text-chaos-muted border-b border-chaos-border">
              <th class="text-left py-2">Agent</th>
              <th class="text-left py-2">Mode</th>
              <th class="text-left py-2">Score</th>
              <th class="text-left py-2">Steps</th>
              <th class="text-left py-2">Status</th>
            </tr>
          </thead>
          <tbody>
            <tr class="border-b border-chaos-border/60">
              <td class="py-2">${escapeHtml(resultA.label)}</td>
              <td class="py-2">${escapeHtml(resultA.mode)}</td>
              <td class="py-2">${Math.round(resultA.score * 100)}%</td>
              <td class="py-2">${resultA.step}</td>
              <td class="py-2">${resultA.done ? "DONE" : "INCOMPLETE"}</td>
            </tr>
            <tr>
              <td class="py-2">${escapeHtml(resultB.label)}</td>
              <td class="py-2">${escapeHtml(resultB.mode)}</td>
              <td class="py-2">${Math.round(resultB.score * 100)}%</td>
              <td class="py-2">${resultB.step}</td>
              <td class="py-2">${resultB.done ? "DONE" : "INCOMPLETE"}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  `;
}

function renderArena() {
  const options = scenarioEntries().map(([key, meta]) => {
    return `<option value="${escapeHtml(key)}" class="bg-chaos-dark">${escapeHtml(meta.name)}</option>`;
  }).join("");

  appRoot.innerHTML = `
    <div class="max-w-7xl mx-auto px-6 py-10 pb-20">
      <div class="mb-10">
        <div class="text-xs font-mono text-chaos-green mb-4">root@chaoslab-terminal / ARENA / AGENT_DUEL_V3.4</div>
        <h1 class="text-5xl font-extrabold mb-4 italic tracking-tighter" style="font-family:var(--font-serif)">Battle Scenario</h1>
        <p class="text-chaos-muted max-w-2xl text-base">Compare user or autonomous scripts against high-stakes environments. Define identical testing parameters and observe how different instruction sets handle cascading service disruptions.</p>
      </div>

      <div class="bg-chaos-panel/50 border border-chaos-border rounded-lg p-5 flex justify-between items-center mb-10">
        <div>
          <div class="text-[10px] font-bold text-chaos-muted uppercase tracking-widest mb-1">Active Environment Overlay</div>
          <select id="arena-scenario" class="bg-transparent border-none outline-none text-lg font-mono text-chaos-text cursor-pointer appearance-none uppercase">
            ${options}
          </select>
        </div>
        <div class="flex items-center gap-2 text-chaos-green font-mono text-sm"><span class="w-2 h-2 rounded-full bg-chaos-green animate-pulse"></span> READY</div>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
        <div class="bg-chaos-panel/30 border border-chaos-border rounded-xl p-6 relative overflow-hidden group hover:border-chaos-green/30 transition-colors flex flex-col">
          <div class="absolute top-0 right-0 text-[120px] font-bold text-chaos-darker leading-none select-none pointer-events-none group-hover:text-chaos-green/5 transition-colors">A</div>
          <div class="flex items-center gap-3 mb-6 relative z-10"><span class="w-3 h-3 rounded-full bg-chaos-green animate-pulse"></span><h2 class="text-xl font-bold font-mono tracking-wider text-chaos-green">AGENT_ALPHA</h2></div>
          <div class="mb-4 relative z-10"><label class="text-[10px] font-bold text-chaos-muted uppercase tracking-widest mb-2 block">Behavior Matrix</label><select id="arena-mode-a" class="w-full bg-chaos-darker border border-chaos-border rounded p-2 text-sm font-mono text-chaos-text outline-none focus:border-chaos-green"><option value="script" selected>Hardcoded Script</option><option value="llm">LLM Autonomous</option><option value="rl">RL Autonomous</option></select></div>
          <textarea id="arena-script-a" class="w-full bg-chaos-dark rounded flex-1 p-4 border border-chaos-border min-h-[160px] mb-4 font-mono text-sm text-chaos-text relative z-10 box-border focus:border-chaos-green focus:outline-none" placeholder="Enter shell commands, one per line...">cat /var/log/app.log\ngrep 500 /var/log/app.log</textarea>
        </div>

        <div class="bg-chaos-panel/30 border border-chaos-border rounded-xl p-6 relative overflow-hidden group hover:border-chaos-red/30 transition-colors flex flex-col">
          <div class="absolute top-0 right-0 text-[120px] font-bold text-chaos-darker leading-none select-none pointer-events-none group-hover:text-chaos-red/5 transition-colors">B</div>
          <div class="flex items-center gap-3 mb-6 relative z-10"><span class="w-3 h-3 rounded-full bg-chaos-red"></span><h2 class="text-xl font-bold font-mono tracking-wider text-chaos-red">AGENT_BETA</h2></div>
          <div class="mb-4 relative z-10"><label class="text-[10px] font-bold text-chaos-muted uppercase tracking-widest mb-2 block">Behavior Matrix</label><select id="arena-mode-b" class="w-full bg-chaos-darker border border-chaos-border rounded p-2 text-sm font-mono text-chaos-text outline-none focus:border-chaos-red"><option value="script">Hardcoded Script</option><option value="llm">LLM Autonomous</option><option value="rl" selected>RL Autonomous</option></select></div>
          <div class="flex-1 min-h-[160px] border border-chaos-border bg-chaos-darker rounded mb-4 relative z-10 flex flex-col items-center justify-center text-center p-6 bg-texture-stripes">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bot w-4 h-4 text-chaos-red mb-2" aria-hidden="true"><path d="M12 8V4H8"></path><rect width="16" height="12" x="4" y="8" rx="2"></rect><path d="M2 14h2"></path><path d="M20 14h2"></path><path d="M15 13v2"></path><path d="M9 13v2"></path></svg>
            <h3 class="font-mono text-chaos-red font-bold mb-2">RL AUTONOMOUS MODE</h3>
            <p class="text-xs text-chaos-muted tracking-wider leading-relaxed mb-4">Model: Heuristic Expert</p>
            <select class="bg-chaos-dark border border-chaos-border rounded px-3 py-1.5 text-xs font-mono text-chaos-text outline-none focus:border-chaos-red"><option value="ppo" class="bg-chaos-dark">PPO Neural Net —</option><option value="qlearning" class="bg-chaos-dark">Tabular Q-Learning —</option><option value="heuristic" class="bg-chaos-dark" selected>Heuristic Expert ✓</option></select>
          </div>
          <textarea id="arena-script-b" class="w-full bg-chaos-dark rounded p-4 border border-chaos-border min-h-[90px] font-mono text-sm text-chaos-text box-border focus:border-chaos-red focus:outline-none" placeholder="Enter shell commands, one per line..."></textarea>
        </div>
      </div>

      <div class="flex justify-center mb-16 relative"><div class="absolute top-1/2 left-0 right-0 h-px bg-chaos-border -translate-y-1/2 -z-10"></div><button id="arena-run" class="bg-chaos-green text-chaos-dark disabled:bg-chaos-muted disabled:text-chaos-darker font-extrabold text-lg px-12 py-4 rounded hover:bg-chaos-green/90 transition-all uppercase tracking-widest flex items-center gap-3 shadow-[0_0_30px_rgba(57,255,20,0.3)] hover:shadow-[0_0_50px_rgba(57,255,20,0.5)] transform hover:scale-105">RUN RACE<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-5 h-5" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></button></div>

      <div id="arena-result"></div>
    </div>
  `;

  document.getElementById("arena-run")?.addEventListener("click", async () => {
    const scenarioKey = document.getElementById("arena-scenario")?.value || state.order[0];
    const modeA = document.getElementById("arena-mode-a")?.value || "script";
    const modeB = document.getElementById("arena-mode-b")?.value || "rl";
    const scriptA = document.getElementById("arena-script-a")?.value || "";
    const scriptB = document.getElementById("arena-script-b")?.value || "";
    const runButton = document.getElementById("arena-run");
    const resultNode = document.getElementById("arena-result");

    if (runButton) runButton.setAttribute("disabled", "disabled");
    if (resultNode) {
      resultNode.innerHTML = `<div class="bg-chaos-panel/50 border border-chaos-border rounded-lg p-4 text-sm">Running race...</div>`;
    }

    try {
      const [resultA, resultB] = await Promise.all([
        runArenaAgent("AGENT_ALPHA", modeA, scriptA, scenarioKey),
        runArenaAgent("AGENT_BETA", modeB, scriptB, scenarioKey),
      ]);
      if (resultNode) {
        resultNode.innerHTML = renderArenaResult(resultA, resultB);
      }
    } catch (error) {
      if (resultNode) {
        resultNode.innerHTML = `<div class="bg-chaos-panel/50 border border-chaos-border rounded-lg p-4 text-sm">Race failed: ${escapeHtml(error.message)}</div>`;
      }
    } finally {
      if (runButton) runButton.removeAttribute("disabled");
    }
  });
}

function renderError(message) {
  appRoot.innerHTML = `<div class="max-w-5xl mx-auto p-8"><div class="bg-chaos-panel/50 border border-chaos-border rounded-lg p-6"><h2 class="text-xl font-bold mb-3">Frontend failed to initialize</h2><p class="text-sm text-chaos-muted">${escapeHtml(message)}</p></div></div>`;
}

async function hydrateScenarios() {
  const payload = await fetchJSON(API.scenarios);
  state.scenarios = payload.scenarios || {};
  state.order = Object.keys(state.scenarios);
}

async function mount() {
  try {
    await hydrateScenarios();
    renderNav();

    if (routeKey(state.path) === "builder") {
      await renderBuilder();
      return;
    }
    if (routeKey(state.path) === "playground") {
      await renderPlayground();
      return;
    }
    if (routeKey(state.path) === "arena") {
      renderArena();
      return;
    }

    renderHub();
  } catch (error) {
    renderNav();
    renderError(error.message || "Unknown error");
  }
}

window.addEventListener("pagehide", () => {
  destroyPlaygroundEnv();
});

mount();