ui

# What does this PR do?


## Test Plan
# What does this PR do?


## Test Plan
# What does this PR do?


## Test Plan

llama_stack/ui/components/auth/login-button.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { LucideIcon } from "lucide-react";
+
+interface LoginButtonProps {
+  provider: {
+    id: string;
+    name: string;
+    icon: LucideIcon;
+    loginPath: string;
+    buttonColor?: string;
+  };
+  className?: string;
+}
+
+export function LoginButton({ provider, className }: LoginButtonProps) {
+  const handleLogin = async () => {
+    // Add redirect_url parameter to tell backend where to redirect after OAuth
+    const redirectUrl = `${window.location.origin}/auth/github/callback`;
+    const loginUrl = `${provider.loginPath}?redirect_url=${encodeURIComponent(redirectUrl)}`;
+    window.location.href = loginUrl;
+  };
+
+  const Icon = provider.icon;
+
+  return (
+    <Button
+      onClick={handleLogin}
+      className={cn(
+        "w-full flex items-center justify-center gap-3",
+        provider.buttonColor || "bg-gray-900 hover:bg-gray-800",
+        className,
+      )}
+    >
+      <Icon className="h-5 w-5" />
+      <span>Continue with {provider.name}</span>
+    </Button>
+  );
+}