From 8749225661ee9b8a00b44731901437597e768634 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 30 Dec 2025 03:36:28 +0530
Subject: [PATCH 01/28] fix: changed design for tooltip

---
 surfsense_web/components/assistant-ui/attachment.tsx       | 5 ++++-
 .../components/assistant-ui/tooltip-icon-button.tsx        | 7 ++++++-
 surfsense_web/components/ui/tooltip.tsx                    | 5 ++---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/attachment.tsx b/surfsense_web/components/assistant-ui/attachment.tsx
index 9750b24d9..7fce93321 100644
--- a/surfsense_web/components/assistant-ui/attachment.tsx
+++ b/surfsense_web/components/assistant-ui/attachment.tsx
@@ -200,7 +200,10 @@ const AttachmentUI: FC = () => {
 				</AttachmentPreviewDialog>
 				{isComposer && !isProcessing && <AttachmentRemove />}
 			</AttachmentPrimitive.Root>
-			<TooltipContent side="top">
+			<TooltipContent
+				side="top"
+				className="bg-black text-white font-medium shadow-xl px-3 py-1.5 dark:bg-zinc-800 dark:text-zinc-50 border-none"
+			>
 				{isProcessing ? (
 					<span className="flex items-center gap-1.5">
 						<Loader2 className="size-3 animate-spin" />
diff --git a/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx b/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx
index 154240cb4..b415acd13 100644
--- a/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx
+++ b/surfsense_web/components/assistant-ui/tooltip-icon-button.tsx
@@ -27,7 +27,12 @@ export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButton
 						<span className="aui-sr-only sr-only">{tooltip}</span>
 					</Button>
 				</TooltipTrigger>
-				<TooltipContent side={side}>{tooltip}</TooltipContent>
+				<TooltipContent
+					side={side}
+					className="bg-black text-white font-medium shadow-xl px-3 py-1.5 dark:bg-zinc-800 dark:text-zinc-50 border-none"
+				>
+					{tooltip}
+				</TooltipContent>
 			</Tooltip>
 		);
 	}
diff --git a/surfsense_web/components/ui/tooltip.tsx b/surfsense_web/components/ui/tooltip.tsx
index 98420c858..e1aa458e6 100644
--- a/surfsense_web/components/ui/tooltip.tsx
+++ b/surfsense_web/components/ui/tooltip.tsx
@@ -32,7 +32,7 @@ function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimiti
 
 function TooltipContent({
 	className,
-	sideOffset = 0,
+	sideOffset = 4,
 	children,
 	...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
@@ -42,13 +42,12 @@ function TooltipContent({
 				data-slot="tooltip-content"
 				sideOffset={sideOffset}
 				className={cn(
-					"bg-popover text-popover-foreground border shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
+					"bg-popover text-popover-foreground fill-popover shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
 					className
 				)}
 				{...props}
 			>
 				{children}
-				<TooltipPrimitive.Arrow className="bg-popover fill-popover z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
 			</TooltipPrimitive.Content>
 		</TooltipPrimitive.Portal>
 	);

From 9f19bea28496e43d7ea0d1fe66ada8b9481cd0df Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 30 Dec 2025 04:03:34 +0530
Subject: [PATCH 02/28] feat: Extract connector indicator UI from thread into a
 new dedicated component.

---
 .../assistant-ui/connector-popup.tsx          | 163 ++++++++++++++++++
 .../components/assistant-ui/thread.tsx        | 150 +---------------
 2 files changed, 164 insertions(+), 149 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup.tsx

diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
new file mode 100644
index 000000000..fbe137287
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -0,0 +1,163 @@
+import { useAtomValue } from "jotai";
+import {
+	ChevronRightIcon,
+	Loader2,
+	Plug2,
+	Plus,
+} from "lucide-react";
+import Link from "next/link";
+import {
+	type FC,
+	useCallback,
+	useRef,
+	useState,
+} from "react";
+import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
+import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
+import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
+import { cn } from "@/lib/utils";
+
+export const ConnectorIndicator: FC = () => {
+	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
+	const { connectors, isLoading: connectorsLoading } = useSearchSourceConnectors(
+		false,
+		searchSpaceId ? Number(searchSpaceId) : undefined
+	);
+	const { data: documentTypeCounts, isLoading: documentTypesLoading } =
+		useAtomValue(documentTypeCountsAtom);
+	const [isOpen, setIsOpen] = useState(false);
+	const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+	const isLoading = connectorsLoading || documentTypesLoading;
+
+	// Get document types that have documents in the search space
+	const activeDocumentTypes = documentTypeCounts
+		? Object.entries(documentTypeCounts).filter(([_, count]) => count > 0)
+		: [];
+
+	const hasConnectors = connectors.length > 0;
+	const hasSources = hasConnectors || activeDocumentTypes.length > 0;
+	const totalSourceCount = connectors.length + activeDocumentTypes.length;
+
+	const handleMouseEnter = useCallback(() => {
+		// Clear any pending close timeout
+		if (closeTimeoutRef.current) {
+			clearTimeout(closeTimeoutRef.current);
+			closeTimeoutRef.current = null;
+		}
+		setIsOpen(true);
+	}, []);
+
+	const handleMouseLeave = useCallback(() => {
+		// Delay closing by 150ms for better UX
+		closeTimeoutRef.current = setTimeout(() => {
+			setIsOpen(false);
+		}, 150);
+	}, []);
+
+	if (!searchSpaceId) return null;
+
+	return (
+		<Popover open={isOpen} onOpenChange={setIsOpen}>
+			<PopoverTrigger asChild>
+				<button
+					type="button"
+					className={cn(
+						"size-[34px] rounded-full p-1 flex items-center justify-center transition-colors relative",
+						"hover:bg-muted-foreground/15 dark:hover:bg-muted-foreground/30",
+						"outline-none focus:outline-none focus-visible:outline-none",
+						"border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none",
+						"data-[state=open]:bg-transparent data-[state=open]:shadow-none data-[state=open]:ring-0",
+						"text-muted-foreground"
+					)}
+					aria-label={
+						hasSources ? `View ${totalSourceCount} connected sources` : "Add your first connector"
+					}
+					onMouseEnter={handleMouseEnter}
+					onMouseLeave={handleMouseLeave}
+				>
+					{isLoading ? (
+						<Loader2 className="size-4 animate-spin" />
+					) : (
+						<>
+							<Plug2 className="size-4" />
+							{totalSourceCount > 0 && (
+								<span className="absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full bg-primary text-primary-foreground shadow-sm">
+									{totalSourceCount > 99 ? "99+" : totalSourceCount}
+								</span>
+							)}
+						</>
+					)}
+				</button>
+			</PopoverTrigger>
+			<PopoverContent
+				side="bottom"
+				align="start"
+				className="w-64 p-3"
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+			>
+				{hasSources ? (
+					<div className="space-y-3">
+						<div className="flex items-center justify-between">
+							<p className="text-xs font-medium text-muted-foreground">Connected Sources</p>
+							<span className="text-xs font-medium bg-muted px-1.5 py-0.5 rounded">
+								{totalSourceCount}
+							</span>
+						</div>
+						<div className="flex flex-wrap gap-2">
+							{/* Document types from the search space */}
+							{activeDocumentTypes.map(([docType]) => (
+								<div
+									key={docType}
+									className="flex items-center gap-1.5 rounded-md bg-muted/80 px-2.5 py-1.5 text-xs border border-border/50"
+								>
+									{getConnectorIcon(docType, "size-3.5")}
+									<span className="truncate max-w-[100px]">{getDocumentTypeLabel(docType)}</span>
+								</div>
+							))}
+							{/* Search source connectors */}
+							{connectors.map((connector) => (
+								<div
+									key={`connector-${connector.id}`}
+									className="flex items-center gap-1.5 rounded-md bg-muted/80 px-2.5 py-1.5 text-xs border border-border/50"
+								>
+									{getConnectorIcon(connector.connector_type, "size-3.5")}
+									<span className="truncate max-w-[100px]">{connector.name}</span>
+								</div>
+							))}
+						</div>
+						<div className="pt-1 border-t border-border/50">
+							<Link
+								href={`/dashboard/${searchSpaceId}/connectors/add`}
+								className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+							>
+								<Plus className="size-3" />
+								Add more sources
+								<ChevronRightIcon className="size-3" />
+							</Link>
+						</div>
+					</div>
+				) : (
+					<div className="space-y-2">
+						<p className="text-sm font-medium">No sources yet</p>
+						<p className="text-xs text-muted-foreground">
+							Add documents or connect data sources to enhance search results.
+						</p>
+						<Link
+							href={`/dashboard/${searchSpaceId}/connectors/add`}
+							className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors mt-1"
+						>
+							<Plus className="size-3" />
+							Add Connector
+						</Link>
+					</div>
+				)}
+			</PopoverContent>
+		</Popover>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index cb01e7605..1023c4e18 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -23,8 +23,6 @@ import {
 	FileText,
 	Loader2,
 	PencilIcon,
-	Plug2,
-	Plus,
 	RefreshCwIcon,
 	SquareIcon,
 } from "lucide-react";
@@ -41,25 +39,23 @@ import {
 	useState,
 } from "react";
 import { createPortal } from "react-dom";
-import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
 import {
 	mentionedDocumentIdsAtom,
 	mentionedDocumentsAtom,
 	messageDocumentsMapAtom,
 } from "@/atoms/chat/mentioned-documents.atom";
-import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
 import {
 	globalNewLLMConfigsAtom,
 	llmPreferencesAtom,
 	newLLMConfigsAtom,
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
-import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import {
 	ComposerAddAttachment,
 	ComposerAttachments,
 	UserMessageAttachments,
 } from "@/components/assistant-ui/attachment";
+import { ConnectorIndicator } from "@/components/assistant-ui/connector-popup";
 import {
 	InlineMentionEditor,
 	type InlineMentionEditorRef,
@@ -75,10 +71,7 @@ import { ChainOfThoughtItem } from "@/components/prompt-kit/chain-of-thought";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
 import type { ThinkingStep } from "@/components/tool-ui/deepagent-thinking";
 import { Button } from "@/components/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { Document } from "@/contracts/types/document.types";
-import { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
 import { cn } from "@/lib/utils";
 
 /**
@@ -625,147 +618,6 @@ const Composer: FC = () => {
 	);
 };
 
-const ConnectorIndicator: FC = () => {
-	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
-	const { connectors, isLoading: connectorsLoading } = useSearchSourceConnectors(
-		false,
-		searchSpaceId ? Number(searchSpaceId) : undefined
-	);
-	const { data: documentTypeCounts, isLoading: documentTypesLoading } =
-		useAtomValue(documentTypeCountsAtom);
-	const [isOpen, setIsOpen] = useState(false);
-	const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-	const isLoading = connectorsLoading || documentTypesLoading;
-
-	// Get document types that have documents in the search space
-	const activeDocumentTypes = documentTypeCounts
-		? Object.entries(documentTypeCounts).filter(([_, count]) => count > 0)
-		: [];
-
-	const hasConnectors = connectors.length > 0;
-	const hasSources = hasConnectors || activeDocumentTypes.length > 0;
-	const totalSourceCount = connectors.length + activeDocumentTypes.length;
-
-	const handleMouseEnter = useCallback(() => {
-		// Clear any pending close timeout
-		if (closeTimeoutRef.current) {
-			clearTimeout(closeTimeoutRef.current);
-			closeTimeoutRef.current = null;
-		}
-		setIsOpen(true);
-	}, []);
-
-	const handleMouseLeave = useCallback(() => {
-		// Delay closing by 150ms for better UX
-		closeTimeoutRef.current = setTimeout(() => {
-			setIsOpen(false);
-		}, 150);
-	}, []);
-
-	if (!searchSpaceId) return null;
-
-	return (
-		<Popover open={isOpen} onOpenChange={setIsOpen}>
-			<PopoverTrigger asChild>
-				<button
-					type="button"
-					className={cn(
-						"size-[34px] rounded-full p-1 flex items-center justify-center transition-colors relative",
-						"hover:bg-muted-foreground/15 dark:hover:bg-muted-foreground/30",
-						"outline-none focus:outline-none focus-visible:outline-none",
-						"border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none",
-						"data-[state=open]:bg-transparent data-[state=open]:shadow-none data-[state=open]:ring-0",
-						"text-muted-foreground"
-					)}
-					aria-label={
-						hasSources ? `View ${totalSourceCount} connected sources` : "Add your first connector"
-					}
-					onMouseEnter={handleMouseEnter}
-					onMouseLeave={handleMouseLeave}
-				>
-					{isLoading ? (
-						<Loader2 className="size-4 animate-spin" />
-					) : (
-						<>
-							<Plug2 className="size-4" />
-							{totalSourceCount > 0 && (
-								<span className="absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full bg-primary text-primary-foreground shadow-sm">
-									{totalSourceCount > 99 ? "99+" : totalSourceCount}
-								</span>
-							)}
-						</>
-					)}
-				</button>
-			</PopoverTrigger>
-			<PopoverContent
-				side="bottom"
-				align="start"
-				className="w-64 p-3"
-				onMouseEnter={handleMouseEnter}
-				onMouseLeave={handleMouseLeave}
-			>
-				{hasSources ? (
-					<div className="space-y-3">
-						<div className="flex items-center justify-between">
-							<p className="text-xs font-medium text-muted-foreground">Connected Sources</p>
-							<span className="text-xs font-medium bg-muted px-1.5 py-0.5 rounded">
-								{totalSourceCount}
-							</span>
-						</div>
-						<div className="flex flex-wrap gap-2">
-							{/* Document types from the search space */}
-							{activeDocumentTypes.map(([docType]) => (
-								<div
-									key={docType}
-									className="flex items-center gap-1.5 rounded-md bg-muted/80 px-2.5 py-1.5 text-xs border border-border/50"
-								>
-									{getConnectorIcon(docType, "size-3.5")}
-									<span className="truncate max-w-[100px]">{getDocumentTypeLabel(docType)}</span>
-								</div>
-							))}
-							{/* Search source connectors */}
-							{connectors.map((connector) => (
-								<div
-									key={`connector-${connector.id}`}
-									className="flex items-center gap-1.5 rounded-md bg-muted/80 px-2.5 py-1.5 text-xs border border-border/50"
-								>
-									{getConnectorIcon(connector.connector_type, "size-3.5")}
-									<span className="truncate max-w-[100px]">{connector.name}</span>
-								</div>
-							))}
-						</div>
-						<div className="pt-1 border-t border-border/50">
-							<Link
-								href={`/dashboard/${searchSpaceId}/connectors/add`}
-								className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-							>
-								<Plus className="size-3" />
-								Add more sources
-								<ChevronRightIcon className="size-3" />
-							</Link>
-						</div>
-					</div>
-				) : (
-					<div className="space-y-2">
-						<p className="text-sm font-medium">No sources yet</p>
-						<p className="text-xs text-muted-foreground">
-							Add documents or connect data sources to enhance search results.
-						</p>
-						<Link
-							href={`/dashboard/${searchSpaceId}/connectors/add`}
-							className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors mt-1"
-						>
-							<Plus className="size-3" />
-							Add Connector
-						</Link>
-					</div>
-				)}
-			</PopoverContent>
-		</Popover>
-	);
-};
-
 const ComposerAction: FC = () => {
 	// Check if any attachments are still being processed (running AND progress < 100)
 	// When progress is 100, processing is done but waiting for send()

From 577ebdb3e7b0c640c70f3cbdfb71eed7d304b4b0 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 30 Dec 2025 15:51:10 +0530
Subject: [PATCH 03/28] feat: Refactor connector selection UI to a dialog with
 tabs, search, and connection logic, and add new dialog sub-components.

---
 .../assistant-ui/connector-popup.tsx          | 618 ++++++++++++++----
 surfsense_web/components/ui/dialog.tsx        |   2 +-
 2 files changed, 500 insertions(+), 120 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index fbe137287..12fd7144f 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -1,26 +1,170 @@
+"use client";
+
 import { useAtomValue } from "jotai";
 import {
-	ChevronRightIcon,
+	ChevronRight,
 	Loader2,
 	Plug2,
-	Plus,
+	Search,
 } from "lucide-react";
 import Link from "next/link";
-import {
-	type FC,
-	useCallback,
-	useRef,
-	useState,
-} from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { type FC, useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
 import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
+import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
 import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+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 { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
+import { authenticatedFetch } from "@/lib/auth-utils";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { cn } from "@/lib/utils";
 
+// OAuth Connectors (Quick Connect)
+const OAUTH_CONNECTORS = [
+	{
+		id: "google-gmail-connector",
+		title: "Gmail",
+		description: "Search through your emails",
+		connectorType: EnumConnectorName.GOOGLE_GMAIL_CONNECTOR,
+		authEndpoint: "/api/v1/auth/google/gmail/connector/add/",
+	},
+	{
+		id: "google-calendar-connector",
+		title: "Google Calendar",
+		description: "Search through your events",
+		connectorType: EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR,
+		authEndpoint: "/api/v1/auth/google/calendar/connector/add/",
+	},
+	{
+		id: "airtable-connector",
+		title: "Airtable",
+		description: "Search your Airtable bases",
+		connectorType: EnumConnectorName.AIRTABLE_CONNECTOR,
+		authEndpoint: "/api/v1/auth/airtable/connector/add/",
+	},
+];
+
+// Non-OAuth Connectors
+const OTHER_CONNECTORS = [
+	{
+		id: "slack-connector",
+		title: "Slack",
+		description: "Search Slack messages",
+		connectorType: EnumConnectorName.SLACK_CONNECTOR,
+	},
+	{
+		id: "discord-connector",
+		title: "Discord",
+		description: "Search Discord messages",
+		connectorType: EnumConnectorName.DISCORD_CONNECTOR,
+	},
+	{
+		id: "notion-connector",
+		title: "Notion",
+		description: "Search Notion pages",
+		connectorType: EnumConnectorName.NOTION_CONNECTOR,
+	},
+	{
+		id: "confluence-connector",
+		title: "Confluence",
+		description: "Search documentation",
+		connectorType: EnumConnectorName.CONFLUENCE_CONNECTOR,
+	},
+	{
+		id: "bookstack-connector",
+		title: "BookStack",
+		description: "Search BookStack docs",
+		connectorType: EnumConnectorName.BOOKSTACK_CONNECTOR,
+	},
+	{
+		id: "github-connector",
+		title: "GitHub",
+		description: "Search repositories",
+		connectorType: EnumConnectorName.GITHUB_CONNECTOR,
+	},
+	{
+		id: "linear-connector",
+		title: "Linear",
+		description: "Search issues & projects",
+		connectorType: EnumConnectorName.LINEAR_CONNECTOR,
+	},
+	{
+		id: "jira-connector",
+		title: "Jira",
+		description: "Search Jira issues",
+		connectorType: EnumConnectorName.JIRA_CONNECTOR,
+	},
+	{
+		id: "clickup-connector",
+		title: "ClickUp",
+		description: "Search ClickUp tasks",
+		connectorType: EnumConnectorName.CLICKUP_CONNECTOR,
+	},
+	{
+		id: "luma-connector",
+		title: "Luma",
+		description: "Search Luma events",
+		connectorType: EnumConnectorName.LUMA_CONNECTOR,
+	},
+	{
+		id: "elasticsearch-connector",
+		title: "Elasticsearch",
+		description: "Search ES indexes",
+		connectorType: EnumConnectorName.ELASTICSEARCH_CONNECTOR,
+	},
+	{
+		id: "webcrawler-connector",
+		title: "Web Pages",
+		description: "Crawl web content",
+		connectorType: EnumConnectorName.WEBCRAWLER_CONNECTOR,
+	},
+	{
+		id: "tavily-api",
+		title: "Tavily AI",
+		description: "Search with Tavily",
+		connectorType: EnumConnectorName.TAVILY_API,
+	},
+	{
+		id: "searxng",
+		title: "SearxNG",
+		description: "Search with SearxNG",
+		connectorType: EnumConnectorName.SEARXNG_API,
+	},
+	{
+		id: "linkup-api",
+		title: "Linkup API",
+		description: "Search with Linkup",
+		connectorType: EnumConnectorName.LINKUP_API,
+	},
+	{
+		id: "baidu-search-api",
+		title: "Baidu Search",
+		description: "Search with Baidu",
+		connectorType: EnumConnectorName.BAIDU_SEARCH_API,
+	},
+];
+
+import {
+	Tabs,
+	TabsContent,
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs";
+
 export const ConnectorIndicator: FC = () => {
+	const router = useRouter();
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
 	const { connectors, isLoading: connectorsLoading } = useSearchSourceConnectors(
 		false,
@@ -28,11 +172,34 @@ export const ConnectorIndicator: FC = () => {
 	);
 	const { data: documentTypeCounts, isLoading: documentTypesLoading } =
 		useAtomValue(documentTypeCountsAtom);
+	const { data: allConnectors } = useAtomValue(connectorsAtom);
+	const pathname = usePathname();
 	const [isOpen, setIsOpen] = useState(false);
-	const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+	const [activeTab, setActiveTab] = useState("all");
+	const [connectingId, setConnectingId] = useState<string | null>(null);
+	const [isScrolled, setIsScrolled] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
 
 	const isLoading = connectorsLoading || documentTypesLoading;
 
+	// Synchronize state with URL path
+	useEffect(() => {
+		const pathParts = window.location.pathname.split("/");
+		const connectorsIdx = pathParts.indexOf("connectors");
+		
+		if (connectorsIdx !== -1) {
+			if (!isOpen) setIsOpen(true);
+			
+			// Detect tab from URL: .../connectors/active or .../connectors/all
+			const tabFromUrl = pathParts[connectorsIdx + 1];
+			if (tabFromUrl === "active" || tabFromUrl === "all") {
+				if (activeTab !== tabFromUrl) setActiveTab(tabFromUrl);
+			}
+		} else {
+			if (isOpen) setIsOpen(false);
+		}
+	}, [pathname, isOpen, activeTab]);
+
 	// Get document types that have documents in the search space
 	const activeDocumentTypes = documentTypeCounts
 		? Object.entries(documentTypeCounts).filter(([_, count]) => count > 0)
@@ -42,122 +209,335 @@ export const ConnectorIndicator: FC = () => {
 	const hasSources = hasConnectors || activeDocumentTypes.length > 0;
 	const totalSourceCount = connectors.length + activeDocumentTypes.length;
 
-	const handleMouseEnter = useCallback(() => {
-		// Clear any pending close timeout
-		if (closeTimeoutRef.current) {
-			clearTimeout(closeTimeoutRef.current);
-			closeTimeoutRef.current = null;
-		}
-		setIsOpen(true);
-	}, []);
+	// Check which connectors are already connected
+	const connectedTypes = new Set(
+		(allConnectors || []).map((c: SearchSourceConnector) => c.connector_type)
+	);
 
-	const handleMouseLeave = useCallback(() => {
-		// Delay closing by 150ms for better UX
-		closeTimeoutRef.current = setTimeout(() => {
-			setIsOpen(false);
-		}, 150);
+	// Filter connectors based on search
+	const filteredOAuth = OAUTH_CONNECTORS.filter(c => 
+		c.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+		c.description.toLowerCase().includes(searchQuery.toLowerCase())
+	);
+
+	const filteredOther = OTHER_CONNECTORS.filter(c => 
+		c.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
+		c.description.toLowerCase().includes(searchQuery.toLowerCase())
+	);
+
+	// Handle OAuth connection
+	const handleConnectOAuth = useCallback(
+		async (connector: (typeof OAUTH_CONNECTORS)[0]) => {
+			if (!searchSpaceId || !connector.authEndpoint) return;
+
+			try {
+				setConnectingId(connector.id);
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}${connector.authEndpoint}?space_id=${searchSpaceId}`,
+					{ method: "GET" }
+				);
+
+				if (!response.ok) {
+					throw new Error(`Failed to initiate ${connector.title} OAuth`);
+				}
+
+				const data = await response.json();
+				window.location.href = data.auth_url;
+			} catch (error) {
+				console.error(`Error connecting to ${connector.title}:`, error);
+				toast.error(`Failed to connect to ${connector.title}`);
+			} finally {
+				setConnectingId(null);
+			}
+		},
+		[searchSpaceId]
+	);
+
+	const handleOpenChange = useCallback(
+		(open: boolean) => {
+			setIsOpen(open);
+
+			const currentPath = window.location.pathname;
+			const basePath = currentPath.split("/connectors")[0].replace(/\/$/, "");
+			
+			if (open) {
+				// Base state is /connectors/all
+				const newUrl = `${basePath}/connectors/${activeTab}`;
+				window.history.pushState({ modal: true }, "", newUrl);
+			} else {
+				// Return to base chat path
+				window.history.pushState({ modal: false }, "", basePath || "/");
+				setIsScrolled(false);
+				setSearchQuery("");
+			}
+		},
+		[activeTab]
+	);
+
+	const handleTabChange = useCallback(
+		(value: string) => {
+			setActiveTab(value);
+			const currentPath = window.location.pathname;
+			const basePath = currentPath.split("/connectors")[0].replace(/\/$/, "");
+			
+			// Update URL to reflect the new tab state
+			const newUrl = `${basePath}/connectors/${value}`;
+			window.history.replaceState({ modal: true }, "", newUrl);
+		},
+		[]
+	);
+
+	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		setIsScrolled(e.currentTarget.scrollTop > 0);
 	}, []);
 
 	if (!searchSpaceId) return null;
 
 	return (
-		<Popover open={isOpen} onOpenChange={setIsOpen}>
-			<PopoverTrigger asChild>
-				<button
-					type="button"
-					className={cn(
-						"size-[34px] rounded-full p-1 flex items-center justify-center transition-colors relative",
-						"hover:bg-muted-foreground/15 dark:hover:bg-muted-foreground/30",
-						"outline-none focus:outline-none focus-visible:outline-none",
-						"border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none",
-						"data-[state=open]:bg-transparent data-[state=open]:shadow-none data-[state=open]:ring-0",
-						"text-muted-foreground"
-					)}
-					aria-label={
-						hasSources ? `View ${totalSourceCount} connected sources` : "Add your first connector"
-					}
-					onMouseEnter={handleMouseEnter}
-					onMouseLeave={handleMouseLeave}
-				>
-					{isLoading ? (
-						<Loader2 className="size-4 animate-spin" />
-					) : (
-						<>
-							<Plug2 className="size-4" />
-							{totalSourceCount > 0 && (
-								<span className="absolute -top-0.5 -right-0.5 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full bg-primary text-primary-foreground shadow-sm">
-									{totalSourceCount > 99 ? "99+" : totalSourceCount}
-								</span>
-							)}
-						</>
-					)}
-				</button>
-			</PopoverTrigger>
-			<PopoverContent
+		<Dialog open={isOpen} onOpenChange={handleOpenChange}>
+			<TooltipIconButton
+				tooltip={hasSources ? `Manage ${totalSourceCount} sources` : "Connect your data"}
 				side="bottom"
-				align="start"
-				className="w-64 p-3"
-				onMouseEnter={handleMouseEnter}
-				onMouseLeave={handleMouseLeave}
-			>
-				{hasSources ? (
-					<div className="space-y-3">
-						<div className="flex items-center justify-between">
-							<p className="text-xs font-medium text-muted-foreground">Connected Sources</p>
-							<span className="text-xs font-medium bg-muted px-1.5 py-0.5 rounded">
-								{totalSourceCount}
-							</span>
-						</div>
-						<div className="flex flex-wrap gap-2">
-							{/* Document types from the search space */}
-							{activeDocumentTypes.map(([docType]) => (
-								<div
-									key={docType}
-									className="flex items-center gap-1.5 rounded-md bg-muted/80 px-2.5 py-1.5 text-xs border border-border/50"
-								>
-									{getConnectorIcon(docType, "size-3.5")}
-									<span className="truncate max-w-[100px]">{getDocumentTypeLabel(docType)}</span>
-								</div>
-							))}
-							{/* Search source connectors */}
-							{connectors.map((connector) => (
-								<div
-									key={`connector-${connector.id}`}
-									className="flex items-center gap-1.5 rounded-md bg-muted/80 px-2.5 py-1.5 text-xs border border-border/50"
-								>
-									{getConnectorIcon(connector.connector_type, "size-3.5")}
-									<span className="truncate max-w-[100px]">{connector.name}</span>
-								</div>
-							))}
-						</div>
-						<div className="pt-1 border-t border-border/50">
-							<Link
-								href={`/dashboard/${searchSpaceId}/connectors/add`}
-								className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
-							>
-								<Plus className="size-3" />
-								Add more sources
-								<ChevronRightIcon className="size-3" />
-							</Link>
-						</div>
-					</div>
-				) : (
-					<div className="space-y-2">
-						<p className="text-sm font-medium">No sources yet</p>
-						<p className="text-xs text-muted-foreground">
-							Add documents or connect data sources to enhance search results.
-						</p>
-						<Link
-							href={`/dashboard/${searchSpaceId}/connectors/add`}
-							className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 transition-colors mt-1"
-						>
-							<Plus className="size-3" />
-							Add Connector
-						</Link>
-					</div>
+				className={cn(
+					"size-[34px] rounded-full p-1 flex items-center justify-center transition-colors relative",
+					"hover:bg-muted-foreground/15 dark:hover:bg-muted-foreground/30",
+					"outline-none focus:outline-none focus-visible:outline-none font-semibold text-xs",
+					"border-0 ring-0 focus:ring-0 shadow-none focus:shadow-none"
 				)}
-			</PopoverContent>
-		</Popover>
+				aria-label={
+					hasSources ? `View ${totalSourceCount} connected sources` : "Add your first connector"
+				}
+				onClick={() => handleOpenChange(true)}
+			>
+				{isLoading ? (
+					<Loader2 className="size-4 animate-spin" />
+				) : (
+					<>
+						<Plug2 className="size-4 stroke-[1.5px]" />
+						{totalSourceCount > 0 && (
+							<span className="absolute -top-0.5 right-0 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full bg-primary text-primary-foreground shadow-sm">
+								{totalSourceCount > 99 ? "99+" : totalSourceCount}
+							</span>
+						)}
+					</>
+				)}
+			</TooltipIconButton>
+
+			<DialogContent className="max-w-3xl h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border-0 bg-muted text-foreground [&>button]:right-12 [&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
+				<Tabs value={activeTab} onValueChange={handleTabChange} className="flex-1 flex flex-col min-h-0">
+					{/* Header */}
+					<div
+						className={cn(
+							"flex-shrink-0 px-12 pt-10 transition-shadow duration-200 relative z-10",
+							isScrolled && "shadow-xl bg-muted/50 backdrop-blur-md"
+						)}
+					>
+						<DialogHeader>
+							<DialogTitle className="text-3xl font-semibold tracking-tight">Connectors</DialogTitle>
+							<DialogDescription className="text-base text-muted-foreground/80 mt-1.5">
+								Search across all your apps and data in one place.
+							</DialogDescription>
+						</DialogHeader>
+
+						<div className="flex items-center gap-4 mt-8 border-b border-white/5">
+							<TabsList className="bg-transparent p-0 gap-8 h-auto">
+								<TabsTrigger 
+									value="all" 
+									className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-white transition-all text-base font-medium text-muted-foreground data-[state=active]:text-foreground"
+								>
+									All Connectors
+								</TabsTrigger>
+								<TabsTrigger 
+									value="active" 
+									className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-white transition-all text-base font-medium flex items-center gap-2 text-muted-foreground data-[state=active]:text-foreground"
+								>
+									Active
+									{totalSourceCount > 0 && (
+										<span className="px-1.5 py-0.5 rounded-full bg-muted-foreground/15 text-[10px] font-bold">
+											{totalSourceCount}
+										</span>
+									)}
+								</TabsTrigger>
+							</TabsList>
+							<div className="ml-auto w-64 relative">
+								<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/60" />
+								<input 
+									type="text"
+									placeholder="Search connectors..."
+									className="w-full bg-white/5 hover:bg-white/10 focus:bg-white/10 border border-transparent focus:border-white/10 rounded-lg pl-9 pr-4 py-1.5 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
+									value={searchQuery}
+									onChange={(e) => setSearchQuery(e.target.value)}
+								/>
+							</div>
+						</div>
+					</div>
+
+					{/* Content */}
+					<div className="flex-1 min-h-0 overflow-y-auto" onScroll={handleScroll}>
+						<div className="px-12 py-8">
+							<TabsContent value="all" className="m-0 space-y-8">
+								{/* Quick Connect */}
+								{filteredOAuth.length > 0 && (
+									<section>
+										<div className="flex items-center gap-2 mb-4">
+											<h3 className="text-sm font-semibold text-muted-foreground">Quick Connect</h3>
+										</div>
+										<div className="grid grid-cols-2 gap-3">
+											{filteredOAuth.map((connector) => {
+												const isConnected = connectedTypes.has(connector.connectorType);
+												const isConnecting = connectingId === connector.id;
+
+												return (
+													<div
+														key={connector.id}
+														className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-transparent bg-white/5 hover:bg-white/10"
+													>
+														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-white/5 border border-white/5">
+															{getConnectorIcon(connector.connectorType, "size-6")}
+														</div>
+														<div className="flex-1 min-w-0">
+															<div className="flex items-center gap-2">
+																<span className="text-[14px] font-semibold leading-tight">{connector.title}</span>
+																{isConnected && (
+																	<span className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" title="Connected" />
+																)}
+															</div>
+															<p className="text-[11px] text-muted-foreground truncate mt-1">
+																{isConnected ? "Connected" : connector.description}
+															</p>
+														</div>
+														<Button
+															size="sm"
+															variant={isConnected ? "outline" : "default"}
+															className="h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium"
+															onClick={() =>
+																isConnected
+																	? router.push(
+																			`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
+																		)
+																	: handleConnectOAuth(connector)
+															}
+															disabled={isConnecting}
+														>
+															{isConnecting ? (
+																<Loader2 className="size-3 animate-spin" />
+															) : isConnected ? (
+																"Manage"
+															) : (
+																"Connect"
+															)}
+														</Button>
+													</div>
+												);
+											})}
+										</div>
+									</section>
+								)}
+
+								{/* More Integrations */}
+								{filteredOther.length > 0 && (
+									<section>
+										<div className="flex items-center gap-2 mb-4">
+											<h3 className="text-sm font-semibold text-muted-foreground">More Integrations</h3>
+										</div>
+										<div className="grid grid-cols-2 gap-3">
+											{filteredOther.map((connector) => {
+												const isConnected = connectedTypes.has(connector.connectorType);
+
+												return (
+													<Link
+														key={connector.id}
+														href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
+														className="group flex items-center gap-4 p-4 rounded-xl transition-all duration-150 border border-transparent bg-white/5 hover:bg-white/10"
+													>
+														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors bg-white/5 border border-white/5">
+															{getConnectorIcon(connector.connectorType, "size-6")}
+														</div>
+														<div className="flex-1 min-w-0">
+															<div className="flex items-center gap-2">
+																<span className="text-[14px] font-semibold leading-tight">{connector.title}</span>
+																{isConnected && (
+																	<span className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" title="Connected" />
+																)}
+															</div>
+															<p className="text-[11px] text-muted-foreground truncate mt-1">
+																{connector.description}
+															</p>
+														</div>
+														<ChevronRight className="size-4 text-muted-foreground/50 group-hover:text-foreground transition-colors flex-shrink-0" />
+													</Link>
+												);
+											})}
+										</div>
+									</section>
+								)}
+							</TabsContent>
+
+							<TabsContent value="active" className="m-0">
+								{hasSources ? (
+									<div className="space-y-6">
+										<div className="flex items-center gap-2 mb-4">
+											<h3 className="text-sm font-semibold text-muted-foreground">Currently Active</h3>
+										</div>
+										<div className="grid grid-cols-2 gap-3">
+											{activeDocumentTypes.map(([docType, count]) => (
+												<div
+													key={docType}
+													className="flex items-center gap-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 border border-transparent transition-all"
+												>
+													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-white/5 border border-white/5">
+														{getConnectorIcon(docType, "size-6")}
+													</div>
+													<div>
+														<p className="text-[14px] font-semibold leading-tight">
+															{getDocumentTypeLabel(docType)}
+														</p>
+														<p className="text-[11px] text-muted-foreground mt-1">
+															{count as number} documents indexed
+														</p>
+													</div>
+												</div>
+											))}
+											{connectors.map((connector) => (
+												<div
+													key={`connector-${connector.id}`}
+													className="flex items-center gap-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 border border-transparent transition-all"
+												>
+													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-white/5 border border-white/5">
+														{getConnectorIcon(connector.connector_type, "size-6")}
+													</div>
+													<div className="flex-1 min-w-0">
+														<p className="text-[14px] font-semibold leading-tight truncate">
+															{connector.name}
+														</p>
+														<p className="text-[11px] text-muted-foreground mt-1">Status: Active</p>
+													</div>
+													<Button variant="ghost" size="sm" className="h-8 text-[11px]" onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`)}>
+														Manage
+													</Button>
+												</div>
+											))}
+										</div>
+									</div>
+								) : (
+									<div className="flex flex-col items-center justify-center py-20 text-center">
+										<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
+											<Plug2 className="size-8 text-muted-foreground/50" />
+										</div>
+										<h4 className="text-lg font-semibold">No active sources</h4>
+										<p className="text-sm text-muted-foreground mt-1 max-w-[280px]">
+											Connect your first service to start searching across all your data.
+										</p>
+										<TabsTrigger value="all" className="mt-6 text-primary hover:underline">
+											Browse available connectors
+										</TabsTrigger>
+									</div>
+								)}
+							</TabsContent>
+						</div>
+					</div>
+				</Tabs>
+			</DialogContent>
+		</Dialog>
 	);
 };
-
diff --git a/surfsense_web/components/ui/dialog.tsx b/surfsense_web/components/ui/dialog.tsx
index 47fcfeece..d04d76520 100644
--- a/surfsense_web/components/ui/dialog.tsx
+++ b/surfsense_web/components/ui/dialog.tsx
@@ -44,7 +44,7 @@ const DialogContent = React.forwardRef<
 			{...props}
 		>
 			{children}
-			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+			<DialogPrimitive.Close className="absolute right-4 top-4 z-50 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 				<X className="h-4 w-4" />
 				<span className="sr-only">Close</span>
 			</DialogPrimitive.Close>

From 733ec5df1348b32436084eafa4fd3b17eb76d47b Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 30 Dec 2025 16:05:38 +0530
Subject: [PATCH 04/28] feat: enhance connector popup responsiveness, update
 connector icon, and add a scroll fade effect.

---
 .../assistant-ui/connector-popup.tsx          | 55 +++++++++++--------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index 12fd7144f..bfcb68847 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -2,9 +2,9 @@
 
 import { useAtomValue } from "jotai";
 import {
+	Cable,
 	ChevronRight,
 	Loader2,
-	Plug2,
 	Search,
 } from "lucide-react";
 import Link from "next/link";
@@ -313,7 +313,7 @@ export const ConnectorIndicator: FC = () => {
 					<Loader2 className="size-4 animate-spin" />
 				) : (
 					<>
-						<Plug2 className="size-4 stroke-[1.5px]" />
+						<Cable className="size-4 stroke-[1.5px]" />
 						{totalSourceCount > 0 && (
 							<span className="absolute -top-0.5 right-0 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-medium rounded-full bg-primary text-primary-foreground shadow-sm">
 								{totalSourceCount > 99 ? "99+" : totalSourceCount}
@@ -323,24 +323,24 @@ export const ConnectorIndicator: FC = () => {
 				)}
 			</TooltipIconButton>
 
-			<DialogContent className="max-w-3xl h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border-0 bg-muted text-foreground [&>button]:right-12 [&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
+			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border-0 bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
 				<Tabs value={activeTab} onValueChange={handleTabChange} className="flex-1 flex flex-col min-h-0">
 					{/* Header */}
 					<div
 						className={cn(
-							"flex-shrink-0 px-12 pt-10 transition-shadow duration-200 relative z-10",
+							"flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10 transition-shadow duration-200 relative z-10",
 							isScrolled && "shadow-xl bg-muted/50 backdrop-blur-md"
 						)}
 					>
 						<DialogHeader>
-							<DialogTitle className="text-3xl font-semibold tracking-tight">Connectors</DialogTitle>
-							<DialogDescription className="text-base text-muted-foreground/80 mt-1.5">
+							<DialogTitle className="text-2xl sm:text-3xl font-semibold tracking-tight">Connectors</DialogTitle>
+							<DialogDescription className="text-sm sm:text-base text-muted-foreground/80 mt-1 sm:mt-1.5">
 								Search across all your apps and data in one place.
 							</DialogDescription>
 						</DialogHeader>
 
-						<div className="flex items-center gap-4 mt-8 border-b border-white/5">
-							<TabsList className="bg-transparent p-0 gap-8 h-auto">
+						<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-white/5">
+							<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
 								<TabsTrigger 
 									value="all" 
 									className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-white transition-all text-base font-medium text-muted-foreground data-[state=active]:text-foreground"
@@ -359,22 +359,26 @@ export const ConnectorIndicator: FC = () => {
 									)}
 								</TabsTrigger>
 							</TabsList>
-							<div className="ml-auto w-64 relative">
-								<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/60" />
-								<input 
-									type="text"
-									placeholder="Search connectors..."
-									className="w-full bg-white/5 hover:bg-white/10 focus:bg-white/10 border border-transparent focus:border-white/10 rounded-lg pl-9 pr-4 py-1.5 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
-									value={searchQuery}
-									onChange={(e) => setSearchQuery(e.target.value)}
-								/>
+
+							<div className="w-full sm:w-72 sm:pb-3">
+								<div className="relative">
+									<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/60" />
+									<input 
+										type="text"
+										placeholder="Search connectors..."
+										className="w-full bg-white/5 hover:bg-white/10 focus:bg-white/10 border border-transparent focus:border-white/10 rounded-lg pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
+										value={searchQuery}
+										onChange={(e) => setSearchQuery(e.target.value)}
+									/>
+								</div>
 							</div>
 						</div>
 					</div>
 
 					{/* Content */}
-					<div className="flex-1 min-h-0 overflow-y-auto" onScroll={handleScroll}>
-						<div className="px-12 py-8">
+					<div className="flex-1 min-h-0 relative overflow-hidden">
+						<div className="h-full overflow-y-auto" onScroll={handleScroll}>
+							<div className="px-6 sm:px-12 py-6 sm:py-8 pb-16 sm:pb-16">
 							<TabsContent value="all" className="m-0 space-y-8">
 								{/* Quick Connect */}
 								{filteredOAuth.length > 0 && (
@@ -382,7 +386,7 @@ export const ConnectorIndicator: FC = () => {
 										<div className="flex items-center gap-2 mb-4">
 											<h3 className="text-sm font-semibold text-muted-foreground">Quick Connect</h3>
 										</div>
-										<div className="grid grid-cols-2 gap-3">
+										<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
 											{filteredOAuth.map((connector) => {
 												const isConnected = connectedTypes.has(connector.connectorType);
 												const isConnecting = connectingId === connector.id;
@@ -440,7 +444,7 @@ export const ConnectorIndicator: FC = () => {
 										<div className="flex items-center gap-2 mb-4">
 											<h3 className="text-sm font-semibold text-muted-foreground">More Integrations</h3>
 										</div>
-										<div className="grid grid-cols-2 gap-3">
+										<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
 											{filteredOther.map((connector) => {
 												const isConnected = connectedTypes.has(connector.connectorType);
 
@@ -479,7 +483,7 @@ export const ConnectorIndicator: FC = () => {
 										<div className="flex items-center gap-2 mb-4">
 											<h3 className="text-sm font-semibold text-muted-foreground">Currently Active</h3>
 										</div>
-										<div className="grid grid-cols-2 gap-3">
+										<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
 											{activeDocumentTypes.map(([docType, count]) => (
 												<div
 													key={docType}
@@ -522,7 +526,7 @@ export const ConnectorIndicator: FC = () => {
 								) : (
 									<div className="flex flex-col items-center justify-center py-20 text-center">
 										<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
-											<Plug2 className="size-8 text-muted-foreground/50" />
+											<Cable className="size-8 text-muted-foreground/50" />
 										</div>
 										<h4 className="text-lg font-semibold">No active sources</h4>
 										<p className="text-sm text-muted-foreground mt-1 max-w-[280px]">
@@ -533,8 +537,11 @@ export const ConnectorIndicator: FC = () => {
 										</TabsTrigger>
 									</div>
 								)}
-							</TabsContent>
+								</TabsContent>
+							</div>
 						</div>
+						{/* Bottom fade shadow */}
+						<div className="absolute bottom-0 left-0 right-0 h-7 bg-gradient-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
 					</div>
 				</Tabs>
 			</DialogContent>

From 03559ddc01525e0269962eaf0759b71204645639 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 30 Dec 2025 17:28:15 +0530
Subject: [PATCH 05/28] style: Update connector popup styles for improved UI
 consistency, including border adjustments, background colors, and hover
 effects.

---
 .../assistant-ui/connector-popup.tsx          | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index bfcb68847..9043ef657 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -323,7 +323,7 @@ export const ConnectorIndicator: FC = () => {
 				)}
 			</TooltipIconButton>
 
-			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border-0 bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
+			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
 				<Tabs value={activeTab} onValueChange={handleTabChange} className="flex-1 flex flex-col min-h-0">
 					{/* Header */}
 					<div
@@ -339,19 +339,22 @@ export const ConnectorIndicator: FC = () => {
 							</DialogDescription>
 						</DialogHeader>
 
-						<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-white/5">
+						<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-black/5 dark:border-white/5">
 							<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
 								<TabsTrigger 
 									value="all" 
-									className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-white transition-all text-base font-medium text-muted-foreground data-[state=active]:text-foreground"
+									className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white transition-all text-base font-medium text-muted-foreground data-[state=active]:text-foreground"
 								>
 									All Connectors
 								</TabsTrigger>
 								<TabsTrigger 
 									value="active" 
-									className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-white transition-all text-base font-medium flex items-center gap-2 text-muted-foreground data-[state=active]:text-foreground"
+									className="group px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent transition-all text-base font-medium flex items-center gap-2 text-muted-foreground data-[state=active]:text-foreground relative"
 								>
-									Active
+									<span className="relative">
+										Active
+										<span className="absolute bottom-[-13.5px] left-1/2 -translate-x-1/2 w-12 h-[1.5px] bg-foreground dark:bg-white opacity-0 group-data-[state=active]:opacity-100 transition-all duration-200" />
+									</span>
 									{totalSourceCount > 0 && (
 										<span className="px-1.5 py-0.5 rounded-full bg-muted-foreground/15 text-[10px] font-bold">
 											{totalSourceCount}
@@ -360,13 +363,13 @@ export const ConnectorIndicator: FC = () => {
 								</TabsTrigger>
 							</TabsList>
 
-							<div className="w-full sm:w-72 sm:pb-3">
+							<div className="w-full sm:w-72 sm:pb-1">
 								<div className="relative">
 									<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/60" />
 									<input 
 										type="text"
-										placeholder="Search connectors..."
-										className="w-full bg-white/5 hover:bg-white/10 focus:bg-white/10 border border-transparent focus:border-white/10 rounded-lg pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
+										placeholder="Search"
+										className="w-full bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 focus:bg-black/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
 										value={searchQuery}
 										onChange={(e) => setSearchQuery(e.target.value)}
 									/>
@@ -394,9 +397,9 @@ export const ConnectorIndicator: FC = () => {
 												return (
 													<div
 														key={connector.id}
-														className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-transparent bg-white/5 hover:bg-white/10"
+														className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-border bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10"
 													>
-														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-white/5 border border-white/5">
+														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
 															{getConnectorIcon(connector.connectorType, "size-6")}
 														</div>
 														<div className="flex-1 min-w-0">
@@ -452,9 +455,9 @@ export const ConnectorIndicator: FC = () => {
 													<Link
 														key={connector.id}
 														href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
-														className="group flex items-center gap-4 p-4 rounded-xl transition-all duration-150 border border-transparent bg-white/5 hover:bg-white/10"
+														className="group flex items-center gap-4 p-4 rounded-xl transition-all duration-150 border border-border bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10"
 													>
-														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors bg-white/5 border border-white/5">
+														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
 															{getConnectorIcon(connector.connectorType, "size-6")}
 														</div>
 														<div className="flex-1 min-w-0">
@@ -487,9 +490,9 @@ export const ConnectorIndicator: FC = () => {
 											{activeDocumentTypes.map(([docType, count]) => (
 												<div
 													key={docType}
-													className="flex items-center gap-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 border border-transparent transition-all"
+													className="flex items-center gap-4 p-4 rounded-xl bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 border border-border transition-all"
 												>
-													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-white/5 border border-white/5">
+													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
 														{getConnectorIcon(docType, "size-6")}
 													</div>
 													<div>
@@ -505,9 +508,9 @@ export const ConnectorIndicator: FC = () => {
 											{connectors.map((connector) => (
 												<div
 													key={`connector-${connector.id}`}
-													className="flex items-center gap-4 p-4 rounded-xl bg-white/5 hover:bg-white/10 border border-transparent transition-all"
+													className="flex items-center gap-4 p-4 rounded-xl bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 border border-border transition-all"
 												>
-													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-white/5 border border-white/5">
+													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
 														{getConnectorIcon(connector.connector_type, "size-6")}
 													</div>
 													<div className="flex-1 min-w-0">

From 2898192ac4666d971c29f250357592cdfd36ca92 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 30 Dec 2025 19:49:28 +0530
Subject: [PATCH 06/28] feat: Update redirect URLs in connector routes to
 include success parameters and improve indexing configuration handling in the
 connector popup.

---
 .../routes/airtable_add_connector_route.py    |   5 +-
 .../google_calendar_add_connector_route.py    |   4 +-
 .../google_gmail_add_connector_route.py       |   5 +-
 .../assistant-ui/connector-popup.tsx          | 599 ++++++++++++++++--
 4 files changed, 550 insertions(+), 63 deletions(-)

diff --git a/surfsense_backend/app/routes/airtable_add_connector_route.py b/surfsense_backend/app/routes/airtable_add_connector_route.py
index fa124f1c2..3bcbe4dc0 100644
--- a/surfsense_backend/app/routes/airtable_add_connector_route.py
+++ b/surfsense_backend/app/routes/airtable_add_connector_route.py
@@ -255,9 +255,10 @@ async def airtable_callback(
             await session.commit()
             logger.info(f"Successfully saved Airtable connector for user {user_id}")
 
-            # Redirect to the frontend success page
+            # Redirect to the frontend with success params for indexing config
+            # Using query params to auto-open the popup with config view on new-chat page
             return RedirectResponse(
-                url=f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/connectors/add/airtable-connector?success=true"
+                url=f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/new-chat?modal=connectors&tab=all&success=true&connector=airtable-connector"
             )
 
         except ValidationError as e:
diff --git a/surfsense_backend/app/routes/google_calendar_add_connector_route.py b/surfsense_backend/app/routes/google_calendar_add_connector_route.py
index fa4ef5466..8bb685450 100644
--- a/surfsense_backend/app/routes/google_calendar_add_connector_route.py
+++ b/surfsense_backend/app/routes/google_calendar_add_connector_route.py
@@ -131,8 +131,10 @@ async def calendar_callback(
             session.add(db_connector)
             await session.commit()
             await session.refresh(db_connector)
+            # Redirect to the frontend with success params for indexing config
+            # Using query params to auto-open the popup with config view on new-chat page
             return RedirectResponse(
-                f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/connectors/add/google-calendar-connector?success=true"
+                f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/new-chat?modal=connectors&tab=all&success=true&connector=google-calendar-connector"
             )
         except ValidationError as e:
             await session.rollback()
diff --git a/surfsense_backend/app/routes/google_gmail_add_connector_route.py b/surfsense_backend/app/routes/google_gmail_add_connector_route.py
index 6d37da244..21fcf2c38 100644
--- a/surfsense_backend/app/routes/google_gmail_add_connector_route.py
+++ b/surfsense_backend/app/routes/google_gmail_add_connector_route.py
@@ -135,9 +135,10 @@ async def gmail_callback(
                 f"Successfully created Gmail connector for user {user_id} with ID {db_connector.id}"
             )
 
-            # Redirect to the frontend success page
+            # Redirect to the frontend with success params for indexing config
+            # Using query params to auto-open the popup with config view on new-chat page
             return RedirectResponse(
-                url=f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/connectors/add/google-gmail-connector?success=true"
+                url=f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/new-chat?modal=connectors&tab=all&success=true&connector=google-gmail-connector"
             )
 
         except IntegrityError as e:
diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index 9043ef657..e55c13448 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -1,17 +1,22 @@
 "use client";
 
+import { format, subDays, subYears } from "date-fns";
 import { useAtomValue } from "jotai";
 import {
+	ArrowLeft,
 	Cable,
+	Calendar as CalendarIcon,
+	Check,
 	ChevronRight,
 	Loader2,
 	Search,
 } from "lucide-react";
 import Link from "next/link";
-import { usePathname, useRouter } from "next/navigation";
-import { type FC, useCallback, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { type FC, useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
+import { indexConnectorMutationAtom, updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
 import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
 import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
@@ -23,14 +28,35 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { EnumConnectorName } from "@/contracts/enums/connector";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { useLogsSummary } from "@/hooks/use-logs";
 import { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
 import { authenticatedFetch } from "@/lib/auth-utils";
+import { queryClient } from "@/lib/query-client/client";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { cn } from "@/lib/utils";
 
+// Type for the indexing configuration state
+interface IndexingConfigState {
+	connectorType: string;
+	connectorId: number;
+	connectorTitle: string;
+}
+
 // OAuth Connectors (Quick Connect)
 const OAUTH_CONNECTORS = [
 	{
@@ -165,44 +191,243 @@ import {
 
 export const ConnectorIndicator: FC = () => {
 	const router = useRouter();
+	const searchParams = useSearchParams();
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
-	const { connectors, isLoading: connectorsLoading } = useSearchSourceConnectors(
+	const { connectors, isLoading: connectorsLoading, refreshConnectors } = useSearchSourceConnectors(
 		false,
 		searchSpaceId ? Number(searchSpaceId) : undefined
 	);
 	const { data: documentTypeCounts, isLoading: documentTypesLoading } =
 		useAtomValue(documentTypeCountsAtom);
-	const { data: allConnectors } = useAtomValue(connectorsAtom);
-	const pathname = usePathname();
+	const { data: allConnectors, refetch: refetchAllConnectors } = useAtomValue(connectorsAtom);
+	const { mutateAsync: indexConnector } = useAtomValue(indexConnectorMutationAtom);
+	const { mutateAsync: updateConnector } = useAtomValue(updateConnectorMutationAtom);
 	const [isOpen, setIsOpen] = useState(false);
 	const [activeTab, setActiveTab] = useState("all");
 	const [connectingId, setConnectingId] = useState<string | null>(null);
 	const [isScrolled, setIsScrolled] = useState(false);
 	const [searchQuery, setSearchQuery] = useState("");
+	
+	// Indexing configuration state (shown after OAuth success)
+	const [indexingConfig, setIndexingConfig] = useState<IndexingConfigState | null>(null);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [isStartingIndexing, setIsStartingIndexing] = useState(false);
+	
+	// Periodic indexing state
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440"); // Default: daily
+
+	// Helper function to get frequency label
+	const getFrequencyLabel = useCallback((minutes: string): string => {
+		switch (minutes) {
+			case "15": return "15 minutes";
+			case "60": return "hour";
+			case "360": return "6 hours";
+			case "720": return "12 hours";
+			case "1440": return "day";
+			case "10080": return "week";
+			default: return `${minutes} minutes`;
+		}
+	}, []);
+
+	// Track active indexing tasks
+	const { summary: logsSummary } = useLogsSummary(
+		searchSpaceId ? Number(searchSpaceId) : 0,
+		24,
+		{
+			enablePolling: true,
+			refetchInterval: 5000,
+		}
+	);
+
+	// Get connector IDs that are currently being indexed
+	const indexingConnectorIds = useMemo(() => {
+		if (!logsSummary?.active_tasks) return new Set<number>();
+		return new Set(
+			logsSummary.active_tasks
+				.filter((task) => task.source?.includes("connector_indexing"))
+				.map((task) => {
+					// Extract connector ID from task metadata or source
+					const match = task.source?.match(/connector[_-]?(\d+)/i);
+					return match ? parseInt(match[1], 10) : null;
+				})
+				.filter((id): id is number => id !== null)
+		);
+	}, [logsSummary?.active_tasks]);
 
 	const isLoading = connectorsLoading || documentTypesLoading;
 
-	// Synchronize state with URL path
+	// Synchronize state with URL query params
 	useEffect(() => {
-		const pathParts = window.location.pathname.split("/");
-		const connectorsIdx = pathParts.indexOf("connectors");
+		const modalParam = searchParams.get("modal");
+		const tabParam = searchParams.get("tab");
+		const viewParam = searchParams.get("view");
+		const connectorParam = searchParams.get("connector");
 		
-		if (connectorsIdx !== -1) {
+		if (modalParam === "connectors") {
 			if (!isOpen) setIsOpen(true);
 			
-			// Detect tab from URL: .../connectors/active or .../connectors/all
-			const tabFromUrl = pathParts[connectorsIdx + 1];
-			if (tabFromUrl === "active" || tabFromUrl === "all") {
-				if (activeTab !== tabFromUrl) setActiveTab(tabFromUrl);
+			// Detect tab from URL query param
+			if (tabParam === "active" || tabParam === "all") {
+				if (activeTab !== tabParam) setActiveTab(tabParam);
+			}
+			
+			// Restore indexing config view from URL if present (e.g., on page refresh)
+			if (viewParam === "configure" && connectorParam && !indexingConfig) {
+				const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
+				if (oauthConnector && allConnectors) {
+					const existingConnector = allConnectors.find(
+						(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
+					);
+					if (existingConnector) {
+						setIndexingConfig({
+							connectorType: oauthConnector.connectorType,
+							connectorId: existingConnector.id,
+							connectorTitle: oauthConnector.title,
+						});
+					}
+				}
 			}
 		} else {
 			if (isOpen) setIsOpen(false);
 		}
-	}, [pathname, isOpen, activeTab]);
+	}, [searchParams, isOpen, activeTab, indexingConfig, allConnectors]);
+
+	// Detect OAuth success and transition to config view
+	useEffect(() => {
+		const success = searchParams.get("success");
+		const connectorParam = searchParams.get("connector");
+		const modalParam = searchParams.get("modal");
+		
+		if (success === "true" && connectorParam && searchSpaceId && modalParam === "connectors") {
+			// Find the OAuth connector info
+			const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
+			if (oauthConnector) {
+				// Refetch connectors to get the newly created connector
+				refetchAllConnectors().then((result) => {
+					const newConnector = result.data?.find(
+						(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
+					);
+					if (newConnector) {
+						setIndexingConfig({
+							connectorType: oauthConnector.connectorType,
+							connectorId: newConnector.id,
+							connectorTitle: oauthConnector.title,
+						});
+						setIsOpen(true);
+						// Update URL to reflect config view (replace success with view=configure)
+						const url = new URL(window.location.href);
+						url.searchParams.delete("success");
+						url.searchParams.set("view", "configure");
+						// Keep connector param for URL restoration
+						window.history.replaceState({}, "", url.toString());
+					}
+				});
+			}
+		}
+	}, [searchParams, searchSpaceId, refetchAllConnectors]);
+
+	// Handle starting indexing
+	const handleStartIndexing = useCallback(async () => {
+		if (!indexingConfig || !searchSpaceId) return;
+
+		setIsStartingIndexing(true);
+		try {
+			const startDateStr = startDate ? format(startDate, "yyyy-MM-dd") : undefined;
+			const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
+
+			// Update periodic indexing settings if enabled
+			if (periodicEnabled) {
+				const frequency = parseInt(frequencyMinutes, 10);
+				await updateConnector({
+					id: indexingConfig.connectorId,
+					data: {
+						periodic_indexing_enabled: true,
+						indexing_frequency_minutes: frequency,
+					},
+				});
+			}
+
+			await indexConnector({
+				connector_id: indexingConfig.connectorId,
+				queryParams: {
+					search_space_id: searchSpaceId,
+					start_date: startDateStr,
+					end_date: endDateStr,
+				},
+			});
+
+			toast.success(`${indexingConfig.connectorTitle} indexing started`, {
+				description: periodicEnabled 
+					? `Periodic sync enabled every ${getFrequencyLabel(frequencyMinutes)}.`
+					: "You can continue working while we sync your data.",
+			});
+
+			// Close the config view and reset state
+			setIndexingConfig(null);
+			setStartDate(undefined);
+			setEndDate(undefined);
+			setPeriodicEnabled(false);
+			setFrequencyMinutes("1440");
+			
+			// Clear config-related URL params and switch to active tab
+			const url = new URL(window.location.href);
+			url.searchParams.delete("view");
+			url.searchParams.delete("connector");
+			url.searchParams.set("tab", "active");
+			window.history.replaceState({}, "", url.toString());
+			setActiveTab("active");
+			
+			// Refresh connectors list
+			refreshConnectors();
+			queryClient.invalidateQueries({
+				queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
+			});
+		} catch (error) {
+			console.error("Error starting indexing:", error);
+			toast.error("Failed to start indexing");
+		} finally {
+			setIsStartingIndexing(false);
+		}
+	}, [indexingConfig, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, refreshConnectors, getFrequencyLabel]);
+
+	// Handle skipping indexing for now
+	const handleSkipIndexing = useCallback(() => {
+		setIndexingConfig(null);
+		setStartDate(undefined);
+		setEndDate(undefined);
+		setPeriodicEnabled(false);
+		setFrequencyMinutes("1440");
+		
+		// Clear config-related URL params
+		const url = new URL(window.location.href);
+		url.searchParams.delete("view");
+		url.searchParams.delete("connector");
+		window.history.replaceState({}, "", url.toString());
+	}, []);
+
+	// Quick date range handlers
+	const handleLast30Days = useCallback(() => {
+		const today = new Date();
+		setStartDate(subDays(today, 30));
+		setEndDate(today);
+	}, []);
+
+	const handleLastYear = useCallback(() => {
+		const today = new Date();
+		setStartDate(subYears(today, 1));
+		setEndDate(today);
+	}, []);
+
+	const handleClearDates = useCallback(() => {
+		setStartDate(undefined);
+		setEndDate(undefined);
+	}, []);
 
 	// Get document types that have documents in the search space
 	const activeDocumentTypes = documentTypeCounts
-		? Object.entries(documentTypeCounts).filter(([_, count]) => count > 0)
+		? Object.entries(documentTypeCounts).filter(([, count]) => count > 0)
 		: [];
 
 	const hasConnectors = connectors.length > 0;
@@ -257,32 +482,43 @@ export const ConnectorIndicator: FC = () => {
 		(open: boolean) => {
 			setIsOpen(open);
 
-			const currentPath = window.location.pathname;
-			const basePath = currentPath.split("/connectors")[0].replace(/\/$/, "");
-			
 			if (open) {
-				// Base state is /connectors/all
-				const newUrl = `${basePath}/connectors/${activeTab}`;
-				window.history.pushState({ modal: true }, "", newUrl);
+				// Add modal query params to current URL
+				const url = new URL(window.location.href);
+				url.searchParams.set("modal", "connectors");
+				url.searchParams.set("tab", activeTab);
+				window.history.pushState({ modal: true }, "", url.toString());
 			} else {
-				// Return to base chat path
-				window.history.pushState({ modal: false }, "", basePath || "/");
+				// Remove modal query params from URL
+				const url = new URL(window.location.href);
+				url.searchParams.delete("modal");
+				url.searchParams.delete("tab");
+				url.searchParams.delete("success");
+				url.searchParams.delete("connector");
+				url.searchParams.delete("view");
+				window.history.pushState({ modal: false }, "", url.toString());
 				setIsScrolled(false);
 				setSearchQuery("");
+				// Reset indexing config when closing
+				if (!isStartingIndexing) {
+					setIndexingConfig(null);
+					setStartDate(undefined);
+					setEndDate(undefined);
+					setPeriodicEnabled(false);
+					setFrequencyMinutes("1440");
+				}
 			}
 		},
-		[activeTab]
+		[activeTab, isStartingIndexing]
 	);
 
 	const handleTabChange = useCallback(
 		(value: string) => {
 			setActiveTab(value);
-			const currentPath = window.location.pathname;
-			const basePath = currentPath.split("/connectors")[0].replace(/\/$/, "");
-			
-			// Update URL to reflect the new tab state
-			const newUrl = `${basePath}/connectors/${value}`;
-			window.history.replaceState({ modal: true }, "", newUrl);
+			// Update tab query param
+			const url = new URL(window.location.href);
+			url.searchParams.set("tab", value);
+			window.history.replaceState({ modal: true }, "", url.toString());
 		},
 		[]
 	);
@@ -323,8 +559,215 @@ export const ConnectorIndicator: FC = () => {
 				)}
 			</TooltipIconButton>
 
-			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
-				<Tabs value={activeTab} onValueChange={handleTabChange} className="flex-1 flex flex-col min-h-0">
+		<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
+			{/* Indexing Configuration View - shown after OAuth success */}
+			{indexingConfig ? (
+				<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+					{/* Fixed Header */}
+					<div className="flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10">
+						{/* Back button */}
+						<button
+							type="button"
+							onClick={handleSkipIndexing}
+							className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
+						>
+							<ArrowLeft className="size-4" />
+							Back to connectors
+						</button>
+
+						{/* Success header */}
+						<div className="flex items-center gap-4 mb-6">
+							<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-green-500/10 border border-green-500/20">
+								<Check className="size-7 text-green-500" />
+							</div>
+							<div>
+								<h2 className="text-2xl font-semibold tracking-tight">
+									{indexingConfig.connectorTitle} Connected!
+								</h2>
+								<p className="text-muted-foreground mt-1">
+									Configure when to start syncing your data
+								</p>
+							</div>
+						</div>
+					</div>
+
+					{/* Scrollable Content */}
+					<div className="flex-1 min-h-0 overflow-y-auto px-6 sm:px-12">
+						<div className="space-y-6 pb-6">
+						<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
+							<h3 className="font-medium mb-4">Select Date Range</h3>
+							<p className="text-sm text-muted-foreground mb-6">
+								Choose how far back you want to sync your data. You can always re-index later with different dates.
+							</p>
+
+							<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+								{/* Start Date */}
+								<div className="space-y-2">
+									<Label htmlFor="start-date">Start Date</Label>
+									<Popover>
+										<PopoverTrigger asChild>
+											<Button
+												id="start-date"
+												variant="outline"
+												className={cn(
+													"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
+													!startDate && "text-muted-foreground"
+												)}
+											>
+												<CalendarIcon className="mr-2 h-4 w-4" />
+												{startDate ? format(startDate, "PPP") : "Default (1 year ago)"}
+											</Button>
+										</PopoverTrigger>
+										<PopoverContent className="w-auto p-0 z-[100]" align="start">
+											<Calendar
+												mode="single"
+												selected={startDate}
+												onSelect={setStartDate}
+												disabled={(date) => date > new Date()}
+											/>
+										</PopoverContent>
+									</Popover>
+								</div>
+
+								{/* End Date */}
+								<div className="space-y-2">
+									<Label htmlFor="end-date">End Date</Label>
+									<Popover>
+										<PopoverTrigger asChild>
+											<Button
+												id="end-date"
+												variant="outline"
+												className={cn(
+													"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
+													!endDate && "text-muted-foreground"
+												)}
+											>
+												<CalendarIcon className="mr-2 h-4 w-4" />
+												{endDate ? format(endDate, "PPP") : "Default (Today)"}
+											</Button>
+										</PopoverTrigger>
+										<PopoverContent className="w-auto p-0 z-[100]" align="start">
+											<Calendar
+												mode="single"
+												selected={endDate}
+												onSelect={setEndDate}
+												disabled={(date) => date > new Date() || (startDate ? date < startDate : false)}
+											/>
+										</PopoverContent>
+									</Popover>
+								</div>
+							</div>
+
+							{/* Quick date range buttons */}
+							<div className="flex flex-wrap gap-2 mt-4">
+								<Button
+									type="button"
+									variant="outline"
+									size="sm"
+									onClick={handleClearDates}
+									className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
+								>
+									Clear Dates
+								</Button>
+								<Button
+									type="button"
+									variant="outline"
+									size="sm"
+									onClick={handleLast30Days}
+									className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
+								>
+									Last 30 Days
+								</Button>
+								<Button
+									type="button"
+									variant="outline"
+									size="sm"
+									onClick={handleLastYear}
+									className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
+								>
+									Last Year
+								</Button>
+							</div>
+						</div>
+
+						{/* Periodic Indexing Configuration */}
+						<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
+							<div className="flex items-center justify-between">
+								<div className="space-y-1">
+									<h3 className="font-medium">Enable Periodic Sync</h3>
+									<p className="text-sm text-muted-foreground">
+										Automatically re-index at regular intervals
+									</p>
+								</div>
+								<Switch
+									checked={periodicEnabled}
+									onCheckedChange={setPeriodicEnabled}
+								/>
+							</div>
+
+							{periodicEnabled && (
+								<div className="mt-4 pt-4 border-t border-border/100 space-y-3">
+									<div className="space-y-2">
+										<Label htmlFor="frequency">Sync Frequency</Label>
+										<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes}>
+											<SelectTrigger id="frequency" className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20">
+												<SelectValue placeholder="Select frequency" />
+											</SelectTrigger>
+											<SelectContent className="z-[100]">
+												<SelectItem value="15">Every 15 minutes</SelectItem>
+												<SelectItem value="60">Every hour</SelectItem>
+												<SelectItem value="360">Every 6 hours</SelectItem>
+												<SelectItem value="720">Every 12 hours</SelectItem>
+												<SelectItem value="1440">Daily</SelectItem>
+												<SelectItem value="10080">Weekly</SelectItem>
+											</SelectContent>
+										</Select>
+									</div>
+								</div>
+							)}
+						</div>
+
+						{/* Info box */}
+						<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
+							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
+								{getConnectorIcon(indexingConfig.connectorType, "size-4")}
+							</div>
+							<div className="text-sm">
+								<p className="font-medium">Indexing runs in the background</p>
+								<p className="text-muted-foreground mt-1">
+									You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
+								</p>
+							</div>
+						</div>
+						</div>
+					</div>
+
+					{/* Fixed Footer - Action buttons */}
+					<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 border-t border-border bg-muted">
+						<Button
+							variant="ghost"
+							onClick={handleSkipIndexing}
+							disabled={isStartingIndexing}
+						>
+							Skip for now
+						</Button>
+						<Button
+							onClick={handleStartIndexing}
+							disabled={isStartingIndexing}
+						>
+							{isStartingIndexing ? (
+								<>
+									<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+									Starting...
+								</>
+							) : (
+								"Start Indexing"
+							)}
+						</Button>
+					</div>
+				</div>
+			) : (
+			<Tabs value={activeTab} onValueChange={handleTabChange} className="flex-1 flex flex-col min-h-0">
 					{/* Header */}
 					<div
 						className={cn(
@@ -339,7 +782,7 @@ export const ConnectorIndicator: FC = () => {
 							</DialogDescription>
 						</DialogHeader>
 
-						<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-black/5 dark:border-white/5">
+						<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-slate-400/5 dark:border-white/5">
 							<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
 								<TabsTrigger 
 									value="all" 
@@ -369,7 +812,7 @@ export const ConnectorIndicator: FC = () => {
 									<input 
 										type="text"
 										placeholder="Search"
-										className="w-full bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 focus:bg-black/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
+										className="w-full bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 focus:bg-slate-400/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
 										value={searchQuery}
 										onChange={(e) => setSearchQuery(e.target.value)}
 									/>
@@ -397,9 +840,9 @@ export const ConnectorIndicator: FC = () => {
 												return (
 													<div
 														key={connector.id}
-														className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-border bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+														className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
 													>
-														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
+														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
 															{getConnectorIcon(connector.connectorType, "size-6")}
 														</div>
 														<div className="flex-1 min-w-0">
@@ -455,9 +898,9 @@ export const ConnectorIndicator: FC = () => {
 													<Link
 														key={connector.id}
 														href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
-														className="group flex items-center gap-4 p-4 rounded-xl transition-all duration-150 border border-border bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10"
+														className="group flex items-center gap-4 p-4 rounded-xl transition-all duration-150 border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
 													>
-														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
+														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
 															{getConnectorIcon(connector.connectorType, "size-6")}
 														</div>
 														<div className="flex-1 min-w-0">
@@ -490,9 +933,9 @@ export const ConnectorIndicator: FC = () => {
 											{activeDocumentTypes.map(([docType, count]) => (
 												<div
 													key={docType}
-													className="flex items-center gap-4 p-4 rounded-xl bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 border border-border transition-all"
+													className="flex items-center gap-4 p-4 rounded-xl bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 border border-border transition-all"
 												>
-													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
+													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
 														{getConnectorIcon(docType, "size-6")}
 													</div>
 													<div>
@@ -505,25 +948,64 @@ export const ConnectorIndicator: FC = () => {
 													</div>
 												</div>
 											))}
-											{connectors.map((connector) => (
-												<div
-													key={`connector-${connector.id}`}
-													className="flex items-center gap-4 p-4 rounded-xl bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 border border-border transition-all"
-												>
-													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/5">
-														{getConnectorIcon(connector.connector_type, "size-6")}
+											{connectors.map((connector) => {
+												const isIndexing = indexingConnectorIds.has(connector.id);
+												const activeTask = logsSummary?.active_tasks?.find(
+													(task) => task.source?.includes(`connector_${connector.id}`) || task.source?.includes(`connector-${connector.id}`)
+												);
+
+												return (
+													<div
+														key={`connector-${connector.id}`}
+														className={cn(
+															"flex items-center gap-4 p-4 rounded-xl border border-border transition-all",
+															isIndexing
+																? "bg-primary/5 border-primary/20"
+																: "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",
+															isIndexing
+																? "bg-primary/10 border-primary/20"
+																: "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
+														)}>
+															{getConnectorIcon(connector.connector_type, "size-6")}
+														</div>
+														<div className="flex-1 min-w-0">
+															<p className="text-[14px] font-semibold leading-tight truncate">
+																{connector.name}
+															</p>
+															{isIndexing ? (
+																<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
+																	<Loader2 className="size-3 animate-spin" />
+																	Indexing...
+																	{activeTask?.message && (
+																		<span className="text-muted-foreground truncate max-w-[150px]">
+																			• {activeTask.message}
+																		</span>
+																	)}
+																</p>
+															) : (
+																<p className="text-[11px] text-muted-foreground mt-1">
+																	{connector.last_indexed_at
+																		? `Last indexed: ${format(new Date(connector.last_indexed_at), "MMM d, yyyy")}`
+																		: "Never indexed"}
+																</p>
+															)}
+														</div>
+														<Button 
+															variant="ghost" 
+															size="sm" 
+															className="h-8 text-[11px]" 
+															onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`)}
+															disabled={isIndexing}
+														>
+															{isIndexing ? "Syncing..." : "Manage"}
+														</Button>
 													</div>
-													<div className="flex-1 min-w-0">
-														<p className="text-[14px] font-semibold leading-tight truncate">
-															{connector.name}
-														</p>
-														<p className="text-[11px] text-muted-foreground mt-1">Status: Active</p>
-													</div>
-													<Button variant="ghost" size="sm" className="h-8 text-[11px]" onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`)}>
-														Manage
-													</Button>
-												</div>
-											))}
+												);
+											})}
 										</div>
 									</div>
 								) : (
@@ -547,6 +1029,7 @@ export const ConnectorIndicator: FC = () => {
 						<div className="absolute bottom-0 left-0 right-0 h-7 bg-gradient-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
 					</div>
 				</Tabs>
+			)}
 			</DialogContent>
 		</Dialog>
 	);

From 32b4a09c0e803e1a2f66bbac8150da7108bb811b Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 30 Dec 2025 20:07:15 +0530
Subject: [PATCH 07/28] feat: Refactor connector popup to include new
 components for active and all connectors, enhance indexing configuration
 view, and improve date range selection functionality.

---
 .../assistant-ui/connector-popup.tsx          | 1022 ++---------------
 .../connector-popup/active-connectors-tab.tsx |  152 +++
 .../connector-popup/all-connectors-tab.tsx    |  125 ++
 .../connector-popup/connector-card.tsx        |   66 ++
 .../connector-popup/connector-constants.ts    |  134 +++
 .../connector-dialog-header.tsx               |   89 ++
 .../connector-popup/date-range-selector.tsx   |  140 +++
 .../assistant-ui/connector-popup/index.ts     |   19 +
 .../indexing-configuration-view.tsx           |  121 ++
 .../connector-popup/periodic-sync-config.tsx  |   65 ++
 .../connector-popup/use-connector-dialog.ts   |  295 +++++
 11 files changed, 1298 insertions(+), 930 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-card.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-dialog-header.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/date-range-selector.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/index.ts
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/periodic-sync-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts

diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index e55c13448..1e9e09869 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -1,197 +1,30 @@
 "use client";
 
-import { format, subDays, subYears } from "date-fns";
 import { useAtomValue } from "jotai";
-import {
-	ArrowLeft,
-	Cable,
-	Calendar as CalendarIcon,
-	Check,
-	ChevronRight,
-	Loader2,
-	Search,
-} from "lucide-react";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import { type FC, useCallback, useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
-import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
-import { indexConnectorMutationAtom, updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
+import { Cable, Loader2 } from "lucide-react";
+import { type FC, useMemo } from "react";
 import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
+import { useLogsSummary } from "@/hooks/use-logs";
+import { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import {
 	Dialog,
 	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
 } from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Label } from "@/components/ui/label";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
-import { Switch } from "@/components/ui/switch";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-import { useLogsSummary } from "@/hooks/use-logs";
-import { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
-import { authenticatedFetch } from "@/lib/auth-utils";
-import { queryClient } from "@/lib/query-client/client";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
-import { cn } from "@/lib/utils";
-
-// Type for the indexing configuration state
-interface IndexingConfigState {
-	connectorType: string;
-	connectorId: number;
-	connectorTitle: string;
-}
-
-// OAuth Connectors (Quick Connect)
-const OAUTH_CONNECTORS = [
-	{
-		id: "google-gmail-connector",
-		title: "Gmail",
-		description: "Search through your emails",
-		connectorType: EnumConnectorName.GOOGLE_GMAIL_CONNECTOR,
-		authEndpoint: "/api/v1/auth/google/gmail/connector/add/",
-	},
-	{
-		id: "google-calendar-connector",
-		title: "Google Calendar",
-		description: "Search through your events",
-		connectorType: EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR,
-		authEndpoint: "/api/v1/auth/google/calendar/connector/add/",
-	},
-	{
-		id: "airtable-connector",
-		title: "Airtable",
-		description: "Search your Airtable bases",
-		connectorType: EnumConnectorName.AIRTABLE_CONNECTOR,
-		authEndpoint: "/api/v1/auth/airtable/connector/add/",
-	},
-];
-
-// Non-OAuth Connectors
-const OTHER_CONNECTORS = [
-	{
-		id: "slack-connector",
-		title: "Slack",
-		description: "Search Slack messages",
-		connectorType: EnumConnectorName.SLACK_CONNECTOR,
-	},
-	{
-		id: "discord-connector",
-		title: "Discord",
-		description: "Search Discord messages",
-		connectorType: EnumConnectorName.DISCORD_CONNECTOR,
-	},
-	{
-		id: "notion-connector",
-		title: "Notion",
-		description: "Search Notion pages",
-		connectorType: EnumConnectorName.NOTION_CONNECTOR,
-	},
-	{
-		id: "confluence-connector",
-		title: "Confluence",
-		description: "Search documentation",
-		connectorType: EnumConnectorName.CONFLUENCE_CONNECTOR,
-	},
-	{
-		id: "bookstack-connector",
-		title: "BookStack",
-		description: "Search BookStack docs",
-		connectorType: EnumConnectorName.BOOKSTACK_CONNECTOR,
-	},
-	{
-		id: "github-connector",
-		title: "GitHub",
-		description: "Search repositories",
-		connectorType: EnumConnectorName.GITHUB_CONNECTOR,
-	},
-	{
-		id: "linear-connector",
-		title: "Linear",
-		description: "Search issues & projects",
-		connectorType: EnumConnectorName.LINEAR_CONNECTOR,
-	},
-	{
-		id: "jira-connector",
-		title: "Jira",
-		description: "Search Jira issues",
-		connectorType: EnumConnectorName.JIRA_CONNECTOR,
-	},
-	{
-		id: "clickup-connector",
-		title: "ClickUp",
-		description: "Search ClickUp tasks",
-		connectorType: EnumConnectorName.CLICKUP_CONNECTOR,
-	},
-	{
-		id: "luma-connector",
-		title: "Luma",
-		description: "Search Luma events",
-		connectorType: EnumConnectorName.LUMA_CONNECTOR,
-	},
-	{
-		id: "elasticsearch-connector",
-		title: "Elasticsearch",
-		description: "Search ES indexes",
-		connectorType: EnumConnectorName.ELASTICSEARCH_CONNECTOR,
-	},
-	{
-		id: "webcrawler-connector",
-		title: "Web Pages",
-		description: "Crawl web content",
-		connectorType: EnumConnectorName.WEBCRAWLER_CONNECTOR,
-	},
-	{
-		id: "tavily-api",
-		title: "Tavily AI",
-		description: "Search with Tavily",
-		connectorType: EnumConnectorName.TAVILY_API,
-	},
-	{
-		id: "searxng",
-		title: "SearxNG",
-		description: "Search with SearxNG",
-		connectorType: EnumConnectorName.SEARXNG_API,
-	},
-	{
-		id: "linkup-api",
-		title: "Linkup API",
-		description: "Search with Linkup",
-		connectorType: EnumConnectorName.LINKUP_API,
-	},
-	{
-		id: "baidu-search-api",
-		title: "Baidu Search",
-		description: "Search with Baidu",
-		connectorType: EnumConnectorName.BAIDU_SEARCH_API,
-	},
-];
-
 import {
 	Tabs,
 	TabsContent,
-	TabsList,
-	TabsTrigger,
 } from "@/components/ui/tabs";
+import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
+import { cn } from "@/lib/utils";
+import { AllConnectorsTab } from "./connector-popup/all-connectors-tab";
+import { ActiveConnectorsTab } from "./connector-popup/active-connectors-tab";
+import { ConnectorDialogHeader } from "./connector-popup/connector-dialog-header";
+import { IndexingConfigurationView } from "./connector-popup/indexing-configuration-view";
+import { useConnectorDialog } from "./connector-popup/use-connector-dialog";
+import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 
 export const ConnectorIndicator: FC = () => {
-	const router = useRouter();
-	const searchParams = useSearchParams();
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
 	const { connectors, isLoading: connectorsLoading, refreshConnectors } = useSearchSourceConnectors(
 		false,
@@ -199,37 +32,6 @@ export const ConnectorIndicator: FC = () => {
 	);
 	const { data: documentTypeCounts, isLoading: documentTypesLoading } =
 		useAtomValue(documentTypeCountsAtom);
-	const { data: allConnectors, refetch: refetchAllConnectors } = useAtomValue(connectorsAtom);
-	const { mutateAsync: indexConnector } = useAtomValue(indexConnectorMutationAtom);
-	const { mutateAsync: updateConnector } = useAtomValue(updateConnectorMutationAtom);
-	const [isOpen, setIsOpen] = useState(false);
-	const [activeTab, setActiveTab] = useState("all");
-	const [connectingId, setConnectingId] = useState<string | null>(null);
-	const [isScrolled, setIsScrolled] = useState(false);
-	const [searchQuery, setSearchQuery] = useState("");
-	
-	// Indexing configuration state (shown after OAuth success)
-	const [indexingConfig, setIndexingConfig] = useState<IndexingConfigState | null>(null);
-	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
-	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
-	const [isStartingIndexing, setIsStartingIndexing] = useState(false);
-	
-	// Periodic indexing state
-	const [periodicEnabled, setPeriodicEnabled] = useState(false);
-	const [frequencyMinutes, setFrequencyMinutes] = useState("1440"); // Default: daily
-
-	// Helper function to get frequency label
-	const getFrequencyLabel = useCallback((minutes: string): string => {
-		switch (minutes) {
-			case "15": return "15 minutes";
-			case "60": return "hour";
-			case "360": return "6 hours";
-			case "720": return "12 hours";
-			case "1440": return "day";
-			case "10080": return "week";
-			default: return `${minutes} minutes`;
-		}
-	}, []);
 
 	// Track active indexing tasks
 	const { summary: logsSummary } = useLogsSummary(
@@ -248,7 +50,6 @@ export const ConnectorIndicator: FC = () => {
 			logsSummary.active_tasks
 				.filter((task) => task.source?.includes("connector_indexing"))
 				.map((task) => {
-					// Extract connector ID from task metadata or source
 					const match = task.source?.match(/connector[_-]?(\d+)/i);
 					return match ? parseInt(match[1], 10) : null;
 				})
@@ -258,172 +59,32 @@ export const ConnectorIndicator: FC = () => {
 
 	const isLoading = connectorsLoading || documentTypesLoading;
 
-	// Synchronize state with URL query params
-	useEffect(() => {
-		const modalParam = searchParams.get("modal");
-		const tabParam = searchParams.get("tab");
-		const viewParam = searchParams.get("view");
-		const connectorParam = searchParams.get("connector");
-		
-		if (modalParam === "connectors") {
-			if (!isOpen) setIsOpen(true);
-			
-			// Detect tab from URL query param
-			if (tabParam === "active" || tabParam === "all") {
-				if (activeTab !== tabParam) setActiveTab(tabParam);
-			}
-			
-			// Restore indexing config view from URL if present (e.g., on page refresh)
-			if (viewParam === "configure" && connectorParam && !indexingConfig) {
-				const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
-				if (oauthConnector && allConnectors) {
-					const existingConnector = allConnectors.find(
-						(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
-					);
-					if (existingConnector) {
-						setIndexingConfig({
-							connectorType: oauthConnector.connectorType,
-							connectorId: existingConnector.id,
-							connectorTitle: oauthConnector.title,
-						});
-					}
-				}
-			}
-		} else {
-			if (isOpen) setIsOpen(false);
-		}
-	}, [searchParams, isOpen, activeTab, indexingConfig, allConnectors]);
-
-	// Detect OAuth success and transition to config view
-	useEffect(() => {
-		const success = searchParams.get("success");
-		const connectorParam = searchParams.get("connector");
-		const modalParam = searchParams.get("modal");
-		
-		if (success === "true" && connectorParam && searchSpaceId && modalParam === "connectors") {
-			// Find the OAuth connector info
-			const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
-			if (oauthConnector) {
-				// Refetch connectors to get the newly created connector
-				refetchAllConnectors().then((result) => {
-					const newConnector = result.data?.find(
-						(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
-					);
-					if (newConnector) {
-						setIndexingConfig({
-							connectorType: oauthConnector.connectorType,
-							connectorId: newConnector.id,
-							connectorTitle: oauthConnector.title,
-						});
-						setIsOpen(true);
-						// Update URL to reflect config view (replace success with view=configure)
-						const url = new URL(window.location.href);
-						url.searchParams.delete("success");
-						url.searchParams.set("view", "configure");
-						// Keep connector param for URL restoration
-						window.history.replaceState({}, "", url.toString());
-					}
-				});
-			}
-		}
-	}, [searchParams, searchSpaceId, refetchAllConnectors]);
-
-	// Handle starting indexing
-	const handleStartIndexing = useCallback(async () => {
-		if (!indexingConfig || !searchSpaceId) return;
-
-		setIsStartingIndexing(true);
-		try {
-			const startDateStr = startDate ? format(startDate, "yyyy-MM-dd") : undefined;
-			const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
-
-			// Update periodic indexing settings if enabled
-			if (periodicEnabled) {
-				const frequency = parseInt(frequencyMinutes, 10);
-				await updateConnector({
-					id: indexingConfig.connectorId,
-					data: {
-						periodic_indexing_enabled: true,
-						indexing_frequency_minutes: frequency,
-					},
-				});
-			}
-
-			await indexConnector({
-				connector_id: indexingConfig.connectorId,
-				queryParams: {
-					search_space_id: searchSpaceId,
-					start_date: startDateStr,
-					end_date: endDateStr,
-				},
-			});
-
-			toast.success(`${indexingConfig.connectorTitle} indexing started`, {
-				description: periodicEnabled 
-					? `Periodic sync enabled every ${getFrequencyLabel(frequencyMinutes)}.`
-					: "You can continue working while we sync your data.",
-			});
-
-			// Close the config view and reset state
-			setIndexingConfig(null);
-			setStartDate(undefined);
-			setEndDate(undefined);
-			setPeriodicEnabled(false);
-			setFrequencyMinutes("1440");
-			
-			// Clear config-related URL params and switch to active tab
-			const url = new URL(window.location.href);
-			url.searchParams.delete("view");
-			url.searchParams.delete("connector");
-			url.searchParams.set("tab", "active");
-			window.history.replaceState({}, "", url.toString());
-			setActiveTab("active");
-			
-			// Refresh connectors list
-			refreshConnectors();
-			queryClient.invalidateQueries({
-				queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
-			});
-		} catch (error) {
-			console.error("Error starting indexing:", error);
-			toast.error("Failed to start indexing");
-		} finally {
-			setIsStartingIndexing(false);
-		}
-	}, [indexingConfig, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, refreshConnectors, getFrequencyLabel]);
-
-	// Handle skipping indexing for now
-	const handleSkipIndexing = useCallback(() => {
-		setIndexingConfig(null);
-		setStartDate(undefined);
-		setEndDate(undefined);
-		setPeriodicEnabled(false);
-		setFrequencyMinutes("1440");
-		
-		// Clear config-related URL params
-		const url = new URL(window.location.href);
-		url.searchParams.delete("view");
-		url.searchParams.delete("connector");
-		window.history.replaceState({}, "", url.toString());
-	}, []);
-
-	// Quick date range handlers
-	const handleLast30Days = useCallback(() => {
-		const today = new Date();
-		setStartDate(subDays(today, 30));
-		setEndDate(today);
-	}, []);
-
-	const handleLastYear = useCallback(() => {
-		const today = new Date();
-		setStartDate(subYears(today, 1));
-		setEndDate(today);
-	}, []);
-
-	const handleClearDates = useCallback(() => {
-		setStartDate(undefined);
-		setEndDate(undefined);
-	}, []);
+	// Use the custom hook for dialog state management
+	const {
+		isOpen,
+		activeTab,
+		connectingId,
+		isScrolled,
+		searchQuery,
+		indexingConfig,
+		startDate,
+		endDate,
+		isStartingIndexing,
+		periodicEnabled,
+		frequencyMinutes,
+		allConnectors,
+		setSearchQuery,
+		setStartDate,
+		setEndDate,
+		setPeriodicEnabled,
+		setFrequencyMinutes,
+		handleOpenChange,
+		handleTabChange,
+		handleScroll,
+		handleConnectOAuth,
+		handleStartIndexing,
+		handleSkipIndexing,
+	} = useConnectorDialog();
 
 	// Get document types that have documents in the search space
 	const activeDocumentTypes = documentTypeCounts
@@ -439,94 +100,6 @@ export const ConnectorIndicator: FC = () => {
 		(allConnectors || []).map((c: SearchSourceConnector) => c.connector_type)
 	);
 
-	// Filter connectors based on search
-	const filteredOAuth = OAUTH_CONNECTORS.filter(c => 
-		c.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
-		c.description.toLowerCase().includes(searchQuery.toLowerCase())
-	);
-
-	const filteredOther = OTHER_CONNECTORS.filter(c => 
-		c.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
-		c.description.toLowerCase().includes(searchQuery.toLowerCase())
-	);
-
-	// Handle OAuth connection
-	const handleConnectOAuth = useCallback(
-		async (connector: (typeof OAUTH_CONNECTORS)[0]) => {
-			if (!searchSpaceId || !connector.authEndpoint) return;
-
-			try {
-				setConnectingId(connector.id);
-				const response = await authenticatedFetch(
-					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}${connector.authEndpoint}?space_id=${searchSpaceId}`,
-					{ method: "GET" }
-				);
-
-				if (!response.ok) {
-					throw new Error(`Failed to initiate ${connector.title} OAuth`);
-				}
-
-				const data = await response.json();
-				window.location.href = data.auth_url;
-			} catch (error) {
-				console.error(`Error connecting to ${connector.title}:`, error);
-				toast.error(`Failed to connect to ${connector.title}`);
-			} finally {
-				setConnectingId(null);
-			}
-		},
-		[searchSpaceId]
-	);
-
-	const handleOpenChange = useCallback(
-		(open: boolean) => {
-			setIsOpen(open);
-
-			if (open) {
-				// Add modal query params to current URL
-				const url = new URL(window.location.href);
-				url.searchParams.set("modal", "connectors");
-				url.searchParams.set("tab", activeTab);
-				window.history.pushState({ modal: true }, "", url.toString());
-			} else {
-				// Remove modal query params from URL
-				const url = new URL(window.location.href);
-				url.searchParams.delete("modal");
-				url.searchParams.delete("tab");
-				url.searchParams.delete("success");
-				url.searchParams.delete("connector");
-				url.searchParams.delete("view");
-				window.history.pushState({ modal: false }, "", url.toString());
-				setIsScrolled(false);
-				setSearchQuery("");
-				// Reset indexing config when closing
-				if (!isStartingIndexing) {
-					setIndexingConfig(null);
-					setStartDate(undefined);
-					setEndDate(undefined);
-					setPeriodicEnabled(false);
-					setFrequencyMinutes("1440");
-				}
-			}
-		},
-		[activeTab, isStartingIndexing]
-	);
-
-	const handleTabChange = useCallback(
-		(value: string) => {
-			setActiveTab(value);
-			// Update tab query param
-			const url = new URL(window.location.href);
-			url.searchParams.set("tab", value);
-			window.history.replaceState({ modal: true }, "", url.toString());
-		},
-		[]
-	);
-
-	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-		setIsScrolled(e.currentTarget.scrollTop > 0);
-	}, []);
-
 	if (!searchSpaceId) return null;
 
 	return (
@@ -559,477 +132,66 @@ export const ConnectorIndicator: FC = () => {
 				)}
 			</TooltipIconButton>
 
-		<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
-			{/* Indexing Configuration View - shown after OAuth success */}
-			{indexingConfig ? (
-				<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
-					{/* Fixed Header */}
-					<div className="flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10">
-						{/* Back button */}
-						<button
-							type="button"
-							onClick={handleSkipIndexing}
-							className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
-						>
-							<ArrowLeft className="size-4" />
-							Back to connectors
-						</button>
+			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
+				{/* Indexing Configuration View - shown after OAuth success */}
+				{indexingConfig ? (
+					<IndexingConfigurationView
+						config={indexingConfig}
+						startDate={startDate}
+						endDate={endDate}
+						periodicEnabled={periodicEnabled}
+						frequencyMinutes={frequencyMinutes}
+						isStartingIndexing={isStartingIndexing}
+						onStartDateChange={setStartDate}
+						onEndDateChange={setEndDate}
+						onPeriodicEnabledChange={setPeriodicEnabled}
+						onFrequencyChange={setFrequencyMinutes}
+						onStartIndexing={() => handleStartIndexing(refreshConnectors)}
+						onSkip={handleSkipIndexing}
+					/>
+				) : (
+					<Tabs value={activeTab} onValueChange={handleTabChange} className="flex-1 flex flex-col min-h-0">
+						{/* Header */}
+						<ConnectorDialogHeader
+							activeTab={activeTab}
+							totalSourceCount={totalSourceCount}
+							searchQuery={searchQuery}
+							onTabChange={handleTabChange}
+							onSearchChange={setSearchQuery}
+							isScrolled={isScrolled}
+						/>
 
-						{/* Success header */}
-						<div className="flex items-center gap-4 mb-6">
-							<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-green-500/10 border border-green-500/20">
-								<Check className="size-7 text-green-500" />
-							</div>
-							<div>
-								<h2 className="text-2xl font-semibold tracking-tight">
-									{indexingConfig.connectorTitle} Connected!
-								</h2>
-								<p className="text-muted-foreground mt-1">
-									Configure when to start syncing your data
-								</p>
-							</div>
-						</div>
-					</div>
+						{/* Content */}
+						<div className="flex-1 min-h-0 relative overflow-hidden">
+							<div className="h-full overflow-y-auto" onScroll={handleScroll}>
+								<div className="px-6 sm:px-12 py-6 sm:py-8 pb-16 sm:pb-16">
+									<TabsContent value="all" className="m-0">
+										<AllConnectorsTab
+											searchQuery={searchQuery}
+											searchSpaceId={searchSpaceId}
+											connectedTypes={connectedTypes}
+											connectingId={connectingId}
+											onConnectOAuth={handleConnectOAuth}
+										/>
+									</TabsContent>
 
-					{/* Scrollable Content */}
-					<div className="flex-1 min-h-0 overflow-y-auto px-6 sm:px-12">
-						<div className="space-y-6 pb-6">
-						<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
-							<h3 className="font-medium mb-4">Select Date Range</h3>
-							<p className="text-sm text-muted-foreground mb-6">
-								Choose how far back you want to sync your data. You can always re-index later with different dates.
-							</p>
-
-							<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-								{/* Start Date */}
-								<div className="space-y-2">
-									<Label htmlFor="start-date">Start Date</Label>
-									<Popover>
-										<PopoverTrigger asChild>
-											<Button
-												id="start-date"
-												variant="outline"
-												className={cn(
-													"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
-													!startDate && "text-muted-foreground"
-												)}
-											>
-												<CalendarIcon className="mr-2 h-4 w-4" />
-												{startDate ? format(startDate, "PPP") : "Default (1 year ago)"}
-											</Button>
-										</PopoverTrigger>
-										<PopoverContent className="w-auto p-0 z-[100]" align="start">
-											<Calendar
-												mode="single"
-												selected={startDate}
-												onSelect={setStartDate}
-												disabled={(date) => date > new Date()}
-											/>
-										</PopoverContent>
-									</Popover>
-								</div>
-
-								{/* End Date */}
-								<div className="space-y-2">
-									<Label htmlFor="end-date">End Date</Label>
-									<Popover>
-										<PopoverTrigger asChild>
-											<Button
-												id="end-date"
-												variant="outline"
-												className={cn(
-													"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
-													!endDate && "text-muted-foreground"
-												)}
-											>
-												<CalendarIcon className="mr-2 h-4 w-4" />
-												{endDate ? format(endDate, "PPP") : "Default (Today)"}
-											</Button>
-										</PopoverTrigger>
-										<PopoverContent className="w-auto p-0 z-[100]" align="start">
-											<Calendar
-												mode="single"
-												selected={endDate}
-												onSelect={setEndDate}
-												disabled={(date) => date > new Date() || (startDate ? date < startDate : false)}
-											/>
-										</PopoverContent>
-									</Popover>
-								</div>
-							</div>
-
-							{/* Quick date range buttons */}
-							<div className="flex flex-wrap gap-2 mt-4">
-								<Button
-									type="button"
-									variant="outline"
-									size="sm"
-									onClick={handleClearDates}
-									className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
-								>
-									Clear Dates
-								</Button>
-								<Button
-									type="button"
-									variant="outline"
-									size="sm"
-									onClick={handleLast30Days}
-									className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
-								>
-									Last 30 Days
-								</Button>
-								<Button
-									type="button"
-									variant="outline"
-									size="sm"
-									onClick={handleLastYear}
-									className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
-								>
-									Last Year
-								</Button>
-							</div>
-						</div>
-
-						{/* Periodic Indexing Configuration */}
-						<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
-							<div className="flex items-center justify-between">
-								<div className="space-y-1">
-									<h3 className="font-medium">Enable Periodic Sync</h3>
-									<p className="text-sm text-muted-foreground">
-										Automatically re-index at regular intervals
-									</p>
-								</div>
-								<Switch
-									checked={periodicEnabled}
-									onCheckedChange={setPeriodicEnabled}
-								/>
-							</div>
-
-							{periodicEnabled && (
-								<div className="mt-4 pt-4 border-t border-border/100 space-y-3">
-									<div className="space-y-2">
-										<Label htmlFor="frequency">Sync Frequency</Label>
-										<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes}>
-											<SelectTrigger id="frequency" className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20">
-												<SelectValue placeholder="Select frequency" />
-											</SelectTrigger>
-											<SelectContent className="z-[100]">
-												<SelectItem value="15">Every 15 minutes</SelectItem>
-												<SelectItem value="60">Every hour</SelectItem>
-												<SelectItem value="360">Every 6 hours</SelectItem>
-												<SelectItem value="720">Every 12 hours</SelectItem>
-												<SelectItem value="1440">Daily</SelectItem>
-												<SelectItem value="10080">Weekly</SelectItem>
-											</SelectContent>
-										</Select>
-									</div>
-								</div>
-							)}
-						</div>
-
-						{/* Info box */}
-						<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
-							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
-								{getConnectorIcon(indexingConfig.connectorType, "size-4")}
-							</div>
-							<div className="text-sm">
-								<p className="font-medium">Indexing runs in the background</p>
-								<p className="text-muted-foreground mt-1">
-									You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
-								</p>
-							</div>
-						</div>
-						</div>
-					</div>
-
-					{/* Fixed Footer - Action buttons */}
-					<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 border-t border-border bg-muted">
-						<Button
-							variant="ghost"
-							onClick={handleSkipIndexing}
-							disabled={isStartingIndexing}
-						>
-							Skip for now
-						</Button>
-						<Button
-							onClick={handleStartIndexing}
-							disabled={isStartingIndexing}
-						>
-							{isStartingIndexing ? (
-								<>
-									<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-									Starting...
-								</>
-							) : (
-								"Start Indexing"
-							)}
-						</Button>
-					</div>
-				</div>
-			) : (
-			<Tabs value={activeTab} onValueChange={handleTabChange} className="flex-1 flex flex-col min-h-0">
-					{/* Header */}
-					<div
-						className={cn(
-							"flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10 transition-shadow duration-200 relative z-10",
-							isScrolled && "shadow-xl bg-muted/50 backdrop-blur-md"
-						)}
-					>
-						<DialogHeader>
-							<DialogTitle className="text-2xl sm:text-3xl font-semibold tracking-tight">Connectors</DialogTitle>
-							<DialogDescription className="text-sm sm:text-base text-muted-foreground/80 mt-1 sm:mt-1.5">
-								Search across all your apps and data in one place.
-							</DialogDescription>
-						</DialogHeader>
-
-						<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-slate-400/5 dark:border-white/5">
-							<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
-								<TabsTrigger 
-									value="all" 
-									className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white transition-all text-base font-medium text-muted-foreground data-[state=active]:text-foreground"
-								>
-									All Connectors
-								</TabsTrigger>
-								<TabsTrigger 
-									value="active" 
-									className="group px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent transition-all text-base font-medium flex items-center gap-2 text-muted-foreground data-[state=active]:text-foreground relative"
-								>
-									<span className="relative">
-										Active
-										<span className="absolute bottom-[-13.5px] left-1/2 -translate-x-1/2 w-12 h-[1.5px] bg-foreground dark:bg-white opacity-0 group-data-[state=active]:opacity-100 transition-all duration-200" />
-									</span>
-									{totalSourceCount > 0 && (
-										<span className="px-1.5 py-0.5 rounded-full bg-muted-foreground/15 text-[10px] font-bold">
-											{totalSourceCount}
-										</span>
-									)}
-								</TabsTrigger>
-							</TabsList>
-
-							<div className="w-full sm:w-72 sm:pb-1">
-								<div className="relative">
-									<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/60" />
-									<input 
-										type="text"
-										placeholder="Search"
-										className="w-full bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 focus:bg-slate-400/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
-										value={searchQuery}
-										onChange={(e) => setSearchQuery(e.target.value)}
+									<ActiveConnectorsTab
+										hasSources={hasSources}
+										totalSourceCount={totalSourceCount}
+										activeDocumentTypes={activeDocumentTypes}
+										connectors={connectors as SearchSourceConnector[]}
+										indexingConnectorIds={indexingConnectorIds}
+										logsSummary={logsSummary}
+										searchSpaceId={searchSpaceId}
+										onTabChange={handleTabChange}
 									/>
 								</div>
 							</div>
+							{/* Bottom fade shadow */}
+							<div className="absolute bottom-0 left-0 right-0 h-7 bg-gradient-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
 						</div>
-					</div>
-
-					{/* Content */}
-					<div className="flex-1 min-h-0 relative overflow-hidden">
-						<div className="h-full overflow-y-auto" onScroll={handleScroll}>
-							<div className="px-6 sm:px-12 py-6 sm:py-8 pb-16 sm:pb-16">
-							<TabsContent value="all" className="m-0 space-y-8">
-								{/* Quick Connect */}
-								{filteredOAuth.length > 0 && (
-									<section>
-										<div className="flex items-center gap-2 mb-4">
-											<h3 className="text-sm font-semibold text-muted-foreground">Quick Connect</h3>
-										</div>
-										<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-											{filteredOAuth.map((connector) => {
-												const isConnected = connectedTypes.has(connector.connectorType);
-												const isConnecting = connectingId === connector.id;
-
-												return (
-													<div
-														key={connector.id}
-														className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
-													>
-														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
-															{getConnectorIcon(connector.connectorType, "size-6")}
-														</div>
-														<div className="flex-1 min-w-0">
-															<div className="flex items-center gap-2">
-																<span className="text-[14px] font-semibold leading-tight">{connector.title}</span>
-																{isConnected && (
-																	<span className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" title="Connected" />
-																)}
-															</div>
-															<p className="text-[11px] text-muted-foreground truncate mt-1">
-																{isConnected ? "Connected" : connector.description}
-															</p>
-														</div>
-														<Button
-															size="sm"
-															variant={isConnected ? "outline" : "default"}
-															className="h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium"
-															onClick={() =>
-																isConnected
-																	? router.push(
-																			`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
-																		)
-																	: handleConnectOAuth(connector)
-															}
-															disabled={isConnecting}
-														>
-															{isConnecting ? (
-																<Loader2 className="size-3 animate-spin" />
-															) : isConnected ? (
-																"Manage"
-															) : (
-																"Connect"
-															)}
-														</Button>
-													</div>
-												);
-											})}
-										</div>
-									</section>
-								)}
-
-								{/* More Integrations */}
-								{filteredOther.length > 0 && (
-									<section>
-										<div className="flex items-center gap-2 mb-4">
-											<h3 className="text-sm font-semibold text-muted-foreground">More Integrations</h3>
-										</div>
-										<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-											{filteredOther.map((connector) => {
-												const isConnected = connectedTypes.has(connector.connectorType);
-
-												return (
-													<Link
-														key={connector.id}
-														href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
-														className="group flex items-center gap-4 p-4 rounded-xl transition-all duration-150 border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
-													>
-														<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
-															{getConnectorIcon(connector.connectorType, "size-6")}
-														</div>
-														<div className="flex-1 min-w-0">
-															<div className="flex items-center gap-2">
-																<span className="text-[14px] font-semibold leading-tight">{connector.title}</span>
-																{isConnected && (
-																	<span className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" title="Connected" />
-																)}
-															</div>
-															<p className="text-[11px] text-muted-foreground truncate mt-1">
-																{connector.description}
-															</p>
-														</div>
-														<ChevronRight className="size-4 text-muted-foreground/50 group-hover:text-foreground transition-colors flex-shrink-0" />
-													</Link>
-												);
-											})}
-										</div>
-									</section>
-								)}
-							</TabsContent>
-
-							<TabsContent value="active" className="m-0">
-								{hasSources ? (
-									<div className="space-y-6">
-										<div className="flex items-center gap-2 mb-4">
-											<h3 className="text-sm font-semibold text-muted-foreground">Currently Active</h3>
-										</div>
-										<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-											{activeDocumentTypes.map(([docType, count]) => (
-												<div
-													key={docType}
-													className="flex items-center gap-4 p-4 rounded-xl bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 border border-border transition-all"
-												>
-													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
-														{getConnectorIcon(docType, "size-6")}
-													</div>
-													<div>
-														<p className="text-[14px] font-semibold leading-tight">
-															{getDocumentTypeLabel(docType)}
-														</p>
-														<p className="text-[11px] text-muted-foreground mt-1">
-															{count as number} documents indexed
-														</p>
-													</div>
-												</div>
-											))}
-											{connectors.map((connector) => {
-												const isIndexing = indexingConnectorIds.has(connector.id);
-												const activeTask = logsSummary?.active_tasks?.find(
-													(task) => task.source?.includes(`connector_${connector.id}`) || task.source?.includes(`connector-${connector.id}`)
-												);
-
-												return (
-													<div
-														key={`connector-${connector.id}`}
-														className={cn(
-															"flex items-center gap-4 p-4 rounded-xl border border-border transition-all",
-															isIndexing
-																? "bg-primary/5 border-primary/20"
-																: "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",
-															isIndexing
-																? "bg-primary/10 border-primary/20"
-																: "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
-														)}>
-															{getConnectorIcon(connector.connector_type, "size-6")}
-														</div>
-														<div className="flex-1 min-w-0">
-															<p className="text-[14px] font-semibold leading-tight truncate">
-																{connector.name}
-															</p>
-															{isIndexing ? (
-																<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
-																	<Loader2 className="size-3 animate-spin" />
-																	Indexing...
-																	{activeTask?.message && (
-																		<span className="text-muted-foreground truncate max-w-[150px]">
-																			• {activeTask.message}
-																		</span>
-																	)}
-																</p>
-															) : (
-																<p className="text-[11px] text-muted-foreground mt-1">
-																	{connector.last_indexed_at
-																		? `Last indexed: ${format(new Date(connector.last_indexed_at), "MMM d, yyyy")}`
-																		: "Never indexed"}
-																</p>
-															)}
-														</div>
-														<Button 
-															variant="ghost" 
-															size="sm" 
-															className="h-8 text-[11px]" 
-															onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`)}
-															disabled={isIndexing}
-														>
-															{isIndexing ? "Syncing..." : "Manage"}
-														</Button>
-													</div>
-												);
-											})}
-										</div>
-									</div>
-								) : (
-									<div className="flex flex-col items-center justify-center py-20 text-center">
-										<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
-											<Cable className="size-8 text-muted-foreground/50" />
-										</div>
-										<h4 className="text-lg font-semibold">No active sources</h4>
-										<p className="text-sm text-muted-foreground mt-1 max-w-[280px]">
-											Connect your first service to start searching across all your data.
-										</p>
-										<TabsTrigger value="all" className="mt-6 text-primary hover:underline">
-											Browse available connectors
-										</TabsTrigger>
-									</div>
-								)}
-								</TabsContent>
-							</div>
-						</div>
-						{/* Bottom fade shadow */}
-						<div className="absolute bottom-0 left-0 right-0 h-7 bg-gradient-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
-					</div>
-				</Tabs>
-			)}
+					</Tabs>
+				)}
 			</DialogContent>
 		</Dialog>
 	);
diff --git a/surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx
new file mode 100644
index 000000000..323fa34e7
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { format } from "date-fns";
+import { Cable, Loader2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import type { FC } from "react";
+import { Button } from "@/components/ui/button";
+import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { cn } from "@/lib/utils";
+import {
+	TabsContent,
+	TabsTrigger,
+} from "@/components/ui/tabs";
+
+interface ActiveConnectorsTabProps {
+	hasSources: boolean;
+	totalSourceCount: number;
+	activeDocumentTypes: Array<[string, number]>;
+	connectors: SearchSourceConnector[];
+	indexingConnectorIds: Set<number>;
+	logsSummary: any;
+	searchSpaceId: string;
+	onTabChange: (value: string) => void;
+}
+
+export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
+	hasSources,
+	activeDocumentTypes,
+	connectors,
+	indexingConnectorIds,
+	logsSummary,
+	searchSpaceId,
+	onTabChange,
+}) => {
+	const router = useRouter();
+
+	return (
+		<TabsContent value="active" className="m-0">
+			{hasSources ? (
+				<div className="space-y-6">
+					<div className="flex items-center gap-2 mb-4">
+						<h3 className="text-sm font-semibold text-muted-foreground">
+							Currently Active
+						</h3>
+					</div>
+					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+						{activeDocumentTypes.map(([docType, count]) => (
+							<div
+								key={docType}
+								className="flex items-center gap-4 p-4 rounded-xl bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 border border-border transition-all"
+							>
+								<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
+									{getConnectorIcon(docType, "size-6")}
+								</div>
+								<div>
+									<p className="text-[14px] font-semibold leading-tight">
+										{getDocumentTypeLabel(docType)}
+									</p>
+									<p className="text-[11px] text-muted-foreground mt-1">
+										{count as number} documents indexed
+									</p>
+								</div>
+							</div>
+						))}
+						{connectors.map((connector) => {
+							const isIndexing = indexingConnectorIds.has(connector.id);
+							const activeTask = logsSummary?.active_tasks?.find(
+								(task: any) =>
+									task.source?.includes(`connector_${connector.id}`) ||
+									task.source?.includes(`connector-${connector.id}`)
+							);
+
+							return (
+								<div
+									key={`connector-${connector.id}`}
+									className={cn(
+										"flex items-center gap-4 p-4 rounded-xl border border-border transition-all",
+										isIndexing
+											? "bg-primary/5 border-primary/20"
+											: "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",
+											isIndexing
+												? "bg-primary/10 border-primary/20"
+												: "bg-slate-400/5 dark:bg-white/5 border-slate-400/5 dark:border-white/5"
+										)}
+									>
+										{getConnectorIcon(connector.connector_type, "size-6")}
+									</div>
+									<div className="flex-1 min-w-0">
+										<p className="text-[14px] font-semibold leading-tight truncate">
+											{connector.name}
+										</p>
+										{isIndexing ? (
+											<p className="text-[11px] text-primary mt-1 flex items-center gap-1.5">
+												<Loader2 className="size-3 animate-spin" />
+												Indexing...
+												{activeTask?.message && (
+													<span className="text-muted-foreground truncate max-w-[150px]">
+														• {activeTask.message}
+													</span>
+												)}
+											</p>
+										) : (
+											<p className="text-[11px] text-muted-foreground mt-1">
+												{connector.last_indexed_at
+													? `Last indexed: ${format(new Date(connector.last_indexed_at), "MMM d, yyyy")}`
+													: "Never indexed"}
+											</p>
+										)}
+									</div>
+									<Button
+										variant="outline"
+										size="sm"
+										className="h-8 text-[11px] px-3 rounded-lg font-medium"
+										onClick={() =>
+											router.push(
+												`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
+											)
+										}
+										disabled={isIndexing}
+									>
+										{isIndexing ? "Syncing..." : "Manage"}
+									</Button>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			) : (
+				<div className="flex flex-col items-center justify-center py-20 text-center">
+					<div className="flex h-16 w-16 items-center justify-center rounded-full bg-muted mb-4">
+						<Cable className="size-8 text-muted-foreground/50" />
+					</div>
+					<h4 className="text-lg font-semibold">No active sources</h4>
+					<p className="text-sm text-muted-foreground mt-1 max-w-[280px]">
+						Connect your first service to start searching across all your data.
+					</p>
+					<TabsTrigger value="all" className="mt-6 text-primary hover:underline" onClick={() => onTabChange("all")}>
+						Browse available connectors
+					</TabsTrigger>
+				</div>
+			)}
+		</TabsContent>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx
new file mode 100644
index 000000000..e2f735b13
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx
@@ -0,0 +1,125 @@
+"use client";
+
+import { ChevronRight } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { type FC } from "react";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./connector-constants";
+import { ConnectorCard } from "./connector-card";
+
+interface AllConnectorsTabProps {
+	searchQuery: string;
+	searchSpaceId: string;
+	connectedTypes: Set<string>;
+	connectingId: string | null;
+	onConnectOAuth: (connector: (typeof OAUTH_CONNECTORS)[0]) => void;
+}
+
+export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
+	searchQuery,
+	searchSpaceId,
+	connectedTypes,
+	connectingId,
+	onConnectOAuth,
+}) => {
+	const router = useRouter();
+
+	// Filter connectors based on search
+	const filteredOAuth = OAUTH_CONNECTORS.filter(
+		(c) =>
+			c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+			c.description.toLowerCase().includes(searchQuery.toLowerCase())
+	);
+
+	const filteredOther = OTHER_CONNECTORS.filter(
+		(c) =>
+			c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+			c.description.toLowerCase().includes(searchQuery.toLowerCase())
+	);
+
+	return (
+		<div className="space-y-8">
+			{/* Quick Connect */}
+			{filteredOAuth.length > 0 && (
+				<section>
+					<div className="flex items-center gap-2 mb-4">
+						<h3 className="text-sm font-semibold text-muted-foreground">
+							Quick Connect
+						</h3>
+					</div>
+					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+						{filteredOAuth.map((connector) => {
+							const isConnected = connectedTypes.has(connector.connectorType);
+							const isConnecting = connectingId === connector.id;
+
+							return (
+								<ConnectorCard
+									key={connector.id}
+									id={connector.id}
+									title={connector.title}
+									description={connector.description}
+									connectorType={connector.connectorType}
+									isConnected={isConnected}
+									isConnecting={isConnecting}
+									onConnect={() => onConnectOAuth(connector)}
+									onManage={() =>
+										router.push(
+											`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
+										)
+									}
+								/>
+							);
+						})}
+					</div>
+				</section>
+			)}
+
+			{/* More Integrations */}
+			{filteredOther.length > 0 && (
+				<section>
+					<div className="flex items-center gap-2 mb-4">
+						<h3 className="text-sm font-semibold text-muted-foreground">
+							More Integrations
+						</h3>
+					</div>
+					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+						{filteredOther.map((connector) => {
+							const isConnected = connectedTypes.has(connector.connectorType);
+
+							return (
+								<Link
+									key={connector.id}
+									href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
+									className="group flex items-center gap-4 p-4 rounded-xl transition-all duration-150 border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
+								>
+									<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
+										{getConnectorIcon(connector.connectorType, "size-6")}
+									</div>
+									<div className="flex-1 min-w-0">
+										<div className="flex items-center gap-2">
+											<span className="text-[14px] font-semibold leading-tight">
+												{connector.title}
+											</span>
+											{isConnected && (
+												<span
+													className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"
+													title="Connected"
+												/>
+											)}
+										</div>
+										<p className="text-[11px] text-muted-foreground truncate mt-1">
+											{connector.description}
+										</p>
+									</div>
+									<ChevronRight className="size-4 text-muted-foreground/50 group-hover:text-foreground transition-colors flex-shrink-0" />
+								</Link>
+							);
+						})}
+					</div>
+				</section>
+			)}
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-card.tsx
new file mode 100644
index 000000000..d1f79b16d
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-card.tsx
@@ -0,0 +1,66 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { type FC } from "react";
+import { Button } from "@/components/ui/button";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+
+interface ConnectorCardProps {
+	id: string;
+	title: string;
+	description: string;
+	connectorType: string;
+	isConnected?: boolean;
+	isConnecting?: boolean;
+	onConnect?: () => void;
+	onManage?: () => void;
+}
+
+export const ConnectorCard: FC<ConnectorCardProps> = ({
+	id,
+	title,
+	description,
+	connectorType,
+	isConnected = false,
+	isConnecting = false,
+	onConnect,
+	onManage,
+}) => {
+	return (
+		<div className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10">
+			<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
+				{getConnectorIcon(connectorType, "size-6")}
+			</div>
+			<div className="flex-1 min-w-0">
+				<div className="flex items-center gap-2">
+					<span className="text-[14px] font-semibold leading-tight">{title}</span>
+					{isConnected && (
+						<span
+							className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"
+							title="Connected"
+						/>
+					)}
+				</div>
+				<p className="text-[11px] text-muted-foreground truncate mt-1">
+					{isConnected ? "Connected" : description}
+				</p>
+			</div>
+			<Button
+				size="sm"
+				variant={isConnected ? "outline" : "default"}
+				className="h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium"
+				onClick={isConnected ? onManage : onConnect}
+				disabled={isConnecting}
+			>
+				{isConnecting ? (
+					<Loader2 className="size-3 animate-spin" />
+				) : isConnected ? (
+					"Manage"
+				) : (
+					"Connect"
+				)}
+			</Button>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts b/surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts
new file mode 100644
index 000000000..65d5bd516
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts
@@ -0,0 +1,134 @@
+import { EnumConnectorName } from "@/contracts/enums/connector";
+
+// OAuth Connectors (Quick Connect)
+export const OAUTH_CONNECTORS = [
+	{
+		id: "google-gmail-connector",
+		title: "Gmail",
+		description: "Search through your emails",
+		connectorType: EnumConnectorName.GOOGLE_GMAIL_CONNECTOR,
+		authEndpoint: "/api/v1/auth/google/gmail/connector/add/",
+	},
+	{
+		id: "google-calendar-connector",
+		title: "Google Calendar",
+		description: "Search through your events",
+		connectorType: EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR,
+		authEndpoint: "/api/v1/auth/google/calendar/connector/add/",
+	},
+	{
+		id: "airtable-connector",
+		title: "Airtable",
+		description: "Search your Airtable bases",
+		connectorType: EnumConnectorName.AIRTABLE_CONNECTOR,
+		authEndpoint: "/api/v1/auth/airtable/connector/add/",
+	},
+] as const;
+
+// Non-OAuth Connectors
+export const OTHER_CONNECTORS = [
+	{
+		id: "slack-connector",
+		title: "Slack",
+		description: "Search Slack messages",
+		connectorType: EnumConnectorName.SLACK_CONNECTOR,
+	},
+	{
+		id: "discord-connector",
+		title: "Discord",
+		description: "Search Discord messages",
+		connectorType: EnumConnectorName.DISCORD_CONNECTOR,
+	},
+	{
+		id: "notion-connector",
+		title: "Notion",
+		description: "Search Notion pages",
+		connectorType: EnumConnectorName.NOTION_CONNECTOR,
+	},
+	{
+		id: "confluence-connector",
+		title: "Confluence",
+		description: "Search documentation",
+		connectorType: EnumConnectorName.CONFLUENCE_CONNECTOR,
+	},
+	{
+		id: "bookstack-connector",
+		title: "BookStack",
+		description: "Search BookStack docs",
+		connectorType: EnumConnectorName.BOOKSTACK_CONNECTOR,
+	},
+	{
+		id: "github-connector",
+		title: "GitHub",
+		description: "Search repositories",
+		connectorType: EnumConnectorName.GITHUB_CONNECTOR,
+	},
+	{
+		id: "linear-connector",
+		title: "Linear",
+		description: "Search issues & projects",
+		connectorType: EnumConnectorName.LINEAR_CONNECTOR,
+	},
+	{
+		id: "jira-connector",
+		title: "Jira",
+		description: "Search Jira issues",
+		connectorType: EnumConnectorName.JIRA_CONNECTOR,
+	},
+	{
+		id: "clickup-connector",
+		title: "ClickUp",
+		description: "Search ClickUp tasks",
+		connectorType: EnumConnectorName.CLICKUP_CONNECTOR,
+	},
+	{
+		id: "luma-connector",
+		title: "Luma",
+		description: "Search Luma events",
+		connectorType: EnumConnectorName.LUMA_CONNECTOR,
+	},
+	{
+		id: "elasticsearch-connector",
+		title: "Elasticsearch",
+		description: "Search ES indexes",
+		connectorType: EnumConnectorName.ELASTICSEARCH_CONNECTOR,
+	},
+	{
+		id: "webcrawler-connector",
+		title: "Web Pages",
+		description: "Crawl web content",
+		connectorType: EnumConnectorName.WEBCRAWLER_CONNECTOR,
+	},
+	{
+		id: "tavily-api",
+		title: "Tavily AI",
+		description: "Search with Tavily",
+		connectorType: EnumConnectorName.TAVILY_API,
+	},
+	{
+		id: "searxng",
+		title: "SearxNG",
+		description: "Search with SearxNG",
+		connectorType: EnumConnectorName.SEARXNG_API,
+	},
+	{
+		id: "linkup-api",
+		title: "Linkup API",
+		description: "Search with Linkup",
+		connectorType: EnumConnectorName.LINKUP_API,
+	},
+	{
+		id: "baidu-search-api",
+		title: "Baidu Search",
+		description: "Search with Baidu",
+		connectorType: EnumConnectorName.BAIDU_SEARCH_API,
+	},
+] as const;
+
+// Type for the indexing configuration state
+export interface IndexingConfigState {
+	connectorType: string;
+	connectorId: number;
+	connectorTitle: string;
+}
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-dialog-header.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-dialog-header.tsx
new file mode 100644
index 000000000..d4126f2ce
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-dialog-header.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { Search } from "lucide-react";
+import { type FC } from "react";
+import {
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import {
+	TabsList,
+	TabsTrigger,
+} from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+interface ConnectorDialogHeaderProps {
+	activeTab: string;
+	totalSourceCount: number;
+	searchQuery: string;
+	onTabChange: (value: string) => void;
+	onSearchChange: (query: string) => void;
+	isScrolled: boolean;
+}
+
+export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
+	activeTab,
+	totalSourceCount,
+	searchQuery,
+	onTabChange,
+	onSearchChange,
+	isScrolled,
+}) => {
+	return (
+		<div
+			className={cn(
+				"flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10 transition-shadow duration-200 relative z-10",
+				isScrolled && "shadow-xl bg-muted/50 backdrop-blur-md"
+			)}
+		>
+			<DialogHeader>
+				<DialogTitle className="text-2xl sm:text-3xl font-semibold tracking-tight">
+					Connectors
+				</DialogTitle>
+				<DialogDescription className="text-sm sm:text-base text-muted-foreground/80 mt-1 sm:mt-1.5">
+					Search across all your apps and data in one place.
+				</DialogDescription>
+			</DialogHeader>
+
+			<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-slate-400/5 dark:border-white/5">
+				<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
+					<TabsTrigger
+						value="all"
+						className="px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent data-[state=active]:border-foreground dark:data-[state=active]:border-white transition-all text-base font-medium text-muted-foreground data-[state=active]:text-foreground"
+					>
+						All Connectors
+					</TabsTrigger>
+					<TabsTrigger
+						value="active"
+						className="group px-0 pb-3 bg-transparent data-[state=active]:bg-transparent shadow-none data-[state=active]:shadow-none rounded-none border-b-[1.5px] border-transparent transition-all text-base font-medium flex items-center gap-2 text-muted-foreground data-[state=active]:text-foreground relative"
+					>
+						<span className="relative">
+							Active
+							<span className="absolute bottom-[-13.5px] left-1/2 -translate-x-1/2 w-12 h-[1.5px] bg-foreground dark:bg-white opacity-0 group-data-[state=active]:opacity-100 transition-all duration-200" />
+						</span>
+						{totalSourceCount > 0 && (
+							<span className="px-1.5 py-0.5 rounded-full bg-muted-foreground/15 text-[10px] font-bold">
+								{totalSourceCount}
+							</span>
+						)}
+					</TabsTrigger>
+				</TabsList>
+
+				<div className="w-full sm:w-72 sm:pb-1">
+					<div className="relative">
+						<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground/60" />
+						<input
+							type="text"
+							placeholder="Search"
+							className="w-full bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 focus:bg-slate-400/10 dark:focus:bg-white/10 border border-border rounded-xl pl-9 pr-4 py-2 text-sm transition-all outline-none placeholder:text-muted-foreground/50"
+							value={searchQuery}
+							onChange={(e) => onSearchChange(e.target.value)}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/date-range-selector.tsx b/surfsense_web/components/assistant-ui/connector-popup/date-range-selector.tsx
new file mode 100644
index 000000000..1112f3f36
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/date-range-selector.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { format, subDays, subYears } from "date-fns";
+import { Calendar as CalendarIcon } from "lucide-react";
+import type { FC } from "react";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+interface DateRangeSelectorProps {
+	startDate: Date | undefined;
+	endDate: Date | undefined;
+	onStartDateChange: (date: Date | undefined) => void;
+	onEndDateChange: (date: Date | undefined) => void;
+}
+
+export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
+	startDate,
+	endDate,
+	onStartDateChange,
+	onEndDateChange,
+}) => {
+	const handleLast30Days = () => {
+		const today = new Date();
+		onStartDateChange(subDays(today, 30));
+		onEndDateChange(today);
+	};
+
+	const handleLastYear = () => {
+		const today = new Date();
+		onStartDateChange(subYears(today, 1));
+		onEndDateChange(today);
+	};
+
+	const handleClearDates = () => {
+		onStartDateChange(undefined);
+		onEndDateChange(undefined);
+	};
+
+	return (
+		<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
+			<h3 className="font-medium mb-4">Select Date Range</h3>
+			<p className="text-sm text-muted-foreground mb-6">
+				Choose how far back you want to sync your data. You can always re-index later with different dates.
+			</p>
+
+			<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+				{/* Start Date */}
+				<div className="space-y-2">
+					<Label htmlFor="start-date">Start Date</Label>
+					<Popover>
+						<PopoverTrigger asChild>
+							<Button
+								id="start-date"
+								variant="outline"
+								className={cn(
+									"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
+									!startDate && "text-muted-foreground"
+								)}
+							>
+								<CalendarIcon className="mr-2 h-4 w-4" />
+								{startDate ? format(startDate, "PPP") : "Default (1 year ago)"}
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent className="w-auto p-0 z-[100]" align="start">
+							<Calendar
+								mode="single"
+								selected={startDate}
+								onSelect={onStartDateChange}
+								disabled={(date) => date > new Date()}
+							/>
+						</PopoverContent>
+					</Popover>
+				</div>
+
+				{/* End Date */}
+				<div className="space-y-2">
+					<Label htmlFor="end-date">End Date</Label>
+					<Popover>
+						<PopoverTrigger asChild>
+							<Button
+								id="end-date"
+								variant="outline"
+								className={cn(
+									"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
+									!endDate && "text-muted-foreground"
+								)}
+							>
+								<CalendarIcon className="mr-2 h-4 w-4" />
+								{endDate ? format(endDate, "PPP") : "Default (Today)"}
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent className="w-auto p-0 z-[100]" align="start">
+							<Calendar
+								mode="single"
+								selected={endDate}
+								onSelect={onEndDateChange}
+								disabled={(date) => date > new Date() || (startDate ? date < startDate : false)}
+							/>
+						</PopoverContent>
+					</Popover>
+				</div>
+			</div>
+
+			{/* Quick date range buttons */}
+			<div className="flex flex-wrap gap-2 mt-4">
+				<Button
+					type="button"
+					variant="outline"
+					size="sm"
+					onClick={handleClearDates}
+					className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
+				>
+					Clear Dates
+				</Button>
+				<Button
+					type="button"
+					variant="outline"
+					size="sm"
+					onClick={handleLast30Days}
+					className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
+				>
+					Last 30 Days
+				</Button>
+				<Button
+					type="button"
+					variant="outline"
+					size="sm"
+					onClick={handleLastYear}
+					className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
+				>
+					Last Year
+				</Button>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/index.ts b/surfsense_web/components/assistant-ui/connector-popup/index.ts
new file mode 100644
index 000000000..da1d4639e
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/index.ts
@@ -0,0 +1,19 @@
+// Main component export
+export { ConnectorIndicator } from "../connector-popup";
+
+// Sub-components (if needed for external use)
+export { ConnectorCard } from "./connector-card";
+export { DateRangeSelector } from "./date-range-selector";
+export { PeriodicSyncConfig } from "./periodic-sync-config";
+export { IndexingConfigurationView } from "./indexing-configuration-view";
+export { ConnectorDialogHeader } from "./connector-dialog-header";
+export { AllConnectorsTab } from "./all-connectors-tab";
+export { ActiveConnectorsTab } from "./active-connectors-tab";
+
+// Constants and types
+export { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./connector-constants";
+export type { IndexingConfigState } from "./connector-constants";
+
+// Hooks
+export { useConnectorDialog } from "./use-connector-dialog";
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx
new file mode 100644
index 000000000..cb9c3b66b
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { ArrowLeft, Check, Loader2 } from "lucide-react";
+import { type FC } from "react";
+import { Button } from "@/components/ui/button";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import type { IndexingConfigState } from "./connector-constants";
+import { DateRangeSelector } from "./date-range-selector";
+import { PeriodicSyncConfig } from "./periodic-sync-config";
+
+interface IndexingConfigurationViewProps {
+	config: IndexingConfigState;
+	startDate: Date | undefined;
+	endDate: Date | undefined;
+	periodicEnabled: boolean;
+	frequencyMinutes: string;
+	isStartingIndexing: boolean;
+	onStartDateChange: (date: Date | undefined) => void;
+	onEndDateChange: (date: Date | undefined) => void;
+	onPeriodicEnabledChange: (enabled: boolean) => void;
+	onFrequencyChange: (frequency: string) => void;
+	onStartIndexing: () => void;
+	onSkip: () => void;
+}
+
+export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
+	config,
+	startDate,
+	endDate,
+	periodicEnabled,
+	frequencyMinutes,
+	isStartingIndexing,
+	onStartDateChange,
+	onEndDateChange,
+	onPeriodicEnabledChange,
+	onFrequencyChange,
+	onStartIndexing,
+	onSkip,
+}) => {
+	return (
+		<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+			{/* Fixed Header */}
+			<div className="flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10">
+				{/* Back button */}
+				<button
+					type="button"
+					onClick={onSkip}
+					className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
+				>
+					<ArrowLeft className="size-4" />
+					Back to connectors
+				</button>
+
+				{/* Success header */}
+				<div className="flex items-center gap-4 mb-6">
+					<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-green-500/10 border border-green-500/20">
+						<Check className="size-7 text-green-500" />
+					</div>
+					<div>
+						<h2 className="text-2xl font-semibold tracking-tight">
+							{config.connectorTitle} Connected!
+						</h2>
+						<p className="text-muted-foreground mt-1">
+							Configure when to start syncing your data
+						</p>
+					</div>
+				</div>
+			</div>
+
+			{/* Scrollable Content */}
+			<div className="flex-1 min-h-0 overflow-y-auto px-6 sm:px-12">
+				<div className="space-y-6 pb-6">
+					<DateRangeSelector
+						startDate={startDate}
+						endDate={endDate}
+						onStartDateChange={onStartDateChange}
+						onEndDateChange={onEndDateChange}
+					/>
+
+					<PeriodicSyncConfig
+						enabled={periodicEnabled}
+						frequencyMinutes={frequencyMinutes}
+						onEnabledChange={onPeriodicEnabledChange}
+						onFrequencyChange={onFrequencyChange}
+					/>
+
+					{/* Info box */}
+					<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
+						<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
+							{getConnectorIcon(config.connectorType, "size-4")}
+						</div>
+						<div className="text-sm">
+							<p className="font-medium">Indexing runs in the background</p>
+							<p className="text-muted-foreground mt-1">
+								You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
+							</p>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			{/* Fixed Footer - Action buttons */}
+			<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 border-t border-border bg-muted">
+				<Button variant="ghost" onClick={onSkip} disabled={isStartingIndexing}>
+					Skip for now
+				</Button>
+				<Button onClick={onStartIndexing} disabled={isStartingIndexing}>
+					{isStartingIndexing ? (
+						<>
+							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+							Starting...
+						</>
+					) : (
+						"Start Indexing"
+					)}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/periodic-sync-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/periodic-sync-config.tsx
new file mode 100644
index 000000000..427a6ac86
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/periodic-sync-config.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import { type FC } from "react";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+
+interface PeriodicSyncConfigProps {
+	enabled: boolean;
+	frequencyMinutes: string;
+	onEnabledChange: (enabled: boolean) => void;
+	onFrequencyChange: (frequency: string) => void;
+}
+
+export const PeriodicSyncConfig: FC<PeriodicSyncConfigProps> = ({
+	enabled,
+	frequencyMinutes,
+	onEnabledChange,
+	onFrequencyChange,
+}) => {
+	return (
+		<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
+			<div className="flex items-center justify-between">
+				<div className="space-y-1">
+					<h3 className="font-medium">Enable Periodic Sync</h3>
+					<p className="text-sm text-muted-foreground">
+						Automatically re-index at regular intervals
+					</p>
+				</div>
+				<Switch checked={enabled} onCheckedChange={onEnabledChange} />
+			</div>
+
+			{enabled && (
+				<div className="mt-4 pt-4 border-t border-border/100 space-y-3">
+					<div className="space-y-2">
+						<Label htmlFor="frequency">Sync Frequency</Label>
+						<Select value={frequencyMinutes} onValueChange={onFrequencyChange}>
+							<SelectTrigger
+								id="frequency"
+								className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20"
+							>
+								<SelectValue placeholder="Select frequency" />
+							</SelectTrigger>
+							<SelectContent className="z-[100]">
+								<SelectItem value="15">Every 15 minutes</SelectItem>
+								<SelectItem value="60">Every hour</SelectItem>
+								<SelectItem value="360">Every 6 hours</SelectItem>
+								<SelectItem value="720">Every 12 hours</SelectItem>
+								<SelectItem value="1440">Daily</SelectItem>
+								<SelectItem value="10080">Weekly</SelectItem>
+							</SelectContent>
+						</Select>
+					</div>
+				</div>
+			)}
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts
new file mode 100644
index 000000000..5a309c2ce
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts
@@ -0,0 +1,295 @@
+import { useAtomValue } from "jotai";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { indexConnectorMutationAtom, updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
+import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
+import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { authenticatedFetch } from "@/lib/auth-utils";
+import { queryClient } from "@/lib/query-client/client";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { format } from "date-fns";
+import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { OAUTH_CONNECTORS } from "./connector-constants";
+import type { IndexingConfigState } from "./connector-constants";
+
+export const useConnectorDialog = () => {
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
+	const { data: allConnectors, refetch: refetchAllConnectors } = useAtomValue(connectorsAtom);
+	const { mutateAsync: indexConnector } = useAtomValue(indexConnectorMutationAtom);
+	const { mutateAsync: updateConnector } = useAtomValue(updateConnectorMutationAtom);
+
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeTab, setActiveTab] = useState("all");
+	const [connectingId, setConnectingId] = useState<string | null>(null);
+	const [isScrolled, setIsScrolled] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [indexingConfig, setIndexingConfig] = useState<IndexingConfigState | null>(null);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [isStartingIndexing, setIsStartingIndexing] = useState(false);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+
+	// Helper function to get frequency label
+	const getFrequencyLabel = useCallback((minutes: string): string => {
+		switch (minutes) {
+			case "15": return "15 minutes";
+			case "60": return "hour";
+			case "360": return "6 hours";
+			case "720": return "12 hours";
+			case "1440": return "day";
+			case "10080": return "week";
+			default: return `${minutes} minutes`;
+		}
+	}, []);
+
+	// Synchronize state with URL query params
+	useEffect(() => {
+		const modalParam = searchParams.get("modal");
+		const tabParam = searchParams.get("tab");
+		const viewParam = searchParams.get("view");
+		const connectorParam = searchParams.get("connector");
+		
+		if (modalParam === "connectors") {
+			if (!isOpen) setIsOpen(true);
+			
+			if (tabParam === "active" || tabParam === "all") {
+				if (activeTab !== tabParam) setActiveTab(tabParam);
+			}
+			
+			if (viewParam === "configure" && connectorParam && !indexingConfig) {
+				const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
+				if (oauthConnector && allConnectors) {
+					const existingConnector = allConnectors.find(
+						(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
+					);
+					if (existingConnector) {
+						setIndexingConfig({
+							connectorType: oauthConnector.connectorType,
+							connectorId: existingConnector.id,
+							connectorTitle: oauthConnector.title,
+						});
+					}
+				}
+			}
+		} else {
+			if (isOpen) setIsOpen(false);
+		}
+	}, [searchParams, isOpen, activeTab, indexingConfig, allConnectors]);
+
+	// Detect OAuth success and transition to config view
+	useEffect(() => {
+		const success = searchParams.get("success");
+		const connectorParam = searchParams.get("connector");
+		const modalParam = searchParams.get("modal");
+		
+		if (success === "true" && connectorParam && searchSpaceId && modalParam === "connectors") {
+			const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
+			if (oauthConnector) {
+				refetchAllConnectors().then((result) => {
+					const newConnector = result.data?.find(
+						(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
+					);
+					if (newConnector) {
+						setIndexingConfig({
+							connectorType: oauthConnector.connectorType,
+							connectorId: newConnector.id,
+							connectorTitle: oauthConnector.title,
+						});
+						setIsOpen(true);
+						const url = new URL(window.location.href);
+						url.searchParams.delete("success");
+						url.searchParams.set("view", "configure");
+						window.history.replaceState({}, "", url.toString());
+					}
+				});
+			}
+		}
+	}, [searchParams, searchSpaceId, refetchAllConnectors]);
+
+	// Handle OAuth connection
+	const handleConnectOAuth = useCallback(
+		async (connector: (typeof OAUTH_CONNECTORS)[0]) => {
+			if (!searchSpaceId || !connector.authEndpoint) return;
+
+			try {
+				setConnectingId(connector.id);
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}${connector.authEndpoint}?space_id=${searchSpaceId}`,
+					{ method: "GET" }
+				);
+
+				if (!response.ok) {
+					throw new Error(`Failed to initiate ${connector.title} OAuth`);
+				}
+
+				const data = await response.json();
+				window.location.href = data.auth_url;
+			} catch (error) {
+				console.error(`Error connecting to ${connector.title}:`, error);
+				toast.error(`Failed to connect to ${connector.title}`);
+			} finally {
+				setConnectingId(null);
+			}
+		},
+		[searchSpaceId]
+	);
+
+	// Handle starting indexing
+	const handleStartIndexing = useCallback(async (refreshConnectors: () => void) => {
+		if (!indexingConfig || !searchSpaceId) return;
+
+		setIsStartingIndexing(true);
+		try {
+			const startDateStr = startDate ? format(startDate, "yyyy-MM-dd") : undefined;
+			const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
+
+			if (periodicEnabled) {
+				const frequency = parseInt(frequencyMinutes, 10);
+				await updateConnector({
+					id: indexingConfig.connectorId,
+					data: {
+						periodic_indexing_enabled: true,
+						indexing_frequency_minutes: frequency,
+					},
+				});
+			}
+
+			await indexConnector({
+				connector_id: indexingConfig.connectorId,
+				queryParams: {
+					search_space_id: searchSpaceId,
+					start_date: startDateStr,
+					end_date: endDateStr,
+				},
+			});
+
+			toast.success(`${indexingConfig.connectorTitle} indexing started`, {
+				description: periodicEnabled 
+					? `Periodic sync enabled every ${getFrequencyLabel(frequencyMinutes)}.`
+					: "You can continue working while we sync your data.",
+			});
+
+			setIndexingConfig(null);
+			setStartDate(undefined);
+			setEndDate(undefined);
+			setPeriodicEnabled(false);
+			setFrequencyMinutes("1440");
+			
+			const url = new URL(window.location.href);
+			url.searchParams.delete("view");
+			url.searchParams.delete("connector");
+			url.searchParams.set("tab", "active");
+			window.history.replaceState({}, "", url.toString());
+			setActiveTab("active");
+			
+			refreshConnectors();
+			queryClient.invalidateQueries({
+				queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
+			});
+		} catch (error) {
+			console.error("Error starting indexing:", error);
+			toast.error("Failed to start indexing");
+		} finally {
+			setIsStartingIndexing(false);
+		}
+	}, [indexingConfig, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, getFrequencyLabel]);
+
+	// Handle skipping indexing
+	const handleSkipIndexing = useCallback(() => {
+		setIndexingConfig(null);
+		setStartDate(undefined);
+		setEndDate(undefined);
+		setPeriodicEnabled(false);
+		setFrequencyMinutes("1440");
+		
+		const url = new URL(window.location.href);
+		url.searchParams.delete("view");
+		url.searchParams.delete("connector");
+		window.history.replaceState({}, "", url.toString());
+	}, []);
+
+	// Handle dialog open/close
+	const handleOpenChange = useCallback(
+		(open: boolean) => {
+			setIsOpen(open);
+
+			if (open) {
+				const url = new URL(window.location.href);
+				url.searchParams.set("modal", "connectors");
+				url.searchParams.set("tab", activeTab);
+				window.history.pushState({ modal: true }, "", url.toString());
+			} else {
+				const url = new URL(window.location.href);
+				url.searchParams.delete("modal");
+				url.searchParams.delete("tab");
+				url.searchParams.delete("success");
+				url.searchParams.delete("connector");
+				url.searchParams.delete("view");
+				window.history.pushState({ modal: false }, "", url.toString());
+				setIsScrolled(false);
+				setSearchQuery("");
+				if (!isStartingIndexing) {
+					setIndexingConfig(null);
+					setStartDate(undefined);
+					setEndDate(undefined);
+					setPeriodicEnabled(false);
+					setFrequencyMinutes("1440");
+				}
+			}
+		},
+		[activeTab, isStartingIndexing]
+	);
+
+	// Handle tab change
+	const handleTabChange = useCallback(
+		(value: string) => {
+			setActiveTab(value);
+			const url = new URL(window.location.href);
+			url.searchParams.set("tab", value);
+			window.history.replaceState({ modal: true }, "", url.toString());
+		},
+		[]
+	);
+
+	// Handle scroll
+	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		setIsScrolled(e.currentTarget.scrollTop > 0);
+	}, []);
+
+	return {
+		// State
+		isOpen,
+		activeTab,
+		connectingId,
+		isScrolled,
+		searchQuery,
+		indexingConfig,
+		startDate,
+		endDate,
+		isStartingIndexing,
+		periodicEnabled,
+		frequencyMinutes,
+		searchSpaceId,
+		allConnectors,
+		
+		// Setters
+		setSearchQuery,
+		setStartDate,
+		setEndDate,
+		setPeriodicEnabled,
+		setFrequencyMinutes,
+		
+		// Handlers
+		handleOpenChange,
+		handleTabChange,
+		handleScroll,
+		handleConnectOAuth,
+		handleStartIndexing,
+		handleSkipIndexing,
+	};
+};
+

From 29a3dcf0916db3c6d78e9e41942bce310506de95 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 30 Dec 2025 21:25:48 +0530
Subject: [PATCH 08/28] feat: Introduce new connector schemas and validation,
 enhance connector dialog with improved query parameter handling, and
 implement scroll detection in indexing configuration view.

---
 .../connector-popup/active-connectors-tab.tsx |   5 +-
 .../connector-popup/all-connectors-tab.tsx    |  45 ++--
 .../connector-popup/connector-card.tsx        |   6 -
 .../connector-popup/connector-constants.ts    |  15 +-
 .../connector-popup.schemas.ts                | 108 +++++++++
 .../assistant-ui/connector-popup/index.ts     |  18 ++
 .../indexing-configuration-view.tsx           | 108 ++++++---
 .../connector-popup/use-connector-dialog.ts   | 214 ++++++++++++------
 8 files changed, 376 insertions(+), 143 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-popup.schemas.ts

diff --git a/surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx
index 323fa34e7..43deba278 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx
@@ -8,6 +8,7 @@ import { Button } from "@/components/ui/button";
 import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import type { LogSummary, LogActiveTask } from "@/contracts/types/log.types";
 import { cn } from "@/lib/utils";
 import {
 	TabsContent,
@@ -20,7 +21,7 @@ interface ActiveConnectorsTabProps {
 	activeDocumentTypes: Array<[string, number]>;
 	connectors: SearchSourceConnector[];
 	indexingConnectorIds: Set<number>;
-	logsSummary: any;
+	logsSummary: LogSummary | undefined;
 	searchSpaceId: string;
 	onTabChange: (value: string) => void;
 }
@@ -67,7 +68,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 						{connectors.map((connector) => {
 							const isIndexing = indexingConnectorIds.has(connector.id);
 							const activeTask = logsSummary?.active_tasks?.find(
-								(task: any) =>
+								(task: LogActiveTask) =>
 									task.source?.includes(`connector_${connector.id}`) ||
 									task.source?.includes(`connector-${connector.id}`)
 							);
diff --git a/surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx
index e2f735b13..4dd056c90 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx
@@ -1,10 +1,7 @@
 "use client";
 
-import { ChevronRight } from "lucide-react";
-import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { type FC } from "react";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./connector-constants";
 import { ConnectorCard } from "./connector-card";
 
@@ -88,32 +85,24 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 							const isConnected = connectedTypes.has(connector.connectorType);
 
 							return (
-								<Link
+								<ConnectorCard
 									key={connector.id}
-									href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
-									className="group flex items-center gap-4 p-4 rounded-xl transition-all duration-150 border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
-								>
-									<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
-										{getConnectorIcon(connector.connectorType, "size-6")}
-									</div>
-									<div className="flex-1 min-w-0">
-										<div className="flex items-center gap-2">
-											<span className="text-[14px] font-semibold leading-tight">
-												{connector.title}
-											</span>
-											{isConnected && (
-												<span
-													className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"
-													title="Connected"
-												/>
-											)}
-										</div>
-										<p className="text-[11px] text-muted-foreground truncate mt-1">
-											{connector.description}
-										</p>
-									</div>
-									<ChevronRight className="size-4 text-muted-foreground/50 group-hover:text-foreground transition-colors flex-shrink-0" />
-								</Link>
+									id={connector.id}
+									title={connector.title}
+									description={connector.description}
+									connectorType={connector.connectorType}
+									isConnected={isConnected}
+									onConnect={() =>
+										router.push(
+											`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
+										)
+									}
+									onManage={() =>
+										router.push(
+											`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
+										)
+									}
+								/>
 							);
 						})}
 					</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-card.tsx
index d1f79b16d..1e5871579 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-card.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-card.tsx
@@ -34,12 +34,6 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 			<div className="flex-1 min-w-0">
 				<div className="flex items-center gap-2">
 					<span className="text-[14px] font-semibold leading-tight">{title}</span>
-					{isConnected && (
-						<span
-							className="size-1.5 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"
-							title="Connected"
-						/>
-					)}
 				</div>
 				<p className="text-[11px] text-muted-foreground truncate mt-1">
 					{isConnected ? "Connected" : description}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts b/surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts
index 65d5bd516..a2750e133 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts
@@ -2,6 +2,13 @@ import { EnumConnectorName } from "@/contracts/enums/connector";
 
 // OAuth Connectors (Quick Connect)
 export const OAUTH_CONNECTORS = [
+	{
+		id: "google-drive-connector",
+		title: "Google Drive",
+		description: "Search your Drive files",
+		connectorType: EnumConnectorName.GOOGLE_DRIVE_CONNECTOR,
+		authEndpoint: "/api/v1/auth/google/drive/connector/add/",
+	},
 	{
 		id: "google-gmail-connector",
 		title: "Gmail",
@@ -125,10 +132,6 @@ export const OTHER_CONNECTORS = [
 	},
 ] as const;
 
-// Type for the indexing configuration state
-export interface IndexingConfigState {
-	connectorType: string;
-	connectorId: number;
-	connectorTitle: string;
-}
+// Re-export IndexingConfigState from schemas for backward compatibility
+export type { IndexingConfigState } from "./connector-popup.schemas";
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-popup.schemas.ts b/surfsense_web/components/assistant-ui/connector-popup/connector-popup.schemas.ts
new file mode 100644
index 000000000..118625e57
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-popup.schemas.ts
@@ -0,0 +1,108 @@
+import { z } from "zod";
+import { searchSourceConnectorTypeEnum } from "@/contracts/types/connector.types";
+
+/**
+ * Schema for URL query parameters used by the connector popup
+ */
+export const connectorPopupQueryParamsSchema = z.object({
+	modal: z.enum(["connectors"]).optional(),
+	tab: z.enum(["all", "active"]).optional(),
+	view: z.enum(["configure"]).optional(),
+	connector: z.string().optional(),
+	success: z.enum(["true", "false"]).optional(),
+});
+
+export type ConnectorPopupQueryParams = z.infer<typeof connectorPopupQueryParamsSchema>;
+
+/**
+ * Schema for OAuth API response (auth_url)
+ */
+export const oauthAuthResponseSchema = z.object({
+	auth_url: z.string().url("Invalid auth URL format"),
+});
+
+export type OAuthAuthResponse = z.infer<typeof oauthAuthResponseSchema>;
+
+/**
+ * Schema for IndexingConfigState
+ */
+export const indexingConfigStateSchema = z.object({
+	connectorType: searchSourceConnectorTypeEnum,
+	connectorId: z.number().int().positive("Connector ID must be a positive integer"),
+	connectorTitle: z.string().min(1, "Connector title is required"),
+});
+
+export type IndexingConfigState = z.infer<typeof indexingConfigStateSchema>;
+
+/**
+ * Schema for frequency minutes (must be one of the allowed values)
+ */
+export const frequencyMinutesSchema = z.enum(["15", "60", "360", "720", "1440", "10080"], {
+	errorMap: () => ({ message: "Invalid frequency value" }),
+});
+
+export type FrequencyMinutes = z.infer<typeof frequencyMinutesSchema>;
+
+/**
+ * Schema for date range validation
+ */
+export const dateRangeSchema = z
+	.object({
+		startDate: z.date().optional(),
+		endDate: z.date().optional(),
+	})
+	.refine(
+		(data) => {
+			if (data.startDate && data.endDate) {
+				return data.startDate <= data.endDate;
+			}
+			return true;
+		},
+		{
+			message: "Start date must be before or equal to end date",
+			path: ["endDate"],
+		}
+	);
+
+export type DateRange = z.infer<typeof dateRangeSchema>;
+
+/**
+ * Schema for connector ID validation (used in URL params)
+ */
+export const connectorIdSchema = z.string().min(1, "Connector ID is required");
+
+/**
+ * Helper function to safely parse query params
+ */
+export function parseConnectorPopupQueryParams(
+	params: URLSearchParams | Record<string, string | null>
+): ConnectorPopupQueryParams {
+	const obj: Record<string, string | undefined> = {};
+	
+	if (params instanceof URLSearchParams) {
+		params.forEach((value, key) => {
+			obj[key] = value || undefined;
+		});
+	} else {
+		Object.entries(params).forEach(([key, value]) => {
+			obj[key] = value || undefined;
+		});
+	}
+	
+	return connectorPopupQueryParamsSchema.parse(obj);
+}
+
+/**
+ * Helper function to safely parse OAuth response
+ */
+export function parseOAuthAuthResponse(data: unknown): OAuthAuthResponse {
+	return oauthAuthResponseSchema.parse(data);
+}
+
+/**
+ * Helper function to validate indexing config state
+ */
+export function validateIndexingConfigState(data: unknown): IndexingConfigState {
+	return indexingConfigStateSchema.parse(data);
+}
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/index.ts b/surfsense_web/components/assistant-ui/connector-popup/index.ts
index da1d4639e..1aea4de95 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/index.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/index.ts
@@ -14,6 +14,24 @@ export { ActiveConnectorsTab } from "./active-connectors-tab";
 export { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./connector-constants";
 export type { IndexingConfigState } from "./connector-constants";
 
+// Schemas and validation
+export {
+	connectorPopupQueryParamsSchema,
+	oauthAuthResponseSchema,
+	indexingConfigStateSchema,
+	frequencyMinutesSchema,
+	dateRangeSchema,
+	parseConnectorPopupQueryParams,
+	parseOAuthAuthResponse,
+	validateIndexingConfigState,
+} from "./connector-popup.schemas";
+export type {
+	ConnectorPopupQueryParams,
+	OAuthAuthResponse,
+	FrequencyMinutes,
+	DateRange,
+} from "./connector-popup.schemas";
+
 // Hooks
 export { useConnectorDialog } from "./use-connector-dialog";
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx
index cb9c3b66b..3135c634b 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 import { ArrowLeft, Check, Loader2 } from "lucide-react";
-import { type FC } from "react";
+import { type FC, useState, useCallback, useRef, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import { cn } from "@/lib/utils";
 import type { IndexingConfigState } from "./connector-constants";
 import { DateRangeSelector } from "./date-range-selector";
 import { PeriodicSyncConfig } from "./periodic-sync-config";
@@ -37,10 +38,49 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 	onStartIndexing,
 	onSkip,
 }) => {
+	const [isScrolled, setIsScrolled] = useState(false);
+	const [hasMoreContent, setHasMoreContent] = useState(false);
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+	const checkScrollState = useCallback(() => {
+		if (!scrollContainerRef.current) return;
+		
+		const target = scrollContainerRef.current;
+		const scrolled = target.scrollTop > 0;
+		const hasMore = target.scrollHeight > target.clientHeight && 
+			target.scrollTop + target.clientHeight < target.scrollHeight - 10;
+		
+		setIsScrolled(scrolled);
+		setHasMoreContent(hasMore);
+	}, []);
+
+	const handleScroll = useCallback(() => {
+		checkScrollState();
+	}, [checkScrollState]);
+
+	// Check initial scroll state and on resize
+	useEffect(() => {
+		checkScrollState();
+		const resizeObserver = new ResizeObserver(() => {
+			checkScrollState();
+		});
+		
+		if (scrollContainerRef.current) {
+			resizeObserver.observe(scrollContainerRef.current);
+		}
+		
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [checkScrollState]);
+
 	return (
 		<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
 			{/* Fixed Header */}
-			<div className="flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10">
+			<div className={cn(
+				"flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10 transition-shadow duration-200 relative z-10",
+				isScrolled && "shadow-sm"
+			)}>
 				{/* Back button */}
 				<button
 					type="button"
@@ -68,39 +108,53 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 			</div>
 
 			{/* Scrollable Content */}
-			<div className="flex-1 min-h-0 overflow-y-auto px-6 sm:px-12">
-				<div className="space-y-6 pb-6">
-					<DateRangeSelector
-						startDate={startDate}
-						endDate={endDate}
-						onStartDateChange={onStartDateChange}
-						onEndDateChange={onEndDateChange}
-					/>
+			<div className="flex-1 min-h-0 relative overflow-hidden">
+				<div 
+					ref={scrollContainerRef}
+					className="h-full overflow-y-auto px-6 sm:px-12" 
+					onScroll={handleScroll}
+				>
+					<div className="space-y-6 pb-6 pt-2">
+						<DateRangeSelector
+							startDate={startDate}
+							endDate={endDate}
+							onStartDateChange={onStartDateChange}
+							onEndDateChange={onEndDateChange}
+						/>
 
-					<PeriodicSyncConfig
-						enabled={periodicEnabled}
-						frequencyMinutes={frequencyMinutes}
-						onEnabledChange={onPeriodicEnabledChange}
-						onFrequencyChange={onFrequencyChange}
-					/>
+						<PeriodicSyncConfig
+							enabled={periodicEnabled}
+							frequencyMinutes={frequencyMinutes}
+							onEnabledChange={onPeriodicEnabledChange}
+							onFrequencyChange={onFrequencyChange}
+						/>
 
-					{/* Info box */}
-					<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
-						<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
-							{getConnectorIcon(config.connectorType, "size-4")}
-						</div>
-						<div className="text-sm">
-							<p className="font-medium">Indexing runs in the background</p>
-							<p className="text-muted-foreground mt-1">
-								You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
-							</p>
+						{/* Info box */}
+						<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
+							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
+								{getConnectorIcon(config.connectorType, "size-4")}
+							</div>
+							<div className="text-sm">
+								<p className="font-medium">Indexing runs in the background</p>
+								<p className="text-muted-foreground mt-1">
+									You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
+								</p>
+							</div>
 						</div>
 					</div>
 				</div>
+				{/* Top fade shadow - appears when scrolled */}
+				{isScrolled && (
+					<div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-muted/50 to-transparent pointer-events-none z-10" />
+				)}
+				{/* Bottom fade shadow - appears when there's more content */}
+				{hasMoreContent && (
+					<div className="absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-t from-muted/50 to-transparent pointer-events-none z-10" />
+				)}
 			</div>
 
 			{/* Fixed Footer - Action buttons */}
-			<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 border-t border-border bg-muted">
+			<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 bg-muted">
 				<Button variant="ghost" onClick={onSkip} disabled={isStartingIndexing}>
 					Skip for now
 				</Button>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts
index 5a309c2ce..32a475300 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts
@@ -10,8 +10,16 @@ import { queryClient } from "@/lib/query-client/client";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { format } from "date-fns";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { searchSourceConnector } from "@/contracts/types/connector.types";
 import { OAUTH_CONNECTORS } from "./connector-constants";
 import type { IndexingConfigState } from "./connector-constants";
+import {
+	parseConnectorPopupQueryParams,
+	parseOAuthAuthResponse,
+	validateIndexingConfigState,
+	frequencyMinutesSchema,
+	dateRangeSchema,
+} from "./connector-popup.schemas";
 
 export const useConnectorDialog = () => {
 	const router = useRouter();
@@ -48,65 +56,101 @@ export const useConnectorDialog = () => {
 
 	// Synchronize state with URL query params
 	useEffect(() => {
-		const modalParam = searchParams.get("modal");
-		const tabParam = searchParams.get("tab");
-		const viewParam = searchParams.get("view");
-		const connectorParam = searchParams.get("connector");
-		
-		if (modalParam === "connectors") {
-			if (!isOpen) setIsOpen(true);
+		try {
+			const params = parseConnectorPopupQueryParams(searchParams);
 			
-			if (tabParam === "active" || tabParam === "all") {
-				if (activeTab !== tabParam) setActiveTab(tabParam);
-			}
-			
-			if (viewParam === "configure" && connectorParam && !indexingConfig) {
-				const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
-				if (oauthConnector && allConnectors) {
-					const existingConnector = allConnectors.find(
-						(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
-					);
-					if (existingConnector) {
-						setIndexingConfig({
-							connectorType: oauthConnector.connectorType,
-							connectorId: existingConnector.id,
-							connectorTitle: oauthConnector.title,
-						});
+			if (params.modal === "connectors") {
+				setIsOpen(true);
+				
+				if (params.tab === "active" || params.tab === "all") {
+					setActiveTab(params.tab);
+				}
+				
+				// Clear indexing config if view is not "configure" anymore
+				if (params.view !== "configure" && indexingConfig) {
+					setIndexingConfig(null);
+				}
+				
+				if (params.view === "configure" && params.connector && !indexingConfig) {
+					const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === params.connector);
+					if (oauthConnector && allConnectors) {
+						const existingConnector = allConnectors.find(
+							(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
+						);
+						if (existingConnector) {
+							// Validate connector data before setting state
+							const connectorValidation = searchSourceConnector.safeParse(existingConnector);
+							if (connectorValidation.success) {
+								const config = validateIndexingConfigState({
+									connectorType: oauthConnector.connectorType,
+									connectorId: existingConnector.id,
+									connectorTitle: oauthConnector.title,
+								});
+								setIndexingConfig(config);
+							}
+						}
 					}
 				}
+			} else {
+				setIsOpen(false);
+				// Clear indexing config when modal is closed
+				if (indexingConfig) {
+					setIndexingConfig(null);
+					setStartDate(undefined);
+					setEndDate(undefined);
+					setPeriodicEnabled(false);
+					setFrequencyMinutes("1440");
+					setIsScrolled(false);
+					setSearchQuery("");
+				}
 			}
-		} else {
-			if (isOpen) setIsOpen(false);
+		} catch (error) {
+			// Invalid query params - log but don't crash
+			console.warn("Invalid connector popup query params:", error);
 		}
-	}, [searchParams, isOpen, activeTab, indexingConfig, allConnectors]);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [searchParams, allConnectors]);
 
 	// Detect OAuth success and transition to config view
 	useEffect(() => {
-		const success = searchParams.get("success");
-		const connectorParam = searchParams.get("connector");
-		const modalParam = searchParams.get("modal");
-		
-		if (success === "true" && connectorParam && searchSpaceId && modalParam === "connectors") {
-			const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === connectorParam);
-			if (oauthConnector) {
-				refetchAllConnectors().then((result) => {
-					const newConnector = result.data?.find(
-						(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
-					);
-					if (newConnector) {
-						setIndexingConfig({
-							connectorType: oauthConnector.connectorType,
-							connectorId: newConnector.id,
-							connectorTitle: oauthConnector.title,
-						});
-						setIsOpen(true);
-						const url = new URL(window.location.href);
-						url.searchParams.delete("success");
-						url.searchParams.set("view", "configure");
-						window.history.replaceState({}, "", url.toString());
-					}
-				});
+		try {
+			const params = parseConnectorPopupQueryParams(searchParams);
+			
+			if (params.success === "true" && params.connector && searchSpaceId && params.modal === "connectors") {
+				const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === params.connector);
+				if (oauthConnector) {
+					refetchAllConnectors().then((result) => {
+						if (!result.data) return;
+						
+						const newConnector = result.data.find(
+							(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
+						);
+						if (newConnector) {
+							// Validate connector data before setting state
+							const connectorValidation = searchSourceConnector.safeParse(newConnector);
+							if (connectorValidation.success) {
+								const config = validateIndexingConfigState({
+									connectorType: oauthConnector.connectorType,
+									connectorId: newConnector.id,
+									connectorTitle: oauthConnector.title,
+								});
+								setIndexingConfig(config);
+								setIsOpen(true);
+								const url = new URL(window.location.href);
+								url.searchParams.delete("success");
+								url.searchParams.set("view", "configure");
+								window.history.replaceState({}, "", url.toString());
+							} else {
+								console.warn("Invalid connector data after OAuth:", connectorValidation.error);
+								toast.error("Failed to validate connector data");
+							}
+						}
+					});
+				}
 			}
+		} catch (error) {
+			// Invalid query params - log but don't crash
+			console.warn("Invalid connector popup query params in OAuth success handler:", error);
 		}
 	}, [searchParams, searchSpaceId, refetchAllConnectors]);
 
@@ -115,8 +159,10 @@ export const useConnectorDialog = () => {
 		async (connector: (typeof OAUTH_CONNECTORS)[0]) => {
 			if (!searchSpaceId || !connector.authEndpoint) return;
 
+			// Set connecting state immediately to disable button and show spinner
+			setConnectingId(connector.id);
+
 			try {
-				setConnectingId(connector.id);
 				const response = await authenticatedFetch(
 					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}${connector.authEndpoint}?space_id=${searchSpaceId}`,
 					{ method: "GET" }
@@ -127,11 +173,21 @@ export const useConnectorDialog = () => {
 				}
 
 				const data = await response.json();
-				window.location.href = data.auth_url;
+				
+				// Validate OAuth response with Zod
+				const validatedData = parseOAuthAuthResponse(data);
+				
+				// Don't clear connectingId here - let the redirect happen with button still disabled
+				// The component will unmount on redirect anyway
+				window.location.href = validatedData.auth_url;
 			} catch (error) {
 				console.error(`Error connecting to ${connector.title}:`, error);
-				toast.error(`Failed to connect to ${connector.title}`);
-			} finally {
+				if (error instanceof Error && error.message.includes("Invalid auth URL")) {
+					toast.error(`Invalid response from ${connector.title} OAuth endpoint`);
+				} else {
+					toast.error(`Failed to connect to ${connector.title}`);
+				}
+				// Only clear connectingId on error so user can retry
 				setConnectingId(null);
 			}
 		},
@@ -142,6 +198,22 @@ export const useConnectorDialog = () => {
 	const handleStartIndexing = useCallback(async (refreshConnectors: () => void) => {
 		if (!indexingConfig || !searchSpaceId) return;
 
+		// Validate date range
+		const dateRangeValidation = dateRangeSchema.safeParse({ startDate, endDate });
+		if (!dateRangeValidation.success) {
+			toast.error(dateRangeValidation.error.errors[0]?.message || "Invalid date range");
+			return;
+		}
+
+		// Validate frequency minutes if periodic is enabled
+		if (periodicEnabled) {
+			const frequencyValidation = frequencyMinutesSchema.safeParse(frequencyMinutes);
+			if (!frequencyValidation.success) {
+				toast.error("Invalid frequency value");
+				return;
+			}
+		}
+
 		setIsStartingIndexing(true);
 		try {
 			const startDateStr = startDate ? format(startDate, "yyyy-MM-dd") : undefined;
@@ -173,18 +245,14 @@ export const useConnectorDialog = () => {
 					: "You can continue working while we sync your data.",
 			});
 
-			setIndexingConfig(null);
-			setStartDate(undefined);
-			setEndDate(undefined);
-			setPeriodicEnabled(false);
-			setFrequencyMinutes("1440");
-			
+			// Update URL - the effect will handle closing the modal and clearing state
 			const url = new URL(window.location.href);
-			url.searchParams.delete("view");
+			url.searchParams.delete("modal");
+			url.searchParams.delete("tab");
+			url.searchParams.delete("success");
 			url.searchParams.delete("connector");
-			url.searchParams.set("tab", "active");
-			window.history.replaceState({}, "", url.toString());
-			setActiveTab("active");
+			url.searchParams.delete("view");
+			router.replace(url.pathname + url.search, { scroll: false });
 			
 			refreshConnectors();
 			queryClient.invalidateQueries({
@@ -196,21 +264,19 @@ export const useConnectorDialog = () => {
 		} finally {
 			setIsStartingIndexing(false);
 		}
-	}, [indexingConfig, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, getFrequencyLabel]);
+	}, [indexingConfig, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, getFrequencyLabel, router]);
 
 	// Handle skipping indexing
 	const handleSkipIndexing = useCallback(() => {
-		setIndexingConfig(null);
-		setStartDate(undefined);
-		setEndDate(undefined);
-		setPeriodicEnabled(false);
-		setFrequencyMinutes("1440");
-		
+		// Update URL - the effect will handle closing the modal and clearing state
 		const url = new URL(window.location.href);
-		url.searchParams.delete("view");
+		url.searchParams.delete("modal");
+		url.searchParams.delete("tab");
+		url.searchParams.delete("success");
 		url.searchParams.delete("connector");
-		window.history.replaceState({}, "", url.toString());
-	}, []);
+		url.searchParams.delete("view");
+		router.replace(url.pathname + url.search, { scroll: false });
+	}, [router]);
 
 	// Handle dialog open/close
 	const handleOpenChange = useCallback(

From ddfbb9509b405bf994b0d476729577523e053437 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 02:00:11 +0530
Subject: [PATCH 09/28] feat: Implement connector editing functionality in the
 popup, including Google Drive folder selection, and enhance connector
 management with improved state handling and UI updates.

---
 .../google_drive_add_connector_route.py       |   3 +-
 .../assistant-ui/connector-popup.tsx          |  56 +-
 .../{ => components}/connector-card.tsx       |   0
 .../connector-dialog-header.tsx               |   0
 .../{ => components}/date-range-selector.tsx  |   0
 .../{ => components}/periodic-sync-config.tsx |   0
 .../components/google-drive-config.tsx        | 103 +++
 .../connector-configs/index.tsx               |  28 +
 .../views/connector-edit-view.tsx             | 247 +++++++
 .../views}/indexing-configuration-view.tsx    |  42 +-
 .../{ => constants}/connector-constants.ts    |   2 +-
 .../connector-popup.schemas.ts                |   3 +-
 .../hooks/use-connector-dialog.ts             | 637 ++++++++++++++++++
 .../assistant-ui/connector-popup/index.ts     |  25 +-
 .../{ => tabs}/active-connectors-tab.tsx      |   8 +-
 .../{ => tabs}/all-connectors-tab.tsx         |  29 +-
 .../connector-popup/use-connector-dialog.ts   | 361 ----------
 .../connectors/google-drive-folder-tree.tsx   |  80 ++-
 surfsense_web/components/ui/switch.tsx        |   4 +-
 19 files changed, 1182 insertions(+), 446 deletions(-)
 rename surfsense_web/components/assistant-ui/connector-popup/{ => components}/connector-card.tsx (100%)
 rename surfsense_web/components/assistant-ui/connector-popup/{ => components}/connector-dialog-header.tsx (100%)
 rename surfsense_web/components/assistant-ui/connector-popup/{ => components}/date-range-selector.tsx (100%)
 rename surfsense_web/components/assistant-ui/connector-popup/{ => components}/periodic-sync-config.tsx (100%)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
 rename surfsense_web/components/assistant-ui/connector-popup/{ => connector-configs/views}/indexing-configuration-view.tsx (79%)
 rename surfsense_web/components/assistant-ui/connector-popup/{ => constants}/connector-constants.ts (98%)
 rename surfsense_web/components/assistant-ui/connector-popup/{ => constants}/connector-popup.schemas.ts (97%)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
 rename surfsense_web/components/assistant-ui/connector-popup/{ => tabs}/active-connectors-tab.tsx (97%)
 rename surfsense_web/components/assistant-ui/connector-popup/{ => tabs}/all-connectors-tab.tsx (72%)
 delete mode 100644 surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts

diff --git a/surfsense_backend/app/routes/google_drive_add_connector_route.py b/surfsense_backend/app/routes/google_drive_add_connector_route.py
index d11404781..73ad76409 100644
--- a/surfsense_backend/app/routes/google_drive_add_connector_route.py
+++ b/surfsense_backend/app/routes/google_drive_add_connector_route.py
@@ -208,9 +208,8 @@ async def drive_callback(
             f"Successfully created Google Drive connector {db_connector.id} for user {user_id}"
         )
 
-        # Redirect to connectors management page (not to folder selection)
         return RedirectResponse(
-            url=f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/connectors?success=google-drive-connected"
+            url=f"{config.NEXT_FRONTEND_URL}/dashboard/{space_id}/new-chat?modal=connectors&tab=all&success=true&connector=google-drive-connector"
         )
 
     except HTTPException:
diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index 1e9e09869..c1ed38e7b 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -17,11 +17,12 @@ import {
 } from "@/components/ui/tabs";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { cn } from "@/lib/utils";
-import { AllConnectorsTab } from "./connector-popup/all-connectors-tab";
-import { ActiveConnectorsTab } from "./connector-popup/active-connectors-tab";
-import { ConnectorDialogHeader } from "./connector-popup/connector-dialog-header";
-import { IndexingConfigurationView } from "./connector-popup/indexing-configuration-view";
-import { useConnectorDialog } from "./connector-popup/use-connector-dialog";
+import { AllConnectorsTab } from "./connector-popup/tabs/all-connectors-tab";
+import { ActiveConnectorsTab } from "./connector-popup/tabs/active-connectors-tab";
+import { ConnectorDialogHeader } from "./connector-popup/components/connector-dialog-header";
+import { ConnectorEditView } from "./connector-popup/connector-configs/views/connector-edit-view";
+import { IndexingConfigurationView } from "./connector-popup/connector-configs/views/indexing-configuration-view";
+import { useConnectorDialog } from "./connector-popup/hooks/use-connector-dialog";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 
 export const ConnectorIndicator: FC = () => {
@@ -67,9 +68,14 @@ export const ConnectorIndicator: FC = () => {
 		isScrolled,
 		searchQuery,
 		indexingConfig,
+		indexingConnector,
+		indexingConnectorConfig,
+		editingConnector,
 		startDate,
 		endDate,
 		isStartingIndexing,
+		isSaving,
+		isDisconnecting,
 		periodicEnabled,
 		frequencyMinutes,
 		allConnectors,
@@ -84,6 +90,13 @@ export const ConnectorIndicator: FC = () => {
 		handleConnectOAuth,
 		handleStartIndexing,
 		handleSkipIndexing,
+		handleStartEdit,
+		handleSaveConnector,
+		handleDisconnectConnector,
+		handleBackFromEdit,
+		connectorConfig,
+		setConnectorConfig,
+		setIndexingConnectorConfig,
 	} = useConnectorDialog();
 
 	// Get document types that have documents in the search space
@@ -133,10 +146,35 @@ export const ConnectorIndicator: FC = () => {
 			</TooltipIconButton>
 
 			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
-				{/* Indexing Configuration View - shown after OAuth success */}
-				{indexingConfig ? (
+				{/* Connector Edit View - shown when editing existing connector */}
+				{editingConnector ? (
+					<ConnectorEditView
+						connector={{
+							...editingConnector,
+							config: connectorConfig || editingConnector.config,
+						}}
+						startDate={startDate}
+						endDate={endDate}
+						periodicEnabled={periodicEnabled}
+						frequencyMinutes={frequencyMinutes}
+						isSaving={isSaving}
+						isDisconnecting={isDisconnecting}
+						onStartDateChange={setStartDate}
+						onEndDateChange={setEndDate}
+						onPeriodicEnabledChange={setPeriodicEnabled}
+						onFrequencyChange={setFrequencyMinutes}
+						onSave={() => handleSaveConnector(refreshConnectors)}
+						onDisconnect={() => handleDisconnectConnector(refreshConnectors)}
+						onBack={handleBackFromEdit}
+						onConfigChange={setConnectorConfig}
+					/>
+				) : indexingConfig ? (
 					<IndexingConfigurationView
 						config={indexingConfig}
+						connector={indexingConnector ? {
+							...indexingConnector,
+							config: indexingConnectorConfig || indexingConnector.config,
+						} : undefined}
 						startDate={startDate}
 						endDate={endDate}
 						periodicEnabled={periodicEnabled}
@@ -146,6 +184,7 @@ export const ConnectorIndicator: FC = () => {
 						onEndDateChange={setEndDate}
 						onPeriodicEnabledChange={setPeriodicEnabled}
 						onFrequencyChange={setFrequencyMinutes}
+						onConfigChange={setIndexingConnectorConfig}
 						onStartIndexing={() => handleStartIndexing(refreshConnectors)}
 						onSkip={handleSkipIndexing}
 					/>
@@ -171,7 +210,9 @@ export const ConnectorIndicator: FC = () => {
 											searchSpaceId={searchSpaceId}
 											connectedTypes={connectedTypes}
 											connectingId={connectingId}
+											allConnectors={allConnectors}
 											onConnectOAuth={handleConnectOAuth}
+											onManage={handleStartEdit}
 										/>
 									</TabsContent>
 
@@ -184,6 +225,7 @@ export const ConnectorIndicator: FC = () => {
 										logsSummary={logsSummary}
 										searchSpaceId={searchSpaceId}
 										onTabChange={handleTabChange}
+										onManage={handleStartEdit}
 									/>
 								</div>
 							</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
similarity index 100%
rename from surfsense_web/components/assistant-ui/connector-popup/connector-card.tsx
rename to surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-dialog-header.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
similarity index 100%
rename from surfsense_web/components/assistant-ui/connector-popup/connector-dialog-header.tsx
rename to surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
diff --git a/surfsense_web/components/assistant-ui/connector-popup/date-range-selector.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx
similarity index 100%
rename from surfsense_web/components/assistant-ui/connector-popup/date-range-selector.tsx
rename to surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx
diff --git a/surfsense_web/components/assistant-ui/connector-popup/periodic-sync-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/periodic-sync-config.tsx
similarity index 100%
rename from surfsense_web/components/assistant-ui/connector-popup/periodic-sync-config.tsx
rename to surfsense_web/components/assistant-ui/connector-popup/components/periodic-sync-config.tsx
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
new file mode 100644
index 000000000..280d6ed23
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
@@ -0,0 +1,103 @@
+"use client";
+
+import { Info } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { GoogleDriveFolderTree } from "@/components/connectors/google-drive-folder-tree";
+import type { ConnectorConfigProps } from "../index";
+
+interface SelectedFolder {
+	id: string;
+	name: string;
+}
+
+export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({
+	connector,
+	onConfigChange,
+}) => {
+	// Initialize with existing selected folders from connector config
+	const existingFolders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
+	const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders);
+	const [showFolderSelector, setShowFolderSelector] = useState(false);
+
+	// Update selected folders when connector config changes
+	useEffect(() => {
+		const folders = (connector.config?.selected_folders as SelectedFolder[] | undefined) || [];
+		setSelectedFolders(folders);
+	}, [connector.config]);
+
+	const handleSelectFolders = (folders: SelectedFolder[]) => {
+		setSelectedFolders(folders);
+		if (onConfigChange) {
+			// Store folder IDs and names in config for indexing
+			onConfigChange({
+				...connector.config,
+				selected_folders: folders,
+			});
+		}
+	};
+
+	return (
+		<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">
+			<div className="space-y-1 sm:space-y-2">
+				<h3 className="font-medium text-sm sm:text-base">Folder Selection</h3>
+				<p className="text-xs sm:text-sm text-muted-foreground">
+					Select specific folders to index. Only files directly in each folder will be processed—subfolders must be selected separately.
+				</p>
+			</div>
+
+			{selectedFolders.length > 0 && (
+				<div className="p-2 sm:p-3 bg-muted rounded-lg text-xs sm:text-sm space-y-1 sm:space-y-2">
+					<p className="font-medium">
+						Selected {selectedFolders.length} folder{selectedFolders.length > 1 ? "s" : ""}:
+					</p>
+					<div className="max-h-20 sm:max-h-24 overflow-y-auto">
+						{selectedFolders.map((folder) => (
+							<p key={folder.id} className="text-xs sm:text-sm text-muted-foreground truncate" title={folder.name}>
+								• {folder.name}
+							</p>
+						))}
+					</div>
+				</div>
+			)}
+
+			{showFolderSelector ? (
+				<div className="space-y-2 sm:space-y-3">
+					<GoogleDriveFolderTree
+						connectorId={connector.id}
+						selectedFolders={selectedFolders}
+						onSelectFolders={handleSelectFolders}
+					/>
+					<Button
+						type="button"
+						variant="outline"
+						size="sm"
+						onClick={() => setShowFolderSelector(false)}
+						className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
+					>
+						Done Selecting
+					</Button>
+				</div>
+			) : (
+				<Button
+					type="button"
+					variant="outline"
+					onClick={() => setShowFolderSelector(true)}
+					className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
+				>
+					{selectedFolders.length > 0 ? "Change Folder Selection" : "Select Folders"}
+				</Button>
+			)}
+
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
+				<AlertDescription className="text-[10px] sm:text-xs">
+					Folder selection is used when indexing. You can change this selection when you start indexing.
+				</AlertDescription>
+			</Alert>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
new file mode 100644
index 000000000..eb2594ad6
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import type { FC } from "react";
+import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { GoogleDriveConfig } from "./components/google-drive-config";
+
+export interface ConnectorConfigProps {
+	connector: SearchSourceConnector;
+	onConfigChange?: (config: Record<string, unknown>) => void;
+}
+
+export type ConnectorConfigComponent = FC<ConnectorConfigProps>;
+
+/**
+ * Factory function to get the appropriate config component for a connector type
+ */
+export function getConnectorConfigComponent(
+	connectorType: string
+): ConnectorConfigComponent | null {
+	switch (connectorType) {
+		case "GOOGLE_DRIVE_CONNECTOR":
+			return GoogleDriveConfig;
+		// OAuth connectors (Gmail, Calendar, Airtable) and others don't need special config UI
+		default:
+			return null;
+	}
+}
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
new file mode 100644
index 000000000..cc4f3a815
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
@@ -0,0 +1,247 @@
+"use client";
+
+import { ArrowLeft, Loader2, Trash2 } from "lucide-react";
+import { type FC, useState, useCallback, useRef, useEffect, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { cn } from "@/lib/utils";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { PeriodicSyncConfig } from "../../components/periodic-sync-config";
+import { getConnectorConfigComponent } from "../index";
+
+interface ConnectorEditViewProps {
+	connector: SearchSourceConnector;
+	startDate: Date | undefined;
+	endDate: Date | undefined;
+	periodicEnabled: boolean;
+	frequencyMinutes: string;
+	isSaving: boolean;
+	isDisconnecting: boolean;
+	onStartDateChange: (date: Date | undefined) => void;
+	onEndDateChange: (date: Date | undefined) => void;
+	onPeriodicEnabledChange: (enabled: boolean) => void;
+	onFrequencyChange: (frequency: string) => void;
+	onSave: () => void;
+	onDisconnect: () => void;
+	onBack: () => void;
+	onConfigChange?: (config: Record<string, any>) => void;
+}
+
+export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
+	connector,
+	startDate,
+	endDate,
+	periodicEnabled,
+	frequencyMinutes,
+	isSaving,
+	isDisconnecting,
+	onStartDateChange,
+	onEndDateChange,
+	onPeriodicEnabledChange,
+	onFrequencyChange,
+	onSave,
+	onDisconnect,
+	onBack,
+	onConfigChange,
+}) => {
+	// Get connector-specific config component
+	const ConnectorConfigComponent = useMemo(
+		() => getConnectorConfigComponent(connector.connector_type),
+		[connector.connector_type]
+	);
+	const [isScrolled, setIsScrolled] = useState(false);
+	const [hasMoreContent, setHasMoreContent] = useState(false);
+	const [showDisconnectConfirm, setShowDisconnectConfirm] = useState(false);
+	const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+	const checkScrollState = useCallback(() => {
+		if (!scrollContainerRef.current) return;
+		
+		const target = scrollContainerRef.current;
+		const scrolled = target.scrollTop > 0;
+		const hasMore = target.scrollHeight > target.clientHeight && 
+			target.scrollTop + target.clientHeight < target.scrollHeight - 10;
+		
+		setIsScrolled(scrolled);
+		setHasMoreContent(hasMore);
+	}, []);
+
+	const handleScroll = useCallback(() => {
+		checkScrollState();
+	}, [checkScrollState]);
+
+	// Check initial scroll state and on resize
+	useEffect(() => {
+		checkScrollState();
+		const resizeObserver = new ResizeObserver(() => {
+			checkScrollState();
+		});
+		
+		if (scrollContainerRef.current) {
+			resizeObserver.observe(scrollContainerRef.current);
+		}
+		
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [checkScrollState]);
+
+	const handleDisconnectClick = () => {
+		setShowDisconnectConfirm(true);
+	};
+
+	const handleDisconnectConfirm = () => {
+		setShowDisconnectConfirm(false);
+		onDisconnect();
+	};
+
+	const handleDisconnectCancel = () => {
+		setShowDisconnectConfirm(false);
+	};
+
+	return (
+		<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+			{/* Fixed Header */}
+			<div className={cn(
+				"flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10 transition-shadow duration-200 relative z-10",
+				isScrolled && "shadow-sm"
+			)}>
+				{/* Back button */}
+				<button
+					type="button"
+					onClick={onBack}
+					className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
+				>
+					<ArrowLeft className="size-4" />
+					Back to connectors
+				</button>
+
+				{/* Connector header */}
+				<div className="flex items-center gap-4 mb-6">
+					<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-primary/10 border border-primary/20">
+						{getConnectorIcon(connector.connector_type, "size-7")}
+					</div>
+					<div className="flex-1">
+						<h2 className="text-2xl font-semibold tracking-tight">
+							{connector.name}
+						</h2>
+						<p className="text-muted-foreground mt-1">
+							Manage your connector settings and sync configuration
+						</p>
+					</div>
+				</div>
+			</div>
+
+			{/* Scrollable Content */}
+			<div className="flex-1 min-h-0 relative overflow-hidden">
+				<div 
+					ref={scrollContainerRef}
+					className="h-full overflow-y-auto px-6 sm:px-12" 
+					onScroll={handleScroll}
+				>
+					<div className="space-y-6 pb-6 pt-2">
+						{/* Connector-specific configuration */}
+						{ConnectorConfigComponent && (
+							<ConnectorConfigComponent
+								connector={connector}
+								onConfigChange={onConfigChange}
+							/>
+						)}
+
+						{/* Date range selector - not shown for Google Drive (uses folder selection instead) */}
+						{connector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && (
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={onStartDateChange}
+								onEndDateChange={onEndDateChange}
+							/>
+						)}
+
+						<PeriodicSyncConfig
+							enabled={periodicEnabled}
+							frequencyMinutes={frequencyMinutes}
+							onEnabledChange={onPeriodicEnabledChange}
+							onFrequencyChange={onFrequencyChange}
+						/>
+
+						{/* Info box */}
+						<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
+							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
+								{getConnectorIcon(connector.connector_type, "size-4")}
+							</div>
+							<div className="text-sm">
+								<p className="font-medium">Re-indexing runs in the background</p>
+								<p className="text-muted-foreground mt-1">
+									You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				{/* Top fade shadow - appears when scrolled */}
+				{isScrolled && (
+					<div className="absolute top-0 left-0 right-0 h-6 bg-gradient-to-b from-muted/50 to-transparent pointer-events-none z-10" />
+				)}
+				{/* Bottom fade shadow - appears when there's more content */}
+				{hasMoreContent && (
+					<div className="absolute bottom-0 left-0 right-0 h-3 bg-gradient-to-t from-muted/50 to-transparent pointer-events-none z-10" />
+				)}
+			</div>
+
+			{/* Fixed Footer - Action buttons */}
+			<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 bg-muted border-t border-border">
+				{showDisconnectConfirm ? (
+					<div className="flex items-center gap-3">
+						<span className="text-sm text-muted-foreground">Are you sure?</span>
+						<Button
+							variant="destructive"
+							size="sm"
+							onClick={handleDisconnectConfirm}
+							disabled={isDisconnecting}
+						>
+							{isDisconnecting ? (
+								<>
+									<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+									Disconnecting...
+								</>
+							) : (
+								"Confirm Disconnect"
+							)}
+						</Button>
+						<Button
+							variant="ghost"
+							size="sm"
+							onClick={handleDisconnectCancel}
+							disabled={isDisconnecting}
+						>
+							Cancel
+						</Button>
+					</div>
+				) : (
+					<Button
+						variant="destructive"
+						size="sm"
+						onClick={handleDisconnectClick}
+						disabled={isSaving || isDisconnecting}
+					>
+						<Trash2 className="mr-2 h-4 w-4" />
+						Disconnect
+					</Button>
+				)}
+				<Button onClick={onSave} disabled={isSaving || isDisconnecting}>
+					{isSaving ? (
+						<>
+							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+							Saving...
+						</>
+					) : (
+						"Save Changes"
+					)}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
similarity index 79%
rename from surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx
rename to surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
index 3135c634b..2c11eb415 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/indexing-configuration-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
@@ -1,16 +1,19 @@
 "use client";
 
 import { ArrowLeft, Check, Loader2 } from "lucide-react";
-import { type FC, useState, useCallback, useRef, useEffect } from "react";
+import { type FC, useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { cn } from "@/lib/utils";
-import type { IndexingConfigState } from "./connector-constants";
-import { DateRangeSelector } from "./date-range-selector";
-import { PeriodicSyncConfig } from "./periodic-sync-config";
+import type { IndexingConfigState } from "../../constants/connector-constants";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { PeriodicSyncConfig } from "../../components/periodic-sync-config";
+import { getConnectorConfigComponent } from "../index";
 
 interface IndexingConfigurationViewProps {
 	config: IndexingConfigState;
+	connector?: SearchSourceConnector;
 	startDate: Date | undefined;
 	endDate: Date | undefined;
 	periodicEnabled: boolean;
@@ -20,12 +23,14 @@ interface IndexingConfigurationViewProps {
 	onEndDateChange: (date: Date | undefined) => void;
 	onPeriodicEnabledChange: (enabled: boolean) => void;
 	onFrequencyChange: (frequency: string) => void;
+	onConfigChange?: (config: Record<string, unknown>) => void;
 	onStartIndexing: () => void;
 	onSkip: () => void;
 }
 
 export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 	config,
+	connector,
 	startDate,
 	endDate,
 	periodicEnabled,
@@ -35,9 +40,15 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 	onEndDateChange,
 	onPeriodicEnabledChange,
 	onFrequencyChange,
+	onConfigChange,
 	onStartIndexing,
 	onSkip,
 }) => {
+	// Get connector-specific config component
+	const ConnectorConfigComponent = useMemo(
+		() => connector ? getConnectorConfigComponent(connector.connector_type) : null,
+		[connector]
+	);
 	const [isScrolled, setIsScrolled] = useState(false);
 	const [hasMoreContent, setHasMoreContent] = useState(false);
 	const scrollContainerRef = useRef<HTMLDivElement>(null);
@@ -115,12 +126,23 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 					onScroll={handleScroll}
 				>
 					<div className="space-y-6 pb-6 pt-2">
-						<DateRangeSelector
-							startDate={startDate}
-							endDate={endDate}
-							onStartDateChange={onStartDateChange}
-							onEndDateChange={onEndDateChange}
-						/>
+						{/* Connector-specific configuration */}
+						{ConnectorConfigComponent && connector && (
+							<ConnectorConfigComponent
+								connector={connector}
+								onConfigChange={onConfigChange}
+							/>
+						)}
+
+						{/* Date range selector - not shown for Google Drive (uses folder selection instead) */}
+						{config.connectorType !== "GOOGLE_DRIVE_CONNECTOR" && (
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={onStartDateChange}
+								onEndDateChange={onEndDateChange}
+							/>
+						)}
 
 						<PeriodicSyncConfig
 							enabled={periodicEnabled}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
similarity index 98%
rename from surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts
rename to surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
index a2750e133..189b5cc5c 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-constants.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
@@ -32,7 +32,7 @@ export const OAUTH_CONNECTORS = [
 	},
 ] as const;
 
-// Non-OAuth Connectors
+// Non-OAuth Connectors (redirect to old connector config pages)
 export const OTHER_CONNECTORS = [
 	{
 		id: "slack-connector",
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-popup.schemas.ts b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
similarity index 97%
rename from surfsense_web/components/assistant-ui/connector-popup/connector-popup.schemas.ts
rename to surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
index 118625e57..ff2fc001d 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-popup.schemas.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
@@ -7,8 +7,9 @@ import { searchSourceConnectorTypeEnum } from "@/contracts/types/connector.types
 export const connectorPopupQueryParamsSchema = z.object({
 	modal: z.enum(["connectors"]).optional(),
 	tab: z.enum(["all", "active"]).optional(),
-	view: z.enum(["configure"]).optional(),
+	view: z.enum(["configure", "edit"]).optional(),
 	connector: z.string().optional(),
+	connectorId: z.string().optional(),
 	success: z.enum(["true", "false"]).optional(),
 });
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
new file mode 100644
index 000000000..1dfeadcd2
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@@ -0,0 +1,637 @@
+import { useAtomValue } from "jotai";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { deleteConnectorMutationAtom, indexConnectorMutationAtom, updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
+import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
+import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { authenticatedFetch } from "@/lib/auth-utils";
+import { queryClient } from "@/lib/query-client/client";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { format } from "date-fns";
+import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { searchSourceConnector } from "@/contracts/types/connector.types";
+import { OAUTH_CONNECTORS } from "../constants/connector-constants";
+import type { IndexingConfigState } from "../constants/connector-constants";
+import {
+	parseConnectorPopupQueryParams,
+	parseOAuthAuthResponse,
+	validateIndexingConfigState,
+	frequencyMinutesSchema,
+	dateRangeSchema,
+} from "../constants/connector-popup.schemas";
+
+export const useConnectorDialog = () => {
+	const router = useRouter();
+	const searchParams = useSearchParams();
+	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
+	const { data: allConnectors, refetch: refetchAllConnectors } = useAtomValue(connectorsAtom);
+	const { mutateAsync: indexConnector } = useAtomValue(indexConnectorMutationAtom);
+	const { mutateAsync: updateConnector } = useAtomValue(updateConnectorMutationAtom);
+	const { mutateAsync: deleteConnector } = useAtomValue(deleteConnectorMutationAtom);
+
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeTab, setActiveTab] = useState("all");
+	const [connectingId, setConnectingId] = useState<string | null>(null);
+	const [isScrolled, setIsScrolled] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [indexingConfig, setIndexingConfig] = useState<IndexingConfigState | null>(null);
+	const [indexingConnector, setIndexingConnector] = useState<SearchSourceConnector | null>(null);
+	const [indexingConnectorConfig, setIndexingConnectorConfig] = useState<Record<string, unknown> | null>(null);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [isStartingIndexing, setIsStartingIndexing] = useState(false);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+	
+	// Edit mode state
+	const [editingConnector, setEditingConnector] = useState<SearchSourceConnector | null>(null);
+	const [isSaving, setIsSaving] = useState(false);
+	const [isDisconnecting, setIsDisconnecting] = useState(false);
+	const [connectorConfig, setConnectorConfig] = useState<Record<string, unknown> | null>(null);
+
+	// Helper function to get frequency label
+	const getFrequencyLabel = useCallback((minutes: string): string => {
+		switch (minutes) {
+			case "15": return "15 minutes";
+			case "60": return "hour";
+			case "360": return "6 hours";
+			case "720": return "12 hours";
+			case "1440": return "day";
+			case "10080": return "week";
+			default: return `${minutes} minutes`;
+		}
+	}, []);
+
+	// Synchronize state with URL query params
+	useEffect(() => {
+		try {
+			const params = parseConnectorPopupQueryParams(searchParams);
+			
+			if (params.modal === "connectors") {
+				setIsOpen(true);
+				
+				if (params.tab === "active" || params.tab === "all") {
+					setActiveTab(params.tab);
+				}
+				
+				// Clear indexing config if view is not "configure" anymore
+				if (params.view !== "configure" && indexingConfig) {
+					setIndexingConfig(null);
+				}
+				
+				// Clear editing connector if view is not "edit" anymore
+				if (params.view !== "edit" && editingConnector) {
+					setEditingConnector(null);
+				}
+				
+				if (params.view === "configure" && params.connector && !indexingConfig) {
+					const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === params.connector);
+					if (oauthConnector && allConnectors) {
+						const existingConnector = allConnectors.find(
+							(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
+						);
+						if (existingConnector) {
+							// Validate connector data before setting state
+							const connectorValidation = searchSourceConnector.safeParse(existingConnector);
+							if (connectorValidation.success) {
+								const config = validateIndexingConfigState({
+									connectorType: oauthConnector.connectorType,
+									connectorId: existingConnector.id,
+									connectorTitle: oauthConnector.title,
+								});
+								setIndexingConfig(config);
+								setIndexingConnector(existingConnector);
+								setIndexingConnectorConfig(existingConnector.config);
+							}
+						}
+					}
+				}
+				
+				// Handle edit view
+				if (params.view === "edit" && params.connectorId && allConnectors && !editingConnector) {
+					const connectorId = parseInt(params.connectorId, 10);
+					const connector = allConnectors.find((c: SearchSourceConnector) => c.id === connectorId);
+					if (connector) {
+						const connectorValidation = searchSourceConnector.safeParse(connector);
+						if (connectorValidation.success) {
+							setEditingConnector(connector);
+							setConnectorConfig(connector.config);
+							// Load existing periodic sync settings
+							setPeriodicEnabled(connector.periodic_indexing_enabled);
+							setFrequencyMinutes(
+								connector.indexing_frequency_minutes?.toString() || "1440"
+							);
+							// Reset dates - user can set new ones for re-indexing
+							setStartDate(undefined);
+							setEndDate(undefined);
+						}
+					}
+				}
+			} else {
+				setIsOpen(false);
+				// Clear indexing config when modal is closed
+				if (indexingConfig) {
+					setIndexingConfig(null);
+					setIndexingConnector(null);
+					setIndexingConnectorConfig(null);
+					setStartDate(undefined);
+					setEndDate(undefined);
+					setPeriodicEnabled(false);
+					setFrequencyMinutes("1440");
+					setIsScrolled(false);
+					setSearchQuery("");
+				}
+				// Clear editing connector when modal is closed
+				if (editingConnector) {
+					setEditingConnector(null);
+					setConnectorConfig(null);
+					setStartDate(undefined);
+					setEndDate(undefined);
+					setPeriodicEnabled(false);
+					setFrequencyMinutes("1440");
+					setIsScrolled(false);
+					setSearchQuery("");
+				}
+			}
+		} catch (error) {
+			// Invalid query params - log but don't crash
+			console.warn("Invalid connector popup query params:", error);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [searchParams, allConnectors, editingConnector, indexingConfig]);
+
+	// Detect OAuth success and transition to config view
+	useEffect(() => {
+		try {
+			const params = parseConnectorPopupQueryParams(searchParams);
+			
+			if (params.success === "true" && params.connector && searchSpaceId && params.modal === "connectors") {
+				const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === params.connector);
+				if (oauthConnector) {
+					refetchAllConnectors().then((result) => {
+						if (!result.data) return;
+						
+						const newConnector = result.data.find(
+							(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
+						);
+						if (newConnector) {
+							// Validate connector data before setting state
+							const connectorValidation = searchSourceConnector.safeParse(newConnector);
+							if (connectorValidation.success) {
+								const config = validateIndexingConfigState({
+									connectorType: oauthConnector.connectorType,
+									connectorId: newConnector.id,
+									connectorTitle: oauthConnector.title,
+								});
+								setIndexingConfig(config);
+								setIndexingConnector(newConnector);
+								setIndexingConnectorConfig(newConnector.config);
+								setIsOpen(true);
+								const url = new URL(window.location.href);
+								url.searchParams.delete("success");
+								url.searchParams.set("view", "configure");
+								window.history.replaceState({}, "", url.toString());
+							} else {
+								console.warn("Invalid connector data after OAuth:", connectorValidation.error);
+								toast.error("Failed to validate connector data");
+							}
+						}
+					});
+				}
+			}
+		} catch (error) {
+			// Invalid query params - log but don't crash
+			console.warn("Invalid connector popup query params in OAuth success handler:", error);
+		}
+	}, [searchParams, searchSpaceId, refetchAllConnectors]);
+
+	// Handle OAuth connection
+	const handleConnectOAuth = useCallback(
+		async (connector: (typeof OAUTH_CONNECTORS)[0]) => {
+			if (!searchSpaceId || !connector.authEndpoint) return;
+
+			// Set connecting state immediately to disable button and show spinner
+			setConnectingId(connector.id);
+
+			try {
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}${connector.authEndpoint}?space_id=${searchSpaceId}`,
+					{ method: "GET" }
+				);
+
+				if (!response.ok) {
+					throw new Error(`Failed to initiate ${connector.title} OAuth`);
+				}
+
+				const data = await response.json();
+				
+				// Validate OAuth response with Zod
+				const validatedData = parseOAuthAuthResponse(data);
+				
+				// Don't clear connectingId here - let the redirect happen with button still disabled
+				// The component will unmount on redirect anyway
+				window.location.href = validatedData.auth_url;
+			} catch (error) {
+				console.error(`Error connecting to ${connector.title}:`, error);
+				if (error instanceof Error && error.message.includes("Invalid auth URL")) {
+					toast.error(`Invalid response from ${connector.title} OAuth endpoint`);
+				} else {
+					toast.error(`Failed to connect to ${connector.title}`);
+				}
+				// Only clear connectingId on error so user can retry
+				setConnectingId(null);
+			}
+		},
+		[searchSpaceId]
+	);
+
+	// Handle starting indexing
+	const handleStartIndexing = useCallback(async (refreshConnectors: () => void) => {
+		if (!indexingConfig || !searchSpaceId) return;
+
+		// Validate date range
+		const dateRangeValidation = dateRangeSchema.safeParse({ startDate, endDate });
+		if (!dateRangeValidation.success) {
+			const firstIssueMsg =
+				dateRangeValidation.error.issues && dateRangeValidation.error.issues.length > 0
+					? dateRangeValidation.error.issues[0].message
+					: "Invalid date range";
+			toast.error(firstIssueMsg);
+			return;
+		}
+
+		// Validate frequency minutes if periodic is enabled
+		if (periodicEnabled) {
+			const frequencyValidation = frequencyMinutesSchema.safeParse(frequencyMinutes);
+			if (!frequencyValidation.success) {
+				toast.error("Invalid frequency value");
+				return;
+			}
+		}
+
+		setIsStartingIndexing(true);
+		try {
+			const startDateStr = startDate ? format(startDate, "yyyy-MM-dd") : undefined;
+			const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
+
+			// Update connector with periodic sync settings and config changes
+			if (periodicEnabled || indexingConnectorConfig) {
+				const frequency = periodicEnabled ? parseInt(frequencyMinutes, 10) : undefined;
+				await updateConnector({
+					id: indexingConfig.connectorId,
+					data: {
+						...(periodicEnabled && {
+							periodic_indexing_enabled: true,
+							indexing_frequency_minutes: frequency,
+						}),
+						...(indexingConnectorConfig && {
+							config: indexingConnectorConfig,
+						}),
+					},
+				});
+			}
+
+			// Handle Google Drive folder selection
+			if (indexingConfig.connectorType === "GOOGLE_DRIVE_CONNECTOR" && indexingConnectorConfig) {
+				const selectedFolders = indexingConnectorConfig.selected_folders as Array<{ id: string; name: string }> | undefined;
+				if (selectedFolders && selectedFolders.length > 0) {
+					// Index with folder selection
+					const folderIds = selectedFolders.map((f) => f.id).join(",");
+					const folderNames = selectedFolders.map((f) => f.name).join(", ");
+					await indexConnector({
+						connector_id: indexingConfig.connectorId,
+						queryParams: {
+							search_space_id: searchSpaceId,
+							folder_ids: folderIds,
+							folder_names: folderNames,
+						},
+					});
+				} else {
+					// Google Drive requires folder selection - show error if none selected
+					toast.error("Please select at least one folder to index");
+					setIsStartingIndexing(false);
+					return;
+				}
+			} else {
+				await indexConnector({
+					connector_id: indexingConfig.connectorId,
+					queryParams: {
+						search_space_id: searchSpaceId,
+						start_date: startDateStr,
+						end_date: endDateStr,
+					},
+				});
+			}
+
+			toast.success(`${indexingConfig.connectorTitle} indexing started`, {
+				description: periodicEnabled 
+					? `Periodic sync enabled every ${getFrequencyLabel(frequencyMinutes)}.`
+					: "You can continue working while we sync your data.",
+			});
+
+			// Update URL - the effect will handle closing the modal and clearing state
+			const url = new URL(window.location.href);
+			url.searchParams.delete("modal");
+			url.searchParams.delete("tab");
+			url.searchParams.delete("success");
+			url.searchParams.delete("connector");
+			url.searchParams.delete("view");
+			router.replace(url.pathname + url.search, { scroll: false });
+			
+			refreshConnectors();
+			queryClient.invalidateQueries({
+				queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
+			});
+		} catch (error) {
+			console.error("Error starting indexing:", error);
+			toast.error("Failed to start indexing");
+		} finally {
+			setIsStartingIndexing(false);
+		}
+	}, [indexingConfig, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, getFrequencyLabel, router, indexingConnectorConfig]);
+
+	// Handle skipping indexing
+	const handleSkipIndexing = useCallback(() => {
+		// Update URL - the effect will handle closing the modal and clearing state
+		const url = new URL(window.location.href);
+		url.searchParams.delete("modal");
+		url.searchParams.delete("tab");
+		url.searchParams.delete("success");
+		url.searchParams.delete("connector");
+		url.searchParams.delete("view");
+		router.replace(url.pathname + url.search, { scroll: false });
+	}, [router]);
+
+	// Handle starting edit mode
+	const handleStartEdit = useCallback((connector: SearchSourceConnector) => {
+		if (!searchSpaceId) return;
+		
+		// Check if this is an OAuth connector
+		const isOAuthConnector = OAUTH_CONNECTORS.some(
+			(oauthConnector) => oauthConnector.connectorType === connector.connector_type
+		);
+		
+		// If not OAuth, redirect to old connector edit page
+		if (!isOAuthConnector) {
+			router.push(`/dashboard/${searchSpaceId}/connectors/${connector.id}/edit`);
+			return;
+		}
+		
+		// Validate connector data
+		const connectorValidation = searchSourceConnector.safeParse(connector);
+		if (!connectorValidation.success) {
+			toast.error("Invalid connector data");
+			return;
+		}
+		
+		setEditingConnector(connector);
+		// Load existing periodic sync settings
+		setPeriodicEnabled(connector.periodic_indexing_enabled);
+		setFrequencyMinutes(connector.indexing_frequency_minutes?.toString() || "1440");
+		// Reset dates - user can set new ones for re-indexing
+		setStartDate(undefined);
+		setEndDate(undefined);
+		
+		// Update URL
+		const url = new URL(window.location.href);
+		url.searchParams.set("modal", "connectors");
+		url.searchParams.set("view", "edit");
+		url.searchParams.set("connectorId", connector.id.toString());
+		window.history.pushState({ modal: true }, "", url.toString());
+	}, [searchSpaceId, router]);
+
+	// Handle saving connector changes
+	const handleSaveConnector = useCallback(async (refreshConnectors: () => void) => {
+		if (!editingConnector || !searchSpaceId) return;
+
+		// Validate date range (skip for Google Drive which uses folder selection)
+		if (editingConnector.connector_type !== "GOOGLE_DRIVE_CONNECTOR") {
+			const dateRangeValidation = dateRangeSchema.safeParse({ startDate, endDate });
+			if (!dateRangeValidation.success) {
+				toast.error(dateRangeValidation.error.issues[0]?.message || "Invalid date range");
+				return;
+			}
+		}
+
+		// Validate frequency minutes if periodic is enabled
+		if (periodicEnabled) {
+			const frequencyValidation = frequencyMinutesSchema.safeParse(frequencyMinutes);
+			if (!frequencyValidation.success) {
+				toast.error("Invalid frequency value");
+				return;
+			}
+		}
+
+		setIsSaving(true);
+		try {
+			const startDateStr = startDate ? format(startDate, "yyyy-MM-dd") : undefined;
+			const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
+
+			// Update connector with periodic sync settings and config changes
+			const frequency = periodicEnabled ? parseInt(frequencyMinutes, 10) : null;
+			await updateConnector({
+				id: editingConnector.id,
+				data: {
+					periodic_indexing_enabled: periodicEnabled,
+					indexing_frequency_minutes: frequency,
+					config: connectorConfig || editingConnector.config,
+				},
+			});
+
+			// Re-index based on connector type
+			let indexingDescription = "Settings saved.";
+			if (editingConnector.connector_type === "GOOGLE_DRIVE_CONNECTOR") {
+				// Google Drive uses folder selection from config, not date ranges
+				const selectedFolders = (connectorConfig || editingConnector.config)?.selected_folders as Array<{ id: string; name: string }> | undefined;
+				if (selectedFolders && selectedFolders.length > 0) {
+					const folderIds = selectedFolders.map((f) => f.id).join(",");
+					const folderNames = selectedFolders.map((f) => f.name).join(", ");
+					await indexConnector({
+						connector_id: editingConnector.id,
+						queryParams: {
+							search_space_id: searchSpaceId,
+							folder_ids: folderIds,
+							folder_names: folderNames,
+						},
+					});
+					indexingDescription = `Re-indexing started for ${selectedFolders.length} folder(s).`;
+				}
+			} else if (startDateStr || endDateStr) {
+				// Other connectors use date ranges
+				await indexConnector({
+					connector_id: editingConnector.id,
+					queryParams: {
+						search_space_id: searchSpaceId,
+						start_date: startDateStr,
+						end_date: endDateStr,
+					},
+				});
+				indexingDescription = "Re-indexing started with new date range.";
+			}
+
+			toast.success(`${editingConnector.name} updated successfully`, {
+				description: periodicEnabled 
+					? `Periodic sync ${frequency ? `enabled every ${getFrequencyLabel(frequencyMinutes)}` : "enabled"}. ${indexingDescription}`
+					: indexingDescription,
+			});
+
+			// Update URL - the effect will handle closing the modal and clearing state
+			const url = new URL(window.location.href);
+			url.searchParams.delete("modal");
+			url.searchParams.delete("tab");
+			url.searchParams.delete("view");
+			url.searchParams.delete("connectorId");
+			router.replace(url.pathname + url.search, { scroll: false });
+			
+			refreshConnectors();
+			queryClient.invalidateQueries({
+				queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
+			});
+		} catch (error) {
+			console.error("Error saving connector:", error);
+			toast.error("Failed to save connector changes");
+		} finally {
+			setIsSaving(false);
+		}
+	}, [editingConnector, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, getFrequencyLabel, router, connectorConfig]);
+
+	// Handle disconnecting connector
+	const handleDisconnectConnector = useCallback(async (refreshConnectors: () => void) => {
+		if (!editingConnector || !searchSpaceId) return;
+
+		setIsDisconnecting(true);
+		try {
+			await deleteConnector({
+				id: editingConnector.id,
+			});
+
+			toast.success(`${editingConnector.name} disconnected successfully`);
+
+			// Update URL - the effect will handle closing the modal and clearing state
+			const url = new URL(window.location.href);
+			url.searchParams.delete("modal");
+			url.searchParams.delete("tab");
+			url.searchParams.delete("view");
+			url.searchParams.delete("connectorId");
+			router.replace(url.pathname + url.search, { scroll: false });
+			
+			refreshConnectors();
+			queryClient.invalidateQueries({
+				queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
+			});
+		} catch (error) {
+			console.error("Error disconnecting connector:", error);
+			toast.error("Failed to disconnect connector");
+		} finally {
+			setIsDisconnecting(false);
+		}
+	}, [editingConnector, searchSpaceId, deleteConnector, router]);
+
+	// Handle going back from edit view
+	const handleBackFromEdit = useCallback(() => {
+		const url = new URL(window.location.href);
+		url.searchParams.set("modal", "connectors");
+		url.searchParams.set("tab", "all");
+		url.searchParams.delete("view");
+		url.searchParams.delete("connectorId");
+		router.replace(url.pathname + url.search, { scroll: false });
+	}, [router]);
+
+	// Handle dialog open/close
+	const handleOpenChange = useCallback(
+		(open: boolean) => {
+			setIsOpen(open);
+
+			if (open) {
+				const url = new URL(window.location.href);
+				url.searchParams.set("modal", "connectors");
+				url.searchParams.set("tab", activeTab);
+				window.history.pushState({ modal: true }, "", url.toString());
+			} else {
+				const url = new URL(window.location.href);
+				url.searchParams.delete("modal");
+				url.searchParams.delete("tab");
+				url.searchParams.delete("success");
+				url.searchParams.delete("connector");
+				url.searchParams.delete("view");
+				window.history.pushState({ modal: false }, "", url.toString());
+				setIsScrolled(false);
+				setSearchQuery("");
+				if (!isStartingIndexing && !isSaving && !isDisconnecting) {
+					setIndexingConfig(null);
+					setIndexingConnector(null);
+					setIndexingConnectorConfig(null);
+					setEditingConnector(null);
+					setConnectorConfig(null);
+					setStartDate(undefined);
+					setEndDate(undefined);
+					setPeriodicEnabled(false);
+					setFrequencyMinutes("1440");
+				}
+			}
+		},
+		[activeTab, isStartingIndexing, isDisconnecting, isSaving]
+	);
+
+	// Handle tab change
+	const handleTabChange = useCallback(
+		(value: string) => {
+			setActiveTab(value);
+			const url = new URL(window.location.href);
+			url.searchParams.set("tab", value);
+			window.history.replaceState({ modal: true }, "", url.toString());
+		},
+		[]
+	);
+
+	// Handle scroll
+	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+		setIsScrolled(e.currentTarget.scrollTop > 0);
+	}, []);
+
+		return {
+		// State
+		isOpen,
+		activeTab,
+		connectingId,
+		isScrolled,
+		searchQuery,
+		indexingConfig,
+		indexingConnector,
+		indexingConnectorConfig,
+		editingConnector,
+		startDate,
+		endDate,
+		isStartingIndexing,
+		isSaving,
+		isDisconnecting,
+		periodicEnabled,
+		frequencyMinutes,
+		searchSpaceId,
+		allConnectors,
+		
+		// Setters
+		setSearchQuery,
+		setStartDate,
+		setEndDate,
+		setPeriodicEnabled,
+		setFrequencyMinutes,
+		
+		// Handlers
+		handleOpenChange,
+		handleTabChange,
+		handleScroll,
+		handleConnectOAuth,
+		handleStartIndexing,
+		handleSkipIndexing,
+		handleStartEdit,
+		handleSaveConnector,
+		handleDisconnectConnector,
+		handleBackFromEdit,
+		connectorConfig,
+		setConnectorConfig,
+		setIndexingConnectorConfig,
+	};
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/index.ts b/surfsense_web/components/assistant-ui/connector-popup/index.ts
index 1aea4de95..1c5ebc471 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/index.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/index.ts
@@ -2,17 +2,18 @@
 export { ConnectorIndicator } from "../connector-popup";
 
 // Sub-components (if needed for external use)
-export { ConnectorCard } from "./connector-card";
-export { DateRangeSelector } from "./date-range-selector";
-export { PeriodicSyncConfig } from "./periodic-sync-config";
-export { IndexingConfigurationView } from "./indexing-configuration-view";
-export { ConnectorDialogHeader } from "./connector-dialog-header";
-export { AllConnectorsTab } from "./all-connectors-tab";
-export { ActiveConnectorsTab } from "./active-connectors-tab";
+export { ConnectorCard } from "./components/connector-card";
+export { DateRangeSelector } from "./components/date-range-selector";
+export { PeriodicSyncConfig } from "./components/periodic-sync-config";
+export { IndexingConfigurationView } from "./connector-configs/views/indexing-configuration-view";
+export { ConnectorEditView } from "./connector-configs/views/connector-edit-view";
+export { ConnectorDialogHeader } from "./components/connector-dialog-header";
+export { AllConnectorsTab } from "./tabs/all-connectors-tab";
+export { ActiveConnectorsTab } from "./tabs/active-connectors-tab";
 
 // Constants and types
-export { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./connector-constants";
-export type { IndexingConfigState } from "./connector-constants";
+export { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./constants/connector-constants";
+export type { IndexingConfigState } from "./constants/connector-constants";
 
 // Schemas and validation
 export {
@@ -24,14 +25,14 @@ export {
 	parseConnectorPopupQueryParams,
 	parseOAuthAuthResponse,
 	validateIndexingConfigState,
-} from "./connector-popup.schemas";
+} from "./constants/connector-popup.schemas";
 export type {
 	ConnectorPopupQueryParams,
 	OAuthAuthResponse,
 	FrequencyMinutes,
 	DateRange,
-} from "./connector-popup.schemas";
+} from "./constants/connector-popup.schemas";
 
 // Hooks
-export { useConnectorDialog } from "./use-connector-dialog";
+export { useConnectorDialog } from "./hooks/use-connector-dialog";
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
similarity index 97%
rename from surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx
rename to surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
index 43deba278..fd364c3d1 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/active-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
@@ -24,6 +24,7 @@ interface ActiveConnectorsTabProps {
 	logsSummary: LogSummary | undefined;
 	searchSpaceId: string;
 	onTabChange: (value: string) => void;
+	onManage?: (connector: SearchSourceConnector) => void;
 }
 
 export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
@@ -34,6 +35,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 	logsSummary,
 	searchSpaceId,
 	onTabChange,
+	onManage,
 }) => {
 	const router = useRouter();
 
@@ -119,11 +121,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 										variant="outline"
 										size="sm"
 										className="h-8 text-[11px] px-3 rounded-lg font-medium"
-										onClick={() =>
-											router.push(
-												`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
-											)
-										}
+										onClick={onManage ? () => onManage(connector) : undefined}
 										disabled={isIndexing}
 									>
 										{isIndexing ? "Syncing..." : "Manage"}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
similarity index 72%
rename from surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx
rename to surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 4dd056c90..b06c5f274 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -2,15 +2,18 @@
 
 import { useRouter } from "next/navigation";
 import { type FC } from "react";
-import { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./connector-constants";
-import { ConnectorCard } from "./connector-card";
+import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "../constants/connector-constants";
+import { ConnectorCard } from "../components/connector-card";
 
 interface AllConnectorsTabProps {
 	searchQuery: string;
 	searchSpaceId: string;
 	connectedTypes: Set<string>;
 	connectingId: string | null;
+	allConnectors: SearchSourceConnector[] | undefined;
 	onConnectOAuth: (connector: (typeof OAUTH_CONNECTORS)[0]) => void;
+	onManage?: (connector: SearchSourceConnector) => void;
 }
 
 export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
@@ -18,7 +21,9 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 	searchSpaceId,
 	connectedTypes,
 	connectingId,
+	allConnectors,
 	onConnectOAuth,
+	onManage,
 }) => {
 	const router = useRouter();
 
@@ -49,6 +54,10 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 						{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;
 
 							return (
 								<ConnectorCard
@@ -60,11 +69,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 									isConnected={isConnected}
 									isConnecting={isConnecting}
 									onConnect={() => onConnectOAuth(connector)}
-									onManage={() =>
-										router.push(
-											`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
-										)
-									}
+									onManage={actualConnector && onManage ? () => onManage(actualConnector) : undefined}
 								/>
 							);
 						})}
@@ -83,6 +88,10 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
 						{filteredOther.map((connector) => {
 							const isConnected = connectedTypes.has(connector.connectorType);
+							// Find the actual connector object if connected
+							const actualConnector = isConnected && allConnectors
+								? allConnectors.find((c: SearchSourceConnector) => c.connector_type === connector.connectorType)
+								: undefined;
 
 							return (
 								<ConnectorCard
@@ -97,11 +106,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 											`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
 										)
 									}
-									onManage={() =>
-										router.push(
-											`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
-										)
-									}
+									onManage={actualConnector && onManage ? () => onManage(actualConnector) : undefined}
 								/>
 							);
 						})}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts
deleted file mode 100644
index 32a475300..000000000
--- a/surfsense_web/components/assistant-ui/connector-popup/use-connector-dialog.ts
+++ /dev/null
@@ -1,361 +0,0 @@
-import { useAtomValue } from "jotai";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
-import { indexConnectorMutationAtom, updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
-import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
-import { authenticatedFetch } from "@/lib/auth-utils";
-import { queryClient } from "@/lib/query-client/client";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
-import { format } from "date-fns";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-import { searchSourceConnector } from "@/contracts/types/connector.types";
-import { OAUTH_CONNECTORS } from "./connector-constants";
-import type { IndexingConfigState } from "./connector-constants";
-import {
-	parseConnectorPopupQueryParams,
-	parseOAuthAuthResponse,
-	validateIndexingConfigState,
-	frequencyMinutesSchema,
-	dateRangeSchema,
-} from "./connector-popup.schemas";
-
-export const useConnectorDialog = () => {
-	const router = useRouter();
-	const searchParams = useSearchParams();
-	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
-	const { data: allConnectors, refetch: refetchAllConnectors } = useAtomValue(connectorsAtom);
-	const { mutateAsync: indexConnector } = useAtomValue(indexConnectorMutationAtom);
-	const { mutateAsync: updateConnector } = useAtomValue(updateConnectorMutationAtom);
-
-	const [isOpen, setIsOpen] = useState(false);
-	const [activeTab, setActiveTab] = useState("all");
-	const [connectingId, setConnectingId] = useState<string | null>(null);
-	const [isScrolled, setIsScrolled] = useState(false);
-	const [searchQuery, setSearchQuery] = useState("");
-	const [indexingConfig, setIndexingConfig] = useState<IndexingConfigState | null>(null);
-	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
-	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
-	const [isStartingIndexing, setIsStartingIndexing] = useState(false);
-	const [periodicEnabled, setPeriodicEnabled] = useState(false);
-	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
-
-	// Helper function to get frequency label
-	const getFrequencyLabel = useCallback((minutes: string): string => {
-		switch (minutes) {
-			case "15": return "15 minutes";
-			case "60": return "hour";
-			case "360": return "6 hours";
-			case "720": return "12 hours";
-			case "1440": return "day";
-			case "10080": return "week";
-			default: return `${minutes} minutes`;
-		}
-	}, []);
-
-	// Synchronize state with URL query params
-	useEffect(() => {
-		try {
-			const params = parseConnectorPopupQueryParams(searchParams);
-			
-			if (params.modal === "connectors") {
-				setIsOpen(true);
-				
-				if (params.tab === "active" || params.tab === "all") {
-					setActiveTab(params.tab);
-				}
-				
-				// Clear indexing config if view is not "configure" anymore
-				if (params.view !== "configure" && indexingConfig) {
-					setIndexingConfig(null);
-				}
-				
-				if (params.view === "configure" && params.connector && !indexingConfig) {
-					const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === params.connector);
-					if (oauthConnector && allConnectors) {
-						const existingConnector = allConnectors.find(
-							(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
-						);
-						if (existingConnector) {
-							// Validate connector data before setting state
-							const connectorValidation = searchSourceConnector.safeParse(existingConnector);
-							if (connectorValidation.success) {
-								const config = validateIndexingConfigState({
-									connectorType: oauthConnector.connectorType,
-									connectorId: existingConnector.id,
-									connectorTitle: oauthConnector.title,
-								});
-								setIndexingConfig(config);
-							}
-						}
-					}
-				}
-			} else {
-				setIsOpen(false);
-				// Clear indexing config when modal is closed
-				if (indexingConfig) {
-					setIndexingConfig(null);
-					setStartDate(undefined);
-					setEndDate(undefined);
-					setPeriodicEnabled(false);
-					setFrequencyMinutes("1440");
-					setIsScrolled(false);
-					setSearchQuery("");
-				}
-			}
-		} catch (error) {
-			// Invalid query params - log but don't crash
-			console.warn("Invalid connector popup query params:", error);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [searchParams, allConnectors]);
-
-	// Detect OAuth success and transition to config view
-	useEffect(() => {
-		try {
-			const params = parseConnectorPopupQueryParams(searchParams);
-			
-			if (params.success === "true" && params.connector && searchSpaceId && params.modal === "connectors") {
-				const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === params.connector);
-				if (oauthConnector) {
-					refetchAllConnectors().then((result) => {
-						if (!result.data) return;
-						
-						const newConnector = result.data.find(
-							(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
-						);
-						if (newConnector) {
-							// Validate connector data before setting state
-							const connectorValidation = searchSourceConnector.safeParse(newConnector);
-							if (connectorValidation.success) {
-								const config = validateIndexingConfigState({
-									connectorType: oauthConnector.connectorType,
-									connectorId: newConnector.id,
-									connectorTitle: oauthConnector.title,
-								});
-								setIndexingConfig(config);
-								setIsOpen(true);
-								const url = new URL(window.location.href);
-								url.searchParams.delete("success");
-								url.searchParams.set("view", "configure");
-								window.history.replaceState({}, "", url.toString());
-							} else {
-								console.warn("Invalid connector data after OAuth:", connectorValidation.error);
-								toast.error("Failed to validate connector data");
-							}
-						}
-					});
-				}
-			}
-		} catch (error) {
-			// Invalid query params - log but don't crash
-			console.warn("Invalid connector popup query params in OAuth success handler:", error);
-		}
-	}, [searchParams, searchSpaceId, refetchAllConnectors]);
-
-	// Handle OAuth connection
-	const handleConnectOAuth = useCallback(
-		async (connector: (typeof OAUTH_CONNECTORS)[0]) => {
-			if (!searchSpaceId || !connector.authEndpoint) return;
-
-			// Set connecting state immediately to disable button and show spinner
-			setConnectingId(connector.id);
-
-			try {
-				const response = await authenticatedFetch(
-					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}${connector.authEndpoint}?space_id=${searchSpaceId}`,
-					{ method: "GET" }
-				);
-
-				if (!response.ok) {
-					throw new Error(`Failed to initiate ${connector.title} OAuth`);
-				}
-
-				const data = await response.json();
-				
-				// Validate OAuth response with Zod
-				const validatedData = parseOAuthAuthResponse(data);
-				
-				// Don't clear connectingId here - let the redirect happen with button still disabled
-				// The component will unmount on redirect anyway
-				window.location.href = validatedData.auth_url;
-			} catch (error) {
-				console.error(`Error connecting to ${connector.title}:`, error);
-				if (error instanceof Error && error.message.includes("Invalid auth URL")) {
-					toast.error(`Invalid response from ${connector.title} OAuth endpoint`);
-				} else {
-					toast.error(`Failed to connect to ${connector.title}`);
-				}
-				// Only clear connectingId on error so user can retry
-				setConnectingId(null);
-			}
-		},
-		[searchSpaceId]
-	);
-
-	// Handle starting indexing
-	const handleStartIndexing = useCallback(async (refreshConnectors: () => void) => {
-		if (!indexingConfig || !searchSpaceId) return;
-
-		// Validate date range
-		const dateRangeValidation = dateRangeSchema.safeParse({ startDate, endDate });
-		if (!dateRangeValidation.success) {
-			toast.error(dateRangeValidation.error.errors[0]?.message || "Invalid date range");
-			return;
-		}
-
-		// Validate frequency minutes if periodic is enabled
-		if (periodicEnabled) {
-			const frequencyValidation = frequencyMinutesSchema.safeParse(frequencyMinutes);
-			if (!frequencyValidation.success) {
-				toast.error("Invalid frequency value");
-				return;
-			}
-		}
-
-		setIsStartingIndexing(true);
-		try {
-			const startDateStr = startDate ? format(startDate, "yyyy-MM-dd") : undefined;
-			const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
-
-			if (periodicEnabled) {
-				const frequency = parseInt(frequencyMinutes, 10);
-				await updateConnector({
-					id: indexingConfig.connectorId,
-					data: {
-						periodic_indexing_enabled: true,
-						indexing_frequency_minutes: frequency,
-					},
-				});
-			}
-
-			await indexConnector({
-				connector_id: indexingConfig.connectorId,
-				queryParams: {
-					search_space_id: searchSpaceId,
-					start_date: startDateStr,
-					end_date: endDateStr,
-				},
-			});
-
-			toast.success(`${indexingConfig.connectorTitle} indexing started`, {
-				description: periodicEnabled 
-					? `Periodic sync enabled every ${getFrequencyLabel(frequencyMinutes)}.`
-					: "You can continue working while we sync your data.",
-			});
-
-			// Update URL - the effect will handle closing the modal and clearing state
-			const url = new URL(window.location.href);
-			url.searchParams.delete("modal");
-			url.searchParams.delete("tab");
-			url.searchParams.delete("success");
-			url.searchParams.delete("connector");
-			url.searchParams.delete("view");
-			router.replace(url.pathname + url.search, { scroll: false });
-			
-			refreshConnectors();
-			queryClient.invalidateQueries({
-				queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
-			});
-		} catch (error) {
-			console.error("Error starting indexing:", error);
-			toast.error("Failed to start indexing");
-		} finally {
-			setIsStartingIndexing(false);
-		}
-	}, [indexingConfig, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, getFrequencyLabel, router]);
-
-	// Handle skipping indexing
-	const handleSkipIndexing = useCallback(() => {
-		// Update URL - the effect will handle closing the modal and clearing state
-		const url = new URL(window.location.href);
-		url.searchParams.delete("modal");
-		url.searchParams.delete("tab");
-		url.searchParams.delete("success");
-		url.searchParams.delete("connector");
-		url.searchParams.delete("view");
-		router.replace(url.pathname + url.search, { scroll: false });
-	}, [router]);
-
-	// Handle dialog open/close
-	const handleOpenChange = useCallback(
-		(open: boolean) => {
-			setIsOpen(open);
-
-			if (open) {
-				const url = new URL(window.location.href);
-				url.searchParams.set("modal", "connectors");
-				url.searchParams.set("tab", activeTab);
-				window.history.pushState({ modal: true }, "", url.toString());
-			} else {
-				const url = new URL(window.location.href);
-				url.searchParams.delete("modal");
-				url.searchParams.delete("tab");
-				url.searchParams.delete("success");
-				url.searchParams.delete("connector");
-				url.searchParams.delete("view");
-				window.history.pushState({ modal: false }, "", url.toString());
-				setIsScrolled(false);
-				setSearchQuery("");
-				if (!isStartingIndexing) {
-					setIndexingConfig(null);
-					setStartDate(undefined);
-					setEndDate(undefined);
-					setPeriodicEnabled(false);
-					setFrequencyMinutes("1440");
-				}
-			}
-		},
-		[activeTab, isStartingIndexing]
-	);
-
-	// Handle tab change
-	const handleTabChange = useCallback(
-		(value: string) => {
-			setActiveTab(value);
-			const url = new URL(window.location.href);
-			url.searchParams.set("tab", value);
-			window.history.replaceState({ modal: true }, "", url.toString());
-		},
-		[]
-	);
-
-	// Handle scroll
-	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-		setIsScrolled(e.currentTarget.scrollTop > 0);
-	}, []);
-
-	return {
-		// State
-		isOpen,
-		activeTab,
-		connectingId,
-		isScrolled,
-		searchQuery,
-		indexingConfig,
-		startDate,
-		endDate,
-		isStartingIndexing,
-		periodicEnabled,
-		frequencyMinutes,
-		searchSpaceId,
-		allConnectors,
-		
-		// Setters
-		setSearchQuery,
-		setStartDate,
-		setEndDate,
-		setPeriodicEnabled,
-		setFrequencyMinutes,
-		
-		// Handlers
-		handleOpenChange,
-		handleTabChange,
-		handleScroll,
-		handleConnectOAuth,
-		handleStartIndexing,
-		handleSkipIndexing,
-	};
-};
-
diff --git a/surfsense_web/components/connectors/google-drive-folder-tree.tsx b/surfsense_web/components/connectors/google-drive-folder-tree.tsx
index cec207b2a..eed18f173 100644
--- a/surfsense_web/components/connectors/google-drive-folder-tree.tsx
+++ b/surfsense_web/components/connectors/google-drive-folder-tree.tsx
@@ -14,7 +14,6 @@ import {
 	Presentation,
 } from "lucide-react";
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";
@@ -207,63 +206,74 @@ export function GoogleDriveFolderTree({
 		const childFolders = children?.filter((c) => c.isFolder) || [];
 		const childFiles = children?.filter((c) => !c.isFolder) || [];
 
+		const indentSize = 0.75; // Smaller indent for mobile
+		
 		return (
-			<div key={item.id} className="w-full" style={{ marginLeft: `${level * 1.25}rem` }}>
+			<div key={item.id} className="w-full sm:ml-[calc(var(--level)*1.25rem)]" style={{ marginLeft: `${level * indentSize}rem`, '--level': level } as React.CSSProperties & { '--level'?: number }}>
 				<div
 					className={cn(
-						"flex items-center gap-2 h-auto py-2 px-2 rounded-md",
+						"flex items-center gap-1 sm:gap-2 h-auto py-1 sm:py-2 px-1 sm:px-2 rounded-md",
 						isFolder && "hover:bg-accent cursor-pointer",
 						!isFolder && "cursor-default opacity-60",
 						isSelected && isFolder && "bg-accent/50"
 					)}
 				>
 					{isFolder ? (
-						<span
-							className="flex items-center justify-center w-4 h-4 shrink-0"
+						<button
+							type="button"
+							className="flex items-center justify-center w-3 h-3 sm:w-4 sm:h-4 shrink-0 bg-transparent border-0 p-0 cursor-pointer"
 							onClick={(e) => {
 								e.stopPropagation();
 								toggleFolder(item);
 							}}
+							aria-label={isExpanded ? `Collapse ${item.name}` : `Expand ${item.name}`}
 						>
 							{isLoading ? (
-								<Loader2 className="h-3 w-3 animate-spin" />
+								<Loader2 className="h-2.5 w-2.5 sm:h-3 sm:w-3 animate-spin" />
 							) : isExpanded ? (
-								<ChevronDown className="h-4 w-4" />
+								<ChevronDown className="h-3 w-3 sm:h-4 sm:w-4" />
 							) : (
-								<ChevronRight className="h-4 w-4" />
+								<ChevronRight className="h-3 w-3 sm:h-4 sm:w-4" />
 							)}
-						</span>
+						</button>
 					) : (
-						<span className="w-4 h-4 shrink-0" />
+						<span className="w-3 h-3 sm:w-4 sm:h-4 shrink-0" />
 					)}
 
 					{isFolder && (
 						<Checkbox
 							checked={isSelected}
 							onCheckedChange={() => toggleFolderSelection(item.id, item.name)}
-							className="shrink-0"
+							className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4"
 							onClick={(e) => e.stopPropagation()}
 						/>
 					)}
 
-					<div className="shrink-0" style={{ marginLeft: isFolder ? "0" : "1.25rem" }}>
+					<div className={cn("shrink-0", !isFolder && "ml-3 sm:ml-5")}>
 						{isFolder ? (
 							isExpanded ? (
-								<FolderOpen className="h-4 w-4 text-blue-500" />
+								<FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-blue-500" />
 							) : (
-								<Folder className="h-4 w-4 text-gray-500" />
+								<Folder className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
 							)
 						) : (
-							getFileIcon(item.mimeType, "h-4 w-4")
+							getFileIcon(item.mimeType, "h-3 w-3 sm:h-4 sm:w-4")
 						)}
 					</div>
 
-					<span
-						className="truncate flex-1 text-left text-sm min-w-0"
-						onClick={() => isFolder && toggleFolder(item)}
-					>
-						{item.name}
-					</span>
+					{isFolder ? (
+						<button
+							type="button"
+							className="truncate flex-1 text-left text-xs sm:text-sm min-w-0 bg-transparent border-0 p-0 cursor-pointer"
+							onClick={() => toggleFolder(item)}
+						>
+							{item.name}
+						</button>
+					) : (
+						<span className="truncate flex-1 text-left text-xs sm:text-sm min-w-0">
+							{item.name}
+						</span>
+					)}
 				</div>
 
 				{isExpanded && isFolder && children && (
@@ -272,7 +282,7 @@ export function GoogleDriveFolderTree({
 						{childFiles.map((child) => renderItem(child, level + 1))}
 
 						{children.length === 0 && (
-							<div className="text-xs text-muted-foreground py-2 pl-2">Empty folder</div>
+							<div className="text-[10px] sm:text-xs text-muted-foreground py-1 sm:py-2 pl-1 sm:pl-2">Empty folder</div>
 						)}
 					</div>
 				)}
@@ -282,25 +292,29 @@ export function GoogleDriveFolderTree({
 
 	return (
 		<div className="border rounded-md w-full overflow-hidden">
-			<ScrollArea className="h-[450px] w-full">
-				<div className="p-2 pr-4 w-full overflow-x-hidden">
-					<div className="mb-2 pb-2 border-b">
-						<div className="flex items-center gap-2 h-auto py-2 px-2 rounded-md hover:bg-accent cursor-pointer">
+			<ScrollArea className="h-[300px] sm:h-[450px] w-full">
+				<div className="p-1 sm:p-2 pr-2 sm:pr-4 w-full overflow-x-hidden">
+					<div className="mb-1 sm:mb-2 pb-1 sm:pb-2 border-b">
+						<div className="flex items-center gap-1 sm:gap-2 h-auto py-1 sm:py-2 px-1 sm:px-2 rounded-md hover:bg-accent cursor-pointer">
 							<Checkbox
 								checked={isFolderSelected("root")}
 								onCheckedChange={() => toggleFolderSelection("root", "My Drive")}
-								className="shrink-0"
+								className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4"
 							/>
-							<HardDrive className="h-4 w-4 text-primary shrink-0" />
-							<span className="font-semibold truncate" onClick={() => toggleFolderSelection("root", "My Drive")}>
+							<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-primary shrink-0" />
+							<button
+								type="button"
+								className="font-semibold truncate text-xs sm:text-sm cursor-pointer bg-transparent border-0 p-0 text-left"
+								onClick={() => toggleFolderSelection("root", "My Drive")}
+							>
 								My Drive
-							</span>
+							</button>
 						</div>
 					</div>
 
 					{isLoadingRoot && (
-						<div className="flex items-center justify-center py-8">
-							<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+						<div className="flex items-center justify-center py-4 sm:py-8">
+							<Loader2 className="h-4 w-4 sm:h-6 sm:w-6 animate-spin text-muted-foreground" />
 						</div>
 					)}
 
@@ -309,7 +323,7 @@ export function GoogleDriveFolderTree({
 					</div>
 
 					{!isLoadingRoot && rootItems.length === 0 && (
-						<div className="text-center text-sm text-muted-foreground py-8">
+						<div className="text-center text-xs sm:text-sm text-muted-foreground py-4 sm:py-8">
 							No files or folders found in your Google Drive
 						</div>
 					)}
diff --git a/surfsense_web/components/ui/switch.tsx b/surfsense_web/components/ui/switch.tsx
index b64b32b73..de2c35fc0 100644
--- a/surfsense_web/components/ui/switch.tsx
+++ b/surfsense_web/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SwitchPrimitives.Root
 		className={cn(
-			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/20",
 			className
 		)}
 		{...props}
@@ -19,7 +19,7 @@ const Switch = React.forwardRef<
 	>
 		<SwitchPrimitives.Thumb
 			className={cn(
-				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+				"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=checked]:bg-background data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground/40"
 			)}
 		/>
 	</SwitchPrimitives.Root>

From 5d1859db1748b80a7beb0320b8d6eb83e9dc16c9 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 11:41:57 +0530
Subject: [PATCH 10/28] feat: Add Webcrawler and YouTube connector
 configurations, enhance connector dialog with creation functionality, and
 improve UI responsiveness and styling across components.

---
 .../assistant-ui/connector-popup.tsx          |   4 +
 .../components/date-range-selector.tsx        |  20 +--
 .../components/periodic-sync-config.tsx       |  22 +--
 .../components/google-drive-config.tsx        |   4 +-
 .../components/webcrawler-config.tsx          | 127 ++++++++++++++
 .../components/youtube-config.tsx             | 148 ++++++++++++++++
 .../connector-configs/index.tsx               |   6 +
 .../views/connector-edit-view.tsx             |  27 +--
 .../views/indexing-configuration-view.tsx     |  24 +--
 .../constants/connector-constants.ts          |   6 +
 .../hooks/use-connector-dialog.ts             | 166 ++++++++++++++++--
 .../tabs/all-connectors-tab.tsx               |  21 ++-
 surfsense_web/contracts/enums/connector.ts    |   1 +
 .../contracts/enums/connectorIcons.tsx        |   2 +
 .../contracts/types/connector.types.ts        |   1 +
 15 files changed, 512 insertions(+), 67 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/webcrawler-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/youtube-config.tsx

diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index c1ed38e7b..55a11f420 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -88,6 +88,8 @@ export const ConnectorIndicator: FC = () => {
 		handleTabChange,
 		handleScroll,
 		handleConnectOAuth,
+		handleCreateWebcrawler,
+		handleCreateYouTube,
 		handleStartIndexing,
 		handleSkipIndexing,
 		handleStartEdit,
@@ -212,6 +214,8 @@ export const ConnectorIndicator: FC = () => {
 											connectingId={connectingId}
 											allConnectors={allConnectors}
 											onConnectOAuth={handleConnectOAuth}
+											onCreateWebcrawler={handleCreateWebcrawler}
+											onCreateYouTube={handleCreateYouTube}
 											onManage={handleStartEdit}
 										/>
 									</TabsContent>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx
index 1112f3f36..5c7870639 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx
@@ -40,23 +40,23 @@ export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
 	};
 
 	return (
-		<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
-			<h3 className="font-medium mb-4">Select Date Range</h3>
-			<p className="text-sm text-muted-foreground mb-6">
+		<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+			<h3 className="font-medium text-xs sm:text-base mb-4">Select Date Range</h3>
+			<p className="text-xs sm:text-sm text-muted-foreground mb-6">
 				Choose how far back you want to sync your data. You can always re-index later with different dates.
 			</p>
 
 			<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
 				{/* Start Date */}
 				<div className="space-y-2">
-					<Label htmlFor="start-date">Start Date</Label>
+					<Label htmlFor="start-date" className="text-xs sm:text-sm">Start Date</Label>
 					<Popover>
 						<PopoverTrigger asChild>
 							<Button
 								id="start-date"
 								variant="outline"
 								className={cn(
-									"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
+									"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm",
 									!startDate && "text-muted-foreground"
 								)}
 							>
@@ -77,14 +77,14 @@ export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
 
 				{/* End Date */}
 				<div className="space-y-2">
-					<Label htmlFor="end-date">End Date</Label>
+					<Label htmlFor="end-date" className="text-xs sm:text-sm">End Date</Label>
 					<Popover>
 						<PopoverTrigger asChild>
 							<Button
 								id="end-date"
 								variant="outline"
 								className={cn(
-									"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20",
+									"w-full justify-start text-left font-normal bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm",
 									!endDate && "text-muted-foreground"
 								)}
 							>
@@ -111,7 +111,7 @@ export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
 					variant="outline"
 					size="sm"
 					onClick={handleClearDates}
-					className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
+					className="text-xs sm:text-sm bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
 				>
 					Clear Dates
 				</Button>
@@ -120,7 +120,7 @@ export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
 					variant="outline"
 					size="sm"
 					onClick={handleLast30Days}
-					className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
+					className="text-xs sm:text-sm bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
 				>
 					Last 30 Days
 				</Button>
@@ -129,7 +129,7 @@ export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
 					variant="outline"
 					size="sm"
 					onClick={handleLastYear}
-					className="text-xs bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
+					className="text-xs sm:text-sm bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-slate-400/10"
 				>
 					Last Year
 				</Button>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/periodic-sync-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/periodic-sync-config.tsx
index 427a6ac86..f8b869a67 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/periodic-sync-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/periodic-sync-config.tsx
@@ -25,11 +25,11 @@ export const PeriodicSyncConfig: FC<PeriodicSyncConfigProps> = ({
 	onFrequencyChange,
 }) => {
 	return (
-		<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-6">
+		<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
 			<div className="flex items-center justify-between">
 				<div className="space-y-1">
-					<h3 className="font-medium">Enable Periodic Sync</h3>
-					<p className="text-sm text-muted-foreground">
+					<h3 className="font-medium text-xs sm:text-base">Enable Periodic Sync</h3>
+					<p className="text-xs sm:text-sm text-muted-foreground">
 						Automatically re-index at regular intervals
 					</p>
 				</div>
@@ -39,21 +39,21 @@ export const PeriodicSyncConfig: FC<PeriodicSyncConfigProps> = ({
 			{enabled && (
 				<div className="mt-4 pt-4 border-t border-border/100 space-y-3">
 					<div className="space-y-2">
-						<Label htmlFor="frequency">Sync Frequency</Label>
+						<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
 						<Select value={frequencyMinutes} onValueChange={onFrequencyChange}>
 							<SelectTrigger
 								id="frequency"
-								className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20"
+								className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
 							>
 								<SelectValue placeholder="Select frequency" />
 							</SelectTrigger>
 							<SelectContent className="z-[100]">
-								<SelectItem value="15">Every 15 minutes</SelectItem>
-								<SelectItem value="60">Every hour</SelectItem>
-								<SelectItem value="360">Every 6 hours</SelectItem>
-								<SelectItem value="720">Every 12 hours</SelectItem>
-								<SelectItem value="1440">Daily</SelectItem>
-								<SelectItem value="10080">Weekly</SelectItem>
+								<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+								<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+								<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+								<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+								<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+								<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
 							</SelectContent>
 						</Select>
 					</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
index 280d6ed23..a30450dad 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/google-drive-config.tsx
@@ -91,9 +91,9 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({
 				</Button>
 			)}
 
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center gap-2 [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
 				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
-				<AlertDescription className="text-[10px] sm:text-xs">
+				<AlertDescription className="text-[10px] sm:text-xs !pl-0">
 					Folder selection is used when indexing. You can change this selection when you start indexing.
 				</AlertDescription>
 			</Alert>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/webcrawler-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/webcrawler-config.tsx
new file mode 100644
index 000000000..4bb75c58d
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/webcrawler-config.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { Info } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Alert, AlertDescription } 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 type { ConnectorConfigProps } from "../index";
+
+export const WebcrawlerConfig: FC<ConnectorConfigProps> = ({
+	connector,
+	onConfigChange,
+}) => {
+	// Initialize with existing config values
+	const existingApiKey = (connector.config?.FIRECRAWL_API_KEY as string | undefined) || "";
+	const existingUrls = (connector.config?.INITIAL_URLS as string | undefined) || "";
+	
+	const [apiKey, setApiKey] = useState(existingApiKey);
+	const [initialUrls, setInitialUrls] = useState(existingUrls);
+	const [showApiKey, setShowApiKey] = useState(false);
+
+	// Update state when connector config changes
+	useEffect(() => {
+		const apiKeyValue = (connector.config?.FIRECRAWL_API_KEY as string | undefined) || "";
+		const urlsValue = (connector.config?.INITIAL_URLS as string | undefined) || "";
+		setApiKey(apiKeyValue);
+		setInitialUrls(urlsValue);
+	}, [connector.config]);
+
+	const handleApiKeyChange = (value: string) => {
+		setApiKey(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				FIRECRAWL_API_KEY: value.trim() || undefined,
+			});
+		}
+	};
+
+	const handleUrlsChange = (value: string) => {
+		setInitialUrls(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				INITIAL_URLS: value.trim() || undefined,
+			});
+		}
+	};
+
+	return (
+		<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-4 sm:space-y-6">
+			<div className="space-y-1 sm:space-y-2">
+				<h3 className="font-medium text-sm sm:text-base">Web Crawler Configuration</h3>
+				<p className="text-xs sm:text-sm text-muted-foreground">
+					Configure your web crawler settings. You can add a Firecrawl API key for enhanced crawling or use the free fallback option.
+				</p>
+			</div>
+
+			{/* API Key Field */}
+			<div className="space-y-2">
+				<Label htmlFor="api-key" className="text-xs sm:text-sm">
+					Firecrawl API Key (Optional)
+				</Label>
+				<div className="relative">
+					<Input
+						id="api-key"
+						type={showApiKey ? "text" : "password"}
+						placeholder="fc-xxxxxxxxxxxxx"
+						value={apiKey}
+						onChange={(e) => handleApiKeyChange(e.target.value)}
+						className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 text-xs sm:text-sm pr-10"
+					/>
+					<Button
+						type="button"
+						variant="ghost"
+						size="sm"
+						onClick={() => setShowApiKey(!showApiKey)}
+						className="absolute right-1 top-1/2 -translate-y-1/2 h-7 px-2 text-xs text-muted-foreground hover:text-foreground"
+					>
+						{showApiKey ? "Hide" : "Show"}
+					</Button>
+				</div>
+				<p className="text-[10px] sm:text-xs text-muted-foreground">
+					Get your API key from{" "}
+					<a
+						href="https://firecrawl.dev"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="text-primary hover:underline"
+					>
+						firecrawl.dev
+					</a>
+					. If not provided, will use AsyncChromiumLoader as fallback.
+				</p>
+			</div>
+
+			{/* Initial URLs Field */}
+			<div className="space-y-2">
+				<Label htmlFor="initial-urls" className="text-xs sm:text-sm">
+					Initial URLs (Optional)
+				</Label>
+				<Textarea
+					id="initial-urls"
+					placeholder="https://example.com&#10;https://docs.example.com&#10;https://blog.example.com"
+					value={initialUrls}
+					onChange={(e) => handleUrlsChange(e.target.value)}
+					className="min-h-[100px] font-mono text-xs sm:text-sm bg-slate-400/5 dark:bg-white/5 border-slate-400/20 resize-none"
+				/>
+				<p className="text-[10px] sm:text-xs text-muted-foreground">
+					Enter URLs to crawl (one per line). You can add more URLs later.
+				</p>
+			</div>
+
+			{/* Info Alert */}
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center gap-2 [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
+				<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+					Configuration is saved when you start indexing. You can update these settings anytime from the connector management page.
+				</AlertDescription>
+			</Alert>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/youtube-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/youtube-config.tsx
new file mode 100644
index 000000000..5fe7f0c48
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/youtube-config.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { IconBrandYoutube } from "@tabler/icons-react";
+import { Info } from "lucide-react";
+import { TagInput, type Tag as TagType } from "emblor";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+import type { ConnectorConfigProps } from "../index";
+
+const youtubeRegex =
+	/^(https:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})$/;
+
+export const YouTubeConfig: FC<ConnectorConfigProps> = ({
+	connector,
+	onConfigChange,
+}) => {
+	// Initialize with existing YouTube URLs from connector config
+	const existingUrls = (connector.config?.youtube_urls as string[] | undefined) || [];
+	const [youtubeTags, setYoutubeTags] = useState<TagType[]>(
+		existingUrls.map((url) => ({
+			id: url,
+			text: url,
+		}))
+	);
+	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
+
+	// Update YouTube tags when connector config changes
+	useEffect(() => {
+		const urls = (connector.config?.youtube_urls as string[] | undefined) || [];
+		setYoutubeTags(
+			urls.map((url) => ({
+				id: url,
+				text: url,
+			}))
+		);
+	}, [connector.config]);
+
+	const isValidYoutubeUrl = (url: string): boolean => {
+		return youtubeRegex.test(url);
+	};
+
+	const handleTagsChange = (tags: TagType[]) => {
+		setYoutubeTags(tags);
+		if (onConfigChange) {
+			// Extract URLs from tags and validate
+			const urls = tags.map((tag) => tag.text).filter(isValidYoutubeUrl);
+			onConfigChange({
+				...connector.config,
+				youtube_urls: urls,
+			});
+		}
+	};
+
+	const handleAddTag = (text: string) => {
+		if (!isValidYoutubeUrl(text)) {
+			toast("Invalid YouTube URL", {
+				description: "Please enter a valid YouTube video URL (youtube.com/watch?v= or youtu.be/)",
+			});
+			return;
+		}
+
+		if (youtubeTags.some((tag) => tag.text === text)) {
+			toast("Duplicate URL", {
+				description: "This YouTube video has already been added",
+			});
+			return;
+		}
+
+		const newTag: TagType = {
+			id: Date.now().toString(),
+			text: text,
+		};
+
+		handleTagsChange([...youtubeTags, newTag]);
+	};
+
+	return (
+		<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">
+			<div className="space-y-1 sm:space-y-2">
+				<h3 className="font-medium text-sm sm:text-base flex items-center gap-2">
+					<IconBrandYoutube className="h-4 w-4" />
+					YouTube Video URLs
+				</h3>
+				<p className="text-xs sm:text-sm text-muted-foreground">
+					Add YouTube video URLs to index. Enter a URL and press Enter to add multiple videos.
+				</p>
+			</div>
+
+			<div className="space-y-2">
+				<Label htmlFor="youtube-urls" className="text-xs sm:text-sm">
+					Enter YouTube Video URLs
+				</Label>
+				<TagInput
+					id="youtube-urls"
+					tags={youtubeTags}
+					setTags={handleTagsChange}
+					placeholder="Enter a YouTube URL and press Enter"
+					onAddTag={handleAddTag}
+					styleClasses={{
+						inlineTagsContainer:
+							"border-input rounded-lg bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 p-1 gap-1",
+						input: "w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7 text-xs sm:text-sm",
+						tag: {
+							body: "h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7 flex",
+							closeButton:
+								"absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-muted-foreground/80 hover:text-foreground",
+						},
+					}}
+					activeTagIndex={activeTagIndex}
+					setActiveTagIndex={setActiveTagIndex}
+				/>
+				<p className="text-[10px] sm:text-xs text-muted-foreground">
+					Add multiple YouTube URLs by pressing Enter after each one
+				</p>
+			</div>
+
+			{youtubeTags.length > 0 && (
+				<div className="p-2 sm:p-3 bg-muted rounded-lg text-xs sm:text-sm space-y-1 sm:space-y-2">
+					<p className="font-medium">
+						{youtubeTags.length} video{youtubeTags.length > 1 ? "s" : ""} added
+					</p>
+				</div>
+			)}
+
+			<div className="bg-muted/50 rounded-lg p-3 sm:p-4 text-xs sm:text-sm">
+				<h4 className="font-medium mb-2">Tips for adding YouTube videos:</h4>
+				<ul className="list-disc pl-5 space-y-1 text-muted-foreground">
+					<li>Use standard YouTube URLs (youtube.com/watch?v= or youtu.be/)</li>
+					<li>Make sure videos are publicly accessible</li>
+					<li>Supported formats: youtube.com/watch?v=VIDEO_ID or youtu.be/VIDEO_ID</li>
+					<li>Processing may take some time depending on video length</li>
+				</ul>
+			</div>
+
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center gap-2 [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
+				<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+					YouTube URLs are used when indexing. You can change this selection when you start indexing.
+				</AlertDescription>
+			</Alert>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
index eb2594ad6..4b6f56523 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -3,6 +3,8 @@
 import type { FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { GoogleDriveConfig } from "./components/google-drive-config";
+import { WebcrawlerConfig } from "./components/webcrawler-config";
+import { YouTubeConfig } from "./components/youtube-config";
 
 export interface ConnectorConfigProps {
 	connector: SearchSourceConnector;
@@ -20,6 +22,10 @@ export function getConnectorConfigComponent(
 	switch (connectorType) {
 		case "GOOGLE_DRIVE_CONNECTOR":
 			return GoogleDriveConfig;
+		case "WEBCRAWLER_CONNECTOR":
+			return WebcrawlerConfig;
+		case "YOUTUBE_CONNECTOR":
+			return YouTubeConfig;
 		// OAuth connectors (Gmail, Calendar, Airtable) and others don't need special config UI
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
index cc4f3a815..9412b9633 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowLeft, Loader2, Trash2 } from "lucide-react";
+import { ArrowLeft, Info, Loader2, Trash2 } from "lucide-react";
 import { type FC, useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
@@ -111,7 +111,7 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 				<button
 					type="button"
 					onClick={onBack}
-					className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
+					className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
 				>
 					<ArrowLeft className="size-4" />
 					Back to connectors
@@ -123,10 +123,10 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 						{getConnectorIcon(connector.connector_type, "size-7")}
 					</div>
 					<div className="flex-1">
-						<h2 className="text-2xl font-semibold tracking-tight">
+						<h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
 							{connector.name}
 						</h2>
-						<p className="text-muted-foreground mt-1">
+						<p className="text-xs sm:text-base text-muted-foreground mt-1">
 							Manage your connector settings and sync configuration
 						</p>
 					</div>
@@ -149,8 +149,8 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 							/>
 						)}
 
-						{/* Date range selector - not shown for Google Drive (uses folder selection instead) */}
-						{connector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && (
+						{/* Date range selector - not shown for Google Drive (uses folder selection), Webcrawler (uses config), or YouTube (uses URL selection) */}
+						{connector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && connector.connector_type !== "WEBCRAWLER_CONNECTOR" && connector.connector_type !== "YOUTUBE_CONNECTOR" && (
 							<DateRangeSelector
 								startDate={startDate}
 								endDate={endDate}
@@ -169,11 +169,11 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 						{/* Info box */}
 						<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
 							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
-								{getConnectorIcon(connector.connector_type, "size-4")}
+								<Info className="size-4" />
 							</div>
-							<div className="text-sm">
-								<p className="font-medium">Re-indexing runs in the background</p>
-								<p className="text-muted-foreground mt-1">
+							<div className="text-xs sm:text-sm">
+								<p className="font-medium text-xs sm:text-sm">Re-indexing runs in the background</p>
+								<p className="text-muted-foreground mt-1 text-[10px] sm:text-sm">
 									You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
 								</p>
 							</div>
@@ -194,12 +194,13 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 			<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 bg-muted border-t border-border">
 				{showDisconnectConfirm ? (
 					<div className="flex items-center gap-3">
-						<span className="text-sm text-muted-foreground">Are you sure?</span>
+						<span className="text-xs sm:text-sm text-muted-foreground">Are you sure?</span>
 						<Button
 							variant="destructive"
 							size="sm"
 							onClick={handleDisconnectConfirm}
 							disabled={isDisconnecting}
+							className="text-xs sm:text-sm"
 						>
 							{isDisconnecting ? (
 								<>
@@ -215,6 +216,7 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 							size="sm"
 							onClick={handleDisconnectCancel}
 							disabled={isDisconnecting}
+							className="text-xs sm:text-sm"
 						>
 							Cancel
 						</Button>
@@ -225,12 +227,13 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 						size="sm"
 						onClick={handleDisconnectClick}
 						disabled={isSaving || isDisconnecting}
+						className="text-xs sm:text-sm"
 					>
 						<Trash2 className="mr-2 h-4 w-4" />
 						Disconnect
 					</Button>
 				)}
-				<Button onClick={onSave} disabled={isSaving || isDisconnecting}>
+				<Button onClick={onSave} disabled={isSaving || isDisconnecting} className="text-xs sm:text-sm">
 					{isSaving ? (
 						<>
 							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
index 2c11eb415..3b17d9bee 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ArrowLeft, Check, Loader2 } from "lucide-react";
+import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
 import { type FC, useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
@@ -96,7 +96,7 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 				<button
 					type="button"
 					onClick={onSkip}
-					className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
+					className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
 				>
 					<ArrowLeft className="size-4" />
 					Back to connectors
@@ -108,10 +108,10 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 						<Check className="size-7 text-green-500" />
 					</div>
 					<div>
-						<h2 className="text-2xl font-semibold tracking-tight">
+						<h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
 							{config.connectorTitle} Connected!
 						</h2>
-						<p className="text-muted-foreground mt-1">
+						<p className="text-xs sm:text-base text-muted-foreground mt-1">
 							Configure when to start syncing your data
 						</p>
 					</div>
@@ -134,8 +134,8 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 							/>
 						)}
 
-						{/* Date range selector - not shown for Google Drive (uses folder selection instead) */}
-						{config.connectorType !== "GOOGLE_DRIVE_CONNECTOR" && (
+						{/* Date range selector - not shown for Google Drive (uses folder selection), Webcrawler (uses config), or YouTube (uses URL selection) */}
+						{config.connectorType !== "GOOGLE_DRIVE_CONNECTOR" && config.connectorType !== "WEBCRAWLER_CONNECTOR" && config.connectorType !== "YOUTUBE_CONNECTOR" && (
 							<DateRangeSelector
 								startDate={startDate}
 								endDate={endDate}
@@ -154,11 +154,11 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 						{/* Info box */}
 						<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
 							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
-								{getConnectorIcon(config.connectorType, "size-4")}
+								<Info className="size-4" />
 							</div>
-							<div className="text-sm">
-								<p className="font-medium">Indexing runs in the background</p>
-								<p className="text-muted-foreground mt-1">
+							<div className="text-xs sm:text-sm">
+								<p className="font-medium text-xs sm:text-sm">Indexing runs in the background</p>
+								<p className="text-muted-foreground mt-1 text-[10px] sm:text-sm">
 									You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
 								</p>
 							</div>
@@ -177,10 +177,10 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 
 			{/* Fixed Footer - Action buttons */}
 			<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 bg-muted">
-				<Button variant="ghost" onClick={onSkip} disabled={isStartingIndexing}>
+				<Button variant="ghost" onClick={onSkip} disabled={isStartingIndexing} className="text-xs sm:text-sm">
 					Skip for now
 				</Button>
-				<Button onClick={onStartIndexing} disabled={isStartingIndexing}>
+				<Button onClick={onStartIndexing} disabled={isStartingIndexing} className="text-xs sm:text-sm">
 					{isStartingIndexing ? (
 						<>
 							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
diff --git a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
index 189b5cc5c..c233b9f29 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
@@ -106,6 +106,12 @@ export const OTHER_CONNECTORS = [
 		description: "Crawl web content",
 		connectorType: EnumConnectorName.WEBCRAWLER_CONNECTOR,
 	},
+	{
+		id: "youtube-connector",
+		title: "YouTube",
+		description: "Index YouTube videos",
+		connectorType: EnumConnectorName.YOUTUBE_CONNECTOR,
+	},
 	{
 		id: "tavily-api",
 		title: "Tavily AI",
diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
index 1dfeadcd2..633afd75b 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@@ -2,16 +2,17 @@ import { useAtomValue } from "jotai";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
-import { deleteConnectorMutationAtom, indexConnectorMutationAtom, updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
+import { createConnectorMutationAtom, deleteConnectorMutationAtom, indexConnectorMutationAtom, updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
 import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { authenticatedFetch } from "@/lib/auth-utils";
 import { queryClient } from "@/lib/query-client/client";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { format } from "date-fns";
+import { EnumConnectorName } from "@/contracts/enums/connector";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { searchSourceConnector } from "@/contracts/types/connector.types";
-import { OAUTH_CONNECTORS } from "../constants/connector-constants";
+import { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "../constants/connector-constants";
 import type { IndexingConfigState } from "../constants/connector-constants";
 import {
 	parseConnectorPopupQueryParams,
@@ -29,6 +30,7 @@ export const useConnectorDialog = () => {
 	const { mutateAsync: indexConnector } = useAtomValue(indexConnectorMutationAtom);
 	const { mutateAsync: updateConnector } = useAtomValue(updateConnectorMutationAtom);
 	const { mutateAsync: deleteConnector } = useAtomValue(deleteConnectorMutationAtom);
+	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
 
 	const [isOpen, setIsOpen] = useState(false);
 	const [activeTab, setActiveTab] = useState("all");
@@ -246,19 +248,131 @@ export const useConnectorDialog = () => {
 		[searchSpaceId]
 	);
 
+	// Handle creating webcrawler connector
+	const handleCreateWebcrawler = useCallback(async () => {
+		if (!searchSpaceId) return;
+
+		setConnectingId("webcrawler-connector");
+		try {
+			const newConnector = await createConnector({
+				data: {
+					name: "Web Pages",
+					connector_type: EnumConnectorName.WEBCRAWLER_CONNECTOR,
+					config: {},
+					is_indexable: true,
+					last_indexed_at: null,
+					periodic_indexing_enabled: false,
+					indexing_frequency_minutes: null,
+					next_scheduled_at: null,
+				},
+				queryParams: {
+					search_space_id: searchSpaceId,
+				},
+			});
+
+			// Refetch connectors to get the new one
+			const result = await refetchAllConnectors();
+			if (result.data) {
+				const connector = result.data.find(
+					(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.WEBCRAWLER_CONNECTOR
+				);
+				if (connector) {
+					const connectorValidation = searchSourceConnector.safeParse(connector);
+					if (connectorValidation.success) {
+						const config = validateIndexingConfigState({
+							connectorType: EnumConnectorName.WEBCRAWLER_CONNECTOR,
+							connectorId: connector.id,
+							connectorTitle: "Web Pages",
+						});
+						setIndexingConfig(config);
+						setIndexingConnector(connector);
+						setIndexingConnectorConfig(connector.config || {});
+						setIsOpen(true);
+						const url = new URL(window.location.href);
+						url.searchParams.set("modal", "connectors");
+						url.searchParams.set("view", "configure");
+						window.history.pushState({ modal: true }, "", url.toString());
+					}
+				}
+			}
+		} catch (error) {
+			console.error("Error creating webcrawler connector:", error);
+			toast.error("Failed to create web crawler connector");
+		} finally {
+			setConnectingId(null);
+		}
+	}, [searchSpaceId, createConnector, refetchAllConnectors]);
+
+	// Handle creating YouTube connector
+	const handleCreateYouTube = useCallback(async () => {
+		if (!searchSpaceId) return;
+
+		setConnectingId("youtube-connector");
+		try {
+			const newConnector = await createConnector({
+				data: {
+					name: "YouTube",
+					connector_type: EnumConnectorName.YOUTUBE_CONNECTOR,
+					config: { youtube_urls: [] },
+					is_indexable: true,
+					last_indexed_at: null,
+					periodic_indexing_enabled: false,
+					indexing_frequency_minutes: null,
+					next_scheduled_at: null,
+				},
+				queryParams: {
+					search_space_id: searchSpaceId,
+				},
+			});
+
+			// Refetch connectors to get the new one
+			const result = await refetchAllConnectors();
+			if (result.data) {
+				const connector = result.data.find(
+					(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.YOUTUBE_CONNECTOR
+				);
+				if (connector) {
+					const connectorValidation = searchSourceConnector.safeParse(connector);
+					if (connectorValidation.success) {
+						const config = validateIndexingConfigState({
+							connectorType: EnumConnectorName.YOUTUBE_CONNECTOR,
+							connectorId: connector.id,
+							connectorTitle: "YouTube",
+						});
+						setIndexingConfig(config);
+						setIndexingConnector(connector);
+						setIndexingConnectorConfig(connector.config || { youtube_urls: [] });
+						setIsOpen(true);
+						const url = new URL(window.location.href);
+						url.searchParams.set("modal", "connectors");
+						url.searchParams.set("view", "configure");
+						window.history.pushState({ modal: true }, "", url.toString());
+					}
+				}
+			}
+		} catch (error) {
+			console.error("Error creating YouTube connector:", error);
+			toast.error("Failed to create YouTube connector");
+		} finally {
+			setConnectingId(null);
+		}
+	}, [searchSpaceId, createConnector, refetchAllConnectors]);
+
 	// Handle starting indexing
 	const handleStartIndexing = useCallback(async (refreshConnectors: () => void) => {
 		if (!indexingConfig || !searchSpaceId) return;
 
-		// Validate date range
-		const dateRangeValidation = dateRangeSchema.safeParse({ startDate, endDate });
-		if (!dateRangeValidation.success) {
-			const firstIssueMsg =
-				dateRangeValidation.error.issues && dateRangeValidation.error.issues.length > 0
-					? dateRangeValidation.error.issues[0].message
-					: "Invalid date range";
-			toast.error(firstIssueMsg);
-			return;
+		// Validate date range (skip for Google Drive and Webcrawler)
+		if (indexingConfig.connectorType !== "GOOGLE_DRIVE_CONNECTOR" && indexingConfig.connectorType !== "WEBCRAWLER_CONNECTOR") {
+			const dateRangeValidation = dateRangeSchema.safeParse({ startDate, endDate });
+			if (!dateRangeValidation.success) {
+				const firstIssueMsg =
+					dateRangeValidation.error.issues && dateRangeValidation.error.issues.length > 0
+						? dateRangeValidation.error.issues[0].message
+						: "Invalid date range";
+				toast.error(firstIssueMsg);
+				return;
+			}
 		}
 
 		// Validate frequency minutes if periodic is enabled
@@ -313,6 +427,14 @@ export const useConnectorDialog = () => {
 					setIsStartingIndexing(false);
 					return;
 				}
+			} else if (indexingConfig.connectorType === "WEBCRAWLER_CONNECTOR") {
+				// Webcrawler doesn't use date ranges, just uses config (API key and URLs)
+				await indexConnector({
+					connector_id: indexingConfig.connectorId,
+					queryParams: {
+						search_space_id: searchSpaceId,
+					},
+				});
 			} else {
 				await indexConnector({
 					connector_id: indexingConfig.connectorId,
@@ -372,8 +494,11 @@ export const useConnectorDialog = () => {
 			(oauthConnector) => oauthConnector.connectorType === connector.connector_type
 		);
 		
-		// If not OAuth, redirect to old connector edit page
-		if (!isOAuthConnector) {
+		// Check if this is webcrawler (can be managed in popup)
+		const isWebcrawler = connector.connector_type === EnumConnectorName.WEBCRAWLER_CONNECTOR;
+		
+		// If not OAuth and not webcrawler, redirect to old connector edit page
+		if (!isOAuthConnector && !isWebcrawler) {
 			router.push(`/dashboard/${searchSpaceId}/connectors/${connector.id}/edit`);
 			return;
 		}
@@ -405,8 +530,8 @@ export const useConnectorDialog = () => {
 	const handleSaveConnector = useCallback(async (refreshConnectors: () => void) => {
 		if (!editingConnector || !searchSpaceId) return;
 
-		// Validate date range (skip for Google Drive which uses folder selection)
-		if (editingConnector.connector_type !== "GOOGLE_DRIVE_CONNECTOR") {
+		// Validate date range (skip for Google Drive which uses folder selection, and Webcrawler which uses config)
+		if (editingConnector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && editingConnector.connector_type !== "WEBCRAWLER_CONNECTOR") {
 			const dateRangeValidation = dateRangeSchema.safeParse({ startDate, endDate });
 			if (!dateRangeValidation.success) {
 				toast.error(dateRangeValidation.error.issues[0]?.message || "Invalid date range");
@@ -457,6 +582,15 @@ export const useConnectorDialog = () => {
 					});
 					indexingDescription = `Re-indexing started for ${selectedFolders.length} folder(s).`;
 				}
+			} else if (editingConnector.connector_type === "WEBCRAWLER_CONNECTOR") {
+				// Webcrawler uses config (API key and URLs), not date ranges
+				await indexConnector({
+					connector_id: editingConnector.id,
+					queryParams: {
+						search_space_id: searchSpaceId,
+					},
+				});
+				indexingDescription = "Re-indexing started with updated configuration.";
 			} else if (startDateStr || endDateStr) {
 				// Other connectors use date ranges
 				await indexConnector({
@@ -623,6 +757,8 @@ export const useConnectorDialog = () => {
 		handleTabChange,
 		handleScroll,
 		handleConnectOAuth,
+		handleCreateWebcrawler,
+		handleCreateYouTube,
 		handleStartIndexing,
 		handleSkipIndexing,
 		handleStartEdit,
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index b06c5f274..67670a986 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -13,6 +13,8 @@ interface AllConnectorsTabProps {
 	connectingId: string | null;
 	allConnectors: SearchSourceConnector[] | undefined;
 	onConnectOAuth: (connector: (typeof OAUTH_CONNECTORS)[0]) => void;
+	onCreateWebcrawler?: () => void;
+	onCreateYouTube?: () => void;
 	onManage?: (connector: SearchSourceConnector) => void;
 }
 
@@ -23,6 +25,8 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 	connectingId,
 	allConnectors,
 	onConnectOAuth,
+	onCreateWebcrawler,
+	onCreateYouTube,
 	onManage,
 }) => {
 	const router = useRouter();
@@ -88,11 +92,21 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
 						{filteredOther.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;
 
+							// Special handling for webcrawler and YouTube - create in popup
+							const isWebcrawler = connector.id === "webcrawler-connector";
+							const isYouTube = connector.id === "youtube-connector";
+							const handleConnect = isWebcrawler && onCreateWebcrawler
+								? onCreateWebcrawler
+								: isYouTube && onCreateYouTube
+								? onCreateYouTube
+								: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);
+
 							return (
 								<ConnectorCard
 									key={connector.id}
@@ -101,11 +115,8 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 									description={connector.description}
 									connectorType={connector.connectorType}
 									isConnected={isConnected}
-									onConnect={() =>
-										router.push(
-											`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`
-										)
-									}
+									isConnecting={isConnecting}
+									onConnect={handleConnect}
 									onManage={actualConnector && onManage ? () => onManage(actualConnector) : undefined}
 								/>
 							);
diff --git a/surfsense_web/contracts/enums/connector.ts b/surfsense_web/contracts/enums/connector.ts
index eb2cf7ad8..b686f2e9a 100644
--- a/surfsense_web/contracts/enums/connector.ts
+++ b/surfsense_web/contracts/enums/connector.ts
@@ -19,4 +19,5 @@ export enum EnumConnectorName {
 	LUMA_CONNECTOR = "LUMA_CONNECTOR",
 	ELASTICSEARCH_CONNECTOR = "ELASTICSEARCH_CONNECTOR",
 	WEBCRAWLER_CONNECTOR = "WEBCRAWLER_CONNECTOR",
+	YOUTUBE_CONNECTOR = "YOUTUBE_CONNECTOR",
 }
diff --git a/surfsense_web/contracts/enums/connectorIcons.tsx b/surfsense_web/contracts/enums/connectorIcons.tsx
index 661be5253..a7522ae2c 100644
--- a/surfsense_web/contracts/enums/connectorIcons.tsx
+++ b/surfsense_web/contracts/enums/connectorIcons.tsx
@@ -74,6 +74,8 @@ export const getConnectorIcon = (connectorType: EnumConnectorName | string, clas
 			return <IconBrandElastic {...iconProps} />;
 		case EnumConnectorName.WEBCRAWLER_CONNECTOR:
 			return <Globe {...iconProps} />;
+		case EnumConnectorName.YOUTUBE_CONNECTOR:
+			return <IconBrandYoutube {...iconProps} />;
 		// Additional cases for non-enum connector types
 		case "CRAWLED_URL":
 			return <Globe {...iconProps} />;
diff --git a/surfsense_web/contracts/types/connector.types.ts b/surfsense_web/contracts/types/connector.types.ts
index c590f3941..4b92823a9 100644
--- a/surfsense_web/contracts/types/connector.types.ts
+++ b/surfsense_web/contracts/types/connector.types.ts
@@ -22,6 +22,7 @@ export const searchSourceConnectorTypeEnum = z.enum([
 	"LUMA_CONNECTOR",
 	"ELASTICSEARCH_CONNECTOR",
 	"WEBCRAWLER_CONNECTOR",
+	"YOUTUBE_CONNECTOR",
 	"BOOKSTACK_CONNECTOR",
 ]);
 

From 880b3cc4bfe7113be4d94fac4916de145f00456f Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 12:35:43 +0530
Subject: [PATCH 11/28] feat: Add Tavily API connector support, including
 configuration forms and connection handling, enhance connector dialog with
 non-OAuth connection logic, and improve state management for connector
 creation.

---
 .../assistant-ui/connector-popup.tsx          | 133 ++++++++++----
 .../components/tavily-api-config.tsx          |  92 ++++++++++
 .../connector-configs/connect-forms/index.tsx |  36 ++++
 .../connect-forms/tavily-api-connect-form.tsx | 145 +++++++++++++++
 .../connector-configs/index.tsx               |   4 +
 .../views/connector-connect-view.tsx          | 131 +++++++++++++
 .../views/connector-edit-view.tsx             |  38 ++--
 .../views/indexing-configuration-view.tsx     |  36 ++--
 .../constants/connector-popup.schemas.ts      |   3 +-
 .../hooks/use-connector-dialog.ts             | 172 ++++++++++++++++--
 .../tabs/all-connectors-tab.tsx               |   7 +-
 11 files changed, 711 insertions(+), 86 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/tavily-api-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/index.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/tavily-api-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx

diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index 55a11f420..26a0836c8 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -2,11 +2,13 @@
 
 import { useAtomValue } from "jotai";
 import { Cable, Loader2 } from "lucide-react";
-import { type FC, useMemo } from "react";
+import { type FC, useMemo, useEffect } from "react";
 import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
 import { useLogsSummary } from "@/hooks/use-logs";
-import { useSearchSourceConnectors } from "@/hooks/use-search-source-connectors";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { connectorsApiService } from "@/lib/apis/connectors-api.service";
 import {
 	Dialog,
 	DialogContent,
@@ -21,16 +23,13 @@ import { AllConnectorsTab } from "./connector-popup/tabs/all-connectors-tab";
 import { ActiveConnectorsTab } from "./connector-popup/tabs/active-connectors-tab";
 import { ConnectorDialogHeader } from "./connector-popup/components/connector-dialog-header";
 import { ConnectorEditView } from "./connector-popup/connector-configs/views/connector-edit-view";
+import { ConnectorConnectView } from "./connector-popup/connector-configs/views/connector-connect-view";
 import { IndexingConfigurationView } from "./connector-popup/connector-configs/views/indexing-configuration-view";
 import { useConnectorDialog } from "./connector-popup/hooks/use-connector-dialog";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 
 export const ConnectorIndicator: FC = () => {
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
-	const { connectors, isLoading: connectorsLoading, refreshConnectors } = useSearchSourceConnectors(
-		false,
-		searchSpaceId ? Number(searchSpaceId) : undefined
-	);
 	const { data: documentTypeCounts, isLoading: documentTypesLoading } =
 		useAtomValue(documentTypeCountsAtom);
 
@@ -44,22 +43,6 @@ export const ConnectorIndicator: FC = () => {
 		}
 	);
 
-	// Get connector IDs that are currently being indexed
-	const indexingConnectorIds = useMemo(() => {
-		if (!logsSummary?.active_tasks) return new Set<number>();
-		return new Set(
-			logsSummary.active_tasks
-				.filter((task) => task.source?.includes("connector_indexing"))
-				.map((task) => {
-					const match = task.source?.match(/connector[_-]?(\d+)/i);
-					return match ? parseInt(match[1], 10) : null;
-				})
-				.filter((id): id is number => id !== null)
-		);
-	}, [logsSummary?.active_tasks]);
-
-	const isLoading = connectorsLoading || documentTypesLoading;
-
 	// Use the custom hook for dialog state management
 	const {
 		isOpen,
@@ -71,6 +54,8 @@ export const ConnectorIndicator: FC = () => {
 		indexingConnector,
 		indexingConnectorConfig,
 		editingConnector,
+		connectingConnectorType,
+		isCreatingConnector,
 		startDate,
 		endDate,
 		isStartingIndexing,
@@ -88,19 +73,81 @@ export const ConnectorIndicator: FC = () => {
 		handleTabChange,
 		handleScroll,
 		handleConnectOAuth,
+		handleConnectNonOAuth,
 		handleCreateWebcrawler,
 		handleCreateYouTube,
+		handleSubmitConnectForm,
 		handleStartIndexing,
 		handleSkipIndexing,
 		handleStartEdit,
 		handleSaveConnector,
 		handleDisconnectConnector,
 		handleBackFromEdit,
+		handleBackFromConnect,
 		connectorConfig,
 		setConnectorConfig,
 		setIndexingConnectorConfig,
+		setConnectorName,
 	} = useConnectorDialog();
 
+	// Fetch connectors using React Query with conditional refetchInterval
+	// This automatically refetches when mutations invalidate the cache (event-driven)
+	// and also polls when dialog is open to catch external changes
+	const {
+		data: connectors = [],
+		isLoading: connectorsLoading,
+		refetch: refreshConnectors,
+	} = useQuery({
+		queryKey: cacheKeys.connectors.all(searchSpaceId || ""),
+		queryFn: () =>
+			connectorsApiService.getConnectors({
+				queryParams: {
+					search_space_id: searchSpaceId ? Number(searchSpaceId) : undefined,
+				},
+			}),
+		enabled: !!searchSpaceId,
+		staleTime: 5 * 60 * 1000, // 5 minutes (same as connectorsAtom)
+		// Poll when dialog is open to catch external changes
+		refetchInterval: isOpen ? 5000 : false, // 5 seconds when open, no polling when closed
+	});
+
+	const queryClient = useQueryClient();
+
+	// Also refresh document type counts when dialog is open
+	useEffect(() => {
+		if (!isOpen || !searchSpaceId) return;
+
+		const POLL_INTERVAL = 5000; // 5 seconds, same as connectors
+
+		const intervalId = setInterval(() => {
+			// Invalidate document type counts to refresh active document types
+			queryClient.invalidateQueries({
+				queryKey: cacheKeys.documents.typeCounts(searchSpaceId),
+			});
+		}, POLL_INTERVAL);
+
+		// Cleanup interval on unmount or when dialog closes
+		return () => {
+			clearInterval(intervalId);
+		};
+	}, [isOpen, searchSpaceId, queryClient]);
+
+	// Get connector IDs that are currently being indexed
+	const indexingConnectorIds = useMemo(() => {
+		if (!logsSummary?.active_tasks) return new Set<number>();
+		return new Set(
+			logsSummary.active_tasks
+				.filter((task) => task.source?.includes("connector_indexing"))
+				.map((task) => {
+					const match = task.source?.match(/connector[_-]?(\d+)/i);
+					return match ? parseInt(match[1], 10) : null;
+				})
+				.filter((id): id is number => id !== null)
+		);
+	}, [logsSummary?.active_tasks]);
+
+	const isLoading = connectorsLoading || documentTypesLoading;
+
 	// Get document types that have documents in the search space
 	const activeDocumentTypes = documentTypeCounts
 		? Object.entries(documentTypeCounts).filter(([, count]) => count > 0)
@@ -148,12 +195,20 @@ export const ConnectorIndicator: FC = () => {
 			</TooltipIconButton>
 
 			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
-				{/* Connector Edit View - shown when editing existing connector */}
-				{editingConnector ? (
+				{/* Connector Connect View - shown when connecting non-OAuth connectors */}
+				{connectingConnectorType ? (
+					<ConnectorConnectView
+						connectorType={connectingConnectorType}
+						onSubmit={handleSubmitConnectForm}
+						onBack={handleBackFromConnect}
+						isSubmitting={isCreatingConnector}
+					/>
+				) : editingConnector ? (
 					<ConnectorEditView
 						connector={{
 							...editingConnector,
 							config: connectorConfig || editingConnector.config,
+							name: editingConnector.name,
 						}}
 						startDate={startDate}
 						endDate={endDate}
@@ -165,10 +220,11 @@ export const ConnectorIndicator: FC = () => {
 						onEndDateChange={setEndDate}
 						onPeriodicEnabledChange={setPeriodicEnabled}
 						onFrequencyChange={setFrequencyMinutes}
-						onSave={() => handleSaveConnector(refreshConnectors)}
-						onDisconnect={() => handleDisconnectConnector(refreshConnectors)}
+						onSave={() => handleSaveConnector(() => refreshConnectors())}
+						onDisconnect={() => handleDisconnectConnector(() => refreshConnectors())}
 						onBack={handleBackFromEdit}
 						onConfigChange={setConnectorConfig}
+						onNameChange={setConnectorName}
 					/>
 				) : indexingConfig ? (
 					<IndexingConfigurationView
@@ -187,7 +243,7 @@ export const ConnectorIndicator: FC = () => {
 						onPeriodicEnabledChange={setPeriodicEnabled}
 						onFrequencyChange={setFrequencyMinutes}
 						onConfigChange={setIndexingConnectorConfig}
-						onStartIndexing={() => handleStartIndexing(refreshConnectors)}
+						onStartIndexing={() => handleStartIndexing(() => refreshConnectors())}
 						onSkip={handleSkipIndexing}
 					/>
 				) : (
@@ -207,17 +263,18 @@ export const ConnectorIndicator: FC = () => {
 							<div className="h-full overflow-y-auto" onScroll={handleScroll}>
 								<div className="px-6 sm:px-12 py-6 sm:py-8 pb-16 sm:pb-16">
 									<TabsContent value="all" className="m-0">
-										<AllConnectorsTab
-											searchQuery={searchQuery}
-											searchSpaceId={searchSpaceId}
-											connectedTypes={connectedTypes}
-											connectingId={connectingId}
-											allConnectors={allConnectors}
-											onConnectOAuth={handleConnectOAuth}
-											onCreateWebcrawler={handleCreateWebcrawler}
-											onCreateYouTube={handleCreateYouTube}
-											onManage={handleStartEdit}
-										/>
+									<AllConnectorsTab
+										searchQuery={searchQuery}
+										searchSpaceId={searchSpaceId}
+										connectedTypes={connectedTypes}
+										connectingId={connectingId}
+										allConnectors={allConnectors}
+										onConnectOAuth={handleConnectOAuth}
+										onConnectNonOAuth={handleConnectNonOAuth}
+										onCreateWebcrawler={handleCreateWebcrawler}
+										onCreateYouTube={handleCreateYouTube}
+										onManage={handleStartEdit}
+									/>
 									</TabsContent>
 
 									<ActiveConnectorsTab
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/tavily-api-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/tavily-api-config.tsx
new file mode 100644
index 000000000..6c6f48db3
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/tavily-api-config.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface TavilyApiConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const TavilyApiConfig: FC<TavilyApiConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [apiKey, setApiKey] = useState<string>(
+		(connector.config?.TAVILY_API_KEY as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update API key and name when connector changes
+	useEffect(() => {
+		const key = (connector.config?.TAVILY_API_KEY as string) || "";
+		setApiKey(key);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleApiKeyChange = (value: string) => {
+		setApiKey(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				TAVILY_API_KEY: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Tavily API Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="flex items-center gap-2 text-xs sm:text-sm">
+						<KeyRound className="h-4 w-4" />
+						Tavily API Key
+					</Label>
+					<Input
+						type="password"
+						value={apiKey}
+						onChange={(e) => handleApiKeyChange(e.target.value)}
+						placeholder="Enter your Tavily API key"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update the Tavily API Key if needed.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/index.tsx
new file mode 100644
index 000000000..fd0c4eced
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/index.tsx
@@ -0,0 +1,36 @@
+import type { FC } from "react";
+import { TavilyApiConnectForm } from "./tavily-api-connect-form";
+
+export interface ConnectFormProps {
+	onSubmit: (data: {
+		name: string;
+		connector_type: string;
+		config: Record<string, unknown>;
+		is_indexable: boolean;
+		last_indexed_at: null;
+		periodic_indexing_enabled: boolean;
+		indexing_frequency_minutes: null;
+		next_scheduled_at: null;
+	}) => Promise<void>;
+	onBack: () => void;
+	isSubmitting: boolean;
+	onFormSubmit?: () => void;
+}
+
+export type ConnectFormComponent = FC<ConnectFormProps>;
+
+/**
+ * Factory function to get the appropriate connect form component for a connector type
+ */
+export function getConnectFormComponent(
+	connectorType: string
+): ConnectFormComponent | null {
+	switch (connectorType) {
+		case "TAVILY_API":
+			return TavilyApiConnectForm;
+		// Add other connector types here as needed
+		default:
+			return null;
+	}
+}
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/tavily-api-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/tavily-api-connect-form.tsx
new file mode 100644
index 000000000..ddccbf8c8
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/tavily-api-connect-form.tsx
@@ -0,0 +1,145 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "./index";
+
+const tavilyApiFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	api_key: z.string().min(10, {
+		message: "API key is required and must be valid.",
+	}),
+});
+
+type TavilyApiFormValues = z.infer<typeof tavilyApiFormSchema>;
+
+export const TavilyApiConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const form = useForm<TavilyApiFormValues>({
+		resolver: zodResolver(tavilyApiFormSchema),
+		defaultValues: {
+			name: "Tavily API Connector",
+			api_key: "",
+		},
+	});
+
+	const handleSubmit = async (values: TavilyApiFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.TAVILY_API,
+				config: {
+					TAVILY_API_KEY: values.api_key,
+				},
+				is_indexable: false,
+				last_indexed_at: null,
+				periodic_indexing_enabled: false,
+				indexing_frequency_minutes: null,
+				next_scheduled_at: null,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Tavily API key to use this connector. You can get one by signing up at{" "}
+						<a
+							href="https://tavily.com"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							tavily.com
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="tavily-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Tavily API Connector" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="api_key"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Tavily API Key</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="Enter your Tavily API key" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your API key will be encrypted and stored securely.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+				</Form>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
index 4b6f56523..78efb60a9 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -3,12 +3,14 @@
 import type { FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { GoogleDriveConfig } from "./components/google-drive-config";
+import { TavilyApiConfig } from "./components/tavily-api-config";
 import { WebcrawlerConfig } from "./components/webcrawler-config";
 import { YouTubeConfig } from "./components/youtube-config";
 
 export interface ConnectorConfigProps {
 	connector: SearchSourceConnector;
 	onConfigChange?: (config: Record<string, unknown>) => void;
+	onNameChange?: (name: string) => void;
 }
 
 export type ConnectorConfigComponent = FC<ConnectorConfigProps>;
@@ -22,6 +24,8 @@ export function getConnectorConfigComponent(
 	switch (connectorType) {
 		case "GOOGLE_DRIVE_CONNECTOR":
 			return GoogleDriveConfig;
+		case "TAVILY_API":
+			return TavilyApiConfig;
 		case "WEBCRAWLER_CONNECTOR":
 			return WebcrawlerConfig;
 		case "YOUTUBE_CONNECTOR":
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
new file mode 100644
index 000000000..9499606c9
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { ArrowLeft, Loader2 } from "lucide-react";
+import { type FC, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorTypeDisplay } from "@/lib/connectors/utils";
+import { getConnectFormComponent } from "../connect-forms";
+
+interface ConnectorConnectViewProps {
+	connectorType: string;
+	onSubmit: (data: {
+		name: string;
+		connector_type: string;
+		config: Record<string, unknown>;
+		is_indexable: boolean;
+		last_indexed_at: null;
+		periodic_indexing_enabled: boolean;
+		indexing_frequency_minutes: null;
+		next_scheduled_at: null;
+	}) => Promise<void>;
+	onBack: () => void;
+	isSubmitting: boolean;
+}
+
+export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
+	connectorType,
+	onSubmit,
+	onBack,
+	isSubmitting,
+}) => {
+	// Get connector-specific form component
+	const ConnectFormComponent = useMemo(
+		() => getConnectFormComponent(connectorType),
+		[connectorType]
+	);
+
+	const handleFormSubmit = () => {
+		// Prevent multiple submissions
+		if (isSubmitting) {
+			return;
+		}
+		const form = document.getElementById("tavily-connect-form") as HTMLFormElement;
+		if (form) {
+			form.requestSubmit();
+		}
+	};
+
+	if (!ConnectFormComponent) {
+		return (
+			<div className="flex-1 flex flex-col min-h-0 overflow-hidden p-6">
+				<p className="text-sm text-muted-foreground mb-4">
+					Connector form not found for type: {connectorType}
+				</p>
+				<Button onClick={onBack} variant="ghost">
+					Back
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+			{/* Header */}
+			<div className="flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10">
+				<button
+					type="button"
+					onClick={onBack}
+					className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
+				>
+					<ArrowLeft className="size-4" />
+					Back to connectors
+				</button>
+
+				<div className="flex items-center gap-4 mb-6">
+					<div className="flex h-14 w-14 items-center justify-center rounded-xl border border-slate-400/30">
+						{getConnectorIcon(connectorType as EnumConnectorName, "h-7 w-7")}
+					</div>
+					<div>
+						<h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
+							Connect {connectorType === "TAVILY_API" ? "Tavily API" : connectorType}
+						</h2>
+						<p className="text-xs sm:text-base text-muted-foreground mt-1">
+							Enter your connection details
+						</p>
+					</div>
+				</div>
+			</div>
+
+			{/* Form Content - Scrollable */}
+			<div className="flex-1 min-h-0 overflow-y-auto px-6 sm:px-12">
+				<ConnectFormComponent
+					onSubmit={onSubmit}
+					onBack={onBack}
+					isSubmitting={isSubmitting}
+					onFormSubmit={handleFormSubmit}
+				/>
+			</div>
+
+			{/* Fixed Footer - Action buttons */}
+			<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 bg-muted border-t border-border">
+				<Button 
+					variant="ghost" 
+					onClick={onBack} 
+					disabled={isSubmitting} 
+					className="text-xs sm:text-sm"
+				>
+					Cancel
+				</Button>
+				<Button 
+					onClick={handleFormSubmit} 
+					disabled={isSubmitting} 
+					className="text-xs sm:text-sm min-w-[140px] disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+				>
+					{isSubmitting ? (
+						<>
+							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+							Connecting...
+						</>
+					) : (
+						<>
+							Connect {getConnectorTypeDisplay(connectorType)}
+						</>
+					)}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
index 9412b9633..290b08825 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
@@ -26,6 +26,7 @@ interface ConnectorEditViewProps {
 	onDisconnect: () => void;
 	onBack: () => void;
 	onConfigChange?: (config: Record<string, any>) => void;
+	onNameChange?: (name: string) => void;
 }
 
 export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
@@ -44,6 +45,7 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 	onDisconnect,
 	onBack,
 	onConfigChange,
+	onNameChange,
 }) => {
 	// Get connector-specific config component
 	const ConnectorConfigComponent = useMemo(
@@ -146,25 +148,31 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 							<ConnectorConfigComponent
 								connector={connector}
 								onConfigChange={onConfigChange}
+								onNameChange={onNameChange}
 							/>
 						)}
 
-						{/* Date range selector - not shown for Google Drive (uses folder selection), Webcrawler (uses config), or YouTube (uses URL selection) */}
-						{connector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && connector.connector_type !== "WEBCRAWLER_CONNECTOR" && connector.connector_type !== "YOUTUBE_CONNECTOR" && (
-							<DateRangeSelector
-								startDate={startDate}
-								endDate={endDate}
-								onStartDateChange={onStartDateChange}
-								onEndDateChange={onEndDateChange}
-							/>
-						)}
+						{/* Date range selector and periodic sync - only shown for indexable connectors */}
+						{connector.is_indexable && (
+							<>
+								{/* Date range selector - not shown for Google Drive (uses folder selection), Webcrawler (uses config), or YouTube (uses URL selection) */}
+								{connector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && connector.connector_type !== "WEBCRAWLER_CONNECTOR" && connector.connector_type !== "YOUTUBE_CONNECTOR" && (
+									<DateRangeSelector
+										startDate={startDate}
+										endDate={endDate}
+										onStartDateChange={onStartDateChange}
+										onEndDateChange={onEndDateChange}
+									/>
+								)}
 
-						<PeriodicSyncConfig
-							enabled={periodicEnabled}
-							frequencyMinutes={frequencyMinutes}
-							onEnabledChange={onPeriodicEnabledChange}
-							onFrequencyChange={onFrequencyChange}
-						/>
+								<PeriodicSyncConfig
+									enabled={periodicEnabled}
+									frequencyMinutes={frequencyMinutes}
+									onEnabledChange={onPeriodicEnabledChange}
+									onFrequencyChange={onFrequencyChange}
+								/>
+							</>
+						)}
 
 						{/* Info box */}
 						<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
index 3b17d9bee..1b49b2046 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
@@ -3,7 +3,6 @@
 import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
 import { type FC, useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { Button } from "@/components/ui/button";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { cn } from "@/lib/utils";
 import type { IndexingConfigState } from "../../constants/connector-constants";
@@ -134,22 +133,27 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 							/>
 						)}
 
-						{/* Date range selector - not shown for Google Drive (uses folder selection), Webcrawler (uses config), or YouTube (uses URL selection) */}
-						{config.connectorType !== "GOOGLE_DRIVE_CONNECTOR" && config.connectorType !== "WEBCRAWLER_CONNECTOR" && config.connectorType !== "YOUTUBE_CONNECTOR" && (
-							<DateRangeSelector
-								startDate={startDate}
-								endDate={endDate}
-								onStartDateChange={onStartDateChange}
-								onEndDateChange={onEndDateChange}
-							/>
-						)}
+						{/* Date range selector and periodic sync - only shown for indexable connectors */}
+						{connector?.is_indexable && (
+							<>
+								{/* Date range selector - not shown for Google Drive (uses folder selection), Webcrawler (uses config), or YouTube (uses URL selection) */}
+								{config.connectorType !== "GOOGLE_DRIVE_CONNECTOR" && config.connectorType !== "WEBCRAWLER_CONNECTOR" && config.connectorType !== "YOUTUBE_CONNECTOR" && (
+									<DateRangeSelector
+										startDate={startDate}
+										endDate={endDate}
+										onStartDateChange={onStartDateChange}
+										onEndDateChange={onEndDateChange}
+									/>
+								)}
 
-						<PeriodicSyncConfig
-							enabled={periodicEnabled}
-							frequencyMinutes={frequencyMinutes}
-							onEnabledChange={onPeriodicEnabledChange}
-							onFrequencyChange={onFrequencyChange}
-						/>
+								<PeriodicSyncConfig
+									enabled={periodicEnabled}
+									frequencyMinutes={frequencyMinutes}
+									onEnabledChange={onPeriodicEnabledChange}
+									onFrequencyChange={onFrequencyChange}
+								/>
+							</>
+						)}
 
 						{/* Info box */}
 						<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
diff --git a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
index ff2fc001d..cafce6bba 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
@@ -7,9 +7,10 @@ import { searchSourceConnectorTypeEnum } from "@/contracts/types/connector.types
 export const connectorPopupQueryParamsSchema = z.object({
 	modal: z.enum(["connectors"]).optional(),
 	tab: z.enum(["all", "active"]).optional(),
-	view: z.enum(["configure", "edit"]).optional(),
+	view: z.enum(["configure", "edit", "connect"]).optional(),
 	connector: z.string().optional(),
 	connectorId: z.string().optional(),
+	connectorType: z.string().optional(),
 	success: z.enum(["true", "false"]).optional(),
 });
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
index 633afd75b..c3dbf1b4c 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@@ -1,6 +1,6 @@
 import { useAtomValue } from "jotai";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { createConnectorMutationAtom, deleteConnectorMutationAtom, indexConnectorMutationAtom, updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
 import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
@@ -51,6 +51,12 @@ export const useConnectorDialog = () => {
 	const [isSaving, setIsSaving] = useState(false);
 	const [isDisconnecting, setIsDisconnecting] = useState(false);
 	const [connectorConfig, setConnectorConfig] = useState<Record<string, unknown> | null>(null);
+	const [connectorName, setConnectorName] = useState<string | null>(null);
+	
+	// Connect mode state (for non-OAuth connectors)
+	const [connectingConnectorType, setConnectingConnectorType] = useState<string | null>(null);
+	const [isCreatingConnector, setIsCreatingConnector] = useState(false);
+	const isCreatingConnectorRef = useRef(false);
 
 	// Helper function to get frequency label
 	const getFrequencyLabel = useCallback((minutes: string): string => {
@@ -85,6 +91,17 @@ export const useConnectorDialog = () => {
 				// Clear editing connector if view is not "edit" anymore
 				if (params.view !== "edit" && editingConnector) {
 					setEditingConnector(null);
+					setConnectorName(null);
+				}
+				
+				// Clear connecting connector type if view is not "connect" anymore
+				if (params.view !== "connect" && connectingConnectorType) {
+					setConnectingConnectorType(null);
+				}
+				
+				// Handle connect view
+				if (params.view === "connect" && params.connectorType && !connectingConnectorType) {
+					setConnectingConnectorType(params.connectorType);
 				}
 				
 				if (params.view === "configure" && params.connector && !indexingConfig) {
@@ -147,6 +164,7 @@ export const useConnectorDialog = () => {
 				// Clear editing connector when modal is closed
 				if (editingConnector) {
 					setEditingConnector(null);
+					setConnectorName(null);
 					setConnectorConfig(null);
 					setStartDate(undefined);
 					setEndDate(undefined);
@@ -155,13 +173,17 @@ export const useConnectorDialog = () => {
 					setIsScrolled(false);
 					setSearchQuery("");
 				}
+				// Clear connecting connector type when modal is closed
+				if (connectingConnectorType) {
+					setConnectingConnectorType(null);
+				}
 			}
 		} catch (error) {
 			// Invalid query params - log but don't crash
 			console.warn("Invalid connector popup query params:", error);
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [searchParams, allConnectors, editingConnector, indexingConfig]);
+	}, [searchParams, allConnectors, editingConnector, indexingConfig, connectingConnectorType]);
 
 	// Detect OAuth success and transition to config view
 	useEffect(() => {
@@ -358,6 +380,106 @@ export const useConnectorDialog = () => {
 		}
 	}, [searchSpaceId, createConnector, refetchAllConnectors]);
 
+	// Handle connecting non-OAuth connectors (like Tavily API)
+	const handleConnectNonOAuth = useCallback((connectorType: string) => {
+		if (!searchSpaceId) return;
+		
+		// Set connecting state
+		setConnectingConnectorType(connectorType);
+		
+		// Update URL to show connect view
+		const url = new URL(window.location.href);
+		url.searchParams.set("modal", "connectors");
+		url.searchParams.set("view", "connect");
+		url.searchParams.set("connectorType", connectorType);
+		window.history.pushState({ modal: true }, "", url.toString());
+	}, [searchSpaceId]);
+
+	// Handle submitting connect form
+	const handleSubmitConnectForm = useCallback(async (
+		formData: {
+			name: string;
+			connector_type: string;
+			config: Record<string, unknown>;
+			is_indexable: boolean;
+			last_indexed_at: null;
+			periodic_indexing_enabled: boolean;
+			indexing_frequency_minutes: null;
+			next_scheduled_at: null;
+		}
+	) => {
+		if (!searchSpaceId || !connectingConnectorType) return;
+		
+		// Prevent multiple submissions using ref for immediate check
+		if (isCreatingConnectorRef.current) return;
+		isCreatingConnectorRef.current = true;
+
+		setIsCreatingConnector(true);
+		try {
+			// Create connector
+			const newConnector = await createConnector({
+				data: formData,
+				queryParams: {
+					search_space_id: searchSpaceId,
+				},
+			});
+
+			// Refetch connectors to get the new one
+			const result = await refetchAllConnectors();
+			if (result.data) {
+				const connector = result.data.find(
+					(c: SearchSourceConnector) => c.id === newConnector.id
+				);
+				if (connector) {
+					// Validate connector data
+					const connectorValidation = searchSourceConnector.safeParse(connector);
+					if (connectorValidation.success) {
+						// Find connector title from constants
+						const connectorInfo = OTHER_CONNECTORS.find(
+							c => c.connectorType === connectingConnectorType
+						);
+						const connectorTitle = connectorInfo?.title || connector.name;
+						
+						// Set up indexing config
+						const config = validateIndexingConfigState({
+							connectorType: connectingConnectorType as EnumConnectorName,
+							connectorId: connector.id,
+							connectorTitle,
+						});
+						setIndexingConfig(config);
+						setIndexingConnector(connector);
+						setIndexingConnectorConfig(connector.config || {});
+						
+						// Transition to configure view
+						const url = new URL(window.location.href);
+						url.searchParams.set("view", "configure");
+						url.searchParams.delete("connectorType");
+						window.history.replaceState({}, "", url.toString());
+						
+						toast.success(`${connectorTitle} connected successfully!`);
+					}
+				}
+			}
+		} catch (error) {
+			console.error("Error creating connector:", error);
+			toast.error(error instanceof Error ? error.message : "Failed to create connector");
+		} finally {
+			isCreatingConnectorRef.current = false;
+			setIsCreatingConnector(false);
+			setConnectingConnectorType(null);
+		}
+	}, [connectingConnectorType, searchSpaceId, createConnector, refetchAllConnectors]);
+
+	// Handle going back from connect view
+	const handleBackFromConnect = useCallback(() => {
+		const url = new URL(window.location.href);
+		url.searchParams.set("modal", "connectors");
+		url.searchParams.set("tab", "all");
+		url.searchParams.delete("view");
+		url.searchParams.delete("connectorType");
+		router.replace(url.pathname + url.search, { scroll: false });
+	}, [router]);
+
 	// Handle starting indexing
 	const handleStartIndexing = useCallback(async (refreshConnectors: () => void) => {
 		if (!indexingConfig || !searchSpaceId) return;
@@ -494,11 +616,12 @@ export const useConnectorDialog = () => {
 			(oauthConnector) => oauthConnector.connectorType === connector.connector_type
 		);
 		
-		// Check if this is webcrawler (can be managed in popup)
+		// Check if this is webcrawler or Tavily API (can be managed in popup)
 		const isWebcrawler = connector.connector_type === EnumConnectorName.WEBCRAWLER_CONNECTOR;
+		const isTavilyApi = connector.connector_type === EnumConnectorName.TAVILY_API;
 		
-		// If not OAuth and not webcrawler, redirect to old connector edit page
-		if (!isOAuthConnector && !isWebcrawler) {
+		// If not OAuth, not webcrawler, and not Tavily API, redirect to old connector edit page
+		if (!isOAuthConnector && !isWebcrawler && !isTavilyApi) {
 			router.push(`/dashboard/${searchSpaceId}/connectors/${connector.id}/edit`);
 			return;
 		}
@@ -511,6 +634,7 @@ export const useConnectorDialog = () => {
 		}
 		
 		setEditingConnector(connector);
+		setConnectorName(connector.name);
 		// Load existing periodic sync settings
 		setPeriodicEnabled(connector.periodic_indexing_enabled);
 		setFrequencyMinutes(connector.indexing_frequency_minutes?.toString() || "1440");
@@ -530,8 +654,8 @@ export const useConnectorDialog = () => {
 	const handleSaveConnector = useCallback(async (refreshConnectors: () => void) => {
 		if (!editingConnector || !searchSpaceId) return;
 
-		// Validate date range (skip for Google Drive which uses folder selection, and Webcrawler which uses config)
-		if (editingConnector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && editingConnector.connector_type !== "WEBCRAWLER_CONNECTOR") {
+		// Validate date range (skip for Google Drive which uses folder selection, Webcrawler which uses config, and non-indexable connectors)
+		if (editingConnector.is_indexable && editingConnector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && editingConnector.connector_type !== "WEBCRAWLER_CONNECTOR") {
 			const dateRangeValidation = dateRangeSchema.safeParse({ startDate, endDate });
 			if (!dateRangeValidation.success) {
 				toast.error(dateRangeValidation.error.issues[0]?.message || "Invalid date range");
@@ -539,8 +663,14 @@ export const useConnectorDialog = () => {
 			}
 		}
 
-		// Validate frequency minutes if periodic is enabled
-		if (periodicEnabled) {
+		// Prevent periodic indexing for non-indexable connectors
+		if (periodicEnabled && !editingConnector.is_indexable) {
+			toast.error("Periodic indexing is not available for this connector type");
+			return;
+		}
+
+		// Validate frequency minutes if periodic is enabled (only for indexable connectors)
+		if (periodicEnabled && editingConnector.is_indexable) {
 			const frequencyValidation = frequencyMinutesSchema.safeParse(frequencyMinutes);
 			if (!frequencyValidation.success) {
 				toast.error("Invalid frequency value");
@@ -553,20 +683,24 @@ export const useConnectorDialog = () => {
 			const startDateStr = startDate ? format(startDate, "yyyy-MM-dd") : undefined;
 			const endDateStr = endDate ? format(endDate, "yyyy-MM-dd") : undefined;
 
-			// Update connector with periodic sync settings and config changes
+			// Update connector with periodic sync settings, config changes, and name
 			const frequency = periodicEnabled ? parseInt(frequencyMinutes, 10) : null;
 			await updateConnector({
 				id: editingConnector.id,
 				data: {
+					name: connectorName || editingConnector.name,
 					periodic_indexing_enabled: periodicEnabled,
 					indexing_frequency_minutes: frequency,
 					config: connectorConfig || editingConnector.config,
 				},
 			});
 
-			// Re-index based on connector type
+			// Re-index based on connector type (only for indexable connectors)
 			let indexingDescription = "Settings saved.";
-			if (editingConnector.connector_type === "GOOGLE_DRIVE_CONNECTOR") {
+			if (!editingConnector.is_indexable) {
+				// Non-indexable connectors (like Tavily API) don't need re-indexing
+				indexingDescription = "Settings saved.";
+			} else if (editingConnector.connector_type === "GOOGLE_DRIVE_CONNECTOR") {
 				// Google Drive uses folder selection from config, not date ranges
 				const selectedFolders = (connectorConfig || editingConnector.config)?.selected_folders as Array<{ id: string; name: string }> | undefined;
 				if (selectedFolders && selectedFolders.length > 0) {
@@ -628,7 +762,7 @@ export const useConnectorDialog = () => {
 		} finally {
 			setIsSaving(false);
 		}
-	}, [editingConnector, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, getFrequencyLabel, router, connectorConfig]);
+	}, [editingConnector, searchSpaceId, startDate, endDate, indexConnector, updateConnector, periodicEnabled, frequencyMinutes, getFrequencyLabel, router, connectorConfig, connectorName]);
 
 	// Handle disconnecting connector
 	const handleDisconnectConnector = useCallback(async (refreshConnectors: () => void) => {
@@ -692,12 +826,14 @@ export const useConnectorDialog = () => {
 				window.history.pushState({ modal: false }, "", url.toString());
 				setIsScrolled(false);
 				setSearchQuery("");
-				if (!isStartingIndexing && !isSaving && !isDisconnecting) {
+				if (!isStartingIndexing && !isSaving && !isDisconnecting && !isCreatingConnector) {
 					setIndexingConfig(null);
 					setIndexingConnector(null);
 					setIndexingConnectorConfig(null);
 					setEditingConnector(null);
+					setConnectorName(null);
 					setConnectorConfig(null);
+					setConnectingConnectorType(null);
 					setStartDate(undefined);
 					setEndDate(undefined);
 					setPeriodicEnabled(false);
@@ -705,7 +841,7 @@ export const useConnectorDialog = () => {
 				}
 			}
 		},
-		[activeTab, isStartingIndexing, isDisconnecting, isSaving]
+		[activeTab, isStartingIndexing, isDisconnecting, isSaving, isCreatingConnector]
 	);
 
 	// Handle tab change
@@ -735,6 +871,8 @@ export const useConnectorDialog = () => {
 		indexingConnector,
 		indexingConnectorConfig,
 		editingConnector,
+		connectingConnectorType,
+		isCreatingConnector,
 		startDate,
 		endDate,
 		isStartingIndexing,
@@ -751,20 +889,24 @@ export const useConnectorDialog = () => {
 		setEndDate,
 		setPeriodicEnabled,
 		setFrequencyMinutes,
+		setConnectorName,
 		
 		// Handlers
 		handleOpenChange,
 		handleTabChange,
 		handleScroll,
 		handleConnectOAuth,
+		handleConnectNonOAuth,
 		handleCreateWebcrawler,
 		handleCreateYouTube,
+		handleSubmitConnectForm,
 		handleStartIndexing,
 		handleSkipIndexing,
 		handleStartEdit,
 		handleSaveConnector,
 		handleDisconnectConnector,
 		handleBackFromEdit,
+		handleBackFromConnect,
 		connectorConfig,
 		setConnectorConfig,
 		setIndexingConnectorConfig,
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 67670a986..76380e74b 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -13,6 +13,7 @@ interface AllConnectorsTabProps {
 	connectingId: string | null;
 	allConnectors: SearchSourceConnector[] | undefined;
 	onConnectOAuth: (connector: (typeof OAUTH_CONNECTORS)[0]) => void;
+	onConnectNonOAuth?: (connectorType: string) => void;
 	onCreateWebcrawler?: () => void;
 	onCreateYouTube?: () => void;
 	onManage?: (connector: SearchSourceConnector) => void;
@@ -25,6 +26,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 	connectingId,
 	allConnectors,
 	onConnectOAuth,
+	onConnectNonOAuth,
 	onCreateWebcrawler,
 	onCreateYouTube,
 	onManage,
@@ -98,13 +100,16 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 								? allConnectors.find((c: SearchSourceConnector) => c.connector_type === connector.connectorType)
 								: undefined;
 
-							// Special handling for webcrawler and YouTube - create in popup
+							// Special handling for connectors that can be created in popup
 							const isWebcrawler = connector.id === "webcrawler-connector";
 							const isYouTube = connector.id === "youtube-connector";
+							const isTavily = connector.id === "tavily-api";
 							const handleConnect = isWebcrawler && onCreateWebcrawler
 								? onCreateWebcrawler
 								: isYouTube && onCreateYouTube
 								? onCreateYouTube
+								: isTavily && onConnectNonOAuth
+								? () => onConnectNonOAuth(connector.connectorType)
 								: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);
 
 							return (

From e7a60924ceed05eccf988362f4802fcf6103cc7c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 12:58:12 +0530
Subject: [PATCH 12/28] feat: Add Linear and Tavily API connector forms and
 configurations, organized the components

---
 .../components/linear-connect-form.tsx        | 150 ++++++++++++++++++
 .../components}/tavily-api-connect-form.tsx   |   2 +-
 .../connect-forms/index.tsx                   |   5 +-
 .../components/linear-config.tsx              |  92 +++++++++++
 .../connector-configs/index.tsx               |   3 +
 .../views/connector-connect-view.tsx          |  18 ++-
 .../tabs/all-connectors-tab.tsx               |   3 +-
 7 files changed, 265 insertions(+), 8 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
 rename surfsense_web/components/assistant-ui/connector-popup/{connector-configs/connect-forms => connect-forms/components}/tavily-api-connect-form.tsx (98%)
 rename surfsense_web/components/assistant-ui/connector-popup/{connector-configs => }/connect-forms/index.tsx (80%)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linear-config.tsx

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
new file mode 100644
index 000000000..a87591ee1
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+
+const linearConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	api_key: z
+		.string()
+		.min(10, {
+			message: "Linear API Key is required and must be valid.",
+		})
+		.regex(/^lin_api_/, {
+			message: "Linear API Key should start with 'lin_api_'",
+		}),
+});
+
+type LinearConnectorFormValues = z.infer<typeof linearConnectorFormSchema>;
+
+export const LinearConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const form = useForm<LinearConnectorFormValues>({
+		resolver: zodResolver(linearConnectorFormSchema),
+		defaultValues: {
+			name: "Linear Connector",
+			api_key: "",
+		},
+	});
+
+	const handleSubmit = async (values: LinearConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.LINEAR_CONNECTOR,
+				config: {
+					LINEAR_API_KEY: values.api_key,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: false,
+				indexing_frequency_minutes: null,
+				next_scheduled_at: null,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Linear API Key to use this connector. You can create one from{" "}
+						<a
+							href="https://linear.app/settings/api"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							Linear API Settings
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="linear-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Linear Connector" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="api_key"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Linear API Key</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="lin_api_..." 
+											className="border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your Linear API Key will be encrypted and stored securely. It typically starts with "lin_api_".
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+				</Form>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/tavily-api-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx
similarity index 98%
rename from surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/tavily-api-connect-form.tsx
rename to surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx
index ddccbf8c8..4ce3a751d 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/tavily-api-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx
@@ -18,7 +18,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { EnumConnectorName } from "@/contracts/enums/connector";
-import type { ConnectFormProps } from "./index";
+import type { ConnectFormProps } from "../index";
 
 const tavilyApiFormSchema = z.object({
 	name: z.string().min(3, {
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
similarity index 80%
rename from surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/index.tsx
rename to surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
index fd0c4eced..4e48d7159 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/connect-forms/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
@@ -1,5 +1,6 @@
 import type { FC } from "react";
-import { TavilyApiConnectForm } from "./tavily-api-connect-form";
+import { LinearConnectForm } from "./components/linear-connect-form";
+import { TavilyApiConnectForm } from "./components/tavily-api-connect-form";
 
 export interface ConnectFormProps {
 	onSubmit: (data: {
@@ -28,6 +29,8 @@ export function getConnectFormComponent(
 	switch (connectorType) {
 		case "TAVILY_API":
 			return TavilyApiConnectForm;
+		case "LINEAR_CONNECTOR":
+			return LinearConnectForm;
 		// Add other connector types here as needed
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linear-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linear-config.tsx
new file mode 100644
index 000000000..db08f12ff
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linear-config.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface LinearConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const LinearConfig: FC<LinearConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [apiKey, setApiKey] = useState<string>(
+		(connector.config?.LINEAR_API_KEY as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update API key and name when connector changes
+	useEffect(() => {
+		const key = (connector.config?.LINEAR_API_KEY as string) || "";
+		setApiKey(key);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleApiKeyChange = (value: string) => {
+		setApiKey(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				LINEAR_API_KEY: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Linear Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="flex items-center gap-2 text-xs sm:text-sm">
+						<KeyRound className="h-4 w-4" />
+						Linear API Key
+					</Label>
+					<Input
+						type="password"
+						value={apiKey}
+						onChange={(e) => handleApiKeyChange(e.target.value)}
+						placeholder="Begins with lin_api_..."
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update your Linear API Key if needed.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
index 78efb60a9..199d191ea 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -3,6 +3,7 @@
 import type { FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { GoogleDriveConfig } from "./components/google-drive-config";
+import { LinearConfig } from "./components/linear-config";
 import { TavilyApiConfig } from "./components/tavily-api-config";
 import { WebcrawlerConfig } from "./components/webcrawler-config";
 import { YouTubeConfig } from "./components/youtube-config";
@@ -26,6 +27,8 @@ export function getConnectorConfigComponent(
 			return GoogleDriveConfig;
 		case "TAVILY_API":
 			return TavilyApiConfig;
+		case "LINEAR_CONNECTOR":
+			return LinearConfig;
 		case "WEBCRAWLER_CONNECTOR":
 			return WebcrawlerConfig;
 		case "YOUTUBE_CONNECTOR":
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
index 9499606c9..664425010 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { EnumConnectorName } from "@/contracts/enums/connector";
 import { getConnectorTypeDisplay } from "@/lib/connectors/utils";
-import { getConnectFormComponent } from "../connect-forms";
+import { getConnectFormComponent } from "../../connect-forms";
 
 interface ConnectorConnectViewProps {
 	connectorType: string;
@@ -41,9 +41,17 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 		if (isSubmitting) {
 			return;
 		}
-		const form = document.getElementById("tavily-connect-form") as HTMLFormElement;
-		if (form) {
-			form.requestSubmit();
+		// Map connector types to their form IDs
+		const formIdMap: Record<string, string> = {
+			TAVILY_API: "tavily-connect-form",
+			LINEAR_CONNECTOR: "linear-connect-form",
+		};
+		const formId = formIdMap[connectorType];
+		if (formId) {
+			const form = document.getElementById(formId) as HTMLFormElement;
+			if (form) {
+				form.requestSubmit();
+			}
 		}
 	};
 
@@ -79,7 +87,7 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 					</div>
 					<div>
 						<h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
-							Connect {connectorType === "TAVILY_API" ? "Tavily API" : connectorType}
+							Connect {getConnectorTypeDisplay(connectorType)}
 						</h2>
 						<p className="text-xs sm:text-base text-muted-foreground mt-1">
 							Enter your connection details
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 76380e74b..3928b2266 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -104,11 +104,12 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 							const isWebcrawler = connector.id === "webcrawler-connector";
 							const isYouTube = connector.id === "youtube-connector";
 							const isTavily = connector.id === "tavily-api";
+							const isLinear = connector.id === "linear-connector";
 							const handleConnect = isWebcrawler && onCreateWebcrawler
 								? onCreateWebcrawler
 								: isYouTube && onCreateYouTube
 								? onCreateYouTube
-								: isTavily && onConnectNonOAuth
+								: (isTavily || isLinear) && onConnectNonOAuth
 								? () => onConnectNonOAuth(connector.connectorType)
 								: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);
 

From 95f95558dc2153c5428f6c0f731f318cad292611 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 14:04:29 +0530
Subject: [PATCH 13/28] feat: Remove YouTube connector support and add Linear
 connector benefits functionality, enhance Linear connect form with benefits
 display and accordion documentation section.

---
 .../assistant-ui/connector-popup.tsx          |   2 -
 .../components/linear-connect-form.tsx        | 149 +++++++++++++++++-
 .../connect-forms/connector-benefits.ts       |  21 +++
 .../components/youtube-config.tsx             | 148 -----------------
 .../connector-configs/index.tsx               |   3 -
 .../views/connector-edit-view.tsx             |  28 ++--
 .../views/indexing-configuration-view.tsx     |  28 ++--
 .../constants/connector-constants.ts          |   6 -
 .../hooks/use-connector-dialog.ts             |  63 +-------
 .../tabs/all-connectors-tab.tsx               |  15 +-
 10 files changed, 208 insertions(+), 255 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
 delete mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/youtube-config.tsx

diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index 26a0836c8..f51a80f98 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -75,7 +75,6 @@ export const ConnectorIndicator: FC = () => {
 		handleConnectOAuth,
 		handleConnectNonOAuth,
 		handleCreateWebcrawler,
-		handleCreateYouTube,
 		handleSubmitConnectForm,
 		handleStartIndexing,
 		handleSkipIndexing,
@@ -272,7 +271,6 @@ export const ConnectorIndicator: FC = () => {
 										onConnectOAuth={handleConnectOAuth}
 										onConnectNonOAuth={handleConnectNonOAuth}
 										onCreateWebcrawler={handleCreateWebcrawler}
-										onCreateYouTube={handleCreateYouTube}
 										onManage={handleStartEdit}
 									/>
 									</TabsContent>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
index a87591ee1..3e1bb370a 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
@@ -6,6 +6,12 @@ import type { FC } from "react";
 import { useRef } from "react";
 import { useForm } from "react-hook-form";
 import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import {
 	Form,
@@ -19,6 +25,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { EnumConnectorName } from "@/contracts/enums/connector";
 import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
 
 const linearConnectorFormSchema = z.object({
 	name: z.string().min(3, {
@@ -106,7 +113,7 @@ export const LinearConnectForm: FC<ConnectFormProps> = ({
 									<FormControl>
 										<Input 
 											placeholder="My Linear Connector" 
-											className="border-slate-400/20 focus-visible:border-slate-400/40" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
 											disabled={isSubmitting}
 											{...field} 
 										/>
@@ -129,7 +136,7 @@ export const LinearConnectForm: FC<ConnectFormProps> = ({
 										<Input 
 											type="password" 
 											placeholder="lin_api_..." 
-											className="border-slate-400/20 focus-visible:border-slate-400/40"
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
 											disabled={isSubmitting}
 											{...field} 
 										/>
@@ -144,6 +151,144 @@ export const LinearConnectForm: FC<ConnectFormProps> = ({
 					</form>
 				</Form>
 			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.LINEAR_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Linear integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.LINEAR_CONNECTOR)?.map((benefit, i) => (
+							<li key={i}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The Linear connector uses the Linear GraphQL API to fetch all issues and
+								comments that the API key has access to within a workspace.
+							</p>
+							<ul className="mt-2 list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+								<li>
+									For follow up indexing runs, the connector retrieves issues and comments that
+									have been updated since the last indexing attempt.
+								</li>
+								<li>
+									Indexing is configured to run periodically, so updates should appear in your
+									search results within minutes.
+								</li>
+							</ul>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Authorization</h3>
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mb-4">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">Read-Only Access is Sufficient</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										You only need a read-only API key for this connector to work. This limits
+										the permissions to just reading your Linear data.
+									</AlertDescription>
+								</Alert>
+
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Create an API key</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Log in to your Linear account</li>
+											<li>
+												Navigate to{" "}
+												<a
+													href="https://linear.app/settings/api"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="font-medium underline underline-offset-4"
+												>
+													https://linear.app/settings/api
+												</a>{" "}
+												in your browser.
+											</li>
+											<li>Alternatively, click on your profile picture → Settings → API</li>
+											<li>
+												Click the <strong>+ New API key</strong> button.
+											</li>
+											<li>Enter a description for your key (like "Search Connector").</li>
+											<li>Select "Read-only" as the permission.</li>
+											<li>
+												Click <strong>Create</strong> to generate the API key.
+											</li>
+											<li>
+												Copy the generated API key that starts with 'lin_api_' as it will only
+												be shown once.
+											</li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Grant necessary access</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-3">
+											The API key will have access to all issues and comments that your user
+											account can see. If you're creating the key as an admin, it will have
+											access to all issues in the workspace.
+										</p>
+										<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+											<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+											<AlertTitle className="text-[10px] sm:text-xs">Data Privacy</AlertTitle>
+											<AlertDescription className="text-[9px] sm:text-[10px]">
+												Only issues and comments will be indexed. Linear attachments and
+												linked files are not indexed by this connector.
+											</AlertDescription>
+										</Alert>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Indexing</h3>
+								<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+									<li>
+										Navigate to the Connector Dashboard and select the <strong>Linear</strong>{" "}
+										Connector.
+									</li>
+									<li>
+										Place the <strong>API Key</strong> in the form field.
+									</li>
+									<li>
+										Click <strong>Connect</strong> to establish the connection.
+									</li>
+									<li>Once connected, your Linear issues will be indexed automatically.</li>
+								</ol>
+
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">What Gets Indexed</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										<p className="mb-2">The Linear connector indexes the following data:</p>
+										<ul className="list-disc pl-5 space-y-1">
+											<li>Issue titles and identifiers (e.g., PROJ-123)</li>
+											<li>Issue descriptions</li>
+											<li>Issue comments</li>
+											<li>Issue status and metadata</li>
+										</ul>
+									</AlertDescription>
+								</Alert>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
 		</div>
 	);
 };
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
new file mode 100644
index 000000000..3851a2692
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
@@ -0,0 +1,21 @@
+/**
+ * Helper function to get connector-specific benefits list
+ * Returns null if no benefits are defined for the connector
+ */
+export function getConnectorBenefits(connectorType: string): string[] | null {
+	const benefits: Record<string, string[]> = {
+		LINEAR_CONNECTOR: [
+			"Search through all your Linear issues and comments",
+			"Access issue titles, descriptions, and full discussion threads",
+			"Connect your team's project management directly to your search space",
+			"Keep your search results up-to-date with latest Linear content",
+			"Index your Linear issues for enhanced search capabilities",
+		],
+		// Add other connectors as needed
+		// TAVILY_API: [...],
+		// GITHUB_CONNECTOR: [...],
+	};
+
+	return benefits[connectorType] || null;
+}
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/youtube-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/youtube-config.tsx
deleted file mode 100644
index 5fe7f0c48..000000000
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/youtube-config.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-"use client";
-
-import { IconBrandYoutube } from "@tabler/icons-react";
-import { Info } from "lucide-react";
-import { TagInput, type Tag as TagType } from "emblor";
-import { useState, useEffect } from "react";
-import type { FC } from "react";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Label } from "@/components/ui/label";
-import { toast } from "sonner";
-import type { ConnectorConfigProps } from "../index";
-
-const youtubeRegex =
-	/^(https:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})$/;
-
-export const YouTubeConfig: FC<ConnectorConfigProps> = ({
-	connector,
-	onConfigChange,
-}) => {
-	// Initialize with existing YouTube URLs from connector config
-	const existingUrls = (connector.config?.youtube_urls as string[] | undefined) || [];
-	const [youtubeTags, setYoutubeTags] = useState<TagType[]>(
-		existingUrls.map((url) => ({
-			id: url,
-			text: url,
-		}))
-	);
-	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
-
-	// Update YouTube tags when connector config changes
-	useEffect(() => {
-		const urls = (connector.config?.youtube_urls as string[] | undefined) || [];
-		setYoutubeTags(
-			urls.map((url) => ({
-				id: url,
-				text: url,
-			}))
-		);
-	}, [connector.config]);
-
-	const isValidYoutubeUrl = (url: string): boolean => {
-		return youtubeRegex.test(url);
-	};
-
-	const handleTagsChange = (tags: TagType[]) => {
-		setYoutubeTags(tags);
-		if (onConfigChange) {
-			// Extract URLs from tags and validate
-			const urls = tags.map((tag) => tag.text).filter(isValidYoutubeUrl);
-			onConfigChange({
-				...connector.config,
-				youtube_urls: urls,
-			});
-		}
-	};
-
-	const handleAddTag = (text: string) => {
-		if (!isValidYoutubeUrl(text)) {
-			toast("Invalid YouTube URL", {
-				description: "Please enter a valid YouTube video URL (youtube.com/watch?v= or youtu.be/)",
-			});
-			return;
-		}
-
-		if (youtubeTags.some((tag) => tag.text === text)) {
-			toast("Duplicate URL", {
-				description: "This YouTube video has already been added",
-			});
-			return;
-		}
-
-		const newTag: TagType = {
-			id: Date.now().toString(),
-			text: text,
-		};
-
-		handleTagsChange([...youtubeTags, newTag]);
-	};
-
-	return (
-		<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">
-			<div className="space-y-1 sm:space-y-2">
-				<h3 className="font-medium text-sm sm:text-base flex items-center gap-2">
-					<IconBrandYoutube className="h-4 w-4" />
-					YouTube Video URLs
-				</h3>
-				<p className="text-xs sm:text-sm text-muted-foreground">
-					Add YouTube video URLs to index. Enter a URL and press Enter to add multiple videos.
-				</p>
-			</div>
-
-			<div className="space-y-2">
-				<Label htmlFor="youtube-urls" className="text-xs sm:text-sm">
-					Enter YouTube Video URLs
-				</Label>
-				<TagInput
-					id="youtube-urls"
-					tags={youtubeTags}
-					setTags={handleTagsChange}
-					placeholder="Enter a YouTube URL and press Enter"
-					onAddTag={handleAddTag}
-					styleClasses={{
-						inlineTagsContainer:
-							"border-input rounded-lg bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 p-1 gap-1",
-						input: "w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7 text-xs sm:text-sm",
-						tag: {
-							body: "h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7 flex",
-							closeButton:
-								"absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-muted-foreground/80 hover:text-foreground",
-						},
-					}}
-					activeTagIndex={activeTagIndex}
-					setActiveTagIndex={setActiveTagIndex}
-				/>
-				<p className="text-[10px] sm:text-xs text-muted-foreground">
-					Add multiple YouTube URLs by pressing Enter after each one
-				</p>
-			</div>
-
-			{youtubeTags.length > 0 && (
-				<div className="p-2 sm:p-3 bg-muted rounded-lg text-xs sm:text-sm space-y-1 sm:space-y-2">
-					<p className="font-medium">
-						{youtubeTags.length} video{youtubeTags.length > 1 ? "s" : ""} added
-					</p>
-				</div>
-			)}
-
-			<div className="bg-muted/50 rounded-lg p-3 sm:p-4 text-xs sm:text-sm">
-				<h4 className="font-medium mb-2">Tips for adding YouTube videos:</h4>
-				<ul className="list-disc pl-5 space-y-1 text-muted-foreground">
-					<li>Use standard YouTube URLs (youtube.com/watch?v= or youtu.be/)</li>
-					<li>Make sure videos are publicly accessible</li>
-					<li>Supported formats: youtube.com/watch?v=VIDEO_ID or youtu.be/VIDEO_ID</li>
-					<li>Processing may take some time depending on video length</li>
-				</ul>
-			</div>
-
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 flex items-center gap-2 [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
-				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0" />
-				<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-					YouTube URLs are used when indexing. You can change this selection when you start indexing.
-				</AlertDescription>
-			</Alert>
-		</div>
-	);
-};
-
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
index 199d191ea..71c549403 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -6,7 +6,6 @@ import { GoogleDriveConfig } from "./components/google-drive-config";
 import { LinearConfig } from "./components/linear-config";
 import { TavilyApiConfig } from "./components/tavily-api-config";
 import { WebcrawlerConfig } from "./components/webcrawler-config";
-import { YouTubeConfig } from "./components/youtube-config";
 
 export interface ConnectorConfigProps {
 	connector: SearchSourceConnector;
@@ -31,8 +30,6 @@ export function getConnectorConfigComponent(
 			return LinearConfig;
 		case "WEBCRAWLER_CONNECTOR":
 			return WebcrawlerConfig;
-		case "YOUTUBE_CONNECTOR":
-			return YouTubeConfig;
 		// OAuth connectors (Gmail, Calendar, Airtable) and others don't need special config UI
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
index 290b08825..5fda12a7a 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx
@@ -155,8 +155,8 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 						{/* Date range selector and periodic sync - only shown for indexable connectors */}
 						{connector.is_indexable && (
 							<>
-								{/* Date range selector - not shown for Google Drive (uses folder selection), Webcrawler (uses config), or YouTube (uses URL selection) */}
-								{connector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && connector.connector_type !== "WEBCRAWLER_CONNECTOR" && connector.connector_type !== "YOUTUBE_CONNECTOR" && (
+								{/* Date range selector - not shown for Google Drive (uses folder selection) or Webcrawler (uses config) */}
+								{connector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && connector.connector_type !== "WEBCRAWLER_CONNECTOR" && (
 									<DateRangeSelector
 										startDate={startDate}
 										endDate={endDate}
@@ -174,18 +174,20 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 							</>
 						)}
 
-						{/* Info box */}
-						<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
-							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
-								<Info className="size-4" />
+						{/* Info box - only shown for indexable connectors */}
+						{connector.is_indexable && (
+							<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
+								<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
+									<Info className="size-4" />
+								</div>
+								<div className="text-xs sm:text-sm">
+									<p className="font-medium text-xs sm:text-sm">Re-indexing runs in the background</p>
+									<p className="text-muted-foreground mt-1 text-[10px] sm:text-sm">
+										You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
+									</p>
+								</div>
 							</div>
-							<div className="text-xs sm:text-sm">
-								<p className="font-medium text-xs sm:text-sm">Re-indexing runs in the background</p>
-								<p className="text-muted-foreground mt-1 text-[10px] sm:text-sm">
-									You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
-								</p>
-							</div>
-						</div>
+						)}
 					</div>
 				</div>
 				{/* Top fade shadow - appears when scrolled */}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
index 1b49b2046..2a82b1b75 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx
@@ -136,8 +136,8 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 						{/* Date range selector and periodic sync - only shown for indexable connectors */}
 						{connector?.is_indexable && (
 							<>
-								{/* Date range selector - not shown for Google Drive (uses folder selection), Webcrawler (uses config), or YouTube (uses URL selection) */}
-								{config.connectorType !== "GOOGLE_DRIVE_CONNECTOR" && config.connectorType !== "WEBCRAWLER_CONNECTOR" && config.connectorType !== "YOUTUBE_CONNECTOR" && (
+								{/* Date range selector - not shown for Google Drive (uses folder selection) or Webcrawler (uses config) */}
+								{config.connectorType !== "GOOGLE_DRIVE_CONNECTOR" && config.connectorType !== "WEBCRAWLER_CONNECTOR" && (
 									<DateRangeSelector
 										startDate={startDate}
 										endDate={endDate}
@@ -155,18 +155,20 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 							</>
 						)}
 
-						{/* Info box */}
-						<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
-							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
-								<Info className="size-4" />
+						{/* Info box - only shown for indexable connectors */}
+						{connector?.is_indexable && (
+							<div className="rounded-xl border border-border bg-primary/5 p-4 flex items-start gap-3">
+								<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 shrink-0 mt-0.5">
+									<Info className="size-4" />
+								</div>
+								<div className="text-xs sm:text-sm">
+									<p className="font-medium text-xs sm:text-sm">Indexing runs in the background</p>
+									<p className="text-muted-foreground mt-1 text-[10px] sm:text-sm">
+										You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
+									</p>
+								</div>
 							</div>
-							<div className="text-xs sm:text-sm">
-								<p className="font-medium text-xs sm:text-sm">Indexing runs in the background</p>
-								<p className="text-muted-foreground mt-1 text-[10px] sm:text-sm">
-									You can continue using SurfSense while we sync your data. Check the Active tab to see progress.
-								</p>
-							</div>
-						</div>
+						)}
 					</div>
 				</div>
 				{/* Top fade shadow - appears when scrolled */}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
index c233b9f29..189b5cc5c 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
@@ -106,12 +106,6 @@ export const OTHER_CONNECTORS = [
 		description: "Crawl web content",
 		connectorType: EnumConnectorName.WEBCRAWLER_CONNECTOR,
 	},
-	{
-		id: "youtube-connector",
-		title: "YouTube",
-		description: "Index YouTube videos",
-		connectorType: EnumConnectorName.YOUTUBE_CONNECTOR,
-	},
 	{
 		id: "tavily-api",
 		title: "Tavily AI",
diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
index c3dbf1b4c..905e7cf32 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@@ -325,61 +325,6 @@ export const useConnectorDialog = () => {
 		}
 	}, [searchSpaceId, createConnector, refetchAllConnectors]);
 
-	// Handle creating YouTube connector
-	const handleCreateYouTube = useCallback(async () => {
-		if (!searchSpaceId) return;
-
-		setConnectingId("youtube-connector");
-		try {
-			const newConnector = await createConnector({
-				data: {
-					name: "YouTube",
-					connector_type: EnumConnectorName.YOUTUBE_CONNECTOR,
-					config: { youtube_urls: [] },
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			// Refetch connectors to get the new one
-			const result = await refetchAllConnectors();
-			if (result.data) {
-				const connector = result.data.find(
-					(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.YOUTUBE_CONNECTOR
-				);
-				if (connector) {
-					const connectorValidation = searchSourceConnector.safeParse(connector);
-					if (connectorValidation.success) {
-						const config = validateIndexingConfigState({
-							connectorType: EnumConnectorName.YOUTUBE_CONNECTOR,
-							connectorId: connector.id,
-							connectorTitle: "YouTube",
-						});
-						setIndexingConfig(config);
-						setIndexingConnector(connector);
-						setIndexingConnectorConfig(connector.config || { youtube_urls: [] });
-						setIsOpen(true);
-						const url = new URL(window.location.href);
-						url.searchParams.set("modal", "connectors");
-						url.searchParams.set("view", "configure");
-						window.history.pushState({ modal: true }, "", url.toString());
-					}
-				}
-			}
-		} catch (error) {
-			console.error("Error creating YouTube connector:", error);
-			toast.error("Failed to create YouTube connector");
-		} finally {
-			setConnectingId(null);
-		}
-	}, [searchSpaceId, createConnector, refetchAllConnectors]);
-
 	// Handle connecting non-OAuth connectors (like Tavily API)
 	const handleConnectNonOAuth = useCallback((connectorType: string) => {
 		if (!searchSpaceId) return;
@@ -616,12 +561,13 @@ export const useConnectorDialog = () => {
 			(oauthConnector) => oauthConnector.connectorType === connector.connector_type
 		);
 		
-		// Check if this is webcrawler or Tavily API (can be managed in popup)
+		// Check if this is webcrawler, Tavily API, or Linear (can be managed in popup)
 		const isWebcrawler = connector.connector_type === EnumConnectorName.WEBCRAWLER_CONNECTOR;
 		const isTavilyApi = connector.connector_type === EnumConnectorName.TAVILY_API;
+		const isLinear = connector.connector_type === EnumConnectorName.LINEAR_CONNECTOR;
 		
-		// If not OAuth, not webcrawler, and not Tavily API, redirect to old connector edit page
-		if (!isOAuthConnector && !isWebcrawler && !isTavilyApi) {
+		// If not OAuth, not webcrawler, not Tavily API, and not Linear, redirect to old connector edit page
+		if (!isOAuthConnector && !isWebcrawler && !isTavilyApi && !isLinear) {
 			router.push(`/dashboard/${searchSpaceId}/connectors/${connector.id}/edit`);
 			return;
 		}
@@ -898,7 +844,6 @@ export const useConnectorDialog = () => {
 		handleConnectOAuth,
 		handleConnectNonOAuth,
 		handleCreateWebcrawler,
-		handleCreateYouTube,
 		handleSubmitConnectForm,
 		handleStartIndexing,
 		handleSkipIndexing,
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 3928b2266..ef74c1269 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -15,7 +15,6 @@ interface AllConnectorsTabProps {
 	onConnectOAuth: (connector: (typeof OAUTH_CONNECTORS)[0]) => void;
 	onConnectNonOAuth?: (connectorType: string) => void;
 	onCreateWebcrawler?: () => void;
-	onCreateYouTube?: () => void;
 	onManage?: (connector: SearchSourceConnector) => void;
 }
 
@@ -28,7 +27,6 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 	onConnectOAuth,
 	onConnectNonOAuth,
 	onCreateWebcrawler,
-	onCreateYouTube,
 	onManage,
 }) => {
 	const router = useRouter();
@@ -93,22 +91,21 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 					</div>
 					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
 						{filteredOther.map((connector) => {
+							// Special handling for connectors that can be created in popup
+							const isWebcrawler = connector.id === "webcrawler-connector";
+							const isTavily = connector.id === "tavily-api";
+							const isLinear = connector.id === "linear-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;
 
-							// Special handling for connectors that can be created in popup
-							const isWebcrawler = connector.id === "webcrawler-connector";
-							const isYouTube = connector.id === "youtube-connector";
-							const isTavily = connector.id === "tavily-api";
-							const isLinear = connector.id === "linear-connector";
 							const handleConnect = isWebcrawler && onCreateWebcrawler
 								? onCreateWebcrawler
-								: isYouTube && onCreateYouTube
-								? onCreateYouTube
 								: (isTavily || isLinear) && onConnectNonOAuth
 								? () => onConnectNonOAuth(connector.connectorType)
 								: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);

From 36d25e9505f27a471078c665bb51d604f185881f Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 15:29:33 +0530
Subject: [PATCH 14/28] feat: Add Elasticsearch connector support with
 configuration forms, enhance connector dialog for indexing settings, and
 implement date range selection for periodic sync.

---
 .../components/assistant-ui/attachment.tsx    |  77 +-
 .../components/date-range-selector.tsx        |   4 +-
 .../components/periodic-sync-config.tsx       |   4 +-
 .../components/elasticsearch-connect-form.tsx | 791 ++++++++++++++++++
 .../components/linear-connect-form.tsx        |  73 +-
 .../components/tavily-api-connect-form.tsx    |  13 +
 .../connect-forms/connector-benefits.ts       |  13 +-
 .../connector-popup/connect-forms/index.tsx   |   9 +-
 .../components/elasticsearch-config.tsx       | 438 ++++++++++
 .../connector-configs/index.tsx               |   3 +
 .../views/connector-connect-view.tsx          |   1 +
 .../hooks/use-connector-dialog.ts             | 127 ++-
 .../tabs/active-connectors-tab.tsx            |   9 +-
 .../tabs/all-connectors-tab.tsx               |   3 +-
 14 files changed, 1521 insertions(+), 44 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/elasticsearch-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/elasticsearch-config.tsx

diff --git a/surfsense_web/components/assistant-ui/attachment.tsx b/surfsense_web/components/assistant-ui/attachment.tsx
index 7fce93321..2400f3966 100644
--- a/surfsense_web/components/assistant-ui/attachment.tsx
+++ b/surfsense_web/components/assistant-ui/attachment.tsx
@@ -7,12 +7,19 @@ import {
 	useAssistantApi,
 	useAssistantState,
 } from "@assistant-ui/react";
-import { FileText, Loader2, PlusIcon, XIcon } from "lucide-react";
+import { FileText, Loader2, Paperclip, PlusIcon, Upload, XIcon } from "lucide-react";
 import Image from "next/image";
-import { type FC, type PropsWithChildren, useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { type FC, type PropsWithChildren, useRef, useEffect, useState } from "react";
 import { useShallow } from "zustand/shallow";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
@@ -184,18 +191,18 @@ const AttachmentUI: FC = () => {
 			>
 				<AttachmentPreviewDialog>
 					<TooltipTrigger asChild>
-						<div
+						<button
+							type="button"
 							className={cn(
 								"aui-attachment-tile size-14 cursor-pointer overflow-hidden rounded-[14px] border bg-muted transition-opacity hover:opacity-75",
 								isComposer && "aui-attachment-tile-composer border-foreground/20",
 								isProcessing && "animate-pulse"
 							)}
-							role="button"
 							id="attachment-tile"
 							aria-label={isProcessing ? "Processing attachment..." : `${typeLabel} attachment`}
 						>
 							<AttachmentThumb />
-						</div>
+						</button>
 					</TooltipTrigger>
 				</AttachmentPreviewDialog>
 				{isComposer && !isProcessing && <AttachmentRemove />}
@@ -312,18 +319,54 @@ export const ComposerAttachments: FC = () => {
 };
 
 export const ComposerAddAttachment: FC = () => {
+	const router = useRouter();
+	const params = useParams();
+	const searchSpaceId = params.search_space_id as string;
+	const chatAttachmentInputRef = useRef<HTMLInputElement>(null);
+
+	const handleFileUpload = () => {
+		router.push(`/dashboard/${searchSpaceId}/sources/add?tab=documents`);
+	};
+
+	const handleChatAttachment = () => {
+		chatAttachmentInputRef.current?.click();
+	};
+
 	return (
-		<ComposerPrimitive.AddAttachment asChild>
-			<TooltipIconButton
-				tooltip="Add Attachment"
-				side="bottom"
-				variant="ghost"
-				size="icon"
-				className="aui-composer-add-attachment size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
-				aria-label="Add Attachment"
-			>
-				<PlusIcon className="aui-attachment-add-icon size-5 stroke-[1.5px]" />
-			</TooltipIconButton>
-		</ComposerPrimitive.AddAttachment>
+		<>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<TooltipIconButton
+						tooltip="Upload documents or add attachment"
+						side="bottom"
+						variant="ghost"
+						size="icon"
+						className="aui-composer-add-attachment size-[34px] rounded-full p-1 font-semibold text-xs hover:bg-muted-foreground/15 dark:border-muted-foreground/15 dark:hover:bg-muted-foreground/30"
+						aria-label="Upload documents or add attachment"
+					>
+						<PlusIcon className="aui-attachment-add-icon size-5 stroke-[1.5px]" />
+					</TooltipIconButton>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start" className="w-48 bg-background border-border">
+					<DropdownMenuItem onSelect={handleChatAttachment} className="cursor-pointer">
+						<Paperclip className="size-4" />
+						<span>Add attachment(s)</span>
+					</DropdownMenuItem>
+					<DropdownMenuItem onClick={handleFileUpload} className="cursor-pointer">
+						<Upload className="size-4" />
+						<span>File upload</span>
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<ComposerPrimitive.AddAttachment asChild>
+				<input
+					ref={chatAttachmentInputRef}
+					type="file"
+					multiple
+					className="hidden"
+					accept="image/*,application/pdf,.doc,.docx,.txt"
+				/>
+			</ComposerPrimitive.AddAttachment>
+		</>
 	);
 };
diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx
index 5c7870639..9c84e7f03 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/date-range-selector.tsx
@@ -40,8 +40,8 @@ export const DateRangeSelector: FC<DateRangeSelectorProps> = ({
 	};
 
 	return (
-		<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
-			<h3 className="font-medium text-xs sm:text-base mb-4">Select Date Range</h3>
+		<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+			<h3 className="font-medium text-sm sm:text-base mb-4">Select Date Range</h3>
 			<p className="text-xs sm:text-sm text-muted-foreground mb-6">
 				Choose how far back you want to sync your data. You can always re-index later with different dates.
 			</p>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/periodic-sync-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/periodic-sync-config.tsx
index f8b869a67..1d22e6890 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/periodic-sync-config.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/periodic-sync-config.tsx
@@ -25,10 +25,10 @@ export const PeriodicSyncConfig: FC<PeriodicSyncConfigProps> = ({
 	onFrequencyChange,
 }) => {
 	return (
-		<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+		<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
 			<div className="flex items-center justify-between">
 				<div className="space-y-1">
-					<h3 className="font-medium text-xs sm:text-base">Enable Periodic Sync</h3>
+					<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
 					<p className="text-xs sm:text-sm text-muted-foreground">
 						Automatically re-index at regular intervals
 					</p>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/elasticsearch-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/elasticsearch-connect-form.tsx
new file mode 100644
index 000000000..5420d3bb1
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/elasticsearch-connect-form.tsx
@@ -0,0 +1,791 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useId, useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { useState } from "react";
+
+const elasticsearchConnectorFormSchema = z
+	.object({
+		name: z.string().min(3, {
+			message: "Connector name must be at least 3 characters.",
+		}),
+		endpoint_url: z.string().url({ message: "Please enter a valid Elasticsearch endpoint URL." }),
+		auth_method: z.enum(["basic", "api_key"]),
+		username: z.string().optional(),
+		password: z.string().optional(),
+		ELASTICSEARCH_API_KEY: z.string().optional(),
+		indices: z.string().optional(),
+		query: z.string(),
+		search_fields: z.string().optional(),
+		max_documents: z.number().min(1).max(10000).optional(),
+	})
+	.refine(
+		(data) => {
+			if (data.auth_method === "basic") {
+				return Boolean(data.username?.trim() && data.password?.trim());
+			}
+			if (data.auth_method === "api_key") {
+				return Boolean(data.ELASTICSEARCH_API_KEY?.trim());
+			}
+			return true;
+		},
+		{
+			message: "Authentication credentials are required for the selected method.",
+			path: ["auth_method"],
+		}
+	);
+
+type ElasticsearchConnectorFormValues = z.infer<typeof elasticsearchConnectorFormSchema>;
+
+export const ElasticsearchConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const authBasicId = useId();
+	const authApiKeyId = useId();
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+
+	const form = useForm<ElasticsearchConnectorFormValues>({
+		resolver: zodResolver(elasticsearchConnectorFormSchema),
+		defaultValues: {
+			name: "Elasticsearch Connector",
+			endpoint_url: "",
+			auth_method: "api_key",
+			username: "",
+			password: "",
+			ELASTICSEARCH_API_KEY: "",
+			indices: "",
+			query: "*",
+			search_fields: "",
+			max_documents: undefined,
+		},
+	});
+
+	const stringToArray = (str: string): string[] => {
+		const items = str
+			.split(",")
+			.map((item) => item.trim())
+			.filter((item) => item.length > 0);
+		return Array.from(new Set(items));
+	};
+
+	const handleSubmit = async (values: ElasticsearchConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			// Send full URL to backend (backend expects ELASTICSEARCH_URL)
+			const config: Record<string, string | number | boolean | string[]> = {
+				ELASTICSEARCH_URL: values.endpoint_url,
+				// default to verifying certs; expose fields for CA/verify if UI added later
+				ELASTICSEARCH_VERIFY_CERTS: true,
+			};
+
+			if (values.auth_method === "basic") {
+				if (values.username) config.ELASTICSEARCH_USERNAME = values.username;
+				if (values.password) config.ELASTICSEARCH_PASSWORD = values.password;
+			} else if (values.auth_method === "api_key") {
+				if (values.ELASTICSEARCH_API_KEY)
+					config.ELASTICSEARCH_API_KEY = values.ELASTICSEARCH_API_KEY;
+			}
+
+			const indicesInput = values.indices?.trim() ?? "";
+			const indicesArr = stringToArray(indicesInput);
+			config.ELASTICSEARCH_INDEX =
+				indicesArr.length === 0 ? "*" : indicesArr.length === 1 ? indicesArr[0] : indicesArr;
+
+			if (values.query && values.query !== "*") {
+				config.ELASTICSEARCH_QUERY = values.query;
+			}
+
+			if (values.search_fields?.trim()) {
+				const fields = stringToArray(values.search_fields);
+				config.ELASTICSEARCH_FIELDS = fields;
+				config.ELASTICSEARCH_CONTENT_FIELDS = fields;
+				if (fields.includes("title")) {
+					config.ELASTICSEARCH_TITLE_FIELD = "title";
+				}
+			}
+
+			if (values.max_documents !== undefined && values.max_documents > 0) {
+				config.ELASTICSEARCH_MAX_DOCUMENTS = values.max_documents;
+			}
+
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.ELASTICSEARCH_CONNECTOR,
+				config,
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
+				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						Enter your Elasticsearch cluster endpoint URL and authentication credentials to connect.
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="elasticsearch-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Elasticsearch Connector" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Connection Details */}
+						<div className="space-y-4">
+							<h3 className="text-sm sm:text-base font-medium">Connection Details</h3>
+
+							<FormField
+								control={form.control}
+								name="endpoint_url"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel className="text-xs sm:text-sm">Elasticsearch Endpoint URL</FormLabel>
+										<FormControl>
+											<Input
+												type="url"
+												autoComplete="off"
+												placeholder="https://your-cluster.es.region.aws.com:443"
+												className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+												disabled={isSubmitting}
+												{...field}
+											/>
+										</FormControl>
+										<FormDescription className="text-[10px] sm:text-xs">
+											Enter the complete Elasticsearch endpoint URL. We'll automatically extract the hostname, port, and SSL settings.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							{/* Show parsed URL details */}
+							{form.watch("endpoint_url") && (
+								<div className="rounded-lg border border-border bg-muted/50 p-3">
+									<h4 className="text-[10px] sm:text-xs font-medium mb-2">Parsed Connection Details:</h4>
+									<div className="text-[10px] sm:text-xs text-muted-foreground space-y-1">
+										{(() => {
+											try {
+												const url = new URL(form.watch("endpoint_url"));
+												return (
+													<>
+														<div>
+															<strong>Hostname:</strong> {url.hostname}
+														</div>
+														<div>
+															<strong>Port:</strong>{" "}
+															{url.port || (url.protocol === "https:" ? "443" : "80")}
+														</div>
+														<div>
+															<strong>SSL/TLS:</strong>{" "}
+															{url.protocol === "https:" ? "Enabled" : "Disabled"}
+														</div>
+													</>
+												);
+											} catch {
+												return <div className="text-destructive">Invalid URL format</div>;
+											}
+										})()}
+									</div>
+								</div>
+							)}
+						</div>
+
+						{/* Authentication */}
+						<div className="space-y-4">
+							<h3 className="text-sm sm:text-base font-medium">Authentication</h3>
+
+							<FormField
+								control={form.control}
+								name="auth_method"
+								render={({ field }) => (
+									<FormItem className="space-y-3">
+										<FormControl>
+											<RadioGroup.Root
+												onValueChange={(value) => {
+													field.onChange(value);
+													// Clear auth fields when method changes
+													if (value !== "basic") {
+														form.setValue("username", "");
+														form.setValue("password", "");
+													}
+													if (value !== "api_key") {
+														form.setValue("ELASTICSEARCH_API_KEY", "");
+													}
+												}}
+												value={field.value}
+												className="flex flex-col space-y-2"
+											>
+												<div className="flex items-center space-x-2">
+													<RadioGroup.Item
+														value="api_key"
+														id={authApiKeyId}
+														className="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+													>
+														<RadioGroup.Indicator className="flex items-center justify-center">
+															<div className="h-2.5 w-2.5 rounded-full bg-current" />
+														</RadioGroup.Indicator>
+													</RadioGroup.Item>
+													<Label htmlFor={authApiKeyId} className="text-xs sm:text-sm">API Key</Label>
+												</div>
+
+												<div className="flex items-center space-x-2">
+													<RadioGroup.Item
+														value="basic"
+														id={authBasicId}
+														className="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+													>
+														<RadioGroup.Indicator className="flex items-center justify-center">
+															<div className="h-2.5 w-2.5 rounded-full bg-current" />
+														</RadioGroup.Indicator>
+													</RadioGroup.Item>
+													<Label htmlFor={authBasicId} className="text-xs sm:text-sm">Username & Password</Label>
+												</div>
+											</RadioGroup.Root>
+										</FormControl>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							{/* Basic Auth Fields */}
+							{form.watch("auth_method") === "basic" && (
+								<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+									<FormField
+										control={form.control}
+										name="username"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel className="text-xs sm:text-sm">Username</FormLabel>
+												<FormControl>
+													<Input 
+														placeholder="elastic" 
+														autoComplete="username" 
+														className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+														disabled={isSubmitting}
+														{...field} 
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={form.control}
+										name="password"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel className="text-xs sm:text-sm">Password</FormLabel>
+												<FormControl>
+													<Input
+														type="password"
+														placeholder="Password"
+														autoComplete="current-password"
+														className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+														disabled={isSubmitting}
+														{...field}
+													/>
+												</FormControl>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</div>
+							)}
+
+							{/* API Key Field */}
+							{form.watch("auth_method") === "api_key" && (
+								<FormField
+									control={form.control}
+									name="ELASTICSEARCH_API_KEY"
+									render={({ field }) => (
+										<FormItem>
+											<FormLabel className="text-xs sm:text-sm">API Key</FormLabel>
+											<FormControl>
+												<Input
+													type="password"
+													placeholder="Your API Key Here"
+													autoComplete="off"
+													className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+													disabled={isSubmitting}
+													{...field}
+												/>
+											</FormControl>
+											<FormDescription className="text-[10px] sm:text-xs">
+												Enter your Elasticsearch API key (base64 encoded). This will be stored securely.
+											</FormDescription>
+											<FormMessage />
+										</FormItem>
+									)}
+								/>
+							)}
+						</div>
+
+						{/* Index Selection */}
+						<FormField
+							control={form.control}
+							name="indices"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Index Selection</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="logs-*, documents-*, app-logs" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Comma-separated indices to search (e.g., "logs-*, documents-*").
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Show parsed indices as badges */}
+						{form.watch("indices")?.trim() && (
+							<div className="rounded-lg border border-border bg-muted/50 p-3">
+								<h4 className="text-[10px] sm:text-xs font-medium mb-2">Selected Indices:</h4>
+								<div className="flex flex-wrap gap-2">
+									{stringToArray(form.watch("indices") ?? "").map((index) => (
+										<Badge key={index} variant="secondary" className="text-[10px]">
+											{index}
+										</Badge>
+									))}
+								</div>
+							</div>
+						)}
+
+						<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+							<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+							<AlertTitle className="text-[10px] sm:text-xs">Index Selection Tips</AlertTitle>
+							<AlertDescription className="text-[9px] sm:text-[10px] mt-2">
+								<ul className="list-disc pl-4 space-y-1">
+									<li>Use wildcards like "logs-*" to match multiple indices</li>
+									<li>Separate multiple indices with commas</li>
+									<li>Leave empty to search all accessible indices including internal ones</li>
+									<li>Choosing specific indices improves search performance</li>
+								</ul>
+							</AlertDescription>
+						</Alert>
+
+						{/* Advanced Configuration */}
+						<Accordion type="single" collapsible className="w-full">
+							<AccordionItem value="advanced">
+								<AccordionTrigger className="text-xs sm:text-sm">Advanced Configuration</AccordionTrigger>
+								<AccordionContent className="space-y-4">
+									{/* Default Search Query */}
+									<FormField
+										control={form.control}
+										name="query"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel className="text-xs sm:text-sm">
+													Default Search Query{" "}
+													<span className="text-muted-foreground">(Optional)</span>
+												</FormLabel>
+												<FormControl>
+													<Input 
+														placeholder="*" 
+														className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+														disabled={isSubmitting}
+														{...field} 
+													/>
+												</FormControl>
+												<FormDescription className="text-[10px] sm:text-xs">
+													Default Elasticsearch query to use for searches. Use "*" to match all documents.
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									{/* Form Fields */}
+									<FormField
+										control={form.control}
+										name="search_fields"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel className="text-xs sm:text-sm">
+													Search Fields{" "}
+													<span className="text-muted-foreground">(Optional)</span>
+												</FormLabel>
+												<FormControl>
+													<Input 
+														placeholder="title, content, description" 
+														className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+														disabled={isSubmitting}
+														{...field} 
+													/>
+												</FormControl>
+												<FormDescription className="text-[10px] sm:text-xs">
+													Comma-separated list of specific fields to search in (e.g., "title, content, description"). Leave empty to search all fields.
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									{/* Show parsed search fields as badges */}
+									{form.watch("search_fields")?.trim() && (
+										<div className="rounded-lg border border-border bg-muted/50 p-3">
+											<h4 className="text-[10px] sm:text-xs font-medium mb-2">Search Fields:</h4>
+											<div className="flex flex-wrap gap-2">
+												{stringToArray(form.watch("search_fields") ?? "").map((field) => (
+													<Badge key={field} variant="outline" className="text-[10px]">
+														{field}
+													</Badge>
+												))}
+											</div>
+										</div>
+									)}
+
+									<FormField
+										control={form.control}
+										name="max_documents"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel className="text-xs sm:text-sm">
+													Maximum Documents{" "}
+													<span className="text-muted-foreground">(Optional)</span>
+												</FormLabel>
+												<FormControl>
+													<Input
+														type="number"
+														placeholder="1000"
+														min="1"
+														max="10000"
+														className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+														disabled={isSubmitting}
+														{...field}
+														onChange={(e) =>
+															field.onChange(
+																e.target.value === ""
+																	? undefined
+																	: parseInt(e.target.value, 10)
+															)
+														}
+													/>
+												</FormControl>
+												<FormDescription className="text-[10px] sm:text-xs">
+													Maximum number of documents to retrieve per search (1-10,000). Leave empty to use Elasticsearch's default limit.
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+								</AccordionContent>
+							</AccordionItem>
+						</Accordion>
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.ELASTICSEARCH_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Elasticsearch integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.ELASTICSEARCH_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The Elasticsearch connector allows you to search and retrieve documents from your Elasticsearch cluster. Configure connection details, select specific indices, and set search parameters to make your existing data searchable within SurfSense.
+							</p>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Connection Setup</h3>
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Get your Elasticsearch endpoint</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-3">
+											You'll need the endpoint URL for your Elasticsearch cluster. This typically looks like:
+										</p>
+										<ul className="list-disc pl-5 space-y-1 text-[10px] sm:text-xs text-muted-foreground mb-4">
+											<li>Cloud: <code className="bg-muted px-1 py-0.5 rounded">https://your-cluster.es.region.aws.com:443</code></li>
+											<li>Self-hosted: <code className="bg-muted px-1 py-0.5 rounded">https://elasticsearch.example.com:9200</code></li>
+										</ul>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Configure authentication</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-3">
+											Elasticsearch requires authentication. You can use either:
+										</p>
+										<ul className="list-disc pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+											<li>
+												<strong>API Key:</strong> A base64-encoded API key. You can create one in Elasticsearch by running:
+												<pre className="bg-muted p-2 rounded mt-1 text-[9px] overflow-x-auto">
+													<code>POST /_security/api_key</code>
+												</pre>
+											</li>
+											<li>
+												<strong>Username & Password:</strong> Basic authentication using your Elasticsearch username and password.
+											</li>
+										</ul>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 3: Select indices</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-3">
+											Specify which indices to search. You can:
+										</p>
+										<ul className="list-disc pl-5 space-y-1 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Use wildcards: <code className="bg-muted px-1 py-0.5 rounded">logs-*</code> to match multiple indices</li>
+											<li>List specific indices: <code className="bg-muted px-1 py-0.5 rounded">logs-2024, documents-2024</code></li>
+											<li>Leave empty to search all accessible indices (not recommended for performance)</li>
+										</ul>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Advanced Configuration</h3>
+								<div className="space-y-4">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Search Query</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-2">
+											The default query used for searches. Use <code className="bg-muted px-1 py-0.5 rounded">*</code> to match all documents, or specify a more complex Elasticsearch query.
+										</p>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Search Fields</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-2">
+											Limit searches to specific fields for better performance. Common fields include:
+										</p>
+										<ul className="list-disc pl-5 space-y-1 text-[10px] sm:text-xs text-muted-foreground">
+											<li><code className="bg-muted px-1 py-0.5 rounded">title</code> - Document titles</li>
+											<li><code className="bg-muted px-1 py-0.5 rounded">content</code> - Main content</li>
+											<li><code className="bg-muted px-1 py-0.5 rounded">description</code> - Descriptions</li>
+										</ul>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mt-2">
+											Leave empty to search all fields in your documents.
+										</p>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Maximum Documents</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground">
+											Set a limit on the number of documents retrieved per search (1-10,000). This helps control response times and resource usage. Leave empty to use Elasticsearch's default limit.
+										</p>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Troubleshooting</h3>
+								<div className="space-y-4">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Connection Issues</h4>
+										<ul className="list-disc pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>
+												<strong>Invalid URL:</strong> Ensure your endpoint URL includes the protocol (https://) and port number if required.
+											</li>
+											<li>
+												<strong>SSL/TLS Errors:</strong> Verify that your cluster uses HTTPS and the certificate is valid. Self-signed certificates may require additional configuration.
+											</li>
+											<li>
+												<strong>Connection Timeout:</strong> Check your network connectivity and firewall settings. Ensure the Elasticsearch cluster is accessible from SurfSense servers.
+											</li>
+										</ul>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Authentication Issues</h4>
+										<ul className="list-disc pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>
+												<strong>Invalid Credentials:</strong> Double-check your username/password or API key. API keys must be base64-encoded.
+											</li>
+											<li>
+												<strong>Permission Denied:</strong> Ensure your API key or user account has read permissions for the indices you want to search.
+											</li>
+											<li>
+												<strong>API Key Format:</strong> Elasticsearch API keys are typically base64-encoded strings. Make sure you're using the full key value.
+											</li>
+										</ul>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Search Issues</h4>
+										<ul className="list-disc pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>
+												<strong>No Results:</strong> Verify that your index selection matches existing indices. Use wildcards carefully.
+											</li>
+											<li>
+												<strong>Slow Searches:</strong> Limit the number of indices or use specific index names instead of wildcards. Reduce the maximum documents limit.
+											</li>
+											<li>
+												<strong>Field Not Found:</strong> Ensure the search fields you specify actually exist in your Elasticsearch documents.
+											</li>
+										</ul>
+									</div>
+
+									<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mt-4">
+										<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+										<AlertTitle className="text-[10px] sm:text-xs">Need More Help?</AlertTitle>
+										<AlertDescription className="text-[9px] sm:text-[10px]">
+											If you continue to experience issues, check your Elasticsearch cluster logs and ensure your cluster version is compatible. For Elasticsearch Cloud deployments, verify your access policies and IP allowlists.
+										</AlertDescription>
+									</Alert>
+								</div>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
index 3e1bb370a..cc80b5dd3 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
@@ -23,9 +23,20 @@ import {
 	FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { EnumConnectorName } from "@/contracts/enums/connector";
 import type { ConnectFormProps } from "../index";
 import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { useState } from "react";
 
 const linearConnectorFormSchema = z.object({
 	name: z.string().min(3, {
@@ -48,6 +59,10 @@ export const LinearConnectForm: FC<ConnectFormProps> = ({
 	isSubmitting,
 }) => {
 	const isSubmittingRef = useRef(false);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
 	const form = useForm<LinearConnectorFormValues>({
 		resolver: zodResolver(linearConnectorFormSchema),
 		defaultValues: {
@@ -72,9 +87,13 @@ export const LinearConnectForm: FC<ConnectFormProps> = ({
 				},
 				is_indexable: true,
 				last_indexed_at: null,
-				periodic_indexing_enabled: false,
-				indexing_frequency_minutes: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
 				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
 			});
 		} finally {
 			isSubmittingRef.current = false;
@@ -148,6 +167,56 @@ export const LinearConnectForm: FC<ConnectFormProps> = ({
 								</FormItem>
 							)}
 						/>
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
 					</form>
 				</Form>
 			</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx
index 4ce3a751d..ae9ad4144 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/tavily-api-connect-form.tsx
@@ -19,6 +19,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { EnumConnectorName } from "@/contracts/enums/connector";
 import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
 
 const tavilyApiFormSchema = z.object({
 	name: z.string().min(3, {
@@ -139,6 +140,18 @@ export const TavilyApiConnectForm: FC<ConnectFormProps> = ({
 					</form>
 				</Form>
 			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.TAVILY_API) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Tavily API:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.TAVILY_API)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
 		</div>
 	);
 };
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
index 3851a2692..7dd6dd5cf 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
@@ -11,8 +11,19 @@ export function getConnectorBenefits(connectorType: string): string[] | null {
 			"Keep your search results up-to-date with latest Linear content",
 			"Index your Linear issues for enhanced search capabilities",
 		],
+		ELASTICSEARCH_CONNECTOR: [
+			"Search across your indexed documents and logs",
+			"Access structured and unstructured data from your cluster",
+			"Leverage existing Elasticsearch indices for enhanced search",
+			"Real-time search capabilities with powerful query features",
+			"Integration with your existing Elasticsearch infrastructure",
+		],
+		TAVILY_API: [
+			"AI-powered search results tailored to your queries",
+			"Real-time information from the web",
+			"Enhanced search capabilities for your projects",
+		],
 		// Add other connectors as needed
-		// TAVILY_API: [...],
 		// GITHUB_CONNECTOR: [...],
 	};
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
index 4e48d7159..2c0ead6ec 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
@@ -1,4 +1,5 @@
 import type { FC } from "react";
+import { ElasticsearchConnectForm } from "./components/elasticsearch-connect-form";
 import { LinearConnectForm } from "./components/linear-connect-form";
 import { TavilyApiConnectForm } from "./components/tavily-api-connect-form";
 
@@ -10,8 +11,12 @@ export interface ConnectFormProps {
 		is_indexable: boolean;
 		last_indexed_at: null;
 		periodic_indexing_enabled: boolean;
-		indexing_frequency_minutes: null;
+		indexing_frequency_minutes: number | null;
 		next_scheduled_at: null;
+		startDate?: Date;
+		endDate?: Date;
+		periodicEnabled?: boolean;
+		frequencyMinutes?: string;
 	}) => Promise<void>;
 	onBack: () => void;
 	isSubmitting: boolean;
@@ -31,6 +36,8 @@ export function getConnectFormComponent(
 			return TavilyApiConnectForm;
 		case "LINEAR_CONNECTOR":
 			return LinearConnectForm;
+		case "ELASTICSEARCH_CONNECTOR":
+			return ElasticsearchConnectForm;
 		// Add other connector types here as needed
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/elasticsearch-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/elasticsearch-config.tsx
new file mode 100644
index 000000000..15eda1351
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/elasticsearch-config.tsx
@@ -0,0 +1,438 @@
+"use client";
+
+import { KeyRound, Server } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import * as RadioGroup from "@radix-ui/react-radio-group";
+import { useId } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface ElasticsearchConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const ElasticsearchConfig: FC<ElasticsearchConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const authBasicId = useId();
+	const authApiKeyId = useId();
+
+	const [name, setName] = useState<string>(connector.name || "");
+	const [endpointUrl, setEndpointUrl] = useState<string>(
+		(connector.config?.ELASTICSEARCH_URL as string) || ""
+	);
+	const [authMethod, setAuthMethod] = useState<"basic" | "api_key">(
+		(connector.config?.ELASTICSEARCH_API_KEY ? "api_key" : "basic") as "basic" | "api_key"
+	);
+	const [username, setUsername] = useState<string>(
+		(connector.config?.ELASTICSEARCH_USERNAME as string) || ""
+	);
+	const [password, setPassword] = useState<string>(
+		(connector.config?.ELASTICSEARCH_PASSWORD as string) || ""
+	);
+	const [apiKey, setApiKey] = useState<string>(
+		(connector.config?.ELASTICSEARCH_API_KEY as string) || ""
+	);
+	const [indices, setIndices] = useState<string>(
+		Array.isArray(connector.config?.ELASTICSEARCH_INDEX)
+			? (connector.config?.ELASTICSEARCH_INDEX as string[]).join(", ")
+			: (connector.config?.ELASTICSEARCH_INDEX as string) || ""
+	);
+	const [query, setQuery] = useState<string>(
+		(connector.config?.ELASTICSEARCH_QUERY as string) || "*"
+	);
+	const [searchFields, setSearchFields] = useState<string>(
+		Array.isArray(connector.config?.ELASTICSEARCH_FIELDS)
+			? (connector.config?.ELASTICSEARCH_FIELDS as string[]).join(", ")
+			: ""
+	);
+	const [maxDocuments, setMaxDocuments] = useState<string>(
+		connector.config?.ELASTICSEARCH_MAX_DOCUMENTS
+			? String(connector.config.ELASTICSEARCH_MAX_DOCUMENTS)
+			: ""
+	);
+
+	// Update values when connector changes
+	useEffect(() => {
+		setName(connector.name || "");
+		setEndpointUrl((connector.config?.ELASTICSEARCH_URL as string) || "");
+		setAuthMethod(
+			(connector.config?.ELASTICSEARCH_API_KEY ? "api_key" : "basic") as "basic" | "api_key"
+		);
+		setUsername((connector.config?.ELASTICSEARCH_USERNAME as string) || "");
+		setPassword((connector.config?.ELASTICSEARCH_PASSWORD as string) || "");
+		setApiKey((connector.config?.ELASTICSEARCH_API_KEY as string) || "");
+		setIndices(
+			Array.isArray(connector.config?.ELASTICSEARCH_INDEX)
+				? (connector.config?.ELASTICSEARCH_INDEX as string[]).join(", ")
+				: (connector.config?.ELASTICSEARCH_INDEX as string) || ""
+		);
+		setQuery((connector.config?.ELASTICSEARCH_QUERY as string) || "*");
+		setSearchFields(
+			Array.isArray(connector.config?.ELASTICSEARCH_FIELDS)
+				? (connector.config?.ELASTICSEARCH_FIELDS as string[]).join(", ")
+				: ""
+		);
+		setMaxDocuments(
+			connector.config?.ELASTICSEARCH_MAX_DOCUMENTS
+				? String(connector.config.ELASTICSEARCH_MAX_DOCUMENTS)
+				: ""
+		);
+	}, [connector.config, connector.name]);
+
+	const stringToArray = (str: string): string[] => {
+		const items = str
+			.split(",")
+			.map((item) => item.trim())
+			.filter((item) => item.length > 0);
+		return Array.from(new Set(items));
+	};
+
+	const updateConfig = (updates: Record<string, unknown>) => {
+		if (onConfigChange) {
+			// Filter out undefined values to remove keys
+			const filteredUpdates = Object.fromEntries(
+				Object.entries(updates).filter(([_, value]) => value !== undefined)
+			);
+			const newConfig = {
+				...connector.config,
+				...filteredUpdates,
+			};
+			// Remove keys that were set to undefined
+			Object.keys(updates).forEach((key) => {
+				if (updates[key] === undefined) {
+					delete newConfig[key];
+				}
+			});
+			onConfigChange(newConfig);
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	const handleEndpointUrlChange = (value: string) => {
+		setEndpointUrl(value);
+		updateConfig({ ELASTICSEARCH_URL: value });
+	};
+
+	const handleAuthMethodChange = (value: "basic" | "api_key") => {
+		setAuthMethod(value);
+		if (value === "basic") {
+			updateConfig({
+				ELASTICSEARCH_API_KEY: undefined,
+			});
+		} else {
+			updateConfig({
+				ELASTICSEARCH_USERNAME: undefined,
+				ELASTICSEARCH_PASSWORD: undefined,
+			});
+		}
+	};
+
+	const handleUsernameChange = (value: string) => {
+		setUsername(value);
+		updateConfig({ ELASTICSEARCH_USERNAME: value });
+	};
+
+	const handlePasswordChange = (value: string) => {
+		setPassword(value);
+		updateConfig({ ELASTICSEARCH_PASSWORD: value });
+	};
+
+	const handleApiKeyChange = (value: string) => {
+		setApiKey(value);
+		updateConfig({ ELASTICSEARCH_API_KEY: value });
+	};
+
+	const handleIndicesChange = (value: string) => {
+		setIndices(value);
+		const indicesArr = stringToArray(value);
+		const indexValue =
+			indicesArr.length === 0 ? "*" : indicesArr.length === 1 ? indicesArr[0] : indicesArr;
+		updateConfig({ ELASTICSEARCH_INDEX: indexValue });
+	};
+
+	const handleQueryChange = (value: string) => {
+		setQuery(value);
+		if (value && value !== "*") {
+			updateConfig({ ELASTICSEARCH_QUERY: value });
+		} else {
+			// Remove the key by setting it to undefined
+			updateConfig({ ELASTICSEARCH_QUERY: undefined });
+		}
+	};
+
+	const handleSearchFieldsChange = (value: string) => {
+		setSearchFields(value);
+		if (value.trim()) {
+			const fields = stringToArray(value);
+			updateConfig({
+				ELASTICSEARCH_FIELDS: fields,
+				ELASTICSEARCH_CONTENT_FIELDS: fields,
+				ELASTICSEARCH_TITLE_FIELD: fields.includes("title") ? "title" : undefined,
+			});
+		} else {
+			// Remove the keys by setting them to undefined
+			updateConfig({
+				ELASTICSEARCH_FIELDS: undefined,
+				ELASTICSEARCH_CONTENT_FIELDS: undefined,
+				ELASTICSEARCH_TITLE_FIELD: undefined,
+			});
+		}
+	};
+
+	const handleMaxDocumentsChange = (value: string) => {
+		setMaxDocuments(value);
+		if (value && value.trim()) {
+			const num = parseInt(value, 10);
+			if (!isNaN(num) && num > 0) {
+				updateConfig({ ELASTICSEARCH_MAX_DOCUMENTS: num });
+			}
+		} else {
+			// Remove the key by setting it to undefined
+			updateConfig({ ELASTICSEARCH_MAX_DOCUMENTS: undefined });
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Elasticsearch Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Connection Details */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base flex items-center gap-2">
+						<Server className="h-4 w-4" />
+						Connection Details
+					</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Elasticsearch Endpoint URL</Label>
+					<Input
+						type="url"
+						value={endpointUrl}
+						onChange={(e) => handleEndpointUrlChange(e.target.value)}
+						placeholder="https://your-cluster.es.region.aws.com:443"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update the Elasticsearch endpoint URL if needed.
+					</p>
+				</div>
+			</div>
+
+			{/* Authentication */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base flex items-center gap-2">
+						<KeyRound className="h-4 w-4" />
+						Authentication
+					</h3>
+				</div>
+
+				<div className="space-y-4">
+					<RadioGroup.Root
+						value={authMethod}
+						onValueChange={(value) => handleAuthMethodChange(value as "basic" | "api_key")}
+						className="flex flex-col space-y-2"
+					>
+						<div className="flex items-center space-x-2">
+							<RadioGroup.Item
+								value="api_key"
+								id={authApiKeyId}
+								className="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+							>
+								<RadioGroup.Indicator className="flex items-center justify-center">
+									<div className="h-2.5 w-2.5 rounded-full bg-current" />
+								</RadioGroup.Indicator>
+							</RadioGroup.Item>
+							<Label htmlFor={authApiKeyId} className="text-xs sm:text-sm">API Key</Label>
+						</div>
+
+						<div className="flex items-center space-x-2">
+							<RadioGroup.Item
+								value="basic"
+								id={authBasicId}
+								className="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+							>
+								<RadioGroup.Indicator className="flex items-center justify-center">
+									<div className="h-2.5 w-2.5 rounded-full bg-current" />
+								</RadioGroup.Indicator>
+							</RadioGroup.Item>
+							<Label htmlFor={authBasicId} className="text-xs sm:text-sm">Username & Password</Label>
+						</div>
+					</RadioGroup.Root>
+
+					{authMethod === "basic" && (
+						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+							<div className="space-y-2">
+								<Label className="text-xs sm:text-sm">Username</Label>
+								<Input
+									value={username}
+									onChange={(e) => handleUsernameChange(e.target.value)}
+									placeholder="elastic"
+									className="border-slate-400/20 focus-visible:border-slate-400/40"
+								/>
+							</div>
+							<div className="space-y-2">
+								<Label className="text-xs sm:text-sm">Password</Label>
+								<Input
+									type="password"
+									value={password}
+									onChange={(e) => handlePasswordChange(e.target.value)}
+									placeholder="Password"
+									className="border-slate-400/20 focus-visible:border-slate-400/40"
+								/>
+							</div>
+						</div>
+					)}
+
+					{authMethod === "api_key" && (
+						<div className="space-y-2">
+							<Label className="text-xs sm:text-sm">API Key</Label>
+							<Input
+								type="password"
+								value={apiKey}
+								onChange={(e) => handleApiKeyChange(e.target.value)}
+								placeholder="Your API Key Here"
+								className="border-slate-400/20 focus-visible:border-slate-400/40"
+							/>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								Update the Elasticsearch API key if needed.
+							</p>
+						</div>
+					)}
+				</div>
+			</div>
+
+			{/* Index Selection */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Index Selection</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Indices</Label>
+					<Input
+						value={indices}
+						onChange={(e) => handleIndicesChange(e.target.value)}
+						placeholder="logs-*, documents-*, app-logs"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Comma-separated indices to search (e.g., "logs-*, documents-*").
+					</p>
+				</div>
+
+				{indices.trim() && (
+					<div className="rounded-lg border border-border bg-muted/50 p-3">
+						<h4 className="text-[10px] sm:text-xs font-medium mb-2">Selected Indices:</h4>
+						<div className="flex flex-wrap gap-2">
+							{stringToArray(indices).map((index) => (
+								<Badge key={index} variant="secondary" className="text-[10px]">
+									{index}
+								</Badge>
+							))}
+						</div>
+					</div>
+				)}
+			</div>
+
+			{/* Advanced Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Advanced Configuration</h3>
+				</div>
+
+				<div className="space-y-4">
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">
+							Default Search Query <span className="text-muted-foreground">(Optional)</span>
+						</Label>
+						<Input
+							value={query}
+							onChange={(e) => handleQueryChange(e.target.value)}
+							placeholder="*"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Default Elasticsearch query to use for searches. Use "*" to match all documents.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">
+							Search Fields <span className="text-muted-foreground">(Optional)</span>
+						</Label>
+						<Input
+							value={searchFields}
+							onChange={(e) => handleSearchFieldsChange(e.target.value)}
+							placeholder="title, content, description"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Comma-separated list of specific fields to search in.
+						</p>
+					</div>
+
+					{searchFields.trim() && (
+						<div className="rounded-lg border border-border bg-muted/50 p-3">
+							<h4 className="text-[10px] sm:text-xs font-medium mb-2">Search Fields:</h4>
+							<div className="flex flex-wrap gap-2">
+								{stringToArray(searchFields).map((field) => (
+									<Badge key={field} variant="outline" className="text-[10px]">
+										{field}
+									</Badge>
+								))}
+							</div>
+						</div>
+					)}
+
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">
+							Maximum Documents <span className="text-muted-foreground">(Optional)</span>
+						</Label>
+						<Input
+							type="number"
+							value={maxDocuments}
+							onChange={(e) => handleMaxDocumentsChange(e.target.value)}
+							placeholder="1000"
+							min="1"
+							max="10000"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Maximum number of documents to retrieve per search (1-10,000).
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
index 71c549403..b03ed574d 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -2,6 +2,7 @@
 
 import type { FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { ElasticsearchConfig } from "./components/elasticsearch-config";
 import { GoogleDriveConfig } from "./components/google-drive-config";
 import { LinearConfig } from "./components/linear-config";
 import { TavilyApiConfig } from "./components/tavily-api-config";
@@ -30,6 +31,8 @@ export function getConnectorConfigComponent(
 			return LinearConfig;
 		case "WEBCRAWLER_CONNECTOR":
 			return WebcrawlerConfig;
+		case "ELASTICSEARCH_CONNECTOR":
+			return ElasticsearchConfig;
 		// OAuth connectors (Gmail, Calendar, Airtable) and others don't need special config UI
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
index 664425010..eb0102008 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
@@ -45,6 +45,7 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 		const formIdMap: Record<string, string> = {
 			TAVILY_API: "tavily-connect-form",
 			LINEAR_CONNECTOR: "linear-connect-form",
+			ELASTICSEARCH_CONNECTOR: "elasticsearch-connect-form",
 		};
 		const formId = formIdMap[connectorType];
 		if (formId) {
diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
index 905e7cf32..b3114b631 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@@ -349,8 +349,12 @@ export const useConnectorDialog = () => {
 			is_indexable: boolean;
 			last_indexed_at: null;
 			periodic_indexing_enabled: boolean;
-			indexing_frequency_minutes: null;
+			indexing_frequency_minutes: number | null;
 			next_scheduled_at: null;
+			startDate?: Date;
+			endDate?: Date;
+			periodicEnabled?: boolean;
+			frequencyMinutes?: string;
 		}
 	) => {
 		if (!searchSpaceId || !connectingConnectorType) return;
@@ -361,9 +365,12 @@ export const useConnectorDialog = () => {
 
 		setIsCreatingConnector(true);
 		try {
+			// Extract UI-only fields before sending to backend
+			const { startDate, endDate, periodicEnabled, frequencyMinutes, ...connectorData } = formData;
+			
 			// Create connector
 			const newConnector = await createConnector({
-				data: formData,
+				data: connectorData,
 				queryParams: {
 					search_space_id: searchSpaceId,
 				},
@@ -379,29 +386,118 @@ export const useConnectorDialog = () => {
 					// Validate connector data
 					const connectorValidation = searchSourceConnector.safeParse(connector);
 					if (connectorValidation.success) {
+						// Store connectingConnectorType before clearing it
+						const currentConnectorType = connectingConnectorType;
+						
 						// Find connector title from constants
 						const connectorInfo = OTHER_CONNECTORS.find(
-							c => c.connectorType === connectingConnectorType
+							c => c.connectorType === currentConnectorType
 						);
 						const connectorTitle = connectorInfo?.title || connector.name;
 						
 						// Set up indexing config
 						const config = validateIndexingConfigState({
-							connectorType: connectingConnectorType as EnumConnectorName,
+							connectorType: currentConnectorType as EnumConnectorName,
 							connectorId: connector.id,
 							connectorTitle,
 						});
+						
+						// Clear connecting state to allow view transition
+						setConnectingConnectorType(null);
+						
+						// Set indexing config state
 						setIndexingConfig(config);
 						setIndexingConnector(connector);
 						setIndexingConnectorConfig(connector.config || {});
 						
-						// Transition to configure view
-						const url = new URL(window.location.href);
-						url.searchParams.set("view", "configure");
-						url.searchParams.delete("connectorType");
-						window.history.replaceState({}, "", url.toString());
+						// Pre-populate indexing configuration with values from form if provided
+						if (formData.startDate !== undefined) {
+							setStartDate(formData.startDate);
+						}
+						if (formData.endDate !== undefined) {
+							setEndDate(formData.endDate);
+						}
+						if (formData.periodicEnabled !== undefined) {
+							setPeriodicEnabled(formData.periodicEnabled);
+						}
+						if (formData.frequencyMinutes !== undefined) {
+							setFrequencyMinutes(formData.frequencyMinutes);
+						}
 						
-						toast.success(`${connectorTitle} connected successfully!`);
+						// Auto-start indexing for non-OAuth reindexable connectors
+						// This only applies to non-OAuth reindexable connectors (e.g., Elasticsearch, Linear)
+						// Non-reindexable connectors (e.g., Tavily) have is_indexable: false, so they won't trigger this
+						// Backend will use default date ranges (365 days ago to today) if dates are not provided
+						if (connector.is_indexable) {
+							// Get indexing configuration from form (or use defaults)
+							const startDateForIndexing = formData.startDate;
+							const endDateForIndexing = formData.endDate;
+							const periodicEnabledForIndexing = formData.periodicEnabled || false;
+							const frequencyMinutesForIndexing = formData.frequencyMinutes || "1440";
+							
+							// Update connector with periodic sync settings if enabled
+							if (periodicEnabledForIndexing) {
+								const frequency = parseInt(frequencyMinutesForIndexing, 10);
+								await updateConnector({
+									id: connector.id,
+									data: {
+										periodic_indexing_enabled: true,
+										indexing_frequency_minutes: frequency,
+									},
+								});
+							}
+							
+							// Start indexing (backend will use defaults if dates are undefined)
+							const startDateStr = startDateForIndexing ? format(startDateForIndexing, "yyyy-MM-dd") : undefined;
+							const endDateStr = endDateForIndexing ? format(endDateForIndexing, "yyyy-MM-dd") : undefined;
+							
+							await indexConnector({
+								connector_id: connector.id,
+								queryParams: {
+									search_space_id: searchSpaceId,
+									start_date: startDateStr,
+									end_date: endDateStr,
+								},
+							});
+							
+							toast.success(`${connectorTitle} connected and indexing started!`, {
+								description: periodicEnabledForIndexing 
+									? `Periodic sync enabled every ${getFrequencyLabel(frequencyMinutesForIndexing)}.`
+									: "You can continue working while we sync your data.",
+							});
+							
+							// Close modal and return to main view
+							const url = new URL(window.location.href);
+							url.searchParams.delete("modal");
+							url.searchParams.delete("tab");
+							url.searchParams.delete("view");
+							url.searchParams.delete("connectorType");
+							router.replace(url.pathname + url.search, { scroll: false });
+							
+							// Clear indexing config state since we're not showing the view
+							setIndexingConfig(null);
+							setIndexingConnector(null);
+							setIndexingConnectorConfig(null);
+							
+							// Invalidate queries to refresh data
+							queryClient.invalidateQueries({
+								queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
+							});
+							
+							// Refresh connectors list
+							await refetchAllConnectors();
+						} else {
+							// Non-indexable connector - just show success message
+							toast.success(`${connectorTitle} connected successfully!`);
+							
+							// Close modal and return to main view
+							const url = new URL(window.location.href);
+							url.searchParams.delete("modal");
+							url.searchParams.delete("tab");
+							url.searchParams.delete("view");
+							url.searchParams.delete("connectorType");
+							router.replace(url.pathname + url.search, { scroll: false });
+						}
 					}
 				}
 			}
@@ -411,9 +507,9 @@ export const useConnectorDialog = () => {
 		} finally {
 			isCreatingConnectorRef.current = false;
 			setIsCreatingConnector(false);
-			setConnectingConnectorType(null);
+			// Don't clear connectingConnectorType here - it's cleared above when transitioning to config view
 		}
-	}, [connectingConnectorType, searchSpaceId, createConnector, refetchAllConnectors]);
+	}, [connectingConnectorType, searchSpaceId, createConnector, refetchAllConnectors, updateConnector, indexConnector, router, getFrequencyLabel, queryClient]);
 
 	// Handle going back from connect view
 	const handleBackFromConnect = useCallback(() => {
@@ -561,13 +657,14 @@ export const useConnectorDialog = () => {
 			(oauthConnector) => oauthConnector.connectorType === connector.connector_type
 		);
 		
-		// Check if this is webcrawler, Tavily API, or Linear (can be managed in popup)
+		// Check if this is webcrawler, Tavily API, Linear, or Elasticsearch (can be managed in popup)
 		const isWebcrawler = connector.connector_type === EnumConnectorName.WEBCRAWLER_CONNECTOR;
 		const isTavilyApi = connector.connector_type === EnumConnectorName.TAVILY_API;
 		const isLinear = connector.connector_type === EnumConnectorName.LINEAR_CONNECTOR;
+		const isElasticsearch = connector.connector_type === EnumConnectorName.ELASTICSEARCH_CONNECTOR;
 		
-		// If not OAuth, not webcrawler, not Tavily API, and not Linear, redirect to old connector edit page
-		if (!isOAuthConnector && !isWebcrawler && !isTavilyApi && !isLinear) {
+		// If not OAuth, not webcrawler, not Tavily API, not Linear, and not Elasticsearch, redirect to old connector edit page
+		if (!isOAuthConnector && !isWebcrawler && !isTavilyApi && !isLinear && !isElasticsearch) {
 			router.push(`/dashboard/${searchSpaceId}/connectors/${connector.id}/edit`);
 			return;
 		}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
index fd364c3d1..7397264e8 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
@@ -12,7 +12,6 @@ import type { LogSummary, LogActiveTask } from "@/contracts/types/log.types";
 import { cn } from "@/lib/utils";
 import {
 	TabsContent,
-	TabsTrigger,
 } from "@/components/ui/tabs";
 
 interface ActiveConnectorsTabProps {
@@ -140,9 +139,13 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 					<p className="text-sm text-muted-foreground mt-1 max-w-[280px]">
 						Connect your first service to start searching across all your data.
 					</p>
-					<TabsTrigger value="all" className="mt-6 text-primary hover:underline" onClick={() => onTabChange("all")}>
+					<Button
+						variant="link"
+						className="mt-6 text-primary hover:underline"
+						onClick={() => onTabChange("all")}
+					>
 						Browse available connectors
-					</TabsTrigger>
+					</Button>
 				</div>
 			)}
 		</TabsContent>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index ef74c1269..887961bed 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -95,6 +95,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 							const isWebcrawler = connector.id === "webcrawler-connector";
 							const isTavily = connector.id === "tavily-api";
 							const isLinear = connector.id === "linear-connector";
+							const isElasticsearch = connector.id === "elasticsearch-connector";
 							
 							const isConnected = connectedTypes.has(connector.connectorType);
 							const isConnecting = connectingId === connector.id;
@@ -106,7 +107,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 
 							const handleConnect = isWebcrawler && onCreateWebcrawler
 								? onCreateWebcrawler
-								: (isTavily || isLinear) && onConnectNonOAuth
+								: (isTavily || isLinear || isElasticsearch) && onConnectNonOAuth
 								? () => onConnectNonOAuth(connector.connectorType)
 								: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);
 

From b26768cec5a8c3b680150123431f0811dccb2d65 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 15:42:50 +0530
Subject: [PATCH 15/28] feat: Add support for SearxNG, Linkup, and Baidu Search
 connectors, including configuration forms and benefits display, enhance
 connector dialog for new connectors, and improve overall connector management
 functionality.

---
 .../baidu-search-api-connect-form.tsx         | 158 ++++++++
 .../components/linkup-api-connect-form.tsx    | 158 ++++++++
 .../components/searxng-connect-form.tsx       | 343 ++++++++++++++++++
 .../connect-forms/connector-benefits.ts       |  15 +
 .../connector-popup/connect-forms/index.tsx   |   9 +
 .../components/baidu-search-api-config.tsx    |  92 +++++
 .../components/linkup-api-config.tsx          |  92 +++++
 .../components/searxng-config.tsx             | 322 ++++++++++++++++
 .../connector-configs/index.tsx               |   9 +
 .../views/connector-connect-view.tsx          |   3 +
 .../hooks/use-connector-dialog.ts             |   9 +-
 .../tabs/all-connectors-tab.tsx               |   5 +-
 12 files changed, 1211 insertions(+), 4 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/baidu-search-api-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linkup-api-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/baidu-search-api-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linkup-api-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/searxng-config.tsx

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/baidu-search-api-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/baidu-search-api-connect-form.tsx
new file mode 100644
index 000000000..d84bd7797
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/baidu-search-api-connect-form.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+
+const baiduSearchApiFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	api_key: z.string().min(10, {
+		message: "API key is required and must be valid.",
+	}),
+});
+
+type BaiduSearchApiFormValues = z.infer<typeof baiduSearchApiFormSchema>;
+
+export const BaiduSearchApiConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const form = useForm<BaiduSearchApiFormValues>({
+		resolver: zodResolver(baiduSearchApiFormSchema),
+		defaultValues: {
+			name: "Baidu Search Connector",
+			api_key: "",
+		},
+	});
+
+	const handleSubmit = async (values: BaiduSearchApiFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.BAIDU_SEARCH_API,
+				config: {
+					BAIDU_API_KEY: values.api_key,
+				},
+				is_indexable: false,
+				last_indexed_at: null,
+				periodic_indexing_enabled: false,
+				indexing_frequency_minutes: null,
+				next_scheduled_at: null,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Baidu AppBuilder API key to use this connector. You can get one by signing up at{" "}
+						<a
+							href="https://qianfan.cloud.baidu.com/"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							qianfan.cloud.baidu.com
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="baidu-search-api-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Baidu Search Connector" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="api_key"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Baidu AppBuilder API Key</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="Enter your Baidu API key" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your API key will be encrypted and stored securely.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.BAIDU_SEARCH_API) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Baidu Search:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.BAIDU_SEARCH_API)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linkup-api-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linkup-api-connect-form.tsx
new file mode 100644
index 000000000..dedb8c72e
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linkup-api-connect-form.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+
+const linkupApiFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	api_key: z.string().min(10, {
+		message: "API key is required and must be valid.",
+	}),
+});
+
+type LinkupApiFormValues = z.infer<typeof linkupApiFormSchema>;
+
+export const LinkupApiConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const form = useForm<LinkupApiFormValues>({
+		resolver: zodResolver(linkupApiFormSchema),
+		defaultValues: {
+			name: "Linkup API Connector",
+			api_key: "",
+		},
+	});
+
+	const handleSubmit = async (values: LinkupApiFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.LINKUP_API,
+				config: {
+					LINKUP_API_KEY: values.api_key,
+				},
+				is_indexable: false,
+				last_indexed_at: null,
+				periodic_indexing_enabled: false,
+				indexing_frequency_minutes: null,
+				next_scheduled_at: null,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Linkup API key to use this connector. You can get one by signing up at{" "}
+						<a
+							href="https://linkup.ai"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							linkup.ai
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="linkup-api-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Linkup API Connector" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="api_key"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Linkup API Key</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="Enter your Linkup API key" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your API key will be encrypted and stored securely.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.LINKUP_API) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Linkup API:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.LINKUP_API)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx
new file mode 100644
index 000000000..b1c19a612
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx
@@ -0,0 +1,343 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Switch } from "@/components/ui/switch";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+
+const searxngFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	host: z
+		.string({ required_error: "Host is required." })
+		.url({ message: "Enter a valid SearxNG host URL (e.g. https://searxng.example.org)." }),
+	api_key: z.string().optional(),
+	engines: z.string().optional(),
+	categories: z.string().optional(),
+	language: z.string().optional(),
+	safesearch: z
+		.string()
+		.regex(/^[0-2]?$/, { message: "SafeSearch must be 0, 1, or 2." })
+		.optional(),
+	verify_ssl: z.boolean().default(true),
+});
+
+type SearxngFormValues = z.infer<typeof searxngFormSchema>;
+
+const parseCommaSeparated = (value?: string | null) => {
+	if (!value) return undefined;
+	const items = value
+		.split(",")
+		.map((item) => item.trim())
+		.filter((item) => item.length > 0);
+	return items.length > 0 ? items : undefined;
+};
+
+export const SearxngConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const form = useForm<SearxngFormValues>({
+		resolver: zodResolver(searxngFormSchema),
+		defaultValues: {
+			name: "SearxNG Connector",
+			host: "",
+			api_key: "",
+			engines: "",
+			categories: "",
+			language: "",
+			safesearch: "",
+			verify_ssl: true,
+		},
+	});
+
+	const handleSubmit = async (values: SearxngFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			const config: Record<string, unknown> = {
+				SEARXNG_HOST: values.host.trim(),
+			};
+
+			const apiKey = values.api_key?.trim();
+			if (apiKey) config.SEARXNG_API_KEY = apiKey;
+
+			const engines = parseCommaSeparated(values.engines);
+			if (engines) config.SEARXNG_ENGINES = engines;
+
+			const categories = parseCommaSeparated(values.categories);
+			if (categories) config.SEARXNG_CATEGORIES = categories;
+
+			const language = values.language?.trim();
+			if (language) config.SEARXNG_LANGUAGE = language;
+
+			const safesearch = values.safesearch?.trim();
+			if (safesearch) {
+				const parsed = Number(safesearch);
+				if (!Number.isNaN(parsed)) {
+					config.SEARXNG_SAFESEARCH = parsed;
+				}
+			}
+
+			// Include verify flag only when disabled to keep config minimal
+			if (values.verify_ssl === false) {
+				config.SEARXNG_VERIFY_SSL = false;
+			}
+
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.SEARXNG_API,
+				config,
+				is_indexable: false,
+				last_indexed_at: null,
+				periodic_indexing_enabled: false,
+				indexing_frequency_minutes: null,
+				next_scheduled_at: null,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">SearxNG Instance Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You need access to a running SearxNG instance. Refer to the{" "}
+						<a
+							href="https://docs.searxng.org/admin/installation-docker.html"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							SearxNG installation guide
+						</a>{" "}
+						for setup instructions. If your instance requires an API key, include it below.
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="searxng-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My SearxNG Connector" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="host"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">SearxNG Host</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="https://searxng.example.org" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Provide the full base URL to your SearxNG instance. Include the protocol (http/https).
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="api_key"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">API Key (optional)</FormLabel>
+									<FormControl>
+										<Input
+											type="password"
+											placeholder="Enter API key if your instance requires one"
+											className="border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field}
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Leave empty if your SearxNG instance does not enforce API keys.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+							<FormField
+								control={form.control}
+								name="engines"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel className="text-xs sm:text-sm">Engines (optional)</FormLabel>
+										<FormControl>
+											<Input 
+												placeholder="google,bing,duckduckgo" 
+												className="border-slate-400/20 focus-visible:border-slate-400/40"
+												disabled={isSubmitting}
+												{...field} 
+											/>
+										</FormControl>
+										<FormDescription className="text-[10px] sm:text-xs">
+											Comma-separated list to target specific engines.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="categories"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel className="text-xs sm:text-sm">Categories (optional)</FormLabel>
+										<FormControl>
+											<Input 
+												placeholder="general,it,science" 
+												className="border-slate-400/20 focus-visible:border-slate-400/40"
+												disabled={isSubmitting}
+												{...field} 
+											/>
+										</FormControl>
+										<FormDescription className="text-[10px] sm:text-xs">
+											Comma-separated list of SearxNG categories.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+
+						<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+							<FormField
+								control={form.control}
+								name="language"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel className="text-xs sm:text-sm">Preferred Language (optional)</FormLabel>
+										<FormControl>
+											<Input 
+												placeholder="en-US" 
+												className="border-slate-400/20 focus-visible:border-slate-400/40"
+												disabled={isSubmitting}
+												{...field} 
+											/>
+										</FormControl>
+										<FormDescription className="text-[10px] sm:text-xs">
+											IETF language tag (e.g. en, en-US). Leave blank to inherit defaults.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+
+							<FormField
+								control={form.control}
+								name="safesearch"
+								render={({ field }) => (
+									<FormItem>
+										<FormLabel className="text-xs sm:text-sm">SafeSearch Level (optional)</FormLabel>
+										<FormControl>
+											<Input 
+												placeholder="0 (off), 1 (moderate), 2 (strict)" 
+												className="border-slate-400/20 focus-visible:border-slate-400/40"
+												disabled={isSubmitting}
+												{...field} 
+											/>
+										</FormControl>
+										<FormDescription className="text-[10px] sm:text-xs">
+											Set 0, 1, or 2 to adjust SafeSearch filtering. Leave blank to use the instance default.
+										</FormDescription>
+										<FormMessage />
+									</FormItem>
+								)}
+							/>
+						</div>
+
+						<FormField
+							control={form.control}
+							name="verify_ssl"
+							render={({ field }) => (
+								<FormItem className="flex items-center justify-between rounded-lg border border-slate-400/20 p-3 sm:p-4">
+									<div>
+										<FormLabel className="text-xs sm:text-sm">Verify SSL Certificates</FormLabel>
+										<FormDescription className="text-[10px] sm:text-xs">
+											Disable only when connecting to instances with self-signed certificates.
+										</FormDescription>
+									</div>
+									<FormControl>
+										<Switch checked={field.value} onCheckedChange={field.onChange} disabled={isSubmitting} />
+									</FormControl>
+								</FormItem>
+							)}
+						/>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.SEARXNG_API) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with SearxNG:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.SEARXNG_API)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
index 7dd6dd5cf..362a8ffa3 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
@@ -23,6 +23,21 @@ export function getConnectorBenefits(connectorType: string): string[] | null {
 			"Real-time information from the web",
 			"Enhanced search capabilities for your projects",
 		],
+		SEARXNG_API: [
+			"Privacy-focused meta-search across multiple engines",
+			"Self-hosted search instance for full control",
+			"Real-time web search results from multiple sources",
+		],
+		LINKUP_API: [
+			"AI-powered search results tailored to your queries",
+			"Real-time information from the web",
+			"Enhanced search capabilities for your projects",
+		],
+		BAIDU_SEARCH_API: [
+			"Intelligent search tailored for Chinese web content",
+			"Real-time information from Baidu's search index",
+			"AI-powered summarization with source references",
+		],
 		// Add other connectors as needed
 		// GITHUB_CONNECTOR: [...],
 	};
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
index 2c0ead6ec..2a1170303 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
@@ -1,6 +1,9 @@
 import type { FC } from "react";
+import { BaiduSearchApiConnectForm } from "./components/baidu-search-api-connect-form";
 import { ElasticsearchConnectForm } from "./components/elasticsearch-connect-form";
 import { LinearConnectForm } from "./components/linear-connect-form";
+import { LinkupApiConnectForm } from "./components/linkup-api-connect-form";
+import { SearxngConnectForm } from "./components/searxng-connect-form";
 import { TavilyApiConnectForm } from "./components/tavily-api-connect-form";
 
 export interface ConnectFormProps {
@@ -34,6 +37,12 @@ export function getConnectFormComponent(
 	switch (connectorType) {
 		case "TAVILY_API":
 			return TavilyApiConnectForm;
+		case "SEARXNG_API":
+			return SearxngConnectForm;
+		case "LINKUP_API":
+			return LinkupApiConnectForm;
+		case "BAIDU_SEARCH_API":
+			return BaiduSearchApiConnectForm;
 		case "LINEAR_CONNECTOR":
 			return LinearConnectForm;
 		case "ELASTICSEARCH_CONNECTOR":
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/baidu-search-api-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/baidu-search-api-config.tsx
new file mode 100644
index 000000000..7089878c9
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/baidu-search-api-config.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface BaiduSearchApiConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const BaiduSearchApiConfig: FC<BaiduSearchApiConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [apiKey, setApiKey] = useState<string>(
+		(connector.config?.BAIDU_API_KEY as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update API key and name when connector changes
+	useEffect(() => {
+		const key = (connector.config?.BAIDU_API_KEY as string) || "";
+		setApiKey(key);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleApiKeyChange = (value: string) => {
+		setApiKey(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				BAIDU_API_KEY: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Baidu Search Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="flex items-center gap-2 text-xs sm:text-sm">
+						<KeyRound className="h-4 w-4" />
+						Baidu AppBuilder API Key
+					</Label>
+					<Input
+						type="password"
+						value={apiKey}
+						onChange={(e) => handleApiKeyChange(e.target.value)}
+						placeholder="Enter your Baidu API key"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update the Baidu API Key if needed.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linkup-api-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linkup-api-config.tsx
new file mode 100644
index 000000000..95bc6e823
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/linkup-api-config.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface LinkupApiConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const LinkupApiConfig: FC<LinkupApiConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [apiKey, setApiKey] = useState<string>(
+		(connector.config?.LINKUP_API_KEY as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update API key and name when connector changes
+	useEffect(() => {
+		const key = (connector.config?.LINKUP_API_KEY as string) || "";
+		setApiKey(key);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleApiKeyChange = (value: string) => {
+		setApiKey(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				LINKUP_API_KEY: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Linkup API Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="flex items-center gap-2 text-xs sm:text-sm">
+						<KeyRound className="h-4 w-4" />
+						Linkup API Key
+					</Label>
+					<Input
+						type="password"
+						value={apiKey}
+						onChange={(e) => handleApiKeyChange(e.target.value)}
+						placeholder="Enter your Linkup API key"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update the Linkup API Key if needed.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/searxng-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/searxng-config.tsx
new file mode 100644
index 000000000..3b2b37f84
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/searxng-config.tsx
@@ -0,0 +1,322 @@
+"use client";
+
+import { KeyRound, Globe } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import type { ConnectorConfigProps } from "../index";
+
+export interface SearxngConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+const arrayToString = (arr: unknown): string => {
+	if (!arr) return "";
+	if (Array.isArray(arr)) {
+		return arr.join(", ");
+	}
+	return String(arr);
+};
+
+const stringToArray = (value: string): string[] | undefined => {
+	if (!value) return undefined;
+	const items = value
+		.split(",")
+		.map((item) => item.trim())
+		.filter((item) => item.length > 0);
+	return items.length > 0 ? items : undefined;
+};
+
+export const SearxngConfig: FC<SearxngConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [host, setHost] = useState<string>(
+		(connector.config?.SEARXNG_HOST as string) || ""
+	);
+	const [apiKey, setApiKey] = useState<string>(
+		(connector.config?.SEARXNG_API_KEY as string) || ""
+	);
+	const [engines, setEngines] = useState<string>(
+		arrayToString(connector.config?.SEARXNG_ENGINES)
+	);
+	const [categories, setCategories] = useState<string>(
+		arrayToString(connector.config?.SEARXNG_CATEGORIES)
+	);
+	const [language, setLanguage] = useState<string>(
+		(connector.config?.SEARXNG_LANGUAGE as string) || ""
+	);
+	const [safesearch, setSafesearch] = useState<string>(
+		connector.config?.SEARXNG_SAFESEARCH !== undefined
+			? String(connector.config.SEARXNG_SAFESEARCH)
+			: ""
+	);
+	const [verifySsl, setVerifySsl] = useState<boolean>(
+		connector.config?.SEARXNG_VERIFY_SSL !== undefined
+			? (connector.config.SEARXNG_VERIFY_SSL as boolean)
+			: true
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update all fields when connector changes
+	useEffect(() => {
+		const hostValue = (connector.config?.SEARXNG_HOST as string) || "";
+		const apiKeyValue = (connector.config?.SEARXNG_API_KEY as string) || "";
+		const enginesValue = arrayToString(connector.config?.SEARXNG_ENGINES);
+		const categoriesValue = arrayToString(connector.config?.SEARXNG_CATEGORIES);
+		const languageValue = (connector.config?.SEARXNG_LANGUAGE as string) || "";
+		const safesearchValue =
+			connector.config?.SEARXNG_SAFESEARCH !== undefined
+				? String(connector.config.SEARXNG_SAFESEARCH)
+				: "";
+		const verifySslValue =
+			connector.config?.SEARXNG_VERIFY_SSL !== undefined
+				? (connector.config.SEARXNG_VERIFY_SSL as boolean)
+				: true;
+
+		setHost(hostValue);
+		setApiKey(apiKeyValue);
+		setEngines(enginesValue);
+		setCategories(categoriesValue);
+		setLanguage(languageValue);
+		setSafesearch(safesearchValue);
+		setVerifySsl(verifySslValue);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const updateConfig = (updates: Record<string, unknown>) => {
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				...updates,
+			});
+		}
+	};
+
+	const handleHostChange = (value: string) => {
+		setHost(value);
+		updateConfig({ SEARXNG_HOST: value });
+	};
+
+	const handleApiKeyChange = (value: string) => {
+		setApiKey(value);
+		if (value) {
+			updateConfig({ SEARXNG_API_KEY: value });
+		} else {
+			const newConfig = { ...connector.config };
+			delete newConfig.SEARXNG_API_KEY;
+			if (onConfigChange) {
+				onConfigChange(newConfig);
+			}
+		}
+	};
+
+	const handleEnginesChange = (value: string) => {
+		setEngines(value);
+		const enginesArray = stringToArray(value);
+		if (enginesArray) {
+			updateConfig({ SEARXNG_ENGINES: enginesArray });
+		} else {
+			const newConfig = { ...connector.config };
+			delete newConfig.SEARXNG_ENGINES;
+			if (onConfigChange) {
+				onConfigChange(newConfig);
+			}
+		}
+	};
+
+	const handleCategoriesChange = (value: string) => {
+		setCategories(value);
+		const categoriesArray = stringToArray(value);
+		if (categoriesArray) {
+			updateConfig({ SEARXNG_CATEGORIES: categoriesArray });
+		} else {
+			const newConfig = { ...connector.config };
+			delete newConfig.SEARXNG_CATEGORIES;
+			if (onConfigChange) {
+				onConfigChange(newConfig);
+			}
+		}
+	};
+
+	const handleLanguageChange = (value: string) => {
+		setLanguage(value);
+		if (value) {
+			updateConfig({ SEARXNG_LANGUAGE: value });
+		} else {
+			const newConfig = { ...connector.config };
+			delete newConfig.SEARXNG_LANGUAGE;
+			if (onConfigChange) {
+				onConfigChange(newConfig);
+			}
+		}
+	};
+
+	const handleSafesearchChange = (value: string) => {
+		setSafesearch(value);
+		if (value) {
+			const parsed = Number(value);
+			if (!Number.isNaN(parsed)) {
+				updateConfig({ SEARXNG_SAFESEARCH: parsed });
+			}
+		} else {
+			const newConfig = { ...connector.config };
+			delete newConfig.SEARXNG_SAFESEARCH;
+			if (onConfigChange) {
+				onConfigChange(newConfig);
+			}
+		}
+	};
+
+	const handleVerifySslChange = (value: boolean) => {
+		setVerifySsl(value);
+		if (value === false) {
+			updateConfig({ SEARXNG_VERIFY_SSL: false });
+		} else {
+			const newConfig = { ...connector.config };
+			delete newConfig.SEARXNG_VERIFY_SSL;
+			if (onConfigChange) {
+				onConfigChange(newConfig);
+			}
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My SearxNG Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-4">
+					<div className="space-y-2">
+						<Label className="flex items-center gap-2 text-xs sm:text-sm">
+							<Globe className="h-4 w-4" />
+							SearxNG Host
+						</Label>
+						<Input
+							value={host}
+							onChange={(e) => handleHostChange(e.target.value)}
+							placeholder="https://searxng.example.org"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Update the SearxNG Host if needed.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						<Label className="flex items-center gap-2 text-xs sm:text-sm">
+							<KeyRound className="h-4 w-4" />
+							API Key (optional)
+						</Label>
+						<Input
+							type="password"
+							value={apiKey}
+							onChange={(e) => handleApiKeyChange(e.target.value)}
+							placeholder="Enter API key if your instance requires one"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Leave empty if your SearxNG instance does not enforce API keys.
+						</p>
+					</div>
+
+					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+						<div className="space-y-2">
+							<Label className="text-xs sm:text-sm">Engines (optional)</Label>
+							<Input
+								value={engines}
+								onChange={(e) => handleEnginesChange(e.target.value)}
+								placeholder="google,bing,duckduckgo"
+								className="border-slate-400/20 focus-visible:border-slate-400/40"
+							/>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								Comma-separated list to target specific engines.
+							</p>
+						</div>
+
+						<div className="space-y-2">
+							<Label className="text-xs sm:text-sm">Categories (optional)</Label>
+							<Input
+								value={categories}
+								onChange={(e) => handleCategoriesChange(e.target.value)}
+								placeholder="general,it,science"
+								className="border-slate-400/20 focus-visible:border-slate-400/40"
+							/>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								Comma-separated list of SearxNG categories.
+							</p>
+						</div>
+					</div>
+
+					<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+						<div className="space-y-2">
+							<Label className="text-xs sm:text-sm">Preferred Language (optional)</Label>
+							<Input
+								value={language}
+								onChange={(e) => handleLanguageChange(e.target.value)}
+								placeholder="en-US"
+								className="border-slate-400/20 focus-visible:border-slate-400/40"
+							/>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								IETF language tag (e.g. en, en-US). Leave blank to inherit defaults.
+							</p>
+						</div>
+
+						<div className="space-y-2">
+							<Label className="text-xs sm:text-sm">SafeSearch Level (optional)</Label>
+							<Input
+								value={safesearch}
+								onChange={(e) => handleSafesearchChange(e.target.value)}
+								placeholder="0 (off), 1 (moderate), 2 (strict)"
+								className="border-slate-400/20 focus-visible:border-slate-400/40"
+							/>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								Set 0, 1, or 2 to adjust SafeSearch filtering. Leave blank to use the instance default.
+							</p>
+						</div>
+					</div>
+
+					<div className="flex items-center justify-between rounded-lg border border-slate-400/20 p-3 sm:p-4">
+						<div>
+							<Label className="text-xs sm:text-sm">Verify SSL Certificates</Label>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								Disable only when connecting to instances with self-signed certificates.
+							</p>
+						</div>
+						<Switch checked={verifySsl} onCheckedChange={handleVerifySslChange} />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
index b03ed574d..5674a4a3e 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -2,9 +2,12 @@
 
 import type { FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { BaiduSearchApiConfig } from "./components/baidu-search-api-config";
 import { ElasticsearchConfig } from "./components/elasticsearch-config";
 import { GoogleDriveConfig } from "./components/google-drive-config";
 import { LinearConfig } from "./components/linear-config";
+import { LinkupApiConfig } from "./components/linkup-api-config";
+import { SearxngConfig } from "./components/searxng-config";
 import { TavilyApiConfig } from "./components/tavily-api-config";
 import { WebcrawlerConfig } from "./components/webcrawler-config";
 
@@ -27,6 +30,12 @@ export function getConnectorConfigComponent(
 			return GoogleDriveConfig;
 		case "TAVILY_API":
 			return TavilyApiConfig;
+		case "SEARXNG_API":
+			return SearxngConfig;
+		case "LINKUP_API":
+			return LinkupApiConfig;
+		case "BAIDU_SEARCH_API":
+			return BaiduSearchApiConfig;
 		case "LINEAR_CONNECTOR":
 			return LinearConfig;
 		case "WEBCRAWLER_CONNECTOR":
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
index eb0102008..a7c95fea8 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
@@ -44,6 +44,9 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 		// Map connector types to their form IDs
 		const formIdMap: Record<string, string> = {
 			TAVILY_API: "tavily-connect-form",
+			SEARXNG_API: "searxng-connect-form",
+			LINKUP_API: "linkup-api-connect-form",
+			BAIDU_SEARCH_API: "baidu-search-api-connect-form",
 			LINEAR_CONNECTOR: "linear-connect-form",
 			ELASTICSEARCH_CONNECTOR: "elasticsearch-connect-form",
 		};
diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
index b3114b631..7843561e8 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@@ -657,14 +657,17 @@ export const useConnectorDialog = () => {
 			(oauthConnector) => oauthConnector.connectorType === connector.connector_type
 		);
 		
-		// Check if this is webcrawler, Tavily API, Linear, or Elasticsearch (can be managed in popup)
+		// Check if this is webcrawler, Tavily API, SearxNG, Linkup, Baidu, Linear, or Elasticsearch (can be managed in popup)
 		const isWebcrawler = connector.connector_type === EnumConnectorName.WEBCRAWLER_CONNECTOR;
 		const isTavilyApi = connector.connector_type === EnumConnectorName.TAVILY_API;
+		const isSearxng = connector.connector_type === EnumConnectorName.SEARXNG_API;
+		const isLinkup = connector.connector_type === EnumConnectorName.LINKUP_API;
+		const isBaidu = connector.connector_type === EnumConnectorName.BAIDU_SEARCH_API;
 		const isLinear = connector.connector_type === EnumConnectorName.LINEAR_CONNECTOR;
 		const isElasticsearch = connector.connector_type === EnumConnectorName.ELASTICSEARCH_CONNECTOR;
 		
-		// If not OAuth, not webcrawler, not Tavily API, not Linear, and not Elasticsearch, redirect to old connector edit page
-		if (!isOAuthConnector && !isWebcrawler && !isTavilyApi && !isLinear && !isElasticsearch) {
+		// If not OAuth, not webcrawler, not Tavily API, not SearxNG, not Linkup, not Baidu, not Linear, and not Elasticsearch, redirect to old connector edit page
+		if (!isOAuthConnector && !isWebcrawler && !isTavilyApi && !isSearxng && !isLinkup && !isBaidu && !isLinear && !isElasticsearch) {
 			router.push(`/dashboard/${searchSpaceId}/connectors/${connector.id}/edit`);
 			return;
 		}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 887961bed..0d5d0ef1c 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -94,6 +94,9 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 							// Special handling for connectors that can be created in popup
 							const isWebcrawler = connector.id === "webcrawler-connector";
 							const isTavily = connector.id === "tavily-api";
+							const isSearxng = connector.id === "searxng";
+							const isLinkup = connector.id === "linkup-api";
+							const isBaidu = connector.id === "baidu-search-api";
 							const isLinear = connector.id === "linear-connector";
 							const isElasticsearch = connector.id === "elasticsearch-connector";
 							
@@ -107,7 +110,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 
 							const handleConnect = isWebcrawler && onCreateWebcrawler
 								? onCreateWebcrawler
-								: (isTavily || isLinear || isElasticsearch) && onConnectNonOAuth
+								: (isTavily || isSearxng || isLinkup || isBaidu || isLinear || isElasticsearch) && onConnectNonOAuth
 								? () => onConnectNonOAuth(connector.connectorType)
 								: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);
 

From aaf28616819df96a04ede5b941ab6dfdad46de79 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 16:01:45 +0530
Subject: [PATCH 16/28] feat: Add support for Slack, Discord, and Notion
 connectors, including configuration forms and benefits display, enhance
 connector dialog for new connectors, and improve overall connector management
 functionality.

---
 .../components/discord-connect-form.tsx       | 354 +++++++++++++++++
 .../components/notion-connect-form.tsx        | 353 +++++++++++++++++
 .../components/slack-connect-form.tsx         | 358 ++++++++++++++++++
 .../connect-forms/connector-benefits.ts       |  21 +
 .../connector-popup/connect-forms/index.tsx   |   9 +
 .../components/discord-config.tsx             |  92 +++++
 .../components/notion-config.tsx              |  92 +++++
 .../components/slack-config.tsx               |  92 +++++
 .../connector-configs/index.tsx               |   9 +
 .../views/connector-connect-view.tsx          |   3 +
 .../hooks/use-connector-dialog.ts             |   9 +-
 .../tabs/all-connectors-tab.tsx               |   5 +-
 12 files changed, 1393 insertions(+), 4 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/discord-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/notion-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/slack-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/discord-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/notion-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/slack-config.tsx

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/discord-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/discord-connect-form.tsx
new file mode 100644
index 000000000..4ab416aa1
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/discord-connect-form.tsx
@@ -0,0 +1,354 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { useState } from "react";
+
+const discordConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	bot_token: z
+		.string()
+		.min(10, {
+			message: "Discord Bot Token is required and must be valid.",
+		}),
+});
+
+type DiscordConnectorFormValues = z.infer<typeof discordConnectorFormSchema>;
+
+export const DiscordConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+	const form = useForm<DiscordConnectorFormValues>({
+		resolver: zodResolver(discordConnectorFormSchema),
+		defaultValues: {
+			name: "Discord Connector",
+			bot_token: "",
+		},
+	});
+
+	const handleSubmit = async (values: DiscordConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.DISCORD_CONNECTOR,
+				config: {
+					DISCORD_BOT_TOKEN: values.bot_token,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
+				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">Bot Token Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Discord Bot Token to use this connector. You can create one from{" "}
+						<a
+							href="https://discord.com/developers/applications"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							Discord Developer Portal
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="discord-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Discord Connector" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="bot_token"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Discord Bot Token</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="Your Bot Token" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your Discord Bot Token will be encrypted and stored securely.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.DISCORD_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Discord integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.DISCORD_CONNECTOR)?.map((benefit, i) => (
+							<li key={i}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The Discord connector uses the Discord API to fetch messages from all accessible channels
+								that the bot token has access to within a server.
+							</p>
+							<ul className="mt-2 list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+								<li>
+									For follow up indexing runs, the connector retrieves messages that
+									have been updated since the last indexing attempt.
+								</li>
+								<li>
+									Indexing is configured to run periodically, so updates should appear in your
+									search results within minutes.
+								</li>
+							</ul>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Authorization</h3>
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mb-4">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">Bot Token Required</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										You need to create a Discord application and bot to get a bot token.
+										The bot needs read access to channels and messages.
+									</AlertDescription>
+								</Alert>
+
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Create a Discord Application</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Go to{" "}
+												<a
+													href="https://discord.com/developers/applications"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="font-medium underline underline-offset-4"
+												>
+													https://discord.com/developers/applications
+												</a>
+											</li>
+											<li>Click <strong>New Application</strong></li>
+											<li>Enter an application name and click <strong>Create</strong></li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Create a Bot</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Navigate to <strong>Bot</strong> in the sidebar</li>
+											<li>Click <strong>Add Bot</strong> and confirm</li>
+											<li>Under <strong>Privileged Gateway Intents</strong>, enable:
+												<ul className="list-disc pl-5 mt-1 space-y-1">
+													<li><code className="bg-muted px-1 py-0.5 rounded">MESSAGE CONTENT INTENT</code> - Required to read message content</li>
+												</ul>
+											</li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 3: Get Bot Token and Invite Bot</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Under <strong>Token</strong>, click <strong>Reset Token</strong> and copy the token</li>
+											<li>Navigate to <strong>OAuth2 → URL Generator</strong></li>
+											<li>Select <strong>bot</strong> scope and <strong>Read Messages</strong> permission</li>
+											<li>Copy the generated URL and open it in your browser</li>
+											<li>Select your server and authorize the bot</li>
+										</ol>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Indexing</h3>
+								<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+									<li>
+										Navigate to the Connector Dashboard and select the <strong>Discord</strong>{" "}
+										Connector.
+									</li>
+									<li>
+										Place the <strong>Bot Token</strong> in the form field.
+									</li>
+									<li>
+										Click <strong>Connect</strong> to establish the connection.
+									</li>
+									<li>Once connected, your Discord messages will be indexed automatically.</li>
+								</ol>
+
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">What Gets Indexed</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										<p className="mb-2">The Discord connector indexes the following data:</p>
+										<ul className="list-disc pl-5 space-y-1">
+											<li>Messages from all accessible channels</li>
+											<li>Direct messages (if bot has access)</li>
+											<li>Message timestamps and metadata</li>
+											<li>Thread replies and conversations</li>
+										</ul>
+									</AlertDescription>
+								</Alert>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/notion-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/notion-connect-form.tsx
new file mode 100644
index 000000000..8a1ee740d
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/notion-connect-form.tsx
@@ -0,0 +1,353 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { useState } from "react";
+
+const notionConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	integration_token: z
+		.string()
+		.min(10, {
+			message: "Notion Integration Token is required and must be valid.",
+		}),
+});
+
+type NotionConnectorFormValues = z.infer<typeof notionConnectorFormSchema>;
+
+export const NotionConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+	const form = useForm<NotionConnectorFormValues>({
+		resolver: zodResolver(notionConnectorFormSchema),
+		defaultValues: {
+			name: "Notion Connector",
+			integration_token: "",
+		},
+	});
+
+	const handleSubmit = async (values: NotionConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.NOTION_CONNECTOR,
+				config: {
+					NOTION_INTEGRATION_TOKEN: values.integration_token,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
+				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">Integration Token Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Notion Integration Token to use this connector. You can create one from{" "}
+						<a
+							href="https://www.notion.so/my-integrations"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							Notion Integrations
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="notion-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Notion Connector" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="integration_token"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Notion Integration Token</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="ntn_..." 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your Notion Integration Token will be encrypted and stored securely. It typically starts with "ntn_".
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.NOTION_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Notion integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.NOTION_CONNECTOR)?.map((benefit, i) => (
+							<li key={i}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The Notion connector uses the Notion API to fetch pages from all accessible workspaces
+								that the integration token has access to.
+							</p>
+							<ul className="mt-2 list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+								<li>
+									For follow up indexing runs, the connector retrieves pages that
+									have been updated since the last indexing attempt.
+								</li>
+								<li>
+									Indexing is configured to run periodically, so updates should appear in your
+									search results within minutes.
+								</li>
+							</ul>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Authorization</h3>
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mb-4">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">Integration Token Required</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										You need to create a Notion integration and share pages with it to get access.
+										The integration needs read access to pages.
+									</AlertDescription>
+								</Alert>
+
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Create a Notion Integration</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Go to{" "}
+												<a
+													href="https://www.notion.so/my-integrations"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="font-medium underline underline-offset-4"
+												>
+													https://www.notion.so/my-integrations
+												</a>
+											</li>
+											<li>Click <strong>+ New integration</strong></li>
+											<li>Enter a name for your integration (e.g., "Search Connector")</li>
+											<li>Select your workspace</li>
+											<li>Under <strong>Capabilities</strong>, enable <strong>Read content</strong></li>
+											<li>Click <strong>Submit</strong> to create the integration</li>
+											<li>Copy the <strong>Internal Integration Token</strong> (starts with "ntn_")</li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Share Pages with Integration</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Open the Notion pages or databases you want to index</li>
+											<li>Click the <strong>⋯</strong> (three dots) menu in the top right</li>
+											<li>Select <strong>Add connections</strong> or <strong>Connections</strong></li>
+											<li>Search for and select your integration</li>
+											<li>Repeat for all pages you want to index</li>
+										</ol>
+										<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mt-3">
+											<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+											<AlertTitle className="text-[10px] sm:text-xs">Important</AlertTitle>
+											<AlertDescription className="text-[9px] sm:text-[10px]">
+												The integration can only access pages that have been explicitly shared with it.
+												Make sure to share all pages you want to index.
+											</AlertDescription>
+										</Alert>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Indexing</h3>
+								<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+									<li>
+										Navigate to the Connector Dashboard and select the <strong>Notion</strong>{" "}
+										Connector.
+									</li>
+									<li>
+										Place the <strong>Integration Token</strong> in the form field.
+									</li>
+									<li>
+										Click <strong>Connect</strong> to establish the connection.
+									</li>
+									<li>Once connected, your Notion pages will be indexed automatically.</li>
+								</ol>
+
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">What Gets Indexed</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										<p className="mb-2">The Notion connector indexes the following data:</p>
+										<ul className="list-disc pl-5 space-y-1">
+											<li>Page titles and content</li>
+											<li>Database entries and properties</li>
+											<li>Page metadata and properties</li>
+											<li>Nested pages and sub-pages</li>
+										</ul>
+									</AlertDescription>
+								</Alert>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/slack-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/slack-connect-form.tsx
new file mode 100644
index 000000000..2e4424bc2
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/slack-connect-form.tsx
@@ -0,0 +1,358 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { useState } from "react";
+
+const slackConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	bot_token: z
+		.string()
+		.min(10, {
+			message: "Slack Bot Token is required and must be valid.",
+		}),
+});
+
+type SlackConnectorFormValues = z.infer<typeof slackConnectorFormSchema>;
+
+export const SlackConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+	const form = useForm<SlackConnectorFormValues>({
+		resolver: zodResolver(slackConnectorFormSchema),
+		defaultValues: {
+			name: "Slack Connector",
+			bot_token: "",
+		},
+	});
+
+	const handleSubmit = async (values: SlackConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.SLACK_CONNECTOR,
+				config: {
+					SLACK_BOT_TOKEN: values.bot_token,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
+				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">Bot User OAuth Token Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Slack Bot User OAuth Token to use this connector. You can create a Slack app and get the token from{" "}
+						<a
+							href="https://api.slack.com/apps"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							Slack API Dashboard
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="slack-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Slack Connector" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="bot_token"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Slack Bot User OAuth Token</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="xoxb-..." 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your Bot User OAuth Token will be encrypted and stored securely. It typically starts with "xoxb-".
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.SLACK_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Slack integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.SLACK_CONNECTOR)?.map((benefit, i) => (
+							<li key={i}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The Slack connector uses the Slack Web API to fetch messages from all accessible channels
+								that the bot token has access to within a workspace.
+							</p>
+							<ul className="mt-2 list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+								<li>
+									For follow up indexing runs, the connector retrieves messages that
+									have been updated since the last indexing attempt.
+								</li>
+								<li>
+									Indexing is configured to run periodically, so updates should appear in your
+									search results within minutes.
+								</li>
+							</ul>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Authorization</h3>
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mb-4">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">Bot User OAuth Token Required</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										You need to create a Slack app and install it to your workspace to get a Bot User OAuth Token.
+										The bot needs read access to channels and messages.
+									</AlertDescription>
+								</Alert>
+
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Create a Slack App</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Go to{" "}
+												<a
+													href="https://api.slack.com/apps"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="font-medium underline underline-offset-4"
+												>
+													https://api.slack.com/apps
+												</a>
+											</li>
+											<li>Click <strong>Create New App</strong> and choose "From scratch"</li>
+											<li>Enter an app name and select your workspace</li>
+											<li>Click <strong>Create App</strong></li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Configure Bot Scopes</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Navigate to <strong>OAuth & Permissions</strong> in the sidebar</li>
+											<li>Under <strong>Bot Token Scopes</strong>, add the following scopes:
+												<ul className="list-disc pl-5 mt-1 space-y-1">
+													<li><code className="bg-muted px-1 py-0.5 rounded">channels:read</code> - View basic information about public channels</li>
+													<li><code className="bg-muted px-1 py-0.5 rounded">channels:history</code> - View messages in public channels</li>
+													<li><code className="bg-muted px-1 py-0.5 rounded">groups:read</code> - View basic information about private channels</li>
+													<li><code className="bg-muted px-1 py-0.5 rounded">groups:history</code> - View messages in private channels</li>
+													<li><code className="bg-muted px-1 py-0.5 rounded">im:read</code> - View basic information about direct messages</li>
+													<li><code className="bg-muted px-1 py-0.5 rounded">im:history</code> - View messages in direct messages</li>
+												</ul>
+											</li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 3: Install App to Workspace</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Go to <strong>Install App</strong> in the sidebar</li>
+											<li>Click <strong>Install to Workspace</strong></li>
+											<li>Review the permissions and click <strong>Allow</strong></li>
+											<li>Copy the <strong>Bot User OAuth Token</strong> from the "OAuth & Permissions" page (starts with "xoxb-")</li>
+										</ol>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Indexing</h3>
+								<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+									<li>
+										Navigate to the Connector Dashboard and select the <strong>Slack</strong>{" "}
+										Connector.
+									</li>
+									<li>
+										Place the <strong>Bot User OAuth Token</strong> in the form field.
+									</li>
+									<li>
+										Click <strong>Connect</strong> to establish the connection.
+									</li>
+									<li>Once connected, your Slack messages will be indexed automatically.</li>
+								</ol>
+
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">What Gets Indexed</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										<p className="mb-2">The Slack connector indexes the following data:</p>
+										<ul className="list-disc pl-5 space-y-1">
+											<li>Messages from all accessible channels (public and private)</li>
+											<li>Direct messages (if bot has access)</li>
+											<li>Message timestamps and metadata</li>
+											<li>Thread replies and conversations</li>
+										</ul>
+									</AlertDescription>
+								</Alert>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
index 362a8ffa3..ab70d7835 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
@@ -38,6 +38,27 @@ export function getConnectorBenefits(connectorType: string): string[] | null {
 			"Real-time information from Baidu's search index",
 			"AI-powered summarization with source references",
 		],
+		SLACK_CONNECTOR: [
+			"Search through all your Slack messages and conversations",
+			"Access messages from public and private channels",
+			"Connect your team's communications directly to your search space",
+			"Keep your search results up-to-date with latest Slack content",
+			"Index your Slack conversations for enhanced search capabilities",
+		],
+		DISCORD_CONNECTOR: [
+			"Search through all your Discord messages and conversations",
+			"Access messages from all accessible channels",
+			"Connect your community's communications directly to your search space",
+			"Keep your search results up-to-date with latest Discord content",
+			"Index your Discord conversations for enhanced search capabilities",
+		],
+		NOTION_CONNECTOR: [
+			"Search through all your Notion pages and databases",
+			"Access page content, properties, and metadata",
+			"Connect your knowledge base directly to your search space",
+			"Keep your search results up-to-date with latest Notion content",
+			"Index your Notion workspace for enhanced search capabilities",
+		],
 		// Add other connectors as needed
 		// GITHUB_CONNECTOR: [...],
 	};
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
index 2a1170303..d06fd7125 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
@@ -1,9 +1,12 @@
 import type { FC } from "react";
 import { BaiduSearchApiConnectForm } from "./components/baidu-search-api-connect-form";
+import { DiscordConnectForm } from "./components/discord-connect-form";
 import { ElasticsearchConnectForm } from "./components/elasticsearch-connect-form";
 import { LinearConnectForm } from "./components/linear-connect-form";
 import { LinkupApiConnectForm } from "./components/linkup-api-connect-form";
+import { NotionConnectForm } from "./components/notion-connect-form";
 import { SearxngConnectForm } from "./components/searxng-connect-form";
+import { SlackConnectForm } from "./components/slack-connect-form";
 import { TavilyApiConnectForm } from "./components/tavily-api-connect-form";
 
 export interface ConnectFormProps {
@@ -47,6 +50,12 @@ export function getConnectFormComponent(
 			return LinearConnectForm;
 		case "ELASTICSEARCH_CONNECTOR":
 			return ElasticsearchConnectForm;
+		case "SLACK_CONNECTOR":
+			return SlackConnectForm;
+		case "DISCORD_CONNECTOR":
+			return DiscordConnectForm;
+		case "NOTION_CONNECTOR":
+			return NotionConnectForm;
 		// Add other connector types here as needed
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/discord-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/discord-config.tsx
new file mode 100644
index 000000000..a4f833367
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/discord-config.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface DiscordConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const DiscordConfig: FC<DiscordConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [botToken, setBotToken] = useState<string>(
+		(connector.config?.DISCORD_BOT_TOKEN as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update bot token and name when connector changes
+	useEffect(() => {
+		const token = (connector.config?.DISCORD_BOT_TOKEN as string) || "";
+		setBotToken(token);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleBotTokenChange = (value: string) => {
+		setBotToken(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				DISCORD_BOT_TOKEN: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Discord Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="flex items-center gap-2 text-xs sm:text-sm">
+						<KeyRound className="h-4 w-4" />
+						Discord Bot Token
+					</Label>
+					<Input
+						type="password"
+						value={botToken}
+						onChange={(e) => handleBotTokenChange(e.target.value)}
+						placeholder="Your Bot Token"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update your Discord Bot Token if needed.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/notion-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/notion-config.tsx
new file mode 100644
index 000000000..505e0afa8
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/notion-config.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface NotionConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const NotionConfig: FC<NotionConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [integrationToken, setIntegrationToken] = useState<string>(
+		(connector.config?.NOTION_INTEGRATION_TOKEN as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update integration token and name when connector changes
+	useEffect(() => {
+		const token = (connector.config?.NOTION_INTEGRATION_TOKEN as string) || "";
+		setIntegrationToken(token);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleIntegrationTokenChange = (value: string) => {
+		setIntegrationToken(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				NOTION_INTEGRATION_TOKEN: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Notion Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="flex items-center gap-2 text-xs sm:text-sm">
+						<KeyRound className="h-4 w-4" />
+						Notion Integration Token
+					</Label>
+					<Input
+						type="password"
+						value={integrationToken}
+						onChange={(e) => handleIntegrationTokenChange(e.target.value)}
+						placeholder="Begins with secret_..."
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update your Notion Integration Token if needed.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/slack-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/slack-config.tsx
new file mode 100644
index 000000000..554b5dd66
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/slack-config.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface SlackConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const SlackConfig: FC<SlackConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [botToken, setBotToken] = useState<string>(
+		(connector.config?.SLACK_BOT_TOKEN as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update bot token and name when connector changes
+	useEffect(() => {
+		const token = (connector.config?.SLACK_BOT_TOKEN as string) || "";
+		setBotToken(token);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleBotTokenChange = (value: string) => {
+		setBotToken(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				SLACK_BOT_TOKEN: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Slack Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="flex items-center gap-2 text-xs sm:text-sm">
+						<KeyRound className="h-4 w-4" />
+						Slack Bot User OAuth Token
+					</Label>
+					<Input
+						type="password"
+						value={botToken}
+						onChange={(e) => handleBotTokenChange(e.target.value)}
+						placeholder="Begins with xoxb-..."
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update your Bot User OAuth Token if needed.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
index 5674a4a3e..6f5afaec0 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -3,11 +3,14 @@
 import type { FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { BaiduSearchApiConfig } from "./components/baidu-search-api-config";
+import { DiscordConfig } from "./components/discord-config";
 import { ElasticsearchConfig } from "./components/elasticsearch-config";
 import { GoogleDriveConfig } from "./components/google-drive-config";
 import { LinearConfig } from "./components/linear-config";
 import { LinkupApiConfig } from "./components/linkup-api-config";
+import { NotionConfig } from "./components/notion-config";
 import { SearxngConfig } from "./components/searxng-config";
+import { SlackConfig } from "./components/slack-config";
 import { TavilyApiConfig } from "./components/tavily-api-config";
 import { WebcrawlerConfig } from "./components/webcrawler-config";
 
@@ -42,6 +45,12 @@ export function getConnectorConfigComponent(
 			return WebcrawlerConfig;
 		case "ELASTICSEARCH_CONNECTOR":
 			return ElasticsearchConfig;
+		case "SLACK_CONNECTOR":
+			return SlackConfig;
+		case "DISCORD_CONNECTOR":
+			return DiscordConfig;
+		case "NOTION_CONNECTOR":
+			return NotionConfig;
 		// OAuth connectors (Gmail, Calendar, Airtable) and others don't need special config UI
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
index a7c95fea8..9965f721b 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
@@ -49,6 +49,9 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 			BAIDU_SEARCH_API: "baidu-search-api-connect-form",
 			LINEAR_CONNECTOR: "linear-connect-form",
 			ELASTICSEARCH_CONNECTOR: "elasticsearch-connect-form",
+			SLACK_CONNECTOR: "slack-connect-form",
+			DISCORD_CONNECTOR: "discord-connect-form",
+			NOTION_CONNECTOR: "notion-connect-form",
 		};
 		const formId = formIdMap[connectorType];
 		if (formId) {
diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
index 7843561e8..97bc06685 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@@ -657,7 +657,7 @@ export const useConnectorDialog = () => {
 			(oauthConnector) => oauthConnector.connectorType === connector.connector_type
 		);
 		
-		// Check if this is webcrawler, Tavily API, SearxNG, Linkup, Baidu, Linear, or Elasticsearch (can be managed in popup)
+		// Check if this is webcrawler, Tavily API, SearxNG, Linkup, Baidu, Linear, Elasticsearch, Slack, Discord, or Notion (can be managed in popup)
 		const isWebcrawler = connector.connector_type === EnumConnectorName.WEBCRAWLER_CONNECTOR;
 		const isTavilyApi = connector.connector_type === EnumConnectorName.TAVILY_API;
 		const isSearxng = connector.connector_type === EnumConnectorName.SEARXNG_API;
@@ -665,9 +665,12 @@ export const useConnectorDialog = () => {
 		const isBaidu = connector.connector_type === EnumConnectorName.BAIDU_SEARCH_API;
 		const isLinear = connector.connector_type === EnumConnectorName.LINEAR_CONNECTOR;
 		const isElasticsearch = connector.connector_type === EnumConnectorName.ELASTICSEARCH_CONNECTOR;
+		const isSlack = connector.connector_type === EnumConnectorName.SLACK_CONNECTOR;
+		const isDiscord = connector.connector_type === EnumConnectorName.DISCORD_CONNECTOR;
+		const isNotion = connector.connector_type === EnumConnectorName.NOTION_CONNECTOR;
 		
-		// If not OAuth, not webcrawler, not Tavily API, not SearxNG, not Linkup, not Baidu, not Linear, and not Elasticsearch, redirect to old connector edit page
-		if (!isOAuthConnector && !isWebcrawler && !isTavilyApi && !isSearxng && !isLinkup && !isBaidu && !isLinear && !isElasticsearch) {
+		// If not OAuth, not webcrawler, not Tavily API, not SearxNG, not Linkup, not Baidu, not Linear, not Elasticsearch, not Slack, not Discord, and not Notion, redirect to old connector edit page
+		if (!isOAuthConnector && !isWebcrawler && !isTavilyApi && !isSearxng && !isLinkup && !isBaidu && !isLinear && !isElasticsearch && !isSlack && !isDiscord && !isNotion) {
 			router.push(`/dashboard/${searchSpaceId}/connectors/${connector.id}/edit`);
 			return;
 		}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 0d5d0ef1c..76b93b930 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -99,6 +99,9 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 							const isBaidu = connector.id === "baidu-search-api";
 							const isLinear = connector.id === "linear-connector";
 							const isElasticsearch = connector.id === "elasticsearch-connector";
+							const isSlack = connector.id === "slack-connector";
+							const isDiscord = connector.id === "discord-connector";
+							const isNotion = connector.id === "notion-connector";
 							
 							const isConnected = connectedTypes.has(connector.connectorType);
 							const isConnecting = connectingId === connector.id;
@@ -110,7 +113,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 
 							const handleConnect = isWebcrawler && onCreateWebcrawler
 								? onCreateWebcrawler
-								: (isTavily || isSearxng || isLinkup || isBaidu || isLinear || isElasticsearch) && onConnectNonOAuth
+								: (isTavily || isSearxng || isLinkup || isBaidu || isLinear || isElasticsearch || isSlack || isDiscord || isNotion) && onConnectNonOAuth
 								? () => onConnectNonOAuth(connector.connectorType)
 								: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);
 

From 21146485e6f71c35efc0231bc3f93fd696bc731c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 16:27:30 +0530
Subject: [PATCH 17/28] feat: Add support for Confluence, BookStack, GitHub,
 Jira, ClickUp, and Luma connectors, including configuration forms and
 benefits display, enhance connector dialog for new connectors, and improve
 overall connector management functionality.

---
 .../components/bookstack-connect-form.tsx     | 379 ++++++++++++++++
 .../components/clickup-connect-form.tsx       | 344 ++++++++++++++
 .../components/confluence-connect-form.tsx    | 405 +++++++++++++++++
 .../components/discord-connect-form.tsx       |   4 +-
 .../components/github-connect-form.tsx        | 419 ++++++++++++++++++
 .../components/jira-connect-form.tsx          | 407 +++++++++++++++++
 .../components/linear-connect-form.tsx        |   4 +-
 .../components/luma-connect-form.tsx          | 342 ++++++++++++++
 .../components/notion-connect-form.tsx        |   4 +-
 .../components/slack-connect-form.tsx         |   4 +-
 .../connect-forms/connector-benefits.ts       |  44 +-
 .../connector-popup/connect-forms/index.tsx   |  18 +
 .../components/bookstack-config.tsx           | 151 +++++++
 .../components/clickup-config.tsx             |  92 ++++
 .../components/confluence-config.tsx          | 152 +++++++
 .../components/github-config.tsx              | 150 +++++++
 .../components/jira-config.tsx                | 152 +++++++
 .../components/luma-config.tsx                |  92 ++++
 .../connector-configs/index.tsx               |  18 +
 .../views/connector-connect-view.tsx          |   6 +
 .../tabs/all-connectors-tab.tsx               |   8 +-
 surfsense_web/lib/connectors/utils.ts         |   1 +
 22 files changed, 3185 insertions(+), 11 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/bookstack-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/clickup-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/confluence-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/github-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/jira-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/luma-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/bookstack-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/clickup-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/confluence-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/github-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/jira-config.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/luma-config.tsx

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/bookstack-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/bookstack-connect-form.tsx
new file mode 100644
index 000000000..ff3dc07b5
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/bookstack-connect-form.tsx
@@ -0,0 +1,379 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { useState } from "react";
+
+const bookstackConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	base_url: z.string().url({ message: "Please enter a valid BookStack base URL." }),
+	token_id: z.string().min(1, {
+		message: "BookStack Token ID is required.",
+	}),
+	token_secret: z.string().min(1, {
+		message: "BookStack Token Secret is required.",
+	}),
+});
+
+type BookStackConnectorFormValues = z.infer<typeof bookstackConnectorFormSchema>;
+
+export const BookStackConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+	const form = useForm<BookStackConnectorFormValues>({
+		resolver: zodResolver(bookstackConnectorFormSchema),
+		defaultValues: {
+			name: "BookStack Connector",
+			base_url: "",
+			token_id: "",
+			token_secret: "",
+		},
+	});
+
+	const handleSubmit = async (values: BookStackConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.BOOKSTACK_CONNECTOR,
+				config: {
+					BOOKSTACK_BASE_URL: values.base_url,
+					BOOKSTACK_TOKEN_ID: values.token_id,
+					BOOKSTACK_TOKEN_SECRET: values.token_secret,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
+				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Token Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a BookStack API Token to use this connector. You can create one from your BookStack instance settings.
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="bookstack-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My BookStack Connector" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="base_url"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">BookStack Base URL</FormLabel>
+									<FormControl>
+										<Input 
+											type="url"
+											placeholder="https://your-bookstack-instance.com" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										The base URL of your BookStack instance (e.g., https://your-bookstack-instance.com).
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="token_id"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Token ID</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="Your Token ID" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your BookStack API Token ID.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="token_secret"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Token Secret</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="Your Token Secret" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your BookStack API Token Secret will be encrypted and stored securely.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.BOOKSTACK_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with BookStack integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.BOOKSTACK_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The BookStack connector uses the BookStack REST API to fetch all pages from your BookStack instance that your account has access to.
+							</p>
+							<ul className="mt-2 list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+								<li>
+									For follow up indexing runs, the connector retrieves pages that have been updated since the last indexing attempt.
+								</li>
+								<li>
+									Indexing is configured to run periodically, so updates should appear in your search results within minutes.
+								</li>
+							</ul>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Authorization</h3>
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mb-4">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">API Token Required</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										You need to create an API token from your BookStack instance. The token requires "Access System API" permission.
+									</AlertDescription>
+								</Alert>
+
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Create an API Token</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Log in to your BookStack instance</li>
+											<li>Click on your profile icon → Edit Profile</li>
+											<li>Navigate to the "API Tokens" tab</li>
+											<li>Click "Create Token" and give it a name</li>
+											<li>Copy both the Token ID and Token Secret</li>
+											<li>Paste them in the form above</li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Grant necessary access</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-3">
+											Your user account must have "Access System API" permission. The connector will only index content your account can view.
+										</p>
+										<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+											<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+											<AlertTitle className="text-[10px] sm:text-xs">Rate Limiting</AlertTitle>
+											<AlertDescription className="text-[9px] sm:text-[10px]">
+												BookStack API has a rate limit of 180 requests per minute. The connector automatically handles rate limiting to ensure reliable indexing.
+											</AlertDescription>
+										</Alert>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Indexing</h3>
+								<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+									<li>
+										Navigate to the Connector Dashboard and select the <strong>BookStack</strong> Connector.
+									</li>
+									<li>
+										Enter your <strong>BookStack Instance URL</strong> (e.g., https://docs.example.com)
+									</li>
+									<li>
+										Enter your <strong>Token ID</strong> and <strong>Token Secret</strong> from your BookStack API token.
+									</li>
+									<li>
+										Click <strong>Connect</strong> to establish the connection.
+									</li>
+									<li>Once connected, your BookStack pages will be indexed automatically.</li>
+								</ol>
+
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">What Gets Indexed</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										<p className="mb-2">The BookStack connector indexes the following data:</p>
+										<ul className="list-disc pl-5 space-y-1">
+											<li>All pages from your BookStack instance</li>
+											<li>Page content in Markdown format</li>
+											<li>Page titles and metadata</li>
+											<li>Book and chapter hierarchy information</li>
+										</ul>
+									</AlertDescription>
+								</Alert>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/clickup-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/clickup-connect-form.tsx
new file mode 100644
index 000000000..b4e844a8c
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/clickup-connect-form.tsx
@@ -0,0 +1,344 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { useState } from "react";
+
+const clickupConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	api_token: z.string().min(10, {
+		message: "ClickUp API Token is required and must be valid.",
+	}),
+});
+
+type ClickUpConnectorFormValues = z.infer<typeof clickupConnectorFormSchema>;
+
+export const ClickUpConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+	const form = useForm<ClickUpConnectorFormValues>({
+		resolver: zodResolver(clickupConnectorFormSchema),
+		defaultValues: {
+			name: "ClickUp Connector",
+			api_token: "",
+		},
+	});
+
+	const handleSubmit = async (values: ClickUpConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.CLICKUP_CONNECTOR,
+				config: {
+					CLICKUP_API_TOKEN: values.api_token,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
+				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Token Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a ClickUp API Token to use this connector. You can create one from{" "}
+						<a
+							href="https://app.clickup.com/settings/apps"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							ClickUp Settings
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="clickup-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My ClickUp Connector" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="api_token"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">ClickUp API Token</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="pk_..." 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your ClickUp API Token will be encrypted and stored securely.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.CLICKUP_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with ClickUp integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.CLICKUP_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The ClickUp connector uses the ClickUp API to fetch all tasks and projects that your API token has access to within your workspace.
+							</p>
+							<ul className="mt-2 list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+								<li>
+									For follow up indexing runs, the connector retrieves tasks that have been updated since the last indexing attempt.
+								</li>
+								<li>
+									Indexing is configured to run periodically, so updates should appear in your search results within minutes.
+								</li>
+							</ul>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Authorization</h3>
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mb-4">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">API Token Required</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										You need a ClickUp personal API token to use this connector. The token will be used to read your ClickUp data.
+									</AlertDescription>
+								</Alert>
+
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Get Your API Token</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Log in to your ClickUp account</li>
+											<li>Click your avatar in the upper-right corner and select "Settings"</li>
+											<li>In the sidebar, click "Apps"</li>
+											<li>
+												Under "API Token", click <strong>Generate</strong> or <strong>Regenerate</strong>
+											</li>
+											<li>Copy the generated token (it typically starts with "pk_")</li>
+											<li>
+												Paste it in the form above. You can also visit{" "}
+												<a
+													href="https://app.clickup.com/settings/apps"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="font-medium underline underline-offset-4"
+												>
+													ClickUp API Settings
+												</a>{" "}
+												directly.
+											</li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Grant necessary access</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-3">
+											The API Token will have access to all tasks and projects that your user account can see. Make sure your account has appropriate permissions for the workspaces you want to index.
+										</p>
+										<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+											<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+											<AlertTitle className="text-[10px] sm:text-xs">Data Privacy</AlertTitle>
+											<AlertDescription className="text-[9px] sm:text-[10px]">
+												Only tasks, comments, and basic metadata will be indexed. ClickUp attachments and linked files are not indexed by this connector.
+											</AlertDescription>
+										</Alert>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Indexing</h3>
+								<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+									<li>
+										Navigate to the Connector Dashboard and select the <strong>ClickUp</strong> Connector.
+									</li>
+									<li>
+										Place your <strong>API Token</strong> in the form field.
+									</li>
+									<li>
+										Click <strong>Connect</strong> to establish the connection.
+									</li>
+									<li>Once connected, your ClickUp tasks will be indexed automatically.</li>
+								</ol>
+
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">What Gets Indexed</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										<p className="mb-2">The ClickUp connector indexes the following data:</p>
+										<ul className="list-disc pl-5 space-y-1">
+											<li>Task names and descriptions</li>
+											<li>Task comments and discussion threads</li>
+											<li>Task status, priority, and assignee information</li>
+											<li>Project and workspace information</li>
+										</ul>
+									</AlertDescription>
+								</Alert>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/confluence-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/confluence-connect-form.tsx
new file mode 100644
index 000000000..f4a5f0431
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/confluence-connect-form.tsx
@@ -0,0 +1,405 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { useState } from "react";
+
+const confluenceConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	base_url: z.string().url({ message: "Please enter a valid Confluence base URL." }),
+	email: z.string().email({ message: "Please enter a valid email address." }),
+	api_token: z.string().min(10, {
+		message: "Confluence API Token is required and must be valid.",
+	}),
+});
+
+type ConfluenceConnectorFormValues = z.infer<typeof confluenceConnectorFormSchema>;
+
+export const ConfluenceConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+	const form = useForm<ConfluenceConnectorFormValues>({
+		resolver: zodResolver(confluenceConnectorFormSchema),
+		defaultValues: {
+			name: "Confluence Connector",
+			base_url: "",
+			email: "",
+			api_token: "",
+		},
+	});
+
+	const handleSubmit = async (values: ConfluenceConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.CONFLUENCE_CONNECTOR,
+				config: {
+					CONFLUENCE_BASE_URL: values.base_url,
+					CONFLUENCE_EMAIL: values.email,
+					CONFLUENCE_API_TOKEN: values.api_token,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
+				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Token Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Confluence API Token to use this connector. You can create one from{" "}
+						<a
+							href="https://id.atlassian.com/manage-profile/security/api-tokens"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							Atlassian Account Settings
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="confluence-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Confluence Connector" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="base_url"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Confluence Base URL</FormLabel>
+									<FormControl>
+										<Input 
+											type="url"
+											placeholder="https://your-domain.atlassian.net" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										The base URL of your Confluence instance (e.g., https://your-domain.atlassian.net).
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="email"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Email Address</FormLabel>
+									<FormControl>
+										<Input 
+											type="email"
+											placeholder="your-email@example.com" 
+											autoComplete="email"
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										The email address associated with your Atlassian account.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="api_token"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">API Token</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="Your API Token" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your Confluence API Token will be encrypted and stored securely.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.CONFLUENCE_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Confluence integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.CONFLUENCE_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The Confluence connector uses the Confluence REST API to fetch all pages and comments that your account has access to within your Confluence instance.
+							</p>
+							<ul className="mt-2 list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+								<li>
+									For follow up indexing runs, the connector retrieves pages and comments that have been updated since the last indexing attempt.
+								</li>
+								<li>
+									Indexing is configured to run periodically, so updates should appear in your search results within minutes.
+								</li>
+							</ul>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Authorization</h3>
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mb-4">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">Read-Only Access is Sufficient</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										You only need read access for this connector to work. The API Token will only be used to read your Confluence data.
+									</AlertDescription>
+								</Alert>
+
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Create an API Token</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Log in to your Atlassian account</li>
+											<li>
+												Navigate to{" "}
+												<a
+													href="https://id.atlassian.com/manage-profile/security/api-tokens"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="font-medium underline underline-offset-4"
+												>
+													https://id.atlassian.com/manage-profile/security/api-tokens
+												</a>{" "}
+												in your browser.
+											</li>
+											<li>
+												Click <strong>Create API token</strong>
+											</li>
+											<li>Enter a label for your token (like "SurfSense Connector")</li>
+											<li>
+												Click <strong>Create</strong>
+											</li>
+											<li>Copy the generated token as it will only be shown once</li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Grant necessary access</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-3">
+											The API Token will have access to all spaces and pages that your user account can see. Make sure your account has appropriate permissions for the spaces you want to index.
+										</p>
+										<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+											<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+											<AlertTitle className="text-[10px] sm:text-xs">Data Privacy</AlertTitle>
+											<AlertDescription className="text-[9px] sm:text-[10px]">
+												Only pages, comments, and basic metadata will be indexed. Confluence attachments and linked files are not indexed by this connector.
+											</AlertDescription>
+										</Alert>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Indexing</h3>
+								<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+									<li>
+										Navigate to the Connector Dashboard and select the <strong>Confluence</strong> Connector.
+									</li>
+									<li>
+										Enter your <strong>Confluence Instance URL</strong> (e.g., https://yourcompany.atlassian.net)
+									</li>
+									<li>
+										Enter your <strong>Email Address</strong> associated with your Atlassian account
+									</li>
+									<li>
+										Place your <strong>API Token</strong> in the form field.
+									</li>
+									<li>
+										Click <strong>Connect</strong> to establish the connection.
+									</li>
+									<li>Once connected, your Confluence pages will be indexed automatically.</li>
+								</ol>
+
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">What Gets Indexed</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										<p className="mb-2">The Confluence connector indexes the following data:</p>
+										<ul className="list-disc pl-5 space-y-1">
+											<li>All pages from accessible spaces</li>
+											<li>Page content and metadata</li>
+											<li>Comments on pages (both footer and inline comments)</li>
+											<li>Page titles and descriptions</li>
+										</ul>
+									</AlertDescription>
+								</Alert>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/discord-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/discord-connect-form.tsx
index 4ab416aa1..c7ede6181 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/discord-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/discord-connect-form.tsx
@@ -223,8 +223,8 @@ export const DiscordConnectForm: FC<ConnectFormProps> = ({
 				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
 					<h4 className="text-xs sm:text-sm font-medium">What you get with Discord integration:</h4>
 					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
-						{getConnectorBenefits(EnumConnectorName.DISCORD_CONNECTOR)?.map((benefit, i) => (
-							<li key={i}>{benefit}</li>
+						{getConnectorBenefits(EnumConnectorName.DISCORD_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
 						))}
 					</ul>
 				</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/github-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/github-connect-form.tsx
new file mode 100644
index 000000000..c36034f8f
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/github-connect-form.tsx
@@ -0,0 +1,419 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+
+const githubConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	github_pat: z
+		.string()
+		.min(20, {
+			message: "GitHub Personal Access Token seems too short.",
+		})
+		.refine((pat) => pat.startsWith("ghp_") || pat.startsWith("github_pat_"), {
+			message: "GitHub PAT should start with 'ghp_' or 'github_pat_'",
+		}),
+	repo_full_names: z.string().min(1, {
+		message: "At least one repository is required.",
+	}),
+});
+
+type GithubConnectorFormValues = z.infer<typeof githubConnectorFormSchema>;
+
+export const GithubConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+	const form = useForm<GithubConnectorFormValues>({
+		resolver: zodResolver(githubConnectorFormSchema),
+		defaultValues: {
+			name: "GitHub Connector",
+			github_pat: "",
+			repo_full_names: "",
+		},
+	});
+
+	const stringToArray = (str: string): string[] => {
+		const items = str
+			.split(",")
+			.map((item) => item.trim())
+			.filter((item) => item.length > 0);
+		return Array.from(new Set(items));
+	};
+
+	const handleSubmit = async (values: GithubConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			const repoList = stringToArray(values.repo_full_names);
+			
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.GITHUB_CONNECTOR,
+				config: {
+					GITHUB_PAT: values.github_pat,
+					repo_full_names: repoList,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
+				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">Personal Access Token Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a GitHub Personal Access Token to use this connector. You can create one from{" "}
+						<a
+							href="https://github.com/settings/tokens"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							GitHub Settings
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="github-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My GitHub Connector" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="github_pat"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">GitHub Personal Access Token</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="ghp_..." 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your GitHub PAT will be encrypted and stored securely. It typically starts with "ghp_" or "github_pat_".
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="repo_full_names"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Repository Names</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="owner/repo1, owner/repo2" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Comma-separated list of repository full names (e.g., "owner/repo1, owner/repo2").
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Show parsed repositories as badges */}
+						{form.watch("repo_full_names")?.trim() && (
+							<div className="rounded-lg border border-border bg-muted/50 p-3">
+								<h4 className="text-[10px] sm:text-xs font-medium mb-2">Selected Repositories:</h4>
+								<div className="flex flex-wrap gap-2">
+									{stringToArray(form.watch("repo_full_names") ?? "").map((repo) => (
+										<Badge key={repo} variant="secondary" className="text-[10px]">
+											{repo}
+										</Badge>
+									))}
+								</div>
+							</div>
+						)}
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.GITHUB_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with GitHub integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.GITHUB_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The GitHub connector uses a Personal Access Token (PAT) to authenticate with the GitHub API. You provide a comma-separated list of repository full names (e.g., "owner/repo1, owner/repo2") that you want to index. The connector indexes relevant files (code, markdown, text) from the selected repositories.
+							</p>
+							<ul className="mt-2 list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+								<li>
+									The connector indexes files based on common code and documentation extensions.
+								</li>
+								<li>Large files (over 1MB) are skipped during indexing.</li>
+								<li>Only specified repositories are indexed.</li>
+								<li>
+									Indexing runs periodically (check connector settings for frequency) to keep content up-to-date.
+								</li>
+							</ul>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Authorization</h3>
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mb-4">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">Personal Access Token Required</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										You'll need a GitHub PAT with the appropriate scopes (e.g., 'repo') to fetch repositories. The PAT will be stored securely to enable indexing.
+									</AlertDescription>
+								</Alert>
+
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Generate GitHub PAT</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>
+												Go to your GitHub{" "}
+												<a
+													href="https://github.com/settings/tokens"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="font-medium underline underline-offset-4"
+												>
+													Developer settings
+												</a>
+											</li>
+											<li>
+												Click on <strong>Personal access tokens</strong>, then choose{" "}
+												<strong>Tokens (classic)</strong> or <strong>Fine-grained tokens</strong> (recommended if available).
+											</li>
+											<li>
+												Click <strong>Generate new token</strong> (and choose the appropriate type).
+											</li>
+											<li>
+												Give your token a descriptive name (e.g., "SurfSense Connector").
+											</li>
+											<li>
+												Set an expiration date for the token (recommended for security).
+											</li>
+											<li>
+												Under <strong>Select scopes</strong> (for classic tokens) or <strong>Repository access</strong> (for fine-grained), grant the necessary permissions. At minimum, the <strong>`repo`</strong> scope (or equivalent read access to repositories for fine-grained tokens) is required to read repository content.
+											</li>
+											<li>
+												Click <strong>Generate token</strong>.
+											</li>
+											<li>
+												<strong>Important:</strong> Copy your new PAT immediately. You won't be able to see it again after leaving the page.
+											</li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Specify repositories</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-3">
+											Enter a comma-separated list of repository full names in the format "owner/repo1, owner/repo2". The connector will index files from only the specified repositories.
+										</p>
+										<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+											<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+											<AlertTitle className="text-[10px] sm:text-xs">Repository Access</AlertTitle>
+											<AlertDescription className="text-[9px] sm:text-[10px]">
+												Make sure your PAT has access to all repositories you want to index. Private repositories require appropriate permissions.
+											</AlertDescription>
+										</Alert>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Indexing</h3>
+								<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+									<li>
+										Navigate to the Connector Dashboard and select the <strong>GitHub</strong> Connector.
+									</li>
+									<li>
+										Enter your <strong>GitHub Personal Access Token</strong> in the form field.
+									</li>
+									<li>
+										Enter a comma-separated list of <strong>Repository Names</strong> (e.g., "owner/repo1, owner/repo2").
+									</li>
+									<li>
+										Click <strong>Connect</strong> to establish the connection.
+									</li>
+									<li>Once connected, your GitHub repositories will be indexed automatically.</li>
+								</ol>
+
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">What Gets Indexed</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										<p className="mb-2">The GitHub connector indexes the following data:</p>
+										<ul className="list-disc pl-5 space-y-1">
+											<li>Code files from selected repositories</li>
+											<li>README files and Markdown documentation</li>
+											<li>Common text-based file formats</li>
+											<li>Repository metadata and structure</li>
+										</ul>
+									</AlertDescription>
+								</Alert>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/jira-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/jira-connect-form.tsx
new file mode 100644
index 000000000..c87010eb5
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/jira-connect-form.tsx
@@ -0,0 +1,407 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { useState } from "react";
+
+const jiraConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	base_url: z.string().url({ message: "Please enter a valid Jira base URL." }),
+	email: z.string().email({ message: "Please enter a valid email address." }),
+	api_token: z.string().min(10, {
+		message: "Jira API Token is required and must be valid.",
+	}),
+});
+
+type JiraConnectorFormValues = z.infer<typeof jiraConnectorFormSchema>;
+
+export const JiraConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+	const form = useForm<JiraConnectorFormValues>({
+		resolver: zodResolver(jiraConnectorFormSchema),
+		defaultValues: {
+			name: "Jira Connector",
+			base_url: "",
+			email: "",
+			api_token: "",
+		},
+	});
+
+	const handleSubmit = async (values: JiraConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.JIRA_CONNECTOR,
+				config: {
+					JIRA_BASE_URL: values.base_url,
+					JIRA_EMAIL: values.email,
+					JIRA_API_TOKEN: values.api_token,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
+				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Token Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Jira API Token to use this connector. You can create one from{" "}
+						<a
+							href="https://id.atlassian.com/manage-profile/security/api-tokens"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							Atlassian Account Settings
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="jira-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Jira Connector" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="base_url"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Jira Base URL</FormLabel>
+									<FormControl>
+										<Input 
+											type="url"
+											placeholder="https://your-domain.atlassian.net" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										The base URL of your Jira instance (e.g., https://your-domain.atlassian.net).
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="email"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Email Address</FormLabel>
+									<FormControl>
+										<Input 
+											type="email"
+											placeholder="your-email@example.com" 
+											autoComplete="email"
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										The email address associated with your Atlassian account.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="api_token"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">API Token</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="Your API Token" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your Jira API Token will be encrypted and stored securely.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.JIRA_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Jira integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.JIRA_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The Jira connector uses the Jira REST API with Basic Authentication to fetch all issues and comments that your account has access to within your Jira instance.
+							</p>
+							<ul className="mt-2 list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+								<li>
+									For follow up indexing runs, the connector retrieves issues and comments that have been updated since the last indexing attempt.
+								</li>
+								<li>
+									Indexing is configured to run periodically, so updates should appear in your search results within minutes.
+								</li>
+							</ul>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Authorization</h3>
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mb-4">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">Read-Only Access is Sufficient</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										You only need read access for this connector to work. The API Token will only be used to read your Jira data.
+									</AlertDescription>
+								</Alert>
+
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Create an API Token</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Log in to your Atlassian account</li>
+											<li>
+												Navigate to{" "}
+												<a
+													href="https://id.atlassian.com/manage-profile/security/api-tokens"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="font-medium underline underline-offset-4"
+												>
+													https://id.atlassian.com/manage-profile/security/api-tokens
+												</a>{" "}
+												in your browser.
+											</li>
+											<li>
+												Click <strong>Create API token</strong>
+											</li>
+											<li>Enter a label for your token (like "SurfSense Connector")</li>
+											<li>
+												Click <strong>Create</strong>
+											</li>
+											<li>Copy the generated token as it will only be shown once</li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Grant necessary access</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-3">
+											The API Token will have access to all projects and issues that your user account can see. Make sure your account has appropriate permissions for the projects you want to index.
+										</p>
+										<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+											<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+											<AlertTitle className="text-[10px] sm:text-xs">Data Privacy</AlertTitle>
+											<AlertDescription className="text-[9px] sm:text-[10px]">
+												Only issues, comments, and basic metadata will be indexed. Jira attachments and linked files are not indexed by this connector.
+											</AlertDescription>
+										</Alert>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Indexing</h3>
+								<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+									<li>
+										Navigate to the Connector Dashboard and select the <strong>Jira</strong> Connector.
+									</li>
+									<li>
+										Enter your <strong>Jira Instance URL</strong> (e.g., https://yourcompany.atlassian.net)
+									</li>
+									<li>
+										Enter your <strong>Email Address</strong> associated with your Atlassian account
+									</li>
+									<li>
+										Place your <strong>API Token</strong> in the form field.
+									</li>
+									<li>
+										Click <strong>Connect</strong> to establish the connection.
+									</li>
+									<li>Once connected, your Jira issues will be indexed automatically.</li>
+								</ol>
+
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">What Gets Indexed</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										<p className="mb-2">The Jira connector indexes the following data:</p>
+										<ul className="list-disc pl-5 space-y-1">
+											<li>Issue keys and summaries (e.g., PROJ-123)</li>
+											<li>Issue descriptions</li>
+											<li>Issue comments and discussion threads</li>
+											<li>Issue status, priority, and type information</li>
+											<li>Assignee and reporter information</li>
+											<li>Project information</li>
+										</ul>
+									</AlertDescription>
+								</Alert>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
index cc80b5dd3..1514e023f 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/linear-connect-form.tsx
@@ -226,8 +226,8 @@ export const LinearConnectForm: FC<ConnectFormProps> = ({
 				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
 					<h4 className="text-xs sm:text-sm font-medium">What you get with Linear integration:</h4>
 					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
-						{getConnectorBenefits(EnumConnectorName.LINEAR_CONNECTOR)?.map((benefit, i) => (
-							<li key={i}>{benefit}</li>
+						{getConnectorBenefits(EnumConnectorName.LINEAR_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
 						))}
 					</ul>
 				</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/luma-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/luma-connect-form.tsx
new file mode 100644
index 000000000..f72ba3812
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/luma-connect-form.tsx
@@ -0,0 +1,342 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+import { DateRangeSelector } from "../../components/date-range-selector";
+import { useState } from "react";
+
+const lumaConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	api_key: z.string().min(10, {
+		message: "Luma API Key is required and must be valid.",
+	}),
+});
+
+type LumaConnectorFormValues = z.infer<typeof lumaConnectorFormSchema>;
+
+export const LumaConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const [startDate, setStartDate] = useState<Date | undefined>(undefined);
+	const [endDate, setEndDate] = useState<Date | undefined>(undefined);
+	const [periodicEnabled, setPeriodicEnabled] = useState(false);
+	const [frequencyMinutes, setFrequencyMinutes] = useState("1440");
+	const form = useForm<LumaConnectorFormValues>({
+		resolver: zodResolver(lumaConnectorFormSchema),
+		defaultValues: {
+			name: "Luma Connector",
+			api_key: "",
+		},
+	});
+
+	const handleSubmit = async (values: LumaConnectorFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.LUMA_CONNECTOR,
+				config: {
+					LUMA_API_KEY: values.api_key,
+				},
+				is_indexable: true,
+				last_indexed_at: null,
+				periodic_indexing_enabled: periodicEnabled,
+				indexing_frequency_minutes: periodicEnabled ? parseInt(frequencyMinutes, 10) : null,
+				next_scheduled_at: null,
+				startDate,
+				endDate,
+				periodicEnabled,
+				frequencyMinutes,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Info className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						You'll need a Luma API Key to use this connector. You can create one from{" "}
+						<a
+							href="https://lu.ma/api"
+							target="_blank"
+							rel="noopener noreferrer"
+							className="font-medium underline underline-offset-4"
+						>
+							Luma API Settings
+						</a>
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="luma-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Luma Connector" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<FormField
+							control={form.control}
+							name="api_key"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Luma API Key</FormLabel>
+									<FormControl>
+										<Input 
+											type="password" 
+											placeholder="Your API Key" 
+											className="h-8 sm:h-10 px-2 sm:px-3 text-xs sm:text-sm border-slate-400/20 focus-visible:border-slate-400/40"
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										Your Luma API Key will be encrypted and stored securely.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						{/* Indexing Configuration */}
+						<div className="space-y-4 pt-4 border-t border-slate-400/20">
+							<h3 className="text-sm sm:text-base font-medium">Indexing Configuration</h3>
+							
+							{/* Date Range Selector */}
+							<DateRangeSelector
+								startDate={startDate}
+								endDate={endDate}
+								onStartDateChange={setStartDate}
+								onEndDateChange={setEndDate}
+							/>
+
+							{/* Periodic Sync Config */}
+							<div className="rounded-xl bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6">
+								<div className="flex items-center justify-between">
+									<div className="space-y-1">
+										<h3 className="font-medium text-sm sm:text-base">Enable Periodic Sync</h3>
+										<p className="text-xs sm:text-sm text-muted-foreground">
+											Automatically re-index at regular intervals
+										</p>
+									</div>
+									<Switch checked={periodicEnabled} onCheckedChange={setPeriodicEnabled} disabled={isSubmitting} />
+								</div>
+
+								{periodicEnabled && (
+									<div className="mt-4 pt-4 border-t border-slate-400/20 space-y-3">
+										<div className="space-y-2">
+											<Label htmlFor="frequency" className="text-xs sm:text-sm">Sync Frequency</Label>
+											<Select value={frequencyMinutes} onValueChange={setFrequencyMinutes} disabled={isSubmitting}>
+												<SelectTrigger
+													id="frequency"
+													className="w-full bg-slate-400/5 dark:bg-slate-400/5 border-slate-400/20 text-xs sm:text-sm"
+												>
+													<SelectValue placeholder="Select frequency" />
+												</SelectTrigger>
+												<SelectContent className="z-[100]">
+													<SelectItem value="15" className="text-xs sm:text-sm">Every 15 minutes</SelectItem>
+													<SelectItem value="60" className="text-xs sm:text-sm">Every hour</SelectItem>
+													<SelectItem value="360" className="text-xs sm:text-sm">Every 6 hours</SelectItem>
+													<SelectItem value="720" className="text-xs sm:text-sm">Every 12 hours</SelectItem>
+													<SelectItem value="1440" className="text-xs sm:text-sm">Daily</SelectItem>
+													<SelectItem value="10080" className="text-xs sm:text-sm">Weekly</SelectItem>
+												</SelectContent>
+											</Select>
+										</div>
+									</div>
+								)}
+							</div>
+						</div>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.LUMA_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Luma integration:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.LUMA_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+
+			{/* Documentation Section */}
+			<Accordion type="single" collapsible className="w-full border border-border rounded-xl bg-slate-400/5 dark:bg-white/5">
+				<AccordionItem value="documentation" className="border-0">
+					<AccordionTrigger className="text-sm sm:text-base font-medium px-3 sm:px-6 no-underline hover:no-underline">
+						Documentation
+					</AccordionTrigger>
+					<AccordionContent className="px-3 sm:px-6 pb-3 sm:pb-6 space-y-6">
+						<div>
+							<h3 className="text-sm sm:text-base font-semibold mb-2">How it works</h3>
+							<p className="text-[10px] sm:text-xs text-muted-foreground">
+								The Luma connector uses the Luma API to fetch all events that your API key has access to.
+							</p>
+							<ul className="mt-2 list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+								<li>
+									For follow up indexing runs, the connector retrieves events that have been updated since the last indexing attempt.
+								</li>
+								<li>
+									Indexing is configured to run periodically, so updates should appear in your search results within minutes.
+								</li>
+							</ul>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Authorization</h3>
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 mb-4">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">API Key Required</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										You need a Luma API key to use this connector. The key will be used to read your Luma events with read-only permissions.
+									</AlertDescription>
+								</Alert>
+
+								<div className="space-y-4 sm:space-y-6">
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 1: Get Your API Key</h4>
+										<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground">
+											<li>Log into your Luma account</li>
+											<li>Navigate to your account settings</li>
+											<li>Go to API settings or Developer settings</li>
+											<li>Generate a new API key</li>
+											<li>Copy the generated API key</li>
+											<li>
+												You can also visit{" "}
+												<a
+													href="https://lu.ma/api"
+													target="_blank"
+													rel="noopener noreferrer"
+													className="font-medium underline underline-offset-4"
+												>
+													Luma API Settings
+												</a>{" "}
+												for more information.
+											</li>
+										</ol>
+									</div>
+
+									<div>
+										<h4 className="text-[10px] sm:text-xs font-medium mb-2">Step 2: Grant necessary access</h4>
+										<p className="text-[10px] sm:text-xs text-muted-foreground mb-3">
+											The API key will have access to all events that your user account can see. Make sure your account has appropriate permissions for the events you want to index.
+										</p>
+										<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+											<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+											<AlertTitle className="text-[10px] sm:text-xs">Data Privacy</AlertTitle>
+											<AlertDescription className="text-[9px] sm:text-[10px]">
+												Only event details, descriptions, and attendee information will be indexed. Event attachments and linked files are not indexed by this connector.
+											</AlertDescription>
+										</Alert>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div className="space-y-4">
+							<div>
+								<h3 className="text-sm sm:text-base font-semibold mb-2">Indexing</h3>
+								<ol className="list-decimal pl-5 space-y-2 text-[10px] sm:text-xs text-muted-foreground mb-4">
+									<li>
+										Navigate to the Connector Dashboard and select the <strong>Luma</strong> Connector.
+									</li>
+									<li>
+										Place your <strong>API Key</strong> in the form field.
+									</li>
+									<li>
+										Click <strong>Connect</strong> to establish the connection.
+									</li>
+									<li>Once connected, your Luma events will be indexed automatically.</li>
+								</ol>
+
+								<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+									<Info className="h-3 w-3 sm:h-4 sm:w-4" />
+									<AlertTitle className="text-[10px] sm:text-xs">What Gets Indexed</AlertTitle>
+									<AlertDescription className="text-[9px] sm:text-[10px]">
+										<p className="mb-2">The Luma connector indexes the following data:</p>
+										<ul className="list-disc pl-5 space-y-1">
+											<li>Event titles and descriptions</li>
+											<li>Event details and metadata</li>
+											<li>Attendee information</li>
+											<li>Event dates and locations</li>
+										</ul>
+									</AlertDescription>
+								</Alert>
+							</div>
+						</div>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/notion-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/notion-connect-form.tsx
index 8a1ee740d..ca6735afd 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/notion-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/notion-connect-form.tsx
@@ -223,8 +223,8 @@ export const NotionConnectForm: FC<ConnectFormProps> = ({
 				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
 					<h4 className="text-xs sm:text-sm font-medium">What you get with Notion integration:</h4>
 					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
-						{getConnectorBenefits(EnumConnectorName.NOTION_CONNECTOR)?.map((benefit, i) => (
-							<li key={i}>{benefit}</li>
+						{getConnectorBenefits(EnumConnectorName.NOTION_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
 						))}
 					</ul>
 				</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/slack-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/slack-connect-form.tsx
index 2e4424bc2..2d4f8b7c8 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/slack-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/slack-connect-form.tsx
@@ -223,8 +223,8 @@ export const SlackConnectForm: FC<ConnectFormProps> = ({
 				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
 					<h4 className="text-xs sm:text-sm font-medium">What you get with Slack integration:</h4>
 					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
-						{getConnectorBenefits(EnumConnectorName.SLACK_CONNECTOR)?.map((benefit, i) => (
-							<li key={i}>{benefit}</li>
+						{getConnectorBenefits(EnumConnectorName.SLACK_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
 						))}
 					</ul>
 				</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
index ab70d7835..664fe78b8 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
@@ -59,8 +59,48 @@ export function getConnectorBenefits(connectorType: string): string[] | null {
 			"Keep your search results up-to-date with latest Notion content",
 			"Index your Notion workspace for enhanced search capabilities",
 		],
-		// Add other connectors as needed
-		// GITHUB_CONNECTOR: [...],
+		CONFLUENCE_CONNECTOR: [
+			"Search through all your Confluence pages and spaces",
+			"Access page content, comments, and attachments",
+			"Connect your team's documentation directly to your search space",
+			"Keep your search results up-to-date with latest Confluence content",
+			"Index your Confluence workspace for enhanced search capabilities",
+		],
+		BOOKSTACK_CONNECTOR: [
+			"Search through all your BookStack pages and books",
+			"Access page content, chapters, and documentation",
+			"Connect your documentation directly to your search space",
+			"Keep your search results up-to-date with latest BookStack content",
+			"Index your BookStack instance for enhanced search capabilities",
+		],
+		GITHUB_CONNECTOR: [
+			"Search through code, issues, and documentation from GitHub repositories",
+			"Access repository content, pull requests, and discussions",
+			"Connect your codebase directly to your search space",
+			"Keep your search results up-to-date with latest GitHub content",
+			"Index your GitHub repositories for enhanced search capabilities",
+		],
+		JIRA_CONNECTOR: [
+			"Search through all your Jira issues and tickets",
+			"Access issue descriptions, comments, and project data",
+			"Connect your project management directly to your search space",
+			"Keep your search results up-to-date with latest Jira content",
+			"Index your Jira projects for enhanced search capabilities",
+		],
+		CLICKUP_CONNECTOR: [
+			"Search through all your ClickUp tasks and projects",
+			"Access task descriptions, comments, and project data",
+			"Connect your task management directly to your search space",
+			"Keep your search results up-to-date with latest ClickUp content",
+			"Index your ClickUp workspace for enhanced search capabilities",
+		],
+		LUMA_CONNECTOR: [
+			"Search through all your Luma events",
+			"Access event details, descriptions, and attendee information",
+			"Connect your events directly to your search space",
+			"Keep your search results up-to-date with latest Luma content",
+			"Index your Luma events for enhanced search capabilities",
+		],
 	};
 
 	return benefits[connectorType] || null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
index d06fd7125..46ed58272 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
@@ -1,9 +1,15 @@
 import type { FC } from "react";
 import { BaiduSearchApiConnectForm } from "./components/baidu-search-api-connect-form";
+import { BookStackConnectForm } from "./components/bookstack-connect-form";
+import { ClickUpConnectForm } from "./components/clickup-connect-form";
+import { ConfluenceConnectForm } from "./components/confluence-connect-form";
 import { DiscordConnectForm } from "./components/discord-connect-form";
 import { ElasticsearchConnectForm } from "./components/elasticsearch-connect-form";
+import { GithubConnectForm } from "./components/github-connect-form";
+import { JiraConnectForm } from "./components/jira-connect-form";
 import { LinearConnectForm } from "./components/linear-connect-form";
 import { LinkupApiConnectForm } from "./components/linkup-api-connect-form";
+import { LumaConnectForm } from "./components/luma-connect-form";
 import { NotionConnectForm } from "./components/notion-connect-form";
 import { SearxngConnectForm } from "./components/searxng-connect-form";
 import { SlackConnectForm } from "./components/slack-connect-form";
@@ -56,6 +62,18 @@ export function getConnectFormComponent(
 			return DiscordConnectForm;
 		case "NOTION_CONNECTOR":
 			return NotionConnectForm;
+		case "CONFLUENCE_CONNECTOR":
+			return ConfluenceConnectForm;
+		case "BOOKSTACK_CONNECTOR":
+			return BookStackConnectForm;
+		case "GITHUB_CONNECTOR":
+			return GithubConnectForm;
+		case "JIRA_CONNECTOR":
+			return JiraConnectForm;
+		case "CLICKUP_CONNECTOR":
+			return ClickUpConnectForm;
+		case "LUMA_CONNECTOR":
+			return LumaConnectForm;
 		// Add other connector types here as needed
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/bookstack-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/bookstack-config.tsx
new file mode 100644
index 000000000..facfc0941
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/bookstack-config.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface BookStackConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const BookStackConfig: FC<BookStackConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [baseUrl, setBaseUrl] = useState<string>(
+		(connector.config?.BOOKSTACK_BASE_URL as string) || ""
+	);
+	const [tokenId, setTokenId] = useState<string>(
+		(connector.config?.BOOKSTACK_TOKEN_ID as string) || ""
+	);
+	const [tokenSecret, setTokenSecret] = useState<string>(
+		(connector.config?.BOOKSTACK_TOKEN_SECRET as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update values when connector changes
+	useEffect(() => {
+		const url = (connector.config?.BOOKSTACK_BASE_URL as string) || "";
+		const id = (connector.config?.BOOKSTACK_TOKEN_ID as string) || "";
+		const secret = (connector.config?.BOOKSTACK_TOKEN_SECRET as string) || "";
+		setBaseUrl(url);
+		setTokenId(id);
+		setTokenSecret(secret);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleBaseUrlChange = (value: string) => {
+		setBaseUrl(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				BOOKSTACK_BASE_URL: value,
+			});
+		}
+	};
+
+	const handleTokenIdChange = (value: string) => {
+		setTokenId(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				BOOKSTACK_TOKEN_ID: value,
+			});
+		}
+	};
+
+	const handleTokenSecretChange = (value: string) => {
+		setTokenSecret(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				BOOKSTACK_TOKEN_SECRET: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My BookStack Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-4">
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">BookStack Base URL</Label>
+						<Input
+							type="url"
+							value={baseUrl}
+							onChange={(e) => handleBaseUrlChange(e.target.value)}
+							placeholder="https://your-bookstack-instance.com"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							The base URL of your BookStack instance.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">Token ID</Label>
+						<Input
+							value={tokenId}
+							onChange={(e) => handleTokenIdChange(e.target.value)}
+							placeholder="Your Token ID"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Your BookStack API Token ID.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						<Label className="flex items-center gap-2 text-xs sm:text-sm">
+							<KeyRound className="h-4 w-4" />
+							Token Secret
+						</Label>
+						<Input
+							type="password"
+							value={tokenSecret}
+							onChange={(e) => handleTokenSecretChange(e.target.value)}
+							placeholder="Your Token Secret"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Update your BookStack Token Secret if needed.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/clickup-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/clickup-config.tsx
new file mode 100644
index 000000000..b2cbed7d7
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/clickup-config.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface ClickUpConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const ClickUpConfig: FC<ClickUpConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [apiToken, setApiToken] = useState<string>(
+		(connector.config?.CLICKUP_API_TOKEN as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update API token and name when connector changes
+	useEffect(() => {
+		const token = (connector.config?.CLICKUP_API_TOKEN as string) || "";
+		setApiToken(token);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleApiTokenChange = (value: string) => {
+		setApiToken(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				CLICKUP_API_TOKEN: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My ClickUp Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="flex items-center gap-2 text-xs sm:text-sm">
+						<KeyRound className="h-4 w-4" />
+						ClickUp API Token
+					</Label>
+					<Input
+						type="password"
+						value={apiToken}
+						onChange={(e) => handleApiTokenChange(e.target.value)}
+						placeholder="pk_..."
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update your ClickUp API Token if needed.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/confluence-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/confluence-config.tsx
new file mode 100644
index 000000000..796428083
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/confluence-config.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface ConfluenceConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const ConfluenceConfig: FC<ConfluenceConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [baseUrl, setBaseUrl] = useState<string>(
+		(connector.config?.CONFLUENCE_BASE_URL as string) || ""
+	);
+	const [email, setEmail] = useState<string>(
+		(connector.config?.CONFLUENCE_EMAIL as string) || ""
+	);
+	const [apiToken, setApiToken] = useState<string>(
+		(connector.config?.CONFLUENCE_API_TOKEN as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update values when connector changes
+	useEffect(() => {
+		const url = (connector.config?.CONFLUENCE_BASE_URL as string) || "";
+		const emailVal = (connector.config?.CONFLUENCE_EMAIL as string) || "";
+		const token = (connector.config?.CONFLUENCE_API_TOKEN as string) || "";
+		setBaseUrl(url);
+		setEmail(emailVal);
+		setApiToken(token);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleBaseUrlChange = (value: string) => {
+		setBaseUrl(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				CONFLUENCE_BASE_URL: value,
+			});
+		}
+	};
+
+	const handleEmailChange = (value: string) => {
+		setEmail(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				CONFLUENCE_EMAIL: value,
+			});
+		}
+	};
+
+	const handleApiTokenChange = (value: string) => {
+		setApiToken(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				CONFLUENCE_API_TOKEN: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Confluence Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-4">
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">Confluence Base URL</Label>
+						<Input
+							type="url"
+							value={baseUrl}
+							onChange={(e) => handleBaseUrlChange(e.target.value)}
+							placeholder="https://your-domain.atlassian.net"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							The base URL of your Confluence instance.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">Email Address</Label>
+						<Input
+							type="email"
+							value={email}
+							onChange={(e) => handleEmailChange(e.target.value)}
+							placeholder="your-email@example.com"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							The email address associated with your Atlassian account.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						<Label className="flex items-center gap-2 text-xs sm:text-sm">
+							<KeyRound className="h-4 w-4" />
+							API Token
+						</Label>
+						<Input
+							type="password"
+							value={apiToken}
+							onChange={(e) => handleApiTokenChange(e.target.value)}
+							placeholder="Your API Token"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Update your Confluence API Token if needed.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/github-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/github-config.tsx
new file mode 100644
index 000000000..acf32e322
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/github-config.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface GithubConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const GithubConfig: FC<GithubConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const stringToArray = (arr: string[] | string | undefined): string[] => {
+		if (Array.isArray(arr)) return arr;
+		if (typeof arr === "string") {
+			return arr.split(",").map((item) => item.trim()).filter((item) => item.length > 0);
+		}
+		return [];
+	};
+
+	const arrayToString = (arr: string[]): string => {
+		return arr.join(", ");
+	};
+
+	const [githubPat, setGithubPat] = useState<string>(
+		(connector.config?.GITHUB_PAT as string) || ""
+	);
+	const [repoFullNames, setRepoFullNames] = useState<string>(
+		arrayToString(stringToArray(connector.config?.repo_full_names))
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update values when connector changes
+	useEffect(() => {
+		const pat = (connector.config?.GITHUB_PAT as string) || "";
+		const repos = arrayToString(stringToArray(connector.config?.repo_full_names));
+		setGithubPat(pat);
+		setRepoFullNames(repos);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleGithubPatChange = (value: string) => {
+		setGithubPat(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				GITHUB_PAT: value,
+			});
+		}
+	};
+
+	const handleRepoFullNamesChange = (value: string) => {
+		setRepoFullNames(value);
+		const repoList = stringToArray(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				repo_full_names: repoList,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My GitHub Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-4">
+					<div className="space-y-2">
+						<Label className="flex items-center gap-2 text-xs sm:text-sm">
+							<KeyRound className="h-4 w-4" />
+							GitHub Personal Access Token
+						</Label>
+						<Input
+							type="password"
+							value={githubPat}
+							onChange={(e) => handleGithubPatChange(e.target.value)}
+							placeholder="ghp_..."
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Update your GitHub PAT if needed.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">Repository Names</Label>
+						<Input
+							value={repoFullNames}
+							onChange={(e) => handleRepoFullNamesChange(e.target.value)}
+							placeholder="owner/repo1, owner/repo2"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Comma-separated list of repository full names.
+						</p>
+					</div>
+
+					{/* Show parsed repositories as badges */}
+					{repoFullNames.trim() && (
+						<div className="rounded-lg border border-border bg-muted/50 p-3">
+							<h4 className="text-[10px] sm:text-xs font-medium mb-2">Repositories:</h4>
+							<div className="flex flex-wrap gap-2">
+								{stringToArray(repoFullNames).map((repo) => (
+									<Badge key={repo} variant="secondary" className="text-[10px]">
+										{repo}
+									</Badge>
+								))}
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/jira-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/jira-config.tsx
new file mode 100644
index 000000000..cd73b0fd8
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/jira-config.tsx
@@ -0,0 +1,152 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface JiraConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const JiraConfig: FC<JiraConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [baseUrl, setBaseUrl] = useState<string>(
+		(connector.config?.JIRA_BASE_URL as string) || ""
+	);
+	const [email, setEmail] = useState<string>(
+		(connector.config?.JIRA_EMAIL as string) || ""
+	);
+	const [apiToken, setApiToken] = useState<string>(
+		(connector.config?.JIRA_API_TOKEN as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update values when connector changes
+	useEffect(() => {
+		const url = (connector.config?.JIRA_BASE_URL as string) || "";
+		const emailVal = (connector.config?.JIRA_EMAIL as string) || "";
+		const token = (connector.config?.JIRA_API_TOKEN as string) || "";
+		setBaseUrl(url);
+		setEmail(emailVal);
+		setApiToken(token);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleBaseUrlChange = (value: string) => {
+		setBaseUrl(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				JIRA_BASE_URL: value,
+			});
+		}
+	};
+
+	const handleEmailChange = (value: string) => {
+		setEmail(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				JIRA_EMAIL: value,
+			});
+		}
+	};
+
+	const handleApiTokenChange = (value: string) => {
+		setApiToken(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				JIRA_API_TOKEN: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Jira Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-4">
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">Jira Base URL</Label>
+						<Input
+							type="url"
+							value={baseUrl}
+							onChange={(e) => handleBaseUrlChange(e.target.value)}
+							placeholder="https://your-domain.atlassian.net"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							The base URL of your Jira instance.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">Email Address</Label>
+						<Input
+							type="email"
+							value={email}
+							onChange={(e) => handleEmailChange(e.target.value)}
+							placeholder="your-email@example.com"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							The email address associated with your Atlassian account.
+						</p>
+					</div>
+
+					<div className="space-y-2">
+						<Label className="flex items-center gap-2 text-xs sm:text-sm">
+							<KeyRound className="h-4 w-4" />
+							API Token
+						</Label>
+						<Input
+							type="password"
+							value={apiToken}
+							onChange={(e) => handleApiTokenChange(e.target.value)}
+							placeholder="Your API Token"
+							className="border-slate-400/20 focus-visible:border-slate-400/40"
+						/>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Update your Jira API Token if needed.
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/luma-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/luma-config.tsx
new file mode 100644
index 000000000..ec4ffe9ef
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/luma-config.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { KeyRound } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import type { ConnectorConfigProps } from "../index";
+
+export interface LumaConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const LumaConfig: FC<LumaConfigProps> = ({
+	connector,
+	onConfigChange,
+	onNameChange,
+}) => {
+	const [apiKey, setApiKey] = useState<string>(
+		(connector.config?.LUMA_API_KEY as string) || ""
+	);
+	const [name, setName] = useState<string>(connector.name || "");
+
+	// Update API key and name when connector changes
+	useEffect(() => {
+		const key = (connector.config?.LUMA_API_KEY as string) || "";
+		setApiKey(key);
+		setName(connector.name || "");
+	}, [connector.config, connector.name]);
+
+	const handleApiKeyChange = (value: string) => {
+		setApiKey(value);
+		if (onConfigChange) {
+			onConfigChange({
+				...connector.config,
+				LUMA_API_KEY: value,
+			});
+		}
+	};
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Luma Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base">Configuration</h3>
+				</div>
+
+				<div className="space-y-2">
+					<Label className="flex items-center gap-2 text-xs sm:text-sm">
+						<KeyRound className="h-4 w-4" />
+						Luma API Key
+					</Label>
+					<Input
+						type="password"
+						value={apiKey}
+						onChange={(e) => handleApiKeyChange(e.target.value)}
+						placeholder="Your API Key"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Update your Luma API Key if needed.
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
index 6f5afaec0..59919d0cd 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -3,11 +3,17 @@
 import type { FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { BaiduSearchApiConfig } from "./components/baidu-search-api-config";
+import { BookStackConfig } from "./components/bookstack-config";
+import { ClickUpConfig } from "./components/clickup-config";
+import { ConfluenceConfig } from "./components/confluence-config";
 import { DiscordConfig } from "./components/discord-config";
 import { ElasticsearchConfig } from "./components/elasticsearch-config";
+import { GithubConfig } from "./components/github-config";
 import { GoogleDriveConfig } from "./components/google-drive-config";
+import { JiraConfig } from "./components/jira-config";
 import { LinearConfig } from "./components/linear-config";
 import { LinkupApiConfig } from "./components/linkup-api-config";
+import { LumaConfig } from "./components/luma-config";
 import { NotionConfig } from "./components/notion-config";
 import { SearxngConfig } from "./components/searxng-config";
 import { SlackConfig } from "./components/slack-config";
@@ -51,6 +57,18 @@ export function getConnectorConfigComponent(
 			return DiscordConfig;
 		case "NOTION_CONNECTOR":
 			return NotionConfig;
+		case "CONFLUENCE_CONNECTOR":
+			return ConfluenceConfig;
+		case "BOOKSTACK_CONNECTOR":
+			return BookStackConfig;
+		case "GITHUB_CONNECTOR":
+			return GithubConfig;
+		case "JIRA_CONNECTOR":
+			return JiraConfig;
+		case "CLICKUP_CONNECTOR":
+			return ClickUpConfig;
+		case "LUMA_CONNECTOR":
+			return LumaConfig;
 		// OAuth connectors (Gmail, Calendar, Airtable) and others don't need special config UI
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
index 9965f721b..81605c44f 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
@@ -52,6 +52,12 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 			SLACK_CONNECTOR: "slack-connect-form",
 			DISCORD_CONNECTOR: "discord-connect-form",
 			NOTION_CONNECTOR: "notion-connect-form",
+			CONFLUENCE_CONNECTOR: "confluence-connect-form",
+			BOOKSTACK_CONNECTOR: "bookstack-connect-form",
+			GITHUB_CONNECTOR: "github-connect-form",
+			JIRA_CONNECTOR: "jira-connect-form",
+			CLICKUP_CONNECTOR: "clickup-connect-form",
+			LUMA_CONNECTOR: "luma-connect-form",
 		};
 		const formId = formIdMap[connectorType];
 		if (formId) {
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 76b93b930..30884e6d3 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -102,6 +102,12 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 							const isSlack = connector.id === "slack-connector";
 							const isDiscord = connector.id === "discord-connector";
 							const isNotion = connector.id === "notion-connector";
+							const isConfluence = connector.id === "confluence-connector";
+							const isBookStack = connector.id === "bookstack-connector";
+							const isGithub = connector.id === "github-connector";
+							const isJira = connector.id === "jira-connector";
+							const isClickUp = connector.id === "clickup-connector";
+							const isLuma = connector.id === "luma-connector";
 							
 							const isConnected = connectedTypes.has(connector.connectorType);
 							const isConnecting = connectingId === connector.id;
@@ -113,7 +119,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 
 							const handleConnect = isWebcrawler && onCreateWebcrawler
 								? onCreateWebcrawler
-								: (isTavily || isSearxng || isLinkup || isBaidu || isLinear || isElasticsearch || isSlack || isDiscord || isNotion) && onConnectNonOAuth
+								: (isTavily || isSearxng || isLinkup || isBaidu || isLinear || isElasticsearch || isSlack || isDiscord || isNotion || isConfluence || isBookStack || isGithub || isJira || isClickUp || isLuma) && onConnectNonOAuth
 								? () => onConnectNonOAuth(connector.connectorType)
 								: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);
 
diff --git a/surfsense_web/lib/connectors/utils.ts b/surfsense_web/lib/connectors/utils.ts
index 648175332..de791be7f 100644
--- a/surfsense_web/lib/connectors/utils.ts
+++ b/surfsense_web/lib/connectors/utils.ts
@@ -11,6 +11,7 @@ export const getConnectorTypeDisplay = (type: string): string => {
 		DISCORD_CONNECTOR: "Discord",
 		LINKUP_API: "Linkup",
 		CONFLUENCE_CONNECTOR: "Confluence",
+		BOOKSTACK_CONNECTOR: "BookStack",
 		CLICKUP_CONNECTOR: "ClickUp",
 		GOOGLE_CALENDAR_CONNECTOR: "Google Calendar",
 		GOOGLE_GMAIL_CONNECTOR: "Google Gmail",

From 4d6186a43a4a520e0b526f0d9338ba1c7e84e8e5 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 16:33:15 +0530
Subject: [PATCH 18/28] feat: Update SearxNG connector form validation, enhance
 connector connect view with additional properties, and refine type handling
 in connector dialog for improved schema compliance.

---
 .../connect-forms/components/searxng-connect-form.tsx  |  5 +++--
 .../connector-configs/views/connector-connect-view.tsx |  6 +++++-
 .../constants/connector-popup.schemas.ts               |  2 +-
 .../connector-popup/hooks/use-connector-dialog.ts      | 10 +++++++---
 .../connector-popup/tabs/all-connectors-tab.tsx        |  2 +-
 5 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx
index b1c19a612..f8ffc7c83 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/searxng-connect-form.tsx
@@ -27,7 +27,8 @@ const searxngFormSchema = z.object({
 		message: "Connector name must be at least 3 characters.",
 	}),
 	host: z
-		.string({ required_error: "Host is required." })
+		.string()
+		.min(1, { message: "Host is required." })
 		.url({ message: "Enter a valid SearxNG host URL (e.g. https://searxng.example.org)." }),
 	api_key: z.string().optional(),
 	engines: z.string().optional(),
@@ -37,7 +38,7 @@ const searxngFormSchema = z.object({
 		.string()
 		.regex(/^[0-2]?$/, { message: "SafeSearch must be 0, 1, or 2." })
 		.optional(),
-	verify_ssl: z.boolean().default(true),
+	verify_ssl: z.boolean(),
 });
 
 type SearxngFormValues = z.infer<typeof searxngFormSchema>;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
index 81605c44f..6827c6362 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
@@ -17,8 +17,12 @@ interface ConnectorConnectViewProps {
 		is_indexable: boolean;
 		last_indexed_at: null;
 		periodic_indexing_enabled: boolean;
-		indexing_frequency_minutes: null;
+		indexing_frequency_minutes: number | null;
 		next_scheduled_at: null;
+		startDate?: Date;
+		endDate?: Date;
+		periodicEnabled?: boolean;
+		frequencyMinutes?: string;
 	}) => Promise<void>;
 	onBack: () => void;
 	isSubmitting: boolean;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
index cafce6bba..49b398733 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
@@ -40,7 +40,7 @@ export type IndexingConfigState = z.infer<typeof indexingConfigStateSchema>;
  * Schema for frequency minutes (must be one of the allowed values)
  */
 export const frequencyMinutesSchema = z.enum(["15", "60", "360", "720", "1440", "10080"], {
-	errorMap: () => ({ message: "Invalid frequency value" }),
+	message: "Invalid frequency value",
 });
 
 export type FrequencyMinutes = z.infer<typeof frequencyMinutesSchema>;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
index 97bc06685..685d7ad65 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@@ -232,7 +232,7 @@ export const useConnectorDialog = () => {
 
 	// Handle OAuth connection
 	const handleConnectOAuth = useCallback(
-		async (connector: (typeof OAUTH_CONNECTORS)[0]) => {
+		async (connector: (typeof OAUTH_CONNECTORS)[number]) => {
 			if (!searchSpaceId || !connector.authEndpoint) return;
 
 			// Set connecting state immediately to disable button and show spinner
@@ -368,9 +368,13 @@ export const useConnectorDialog = () => {
 			// Extract UI-only fields before sending to backend
 			const { startDate, endDate, periodicEnabled, frequencyMinutes, ...connectorData } = formData;
 			
-			// Create connector
+			// Create connector - ensure types match the schema
 			const newConnector = await createConnector({
-				data: connectorData,
+				data: {
+					...connectorData,
+					connector_type: connectorData.connector_type as EnumConnectorName,
+					next_scheduled_at: connectorData.next_scheduled_at as string | null,
+				},
 				queryParams: {
 					search_space_id: searchSpaceId,
 				},
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 30884e6d3..6143f1d54 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -12,7 +12,7 @@ interface AllConnectorsTabProps {
 	connectedTypes: Set<string>;
 	connectingId: string | null;
 	allConnectors: SearchSourceConnector[] | undefined;
-	onConnectOAuth: (connector: (typeof OAUTH_CONNECTORS)[0]) => void;
+	onConnectOAuth: (connector: (typeof OAUTH_CONNECTORS)[number]) => void;
 	onConnectNonOAuth?: (connectorType: string) => void;
 	onCreateWebcrawler?: () => void;
 	onManage?: (connector: SearchSourceConnector) => void;

From 3ac806dcdf1b0b1ebd4d4cdb03ac6fd57ed07c65 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 16:47:19 +0530
Subject: [PATCH 19/28] feat: Refactor document upload and connector management
 UI, enhance user experience with improved loading states, and streamline
 source addition process by removing unnecessary components.

---
 .../connectors/(manage)/page.tsx              | 385 +++++++++---------
 .../documents/upload/page.tsx                 |  36 +-
 .../[search_space_id]/sources/add/page.tsx    |  18 +-
 .../components/assistant-ui/attachment.tsx    |   2 +-
 4 files changed, 221 insertions(+), 220 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx
index a5d811c81..caeff4ff0 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/connectors/(manage)/page.tsx
@@ -38,7 +38,6 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Calendar } from "@/components/ui/calendar";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import {
 	Dialog,
 	DialogContent,
@@ -348,221 +347,213 @@ export default function ConnectorsPage() {
 				</Button>
 			</motion.div>
 
-			<Card>
-				<CardHeader className="pb-3">
-					<CardTitle>{t("your_connectors")}</CardTitle>
-					<CardDescription>{t("view_manage")}</CardDescription>
-				</CardHeader>
-				<CardContent>
-					{isLoading ? (
-						<div className="flex justify-center py-8">
-							<div className="animate-pulse text-center">
-								<div className="h-6 w-32 bg-muted rounded mx-auto mb-2"></div>
-								<div className="h-4 w-48 bg-muted rounded mx-auto"></div>
-							</div>
-						</div>
-					) : connectors.length === 0 ? (
-						<div className="text-center py-12">
-							<h3 className="text-lg font-medium mb-2">{t("no_connectors")}</h3>
-							<p className="text-muted-foreground mb-6">{t("no_connectors_desc")}</p>
-							<Button onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}>
-								<Plus className="mr-2 h-4 w-4" />
-								{t("add_first")}
-							</Button>
-						</div>
-					) : (
-						<div className="rounded-md border">
-							<Table>
-								<TableHeader>
-									<TableRow>
-										<TableHead>{t("name")}</TableHead>
-										<TableHead>{t("type")}</TableHead>
-										<TableHead>{t("last_indexed")}</TableHead>
-										<TableHead>{t("periodic")}</TableHead>
-										<TableHead className="text-right">{t("actions")}</TableHead>
-									</TableRow>
-								</TableHeader>
-								<TableBody>
-									{connectors.map((connector) => (
-										<TableRow key={connector.id}>
-											<TableCell className="font-medium">{connector.name}</TableCell>
-											<TableCell>{getConnectorIcon(connector.connector_type)}</TableCell>
-											<TableCell>
-												{connector.is_indexable
-													? formatDateTime(connector.last_indexed_at)
-													: t("not_indexable")}
-											</TableCell>
-											<TableCell>
-												{connector.is_indexable ? (
-													connector.periodic_indexing_enabled ? (
-														<TooltipProvider>
-															<Tooltip>
-																<TooltipTrigger asChild>
-																	<div className="flex items-center gap-1 text-green-600 dark:text-green-400">
-																		<Clock className="h-4 w-4" />
-																		<span className="text-sm font-medium">
-																			{connector.indexing_frequency_minutes
-																				? formatFrequency(connector.indexing_frequency_minutes)
-																				: "Enabled"}
-																		</span>
-																	</div>
-																</TooltipTrigger>
-																<TooltipContent>
-																	<p>
-																		Runs every {connector.indexing_frequency_minutes} minutes
-																		{connector.next_scheduled_at && (
-																			<>
-																				<br />
-																				Next: {formatDateTime(connector.next_scheduled_at)}
-																			</>
-																		)}
-																	</p>
-																</TooltipContent>
-															</Tooltip>
-														</TooltipProvider>
-													) : (
-														<span className="text-sm text-muted-foreground">Disabled</span>
-													)
-												) : (
-													<span className="text-sm text-muted-foreground">-</span>
-												)}
-											</TableCell>
-											<TableCell className="text-right">
-												<div className="flex justify-end gap-2">
-													{connector.is_indexable && (
-														<div className="flex gap-1">
-															<TooltipProvider>
-																<Tooltip>
-																	<TooltipTrigger asChild>
-																		<Button
-																			variant="outline"
-																			size="sm"
-																			onClick={() => handleOpenDatePicker(connector.id)}
-																			disabled={indexingConnectorId === connector.id}
-																		>
-																			{indexingConnectorId === connector.id ? (
-																				<RefreshCw className="h-4 w-4 animate-spin" />
-																			) : connector.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR ? (
-																				<Folder className="h-4 w-4" />
-																			) : (
-																				<CalendarIcon className="h-4 w-4" />
-																			)}
-																			<span className="sr-only">
-																				{connector.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR 
-																					? "Select folder to index" 
-																					: t("index_date_range")}
-																			</span>
-																		</Button>
-																	</TooltipTrigger>
-																	<TooltipContent>
-																		<p>
-																			{connector.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR 
-																				? "Select folder to index" 
-																				: t("index_date_range")}
-																		</p>
-																	</TooltipContent>
-																</Tooltip>
-															</TooltipProvider>
-															{/* Hide quick index button for Google Drive (requires folder selection) */}
-															{connector.connector_type !== EnumConnectorName.GOOGLE_DRIVE_CONNECTOR && (
-																<TooltipProvider>
-																	<Tooltip>
-																		<TooltipTrigger asChild>
-																			<Button
-																				variant="outline"
-																				size="sm"
-																				onClick={() => handleQuickIndexConnector(connector.id)}
-																				disabled={indexingConnectorId === connector.id}
-																			>
-																				{indexingConnectorId === connector.id ? (
-																					<RefreshCw className="h-4 w-4 animate-spin" />
-																				) : (
-																					<RefreshCw className="h-4 w-4" />
-																				)}
-																				<span className="sr-only">{t("quick_index")}</span>
-																			</Button>
-																		</TooltipTrigger>
-																		<TooltipContent>
-																			<p>{t("quick_index_auto")}</p>
-																		</TooltipContent>
-																	</Tooltip>
-																</TooltipProvider>
-															)}
-														</div>
-													)}
-													{connector.is_indexable && (
+			{isLoading ? (
+				<div className="flex justify-center py-8">
+					<div className="animate-pulse text-center">
+						<div className="h-6 w-32 bg-muted rounded mx-auto mb-2"></div>
+						<div className="h-4 w-48 bg-muted rounded mx-auto"></div>
+					</div>
+				</div>
+			) : connectors.length === 0 ? (
+				<div className="text-center py-12">
+					<h3 className="text-lg font-medium mb-2">{t("no_connectors")}</h3>
+					<p className="text-muted-foreground mb-6">{t("no_connectors_desc")}</p>
+					<Button onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}>
+						<Plus className="mr-2 h-4 w-4" />
+						{t("add_first")}
+					</Button>
+				</div>
+			) : (
+				<div className="rounded-md border">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>{t("name")}</TableHead>
+								<TableHead>{t("type")}</TableHead>
+								<TableHead>{t("last_indexed")}</TableHead>
+								<TableHead>{t("periodic")}</TableHead>
+								<TableHead className="text-right">{t("actions")}</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{connectors.map((connector) => (
+								<TableRow key={connector.id}>
+									<TableCell className="font-medium">{connector.name}</TableCell>
+									<TableCell>{getConnectorIcon(connector.connector_type)}</TableCell>
+									<TableCell>
+										{connector.is_indexable
+											? formatDateTime(connector.last_indexed_at)
+											: t("not_indexable")}
+									</TableCell>
+									<TableCell>
+										{connector.is_indexable ? (
+											connector.periodic_indexing_enabled ? (
+												<TooltipProvider>
+													<Tooltip>
+														<TooltipTrigger asChild>
+															<div className="flex items-center gap-1 text-green-600 dark:text-green-400">
+																<Clock className="h-4 w-4" />
+																<span className="text-sm font-medium">
+																	{connector.indexing_frequency_minutes
+																		? formatFrequency(connector.indexing_frequency_minutes)
+																		: "Enabled"}
+																</span>
+															</div>
+														</TooltipTrigger>
+														<TooltipContent>
+															<p>
+																Runs every {connector.indexing_frequency_minutes} minutes
+																{connector.next_scheduled_at && (
+																	<>
+																		<br />
+																		Next: {formatDateTime(connector.next_scheduled_at)}
+																	</>
+																)}
+															</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											) : (
+												<span className="text-sm text-muted-foreground">Disabled</span>
+											)
+										) : (
+											<span className="text-sm text-muted-foreground">-</span>
+										)}
+									</TableCell>
+									<TableCell className="text-right">
+										<div className="flex justify-end gap-2">
+											{connector.is_indexable && (
+												<div className="flex gap-1">
+													<TooltipProvider>
+														<Tooltip>
+															<TooltipTrigger asChild>
+																<Button
+																	variant="outline"
+																	size="sm"
+																	onClick={() => handleOpenDatePicker(connector.id)}
+																	disabled={indexingConnectorId === connector.id}
+																>
+																	{indexingConnectorId === connector.id ? (
+																		<RefreshCw className="h-4 w-4 animate-spin" />
+																	) : connector.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR ? (
+																		<Folder className="h-4 w-4" />
+																	) : (
+																		<CalendarIcon className="h-4 w-4" />
+																	)}
+																	<span className="sr-only">
+																		{connector.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR 
+																			? "Select folder to index" 
+																			: t("index_date_range")}
+																	</span>
+																</Button>
+															</TooltipTrigger>
+															<TooltipContent>
+																<p>
+																	{connector.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR 
+																		? "Select folder to index" 
+																		: t("index_date_range")}
+																</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+													{/* Hide quick index button for Google Drive (requires folder selection) */}
+													{connector.connector_type !== EnumConnectorName.GOOGLE_DRIVE_CONNECTOR && (
 														<TooltipProvider>
 															<Tooltip>
 																<TooltipTrigger asChild>
 																	<Button
 																		variant="outline"
 																		size="sm"
-																		onClick={() => handleOpenPeriodicDialog(connector.id)}
+																		onClick={() => handleQuickIndexConnector(connector.id)}
+																		disabled={indexingConnectorId === connector.id}
 																	>
-																		<Clock className="h-4 w-4" />
-																		<span className="sr-only">Configure Periodic Indexing</span>
+																		{indexingConnectorId === connector.id ? (
+																			<RefreshCw className="h-4 w-4 animate-spin" />
+																		) : (
+																			<RefreshCw className="h-4 w-4" />
+																		)}
+																		<span className="sr-only">{t("quick_index")}</span>
 																	</Button>
 																</TooltipTrigger>
 																<TooltipContent>
-																	<p>Configure Periodic Indexing</p>
+																	<p>{t("quick_index_auto")}</p>
 																</TooltipContent>
 															</Tooltip>
 														</TooltipProvider>
 													)}
-													<Button
-														variant="outline"
-														size="sm"
-														onClick={() =>
-															router.push(
-																`/dashboard/${searchSpaceId}/connectors/${connector.id}/edit`
-															)
-														}
-													>
-														<Edit className="h-4 w-4" />
-														<span className="sr-only">{tCommon("edit")}</span>
-													</Button>
-													<AlertDialog>
-														<AlertDialogTrigger asChild>
+												</div>
+											)}
+											{connector.is_indexable && (
+												<TooltipProvider>
+													<Tooltip>
+														<TooltipTrigger asChild>
 															<Button
 																variant="outline"
 																size="sm"
-																className="text-destructive-foreground hover:bg-destructive/10"
-																onClick={() => setConnectorToDelete(connector.id)}
+																onClick={() => handleOpenPeriodicDialog(connector.id)}
 															>
-																<Trash2 className="h-4 w-4" />
-																<span className="sr-only">{tCommon("delete")}</span>
+																<Clock className="h-4 w-4" />
+																<span className="sr-only">Configure Periodic Indexing</span>
 															</Button>
-														</AlertDialogTrigger>
-														<AlertDialogContent>
-															<AlertDialogHeader>
-																<AlertDialogTitle>{t("delete_connector")}</AlertDialogTitle>
-																<AlertDialogDescription>
-																	{t("delete_confirm")}
-																</AlertDialogDescription>
-															</AlertDialogHeader>
-															<AlertDialogFooter>
-																<AlertDialogCancel onClick={() => setConnectorToDelete(null)}>
-																	{tCommon("cancel")}
-																</AlertDialogCancel>
-																<AlertDialogAction
-																	className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-																	onClick={handleDeleteConnector}
-																>
-																	{tCommon("delete")}
-																</AlertDialogAction>
-															</AlertDialogFooter>
-														</AlertDialogContent>
-													</AlertDialog>
-												</div>
-											</TableCell>
-										</TableRow>
-									))}
-								</TableBody>
-							</Table>
-						</div>
-					)}
-				</CardContent>
-			</Card>
+														</TooltipTrigger>
+														<TooltipContent>
+															<p>Configure Periodic Indexing</p>
+														</TooltipContent>
+													</Tooltip>
+												</TooltipProvider>
+											)}
+											<Button
+												variant="outline"
+												size="sm"
+												onClick={() =>
+													router.push(
+														`/dashboard/${searchSpaceId}/connectors/${connector.id}/edit`
+													)
+												}
+											>
+												<Edit className="h-4 w-4" />
+												<span className="sr-only">{tCommon("edit")}</span>
+											</Button>
+											<AlertDialog>
+												<AlertDialogTrigger asChild>
+													<Button
+														variant="outline"
+														size="sm"
+														className="text-destructive-foreground hover:bg-destructive/10"
+														onClick={() => setConnectorToDelete(connector.id)}
+													>
+														<Trash2 className="h-4 w-4" />
+														<span className="sr-only">{tCommon("delete")}</span>
+													</Button>
+												</AlertDialogTrigger>
+												<AlertDialogContent>
+													<AlertDialogHeader>
+														<AlertDialogTitle>{t("delete_connector")}</AlertDialogTitle>
+														<AlertDialogDescription>
+															{t("delete_confirm")}
+														</AlertDialogDescription>
+													</AlertDialogHeader>
+													<AlertDialogFooter>
+														<AlertDialogCancel onClick={() => setConnectorToDelete(null)}>
+															{tCommon("cancel")}
+														</AlertDialogCancel>
+														<AlertDialogAction
+															className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+															onClick={handleDeleteConnector}
+														>
+															{tCommon("delete")}
+														</AlertDialogAction>
+													</AlertDialogFooter>
+												</AlertDialogContent>
+											</AlertDialog>
+										</div>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</div>
+			)}
 
 			{/* Date Picker Dialog */}
 			<Dialog open={datePickerOpen} onOpenChange={setDatePickerOpen}>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/upload/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/upload/page.tsx
index 2c3220524..d980c73e0 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/upload/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/upload/page.tsx
@@ -1,16 +1,36 @@
 "use client";
 
-import { useParams, useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { Upload } from "lucide-react";
+import { motion } from "motion/react";
+import { useParams } from "next/navigation";
+import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
 
-export default function UploadDocumentsRedirect() {
+export default function UploadDocumentsPage() {
 	const params = useParams();
-	const router = useRouter();
 	const search_space_id = params.search_space_id as string;
 
-	useEffect(() => {
-		router.replace(`/dashboard/${search_space_id}/sources/add?tab=documents`);
-	}, [search_space_id, router]);
+	return (
+		<div className="container mx-auto py-8 px-4 min-h-[calc(100vh-64px)]">
+			<motion.div
+				initial={{ opacity: 0, y: 20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.5 }}
+				className="space-y-6"
+			>
+				{/* Header */}
+				<div className="text-center space-y-2">
+					<h1 className="text-2xl sm:text-4xl font-bold tracking-tight flex items-center justify-center gap-3">
+						<Upload className="h-6 w-6 sm:h-8 sm:w-8" />
+						Upload Documents
+					</h1>
+					<p className="text-muted-foreground text-sm sm:text-lg">
+						Upload documents to your search space for AI-powered search and chat
+					</p>
+				</div>
 
-	return null;
+				{/* Document Upload */}
+				<DocumentUploadTab searchSpaceId={search_space_id} />
+			</motion.div>
+		</div>
+	);
 }
diff --git a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
index 12b3cec78..0ca4ee169 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
@@ -1,12 +1,11 @@
 "use client";
 
 import { IconBrandYoutube } from "@tabler/icons-react";
-import { Cable, Database, Globe, Upload } from "lucide-react";
+import { Cable, Database, Globe } from "lucide-react";
 import { motion } from "motion/react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { ConnectorsTab } from "@/components/sources/ConnectorsTab";
-import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
 import { YouTubeTab } from "@/components/sources/YouTubeTab";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { trackSourcesTabViewed } from "@/lib/posthog/events";
@@ -16,12 +15,12 @@ export default function AddSourcesPage() {
 	const router = useRouter();
 	const searchParams = useSearchParams();
 	const search_space_id = params.search_space_id as string;
-	const [activeTab, setActiveTab] = useState("documents");
+	const [activeTab, setActiveTab] = useState("youtube");
 
 	// Handle tab from query parameter
 	useEffect(() => {
 		const tabParam = searchParams.get("tab");
-		if (tabParam && ["documents", "youtube", "connectors"].includes(tabParam)) {
+		if (tabParam && ["youtube", "connectors"].includes(tabParam)) {
 			setActiveTab(tabParam);
 		}
 	}, [searchParams]);
@@ -62,12 +61,7 @@ export default function AddSourcesPage() {
 
 				{/* Tabs */}
 				<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-					<TabsList className="grid w-full max-w-3xl mx-auto grid-cols-4 h-12">
-						<TabsTrigger value="documents" className="flex items-center gap-2">
-							<Upload className="h-4 w-4" />
-							<span className="hidden sm:inline">Documents</span>
-							<span className="sm:hidden">Docs</span>
-						</TabsTrigger>
+					<TabsList className="grid w-full max-w-2xl mx-auto grid-cols-3 h-12">
 						<TabsTrigger value="youtube" className="flex items-center gap-2">
 							<IconBrandYoutube className="h-4 w-4" />
 							YouTube
@@ -85,10 +79,6 @@ export default function AddSourcesPage() {
 					</TabsList>
 
 					<div className="mt-8">
-						<TabsContent value="documents" className="space-y-6">
-							<DocumentUploadTab searchSpaceId={search_space_id} />
-						</TabsContent>
-
 						<TabsContent value="youtube" className="space-y-6">
 							<YouTubeTab searchSpaceId={search_space_id} />
 						</TabsContent>
diff --git a/surfsense_web/components/assistant-ui/attachment.tsx b/surfsense_web/components/assistant-ui/attachment.tsx
index 2400f3966..c08736d7c 100644
--- a/surfsense_web/components/assistant-ui/attachment.tsx
+++ b/surfsense_web/components/assistant-ui/attachment.tsx
@@ -325,7 +325,7 @@ export const ComposerAddAttachment: FC = () => {
 	const chatAttachmentInputRef = useRef<HTMLInputElement>(null);
 
 	const handleFileUpload = () => {
-		router.push(`/dashboard/${searchSpaceId}/sources/add?tab=documents`);
+		router.push(`/dashboard/${searchSpaceId}/documents/upload`);
 	};
 
 	const handleChatAttachment = () => {

From 163df8fda7a878e9d27864552c9fda14ce38b36d Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 17:21:26 +0530
Subject: [PATCH 20/28] feat: Enhance connector management UI with improved
 loading states, add document count display for connectors, and implement
 indexing progress indicators for better user feedback.

---
 surfsense_backend/app/routes/logs_routes.py   |   4 +
 .../documents/(manage)/page.tsx               |  24 ++--
 .../[search_space_id]/logs/(manage)/page.tsx  |  35 ++++-
 .../assistant-ui/connector-popup.tsx          |  37 +++---
 .../components/connector-card.tsx             |  71 +++++++++-
 .../tabs/active-connectors-tab.tsx            |  16 +--
 .../tabs/all-connectors-tab.tsx               | 124 +++++++++++-------
 .../utils/connector-document-mapping.ts       |  64 +++++++++
 surfsense_web/contracts/types/log.types.ts    |   1 +
 surfsense_web/tailwind.config.js              |   6 +
 10 files changed, 287 insertions(+), 95 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/utils/connector-document-mapping.ts

diff --git a/surfsense_backend/app/routes/logs_routes.py b/surfsense_backend/app/routes/logs_routes.py
index e7e00280e..b82e02077 100644
--- a/surfsense_backend/app/routes/logs_routes.py
+++ b/surfsense_backend/app/routes/logs_routes.py
@@ -322,6 +322,9 @@ async def get_logs_summary(
                 document_id = (
                     log.log_metadata.get("document_id") if log.log_metadata else None
                 )
+                connector_id = (
+                    log.log_metadata.get("connector_id") if log.log_metadata else None
+                )
                 summary["active_tasks"].append(
                     {
                         "id": log.id,
@@ -330,6 +333,7 @@ async def get_logs_summary(
                         "started_at": log.created_at,
                         "source": log.source,
                         "document_id": document_id,
+                        "connector_id": connector_id,
                     }
                 )
 
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
index c61fcfe78..019f5796a 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/page.tsx
@@ -125,14 +125,22 @@ export default function DocumentsTable() {
 		setColumnVisibility((prev) => ({ ...prev, [id]: checked }));
 	};
 
+	const [isRefreshing, setIsRefreshing] = useState(false);
+
 	const refreshCurrentView = useCallback(async () => {
-		if (debouncedSearch.trim()) {
-			await refetchSearch();
-		} else {
-			await refetchDocuments();
+		if (isRefreshing) return;
+		setIsRefreshing(true);
+		try {
+			if (debouncedSearch.trim()) {
+				await refetchSearch();
+			} else {
+				await refetchDocuments();
+			}
+			toast.success(t("refresh_success") || "Documents refreshed");
+		} finally {
+			setIsRefreshing(false);
 		}
-		toast.success(t("refresh_success") || "Documents refreshed");
-	}, [debouncedSearch, refetchSearch, refetchDocuments, t]);
+	}, [debouncedSearch, refetchSearch, refetchDocuments, t, isRefreshing]);
 
 	// Set up smart polling for active tasks - only polls when tasks are in progress
 	const { summary } = useLogsSummary(searchSpaceId, 24, {
@@ -230,8 +238,8 @@ export default function DocumentsTable() {
 					<h2 className="text-xl md:text-2xl font-bold tracking-tight">{t("title")}</h2>
 					<p className="text-xs md:text-sm text-muted-foreground">{t("subtitle")}</p>
 				</div>
-				<Button onClick={refreshCurrentView} variant="outline" size="sm">
-					<RefreshCw className="w-4 h-4 mr-2" />
+				<Button onClick={refreshCurrentView} variant="outline" size="sm" disabled={isRefreshing}>
+					<RefreshCw className={`w-4 h-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
 					{t("refresh")}
 				</Button>
 			</motion.div>
diff --git a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
index b6e4ed108..0070b20be 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx
@@ -472,9 +472,18 @@ export default function LogsManagePage() {
 		}
 	};
 
+	const [isRefreshing, setIsRefreshing] = useState(false);
+	const [isSummaryRefreshing, setIsSummaryRefreshing] = useState(false);
+
 	const handleRefresh = async () => {
-		await Promise.all([refreshLogs(), refreshSummary()]);
-		toast.success("Logs refreshed");
+		if (isRefreshing) return;
+		setIsRefreshing(true);
+		try {
+			await Promise.all([refreshLogs(), refreshSummary()]);
+			toast.success("Logs refreshed");
+		} finally {
+			setIsRefreshing(false);
+		}
 	};
 
 	return (
@@ -495,7 +504,16 @@ export default function LogsManagePage() {
 					summary={summary}
 					loading={summaryLoading}
 					error={summaryError?.message ?? null}
-					onRefresh={refreshSummary}
+					onRefresh={async () => {
+						if (isSummaryRefreshing) return;
+						setIsSummaryRefreshing(true);
+						try {
+							await refreshSummary();
+						} finally {
+							setIsSummaryRefreshing(false);
+						}
+					}}
+					isRefreshing={isSummaryRefreshing}
 				/>
 
 				{/* Logs Table Header */}
@@ -509,8 +527,8 @@ export default function LogsManagePage() {
 						<h2 className="text-xl md:text-2xl font-bold tracking-tight">{t("title")}</h2>
 						<p className="text-xs md:text-sm text-muted-foreground">{t("subtitle")}</p>
 					</div>
-					<Button onClick={handleRefresh} variant="outline" size="sm">
-						<RefreshCw className="w-4 h-4 mr-2" />
+					<Button onClick={handleRefresh} variant="outline" size="sm" disabled={isRefreshing}>
+						<RefreshCw className={`w-4 h-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
 						{t("refresh")}
 					</Button>
 				</motion.div>
@@ -546,11 +564,13 @@ function LogsSummaryDashboard({
 	loading,
 	error,
 	onRefresh,
+	isRefreshing = false,
 }: {
 	summary: any;
 	loading: boolean;
 	error: string | null;
-	onRefresh: () => void;
+	onRefresh: () => void | Promise<void>;
+	isRefreshing?: boolean;
 }) {
 	const t = useTranslations("logs");
 	if (loading) {
@@ -581,7 +601,8 @@ function LogsSummaryDashboard({
 					<div className="flex flex-col items-center gap-2">
 						<AlertCircle className="h-8 w-8 text-destructive" />
 						<p className="text-sm text-destructive">{t("failed_load_summary")}</p>
-						<Button variant="outline" size="sm" onClick={onRefresh}>
+						<Button variant="outline" size="sm" onClick={onRefresh} disabled={isRefreshing}>
+							<RefreshCw className={`w-4 h-4 mr-2 ${isRefreshing ? "animate-spin" : ""}`} />
 							{t("retry")}
 						</Button>
 					</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index f51a80f98..ba80f0d7e 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -136,12 +136,8 @@ export const ConnectorIndicator: FC = () => {
 		if (!logsSummary?.active_tasks) return new Set<number>();
 		return new Set(
 			logsSummary.active_tasks
-				.filter((task) => task.source?.includes("connector_indexing"))
-				.map((task) => {
-					const match = task.source?.match(/connector[_-]?(\d+)/i);
-					return match ? parseInt(match[1], 10) : null;
-				})
-				.filter((id): id is number => id !== null)
+				.filter((task) => task.source?.includes("connector_indexing") && task.connector_id != null)
+				.map((task) => task.connector_id as number)
 		);
 	}, [logsSummary?.active_tasks]);
 
@@ -261,19 +257,22 @@ export const ConnectorIndicator: FC = () => {
 						<div className="flex-1 min-h-0 relative overflow-hidden">
 							<div className="h-full overflow-y-auto" onScroll={handleScroll}>
 								<div className="px-6 sm:px-12 py-6 sm:py-8 pb-16 sm:pb-16">
-									<TabsContent value="all" className="m-0">
-									<AllConnectorsTab
-										searchQuery={searchQuery}
-										searchSpaceId={searchSpaceId}
-										connectedTypes={connectedTypes}
-										connectingId={connectingId}
-										allConnectors={allConnectors}
-										onConnectOAuth={handleConnectOAuth}
-										onConnectNonOAuth={handleConnectNonOAuth}
-										onCreateWebcrawler={handleCreateWebcrawler}
-										onManage={handleStartEdit}
-									/>
-									</TabsContent>
+								<TabsContent value="all" className="m-0">
+								<AllConnectorsTab
+									searchQuery={searchQuery}
+									searchSpaceId={searchSpaceId}
+									connectedTypes={connectedTypes}
+									connectingId={connectingId}
+									allConnectors={allConnectors}
+									documentTypeCounts={documentTypeCounts}
+									indexingConnectorIds={indexingConnectorIds}
+									logsSummary={logsSummary}
+									onConnectOAuth={handleConnectOAuth}
+									onConnectNonOAuth={handleConnectNonOAuth}
+									onCreateWebcrawler={handleCreateWebcrawler}
+									onManage={handleStartEdit}
+								/>
+								</TabsContent>
 
 									<ActiveConnectorsTab
 										hasSources={hasSources}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
index 1e5871579..413cc402c 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { Loader2 } from "lucide-react";
+import { FileText, Loader2 } from "lucide-react";
 import { type FC } from "react";
 import { Button } from "@/components/ui/button";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import type { LogActiveTask } from "@/contracts/types/log.types";
 
 interface ConnectorCardProps {
 	id: string;
@@ -12,10 +13,24 @@ interface ConnectorCardProps {
 	connectorType: string;
 	isConnected?: boolean;
 	isConnecting?: boolean;
+	documentCount?: number;
+	isIndexing?: boolean;
+	activeTask?: LogActiveTask;
 	onConnect?: () => void;
 	onManage?: () => void;
 }
 
+/**
+ * Extract a number from the active task message for display
+ * Looks for patterns like "45 indexed", "Processing 123", etc.
+ */
+function extractIndexedCount(message: string | undefined): number | null {
+	if (!message) return null;
+	// Try to find a number in the message
+	const match = message.match(/(\d+)/);
+	return match ? parseInt(match[1], 10) : null;
+}
+
 export const ConnectorCard: FC<ConnectorCardProps> = ({
 	id,
 	title,
@@ -23,9 +38,53 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 	connectorType,
 	isConnected = false,
 	isConnecting = false,
+	documentCount,
+	isIndexing = false,
+	activeTask,
 	onConnect,
 	onManage,
 }) => {
+	// Extract count from active task message during indexing
+	const indexingCount = extractIndexedCount(activeTask?.message);
+
+	// Determine the status content to display
+	const getStatusContent = () => {
+		if (isIndexing) {
+			return (
+				<div className="flex items-center gap-2 w-full max-w-[200px]">
+					<span className="text-[11px] text-primary font-medium whitespace-nowrap">
+						{indexingCount !== null ? (
+							<>{indexingCount.toLocaleString()} indexed</>
+						) : (
+							"Syncing..."
+						)}
+					</span>
+					{/* Indeterminate progress bar with animation */}
+					<div className="relative flex-1 h-1 overflow-hidden rounded-full bg-primary/20">
+						<div className="absolute h-full bg-primary rounded-full animate-progress-indeterminate" />
+					</div>
+				</div>
+			);
+		}
+
+		if (isConnected) {
+			if (documentCount !== undefined && documentCount > 0) {
+				return (
+					<span className="inline-flex items-center gap-1.5">
+						<FileText className="size-3 flex-shrink-0" />
+						<span className="whitespace-nowrap">
+							{documentCount.toLocaleString()} document{documentCount !== 1 ? "s" : ""}
+						</span>
+					</span>
+				);
+			}
+			// Fallback for connected but no documents yet
+			return <span className="whitespace-nowrap">No documents indexed</span>;
+		}
+
+		return description;
+	};
+
 	return (
 		<div className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10">
 			<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
@@ -35,19 +94,21 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 				<div className="flex items-center gap-2">
 					<span className="text-[14px] font-semibold leading-tight">{title}</span>
 				</div>
-				<p className="text-[11px] text-muted-foreground truncate mt-1">
-					{isConnected ? "Connected" : description}
-				</p>
+				<div className="text-[11px] text-muted-foreground mt-1">
+					{getStatusContent()}
+				</div>
 			</div>
 			<Button
 				size="sm"
 				variant={isConnected ? "outline" : "default"}
 				className="h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium"
 				onClick={isConnected ? onManage : onConnect}
-				disabled={isConnecting}
+				disabled={isConnecting || isIndexing}
 			>
 				{isConnecting ? (
 					<Loader2 className="size-3 animate-spin" />
+				) : isIndexing ? (
+					"Syncing..."
 				) : isConnected ? (
 					"Manage"
 				) : (
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
index 7397264e8..330658fbb 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import { format } from "date-fns";
-import { Cable, Loader2 } from "lucide-react";
-import { useRouter } from "next/navigation";
+import { Cable, FileText, Loader2 } from "lucide-react";
 import type { FC } from "react";
 import { Button } from "@/components/ui/button";
 import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
@@ -32,11 +31,9 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 	connectors,
 	indexingConnectorIds,
 	logsSummary,
-	searchSpaceId,
 	onTabChange,
 	onManage,
 }) => {
-	const router = useRouter();
 
 	return (
 		<TabsContent value="active" className="m-0">
@@ -60,8 +57,11 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 									<p className="text-[14px] font-semibold leading-tight">
 										{getDocumentTypeLabel(docType)}
 									</p>
-									<p className="text-[11px] text-muted-foreground mt-1">
-										{count as number} documents indexed
+									<p className="text-[11px] text-muted-foreground mt-1 inline-flex items-center gap-1.5">
+										<FileText className="size-3 flex-shrink-0" />
+										<span className="whitespace-nowrap">
+											{(count as number).toLocaleString()} document{count !== 1 ? "s" : ""}
+										</span>
 									</p>
 								</div>
 							</div>
@@ -69,9 +69,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 						{connectors.map((connector) => {
 							const isIndexing = indexingConnectorIds.has(connector.id);
 							const activeTask = logsSummary?.active_tasks?.find(
-								(task: LogActiveTask) =>
-									task.source?.includes(`connector_${connector.id}`) ||
-									task.source?.includes(`connector-${connector.id}`)
+								(task: LogActiveTask) => task.connector_id === connector.id
 							);
 
 							return (
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 6143f1d54..74ae3660f 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -3,8 +3,10 @@
 import { useRouter } from "next/navigation";
 import { type FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import type { LogActiveTask, LogSummary } from "@/contracts/types/log.types";
 import { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "../constants/connector-constants";
 import { ConnectorCard } from "../components/connector-card";
+import { getDocumentCountForConnector } from "../utils/connector-document-mapping";
 
 interface AllConnectorsTabProps {
 	searchQuery: string;
@@ -12,6 +14,9 @@ interface AllConnectorsTabProps {
 	connectedTypes: Set<string>;
 	connectingId: string | null;
 	allConnectors: SearchSourceConnector[] | undefined;
+	documentTypeCounts?: Record<string, number>;
+	indexingConnectorIds?: Set<number>;
+	logsSummary?: LogSummary;
 	onConnectOAuth: (connector: (typeof OAUTH_CONNECTORS)[number]) => void;
 	onConnectNonOAuth?: (connectorType: string) => void;
 	onCreateWebcrawler?: () => void;
@@ -24,6 +29,9 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 	connectedTypes,
 	connectingId,
 	allConnectors,
+	documentTypeCounts,
+	indexingConnectorIds,
+	logsSummary,
 	onConnectOAuth,
 	onConnectNonOAuth,
 	onCreateWebcrawler,
@@ -31,6 +39,14 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 }) => {
 	const router = useRouter();
 
+	// Helper to find active task for a connector
+	const getActiveTaskForConnector = (connectorId: number): LogActiveTask | undefined => {
+		if (!logsSummary?.active_tasks) return undefined;
+		return logsSummary.active_tasks.find(
+			(task: LogActiveTask) => task.connector_id === connectorId
+		);
+	};
+
 	// Filter connectors based on search
 	const filteredOAuth = OAUTH_CONNECTORS.filter(
 		(c) =>
@@ -55,28 +71,35 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 						</h3>
 					</div>
 					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-						{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;
+					{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(connector.connectorType, documentTypeCounts);
+						const isIndexing = actualConnector && indexingConnectorIds?.has(actualConnector.id);
+						const activeTask = actualConnector ? getActiveTaskForConnector(actualConnector.id) : undefined;
 
-							return (
-								<ConnectorCard
-									key={connector.id}
-									id={connector.id}
-									title={connector.title}
-									description={connector.description}
-									connectorType={connector.connectorType}
-									isConnected={isConnected}
-									isConnecting={isConnecting}
-									onConnect={() => onConnectOAuth(connector)}
-									onManage={actualConnector && onManage ? () => onManage(actualConnector) : undefined}
-								/>
-							);
-						})}
+						return (
+							<ConnectorCard
+								key={connector.id}
+								id={connector.id}
+								title={connector.title}
+								description={connector.description}
+								connectorType={connector.connectorType}
+								isConnected={isConnected}
+								isConnecting={isConnecting}
+								documentCount={documentCount}
+								isIndexing={isIndexing}
+								activeTask={activeTask}
+								onConnect={() => onConnectOAuth(connector)}
+								onManage={actualConnector && onManage ? () => onManage(actualConnector) : undefined}
+							/>
+						);
+					})}
 					</div>
 				</section>
 			)}
@@ -109,34 +132,41 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 							const isClickUp = connector.id === "clickup-connector";
 							const isLuma = connector.id === "luma-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 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 handleConnect = isWebcrawler && onCreateWebcrawler
-								? onCreateWebcrawler
-								: (isTavily || isSearxng || isLinkup || isBaidu || isLinear || isElasticsearch || isSlack || isDiscord || isNotion || isConfluence || isBookStack || isGithub || isJira || isClickUp || isLuma) && onConnectNonOAuth
-								? () => onConnectNonOAuth(connector.connectorType)
-								: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);
+						const documentCount = getDocumentCountForConnector(connector.connectorType, documentTypeCounts);
+						const isIndexing = actualConnector && indexingConnectorIds?.has(actualConnector.id);
+						const activeTask = actualConnector ? getActiveTaskForConnector(actualConnector.id) : undefined;
 
-							return (
-								<ConnectorCard
-									key={connector.id}
-									id={connector.id}
-									title={connector.title}
-									description={connector.description}
-									connectorType={connector.connectorType}
-									isConnected={isConnected}
-									isConnecting={isConnecting}
-									onConnect={handleConnect}
-									onManage={actualConnector && onManage ? () => onManage(actualConnector) : undefined}
-								/>
-							);
-						})}
+						const handleConnect = isWebcrawler && onCreateWebcrawler
+							? onCreateWebcrawler
+							: (isTavily || isSearxng || isLinkup || isBaidu || isLinear || isElasticsearch || isSlack || isDiscord || isNotion || isConfluence || isBookStack || isGithub || isJira || isClickUp || isLuma) && onConnectNonOAuth
+							? () => onConnectNonOAuth(connector.connectorType)
+							: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);
+
+						return (
+							<ConnectorCard
+								key={connector.id}
+								id={connector.id}
+								title={connector.title}
+								description={connector.description}
+								connectorType={connector.connectorType}
+								isConnected={isConnected}
+								isConnecting={isConnecting}
+								documentCount={documentCount}
+								isIndexing={isIndexing}
+								activeTask={activeTask}
+								onConnect={handleConnect}
+								onManage={actualConnector && onManage ? () => onManage(actualConnector) : undefined}
+							/>
+						);
+					})}
 					</div>
 				</section>
 			)}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/utils/connector-document-mapping.ts b/surfsense_web/components/assistant-ui/connector-popup/utils/connector-document-mapping.ts
new file mode 100644
index 000000000..a0afa7431
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/utils/connector-document-mapping.ts
@@ -0,0 +1,64 @@
+"use client";
+
+/**
+ * Maps SearchSourceConnectorType to DocumentType for fetching document counts
+ * 
+ * Note: Some connectors don't have a direct 1:1 mapping to document types:
+ * - Search API connectors (TAVILY_API, SEARXNG_API, etc.) don't index documents
+ * - WEBCRAWLER_CONNECTOR maps to CRAWLED_URL document type
+ * - GOOGLE_DRIVE_CONNECTOR maps to GOOGLE_DRIVE_FILE document type
+ */
+export const CONNECTOR_TO_DOCUMENT_TYPE: Record<string, string> = {
+	// Direct mappings (connector type matches document type)
+	SLACK_CONNECTOR: "SLACK_CONNECTOR",
+	NOTION_CONNECTOR: "NOTION_CONNECTOR",
+	GITHUB_CONNECTOR: "GITHUB_CONNECTOR",
+	LINEAR_CONNECTOR: "LINEAR_CONNECTOR",
+	DISCORD_CONNECTOR: "DISCORD_CONNECTOR",
+	JIRA_CONNECTOR: "JIRA_CONNECTOR",
+	CONFLUENCE_CONNECTOR: "CONFLUENCE_CONNECTOR",
+	CLICKUP_CONNECTOR: "CLICKUP_CONNECTOR",
+	GOOGLE_CALENDAR_CONNECTOR: "GOOGLE_CALENDAR_CONNECTOR",
+	GOOGLE_GMAIL_CONNECTOR: "GOOGLE_GMAIL_CONNECTOR",
+	AIRTABLE_CONNECTOR: "AIRTABLE_CONNECTOR",
+	LUMA_CONNECTOR: "LUMA_CONNECTOR",
+	ELASTICSEARCH_CONNECTOR: "ELASTICSEARCH_CONNECTOR",
+	BOOKSTACK_CONNECTOR: "BOOKSTACK_CONNECTOR",
+
+	// Special mappings (connector type differs from document type)
+	GOOGLE_DRIVE_CONNECTOR: "GOOGLE_DRIVE_FILE",
+	WEBCRAWLER_CONNECTOR: "CRAWLED_URL",
+};
+
+/**
+ * Get the document type for a given connector type
+ * Returns undefined if the connector doesn't index documents (e.g., search APIs)
+ */
+export function getDocumentTypeForConnector(
+	connectorType: string
+): string | undefined {
+	return CONNECTOR_TO_DOCUMENT_TYPE[connectorType];
+}
+
+/**
+ * Get document count for a specific connector type from document type counts
+ */
+export function getDocumentCountForConnector(
+	connectorType: string,
+	documentTypeCounts: Record<string, number> | undefined
+): number | undefined {
+	if (!documentTypeCounts) return undefined;
+
+	const documentType = getDocumentTypeForConnector(connectorType);
+	if (!documentType) return undefined;
+
+	return documentTypeCounts[documentType];
+}
+
+/**
+ * Check if a connector type is indexable (produces documents)
+ */
+export function isIndexableConnectorType(connectorType: string): boolean {
+	return connectorType in CONNECTOR_TO_DOCUMENT_TYPE;
+}
+
diff --git a/surfsense_web/contracts/types/log.types.ts b/surfsense_web/contracts/types/log.types.ts
index ac81d2d0d..eb9f7fe6c 100644
--- a/surfsense_web/contracts/types/log.types.ts
+++ b/surfsense_web/contracts/types/log.types.ts
@@ -86,6 +86,7 @@ export const logActiveTask = z.object({
 	started_at: z.string(),
 	source: z.string().nullable().optional(),
 	document_id: z.number().nullable().optional(),
+	connector_id: z.number().nullable().optional(),
 });
 export const logFailure = z.object({
 	id: z.number(),
diff --git a/surfsense_web/tailwind.config.js b/surfsense_web/tailwind.config.js
index 9c4601f68..8bd78ed2b 100644
--- a/surfsense_web/tailwind.config.js
+++ b/surfsense_web/tailwind.config.js
@@ -65,10 +65,16 @@ module.exports = {
 					from: { height: "var(--radix-accordion-content-height)" },
 					to: { height: 0 },
 				},
+				"progress-indeterminate": {
+					"0%": { left: "-33%", width: "33%" },
+					"50%": { width: "50%" },
+					"100%": { left: "100%", width: "33%" },
+				},
 			},
 			animation: {
 				"accordion-down": "accordion-down 0.2s ease-out",
 				"accordion-up": "accordion-up 0.2s ease-out",
+				"progress-indeterminate": "progress-indeterminate 1.5s ease-in-out infinite",
 			},
 		},
 	},

From de63e77f784cfc97452777275e2a160a570694e3 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 17:35:45 +0530
Subject: [PATCH 21/28] feat: Remove webcrawler connector and associated
 references from the dashboard, streamlining the source addition process and
 improving UI consistency.

---
 .../add/webcrawler-connector/page.tsx         | 325 ------------------
 .../[search_space_id]/sources/add/page.tsx    |  19 +-
 .../components/dashboard-breadcrumb.tsx       |   1 -
 .../components/sources/connector-data.tsx     |  13 -
 4 files changed, 5 insertions(+), 353 deletions(-)
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/webcrawler-connector/page.tsx

diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/webcrawler-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/webcrawler-connector/page.tsx
deleted file mode 100644
index 0b7e811d0..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/webcrawler-connector/page.tsx
+++ /dev/null
@@ -1,325 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Globe, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-
-// Define the form schema with Zod
-const webcrawlerConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	api_key: z.string().optional(),
-	initial_urls: z.string().optional(),
-});
-
-// Define the type for the form values
-type WebcrawlerConnectorFormValues = z.infer<typeof webcrawlerConnectorFormSchema>;
-
-export default function WebcrawlerConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [doesConnectorExist, setDoesConnectorExist] = useState(false);
-
-	const { refetch: fetchConnectors } = useAtomValue(connectorsAtom);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<WebcrawlerConnectorFormValues>({
-		resolver: zodResolver(webcrawlerConnectorFormSchema),
-		defaultValues: {
-			name: "Web Pages",
-			api_key: "",
-			initial_urls: "",
-		},
-	});
-
-	useEffect(() => {
-		fetchConnectors().then((data) => {
-			const connectors = data.data || [];
-			const connector = connectors.find(
-				(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.WEBCRAWLER_CONNECTOR
-			);
-			if (connector) {
-				setDoesConnectorExist(true);
-			}
-		});
-	}, []);
-
-	// Handle form submission
-	const onSubmit = async (values: WebcrawlerConnectorFormValues) => {
-		setIsSubmitting(true);
-		try {
-			const config: Record<string, string> = {};
-
-			// Only add API key to config if provided
-			if (values.api_key && values.api_key.trim()) {
-				config.FIRECRAWL_API_KEY = values.api_key;
-			}
-
-			// Parse initial URLs if provided
-			if (values.initial_urls && values.initial_urls.trim()) {
-				config.INITIAL_URLS = values.initial_urls;
-			}
-
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.WEBCRAWLER_CONNECTOR,
-					config: config,
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Webcrawler connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-2xl">
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				{/* Header */}
-				<div className="mb-8">
-					<Link
-						href={`/dashboard/${searchSpaceId}/connectors/add`}
-						className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
-					>
-						<ArrowLeft className="mr-2 h-4 w-4" />
-						Back to connectors
-					</Link>
-					<div className="flex items-center gap-4">
-						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-							{getConnectorIcon(EnumConnectorName.WEBCRAWLER_CONNECTOR, "h-6 w-6")}
-						</div>
-						<div>
-							<h1 className="text-3xl font-bold tracking-tight">Connect Web Pages</h1>
-							<p className="text-muted-foreground">Crawl and index web pages for search.</p>
-						</div>
-					</div>
-				</div>
-
-				{/* Connection Card */}
-				{!doesConnectorExist ? (
-					<Card>
-						<CardHeader>
-							<CardTitle>Set Up Web Page crawler</CardTitle>
-							<CardDescription>
-								Configure your web page crawler to index web pages. Optionally add a Firecrawl API
-								key for enhanced crawling capabilities.
-							</CardDescription>
-						</CardHeader>
-						<Form {...form}>
-							<form onSubmit={form.handleSubmit(onSubmit)}>
-								<CardContent className="space-y-4">
-									<FormField
-										control={form.control}
-										name="name"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Connector Name</FormLabel>
-												<FormControl>
-													<Input placeholder="My Web Crawler" {...field} />
-												</FormControl>
-												<FormDescription>
-													A friendly name to identify this connector.
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									<FormField
-										control={form.control}
-										name="api_key"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Firecrawl API Key (Optional)</FormLabel>
-												<FormControl>
-													<Input type="password" placeholder="fc-xxxxxxxxxxxxx" {...field} />
-												</FormControl>
-												<FormDescription>
-													Add a Firecrawl API key for enhanced crawling. If not provided, will use
-													AsyncChromiumLoader as fallback.
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									<FormField
-										control={form.control}
-										name="initial_urls"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Initial URLs (Optional)</FormLabel>
-												<FormControl>
-													<Textarea
-														placeholder="https://example.com&#10;https://docs.example.com&#10;https://blog.example.com"
-														className="min-h-[100px] font-mono text-sm"
-														{...field}
-													/>
-												</FormControl>
-												<FormDescription>
-													Enter URLs to crawl (one per line). You can add more URLs later.
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									<div className="space-y-2 pt-2">
-										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-											<Check className="h-4 w-4 text-green-500" />
-											<span>Crawl any public web page</span>
-										</div>
-										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-											<Check className="h-4 w-4 text-green-500" />
-											<span>Extract markdown content automatically</span>
-										</div>
-										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-											<Check className="h-4 w-4 text-green-500" />
-											<span>Detect content changes and update documents</span>
-										</div>
-										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-											<Check className="h-4 w-4 text-green-500" />
-											<span>Works with or without Firecrawl API key</span>
-										</div>
-									</div>
-								</CardContent>
-								<CardFooter className="flex justify-between">
-									<Button
-										type="button"
-										variant="outline"
-										onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-									>
-										Cancel
-									</Button>
-									<Button type="submit" disabled={isSubmitting}>
-										{isSubmitting ? (
-											<>
-												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-												Setting up...
-											</>
-										) : (
-											<>
-												<Globe className="mr-2 h-4 w-4" />
-												Create Crawler
-											</>
-										)}
-									</Button>
-								</CardFooter>
-							</form>
-						</Form>
-					</Card>
-				) : (
-					/* Success Card */
-					<Card>
-						<CardHeader>
-							<CardTitle>✅ Your web page crawler is successfully set up!</CardTitle>
-							<CardDescription>
-								You can now add URLs to crawl from the connector management page.
-							</CardDescription>
-						</CardHeader>
-					</Card>
-				)}
-
-				{/* Help Section */}
-				{!doesConnectorExist && (
-					<Card className="mt-6">
-						<CardHeader>
-							<CardTitle className="text-lg">How It Works</CardTitle>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div>
-								<h4 className="font-medium mb-2">1. Choose Your Crawler Method</h4>
-								<p className="text-sm text-muted-foreground">
-									<strong>With Firecrawl (Recommended):</strong> Get your API key from{" "}
-									<a
-										href="https://firecrawl.dev"
-										target="_blank"
-										rel="noopener noreferrer"
-										className="text-primary hover:underline"
-									>
-										firecrawl.dev
-									</a>{" "}
-									for faster, more reliable crawling with better content extraction.
-								</p>
-								<p className="text-sm text-muted-foreground mt-2">
-									<strong>Without Firecrawl:</strong> The crawler will use AsyncChromiumLoader as a
-									free fallback option. This works well for most websites but may be slower.
-								</p>
-							</div>
-							<div>
-								<h4 className="font-medium mb-2">2. Add URLs to Crawl (Optional)</h4>
-								<p className="text-sm text-muted-foreground">
-									You can add initial URLs now or add them later from the connector management page.
-									Enter one URL per line.
-								</p>
-							</div>
-							<div>
-								<h4 className="font-medium mb-2">3. Manage Your Crawler</h4>
-								<p className="text-sm text-muted-foreground">
-									After setup, you can add more URLs, trigger manual crawls, or set up periodic
-									indexing to keep your content up-to-date.
-								</p>
-							</div>
-						</CardContent>
-					</Card>
-				)}
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
index 0ca4ee169..7c52354d2 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { IconBrandYoutube } from "@tabler/icons-react";
-import { Cable, Database, Globe } from "lucide-react";
+import { Cable, Database } from "lucide-react";
 import { motion } from "motion/react";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -26,13 +26,9 @@ export default function AddSourcesPage() {
 	}, [searchParams]);
 
 	const handleTabChange = (value: string) => {
-		if (value === "webpages") {
-			router.push(`/dashboard/${search_space_id}/connectors/add/webcrawler-connector`);
-		} else {
-			setActiveTab(value);
-			// Track tab view
-			trackSourcesTabViewed(Number(search_space_id), value);
-		}
+		setActiveTab(value);
+		// Track tab view
+		trackSourcesTabViewed(Number(search_space_id), value);
 	};
 
 	// Track initial tab view
@@ -61,16 +57,11 @@ export default function AddSourcesPage() {
 
 				{/* Tabs */}
 				<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-					<TabsList className="grid w-full max-w-2xl mx-auto grid-cols-3 h-12">
+					<TabsList className="grid w-full max-w-2xl mx-auto grid-cols-2 h-12">
 						<TabsTrigger value="youtube" className="flex items-center gap-2">
 							<IconBrandYoutube className="h-4 w-4" />
 							YouTube
 						</TabsTrigger>
-						<TabsTrigger value="webpages" className="flex items-center gap-2">
-							<Globe className="h-4 w-4" />
-							<span className="hidden sm:inline">Web Pages</span>
-							<span className="sm:hidden">Web</span>
-						</TabsTrigger>
 						<TabsTrigger value="connectors" className="flex items-center gap-2">
 							<Cable className="h-4 w-4" />
 							<span className="hidden sm:inline">Connectors</span>
diff --git a/surfsense_web/components/dashboard-breadcrumb.tsx b/surfsense_web/components/dashboard-breadcrumb.tsx
index 619e13fc5..757e2c331 100644
--- a/surfsense_web/components/dashboard-breadcrumb.tsx
+++ b/surfsense_web/components/dashboard-breadcrumb.tsx
@@ -192,7 +192,6 @@ export function DashboardBreadcrumb() {
 								"linkup-api": "LinkUp API",
 								"luma-connector": "Luma",
 								"elasticsearch-connector": "Elasticsearch",
-								"webcrawler-connector": "Web Pages",
 							};
 
 							const connectorLabel = connectorLabels[connectorType] || connectorType;
diff --git a/surfsense_web/components/sources/connector-data.tsx b/surfsense_web/components/sources/connector-data.tsx
index 0ab696ceb..4974f3b2d 100644
--- a/surfsense_web/components/sources/connector-data.tsx
+++ b/surfsense_web/components/sources/connector-data.tsx
@@ -4,19 +4,6 @@ import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { ConnectorCategory } from "./types";
 
 export const connectorCategories: ConnectorCategory[] = [
-	{
-		id: "web-crawling",
-		title: "web_crawling",
-		connectors: [
-			{
-				id: "webcrawler-connector",
-				title: "Web Pages",
-				description: "webcrawler_desc",
-				icon: getConnectorIcon(EnumConnectorName.WEBCRAWLER_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
 	{
 		id: "web-search",
 		title: "web_search",

From 75119bf06b0f06dd12f399f36bc09463da8207c1 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 18:17:03 +0530
Subject: [PATCH 22/28] feat: Remove YouTube connector and associated
 components, streamline source addition process with new YouTube crawler view,
 and enhance connector management UI for improved user experience.

---
 .../documents/youtube/page.tsx                |  16 --
 .../[search_space_id]/sources/add/page.tsx    |  59 +----
 .../assistant-ui/connector-popup.tsx          |  18 +-
 .../components/connector-card.tsx             |  21 +-
 .../constants/connector-constants.ts          |  22 +-
 .../constants/connector-popup.schemas.ts      |   2 +-
 .../hooks/use-connector-dialog.ts             |  28 ++
 .../assistant-ui/connector-popup/index.ts     |   2 +-
 .../tabs/active-connectors-tab.tsx            |   2 +-
 .../tabs/all-connectors-tab.tsx               |  71 ++++-
 .../views/youtube-crawler-view.tsx            | 249 ++++++++++++++++++
 .../components/dashboard-breadcrumb.tsx       |   1 -
 .../components/sources/YouTubeTab.tsx         | 245 -----------------
 13 files changed, 405 insertions(+), 331 deletions(-)
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx
 delete mode 100644 surfsense_web/components/sources/YouTubeTab.tsx

diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx
deleted file mode 100644
index 4e39ab39c..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/youtube/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-
-import { useParams, useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-export default function YouTubeRedirect() {
-	const params = useParams();
-	const router = useRouter();
-	const search_space_id = params.search_space_id as string;
-
-	useEffect(() => {
-		router.replace(`/dashboard/${search_space_id}/sources/add?tab=youtube`);
-	}, [search_space_id, router]);
-
-	return null;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
index 7c52354d2..55c6e2ff8 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
@@ -1,40 +1,13 @@
 "use client";
 
-import { IconBrandYoutube } from "@tabler/icons-react";
-import { Cable, Database } from "lucide-react";
+import { Database } from "lucide-react";
 import { motion } from "motion/react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
 import { ConnectorsTab } from "@/components/sources/ConnectorsTab";
-import { YouTubeTab } from "@/components/sources/YouTubeTab";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { trackSourcesTabViewed } from "@/lib/posthog/events";
 
 export default function AddSourcesPage() {
 	const params = useParams();
-	const router = useRouter();
-	const searchParams = useSearchParams();
 	const search_space_id = params.search_space_id as string;
-	const [activeTab, setActiveTab] = useState("youtube");
-
-	// Handle tab from query parameter
-	useEffect(() => {
-		const tabParam = searchParams.get("tab");
-		if (tabParam && ["youtube", "connectors"].includes(tabParam)) {
-			setActiveTab(tabParam);
-		}
-	}, [searchParams]);
-
-	const handleTabChange = (value: string) => {
-		setActiveTab(value);
-		// Track tab view
-		trackSourcesTabViewed(Number(search_space_id), value);
-	};
-
-	// Track initial tab view
-	useEffect(() => {
-		trackSourcesTabViewed(Number(search_space_id), activeTab);
-	}, []);
 
 	return (
 		<div className="container mx-auto py-8 px-4 min-h-[calc(100vh-64px)]">
@@ -55,30 +28,10 @@ export default function AddSourcesPage() {
 					</p>
 				</div>
 
-				{/* Tabs */}
-				<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-					<TabsList className="grid w-full max-w-2xl mx-auto grid-cols-2 h-12">
-						<TabsTrigger value="youtube" className="flex items-center gap-2">
-							<IconBrandYoutube className="h-4 w-4" />
-							YouTube
-						</TabsTrigger>
-						<TabsTrigger value="connectors" className="flex items-center gap-2">
-							<Cable className="h-4 w-4" />
-							<span className="hidden sm:inline">Connectors</span>
-							<span className="sm:hidden">More</span>
-						</TabsTrigger>
-					</TabsList>
-
-					<div className="mt-8">
-						<TabsContent value="youtube" className="space-y-6">
-							<YouTubeTab searchSpaceId={search_space_id} />
-						</TabsContent>
-
-						<TabsContent value="connectors" className="space-y-6">
-							<ConnectorsTab searchSpaceId={search_space_id} />
-						</TabsContent>
-					</div>
-				</Tabs>
+				{/* Connectors */}
+				<div className="mt-8">
+					<ConnectorsTab searchSpaceId={search_space_id} />
+				</div>
 			</motion.div>
 		</div>
 	);
diff --git a/surfsense_web/components/assistant-ui/connector-popup.tsx b/surfsense_web/components/assistant-ui/connector-popup.tsx
index ba80f0d7e..9b3d138b3 100644
--- a/surfsense_web/components/assistant-ui/connector-popup.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup.tsx
@@ -3,6 +3,7 @@
 import { useAtomValue } from "jotai";
 import { Cable, Loader2 } from "lucide-react";
 import { type FC, useMemo, useEffect } from "react";
+import { useSearchParams } from "next/navigation";
 import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
 import { useLogsSummary } from "@/hooks/use-logs";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
@@ -25,13 +26,18 @@ import { ConnectorDialogHeader } from "./connector-popup/components/connector-di
 import { ConnectorEditView } from "./connector-popup/connector-configs/views/connector-edit-view";
 import { ConnectorConnectView } from "./connector-popup/connector-configs/views/connector-connect-view";
 import { IndexingConfigurationView } from "./connector-popup/connector-configs/views/indexing-configuration-view";
+import { YouTubeCrawlerView } from "./connector-popup/views/youtube-crawler-view";
 import { useConnectorDialog } from "./connector-popup/hooks/use-connector-dialog";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 
 export const ConnectorIndicator: FC = () => {
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
+	const searchParams = useSearchParams();
 	const { data: documentTypeCounts, isLoading: documentTypesLoading } =
 		useAtomValue(documentTypeCountsAtom);
+	
+	// Check if YouTube view is active
+	const isYouTubeView = searchParams.get("view") === "youtube";
 
 	// Track active indexing tasks
 	const { summary: logsSummary } = useLogsSummary(
@@ -75,6 +81,7 @@ export const ConnectorIndicator: FC = () => {
 		handleConnectOAuth,
 		handleConnectNonOAuth,
 		handleCreateWebcrawler,
+		handleCreateYouTubeCrawler,
 		handleSubmitConnectForm,
 		handleStartIndexing,
 		handleSkipIndexing,
@@ -83,6 +90,7 @@ export const ConnectorIndicator: FC = () => {
 		handleDisconnectConnector,
 		handleBackFromEdit,
 		handleBackFromConnect,
+		handleBackFromYouTube,
 		connectorConfig,
 		setConnectorConfig,
 		setIndexingConnectorConfig,
@@ -190,8 +198,13 @@ export const ConnectorIndicator: FC = () => {
 			</TooltipIconButton>
 
 			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[90vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-6 sm:[&>button]:right-12 [&>button]:top-8 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5">
-				{/* Connector Connect View - shown when connecting non-OAuth connectors */}
-				{connectingConnectorType ? (
+				{/* YouTube Crawler View - shown when adding YouTube videos */}
+				{isYouTubeView && searchSpaceId ? (
+					<YouTubeCrawlerView
+						searchSpaceId={searchSpaceId}
+						onBack={handleBackFromYouTube}
+					/>
+				) : connectingConnectorType ? (
 					<ConnectorConnectView
 						connectorType={connectingConnectorType}
 						onSubmit={handleSubmitConnectForm}
@@ -270,6 +283,7 @@ export const ConnectorIndicator: FC = () => {
 									onConnectOAuth={handleConnectOAuth}
 									onConnectNonOAuth={handleConnectNonOAuth}
 									onCreateWebcrawler={handleCreateWebcrawler}
+									onCreateYouTubeCrawler={handleCreateYouTubeCrawler}
 									onManage={handleStartEdit}
 								/>
 								</TabsContent>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
index 413cc402c..126945fa6 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
@@ -1,16 +1,18 @@
 "use client";
 
+import { IconBrandYoutube } from "@tabler/icons-react";
 import { FileText, Loader2 } from "lucide-react";
 import { type FC } from "react";
 import { Button } from "@/components/ui/button";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { LogActiveTask } from "@/contracts/types/log.types";
+import { cn } from "@/lib/utils";
 
 interface ConnectorCardProps {
 	id: string;
 	title: string;
 	description: string;
-	connectorType: string;
+	connectorType?: string;
 	isConnected?: boolean;
 	isConnecting?: boolean;
 	documentCount?: number;
@@ -88,7 +90,13 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 	return (
 		<div className="group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border border-border bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10">
 			<div className="flex h-12 w-12 items-center justify-center rounded-lg transition-colors flex-shrink-0 bg-slate-400/5 dark:bg-white/5 border border-slate-400/5 dark:border-white/5">
-				{getConnectorIcon(connectorType, "size-6")}
+				{connectorType ? (
+					getConnectorIcon(connectorType, "size-6")
+				) : id === "youtube-crawler" ? (
+					<IconBrandYoutube className="size-6" />
+				) : (
+					<FileText className="size-6" />
+				)}
 			</div>
 			<div className="flex-1 min-w-0">
 				<div className="flex items-center gap-2">
@@ -101,7 +109,10 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 			<Button
 				size="sm"
 				variant={isConnected ? "outline" : "default"}
-				className="h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium"
+				className={cn(
+					"h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium",
+					isConnected && "border-0"
+				)}
 				onClick={isConnected ? onManage : onConnect}
 				disabled={isConnecting || isIndexing}
 			>
@@ -111,8 +122,10 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 					"Syncing..."
 				) : isConnected ? (
 					"Manage"
-				) : (
+				) : connectorType ? (
 					"Connect"
+				) : (
+					"Add"
 				)}
 			</Button>
 		</div>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
index 189b5cc5c..60126e135 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
@@ -32,6 +32,22 @@ export const OAUTH_CONNECTORS = [
 	},
 ] as const;
 
+// Content Sources (tools that extract and import content from external sources)
+export const CRAWLERS = [
+	{
+		id: "youtube-crawler",
+		title: "YouTube",
+		description: "Crawl YouTube channels and playlists",
+		connectorType: null, // Not a connector, handled separately
+	},
+	{
+		id: "webcrawler-connector",
+		title: "Web Pages",
+		description: "Crawl web content",
+		connectorType: EnumConnectorName.WEBCRAWLER_CONNECTOR,
+	},
+] as const;
+
 // Non-OAuth Connectors (redirect to old connector config pages)
 export const OTHER_CONNECTORS = [
 	{
@@ -100,12 +116,6 @@ export const OTHER_CONNECTORS = [
 		description: "Search ES indexes",
 		connectorType: EnumConnectorName.ELASTICSEARCH_CONNECTOR,
 	},
-	{
-		id: "webcrawler-connector",
-		title: "Web Pages",
-		description: "Crawl web content",
-		connectorType: EnumConnectorName.WEBCRAWLER_CONNECTOR,
-	},
 	{
 		id: "tavily-api",
 		title: "Tavily AI",
diff --git a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
index 49b398733..89d8553b6 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts
@@ -7,7 +7,7 @@ import { searchSourceConnectorTypeEnum } from "@/contracts/types/connector.types
 export const connectorPopupQueryParamsSchema = z.object({
 	modal: z.enum(["connectors"]).optional(),
 	tab: z.enum(["all", "active"]).optional(),
-	view: z.enum(["configure", "edit", "connect"]).optional(),
+	view: z.enum(["configure", "edit", "connect", "youtube"]).optional(),
 	connector: z.string().optional(),
 	connectorId: z.string().optional(),
 	connectorType: z.string().optional(),
diff --git a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
index 685d7ad65..a24ada2e3 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts
@@ -104,6 +104,11 @@ export const useConnectorDialog = () => {
 					setConnectingConnectorType(params.connectorType);
 				}
 				
+				// Handle YouTube view
+				if (params.view === "youtube") {
+					// YouTube view is active - no additional state needed
+				}
+				
 				if (params.view === "configure" && params.connector && !indexingConfig) {
 					const oauthConnector = OAUTH_CONNECTORS.find(c => c.id === params.connector);
 					if (oauthConnector && allConnectors) {
@@ -177,6 +182,7 @@ export const useConnectorDialog = () => {
 				if (connectingConnectorType) {
 					setConnectingConnectorType(null);
 				}
+				// Clear YouTube view when modal is closed (handled by view param check)
 			}
 		} catch (error) {
 			// Invalid query params - log but don't crash
@@ -270,6 +276,17 @@ export const useConnectorDialog = () => {
 		[searchSpaceId]
 	);
 
+	// Handle creating YouTube crawler (not a connector, shows view in popup)
+	const handleCreateYouTubeCrawler = useCallback(() => {
+		if (!searchSpaceId) return;
+		
+		// Update URL to show YouTube view
+		const url = new URL(window.location.href);
+		url.searchParams.set("modal", "connectors");
+		url.searchParams.set("view", "youtube");
+		window.history.pushState({ modal: true }, "", url.toString());
+	}, [searchSpaceId]);
+
 	// Handle creating webcrawler connector
 	const handleCreateWebcrawler = useCallback(async () => {
 		if (!searchSpaceId) return;
@@ -525,6 +542,15 @@ export const useConnectorDialog = () => {
 		router.replace(url.pathname + url.search, { scroll: false });
 	}, [router]);
 
+	// Handle going back from YouTube view
+	const handleBackFromYouTube = useCallback(() => {
+		const url = new URL(window.location.href);
+		url.searchParams.set("modal", "connectors");
+		url.searchParams.set("tab", "all");
+		url.searchParams.delete("view");
+		router.replace(url.pathname + url.search, { scroll: false });
+	}, [router]);
+
 	// Handle starting indexing
 	const handleStartIndexing = useCallback(async (refreshConnectors: () => void) => {
 		if (!indexingConfig || !searchSpaceId) return;
@@ -951,6 +977,7 @@ export const useConnectorDialog = () => {
 		handleConnectOAuth,
 		handleConnectNonOAuth,
 		handleCreateWebcrawler,
+		handleCreateYouTubeCrawler,
 		handleSubmitConnectForm,
 		handleStartIndexing,
 		handleSkipIndexing,
@@ -959,6 +986,7 @@ export const useConnectorDialog = () => {
 		handleDisconnectConnector,
 		handleBackFromEdit,
 		handleBackFromConnect,
+		handleBackFromYouTube,
 		connectorConfig,
 		setConnectorConfig,
 		setIndexingConnectorConfig,
diff --git a/surfsense_web/components/assistant-ui/connector-popup/index.ts b/surfsense_web/components/assistant-ui/connector-popup/index.ts
index 1c5ebc471..7d7b737fd 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/index.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/index.ts
@@ -12,7 +12,7 @@ export { AllConnectorsTab } from "./tabs/all-connectors-tab";
 export { ActiveConnectorsTab } from "./tabs/active-connectors-tab";
 
 // Constants and types
-export { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./constants/connector-constants";
+export { OAUTH_CONNECTORS, CRAWLERS, OTHER_CONNECTORS } from "./constants/connector-constants";
 export type { IndexingConfigState } from "./constants/connector-constants";
 
 // Schemas and validation
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
index 330658fbb..b033b5f20 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
@@ -117,7 +117,7 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 									<Button
 										variant="outline"
 										size="sm"
-										className="h-8 text-[11px] px-3 rounded-lg font-medium"
+										className="h-8 text-[11px] px-3 rounded-lg font-medium border-0"
 										onClick={onManage ? () => onManage(connector) : undefined}
 										disabled={isIndexing}
 									>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 74ae3660f..030e5dc3d 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -4,7 +4,7 @@ import { useRouter } from "next/navigation";
 import { type FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import type { LogActiveTask, LogSummary } from "@/contracts/types/log.types";
-import { OAUTH_CONNECTORS, OTHER_CONNECTORS } from "../constants/connector-constants";
+import { OAUTH_CONNECTORS, CRAWLERS, OTHER_CONNECTORS } from "../constants/connector-constants";
 import { ConnectorCard } from "../components/connector-card";
 import { getDocumentCountForConnector } from "../utils/connector-document-mapping";
 
@@ -20,6 +20,7 @@ interface AllConnectorsTabProps {
 	onConnectOAuth: (connector: (typeof OAUTH_CONNECTORS)[number]) => void;
 	onConnectNonOAuth?: (connectorType: string) => void;
 	onCreateWebcrawler?: () => void;
+	onCreateYouTubeCrawler?: () => void;
 	onManage?: (connector: SearchSourceConnector) => void;
 }
 
@@ -35,6 +36,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 	onConnectOAuth,
 	onConnectNonOAuth,
 	onCreateWebcrawler,
+	onCreateYouTubeCrawler,
 	onManage,
 }) => {
 	const router = useRouter();
@@ -54,6 +56,12 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 			c.description.toLowerCase().includes(searchQuery.toLowerCase())
 	);
 
+	const filteredCrawlers = CRAWLERS.filter(
+		(c) =>
+			c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+			c.description.toLowerCase().includes(searchQuery.toLowerCase())
+	);
+
 	const filteredOther = OTHER_CONNECTORS.filter(
 		(c) =>
 			c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
@@ -104,6 +112,67 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 				</section>
 			)}
 
+			{/* Content Sources */}
+			{filteredCrawlers.length > 0 && (
+				<section>
+					<div className="flex items-center gap-2 mb-4">
+						<h3 className="text-sm font-semibold text-muted-foreground">
+							Content Sources
+						</h3>
+					</div>
+					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+						{filteredCrawlers.map((crawler) => {
+							const isYouTube = crawler.id === "youtube-crawler";
+							const isWebcrawler = crawler.id === "webcrawler-connector";
+							
+							// For crawlers that are actual connectors, check connection status
+							const isConnected = crawler.connectorType 
+								? connectedTypes.has(crawler.connectorType)
+								: false;
+							const isConnecting = connectingId === crawler.id;
+							
+							// Find the actual connector object if connected
+							const actualConnector = isConnected && crawler.connectorType && allConnectors
+								? allConnectors.find((c: SearchSourceConnector) => c.connector_type === crawler.connectorType)
+								: undefined;
+
+							const documentCount = crawler.connectorType 
+								? getDocumentCountForConnector(crawler.connectorType, documentTypeCounts)
+								: undefined;
+							const isIndexing = actualConnector && indexingConnectorIds?.has(actualConnector.id);
+							const activeTask = actualConnector ? getActiveTaskForConnector(actualConnector.id) : undefined;
+
+							const handleConnect = isYouTube && onCreateYouTubeCrawler
+								? onCreateYouTubeCrawler
+								: isWebcrawler && onCreateWebcrawler
+								? onCreateWebcrawler
+								: crawler.connectorType && onConnectNonOAuth
+								? () => onConnectNonOAuth(crawler.connectorType!)
+								: crawler.connectorType
+								? () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${crawler.id}`)
+								: () => {}; // Fallback for non-connector crawlers
+
+							return (
+								<ConnectorCard
+									key={crawler.id}
+									id={crawler.id}
+									title={crawler.title}
+									description={crawler.description}
+									connectorType={crawler.connectorType || undefined}
+									isConnected={isConnected}
+									isConnecting={isConnecting}
+									documentCount={documentCount}
+									isIndexing={isIndexing}
+									activeTask={activeTask}
+									onConnect={handleConnect}
+									onManage={actualConnector && onManage ? () => onManage(actualConnector) : undefined}
+								/>
+							);
+						})}
+					</div>
+				</section>
+			)}
+
 			{/* More Integrations */}
 			{filteredOther.length > 0 && (
 				<section>
diff --git a/surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx
new file mode 100644
index 000000000..ed5098e37
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import { IconBrandYoutube } from "@tabler/icons-react";
+import { ArrowLeft } from "lucide-react";
+import { TagInput, type Tag as TagType } from "emblor";
+import { useAtom } from "jotai";
+import { Loader2 } from "lucide-react";
+import { type FC, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { toast } from "sonner";
+import { createDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+
+const youtubeRegex =
+	/^(https:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})$/;
+
+interface YouTubeCrawlerViewProps {
+	searchSpaceId: string;
+	onBack: () => void;
+}
+
+export const YouTubeCrawlerView: FC<YouTubeCrawlerViewProps> = ({
+	searchSpaceId,
+	onBack,
+}) => {
+	const t = useTranslations("add_youtube");
+	const router = useRouter();
+	const [videoTags, setVideoTags] = useState<TagType[]>([]);
+	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
+	const [error, setError] = useState<string | null>(null);
+
+	// Use the createDocumentMutationAtom
+	const [createDocumentMutation] = useAtom(createDocumentMutationAtom);
+	const { mutate: createYouTubeDocument, isPending: isSubmitting } = createDocumentMutation;
+
+	const isValidYoutubeUrl = (url: string): boolean => {
+		return youtubeRegex.test(url);
+	};
+
+	const extractVideoId = (url: string): string | null => {
+		const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+		return match ? match[1] : null;
+	};
+
+	const handleSubmit = async () => {
+		if (videoTags.length === 0) {
+			setError(t("error_no_video"));
+			return;
+		}
+
+		const invalidUrls = videoTags.filter((tag) => !isValidYoutubeUrl(tag.text));
+		if (invalidUrls.length > 0) {
+			setError(t("error_invalid_urls", { urls: invalidUrls.map((tag) => tag.text).join(", ") }));
+			return;
+		}
+
+		setError(null);
+
+		toast(t("processing_toast"), {
+			description: t("processing_toast_desc"),
+		});
+
+		const videoUrls = videoTags.map((tag) => tag.text);
+
+		// Use the mutation to create YouTube documents
+		createYouTubeDocument(
+			{
+				document_type: "YOUTUBE_VIDEO",
+				content: videoUrls,
+				search_space_id: parseInt(searchSpaceId, 10),
+			},
+			{
+				onSuccess: () => {
+					toast(t("success_toast"), {
+						description: t("success_toast_desc"),
+					});
+					// Close the popup and navigate to documents
+					onBack();
+					router.push(`/dashboard/${searchSpaceId}/documents`);
+				},
+				onError: (error: unknown) => {
+					const errorMessage = error instanceof Error ? error.message : t("error_generic");
+					setError(errorMessage);
+					toast(t("error_toast"), {
+						description: `${t("error_toast_desc")}: ${errorMessage}`,
+					});
+				},
+			}
+		);
+	};
+
+	const handleAddTag = (text: string) => {
+		if (!isValidYoutubeUrl(text)) {
+			toast(t("invalid_url_toast"), {
+				description: t("invalid_url_toast_desc"),
+			});
+			return;
+		}
+
+		if (videoTags.some((tag) => tag.text === text)) {
+			toast(t("duplicate_url_toast"), {
+				description: t("duplicate_url_toast_desc"),
+			});
+			return;
+		}
+
+		const newTag: TagType = {
+			id: Date.now().toString(),
+			text: text,
+		};
+
+		setVideoTags([...videoTags, newTag]);
+	};
+
+	return (
+		<div className="flex-1 flex flex-col min-h-0 overflow-hidden">
+			{/* Header */}
+			<div className="flex-shrink-0 px-6 sm:px-12 pt-8 sm:pt-10">
+				<button
+					type="button"
+					onClick={onBack}
+					className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-foreground mb-6 w-fit"
+				>
+					<ArrowLeft className="size-4" />
+					Back to connectors
+				</button>
+
+				<div className="flex items-center gap-4 mb-6">
+					<div className="flex h-14 w-14 items-center justify-center rounded-xl border border-slate-400/30">
+						<IconBrandYoutube className="h-7 w-7" />
+					</div>
+					<div>
+						<h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
+							{t("title")}
+						</h2>
+						<p className="text-xs sm:text-base text-muted-foreground mt-1">
+							{t("subtitle")}
+						</p>
+					</div>
+				</div>
+			</div>
+
+			{/* Form Content - Scrollable */}
+			<div className="flex-1 min-h-0 overflow-y-auto px-6 sm:px-12">
+				<div className="space-y-4 pb-6">
+					<div className="space-y-2">
+						<Label htmlFor="video-input" className="text-sm sm:text-base">
+							{t("label")}
+						</Label>
+						<TagInput
+							id="video-input"
+							tags={videoTags}
+							setTags={setVideoTags}
+							placeholder={t("placeholder")}
+							onAddTag={handleAddTag}
+							styleClasses={{
+								inlineTagsContainer:
+									"border border-slate-400/20 rounded-lg bg-muted/50 shadow-sm shadow-black/5 transition-shadow focus-within:border-slate-400/40 focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 p-1 gap-1",
+								input: "w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7 text-foreground/90 placeholder:text-muted-foreground bg-transparent",
+								tag: {
+									body: "h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7 flex",
+									closeButton:
+										"absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-muted-foreground/80 hover:text-foreground",
+								},
+							}}
+							activeTagIndex={activeTagIndex}
+							setActiveTagIndex={setActiveTagIndex}
+						/>
+						<p className="text-xs text-muted-foreground mt-1">{t("hint")}</p>
+					</div>
+
+					{error && (
+						<div className="text-sm text-red-500 mt-2">
+							{error}
+						</div>
+					)}
+
+					<div className="bg-muted/50 rounded-lg p-4 text-sm">
+						<h4 className="font-medium mb-2">{t("tips_title")}</h4>
+						<ul className="list-disc pl-5 space-y-1 text-muted-foreground">
+							<li>{t("tip_1")}</li>
+							<li>{t("tip_2")}</li>
+							<li>{t("tip_3")}</li>
+							<li>{t("tip_4")}</li>
+						</ul>
+					</div>
+
+					{videoTags.length > 0 && (
+						<div className="mt-4 space-y-2">
+							<h4 className="font-medium">{t("preview")}:</h4>
+							<div className="grid grid-cols-1 gap-3">
+								{videoTags.map((tag, _index) => {
+									const videoId = extractVideoId(tag.text);
+									return videoId ? (
+										<div
+											key={tag.id}
+											className="relative aspect-video rounded-lg overflow-hidden border"
+										>
+											<iframe
+												width="100%"
+												height="100%"
+												src={`https://www.youtube.com/embed/${videoId}`}
+												title="YouTube video player"
+												allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+												allowFullScreen
+											/>
+										</div>
+									) : null;
+								})}
+							</div>
+						</div>
+					)}
+				</div>
+			</div>
+
+			{/* Fixed Footer - Action buttons */}
+			<div className="flex-shrink-0 flex items-center justify-between px-6 sm:px-12 py-6 bg-muted border-t border-border">
+				<Button
+					variant="ghost"
+					onClick={onBack}
+					disabled={isSubmitting}
+					className="text-xs sm:text-sm"
+				>
+					{t("cancel")}
+				</Button>
+				<Button
+					onClick={handleSubmit}
+					disabled={isSubmitting || videoTags.length === 0}
+					className="text-xs sm:text-sm min-w-[140px] disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+				>
+					{isSubmitting ? (
+						<>
+							<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+							{t("processing")}
+						</>
+					) : (
+						<>
+							<IconBrandYoutube className="mr-2 h-4 w-4" />
+							{t("submit")}
+						</>
+					)}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/dashboard-breadcrumb.tsx b/surfsense_web/components/dashboard-breadcrumb.tsx
index 757e2c331..62cef7d6f 100644
--- a/surfsense_web/components/dashboard-breadcrumb.tsx
+++ b/surfsense_web/components/dashboard-breadcrumb.tsx
@@ -151,7 +151,6 @@ export function DashboardBreadcrumb() {
 					if (section === "documents") {
 						const documentLabels: Record<string, string> = {
 							upload: t("upload_documents"),
-							youtube: t("add_youtube"),
 							webpage: t("add_webpages"),
 						};
 
diff --git a/surfsense_web/components/sources/YouTubeTab.tsx b/surfsense_web/components/sources/YouTubeTab.tsx
deleted file mode 100644
index 4a8595e20..000000000
--- a/surfsense_web/components/sources/YouTubeTab.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-"use client";
-
-import { IconBrandYoutube } from "@tabler/icons-react";
-import { TagInput, type Tag as TagType } from "emblor";
-import { useAtom } from "jotai";
-import { Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { useState } from "react";
-import { toast } from "sonner";
-import { createDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
-
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-
-const youtubeRegex =
-	/^(https:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})$/;
-
-interface YouTubeTabProps {
-	searchSpaceId: string;
-}
-
-export function YouTubeTab({ searchSpaceId }: YouTubeTabProps) {
-	const t = useTranslations("add_youtube");
-	const router = useRouter();
-	const [videoTags, setVideoTags] = useState<TagType[]>([]);
-	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
-	const [error, setError] = useState<string | null>(null);
-
-	// Use the createDocumentMutationAtom
-	const [createDocumentMutation] = useAtom(createDocumentMutationAtom);
-	const { mutate: createYouTubeDocument, isPending: isSubmitting } = createDocumentMutation;
-
-	const isValidYoutubeUrl = (url: string): boolean => {
-		return youtubeRegex.test(url);
-	};
-
-	const extractVideoId = (url: string): string | null => {
-		const match = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
-		return match ? match[1] : null;
-	};
-
-	const handleSubmit = async () => {
-		if (videoTags.length === 0) {
-			setError(t("error_no_video"));
-			return;
-		}
-
-		const invalidUrls = videoTags.filter((tag) => !isValidYoutubeUrl(tag.text));
-		if (invalidUrls.length > 0) {
-			setError(t("error_invalid_urls", { urls: invalidUrls.map((tag) => tag.text).join(", ") }));
-			return;
-		}
-
-		setError(null);
-
-		toast(t("processing_toast"), {
-			description: t("processing_toast_desc"),
-		});
-
-		const videoUrls = videoTags.map((tag) => tag.text);
-
-		// Use the mutation to create YouTube documents
-		createYouTubeDocument(
-			{
-				document_type: "YOUTUBE_VIDEO",
-				content: videoUrls,
-				search_space_id: parseInt(searchSpaceId),
-			},
-			{
-				onSuccess: () => {
-					toast(t("success_toast"), {
-						description: t("success_toast_desc"),
-					});
-					router.push(`/dashboard/${searchSpaceId}/documents`);
-				},
-				onError: (error: any) => {
-					setError(error.message || t("error_generic"));
-					toast(t("error_toast"), {
-						description: `${t("error_toast_desc")}: ${error.message || "Failed to process YouTube videos"}`,
-					});
-				},
-			}
-		);
-	};
-
-	const handleAddTag = (text: string) => {
-		if (!isValidYoutubeUrl(text)) {
-			toast(t("invalid_url_toast"), {
-				description: t("invalid_url_toast_desc"),
-			});
-			return;
-		}
-
-		if (videoTags.some((tag) => tag.text === text)) {
-			toast(t("duplicate_url_toast"), {
-				description: t("duplicate_url_toast_desc"),
-			});
-			return;
-		}
-
-		const newTag: TagType = {
-			id: Date.now().toString(),
-			text: text,
-		};
-
-		setVideoTags([...videoTags, newTag]);
-	};
-
-	return (
-		<motion.div
-			initial={{ opacity: 0, y: 20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.3 }}
-			className="max-w-2xl mx-auto space-y-6"
-		>
-			<Card>
-				<CardHeader>
-					<CardTitle className="text-lg sm:text-2xl flex items-center gap-2">
-						<IconBrandYoutube className="h-5 w-5" />
-						{t("title")}
-					</CardTitle>
-					<CardDescription className="text-xs sm:text-sm">{t("subtitle")}</CardDescription>
-				</CardHeader>
-
-				<CardContent>
-					<div className="space-y-4">
-						<div className="space-y-2">
-							<Label htmlFor="video-input" className="text-sm sm:text-base">
-								{t("label")}
-							</Label>
-							<TagInput
-								id="video-input"
-								tags={videoTags}
-								setTags={setVideoTags}
-								placeholder={t("placeholder")}
-								onAddTag={handleAddTag}
-								styleClasses={{
-									inlineTagsContainer:
-										"border-input rounded-lg bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 p-1 gap-1",
-									input: "w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7",
-									tag: {
-										body: "h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7 flex",
-										closeButton:
-											"absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-muted-foreground/80 hover:text-foreground",
-									},
-								}}
-								activeTagIndex={activeTagIndex}
-								setActiveTagIndex={setActiveTagIndex}
-							/>
-							<p className="text-xs text-muted-foreground mt-1">{t("hint")}</p>
-						</div>
-
-						{error && (
-							<motion.div
-								className="text-sm text-red-500 mt-2"
-								initial={{ opacity: 0, scale: 0.9 }}
-								animate={{ opacity: 1, scale: 1 }}
-							>
-								{error}
-							</motion.div>
-						)}
-
-						<div className="bg-muted/50 rounded-lg p-4 text-sm">
-							<h4 className="font-medium mb-2">{t("tips_title")}</h4>
-							<ul className="list-disc pl-5 space-y-1 text-muted-foreground">
-								<li>{t("tip_1")}</li>
-								<li>{t("tip_2")}</li>
-								<li>{t("tip_3")}</li>
-								<li>{t("tip_4")}</li>
-							</ul>
-						</div>
-
-						{videoTags.length > 0 && (
-							<div className="mt-4 space-y-2">
-								<h4 className="font-medium">{t("preview")}:</h4>
-								<div className="grid grid-cols-1 gap-3">
-									{videoTags.map((tag, index) => {
-										const videoId = extractVideoId(tag.text);
-										return videoId ? (
-											<motion.div
-												key={tag.id}
-												initial={{ opacity: 0, y: 10 }}
-												animate={{ opacity: 1, y: 0 }}
-												transition={{ delay: index * 0.1 }}
-												className="relative aspect-video rounded-lg overflow-hidden border"
-											>
-												<iframe
-													width="100%"
-													height="100%"
-													src={`https://www.youtube.com/embed/${videoId}`}
-													title="YouTube video player"
-													allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-													allowFullScreen
-												/>
-											</motion.div>
-										) : null;
-									})}
-								</div>
-							</div>
-						)}
-					</div>
-				</CardContent>
-
-				<CardFooter className="flex justify-between">
-					<Button
-						variant="outline"
-						size="sm"
-						onClick={() => router.push(`/dashboard/${searchSpaceId}/documents`)}
-						className="text-xs sm:text-sm"
-					>
-						{t("cancel")}
-					</Button>
-					<Button
-						onClick={handleSubmit}
-						disabled={isSubmitting || videoTags.length === 0}
-						size="sm"
-						className="relative overflow-hidden text-xs sm:text-sm"
-					>
-						{isSubmitting ? (
-							<>
-								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-								{t("processing")}
-							</>
-						) : (
-							<>
-								<IconBrandYoutube className="mr-2 h-4 w-4" />
-								{t("submit")}
-							</>
-						)}
-					</Button>
-				</CardFooter>
-			</Card>
-		</motion.div>
-	);
-}

From 3a6749e86fe58d6f37cb55b5fefffeb6b3336356 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 31 Dec 2025 23:24:20 +0530
Subject: [PATCH 23/28] feat: Update connector UI components with improved
 button styles and border adjustments for better visual consistency

---
 .../connector-popup/components/connector-card.tsx           | 5 +++--
 .../connector-popup/components/connector-dialog-header.tsx  | 6 ++----
 .../connector-popup/tabs/active-connectors-tab.tsx          | 4 ++--
 surfsense_web/components/new-chat/model-selector.tsx        | 6 +++---
 4 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
index 126945fa6..f14151aa3 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx
@@ -108,10 +108,11 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 			</div>
 			<Button
 				size="sm"
-				variant={isConnected ? "outline" : "default"}
+				variant={isConnected ? "secondary" : "default"}
 				className={cn(
 					"h-8 text-[11px] px-3 rounded-lg flex-shrink-0 font-medium",
-					isConnected && "border-0"
+					isConnected && "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",
+					!isConnected && "shadow-xs"
 				)}
 				onClick={isConnected ? onManage : onConnect}
 				disabled={isConnecting || isIndexing}
diff --git a/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx b/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
index d4126f2ce..c21c305b7 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/components/connector-dialog-header.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { Search } from "lucide-react";
-import { type FC } from "react";
+import type { FC } from "react";
 import {
 	DialogDescription,
 	DialogHeader,
@@ -23,10 +23,8 @@ interface ConnectorDialogHeaderProps {
 }
 
 export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
-	activeTab,
 	totalSourceCount,
 	searchQuery,
-	onTabChange,
 	onSearchChange,
 	isScrolled,
 }) => {
@@ -46,7 +44,7 @@ export const ConnectorDialogHeader: FC<ConnectorDialogHeaderProps> = ({
 				</DialogDescription>
 			</DialogHeader>
 
-			<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-slate-400/5 dark:border-white/5">
+			<div className="flex flex-col-reverse sm:flex-row sm:items-end justify-between gap-6 sm:gap-8 mt-6 sm:mt-8 border-b border-border/80 dark:border-white/5">
 				<TabsList className="bg-transparent p-0 gap-4 sm:gap-8 h-auto w-full sm:w-auto justify-center sm:justify-start">
 					<TabsTrigger
 						value="all"
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
index b033b5f20..5016e1626 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx
@@ -115,9 +115,9 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 										)}
 									</div>
 									<Button
-										variant="outline"
+										variant="secondary"
 										size="sm"
-										className="h-8 text-[11px] px-3 rounded-lg font-medium border-0"
+										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"
 										onClick={onManage ? () => onManage(connector) : undefined}
 										disabled={isIndexing}
 									>
diff --git a/surfsense_web/components/new-chat/model-selector.tsx b/surfsense_web/components/new-chat/model-selector.tsx
index 1d223a411..ead378e86 100644
--- a/surfsense_web/components/new-chat/model-selector.tsx
+++ b/surfsense_web/components/new-chat/model-selector.tsx
@@ -212,7 +212,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
 			</PopoverTrigger>
 
 			<PopoverContent
-				className="w-[280px] md:w-[360px] p-0 rounded-lg md:rounded-xl shadow-lg border-border/30"
+				className="w-[280px] md:w-[360px] p-0 rounded-lg md:rounded-xl shadow-lg border-border/60"
 				align="start"
 				sideOffset={8}
 			>
@@ -252,7 +252,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
 						{/* Global Configs Section */}
 						{filteredGlobalConfigs.length > 0 && (
 							<CommandGroup>
-								<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+								<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground tracking-wider">
 									<Globe className="size-3.5" />
 									Global Models
 								</div>
@@ -314,7 +314,7 @@ export function ModelSelector({ onEdit, onAddNew, className }: ModelSelectorProp
 						{/* User Configs Section */}
 						{filteredUserConfigs.length > 0 && (
 							<CommandGroup>
-								<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+								<div className="flex items-center gap-2 px-3 py-2 text-xs font-semibold text-muted-foreground tracking-wider">
 									<User className="size-3.5" />
 									Your Configurations
 								</div>

From 63968e6455238f0ae32b242000b9caac643b08db Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 1 Jan 2026 01:57:59 +0530
Subject: [PATCH 24/28] feat: Remove multiple connector components and
 streamline source addition process, updating UI elements for improved user
 experience and consistency.

---
 .../connectors/[connector_id]/edit/page.tsx   | 336 --------
 .../connectors/[connector_id]/page.tsx        | 301 -------
 .../add/airtable-connector/page.tsx           | 181 -----
 .../connectors/add/baidu-search-api/page.tsx  | 323 --------
 .../add/bookstack-connector/page.tsx          | 306 -------
 .../add/circleback-connector/page.tsx         | 363 ---------
 .../connectors/add/clickup-connector/page.tsx | 241 ------
 .../add/confluence-connector/page.tsx         | 322 --------
 .../connectors/add/discord-connector/page.tsx | 371 ---------
 .../add/elasticsearch-connector/page.tsx      | 755 ------------------
 .../connectors/add/github-connector/page.tsx  | 531 ------------
 .../add/google-calendar-connector/page.tsx    | 188 -----
 .../add/google-drive-connector/page.tsx       | 205 -----
 .../add/google-gmail-connector/page.tsx       | 196 -----
 .../connectors/add/jira-connector/page.tsx    | 427 ----------
 .../connectors/add/linear-connector/page.tsx  | 379 ---------
 .../connectors/add/linkup-api/page.tsx        | 219 -----
 .../connectors/add/luma-connector/page.tsx    | 268 -------
 .../connectors/add/notion-connector/page.tsx  | 390 ---------
 .../[search_space_id]/connectors/add/page.tsx |  16 -
 .../connectors/add/searxng/page.tsx           | 370 ---------
 .../connectors/add/slack-connector/page.tsx   | 421 ----------
 .../connectors/add/tavily-api/page.tsx        | 219 -----
 .../components/DocumentsTableShell.tsx        |  26 +-
 .../editor/[documentId]/page.tsx              | 520 ------------
 .../dashboard/[search_space_id]/layout.tsx    |   4 -
 .../[search_space_id]/sources/add/page.tsx    |  38 -
 .../components/dashboard-breadcrumb.tsx       |  18 +-
 .../components/sidebar/app-sidebar.tsx        |   4 -
 surfsense_web/components/sidebar/nav-main.tsx |   1 -
 .../components/sources/ConnectorsTab.tsx      | 203 -----
 .../components/sources/connector-data.tsx     | 203 -----
 32 files changed, 14 insertions(+), 8331 deletions(-)
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/airtable-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/baidu-search-api/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/bookstack-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/circleback-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/clickup-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/confluence-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/discord-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/elasticsearch-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/github-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-drive-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-gmail-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/jira-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/linear-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/linkup-api/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/luma-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/notion-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/searxng/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/slack-connector/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/connectors/add/tavily-api/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx
 delete mode 100644 surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
 delete mode 100644 surfsense_web/components/sources/ConnectorsTab.tsx
 delete mode 100644 surfsense_web/components/sources/connector-data.tsx

diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx
deleted file mode 100644
index 4c7bb3a3a..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx
+++ /dev/null
@@ -1,336 +0,0 @@
-"use client";
-
-import { ArrowLeft, Check, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect } from "react";
-import { toast } from "sonner";
-import { EditConnectorLoadingSkeleton } from "@/components/editConnector/EditConnectorLoadingSkeleton";
-import { EditConnectorNameForm } from "@/components/editConnector/EditConnectorNameForm";
-import { EditGitHubConnectorConfig } from "@/components/editConnector/EditGitHubConnectorConfig";
-import { EditSimpleTokenForm } from "@/components/editConnector/EditSimpleTokenForm";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Textarea } from "@/components/ui/textarea";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import { useConnectorEditPage } from "@/hooks/use-connector-edit-page";
-// Import Utils, Types, Hook, and Components
-import { getConnectorTypeDisplay } from "@/lib/connectors/utils";
-
-export default function EditConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	// Ensure connectorId is parsed safely
-	const connectorIdParam = params.connector_id as string;
-	const connectorId = connectorIdParam ? parseInt(connectorIdParam, 10) : NaN;
-
-	// Use the custom hook to manage state and logic
-	const {
-		connectorsLoading,
-		connector,
-		isSaving,
-		editForm,
-		patForm, // Needed for GitHub child component
-		handleSaveChanges,
-		// GitHub specific props for the child component
-		editMode,
-		setEditMode, // Pass down if needed by GitHub component
-		originalPat,
-		currentSelectedRepos,
-		fetchedRepos,
-		setFetchedRepos,
-		newSelectedRepos,
-		setNewSelectedRepos,
-		isFetchingRepos,
-		handleFetchRepositories,
-		handleRepoSelectionChange,
-	} = useConnectorEditPage(connectorId, searchSpaceId);
-
-	// Redirect if connectorId is not a valid number after parsing
-	useEffect(() => {
-		if (Number.isNaN(connectorId)) {
-			toast.error("Invalid Connector ID.");
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		}
-	}, [connectorId, router, searchSpaceId]);
-
-	// Loading State
-	if (connectorsLoading || !connector) {
-		// Handle NaN case before showing skeleton
-		if (Number.isNaN(connectorId)) return null;
-		return <EditConnectorLoadingSkeleton />;
-	}
-
-	// Main Render using data/handlers from the hook
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" /> Back to Connectors
-			</Button>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Card className="border-2 border-border">
-					<CardHeader>
-						<CardTitle className="text-2xl font-bold flex items-center gap-2">
-							{getConnectorIcon(connector.connector_type)}
-							Edit {getConnectorTypeDisplay(connector.connector_type)} Connector
-						</CardTitle>
-						<CardDescription>Modify connector name and configuration.</CardDescription>
-					</CardHeader>
-
-					<Form {...editForm}>
-						{/* Pass hook's handleSaveChanges */}
-						<form onSubmit={editForm.handleSubmit(handleSaveChanges)} className="space-y-6">
-							<CardContent className="space-y-6">
-								{/* Pass form control from hook */}
-								<EditConnectorNameForm control={editForm.control} />
-
-								<hr />
-
-								<h3 className="text-lg font-semibold">Configuration</h3>
-
-								{/* == GitHub == */}
-								{connector.connector_type === "GITHUB_CONNECTOR" && (
-									<EditGitHubConnectorConfig
-										// Pass relevant state and handlers from hook
-										editMode={editMode}
-										setEditMode={setEditMode} // Pass setter if child manages mode
-										originalPat={originalPat}
-										currentSelectedRepos={currentSelectedRepos}
-										fetchedRepos={fetchedRepos}
-										newSelectedRepos={newSelectedRepos}
-										isFetchingRepos={isFetchingRepos}
-										patForm={patForm}
-										handleFetchRepositories={handleFetchRepositories}
-										handleRepoSelectionChange={handleRepoSelectionChange}
-										setNewSelectedRepos={setNewSelectedRepos}
-										setFetchedRepos={setFetchedRepos}
-									/>
-								)}
-
-								{/* == Slack == */}
-								{connector.connector_type === "SLACK_CONNECTOR" && (
-									<EditSimpleTokenForm
-										control={editForm.control}
-										fieldName="SLACK_BOT_TOKEN"
-										fieldLabel="Slack Bot Token"
-										fieldDescription="Update the Slack Bot Token if needed."
-										placeholder="Begins with xoxb-..."
-									/>
-								)}
-								{/* == Notion == */}
-								{connector.connector_type === "NOTION_CONNECTOR" && (
-									<EditSimpleTokenForm
-										control={editForm.control}
-										fieldName="NOTION_INTEGRATION_TOKEN"
-										fieldLabel="Notion Integration Token"
-										fieldDescription="Update the Notion Integration Token if needed."
-										placeholder="Begins with secret_..."
-									/>
-								)}
-								{/* == Tavily == */}
-								{connector.connector_type === "TAVILY_API" && (
-									<EditSimpleTokenForm
-										control={editForm.control}
-										fieldName="TAVILY_API_KEY"
-										fieldLabel="Tavily API Key"
-										fieldDescription="Update the Tavily API Key if needed."
-									/>
-								)}
-
-								{/* == Linear == */}
-								{connector.connector_type === "LINEAR_CONNECTOR" && (
-									<EditSimpleTokenForm
-										control={editForm.control}
-										fieldName="LINEAR_API_KEY"
-										fieldLabel="Linear API Key"
-										fieldDescription="Update your Linear API Key if needed."
-										placeholder="Begins with lin_api_..."
-									/>
-								)}
-
-								{/* == Jira == */}
-								{connector.connector_type === "JIRA_CONNECTOR" && (
-									<div className="space-y-4">
-										<EditSimpleTokenForm
-											control={editForm.control}
-											fieldName="JIRA_BASE_URL"
-											fieldLabel="Jira Base URL"
-											fieldDescription="Update your Jira instance URL if needed."
-											placeholder="https://yourcompany.atlassian.net"
-										/>
-										<EditSimpleTokenForm
-											control={editForm.control}
-											fieldName="JIRA_EMAIL"
-											fieldLabel="Jira Email"
-											fieldDescription="Update your Atlassian account email if needed."
-											placeholder="your.email@company.com"
-										/>
-										<EditSimpleTokenForm
-											control={editForm.control}
-											fieldName="JIRA_API_TOKEN"
-											fieldLabel="Jira API Token"
-											fieldDescription="Update your Jira API Token if needed."
-											placeholder="Your Jira API Token"
-										/>
-									</div>
-								)}
-
-								{/* == Confluence == */}
-								{connector.connector_type === "CONFLUENCE_CONNECTOR" && (
-									<div className="space-y-4">
-										<EditSimpleTokenForm
-											control={editForm.control}
-											fieldName="CONFLUENCE_BASE_URL"
-											fieldLabel="Confluence Base URL"
-											fieldDescription="Update your Confluence instance URL if needed."
-											placeholder="https://yourcompany.atlassian.net"
-										/>
-										<EditSimpleTokenForm
-											control={editForm.control}
-											fieldName="CONFLUENCE_EMAIL"
-											fieldLabel="Confluence Email"
-											fieldDescription="Update your Atlassian account email if needed."
-											placeholder="your.email@company.com"
-										/>
-										<EditSimpleTokenForm
-											control={editForm.control}
-											fieldName="CONFLUENCE_API_TOKEN"
-											fieldLabel="Confluence API Token"
-											fieldDescription="Update your Confluence API Token if needed."
-											placeholder="Your Confluence API Token"
-										/>
-									</div>
-								)}
-
-								{/* == ClickUp == */}
-								{connector.connector_type === "CLICKUP_CONNECTOR" && (
-									<EditSimpleTokenForm
-										control={editForm.control}
-										fieldName="CLICKUP_API_TOKEN"
-										fieldLabel="ClickUp API Token"
-										fieldDescription="Update your ClickUp API Token if needed."
-										placeholder="pk_..."
-									/>
-								)}
-
-								{/* == Linkup == */}
-								{connector.connector_type === "LINKUP_API" && (
-									<EditSimpleTokenForm
-										control={editForm.control}
-										fieldName="LINKUP_API_KEY"
-										fieldLabel="Linkup API Key"
-										fieldDescription="Update your Linkup API Key if needed."
-										placeholder="Begins with linkup_..."
-									/>
-								)}
-
-								{/* == Discord == */}
-								{connector.connector_type === "DISCORD_CONNECTOR" && (
-									<EditSimpleTokenForm
-										control={editForm.control}
-										fieldName="DISCORD_BOT_TOKEN"
-										fieldLabel="Discord Bot Token"
-										fieldDescription="Update the Discord Bot Token if needed."
-										placeholder="Bot token..."
-									/>
-								)}
-
-								{/* == Luma == */}
-								{connector.connector_type === "LUMA_CONNECTOR" && (
-									<EditSimpleTokenForm
-										control={editForm.control}
-										fieldName="LUMA_API_KEY"
-										fieldLabel="Luma API Key"
-										fieldDescription="Update the Luma API Key if needed."
-										placeholder="API Key..."
-									/>
-								)}
-
-								{/* == Elasticsearch == */}
-								{connector.connector_type === "ELASTICSEARCH_CONNECTOR" && (
-									<EditSimpleTokenForm
-										control={editForm.control}
-										fieldName="ELASTICSEARCH_API_KEY"
-										fieldLabel="Elasticsearch API Key"
-										fieldDescription="Update your Elasticsearch API Key if needed."
-										placeholder="Your Elasticsearch API Key"
-									/>
-								)}
-
-								{/* == Webcrawler == */}
-								{connector.connector_type === "WEBCRAWLER_CONNECTOR" && (
-									<div className="space-y-4">
-										<EditSimpleTokenForm
-											control={editForm.control}
-											fieldName="FIRECRAWL_API_KEY"
-											fieldLabel="Firecrawl API Key (Optional)"
-											fieldDescription="Add a Firecrawl API key for enhanced crawling capabilities. If not provided, will use AsyncChromiumLoader as fallback."
-											placeholder="fc-xxxxxxxxxxxxx"
-										/>
-										<FormField
-											control={editForm.control}
-											name="INITIAL_URLS"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>URLs to Crawl</FormLabel>
-													<FormControl>
-														<Textarea
-															placeholder="https://example.com&#10;https://docs.example.com&#10;https://blog.example.com"
-															className="min-h-[150px] font-mono text-sm"
-															{...field}
-														/>
-													</FormControl>
-													<FormDescription>
-														Enter URLs to crawl (one per line). These URLs will be indexed when you
-														trigger indexing.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-									</div>
-								)}
-							</CardContent>
-							<CardFooter className="border-t pt-6">
-								<Button type="submit" disabled={isSaving} className="w-full sm:w-auto">
-									{isSaving ? (
-										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-									) : (
-										<Check className="mr-2 h-4 w-4" />
-									)}
-									Save Changes
-								</Button>
-							</CardFooter>
-						</form>
-					</Form>
-				</Card>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/page.tsx
deleted file mode 100644
index 252a8e1d2..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/page.tsx
+++ /dev/null
@@ -1,301 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { updateConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import type { EnumConnectorName } from "@/contracts/enums/connector";
-import type { SearchSourceConnector } from "@/hooks/use-search-source-connectors";
-
-// Define the form schema with Zod
-const apiConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	api_key: z.string().min(10, {
-		message: "API key is required and must be valid.",
-	}),
-});
-
-// Helper function to get connector type display name
-const getConnectorTypeDisplay = (type: string): string => {
-	const typeMap: Record<string, string> = {
-		TAVILY_API: "Tavily API",
-		SLACK_CONNECTOR: "Slack Connector",
-		NOTION_CONNECTOR: "Notion Connector",
-		GITHUB_CONNECTOR: "GitHub Connector",
-		LINEAR_CONNECTOR: "Linear Connector",
-		JIRA_CONNECTOR: "Jira Connector",
-		DISCORD_CONNECTOR: "Discord Connector",
-		LINKUP_API: "Linkup",
-		CONFLUENCE_CONNECTOR: "Confluence Connector",
-		CLICKUP_CONNECTOR: "ClickUp Connector",
-		GOOGLE_CALENDAR_CONNECTOR: "Google Calendar Connector",
-		GOOGLE_GMAIL_CONNECTOR: "Google Gmail Connector",
-		AIRTABLE_CONNECTOR: "Airtable Connector",
-		LUMA_CONNECTOR: "Luma Connector",
-		ELASTICSEARCH_CONNECTOR: "Elasticsearch Connector",
-		WEBCRAWLER_CONNECTOR: "Web Page Connector",
-		// Add other connector types here as needed
-	};
-	return typeMap[type] || type;
-};
-
-// Define the type for the form values
-type ApiConnectorFormValues = z.infer<typeof apiConnectorFormSchema>;
-
-// Get API key field name based on connector type
-const getApiKeyFieldName = (connectorType: string): string => {
-	const fieldMap: Record<string, string> = {
-		TAVILY_API: "TAVILY_API_KEY",
-		SLACK_CONNECTOR: "SLACK_BOT_TOKEN",
-		NOTION_CONNECTOR: "NOTION_INTEGRATION_TOKEN",
-		GITHUB_CONNECTOR: "GITHUB_PAT",
-		DISCORD_CONNECTOR: "DISCORD_BOT_TOKEN",
-		LINKUP_API: "LINKUP_API_KEY",
-		LUMA_CONNECTOR: "LUMA_API_KEY",
-		ELASTICSEARCH_CONNECTOR: "ELASTICSEARCH_API_KEY",
-		WEBCRAWLER_CONNECTOR: "FIRECRAWL_API_KEY",
-	};
-	return fieldMap[connectorType] || "";
-};
-
-export default function EditConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const connectorId = parseInt(params.connector_id as string, 10);
-
-	const { data: connectors = [] } = useAtomValue(connectorsAtom);
-	const { mutateAsync: updateConnector } = useAtomValue(updateConnectorMutationAtom);
-	const [connector, setConnector] = useState<SearchSourceConnector | null>(null);
-	const [isLoading, setIsLoading] = useState(true);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	// console.log("connector", connector);
-	// Initialize the form
-	const form = useForm<ApiConnectorFormValues>({
-		resolver: zodResolver(apiConnectorFormSchema),
-		defaultValues: {
-			name: "",
-			api_key: "",
-		},
-	});
-
-	useEffect(() => {
-		const currentConnector = connectors.find((c) => c.id === connectorId);
-
-		if (currentConnector) {
-			setConnector(currentConnector);
-
-			const apiKeyField = getApiKeyFieldName(currentConnector.connector_type);
-			if (apiKeyField) {
-				form.reset({
-					name: currentConnector.name,
-					api_key: currentConnector.config[apiKeyField] || "",
-				});
-			} else {
-				toast.error("This connector type is not supported for editing");
-				router.push(`/dashboard/${searchSpaceId}/connectors`);
-			}
-
-			setIsLoading(false);
-		} else if (!isLoading && connectors.length > 0) {
-			toast.error("Connector not found");
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		}
-	}, [connectors, connectorId, form, router, searchSpaceId, isLoading]);
-
-	// Handle form submission
-	const onSubmit = async (values: ApiConnectorFormValues) => {
-		if (!connector) return;
-
-		setIsSubmitting(true);
-		try {
-			const apiKeyField = getApiKeyFieldName(connector.connector_type);
-
-			const updatedConfig = { ...connector.config };
-			if (values.api_key) {
-				updatedConfig[apiKeyField] = values.api_key;
-			}
-
-			await updateConnector({
-				id: connectorId,
-				data: {
-					name: values.name,
-					connector_type: connector.connector_type as EnumConnectorName,
-					config: updatedConfig,
-					is_indexable: connector.is_indexable,
-					last_indexed_at: connector.last_indexed_at,
-				},
-			});
-
-			toast.success("Connector updated successfully!");
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error updating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to update connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	if (isLoading) {
-		return (
-			<div className="container mx-auto py-8 max-w-3xl flex justify-center items-center min-h-[60vh]">
-				<div className="animate-pulse text-center">
-					<div className="h-8 w-48 bg-muted rounded mx-auto mb-4"></div>
-					<div className="h-4 w-64 bg-muted rounded mx-auto"></div>
-				</div>
-			</div>
-		);
-	}
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Card className="border-2 border-border">
-					<CardHeader>
-						<CardTitle className="text-2xl font-bold">
-							Edit {connector ? getConnectorTypeDisplay(connector.connector_type) : ""} Connector
-						</CardTitle>
-						<CardDescription>Update your connector settings.</CardDescription>
-					</CardHeader>
-					<CardContent>
-						<Alert className="mb-6 bg-muted">
-							<Info className="h-4 w-4" />
-							<AlertTitle>API Key Security</AlertTitle>
-							<AlertDescription>
-								Your API key is stored securely. For security reasons, we don't display your
-								existing API key. If you don't update the API key field, your existing key will be
-								preserved.
-							</AlertDescription>
-						</Alert>
-
-						<Form {...form}>
-							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-								<FormField
-									control={form.control}
-									name="name"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Connector Name</FormLabel>
-											<FormControl>
-												<Input placeholder="My API Connector" {...field} />
-											</FormControl>
-											<FormDescription>A friendly name to identify this connector.</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="api_key"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>
-												{connector?.connector_type === "SLACK_CONNECTOR"
-													? "Slack Bot Token"
-													: connector?.connector_type === "NOTION_CONNECTOR"
-														? "Notion Integration Token"
-														: connector?.connector_type === "GITHUB_CONNECTOR"
-															? "GitHub Personal Access Token (PAT)"
-															: connector?.connector_type === "LINKUP_API"
-																? "Linkup API Key"
-																: connector?.connector_type === "ELASTICSEARCH_CONNECTOR"
-																	? "Elasticsearch API Key"
-																	: "API Key"}
-											</FormLabel>
-											<FormControl>
-												<Input
-													type="password"
-													placeholder={
-														connector?.connector_type === "SLACK_CONNECTOR"
-															? "Enter new Slack Bot Token (optional)"
-															: connector?.connector_type === "NOTION_CONNECTOR"
-																? "Enter new Notion Token (optional)"
-																: connector?.connector_type === "GITHUB_CONNECTOR"
-																	? "Enter new GitHub PAT (optional)"
-																	: connector?.connector_type === "LINKUP_API"
-																		? "Enter new Linkup API Key (optional)"
-																		: connector?.connector_type === "ELASTICSEARCH_CONNECTOR"
-																			? "Enter new Elasticsearch API Key (optional)"
-																			: "Enter new API key (optional)"
-													}
-													{...field}
-												/>
-											</FormControl>
-											<FormDescription>
-												{connector?.connector_type === "SLACK_CONNECTOR"
-													? "Enter a new Slack Bot Token or leave blank to keep your existing token."
-													: connector?.connector_type === "NOTION_CONNECTOR"
-														? "Enter a new Notion Integration Token or leave blank to keep your existing token."
-														: connector?.connector_type === "GITHUB_CONNECTOR"
-															? "Enter a new GitHub PAT or leave blank to keep your existing token."
-															: connector?.connector_type === "LINKUP_API"
-																? "Enter a new Linkup API Key or leave blank to keep your existing key."
-																: connector?.connector_type === "ELASTICSEARCH_CONNECTOR"
-																	? "Enter a new Elasticsearch API Key or leave blank to keep your existing key."
-																	: "Enter a new API key or leave blank to keep your existing key."}
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<div className="flex justify-end">
-									<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-										{isSubmitting ? (
-											<>
-												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-												Updating...
-											</>
-										) : (
-											<>
-												<Check className="mr-2 h-4 w-4" />
-												Update Connector
-											</>
-										)}
-									</Button>
-								</div>
-							</form>
-						</Form>
-					</CardContent>
-				</Card>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/airtable-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/airtable-connector/page.tsx
deleted file mode 100644
index 639a9cb95..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/airtable-connector/page.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-// import { IconBrandAirtable } from "@tabler/icons-react";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-import { authenticatedFetch } from "@/lib/auth-utils";
-
-export default function AirtableConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isConnecting, setIsConnecting] = useState(false);
-	const [doesConnectorExist, setDoesConnectorExist] = useState(false);
-
-	const { refetch: fetchConnectors } = useAtomValue(connectorsAtom);
-
-	useEffect(() => {
-		fetchConnectors().then((data) => {
-			const connectors = data.data || [];
-			const connector = connectors.find(
-				(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.AIRTABLE_CONNECTOR
-			);
-			if (connector) {
-				setDoesConnectorExist(true);
-			}
-		});
-	}, []);
-
-	const handleConnectAirtable = async () => {
-		setIsConnecting(true);
-		try {
-			const response = await authenticatedFetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/auth/airtable/connector/add/?space_id=${searchSpaceId}`,
-				{ method: "GET" }
-			);
-
-			if (!response.ok) {
-				throw new Error("Failed to initiate Airtable OAuth");
-			}
-
-			const data = await response.json();
-
-			// Redirect to Airtable for authentication
-			window.location.href = data.auth_url;
-		} catch (error) {
-			console.error("Error connecting to Airtable:", error);
-			toast.error("Failed to connect to Airtable");
-		} finally {
-			setIsConnecting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-2xl">
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				{/* Header */}
-				<div className="mb-8">
-					<Link
-						href={`/dashboard/${searchSpaceId}/connectors/add`}
-						className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
-					>
-						<ArrowLeft className="mr-2 h-4 w-4" />
-						Back to connectors
-					</Link>
-					<div className="flex items-center gap-4">
-						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-							{getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6")}
-						</div>
-						<div>
-							<h1 className="text-3xl font-bold tracking-tight">Connect Airtable</h1>
-							<p className="text-muted-foreground">Connect your Airtable to search records.</p>
-						</div>
-					</div>
-				</div>
-
-				{/* OAuth Connection Card */}
-				{!doesConnectorExist ? (
-					<Card>
-						<CardHeader>
-							<CardTitle>Connect Your Airtable Account</CardTitle>
-							<CardDescription>
-								Connect your Airtable account to access your records. We'll only request read-only
-								access to your records.
-							</CardDescription>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Read-only access to your records</span>
-							</div>
-							<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Access works even when you're offline</span>
-							</div>
-							<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>You can disconnect anytime</span>
-							</div>
-						</CardContent>
-						<CardFooter className="flex justify-between">
-							<Button
-								type="button"
-								variant="outline"
-								onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-							>
-								Cancel
-							</Button>
-							<Button onClick={handleConnectAirtable} disabled={isConnecting}>
-								{isConnecting ? (
-									<>
-										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-										Connecting...
-									</>
-								) : (
-									<>
-										<ExternalLink className="mr-2 h-4 w-4" />
-										Connect Your Airtable Account
-									</>
-								)}
-							</Button>
-						</CardFooter>
-					</Card>
-				) : (
-					/* Configuration Form Card */
-					<Card>
-						<CardHeader>
-							<CardTitle>✅ Your Airtable is successfully connected!</CardTitle>
-						</CardHeader>
-					</Card>
-				)}
-
-				{/* Help Section */}
-				{!doesConnectorExist && (
-					<Card className="mt-6">
-						<CardHeader>
-							<CardTitle className="text-lg">How It Works</CardTitle>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div>
-								<h4 className="font-medium mb-2">1. Connect Your Account</h4>
-								<p className="text-sm text-muted-foreground">
-									Click "Connect Your Airtable Account" to start the secure OAuth process. You'll be
-									redirected to Airtable to sign in.
-								</p>
-							</div>
-							<div>
-								<h4 className="font-medium mb-2">2. Grant Permissions</h4>
-								<p className="text-sm text-muted-foreground">
-									Airtable will ask for permission to read your records. We only request read-only
-									access to keep your data safe.
-								</p>
-							</div>
-						</CardContent>
-					</Card>
-				)}
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/baidu-search-api/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/baidu-search-api/page.tsx
deleted file mode 100644
index 204925d26..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/baidu-search-api/page.tsx
+++ /dev/null
@@ -1,323 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
-import { Switch } from "@/components/ui/switch";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const baiduSearchApiFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	api_key: z.string().min(10, {
-		message: "API key is required and must be valid.",
-	}),
-	model: z.string().optional(),
-	search_source: z.enum(["baidu_search_v1", "baidu_search_v2"]).optional(),
-	enable_deep_search: z.boolean().default(false),
-});
-
-// Define the type for the form values
-type BaiduSearchApiFormValues = z.infer<typeof baiduSearchApiFormSchema>;
-
-export default function BaiduSearchApiPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<BaiduSearchApiFormValues>({
-		resolver: zodResolver(baiduSearchApiFormSchema),
-		defaultValues: {
-			name: "Baidu Search Connector",
-			api_key: "",
-			model: "ernie-3.5-8k",
-			search_source: "baidu_search_v2",
-			enable_deep_search: false,
-		},
-	});
-
-	// Handle form submission
-	const onSubmit = async (values: BaiduSearchApiFormValues) => {
-		setIsSubmitting(true);
-		try {
-			// Build config object
-			const config: Record<string, unknown> = {
-				BAIDU_API_KEY: values.api_key,
-			};
-
-			// Add optional parameters if provided
-			if (values.model) {
-				config.BAIDU_MODEL = values.model;
-			}
-			if (values.search_source) {
-				config.BAIDU_SEARCH_SOURCE = values.search_source;
-			}
-			if (values.enable_deep_search !== undefined) {
-				config.BAIDU_ENABLE_DEEP_SEARCH = values.enable_deep_search;
-			}
-
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.BAIDU_SEARCH_API,
-					config,
-					is_indexable: false,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Baidu Search connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.BAIDU_SEARCH_API, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect Baidu Search</h1>
-						<p className="text-muted-foreground">
-							Connect Baidu AI Search for intelligent Chinese web search capabilities.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Card className="border-2 border-border">
-					<CardHeader>
-						<CardTitle className="text-2xl font-bold">Connect Baidu Search</CardTitle>
-						<CardDescription>
-							Integrate with Baidu AI Search to enhance your search capabilities with intelligent
-							Chinese web search results.
-						</CardDescription>
-					</CardHeader>
-					<CardContent>
-						<Alert className="mb-6 bg-muted">
-							<Info className="h-4 w-4" />
-							<AlertTitle>API Key Required</AlertTitle>
-							<AlertDescription>
-								You'll need a Baidu AppBuilder API key to use this connector. You can get one by
-								signing up at{" "}
-								<a
-									href="https://qianfan.cloud.baidu.com/"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="font-medium underline underline-offset-4"
-								>
-									qianfan.cloud.baidu.com
-								</a>
-							</AlertDescription>
-						</Alert>
-
-						<Form {...form}>
-							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-								<FormField
-									control={form.control}
-									name="name"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Connector Name</FormLabel>
-											<FormControl>
-												<Input placeholder="My Baidu Search Connector" {...field} />
-											</FormControl>
-											<FormDescription>A friendly name to identify this connector.</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="api_key"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Baidu AppBuilder API Key</FormLabel>
-											<FormControl>
-												<Input type="password" placeholder="Enter your Baidu API key" {...field} />
-											</FormControl>
-											<FormDescription>
-												Your API key will be encrypted and stored securely.
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="model"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Model (Optional)</FormLabel>
-											<Select onValueChange={field.onChange} defaultValue={field.value}>
-												<FormControl>
-													<SelectTrigger>
-														<SelectValue placeholder="Select a model" />
-													</SelectTrigger>
-												</FormControl>
-												<SelectContent>
-													<SelectItem value="ernie-3.5-8k">ERNIE 3.5 8K</SelectItem>
-													<SelectItem value="ernie-4.5-turbo-32k">ERNIE 4.5 Turbo 32K</SelectItem>
-													<SelectItem value="ernie-4.5-turbo-128k">ERNIE 4.5 Turbo 128K</SelectItem>
-													<SelectItem value="deepseek-v3">DeepSeek V3</SelectItem>
-													<SelectItem value="qwen3-235b-a22b-instruct-2507">Qwen3 235B</SelectItem>
-												</SelectContent>
-											</Select>
-											<FormDescription>
-												The language model used for search summarization. Default: ERNIE 3.5 8K.
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="search_source"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Search Source (Optional)</FormLabel>
-											<Select onValueChange={field.onChange} defaultValue={field.value}>
-												<FormControl>
-													<SelectTrigger>
-														<SelectValue placeholder="Select search source" />
-													</SelectTrigger>
-												</FormControl>
-												<SelectContent>
-													<SelectItem value="baidu_search_v1">Baidu Search V1</SelectItem>
-													<SelectItem value="baidu_search_v2">
-														Baidu Search V2 (Recommended)
-													</SelectItem>
-												</SelectContent>
-											</Select>
-											<FormDescription>
-												V2 provides better performance and richer content. Default: V2.
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="enable_deep_search"
-									render={({ field }) => (
-										<FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-											<div className="space-y-0.5">
-												<FormLabel className="text-base">Enable Deep Search</FormLabel>
-												<FormDescription>
-													Deep search retrieves up to 100 results per type (may incur additional
-													costs).
-												</FormDescription>
-											</div>
-											<FormControl>
-												<Switch checked={field.value} onCheckedChange={field.onChange} />
-											</FormControl>
-										</FormItem>
-									)}
-								/>
-
-								<div className="flex justify-end">
-									<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-										{isSubmitting ? (
-											<>
-												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-												Connecting...
-											</>
-										) : (
-											<>
-												<Check className="mr-2 h-4 w-4" />
-												Connect Baidu Search
-											</>
-										)}
-									</Button>
-								</div>
-							</form>
-						</Form>
-					</CardContent>
-					<CardFooter className="flex flex-col items-start border-t bg-muted/50 px-6 py-4">
-						<h4 className="text-sm font-medium">What you get with Baidu Search:</h4>
-						<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
-							<li>Intelligent search tailored for Chinese web content</li>
-							<li>Real-time information from Baidu's search index</li>
-							<li>AI-powered summarization with source references</li>
-							<li>Support for web, video, and image search results</li>
-						</ul>
-					</CardFooter>
-				</Card>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/bookstack-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/bookstack-connector/page.tsx
deleted file mode 100644
index 3fa634238..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/bookstack-connector/page.tsx
+++ /dev/null
@@ -1,306 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const bookstackConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	base_url: z.string().url({
-		message: "Please enter a valid BookStack URL (e.g., https://docs.example.com)",
-	}),
-	token_id: z.string().min(10, {
-		message: "BookStack Token ID is required.",
-	}),
-	token_secret: z.string().min(10, {
-		message: "BookStack Token Secret is required.",
-	}),
-});
-
-// Define the type for the form values
-type BookStackConnectorFormValues = z.infer<typeof bookstackConnectorFormSchema>;
-
-export default function BookStackConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<BookStackConnectorFormValues>({
-		resolver: zodResolver(bookstackConnectorFormSchema),
-		defaultValues: {
-			name: "BookStack Connector",
-			base_url: "",
-			token_id: "",
-			token_secret: "",
-		},
-	});
-
-	// Handle form submission
-	const onSubmit = async (values: BookStackConnectorFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.BOOKSTACK_CONNECTOR,
-					config: {
-						BOOKSTACK_BASE_URL: values.base_url,
-						BOOKSTACK_TOKEN_ID: values.token_id,
-						BOOKSTACK_TOKEN_SECRET: values.token_secret,
-					},
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("BookStack connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.BOOKSTACK_CONNECTOR, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect BookStack</h1>
-						<p className="text-muted-foreground">
-							Connect your BookStack instance to search wiki pages.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Tabs defaultValue="connect" className="w-full">
-					<TabsList className="grid w-full grid-cols-2 mb-6">
-						<TabsTrigger value="connect">Connect</TabsTrigger>
-						<TabsTrigger value="documentation">Documentation</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="connect">
-						<Card>
-							<CardHeader>
-								<CardTitle>Connect to BookStack</CardTitle>
-								<CardDescription>
-									Connect your BookStack instance to index pages from your wiki.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<Alert>
-									<Info className="h-4 w-4" />
-									<AlertDescription>
-										You'll need to create an API token from your BookStack instance. Go to{" "}
-										<strong>Edit Profile → API Tokens → Create Token</strong>
-									</AlertDescription>
-								</Alert>
-
-								<Form {...form}>
-									<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Connector Name</FormLabel>
-													<FormControl>
-														<Input placeholder="My BookStack Connector" {...field} />
-													</FormControl>
-													<FormDescription>
-														A friendly name to identify this connector.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="base_url"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>BookStack Instance URL</FormLabel>
-													<FormControl>
-														<Input placeholder="https://docs.example.com" {...field} />
-													</FormControl>
-													<FormDescription>
-														Your BookStack instance URL (e.g., https://wiki.yourcompany.com)
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="token_id"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Token ID</FormLabel>
-													<FormControl>
-														<Input placeholder="Your BookStack Token ID" {...field} />
-													</FormControl>
-													<FormDescription>
-														The Token ID from your BookStack API token.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="token_secret"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Token Secret</FormLabel>
-													<FormControl>
-														<Input
-															type="password"
-															placeholder="Your BookStack Token Secret"
-															{...field}
-														/>
-													</FormControl>
-													<FormDescription>
-														Your Token Secret will be encrypted and stored securely.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<div className="flex justify-end">
-											<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-												{isSubmitting ? (
-													<>
-														<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-														Connecting...
-													</>
-												) : (
-													<>
-														<Check className="mr-2 h-4 w-4" />
-														Connect BookStack
-													</>
-												)}
-											</Button>
-										</div>
-									</form>
-								</Form>
-							</CardContent>
-						</Card>
-					</TabsContent>
-
-					<TabsContent value="documentation">
-						<Card>
-							<CardHeader>
-								<CardTitle>BookStack Integration Guide</CardTitle>
-								<CardDescription>
-									Learn how to set up and use the BookStack connector.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<div>
-									<h3 className="text-lg font-semibold mb-3">What gets indexed?</h3>
-									<ul className="list-disc list-inside space-y-2 text-sm text-muted-foreground">
-										<li>All pages from your BookStack instance</li>
-										<li>Page content in Markdown format</li>
-										<li>Page titles and metadata</li>
-										<li>Book and chapter hierarchy information</li>
-									</ul>
-								</div>
-
-								<div>
-									<h3 className="text-lg font-semibold mb-3">Setup Instructions</h3>
-									<ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
-										<li>Log in to your BookStack instance</li>
-										<li>Click on your profile icon → Edit Profile</li>
-										<li>Navigate to the "API Tokens" tab</li>
-										<li>Click "Create Token" and give it a name</li>
-										<li>Copy both the Token ID and Token Secret</li>
-										<li>Paste them in the form above</li>
-									</ol>
-								</div>
-
-								<div>
-									<h3 className="text-lg font-semibold mb-3">Permissions Required</h3>
-									<ul className="list-disc list-inside space-y-2 text-sm text-muted-foreground">
-										<li>Your user account must have "Access System API" permission</li>
-										<li>Read access to books and pages you want to index</li>
-										<li>The connector will only index content your account can view</li>
-									</ul>
-								</div>
-
-								<Alert>
-									<Info className="h-4 w-4" />
-									<AlertDescription>
-										BookStack API has a rate limit of 180 requests per minute. The connector
-										automatically handles rate limiting to ensure reliable indexing.
-									</AlertDescription>
-								</Alert>
-							</CardContent>
-						</Card>
-					</TabsContent>
-				</Tabs>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/circleback-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/circleback-connector/page.tsx
deleted file mode 100644
index ce28de5be..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/circleback-connector/page.tsx
+++ /dev/null
@@ -1,363 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Copy, ExternalLink, Loader2, Webhook } from "lucide-react";
-import { motion } from "motion/react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-
-// Define the form schema with Zod
-const circlebackConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-});
-
-// Define the type for the form values
-type CirclebackConnectorFormValues = z.infer<typeof circlebackConnectorFormSchema>;
-
-export default function CirclebackConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [doesConnectorExist, setDoesConnectorExist] = useState(false);
-	const [copied, setCopied] = useState(false);
-
-	const { data: connectors } = useAtomValue(connectorsAtom);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Construct the webhook URL
-	const apiBaseUrl = process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8000";
-	const webhookUrl = `${apiBaseUrl}/api/v1/webhooks/circleback/${searchSpaceId}`;
-
-	// Initialize the form
-	const form = useForm<CirclebackConnectorFormValues>({
-		resolver: zodResolver(circlebackConnectorFormSchema),
-		defaultValues: {
-			name: "Circleback Meetings",
-		},
-	});
-
-	const { refetch: fetchConnectors } = useAtomValue(connectorsAtom);
-
-	useEffect(() => {
-		fetchConnectors().then((data) => {
-			const connectors = data.data || [];
-			const connector = connectors.find(
-				(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.CIRCLEBACK_CONNECTOR
-			);
-			if (connector) {
-				setDoesConnectorExist(true);
-			}
-		});
-	}, []);
-
-	// Copy webhook URL to clipboard
-	const copyToClipboard = async () => {
-		try {
-			await navigator.clipboard.writeText(webhookUrl);
-			setCopied(true);
-			toast.success("Webhook URL copied to clipboard!");
-			setTimeout(() => setCopied(false), 2000);
-		} catch {
-			toast.error("Failed to copy to clipboard");
-		}
-	};
-
-	// Handle form submission
-	const onSubmit = async (values: CirclebackConnectorFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.CIRCLEBACK_CONNECTOR,
-					config: {
-						webhook_url: webhookUrl,
-					},
-					is_indexable: false, // Webhooks push data, not indexed
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Circleback connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-2xl">
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				{/* Header */}
-				<div className="mb-8">
-					<Link
-						href={`/dashboard/${searchSpaceId}/connectors/add`}
-						className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
-					>
-						<ArrowLeft className="mr-2 h-4 w-4" />
-						Back to connectors
-					</Link>
-					<div className="flex items-center gap-4">
-						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-							{getConnectorIcon(EnumConnectorName.CIRCLEBACK_CONNECTOR, "h-6 w-6")}
-						</div>
-						<div>
-							<h1 className="text-3xl font-bold tracking-tight">Connect Circleback</h1>
-							<p className="text-muted-foreground">
-								Receive meeting notes and transcripts via webhook.
-							</p>
-						</div>
-					</div>
-				</div>
-
-				{/* Connection Card */}
-				{!doesConnectorExist ? (
-					<>
-						<Card className="mb-6">
-							<CardHeader>
-								<CardTitle>Webhook Configuration</CardTitle>
-								<CardDescription>
-									Use this webhook URL in your Circleback automation to send meeting data to
-									SurfSense.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-4">
-								<div className="space-y-2">
-									<label className="text-sm font-medium">Webhook URL</label>
-									<div className="flex gap-2">
-										<Input value={webhookUrl} readOnly className="font-mono text-sm" />
-										<Button
-											type="button"
-											variant="outline"
-											size="icon"
-											onClick={copyToClipboard}
-											className="shrink-0"
-										>
-											{copied ? (
-												<Check className="h-4 w-4 text-green-500" />
-											) : (
-												<Copy className="h-4 w-4" />
-											)}
-										</Button>
-									</div>
-									<p className="text-xs text-muted-foreground">
-										Copy this URL and paste it in your Circleback automation settings.
-									</p>
-								</div>
-
-								<Alert>
-									<Webhook className="h-4 w-4" />
-									<AlertTitle>How it works</AlertTitle>
-									<AlertDescription>
-										When you configure this webhook in Circleback, it will automatically send
-										meeting notes, transcripts, and action items to SurfSense after each meeting.
-									</AlertDescription>
-								</Alert>
-							</CardContent>
-						</Card>
-
-						<Card>
-							<CardHeader>
-								<CardTitle>Create Connector</CardTitle>
-								<CardDescription>
-									Register the Circleback connector to track incoming meeting data.
-								</CardDescription>
-							</CardHeader>
-							<Form {...form}>
-								<form onSubmit={form.handleSubmit(onSubmit)}>
-									<CardContent className="space-y-4">
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Connector Name</FormLabel>
-													<FormControl>
-														<Input placeholder="My Circleback Meetings" {...field} />
-													</FormControl>
-													<FormDescription>
-														A friendly name to identify this connector.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<div className="space-y-2 pt-2">
-											<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-												<Check className="h-4 w-4 text-green-500" />
-												<span>Automatic meeting notes import</span>
-											</div>
-											<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-												<Check className="h-4 w-4 text-green-500" />
-												<span>Full transcripts with speaker identification</span>
-											</div>
-											<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-												<Check className="h-4 w-4 text-green-500" />
-												<span>Action items and insights extraction</span>
-											</div>
-										</div>
-									</CardContent>
-									<CardFooter className="flex justify-between">
-										<Button
-											type="button"
-											variant="outline"
-											onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-										>
-											Cancel
-										</Button>
-										<Button type="submit" disabled={isSubmitting}>
-											{isSubmitting ? (
-												<>
-													<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-													Creating...
-												</>
-											) : (
-												<>
-													<Webhook className="mr-2 h-4 w-4" />
-													Create Connector
-												</>
-											)}
-										</Button>
-									</CardFooter>
-								</form>
-							</Form>
-						</Card>
-					</>
-				) : (
-					/* Success Card */
-					<Card>
-						<CardHeader>
-							<CardTitle>✅ Circleback connector is active!</CardTitle>
-							<CardDescription>
-								Your Circleback meetings will be automatically imported to this search space.
-							</CardDescription>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div className="space-y-2">
-								<label className="text-sm font-medium">Webhook URL</label>
-								<div className="flex gap-2">
-									<Input value={webhookUrl} readOnly className="font-mono text-sm" />
-									<Button
-										type="button"
-										variant="outline"
-										size="icon"
-										onClick={copyToClipboard}
-										className="shrink-0"
-									>
-										{copied ? (
-											<Check className="h-4 w-4 text-green-500" />
-										) : (
-											<Copy className="h-4 w-4" />
-										)}
-									</Button>
-								</div>
-							</div>
-						</CardContent>
-					</Card>
-				)}
-
-				{/* Help Section */}
-				<Card className="mt-6">
-					<CardHeader>
-						<CardTitle className="text-lg">Setup Instructions</CardTitle>
-					</CardHeader>
-					<CardContent className="space-y-4">
-						<div>
-							<h4 className="font-medium mb-2">1. Copy the Webhook URL</h4>
-							<p className="text-sm text-muted-foreground">
-								Copy the webhook URL shown above. You'll need this for the next step.
-							</p>
-						</div>
-						<div>
-							<h4 className="font-medium mb-2">2. Open Circleback Automations</h4>
-							<p className="text-sm text-muted-foreground">
-								Go to{" "}
-								<a
-									href="https://app.circleback.ai/automations"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="text-primary hover:underline inline-flex items-center gap-1"
-								>
-									Circleback Automations
-									<ExternalLink className="h-3 w-3" />
-								</a>{" "}
-								and click "Create automation".
-							</p>
-						</div>
-						<div>
-							<h4 className="font-medium mb-2">3. Configure the Webhook</h4>
-							<p className="text-sm text-muted-foreground">
-								Set your automation conditions, then select "Send webhook request" and paste the
-								webhook URL.
-							</p>
-						</div>
-						<div>
-							<h4 className="font-medium mb-2">4. Select Meeting Outcomes</h4>
-							<p className="text-sm text-muted-foreground">
-								Choose which meeting data to include: notes, transcript, action items, and
-								insights.
-							</p>
-						</div>
-						<div>
-							<h4 className="font-medium mb-2">5. Create & Test</h4>
-							<p className="text-sm text-muted-foreground">
-								Give your automation a name and create it. You can send a test request to verify
-								the integration works.
-							</p>
-						</div>
-					</CardContent>
-				</Card>
-			</motion.div>
-		</div>
-	);
-}
-
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/clickup-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/clickup-connector/page.tsx
deleted file mode 100644
index 319d333b4..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/clickup-connector/page.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, ExternalLink, Eye, EyeOff } from "lucide-react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const clickupConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	api_token: z.string().min(10, {
-		message: "ClickUp API Token is required and must be valid.",
-	}),
-});
-
-// Define the type for the form values
-type ClickUpConnectorFormValues = z.infer<typeof clickupConnectorFormSchema>;
-
-export default function ClickUpConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-	const [isLoading, setIsLoading] = useState(false);
-	const [showApiToken, setShowApiToken] = useState(false);
-
-	// Initialize the form with react-hook-form and zod validation
-	const form = useForm<ClickUpConnectorFormValues>({
-		resolver: zodResolver(clickupConnectorFormSchema),
-		defaultValues: {
-			name: "ClickUp Connector",
-			api_token: "",
-		},
-	});
-
-	// Handle form submission
-	async function onSubmit(values: ClickUpConnectorFormValues) {
-		setIsLoading(true);
-
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.CLICKUP_CONNECTOR,
-					is_indexable: true,
-					config: {
-						CLICKUP_API_TOKEN: values.api_token,
-					},
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("ClickUp connector created successfully!");
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating ClickUp connector:", error);
-			toast.error("Failed to create ClickUp connector. Please try again.");
-		} finally {
-			setIsLoading(false);
-		}
-	}
-
-	return (
-		<div className="container mx-auto py-6 max-w-2xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect ClickUp</h1>
-						<p className="text-muted-foreground">
-							Connect your ClickUp workspace to search tasks and projects.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<Card>
-				<CardHeader>
-					<CardTitle>ClickUp Configuration</CardTitle>
-					<CardDescription>
-						Enter your ClickUp API token to connect your workspace. You can generate a personal API
-						token from your ClickUp settings.
-					</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<Form {...form}>
-						<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-							<FormField
-								control={form.control}
-								name="name"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>Connector Name</FormLabel>
-										<FormControl>
-											<Input placeholder="ClickUp Connector" {...field} />
-										</FormControl>
-										<FormDescription>
-											A friendly name to identify this ClickUp connector.
-										</FormDescription>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-
-							<FormField
-								control={form.control}
-								name="api_token"
-								render={({ field }) => (
-									<FormItem>
-										<FormLabel>ClickUp API Token</FormLabel>
-										<FormControl>
-											<div className="relative">
-												<Input
-													type={showApiToken ? "text" : "password"}
-													placeholder="pk_..."
-													{...field}
-													className="pr-10"
-												/>
-												<Button
-													type="button"
-													variant="ghost"
-													size="sm"
-													className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
-													onClick={() => setShowApiToken(!showApiToken)}
-												>
-													{showApiToken ? (
-														<EyeOff className="h-4 w-4" />
-													) : (
-														<Eye className="h-4 w-4" />
-													)}
-												</Button>
-											</div>
-										</FormControl>
-										<FormDescription>
-											Your ClickUp personal API token. You can generate one in your{" "}
-											<Link
-												href="https://app.clickup.com/settings/apps"
-												target="_blank"
-												className="text-primary hover:underline inline-flex items-center"
-											>
-												ClickUp settings
-												<ExternalLink className="ml-1 h-3 w-3" />
-											</Link>
-											.
-										</FormDescription>
-										<FormMessage />
-									</FormItem>
-								)}
-							/>
-
-							<div className="flex justify-end space-x-4">
-								<Button
-									type="button"
-									variant="outline"
-									onClick={() => router.back()}
-									disabled={isLoading}
-								>
-									Cancel
-								</Button>
-								<Button type="submit" disabled={isLoading}>
-									{isLoading ? "Creating..." : "Create Connector"}
-								</Button>
-							</div>
-						</form>
-					</Form>
-				</CardContent>
-			</Card>
-
-			<Card className="mt-6">
-				<CardHeader>
-					<CardTitle className="text-lg">How to get your ClickUp API Token</CardTitle>
-				</CardHeader>
-				<CardContent className="space-y-4">
-					<div className="space-y-2">
-						<p className="text-sm text-muted-foreground">1. Log in to your ClickUp account</p>
-						<p className="text-sm text-muted-foreground">
-							2. Click your avatar in the upper-right corner and select "Settings"
-						</p>
-						<p className="text-sm text-muted-foreground">3. In the sidebar, click "Apps"</p>
-						<p className="text-sm text-muted-foreground">
-							4. Under "API Token", click "Generate" or "Regenerate"
-						</p>
-						<p className="text-sm text-muted-foreground">
-							5. Copy the generated token and paste it above
-						</p>
-					</div>
-					<div className="mt-4">
-						<Link
-							href="https://app.clickup.com/settings/apps"
-							target="_blank"
-							className="inline-flex items-center text-sm text-primary hover:underline"
-						>
-							Go to ClickUp API Settings
-							<ExternalLink className="ml-1 h-3 w-3" />
-						</Link>
-					</div>
-				</CardContent>
-			</Card>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/confluence-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/confluence-connector/page.tsx
deleted file mode 100644
index 7fcd03062..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/confluence-connector/page.tsx
+++ /dev/null
@@ -1,322 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const confluenceConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	base_url: z
-		.string()
-		.url({
-			message: "Please enter a valid Confluence URL (e.g., https://yourcompany.atlassian.net)",
-		})
-		.refine(
-			(url) => {
-				return url.includes("atlassian.net") || url.includes("confluence");
-			},
-			{
-				message: "Please enter a valid Confluence instance URL",
-			}
-		),
-	email: z.string().email({
-		message: "Please enter a valid email address.",
-	}),
-	api_token: z.string().min(10, {
-		message: "Confluence API Token is required and must be valid.",
-	}),
-});
-
-// Define the type for the form values
-type ConfluenceConnectorFormValues = z.infer<typeof confluenceConnectorFormSchema>;
-
-export default function ConfluenceConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<ConfluenceConnectorFormValues>({
-		resolver: zodResolver(confluenceConnectorFormSchema),
-		defaultValues: {
-			name: "Confluence Connector",
-			base_url: "",
-			email: "",
-			api_token: "",
-		},
-	});
-
-	// Handle form submission
-	const onSubmit = async (values: ConfluenceConnectorFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.CONFLUENCE_CONNECTOR,
-					config: {
-						CONFLUENCE_BASE_URL: values.base_url,
-						CONFLUENCE_EMAIL: values.email,
-						CONFLUENCE_API_TOKEN: values.api_token,
-					},
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Confluence connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect Confluence</h1>
-						<p className="text-muted-foreground">
-							Connect your Confluence instance to search pages and spaces.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Tabs defaultValue="connect" className="w-full">
-					<TabsList className="grid w-full grid-cols-2 mb-6">
-						<TabsTrigger value="connect">Connect</TabsTrigger>
-						<TabsTrigger value="documentation">Documentation</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="connect">
-						<Card>
-							<CardHeader>
-								<CardTitle>Connect to Confluence</CardTitle>
-								<CardDescription>
-									Connect your Confluence instance to index pages and comments from your spaces.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<Alert>
-									<Info className="h-4 w-4" />
-									<AlertDescription>
-										You'll need to create an API token from your{" "}
-										<a
-											href="https://id.atlassian.com/manage-profile/security/api-tokens"
-											target="_blank"
-											rel="noopener noreferrer"
-											className="font-medium underline underline-offset-4"
-										>
-											Atlassian Account Settings
-										</a>
-									</AlertDescription>
-								</Alert>
-
-								<Form {...form}>
-									<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Connector Name</FormLabel>
-													<FormControl>
-														<Input placeholder="My Confluence Connector" {...field} />
-													</FormControl>
-													<FormDescription>
-														A friendly name to identify this connector.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="base_url"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Confluence Instance URL</FormLabel>
-													<FormControl>
-														<Input placeholder="https://yourcompany.atlassian.net" {...field} />
-													</FormControl>
-													<FormDescription>
-														Your Confluence instance URL. For Atlassian Cloud, this is typically
-														https://yourcompany.atlassian.net
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="email"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Email Address</FormLabel>
-													<FormControl>
-														<Input type="email" placeholder="your.email@company.com" {...field} />
-													</FormControl>
-													<FormDescription>Your Atlassian account email address.</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="api_token"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>API Token</FormLabel>
-													<FormControl>
-														<Input
-															type="password"
-															placeholder="Your Confluence API Token"
-															{...field}
-														/>
-													</FormControl>
-													<FormDescription>
-														Your Confluence API Token will be encrypted and stored securely.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<div className="flex justify-end">
-											<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-												{isSubmitting ? (
-													<>
-														<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-														Connecting...
-													</>
-												) : (
-													<>
-														<Check className="mr-2 h-4 w-4" />
-														Connect Confluence
-													</>
-												)}
-											</Button>
-										</div>
-									</form>
-								</Form>
-							</CardContent>
-						</Card>
-					</TabsContent>
-
-					<TabsContent value="documentation">
-						<Card>
-							<CardHeader>
-								<CardTitle>Confluence Integration Guide</CardTitle>
-								<CardDescription>
-									Learn how to set up and use the Confluence connector.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<div>
-									<h3 className="text-lg font-semibold mb-3">What gets indexed?</h3>
-									<ul className="list-disc list-inside space-y-2 text-sm text-muted-foreground">
-										<li>All pages from accessible spaces</li>
-										<li>Page content and metadata</li>
-										<li>Comments on pages (both footer and inline comments)</li>
-										<li>Page titles and descriptions</li>
-									</ul>
-								</div>
-
-								<div>
-									<h3 className="text-lg font-semibold mb-3">Setup Instructions</h3>
-									<ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
-										<li>Go to your Atlassian Account Settings</li>
-										<li>Navigate to Security → API tokens</li>
-										<li>Create a new API token with appropriate permissions</li>
-										<li>Copy the token and paste it in the form above</li>
-										<li>Ensure your account has read access to the spaces you want to index</li>
-									</ol>
-								</div>
-
-								<div>
-									<h3 className="text-lg font-semibold mb-3">Permissions Required</h3>
-									<ul className="list-disc list-inside space-y-2 text-sm text-muted-foreground">
-										<li>Read access to Confluence spaces</li>
-										<li>View pages and comments</li>
-										<li>Access to space metadata</li>
-									</ul>
-								</div>
-
-								<Alert>
-									<Info className="h-4 w-4" />
-									<AlertDescription>
-										The connector will only index content that your account has permission to view.
-										Make sure your API token has the necessary permissions for the spaces you want
-										to index.
-									</AlertDescription>
-								</Alert>
-							</CardContent>
-						</Card>
-					</TabsContent>
-				</Tabs>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/discord-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/discord-connector/page.tsx
deleted file mode 100644
index 94ef849e2..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/discord-connector/page.tsx
+++ /dev/null
@@ -1,371 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const discordConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	bot_token: z
-		.string()
-		.min(50, { message: "Discord Bot Token appears to be too short." })
-		.regex(/^[A-Za-z0-9._-]+$/, { message: "Discord Bot Token contains invalid characters." }),
-});
-
-// Define the type for the form values
-type DiscordConnectorFormValues = z.infer<typeof discordConnectorFormSchema>;
-
-export default function DiscordConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<DiscordConnectorFormValues>({
-		resolver: zodResolver(discordConnectorFormSchema),
-		defaultValues: {
-			name: "Discord Connector",
-			bot_token: "",
-		},
-	});
-
-	// Handle form submission
-	const onSubmit = async (values: DiscordConnectorFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.DISCORD_CONNECTOR,
-					config: {
-						DISCORD_BOT_TOKEN: values.bot_token,
-					},
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Discord connector created successfully!");
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg ">
-						{getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect Discord</h1>
-						<p className="text-muted-foreground">
-							Connect your Discord server to search messages and channels.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Tabs defaultValue="connect" className="w-full">
-					<TabsList className="grid w-full grid-cols-2 mb-6">
-						<TabsTrigger value="connect">Connect</TabsTrigger>
-						<TabsTrigger value="documentation">Documentation</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="connect">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">Connect Discord Server</CardTitle>
-								<CardDescription>
-									Integrate with Discord to search and retrieve information from your servers and
-									channels. This connector can index your Discord messages for search.
-								</CardDescription>
-							</CardHeader>
-							<CardContent>
-								<Alert className="mb-6 bg-muted">
-									<Info className="h-4 w-4" />
-									<AlertTitle>Bot Token Required</AlertTitle>
-									<AlertDescription>
-										You'll need a Discord Bot Token to use this connector. You can create a Discord
-										bot and get the token from the{" "}
-										<a
-											href="https://discord.com/developers/applications"
-											target="_blank"
-											rel="noopener noreferrer"
-											className="font-medium underline underline-offset-4"
-										>
-											Discord Developer Portal
-										</a>
-										.
-									</AlertDescription>
-								</Alert>
-
-								<Form {...form}>
-									<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Connector Name</FormLabel>
-													<FormControl>
-														<Input placeholder="My Discord Connector" {...field} />
-													</FormControl>
-													<FormDescription>
-														A friendly name to identify this connector.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="bot_token"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Discord Bot Token</FormLabel>
-													<FormControl>
-														<Input type="password" placeholder="Bot Token..." {...field} />
-													</FormControl>
-													<FormDescription>
-														Your Discord Bot Token will be encrypted and stored securely. You can
-														find it in the Bot section of your application in the Discord Developer
-														Portal.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<div className="flex justify-end">
-											<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-												{isSubmitting ? (
-													<>
-														<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-														Connecting...
-													</>
-												) : (
-													<>
-														<Check className="mr-2 h-4 w-4" />
-														Connect Discord
-													</>
-												)}
-											</Button>
-										</div>
-									</form>
-								</Form>
-							</CardContent>
-							<CardFooter className="flex flex-col items-start border-t bg-muted/50 px-6 py-4">
-								<h4 className="text-sm font-medium">What you get with Discord integration:</h4>
-								<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
-									<li>Search through your Discord servers and channels</li>
-									<li>Access historical messages and shared files</li>
-									<li>Connect your team's knowledge directly to your search space</li>
-									<li>Keep your search results up-to-date with latest communications</li>
-									<li>Index your Discord messages for enhanced search capabilities</li>
-								</ul>
-							</CardFooter>
-						</Card>
-					</TabsContent>
-
-					<TabsContent value="documentation">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">
-									Discord Connector Documentation
-								</CardTitle>
-								<CardDescription>
-									Learn how to set up and use the Discord connector to index your server data.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<div>
-									<h3 className="text-xl font-semibold mb-2">How it works</h3>
-									<p className="text-muted-foreground">
-										The Discord connector indexes all accessible channels for a given bot in your
-										servers.
-									</p>
-									<ul className="mt-2 list-disc pl-5 text-muted-foreground">
-										<li>Upcoming: Support for private channels by granting the bot access.</li>
-									</ul>
-								</div>
-
-								<Accordion type="single" collapsible className="w-full">
-									<AccordionItem value="authorization">
-										<AccordionTrigger className="text-lg font-medium">
-											Authorization
-										</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>Bot Setup Required</AlertTitle>
-												<AlertDescription>
-													You must create a Discord bot and add it to your server with the correct
-													permissions.
-												</AlertDescription>
-											</Alert>
-
-											<ol className="list-decimal pl-5 space-y-3">
-												<li>
-													Go to{" "}
-													<a
-														href="https://discord.com/developers/applications"
-														target="_blank"
-														rel="noopener noreferrer"
-														className="font-medium underline underline-offset-4"
-													>
-														https://discord.com/developers/applications
-													</a>
-													.
-												</li>
-												<li>Create a new application and add a bot to it.</li>
-												<li>Copy the Bot Token from the Bot section.</li>
-												<li>
-													Invite the bot to your server with the following OAuth2 scopes and
-													permissions:
-													<ul className="list-disc pl-5 mt-1">
-														<li>
-															Scopes: <code>bot</code>
-														</li>
-														<li>
-															Bot Permissions: <code>Read Messages/View Channels</code>,{" "}
-															<code>Read Message History</code>, <code>Send Messages</code>
-														</li>
-													</ul>
-												</li>
-												<li>Paste the Bot Token above to connect.</li>
-											</ol>
-										</AccordionContent>
-									</AccordionItem>
-
-									<AccordionItem value="indexing">
-										<AccordionTrigger className="text-lg font-medium">Indexing</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<ol className="list-decimal pl-5 space-y-3">
-												<li>
-													Navigate to the Connector Dashboard and select the{" "}
-													<strong>Discord</strong> Connector.
-												</li>
-												<li>
-													Place the <strong>Bot Token</strong> under{" "}
-													<strong>Step 1 Provide Credentials</strong>.
-												</li>
-												<li>
-													Click <strong>Connect</strong> to establish the connection.
-												</li>
-											</ol>
-
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>Important: Bot Channel Access</AlertTitle>
-												<AlertDescription>
-													After connecting, ensure the bot has access to all channels you want to
-													index. You may need to adjust channel permissions in Discord.
-												</AlertDescription>
-											</Alert>
-
-											<Alert className="bg-muted mt-4">
-												<Info className="h-4 w-4" />
-												<AlertTitle>First Indexing</AlertTitle>
-												<AlertDescription>
-													The first indexing pulls all accessible channels and may take longer than
-													future updates. Only channels where the bot has access will be indexed.
-												</AlertDescription>
-											</Alert>
-
-											<div className="mt-4">
-												<h4 className="font-medium mb-2">Troubleshooting:</h4>
-												<ul className="list-disc pl-5 space-y-2 text-muted-foreground">
-													<li>
-														<strong>Missing messages:</strong> If you don't see messages from a
-														channel, check the bot's permissions for that channel.
-													</li>
-													<li>
-														<strong>Bot not responding:</strong> Make sure the bot is online and the
-														token is correct.
-													</li>
-													<li>
-														<strong>Private channels:</strong> The bot must be explicitly granted
-														access to private channels.
-													</li>
-												</ul>
-											</div>
-										</AccordionContent>
-									</AccordionItem>
-								</Accordion>
-							</CardContent>
-						</Card>
-					</TabsContent>
-				</Tabs>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/elasticsearch-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/elasticsearch-connector/page.tsx
deleted file mode 100644
index 15e03f3aa..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/elasticsearch-connector/page.tsx
+++ /dev/null
@@ -1,755 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import * as RadioGroup from "@radix-ui/react-radio-group";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useId, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const elasticsearchConnectorFormSchema = z
-	.object({
-		name: z.string().min(3, {
-			message: "Connector name must be at least 3 characters.",
-		}),
-		endpoint_url: z.string().url({ message: "Please enter a valid Elasticsearch endpoint URL." }),
-		auth_method: z.enum(["basic", "api_key"]).default("api_key"),
-		username: z.string().optional(),
-		password: z.string().optional(),
-		ELASTICSEARCH_API_KEY: z.string().optional(),
-		indices: z.string().optional(),
-		query: z.string().default("*"),
-		search_fields: z.string().optional(),
-		max_documents: z.number().min(1).max(10000).optional(),
-	})
-	.refine(
-		(data) => {
-			if (data.auth_method === "basic") {
-				return Boolean(data.username?.trim() && data.password?.trim());
-			}
-			if (data.auth_method === "api_key") {
-				return Boolean(data.ELASTICSEARCH_API_KEY?.trim());
-			}
-			return true;
-		},
-		{
-			message: "Authentication credentials are required for the selected method.",
-			path: ["auth_method"],
-		}
-	);
-
-// Define the type for the form values
-type ElasticsearchConnectorFormValues = z.infer<typeof elasticsearchConnectorFormSchema>;
-
-export default function ElasticsearchConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchParams = useSearchParams();
-	// match pattern used in other connector pages: prefer route param, fallback to query param
-	const searchSpaceId = (params.search_space_id ?? searchParams?.get("search_space_id")) as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-
-	const authBasicId = useId();
-	const authApiKeyId = useId();
-
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<ElasticsearchConnectorFormValues>({
-		resolver: zodResolver(elasticsearchConnectorFormSchema),
-		defaultValues: {
-			name: "Elasticsearch Connector",
-			endpoint_url: "",
-			auth_method: "api_key",
-			username: "",
-			password: "",
-			ELASTICSEARCH_API_KEY: "",
-			indices: "",
-			query: "*",
-			search_fields: "",
-			max_documents: undefined,
-		},
-	});
-
-	const stringToArray = (str: string): string[] => {
-		const items = str
-			.split(",")
-			.map((item) => item.trim())
-			.filter((item) => item.length > 0);
-		return Array.from(new Set(items));
-	};
-
-	// Handle form submission
-	const onSubmit = async (values: ElasticsearchConnectorFormValues) => {
-		setIsSubmitting(true);
-		if (!searchSpaceId) {
-			toast.error(
-				"Missing search_space_id (route or ?search_space_id=). Provide it in the URL or pick a search space."
-			);
-			setIsSubmitting(false);
-			return;
-		}
-		const searchSpaceIdNum = Number(searchSpaceId);
-		if (!Number.isInteger(searchSpaceIdNum) || searchSpaceIdNum <= 0) {
-			toast.error("Invalid search_space_id. It must be a positive integer.");
-			setIsSubmitting(false);
-			return;
-		}
-		try {
-			// Send full URL to backend (backend expects ELASTICSEARCH_URL)
-			const config: Record<string, string | number | boolean | string[]> = {
-				ELASTICSEARCH_URL: values.endpoint_url,
-				// default to verifying certs; expose fields for CA/verify if UI added later
-				ELASTICSEARCH_VERIFY_CERTS: true,
-			};
-
-			if (values.auth_method === "basic") {
-				if (values.username) config.ELASTICSEARCH_USERNAME = values.username;
-				if (values.password) config.ELASTICSEARCH_PASSWORD = values.password;
-			} else if (values.auth_method === "api_key") {
-				if (values.ELASTICSEARCH_API_KEY)
-					config.ELASTICSEARCH_API_KEY = values.ELASTICSEARCH_API_KEY;
-			}
-
-			const indicesInput = values.indices?.trim() ?? "";
-			const indicesArr = stringToArray(indicesInput);
-			config.ELASTICSEARCH_INDEX =
-				indicesArr.length === 0 ? "*" : indicesArr.length === 1 ? indicesArr[0] : indicesArr;
-
-			if (values.query && values.query !== "*") {
-				config.ELASTICSEARCH_QUERY = values.query;
-			}
-
-			if (values.search_fields?.trim()) {
-				// config.ELASTICSEARCH_FIELDS = stringToArray(values.search_fields);
-				const fields = stringToArray(values.search_fields);
-				config.ELASTICSEARCH_FIELDS = fields;
-				config.ELASTICSEARCH_CONTENT_FIELDS = fields;
-				if (fields.includes("title")) {
-					config.ELASTICSEARCH_TITLE_FIELD = "title";
-				}
-			}
-
-			if (values.max_documents !== undefined && values.max_documents > 0) {
-				config.ELASTICSEARCH_MAX_DOCUMENTS = values.max_documents;
-			}
-
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.ELASTICSEARCH_CONNECTOR,
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-					config,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Elasticsearch connector created successfully!");
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.ELASTICSEARCH_CONNECTOR, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect Elasticsearch</h1>
-						<p className="text-muted-foreground">
-							Connect to your Elasticsearch cluster to search and index documents.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Tabs defaultValue="connect" className="w-full">
-					<TabsList className="grid w-full grid-cols-2 mb-6">
-						<TabsTrigger value="connect">Connect</TabsTrigger>
-						<TabsTrigger value="documentation">Documentation</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="connect">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">Connect Elasticsearch Cluster</CardTitle>
-								<CardDescription>
-									Connect to your Elasticsearch instance to search and index documents for enhanced
-									search capabilities.
-								</CardDescription>
-							</CardHeader>
-							<CardContent>
-								<Form {...form}>
-									<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-										{/* Connector Name */}
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Connector Name</FormLabel>
-													<FormControl>
-														<Input placeholder="My Elasticsearch Connector" {...field} />
-													</FormControl>
-													<FormDescription>
-														A friendly name to identify this connector.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										{/* Connection Details */}
-										<div className="space-y-4">
-											<h3 className="text-lg font-medium">Connection Details</h3>
-
-											<FormField
-												control={form.control}
-												name="endpoint_url"
-												render={({ field }) => (
-													<FormItem>
-														<FormLabel>Elasticsearch Endpoint URL</FormLabel>
-														<FormControl>
-															<Input
-																type="url"
-																autoComplete="off"
-																placeholder="https://your-cluster.es.region.aws.com:443"
-																{...field}
-															/>
-														</FormControl>
-														<FormDescription>
-															Enter the complete Elasticsearch endpoint URL. We'll automatically
-															extract the hostname, port, and SSL settings.
-														</FormDescription>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-
-											{/* Show parsed URL details */}
-											{form.watch("endpoint_url") && (
-												<div className="rounded-lg border bg-muted/50 p-3">
-													<h4 className="text-sm font-medium mb-2">Parsed Connection Details:</h4>
-													<div className="text-sm text-muted-foreground space-y-1">
-														{(() => {
-															try {
-																const url = new URL(form.watch("endpoint_url"));
-																return (
-																	<>
-																		<div>
-																			<strong>Hostname:</strong> {url.hostname}
-																		</div>
-																		<div>
-																			<strong>Port:</strong>{" "}
-																			{url.port || (url.protocol === "https:" ? "443" : "80")}
-																		</div>
-																		<div>
-																			<strong>SSL/TLS:</strong>{" "}
-																			{url.protocol === "https:" ? "Enabled" : "Disabled"}
-																		</div>
-																	</>
-																);
-															} catch {
-																return <div className="text-destructive">Invalid URL format</div>;
-															}
-														})()}
-													</div>
-												</div>
-											)}
-										</div>
-
-										{/* Authentication */}
-										<div className="space-y-4">
-											<h3 className="text-lg font-medium">Authentication</h3>
-
-											<FormField
-												control={form.control}
-												name="auth_method"
-												render={({ field }) => (
-													<FormItem className="space-y-3">
-														<FormControl>
-															<RadioGroup.Root
-																onValueChange={(value) => {
-																	field.onChange(value);
-																	// Clear auth fields when method changes
-																	if (value !== "basic") {
-																		form.setValue("username", "");
-																		form.setValue("password", "");
-																	}
-																	if (value !== "api_key") {
-																		form.setValue("ELASTICSEARCH_API_KEY", "");
-																	}
-																}}
-																value={field.value}
-																className="flex flex-col space-y-2"
-															>
-																<div className="flex items-center space-x-2">
-																	<RadioGroup.Item
-																		value="api_key"
-																		id={authApiKeyId}
-																		className="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
-																	>
-																		<RadioGroup.Indicator className="flex items-center justify-center">
-																			<div className="h-2.5 w-2.5 rounded-full bg-current" />
-																		</RadioGroup.Indicator>
-																	</RadioGroup.Item>
-																	<Label htmlFor={authApiKeyId}>API Key</Label>
-																</div>
-
-																<div className="flex items-center space-x-2">
-																	<RadioGroup.Item
-																		value="basic"
-																		id={authBasicId}
-																		className="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
-																	>
-																		<RadioGroup.Indicator className="flex items-center justify-center">
-																			<div className="h-2.5 w-2.5 rounded-full bg-current" />
-																		</RadioGroup.Indicator>
-																	</RadioGroup.Item>
-																	<Label htmlFor={authBasicId}>Username & Password</Label>
-																</div>
-															</RadioGroup.Root>
-														</FormControl>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-
-											{/* Basic Auth Fields */}
-											{form.watch("auth_method") === "basic" && (
-												<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-													<FormField
-														control={form.control}
-														name="username"
-														render={({ field }) => (
-															<FormItem>
-																<FormLabel>Username</FormLabel>
-																<FormControl>
-																	<Input placeholder="elastic" autoComplete="username" {...field} />
-																</FormControl>
-																<FormMessage />
-															</FormItem>
-														)}
-													/>
-
-													<FormField
-														control={form.control}
-														name="password"
-														render={({ field }) => (
-															<FormItem>
-																<FormLabel>Password</FormLabel>
-																<FormControl>
-																	<Input
-																		type="password"
-																		placeholder="Password"
-																		autoComplete="current-password"
-																		{...field}
-																	/>
-																</FormControl>
-																<FormMessage />
-															</FormItem>
-														)}
-													/>
-												</div>
-											)}
-
-											{/* API Key Field */}
-											{form.watch("auth_method") === "api_key" && (
-												<FormField
-													control={form.control}
-													name="ELASTICSEARCH_API_KEY"
-													render={({ field }) => (
-														<FormItem>
-															<FormLabel>API Key</FormLabel>
-															<FormControl>
-																<Input
-																	type="password"
-																	placeholder="Your API Key Here"
-																	autoComplete="off"
-																	{...field}
-																/>
-															</FormControl>
-															<FormDescription>
-																Enter your Elasticsearch API key (base64 encoded). This will be
-																stored securely.
-															</FormDescription>
-															<FormMessage />
-														</FormItem>
-													)}
-												/>
-											)}
-
-											{/* Index Selection */}
-											<FormField
-												control={form.control}
-												name="indices"
-												render={({ field }) => (
-													<FormItem>
-														<FormLabel>Index Selection </FormLabel>
-														<FormControl>
-															<Input placeholder="logs-*, documents-*, app-logs" {...field} />
-														</FormControl>
-														<FormDescription>
-															Comma-separated indices to search (e.g., "logs-*, documents-*").
-														</FormDescription>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-
-											{/* Show parsed indices as badges */}
-											{form.watch("indices")?.trim() && (
-												<div className="rounded-lg border bg-muted/50 p-3">
-													<h4 className="text-sm font-medium mb-2">Selected Indices:</h4>
-													<div className="flex flex-wrap gap-2">
-														{stringToArray(form.watch("indices") ?? "").map((index) => (
-															<Badge key={index} variant="secondary" className="text-xs">
-																{index}
-															</Badge>
-														))}
-													</div>
-												</div>
-											)}
-
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>Index Selection Tips</AlertTitle>
-												<AlertDescription className="mt-2">
-													<ul className="list-disc pl-4 space-y-1 text-sm">
-														<li>Use wildcards like "logs-*" to match multiple indices</li>
-														<li>Separate multiple indices with commas</li>
-														<li>
-															Leave empty to search all accessible indices including internal ones
-														</li>
-														<li>Choosing specific indices improves search performance</li>
-													</ul>
-												</AlertDescription>
-											</Alert>
-										</div>
-
-										{/* Advanced Configuration */}
-										<Accordion type="single" collapsible className="w-full">
-											<AccordionItem value="advanced">
-												<AccordionTrigger>Advanced Configuration</AccordionTrigger>
-												<AccordionContent className="space-y-4">
-													{/* Default Search Query */}
-													<FormField
-														control={form.control}
-														name="query"
-														render={({ field }) => (
-															<FormItem>
-																<FormLabel>
-																	Default Search Query{" "}
-																	<span className="text-muted-foreground">(Optional)</span>
-																</FormLabel>
-																<FormControl>
-																	<Input placeholder="*" {...field} />
-																</FormControl>
-																<FormDescription>
-																	Default Elasticsearch query to use for searches. Use "*" to match
-																	all documents.
-																</FormDescription>
-																<FormMessage />
-															</FormItem>
-														)}
-													/>
-
-													{/* Form Fields */}
-													<FormField
-														control={form.control}
-														name="search_fields"
-														render={({ field }) => (
-															<FormItem>
-																<FormLabel>
-																	Search Fields{" "}
-																	<span className="text-muted-foreground">(Optional)</span>
-																</FormLabel>
-																<FormControl>
-																	<Input placeholder="title, content, description" {...field} />
-																</FormControl>
-																<FormDescription>
-																	Comma-separated list of specific fields to search in (e.g.,
-																	"title, content, description"). Leave empty to search all fields.
-																</FormDescription>
-																<FormMessage />
-															</FormItem>
-														)}
-													/>
-
-													{/* Show parsed search fields as badges */}
-													{form.watch("search_fields")?.trim() && (
-														<div className="rounded-lg border bg-muted/50 p-3">
-															<h4 className="text-sm font-medium mb-2">Search Fields:</h4>
-															<div className="flex flex-wrap gap-2">
-																{stringToArray(form.watch("search_fields") ?? "").map((field) => (
-																	<Badge key={field} variant="outline" className="text-xs">
-																		{field}
-																	</Badge>
-																))}
-															</div>
-														</div>
-													)}
-
-													<FormField
-														control={form.control}
-														name="max_documents"
-														render={({ field }) => (
-															<FormItem>
-																<FormLabel>
-																	Maximum Documents{" "}
-																	<span className="text-muted-foreground">(Optional)</span>
-																</FormLabel>
-																<FormControl>
-																	<Input
-																		type="number"
-																		placeholder="1000"
-																		min="1"
-																		max="10000"
-																		{...field}
-																		onChange={(e) =>
-																			field.onChange(
-																				e.target.value === ""
-																					? undefined
-																					: parseInt(e.target.value, 10)
-																			)
-																		}
-																	/>
-																</FormControl>
-																<FormDescription>
-																	Maximum number of documents to retrieve per search (1-10,000).
-																	Leave empty to use Elasticsearch's default limit.
-																</FormDescription>
-																<FormMessage />
-															</FormItem>
-														)}
-													/>
-												</AccordionContent>
-											</AccordionItem>
-										</Accordion>
-
-										<Separator />
-
-										<div className="flex justify-end">
-											<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-												{isSubmitting ? (
-													<>
-														<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-														Connecting...
-													</>
-												) : (
-													<>
-														<Check className="mr-2 h-4 w-4" />
-														Connect Elasticsearch
-													</>
-												)}
-											</Button>
-										</div>
-									</form>
-								</Form>
-							</CardContent>
-							<CardFooter className="flex flex-col items-start border-t bg-muted/50 px-6 py-4">
-								<h4 className="text-sm font-medium">
-									What you get with Elasticsearch integration:
-								</h4>
-								<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
-									<li>Search across your indexed documents and logs</li>
-									<li>Access structured and unstructured data from your cluster</li>
-									<li>Leverage existing Elasticsearch indices for enhanced search</li>
-									<li>Real-time search capabilities with powerful query features</li>
-									<li>Integration with your existing Elasticsearch infrastructure</li>
-								</ul>
-							</CardFooter>
-						</Card>
-					</TabsContent>
-
-					<TabsContent value="documentation">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">
-									Elasticsearch Connector Documentation
-								</CardTitle>
-								<CardDescription>
-									Learn how to set up and use the Elasticsearch connector to search your data.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<div>
-									<h3 className="text-xl font-semibold mb-2">How it works</h3>
-									<p className="text-muted-foreground">
-										The Elasticsearch connector allows you to search and retrieve documents from
-										your Elasticsearch cluster. Configure connection details, select specific
-										indices, and set search parameters to make your existing data searchable within
-										SurfSense.
-									</p>
-								</div>
-
-								<Accordion type="single" collapsible className="w-full">
-									<AccordionItem value="connection">
-										<AccordionTrigger className="text-lg font-medium">
-											Connection Setup
-										</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<ol className="list-decimal pl-5 space-y-3">
-												<li>
-													<strong>Endpoint URL:</strong> Enter the complete Elasticsearch endpoint
-													URL (e.g., https://your-cluster.es.region.aws.com:443). We'll
-													automatically extract hostname, port, and SSL settings.
-												</li>
-												<li>
-													<strong>Authentication:</strong> Choose the appropriate method:
-													<ul className="list-disc pl-5 mt-1">
-														<li>
-															<strong>API Key:</strong> Base64 encoded API key (recommended for
-															security)
-														</li>
-														<li>
-															<strong>Username/Password:</strong> Basic authentication credentials
-														</li>
-													</ul>
-												</li>
-												<li>
-													<strong>Index Selection:</strong> Specify which indices to search using
-													comma-separated patterns (e.g., "logs-*, documents-*")
-												</li>
-											</ol>
-										</AccordionContent>
-									</AccordionItem>
-
-									<AccordionItem value="advanced">
-										<AccordionTrigger className="text-lg font-medium">
-											Advanced Configuration
-										</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<p className="text-muted-foreground">
-												Fine-tune your Elasticsearch connector with these optional settings:
-											</p>
-											<ul className="list-disc pl-5 space-y-2">
-												<li>
-													<strong>Search Fields:</strong> Limit searches to specific fields (e.g.,
-													"title, content") for better relevance
-												</li>
-												<li>
-													<strong>Default Query:</strong> Set a default Elasticsearch query pattern
-												</li>
-												<li>
-													<strong>Max Documents:</strong> Limit the number of documents returned per
-													search (1-10,000)
-												</li>
-											</ul>
-										</AccordionContent>
-									</AccordionItem>
-
-									<AccordionItem value="troubleshooting">
-										<AccordionTrigger className="text-lg font-medium">
-											Troubleshooting
-										</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<div className="space-y-4">
-												<div>
-													<h4 className="font-medium mb-2">Common Connection Issues:</h4>
-													<ul className="list-disc pl-5 space-y-2 text-muted-foreground">
-														<li>
-															<strong>Connection Refused:</strong> Check hostname and port. Ensure
-															Elasticsearch is running.
-														</li>
-														<li>
-															<strong>Authentication Failed:</strong> Verify credentials. For API
-															keys, ensure they have proper permissions.
-														</li>
-														<li>
-															<strong>SSL Errors:</strong> Try disabling SSL for local development
-															or check certificate validity.
-														</li>
-														<li>
-															<strong>No Indices Found:</strong> Ensure your credentials have
-															permission to list and read indices.
-														</li>
-													</ul>
-												</div>
-
-												<Alert className="bg-muted">
-													<Info className="h-4 w-4" />
-													<AlertTitle>Security Note</AlertTitle>
-													<AlertDescription>
-														For production environments, use API keys with minimal required
-														permissions: cluster monitoring and read access to specific indices.
-													</AlertDescription>
-												</Alert>
-											</div>
-										</AccordionContent>
-									</AccordionItem>
-								</Accordion>
-							</CardContent>
-						</Card>
-					</TabsContent>
-				</Tabs>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/github-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/github-connector/page.tsx
deleted file mode 100644
index a6c0c147b..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/github-connector/page.tsx
+++ /dev/null
@@ -1,531 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, CircleAlert, Github, Info, ListChecks, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import { authenticatedFetch, redirectToLogin } from "@/lib/auth-utils";
-
-// Define the form schema with Zod for GitHub PAT entry step
-const githubPatFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	github_pat: z
-		.string()
-		.min(20, {
-			// Apply min length first
-			message: "GitHub Personal Access Token seems too short.",
-		})
-		.refine((pat) => pat.startsWith("ghp_") || pat.startsWith("github_pat_"), {
-			// Then refine the pattern
-			message: "GitHub PAT should start with 'ghp_' or 'github_pat_'",
-		}),
-});
-
-// Define the type for the form values
-type GithubPatFormValues = z.infer<typeof githubPatFormSchema>;
-
-// Type for fetched GitHub repositories
-interface GithubRepo {
-	id: number;
-	name: string;
-	full_name: string;
-	private: boolean;
-	url: string;
-	description: string | null;
-	last_updated: string | null;
-}
-
-export default function GithubConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [step, setStep] = useState<"enter_pat" | "select_repos">("enter_pat");
-	const [isFetchingRepos, setIsFetchingRepos] = useState(false);
-	const [isCreatingConnector, setIsCreatingConnector] = useState(false);
-	const [repositories, setRepositories] = useState<GithubRepo[]>([]);
-	const [selectedRepos, setSelectedRepos] = useState<string[]>([]);
-	const [connectorName, setConnectorName] = useState<string>("GitHub Connector");
-	const [validatedPat, setValidatedPat] = useState<string>(""); // Store the validated PAT
-
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form for PAT entry
-	const form = useForm<GithubPatFormValues>({
-		resolver: zodResolver(githubPatFormSchema),
-		defaultValues: {
-			name: connectorName,
-			github_pat: "",
-		},
-	});
-
-	// Function to fetch repositories using the new backend endpoint
-	const fetchRepositories = async (values: GithubPatFormValues) => {
-		setIsFetchingRepos(true);
-		setConnectorName(values.name); // Store the name
-		setValidatedPat(values.github_pat); // Store the PAT temporarily
-		try {
-			const response = await authenticatedFetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/github/repositories`,
-				{
-					method: "POST",
-					headers: { "Content-Type": "application/json" },
-					body: JSON.stringify({ github_pat: values.github_pat }),
-				}
-			);
-
-			if (!response.ok) {
-				const errorData = await response.json();
-				throw new Error(errorData.detail || `Failed to fetch repositories: ${response.statusText}`);
-			}
-
-			const data: GithubRepo[] = await response.json();
-			setRepositories(data);
-			setStep("select_repos"); // Move to the next step
-			toast.success(`Found ${data.length} repositories.`);
-		} catch (error) {
-			console.error("Error fetching GitHub repositories:", error);
-			const errorMessage =
-				error instanceof Error
-					? error.message
-					: "Failed to fetch repositories. Please check the PAT and try again.";
-			toast.error(errorMessage);
-		} finally {
-			setIsFetchingRepos(false);
-		}
-	};
-
-	// Handle final connector creation
-	const handleCreateConnector = async () => {
-		if (selectedRepos.length === 0) {
-			toast.warning("Please select at least one repository to index.");
-			return;
-		}
-
-		setIsCreatingConnector(true);
-		try {
-			await createConnector({
-				data: {
-					name: connectorName, // Use the stored name
-					connector_type: EnumConnectorName.GITHUB_CONNECTOR,
-					config: {
-						GITHUB_PAT: validatedPat, // Use the stored validated PAT
-						repo_full_names: selectedRepos, // Add the selected repo names
-					},
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("GitHub connector created successfully!");
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating GitHub connector:", error);
-			const errorMessage =
-				error instanceof Error ? error.message : "Failed to create GitHub connector.";
-			toast.error(errorMessage);
-		} finally {
-			setIsCreatingConnector(false);
-		}
-	};
-
-	// Handle checkbox changes
-	const handleRepoSelection = (repoFullName: string, checked: boolean) => {
-		setSelectedRepos((prev) =>
-			checked ? [...prev, repoFullName] : prev.filter((name) => name !== repoFullName)
-		);
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => {
-					if (step === "select_repos") {
-						// Go back to PAT entry, clear sensitive/fetched data
-						setStep("enter_pat");
-						setRepositories([]);
-						setSelectedRepos([]);
-						setValidatedPat("");
-						// Reset form PAT field, keep name
-						form.reset({ name: connectorName, github_pat: "" });
-					} else {
-						router.push(`/dashboard/${searchSpaceId}/connectors/add`);
-					}
-				}}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				{step === "select_repos" ? "Back to PAT Entry" : "Back to Add Connectors"}
-			</Button>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Tabs defaultValue="connect" className="w-full">
-					<TabsList className="grid w-full grid-cols-2 mb-6">
-						<TabsTrigger value="connect">Connect GitHub</TabsTrigger>
-						<TabsTrigger value="documentation">Setup Guide</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="connect">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold flex items-center gap-2">
-									{step === "enter_pat" ? (
-										getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6")
-									) : (
-										<ListChecks className="h-6 w-6" />
-									)}
-									{step === "enter_pat" ? "Connect GitHub Account" : "Select Repositories to Index"}
-								</CardTitle>
-								<CardDescription>
-									{step === "enter_pat"
-										? "Provide a name and GitHub Personal Access Token (PAT) to fetch accessible repositories."
-										: `Select which repositories you want SurfSense to index for search. Found ${repositories.length} repositories accessible via your PAT.`}
-								</CardDescription>
-							</CardHeader>
-
-							<Form {...form}>
-								{step === "enter_pat" && (
-									<CardContent>
-										<Alert className="mb-6 bg-muted">
-											<Info className="h-4 w-4" />
-											<AlertTitle>GitHub Personal Access Token (PAT) Required</AlertTitle>
-											<AlertDescription>
-												You'll need a GitHub PAT with the appropriate scopes (e.g., 'repo') to fetch
-												repositories. You can create one from your{" "}
-												<a
-													href="https://github.com/settings/personal-access-tokens"
-													target="_blank"
-													rel="noopener noreferrer"
-													className="font-medium underline underline-offset-4"
-												>
-													GitHub Developer Settings
-												</a>
-												. The PAT will be used to fetch repositories and then stored securely to
-												enable indexing.
-											</AlertDescription>
-										</Alert>
-
-										<form onSubmit={form.handleSubmit(fetchRepositories)} className="space-y-6">
-											<FormField
-												control={form.control}
-												name="name"
-												render={({ field }) => (
-													<FormItem>
-														<FormLabel>Connector Name</FormLabel>
-														<FormControl>
-															<Input placeholder="My GitHub Connector" {...field} />
-														</FormControl>
-														<FormDescription>
-															A friendly name to identify this GitHub connection.
-														</FormDescription>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-
-											<FormField
-												control={form.control}
-												name="github_pat"
-												render={({ field }) => (
-													<FormItem>
-														<FormLabel>GitHub Personal Access Token (PAT)</FormLabel>
-														<FormControl>
-															<Input
-																type="password"
-																placeholder="ghp_... or github_pat_..."
-																{...field}
-															/>
-														</FormControl>
-														<FormDescription>
-															Enter your GitHub PAT here to fetch your repositories. It will be
-															stored encrypted later.
-														</FormDescription>
-														<FormMessage />
-													</FormItem>
-												)}
-											/>
-
-											<div className="flex justify-end">
-												<Button
-													type="submit"
-													disabled={isFetchingRepos}
-													className="w-full sm:w-auto"
-												>
-													{isFetchingRepos ? (
-														<>
-															<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-															Fetching Repositories...
-														</>
-													) : (
-														"Fetch Repositories"
-													)}
-												</Button>
-											</div>
-										</form>
-									</CardContent>
-								)}
-
-								{step === "select_repos" && (
-									<CardContent>
-										{repositories.length === 0 ? (
-											<Alert variant="destructive">
-												<CircleAlert className="h-4 w-4" />
-												<AlertTitle>No Repositories Found</AlertTitle>
-												<AlertDescription>
-													No repositories were found or accessible with the provided PAT. Please
-													check the token and its permissions, then go back and try again.
-												</AlertDescription>
-											</Alert>
-										) : (
-											<div className="space-y-4">
-												<FormLabel>Repositories ({selectedRepos.length} selected)</FormLabel>
-												<div className="h-64 w-full rounded-md border p-4 overflow-y-auto">
-													{repositories.map((repo) => (
-														<div key={repo.id} className="flex items-center space-x-2 mb-2 py-1">
-															<Checkbox
-																id={`repo-${repo.id}`}
-																checked={selectedRepos.includes(repo.full_name)}
-																onCheckedChange={(checked) =>
-																	handleRepoSelection(repo.full_name, !!checked)
-																}
-															/>
-															<label
-																htmlFor={`repo-${repo.id}`}
-																className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-															>
-																{repo.full_name} {repo.private && "(Private)"}
-															</label>
-														</div>
-													))}
-												</div>
-												<FormDescription>
-													Select the repositories you wish to index. Only checked repositories will
-													be processed.
-												</FormDescription>
-
-												<div className="flex justify-between items-center pt-4">
-													<Button
-														variant="outline"
-														onClick={() => {
-															setStep("enter_pat");
-															setRepositories([]);
-															setSelectedRepos([]);
-															setValidatedPat("");
-															form.reset({ name: connectorName, github_pat: "" });
-														}}
-													>
-														Back
-													</Button>
-													<Button
-														onClick={handleCreateConnector}
-														disabled={isCreatingConnector || selectedRepos.length === 0}
-														className="w-full sm:w-auto"
-													>
-														{isCreatingConnector ? (
-															<>
-																<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-																Creating Connector...
-															</>
-														) : (
-															<>
-																<Check className="mr-2 h-4 w-4" />
-																Create Connector
-															</>
-														)}
-													</Button>
-												</div>
-											</div>
-										)}
-									</CardContent>
-								)}
-							</Form>
-
-							<CardFooter className="flex flex-col items-start border-t bg-muted/50 px-6 py-4">
-								<h4 className="text-sm font-medium">What you get with GitHub integration:</h4>
-								<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
-									<li>Search through code and documentation in your selected repositories</li>
-									<li>Access READMEs, Markdown files, and common code files</li>
-									<li>Connect your project knowledge directly to your search space</li>
-									<li>Index your selected repositories for enhanced search capabilities</li>
-								</ul>
-							</CardFooter>
-						</Card>
-					</TabsContent>
-
-					<TabsContent value="documentation">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">GitHub Connector Setup Guide</CardTitle>
-								<CardDescription>
-									Learn how to generate a Personal Access Token (PAT) and connect your GitHub
-									account.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<div>
-									<h3 className="text-xl font-semibold mb-2">How it works</h3>
-									<p className="text-muted-foreground">
-										The GitHub connector uses a Personal Access Token (PAT) to authenticate with the
-										GitHub API. First, it fetches a list of repositories accessible to the token.
-										You then select which repositories you want to index. The connector indexes
-										relevant files (code, markdown, text) from only the selected repositories.
-									</p>
-									<ul className="mt-2 list-disc pl-5 text-muted-foreground">
-										<li>
-											The connector indexes files based on common code and documentation extensions.
-										</li>
-										<li>Large files (over 1MB) are skipped during indexing.</li>
-										<li>Only selected repositories are indexed.</li>
-										<li>
-											Indexing runs periodically (check connector settings for frequency) to keep
-											content up-to-date.
-										</li>
-									</ul>
-								</div>
-
-								<Accordion type="single" collapsible className="w-full">
-									<AccordionItem value="create_pat">
-										<AccordionTrigger className="text-lg font-medium">
-											Step 1: Generate GitHub PAT
-										</AccordionTrigger>
-										<AccordionContent>
-											<div className="space-y-6">
-												<div>
-													<h4 className="font-medium mb-2">Generating a Token:</h4>
-													<ol className="list-decimal pl-5 space-y-3">
-														<li>
-															Go to your GitHub{" "}
-															<a
-																href="https://github.com/settings/tokens"
-																target="_blank"
-																rel="noopener noreferrer"
-																className="font-medium underline underline-offset-4"
-															>
-																Developer settings
-															</a>
-															.
-														</li>
-														<li>
-															Click on <strong>Personal access tokens</strong>, then choose{" "}
-															<strong>Tokens (classic)</strong> or{" "}
-															<strong>Fine-grained tokens</strong> (recommended if available and
-															suitable).
-														</li>
-														<li>
-															Click <strong>Generate new token</strong> (and choose the appropriate
-															type).
-														</li>
-														<li>
-															Give your token a descriptive name (e.g., "SurfSense Connector").
-														</li>
-														<li>
-															Set an expiration date for the token (recommended for security).
-														</li>
-														<li>
-															Under <strong>Select scopes</strong> (for classic tokens) or{" "}
-															<strong>Repository access</strong> (for fine-grained), grant the
-															necessary permissions. At minimum, the <strong>`repo`</strong> scope
-															(or equivalent read access to repositories for fine-grained tokens) is
-															required to read repository content.
-														</li>
-														<li>
-															Click <strong>Generate token</strong>.
-														</li>
-														<li>
-															<strong>Important:</strong> Copy your new PAT immediately. You won't
-															be able to see it again after leaving the page.
-														</li>
-													</ol>
-												</div>
-											</div>
-										</AccordionContent>
-									</AccordionItem>
-
-									<AccordionItem value="connect_app">
-										<AccordionTrigger className="text-lg font-medium">
-											Step 2: Connect in SurfSense
-										</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<ol className="list-decimal pl-5 space-y-3">
-												<li>Navigate to the "Connect GitHub" tab.</li>
-												<li>Enter a name for your connector.</li>
-												<li>
-													Paste the copied GitHub PAT into the "GitHub Personal Access Token (PAT)"
-													field.
-												</li>
-												<li>
-													Click <strong>Fetch Repositories</strong>.
-												</li>
-												<li>
-													If the PAT is valid, you'll see a list of your accessible repositories.
-												</li>
-												<li>
-													Select the repositories you want SurfSense to index using the checkboxes.
-												</li>
-												<li>
-													Click the <strong>Create Connector</strong> button.
-												</li>
-												<li>
-													If the connection is successful, you will be redirected and can start
-													indexing from the Connectors page.
-												</li>
-											</ol>
-										</AccordionContent>
-									</AccordionItem>
-								</Accordion>
-							</CardContent>
-						</Card>
-					</TabsContent>
-				</Tabs>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx
deleted file mode 100644
index d208b1659..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-calendar-connector/page.tsx
+++ /dev/null
@@ -1,188 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import Link from "next/link";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-import { authenticatedFetch } from "@/lib/auth-utils";
-
-export default function GoogleCalendarConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isConnecting, setIsConnecting] = useState(false);
-	const [doesConnectorExist, setDoesConnectorExist] = useState(false);
-
-	const { refetch: fetchConnectors } = useAtomValue(connectorsAtom);
-
-	useEffect(() => {
-		fetchConnectors().then((data) => {
-			const connectors = data.data || [];
-			const connector = connectors.find(
-				(c: SearchSourceConnector) =>
-					c.connector_type === EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR
-			);
-			if (connector) {
-				setDoesConnectorExist(true);
-			}
-		});
-	}, []);
-
-	// Handle Google OAuth connection
-	const handleConnectGoogle = async () => {
-		try {
-			setIsConnecting(true);
-			// Call backend to initiate authorization flow
-			const response = await authenticatedFetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/auth/google/calendar/connector/add/?space_id=${searchSpaceId}`,
-				{ method: "GET" }
-			);
-
-			if (!response.ok) {
-				throw new Error("Failed to initiate Google OAuth");
-			}
-
-			const data = await response.json();
-
-			// Redirect to Google for authentication
-			window.location.href = data.auth_url;
-		} catch (error) {
-			console.error("Error connecting to Google:", error);
-			toast.error("Failed to connect to Google Calendar");
-		} finally {
-			setIsConnecting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-2xl">
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				{/* Header */}
-				<div className="mb-8">
-					<Link
-						href={`/dashboard/${searchSpaceId}/connectors/add`}
-						className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
-					>
-						<ArrowLeft className="mr-2 h-4 w-4" />
-						Back to connectors
-					</Link>
-					<div className="flex items-center gap-4">
-						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-							{getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6")}
-						</div>
-						<div>
-							<h1 className="text-3xl font-bold tracking-tight">Connect Google Calendar</h1>
-							<p className="text-muted-foreground">
-								Connect your Google Calendar to search events.
-							</p>
-						</div>
-					</div>
-				</div>
-
-				{/* OAuth Connection Card */}
-				{!doesConnectorExist ? (
-					<Card>
-						<CardHeader>
-							<CardTitle>Connect Your Google Account</CardTitle>
-							<CardDescription>
-								Connect your Google account to access your calendar events. We'll only request
-								read-only access to your calendars.
-							</CardDescription>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Read-only access to your calendar events</span>
-							</div>
-							<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Access works even when you're offline</span>
-							</div>
-							<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>You can disconnect anytime</span>
-							</div>
-						</CardContent>
-						<CardFooter className="flex justify-between">
-							<Button
-								type="button"
-								variant="outline"
-								onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-							>
-								Cancel
-							</Button>
-							<Button onClick={handleConnectGoogle} disabled={isConnecting}>
-								{isConnecting ? (
-									<>
-										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-										Connecting...
-									</>
-								) : (
-									<>
-										<ExternalLink className="mr-2 h-4 w-4" />
-										Connect Your Google Account
-									</>
-								)}
-							</Button>
-						</CardFooter>
-					</Card>
-				) : (
-					/* Configuration Form Card */
-					<Card>
-						<CardHeader>
-							<CardTitle>✅ Your Google calendar is successfully connected!</CardTitle>
-						</CardHeader>
-					</Card>
-				)}
-
-				{/* Help Section */}
-				{!doesConnectorExist && (
-					<Card className="mt-6">
-						<CardHeader>
-							<CardTitle className="text-lg">How It Works</CardTitle>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div>
-								<h4 className="font-medium mb-2">1. Connect Your Account</h4>
-								<p className="text-sm text-muted-foreground">
-									Click "Connect Your Google Account" to start the secure OAuth process. You'll be
-									redirected to Google to sign in.
-								</p>
-							</div>
-							<div>
-								<h4 className="font-medium mb-2">2. Grant Permissions</h4>
-								<p className="text-sm text-muted-foreground">
-									Google will ask for permission to read your calendar events. We only request
-									read-only access to keep your data safe.
-								</p>
-							</div>
-						</CardContent>
-					</Card>
-				)}
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-drive-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-drive-connector/page.tsx
deleted file mode 100644
index 4f0c2b23f..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-drive-connector/page.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { toast } from "sonner";
-import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-import { authenticatedFetch } from "@/lib/auth-utils";
-
-export default function GoogleDriveConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	
-	const [isConnecting, setIsConnecting] = useState(false);
-	const [doesConnectorExist, setDoesConnectorExist] = useState(false);
-
-	const { refetch: fetchConnectors } = useAtomValue(connectorsAtom);
-
-	useEffect(() => {
-		fetchConnectors().then((data) => {
-			const connectors = data.data || [];
-			const connector = connectors.find(
-				(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.GOOGLE_DRIVE_CONNECTOR
-			);
-			if (connector) {
-				setDoesConnectorExist(true);
-			}
-		});
-	}, []);
-
-	const handleConnectGoogle = async () => {
-		try {
-			setIsConnecting(true);
-			const response = await authenticatedFetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/auth/google/drive/connector/add/?space_id=${searchSpaceId}`,
-				{ method: "GET" }
-			);
-
-			if (!response.ok) {
-				throw new Error("Failed to initiate Google OAuth");
-			}
-
-			const data = await response.json();
-			window.location.href = data.auth_url;
-		} catch (error) {
-			console.error("Error connecting to Google:", error);
-			toast.error("Failed to connect to Google Drive");
-		} finally {
-			setIsConnecting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-2xl">
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				{/* Header */}
-				<div className="mb-8">
-					<Link
-						href={`/dashboard/${searchSpaceId}/connectors/add`}
-						className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
-					>
-						<ArrowLeft className="mr-2 h-4 w-4" />
-						Back to connectors
-					</Link>
-					<div className="flex items-center gap-4">
-						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-							{getConnectorIcon(EnumConnectorName.GOOGLE_DRIVE_CONNECTOR, "h-6 w-6")}
-						</div>
-						<div>
-							<h1 className="text-3xl font-bold tracking-tight">Connect Google Drive</h1>
-							<p className="text-muted-foreground">
-								Securely connect your Google Drive account
-							</p>
-						</div>
-					</div>
-				</div>
-
-				{/* Connection Card */}
-				{!doesConnectorExist ? (
-					<Card>
-						<CardHeader>
-							<CardTitle>Connect Your Google Account</CardTitle>
-							<CardDescription>
-								Authorize read-only access to your Google Drive. You'll select which folder to
-								index when you start indexing.
-							</CardDescription>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div className="flex items-center gap-3 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Read-only access to your Drive files</span>
-							</div>
-							<div className="flex items-center gap-3 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Index documents, spreadsheets, presentations, PDFs & more</span>
-							</div>
-							<div className="flex items-center gap-3 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Automatic updates with change tracking</span>
-							</div>
-							<div className="flex items-center gap-3 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Secure OAuth 2.0 authentication</span>
-							</div>
-						</CardContent>
-						<CardFooter className="flex justify-between">
-							<Button
-								type="button"
-								variant="outline"
-								onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-							>
-								Cancel
-							</Button>
-							<Button onClick={handleConnectGoogle} disabled={isConnecting}>
-								{isConnecting ? (
-									<>
-										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-										Connecting...
-									</>
-								) : (
-									<>
-										<ExternalLink className="mr-2 h-4 w-4" />
-										Connect Google Drive
-									</>
-								)}
-							</Button>
-						</CardFooter>
-					</Card>
-				) : (
-					<Card>
-						<CardHeader>
-							<CardTitle>✅ Already Connected</CardTitle>
-							<CardDescription>
-								Your Google Drive connector is already set up. Go to the connectors page to
-								start indexing.
-							</CardDescription>
-						</CardHeader>
-						<CardFooter>
-							<Button onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors`)}>
-								Go to Connectors
-							</Button>
-						</CardFooter>
-					</Card>
-				)}
-
-				{/* Information Card */}
-				<Card className="mt-6">
-					<CardHeader>
-						<CardTitle>How Google Drive Integration Works</CardTitle>
-					</CardHeader>
-					<CardContent className="space-y-4">
-						<div className="space-y-2">
-							<h4 className="font-medium">1️⃣ Connect Your Account</h4>
-							<p className="text-sm text-muted-foreground">
-								First, securely connect your Google Drive account using OAuth 2.0. We only
-								request read-only access.
-							</p>
-						</div>
-						<div className="space-y-2">
-							<h4 className="font-medium">2️⃣ Select Folder to Index</h4>
-							<p className="text-sm text-muted-foreground">
-								When you're ready to index, go to the connectors page and click "Index". You'll
-								choose which folder to process.
-							</p>
-						</div>
-						<div className="space-y-2">
-							<h4 className="font-medium">3️⃣ Automatic Change Detection</h4>
-							<p className="text-sm text-muted-foreground">
-								We use Google Drive's change tracking API to detect when files are modified,
-								added, or deleted. Only changed files are re-indexed.
-							</p>
-						</div>
-						<div className="space-y-2">
-							<h4 className="font-medium">📄 Comprehensive File Support</h4>
-							<p className="text-sm text-muted-foreground">
-								Supports Google Workspace files (Docs, Sheets, Slides), Microsoft Office
-								documents, PDFs, text files, images (with OCR), and more.
-							</p>
-						</div>
-					</CardContent>
-				</Card>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-gmail-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-gmail-connector/page.tsx
deleted file mode 100644
index 5ca8874d1..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/google-gmail-connector/page.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, ExternalLink, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import Link from "next/link";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import { z } from "zod";
-import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-import { authenticatedFetch } from "@/lib/auth-utils";
-
-export default function GoogleGmailConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isConnecting, setIsConnecting] = useState(false);
-	const [doesConnectorExist, setDoesConnectorExist] = useState(false);
-
-	const { refetch: fetchConnectors } = useAtomValue(connectorsAtom);
-
-	useEffect(() => {
-		fetchConnectors().then((data) => {
-			const connectors = data.data || [];
-			const connector = connectors.find(
-				(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.GOOGLE_GMAIL_CONNECTOR
-			);
-			if (connector) {
-				setDoesConnectorExist(true);
-			}
-		});
-	}, []);
-
-	// Handle Google OAuth connection
-	const handleConnectGoogle = async () => {
-		try {
-			setIsConnecting(true);
-			// Call backend to initiate authorization flow
-			const response = await authenticatedFetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/auth/google/gmail/connector/add/?space_id=${searchSpaceId}`,
-				{ method: "GET" }
-			);
-
-			if (!response.ok) {
-				throw new Error("Failed to initiate Google OAuth");
-			}
-
-			const data = await response.json();
-
-			// Redirect to Google for authentication
-			window.location.href = data.auth_url;
-		} catch (error) {
-			console.error("Error connecting to Google:", error);
-			toast.error("Failed to connect to Google Gmail");
-		} finally {
-			setIsConnecting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-2xl">
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				{/* Header */}
-				<div className="mb-8">
-					<Link
-						href={`/dashboard/${searchSpaceId}/connectors/add`}
-						className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
-					>
-						<ArrowLeft className="mr-2 h-4 w-4" />
-						Back to connectors
-					</Link>
-					<div className="flex items-center gap-4">
-						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-							{getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6")}
-						</div>
-						<div>
-							<h1 className="text-3xl font-bold tracking-tight">Connect Google Gmail</h1>
-							<p className="text-muted-foreground">
-								Connect your Gmail account to search through your emails
-							</p>
-						</div>
-					</div>
-				</div>
-
-				{/* Connection Card */}
-				{!doesConnectorExist ? (
-					<Card>
-						<CardHeader>
-							<CardTitle>Connect Your Gmail Account</CardTitle>
-							<CardDescription>
-								Securely connect your Gmail account to enable email search within SurfSense. We'll
-								only access your emails with read-only permissions.
-							</CardDescription>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div className="flex items-center gap-3 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Read-only access to your emails</span>
-							</div>
-							<div className="flex items-center gap-3 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Search through email content and metadata</span>
-							</div>
-							<div className="flex items-center gap-3 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>Secure OAuth 2.0 authentication</span>
-							</div>
-							<div className="flex items-center gap-3 text-sm text-muted-foreground">
-								<Check className="h-4 w-4 text-green-500" />
-								<span>You can disconnect anytime</span>
-							</div>
-						</CardContent>
-						<CardFooter className="flex justify-between">
-							<Button
-								type="button"
-								variant="outline"
-								onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-							>
-								Cancel
-							</Button>
-							<Button onClick={handleConnectGoogle} disabled={isConnecting}>
-								{isConnecting ? (
-									<>
-										<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-										Connecting...
-									</>
-								) : (
-									<>
-										<ExternalLink className="mr-2 h-4 w-4" />
-										Connect Your Google Account
-									</>
-								)}
-							</Button>
-						</CardFooter>
-					</Card>
-				) : (
-					/* Configuration Form Card */
-					<Card>
-						<CardHeader>
-							<CardTitle>✅ Your Gmail is successfully connected!</CardTitle>
-						</CardHeader>
-					</Card>
-				)}
-
-				{/* Information Card */}
-				<Card className="mt-6">
-					<CardHeader>
-						<CardTitle>What data will be indexed?</CardTitle>
-					</CardHeader>
-					<CardContent className="space-y-4">
-						<div className="space-y-2">
-							<h4 className="font-medium">Email Content</h4>
-							<p className="text-sm text-muted-foreground">
-								We'll index the content of your emails including subject lines, sender information,
-								and message body text to make them searchable.
-							</p>
-						</div>
-						<div className="space-y-2">
-							<h4 className="font-medium">Email Metadata</h4>
-							<p className="text-sm text-muted-foreground">
-								Information like sender, recipient, date, and labels will be indexed to provide
-								better search context and filtering options.
-							</p>
-						</div>
-						<div className="space-y-2">
-							<h4 className="font-medium">Privacy & Security</h4>
-							<p className="text-sm text-muted-foreground">
-								Your emails are processed securely and stored with encryption. We only access emails
-								with read-only permissions and never modify or send emails on your behalf.
-							</p>
-						</div>
-					</CardContent>
-				</Card>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/jira-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/jira-connector/page.tsx
deleted file mode 100644
index a0c22582b..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/jira-connector/page.tsx
+++ /dev/null
@@ -1,427 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const jiraConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	base_url: z
-		.string()
-		.url({
-			message: "Please enter a valid Jira URL (e.g., https://yourcompany.atlassian.net)",
-		})
-		.refine(
-			(url) => {
-				return url.includes("atlassian.net") || url.includes("jira");
-			},
-			{
-				message: "Please enter a valid Jira instance URL",
-			}
-		),
-	email: z.string().email({
-		message: "Please enter a valid email address.",
-	}),
-	api_token: z.string().min(10, {
-		message: "Jira API Token is required and must be valid.",
-	}),
-});
-
-// Define the type for the form values
-type JiraConnectorFormValues = z.infer<typeof jiraConnectorFormSchema>;
-
-export default function JiraConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<JiraConnectorFormValues>({
-		resolver: zodResolver(jiraConnectorFormSchema),
-		defaultValues: {
-			name: "Jira Connector",
-			base_url: "",
-			email: "",
-			api_token: "",
-		},
-	});
-
-	// Handle form submission
-	const onSubmit = async (values: JiraConnectorFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.JIRA_CONNECTOR,
-					config: {
-						JIRA_BASE_URL: values.base_url,
-						JIRA_EMAIL: values.email,
-						JIRA_API_TOKEN: values.api_token,
-					},
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Jira connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect Jira</h1>
-						<p className="text-muted-foreground">
-							Connect your Jira instance to search issues and tickets.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Tabs defaultValue="connect" className="w-full">
-					<TabsList className="grid w-full grid-cols-2 mb-6">
-						<TabsTrigger value="connect">Connect</TabsTrigger>
-						<TabsTrigger value="documentation">Documentation</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="connect">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">Connect Jira Instance</CardTitle>
-								<CardDescription>
-									Integrate with Jira to search and retrieve information from your issues, tickets,
-									and comments. This connector can index your Jira content for search.
-								</CardDescription>
-							</CardHeader>
-							<CardContent>
-								<Alert className="mb-6 bg-muted">
-									<Info className="h-4 w-4" />
-									<AlertTitle>Jira Personal Access Token Required</AlertTitle>
-									<AlertDescription>
-										You'll need a Jira Personal Access Token to use this connector. You can create
-										one from{" "}
-										<a
-											href="https://id.atlassian.com/manage-profile/security/api-tokens"
-											target="_blank"
-											rel="noopener noreferrer"
-											className="font-medium underline underline-offset-4"
-										>
-											Atlassian Account Settings
-										</a>
-									</AlertDescription>
-								</Alert>
-
-								<Form {...form}>
-									<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Connector Name</FormLabel>
-													<FormControl>
-														<Input placeholder="My Jira Connector" {...field} />
-													</FormControl>
-													<FormDescription>
-														A friendly name to identify this connector.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="base_url"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Jira Instance URL</FormLabel>
-													<FormControl>
-														<Input placeholder="https://yourcompany.atlassian.net" {...field} />
-													</FormControl>
-													<FormDescription>
-														Your Jira instance URL. For Atlassian Cloud, this is typically
-														https://yourcompany.atlassian.net
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="email"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Email Address</FormLabel>
-													<FormControl>
-														<Input type="email" placeholder="your.email@company.com" {...field} />
-													</FormControl>
-													<FormDescription>Your Atlassian account email address.</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="api_token"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>API Token</FormLabel>
-													<FormControl>
-														<Input type="password" placeholder="Your Jira API Token" {...field} />
-													</FormControl>
-													<FormDescription>
-														Your Jira API Token will be encrypted and stored securely.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<div className="flex justify-end">
-											<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-												{isSubmitting ? (
-													<>
-														<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-														Connecting...
-													</>
-												) : (
-													<>
-														<Check className="mr-2 h-4 w-4" />
-														Connect Jira
-													</>
-												)}
-											</Button>
-										</div>
-									</form>
-								</Form>
-							</CardContent>
-							<CardFooter className="flex flex-col items-start border-t bg-muted/50 px-6 py-4">
-								<h4 className="text-sm font-medium">What you get with Jira integration:</h4>
-								<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
-									<li>Search through all your Jira issues and tickets</li>
-									<li>Access issue descriptions, comments, and full discussion threads</li>
-									<li>Connect your team's project management directly to your search space</li>
-									<li>Keep your search results up-to-date with latest Jira content</li>
-									<li>Index your Jira issues for enhanced search capabilities</li>
-									<li>Search by issue keys, status, priority, and assignee information</li>
-								</ul>
-							</CardFooter>
-						</Card>
-					</TabsContent>
-
-					<TabsContent value="documentation">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">Jira Connector Documentation</CardTitle>
-								<CardDescription>
-									Learn how to set up and use the Jira connector to index your project management
-									data.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<div>
-									<h3 className="text-xl font-semibold mb-2">How it works</h3>
-									<p className="text-muted-foreground">
-										The Jira connector uses the Jira REST API with Basic Authentication to fetch all
-										issues and comments that your account has access to within your Jira instance.
-									</p>
-									<ul className="mt-2 list-disc pl-5 text-muted-foreground">
-										<li>
-											For follow up indexing runs, the connector retrieves issues and comments that
-											have been updated since the last indexing attempt.
-										</li>
-										<li>
-											Indexing is configured to run periodically, so updates should appear in your
-											search results within minutes.
-										</li>
-									</ul>
-								</div>
-
-								<Accordion type="single" collapsible className="w-full">
-									<AccordionItem value="authorization">
-										<AccordionTrigger className="text-lg font-medium">
-											Authorization
-										</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>Read-Only Access is Sufficient</AlertTitle>
-												<AlertDescription>
-													You only need read access for this connector to work. The API Token will
-													only be used to read your Jira data.
-												</AlertDescription>
-											</Alert>
-
-											<div className="space-y-6">
-												<div>
-													<h4 className="font-medium mb-2">Step 1: Create an API Token</h4>
-													<ol className="list-decimal pl-5 space-y-3">
-														<li>Log in to your Atlassian account</li>
-														<li>
-															Navigate to{" "}
-															<a
-																href="https://id.atlassian.com/manage-profile/security/api-tokens"
-																target="_blank"
-																rel="noopener noreferrer"
-																className="font-medium underline underline-offset-4"
-															>
-																https://id.atlassian.com/manage-profile/security/api-tokens
-															</a>
-														</li>
-														<li>
-															Click <strong>Create API token</strong>
-														</li>
-														<li>Enter a label for your token (like "SurfSense Connector")</li>
-														<li>
-															Click <strong>Create</strong>
-														</li>
-														<li>Copy the generated token as it will only be shown once</li>
-													</ol>
-												</div>
-
-												<div>
-													<h4 className="font-medium mb-2">Step 2: Grant necessary access</h4>
-													<p className="text-muted-foreground mb-3">
-														The API Token will have access to all projects and issues that your user
-														account can see. Make sure your account has appropriate permissions for
-														the projects you want to index.
-													</p>
-													<Alert className="bg-muted">
-														<Info className="h-4 w-4" />
-														<AlertTitle>Data Privacy</AlertTitle>
-														<AlertDescription>
-															Only issues, comments, and basic metadata will be indexed. Jira
-															attachments and linked files are not indexed by this connector.
-														</AlertDescription>
-													</Alert>
-												</div>
-											</div>
-										</AccordionContent>
-									</AccordionItem>
-
-									<AccordionItem value="indexing">
-										<AccordionTrigger className="text-lg font-medium">Indexing</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<ol className="list-decimal pl-5 space-y-3">
-												<li>
-													Navigate to the Connector Dashboard and select the <strong>Jira</strong>{" "}
-													Connector.
-												</li>
-												<li>
-													Enter your <strong>Jira Instance URL</strong> (e.g.,
-													https://yourcompany.atlassian.net)
-												</li>
-												<li>
-													Place your <strong>Personal Access Token</strong> in the form field.
-												</li>
-												<li>
-													Click <strong>Connect</strong> to establish the connection.
-												</li>
-												<li>Once connected, your Jira issues will be indexed automatically.</li>
-											</ol>
-
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>What Gets Indexed</AlertTitle>
-												<AlertDescription>
-													<p className="mb-2">The Jira connector indexes the following data:</p>
-													<ul className="list-disc pl-5">
-														<li>Issue keys and summaries (e.g., PROJ-123)</li>
-														<li>Issue descriptions</li>
-														<li>Issue comments and discussion threads</li>
-														<li>Issue status, priority, and type information</li>
-														<li>Assignee and reporter information</li>
-														<li>Project information</li>
-													</ul>
-												</AlertDescription>
-											</Alert>
-										</AccordionContent>
-									</AccordionItem>
-								</Accordion>
-							</CardContent>
-						</Card>
-					</TabsContent>
-				</Tabs>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/linear-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/linear-connector/page.tsx
deleted file mode 100644
index ba747bf6e..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/linear-connector/page.tsx
+++ /dev/null
@@ -1,379 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const linearConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	api_key: z
-		.string()
-		.min(10, {
-			message: "Linear API Key is required and must be valid.",
-		})
-		.regex(/^lin_api_/, {
-			message: "Linear API Key should start with 'lin_api_'",
-		}),
-});
-
-// Define the type for the form values
-type LinearConnectorFormValues = z.infer<typeof linearConnectorFormSchema>;
-
-export default function LinearConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<LinearConnectorFormValues>({
-		resolver: zodResolver(linearConnectorFormSchema),
-		defaultValues: {
-			name: "Linear Connector",
-			api_key: "",
-		},
-	});
-
-	// Handle form submission
-	const onSubmit = async (values: LinearConnectorFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.LINEAR_CONNECTOR,
-					config: {
-						LINEAR_API_KEY: values.api_key,
-					},
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Linear connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect Linear</h1>
-						<p className="text-muted-foreground">
-							Connect your Linear workspace to search issues and projects.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Tabs defaultValue="connect" className="w-full">
-					<TabsList className="grid w-full grid-cols-2 mb-6">
-						<TabsTrigger value="connect">Connect</TabsTrigger>
-						<TabsTrigger value="documentation">Documentation</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="connect">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">Connect Linear Workspace</CardTitle>
-								<CardDescription>
-									Integrate with Linear to search and retrieve information from your issues and
-									comments. This connector can index your Linear content for search.
-								</CardDescription>
-							</CardHeader>
-							<CardContent>
-								<Alert className="mb-6 bg-muted">
-									<Info className="h-4 w-4" />
-									<AlertTitle>Linear API Key Required</AlertTitle>
-									<AlertDescription>
-										You'll need a Linear API Key to use this connector. You can create a Linear API
-										key from{" "}
-										<a
-											href="https://linear.app/settings/api"
-											target="_blank"
-											rel="noopener noreferrer"
-											className="font-medium underline underline-offset-4"
-										>
-											Linear API Settings
-										</a>
-									</AlertDescription>
-								</Alert>
-
-								<Form {...form}>
-									<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Connector Name</FormLabel>
-													<FormControl>
-														<Input placeholder="My Linear Connector" {...field} />
-													</FormControl>
-													<FormDescription>
-														A friendly name to identify this connector.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="api_key"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Linear API Key</FormLabel>
-													<FormControl>
-														<Input type="password" placeholder="lin_api_..." {...field} />
-													</FormControl>
-													<FormDescription>
-														Your Linear API Key will be encrypted and stored securely. It typically
-														starts with "lin_api_".
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<div className="flex justify-end">
-											<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-												{isSubmitting ? (
-													<>
-														<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-														Connecting...
-													</>
-												) : (
-													<>
-														<Check className="mr-2 h-4 w-4" />
-														Connect Linear
-													</>
-												)}
-											</Button>
-										</div>
-									</form>
-								</Form>
-							</CardContent>
-							<CardFooter className="flex flex-col items-start border-t bg-muted/50 px-6 py-4">
-								<h4 className="text-sm font-medium">What you get with Linear integration:</h4>
-								<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
-									<li>Search through all your Linear issues and comments</li>
-									<li>Access issue titles, descriptions, and full discussion threads</li>
-									<li>Connect your team's project management directly to your search space</li>
-									<li>Keep your search results up-to-date with latest Linear content</li>
-									<li>Index your Linear issues for enhanced search capabilities</li>
-								</ul>
-							</CardFooter>
-						</Card>
-					</TabsContent>
-
-					<TabsContent value="documentation">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">Linear Connector Documentation</CardTitle>
-								<CardDescription>
-									Learn how to set up and use the Linear connector to index your project management
-									data.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<div>
-									<h3 className="text-xl font-semibold mb-2">How it works</h3>
-									<p className="text-muted-foreground">
-										The Linear connector uses the Linear GraphQL API to fetch all issues and
-										comments that the API key has access to within a workspace.
-									</p>
-									<ul className="mt-2 list-disc pl-5 text-muted-foreground">
-										<li>
-											For follow up indexing runs, the connector retrieves issues and comments that
-											have been updated since the last indexing attempt.
-										</li>
-										<li>
-											Indexing is configured to run periodically, so updates should appear in your
-											search results within minutes.
-										</li>
-									</ul>
-								</div>
-
-								<Accordion type="single" collapsible className="w-full">
-									<AccordionItem value="authorization">
-										<AccordionTrigger className="text-lg font-medium">
-											Authorization
-										</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>Read-Only Access is Sufficient</AlertTitle>
-												<AlertDescription>
-													You only need a read-only API key for this connector to work. This limits
-													the permissions to just reading your Linear data.
-												</AlertDescription>
-											</Alert>
-
-											<div className="space-y-6">
-												<div>
-													<h4 className="font-medium mb-2">Step 1: Create an API key</h4>
-													<ol className="list-decimal pl-5 space-y-3">
-														<li>Log in to your Linear account</li>
-														<li>
-															Navigate to{" "}
-															<a
-																href="https://linear.app/settings/api"
-																target="_blank"
-																rel="noopener noreferrer"
-																className="font-medium underline underline-offset-4"
-															>
-																https://linear.app/settings/api
-															</a>{" "}
-															in your browser.
-														</li>
-														<li>Alternatively, click on your profile picture → Settings → API</li>
-														<li>
-															Click the <strong>+ New API key</strong> button.
-														</li>
-														<li>Enter a description for your key (like "Search Connector").</li>
-														<li>Select "Read-only" as the permission.</li>
-														<li>
-															Click <strong>Create</strong> to generate the API key.
-														</li>
-														<li>
-															Copy the generated API key that starts with 'lin_api_' as it will only
-															be shown once.
-														</li>
-													</ol>
-												</div>
-
-												<div>
-													<h4 className="font-medium mb-2">Step 2: Grant necessary access</h4>
-													<p className="text-muted-foreground mb-3">
-														The API key will have access to all issues and comments that your user
-														account can see. If you're creating the key as an admin, it will have
-														access to all issues in the workspace.
-													</p>
-													<Alert className="bg-muted">
-														<Info className="h-4 w-4" />
-														<AlertTitle>Data Privacy</AlertTitle>
-														<AlertDescription>
-															Only issues and comments will be indexed. Linear attachments and
-															linked files are not indexed by this connector.
-														</AlertDescription>
-													</Alert>
-												</div>
-											</div>
-										</AccordionContent>
-									</AccordionItem>
-
-									<AccordionItem value="indexing">
-										<AccordionTrigger className="text-lg font-medium">Indexing</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<ol className="list-decimal pl-5 space-y-3">
-												<li>
-													Navigate to the Connector Dashboard and select the <strong>Linear</strong>{" "}
-													Connector.
-												</li>
-												<li>
-													Place the <strong>API Key</strong> in the form field.
-												</li>
-												<li>
-													Click <strong>Connect</strong> to establish the connection.
-												</li>
-												<li>Once connected, your Linear issues will be indexed automatically.</li>
-											</ol>
-
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>What Gets Indexed</AlertTitle>
-												<AlertDescription>
-													<p className="mb-2">The Linear connector indexes the following data:</p>
-													<ul className="list-disc pl-5">
-														<li>Issue titles and identifiers (e.g., PROJ-123)</li>
-														<li>Issue descriptions</li>
-														<li>Issue comments</li>
-														<li>Issue status and metadata</li>
-													</ul>
-												</AlertDescription>
-											</Alert>
-										</AccordionContent>
-									</AccordionItem>
-								</Accordion>
-							</CardContent>
-						</Card>
-					</TabsContent>
-				</Tabs>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/linkup-api/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/linkup-api/page.tsx
deleted file mode 100644
index 16c0700d7..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/linkup-api/page.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const linkupApiFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	api_key: z.string().min(10, {
-		message: "API key is required and must be valid.",
-	}),
-});
-
-// Define the type for the form values
-type LinkupApiFormValues = z.infer<typeof linkupApiFormSchema>;
-
-export default function LinkupApiPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<LinkupApiFormValues>({
-		resolver: zodResolver(linkupApiFormSchema),
-		defaultValues: {
-			name: "Linkup API Connector",
-			api_key: "",
-		},
-	});
-
-	// Handle form submission
-	const onSubmit = async (values: LinkupApiFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.LINKUP_API,
-					config: {
-						LINKUP_API_KEY: values.api_key,
-					},
-					is_indexable: false,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Linkup API connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect Linkup API</h1>
-						<p className="text-muted-foreground">
-							Connect Linkup API for enhanced search capabilities.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Card className="border-2 border-border">
-					<CardHeader>
-						<CardTitle className="text-2xl font-bold">Connect Linkup API</CardTitle>
-						<CardDescription>
-							Integrate with Linkup API to enhance your search capabilities with AI-powered search
-							results.
-						</CardDescription>
-					</CardHeader>
-					<CardContent>
-						<Alert className="mb-6 bg-muted">
-							<Info className="h-4 w-4" />
-							<AlertTitle>API Key Required</AlertTitle>
-							<AlertDescription>
-								You'll need a Linkup API key to use this connector. You can get one by signing up at{" "}
-								<a
-									href="https://linkup.so"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="font-medium underline underline-offset-4"
-								>
-									linkup.so
-								</a>
-							</AlertDescription>
-						</Alert>
-
-						<Form {...form}>
-							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-								<FormField
-									control={form.control}
-									name="name"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Connector Name</FormLabel>
-											<FormControl>
-												<Input placeholder="My Linkup API Connector" {...field} />
-											</FormControl>
-											<FormDescription>A friendly name to identify this connector.</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="api_key"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Linkup API Key</FormLabel>
-											<FormControl>
-												<Input type="password" placeholder="Enter your Linkup API key" {...field} />
-											</FormControl>
-											<FormDescription>
-												Your API key will be encrypted and stored securely.
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<div className="flex justify-end">
-									<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-										{isSubmitting ? (
-											<>
-												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-												Connecting...
-											</>
-										) : (
-											<>
-												<Check className="mr-2 h-4 w-4" />
-												Connect Linkup API
-											</>
-										)}
-									</Button>
-								</div>
-							</form>
-						</Form>
-					</CardContent>
-					<CardFooter className="flex flex-col items-start border-t bg-muted/50 px-6 py-4">
-						<h4 className="text-sm font-medium">What you get with Linkup API:</h4>
-						<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
-							<li>AI-powered search results tailored to your queries</li>
-							<li>Real-time information from the web</li>
-							<li>Enhanced search capabilities for your projects</li>
-						</ul>
-					</CardFooter>
-				</Card>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/luma-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/luma-connector/page.tsx
deleted file mode 100644
index 0b78cf40c..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/luma-connector/page.tsx
+++ /dev/null
@@ -1,268 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Key, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import Link from "next/link";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-
-// Define the form schema with Zod
-const lumaConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	api_key: z.string().min(10, {
-		message: "API key is required and must be valid.",
-	}),
-});
-
-// Define the type for the form values
-type LumaConnectorFormValues = z.infer<typeof lumaConnectorFormSchema>;
-
-export default function LumaConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [doesConnectorExist, setDoesConnectorExist] = useState(false);
-
-	const { data: connectors } = useAtomValue(connectorsAtom);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<LumaConnectorFormValues>({
-		resolver: zodResolver(lumaConnectorFormSchema),
-		defaultValues: {
-			name: "Luma Events",
-			api_key: "",
-		},
-	});
-
-	const { refetch: fetchConnectors } = useAtomValue(connectorsAtom);
-
-	useEffect(() => {
-		fetchConnectors().then((data) => {
-			const connectors = data.data || [];
-			const connector = connectors.find(
-				(c: SearchSourceConnector) => c.connector_type === EnumConnectorName.LUMA_CONNECTOR
-			);
-			if (connector) {
-				setDoesConnectorExist(true);
-			}
-		});
-	}, []);
-
-	// Handle form submission
-	const onSubmit = async (values: LumaConnectorFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.LUMA_CONNECTOR,
-					config: {
-						LUMA_API_KEY: values.api_key,
-					},
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Luma connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-2xl">
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				{/* Header */}
-				<div className="mb-8">
-					<Link
-						href={`/dashboard/${searchSpaceId}/connectors/add`}
-						className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
-					>
-						<ArrowLeft className="mr-2 h-4 w-4" />
-						Back to connectors
-					</Link>
-					<div className="flex items-center gap-4">
-						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-							{getConnectorIcon(EnumConnectorName.LUMA_CONNECTOR, "h-6 w-6")}
-						</div>
-						<div>
-							<h1 className="text-3xl font-bold tracking-tight">Connect Luma</h1>
-							<p className="text-muted-foreground">Connect your Luma account to search events.</p>
-						</div>
-					</div>
-				</div>
-
-				{/* Connection Card */}
-				{!doesConnectorExist ? (
-					<Card>
-						<CardHeader>
-							<CardTitle>Connect Your Luma Account</CardTitle>
-							<CardDescription>
-								Enter your Luma API key to connect your account. We'll use this to access your
-								events in read-only mode.
-							</CardDescription>
-						</CardHeader>
-						<Form {...form}>
-							<form onSubmit={form.handleSubmit(onSubmit)}>
-								<CardContent className="space-y-4">
-									<FormField
-										control={form.control}
-										name="name"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Connector Name</FormLabel>
-												<FormControl>
-													<Input placeholder="My Luma Events" {...field} />
-												</FormControl>
-												<FormDescription>
-													A friendly name to identify this connector.
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									<FormField
-										control={form.control}
-										name="api_key"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>API Key</FormLabel>
-												<FormControl>
-													<Input type="password" placeholder="Enter your Luma API key" {...field} />
-												</FormControl>
-												<FormDescription>
-													Your API key will be encrypted and stored securely.
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									<div className="space-y-2 pt-2">
-										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-											<Check className="h-4 w-4 text-green-500" />
-											<span>Read-only access to your Luma events</span>
-										</div>
-										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-											<Check className="h-4 w-4 text-green-500" />
-											<span>Access works even when you're offline</span>
-										</div>
-										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
-											<Check className="h-4 w-4 text-green-500" />
-											<span>You can disconnect anytime</span>
-										</div>
-									</div>
-								</CardContent>
-								<CardFooter className="flex justify-between">
-									<Button
-										type="button"
-										variant="outline"
-										onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-									>
-										Cancel
-									</Button>
-									<Button type="submit" disabled={isSubmitting}>
-										{isSubmitting ? (
-											<>
-												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-												Connecting...
-											</>
-										) : (
-											<>
-												<Key className="mr-2 h-4 w-4" />
-												Connect Luma
-											</>
-										)}
-									</Button>
-								</CardFooter>
-							</form>
-						</Form>
-					</Card>
-				) : (
-					/* Success Card */
-					<Card>
-						<CardHeader>
-							<CardTitle>✅ Your Luma account is successfully connected!</CardTitle>
-						</CardHeader>
-					</Card>
-				)}
-
-				{/* Help Section */}
-				{!doesConnectorExist && (
-					<Card className="mt-6">
-						<CardHeader>
-							<CardTitle className="text-lg">How It Works</CardTitle>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							<div>
-								<h4 className="font-medium mb-2">1. Get Your API Key</h4>
-								<p className="text-sm text-muted-foreground">
-									Log into your Luma account and navigate to your account settings to generate an
-									API key.
-								</p>
-							</div>
-							<div>
-								<h4 className="font-medium mb-2">2. Enter Your API Key</h4>
-								<p className="text-sm text-muted-foreground">
-									Paste your API key in the field above. We'll use this to securely access your
-									events with read-only permissions.
-								</p>
-							</div>
-						</CardContent>
-					</Card>
-				)}
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/notion-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/notion-connector/page.tsx
deleted file mode 100644
index 160808e21..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/notion-connector/page.tsx
+++ /dev/null
@@ -1,390 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const notionConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	integration_token: z.string().min(10, {
-		message: "Notion Integration Token is required and must be valid.",
-	}),
-});
-
-// Define the type for the form values
-type NotionConnectorFormValues = z.infer<typeof notionConnectorFormSchema>;
-
-export default function NotionConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<NotionConnectorFormValues>({
-		resolver: zodResolver(notionConnectorFormSchema),
-		defaultValues: {
-			name: "Notion Connector",
-			integration_token: "",
-		},
-	});
-
-	// Handle form submission
-	const onSubmit = async (values: NotionConnectorFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.NOTION_CONNECTOR,
-					config: {
-						NOTION_INTEGRATION_TOKEN: values.integration_token,
-					},
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Notion connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect Notion</h1>
-						<p className="text-muted-foreground">
-							Connect your Notion workspace to search pages and databases.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Tabs defaultValue="connect" className="w-full">
-					<TabsList className="grid w-full grid-cols-2 mb-6">
-						<TabsTrigger value="connect">Connect</TabsTrigger>
-						<TabsTrigger value="documentation">Documentation</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="connect">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">Connect Notion Workspace</CardTitle>
-								<CardDescription>
-									Integrate with Notion to search and retrieve information from your workspace pages
-									and databases. This connector can index your Notion content for search.
-								</CardDescription>
-							</CardHeader>
-							<CardContent>
-								<Alert className="mb-6 bg-muted">
-									<Info className="h-4 w-4" />
-									<AlertTitle>Notion Integration Token Required</AlertTitle>
-									<AlertDescription>
-										You'll need a Notion Integration Token to use this connector. You can create a
-										Notion integration and get the token from{" "}
-										<a
-											href="https://www.notion.so/my-integrations"
-											target="_blank"
-											rel="noopener noreferrer"
-											className="font-medium underline underline-offset-4"
-										>
-											Notion Integrations Dashboard
-										</a>
-									</AlertDescription>
-								</Alert>
-
-								<Form {...form}>
-									<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Connector Name</FormLabel>
-													<FormControl>
-														<Input placeholder="My Notion Connector" {...field} />
-													</FormControl>
-													<FormDescription>
-														A friendly name to identify this connector.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="integration_token"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Notion Integration Token</FormLabel>
-													<FormControl>
-														<Input type="password" placeholder="ntn_.." {...field} />
-													</FormControl>
-													<FormDescription>
-														Your Notion Integration Token will be encrypted and stored securely. It
-														typically starts with "ntn_".
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<div className="flex justify-end">
-											<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-												{isSubmitting ? (
-													<>
-														<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-														Connecting...
-													</>
-												) : (
-													<>
-														<Check className="mr-2 h-4 w-4" />
-														Connect Notion
-													</>
-												)}
-											</Button>
-										</div>
-									</form>
-								</Form>
-							</CardContent>
-							<CardFooter className="flex flex-col items-start border-t bg-muted/50 px-6 py-4">
-								<h4 className="text-sm font-medium">What you get with Notion integration:</h4>
-								<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
-									<li>Search through your Notion pages and databases</li>
-									<li>Access documents, wikis, and knowledge bases</li>
-									<li>Connect your team's knowledge directly to your search space</li>
-									<li>Keep your search results up-to-date with latest Notion content</li>
-									<li>Index your Notion documents for enhanced search capabilities</li>
-								</ul>
-							</CardFooter>
-						</Card>
-					</TabsContent>
-
-					<TabsContent value="documentation">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">Notion Connector Documentation</CardTitle>
-								<CardDescription>
-									Learn how to set up and use the Notion connector to index your workspace data.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<div>
-									<h3 className="text-xl font-semibold mb-2">How it works</h3>
-									<p className="text-muted-foreground">
-										The Notion connector uses the Notion search API to fetch all pages that the
-										connector has access to within a workspace.
-									</p>
-									<ul className="mt-2 list-disc pl-5 text-muted-foreground">
-										<li>
-											For follow up indexing runs, the connector only retrieves pages that have been
-											updated since the last indexing attempt.
-										</li>
-										<li>
-											Indexing is configured to run every <strong>10 minutes</strong>, so page
-											updates should appear within 10 minutes.
-										</li>
-									</ul>
-								</div>
-
-								<Accordion type="single" collapsible className="w-full">
-									<AccordionItem value="authorization">
-										<AccordionTrigger className="text-lg font-medium">
-											Authorization
-										</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>No Admin Access Required</AlertTitle>
-												<AlertDescription>
-													There's no requirement to be an Admin to share information with an
-													integration. Any member can share pages and databases with it.
-												</AlertDescription>
-											</Alert>
-
-											<div className="space-y-6">
-												<div>
-													<h4 className="font-medium mb-2">Step 1: Create an integration</h4>
-													<ol className="list-decimal pl-5 space-y-3">
-														<li>
-															Visit{" "}
-															<a
-																href="https://www.notion.com/my-integrations"
-																target="_blank"
-																rel="noopener noreferrer"
-																className="font-medium underline underline-offset-4"
-															>
-																https://www.notion.com/my-integrations
-															</a>{" "}
-															in your browser.
-														</li>
-														<li>
-															Click the <strong>+ New integration</strong> button.
-														</li>
-														<li>
-															Name the integration (something like "Search Connector" could work).
-														</li>
-														<li>Select "Read content" as the only capability required.</li>
-														<li>
-															Click <strong>Submit</strong> to create the integration.
-														</li>
-														<li>
-															On the next page, you'll find your Notion integration token. Make a
-															copy of it as you'll need it to configure the connector.
-														</li>
-													</ol>
-												</div>
-
-												<div>
-													<h4 className="font-medium mb-2">
-														Step 2: Share pages/databases with your integration
-													</h4>
-													<p className="text-muted-foreground mb-3">
-														To keep your information secure, integrations don't have access to any
-														pages or databases in the workspace at first. You must share specific
-														pages with an integration in order for the connector to access those
-														pages.
-													</p>
-													<ol className="list-decimal pl-5 space-y-3">
-														<li>Go to the page/database in your workspace.</li>
-														<li>
-															Click the <code>•••</code> on the top right corner of the page.
-														</li>
-														<li>
-															Scroll to the bottom of the pop-up and click{" "}
-															<strong>Add connections</strong>.
-														</li>
-														<li>
-															Search for and select the new integration in the{" "}
-															<code>Search for connections...</code> menu.
-														</li>
-														<li>
-															<strong>Important:</strong>
-															<ul className="list-disc pl-5 mt-1">
-																<li>
-																	If you've added a page, all child pages also become accessible.
-																</li>
-																<li>
-																	If you've added a database, all rows (and their children) become
-																	accessible.
-																</li>
-															</ul>
-														</li>
-													</ol>
-												</div>
-											</div>
-										</AccordionContent>
-									</AccordionItem>
-
-									<AccordionItem value="indexing">
-										<AccordionTrigger className="text-lg font-medium">Indexing</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<ol className="list-decimal pl-5 space-y-3">
-												<li>
-													Navigate to the Connector Dashboard and select the <strong>Notion</strong>{" "}
-													Connector.
-												</li>
-												<li>
-													Place the <strong>Integration Token</strong> under{" "}
-													<strong>Step 1 Provide Credentials</strong>.
-												</li>
-												<li>
-													Click <strong>Connect</strong> to establish the connection.
-												</li>
-											</ol>
-
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>Indexing Behavior</AlertTitle>
-												<AlertDescription>
-													The Notion connector currently indexes everything it has access to. If you
-													want to limit specific content being indexed, simply unshare the database
-													from Notion with the integration.
-												</AlertDescription>
-											</Alert>
-										</AccordionContent>
-									</AccordionItem>
-								</Accordion>
-							</CardContent>
-						</Card>
-					</TabsContent>
-				</Tabs>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
deleted file mode 100644
index b4be1df71..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/page.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-"use client";
-
-import { useParams, useRouter } from "next/navigation";
-import { useEffect } from "react";
-
-export default function AddConnectorRedirect() {
-	const params = useParams();
-	const router = useRouter();
-	const search_space_id = params.search_space_id as string;
-
-	useEffect(() => {
-		router.replace(`/dashboard/${search_space_id}/sources/add?tab=connectors`);
-	}, [search_space_id, router]);
-
-	return null;
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/searxng/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/searxng/page.tsx
deleted file mode 100644
index aec72bbc7..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/searxng/page.tsx
+++ /dev/null
@@ -1,370 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-const searxngFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	host: z
-		.string({ required_error: "Host is required." })
-		.url({ message: "Enter a valid SearxNG host URL (e.g. https://searxng.example.org)." }),
-	api_key: z.string().optional(),
-	engines: z.string().optional(),
-	categories: z.string().optional(),
-	language: z.string().optional(),
-	safesearch: z
-		.string()
-		.regex(/^[0-2]?$/, { message: "SafeSearch must be 0, 1, or 2." })
-		.optional(),
-	verify_ssl: z.boolean().default(true),
-});
-
-type SearxngFormValues = z.infer<typeof searxngFormSchema>;
-
-const parseCommaSeparated = (value?: string | null) => {
-	if (!value) return undefined;
-	const items = value
-		.split(",")
-		.map((item) => item.trim())
-		.filter((item) => item.length > 0);
-	return items.length > 0 ? items : undefined;
-};
-
-export default function SearxngConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	const form = useForm<SearxngFormValues>({
-		resolver: zodResolver(searxngFormSchema),
-		defaultValues: {
-			name: "SearxNG Connector",
-			host: "",
-			api_key: "",
-			engines: "",
-			categories: "",
-			language: "",
-			safesearch: "",
-			verify_ssl: true,
-		},
-	});
-
-	const onSubmit = async (values: SearxngFormValues) => {
-		setIsSubmitting(true);
-		try {
-			const config: Record<string, unknown> = {
-				SEARXNG_HOST: values.host.trim(),
-			};
-
-			const apiKey = values.api_key?.trim();
-			if (apiKey) config.SEARXNG_API_KEY = apiKey;
-
-			const engines = parseCommaSeparated(values.engines);
-			if (engines) config.SEARXNG_ENGINES = engines;
-
-			const categories = parseCommaSeparated(values.categories);
-			if (categories) config.SEARXNG_CATEGORIES = categories;
-
-			const language = values.language?.trim();
-			if (language) config.SEARXNG_LANGUAGE = language;
-
-			const safesearch = values.safesearch?.trim();
-			if (safesearch) {
-				const parsed = Number(safesearch);
-				if (!Number.isNaN(parsed)) {
-					config.SEARXNG_SAFESEARCH = parsed;
-				}
-			}
-
-			// Include verify flag only when disabled to keep config minimal
-			if (values.verify_ssl === false) {
-				config.SEARXNG_VERIFY_SSL = false;
-			}
-
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.SEARXNG_API,
-					config,
-					is_indexable: false,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("SearxNG connector created successfully!");
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating SearxNG connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.SEARXNG_API, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect SearxNG</h1>
-						<p className="text-muted-foreground">
-							Bring your self-hosted SearxNG meta-search engine into SurfSense.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Card className="border-2 border-border">
-					<CardHeader>
-						<CardTitle className="text-2xl font-bold">Connect SearxNG</CardTitle>
-						<CardDescription>
-							Integrate SurfSense with any SearxNG instance to broaden your search coverage while
-							preserving privacy and control.
-						</CardDescription>
-					</CardHeader>
-					<CardContent>
-						<Alert className="mb-6 bg-muted">
-							<Info className="h-4 w-4" />
-							<AlertTitle>SearxNG Instance Required</AlertTitle>
-							<AlertDescription>
-								You need access to a running SearxNG instance. Refer to the{" "}
-								<a
-									href="https://docs.searxng.org/admin/installation-docker.html"
-									target="_blank"
-									rel="noreferrer"
-									className="font-medium underline underline-offset-4"
-								>
-									SearxNG installation guide
-								</a>{" "}
-								for setup instructions. If your instance requires an API key, include it below.
-							</AlertDescription>
-						</Alert>
-
-						<Form {...form}>
-							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-								<FormField
-									control={form.control}
-									name="name"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Connector Name</FormLabel>
-											<FormControl>
-												<Input placeholder="My SearxNG Connector" {...field} />
-											</FormControl>
-											<FormDescription>A friendly name to identify this connector.</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="host"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>SearxNG Host</FormLabel>
-											<FormControl>
-												<Input placeholder="https://searxng.example.org" {...field} />
-											</FormControl>
-											<FormDescription>
-												Provide the full base URL to your SearxNG instance. Include the protocol
-												(http/https).
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="api_key"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>API Key (optional)</FormLabel>
-											<FormControl>
-												<Input
-													type="password"
-													placeholder="Enter API key if your instance requires one"
-													{...field}
-												/>
-											</FormControl>
-											<FormDescription>
-												Leave empty if your SearxNG instance does not enforce API keys.
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-									<FormField
-										control={form.control}
-										name="engines"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Engines (optional)</FormLabel>
-												<FormControl>
-													<Input placeholder="google,bing,duckduckgo" {...field} />
-												</FormControl>
-												<FormDescription>
-													Comma-separated list to target specific engines.
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									<FormField
-										control={form.control}
-										name="categories"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Categories (optional)</FormLabel>
-												<FormControl>
-													<Input placeholder="general,it,science" {...field} />
-												</FormControl>
-												<FormDescription>
-													Comma-separated list of SearxNG categories.
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								</div>
-
-								<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-									<FormField
-										control={form.control}
-										name="language"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>Preferred Language (optional)</FormLabel>
-												<FormControl>
-													<Input placeholder="en-US" {...field} />
-												</FormControl>
-												<FormDescription>
-													IETF language tag (e.g. en, en-US). Leave blank to inherit defaults.
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-
-									<FormField
-										control={form.control}
-										name="safesearch"
-										render={({ field }) => (
-											<FormItem>
-												<FormLabel>SafeSearch Level (optional)</FormLabel>
-												<FormControl>
-													<Input placeholder="0 (off), 1 (moderate), 2 (strict)" {...field} />
-												</FormControl>
-												<FormDescription>
-													Set 0, 1, or 2 to adjust SafeSearch filtering. Leave blank to use the
-													instance default.
-												</FormDescription>
-												<FormMessage />
-											</FormItem>
-										)}
-									/>
-								</div>
-
-								<FormField
-									control={form.control}
-									name="verify_ssl"
-									render={({ field }) => (
-										<FormItem className="flex items-center justify-between rounded-lg border p-4">
-											<div>
-												<FormLabel>Verify SSL Certificates</FormLabel>
-												<FormDescription>
-													Disable only when connecting to instances with self-signed certificates.
-												</FormDescription>
-											</div>
-											<FormControl>
-												<Switch checked={field.value} onCheckedChange={field.onChange} />
-											</FormControl>
-										</FormItem>
-									)}
-								/>
-
-								<CardFooter className="flex justify-end px-0">
-									<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-										{isSubmitting ? (
-											<>
-												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-												Connecting...
-											</>
-										) : (
-											<>
-												<Check className="mr-2 h-4 w-4" />
-												Connect SearxNG
-											</>
-										)}
-									</Button>
-								</CardFooter>
-							</form>
-						</Form>
-					</CardContent>
-				</Card>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/slack-connector/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/slack-connector/page.tsx
deleted file mode 100644
index f3cf2ca6c..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/slack-connector/page.tsx
+++ /dev/null
@@ -1,421 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import {
-	Accordion,
-	AccordionContent,
-	AccordionItem,
-	AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const slackConnectorFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	bot_token: z.string().min(10, {
-		message: "Bot User OAuth Token is required and must be valid.",
-	}),
-});
-
-// Define the type for the form values
-type SlackConnectorFormValues = z.infer<typeof slackConnectorFormSchema>;
-
-export default function SlackConnectorPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<SlackConnectorFormValues>({
-		resolver: zodResolver(slackConnectorFormSchema),
-		defaultValues: {
-			name: "Slack Connector",
-			bot_token: "",
-		},
-	});
-
-	// Handle form submission
-	const onSubmit = async (values: SlackConnectorFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.SLACK_CONNECTOR,
-					config: {
-						SLACK_BOT_TOKEN: values.bot_token,
-					},
-					is_indexable: true,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Slack connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect Slack</h1>
-						<p className="text-muted-foreground">
-							Connect your Slack workspace to search messages and channels.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Tabs defaultValue="connect" className="w-full">
-					<TabsList className="grid w-full grid-cols-2 mb-6">
-						<TabsTrigger value="connect">Connect</TabsTrigger>
-						<TabsTrigger value="documentation">Documentation</TabsTrigger>
-					</TabsList>
-
-					<TabsContent value="connect">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">Connect Slack Workspace</CardTitle>
-								<CardDescription>
-									Integrate with Slack to search and retrieve information from your workspace
-									channels and conversations. This connector can index your Slack messages for
-									search.
-								</CardDescription>
-							</CardHeader>
-							<CardContent>
-								<Alert className="mb-6 bg-muted">
-									<Info className="h-4 w-4" />
-									<AlertTitle>Bot User OAuth Token Required</AlertTitle>
-									<AlertDescription>
-										You'll need a Slack Bot User OAuth Token to use this connector. You can create a
-										Slack app and get the token from{" "}
-										<a
-											href="https://api.slack.com/apps"
-											target="_blank"
-											rel="noopener noreferrer"
-											className="font-medium underline underline-offset-4"
-										>
-											Slack API Dashboard
-										</a>
-									</AlertDescription>
-								</Alert>
-
-								<Form {...form}>
-									<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-										<FormField
-											control={form.control}
-											name="name"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Connector Name</FormLabel>
-													<FormControl>
-														<Input placeholder="My Slack Connector" {...field} />
-													</FormControl>
-													<FormDescription>
-														A friendly name to identify this connector.
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<FormField
-											control={form.control}
-											name="bot_token"
-											render={({ field }) => (
-												<FormItem>
-													<FormLabel>Slack Bot User OAuth Token</FormLabel>
-													<FormControl>
-														<Input type="password" placeholder="xoxb-..." {...field} />
-													</FormControl>
-													<FormDescription>
-														Your Bot User OAuth Token will be encrypted and stored securely. It
-														typically starts with "xoxb-".
-													</FormDescription>
-													<FormMessage />
-												</FormItem>
-											)}
-										/>
-
-										<div className="flex justify-end">
-											<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-												{isSubmitting ? (
-													<>
-														<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-														Connecting...
-													</>
-												) : (
-													<>
-														<Check className="mr-2 h-4 w-4" />
-														Connect Slack
-													</>
-												)}
-											</Button>
-										</div>
-									</form>
-								</Form>
-							</CardContent>
-							<CardFooter className="flex flex-col items-start border-t bg-muted/50 px-6 py-4">
-								<h4 className="text-sm font-medium">What you get with Slack integration:</h4>
-								<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
-									<li>Search through your Slack channels and conversations</li>
-									<li>Access historical messages and shared files</li>
-									<li>Connect your team's knowledge directly to your search space</li>
-									<li>Keep your search results up-to-date with latest communications</li>
-									<li>Index your Slack messages for enhanced search capabilities</li>
-								</ul>
-							</CardFooter>
-						</Card>
-					</TabsContent>
-
-					<TabsContent value="documentation">
-						<Card className="border-2 border-border">
-							<CardHeader>
-								<CardTitle className="text-2xl font-bold">Slack Connector Documentation</CardTitle>
-								<CardDescription>
-									Learn how to set up and use the Slack connector to index your workspace data.
-								</CardDescription>
-							</CardHeader>
-							<CardContent className="space-y-6">
-								<div>
-									<h3 className="text-xl font-semibold mb-2">How it works</h3>
-									<p className="text-muted-foreground">
-										The Slack connector indexes all public channels for a given workspace.
-									</p>
-									<ul className="mt-2 list-disc pl-5 text-muted-foreground">
-										<li>
-											Upcoming: Support for private channels by tagging/adding the Slack Bot to
-											private channels.
-										</li>
-									</ul>
-								</div>
-
-								<Accordion type="single" collapsible className="w-full">
-									<AccordionItem value="authorization">
-										<AccordionTrigger className="text-lg font-medium">
-											Authorization
-										</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>Admin Access Required</AlertTitle>
-												<AlertDescription>
-													You must be an admin of the Slack workspace to set up the connector.
-												</AlertDescription>
-											</Alert>
-
-											<ol className="list-decimal pl-5 space-y-3">
-												<li>
-													Navigate and sign in to{" "}
-													<a
-														href="https://api.slack.com/apps"
-														target="_blank"
-														rel="noopener noreferrer"
-														className="font-medium underline underline-offset-4"
-													>
-														https://api.slack.com/apps
-													</a>
-													.
-												</li>
-												<li>
-													Create a new Slack app:
-													<ul className="list-disc pl-5 mt-1">
-														<li>
-															Click the <strong>Create New App</strong> button in the top right.
-														</li>
-														<li>
-															Select <strong>From an app manifest</strong> option.
-														</li>
-														<li>
-															Select the relevant workspace from the dropdown and click{" "}
-															<strong>Next</strong>.
-														</li>
-													</ul>
-												</li>
-												<li>
-													Select the "YAML" tab, paste the following manifest into the text box, and
-													click <strong>Next</strong>:
-													<div className="bg-muted p-4 rounded-md mt-2 overflow-x-auto">
-														<pre className="text-xs">
-															{`display_information:
-  name: SlackConnector
-  description: ReadOnly Connector for indexing
-features:
-  bot_user:
-    display_name: SlackConnector
-    always_online: false
-oauth_config:
-  scopes:
-    bot:
-      - channels:history
-      - channels:read
-      - groups:history
-      - groups:read
-      - channels:join
-      - im:history
-      - users:read
-      - users:read.email
-      - usergroups:read
-settings:
-  org_deploy_enabled: false
-  socket_mode_enabled: false
-  token_rotation_enabled: false`}
-														</pre>
-													</div>
-												</li>
-												<li>
-													Click the <strong>Create</strong> button.
-												</li>
-												<li>
-													In the app page, navigate to the <strong>OAuth & Permissions</strong> tab
-													under the <strong>Features</strong> header.
-												</li>
-												<li>
-													Copy the <strong>Bot User OAuth Token</strong>, this will be used to
-													access Slack.
-												</li>
-											</ol>
-										</AccordionContent>
-									</AccordionItem>
-
-									<AccordionItem value="indexing">
-										<AccordionTrigger className="text-lg font-medium">Indexing</AccordionTrigger>
-										<AccordionContent className="space-y-4">
-											<ol className="list-decimal pl-5 space-y-3">
-												<li>
-													Navigate to the Connector Dashboard and select the <strong>Slack</strong>{" "}
-													Connector.
-												</li>
-												<li>
-													Place the <strong>Bot User OAuth Token</strong> under{" "}
-													<strong>Step 1 Provide Credentials</strong>.
-												</li>
-												<li>
-													Click <strong>Connect</strong> to establish the connection.
-												</li>
-											</ol>
-
-											<Alert className="bg-muted">
-												<Info className="h-4 w-4" />
-												<AlertTitle>Important: Invite Bot to Channels</AlertTitle>
-												<AlertDescription>
-													After connecting, you must invite the bot to each channel you want to
-													index. In each Slack channel, type:
-													<pre className="mt-2 bg-background p-2 rounded-md text-xs">
-														/invite @YourBotName
-													</pre>
-													<p className="mt-2">
-														Without this step, you'll get a "not_in_channel" error when the
-														connector tries to access channel messages.
-													</p>
-												</AlertDescription>
-											</Alert>
-
-											<Alert className="bg-muted mt-4">
-												<Info className="h-4 w-4" />
-												<AlertTitle>First Indexing</AlertTitle>
-												<AlertDescription>
-													The first indexing pulls all of the public channels and takes longer than
-													future updates. Only channels where the bot has been invited will be fully
-													indexed.
-												</AlertDescription>
-											</Alert>
-
-											<div className="mt-4">
-												<h4 className="font-medium mb-2">Troubleshooting:</h4>
-												<ul className="list-disc pl-5 space-y-2 text-muted-foreground">
-													<li>
-														<strong>not_in_channel error:</strong> If you see this error in logs, it
-														means the bot hasn't been invited to a channel it's trying to access.
-														Use the <code>/invite @YourBotName</code> command in that channel.
-													</li>
-													<li>
-														<strong>Alternative approach:</strong> You can add the{" "}
-														<code>chat:write.public</code> scope to your Slack app to allow it to
-														access public channels without an explicit invitation.
-													</li>
-													<li>
-														<strong>For private channels:</strong> The bot must always be invited
-														using the <code>/invite</code> command.
-													</li>
-												</ul>
-											</div>
-										</AccordionContent>
-									</AccordionItem>
-								</Accordion>
-							</CardContent>
-						</Card>
-					</TabsContent>
-				</Tabs>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/tavily-api/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/connectors/add/tavily-api/page.tsx
deleted file mode 100644
index a9ddd5a41..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/connectors/add/tavily-api/page.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-"use client";
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useAtomValue } from "jotai";
-import { ArrowLeft, Check, Info, Loader2 } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { toast } from "sonner";
-import * as z from "zod";
-import { createConnectorMutationAtom } from "@/atoms/connectors/connector-mutation.atoms";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-
-// Define the form schema with Zod
-const tavilyApiFormSchema = z.object({
-	name: z.string().min(3, {
-		message: "Connector name must be at least 3 characters.",
-	}),
-	api_key: z.string().min(10, {
-		message: "API key is required and must be valid.",
-	}),
-});
-
-// Define the type for the form values
-type TavilyApiFormValues = z.infer<typeof tavilyApiFormSchema>;
-
-export default function TavilyApiPage() {
-	const router = useRouter();
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const { mutateAsync: createConnector } = useAtomValue(createConnectorMutationAtom);
-
-	// Initialize the form
-	const form = useForm<TavilyApiFormValues>({
-		resolver: zodResolver(tavilyApiFormSchema),
-		defaultValues: {
-			name: "Tavily API Connector",
-			api_key: "",
-		},
-	});
-
-	// Handle form submission
-	const onSubmit = async (values: TavilyApiFormValues) => {
-		setIsSubmitting(true);
-		try {
-			await createConnector({
-				data: {
-					name: values.name,
-					connector_type: EnumConnectorName.TAVILY_API,
-					config: {
-						TAVILY_API_KEY: values.api_key,
-					},
-					is_indexable: false,
-					last_indexed_at: null,
-					periodic_indexing_enabled: false,
-					indexing_frequency_minutes: null,
-					next_scheduled_at: null,
-				},
-				queryParams: {
-					search_space_id: searchSpaceId,
-				},
-			});
-
-			toast.success("Tavily API connector created successfully!");
-
-			// Navigate back to connectors page
-			router.push(`/dashboard/${searchSpaceId}/connectors`);
-		} catch (error) {
-			console.error("Error creating connector:", error);
-			toast.error(error instanceof Error ? error.message : "Failed to create connector");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	return (
-		<div className="container mx-auto py-8 max-w-3xl">
-			<Button
-				variant="ghost"
-				className="mb-6"
-				onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
-			>
-				<ArrowLeft className="mr-2 h-4 w-4" />
-				Back to Connectors
-			</Button>
-
-			{/* Header */}
-			<div className="mb-8">
-				<div className="flex items-center gap-4">
-					<div className="flex h-12 w-12 items-center justify-center rounded-lg">
-						{getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6")}
-					</div>
-					<div>
-						<h1 className="text-3xl font-bold tracking-tight">Connect Tavily API</h1>
-						<p className="text-muted-foreground">
-							Connect Tavily API for AI-powered search capabilities.
-						</p>
-					</div>
-				</div>
-			</div>
-
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-			>
-				<Card className="border-2 border-border">
-					<CardHeader>
-						<CardTitle className="text-2xl font-bold">Connect Tavily API</CardTitle>
-						<CardDescription>
-							Integrate with Tavily API to enhance your search capabilities with AI-powered search
-							results.
-						</CardDescription>
-					</CardHeader>
-					<CardContent>
-						<Alert className="mb-6 bg-muted">
-							<Info className="h-4 w-4" />
-							<AlertTitle>API Key Required</AlertTitle>
-							<AlertDescription>
-								You'll need a Tavily API key to use this connector. You can get one by signing up at{" "}
-								<a
-									href="https://tavily.com"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="font-medium underline underline-offset-4"
-								>
-									tavily.com
-								</a>
-							</AlertDescription>
-						</Alert>
-
-						<Form {...form}>
-							<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
-								<FormField
-									control={form.control}
-									name="name"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Connector Name</FormLabel>
-											<FormControl>
-												<Input placeholder="My Tavily API Connector" {...field} />
-											</FormControl>
-											<FormDescription>A friendly name to identify this connector.</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<FormField
-									control={form.control}
-									name="api_key"
-									render={({ field }) => (
-										<FormItem>
-											<FormLabel>Tavily API Key</FormLabel>
-											<FormControl>
-												<Input type="password" placeholder="Enter your Tavily API key" {...field} />
-											</FormControl>
-											<FormDescription>
-												Your API key will be encrypted and stored securely.
-											</FormDescription>
-											<FormMessage />
-										</FormItem>
-									)}
-								/>
-
-								<div className="flex justify-end">
-									<Button type="submit" disabled={isSubmitting} className="w-full sm:w-auto">
-										{isSubmitting ? (
-											<>
-												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-												Connecting...
-											</>
-										) : (
-											<>
-												<Check className="mr-2 h-4 w-4" />
-												Connect Tavily API
-											</>
-										)}
-									</Button>
-								</div>
-							</form>
-						</Form>
-					</CardContent>
-					<CardFooter className="flex flex-col items-start border-t bg-muted/50 px-6 py-4">
-						<h4 className="text-sm font-medium">What you get with Tavily API:</h4>
-						<ul className="mt-2 list-disc pl-5 text-sm text-muted-foreground">
-							<li>AI-powered search results tailored to your queries</li>
-							<li>Real-time information from the web</li>
-							<li>Enhanced search capabilities for your projects</li>
-						</ul>
-					</CardFooter>
-				</Card>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
index 11e862944..8964ef3d6 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx
@@ -137,19 +137,19 @@ export function DocumentsTableShell({
 						<div className="rounded-full bg-muted p-4">
 							<FileX className="h-8 w-8 text-muted-foreground" />
 						</div>
-						<div className="space-y-2">
-							<h3 className="text-lg font-semibold">{t("no_documents")}</h3>
-							<p className="text-sm text-muted-foreground">
-								Get started by adding your first data source.
-							</p>
-						</div>
-						<Button
-							onClick={() => router.push(`/dashboard/${searchSpaceId}/sources/add`)}
-							className="mt-2"
-						>
-							<Plus className="mr-2 h-4 w-4" />
-							Add Sources
-						</Button>
+					<div className="space-y-2">
+						<h3 className="text-lg font-semibold">{t("no_documents")}</h3>
+						<p className="text-sm text-muted-foreground">
+							Get started by uploading your first document.
+						</p>
+					</div>
+					<Button
+						onClick={() => router.push(`/dashboard/${searchSpaceId}/documents/upload`)}
+						className="mt-2"
+					>
+						<Plus className="mr-2 h-4 w-4" />
+						Upload Documents
+					</Button>
 					</motion.div>
 				</div>
 			) : (
diff --git a/surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx
deleted file mode 100644
index 239fdc5c1..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx
+++ /dev/null
@@ -1,520 +0,0 @@
-"use client";
-
-import { useQueryClient } from "@tanstack/react-query";
-import { useAtom } from "jotai";
-import { AlertCircle, ArrowLeft, FileText, Loader2, Save } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams, useRouter } from "next/navigation";
-import { useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
-import { hasUnsavedEditorChangesAtom, pendingEditorNavigationAtom } from "@/atoms/editor/ui.atoms";
-import { BlockNoteEditor } from "@/components/DynamicBlockNoteEditor";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { notesApiService } from "@/lib/apis/notes-api.service";
-import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
-
-// BlockNote types
-type BlockNoteInlineContent =
-	| string
-	| { text?: string; type?: string; styles?: Record<string, unknown> };
-
-interface BlockNoteBlock {
-	type: string;
-	content?: BlockNoteInlineContent[];
-	children?: BlockNoteBlock[];
-	props?: Record<string, unknown>;
-}
-
-type BlockNoteDocument = BlockNoteBlock[] | null | undefined;
-
-interface EditorContent {
-	document_id: number;
-	title: string;
-	document_type?: string;
-	blocknote_document: BlockNoteDocument;
-	updated_at: string | null;
-}
-
-// Helper function to extract title from BlockNote document
-// Takes the text content from the first block (should be a heading for notes)
-function extractTitleFromBlockNote(blocknoteDocument: BlockNoteDocument): string {
-	if (!blocknoteDocument || !Array.isArray(blocknoteDocument) || blocknoteDocument.length === 0) {
-		return "Untitled";
-	}
-
-	const firstBlock = blocknoteDocument[0];
-	if (!firstBlock) {
-		return "Untitled";
-	}
-
-	// Extract text from block content
-	// BlockNote blocks have a content array with inline content
-	if (firstBlock.content && Array.isArray(firstBlock.content)) {
-		const textContent = firstBlock.content
-			.map((item: BlockNoteInlineContent) => {
-				if (typeof item === "string") return item;
-				if (typeof item === "object" && item?.text) return item.text;
-				return "";
-			})
-			.join("")
-			.trim();
-		return textContent || "Untitled";
-	}
-
-	return "Untitled";
-}
-
-export default function EditorPage() {
-	const params = useParams();
-	const router = useRouter();
-	const queryClient = useQueryClient();
-	const documentId = params.documentId as string;
-	const searchSpaceId = Number(params.search_space_id);
-	const isNewNote = documentId === "new";
-
-	const [document, setDocument] = useState<EditorContent | null>(null);
-	const [loading, setLoading] = useState(true);
-	const [saving, setSaving] = useState(false);
-	const [editorContent, setEditorContent] = useState<BlockNoteDocument>(null);
-	const [error, setError] = useState<string | null>(null);
-	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-	const [showUnsavedDialog, setShowUnsavedDialog] = useState(false);
-
-	// Global state for cross-component communication
-	const [, setGlobalHasUnsavedChanges] = useAtom(hasUnsavedEditorChangesAtom);
-	const [pendingNavigation, setPendingNavigation] = useAtom(pendingEditorNavigationAtom);
-
-	// Sync local unsaved changes state with global atom
-	useEffect(() => {
-		setGlobalHasUnsavedChanges(hasUnsavedChanges);
-	}, [hasUnsavedChanges, setGlobalHasUnsavedChanges]);
-
-	// Cleanup global state when component unmounts
-	useEffect(() => {
-		return () => {
-			setGlobalHasUnsavedChanges(false);
-			setPendingNavigation(null);
-		};
-	}, [setGlobalHasUnsavedChanges, setPendingNavigation]);
-
-	// Handle pending navigation from sidebar (e.g., when user clicks "+" to create new note)
-	useEffect(() => {
-		if (pendingNavigation) {
-			if (hasUnsavedChanges) {
-				// Show dialog to confirm navigation
-				setShowUnsavedDialog(true);
-			} else {
-				// No unsaved changes, navigate immediately
-				router.push(pendingNavigation);
-				setPendingNavigation(null);
-			}
-		}
-	}, [pendingNavigation, hasUnsavedChanges, router, setPendingNavigation]);
-
-	// Reset state when documentId changes (e.g., navigating from existing note to new note)
-	useEffect(() => {
-		setDocument(null);
-		setEditorContent(null);
-		setError(null);
-		setHasUnsavedChanges(false);
-		setLoading(true);
-	}, []);
-
-	// Fetch document content - DIRECT CALL TO FASTAPI
-	// Skip fetching if this is a new note
-	useEffect(() => {
-		async function fetchDocument() {
-			// For new notes, initialize with empty state
-			if (isNewNote) {
-				setDocument({
-					document_id: 0,
-					title: "Untitled",
-					document_type: "NOTE",
-					blocknote_document: null,
-					updated_at: null,
-				});
-				setEditorContent(null);
-				setLoading(false);
-				return;
-			}
-
-			const token = getBearerToken();
-			if (!token) {
-				console.error("No auth token found");
-				// Redirect to login with current path saved
-				redirectToLogin();
-				return;
-			}
-
-			try {
-				const response = await authenticatedFetch(
-					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${params.search_space_id}/documents/${documentId}/editor-content`,
-					{ method: "GET" }
-				);
-
-				if (!response.ok) {
-					const errorData = await response
-						.json()
-						.catch(() => ({ detail: "Failed to fetch document" }));
-					const errorMessage = errorData.detail || "Failed to fetch document";
-					throw new Error(errorMessage);
-				}
-
-				const data = await response.json();
-
-				// Check if blocknote_document exists
-				if (!data.blocknote_document) {
-					const errorMsg =
-						"This document does not have BlockNote content. Please re-upload the document to enable editing.";
-					setError(errorMsg);
-					setLoading(false);
-					return;
-				}
-
-				setDocument(data);
-				setEditorContent(data.blocknote_document);
-				setError(null);
-			} catch (error) {
-				console.error("Error fetching document:", error);
-				const errorMessage =
-					error instanceof Error ? error.message : "Failed to fetch document. Please try again.";
-				setError(errorMessage);
-			} finally {
-				setLoading(false);
-			}
-		}
-
-		if (documentId) {
-			fetchDocument();
-		}
-	}, [documentId, params.search_space_id, isNewNote]);
-
-	// Track changes to mark as unsaved
-	useEffect(() => {
-		if (editorContent && document) {
-			setHasUnsavedChanges(true);
-		}
-	}, [editorContent, document]);
-
-	// Check if this is a NOTE type document
-	const isNote = isNewNote || document?.document_type === "NOTE";
-
-	// Extract title dynamically from editor content for notes, otherwise use document title
-	const displayTitle = useMemo(() => {
-		if (isNote && editorContent) {
-			return extractTitleFromBlockNote(editorContent);
-		}
-		return document?.title || "Untitled";
-	}, [isNote, editorContent, document?.title]);
-
-	// TODO: Maybe add Auto-save every 30 seconds - DIRECT CALL TO FASTAPI
-
-	// Save and exit - DIRECT CALL TO FASTAPI
-	// For new notes, create the note first, then save
-	const handleSave = async () => {
-		const token = getBearerToken();
-		if (!token) {
-			toast.error("Please login to save");
-			redirectToLogin();
-			return;
-		}
-
-		setSaving(true);
-		setError(null);
-
-		try {
-			// If this is a new note, create it first
-			if (isNewNote) {
-				const title = extractTitleFromBlockNote(editorContent);
-
-				// Create the note first
-				const note = await notesApiService.createNote({
-					search_space_id: searchSpaceId,
-					title: title,
-					blocknote_document: editorContent || undefined,
-				});
-
-				// If there's content, save it properly and trigger reindexing
-				if (editorContent) {
-					const response = await authenticatedFetch(
-						`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${note.id}/save`,
-						{
-							method: "POST",
-							headers: { "Content-Type": "application/json" },
-							body: JSON.stringify({ blocknote_document: editorContent }),
-						}
-					);
-
-					if (!response.ok) {
-						const errorData = await response
-							.json()
-							.catch(() => ({ detail: "Failed to save document" }));
-						throw new Error(errorData.detail || "Failed to save document");
-					}
-				}
-
-				setHasUnsavedChanges(false);
-				toast.success("Note created successfully! Reindexing in background...");
-
-				// Invalidate notes query to refresh the sidebar
-				queryClient.invalidateQueries({
-					queryKey: ["notes", String(searchSpaceId)],
-				});
-
-				// Update URL to reflect the new document ID without navigation
-				window.history.replaceState({}, "", `/dashboard/${searchSpaceId}/editor/${note.id}`);
-				// Update document state to reflect the new ID
-				setDocument({
-					document_id: note.id,
-					title: title,
-					document_type: "NOTE",
-					blocknote_document: editorContent,
-					updated_at: new Date().toISOString(),
-				});
-			} else {
-				// Existing document - save normally
-				if (!editorContent) {
-					toast.error("No content to save");
-					setSaving(false);
-					return;
-				}
-
-				// Save blocknote_document and trigger reindexing in background
-				const response = await authenticatedFetch(
-					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${params.search_space_id}/documents/${documentId}/save`,
-					{
-						method: "POST",
-						headers: { "Content-Type": "application/json" },
-						body: JSON.stringify({ blocknote_document: editorContent }),
-					}
-				);
-
-				if (!response.ok) {
-					const errorData = await response
-						.json()
-						.catch(() => ({ detail: "Failed to save document" }));
-					throw new Error(errorData.detail || "Failed to save document");
-				}
-
-				setHasUnsavedChanges(false);
-				toast.success("Document saved! Reindexing in background...");
-
-				// Invalidate notes query when updating notes to refresh the sidebar
-				if (isNote) {
-					queryClient.invalidateQueries({
-						queryKey: ["notes", String(searchSpaceId)],
-					});
-				}
-			}
-		} catch (error) {
-			console.error("Error saving document:", error);
-			const errorMessage =
-				error instanceof Error
-					? error.message
-					: isNewNote
-						? "Failed to create note. Please try again."
-						: "Failed to save document. Please try again.";
-			setError(errorMessage);
-			toast.error(errorMessage);
-		} finally {
-			setSaving(false);
-		}
-	};
-
-	const handleBack = () => {
-		if (hasUnsavedChanges) {
-			setShowUnsavedDialog(true);
-		} else {
-			router.push(`/dashboard/${searchSpaceId}/new-chat`);
-		}
-	};
-
-	const handleConfirmLeave = () => {
-		setShowUnsavedDialog(false);
-		// Clear global unsaved state
-		setGlobalHasUnsavedChanges(false);
-		setHasUnsavedChanges(false);
-
-		// If there's a pending navigation (from sidebar), use that; otherwise go back to chat
-		if (pendingNavigation) {
-			router.push(pendingNavigation);
-			setPendingNavigation(null);
-		} else {
-			router.push(`/dashboard/${searchSpaceId}/new-chat`);
-		}
-	};
-
-	const handleCancelLeave = () => {
-		setShowUnsavedDialog(false);
-		// Clear pending navigation if user cancels
-		setPendingNavigation(null);
-	};
-
-	if (loading) {
-		return (
-			<div className="flex items-center justify-center min-h-[400px] p-6">
-				<Card className="w-full max-w-md">
-					<CardContent className="flex flex-col items-center justify-center py-12">
-						<Loader2 className="h-12 w-12 text-primary animate-spin mb-4" />
-						<p className="text-muted-foreground">Loading editor...</p>
-					</CardContent>
-				</Card>
-			</div>
-		);
-	}
-
-	if (error) {
-		return (
-			<div className="flex items-center justify-center min-h-[400px] p-6">
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					animate={{ opacity: 1, y: 0 }}
-					className="w-full max-w-md"
-				>
-					<Card className="border-destructive/50">
-						<CardHeader>
-							<div className="flex items-center gap-2">
-								<AlertCircle className="h-5 w-5 text-destructive" />
-								<CardTitle className="text-destructive">Error</CardTitle>
-							</div>
-							<CardDescription>{error}</CardDescription>
-						</CardHeader>
-						<CardContent>
-							<Button
-								onClick={() => router.push(`/dashboard/${searchSpaceId}/new-chat`)}
-								variant="outline"
-								className="gap-2"
-							>
-								<ArrowLeft className="h-4 w-4" />
-								Back
-							</Button>
-						</CardContent>
-					</Card>
-				</motion.div>
-			</div>
-		);
-	}
-
-	if (!document && !isNewNote) {
-		return (
-			<div className="flex items-center justify-center min-h-[400px] p-6">
-				<Card className="w-full max-w-md">
-					<CardContent className="flex flex-col items-center justify-center py-12">
-						<FileText className="h-12 w-12 text-muted-foreground mb-4" />
-						<p className="text-muted-foreground">Document not found</p>
-					</CardContent>
-				</Card>
-			</div>
-		);
-	}
-
-	return (
-		<motion.div
-			initial={{ opacity: 0 }}
-			animate={{ opacity: 1 }}
-			className="flex flex-col min-h-screen w-full"
-		>
-			{/* Toolbar */}
-			<div className="sticky top-0 z-40 flex h-14 md:h-16 shrink-0 items-center gap-2 md:gap-4 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-3 md:px-6">
-				<div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">
-					<FileText className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground shrink-0" />
-					<div className="flex flex-col min-w-0">
-						<h1 className="text-base md:text-lg font-semibold truncate">{displayTitle}</h1>
-						{hasUnsavedChanges && (
-							<p className="text-[10px] md:text-xs text-muted-foreground">Unsaved changes</p>
-						)}
-					</div>
-				</div>
-
-				<div className="flex items-center gap-2">
-					<Button
-						variant="outline"
-						onClick={handleBack}
-						disabled={saving}
-						className="gap-1 md:gap-2 px-2 md:px-4 h-8 md:h-10"
-					>
-						<ArrowLeft className="h-3.5 w-3.5 md:h-4 md:w-4" />
-						<span className="text-xs md:text-sm">Back</span>
-					</Button>
-					<Button
-						onClick={handleSave}
-						disabled={saving}
-						className="gap-1 md:gap-2 px-2 md:px-4 h-8 md:h-10"
-					>
-						{saving ? (
-							<>
-								<Loader2 className="h-3.5 w-3.5 md:h-4 md:w-4 animate-spin" />
-								<span className="text-xs md:text-sm">
-									{isNewNote ? "Creating..." : "Saving..."}
-								</span>
-							</>
-						) : (
-							<>
-								<Save className="h-3.5 w-3.5 md:h-4 md:w-4" />
-								<span className="text-xs md:text-sm">Save</span>
-							</>
-						)}
-					</Button>
-				</div>
-			</div>
-
-			{/* Editor Container */}
-			<div className="flex-1 min-h-0 overflow-hidden relative">
-				<div className="h-full w-full overflow-auto p-3 md:p-6">
-					{error && (
-						<motion.div
-							initial={{ opacity: 0, y: -10 }}
-							animate={{ opacity: 1, y: 0 }}
-							className="mb-6 max-w-4xl mx-auto"
-						>
-							<div className="flex items-center gap-2 p-4 rounded-lg border border-destructive/50 bg-destructive/10 text-destructive">
-								<AlertCircle className="h-5 w-5 shrink-0" />
-								<p className="text-sm">{error}</p>
-							</div>
-						</motion.div>
-					)}
-					<div className="max-w-4xl mx-auto">
-						<BlockNoteEditor
-							key={documentId} // Force re-mount when document changes
-							initialContent={isNewNote ? undefined : editorContent}
-							onChange={setEditorContent}
-							useTitleBlock={isNote}
-						/>
-					</div>
-				</div>
-			</div>
-
-			{/* Unsaved Changes Dialog */}
-			<AlertDialog
-				open={showUnsavedDialog}
-				onOpenChange={(open) => {
-					if (!open) handleCancelLeave();
-				}}
-			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Unsaved Changes</AlertDialogTitle>
-						<AlertDialogDescription>
-							You have unsaved changes. Are you sure you want to leave?
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel onClick={handleCancelLeave}>Cancel</AlertDialogCancel>
-						<AlertDialogAction onClick={handleConfirmLeave}>OK</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
-		</motion.div>
-	);
-}
diff --git a/surfsense_web/app/dashboard/[search_space_id]/layout.tsx b/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
index ce2c778c5..a44592ab2 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/layout.tsx
@@ -38,10 +38,6 @@ export default function DashboardLayout({
 			url: "#",
 			icon: "Database",
 			items: [
-				{
-					title: "Add Sources",
-					url: `/dashboard/${search_space_id}/sources/add`,
-				},
 				{
 					title: "Manage Documents",
 					url: `/dashboard/${search_space_id}/documents`,
diff --git a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
deleted file mode 100644
index 55c6e2ff8..000000000
--- a/surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-"use client";
-
-import { Database } from "lucide-react";
-import { motion } from "motion/react";
-import { useParams } from "next/navigation";
-import { ConnectorsTab } from "@/components/sources/ConnectorsTab";
-
-export default function AddSourcesPage() {
-	const params = useParams();
-	const search_space_id = params.search_space_id as string;
-
-	return (
-		<div className="container mx-auto py-8 px-4 min-h-[calc(100vh-64px)]">
-			<motion.div
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				transition={{ duration: 0.5 }}
-				className="space-y-6"
-			>
-				{/* Header */}
-				<div className="text-center space-y-2">
-					<h1 className="text-2xl sm:text-4xl font-bold tracking-tight flex items-center justify-center gap-3">
-						<Database className="h-6 w-6 sm:h-8 sm:w-8" />
-						Add Sources
-					</h1>
-					<p className="text-muted-foreground text-sm sm:text-lg">
-						Add your sources to your search space
-					</p>
-				</div>
-
-				{/* Connectors */}
-				<div className="mt-8">
-					<ConnectorsTab searchSpaceId={search_space_id} />
-				</div>
-			</motion.div>
-		</div>
-	);
-}
diff --git a/surfsense_web/components/dashboard-breadcrumb.tsx b/surfsense_web/components/dashboard-breadcrumb.tsx
index 62cef7d6f..99854d25f 100644
--- a/surfsense_web/components/dashboard-breadcrumb.tsx
+++ b/surfsense_web/components/dashboard-breadcrumb.tsx
@@ -98,7 +98,6 @@ export function DashboardBreadcrumb() {
 					"new-chat": t("chat") || "Chat",
 					documents: t("documents"),
 					connectors: t("connectors"),
-					sources: "Sources",
 					logs: t("logs"),
 					settings: t("settings"),
 					editor: t("editor"),
@@ -132,21 +131,6 @@ export function DashboardBreadcrumb() {
 						return breadcrumbs;
 					}
 
-					// Handle sources sub-sections
-					if (section === "sources") {
-						const sourceLabels: Record<string, string> = {
-							add: "Add Sources",
-						};
-
-						const sourceLabel = sourceLabels[subSection] || subSection;
-						breadcrumbs.push({
-							label: "Sources",
-							href: `/dashboard/${segments[1]}/sources`,
-						});
-						breadcrumbs.push({ label: sourceLabel });
-						return breadcrumbs;
-					}
-
 					// Handle documents sub-sections
 					if (section === "documents") {
 						const documentLabels: Record<string, string> = {
@@ -257,7 +241,7 @@ export function DashboardBreadcrumb() {
 		<Breadcrumb>
 			<BreadcrumbList>
 				{breadcrumbs.map((item, index) => (
-					<React.Fragment key={index}>
+					<React.Fragment key={item.href || item.label}>
 						<BreadcrumbItem>
 							{index === breadcrumbs.length - 1 ? (
 								<BreadcrumbPage>{item.label}</BreadcrumbPage>
diff --git a/surfsense_web/components/sidebar/app-sidebar.tsx b/surfsense_web/components/sidebar/app-sidebar.tsx
index 63101f2de..7193a67d0 100644
--- a/surfsense_web/components/sidebar/app-sidebar.tsx
+++ b/surfsense_web/components/sidebar/app-sidebar.tsx
@@ -169,10 +169,6 @@ const defaultData = {
 			url: "#",
 			icon: "Database",
 			items: [
-				{
-					title: "Add Sources",
-					url: "#",
-				},
 				{
 					title: "Manage Documents",
 					url: "#",
diff --git a/surfsense_web/components/sidebar/nav-main.tsx b/surfsense_web/components/sidebar/nav-main.tsx
index 420b1e172..404e9f083 100644
--- a/surfsense_web/components/sidebar/nav-main.tsx
+++ b/surfsense_web/components/sidebar/nav-main.tsx
@@ -44,7 +44,6 @@ export function NavMain({ items, onSourcesExpandedChange }: NavMainProps) {
 			Researcher: "researcher",
 			"Manage LLMs": "manage_llms",
 			Sources: "sources",
-			"Add Sources": "add_sources",
 			"Manage Documents": "manage_documents",
 			"Manage Connectors": "manage_connectors",
 			Podcasts: "podcasts",
diff --git a/surfsense_web/components/sources/ConnectorsTab.tsx b/surfsense_web/components/sources/ConnectorsTab.tsx
deleted file mode 100644
index 622780e2f..000000000
--- a/surfsense_web/components/sources/ConnectorsTab.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-"use client";
-
-import { IconChevronDown, IconChevronRight } from "@tabler/icons-react";
-import { AnimatePresence, motion, type Variants } from "motion/react";
-import Link from "next/link";
-import { useTranslations } from "next-intl";
-import { useState } from "react";
-
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
-import { connectorCategories } from "./connector-data";
-
-interface ConnectorsTabProps {
-	searchSpaceId: string;
-}
-
-export function ConnectorsTab({ searchSpaceId }: ConnectorsTabProps) {
-	const t = useTranslations("add_connector");
-	const [expandedCategories, setExpandedCategories] = useState<string[]>([
-		"web-search",
-		"messaging",
-		"project-management",
-		"documentation",
-		"development",
-		"databases",
-		"productivity",
-		"web-crawling",
-	]);
-
-	const toggleCategory = (categoryId: string) => {
-		setExpandedCategories((prev) =>
-			prev.includes(categoryId) ? prev.filter((id) => id !== categoryId) : [...prev, categoryId]
-		);
-	};
-
-	const cardVariants: Variants = {
-		hidden: { opacity: 0, y: 20 },
-		visible: {
-			opacity: 1,
-			y: 0,
-			transition: {
-				type: "spring",
-				stiffness: 260,
-				damping: 20,
-			},
-		},
-		hover: {
-			scale: 1.02,
-			transition: {
-				type: "spring",
-				stiffness: 400,
-				damping: 10,
-			},
-		},
-	};
-
-	const staggerContainer = {
-		hidden: { opacity: 0 },
-		visible: {
-			opacity: 1,
-			transition: {
-				staggerChildren: 0.1,
-			},
-		},
-	};
-
-	return (
-		<motion.div
-			initial={{ opacity: 0, y: 20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.3 }}
-			className="space-y-6"
-		>
-			{connectorCategories.map((category) => (
-				<div key={category.id} className="rounded-lg border bg-card text-card-foreground shadow-sm">
-					<Collapsible
-						open={expandedCategories.includes(category.id)}
-						onOpenChange={() => toggleCategory(category.id)}
-						className="w-full"
-					>
-						<div className="flex items-center justify-between space-x-4 p-4">
-							<h3 className="text-lg sm:text-xl font-semibold">{t(category.title)}</h3>
-							<CollapsibleTrigger asChild>
-								<Button variant="ghost" size="sm" className="w-9 p-0 hover:bg-muted">
-									<motion.div
-										animate={{
-											rotate: expandedCategories.includes(category.id) ? 180 : 0,
-										}}
-										transition={{ duration: 0.3, ease: "easeInOut" }}
-									>
-										<IconChevronDown className="h-5 w-5" />
-									</motion.div>
-									<span className="sr-only">Toggle</span>
-								</Button>
-							</CollapsibleTrigger>
-						</div>
-
-						<CollapsibleContent>
-							<AnimatePresence>
-								<motion.div
-									className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 p-4"
-									variants={staggerContainer}
-									initial="hidden"
-									animate="visible"
-									exit="hidden"
-								>
-									{category.connectors.map((connector) => (
-										<motion.div
-											key={connector.id}
-											variants={cardVariants}
-											whileHover="hover"
-											className="col-span-1"
-										>
-											<Card className="h-full flex flex-col overflow-hidden border-transparent transition-all duration-200 hover:border-primary/50">
-												<CardHeader className="flex-row items-center gap-4 pb-2">
-													<div className="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10 dark:bg-primary/20">
-														<motion.div
-															whileHover={{ rotate: 5, scale: 1.1 }}
-															className="text-primary"
-														>
-															{connector.icon}
-														</motion.div>
-													</div>
-													<div>
-														<div className="flex items-center gap-2">
-															<h3 className="font-medium">{connector.title}</h3>
-															{connector.status === "coming-soon" && (
-																<Badge
-																	variant="outline"
-																	className="text-xs bg-amber-100 dark:bg-amber-950 text-amber-800 dark:text-amber-300 border-amber-200 dark:border-amber-800"
-																>
-																	{t("coming_soon")}
-																</Badge>
-															)}
-															{connector.status === "connected" && (
-																<Badge
-																	variant="outline"
-																	className="text-xs bg-green-100 dark:bg-green-950 text-green-800 dark:text-green-300 border-green-200 dark:border-green-800"
-																>
-																	{t("connected")}
-																</Badge>
-															)}
-														</div>
-													</div>
-												</CardHeader>
-
-												<CardContent className="pb-4">
-													<p className="text-sm text-muted-foreground">
-														{t(connector.description)}
-													</p>
-												</CardContent>
-
-												<CardFooter className="mt-auto pt-2">
-													{connector.status === "available" && (
-														<Link
-															href={`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`}
-															className="w-full"
-														>
-															<Button variant="default" className="w-full group">
-																<span>{t("connect")}</span>
-																<motion.div
-																	className="ml-1"
-																	initial={{ x: 0 }}
-																	whileHover={{ x: 3 }}
-																	transition={{
-																		type: "spring",
-																		stiffness: 400,
-																		damping: 10,
-																	}}
-																>
-																	<IconChevronRight className="h-4 w-4" />
-																</motion.div>
-															</Button>
-														</Link>
-													)}
-													{connector.status === "coming-soon" && (
-														<Button variant="outline" disabled className="w-full opacity-70">
-															{t("coming_soon")}
-														</Button>
-													)}
-													{connector.status === "connected" && (
-														<Button
-															variant="outline"
-															className="w-full border-green-500 text-green-600 hover:bg-green-50 dark:hover:bg-green-950"
-														>
-															{t("manage")}
-														</Button>
-													)}
-												</CardFooter>
-											</Card>
-										</motion.div>
-									))}
-								</motion.div>
-							</AnimatePresence>
-						</CollapsibleContent>
-					</Collapsible>
-				</div>
-			))}
-		</motion.div>
-	);
-}
diff --git a/surfsense_web/components/sources/connector-data.tsx b/surfsense_web/components/sources/connector-data.tsx
deleted file mode 100644
index 4974f3b2d..000000000
--- a/surfsense_web/components/sources/connector-data.tsx
+++ /dev/null
@@ -1,203 +0,0 @@
-import { IconBrandWindows, IconBrandZoom } from "@tabler/icons-react";
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { ConnectorCategory } from "./types";
-
-export const connectorCategories: ConnectorCategory[] = [
-	{
-		id: "web-search",
-		title: "web_search",
-		connectors: [
-			{
-				id: "tavily-api",
-				title: "Tavily API",
-				description: "tavily_desc",
-				icon: getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "searxng",
-				title: "SearxNG",
-				description: "searxng_desc",
-				icon: getConnectorIcon(EnumConnectorName.SEARXNG_API, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "linkup-api",
-				title: "Linkup API",
-				description: "linkup_desc",
-				icon: getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "baidu-search-api",
-				title: "Baidu Search",
-				description: "baidu_desc",
-				icon: getConnectorIcon(EnumConnectorName.BAIDU_SEARCH_API, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "messaging",
-		title: "messaging",
-		connectors: [
-			{
-				id: "slack-connector",
-				title: "Slack",
-				description: "slack_desc",
-				icon: getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "discord-connector",
-				title: "Discord",
-				description: "discord_desc",
-				icon: getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "ms-teams",
-				title: "Microsoft Teams",
-				description: "teams_desc",
-				icon: <IconBrandWindows className="h-6 w-6" />,
-				status: "coming-soon",
-			},
-		],
-	},
-	{
-		id: "project-management",
-		title: "project_management",
-		connectors: [
-			{
-				id: "linear-connector",
-				title: "Linear",
-				description: "linear_desc",
-				icon: getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "jira-connector",
-				title: "Jira",
-				description: "jira_desc",
-				icon: getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "clickup-connector",
-				title: "ClickUp",
-				description: "clickup_desc",
-				icon: getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "documentation",
-		title: "documentation",
-		connectors: [
-			{
-				id: "notion-connector",
-				title: "Notion",
-				description: "notion_desc",
-				icon: getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "confluence-connector",
-				title: "Confluence",
-				description: "confluence_desc",
-				icon: getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "bookstack-connector",
-				title: "BookStack",
-				description: "bookstack_desc",
-				icon: getConnectorIcon(EnumConnectorName.BOOKSTACK_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "development",
-		title: "development",
-		connectors: [
-			{
-				id: "github-connector",
-				title: "GitHub",
-				description: "github_desc",
-				icon: getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "databases",
-		title: "databases",
-		connectors: [
-			{
-				id: "elasticsearch-connector",
-				title: "Elasticsearch",
-				description: "elasticsearch_desc",
-				icon: getConnectorIcon(EnumConnectorName.ELASTICSEARCH_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "airtable-connector",
-				title: "Airtable",
-				description: "airtable_desc",
-				icon: getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "productivity",
-		title: "productivity",
-		connectors: [
-			{
-				id: "google-calendar-connector",
-				title: "Google Calendar",
-				description: "calendar_desc",
-				icon: getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "google-gmail-connector",
-				title: "Gmail",
-				description: "gmail_desc",
-				icon: getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "google-drive-connector",
-				title: "Google Drive",
-				description: "google_drive_desc",
-				icon: getConnectorIcon(EnumConnectorName.GOOGLE_DRIVE_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		{
-			id: "luma-connector",
-			title: "Luma",
-			description: "luma_desc",
-			icon: getConnectorIcon(EnumConnectorName.LUMA_CONNECTOR, "h-6 w-6"),
-			status: "available",
-		},
-		{
-			id: "circleback-connector",
-			title: "Circleback",
-			description: "circleback_desc",
-			icon: getConnectorIcon(EnumConnectorName.CIRCLEBACK_CONNECTOR, "h-6 w-6"),
-			status: "available",
-		},
-		{
-			id: "zoom",
-			title: "Zoom",
-			description: "zoom_desc",
-			icon: <IconBrandZoom className="h-6 w-6" />,
-			status: "coming-soon",
-		},
-	],
-},
-];

From 23734212126a427508f1151abec828f3e87c423c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 1 Jan 2026 02:03:11 +0530
Subject: [PATCH 25/28] refactor: Clean up imports and streamline component
 structure in thread.tsx and google-drive-folder-tree.tsx for improved
 maintainability

---
 .../components/assistant-ui/thread.tsx         | 18 ++++--------------
 .../connectors/google-drive-folder-tree.tsx    |  6 ++----
 2 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 89678bd57..713a9af1c 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -1,5 +1,3 @@
-import { AssistantIf, ThreadPrimitive } from "@assistant-ui/react";
-import type { FC } from "react";
 import {
 	ActionBarPrimitive,
 	AssistantIf,
@@ -10,7 +8,6 @@ import {
 	ThreadPrimitive,
 	useAssistantState,
 	useComposerRuntime,
-	useThreadViewport,
 } from "@assistant-ui/react";
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import {
@@ -28,10 +25,8 @@ import {
 	RefreshCwIcon,
 	SquareIcon,
 } from "lucide-react";
-import Link from "next/link";
 import { useParams } from "next/navigation";
 import {
-	createContext,
 	type FC,
 	useCallback,
 	useContext,
@@ -69,16 +64,11 @@ import {
 	DocumentMentionPicker,
 	type DocumentMentionPickerRef,
 } from "@/components/new-chat/document-mention-picker";
-import { ChainOfThoughtItem } from "@/components/prompt-kit/chain-of-thought";
-import { TextShimmerLoader } from "@/components/prompt-kit/loader";
 import type { ThinkingStep } from "@/components/tool-ui/deepagent-thinking";
-import { ThinkingStepsContext } from "@/components/assistant-ui/thinking-steps";
-import { ThreadWelcome } from "@/components/assistant-ui/thread-welcome";
-import { Composer } from "@/components/assistant-ui/composer";
-import { ThreadScrollToBottom } from "@/components/assistant-ui/thread-scroll-to-bottom";
-import { AssistantMessage } from "@/components/assistant-ui/assistant-message";
-import { UserMessage } from "@/components/assistant-ui/user-message";
-import { EditComposer } from "@/components/assistant-ui/edit-composer";
+import {
+	ThinkingStepsContext,
+	ThinkingStepsDisplay,
+} from "@/components/assistant-ui/thinking-steps";
 import { Button } from "@/components/ui/button";
 import type { Document } from "@/contracts/types/document.types";
 import { cn } from "@/lib/utils";
diff --git a/surfsense_web/components/connectors/google-drive-folder-tree.tsx b/surfsense_web/components/connectors/google-drive-folder-tree.tsx
index 4c1608b49..bad2b5965 100644
--- a/surfsense_web/components/connectors/google-drive-folder-tree.tsx
+++ b/surfsense_web/components/connectors/google-drive-folder-tree.tsx
@@ -228,12 +228,10 @@ export function GoogleDriveFolderTree({
 			<div key={item.id} className="w-full sm:ml-[calc(var(--level)*1.25rem)]" style={{ marginLeft: `${level * indentSize}rem`, '--level': level } as React.CSSProperties & { '--level'?: number }}>
 				<div
 					className={cn(
-						"flex items-center group gap-2 h-auto py-2 px-2 rounded-md hover:bg-accent cursor-pointer",
-						isSelected && "bg-accent/50"
-						"flex items-center gap-1 sm:gap-2 h-auto py-1 sm:py-2 px-1 sm:px-2 rounded-md",
+						"flex items-center group gap-1 sm:gap-2 h-auto py-1 sm:py-2 px-1 sm:px-2 rounded-md",
 						isFolder && "hover:bg-accent cursor-pointer",
 						!isFolder && "cursor-default opacity-60",
-						isSelected && isFolder && "bg-accent/50"
+						isSelected && "bg-accent/50"
 					)}
 				>
 					{isFolder ? (

From e2f4f6c8e07fe7305de62e5d2a2cc8f35c8cbd4c Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 1 Jan 2026 02:59:49 +0530
Subject: [PATCH 26/28] feat: Add Circleback connector integration

- Implement CirclebackConnectForm for user input and configuration
- Update connector benefits to include Circleback features
- Add CirclebackConfig component for webhook configuration
- Integrate Circleback into connector selection and management UI
- Update connector constants and document mappings for Circleback
---
 .../components/circleback-connect-form.tsx    | 121 ++++++++++
 .../connect-forms/connector-benefits.ts       |   7 +
 .../connector-popup/connect-forms/index.tsx   |   3 +
 .../components/circleback-config.tsx          | 156 +++++++++++++
 .../connector-configs/index.tsx               |   3 +
 .../views/connector-connect-view.tsx          |   1 +
 .../constants/connector-constants.ts          |   8 +-
 .../tabs/all-connectors-tab.tsx               |  37 +--
 .../utils/connector-document-mapping.ts       |   1 +
 .../views/youtube-crawler-view.tsx            |  10 +-
 .../components/sources/connector-data.tsx     | 215 ------------------
 surfsense_web/contracts/enums/connector.ts    |   1 +
 .../contracts/enums/connectorIcons.tsx        |  31 ++-
 surfsense_web/lib/connectors/utils.ts         |   1 +
 .../public/connectors/baidu-search.svg        |   7 +-
 surfsense_web/public/connectors/clickup.svg   |  15 +-
 .../public/connectors/confluence.svg          |  16 +-
 surfsense_web/public/connectors/jira.svg      |  17 +-
 surfsense_web/public/connectors/luma.svg      |   1 +
 surfsense_web/public/connectors/notion.svg    |   5 +-
 surfsense_web/public/connectors/slack.svg     |   7 +-
 surfsense_web/public/connectors/tavily.svg    |   1 +
 surfsense_web/public/connectors/youtube.svg   |   2 +-
 23 files changed, 370 insertions(+), 296 deletions(-)
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/circleback-connect-form.tsx
 create mode 100644 surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/circleback-config.tsx
 delete mode 100644 surfsense_web/components/sources/connector-data.tsx
 create mode 100644 surfsense_web/public/connectors/luma.svg
 create mode 100644 surfsense_web/public/connectors/tavily.svg

diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/circleback-connect-form.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/circleback-connect-form.tsx
new file mode 100644
index 000000000..35373fc49
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/circleback-connect-form.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Info, Webhook } from "lucide-react";
+import type { FC } from "react";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import * as z from "zod";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import type { ConnectFormProps } from "../index";
+import { getConnectorBenefits } from "../connector-benefits";
+
+const circlebackFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+});
+
+type CirclebackFormValues = z.infer<typeof circlebackFormSchema>;
+
+export const CirclebackConnectForm: FC<ConnectFormProps> = ({
+	onSubmit,
+	isSubmitting,
+}) => {
+	const isSubmittingRef = useRef(false);
+	const form = useForm<CirclebackFormValues>({
+		resolver: zodResolver(circlebackFormSchema),
+		defaultValues: {
+			name: "Circleback Connector",
+		},
+	});
+
+	const handleSubmit = async (values: CirclebackFormValues) => {
+		// Prevent multiple submissions
+		if (isSubmittingRef.current || isSubmitting) {
+			return;
+		}
+
+		isSubmittingRef.current = true;
+		try {
+			await onSubmit({
+				name: values.name,
+				connector_type: EnumConnectorName.CIRCLEBACK_CONNECTOR,
+				config: {},
+				is_indexable: false,
+				last_indexed_at: null,
+				periodic_indexing_enabled: false,
+				indexing_frequency_minutes: null,
+				next_scheduled_at: null,
+			});
+		} finally {
+			isSubmittingRef.current = false;
+		}
+	};
+
+	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 flex items-center [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg+div]:translate-y-0">
+				<Webhook className="h-3 w-3 sm:h-4 sm:w-4 shrink-0 ml-1" />
+				<div className="-ml-1">
+					<AlertTitle className="text-xs sm:text-sm">Webhook-Based Integration</AlertTitle>
+					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
+						Circleback uses webhooks to automatically send meeting data. After connecting, you'll receive a webhook URL to configure in your Circleback settings.
+					</AlertDescription>
+				</div>
+			</Alert>
+
+			<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">
+				<Form {...form}>
+					<form id="circleback-connect-form" onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4 sm:space-y-6">
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem>
+									<FormLabel className="text-xs sm:text-sm">Connector Name</FormLabel>
+									<FormControl>
+										<Input 
+											placeholder="My Circleback Connector" 
+											className="border-slate-400/20 focus-visible:border-slate-400/40" 
+											disabled={isSubmitting}
+											{...field} 
+										/>
+									</FormControl>
+									<FormDescription className="text-[10px] sm:text-xs">
+										A friendly name to identify this connector.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+				</Form>
+			</div>
+
+			{/* What you get section */}
+			{getConnectorBenefits(EnumConnectorName.CIRCLEBACK_CONNECTOR) && (
+				<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 px-3 sm:px-6 py-4 space-y-2">
+					<h4 className="text-xs sm:text-sm font-medium">What you get with Circleback:</h4>
+					<ul className="list-disc pl-5 text-[10px] sm:text-xs text-muted-foreground space-y-1">
+						{getConnectorBenefits(EnumConnectorName.CIRCLEBACK_CONNECTOR)?.map((benefit) => (
+							<li key={benefit}>{benefit}</li>
+						))}
+					</ul>
+				</div>
+			)}
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
index 664fe78b8..194257cd0 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts
@@ -101,6 +101,13 @@ export function getConnectorBenefits(connectorType: string): string[] | null {
 			"Keep your search results up-to-date with latest Luma content",
 			"Index your Luma events for enhanced search capabilities",
 		],
+		CIRCLEBACK_CONNECTOR: [
+			"Automatically receive meeting notes, transcripts, and action items",
+			"Access meeting details, attendees, and insights",
+			"Search through all your Circleback meeting records",
+			"Real-time updates via webhook integration",
+			"No manual indexing required - meetings are added automatically",
+		],
 	};
 
 	return benefits[connectorType] || null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
index 46ed58272..0be9ec563 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connect-forms/index.tsx
@@ -1,6 +1,7 @@
 import type { FC } from "react";
 import { BaiduSearchApiConnectForm } from "./components/baidu-search-api-connect-form";
 import { BookStackConnectForm } from "./components/bookstack-connect-form";
+import { CirclebackConnectForm } from "./components/circleback-connect-form";
 import { ClickUpConnectForm } from "./components/clickup-connect-form";
 import { ConfluenceConnectForm } from "./components/confluence-connect-form";
 import { DiscordConnectForm } from "./components/discord-connect-form";
@@ -74,6 +75,8 @@ export function getConnectFormComponent(
 			return ClickUpConnectForm;
 		case "LUMA_CONNECTOR":
 			return LumaConnectForm;
+		case "CIRCLEBACK_CONNECTOR":
+			return CirclebackConnectForm;
 		// Add other connector types here as needed
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/circleback-config.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/circleback-config.tsx
new file mode 100644
index 000000000..48e4b43e5
--- /dev/null
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/components/circleback-config.tsx
@@ -0,0 +1,156 @@
+"use client";
+
+import { Copy, Webhook, Check } from "lucide-react";
+import { useState, useEffect } from "react";
+import type { FC } from "react";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import type { ConnectorConfigProps } from "../index";
+import { authenticatedFetch } from "@/lib/auth-utils";
+
+export interface CirclebackConfigProps extends ConnectorConfigProps {
+	onNameChange?: (name: string) => void;
+}
+
+export const CirclebackConfig: FC<CirclebackConfigProps> = ({
+	connector,
+	onNameChange,
+}) => {
+	const [name, setName] = useState<string>(connector.name || "");
+	const [webhookUrl, setWebhookUrl] = useState<string>("");
+	const [webhookInfo, setWebhookInfo] = useState<{ webhook_url: string; search_space_id: number; method: string; content_type: string; description: string; note: string } | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [copied, setCopied] = useState(false);
+
+	// Update name when connector changes
+	useEffect(() => {
+		setName(connector.name || "");
+	}, [connector.name]);
+
+	// Fetch webhook info
+	useEffect(() => {
+		const fetchWebhookInfo = async () => {
+			if (!connector.search_space_id) return;
+			
+			setIsLoading(true);
+			try {
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/webhooks/circleback/${connector.search_space_id}/info`
+				);
+				if (response.ok) {
+					const data = await response.json();
+					setWebhookInfo(data);
+					setWebhookUrl(data.webhook_url || "");
+				}
+			} catch (error) {
+				console.error("Failed to fetch webhook info:", error);
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		fetchWebhookInfo();
+	}, [connector.search_space_id]);
+
+	const handleNameChange = (value: string) => {
+		setName(value);
+		if (onNameChange) {
+			onNameChange(value);
+		}
+	};
+
+	const handleCopyWebhookUrl = async () => {
+		if (webhookUrl) {
+			await navigator.clipboard.writeText(webhookUrl);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2000);
+		}
+	};
+
+	return (
+		<div className="space-y-6">
+			{/* Connector Name */}
+			<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">
+				<div className="space-y-2">
+					<Label className="text-xs sm:text-sm">Connector Name</Label>
+					<Input
+						value={name}
+						onChange={(e) => handleNameChange(e.target.value)}
+						placeholder="My Circleback Connector"
+						className="border-slate-400/20 focus-visible:border-slate-400/40"
+					/>
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						A friendly name to identify this connector.
+					</p>
+				</div>
+			</div>
+
+			{/* Webhook Configuration */}
+			<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">
+				<div className="space-y-1 sm:space-y-2">
+					<h3 className="font-medium text-sm sm:text-base flex items-center gap-2">
+						<Webhook className="h-4 w-4" />
+						Webhook Configuration
+					</h3>
+				</div>
+
+				{isLoading ? (
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Loading webhook information...
+					</p>
+				) : webhookUrl ? (
+					<div className="space-y-2">
+						<Label className="text-xs sm:text-sm">Webhook URL</Label>
+						<div className="flex gap-2">
+							<Input
+								value={webhookUrl}
+								readOnly
+								className="border-slate-400/20 focus-visible:border-slate-400/40 font-mono text-xs"
+							/>
+							<Button
+								type="button"
+								variant="outline"
+								size="sm"
+								onClick={handleCopyWebhookUrl}
+								className="shrink-0"
+							>
+								{copied ? (
+									<>
+										<Check className="h-4 w-4 mr-2" />
+										Copied!
+									</>
+								) : (
+									<>
+										<Copy className="h-4 w-4 mr-2" />
+										Copy
+									</>
+								)}
+							</Button>
+						</div>
+						<p className="text-[10px] sm:text-xs text-muted-foreground">
+							Use this URL in your Circleback automation settings to send meeting data to SurfSense.
+						</p>
+					</div>
+				) : (
+					<p className="text-[10px] sm:text-xs text-muted-foreground">
+						Unable to load webhook URL. Please try refreshing the page.
+					</p>
+				)}
+
+				{webhookInfo && (
+					<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20">
+						<Webhook className="h-3 w-3 sm:h-4 sm:w-4" />
+						<AlertTitle className="text-xs sm:text-sm">Configuration Instructions</AlertTitle>
+						<AlertDescription className="text-[10px] sm:text-xs !pl-0 mt-1">
+							Configure this URL in Circleback Settings → Automations → Create automation → Send webhook request.
+							The webhook will automatically send meeting notes, transcripts, and action items to this search space.
+						</AlertDescription>
+					</Alert>
+				)}
+			</div>
+		</div>
+	);
+};
+
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
index 59919d0cd..ca296e482 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/index.tsx
@@ -4,6 +4,7 @@ import type { FC } from "react";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
 import { BaiduSearchApiConfig } from "./components/baidu-search-api-config";
 import { BookStackConfig } from "./components/bookstack-config";
+import { CirclebackConfig } from "./components/circleback-config";
 import { ClickUpConfig } from "./components/clickup-config";
 import { ConfluenceConfig } from "./components/confluence-config";
 import { DiscordConfig } from "./components/discord-config";
@@ -69,6 +70,8 @@ export function getConnectorConfigComponent(
 			return ClickUpConfig;
 		case "LUMA_CONNECTOR":
 			return LumaConfig;
+		case "CIRCLEBACK_CONNECTOR":
+			return CirclebackConfig;
 		// OAuth connectors (Gmail, Calendar, Airtable) and others don't need special config UI
 		default:
 			return null;
diff --git a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
index 6827c6362..21e84a67b 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx
@@ -62,6 +62,7 @@ export const ConnectorConnectView: FC<ConnectorConnectViewProps> = ({
 			JIRA_CONNECTOR: "jira-connect-form",
 			CLICKUP_CONNECTOR: "clickup-connect-form",
 			LUMA_CONNECTOR: "luma-connect-form",
+			CIRCLEBACK_CONNECTOR: "circleback-connect-form",
 		};
 		const formId = formIdMap[connectorType];
 		if (formId) {
diff --git a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
index 60126e135..46f6cb130 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts
@@ -38,7 +38,7 @@ export const CRAWLERS = [
 		id: "youtube-crawler",
 		title: "YouTube",
 		description: "Crawl YouTube channels and playlists",
-		connectorType: null, // Not a connector, handled separately
+		connectorType: EnumConnectorName.YOUTUBE_CONNECTOR,
 	},
 	{
 		id: "webcrawler-connector",
@@ -140,6 +140,12 @@ export const OTHER_CONNECTORS = [
 		description: "Search with Baidu",
 		connectorType: EnumConnectorName.BAIDU_SEARCH_API,
 	},
+	{
+		id: "circleback-connector",
+		title: "Circleback",
+		description: "Receive meeting notes via webhook",
+		connectorType: EnumConnectorName.CIRCLEBACK_CONNECTOR,
+	},
 ] as const;
 
 // Re-export IndexingConfigState from schemas for backward compatibility
diff --git a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
index 030e5dc3d..7ea9035c4 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/tabs/all-connectors-tab.tsx
@@ -183,23 +183,24 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 					</div>
 					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
 						{filteredOther.map((connector) => {
-							// Special handling for connectors that can be created in popup
-							const isWebcrawler = connector.id === "webcrawler-connector";
-							const isTavily = connector.id === "tavily-api";
-							const isSearxng = connector.id === "searxng";
-							const isLinkup = connector.id === "linkup-api";
-							const isBaidu = connector.id === "baidu-search-api";
-							const isLinear = connector.id === "linear-connector";
-							const isElasticsearch = connector.id === "elasticsearch-connector";
-							const isSlack = connector.id === "slack-connector";
-							const isDiscord = connector.id === "discord-connector";
-							const isNotion = connector.id === "notion-connector";
-							const isConfluence = connector.id === "confluence-connector";
-							const isBookStack = connector.id === "bookstack-connector";
-							const isGithub = connector.id === "github-connector";
-							const isJira = connector.id === "jira-connector";
-							const isClickUp = connector.id === "clickup-connector";
-							const isLuma = connector.id === "luma-connector";
+						// Special handling for connectors that can be created in popup
+						const isWebcrawler = connector.id === "webcrawler-connector";
+						const isTavily = connector.id === "tavily-api";
+						const isSearxng = connector.id === "searxng";
+						const isLinkup = connector.id === "linkup-api";
+						const isBaidu = connector.id === "baidu-search-api";
+						const isLinear = connector.id === "linear-connector";
+						const isElasticsearch = connector.id === "elasticsearch-connector";
+						const isSlack = connector.id === "slack-connector";
+						const isDiscord = connector.id === "discord-connector";
+						const isNotion = connector.id === "notion-connector";
+						const isConfluence = connector.id === "confluence-connector";
+						const isBookStack = connector.id === "bookstack-connector";
+						const isGithub = connector.id === "github-connector";
+						const isJira = connector.id === "jira-connector";
+						const isClickUp = connector.id === "clickup-connector";
+						const isLuma = connector.id === "luma-connector";
+						const isCircleback = connector.id === "circleback-connector";
 							
 						const isConnected = connectedTypes.has(connector.connectorType);
 						const isConnecting = connectingId === connector.id;
@@ -215,7 +216,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
 
 						const handleConnect = isWebcrawler && onCreateWebcrawler
 							? onCreateWebcrawler
-							: (isTavily || isSearxng || isLinkup || isBaidu || isLinear || isElasticsearch || isSlack || isDiscord || isNotion || isConfluence || isBookStack || isGithub || isJira || isClickUp || isLuma) && onConnectNonOAuth
+							: (isTavily || isSearxng || isLinkup || isBaidu || isLinear || isElasticsearch || isSlack || isDiscord || isNotion || isConfluence || isBookStack || isGithub || isJira || isClickUp || isLuma || isCircleback) && onConnectNonOAuth
 							? () => onConnectNonOAuth(connector.connectorType)
 							: () => router.push(`/dashboard/${searchSpaceId}/connectors/add/${connector.id}`);
 
diff --git a/surfsense_web/components/assistant-ui/connector-popup/utils/connector-document-mapping.ts b/surfsense_web/components/assistant-ui/connector-popup/utils/connector-document-mapping.ts
index a0afa7431..607b6608f 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/utils/connector-document-mapping.ts
+++ b/surfsense_web/components/assistant-ui/connector-popup/utils/connector-document-mapping.ts
@@ -24,6 +24,7 @@ export const CONNECTOR_TO_DOCUMENT_TYPE: Record<string, string> = {
 	LUMA_CONNECTOR: "LUMA_CONNECTOR",
 	ELASTICSEARCH_CONNECTOR: "ELASTICSEARCH_CONNECTOR",
 	BOOKSTACK_CONNECTOR: "BOOKSTACK_CONNECTOR",
+	CIRCLEBACK_CONNECTOR: "CIRCLEBACK",
 
 	// Special mappings (connector type differs from document type)
 	GOOGLE_DRIVE_CONNECTOR: "GOOGLE_DRIVE_FILE",
diff --git a/surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx b/surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx
index ed5098e37..7f5ad5d2b 100644
--- a/surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx
+++ b/surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { IconBrandYoutube } from "@tabler/icons-react";
 import { ArrowLeft } from "lucide-react";
 import { TagInput, type Tag as TagType } from "emblor";
 import { useAtom } from "jotai";
@@ -12,6 +11,8 @@ import { toast } from "sonner";
 import { createDocumentMutationAtom } from "@/atoms/documents/document-mutation.atoms";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 
 const youtubeRegex =
 	/^(https:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})$/;
@@ -129,7 +130,7 @@ export const YouTubeCrawlerView: FC<YouTubeCrawlerViewProps> = ({
 
 				<div className="flex items-center gap-4 mb-6">
 					<div className="flex h-14 w-14 items-center justify-center rounded-xl border border-slate-400/30">
-						<IconBrandYoutube className="h-7 w-7" />
+						{getConnectorIcon(EnumConnectorName.YOUTUBE_CONNECTOR, "h-7 w-7")}
 					</div>
 					<div>
 						<h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
@@ -236,10 +237,7 @@ export const YouTubeCrawlerView: FC<YouTubeCrawlerViewProps> = ({
 							{t("processing")}
 						</>
 					) : (
-						<>
-							<IconBrandYoutube className="mr-2 h-4 w-4" />
-							{t("submit")}
-						</>
+						t("submit")
 					)}
 				</Button>
 			</div>
diff --git a/surfsense_web/components/sources/connector-data.tsx b/surfsense_web/components/sources/connector-data.tsx
deleted file mode 100644
index a1c6084d2..000000000
--- a/surfsense_web/components/sources/connector-data.tsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import { EnumConnectorName } from "@/contracts/enums/connector";
-import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
-import type { ConnectorCategory } from "./types";
-
-export const connectorCategories: ConnectorCategory[] = [
-	{
-		id: "web-crawling",
-		title: "web_crawling",
-		connectors: [
-			{
-				id: "webcrawler-connector",
-				title: "Web Pages",
-				description: "webcrawler_desc",
-				icon: getConnectorIcon(EnumConnectorName.WEBCRAWLER_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "web-search",
-		title: "web_search",
-		connectors: [
-			{
-				id: "tavily-api",
-				title: "Tavily API",
-				description: "tavily_desc",
-				icon: getConnectorIcon(EnumConnectorName.TAVILY_API, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "searxng",
-				title: "SearxNG",
-				description: "searxng_desc",
-				icon: getConnectorIcon(EnumConnectorName.SEARXNG_API, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "linkup-api",
-				title: "Linkup API",
-				description: "linkup_desc",
-				icon: getConnectorIcon(EnumConnectorName.LINKUP_API, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "baidu-search-api",
-				title: "Baidu Search",
-				description: "baidu_desc",
-				icon: getConnectorIcon(EnumConnectorName.BAIDU_SEARCH_API, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "messaging",
-		title: "messaging",
-		connectors: [
-			{
-				id: "slack-connector",
-				title: "Slack",
-				description: "slack_desc",
-				icon: getConnectorIcon(EnumConnectorName.SLACK_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "discord-connector",
-				title: "Discord",
-				description: "discord_desc",
-				icon: getConnectorIcon(EnumConnectorName.DISCORD_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "ms-teams",
-				title: "Microsoft Teams",
-				description: "teams_desc",
-				icon: getConnectorIcon("ms-teams", "h-6 w-6"),
-				status: "coming-soon",
-			},
-		],
-	},
-	{
-		id: "project-management",
-		title: "project_management",
-		connectors: [
-			{
-				id: "linear-connector",
-				title: "Linear",
-				description: "linear_desc",
-				icon: getConnectorIcon(EnumConnectorName.LINEAR_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "jira-connector",
-				title: "Jira",
-				description: "jira_desc",
-				icon: getConnectorIcon(EnumConnectorName.JIRA_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "clickup-connector",
-				title: "ClickUp",
-				description: "clickup_desc",
-				icon: getConnectorIcon(EnumConnectorName.CLICKUP_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "documentation",
-		title: "documentation",
-		connectors: [
-			{
-				id: "notion-connector",
-				title: "Notion",
-				description: "notion_desc",
-				icon: getConnectorIcon(EnumConnectorName.NOTION_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "confluence-connector",
-				title: "Confluence",
-				description: "confluence_desc",
-				icon: getConnectorIcon(EnumConnectorName.CONFLUENCE_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "bookstack-connector",
-				title: "BookStack",
-				description: "bookstack_desc",
-				icon: getConnectorIcon(EnumConnectorName.BOOKSTACK_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "development",
-		title: "development",
-		connectors: [
-			{
-				id: "github-connector",
-				title: "GitHub",
-				description: "github_desc",
-				icon: getConnectorIcon(EnumConnectorName.GITHUB_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "databases",
-		title: "databases",
-		connectors: [
-			{
-				id: "elasticsearch-connector",
-				title: "Elasticsearch",
-				description: "elasticsearch_desc",
-				icon: getConnectorIcon(EnumConnectorName.ELASTICSEARCH_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "airtable-connector",
-				title: "Airtable",
-				description: "airtable_desc",
-				icon: getConnectorIcon(EnumConnectorName.AIRTABLE_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		],
-	},
-	{
-		id: "productivity",
-		title: "productivity",
-		connectors: [
-			{
-				id: "google-calendar-connector",
-				title: "Google Calendar",
-				description: "calendar_desc",
-				icon: getConnectorIcon(EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "google-gmail-connector",
-				title: "Gmail",
-				description: "gmail_desc",
-				icon: getConnectorIcon(EnumConnectorName.GOOGLE_GMAIL_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-			{
-				id: "google-drive-connector",
-				title: "Google Drive",
-				description: "google_drive_desc",
-				icon: getConnectorIcon(EnumConnectorName.GOOGLE_DRIVE_CONNECTOR, "h-6 w-6"),
-				status: "available",
-			},
-		{
-			id: "luma-connector",
-			title: "Luma",
-			description: "luma_desc",
-			icon: getConnectorIcon(EnumConnectorName.LUMA_CONNECTOR, "h-6 w-6"),
-			status: "available",
-		},
-		{
-			id: "circleback-connector",
-			title: "Circleback",
-			description: "circleback_desc",
-			icon: getConnectorIcon(EnumConnectorName.CIRCLEBACK_CONNECTOR, "h-6 w-6"),
-			status: "available",
-		},
-		{
-			id: "zoom",
-			title: "Zoom",
-			description: "zoom_desc",
-			icon: getConnectorIcon("zoom", "h-6 w-6"),
-			status: "coming-soon",
-		},
-	],
-},
-];
diff --git a/surfsense_web/contracts/enums/connector.ts b/surfsense_web/contracts/enums/connector.ts
index 22f6530da..ae80cf871 100644
--- a/surfsense_web/contracts/enums/connector.ts
+++ b/surfsense_web/contracts/enums/connector.ts
@@ -19,5 +19,6 @@ export enum EnumConnectorName {
 	LUMA_CONNECTOR = "LUMA_CONNECTOR",
 	ELASTICSEARCH_CONNECTOR = "ELASTICSEARCH_CONNECTOR",
 	WEBCRAWLER_CONNECTOR = "WEBCRAWLER_CONNECTOR",
+	YOUTUBE_CONNECTOR = "YOUTUBE_CONNECTOR",
 	CIRCLEBACK_CONNECTOR = "CIRCLEBACK_CONNECTOR",
 }
diff --git a/surfsense_web/contracts/enums/connectorIcons.tsx b/surfsense_web/contracts/enums/connectorIcons.tsx
index e8c2b4ed0..d836701be 100644
--- a/surfsense_web/contracts/enums/connectorIcons.tsx
+++ b/surfsense_web/contracts/enums/connectorIcons.tsx
@@ -2,7 +2,6 @@ import {
 	IconLinkPlus,
 	IconSparkles,
 	IconUsersGroup,
-	IconWorldWww,
 } from "@tabler/icons-react";
 import {
 	File,
@@ -20,16 +19,30 @@ import { EnumConnectorName } from "./connector";
 export const getConnectorIcon = (connectorType: EnumConnectorName | string, className?: string) => {
 	const iconProps = { className: className || "h-4 w-4" };
 	const imgProps = { className: className || "h-5 w-5", width: 20, height: 20 };
+	// Larger props for specific services (Google services, GitHub, Linear) - scale up from size-6 to size-8
+	const getLargeClassName = () => {
+		if (!className) return "h-8 w-8";
+		// Replace size-6 with size-8, or h-6/w-6 with h-8/w-8
+		return className
+			.replace(/size-6/g, "size-8")
+			.replace(/\bh-6\b/g, "h-8")
+			.replace(/\bw-6\b/g, "w-8");
+	};
+	const largeImgProps = { 
+		className: getLargeClassName(), 
+		width: 32, 
+		height: 32 
+	};
 
 	switch (connectorType) {
 		case EnumConnectorName.LINKUP_API:
 			return <IconLinkPlus {...iconProps} />;
 		case EnumConnectorName.LINEAR_CONNECTOR:
-			return <Image src="/connectors/linear.svg" alt="Linear" {...imgProps} />;
+			return <Image src="/connectors/linear.svg" alt="Linear" {...largeImgProps} />;
 		case EnumConnectorName.GITHUB_CONNECTOR:
-			return <Image src="/connectors/github.svg" alt="GitHub" {...imgProps} />;
+			return <Image src="/connectors/github.svg" alt="GitHub" {...largeImgProps} />;
 		case EnumConnectorName.TAVILY_API:
-			return <IconWorldWww {...iconProps} />;
+			return <Image src="/connectors/tavily.svg" alt="Tavily" {...imgProps} />;
 		case EnumConnectorName.SEARXNG_API:
 			return <Globe {...iconProps} />;
 		case EnumConnectorName.BAIDU_SEARCH_API:
@@ -43,11 +56,11 @@ export const getConnectorIcon = (connectorType: EnumConnectorName | string, clas
 		case EnumConnectorName.JIRA_CONNECTOR:
 			return <Image src="/connectors/jira.svg" alt="Jira" {...imgProps} />;
 		case EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR:
-			return <Image src="/connectors/google-calendar.svg" alt="Google Calendar" {...imgProps} />;
+			return <Image src="/connectors/google-calendar.svg" alt="Google Calendar" {...largeImgProps} />;
 		case EnumConnectorName.GOOGLE_GMAIL_CONNECTOR:
-			return <Image src="/connectors/google-gmail.svg" alt="Gmail" {...imgProps} />;
+			return <Image src="/connectors/google-gmail.svg" alt="Gmail" {...largeImgProps} />;
 		case EnumConnectorName.GOOGLE_DRIVE_CONNECTOR:
-			return <Image src="/connectors/google-drive.svg" alt="Google Drive" {...imgProps} />;
+			return <Image src="/connectors/google-drive.svg" alt="Google Drive" {...largeImgProps} />;
 		case EnumConnectorName.AIRTABLE_CONNECTOR:
 			return <Image src="/connectors/airtable.svg" alt="Airtable" {...imgProps} />;
 		case EnumConnectorName.CONFLUENCE_CONNECTOR:
@@ -62,9 +75,13 @@ export const getConnectorIcon = (connectorType: EnumConnectorName | string, clas
 			return <Image src="/connectors/elasticsearch.svg" alt="Elasticsearch" {...imgProps} />;
 		case EnumConnectorName.WEBCRAWLER_CONNECTOR:
 			return <Globe {...iconProps} />;
+		case EnumConnectorName.YOUTUBE_CONNECTOR:
+			return <Image src="/connectors/youtube.svg" alt="YouTube" {...imgProps} />;
 		case EnumConnectorName.CIRCLEBACK_CONNECTOR:
 			return <IconUsersGroup {...iconProps} />;
 		// Additional cases for non-enum connector types
+		case "YOUTUBE_CONNECTOR":
+			return <Image src="/connectors/youtube.svg" alt="YouTube" {...imgProps} />;
 		case "CIRCLEBACK":
 			return <IconUsersGroup {...iconProps} />;
 		case "CRAWLED_URL":
diff --git a/surfsense_web/lib/connectors/utils.ts b/surfsense_web/lib/connectors/utils.ts
index de791be7f..75e81e2cc 100644
--- a/surfsense_web/lib/connectors/utils.ts
+++ b/surfsense_web/lib/connectors/utils.ts
@@ -19,6 +19,7 @@ export const getConnectorTypeDisplay = (type: string): string => {
 		LUMA_CONNECTOR: "Luma",
 		ELASTICSEARCH_CONNECTOR: "Elasticsearch",
 		WEBCRAWLER_CONNECTOR: "Web Pages",
+		CIRCLEBACK_CONNECTOR: "Circleback",
 	};
 	return typeMap[type] || type;
 };
diff --git a/surfsense_web/public/connectors/baidu-search.svg b/surfsense_web/public/connectors/baidu-search.svg
index 5bf435123..045239cba 100644
--- a/surfsense_web/public/connectors/baidu-search.svg
+++ b/surfsense_web/public/connectors/baidu-search.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg"
-aria-label="Baidu" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#fff"/><path d="m131 251c41-9 35-58 34-68-2-17-21-45-48-43-33 3-37 50-37 50-5 22 10 70 51 61m76-82c22 0 40-26 40-58s-18-58-40-58c-23 0-41 26-41 58s18 58 41 58m96 4c31 4 50-28 54-53 4-24-16-52-37-57s-48 29-50 52c-3 27 3 54 33 58m120 41c0-12-10-47-46-47s-41 33-41 57c0 22 2 53 47 52s40-51 40-62m-46 102s-46-36-74-75c-36-57-89-34-106-5-18 29-45 48-49 53-4 4-56 33-44 84 11 52 52 51 52 51s30 3 65-5 65 2 65 2 81 27 104-25c22-53-13-80-13-80" fill="#2319dc"/><path d="m214 266v34h-28s-29 3-39 35c-3 21 4 34 5 36 1 3 10 19 33 23h53v-128zm-1 107h-21s-15-1-19-18c-3-7 0-16 1-20 1-3 6-11 17-14h22zm38-70v68s1 17 24 23h61v-91h-26v68h-25s-8-1-10-7v-61z" fill="#fff"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 48 48" width="48px" height="48px"><path fill="#1565c0" d="M36.094 31.35c-1.695-1.5-3.754-3.225-6.66-7.35-1.865-2.647-3.512-4-5.934-4-2.664 0-4.117 1.25-5.552 3.279-2.1 2.971-2.925 3.971-5.088 5.675-.786.619-4.861 3.172-4.86 7.671C8.001 41.875 11.753 44 15.155 44c4.469 0 5.439-1 8.345-1 3.633 0 5.57 1 8.476 1C37.789 44 39 39.625 39 36.872 39 34.25 37.789 32.85 36.094 31.35zM11.389 24.885c3.124-.694 3.616-3.739 3.611-5.732-.002-.696-.064-1.263-.096-1.558-.198-1.678-2.027-4.55-4.551-4.594-.12-.002-.242.002-.365.013-3.412.314-3.911 5.412-3.911 5.412-.056.287-.082.613-.078.963.031 2.263 1.356 5.527 4.274 5.61C10.623 25.008 10.994 24.973 11.389 24.885M19.503 16C21.99 16 24 13.315 24 9.998 24 6.681 21.99 4 19.503 4 17.015 4 15 6.681 15 9.998 15 13.315 17.015 16 19.503 16M29.522 16.964c.221.031.436.041.645.033 2.696-.103 4.416-3.276 4.781-5.723.037-.241.054-.486.052-.733-.015-2.441-1.831-5.012-3.799-5.49-2.177-.532-4.893 3.173-5.138 5.59-.037.37-.059.739-.063 1.103C25.975 14.296 26.841 16.599 29.522 16.964M41.984 21.142c0-1.281-1.004-5.142-4.742-5.142C33.496 16 33 19.644 33 22.219c0 2.41.187 5.752 4.578 5.781.087.001.176 0 .267-.002 4.027-.094 4.183-4.203 4.152-6.138C41.993 21.561 41.984 21.315 41.984 21.142"/><path fill="#fff" d="M24 31v7.5c0 0 0 1.875 2.625 2.5H33V31h-2.625v7.5h-2.75c0 0-.875-.125-1-.75V31H24zM20 27v4h-3c-2.125.375-4 2.25-3.999 4.875C13.001 35.917 13 35.958 13 36c0 2.75 1.875 4.625 4 5h5.625V27H20zM20 38.75h-2.375c-.75 0-2-1.125-2-2.75s1.25-2.75 2-2.75H20V38.75z"/></svg>
\ No newline at end of file
diff --git a/surfsense_web/public/connectors/clickup.svg b/surfsense_web/public/connectors/clickup.svg
index 4bf99cfd8..64f68a7fc 100644
--- a/surfsense_web/public/connectors/clickup.svg
+++ b/surfsense_web/public/connectors/clickup.svg
@@ -1 +1,14 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>ClickUp</title><path d="M2 18.439l3.69-2.828c1.961 2.56 4.044 3.739 6.363 3.739 2.307 0 4.33-1.166 6.203-3.704L22 18.405C19.298 22.065 15.941 24 12.053 24 8.178 24 4.788 22.078 2 18.439zM12.04 6.15l-6.568 5.66-3.036-3.52L12.055 0l9.543 8.296-3.05 3.509z"/></svg>
\ No newline at end of file
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.43828 50.2095C5.81176 49.4456 5.94882 48.3212 6.71918 47.7027L14.0169 41.8433C14.6535 41.3322 15.5841 41.4476 16.1032 42.0777C21.06 48.0956 26.32 50.8815 32.142 50.8815C37.9238 50.8815 43.0403 48.135 47.7801 42.1839C48.2888 41.5452 49.2172 41.4131 49.8629 41.9129L57.2604 47.6377C58.0415 48.2422 58.1989 49.3637 57.5855 50.1379C50.5775 58.9839 41.9971 63.6446 32.142 63.6446C22.3156 63.6446 13.6586 59.013 6.43828 50.2095Z" fill="url(#paint0_linear_8_569)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.4953 17.1804C32.2202 16.9368 31.8067 16.9367 31.5314 17.1801L15.663 31.2116C15.0564 31.748 14.1285 31.6857 13.599 31.0731L7.40986 23.9122C6.88774 23.3082 6.95019 22.3961 7.54979 21.8688L31.0527 1.20062C31.6021 0.717503 32.4248 0.717611 32.9741 1.20088L56.4822 21.8847C57.0822 22.4125 57.1439 23.3256 56.6205 23.9294L50.4164 31.0866C49.8862 31.6982 48.9589 31.7594 48.353 31.2229L32.4953 17.1804Z" fill="url(#paint1_linear_8_569)"/>
+<defs>
+<linearGradient id="paint0_linear_8_569" x1="5.3335" y1="32.1624" x2="58.6653" y2="32.1624" gradientUnits="userSpaceOnUse">
+<stop offset="0.225962" stop-color="#6647F0"/>
+<stop offset="0.793269" stop-color="#0091FF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_8_569" x1="5.3335" y1="31.6447" x2="58.6653" y2="31.6447" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF02F0"/>
+<stop offset="0.778846" stop-color="#F76808"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/surfsense_web/public/connectors/confluence.svg b/surfsense_web/public/connectors/confluence.svg
index f8c539608..cf9e395ee 100644
--- a/surfsense_web/public/connectors/confluence.svg
+++ b/surfsense_web/public/connectors/confluence.svg
@@ -1,15 +1 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24Z" fill="white"/>
-<path d="M12.8682 29.5623C12.6206 29.9661 12.3425 30.4347 12.1063 30.808C11.8949 31.1653 12.0084 31.626 12.3615 31.8442L17.3139 34.8919C17.4878 34.9992 17.6974 35.0322 17.8958 34.9835C18.0943 34.9348 18.2648 34.8084 18.3692 34.6328C18.5673 34.3014 18.8225 33.8709 19.1006 33.4099C21.0625 30.1719 23.0358 30.568 26.5939 32.2671L31.5044 34.6023C31.6904 34.6908 31.9043 34.7003 32.0973 34.6285C32.2904 34.5568 32.4462 34.4099 32.5292 34.2214L34.8873 28.888C35.0539 28.5071 34.8843 28.063 34.5063 27.8899C33.4701 27.4023 31.4092 26.4309 29.5539 25.5357C22.8796 22.2938 17.2073 22.5033 12.8682 29.5623Z" fill="url(#paint0_linear)"/>
-<path d="M35.0739 17.4595C35.3215 17.0557 35.5996 16.5871 35.8358 16.2138C36.0472 15.8565 35.9338 15.3958 35.5806 15.1776L30.6282 12.13C30.453 12.0119 30.2366 11.972 30.0307 12.0196C29.8248 12.0673 29.648 12.1983 29.5425 12.3814C29.3444 12.7128 29.0892 13.1433 28.8111 13.6043C26.8492 16.8424 24.8758 16.4462 21.3177 14.7471L16.4225 12.4233C16.2365 12.3348 16.0226 12.3253 15.8296 12.3971C15.6365 12.4689 15.4807 12.6158 15.3977 12.8043L13.0396 18.1376C12.873 18.5185 13.0426 18.9627 13.4206 19.1357C14.4568 19.6233 16.5177 20.5947 18.373 21.49C25.0625 24.7281 30.7349 24.5109 35.0739 17.4595Z" fill="url(#paint1_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="43.3553" y1="32.7159" x2="37.8094" y2="19.9929" gradientUnits="userSpaceOnUse">
-<stop offset="0.18" stop-color="#0052CC"/>
-<stop offset="1" stop-color="#2684FF"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="1892.63" y1="-18635.3" x2="1828.06" y2="-18930.7" gradientUnits="userSpaceOnUse">
-<stop offset="0.18" stop-color="#0052CC"/>
-<stop offset="1" stop-color="#2684FF"/>
-</linearGradient>
-</defs>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="246" viewBox="0 0 256 246"><defs><linearGradient id="SVGYOXHRc2U" x1="99.14%" x2="33.859%" y1="112.708%" y2="37.755%"><stop offset="18%" stop-color="#0052cc"/><stop offset="100%" stop-color="#2684ff"/></linearGradient><linearGradient id="SVGvLBXDeEz" x1=".926%" x2="66.18%" y1="-12.582%" y2="62.306%"><stop offset="18%" stop-color="#0052cc"/><stop offset="100%" stop-color="#2684ff"/></linearGradient></defs><path fill="url(#SVGYOXHRc2U)" d="M9.26 187.33c-2.64 4.307-5.607 9.305-8.126 13.287a8.127 8.127 0 0 0 2.722 11.052l52.823 32.507a8.127 8.127 0 0 0 11.256-2.763c2.113-3.536 4.835-8.127 7.801-13.044c20.926-34.538 41.974-30.312 79.925-12.19l52.376 24.908a8.127 8.127 0 0 0 10.93-4.063l25.152-56.886a8.127 8.127 0 0 0-4.063-10.646c-11.052-5.201-33.034-15.562-52.823-25.111c-71.189-34.579-131.691-32.344-177.972 42.949"/><path fill="url(#SVGvLBXDeEz)" d="M246.115 58.232c2.641-4.307 5.607-9.305 8.127-13.287a8.127 8.127 0 0 0-2.723-11.052L198.696 1.386a8.127 8.127 0 0 0-11.58 2.682c-2.113 3.535-4.835 8.127-7.802 13.043c-20.926 34.538-41.974 30.313-79.925 12.19L47.176 4.515a8.127 8.127 0 0 0-10.93 4.063L11.093 65.465a8.127 8.127 0 0 0 4.063 10.645c11.052 5.202 33.035 15.563 52.823 25.112c71.351 34.538 131.854 32.222 178.135-42.99"/></svg>
\ No newline at end of file
diff --git a/surfsense_web/public/connectors/jira.svg b/surfsense_web/public/connectors/jira.svg
index 69c69f628..892c240c8 100644
--- a/surfsense_web/public/connectors/jira.svg
+++ b/surfsense_web/public/connectors/jira.svg
@@ -1,16 +1 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 24C0 10.7452 10.7452 0 24 0C37.2548 0 48 10.7452 48 24C48 37.2548 37.2548 48 24 48C10.7452 48 0 37.2548 0 24Z" fill="white"/>
-<path d="M34.9367 12H23.41C23.41 13.38 23.9582 14.7035 24.934 15.6793C25.9098 16.6551 27.2333 17.2033 28.6133 17.2033H30.7367V19.2533C30.7385 22.1245 33.0656 24.4515 35.9367 24.4533V13C35.9367 12.4477 35.489 12 34.9367 12Z" fill="#2684FF"/>
-<path d="M29.2333 17.7433H17.7067C17.7085 20.6144 20.0355 22.9414 22.9067 22.9433H25.03V25C25.0337 27.8711 27.3622 30.1966 30.2333 30.1966V18.7433C30.2333 18.191 29.7856 17.7433 29.2333 17.7433Z" fill="url(#paint0_linear)"/>
-<path d="M23.5267 23.4833H12C12 26.357 14.3296 28.6866 17.2033 28.6866H19.3333V30.7366C19.3352 33.6051 21.6582 35.9311 24.5267 35.9366V24.4833C24.5267 23.931 24.079 23.4833 23.5267 23.4833Z" fill="url(#paint1_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="27.4434" y1="15.326" x2="22.5699" y2="20.4112" gradientUnits="userSpaceOnUse">
-<stop offset="0.18" stop-color="#0052CC"/>
-<stop offset="1" stop-color="#2684FF"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="376.829" y1="349.939" x2="167.455" y2="557.146" gradientUnits="userSpaceOnUse">
-<stop offset="0.18" stop-color="#0052CC"/>
-<stop offset="1" stop-color="#2684FF"/>
-</linearGradient>
-</defs>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><defs><linearGradient id="SVGGI8CDGYT" x1="98.031%" x2="58.888%" y1=".161%" y2="40.766%"><stop offset="18%" stop-color="#0052cc"/><stop offset="100%" stop-color="#2684ff"/></linearGradient><linearGradient id="SVGIFnRCene" x1="100.665%" x2="55.402%" y1=".455%" y2="44.727%"><stop offset="18%" stop-color="#0052cc"/><stop offset="100%" stop-color="#2684ff"/></linearGradient></defs><path fill="#2684ff" d="M244.658 0H121.707a55.5 55.5 0 0 0 55.502 55.502h22.649V77.37c.02 30.625 24.841 55.447 55.466 55.467V10.666C255.324 4.777 250.55 0 244.658 0"/><path fill="url(#SVGGI8CDGYT)" d="M183.822 61.262H60.872c.019 30.625 24.84 55.447 55.466 55.467h22.649v21.938c.039 30.625 24.877 55.43 55.502 55.43V71.93c0-5.891-4.776-10.667-10.667-10.667"/><path fill="url(#SVGIFnRCene)" d="M122.951 122.489H0c0 30.653 24.85 55.502 55.502 55.502h22.72v21.867c.02 30.597 24.798 55.408 55.396 55.466V133.156c0-5.891-4.776-10.667-10.667-10.667"/></svg>
\ No newline at end of file
diff --git a/surfsense_web/public/connectors/luma.svg b/surfsense_web/public/connectors/luma.svg
new file mode 100644
index 000000000..366f59ea8
--- /dev/null
+++ b/surfsense_web/public/connectors/luma.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M21.996 12.018a10.65 10.65 0 0 0-9.98 9.98h-.04c-.32-5.364-4.613-9.656-9.976-9.98v-.04c5.363-.32 9.656-4.613 9.98-9.976h.04c.324 5.363 4.617 9.656 9.98 9.98v.036z"/></svg>
\ No newline at end of file
diff --git a/surfsense_web/public/connectors/notion.svg b/surfsense_web/public/connectors/notion.svg
index 38984c87b..92c6b1573 100644
--- a/surfsense_web/public/connectors/notion.svg
+++ b/surfsense_web/public/connectors/notion.svg
@@ -1,4 +1 @@
-<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24 48C37.2548 48 48 37.2548 48 24C48 10.7452 37.2548 0 24 0C10.7452 0 0 10.7452 0 24C0 37.2548 10.7452 48 24 48Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28.4602 9.06842L11.8104 10.2936C10.4679 10.4098 10 11.285 10 12.3342V30.5316C10 31.3492 10.2916 32.048 10.993 32.982L14.9069 38.0563C15.5498 38.8734 16.134 39.0482 17.3616 38.9897L36.6969 37.823C38.3322 37.7069 38.8 36.9481 38.8 35.665V15.1925C38.8 14.5292 38.5374 14.3376 37.7632 13.7728C37.7206 13.7418 37.6764 13.7096 37.6307 13.6761L32.3159 9.94338C31.0308 9.01056 30.5048 8.89318 28.4602 9.06842ZM17.8 14.8567C16.2214 14.9632 15.8627 14.9874 14.9662 14.2596L12.6865 12.4516C12.454 12.2178 12.5706 11.9262 13.1544 11.8683L29.1613 10.7017C30.5045 10.5848 31.2054 11.0522 31.7314 11.4602L34.4769 13.4435C34.5938 13.5016 34.8854 13.8511 34.5347 13.8511L18.0038 14.843L17.8 14.8567ZM15.9587 35.4897V18.1093C15.9587 17.3512 16.1924 17.001 16.893 16.9421L35.8782 15.8343C36.5222 15.776 36.8138 16.1846 36.8138 16.9421V34.206C36.8138 34.9648 36.6966 35.6072 35.6447 35.665L17.4773 36.7155C16.4259 36.7733 15.9587 36.4238 15.9587 35.4897ZM33.8936 19.0416C34.0101 19.5671 33.8936 20.092 33.3668 20.1511L32.4914 20.3254V33.1567C31.7314 33.5649 31.0306 33.7983 30.4466 33.7983C29.5116 33.7983 29.2774 33.5064 28.5771 32.632L22.8513 23.65V32.3404L24.6631 32.7489C24.6631 32.7489 24.6631 33.7983 23.2014 33.7983L19.1716 34.0319C19.0545 33.7983 19.1716 33.2155 19.5803 33.0987L20.6319 32.8075V21.3172L19.1718 21.2003C19.0547 20.6749 19.3463 19.9173 20.1648 19.8585L24.4879 19.5673L30.4466 28.6662V20.617L28.9274 20.4428C28.8107 19.8004 29.2774 19.334 29.8617 19.2761L33.8936 19.0416Z" fill="black"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="268" viewBox="0 0 256 268"><path fill="#fff" d="M16.092 11.538L164.09.608c18.179-1.56 22.85-.508 34.28 7.801l47.243 33.282C253.406 47.414 256 48.975 256 55.207v182.527c0 11.439-4.155 18.205-18.696 19.24L65.44 267.378c-10.913.517-16.11-1.043-21.825-8.327L8.826 213.814C2.586 205.487 0 199.254 0 191.97V29.726c0-9.352 4.155-17.153 16.092-18.188"/><path d="M164.09.608L16.092 11.538C4.155 12.573 0 20.374 0 29.726v162.245c0 7.284 2.585 13.516 8.826 21.843l34.789 45.237c5.715 7.284 10.912 8.844 21.825 8.327l171.864-10.404c14.532-1.035 18.696-7.801 18.696-19.24V55.207c0-5.911-2.336-7.614-9.21-12.66l-1.185-.856L198.37 8.409C186.94.1 182.27-.952 164.09.608M69.327 52.22c-14.033.945-17.216 1.159-25.186-5.323L23.876 30.778c-2.06-2.086-1.026-4.69 4.163-5.207l142.274-10.395c11.947-1.043 18.17 3.12 22.842 6.758l24.401 17.68c1.043.525 3.638 3.637.517 3.637L71.146 52.095zm-16.36 183.954V81.222c0-6.767 2.077-9.887 8.3-10.413L230.02 60.93c5.724-.517 8.31 3.12 8.31 9.879v153.917c0 6.767-1.044 12.49-10.387 13.008l-161.487 9.361c-9.343.517-13.489-2.594-13.489-10.921M212.377 89.53c1.034 4.681 0 9.362-4.681 9.897l-7.783 1.542v114.404c-6.758 3.637-12.981 5.715-18.18 5.715c-8.308 0-10.386-2.604-16.609-10.396l-50.898-80.079v77.476l16.1 3.646s0 9.362-12.989 9.362l-35.814 2.077c-1.043-2.086 0-7.284 3.63-8.318l9.351-2.595V109.823l-12.98-1.052c-1.044-4.68 1.55-11.439 8.826-11.965l38.426-2.585l52.958 81.113v-71.76l-13.498-1.552c-1.043-5.733 3.111-9.896 8.3-10.404z"/></svg>
\ No newline at end of file
diff --git a/surfsense_web/public/connectors/slack.svg b/surfsense_web/public/connectors/slack.svg
index 1832b4653..259a9745d 100644
--- a/surfsense_web/public/connectors/slack.svg
+++ b/surfsense_web/public/connectors/slack.svg
@@ -1,6 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-aria-label="Slack" role="img"
-viewBox="0 0 512 512"><rect
-width="512" height="512"
-rx="15%"
-fill="#fff"/><g fill="#e01e5a"><path id="a" d="M149 305a39 39 0 0 1-78 0c0-22 17-39 39-39h39zM168 305a39 39 0 0 1 78 0v97a39 39 0 0 1-78 0z"/></g><use xlink:href="#a" fill="#36c5f0" transform="rotate(90,256,256)"/><use xlink:href="#a" fill="#2eb67d" transform="rotate(180,256,256)"/><use xlink:href="#a" fill="#ecb22e" transform="rotate(270,256,256)"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><path fill="#de1c59" d="M27.255 80.719c0 7.33-5.978 13.317-13.309 13.317S.63 88.049.63 80.719s5.987-13.317 13.317-13.317h13.309zm6.709 0c0-7.33 5.987-13.317 13.317-13.317s13.317 5.986 13.317 13.317v33.335c0 7.33-5.986 13.317-13.317 13.317c-7.33 0-13.317-5.987-13.317-13.317zm0 0"/><path fill="#35c5f0" d="M47.281 27.255c-7.33 0-13.317-5.978-13.317-13.309S39.951.63 47.281.63s13.317 5.987 13.317 13.317v13.309zm0 6.709c7.33 0 13.317 5.987 13.317 13.317s-5.986 13.317-13.317 13.317H13.946C6.616 60.598.63 54.612.63 47.281c0-7.33 5.987-13.317 13.317-13.317zm0 0"/><path fill="#2eb57d" d="M100.745 47.281c0-7.33 5.978-13.317 13.309-13.317s13.317 5.987 13.317 13.317s-5.987 13.317-13.317 13.317h-13.309zm-6.709 0c0 7.33-5.987 13.317-13.317 13.317s-13.317-5.986-13.317-13.317V13.946C67.402 6.616 73.388.63 80.719.63c7.33 0 13.317 5.987 13.317 13.317zm0 0"/><path fill="#ebb02e" d="M80.719 100.745c7.33 0 13.317 5.978 13.317 13.309s-5.987 13.317-13.317 13.317s-13.317-5.987-13.317-13.317v-13.309zm0-6.709c-7.33 0-13.317-5.987-13.317-13.317s5.986-13.317 13.317-13.317h33.335c7.33 0 13.317 5.986 13.317 13.317c0 7.33-5.987 13.317-13.317 13.317zm0 0"/></svg>
\ No newline at end of file
diff --git a/surfsense_web/public/connectors/tavily.svg b/surfsense_web/public/connectors/tavily.svg
new file mode 100644
index 000000000..cd3b556d8
--- /dev/null
+++ b/surfsense_web/public/connectors/tavily.svg
@@ -0,0 +1 @@
+<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Tavily</title><path d="M9.1.503l2.824 4.47a1.078 1.078 0 01-.911 1.655H9.858v6.692h-1.67V0c.35 0 .7.168.912.503z" fill="#8FBCFA"></path><path d="M4.453 4.974L7.277.503A1.07 1.07 0 018.189 0v13.32a2.633 2.633 0 00-1.67.48V6.628H5.364c-.85 0-1.366-.936-.912-1.654z" fill="#468BFF"></path><path d="M17.041 17.74h-7.028c.423-.457.67-1.049.7-1.67h12.956c0 .35-.168.7-.502.912l-4.472 2.823a1.078 1.078 0 01-1.654-.911v-1.155z" fill="#FDBB11"></path><path d="M18.695 12.334l4.47 2.824c.336.212.503.562.503.912H10.713a2.65 2.65 0 00-.493-1.67h6.822v-1.154c0-.85.935-1.366 1.653-.912z" fill="#F6D785"></path><path d="M4.394 19.605L.316 23.683a1.07 1.07 0 001 .29l5.158-1.165A1.078 1.078 0 007 20.994l-.816-.816 3.073-3.074a1.61 1.61 0 000-2.276l-.042-.043-4.82 4.82z" fill="#FF9A9D"></path><path d="M3.822 17.817l3.073-3.074a1.61 1.61 0 012.277 0l.042.043-4.818 4.819-4.08 4.079a1.07 1.07 0 01-.289-1l1.165-5.158A1.078 1.078 0 013.006 17l.816.817z" fill="#FE363B"></path></svg>
\ No newline at end of file
diff --git a/surfsense_web/public/connectors/youtube.svg b/surfsense_web/public/connectors/youtube.svg
index ba2395b5d..7a705392a 100644
--- a/surfsense_web/public/connectors/youtube.svg
+++ b/surfsense_web/public/connectors/youtube.svg
@@ -1 +1 @@
-<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;" version="1.1" viewBox="0 0 24 24" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><rect height="24" id="Artboard15" style="fill:none;" width="24" x="0" y="0"/><g><path d="M2.093,9.075c0.125,-1.941 1.629,-3.509 3.562,-3.716c2.005,-0.202 4.136,-0.311 6.345,-0.311c2.209,0 4.34,0.109 6.345,0.312c1.933,0.206 3.437,1.774 3.562,3.715c0.061,0.956 0.093,1.933 0.093,2.925c0,0.992 -0.032,1.969 -0.093,2.925c-0.125,1.941 -1.629,3.509 -3.562,3.716c-2.005,0.202 -4.136,0.311 -6.345,0.311c-2.209,0 -4.34,-0.109 -6.345,-0.312c-1.933,-0.206 -3.437,-1.774 -3.562,-3.715c-0.061,-0.956 -0.093,-1.933 -0.093,-2.925c0,-0.992 0.032,-1.969 0.093,-2.925Z" style="fill:#f00;"/><path d="M15.055,12l-4.909,2.995l0,-5.99l4.909,2.995Z" style="fill:#fff;"/></g></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="180" viewBox="0 0 256 180"><path fill="#f00" d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134"/><path fill="#fff" d="m102.421 128.06l66.328-38.418l-66.328-38.418z"/></svg>
\ No newline at end of file

From 495168b243a1ffb8dd52e9a39705989757c4a825 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 1 Jan 2026 03:11:37 +0530
Subject: [PATCH 27/28] fix: reintroduced blocknote editor page

---
 .../editor/[documentId]/page.tsx              | 520 ++++++++++++++++++
 1 file changed, 520 insertions(+)
 create mode 100644 surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx

diff --git a/surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx
new file mode 100644
index 000000000..eb7bc23fc
--- /dev/null
+++ b/surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx
@@ -0,0 +1,520 @@
+"use client";
+
+import { useQueryClient } from "@tanstack/react-query";
+import { useAtom } from "jotai";
+import { AlertCircle, ArrowLeft, FileText, Loader2, Save } from "lucide-react";
+import { motion } from "motion/react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { hasUnsavedEditorChangesAtom, pendingEditorNavigationAtom } from "@/atoms/editor/ui.atoms";
+import { BlockNoteEditor } from "@/components/DynamicBlockNoteEditor";
+import {
+	AlertDialog,
+	AlertDialogAction,
+	AlertDialogCancel,
+	AlertDialogContent,
+	AlertDialogDescription,
+	AlertDialogFooter,
+	AlertDialogHeader,
+	AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { notesApiService } from "@/lib/apis/notes-api.service";
+import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
+
+// BlockNote types
+type BlockNoteInlineContent =
+	| string
+	| { text?: string; type?: string; styles?: Record<string, unknown> };
+
+interface BlockNoteBlock {
+	type: string;
+	content?: BlockNoteInlineContent[];
+	children?: BlockNoteBlock[];
+	props?: Record<string, unknown>;
+}
+
+type BlockNoteDocument = BlockNoteBlock[] | null | undefined;
+
+interface EditorContent {
+	document_id: number;
+	title: string;
+	document_type?: string;
+	blocknote_document: BlockNoteDocument;
+	updated_at: string | null;
+}
+
+// Helper function to extract title from BlockNote document
+// Takes the text content from the first block (should be a heading for notes)
+function extractTitleFromBlockNote(blocknoteDocument: BlockNoteDocument): string {
+	if (!blocknoteDocument || !Array.isArray(blocknoteDocument) || blocknoteDocument.length === 0) {
+		return "Untitled";
+	}
+
+	const firstBlock = blocknoteDocument[0];
+	if (!firstBlock) {
+		return "Untitled";
+	}
+
+	// Extract text from block content
+	// BlockNote blocks have a content array with inline content
+	if (firstBlock.content && Array.isArray(firstBlock.content)) {
+		const textContent = firstBlock.content
+			.map((item: BlockNoteInlineContent) => {
+				if (typeof item === "string") return item;
+				if (typeof item === "object" && item?.text) return item.text;
+				return "";
+			})
+			.join("")
+			.trim();
+		return textContent || "Untitled";
+	}
+
+	return "Untitled";
+}
+
+export default function EditorPage() {
+	const params = useParams();
+	const router = useRouter();
+	const queryClient = useQueryClient();
+	const documentId = params.documentId as string;
+	const searchSpaceId = Number(params.search_space_id);
+	const isNewNote = documentId === "new";
+
+	const [document, setDocument] = useState<EditorContent | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [saving, setSaving] = useState(false);
+	const [editorContent, setEditorContent] = useState<BlockNoteDocument>(null);
+	const [error, setError] = useState<string | null>(null);
+	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+	const [showUnsavedDialog, setShowUnsavedDialog] = useState(false);
+
+	// Global state for cross-component communication
+	const [, setGlobalHasUnsavedChanges] = useAtom(hasUnsavedEditorChangesAtom);
+	const [pendingNavigation, setPendingNavigation] = useAtom(pendingEditorNavigationAtom);
+
+	// Sync local unsaved changes state with global atom
+	useEffect(() => {
+		setGlobalHasUnsavedChanges(hasUnsavedChanges);
+	}, [hasUnsavedChanges, setGlobalHasUnsavedChanges]);
+
+	// Cleanup global state when component unmounts
+	useEffect(() => {
+		return () => {
+			setGlobalHasUnsavedChanges(false);
+			setPendingNavigation(null);
+		};
+	}, [setGlobalHasUnsavedChanges, setPendingNavigation]);
+
+	// Handle pending navigation from sidebar (e.g., when user clicks "+" to create new note)
+	useEffect(() => {
+		if (pendingNavigation) {
+			if (hasUnsavedChanges) {
+				// Show dialog to confirm navigation
+				setShowUnsavedDialog(true);
+			} else {
+				// No unsaved changes, navigate immediately
+				router.push(pendingNavigation);
+				setPendingNavigation(null);
+			}
+		}
+	}, [pendingNavigation, hasUnsavedChanges, router, setPendingNavigation]);
+
+	// Reset state when documentId changes (e.g., navigating from existing note to new note)
+	useEffect(() => {
+		setDocument(null);
+		setEditorContent(null);
+		setError(null);
+		setHasUnsavedChanges(false);
+		setLoading(true);
+	}, []);
+
+	// Fetch document content - DIRECT CALL TO FASTAPI
+	// Skip fetching if this is a new note
+	useEffect(() => {
+		async function fetchDocument() {
+			// For new notes, initialize with empty state
+			if (isNewNote) {
+				setDocument({
+					document_id: 0,
+					title: "Untitled",
+					document_type: "NOTE",
+					blocknote_document: null,
+					updated_at: null,
+				});
+				setEditorContent(null);
+				setLoading(false);
+				return;
+			}
+
+			const token = getBearerToken();
+			if (!token) {
+				console.error("No auth token found");
+				// Redirect to login with current path saved
+				redirectToLogin();
+				return;
+			}
+
+			try {
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${params.search_space_id}/documents/${documentId}/editor-content`,
+					{ method: "GET" }
+				);
+
+				if (!response.ok) {
+					const errorData = await response
+						.json()
+						.catch(() => ({ detail: "Failed to fetch document" }));
+					const errorMessage = errorData.detail || "Failed to fetch document";
+					throw new Error(errorMessage);
+				}
+
+				const data = await response.json();
+
+				// Check if blocknote_document exists
+				if (!data.blocknote_document) {
+					const errorMsg =
+						"This document does not have BlockNote content. Please re-upload the document to enable editing.";
+					setError(errorMsg);
+					setLoading(false);
+					return;
+				}
+
+				setDocument(data);
+				setEditorContent(data.blocknote_document);
+				setError(null);
+			} catch (error) {
+				console.error("Error fetching document:", error);
+				const errorMessage =
+					error instanceof Error ? error.message : "Failed to fetch document. Please try again.";
+				setError(errorMessage);
+			} finally {
+				setLoading(false);
+			}
+		}
+
+		if (documentId) {
+			fetchDocument();
+		}
+	}, [documentId, params.search_space_id, isNewNote]);
+
+	// Track changes to mark as unsaved
+	useEffect(() => {
+		if (editorContent && document) {
+			setHasUnsavedChanges(true);
+		}
+	}, [editorContent, document]);
+
+	// Check if this is a NOTE type document
+	const isNote = isNewNote || document?.document_type === "NOTE";
+
+	// Extract title dynamically from editor content for notes, otherwise use document title
+	const displayTitle = useMemo(() => {
+		if (isNote && editorContent) {
+			return extractTitleFromBlockNote(editorContent);
+		}
+		return document?.title || "Untitled";
+	}, [isNote, editorContent, document?.title]);
+
+	// TODO: Maybe add Auto-save every 30 seconds - DIRECT CALL TO FASTAPI
+
+	// Save and exit - DIRECT CALL TO FASTAPI
+	// For new notes, create the note first, then save
+	const handleSave = async () => {
+		const token = getBearerToken();
+		if (!token) {
+			toast.error("Please login to save");
+			redirectToLogin();
+			return;
+		}
+
+		setSaving(true);
+		setError(null);
+
+		try {
+			// If this is a new note, create it first
+			if (isNewNote) {
+				const title = extractTitleFromBlockNote(editorContent);
+
+				// Create the note first
+				const note = await notesApiService.createNote({
+					search_space_id: searchSpaceId,
+					title: title,
+					blocknote_document: editorContent || undefined,
+				});
+
+				// If there's content, save it properly and trigger reindexing
+				if (editorContent) {
+					const response = await authenticatedFetch(
+						`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${note.id}/save`,
+						{
+							method: "POST",
+							headers: { "Content-Type": "application/json" },
+							body: JSON.stringify({ blocknote_document: editorContent }),
+						}
+					);
+
+					if (!response.ok) {
+						const errorData = await response
+							.json()
+							.catch(() => ({ detail: "Failed to save document" }));
+						throw new Error(errorData.detail || "Failed to save document");
+					}
+				}
+
+				setHasUnsavedChanges(false);
+				toast.success("Note created successfully! Reindexing in background...");
+
+				// Invalidate notes query to refresh the sidebar
+				queryClient.invalidateQueries({
+					queryKey: ["notes", String(searchSpaceId)],
+				});
+
+				// Update URL to reflect the new document ID without navigation
+				window.history.replaceState({}, "", `/dashboard/${searchSpaceId}/editor/${note.id}`);
+				// Update document state to reflect the new ID
+				setDocument({
+					document_id: note.id,
+					title: title,
+					document_type: "NOTE",
+					blocknote_document: editorContent,
+					updated_at: new Date().toISOString(),
+				});
+			} else {
+				// Existing document - save normally
+				if (!editorContent) {
+					toast.error("No content to save");
+					setSaving(false);
+					return;
+				}
+
+				// Save blocknote_document and trigger reindexing in background
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${params.search_space_id}/documents/${documentId}/save`,
+					{
+						method: "POST",
+						headers: { "Content-Type": "application/json" },
+						body: JSON.stringify({ blocknote_document: editorContent }),
+					}
+				);
+
+				if (!response.ok) {
+					const errorData = await response
+						.json()
+						.catch(() => ({ detail: "Failed to save document" }));
+					throw new Error(errorData.detail || "Failed to save document");
+				}
+
+				setHasUnsavedChanges(false);
+				toast.success("Document saved! Reindexing in background...");
+
+				// Invalidate notes query when updating notes to refresh the sidebar
+				if (isNote) {
+					queryClient.invalidateQueries({
+						queryKey: ["notes", String(searchSpaceId)],
+					});
+				}
+			}
+		} catch (error) {
+			console.error("Error saving document:", error);
+			const errorMessage =
+				error instanceof Error
+					? error.message
+					: isNewNote
+						? "Failed to create note. Please try again."
+						: "Failed to save document. Please try again.";
+			setError(errorMessage);
+			toast.error(errorMessage);
+		} finally {
+			setSaving(false);
+		}
+	};
+
+	const handleBack = () => {
+		if (hasUnsavedChanges) {
+			setShowUnsavedDialog(true);
+		} else {
+			router.push(`/dashboard/${searchSpaceId}/new-chat`);
+		}
+	};
+
+	const handleConfirmLeave = () => {
+		setShowUnsavedDialog(false);
+		// Clear global unsaved state
+		setGlobalHasUnsavedChanges(false);
+		setHasUnsavedChanges(false);
+
+		// If there's a pending navigation (from sidebar), use that; otherwise go back to chat
+		if (pendingNavigation) {
+			router.push(pendingNavigation);
+			setPendingNavigation(null);
+		} else {
+			router.push(`/dashboard/${searchSpaceId}/new-chat`);
+		}
+	};
+
+	const handleCancelLeave = () => {
+		setShowUnsavedDialog(false);
+		// Clear pending navigation if user cancels
+		setPendingNavigation(null);
+	};
+
+	if (loading) {
+		return (
+			<div className="flex items-center justify-center min-h-[400px] p-6">
+				<Card className="w-full max-w-md">
+					<CardContent className="flex flex-col items-center justify-center py-12">
+						<Loader2 className="h-12 w-12 text-primary animate-spin mb-4" />
+						<p className="text-muted-foreground">Loading editor...</p>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="flex items-center justify-center min-h-[400px] p-6">
+				<motion.div
+					initial={{ opacity: 0, y: 20 }}
+					animate={{ opacity: 1, y: 0 }}
+					className="w-full max-w-md"
+				>
+					<Card className="border-destructive/50">
+						<CardHeader>
+							<div className="flex items-center gap-2">
+								<AlertCircle className="h-5 w-5 text-destructive" />
+								<CardTitle className="text-destructive">Error</CardTitle>
+							</div>
+							<CardDescription>{error}</CardDescription>
+						</CardHeader>
+						<CardContent>
+							<Button
+								onClick={() => router.push(`/dashboard/${searchSpaceId}/new-chat`)}
+								variant="outline"
+								className="gap-2"
+							>
+								<ArrowLeft className="h-4 w-4" />
+								Back
+							</Button>
+						</CardContent>
+					</Card>
+				</motion.div>
+			</div>
+		);
+	}
+
+	if (!document && !isNewNote) {
+		return (
+			<div className="flex items-center justify-center min-h-[400px] p-6">
+				<Card className="w-full max-w-md">
+					<CardContent className="flex flex-col items-center justify-center py-12">
+						<FileText className="h-12 w-12 text-muted-foreground mb-4" />
+						<p className="text-muted-foreground">Document not found</p>
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	return (
+		<motion.div
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			className="flex flex-col min-h-screen w-full"
+		>
+			{/* Toolbar */}
+			<div className="sticky top-0 z-40 flex h-14 md:h-16 shrink-0 items-center gap-2 md:gap-4 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-3 md:px-6">
+				<div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">
+					<FileText className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground shrink-0" />
+					<div className="flex flex-col min-w-0">
+						<h1 className="text-base md:text-lg font-semibold truncate">{displayTitle}</h1>
+						{hasUnsavedChanges && (
+							<p className="text-[10px] md:text-xs text-muted-foreground">Unsaved changes</p>
+						)}
+					</div>
+				</div>
+
+				<div className="flex items-center gap-2">
+					<Button
+						variant="outline"
+						onClick={handleBack}
+						disabled={saving}
+						className="gap-1 md:gap-2 px-2 md:px-4 h-8 md:h-10"
+					>
+						<ArrowLeft className="h-3.5 w-3.5 md:h-4 md:w-4" />
+						<span className="text-xs md:text-sm">Back</span>
+					</Button>
+					<Button
+						onClick={handleSave}
+						disabled={saving}
+						className="gap-1 md:gap-2 px-2 md:px-4 h-8 md:h-10"
+					>
+						{saving ? (
+							<>
+								<Loader2 className="h-3.5 w-3.5 md:h-4 md:w-4 animate-spin" />
+								<span className="text-xs md:text-sm">
+									{isNewNote ? "Creating..." : "Saving..."}
+								</span>
+							</>
+						) : (
+							<>
+								<Save className="h-3.5 w-3.5 md:h-4 md:w-4" />
+								<span className="text-xs md:text-sm">Save</span>
+							</>
+						)}
+					</Button>
+				</div>
+			</div>
+
+			{/* Editor Container */}
+			<div className="flex-1 min-h-0 overflow-hidden relative">
+				<div className="h-full w-full overflow-auto p-3 md:p-6">
+					{error && (
+						<motion.div
+							initial={{ opacity: 0, y: -10 }}
+							animate={{ opacity: 1, y: 0 }}
+							className="mb-6 max-w-4xl mx-auto"
+						>
+							<div className="flex items-center gap-2 p-4 rounded-lg border border-destructive/50 bg-destructive/10 text-destructive">
+								<AlertCircle className="h-5 w-5 shrink-0" />
+								<p className="text-sm">{error}</p>
+							</div>
+						</motion.div>
+					)}
+					<div className="max-w-4xl mx-auto">
+						<BlockNoteEditor
+							key={documentId} // Force re-mount when document changes
+							initialContent={isNewNote ? undefined : editorContent}
+							onChange={setEditorContent}
+							useTitleBlock={isNote}
+						/>
+					</div>
+				</div>
+			</div>
+
+			{/* Unsaved Changes Dialog */}
+			<AlertDialog
+				open={showUnsavedDialog}
+				onOpenChange={(open) => {
+					if (!open) handleCancelLeave();
+				}}
+			>
+				<AlertDialogContent>
+					<AlertDialogHeader>
+						<AlertDialogTitle>Unsaved Changes</AlertDialogTitle>
+						<AlertDialogDescription>
+							You have unsaved changes. Are you sure you want to leave?
+						</AlertDialogDescription>
+					</AlertDialogHeader>
+					<AlertDialogFooter>
+						<AlertDialogCancel onClick={handleCancelLeave}>Cancel</AlertDialogCancel>
+						<AlertDialogAction onClick={handleConfirmLeave}>OK</AlertDialogAction>
+					</AlertDialogFooter>
+				</AlertDialogContent>
+			</AlertDialog>
+		</motion.div>
+	);
+}
\ No newline at end of file

From 77ea261e29d493ecb5a830b2f56e3d857ad32b84 Mon Sep 17 00:00:00 2001
From: "DESKTOP-RTLN3BA\\$punk" <vermarohanfinal@gmail.com>
Date: Wed, 31 Dec 2025 19:32:44 -0800
Subject: [PATCH 28/28] fix(typos): update breadcrumb key generation and
 enforce number coercion for optional size in Google Drive item type

---
 surfsense_web/components/dashboard-breadcrumb.tsx | 2 +-
 surfsense_web/contracts/types/connector.types.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/surfsense_web/components/dashboard-breadcrumb.tsx b/surfsense_web/components/dashboard-breadcrumb.tsx
index 99854d25f..c6609c6d0 100644
--- a/surfsense_web/components/dashboard-breadcrumb.tsx
+++ b/surfsense_web/components/dashboard-breadcrumb.tsx
@@ -241,7 +241,7 @@ export function DashboardBreadcrumb() {
 		<Breadcrumb>
 			<BreadcrumbList>
 				{breadcrumbs.map((item, index) => (
-					<React.Fragment key={item.href || item.label}>
+					<React.Fragment key={`${index}-${item.href || item.label}`}>
 						<BreadcrumbItem>
 							{index === breadcrumbs.length - 1 ? (
 								<BreadcrumbPage>{item.label}</BreadcrumbPage>
diff --git a/surfsense_web/contracts/types/connector.types.ts b/surfsense_web/contracts/types/connector.types.ts
index 4b4a63f92..5b67297ae 100644
--- a/surfsense_web/contracts/types/connector.types.ts
+++ b/surfsense_web/contracts/types/connector.types.ts
@@ -48,7 +48,7 @@ export const googleDriveItem = z.object({
 	mimeType: z.string(),
 	isFolder: z.boolean(),
 	parents: z.array(z.string()).optional(),
-	size: z.number().optional(),
+	size: z.coerce.number().optional(),
 	iconLink: z.string().optional(),
 	webViewLink: z.string().optional(),
 	createdTime: z.string().optional(),