diff --git a/public/app.js b/public/app.js
index 4359708..9866eea 100644
--- a/public/app.js
+++ b/public/app.js
@@ -597,6 +597,28 @@ function initAgentsPage() {
 
 // ============ USAGE ============
 async function loadUsage() {
+  // Try real usage first, fallback to tracked usage
+  try {
+    const realRes = await fetch("/api/usage/real");
+    if (realRes.ok) {
+      const realData = await realRes.json();
+      usageStats = {
+        totalRequests: Object.values(realData.models || {}).reduce((sum, m) => sum + (m.requests || 0), 0),
+        totalTokens: realData.totals?.total || 0,
+        totalCost: realData.totals?.cost || 0,
+        agents: realData.agents,
+        models: realData.models
+      };
+      renderUsageStats();
+      if (typeof renderRealUsageCharts === 'function') {
+        renderRealUsageCharts(realData);
+      }
+      return;
+    }
+  } catch (e) {
+    console.warn("Real usage not available, falling back");
+  }
+
   const from = document.getElementById('usage-from')?.value;
   const to = document.getElementById('usage-to')?.value;
 
@@ -621,7 +643,47 @@ async function loadUsage() {
   }
 }
 
-function renderUsageStats() {
+function renderRealUsageCharts(data) {
+  if (typeof Chart === 'undefined') return;
+  
+  // Agent chart
+  const agentCanvas = document.getElementById('chart-agent');
+  if (agentCanvas && data.agents) {
+    const agents = Object.entries(data.agents)
+      .filter(([_, v]) => v.total > 0)
+      .sort((a, b) => b[1].total - a[1].total)
+      .slice(0, 10);
+    
+    new Chart(agentCanvas, {
+      type: 'bar',
+      data: {
+        labels: agents.map(([k]) => k),
+        datasets: [{
+          label: 'Tokens',
+          data: agents.map(([_, v]) => v.total),
+          backgroundColor: 'rgba(54, 162, 235, 0.6)'
+        }]
+      },
+      options: {
+        responsive: true,
+        indexAxis: 'y'
+      }
+    });
+  }
+  
+  // Provider grid
+  const grid = document.getElementById('provider-grid');
+  if (grid && data.models) {
+    grid.innerHTML = Object.entries(data.models)
+      .map(([model, stats]) => `
+        <div class="provider-card">
+          <h4>${model}</h4>
+          <p>Requests: ${stats.requests || 0}</p>
+          <p>Tokens: ${(stats.input || 0) + (stats.output || 0)}</p>
+        </div>
+      `).join('');
+  }
+}
   const requestsEl = document.getElementById('stat-requests');
   const tokensEl = document.getElementById('stat-tokens');
   const costEl = document.getElementById('stat-cost');