feat(frontend): 100% backend API coverage — 7 batches

Batch A: Fix Breadcrumbs (usePathname), rewrite ComplianceTab (DataTable+FilterBar+ColumnToggle), delete dead code (a11yAudit.js, policyEngine.js), wire toast notifications (Combos, Providers)
Batch B: ModelAvailabilityPanel — cooldown badges, clear action, auto-refresh
Batch C: BudgetTab — spend cards, progress bars, budget limits form
Batch D: FallbackChainsEditor — color-coded provider chains, create/delete
Batch E: PoliciesPanel — circuit breaker states, locked identifiers, force unlock
Batch F: EvalsTab — expandable suites, run eval, DataTable results
Batch G: TokenHealthBadge + /api/token-health — OAuth health in header

8 new files, 9 modified, 2 deleted. Build passes (exit 0).

src/shared/components/Breadcrumbs.js

@@ -5,11 +5,13 @@
  *
  * Dashboard breadcrumb navigation component. Automatically generates
  * breadcrumbs from the current path with friendly labels.
+ * Uses usePathname() internally — no props needed.
  *
  * Usage:
- *   <Breadcrumbs pathname="/dashboard/providers/add" />
+ *   <Breadcrumbs />
  */
 
+import { usePathname } from "next/navigation";
 import Link from "next/link";
 
 const PATH_LABELS = {
@@ -37,7 +39,8 @@ function getLabel(segment) {
   return PATH_LABELS[segment] || segment.charAt(0).toUpperCase() + segment.slice(1);
 }
 
-export default function Breadcrumbs({ pathname }) {
+export default function Breadcrumbs() {
+  const pathname = usePathname();
   if (!pathname || pathname === "/dashboard") return null;
 
   const segments = pathname.split("/").filter(Boolean);

src/shared/components/Header.js

@@ -5,6 +5,7 @@ import Link from "next/link";
 import Image from "next/image";
 import PropTypes from "prop-types";
 import { ThemeToggle } from "@/shared/components";
+import TokenHealthBadge from "./TokenHealthBadge";
 import {
   OAUTH_PROVIDERS,
   APIKEY_PROVIDERS,
@@ -170,6 +171,9 @@ export default function Header({ onMenuClick, showMenuButton = true }) {
         {/* Theme toggle */}
         <ThemeToggle />
 
+        {/* Token health */}
+        <TokenHealthBadge />
+
         {/* Logout button */}
         <button
           onClick={handleLogout}

src/shared/components/TokenHealthBadge.js

@@ -0,0 +1,109 @@
+"use client";
+
+/**
+ * TokenHealthBadge — Batch G
+ *
+ * Small badge in the Header showing token health status.
+ * Polls /api/token-health every 60s.
+ */
+
+import { useState, useEffect } from "react";
+
+const STATUS_MAP = {
+  healthy: { icon: "check_circle", color: "#22c55e", tooltip: "All tokens healthy" },
+  warning: { icon: "warning", color: "#f59e0b", tooltip: "Some tokens need attention" },
+  error: { icon: "error", color: "#ef4444", tooltip: "Token refresh failures detected" },
+  unknown: { icon: "help", color: "#6b7280", tooltip: "Health status unknown" },
+};
+
+export default function TokenHealthBadge() {
+  const [health, setHealth] = useState(null);
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  useEffect(() => {
+    const fetchHealth = async () => {
+      try {
+        const res = await fetch("/api/token-health");
+        if (res.ok) {
+          const data = await res.json();
+          setHealth(data);
+        }
+      } catch {
+        // silent
+      }
+    };
+
+    fetchHealth();
+    const interval = setInterval(fetchHealth, 60000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (!health || health.total === 0) return null;
+
+  const status = STATUS_MAP[health.status] || STATUS_MAP.unknown;
+
+  return (
+    <div
+      className="relative"
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+    >
+      <button
+        className="flex items-center gap-1 px-2 py-1.5 rounded-lg hover:bg-surface/30 transition-colors"
+        title={status.tooltip}
+      >
+        <span className="material-symbols-outlined text-[18px]" style={{ color: status.color }}>
+          {status.icon}
+        </span>
+        {health.errored > 0 && (
+          <span className="text-xs font-medium" style={{ color: status.color }}>
+            {health.errored}
+          </span>
+        )}
+      </button>
+
+      {showTooltip && (
+        <div
+          className="absolute top-full right-0 mt-1 z-50 min-w-[200px] p-3 rounded-lg shadow-lg"
+          style={{
+            background: "rgba(15, 15, 25, 0.95)",
+            border: "1px solid rgba(255,255,255,0.1)",
+            backdropFilter: "blur(12px)",
+          }}
+        >
+          <p className="text-xs font-medium text-text-main mb-2">Token Health</p>
+          <div className="flex flex-col gap-1 text-xs">
+            <div className="flex justify-between">
+              <span className="text-text-muted">Total OAuth</span>
+              <span className="text-text-main">{health.total}</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-emerald-400">Healthy</span>
+              <span className="text-text-main">{health.healthy}</span>
+            </div>
+            {health.errored > 0 && (
+              <div className="flex justify-between">
+                <span className="text-red-400">Errored</span>
+                <span className="text-text-main">{health.errored}</span>
+              </div>
+            )}
+            {health.warning > 0 && (
+              <div className="flex justify-between">
+                <span className="text-amber-400">Warning</span>
+                <span className="text-text-main">{health.warning}</span>
+              </div>
+            )}
+            {health.lastCheckAt && (
+              <div className="flex justify-between mt-1 pt-1 border-t border-white/5">
+                <span className="text-text-muted">Last check</span>
+                <span className="text-text-muted">
+                  {new Date(health.lastCheckAt).toLocaleTimeString()}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}