feat(ui): wire budget/telemetry/compliance into dashboard pages

Batch 4 — Page Integration:
- Usage page: add BudgetTelemetryCards (latency p50/p95/p99, cache, system health)
- Settings page: add ComplianceTab (audit log), CacheStatsCard (prompt cache + flush)
- Combos page: replace inline empty state with EmptyState component

3 new components, 3 page modifications. Build verified: exit code 0

src/app/(dashboard)/dashboard/combos/page.js

@@ -9,6 +9,7 @@ import {
   CardSkeleton,
   ModelSelectModal,
   ProxyConfigModal,
+  EmptyState,
 } from "@/shared/components";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 
@@ -189,20 +190,13 @@ export default function CombosPage() {
 
       {/* Combos List */}
       {combos.length === 0 ? (
-        <Card>
-          <div className="text-center py-12">
-            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 text-primary mb-4">
-              <span className="material-symbols-outlined text-[32px]">layers</span>
-            </div>
-            <p className="text-text-main font-medium mb-1">No combos yet</p>
-            <p className="text-sm text-text-muted mb-4">
-              Create model combos with weighted routing and fallback support
-            </p>
-            <Button icon="add" onClick={() => setShowCreateModal(true)}>
-              Create Combo
-            </Button>
-          </div>
-        </Card>
+        <EmptyState
+          icon="🧩"
+          title="No combos yet"
+          description="Create model combos with weighted routing and fallback support"
+          actionLabel="Create Combo"
+          onAction={() => setShowCreateModal(true)}
+        />
       ) : (
         <div className="flex flex-col gap-4">
           {combos.map((combo) => (

src/app/(dashboard)/dashboard/settings/components/CacheStatsCard.js

@@ -0,0 +1,71 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/shared/components";
+
+export default function CacheStatsCard() {
+  const [cache, setCache] = useState(null);
+  const [flushing, setFlushing] = useState(false);
+
+  const fetchStats = () => {
+    fetch("/api/cache/stats")
+      .then((r) => r.json())
+      .then(setCache)
+      .catch(() => {});
+  };
+
+  useEffect(fetchStats, []);
+
+  const handleFlush = async () => {
+    setFlushing(true);
+    try {
+      await fetch("/api/cache/stats", { method: "DELETE" });
+      fetchStats();
+    } finally {
+      setFlushing(false);
+    }
+  };
+
+  return (
+    <Card className="p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-text-main flex items-center gap-2">
+          <span className="material-symbols-outlined text-[20px]">cached</span>
+          Prompt Cache
+        </h3>
+        <button
+          onClick={handleFlush}
+          disabled={flushing}
+          className="px-3 py-1.5 text-xs rounded-lg bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors disabled:opacity-50"
+        >
+          {flushing ? "Flushing…" : "Flush Cache"}
+        </button>
+      </div>
+
+      {cache ? (
+        <div className="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <p className="text-text-muted">Size</p>
+            <p className="font-mono text-lg text-text-main">
+              {cache.size}/{cache.maxSize}
+            </p>
+          </div>
+          <div>
+            <p className="text-text-muted">Hit Rate</p>
+            <p className="font-mono text-lg text-text-main">{cache.hitRate?.toFixed(1) ?? 0}%</p>
+          </div>
+          <div>
+            <p className="text-text-muted">Hits</p>
+            <p className="font-mono text-text-main">{cache.hits ?? 0}</p>
+          </div>
+          <div>
+            <p className="text-text-muted">Evictions</p>
+            <p className="font-mono text-text-main">{cache.evictions ?? 0}</p>
+          </div>
+        </div>
+      ) : (
+        <p className="text-sm text-text-muted">Loading cache stats…</p>
+      )}
+    </Card>
+  );
+}

src/app/(dashboard)/dashboard/settings/components/ComplianceTab.js

@@ -0,0 +1,83 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card, DataTable } from "@/shared/components";
+
+export default function ComplianceTab() {
+  const [logs, setLogs] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState("");
+
+  useEffect(() => {
+    fetch("/api/compliance/audit-log?limit=100")
+      .then((r) => r.json())
+      .then((data) => {
+        setLogs(Array.isArray(data) ? data : data.logs || []);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, []);
+
+  const filtered = filter
+    ? logs.filter(
+        (l) =>
+          l.action?.toLowerCase().includes(filter.toLowerCase()) ||
+          l.actor?.toLowerCase().includes(filter.toLowerCase())
+      )
+    : logs;
+
+  return (
+    <Card className="p-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-lg font-semibold text-text-main flex items-center gap-2">
+          <span className="material-symbols-outlined text-[20px]">policy</span>
+          Audit Log
+        </h3>
+        <input
+          type="text"
+          placeholder="Filter by action or actor..."
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          className="px-3 py-1.5 text-sm rounded-lg bg-black/5 dark:bg-white/5 border border-border text-text-main placeholder:text-text-muted focus:outline-none focus:ring-1 focus:ring-accent"
+        />
+      </div>
+
+      {loading ? (
+        <p className="text-sm text-text-muted">Loading audit log…</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-sm text-text-muted">No audit events found.</p>
+      ) : (
+        <div className="overflow-auto max-h-96 rounded-lg border border-border">
+          <table className="w-full text-sm">
+            <thead className="sticky top-0 bg-bg border-b border-border">
+              <tr>
+                <th className="text-left px-3 py-2 text-text-muted font-medium">Time</th>
+                <th className="text-left px-3 py-2 text-text-muted font-medium">Action</th>
+                <th className="text-left px-3 py-2 text-text-muted font-medium">Actor</th>
+                <th className="text-left px-3 py-2 text-text-muted font-medium">Details</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((log, i) => (
+                <tr key={i} className="border-b border-border/50 hover:bg-black/5 dark:hover:bg-white/5">
+                  <td className="px-3 py-2 text-text-muted font-mono text-xs whitespace-nowrap">
+                    {log.timestamp ? new Date(log.timestamp).toLocaleString() : "—"}
+                  </td>
+                  <td className="px-3 py-2">
+                    <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-accent/10 text-accent">
+                      {log.action || "—"}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2 text-text-main">{log.actor || "system"}</td>
+                  <td className="px-3 py-2 text-text-muted text-xs max-w-xs truncate">
+                    {log.details ? JSON.stringify(log.details) : "—"}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </Card>
+  );
+}

src/app/(dashboard)/dashboard/settings/page.js

@@ -12,6 +12,8 @@ import AppearanceTab from "./components/AppearanceTab";
 import ThinkingBudgetTab from "./components/ThinkingBudgetTab";
 import SystemPromptTab from "./components/SystemPromptTab";
 import PricingTab from "./components/PricingTab";
+import ComplianceTab from "./components/ComplianceTab";
+import CacheStatsCard from "./components/CacheStatsCard";
 
 const tabs = [
   { id: "general", label: "General", icon: "settings" },
@@ -20,6 +22,7 @@ const tabs = [
   { id: "routing", label: "Routing", icon: "route" },
   { id: "pricing", label: "Pricing", icon: "payments" },
   { id: "advanced", label: "Advanced", icon: "tune" },
+  { id: "compliance", label: "Compliance", icon: "policy" },
 ];
 
 export default function SettingsPage() {
@@ -85,7 +88,14 @@ export default function SettingsPage() {
 
           {activeTab === "pricing" && <PricingTab />}
 
-          {activeTab === "advanced" && <ProxyTab />}
+          {activeTab === "advanced" && (
+            <div className="flex flex-col gap-6">
+              <ProxyTab />
+              <CacheStatsCard />
+            </div>
+          )}
+
+          {activeTab === "compliance" && <ComplianceTab />}
         </div>
 
         {/* App Info */}

src/app/(dashboard)/dashboard/usage/components/BudgetTelemetryCards.js

@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "@/shared/components";
+
+export default function BudgetTelemetryCards() {
+  const [telemetry, setTelemetry] = useState(null);
+  const [cache, setCache] = useState(null);
+  const [policies, setPolicies] = useState(null);
+
+  useEffect(() => {
+    Promise.allSettled([
+      fetch("/api/telemetry/summary").then((r) => r.json()),
+      fetch("/api/cache/stats").then((r) => r.json()),
+      fetch("/api/policies").then((r) => r.json()),
+    ]).then(([t, c, p]) => {
+      if (t.status === "fulfilled") setTelemetry(t.value);
+      if (c.status === "fulfilled") setCache(c.value);
+      if (p.status === "fulfilled") setPolicies(p.value);
+    });
+  }, []);
+
+  const fmt = (ms) => (ms != null ? `${Math.round(ms)}ms` : "—");
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+      {/* Latency Card */}
+      <Card className="p-4">
+        <h3 className="text-sm font-semibold text-text-muted mb-3 flex items-center gap-2">
+          <span className="material-symbols-outlined text-[18px]">speed</span>
+          Latency
+        </h3>
+        {telemetry ? (
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-text-muted">p50</span>
+              <span className="font-mono">{fmt(telemetry.p50)}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-text-muted">p95</span>
+              <span className="font-mono">{fmt(telemetry.p95)}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-text-muted">p99</span>
+              <span className="font-mono">{fmt(telemetry.p99)}</span>
+            </div>
+            <div className="flex justify-between border-t border-border pt-2 mt-2">
+              <span className="text-text-muted">Total requests</span>
+              <span className="font-mono">{telemetry.totalRequests ?? 0}</span>
+            </div>
+          </div>
+        ) : (
+          <p className="text-sm text-text-muted">No data yet</p>
+        )}
+      </Card>
+
+      {/* Cache Card */}
+      <Card className="p-4">
+        <h3 className="text-sm font-semibold text-text-muted mb-3 flex items-center gap-2">
+          <span className="material-symbols-outlined text-[18px]">cached</span>
+          Prompt Cache
+        </h3>
+        {cache ? (
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-text-muted">Entries</span>
+              <span className="font-mono">
+                {cache.size}/{cache.maxSize}
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-text-muted">Hit Rate</span>
+              <span className="font-mono">{cache.hitRate?.toFixed(1) ?? 0}%</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-text-muted">Hits / Misses</span>
+              <span className="font-mono">
+                {cache.hits ?? 0} / {cache.misses ?? 0}
+              </span>
+            </div>
+          </div>
+        ) : (
+          <p className="text-sm text-text-muted">No data yet</p>
+        )}
+      </Card>
+
+      {/* System Health Card */}
+      <Card className="p-4">
+        <h3 className="text-sm font-semibold text-text-muted mb-3 flex items-center gap-2">
+          <span className="material-symbols-outlined text-[18px]">monitor_heart</span>
+          System Health
+        </h3>
+        {policies ? (
+          <div className="space-y-2 text-sm">
+            <div className="flex justify-between">
+              <span className="text-text-muted">Circuit Breakers</span>
+              <span className="font-mono">{policies.circuitBreakers?.length ?? 0} active</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-text-muted">Locked IPs</span>
+              <span className="font-mono">{policies.lockedIdentifiers?.length ?? 0}</span>
+            </div>
+            {policies.circuitBreakers?.some((cb) => cb.state === "OPEN") && (
+              <div className="mt-2 px-2 py-1 rounded bg-red-500/10 text-red-400 text-xs">
+                ⚠ Open circuit breakers detected
+              </div>
+            )}
+          </div>
+        ) : (
+          <p className="text-sm text-text-muted">No data yet</p>
+        )}
+      </Card>
+    </div>
+  );
+}

src/app/(dashboard)/dashboard/usage/page.js

@@ -12,6 +12,8 @@ import ProviderLimits from "./components/ProviderLimits";
 import SessionsTab from "./components/SessionsTab";
 import RateLimitStatus from "./components/RateLimitStatus";
 
+import BudgetTelemetryCards from "./components/BudgetTelemetryCards";
+
 export default function UsagePage() {
   const [activeTab, setActiveTab] = useState("overview");
 
@@ -33,6 +35,7 @@ export default function UsagePage() {
       {activeTab === "overview" && (
         <Suspense fallback={<CardSkeleton />}>
           <UsageAnalytics />
+          <BudgetTelemetryCards />
         </Suspense>
       )}
       {activeTab === "logs" && <RequestLoggerV2 />}