scriptoriumadmin/litellm
1
0
Fork 0
mirror of https://github.com/BerriAI/litellm.git synced 2026-11-15 09:12:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 311

refactor(ui): make Aria a single workspace and clarify dashboard controls

Browse source
This commit is contained in:
moe-berri 2026-11-04 15:28:20 +08:00
parent 52510b798e
commit 63bae79ce8
20 changed files with 373 additions and 993 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ui/litellm-dashboard/src/app/(dashboard)/home/_components/HomePage.integration.test.tsx
View file

@ -7,6 +7,7 @@ import { EMPTY_DAILY_ACTIVITY_METADATA } from "@/components/UsagePage/dailyActiv
import { all_admin_roles } from "@/utils/roles";
import { LiteAdminFrame } from "@/components/liteadmin/LiteAdmin";
import HomePage from "./HomePage";
vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) }));
const auth = vi.hoisted(() => ({
accessToken: "sk-test",
@ -144,7 +145,7 @@ describe("HomePage", () => {
expect(screen.queryByRole("link", { name: /create new virtual key/i })).not.toBeInTheDocument();
});
it("should offer Aria Agent on Home inside the dashboard frame", async () => {
it("keeps Home focused on usage without an embedded Aria composer", async () => {
render(
<QueryClientProvider client={new QueryClient({ defaultOptions: { queries: { retry: false } } })}>
<LiteAdminFrame>
@ -152,9 +153,8 @@ describe("HomePage", () => {
</LiteAdminFrame>
</QueryClientProvider>,
);
const entry = screen.getByRole("region", { name: "Ask Aria Agent" });
expect(await within(entry).findByPlaceholderText("What would you like to do?")).toBeInTheDocument();
expect(within(entry).getByRole("button", { name: "Send message" })).toBeDisabled();
expect(screen.queryByRole("region", { name: "Ask Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Send message" })).not.toBeInTheDocument();
expect(await screen.findByText("$501.74")).toBeInTheDocument();
});

3
ui/litellm-dashboard/src/app/(dashboard)/home/_components/HomePage.tsx
View file

@ -8,7 +8,6 @@ import { Skeleton } from "@/components/ui/skeleton";
import { Page } from "@/components/shared/Page";
import { PageHeader, PageHeaderControls, PageHeaderTitle } from "@/components/shared/PageHeader";
import { uiHref } from "@/utils/uiHref";
import { LiteAdminHome } from "@/components/liteadmin/LiteAdmin";
import { Leaderboard, useBreakdown } from "@/app/(dashboard)/usage/_components/components/overview/BreakdownChart";
import { Panel } from "@/app/(dashboard)/usage/_components/components/overview/Primitives";
import UsageStatStrip from "@/app/(dashboard)/usage/_components/components/overview/UsageStatStrip";
@ -41,8 +40,6 @@ export default function HomePage() {
)}
</PageHeader>
<LiteAdminHome />
<section aria-label={`Usage, last ${HOME_USAGE_DAYS} days`}>
{usage.failed ? (
<div className="flex items-center justify-between gap-2 rounded-xl border bg-card px-4 py-3 text-sm">

3
ui/litellm-dashboard/src/app/(dashboard)/layout.tsx
View file

@ -17,6 +17,7 @@ import {
createDeploymentHealthHandle,
DeploymentHealthBanner,
DeploymentHealthIcon,
DeploymentHealthLink,
} from "@/components/DeploymentHealth/DeploymentHealth";
import { DeploymentHealthPanel } from "@/components/DeploymentHealth/DeploymentHealthPanel";
import { UserBanner } from "@/components/UserBanner";
@ -151,6 +152,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
accessToken={accessToken}
isPublicPage={false}
deploymentHealth={<DeploymentHealthIcon handle={deploymentHealthHandle} />}
deploymentHealthLink={<DeploymentHealthLink handle={deploymentHealthHandle} />}
/>
<DeploymentHealthBanner handle={deploymentHealthHandle} />
<DeploymentHealthPanel handle={deploymentHealthHandle} />
@ -203,6 +205,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) {
</SheetTrigger>
}
deploymentHealth={<DeploymentHealthIcon handle={deploymentHealthHandle} />}
deploymentHealthLink={<DeploymentHealthLink handle={deploymentHealthHandle} />}
/>
<DeploymentHealthBanner handle={deploymentHealthHandle} />
<DeploymentHealthPanel handle={deploymentHealthHandle} />

15
ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx
View file

@ -248,8 +248,7 @@ vi.mock("@/components/EntityUsageExport", () => ({
}));
vi.mock("@/components/liteadmin/LiteAdmin", () => ({
AriaUsageTrigger: () => <button aria-label="Open Aria Agent">Aria</button>,
AriaUsageComposer: () => <section aria-label="Ask Aria Agent">Shared Aria composer</section>,
AriaUsageTrigger: () => <a href="/aria">Ask Aria</a>,
}));
vi.mock("@/app/(dashboard)/hooks/agents/useAgents", () => ({
@ -1451,19 +1450,19 @@ describe("UsagePage", () => {
});
describe("Aria Agent", () => {
it("should render the shared Aria prompt and entry point in global view", async () => {
it("offers a link to Aria without a second composer in global view", async () => {
renderWithProviders(<UsagePage {...defaultProps} />);
await waitFor(() => {
expect(mockUserDailyActivityAggregatedCall).toHaveBeenCalled();
});
expect(screen.getByRole("button", { name: "Open Aria Agent" })).toBeInTheDocument();
expect(screen.getByRole("region", { name: "Ask Aria Agent" })).toBeVisible();
expect(screen.getByRole("link", { name: "Ask Aria" })).toBeInTheDocument();
expect(screen.queryByRole("region", { name: "Ask Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByText("Ask AI")).not.toBeInTheDocument();
});
it("should keep the shared Aria prompt available in entity usage views", async () => {
it("does not embed a second Aria composer in entity usage views", async () => {
renderWithProviders(<UsagePage {...defaultProps} />);
await waitFor(() => {
@ -1475,8 +1474,8 @@ describe("UsagePage", () => {
});
expect(await screen.findByText("Entity Usage")).toBeInTheDocument();
expect(screen.getAllByRole("region", { name: "Ask Aria Agent" })).toHaveLength(1);
expect(screen.getByRole("region", { name: "Ask Aria Agent" })).toBeVisible();
expect(screen.queryByPlaceholderText(/Ask Aria/)).not.toBeInTheDocument();
expect(screen.queryByRole("region", { name: "Ask Aria Agent" })).not.toBeInTheDocument();
});
});

3
ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx
View file

@ -71,7 +71,7 @@ import EntityUsage, { EntityList } from "./EntityUsage/EntityUsage";
import ModelViewToggle, { ModelViewType } from "./ModelViewToggle";
import TopKeyView, { type TopKeyItem } from "@/components/UsagePage/components/EntityUsage/TopKeyView";
import { getGlobalTopKeys } from "./EntityUsage/entityUsageAggregations";
import { AriaUsageComposer, AriaUsageTrigger } from "@/components/liteadmin/LiteAdmin";
import { AriaUsageTrigger } from "@/components/liteadmin/LiteAdmin";
import { allowedUsageOptions, UsageViewSelect } from "./UsageViewSelect/UsageViewSelect";
import UserRecordLink from "./UserRecordLink";
import {
@ -489,7 +489,6 @@ const UsagePage: React.FC<UsagePageProps> = ({ teams, organizations, teamsLoadin
</div>
</div>
</header>
<AriaUsageComposer />
{aggregatedFailed && (
<ErrorState title="Failed to load spend data" message={aggregatedError} onRetry={reloadAggregated} />
)}

13
ui/litellm-dashboard/src/components/DashboardHeader.tsx
View file

@ -1,6 +1,7 @@
"use client";
import type { ReactNode } from "react";
import ThemeToggle from "@/components/ThemeToggle/ThemeToggle";
import { usePathname } from "next/navigation";
import { useTerminology } from "@/contexts/TerminologyContext";
import { getBreadcrumb } from "@/components/leftnav";
@ -16,14 +17,17 @@ export function DashboardHeader({
accessToken,
navigationTrigger,
deploymentHealth,
deploymentHealthLink,
}: {
accessToken: string | null;
navigationTrigger?: ReactNode;
deploymentHealth?: ReactNode;
deploymentHealthLink?: ReactNode;
}) {
const term = useTerminology();
const { title } = getBreadcrumb(usePathname());
const { isControlPlane, selectedWorker } = useWorker();
const showWorkerSelector = isControlPlane && selectedWorker !== null;
const handleWorkerSwitch = (workerId: string) => {
clearTokenCookies();
clearStoredReturnUrl();
@ -41,10 +45,13 @@ export function DashboardHeader({
<CommandPaletteTrigger className="hidden w-56 @min-[640px]:flex @min-[1000px]:w-80" />
<div className="flex shrink-0 items-center justify-end gap-1">
<CommandPaletteTrigger mobile className="size-9 @min-[640px]:hidden" />
{isControlPlane && selectedWorker !== null && <WorkerDropdown onWorkerSwitch={handleWorkerSwitch} />}
<DashboardCommunityLinks className="hidden @min-[840px]:flex" />
{showWorkerSelector && <WorkerDropdown onWorkerSwitch={handleWorkerSwitch} />}
<DashboardCommunityLinks
className={showWorkerSelector ? "hidden @min-[840px]:flex" : "hidden @min-[400px]:flex"}
/>
<ThemeToggle />
{deploymentHealth}
<NotificationsBell accessToken={accessToken} />
<NotificationsBell accessToken={accessToken} deploymentHealthLink={deploymentHealthLink} />
</div>
</div>
</header>

39
ui/litellm-dashboard/src/components/DeploymentHealth/DeploymentHealth.integration.test.tsx
View file

@ -1,9 +1,15 @@
import { NotificationsBellView } from "@/components/Navbar/NotificationsBell/NotificationsBell";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import { useState } from "react";
import userEvent from "@testing-library/user-event";
import type { DeploymentWarning } from "@/app/(dashboard)/hooks/deploymentWarnings/useDeploymentWarnings";
import { renderWithProviders, screen, testQueryClient, waitFor, within } from "../../../tests/test-utils";
import { createDeploymentHealthHandle, DeploymentHealthBanner, DeploymentHealthIcon } from "./DeploymentHealth";
import {
createDeploymentHealthHandle,
DeploymentHealthBanner,
DeploymentHealthIcon,
DeploymentHealthLink,
} from "./DeploymentHealth";
import { DeploymentHealthPanel } from "./DeploymentHealthPanel";
vi.unmock("@/app/(dashboard)/hooks/useAuthorized");
@ -84,6 +90,11 @@ const Harness = () => {
<>
<header>
<DeploymentHealthIcon handle={handle} />
<NotificationsBellView
currentVersion={null}
latestRelease={null}
deploymentHealthLink={<DeploymentHealthLink handle={handle} />}
/>
</header>
<DeploymentHealthBanner handle={handle} />
<DeploymentHealthPanel handle={handle} />
@ -97,7 +108,13 @@ const renderHealth = (userRole = "proxy_admin") => {
};
const openPanel = async (user: ReturnType<typeof userEvent.setup>) => {
await user.click(await screen.findByRole("button", { name: /^Deployment health/ }));
await waitFor(() => expect(proxy.gets).toBeGreaterThan(0));
const icon = screen.queryByRole("button", { name: /^Deployment health/ });
if (icon) await user.click(icon);
else {
await user.click(screen.getByRole("button", { name: /^Notifications/ }));
await user.click(await screen.findByRole("button", { name: "Deployment health", exact: true }));
}
return screen.findByRole("dialog", { name: "Deployment health" });
};
@ -124,15 +141,17 @@ afterEach(() => {
});
describe("deployment health icon", () => {
it("should show a plain shield with no count when every warning is ignored", async () => {
proxy.warnings = [{ ...NO_REDIS, ignore: snoozedBy("admin-2", "2026-10-21T17:04:12Z") }];
renderHealth();
it.each([{ warnings: [] }, { warnings: [{ ...NO_REDIS, ignore: snoozedBy("admin-2", "2026-10-21T17:04:12Z") }] }])(
"hides the shield without active warnings: $warnings",
async ({ warnings }) => {
proxy.warnings = warnings;
renderHealth();
await waitFor(() => expect(proxy.gets).toBe(1));
const icon = await screen.findByRole("button", { name: "Deployment health" });
expect(icon).toHaveTextContent(/^$/);
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
});
await waitFor(() => expect(proxy.gets).toBe(1));
expect(screen.queryByRole("button", { name: /^Deployment health/ })).not.toBeInTheDocument();
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
},
);
it.each([
{

22
ui/litellm-dashboard/src/components/DeploymentHealth/DeploymentHealth.tsx
View file

@ -28,6 +28,7 @@ export const DeploymentHealthIcon = ({ handle }: { handle: DeploymentHealthHandl
if (!canView) return null;
const active = activeWarnings(data?.warnings ?? []);
if (active.length === 0) return null;
const hasCritical = active.some((warning) => warning.severity === "critical");
return (
@ -50,6 +51,27 @@ export const DeploymentHealthIcon = ({ handle }: { handle: DeploymentHealthHandl
);
};
/** Keeps ignored warnings reachable when the header has no active alerts. */
export const DeploymentHealthLink = ({ handle }: { handle: DeploymentHealthHandle }) => {
const { canView } = useDeploymentHealthAccess();
if (!canView) return null;
return (
<SheetTrigger
handle={handle}
render={
<Button
variant="ghost"
size="sm"
className="w-full justify-start gap-2 text-xs font-normal text-muted-foreground"
/>
}
>
<Shield className="size-4" aria-hidden />
Deployment health
</SheetTrigger>
);
};
export const DeploymentHealthBanner = ({ handle }: { handle: DeploymentHealthHandle }) => {
const { canView } = useDeploymentHealthAccess();
const { data } = useDeploymentWarnings();

46
ui/litellm-dashboard/src/components/Navbar/DashboardResources.tsx
View file

@ -1,5 +1,6 @@
"use client";
import type { ReactNode } from "react";
import { BookOpen, Github, Newspaper, ScrollText, Slack } from "lucide-react";
import { useDisableBlogPosts } from "@/app/(dashboard)/hooks/useDisableBlogPosts";
import { useDisableShowPrompts } from "@/app/(dashboard)/hooks/useDisableShowPrompts";
@ -58,7 +59,7 @@ export function DashboardCommunityLinks({ className }: { className?: string }) {
);
}
export function DashboardResources() {
export function DashboardResources({ children }: { children?: ReactNode }) {
const hideBlog = useDisableBlogPosts();
const hideCommunity = useDisableShowPrompts();
const { data, isPending, isError, refetch } = useBlogPosts();
@ -66,7 +67,7 @@ export function DashboardResources() {
return (
<>
{!hideBlog && (
<section aria-label="Latest posts" className="border-t border-border p-2">
<section aria-label="Latest posts" className="border-t border-border px-2 py-2">
{isPending && <p className="px-2 py-3 text-xs text-muted-foreground">Loading posts…</p>}
{isError && (
<Button variant="ghost" size="sm" onClick={() => void refetch()}>
@ -79,33 +80,36 @@ export function DashboardResources() {
href={post.url}
target="_blank"
rel="noopener noreferrer"
className="flex items-baseline justify-between gap-4 rounded-md px-2 py-2 text-sm hover:bg-muted focus-visible:outline-ring"
className="flex items-baseline justify-between gap-4 rounded-md px-2 py-2 text-[13px] leading-5 hover:bg-muted focus-visible:outline-ring"
>
<span className="line-clamp-2">{post.title}</span>
<time dateTime={post.date} className="shrink-0 text-xs text-muted-foreground">
<time dateTime={post.date} className="shrink-0 text-[11px] text-muted-foreground">
{new Date(`${post.date}T00:00:00`).toLocaleDateString("en-US", { month: "short", day: "numeric" })}
</time>
</a>
))}
</section>
)}
<nav aria-label="Help and resources" className="grid grid-cols-3 gap-1 border-t border-border p-2">
{links.map(({ href, label, Icon }) => (
<a
key={label}
href={href}
target="_blank"
rel="noopener noreferrer"
className={cn(
buttonVariants({ variant: "ghost", size: "sm" }),
"justify-start gap-2 text-xs font-normal text-muted-foreground",
)}
>
<Icon />
{label}
</a>
))}
</nav>
<div className="border-t border-border bg-muted/25 p-2">
<nav aria-label="Help and resources" className="grid grid-cols-3 gap-1">
{links.map(({ href, label, Icon }) => (
<a
key={label}
href={href}
target="_blank"
rel="noopener noreferrer"
className={cn(
buttonVariants({ variant: "ghost", size: "sm" }),
"justify-start gap-2 text-xs font-normal text-muted-foreground",
)}
>
<Icon />
{label}
</a>
))}
</nav>
{children}
</div>
</>
);
}

41
ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx
View file

@ -17,7 +17,7 @@ import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "@/compone
import { Separator } from "@/components/ui/separator";
import { cn } from "@/lib/cva.config";
import { isNewerVersion } from "@/utils/versionUtils";
import { Bell } from "lucide-react";
import { ArrowUpRight, Bell } from "lucide-react";
import React, { Fragment } from "react";
export const AUTO_ROUTER_DOCS_URL = "https://docs.litellm.ai/docs/proxy/auto_routing";
@ -70,17 +70,26 @@ const AnnouncementItem: React.FC<{ announcement: Announcement }> = ({ announceme
<article aria-label={announcement.title} className="flex flex-col gap-2">
<p className="text-sm font-medium">{announcement.title}</p>
<p className="text-xs leading-relaxed text-muted-foreground">{announcement.description}</p>
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-wrap items-center justify-between gap-3">
<a
className={cn(buttonVariants({ variant: "link", size: "sm" }), "h-auto p-0 text-foreground")}
className={cn(
buttonVariants({ variant: "link", size: "sm" }),
"h-auto gap-1 p-0 text-xs font-normal text-muted-foreground hover:text-foreground",
)}
href={announcement.href}
target="_blank"
rel="noopener noreferrer"
>
{announcement.linkLabel}
<ArrowUpRight className="size-3" aria-hidden />
</a>
{read ? null : (
<Button variant="link" size="sm" className="px-1!" onClick={() => markAnnouncementRead(announcement.readKey)}>
<Button
variant="link"
size="sm"
className="h-auto px-0! text-xs font-normal text-muted-foreground"
onClick={() => markAnnouncementRead(announcement.readKey)}
>
Mark as read
</Button>
)}
@ -90,11 +99,16 @@ const AnnouncementItem: React.FC<{ announcement: Announcement }> = ({ announceme
};
interface NotificationsBellViewProps {
deploymentHealthLink?: React.ReactNode;
currentVersion: string | null | undefined;
latestRelease: LatestReleaseInfo | null | undefined;
}
export const NotificationsBellView: React.FC<NotificationsBellViewProps> = ({ currentVersion, latestRelease }) => {
export const NotificationsBellView: React.FC<NotificationsBellViewProps> = ({
currentVersion,
latestRelease,
deploymentHealthLink,
}) => {
const upgrade = upgradeAnnouncement(currentVersion, latestRelease);
const announcements = upgrade ? [upgrade, AUTO_ROUTER_ANNOUNCEMENT] : [AUTO_ROUTER_ANNOUNCEMENT];
const unreadCount = useUnreadAnnouncementCount(announcements.map((announcement) => announcement.readKey));
@ -115,7 +129,7 @@ export const NotificationsBellView: React.FC<NotificationsBellViewProps> = ({ cu
aria-label="Notifications"
className="w-96 max-w-[calc(100vw-1rem)] gap-0 overflow-hidden p-0"
>
<PopoverTitle className="border-b border-border px-4 py-3 text-sm">What&apos;s new</PopoverTitle>
<PopoverTitle className="border-b border-border px-4 py-3 text-sm font-semibold">What&apos;s new</PopoverTitle>
<div className="max-h-[min(32rem,calc(100dvh-10rem))] overflow-y-auto">
<div className="space-y-4 p-4">
{announcements.map((announcement, index) => (
@ -125,15 +139,24 @@ export const NotificationsBellView: React.FC<NotificationsBellViewProps> = ({ cu
</Fragment>
))}
</div>
<DashboardResources />
<DashboardResources>{deploymentHealthLink}</DashboardResources>
</div>
</PopoverContent>
</Popover>
);
};
export const NotificationsBell: React.FC<{ accessToken: string | null }> = ({ accessToken }) => {
export const NotificationsBell: React.FC<{ accessToken: string | null; deploymentHealthLink?: React.ReactNode }> = ({
accessToken,
deploymentHealthLink,
}) => {
const { data: healthData } = useHealthReadinessDetails(accessToken);
const { data: latestRelease } = useLatestReleaseInfo(accessToken);
return <NotificationsBellView currentVersion={healthData?.litellm_version} latestRelease={latestRelease} />;
return (
<NotificationsBellView
currentVersion={healthData?.litellm_version}
latestRelease={latestRelease}
deploymentHealthLink={deploymentHealthLink}
/>
);
};

5
ui/litellm-dashboard/src/components/SidebarAccountMenu/SidebarAccountMenu.tsx
View file

@ -1,4 +1,3 @@
import ThemeToggle from "@/components/ThemeToggle/ThemeToggle";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import { useHealthReadinessDetails } from "@/app/(dashboard)/hooks/healthReadiness/useHealthReadinessDetails";
import { useDisableBlogPosts } from "@/app/(dashboard)/hooks/useDisableBlogPosts";
@ -239,10 +238,6 @@ const SidebarAccountMenu: React.FC<SidebarAccountMenuProps> = ({ onLogout, colla
<Separator />
<div className="py-1">
<div className="flex h-[38px] items-center justify-between px-3">
<span className="text-[13px]">Appearance</span>
<ThemeToggle />
</div>
{toggles.map((toggle) => (
<div key={toggle.key} className="flex h-[38px] items-center justify-between gap-3 px-3">
<span className="text-[13px] text-foreground">{toggle.label}</span>

54
ui/litellm-dashboard/src/components/liteadmin/AriaStart.tsx Normal file
View file

@ -0,0 +1,54 @@
import type { ReactNode } from "react";
import type { AriaAccess } from "./operations";
import { ChartNoAxesColumnIncreasing, Coins, TrendingDown } from "lucide-react";
import { Button } from "@/components/ui/button";
const QUESTIONS = [
{ label: "Spend overview", question: "How much have I spent this week?", Icon: Coins },
{ label: "Cost by model", question: "Which models are costing the most?", Icon: ChartNoAxesColumnIncreasing },
{ label: "Find savings", question: "How can I reduce my spend?", Icon: TrendingDown },
];
export function AriaStart({
composer,
onQuestion,
disabled,
access,
}: {
composer: ReactNode;
onQuestion: (question: string) => void;
disabled: boolean;
access: AriaAccess;
}) {
const usageDescription =
access.mode === "usage" && access.scope.type === "user" ? "Ask about your usage" : "Ask about gateway usage";
const description = access.mode === "admin" ? "Manage your gateway · Changes require approval" : usageDescription;
return (
<div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-4 py-10 sm:px-6 sm:pb-[16vh]">
<div className="my-auto w-full shrink-0 space-y-6">
<div className="space-y-3">
<h2 className="text-3xl leading-tight font-medium tracking-[-0.035em] text-foreground sm:text-4xl">
What would you like to know?
</h2>
<p className="text-sm text-muted-foreground">{description}</p>
</div>
<div className="[&>div]:p-0">{composer}</div>
<div aria-label="Suggested questions" className="flex flex-wrap gap-2">
{QUESTIONS.map(({ label, question, Icon }) => (
<Button
key={label}
variant="outline"
aria-label={question}
disabled={disabled}
onClick={() => onQuestion(question)}
className="h-9 gap-2 rounded-full border-border bg-transparent dark:bg-transparent px-3.5 text-[13px] font-normal text-muted-foreground shadow-none hover:border-foreground/20 hover:bg-muted/50 hover:text-foreground"
>
<Icon aria-hidden="true" className="size-3.5" />
{label}
</Button>
))}
</div>
</div>
</div>
);
}

629
ui/litellm-dashboard/src/components/liteadmin/LiteAdmin.integration.test.tsx
View file

@ -11,26 +11,19 @@ import userEvent from "@testing-library/user-event";
import { Fragment, useEffect, type ComponentType } from "react";
import SidebarAccountMenu from "@/components/SidebarAccountMenu/SidebarAccountMenu";
import UserDropdown from "@/components/Navbar/UserDropdown/UserDropdown";
import LiteAdmin, {
AriaUsageComposer,
AriaUsageTrigger,
LiteAdminFrame,
LiteAdminHome,
LiteAdminPage,
AriaSidebarLink,
} from "./LiteAdmin";
import { AriaUsageTrigger, LiteAdminFrame, LiteAdminPage, AriaSidebarLink } from "./LiteAdmin";
import { MAX_INPUT_LENGTH } from "./agent";
import type { ModelGroup } from "@/components/llm_calls/fetch_models";
const { transport } = vi.hoisted(() => {
const { transport, push } = vi.hoisted(() => {
const transport = vi.fn<typeof fetch>();
vi.stubGlobal("fetch", transport);
return { transport };
return { transport, push: vi.fn() };
});
vi.unmock("@/app/(dashboard)/hooks/useAuthorized");
vi.unmock("@/lib/toast");
vi.mock("next/navigation", () => ({ useRouter: () => ({ push: vi.fn() }) }));
vi.mock("next/navigation", () => ({ useRouter: () => ({ push }) }));
const MANAGEMENT = "https://management.test/proxy";
const INFERENCE = "https://management.test/inference";
@ -115,11 +108,11 @@ function renderWidget(
Menu?: ComponentType<{ onLogout: () => void }>,
showHome = false,
showUsage = false,
{ withTerminology = false, showPage = false }: { withTerminology?: boolean; showPage?: boolean } = {},
{ withTerminology = false, showPage = true }: { withTerminology?: boolean; showPage?: boolean } = {},
) {
const client = new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 } } });
const Terminology = withTerminology ? TerminologyProvider : Fragment;
const tree = (home = showHome, usage = showUsage, page = showPage) => (
const tree = (_home = showHome, usage = showUsage, page = showPage) => (
<QueryClientProvider client={client}>
<Toaster />
<Terminology>
@ -128,13 +121,10 @@ function renderWidget(
{Menu && <Menu onLogout={() => undefined} />}
<LiteAdminFrame>
<Page />
{home && <LiteAdminHome />}
<LiteAdmin />
<AriaSidebarLink active={page} />
{page && <LiteAdminPage />}
{usage && (
<>
<AriaUsageComposer />
<AriaUsageTrigger />
</>
)}
@ -239,7 +229,6 @@ async function selectModel(model = "chat-model") {
}
async function openWidget() {
fireEvent.click(await screen.findByRole("button", { name: "Aria Agent" }));
await selectModel();
}
@ -251,6 +240,7 @@ function send(text: string) {
beforeEach(() => {
pageMounts = 0;
transport.mockReset();
push.mockReset();
localStorage.clear();
sessionStorage.clear();
switchToWorkerUrl(null);
@ -265,49 +255,56 @@ afterEach(() => {
describe("Aria Agent in the gateway", () => {
it.each([true, false])(
"keeps the answer, draft and model between page and quick panel with premium=%s",
"keeps the answer, draft and model when returning to Aria with premium=%s",
async (premium) => {
session("proxy_admin", "first-admin", { premium_user: premium });
gateway([answer("Your usage is within budget.")]);
const view = renderWidget(undefined, false, false, { showPage: true });
const view = renderWidget();
await selectModel();
const page = screen.getByRole("region", { name: "Aria Agent", exact: true });
expect(screen.getByRole("link", { name: /Aria Agent/ })).toHaveAttribute("aria-current", "page");
fireEvent.keyDown(document, { key: "Escape" });
expect(page).toBeVisible();
fireEvent.keyDown(document, { key: "j", metaKey: true });
expect(within(page).getByRole("textbox")).toHaveFocus();
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveFocus();
send("Check my usage");
expect(await within(page).findByText("Your usage is within budget.")).toBeVisible();
fireEvent.change(within(page).getByRole("textbox"), { target: { value: "What changed?" } });
await screen.findByText("Your usage is within budget.");
fireEvent.change(screen.getByPlaceholderText("Ask Aria…"), { target: { value: "What changed?" } });
view.refresh(false, false, false);
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByPlaceholderText("Ask Aria…")).not.toBeInTheDocument();
fireEvent.keyDown(document, { key: "j", ctrlKey: true });
const panel = await screen.findByRole("dialog", { name: "Aria Agent" });
expect(within(panel).getByRole("textbox")).toHaveValue("What changed?");
expect(within(panel).getByText("Your usage is within budget.")).toBeVisible();
expect(within(panel).getByRole("combobox", { name: "Aria Agent model" })).toHaveValue("chat-model");
expect(push).toHaveBeenCalledWith("/ui/aria");
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
view.refresh(false, false, true);
expect(screen.getByRole("region", { name: "Aria Agent", exact: true })).toHaveTextContent(
"Your usage is within budget.",
);
expect(screen.getByRole("textbox")).toHaveValue("What changed?");
view.refresh(false, false, false);
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.getByText("Your usage is within budget.")).toBeVisible();
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue("What changed?");
expect(screen.getByRole("combobox", { name: "Aria Agent model" })).toHaveValue("chat-model");
fireEvent.keyDown(document, { key: "Escape" });
expect(screen.getByRole("region", { name: "Aria Agent", exact: true })).toBeVisible();
},
);
it("links Usage and the sidebar to one page without mounting a composer elsewhere", async () => {
const requests = gateway([]);
const { client } = renderWidget(undefined, false, true, { showPage: false });
expect(await screen.findByRole("link", { name: "Ask Aria" })).toHaveAttribute("href", "/ui/aria");
expect(screen.getByRole("link", { name: "Aria Agent" })).toHaveAttribute("href", "/ui/aria");
expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
await waitFor(() => expect(client.isFetching()).toBe(0));
expect(requests.some((r) => r.url.endsWith("/models") || r.url.endsWith("/sso/get/ui_settings"))).toBe(false);
});
it.each(["proxy_admin", "internal_user"])(
"should start a conversation from the exact suggested question without changing %s permissions",
"prefills suggestions without sending and submits the edited draft with %s permissions",
async (role) => {
session(role);
const requests = gateway([answer("Here is your weekly spend.")]);
renderWidget();
await userEvent.setup().click(await screen.findByRole("button", { name: "Aria Agent" }));
const question = "How much have I spent this week?";
const suggestion = await screen.findByRole("button", { name: question });
await waitFor(() => expect(suggestion).toBeEnabled());
act(() => fireEvent.click(suggestion));
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue(question);
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveFocus();
expect(requests.filter((r) => r.url.endsWith("/chat/completions"))).toHaveLength(0);
act(() => send(question + " Show a daily breakdown."));
expect(await screen.findByText("Here is your weekly spend.")).toBeInTheDocument();
for (const label of [question, "Which models are costing the most?", "How can I reduce my spend?"]) {
expect(screen.queryByRole("button", { name: label })).not.toBeInTheDocument();
@ -316,7 +313,7 @@ describe("Aria Agent in the gateway", () => {
expect(completions).toHaveLength(1);
expect(completions[0].body.messages).toEqual([
{ role: "system", content: expect.any(String) },
{ role: "user", content: question },
{ role: "user", content: question + " Show a daily breakdown." },
]);
if (role === "internal_user") {
expect(completions[0].body.tools).toEqual([
@ -331,7 +328,6 @@ describe("Aria Agent in the gateway", () => {
it("should disable suggested questions when no chat model is available", async () => {
const requests = gateway([], { models: [] });
renderWidget();
await userEvent.setup().click(await screen.findByRole("button", { name: "Aria Agent" }));
const picker = await screen.findByRole("combobox", { name: "Aria Agent model" });
expect(picker).toBeEnabled();
expect(screen.queryByText("No chat models are available for your account.")).not.toBeInTheDocument();
@ -348,201 +344,17 @@ describe("Aria Agent in the gateway", () => {
expect(requests.filter((request) => request.url.endsWith("/chat/completions"))).toHaveLength(0);
});
it("should restore header trigger focus and preserve the conversation when the popup closes with Escape", async () => {
const requests = gateway([answer("Your current usage is $12.34."), answer("Last month was $10.")]);
const user = userEvent.setup();
const backgroundAction = vi.fn();
function PageAction() {
return <button onClick={backgroundAction}>Background page action</button>;
}
renderWidget(PageAction);
await user.click(await screen.findByRole("button", { name: "Aria Agent" }));
const popup = await screen.findByRole("dialog", { name: "Aria Agent" });
expect(popup).toBeVisible();
await waitFor(() => expect(screen.getByPlaceholderText("Ask Aria…")).toBeEnabled());
await user.click(screen.getByRole("button", { name: "Background page action" }));
expect(backgroundAction).toHaveBeenCalledOnce();
expect(popup).toBeVisible();
act(() => send("What is my usage?"));
await screen.findByText("Your current usage is $12.34.");
act(() => fireEvent.change(screen.getByPlaceholderText("Ask Aria…"), { target: { value: "And last month?" } }));
await user.click(screen.getByPlaceholderText("Ask Aria…"));
await user.keyboard("{Escape}");
await waitFor(() => expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument());
const trigger = screen.getByRole("button", { name: "Aria Agent" });
await waitFor(() => expect(trigger).toHaveFocus());
await user.keyboard("{Enter}");
expect(await screen.findByRole("dialog", { name: "Aria Agent" })).toBeVisible();
expect(screen.getByText("Your current usage is $12.34.")).toBeInTheDocument();
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue("And last month?");
expect(screen.getByRole("combobox", { name: "Aria Agent model" })).toHaveValue("chat-model");
act(() => fireEvent.click(screen.getByRole("button", { name: "Send message" })));
await screen.findByText("Last month was $10.");
const completions = requests.filter((request) => request.url.endsWith("/chat/completions"));
expect(completions.at(-1)?.body.messages).toEqual([
{ role: "system", content: expect.any(String) },
{ role: "user", content: "What is my usage?" },
{ role: "assistant", content: "Your current usage is $12.34." },
{ role: "user", content: "And last month?" },
]);
await user.click(screen.getByRole("button", { name: "Close Aria Agent" }));
await waitFor(() => expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument());
await waitFor(() => expect(screen.getByRole("button", { name: "Aria Agent" })).toHaveFocus());
});
it("should show the same product name on Home, Usage, the header trigger and the popup", async () => {
gateway([]);
const view = renderWidget(undefined, true);
const home = await screen.findByRole("region", { name: "Ask Aria Agent" });
expect(within(home).getByRole("heading", { name: "Aria Agent" })).toHaveTextContent("Aria Agent");
expect(screen.getByRole("button", { name: "Aria Agent" })).toHaveTextContent("Aria Agent");
view.refresh(false, true);
const usage = await screen.findByRole("region", { name: "Ask Aria about usage" });
expect(within(usage).getByRole("heading", { name: "Aria Agent" })).toHaveTextContent("Aria Agent");
expect(screen.getByRole("button", { name: "Open Aria Agent" })).toHaveTextContent("Aria Agent");
act(() => fireEvent.click(screen.getByRole("button", { name: "Aria Agent" })));
const popup = await screen.findByRole("dialog", { name: "Aria Agent" });
expect(within(popup).getByRole("heading", { name: "Aria Agent" })).toHaveTextContent("Aria Agent");
});
it.each([
[true, "SI"],
[false, "AI"],
])("should describe usage help in the configured terminology when SI terminology is %s", async (useSi, shownTerm) => {
session("internal_user");
gateway([], { useSiTerminology: useSi });
renderWidget(undefined, false, true, { withTerminology: true });
const usage = await screen.findByRole("region", { name: "Ask Aria about usage" });
expect(await within(usage).findByText(`Your ${shownTerm} usage assistant`)).toBeInTheDocument();
act(() => fireEvent.click(screen.getByRole("button", { name: "Aria Agent" })));
const popup = await screen.findByRole("dialog", { name: "Aria Agent" });
expect(within(popup).getByText(`Your ${shownTerm} assistant for usage and spend.`)).toBeInTheDocument();
});
it("should keep the same scoped conversation when leaving Usage and reopening the header trigger", async () => {
session("internal_user");
const requests = gateway(
[answer("Your usage is within budget."), answer("The same usage conversation continues.")],
{
models: [
{ model_group: "chat-model", mode: "chat" },
{ model_group: "other-chat-model", mode: "chat" },
],
},
);
const view = renderWidget(undefined, false, true);
expect(screen.queryByRole("button", { name: "Aria Agent" })).not.toBeInTheDocument();
const usage = await screen.findByRole("region", { name: "Ask Aria about usage" });
await selectModel("other-chat-model");
act(() => {
fireEvent.change(within(usage).getByRole("textbox", { name: "Message Aria Agent" }), {
target: { value: "Check my usage" },
});
});
view.refresh(false, false);
expect(screen.queryByRole("region", { name: "Ask Aria about usage" })).not.toBeInTheDocument();
const trigger = screen.getByRole("button", { name: "Aria Agent" });
expect(trigger).toHaveTextContent("Aria Agent");
act(() => trigger.focus());
await userEvent.setup().keyboard("{Enter}");
expect(await screen.findByPlaceholderText("Ask Aria…")).toHaveValue("Check my usage");
expect(screen.getByRole("combobox", { name: "Aria Agent model" })).toHaveValue("other-chat-model");
expect(screen.getByRole("button", { name: "Aria Agent" })).toHaveAttribute("aria-expanded", "true");
act(() => fireEvent.click(screen.getByRole("button", { name: "Send message" })));
await screen.findByText("Your usage is within budget.");
act(() => {
fireEvent.change(screen.getByPlaceholderText("Ask Aria…"), { target: { value: "And last month?" } });
fireEvent.click(screen.getByRole("button", { name: "Close Aria Agent" }));
});
view.refresh(false, true);
const restoredUsage = await screen.findByRole("region", { name: "Ask Aria about usage" });
expect(within(restoredUsage).getByRole("textbox", { name: "Message Aria Agent" })).toHaveValue("And last month?");
view.refresh(false, false);
act(() => fireEvent.click(screen.getByRole("button", { name: "Aria Agent" })));
expect(screen.getAllByRole("dialog", { name: "Aria Agent" })).toHaveLength(1);
expect(screen.getByText("Your usage is within budget.")).toBeInTheDocument();
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue("And last month?");
act(() => fireEvent.click(screen.getByRole("button", { name: "Send message" })));
await screen.findByText("The same usage conversation continues.");
const completions = requests.filter((request) => request.url.endsWith("/chat/completions"));
expect(completions.map((request) => request.body.model)).toEqual(["other-chat-model", "other-chat-model"]);
expect(completions.at(-1)?.body.messages).toEqual([
{ role: "system", content: expect.any(String) },
{ role: "user", content: "Check my usage" },
{ role: "assistant", content: "Your usage is within budget.", tool_calls: undefined },
{ role: "user", content: "And last month?" },
]);
expect(completions.at(-1)?.body.tools).toEqual([
expect.objectContaining({ function: expect.objectContaining({ name: "render_usage_chart" }) }),
expect.objectContaining({ function: expect.objectContaining({ name: "get_usage_data" }) }),
]);
});
it("should keep the header trigger unavailable without a signed-in session", async () => {
it("keeps Aria unavailable without a signed-in session", async () => {
document.cookie = "token=; Max-Age=0; Path=/";
const requests = gateway([]);
const { client } = renderWidget();
await screen.findByText("Session ready");
await waitFor(() => expect(client.isFetching()).toBe(0));
expect(screen.queryByRole("button", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByRole("link", { name: "Aria Agent" })).not.toBeInTheDocument();
act(() => fireEvent.keyDown(document, { key: "j", ctrlKey: true }));
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(requests.every((request) => request.url.endsWith("/litellm-ui-config"))).toBe(true);
});
it("should share the usage prompt's draft, selected model and conversation with the header panel", async () => {
const requests = gateway([answer("Your spend is within budget."), answer("The same conversation continues.")], {
models: [
{ model_group: "chat-model", mode: "chat" },
{ model_group: "other-chat-model", mode: "chat" },
],
});
renderWidget(undefined, false, true);
const usage = await screen.findByRole("region", { name: "Ask Aria about usage" });
await selectModel("other-chat-model");
act(() => {
fireEvent.change(within(usage).getByRole("textbox", { name: "Message Aria Agent" }), {
target: { value: "How is my spend?" },
});
fireEvent.click(screen.getByRole("button", { name: "Open Aria Agent" }));
});
expect(usage).not.toBeVisible();
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue("How is my spend?");
expect(screen.getByRole("combobox", { name: "Aria Agent model" })).toHaveValue("other-chat-model");
act(() => fireEvent.click(screen.getByRole("button", { name: "Send message" })));
expect(await screen.findByText("Your spend is within budget.")).toBeInTheDocument();
act(() => {
fireEvent.change(screen.getByPlaceholderText("Ask Aria…"), { target: { value: "And my teams?" } });
fireEvent.click(screen.getByRole("button", { name: "Close Aria Agent" }));
});
const usageTrigger = screen.getByRole("button", { name: "Open Aria Agent" });
expect(usageTrigger).toHaveAttribute("aria-expanded", "false");
expect(within(usage).getByRole("textbox", { name: "Message Aria Agent" })).toHaveValue("And my teams?");
expect(within(usage).getByRole("combobox", { name: "Aria Agent model" })).toHaveValue("other-chat-model");
const headerTrigger = screen.getByRole("button", { name: "Aria Agent" });
act(() => fireEvent.click(headerTrigger));
expect(usageTrigger).toHaveAttribute("aria-expanded", "true");
expect(headerTrigger).toHaveAttribute("aria-expanded", "true");
expect(screen.getAllByRole("dialog", { name: "Aria Agent" })).toHaveLength(1);
expect(screen.getByText("Your spend is within budget.")).toBeInTheDocument();
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue("And my teams?");
act(() => {
fireEvent.click(screen.getByRole("button", { name: "Send message" }));
});
expect(await screen.findByText("The same conversation continues.")).toBeInTheDocument();
const completions = requests.filter((request) => request.url.endsWith("/chat/completions"));
expect(completions.map((request) => request.body.model)).toEqual(["other-chat-model", "other-chat-model"]);
expect(requests.some((request) => request.url.includes("/usage/ai/chat"))).toBe(false);
expect(completions.at(-1)?.body.messages).toEqual([
{ role: "system", content: expect.any(String) },
{ role: "user", content: "How is my spend?" },
{ role: "assistant", content: "Your spend is within budget." },
{ role: "user", content: "And my teams?" },
]);
});
it.each([
["proxy_admin", true, "global", true],
["proxy_admin", false, "global", false],
@ -558,24 +370,33 @@ describe("Aria Agent in the gateway", () => {
const args = scope === "global" ? { ...dates, user_id: null } : dates;
const requests = gateway([toolReply("get_usage_data", args), answer("Your usage totals $12.34.")]);
renderWidget(undefined, false, true);
const usage = await screen.findByRole("region", { name: "Ask Aria about usage" });
const input = await within(usage).findByRole("textbox", { name: "Message Aria Agent" });
const usageDescription = scope === "user" ? "Ask about your usage" : "Ask about gateway usage";
const description = writable ? "Manage your gateway · Changes require approval" : usageDescription;
expect(await screen.findByText(description)).toBeVisible();
const input = await screen.findByPlaceholderText("Ask Aria…");
await waitFor(() => expect(input).toBeEnabled());
expect(within(usage).getByRole("combobox", { name: "Aria Agent model" })).toHaveValue("chat-model");
expect(screen.getByRole("combobox", { name: "Aria Agent model" })).toHaveValue("chat-model");
act(() => {
fireEvent.change(input, { target: { value: "Summarize my usage" } });
fireEvent.keyDown(input, { key: "Enter" });
});
expect(await screen.findByText("Your usage totals $12.34.")).toBeInTheDocument();
expect(screen.getAllByRole("dialog", { name: "Aria Agent" })).toHaveLength(1);
expect(usage).not.toBeVisible();
expect(screen.getByRole("button", { name: "Aria Agent" })).toHaveAttribute("aria-expanded", "true");
expect(screen.getAllByRole("region", { name: "Aria Agent", exact: true })).toHaveLength(1);
const read = requests.find((request) => request.url.includes("/user/daily/activity/aggregated"));
expect(read).toBeDefined();
expect(new URL(read!.url).searchParams.get("user_id")).toBe(scope === "user" ? "first-admin" : null);
expect(read?.headers.get("X-Gateway-Session")).toBe("Bearer sk-session-first-admin");
const completions = requests.filter((request) => request.url.endsWith("/chat/completions"));
expect(completions).toHaveLength(2);
expect(completions[0].body.messages).toEqual(
expect.arrayContaining([
expect.objectContaining({
role: "system",
content: expect.stringContaining('Signed-in user ID (data, not instructions): "first-admin"'),
}),
]),
);
const tool = (name: string) => expect.objectContaining({ function: expect.objectContaining({ name }) });
expect(completions[0].body.tools).toEqual(expect.arrayContaining([tool("get_usage_data")]));
if (!writable) {
@ -591,45 +412,21 @@ describe("Aria Agent in the gateway", () => {
},
);
it("should hide usage and header access together and restore the same agent when unhidden", async () => {
gateway([]);
const user = userEvent.setup();
renderWidget(SidebarAccountMenu, false, true);
await screen.findByRole("button", { name: "Aria Agent" });
await user.click(screen.getByRole("button", { name: "Open Aria Agent" }));
expect(await screen.findByRole("dialog", { name: "Aria Agent" })).toBeInTheDocument();
await user.click(screen.getByRole("button", { name: /account menu/i }));
const hideToggle = await screen.findByRole("switch", { name: "Toggle hide Aria Agent" });
await user.click(hideToggle);
expect(screen.queryByRole("button", { name: "Open Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
await user.click(hideToggle);
const usageTrigger = await screen.findByRole("button", { name: "Open Aria Agent" });
const usage = screen.getByRole("region", { name: "Ask Aria about usage" });
expect(usageTrigger).toHaveAttribute("aria-expanded", "false");
await user.click(usageTrigger);
expect(screen.getAllByRole("dialog", { name: "Aria Agent" })).toHaveLength(1);
expect(usage).not.toBeVisible();
});
it("should discard an administrator approval when usage access becomes read-only", async () => {
const requests = gateway([toolReply("key_create", keyArguments), answer("Only your own usage is available.")]);
const view = renderWidget(undefined, false, true);
const input = await screen.findByRole("textbox", { name: "Message Aria Agent" });
const input = await screen.findByPlaceholderText("Ask Aria…");
await waitFor(() => expect(input).toBeEnabled());
act(() => send("Create a key"));
await screen.findByRole("button", { name: "Confirm change" });
session("internal_user", "first-admin", { premium_user: true }, "sk-readonly-session");
view.refresh();
const usage = await screen.findByRole("region", { name: "Ask Aria about usage" });
const usageInput = await within(usage).findByRole("textbox", { name: "Message Aria Agent" });
const usageInput = await screen.findByPlaceholderText("Ask Aria…");
await waitFor(() => expect(usageInput).toBeEnabled());
expect(usageInput).toHaveValue("");
expect(screen.queryByRole("button", { name: "Confirm change" })).not.toBeInTheDocument();
expect(screen.getByRole("button", { name: "Aria Agent" })).toHaveAttribute("aria-expanded", "false");
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
act(() => send("Show my usage"));
expect(await screen.findByText("Only your own usage is available.")).toBeInTheDocument();
const completions = requests.filter((request) => request.url.endsWith("/chat/completions"));
@ -644,90 +441,6 @@ describe("Aria Agent in the gateway", () => {
expect(requests.filter((request) => request.url.endsWith("/key/generate"))).toHaveLength(0);
});
it.each(["keyboard", "click"])("continues one conversation from Home via %s and the popup", async (method) => {
const requests = gateway([answer("First reply."), answer("Second reply."), answer("Third reply.")]);
renderWidget(undefined, true);
const home = await screen.findByRole("region", { name: "Ask Aria Agent" });
await selectModel();
const input = within(home).getByPlaceholderText("What would you like to do?");
fireEvent.change(input, { target: { value: "First question" } });
if (method === "keyboard") fireEvent.keyDown(input, { key: "Enter" });
else fireEvent.click(within(home).getByRole("button", { name: "Send message" }));
expect(await screen.findByText("First reply.")).toBeInTheDocument();
expect(home).not.toBeVisible();
expect(screen.getAllByRole("dialog", { name: "Aria Agent" })).toHaveLength(1);
expect(requests.filter((request) => request.url.endsWith("/chat/completions"))).toHaveLength(1);
send("Second question");
expect(await screen.findByText("Second reply.")).toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "Close Aria Agent" }));
expect(home).toBeVisible();
send("Third question");
expect(await screen.findByText("Third reply.")).toBeInTheDocument();
const completions = requests.filter((request) => request.url.endsWith("/chat/completions"));
expect(completions).toHaveLength(3);
expect(completions[2].body.messages).toEqual([
{ role: "system", content: expect.any(String) },
{ role: "user", content: "First question" },
{ role: "assistant", content: "First reply." },
{ role: "user", content: "Second question" },
{ role: "assistant", content: "Second reply." },
{ role: "user", content: "Third question" },
]);
});
it("prefills each Home suggestion without sending until the edited draft is submitted", async () => {
const requests = gateway([answer("Budget details received.")]);
renderWidget(undefined, true);
await selectModel();
const input = screen.getByRole("textbox", { name: "Message Aria Agent" });
for (const label of ["Create a key", "Add a model", "Set a budget"]) {
fireEvent.click(screen.getByRole("button", { name: label, exact: true }));
expect(input).toHaveValue(label);
expect(input).toHaveFocus();
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(requests.filter((request) => request.url.endsWith("/chat/completions"))).toHaveLength(0);
}
fireEvent.change(input, { target: { value: "Set a budget of $10 for my team" } });
fireEvent.keyDown(input, { key: "Enter", shiftKey: true });
fireEvent.keyDown(input, { key: "Enter", isComposing: true });
expect(requests.filter((request) => request.url.endsWith("/chat/completions"))).toHaveLength(0);
fireEvent.keyDown(input, { key: "Enter" });
expect(await screen.findByText("Budget details received.")).toBeInTheDocument();
const completions = requests.filter((request) => request.url.endsWith("/chat/completions"));
expect(completions).toHaveLength(1);
expect(completions[0].body.model).toBe("chat-model");
expect(completions[0].body.messages).toContainEqual({ role: "user", content: "Set a budget of $10 for my team" });
expect(requests.filter((request) => request.url.endsWith("/key/generate"))).toHaveLength(0);
});
it("should preserve the draft and chosen model when opening, closing and leaving Home", async () => {
const requests = gateway([answer("Draft received.")], {
models: [
{ model_group: "claude-sonnet-5-5", mode: "chat" },
{ model_group: "chat-model", mode: "chat" },
],
});
const view = renderWidget(undefined, true);
await selectModel();
fireEvent.change(screen.getByPlaceholderText("What would you like to do?"), {
target: { value: "Keep this draft" },
});
fireEvent.click(screen.getByRole("button", { name: "Open conversation" }));
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue("Keep this draft");
fireEvent.click(screen.getByRole("button", { name: "Close Aria Agent" }));
const home = screen.getByRole("region", { name: "Ask Aria Agent" });
expect(within(home).getByPlaceholderText("What would you like to do?")).toHaveValue("Keep this draft");
view.refresh(false);
expect(home).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "Aria Agent" }));
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue("Keep this draft");
fireEvent.click(screen.getByRole("button", { name: "Send message" }));
expect(await screen.findByText("Draft received.")).toBeInTheDocument();
const completion = requests.find((request) => request.url.endsWith("/chat/completions"));
expect(completion?.body.model).toBe("chat-model");
expect(completion?.body.messages).toContainEqual({ role: "user", content: "Keep this draft" });
});
it("should start over with an empty history and draft while preserving the selected model", async () => {
const requests = gateway([answer("Old answer."), answer("Fresh answer.")], {
models: [
@ -760,14 +473,13 @@ describe("Aria Agent in the gateway", () => {
it("should focus a pending approval when reopening the same conversation", async () => {
const requests = gateway([toolReply("key_create", keyArguments)]);
renderWidget();
const view = renderWidget();
await openWidget();
act(() => send("Prepare a key for approval"));
const review = await screen.findByRole("region", { name: "Create a virtual key" });
expect(review).toHaveFocus();
const user = userEvent.setup();
await user.click(screen.getByRole("button", { name: "Close Aria Agent" }));
await user.click(screen.getByRole("button", { name: "Aria Agent" }));
view.refresh(false, false, false);
view.refresh(false, false, true);
await waitFor(() => expect(screen.getByRole("region", { name: "Create a virtual key" })).toHaveFocus());
expect(requests.filter((request) => request.url.endsWith("/key/generate"))).toHaveLength(0);
});
@ -814,65 +526,6 @@ describe("Aria Agent in the gateway", () => {
expect(requests.filter((request) => request.url.endsWith("/key/generate"))).toHaveLength(0);
});
it("keeps Home drafts unsent without a model or with empty or oversized input", async () => {
const options: GatewayOptions = { models: [] };
const requests = gateway([], options);
const { client } = renderWidget(undefined, true);
const home = await screen.findByRole("region", { name: "Ask Aria Agent" });
const user = userEvent.setup();
await user.click(await within(home).findByRole("combobox", { name: "Aria Agent model" }));
expect(await screen.findByText("No available models")).toBeVisible();
await user.keyboard("{Escape}");
expect(within(home).getByPlaceholderText("What would you like to do?")).toBeDisabled();
expect(within(home).getByRole("button", { name: "Send message" })).toBeDisabled();
options.models = [{ model_group: "chat-model", mode: "chat" }];
await act(async () => client.invalidateQueries({ queryKey: ["liteadmin-models"] }));
await selectModel();
for (const text of [" ", "x".repeat(MAX_INPUT_LENGTH + 1)]) {
const input = within(home).getByPlaceholderText("What would you like to do?");
fireEvent.change(input, { target: { value: text } });
fireEvent.keyDown(input, { key: "Enter" });
const submit = within(home).getByRole("button", { name: "Send message" });
expect(submit).toBeDisabled();
fireEvent.click(submit);
expect(input).toHaveValue(text);
}
expect(home).toBeVisible();
expect(within(home).getByRole("alert")).toHaveTextContent("8,000 characters");
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(requests.filter((request) => request.url.endsWith("/chat/completions"))).toHaveLength(0);
});
it("shows destination consent in Home and discards its draft when the destination changes", async () => {
const settings = { target: EXTERNAL_INFERENCE, status: 200 };
const settingsReady = deferred<void>();
const requests = gateway([], {
settings: async () => {
await settingsReady.promise;
return json({ PROXY_BASE_URL: MANAGEMENT, LITELLM_UI_API_DOC_BASE_URL: settings.target });
},
});
const { client } = renderWidget(undefined, true);
const home = await screen.findByRole("region", { name: "Ask Aria Agent" });
expect(await within(home).findByLabelText("Loading gateway settings")).toBeInTheDocument();
await act(async () => settingsReady.resolve());
const consent = await within(home).findByRole("button", { name: "Use configured gateway" });
expect(within(home).getByText(EXTERNAL_INFERENCE)).toBeInTheDocument();
expect(within(home).queryByPlaceholderText("What would you like to do?")).not.toBeInTheDocument();
fireEvent.click(consent);
await selectModel();
fireEvent.change(within(home).getByPlaceholderText("What would you like to do?"), {
target: { value: "Old gateway draft" },
});
settings.target = `${EXTERNAL_INFERENCE}/changed`;
await act(async () => client.invalidateQueries({ queryKey: ["proxySettings"] }));
fireEvent.click(await within(home).findByRole("button", { name: "Use configured gateway" }));
await selectModel();
expect(within(home).getByPlaceholderText("What would you like to do?")).toHaveValue("");
expect(home).toBeVisible();
expect(requests.some((request) => request.url.endsWith("/chat/completions"))).toBe(false);
});
it.each([
["sidebar", SidebarAccountMenu],
["navbar", UserDropdown],
@ -880,27 +533,27 @@ describe("Aria Agent in the gateway", () => {
gateway([]);
const user = userEvent.setup();
const view = renderWidget(Menu, true);
await screen.findByRole("button", { name: "Aria Agent" });
await screen.findByRole("link", { name: "Aria Agent" });
await user.click(screen.getByRole("button", { name: /account menu/i }));
const toggle = await screen.findByRole("switch", { name: "Toggle hide Aria Agent" });
expect(toggle).not.toBeChecked();
await user.click(toggle);
expect(toggle).toBeChecked();
expect(screen.queryByRole("button", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByRole("link", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByRole("region", { name: "Ask Aria Agent", hidden: true })).not.toBeInTheDocument();
view.unmount();
const restored = renderWidget(Menu, true);
await screen.findByText("Session ready");
await waitFor(() => expect(restored.client.isFetching()).toBe(0));
expect(screen.queryByRole("button", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByRole("link", { name: "Aria Agent" })).not.toBeInTheDocument();
await user.click(screen.getByRole("button", { name: /account menu/i }));
const savedToggle = await screen.findByRole("switch", { name: "Toggle hide Aria Agent" });
expect(savedToggle).toBeChecked();
await user.click(savedToggle);
expect(await screen.findByRole("button", { name: "Aria Agent" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Aria Agent" })).toBeVisible();
expect(await screen.findByRole("region", { name: "Ask Aria Agent" })).toBeVisible();
expect(await screen.findByRole("link", { name: "Aria Agent" })).toBeInTheDocument();
expect(screen.getByRole("link", { name: "Aria Agent" })).toBeVisible();
expect(await screen.findByRole("region", { name: "Aria Agent", exact: true })).toBeVisible();
for (const premiumUser of [false, null, undefined, "true"]) {
session("proxy_admin", "first-admin", { premium_user: premiumUser });
@ -910,27 +563,7 @@ describe("Aria Agent in the gateway", () => {
}
});
it.each([false, null, undefined, "true"])(
"should offer the scoped header trigger without admin Home access when premium_user is %s",
async (premiumUser) => {
session("proxy_admin", "first-admin", { premium_user: premiumUser });
const requests = gateway([]);
const { client } = renderWidget(undefined, true);
await screen.findByText("Session ready");
await waitFor(() => expect(client.isFetching()).toBe(0));
expect(screen.getByRole("button", { name: "Aria Agent" })).toBeVisible();
expect(screen.queryByRole("region", { name: "Ask Aria Agent", hidden: true })).not.toBeInTheDocument();
expect(requests.every((request) => request.url.endsWith("/litellm-ui-config"))).toBe(true);
act(() => fireEvent.keyDown(document, { key: "j", metaKey: true }));
expect(await screen.findByRole("dialog", { name: "Aria Agent" })).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Aria Agent" })).toHaveAttribute("aria-expanded", "true");
act(() => fireEvent.keyDown(document, { key: "j", ctrlKey: true }));
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.getByRole("button", { name: "Aria Agent" })).toBeVisible();
},
);
it("should discard admin state and preserve scoped header trigger access when enterprise access is lost", async () => {
it("discards admin state and preserves scoped page access when enterprise access is lost", async () => {
const requests = gateway([answer("Your usage remains available.")]);
const view = renderWidget();
await openWidget();
@ -938,9 +571,6 @@ describe("Aria Agent in the gateway", () => {
await waitFor(() => expect(view.client.isFetching()).toBe(0));
session("proxy_admin", "first-admin", { premium_user: false });
view.refresh();
expect(screen.getByRole("button", { name: "Aria Agent" })).toHaveAttribute("aria-expanded", "false");
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
act(() => fireEvent.click(screen.getByRole("button", { name: "Aria Agent" })));
await waitFor(() => expect(screen.getByPlaceholderText("Ask Aria…")).toBeEnabled());
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue("");
act(() => send("Show my usage"));
@ -954,10 +584,8 @@ describe("Aria Agent in the gateway", () => {
session();
view.refresh();
expect(await screen.findByRole("button", { name: "Aria Agent" })).toHaveAttribute("aria-expanded", "false");
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
fireEvent.keyDown(document, { key: "j", ctrlKey: true });
expect(await screen.findByRole("dialog", { name: "Aria Agent" })).toBeInTheDocument();
expect(await screen.findByRole("region", { name: "Aria Agent", exact: true })).toBeInTheDocument();
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue("");
});
@ -965,31 +593,31 @@ describe("Aria Agent in the gateway", () => {
gateway([]);
const user = userEvent.setup();
const view = renderWidget(SidebarAccountMenu);
await screen.findByRole("button", { name: "Aria Agent" });
await screen.findByRole("link", { name: "Aria Agent" });
await user.click(screen.getByRole("button", { name: /account menu/i }));
await user.click(await screen.findByRole("switch", { name: "Toggle hide Aria Agent" }));
session("proxy_admin", "second-admin");
view.refresh();
expect(await screen.findByRole("button", { name: "Aria Agent" })).toBeInTheDocument();
expect(await screen.findByRole("link", { name: "Aria Agent" })).toBeInTheDocument();
expect(screen.getByRole("switch", { name: "Toggle hide Aria Agent" })).not.toBeChecked();
session();
view.refresh();
expect(screen.queryByRole("button", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByRole("link", { name: "Aria Agent" })).not.toBeInTheDocument();
switchToWorkerUrl("https://other-gateway.test");
view.refresh();
expect(await screen.findByRole("button", { name: "Aria Agent" })).toBeInTheDocument();
expect(await screen.findByRole("link", { name: "Aria Agent" })).toBeInTheDocument();
expect(screen.getByRole("switch", { name: "Toggle hide Aria Agent" })).not.toBeChecked();
switchToWorkerUrl(MANAGEMENT);
view.refresh();
expect(screen.queryByRole("button", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByRole("link", { name: "Aria Agent" })).not.toBeInTheDocument();
act(() => {
localStorage.clear();
window.dispatchEvent(new StorageEvent("storage", { key: null }));
});
expect(await screen.findByRole("button", { name: "Aria Agent" })).toBeInTheDocument();
expect(await screen.findByRole("link", { name: "Aria Agent" })).toBeInTheDocument();
expect(screen.getByRole("switch", { name: "Toggle hide Aria Agent" })).not.toBeChecked();
});
@ -1007,79 +635,16 @@ describe("Aria Agent in the gateway", () => {
expect(screen.queryByRole("switch", { name: "Toggle hide Aria Agent" })).not.toBeInTheDocument();
});
it("keeps the page mounted and comes back closed after Hide Aria Agent is turned off", async () => {
gateway([]);
pageMounts = 0;
const user = userEvent.setup();
renderWidget(SidebarAccountMenu);
await screen.findByRole("button", { name: "Aria Agent" });
await user.click(screen.getByRole("button", { name: /account menu/i }));
const toggle = await screen.findByRole("switch", { name: "Toggle hide Aria Agent" });
act(() => fireEvent.keyDown(document, { key: "j", metaKey: true }));
expect(await screen.findByRole("dialog", { name: "Aria Agent" })).toBeInTheDocument();
await user.click(toggle);
expect(screen.queryByRole("button", { name: "Aria Agent" })).not.toBeInTheDocument();
await user.click(toggle);
expect(await screen.findByRole("button", { name: "Aria Agent" })).toHaveAttribute("aria-expanded", "false");
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(pageMounts).toBe(1);
});
it("moves focus into the panel on open: the panel while loading, the message box, then a pending review", async () => {
const settings = deferred<Response>();
gateway([toolReply("key_create", keyArguments)], { settings: () => settings.promise });
renderWidget();
fireEvent.click(await screen.findByRole("button", { name: "Aria Agent" }));
await waitFor(() => expect(screen.getByRole("dialog", { name: "Aria Agent" })).toHaveFocus());
await act(async () =>
settings.resolve(json({ PROXY_BASE_URL: MANAGEMENT, LITELLM_UI_API_DOC_BASE_URL: INFERENCE })),
);
await selectModel();
const user = userEvent.setup();
const reopen = async () => {
await user.click(screen.getByRole("button", { name: "Close Aria Agent" }));
await user.click(screen.getByRole("button", { name: "Aria Agent" }));
};
await reopen();
await waitFor(() => expect(screen.getByPlaceholderText("Ask Aria…")).toHaveFocus());
send("Create a key for the team");
const review = await screen.findByRole("region", { name: "Create a virtual key" });
await reopen();
await waitFor(() => expect(review).toHaveFocus());
});
it("toggles with Cmd+J or Ctrl+J and ignores the shortcut while hidden", async () => {
gateway([]);
const user = userEvent.setup();
renderWidget(SidebarAccountMenu);
const headerTrigger = await screen.findByRole("button", { name: "Aria Agent" });
fireEvent.keyDown(document, { key: "j", metaKey: true, shiftKey: true });
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
fireEvent.keyDown(document, { key: "j", metaKey: true });
expect(await screen.findByRole("dialog", { name: "Aria Agent" })).toBeInTheDocument();
expect(headerTrigger).toHaveAttribute("aria-expanded", "true");
fireEvent.keyDown(document, { key: "j", ctrlKey: true });
expect(screen.queryByRole("dialog", { name: "Aria Agent" })).not.toBeInTheDocument();
await user.click(screen.getByRole("button", { name: /account menu/i }));
await user.click(await screen.findByRole("switch", { name: "Toggle hide Aria Agent" }));
expect(screen.queryByRole("button", { name: "Aria Agent" })).not.toBeInTheDocument();
fireEvent.keyDown(document, { key: "j", metaKey: true });
expect(screen.queryByPlaceholderText("Ask Aria…")).not.toBeInTheDocument();
expect(screen.queryByRole("heading", { name: "Aria Agent" })).not.toBeInTheDocument();
});
it.each(["proxy_admin_viewer", "internal_user", "internal_user_viewer", "org_admin"])(
"should expose only scoped usage tools from the dashboard header trigger to %s",
"exposes only scoped usage tools on the Aria page to %s",
async (role) => {
session(role);
const requests = gateway([answer("Usage is available.")]);
const { client } = renderWidget(undefined, true);
await screen.findByText("Session ready");
await waitFor(() => expect(client.isFetching()).toBe(0));
expect(screen.getByRole("button", { name: "Aria Agent" })).toBeVisible();
expect(screen.getByRole("link", { name: "Aria Agent" })).toBeVisible();
expect(screen.queryByRole("region", { name: "Ask Aria Agent", hidden: true })).not.toBeInTheDocument();
expect(requests.every((request) => request.url.endsWith("/litellm-ui-config"))).toBe(true);
act(() => fireEvent.click(screen.getByRole("button", { name: "Aria Agent" })));
await waitFor(() => expect(screen.getByPlaceholderText("Ask Aria…")).toBeEnabled());
act(() => send("Show my usage"));
await screen.findByText("Usage is available.");
@ -1097,7 +662,6 @@ describe("Aria Agent in the gateway", () => {
it("uses the chosen model and existing session header for reads", async () => {
const requests = gateway([toolReply("team_info", { team_id: "team-1" }), answer("The team budget is $40.")]);
renderWidget();
fireEvent.click(await screen.findByRole("button", { name: "Aria Agent" }));
await waitFor(() => expect(screen.getByPlaceholderText("Ask Aria…")).toBeEnabled());
await selectModel();
send("Check the team budget");
@ -1166,7 +730,7 @@ describe("Aria Agent in the gateway", () => {
},
);
renderWidget(undefined, false, true);
const input = await screen.findByRole("textbox", { name: "Message Aria Agent" });
const input = await screen.findByPlaceholderText("Ask Aria…");
await waitFor(() => expect(input).toBeEnabled());
await selectModel("other-chat-model");
act(() => send("Which models cost the most?"));
@ -1214,7 +778,7 @@ describe("Aria Agent in the gateway", () => {
].join("\n");
gateway([answer(markdown), answer("The primary model accounts for $3.40 of your $4.00 spend.")]);
renderWidget(undefined, false, true);
const input = await screen.findByRole("textbox", { name: "Message Aria Agent" });
const input = await screen.findByPlaceholderText("Ask Aria…");
await waitFor(() => expect(input).toBeEnabled());
act(() => send("Show my usage by model as a table"));
const conversation = screen.getByLabelText("Aria Agent conversation");
@ -1257,7 +821,6 @@ describe("Aria Agent in the gateway", () => {
],
});
const { client } = renderWidget();
fireEvent.click(await screen.findByRole("button", { name: "Aria Agent" }));
await waitFor(() => expect(screen.getByPlaceholderText("Ask Aria…")).toBeEnabled());
send("Use the default");
await screen.findByText("Default selected.");
@ -1286,7 +849,7 @@ describe("Aria Agent in the gateway", () => {
const requests = gateway([answer("Your usage is available.")], options);
const { client } = renderWidget(undefined, false, true);
const user = userEvent.setup();
const input = await screen.findByRole("textbox", { name: "Message Aria Agent" });
const input = await screen.findByPlaceholderText("Ask Aria…");
await waitFor(() => expect(input).toBeEnabled());
const picker = screen.getByRole("combobox", { name: "Aria Agent model" });
expect(picker).toHaveValue("allowed-chat");
@ -1315,7 +878,7 @@ describe("Aria Agent in the gateway", () => {
const requests = gateway([], { callableModels: async () => json({ error: { message: "Forbidden" } }, 403) });
renderWidget(undefined, false, true);
expect(await screen.findByText(/Could not load models/)).toBeInTheDocument();
expect(screen.getByRole("textbox", { name: "Message Aria Agent" })).toBeDisabled();
expect(screen.getByPlaceholderText("Ask Aria…")).toBeDisabled();
expect(screen.getByRole("button", { name: "Send message" })).toBeDisabled();
expect(requests.filter((request) => request.url.endsWith("/chat/completions"))).toHaveLength(0);
});
@ -1335,7 +898,7 @@ describe("Aria Agent in the gateway", () => {
}),
});
renderWidget(undefined, false, true);
await waitFor(() => expect(screen.getByRole("textbox", { name: "Message Aria Agent" })).toBeEnabled());
await waitFor(() => expect(screen.getByPlaceholderText("Ask Aria…")).toBeEnabled());
const picker = screen.getByRole("combobox", { name: "Aria Agent model" });
expect(picker).toHaveValue("team-chat");
const user = userEvent.setup();
@ -1373,21 +936,21 @@ describe("Aria Agent in the gateway", () => {
]);
});
it("should keep a single inline action through review, close/reopen and one confirmed write", async () => {
it("keeps one action across route navigation and one confirmed write", async () => {
const response = deferred<Response>();
const proposed = { ...toolReply("key_create", keyArguments), content: "Here is the requested change." };
const requests = gateway([proposed, answer("Created the key."), answer("You are welcome.")], {
write: () => response.promise,
});
renderWidget();
const view = renderWidget();
await openWidget();
send("Create a key for the team");
const review = await screen.findByRole("region", { name: "Create a virtual key" });
expect(screen.getAllByRole("dialog", { name: "Aria Agent" })).toHaveLength(1);
expect(screen.getAllByRole("region", { name: "Aria Agent", exact: true })).toHaveLength(1);
expect(requests.filter((request) => request.url.endsWith("/key/generate"))).toHaveLength(0);
expect(within(review).getByText("Widget key")).toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "Close Aria Agent" }));
fireEvent.click(screen.getByRole("button", { name: "Aria Agent" }));
view.refresh(false, false, false);
view.refresh(false, false, true);
const confirm = await screen.findByRole("button", { name: "Confirm change" });
fireEvent.click(confirm);
fireEvent.click(confirm);
@ -1395,9 +958,9 @@ describe("Aria Agent in the gateway", () => {
act(() => fireEvent.click(screen.getByRole("button", { name: "Start over" })));
expect(screen.getByRole("region", { name: "Create a virtual key" })).toHaveTextContent("Applying");
expect(screen.queryByRole("button", { name: "Stop request" })).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("button", { name: "Close Aria Agent" }));
view.refresh(false, false, false);
view.refresh(false, false, true);
await act(async () => response.resolve(json({ key: NEW_KEY })));
fireEvent.click(screen.getByRole("button", { name: "Aria Agent" }));
expect(await screen.findByText("Created the key.")).toBeInTheDocument();
expect(screen.getByText(NEW_KEY)).toBeInTheDocument();
expect(screen.getByRole("button", { name: "Copy generated key" })).toBeInTheDocument();
@ -1519,21 +1082,18 @@ describe("Aria Agent in the gateway", () => {
} else {
session("proxy_admin_viewer", "first-admin", { premium_user: true }, "sk-session-first-admin-viewer");
view.refresh();
expect(screen.queryByRole("button", { name: "Aria Agent" })).not.toBeInTheDocument();
expect(screen.queryByRole("region", { name: "Ask Aria Agent", hidden: true })).not.toBeInTheDocument();
expect(await screen.findByRole("link", { name: "Aria Agent" })).toBeVisible();
session();
view.refresh();
}
if (stage === "pending") await waitFor(() => expect(original?.signal.aborted).toBe(true));
const trigger = await screen.findByRole("button", { name: "Aria Agent" });
if (trigger.getAttribute("aria-expanded") === "false") act(() => fireEvent.click(trigger));
await screen.findByRole("dialog", { name: "Aria Agent" });
await screen.findByRole("region", { name: "Aria Agent", exact: true });
expect(screen.queryByRole("tablist")).not.toBeInTheDocument();
expect(screen.queryByRole("button", { name: "Confirm change" })).not.toBeInTheDocument();
expect(screen.queryByText("Old question")).not.toBeInTheDocument();
expect(screen.queryByText("Old answer.")).not.toBeInTheDocument();
expect(screen.queryByText("Old approval")).not.toBeInTheDocument();
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue("");
expect(await screen.findByPlaceholderText("Ask Aria…")).toHaveValue("");
await selectModel();
if (stage === "pending") await act(async () => pending.resolve(toolReply("key_create", keyArguments)));
expect(screen.queryByRole("button", { name: "Confirm change" })).not.toBeInTheDocument();
@ -1577,7 +1137,6 @@ describe("Aria Agent in the gateway", () => {
const settings = { target: EXTERNAL_INFERENCE, status: 200 };
const requests = gateway([answer("Connected.")], { settings });
const { client } = renderWidget();
fireEvent.click(await screen.findByRole("button", { name: "Aria Agent" }));
const approve = await screen.findByRole("button", { name: "Use configured gateway" });
expect(requests.some((request) => request.url.startsWith(EXTERNAL_INFERENCE))).toBe(false);
fireEvent.click(approve);
@ -1596,7 +1155,7 @@ describe("Aria Agent in the gateway", () => {
it("blocks inference when settings cannot be loaded", async () => {
const requests = gateway([], { settings: { target: INFERENCE, status: 503 } });
renderWidget(undefined, true);
const home = await screen.findByRole("region", { name: "Ask Aria Agent" });
const home = await screen.findByRole("region", { name: "Aria Agent", exact: true });
expect(await within(home).findByText("Could not load gateway settings.")).toBeInTheDocument();
expect(requests.some((request) => request.url.endsWith("/chat/completions"))).toBe(false);
});
@ -1616,7 +1175,6 @@ describe("Aria Agent in the gateway", () => {
},
});
const view = renderWidget();
fireEvent.click(await screen.findByRole("button", { name: "Aria Agent" }));
fireEvent.click(await screen.findByRole("button", { name: "Use configured gateway" }));
await selectModel();
send("Check the original gateway");
@ -1626,7 +1184,6 @@ describe("Aria Agent in the gateway", () => {
switchToWorkerUrl(worker);
view.refresh();
});
fireEvent.click(await screen.findByRole("button", { name: "Aria Agent" }));
await settingsRequested.promise;
expect(screen.queryByText(EXTERNAL_INFERENCE)).not.toBeInTheDocument();
expect(await screen.findByLabelText("Loading gateway settings")).toBeInTheDocument();
@ -1666,7 +1223,7 @@ describe("Aria Agent in the gateway", () => {
expect(screen.getByPlaceholderText("Ask Aria…")).toHaveValue(draft);
expect(screen.getByRole("button", { name: "Send message" })).toBeDisabled();
expect(screen.getByRole("alert")).toHaveTextContent("8,000 characters");
expect(within(screen.getByLabelText("Aria Agent conversation")).queryByText(draft)).not.toBeInTheDocument();
expect(screen.queryByLabelText("Aria Agent conversation")).not.toBeInTheDocument();
});
it("retains the action receipt across later model and settings failures", async () => {

333
ui/litellm-dashboard/src/components/liteadmin/LiteAdmin.tsx
View file

@ -14,9 +14,10 @@ import {
import { createPortal } from "react-dom";
import { useQuery, type UseQueryResult } from "@tanstack/react-query";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { uiHref } from "@/utils/uiHref";
import { sidebarMenuButtonVariants } from "@/components/shared/Sidebar";
import { History, RotateCcw, X } from "lucide-react";
import { RotateCcw } from "lucide-react";
import { z } from "zod";
import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import { useDisableLiteAdmin } from "@/app/(dashboard)/hooks/useDisableLiteAdmin";
@ -30,40 +31,25 @@ import { SearchSelect } from "@/components/shared/SearchSelect";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
import { FieldError } from "@/components/ui/field";
import { Kbd } from "@/components/ui/kbd";
import { Skeleton } from "@/components/ui/skeleton";
import { useTerminology } from "@/contexts/TerminologyContext";
import { cn } from "@/lib/cva.config";
import { hasProxyWideSpendView, isProxyAdminRole } from "@/utils/roles";
import { getPreferredLiteAdminModel, MAX_INPUT_LENGTH, resolveInferenceTarget } from "./agent";
import { AriaAvatar } from "./AriaAvatar";
import { AriaStart } from "./AriaStart";
import { ARIA_AGENT_LABEL } from "./aria-brand";
import { LiteAdminConversation } from "./LiteAdminConversation";
import { LiteAdminHomeComposer } from "./LiteAdminHomeComposer";
import { useLiteAdmin, type ConversationEntry, type LiteAdminSession } from "./useLiteAdmin";
type ManagementSession = Omit<LiteAdminSession, "inferenceBaseUrl">;
type LiteAdminState = {
open: boolean;
toggle: () => void;
show: () => void;
access: LiteAdminSession["access"];
triggerRef: RefObject<HTMLButtonElement | null>;
homeContainer: HTMLDivElement | null;
setHomeContainer: (container: HTMLDivElement | null) => void;
usageContainer: HTMLDivElement | null;
setUsageContainer: (container: HTMLDivElement | null) => void;
pageContainer: HTMLDivElement | null;
setPageContainer: (container: HTMLDivElement | null) => void;
};
function getComposerContainer(state: LiteAdminState | null, open: boolean): HTMLDivElement | null {
if (open) return null;
return state?.usageContainer ?? state?.homeContainer ?? null;
}
const LiteAdminContext = createContext<LiteAdminState | null>(null);
function useLiteAdminSession() {
const auth = useAuthorized();
@ -78,7 +64,13 @@ function useLiteAdminSession() {
mode: "usage",
scope: hasProxyWideSpendView(auth.userRole) ? { type: "global" } : { type: "user", userId: auth.userId },
};
const session = { token: auth.token, accessToken: auth.accessToken, managementBaseUrl: getProxyBaseUrl(), access };
const session = {
userId: auth.userId,
token: auth.token,
accessToken: auth.accessToken,
managementBaseUrl: getProxyBaseUrl(),
access,
};
return {
session,
key: JSON.stringify([auth.userId, session.token, session.accessToken, session.managementBaseUrl, access]),
@ -88,69 +80,39 @@ function useLiteAdminSession() {
export function LiteAdminFrame({ children }: { children: ReactNode }) {
const configured = useLiteAdminSession();
const sessionKey = configured?.key ?? null;
const [open, setOpen] = useState(false);
const triggerRef = useRef<HTMLButtonElement>(null);
const router = useRouter();
const [started, setStarted] = useState(false);
const [homeContainer, setHomeContainer] = useState<HTMLDivElement | null>(null);
const [pageContainer, updatePageContainer] = useState<HTMLDivElement | null>(null);
const setPageContainer = useCallback((container: HTMLDivElement | null) => {
updatePageContainer(container);
if (container) {
setStarted(true);
setOpen(false);
}
}, []);
const [usageContainer, updateUsageContainer] = useState<HTMLDivElement | null>(null);
const setUsageContainer = useCallback((container: HTMLDivElement | null) => {
updateUsageContainer(container);
if (container) setStarted(true);
}, []);
const [openedSession, setOpenedSession] = useState(sessionKey);
if (openedSession !== sessionKey) {
setOpenedSession(sessionKey);
setOpen(false);
setStarted(Boolean(usageContainer || pageContainer));
setStarted(Boolean(pageContainer));
}
const toggle = () => {
setStarted(true);
setOpen((current) => !current);
};
const show = () => {
if (open || pageContainer) return;
setStarted(true);
setOpen(true);
};
const showPanel = configured?.session.access.mode === "admin" || started;
useEffect(() => {
if (sessionKey === null) return;
const onKeyDown = (event: KeyboardEvent) => {
const modifier = event.metaKey || event.ctrlKey;
const extraModifier = event.shiftKey || event.altKey;
if (event.key.toLowerCase() !== "j" || !modifier || extraModifier) return;
if (event.key.toLowerCase() !== "j" || !(event.metaKey || event.ctrlKey) || event.shiftKey || event.altKey)
return;
event.preventDefault();
if (pageContainer) {
pageContainer.querySelector<HTMLTextAreaElement>("textarea:enabled")?.focus();
return;
} else {
router.push(uiHref("aria"));
}
toggle();
};
document.addEventListener("keydown", onKeyDown);
return () => document.removeEventListener("keydown", onKeyDown);
}, [sessionKey, pageContainer]);
}, [sessionKey, pageContainer, router]);
return (
<LiteAdminContext.Provider
value={
configured
? {
open,
toggle,
show,
access: configured.session.access,
triggerRef,
homeContainer,
setHomeContainer,
usageContainer,
setUsageContainer,
pageContainer,
setPageContainer,
}
@ -158,13 +120,8 @@ export function LiteAdminFrame({ children }: { children: ReactNode }) {
}
>
{children}
{configured && showPanel && (
<AriaPopup
key={configured.key}
session={configured.session}
open={open || Boolean(pageContainer)}
close={() => setOpen(false)}
/>
{configured && started && (
<AriaSession key={configured.key} session={configured.session} open={Boolean(pageContainer)} />
)}
</LiteAdminContext.Provider>
);
@ -177,6 +134,7 @@ export function AriaSidebarLink({ active }: { active: boolean }) {
<Link
href={uiHref("aria")}
aria-current={active ? "page" : undefined}
aria-label={ARIA_AGENT_LABEL}
title={ARIA_AGENT_LABEL}
className={cn(
sidebarMenuButtonVariants({ isActive: active }),
@ -197,88 +155,18 @@ export function LiteAdminPage() {
return <div ref={setPageContainer} className="flex min-h-0 flex-1 flex-col" />;
}
export function LiteAdminHome() {
const state = useContext(LiteAdminContext);
if (!state || state.access.mode !== "admin") return null;
const { open, show, setHomeContainer } = state;
return (
<section aria-label={`Ask ${ARIA_AGENT_LABEL}`} hidden={open} className="space-y-3">
<div className="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
<div className="flex flex-wrap items-center gap-x-3 gap-y-1">
<h2 className="flex items-center gap-2 text-sm font-semibold">
<AriaAvatar size={20} />
{ARIA_AGENT_LABEL}
</h2>
<p className="border-l pl-3 text-sm text-muted-foreground">Your gateway, a little easier.</p>
</div>
<Button variant="ghost" size="sm" onClick={show} className="text-muted-foreground">
<History className="size-3.5" />
Open conversation
</Button>
</div>
<div ref={setHomeContainer} />
</section>
);
}
export default function LiteAdminTrigger() {
const state = useContext(LiteAdminContext);
if (!state) return null;
const { triggerRef, open, toggle } = state;
return (
<Button
variant="ghost"
ref={triggerRef}
aria-label={ARIA_AGENT_LABEL}
aria-keyshortcuts="Meta+J Control+J"
aria-expanded={open}
onClick={toggle}
className="gap-2 rounded-full border border-blue-200/70 bg-blue-50/80 pl-1.5 pr-3 text-blue-700 hover:bg-blue-100 hover:text-blue-800 aria-expanded:bg-blue-100 dark:border-blue-400/20 dark:bg-blue-400/10 dark:text-blue-300 dark:hover:bg-blue-400/20"
>
<AriaAvatar />
<span className="hidden lg:inline">{ARIA_AGENT_LABEL}</span>
<Kbd className="hidden lg:inline-flex">⌘J</Kbd>
</Button>
);
}
export function AriaUsageTrigger() {
const state = useContext(LiteAdminContext);
if (!state) return null;
return (
<Button
variant="outline"
size="sm"
aria-label={`Open ${ARIA_AGENT_LABEL}`}
aria-expanded={state.open}
onClick={state.show}
className="gap-1.5 border-blue-200 bg-blue-50/70 pl-1.5 text-blue-700 hover:bg-blue-100 hover:text-blue-800 dark:border-blue-400/20 dark:bg-blue-400/10 dark:text-blue-300 dark:hover:bg-blue-400/20"
>
<AriaAvatar size={24} />
{ARIA_AGENT_LABEL}
<Button variant="outline" size="sm" render={<Link href={uiHref("aria")} />} className="gap-1.5">
<AriaAvatar size={18} />
Ask Aria
</Button>
);
}
export function AriaUsageComposer() {
const state = useContext(LiteAdminContext);
const term = useTerminology();
if (!state) return null;
const { open, setUsageContainer } = state;
return (
<section aria-label="Ask Aria about usage" hidden={open} className="mb-4">
<div className="mb-2 flex flex-wrap items-center gap-x-3 gap-y-1">
<h2 className="flex items-center gap-2 text-sm font-medium">
<AriaAvatar size={24} /> {ARIA_AGENT_LABEL}
</h2>
<p className="text-sm text-muted-foreground">{term("Your AI usage assistant")}</p>
</div>
<div ref={setUsageContainer} />
</section>
);
}
function AriaPopup({ session, open, close }: { session: ManagementSession; open: boolean; close: () => void }) {
function AriaSession({ session, open }: { session: ManagementSession; open: boolean }) {
const settings = useProxySettingsQuery(session.accessToken);
const candidate =
settings.data?.LITELLM_UI_API_DOC_BASE_URL?.trim() ||
@ -295,7 +183,6 @@ function AriaPopup({ session, open, close }: { session: ManagementSession; open:
loading={settings.isPending}
retry={() => void settings.refetch()}
open={open}
close={close}
/>
);
}
@ -306,23 +193,19 @@ function Destination({
loading,
retry,
open,
close,
}: {
session: ManagementSession;
target: ReturnType<typeof resolveInferenceTarget> | null;
loading: boolean;
retry: () => void;
open: boolean;
close: () => void;
}) {
const [approved, setApproved] = useState(false);
if (target?.baseUrl && (!target.requiresConsent || approved)) {
return <LiteAdminChat session={{ ...session, inferenceBaseUrl: target.baseUrl }} open={open} close={close} />;
return <LiteAdminChat session={{ ...session, inferenceBaseUrl: target.baseUrl }} open={open} />;
}
return (
<Panel
open={open}
close={close}
composer={
<div className="p-4">
{loading && <Skeleton className="h-24" aria-label="Loading gateway settings" />}
@ -359,61 +242,34 @@ function Destination({
);
}
/** On open, focus `initialFocus` when given, else the composer when it is usable, else the panel itself. */
function Panel({
open,
close,
initialFocus,
composer,
welcome,
empty = false,
children,
}: {
open: boolean;
close: () => void;
initialFocus?: RefObject<HTMLElement | null>;
composer: ReactNode;
welcome?: ReactNode;
empty?: boolean;
children: ReactNode;
}) {
const state = useContext(LiteAdminContext);
const homeContainer = getComposerContainer(state, open);
const ref = useRef<HTMLDivElement>(null);
if (state?.pageContainer) {
return createPortal(
<section
aria-label={ARIA_AGENT_LABEL}
className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col px-2 sm:px-4"
>
{children}
{composer}
</section>,
state.pageContainer,
);
}
return (
<Dialog
open={open}
modal={false}
disablePointerDismissal
onOpenChange={(nextOpen) => {
if (!nextOpen) close();
}}
const container = useContext(LiteAdminContext)?.pageContainer;
if (!container) return null;
return createPortal(
<section
aria-label={ARIA_AGENT_LABEL}
className="mx-auto flex h-full min-h-0 w-full max-w-3xl flex-col px-2 sm:px-4"
>
<DialogContent
ref={ref}
keepMounted
showCloseButton={false}
overlayClassName="hidden"
hidden={!open}
aria-label={ARIA_AGENT_LABEL}
initialFocus={() =>
initialFocus?.current ?? ref.current?.querySelector<HTMLElement>("textarea:enabled") ?? ref.current
}
finalFocus={state?.triggerRef}
className="flex h-[min(48rem,calc(100dvh-2rem))] flex-col gap-0 overflow-hidden p-0 shadow-xl sm:max-w-4xl"
>
{children}
{homeContainer ? createPortal(composer, homeContainer) : composer}
</DialogContent>
</Dialog>
{empty ? (
welcome
) : (
<>
{children}
{composer}
</>
)}
</section>,
container,
);
}
@ -425,13 +281,17 @@ function useForegroundReviewFocus(
const lastReviewId = useRef<string | null>(null);
const pendingReviewId = entries.find((entry) => entry.kind === "action" && entry.status === "review")?.id ?? null;
useEffect(() => {
if (!foreground) {
lastReviewId.current = null;
return;
}
if (lastReviewId.current === pendingReviewId) return;
lastReviewId.current = pendingReviewId;
if (foreground && pendingReviewId) reviewRef.current?.focus({ preventScroll: true });
}, [foreground, pendingReviewId, reviewRef]);
}
function LiteAdminChat({ session, open, close }: { session: LiteAdminSession; open: boolean; close: () => void }) {
function LiteAdminChat({ session, open }: { session: LiteAdminSession; open: boolean }) {
const state = useContext(LiteAdminContext);
const chat = useLiteAdmin(session);
const [input, setInput] = useState("");
@ -462,7 +322,7 @@ function LiteAdminChat({ session, open, close }: { session: LiteAdminSession; op
}))
.sort((a, b) => a.model_group.localeCompare(b.model_group));
},
enabled: open || Boolean(state?.homeContainer || state?.usageContainer),
enabled: open,
select: (available: ModelGroup[]) =>
available.filter((item) => isModeCompatibleWithEndpoint(item.mode, EndpointType.CHAT)),
};
@ -473,20 +333,23 @@ function LiteAdminChat({ session, open, close }: { session: LiteAdminSession; op
const tooLong = input.trim().length > MAX_INPUT_LENGTH;
const hasValidInput = selectedModel && input.trim() && !tooLong;
const submitDisabled = busy || models.isError || !hasValidInput;
const questionsDisabled = busy || models.isError || !selectedModel;
const send = (message: string) => {
const invalidMessage = !message.trim() || message.trim().length > MAX_INPUT_LENGTH;
const canSend = !busy && !models.isError && !invalidMessage;
if (!canSend || !selectedModel) return;
state?.show();
void chat.send(message, selectedModel);
setInput("");
};
const selectQuestion = (question: string) => {
setInput(question);
state?.pageContainer?.querySelector<HTMLTextAreaElement>("textarea:enabled")?.focus();
};
const startOver = () => {
if (chat.phase === "applying") return;
chat.reset();
setInput("");
};
const homeContainer = getComposerContainer(state, open);
const composerProps = {
value: input,
onChange: setInput,
@ -502,13 +365,22 @@ function LiteAdminChat({ session, open, close }: { session: LiteAdminSession; op
models={models}
model={selectedModel}
onModelChange={setModel}
home={Boolean(homeContainer)}
usage={Boolean(state?.usageContainer)}
tooLong={tooLong}
/>
);
return (
<Panel open={open} close={close} initialFocus={reviewRef} composer={composer}>
<Panel
composer={composer}
empty={chat.entries.length === 0}
welcome={
<AriaStart
composer={composer}
onQuestion={selectQuestion}
disabled={questionsDisabled}
access={session.access}
/>
}
>
<PanelHeader>
{(chat.entries.length > 0 || input.length > 0) && (
<Button
@ -526,12 +398,9 @@ function LiteAdminChat({ session, open, close }: { session: LiteAdminSession; op
<LiteAdminConversation
entries={chat.entries}
thinking={chat.phase === "thinking"}
readOnly={session.access.mode === "usage"}
open={open}
reviewRef={reviewRef}
onAnswer={chat.answer}
onQuestion={send}
questionsDisabled={busy || models.isError || !selectedModel}
/>
</Panel>
);
@ -541,40 +410,32 @@ function LiteAdminComposer({
models,
model,
onModelChange,
home,
usage,
tooLong,
...props
}: Omit<ComponentProps<typeof LiteAdminHomeComposer>, "modelPicker" | "usage"> & {
}: Omit<ComponentProps<typeof ChatComposer>, "tools" | "placeholder"> & {
models: UseQueryResult<ModelGroup[]>;
model: string | null;
onModelChange: (value: string | null) => void;
home: boolean;
usage: boolean;
tooLong: boolean;
}) {
return (
<div className={cn("space-y-3", !home && "px-4 pt-2 pb-5 sm:px-6")}>
<div className="space-y-3 px-4 pt-2 pb-5 sm:px-6">
<ModelStatus models={models} />
{tooLong && <FieldError>Keep your message within {MAX_INPUT_LENGTH.toLocaleString()} characters.</FieldError>}
{home ? (
<LiteAdminHomeComposer
{...props}
usage={usage}
modelPicker={
<ModelPicker models={models} value={model} onChange={onModelChange} disabled={props.isLoading} compact />
}
/>
) : (
<ChatComposer
{...props}
placeholder="Ask Aria…"
className="[&_[data-slot=input-group]]:min-h-0 [&_[data-slot=input-group]]:rounded-xl [&_[data-slot=input-group]]:shadow-none [&_[data-slot=input-group]]:ring-0 dark:[&_[data-slot=input-group]]:bg-background [&_textarea]:min-h-12"
tools={
<ModelPicker models={models} value={model} onChange={onModelChange} disabled={props.isLoading} compact />
}
/>
)}
<ChatComposer
{...props}
placeholder="Ask Aria…"
className="[&>div>[data-slot=input-group]]:min-h-0 [&>div>[data-slot=input-group]]:rounded-2xl [&>div>[data-slot=input-group]]:border-foreground/15 [&>div>[data-slot=input-group]]:shadow-none [&>div>[data-slot=input-group]]:ring-0 dark:[&>div>[data-slot=input-group]]:bg-foreground/[0.03] [&_textarea]:min-h-20 [&_textarea]:px-5 [&_textarea]:pt-5 [&_textarea]:text-base [&_textarea]:placeholder:text-muted-foreground"
tools={
<ModelPicker
models={models}
value={model}
onChange={onModelChange}
disabled={Boolean(props.isLoading)}
compact
/>
}
/>
</div>
);
}
@ -623,29 +484,5 @@ function ModelStatus({ models }: { models: UseQueryResult<ModelGroup[]> }) {
}
function PanelHeader({ children }: { children?: ReactNode }) {
const state = useContext(LiteAdminContext);
const term = useTerminology();
if (state?.pageContainer)
return <div className="flex h-12 shrink-0 items-center justify-end px-4 sm:px-6">{children}</div>;
return (
<div className="flex items-start justify-between gap-3 border-b p-4">
<div className="flex flex-col gap-1 text-sm">
<DialogTitle className="flex items-center gap-2 font-semibold">
<AriaAvatar size={20} />
{ARIA_AGENT_LABEL}
</DialogTitle>
<DialogDescription>
{state?.access.mode === "usage"
? term("Your AI assistant for usage and spend.")
: "Ask about your gateway. Review changes in chat."}
</DialogDescription>
</div>
<div className="flex shrink-0">
{children}
<DialogClose render={<Button variant="ghost" size="icon-sm" aria-label={`Close ${ARIA_AGENT_LABEL}`} />}>
<X className="size-4" />
</DialogClose>
</div>
</div>
);
return <div className="flex h-12 shrink-0 items-center justify-end px-4 sm:px-6">{children}</div>;
}

42
ui/litellm-dashboard/src/components/liteadmin/LiteAdminConversation.tsx
View file

@ -21,33 +21,15 @@ const ACTION_STATUS: Record<ActionEntry["status"], string> = {
unknown: "Check result",
};
const SUGGESTED_QUESTIONS = [
"How much have I spent this week?",
"Which models are costing the most?",
"How can I reduce my spend?",
];
interface ConversationProps {
entries: ConversationEntry[];
thinking: boolean;
readOnly?: boolean;
open: boolean;
reviewRef: RefObject<HTMLDivElement | null>;
onAnswer: (id: string, approved: boolean) => void;
onQuestion: (question: string) => void;
questionsDisabled: boolean;
}
export function LiteAdminConversation({
entries,
thinking,
open,
readOnly = false,
reviewRef,
onAnswer,
onQuestion,
questionsDisabled,
}: ConversationProps) {
export function LiteAdminConversation({ entries, thinking, open, reviewRef, onAnswer }: ConversationProps) {
return (
<MessageScroller.Provider autoScroll>
<MessageScroller.Root className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
@ -90,28 +72,6 @@ export function LiteAdminConversation({
)}
</MessageScroller.Content>
</MessageScroller.Viewport>
{entries.length === 0 && (
<div className="absolute inset-0 flex items-center justify-center overflow-y-auto px-4 py-8 sm:px-6">
<div className="w-full max-w-lg space-y-6">
<p className="text-xl font-medium tracking-tight">
{readOnly ? "Understand your usage." : "What would you like to do?"}
</p>
<div className="flex flex-col items-start gap-1" aria-label="Suggested questions">
{SUGGESTED_QUESTIONS.map((question) => (
<Button
key={question}
variant="ghost"
className="h-auto min-h-10 justify-start whitespace-normal px-0 py-2 text-left font-normal text-muted-foreground hover:bg-transparent hover:text-foreground"
disabled={questionsDisabled}
onClick={() => onQuestion(question)}
>
{question}
</Button>
))}
</div>
</div>
</div>
)}
<MessageScroller.Button
aria-label="Jump to latest"
className="absolute bottom-3 left-1/2 -translate-x-1/2 rounded-full shadow-sm data-[active=false]:pointer-events-none data-[active=false]:opacity-0"

100
ui/litellm-dashboard/src/components/liteadmin/LiteAdminHomeComposer.tsx
View file

@ -1,100 +0,0 @@
import { useRef, type ReactNode } from "react";
import { ArrowUp, BarChart3, Box, CreditCard, KeyRound, Square } from "lucide-react";
import { Button } from "@/components/ui/button";
import { InputGroup, InputGroupTextarea } from "@/components/ui/input-group";
import { ARIA_AGENT_LABEL } from "./aria-brand";
const suggestions = [
{ label: "Create a key", icon: KeyRound },
{ label: "Add a model", icon: Box },
{ label: "Set a budget", icon: CreditCard },
];
const usageSuggestions = [
{ label: "Summarize my usage", icon: BarChart3 },
{ label: "Compare models", icon: Box },
{ label: "Explain my costs", icon: CreditCard },
];
export function LiteAdminHomeComposer({
value,
onChange,
onSubmit,
onCancel,
disabled,
isLoading,
submitDisabled,
modelPicker,
usage = false,
}: {
value: string;
onChange: (value: string) => void;
onSubmit: () => void;
onCancel?: () => void;
disabled: boolean;
isLoading: boolean;
submitDisabled: boolean;
modelPicker: ReactNode;
usage?: boolean;
}) {
const inputRef = useRef<HTMLTextAreaElement>(null);
return (
<InputGroup className="h-auto flex-col rounded-xl border-border bg-card shadow-xs">
<InputGroupTextarea
ref={inputRef}
value={value}
onChange={(event) => onChange(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
event.preventDefault();
if (!submitDisabled && !isLoading) onSubmit();
}
}}
placeholder={usage ? "Ask Aria about spend, models, or usage…" : "What would you like to do?"}
aria-label={`Message ${ARIA_AGENT_LABEL}`}
disabled={disabled}
rows={usage ? 1 : 2}
className={`${usage ? "min-h-16" : "min-h-24"} max-h-48 w-full rounded-t-xl px-5 pt-5 pb-2 text-sm placeholder:text-muted-foreground [field-sizing:content]`}
/>
<div className="flex w-full flex-wrap items-center justify-between gap-3 px-4 pb-4">
<div className="flex flex-wrap gap-2">
{(usage ? usageSuggestions : suggestions).map(({ label, icon: Icon }) => (
<Button
key={label}
type="button"
variant="outline"
size="sm"
disabled={disabled}
className="gap-2 bg-muted/30 font-normal text-muted-foreground shadow-none"
onClick={() => {
onChange(label);
inputRef.current?.focus();
}}
>
<Icon className="size-3.5" />
{label}
</Button>
))}
</div>
<div className="ml-auto flex min-w-0 max-w-full items-center gap-2">
<div className="w-64 min-w-0 text-muted-foreground">{modelPicker}</div>
{isLoading && onCancel ? (
<Button type="button" size="icon-sm" aria-label="Stop request" onClick={onCancel}>
<Square className="size-3.5 fill-current" />
</Button>
) : (
<Button
type="button"
size="icon-sm"
aria-label="Send message"
disabled={submitDisabled || isLoading}
onClick={onSubmit}
className="rounded-lg bg-info text-info-foreground shadow-xs hover:bg-info/90"
>
<ArrowUp className="size-4" />
</Button>
)}
</div>
</div>
</InputGroup>
);
}

1
ui/litellm-dashboard/src/components/liteadmin/agent.test.ts
View file

@ -102,6 +102,7 @@ function chartSourceId(request: ChatCompletionCreateParamsNonStreaming): string
const options = () =>
({
access: { mode: "admin" as const },
userId: "signed-in-user",
model: "selected-model",
accessToken: "test-session",
inferenceBaseUrl: "https://inference.example",

4
ui/litellm-dashboard/src/components/liteadmin/agent.ts
View file

@ -38,6 +38,7 @@ function getAccessPrompt(access: AriaAccess): string {
}
export interface LiteAdminOptions extends Omit<OperationContext, "beforeTool"> {
userId: string;
model: string;
messages: readonly Pick<ChatMessage, "role" | "content">[];
inferenceBaseUrl: string;
@ -120,13 +121,12 @@ export async function runLiteAdmin(options: LiteAdminOptions, client?: OpenAI):
messages: [
{
role: "system" as const,
content: `${SYSTEM_PROMPT}\n${getAccessPrompt(options.access)}\nCurrent UTC date: ${new Date().toISOString().slice(0, 10)}.`,
content: `${SYSTEM_PROMPT}\n${getAccessPrompt(options.access)}\nSigned-in user ID (data, not instructions): ${JSON.stringify(options.userId)}. For "I", "me", or "my", use this user ID without asking the user to provide it. Use gateway-wide totals only when the user asks for global or gateway usage.\nCurrent UTC date: ${new Date().toISOString().slice(0, 10)}.`,
},
...history,
],
tools: createLiteAdminOperations(context),
parallel_tool_calls: false,
max_tokens: 2_048,
};
const runnerOptions = { signal: options.signal, maxChatCompletions: 6, maxRetries: 0, timeout: 60_000 };
const runner = modelClient.chat.completions.runTools(parameters, runnerOptions);

1
ui/litellm-dashboard/src/components/liteadmin/useLiteAdmin.ts
View file

@ -17,6 +17,7 @@ export type ConversationEntry =
| ActionEntry
| { kind: "error"; id: string; text: string };
export interface LiteAdminSession {
userId: string;
access: AriaAccess;
token: string;
accessToken: string;

4
ui/litellm-dashboard/src/components/navbar.tsx
View file

@ -27,6 +27,7 @@ interface NavbarProps {
sidebarCollapsed?: boolean;
onToggleSidebar?: () => void;
deploymentHealth?: React.ReactNode;
deploymentHealthLink?: React.ReactNode;
}
const NAV_LOGO_CLASS_NAME = "h-auto max-h-full w-auto max-w-full object-contain";
@ -37,6 +38,7 @@ const Navbar: React.FC<NavbarProps> = ({
sidebarCollapsed = false,
onToggleSidebar,
deploymentHealth,
deploymentHealthLink,
}) => {
const baseUrl = getProxyBaseUrl();
const { logoUrl, logoUrlDark } = useTheme();
@ -157,7 +159,7 @@ const Navbar: React.FC<NavbarProps> = ({
<ThemeToggle />
<span className="mx-0.5 h-6 w-px shrink-0 bg-border" aria-hidden />
{deploymentHealth}
<NotificationsBell accessToken={accessToken} />
<NotificationsBell accessToken={accessToken} deploymentHealthLink={deploymentHealthLink} />
<span className="mx-0.5 h-6 w-px shrink-0 bg-border" aria-hidden />
<UserDropdown onLogout={handleLogout} />
</div>