{# -*- CUI // SP-CTI -*-
  Reusable partial — Triage Activity panel.

  Ephemeral: appears only while a triage run is in-flight or just completed.
  Auto-hides 15 s after the run finishes.  Never shows historical runs on
  page load — keeps the dashboard uncluttered.

  Supports ICDEV™ core tenets: observability, visibility, accountability,
  safety, and trustworthy AI.

  Include on any page with the Triage button:
      {% include "_triage_status.html" %}

  Before triage POST: call  window.ICDEV_TRIAGE.showLoading()
  After  triage POST: call  window.ICDEV_TRIAGE.showResult(data)
    where data = { counts:{promoted,dismissed,skipped,errors,total},
                   decisions:[{id,title,action,reason,lens},...] }
#}

<section id="triage-status" style="margin-top:1.5rem; display:none;">
  <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:0.5rem;">
    <h2 style="margin:0; font-size:1.05rem; color:var(--text-primary); letter-spacing:0.01em;">
      ⚡ Triage Activity
      <span id="triage-status-tag"
            style="font-size:0.72rem; padding:0.1rem 0.4rem; border-radius:3px;
                   margin-left:0.3rem; vertical-align:middle;
                   background:rgba(249,115,22,0.2); color:#fb923c; font-weight:600;">
        oracle
      </span>
    </h2>
    <span id="triage-summary" style="font-size:0.78rem; color:var(--text-secondary);"></span>
  </div>
  <div id="triage-runs-container"></div>
</section>

<style>
  @keyframes tr-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
  }
  .tr-loading-bar {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border-color, #2a2a40);
    border-radius: 8px;
    background: var(--bg-card, #16213e);
    animation: tr-pulse 1.4s ease-in-out infinite;
    font-size: 0.82rem; color: var(--text-secondary);
  }
  .tr-spinner {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(249,115,22,0.25);
    border-top-color: #f97316;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .tr-run-card {
    border: 1px solid var(--border-color, #2a2a40);
    border-radius: 8px;
    background: var(--bg-card, #16213e);
    overflow: hidden;
  }
  .tr-run-header {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    cursor: pointer; user-select: none;
    border-bottom: 1px solid transparent;
  }
  .tr-run-header:hover  { background: rgba(255,255,255,0.03); }
  .tr-run-header.open   { border-bottom-color: var(--border-color, #2a2a40); }

  .tr-badge {
    display: inline-block; font-size: 0.7rem; padding: 0.08rem 0.4rem;
    border-radius: 3px; font-weight: 600; white-space: nowrap;
  }
  .tr-badge-promoted  { background: rgba(34,197,94,0.2);   color: #4ade80; }
  .tr-badge-dismissed { background: rgba(239,68,68,0.2);   color: #f87171; }
  .tr-badge-skipped   { background: rgba(107,114,128,0.2); color: #9ca3af; }
  .tr-badge-errors    { background: rgba(245,158,11,0.2);  color: #fbbf24; }

  .tr-run-meta { font-size: 0.72rem; color: var(--text-muted, #6c6c80); margin-left: auto; font-family: monospace; }

  .tr-decisions { padding: 0.4rem 0; max-height: 260px; overflow-y: auto; }
  .tr-decision-row {
    display: flex; align-items: flex-start; gap: 0.5rem;
    padding: 0.28rem 0.85rem;
    border-bottom: 1px solid var(--border-color, #1a1a30);
    font-size: 0.78rem;
  }
  .tr-decision-row:last-child { border-bottom: none; }
  .tr-decision-action {
    display: inline-block; width: 70px; flex-shrink: 0;
    font-weight: 600; font-size: 0.7rem; text-align: center;
    padding: 0.1rem 0; border-radius: 3px;
  }
  .tr-action-promote { background: rgba(34,197,94,0.15);   color: #4ade80; }
  .tr-action-dismiss { background: rgba(239,68,68,0.15);   color: #f87171; }
  .tr-action-skip    { background: rgba(107,114,128,0.15); color: #9ca3af; }
  .tr-action-backlog { background: rgba(99,102,241,0.15);  color: #a5b4fc; }
  .tr-action-error   { background: rgba(245,158,11,0.15);  color: #fbbf24; }
  .tr-decision-title  { color: var(--text-primary); flex: 1; word-break: break-word; }
  .tr-decision-reason { font-size: 0.7rem; color: var(--text-secondary); margin-top: 0.1rem; font-style: italic; }
</style>

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

  var _hideTimer = null;

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

  function section()   { return document.getElementById('triage-status'); }
  function container() { return document.getElementById('triage-runs-container'); }
  function summary()   { return document.getElementById('triage-summary'); }

  function show() {
    var s = section();
    if (s) s.style.display = '';
  }
  function hide() {
    var s = section();
    if (s) s.style.display = 'none';
    var c = container();
    if (c) c.innerHTML = '';
    var sm = summary();
    if (sm) sm.textContent = '';
  }

  function scheduleHide(delayMs) {
    if (_hideTimer) clearTimeout(_hideTimer);
    _hideTimer = setTimeout(hide, delayMs || 15000);
  }

  function actionClass(action) {
    if (action === 'promote')  return 'tr-action-promote';
    if (action === 'backlog')  return 'tr-action-promote';
    if (action === 'dismiss')  return 'tr-action-dismiss';
    if (action === 'skip')     return 'tr-action-skip';
    if (action === 'error')    return 'tr-action-error';
    return 'tr-action-skip';
  }

  function decisionsHTML(decisions) {
    if (!decisions || !decisions.length) {
      return '<div style="padding:0.5rem 0.85rem; font-size:0.75rem; color:var(--text-muted);">No decisions recorded.</div>';
    }
    return '<div class="tr-decisions">'
      + decisions.map(function(d) {
          var cls   = actionClass(d.action);
          var label = (d.action || 'skip').toUpperCase();
          return '<div class="tr-decision-row">'
            + '<span class="tr-decision-action ' + cls + '">' + esc(label) + '</span>'
            + '<div style="flex:1;">'
            +   '<div class="tr-decision-title">'  + esc(d.title  || d.id)  + '</div>'
            +   '<div class="tr-decision-reason">' + esc(d.reason || '')     + '</div>'
            + '</div>'
            + '<span style="font-size:0.68rem; color:var(--text-muted); font-family:monospace; flex-shrink:0;">'
            +   esc(d.lens || '')
            + '</span>'
            + '</div>';
        }).join('')
      + '</div>';
  }

  window.ICDEV_TRIAGE.toggleRun = function(id, headerEl) {
    var el = document.getElementById(id);
    if (!el) return;
    var open = el.style.display !== 'none';
    el.style.display = open ? 'none' : '';
    if (headerEl) headerEl.classList.toggle('open', !open);
    var metaEl = headerEl ? headerEl.querySelector('.tr-run-meta') : null;
    if (metaEl) metaEl.textContent = metaEl.textContent.replace(/[▸▾]/, open ? '▸' : '▾');
    if (!open && _hideTimer) {
      clearTimeout(_hideTimer);
      _hideTimer = null;
    }
  };

  /* Called by runTriage() BEFORE the POST is sent. */
  window.ICDEV_TRIAGE.showLoading = function(total) {
    if (_hideTimer) { clearTimeout(_hideTimer); _hideTimer = null; }
    var c = container();
    var sm = summary();
    if (!c) return;
    var label = total ? ('Analyzing ' + total + ' card' + (total === 1 ? '' : 's') + '…') : 'Analyzing suggested cards…';
    c.innerHTML = '<div class="tr-loading-bar">'
      + '<div class="tr-spinner"></div>'
      + '<span>' + esc(label) + '</span>'
      + '</div>';
    if (sm) sm.textContent = '';
    show();
  };

  /* Called by runTriage() AFTER the POST resolves. */
  window.ICDEV_TRIAGE.showResult = function(data) {
    var c   = container();
    var sm  = summary();
    if (!c) return;

    var counts    = data.counts    || {};
    var decisions = data.decisions || [];

    var promoted  = counts.promoted  || 0;
    var dismissed = counts.dismissed || 0;
    var skipped   = counts.skipped  || 0;
    var errors    = counts.errors   || 0;

    var badges = '';
    if (promoted)  badges += '<span class="tr-badge tr-badge-promoted">+'  + promoted  + ' promoted</span> ';
    if (dismissed) badges += '<span class="tr-badge tr-badge-dismissed">-' + dismissed + ' dismissed</span> ';
    if (skipped)   badges += '<span class="tr-badge tr-badge-skipped">'   + skipped   + ' skipped</span> ';
    if (errors)    badges += '<span class="tr-badge tr-badge-errors">'    + errors    + ' errors</span> ';
    if (!badges)   badges  = '<span class="tr-badge tr-badge-skipped">0 tasks</span>';

    if (sm) {
      sm.textContent = 'auto-hiding in 15 s';
    }

    c.innerHTML = '<div class="tr-run-card">'
      + '<div class="tr-run-header" onclick="window.ICDEV_TRIAGE.toggleRun(\'tr-run-0\', this)">'
      +   badges
      +   '<span class="tr-run-meta">just now ▸</span>'
      + '</div>'
      + '<div id="tr-run-0" style="display:none;">'
      +   decisionsHTML(decisions)
      + '</div>'
      + '</div>';

    show();
    scheduleHide(15000);
  };

  /* refreshTriageStatus is a no-op now — panel is ephemeral, not polled. */
  window.ICDEV_TRIAGE.refresh = function() {};
  window.refreshTriageStatus  = function() {};
})();
</script>