Add rate limiting dashboard to admin panel

- Enhance GET /admin/rate-limits with per-IP breakdown, 24h throttled
  count, and hourly time-series of rejected requests
- Add _rejected_log deque for time-series tracking of throttled requests
- Add AdminRateLimits React page with auto-refresh (configurable 15s/30s/1m),
  summary cards, throttled-over-time bar chart, endpoint table, per-IP table
- Add TypeScript types (RateLimitStatsResponse) and adminApi.getRateLimits()
- Wire up /admin/rate-limits route and nav link (admin-only)
- Expand unit tests to 10 cases: auth, empty state, per-IP breakdown,
  throttled_24h count, time-series structure, response shape contract

Closes leeworks-agents/SPARC#1686

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import { Batch } from './pages/Batch';
 import { AnalyticsPage } from './pages/Analytics';
 import { About } from './pages/About';
 import { AdminUsers } from './pages/AdminUsers';
+import { AdminRateLimits } from './pages/AdminRateLimits';
 import { Compare } from './pages/Compare';
 
 const queryClient = new QueryClient({
@@ -56,6 +57,14 @@ function App() {
                   </ProtectedRoute>
                 }
               />
+              <Route
+                path="/admin/rate-limits"
+                element={
+                  <ProtectedRoute requireAdmin>
+                    <AdminRateLimits />
+                  </ProtectedRoute>
+                }
+              />
             </Route>
 
             {/* Default redirect */}

frontend/src/api/client.ts

@@ -201,6 +201,32 @@ export const analyticsApi = {
   },
 };
 
+// Rate limit types
+export interface RateLimitIpEntry {
+  ip: string;
+  total: number;
+  rejected: number;
+}
+
+export interface RateLimitEndpointStats {
+  endpoint: string;
+  limit: string;
+  total_requests: number;
+  rejected_requests: number;
+  by_ip: RateLimitIpEntry[];
+}
+
+export interface ThrottledBucket {
+  timestamp: string;
+  count: number;
+}
+
+export interface RateLimitStatsResponse {
+  rate_limits: RateLimitEndpointStats[];
+  throttled_24h: number;
+  throttled_over_time: ThrottledBucket[];
+}
+
 // Admin API
 export const adminApi = {
   listUsers: async (limit = 100, offset = 0): Promise<User[]> => {
@@ -216,6 +242,11 @@ export const adminApi = {
   deleteUser: async (userId: number): Promise<void> => {
     await api.delete(`/admin/users/${userId}`);
   },
+
+  getRateLimits: async (): Promise<RateLimitStatsResponse> => {
+    const response = await api.get<RateLimitStatsResponse>('/admin/rate-limits');
+    return response.data;
+  },
 };
 
 export default api;

frontend/src/components/Layout.tsx

@@ -1,7 +1,7 @@
 import { Outlet, NavLink, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext';
 import { useTheme } from '../context/ThemeContext';
-import { Search, Layers, BarChart3, Info, Users, LogOut, GitCompareArrows, Sun, Moon } from 'lucide-react';
+import { Search, Layers, BarChart3, Info, Users, LogOut, GitCompareArrows, Sun, Moon, ShieldAlert } from 'lucide-react';
 
 export function Layout() {
   const { user, isAdmin, logout } = useAuth();
@@ -23,6 +23,7 @@ export function Layout() {
 
   if (isAdmin) {
     navItems.push({ to: '/admin/users', icon: Users, label: 'Users' });
+    navItems.push({ to: '/admin/rate-limits', icon: ShieldAlert, label: 'Rate Limits' });
   }
 
   return (

frontend/src/pages/AdminRateLimits.tsx

@@ -0,0 +1,240 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { adminApi } from '../api/client';
+import type { RateLimitStatsResponse } from '../api/client';
+import { ShieldAlert, Activity, AlertCircle, RefreshCw, Clock } from 'lucide-react';
+
+const REFRESH_OPTIONS = [
+  { label: '15s', value: 15_000 },
+  { label: '30s', value: 30_000 },
+  { label: '1m', value: 60_000 },
+  { label: 'Off', value: 0 },
+];
+
+export function AdminRateLimits() {
+  const [refreshInterval, setRefreshInterval] = useState(30_000);
+
+  const { data, isLoading, isError, dataUpdatedAt } = useQuery<RateLimitStatsResponse>({
+    queryKey: ['admin-rate-limits'],
+    queryFn: () => adminApi.getRateLimits(),
+    refetchInterval: refreshInterval || false,
+  });
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="flex items-center gap-2 bg-error/10 border border-error/20 text-error rounded-xl px-4 py-3">
+        <AlertCircle size={18} />
+        <span>Failed to load rate limit statistics.</span>
+      </div>
+    );
+  }
+
+  const maxThrottledCount = data?.throttled_over_time?.length
+    ? Math.max(...data.throttled_over_time.map((b) => b.count))
+    : 0;
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between flex-wrap gap-4">
+        <div>
+          <h2 className="text-xl font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-2">
+            Rate Limiting Dashboard
+          </h2>
+          <p className="text-text-secondary">Monitor API rate limits and throttled requests.</p>
+        </div>
+        <div className="flex items-center gap-3">
+          {/* Last updated */}
+          {dataUpdatedAt > 0 && (
+            <span className="text-xs text-text-secondary flex items-center gap-1">
+              <Clock size={12} />
+              Updated {new Date(dataUpdatedAt).toLocaleTimeString()}
+            </span>
+          )}
+          {/* Refresh interval selector */}
+          <div className="flex items-center gap-1 bg-bg-card/60 border border-primary/15 rounded-xl p-1">
+            <RefreshCw size={14} className="text-text-secondary ml-2" />
+            {REFRESH_OPTIONS.map((opt) => (
+              <button
+                key={opt.value}
+                onClick={() => setRefreshInterval(opt.value)}
+                className={`px-3 py-1 rounded-lg text-xs font-medium transition-all ${
+                  refreshInterval === opt.value
+                    ? 'bg-primary text-white'
+                    : 'text-text-secondary hover:text-text-primary hover:bg-bg-card-hover'
+                }`}
+              >
+                {opt.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Summary cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-bg-card/60 border border-primary/15 rounded-2xl p-5">
+          <div className="flex items-center gap-2 mb-2">
+            <Activity size={18} className="text-primary" />
+            <span className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
+              Total Requests
+            </span>
+          </div>
+          <div className="text-3xl font-bold text-text-primary">
+            {data?.rate_limits.reduce((sum, rl) => sum + rl.total_requests, 0) ?? 0}
+          </div>
+        </div>
+        <div className="bg-bg-card/60 border border-error/15 rounded-2xl p-5">
+          <div className="flex items-center gap-2 mb-2">
+            <ShieldAlert size={18} className="text-error" />
+            <span className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
+              Throttled (24h)
+            </span>
+          </div>
+          <div className="text-3xl font-bold text-error">
+            {data?.throttled_24h ?? 0}
+          </div>
+        </div>
+        <div className="bg-bg-card/60 border border-secondary/15 rounded-2xl p-5">
+          <div className="flex items-center gap-2 mb-2">
+            <ShieldAlert size={18} className="text-secondary" />
+            <span className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
+              Rate-Limited Endpoints
+            </span>
+          </div>
+          <div className="text-3xl font-bold text-text-primary">
+            {data?.rate_limits.length ?? 0}
+          </div>
+        </div>
+      </div>
+
+      {/* Throttled over time chart (simple bar chart) */}
+      {data?.throttled_over_time && data.throttled_over_time.length > 0 && (
+        <div className="bg-bg-card/60 border border-primary/15 rounded-2xl p-5">
+          <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider mb-4">
+            Throttled Requests Over Time (Last 24h)
+          </h3>
+          <div className="flex items-end gap-1 h-32">
+            {data.throttled_over_time.map((bucket) => {
+              const height = maxThrottledCount > 0 ? (bucket.count / maxThrottledCount) * 100 : 0;
+              const hour = new Date(bucket.timestamp).getHours();
+              return (
+                <div key={bucket.timestamp} className="flex-1 flex flex-col items-center gap-1">
+                  <span className="text-xs text-text-secondary">{bucket.count}</span>
+                  <div
+                    className="w-full bg-error/70 rounded-t-sm min-h-[2px] transition-all"
+                    style={{ height: `${Math.max(height, 2)}%` }}
+                    title={`${bucket.timestamp}: ${bucket.count} throttled`}
+                  />
+                  <span className="text-[10px] text-text-secondary">{hour}:00</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Per-endpoint table */}
+      <div className="bg-bg-card/60 border border-primary/15 rounded-2xl overflow-hidden">
+        <div className="overflow-x-auto">
+          <table className="w-full">
+            <thead>
+              <tr className="border-b border-primary/10">
+                <th className="text-left px-6 py-4 text-sm font-semibold text-text-secondary uppercase tracking-wider">
+                  Endpoint
+                </th>
+                <th className="text-left px-6 py-4 text-sm font-semibold text-text-secondary uppercase tracking-wider">
+                  Limit
+                </th>
+                <th className="text-right px-6 py-4 text-sm font-semibold text-text-secondary uppercase tracking-wider">
+                  Total Requests
+                </th>
+                <th className="text-right px-6 py-4 text-sm font-semibold text-text-secondary uppercase tracking-wider">
+                  Rejected
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-primary/10">
+              {data?.rate_limits.map((rl) => (
+                <tr key={rl.endpoint} className="hover:bg-bg-card-hover/50 transition-colors">
+                  <td className="px-6 py-4 font-mono text-sm text-text-primary">{rl.endpoint}</td>
+                  <td className="px-6 py-4">
+                    <span className="inline-flex px-2 py-0.5 rounded-full text-xs font-medium bg-primary/10 text-primary border border-primary/20">
+                      {rl.limit}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4 text-right text-text-primary font-semibold">
+                    {rl.total_requests}
+                  </td>
+                  <td className="px-6 py-4 text-right">
+                    <span className={rl.rejected_requests > 0 ? 'text-error font-semibold' : 'text-text-secondary'}>
+                      {rl.rejected_requests}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      {/* Per-IP breakdown */}
+      {data?.rate_limits.some((rl) => rl.by_ip.length > 0) && (
+        <div className="bg-bg-card/60 border border-primary/15 rounded-2xl overflow-hidden">
+          <div className="px-6 py-4 border-b border-primary/10">
+            <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
+              Per-IP Breakdown
+            </h3>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead>
+                <tr className="border-b border-primary/10">
+                  <th className="text-left px-6 py-3 text-sm font-semibold text-text-secondary uppercase tracking-wider">
+                    Endpoint
+                  </th>
+                  <th className="text-left px-6 py-3 text-sm font-semibold text-text-secondary uppercase tracking-wider">
+                    IP Address
+                  </th>
+                  <th className="text-right px-6 py-3 text-sm font-semibold text-text-secondary uppercase tracking-wider">
+                    Total
+                  </th>
+                  <th className="text-right px-6 py-3 text-sm font-semibold text-text-secondary uppercase tracking-wider">
+                    Rejected
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-primary/10">
+                {data.rate_limits.flatMap((rl) =>
+                  rl.by_ip.map((ipEntry) => (
+                    <tr
+                      key={`${rl.endpoint}-${ipEntry.ip}`}
+                      className="hover:bg-bg-card-hover/50 transition-colors"
+                    >
+                      <td className="px-6 py-3 font-mono text-sm text-text-primary">{rl.endpoint}</td>
+                      <td className="px-6 py-3 font-mono text-sm text-text-secondary">{ipEntry.ip}</td>
+                      <td className="px-6 py-3 text-right text-text-primary">{ipEntry.total}</td>
+                      <td className="px-6 py-3 text-right">
+                        <span className={ipEntry.rejected > 0 ? 'text-error font-semibold' : 'text-text-secondary'}>
+                          {ipEntry.rejected}
+                        </span>
+                      </td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}