{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Governance Observability{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/agents/observability.css">
{% endblock %}
{% block content %}
<div class="shell">
    <a href="/admin/agents">Back To Agents</a>
    <h1>Governance Observability</h1>
    <pre>{{ content or 'No observability report generated yet.' }}</pre>
    <h2>Recent Traces</h2>
    <table>
        <thead><tr><th>Trace</th><th>Agent</th><th>Stage</th><th>Status</th><th>Latency</th><th>Created</th></tr></thead>
        <tbody>
            {% for row in traces %}
            <tr>
                <td>{{ row.trace_id }}</td>
                <td>{{ row.agent_name or '-' }}</td>
                <td>{{ row.stage }}</td>
                <td class="{{ row.status }}">{{ row.status }}</td>
                <td>{{ row.latency_ms }} ms</td>
                <td>{{ row.created_at }}</td>
            </tr>
            {% else %}
            <tr><td colspan="6">No traces recorded.</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}