Merge pull request #866 from AnishSarkar22/fix/docker-dev

fix: enhance docker build CI pipeline, update docker ports & docker docs

surfsense_web/components/assistant-ui/assistant-message.tsx

@@ -6,16 +6,11 @@ import {
 	useAssistantState,
 	useMessage,
 } from "@assistant-ui/react";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtomValue } from "jotai";
 import { CheckIcon, CopyIcon, DownloadIcon, MessageSquare, RefreshCwIcon } from "lucide-react";
 import type { FC } from "react";
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import {
-	addingCommentToMessageIdAtom,
-	commentsCollapsedAtom,
-	commentsEnabledAtom,
-	targetCommentIdAtom,
-} from "@/atoms/chat/current-thread.atom";
+import { commentsEnabledAtom, targetCommentIdAtom } from "@/atoms/chat/current-thread.atom";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { MarkdownText } from "@/components/assistant-ui/markdown-text";
 import {
@@ -26,7 +21,6 @@ import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { CommentPanelContainer } from "@/components/chat-comments/comment-panel-container/comment-panel-container";
 import { CommentSheet } from "@/components/chat-comments/comment-sheet/comment-sheet";
-import { CommentTrigger } from "@/components/chat-comments/comment-trigger/comment-trigger";
 import { useComments } from "@/hooks/use-comments";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { cn } from "@/lib/utils";
@@ -96,20 +90,17 @@ function parseMessageId(assistantUiMessageId: string | undefined): number | null
 }
 
 export const AssistantMessage: FC = () => {
-	const [messageHeight, setMessageHeight] = useState<number | undefined>(undefined);
 	const [isSheetOpen, setIsSheetOpen] = useState(false);
+	const [isInlineOpen, setIsInlineOpen] = useState(false);
 	const messageRef = useRef<HTMLDivElement>(null);
+	const commentPanelRef = useRef<HTMLDivElement>(null);
+	const commentTriggerRef = useRef<HTMLButtonElement>(null);
 	const messageId = useAssistantState(({ message }) => message?.id);
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
 	const dbMessageId = parseMessageId(messageId);
 	const commentsEnabled = useAtomValue(commentsEnabledAtom);
-	const commentsCollapsed = useAtomValue(commentsCollapsedAtom);
-	const [addingCommentToMessageId, setAddingCommentToMessageId] = useAtom(
-		addingCommentToMessageIdAtom
-	);
 
-	// Screen size detection for responsive comment UI
-	// Mobile: < 768px (bottom sheet), Medium: 768px - 1024px (right sheet), Desktop: >= 1024px (inline panel)
+	// Desktop: >= 1024px (inline expandable), Medium: 768px-1023px (right sheet), Mobile: <768px (bottom sheet)
 	const isMediumScreen = useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
 	const isDesktop = useMediaQuery("(min-width: 1024px)");
 
@@ -122,10 +113,8 @@ export const AssistantMessage: FC = () => {
 		enabled: !!dbMessageId,
 	});
 
-	// Target comment navigation - read target from global atom
 	const targetCommentId = useAtomValue(targetCommentIdAtom);
 
-	// Check if target comment belongs to this message (including replies)
 	const hasTargetComment = useMemo(() => {
 		if (!targetCommentId || !commentsData?.comments) return false;
 		return commentsData.comments.some(
@@ -135,27 +124,36 @@ export const AssistantMessage: FC = () => {
 
 	const commentCount = commentsData?.total_count ?? 0;
 	const hasComments = commentCount > 0;
-	const isAddingComment = dbMessageId !== null && addingCommentToMessageId === dbMessageId;
-	const showCommentPanel = hasComments || isAddingComment;
 
-	const handleToggleAddComment = () => {
-		if (!dbMessageId) return;
-		setAddingCommentToMessageId(isAddingComment ? null : dbMessageId);
-	};
-
-	const handleCommentTriggerClick = () => {
-		setIsSheetOpen(true);
-	};
+	const showCommentTrigger = searchSpaceId && commentsEnabled && !isMessageStreaming && dbMessageId;
 
+	// Close floating panel when clicking outside (but not on portaled popover/dropdown content)
 	useEffect(() => {
-		if (!messageRef.current) return;
-		const el = messageRef.current;
-		const update = () => setMessageHeight(el.offsetHeight);
-		update();
-		const observer = new ResizeObserver(update);
-		observer.observe(el);
-		return () => observer.disconnect();
-	}, []);
+		if (!isInlineOpen) return;
+		const handleClickOutside = (e: MouseEvent) => {
+			const target = e.target as Element;
+			if (
+				commentPanelRef.current?.contains(target) ||
+				commentTriggerRef.current?.contains(target) ||
+				target.closest?.("[data-radix-popper-content-wrapper]")
+			)
+				return;
+			setIsInlineOpen(false);
+		};
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, [isInlineOpen]);
+
+	// Auto-open floating panel on desktop when this message has the target comment
+	useEffect(() => {
+		if (hasTargetComment && isDesktop && commentsLoaded) {
+			setIsInlineOpen(true);
+			const timeoutId = setTimeout(() => {
+				messageRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
+			}, 100);
+			return () => clearTimeout(timeoutId);
+		}
+	}, [hasTargetComment, isDesktop, commentsLoaded]);
 
 	// Auto-open sheet on mobile/tablet when this message has the target comment
 	useEffect(() => {
@@ -164,20 +162,6 @@ export const AssistantMessage: FC = () => {
 		}
 	}, [hasTargetComment, isDesktop, commentsLoaded]);
 
-	// Scroll message into view when it contains target comment (desktop)
-	useEffect(() => {
-		if (hasTargetComment && isDesktop && commentsLoaded && messageRef.current) {
-			// Small delay to ensure DOM is ready after comments render
-			const timeoutId = setTimeout(() => {
-				messageRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
-			}, 100);
-			return () => clearTimeout(timeoutId);
-		}
-	}, [hasTargetComment, isDesktop, commentsLoaded]);
-
-	const showCommentTrigger = searchSpaceId && commentsEnabled && !isMessageStreaming && dbMessageId;
-
-	// Determine sheet side based on screen size
 	const sheetSide = isMediumScreen ? "right" : "bottom";
 
 	return (
@@ -186,54 +170,25 @@ export const AssistantMessage: FC = () => {
 			className="aui-assistant-message-root group fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150"
 			data-role="assistant"
 		>
-			<AssistantMessageInner />
-
-			{/* Desktop comment panel - only on lg screens and above, hidden when collapsed */}
-			{searchSpaceId && commentsEnabled && !isMessageStreaming && !commentsCollapsed && (
-				<div className="absolute left-full top-0 ml-4 hidden lg:block w-72">
-					<div
-						className={`sticky top-3 ${showCommentPanel ? "opacity-100" : "opacity-0 group-hover:opacity-100"} transition-opacity`}
-					>
-						{!hasComments && (
-							<CommentTrigger
-								commentCount={0}
-								isOpen={isAddingComment}
-								onClick={handleToggleAddComment}
-								disabled={!dbMessageId}
-							/>
-						)}
-
-						{showCommentPanel && dbMessageId && (
-							<div
-								className={
-									hasComments ? "" : "mt-2 animate-in fade-in slide-in-from-top-2 duration-200"
-								}
-							>
-								<CommentPanelContainer
-									messageId={dbMessageId}
-									isOpen={true}
-									maxHeight={messageHeight}
-								/>
-							</div>
-						)}
-					</div>
-				</div>
-			)}
-
-			{/* Mobile & Medium screen comment trigger - shown below lg breakpoint */}
-			{showCommentTrigger && !isDesktop && (
-				<div className="ml-2 mt-1 flex justify-start">
+			{/* Comment trigger — right-aligned, just below user query on all screen sizes */}
+			{showCommentTrigger && (
+				<div className="mr-2 mb-1 flex justify-end">
 					<button
+						ref={isDesktop ? commentTriggerRef : undefined}
 						type="button"
-						onClick={handleCommentTriggerClick}
+						onClick={
+							isDesktop ? () => setIsInlineOpen((prev) => !prev) : () => setIsSheetOpen(true)
+						}
 						className={cn(
-							"flex items-center gap-2 rounded-full px-3 py-1.5 text-sm transition-colors",
-							hasComments
-								? "border border-primary/50 bg-primary/5 text-primary hover:bg-primary/10"
-								: "text-muted-foreground hover:bg-muted hover:text-foreground"
+							"flex items-center gap-1.5 rounded-full px-3 py-1 text-sm transition-colors",
+							isDesktop && isInlineOpen
+								? "bg-primary/10 text-primary"
+								: hasComments
+									? "text-primary hover:bg-primary/10"
+									: "text-muted-foreground hover:text-foreground hover:bg-muted"
 						)}
 					>
-						<MessageSquare className={cn("size-4", hasComments && "fill-current")} />
+						<MessageSquare className={cn("size-3.5", hasComments && "fill-current")} />
 						{hasComments ? (
 							<span>
 								{commentCount} {commentCount === 1 ? "comment" : "comments"}
@@ -245,7 +200,19 @@ export const AssistantMessage: FC = () => {
 				</div>
 			)}
 
-			{/* Comment sheet - bottom for mobile, right for medium screens */}
+			{/* Desktop floating comment panel — overlays on top of chat content */}
+			{showCommentTrigger && isDesktop && isInlineOpen && dbMessageId && (
+				<div
+					ref={commentPanelRef}
+					className="absolute right-0 top-10 z-30 w-full max-w-md animate-in fade-in slide-in-from-top-2 duration-200"
+				>
+					<CommentPanelContainer messageId={dbMessageId} isOpen={true} variant="inline" />
+				</div>
+			)}
+
+			<AssistantMessageInner />
+
+			{/* Comment sheet — bottom for mobile, right for medium screens */}
 			{showCommentTrigger && !isDesktop && (
 				<CommentSheet
 					messageId={dbMessageId}

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

@@ -6,6 +6,7 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { type FC, forwardRef, useImperativeHandle, useMemo } from "react";
 import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
+import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
 import {
 	globalNewLLMConfigsAtom,
 	llmPreferencesAtom,
@@ -19,7 +20,6 @@ import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { Spinner } from "@/components/ui/spinner";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
 import { useConnectorsElectric } from "@/hooks/use-connectors-electric";
 import { cn } from "@/lib/utils";
 import { ConnectorDialogHeader } from "./connector-popup/components/connector-dialog-header";
@@ -47,400 +47,407 @@ interface ConnectorIndicatorProps {
 
 export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, ConnectorIndicatorProps>(
 	({ showTrigger = true }, ref) => {
-	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
-	const searchParams = useSearchParams();
-	const { data: currentUser } = useAtomValue(currentUserAtom);
-	const { data: preferences = {}, isFetching: preferencesLoading } =
-		useAtomValue(llmPreferencesAtom);
-	const { data: globalConfigs = [], isFetching: globalConfigsLoading } =
-		useAtomValue(globalNewLLMConfigsAtom);
+		const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
+		const searchParams = useSearchParams();
+		const { data: currentUser } = useAtomValue(currentUserAtom);
+		const { data: preferences = {}, isFetching: preferencesLoading } =
+			useAtomValue(llmPreferencesAtom);
+		const { data: globalConfigs = [], isFetching: globalConfigsLoading } =
+			useAtomValue(globalNewLLMConfigsAtom);
 
-	// Check if document summary LLM is properly configured
-	// - If ID is 0 (Auto mode), we need global configs to be available
-	// - If ID is positive (user config) or negative (specific global config), it's configured
-	// - If ID is null/undefined, it's not configured
-	const docSummaryLlmId = preferences.document_summary_llm_id;
-	const isAutoMode = docSummaryLlmId === 0;
-	const hasGlobalConfigs = globalConfigs.length > 0;
+		// Check if document summary LLM is properly configured
+		// - If ID is 0 (Auto mode), we need global configs to be available
+		// - If ID is positive (user config) or negative (specific global config), it's configured
+		// - If ID is null/undefined, it's not configured
+		const docSummaryLlmId = preferences.document_summary_llm_id;
+		const isAutoMode = docSummaryLlmId === 0;
+		const hasGlobalConfigs = globalConfigs.length > 0;
 
-	const hasDocumentSummaryLLM =
-		docSummaryLlmId !== null &&
-		docSummaryLlmId !== undefined &&
-		// If it's Auto mode, we need global configs to actually be available
-		(!isAutoMode || hasGlobalConfigs);
+		const hasDocumentSummaryLLM =
+			docSummaryLlmId !== null &&
+			docSummaryLlmId !== undefined &&
+			// If it's Auto mode, we need global configs to actually be available
+			(!isAutoMode || hasGlobalConfigs);
 
-	const llmConfigLoading = preferencesLoading || globalConfigsLoading;
+		const llmConfigLoading = preferencesLoading || globalConfigsLoading;
 
-	// Fetch document type counts via the lightweight /type-counts endpoint (cached 10 min)
-	const { data: documentTypeCounts, isFetching: documentTypesLoading } =
-		useAtomValue(documentTypeCountsAtom);
+		// Fetch document type counts via the lightweight /type-counts endpoint (cached 10 min)
+		const { data: documentTypeCounts, isFetching: documentTypesLoading } =
+			useAtomValue(documentTypeCountsAtom);
 
-	// Read status inbox items from shared atom (populated by LayoutDataProvider)
-	// instead of creating a duplicate useInbox("status") hook.
-	const statusInboxItems = useAtomValue(statusInboxItemsAtom);
-	const inboxItems = useMemo(
-		() => statusInboxItems.filter((item) => item.type === "connector_indexing"),
-		[statusInboxItems]
-	);
+		// Read status inbox items from shared atom (populated by LayoutDataProvider)
+		// instead of creating a duplicate useInbox("status") hook.
+		const statusInboxItems = useAtomValue(statusInboxItemsAtom);
+		const inboxItems = useMemo(
+			() => statusInboxItems.filter((item) => item.type === "connector_indexing"),
+			[statusInboxItems]
+		);
 
-	// Check if YouTube view is active
-	const isYouTubeView = searchParams.get("view") === "youtube";
+		// Check if YouTube view is active
+		const isYouTubeView = searchParams.get("view") === "youtube";
 
-	// Use the custom hook for dialog state management
-	const {
-		isOpen,
-		activeTab,
-		connectingId,
-		isScrolled,
-		searchQuery,
-		indexingConfig,
-		indexingConnector,
-		indexingConnectorConfig,
-		editingConnector,
-		connectingConnectorType,
-		isCreatingConnector,
-		startDate,
-		endDate,
-		isStartingIndexing,
-		isSaving,
-		isDisconnecting,
-		periodicEnabled,
-		frequencyMinutes,
-		enableSummary,
-		allConnectors,
-		viewingAccountsType,
-		viewingMCPList,
-		setSearchQuery,
-		setStartDate,
-		setEndDate,
-		setPeriodicEnabled,
-		setFrequencyMinutes,
-		setEnableSummary,
-		handleOpenChange,
-		handleTabChange,
-		handleScroll,
-		handleConnectOAuth,
-		handleConnectNonOAuth,
-		handleCreateWebcrawler,
-		handleCreateYouTubeCrawler,
-		handleSubmitConnectForm,
-		handleStartIndexing,
-		handleSkipIndexing,
-		handleStartEdit,
-		handleSaveConnector,
-		handleDisconnectConnector,
-		handleBackFromEdit,
-		handleBackFromConnect,
-		handleBackFromYouTube,
-		handleViewAccountsList,
-		handleBackFromAccountsList,
-		handleBackFromMCPList,
-		handleAddNewMCPFromList,
-		handleQuickIndexConnector,
-		connectorConfig,
-		setConnectorConfig,
-		setIndexingConnectorConfig,
-		setConnectorName,
-	} = useConnectorDialog();
+		// Use the custom hook for dialog state management
+		const {
+			isOpen,
+			activeTab,
+			connectingId,
+			isScrolled,
+			searchQuery,
+			indexingConfig,
+			indexingConnector,
+			indexingConnectorConfig,
+			editingConnector,
+			connectingConnectorType,
+			isCreatingConnector,
+			startDate,
+			endDate,
+			isStartingIndexing,
+			isSaving,
+			isDisconnecting,
+			periodicEnabled,
+			frequencyMinutes,
+			enableSummary,
+			allConnectors,
+			viewingAccountsType,
+			viewingMCPList,
+			setSearchQuery,
+			setStartDate,
+			setEndDate,
+			setPeriodicEnabled,
+			setFrequencyMinutes,
+			setEnableSummary,
+			handleOpenChange,
+			handleTabChange,
+			handleScroll,
+			handleConnectOAuth,
+			handleConnectNonOAuth,
+			handleCreateWebcrawler,
+			handleCreateYouTubeCrawler,
+			handleSubmitConnectForm,
+			handleStartIndexing,
+			handleSkipIndexing,
+			handleStartEdit,
+			handleSaveConnector,
+			handleDisconnectConnector,
+			handleBackFromEdit,
+			handleBackFromConnect,
+			handleBackFromYouTube,
+			handleViewAccountsList,
+			handleBackFromAccountsList,
+			handleBackFromMCPList,
+			handleAddNewMCPFromList,
+			handleQuickIndexConnector,
+			connectorConfig,
+			setConnectorConfig,
+			setIndexingConnectorConfig,
+			setConnectorName,
+		} = useConnectorDialog();
 
-	// Fetch connectors using Electric SQL + PGlite for real-time updates
-	// This provides instant updates when connectors change, without polling
-	const {
-		connectors: connectorsFromElectric = [],
-		loading: connectorsLoading,
-		error: connectorsError,
-		refreshConnectors: refreshConnectorsElectric,
-	} = useConnectorsElectric(searchSpaceId);
+		// Fetch connectors using Electric SQL + PGlite for real-time updates
+		// This provides instant updates when connectors change, without polling
+		const {
+			connectors: connectorsFromElectric = [],
+			loading: connectorsLoading,
+			error: connectorsError,
+			refreshConnectors: refreshConnectorsElectric,
+		} = useConnectorsElectric(searchSpaceId);
 
-	// Fallback to API if Electric is not available or fails
-	// Use Electric data if: 1) we have data, or 2) still loading without error
-	// Use API data if: Electric failed (has error) or finished loading with no data
-	const useElectricData =
-		connectorsFromElectric.length > 0 || (connectorsLoading && !connectorsError);
-	const connectors = useElectricData ? connectorsFromElectric : allConnectors || [];
+		// Fallback to API if Electric is not available or fails
+		// Use Electric data if: 1) we have data, or 2) still loading without error
+		// Use API data if: Electric failed (has error) or finished loading with no data
+		const useElectricData =
+			connectorsFromElectric.length > 0 || (connectorsLoading && !connectorsError);
+		const connectors = useElectricData ? connectorsFromElectric : allConnectors || [];
 
-	// Manual refresh function that works with both Electric and API
-	const refreshConnectors = async () => {
-		if (useElectricData) {
-			await refreshConnectorsElectric();
-		} else {
-			// Fallback: use allConnectors from useConnectorDialog (which uses connectorsAtom)
-			// The connectorsAtom will handle refetching if needed
-		}
-	};
+		// Manual refresh function that works with both Electric and API
+		const refreshConnectors = async () => {
+			if (useElectricData) {
+				await refreshConnectorsElectric();
+			} else {
+				// Fallback: use allConnectors from useConnectorDialog (which uses connectorsAtom)
+				// The connectorsAtom will handle refetching if needed
+			}
+		};
 
-	// Track indexing state locally - clears automatically when Electric SQL detects last_indexed_at changed
-	// Also clears when failed notifications are detected
-	const { indexingConnectorIds, startIndexing, stopIndexing } = useIndexingConnectors(
-		connectors as SearchSourceConnector[],
-		inboxItems
-	);
+		// Track indexing state locally - clears automatically when Electric SQL detects last_indexed_at changed
+		// Also clears when failed notifications are detected
+		const { indexingConnectorIds, startIndexing, stopIndexing } = useIndexingConnectors(
+			connectors as SearchSourceConnector[],
+			inboxItems
+		);
 
-	const isLoading = connectorsLoading || documentTypesLoading;
+		const isLoading = connectorsLoading || documentTypesLoading;
 
-	// Get document types that have documents in the search space
-	const activeDocumentTypes = documentTypeCounts
-		? Object.entries(documentTypeCounts).filter(([, count]) => count > 0)
-		: [];
+		// 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 hasConnectors = connectors.length > 0;
+		const hasSources = hasConnectors || activeDocumentTypes.length > 0;
+		const totalSourceCount = connectors.length + activeDocumentTypes.length;
 
-	const activeConnectorsCount = connectors.length;
+		const activeConnectorsCount = connectors.length;
 
-	// Check which connectors are already connected
-	// Using Electric SQL + PGlite for real-time connector updates
-	const connectedTypes = new Set<string>(
-		(connectors || []).map((c: SearchSourceConnector) => c.connector_type)
-	);
+		// Check which connectors are already connected
+		// Using Electric SQL + PGlite for real-time connector updates
+		const connectedTypes = new Set<string>(
+			(connectors || []).map((c: SearchSourceConnector) => c.connector_type)
+		);
 
-	useImperativeHandle(ref, () => ({
-		open: () => handleOpenChange(true),
-	}));
+		useImperativeHandle(ref, () => ({
+			open: () => handleOpenChange(true),
+		}));
 
-	if (!searchSpaceId) return null;
+		if (!searchSpaceId) return null;
 
-	return (
-		<Dialog open={isOpen} onOpenChange={handleOpenChange}>
-			{showTrigger && (
-				<TooltipIconButton
-					data-joyride="connector-icon"
-					tooltip={hasConnectors ? `Manage ${activeConnectorsCount} connectors` : "Connect your data"}
-					side="bottom"
-					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"
-					)}
-					aria-label={
-						hasConnectors ? `View ${activeConnectorsCount} connectors` : "Add your first connector"
-					}
-					onClick={() => handleOpenChange(true)}
-				>
-					{isLoading ? (
-						<Spinner size="sm" />
-					) : (
-						<>
-							<Cable className="size-4 stroke-[1.5px]" />
-							{activeConnectorsCount > 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 select-none">
-									{activeConnectorsCount > 99 ? "99+" : activeConnectorsCount}
-								</span>
-							)}
-						</>
-					)}
-				</TooltipIconButton>
-			)}
-
-			<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[75vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border ring-0 dark:ring-0 bg-muted dark:bg-muted text-foreground focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 [&>button]:right-4 sm:[&>button]:right-12 [&>button]:top-6 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5 select-none">
-				<DialogTitle className="sr-only">Manage Connectors</DialogTitle>
-				{/* YouTube Crawler View - shown when adding YouTube videos */}
-				{isYouTubeView && searchSpaceId ? (
-					<YouTubeCrawlerView searchSpaceId={searchSpaceId} onBack={handleBackFromYouTube} />
-				) : viewingMCPList ? (
-					<ConnectorAccountsListView
-						connectorType="MCP_CONNECTOR"
-						connectorTitle="MCP Connectors"
-						connectors={(allConnectors || []) as SearchSourceConnector[]}
-						indexingConnectorIds={indexingConnectorIds}
-						onBack={handleBackFromMCPList}
-						onManage={handleStartEdit}
-						onAddAccount={handleAddNewMCPFromList}
-						addButtonText="Add New MCP Server"
-					/>
-				) : viewingAccountsType ? (
-					<ConnectorAccountsListView
-						connectorType={viewingAccountsType.connectorType}
-						connectorTitle={viewingAccountsType.connectorTitle}
-						connectors={(connectors || []) as SearchSourceConnector[]} // Using Electric SQL + PGlite for real-time connector updates (all connector types)
-						indexingConnectorIds={indexingConnectorIds}
-						onBack={handleBackFromAccountsList}
-						onManage={handleStartEdit}
-						onAddAccount={() => {
-							// Check both OAUTH_CONNECTORS and COMPOSIO_CONNECTORS
-							const oauthConnector =
-								OAUTH_CONNECTORS.find(
-									(c) => c.connectorType === viewingAccountsType.connectorType
-								) ||
-								COMPOSIO_CONNECTORS.find(
-									(c) => c.connectorType === viewingAccountsType.connectorType
-								);
-							if (oauthConnector) {
-								handleConnectOAuth(oauthConnector);
-							}
-						}}
-						isConnecting={connectingId !== null}
-					/>
-				) : connectingConnectorType ? (
-					<ConnectorConnectView
-						connectorType={connectingConnectorType}
-						onSubmit={(formData) => handleSubmitConnectForm(formData, startIndexing)}
-						onBack={handleBackFromConnect}
-						isSubmitting={isCreatingConnector}
-					/>
-				) : editingConnector ? (
-					<ConnectorEditView
-						connector={{
-							...editingConnector,
-							config: connectorConfig || editingConnector.config,
-							name: editingConnector.name,
-							// Sync last_indexed_at with live data from Electric SQL for real-time updates
-							last_indexed_at:
-								(connectors as SearchSourceConnector[]).find((c) => c.id === editingConnector.id)
-									?.last_indexed_at ?? editingConnector.last_indexed_at,
-						}}
-						startDate={startDate}
-						endDate={endDate}
-						periodicEnabled={periodicEnabled}
-						frequencyMinutes={frequencyMinutes}
-						enableSummary={enableSummary}
-						isSaving={isSaving}
-						isDisconnecting={isDisconnecting}
-						isIndexing={indexingConnectorIds.has(editingConnector.id)}
-						searchSpaceId={searchSpaceId?.toString()}
-						onStartDateChange={setStartDate}
-						onEndDateChange={setEndDate}
-						onPeriodicEnabledChange={setPeriodicEnabled}
-						onFrequencyChange={setFrequencyMinutes}
-						onEnableSummaryChange={setEnableSummary}
-						onSave={() => {
-							startIndexing(editingConnector.id);
-							handleSaveConnector(() => refreshConnectors());
-						}}
-						onDisconnect={() => handleDisconnectConnector(() => refreshConnectors())}
-						onBack={handleBackFromEdit}
-						onQuickIndex={
-							editingConnector.connector_type !== "GOOGLE_DRIVE_CONNECTOR"
-								? () => {
-										startIndexing(editingConnector.id);
-										handleQuickIndexConnector(
-											editingConnector.id,
-											editingConnector.connector_type,
-											stopIndexing,
-											startDate,
-											endDate
-										);
-									}
-								: undefined
+		return (
+			<Dialog open={isOpen} onOpenChange={handleOpenChange}>
+				{showTrigger && (
+					<TooltipIconButton
+						data-joyride="connector-icon"
+						tooltip={
+							hasConnectors ? `Manage ${activeConnectorsCount} connectors` : "Connect your data"
 						}
-						onConfigChange={setConnectorConfig}
-						onNameChange={setConnectorName}
-					/>
-				) : indexingConfig ? (
-					<IndexingConfigurationView
-						config={indexingConfig}
-						connector={
-							indexingConnector
-								? {
-										...indexingConnector,
-										config: indexingConnectorConfig || indexingConnector.config,
-									}
-								: undefined
+						side="bottom"
+						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"
+						)}
+						aria-label={
+							hasConnectors
+								? `View ${activeConnectorsCount} connectors`
+								: "Add your first connector"
 						}
-						startDate={startDate}
-						endDate={endDate}
-						periodicEnabled={periodicEnabled}
-						frequencyMinutes={frequencyMinutes}
-						enableSummary={enableSummary}
-						isStartingIndexing={isStartingIndexing}
-						onStartDateChange={setStartDate}
-						onEndDateChange={setEndDate}
-						onPeriodicEnabledChange={setPeriodicEnabled}
-						onFrequencyChange={setFrequencyMinutes}
-						onEnableSummaryChange={setEnableSummary}
-						onConfigChange={setIndexingConnectorConfig}
-						onStartIndexing={() => {
-							if (indexingConfig.connectorId) {
-								startIndexing(indexingConfig.connectorId);
-							}
-							handleStartIndexing(() => refreshConnectors());
-						}}
-						onSkip={handleSkipIndexing}
-					/>
-				) : (
-					<Tabs
-						value={activeTab}
-						onValueChange={handleTabChange}
-						className="flex-1 flex flex-col min-h-0"
+						onClick={() => handleOpenChange(true)}
 					>
-						{/* Header */}
-						<ConnectorDialogHeader
-							activeTab={activeTab}
-							totalSourceCount={activeConnectorsCount}
-							searchQuery={searchQuery}
-							onTabChange={handleTabChange}
-							onSearchChange={setSearchQuery}
-							isScrolled={isScrolled}
+						{isLoading ? (
+							<Spinner size="sm" />
+						) : (
+							<>
+								<Cable className="size-4 stroke-[1.5px]" />
+								{activeConnectorsCount > 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 select-none">
+										{activeConnectorsCount > 99 ? "99+" : activeConnectorsCount}
+									</span>
+								)}
+							</>
+						)}
+					</TooltipIconButton>
+				)}
+
+				<DialogContent className="max-w-3xl w-[95vw] sm:w-full h-[75vh] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border ring-0 dark:ring-0 bg-muted dark:bg-muted text-foreground focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 [&>button]:right-4 sm:[&>button]:right-12 [&>button]:top-6 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button_svg]:size-5 select-none">
+					<DialogTitle className="sr-only">Manage Connectors</DialogTitle>
+					{/* YouTube Crawler View - shown when adding YouTube videos */}
+					{isYouTubeView && searchSpaceId ? (
+						<YouTubeCrawlerView searchSpaceId={searchSpaceId} onBack={handleBackFromYouTube} />
+					) : viewingMCPList ? (
+						<ConnectorAccountsListView
+							connectorType="MCP_CONNECTOR"
+							connectorTitle="MCP Connectors"
+							connectors={(allConnectors || []) as SearchSourceConnector[]}
+							indexingConnectorIds={indexingConnectorIds}
+							onBack={handleBackFromMCPList}
+							onManage={handleStartEdit}
+							onAddAccount={handleAddNewMCPFromList}
+							addButtonText="Add New MCP Server"
 						/>
+					) : viewingAccountsType ? (
+						<ConnectorAccountsListView
+							connectorType={viewingAccountsType.connectorType}
+							connectorTitle={viewingAccountsType.connectorTitle}
+							connectors={(connectors || []) as SearchSourceConnector[]} // Using Electric SQL + PGlite for real-time connector updates (all connector types)
+							indexingConnectorIds={indexingConnectorIds}
+							onBack={handleBackFromAccountsList}
+							onManage={handleStartEdit}
+							onAddAccount={() => {
+								// Check both OAUTH_CONNECTORS and COMPOSIO_CONNECTORS
+								const oauthConnector =
+									OAUTH_CONNECTORS.find(
+										(c) => c.connectorType === viewingAccountsType.connectorType
+									) ||
+									COMPOSIO_CONNECTORS.find(
+										(c) => c.connectorType === viewingAccountsType.connectorType
+									);
+								if (oauthConnector) {
+									handleConnectOAuth(oauthConnector);
+								}
+							}}
+							isConnecting={connectingId !== null}
+						/>
+					) : connectingConnectorType ? (
+						<ConnectorConnectView
+							connectorType={connectingConnectorType}
+							onSubmit={(formData) => handleSubmitConnectForm(formData, startIndexing)}
+							onBack={handleBackFromConnect}
+							isSubmitting={isCreatingConnector}
+						/>
+					) : editingConnector ? (
+						<ConnectorEditView
+							connector={{
+								...editingConnector,
+								config: connectorConfig || editingConnector.config,
+								name: editingConnector.name,
+								// Sync last_indexed_at with live data from Electric SQL for real-time updates
+								last_indexed_at:
+									(connectors as SearchSourceConnector[]).find((c) => c.id === editingConnector.id)
+										?.last_indexed_at ?? editingConnector.last_indexed_at,
+							}}
+							startDate={startDate}
+							endDate={endDate}
+							periodicEnabled={periodicEnabled}
+							frequencyMinutes={frequencyMinutes}
+							enableSummary={enableSummary}
+							isSaving={isSaving}
+							isDisconnecting={isDisconnecting}
+							isIndexing={indexingConnectorIds.has(editingConnector.id)}
+							searchSpaceId={searchSpaceId?.toString()}
+							onStartDateChange={setStartDate}
+							onEndDateChange={setEndDate}
+							onPeriodicEnabledChange={setPeriodicEnabled}
+							onFrequencyChange={setFrequencyMinutes}
+							onEnableSummaryChange={setEnableSummary}
+							onSave={() => {
+								startIndexing(editingConnector.id);
+								handleSaveConnector(() => refreshConnectors());
+							}}
+							onDisconnect={() => handleDisconnectConnector(() => refreshConnectors())}
+							onBack={handleBackFromEdit}
+							onQuickIndex={
+								editingConnector.connector_type !== "GOOGLE_DRIVE_CONNECTOR"
+									? () => {
+											startIndexing(editingConnector.id);
+											handleQuickIndexConnector(
+												editingConnector.id,
+												editingConnector.connector_type,
+												stopIndexing,
+												startDate,
+												endDate
+											);
+										}
+									: undefined
+							}
+							onConfigChange={setConnectorConfig}
+							onNameChange={setConnectorName}
+						/>
+					) : indexingConfig ? (
+						<IndexingConfigurationView
+							config={indexingConfig}
+							connector={
+								indexingConnector
+									? {
+											...indexingConnector,
+											config: indexingConnectorConfig || indexingConnector.config,
+										}
+									: undefined
+							}
+							startDate={startDate}
+							endDate={endDate}
+							periodicEnabled={periodicEnabled}
+							frequencyMinutes={frequencyMinutes}
+							enableSummary={enableSummary}
+							isStartingIndexing={isStartingIndexing}
+							onStartDateChange={setStartDate}
+							onEndDateChange={setEndDate}
+							onPeriodicEnabledChange={setPeriodicEnabled}
+							onFrequencyChange={setFrequencyMinutes}
+							onEnableSummaryChange={setEnableSummary}
+							onConfigChange={setIndexingConnectorConfig}
+							onStartIndexing={() => {
+								if (indexingConfig.connectorId) {
+									startIndexing(indexingConfig.connectorId);
+								}
+								handleStartIndexing(() => refreshConnectors());
+							}}
+							onSkip={handleSkipIndexing}
+						/>
+					) : (
+						<Tabs
+							value={activeTab}
+							onValueChange={handleTabChange}
+							className="flex-1 flex flex-col min-h-0"
+						>
+							{/* Header */}
+							<ConnectorDialogHeader
+								activeTab={activeTab}
+								totalSourceCount={activeConnectorsCount}
+								searchQuery={searchQuery}
+								onTabChange={handleTabChange}
+								onSearchChange={setSearchQuery}
+								isScrolled={isScrolled}
+							/>
 
-						{/* Content */}
-						<div className="flex-1 min-h-0 relative overflow-hidden">
-							<div className="h-full overflow-y-auto" onScroll={handleScroll}>
-								<div className="px-4 sm:px-12 py-4 sm:py-8 pb-12 sm:pb-16">
-									{/* LLM Configuration Warning */}
-									{!llmConfigLoading && !hasDocumentSummaryLLM && (
-										<Alert variant="destructive" className="mb-6">
-											<AlertTriangle className="h-4 w-4" />
-											<AlertTitle>LLM Configuration Required</AlertTitle>
-											<AlertDescription className="mt-2">
-												<p className="mb-3">
-													{isAutoMode && !hasGlobalConfigs
-														? "Auto mode is selected but no global LLM configurations are available. Please configure a custom LLM in Settings to process and summarize documents from your connected sources."
-														: "You need to configure a Document Summary LLM before adding connectors. This LLM is used to process and summarize documents from your connected sources."}
-												</p>
-												<Button asChild size="sm" variant="outline">
-													<Link href={`/dashboard/${searchSpaceId}/settings?tab=models`}>
-														<Settings className="mr-2 h-4 w-4" />
-														Go to Settings
-													</Link>
-												</Button>
-											</AlertDescription>
-										</Alert>
-									)}
+							{/* Content */}
+							<div className="flex-1 min-h-0 relative overflow-hidden">
+								<div className="h-full overflow-y-auto" onScroll={handleScroll}>
+									<div className="px-4 sm:px-12 py-4 sm:py-8 pb-12 sm:pb-16">
+										{/* LLM Configuration Warning */}
+										{!llmConfigLoading && !hasDocumentSummaryLLM && (
+											<Alert variant="destructive" className="mb-6">
+												<AlertTriangle className="h-4 w-4" />
+												<AlertTitle>LLM Configuration Required</AlertTitle>
+												<AlertDescription className="mt-2">
+													<p className="mb-3">
+														{isAutoMode && !hasGlobalConfigs
+															? "Auto mode is selected but no global LLM configurations are available. Please configure a custom LLM in Settings to process and summarize documents from your connected sources."
+															: "You need to configure a Document Summary LLM before adding connectors. This LLM is used to process and summarize documents from your connected sources."}
+													</p>
+													<Button asChild size="sm" variant="outline">
+														<Link href={`/dashboard/${searchSpaceId}/settings?tab=models`}>
+															<Settings className="mr-2 h-4 w-4" />
+															Go to Settings
+														</Link>
+													</Button>
+												</AlertDescription>
+											</Alert>
+										)}
 
-									<TabsContent value="all" className="m-0">
-										<AllConnectorsTab
+										<TabsContent value="all" className="m-0">
+											<AllConnectorsTab
+												searchQuery={searchQuery}
+												searchSpaceId={searchSpaceId}
+												connectedTypes={connectedTypes}
+												connectingId={connectingId}
+												allConnectors={connectors}
+												documentTypeCounts={documentTypeCounts}
+												indexingConnectorIds={indexingConnectorIds}
+												onConnectOAuth={hasDocumentSummaryLLM ? handleConnectOAuth : () => {}}
+												onConnectNonOAuth={hasDocumentSummaryLLM ? handleConnectNonOAuth : () => {}}
+												onCreateWebcrawler={
+													hasDocumentSummaryLLM ? handleCreateWebcrawler : () => {}
+												}
+												onCreateYouTubeCrawler={
+													hasDocumentSummaryLLM ? handleCreateYouTubeCrawler : () => {}
+												}
+												onManage={handleStartEdit}
+												onViewAccountsList={handleViewAccountsList}
+											/>
+										</TabsContent>
+
+										<ActiveConnectorsTab
 											searchQuery={searchQuery}
-											searchSpaceId={searchSpaceId}
-											connectedTypes={connectedTypes}
-											connectingId={connectingId}
-											allConnectors={connectors}
-											documentTypeCounts={documentTypeCounts}
+											hasSources={hasSources}
+											totalSourceCount={totalSourceCount}
+											activeDocumentTypes={activeDocumentTypes}
+											connectors={connectors as SearchSourceConnector[]}
 											indexingConnectorIds={indexingConnectorIds}
-											onConnectOAuth={hasDocumentSummaryLLM ? handleConnectOAuth : () => {}}
-											onConnectNonOAuth={hasDocumentSummaryLLM ? handleConnectNonOAuth : () => {}}
-											onCreateWebcrawler={hasDocumentSummaryLLM ? handleCreateWebcrawler : () => {}}
-											onCreateYouTubeCrawler={
-												hasDocumentSummaryLLM ? handleCreateYouTubeCrawler : () => {}
-											}
+											onTabChange={handleTabChange}
 											onManage={handleStartEdit}
 											onViewAccountsList={handleViewAccountsList}
 										/>
-									</TabsContent>
-
-									<ActiveConnectorsTab
-										searchQuery={searchQuery}
-										hasSources={hasSources}
-										totalSourceCount={totalSourceCount}
-										activeDocumentTypes={activeDocumentTypes}
-										connectors={connectors as SearchSourceConnector[]}
-										indexingConnectorIds={indexingConnectorIds}
-										onTabChange={handleTabChange}
-										onManage={handleStartEdit}
-										onViewAccountsList={handleViewAccountsList}
-									/>
+									</div>
 								</div>
+								{/* Bottom fade shadow */}
+								<div className="absolute bottom-0 left-0 right-0 h-7 bg-linear-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
 							</div>
-							{/* Bottom fade shadow */}
-							<div className="absolute bottom-0 left-0 right-0 h-7 bg-linear-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
-						</div>
-					</Tabs>
-				)}
-			</DialogContent>
-		</Dialog>
-	);
-});
+						</Tabs>
+					)}
+				</DialogContent>
+			</Dialog>
+		);
+	}
+);
 
 ConnectorIndicator.displayName = "ConnectorIndicator";

surfsense_web/components/assistant-ui/connector-popup/connect-forms/components/baidu-search-api-connect-form.tsx

@@ -70,23 +70,21 @@ export const BaiduSearchApiConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSu
 
 	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 className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					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>
 
 			<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">

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

@@ -96,15 +96,13 @@ export const BookStackConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitt
 
 	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 className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Token Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					You'll need a BookStack API Token to use this connector. You can create one from your
+					BookStack instance settings.
+				</AlertDescription>
 			</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">

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

@@ -64,15 +64,13 @@ export const CirclebackConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmit
 
 	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 className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Webhook className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">Webhook-Based Integration</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					Circleback uses webhooks to automatically send meeting data. After connecting, you'll
+					receive a webhook URL to configure in your Circleback settings.
+				</AlertDescription>
 			</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">

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

@@ -172,14 +172,12 @@ export const ElasticsearchConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSub
 
 	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 className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					Enter your Elasticsearch cluster endpoint URL and authentication credentials to connect.
+				</AlertDescription>
 			</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">

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

@@ -105,24 +105,21 @@ export const GithubConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 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 (Optional)</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs !pl-0">
-						A GitHub PAT is only required for private repositories. Public repos work without a
-						token.{" "}
-						<a
-							href="https://github.com/settings/tokens/new?description=surfsense&scopes=repo"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="font-medium underline underline-offset-4 inline-flex items-center gap-1.5"
-						>
-							Get your token
-							<ExternalLink className="h-3 w-3 sm:h-4 sm:w-4" />
-						</a>{" "}
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">Personal Access Token (Optional)</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					A GitHub PAT is only required for private repositories. Public repos work without a token.{" "}
+					<a
+						href="https://github.com/settings/tokens/new?description=surfsense&scopes=repo"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="font-medium underline underline-offset-4 inline-flex items-center gap-1.5"
+					>
+						Get your token
+						<ExternalLink className="h-3 w-3 sm:h-4 sm:w-4" />
+					</a>{" "}
+				</AlertDescription>
 			</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">

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

@@ -70,22 +70,20 @@ export const LinkupApiConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitt
 
 	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.so"
-							target="_blank"
-							rel="noopener noreferrer"
-							className="font-medium underline underline-offset-4"
-						>
-							linkup.so
-						</a>
-					</AlertDescription>
-				</div>
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					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>
 
 			<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">

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

@@ -88,22 +88,20 @@ export const LumaConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting }
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 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 className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					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>
 			</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">

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

@@ -136,7 +136,7 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3 [&>svg]:top-2 sm:[&>svg]:top-3">
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
 				<Server className="h-4 w-4 shrink-0" />
 				<AlertDescription className="text-[10px] sm:text-xs">
 					Connect to an MCP (Model Context Protocol) server. Each MCP server is added as a separate
@@ -230,55 +230,51 @@ export const MCPConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitting })
 							) : (
 								<XCircle className="h-4 w-4 text-red-600" />
 							)}
-							<div className="flex-1">
-								<div className="flex items-center justify-between">
-									<AlertTitle className="text-sm">
-										{testResult.status === "success"
-											? "Connection Successful"
-											: "Connection Failed"}
-									</AlertTitle>
-									{testResult.tools.length > 0 && (
-										<Button
-											type="button"
-											variant="ghost"
-											size="sm"
-											className="h-6 px-2 self-start sm:self-auto text-xs"
-											onClick={(e) => {
-												e.preventDefault();
-												e.stopPropagation();
-												setShowDetails(!showDetails);
-											}}
-										>
-											{showDetails ? (
-												<>
-													<ChevronUp className="h-3 w-3 mr-1" />
-													<span className="hidden sm:inline">Hide Details</span>
-													<span className="sm:hidden">Hide</span>
-												</>
-											) : (
-												<>
-													<ChevronDown className="h-3 w-3 mr-1" />
-													<span className="hidden sm:inline">Show Details</span>
-													<span className="sm:hidden">Show</span>
-												</>
-											)}
-										</Button>
-									)}
-								</div>
-								<AlertDescription className="text-[10px] sm:text-xs mt-1">
-									{testResult.message}
-									{showDetails && testResult.tools.length > 0 && (
-										<div className="mt-3 pt-3 border-t border-green-500/20">
-											<p className="font-semibold mb-2">Available tools:</p>
-											<ul className="list-disc list-inside text-xs space-y-0.5">
-												{testResult.tools.map((tool, i) => (
-													<li key={i}>{tool.name}</li>
-												))}
-											</ul>
-										</div>
-									)}
-								</AlertDescription>
+							<div className="col-start-2 flex items-center justify-between">
+								<AlertTitle className="text-sm">
+									{testResult.status === "success" ? "Connection Successful" : "Connection Failed"}
+								</AlertTitle>
+								{testResult.tools.length > 0 && (
+									<Button
+										type="button"
+										variant="ghost"
+										size="sm"
+										className="h-6 px-2 self-start sm:self-auto text-xs"
+										onClick={(e) => {
+											e.preventDefault();
+											e.stopPropagation();
+											setShowDetails(!showDetails);
+										}}
+									>
+										{showDetails ? (
+											<>
+												<ChevronUp className="h-3 w-3 mr-1" />
+												<span className="hidden sm:inline">Hide Details</span>
+												<span className="sm:hidden">Hide</span>
+											</>
+										) : (
+											<>
+												<ChevronDown className="h-3 w-3 mr-1" />
+												<span className="hidden sm:inline">Show Details</span>
+												<span className="sm:hidden">Show</span>
+											</>
+										)}
+									</Button>
+								)}
 							</div>
+							<AlertDescription className="text-[10px] sm:text-xs mt-1">
+								{testResult.message}
+								{showDetails && testResult.tools.length > 0 && (
+									<div className="mt-3 pt-3 border-t border-green-500/20">
+										<p className="font-semibold mb-2">Available tools:</p>
+										<ul className="list-disc list-inside text-xs space-y-0.5">
+											{testResult.tools.map((tool, i) => (
+												<li key={i}>{tool.name}</li>
+											))}
+										</ul>
+									</div>
+								)}
+							</AlertDescription>
 						</Alert>
 					)}
 				</div>

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

@@ -102,15 +102,13 @@ export const ObsidianConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitti
 
 	return (
 		<div className="space-y-6 pb-6">
-			<Alert className="bg-purple-500/10 dark:bg-purple-500/10 border-purple-500/30 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 text-purple-500" />
-				<div className="-ml-1">
-					<AlertTitle className="text-xs sm:text-sm">Self-Hosted Only</AlertTitle>
-					<AlertDescription className="text-[10px] sm:text-xs pl-0!">
-						This connector requires direct file system access and only works with self-hosted
-						SurfSense installations.
-					</AlertDescription>
-				</div>
+			<Alert className="bg-purple-500/10 dark:bg-purple-500/10 border-purple-500/30 p-2 sm:p-3">
+				<Info className="size-4 shrink-0 text-purple-500" />
+				<AlertTitle className="text-xs sm:text-sm">Self-Hosted Only</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					This connector requires direct file system access and only works with self-hosted
+					SurfSense installations.
+				</AlertDescription>
 			</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">

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

@@ -123,23 +123,21 @@ export const SearxngConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmittin
 
 	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 className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">SearxNG Instance Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					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>
 			</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">

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

@@ -70,22 +70,20 @@ export const TavilyApiConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSubmitt
 
 	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 className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertTitle className="text-xs sm:text-sm">API Key Required</AlertTitle>
+				<AlertDescription className="text-[10px] sm:text-xs">
+					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>
 
 			<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">

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

@@ -166,7 +166,7 @@ export const CirclebackConfig: FC<CirclebackConfigProps> = ({ connector, onNameC
 					<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-xs sm:text-sm">Configuration Instructions</AlertTitle>
-						<AlertDescription className="text-[10px] sm:text-xs !pl-0 mt-1">
+						<AlertDescription className="text-[10px] sm:text-xs 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.

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

@@ -235,55 +235,51 @@ export const MCPConfig: FC<MCPConfigProps> = ({ connector, onConfigChange, onNam
 							) : (
 								<XCircle className="h-4 w-4 text-red-600" />
 							)}
-							<div className="flex-1">
-								<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
-									<AlertTitle className="text-sm">
-										{testResult.status === "success"
-											? "Connection Successful"
-											: "Connection Failed"}
-									</AlertTitle>
-									{testResult.tools.length > 0 && (
-										<Button
-											type="button"
-											variant="ghost"
-											size="sm"
-											className="h-6 px-2 self-start sm:self-auto text-xs"
-											onClick={(e) => {
-												e.preventDefault();
-												e.stopPropagation();
-												setShowDetails(!showDetails);
-											}}
-										>
-											{showDetails ? (
-												<>
-													<ChevronUp className="h-3 w-3 mr-1" />
-													<span className="hidden sm:inline">Hide Details</span>
-													<span className="sm:hidden">Hide</span>
-												</>
-											) : (
-												<>
-													<ChevronDown className="h-3 w-3 mr-1" />
-													<span className="hidden sm:inline">Show Details</span>
-													<span className="sm:hidden">Show</span>
-												</>
-											)}
-										</Button>
-									)}
-								</div>
-								<AlertDescription className="text-xs mt-1">
-									{testResult.message}
-									{showDetails && testResult.tools.length > 0 && (
-										<div className="mt-3 pt-3 border-t border-green-500/20">
-											<p className="font-semibold mb-2">Available tools:</p>
-											<ul className="list-disc list-inside text-xs space-y-0.5">
-												{testResult.tools.map((tool) => (
-													<li key={tool.name}>{tool.name}</li>
-												))}
-											</ul>
-										</div>
-									)}
-								</AlertDescription>
+							<div className="col-start-2 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0">
+								<AlertTitle className="text-sm">
+									{testResult.status === "success" ? "Connection Successful" : "Connection Failed"}
+								</AlertTitle>
+								{testResult.tools.length > 0 && (
+									<Button
+										type="button"
+										variant="ghost"
+										size="sm"
+										className="h-6 px-2 self-start sm:self-auto text-xs"
+										onClick={(e) => {
+											e.preventDefault();
+											e.stopPropagation();
+											setShowDetails(!showDetails);
+										}}
+									>
+										{showDetails ? (
+											<>
+												<ChevronUp className="h-3 w-3 mr-1" />
+												<span className="hidden sm:inline">Hide Details</span>
+												<span className="sm:hidden">Hide</span>
+											</>
+										) : (
+											<>
+												<ChevronDown className="h-3 w-3 mr-1" />
+												<span className="hidden sm:inline">Show Details</span>
+												<span className="sm:hidden">Show</span>
+											</>
+										)}
+									</Button>
+								)}
 							</div>
+							<AlertDescription className="text-xs mt-1">
+								{testResult.message}
+								{showDetails && testResult.tools.length > 0 && (
+									<div className="mt-3 pt-3 border-t border-green-500/20">
+										<p className="font-semibold mb-2">Available tools:</p>
+										<ul className="list-disc list-inside text-xs space-y-0.5">
+											{testResult.tools.map((tool) => (
+												<li key={tool.name}>{tool.name}</li>
+											))}
+										</ul>
+									</div>
+								)}
+							</AlertDescription>
 						</Alert>
 					)}
 				</div>

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

@@ -63,7 +63,8 @@ export const WebcrawlerConfig: FC<ConnectorConfigProps> = ({ connector, onConfig
 			<div className="flex items-start gap-3 rounded-lg border border-blue-200/50 bg-blue-50/50 dark:border-blue-500/20 dark:bg-blue-950/20 p-3 text-xs sm:text-sm">
 				<Info className="size-4 mt-0.5 shrink-0 text-blue-600 dark:text-blue-400" />
 				<p className="text-muted-foreground">
-					Want a quick answer from a webpage without indexing it? Just paste the URL directly into the chat instead.
+					Want a quick answer from a webpage without indexing it? Just paste the URL directly into
+					the chat instead.
 				</p>
 			</div>
 
@@ -123,9 +124,9 @@ export const WebcrawlerConfig: FC<ConnectorConfigProps> = ({ connector, onConfig
 			</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">
+			<Alert className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 p-2 sm:p-3">
+				<Info className="size-4 shrink-0" />
+				<AlertDescription className="text-[10px] sm:text-xs">
 					Configuration is saved when you start indexing. You can update these settings anytime from
 					the connector management page.
 				</AlertDescription>

surfsense_web/components/assistant-ui/connector-popup/views/youtube-crawler-view.tsx

@@ -280,9 +280,7 @@ export const YouTubeCrawlerView: FC<YouTubeCrawlerViewProps> = ({ searchSpaceId,
 
 					<div className="flex items-start gap-3 rounded-lg border border-blue-200/50 bg-blue-50/50 dark:border-blue-500/20 dark:bg-blue-950/20 p-4 text-sm">
 						<Info className="size-4 mt-0.5 shrink-0 text-blue-600 dark:text-blue-400" />
-						<p className="text-muted-foreground">
-							{t("chat_tip")}
-						</p>
+						<p className="text-muted-foreground">{t("chat_tip")}</p>
 					</div>
 
 					<div className="bg-muted/50 rounded-lg p-4 text-sm">

surfsense_web/components/assistant-ui/thread.tsx

@@ -14,7 +14,6 @@ import {
 	AlertCircle,
 	ArrowDownIcon,
 	ArrowUpIcon,
-	Cable,
 	CheckIcon,
 	ChevronLeftIcon,
 	ChevronRightIcon,
@@ -23,17 +22,20 @@ import {
 	PlusIcon,
 	RefreshCwIcon,
 	SquareIcon,
-	SquareLibrary,
+	Unplug,
+	Upload,
+	X,
 } from "lucide-react";
 import { useParams } from "next/navigation";
 import { type FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { chatSessionStateAtom } from "@/atoms/chat/chat-session-state.atom";
-import { showCommentsGutterAtom } from "@/atoms/chat/current-thread.atom";
 import {
 	mentionedDocumentsAtom,
 	sidebarSelectedDocumentsAtom,
 } from "@/atoms/chat/mentioned-documents.atom";
+import { connectorDialogOpenAtom } from "@/atoms/connector-dialog/connector-dialog.atoms";
+import { connectorsAtom } from "@/atoms/connectors/connector-query.atoms";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
 import { membersAtom } from "@/atoms/members/members-query.atoms";
 import {
@@ -48,6 +50,7 @@ import {
 	ConnectorIndicator,
 	type ConnectorIndicatorHandle,
 } from "@/components/assistant-ui/connector-popup";
+import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
 import {
 	InlineMentionEditor,
 	type InlineMentionEditorRef,
@@ -60,13 +63,21 @@ import {
 import { ToolFallback } from "@/components/assistant-ui/tool-fallback";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { UserMessage } from "@/components/assistant-ui/user-message";
+import { SLIDEOUT_PANEL_OPENED_EVENT } from "@/components/layout/ui/sidebar/SidebarSlideOutPanel";
 import {
 	DocumentMentionPicker,
 	type DocumentMentionPickerRef,
 } from "@/components/new-chat/document-mention-picker";
 import type { ThinkingStep } from "@/components/tool-ui/deepagent-thinking";
+import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { Document } from "@/contracts/types/document.types";
 import { useBatchCommentsPreload } from "@/hooks/use-comments";
 import { useCommentsElectric } from "@/hooks/use-comments-electric";
@@ -95,8 +106,6 @@ export const Thread: FC<ThreadProps> = ({ messageThinkingSteps = new Map() }) =>
 };
 
 const ThreadContent: FC = () => {
-	const showGutter = useAtomValue(showCommentsGutterAtom);
-
 	return (
 		<ThreadPrimitive.Root
 			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-background"
@@ -106,10 +115,7 @@ const ThreadContent: FC = () => {
 		>
 			<ThreadPrimitive.Viewport
 				turnAnchor="top"
-				className={cn(
-					"aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 pt-4 transition-[padding] duration-300 ease-out",
-					showGutter && "lg:pr-30"
-				)}
+				className="aui-thread-viewport relative flex flex-1 min-h-0 flex-col overflow-y-auto px-4 pt-4"
 			>
 				<AssistantIf condition={({ thread }) => thread.isEmpty}>
 					<ThreadWelcome />
@@ -228,6 +234,72 @@ const ThreadWelcome: FC = () => {
 	);
 };
 
+const BANNER_CONNECTORS = [
+	{ type: "GOOGLE_DRIVE_CONNECTOR", label: "Google Drive" },
+	{ type: "GOOGLE_GMAIL_CONNECTOR", label: "Gmail" },
+	{ type: "NOTION_CONNECTOR", label: "Notion" },
+	{ type: "YOUTUBE_CONNECTOR", label: "YouTube" },
+	{ type: "SLACK_CONNECTOR", label: "Slack" },
+] as const;
+
+const BANNER_DISMISSED_KEY = "surfsense-connect-tools-banner-dismissed";
+
+const ConnectToolsBanner: FC = () => {
+	const { data: connectors } = useAtomValue(connectorsAtom);
+	const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
+	const [dismissed, setDismissed] = useState(() => {
+		if (typeof window === "undefined") return false;
+		return localStorage.getItem(BANNER_DISMISSED_KEY) === "true";
+	});
+
+	const hasConnectors = (connectors?.length ?? 0) > 0;
+
+	if (dismissed || hasConnectors) return null;
+
+	const handleDismiss = (e: React.MouseEvent) => {
+		e.stopPropagation();
+		setDismissed(true);
+		localStorage.setItem(BANNER_DISMISSED_KEY, "true");
+	};
+
+	return (
+		<div className="md:hidden border-t border-border/50 bg-muted-foreground/[0.04]">
+			<button
+				type="button"
+				className="flex w-full items-center gap-2.5 px-4 py-2.5 text-left transition-colors hover:bg-muted-foreground/[0.06] active:bg-muted-foreground/[0.1]"
+				onClick={() => setConnectorDialogOpen(true)}
+			>
+				<Unplug className="size-4 text-muted-foreground/70 shrink-0" />
+				<span className="text-[13px] text-muted-foreground/80 flex-1">Connect your tools</span>
+				<AvatarGroup className="shrink-0">
+					{BANNER_CONNECTORS.map(({ type, label }, i) => (
+						<Avatar key={type} className="size-6" style={{ zIndex: BANNER_CONNECTORS.length - i }}>
+							<AvatarFallback className="bg-muted text-[10px]">
+								{getConnectorIcon(type, "size-3.5")}
+							</AvatarFallback>
+						</Avatar>
+					))}
+				</AvatarGroup>
+				<span
+					role="button"
+					tabIndex={0}
+					onClick={handleDismiss}
+					onKeyDown={(e) => {
+						if (e.key === "Enter" || e.key === " ") {
+							e.preventDefault();
+							handleDismiss(e as unknown as React.MouseEvent);
+						}
+					}}
+					className="shrink-0 ml-0.5 p-0.5 text-muted-foreground/40 hover:text-foreground transition-colors"
+					aria-label="Dismiss"
+				>
+					<X className="size-3.5" />
+				</span>
+			</button>
+		</div>
+	);
+};
+
 const Composer: FC = () => {
 	// Document mention state (atoms persist across component remounts)
 	const [mentionedDocuments, setMentionedDocuments] = useAtom(mentionedDocumentsAtom);
@@ -312,6 +384,16 @@ const Composer: FC = () => {
 		}
 	}, [isThreadEmpty]);
 
+	// Close document picker when a slide-out panel (inbox, shared/private chats) opens
+	useEffect(() => {
+		const handler = () => {
+			setShowDocumentPopover(false);
+			setMentionQuery("");
+		};
+		window.addEventListener(SLIDEOUT_PANEL_OPENED_EVENT, handler);
+		return () => window.removeEventListener(SLIDEOUT_PANEL_OPENED_EVENT, handler);
+	}, []);
+
 	// Sync editor text with assistant-ui composer runtime
 	const handleEditorChange = useCallback(
 		(text: string) => {
@@ -425,9 +507,9 @@ const Composer: FC = () => {
 				currentUserId={currentUser?.id ?? null}
 				members={members ?? []}
 			/>
-			<div className="aui-composer-attachment-dropzone flex w-full flex-col rounded-2xl border-input bg-muted px-1 pt-2 outline-none transition-shadow">
+			<div className="aui-composer-attachment-dropzone flex w-full flex-col overflow-hidden rounded-2xl border-input bg-muted pt-2 outline-none transition-shadow">
 				{/* Inline editor with @mention support */}
-				<div ref={editorContainerRef} className="aui-composer-input-wrapper px-3 pt-3 pb-6">
+				<div ref={editorContainerRef} className="aui-composer-input-wrapper px-4 pt-3 pb-6">
 					<InlineMentionEditor
 						ref={editorRef}
 						placeholder={currentPlaceholder}
@@ -466,6 +548,7 @@ const Composer: FC = () => {
 						document.body
 					)}
 				<ComposerAction isBlockedByOtherUser={isBlockedByOtherUser} />
+				<ConnectToolsBanner />
 			</div>
 		</ComposerPrimitive.Root>
 	);
@@ -481,7 +564,9 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 	const setDocumentsSidebarOpen = useSetAtom(documentsSidebarOpenAtom);
 	const connectorRef = useRef<ConnectorIndicatorHandle>(null);
 	const [addMenuOpen, setAddMenuOpen] = useState(false);
-
+	const { openDialog: openUploadDialog } = useDocumentUploadDialog();
+	const { data: connectors } = useAtomValue(connectorsAtom);
+	const connectorCount = connectors?.length ?? 0;
 	const isComposerTextEmpty = useAssistantState(({ composer }) => {
 		const text = composer.text?.trim() || "";
 		return text.length === 0;
@@ -506,55 +591,61 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 	const isSendDisabled = isComposerEmpty || !hasModelConfigured || isBlockedByOtherUser;
 
 	return (
-		<div className="aui-composer-action-wrapper relative mx-2 mb-2 flex items-center justify-between">
+		<div className="aui-composer-action-wrapper relative mx-3 mb-2 flex items-center justify-between">
 			<div className="flex items-center gap-1">
-				<Popover open={addMenuOpen} onOpenChange={setAddMenuOpen}>
-					<PopoverTrigger asChild>
+				<DropdownMenu open={addMenuOpen} onOpenChange={setAddMenuOpen}>
+					<DropdownMenuTrigger asChild>
 						<TooltipIconButton
-							tooltip="Configuration"
+							tooltip="Add files and more"
 							side="bottom"
 							variant="ghost"
 							size="icon"
 							className="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="Configuration"
+							aria-label="Add files and more"
 							data-joyride="connector-icon"
 						>
 							<PlusIcon className="size-4" />
 						</TooltipIconButton>
-					</PopoverTrigger>
-					<PopoverContent
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
 						side="bottom"
 						align="start"
 						sideOffset={12}
-						className="w-[calc(100vw-2rem)] max-w-60 sm:w-60 p-2"
+						className="w-[calc(100vw-2rem)] max-w-60 sm:w-60"
 					>
-						<div className="flex flex-col gap-0.5">
-							<button
-								type="button"
-								className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
-								onClick={() => {
-									setAddMenuOpen(false);
-									setDocumentsSidebarOpen(true);
-								}}
-							>
-								<SquareLibrary className="size-4 shrink-0" />
-								Documents
-							</button>
-							<button
-								type="button"
-								className="flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground"
-								onClick={() => {
-									setAddMenuOpen(false);
-									connectorRef.current?.open();
-								}}
-							>
-								<Cable className="size-4 shrink-0" />
-								Manage connectors
-							</button>
-						</div>
-					</PopoverContent>
-				</Popover>
+						<DropdownMenuItem
+							onClick={() => {
+								setAddMenuOpen(false);
+								openUploadDialog();
+							}}
+						>
+							<Upload className="size-4 shrink-0" />
+							Upload files
+						</DropdownMenuItem>
+						<DropdownMenuItem
+							onClick={() => {
+								setAddMenuOpen(false);
+								connectorRef.current?.open();
+							}}
+						>
+							<Unplug className="size-4 shrink-0" />
+							{connectorCount > 0 ? "Manage tools" : "Connect your tools"}
+							{connectorCount > 0 && (
+								<span className="ml-auto text-xs text-muted-foreground">{connectorCount}</span>
+							)}
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
 				<ConnectorIndicator ref={connectorRef} showTrigger={false} />
+				{sidebarDocs.length > 0 && (
+					<button
+						type="button"
+						onClick={() => setDocumentsSidebarOpen(true)}
+						className="rounded-full border border-border/60 bg-accent/50 px-2.5 py-1 text-xs font-medium text-foreground/80 transition-colors hover:bg-accent"
+					>
+						{sidebarDocs.length} {sidebarDocs.length === 1 ? "source" : "sources"} selected
+					</button>
+				)}
 			</div>
 
 			{!hasModelConfigured && (
@@ -565,16 +656,6 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 			)}
 
 			<div className="flex items-center gap-2">
-				{sidebarDocs.length > 0 && (
-					<button
-						type="button"
-						onClick={() => setDocumentsSidebarOpen(true)}
-						className="rounded-full border border-border/60 bg-accent/50 px-2.5 py-1 text-xs font-medium text-foreground/80 transition-colors hover:bg-accent"
-					>
-						{sidebarDocs.length} {sidebarDocs.length === 1 ? "source" : "sources"} selected
-					</button>
-				)}
-
 				<AssistantIf condition={({ thread }) => !thread.isRunning}>
 					<ComposerPrimitive.Send asChild disabled={isSendDisabled}>
 						<TooltipIconButton