{% extends "studio/base_studio.html" %}

{% block extra_css %}
{{ super() }}
<style>
/* ── Execution Viewer ─────────────────────────────────────────── */
.exec-page { display:flex; flex-direction:column; height:calc(100vh - 56px); background:#0f172a; color:#e2e8f0; }

/* Header */
.exec-header {
  display:flex; align-items:center; gap:12px; padding:10px 20px;
  background:#1e293b; border-bottom:1px solid #334155; flex-shrink:0; flex-wrap:wrap;
}
.exec-back { color:#94a3b8; text-decoration:none; font-size:0.85rem; padding:4px 8px;
  border:1px solid #334155; border-radius:6px; transition:border-color .15s; }
.exec-back:hover { border-color:#6366f1; color:#a5b4fc; }
.exec-title { font-weight:700; font-size:1rem; color:#f1f5f9; min-width:0; }
.exec-run-id { font-size:0.75rem; color:#64748b; font-family:monospace; }
.exec-spacer { flex:1; }
.exec-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px; font-size:0.72rem; font-weight:700; letter-spacing:.05em;
}
.exec-badge--pending         { background:#1e3a5f; color:#93c5fd; }
.exec-badge--running         { background:#312e81; color:#a5b4fc; animation:pulse-badge 1.4s ease infinite; }
.exec-badge--success         { background:#064e3b; color:#6ee7b7; }
.exec-badge--failed          { background:#7f1d1d; color:#fca5a5; }
.exec-badge--awaiting_approval { background:#78350f; color:#fde68a; }
.exec-badge--error           { background:#7f1d1d; color:#fca5a5; }
.exec-badge--timeout         { background:#7f1d1d; color:#fca5a5; }
.exec-timer { font-size:0.8rem; color:#94a3b8; font-variant-numeric:tabular-nums; }

@keyframes pulse-badge { 0%,100%{opacity:1} 50%{opacity:.6} }

/* Canvas area */
.exec-body { display:flex; flex:1; min-height:0; }

/* DAG Panel */
.exec-dag-wrap {
  flex:1; min-width:0; position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(99,102,241,.04) 0%, transparent 60%),
    radial-gradient(circle at 85% 80%, rgba(16,185,129,.03) 0%, transparent 50%),
    #0f172a;
}
.exec-dag-wrap svg { width:100%; height:100%; }

/* Grid dots */
.exec-dag-wrap::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(circle, #334155 1px, transparent 1px);
  background-size:28px 28px; opacity:.4;
}

/* DAG SVG elements */
.dag-edge { fill:none; stroke:#334155; stroke-width:1.5; marker-end:url(#arrowhead); }
.dag-edge--active { stroke:#4f46e5; stroke-width:2; }

.dag-node { cursor:pointer; }
.dag-node rect, .dag-node polygon { transition:fill .3s ease, stroke .3s ease, filter .3s ease; }
.dag-node text { pointer-events:none; user-select:none; }
.dag-node:hover rect, .dag-node:hover polygon { filter:brightness(1.15); }

/* Node status fills */
.node-pending    rect, .node-pending    polygon { fill:#1e293b; stroke:#334155; stroke-width:1.5; }
.node-running    rect, .node-running    polygon { fill:#1e1b4b; stroke:#6366f1; stroke-width:2;
  filter:drop-shadow(0 0 8px rgba(99,102,241,.5)); animation:node-pulse 1.4s ease infinite; }
.node-success    rect, .node-success    polygon { fill:#052e16; stroke:#10b981; stroke-width:1.5; }
.node-failed     rect, .node-failed     polygon { fill:#450a0a; stroke:#ef4444; stroke-width:1.5; }
.node-timeout    rect, .node-timeout    polygon { fill:#450a0a; stroke:#ef4444; stroke-width:1.5; }
.node-awaiting_approval rect, .node-awaiting_approval polygon
                         { fill:#431407; stroke:#f59e0b; stroke-width:2;
                           filter:drop-shadow(0 0 6px rgba(245,158,11,.4)); animation:node-pulse 2s ease infinite; }
.node-approved   rect, .node-approved   polygon { fill:#052e16; stroke:#06b6d4; stroke-width:1.5; }
.node-rejected   rect, .node-rejected   polygon { fill:#431407; stroke:#f97316; stroke-width:1.5; }
.node-skipped    rect, .node-skipped    polygon { fill:#0f172a; stroke:#374151; stroke-width:1; stroke-dasharray:4,3; }

@keyframes node-pulse {
  0%,100% { filter:drop-shadow(0 0 6px rgba(99,102,241,.4)); }
  50%      { filter:drop-shadow(0 0 14px rgba(99,102,241,.8)); }
}
.node-running.node-awaiting_approval { animation-duration:2s; }

/* Node text colors */
.node-pending    .node-name { fill:#94a3b8; }
.node-running    .node-name { fill:#c7d2fe; }
.node-success    .node-name { fill:#a7f3d0; }
.node-failed     .node-name { fill:#fca5a5; }
.node-timeout    .node-name { fill:#fca5a5; }
.node-awaiting_approval .node-name { fill:#fde68a; }
.node-approved   .node-name { fill:#a5f3fc; }
.node-rejected   .node-name { fill:#fed7aa; }
.node-skipped    .node-name { fill:#4b5563; }

.node-name  { font-size:12px; font-weight:600; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.node-sub   { font-size:10px; fill:#64748b; font-family:monospace; }
.node-dur   { font-size:10px; font-family:monospace; }
.node-success .node-dur { fill:#34d399; }
.node-failed  .node-dur, .node-timeout .node-dur { fill:#f87171; }
.node-running .node-dur { fill:#818cf8; }
.node-dur-default { fill:#64748b; }

/* Zoom controls */
.dag-zoom-ctrl {
  position:absolute; bottom:16px; left:16px; display:flex; flex-direction:column; gap:4px; z-index:10;
}
.dag-zoom-btn {
  width:32px; height:32px; border-radius:6px; border:1px solid #334155;
  background:#1e293b; color:#94a3b8; font-size:1rem; cursor:pointer; display:flex;
  align-items:center; justify-content:center; transition:border-color .15s;
}
.dag-zoom-btn:hover { border-color:#6366f1; color:#a5b4fc; }

/* Right panel — Step Detail */
.exec-detail {
  width:300px; flex-shrink:0; background:#1e293b; border-left:1px solid #334155;
  display:flex; flex-direction:column; overflow:hidden;
}
.exec-detail-head {
  padding:14px 16px 10px; border-bottom:1px solid #334155; flex-shrink:0;
}
.exec-detail-name { font-weight:700; font-size:0.95rem; color:#f1f5f9; margin-bottom:6px; line-height:1.3; }
.exec-detail-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.exec-detail-tool { font-size:0.7rem; color:#64748b; font-family:monospace; margin-top:4px; word-break:break-all; }
.exec-detail-body { flex:1; overflow-y:auto; padding:12px 16px; }
.exec-detail-body::-webkit-scrollbar { width:4px; }
.exec-detail-body::-webkit-scrollbar-thumb { background:#334155; border-radius:2px; }

.exec-section { font-size:0.65rem; font-weight:700; color:#64748b; letter-spacing:.1em;
  text-transform:uppercase; margin:12px 0 6px; border-top:1px solid #1e293b; padding-top:8px; }
.exec-section:first-child { margin-top:0; border-top:none; padding-top:0; }

.exec-artifact-link {
  display:flex; align-items:center; gap:6px; padding:4px 0;
  font-size:0.75rem; color:#818cf8; text-decoration:none; font-family:monospace;
  transition:color .15s;
}
.exec-artifact-link:hover { color:#a5b4fc; }
.exec-artifact-link::before { content:'📄'; font-size:0.7rem; }

pre.exec-output {
  background:#0f172a; border:1px solid #334155; border-radius:6px; padding:8px 10px;
  font-size:0.68rem; line-height:1.5; color:#94a3b8; overflow-x:auto; white-space:pre-wrap;
  word-break:break-all; max-height:220px; overflow-y:auto; margin:0;
}
.exec-approve-row { display:flex; gap:8px; margin-top:8px; }
.exec-btn { padding:6px 14px; border-radius:6px; border:none; font-size:0.78rem; font-weight:600; cursor:pointer; transition:opacity .15s; }
.exec-btn--approve { background:#065f46; color:#a7f3d0; }
.exec-btn--reject  { background:#450a0a; color:#fca5a5; }

/* GNS3 Simulation panel */
.gns3-panel { background:#0f172a; border:1px solid #1e3a5f; border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.gns3-mode-badge {
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
  border-radius:12px; font-size:.65rem; font-weight:700; letter-spacing:.06em;
  margin-bottom:8px;
}
.gns3-mode--dual        { background:#064e3b; color:#6ee7b7; border:1px solid #065f46; }
.gns3-mode--gns3_only   { background:#1e3a5f; color:#93c5fd; border:1px solid #1d4ed8; }
.gns3-mode--cloud_only  { background:#3b1f0a; color:#fdba74; border:1px solid #92400e; }
.gns3-mode--dry_run     { background:#1e293b; color:#94a3b8; border:1px solid #334155; }
.gns3-stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:8px;
}
.gns3-stat {
  background:#1e293b; border-radius:5px; padding:5px 4px; text-align:center;
}
.gns3-stat-val { font-size:.85rem; font-weight:700; color:#f1f5f9; font-family:monospace; }
.gns3-stat-lbl { font-size:.58rem; color:#64748b; text-transform:uppercase; letter-spacing:.06em; margin-top:1px; }
.gns3-probes { display:flex; flex-direction:column; gap:3px; margin-bottom:6px; }
.gns3-probe-row {
  display:flex; align-items:center; gap:6px; font-size:.68rem;
  padding:3px 6px; border-radius:4px; background:#1e293b;
}
.gns3-probe-icon { font-size:.7rem; flex-shrink:0; }
.gns3-probe-name { color:#cbd5e1; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gns3-probe-detail { color:#64748b; font-size:.62rem; font-family:monospace; flex-shrink:0; }
.gns3-open-btn {
  display:inline-flex; align-items:center; gap:4px; padding:4px 10px;
  background:#1e3a5f; border:1px solid #1d4ed8; border-radius:5px;
  color:#93c5fd; font-size:.68rem; cursor:pointer; text-decoration:none;
  transition:background .15s;
}
.gns3-open-btn:hover { background:#1d4ed8; color:#fff; }
.gns3-training-link {
  display:flex; align-items:center; gap:5px; font-size:.68rem; color:#a78bfa;
  margin-top:5px; text-decoration:none; font-family:monospace;
}
.gns3-training-link:hover { color:#c4b5fd; }
.exec-btn:hover { opacity:.8; }

.exec-detail-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; color:#334155; text-align:center; gap:8px;
}
.exec-detail-empty svg { opacity:.3; }

/* Timeline */
.exec-timeline {
  flex-shrink:0; background:#1e293b; border-top:1px solid #334155;
  padding:8px 20px 10px; min-height:52px;
}
.exec-timeline-label { font-size:0.65rem; color:#64748b; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; }
.exec-timeline-track { display:flex; gap:2px; align-items:center; min-height:22px; flex-wrap:nowrap; overflow-x:auto; }
.exec-timeline-track::-webkit-scrollbar { height:3px; }
.exec-timeline-track::-webkit-scrollbar-thumb { background:#334155; }

.exec-tl-seg {
  height:20px; border-radius:3px; min-width:4px; position:relative;
  transition:filter .2s; cursor:pointer; flex-shrink:0;
}
.exec-tl-seg:hover { filter:brightness(1.3); }
.exec-tl-seg--pending         { background:#334155; }
.exec-tl-seg--running         { background:#6366f1; animation:tl-pulse 1.2s ease infinite; }
.exec-tl-seg--success         { background:#10b981; }
.exec-tl-seg--failed          { background:#ef4444; }
.exec-tl-seg--timeout         { background:#ef4444; }
.exec-tl-seg--awaiting_approval { background:#f59e0b; animation:tl-pulse 2s ease infinite; }
.exec-tl-seg--approved        { background:#06b6d4; }
.exec-tl-seg--rejected        { background:#f97316; }
.exec-tl-seg--skipped         { background:#374151; opacity:.5; }
.exec-tl-gap  { width:2px; background:transparent; flex-shrink:0; }

@keyframes tl-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* Run history list (when no run_id) */
.exec-hist { padding:24px; max-width:960px; margin:0 auto; }
.exec-hist-title { font-size:1.1rem; font-weight:700; color:#f1f5f9; margin-bottom:16px; }
.exec-hist-filters { display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.exec-hist-input {
  padding:6px 10px; background:#1e293b; border:1px solid #334155; border-radius:6px;
  color:#e2e8f0; font-size:0.8rem; outline:none;
}
.exec-hist-input:focus { border-color:#6366f1; }
.exec-hist-table { width:100%; border-collapse:collapse; }
.exec-hist-table th {
  text-align:left; font-size:0.67rem; color:#64748b; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px; border-bottom:1px solid #334155;
}
.exec-hist-table td { padding:8px 10px; border-bottom:1px solid #1e293b; font-size:0.82rem; }
.exec-hist-table tr:hover td { background:#1e293b; }
.exec-hist-link { color:#818cf8; text-decoration:none; font-weight:600; }
.exec-hist-link:hover { color:#a5b4fc; }
.exec-hist-time { color:#64748b; font-size:0.75rem; font-family:monospace; }
.exec-hist-wf { color:#94a3b8; }
.exec-hist-pid { color:#64748b; font-size:0.72rem; font-family:monospace; }

/* ── Stall banner ─────────────────────────────────────── */
.exec-stall-banner {
  display:none; padding:7px 14px; background:#451a03; border-bottom:1px solid #78350f;
  color:#fed7aa; font-size:0.78rem; align-items:center; gap:10px; flex-shrink:0;
}
.exec-stall-banner strong { color:#fdba74; }

/* ── Step rail ─────────────────────────────────────────── */
.exec-step-rail {
  flex-shrink:0; border-bottom:1px solid #1e293b; overflow-y:auto; max-height:220px;
  padding:6px 0;
}
.exec-step-rail::-webkit-scrollbar { width:3px; }
.exec-step-rail::-webkit-scrollbar-thumb { background:#334155; }
.exec-rail-hdr {
  font-size:0.62rem; font-weight:700; color:#475569; letter-spacing:.1em;
  text-transform:uppercase; padding:2px 14px 6px;
}
.exec-rail-item {
  display:flex; align-items:center; gap:7px; padding:4px 14px; cursor:pointer;
  transition:background .12s; font-size:0.75rem;
}
.exec-rail-item:hover { background:#1e293b; }
.exec-rail-item--selected { background:#1e2d4a; }
.exec-rail-item--error { background:rgba(127,29,29,.15); }
.exec-rail-dot {
  width:8px; height:8px; border-radius:50%; flex-shrink:0; border:1.5px solid transparent;
}
.exec-rail-dot--pending         { background:#334155; border-color:#475569; }
.exec-rail-dot--running         { background:#6366f1; border-color:#818cf8; animation:node-pulse 1.4s ease infinite; }
.exec-rail-dot--success         { background:#10b981; border-color:#34d399; }
.exec-rail-dot--failed, .exec-rail-dot--error, .exec-rail-dot--timeout { background:#ef4444; border-color:#f87171; }
.exec-rail-dot--awaiting_approval { background:#f59e0b; border-color:#fbbf24; animation:node-pulse 2s ease infinite; }
.exec-rail-dot--approved        { background:#06b6d4; border-color:#22d3ee; }
.exec-rail-dot--rejected        { background:#f97316; border-color:#fb923c; }
.exec-rail-dot--skipped         { background:#374151; border-color:#4b5563; }
.exec-rail-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#cbd5e1; }
.exec-rail-dur  { font-family:monospace; font-size:0.68rem; color:#64748b; flex-shrink:0; }
.exec-rail-elapsed { font-family:monospace; font-size:0.68rem; color:#818cf8; flex-shrink:0; animation:pulse-badge 1.4s ease infinite; }
.exec-rail-err-hint { font-size:0.65rem; color:#f87171; flex-shrink:0; }

/* ── Node progress bar ─────────────────────────────────── */
.node-progress-bg { opacity:.3; }
.node-progress-bar { transition:width .5s linear; }
.node-running .node-progress-bar { fill:#6366f1; }
.node-failed  .node-progress-bar, .node-timeout .node-progress-bar { fill:#ef4444; }

/* ── Heal button ────────────────────────────────────────── */
.exec-heal-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:6px; border:1px solid #0d9488;
  background:#042f2e; color:#5eead4; font-size:0.78rem; font-weight:600;
  cursor:pointer; transition:opacity .15s, border-color .15s; margin-top:4px;
}
.exec-heal-btn:hover { opacity:.85; border-color:#14b8a6; }
.exec-heal-btn:disabled { opacity:.5; cursor:not-allowed; }
.exec-diagnosis-box {
  background:#042f2e; border:1px solid #0d9488; border-radius:6px;
  padding:8px 10px; font-size:0.72rem; color:#a7f3d0; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; margin-top:6px;
}
.exec-action-box {
  background:#1c1917; border:1px solid #78350f; border-radius:6px;
  padding:7px 10px; font-size:0.74rem; color:#fde68a; margin-top:6px; line-height:1.5;
}
/* Action-type badge tints */
.exec-action-badge-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
.exec-act--retry    { background:#1e3a5f; color:#93c5fd; }
.exec-act--skip     { background:#1c1917; color:#d97706; }
.exec-act--escalate { background:#450a0a; color:#fca5a5; }
.exec-act--wait     { background:#1e293b; color:#94a3b8; }
.exec-act--unknown  { background:#1e293b; color:#64748b; }

/* ── DAG approval overlay ──────────────────────────────── */
.dag-approval-overlay {
  position:absolute; z-index:60; min-width:200px;
  background:#1e293b; border:1.5px solid #f59e0b; border-radius:10px;
  padding:14px 16px; box-shadow:0 8px 32px rgba(0,0,0,.65); display:none;
  pointer-events:all;
}
.dao-title { font-size:.8rem; font-weight:700; color:#fde68a; margin-bottom:3px; }
.dao-sub   { font-size:.7rem; color:#94a3b8; margin-bottom:10px; line-height:1.4; }
.dao-btns  { display:flex; gap:7px; align-items:center; }
.dao-close { margin-left:auto; background:none; border:none; color:#475569;
  font-size:.9rem; cursor:pointer; padding:2px 4px; }
.dao-close:hover { color:#94a3b8; }
/* Approval indicator badge on diamond nodes */
.node-approval-hint { font-size:9px; fill:#fde68a; font-weight:700; letter-spacing:.03em; }
.dag-retrigger-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 14px; border-radius:6px; border:1px solid #7c3aed;
  background:#1e1b4b; color:#a5b4fc; font-size:.78rem; font-weight:600;
  cursor:pointer; transition:opacity .15s; margin-top:4px;
}
.dag-retrigger-btn:hover { opacity:.85; }
</style>
{% endblock %}

{% block studio_content %}
{% set run_id_val = run_id if run_id else "" %}

{% if run_id_val %}
<!-- ── LIVE EXECUTION VIEW ─────────────────────────── -->
<div class="exec-page" id="exec-page" data-run-id="{{ run_id_val }}">

  <!-- Header bar -->
  <div class="exec-header">
    <a href="/studio/execution" class="exec-back">← All Runs</a>
    <div>
      <div class="exec-title" id="exec-wf-name">Loading…</div>
      <div class="exec-run-id">{{ run_id_val }}</div>
    </div>
    <div class="exec-spacer"></div>
    <div id="exec-status-badge" class="exec-badge exec-badge--pending">PENDING</div>
    <div class="exec-timer" id="exec-timer">—</div>
    <button class="dag-zoom-btn" onclick="ExecView.fitView()" title="Fit view" style="position:static;margin-left:4px;">⊡</button>
  </div>

  <!-- Body: DAG + Detail panel -->
  <div class="exec-body">
    <!-- DAG canvas -->
    <div class="exec-dag-wrap" id="exec-dag-wrap">
      <svg id="dag-svg" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="6" refY="3" orient="auto">
            <path d="M0,0 L0,6 L8,3 z" fill="#334155"/>
          </marker>
          <marker id="arrowhead-active" markerWidth="8" markerHeight="6" refX="6" refY="3" orient="auto">
            <path d="M0,0 L0,6 L8,3 z" fill="#4f46e5"/>
          </marker>
        </defs>
        <g id="dag-viewport">
          <g id="dag-edges"></g>
          <g id="dag-nodes"></g>
        </g>
      </svg>
      <!-- Zoom controls -->
      <div class="dag-zoom-ctrl">
        <button class="dag-zoom-btn" onclick="ExecView.zoom(1.2)" title="Zoom in">+</button>
        <button class="dag-zoom-btn" onclick="ExecView.zoom(0.8)" title="Zoom out">−</button>
        <button class="dag-zoom-btn" onclick="ExecView.fitView()" title="Reset">⊡</button>
      </div>

      <!-- Floating approval overlay (shown over awaiting_approval diamond nodes) -->
      <div class="dag-approval-overlay" id="dag-approval-overlay">
        <div class="dao-title">⚠ Approval Required</div>
        <div class="dao-sub" id="dao-step-name">Waiting for approval before continuing.</div>
        <div class="dao-btns">
          <button class="exec-btn exec-btn--approve" onclick="ExecView._doApprove()">✓ Approve</button>
          <button class="exec-btn exec-btn--reject"  onclick="ExecView._doReject()">✗ Reject</button>
          <button class="dao-close" onclick="ExecView._closeApprovalOverlay()" title="Dismiss">✕</button>
        </div>
      </div>
    </div>

    <!-- Detail panel -->
    <div class="exec-detail" id="exec-detail" style="display:flex;flex-direction:column;">

      <!-- Stall / error banner -->
      <div class="exec-stall-banner" id="exec-stall-banner">
        <span>⚠️ Run stalled — no activity for <strong id="stall-elapsed">—</strong></span>
        <button class="exec-heal-btn" style="margin-top:0;padding:3px 10px;font-size:.72rem;" onclick="ExecView.healRun()">🔧 Auto-Heal</button>
      </div>

      <!-- Step rail: always-visible step progress overview -->
      <div class="exec-step-rail" id="exec-step-rail" style="display:none">
        <div class="exec-rail-hdr">Steps</div>
        <div id="exec-rail-list"></div>
      </div>

      <!-- Empty state -->
      <div class="exec-detail-empty" id="exec-detail-empty" style="flex:1">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 12h6M9 8h6M9 16h4"/>
        </svg>
        <div style="color:#4b5563;font-size:.82rem">Click a step to inspect</div>
      </div>

      <!-- Step detail -->
      <div id="exec-detail-content" style="display:none;flex:1;flex-direction:column;min-height:0;overflow:hidden;">
        <div class="exec-detail-head">
          <div class="exec-detail-name" id="dd-name"></div>
          <div class="exec-detail-meta">
            <div id="dd-badge" class="exec-badge" style="font-size:.68rem;"></div>
            <span id="dd-dur" style="font-size:.75rem;color:#64748b;font-family:monospace;"></span>
          </div>
          <div class="exec-detail-tool" id="dd-tool"></div>
        </div>
        <div class="exec-detail-body" id="dd-body"></div>
      </div>
    </div>
  </div>

  <!-- Timeline -->
  <div class="exec-timeline">
    <div class="exec-timeline-label">Timeline</div>
    <div class="exec-timeline-track" id="exec-tl-track"></div>
  </div>
</div>

{% else %}
<!-- ── RUN HISTORY LIST ────────────────────────────── -->
<div class="exec-hist" id="exec-hist-page">
  <div class="exec-hist-title">Workflow Execution History</div>
  <div class="exec-hist-filters">
    <input class="exec-hist-input" id="hist-search" placeholder="Filter by workflow or run ID…" oninput="HistView.filter()" style="width:280px;">
    <select class="exec-hist-input" id="hist-status" onchange="HistView.filter()">
      <option value="">All statuses</option>
      <option value="success">Success</option>
      <option value="failed">Failed</option>
      <option value="running">Running</option>
      <option value="awaiting_approval">Awaiting Approval</option>
    </select>
  </div>
  <table class="exec-hist-table" id="hist-table">
    <thead>
      <tr>
        <th>Run ID</th>
        <th>Workflow</th>
        <th>Status</th>
        <th>Started</th>
        <th>Duration</th>
        <th>Project</th>
      </tr>
    </thead>
    <tbody id="hist-body">
      <tr><td colspan="6" style="color:#4b5563;text-align:center;padding:32px;">Loading…</td></tr>
    </tbody>
  </table>
</div>
{% endif %}

<script>
/* ═══════════════════════════════════════════════════════════════════
   Execution Viewer — canvas-agnostic, works for all ICDEV workflows
   ═══════════════════════════════════════════════════════════════════ */
(function() {
'use strict';

/* ── Constants ──────────────────────────────────────────────────── */
const STATUS_COLOR = {
  pending:           '#334155',
  running:           '#6366f1',
  success:           '#10b981',
  failed:            '#ef4444',
  timeout:           '#ef4444',
  awaiting_approval: '#f59e0b',
  approved:          '#06b6d4',
  rejected:          '#f97316',
  skipped:           '#4b5563',
  error:             '#ef4444',
};
const STATUS_LABEL = {
  pending:'PENDING', running:'RUNNING', success:'SUCCESS',
  failed:'FAILED', timeout:'TIMEOUT', awaiting_approval:'WAITING',
  approved:'APPROVED', rejected:'REJECTED', skipped:'SKIPPED', error:'ERROR',
};

const NODE_W = 176, NODE_H = 58;   // tool node
const HUM_W  = 68,  HUM_H  = 68;   // human/approval diamond
const H_GAP  = 48,  V_GAP  = 88;   // layout spacing

/* ── Layout engine (no external deps) ─────────────────────────── */
function rankNodes(nodes, edges) {
  const depMap = {};
  nodes.forEach(n => { depMap[n.id] = []; });
  edges.forEach(e => { if (depMap[e.to]) depMap[e.to].push(e.from); });

  const rank = {};
  function r(id) {
    if (id in rank) return rank[id];
    const deps = depMap[id] || [];
    rank[id] = deps.length ? 1 + Math.max(...deps.map(r)) : 0;
    return rank[id];
  }
  nodes.forEach(n => r(n.id));
  return rank;
}

function layoutDag(nodes, edges) {
  if (!nodes.length) return { positioned:{}, posEdges:[], width:400, height:200 };

  const rank = rankNodes(nodes, edges);

  // Group by rank
  const byRank = {};
  nodes.forEach(n => {
    const rv = rank[n.id] || 0;
    (byRank[rv] = byRank[rv] || []).push(n);
  });

  const maxRank = Math.max(...Object.keys(byRank).map(Number));
  const positioned = {};

  // First pass: compute row total widths to find global max
  const rowWidths = [];
  for (let rv = 0; rv <= maxRank; rv++) {
    const rn = byRank[rv] || [];
    const w = rn.reduce((s, n) => s + (isHuman(n) ? HUM_W : NODE_W) + H_GAP, -H_GAP);
    rowWidths.push(w);
  }
  const totalW = Math.max(...rowWidths, 200);

  // Second pass: position nodes
  for (let rv = 0; rv <= maxRank; rv++) {
    const rn = byRank[rv] || [];
    const rowW = rn.reduce((s, n) => s + (isHuman(n) ? HUM_W : NODE_W) + H_GAP, -H_GAP);
    let x = -rowW / 2;
    const cy = rv * (NODE_H + V_GAP) + NODE_H / 2;
    rn.forEach(n => {
      const w = isHuman(n) ? HUM_W : NODE_W;
      const h = isHuman(n) ? HUM_H : NODE_H;
      positioned[n.id] = { x: x + w / 2, y: cy, w, h };
      x += w + H_GAP;
    });
  }

  // Edge waypoints: straight orthogonal with bezier
  const posEdges = edges.map(e => {
    const f = positioned[e.from], t = positioned[e.to];
    if (!f || !t) return null;
    const x1 = f.x, y1 = f.y + f.h / 2;
    const x2 = t.x, y2 = t.y - t.h / 2;
    const cy1 = y1 + (y2 - y1) * 0.4;
    const cy2 = y2 - (y2 - y1) * 0.4;
    return { from: e.from, to: e.to,
      path: `M${x1},${y1} C${x1},${cy1} ${x2},${cy2} ${x2},${y2}` };
  }).filter(Boolean);

  const totalH = (maxRank + 1) * (NODE_H + V_GAP);
  return { positioned, posEdges, width: totalW + 80, height: totalH + 60 };
}

function isHuman(n) { return n.node_type === 'human' || n.node_type === 'approval'; }

/* ── SVG helpers ─────────────────────────────────────────────── */
function svgEl(tag, attrs) {
  const el = document.createElementNS('http://www.w3.org/2000/svg', tag);
  Object.entries(attrs || {}).forEach(([k, v]) => el.setAttribute(k, v));
  return el;
}
function svgText(txt, x, y, cls) {
  const el = svgEl('text', { x, y, 'text-anchor':'middle', 'dominant-baseline':'central' });
  el.setAttribute('class', cls || '');
  el.textContent = txt;
  return el;
}
function truncate(s, n) { return s && s.length > n ? s.slice(0, n - 1) + '…' : (s || ''); }

/* ── Execution Viewer ────────────────────────────────────────── */
const RUN_ID = (document.getElementById('exec-page') || {}).dataset?.runId || '';

window.ExecView = {
  dag: null,          // DAG data from API
  nodeEls: {},        // step_id → SVG group element
  edgeEls: {},        // "from→to" → path element
  selected: null,     // currently selected node id
  _sse: null,
  _panX: 0, _panY: 0, _scale: 1,
  _dragging: false, _dragStart: null,
  _startTime: null,
  _timerInterval: null,

  init() {
    if (!RUN_ID) return;
    this.loadDag();
    this._initPanZoom();
  },

  async loadDag() {
    try {
      const res = await fetch(`/api/studio/runs/${RUN_ID}/dag`);
      if (!res.ok) throw new Error(await res.text());
      const dag = await res.json();
      this.dag = dag;
      this._renderHeader(dag);
      this._renderDag(dag);
      this._renderTimeline(dag);
      this._renderStepRail(dag);
      this._autoSelectFirstProblem(dag);
      // Close approval overlay if the pending node is no longer awaiting
      if (this._pendingApprovalNode) {
        const fresh = (dag.nodes || []).find(n => n.id === this._pendingApprovalNode.id);
        if (!fresh || fresh.status !== 'awaiting_approval') this._closeApprovalOverlay();
      }
      if (dag.is_live) { this._connectSSE(dag); this._startElapsedTick(); }
      else this._startTimer(dag);
      if (dag.is_stalled) this._showStallBanner(
        Date.now() - new Date(dag.started_at).getTime()
      );
    } catch(e) {
      document.getElementById('exec-wf-name').textContent = 'Error loading run';
      console.error(e);
    }
  },

  _renderHeader(dag) {
    document.getElementById('exec-wf-name').textContent = dag.workflow_name || dag.run_id;
    this._setStatusBadge(dag.status);
    if (dag.started_at) {
      this._startTime = new Date(dag.started_at);
      this._updateTimer(dag);
    }
  },

  _setStatusBadge(status) {
    const el = document.getElementById('exec-status-badge');
    el.className = `exec-badge exec-badge--${status}`;
    el.textContent = STATUS_LABEL[status] || status.toUpperCase();
  },

  _updateTimer(dag) {
    const el = document.getElementById('exec-timer');
    if (!this._startTime) return;
    const end = dag.completed_at ? new Date(dag.completed_at) : new Date();
    const ms = end - this._startTime;
    if (ms < 1000)  { el.textContent = ms + 'ms'; return; }
    if (ms < 60000) { el.textContent = (ms/1000).toFixed(1) + 's'; return; }
    el.textContent = Math.floor(ms/60000) + 'm ' + Math.floor((ms%60000)/1000) + 's';
  },

  _startTimer(dag) {
    clearInterval(this._timerInterval);
    if (!dag.completed_at && this._startTime) {
      this._timerInterval = setInterval(() => this._updateTimer(dag), 500);
    } else {
      this._updateTimer(dag);
    }
  },

  _renderDag(dag) {
    const layout = layoutDag(dag.nodes, dag.edges);
    const svg = document.getElementById('dag-svg');
    const vp = document.getElementById('dag-viewport');
    document.getElementById('dag-edges').innerHTML = '';
    document.getElementById('dag-nodes').innerHTML = '';
    this.nodeEls = {};
    this.edgeEls = {};

    // Edges
    layout.posEdges.forEach(e => {
      const path = svgEl('path', { class:'dag-edge', d: e.path });
      document.getElementById('dag-edges').appendChild(path);
      this.edgeEls[`${e.from}→${e.to}`] = path;
    });

    // Nodes
    dag.nodes.forEach(n => {
      const pos = layout.positioned[n.id];
      if (!pos) return;
      const g = svgEl('g', { class:`dag-node node-${n.status}`, 'data-id': n.id });
      g.addEventListener('click', () => ExecView.selectNode(n.id));

      if (isHuman(n)) {
        // Diamond
        const hw = pos.w / 2, hh = pos.h / 2;
        const pts = `${pos.x},${pos.y-hh} ${pos.x+hw},${pos.y} ${pos.x},${pos.y+hh} ${pos.x-hw},${pos.y}`;
        g.appendChild(svgEl('polygon', { points: pts }));
        g.appendChild(svgText(truncate(n.name, 10), pos.x, pos.y - 6, 'node-name'));
        g.appendChild(svgText('gate', pos.x, pos.y + 10, 'node-sub'));
        // Approval hint badge for awaiting_approval nodes
        if (n.status === 'awaiting_approval') {
          g.appendChild(svgText('▶ TAP TO ACT', pos.x, pos.y + hh + 13, 'node-approval-hint'));
        }
        // Click on awaiting_approval diamond → show overlay
        if (n.status === 'awaiting_approval') {
          g.addEventListener('click', (e) => { e.stopPropagation(); ExecView._showApprovalOverlay(n); }, true);
        }
      } else {
        // Rounded rect
        g.appendChild(svgEl('rect', {
          x: pos.x - pos.w/2, y: pos.y - pos.h/2,
          width: pos.w, height: pos.h, rx: 8
        }));
        const toolShort = n.tool ? n.tool.split('/').pop().replace('.py','') : '';
        g.appendChild(svgText(truncate(n.name, 20), pos.x, pos.y - 10, 'node-name'));
        g.appendChild(svgText(truncate(toolShort, 22), pos.x, pos.y + 5, 'node-sub'));
        // Duration / elapsed text
        const durTxt = n.duration_ms > 0
          ? (n.duration_ms >= 1000 ? (n.duration_ms/1000).toFixed(1)+'s' : n.duration_ms+'ms')
          : (n.status === 'running' ? '⏱ 0s' : '');
        if (durTxt) {
          const dt = svgText(durTxt, pos.x, pos.y + 20, 'node-dur');
          if (!['success','failed','timeout','running'].includes(n.status)) dt.classList.add('node-dur-default');
          g.appendChild(dt);
        }
        // Progress bar (timeout % consumed) — visible on running/failed nodes
        const PBY = pos.y + pos.h/2 - 6;
        const PBW = pos.w - 10;
        g.appendChild(svgEl('rect', {
          x: pos.x - pos.w/2 + 5, y: PBY, width: PBW, height: 3, rx: 1,
          fill: '#1e293b', class: 'node-progress-bg'
        }));
        const pct = n.duration_ms > 0 ? Math.min(n.duration_ms / ((n.timeout||300)*1000), 1) : 0;
        g.appendChild(svgEl('rect', {
          x: pos.x - pos.w/2 + 5, y: PBY, width: Math.round(pct * PBW), height: 3, rx: 1,
          class: 'node-progress-bar', 'data-pbw': PBW, 'data-timeout': (n.timeout||300)*1000
        }));
      }
      document.getElementById('dag-nodes').appendChild(g);
      this.nodeEls[n.id] = g;
    });

    // Auto-fit
    this.fitView(layout);
  },

  _renderTimeline(dag) {
    const track = document.getElementById('exec-tl-track');
    track.innerHTML = '';
    if (!dag.started_at || !dag.nodes.length) return;

    const t0 = new Date(dag.started_at).getTime();
    const t1 = dag.completed_at ? new Date(dag.completed_at).getTime() : Date.now();
    const totalMs = Math.max(t1 - t0, 100);
    const trackW = track.parentElement.offsetWidth - 40 || 600;

    dag.nodes.forEach(n => {
      if (!n.started_at) return;
      const ns = new Date(n.started_at).getTime();
      const ne = n.completed_at ? new Date(n.completed_at).getTime() : (n.duration_ms ? ns + n.duration_ms : t1);
      const left = Math.max(0, (ns - t0) / totalMs);
      const w = Math.max(4, ((ne - ns) / totalMs) * trackW);
      const seg = document.createElement('div');
      seg.className = `exec-tl-seg exec-tl-seg--${n.status}`;
      seg.style.width = w + 'px';
      seg.title = `${n.name}: ${n.duration_ms || 0}ms`;
      seg.addEventListener('click', () => ExecView.selectNode(n.id));
      track.appendChild(seg);
      // gap to next
      const gap = document.createElement('div');
      gap.className = 'exec-tl-gap';
      track.appendChild(gap);
    });
  },

  selectNode(id) {
    // Deselect previous
    if (this.selected && this.nodeEls[this.selected]) {
      this.nodeEls[this.selected].classList.remove('dag-node--selected');
    }
    this.selected = id;
    if (this.nodeEls[id]) this.nodeEls[id].classList.add('dag-node--selected');

    const node = (this.dag?.nodes || []).find(n => n.id === id);
    if (!node) return;
    this._showDetail(node);
  },

  _showDetail(node) {
    document.getElementById('exec-detail-empty').style.display = 'none';
    const content = document.getElementById('exec-detail-content');
    content.style.display = 'flex';

    document.getElementById('dd-name').textContent = node.name;
    const badge = document.getElementById('dd-badge');
    badge.className = `exec-badge exec-badge--${node.status}`;
    badge.textContent = STATUS_LABEL[node.status] || node.status.toUpperCase();
    const dur = node.duration_ms >= 1000
      ? (node.duration_ms/1000).toFixed(2)+'s' : (node.duration_ms||0)+'ms';
    document.getElementById('dd-dur').textContent = node.duration_ms ? dur : '';
    document.getElementById('dd-tool').textContent = node.tool || (node.node_type === 'human' ? 'Human approval gate' : '');

    const body = document.getElementById('dd-body');
    let html = '';

    const isGateNode = (node.node_type === 'human' || node.node_type === 'approval');

    if (node.status === 'awaiting_approval') {
      html += `<div class="exec-section">Action Required</div>`;
      html += `<div style="font-size:.78rem;color:#fde68a;margin-bottom:8px;">This step is waiting for approval before the workflow can continue.</div>`;
      html += `<div class="exec-approve-row">`;
      if (node.step_run_id) {
        html += `<button class="exec-btn exec-btn--approve" onclick="ExecView.approveStep('${node.step_run_id}')">✓ Approve</button>`;
        html += `<button class="exec-btn exec-btn--reject"  onclick="ExecView.rejectStep('${node.step_run_id}')">✗ Reject</button>`;
      } else {
        html += `<span style="font-size:.72rem;color:#64748b">Reload the page to get a fresh step_run_id, then approve.</span>`;
      }
      html += `</div>`;
    }

    if (isGateNode && node.status === 'timeout') {
      html += `<div class="exec-section" style="color:#a5b4fc">Gate Re-trigger</div>`;
      html += `<div style="font-size:.72rem;color:#94a3b8;margin-bottom:6px;">The approval gate timed out (likely due to a server restart). Re-triggering it restarts the gate step — the approver can then approve or reject normally.</div>`;
      html += `<button class="dag-retrigger-btn" onclick="ExecView.retryFromStep('${node.id}')">↺ Re-trigger Approval Gate</button>`;
    }

    // ── GNS3 Simulation panel ────────────────────────────────────────────
    const isGns3Step = node.tool && node.tool.includes('gns3_sim');
    if (isGns3Step && node.stdout) {
      let sim = null;
      try { sim = JSON.parse(node.stdout); } catch(e) {}
      if (sim) {
        const modeKey  = (sim.mode || 'dry_run').toLowerCase().replace(/ /g,'_');
        const modeLabel = { dual:'DUAL', gns3_only:'GNS3 ONLY', cloud_only:'CLOUD ONLY', dry_run:'DRY RUN' }[modeKey] || modeKey.toUpperCase();
        const gateColor = sim.gate === 'PASS' ? '#34d399' : sim.gate === 'WARN' ? '#fbbf24' : '#f87171';
        html += `<div class="exec-section" style="color:#38bdf8">GNS3 Simulation</div>`;
        html += `<div class="gns3-panel">`;
        // mode badge + gate
        html += `<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;">`;
        html += `<span class="gns3-mode-badge gns3-mode--${modeKey}">⬡ ${modeLabel}</span>`;
        html += `<span style="font-size:.72rem;font-weight:700;color:${gateColor}">${sim.gate === 'PASS' ? '✓' : sim.gate === 'WARN' ? '⚠' : '✗'} ${sim.gate || '—'}</span>`;
        html += `</div>`;
        // stats grid
        html += `<div class="gns3-stats-grid">`;
        html += `<div class="gns3-stat"><div class="gns3-stat-val">${sim.nodes_deployed ?? '—'}</div><div class="gns3-stat-lbl">Nodes</div></div>`;
        html += `<div class="gns3-stat"><div class="gns3-stat-val">${sim.links_deployed ?? '—'}</div><div class="gns3-stat-lbl">Links</div></div>`;
        html += `<div class="gns3-stat"><div class="gns3-stat-val">${sim.probes_passed ?? 0}/${sim.probes_total ?? 0}</div><div class="gns3-stat-lbl">Probes</div></div>`;
        html += `<div class="gns3-stat"><div class="gns3-stat-val">${sim.docker_services_started ?? 0}</div><div class="gns3-stat-lbl">Docker</div></div>`;
        html += `</div>`;
        // probe results
        if (sim.probe_results && sim.probe_results.length) {
          html += `<div class="gns3-probes">`;
          sim.probe_results.forEach(p => {
            const icon = p.pass ? '<span class="gns3-probe-icon" style="color:#34d399">✓</span>' : '<span class="gns3-probe-icon" style="color:#f87171">✗</span>';
            html += `<div class="gns3-probe-row">${icon}<span class="gns3-probe-name">${this._esc(p.name)}</span><span class="gns3-probe-detail">${this._esc((p.detail||'').slice(0,40))}</span></div>`;
          });
          html += `</div>`;
        }
        // open GNS3 UI button
        if (sim.gns3_project_id) {
          const gns3Base = 'http://localhost:3080';
          html += `<a class="gns3-open-btn" href="${gns3Base}/" target="_blank">⬡ Open in GNS3</a>`;
        }
        // training artifact link
        const trainArt = (sim.artifacts || []).find(a => a.name === 'Training Pair');
        if (trainArt) {
          const enc = encodeURIComponent(trainArt.path || '').replace(/%2F/g,'/');
          html += `<a class="gns3-training-link" href="/api/artifacts/${enc}" target="_blank">🧠 Training Pair → /finetune/datasets</a>`;
        }
        html += `</div>`;
      }
    }

    if (node.artifacts && node.artifacts.length) {
      html += `<div class="exec-section">Artifacts (${node.artifacts.length})</div>`;
      node.artifacts.forEach(a => {
        const enc = encodeURIComponent(a.path || '').replace(/%2F/g, '/');
        html += `<a class="exec-artifact-link" href="/api/artifacts/${enc}" target="_blank">${a.name || a.path}</a>`;
      });
    }

    if (node.stderr) {
      html += `<div class="exec-section" style="color:#f87171">Error Output</div>`;
      html += `<pre class="exec-output" style="color:#fca5a5;border-color:#7f1d1d">${this._esc(node.stderr.slice(0,1200))}</pre>`;
    }

    if (node.stdout) {
      let preview = node.stdout;
      try { preview = JSON.stringify(JSON.parse(node.stdout), null, 2); } catch(e) {}
      html += `<div class="exec-section">Output</div><pre class="exec-output">${this._esc(preview.slice(0,2000))}</pre>`;
    }

    if (node.started_at) {
      html += `<div class="exec-section">Timing</div>`;
      const startT = new Date(node.started_at);
      html += `<div style="font-size:.72rem;color:#64748b;font-family:monospace">Started: ${startT.toLocaleTimeString()}</div>`;
      if (node.completed_at) {
        const endT = new Date(node.completed_at);
        const durMs = endT - startT;
        const durStr = durMs >= 1000 ? (durMs/1000).toFixed(2)+'s' : durMs+'ms';
        html += `<div style="font-size:.72rem;color:#64748b;font-family:monospace">Completed: ${endT.toLocaleTimeString()} (${durStr})</div>`;
      } else if (node.status === 'running') {
        html += `<div style="font-size:.72rem;color:#818cf8;font-family:monospace" id="dd-elapsed-live">Running…</div>`;
      }
    }

    // Actions for failed/errored steps
    const isError = ['failed','error','timeout'].includes(node.status);
    if (isError) {
      html += `<div class="exec-section" style="color:#5eead4">Actions</div>`;
      // Direct retry — no LLM, immediate
      if (!isGateNode) {
        html += `<button class="dag-retrigger-btn" style="margin-bottom:6px;" onclick="ExecView.retryFromStep('${node.id}')">↺ Retry from this step</button>`;
      }
      // LLM-powered heal — diagnoses root cause then acts
      html += `<div style="font-size:.7rem;color:#64748b;margin:6px 0 4px;">Need root-cause analysis first?</div>`;
      html += `<button class="exec-heal-btn" id="heal-btn-${node.id}" onclick="ExecView.healStep('${node.step_run_id||''}','${node.id}')">🔧 Auto-Heal (LLM Triage)</button>`;
    }

    if (node._diagnosis) {
      html += `<div class="exec-section" style="color:#5eead4">Diagnosis</div>`;
      html += `<div class="exec-diagnosis-box">${this._esc(node._diagnosis)}</div>`;
    }
    if (node._action_type || node._action_taken) {
      const AT_BADGE = { retry:'exec-act--retry', skip:'exec-act--skip', escalate:'exec-act--escalate', wait:'exec-act--wait' };
      const AT_RESULT_COLOR = { running:'#34d399', skipped:'#94a3b8', escalated:'#f87171', scheduled:'#fbbf24', failed:'#f87171' };
      const AT_RESULT_ICON  = { running:'▶', skipped:'↷', escalated:'🚨', scheduled:'⏰', failed:'✕' };
      const badgeCls    = AT_BADGE[node._action_type]        || 'exec-act--unknown';
      const resultColor = AT_RESULT_COLOR[node._action_result] || '#94a3b8';
      const resultIcon  = AT_RESULT_ICON[node._action_result]  || '•';
      const resultText  = (node._action_result || '').toUpperCase();
      html += `<div class="exec-section" style="color:#fbbf24">Action Taken</div>`;
      html += `<div class="exec-action-badge-row">`;
      if (node._action_type) html += `<span class="exec-badge ${badgeCls}" style="font-size:.65rem;">${node._action_type.toUpperCase()}</span>`;
      if (node._action_result) html += `<span style="font-size:.72rem;font-family:monospace;color:${resultColor}">${resultIcon} ${resultText}</span>`;
      html += `</div>`;
      if (node._action_taken) html += `<div class="exec-action-box">${this._esc(node._action_taken)}</div>`;
    }

    body.innerHTML = html;

    // Live elapsed tick for running step detail
    if (node.status === 'running' && node.started_at) {
      const startMs = new Date(node.started_at).getTime();
      if (this._detailElapsedInt) clearInterval(this._detailElapsedInt);
      this._detailElapsedInt = setInterval(() => {
        const el = document.getElementById('dd-elapsed-live');
        if (!el) { clearInterval(this._detailElapsedInt); return; }
        const s = Math.floor((Date.now() - startMs) / 1000);
        el.textContent = `Running… ${s >= 60 ? Math.floor(s/60)+'m '+s%60+'s' : s+'s'}`;
      }, 1000);
    } else {
      if (this._detailElapsedInt) { clearInterval(this._detailElapsedInt); this._detailElapsedInt = null; }
    }
  },

  _esc(s) { return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); },

  async approveStep(stepRunId) {
    const run = this.dag;
    this._closeApprovalOverlay();
    const resp = await fetch(`/api/studio/workflows/runs/${run.run_id}/steps/${stepRunId}/approve`,
      { method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({actor:'dashboard'}) });
    if (!resp.ok) {
      // Already resolved (approved/rejected/timed-out) — just refresh to current state
      const err = await resp.json().catch(() => ({}));
      const msg = err.error || 'Step was already resolved';
      // Show brief notice in detail panel then reload
      const body = document.getElementById('dd-body');
      if (body) body.innerHTML = `<div style="font-size:.75rem;color:#fbbf24;padding:8px 0">ℹ ${this._esc(msg)} — refreshing…</div>` + body.innerHTML;
    }
    await this.loadDag();
  },

  async rejectStep(stepRunId) {
    const reason = prompt('Rejection reason (optional):') || '';
    const run = this.dag;
    this._closeApprovalOverlay();
    const resp = await fetch(`/api/studio/workflows/runs/${run.run_id}/steps/${stepRunId}/reject`,
      { method:'POST', headers:{'Content-Type':'application/json'},
        body: JSON.stringify({actor:'dashboard', reason}) });
    if (!resp.ok) {
      const err = await resp.json().catch(() => ({}));
      const body = document.getElementById('dd-body');
      if (body) body.innerHTML = `<div style="font-size:.75rem;color:#fbbf24;padding:8px 0">ℹ ${this._esc(err.error || 'Step was already resolved')} — refreshing…</div>` + body.innerHTML;
    }
    await this.loadDag();
  },

  /* ── SSE Live updates ────────────────────────── */
  _connectSSE(dag) {
    if (this._sse) this._sse.close();
    this._sse = new EventSource(dag.stream_url);
    this._startTimer(dag);

    this._sse.onmessage = (e) => {
      try {
        const ev = JSON.parse(e.data);
        this._lastSseEvent = Date.now(); // track last activity for stall detection
        if (ev.type === 'heartbeat') return;
        if (ev.type === 'step_started') this._onStepStarted(ev);
        if (ev.type === 'step_done') this._onStepDone(ev);
        if (ev.type === 'step_awaiting_approval') this._onStepGate(ev);
        if (ev.type === 'run_complete') this._onRunComplete(ev);
        if (ev.type === 'error') { this._setStatusBadge('error'); this._sse.close(); }
      } catch(err) { console.warn('SSE parse error', err); }
    };
    this._sse.onerror = () => {
      // Reconnect once if run still active
      setTimeout(() => { if (this.dag?.is_live) this.loadDag(); }, 3000);
    };
  },

  _onStepStarted(ev) {
    this._updateNodeStatus(ev.step_id, 'running');
    const node = (this.dag?.nodes || []).find(n => n.id === ev.step_id);
    if (node) { node.status = 'running'; node.started_at = ev.started_at || new Date().toISOString(); }
    this._renderStepRail(this.dag);
    // Auto-select newly started step if nothing is selected
    if (!this.selected) this.selectNode(ev.step_id);
  },

  _onStepDone(ev) {
    this._updateNodeStatus(ev.step_id, ev.status);
    // Update node data in dag
    const node = (this.dag?.nodes || []).find(n => n.id === ev.step_id);
    if (node) {
      node.status = ev.status;
      node.duration_ms = ev.duration_ms || 0;
      node.completed_at = ev.completed_at || new Date().toISOString();
      if (ev.output_preview) node.stdout = ev.output_preview;
      if (ev.error) node.stderr = ev.error;
      if (ev.artifacts) node.artifacts = ev.artifacts;
    }
    this._renderTimeline(this.dag);
    this._renderStepRail(this.dag);
    if (this.selected === ev.step_id && node) this._showDetail(node);
    this._refreshEdgeColors();
    // Auto-surface errors
    if (['failed','error','timeout'].includes(ev.status)) {
      this.selectNode(ev.step_id);
    }
  },

  _onStepGate(ev) {
    this._updateNodeStatus(ev.step_id, 'awaiting_approval');
    const node = (this.dag?.nodes || []).find(n => n.id === ev.step_id);
    if (node) { node.status = 'awaiting_approval'; node.step_run_id = ev.step_run_id; }
    // Re-render so the "TAP TO ACT" badge appears on the diamond
    this._renderDag(this.dag);
    // Auto-show the approval overlay so it's impossible to miss
    if (node) setTimeout(() => this._showApprovalOverlay(node), 400);
  },

  _onRunComplete(ev) {
    this._setStatusBadge(ev.status);
    if (this._sse) this._sse.close();
    clearInterval(this._timerInterval);
    if (this._elapsedInterval) { clearInterval(this._elapsedInterval); this._elapsedInterval = null; }
    document.getElementById('exec-stall-banner').style.display = 'none';
    if (this.dag) { this.dag.status = ev.status; this.dag.is_live = false; }
    this._updateTimer(this.dag || {});
    // Reload for final artifact data
    setTimeout(() => this.loadDag(), 800);
  },

  _updateNodeStatus(stepId, status) {
    const el = this.nodeEls[stepId];
    if (!el) return;
    const prev = el.className.baseVal.split(' ').find(c => c.startsWith('node-') && c !== 'dag-node');
    if (prev) el.classList.remove(prev);
    el.classList.add(`node-${status}`);

    // Update duration text if present
    const node = (this.dag?.nodes || []).find(n => n.id === stepId);
    if (node) node.status = status;
  },

  _refreshEdgeColors() {
    if (!this.dag) return;
    const successIds = new Set((this.dag.nodes || []).filter(n => n.status === 'success' || n.status === 'approved').map(n => n.id));
    Object.entries(this.edgeEls).forEach(([key, path]) => {
      const [from] = key.split('→');
      path.setAttribute('class', successIds.has(from) ? 'dag-edge dag-edge--active' : 'dag-edge');
      path.setAttribute('marker-end', successIds.has(from) ? 'url(#arrowhead-active)' : 'url(#arrowhead)');
    });
  },

  /* ── Step Rail ──────────────────────────────── */
  _renderStepRail(dag) {
    const rail = document.getElementById('exec-rail-list');
    const wrap = document.getElementById('exec-step-rail');
    if (!rail || !dag?.nodes?.length) return;
    wrap.style.display = '';
    const hasError = dag.nodes.some(n => ['failed','error','timeout'].includes(n.status));

    rail.innerHTML = dag.nodes.map(n => {
      const isErr = ['failed','error','timeout'].includes(n.status);
      const isRun = n.status === 'running';
      const durMs = n.duration_ms || 0;
      const durStr = durMs > 0
        ? (durMs >= 60000 ? Math.floor(durMs/60000)+'m'+(Math.floor((durMs%60000)/1000))+'s'
           : durMs >= 1000 ? (durMs/1000).toFixed(1)+'s' : durMs+'ms')
        : '';
      const sel = this.selected === n.id ? ' exec-rail-item--selected' : '';
      const errCls = isErr ? ' exec-rail-item--error' : '';
      return `<div class="exec-rail-item${sel}${errCls}" data-rail-id="${n.id}" onclick="ExecView.selectNode('${n.id}')">
        <span class="exec-rail-dot exec-rail-dot--${n.status}"></span>
        <span class="exec-rail-name" title="${this._esc(n.name)}">${this._esc(n.name)}</span>
        ${isRun ? `<span class="exec-rail-elapsed" data-step-id="${n.id}">0s</span>` : ''}
        ${durStr && !isRun ? `<span class="exec-rail-dur">${durStr}</span>` : ''}
        ${isErr ? `<span class="exec-rail-err-hint">✕</span>` : ''}
      </div>`;
    }).join('');
  },

  /* ── Auto-select first problem node ─────────── */
  _autoSelectFirstProblem(dag) {
    if (this.selected) return; // don't override user selection
    // Pending approval gates take highest priority
    const gateNode = (dag.nodes || []).find(n => n.status === 'awaiting_approval');
    if (gateNode) {
      this.selectNode(gateNode.id);
      setTimeout(() => this._showApprovalOverlay(gateNode), 400);
      return;
    }
    const errNode = (dag.nodes || []).find(n => ['failed','error','timeout'].includes(n.status));
    if (errNode) { this.selectNode(errNode.id); return; }
    const runNode = (dag.nodes || []).find(n => n.status === 'running');
    if (runNode) this.selectNode(runNode.id);
  },

  /* ── 1-second elapsed tick for running nodes ── */
  _startElapsedTick() {
    if (this._elapsedInterval) clearInterval(this._elapsedInterval);
    this._lastSseEvent = Date.now();
    this._elapsedInterval = setInterval(() => {
      if (!this.dag) return;
      let hasRunning = false;
      this.dag.nodes.forEach(n => {
        if (n.status !== 'running' || !n.started_at) return;
        hasRunning = true;
        const elapsedMs = Date.now() - new Date(n.started_at).getTime();
        const s = Math.floor(elapsedMs / 1000);
        const txt = s >= 60 ? `${Math.floor(s/60)}m${s%60}s` : `${s}s`;
        // Update rail elapsed span
        document.querySelectorAll(`.exec-rail-elapsed[data-step-id="${n.id}"]`).forEach(el => {
          el.textContent = txt;
        });
        // Update node duration text in DAG
        const g = this.nodeEls[n.id];
        if (g) {
          const dt = g.querySelector('.node-dur');
          if (dt) dt.textContent = '⏱ ' + txt;
          // Update progress bar
          const pb = g.querySelector('.node-progress-bar');
          if (pb) {
            const timeoutMs = Number(pb.dataset.timeout) || 300000;
            const pbw = Number(pb.dataset.pbw) || 160;
            pb.setAttribute('width', String(Math.min(Math.round((elapsedMs / timeoutMs) * pbw), pbw)));
          }
        }
      });
      // Stall detection: no SSE + run > 90s old + at least one running step
      if (hasRunning && this.dag.status === 'running') {
        const sinceLastSse = Date.now() - (this._lastSseEvent || Date.now());
        const runAge = Date.now() - new Date(this.dag.started_at).getTime();
        if (sinceLastSse > 90000 && runAge > 90000) {
          this._showStallBanner(runAge);
        }
      }
    }, 1000);
  },

  /* ── Stall banner ────────────────────────────── */
  _showStallBanner(ageMs) {
    const banner = document.getElementById('exec-stall-banner');
    if (!banner) return;
    banner.style.display = 'flex';
    const s = Math.floor(ageMs / 1000);
    const el = document.getElementById('stall-elapsed');
    if (el) el.textContent = s >= 60 ? `${Math.floor(s/60)}m ${s%60}s` : `${s}s`;
  },

  /* ── Approval overlay ───────────────────────── */
  _pendingApprovalNode: null,

  _showApprovalOverlay(node) {
    this._pendingApprovalNode = node;
    const overlay = document.getElementById('dag-approval-overlay');
    const nameEl  = document.getElementById('dao-step-name');
    if (!overlay) return;
    nameEl.textContent = `"${node.name}" is waiting for your decision.`;

    // Position over the DAG node's screen location
    const g = this.nodeEls[node.id];
    if (g) {
      const wrap = document.getElementById('exec-dag-wrap');
      const wrapRect = wrap.getBoundingClientRect();
      const nodeRect = g.getBoundingClientRect();
      const top  = nodeRect.bottom - wrapRect.top + 8;
      const left = Math.min(
        nodeRect.left - wrapRect.left + nodeRect.width / 2 - 100,
        wrapRect.width - 220
      );
      overlay.style.top  = Math.max(top, 8) + 'px';
      overlay.style.left = Math.max(left, 8) + 'px';
    }
    overlay.style.display = 'block';

    // Also highlight in the detail panel
    this.selectNode(node.id);

    // Close on outside click
    setTimeout(() => {
      const closeOutside = (e) => {
        if (!overlay.contains(e.target)) { this._closeApprovalOverlay(); document.removeEventListener('click', closeOutside); }
      };
      document.addEventListener('click', closeOutside);
    }, 100);
  },

  _closeApprovalOverlay() {
    const overlay = document.getElementById('dag-approval-overlay');
    if (overlay) overlay.style.display = 'none';
    this._pendingApprovalNode = null;
  },

  async _doApprove() {
    const node = this._pendingApprovalNode;
    if (!node) return;
    this._closeApprovalOverlay();
    if (node.step_run_id) {
      await this.approveStep(node.step_run_id);
    } else {
      alert('No step_run_id available — reload the page to get a fresh gate instance, then approve.');
    }
  },

  async _doReject() {
    const node = this._pendingApprovalNode;
    if (!node) return;
    this._closeApprovalOverlay();
    if (node.step_run_id) {
      await this.rejectStep(node.step_run_id);
    } else {
      alert('No step_run_id available — reload the page to get a fresh gate instance, then reject.');
    }
  },

  /* ── Retry from a specific step ─────────────── */
  async retryFromStep(stepId) {
    const runId = this.dag?.run_id;
    if (!runId || !stepId) return;
    const btn = document.querySelector(`[onclick*="retryFromStep('${stepId}')"]`);
    if (btn) { btn.disabled = true; btn.textContent = '⏳ Spawning…'; }
    try {
      const resp = await fetch(`/api/studio/runs/${runId}/retry-from`, {
        method: 'POST', headers: {'Content-Type':'application/json'},
        body: JSON.stringify({ step_id: stepId }),
      });
      const data = await resp.json();
      if (data.ok) {
        setTimeout(() => ExecView.loadDag(), 1200);
      } else {
        alert('Retry failed: ' + (data.message || data.error || 'unknown error'));
        if (btn) { btn.disabled = false; btn.textContent = '↺ Re-trigger Approval Gate'; }
      }
    } catch(e) {
      console.error('retryFromStep failed', e);
      if (btn) { btn.disabled = false; btn.textContent = '↺ Re-trigger Approval Gate'; }
    }
  },

  /* ── Self-Heal ───────────────────────────────── */
  async healStep(stepRunId, stepId) {
    const runId = this.dag?.run_id;
    if (!runId) return;
    const btn = document.getElementById(`heal-btn-${stepId}`);
    if (btn) { btn.disabled = true; btn.textContent = '⏳ Diagnosing…'; }
    try {
      const resp = await fetch(`/api/studio/runs/${runId}/heal`, {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ step_id: stepId, step_run_id: stepRunId })
      });
      const data = await resp.json();
      const node = (this.dag?.nodes || []).find(n => n.id === stepId);
      if (node) {
        node._diagnosis    = data.diagnosis    || '(no diagnosis)';
        node._action_type  = data.action_type  || '';
        node._action_taken = data.action_taken || data.suggested_action || '';
        node._action_result= data.action_result|| '';
        if (this.selected === stepId) this._showDetail(node);
      }
      if (btn) { btn.disabled = false; btn.textContent = '🔧 Re-Heal'; }
      // If AI spawned a new worker thread, reload the DAG + reconnect SSE
      if (data.action_result === 'running') {
        setTimeout(() => ExecView.loadDag(), 1500);
      }
    } catch(e) {
      if (btn) { btn.disabled = false; btn.textContent = '🔧 Auto-Heal This Step'; }
      console.error('Heal failed', e);
    }
  },

  async healRun() {
    const problem = (this.dag?.nodes || []).find(n => ['failed','error','timeout'].includes(n.status));
    if (problem) {
      this.selectNode(problem.id);
      await this.healStep(problem.step_run_id || '', problem.id);
    } else {
      // Stalled run — diagnose without a specific step
      const runId = this.dag?.run_id;
      if (!runId) return;
      const resp = await fetch(`/api/studio/runs/${runId}/heal`, {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ step_id: '', step_run_id: '' })
      });
      const data = await resp.json();
      // Show run-level triage inline in the detail panel
      const triageNode = {
        id: '__run_triage__', name: 'Run-Level Auto-Heal', status: 'failed',
        tool: 'genesis-style reflex', artifacts: [],
        _diagnosis:    data.diagnosis    || '(no diagnosis)',
        _action_type:  data.action_type  || '',
        _action_taken: data.action_taken || data.suggested_action || '',
        _action_result:data.action_result|| '',
      };
      this._showDetail(triageNode);
      if (data.action_result === 'running') setTimeout(() => ExecView.loadDag(), 1500);
    }
  },

  /* ── Pan / Zoom ────────────────────────────── */
  fitView(layout) {
    const wrap = document.getElementById('exec-dag-wrap');
    const W = wrap.offsetWidth || 800;
    const H = wrap.offsetHeight || 600;
    const lw = layout?.width || 600;
    const lh = layout?.height || 400;
    const s = Math.min(W / (lw + 80), H / (lh + 80), 1.4) * 0.9;
    this._scale = s;
    this._panX = W / 2;
    this._panY = (lh * s) / 2 + 30;
    this._applyTransform();
  },

  zoom(factor) {
    this._scale = Math.min(Math.max(this._scale * factor, 0.2), 3);
    this._applyTransform();
  },

  _applyTransform() {
    const vp = document.getElementById('dag-viewport');
    if (vp) vp.setAttribute('transform', `translate(${this._panX},${this._panY}) scale(${this._scale})`);
  },

  _initPanZoom() {
    const svg = document.getElementById('dag-svg');
    if (!svg) return;
    svg.addEventListener('wheel', e => {
      e.preventDefault();
      this.zoom(e.deltaY < 0 ? 1.1 : 0.9);
    }, { passive: false });
    svg.addEventListener('mousedown', e => {
      if (e.target.closest('.dag-node')) return;
      this._dragging = true;
      this._dragStart = { x: e.clientX - this._panX, y: e.clientY - this._panY };
    });
    window.addEventListener('mousemove', e => {
      if (!this._dragging) return;
      this._panX = e.clientX - this._dragStart.x;
      this._panY = e.clientY - this._dragStart.y;
      this._applyTransform();
    });
    window.addEventListener('mouseup', () => { this._dragging = false; });
  },
};

/* ── History list (no run_id) ────────────────────────────────── */
window.HistView = {
  _runs: [],
  async init() {
    try {
      const res = await fetch('/api/studio/runs?limit=200');
      this._runs = await res.json();
      this.render(this._runs);
    } catch(e) {
      document.getElementById('hist-body').innerHTML =
        '<tr><td colspan="6" style="color:#ef4444;padding:20px;text-align:center">Failed to load runs</td></tr>';
    }
  },
  filter() {
    const q = document.getElementById('hist-search').value.toLowerCase();
    const s = document.getElementById('hist-status').value;
    const filtered = this._runs.filter(r =>
      (!q || r.run_id.includes(q) || (r.workflow_name||'').toLowerCase().includes(q)) &&
      (!s || r.status === s)
    );
    this.render(filtered);
  },
  render(runs) {
    if (!runs.length) {
      document.getElementById('hist-body').innerHTML =
        '<tr><td colspan="6" style="color:#4b5563;text-align:center;padding:32px;">No runs found</td></tr>';
      return;
    }
    document.getElementById('hist-body').innerHTML = runs.map(r => {
      const started = r.started_at ? new Date(r.started_at).toLocaleString() : '—';
      let dur = '—';
      if (r.started_at && r.completed_at) {
        const ms = new Date(r.completed_at) - new Date(r.started_at);
        dur = ms >= 60000 ? Math.floor(ms/60000)+'m '+Math.floor((ms%60000)/1000)+'s' : (ms/1000).toFixed(1)+'s';
      }
      const color = STATUS_COLOR[r.status] || '#64748b';
      return `<tr>
        <td><a class="exec-hist-link" href="/studio/execution/${r.run_id}">${r.run_id}</a></td>
        <td class="exec-hist-wf">${r.workflow_name || '—'}</td>
        <td><span class="exec-badge exec-badge--${r.status}" style="font-size:.68rem;">${STATUS_LABEL[r.status]||r.status}</span></td>
        <td class="exec-hist-time">${started}</td>
        <td class="exec-hist-time">${dur}</td>
        <td class="exec-hist-pid">${r.project_id||'—'}</td>
      </tr>`;
    }).join('');
  },
};

/* ── Bootstrap ──────────────────────────────────────────────── */
document.addEventListener('DOMContentLoaded', () => {
  if (document.getElementById('exec-page')) {
    ExecView.init();
  } else if (document.getElementById('exec-hist-page')) {
    HistView.init();
  }
});

})();
</script>
{% endblock %}