From 24efa6092c15031baa380c6efc9b14b90c03228c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 25 Jul 2026 02:16:28 +0530
Subject: [PATCH 1/2] feat(playground-sidebar): add link to external connectors
 with icon and styling

---
 .../layout/ui/playground/PlaygroundSidebar.tsx      | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/surfsense_web/components/layout/ui/playground/PlaygroundSidebar.tsx b/surfsense_web/components/layout/ui/playground/PlaygroundSidebar.tsx
index f3fdcded3..133ae4e7f 100644
--- a/surfsense_web/components/layout/ui/playground/PlaygroundSidebar.tsx
+++ b/surfsense_web/components/layout/ui/playground/PlaygroundSidebar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ChevronRight, History, KeyRound, LayoutGrid } from "lucide-react";
+import { ArrowRight, ChevronRight, History, KeyRound, LayoutGrid, Unplug } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
@@ -216,6 +216,17 @@ export function PlaygroundSidebar({ workspaceId, className }: PlaygroundSidebarP
 					))}
 				</div>
 			</nav>
+			<div className="shrink-0 border-t p-2">
+				<Link
+					href={`/dashboard/${workspaceId}/connectors`}
+					prefetch
+					className="group inline-flex h-auto w-full items-center justify-start gap-3 rounded-md bg-transparent px-3 py-2.5 text-left text-sm font-medium text-muted-foreground transition-colors duration-150 hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:outline-none"
+				>
+					<Unplug className="h-4 w-4 shrink-0" />
+					<span className="min-w-0 truncate">Add external connectors</span>
+					<ArrowRight className="ml-auto hidden h-4 w-4 shrink-0 -rotate-45 group-hover:block" />
+				</Link>
+			</div>
 		</aside>
 	);
 }

From af81aafc34c89b85eda08c77d2bc106e082b0025 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sat, 25 Jul 2026 02:20:26 +0530
Subject: [PATCH 2/2] feat(mcp-connect-form): replace server icon with info
 icon in alert and update alert styling

---
 .../connect-forms/components/mcp-connect-form.tsx         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
index 9ab45e621..f485072e6 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { CheckCircle2, ChevronDown, ChevronUp, Loader2, Server, XCircle } from "lucide-react";
+import { CheckCircle2, ChevronDown, ChevronUp, Info, Loader2, XCircle } from "lucide-react";
 import { type FC, useRef, useState } from "react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -136,9 +136,9 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
-				<Server className="h-4 w-4 shrink-0" />
-				<AlertDescription className="text-[10px] sm:text-xs">
+			<Alert>
+				<Info />
+				<AlertDescription>
 					Connect to a Model Context Protocol server. Each MCP server is added as a separate
 					connector.
 				</AlertDescription>