From 9e46d7354daf50a3715883141b12fe4d977cd441 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Wed, 4 Feb 2026 18:31:25 -0800
Subject: [PATCH] ui fix

---
 .../MCPSemanticFilterTestPanel.tsx            | 91 +++++++++++--------
 1 file changed, 51 insertions(+), 40 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterTestPanel.tsx b/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterTestPanel.tsx
index c2746aac511..c6d179b2171 100644
--- a/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterTestPanel.tsx
+++ b/ui/litellm-dashboard/src/components/Settings/AdminSettings/MCPSemanticFilterSettings/MCPSemanticFilterTestPanel.tsx
@@ -1,5 +1,5 @@
 import { CodeOutlined, PlayCircleOutlined } from "@ant-design/icons";
-import { Alert, Button, Card, Input, Space, Typography } from "antd";
+import { Alert, Button, Card, Input, Space, Tabs, Typography } from "antd";
 import ModelSelector from "@/components/common_components/ModelSelector";
 import { TestResult } from "./semanticFilterTestUtils";
 
@@ -33,9 +33,15 @@ export default function MCPSemanticFilterTestPanel({
   curlCommand,
 }: MCPSemanticFilterTestPanelProps) {
   return (
-    <>
-      <Card title="Test Configuration" style={{ marginBottom: 16 }}>
-        <Space direction="vertical" style={{ width: "100%" }} size="large">
+    <Card title="Test Configuration" style={{ marginBottom: 16 }}>
+      <Tabs
+        defaultActiveKey="test"
+        items={[
+          {
+            key: "test",
+            label: "Test",
+            children: (
+              <Space direction="vertical" style={{ width: "100%" }} size="large">
           <div>
             <Typography.Text strong style={{ display: "block", marginBottom: 8 }}>
               <PlayCircleOutlined /> Test Query
@@ -104,41 +110,46 @@ export default function MCPSemanticFilterTestPanel({
               </div>
             </div>
           )}
-        </Space>
-      </Card>
-
-      <Card
-        title={
-          <Space>
-            <CodeOutlined />
-            <Typography.Text>API Usage</Typography.Text>
-          </Space>
-        }
-      >
-        <Typography.Text type="secondary" style={{ display: "block", marginBottom: 12 }}>
-          Use this curl command to test the semantic filter with your current configuration.
-        </Typography.Text>
-        <Button
-          type="link"
-          onClick={() => setShowCurl(!showCurl)}
-          style={{ padding: 0, marginBottom: 12 }}
-        >
-          {showCurl ? "Hide" : "Show"} curl command
-        </Button>
-        {showCurl && (
-          <pre
-            style={{
-              background: "#f5f5f5",
-              padding: 12,
-              borderRadius: 4,
-              overflow: "auto",
-              fontSize: 12,
-            }}
-          >
-            {curlCommand}
-          </pre>
-        )}
-      </Card>
-    </>
+              </Space>
+            ),
+          },
+          {
+            key: "api",
+            label: "API Usage",
+            children: (
+              <div>
+                <Space style={{ marginBottom: 8 }}>
+                  <CodeOutlined />
+                  <Typography.Text strong>API Usage</Typography.Text>
+                </Space>
+                <Typography.Text type="secondary" style={{ display: "block", marginBottom: 8 }}>
+                  Use this curl command to test the semantic filter with your current configuration.
+                </Typography.Text>
+                <Button
+                  type="link"
+                  onClick={() => setShowCurl(!showCurl)}
+                  style={{ padding: 0, marginBottom: 12 }}
+                >
+                  {showCurl ? "Hide" : "Show"} curl command
+                </Button>
+                {showCurl && (
+                  <pre
+                    style={{
+                      background: "#f5f5f5",
+                      padding: 12,
+                      borderRadius: 4,
+                      overflow: "auto",
+                      fontSize: 12,
+                    }}
+                  >
+                    {curlCommand}
+                  </pre>
+                )}
+              </div>
+            ),
+          },
+        ]}
+      />
+    </Card>
   );
 }