{% extends "layout.html" %}
{% block title %}Observability - Development Harness{% endblock %}

{% block content %}
<h1>Observability Dashboard</h1>

<div class="grid">
    <article>
        <header>Active Threads</header>
        <p><strong>{{ threads|selectattr('status', 'equalto', 'running')|list|length }}</strong> running</p>
    </article>
    <article>
        <header>Observers</header>
        <p>Process, Log, Test, Endpoint, Lint, Build, Metrics, Browser</p>
    </article>
</div>

<h2>Recent Threads</h2>
{% for thread in threads[:10] %}
<article>
    <header>
        <a href="/threads/{{ thread.id }}">{{ thread.id[:8] }}...</a>
        [{{ thread.status }}]
    </header>
    <p>{{ thread.turns|length }} turns | Agent: {{ thread.config.agent_backend }}</p>
    {% if thread.turns %}
    <p>Last input: {{ thread.turns[-1].user_input[:100] }}...</p>
    {% endif %}
</article>
{% endfor %}

<h2>Observer Status</h2>
<p>Observers run automatically during agent turns. View thread details for per-thread observations.</p>
{% endblock %}