From 679a690679f9d34082b6c0ffa5839e3387cbfa7e Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Sat, 30 May 2026 18:15:55 +0000
Subject: [PATCH] feat(ui): show coding-agent logos next to prompt heading

Adds four small overlapping circular logos (Cursor, Claude, OpenAI,
GitHub Copilot) next to the 'Prompt for coding agents' heading in the
post-create key dialog, mirroring the Browser Use design. Logos reuse
existing SVGs already shipped under public/assets/logos/.

A unit test asserts the four logos render with the correct alt text in
the documented order.

Co-authored-by: ishaan-berri <ishaan-berri@users.noreply.github.com>
---
 .../shared/CreatedKeyDisplay.test.tsx         | 14 ++++++
 .../components/shared/CreatedKeyDisplay.tsx   | 44 +++++++++++++++++--
 2 files changed, 55 insertions(+), 3 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx
index ed418221bfd..bd789169885 100644
--- a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx
+++ b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.test.tsx
@@ -65,6 +65,20 @@ describe("CreatedKeyDisplay", () => {
     expect(screen.getByRole("button", { name: /copied/i })).toBeInTheDocument();
   });
 
+  it("renders coding agent logos next to the prompt heading", () => {
+    render(<CreatedKeyDisplay apiKey="sk-test-123" />);
+    const logos = screen.getByTestId("coding-agent-logos");
+    const images = logos.querySelectorAll("img");
+    const altText = Array.from(images).map((img) => img.getAttribute("alt"));
+
+    expect(altText).toEqual([
+      "Cursor",
+      "Claude Code",
+      "OpenAI Codex",
+      "GitHub Copilot",
+    ]);
+  });
+
   it("copies the coding agent prompt to clipboard when its copy button is clicked", async () => {
     const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
     render(<CreatedKeyDisplay apiKey="sk-test-123" />);
diff --git a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
index 6defe40d959..efc747f1d79 100644
--- a/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
+++ b/ui/litellm-dashboard/src/components/shared/CreatedKeyDisplay.tsx
@@ -9,6 +9,41 @@ interface CreatedKeyDisplayProps {
   apiKey: string;
 }
 
+const codingAgentLogos: { name: string; src: string }[] = [
+  { name: "Cursor", src: "../ui/assets/logos/cursor.svg" },
+  { name: "Claude Code", src: "../ui/assets/logos/anthropic.svg" },
+  { name: "OpenAI Codex", src: "../ui/assets/logos/openai_small.svg" },
+  { name: "GitHub Copilot", src: "../ui/assets/logos/github_copilot.svg" },
+];
+
+const CodingAgentLogos: React.FC = () => (
+  <div
+    className="flex items-center"
+    aria-label="Compatible coding agents"
+    data-testid="coding-agent-logos"
+  >
+    {codingAgentLogos.map((logo, index) => (
+      <img
+        key={logo.name}
+        src={logo.src}
+        alt={logo.name}
+        title={logo.name}
+        style={{
+          width: 18,
+          height: 18,
+          borderRadius: "50%",
+          background: "#fff",
+          border: "1px solid #e5e7eb",
+          padding: 2,
+          marginLeft: index === 0 ? 0 : -6,
+          objectFit: "contain",
+          boxSizing: "border-box",
+        }}
+      />
+    ))}
+  </div>
+);
+
 const buildCodingAgentPrompt = (apiKey: string, baseUrl: string): string => {
   return `You have access to LiteLLM, an OpenAI-compatible AI gateway that lets you call 100+ LLMs (OpenAI, Anthropic, Gemini, Bedrock, etc.) through a single API.
 
@@ -110,9 +145,12 @@ const CreatedKeyDisplay: React.FC<CreatedKeyDisplayProps> = ({ apiKey }) => {
         style={{ borderColor: "#e5e7eb", background: "#fafafa" }}
       >
         <div className="flex items-center justify-between px-3 pt-3 pb-1">
-          <span className="text-sm font-medium text-gray-700">
-            Prompt for coding agents
-          </span>
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-gray-700">
+              Prompt for coding agents
+            </span>
+            <CodingAgentLogos />
+          </div>
           <Tooltip title={copiedPrompt ? "Copied!" : "Copy prompt"}>
             <CopyToClipboard text={codingAgentPrompt} onCopy={handleCopyPrompt}>
               <Button