feat: enhance connector card and status badge with tooltip support

- Added tooltip functionality to `ConnectorCard` for displaying status messages on disabled or maintenance connectors.
- Updated `ConnectorStatusBadge` to show status messages in tooltips for warning statuses, improving user feedback.
- Refactored rendering logic to ensure tooltips are displayed appropriately based on connector status.

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

@@ -5,6 +5,7 @@ import { differenceInDays, differenceInMinutes, format, isToday, isYesterday } f
 import { FileText, Loader2 } from "lucide-react";
 import type { FC } from "react";
 import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { LogActiveTask } from "@/contracts/types/log.types";
 import { cn } from "@/lib/utils";
@@ -138,14 +139,8 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 			);
 		}
 
-		// Priority 1: Show status message if available (for both connected and disconnected connectors)
-		// This takes precedence over indexed dates and warnings
-		if (statusMessage) {
-			return <span className="text-[10px] text-muted-foreground">{statusMessage}</span>;
-		}
-
 		if (isConnected) {
-			// Show last indexed date for connected connectors (only if no status message)
+			// Show last indexed date for connected connectors
 			if (lastIndexedAt) {
 				return (
 					<span className="whitespace-nowrap text-[10px]">
@@ -160,7 +155,12 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 		return description;
 	};
 
-	return (
+	// Determine if we should show tooltip on the whole card (for disabled/maintenance)
+	const shouldShowCardTooltip =
+		statusMessage &&
+		(status.status === "disabled" || status.status === "maintenance");
+
+	const cardContent = (
 		<div
 			className={cn(
 				"group relative flex items-center gap-4 p-4 rounded-xl text-left transition-all duration-200 w-full border",
@@ -193,7 +193,11 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 				<div className="flex items-center gap-1.5">
 					<span className="text-[14px] font-semibold leading-tight truncate">{title}</span>
 					{showWarnings && status.status !== "active" && (
-						<ConnectorStatusBadge status={status.status} className="flex-shrink-0" />
+						<ConnectorStatusBadge
+							status={status.status}
+							statusMessage={statusMessage}
+							className="flex-shrink-0"
+						/>
 					)}
 				</div>
 				<div className="text-[10px] text-muted-foreground mt-1">{getStatusContent()}</div>
@@ -239,4 +243,20 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 			</Button>
 		</div>
 	);
+
+	// Wrap card in tooltip for disabled/maintenance status
+	if (shouldShowCardTooltip) {
+		return (
+			<Tooltip>
+				<TooltipTrigger asChild>
+					{cardContent}
+				</TooltipTrigger>
+				<TooltipContent side="top" className="max-w-xs">
+					{statusMessage}
+				</TooltipContent>
+			</Tooltip>
+		);
+	}
+
+	return cardContent;
 };

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

@@ -2,15 +2,21 @@
 
 import { AlertTriangle, Ban, Wrench } from "lucide-react";
 import type { FC } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import type { ConnectorStatus } from "../config/connector-status-config";
 import { cn } from "@/lib/utils";
 
 interface ConnectorStatusBadgeProps {
 	status: ConnectorStatus;
+	statusMessage?: string | null;
 	className?: string;
 }
 
-export const ConnectorStatusBadge: FC<ConnectorStatusBadgeProps> = ({ status, className }) => {
+export const ConnectorStatusBadge: FC<ConnectorStatusBadgeProps> = ({
+	status,
+	statusMessage,
+	className,
+}) => {
 	if (status === "active") {
 		return null;
 	}
@@ -21,25 +27,25 @@ export const ConnectorStatusBadge: FC<ConnectorStatusBadgeProps> = ({ status, cl
 				return {
 					icon: AlertTriangle,
 					className: "text-yellow-500 dark:text-yellow-400",
-					title: "Warning",
+					defaultTitle: "Warning",
 				};
 			case "disabled":
 				return {
 					icon: Ban,
 					className: "text-red-500 dark:text-red-400",
-					title: "Disabled",
+					defaultTitle: "Disabled",
 				};
 			case "maintenance":
 				return {
 					icon: Wrench,
 					className: "text-orange-500 dark:text-orange-400",
-					title: "Maintenance",
+					defaultTitle: "Maintenance",
 				};
 			case "deprecated":
 				return {
 					icon: AlertTriangle,
 					className: "text-amber-500 dark:text-amber-400",
-					title: "Deprecated",
+					defaultTitle: "Deprecated",
 				};
 			default:
 				return null;
@@ -50,11 +56,33 @@ export const ConnectorStatusBadge: FC<ConnectorStatusBadgeProps> = ({ status, cl
 	if (!config) return null;
 
 	const Icon = config.icon;
+	// Only show statusMessage in tooltip for warning status
+	// For disabled/maintenance, the card tooltip will show the statusMessage
+	const shouldUseTooltip = status === "warning" && statusMessage;
+	const tooltipTitle = shouldUseTooltip ? statusMessage : config.defaultTitle;
+
+	// Use Tooltip component for warning status with statusMessage, native title for others
+	if (shouldUseTooltip) {
+		return (
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<span
+						className={cn("inline-flex items-center justify-center shrink-0", className)}
+					>
+						<Icon className={cn("size-3.5", config.className)} />
+					</span>
+				</TooltipTrigger>
+				<TooltipContent side="top" className="max-w-xs">
+					{statusMessage}
+				</TooltipContent>
+			</Tooltip>
+		);
+	}
 
 	return (
 		<span
 			className={cn("inline-flex items-center justify-center shrink-0", className)}
-			title={config.title}
+			title={tooltipTitle}
 		>
 			<Icon className={cn("size-3.5", config.className)} />
 		</span>