{% extends "base.html" %}
{% block title %}Patterns — clustertrace{% endblock %}
{% block content %}
<section>
  <!-- Landing-page headline (UX #1).
       Returning user wants "anything broken? how much have I spent?" answered
       before they scroll. Same numbers the brandbar shows in tiny text, at
       glance-size here. Populated by JS once /api/stats + /api/failure-summary
       return. -->
  <div class="headline-stats" id="headline-stats">
    <div class="hl-stat">
      <span class="num" id="hl-runs">—</span>
      <span class="lbl">Runs</span>
      <span class="spark-slot" id="spark-runs"></span>
    </div>
    <div class="hl-stat">
      <span class="num err" id="hl-errors">—</span>
      <span class="lbl" id="hl-errors-lbl">Errors</span>
      <span class="spark-slot" id="spark-errors"></span>
    </div>
    <div class="hl-stat">
      <span class="num quiet" id="hl-cost">—</span>
      <span class="lbl">Cost</span>
      <span class="spark-slot" id="spark-cost"></span>
    </div>
    <div class="hl-stat">
      <span class="num quiet" id="hl-patterns">—</span>
      <span class="lbl">Patterns</span>
      <span class="spark-slot" id="spark-patterns"></span>
    </div>
  </div>

  <div class="cards" style="grid-template-columns: 2fr 1fr;">
    <div class="card" id="summary-card">
      <h2>Functions involved in failures most often</h2>
      <div id="failing-nodes" class="muted small">loading…</div>
    </div>
    <div class="card">
      <h2>Summary</h2>
      <div id="summary" class="muted">loading…</div>
    </div>
  </div>

  <div class="card" style="margin-top: 16px;">
    <h2>Where failures share a path</h2>
    <p class="muted small">The longest sequence of functions that every failing run starts with. When failures come from different agents the shared path is empty — check the per-agent breakdown below.</p>
    <div id="prefix" class="prefix-row">—</div>
    <div id="prefix-by-tag" style="margin-top:10px;"></div>
  </div>

  <div class="row between" style="margin-top:24px;">
    <h2 style="margin:0;">Patterns by frequency</h2>
    <div class="muted small" id="pagination-status"></div>
  </div>
  <div id="clusters-list" class="muted">loading…</div>
  <div class="row" style="margin-top:14px; justify-content:center;">
    <button id="load-more" class="btn" style="display:none;">Load 30 more</button>
  </div>

  <details class="advanced-toggle" style="margin-top: 32px;">
    <summary class="muted small">Advanced: how patterns are matched</summary>
    <div class="filter-row" style="margin: 12px 0 16px;">
      <label class="muted small">mode:</label>
      <select id="mode-input" class="input">
        <option value="ordered">exact order</option>
        <option value="set">ignore reorderings &amp; retries</option>
        <option value="tree_edit">fuzzy (small edit-distance)</option>
      </select>
      <span class="muted small">Two runs are in the same pattern if they ran the same functions in the same order. Switch modes if exact matching produces too many patterns.</span>
    </div>
  </details>
</section>

<script>
function escapeHtml(s) {
  return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
function pill(name, status) {
  return `<span class="pill ${status}" title="${escapeHtml(name)} (${status})">${escapeHtml(name)}</span>`;
}
let PAGE_SIZE = 30;
let loaded = [];
let summaryCache = null;

const STATUSES = ["", "expected-failure", "wontfix", "priority", "acceptable"];

async function loadSummary() {
  const [r, stats] = await Promise.all([
    fetch('/api/failure-summary').then(r => r.json()),
    fetch('/api/stats').then(r => r.json()).catch(() => null),
  ]);
  summaryCache = r;
  const headlineFailed = r.traces_failed_after_annotations !== undefined
    ? r.traces_failed_after_annotations : r.traces_failed;
  const overallPct = ((r.overall_failure_rate_after_annotations !== undefined
                       ? r.overall_failure_rate_after_annotations
                       : r.overall_failure_rate) * 100).toFixed(1);
  const expectedNote = r.expected_failure_traces
    ? ` <span class="muted small">(+${r.expected_failure_traces} expected, hidden)</span>`
    : '';

  // Headline-stats (UX #1): the glance-readable answer up top.
  document.getElementById('hl-runs').textContent = r.traces_total;
  const errEl = document.getElementById('hl-errors');
  errEl.textContent = headlineFailed;
  document.getElementById('hl-errors-lbl').textContent =
    headlineFailed === 0 ? 'Errors' : `Errors (${overallPct}%)`;
  if (stats && typeof stats.total_cost_usd === 'number') {
    const c = stats.total_cost_usd;
    document.getElementById('hl-cost').textContent =
      c >= 1 ? '$' + c.toFixed(2) : c > 0 ? '$' + c.toFixed(4) : '$0';
  }
  document.getElementById('hl-patterns').textContent = r.n_clusters;

  document.getElementById('summary').innerHTML = `
    <div><b>${r.traces_total}</b> traces · <b>${headlineFailed}</b> failed (<b>${overallPct}%</b>)${expectedNote}</div>
    <div class="muted small">${r.n_clusters} distinct execution patterns</div>
  `;
  if (!r.top_failing_nodes.length) {
    document.getElementById('failing-nodes').innerHTML = '<span class="muted">No failures yet.</span>';
  } else {
    document.getElementById('failing-nodes').innerHTML = r.top_failing_nodes.map(n => `
      <div class="node-row">
        <span class="pill ${n.status}" style="margin-right:6px;">${escapeHtml(n.name)}</span>
        <span class="muted">×${n.count}</span>
      </div>
    `).join('');
  }
  const prefEl = document.getElementById('prefix');
  if (!r.common_failure_prefix.length) {
    prefEl.innerHTML = '<span class="muted">No common prefix across all failures.</span>';
  } else {
    prefEl.innerHTML = r.common_failure_prefix.map(p => pill(p.name, p.status)).join(' <span class="muted">→</span> ');
  }
  // per-tag prefixes
  const tagEl = document.getElementById('prefix-by-tag');
  const tagPrefixes = r.prefixes_by_tag || {};
  if (Object.keys(tagPrefixes).length) {
    tagEl.innerHTML = `<div class="muted small" style="margin-top:8px;">Per <code>${escapeHtml(r.group_by_tag)}</code>:</div>` +
      Object.entries(tagPrefixes).map(([v, prefix]) => `
        <div style="margin-top:6px;">
          <span class="tag-chip">${escapeHtml(r.group_by_tag)}=${escapeHtml(v)}</span>
          ${prefix.map(p => pill(p.name, p.status)).join(' <span class="muted">→</span> ')}
        </div>
      `).join('');
  } else {
    tagEl.innerHTML = '';
  }
}

async function loadClusters(reset = true) {
  const mode = document.getElementById('mode-input').value;
  const offset = reset ? 0 : loaded.length;
  const r = await fetch(`/api/clusters?limit=${PAGE_SIZE}&offset=${offset}&mode=${mode}`).then(r => r.json());
  if (reset) {
    loaded = r.clusters;
  } else {
    loaded = loaded.concat(r.clusters);
  }
  renderClusters();
  document.getElementById('load-more').style.display = r.clusters.length === PAGE_SIZE ? '' : 'none';
  document.getElementById('pagination-status').textContent =
    `showing ${loaded.length} of ${summaryCache ? summaryCache.n_clusters : '?'} clusters · mode=${mode}`;
}

function renderAnnotationBadge(c) {
  const ann = c.annotation;
  const status = ann && ann.status ? ann.status : '';
  const note = ann && ann.note ? ann.note : '';
  const label = status ? status : 'add annotation';
  return `
    <button class="annotation-badge ${status}" data-sig="${escapeHtml(c.sig_hash)}" title="${escapeHtml(note)}">
      ${escapeHtml(label)}
    </button>
  `;
}

function renderJudgment(c) {
  const j = c.latest_judgment;
  if (!j) return '';
  const total = j.pass_count + j.fail_count;
  const pct = total ? Math.round((j.pass_count / total) * 100) : 0;
  const cls = j.fail_count === 0 ? 'none' : (j.pass_count === 0 ? 'high' : 'mid');
  return `<span class="judgment ${cls}" title="${escapeHtml(j.evaluator_name)}">
    judge: ${j.pass_count}/${total} pass (${pct}%)
  </span>`;
}

function renderClusters() {
  const el = document.getElementById('clusters-list');
  if (!loaded.length) {
    el.innerHTML = '<p class="muted">No clusters yet. Run <code>clustertrace demo</code> or instrument your code.</p>';
    return;
  }
  const maxCount = Math.max(...loaded.map(c => c.count));
  el.innerHTML = loaded.map(c => {
    const errPct = (c.error_rate * 100).toFixed(0);
    const errClass = c.error_rate >= 0.5 ? 'high' : c.error_rate > 0 ? 'mid' : 'none';
    const bar = (c.count / maxCount) * 100;
    const expectedNote = c.expected_failure ? ' <span class="muted small">(expected)</span>' : '';
    return `
      <div class="cluster-card ${errClass}${c.expected_failure ? ' is-expected' : ''}">
        <div class="cluster-meta">
          <div class="cluster-counts">
            <span class="cluster-count">${c.count}×</span>
            <span class="cluster-err ${errClass}">${c.errors}/${c.count} fail (${errPct}%)</span>${expectedNote}
            <!-- Secondary metadata (UX #2): dimmed until hover so the eye can
                 scan the primary count + error-rate + pattern down the page
                 instead of parsing 7 columns per row. -->
            <span class="cluster-secondary">
              <span class="muted small">avg ${c.avg_duration_ms != null ? c.avg_duration_ms + ' ms' : '—'}</span>
              <a class="muted small" href="/trace/${c.representative_trace_id}">sample trace →</a>
              ${renderJudgment(c)}
              ${renderAnnotationBadge(c)}
            </span>
          </div>
          <div class="cluster-bar"><div class="cluster-bar-fill" style="width:${bar}%"></div></div>
        </div>
        <div class="cluster-pattern">${c.pattern.map(p => pill(p.name, p.status)).join('<span class="arrow">›</span>')}</div>
      </div>
    `;
  }).join('');
  // Wire up annotation editors.
  document.querySelectorAll('.annotation-badge').forEach(btn => {
    btn.addEventListener('click', (e) => openAnnotationEditor(e.currentTarget));
  });
}

function openAnnotationEditor(btn) {
  const sig = btn.dataset.sig;
  const cluster = loaded.find(c => c.sig_hash === sig);
  const current = cluster && cluster.annotation || {};
  const wrap = document.createElement('div');
  wrap.className = 'annotation-editor';
  wrap.innerHTML = `
    <div class="annotation-editor-inner">
      <h3>Annotate cluster ${escapeHtml(sig)}</h3>
      <label>status:
        <select class="input">
          ${STATUSES.map(s => `<option value="${s}" ${s === (current.status || '') ? 'selected' : ''}>${s || '(none)'}</option>`).join('')}
        </select>
      </label>
      <label>note: <textarea class="input" rows="3" maxlength="4096">${escapeHtml(current.note || '')}</textarea></label>
      <label>add tag: <input class="input" type="text" placeholder="optional"></label>
      <div class="row" style="gap:8px; margin-top:8px;">
        <button class="btn btn-primary save">save</button>
        <button class="btn clear">clear</button>
        <button class="btn cancel">cancel</button>
      </div>
    </div>
  `;
  document.body.appendChild(wrap);
  const close = () => wrap.remove();
  wrap.querySelector('.cancel').addEventListener('click', close);
  wrap.addEventListener('click', e => { if (e.target === wrap) close(); });
  wrap.querySelector('.clear').addEventListener('click', async () => {
    await fetch('/api/cluster-annotations', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({sig_hash: sig, status: 'clear'}),
    });
    close();
    await loadClusters(true);
    await loadSummary();
  });
  wrap.querySelector('.save').addEventListener('click', async () => {
    const status = wrap.querySelector('select').value || null;
    const note = wrap.querySelector('textarea').value;
    const tag = wrap.querySelector('input[type=text]').value || null;
    const r = await fetch('/api/cluster-annotations', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({sig_hash: sig, status, note, tag}),
    });
    if (!r.ok) {
      const e = await r.json().catch(() => ({}));
      alert('save failed: ' + (e.error || r.statusText));
      return;
    }
    close();
    await loadClusters(true);
    await loadSummary();
  });
}

document.getElementById('mode-input').addEventListener('change', () => loadClusters(true));
document.getElementById('load-more').addEventListener('click', () => loadClusters(false));

// Inline SVG sparkline. ~30 lines, no library. Tufte-style: tiny, no axes,
// just shape. Falls flat (single horizontal line at midline) when the series
// is empty so the layout doesn't jump.
function sparkSvg(values, opts = {}) {
  const w = opts.width || 90;
  const h = opts.height || 22;
  const stroke = opts.stroke || 'currentColor';
  if (!values.length) {
    return `<svg width="${w}" height="${h}"></svg>`;
  }
  const max = Math.max(...values, 1);
  const min = 0;
  const range = (max - min) || 1;
  const n = values.length;
  const pts = values.map((v, i) => {
    const x = n === 1 ? w / 2 : (i / (n - 1)) * w;
    const y = h - 2 - ((v - min) / range) * (h - 4);
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  }).join(' ');
  // Draw a polyline + a faint baseline so flat-zero days are still legible.
  return `
    <svg width="${w}" height="${h}" viewBox="0 0 ${w} ${h}" aria-hidden="true">
      <line x1="0" y1="${h - 1}" x2="${w}" y2="${h - 1}" stroke="currentColor" stroke-opacity="0.18" stroke-width="1"/>
      <polyline fill="none" stroke="${stroke}" stroke-width="1.5" points="${pts}" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>`;
}

async function loadTrend() {
  try {
    const t = await fetch('/api/trend?days=14').then(r => r.json());
    document.getElementById('spark-runs').innerHTML = sparkSvg(t.sessions);
    document.getElementById('spark-errors').innerHTML = sparkSvg(t.errors, { stroke: 'var(--err)' });
    document.getElementById('spark-cost').innerHTML = sparkSvg(t.cost);
    document.getElementById('spark-patterns').innerHTML = sparkSvg(t.patterns);
    // Add a tooltip so hovering shows the actual 14 numbers.
    const fmtTip = (label, vals) => `${label}: last 14 days\n` + vals.map((v, i) => `${t.days[i]}: ${v}`).join('\n');
    document.getElementById('spark-runs').title = fmtTip('Runs', t.sessions);
    document.getElementById('spark-errors').title = fmtTip('Errors', t.errors);
    document.getElementById('spark-cost').title = fmtTip('Cost', t.cost.map(v => '$' + v.toFixed(4)));
    document.getElementById('spark-patterns').title = fmtTip('Patterns', t.patterns);
  } catch (e) { /* silent — sparklines are a nice-to-have, not load-bearing */ }
}

(async () => {
  await loadSummary();
  await loadClusters(true);
  loadTrend();
})();
</script>

<style>
.annotation-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border, #444);
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
}
.annotation-badge:hover { color: var(--text, #ddd); }
.annotation-badge.expected-failure { background: #553311; color: #ffd5a0; }
.annotation-badge.wontfix { background: #444; color: #ccc; }
.annotation-badge.priority { background: #803020; color: #ffc0c0; }
.annotation-badge.acceptable { background: #224422; color: #bce8bc; }
.judgment {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid var(--border, #444);
}
.judgment.none { color: #bce8bc; border-color: #2b6e2b; }
.judgment.mid { color: #ffc888; border-color: #aa7733; }
.judgment.high { color: #ffb0b0; border-color: #993333; }
.cluster-card.is-expected { opacity: 0.55; }
.annotation-editor {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 999;
}
.annotation-editor-inner {
  background: var(--bg-panel, #1b1d22);
  padding: 18px; border-radius: 10px; min-width: 360px; max-width: 520px;
  border: 1px solid var(--border, #333);
}
.annotation-editor-inner label { display: block; margin-top: 8px; }
.annotation-editor-inner .input { width: 100%; box-sizing: border-box; margin-top: 2px; }
</style>
{% endblock %}