feat: show identifier-only display names in connector cards

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

@@ -12,6 +12,7 @@ import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import type { LogActiveTask, LogSummary } from "@/contracts/types/log.types";
 import { cn } from "@/lib/utils";
 import { getDocumentCountForConnector } from "../utils/connector-document-mapping";
+import { getConnectorDisplayName } from "./all-connectors-tab";
 
 interface ActiveConnectorsTabProps {
 	searchQuery: string;
@@ -171,7 +172,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 											</div>
 											<div className="flex-1 min-w-0">
 												<p className="text-[14px] font-semibold leading-tight truncate">
-													{connector.name}
+													{getConnectorDisplayName(connector.name)}
 												</p>
 												{isIndexing ? (
 													<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">

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

@@ -1,12 +1,27 @@
 "use client";
 
+import { Plus } from "lucide-react";
 import type { FC } from "react";
+import { Button } from "@/components/ui/button";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import type { LogActiveTask, LogSummary } from "@/contracts/types/log.types";
 import { ConnectorCard } from "../components/connector-card";
 import { CRAWLERS, OAUTH_CONNECTORS, OTHER_CONNECTORS } from "../constants/connector-constants";
 import { getDocumentCountForConnector } from "../utils/connector-document-mapping";
 
+/**
+ * Extract the display name from a full connector name.
+ * Full names are in format "Base Name - identifier" (e.g., "Gmail - john@example.com").
+ * Returns just the identifier (e.g : john@example.com).
+ */
+export function getConnectorDisplayName(fullName: string): string {
+	const separatorIndex = fullName.indexOf(" - ");
+	if (separatorIndex !== -1) {
+		return fullName.substring(separatorIndex + 3);
+	}
+	return fullName;
+}
+
 interface AllConnectorsTabProps {
 	searchQuery: string;
 	searchSpaceId: string;
@@ -67,56 +82,78 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 
 	return (
 		<div className="space-y-8">
-			{/* Quick Connect */}
+			{/* Per-Type OAuth Connector Groups */}
-			{filteredOAuth.length > 0 && (
+			{filteredOAuth.map((connectorType) => {
-				<section>
+				const userConnectors =
-					<div className="flex items-center gap-2 mb-4">
+					allConnectors?.filter(
-						<h3 className="text-sm font-semibold text-muted-foreground">Quick Connect</h3>
+						(c: SearchSourceConnector) => c.connector_type === connectorType.connectorType
-					</div>
+					) || [];
-					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+				const isConnecting = connectingId === connectorType.id;
-						{filteredOAuth.map((connector) => {
-							const isConnected = connectedTypes.has(connector.connectorType);
-							const isConnecting = connectingId === connector.id;
-							// Find the actual connector object if connected
-							const actualConnector =
-								isConnected && allConnectors
-									? allConnectors.find(
-											(c: SearchSourceConnector) => c.connector_type === connector.connectorType
-										)
-									: undefined;
 
-							const documentCount = getDocumentCountForConnector(
+				return (
-								connector.connectorType,
+					<section key={connectorType.id}>
-								documentTypeCounts
+						{/* Group Header */}
-							);
+						<div className="flex items-center justify-between mb-4">
-							const isIndexing = actualConnector && indexingConnectorIds?.has(actualConnector.id);
+							<h3 className="text-sm font-semibold text-muted-foreground">
-							const activeTask = actualConnector
+								{connectorType.title} Integrations
-								? getActiveTaskForConnector(actualConnector.id)
+							</h3>
-								: undefined;
+							{userConnectors.length > 0 && (
+								<Button
+									size="sm"
+									variant="default"
+									className="h-8 text-[11px] px-3 rounded-lg shrink-0 font-medium shadow-xs gap-1"
+									onClick={() => onConnectOAuth(connectorType)}
+									disabled={isConnecting}
+								>
+									<Plus className="size-3" />
+									Add Account
+								</Button>
+							)}
+						</div>
 
-							return (
+						<div className="grid grid-cols-1 sm:grid-cols-2 gap-1">
+							{userConnectors.length === 0 ? (
 								<ConnectorCard
-									key={connector.id}
+									id={connectorType.id}
-									id={connector.id}
+									title={connectorType.title}
-									title={connector.title}
+									description={connectorType.description}
-									description={connector.description}
+									connectorType={connectorType.connectorType}
-									connectorType={connector.connectorType}
+									isConnected={false}
-									isConnected={isConnected}
 									isConnecting={isConnecting}
-									documentCount={documentCount}
+									onConnect={() => onConnectOAuth(connectorType)}
-									lastIndexedAt={actualConnector?.last_indexed_at}
-									isIndexing={isIndexing}
-									activeTask={activeTask}
-									onConnect={() => onConnectOAuth(connector)}
-									onManage={
-										actualConnector && onManage ? () => onManage(actualConnector) : undefined
-									}
 								/>
-							);
+							) : (
-						})}
+								userConnectors.map((connector: SearchSourceConnector) => {
-					</div>
+									const documentCount = getDocumentCountForConnector(
-				</section>
+										connector.connector_type,
-			)}
+										documentTypeCounts
+									);
+									const isIndexing = indexingConnectorIds?.has(connector.id);
+									const activeTask = getActiveTaskForConnector(connector.id);
+
+									return (
+										<ConnectorCard
+											key={connector.id}
+											id={String(connector.id)}
+											title={getConnectorDisplayName(connector.name)}
+											description={connectorType.description}
+											connectorType={connector.connector_type}
+											isConnected={true}
+											isConnecting={false}
+											documentCount={documentCount}
+											lastIndexedAt={connector.last_indexed_at}
+											isIndexing={isIndexing}
+											activeTask={activeTask}
+											onConnect={() => onConnectOAuth(connectorType)}
+											onManage={onManage ? () => onManage(connector) : undefined}
+										/>
+									);
+								})
+							)}
+						</div>
+					</section>
+				);
+			})}
 
 			{/* More Integrations */}
 			{filteredOther.length > 0 && (