Merge pull request #712 from AnishSarkar22/fix/ui-mcp

fix: UI fix for MCP connector

surfsense_web/components/assistant-ui/connector-popup.tsx

@@ -22,7 +22,6 @@ import { useIndexingConnectors } from "./connector-popup/hooks/use-indexing-conn
 import { ActiveConnectorsTab } from "./connector-popup/tabs/active-connectors-tab";
 import { AllConnectorsTab } from "./connector-popup/tabs/all-connectors-tab";
 import { ConnectorAccountsListView } from "./connector-popup/views/connector-accounts-list-view";
-import { MCPConnectorListView } from "./connector-popup/views/mcp-connector-list-view";
 import { YouTubeCrawlerView } from "./connector-popup/views/youtube-crawler-view";
 
 export const ConnectorIndicator: FC = () => {
@@ -178,18 +177,16 @@ export const ConnectorIndicator: FC = () => {
 				{isYouTubeView && searchSpaceId ? (
 					<YouTubeCrawlerView searchSpaceId={searchSpaceId} onBack={handleBackFromYouTube} />
 				) : viewingMCPList ? (
-					<div className="p-6 sm:p-12 h-full overflow-hidden">
+					<ConnectorAccountsListView
-						<MCPConnectorListView
+						connectorType="MCP_CONNECTOR"
-							mcpConnectors={
+						connectorTitle="MCP Connectors"
-								(allConnectors || []).filter(
+						connectors={(allConnectors || []) as SearchSourceConnector[]}
-									(c: SearchSourceConnector) => c.connector_type === "MCP_CONNECTOR"
+						indexingConnectorIds={indexingConnectorIds}
-								) as SearchSourceConnector[]
+						onBack={handleBackFromMCPList}
-							}
+						onManage={handleStartEdit}
-							onAddNew={handleAddNewMCPFromList}
+						onAddAccount={handleAddNewMCPFromList}
-							onManageConnector={handleStartEdit}
+						addButtonText="Add New MCP Server"
-							onBack={handleBackFromMCPList}
+					/>
-						/>
-					</div>
 				) : viewingAccountsType ? (
 					<ConnectorAccountsListView
 						connectorType={viewingAccountsType.connectorType}

surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx

@@ -4,6 +4,7 @@ import { IconBrandYoutube } from "@tabler/icons-react";
 import { FileText, Loader2 } from "lucide-react";
 import type { FC } from "react";
 import { Button } from "@/components/ui/button";
+import { EnumConnectorName } from "@/contracts/enums/connector";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { cn } from "@/lib/utils";
 import { useConnectorStatus } from "../hooks/use-connector-status";
@@ -18,6 +19,7 @@ interface ConnectorCardProps {
 	isConnecting?: boolean;
 	documentCount?: number;
 	accountCount?: number;
+	connectorCount?: number;
 	isIndexing?: boolean;
 	onConnect?: () => void;
 	onManage?: () => void;
@@ -46,10 +48,12 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 	isConnecting = false,
 	documentCount,
 	accountCount,
+	connectorCount,
 	isIndexing = false,
 	onConnect,
 	onManage,
 }) => {
+	const isMCP = connectorType === EnumConnectorName.MCP_CONNECTOR;
 	// Get connector status
 	const { getConnectorStatus, isConnectorEnabled, getConnectorStatusMessage, shouldShowWarnings } =
 		useConnectorStatus();
@@ -112,13 +116,21 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 					</p>
 				) : isConnected ? (
 					<p className="text-[10px] text-muted-foreground mt-1 flex items-center gap-1.5">
-						<span>{formatDocumentCount(documentCount)}</span>
+						{isMCP && connectorCount !== undefined ? (
-						{accountCount !== undefined && accountCount > 0 && (
+							<span>
+								{connectorCount} {connectorCount === 1 ? "server" : "servers"}
+							</span>
+						) : (
 							<>
-								<span className="text-muted-foreground/50">•</span>
+								<span>{formatDocumentCount(documentCount)}</span>
-								<span>
+								{accountCount !== undefined && accountCount > 0 && (
-									{accountCount} {accountCount === 1 ? "Account" : "Accounts"}
+									<>
-								</span>
+										<span className="text-muted-foreground/50">•</span>
+										<span>
+											{accountCount} {accountCount === 1 ? "Account" : "Accounts"}
+										</span>
+									</>
+								)}
 							</>
 						)}
 					</p>

surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/mcp-connect-form.tsx

@@ -4,11 +4,9 @@ import { CheckCircle2, ChevronDown, ChevronUp, Server, XCircle } from "lucide-re
 import { type FC, useRef, useState } from "react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { EnumConnectorName } from "@/contracts/enums/connector";
-import type { MCPToolDefinition } from "@/contracts/types/mcp.types";
 import type { ConnectFormProps } from "..";
 import {
 	extractServerName,
@@ -46,7 +44,7 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 			name: "My Remote MCP Server",
 			url: "https://your-mcp-server.com/mcp",
 			headers: {
-				"API_KEY": "your_api_key_here",
+				API_KEY: "your_api_key_here",
 			},
 			transport: "streamable-http",
 		},
@@ -178,29 +176,47 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 							id="config"
 							value={configJson}
 							onChange={(e) => handleConfigChange(e.target.value)}
+							onKeyDown={(e) => {
+								if (e.key === "Tab") {
+									e.preventDefault();
+									const target = e.target as HTMLTextAreaElement;
+									const start = target.selectionStart;
+									const end = target.selectionEnd;
+									const indent = "  "; // 2 spaces for JSON
+									const newValue =
+										configJson.substring(0, start) + indent + configJson.substring(end);
+									handleConfigChange(newValue);
+									// Set cursor position after the inserted tab
+									requestAnimationFrame(() => {
+										target.selectionStart = target.selectionEnd = start + indent.length;
+									});
+								}
+							}}
 							placeholder={DEFAULT_CONFIG}
 							rows={16}
 							className={`font-mono text-xs ${jsonError ? "border-red-500" : ""}`}
 						/>
 						{jsonError && <p className="text-xs text-red-500">JSON Error: {jsonError}</p>}
 						<p className="text-[10px] sm:text-xs text-muted-foreground">
-							<strong>Local (stdio):</strong> command, args, env, transport: "stdio"<br />
+							Paste a single MCP server configuration. Must include: name, command, args (optional),
-							<strong>Remote (HTTP):</strong> url, headers, transport: "streamable-http"
+							env (optional), transport (optional).
 						</p>
 					</div>
 
+					{/* Test Connection */}
 					<div className="pt-4">
 						<Button
 							type="button"
 							onClick={handleTestConnection}
 							disabled={isTesting}
-							variant="outline"
+							variant="secondary"
-							className="w-full"
+							className="w-full h-8 text-[13px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80"
 						>
-							{isTesting ? "Testing Connection..." : "Test Connection"}
+							{isTesting ? "Testing Connection" : "Test Connection"}
 						</Button>
 					</div>
 
+					{/* Test Result */}
 					{testResult && (
 						<Alert
 							className={
@@ -226,7 +242,7 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 											type="button"
 											variant="ghost"
 											size="sm"
-											className="h-6 px-2"
+											className="h-6 px-2 self-start sm:self-auto text-xs"
 											onClick={(e) => {
 												e.preventDefault();
 												e.stopPropagation();
@@ -236,18 +252,20 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 											{showDetails ? (
 												<>
 													<ChevronUp className="h-3 w-3 mr-1" />
-													Hide Details
+													<span className="hidden sm:inline">Hide Details</span>
+													<span className="sm:hidden">Hide</span>
 												</>
 											) : (
 												<>
 													<ChevronDown className="h-3 w-3 mr-1" />
-													Show Details
+													<span className="hidden sm:inline">Show Details</span>
+													<span className="sm:hidden">Show</span>
 												</>
 											)}
 										</Button>
 									)}
 								</div>
-								<AlertDescription className="text-xs mt-1">
+								<AlertDescription className="text-[10px] sm:text-xs mt-1">
 									{testResult.message}
 									{showDetails && testResult.tools.length > 0 && (
 										<div className="mt-3 pt-3 border-t border-green-500/20">

surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/mcp-config.tsx

@@ -148,15 +148,23 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 	return (
 		<div className="space-y-6">
 			{/* Server Name */}
-			<div className="space-y-2">
+			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
-				<Label htmlFor="name">Server Name *</Label>
+				<div className="space-y-2">
-				<Input
+					<Label htmlFor="name" className="text-xs sm:text-sm">
-					id="name"
+						Server Name
-					value={name}
+					</Label>
-					onChange={(e) => handleNameChange(e.target.value)}
+					<Input
-					placeholder="e.g., Filesystem Server"
+						id="name"
-					required
+						value={name}
-				/>
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="e.g., Filesystem Server"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+						required
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
 			</div>
 
 			{/* Server Configuration */}
@@ -173,12 +181,29 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 							id="config"
 							value={configJson}
 							onChange={(e) => handleConfigChange(e.target.value)}
+							onKeyDown={(e) => {
+								if (e.key === "Tab") {
+									e.preventDefault();
+									const target = e.target as HTMLTextAreaElement;
+									const start = target.selectionStart;
+									const end = target.selectionEnd;
+									const indent = "  "; // 2 spaces for JSON
+									const newValue =
+										configJson.substring(0, start) + indent + configJson.substring(end);
+									handleConfigChange(newValue);
+									// Set cursor position after the inserted tab
+									requestAnimationFrame(() => {
+										target.selectionStart = target.selectionEnd = start + indent.length;
+									});
+								}
+							}}
 							rows={16}
 							className={`font-mono text-xs ${jsonError ? "border-red-500" : ""}`}
 						/>
 						{jsonError && <p className="text-xs text-red-500">JSON Error: {jsonError}</p>}
 						<p className="text-[10px] sm:text-xs text-muted-foreground">
-							<strong>Local (stdio):</strong> command, args, env, transport: "stdio"<br />
+							<strong>Local (stdio):</strong> command, args, env, transport: "stdio"
+							<br />
 							<strong>Remote (HTTP):</strong> url, headers, transport: "streamable-http"
 						</p>
 					</div>
@@ -189,10 +214,10 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 							type="button"
 							onClick={handleTestConnection}
 							disabled={isTesting}
-							variant="outline"
+							variant="secondary"
-							className="w-full"
+							className="w-full h-8 text-[13px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80"
 						>
-							{isTesting ? "Testing Connection..." : "Test Connection"}
+							{isTesting ? "Testing Connection" : "Test Connection"}
 						</Button>
 					</div>
 
@@ -211,7 +236,7 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 								<XCircle className="h-4 w-4 text-red-600" />
 							)}
 							<div className="flex-1">
-								<div className="flex items-center justify-between">
+								<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
 									<AlertTitle className="text-sm">
 										{testResult.status === "success"
 											? "Connection Successful"
@@ -222,7 +247,7 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 											type="button"
 											variant="ghost"
 											size="sm"
-											className="h-6 px-2"
+											className="h-6 px-2 self-start sm:self-auto text-xs"
 											onClick={(e) => {
 												e.preventDefault();
 												e.stopPropagation();
@@ -232,12 +257,14 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 											{showDetails ? (
 												<>
 													<ChevronUp className="h-3 w-3 mr-1" />
-													Hide Details
+													<span className="hidden sm:inline">Hide Details</span>
+													<span className="sm:hidden">Hide</span>
 												</>
 											) : (
 												<>
 													<ChevronDown className="h-3 w-3 mr-1" />
-													Show Details
+													<span className="hidden sm:inline">Show Details</span>
+													<span className="sm:hidden">Show</span>
 												</>
 											)}
 										</Button>

surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx

@@ -151,7 +151,7 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 						</div>
 						<div className="flex-1 min-w-0">
 							<h2 className="text-xl sm:text-2xl font-semibold tracking-tight text-wrap whitespace-normal wrap-break-word">
-								{connector.connector_type === "MCP_CONNECTOR" ? "MCP Server" : connector.name}
+								{connector.name}
 							</h2>
 							<p className="text-xs sm:text-base text-muted-foreground mt-1">
 								Manage your connector settings and sync configuration

surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts

@@ -646,7 +646,7 @@ export const useConnectorDialog = () => {
 
 								const successMessage =
 									currentConnectorType === "MCP_CONNECTOR"
-										? `${connector.name} MCP server added successfully`
+										? `${connector.name} added successfully`
 										: `${connectorTitle} connected and indexing started!`;
 								toast.success(successMessage, {
 									description: periodicEnabledForIndexing
@@ -711,7 +711,7 @@ export const useConnectorDialog = () => {
 									// Other non-indexable connectors - just show success message and close
 									const successMessage =
 										currentConnectorType === "MCP_CONNECTOR"
-											? `${connector.name} MCP server added successfully`
+											? `${connector.name} added successfully`
 											: `${connectorTitle} connected successfully!`;
 									toast.success(successMessage);
 

surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { FC } from "react";
+import { EnumConnectorName } from "@/contracts/enums/connector";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { ConnectorCard } from "../components/connector-card";
 import { CRAWLERS, OAUTH_CONNECTORS, OTHER_CONNECTORS } from "../constants/connector-constants";
@@ -161,6 +162,16 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 							);
 							const isIndexing = actualConnector && indexingConnectorIds?.has(actualConnector.id);
 
+							// For MCP connectors, count total MCP connectors instead of document count
+							const isMCP = connector.connectorType === EnumConnectorName.MCP_CONNECTOR;
+							const mcpConnectorCount =
+								isMCP && allConnectors
+									? allConnectors.filter(
+											(c: SearchSourceConnector) =>
+												c.connector_type === EnumConnectorName.MCP_CONNECTOR
+										).length
+									: undefined;
+
 							const handleConnect = onConnectNonOAuth
 								? () => onConnectNonOAuth(connector.connectorType)
 								: () => {}; // Fallback - connector popup should handle all connector types
@@ -175,6 +186,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 									isConnected={isConnected}
 									isConnecting={isConnecting}
 									documentCount={documentCount}
+									connectorCount={mcpConnectorCount}
 									isIndexing={isIndexing}
 									onConnect={handleConnect}
 									onManage={

surfsense_web/components/assistant-ui/connector-popup/utils/mcp-config-validator.ts

@@ -138,35 +138,37 @@ export const parseMCPConfig = (configJson: string): MCPConfigValidationResult =>
 
 			// Replace technical error messages with user-friendly ones
 			if (errorMsg.includes("expected string, received undefined")) {
-				errorMsg = "This field is required";
+				errorMsg = fieldPath ? `The '${fieldPath}' field is required` : "This field is required";
 			} else if (errorMsg.includes("Invalid input")) {
-				errorMsg = "Invalid value";
+				errorMsg = fieldPath ? `The '${fieldPath}' field has an invalid value` : "Invalid value";
+			} else if (fieldPath && !errorMsg.toLowerCase().includes(fieldPath.toLowerCase())) {
+				// If error message doesn't mention the field name, prepend it
+				errorMsg = `The '${fieldPath}' field: ${errorMsg}`;
 			}
 
-			const formattedError = fieldPath ? `${fieldPath}: ${errorMsg}` : errorMsg;
+			console.error("[MCP Validator] ❌ Validation error:", errorMsg);
-
-			console.error("[MCP Validator] ❌ Validation error:", formattedError);
 			console.error("[MCP Validator] Full Zod errors:", result.error.issues);
 
 			return {
 				config: null,
-				error: formattedError,
+				error: errorMsg,
 			};
 		}
 
 		// Build config based on transport type
-		const config: MCPServerConfig = result.data.transport === "stdio" || !result.data.transport
+		const config: MCPServerConfig =
-			? {
+			result.data.transport === "stdio" || !result.data.transport
-				command: (result.data as z.infer<typeof StdioConfigSchema>).command,
+				? {
-				args: (result.data as z.infer<typeof StdioConfigSchema>).args,
+						command: (result.data as z.infer<typeof StdioConfigSchema>).command,
-				env: (result.data as z.infer<typeof StdioConfigSchema>).env,
+						args: (result.data as z.infer<typeof StdioConfigSchema>).args,
-				transport: "stdio" as const,
+						env: (result.data as z.infer<typeof StdioConfigSchema>).env,
-			}
+						transport: "stdio" as const,
-			: {
+					}
-				url: (result.data as z.infer<typeof HttpConfigSchema>).url,
+				: {
-				headers: (result.data as z.infer<typeof HttpConfigSchema>).headers,
+						url: (result.data as z.infer<typeof HttpConfigSchema>).url,
-				transport: result.data.transport as "streamable-http" | "http" | "sse",
+						headers: (result.data as z.infer<typeof HttpConfigSchema>).headers,
-			};
+						transport: result.data.transport as "streamable-http" | "http" | "sse",
+					};
 
 		// Cache the successfully parsed config
 		configCache.set(configJson, {

surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx

@@ -1,9 +1,10 @@
 "use client";
 
 import { differenceInDays, differenceInMinutes, format, isToday, isYesterday } from "date-fns";
-import { ArrowLeft, Loader2, Plus } from "lucide-react";
+import { ArrowLeft, Loader2, Plus, Server } from "lucide-react";
 import type { FC } from "react";
 import { Button } from "@/components/ui/button";
+import { EnumConnectorName } from "@/contracts/enums/connector";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { cn } from "@/lib/utils";
@@ -19,6 +20,7 @@ interface ConnectorAccountsListViewProps {
 	onManage: (connector: SearchSourceConnector) => void;
 	onAddAccount: () => void;
 	isConnecting?: boolean;
+	addButtonText?: string;
 }
 
 /**
@@ -70,6 +72,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 	onManage,
 	onAddAccount,
 	isConnecting = false,
+	addButtonText,
 }) => {
 	// Get connector status
 	const { isConnectorEnabled, getConnectorStatusMessage } = useConnectorStatus();
@@ -80,6 +83,22 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 	// Filter connectors to only show those of this type
 	const typeConnectors = connectors.filter((c) => c.connector_type === connectorType);
 
+	// Determine button text - default to "Add Account" unless specified
+	const buttonText =
+		addButtonText ||
+		(connectorType === EnumConnectorName.MCP_CONNECTOR ? "Add New MCP Server" : "Add Account");
+	const isMCP = connectorType === EnumConnectorName.MCP_CONNECTOR;
+
+	// Helper to get display name for connector (handles MCP server name extraction)
+	const getDisplayName = (connector: SearchSourceConnector): string => {
+		if (isMCP) {
+			// For MCP, extract server name from config if available
+			const serverName = connector.config?.server_config?.name || connector.name;
+			return serverName;
+		}
+		return getConnectorDisplayName(connector.name);
+	};
+
 	return (
 		<div className="flex flex-col h-full">
 			{/* Header */}
@@ -115,22 +134,22 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 						onClick={onAddAccount}
 						disabled={isConnecting || !isEnabled}
 						className={cn(
-							"flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg border-2 border-dashed text-left transition-all duration-200 shrink-0 self-center sm:self-auto sm:w-auto",
+							"flex items-center justify-center gap-1.5 h-8 px-3 rounded-md border-2 border-dashed text-xs sm:text-sm transition-all duration-200 shrink-0 w-full sm:w-auto",
 							!isEnabled
 								? "border-border/30 opacity-50 cursor-not-allowed"
-								: "border-primary/50 hover:bg-primary/5",
+								: "border-slate-400/20 dark:border-white/20 hover:bg-primary/5",
 							isConnecting && "opacity-50 cursor-not-allowed"
 						)}
 					>
-						<div className="flex h-5 w-5 sm:h-6 sm:w-6 items-center justify-center rounded-md bg-primary/10 shrink-0">
+						<div className="flex h-5 w-5 items-center justify-center rounded-md bg-primary/10 shrink-0">
 							{isConnecting ? (
-								<Loader2 className="size-3 sm:size-3.5 animate-spin text-primary" />
+								<Loader2 className="size-3 animate-spin text-primary" />
 							) : (
-								<Plus className="size-3 sm:size-3.5 text-primary" />
+								<Plus className="size-3 text-primary" />
 							)}
 						</div>
-						<span className="text-[11px] sm:text-[12px] font-medium">
+						<span className="text-xs sm:text-sm font-medium">
-							{isConnecting ? "Connecting" : "Add Account"}
+							{isConnecting ? "Connecting" : buttonText}
 						</span>
 					</button>
 				</div>
@@ -139,61 +158,81 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 			{/* Content */}
 			<div className="flex-1 overflow-y-auto px-6 sm:px-12 pt-0 sm:pt-6 pb-6 sm:pb-8">
 				{/* Connected Accounts Grid */}
-				<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+				{typeConnectors.length === 0 ? (
-					{typeConnectors.map((connector) => {
+					<div className="flex flex-col items-center justify-center py-12 text-center">
-						const isIndexing = indexingConnectorIds.has(connector.id);
+						<div className="h-16 w-16 rounded-full bg-slate-400/5 dark:bg-white/5 flex items-center justify-center mb-4">
+							{isMCP ? (
+								<Server className="h-8 w-8 text-muted-foreground" />
+							) : (
+								getConnectorIcon(connectorType, "size-8")
+							)}
+						</div>
+						<h3 className="text-sm font-medium mb-1">
+							{isMCP ? "No MCP Servers" : `No ${connectorTitle} Accounts`}
+						</h3>
+						<p className="text-xs text-muted-foreground max-w-[280px]">
+							{isMCP
+								? "Get started by adding your first Model Context Protocol server"
+								: `Get started by connecting your first ${connectorTitle} account`}
+						</p>
+					</div>
+				) : (
+					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+						{typeConnectors.map((connector) => {
+							const isIndexing = indexingConnectorIds.has(connector.id);
 
-						return (
+							return (
-							<div
-								key={connector.id}
-								className={cn(
-									"flex items-center gap-4 p-4 rounded-xl transition-all",
-									isIndexing
-										? "bg-primary/5 border-0"
-										: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 border border-border"
-								)}
-							>
 								<div
+									key={connector.id}
 									className={cn(
-										"flex h-12 w-12 items-center justify-center rounded-lg border shrink-0",
+										"flex items-center gap-4 p-4 rounded-xl transition-all",
 										isIndexing
-											? "bg-primary/10 border-primary/20"
+											? "bg-primary/5 border-0"
-											: "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
+											: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 border border-border"
 									)}
 								>
-									{getConnectorIcon(connector.connector_type, "size-6")}
+									<div
-								</div>
+										className={cn(
-								<div className="flex-1 min-w-0">
+											"flex h-12 w-12 items-center justify-center rounded-lg border shrink-0",
-									<p className="text-[14px] font-semibold leading-tight truncate">
+											isIndexing
-										{getConnectorDisplayName(connector.name)}
+												? "bg-primary/10 border-primary/20"
-									</p>
+												: "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
-									{isIndexing ? (
+										)}
-										<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
+									>
-											<Loader2 className="size-3 animate-spin" />
+										{getConnectorIcon(connector.connector_type, "size-6")}
-											Syncing
+									</div>
+									<div className="flex-1 min-w-0">
+										<p className="text-[14px] font-semibold leading-tight truncate">
+											{getDisplayName(connector)}
 										</p>
-									) : (
+										{isIndexing ? (
-										<p className="text-[10px] text-muted-foreground mt-1 whitespace-nowrap truncate">
+											<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
-											{isIndexableConnector(connector.connector_type)
+												<Loader2 className="size-3 animate-spin" />
-												? connector.last_indexed_at
+												Syncing
-													? `Last indexed: ${formatLastIndexedDate(connector.last_indexed_at)}`
+											</p>
-													: "Never indexed"
+										) : (
-												: "Active"}
+											<p className="text-[10px] text-muted-foreground mt-1 whitespace-nowrap truncate">
-										</p>
+												{isIndexableConnector(connector.connector_type)
-									)}
+													? connector.last_indexed_at
+														? `Last indexed: ${formatLastIndexedDate(connector.last_indexed_at)}`
+														: "Never indexed"
+													: "Active"}
+											</p>
+										)}
+									</div>
+									<Button
+										variant="secondary"
+										size="sm"
+										className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80 shrink-0"
+										onClick={() => onManage(connector)}
+									>
+										Manage
+									</Button>
 								</div>
-								<Button
+							);
-									variant="secondary"
+						})}
-									size="sm"
+					</div>
-									className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80 shrink-0"
+				)}
-									onClick={() => onManage(connector)}
-								>
-									Manage
-								</Button>
-							</div>
-						);
-					})}
-				</div>
 			</div>
 		</div>
 	);

surfsense_web/components/assistant-ui/connector-popup/views/mcp-connector-list-view.tsx

@@ -1,134 +0,0 @@
-"use client";
-
-import { Plus, Server, XCircle } from "lucide-react";
-import type { FC } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-import { cn } from "@/lib/utils";
-
-interface MCPConnectorListViewProps {
-	mcpConnectors: SearchSourceConnector[];
-	onAddNew: () => void;
-	onManageConnector: (connector: SearchSourceConnector) => void;
-	onBack: () => void;
-}
-
-export const MCPConnectorListView: FC<MCPConnectorListViewProps> = ({
-	mcpConnectors,
-	onAddNew,
-	onManageConnector,
-	onBack,
-}) => {
-	// Validate that all connectors are MCP connectors
-	const invalidConnectors = mcpConnectors.filter(
-		(c) => c.connector_type !== EnumConnectorName.MCP_CONNECTOR
-	);
-
-	if (invalidConnectors.length > 0) {
-		console.error(
-			"MCPConnectorListView received non-MCP connectors:",
-			invalidConnectors.map((c) => c.connector_type)
-		);
-		return (
-			<Alert className="border-red-500/50 bg-red-500/10">
-				<XCircle className="h-4 w-4 text-red-600" />
-				<AlertTitle>Invalid Connector Type</AlertTitle>
-				<AlertDescription>
-					This view can only display MCP connectors. Found {invalidConnectors.length} invalid
-					connector(s).
-				</AlertDescription>
-			</Alert>
-		);
-	}
-	return (
-		<div className="flex flex-col h-full">
-			{/* Header */}
-			<div className="flex items-center justify-between mb-6 shrink-0">
-				<div className="flex items-center gap-3">
-					<Button variant="ghost" size="icon" onClick={onBack} className="h-8 w-8">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							width="16"
-							height="16"
-							viewBox="0 0 24 24"
-							fill="none"
-							stroke="currentColor"
-							strokeWidth="2"
-							strokeLinecap="round"
-							strokeLinejoin="round"
-						>
-							<path d="m15 18-6-6 6-6" />
-						</svg>
-					</Button>
-					<div>
-						<h2 className="text-lg sm:text-xl font-semibold">MCP Connectors</h2>
-						<p className="text-xs sm:text-sm text-muted-foreground">
-							Manage your Model Context Protocol servers
-						</p>
-					</div>
-				</div>
-			</div>
-
-			{/* Add New Button */}
-			<div className="mb-4 shrink-0">
-				<Button onClick={onAddNew} className="w-full" variant="outline">
-					<Plus className="h-4 w-4 mr-2" />
-					Add New MCP Server
-				</Button>
-			</div>
-
-			{/* MCP Connectors List */}
-			<div className="space-y-3 flex-1 overflow-y-auto">
-				{mcpConnectors.length === 0 ? (
-					<div className="flex flex-col items-center justify-center py-12 text-center">
-						<div className="h-16 w-16 rounded-full bg-slate-400/5 dark:bg-white/5 flex items-center justify-center mb-4">
-							<Server className="h-8 w-8 text-muted-foreground" />
-						</div>
-						<h3 className="text-sm font-medium mb-1">No MCP Servers</h3>
-						<p className="text-xs text-muted-foreground max-w-[280px]">
-							Get started by adding your first Model Context Protocol server
-						</p>
-					</div>
-				) : (
-					mcpConnectors.map((connector) => {
-						// Extract server name from config
-						const serverName = connector.config?.server_config?.name || connector.name;
-
-						return (
-							<div
-								key={connector.id}
-								className={cn(
-									"flex items-center gap-4 p-4 rounded-xl border border-border transition-all",
-									"bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
-								)}
-							>
-								<div
-									className={cn(
-										"flex h-12 w-12 items-center justify-center rounded-lg border shrink-0",
-										"bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
-									)}
-								>
-									{getConnectorIcon("MCP_CONNECTOR", "size-6")}
-								</div>
-								<div className="flex-1 min-w-0">
-									<p className="text-[14px] font-semibold leading-tight truncate">{serverName}</p>
-								</div>
-								<Button
-									variant="secondary"
-									size="sm"
-									className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80 shrink-0"
-									onClick={() => onManageConnector(connector)}
-								>
-									Manage
-								</Button>
-							</div>
-						);
-					})
-				)}
-			</div>
-		</div>
-	);
-};

surfsense_web/contracts/enums/connectorIcons.tsx

@@ -65,7 +65,7 @@ export const getConnectorIcon = (connectorType: EnumConnectorName | string, clas
 		case EnumConnectorName.CIRCLEBACK_CONNECTOR:
 			return <IconUsersGroup {...iconProps} />;
 		case EnumConnectorName.MCP_CONNECTOR:
-			return <Webhook {...iconProps} />;
+			return <Image src="/connectors/modelcontextprotocol.svg" alt="MCP" {...imgProps} />;
 		// Additional cases for non-enum connector types
 		case "YOUTUBE_CONNECTOR":
 			return <Image src="/connectors/youtube.svg" alt="YouTube" {...imgProps} />;

surfsense_web/public/connectors/modelcontextprotocol.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#000" d="M13.85 0a4.16 4.16 0 0 0-2.95 1.217L1.456 10.66a.835.835 0 0 0 0 1.18a.835.835 0 0 0 1.18 0l9.442-9.442a2.49 2.49 0 0 1 3.541 0a2.49 2.49 0 0 1 0 3.541L8.59 12.97l-.1.1a.835.835 0 0 0 0 1.18a.835.835 0 0 0 1.18 0l.1-.098l7.03-7.034a2.49 2.49 0 0 1 3.542 0l.049.05a2.49 2.49 0 0 1 0 3.54l-8.54 8.54a1.96 1.96 0 0 0 0 2.755l1.753 1.753a.835.835 0 0 0 1.18 0a.835.835 0 0 0 0-1.18l-1.753-1.753a.266.266 0 0 1 0-.394l8.54-8.54a4.185 4.185 0 0 0 0-5.9l-.05-.05a4.16 4.16 0 0 0-2.95-1.218c-.2 0-.401.02-.6.048a4.17 4.17 0 0 0-1.17-3.552A4.16 4.16 0 0 0 13.85 0m0 3.333a.84.84 0 0 0-.59.245L6.275 10.56a4.186 4.186 0 0 0 0 5.902a4.186 4.186 0 0 0 5.902 0L19.16 9.48a.835.835 0 0 0 0-1.18a.835.835 0 0 0-1.18 0l-6.985 6.984a2.49 2.49 0 0 1-3.54 0a2.49 2.49 0 0 1 0-3.54l6.983-6.985a.835.835 0 0 0 0-1.18a.84.84 0 0 0-.59-.245"/></svg>