{% extends "base.html" %}
{% block title %}run {{ run.id[:8] }} · aether 控制台{% endblock %}

{% block extra_head %}
<style>
  /* run page-specific: live indicator + task list transitions */
  .live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #aaa; vertical-align: middle; margin-right: 6px;
  }
  .live-dot.is-running {
    background: #28a745;
    animation: pulse 1.2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
  }
</style>
{% endblock %}

{% block content %}
<h1>
  <span id="live-dot" class="live-dot {{ 'is-running' if run.status == 'running' else '' }}"></span>
  <span id="status-label">{{ run.status }}</span>
  <span class="muted">· {{ run.agent_id }}</span>
</h1>

<p class="muted">
  task_run id <code>{{ run.id }}</code> · kind {{ run.agent_kind }} · started {{ run.started_at }}
</p>

<section>
  <h2>Tasks</h2>
  <ol id="task-list" class="workflow">
    {% set known_nodes = ['load_inputs','extract_markdown','translate','upsert_draft','load_source','load_agent','run_strategies','filter_recency','upsert'] %}
    {% for n in known_nodes %}
      {% set node_events = run.events | selectattr('node', 'defined') | selectattr('node', 'equalto', n) | list %}
      {% if node_events or true %}
        <li class="workflow-node" data-node="{{ n }}">
          <div class="workflow-node-label"><span class="task-mark task-mark-pending" id="mark-{{ n }}">○</span> {{ n }}</div>
          <div class="workflow-node-hint" id="hint-{{ n }}"></div>
        </li>
      {% endif %}
    {% endfor %}
  </ol>
  <p class="muted">注：上表把所有可能的 node 都展示出来，未跑到的仍是 ○；跑完会变 ✓。</p>
</section>

<section>
  <h2>Live log</h2>
  <div id="log-box" class="log-box">
    {% for ev in run.events %}
      <div class="log-line">[{{ ev.ts }}] {{ ev.kind }} {% if ev.node %}<code>{{ ev.node }}</code>{% endif %}{% if ev.message %} — {{ ev.message }}{% endif %}</div>
    {% endfor %}
  </div>
</section>

<p style="margin-top:1.5em">
  <a id="back-link" href="/agents" class="btn btn-muted">← 返回 agents</a>
</p>

<script>
(function() {
  // ----- native EventSource with auto-reconnect + last_idx resume -----
  const taskList = document.getElementById("task-list");
  const logBox = document.getElementById("log-box");
  const liveDot = document.getElementById("live-dot");
  const statusLabel = document.getElementById("status-label");
  let lastIdx = -1;
  let es = null;
  let retries = 0;
  let reconnectTimer = null;
  let manuallyStopped = false;

  function setNodeMark(node, mark) {
    const el = document.getElementById("mark-" + node);
    if (!el) return;
    el.className = "task-mark task-mark-" + mark;
    el.textContent = mark === "done" ? "✓" : (mark === "active" ? "⟳" : mark === "failed" ? "✗" : "○");
  }

  function appendLog(line) {
    const div = document.createElement("div");
    div.className = "log-line";
    div.textContent = line;
    logBox.appendChild(div);
    logBox.scrollTop = logBox.scrollHeight;
  }

  function isTerminalStatus() {
    const s = statusLabel.textContent;
    return s === "success" || s === "failed";
  }

  function connect() {
    if (manuallyStopped || isTerminalStatus()) return;
    const url = "/agents/run/{{ run.id }}/events?last_idx=" + lastIdx;
    es = new EventSource(url);

    es.onmessage = (e) => {
      if (e.data === "[DONE]") {
        appendLog("[client] stream closed");
        es.close();
        return;
      }
      let parsed;
      try { parsed = JSON.parse(e.data); } catch (err) { return; }

      // Server tags every event with `i` (its position in the events array).
      // Track it so reconnect resumes from the right place.
      if (typeof parsed.i === "number") lastIdx = parsed.i;
      retries = 0;  // success — reset backoff

      const ts = parsed.ts || "";
      if (parsed.kind === "node_end" && parsed.node) {
        setNodeMark(parsed.node, "done");
      } else if (parsed.kind === "node_start" && parsed.node) {
        setNodeMark(parsed.node, "active");
      } else if (parsed.kind === "node_failed" && parsed.node) {
        setNodeMark(parsed.node, "failed");
      } else if (parsed.kind === "status") {
        statusLabel.textContent = parsed.status;
        if (parsed.status === "running") {
          liveDot.classList.add("is-running");
        } else {
          liveDot.classList.remove("is-running");
        }
        if (parsed.status === "success" || parsed.status === "failed") {
          if ("{{ run.agent_kind }}" === "fetch") {
            document.getElementById("back-link").href = "/articles";
          } else if ("{{ run.agent_kind }}" === "rewrite") {
            // For rewrite success, jump to drafts list (filter to recent)
            document.getElementById("back-link").href = "/drafts";
          }
        }
      }
      let line = `[${ts}] ${parsed.kind}`;
      if (parsed.node) line += " " + parsed.node;
      if (parsed.message) line += " — " + parsed.message;
      if (parsed.error) line += " — ERROR: " + parsed.error;
      appendLog(line);

      // If the server already reports a terminal status, close.
      if (parsed.kind === "status" && (parsed.status === "success" || parsed.status === "failed")) {
        // Server will also send [DONE] right after; let it close naturally.
      }
    };

    es.onerror = () => {
      es.close();
      if (isTerminalStatus()) return;  // run finished; nothing to reconnect
      if (manuallyStopped) return;
      retries++;
      const delay = Math.min(1000 * Math.pow(2, retries - 1), 10000);
      appendLog(`[client] connection lost; reconnecting in ${delay}ms (attempt ${retries})`);
      reconnectTimer = setTimeout(connect, delay);
    };
  }

  // Initial state: if the server-rendered status is already terminal,
  // we don't even try to connect.
  if (!isTerminalStatus()) {
    connect();
  } else {
    appendLog("[client] run already finished; events replayed from history");
  }

  // Clean up on navigation away.
  window.addEventListener("beforeunload", () => {
    manuallyStopped = true;
    if (reconnectTimer) clearTimeout(reconnectTimer);
    if (es) es.close();
  });
})();
</script>
{% endblock %}