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>
+  );
+}

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

@@ -0,0 +1,99 @@
+"use client";
+
+import React from "react";
+import { useAuth } from "@/contexts/auth-context";
+import { LoginButton } from "@/components/auth/login-button";
+import { GitHubIcon } from "@/components/icons/github-icon";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { LucideIcon } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+
+interface AuthProvider {
+  id: string;
+  name: string;
+  icon: LucideIcon;
+  loginPath: string;
+  buttonColor?: string;
+}
+
+interface LoginPageProps {
+  backendUrl: string;
+}
+
+export function LoginPage({ backendUrl }: LoginPageProps) {
+  const { isAuthenticated, isLoading } = useAuth();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const error = searchParams.get("error");
+
+  // Define available auth providers
+  const authProviders: AuthProvider[] = [
+    {
+      id: "github",
+      name: "GitHub",
+      icon: GitHubIcon as LucideIcon,
+      loginPath: `${backendUrl}/auth/github/login`,
+      buttonColor: "bg-gray-900 hover:bg-gray-800 text-white",
+    },
+    // Future providers can be added here
+  ];
+
+  useEffect(() => {
+    if (!isLoading && isAuthenticated) {
+      router.push("/");
+    }
+  }, [isAuthenticated, isLoading, router]);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
+      <Card className="w-full max-w-md">
+        <CardHeader className="space-y-1">
+          <CardTitle className="text-2xl font-bold text-center">
+            Welcome to Llama Stack
+          </CardTitle>
+          <CardDescription className="text-center">
+            {error === "auth_not_configured"
+              ? "Authentication is not configured on this server"
+              : "Sign in to access your logs and resources"}
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          {error !== "auth_not_configured" && (
+            <>
+              {authProviders.length > 1 && (
+                <>
+                  <div className="text-sm text-muted-foreground text-center">
+                    Continue with
+                  </div>
+                  <Separator />
+                </>
+              )}
+
+              <div className="space-y-2">
+                {authProviders.map((provider) => (
+                  <LoginButton key={provider.id} provider={provider} />
+                ))}
+              </div>
+            </>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

llama_stack/ui/components/auth/user-menu.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import React from "react";
+import { useAuth } from "@/contexts/auth-context";
+import { useAuthConfig } from "@/hooks/use-auth-config";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { User, LogOut, Key, Clock } from "lucide-react";
+import { getAuthToken, isTokenExpired } from "@/lib/auth";
+import { toast } from "sonner";
+
+export function UserMenu() {
+  const { user, logout, isAuthenticated } = useAuth();
+  const { isAuthConfigured } = useAuthConfig();
+
+  const handleCopyToken = async () => {
+    const token = getAuthToken();
+    if (!token) {
+      toast.error("No authentication token found");
+      return;
+    }
+
+    try {
+      await navigator.clipboard.writeText(token);
+      toast.success("API token copied to clipboard");
+    } catch (error) {
+      toast.error("Failed to copy token to clipboard");
+    }
+  };
+
+  const getTokenExpiryInfo = () => {
+    const token = getAuthToken();
+    if (!token) return null;
+
+    try {
+      const payload = JSON.parse(atob(token.split(".")[1]));
+      const exp = payload.exp;
+      if (!exp) return null;
+
+      const expiryDate = new Date(exp * 1000);
+      const now = new Date();
+      const hoursRemaining = Math.max(
+        0,
+        (expiryDate.getTime() - now.getTime()) / (1000 * 60 * 60),
+      );
+
+      if (hoursRemaining < 1) {
+        return `Expires in ${Math.round(hoursRemaining * 60)} minutes`;
+      } else if (hoursRemaining < 24) {
+        return `Expires in ${Math.round(hoursRemaining)} hours`;
+      } else {
+        return `Expires in ${Math.round(hoursRemaining / 24)} days`;
+      }
+    } catch {
+      return null;
+    }
+  };
+
+  if (!isAuthenticated || !user) {
+    if (!isAuthConfigured) {
+      return (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="inline-block">
+              <Button variant="outline" size="sm" disabled>
+                Sign In
+              </Button>
+            </span>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>Authentication is not configured on this server</p>
+          </TooltipContent>
+        </Tooltip>
+      );
+    }
+
+    return (
+      <Button variant="outline" size="sm" asChild>
+        <a href="/login">Sign In</a>
+      </Button>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon" className="rounded-full">
+          {user.avatar_url ? (
+            <img
+              src={user.avatar_url}
+              alt={user.name || user.username}
+              className="h-8 w-8 rounded-full"
+            />
+          ) : (
+            <User className="h-4 w-4" />
+          )}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuLabel>
+          <div className="flex flex-col space-y-1">
+            <p className="text-sm font-medium leading-none">
+              {user.name || user.username}
+            </p>
+            {user.email && (
+              <p className="text-xs leading-none text-muted-foreground">
+                {user.email}
+              </p>
+            )}
+          </div>
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleCopyToken} className="cursor-pointer">
+          <Key className="mr-2 h-4 w-4" />
+          <span>Copy API Token</span>
+        </DropdownMenuItem>
+        {getTokenExpiryInfo() && (
+          <DropdownMenuItem disabled className="text-xs text-muted-foreground">
+            <Clock className="mr-2 h-3 w-3" />
+            <span>{getTokenExpiryInfo()}</span>
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuSeparator />
+        {user.organizations && user.organizations.length > 0 && (
+          <>
+            <DropdownMenuLabel className="text-xs text-muted-foreground">
+              Organizations
+            </DropdownMenuLabel>
+            {user.organizations.map((org) => (
+              <DropdownMenuItem key={org} className="text-sm">
+                {org}
+              </DropdownMenuItem>
+            ))}
+            <DropdownMenuSeparator />
+          </>
+        )}
+        <DropdownMenuItem onClick={logout} className="cursor-pointer">
+          <LogOut className="mr-2 h-4 w-4" />
+          <span>Log out</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

llama_stack/ui/components/chat-completions/chat-completions-table.tsx

@@ -11,7 +11,7 @@ import {
   extractDisplayableText,
 } from "@/lib/format-message-content";
 import { usePagination } from "@/hooks/usePagination";
-import { client } from "@/lib/client";
+import { getClient } from "@/lib/client";
 
 interface ChatCompletionsTableProps {
   /** Optional pagination configuration */
@@ -38,7 +38,7 @@ export function ChatCompletionsTable({
     model?: string;
     order?: string;
   }) => {
-    const response = await client.chat.completions.list({
+    const response = await getClient().chat.completions.list({
       after: params.after,
       limit: params.limit,
       ...(params.model && { model: params.model }),

llama_stack/ui/components/icons/github-icon.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+import { LucideProps } from "lucide-react";
+
+export function GitHubIcon(props: LucideProps) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" {...props}>
+      <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+    </svg>
+  );
+}

llama_stack/ui/components/responses/responses-table.tsx

@@ -7,7 +7,7 @@ import {
 } from "@/lib/types";
 import { LogsTable, LogTableRow } from "@/components/logs/logs-table";
 import { usePagination } from "@/hooks/usePagination";
-import { client } from "@/lib/client";
+import { getClient } from "@/lib/client";
 import type { ResponseListResponse } from "llama-stack-client/resources/responses/responses";
 import {
   isMessageInput,
@@ -131,7 +131,7 @@ export function ResponsesTable({ paginationOptions }: ResponsesTableProps) {
     model?: string;
     order?: string;
   }) => {
-    const response = await client.responses.list({
+    const response = await getClient().responses.list({
       after: params.after,
       limit: params.limit,
       ...(params.model && { model: params.model }),

llama_stack/ui/components/ui/sonner.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };