{% extends "base.html" %}
{% block title %}Trace {{ trace.trace_id[:8] }} — AI Reliability Platform{% endblock %}
{% block content %}
<div class="page-header">
    <h2>Trace {{ trace.trace_id[:8] }}...</h2>
    <p>{{ trace.name or "Unnamed" }} · <span class="badge {{ trace.status }}">{{ trace.status }}</span></p>
</div>

<div class="grid">
    <div class="card">
        <div class="label">Total Latency</div>
        <div class="value">{{ "%.0f"|format(trace.total_latency_ms) }}ms</div>
    </div>
    <div class="card">
        <div class="label">Total Tokens</div>
        <div class="value">{{ trace.total_tokens }}</div>
    </div>
    <div class="card">
        <div class="label">Spans</div>
        <div class="value">{{ spans|length }}</div>
    </div>
    <div class="card">
        <div class="label">Created</div>
        <div class="value" style="font-size: 16px;">{{ trace.created_at.strftime("%Y-%m-%d %H:%M:%S") }}</div>
    </div>
</div>

<h3 style="margin-bottom: 16px; font-size: 16px;">Timeline</h3>
<div class="trace-timeline">
    {% for s in spans %}
    <div class="span-item {{ 'error' if s.status == 'error' else '' }}">
        <div class="span-header">
            <span class="span-name">{{ s.name }}</span>
            <span class="span-meta">
                {% if s.provider %}{{ s.provider }}/{{ s.model }} · {% endif %}
                {{ "%.0f"|format(s.latency_ms) if s.latency_ms else "?" }}ms ·
                {{ (s.tokens_in or 0) + (s.tokens_out or 0) }} tokens
            </span>
        </div>
        <div class="span-meta">
            <span class="badge {{ s.status }}">{{ s.status }}</span>
            {% if s.error_message %}
                <span style="color: #f85149; margin-left: 8px;">{{ s.error_message[:100] }}</span>
            {% endif %}
        </div>
        {% if s.output_text %}
        <div style="margin-top: 8px; padding: 8px; background: #21262d; border-radius: 4px; font-size: 12px; color: #c9d1d9; max-height: 100px; overflow-y: auto;">
            {{ s.output_text[:300] }}{% if s.output_text|length > 300 %}...{% endif %}
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endblock %}