@mce-bt/microagents-dashboard 0.1.0

package/views/queues.ejs

@@ -0,0 +1,63 @@
+<div class="page-header">
+  <h2>Message Queues</h2>
+  <p>RabbitMQ queue health and throughput</p>
+</div>
+
+<%
+  const totalMessages = rabbit.queues.reduce((s, q) => s + q.messages, 0);
+  const totalConsumers = rabbit.queues.reduce((s, q) => s + q.consumers, 0);
+  const unhealthy = rabbit.queues.filter(q => q.state !== 'running').length;
+%>
+
+<div class="grid grid-4 mb-4">
+  <div class="stat-card">
+    <div class="label">Queues</div>
+    <div class="value accent"><%= rabbit.queues.length %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Total Messages</div>
+    <div class="value purple"><%= totalMessages.toLocaleString() %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Consumers</div>
+    <div class="value green"><%= totalConsumers %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Unhealthy</div>
+    <div class="value <%= unhealthy > 0 ? 'red' : 'green' %>"><%= unhealthy %></div>
+  </div>
+</div>
+
+<% if (rabbit.messageStats) { %>
+<div class="grid grid-3 mb-4">
+  <div class="stat-card">
+    <div class="label">Publish Rate</div>
+    <div class="value accent"><%= rabbit.messageStats.publishRate.toFixed(1) %>/s</div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Deliver Rate</div>
+    <div class="value green"><%= rabbit.messageStats.deliverRate.toFixed(1) %>/s</div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Ack Rate</div>
+    <div class="value purple"><%= rabbit.messageStats.ackRate.toFixed(1) %>/s</div>
+  </div>
+</div>
+<% } %>
+
+<% if (rabbit.clusterName || rabbit.rabbitmqVersion) { %>
+<p class="text-muted text-sm mb-4">
+  Cluster: <code><%= rabbit.clusterName || '—' %></code> ·
+  RabbitMQ v<%= rabbit.rabbitmqVersion || '?' %>
+</p>
+<% } %>
+
+<div class="card">
+  <div class="card-header">
+    <h3>Queues</h3>
+    <span class="htmx-indicator"><span class="spinner"></span></span>
+  </div>
+  <div hx-get="/partial/queues" hx-trigger="every 10s" hx-indicator="closest .card" hx-swap="innerHTML">
+    <%- include('partials/queues-table', { rabbit }) %>
+  </div>
+</div>

package/views/scheduler.ejs

@@ -0,0 +1,95 @@
+<div class="page-header">
+  <h2>Scheduler</h2>
+  <p>Heartbeats and cron jobs across all agents</p>
+</div>
+
+<% if (schedulerStats.length === 0) { %>
+  <div class="empty-state">
+    <div class="icon">⏱</div>
+    <p>No agents with scheduler data</p>
+  </div>
+<% } else { %>
+
+<% schedulerStats.forEach(stat => { %>
+<div class="card mb-4">
+  <div class="card-header">
+    <h3><%= stat.agentName %> <span class="text-muted text-sm">(<%= stat.agentId %>)</span></h3>
+  </div>
+
+  <%
+    const sched = stat.scheduler || {};
+    const heartbeats = sched.heartbeats || [];
+    const crons = sched.crons || [];
+    const isRunning = sched.running ?? false;
+  %>
+
+  <div class="flex gap-4 mb-4" style="flex-wrap:wrap;">
+    <div class="stat-card" style="flex:1;min-width:120px;">
+      <div class="label">Status</div>
+      <div class="value <%= isRunning ? 'green' : 'red' %>" style="font-size: 18px;">
+        <%= isRunning ? 'RUNNING' : 'STOPPED' %>
+      </div>
+    </div>
+    <div class="stat-card" style="flex:1;min-width:120px;">
+      <div class="label">Heartbeats</div>
+      <div class="value accent" style="font-size: 18px;"><%= heartbeats.length %></div>
+    </div>
+    <div class="stat-card" style="flex:1;min-width:120px;">
+      <div class="label">Cron Jobs</div>
+      <div class="value purple" style="font-size: 18px;"><%= crons.length %></div>
+    </div>
+  </div>
+
+  <% if (heartbeats.length > 0) { %>
+  <h4 style="margin-bottom:8px;font-size:13px;color:var(--text-secondary);">Heartbeats</h4>
+  <div class="table-wrap mb-4">
+    <table>
+      <thead>
+        <tr><th>Name</th><th>Enabled</th><th>Last Run</th><th>Next Run</th><th>Runs</th><th>Skips</th><th>Tokens</th><th>Duration</th><th>Errors</th></tr>
+      </thead>
+      <tbody>
+        <% heartbeats.forEach(hb => { %>
+        <tr>
+          <td><code><%= hb.name || '—' %></code></td>
+          <td><span class="badge badge-<%= hb.enabled ? 'green' : 'red' %>"><%= hb.enabled ? 'Yes' : 'No' %></span></td>
+          <td class="text-sm"><%= hb.lastRunAt ? new Date(hb.lastRunAt).toLocaleTimeString() : '—' %></td>
+          <td class="text-sm"><%= hb.nextRunAt ? new Date(hb.nextRunAt).toLocaleTimeString() : '—' %></td>
+          <td class="mono"><%= hb.totalRuns ?? '—' %></td>
+          <td class="mono"><%= hb.totalSkips ?? 0 %></td>
+          <td class="mono"><%= hb.totalTokens != null ? hb.totalTokens.toLocaleString() : '—' %></td>
+          <td class="mono"><%= hb.lastDurationMs != null ? (hb.lastDurationMs / 1000).toFixed(1) + 's' : '—' %></td>
+          <td class="mono"><%= hb.errors ?? 0 %></td>
+        </tr>
+        <% }) %>
+      </tbody>
+    </table>
+  </div>
+  <% } %>
+
+  <% if (crons.length > 0) { %>
+  <h4 style="margin-bottom:8px;font-size:13px;color:var(--text-secondary);">Cron Jobs</h4>
+  <div class="table-wrap">
+    <table>
+      <thead>
+        <tr><th>Name</th><th>Enabled</th><th>Next Run</th><th>Last Run</th><th>Runs</th><th>Duration</th><th>Errors</th></tr>
+      </thead>
+      <tbody>
+        <% crons.forEach(cron => { %>
+        <tr>
+          <td><code><%= cron.name || '—' %></code></td>
+          <td><span class="badge badge-<%= cron.enabled ? 'green' : 'red' %>"><%= cron.enabled ? 'Yes' : 'No' %></span></td>
+          <td class="text-sm"><%= cron.nextRunAt ? new Date(cron.nextRunAt).toLocaleString() : '—' %></td>
+          <td class="text-sm"><%= cron.lastRunAt ? new Date(cron.lastRunAt).toLocaleTimeString() : '—' %></td>
+          <td class="mono"><%= cron.totalRuns ?? '—' %></td>
+          <td class="mono"><%= cron.lastDurationMs != null ? (cron.lastDurationMs / 1000).toFixed(1) + 's' : '—' %></td>
+          <td class="mono"><%= cron.errors ?? 0 %></td>
+        </tr>
+        <% }) %>
+      </tbody>
+    </table>
+  </div>
+  <% } %>
+</div>
+<% }) %>
+
+<% } %>

package/views/session.ejs

@@ -0,0 +1,74 @@
+<div class="page-header">
+  <h2>Session Detail</h2>
+  <p>
+    Agent: <a href="/agents/<%= agent.id %>" class="link"><%= agent.name %></a> ·
+    Session: <code><%= sessionId %></code>
+  </p>
+</div>
+
+<% if (!detail) { %>
+  <div class="empty-state">
+    <div class="icon">◎</div>
+    <p>Session not found or agent unreachable</p>
+  </div>
+<% } else { %>
+
+<div class="grid grid-4 mb-4">
+  <div class="stat-card">
+    <div class="label">Agent</div>
+    <div class="value accent" style="font-size: 18px;"><%= detail.session.agentId %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Started</div>
+    <div class="value" style="font-size: 16px;"><%= new Date(detail.session.startedAt).toLocaleString() %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Ended</div>
+    <div class="value" style="font-size: 16px;">
+      <%= detail.session.endedAt ? new Date(detail.session.endedAt).toLocaleString() : 'Active' %>
+    </div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Entries</div>
+    <div class="value purple"><%= detail.entries.length %></div>
+  </div>
+</div>
+
+<% if (detail.session.metadata && Object.keys(detail.session.metadata).length > 0) { %>
+<div class="card mb-4">
+  <div class="card-header"><h3>Metadata</h3></div>
+  <pre><%= JSON.stringify(detail.session.metadata, null, 2) %></pre>
+</div>
+<% } %>
+
+<div class="card">
+  <div class="card-header"><h3>Conversation Timeline</h3></div>
+  <% if (detail.entries.length === 0) { %>
+    <p class="text-muted">No entries in this session</p>
+  <% } else { %>
+  <div class="timeline">
+    <% detail.entries.forEach(entry => { %>
+    <div class="timeline-entry type-<%= entry.type %>">
+      <div class="entry-header">
+        <span class="entry-type badge
+          <% if (entry.type === 'user') { %>badge-purple
+          <% } else if (entry.type === 'assistant') { %>badge-green
+          <% } else if (entry.type === 'tool') { %>badge-yellow
+          <% } else { %>badge-muted<% } %>
+        "><%= entry.type %></span>
+        <span class="entry-time"><%= new Date(entry.timestamp).toLocaleTimeString() %></span>
+      </div>
+      <div class="entry-content"><%= entry.content %></div>
+      <% if (entry.metadata && Object.keys(entry.metadata).length > 0) { %>
+      <details class="entry-meta mt-4">
+        <summary style="cursor: pointer; color: var(--text-muted);">Metadata</summary>
+        <pre style="margin-top: 8px;"><%= JSON.stringify(entry.metadata, null, 2) %></pre>
+      </details>
+      <% } %>
+    </div>
+    <% }) %>
+  </div>
+  <% } %>
+</div>
+
+<% } %>

package/views/tokens.ejs

@@ -0,0 +1,381 @@
+<div class="page-header">
+  <h2>Tokens &amp; Cost</h2>
+  <p>Token usage across all agents</p>
+</div>
+
+<%
+  let totalPrompt = 0, totalCompletion = 0, totalTokens = 0, totalCalls = 0;
+  const rows = [];
+  const allModels = {};
+  const allCallHistory = [];
+  const agentNames = new Set();
+  const modelNames = new Set();
+  agentMetrics.forEach(({ agent, metrics }) => {
+    const c = metrics?.completion || {};
+    const p = (c.total?.promptTokens ?? c.promptTokens) || 0;
+    const comp = (c.total?.completionTokens ?? c.completionTokens) || 0;
+    const t = (c.total?.totalTokens ?? c.totalTokens) || 0;
+    const calls = c.callCount || 0;
+    totalPrompt += p;
+    totalCompletion += comp;
+    totalTokens += t;
+    totalCalls += calls;
+    agentNames.add(agent.name);
+    rows.push({ agent, promptTokens: p, completionTokens: comp, totalTokens: t, callCount: calls, byModel: c.byModel || {} });
+
+    if (c.byModel) {
+      Object.entries(c.byModel).forEach(([model, stats]) => {
+        modelNames.add(model);
+        if (!allModels[model]) allModels[model] = { promptTokens: 0, completionTokens: 0, totalTokens: 0, calls: 0, totalDuration: 0 };
+        allModels[model].promptTokens += stats.promptTokens || 0;
+        allModels[model].completionTokens += stats.completionTokens || 0;
+        allModels[model].totalTokens += stats.totalTokens || 0;
+        allModels[model].calls += stats.calls || 0;
+        allModels[model].totalDuration += (stats.avgDurationMs || 0) * (stats.calls || 0);
+      });
+    }
+
+    if (metrics?.callHistory) {
+      metrics.callHistory.forEach(call => {
+        allCallHistory.push({ ...call, agentName: agent.name, agentId: agent.id });
+      });
+    }
+  });
+
+  allCallHistory.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+%>
+
+<div class="grid grid-4 mb-4">
+  <div class="stat-card">
+    <div class="label">Total Tokens</div>
+    <div class="value accent" id="stat-total"><%= totalTokens.toLocaleString() %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Prompt Tokens</div>
+    <div class="value purple" id="stat-prompt"><%= totalPrompt.toLocaleString() %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">Completion Tokens</div>
+    <div class="value green" id="stat-completion"><%= totalCompletion.toLocaleString() %></div>
+  </div>
+  <div class="stat-card">
+    <div class="label">LLM Calls</div>
+    <div class="value" id="stat-calls"><%= totalCalls %></div>
+  </div>
+</div>
+
+<!-- Charts Row -->
+<% if (totalTokens > 0) { %>
+<div class="grid grid-2 mb-4">
+  <div class="card">
+    <div class="card-header"><h3>Prompt vs Completion</h3></div>
+    <div style="position:relative;height:200px;display:flex;justify-content:center;">
+      <canvas id="tokenSplitChart"></canvas>
+    </div>
+  </div>
+  <div class="card">
+    <div class="card-header"><h3>Usage by Agent</h3></div>
+    <div style="position:relative;height:200px;">
+      <canvas id="agentUsageChart"></canvas>
+    </div>
+  </div>
+</div>
+<script>
+(function() {
+  const chartColors = ['#4dabf7','#bc8cff','#51cf66','#ffd43b','#ff6b6b','#20c997','#ff922b','#da77f2'];
+  const chartTheme = {
+    bg: '#1e2230', titleColor: '#e1e4ea', bodyColor: '#8b95a5',
+    borderColor: '#2d3348', gridColor: 'rgba(45,51,72,0.5)', labelColor: '#8b95a5'
+  };
+
+  // Doughnut: prompt vs completion
+  new Chart(document.getElementById('tokenSplitChart'), {
+    type: 'doughnut',
+    data: {
+      labels: ['Prompt', 'Completion'],
+      datasets: [{
+        data: [<%= totalPrompt %>, <%= totalCompletion %>],
+        backgroundColor: ['rgba(188,140,255,0.8)', 'rgba(81,207,102,0.8)'],
+        borderColor: ['#bc8cff', '#51cf66'],
+        borderWidth: 2,
+        hoverOffset: 6,
+      }]
+    },
+    options: {
+      responsive: true, maintainAspectRatio: false,
+      cutout: '60%',
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: { color: chartTheme.labelColor, usePointStyle: true, pointStyle: 'rectRounded', padding: 16, font: { size: 11 } }
+        },
+        tooltip: {
+          backgroundColor: chartTheme.bg, titleColor: chartTheme.titleColor,
+          bodyColor: chartTheme.bodyColor, borderColor: chartTheme.borderColor, borderWidth: 1,
+          callbacks: { label: function(ctx) { return ctx.label + ': ' + ctx.parsed.toLocaleString() + ' tokens (' + ((ctx.parsed / <%= totalTokens %>) * 100).toFixed(1) + '%)'; } }
+        }
+      }
+    }
+  });
+
+  // Horizontal bar: per agent
+  <% const sortedRows = rows.slice().sort((a, b) => b.totalTokens - a.totalTokens); %>
+  new Chart(document.getElementById('agentUsageChart'), {
+    type: 'bar',
+    data: {
+      labels: [<% sortedRows.forEach((r, i) => { %>'<%= r.agent.name %>'<% if (i < sortedRows.length - 1) { %>,<% } %><% }) %>],
+      datasets: [
+        {
+          label: 'Prompt',
+          data: [<% sortedRows.forEach((r, i) => { %><%= r.promptTokens %><% if (i < sortedRows.length - 1) { %>,<% } %><% }) %>],
+          backgroundColor: 'rgba(188,140,255,0.7)',
+          borderColor: '#bc8cff',
+          borderWidth: 1,
+          borderRadius: 3,
+        },
+        {
+          label: 'Completion',
+          data: [<% sortedRows.forEach((r, i) => { %><%= r.completionTokens %><% if (i < sortedRows.length - 1) { %>,<% } %><% }) %>],
+          backgroundColor: 'rgba(81,207,102,0.7)',
+          borderColor: '#51cf66',
+          borderWidth: 1,
+          borderRadius: 3,
+        }
+      ]
+    },
+    options: {
+      indexAxis: 'y', responsive: true, maintainAspectRatio: false,
+      interaction: { mode: 'index', intersect: false },
+      plugins: {
+        legend: {
+          position: 'bottom',
+          labels: { color: chartTheme.labelColor, usePointStyle: true, pointStyle: 'rectRounded', padding: 16, font: { size: 11 } }
+        },
+        tooltip: {
+          backgroundColor: chartTheme.bg, titleColor: chartTheme.titleColor,
+          bodyColor: chartTheme.bodyColor, borderColor: chartTheme.borderColor, borderWidth: 1,
+          callbacks: { label: function(ctx) { return ctx.dataset.label + ': ' + ctx.parsed.x.toLocaleString() + ' tokens'; } }
+        }
+      },
+      scales: {
+        x: {
+          stacked: true,
+          grid: { color: chartTheme.gridColor, drawBorder: false },
+          ticks: { color: chartTheme.labelColor, font: { size: 10 }, callback: function(v) { return v >= 1000 ? (v/1000).toFixed(0) + 'k' : v; } }
+        },
+        y: {
+          stacked: true,
+          grid: { display: false },
+          ticks: { color: chartTheme.labelColor, font: { size: 11 } }
+        }
+      }
+    }
+  });
+})();
+</script>
+<% } %>
+
+<!-- Filters -->
+<div class="card mb-4" style="padding:12px 16px;">
+  <div class="flex gap-4" style="flex-wrap:wrap;align-items:center;">
+    <div style="font-size:12px;color:var(--text-secondary);margin-right:4px;">Time Range:</div>
+    <div class="btn-group" id="time-range-btns">
+      <button class="btn btn-sm active" data-range="all">All</button>
+      <button class="btn btn-sm" data-range="3600000">1h</button>
+      <button class="btn btn-sm" data-range="86400000">24h</button>
+      <button class="btn btn-sm" data-range="604800000">7d</button>
+    </div>
+    <div style="font-size:12px;color:var(--text-secondary);margin-left:12px;margin-right:4px;">Agent:</div>
+    <select id="filter-agent" class="filter-select">
+      <option value="">All Agents</option>
+      <% [...agentNames].sort().forEach(n => { %>
+      <option value="<%= n %>"><%= n %></option>
+      <% }) %>
+    </select>
+    <div style="font-size:12px;color:var(--text-secondary);margin-left:12px;margin-right:4px;">Model:</div>
+    <select id="filter-model" class="filter-select">
+      <option value="">All Models</option>
+      <% [...modelNames].sort().forEach(m => { %>
+      <option value="<%= m %>"><%= m %></option>
+      <% }) %>
+    </select>
+  </div>
+</div>
+
+<!-- Per-Model Breakdown -->
+<% const modelEntries = Object.entries(allModels); %>
+<% if (modelEntries.length > 0) { %>
+<div class="card mb-4">
+  <div class="card-header"><h3>Usage by Model</h3></div>
+  <div class="table-wrap">
+    <table>
+      <thead>
+        <tr>
+          <th>Model</th>
+          <th class="text-right">Calls</th>
+          <th class="text-right">Prompt</th>
+          <th class="text-right">Completion</th>
+          <th class="text-right">Total</th>
+          <th class="text-right">Avg Duration</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% modelEntries.sort((a, b) => b[1].totalTokens - a[1].totalTokens).forEach(([model, stats]) => { %>
+        <tr>
+          <td><code><%= model %></code></td>
+          <td class="text-right mono"><%= stats.calls %></td>
+          <td class="text-right mono"><%= stats.promptTokens.toLocaleString() %></td>
+          <td class="text-right mono"><%= stats.completionTokens.toLocaleString() %></td>
+          <td class="text-right mono"><%= stats.totalTokens.toLocaleString() %></td>
+          <td class="text-right mono"><%= stats.calls > 0 ? Math.round(stats.totalDuration / stats.calls) + 'ms' : '—' %></td>
+        </tr>
+        <% }) %>
+      </tbody>
+    </table>
+  </div>
+</div>
+<% } %>
+
+<!-- Per-Agent Token Usage -->
+<div class="card mb-4">
+  <div class="card-header"><h3>Per-Agent Token Usage</h3></div>
+  <% if (rows.length === 0) { %>
+    <div class="empty-state">
+      <div class="icon">◈</div>
+      <p>No agents online to report token usage</p>
+    </div>
+  <% } else { %>
+  <div class="table-wrap">
+    <table>
+      <thead>
+        <tr>
+          <th>Agent</th>
+          <th class="text-right">Calls</th>
+          <th class="text-right">Prompt</th>
+          <th class="text-right">Completion</th>
+          <th class="text-right">Total</th>
+          <th>Share</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% rows.forEach(r => { %>
+        <tr>
+          <td>
+            <a href="/agents/<%= r.agent.id %>" class="link"><%= r.agent.name %></a>
+          </td>
+          <td class="text-right mono"><%= r.callCount %></td>
+          <td class="text-right mono"><%= r.promptTokens.toLocaleString() %></td>
+          <td class="text-right mono"><%= r.completionTokens.toLocaleString() %></td>
+          <td class="text-right mono"><%= r.totalTokens.toLocaleString() %></td>
+          <td>
+            <% const pct = totalTokens > 0 ? ((r.totalTokens / totalTokens) * 100).toFixed(1) : '0.0'; %>
+            <div style="display:flex;align-items:center;gap:8px;">
+              <div style="width:80px;height:6px;background:var(--bg-tertiary);border-radius:3px;overflow:hidden;">
+                <div style="width:<%= pct %>%;height:100%;background:var(--accent);border-radius:3px;"></div>
+              </div>
+              <span class="text-muted text-sm"><%= pct %>%</span>
+            </div>
+          </td>
+        </tr>
+        <% }) %>
+      </tbody>
+    </table>
+  </div>
+  <% } %>
+</div>
+
+<!-- Recent LLM Call History -->
+<div class="card">
+  <div class="card-header">
+    <h3>Recent LLM Calls</h3>
+    <span class="text-muted text-sm" id="call-count-label"><%= allCallHistory.length %> calls</span>
+  </div>
+  <% if (allCallHistory.length === 0) { %>
+    <div class="empty-state">
+      <div class="icon">◈</div>
+      <p>No LLM calls recorded yet. Send a message to an agent to see call history.</p>
+    </div>
+  <% } else { %>
+  <div class="table-wrap">
+    <table id="call-history-table">
+      <thead>
+        <tr>
+          <th>Time</th>
+          <th>Agent</th>
+          <th>Model</th>
+          <th>Tier</th>
+          <th class="text-right">Prompt</th>
+          <th class="text-right">Completion</th>
+          <th class="text-right">Total</th>
+          <th class="text-right">Duration</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% allCallHistory.forEach(call => { %>
+        <tr data-ts="<%= new Date(call.timestamp).getTime() %>" data-agent="<%= call.agentName %>" data-model="<%= call.model %>" data-prompt="<%= call.promptTokens %>" data-completion="<%= call.completionTokens %>" data-total="<%= call.totalTokens %>">
+          <td class="text-sm mono"><%= new Date(call.timestamp).toLocaleTimeString() %></td>
+          <td>
+            <a href="/agents/<%= call.agentId %>" class="link"><%= call.agentName %></a>
+          </td>
+          <td><code><%= call.model %></code></td>
+          <td><span class="badge badge-muted"><%= call.tier %></span></td>
+          <td class="text-right mono"><%= call.promptTokens.toLocaleString() %></td>
+          <td class="text-right mono"><%= call.completionTokens.toLocaleString() %></td>
+          <td class="text-right mono"><%= call.totalTokens.toLocaleString() %></td>
+          <td class="text-right mono"><%= call.durationMs %>ms</td>
+        </tr>
+        <% }) %>
+      </tbody>
+    </table>
+  </div>
+  <% } %>
+</div>
+
+<script>
+(function() {
+  const table = document.getElementById('call-history-table');
+  if (!table) return;
+  const allRows = Array.from(table.querySelectorAll('tbody tr'));
+  const rangeGroup = document.getElementById('time-range-btns');
+  const agentSel = document.getElementById('filter-agent');
+  const modelSel = document.getElementById('filter-model');
+  const countLabel = document.getElementById('call-count-label');
+
+  let activeRange = 'all';
+
+  function applyFilters() {
+    const now = Date.now();
+    const agentFilter = agentSel.value;
+    const modelFilter = modelSel.value;
+    let shown = 0, fPrompt = 0, fComp = 0, fTotal = 0;
+    allRows.forEach(row => {
+      const ts = parseInt(row.dataset.ts, 10);
+      const agent = row.dataset.agent;
+      const model = row.dataset.model;
+      let visible = true;
+      if (activeRange !== 'all' && (now - ts) > parseInt(activeRange, 10)) visible = false;
+      if (agentFilter && agent !== agentFilter) visible = false;
+      if (modelFilter && model !== modelFilter) visible = false;
+      row.style.display = visible ? '' : 'none';
+      if (visible) {
+        shown++;
+        fPrompt += parseInt(row.dataset.prompt, 10) || 0;
+        fComp += parseInt(row.dataset.completion, 10) || 0;
+        fTotal += parseInt(row.dataset.total, 10) || 0;
+      }
+    });
+    if (countLabel) countLabel.textContent = shown + ' calls';
+  }
+
+  rangeGroup.addEventListener('click', function(e) {
+    const btn = e.target.closest('[data-range]');
+    if (!btn) return;
+    activeRange = btn.dataset.range;
+    rangeGroup.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    applyFilters();
+  });
+  agentSel.addEventListener('change', applyFilters);
+  modelSel.addEventListener('change', applyFilters);
+})();
+</script>