Merge branch 'main' into codex/fix-kb-ajv-cli

Author: clubanderson

web/package-lock.json

@@ -101,9 +101,9 @@
     "@eslint/js": "^10.0.1",
     "@netlify/functions": "^5.3.0",
     "@playwright/test": "^1.60.0",
-    "@storybook/addon-a11y": "^10.4.4",
-    "@storybook/react": "^10.4.4",
-    "@storybook/react-vite": "^10.4.4",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/react": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@tailwindcss/postcss": "^4.3.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -129,7 +129,7 @@
     "msw": "^2.14.6",
     "postcss": "^8.5.14",
     "rimraf": "^6.1.3",
-    "storybook": "^8.6.18",
+    "storybook": "^10.4.6",
     "tailwindcss": "^4.3.0",
     "typescript": "~6.0.3",
     "typescript-eslint": "^8.61.0",

web/package.json

@@ -41,10 +41,20 @@ import { createStateContext } from './createStateContext'
 import { applyMutations, createAlertRulesEngine, generateId, shallowEqualRecords } from './alertRulesEngine'
 
 const AlertsDataFetcher = safeLazy(() => import('./AlertsDataFetcher'), 'default')
+
+/** Fallback frame time (ms) for MCP update batching when requestAnimationFrame is unavailable (~60fps). */
 const MCP_UPDATE_BATCH_FRAME_FALLBACK_MS = 16
+
+/** Storage key for persisted alert rules */
 const ALERT_RULES_KEY = 'kc_alert_rules'
+
+/** Maximum time (ms) to wait for initial MCP data before timing out. */
 const LOADING_TIMEOUT_MS = 30_000
+
+/** Delay (ms) before first alert evaluation after mount to allow data fetching to settle. */
 const INITIAL_EVALUATION_DELAY_MS = 1000
+
+/** Interval (ms) between periodic alert rule evaluations. */
 const EVALUATION_INTERVAL_MS = 30000
 
 const {

web/src/contexts/AlertsContext.tsx

@@ -18,7 +18,10 @@ export interface RunbookExecutionResult {
   stepResults: unknown[]
 }
 
+/** Maximum length (chars) for JSON-serialized prompt data before truncation. */
 const PROMPT_JSON_MAX_LENGTH = 4000
+
+/** Maximum length (chars) for runbook evidence text before truncation. */
 const RUNBOOK_EVIDENCE_MAX_LENGTH = 8000
 
 /**

web/src/contexts/alertRunbooks.ts

@@ -46,6 +46,9 @@ export const NOTIFICATION_COOLDOWN_BY_SEVERITY: Record<string, number> = {
 /** Fallback cooldown when severity is unknown */
 export const DEFAULT_NOTIFICATION_COOLDOWN_MS = 30 * MS_PER_MINUTE // 30 min
 
+/** Legacy DOMException error code for QuotaExceededError (used by older browsers). */
+const DOM_EXCEPTION_QUOTA_EXCEEDED_CODE = 22
+
 /** Load persisted notification dedup map from localStorage (key → timestamp).
  *  Prunes stale entries (older than NOTIFICATION_DEDUP_MAX_AGE_MS) and enforces
  *  the MAX_DEDUP_KEYS hard cap on load, persisting the cleaned map back. */
@@ -152,7 +155,7 @@ export function saveAlerts(alerts: Alert[]): void {
     // QuotaExceededError: DOMException with name 'QuotaExceededError', or legacy
     // browsers that use numeric code 22 instead of the named exception.
     // Pattern matches useMissions/useMetricsHistory for consistency across the codebase.
-    const isQuotaError = e instanceof DOMException && (e.name === 'QuotaExceededError' || e.code === 22)
+    const isQuotaError = e instanceof DOMException && (e.name === 'QuotaExceededError' || e.code === DOM_EXCEPTION_QUOTA_EXCEEDED_CODE)
     if (isQuotaError) {
       console.warn('[Alerts] localStorage quota exceeded, pruning resolved alerts')
       // Keep all firing alerts + a small number of recent resolved ones

web/src/contexts/alertStorage.ts

@@ -22,6 +22,12 @@ import {
  *  no 5-minute cooldown repeat for ongoing connectivity failures. */
 export const PERSISTENT_CLUSTER_CONDITIONS = new Set(['certificate_error', 'cluster_unreachable'])
 
+/** HTTP status code for unauthorized requests (missing or invalid auth token). */
+const HTTP_STATUS_UNAUTHORIZED = 401
+
+/** HTTP status code for forbidden requests (insufficient permissions). */
+const HTTP_STATUS_FORBIDDEN = 403
+
 /** Parameters for the centralized browser notification dispatcher */
 export interface BrowserNotificationParams {
   /** The alert rule that triggered this notification */
@@ -130,7 +136,7 @@ async function sendSingleNotification(
       signal: AbortSignal.timeout(fetchTimeout),
     })
 
-    if (response.status === 401 || response.status === 403) return
+    if (response.status === HTTP_STATUS_UNAUTHORIZED || response.status === HTTP_STATUS_FORBIDDEN) return
 
     if (!response.ok) {
       const data = await response.json().catch(() => ({})) as NotificationErrorResponse

web/src/contexts/notifications.ts

@@ -1,5 +1,7 @@
 /** Bytes per mebibyte (MiB) */
 export const BYTES_PER_MIB = 1024 * 1024
+/** Bytes per kibibyte (KiB) */
+export const BYTES_PER_KIB = 1024
 /** Bytes per gibibyte (GiB) */
 export const BYTES_PER_GIB = 1024 * 1024 * 1024
 /** Bytes per tebibyte (TiB) */

web/src/lib/constants/units.ts

@@ -4,6 +4,7 @@
 
 import type { TFunction } from 'i18next'
 import { MS_PER_SECOND, MS_PER_MINUTE, MS_PER_HOUR, MS_PER_DAY, MS_PER_MONTH, MS_PER_YEAR, SECONDS_PER_MINUTE, MINUTES_PER_HOUR } from './constants/time'
+import { BYTES_PER_KIB } from './constants/units'
 
 /**
  * Format the elapsed time between two ISO timestamps as a compact string.
@@ -81,7 +82,6 @@ interface FormatBytesOptions {
 
 const SI_UNITS = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
 const IEC_UNITS = ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB']
-const BYTES_PER_KIBIBYTE = 1024
 
 /**
  * Format bytes to a human-readable string.
@@ -106,8 +106,8 @@ export function formatBytes(
   if (!Number.isFinite(bytes) || bytes <= 0) return zeroLabel
 
   const units = binary ? IEC_UNITS : SI_UNITS
-  const i = Math.floor(Math.log(bytes) / Math.log(BYTES_PER_KIBIBYTE))
-  const value = bytes / Math.pow(BYTES_PER_KIBIBYTE, i)
+  const i = Math.floor(Math.log(bytes) / Math.log(BYTES_PER_KIB))
+  const value = bytes / Math.pow(BYTES_PER_KIB, i)
 
   // Use 0 decimals for whole numbers, otherwise use specified decimals
   if (value === Math.floor(value)) {

web/src/lib/formatters.ts

@@ -124,14 +124,22 @@ export default defineConfig(({ mode }) => ({
             ['cards-workloads', ['/src/components/cards/workload-detection/', '/src/components/cards/workload-monitor/']],
             ['cards-storage', ['/src/components/cards/vitess_status/', '/src/components/cards/minio_status/', '/src/components/cards/etcd_status/']],
             ['cards-messaging', ['/src/components/cards/kafka_status/', '/src/components/cards/rabbitmq_status/', '/src/components/cards/redis_status/']],
+            // Split cards-misc further to reduce bundle size
+            ['cards-monitoring', ['/src/components/cards/prometheus_status/', '/src/components/cards/grafana_status/', '/src/components/cards/alertmanager_status/']],
+            ['cards-cluster', ['/src/components/cards/cluster_health/', '/src/components/cards/cluster_capacity/', '/src/components/cards/cluster_nodes/']],
+            ['cards-cost', ['/src/components/cards/cost/', '/src/components/cards/kubecost_status/']],
+            ['cards-data', ['/src/components/cards/postgresql_status/', '/src/components/cards/mysql_status/', '/src/components/cards/mongodb_status/']],
             ['cards-misc', ['/src/components/cards/']],
             // Split drilldown views by type to reduce chunk size
             ['drilldown-k8s', ['/src/components/drilldown/views/PodLogs', '/src/components/drilldown/views/PodEvents', '/src/components/drilldown/views/PodTerminal', '/src/components/drilldown/views/NamespaceDetails']],
             ['drilldown-data', ['/src/components/drilldown/views/LogViewer', '/src/components/drilldown/views/MetricsViewer', '/src/components/drilldown/views/EventTimeline']],
+            ['drilldown-ui', ['/src/components/drilldown/DrillDownModal', '/src/components/drilldown/DrillDownHeader', '/src/components/drilldown/DrillDownStack']],
             ['drilldown', ['/src/components/drilldown/']],
             // Dashboard and layout split by concern
             ['dashboard-customizer', ['/src/components/dashboard/customizer/', '/src/components/dashboard/shared/cardCatalog']],
+            ['dashboard-grid', ['/src/components/dashboard/CardGrid', '/src/components/dashboard/DashboardGrid']],
             ['dashboard-core', ['/src/components/dashboard/', '/src/lib/dashboards/', '/src/lib/unified/dashboard/']],
+            ['layout-header', ['/src/components/layout/Header', '/src/components/layout/TopBar', '/src/components/layout/UserMenu']],
             ['layout-sidebar', ['/src/components/layout/Sidebar', '/src/components/layout/Navigation', '/src/components/layout/MobileMenu']],
             ['layout-shell', ['/src/components/layout/']],
             ['auth-core', ['/src/lib/auth']],
@@ -141,8 +149,10 @@ export default defineConfig(({ mode }) => ({
             ['contexts-providers', ['/src/contexts/', '/src/hooks/useDrillDown', '/src/hooks/useRewards', '/src/hooks/useMissions', '/src/hooks/useGlobalFilters']],
             ['hooks-data', ['/src/hooks/useCached', '/src/hooks/useCache', '/src/hooks/useCluster', '/src/hooks/useDashboard']],
             ['lib-cache', ['/src/lib/cache/']],
+            ['lib-utils', ['/src/lib/utils', '/src/lib/cn.ts', '/src/lib/constants.ts']],
             ['theme-system', ['/src/hooks/useTheme', '/src/hooks/useBranding']],
-            // Split app shell to reduce size
+            // Split app shell to reduce massive app-routes chunk
+            ['app-router', ['/src/components/router/', '/src/lib/router/']],
             ['app-routes', ['/src/App.tsx']],
             ['app-shell', ['/src/hooks/usePersistedSettings', '/src/hooks/useAppInit']],
             ['i18n-app', ['/src/lib/i18n.ts', '/src/locales/']],
@@ -153,25 +163,40 @@ export default defineConfig(({ mode }) => ({
           if (!id.includes('node_modules')) return
           // React core (split scheduler separately to reduce main react bundle)
           if (id.includes('/scheduler/')) return 'react-scheduler-vendor'
-          if (id.includes('/react/') || id.includes('/react-dom/') || id.includes('/react-router') || id.includes('/react-reconciler/')) return 'react-vendor'
-          // three.js ecosystem (split into smaller chunks)
+          if (id.includes('/react-dom/client')) return 'react-dom-client-vendor'
+          if (id.includes('/react-dom/')) return 'react-dom-vendor'
+          if (id.includes('/react-router-dom/')) return 'react-router-dom-vendor'
+          if (id.includes('/react-router/')) return 'react-router-vendor'
+          if (id.includes('/react-reconciler/')) return 'react-reconciler-vendor'
+          if (id.includes('/react/')) return 'react-vendor'
+          // three.js ecosystem (split into smaller chunks to reduce three-core and three-drei)
           if (id.includes('/three-stdlib/')) return 'three-stdlib-vendor'
           if (id.includes('/@react-three/fiber/')) return 'three-fiber-vendor'
-          if (id.includes('/@react-three/drei/')) return 'three-drei-vendor'
+          // Split drei into sub-chunks to reduce 304KB chunk
+          if (id.includes('/@react-three/drei/') && id.includes('/core/')) return 'drei-core-vendor'
+          if (id.includes('/@react-three/drei/') && id.includes('/web/')) return 'drei-web-vendor'
+          if (id.includes('/@react-three/drei/')) return 'drei-helpers-vendor'
           if (id.includes('/@react-three/') || id.includes('/zustand/') || id.includes('/stats-gl/')) return 'three-react-vendor'
+          // Split three.js core modules to reduce 708KB chunk
           if (id.includes('/three/build/three.module.js')) return 'three-core-vendor'
+          if (id.includes('/three/src/math/')) return 'three-math-vendor'
+          if (id.includes('/three/src/loaders/')) return 'three-loaders-vendor'
           if (id.includes('/three/')) return 'three-extras-vendor'
           // Chart libraries
           if (id.includes('/zrender/')) return 'zrender-vendor'
           if (id.includes('/echarts-for-react/')) return 'echarts-react-vendor'
           if (id.includes('/echarts/')) return 'echarts-vendor'
           if (id.includes('/framer-motion/')) return 'motion-vendor'
-          // Terminal (split addons from core)
+          // Terminal (split addons from core to reduce xterm-core 336KB chunk)
+          if (id.includes('/@xterm/addon-fit/')) return 'xterm-addon-fit-vendor'
+          if (id.includes('/@xterm/addon-web-links/')) return 'xterm-addon-links-vendor'
           if (id.includes('/@xterm/addon-')) return 'xterm-addon-vendor'
           if (id.includes('/@xterm/xterm/')) return 'xterm-core-vendor'
           if (id.includes('/@xterm/')) return 'xterm-vendor'
           // UI libraries
           if (id.includes('/lucide-react/')) return 'lucide-vendor'
+          if (id.includes('/@dnd-kit/core/')) return 'dnd-core-vendor'
+          if (id.includes('/@dnd-kit/sortable/')) return 'dnd-sortable-vendor'
           if (id.includes('/@dnd-kit/')) return 'dnd-vendor'
           if (
             id.includes('/react-markdown/') ||
@@ -207,6 +232,19 @@ export default defineConfig(({ mode }) => ({
           if (id.includes('/dompurify/')) return 'sanitize-vendor'
           if (id.includes('/zod/')) return 'schema-vendor'
           if (id.includes('/@tanstack/react-virtual/')) return 'virtual-vendor'
+          // Split date/time libraries
+          if (id.includes('/date-fns/')) return 'date-vendor'
+          if (id.includes('/dayjs/')) return 'dayjs-vendor'
+          // Split utility libraries to reduce generic vendor chunk
+          if (id.includes('/lodash/') || id.includes('/lodash-es/')) return 'lodash-vendor'
+          if (id.includes('/axios/')) return 'axios-vendor'
+          if (id.includes('/clsx/') || id.includes('/classnames/')) return 'classnames-vendor'
+          if (id.includes('/uuid/')) return 'uuid-vendor'
+          // Split state management
+          if (id.includes('/jotai/')) return 'jotai-vendor'
+          if (id.includes('/immer/')) return 'immer-vendor'
+          // Split async utilities
+          if (id.includes('/p-limit/') || id.includes('/p-queue/')) return 'async-vendor'
           return 'vendor'
         },
       },