Add rate limiting dashboard to admin panel

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

Closes leeworks-agents/SPARC#1686

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

frontend/src/App.tsx

@@ -11,7 +11,9 @@ 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';
+import { HistoryDiff } from './pages/HistoryDiff';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -45,6 +47,7 @@ function App() {
               <Route path="/batch" element={<Batch />} />
               <Route path="/analytics" element={<AnalyticsPage />} />
               <Route path="/compare" element={<Compare />} />
+              <Route path="/history-diff" element={<HistoryDiff />} />
               <Route path="/about" element={<About />} />
 
               {/* Admin routes */}
@@ -56,6 +59,14 @@ function App() {
                   </ProtectedRoute>
                 }
               />
+              <Route
+                path="/admin/rate-limits"
+                element={
+                  <ProtectedRoute requireAdmin>
+                    <AdminRateLimits />
+                  </ProtectedRoute>
+                }
+              />
             </Route>
 
             {/* Default redirect */}

frontend/src/api/client.ts

@@ -148,8 +148,43 @@ export const analysisApi = {
     const response = await api.get<JobStatus[]>(`/jobs?${params}`);
     return response.data;
   },
+
+  getCompanyHistory: async (companyName: string, limit = 20): Promise<AnalysisHistoryItem[]> => {
+    const response = await api.get<AnalysisHistoryItem[]>(
+      `/analyze/${encodeURIComponent(companyName)}/history?limit=${limit}`
+    );
+    return response.data;
+  },
+
+  diffAnalyses: async (companyName: string, fromId: number, toId: number): Promise<AnalysisDiff> => {
+    const response = await api.get<AnalysisDiff>(
+      `/analyze/${encodeURIComponent(companyName)}/diff?from=${fromId}&to=${toId}`
+    );
+    return response.data;
+  },
 };
 
+// Analysis diff types
+export interface AnalysisHistoryItem {
+  id: number;
+  analysis_type: string | null;
+  model: string | null;
+  timestamp: string;
+}
+
+export interface AnalysisDiff {
+  company_name: string;
+  from_id: number;
+  to_id: number;
+  from_timestamp: string;
+  to_timestamp: string;
+  patent_count_delta: number;
+  added_patents: string[];
+  removed_patents: string[];
+  changed_fields: Record<string, { from: string | null; to: string | null }>;
+  summary: string;
+}
+
 // Export API
 export const exportApi = {
   exportCsv: async (companyName: string): Promise<void> => {
@@ -201,6 +236,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 +277,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, History, ShieldAlert } from 'lucide-react';
 
 export function Layout() {
   const { user, isAdmin, logout } = useAuth();
@@ -18,11 +18,13 @@ export function Layout() {
     { to: '/batch', icon: Layers, label: 'Batch' },
     { to: '/analytics', icon: BarChart3, label: 'Analytics' },
     { to: '/compare', icon: GitCompareArrows, label: 'Compare' },
+    { to: '/history-diff', icon: History, label: 'Diff' },
     { to: '/about', icon: Info, label: 'About' },
   ];
 
   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>
+  );
+}

tests/test_rate_limit_admin.py

@@ -20,8 +20,10 @@ def client():
 def reset_stats():
     """Reset rate limit stats between tests."""
     api._rate_limit_stats.clear()
+    api._rejected_log.clear()
     yield
     api._rate_limit_stats.clear()
+    api._rejected_log.clear()
 
 
 def _mock_admin():
@@ -50,8 +52,7 @@ class TestRateLimitAdminEndpoint:
             app.dependency_overrides.clear()
 
     def test_non_admin_rejected(self, client):
-        """Non-admin users should get 403."""
+        """Non-admin users should get 401/403."""
-        # Without overriding the dependency, it should fail auth
         response = client.get("/admin/rate-limits")
         assert response.status_code in (401, 403)
 
@@ -77,6 +78,9 @@ class TestRateLimitAdminEndpoint:
             for rl in data["rate_limits"]:
                 assert rl["total_requests"] == 0
                 assert rl["rejected_requests"] == 0
+                assert rl["by_ip"] == []
+            assert data["throttled_24h"] == 0
+            assert data["throttled_over_time"] == []
         finally:
             app.dependency_overrides.clear()
 
@@ -107,3 +111,68 @@ class TestRateLimitAdminEndpoint:
                 assert isinstance(rl["limit"], str)
         finally:
             app.dependency_overrides.clear()
+
+    def test_per_ip_breakdown(self, client):
+        """Stats should include per-IP breakdown with total and rejected counts."""
+        api._track_rate_limit_request("/auth/login", "10.0.0.1")
+        api._track_rate_limit_request("/auth/login", "10.0.0.1", rejected=True)
+        api._track_rate_limit_request("/auth/login", "10.0.0.2")
+
+        app.dependency_overrides[api.get_current_admin] = _mock_admin
+        try:
+            response = client.get("/admin/rate-limits")
+            data = response.json()
+            login_stats = next(rl for rl in data["rate_limits"] if rl["endpoint"] == "/auth/login")
+            by_ip = login_stats["by_ip"]
+            assert len(by_ip) == 2
+            ip1 = next(entry for entry in by_ip if entry["ip"] == "10.0.0.1")
+            assert ip1["total"] == 2
+            assert ip1["rejected"] == 1
+            ip2 = next(entry for entry in by_ip if entry["ip"] == "10.0.0.2")
+            assert ip2["total"] == 1
+            assert ip2["rejected"] == 0
+        finally:
+            app.dependency_overrides.clear()
+
+    def test_throttled_24h_count(self, client):
+        """Should report total throttled requests in the last 24 hours."""
+        api._track_rate_limit_request("/auth/login", "10.0.0.1", rejected=True)
+        api._track_rate_limit_request("/auth/register", "10.0.0.2", rejected=True)
+
+        app.dependency_overrides[api.get_current_admin] = _mock_admin
+        try:
+            response = client.get("/admin/rate-limits")
+            data = response.json()
+            assert data["throttled_24h"] == 2
+        finally:
+            app.dependency_overrides.clear()
+
+    def test_throttled_over_time_structure(self, client):
+        """Throttled-over-time should be a list of {timestamp, count} buckets."""
+        api._track_rate_limit_request("/auth/login", "10.0.0.1", rejected=True)
+
+        app.dependency_overrides[api.get_current_admin] = _mock_admin
+        try:
+            response = client.get("/admin/rate-limits")
+            data = response.json()
+            assert len(data["throttled_over_time"]) >= 1
+            entry = data["throttled_over_time"][0]
+            assert "timestamp" in entry
+            assert "count" in entry
+            assert entry["count"] >= 1
+        finally:
+            app.dependency_overrides.clear()
+
+    def test_response_shape_matches_contract(self, client):
+        """The full response should match the expected shape for the frontend."""
+        app.dependency_overrides[api.get_current_admin] = _mock_admin
+        try:
+            response = client.get("/admin/rate-limits")
+            data = response.json()
+            # Top-level keys
+            assert set(data.keys()) == {"rate_limits", "throttled_24h", "throttled_over_time"}
+            # Each rate_limit entry
+            for rl in data["rate_limits"]:
+                assert set(rl.keys()) == {"endpoint", "limit", "total_requests", "rejected_requests", "by_ip"}
+        finally:
+            app.dependency_overrides.clear()