{% extends "base.html" %}
{% block title %}Dashboard · Agent Loop Guard{% endblock %}
{% block content %}
<header class="page-head">
  <h1>Dashboard</h1>
  <form action="/demo/run" method="post">
    <input type="hidden" name="scenario" value="exact-loop">
    <input type="hidden" name="mode" value="shadow">
    <button type="submit">Run Demo</button>
  </form>
</header>

<section class="metric-grid">
  <div class="metric"><span>Sessions</span><strong>{{ stats.sessions }}</strong></div>
  <div class="metric"><span>Requests</span><strong>{{ stats.requests }}</strong></div>
  <div class="metric"><span>Traces</span><strong>{{ stats.traces }}</strong></div>
  <div class="metric"><span>Spans</span><strong>{{ stats.spans }}</strong></div>
  <div class="metric"><span>Flags</span><strong>{{ stats.flags }}</strong></div>
  <div class="metric"><span>Blocks</span><strong>{{ stats.blocks }}</strong></div>
  <div class="metric"><span>Tokens</span><strong>{{ stats.tokens }}</strong></div>
</section>

<section class="panel">
  <h2>Modules</h2>
  <table>
    <thead><tr><th>Module</th><th>Interface</th><th>Local status</th></tr></thead>
    <tbody>
      <tr><td>Loop Guard</td><td><a href="/sessions">Sessions</a></td><td><span class="status status-ok">ready</span></td></tr>
      <tr><td>MCP Firewall</td><td><a href="/mcp">Approvals and audit</a></td><td>{{ pending_approvals }} pending</td></tr>
      <tr><td>Replay</td><td><a href="/replay">Trace explorer</a></td><td><span class="status status-ok">ready</span></td></tr>
      <tr><td>Benchmark Lab</td><td><code>alg bench</code></td><td><span class="status status-ok">ready</span></td></tr>
      <tr><td>Sandbox</td><td><code>alg sandbox</code></td><td><span class="status status-{{ 'ok' if docker_available else 'paused' }}">{{ 'Docker found' if docker_available else 'Docker required' }}</span></td></tr>
    </tbody>
  </table>
</section>

<section class="panel">
  <h2>Recent Sessions</h2>
  <table>
    <thead><tr><th>ID</th><th>Status</th><th>Requests</th><th>Flags</th><th>Blocks</th><th>Tokens</th></tr></thead>
    <tbody>
    {% for session in sessions %}
      <tr>
        <td><a href="/sessions/{{ session.id }}">{{ session.id }}</a></td>
        <td><span class="status status-{{ session.status }}">{{ session.status }}</span></td>
        <td>{{ session.request_count }}</td>
        <td>{{ session.flagged_count }}</td>
        <td>{{ session.blocked_count }}</td>
        <td>{{ session.total_tokens }}</td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</section>
{% endblock %}