From 0ebbda92d7bbfd136565f8b741727293f080ace0 Mon Sep 17 00:00:00 2001
From: Yuneng Jiang <yuneng@berri.ai>
Date: Thu, 13 Aug 2026 16:51:22 -0700
Subject: [PATCH] style(ui): drop the playground migration's explanatory
 comments

The repository's comment policy keeps reasoning out of the source, so the
notes on the delete dialog, the tooltip wrapper, and the test query choices
move to the pull request instead.
---
 .../playground/components/chat_ui/AgentBuilderView.test.tsx | 6 ------
 .../playground/components/chat_ui/AgentBuilderView.tsx      | 1 -
 .../playground/components/compareUI/CompareUI.tsx           | 1 -
 .../compareUI/components/ComparisonPanel.test.tsx           | 2 --
 .../compareUI/components/UnifiedSelector.test.tsx           | 4 ----
 5 files changed, 14 deletions(-)

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.test.tsx
index 179b7b8557a..e30f87115cf 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.test.tsx
@@ -38,8 +38,6 @@ vi.mock("@/components/molecules/notifications_manager", () => ({
   default: { success: vi.fn(), fromBackend: vi.fn() },
 }));
 
-// Both tab bodies keep their own state, which is what the tab container has to
-// preserve when the user moves away and comes back.
 const StatefulPanel = ({ label }: { label: string }) => {
   const [draft, setDraft] = useState("");
   return <input aria-label={label} value={draft} onChange={(event) => setDraft(event.target.value)} />;
@@ -73,8 +71,6 @@ const props = {
   userRole: "Admin",
 };
 
-// The labels in the configure panel are not wired to their controls, so reach
-// the control through the field that the label heads.
 const controlUnder = (label: string): HTMLElement =>
   within(screen.getByText(label).parentElement!).getByRole("combobox");
 
@@ -212,8 +208,6 @@ describe("AgentBuilderView", () => {
     expect(await screen.findByText(/Are you sure you want to delete "support-agent"/)).toBeInTheDocument();
     expect(modelDeleteCall).not.toHaveBeenCalled();
 
-    // The trigger and the confirmation share a label; the confirmation is the
-    // one rendered last, in the overlay.
     const confirmations = screen.getAllByRole("button", { name: /Delete$/ });
     await user.click(confirmations[confirmations.length - 1]);
 
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx
index 44995707b10..5a86b2d27f4 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/AgentBuilderView.tsx
@@ -752,7 +752,6 @@ export default function AgentBuilderView({
           </AlertDialogHeader>
           <AlertDialogFooter>
             <AlertDialogAction variant="outline">Cancel</AlertDialogAction>
-            {/* Not AlertDialogAction: that closes on click, and the dialog must stay up while the delete is in flight */}
             <Button variant="destructive" onClick={handleConfirmDelete} disabled={deleting}>
               Delete
             </Button>
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx
index efb8e809352..984e04e93f1 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/CompareUI.tsx
@@ -739,7 +739,6 @@ export default function CompareUI({ accessToken, disabledPersonalKeyCreation }:
                 Clear All Chats
               </Button>
               <Tooltip>
-                {/* A disabled button emits no pointer events, so the hover target has to be a wrapper */}
                 <TooltipTrigger render={<span className="inline-flex" />}>
                   <Button variant="outline" onClick={addComparison} disabled={comparisons.length >= maxComparisons}>
                     <Plus />
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.test.tsx
index f18ea86b8d3..7b8c2a72055 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ComparisonPanel.test.tsx
@@ -76,8 +76,6 @@ const mockProps = {
   apiKey: "test-api-key",
 };
 
-// Both the settings and the remove control are icon-only buttons whose lucide
-// icon survives the migration, so locate them by that icon.
 const buttonWithIcon = (icon: string): HTMLButtonElement => {
   const match = Array.from(document.querySelectorAll("button")).find((button) =>
     button.querySelector(`svg.lucide-${icon}`),
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx
index 4686804afec..29a8092e2b0 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx
+++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/UnifiedSelector.test.tsx
@@ -7,8 +7,6 @@ import { EndpointId, ENDPOINT_CONFIGS } from "../endpoint_config";
 const CHAT = ENDPOINT_CONFIGS[EndpointId.CHAT_COMPLETIONS];
 const AGENTS = ENDPOINT_CONFIGS[EndpointId.A2A_AGENTS];
 
-// A select's prompt text is a rendered node in one library and an input
-// placeholder attribute in the other, so accept either.
 const promptIsVisible = (text: string) =>
   screen.queryByText(text) !== null || screen.queryByPlaceholderText(text) !== null;
 
@@ -67,8 +65,6 @@ describe("UnifiedSelector", () => {
 
     await openList(user);
 
-    // antd renders a hidden measurement copy of each option, so take the last
-    // match: it is the live one, and it is the only one when there is no copy.
     const matches = await screen.findAllByText("Option Two");
     await user.click(matches[matches.length - 1]);