From 2927a9484ee553e3f330986dc3f054b724acfc50 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Tue, 7 Jul 2026 22:56:09 +0530
Subject: [PATCH] refactor(assistant-ui): simplify ConnectedScraperIcons and
 update ConnectAgentDialog UI

- Removed unused `useReducedMotion` hook from ConnectedScraperIcons for cleaner code.
- Replaced `Cable` icon with a masked SVG in ConnectAgentDialog for improved visual representation.
- Enhanced layout in ConnectAgentDialog to include a badge indicating new items, improving user awareness.
---
 .../components/assistant-ui/thread.tsx        | 32 ++++++++-----------
 .../components/mcp/connect-agent-dialog.tsx   | 16 ++++++++--
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/surfsense_web/components/assistant-ui/thread.tsx b/surfsense_web/components/assistant-ui/thread.tsx
index 08ebc6a19..1e8c66e8a 100644
--- a/surfsense_web/components/assistant-ui/thread.tsx
+++ b/surfsense_web/components/assistant-ui/thread.tsx
@@ -22,7 +22,7 @@ import {
 	Wrench,
 	X,
 } from "lucide-react";
-import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { AnimatePresence, motion } from "motion/react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
 import { type FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -986,14 +986,12 @@ const Composer: FC = () => {
  * Full-color brand marks for the platform-native scraper APIs (web, Google
  * Search, Google Maps, Reddit, YouTube) available in this workspace, shown beside the
  * composer "+" so the user can see these native endpoints are connected. Laid
- * out as a clean row (not stacked) after a hairline divider that separates them
+ * out as the same overlapping avatar group used by the connect-tools tray
  * from the composer actions. The capability registry is the source of truth;
- * icons are display-only with a status tooltip. One-time staggered entrance,
- * reduced-motion aware.
+ * icons are display-only with a status tooltip.
  */
 const ConnectedScraperIcons: FC<{ workspaceId: number }> = ({ workspaceId }) => {
 	const { data: capabilities } = useScraperCapabilities(workspaceId);
-	const reduceMotion = useReducedMotion();
 
 	const platforms = useMemo<PlaygroundPlatform[]>(() => {
 		if (!capabilities?.length) return [];
@@ -1014,30 +1012,26 @@ const ConnectedScraperIcons: FC<{ workspaceId: number }> = ({ workspaceId }) =>
 	return (
 		<div className="hidden items-center gap-1 sm:flex">
 			<div aria-hidden className="h-5 w-px shrink-0 bg-border" />
-			<ul className="m-0 flex list-none items-center gap-0.5 p-0" aria-label="Connected data sources">
+			<AvatarGroup className="shrink-0">
 				{platforms.map((platform, i) => {
 					const Icon = platform.icon;
 					return (
 						<Tooltip key={platform.id}>
 							<TooltipTrigger asChild>
-								<motion.li
-									initial={{ opacity: 0, y: reduceMotion ? 0 : 4 }}
-									animate={{ opacity: 1, y: 0 }}
-									transition={{
-										duration: 0.2,
-										ease: [0.23, 1, 0.32, 1],
-										delay: reduceMotion ? 0 : i * 0.04,
-									}}
-									className="flex size-5 items-center justify-center"
+								<Avatar
+									className="size-5"
+									style={{ zIndex: platforms.length - i }}
 								>
-									<Icon className="size-3.5" />
-								</motion.li>
+									<AvatarFallback className="bg-popover text-[10px]">
+										<Icon className="size-3" />
+									</AvatarFallback>
+								</Avatar>
 							</TooltipTrigger>
-							<TooltipContent side="bottom">{platform.label} · Connected</TooltipContent>
+							<TooltipContent side="bottom">{platform.label} scraper available</TooltipContent>
 						</Tooltip>
 					);
 				})}
-			</ul>
+			</AvatarGroup>
 		</div>
 	);
 };
diff --git a/surfsense_web/components/mcp/connect-agent-dialog.tsx b/surfsense_web/components/mcp/connect-agent-dialog.tsx
index 86edf6716..fdbf08d71 100644
--- a/surfsense_web/components/mcp/connect-agent-dialog.tsx
+++ b/surfsense_web/components/mcp/connect-agent-dialog.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { Cable } from "lucide-react";
+import { SidebarButtonBadge } from "@/components/layout/ui/sidebar/SidebarButton";
 import { AgentSetupTabs } from "@/components/mcp/agent-setup-tabs";
 import {
 	Dialog,
@@ -28,8 +28,18 @@ export function ConnectAgentDialog({ className }: { className?: string }) {
 					className
 				)}
 			>
-				<Cable className="h-3.5 w-3.5 shrink-0" />
-				<span className="min-w-0 flex-1 truncate">Connect your agent</span>
+				<span
+					aria-hidden="true"
+					className="size-3.5 shrink-0 bg-current"
+					style={{
+						mask: "url('/connectors/modelcontextprotocol.svg') center / contain no-repeat",
+						WebkitMask: "url('/connectors/modelcontextprotocol.svg') center / contain no-repeat",
+					}}
+				/>
+				<span className="flex min-w-0 flex-1 items-center gap-1.5">
+					<span className="min-w-0 truncate">Connect your agent</span>
+					<SidebarButtonBadge>New</SidebarButtonBadge>
+				</span>
 			</DialogTrigger>
 			<DialogContent className="max-h-[85vh] overflow-y-auto sm:max-w-2xl">
 				<DialogHeader>