From e2276ac2b94da32d885b7c2a54c6d183fbb6ab0c Mon Sep 17 00:00:00 2001
From: "moyai-devin-berriai[bot]"
<336287033+moyai-devin-berriai[bot]@users.noreply.github.com>
Date: Fri, 9 Oct 2026 18:13:21 -0700
Subject: [PATCH] feat(ui): let admins find, call, and test decision models
from the Admin UI (#45654)
* feat(ui): announce decision model support in Models + Endpoints
* feat(ui): make decision models findable, callable, and testable from the Admin UI
Add Model provider search now matches decision model names and shows a note on where to call a decision model. The banner links to the docs and opens Add Model. The System One playground defaults to /v1/systemone with a picker of the proxy's decision models, and the model hub shows a /v1/systemone usage example for evaluation models.
* fix(ui): keep the admin signed in when a typed virtual key cannot list decision models
The System One playground looked up a typed virtual key's decision models through
the dashboard's shared request client, so an expired key signed the admin out, and
typing a key by hand sent one lookup per keystroke. The lookup now uses the same
client as Send, against the same proxy, and waits for typing to stop
* fix(ui): hide decision model Playground links from view-only sessions
A proxy admin viewer cannot open the Playground, so the Models + Endpoints
decision models banner and the AI Hub's Try it in the Playground link sent
them to an Access Denied page. Hide both for view-only sessions.
* fix(ui): send the AI Hub decision example's key in the proxy's configured header
A proxy with litellm_key_header_name set reads keys only from that header,
so the example's hardcoded Authorization header was rejected. Use the header
name the dashboard already reads from the session.
* fix(ui): stop the decision model notice from ruling out /chat/completions for dual-mode models
* fix(ui): point only users who can add models at Add Model in the decision models banner
---------
Co-authored-by: moyai-devin-berriai[bot] <336287033+moyai-devin-berriai[bot]@users.noreply.github.com>
Co-authored-by: mateo-berri <277851410+mateo-berri@users.noreply.github.com>
---
.../app/(dashboard)/model-hub-table/page.tsx | 12 +-
.../page.integration.test.tsx | 2 +-
.../models-and-endpoints/page.test.tsx | 33 ++++-
.../(dashboard)/models-and-endpoints/page.tsx | 6 +-
.../panels/AddModelPanel.integration.test.tsx | 67 ++++++++-
.../panels/AddModelPanel.tsx | 3 +
.../SystemOneUI.integration.test.tsx | 138 +++++++++++++++++-
.../components/systemOneUI/SystemOneUI.tsx | 86 ++++++++---
.../components/systemOneUI/lib/example.ts | 7 +-
.../systemOneUI/lib/payloadModel.test.ts | 41 ++++++
.../systemOneUI/lib/payloadModel.ts | 27 ++++
.../systemOneUI/lib/validatePayload.ts | 2 +-
.../systemOneUI/useDecisionModels.ts | 32 ++++
.../playground/llm_calls/system_one.test.ts | 45 +++++-
.../playground/llm_calls/system_one.ts | 52 +++++--
.../src/app/model_hub_table/page.tsx | 10 +-
.../components/AIHub/ModelHubTable.test.tsx | 101 ++++++++++++-
.../src/components/AIHub/ModelHubTable.tsx | 55 ++++---
.../AIHub/modelUsageExample.test.ts | 40 +++++
.../src/components/AIHub/modelUsageExample.ts | 47 ++++++
.../AddModelForm.integration.test.tsx | 2 +
.../src/components/add_model/AddModelForm.tsx | 13 +-
.../add_model/DecisionModelNote.tsx | 54 +++++++
.../DecisionModelsBanner.integration.test.tsx | 71 +++++++++
.../molecules/DecisionModelsBanner.tsx | 78 ++++++++++
...cost_optimization_feedback_banner.test.tsx | 33 -----
.../cost_optimization_feedback_banner.tsx | 58 --------
.../src/lib/decisionModels.test.ts | 108 ++++++++++++++
.../src/lib/decisionModels.ts | 74 ++++++++++
29 files changed, 1135 insertions(+), 162 deletions(-)
create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/payloadModel.test.ts
create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/lib/payloadModel.ts
create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/playground/components/systemOneUI/useDecisionModels.ts
create mode 100644 ui/litellm-dashboard/src/components/AIHub/modelUsageExample.test.ts
create mode 100644 ui/litellm-dashboard/src/components/AIHub/modelUsageExample.ts
create mode 100644 ui/litellm-dashboard/src/components/add_model/DecisionModelNote.tsx
create mode 100644 ui/litellm-dashboard/src/components/molecules/DecisionModelsBanner.integration.test.tsx
create mode 100644 ui/litellm-dashboard/src/components/molecules/DecisionModelsBanner.tsx
delete mode 100644 ui/litellm-dashboard/src/components/molecules/cost_optimization_feedback_banner.test.tsx
delete mode 100644 ui/litellm-dashboard/src/components/molecules/cost_optimization_feedback_banner.tsx
create mode 100644 ui/litellm-dashboard/src/lib/decisionModels.test.ts
create mode 100644 ui/litellm-dashboard/src/lib/decisionModels.ts
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.tsx b/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.tsx
index 7327d332fbd..c9eb8762ed2 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/model-hub-table/page.tsx
@@ -6,9 +6,17 @@ import useAuthorized from "@/app/(dashboard)/hooks/useAuthorized";
import { isAdminRole } from "@/utils/roles";
export default function ModelHubTablePage() {
- const { accessToken, userRole, premiumUser } = useAuthorized();
+ const { accessToken, userRole, premiumUser, isViewOnly } = useAuthorized();
if (!isAdminRole(userRole)) {
return ;
}
- return ;
+ return (
+
+ );
}
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.integration.test.tsx
index 86b5659d570..fa62f43c2d1 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.integration.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/models-and-endpoints/page.integration.test.tsx
@@ -16,7 +16,7 @@ vi.mock("./panels/ModelRetrySettingsPanel", () => ({ default: () =>
+
+
+ );
+}
diff --git a/ui/litellm-dashboard/src/components/molecules/DecisionModelsBanner.integration.test.tsx b/ui/litellm-dashboard/src/components/molecules/DecisionModelsBanner.integration.test.tsx
new file mode 100644
index 00000000000..b7d81a09f4e
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/molecules/DecisionModelsBanner.integration.test.tsx
@@ -0,0 +1,71 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import DecisionModelsBanner from "./DecisionModelsBanner";
+
+const STORAGE_KEY = "hideDecisionModelsBanner";
+
+describe("DecisionModelsBanner", () => {
+ beforeEach(() => {
+ localStorage.removeItem(STORAGE_KEY);
+ localStorage.removeItem("hideCostOptimizationFeedbackBanner");
+ });
+
+ it("links directly to the System One playground", () => {
+ render();
+ const link = screen.getByRole("link", { name: "Try decision models" });
+ expect(link).toHaveAttribute("href", "/ui/playground?tab=system-one");
+ });
+
+ it("links to the docs on how to call decision models", () => {
+ render();
+ expect(screen.getByRole("link", { name: "How to call them" })).toHaveAttribute(
+ "href",
+ "https://docs.litellm.ai/docs/decisions",
+ );
+ });
+
+ it("offers Add a decision model only when the page can add models, and calls back on click", () => {
+ const onAddModel = vi.fn();
+ const { rerender } = render();
+ expect(screen.queryByRole("button", { name: "Add a decision model" })).not.toBeInTheDocument();
+
+ rerender();
+ fireEvent.click(screen.getByRole("button", { name: "Add a decision model" }));
+
+ expect(onAddModel).toHaveBeenCalledTimes(1);
+ });
+
+ it("points only users who can add models at Add Model", () => {
+ const { rerender } = render();
+ expect(screen.getByRole("paragraph")).not.toHaveTextContent("Add Model");
+ expect(screen.getByRole("paragraph")).toHaveTextContent("Call them at /v1/decisions or /v1/systemone");
+
+ rerender();
+
+ expect(screen.getByRole("paragraph")).toHaveTextContent(
+ "Search decision in Add Model to find them. Call them at /v1/decisions",
+ );
+ });
+
+ it("shows the announcement even if the old feedback banner was dismissed", () => {
+ localStorage.setItem("hideCostOptimizationFeedbackBanner", "true");
+ render();
+ expect(screen.getByText("Decision models are now supported")).toBeInTheDocument();
+ });
+
+ it("hides itself and persists the dismissal when the dismiss button is clicked", () => {
+ render();
+ expect(screen.getByText("Decision models are now supported")).toBeInTheDocument();
+
+ fireEvent.click(screen.getByLabelText("Dismiss banner"));
+
+ expect(screen.queryByText("Decision models are now supported")).not.toBeInTheDocument();
+ expect(localStorage.getItem(STORAGE_KEY)).toBe("true");
+ });
+
+ it("stays dismissed on remount once persisted", () => {
+ localStorage.setItem(STORAGE_KEY, "true");
+ render();
+ expect(screen.queryByText("Decision models are now supported")).not.toBeInTheDocument();
+ });
+});
diff --git a/ui/litellm-dashboard/src/components/molecules/DecisionModelsBanner.tsx b/ui/litellm-dashboard/src/components/molecules/DecisionModelsBanner.tsx
new file mode 100644
index 00000000000..5dbf5191198
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/molecules/DecisionModelsBanner.tsx
@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { ArrowRight, Sparkles, X } from "lucide-react";
+
+import { DECISIONS_DOCS_URL, SYSTEM_ONE_PLAYGROUND_ROUTE } from "@/lib/decisionModels";
+import { uiHref } from "@/utils/uiHref";
+
+import { Button } from "@/components/ui/button";
+
+const STORAGE_KEY = "hideDecisionModelsBanner";
+
+interface DecisionModelsBannerProps {
+ onAddModel?: () => void;
+}
+
+const DecisionModelsBanner: React.FC = ({ onAddModel }) => {
+ const [dismissed, setDismissed] = useState(() => {
+ if (typeof window !== "undefined") {
+ return localStorage.getItem(STORAGE_KEY) === "true";
+ }
+ return false;
+ });
+
+ if (dismissed) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
+
Decision models are now supported
+
+ {onAddModel && (
+ <>
+ Search decision in Add Model to find them.{" "}
+
+ )}
+ Call them at /v1/decisions or /v1/systemone, or try them in the System One
+ playground.{" "}
+
+ How to call them
+
+