Spaces:

Rayugacodes
/

Breach-OS

Sleeping

File size: 36,441 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BREACH-0S // Red-Team Arena</title>
  <style>
    /* ── Reset & Tokens ─────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:       #080b10;
      --bg2:      #0d1117;
      --bg3:      #131922;
      --border:   #1e2d40;
      --accent:   #00f5a0;
      --accent2:  #00c8f5;
      --danger:   #f5004a;
      --warn:     #f5a500;
      --txt:      #ccd6f6;
      --txt-dim:  #4a5568;
      --txt-mute: #8892a4;
      --radius:   6px;
      --mono:     'Courier New', Courier, monospace;
    }

    html, body { height: 100%; }

    body {
      background: var(--bg);
      color: var(--txt);
      font-family: var(--mono);
      font-size: 13px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── Scrollbar ──────────────────────────────────────────── */
    ::-webkit-scrollbar { width: 5px; height: 5px; }
    ::-webkit-scrollbar-track { background: var(--bg2); }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* ── Header ─────────────────────────────────────────────── */
    header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 10px 18px;
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .logo {
      font-size: 17px;
      font-weight: bold;
      letter-spacing: 3px;
      color: var(--accent);
      text-shadow: 0 0 12px var(--accent);
    }

    .logo span { color: var(--accent2); }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 2px 10px;
      border-radius: 20px;
      font-size: 11px;
      border: 1px solid var(--border);
      color: var(--txt-mute);
    }

    .dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--txt-dim);
    }
    .dot.active { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
    .dot.done   { background: var(--warn);   box-shadow: 0 0 6px var(--warn); }

    .header-right {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--txt-dim);
      font-size: 11px;
    }

    #ep-id { color: var(--accent2); }

    /* ── Main layout ─────────────────────────────────────────── */
    main {
      display: grid;
      grid-template-columns: 260px 1fr 230px;
      flex: 1;
      min-height: 0;
    }

    /* ── Panels ──────────────────────────────────────────────── */
    .panel {
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .panel:last-child { border-right: none; }

    .panel-title {
      padding: 8px 14px;
      font-size: 10px;
      letter-spacing: 2px;
      color: var(--txt-dim);
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
      text-transform: uppercase;
    }

    .panel-body {
      flex: 1;
      overflow-y: auto;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    /* ── Form controls ───────────────────────────────────────── */
    label {
      display: block;
      font-size: 10px;
      letter-spacing: 1px;
      color: var(--txt-dim);
      text-transform: uppercase;
      margin-bottom: 5px;
    }

    select, textarea, input[type="range"] {
      width: 100%;
      background: var(--bg3);
      border: 1px solid var(--border);
      color: var(--txt);
      font-family: var(--mono);
      font-size: 12px;
      border-radius: var(--radius);
      outline: none;
      transition: border-color .15s;
    }

    select:focus, textarea:focus {
      border-color: var(--accent2);
    }

    select {
      padding: 7px 10px;
      cursor: pointer;
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a5568'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
    }

    textarea {
      padding: 8px 10px;
      resize: none;
      line-height: 1.5;
    }

    textarea.error {
      border-color: var(--danger);
      box-shadow: 0 0 8px var(--danger);
      animation: shake .3s ease;
    }

    @keyframes shake {
      0%,100% { transform: translateX(0); }
      25%      { transform: translateX(-5px); }
      75%      { transform: translateX(5px); }
    }

    /* Intensity slider */
    .slider-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    input[type="range"] {
      -webkit-appearance: none;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      border: none;
      cursor: pointer;
      flex: 1;
    }

    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 14px; height: 14px;
      border-radius: 50%;
      background: var(--accent2);
      box-shadow: 0 0 6px var(--accent2);
      cursor: pointer;
    }

    .slider-val {
      min-width: 32px;
      text-align: right;
      color: var(--accent2);
      font-size: 12px;
    }

    /* ── Buttons ─────────────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 14px;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 1px;
      border-radius: var(--radius);
      border: 1px solid transparent;
      cursor: pointer;
      transition: all .15s;
      text-transform: uppercase;
    }

    .btn:disabled { opacity: 0.35; cursor: not-allowed; }

    .btn-primary {
      background: transparent;
      border-color: var(--accent);
      color: var(--accent);
    }
    .btn-primary:not(:disabled):hover {
      background: var(--accent);
      color: var(--bg);
      box-shadow: 0 0 14px var(--accent);
    }

    .btn-danger {
      background: transparent;
      border-color: var(--danger);
      color: var(--danger);
    }
    .btn-danger:not(:disabled):hover {
      background: var(--danger);
      color: #fff;
      box-shadow: 0 0 14px var(--danger);
    }

    .btn-secondary {
      background: transparent;
      border-color: var(--border);
      color: var(--txt-mute);
    }
    .btn-secondary:not(:disabled):hover {
      border-color: var(--accent2);
      color: var(--accent2);
    }

    .btn-full { width: 100%; }

    /* ── Conversation ────────────────────────────────────────── */
    #conversation {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    .empty-state {
      margin: auto;
      text-align: center;
      color: var(--txt-dim);
      line-height: 2;
    }

    .empty-state .big { font-size: 32px; margin-bottom: 10px; }

    .msg {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-width: 88%;
      animation: fadeIn .2s ease;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .msg.attacker { align-self: flex-end; }
    .msg.defender { align-self: flex-start; }
    .msg.system   { align-self: center; max-width: 100%; }

    .msg-label {
      font-size: 10px;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .msg.attacker .msg-label { color: var(--danger); text-align: right; }
    .msg.defender .msg-label { color: var(--accent2); }
    .msg.system   .msg-label { color: var(--txt-dim); text-align: center; }

    .msg-bubble {
      padding: 9px 13px;
      border-radius: var(--radius);
      line-height: 1.6;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .msg.attacker .msg-bubble {
      background: #1a0a12;
      border: 1px solid #3d1020;
      color: #f5c6d0;
      border-radius: var(--radius) 0 var(--radius) var(--radius);
    }

    .msg.defender .msg-bubble {
      background: #071620;
      border: 1px solid #0d3050;
      color: #a8d8ea;
      border-radius: 0 var(--radius) var(--radius) var(--radius);
    }

    .msg.system .msg-bubble {
      background: var(--bg2);
      border: 1px solid var(--border);
      color: var(--txt-dim);
      font-size: 11px;
      text-align: center;
    }

    .msg-meta {
      font-size: 10px;
      color: var(--txt-dim);
      display: flex;
      gap: 10px;
    }

    .msg.attacker .msg-meta { justify-content: flex-end; }

    .meta-chip {
      padding: 1px 6px;
      border-radius: 3px;
      background: var(--bg3);
      border: 1px solid var(--border);
    }

    /* ── Metrics panel ───────────────────────────────────────── */
    .metric-block { display: flex; flex-direction: column; gap: 4px; }

    .metric-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .metric-name {
      font-size: 10px;
      letter-spacing: 1px;
      color: var(--txt-dim);
      text-transform: uppercase;
    }

    .metric-val {
      font-size: 14px;
      font-weight: bold;
    }

    .bar-track {
      height: 5px;
      background: var(--bg3);
      border-radius: 3px;
      overflow: hidden;
    }

    .bar-fill {
      height: 100%;
      border-radius: 3px;
      transition: width .4s ease;
    }

    .bar-fill.attack  { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
    .bar-fill.defense { background: var(--accent);  box-shadow: 0 0 6px var(--accent); }
    .bar-fill.novelty { background: var(--accent2); box-shadow: 0 0 6px var(--accent2); }
    .bar-fill.reward  { background: var(--warn);    box-shadow: 0 0 6px var(--warn); }

    .divider {
      height: 1px;
      background: var(--border);
    }

    .big-stat {
      text-align: center;
      padding: 6px 0;
    }

    .big-stat .num {
      font-size: 28px;
      font-weight: bold;
      color: var(--accent2);
      text-shadow: 0 0 10px var(--accent2);
    }

    .big-stat .lbl {
      font-size: 10px;
      letter-spacing: 1px;
      color: var(--txt-dim);
      text-transform: uppercase;
    }

    /* History table */
    .hist-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 10px;
    }

    .hist-table th {
      color: var(--txt-dim);
      text-align: left;
      padding: 3px 4px;
      border-bottom: 1px solid var(--border);
      text-transform: uppercase;
      letter-spacing: .5px;
    }

    .hist-table td {
      padding: 4px 4px;
      border-bottom: 1px solid #1a2030;
      color: var(--txt-mute);
      vertical-align: middle;
    }

    .hist-table tr:last-child td { border-bottom: none; }

    .mini-bar {
      display: inline-block;
      height: 3px;
      background: var(--accent);
      border-radius: 2px;
      vertical-align: middle;
    }

    /* ── Grade modal ─────────────────────────────────────────── */
    #grade-overlay {
      position: fixed; inset: 0;
      background: rgba(8,11,16,.85);
      backdrop-filter: blur(4px);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }

    #grade-overlay.show { display: flex; }

    .grade-card {
      background: var(--bg2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 28px 32px;
      min-width: 340px;
      max-width: 440px;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .grade-title {
      font-size: 12px;
      letter-spacing: 3px;
      color: var(--txt-dim);
      text-transform: uppercase;
    }

    .grade-letter {
      font-size: 72px;
      font-weight: bold;
      text-align: center;
      line-height: 1;
    }

    .grade-A { color: var(--accent);  text-shadow: 0 0 20px var(--accent); }
    .grade-B { color: var(--accent2); text-shadow: 0 0 20px var(--accent2); }
    .grade-C { color: var(--warn);    text-shadow: 0 0 20px var(--warn); }
    .grade-D, .grade-F { color: var(--danger); text-shadow: 0 0 20px var(--danger); }

    .grade-score {
      text-align: center;
      font-size: 14px;
      color: var(--txt-mute);
    }

    .grade-metrics {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .grade-metric-row {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--txt-mute);
    }

    .grade-metric-row span:last-child { color: var(--accent2); }

    /* ── Feedback bar ────────────────────────────────────────── */
    #feedback-bar {
      padding: 6px 18px;
      background: var(--bg2);
      border-top: 1px solid var(--border);
      font-size: 11px;
      color: var(--txt-dim);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 0;
    }

    #feedback-bar .fb-label {
      color: var(--accent);
      margin-right: 8px;
      letter-spacing: 1px;
    }

    /* ── Loading spinner ─────────────────────────────────────── */
    .spinner {
      display: inline-block;
      width: 12px; height: 12px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin .6s linear infinite;
    }

    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Toast ───────────────────────────────────────────────── */
    #toast {
      position: fixed;
      bottom: 40px; left: 50%;
      transform: translateX(-50%) translateY(20px);
      background: var(--bg3);
      border: 1px solid var(--border);
      color: var(--txt);
      padding: 9px 18px;
      border-radius: var(--radius);
      font-size: 12px;
      opacity: 0;
      transition: all .3s ease;
      z-index: 200;
      pointer-events: none;
    }

    #toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  </style>
</head>
<body>

<!-- ── Header ─────────────────────────────────────────────────── -->
<header>
  <div class="logo">BREACH<span>-0S</span></div>
  <div class="pill">
    <div class="dot" id="status-dot"></div>
    <span id="status-txt">IDLE</span>
  </div>
  <div class="pill">
    Turn <span id="turn-disp" style="color:var(--accent2);margin-left:4px">—</span>
    &nbsp;/&nbsp;
    <span id="max-turns-disp">—</span>
  </div>
  <div class="header-right">
    EP &nbsp;<span id="ep-id">—</span>
  </div>
</header>

<!-- ── Main ───────────────────────────────────────────────────── -->
<main>

  <!-- LEFT: Controls -->
  <aside class="panel">
    <div class="panel-title">// Attack Config</div>
    <div class="panel-body">

      <div>
        <label>Strategy</label>
        <select id="strategy">
          <option value="roleplay">Roleplay</option>
          <option value="hypothetical">Hypothetical</option>
          <option value="injection">Injection</option>
          <option value="persona_switch">Persona Switch</option>
          <option value="authority_claim">Authority Claim</option>
          <option value="encoding">Encoding</option>
          <option value="multi_turn">Multi-Turn</option>
        </select>
      </div>

      <div>
        <label>Target Category</label>
        <select id="category">
          <option value="privacy">Privacy</option>
          <option value="misinformation">Misinformation</option>
          <option value="harmful_instructions">Harmful Instructions</option>
          <option value="manipulation">Manipulation</option>
          <option value="illegal_activity">Illegal Activity</option>
        </select>
      </div>

      <div>
        <label>Intensity</label>
        <div class="slider-row">
          <input type="range" id="intensity" min="0" max="1" step="0.05" value="0.5" />
          <span class="slider-val" id="intensity-val">0.50</span>
        </div>
      </div>

      <div>
        <label>Framing <span style="color:var(--danger)">*</span> <span style="color:var(--txt-dim)">(max 500)</span></label>
        <textarea id="framing" rows="6" placeholder="Type your attack message here, then click Execute Attack…"></textarea>
      </div>

      <button class="btn btn-primary btn-full" id="btn-step" disabled>
        &#x25B6; Execute Attack
      </button>

      <button class="btn btn-secondary btn-full" id="btn-auto-attack" disabled style="margin-top: 10px;">
        &#x2699; Automated Attack
      </button>

      <div class="divider"></div>

      <button class="btn btn-secondary btn-full" id="btn-reset">
        &#x21BA; New Episode
      </button>

      <button class="btn btn-danger btn-full" id="btn-grade" disabled>
        &#x2605; Grade Episode
      </button>

    </div>
  </aside>

  <!-- CENTER: Conversation -->
  <section class="panel" style="border-right:1px solid var(--border)">
    <div class="panel-title">// Conversation Feed</div>
    <div id="conversation">
      <div class="empty-state">
        <div class="big">&#x26A1;</div>
        <div>Start a new episode to begin<br/>red-teaming the defender.</div>
      </div>
    </div>
  </section>

  <!-- RIGHT: Metrics -->
  <aside class="panel" style="border-right:none">
    <div class="panel-title">// Live Metrics</div>
    <div class="panel-body">

      <div class="big-stat">
        <div class="num" id="m-turn">0</div>
        <div class="lbl">Turn</div>
      </div>

      <div class="divider"></div>

      <div class="metric-block">
        <div class="metric-header">
          <span class="metric-name">Attack Success</span>
          <span class="metric-val" id="m-attack" style="color:var(--danger)">—</span>
        </div>
        <div class="bar-track"><div class="bar-fill attack" id="bar-attack" style="width:0%"></div></div>
      </div>

      <div class="metric-block">
        <div class="metric-header">
          <span class="metric-name">Defense Score</span>
          <span class="metric-val" id="m-defense" style="color:var(--accent)">—</span>
        </div>
        <div class="bar-track"><div class="bar-fill defense" id="bar-defense" style="width:0%"></div></div>
      </div>

      <div class="metric-block">
        <div class="metric-header">
          <span class="metric-name">Novelty</span>
          <span class="metric-val" id="m-novelty" style="color:var(--accent2)">—</span>
        </div>
        <div class="bar-track"><div class="bar-fill novelty" id="bar-novelty" style="width:0%"></div></div>
      </div>

      <div class="metric-block">
        <div class="metric-header">
          <span class="metric-name">Reward</span>
          <span class="metric-val" id="m-reward" style="color:var(--warn)">—</span>
        </div>
        <div class="bar-track"><div class="bar-fill reward" id="bar-reward" style="width:0%"></div></div>
      </div>

      <div class="divider"></div>

      <div class="metric-name" style="margin-bottom:6px">Turn History</div>
      <div style="overflow-x:auto">
        <table class="hist-table">
          <thead>
            <tr>
              <th>#</th>
              <th>Atk</th>
              <th>Def</th>
              <th>Nov</th>
            </tr>
          </thead>
          <tbody id="hist-body"></tbody>
        </table>
      </div>

    </div>
  </aside>

</main>

<!-- ── Feedback bar ────────────────────────────────────────────── -->
<div id="feedback-bar">
  <span class="fb-label">SYS</span>
  <span id="feedback-txt">Waiting for episode…</span>
</div>

<!-- ── Grade overlay ──────────────────────────────────────────── -->
<div id="grade-overlay">
  <div class="grade-card">
    <div class="grade-title">// Episode Grade</div>
    <div class="grade-letter" id="grade-letter">—</div>
    <div class="grade-score" id="grade-score"></div>
    <div class="grade-metrics" id="grade-metrics"></div>
    <button class="btn btn-secondary btn-full" onclick="closeGrade()">Close</button>
  </div>
</div>

<!-- ── Toast ──────────────────────────────────────────────────── -->
<div id="toast"></div>

<script>
  /* ── Config ──────────────────────────────────────────────── */
  const API = '';   // same origin; change to e.g. 'http://localhost:8000' for dev

  /* ── State ───────────────────────────────────────────────── */
  let episodeActive = false;
  let episodeDone   = false;

  /* ── DOM refs ────────────────────────────────────────────── */
  const conv        = document.getElementById('conversation');
  const btnStep     = document.getElementById('btn-step');
  const btnAutoAttack = document.getElementById('btn-auto-attack');
  const btnReset    = document.getElementById('btn-reset');
  const btnGrade    = document.getElementById('btn-grade');
  const statusDot   = document.getElementById('status-dot');
  const statusTxt   = document.getElementById('status-txt');
  const intensityIn = document.getElementById('intensity');
  const intensityVal= document.getElementById('intensity-val');
  const histBody    = document.getElementById('hist-body');
  const feedbackTxt = document.getElementById('feedback-txt');

  /* ── Intensity live label ────────────────────────────────── */
  intensityIn.addEventListener('input', () => {
    intensityVal.textContent = parseFloat(intensityIn.value).toFixed(2);
  });

  /* ── API helpers ─────────────────────────────────────────── */
  async function api(method, path, body) {
    const opts = { method, headers: { 'Content-Type': 'application/json' } };
    if (body) opts.body = JSON.stringify(body);
    const res = await fetch(API + path, opts);
    if (!res.ok) {
      const err = await res.json().catch(() => ({ detail: res.statusText }));
      throw new Error(err.detail || res.statusText);
    }
    return res.json();
  }

  /* ── Status indicator ────────────────────────────────────── */
  function setStatus(state) {
    statusDot.className = 'dot ' + state;
    statusTxt.textContent = state === 'active' ? 'ACTIVE'
                          : state === 'done'   ? 'DONE'
                          :                      'IDLE';
  }

  /* ── Header updates ──────────────────────────────────────── */
  function updateHeader(obs, maxTurns) {
    document.getElementById('ep-id').textContent = obs.episode_id.slice(0, 8) + '…';
    document.getElementById('turn-disp').textContent = obs.turn;
    if (maxTurns) document.getElementById('max-turns-disp').textContent = maxTurns;
  }

  /* ── Metrics panel ───────────────────────────────────────── */
  function updateMetrics(obs, reward) {
    const fmt = v => (v * 100).toFixed(0) + '%';

    document.getElementById('m-turn').textContent    = obs.turn;
    document.getElementById('m-attack').textContent  = fmt(obs.attack_success_estimate);
    document.getElementById('m-defense').textContent = fmt(obs.defense_score);
    document.getElementById('m-novelty').textContent = fmt(obs.novelty_score);
    document.getElementById('m-reward').textContent  = (reward ?? 0).toFixed(3);

    document.getElementById('bar-attack').style.width  = (obs.attack_success_estimate * 100) + '%';
    document.getElementById('bar-defense').style.width = (obs.defense_score * 100) + '%';
    document.getElementById('bar-novelty').style.width = (obs.novelty_score * 100) + '%';

    // Normalize reward: assume it lives in roughly [-1, 1] → map to 0-100%
    const rNorm = Math.max(0, Math.min(1, (reward + 1) / 2));
    document.getElementById('bar-reward').style.width = (rNorm * 100) + '%';

    feedbackTxt.textContent = obs.feedback || '—';

    // Append history row
    const tr = document.createElement('tr');
    tr.innerHTML = `
      <td style="color:var(--txt-mute)">${obs.turn}</td>
      <td><span class="mini-bar" style="width:${(obs.attack_success_estimate*40).toFixed(0)}px;background:var(--danger)"></span></td>
      <td><span class="mini-bar" style="width:${(obs.defense_score*40).toFixed(0)}px;background:var(--accent)"></span></td>
      <td><span class="mini-bar" style="width:${(obs.novelty_score*40).toFixed(0)}px;background:var(--accent2)"></span></td>
    `;
    histBody.appendChild(tr);
  }

  /* ── Conversation helpers ────────────────────────────────── */
  function clearConversation() {
    conv.innerHTML = '';
  }

  function appendSystemMsg(text) {
    const el = document.createElement('div');
    el.className = 'msg system';
    el.innerHTML = `<div class="msg-bubble">${escHtml(text)}</div>`;
    conv.appendChild(el);
    conv.scrollTop = conv.scrollHeight;
  }

  function appendAttackerMsg(framing, strategy, category, intensity) {
    const el = document.createElement('div');
    el.className = 'msg attacker';
    el.innerHTML = `
      <div class="msg-label">ATTACKER</div>
      <div class="msg-bubble">${escHtml(framing)}</div>
      <div class="msg-meta">
        <span class="meta-chip">${strategy}</span>
        <span class="meta-chip">${category}</span>
        <span class="meta-chip">&#x26A1; ${intensity}</span>
      </div>`;
    conv.appendChild(el);
    conv.scrollTop = conv.scrollHeight;
  }

  function appendDefenderMsg(text, attackScore, defenseScore) {
    const el = document.createElement('div');
    el.className = 'msg defender';
    el.innerHTML = `
      <div class="msg-label">DEFENDER</div>
      <div class="msg-bubble">${escHtml(text)}</div>
      <div class="msg-meta">
        <span class="meta-chip" style="color:var(--danger)">atk ${(attackScore*100).toFixed(0)}%</span>
        <span class="meta-chip" style="color:var(--accent)">def ${(defenseScore*100).toFixed(0)}%</span>
      </div>`;
    conv.appendChild(el);
    conv.scrollTop = conv.scrollHeight;
  }

  function escHtml(str) {
    return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
              .replace(/"/g,'&quot;').replace(/'/g,'&#039;');
  }

  /* ── Reset episode ───────────────────────────────────────── */
  btnReset.addEventListener('click', resetEpisode);

  async function resetEpisode() {
    setLoading(btnReset, true);
    try {
      const data = await api('POST', '/reset');
      const obs  = data.observation;

      clearConversation();
      histBody.innerHTML = '';
      document.getElementById('hist-body').innerHTML = '';

      // Reset metrics display
      ['m-attack','m-defense','m-novelty','m-reward'].forEach(id => {
        document.getElementById(id).textContent = '—';
      });
      ['bar-attack','bar-defense','bar-novelty','bar-reward'].forEach(id => {
        document.getElementById(id).style.width = '0%';
      });
      document.getElementById('m-turn').textContent = '0';

      updateHeader(obs, null);

      // Fetch max_turns from /state
      const state = await api('GET', '/state');
      document.getElementById('max-turns-disp').textContent = state.max_turns;

      episodeActive = true;
      episodeDone   = false;
      setStatus('active');
      btnStep.disabled  = false;
      btnAutoAttack.disabled = false;
      btnGrade.disabled = true;

      appendSystemMsg(`Episode ${obs.episode_id.slice(0,8)}… started. ${state.max_turns} turns max.`);
      feedbackTxt.textContent = 'Episode initialized. Type your attack in the Framing box and click Execute Attack.';

      document.getElementById('framing').focus();
      toast('New episode started — type your attack in the Framing box');
    } catch (e) {
      toast('Error: ' + e.message, true);
    } finally {
      setLoading(btnReset, false);
    }
  }

  /* ── Execute attack step ─────────────────────────────────── */
  async function executeStep(calledFromAuto = false) {
    const framingEl = document.getElementById('framing');
    const framing = framingEl.value.trim();
    if (!framing) {
      framingEl.classList.add('error');
      framingEl.focus();
      toast('Type your attack message in the Framing box first', true);
      setTimeout(() => framingEl.classList.remove('error'), 600);
      return;
    }
    if (framing.length > 500) { toast('Framing too long (max 500)', true); return; }

    const action = {
      strategy_type:   document.getElementById('strategy').value,
      target_category: document.getElementById('category').value,
      intensity:        parseFloat(intensityIn.value),
      framing,
    };

    appendAttackerMsg(framing, action.strategy_type, action.target_category, action.intensity.toFixed(2));

    if (!calledFromAuto) {
      setLoading(btnStep, true);
      btnStep.disabled = true;
    }

    try {
      const data = await api('POST', '/step', action);
      const obs  = data.observation;
      const rw   = data.reward;

      appendDefenderMsg(obs.defender_response, obs.attack_success_estimate, obs.defense_score);
      updateMetrics(obs, rw);
      updateHeader(obs, null);
      document.getElementById('framing').value = '';

      if (obs.episode_done) {
        episodeDone   = true;
        episodeActive = false;
        setStatus('done');
        btnStep.disabled      = true;
        btnAutoAttack.disabled = true;
        btnGrade.disabled     = false;
        appendSystemMsg('Episode complete. Grade your performance.');
        feedbackTxt.textContent = obs.feedback;
      }
    } catch (e) {
      toast('Error: ' + e.message, true);
      if (!calledFromAuto) btnStep.disabled = false;
    } finally {
      if (!calledFromAuto) {
        setLoading(btnStep, false);
        if (episodeDone) btnStep.disabled = true;
      }
    }
  }

  btnStep.addEventListener('click', () => executeStep(false));

  /* ── Execute auto attack ─────────────────────────────────── */
  btnAutoAttack.addEventListener('click', executeAutoAttack);

  async function executeAutoAttack() {
    const strategy = document.getElementById('strategy').value;
    const category = document.getElementById('category').value;

    setLoading(btnAutoAttack, true);
    btnStep.disabled      = true;
    btnAutoAttack.disabled = true;

    try {
      const data = await api('POST', '/auto-attack', { strategy_type: strategy, target_category: category });
      document.getElementById('framing').value = data.framing;
      await executeStep(true);
    } catch (e) {
      toast('Error generating attack: ' + e.message, true);
    } finally {
      setLoading(btnAutoAttack, false);
      if (!episodeDone) {
        btnStep.disabled      = false;
        btnAutoAttack.disabled = false;
      }
    }
  }

  /* ── Grade episode ───────────────────────────────────────── */
  btnGrade.addEventListener('click', gradeEpisode);

  async function gradeEpisode() {
    setLoading(btnGrade, true);
    try {
      const data = await api('POST', '/grade');
      showGrade(data);
    } catch (e) {
      toast('Error: ' + e.message, true);
    } finally {
      setLoading(btnGrade, false);
    }
  }

  function showGrade(data) {
    const letter = data.letter_grade || '?';
    const score  = data.overall_score ?? 0;

    const letterEl = document.getElementById('grade-letter');
    letterEl.textContent = letter;
    letterEl.className   = 'grade-letter grade-' + letter[0];

    document.getElementById('grade-score').textContent =
      `Score: ${(score * 100).toFixed(1)}%  ·  ${data.summary || ''}`;

    const metricsEl = document.getElementById('grade-metrics');
    metricsEl.innerHTML = '';

    const m = data.metrics || {};
    const displayKeys = {
      easy:               'Easy Score',
      medium:             'Medium Score',
      hard:               'Hard Score',
      turns:              'Turns Completed',
      unique_strategies:  'Unique Strategies',
      unique_categories:  'Unique Categories',
    };

    for (const [key, label] of Object.entries(displayKeys)) {
      if (m[key] !== undefined) {
        const val = typeof m[key] === 'number' && m[key] <= 1
          ? (m[key] * 100).toFixed(1) + '%'
          : m[key];
        const row = document.createElement('div');
        row.className = 'grade-metric-row';
        row.innerHTML = `<span>${label}</span><span>${val}</span>`;
        metricsEl.appendChild(row);
      }
    }

    document.getElementById('grade-overlay').classList.add('show');
  }

  function closeGrade() {
    document.getElementById('grade-overlay').classList.remove('show');
  }

  // Close overlay on background click
  document.getElementById('grade-overlay').addEventListener('click', e => {
    if (e.target === e.currentTarget) closeGrade();
  });

  /* ── Loading state helper ────────────────────────────────── */
  function setLoading(btn, loading) {
    if (loading) {
      btn._origHTML = btn.innerHTML;
      btn.innerHTML = '<span class="spinner"></span>';
      btn.disabled  = true;
    } else {
      btn.innerHTML = btn._origHTML || btn.innerHTML;
      btn.disabled  = false;
    }
  }

  /* ── Toast ───────────────────────────────────────────────── */
  let toastTimer;
  function toast(msg, isErr = false) {
    const el = document.getElementById('toast');
    el.textContent = msg;
    el.style.borderColor = isErr ? 'var(--danger)' : 'var(--accent)';
    el.classList.add('show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => el.classList.remove('show'), 2800);
  }

  /* ── On load: check health ───────────────────────────────── */
  (async () => {
    try {
      await api('GET', '/health');
      toast('API connected');
    } catch {
      toast('Cannot reach API — is the server running?', true);
    }
  })();
</script>
</body>
</html>