Implement authentication flow with API key support and loading states

webui/src/components/Header.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@/components/ui/button";
-import { HelpCircle } from "lucide-react";
+import { HelpCircle, LogOut } from "lucide-react";
+import { useAuth } from "@/contexts/AuthContext";
 
 interface HeaderProps {
   onCreateInstance: () => void;
@@ -7,6 +8,14 @@ interface HeaderProps {
 }
 
 function Header({ onCreateInstance, onShowSystemInfo }: HeaderProps) {
+  const { logout } = useAuth();
+
+  const handleLogout = () => {
+    if (confirm("Are you sure you want to logout?")) {
+      logout();
+    }
+  };
+
   return (
     <header className="bg-white border-b border-gray-200">
       <div className="container mx-auto max-w-4xl px-4 py-4">
@@ -16,7 +25,9 @@ function Header({ onCreateInstance, onShowSystemInfo }: HeaderProps) {
           </h1>
 
           <div className="flex items-center gap-2">
-            <Button onClick={onCreateInstance} data-testid="create-instance-button">Create Instance</Button>
+            <Button onClick={onCreateInstance} data-testid="create-instance-button">
+              Create Instance
+            </Button>
 
             <Button
               variant="outline"
@@ -27,6 +38,16 @@ function Header({ onCreateInstance, onShowSystemInfo }: HeaderProps) {
             >
               <HelpCircle className="h-4 w-4" />
             </Button>
+
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={handleLogout}
+              data-testid="logout-button"
+              title="Logout"
+            >
+              <LogOut className="h-4 w-4" />
+            </Button>
           </div>
         </div>
       </div>
@@ -34,4 +55,4 @@ function Header({ onCreateInstance, onShowSystemInfo }: HeaderProps) {
   );
 }
 
-export default Header;
+export default Header;