From 33b519e0141f683faef3bc3543fa8b53a7812bc8 Mon Sep 17 00:00:00 2001
From: ryan-crabbe-berri <ryan@berri.ai>
Date: Wed, 19 Aug 2026 17:32:23 -0700
Subject: [PATCH] test(ui): pin the worst-case budget note against
 re-truncation

The endpoint's longest reachable note is 276 characters over three clauses,
on an end_user row where budget reservation tightened the operator and a
custom auth callable is configured. Assert the whole string renders and that
the note carries no clipping utility, so re-adding truncate fails the test
rather than silently hiding a caveat.
---
 .../key_info_view.budgets_tab.test.tsx        | 34 +++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/ui/litellm-dashboard/src/components/templates/key_info_view.budgets_tab.test.tsx b/ui/litellm-dashboard/src/components/templates/key_info_view.budgets_tab.test.tsx
index aa346488ac4..8325b55d278 100644
--- a/ui/litellm-dashboard/src/components/templates/key_info_view.budgets_tab.test.tsx
+++ b/ui/litellm-dashboard/src/components/templates/key_info_view.budgets_tab.test.tsx
@@ -190,6 +190,14 @@ const ORG_UNCONFIGURED: KeyBudgetEntry = {
   source: "organization.budget_id",
 };
 
+// Longest note the endpoint can emit: 276 characters over three clauses, reachable only on an
+// end_user row where reservation tightened the operator and a custom auth callable is configured.
+// The reservation clause lands only on team, tag and end_user, so this is a real ceiling.
+const WORST_CASE_NOTE =
+  "the reservation layer blocks this scope as soon as spend reaches the limit, before the read-time " +
+  "check would trip; only enforced on LLM routes that name this end user; a custom auth callable can " +
+  "set a request-scoped end user cap that overrides this one and is not visible here";
+
 const ALL_BUDGETS = [KEY_UNLIMITED, USER_WITHIN_BUDGET, TEAM_SOFT_OVER, TEAM_MEMBER_BLOCKING, ORG_UNCONFIGURED];
 
 const mockBudgets = (budgets: KeyBudgetEntry[]) => {
@@ -273,6 +281,32 @@ describe("KeyInfoView Budgets tab", () => {
     );
   });
 
+  it("renders the longest note the endpoint can emit without dropping any of it", async () => {
+    const endUser: KeyBudgetEntry = {
+      ...UNCONFIGURED_BUDGET,
+      scope: "end_user",
+      entity_type: "end_user",
+      entity_id: "customer-42",
+      entity_label: "customer-42",
+      max_budget: 25,
+      spend: 25,
+      remaining: 0,
+      source: "budget_table:b-end-user",
+      status: "exceeded",
+      note: WORST_CASE_NOTE,
+    };
+    mockBudgets([endUser]);
+    const panel = await renderAndOpenBudgetsTab();
+
+    const note = panel.getByText(WORST_CASE_NOTE);
+    expect(note).toBeInTheDocument();
+    // jsdom has no layout, so nothing here can prove the text is visually unclipped. Asserting the
+    // absence of the clipping utilities is the only mechanical guard against re-truncating the note.
+    expect(note).not.toHaveClass("truncate");
+    expect(note.className).not.toMatch(/line-clamp|overflow-hidden|whitespace-nowrap/);
+    expect(note).not.toHaveAttribute("title");
+  });
+
   it("explains why two rows on identical numbers get opposite statuses", async () => {
     const inclusive: KeyBudgetEntry = {
       ...UNCONFIGURED_BUDGET,