{% extends "base.html" %}
{% block content %}
<h1>Activity (last 24h)</h1>
<p class="lede">Real hourly counts from <code>tasks</code> and <code>telemetry_events</code> -- every hour in the window plotted, including zeros, so a quiet stretch reads as a flat line rather than a gap.</p>
<div class="chart-grid">
<div class="chart-card"><h3>Tasks created / hour</h3><div id="chart-tasks-hourly"></div></div>
<div class="chart-card"><h3>Events / hour</h3><div id="chart-events-hourly"></div></div>
</div>
<script id="tasks-per-hour-data" type="application/json">{{ tasks_per_hour | tojson }}</script>
<script id="events-per-hour-data" type="application/json">{{ events_per_hour | tojson }}</script>
<script>
(function () {
  function toPoints(raw) {
    return raw.map(function (pair) { return { label: pair[0], value: pair[1] }; });
  }
  function sum(points) { return points.reduce(function (s, p) { return s + p.value; }, 0); }
  var tasksData = JSON.parse(document.getElementById("tasks-per-hour-data").textContent);
  var eventsData = JSON.parse(document.getElementById("events-per-hour-data").textContent);
  var taskPoints = toPoints(tasksData);
  var eventPoints = toPoints(eventsData);
  ACRCharts.sparkline(document.getElementById("chart-tasks-hourly"), taskPoints, {
    totalLabel: sum(taskPoints) + " total",
  });
  ACRCharts.sparkline(document.getElementById("chart-events-hourly"), eventPoints, {
    totalLabel: sum(eventPoints) + " total",
  });
})();
</script>

<h2 class="section-label">System health</h2>
<div class="table-wrap">
<table>
<tr><th>Check</th><th>Status</th><th>Detail</th></tr>
{% for c in checks %}
<tr><td>{{ c.name }}</td><td><span class="pill {{ c.status.value | pill_class }}">{{ c.status.value }}</span></td><td>{{ c.detail }}</td></tr>
{% endfor %}
</table>
</div>

<h2 class="section-label">Task status</h2>
<div class="metric-grid">
{% for status, n in task_counts.items() %}
<a class="metric-card {{ status | pill_class }}" href="/tasks"><span class="n">{{ n }}</span><span class="label">{{ status }}</span></a>
{% else %}
<p class="empty">No tasks recorded yet.</p>
{% endfor %}
</div>

<h2 class="section-label">Event activity</h2>
<div class="metric-grid">
{% for event_type, n in event_counts.items() | sort(attribute="1", reverse=True) %}
<a class="metric-card" href="/events?event_type={{ event_type }}"><span class="n">{{ n }}</span><span class="label">{{ event_type }}</span></a>
{% else %}
<p class="empty">No telemetry events recorded yet.</p>
{% endfor %}
</div>
{% endblock %}