{# -*- CUI // SP-CTI -*-
  Reusable partial — Projects in Flight + Live Task Activity combined.

  Combines what were previously two separate sections:
    * Live Activity  — scheduler heartbeat dot + per-task liveness cards
    * Projects in Flight — project/epic progress bars from args/projects.yaml

  Include on any page that renders the kanban board:
      {% include "_projects_in_flight.html" %}

  Host page must also call:
      refreshProjectsInFlight()   — on load + each auto-refresh cycle
      checkBoardEmptyAndToggle()  — after any kanban refresh
#}

<div id="kanban-board-empty" class="kanban-empty-placeholder" style="display:none;">
    <em>No active tasks on the board. Any in-flight projects appear below.</em>
</div>

<section id="projects-in-flight" style="margin-top:1.5rem;">
  {# ── Section header: project title + scheduler heartbeat ── #}
  <div style="display:flex; align-items:center; gap:0.6rem; margin-bottom:0.75rem;">
    <span id="pif-scheduler-dot" class="pif-dot pif-dot-unknown" title="Scheduler status"></span>
    <h2 style="margin:0; font-size:1.05rem; color:var(--text-primary); letter-spacing:0.01em;">
      Projects in Flight
    </h2>
    <span id="pif-scheduler-label" style="font-size:0.75rem; color:var(--text-secondary); margin-left:0.15rem;"></span>
    <span style="margin-left:auto; font-size:0.72rem; color:var(--text-muted);" id="pif-last-refresh"></span>
  </div>

  {# ── Live task cards — individual in_progress tasks with liveness ── #}
  <div id="pif-live-tasks" style="margin-bottom:0.75rem; display:none;"></div>

  {# ── Project progress cards ── #}
  <div id="projects-container">
    <div class="kanban-empty" style="padding:1rem;">Loading projects…</div>
  </div>

</section>

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

@keyframes pif-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); }
}

/* ── Live task cards ── */
.pif-task-card {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.85rem;
  border-radius: 7px;
  border: 1px solid var(--border-color, #2a2a40);
  background: var(--bg-card, #16213e);
  margin-bottom: 0.4rem;
}
.pif-task-card:last-child { margin-bottom: 0; }
.pif-task-card-active  { border-left: 3px solid #22c55e; }
.pif-task-card-quiet   { border-left: 3px solid #f59e0b; }
.pif-task-card-suspect { border-left: 3px solid #ef4444; }
.pif-task-card-new     { border-left: 3px solid #6b7280; }

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

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

.pif-elapsed { font-family:monospace; font-size:0.78rem;
               color:var(--text-secondary); white-space:nowrap; text-align:right; }

.pif-zombie-banner {
  padding:0.45rem 0.75rem; border-radius:6px; font-size:0.78rem;
  background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3);
  color:#fca5a5; margin-bottom:0.5rem;
}

/* ── Project progress cards (unchanged) ── */
.proj-card { border: 1px solid var(--border-color, #2a2a40);
             border-radius: 8px; background: var(--bg-card, #16213e);
             margin-bottom: 0.75rem; overflow: hidden; }
.proj-card > summary { padding: 0.75rem 1rem; cursor: pointer; list-style: none;
                       display: flex; align-items: center; gap: 0.75rem;
                       background: var(--bg-secondary, #1a1a2e);
                       border-bottom: 1px solid var(--border-color, #2a2a40); }
.proj-card > summary::-webkit-details-marker { display: none; }
.proj-card > summary::before { content: "\25B6"; font-size: 0.75rem;
                                color: var(--text-secondary); transition: transform 0.15s; }
.proj-card[open] > summary::before { transform: rotate(90deg); }
.proj-title { font-weight: 600; color: var(--text-primary, #e0e0e0);
              flex: 1; font-size: 1rem; }
.proj-summary-stats { font-family: monospace; font-size: 0.85rem;
                      color: var(--text-secondary, #a0a0b8); }
.proj-body { padding: 0.75rem 1rem; }
.proj-desc { color: var(--text-secondary, #a0a0b8); margin: 0 0 0.5rem; font-size: 0.88rem; }
.proj-briefs { margin: 0 0 1rem; font-size: 0.85rem; }
.proj-briefs a { color: var(--accent-blue-light, #6db3f8); margin-right: 1rem; text-decoration: none; }
.proj-briefs a:hover { text-decoration: underline; }
.proj-epic { display: grid; grid-template-columns: 32% 1fr 26%; gap: 0.75rem;
             padding: 0.5rem 0.75rem; border: 1px solid var(--border-color, #2a2a40);
             border-radius: 6px; margin-bottom: 0.4rem;
             background: var(--bg-primary, #0f0f1a); align-items: center; }
.proj-epic-key { font-weight: 600; color: var(--text-primary); font-size: 0.88rem; }
.proj-epic-key .pri { display: inline-block; font-size: 0.68rem; padding: 0.1rem 0.4rem;
                      border-radius: 3px; margin-left: 0.4rem; font-weight: 600; }
.pri-critical { background:rgba(220,53,69,0.2); color:#ff6b7a; border:1px solid rgba(220,53,69,0.5); }
.pri-high     { background:rgba(255,152,0,0.2); color:#ffb74d; border:1px solid rgba(255,152,0,0.5); }
.pri-medium   { background:rgba(33,150,243,0.2); color:#6db3f8; border:1px solid rgba(33,150,243,0.5); }
.pri-low      { background:rgba(120,144,156,0.2); color:#b0bec5; border:1px solid rgba(120,144,156,0.4); }
.proj-bar { background:var(--bg-input,#0d1b2a); border-radius:4px; height:14px;
            overflow:hidden; position:relative; border:1px solid var(--border-color,#2a2a40); }
.proj-bar-fill { background:linear-gradient(90deg,#4caf50,#66bb6a); height:100%; transition:width 0.3s; }
.proj-bar-text { position:absolute; top:0; left:0; right:0; text-align:center;
                 line-height:14px; font-size:0.72rem; color:var(--text-primary);
                 font-weight:600; text-shadow:0 0 3px rgba(0,0,0,0.7); }
.proj-counts { font-family:monospace; font-size:0.75rem; color:var(--text-secondary); text-align:right; }
.proj-badge { display:inline-block; padding:0.08rem 0.3rem; border-radius:3px;
              margin-left:0.2rem; font-weight:600; font-size:0.72rem; }
.badge-progress { background:rgba(255,152,0,0.25); color:#ffb74d; }
.badge-backlog  { background:rgba(120,144,156,0.25); color:#b0bec5; }
.badge-failed   { background:rgba(244,67,54,0.25); color:#ff6b7a; }
.badge-needs-decomp { background:rgba(168,85,247,0.25); color:#c084fc; border:1px solid rgba(168,85,247,0.4); }

/* ── Recent Task Events feed ── */
#pif-events-section > summary::-webkit-details-marker { display:none; }
#pif-events-section > summary::before { content:"\25B6"; font-size:0.72rem;
  color:var(--text-secondary); margin-right:0.3rem; transition:transform 0.15s; }
#pif-events-section[open] > summary::before { transform:rotate(90deg); }

.pif-event-card {
  display:grid; grid-template-columns:auto 1fr auto;
  gap:0.5rem; align-items:start;
  padding:0.45rem 0.7rem; margin-bottom:0.3rem;
  border-radius:6px; border:1px solid var(--border-color,#2a2a40);
  background:var(--bg-card,#16213e); font-size:0.82rem;
}
.pif-event-card:last-child { margin-bottom:0; }
.pif-event-icon { font-size:1rem; line-height:1.2; flex-shrink:0; }
.pif-event-body { min-width:0; }
.pif-event-title { font-weight:600; color:var(--text-primary,#e0e0e0);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pif-event-type  { font-size:0.7rem; font-weight:700; padding:0.05rem 0.28rem;
  border-radius:3px; margin-right:0.35rem; display:inline-block; }
.pif-event-type-done        { background:rgba(34,197,94,0.18);  color:#86efac; }
.pif-event-type-failed      { background:rgba(239,68,68,0.18);  color:#fca5a5; }
.pif-event-type-unverified  { background:rgba(245,158,11,0.18); color:#fcd34d; }
.pif-event-type-in_progress { background:rgba(59,130,246,0.18); color:#93c5fd; }
.pif-event-type-unknown     { background:rgba(107,114,128,0.18);color:#d1d5db; }
.pif-event-gates { font-size:0.7rem; color:var(--text-muted,#6b7280);
  margin-top:0.18rem; white-space:pre; font-family:monospace; }
.pif-event-ts { font-size:0.68rem; color:var(--text-muted,#6b7280);
  white-space:nowrap; text-align:right; padding-top:0.1rem; }

.kanban-empty-placeholder { padding:2rem; text-align:center;
                            color:var(--text-muted,#6c6c80);
                            border:1px dashed var(--border-color,#2a2a40);
                            border-radius:8px; background:var(--bg-card,#16213e); }
</style>

<script>
(function () {
  if (window.ICDEV_PIF && window.ICDEV_PIF._loaded) return;
  if (!window.ICDEV_PIF) window.ICDEV_PIF = {};
  window.ICDEV_PIF._loaded = true;

  var TASK_TIMEOUT_SECS = 900;  // reaper baseline; per-task budget varies but 900 is the default

  // Polyfill Promise.allSettled for older browsers
  if (!Promise.allSettled) {
    Promise.allSettled = function (promises) {
      return Promise.all(promises.map(function (p) {
        return Promise.resolve(p).then(
          function (v) { return { status: 'fulfilled', value: v }; },
          function (e) { return { status: 'rejected', reason: e }; }
        );
      }));
    };
  }

  // Live timer + reaper bar intervals — cleared and rebuilt on each refresh
  var _pifIntervals = [];
  function _clearPifIntervals() {
    _pifIntervals.forEach(function (id) { clearInterval(id); });
    _pifIntervals = [];
  }

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

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

  // Per-task liveness from agent log file age.
  function liveness(logAge) {
    if (logAge == null)            return 'new';
    if (logAge > TASK_TIMEOUT_SECS) return 'suspect';
    if (logAge > 300)              return 'quiet';
    return 'active';
  }

  // ── Live task cards ──────────────────────────────────────────────
  function renderLiveTasks(tasks, schSecs) {
    var container = document.getElementById('pif-live-tasks');
    var schDot    = document.getElementById('pif-scheduler-dot');
    var schLabel  = document.getElementById('pif-scheduler-label');
    var lastRef   = document.getElementById('pif-last-refresh');
    if (!container) return;

    // Scheduler dot
    schDot.className = 'pif-dot';
    if (schSecs == null) {
      schDot.classList.add('pif-dot-unknown');
      schLabel.textContent = 'scheduler not started';
    } else if (schSecs > 600) {
      schDot.classList.add('pif-dot-stale');
      schLabel.textContent = 'scheduler silent ' + fmt(schSecs) + ' — possible zombies';
    } else if (schSecs > 180) {
      schDot.classList.add('pif-dot-warning');
      schLabel.textContent = 'scheduler quiet ' + fmt(schSecs);
    } else {
      schDot.classList.add('pif-dot-active');
      schLabel.textContent = 'scheduler active';
    }

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

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

    var html = '';

    // Scheduler-level zombie banner
    if (schSecs != null && schSecs > 600) {
      html += '<div class="pif-zombie-banner">&#9888; <strong>Scheduler silent ' + fmt(schSecs)
        + '</strong> &mdash; ' + tasks.length + ' task(s) in_progress with no heartbeat.'
        + ' Check <code>.tmp/kanban_scheduler.log</code>.</div>';
    }

    // Per-task zombie banner
    var suspects = tasks.filter(function (t) { return liveness(t.task_log_age_secs) === 'suspect'; });
    if (suspects.length > 0 && (schSecs == null || schSecs <= 600)) {
      html += '<div class="pif-zombie-banner">&#9888; <strong>'
        + suspects.length + ' possible zombie' + (suspects.length > 1 ? 's' : '') + '</strong>: '
        + suspects.map(function (t) { return esc(t.id); }).join(', ')
        + ' &mdash; no agent output in >' + TASK_TIMEOUT_SECS + 's. Stale-reaper will recycle.</div>';
    }

    _clearPifIntervals();
    var nowMs = Date.now();
    tasks.forEach(function (t) {
      var raw = t.updated_at || t.created_at;
      var elapsed = raw ? Math.floor((nowMs - new Date(raw).getTime()) / 1000) : null;
      var liv = liveness(t.task_log_age_secs);
      var pri = (t.priority || 'medium').toLowerCase();

      var elStyle = elapsed > TASK_TIMEOUT_SECS ? 'color:#ef4444;'
                  : elapsed > 900              ? 'color:#f59e0b;' : '';

      var outputChip = '';
      if (t.task_log_age_secs != null) {
        var chipColor = liv === 'suspect' ? 'color:#fca5a5;font-weight:600;'
                      : liv === 'quiet'   ? 'color:#fcd34d;' : 'color:#86efac;';
        outputChip = '<span style="' + chipColor + '">'
          + (liv === 'suspect'
              ? '&#9888; zombie? last output ' + fmt(t.task_log_age_secs) + ' ago'
              : 'output ' + fmt(t.task_log_age_secs) + ' ago')
          + '</span>';
      } else {
        outputChip = '<span style="color:var(--text-muted);">starting up&hellip;</span>';
      }

      // ── kv-viz: attempt badge + reaper bar + time-in-flight ──────────
      var attemptBadge = '';
      var reaperBar = '';
      var tifLine = '';
      var ac = t.attempt_count || 0;
      if (ac >= 2) {
        var abColor = ac >= 4 ? '#ef4444' : '#f59e0b';
        attemptBadge = '<span style="background:' + abColor + '20;color:' + abColor
          + ';font-size:10px;padding:1px 5px;border-radius:3px;margin-left:4px;" title="Dispatched '
          + ac + ' times">Attempt ' + ac + '</span>';
      }
      if (t.current_attempt_started_at) {
        reaperBar = '<div style="margin:4px 0 2px 0;background:var(--bg-code,#1a1a2e);border-radius:2px;height:3px;overflow:hidden;" title="Reaper kills at ' + Math.round(TASK_TIMEOUT_SECS/60) + 'm">'
          + '<div id="pif-bar-' + esc(t.id) + '" style="height:100%;width:0%;background:#22c55e;transition:width 1s linear;"></div></div>';
        tifLine = '<div id="pif-tif-' + esc(t.id) + '" style="font-size:11px;color:var(--text-muted,#6b7280);margin-top:1px;">Running 0m 0s</div>';
      }

      var killedLine = '';
      if (t.last_reaped_reason) {
        killedLine = '<div style="font-size:10px;color:#f87171;margin-top:2px;">&#9760; '
          + esc(t.last_reaped_reason.substring(0, 80)) + (t.last_reaped_reason.length > 80 ? '&hellip;' : '') + '</div>';
      }

      html += '<div class="pif-task-card pif-task-card-' + liv + '">'
        + '<span class="pif-task-dot pif-task-dot-' + liv + '" title="' + esc(liv) + '"></span>'
        + '<div style="min-width:0;flex:1;">'
        + '  <div class="pif-task-title">'
        + '    <span style="font-size:0.7rem;color:var(--text-muted);font-weight:400;margin-right:0.3rem;">' + esc(t.id) + '</span>'
        + esc(t.title) + attemptBadge
        + '  </div>'
        + reaperBar
        + tifLine
        + killedLine
        + '  <div class="pif-task-meta">'
        + '    <span class="pif-tag pif-tag-' + esc(pri) + '">' + esc(pri) + '</span>'
        + '    <span>' + esc(t.task_type || 'task') + '</span>'
        + '    ' + outputChip
        + (t.failure_count > 0 ? '<span class="pif-tag pif-tag-warn">&#9888; ' + t.failure_count + ' prior failure' + (t.failure_count > 1 ? 's' : '') + '</span>' : '')
        + '  </div>'
        + '</div>'
        + '<div class="pif-elapsed" style="' + elStyle + '">' + fmt(elapsed) + '</div>'
        + '</div>';
    });

    container.innerHTML = html;

    // Start live timers for each in-flight task
    tasks.forEach(function (t) {
      if (!t.current_attempt_started_at) return;
      var startMs = new Date(t.current_attempt_started_at).getTime();
      var barEl = document.getElementById('pif-bar-' + t.id);
      var tifEl = document.getElementById('pif-tif-' + t.id);
      if (!barEl && !tifEl) return;
      var ivId = setInterval(function () {
        var secsSinceStart = Math.floor((Date.now() - startMs) / 1000);
        if (tifEl) {
          var m = Math.floor(secsSinceStart / 60), s = secsSinceStart % 60;
          tifEl.textContent = 'Running ' + m + 'm ' + s + 's';
        }
        if (barEl) {
          var pct = Math.min(100, Math.round(secsSinceStart / TASK_TIMEOUT_SECS * 100));
          barEl.style.width = pct + '%';
          barEl.style.background = pct >= 85 ? '#ef4444' : pct >= 60 ? '#f59e0b' : '#22c55e';
        }
      }, 1000);
      _pifIntervals.push(ivId);
    });
  }

  // ── Project progress cards (unchanged logic) ─────────────────────
  function projectCardHTML(p) {
    var openAttr = p.default_open ? ' open' : '';
    var anchor = 'project-' + (p.key || '');
    var brief = (p.briefs || []).map(function (b) {
      return '<a href="' + esc(b.path) + '">' + esc(b.label) + '</a>';
    }).join('');
    var desc = p.description ? '<p class="proj-desc">' + esc(p.description) + '</p>' : '';

    var epics = (p.epics || []).map(function (e) {
      var pct = Math.max(0, Math.min(100, e.pct || 0));
      var pri = esc(e.priority || 'medium');
      var badges = [];
      if (e.in_progress)     badges.push('<span class="proj-badge badge-progress">' + e.in_progress + ' in flight</span>');
      if (e.scheduled)       badges.push('<span class="proj-badge badge-progress">' + e.scheduled + ' scheduled</span>');
      if (e.backlog)         badges.push('<span class="proj-badge badge-backlog">' + e.backlog + ' queued</span>');
      if (e.failed)          badges.push('<span class="proj-badge badge-failed">' + e.failed + ' failed</span>');
      if (e.needs_decomp)    badges.push('<span class="proj-badge badge-needs-decomp" title="Queued for auto-decompose">&#8674; ' + e.needs_decomp + ' decompose</span>');
      return '<div class="proj-epic">'
        + '<div class="proj-epic-key">' + esc(e.title || e.key)
        + '<span class="pri pri-' + pri + '">' + pri + '</span></div>'
        + '<div class="proj-bar"><div class="proj-bar-fill" style="width:' + pct + '%"></div>'
        + '<div class="proj-bar-text">' + (e.done || 0) + ' / ' + (e.total || 0) + ' done &middot; ' + pct + '%</div></div>'
        + '<div class="proj-counts">' + badges.join('') + '</div>'
        + '</div>';
    }).join('');

    var overallPct = Math.max(0, Math.min(100, p.overall_pct || 0));
    return '<details class="proj-card" id="' + esc(anchor) + '"' + openAttr + '>'
      + '<summary>'
      + '<div class="proj-title">' + esc(p.name || p.key) + '</div>'
      + '<div class="proj-summary-stats">' + (p.done_tasks || 0) + ' / ' + (p.total_tasks || 0) + ' &middot; ' + overallPct + '%</div>'
      + '</summary>'
      + '<div class="proj-body">' + desc + '<div class="proj-briefs">' + brief + '</div>' + epics + '</div>'
      + '</details>';
  }

  function renderProjectCards(payload, pendingCount) {
    var container = document.getElementById('projects-container');
    var section   = document.getElementById('projects-in-flight');
    if (!container) return;

    var projects = (payload && payload.projects) || [];
    if (projects.length === 0) {
      if (pendingCount > 0) {
        // All tracked projects are complete; surface the untracked queue so
        // the section doesn't silently disappear while tasks remain pending.
        container.innerHTML = '<div style="padding:0.5rem 0; color:var(--text-secondary); font-size:0.85rem;">'
          + '<span style="margin-right:0.5rem;">📋</span>'
          + '<strong>' + pendingCount + '</strong> task' + (pendingCount !== 1 ? 's' : '') + ' queued (scheduled / backlog)'
          + ' &mdash; no active project tracking. Run <code>kanban_project_sync.py</code> to register them.'
          + '</div>';
      } else {
        container.innerHTML = '';
      }
      return;
    }
    if (section) section.style.display = '';
    container.innerHTML = projects.map(projectCardHTML).join('');
  }

  // ── Event feed: recent task done/failed/unverified/in_progress ────────────
  var EVENT_ICONS = {
    'done': '✅', 'failed': '❌', 'unverified': '⚠️',
    'in_progress': 'ℹ️', 'unknown': '•'
  };
  var EVENT_LABELS = {
    'done': 'done', 'failed': 'failed', 'unverified': 'unverified',
    'in_progress': 'in progress', 'unknown': 'event'
  };

  function _relTime(isoStr) {
    if (!isoStr) return '';
    var ms = Date.now() - new Date(isoStr).getTime();
    var s = Math.floor(ms / 1000);
    if (s < 60)   return s + 's ago';
    if (s < 3600) return Math.floor(s / 60) + 'm ago';
    if (s < 86400) return Math.floor(s / 3600) + 'h ago';
    return Math.floor(s / 86400) + 'd ago';
  }

  function _extractGates(message) {
    // Pull "Validation gates:" block from notification message
    if (!message) return '';
    var idx = message.indexOf('Validation gates:');
    if (idx === -1) return '';
    return message.substring(idx).replace(/\n/g, '\n');
  }

  function renderEventFeed(data) {
    var section  = document.getElementById('pif-events-section');
    var listEl   = document.getElementById('pif-events-list');
    var countEl  = document.getElementById('pif-events-count');
    if (!section || !listEl) return;

    var events = (data && data.events) || [];
    // Always show the section if there are events (don't auto-hide the accordion)
    if (events.length === 0) {
      section.style.display = 'none';
      return;
    }
    section.style.display = '';
    section.open = true;
    if (countEl) countEl.textContent = '(' + events.length + ')';

    var html = '';
    events.forEach(function (ev) {
      var et   = ev.event_type || 'unknown';
      var icon = EVENT_ICONS[et] || '•';
      var typeClass = 'pif-event-type-' + et;
      var gates = _extractGates(ev.message || '');
      html += '<div class="pif-event-card">'
        + '<span class="pif-event-icon">' + icon + '</span>'
        + '<div class="pif-event-body">'
        + '  <div class="pif-event-title">'
        + '    <span class="pif-event-type ' + esc(typeClass) + '">' + esc(EVENT_LABELS[et] || et) + '</span>'
        + esc(ev.title || '')
        + '  </div>'
        + (gates ? '<div class="pif-event-gates">' + esc(gates) + '</div>' : '')
        + '</div>'
        + '<div class="pif-event-ts">' + _relTime(ev.created_at) + '</div>'
        + '</div>';
    });
    listEl.innerHTML = html;
  }

  // ── Combined refresh: live-check + projects/progress + events in parallel ──
  // Uses allSettled so a failing events fetch never kills the live-task or
  // project-card panels (Promise.all rejects entirely on any single failure).
  function refreshProjectsInFlight() {
    var fetches = [
      fetch('/api/live-check').then(function (r) { return r.json(); }),
      fetch('/api/projects/progress').then(function (r) { return r.json(); }),
      fetch('/api/kanban/recent-events').then(function (r) { return r.json(); }),
    ];

    // allSettled: each result is {status:'fulfilled',value:...} or {status:'rejected'}
    Promise.allSettled(fetches).then(function (settled) {
      var liveData    = settled[0].status === 'fulfilled' ? settled[0].value : null;
      var projectData = settled[1].status === 'fulfilled' ? settled[1].value : null;
      var eventsData  = settled[2].status === 'fulfilled' ? settled[2].value : null;

      var pendingCount = (liveData && liveData.pending_tasks_count) || 0;
      renderLiveTasks(
        (liveData && liveData.tasks) || [],
        liveData && liveData.scheduler_last_seen_secs != null
          ? liveData.scheduler_last_seen_secs : null
      );
      renderProjectCards(projectData, pendingCount);
      renderEventFeed(eventsData);

      // Show section if live tasks, queued tasks, active projects, or recent events are present
      var section = document.getElementById('projects-in-flight');
      var hasLive    = !!(liveData && liveData.tasks && liveData.tasks.length > 0);
      var hasPending = !!(liveData && liveData.pending_tasks_count > 0);
      var hasProj    = !!(projectData && projectData.projects && projectData.projects.length > 0);
      var hasEvents  = !!(eventsData && eventsData.events && eventsData.events.length > 0);
      if (section) section.style.display = (hasLive || hasPending || hasProj || hasEvents) ? '' : 'none';
    });
  }

  // Task Board auto-hide (unchanged)
  function checkBoardEmptyAndToggle() {
    var active = ['suggested', 'backlog', 'scheduled', 'in_progress'];
    var total = 0;
    active.forEach(function (s) {
      var el = document.querySelector('.kanban-column[data-status="' + s + '"] .kanban-column-count');
      if (el) total += parseInt(el.textContent || '0', 10) || 0;
    });
    var board       = document.getElementById('kanban-board');
    var placeholder = document.getElementById('kanban-board-empty');
    if (!board) return;
    if (total === 0) {
      board.style.display = 'none';
      if (placeholder) placeholder.style.display = 'block';
    } else {
      board.style.display = '';
      if (placeholder) placeholder.style.display = 'none';
    }
  }

  window.ICDEV_PIF.refresh        = refreshProjectsInFlight;
  window.ICDEV_PIF.render         = renderProjectCards;
  window.ICDEV_PIF.renderEvents   = renderEventFeed;
  window.ICDEV_PIF.checkBoardEmpty = checkBoardEmptyAndToggle;

  window.refreshProjectsInFlight  = refreshProjectsInFlight;
  window.renderProjectsInFlight   = renderProjectCards;
  window.renderEventFeed          = renderEventFeed;
  window.checkBoardEmptyAndToggle = checkBoardEmptyAndToggle;
  // Backward-compat alias for any page that called refreshLiveActivity()
  window.refreshLiveActivity      = refreshProjectsInFlight;

  // ── Task completion poller — triggers dashboard refresh immediately on any
  // task moving to "done", without waiting for the 5-minute auto-refresh cycle.
  // Polls /api/kanban/last-update every 15s (single-row query, negligible cost).
  var _pifCompletionCursor = null;
  var _pifCompletionTimer  = null;

  function _pollCompletion() {
    fetch('/api/kanban/last-update')
      .then(function (r) { return r.json(); })
      .then(function (d) {
        if (d.last_update === undefined) return;
        if (_pifCompletionCursor === null) {
          // Seed cursor on first poll — no refresh needed yet
          _pifCompletionCursor = d.last_update;
          return;
        }
        if (d.last_update && d.last_update !== _pifCompletionCursor) {
          // A task just completed — update cursor and refresh immediately
          _pifCompletionCursor = d.last_update;
          refreshProjectsInFlight();
          // Also refresh the kanban task board if it's on this page
          if (typeof refreshKanbanTasks === 'function') refreshKanbanTasks();
          // Reset the 5-min countdown so the next auto-refresh starts fresh
          if (typeof _refreshCountdown !== 'undefined') {
            // index.html sets this; reset it so we don't double-refresh
            if (typeof AUTO_REFRESH_SECONDS !== 'undefined') {
              window._refreshCountdown = AUTO_REFRESH_SECONDS;
            }
          }
        }
      })
      .catch(function () { /* network error — retry next tick */ });
  }

  // Start poller after a short delay so the page renders first
  setTimeout(function () {
    _pollCompletion(); // seed cursor immediately
    _pifCompletionTimer = setInterval(_pollCompletion, 15000);
  }, 2000);

  window.ICDEV_PIF.stopCompletionPoller = function () {
    if (_pifCompletionTimer) { clearInterval(_pifCompletionTimer); _pifCompletionTimer = null; }
  };
})();
</script>