Implement authentication flow with API key support and loading states

webui/src/App.tsx

@@ -2,11 +2,14 @@ import { useState } from "react";
 import Header from "@/components/Header";
 import InstanceList from "@/components/InstanceList";
 import InstanceModal from "@/components/InstanceModal";
+import LoginDialog from "@/components/LoginDialog";
+import SystemInfoModal from "./components/SystemInfoModal";
 import { type CreateInstanceOptions, type Instance } from "@/types/instance";
 import { useInstances } from "@/contexts/InstancesContext";
-import SystemInfoModal from "./components/SystemInfoModal";
+import { useAuth } from "@/contexts/AuthContext";
 
 function App() {
+  const { isAuthenticated, isLoading: authLoading } = useAuth();
   const [isInstanceModalOpen, setIsInstanceModalOpen] = useState(false);
   const [isSystemInfoModalOpen, setIsSystemInfoModalOpen] = useState(false);
   const [editingInstance, setEditingInstance] = useState<Instance | undefined>(
@@ -36,6 +39,28 @@ function App() {
     setIsSystemInfoModalOpen(true);
   };
 
+  // Show loading spinner while checking auth
+  if (authLoading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-4"></div>
+          <p className="text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show login dialog if not authenticated
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen bg-gray-50">
+        <LoginDialog open={true} />
+      </div>
+    );
+  }
+
+  // Show main app if authenticated
   return (
     <div className="min-h-screen bg-gray-50">
       <Header onCreateInstance={handleCreateInstance} onShowSystemInfo={handleShowSystemInfo} />
@@ -58,4 +83,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;