{% extends "base.html" %}
{% block title %}Traces — clustertrace{% endblock %}
{% block content %}
<section>
  <div class="row between" style="margin-bottom: 8px;">
    <h1 style="margin: 0;">Recent traces</h1>
    <a href="/" class="muted small" style="margin-left: auto;">← all patterns</a>
  </div>
  <p class="muted small" style="margin: 0 0 14px;">Individual runs, newest first. <a href="/">Patterns</a> view groups them by execution shape.</p>

  <!-- Headline figures (UX: scannable answer to "what's the state?"
       before parsing the table). Populated by JS from the same data the
       table renders. -->
  <div class="headline-stats">
    <div class="hl-stat">
      <span class="num" id="hl-total">&mdash;</span>
      <span class="lbl">Showing</span>
    </div>
    <div class="hl-stat">
      <span class="num err" id="hl-failed">&mdash;</span>
      <span class="lbl">Failed</span>
    </div>
    <div class="hl-stat">
      <span class="num quiet" id="hl-running">&mdash;</span>
      <span class="lbl">Running</span>
    </div>
    <div class="hl-stat">
      <span class="num quiet" id="hl-median">&mdash;</span>
      <span class="lbl">Median duration</span>
    </div>
  </div>

  <div class="filter-row">
    <input id="q-input" class="input" type="search" placeholder="search by name…" autocomplete="off">
    <select id="status-input" class="input">
      <option value="">all statuses</option>
      <option value="ok">ok</option>
      <option value="error">error</option>
      <option value="running">running</option>
    </select>
    <select id="tag-input" class="input"><option value="">all tags</option></select>
    <label class="muted small"><input type="checkbox" id="live-input" checked> live</label>
  </div>
  <div id="trace-count" class="muted small" style="margin: 4px 0 8px;"></div>
  <table class="traces">
    <thead>
      <tr><th>Started</th><th>Name</th><th>Tags</th><th>Status</th><th>Duration</th><th>Cost</th><th>Error</th></tr>
    </thead>
    <tbody id="traces-body"><tr><td colspan="7" class="muted">loading…</td></tr></tbody>
  </table>
</section>
<script>
function fmtTime(ts) { if (!ts) return ''; return new Date(ts * 1000).toLocaleString(); }
function escapeHtml(s) {
  return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

let tagsByTrace = {};
async function loadTagDropdown() {
  const r = await fetch('/api/tags');
  const data = await r.json();
  const sel = document.getElementById('tag-input');
  const cur = sel.value;
  sel.innerHTML = '<option value="">all tags</option>' + Object.entries(data.tags).flatMap(([k, vs]) =>
    vs.map(({value, count}) => `<option value="${escapeHtml(k)}=${escapeHtml(value)}">${escapeHtml(k)}=${escapeHtml(value)} (${count})</option>`)
  ).join('');
  sel.value = cur;
}

async function loadTraces() {
  const q = document.getElementById('q-input').value.trim();
  const status = document.getElementById('status-input').value;
  const tag = document.getElementById('tag-input').value;
  const params = new URLSearchParams({ limit: '50' });
  if (q) params.set('q', q);
  if (status) params.set('status', status);
  if (tag) params.set('tag', tag);
  const r = await fetch('/api/traces?' + params);
  const data = await r.json();

  document.getElementById('trace-count').textContent =
    `${data.traces.length} of ${data.total} traces`;

  // Headline figures derived from whatever the current filter returned.
  const failed = data.traces.filter(t => t.status === 'error').length;
  const running = data.traces.filter(t => t.status === 'running').length;
  const durations = data.traces
    .map(t => t.duration_ms)
    .filter(d => d != null && d > 0)
    .sort((a, b) => a - b);
  const median = durations.length
    ? durations[Math.floor(durations.length / 2)]
    : null;
  document.getElementById('hl-total').textContent = data.traces.length;
  document.getElementById('hl-failed').textContent = failed;
  document.getElementById('hl-running').textContent = running;
  document.getElementById('hl-median').textContent =
    median == null ? '—' : (median < 1000 ? median + ' ms' : (median / 1000).toFixed(1) + ' s');
  const body = document.getElementById('traces-body');
  if (!data.traces.length) {
    if (data.total === 0) {
      body.innerHTML = `<tr><td colspan="7">
        <div class="empty-state">
          <h3>No traces yet</h3>
          <p class="muted">Get started in 30 seconds — pick one of these:</p>
          <div class="empty-grid">
            <div class="empty-card">
              <h4>Try the bundled demo</h4>
              <pre>clustertrace demo</pre>
              <p class="muted small">60 pre-recorded traces, no API key needed.</p>
            </div>
            <div class="empty-card">
              <h4>Instrument your own code</h4>
              <pre>import clustertrace

@clustertrace.trace
def my_agent(q): ...

my_agent("hello")</pre>
              <p class="muted small">Then refresh this page.</p>
            </div>
            <div class="empty-card">
              <h4>Or pipe in OpenTelemetry</h4>
              <pre>from clustertrace.otel import \
  ClustertraceSpanExporter
provider.add_span_processor(
  BatchSpanProcessor(ClustertraceSpanExporter()))</pre>
              <p class="muted small">LangChain, LlamaIndex, Bedrock — anything with OTel.</p>
            </div>
          </div>
        </div>
      </td></tr>`;
    } else {
      body.innerHTML = '<tr><td colspan="7" class="muted">No traces match the current filters.</td></tr>';
    }
    return;
  }

  // Fetch tags for visible traces in parallel (cached by id).
  await Promise.all(data.traces.map(async t => {
    if (tagsByTrace[t.id]) return;
    try {
      const td = await fetch(`/api/trace/${t.id}`).then(r => r.json());
      tagsByTrace[t.id] = td.tags || {};
    } catch (e) { tagsByTrace[t.id] = {}; }
  }));

  body.innerHTML = data.traces.map(t => {
    const tags = tagsByTrace[t.id] || {};
    const tagsHtml = Object.entries(tags).map(([k, v]) =>
      `<span class="tag-chip">${escapeHtml(k)}=${escapeHtml(v)}</span>`).join(' ');
    const costStr = t.cost_usd != null ? '$' + Number(t.cost_usd).toFixed(4) : '<span class="muted small">—</span>';
    return `
    <tr class="${t.status === 'error' ? 'row-error' : ''}">
      <td class="muted small">${fmtTime(t.started_at)}</td>
      <td><a href="/trace/${t.id}">${escapeHtml(t.display_name || t.name)}</a></td>
      <td>${tagsHtml || '<span class="muted small">—</span>'}</td>
      <td><span class="badge ${t.status}">${t.status}</span></td>
      <td>${t.duration_ms != null ? t.duration_ms + ' ms' : '—'}</td>
      <td class="muted small">${costStr}</td>
      <td class="muted small">${t.error_type ? escapeHtml(t.error_type) + ': ' + escapeHtml((t.error_message||'').slice(0,80)) : ''}</td>
    </tr>`;
  }).join('');
}

let liveTimer = null;
function rearmLive() {
  if (liveTimer) clearInterval(liveTimer);
  if (document.getElementById('live-input').checked) {
    liveTimer = setInterval(loadTraces, 4000);
  }
}

document.getElementById('q-input').addEventListener('input', () => { tagsByTrace = {}; loadTraces(); });
document.getElementById('status-input').addEventListener('change', () => { loadTraces(); });
document.getElementById('tag-input').addEventListener('change', () => { loadTraces(); });
document.getElementById('live-input').addEventListener('change', rearmLive);

loadTagDropdown();
loadTraces().then(rearmLive);
setInterval(loadTagDropdown, 15000);
</script>
{% endblock %}