From 63bae79ce8dbb920e17e5d5be80cd7c16c095a9d Mon Sep 17 00:00:00 2001 From: moe-berri Date: Wed, 4 Nov 2026 15:28:20 +0800 Subject: [PATCH] refactor(ui): make Aria a single workspace and clarify dashboard controls --- .../_components/HomePage.integration.test.tsx | 8 +- .../(dashboard)/home/_components/HomePage.tsx | 3 - .../src/app/(dashboard)/layout.tsx | 3 + .../components/UsagePageView.test.tsx | 15 +- .../_components/components/UsagePageView.tsx | 3 +- .../src/components/DashboardHeader.tsx | 13 +- .../DeploymentHealth.integration.test.tsx | 39 +- .../DeploymentHealth/DeploymentHealth.tsx | 22 + .../components/Navbar/DashboardResources.tsx | 46 +- .../NotificationsBell/NotificationsBell.tsx | 41 +- .../SidebarAccountMenu/SidebarAccountMenu.tsx | 5 - .../src/components/liteadmin/AriaStart.tsx | 54 ++ .../liteadmin/LiteAdmin.integration.test.tsx | 629 +++--------------- .../src/components/liteadmin/LiteAdmin.tsx | 333 +++------- .../liteadmin/LiteAdminConversation.tsx | 42 +- .../liteadmin/LiteAdminHomeComposer.tsx | 100 --- .../src/components/liteadmin/agent.test.ts | 1 + .../src/components/liteadmin/agent.ts | 4 +- .../src/components/liteadmin/useLiteAdmin.ts | 1 + .../src/components/navbar.tsx | 4 +- 20 files changed, 373 insertions(+), 993 deletions(-) create mode 100644 ui/litellm-dashboard/src/components/liteadmin/AriaStart.tsx delete mode 100644 ui/litellm-dashboard/src/components/liteadmin/LiteAdminHomeComposer.tsx diff --git a/ui/litellm-dashboard/src/app/(dashboard)/home/_components/HomePage.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/home/_components/HomePage.integration.test.tsx index 1891a580088..c0fab36b5e4 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/home/_components/HomePage.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/home/_components/HomePage.integration.test.tsx @@ -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( @@ -152,9 +153,8 @@ describe("HomePage", () => { , ); - 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(); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/home/_components/HomePage.tsx b/ui/litellm-dashboard/src/app/(dashboard)/home/_components/HomePage.tsx index b0c63bb5dc0..1faa9c1d802 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/home/_components/HomePage.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/home/_components/HomePage.tsx @@ -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() { )} - -
{usage.failed ? (
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx index b9b7b00956c..9a94e225932 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/layout.tsx @@ -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={} + deploymentHealthLink={} /> @@ -203,6 +205,7 @@ function DashboardShell({ children }: { children: React.ReactNode }) { } deploymentHealth={} + deploymentHealthLink={} /> diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx index f7ffd6d52cf..18ebee16745 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.test.tsx @@ -248,8 +248,7 @@ vi.mock("@/components/EntityUsageExport", () => ({ })); vi.mock("@/components/liteadmin/LiteAdmin", () => ({ - AriaUsageTrigger: () => , - AriaUsageComposer: () =>
Shared Aria composer
, + AriaUsageTrigger: () => Ask Aria, })); 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(); 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(); 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(); }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx index 7c891754195..78159778d87 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/usage/_components/components/UsagePageView.tsx @@ -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 = ({ teams, organizations, teamsLoadin
- {aggregatedFailed && ( )} diff --git a/ui/litellm-dashboard/src/components/DashboardHeader.tsx b/ui/litellm-dashboard/src/components/DashboardHeader.tsx index 974829889eb..dd9b9be42ec 100644 --- a/ui/litellm-dashboard/src/components/DashboardHeader.tsx +++ b/ui/litellm-dashboard/src/components/DashboardHeader.tsx @@ -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({
- {isControlPlane && selectedWorker !== null && } - + {showWorkerSelector && } + + {deploymentHealth} - +
diff --git a/ui/litellm-dashboard/src/components/DeploymentHealth/DeploymentHealth.integration.test.tsx b/ui/litellm-dashboard/src/components/DeploymentHealth/DeploymentHealth.integration.test.tsx index 87c34165fd9..d2d2a7ec914 100644 --- a/ui/litellm-dashboard/src/components/DeploymentHealth/DeploymentHealth.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/DeploymentHealth/DeploymentHealth.integration.test.tsx @@ -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 = () => { <>
+ } + />
@@ -97,7 +108,13 @@ const renderHealth = (userRole = "proxy_admin") => { }; const openPanel = async (user: ReturnType) => { - 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([ { diff --git a/ui/litellm-dashboard/src/components/DeploymentHealth/DeploymentHealth.tsx b/ui/litellm-dashboard/src/components/DeploymentHealth/DeploymentHealth.tsx index edfe4a06494..43311ce2508 100644 --- a/ui/litellm-dashboard/src/components/DeploymentHealth/DeploymentHealth.tsx +++ b/ui/litellm-dashboard/src/components/DeploymentHealth/DeploymentHealth.tsx @@ -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 ( + + } + > + + Deployment health + + ); +}; + export const DeploymentHealthBanner = ({ handle }: { handle: DeploymentHealthHandle }) => { const { canView } = useDeploymentHealthAccess(); const { data } = useDeploymentWarnings(); diff --git a/ui/litellm-dashboard/src/components/Navbar/DashboardResources.tsx b/ui/litellm-dashboard/src/components/Navbar/DashboardResources.tsx index b5784e0b204..d615b496f2b 100644 --- a/ui/litellm-dashboard/src/components/Navbar/DashboardResources.tsx +++ b/ui/litellm-dashboard/src/components/Navbar/DashboardResources.tsx @@ -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 && ( -
+
{isPending &&

Loading posts…

} {isError && (
)} - +
+ + {children} +
); } diff --git a/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx b/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx index ec2407b7986..409a93edfcb 100644 --- a/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx +++ b/ui/litellm-dashboard/src/components/Navbar/NotificationsBell/NotificationsBell.tsx @@ -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

{announcement.title}

{announcement.description}

-
+
{announcement.linkLabel} + {read ? null : ( - )} @@ -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 = ({ currentVersion, latestRelease }) => { +export const NotificationsBellView: React.FC = ({ + 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 = ({ cu aria-label="Notifications" className="w-96 max-w-[calc(100vw-1rem)] gap-0 overflow-hidden p-0" > - What's new + What's new
{announcements.map((announcement, index) => ( @@ -125,15 +139,24 @@ export const NotificationsBellView: React.FC = ({ cu ))}
- + {deploymentHealthLink}
); }; -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 ; + return ( + + ); }; diff --git a/ui/litellm-dashboard/src/components/SidebarAccountMenu/SidebarAccountMenu.tsx b/ui/litellm-dashboard/src/components/SidebarAccountMenu/SidebarAccountMenu.tsx index e21054020fa..173e3b3f07e 100644 --- a/ui/litellm-dashboard/src/components/SidebarAccountMenu/SidebarAccountMenu.tsx +++ b/ui/litellm-dashboard/src/components/SidebarAccountMenu/SidebarAccountMenu.tsx @@ -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 = ({ onLogout, colla
-
- Appearance - -
{toggles.map((toggle) => (
{toggle.label} diff --git a/ui/litellm-dashboard/src/components/liteadmin/AriaStart.tsx b/ui/litellm-dashboard/src/components/liteadmin/AriaStart.tsx new file mode 100644 index 00000000000..4769911ec00 --- /dev/null +++ b/ui/litellm-dashboard/src/components/liteadmin/AriaStart.tsx @@ -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 ( +
+
+
+

+ What would you like to know? +

+

{description}

+
+
{composer}
+
+ {QUESTIONS.map(({ label, question, Icon }) => ( + + ))} +
+
+
+ ); +} diff --git a/ui/litellm-dashboard/src/components/liteadmin/LiteAdmin.integration.test.tsx b/ui/litellm-dashboard/src/components/liteadmin/LiteAdmin.integration.test.tsx index 40bed03cb7a..93571451490 100644 --- a/ui/litellm-dashboard/src/components/liteadmin/LiteAdmin.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/liteadmin/LiteAdmin.integration.test.tsx @@ -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(); 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) => ( @@ -128,13 +121,10 @@ function renderWidget( {Menu && undefined} />} - {home && } - {page && } {usage && ( <> - )} @@ -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 ; - } - 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(); - 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(); - 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(); 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 () => { diff --git a/ui/litellm-dashboard/src/components/liteadmin/LiteAdmin.tsx b/ui/litellm-dashboard/src/components/liteadmin/LiteAdmin.tsx index 217a2b0b0e4..d6fa3a3f762 100644 --- a/ui/litellm-dashboard/src/components/liteadmin/LiteAdmin.tsx +++ b/ui/litellm-dashboard/src/components/liteadmin/LiteAdmin.tsx @@ -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; type LiteAdminState = { - open: boolean; - toggle: () => void; - show: () => void; access: LiteAdminSession["access"]; - triggerRef: RefObject; - 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(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(null); + const router = useRouter(); const [started, setStarted] = useState(false); - const [homeContainer, setHomeContainer] = useState(null); const [pageContainer, updatePageContainer] = useState(null); const setPageContainer = useCallback((container: HTMLDivElement | null) => { updatePageContainer(container); - if (container) { - setStarted(true); - setOpen(false); - } - }, []); - const [usageContainer, updateUsageContainer] = useState(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("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 ( {children} - {configured && showPanel && ( - setOpen(false)} - /> + {configured && started && ( + )} ); @@ -177,6 +134,7 @@ export function AriaSidebarLink({ active }: { active: boolean }) { ; } -export function LiteAdminHome() { - const state = useContext(LiteAdminContext); - if (!state || state.access.mode !== "admin") return null; - const { open, show, setHomeContainer } = state; - return ( - - ); -} - -export default function LiteAdminTrigger() { - const state = useContext(LiteAdminContext); - if (!state) return null; - const { triggerRef, open, toggle } = state; - return ( - - ); -} - export function AriaUsageTrigger() { const state = useContext(LiteAdminContext); if (!state) return null; return ( - ); } -export function AriaUsageComposer() { - const state = useContext(LiteAdminContext); - const term = useTerminology(); - if (!state) return null; - const { open, setUsageContainer } = state; - return ( - - ); -} - -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 | null; loading: boolean; retry: () => void; open: boolean; - close: () => void; }) { const [approved, setApproved] = useState(false); if (target?.baseUrl && (!target.requiresConsent || approved)) { - return ; + return ; } return ( {loading && } @@ -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; composer: ReactNode; + welcome?: ReactNode; + empty?: boolean; children: ReactNode; }) { - const state = useContext(LiteAdminContext); - const homeContainer = getComposerContainer(state, open); - const ref = useRef(null); - if (state?.pageContainer) { - return createPortal( -
- {children} - {composer} -
, - state.pageContainer, - ); - } - return ( - { - if (!nextOpen) close(); - }} + const container = useContext(LiteAdminContext)?.pageContainer; + if (!container) return null; + return createPortal( +
- -
+ {empty ? ( + welcome + ) : ( + <> + {children} + {composer} + + )} +
, + container, ); } @@ -425,13 +281,17 @@ function useForegroundReviewFocus( const lastReviewId = useRef(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("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 ( - + + } + > {(chat.entries.length > 0 || input.length > 0) && ( - ))} - - - - )} void; - onSubmit: () => void; - onCancel?: () => void; - disabled: boolean; - isLoading: boolean; - submitDisabled: boolean; - modelPicker: ReactNode; - usage?: boolean; -}) { - const inputRef = useRef(null); - return ( - - 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]`} - /> -
-
- {(usage ? usageSuggestions : suggestions).map(({ label, icon: Icon }) => ( - - ))} -
-
-
{modelPicker}
- {isLoading && onCancel ? ( - - ) : ( - - )} -
-
- - ); -} diff --git a/ui/litellm-dashboard/src/components/liteadmin/agent.test.ts b/ui/litellm-dashboard/src/components/liteadmin/agent.test.ts index 93512882581..e9fae756427 100644 --- a/ui/litellm-dashboard/src/components/liteadmin/agent.test.ts +++ b/ui/litellm-dashboard/src/components/liteadmin/agent.test.ts @@ -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", diff --git a/ui/litellm-dashboard/src/components/liteadmin/agent.ts b/ui/litellm-dashboard/src/components/liteadmin/agent.ts index 24fcefd3aa6..4b9b7df3109 100644 --- a/ui/litellm-dashboard/src/components/liteadmin/agent.ts +++ b/ui/litellm-dashboard/src/components/liteadmin/agent.ts @@ -38,6 +38,7 @@ function getAccessPrompt(access: AriaAccess): string { } export interface LiteAdminOptions extends Omit { + userId: string; model: string; messages: readonly Pick[]; 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); diff --git a/ui/litellm-dashboard/src/components/liteadmin/useLiteAdmin.ts b/ui/litellm-dashboard/src/components/liteadmin/useLiteAdmin.ts index 6c6b385a164..0bbd62f2241 100644 --- a/ui/litellm-dashboard/src/components/liteadmin/useLiteAdmin.ts +++ b/ui/litellm-dashboard/src/components/liteadmin/useLiteAdmin.ts @@ -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; diff --git a/ui/litellm-dashboard/src/components/navbar.tsx b/ui/litellm-dashboard/src/components/navbar.tsx index c3f31644c8a..c475c73c40a 100644 --- a/ui/litellm-dashboard/src/components/navbar.tsx +++ b/ui/litellm-dashboard/src/components/navbar.tsx @@ -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 = ({ sidebarCollapsed = false, onToggleSidebar, deploymentHealth, + deploymentHealthLink, }) => { const baseUrl = getProxyBaseUrl(); const { logoUrl, logoUrlDark } = useTheme(); @@ -157,7 +159,7 @@ const Navbar: React.FC = ({ {deploymentHealth} - +