Timmy-time-dashboard/src/dashboard/templates/self_correction.html

{% extends "base.html" %}
{% from "macros.html" import panel %}

{% block title %}Timmy Time — Self-Correction Dashboard{% endblock %}

{% block extra_styles %}{% endblock %}

{% block content %}
<div class="container-fluid py-3">

  <!-- Header -->
  <div class="spark-header mb-3">
    <div class="spark-title">SELF-CORRECTION</div>
    <div class="spark-subtitle">
      Agent error detection &amp; recovery &mdash;
      <span class="spark-status-val">{{ stats.total }}</span> events,
      <span class="spark-status-val">{{ stats.success_rate }}%</span> correction rate,
      <span class="spark-status-val">{{ stats.unique_error_types }}</span> distinct error types
    </div>
  </div>

  <div class="row g-3">

    <!-- Left column: stats + patterns -->
    <div class="col-12 col-lg-4 d-flex flex-column gap-3">

      <!-- Stats panel -->
      <div class="card mc-panel">
        <div class="card-header mc-panel-header">// CORRECTION STATS</div>
        <div class="card-body p-3">
          <div class="spark-stat-grid">
            <div class="spark-stat">
              <span class="spark-stat-label">TOTAL</span>
              <span class="spark-stat-value">{{ stats.total }}</span>
            </div>
            <div class="spark-stat">
              <span class="spark-stat-label">CORRECTED</span>
              <span class="spark-stat-value text-success">{{ stats.success_count }}</span>
            </div>
            <div class="spark-stat">
              <span class="spark-stat-label">PARTIAL</span>
              <span class="spark-stat-value text-warning">{{ stats.partial_count }}</span>
            </div>
            <div class="spark-stat">
              <span class="spark-stat-label">FAILED</span>
              <span class="spark-stat-value {% if stats.failed_count > 0 %}text-danger{% else %}text-muted{% endif %}">{{ stats.failed_count }}</span>
            </div>
          </div>
          <div class="mt-3">
            <div class="d-flex justify-content-between mb-1">
              <small class="text-muted">Correction Rate</small>
              <small class="{% if stats.success_rate >= 70 %}text-success{% elif stats.success_rate >= 40 %}text-warning{% else %}text-danger{% endif %}">{{ stats.success_rate }}%</small>
            </div>
            <div class="progress" style="height:6px;">
              <div class="progress-bar {% if stats.success_rate >= 70 %}bg-success{% elif stats.success_rate >= 40 %}bg-warning{% else %}bg-danger{% endif %}"
                   role="progressbar"
                   style="width:{{ stats.success_rate }}%"
                   aria-valuenow="{{ stats.success_rate }}"
                   aria-valuemin="0"
                   aria-valuemax="100"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Patterns panel -->
      <div class="card mc-panel"
           hx-get="/self-correction/patterns"
           hx-trigger="load, every 60s"
           hx-target="#sc-patterns-body"
           hx-swap="innerHTML">
        <div class="card-header mc-panel-header d-flex justify-content-between align-items-center">
          <span>// RECURRING PATTERNS</span>
          <span class="badge badge-info">{{ patterns | length }}</span>
        </div>
        <div class="card-body p-0" id="sc-patterns-body">
          {% include "partials/self_correction_patterns.html" %}
        </div>
      </div>

    </div>

    <!-- Right column: timeline -->
    <div class="col-12 col-lg-8">
      <div class="card mc-panel"
           hx-get="/self-correction/timeline"
           hx-trigger="load, every 30s"
           hx-target="#sc-timeline-body"
           hx-swap="innerHTML">
        <div class="card-header mc-panel-header d-flex justify-content-between align-items-center">
          <span>// CORRECTION TIMELINE</span>
          <span class="badge badge-info">{{ corrections | length }}</span>
        </div>
        <div class="card-body p-3" id="sc-timeline-body">
          {% include "partials/self_correction_timeline.html" %}
        </div>
      </div>
    </div>

  </div>
</div>
{% endblock %}