{% extends "base.html" %}
{% from "_macros.html" import best_badge, best_badge_dual, score_view_toggle, submission_badge, submission_badge_dual, agent_chip, model_chip, run_status, download_icon %}
{% block title %}{{ run.run_id }} · {{ run.task }} · SForge{% endblock %}
{% block content %}

{# ── Breadcrumb ── #}
<div class="mb-6 flex items-center gap-2 text-sm">
  <a href="/" class="text-slate-400 hover:text-indigo-600 transition-colors">&larr; runs</a>
  <span class="text-slate-300">/</span>
  <a href="/task/{{ run.task }}"
     class="font-mono text-lg font-semibold tracking-tight text-slate-900 hover:text-indigo-600 transition-colors">{{ run.task }}</a>
  <span class="text-slate-300">/</span>
  <span class="font-mono font-medium text-slate-700">{{ run.run_id }}</span>
</div>

{# ── Header ── #}
<header class="card p-6 mb-6">
  <div class="flex items-start justify-between gap-3 mb-5">
    <div class="flex flex-wrap items-center gap-2">
      <h1 class="text-xl font-bold tracking-tight font-mono">{{ run.run_id }}</h1>
      <span class="chip bg-violet-50 text-violet-600 font-medium">{{ run.task }}</span>
      {{ agent_chip(run.agent) }}
      {{ model_chip(run.model) }}
      {{ run_status(run) }}
      {% if run.score_direction == "minimize" %}<span class="chip bg-sky-50 text-sky-600 border border-sky-200">minimize</span>{% endif %}
    </div>
    {% if has_trajectory %}
    <a href="/run/{{ run.run_id }}/{{ run.task }}/trajectory"
       class="text-sm px-4 py-2 rounded-lg bg-slate-900 text-white hover:bg-slate-800 transition-colors shrink-0 font-medium">
      Trajectory &rarr;
    </a>
    {% endif %}
    <div class="flex items-center gap-1 shrink-0">
      {{ download_icon("/run/" ~ run.run_id ~ "/" ~ run.task ~ "/download", "task .tar.gz", "Download entire task dir (logs + submissions + final archive) as .tar.gz") }}
      {{ download_icon("/run/" ~ run.run_id ~ "/" ~ run.task ~ "/agent-output", "agent log", "Download raw agent_output.txt (the agent's full conversation log)") }}
    </div>
  </div>
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-5 text-sm">
    <div>
      <div class="text-[11px] uppercase tracking-wider text-slate-400 mb-1 font-medium">{% if run.has_score %}Best score{% else %}Best pass rate{% endif %}</div>
      <div class="text-xl font-bold">{{ best_badge_dual(run) }}
        {% if run.best_round %}<span class="text-slate-400 text-xs font-normal ml-1.5">at {{ run.best_round }}</span>{% endif %}
      </div>
    </div>
    <div>
      <div class="text-[11px] uppercase tracking-wider text-slate-400 mb-1 font-medium">Rounds</div>
      <div class="text-xl font-bold font-mono">{{ run.total_rounds }}</div>
    </div>
    <div>
      <div class="text-[11px] uppercase tracking-wider text-slate-400 mb-1 font-medium">Runtime</div>
      <div class="text-xl font-bold font-mono">{{ format_duration(run.runtime_seconds) }}</div>
    </div>
    <div>
      <div class="text-[11px] uppercase tracking-wider text-slate-400 mb-1 font-medium">Archive</div>
      <div class="text-xl font-bold font-mono">
        {%- if run.archive_size_bytes -%}{{ "%.1f"|format(run.archive_size_bytes/1024) }} KB
        {%- else -%}<span class="text-slate-300">&mdash;</span>{%- endif -%}
      </div>
    </div>
  </div>
</header>

{# ── Evolution Timeline ── #}
{% set has_auto = run.submissions | selectattr("kind", "equalto", "auto") | list | length > 0 %}

{% if run.submissions %}
<section class="card overflow-hidden mb-6" style="width:90vw;max-width:90vw;margin-left:calc(50% - 45vw);border-radius:0.5rem;">
  <div class="px-8 py-3 border-b border-slate-100 flex items-center justify-between flex-wrap gap-2">
    <h2 class="text-sm font-semibold text-slate-700">Evolution Timeline</h2>
    <div class="flex items-center gap-3">
      {% if run.has_rescaled %}<span class="text-xs">{{ score_view_toggle() }}</span>{% endif %}
      <label class="text-xs flex items-center gap-1.5 text-slate-500 cursor-pointer select-none">
        <input type="checkbox" id="toggle-labels" class="rounded border-slate-300">
        <span>Labels</span>
      </label>
      <label class="text-xs flex items-center gap-1.5 text-slate-500 cursor-pointer select-none">
        <input type="checkbox" id="toggle-raw" checked class="rounded border-slate-300">
        <span>Raw</span>
      </label>
      {% if has_auto %}
      <label class="text-xs flex items-center gap-1.5 text-slate-500 cursor-pointer select-none">
        <input type="checkbox" id="toggle-auto" checked class="rounded border-slate-300">
        <span>Auto-eval</span>
      </label>
      {% endif %}
      <div class="relative" id="smooth-wrap">
        <button type="button" id="smooth-btn"
                class="text-xs flex items-center gap-1.5 px-2 py-1 rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 transition-colors">
          <span>Smooth:</span>
          <span id="smooth-label" class="font-mono text-slate-700">off</span>
          <svg class="w-3 h-3 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
        </button>
        <div id="smooth-pop" class="hidden absolute right-0 top-full mt-1 z-20 bg-white border border-slate-200 rounded-lg shadow-lg p-3 w-64 text-xs space-y-2">
          <div class="flex items-center gap-2">
            <span class="text-slate-500 w-12">Mode</span>
            <select id="smooth-mode" class="flex-1 border border-slate-200 rounded px-1.5 py-0.5 bg-white">
              <option value="off" selected>Off</option>
              <option value="ema">EMA (exp. moving avg)</option>
              <option value="sma">SMA (simple moving avg)</option>
            </select>
          </div>
          <div id="smooth-ema-row" class="flex items-center gap-2">
            <span class="text-slate-500 w-12">α</span>
            <input type="range" id="smooth-alpha" min="0" max="0.98" step="0.02" value="0.6" class="flex-1">
            <span id="smooth-alpha-val" class="font-mono text-[10px] text-slate-500 w-8 text-right">0.60</span>
          </div>
          <div id="smooth-sma-row" class="hidden flex items-center gap-2">
            <span class="text-slate-500 w-12">Window</span>
            <input type="range" id="smooth-window" min="2" max="200" step="1" value="30" class="flex-1">
            <span id="smooth-window-val" class="font-mono text-[10px] text-slate-500 w-8 text-right">30</span>
          </div>
        </div>
      </div>
      {% if has_auto %}
      <span class="text-[10px] text-slate-400 flex items-center gap-2" title="Submission kind">
        <span class="flex items-center gap-1"><svg class="w-2.5 h-2.5" viewBox="0 0 10 10"><circle cx="5" cy="5" r="4" fill="#64748b"/></svg>agent</span>
        <span class="flex items-center gap-1"><svg class="w-2.5 h-2.5" viewBox="0 0 10 10"><polygon points="5,1 9,9 1,9" fill="#64748b"/></svg>auto</span>
      </span>
      {% endif %}
      <span class="text-[11px] text-slate-400">scroll to zoom &middot; drag to pan</span>
    </div>
  </div>
  <div class="px-4" style="overflow:visible;">
    <div id="evolution-chart" style="width:100%;height:70vh;min-height:500px;overflow:visible;"></div>
  </div>
  <div id="milestone-detail" class="hidden border-t border-slate-100 px-5 py-4"></div>
</section>
{% endif %}

{# ── Submissions (expandable rows with inline diff) ── #}
<section class="card overflow-hidden mb-6">
  <div class="px-5 py-3 border-b border-slate-100 flex items-center justify-between">
    <h2 class="text-sm font-semibold text-slate-700">Submissions</h2>
    <span class="text-xs text-slate-400">{{ run.submissions|length }}</span>
  </div>
  {% if run.submissions %}
  <div class="divide-y divide-slate-50">
    {% for s in run.submissions %}
    <details class="submission-item group" data-kind="{{ s.kind }}">
      <summary class="flex items-center gap-3 px-5 py-2.5 cursor-pointer hover:bg-slate-50/50 transition-colors select-none">
        <span class="w-20 shrink-0 mono text-xs {% if s.kind == 'auto' %}text-cyan-600{% else %}text-indigo-600{% endif %}">
          {{ s.round_label }}
        </span>
        <span class="chip text-[10px] {% if s.kind == 'auto' %}bg-cyan-50 text-cyan-700{% elif s.kind == 'game' %}bg-purple-50 text-purple-700{% else %}bg-indigo-50 text-indigo-700{% endif %}">{{ s.kind }}</span>
        {{ submission_badge_dual(s, run) }}
        {% if s.round_label == run.best_round %}<span class="chip bg-emerald-50 text-emerald-700 text-[10px]">best</span>{% endif %}
        <span class="flex-1"></span>
        <span class="text-[11px] text-slate-500 mono">
          {%- if s.kind == "game" -%}{{ s.runtime_seconds|int }} moves
          {%- else -%}{{ s.passed }}/{{ s.total_tests }} passed
          {%- endif -%}
        </span>
        <span class="text-[11px] text-slate-400 mono">{{ format_duration(s.runtime_seconds) }}</span>
        <svg class="w-4 h-4 text-slate-400 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
      </summary>
      <div class="px-5 py-3 bg-slate-50/50 border-t border-slate-100">
        <div class="flex items-center gap-3 mb-3 text-xs">
          <a href="/run/{{ run.run_id }}/{{ run.task }}/submission/{{ s.round_label }}"
             class="text-indigo-500 hover:underline">test details &rarr;</a>
          <a href="/run/{{ run.run_id }}/{{ run.task }}/submission/{{ s.round_label }}/raw"
             target="_blank" class="text-slate-400 hover:text-slate-600">raw log &nearr;</a>
        </div>
        <div hx-get="/run/{{ run.run_id }}/{{ run.task }}/submission/{{ s.round_label }}/diff"
             hx-trigger="revealed"
             hx-swap="innerHTML"
             class="overflow-auto max-h-[50vh]">
          <span class="text-xs text-slate-400">Loading diff...</span>
        </div>
      </div>
    </details>
    {% endfor %}
  </div>
  {% else %}
  <div class="p-6 text-center text-slate-400 text-sm">No submissions.</div>
  {% endif %}
</section>

{# ── Diagnostics ── #}
<section class="card overflow-hidden mb-6">
  <div class="px-5 py-3 border-b border-slate-100 flex items-center justify-between flex-wrap gap-2">
    <h2 class="text-sm font-semibold text-slate-700">Diagnostics</h2>
    <div class="flex items-center gap-3 text-[11px]">
      {% if has_trajectory %}
        <a href="/run/{{ run.run_id }}/{{ run.task }}/trace" target="_blank" class="text-indigo-500 hover:underline">raw trace</a>
        <a href="/run/{{ run.run_id }}/{{ run.task }}/trace/json" target="_blank" class="text-indigo-500 hover:underline">trace JSON</a>
      {% endif %}
      {% if has_log %}<a href="/run/{{ run.run_id }}/{{ run.task }}/log" target="_blank" class="text-indigo-500 hover:underline">run_agent.log</a>{% endif %}
      {% if has_daemon_log %}<a href="/run/{{ run.run_id }}/{{ run.task }}/daemon-log" target="_blank" class="text-indigo-500 hover:underline">daemon.log</a>{% endif %}
      {% if has_prompt %}<a href="/run/{{ run.run_id }}/{{ run.task }}/prompt" target="_blank" class="text-indigo-500 hover:underline">prompt</a>{% endif %}
    </div>
  </div>
  {% if log_tail %}
  <details open>
    <summary class="px-5 py-2 text-xs text-slate-500 cursor-pointer hover:bg-slate-50 select-none">Harness log</summary>
    <pre class="px-5 py-3 text-[11px] mono text-slate-600 bg-slate-50 overflow-auto max-h-[35vh] whitespace-pre-wrap border-t border-slate-100">{{ log_tail }}</pre>
  </details>
  {% endif %}
  {% if daemon_tail %}
  <details>
    <summary class="px-5 py-2 text-xs text-slate-500 cursor-pointer hover:bg-slate-50 select-none">Auto-eval daemon log</summary>
    <pre class="px-5 py-3 text-[11px] mono text-slate-600 bg-slate-50 overflow-auto max-h-[25vh] whitespace-pre-wrap border-t border-slate-100">{{ daemon_tail }}</pre>
  </details>
  {% endif %}
  {% if not log_tail and not daemon_tail %}
  <div class="p-6 text-center text-slate-400 text-sm">No log files found.</div>
  {% endif %}
</section>

<div class="mt-3 text-[11px] text-slate-400 mono">{{ run.path }}</div>

{# ── ECharts ── #}
{% if run.submissions %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
<script>
(function () {
  const hasScore = {{ run.has_score|tojson }};
  const hasMaxScore = {{ run.has_max_score|tojson }};
  const hasRescaled = {{ run.has_rescaled|tojson }};
  const scoreDirection = {{ run.score_direction|tojson }};
  const runId = {{ run.run_id|tojson }};
  const task = {{ run.task|tojson }};
  const submissions = [
    {% for s in run.submissions %}
    { label: {{ s.round_label|tojson }}, kind: {{ s.kind|tojson }},
      pass_rate: {{ "%.6f"|format(s.pass_rate) }},
      score: {{ s.score|safe_num }},
      score_0_100: {{ s.score_0_100|safe_num }},
      max_score: {{ s.max_score|safe_num }},
      peak_score: {{ s.peak_score|safe_num }},
      passed: {{ s.passed }}, total: {{ s.total_tests }},
      submitted_at: {{ s.submitted_at }},
      moves: {{ s.runtime_seconds|round(0,'floor')|int if s.kind == "game" else "null" }},
      analysis: {{ sub_analyses.get(s.round_label, "")|tojson }} },
    {% endfor %}
  ];
  const runCreatedAt = {{ run.created_at|safe_num }};

  // Score view: "rescaled" (0-100, always higher-is-better) or "raw".
  let scoreView = (window.SForgeScoreView ? window.SForgeScoreView.get() : "rescaled");
  function rescaledMode() { return hasRescaled && scoreView === "rescaled"; }
  // Rescaled score is normalized so best→100 for every task, so direction is
  // always "maximize" in rescaled mode regardless of the raw score_direction.
  function effDirection() { return rescaledMode() ? "maximize" : scoreDirection; }

  // Detect metric mode: if all pass_rates are identical but scores vary, show score
  const anyScore = submissions.some(s => s.score != null);
  const passRates = submissions.map(s => s.pass_rate);
  const allSamePass = passRates.length > 0 && passRates.every(r => r === passRates[0]);
  const useScore = anyScore && (hasScore || allSamePass);

  // Check if max_score is a stable theoretical max (same across all submissions)
  // If it varies (like Jericho games where max_score == score), ignore it
  const maxScores = submissions.map(s => s.max_score).filter(v => v != null && v > 0);
  const stableMaxScore = hasMaxScore && maxScores.length >= 2 && maxScores.every(v => v === maxScores[0]);
  // Rescaled always plots on a fixed 0-100 axis (percentage-like).
  function isPct() { return rescaledMode() ? true : (stableMaxScore || !useScore); }

  function mv(s) {
    if (rescaledMode()) {
      const v = s.score_0_100;
      return (v == null || !isFinite(v)) ? null : v;
    }
    let v;
    if (useScore) {
      if (s.score == null) return null;
      v = (stableMaxScore && s.max_score > 0) ? (s.score / s.max_score) * 100 : s.score;
    } else {
      v = s.pass_rate * 100;
    }
    if (!isFinite(v) || Math.abs(v) >= 1e100) return null;
    return v;
  }

  function fmtNum(v) {
    const a = Math.abs(v);
    if (a >= 1e15) return v.toExponential(1);
    if (a >= 1e12) return (v/1e12).toFixed(1) + "T";
    if (a >= 1e9) return (v/1e9).toFixed(1) + "B";
    if (a >= 1e6) return (v/1e6).toFixed(1) + "M";
    if (a >= 1e3) return (v/1e3).toFixed(1) + "K";
    return Number.isInteger(v) ? v.toString() : v.toFixed(1);
  }

  function displayValue(s) {
    const v = mv(s);
    if (v == null) return "—";
    if (rescaledMode()) return v.toFixed(1);
    if (isPct()) return v.toFixed(1) + "%";
    return fmtNum(v);
  }

  // Y-axis: for scores, auto-zoom to the "interesting" range (skip outlier zeros)
  function computeYBounds(data) {
    if (isPct()) return { min: 0, max: 100, name: rescaledMode() ? "rescaled (0-100)" : (hasMaxScore ? "% of max" : "pass rate (%)"), log: false };
    const vals = data.map(mv).filter(v => v != null && isFinite(v));
    if (!vals.length) return { min: 0, max: 100, name: "score", log: false };

    // Find the "working range": exclude zeros if there are non-zero values
    const nonZero = vals.filter(v => v > 0);
    const focus = nonZero.length >= 2 ? nonZero : vals.filter(v => v >= 0);
    if (!focus.length) return { min: 0, max: 100, name: "score", log: false };
    const lo = Math.min(...focus);
    const hi = Math.max(...focus);

    // Use log scale if range spans more than 3 orders of magnitude
    const useLog = lo > 0 && hi / lo > 1000;
    const name = scoreDirection === "minimize" ? "score (lower is better)" : "score";

    if (useLog) {
      return { min: undefined, max: undefined, name: name + " [log]", log: true };
    }

    const range = hi - lo;
    const pad = range > 0 ? range * 0.1 : Math.abs(hi) * 0.05 || 1;
    return {
      min: Math.max(0, lo - pad),
      max: hi + pad,
      name: name,
      log: false,
    };
  }

  function yFmt(v) {
    if (rescaledMode()) return v.toFixed(0);
    if (isPct()) return v + "%";
    return fmtNum(v);
  }

  function findMilestones(data) {
    if (!data.length) return new Set();
    const ms = new Set([0]);
    let best = mv(data[0]);
    const gt = effDirection() === "minimize" ? (a,b) => a < b : (a,b) => a > b;
    for (let i = 1; i < data.length; i++) {
      const v = mv(data[i]);
      if (gt(v, best)) { best = v; ms.add(i); }
    }
    return ms;
  }

  const toggleAuto = document.getElementById("toggle-auto");
  const toggleLabels = document.getElementById("toggle-labels");
  const toggleRaw = document.getElementById("toggle-raw");
  const smoothBtn = document.getElementById("smooth-btn");
  const smoothPop = document.getElementById("smooth-pop");
  const smoothMode = document.getElementById("smooth-mode");
  const smoothAlpha = document.getElementById("smooth-alpha");
  const smoothAlphaVal = document.getElementById("smooth-alpha-val");
  const smoothWindow = document.getElementById("smooth-window");
  const smoothWindowVal = document.getElementById("smooth-window-val");
  const smoothLabel = document.getElementById("smooth-label");
  const smoothEmaRow = document.getElementById("smooth-ema-row");
  const smoothSmaRow = document.getElementById("smooth-sma-row");
  const chart = echarts.init(document.getElementById("evolution-chart"));
  const detailEl = document.getElementById("milestone-detail");

  let showLabels = toggleLabels ? toggleLabels.checked : false;
  let showRaw = toggleRaw ? toggleRaw.checked : true;
  // smoothing config (kept simple as a single object the rest of the file reads)
  let smoothCfg = { mode: smoothMode ? smoothMode.value : "off",
                    alpha: smoothAlpha ? parseFloat(smoothAlpha.value) : 0.6,
                    window: smoothWindow ? parseInt(smoothWindow.value, 10) : 30 };
  function smoothingActive() { return smoothCfg.mode && smoothCfg.mode !== "off"; }

  function symbolFor(s) {
    return s.kind === "auto" ? "triangle" : "circle";
  }

  // W&B-style EMA smoothing.
  //   last = last * α + (1-α) * x_i        (last initialized to 0)
  //   debiasWeight = 1 - α^n  (n = number of points accumulated so far)
  //   smoothed = last / debiasWeight
  // Reference: https://docs.wandb.ai/guides/app/features/panels/line-plot/smoothing/
  function smoothEMA(values, alpha) {
    if (!alpha || alpha <= 0) return values.slice();
    const out = new Array(values.length).fill(null);
    let last = 0;
    let n = 0;
    for (let i = 0; i < values.length; i++) {
      const v = values[i];
      if (v == null || !isFinite(v)) { out[i] = null; continue; }
      last = last * alpha + (1 - alpha) * v;
      n += 1;
      const debias = 1 - Math.pow(alpha, n);
      out[i] = debias > 0 ? last / debias : last;
    }
    return out;
  }

  function smoothSMA(values, w) {
    if (w < 2) return values.slice();
    const out = new Array(values.length).fill(null);
    const buf = [];
    for (let i = 0; i < values.length; i++) {
      const v = values[i];
      if (v == null || !isFinite(v)) { out[i] = null; continue; }
      buf.push(v);
      if (buf.length > w) buf.shift();
      let sum = 0;
      for (let j = 0; j < buf.length; j++) sum += buf[j];
      out[i] = sum / buf.length;
    }
    return out;
  }

  function applySmoothCfg(values) {
    if (smoothCfg.mode === "ema") return smoothEMA(values, smoothCfg.alpha);
    if (smoothCfg.mode === "sma") return smoothSMA(values, smoothCfg.window);
    return values.slice();
  }

  // Running best (upper envelope) — what smoothing should be applied to,
  // because regression dips in raw values are intentional experimentation,
  // not noise.
  function runningBestSeries(values) {
    const out = new Array(values.length).fill(null);
    let best = null;
    const better = effDirection() === "minimize" ? ((a,b) => a < b) : ((a,b) => a > b);
    for (let i = 0; i < values.length; i++) {
      const v = values[i];
      if (v == null || !isFinite(v)) { out[i] = best; continue; }
      if (best == null || better(v, best)) best = v;
      out[i] = best;
    }
    return out;
  }

  function opt(showAuto) {
    const f = submissions.filter(s => showAuto || s.kind !== "auto");
    if (!f.length) return { series: [], xAxis: { type: "value" }, yAxis: { type: "value" } };
    const ms = findMilestones(f);
    const yBounds = computeYBounds(f);

    // X-axis = elapsed minutes since run start. Fall back to submission index
    // when timestamps are missing/identical (e.g. game tasks with submitted_at=0).
    const t0 = (runCreatedAt && runCreatedAt > 0) ? runCreatedAt
      : (f[0].submitted_at || 0);
    const haveTime = f.some(s => s.submitted_at && s.submitted_at > t0);
    const xOf = (s, i) => haveTime
      ? Math.max(0, (s.submitted_at - t0) / 60)
      : (i + 1);

    // Karpathy-style: gray dots for discarded, green dots + step line for kept (milestones)
    // Skip discarded points that have same score as previous (no code change, just re-eval)
    const discardedPts = [];
    const keptPts = [];
    const allYs = [];
    let prevScore = null;
    f.forEach((s, i) => {
      let y = mv(s);
      if (yBounds.log && y <= 0) y = null;
      allYs.push(y);
      const pt = { value: [xOf(s, i), y], _m: s, symbol: symbolFor(s) };
      if (ms.has(i)) {
        keptPts.push(pt);
      } else {
        if (y !== prevScore) discardedPts.push(pt);
      }
      prevScore = y;
    });

    const smoothedPts = (function () {
      if (!smoothingActive() || keptPts.length < 2) return [];
      const ys = keptPts.map(p => p.value[1]);
      const sm = applySmoothCfg(ys);
      return keptPts.map((p, i) => sm[i] == null ? null : [p.value[0], sm[i]]).filter(p => p);
    })();

    // Raw line: connect every point in order (gray, faint) to show actual fluctuation
    // Skip null-y points entirely so the line never breaks
    const rawPts = [];
    if (showRaw) {
      f.forEach((s, i) => {
        let y = mv(s);
        if (y == null || (yBounds.log && y <= 0)) return;
        rawPts.push({ value: [xOf(s, i), y], _m: s, symbol: symbolFor(s) });
      });
    }

    const series = [
      // Raw line (behind everything)
      ...(showRaw && rawPts.length >= 2 ? [{
        name: "raw", type: "line", data: rawPts,
        showSymbol: true, symbolSize: 4, connectNulls: true,
        lineStyle: { color: "rgba(148,163,184,0.35)", width: 1.2 },
        itemStyle: { color: "rgba(148,163,184,0.45)", borderWidth: 0 },
        emphasis: { itemStyle: { color: "rgba(100,116,139,0.7)", borderColor: "#475569", borderWidth: 1 }, scale: 1.3 },
        label: { show: false },
        tooltip: { show: true },
        z: 0,
      }] : []),
      {
        name: "discarded", type: "scatter", data: discardedPts,
        symbolSize: 7,
        itemStyle: { color: "rgba(51,65,85,0.5)" },
        emphasis: { itemStyle: { color: "rgba(51,65,85,0.8)", borderColor: "#334155", borderWidth: 1 }, scale: 1.5 },
        label: { show: false },
        z: 1,
        tooltip: { show: true },
      },
      {
        name: "running best", type: "line", data: keptPts,
        step: "end",
        symbolSize: smoothingActive() ? 6 : 11,
        lineStyle: { color: smoothingActive() ? "rgba(16,185,129,0.35)" : "#10b981", width: smoothingActive() ? 1.5 : 2.5 },
        itemStyle: { color: smoothingActive() ? "rgba(16,185,129,0.5)" : "#10b981", borderColor: "#fff", borderWidth: smoothingActive() ? 1 : 2 },
        areaStyle: smoothingActive() ? undefined : { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [{ offset: 0, color: "rgba(16,185,129,0.08)" }, { offset: 1, color: "rgba(16,185,129,0)" }] } },
        z: 2,
      },
      {
        name: "milestones", type: "scatter", data: keptPts,
        symbolSize: smoothingActive() ? 7 : 13,
        itemStyle: { color: smoothingActive() ? "rgba(16,185,129,0.5)" : "#10b981", borderColor: "#fff", borderWidth: smoothingActive() ? 1 : 2 },
        label: { show: showLabels, position: "top", distance: 8,
          fontSize: 10, fontWeight: 600, color: "#065f46",
          backgroundColor: "rgba(236,253,245,0.95)", borderColor: "#6ee7b7",
          borderWidth: 1, borderRadius: 4, padding: [4, 8],
          rotate: 25,
          formatter: p => {
            const s = p.data._m;
            const val = s.label + "  " + displayValue(s);
            if (!s.analysis) return val;
            const text = s.analysis.slice(0, 40);
            return val + "\n{sub|" + text + (s.analysis.length > 40 ? "..." : "") + "}";
          },
          rich: { sub: { fontSize: 9, fontWeight: 400, color: "#059669", lineHeight: 14, width: 200 } },
        },
        labelLayout: (params) => {
          return { dy: params.dataIndex % 2 === 0 ? -5 : 5 };
        },
        z: 3,
      },
    ];

    if (smoothingActive() && smoothedPts.length >= 2) {
      series.push({
        name: "smoothed", type: "line", data: smoothedPts,
        showSymbol: false, smooth: true,
        lineStyle: { color: "#10b981", width: 3, type: "solid" },
        areaStyle: { color: { type: "linear", x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [{ offset: 0, color: "rgba(16,185,129,0.08)" }, { offset: 1, color: "rgba(16,185,129,0)" }] } },
        tooltip: { show: false },
        z: 5,
      });
    }

    return {
      tooltip: {
        trigger: "item", confine: false, appendToBody: true,
        backgroundColor: "rgba(15,23,42,0.95)", borderColor: "rgba(51,65,85,0.5)",
        textStyle: { color: "#e2e8f0", fontSize: 12 },
        extraCssText: "max-width:420px; white-space:normal; line-height:1.5;",
        formatter: p => {
          const d = (Array.isArray(p) ? p[0] : p);
          const s = d.data._m;
          if (!s) return "";
          const g = s.kind === "game";
          const esc = t => t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
          let l = ["<b>" + esc(s.label) + "</b> <span style='color:#94a3b8'>(" + esc(s.kind) + ")</span>"];
          if (d.value && d.value[0] != null && d.data._m && submissions.some(x => x.submitted_at > 0))
            l.push("<span style='color:#94a3b8'>t = " + Number(d.value[0]).toFixed(1) + " min</span>");
          if (s.score != null) l.push(s.max_score > 0 ? "score: " + s.score.toFixed(0) + "/" + s.max_score.toFixed(0) : "score: " + fmtNum(s.score));
          if (s.score_0_100 != null && isFinite(s.score_0_100)) l.push("rescaled: " + s.score_0_100.toFixed(1));
          if (!g) { l.push("pass rate: " + (s.pass_rate*100).toFixed(1) + "%"); l.push("tests: " + s.passed + "/" + s.total); }
          if (g && s.moves != null) l.push("moves: " + s.moves);
          if (s.analysis) { const esc = s.analysis.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); l.push("<br><span style='color:#6ee7b7;font-style:italic'>" + esc.slice(0, 200) + (esc.length > 200 ? "..." : "") + "</span>"); }
          return l.join("<br>");
        },
      },
      legend: { show: false },
      grid: { top: 80, right: 80, bottom: 44, left: 80, containLabel: true },
      dataZoom: [
        { type: "inside", xAxisIndex: 0, filterMode: "none" },
        { type: "inside", yAxisIndex: 0, filterMode: "none" },
      ],
      xAxis: { type: "value", name: haveTime ? "elapsed (min)" : "submission #",
        nameTextStyle: { fontSize: 11, color: "#94a3b8" },
        min: 0, max: haveTime ? undefined : f.length + 0.5,
        axisLabel: { formatter: v => haveTime ? v.toFixed(0) : (v === Math.round(v) ? v : "") },
        splitLine: { lineStyle: { color: "#f1f5f9" } },
      },
      yAxis: { type: yBounds.log ? "log" : "value", name: yBounds.name,
        nameTextStyle: { fontSize: 11, color: "#94a3b8" },
        min: yBounds.min, max: yBounds.max,
        axisLabel: { formatter: yFmt },
        splitLine: { lineStyle: { color: "#f1f5f9" } },
      },
      series,
    };
  }

  function refresh() {
    chart.setOption(opt(toggleAuto ? toggleAuto.checked : true), true);
  }

  refresh();
  window.addEventListener("resize", () => chart.resize());

  chart.on("click", { seriesName: "milestones" }, function (p) {
    const s = p.data._m;
    if (!s) return;
    const esc = t => t.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    const escUrl = t => encodeURIComponent(t);
    const url = "/run/" + escUrl(runId) + "/" + escUrl(task) + "/submission/" + escUrl(s.label) + "/diff";
    detailEl.classList.remove("hidden");
    const analysisHtml = s.analysis
      ? '<div class="mt-2 p-3 bg-emerald-50 border border-emerald-200 rounded-lg text-sm text-slate-700 italic">' + esc(s.analysis) + '</div>'
      : '<div class="mt-2 text-xs text-slate-400">(no analysis yet)</div>';
    detailEl.innerHTML =
      '<div class="flex items-center gap-2 mb-2">' +
        '<span class="chip bg-emerald-100 text-emerald-700 mono">' + esc(s.label) + '</span>' +
        '<span class="text-sm font-semibold">' + esc(displayValue(s)) + '</span>' +
        '<a href="/run/' + escUrl(runId) + '/' + escUrl(task) + '/submission/' + escUrl(s.label) +
        '" class="text-xs text-indigo-500 hover:underline ml-auto">full details &rarr;</a>' +
      '</div>' +
      analysisHtml +
      '<details class="mt-3"><summary class="cursor-pointer text-xs text-slate-500 hover:text-slate-700 select-none">Code diff</summary>' +
      '<div hx-get="' + url + '" hx-trigger="intersect once" hx-swap="innerHTML" class="mt-2 overflow-auto max-h-[50vh]">' +
        '<span class="text-xs text-slate-400">Loading diff...</span>' +
      '</div></details>';
    htmx.process(detailEl);
    detailEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
  });

  if (toggleLabels) {
    toggleLabels.addEventListener("change", () => {
      showLabels = toggleLabels.checked;
      refresh();
    });
  }
  if (toggleRaw) {
    toggleRaw.addEventListener("change", () => {
      showRaw = toggleRaw.checked;
      refresh();
    });
  }
  if (window.SForgeScoreView) {
    window.SForgeScoreView.onChange((v) => { scoreView = v; refresh(); });
  }
  if (toggleAuto) {
    toggleAuto.addEventListener("change", () => {
      refresh();
      document.querySelectorAll(".submission-item").forEach(el => {
        el.style.display = (!toggleAuto.checked && el.dataset.kind === "auto") ? "none" : "";
      });
    });
  }

  // ── Smooth popover / dropdown wiring ──
  function updateSmoothUI() {
    const m = smoothCfg.mode;
    if (smoothLabel) {
      if (m === "off") smoothLabel.textContent = "off";
      else if (m === "ema") smoothLabel.textContent = "EMA α=" + smoothCfg.alpha.toFixed(2);
      else if (m === "sma") smoothLabel.textContent = "SMA w=" + smoothCfg.window;
    }
    if (smoothEmaRow) smoothEmaRow.style.display = m === "ema" ? "flex" : "none";
    if (smoothSmaRow) smoothSmaRow.style.display = m === "sma" ? "flex" : "none";
    refresh();
  }
  if (smoothBtn && smoothPop) {
    smoothBtn.addEventListener("click", (e) => {
      e.stopPropagation();
      smoothPop.classList.toggle("hidden");
    });
    document.addEventListener("click", (e) => {
      if (!smoothPop.contains(e.target) && e.target !== smoothBtn) {
        smoothPop.classList.add("hidden");
      }
    });
  }
  if (smoothMode) {
    smoothMode.addEventListener("change", () => {
      smoothCfg.mode = smoothMode.value;
      updateSmoothUI();
    });
  }
  if (smoothAlpha) {
    smoothAlpha.addEventListener("input", () => {
      smoothCfg.alpha = parseFloat(smoothAlpha.value);
      if (smoothAlphaVal) smoothAlphaVal.textContent = smoothCfg.alpha.toFixed(2);
      updateSmoothUI();
    });
  }
  if (smoothWindow) {
    smoothWindow.addEventListener("input", () => {
      smoothCfg.window = parseInt(smoothWindow.value, 10);
      if (smoothWindowVal) smoothWindowVal.textContent = smoothCfg.window;
      updateSmoothUI();
    });
  }
  updateSmoothUI();
})();
</script>
{% endif %}

{% endblock %}