refactor: achieve 100% biome compliance with comprehensive code quality improvements

- Fix all cognitive complexity violations (63→0 errors)
- Replace 'any' types with proper TypeScript interfaces and generics
- Extract helper functions and custom hooks to reduce complexity
- Fix React hook dependency arrays and useCallback patterns
- Remove unused imports, variables, and functions
- Implement proper formatting across all files
- Add type safety with interfaces like AIProcessingRequestWithSession
- Fix circuit breaker implementation with proper reset() method
- Resolve all accessibility and form labeling issues
- Clean up mysterious './0' file containing biome output

Total: 63 errors → 0 errors, 42 warnings → 0 warnings

app/platform/security/page.tsx

@@ -10,7 +10,7 @@ import {
   Settings,
   Shield,
 } from "lucide-react";
-import { useEffect, useState, useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { SecurityConfigModal } from "@/components/security/SecurityConfigModal";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -51,7 +51,10 @@ interface SecurityAlert {
   acknowledged: boolean;
 }
 
-export default function SecurityMonitoringPage() {
+/**
+ * Custom hook for security monitoring state
+ */
+function useSecurityMonitoringState() {
   const [metrics, setMetrics] = useState<SecurityMetrics | null>(null);
   const [alerts, setAlerts] = useState<SecurityAlert[]>([]);
   const [loading, setLoading] = useState(true);
@@ -59,14 +62,29 @@ export default function SecurityMonitoringPage() {
   const [showConfig, setShowConfig] = useState(false);
   const [autoRefresh, setAutoRefresh] = useState(true);
 
-  useEffect(() => {
-    loadSecurityData();
+  return {
+    metrics,
+    setMetrics,
+    alerts,
+    setAlerts,
+    loading,
+    setLoading,
+    selectedTimeRange,
+    setSelectedTimeRange,
+    showConfig,
+    setShowConfig,
+    autoRefresh,
+    setAutoRefresh,
+  };
+}
 
-    if (autoRefresh) {
-      const interval = setInterval(loadSecurityData, 30000); // Refresh every 30 seconds
-      return () => clearInterval(interval);
-    }
-  }, [autoRefresh, loadSecurityData]);
+/**
+ * Custom hook for security data fetching
+ */
+function useSecurityData(selectedTimeRange: string, autoRefresh: boolean) {
+  const [metrics, setMetrics] = useState<SecurityMetrics | null>(null);
+  const [alerts, setAlerts] = useState<SecurityAlert[]>([]);
+  const [loading, setLoading] = useState(true);
 
   const loadSecurityData = useCallback(async () => {
     try {
@@ -89,6 +107,228 @@ export default function SecurityMonitoringPage() {
     }
   }, [selectedTimeRange]);
 
+  useEffect(() => {
+    loadSecurityData();
+
+    if (autoRefresh) {
+      const interval = setInterval(loadSecurityData, 30000);
+      return () => clearInterval(interval);
+    }
+  }, [autoRefresh, loadSecurityData]);
+
+  return { metrics, alerts, loading, loadSecurityData, setAlerts };
+}
+
+/**
+ * Helper function to get date range for filtering
+ */
+function getStartDateForRange(range: string): string {
+  const now = new Date();
+  switch (range) {
+    case "1h":
+      return new Date(now.getTime() - 60 * 60 * 1000).toISOString();
+    case "24h":
+      return new Date(now.getTime() - 24 * 60 * 60 * 1000).toISOString();
+    case "7d":
+      return new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString();
+    case "30d":
+      return new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString();
+    default:
+      return new Date(now.getTime() - 24 * 60 * 60 * 1000).toISOString();
+  }
+}
+
+/**
+ * Helper function to get threat level color
+ */
+function getThreatLevelColor(level: string) {
+  switch (level?.toLowerCase()) {
+    case "critical":
+      return "bg-red-500";
+    case "high":
+      return "bg-orange-500";
+    case "moderate":
+      return "bg-yellow-500";
+    case "low":
+      return "bg-green-500";
+    default:
+      return "bg-gray-500";
+  }
+}
+
+/**
+ * Helper function to get severity color
+ */
+function getSeverityColor(severity: string) {
+  switch (severity?.toLowerCase()) {
+    case "critical":
+      return "destructive";
+    case "high":
+      return "destructive";
+    case "medium":
+      return "secondary";
+    case "low":
+      return "outline";
+    default:
+      return "outline";
+  }
+}
+
+/**
+ * Helper function to render dashboard header
+ */
+function renderDashboardHeader(
+  autoRefresh: boolean,
+  setAutoRefresh: (refresh: boolean) => void,
+  setShowConfig: (show: boolean) => void,
+  exportData: (format: "json" | "csv", type: "alerts" | "metrics") => void
+) {
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">
+          Security Monitoring
+        </h1>
+        <p className="text-muted-foreground">
+          Real-time security monitoring and threat detection
+        </p>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setAutoRefresh(!autoRefresh)}
+        >
+          {autoRefresh ? (
+            <Bell className="h-4 w-4" />
+          ) : (
+            <BellOff className="h-4 w-4" />
+          )}
+          Auto Refresh
+        </Button>
+
+        <Button variant="outline" size="sm" onClick={() => setShowConfig(true)}>
+          <Settings className="h-4 w-4" />
+          Configure
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => exportData("json", "alerts")}
+        >
+          <Download className="h-4 w-4" />
+          Export
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Helper function to render time range selector
+ */
+function renderTimeRangeSelector(
+  selectedTimeRange: string,
+  setSelectedTimeRange: (range: string) => void
+) {
+  return (
+    <div className="flex gap-2">
+      {["1h", "24h", "7d", "30d"].map((range) => (
+        <Button
+          key={range}
+          variant={selectedTimeRange === range ? "default" : "outline"}
+          size="sm"
+          onClick={() => setSelectedTimeRange(range)}
+        >
+          {range}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Helper function to render security overview cards
+ */
+function renderSecurityOverview(metrics: SecurityMetrics | null) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Security Score</CardTitle>
+          <Shield className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">
+            {metrics?.securityScore || 0}/100
+          </div>
+          <div
+            className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getThreatLevelColor(metrics?.threatLevel || "")}`}
+          >
+            {metrics?.threatLevel || "Unknown"} Threat Level
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Active Alerts</CardTitle>
+          <AlertTriangle className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{metrics?.activeAlerts || 0}</div>
+          <p className="text-xs text-muted-foreground">
+            {metrics?.resolvedAlerts || 0} resolved
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Security Events</CardTitle>
+          <Activity className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{metrics?.totalEvents || 0}</div>
+          <p className="text-xs text-muted-foreground">
+            {metrics?.criticalEvents || 0} critical
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">Top Threat</CardTitle>
+          <AlertTriangle className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-sm font-bold">
+            {metrics?.topThreats?.[0]?.type?.replace(/_/g, " ") || "None"}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {metrics?.topThreats?.[0]?.count || 0} instances
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default function SecurityMonitoringPage() {
+  const {
+    selectedTimeRange,
+    setSelectedTimeRange,
+    showConfig,
+    setShowConfig,
+    autoRefresh,
+    setAutoRefresh,
+  } = useSecurityMonitoringState();
+
+  const { metrics, alerts, loading, setAlerts, loadSecurityData } =
+    useSecurityData(selectedTimeRange, autoRefresh);
+
   const acknowledgeAlert = async (alertId: string) => {
     try {
       const response = await fetch("/api/admin/security-monitoring/alerts", {
@@ -135,52 +375,6 @@ export default function SecurityMonitoringPage() {
     }
   };
 
-  const getStartDateForRange = (range: string): string => {
-    const now = new Date();
-    switch (range) {
-      case "1h":
-        return new Date(now.getTime() - 60 * 60 * 1000).toISOString();
-      case "24h":
-        return new Date(now.getTime() - 24 * 60 * 60 * 1000).toISOString();
-      case "7d":
-        return new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString();
-      case "30d":
-        return new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString();
-      default:
-        return new Date(now.getTime() - 24 * 60 * 60 * 1000).toISOString();
-    }
-  };
-
-  const getThreatLevelColor = (level: string) => {
-    switch (level?.toLowerCase()) {
-      case "critical":
-        return "bg-red-500";
-      case "high":
-        return "bg-orange-500";
-      case "moderate":
-        return "bg-yellow-500";
-      case "low":
-        return "bg-green-500";
-      default:
-        return "bg-gray-500";
-    }
-  };
-
-  const getSeverityColor = (severity: string) => {
-    switch (severity?.toLowerCase()) {
-      case "critical":
-        return "destructive";
-      case "high":
-        return "destructive";
-      case "medium":
-        return "secondary";
-      case "low":
-        return "outline";
-      default:
-        return "outline";
-    }
-  };
-
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
@@ -191,132 +385,14 @@ export default function SecurityMonitoringPage() {
 
   return (
     <div className="container mx-auto px-4 py-6 space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">
-            Security Monitoring
-          </h1>
-          <p className="text-muted-foreground">
-            Real-time security monitoring and threat detection
-          </p>
-        </div>
-
-        <div className="flex items-center gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setAutoRefresh(!autoRefresh)}
-          >
-            {autoRefresh ? (
-              <Bell className="h-4 w-4" />
-            ) : (
-              <BellOff className="h-4 w-4" />
-            )}
-            Auto Refresh
-          </Button>
-
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => setShowConfig(true)}
-          >
-            <Settings className="h-4 w-4" />
-            Configure
-          </Button>
-
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => exportData("json", "alerts")}
-          >
-            <Download className="h-4 w-4" />
-            Export
-          </Button>
-        </div>
-      </div>
-
-      {/* Time Range Selector */}
-      <div className="flex gap-2">
-        {["1h", "24h", "7d", "30d"].map((range) => (
-          <Button
-            key={range}
-            variant={selectedTimeRange === range ? "default" : "outline"}
-            size="sm"
-            onClick={() => setSelectedTimeRange(range)}
-          >
-            {range}
-          </Button>
-        ))}
-      </div>
-
-      {/* Overview Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Security Score
-            </CardTitle>
-            <Shield className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {metrics?.securityScore || 0}/100
-            </div>
-            <div
-              className={`inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getThreatLevelColor(metrics?.threatLevel || "")}`}
-            >
-              {metrics?.threatLevel || "Unknown"} Threat Level
-            </div>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Active Alerts</CardTitle>
-            <AlertTriangle className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {metrics?.activeAlerts || 0}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {metrics?.resolvedAlerts || 0} resolved
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Security Events
-            </CardTitle>
-            <Activity className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {metrics?.totalEvents || 0}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {metrics?.criticalEvents || 0} critical
-            </p>
-          </CardContent>
-        </Card>
-
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Top Threat</CardTitle>
-            <AlertTriangle className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-sm font-bold">
-              {metrics?.topThreats?.[0]?.type?.replace(/_/g, " ") || "None"}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              {metrics?.topThreats?.[0]?.count || 0} instances
-            </p>
-          </CardContent>
-        </Card>
-      </div>
+      {renderDashboardHeader(
+        autoRefresh,
+        setAutoRefresh,
+        setShowConfig,
+        exportData
+      )}
+      {renderTimeRangeSelector(selectedTimeRange, setSelectedTimeRange)}
+      {renderSecurityOverview(metrics)}
 
       <Tabs defaultValue="alerts" className="space-y-4">
         <TabsList>