{# -*- CUI // SP-CTI -*-
  Live Activity Panel — shows all in_progress kanban tasks with subprocess
  staleness indicators. Auto-hides when no tasks are running.

  Include above the kanban board in any page:
      {% include "_live_activity.html" %}

  Staleness logic (server-computed):
    "active"  — scheduler log updated < 3 min ago  → green pulse
    "warning" — scheduler quiet 3-10 min           → amber, no pulse
    "stale"   — scheduler quiet > 10 min            → red, zombie warning
    "unknown" — log not found (scheduler never ran) → grey
#}

<section id="live-activity-panel" style="display:none; margin-bottom:1.25rem;">
  <div style="display:flex; align-items:center; gap:0.6rem; margin-bottom:0.6rem;">
    <span id="la-scheduler-dot" class="la-dot la-dot-unknown" title="Scheduler status"></span>
    <h2 style="margin:0; font-size:1.05rem; color:var(--text-primary); letter-spacing:0.01em;">
      Live Activity
    </h2>
    <span id="la-scheduler-label" style="font-size:0.75rem; color:var(--text-secondary); margin-left:0.2rem;"></span>
    <span style="margin-left:auto; font-size:0.72rem; color:var(--text-muted);" id="la-last-refresh"></span>
  </div>
  <div id="la-task-list"></div>
</section>

<style>
/* Live Activity Panel */
.la-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0; display: inline-block;
}
.la-dot-active  { background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.7);
                  animation: la-pulse 1.6s ease-in-out infinite; }
.la-dot-warning { background: #f59e0b; }
.la-dot-stale   { background: #ef4444; }
.la-dot-unknown { background: #6b7280; }

@keyframes la-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.la-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border-color, #2a2a40);
  background: var(--bg-card, #16213e);
  margin-bottom: 0.45rem;
  transition: border-color 0.2s;
}
.la-card:last-child { margin-bottom: 0; }
.la-card-active  { border-left: 3px solid #22c55e; }
.la-card-warning { border-left: 3px solid #f59e0b; }
.la-card-stale   { border-left: 3px solid #ef4444; }
.la-card-unknown { border-left: 3px solid #6b7280; }

.la-task-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.la-task-dot-active  { background: #22c55e;
                        animation: la-pulse 1.6s ease-in-out infinite; }
.la-task-dot-warning { background: #f59e0b; }
.la-task-dot-stale   { background: #ef4444; }
.la-task-dot-unknown { background: #6b7280; }

.la-task-title {
  font-size: 0.88rem; font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.la-task-meta {
  font-size: 0.74rem; color: var(--text-secondary, #a0a0b8);
  margin-top: 0.15rem; display: flex; gap: 0.5rem; flex-wrap: wrap;
  align-items: center;
}
.la-tag {
  display: inline-block; padding: 0.08rem 0.35rem; border-radius: 3px;
  font-size: 0.68rem; font-weight: 600;
}
.la-tag-critical { background: rgba(220,53,69,0.18); color: #ff6b7a;
                   border: 1px solid rgba(220,53,69,0.4); }
.la-tag-high     { background: rgba(255,152,0,0.18); color: #ffb74d;
                   border: 1px solid rgba(255,152,0,0.4); }
.la-tag-medium   { background: rgba(33,150,243,0.18); color: #6db3f8;
                   border: 1px solid rgba(33,150,243,0.4); }
.la-tag-low      { background: rgba(120,144,156,0.18); color: #b0bec5;
                   border: 1px solid rgba(120,144,156,0.35); }
.la-tag-warn     { background: rgba(239,68,68,0.15); color: #fca5a5;
                   border: 1px solid rgba(239,68,68,0.35); }

.la-elapsed {
  font-family: monospace; font-size: 0.8rem;
  color: var(--text-secondary); text-align: right;
  white-space: nowrap;
}
.la-elapsed-long { color: #f59e0b; }
.la-elapsed-very-long { color: #ef4444; }

.la-zombie-banner {
  padding: 0.5rem 0.8rem; border-radius: 6px; font-size: 0.8rem;
  background: rgba(239,68,68,0.12); border: 1px solid rgba(239,68,68,0.35);
  color: #fca5a5; margin-bottom: 0.6rem; display: flex; gap: 0.5rem;
  align-items: center;
}
</style>

<script>
(function () {
  if (window._LA_LOADED) return;
  window._LA_LOADED = true;

  var POLL_MS = 30000;
  // Task timeout — same as kanban scheduler MAX_EXECUTION_SECONDS (900s).
  // A task whose agent log is older than this is almost certainly a zombie.
  var TASK_TIMEOUT_SECS = 900;

  function fmtElapsed(secs) {
    if (secs == null) return '?';
    if (secs < 60)   return secs + 's';
    if (secs < 3600) return Math.floor(secs / 60) + 'm ' + (secs % 60) + 's';
    var h = Math.floor(secs / 3600);
    var m = Math.floor((secs % 3600) / 60);
    return h + 'h ' + m + 'm';
  }

  function escapeHTML(s) {
    return String(s || '').replace(/[&<>"']/g, function(c) {
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];
    });
  }

  // Per-task liveness based on agent log file age (task_log_age_secs).
  // This is INDEPENDENT of the scheduler heartbeat — tells you whether
  // this specific subprocess is still writing output.
  //
  //  null        → "new"     log not yet created (just dispatched)
  //  0 – 300s    → "active"  agent wrote output in the last 5 min
  //  300 – 900s  → "quiet"   agent silent 5-15 min (thinking or stuck)
  //  > 900s      → "suspect" log older than task timeout → zombie
  function taskLiveness(logAgeSecs) {
    if (logAgeSecs == null) return 'new';
    if (logAgeSecs > TASK_TIMEOUT_SECS) return 'suspect';
    if (logAgeSecs > 300) return 'quiet';
    return 'active';
  }

  // Map liveness to CSS dot class (reuses existing la-task-dot-* classes).
  var LIVENESS_DOT = {
    active:  'la-task-dot-active',
    quiet:   'la-task-dot-warning',
    suspect: 'la-task-dot-stale',
    new:     'la-task-dot-unknown',
  };
  var LIVENESS_CARD = {
    active:  'la-card-active',
    quiet:   'la-card-warning',
    suspect: 'la-card-stale',
    new:     'la-card-unknown',
  };
  var LIVENESS_LABEL = {
    active:  'writing output',
    quiet:   'quiet',
    suspect: 'no output — possible zombie',
    new:     'just dispatched',
  };

  function taskCardHTML(t) {
    var liveness  = taskLiveness(t.task_log_age_secs);
    var dotClass  = LIVENESS_DOT[liveness];
    var cardClass = LIVENESS_CARD[liveness];
    var pri       = (t.priority || 'medium').toLowerCase();
    var elapsed   = fmtElapsed(t.elapsed_dispatch_secs);

    // Elapsed colour: amber > 15 min, red > task timeout
    var elStyle = '';
    if (t.elapsed_dispatch_secs > TASK_TIMEOUT_SECS) elStyle = 'color:#ef4444;';
    else if (t.elapsed_dispatch_secs > 900) elStyle = 'color:#f59e0b;';

    var livenessTitle = 'Agent log: ' + (t.task_log_age_secs != null
      ? fmtElapsed(t.task_log_age_secs) + ' since last output'
      : 'no log yet');

    var meta = [];
    meta.push('<span class="la-tag la-tag-' + escapeHTML(pri) + '">' + escapeHTML(pri) + '</span>');
    meta.push('<span>' + escapeHTML(t.task_type || 'task') + '</span>');

    // Last-output chip — the key "is it actually working?" signal
    if (t.task_log_age_secs != null) {
      var outputStyle = liveness === 'suspect'
        ? 'color:#fca5a5; font-weight:600;'
        : liveness === 'quiet' ? 'color:#fcd34d;' : 'color:#86efac;';
      meta.push(
        '<span style="' + outputStyle + '" title="' + escapeHTML(livenessTitle) + '">'
        + (liveness === 'suspect'
            ? '&#9888; zombie? last output ' + fmtElapsed(t.task_log_age_secs) + ' ago'
            : 'last output ' + fmtElapsed(t.task_log_age_secs) + ' ago')
        + '</span>'
      );
    } else {
      meta.push('<span style="color:var(--text-muted);">starting up...</span>');
    }

    if (t.dispatch_source) meta.push('<span style="color:var(--text-muted);">' + escapeHTML(t.dispatch_source) + '</span>');
    if (t.failure_count && t.failure_count > 0) {
      meta.push('<span class="la-tag la-tag-warn">&#9888; ' + t.failure_count + ' prior failure' + (t.failure_count > 1 ? 's' : '') + '</span>');
    }

    return '<div class="la-card ' + cardClass + '">'
      + '<span class="la-task-dot ' + dotClass + '" title="' + escapeHTML(livenessTitle) + '"></span>'
      + '<div style="min-width:0;">'
      + '  <div class="la-task-title" title="' + escapeHTML(t.id) + '">'
      + '    <span style="font-size:0.72rem; color:var(--text-muted); font-weight:400; margin-right:0.3rem;">' + escapeHTML(t.id) + '</span>'
      + escapeHTML(t.title)
      + '  </div>'
      + '  <div class="la-task-meta">' + meta.join('') + '</div>'
      + '</div>'
      + '<div class="la-elapsed" style="' + elStyle + '" title="Total running: ' + elapsed + '">'
      + elapsed
      + '</div>'
      + '</div>';
  }

  function render(data) {
    var panel    = document.getElementById('live-activity-panel');
    var taskList = document.getElementById('la-task-list');
    var schDot   = document.getElementById('la-scheduler-dot');
    var schLabel = document.getElementById('la-scheduler-label');
    var lastRef  = document.getElementById('la-last-refresh');
    if (!panel || !taskList) return;

    var tasks   = (data && data.tasks) || [];
    var schSecs = data && data.scheduler_last_seen_secs;

    // Scheduler heartbeat — global health of the dispatch loop.
    schDot.className = 'la-dot';
    if (schSecs == null) {
      schDot.classList.add('la-dot-unknown');
      schLabel.textContent = 'scheduler: not started';
    } else if (schSecs > 600) {
      schDot.classList.add('la-dot-stale');
      schLabel.textContent = 'scheduler: silent ' + fmtElapsed(schSecs) + ' — possible zombie tasks';
    } else if (schSecs > 180) {
      schDot.classList.add('la-dot-warning');
      schLabel.textContent = 'scheduler: quiet ' + fmtElapsed(schSecs);
    } else {
      schDot.classList.add('la-dot-active');
      schLabel.textContent = 'scheduler: active (' + fmtElapsed(schSecs) + ' ago)';
    }

    if (tasks.length === 0) {
      panel.style.display = 'none';
      return;
    }
    panel.style.display = '';

    var html = '';

    // Scheduler-level zombie banner.
    if (schSecs != null && schSecs > 600) {
      html += '<div class="la-zombie-banner">'
        + '&#9888;&nbsp;<strong>Scheduler silent ' + fmtElapsed(schSecs) + '</strong> — '
        + tasks.length + ' task' + (tasks.length > 1 ? 's' : '') + ' in_progress '
        + 'but no scheduler heartbeat. Check <code>.tmp/kanban_scheduler.log</code>.'
        + '</div>';
    }

    // Per-task zombie banner — catches tasks whose agent log is stale even
    // when the scheduler is healthy (subprocess died mid-run).
    var suspects = tasks.filter(function(t) { return taskLiveness(t.task_log_age_secs) === 'suspect'; });
    if (suspects.length > 0 && (schSecs == null || schSecs <= 600)) {
      html += '<div class="la-zombie-banner">'
        + '&#9888;&nbsp;<strong>' + suspects.length + ' possible zombie' + (suspects.length > 1 ? 's' : '') + '</strong> — '
        + suspects.map(function(t) { return escapeHTML(t.id); }).join(', ')
        + ' — agent log older than ' + TASK_TIMEOUT_SECS + 's (task timeout). '
        + 'Stale-reaper will recycle these on next cycle.'
        + '</div>';
    }

    html += tasks.map(taskCardHTML).join('');
    taskList.innerHTML = html;

    lastRef.textContent = 'updated ' + new Date().toLocaleTimeString();
  }

  function refresh() {
    // Single fetch — /api/live-check returns tasks + scheduler heartbeat +
    // per-task log age in one call.
    fetch('/api/live-check')
      .then(function(r) { return r.json(); })
      .then(function(data) {
        var tasks   = (data && data.tasks) || [];
        var schSecs = (data && data.scheduler_last_seen_secs) != null
          ? data.scheduler_last_seen_secs : null;

        // Compute total elapsed from dispatch time (updated_at = dispatch timestamp).
        var nowMs = Date.now();
        tasks.forEach(function(t) {
          var raw = t.updated_at || t.created_at;
          t.elapsed_dispatch_secs = raw
            ? Math.floor((nowMs - new Date(raw).getTime()) / 1000) : null;
        });

        render({ tasks: tasks, scheduler_last_seen_secs: schSecs });
      })
      .catch(function() {
        var panel = document.getElementById('live-activity-panel');
        if (panel) panel.style.display = 'none';
      });
  }

  document.addEventListener('DOMContentLoaded', function() {
    refresh();
    setInterval(refresh, POLL_MS);
  });

  window.refreshLiveActivity = refresh;
})();
</script>