teleo-codex/ops/diagnostics/dashboard_prs.py

"""PR Lifecycle dashboard — single-page view of every PR through the pipeline.

Sortable table: PR#, summary, agent, domain, outcome, TTM, date.
Click any row to expand the full trace (triage reasoning, review text, cascade).
Hero cards: total PRs, merge rate, median TTM, median eval rounds.

Data sources: prs table, audit_log (eval rounds), review_records.
Owner: Ship
"""

from datetime import datetime

from shared_ui import render_page


EXTRA_CSS = """
  .filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
  .filters select, .filters input {
    background: #161b22; color: #c9d1d9; border: 1px solid #30363d;
    border-radius: 6px; padding: 6px 10px; font-size: 12px; }
  .filters select:focus, .filters input:focus { border-color: #58a6ff; outline: none; }
  .pr-table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
  .pr-table th:nth-child(1) { width: 60px; }   /* PR# */
  .pr-table th:nth-child(2) { width: 38%; }    /* Summary */
  .pr-table th:nth-child(3) { width: 10%; }    /* Agent */
  .pr-table th:nth-child(4) { width: 14%; }    /* Domain */
  .pr-table th:nth-child(5) { width: 10%; }    /* Outcome */
  .pr-table th:nth-child(6) { width: 7%; }     /* TTM */
  .pr-table th:nth-child(7) { width: 10%; }    /* Date */
  .pr-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 6px; }
  .pr-table td:nth-child(2) { white-space: normal; overflow: visible; line-height: 1.4; }
  .pr-table th { cursor: pointer; user-select: none; position: relative; padding: 8px 18px 8px 6px; }
  .pr-table th:hover { color: #58a6ff; }
  .pr-table th .sort-arrow { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 10px; opacity: 0.5; }
  .pr-table th.sorted .sort-arrow { opacity: 1; color: #58a6ff; }
  .pr-table tr { cursor: pointer; transition: background 0.1s; }
  .pr-table tbody tr:hover { background: #161b22; }
  .pr-table .outcome-merged { color: #3fb950; }
  .pr-table .outcome-closed { color: #f85149; }
  .pr-table .outcome-open { color: #d29922; }
  .pr-table .tier-deep { color: #bc8cff; font-weight: 600; }
  .pr-table .tier-standard { color: #58a6ff; }
  .pr-table .tier-light { color: #8b949e; }
  .pr-table .pr-link { color: #58a6ff; text-decoration: none; }
  .pr-table .pr-link:hover { text-decoration: underline; }
  .pr-table td .summary-text { font-size: 12px; color: #c9d1d9; }
  .pr-table td .review-snippet { font-size: 11px; color: #f85149; margin-top: 2px; opacity: 0.8; }
  .pr-table td .model-tag { font-size: 10px; color: #6e7681; background: #161b22; border-radius: 3px; padding: 1px 4px; }
  .pr-table td .expand-chevron { display: inline-block; width: 12px; color: #484f58; font-size: 10px; transition: transform 0.2s; }
  .pr-table tr.expanded .expand-chevron { transform: rotate(90deg); color: #58a6ff; }
  .trace-panel { background: #0d1117; border: 1px solid #30363d; border-radius: 8px;
    padding: 16px; margin: 4px 0 8px 0; font-size: 12px; display: none; }
  .trace-panel.open { display: block; }
  .trace-timeline { list-style: none; padding: 0; }
  .trace-timeline li { padding: 4px 0; border-left: 2px solid #30363d; padding-left: 12px; margin-left: 8px; }
  .trace-timeline li .ts { color: #484f58; font-size: 11px; }
  .trace-timeline li .ev { font-weight: 600; }
  .trace-timeline li.ev-approved .ev { color: #3fb950; }
  .trace-timeline li.ev-rejected .ev { color: #f85149; }
  .trace-timeline li.ev-changes .ev { color: #d29922; }
  .review-text { background: #161b22; padding: 8px 12px; border-radius: 4px;
    margin: 4px 0; white-space: pre-wrap; font-size: 11px; color: #8b949e; max-height: 200px; overflow-y: auto; }
  .pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 16px; }
  .pagination button { background: #161b22; color: #c9d1d9; border: 1px solid #30363d;
    border-radius: 4px; padding: 4px 12px; cursor: pointer; font-size: 12px; }
  .pagination button:hover { border-color: #58a6ff; }
  .pagination button:disabled { opacity: 0.4; cursor: default; }
  .pagination .page-info { color: #8b949e; font-size: 12px; }
  .stat-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
  .stat-row .mini-stat { font-size: 11px; color: #8b949e; }
  .stat-row .mini-stat span { color: #c9d1d9; font-weight: 600; }
"""


def render_prs_page(now: datetime) -> str:
    """Render the PR lifecycle page. All data loaded client-side via /api/pr-lifecycle."""

    body = """
    <!-- Hero cards (populated by JS) -->
    <div class="grid" id="hero-cards">
      <div class="card"><div class="label">Total PRs</div><div class="value blue" id="kpi-total">--</div><div class="detail" id="kpi-total-detail"></div></div>
      <div class="card"><div class="label">Merge Rate</div><div class="value green" id="kpi-merge-rate">--</div><div class="detail" id="kpi-merge-detail"></div></div>
      <div class="card"><div class="label">Median Time-to-Merge</div><div class="value" id="kpi-ttm">--</div><div class="detail" id="kpi-ttm-detail"></div></div>
      <div class="card"><div class="label">Median Eval Rounds</div><div class="value" id="kpi-rounds">--</div><div class="detail" id="kpi-rounds-detail"></div></div>
      <div class="card"><div class="label">Total Claims</div><div class="value blue" id="kpi-claims">--</div><div class="detail" id="kpi-claims-detail"></div></div>
    </div>

    <!-- Filters -->
    <div class="filters">
      <select id="filter-domain"><option value="">All Domains</option></select>
      <select id="filter-agent"><option value="">All Agents</option></select>
      <select id="filter-outcome">
        <option value="">All Outcomes</option>
        <option value="merged">Merged</option>
        <option value="closed">Rejected</option>
        <option value="open">Open</option>
      </select>
      <select id="filter-tier">
        <option value="">All Tiers</option>
        <option value="DEEP">Deep</option>
        <option value="STANDARD">Standard</option>
        <option value="LIGHT">Light</option>
      </select>
      <select id="filter-days">
        <option value="7">Last 7 days</option>
        <option value="30" selected>Last 30 days</option>
        <option value="90">Last 90 days</option>
        <option value="0">All time</option>
      </select>
    </div>

    <!-- PR table -->
    <div class="card" style="padding: 0; overflow: hidden;">
      <table class="pr-table">
        <thead>
          <tr>
            <th data-col="number">PR# <span class="sort-arrow">&#9650;</span></th>
            <th data-col="summary">Summary <span class="sort-arrow">&#9650;</span></th>
            <th data-col="agent">Agent <span class="sort-arrow">&#9650;</span></th>
            <th data-col="domain">Domain <span class="sort-arrow">&#9650;</span></th>
            <th data-col="status">Outcome <span class="sort-arrow">&#9650;</span></th>
            <th data-col="ttm_minutes">TTM <span class="sort-arrow">&#9650;</span></th>
            <th data-col="created_at">Date <span class="sort-arrow">&#9650;</span></th>
          </tr>
        </thead>
        <tbody id="pr-tbody"></tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="pagination">
      <button id="pg-prev" disabled>&laquo; Prev</button>
      <span class="page-info" id="pg-info">--</span>
      <button id="pg-next" disabled>Next &raquo;</button>
    </div>
    """

    # Use single-quoted JS strings throughout to avoid Python/HTML escaping issues
    scripts = """<script>
    const PAGE_SIZE = 50;
    const FORGEJO = 'https://git.livingip.xyz/teleo/teleo-codex/pulls/';
    let allData = [];
    let filtered = [];
    let sortCol = 'number';
    let sortAsc = false;
    let page = 0;
    let expandedPr = null;

    function loadData() {
      var days = document.getElementById('filter-days').value;
      var url = '/api/pr-lifecycle' + (days !== '0' ? '?days=' + days : '?days=9999');
      fetch(url).then(function(r) { return r.json(); }).then(function(data) {
        allData = data.prs || [];
        populateFilters(allData);
        updateKPIs(data);
        applyFilters();
      }).catch(function() {
        document.getElementById('pr-tbody').innerHTML =
          '<tr><td colspan="7" style="text-align:center;color:#f85149;">Failed to load data</td></tr>';
      });
    }

    function populateFilters(prs) {
      var domains = [], agents = [], seenD = {}, seenA = {};
      prs.forEach(function(p) {
        if (p.domain && !seenD[p.domain]) { seenD[p.domain] = 1; domains.push(p.domain); }
        if (p.agent && !seenA[p.agent]) { seenA[p.agent] = 1; agents.push(p.agent); }
      });
      domains.sort(); agents.sort();
      var domSel = document.getElementById('filter-domain');
      var agSel = document.getElementById('filter-agent');
      var curDom = domSel.value, curAg = agSel.value;
      domSel.innerHTML = '<option value="">All Domains</option>' +
        domains.map(function(d) { return '<option value="' + esc(d) + '">' + esc(d) + '</option>'; }).join('');
      agSel.innerHTML = '<option value="">All Agents</option>' +
        agents.map(function(a) { return '<option value="' + esc(a) + '">' + esc(a) + '</option>'; }).join('');
      domSel.value = curDom; agSel.value = curAg;
    }

    function updateKPIs(data) {
      document.getElementById('kpi-total').textContent = fmtNum(data.total);
      document.getElementById('kpi-total-detail').textContent =
        fmtNum(data.merged) + ' merged, ' + fmtNum(data.closed) + ' rejected';

      var rate = data.total > 0 ? data.merged / (data.merged + data.closed) : 0;
      document.getElementById('kpi-merge-rate').textContent = fmtPct(rate);
      document.getElementById('kpi-merge-detail').textContent = fmtNum(data.open) + ' open';

      document.getElementById('kpi-ttm').textContent =
        data.median_ttm != null ? fmtDuration(data.median_ttm) : '--';
      document.getElementById('kpi-ttm-detail').textContent =
        data.p90_ttm != null ? 'p90: ' + fmtDuration(data.p90_ttm) : '';

      document.getElementById('kpi-rounds').textContent =
        data.median_rounds != null ? data.median_rounds.toFixed(1) : '--';
      document.getElementById('kpi-rounds-detail').textContent =
        data.max_rounds != null ? 'max: ' + data.max_rounds : '';

      var totalClaims = 0, mergedClaims = 0;
      (data.prs || []).forEach(function(p) {
        totalClaims += (p.claims_count || 1);
        if (p.status === 'merged') mergedClaims += (p.claims_count || 1);
      });
      document.getElementById('kpi-claims').textContent = fmtNum(totalClaims);
      document.getElementById('kpi-claims-detail').textContent = fmtNum(mergedClaims) + ' merged';
    }

    function fmtDuration(mins) {
      if (mins < 60) return mins.toFixed(0) + 'm';
      if (mins < 1440) return (mins / 60).toFixed(1) + 'h';
      return (mins / 1440).toFixed(1) + 'd';
    }

    function applyFilters() {
      var dom = document.getElementById('filter-domain').value;
      var ag = document.getElementById('filter-agent').value;
      var out = document.getElementById('filter-outcome').value;
      var tier = document.getElementById('filter-tier').value;

      filtered = allData.filter(function(p) {
        if (dom && p.domain !== dom) return false;
        if (ag && p.agent !== ag) return false;
        if (out && p.status !== out) return false;
        if (tier && p.tier !== tier) return false;
        return true;
      });

      sortData();
      page = 0;
      renderTable();
    }

    function sortData() {
      filtered.sort(function(a, b) {
        var va = a[sortCol], vb = b[sortCol];
        if (va == null) va = '';
        if (vb == null) vb = '';
        if (typeof va === 'number' && typeof vb === 'number') {
          return sortAsc ? va - vb : vb - va;
        }
        va = String(va).toLowerCase();
        vb = String(vb).toLowerCase();
        return sortAsc ? va.localeCompare(vb) : vb.localeCompare(va);
      });
    }

    function truncate(s, n) {
      if (!s) return '';
      return s.length > n ? s.substring(0, n) + '...' : s;
    }

    function renderTable() {
      var tbody = document.getElementById('pr-tbody');
      var start = page * PAGE_SIZE;
      var slice = filtered.slice(start, start + PAGE_SIZE);
      var totalPages = Math.ceil(filtered.length / PAGE_SIZE);

      if (slice.length === 0) {
        tbody.innerHTML = '<tr><td colspan="7" style="text-align:center;color:#8b949e;">No PRs match filters</td></tr>';
        return;
      }

      var rows = [];
      slice.forEach(function(p) {
        var outClass = p.status === 'merged' ? 'outcome-merged' :
                       p.status === 'closed' ? 'outcome-closed' : 'outcome-open';
        var tierClass = (p.tier || '').toLowerCase() === 'deep' ? 'tier-deep' :
                        (p.tier || '').toLowerCase() === 'standard' ? 'tier-standard' : 'tier-light';
        var ttm = p.ttm_minutes != null ? fmtDuration(p.ttm_minutes) : '--';
        var date = p.created_at ? p.created_at.substring(0, 10) : '--';
        var agent = p.agent || '--';

        // Summary: first claim title from description
        var summary = '--';
        if (p.summary) {
          summary = p.summary;
        } else if (p.description) {
          var parts = p.description.split('|');
          summary = truncate(parts[0].trim(), 80);
          if (parts.length > 1) summary += ' (+' + (parts.length - 1) + ' more)';
        }

        // Outcome label with eval rounds
        var outcomeLabel = esc(p.status || '--');
        if (p.eval_rounds > 1) {
          outcomeLabel += ' <span style="color:#6e7681;font-size:11px;">(' + p.eval_rounds + ' evals)</span>';
        }

        // Review snippet for closed/changes PRs
        var reviewSnippet = '';
        if (p.status === 'closed' && p.review_snippet) {
          reviewSnippet = '<div class="review-snippet">' + esc(truncate(p.review_snippet, 120)) + '</div>';
        }

        // Tier badge inline with outcome
        var tierBadge = p.tier ? ' <span class="' + tierClass + '" style="font-size:10px;">' + esc(p.tier) + '</span>' : '';

        rows.push(
          '<tr data-pr="' + p.number + '">' +
          '<td><span class="expand-chevron">&#9654;</span> ' +
            '<a class="pr-link" href="' + FORGEJO + p.number + '" target="_blank" rel="noopener" onclick="event.stopPropagation();">#' + p.number + '</a></td>' +
          '<td style="white-space:normal;"><span class="summary-text">' + esc(summary) + '</span>' + reviewSnippet + '</td>' +
          '<td>' + esc(agent) + '</td>' +
          '<td>' + esc(p.domain || '--') + '</td>' +
          '<td class="' + outClass + '">' + outcomeLabel + tierBadge + '</td>' +
          '<td>' + ttm + '</td>' +
          '<td>' + date + '</td>' +
          '</tr>' +
          '<tr id="trace-' + p.number + '" style="display:none;"><td colspan="7" style="padding:0;">' +
          '<div class="trace-panel" id="panel-' + p.number + '">Loading trace...</div>' +
          '</td></tr>'
        );
      });
      tbody.innerHTML = rows.join('');

      // Pagination
      document.getElementById('pg-info').textContent =
        'Page ' + (totalPages > 0 ? page + 1 : 0) + ' of ' + totalPages +
        ' (' + filtered.length + ' PRs)';
      document.getElementById('pg-prev').disabled = page <= 0;
      document.getElementById('pg-next').disabled = page >= totalPages - 1;

      // Update sort arrows
      document.querySelectorAll('.pr-table th').forEach(function(th) {
        th.classList.toggle('sorted', th.dataset.col === sortCol);
        var arrow = th.querySelector('.sort-arrow');
        if (arrow) arrow.innerHTML = (th.dataset.col === sortCol && sortAsc) ? '&#9650;' : '&#9660;';
      });
    }

    // Sort click
    document.querySelectorAll('.pr-table th').forEach(function(th) {
      th.addEventListener('click', function() {
        var col = th.dataset.col;
        if (col === sortCol) { sortAsc = !sortAsc; }
        else { sortCol = col; sortAsc = col === 'number' ? false : true; }
        sortData();
        renderTable();
      });
    });

    // Row click -> trace expand
    document.getElementById('pr-tbody').addEventListener('click', function(e) {
      // Don't expand if clicking a link
      if (e.target.closest('a')) return;
      var row = e.target.closest('tr[data-pr]');
      if (!row) return;
      var pr = row.dataset.pr;
      var traceRow = document.getElementById('trace-' + pr);
      var panel = document.getElementById('panel-' + pr);
      if (!traceRow) return;

      if (traceRow.style.display === 'none') {
        if (expandedPr && expandedPr !== pr) {
          var prev = document.getElementById('trace-' + expandedPr);
          if (prev) prev.style.display = 'none';
          var prevRow = document.querySelector('tr[data-pr="' + expandedPr + '"]');
          if (prevRow) prevRow.classList.remove('expanded');
        }
        traceRow.style.display = '';
        panel.classList.add('open');
        row.classList.add('expanded');
        expandedPr = pr;
        loadTrace(pr, panel);
      } else {
        traceRow.style.display = 'none';
        panel.classList.remove('open');
        row.classList.remove('expanded');
        expandedPr = null;
      }
    });

    function loadTrace(pr, panel) {
      fetch('/api/trace/' + pr).then(function(r) { return r.json(); }).then(function(data) {
        var html = '';

        // PR metadata
        if (data.pr) {
          html += '<div class="stat-row" style="gap:16px;">';
          html += '<div class="mini-stat">Source: <span>' + esc(data.pr.source_path || '--') + '</span></div>';
          if (data.pr.agent) html += '<div class="mini-stat">Agent: <span>' + esc(data.pr.agent) + '</span></div>';
          if (data.pr.tier) html += '<div class="mini-stat">Tier: <span>' + esc(data.pr.tier) + '</span></div>';
          html += '<div class="mini-stat"><a class="pr-link" href="' + FORGEJO + pr + '" target="_blank">View on Forgejo</a></div>';
          html += '</div>';
        }

        // Eval chain models
        var models = {};
        if (data.timeline) {
          data.timeline.forEach(function(ev) {
            if (ev.detail) {
              if (ev.detail.model) models[ev.stage + '.' + ev.event] = ev.detail.model;
              if (ev.detail.domain_model) models['domain_review'] = ev.detail.domain_model;
              if (ev.detail.leo_model) models['leo_review'] = ev.detail.leo_model;
            }
          });
        }
        if (Object.keys(models).length > 0) {
          html += '<div style="background:#161b22;border-radius:6px;padding:8px 12px;margin:4px 0 8px;font-size:12px;">';
          html += '<strong style="color:#58a6ff;">Eval Chain:</strong> ';
          var parts = [];
          if (models['triage.haiku_triage']) parts.push('Triage: ' + models['triage.haiku_triage']);
          if (models['domain_review']) parts.push('Domain: ' + models['domain_review']);
          if (models['leo_review']) parts.push('Leo: ' + models['leo_review']);
          html += parts.length > 0 ? parts.join(' &#8594; ') : '<span style="color:#484f58;">No model data</span>';
          html += '</div>';
        }

        // Timeline
        if (data.timeline && data.timeline.length > 0) {
          html += '<h4 style="color:#58a6ff;font-size:12px;margin:8px 0 4px;">Timeline</h4>';
          html += '<ul class="trace-timeline">';
          data.timeline.forEach(function(ev) {
            var cls = ev.event === 'approved' ? 'ev-approved' :
                      (ev.event === 'domain_rejected' || ev.event === 'tier05_rejected') ? 'ev-rejected' :
                      ev.event === 'changes_requested' ? 'ev-changes' : '';
            var ts = ev.timestamp ? ev.timestamp.substring(0, 19).replace('T', ' ') : '';
            var detail = '';
            if (ev.detail) {
              if (ev.detail.tier) detail += ' tier=' + ev.detail.tier;
              if (ev.detail.reason) detail += ' &#8212; ' + esc(ev.detail.reason);
              if (ev.detail.model) detail += ' [' + esc(ev.detail.model) + ']';
              if (ev.detail.review_text) {
                detail += '<div class="review-text">' + esc(ev.detail.review_text).substring(0, 2000) + '</div>';
              }
              if (ev.detail.domain_review_text) {
                detail += '<div class="review-text"><strong>Domain review:</strong><br>' + esc(ev.detail.domain_review_text).substring(0, 2000) + '</div>';
              }
              if (ev.detail.leo_review_text) {
                detail += '<div class="review-text"><strong>Leo review:</strong><br>' + esc(ev.detail.leo_review_text).substring(0, 2000) + '</div>';
              }
            }
            html += '<li class="' + cls + '">' +
              '<span class="ts">' + ts + '</span> ' +
              '<span class="ev">' + esc(ev.stage + '.' + ev.event) + '</span>' +
              detail + '</li>';
          });
          html += '</ul>';
        } else {
          html += '<div style="color:#484f58;font-size:12px;">No timeline events</div>';
        }

        // Reviews
        if (data.reviews && data.reviews.length > 0) {
          html += '<h4 style="color:#58a6ff;font-size:12px;margin:8px 0 4px;">Reviews</h4>';
          data.reviews.forEach(function(r) {
            var cls = r.outcome === 'approved' ? 'badge-green' :
                      r.outcome === 'rejected' ? 'badge-red' : 'badge-yellow';
            html += '<div style="margin:4px 0;">' +
              '<span class="badge ' + cls + '">' + esc(r.outcome) + '</span> ' +
              '<span style="color:#8b949e;font-size:11px;">' + esc(r.reviewer || '') + ' ' +
              (r.model ? '[' + esc(r.model) + ']' : '') + ' ' +
              (r.reviewed_at || '').substring(0, 19) + '</span>';
            if (r.rejection_reason) {
              html += ' <code>' + esc(r.rejection_reason) + '</code>';
            }
            if (r.notes) {
              html += '<div class="review-text">' + esc(r.notes) + '</div>';
            }
            html += '</div>';
          });
        }

        panel.innerHTML = html || '<div style="color:#484f58;font-size:12px;">No trace data</div>';
      }).catch(function() {
        panel.innerHTML = '<div style="color:#f85149;font-size:12px;">Failed to load trace</div>';
      });
    }

    // Filter listeners
    ['filter-domain', 'filter-agent', 'filter-outcome', 'filter-tier'].forEach(function(id) {
      document.getElementById(id).addEventListener('change', applyFilters);
    });
    document.getElementById('filter-days').addEventListener('change', loadData);

    // Pagination
    document.getElementById('pg-prev').addEventListener('click', function() { page--; renderTable(); });
    document.getElementById('pg-next').addEventListener('click', function() { page++; renderTable(); });

    // Init
    loadData();
    </script>"""

    return render_page(
        title="PR Lifecycle",
        subtitle="Every PR through the pipeline — triage to merge",
        active_path="/prs",
        body_html=body,
        scripts=scripts,
        extra_css=EXTRA_CSS,
        timestamp=now.strftime("%Y-%m-%d %H:%M UTC"),
    )