{% extends "base.html" %}
{% block title %}{{ trace_name }} — clustertrace{% endblock %}
{% block content %}
<section>
  <a href="/traces" class="back">← all traces</a>
  <h1 style="margin-top: 4px;">{{ trace_name }}</h1>

  <!-- Headline figures (UX: status / duration / cost / spans at glance size).
       Replaces the old comma-separated meta line. Populated by loadTrace(). -->
  <div class="headline-stats">
    <div class="hl-stat">
      <span class="num" id="tr-status">&mdash;</span>
      <span class="lbl">Status</span>
    </div>
    <div class="hl-stat">
      <span class="num quiet" id="tr-duration">&mdash;</span>
      <span class="lbl">Duration</span>
    </div>
    <div class="hl-stat">
      <span class="num quiet" id="tr-cost">&mdash;</span>
      <span class="lbl">Cost</span>
    </div>
    <div class="hl-stat">
      <span class="num quiet" id="tr-spans">&mdash;</span>
      <span class="lbl">Function calls</span>
    </div>
  </div>
  <div id="trace-error" class="muted small" style="margin: -8px 0 16px;"></div>
  <div id="trace-started" class="muted small" style="margin: -8px 0 18px;"></div>

  <h2>Timeline</h2>
  <div id="timeline" class="timeline"></div>

  <h2>Spans</h2>
  <div id="spans" class="spans"></div>
</section>
<script>
const traceId = {{ trace_id | tojson }};

function escapeHtml(s) {
  return String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
function fmtDur(ms) {
  if (ms == null) return 'in-flight';
  if (ms < 1000) return ms + ' ms';
  if (ms < 60000) return (ms / 1000).toFixed(1) + ' s';
  return Math.floor(ms / 60000) + 'm ' + Math.floor((ms % 60000) / 1000) + 's';
}

async function loadTrace() {
  const r = await fetch(`/api/trace/${traceId}`);
  if (!r.ok) {
    document.getElementById('tr-status').textContent = '404';
    document.getElementById('trace-error').textContent = 'Trace not found.';
    return;
  }
  const data = await r.json();
  const trace = data.trace;
  const spans = data.spans;

  const startedStr = new Date(trace.started_at * 1000).toLocaleString();
  const durMs = trace.ended_at ? Math.round((trace.ended_at - trace.started_at) * 1000) : null;
  const statusEl = document.getElementById('tr-status');
  statusEl.textContent = trace.status;
  if (trace.status === 'error') statusEl.classList.add('err');
  document.getElementById('tr-duration').textContent = fmtDur(durMs);
  document.getElementById('tr-cost').textContent =
    trace.cost_usd != null
      ? (trace.cost_usd < 0.01 ? '$' + trace.cost_usd.toFixed(4) : '$' + trace.cost_usd.toFixed(2))
      : '—';
  document.getElementById('tr-spans').textContent = spans.length;
  document.getElementById('trace-started').textContent = `started ${startedStr}`;
  if (trace.error_type) {
    document.getElementById('trace-error').innerHTML =
      `<span class="err">${escapeHtml(trace.error_type)}: ${escapeHtml(trace.error_message||'')}</span>`;
  }

  if (!spans.length) {
    document.getElementById('spans').innerHTML = '<p class="muted">No spans recorded.</p>';
    return;
  }

  // timeline
  const t0 = trace.started_at;
  const t1 = trace.ended_at || Math.max(...spans.map(s => s.ended_at || s.started_at));
  const total = Math.max(t1 - t0, 0.001);
  const tl = document.getElementById('timeline');
  tl.innerHTML = spans.map(s => {
    const start = (s.started_at - t0) / total * 100;
    const end = ((s.ended_at || t1) - t0) / total * 100;
    const width = Math.max(end - start, 0.5);
    return `
      <div class="tl-row">
        <div class="tl-label">${escapeHtml(s.name)} <span class="muted small">[${s.kind}]</span></div>
        <div class="tl-bar-wrap">
          <div class="tl-bar ${s.status}" style="left:${start}%;width:${width}%"></div>
        </div>
        <div class="tl-dur muted small">${s.duration_ms != null ? s.duration_ms + ' ms' : '—'}</div>
      </div>
    `;
  }).join('');

  // span details
  document.getElementById('spans').innerHTML = spans.map((s, i) => `
    <details ${s.status === 'error' ? 'open' : ''} class="span-card ${s.status}">
      <summary>
        <span class="kind">${s.kind}</span>
        <span class="name">${escapeHtml(s.name)}</span>
        <span class="muted small">${s.duration_ms != null ? s.duration_ms + ' ms' : ''}</span>
        <span class="badge ${s.status}">${s.status}</span>
      </summary>
      ${s.error_type ? `<div class="err"><b>${escapeHtml(s.error_type)}:</b> ${escapeHtml(s.error_message||'')}</div>` : ''}
      <div class="io">
        ${s.input ? `<div><h4>Input</h4><pre>${escapeHtml(JSON.stringify(s.input, null, 2))}</pre></div>` : ''}
        ${s.output ? `<div><h4>Output</h4><pre>${escapeHtml(JSON.stringify(s.output, null, 2))}</pre></div>` : ''}
        ${s.attrs ? `<div><h4>Attrs</h4><pre>${escapeHtml(JSON.stringify(s.attrs, null, 2))}</pre></div>` : ''}
      </div>
    </details>
  `).join('');
}
loadTrace();
</script>
{% endblock %}