chore(frontend): fix lint errors and update biome schema

Fix exhaustive deps, non-null assertion, a11y roles, and error boundary
type. Migrate biome config to 2.4.4.

Author: CarterPerez-dev

PROJECTS/advanced/ai-threat-detection/frontend/biome.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.3.8/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.4.4/schema.json",
   "vcs": {
     "enabled": true,
     "clientKind": "git",

PROJECTS/advanced/ai-threat-detection/frontend/pnpm-lock.yaml

@@ -3,7 +3,7 @@
 // index.ts
 // ===================
 
-export * from './useThreats'
-export * from './useStats'
-export * from './useModels'
 export * from './useAlerts'
+export * from './useModels'
+export * from './useStats'
+export * from './useThreats'

PROJECTS/advanced/ai-threat-detection/frontend/src/api/hooks/index.ts

@@ -5,8 +5,8 @@
 
 import { useEffect, useRef } from 'react'
 import { create } from 'zustand'
+import { type WebSocketAlert, WebSocketAlertSchema } from '@/api/types'
 import { ALERTS, WS_ENDPOINTS } from '@/config'
-import { WebSocketAlertSchema, type WebSocketAlert } from '@/api/types'
 
 interface AlertState {
   alerts: WebSocketAlert[]
@@ -31,11 +31,9 @@ const useAlertStore = create<AlertState>()((set) => ({
   setConnected: (connected) =>
     set({ isConnected: connected, connectionError: null }),
 
-  setError: (error) =>
-    set({ isConnected: false, connectionError: error }),
+  setError: (error) => set({ isConnected: false, connectionError: error }),
 
-  clear: () =>
-    set({ alerts: [], isConnected: false, connectionError: null }),
+  clear: () => set({ alerts: [], isConnected: false, connectionError: null }),
 }))
 
 function getWsUrl(): string {
@@ -82,7 +80,7 @@ export function useAlerts() {
     function scheduleReconnect() {
       const delay = Math.min(
         ALERTS.RECONNECT_BASE_MS * 2 ** retryCountRef.current,
-        ALERTS.RECONNECT_MAX_MS,
+        ALERTS.RECONNECT_MAX_MS
       )
       retryCountRef.current += 1
       retryTimerRef.current = setTimeout(connect, delay)

PROJECTS/advanced/ai-threat-detection/frontend/src/api/hooks/useAlerts.ts

@@ -5,16 +5,16 @@
 
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
-import { QUERY_KEYS, API_ENDPOINTS } from '@/config'
-import { apiClient, QUERY_STRATEGIES } from '@/core/api'
 import type { ModelStatus, RetrainResponse } from '@/api/types'
+import { API_ENDPOINTS, QUERY_KEYS } from '@/config'
+import { apiClient, QUERY_STRATEGIES } from '@/core/api'
 
 export function useModelStatus() {
   return useQuery<ModelStatus>({
     queryKey: QUERY_KEYS.MODELS.STATUS(),
     queryFn: async () => {
       const { data } = await apiClient.get<ModelStatus>(
-        API_ENDPOINTS.MODELS.STATUS,
+        API_ENDPOINTS.MODELS.STATUS
       )
       return data
     },
@@ -28,7 +28,7 @@ export function useRetrain() {
   return useMutation<RetrainResponse>({
     mutationFn: async () => {
       const { data } = await apiClient.post<RetrainResponse>(
-        API_ENDPOINTS.MODELS.RETRAIN,
+        API_ENDPOINTS.MODELS.RETRAIN
       )
       return data
     },

PROJECTS/advanced/ai-threat-detection/frontend/src/api/hooks/useModels.ts

@@ -4,18 +4,17 @@
 // ===================
 
 import { useQuery } from '@tanstack/react-query'
-import { QUERY_KEYS, API_ENDPOINTS } from '@/config'
-import { apiClient, QUERY_STRATEGIES } from '@/core/api'
 import type { StatsResponse } from '@/api/types'
+import { API_ENDPOINTS, QUERY_KEYS } from '@/config'
+import { apiClient, QUERY_STRATEGIES } from '@/core/api'
 
 export function useStats(range = '24h') {
   return useQuery<StatsResponse>({
     queryKey: QUERY_KEYS.STATS.BY_RANGE(range),
     queryFn: async () => {
-      const { data } = await apiClient.get<StatsResponse>(
-        API_ENDPOINTS.STATS,
-        { params: { range } },
-      )
+      const { data } = await apiClient.get<StatsResponse>(API_ENDPOINTS.STATS, {
+        params: { range },
+      })
       return data
     },
     ...QUERY_STRATEGIES.frequent,

PROJECTS/advanced/ai-threat-detection/frontend/src/api/hooks/useStats.ts

@@ -4,9 +4,9 @@
 // ===================
 
 import { useQuery } from '@tanstack/react-query'
-import { QUERY_KEYS, API_ENDPOINTS, PAGINATION } from '@/config'
+import type { ThreatEvent, ThreatList } from '@/api/types'
+import { API_ENDPOINTS, PAGINATION, QUERY_KEYS } from '@/config'
 import { apiClient, QUERY_STRATEGIES } from '@/core/api'
-import type { ThreatList, ThreatEvent } from '@/api/types'
 
 interface ThreatParams {
   limit?: number
@@ -29,7 +29,7 @@ export function useThreats(params: ThreatParams = {}) {
     queryFn: async () => {
       const { data } = await apiClient.get<ThreatList>(
         API_ENDPOINTS.THREATS.LIST,
-        { params: queryParams },
+        { params: queryParams }
       )
       return data
     },
@@ -42,7 +42,7 @@ export function useThreat(id: string | null) {
     queryKey: QUERY_KEYS.THREATS.BY_ID(id ?? ''),
     queryFn: async () => {
       const { data } = await apiClient.get<ThreatEvent>(
-        API_ENDPOINTS.THREATS.BY_ID(id!),
+        API_ENDPOINTS.THREATS.BY_ID(id as string)
       )
       return data
     },

PROJECTS/advanced/ai-threat-detection/frontend/src/api/hooks/useThreats.ts

@@ -3,7 +3,7 @@
 // index.ts
 // ===================
 
-export * from './threats.types'
-export * from './stats.types'
 export * from './models.types'
+export * from './stats.types'
+export * from './threats.types'
 export * from './websocket.types'

PROJECTS/advanced/ai-threat-detection/frontend/src/api/types/index.ts

@@ -5,8 +5,8 @@
 
 import { useEffect, useRef } from 'react'
 import type { WebSocketAlert } from '@/api/types'
-import { SeverityBadge } from './severity-badge'
 import styles from './alert-feed.module.scss'
+import { SeverityBadge } from './severity-badge'
 
 interface AlertFeedProps {
   alerts: WebSocketAlert[]
@@ -25,11 +25,13 @@ export function AlertFeed({
 }: AlertFeedProps): React.ReactElement {
   const listRef = useRef<HTMLDivElement>(null)
 
+  const alertCount = alerts.length
+  // biome-ignore lint/correctness/useExhaustiveDependencies: scroll on new alerts
   useEffect(() => {
     if (listRef.current) {
       listRef.current.scrollTop = 0
     }
-  }, [alerts.length])
+  }, [alertCount])
 
   return (
     <div className={styles.feed}>
@@ -50,9 +52,7 @@ export function AlertFeed({
         ) : (
           alerts.map((alert, i) => (
             <div key={`${alert.timestamp}-${i}`} className={styles.row}>
-              <span className={styles.time}>
-                {formatTime(alert.timestamp)}
-              </span>
+              <span className={styles.time}>{formatTime(alert.timestamp)}</span>
               <span className={styles.ip}>{alert.source_ip}</span>
               <span className={styles.path}>{alert.request_path}</span>
               <SeverityBadge

PROJECTS/advanced/ai-threat-detection/frontend/src/components/alert-feed.tsx

@@ -3,7 +3,7 @@
 // index.tsx
 // ===================
 
+export { AlertFeed } from './alert-feed'
 export { SeverityBadge } from './severity-badge'
 export { StatCard } from './stat-card'
-export { AlertFeed } from './alert-feed'
 export { ThreatDetail } from './threat-detail'