Clean multi provider feature

.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "31879506",
+  "configHash": "061878e6",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "b3c26281",
+  "optimized": {},
+  "chunks": {}
+}

.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "cSpell.words": [
+        "Fernet",
+        "supabase"
+    ]
+}

archon-ui-main/src/App.tsx

@@ -6,11 +6,13 @@ import { KnowledgeBasePage } from './pages/KnowledgeBasePage';
 import { SettingsPage } from './pages/SettingsPage';
 import { MCPPage } from './pages/MCPPage';
 import { OnboardingPage } from './pages/OnboardingPage';
+import { AgentsPage } from './features/agents/components';
 import { MainLayout } from './components/layout/MainLayout';
 import { ThemeProvider } from './contexts/ThemeContext';
 import { ToastProvider } from './contexts/ToastContext';
 import { ToastProvider as FeaturesToastProvider } from './features/ui/components/ToastProvider';
 import { SettingsProvider, useSettings } from './contexts/SettingsContext';
+import { ServiceRegistryProvider } from './contexts/ServiceRegistryContext';
 import { TooltipProvider } from './features/ui/primitives/tooltip';
 import { ProjectPage } from './pages/ProjectPage';
 import { DisconnectScreenOverlay } from './components/DisconnectScreenOverlay';
@@ -41,14 +43,15 @@ const queryClient = new QueryClient({
   },
 });
 
-const AppRoutes = () => {
+const AppRoutes = (): JSX.Element => {
   const { projectsEnabled } = useSettings();
-  
+
   return (
     <Routes>
       <Route path="/" element={<KnowledgeBasePage />} />
       <Route path="/onboarding" element={<OnboardingPage />} />
       <Route path="/settings" element={<SettingsPage />} />
+      <Route path="/agents" element={<AgentsPage />} />
       <Route path="/mcp" element={<MCPPage />} />
       {projectsEnabled ? (
         <>
@@ -62,20 +65,22 @@ const AppRoutes = () => {
   );
 };
 
-const AppContent = () => {
+const AppContent = (): JSX.Element => {
   const [disconnectScreenActive, setDisconnectScreenActive] = useState(false);
-  const [disconnectScreenDismissed, setDisconnectScreenDismissed] = useState(false);
+  const [disconnectScreenDismissed, setDisconnectScreenDismissed] =
+    useState(false);
   const [disconnectScreenSettings, setDisconnectScreenSettings] = useState({
     enabled: true,
-    delay: 10000
+    delay: 10000,
   });
-  const [migrationBannerDismissed, setMigrationBannerDismissed] = useState(false);
+  const [migrationBannerDismissed, setMigrationBannerDismissed] =
+    useState(false);
   const migrationStatus = useMigrationStatus();
 
   useEffect(() => {
     // Load initial settings
     const settings = serverHealthService.getSettings();
-    setDisconnectScreenSettings(settings);
+    setDisconnectScreenSettings((prev) => ({ ...prev, ...settings }));
 
     // Stop any existing monitoring before starting new one to prevent multiple intervals
     serverHealthService.stopMonitoring();
@@ -92,15 +97,15 @@ const AppContent = () => {
         setDisconnectScreenDismissed(false);
         // Refresh the page to ensure all data is fresh
         window.location.reload();
-      }
+      },
     });
 
     return () => {
       serverHealthService.stopMonitoring();
     };
   }, [disconnectScreenDismissed]);
 
-  const handleDismissDisconnectScreen = () => {
+  const handleDismissDisconnectScreen = (): void => {
     setDisconnectScreenActive(false);
     setDisconnectScreenDismissed(true);
   };
@@ -113,7 +118,9 @@ const AppContent = () => {
             {/* Migration Banner - shows when backend is up but DB schema needs work */}
             {migrationStatus.migrationRequired && !migrationBannerDismissed && (
               <MigrationBanner
-                message={migrationStatus.message || "Database migration required"}
+                message={
+                  migrationStatus.message || "Database migration required"
+                }
                 onDismiss={() => setMigrationBannerDismissed(true)}
               />
             )}
@@ -129,23 +136,25 @@ const AppContent = () => {
   );
 };
 
-export function App() {
+export function App(): JSX.Element {
   return (
     <QueryClientProvider client={queryClient}>
       <ThemeProvider>
         <ToastProvider>
           <FeaturesToastProvider>
             <TooltipProvider>
               <SettingsProvider>
-                <AppContent />
+                <ServiceRegistryProvider>
+                  <AppContent />
+                </ServiceRegistryProvider>
               </SettingsProvider>
             </TooltipProvider>
           </FeaturesToastProvider>
         </ToastProvider>
       </ThemeProvider>
-      {import.meta.env.VITE_SHOW_DEVTOOLS === 'true' && (
+      {import.meta.env.VITE_SHOW_DEVTOOLS === "true" && (
         <ReactQueryDevtools initialIsOpen={false} />
       )}
     </QueryClientProvider>
   );
-}
+}

archon-ui-main/src/components/DisconnectScreenOverlay.tsx

@@ -1,23 +1,22 @@
-import React, { useState } from 'react';
-import { X, Wifi, WifiOff } from 'lucide-react';
-import { DisconnectScreen } from './animations/DisconnectScreenAnimations';
-import { NeonButton } from './ui/NeonButton';
+import React, { useState } from "react";
+import { X } from "lucide-react";
+import { DisconnectScreen } from "./animations/DisconnectScreenAnimations";
+import { NeonButton } from "./ui/NeonButton";
 
 interface DisconnectScreenOverlayProps {
   isActive: boolean;
   onDismiss?: () => void;
 }
 
-export const DisconnectScreenOverlay: React.FC<DisconnectScreenOverlayProps> = ({
-  isActive,
-  onDismiss
-}) => {
+export const DisconnectScreenOverlay: React.FC<
+  DisconnectScreenOverlayProps
+> = ({ isActive, onDismiss }) => {
   const [showControls, setShowControls] = useState(false);
 
   if (!isActive) return null;
 
   return (
-    <div 
+    <div
       className="fixed inset-0 z-[9999] bg-black"
       onMouseMove={() => setShowControls(true)}
       onMouseEnter={() => setShowControls(true)}
@@ -27,21 +26,18 @@ export const DisconnectScreenOverlay: React.FC<DisconnectScreenOverlayProps> = (
       <DisconnectScreen />
 
       {/* Override Button */}
-      <div 
+      <div
         className={`absolute bottom-8 right-8 transition-opacity duration-500 ${
-          showControls ? 'opacity-100' : 'opacity-0'
+          showControls ? "opacity-100" : "opacity-0"
         }`}
       >
         {onDismiss && (
-          <NeonButton
-            onClick={onDismiss}
-            className="flex items-center gap-2"
-          >
+          <NeonButton onClick={onDismiss} className="flex items-center gap-2">
             <X className="w-4 h-4" />
             Dismiss
           </NeonButton>
         )}
       </div>
     </div>
   );
-};
+};