Merge branch 'feat/migrate-electric-to-zero' into electon-desktop

surfsense_web/.env.example

@@ -1,13 +1,10 @@
 NEXT_PUBLIC_FASTAPI_BACKEND_URL=http://localhost:8000
 NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE=LOCAL or GOOGLE
 NEXT_PUBLIC_ETL_SERVICE=UNSTRUCTURED or LLAMACLOUD or DOCLING
+NEXT_PUBLIC_ZERO_CACHE_URL=http://localhost:4848
 
-# Electric SQL
-NEXT_PUBLIC_ELECTRIC_URL=http://localhost:5133
-NEXT_PUBLIC_ELECTRIC_AUTH_MODE=insecure
-
-# Contact Form Vars - OPTIONAL
+# Contact Form Vars (optional)
 DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.sdsf.supabase.co:5432/postgres
 
-# Obsidian flag for cloud version (optional)
+# Deployment mode (optional)
 NEXT_PUBLIC_DEPLOYMENT_MODE="self-hosted" or "cloud"

surfsense_web/Dockerfile

@@ -35,15 +35,13 @@ RUN corepack enable pnpm
 ARG NEXT_PUBLIC_FASTAPI_BACKEND_URL=__NEXT_PUBLIC_FASTAPI_BACKEND_URL__
 ARG NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE=__NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE__
 ARG NEXT_PUBLIC_ETL_SERVICE=__NEXT_PUBLIC_ETL_SERVICE__
-ARG NEXT_PUBLIC_ELECTRIC_URL=__NEXT_PUBLIC_ELECTRIC_URL__
-ARG NEXT_PUBLIC_ELECTRIC_AUTH_MODE=__NEXT_PUBLIC_ELECTRIC_AUTH_MODE__
+ARG NEXT_PUBLIC_ZERO_CACHE_URL=__NEXT_PUBLIC_ZERO_CACHE_URL__
 ARG NEXT_PUBLIC_DEPLOYMENT_MODE=__NEXT_PUBLIC_DEPLOYMENT_MODE__
 
 ENV NEXT_PUBLIC_FASTAPI_BACKEND_URL=$NEXT_PUBLIC_FASTAPI_BACKEND_URL
 ENV NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE=$NEXT_PUBLIC_FASTAPI_BACKEND_AUTH_TYPE
 ENV NEXT_PUBLIC_ETL_SERVICE=$NEXT_PUBLIC_ETL_SERVICE
-ENV NEXT_PUBLIC_ELECTRIC_URL=$NEXT_PUBLIC_ELECTRIC_URL
-ENV NEXT_PUBLIC_ELECTRIC_AUTH_MODE=$NEXT_PUBLIC_ELECTRIC_AUTH_MODE
+ENV NEXT_PUBLIC_ZERO_CACHE_URL=$NEXT_PUBLIC_ZERO_CACHE_URL
 ENV NEXT_PUBLIC_DEPLOYMENT_MODE=$NEXT_PUBLIC_DEPLOYMENT_MODE
 
 COPY --from=deps /app/node_modules ./node_modules

surfsense_web/app/(home)/login/LocalLoginForm.tsx

@@ -6,7 +6,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
-import { toast } from "sonner";
 import { loginMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
 import { Spinner } from "@/components/ui/spinner";
 import { getAuthErrorDetails, isNetworkError } from "@/lib/auth-errors";
@@ -212,15 +211,13 @@ export function LocalLoginForm() {
 				<button
 					type="submit"
 					disabled={isLoggingIn}
-					className="w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
+					className="relative w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
 				>
-					{isLoggingIn ? (
-						<>
+					<span className={isLoggingIn ? "invisible" : ""}>{t("sign_in")}</span>
+					{isLoggingIn && (
+						<span className="absolute inset-0 flex items-center justify-center">
 							<Spinner size="sm" className="text-white" />
-							<span>{t("signing_in")}</span>
-						</>
-					) : (
-						t("sign_in")
+						</span>
 					)}
 				</button>
 			</form>

surfsense_web/app/(home)/register/page.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
-import { toast } from "sonner";
+import { type ExternalToast, toast } from "sonner";
 import { registerMutationAtom } from "@/atoms/auth/auth-mutation.atoms";
 import { Logo } from "@/components/Logo";
 import { Spinner } from "@/components/ui/spinner";
@@ -131,7 +131,7 @@ export default function RegisterPage() {
 			setError({ title: errorDetails.title, message: errorDetails.description });
 
 			// Show error toast with conditional retry action
-			const toastOptions: any = {
+			const toastOptions: ExternalToast = {
 				description: errorDetails.description,
 				duration: 6000,
 			};
@@ -289,15 +289,13 @@ export default function RegisterPage() {
 						<button
 							type="submit"
 							disabled={isRegistering}
-							className="w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
+							className="relative w-full rounded-md bg-blue-600 px-4 py-1.5 md:py-2 text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition-all text-sm md:text-base flex items-center justify-center gap-2"
 						>
-							{isRegistering ? (
-								<>
+							<span className={isRegistering ? "invisible" : ""}>{t("register")}</span>
+							{isRegistering && (
+								<span className="absolute inset-0 flex items-center justify-center gap-2">
 									<Spinner size="sm" className="text-white" />
-									<span>{t("creating_account_btn")}</span>
-								</>
-							) : (
-								t("register")
+								</span>
 							)}
 						</button>
 					</form>

surfsense_web/app/api/zero/mutate/route.ts

@@ -0,0 +1,5 @@
+import { NextResponse } from "next/server";
+
+export async function POST() {
+	return NextResponse.json([]);
+}

surfsense_web/app/api/zero/query/route.ts

@@ -0,0 +1,50 @@
+import { mustGetQuery } from "@rocicorp/zero";
+import { handleQueryRequest } from "@rocicorp/zero/server";
+import { NextResponse } from "next/server";
+import type { Context } from "@/types/zero";
+import { queries } from "@/zero/queries";
+import { schema } from "@/zero/schema";
+
+const backendURL = process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL || "http://localhost:8000";
+
+async function authenticateRequest(
+	request: Request
+): Promise<{ ctx: Context; error?: never } | { ctx?: never; error: NextResponse }> {
+	const authHeader = request.headers.get("Authorization");
+	if (!authHeader?.startsWith("Bearer ")) {
+		return { ctx: undefined };
+	}
+
+	try {
+		const res = await fetch(`${backendURL}/users/me`, {
+			headers: { Authorization: authHeader },
+		});
+
+		if (!res.ok) {
+			return { error: NextResponse.json({ error: "Unauthorized" }, { status: 401 }) };
+		}
+
+		const user = await res.json();
+		return { ctx: { userId: String(user.id) } };
+	} catch {
+		return { error: NextResponse.json({ error: "Auth service unavailable" }, { status: 503 }) };
+	}
+}
+
+export async function POST(request: Request) {
+	const auth = await authenticateRequest(request);
+	if (auth.error) {
+		return auth.error;
+	}
+
+	const result = await handleQueryRequest(
+		(name, args) => {
+			const query = mustGetQuery(queries, name);
+			return query.fn({ args, ctx: auth.ctx });
+		},
+		schema,
+		request
+	);
+
+	return NextResponse.json(result);
+}

surfsense_web/app/dashboard/[search_space_id]/connectors/callback/route.ts

@@ -0,0 +1,30 @@
+import { type NextRequest, NextResponse } from "next/server";
+
+const OAUTH_RESULT_COOKIE = "connector_oauth_result";
+
+export async function GET(
+	request: NextRequest,
+	{ params }: { params: Promise<{ search_space_id: string }> }
+) {
+	const { search_space_id } = await params;
+	const searchParams = request.nextUrl.searchParams;
+
+	const result = JSON.stringify({
+		success: searchParams.get("success"),
+		error: searchParams.get("error"),
+		connector: searchParams.get("connector"),
+		connectorId: searchParams.get("connectorId"),
+	});
+
+	const redirectUrl = new URL(`/dashboard/${search_space_id}/new-chat`, request.url);
+
+	const response = NextResponse.redirect(redirectUrl, { status: 302 });
+	response.cookies.set(OAUTH_RESULT_COOKIE, result, {
+		path: "/",
+		maxAge: 60,
+		httpOnly: false,
+		sameSite: "lax",
+	});
+
+	return response;
+}

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx

@@ -76,17 +76,17 @@ export function DocumentsFilters({
 							)}
 						</Button>
 					</PopoverTrigger>
-					<PopoverContent className="w-64 !p-0 overflow-hidden" align="end">
+					<PopoverContent className="w-56 md:w-52 !p-0 overflow-hidden" align="end">
 						<div>
 							{/* Search input */}
-							<div className="p-2 border-b border-border dark:border-neutral-700">
+							<div className="p-2">
 								<div className="relative">
 									<Search className="absolute left-0.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
 									<Input
 										placeholder="Search types"
 										value={typeSearchQuery}
 										onChange={(e) => setTypeSearchQuery(e.target.value)}
-										className="h-6 pl-6 text-sm bg-transparent border-0 shadow-none focus-visible:ring-0"
+										className="h-6 pl-6 text-sm bg-transparent border-0 shadow-none"
 									/>
 								</div>
 							</div>
@@ -172,7 +172,7 @@ export function DocumentsFilters({
 					<Input
 						id={`${id}-input`}
 						ref={inputRef}
-						className="peer h-9 w-full pl-9 pr-9 text-sm bg-sidebar border-border/60 focus-visible:ring-1 focus-visible:ring-ring/30 select-none focus:select-text"
+						className="peer h-9 w-full pl-9 pr-9 text-sm bg-sidebar border-border/60 select-none focus:select-text"
 						value={searchValue}
 						onChange={(e) => onSearch(e.target.value)}
 						placeholder="Search docs"
@@ -196,6 +196,7 @@ export function DocumentsFilters({
 
 				{/* Upload Button */}
 				<Button
+					data-joyride="upload-button"
 					onClick={openUploadDialog}
 					variant="outline"
 					size="sm"

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsTableShell.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useAtomValue, useSetAtom } from "jotai";
 import {
 	AlertCircle,
 	CheckCircle2,
@@ -9,15 +10,18 @@ import {
 	Eye,
 	FileText,
 	FileX,
+	MoreHorizontal,
 	Network,
 	PenLine,
 	SearchX,
 	Trash2,
+	User,
 } from "lucide-react";
-import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { openEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
+import { membersAtom } from "@/atoms/members/members-query.atoms";
 import { useDocumentUploadDialog } from "@/components/assistant-ui/document-upload-popup";
 import { JsonMetadataViewer } from "@/components/json-metadata-viewer";
 import { MarkdownViewer } from "@/components/markdown-viewer";
@@ -31,15 +35,9 @@ import {
 	AlertDialogHeader,
 	AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import {
-	ContextMenu,
-	ContextMenuContent,
-	ContextMenuItem,
-	ContextMenuSeparator,
-	ContextMenuTrigger,
-} from "@/components/ui/context-menu";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 import {
 	Drawer,
@@ -48,6 +46,12 @@ import {
 	DrawerHeader,
 	DrawerTitle,
 } from "@/components/ui/drawer";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import {
@@ -61,12 +65,20 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useLongPress } from "@/hooks/use-long-press";
 import { documentsApiService } from "@/lib/apis/documents-api.service";
-import { getDocumentTypeIcon, getDocumentTypeLabel } from "./DocumentTypeIcon";
+import { getDocumentTypeIcon } from "./DocumentTypeIcon";
 import type { Document, DocumentStatus } from "./types";
 
 const EDITABLE_DOCUMENT_TYPES = ["FILE", "NOTE"] as const;
 const NON_DELETABLE_DOCUMENT_TYPES = ["SURFSENSE_DOCS"] as const;
 
+function getInitials(name: string): string {
+	const parts = name.trim().split(/\s+/);
+	if (parts.length >= 2) {
+		return (parts[0][0] + parts[1][0]).toUpperCase();
+	}
+	return name.slice(0, 2).toUpperCase();
+}
+
 function StatusIndicator({ status }: { status?: DocumentStatus }) {
 	const state = status?.state ?? "ready";
 
@@ -145,45 +157,6 @@ function formatAbsoluteDate(dateStr: string): string {
 	});
 }
 
-function DocumentNameTooltip({ doc, className }: { doc: Document; className?: string }) {
-	const textRef = useRef<HTMLSpanElement>(null);
-	const [isTruncated, setIsTruncated] = useState(false);
-
-	useEffect(() => {
-		const checkTruncation = () => {
-			if (textRef.current) {
-				setIsTruncated(textRef.current.scrollWidth > textRef.current.clientWidth);
-			}
-		};
-		checkTruncation();
-		window.addEventListener("resize", checkTruncation);
-		return () => window.removeEventListener("resize", checkTruncation);
-	}, []);
-
-	return (
-		<Tooltip>
-			<TooltipTrigger asChild>
-				<span ref={textRef} className={className}>
-					{doc.title}
-				</span>
-			</TooltipTrigger>
-			<TooltipContent side="top" align="start" className="max-w-sm">
-				<div className="space-y-1 text-xs">
-					{isTruncated && <p className="font-medium text-sm break-words">{doc.title}</p>}
-					<p>
-						<span className="text-muted-foreground">Owner:</span>{" "}
-						{doc.created_by_name || doc.created_by_email || "—"}
-					</p>
-					<p>
-						<span className="text-muted-foreground">Created:</span>{" "}
-						{formatAbsoluteDate(doc.created_at)}
-					</p>
-				</div>
-			</TooltipContent>
-		</Tooltip>
-	);
-}
-
 function SortableHeader({
 	children,
 	sortKey,
@@ -217,73 +190,6 @@ function SortableHeader({
 	);
 }
 
-function RowContextMenu({
-	doc,
-	children,
-	onPreview,
-	onDelete,
-	searchSpaceId,
-	onEditNavigate,
-}: {
-	doc: Document;
-	children: React.ReactNode;
-	onPreview: (doc: Document) => void;
-	onDelete: (doc: Document) => void;
-	searchSpaceId: string;
-	onEditNavigate?: () => void;
-}) {
-	const router = useRouter();
-
-	const isEditable = EDITABLE_DOCUMENT_TYPES.includes(
-		doc.document_type as (typeof EDITABLE_DOCUMENT_TYPES)[number]
-	);
-	const isBeingProcessed = doc.status?.state === "pending" || doc.status?.state === "processing";
-	const isFileFailed = doc.document_type === "FILE" && doc.status?.state === "failed";
-	const shouldShowDelete = !NON_DELETABLE_DOCUMENT_TYPES.includes(
-		doc.document_type as (typeof NON_DELETABLE_DOCUMENT_TYPES)[number]
-	);
-	const isEditDisabled = isBeingProcessed || isFileFailed;
-	const isDeleteDisabled = isBeingProcessed;
-
-	return (
-		<ContextMenu>
-			<ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
-			<ContextMenuContent className="w-48">
-				<ContextMenuItem onClick={() => onPreview(doc)}>
-					<Eye className="h-4 w-4" />
-					Preview
-				</ContextMenuItem>
-				{isEditable && (
-					<ContextMenuItem
-						onClick={() => {
-							if (!isEditDisabled) {
-								onEditNavigate?.();
-								router.push(`/dashboard/${searchSpaceId}/editor/${doc.id}`);
-							}
-						}}
-						disabled={isEditDisabled}
-					>
-						<PenLine className="h-4 w-4" />
-						Edit
-					</ContextMenuItem>
-				)}
-				{shouldShowDelete && (
-					<>
-						<ContextMenuSeparator />
-						<ContextMenuItem
-							onClick={() => !isDeleteDisabled && onDelete(doc)}
-							disabled={isDeleteDisabled}
-						>
-							<Trash2 className="h-4 w-4" />
-							Delete
-						</ContextMenuItem>
-					</>
-				)}
-			</ContextMenuContent>
-		</ContextMenu>
-	);
-}
-
 function MobileCardWrapper({
 	onLongPress,
 	children,
@@ -327,7 +233,6 @@ export function DocumentsTableShell({
 	onLoadMore,
 	mentionedDocIds,
 	onToggleChatMention,
-	onEditNavigate,
 	isSearchMode = false,
 }: {
 	documents: Document[];
@@ -346,8 +251,6 @@ export function DocumentsTableShell({
 	mentionedDocIds?: Set<number>;
 	/** Toggle a document's mention in the chat (add if not mentioned, remove if mentioned) */
 	onToggleChatMention?: (doc: Document, mentioned: boolean) => void;
-	/** Called when user navigates to the editor via Edit — use to close containing sidebar/panel */
-	onEditNavigate?: () => void;
 	/** Whether results are filtered by a search query or type filters */
 	isSearchMode?: boolean;
 }) {
@@ -374,7 +277,23 @@ export function DocumentsTableShell({
 	const [mobileActionDoc, setMobileActionDoc] = useState<Document | null>(null);
 	const [bulkDeleteConfirmOpen, setBulkDeleteConfirmOpen] = useState(false);
 	const [isBulkDeleting, setIsBulkDeleting] = useState(false);
-	const router = useRouter();
+	const openEditor = useSetAtom(openEditorPanelAtom);
+	const [openMenuDocId, setOpenMenuDocId] = useState<number | null>(null);
+
+	const { data: members } = useAtomValue(membersAtom);
+	const memberMap = useMemo(() => {
+		const map = new Map<string, { name: string; email?: string; avatarUrl?: string }>();
+		if (members) {
+			for (const m of members) {
+				map.set(m.user_id, {
+					name: m.user_display_name || m.user_email || "Unknown",
+					email: m.user_email || undefined,
+					avatarUrl: m.user_avatar_url || undefined,
+				});
+			}
+		}
+		return map;
+	}, [members]);
 
 	const desktopSentinelRef = useRef<HTMLDivElement>(null);
 	const mobileSentinelRef = useRef<HTMLDivElement>(null);
@@ -553,6 +472,19 @@ export function DocumentsTableShell({
 		setBulkDeleteConfirmOpen(false);
 	}, [deletableSelectedIds, bulkDeleteDocuments, deleteDocument]);
 
+	const bulkDeleteBar = hasDeletableSelection ? (
+		<div className="flex items-center justify-center py-1.5 border-b border-border/50 bg-destructive/5 shrink-0 animate-in fade-in slide-in-from-top-1 duration-150">
+			<button
+				type="button"
+				onClick={() => setBulkDeleteConfirmOpen(true)}
+				className="flex items-center gap-1.5 px-3 py-1 rounded-md bg-destructive text-destructive-foreground shadow-sm text-xs font-medium hover:bg-destructive/90 transition-colors"
+			>
+				<Trash2 size={12} />
+				Delete ({deletableSelectedIds.length} selected)
+			</button>
+		</div>
+	) : null;
+
 	return (
 		<div className="bg-sidebar overflow-hidden select-none border-t border-border/50 flex-1 flex flex-col min-h-0">
 			{/* Desktop Table View */}
@@ -566,7 +498,7 @@ export function DocumentsTableShell({
 										checked={allMentionedOnPage || (someMentionedOnPage && "indeterminate")}
 										onCheckedChange={(v) => toggleAll(!!v)}
 										aria-label={hasChatMode ? "Toggle all for chat" : "Select all"}
-										className="border-foreground data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+										className="shrink-0"
 									/>
 								</div>
 							</TableHead>
@@ -586,27 +518,15 @@ export function DocumentsTableShell({
 									<Network size={14} className="text-muted-foreground" />
 								</span>
 							</TableHead>
-							<TableHead className="w-12 text-center h-8 pl-0 pr-3">
-								{hasDeletableSelection ? (
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<button
-												type="button"
-												onClick={() => setBulkDeleteConfirmOpen(true)}
-												className="inline-flex items-center justify-center h-6 w-6 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
-											>
-												<Trash2 size={14} />
-											</button>
-										</TooltipTrigger>
-										<TooltipContent>Delete {deletableSelectedIds.length} selected</TooltipContent>
-									</Tooltip>
-								) : (
-									<span className="text-xs font-medium text-muted-foreground">Status</span>
-								)}
+							<TableHead className="w-10 text-center h-8 px-0 pr-2">
+								<span className="flex items-center justify-center">
+									<User size={14} className="text-muted-foreground" />
+								</span>
 							</TableHead>
 						</TableRow>
 					</TableHeader>
 				</Table>
+				{bulkDeleteBar}
 				{loading ? (
 					<div className="flex-1 overflow-auto">
 						<Table className="table-fixed w-full">
@@ -627,7 +547,7 @@ export function DocumentsTableShell({
 										<TableCell className="w-10 px-0 py-1.5 text-center">
 											<Skeleton className="h-4 w-4 mx-auto rounded" />
 										</TableCell>
-										<TableCell className="w-12 pl-0 pr-3 py-1.5 text-center">
+										<TableCell className="w-10 px-0 pr-2 py-1.5 text-center">
 											<Skeleton className="h-5 w-5 mx-auto rounded-full" />
 										</TableCell>
 									</TableRow>
@@ -680,6 +600,17 @@ export function DocumentsTableShell({
 								{sorted.map((doc) => {
 									const isMentioned = mentionedDocIds?.has(doc.id) ?? false;
 									const canInteract = isSelectable(doc);
+									const isBeingProcessed =
+										doc.status?.state === "pending" || doc.status?.state === "processing";
+									const isFileFailed =
+										doc.document_type === "FILE" && doc.status?.state === "failed";
+									const isEditable = EDITABLE_DOCUMENT_TYPES.includes(
+										doc.document_type as (typeof EDITABLE_DOCUMENT_TYPES)[number]
+									);
+									const shouldShowDelete = !NON_DELETABLE_DOCUMENT_TYPES.includes(
+										doc.document_type as (typeof NON_DELETABLE_DOCUMENT_TYPES)[number]
+									);
+									const isMenuOpen = openMenuDocId === doc.id;
 									const handleRowToggle = () => {
 										if (canInteract && onToggleChatMention) {
 											onToggleChatMention(doc, isMentioned);
@@ -695,57 +626,159 @@ export function DocumentsTableShell({
 										handleRowToggle();
 									};
 									return (
-										<RowContextMenu
+										<tr
 											key={doc.id}
-											doc={doc}
-											onPreview={handleViewDocument}
-											onDelete={setDeleteDoc}
-											searchSpaceId={searchSpaceId}
-											onEditNavigate={onEditNavigate}
+											className={`group border-b border-border/50 transition-colors ${
+												isMentioned ? "bg-primary/5 hover:bg-primary/8" : "hover:bg-muted/30"
+											} ${canInteract && hasChatMode ? "cursor-pointer" : ""}`}
+											onClick={handleRowClick}
 										>
-											<tr
-												className={`border-b border-border/50 transition-colors ${
-													isMentioned ? "bg-primary/5 hover:bg-primary/8" : "hover:bg-muted/30"
-												} ${canInteract && hasChatMode ? "cursor-pointer" : ""}`}
-												onClick={handleRowClick}
+											<TableCell
+												className="w-10 pl-3 pr-0 py-1.5 text-center"
+												onClick={(e) => e.stopPropagation()}
 											>
-												<TableCell
-													className="w-10 pl-3 pr-0 py-1.5 text-center"
-													onClick={(e) => e.stopPropagation()}
-												>
-													<div className="flex items-center justify-center h-full">
-														<Checkbox
-															checked={isMentioned}
-															onCheckedChange={() => handleRowToggle()}
-															disabled={!canInteract}
-															aria-label={isMentioned ? "Remove from chat" : "Add to chat"}
-															className={`border-foreground data-[state=checked]:bg-primary data-[state=checked]:border-primary ${!canInteract ? "opacity-40 cursor-not-allowed" : ""}`}
-														/>
+												<div className="flex items-center justify-center h-full">
+													{(() => {
+														const state = doc.status?.state ?? "ready";
+														if (state === "pending" || state === "processing") {
+															return <StatusIndicator status={doc.status} />;
+														}
+														if (state === "failed") {
+															if (isMentioned) {
+																return (
+																	<Checkbox
+																		checked={isMentioned}
+																		onCheckedChange={() => handleRowToggle()}
+																		aria-label="Remove from chat"
+																		className="shrink-0"
+																	/>
+																);
+															}
+															return (
+																<>
+																	<span className="group-hover:hidden">
+																		<StatusIndicator status={doc.status} />
+																	</span>
+																	<span className="hidden group-hover:inline-flex">
+																		<Checkbox
+																			checked={isMentioned}
+																			onCheckedChange={() => handleRowToggle()}
+																			aria-label="Add to chat"
+																			className="shrink-0"
+																		/>
+																	</span>
+																</>
+															);
+														}
+														return (
+															<Checkbox
+																checked={isMentioned}
+																onCheckedChange={() => handleRowToggle()}
+																aria-label={isMentioned ? "Remove from chat" : "Add to chat"}
+																className="shrink-0"
+															/>
+														);
+													})()}
+												</div>
+											</TableCell>
+											<TableCell className="px-2 py-1.5 max-w-0">
+												<span className="truncate block text-sm text-foreground cursor-default">
+													{doc.title}
+												</span>
+											</TableCell>
+											<TableCell className="w-10 px-0 py-1.5 text-center">
+												<span className="flex items-center justify-center">
+													{getDocumentTypeIcon(doc.document_type, "h-4 w-4")}
+												</span>
+											</TableCell>
+											<TableCell
+												className="w-10 px-0 pr-2 py-1.5 text-center"
+												onClick={(e) => e.stopPropagation()}
+											>
+												<div className="relative flex items-center justify-center">
+													{(() => {
+														const member = doc.created_by_id
+															? memberMap.get(doc.created_by_id)
+															: null;
+														const displayName =
+															member?.name ||
+															doc.created_by_name ||
+															doc.created_by_email ||
+															"Unknown";
+														const avatarUrl = member?.avatarUrl;
+														const email = member?.email || doc.created_by_email || displayName;
+														return (
+															<Tooltip>
+																<TooltipTrigger asChild>
+																	<span
+																		className={`flex items-center justify-center ${isMenuOpen ? "invisible" : "group-hover:invisible"}`}
+																	>
+																		<Avatar className="size-5 shrink-0">
+																			{avatarUrl && (
+																				<AvatarImage src={avatarUrl} alt={displayName} />
+																			)}
+																			<AvatarFallback className="text-[9px]">
+																				{getInitials(displayName)}
+																			</AvatarFallback>
+																		</Avatar>
+																	</span>
+																</TooltipTrigger>
+																<TooltipContent side="top">{email}</TooltipContent>
+															</Tooltip>
+														);
+													})()}
+													<div
+														className={`absolute inset-0 flex items-center justify-center ${isMenuOpen ? "visible" : "invisible group-hover:visible"}`}
+													>
+														<DropdownMenu
+															onOpenChange={(open) => setOpenMenuDocId(open ? doc.id : null)}
+														>
+															<DropdownMenuTrigger asChild>
+																<button
+																	type="button"
+																	className="flex items-center justify-center h-6 w-6 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+																>
+																	<MoreHorizontal size={14} />
+																</button>
+															</DropdownMenuTrigger>
+															<DropdownMenuContent align="end" className="w-48">
+																<DropdownMenuItem onClick={() => handleViewDocument(doc)}>
+																	<Eye className="h-4 w-4" />
+																	Preview
+																</DropdownMenuItem>
+																{isEditable && (
+																	<DropdownMenuItem
+																		onClick={() => {
+																			if (!(isBeingProcessed || isFileFailed)) {
+																				openEditor({
+																					documentId: doc.id,
+																					searchSpaceId: Number(searchSpaceId),
+																					title: doc.title,
+																				});
+																			}
+																		}}
+																		disabled={isBeingProcessed || isFileFailed}
+																	>
+																		<PenLine className="h-4 w-4" />
+																		Edit
+																	</DropdownMenuItem>
+																)}
+																{shouldShowDelete && (
+																	<DropdownMenuItem
+																		onClick={() => !isBeingProcessed && setDeleteDoc(doc)}
+																		disabled={isBeingProcessed}
+																		className=""
+																	>
+																		<Trash2 className="h-4 w-4" />
+																		Delete
+																	</DropdownMenuItem>
+																)}
+															</DropdownMenuContent>
+														</DropdownMenu>
 													</div>
-												</TableCell>
-												<TableCell className="px-2 py-1.5 max-w-0">
-													<DocumentNameTooltip
-														doc={doc}
-														className="truncate block text-sm text-foreground cursor-default"
-													/>
-												</TableCell>
-												<TableCell className="w-10 px-0 py-1.5 text-center">
-													<Tooltip>
-														<TooltipTrigger asChild>
-															<span className="flex items-center justify-center">
-																{getDocumentTypeIcon(doc.document_type, "h-4 w-4")}
-															</span>
-														</TooltipTrigger>
-														<TooltipContent side="top">
-															{getDocumentTypeLabel(doc.document_type)}
-														</TooltipContent>
-													</Tooltip>
-												</TableCell>
-												<TableCell className="w-12 pl-0 pr-3 py-1.5 text-center">
-													<StatusIndicator status={doc.status} />
-												</TableCell>
-											</tr>
-										</RowContextMenu>
+												</div>
+											</TableCell>
+										</tr>
 									);
 								})}
 							</TableBody>
@@ -755,6 +788,9 @@ export function DocumentsTableShell({
 				)}
 			</div>
 
+			{/* Mobile bulk delete bar */}
+			<div className="md:hidden">{bulkDeleteBar}</div>
+
 			{/* Mobile Card View */}
 			{loading ? (
 				<div className="md:hidden divide-y divide-border/50 flex-1 overflow-auto">
@@ -765,10 +801,8 @@ export function DocumentsTableShell({
 								<div className="flex-1 min-w-0">
 									<Skeleton className="h-4" style={{ width: `${widthPercent}%` }} />
 								</div>
-								<div className="flex items-center gap-2">
-									<Skeleton className="h-4 w-4 rounded shrink-0" />
-									<Skeleton className="h-5 w-5 rounded-full shrink-0" />
-								</div>
+								<Skeleton className="h-4 w-4 rounded shrink-0" />
+								<Skeleton className="h-5 w-5 rounded-full shrink-0" />
 							</div>
 						</div>
 					))}
@@ -814,25 +848,11 @@ export function DocumentsTableShell({
 					ref={mobileScrollRef}
 					className="md:hidden divide-y divide-border/50 flex-1 overflow-auto"
 				>
-					{hasDeletableSelection && (
-						<div className="flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-border/50 sticky top-0 z-10">
-							<span className="text-xs text-muted-foreground">
-								{deletableSelectedIds.length} deletable selected
-							</span>
-							<Button
-								variant="destructive"
-								size="sm"
-								className="h-7 px-2.5 text-xs"
-								onClick={() => setBulkDeleteConfirmOpen(true)}
-							>
-								<Trash2 size={12} className="mr-1" />
-								Delete
-							</Button>
-						</div>
-					)}
 					{sorted.map((doc) => {
 						const isMentioned = mentionedDocIds?.has(doc.id) ?? false;
-						const canInteract = isSelectable(doc);
+						const statusState = doc.status?.state ?? "ready";
+						const showCheckbox = statusState === "ready";
+						const canInteract = showCheckbox;
 						const handleCardClick = (e?: React.MouseEvent) => {
 							if (e && (e.ctrlKey || e.metaKey)) {
 								e.preventDefault();
@@ -862,24 +882,40 @@ export function DocumentsTableShell({
 										/>
 									)}
 									<div className="relative z-10 flex items-center gap-3 pointer-events-none">
-										<span className="pointer-events-auto">
-											<Checkbox
-												checked={isMentioned}
-												onCheckedChange={() => handleCardClick()}
-												disabled={!canInteract}
-												aria-label={isMentioned ? "Remove from chat" : "Add to chat"}
-												className={`border-foreground data-[state=checked]:bg-primary data-[state=checked]:border-primary shrink-0 ${!canInteract ? "opacity-40 cursor-not-allowed" : ""}`}
-											/>
+										<span className="pointer-events-auto shrink-0">
+											{showCheckbox ? (
+												<Checkbox
+													checked={isMentioned}
+													onCheckedChange={() => handleCardClick()}
+													aria-label={isMentioned ? "Remove from chat" : "Add to chat"}
+													className="shrink-0"
+												/>
+											) : (
+												<StatusIndicator status={doc.status} />
+											)}
 										</span>
 										<div className="flex-1 min-w-0">
 											<span className="truncate block text-sm text-foreground">{doc.title}</span>
 										</div>
-										<div className="flex items-center gap-2 shrink-0">
-											<span className="flex items-center justify-center">
-												{getDocumentTypeIcon(doc.document_type, "h-4 w-4")}
-											</span>
-											<StatusIndicator status={doc.status} />
-										</div>
+										<span className="flex items-center justify-center shrink-0">
+											{getDocumentTypeIcon(doc.document_type, "h-4 w-4")}
+										</span>
+										{(() => {
+											const member = doc.created_by_id ? memberMap.get(doc.created_by_id) : null;
+											const displayName =
+												member?.name || doc.created_by_name || doc.created_by_email || "Unknown";
+											const avatarUrl = member?.avatarUrl;
+											return (
+												<span className="flex items-center justify-center shrink-0">
+													<Avatar className="size-5">
+														{avatarUrl && <AvatarImage src={avatarUrl} alt={displayName} />}
+														<AvatarFallback className="text-[9px]">
+															{getInitials(displayName)}
+														</AvatarFallback>
+													</Avatar>
+												</span>
+											);
+										})()}
 									</div>
 								</div>
 							</MobileCardWrapper>
@@ -960,7 +996,7 @@ export function DocumentsTableShell({
 							disabled={isDeleting}
 							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							{isDeleting ? "Deleting" : "Delete"}
+							{isDeleting ? <Spinner size="sm" /> : "Delete"}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
@@ -985,7 +1021,7 @@ export function DocumentsTableShell({
 					</DrawerHeader>
 					<div className="px-4 pb-6 flex flex-col gap-2">
 						<Button
-							variant="outline"
+							variant="secondary"
 							className="justify-start gap-2"
 							onClick={() => {
 								if (mobileActionDoc) handleViewDocument(mobileActionDoc);
@@ -1000,7 +1036,7 @@ export function DocumentsTableShell({
 								mobileActionDoc.document_type as (typeof EDITABLE_DOCUMENT_TYPES)[number]
 							) && (
 								<Button
-									variant="outline"
+									variant="secondary"
 									className="justify-start gap-2"
 									disabled={
 										mobileActionDoc.status?.state === "pending" ||
@@ -1010,8 +1046,11 @@ export function DocumentsTableShell({
 									}
 									onClick={() => {
 										if (mobileActionDoc) {
-											onEditNavigate?.();
-											router.push(`/dashboard/${searchSpaceId}/editor/${mobileActionDoc.id}`);
+											openEditor({
+												documentId: mobileActionDoc.id,
+												searchSpaceId: Number(searchSpaceId),
+												title: mobileActionDoc.title,
+											});
 											setMobileActionDoc(null);
 										}
 									}}
@@ -1075,7 +1114,7 @@ export function DocumentsTableShell({
 							disabled={isBulkDeleting}
 							className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
 						>
-							{isBulkDeleting ? "Deleting..." : "Delete"}
+							{isBulkDeleting ? <Spinner size="sm" /> : "Delete"}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/RowActions.tsx

@@ -1,9 +1,10 @@
 "use client";
 
+import { useSetAtom } from "jotai";
 import { MoreHorizontal, PenLine, Trash2 } from "lucide-react";
-import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { toast } from "sonner";
+import { openEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -40,7 +41,7 @@ export function RowActions({
 }) {
 	const [isDeleteOpen, setIsDeleteOpen] = useState(false);
 	const [isDeleting, setIsDeleting] = useState(false);
-	const router = useRouter();
+	const openEditorPanel = useSetAtom(openEditorPanelAtom);
 
 	const isEditable = EDITABLE_DOCUMENT_TYPES.includes(
 		document.document_type as (typeof EDITABLE_DOCUMENT_TYPES)[number]
@@ -87,7 +88,11 @@ export function RowActions({
 	};
 
 	const handleEdit = () => {
-		router.push(`/dashboard/${searchSpaceId}/editor/${document.id}`);
+		openEditorPanel({
+			documentId: document.id,
+			searchSpaceId: Number(searchSpaceId),
+			title: document.title,
+		});
 	};
 
 	return (

surfsense_web/app/dashboard/[search_space_id]/editor/[documentId]/page.tsx

@@ -1,505 +0,0 @@
-"use client";
-
-import { useAtom } from "jotai";
-import { AlertCircle, ArrowLeft, FileText } from "lucide-react";
-import { motion } from "motion/react";
-import dynamic from "next/dynamic";
-import { useParams, useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
-import { hasUnsavedEditorChangesAtom, pendingEditorNavigationAtom } from "@/atoms/editor/ui.atoms";
-import {
-	AlertDialog,
-	AlertDialogAction,
-	AlertDialogCancel,
-	AlertDialogContent,
-	AlertDialogDescription,
-	AlertDialogFooter,
-	AlertDialogHeader,
-	AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button, buttonVariants } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Skeleton } from "@/components/ui/skeleton";
-import { notesApiService } from "@/lib/apis/notes-api.service";
-import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
-
-// Dynamically import PlateEditor (uses 'use client' internally)
-const PlateEditor = dynamic(
-	() => import("@/components/editor/plate-editor").then((mod) => ({ default: mod.PlateEditor })),
-	{
-		ssr: false,
-		loading: () => (
-			<div className="mx-auto w-full max-w-[900px] px-6 md:px-12 pt-10 space-y-4">
-				<Skeleton className="h-8 w-3/5 rounded" />
-				<div className="space-y-3 pt-4">
-					<Skeleton className="h-4 w-full rounded" />
-					<Skeleton className="h-4 w-full rounded" />
-					<Skeleton className="h-4 w-4/5 rounded" />
-				</div>
-				<div className="space-y-3 pt-3">
-					<Skeleton className="h-4 w-full rounded" />
-					<Skeleton className="h-4 w-5/6 rounded" />
-					<Skeleton className="h-4 w-3/4 rounded" />
-				</div>
-				<div className="space-y-3 pt-3">
-					<Skeleton className="h-4 w-full rounded" />
-					<Skeleton className="h-4 w-2/3 rounded" />
-				</div>
-			</div>
-		),
-	}
-);
-
-interface EditorContent {
-	document_id: number;
-	title: string;
-	document_type?: string;
-	source_markdown: string;
-	updated_at: string | null;
-}
-
-/** Extract title from markdown: first # heading, or first non-empty line. */
-function extractTitleFromMarkdown(markdown: string | null | undefined): string {
-	if (!markdown) return "Untitled";
-	for (const line of markdown.split("\n")) {
-		const trimmed = line.trim();
-		if (trimmed.startsWith("# ")) return trimmed.slice(2).trim() || "Untitled";
-		if (trimmed) return trimmed.slice(0, 100);
-	}
-	return "Untitled";
-}
-
-export default function EditorPage() {
-	const params = useParams();
-	const router = useRouter();
-	const documentId = params.documentId as string;
-	const searchSpaceId = Number(params.search_space_id);
-	const isNewNote = documentId === "new";
-
-	const [document, setDocument] = useState<EditorContent | null>(null);
-	const [loading, setLoading] = useState(true);
-	const [saving, setSaving] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-	const [showUnsavedDialog, setShowUnsavedDialog] = useState(false);
-	const [editorTitle, setEditorTitle] = useState<string>("Untitled");
-
-	// Store the latest markdown from the editor
-	const markdownRef = useRef<string>("");
-	const initialLoadDone = useRef(false);
-
-	// Global state for cross-component communication
-	const [, setGlobalHasUnsavedChanges] = useAtom(hasUnsavedEditorChangesAtom);
-	const [pendingNavigation, setPendingNavigation] = useAtom(pendingEditorNavigationAtom);
-
-	// Sync local unsaved changes state with global atom
-	useEffect(() => {
-		setGlobalHasUnsavedChanges(hasUnsavedChanges);
-	}, [hasUnsavedChanges, setGlobalHasUnsavedChanges]);
-
-	// Cleanup global state when component unmounts
-	useEffect(() => {
-		return () => {
-			setGlobalHasUnsavedChanges(false);
-			setPendingNavigation(null);
-		};
-	}, [setGlobalHasUnsavedChanges, setPendingNavigation]);
-
-	// Handle pending navigation from sidebar
-	useEffect(() => {
-		if (pendingNavigation) {
-			if (hasUnsavedChanges) {
-				setShowUnsavedDialog(true);
-			} else {
-				router.push(pendingNavigation);
-				setPendingNavigation(null);
-			}
-		}
-	}, [pendingNavigation, hasUnsavedChanges, router, setPendingNavigation]);
-
-	// Reset state and fetch document content when documentId changes
-	useEffect(() => {
-		setDocument(null);
-		setError(null);
-		setHasUnsavedChanges(false);
-		setLoading(true);
-		initialLoadDone.current = false;
-
-		async function fetchDocument() {
-			if (isNewNote) {
-				markdownRef.current = "";
-				setEditorTitle("Untitled");
-				setDocument({
-					document_id: 0,
-					title: "Untitled",
-					document_type: "NOTE",
-					source_markdown: "",
-					updated_at: null,
-				});
-				setLoading(false);
-				initialLoadDone.current = true;
-				return;
-			}
-
-			const token = getBearerToken();
-			if (!token) {
-				redirectToLogin();
-				return;
-			}
-
-			try {
-				const response = await authenticatedFetch(
-					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${params.search_space_id}/documents/${documentId}/editor-content`,
-					{ method: "GET" }
-				);
-
-				if (!response.ok) {
-					const errorData = await response
-						.json()
-						.catch(() => ({ detail: "Failed to fetch document" }));
-					throw new Error(errorData.detail || "Failed to fetch document");
-				}
-
-				const data = await response.json();
-
-				if (data.source_markdown === undefined || data.source_markdown === null) {
-					setError(
-						"This document does not have editable content. Please re-upload to enable editing."
-					);
-					setLoading(false);
-					return;
-				}
-
-				markdownRef.current = data.source_markdown;
-				setEditorTitle(extractTitleFromMarkdown(data.source_markdown));
-				setDocument(data);
-				setError(null);
-				initialLoadDone.current = true;
-			} catch (error) {
-				console.error("Error fetching document:", error);
-				setError(
-					error instanceof Error ? error.message : "Failed to fetch document. Please try again."
-				);
-			} finally {
-				setLoading(false);
-			}
-		}
-
-		if (documentId) {
-			fetchDocument();
-		}
-	}, [documentId, params.search_space_id, isNewNote]);
-
-	const isNote = isNewNote || document?.document_type === "NOTE";
-
-	const displayTitle = useMemo(() => {
-		if (isNote) return editorTitle;
-		return document?.title || "Untitled";
-	}, [isNote, document?.title, editorTitle]);
-
-	// Handle markdown changes from the Plate editor
-	const handleMarkdownChange = useCallback((md: string) => {
-		markdownRef.current = md;
-		if (initialLoadDone.current) {
-			setHasUnsavedChanges(true);
-			setEditorTitle(extractTitleFromMarkdown(md));
-		}
-	}, []);
-
-	// Save handler
-	const handleSave = useCallback(async () => {
-		const token = getBearerToken();
-		if (!token) {
-			toast.error("Please login to save");
-			redirectToLogin();
-			return;
-		}
-
-		setSaving(true);
-		setError(null);
-
-		try {
-			const currentMarkdown = markdownRef.current;
-
-			if (isNewNote) {
-				const title = extractTitleFromMarkdown(currentMarkdown);
-
-				// Create the note
-				const note = await notesApiService.createNote({
-					search_space_id: searchSpaceId,
-					title,
-					source_markdown: currentMarkdown || undefined,
-				});
-
-				// If there's content, save & trigger reindexing
-				if (currentMarkdown) {
-					const response = await authenticatedFetch(
-						`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${note.id}/save`,
-						{
-							method: "POST",
-							headers: { "Content-Type": "application/json" },
-							body: JSON.stringify({ source_markdown: currentMarkdown }),
-						}
-					);
-
-					if (!response.ok) {
-						const errorData = await response
-							.json()
-							.catch(() => ({ detail: "Failed to save document" }));
-						throw new Error(errorData.detail || "Failed to save document");
-					}
-				}
-
-				setHasUnsavedChanges(false);
-				toast.success("Note created successfully! Reindexing in background...");
-				router.push(`/dashboard/${searchSpaceId}/new-chat`);
-			} else {
-				// Existing document — save
-				const response = await authenticatedFetch(
-					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${params.search_space_id}/documents/${documentId}/save`,
-					{
-						method: "POST",
-						headers: { "Content-Type": "application/json" },
-						body: JSON.stringify({ source_markdown: currentMarkdown }),
-					}
-				);
-
-				if (!response.ok) {
-					const errorData = await response
-						.json()
-						.catch(() => ({ detail: "Failed to save document" }));
-					throw new Error(errorData.detail || "Failed to save document");
-				}
-
-				setHasUnsavedChanges(false);
-				toast.success("Document saved! Reindexing in background...");
-				router.push(`/dashboard/${searchSpaceId}/new-chat`);
-			}
-		} catch (error) {
-			console.error("Error saving document:", error);
-			const errorMessage =
-				error instanceof Error
-					? error.message
-					: isNewNote
-						? "Failed to create note. Please try again."
-						: "Failed to save document. Please try again.";
-			setError(errorMessage);
-			toast.error(errorMessage);
-		} finally {
-			setSaving(false);
-		}
-	}, [isNewNote, searchSpaceId, documentId, params.search_space_id, router]);
-
-	const handleBack = () => {
-		if (hasUnsavedChanges) {
-			setShowUnsavedDialog(true);
-		} else {
-			router.push(`/dashboard/${searchSpaceId}/new-chat`);
-		}
-	};
-
-	const handleConfirmLeave = () => {
-		setShowUnsavedDialog(false);
-		setGlobalHasUnsavedChanges(false);
-		setHasUnsavedChanges(false);
-
-		if (pendingNavigation) {
-			router.push(pendingNavigation);
-			setPendingNavigation(null);
-		} else {
-			router.push(`/dashboard/${searchSpaceId}/new-chat`);
-		}
-	};
-
-	const handleSaveAndLeave = async () => {
-		setShowUnsavedDialog(false);
-		setPendingNavigation(null);
-		await handleSave();
-	};
-
-	const handleCancelLeave = () => {
-		setShowUnsavedDialog(false);
-		setPendingNavigation(null);
-	};
-
-	if (loading) {
-		return (
-			<div className="flex flex-col h-screen w-full overflow-hidden">
-				{/* Top bar skeleton — real back button & file icon, skeleton title */}
-				<div className="flex h-14 md:h-16 shrink-0 items-center border-b bg-background pl-1.5 pr-3 md:pl-3 md:pr-6">
-					<div className="flex items-center gap-1.5 md:gap-2 flex-1 min-w-0">
-						<Button
-							variant="ghost"
-							size="icon"
-							onClick={() => router.push(`/dashboard/${searchSpaceId}/documents`)}
-							className="h-7 w-7 shrink-0 p-0"
-						>
-							<ArrowLeft className="h-4 w-4" />
-							<span className="sr-only">Back</span>
-						</Button>
-						<FileText className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground shrink-0" />
-						<Skeleton className="h-5 w-40 rounded" />
-					</div>
-				</div>
-
-				{/* Fixed toolbar placeholder — matches real toolbar styling */}
-				<div className="sticky top-0 left-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 h-10" />
-
-				{/* Content area skeleton — mimics document text lines */}
-				<div className="flex-1 min-h-0 overflow-hidden">
-					<div className="mx-auto w-full max-w-[900px] px-6 md:px-12 pt-10 space-y-4">
-						{/* Title-like line */}
-						<Skeleton className="h-8 w-3/5 rounded" />
-						{/* Paragraph lines */}
-						<div className="space-y-3 pt-4">
-							<Skeleton className="h-4 w-full rounded" />
-							<Skeleton className="h-4 w-full rounded" />
-							<Skeleton className="h-4 w-4/5 rounded" />
-						</div>
-						<div className="space-y-3 pt-3">
-							<Skeleton className="h-4 w-full rounded" />
-							<Skeleton className="h-4 w-5/6 rounded" />
-							<Skeleton className="h-4 w-3/4 rounded" />
-						</div>
-						<div className="space-y-3 pt-3">
-							<Skeleton className="h-4 w-full rounded" />
-							<Skeleton className="h-4 w-2/3 rounded" />
-						</div>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	if (error && !document) {
-		return (
-			<div className="flex items-center justify-center min-h-[400px] p-6">
-				<motion.div
-					initial={{ opacity: 0, y: 20 }}
-					animate={{ opacity: 1, y: 0 }}
-					className="w-full max-w-md"
-				>
-					<Card className="border-destructive/50">
-						<CardHeader>
-							<div className="flex items-center gap-2">
-								<AlertCircle className="h-5 w-5 text-destructive" />
-								<CardTitle className="text-destructive">Error</CardTitle>
-							</div>
-							<CardDescription>{error}</CardDescription>
-						</CardHeader>
-						<CardContent>
-							<Button
-								onClick={() => router.push(`/dashboard/${searchSpaceId}/documents`)}
-								variant="outline"
-								className="gap-2"
-							>
-								<ArrowLeft className="h-4 w-4" />
-								Back
-							</Button>
-						</CardContent>
-					</Card>
-				</motion.div>
-			</div>
-		);
-	}
-
-	if (!document && !isNewNote) {
-		return (
-			<div className="flex items-center justify-center min-h-[400px] p-6">
-				<Card className="w-full max-w-md">
-					<CardContent className="flex flex-col items-center justify-center py-12">
-						<FileText className="h-12 w-12 text-muted-foreground mb-4" />
-						<p className="text-muted-foreground">Document not found</p>
-					</CardContent>
-				</Card>
-			</div>
-		);
-	}
-
-	return (
-		<motion.div
-			initial={{ opacity: 0 }}
-			animate={{ opacity: 1 }}
-			className="flex flex-col h-screen w-full overflow-hidden"
-		>
-			{/* Toolbar */}
-			<div className="flex h-14 md:h-16 shrink-0 items-center border-b bg-background pl-1.5 pr-3 md:pl-3 md:pr-6">
-				<div className="flex items-center gap-1.5 md:gap-2 flex-1 min-w-0">
-					<Button
-						variant="ghost"
-						size="icon"
-						onClick={handleBack}
-						disabled={saving}
-						className="h-7 w-7 shrink-0 p-0"
-					>
-						<ArrowLeft className="h-4 w-4" />
-						<span className="sr-only">Back</span>
-					</Button>
-					<FileText className="h-4 w-4 md:h-5 md:w-5 text-muted-foreground shrink-0" />
-					<div className="flex flex-col min-w-0">
-						<h1 className="text-base md:text-lg font-semibold truncate">{displayTitle}</h1>
-						{hasUnsavedChanges && (
-							<p className="text-[10px] md:text-xs text-muted-foreground">Unsaved changes</p>
-						)}
-					</div>
-				</div>
-			</div>
-
-			{/* Editor Container */}
-			<div className="flex-1 min-h-0 flex flex-col overflow-hidden relative">
-				{error && (
-					<motion.div
-						initial={{ opacity: 0, y: -10 }}
-						animate={{ opacity: 1, y: 0 }}
-						className="px-3 md:px-6 pt-3 md:pt-6"
-					>
-						<div className="flex items-center gap-2 p-4 rounded-lg border border-destructive/50 bg-destructive/10 text-destructive max-w-4xl mx-auto">
-							<AlertCircle className="h-5 w-5 shrink-0" />
-							<p className="text-sm">{error}</p>
-						</div>
-					</motion.div>
-				)}
-				<div className="flex-1 min-h-0">
-					<PlateEditor
-						key={documentId}
-						preset="full"
-						markdown={document?.source_markdown ?? ""}
-						onMarkdownChange={handleMarkdownChange}
-						onSave={handleSave}
-						hasUnsavedChanges={hasUnsavedChanges}
-						isSaving={saving}
-						defaultEditing={true}
-					/>
-				</div>
-			</div>
-
-			{/* Unsaved Changes Dialog */}
-			<AlertDialog
-				open={showUnsavedDialog}
-				onOpenChange={(open) => {
-					if (!open) handleCancelLeave();
-				}}
-			>
-				<AlertDialogContent>
-					<AlertDialogHeader>
-						<AlertDialogTitle>Unsaved Changes</AlertDialogTitle>
-						<AlertDialogDescription>
-							You have unsaved changes. Are you sure you want to leave?
-						</AlertDialogDescription>
-					</AlertDialogHeader>
-					<AlertDialogFooter>
-						<AlertDialogCancel onClick={handleCancelLeave}>Cancel</AlertDialogCancel>
-						<AlertDialogAction
-							onClick={handleConfirmLeave}
-							className={buttonVariants({ variant: "secondary" })}
-						>
-							Leave without saving
-						</AlertDialogAction>
-						<AlertDialogAction onClick={handleSaveAndLeave}>Save</AlertDialogAction>
-					</AlertDialogFooter>
-				</AlertDialogContent>
-			</AlertDialog>
-		</motion.div>
-	);
-}

surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx

@@ -1,80 +1,9 @@
 "use client";
 
-import { IconCalendar, IconMailFilled } from "@tabler/icons-react";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Check, ExternalLink, Gift, Mail, Star, Zap } from "lucide-react";
 import { motion } from "motion/react";
-import Link from "next/link";
-import { useEffect } from "react";
-import { toast } from "sonner";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import {
-	Dialog,
-	DialogContent,
-	DialogDescription,
-	DialogHeader,
-	DialogTitle,
-	DialogTrigger,
-} from "@/components/ui/dialog";
-import { Separator } from "@/components/ui/separator";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Spinner } from "@/components/ui/spinner";
-import type { IncentiveTaskInfo } from "@/contracts/types/incentive-tasks.types";
-import { incentiveTasksApiService } from "@/lib/apis/incentive-tasks-api.service";
-import {
-	trackIncentiveContactOpened,
-	trackIncentivePageViewed,
-	trackIncentiveTaskClicked,
-	trackIncentiveTaskCompleted,
-} from "@/lib/posthog/events";
-import { cn } from "@/lib/utils";
+import { MorePagesContent } from "@/components/settings/more-pages-content";
 
 export default function MorePagesPage() {
-	const queryClient = useQueryClient();
-
-	useEffect(() => {
-		trackIncentivePageViewed();
-	}, []);
-
-	const { data, isLoading } = useQuery({
-		queryKey: ["incentive-tasks"],
-		queryFn: () => incentiveTasksApiService.getTasks(),
-	});
-
-	const completeMutation = useMutation({
-		mutationFn: incentiveTasksApiService.completeTask,
-		onSuccess: (response, taskType) => {
-			if (response.success) {
-				toast.success(response.message);
-				const task = data?.tasks.find((t) => t.task_type === taskType);
-				if (task) {
-					trackIncentiveTaskCompleted(taskType, task.pages_reward);
-				}
-				queryClient.invalidateQueries({ queryKey: ["incentive-tasks"] });
-				queryClient.invalidateQueries({ queryKey: ["user"] });
-			}
-		},
-		onError: () => {
-			toast.error("Failed to complete task. Please try again.");
-		},
-	});
-
-	const handleTaskClick = (task: IncentiveTaskInfo) => {
-		if (!task.completed) {
-			trackIncentiveTaskClicked(task.task_type);
-			completeMutation.mutate(task.task_type);
-		}
-	};
-
 	return (
 		<div className="flex min-h-[calc(100vh-64px)] select-none items-center justify-center px-4 py-8">
 			<motion.div
@@ -83,140 +12,7 @@ export default function MorePagesPage() {
 				transition={{ duration: 0.3 }}
 				className="w-full max-w-md space-y-6"
 			>
-				{/* Header */}
-				<div className="text-center">
-					<Gift className="mx-auto mb-3 h-8 w-8 text-primary" />
-					<h2 className="text-xl font-bold tracking-tight">Get More Pages</h2>
-					<p className="mt-1 text-sm text-muted-foreground">
-						Complete tasks to earn additional pages
-					</p>
-				</div>
-
-				{/* Tasks */}
-				{isLoading ? (
-					<Card>
-						<CardContent className="flex items-center gap-3 p-3">
-							<Skeleton className="h-9 w-9 rounded-full" />
-							<div className="flex-1 space-y-2">
-								<Skeleton className="h-4 w-3/4" />
-								<Skeleton className="h-3 w-1/4" />
-							</div>
-							<Skeleton className="h-8 w-16" />
-						</CardContent>
-					</Card>
-				) : (
-					<div className="space-y-2">
-						{data?.tasks.map((task) => (
-							<Card
-								key={task.task_type}
-								className={cn("transition-colors", task.completed && "bg-muted/50")}
-							>
-								<CardContent className="flex items-center gap-3 p-3">
-									<div
-										className={cn(
-											"flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
-											task.completed ? "bg-primary text-primary-foreground" : "bg-muted"
-										)}
-									>
-										{task.completed ? <Check className="h-4 w-4" /> : <Star className="h-4 w-4" />}
-									</div>
-									<div className="min-w-0 flex-1">
-										<p
-											className={cn(
-												"text-sm font-medium",
-												task.completed && "text-muted-foreground line-through"
-											)}
-										>
-											{task.title}
-										</p>
-										<p className="text-xs text-muted-foreground">+{task.pages_reward} pages</p>
-									</div>
-									<Button
-										variant={task.completed ? "ghost" : "outline"}
-										size="sm"
-										disabled={task.completed || completeMutation.isPending}
-										onClick={() => handleTaskClick(task)}
-										asChild={!task.completed}
-									>
-										{task.completed ? (
-											<span>Done</span>
-										) : (
-											<a
-												href={task.action_url}
-												target="_blank"
-												rel="noopener noreferrer"
-												className="gap-1"
-											>
-												{completeMutation.isPending ? (
-													<Spinner size="xs" />
-												) : (
-													<>
-														Go
-														<ExternalLink className="h-3 w-3" />
-													</>
-												)}
-											</a>
-										)}
-									</Button>
-								</CardContent>
-							</Card>
-						))}
-					</div>
-				)}
-
-				{/* PRO Upgrade */}
-				<Separator />
-
-				<Card className="overflow-hidden border-emerald-500/20">
-					<CardHeader className="pb-2">
-						<div className="flex items-center gap-2">
-							<Zap className="h-4 w-4 text-emerald-500" />
-							<CardTitle className="text-base">Upgrade to PRO</CardTitle>
-							<Badge className="bg-emerald-600 text-white border-transparent hover:bg-emerald-600">
-								FREE
-							</Badge>
-						</div>
-						<CardDescription>
-							For a limited time, get{" "}
-							<span className="font-semibold text-foreground">6,000 additional pages</span> at no
-							cost. Contact us and we&apos;ll upgrade your account instantly.
-						</CardDescription>
-					</CardHeader>
-					<CardFooter className="pt-2">
-						<Dialog onOpenChange={(open) => open && trackIncentiveContactOpened()}>
-							<DialogTrigger asChild>
-								<Button className="w-full bg-emerald-600 text-white hover:bg-emerald-700">
-									<Mail className="h-4 w-4" />
-									Contact Us to Upgrade
-								</Button>
-							</DialogTrigger>
-							<DialogContent className="select-none sm:max-w-sm">
-								<DialogHeader>
-									<DialogTitle>Get in Touch</DialogTitle>
-									<DialogDescription>Pick the option that works best for you.</DialogDescription>
-								</DialogHeader>
-								<div className="flex flex-col gap-2">
-									<Button asChild>
-										<Link
-											href="https://cal.com/mod-rohan"
-											target="_blank"
-											rel="noopener noreferrer"
-										>
-											<IconCalendar className="h-4 w-4" />
-											Schedule a Meeting
-										</Link>
-									</Button>
-									<Button variant="outline" asChild>
-										<Link href="mailto:rohan@surfsense.com">
-											<IconMailFilled className="h-4 w-4" />
-											rohan@surfsense.com
-										</Link>
-									</Button>
-								</div>
-							</DialogContent>
-						</Dialog>
-					</CardFooter>
-				</Card>
+				<MorePagesContent />
 			</motion.div>
 		</div>
 	);

surfsense_web/app/dashboard/[search_space_id]/new-chat/[[...chat_id]]/page.tsx

@@ -30,18 +30,42 @@ import {
 	// extractWriteTodosFromContent,
 } from "@/atoms/chat/plan-state.atom";
 import { closeReportPanelAtom } from "@/atoms/chat/report-panel.atom";
+import { closeEditorPanelAtom } from "@/atoms/editor/editor-panel.atom";
 import { membersAtom } from "@/atoms/members/members-query.atoms";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { Thread } from "@/components/assistant-ui/thread";
+import { MobileEditorPanel } from "@/components/editor-panel/editor-panel";
+import { MobileHitlEditPanel } from "@/components/hitl-edit-panel/hitl-edit-panel";
 import { MobileReportPanel } from "@/components/report-panel/report-panel";
+import {
+	CreateConfluencePageToolUI,
+	DeleteConfluencePageToolUI,
+	UpdateConfluencePageToolUI,
+} from "@/components/tool-ui/confluence";
 import type { ThinkingStep } from "@/components/tool-ui/deepagent-thinking";
 import { DisplayImageToolUI } from "@/components/tool-ui/display-image";
 import { GeneratePodcastToolUI } from "@/components/tool-ui/generate-podcast";
 import { GenerateReportToolUI } from "@/components/tool-ui/generate-report";
+import {
+	CreateGmailDraftToolUI,
+	SendGmailEmailToolUI,
+	TrashGmailEmailToolUI,
+	UpdateGmailDraftToolUI,
+} from "@/components/tool-ui/gmail";
+import {
+	CreateCalendarEventToolUI,
+	DeleteCalendarEventToolUI,
+	UpdateCalendarEventToolUI,
+} from "@/components/tool-ui/google-calendar";
 import {
 	CreateGoogleDriveFileToolUI,
 	DeleteGoogleDriveFileToolUI,
 } from "@/components/tool-ui/google-drive";
+import {
+	CreateJiraIssueToolUI,
+	DeleteJiraIssueToolUI,
+	UpdateJiraIssueToolUI,
+} from "@/components/tool-ui/jira";
 import {
 	CreateLinearIssueToolUI,
 	DeleteLinearIssueToolUI,
@@ -56,9 +80,10 @@ import {
 import { SandboxExecuteToolUI } from "@/components/tool-ui/sandbox-execute";
 import { ScrapeWebpageToolUI } from "@/components/tool-ui/scrape-webpage";
 import { RecallMemoryToolUI, SaveMemoryToolUI } from "@/components/tool-ui/user-memory";
+import { GenerateVideoPresentationToolUI } from "@/components/tool-ui/video-presentation";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useChatSessionStateSync } from "@/hooks/use-chat-session-state";
-import { useMessagesElectric } from "@/hooks/use-messages-electric";
+import { useMessagesSync } from "@/hooks/use-messages-sync";
 import { documentsApiService } from "@/lib/apis/documents-api.service";
 // import { WriteTodosToolUI } from "@/components/tool-ui/write-todos";
 import { getBearerToken } from "@/lib/auth-utils";
@@ -93,6 +118,25 @@ import {
 	trackChatResponseReceived,
 } from "@/lib/posthog/events";
 
+/**
+ * After a tool produces output, mark any previously-decided interrupt tool
+ * calls as completed so the ApprovalCard can transition from shimmer to done.
+ */
+function markInterruptsCompleted(contentParts: Array<{ type: string; result?: unknown }>): void {
+	for (const part of contentParts) {
+		if (
+			part.type === "tool-call" &&
+			typeof part.result === "object" &&
+			part.result !== null &&
+			(part.result as Record<string, unknown>).__interrupt__ === true &&
+			(part.result as Record<string, unknown>).__decided__ &&
+			!(part.result as Record<string, unknown>).__completed__
+		) {
+			part.result = { ...(part.result as Record<string, unknown>), __completed__: true };
+		}
+	}
+}
+
 /**
  * Extract thinking steps from message content
  */
@@ -146,6 +190,7 @@ function extractMentionedDocuments(content: unknown): MentionedDocumentInfo[] {
 const TOOLS_WITH_UI = new Set([
 	"generate_podcast",
 	"generate_report",
+	"generate_video_presentation",
 	"link_preview",
 	"display_image",
 	"delete_notion_page",
@@ -157,6 +202,19 @@ const TOOLS_WITH_UI = new Set([
 	"delete_linear_issue",
 	"create_google_drive_file",
 	"delete_google_drive_file",
+	"create_calendar_event",
+	"update_calendar_event",
+	"delete_calendar_event",
+	"create_gmail_draft",
+	"update_gmail_draft",
+	"send_gmail_email",
+	"trash_gmail_email",
+	"create_jira_issue",
+	"update_jira_issue",
+	"delete_jira_issue",
+	"create_confluence_page",
+	"update_confluence_page",
+	"delete_confluence_page",
 	"execute",
 	// "write_todos", // Disabled for now
 ]);
@@ -195,17 +253,18 @@ export default function NewChatPage() {
 	const setTargetCommentId = useSetAtom(setTargetCommentIdAtom);
 	const clearTargetCommentId = useSetAtom(clearTargetCommentIdAtom);
 	const closeReportPanel = useSetAtom(closeReportPanelAtom);
+	const closeEditorPanel = useSetAtom(closeEditorPanelAtom);
 
 	// Get current user for author info in shared chats
 	const { data: currentUser } = useAtomValue(currentUserAtom);
 
-	// Live collaboration: sync session state and messages via Electric SQL
+	// Live collaboration: sync session state and messages via Zero
 	useChatSessionStateSync(threadId);
 	const { data: membersData } = useAtomValue(membersAtom);
 
-	const handleElectricMessagesUpdate = useCallback(
+	const handleSyncedMessagesUpdate = useCallback(
 		(
-			electricMessages: {
+			syncedMessages: {
 				id: number;
 				thread_id: number;
 				role: string;
@@ -219,11 +278,11 @@ export default function NewChatPage() {
 			}
 
 			setMessages((prev) => {
-				if (electricMessages.length < prev.length) {
+				if (syncedMessages.length < prev.length) {
 					return prev;
 				}
 
-				return electricMessages.map((msg) => {
+				return syncedMessages.map((msg) => {
 					const member = msg.author_id
 						? membersData?.find((m) => m.user_id === msg.author_id)
 						: null;
@@ -250,7 +309,7 @@ export default function NewChatPage() {
 		[isRunning, membersData]
 	);
 
-	useMessagesElectric(threadId, handleElectricMessagesUpdate);
+	useMessagesSync(threadId, handleSyncedMessagesUpdate);
 
 	// Extract search_space_id from URL params
 	const searchSpaceId = useMemo(() => {
@@ -286,6 +345,7 @@ export default function NewChatPage() {
 		setMessageDocumentsMap({});
 		clearPlanOwnerRegistry();
 		closeReportPanel();
+		closeEditorPanel();
 
 		try {
 			if (urlChatId > 0) {
@@ -351,6 +411,7 @@ export default function NewChatPage() {
 		setMentionedDocuments,
 		setSidebarDocuments,
 		closeReportPanel,
+		closeEditorPanel,
 	]);
 
 	// Initialize on mount
@@ -705,6 +766,7 @@ export default function NewChatPage() {
 						case "tool-output-available": {
 							// Update the tool call with its result
 							updateToolCall(contentPartsState, parsed.toolCallId, { result: parsed.output });
+							markInterruptsCompleted(contentParts);
 							// Handle podcast-specific logic
 							if (parsed.output?.status === "pending" && parsed.output?.podcast_id) {
 								// Check if this is a podcast tool by looking at the content part
@@ -1083,6 +1145,7 @@ export default function NewChatPage() {
 							updateToolCall(contentPartsState, parsed.toolCallId, {
 								result: parsed.output,
 							});
+							markInterruptsCompleted(contentParts);
 							setMessages((prev) =>
 								prev.map((m) =>
 									m.id === assistantMsgId
@@ -1434,6 +1497,7 @@ export default function NewChatPage() {
 
 						case "tool-output-available":
 							updateToolCall(contentPartsState, parsed.toolCallId, { result: parsed.output });
+							markInterruptsCompleted(contentParts);
 							if (parsed.output?.status === "pending" && parsed.output?.podcast_id) {
 								const idx = toolCallIndices.get(parsed.toolCallId);
 								if (idx !== undefined) {
@@ -1596,7 +1660,7 @@ export default function NewChatPage() {
 	// Show loading state only when loading an existing thread
 	if (isInitializing) {
 		return (
-			<div className="flex h-[calc(100dvh-64px)] flex-col bg-background px-4">
+			<div className="flex h-[calc(100dvh-64px)] flex-col bg-main-panel px-4">
 				<div className="mx-auto w-full max-w-[44rem] flex flex-1 flex-col gap-6 py-8">
 					{/* User message */}
 					<div className="flex justify-end">
@@ -1624,7 +1688,7 @@ export default function NewChatPage() {
 				</div>
 
 				{/* Input bar */}
-				<div className="sticky bottom-0 pb-6 bg-background">
+				<div className="sticky bottom-0 pb-6 bg-main-panel">
 					<div className="mx-auto w-full max-w-[44rem]">
 						<Skeleton className="h-24 w-full rounded-2xl" />
 					</div>
@@ -1657,6 +1721,7 @@ export default function NewChatPage() {
 		<AssistantRuntimeProvider runtime={runtime}>
 			<GeneratePodcastToolUI />
 			<GenerateReportToolUI />
+			<GenerateVideoPresentationToolUI />
 			<LinkPreviewToolUI />
 			<DisplayImageToolUI />
 			<ScrapeWebpageToolUI />
@@ -1670,6 +1735,19 @@ export default function NewChatPage() {
 			<DeleteLinearIssueToolUI />
 			<CreateGoogleDriveFileToolUI />
 			<DeleteGoogleDriveFileToolUI />
+			<CreateCalendarEventToolUI />
+			<UpdateCalendarEventToolUI />
+			<DeleteCalendarEventToolUI />
+			<CreateGmailDraftToolUI />
+			<UpdateGmailDraftToolUI />
+			<SendGmailEmailToolUI />
+			<TrashGmailEmailToolUI />
+			<CreateJiraIssueToolUI />
+			<UpdateJiraIssueToolUI />
+			<DeleteJiraIssueToolUI />
+			<CreateConfluencePageToolUI />
+			<UpdateConfluencePageToolUI />
+			<DeleteConfluencePageToolUI />
 			<SandboxExecuteToolUI />
 			{/* <WriteTodosToolUI /> Disabled for now */}
 			<div key={searchSpaceId} className="flex h-[calc(100dvh-64px)] overflow-hidden">
@@ -1677,6 +1755,8 @@ export default function NewChatPage() {
 					<Thread messageThinkingSteps={messageThinkingSteps} />
 				</div>
 				<MobileReportPanel />
+				<MobileEditorPanel />
+				<MobileHitlEditPanel />
 			</div>
 		</AssistantRuntimeProvider>
 	);

surfsense_web/app/dashboard/[search_space_id]/onboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAtomValue } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { motion } from "motion/react";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
@@ -13,6 +13,7 @@ import {
 	globalNewLLMConfigsAtom,
 	llmPreferencesAtom,
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
+import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { Logo } from "@/components/Logo";
 import { LLMConfigForm, type LLMConfigFormData } from "@/components/shared/llm-config-form";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -23,6 +24,7 @@ export default function OnboardPage() {
 	const router = useRouter();
 	const params = useParams();
 	const searchSpaceId = Number(params.search_space_id);
+	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 
 	// Queries
 	const {
@@ -259,7 +261,7 @@ export default function OnboardPage() {
 						You can add more configurations and customize settings anytime in{" "}
 						<button
 							type="button"
-							onClick={() => router.push(`/dashboard/${searchSpaceId}/settings?tab=general`)}
+							onClick={() => setSearchSpaceSettingsDialog({ open: true, initialTab: "general" })}
 							className="text-violet-500 hover:underline"
 						>
 							Settings

surfsense_web/app/dashboard/[search_space_id]/settings/layout.tsx

@@ -1,5 +0,0 @@
-import type React from "react";
-
-export default function SettingsLayout({ children }: { children: React.ReactNode }) {
-	return <>{children}</>;
-}

surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx

@@ -1,113 +0,0 @@
-"use client";
-
-import { Bot, Brain, FileText, Globe, ImageIcon, MessageSquare, Shield } from "lucide-react";
-import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { useCallback, useEffect } from "react";
-import { PublicChatSnapshotsManager } from "@/components/public-chat-snapshots/public-chat-snapshots-manager";
-import { GeneralSettingsManager } from "@/components/settings/general-settings-manager";
-import { ImageModelManager } from "@/components/settings/image-model-manager";
-import { LLMRoleManager } from "@/components/settings/llm-role-manager";
-import { ModelConfigManager } from "@/components/settings/model-config-manager";
-import { PromptConfigManager } from "@/components/settings/prompt-config-manager";
-import { RolesManager } from "@/components/settings/roles-manager";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/animated-tabs";
-import { trackSettingsViewed } from "@/lib/posthog/events";
-
-const VALID_TABS = [
-	"general",
-	"models",
-	"roles",
-	"image-models",
-	"prompts",
-	"public-links",
-	"team-roles",
-] as const;
-
-const DEFAULT_TAB = "general";
-
-export default function SettingsPage() {
-	const t = useTranslations("searchSpaceSettings");
-	const router = useRouter();
-	const params = useParams();
-	const searchParams = useSearchParams();
-	const searchSpaceId = Number(params.search_space_id);
-
-	const tabParam = searchParams.get("tab") ?? "";
-	const activeTab = VALID_TABS.includes(tabParam as (typeof VALID_TABS)[number])
-		? tabParam
-		: DEFAULT_TAB;
-
-	const handleTabChange = useCallback(
-		(value: string) => {
-			const p = new URLSearchParams(searchParams.toString());
-			p.set("tab", value);
-			router.replace(`?${p.toString()}`, { scroll: false });
-		},
-		[router, searchParams]
-	);
-
-	useEffect(() => {
-		trackSettingsViewed(searchSpaceId, activeTab);
-	}, [searchSpaceId, activeTab]);
-
-	return (
-		<div className="h-full overflow-y-auto">
-			<div className="mx-auto w-full max-w-4xl px-4 py-10">
-				<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-					<TabsList showBottomBorder>
-						<TabsTrigger value="general">
-							<FileText className="mr-2 h-4 w-4" />
-							{t("nav_general")}
-						</TabsTrigger>
-						<TabsTrigger value="models">
-							<Bot className="mr-2 h-4 w-4" />
-							{t("nav_agent_configs")}
-						</TabsTrigger>
-						<TabsTrigger value="roles">
-							<Brain className="mr-2 h-4 w-4" />
-							{t("nav_role_assignments")}
-						</TabsTrigger>
-						<TabsTrigger value="image-models">
-							<ImageIcon className="mr-2 h-4 w-4" />
-							{t("nav_image_models")}
-						</TabsTrigger>
-						<TabsTrigger value="team-roles">
-							<Shield className="mr-2 h-4 w-4" />
-							{t("nav_team_roles")}
-						</TabsTrigger>
-						<TabsTrigger value="prompts">
-							<MessageSquare className="mr-2 h-4 w-4" />
-							{t("nav_system_instructions")}
-						</TabsTrigger>
-						<TabsTrigger value="public-links">
-							<Globe className="mr-2 h-4 w-4" />
-							{t("nav_public_links")}
-						</TabsTrigger>
-					</TabsList>
-					<TabsContent value="general" className="mt-6">
-						<GeneralSettingsManager searchSpaceId={searchSpaceId} />
-					</TabsContent>
-					<TabsContent value="models" className="mt-6">
-						<ModelConfigManager searchSpaceId={searchSpaceId} />
-					</TabsContent>
-					<TabsContent value="roles" className="mt-6">
-						<LLMRoleManager searchSpaceId={searchSpaceId} />
-					</TabsContent>
-					<TabsContent value="image-models" className="mt-6">
-						<ImageModelManager searchSpaceId={searchSpaceId} />
-					</TabsContent>
-					<TabsContent value="prompts" className="mt-6">
-						<PromptConfigManager searchSpaceId={searchSpaceId} />
-					</TabsContent>
-					<TabsContent value="public-links" className="mt-6">
-						<PublicChatSnapshotsManager searchSpaceId={searchSpaceId} />
-					</TabsContent>
-					<TabsContent value="team-roles" className="mt-6">
-						<RolesManager searchSpaceId={searchSpaceId} />
-					</TabsContent>
-				</Tabs>
-			</div>
-		</div>
-	);
-}

surfsense_web/app/dashboard/[search_space_id]/team/team-content.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import { useAtomValue } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import {
 	Calendar,
 	Check,
@@ -20,9 +20,6 @@ import {
 	UserPlus,
 	Users,
 } from "lucide-react";
-import { motion } from "motion/react";
-import Image from "next/image";
-import { useParams, useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
@@ -34,6 +31,7 @@ import {
 	updateMemberMutationAtom,
 } from "@/atoms/members/members-mutation.atoms";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
+import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -45,6 +43,7 @@ import {
 	AlertDialogTitle,
 	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Calendar as CalendarComponent } from "@/components/ui/calendar";
 import {
@@ -101,27 +100,6 @@ import { trackSearchSpaceInviteSent, trackSearchSpaceUsersViewed } from "@/lib/p
 import { cacheKeys } from "@/lib/query-client/cache-keys";
 import { cn } from "@/lib/utils";
 
-const AVATAR_COLORS = [
-	"bg-amber-600",
-	"bg-blue-600",
-	"bg-emerald-600",
-	"bg-violet-600",
-	"bg-rose-600",
-	"bg-cyan-600",
-	"bg-orange-600",
-	"bg-teal-600",
-	"bg-pink-600",
-	"bg-indigo-600",
-];
-
-function getAvatarColor(identifier: string): string {
-	let hash = 0;
-	for (let i = 0; i < identifier.length; i++) {
-		hash = identifier.charCodeAt(i) + ((hash << 5) - hash);
-	}
-	return AVATAR_COLORS[Math.abs(hash) % AVATAR_COLORS.length];
-}
-
 function getAvatarInitials(member: Membership): string {
 	if (member.user_display_name) {
 		const parts = member.user_display_name.trim().split(/\s+/);
@@ -140,10 +118,11 @@ function getAvatarInitials(member: Membership): string {
 const PAGE_SIZE = 5;
 const SKELETON_KEYS = Array.from({ length: PAGE_SIZE }, (_, i) => `skeleton-${i}`);
 
-export default function TeamManagementPage() {
-	const params = useParams();
-	const searchSpaceId = Number(params.search_space_id);
+interface TeamContentProps {
+	searchSpaceId: number;
+}
 
+export function TeamContent({ searchSpaceId }: TeamContentProps) {
 	const { data: access = null, isLoading: accessLoading } = useAtomValue(myAccessAtom);
 
 	const hasPermission = useCallback(
@@ -261,223 +240,189 @@ export default function TeamManagementPage() {
 
 	if (accessLoading || membersLoading) {
 		return (
-			<motion.div
-				initial={{ opacity: 0 }}
-				animate={{ opacity: 1 }}
-				transition={{ duration: 0.3 }}
-				className="bg-background select-none"
-			>
-				<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
-					<div className="space-y-6">
-						<div className="flex items-center justify-between">
-							<Skeleton className="h-9 w-36 rounded-md" />
-							<Skeleton className="h-4 w-20" />
-						</div>
-						<div className="rounded-lg border border-border/40 bg-background overflow-hidden">
-							<Table className="table-fixed w-full">
-								<TableHeader>
-									<TableRow className="hover:bg-transparent border-b border-border/40">
-										<TableHead className="w-[45%] px-4 md:px-6 border-r border-border/40">
-											<Skeleton className="h-3 w-16" />
-										</TableHead>
-										<TableHead className="hidden md:table-cell w-[25%] border-r border-border/40">
-											<Skeleton className="h-3 w-24" />
-										</TableHead>
-										<TableHead className="w-[30%] px-4 md:px-6">
-											<div className="flex justify-end">
-												<Skeleton className="h-3 w-12" />
-											</div>
-										</TableHead>
-									</TableRow>
-								</TableHeader>
-								<TableBody>
-									{SKELETON_KEYS.map((id) => (
-										<TableRow key={id} className="border-b border-border/40 hover:bg-transparent">
-											<TableCell className="w-[45%] py-2.5 px-4 md:px-6 border-r border-border/40">
-												<div className="flex items-center gap-3">
-													<Skeleton className="h-10 w-10 rounded-full shrink-0" />
-													<div className="flex-1 min-w-0 space-y-1.5">
-														<Skeleton className="h-4 w-[60%]" />
-														<Skeleton className="h-3 w-[40%]" />
-													</div>
-												</div>
-											</TableCell>
-											<TableCell className="hidden md:table-cell w-[25%] py-2.5 border-r border-border/40">
-												<Skeleton className="h-4 w-24" />
-											</TableCell>
-											<TableCell className="w-[30%] py-2.5 px-4 md:px-6">
-												<div className="flex justify-end">
-													<Skeleton className="h-4 w-16" />
-												</div>
-											</TableCell>
-										</TableRow>
-									))}
-								</TableBody>
-							</Table>
-						</div>
-					</div>
+			<div className="space-y-6">
+				<div className="flex items-center justify-between">
+					<Skeleton className="h-9 w-36 rounded-md" />
+					<Skeleton className="h-4 w-20" />
 				</div>
-			</motion.div>
+				<div className="rounded-lg border border-border/40 bg-background overflow-hidden">
+					<Table className="table-fixed w-full">
+						<TableHeader>
+							<TableRow className="hover:bg-transparent border-b border-border/40">
+								<TableHead className="w-[45%] px-4 md:px-6 border-r border-border/40">
+									<Skeleton className="h-3 w-16" />
+								</TableHead>
+								<TableHead className="hidden md:table-cell w-[25%] border-r border-border/40">
+									<Skeleton className="h-3 w-24" />
+								</TableHead>
+								<TableHead className="w-[30%] px-4 md:px-6">
+									<div className="flex justify-end">
+										<Skeleton className="h-3 w-12" />
+									</div>
+								</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{SKELETON_KEYS.map((id) => (
+								<TableRow key={id} className="border-b border-border/40 hover:bg-transparent">
+									<TableCell className="w-[45%] py-2.5 px-4 md:px-6 border-r border-border/40">
+										<div className="flex items-center gap-3">
+											<Skeleton className="h-10 w-10 rounded-full shrink-0" />
+											<div className="flex-1 min-w-0 space-y-1.5">
+												<Skeleton className="h-4 w-[60%]" />
+												<Skeleton className="h-3 w-[40%]" />
+											</div>
+										</div>
+									</TableCell>
+									<TableCell className="hidden md:table-cell w-[25%] py-2.5 border-r border-border/40">
+										<Skeleton className="h-4 w-24" />
+									</TableCell>
+									<TableCell className="w-[30%] py-2.5 px-4 md:px-6">
+										<div className="flex justify-end">
+											<Skeleton className="h-4 w-16" />
+										</div>
+									</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</div>
+			</div>
 		);
 	}
 
 	return (
-		<motion.div
-			initial={{ opacity: 0 }}
-			animate={{ opacity: 1 }}
-			transition={{ duration: 0.3 }}
-			className="bg-background select-none"
-		>
-			<div className="container max-w-5xl mx-auto p-4 md:p-6 lg:p-8 pt-20 md:pt-24 lg:pt-28">
-				<div className="space-y-6">
-					{/* Header row: Invite button on left, member count on right */}
-					<div className="flex items-center justify-between">
-						<div className="flex items-center gap-2">
-							{canInvite && (
-								<CreateInviteDialog
-									roles={roles}
-									onCreateInvite={handleCreateInvite}
-									searchSpaceId={searchSpaceId}
-								/>
-							)}
-							{canInvite && activeInvites.length > 0 && (
-								<AllInvitesDialog invites={activeInvites} onRevokeInvite={handleRevokeInvite} />
-							)}
-						</div>
-						<p className="hidden md:block text-sm text-muted-foreground">
-							{members.length} {members.length === 1 ? "member" : "members"}
-						</p>
-					</div>
-
-					{/* Members & Invites Table */}
-					<div className="rounded-lg border border-border/40 bg-background overflow-hidden">
-						<Table className="table-fixed w-full">
-							<TableHeader>
-								<TableRow className="hover:bg-transparent border-b border-border/40">
-									<TableHead className="w-[45%] px-4 md:px-6 border-r border-border/40">
-										<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-											<User size={14} className="opacity-60 text-muted-foreground" />
-											Name
-										</span>
-									</TableHead>
-									<TableHead className="hidden md:table-cell w-[25%] border-r border-border/40">
-										<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
-											<Clock size={14} className="opacity-60 text-muted-foreground" />
-											Last logged in
-										</span>
-									</TableHead>
-									<TableHead className="w-[30%] px-4 md:px-6">
-										<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70 justify-end">
-											<ShieldUser size={14} className="opacity-60 text-muted-foreground" />
-											Role
-										</span>
-									</TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{owners.map((member, index) => (
-									<MemberRow
-										key={`member-${member.id}`}
-										member={member}
-										roles={roles}
-										canManageRoles={canManageRoles}
-										canRemove={canRemove}
-										onUpdateRole={handleUpdateMember}
-										onRemoveMember={handleRemoveMember}
-										searchSpaceId={searchSpaceId}
-										index={index}
-									/>
-								))}
-								{paginatedMembers.map((member, index) => (
-									<MemberRow
-										key={`member-${member.id}`}
-										member={member}
-										roles={roles}
-										canManageRoles={canManageRoles}
-										canRemove={canRemove}
-										onUpdateRole={handleUpdateMember}
-										onRemoveMember={handleRemoveMember}
-										searchSpaceId={searchSpaceId}
-										index={owners.length + index}
-									/>
-								))}
-								{members.length === 0 && (
-									<TableRow>
-										<TableCell colSpan={3} className="text-center py-12">
-											<div className="flex flex-col items-center gap-2">
-												<Users className="h-8 w-8 text-muted-foreground/50" />
-												<p className="text-muted-foreground">No members yet</p>
-											</div>
-										</TableCell>
-									</TableRow>
-								)}
-							</TableBody>
-						</Table>
-					</div>
-
-					{/* Pagination */}
-					{totalItems > PAGE_SIZE && (
-						<motion.div
-							className="flex items-center justify-end gap-3 py-3 px-2"
-							initial={{ opacity: 0, y: 10 }}
-							animate={{ opacity: 1, y: 0 }}
-							transition={{ type: "spring", stiffness: 300, damping: 30, delay: 0.3 }}
-						>
-							<span className="text-sm text-muted-foreground tabular-nums">
-								{displayStart}-{displayEnd} of {totalItems}
-							</span>
-							<div className="flex items-center gap-1">
-								<Button
-									variant="ghost"
-									size="icon"
-									className="h-8 w-8 disabled:opacity-40"
-									onClick={() => setPageIndex(0)}
-									disabled={!canPrev}
-									aria-label="Go to first page"
-								>
-									<ChevronFirst size={18} strokeWidth={2} />
-								</Button>
-								<Button
-									variant="ghost"
-									size="icon"
-									className="h-8 w-8 disabled:opacity-40"
-									onClick={() => setPageIndex((i) => Math.max(0, i - 1))}
-									disabled={!canPrev}
-									aria-label="Go to previous page"
-								>
-									<ChevronLeft size={18} strokeWidth={2} />
-								</Button>
-								<Button
-									variant="ghost"
-									size="icon"
-									className="h-8 w-8 disabled:opacity-40"
-									onClick={() => setPageIndex((i) => (canNext ? i + 1 : i))}
-									disabled={!canNext}
-									aria-label="Go to next page"
-								>
-									<ChevronRight size={18} strokeWidth={2} />
-								</Button>
-								<Button
-									variant="ghost"
-									size="icon"
-									className="h-8 w-8 disabled:opacity-40"
-									onClick={() => setPageIndex(lastPage)}
-									disabled={!canNext}
-									aria-label="Go to last page"
-								>
-									<ChevronLast size={18} strokeWidth={2} />
-								</Button>
-							</div>
-						</motion.div>
-					)}
-				</div>
+		<div className="space-y-4 md:space-y-6">
+			<div className="flex items-center gap-2 flex-wrap">
+				{canInvite && (
+					<CreateInviteDialog
+						roles={roles}
+						onCreateInvite={handleCreateInvite}
+						searchSpaceId={searchSpaceId}
+					/>
+				)}
+				{canInvite && activeInvites.length > 0 && (
+					<AllInvitesDialog invites={activeInvites} onRevokeInvite={handleRevokeInvite} />
+				)}
+				<p className="text-xs md:text-sm text-muted-foreground whitespace-nowrap">
+					{members.length} {members.length === 1 ? "member" : "members"}
+				</p>
 			</div>
-		</motion.div>
+
+			<div className="rounded-lg border border-border/40 bg-background overflow-hidden">
+				<Table className="table-fixed w-full">
+					<TableHeader>
+						<TableRow className="hover:bg-transparent border-b border-border/40">
+							<TableHead className="w-[45%] px-4 md:px-6 border-r border-border/40">
+								<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
+									<User size={14} className="opacity-60 text-muted-foreground" />
+									Name
+								</span>
+							</TableHead>
+							<TableHead className="hidden md:table-cell w-[25%] border-r border-border/40">
+								<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70">
+									<Clock size={14} className="opacity-60 text-muted-foreground" />
+									Last logged in
+								</span>
+							</TableHead>
+							<TableHead className="w-[30%] px-4 md:px-6">
+								<span className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground/70 justify-end">
+									<ShieldUser size={14} className="opacity-60 text-muted-foreground" />
+									Role
+								</span>
+							</TableHead>
+						</TableRow>
+					</TableHeader>
+					<TableBody>
+						{owners.map((member) => (
+							<MemberRow
+								key={`member-${member.id}`}
+								member={member}
+								roles={roles}
+								canManageRoles={canManageRoles}
+								canRemove={canRemove}
+								onUpdateRole={handleUpdateMember}
+								onRemoveMember={handleRemoveMember}
+							/>
+						))}
+						{paginatedMembers.map((member) => (
+							<MemberRow
+								key={`member-${member.id}`}
+								member={member}
+								roles={roles}
+								canManageRoles={canManageRoles}
+								canRemove={canRemove}
+								onUpdateRole={handleUpdateMember}
+								onRemoveMember={handleRemoveMember}
+							/>
+						))}
+						{members.length === 0 && (
+							<TableRow>
+								<TableCell colSpan={3} className="text-center py-12">
+									<div className="flex flex-col items-center gap-2">
+										<Users className="h-8 w-8 text-muted-foreground/50" />
+										<p className="text-muted-foreground">No members yet</p>
+									</div>
+								</TableCell>
+							</TableRow>
+						)}
+					</TableBody>
+				</Table>
+			</div>
+
+			{totalItems > PAGE_SIZE && (
+				<div className="flex items-center justify-end gap-3 py-3 px-2">
+					<span className="text-sm text-muted-foreground tabular-nums">
+						{displayStart}-{displayEnd} of {totalItems}
+					</span>
+					<div className="flex items-center gap-1">
+						<Button
+							variant="ghost"
+							size="icon"
+							className="h-8 w-8 disabled:opacity-40"
+							onClick={() => setPageIndex(0)}
+							disabled={!canPrev}
+							aria-label="Go to first page"
+						>
+							<ChevronFirst size={18} strokeWidth={2} />
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="h-8 w-8 disabled:opacity-40"
+							onClick={() => setPageIndex((i) => Math.max(0, i - 1))}
+							disabled={!canPrev}
+							aria-label="Go to previous page"
+						>
+							<ChevronLeft size={18} strokeWidth={2} />
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="h-8 w-8 disabled:opacity-40"
+							onClick={() => setPageIndex((i) => (canNext ? i + 1 : i))}
+							disabled={!canNext}
+							aria-label="Go to next page"
+						>
+							<ChevronRight size={18} strokeWidth={2} />
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon"
+							className="h-8 w-8 disabled:opacity-40"
+							onClick={() => setPageIndex(lastPage)}
+							disabled={!canNext}
+							aria-label="Go to last page"
+						>
+							<ChevronLast size={18} strokeWidth={2} />
+						</Button>
+					</div>
+				</div>
+			)}
+		</div>
 	);
 }
 
-// ============ Member Row ============
-
 function MemberRow({
 	member,
 	roles,
@@ -485,8 +430,6 @@ function MemberRow({
 	canRemove,
 	onUpdateRole,
 	onRemoveMember,
-	searchSpaceId,
-	index,
 }: {
 	member: Membership;
 	roles: Role[];
@@ -494,44 +437,23 @@ function MemberRow({
 	canRemove: boolean;
 	onUpdateRole: (membershipId: number, roleId: number | null) => Promise<Membership>;
 	onRemoveMember: (membershipId: number) => Promise<boolean>;
-	searchSpaceId: number;
-	index: number;
 }) {
-	const router = useRouter();
+	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 	const initials = getAvatarInitials(member);
-	const avatarColor = getAvatarColor(member.user_id);
 	const displayName = member.user_display_name || member.user_email || "Unknown";
 	const roleName = member.is_owner ? "Owner" : member.role?.name || "No role";
 	const showActions = !member.is_owner && (canManageRoles || canRemove);
 
 	return (
-		<motion.tr
-			initial={{ opacity: 0 }}
-			animate={{ opacity: 1, transition: { duration: 0.2, delay: index * 0.02 } }}
-			className="border-b border-border/40 transition-colors hover:bg-muted/30"
-		>
+		<TableRow className="border-b border-border/40 transition-colors hover:bg-muted/30">
 			<TableCell className="w-[45%] py-2.5 px-4 md:px-6 max-w-0 border-r border-border/40">
 				<div className="flex items-center gap-3">
-					<div className="shrink-0">
-						{member.user_avatar_url ? (
-							<Image
-								src={member.user_avatar_url}
-								alt={displayName}
-								width={40}
-								height={40}
-								className="h-10 w-10 rounded-full object-cover"
-							/>
-						) : (
-							<div
-								className={cn(
-									"h-10 w-10 rounded-full flex items-center justify-center text-white font-medium text-sm",
-									avatarColor
-								)}
-							>
-								{initials}
-							</div>
+					<Avatar className="size-10 shrink-0">
+						{member.user_avatar_url && (
+							<AvatarImage src={member.user_avatar_url} alt={displayName} />
 						)}
-					</div>
+						<AvatarFallback className="text-sm">{initials}</AvatarFallback>
+					</Avatar>
 					<div className="min-w-0">
 						<p className="font-medium text-sm truncate select-text">{displayName}</p>
 						{member.user_display_name && member.user_email && (
@@ -607,7 +529,12 @@ function MemberRow({
 							)}
 							<DropdownMenuSeparator className="dark:bg-white/5" />
 							<DropdownMenuItem
-								onClick={() => router.push(`/dashboard/${searchSpaceId}/settings?tab=team-roles`)}
+								onClick={() =>
+									setSearchSpaceSettingsDialog({
+										open: true,
+										initialTab: "team-roles",
+									})
+								}
 							>
 								Manage Roles
 							</DropdownMenuItem>
@@ -617,12 +544,10 @@ function MemberRow({
 					<span className="text-sm text-foreground">{roleName}</span>
 				)}
 			</TableCell>
-		</motion.tr>
+		</TableRow>
 	);
 }
 
-// ============ Create Invite Dialog ============
-
 function CreateInviteDialog({
 	roles,
 	onCreateInvite,
@@ -698,9 +623,10 @@ function CreateInviteDialog({
 			<DialogTrigger asChild>
 				<Button
 					variant="outline"
-					className="gap-2 bg-black text-white dark:bg-white dark:text-black hover:bg-black/90 dark:hover:bg-white/90"
+					size="sm"
+					className="gap-1.5 md:gap-2 text-xs md:text-sm bg-black text-white dark:bg-white dark:text-black hover:bg-black/90 dark:hover:bg-white/90"
 				>
-					<UserPlus className="h-4 w-4" />
+					<UserPlus className="h-3.5 w-3.5 md:h-4 md:w-4" />
 					Invite members
 				</Button>
 			</DialogTrigger>
@@ -850,8 +776,6 @@ function CreateInviteDialog({
 	);
 }
 
-// ============ All Invites Dialog ============
-
 function AllInvitesDialog({
 	invites,
 	onRevokeInvite,
@@ -872,10 +796,10 @@ function AllInvitesDialog({
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
-				<Button variant="secondary" className="gap-2">
-					<Link2 className="h-4 w-4 rotate-315" />
+				<Button variant="secondary" size="sm" className="gap-1.5 md:gap-2 text-xs md:text-sm">
+					<Link2 className="h-3.5 w-3.5 md:h-4 md:w-4 rotate-315" />
 					Active invites
-					<span className="inline-flex items-center justify-center h-5 min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200 text-xs font-medium">
+					<span className="inline-flex items-center justify-center h-4 md:h-5 min-w-4 md:min-w-5 px-1 rounded-full bg-neutral-700 text-neutral-200 text-[10px] md:text-xs font-medium">
 						{invites.length}
 					</span>
 				</Button>

surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { Check, Copy, Info } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { useTranslations } from "next-intl";
 import { useCallback, useRef, useState } from "react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -27,67 +26,25 @@ export function ApiKeyContent() {
 	}, [apiKey]);
 
 	return (
-		<AnimatePresence mode="wait">
-			<motion.div
-				key="api-key-content"
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				exit={{ opacity: 0, y: -20 }}
-				transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
-				className="space-y-6"
-			>
-				<Alert className="border-border/60 bg-muted/30 text-muted-foreground">
-					<Info className="h-4 w-4 text-muted-foreground" />
-					<AlertTitle className="text-muted-foreground">{t("api_key_warning_title")}</AlertTitle>
-					<AlertDescription className="text-muted-foreground/60">
-						{t("api_key_warning_description")}
-					</AlertDescription>
-				</Alert>
+		<div className="space-y-6 min-w-0 overflow-hidden">
+			<Alert className="border-border/60 bg-muted/30 text-muted-foreground">
+				<Info className="h-4 w-4 text-muted-foreground" />
+				<AlertTitle className="text-muted-foreground">{t("api_key_warning_title")}</AlertTitle>
+				<AlertDescription className="text-muted-foreground/60">
+					{t("api_key_warning_description")}
+				</AlertDescription>
+			</Alert>
 
-				<div className="rounded-lg border border-border/60 bg-card p-6">
-					<h3 className="mb-4 text-sm font-semibold tracking-tight">{t("your_api_key")}</h3>
-					{isLoading ? (
-						<div className="h-12 w-full animate-pulse rounded-md border border-border/60 bg-muted/30" />
-					) : apiKey ? (
-						<div className="flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-2.5 py-1.5">
-							<div className="min-w-0 flex-1 overflow-x-auto scrollbar-hide">
-								<p className="font-mono text-[10px] text-muted-foreground whitespace-nowrap select-all cursor-text">
-									{apiKey}
-								</p>
-							</div>
-							<TooltipProvider>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="ghost"
-											size="icon"
-											onClick={copyToClipboard}
-											className="h-6 w-6 shrink-0 text-muted-foreground hover:text-foreground"
-										>
-											{copied ? (
-												<Check className="h-3 w-3 text-green-500" />
-											) : (
-												<Copy className="h-3 w-3" />
-											)}
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>{copied ? t("copied") : t("copy")}</TooltipContent>
-								</Tooltip>
-							</TooltipProvider>
-						</div>
-					) : (
-						<p className="text-center text-muted-foreground/60">{t("no_api_key")}</p>
-					)}
-				</div>
-
-				<div className="rounded-lg border border-border/60 bg-card p-6">
-					<h3 className="mb-2 text-sm font-semibold tracking-tight">{t("usage_title")}</h3>
-					<p className="mb-4 text-[11px] text-muted-foreground/60">{t("usage_description")}</p>
+			<div className="rounded-lg border border-border/60 bg-card p-6 min-w-0 overflow-hidden">
+				<h3 className="mb-4 text-sm font-semibold tracking-tight">{t("your_api_key")}</h3>
+				{isLoading ? (
+					<div className="h-12 w-full animate-pulse rounded-md border border-border/60 bg-muted/30" />
+				) : apiKey ? (
 					<div className="flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-2.5 py-1.5">
 						<div className="min-w-0 flex-1 overflow-x-auto scrollbar-hide">
-							<pre className="font-mono text-[10px] text-muted-foreground whitespace-nowrap select-all cursor-text">
-								<code>Authorization: Bearer {apiKey || "YOUR_API_KEY"}</code>
-							</pre>
+							<p className="font-mono text-[10px] text-muted-foreground whitespace-nowrap select-all cursor-text">
+								{apiKey}
+							</p>
 						</div>
 						<TooltipProvider>
 							<Tooltip>
@@ -95,22 +52,55 @@ export function ApiKeyContent() {
 									<Button
 										variant="ghost"
 										size="icon"
-										onClick={copyUsageToClipboard}
+										onClick={copyToClipboard}
 										className="h-6 w-6 shrink-0 text-muted-foreground hover:text-foreground"
 									>
-										{copiedUsage ? (
+										{copied ? (
 											<Check className="h-3 w-3 text-green-500" />
 										) : (
 											<Copy className="h-3 w-3" />
 										)}
 									</Button>
 								</TooltipTrigger>
-								<TooltipContent>{copiedUsage ? t("copied") : t("copy")}</TooltipContent>
+								<TooltipContent>{copied ? t("copied") : t("copy")}</TooltipContent>
 							</Tooltip>
 						</TooltipProvider>
 					</div>
+				) : (
+					<p className="text-center text-muted-foreground/60">{t("no_api_key")}</p>
+				)}
+			</div>
+
+			<div className="rounded-lg border border-border/60 bg-card p-6 min-w-0 overflow-hidden">
+				<h3 className="mb-2 text-sm font-semibold tracking-tight">{t("usage_title")}</h3>
+				<p className="mb-4 text-[11px] text-muted-foreground/60">{t("usage_description")}</p>
+				<div className="flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-2.5 py-1.5">
+					<div className="min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+						<pre className="font-mono text-[10px] text-muted-foreground whitespace-nowrap select-all cursor-text">
+							<code>Authorization: Bearer {apiKey || "YOUR_API_KEY"}</code>
+						</pre>
+					</div>
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									onClick={copyUsageToClipboard}
+									className="h-6 w-6 shrink-0 text-muted-foreground hover:text-foreground"
+								>
+									{copiedUsage ? (
+										<Check className="h-3 w-3 text-green-500" />
+									) : (
+										<Copy className="h-3 w-3" />
+									)}
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent>{copiedUsage ? t("copied") : t("copy")}</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
 				</div>
-			</motion.div>
-		</AnimatePresence>
+			</div>
+		</div>
 	);
 }

surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ProfileContent.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useAtomValue } from "jotai";
-import { AnimatePresence, motion } from "motion/react";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
@@ -72,58 +71,55 @@ export function ProfileContent() {
 	const hasChanges = displayName !== (user?.display_name || "");
 
 	return (
-		<AnimatePresence mode="wait">
-			<motion.div
-				key="profile-content"
-				initial={{ opacity: 0, y: 20 }}
-				animate={{ opacity: 1, y: 0 }}
-				exit={{ opacity: 0, y: -20 }}
-				transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
-			>
-				{isUserLoading ? (
-					<div className="flex items-center justify-center py-12">
-						<Spinner size="md" className="text-muted-foreground" />
-					</div>
-				) : (
-					<form onSubmit={handleSubmit} className="space-y-6">
-						<div className="rounded-lg border bg-card p-6">
-							<div className="flex flex-col gap-6">
-								<div className="space-y-2">
-									<Label>{t("profile_avatar")}</Label>
-									<AvatarDisplay
-										url={user?.avatar_url || undefined}
-										fallback={getInitials(user?.email || "")}
-									/>
-								</div>
+		<div>
+			{isUserLoading ? (
+				<div className="flex items-center justify-center py-12">
+					<Spinner size="md" className="text-muted-foreground" />
+				</div>
+			) : (
+				<form onSubmit={handleSubmit} className="space-y-6">
+					<div className="rounded-lg border bg-card p-6">
+						<div className="flex flex-col gap-6">
+							<div className="space-y-2">
+								<Label>{t("profile_avatar")}</Label>
+								<AvatarDisplay
+									url={user?.avatar_url || undefined}
+									fallback={getInitials(user?.email || "")}
+								/>
+							</div>
 
-								<div className="space-y-2">
-									<Label htmlFor="display-name">{t("profile_display_name")}</Label>
-									<Input
-										id="display-name"
-										type="text"
-										placeholder={user?.email?.split("@")[0]}
-										value={displayName}
-										onChange={(e) => setDisplayName(e.target.value)}
-									/>
-									<p className="text-xs text-muted-foreground">{t("profile_display_name_hint")}</p>
-								</div>
+							<div className="space-y-2">
+								<Label htmlFor="display-name">{t("profile_display_name")}</Label>
+								<Input
+									id="display-name"
+									type="text"
+									placeholder={user?.email?.split("@")[0]}
+									value={displayName}
+									onChange={(e) => setDisplayName(e.target.value)}
+								/>
+								<p className="text-xs text-muted-foreground">{t("profile_display_name_hint")}</p>
+							</div>
 
-								<div className="space-y-2">
-									<Label>{t("profile_email")}</Label>
-									<Input type="email" value={user?.email || ""} disabled />
-								</div>
+							<div className="space-y-2">
+								<Label>{t("profile_email")}</Label>
+								<Input type="email" value={user?.email || ""} disabled />
 							</div>
 						</div>
+					</div>
 
-						<div className="flex justify-end">
-							<Button type="submit" disabled={isPending || !hasChanges}>
-								{isPending && <Spinner size="sm" className="mr-2" />}
-								{t("profile_save")}
-							</Button>
-						</div>
-					</form>
-				)}
-			</motion.div>
-		</AnimatePresence>
+					<div className="flex justify-end">
+						<Button
+							type="submit"
+							variant="outline"
+							disabled={isPending || !hasChanges}
+							className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
+						>
+							{isPending && <Spinner size="sm" className="mr-2" />}
+							{t("profile_save")}
+						</Button>
+					</div>
+				</form>
+			)}
+		</div>
 	);
 }

surfsense_web/app/dashboard/[search_space_id]/user-settings/page.tsx

@@ -1,57 +0,0 @@
-"use client";
-
-import { User, UserKey } from "lucide-react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { useCallback } from "react";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/animated-tabs";
-import { ApiKeyContent } from "./components/ApiKeyContent";
-import { ProfileContent } from "./components/ProfileContent";
-
-const VALID_TABS = ["profile", "api-key"] as const;
-const DEFAULT_TAB = "profile";
-
-export default function UserSettingsPage() {
-	const t = useTranslations("userSettings");
-	const router = useRouter();
-	const searchParams = useSearchParams();
-
-	const tabParam = searchParams.get("tab") ?? "";
-	const activeTab = VALID_TABS.includes(tabParam as (typeof VALID_TABS)[number])
-		? tabParam
-		: DEFAULT_TAB;
-
-	const handleTabChange = useCallback(
-		(value: string) => {
-			const params = new URLSearchParams(searchParams.toString());
-			params.set("tab", value);
-			router.replace(`?${params.toString()}`, { scroll: false });
-		},
-		[router, searchParams]
-	);
-
-	return (
-		<div className="h-full overflow-y-auto">
-			<div className="mx-auto w-full max-w-4xl px-4 py-10">
-				<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
-					<TabsList showBottomBorder>
-						<TabsTrigger value="profile">
-							<User className="mr-2 h-4 w-4" />
-							{t("profile_nav_label")}
-						</TabsTrigger>
-						<TabsTrigger value="api-key">
-							<UserKey className="mr-2 h-4 w-4" />
-							{t("api_key_nav_label")}
-						</TabsTrigger>
-					</TabsList>
-					<TabsContent value="profile" className="mt-6">
-						<ProfileContent />
-					</TabsContent>
-					<TabsContent value="api-key" className="mt-6">
-						<ApiKeyContent />
-					</TabsContent>
-				</Tabs>
-			</div>
-		</div>
-	);
-}

surfsense_web/app/global-error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import posthog from "posthog-js";
 import NextError from "next/error";
+import posthog from "posthog-js";
 import { useEffect } from "react";
 
 export default function GlobalError({

surfsense_web/app/globals.css

@@ -47,6 +47,7 @@
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
+	--main-panel: oklch(1 0 0);
 	--syntax-bg: #f5f5f5;
 	--brand: oklch(0.623 0.214 259.815);
 	--highlight: oklch(0.852 0.199 91.936);
@@ -85,6 +86,7 @@
 	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(0.269 0 0);
 	--sidebar-ring: oklch(0.439 0 0);
+	--main-panel: oklch(0.18 0 0);
 	--syntax-bg: #1e1e1e;
 	--brand: oklch(0.707 0.165 254.624);
 	--highlight: oklch(0.852 0.199 91.936);
@@ -115,6 +117,7 @@
 	--color-chart-3: var(--chart-3);
 	--color-chart-4: var(--chart-4);
 	--color-chart-5: var(--chart-5);
+	--color-main-panel: var(--main-panel);
 	--radius-sm: calc(var(--radius) - 4px);
 	--radius-md: calc(var(--radius) - 2px);
 	--radius-lg: var(--radius);

surfsense_web/app/layout.tsx

@@ -3,10 +3,10 @@ import "./globals.css";
 import { RootProvider } from "fumadocs-ui/provider/next";
 import { Roboto } from "next/font/google";
 import { AnnouncementToastProvider } from "@/components/announcements/AnnouncementToastProvider";
-import { ElectricProvider } from "@/components/providers/ElectricProvider";
 import { GlobalLoadingProvider } from "@/components/providers/GlobalLoadingProvider";
 import { I18nProvider } from "@/components/providers/I18nProvider";
 import { PostHogProvider } from "@/components/providers/PostHogProvider";
+import { ZeroProvider } from "@/components/providers/ZeroProvider";
 import { ThemeProvider } from "@/components/theme/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
 import { LocaleProvider } from "@/contexts/LocaleContext";
@@ -141,9 +141,9 @@ export default function RootLayout({
 							>
 								<RootProvider>
 									<ReactQueryClientProvider>
-										<ElectricProvider>
+										<ZeroProvider>
 											<GlobalLoadingProvider>{children}</GlobalLoadingProvider>
-										</ElectricProvider>
+										</ZeroProvider>
 									</ReactQueryClientProvider>
 									<Toaster />
 									<AnnouncementToastProvider />

surfsense_web/app/sitemap.ts

@@ -213,7 +213,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
 		},
 		// How-to documentation
 		{
-			url: "https://www.surfsense.com/docs/how-to/electric-sql",
+			url: "https://www.surfsense.com/docs/how-to/zero-sync",
 			lastModified,
 			changeFrequency: "daily",
 			priority: 0.8,
@@ -224,6 +224,12 @@ export default function sitemap(): MetadataRoute.Sitemap {
 			changeFrequency: "daily",
 			priority: 0.8,
 		},
+		{
+			url: "https://www.surfsense.com/docs/how-to/web-search",
+			lastModified,
+			changeFrequency: "daily",
+			priority: 0.8,
+		},
 		// Developer documentation
 		{
 			url: "https://www.surfsense.com/docs/testing",

surfsense_web/atoms/chat/hitl-edit-panel.atom.ts

@@ -0,0 +1,82 @@
+import { atom } from "jotai";
+import { rightPanelCollapsedAtom, rightPanelTabAtom } from "@/atoms/layout/right-panel.atom";
+
+export interface ExtraField {
+	label: string;
+	key: string;
+	value: string;
+	type: "text" | "email" | "emails" | "datetime-local" | "textarea";
+}
+
+interface HitlEditPanelState {
+	isOpen: boolean;
+	title: string;
+	content: string;
+	toolName: string;
+	contentFormat?: "markdown" | "html";
+	extraFields?: ExtraField[];
+	onSave:
+		| ((title: string, content: string, extraFieldValues?: Record<string, string>) => void)
+		| null;
+	onClose: (() => void) | null;
+}
+
+const initialState: HitlEditPanelState = {
+	isOpen: false,
+	title: "",
+	content: "",
+	toolName: "",
+	contentFormat: undefined,
+	extraFields: undefined,
+	onSave: null,
+	onClose: null,
+};
+
+export const hitlEditPanelAtom = atom<HitlEditPanelState>(initialState);
+
+const preHitlCollapsedAtom = atom<boolean | null>(null);
+
+export const openHitlEditPanelAtom = atom(
+	null,
+	(
+		get,
+		set,
+		payload: {
+			title: string;
+			content: string;
+			toolName: string;
+			contentFormat?: "markdown" | "html";
+			extraFields?: ExtraField[];
+			onSave: (title: string, content: string, extraFieldValues?: Record<string, string>) => void;
+			onClose?: () => void;
+		}
+	) => {
+		if (!get(hitlEditPanelAtom).isOpen) {
+			set(preHitlCollapsedAtom, get(rightPanelCollapsedAtom));
+		}
+		set(hitlEditPanelAtom, {
+			isOpen: true,
+			title: payload.title,
+			content: payload.content,
+			toolName: payload.toolName,
+			contentFormat: payload.contentFormat,
+			extraFields: payload.extraFields,
+			onSave: payload.onSave,
+			onClose: payload.onClose ?? null,
+		});
+		set(rightPanelTabAtom, "hitl-edit");
+		set(rightPanelCollapsedAtom, false);
+	}
+);
+
+export const closeHitlEditPanelAtom = atom(null, (get, set) => {
+	const current = get(hitlEditPanelAtom);
+	current.onClose?.();
+	set(hitlEditPanelAtom, initialState);
+	set(rightPanelTabAtom, "sources");
+	const prev = get(preHitlCollapsedAtom);
+	if (prev !== null) {
+		set(rightPanelCollapsedAtom, prev);
+		set(preHitlCollapsedAtom, null);
+	}
+});

surfsense_web/atoms/editor/editor-panel.atom.ts

@@ -0,0 +1,57 @@
+import { atom } from "jotai";
+import { rightPanelCollapsedAtom, rightPanelTabAtom } from "@/atoms/layout/right-panel.atom";
+
+interface EditorPanelState {
+	isOpen: boolean;
+	documentId: number | null;
+	searchSpaceId: number | null;
+	title: string | null;
+}
+
+const initialState: EditorPanelState = {
+	isOpen: false,
+	documentId: null,
+	searchSpaceId: null,
+	title: null,
+};
+
+export const editorPanelAtom = atom<EditorPanelState>(initialState);
+
+export const editorPanelOpenAtom = atom((get) => get(editorPanelAtom).isOpen);
+
+const preEditorCollapsedAtom = atom<boolean | null>(null);
+
+export const openEditorPanelAtom = atom(
+	null,
+	(
+		get,
+		set,
+		{
+			documentId,
+			searchSpaceId,
+			title,
+		}: { documentId: number; searchSpaceId: number; title?: string }
+	) => {
+		if (!get(editorPanelAtom).isOpen) {
+			set(preEditorCollapsedAtom, get(rightPanelCollapsedAtom));
+		}
+		set(editorPanelAtom, {
+			isOpen: true,
+			documentId,
+			searchSpaceId,
+			title: title ?? null,
+		});
+		set(rightPanelTabAtom, "editor");
+		set(rightPanelCollapsedAtom, false);
+	}
+);
+
+export const closeEditorPanelAtom = atom(null, (get, set) => {
+	set(editorPanelAtom, initialState);
+	set(rightPanelTabAtom, "sources");
+	const prev = get(preEditorCollapsedAtom);
+	if (prev !== null) {
+		set(rightPanelCollapsedAtom, prev);
+		set(preEditorCollapsedAtom, null);
+	}
+});

surfsense_web/atoms/editor/ui.atoms.ts

@@ -1,27 +0,0 @@
-import { atom } from "jotai";
-
-interface EditorUIState {
-	hasUnsavedChanges: boolean;
-	pendingNavigation: string | null; // URL to navigate to after user confirms
-}
-
-export const editorUIAtom = atom<EditorUIState>({
-	hasUnsavedChanges: false,
-	pendingNavigation: null,
-});
-
-// Derived atom for just the unsaved changes state
-export const hasUnsavedEditorChangesAtom = atom(
-	(get) => get(editorUIAtom).hasUnsavedChanges,
-	(get, set, value: boolean) => {
-		set(editorUIAtom, { ...get(editorUIAtom), hasUnsavedChanges: value });
-	}
-);
-
-// Derived atom for pending navigation
-export const pendingEditorNavigationAtom = atom(
-	(get) => get(editorUIAtom).pendingNavigation,
-	(get, set, value: string | null) => {
-		set(editorUIAtom, { ...get(editorUIAtom), pendingNavigation: value });
-	}
-);

surfsense_web/atoms/layout/right-panel.atom.ts

@@ -1,6 +1,6 @@
 import { atom } from "jotai";
 
-export type RightPanelTab = "sources" | "report";
+export type RightPanelTab = "sources" | "report" | "editor" | "hitl-edit";
 
 export const rightPanelTabAtom = atom<RightPanelTab>("sources");
 

surfsense_web/atoms/settings/settings-dialog.atoms.ts

@@ -0,0 +1,25 @@
+import { atom } from "jotai";
+
+export interface SearchSpaceSettingsDialogState {
+	open: boolean;
+	initialTab: string;
+}
+
+export interface UserSettingsDialogState {
+	open: boolean;
+	initialTab: string;
+}
+
+export const searchSpaceSettingsDialogAtom = atom<SearchSpaceSettingsDialogState>({
+	open: false,
+	initialTab: "general",
+});
+
+export const userSettingsDialogAtom = atom<UserSettingsDialogState>({
+	open: false,
+	initialTab: "profile",
+});
+
+export const teamDialogAtom = atom<boolean>(false);
+
+export const morePagesDialogAtom = atom<boolean>(false);

surfsense_web/atoms/user/user-mutation.atoms.ts

@@ -1,18 +1,18 @@
 import { atomWithMutation, queryClientAtom } from "jotai-tanstack-query";
 import type { UpdateUserRequest } from "@/contracts/types/user.types";
 import { userApiService } from "@/lib/apis/user-api.service";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
+import { USER_QUERY_KEY } from "./user-query.atoms";
 
 export const updateUserMutationAtom = atomWithMutation((get) => {
 	const queryClient = get(queryClientAtom);
 
 	return {
-		mutationKey: cacheKeys.user.current(),
+		mutationKey: USER_QUERY_KEY,
 		mutationFn: async (request: UpdateUserRequest) => {
 			return userApiService.updateMe(request);
 		},
 		onSuccess: () => {
-			queryClient.invalidateQueries({ queryKey: cacheKeys.user.current() });
+			queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
 		},
 	};
 });

surfsense_web/atoms/user/user-query.atoms.ts

@@ -1,14 +1,16 @@
 import { atomWithQuery } from "jotai-tanstack-query";
 import { userApiService } from "@/lib/apis/user-api.service";
 import { getBearerToken, isPublicRoute } from "@/lib/auth-utils";
-import { cacheKeys } from "@/lib/query-client/cache-keys";
+
+export const USER_QUERY_KEY = ["user", "me"] as const;
+const userQueryFn = () => userApiService.getMe();
 
 export const currentUserAtom = atomWithQuery(() => {
 	const pathname = typeof window !== "undefined" ? window.location.pathname : null;
 	return {
-		queryKey: cacheKeys.user.current(),
-		staleTime: 5 * 60 * 1000, // 5 minutes
+		queryKey: USER_QUERY_KEY,
+		staleTime: 5 * 60 * 1000,
 		enabled: !!getBearerToken() && pathname !== null && !isPublicRoute(pathname),
-		queryFn: async () => userApiService.getMe(),
+		queryFn: userQueryFn,
 	};
 });

surfsense_web/components/Logo.tsx

@@ -14,7 +14,7 @@ export const Logo = ({
 	const image = (
 		<Image
 			src="/icon-128.svg"
-			className={cn("dark:invert", className)}
+			className={cn("select-none dark:invert", className)}
 			alt="logo"
 			width={128}
 			height={128}
@@ -25,5 +25,9 @@ export const Logo = ({
 		return image;
 	}
 
-	return <Link href="/">{image}</Link>;
+	return (
+		<Link href="/" className="select-none">
+			{image}
+		</Link>
+	);
 };

surfsense_web/components/UserDropdown.tsx

@@ -16,7 +16,6 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Spinner } from "@/components/ui/spinner";
 import { logout } from "@/lib/auth-utils";
-import { cleanupElectric } from "@/lib/electric/client";
 import { resetUser, trackLogout } from "@/lib/posthog/events";
 
 export function UserDropdown({
@@ -39,14 +38,6 @@ export function UserDropdown({
 			trackLogout();
 			resetUser();
 
-			// Best-effort cleanup of Electric SQL / PGlite
-			// Even if this fails, login-time cleanup will handle it
-			try {
-				await cleanupElectric();
-			} catch (err) {
-				console.warn("[Logout] Electric cleanup failed (will be handled on next login):", err);
-			}
-
 			// Revoke refresh token on server and clear all tokens from localStorage
 			await logout();
 

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

@@ -234,7 +234,7 @@ const AssistantActionBar: FC = () => {
 			hideWhenRunning
 			autohide="not-last"
 			autohideFloat="single-branch"
-			className="aui-assistant-action-bar-root -ml-1 col-start-3 row-start-2 flex gap-1 text-muted-foreground md:data-floating:absolute md:data-floating:rounded-md md:data-floating:border md:data-floating:bg-background md:data-floating:p-1 md:data-floating:shadow-sm [&>button]:opacity-100 md:[&>button]:opacity-[var(--aui-button-opacity,1)]"
+			className="aui-assistant-action-bar-root -ml-1 col-start-3 row-start-2 flex gap-1 text-muted-foreground md:data-floating:absolute md:data-floating:rounded-md md:data-floating:p-1 [&>button]:opacity-100 md:[&>button]:opacity-[var(--aui-button-opacity,1)]"
 		>
 			<ActionBarPrimitive.Copy asChild>
 				<TooltipIconButton tooltip="Copy">
@@ -247,7 +247,7 @@ const AssistantActionBar: FC = () => {
 				</TooltipIconButton>
 			</ActionBarPrimitive.Copy>
 			<ActionBarPrimitive.ExportMarkdown asChild>
-				<TooltipIconButton tooltip="Export as Markdown">
+				<TooltipIconButton tooltip="Download">
 					<DownloadIcon />
 				</TooltipIconButton>
 			</ActionBarPrimitive.ExportMarkdown>

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

@@ -1,10 +1,9 @@
 "use client";
 
-import { useAtomValue } from "jotai";
+import { useAtomValue, useSetAtom } from "jotai";
 import { AlertTriangle, Cable, Settings } from "lucide-react";
-import Link from "next/link";
-import { useSearchParams } from "next/navigation";
-import { type FC, forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
 import { documentTypeCountsAtom } from "@/atoms/documents/document-query.atoms";
 import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
 import {
@@ -12,6 +11,7 @@ import {
 	llmPreferencesAtom,
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
 import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -20,7 +20,7 @@ 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 { useConnectorsElectric } from "@/hooks/use-connectors-electric";
+import { useConnectorsSync } from "@/hooks/use-connectors-sync";
 import { PICKER_CLOSE_EVENT, PICKER_OPEN_EVENT } from "@/hooks/use-google-picker";
 import { cn } from "@/lib/utils";
 import { ConnectorDialogHeader } from "./connector-popup/components/connector-dialog-header";
@@ -49,8 +49,8 @@ interface ConnectorIndicatorProps {
 export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, ConnectorIndicatorProps>(
 	({ showTrigger = true }, ref) => {
 		const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
-		const searchParams = useSearchParams();
-		const { data: currentUser } = useAtomValue(currentUserAtom);
+		const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
+		useAtomValue(currentUserAtom);
 		const { data: preferences = {}, isFetching: preferencesLoading } =
 			useAtomValue(llmPreferencesAtom);
 		const { data: globalConfigs = [], isFetching: globalConfigsLoading } =
@@ -84,9 +84,6 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 			[statusInboxItems]
 		);
 
-		// Check if YouTube view is active
-		const isYouTubeView = searchParams.get("view") === "youtube";
-
 		// Use the custom hook for dialog state management
 		const {
 			isOpen,
@@ -111,6 +108,8 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 			allConnectors,
 			viewingAccountsType,
 			viewingMCPList,
+			isYouTubeView,
+			isFromOAuth,
 			setSearchQuery,
 			setStartDate,
 			setEndDate,
@@ -156,33 +155,23 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 			};
 		}, []);
 
-		// Fetch connectors using Electric SQL + PGlite for real-time updates
-		// This provides instant updates when connectors change, without polling
 		const {
-			connectors: connectorsFromElectric = [],
+			connectors: connectorsFromSync = [],
 			loading: connectorsLoading,
 			error: connectorsError,
-			refreshConnectors: refreshConnectorsElectric,
-		} = useConnectorsElectric(searchSpaceId);
+			refreshConnectors: refreshConnectorsSync,
+		} = useConnectorsSync(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 || [];
+		const useSyncData = connectorsFromSync.length > 0 || (connectorsLoading && !connectorsError);
+		const connectors = useSyncData ? connectorsFromSync : 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
+			if (useSyncData) {
+				await refreshConnectorsSync();
 			}
 		};
 
-		// Track indexing state locally - clears automatically when Electric SQL detects last_indexed_at changed
+		// Track indexing state locally - clears automatically when last_indexed_at changes via real-time sync
 		// Also clears when failed notifications are detected
 		const { indexingConnectorIds, startIndexing, stopIndexing } = useIndexingConnectors(
 			connectors as SearchSourceConnector[],
@@ -203,7 +192,7 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 		const activeConnectorsCount = connectors.length;
 
 		// Check which connectors are already connected
-		// Using Electric SQL + PGlite for real-time connector updates
+		// Real-time connector updates via Zero sync
 		const connectedTypes = new Set<string>(
 			(connectors || []).map((c: SearchSourceConnector) => c.connector_type)
 		);
@@ -215,14 +204,7 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 		if (!searchSpaceId) return null;
 
 		return (
-			<Dialog
-				open={isOpen}
-				onOpenChange={(open) => {
-					if (!open && pickerOpen) return;
-					handleOpenChange(open);
-				}}
-				modal={!pickerOpen}
-			>
+			<Dialog open={isOpen} modal={false} onOpenChange={handleOpenChange}>
 				{showTrigger && (
 					<TooltipIconButton
 						data-joyride="connector-icon"
@@ -258,9 +240,27 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 					</TooltipIconButton>
 				)}
 
+				{isOpen &&
+					createPortal(
+						<div
+							className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+							aria-hidden="true"
+							onClick={() => {
+								if (!pickerOpen) handleOpenChange(false);
+							}}
+						/>,
+						document.body
+					)}
+
 				<DialogContent
 					onFocusOutside={(e) => e.preventDefault()}
-					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"
+					onInteractOutside={(e) => {
+						if (pickerOpen) e.preventDefault();
+					}}
+					onPointerDownOutside={(e) => {
+						if (pickerOpen) e.preventDefault();
+					}}
+					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 [&>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 */}
@@ -281,7 +281,7 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 						<ConnectorAccountsListView
 							connectorType={viewingAccountsType.connectorType}
 							connectorTitle={viewingAccountsType.connectorTitle}
-							connectors={(connectors || []) as SearchSourceConnector[]} // Using Electric SQL + PGlite for real-time connector updates (all connector types)
+							connectors={(connectors || []) as SearchSourceConnector[]}
 							indexingConnectorIds={indexingConnectorIds}
 							onBack={handleBackFromAccountsList}
 							onManage={handleStartEdit}
@@ -313,7 +313,7 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 								...editingConnector,
 								config: connectorConfig || editingConnector.config,
 								name: editingConnector.name,
-								// Sync last_indexed_at with live data from Electric SQL for real-time updates
+								// Sync last_indexed_at with live data from real-time sync
 								last_indexed_at:
 									(connectors as SearchSourceConnector[]).find((c) => c.id === editingConnector.id)
 										?.last_indexed_at ?? editingConnector.last_indexed_at,
@@ -338,20 +338,27 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 							}}
 							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
-							}
+							onQuickIndex={(() => {
+								const cfg = connectorConfig || editingConnector.config;
+								const isDrive =
+									editingConnector.connector_type === "GOOGLE_DRIVE_CONNECTOR" ||
+									editingConnector.connector_type === "COMPOSIO_GOOGLE_DRIVE_CONNECTOR";
+								const hasDriveItems = isDrive
+									? ((cfg?.selected_folders as unknown[]) ?? []).length > 0 ||
+										((cfg?.selected_files as unknown[]) ?? []).length > 0
+									: true;
+								if (!hasDriveItems) return undefined;
+								return () => {
+									startIndexing(editingConnector.id);
+									handleQuickIndexConnector(
+										editingConnector.id,
+										editingConnector.connector_type,
+										stopIndexing,
+										startDate,
+										endDate
+									);
+								};
+							})()}
 							onConfigChange={setConnectorConfig}
 							onNameChange={setConnectorName}
 						/>
@@ -372,6 +379,7 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 							frequencyMinutes={frequencyMinutes}
 							enableSummary={enableSummary}
 							isStartingIndexing={isStartingIndexing}
+							isFromOAuth={isFromOAuth}
 							onStartDateChange={setStartDate}
 							onEndDateChange={setEndDate}
 							onPeriodicEnabledChange={setPeriodicEnabled}
@@ -417,11 +425,19 @@ export const ConnectorIndicator = forwardRef<ConnectorIndicatorHandle, Connector
 															? "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
+														size="sm"
+														variant="outline"
+														onClick={() => {
+															handleOpenChange(false);
+															setSearchSpaceSettingsDialog({
+																open: true,
+																initialTab: "models",
+															});
+														}}
+													>
+														<Settings className="mr-2 h-4 w-4" />
+														Go to Settings
 													</Button>
 												</AlertDescription>
 											</Alert>

surfsense_web/components/assistant-ui/connector-popup/config/connector-status-config.json

@@ -1,24 +1,9 @@
 {
 	"connectorStatuses": {
-		"GOOGLE_DRIVE_CONNECTOR": {
-			"enabled": true,
-			"status": "warning",
-			"statusMessage": "Our Google OAuth app is not verified. You may see a 'non-verified app' warning during sign-in."
-		},
-		"GOOGLE_GMAIL_CONNECTOR": {
-			"enabled": true,
-			"status": "warning",
-			"statusMessage": "Our Google OAuth app is not verified. You may see a 'non-verified app' warning during sign-in."
-		},
-		"GOOGLE_CALENDAR_CONNECTOR": {
-			"enabled": true,
-			"status": "warning",
-			"statusMessage": "Our Google OAuth app is not verified. You may see a 'non-verified app' warning during sign-in."
-		},
 		"YOUTUBE_CONNECTOR": {
 			"enabled": true,
 			"status": "warning",
-			"statusMessage": "Doesn't work on cloud version due to YouTube blocks. Will be fixed soon."
+			"statusMessage": "Sometimes may not work due to Youtube blocks."
 		},
 		"WEBCRAWLER_CONNECTOR": {
 			"enabled": true,

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import * as RadioGroup from "@radix-ui/react-radio-group";
 import { Info } from "lucide-react";
 import type { FC } from "react";
 import { useId, useRef, useState } from "react";
@@ -26,6 +25,7 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import {
 	Select,
 	SelectContent,
@@ -282,10 +282,9 @@ export const ElasticsearchConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSub
 								render={({ field }) => (
 									<FormItem className="space-y-3">
 										<FormControl>
-											<RadioGroup.Root
+											<RadioGroup
 												onValueChange={(value) => {
 													field.onChange(value);
-													// Clear auth fields when method changes
 													if (value !== "basic") {
 														form.setValue("username", "");
 														form.setValue("password", "");
@@ -295,38 +294,22 @@ export const ElasticsearchConnectForm: FC<ConnectFormProps> = ({ onSubmit, isSub
 													}
 												}}
 												value={field.value}
-												className="flex flex-col space-y-2"
+												className="flex flex-col gap-2"
 											>
-												<div className="flex items-center space-x-2">
-													<RadioGroup.Item
-														value="api_key"
-														id={authApiKeyId}
-														className="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
-													>
-														<RadioGroup.Indicator className="flex items-center justify-center">
-															<div className="h-2.5 w-2.5 rounded-full bg-current" />
-														</RadioGroup.Indicator>
-													</RadioGroup.Item>
+												<div className="flex items-center gap-2">
+													<RadioGroupItem value="api_key" id={authApiKeyId} />
 													<Label htmlFor={authApiKeyId} className="text-xs sm:text-sm">
 														API Key
 													</Label>
 												</div>
 
-												<div className="flex items-center space-x-2">
-													<RadioGroup.Item
-														value="basic"
-														id={authBasicId}
-														className="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
-													>
-														<RadioGroup.Indicator className="flex items-center justify-center">
-															<div className="h-2.5 w-2.5 rounded-full bg-current" />
-														</RadioGroup.Indicator>
-													</RadioGroup.Item>
+												<div className="flex items-center gap-2">
+													<RadioGroupItem value="basic" id={authBasicId} />
 													<Label htmlFor={authBasicId} className="text-xs sm:text-sm">
 														Username & Password
 													</Label>
 												</div>
-											</RadioGroup.Root>
+											</RadioGroup>
 										</FormControl>
 										<FormMessage />
 									</FormItem>

surfsense_web/components/assistant-ui/connector-popup/connect-forms/connector-benefits.ts

@@ -23,11 +23,6 @@ export function getConnectorBenefits(connectorType: string): string[] | null {
 			"Real-time information from the web",
 			"Enhanced search capabilities for your projects",
 		],
-		SEARXNG_API: [
-			"Privacy-focused meta-search across multiple engines",
-			"Self-hosted search instance for full control",
-			"Real-time web search results from multiple sources",
-		],
 		LINKUP_API: [
 			"AI-powered search results tailored to your queries",
 			"Real-time information from the web",

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

@@ -8,7 +8,6 @@ import { LinkupApiConnectForm } from "./components/linkup-api-connect-form";
 import { LumaConnectForm } from "./components/luma-connect-form";
 import { MCPConnectForm } from "./components/mcp-connect-form";
 import { ObsidianConnectForm } from "./components/obsidian-connect-form";
-import { SearxngConnectForm } from "./components/searxng-connect-form";
 import { TavilyApiConnectForm } from "./components/tavily-api-connect-form";
 
 export interface ConnectFormProps {
@@ -41,8 +40,6 @@ export function getConnectFormComponent(connectorType: string): ConnectFormCompo
 	switch (connectorType) {
 		case "TAVILY_API":
 			return TavilyApiConnectForm;
-		case "SEARXNG_API":
-			return SearxngConnectForm;
 		case "LINKUP_API":
 			return LinkupApiConnectForm;
 		case "BAIDU_SEARCH_API":

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

@@ -12,7 +12,7 @@ import {
 	X,
 } from "lucide-react";
 import type { FC } from "react";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { ComposioDriveFolderTree } from "@/components/connectors/composio-drive-folder-tree";
 import { Label } from "@/components/ui/label";
 import {
@@ -23,13 +23,7 @@ import {
 	SelectValue,
 } from "@/components/ui/select";
 import { Switch } from "@/components/ui/switch";
-import type { SearchSourceConnector } from "@/contracts/types/connector.types";
-
-interface ComposioDriveConfigProps {
-	connector: SearchSourceConnector;
-	onConfigChange?: (config: Record<string, unknown>) => void;
-	onNameChange?: (name: string) => void;
-}
+import type { ConnectorConfigProps } from "../index";
 
 interface SelectedFolder {
 	id: string;
@@ -56,14 +50,14 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.endsWith(".csv") ||
 		lowerName.includes("spreadsheet")
 	) {
-		return <FileSpreadsheet className={`${className} text-green-500`} />;
+		return <FileSpreadsheet className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".pptx") ||
 		lowerName.endsWith(".ppt") ||
 		lowerName.includes("presentation")
 	) {
-		return <Presentation className={`${className} text-orange-500`} />;
+		return <Presentation className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".docx") ||
@@ -73,7 +67,7 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.includes("word") ||
 		lowerName.includes("text")
 	) {
-		return <FileText className={`${className} text-gray-500`} />;
+		return <FileText className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".png") ||
@@ -83,15 +77,12 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.endsWith(".webp") ||
 		lowerName.endsWith(".svg")
 	) {
-		return <Image className={`${className} text-purple-500`} />;
+		return <Image className={`${className} text-muted-foreground`} />;
 	}
-	return <File className={`${className} text-gray-500`} />;
+	return <File className={`${className} text-muted-foreground`} />;
 }
 
-export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
-	connector,
-	onConfigChange,
-}) => {
+export const ComposioDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigChange }) => {
 	const isIndexable = connector.config?.is_indexable as boolean;
 
 	const existingFolders =
@@ -103,6 +94,13 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 	const [selectedFolders, setSelectedFolders] = useState<SelectedFolder[]>(existingFolders);
 	const [selectedFiles, setSelectedFiles] = useState<SelectedFolder[]>(existingFiles);
 	const [indexingOptions, setIndexingOptions] = useState<IndexingOptions>(existingIndexingOptions);
+	const [authError, setAuthError] = useState(false);
+
+	const isAuthExpired = connector.config?.auth_expired === true || authError;
+
+	const handleAuthError = useCallback(() => {
+		setAuthError(true);
+	}, []);
 
 	const [isEditMode] = useState(() => existingFolders.length > 0 || existingFiles.length > 0);
 	const [isFolderTreeOpen, setIsFolderTreeOpen] = useState(!isEditMode);
@@ -201,7 +199,7 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 									className="text-xs sm:text-sm text-muted-foreground truncate flex items-center gap-1.5"
 									title={folder.name}
 								>
-									<FolderClosed className="size-3.5 shrink-0 text-gray-500" />
+									<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
 									<span className="flex-1 truncate">{folder.name}</span>
 									<button
 										type="button"
@@ -235,6 +233,13 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 					</div>
 				)}
 
+				{isAuthExpired && (
+					<p className="text-xs text-amber-600 dark:text-amber-500">
+						Your Google Drive authentication has expired. Please re-authenticate using the button
+						below.
+					</p>
+				)}
+
 				{isEditMode ? (
 					<div className="space-y-2">
 						<button
@@ -242,12 +247,12 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 							onClick={() => setIsFolderTreeOpen(!isFolderTreeOpen)}
 							className="flex items-center gap-2 text-xs sm:text-sm text-muted-foreground hover:text-foreground transition-colors w-fit"
 						>
+							Change Selection
 							{isFolderTreeOpen ? (
 								<ChevronDown className="size-4" />
 							) : (
 								<ChevronRight className="size-4" />
 							)}
-							Change Selection
 						</button>
 						{isFolderTreeOpen && (
 							<ComposioDriveFolderTree
@@ -256,6 +261,7 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 								onSelectFolders={handleSelectFolders}
 								selectedFiles={selectedFiles}
 								onSelectFiles={handleSelectFiles}
+								onAuthError={handleAuthError}
 							/>
 						)}
 					</div>
@@ -266,6 +272,7 @@ export const ComposioDriveConfig: FC<ComposioDriveConfigProps> = ({
 						onSelectFolders={handleSelectFolders}
 						selectedFiles={selectedFiles}
 						onSelectFiles={handleSelectFiles}
+						onAuthError={handleAuthError}
 					/>
 				)}
 			</div>

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

@@ -1,12 +1,12 @@
 "use client";
 
-import * as RadioGroup from "@radix-ui/react-radio-group";
 import { KeyRound, Server } from "lucide-react";
 import type { FC } from "react";
-import { useEffect, useId, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import type { ConnectorConfigProps } from "../index";
 
 export interface ElasticsearchConfigProps extends ConnectorConfigProps {
@@ -56,8 +56,12 @@ export const ElasticsearchConfig: FC<ElasticsearchConfigProps> = ({
 			: ""
 	);
 
-	// Update values when connector changes
+	// Update values when the connector identity changes (e.g. switching to a different connector)
+	const connectorIdRef = useRef(connector.id);
 	useEffect(() => {
+		if (connectorIdRef.current === connector.id) return;
+		connectorIdRef.current = connector.id;
+
 		setName(connector.name || "");
 		setEndpointUrl((connector.config?.ELASTICSEARCH_URL as string) || "");
 		setAuthMethod(
@@ -82,7 +86,7 @@ export const ElasticsearchConfig: FC<ElasticsearchConfigProps> = ({
 				? String(connector.config.ELASTICSEARCH_MAX_DOCUMENTS)
 				: ""
 		);
-	}, [connector.config, connector.name]);
+	}, [connector]);
 
 	const stringToArray = (str: string): string[] => {
 		const items = str
@@ -192,9 +196,9 @@ export const ElasticsearchConfig: FC<ElasticsearchConfigProps> = ({
 
 	const handleMaxDocumentsChange = (value: string) => {
 		setMaxDocuments(value);
-		if (value && value.trim()) {
+		if (value?.trim()) {
 			const num = parseInt(value, 10);
-			if (!isNaN(num) && num > 0) {
+			if (!Number.isNaN(num) && num > 0) {
 				updateConfig({ ELASTICSEARCH_MAX_DOCUMENTS: num });
 			}
 		} else {
@@ -255,41 +259,25 @@ export const ElasticsearchConfig: FC<ElasticsearchConfigProps> = ({
 				</div>
 
 				<div className="space-y-4">
-					<RadioGroup.Root
+					<RadioGroup
 						value={authMethod}
 						onValueChange={(value) => handleAuthMethodChange(value as "basic" | "api_key")}
-						className="flex flex-col space-y-2"
+						className="flex flex-col gap-2"
 					>
-						<div className="flex items-center space-x-2">
-							<RadioGroup.Item
-								value="api_key"
-								id={authApiKeyId}
-								className="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
-							>
-								<RadioGroup.Indicator className="flex items-center justify-center">
-									<div className="h-2.5 w-2.5 rounded-full bg-current" />
-								</RadioGroup.Indicator>
-							</RadioGroup.Item>
+						<div className="flex items-center gap-2">
+							<RadioGroupItem value="api_key" id={authApiKeyId} />
 							<Label htmlFor={authApiKeyId} className="text-xs sm:text-sm">
 								API Key
 							</Label>
 						</div>
 
-						<div className="flex items-center space-x-2">
-							<RadioGroup.Item
-								value="basic"
-								id={authBasicId}
-								className="aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
-							>
-								<RadioGroup.Indicator className="flex items-center justify-center">
-									<div className="h-2.5 w-2.5 rounded-full bg-current" />
-								</RadioGroup.Indicator>
-							</RadioGroup.Item>
+						<div className="flex items-center gap-2">
+							<RadioGroupItem value="basic" id={authBasicId} />
 							<Label htmlFor={authBasicId} className="text-xs sm:text-sm">
 								Username & Password
 							</Label>
 						</div>
-					</RadioGroup.Root>
+					</RadioGroup>
 
 					{authMethod === "basic" && (
 						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">

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

@@ -1,14 +1,11 @@
 "use client";
 
 import {
-	ChevronDown,
-	ChevronRight,
 	File,
 	FileSpreadsheet,
 	FileText,
 	FolderClosed,
 	Image,
-	Loader2,
 	Presentation,
 	X,
 } from "lucide-react";
@@ -23,6 +20,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
 import { Switch } from "@/components/ui/switch";
 import { type PickerResult, useGooglePicker } from "@/hooks/use-google-picker";
 import type { ConnectorConfigProps } from "../index";
@@ -52,14 +50,14 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.endsWith(".csv") ||
 		lowerName.includes("spreadsheet")
 	) {
-		return <FileSpreadsheet className={`${className} text-green-500`} />;
+		return <FileSpreadsheet className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".pptx") ||
 		lowerName.endsWith(".ppt") ||
 		lowerName.includes("presentation")
 	) {
-		return <Presentation className={`${className} text-orange-500`} />;
+		return <Presentation className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".docx") ||
@@ -69,7 +67,7 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.includes("word") ||
 		lowerName.includes("text")
 	) {
-		return <FileText className={`${className} text-gray-500`} />;
+		return <FileText className={`${className} text-muted-foreground`} />;
 	}
 	if (
 		lowerName.endsWith(".png") ||
@@ -79,9 +77,9 @@ function getFileIconFromName(fileName: string, className: string = "size-3.5 shr
 		lowerName.endsWith(".webp") ||
 		lowerName.endsWith(".svg")
 	) {
-		return <Image className={`${className} text-purple-500`} />;
+		return <Image className={`${className} text-muted-foreground`} />;
 	}
-	return <File className={`${className} text-gray-500`} />;
+	return <File className={`${className} text-muted-foreground`} />;
 }
 
 export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfigChange }) => {
@@ -141,6 +139,10 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 		onPicked: handlePicked,
 	});
 
+	const isAuthExpired =
+		connector.config?.auth_expired === true ||
+		(!!pickerError && pickerError.toLowerCase().includes("authentication expired"));
+
 	const handleIndexingOptionChange = (key: keyof IndexingOptions, value: number | boolean) => {
 		const newOptions = { ...indexingOptions, [key]: value };
 		setIndexingOptions(newOptions);
@@ -195,7 +197,7 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 									className="text-xs sm:text-sm text-muted-foreground truncate flex items-center gap-1.5"
 									title={folder.name}
 								>
-									<FolderClosed className="size-3.5 shrink-0 text-gray-500" />
+									<FolderClosed className="size-3.5 shrink-0 text-muted-foreground" />
 									<span className="flex-1 truncate">{folder.name}</span>
 									<button
 										type="button"
@@ -233,14 +235,21 @@ export const GoogleDriveConfig: FC<ConnectorConfigProps> = ({ connector, onConfi
 					type="button"
 					variant="outline"
 					onClick={openPicker}
-					disabled={pickerLoading}
+					disabled={pickerLoading || isAuthExpired}
 					className="bg-slate-400/5 dark:bg-white/5 border-slate-400/20 hover:bg-slate-400/10 dark:hover:bg-white/10 text-xs sm:text-sm h-8 sm:h-9"
 				>
-					{pickerLoading && <Loader2 className="size-3.5 mr-1.5 animate-spin" />}
+					{pickerLoading && <Spinner size="xs" className="mr-1.5" />}
 					{totalSelected > 0 ? "Change Selection" : "Select from Google Drive"}
 				</Button>
 
-				{pickerError && <p className="text-xs text-destructive">{pickerError}</p>}
+				{pickerError && !isAuthExpired && <p className="text-xs text-destructive">{pickerError}</p>}
+
+				{isAuthExpired && (
+					<p className="text-xs text-amber-600 dark:text-amber-500">
+						Your Google Drive authentication has expired. Please re-authenticate using the button
+						below.
+					</p>
+				)}
 			</div>
 
 			{/* Indexing Options */}

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

@@ -1,6 +1,5 @@
 "use client";
 
-import { FolderOpen } from "lucide-react";
 import type { FC } from "react";
 import { useEffect, useState } from "react";
 import { Input } from "@/components/ui/input";
@@ -127,7 +126,6 @@ export const ObsidianConfig: FC<ObsidianConfigProps> = ({
 			<div className="rounded-xl border border-border bg-slate-400/5 dark:bg-white/5 p-3 sm:p-6 space-y-3 sm:space-y-4">
 				<div className="space-y-1 sm:space-y-2">
 					<h3 className="font-medium text-sm sm:text-base flex items-center gap-2">
-						<FolderOpen className="h-4 w-4 text-purple-500" />
 						Vault Configuration
 					</h3>
 				</div>

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

@@ -19,7 +19,6 @@ import { LinkupApiConfig } from "./components/linkup-api-config";
 import { LumaConfig } from "./components/luma-config";
 import { MCPConfig } from "./components/mcp-config";
 import { ObsidianConfig } from "./components/obsidian-config";
-import { SearxngConfig } from "./components/searxng-config";
 import { SlackConfig } from "./components/slack-config";
 import { TavilyApiConfig } from "./components/tavily-api-config";
 import { TeamsConfig } from "./components/teams-config";
@@ -45,8 +44,6 @@ export function getConnectorConfigComponent(
 			return GoogleDriveConfig;
 		case "TAVILY_API":
 			return TavilyApiConfig;
-		case "SEARXNG_API":
-			return SearxngConfig;
 		case "LINKUP_API":
 			return LinkupApiConfig;
 		case "BAIDU_SEARCH_API":

surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-connect-view.tsx

@@ -11,7 +11,6 @@ import { getConnectFormComponent } from "../../connect-forms";
 
 const FORM_ID_MAP: Record<string, string> = {
 	TAVILY_API: "tavily-connect-form",
-	SEARXNG_API: "searxng-connect-form",
 	LINKUP_API: "linkup-api-connect-form",
 	BAIDU_SEARCH_API: "baidu-search-api-connect-form",
 	ELASTICSEARCH_CONNECTOR: "elasticsearch-connect-form",

surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/connector-edit-view.tsx

@@ -1,11 +1,16 @@
 "use client";
 
+import { useAtomValue } from "jotai";
 import { ArrowLeft, Info, RefreshCw, Trash2 } from "lucide-react";
 import { type FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import { EnumConnectorName } from "@/contracts/enums/connector";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { authenticatedFetch } from "@/lib/auth-utils";
 import { cn } from "@/lib/utils";
 import { DateRangeSelector } from "../../components/date-range-selector";
 import { PeriodicSyncConfig } from "../../components/periodic-sync-config";
@@ -13,6 +18,17 @@ import { SummaryConfig } from "../../components/summary-config";
 import { getConnectorDisplayName } from "../../tabs/all-connectors-tab";
 import { getConnectorConfigComponent } from "../index";
 
+const REAUTH_ENDPOINTS: Partial<Record<string, string>> = {
+	[EnumConnectorName.LINEAR_CONNECTOR]: "/api/v1/auth/linear/connector/reauth",
+	[EnumConnectorName.NOTION_CONNECTOR]: "/api/v1/auth/notion/connector/reauth",
+	[EnumConnectorName.GOOGLE_DRIVE_CONNECTOR]: "/api/v1/auth/google/drive/connector/reauth",
+	[EnumConnectorName.GOOGLE_GMAIL_CONNECTOR]: "/api/v1/auth/google/gmail/connector/reauth",
+	[EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR]: "/api/v1/auth/google/calendar/connector/reauth",
+	[EnumConnectorName.COMPOSIO_GOOGLE_DRIVE_CONNECTOR]: "/api/v1/auth/composio/connector/reauth",
+	[EnumConnectorName.COMPOSIO_GMAIL_CONNECTOR]: "/api/v1/auth/composio/connector/reauth",
+	[EnumConnectorName.COMPOSIO_GOOGLE_CALENDAR_CONNECTOR]: "/api/v1/auth/composio/connector/reauth",
+};
+
 interface ConnectorEditViewProps {
 	connector: SearchSourceConnector;
 	startDate: Date | undefined;
@@ -60,6 +76,41 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 	onConfigChange,
 	onNameChange,
 }) => {
+	const searchSpaceIdAtom = useAtomValue(activeSearchSpaceIdAtom);
+	const isAuthExpired = connector.config?.auth_expired === true;
+	const reauthEndpoint = REAUTH_ENDPOINTS[connector.connector_type];
+	const [reauthing, setReauthing] = useState(false);
+
+	const handleReauth = useCallback(async () => {
+		const spaceId = searchSpaceId ?? searchSpaceIdAtom;
+		if (!spaceId || !reauthEndpoint) return;
+		setReauthing(true);
+		try {
+			const backendUrl = process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL || "http://localhost:8000";
+			const url = new URL(`${backendUrl}${reauthEndpoint}`);
+			url.searchParams.set("connector_id", String(connector.id));
+			url.searchParams.set("space_id", String(spaceId));
+			url.searchParams.set("return_url", window.location.pathname);
+			const response = await authenticatedFetch(url.toString());
+			if (!response.ok) {
+				const data = await response.json().catch(() => ({}));
+				toast.error(data.detail ?? "Failed to initiate re-authentication.");
+				return;
+			}
+			const data = await response.json();
+			if (data.auth_url) {
+				window.location.href = data.auth_url;
+			} else if (data.success) {
+				toast.success(data.message ?? "Authentication refreshed successfully.");
+				window.location.reload();
+			}
+		} catch {
+			toast.error("Failed to initiate re-authentication.");
+		} finally {
+			setReauthing(false);
+		}
+	}, [searchSpaceId, searchSpaceIdAtom, reauthEndpoint, connector.id]);
+
 	// Get connector-specific config component
 	const ConnectorConfigComponent = useMemo(
 		() => getConnectorConfigComponent(connector.connector_type),
@@ -169,30 +220,28 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 							</p>
 						</div>
 					</div>
-					{/* Quick Index Button - only show for indexable connectors, but not for Google Drive (requires folder selection) */}
-					{connector.is_indexable &&
-						onQuickIndex &&
-						connector.connector_type !== "GOOGLE_DRIVE_CONNECTOR" && (
-							<Button
-								variant="secondary"
-								size="sm"
-								onClick={handleQuickIndex}
-								disabled={isQuickIndexing || isIndexing || isSaving || isDisconnecting}
-								className="text-xs sm:text-sm bg-slate-400/10 dark:bg-white/10 hover:bg-slate-400/20 dark:hover:bg-white/20 border-slate-400/20 dark:border-white/20 w-full sm:w-auto"
-							>
-								{isQuickIndexing || isIndexing ? (
-									<>
-										<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
-										Syncing
-									</>
-								) : (
-									<>
-										<RefreshCw className="mr-2 h-4 w-4" />
-										Quick Index
-									</>
-								)}
-							</Button>
-						)}
+					{/* Quick Index Button - hidden when auth is expired */}
+					{connector.is_indexable && onQuickIndex && !isAuthExpired && (
+						<Button
+							variant="secondary"
+							size="sm"
+							onClick={handleQuickIndex}
+							disabled={isQuickIndexing || isIndexing || isSaving || isDisconnecting}
+							className="text-xs sm:text-sm bg-slate-400/10 dark:bg-white/10 hover:bg-slate-400/20 dark:hover:bg-white/20 border-slate-400/20 dark:border-white/20 w-full sm:w-auto"
+						>
+							{isQuickIndexing || isIndexing ? (
+								<>
+									<RefreshCw className="mr-2 h-4 w-4 animate-spin" />
+									Syncing
+								</>
+							) : (
+								<>
+									<RefreshCw className="mr-2 h-4 w-4" />
+									Quick Index
+								</>
+							)}
+						</Button>
+					)}
 				</div>
 			</div>
 
@@ -350,20 +399,31 @@ export const ConnectorEditView: FC<ConnectorEditViewProps> = ({
 						Disconnect
 					</Button>
 				)}
-				<Button
-					onClick={onSave}
-					disabled={isSaving || isDisconnecting}
-					className="text-xs sm:text-sm flex-1 sm:flex-initial h-12 sm:h-auto py-3 sm:py-2"
-				>
-					{isSaving ? (
-						<>
-							<Spinner size="sm" className="mr-2" />
-							Saving
-						</>
-					) : (
-						"Save Changes"
-					)}
-				</Button>
+				{isAuthExpired && reauthEndpoint ? (
+					<Button
+						onClick={handleReauth}
+						disabled={reauthing || isDisconnecting}
+						className="text-xs sm:text-sm flex-1 sm:flex-initial h-12 sm:h-auto py-3 sm:py-2 bg-amber-600 hover:bg-amber-700 text-white"
+					>
+						<RefreshCw className={cn("size-3.5", reauthing && "animate-spin")} />
+						Re-authenticate
+					</Button>
+				) : (
+					<Button
+						onClick={onSave}
+						disabled={isSaving || isDisconnecting}
+						className="text-xs sm:text-sm flex-1 sm:flex-initial h-12 sm:h-auto py-3 sm:py-2"
+					>
+						{isSaving ? (
+							<>
+								<Spinner size="sm" className="mr-2" />
+								Saving
+							</>
+						) : (
+							"Save Changes"
+						)}
+					</Button>
+				)}
 			</div>
 		</div>
 	);

surfsense_web/components/assistant-ui/connector-popup/connector-configs/views/indexing-configuration-view.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { ArrowLeft, Check, Info } from "lucide-react";
-import { useSearchParams } from "next/navigation";
 import { type FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
@@ -24,6 +23,7 @@ interface IndexingConfigurationViewProps {
 	frequencyMinutes: string;
 	enableSummary: boolean;
 	isStartingIndexing: boolean;
+	isFromOAuth?: boolean;
 	onStartDateChange: (date: Date | undefined) => void;
 	onEndDateChange: (date: Date | undefined) => void;
 	onPeriodicEnabledChange: (enabled: boolean) => void;
@@ -43,6 +43,7 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 	frequencyMinutes,
 	enableSummary,
 	isStartingIndexing,
+	isFromOAuth = false,
 	onStartDateChange,
 	onEndDateChange,
 	onPeriodicEnabledChange,
@@ -52,9 +53,6 @@ export const IndexingConfigurationView: FC<IndexingConfigurationViewProps> = ({
 	onStartIndexing,
 	onSkip,
 }) => {
-	const searchParams = useSearchParams();
-	const isFromOAuth = searchParams.get("view") === "configure";
-
 	// Get connector-specific config component
 	const ConnectorConfigComponent = useMemo(
 		() => (connector ? getConnectorConfigComponent(connector.connector_type) : null),

surfsense_web/components/assistant-ui/connector-popup/constants/connector-constants.ts

@@ -2,27 +2,30 @@ import { EnumConnectorName } from "@/contracts/enums/connector";
 
 // OAuth Connectors (Quick Connect)
 export const OAUTH_CONNECTORS = [
-	// {
-	// 	id: "google-drive-connector",
-	// 	title: "Google Drive",
-	// 	description: "Search your Drive files",
-	// 	connectorType: EnumConnectorName.GOOGLE_DRIVE_CONNECTOR,
-	// 	authEndpoint: "/api/v1/auth/google/drive/connector/add/",
-	// },
-	// {
-	// 	id: "google-gmail-connector",
-	// 	title: "Gmail",
-	// 	description: "Search through your emails",
-	// 	connectorType: EnumConnectorName.GOOGLE_GMAIL_CONNECTOR,
-	// 	authEndpoint: "/api/v1/auth/google/gmail/connector/add/",
-	// },
-	// {
-	// 	id: "google-calendar-connector",
-	// 	title: "Google Calendar",
-	// 	description: "Search through your events",
-	// 	connectorType: EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR,
-	// 	authEndpoint: "/api/v1/auth/google/calendar/connector/add/",
-	// },
+	{
+		id: "google-drive-connector",
+		title: "Google Drive",
+		description: "Search your Drive files",
+		connectorType: EnumConnectorName.GOOGLE_DRIVE_CONNECTOR,
+		authEndpoint: "/api/v1/auth/google/drive/connector/add/",
+		selfHostedOnly: true,
+	},
+	{
+		id: "google-gmail-connector",
+		title: "Gmail",
+		description: "Search through your emails",
+		connectorType: EnumConnectorName.GOOGLE_GMAIL_CONNECTOR,
+		authEndpoint: "/api/v1/auth/google/gmail/connector/add/",
+		selfHostedOnly: true,
+	},
+	{
+		id: "google-calendar-connector",
+		title: "Google Calendar",
+		description: "Search through your events",
+		connectorType: EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR,
+		authEndpoint: "/api/v1/auth/google/calendar/connector/add/",
+		selfHostedOnly: true,
+	},
 	{
 		id: "airtable-connector",
 		title: "Airtable",
@@ -136,12 +139,6 @@ export const OTHER_CONNECTORS = [
 		description: "Search with Tavily",
 		connectorType: EnumConnectorName.TAVILY_API,
 	},
-	{
-		id: "searxng",
-		title: "SearxNG",
-		description: "Search with SearxNG",
-		connectorType: EnumConnectorName.SEARXNG_API,
-	},
 	{
 		id: "linkup-api",
 		title: "Linkup API",

surfsense_web/components/assistant-ui/connector-popup/constants/connector-popup.schemas.ts

@@ -1,24 +1,6 @@
 import { z } from "zod";
 import { searchSourceConnectorTypeEnum } from "@/contracts/types/connector.types";
 
-/**
- * Schema for URL query parameters used by the connector popup
- */
-export const connectorPopupQueryParamsSchema = z.object({
-	modal: z.enum(["connectors"]).optional(),
-	tab: z.enum(["all", "active"]).optional(),
-	view: z
-		.enum(["configure", "edit", "connect", "youtube", "accounts", "mcp-list", "composio"])
-		.optional(),
-	connector: z.string().optional(),
-	connectorId: z.string().optional(),
-	connectorType: z.string().optional(),
-	success: z.enum(["true", "false"]).optional(),
-	error: z.string().optional(),
-});
-
-export type ConnectorPopupQueryParams = z.infer<typeof connectorPopupQueryParamsSchema>;
-
 /**
  * Schema for OAuth API response (auth_url)
  */
@@ -72,31 +54,10 @@ export const dateRangeSchema = z
 export type DateRange = z.infer<typeof dateRangeSchema>;
 
 /**
- * Schema for connector ID validation (used in URL params)
+ * Schema for connector ID validation
  */
 export const connectorIdSchema = z.string().min(1, "Connector ID is required");
 
-/**
- * Helper function to safely parse query params
- */
-export function parseConnectorPopupQueryParams(
-	params: URLSearchParams | Record<string, string | null>
-): ConnectorPopupQueryParams {
-	const obj: Record<string, string | undefined> = {};
-
-	if (params instanceof URLSearchParams) {
-		params.forEach((value, key) => {
-			obj[key] = value || undefined;
-		});
-	} else {
-		Object.entries(params).forEach(([key, value]) => {
-			obj[key] = value || undefined;
-		});
-	}
-
-	return connectorPopupQueryParamsSchema.parse(obj);
-}
-
 /**
  * Helper function to safely parse OAuth response
  */

surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts

@@ -1,6 +1,5 @@
 import { format } from "date-fns";
 import { useAtom, useAtomValue } from "jotai";
-import { useRouter, useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import { connectorDialogOpenAtom } from "@/atoms/connector-dialog/connector-dialog.atoms";
@@ -37,14 +36,25 @@ import {
 import {
 	dateRangeSchema,
 	frequencyMinutesSchema,
-	parseConnectorPopupQueryParams,
 	parseOAuthAuthResponse,
 	validateIndexingConfigState,
 } from "../constants/connector-popup.schemas";
 
+const OAUTH_RESULT_COOKIE = "connector_oauth_result";
+
+function readOAuthResultCookie(): string | null {
+	const match = document.cookie
+		.split("; ")
+		.find((row) => row.startsWith(`${OAUTH_RESULT_COOKIE}=`));
+	return match ? decodeURIComponent(match.split("=").slice(1).join("=")) : null;
+}
+
+function clearOAuthResultCookie(): void {
+	// biome-ignore lint: only standard way to expire a cookie
+	document.cookie = `${OAUTH_RESULT_COOKIE}=; path=/; max-age=0`;
+}
+
 export const useConnectorDialog = () => {
-	const router = useRouter();
-	const searchParams = useSearchParams();
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
 	const { data: allConnectors, refetch: refetchAllConnectors } = useAtomValue(connectorsAtom);
 	const { mutateAsync: indexConnector } = useAtomValue(indexConnectorMutationAtom);
@@ -102,6 +112,9 @@ export const useConnectorDialog = () => {
 	// Track if we came from MCP list view when entering edit mode
 	const [cameFromMCPList, setCameFromMCPList] = useState(false);
 
+	// Track if we came from MCP list view when entering connect mode
+	const [connectCameFromMCPList, setConnectCameFromMCPList] = useState(false);
+
 	// Helper function to get frequency label
 	const getFrequencyLabel = useCallback((minutes: string): string => {
 		switch (minutes) {
@@ -181,352 +194,139 @@ export const useConnectorDialog = () => {
 		[searchSpaceId, indexConnector, updateConnector, refetchAllConnectors]
 	);
 
-	// When the dialog is opened externally (via setConnectorDialogOpen atom from
-	// thread.tsx / DocumentsSidebar.tsx), the URL is not updated. Sync it here
-	// so that other handlers that read window.location.href see modal=connectors.
-	const activeTabRef = useRef(activeTab);
-	activeTabRef.current = activeTab;
-	useEffect(() => {
-		if (isOpen) {
-			const url = new URL(window.location.href);
-			const modalParam = url.searchParams.get("modal");
-			const tabParam = url.searchParams.get("tab");
-			if (modalParam !== "connectors" || (tabParam !== "all" && tabParam !== "active")) {
-				url.searchParams.set("modal", "connectors");
-				url.searchParams.set("tab", activeTabRef.current);
-				window.history.replaceState({ modal: true }, "", url.toString());
-			}
-		}
-	}, [isOpen]);
+	// YouTube view state
+	const [isYouTubeView, setIsYouTubeView] = useState(false);
 
-	// Synchronize state with URL query params
+	// Track whether the current indexing config came from an OAuth redirect
+	const [isFromOAuth, setIsFromOAuth] = useState(false);
+
+	// Consume OAuth result from cookie (set by /connectors/callback route handler)
 	useEffect(() => {
+		const raw = readOAuthResultCookie();
+		if (!raw || !searchSpaceId) return;
+		clearOAuthResultCookie();
+
+		let result: {
+			success: string | null;
+			error: string | null;
+			connector: string | null;
+			connectorId: string | null;
+		};
 		try {
-			const params = parseConnectorPopupQueryParams(searchParams);
+			result = JSON.parse(raw);
+		} catch {
+			return;
+		}
 
-			if (params.modal === "connectors") {
-				setIsOpen(true);
+		if (result.error) {
+			const oauthConnector = result.connector
+				? OAUTH_CONNECTORS.find((c) => c.id === result.connector)
+				: null;
+			const name = oauthConnector?.title || "connector";
 
-				if (params.tab === "active" || params.tab === "all") {
-					setActiveTab(params.tab);
-				}
-
-				// Clear indexing config if view is not "configure" anymore
-				if (params.view !== "configure" && indexingConfig) {
-					setIndexingConfig(null);
-				}
-
-				// Clear editing connector if view is not "edit" anymore
-				if (params.view !== "edit" && editingConnector) {
-					setEditingConnector(null);
-					setConnectorName(null);
-				}
-
-				// Clear connecting connector type if view is not "connect" anymore
-				if (params.view !== "connect" && connectingConnectorType) {
-					setConnectingConnectorType(null);
-				}
-
-				// Clear viewing accounts type if view is not "accounts" anymore
-				if (params.view !== "accounts" && viewingAccountsType) {
-					setViewingAccountsType(null);
-				}
-
-				// Clear MCP list view if view is not "mcp-list" anymore
-				if (params.view !== "mcp-list" && viewingMCPList) {
-					setViewingMCPList(false);
-				}
-
-				// Handle MCP list view
-				if (params.view === "mcp-list" && !viewingMCPList) {
-					setViewingMCPList(true);
-				}
-
-				// Handle connect view
-				if (params.view === "connect" && params.connectorType && !connectingConnectorType) {
-					setConnectingConnectorType(params.connectorType);
-				}
-
-				// Handle accounts view
-				if (params.view === "accounts" && params.connectorType) {
-					// Update state if not set, or if connectorType has changed
-					const needsUpdate =
-						!viewingAccountsType || viewingAccountsType.connectorType !== params.connectorType;
-
-					if (needsUpdate) {
-						// Check both OAUTH_CONNECTORS and COMPOSIO_CONNECTORS
-						const oauthConnector =
-							OAUTH_CONNECTORS.find((c) => c.connectorType === params.connectorType) ||
-							COMPOSIO_CONNECTORS.find((c) => c.connectorType === params.connectorType);
-						if (oauthConnector) {
-							setViewingAccountsType({
-								connectorType: oauthConnector.connectorType,
-								connectorTitle: oauthConnector.title,
-							});
-						}
-					}
-				}
-
-				// Handle YouTube view
-				if (params.view === "youtube") {
-					// YouTube view is active - no additional state needed
-				}
-
-				// Handle configure view (for page refresh support)
-				if (params.view === "configure" && params.connector && !indexingConfig && allConnectors) {
-					// Check both OAUTH_CONNECTORS and COMPOSIO_CONNECTORS
-					const oauthConnector =
-						OAUTH_CONNECTORS.find((c) => c.id === params.connector) ||
-						COMPOSIO_CONNECTORS.find((c) => c.id === params.connector);
-					if (oauthConnector) {
-						let existingConnector: SearchSourceConnector | undefined;
-						if (params.connectorId) {
-							const connectorId = parseInt(params.connectorId, 10);
-							existingConnector = allConnectors.find(
-								(c: SearchSourceConnector) => c.id === connectorId
-							);
-						} else {
-							existingConnector = allConnectors.find(
-								(c: SearchSourceConnector) => c.connector_type === oauthConnector.connectorType
-							);
-						}
-						if (existingConnector) {
-							const connectorValidation = searchSourceConnector.safeParse(existingConnector);
-							if (connectorValidation.success) {
-								const config = validateIndexingConfigState({
-									connectorType: oauthConnector.connectorType,
-									connectorId: existingConnector.id,
-									connectorTitle: oauthConnector.title,
-								});
-								setIndexingConfig(config);
-								setIndexingConnector(existingConnector);
-								setIndexingConnectorConfig(existingConnector.config);
-							}
-						}
-					}
-				}
-
-				// Handle edit view
-				if (params.view === "edit" && params.connectorId && allConnectors && !editingConnector) {
-					const connectorId = parseInt(params.connectorId, 10);
-					const connector = allConnectors.find((c: SearchSourceConnector) => c.id === connectorId);
-					if (connector) {
-						const connectorValidation = searchSourceConnector.safeParse(connector);
-						if (connectorValidation.success) {
-							setEditingConnector(connector);
-							setConnectorConfig(connector.config);
-							setConnectorName(connector.name);
-							// Load existing periodic sync settings (disabled for non-indexable connectors)
-							setPeriodicEnabled(
-								!connector.is_indexable ? false : connector.periodic_indexing_enabled
-							);
-							setFrequencyMinutes(connector.indexing_frequency_minutes?.toString() || "1440");
-							setEnableSummary(connector.enable_summary ?? false);
-							// Reset dates - user can set new ones for re-indexing
-							setStartDate(undefined);
-							setEndDate(undefined);
-						}
-					}
-				}
+			if (result.error === "duplicate_account") {
+				toast.error(`This ${name} account is already connected`, {
+					description: "Please use a different account or manage the existing connection.",
+				});
 			} else {
-				// Do NOT call setIsOpen(false) here. Closing the dialog is handled
-				// explicitly by handleOpenChange and the individual action handlers.
-				// Relying on URL params to close the dialog caused a race condition
-				// where Next.js router updates from tab switches briefly produced
-				// stale searchParams without the "modal" key, closing the popup.
-
-				// Still clean up sub-view state when the modal param is gone
-				// (e.g. after browser back navigation or explicit handler URL cleanup).
-				if (indexingConfig) {
-					setIndexingConfig(null);
-					setIndexingConnector(null);
-					setIndexingConnectorConfig(null);
-					setStartDate(undefined);
-					setEndDate(undefined);
-					setPeriodicEnabled(false);
-					setFrequencyMinutes("1440");
-					setEnableSummary(false);
-					setIsScrolled(false);
-					setSearchQuery("");
-				}
-				if (editingConnector) {
-					setEditingConnector(null);
-					setConnectorName(null);
-					setConnectorConfig(null);
-					setStartDate(undefined);
-					setEndDate(undefined);
-					setPeriodicEnabled(false);
-					setFrequencyMinutes("1440");
-					setEnableSummary(false);
-					setIsScrolled(false);
-					setSearchQuery("");
-				}
-				if (connectingConnectorType) {
-					setConnectingConnectorType(null);
-				}
-				if (viewingAccountsType) {
-					setViewingAccountsType(null);
-				}
-			}
-		} catch (error) {
-			// Invalid query params - log but don't crash
-			console.warn("Invalid connector popup query params:", error);
-		}
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-	}, [
-		searchParams,
-		allConnectors,
-		editingConnector,
-		indexingConfig,
-		connectingConnectorType,
-		viewingAccountsType,
-		viewingMCPList,
-		setIsOpen,
-	]);
-
-	// Detect OAuth success / Failure and transition to config view
-	useEffect(() => {
-		try {
-			const params = parseConnectorPopupQueryParams(searchParams);
-
-			// Handle OAuth errors (e.g., duplicate account)
-			if (params.error && params.modal === "connectors") {
-				const oauthConnector = params.connector
-					? OAUTH_CONNECTORS.find((c) => c.id === params.connector)
-					: null;
-				const connectorName = oauthConnector?.title || "connector";
-
-				if (params.error === "duplicate_account") {
-					toast.error(`This ${connectorName} account is already connected`, {
-						description: "Please use a different account or manage the existing connection.",
-					});
-				} else {
-					toast.error(`Failed to connect ${connectorName}`, {
-						description: params.error.replace(/_/g, " "),
-					});
-				}
-
-				// Clean up error params from URL
-				const url = new URL(window.location.href);
-				url.searchParams.delete("error");
-				url.searchParams.delete("connector");
-				window.history.replaceState({}, "", url.toString());
-
-				// Open the popup to show the connectors
-				setIsOpen(true);
-				return;
-			}
-
-			if (params.success === "true" && searchSpaceId && params.modal === "connectors") {
-				// For auto-index connectors: close modal and show loading toast before refetch
-				const earlyConnector = params.connector
-					? OAUTH_CONNECTORS.find((c) => c.id === params.connector) ||
-						COMPOSIO_CONNECTORS.find((c) => c.id === params.connector)
-					: null;
-
-				if (earlyConnector && AUTO_INDEX_CONNECTOR_TYPES.has(earlyConnector.connectorType)) {
-					toast.loading(`Setting up ${earlyConnector.title}...`, { id: "auto-index" });
-					setIsOpen(false);
-					const url = new URL(window.location.href);
-					url.searchParams.delete("success");
-					url.searchParams.delete("connector");
-					url.searchParams.delete("connectorId");
-					url.searchParams.delete("view");
-					url.searchParams.delete("modal");
-					url.searchParams.delete("tab");
-					router.replace(url.pathname + url.search, { scroll: false });
-				}
-
-				refetchAllConnectors().then(async (result) => {
-					if (!result.data) {
-						toast.dismiss("auto-index");
-						return;
-					}
-
-					let newConnector: SearchSourceConnector | undefined;
-					let oauthConnector:
-						| (typeof OAUTH_CONNECTORS)[number]
-						| (typeof COMPOSIO_CONNECTORS)[number]
-						| undefined;
-
-					// First, try to find connector by connectorId if provided
-					if (params.connectorId) {
-						const connectorId = parseInt(params.connectorId, 10);
-						newConnector = result.data.find((c: SearchSourceConnector) => c.id === connectorId);
-
-						// If we found the connector, find the matching OAuth/Composio connector by type
-						if (newConnector) {
-							const connectorType = newConnector.connector_type;
-							oauthConnector =
-								OAUTH_CONNECTORS.find((c) => c.connectorType === connectorType) ||
-								COMPOSIO_CONNECTORS.find((c) => c.connectorType === connectorType);
-						}
-					}
-
-					// If we don't have a connector yet, try to find by connector param
-					if (!newConnector && params.connector) {
-						oauthConnector =
-							OAUTH_CONNECTORS.find((c) => c.id === params.connector) ||
-							COMPOSIO_CONNECTORS.find((c) => c.id === params.connector);
-
-						if (oauthConnector) {
-							const oauthConnectorType = oauthConnector.connectorType;
-							newConnector = result.data.find(
-								(c: SearchSourceConnector) => c.connector_type === oauthConnectorType
-							);
-						}
-					}
-
-					if (newConnector && oauthConnector) {
-						const connectorValidation = searchSourceConnector.safeParse(newConnector);
-						if (connectorValidation.success) {
-							trackConnectorConnected(
-								Number(searchSpaceId),
-								oauthConnector.connectorType,
-								newConnector.id
-							);
-
-							if (
-								newConnector.is_indexable &&
-								AUTO_INDEX_CONNECTOR_TYPES.has(oauthConnector.connectorType)
-							) {
-								await handleAutoIndex(
-									newConnector,
-									oauthConnector.title,
-									oauthConnector.connectorType
-								);
-							} else {
-								toast.dismiss("auto-index");
-								const config = validateIndexingConfigState({
-									connectorType: oauthConnector.connectorType,
-									connectorId: newConnector.id,
-									connectorTitle: oauthConnector.title,
-								});
-								setIndexingConfig(config);
-								setIndexingConnector(newConnector);
-								setIndexingConnectorConfig(newConnector.config);
-								setIsOpen(true);
-								const url = new URL(window.location.href);
-								url.searchParams.delete("success");
-								url.searchParams.set("connectorId", newConnector.id.toString());
-								url.searchParams.set("view", "configure");
-								window.history.replaceState({}, "", url.toString());
-							}
-						} else {
-							console.warn("Invalid connector data after OAuth:", connectorValidation.error);
-							toast.dismiss("auto-index");
-							toast.error("Failed to validate connector data");
-						}
-					} else {
-						toast.dismiss("auto-index");
-					}
+				toast.error(`Failed to connect ${name}`, {
+					description: result.error.replace(/_/g, " "),
 				});
 			}
-		} catch (error) {
-			// Invalid query params - log but don't crash
-			console.warn("Invalid connector popup query params in OAuth success handler:", error);
+
+			setIsOpen(true);
+			return;
 		}
-	}, [searchParams, searchSpaceId, refetchAllConnectors, setIsOpen, handleAutoIndex, router]);
+
+		if (result.success === "true") {
+			const earlyConnector = result.connector
+				? OAUTH_CONNECTORS.find((c) => c.id === result.connector) ||
+					COMPOSIO_CONNECTORS.find((c) => c.id === result.connector)
+				: null;
+
+			if (earlyConnector && AUTO_INDEX_CONNECTOR_TYPES.has(earlyConnector.connectorType)) {
+				toast.loading(`Setting up ${earlyConnector.title}...`, { id: "auto-index" });
+				setIsOpen(false);
+			}
+
+			refetchAllConnectors().then(async (fetchResult) => {
+				if (!fetchResult.data) {
+					toast.dismiss("auto-index");
+					return;
+				}
+
+				let newConnector: SearchSourceConnector | undefined;
+				let oauthConnector:
+					| (typeof OAUTH_CONNECTORS)[number]
+					| (typeof COMPOSIO_CONNECTORS)[number]
+					| undefined;
+
+				if (result.connectorId) {
+					const connectorId = parseInt(result.connectorId, 10);
+					newConnector = fetchResult.data.find((c: SearchSourceConnector) => c.id === connectorId);
+					if (newConnector) {
+						const connectorType = newConnector.connector_type;
+						oauthConnector =
+							OAUTH_CONNECTORS.find((c) => c.connectorType === connectorType) ||
+							COMPOSIO_CONNECTORS.find((c) => c.connectorType === connectorType);
+					}
+				}
+
+				if (!newConnector && result.connector) {
+					oauthConnector =
+						OAUTH_CONNECTORS.find((c) => c.id === result.connector) ||
+						COMPOSIO_CONNECTORS.find((c) => c.id === result.connector);
+					if (oauthConnector) {
+						const oauthType = oauthConnector.connectorType;
+						newConnector = fetchResult.data.find(
+							(c: SearchSourceConnector) => c.connector_type === oauthType
+						);
+					}
+				}
+
+				if (newConnector && oauthConnector) {
+					const connectorValidation = searchSourceConnector.safeParse(newConnector);
+					if (connectorValidation.success) {
+						trackConnectorConnected(
+							Number(searchSpaceId),
+							oauthConnector.connectorType,
+							newConnector.id
+						);
+
+						if (
+							newConnector.is_indexable &&
+							AUTO_INDEX_CONNECTOR_TYPES.has(oauthConnector.connectorType)
+						) {
+							await handleAutoIndex(
+								newConnector,
+								oauthConnector.title,
+								oauthConnector.connectorType
+							);
+						} else {
+							toast.dismiss("auto-index");
+							const config = validateIndexingConfigState({
+								connectorType: oauthConnector.connectorType,
+								connectorId: newConnector.id,
+								connectorTitle: oauthConnector.title,
+							});
+							setIndexingConfig(config);
+							setIndexingConnector(newConnector);
+							setIndexingConnectorConfig(newConnector.config);
+							setIsFromOAuth(true);
+							setIsOpen(true);
+						}
+					} else {
+						console.warn("Invalid connector data after OAuth:", connectorValidation.error);
+						toast.dismiss("auto-index");
+						toast.error("Failed to validate connector data");
+					}
+				} else {
+					toast.dismiss("auto-index");
+				}
+			});
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [searchSpaceId, handleAutoIndex, refetchAllConnectors, setIsOpen]);
 
 	// Handle OAuth connection
 	const handleConnectOAuth = useCallback(
@@ -572,12 +372,7 @@ export const useConnectorDialog = () => {
 	// Handle creating YouTube crawler (not a connector, shows view in popup)
 	const handleCreateYouTubeCrawler = useCallback(() => {
 		if (!searchSpaceId) return;
-
-		// Update URL to show YouTube view
-		const url = new URL(window.location.href);
-		url.searchParams.set("modal", "connectors");
-		url.searchParams.set("view", "youtube");
-		window.history.pushState({ modal: true }, "", url.toString());
+		setIsYouTubeView(true);
 	}, [searchSpaceId]);
 
 	// Handle creating webcrawler connector
@@ -629,10 +424,6 @@ export const useConnectorDialog = () => {
 						setIndexingConnector(connector);
 						setIndexingConnectorConfig(connector.config || {});
 						setIsOpen(true);
-						const url = new URL(window.location.href);
-						url.searchParams.set("modal", "connectors");
-						url.searchParams.set("view", "configure");
-						window.history.pushState({ modal: true }, "", url.toString());
 					}
 				}
 			}
@@ -648,16 +439,7 @@ export const useConnectorDialog = () => {
 	const handleConnectNonOAuth = useCallback(
 		(connectorType: string) => {
 			if (!searchSpaceId) return;
-
-			// Set connecting state
 			setConnectingConnectorType(connectorType);
-
-			// Update URL to show connect view
-			const url = new URL(window.location.href);
-			url.searchParams.set("modal", "connectors");
-			url.searchParams.set("view", "connect");
-			url.searchParams.set("connectorType", connectorType);
-			window.history.pushState({ modal: true }, "", url.toString());
 		},
 		[searchSpaceId]
 	);
@@ -810,26 +592,16 @@ export const useConnectorDialog = () => {
 										: `${connectorTitle} connected and syncing started!`;
 								toast.success(successMessage);
 
-								// Close dialog and clean up URL
 								setIsOpen(false);
-								const url = new URL(window.location.href);
-								url.searchParams.delete("modal");
-								url.searchParams.delete("tab");
-								url.searchParams.delete("view");
-								url.searchParams.delete("connectorType");
-								router.replace(url.pathname + url.search, { scroll: false });
 
-								// Clear indexing config state since we're not showing the view
 								setIndexingConfig(null);
 								setIndexingConnector(null);
 								setIndexingConnectorConfig(null);
 
-								// Invalidate queries to refresh data
 								queryClient.invalidateQueries({
 									queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
 								});
 
-								// Refresh connectors list
 								await refetchAllConnectors();
 							} else {
 								// Non-indexable connector
@@ -856,15 +628,6 @@ export const useConnectorDialog = () => {
 										description: "Configure the webhook URL in your Circleback settings.",
 									});
 
-									// Transition to edit view
-									const url = new URL(window.location.href);
-									url.searchParams.set("modal", "connectors");
-									url.searchParams.set("view", "edit");
-									url.searchParams.set("connectorId", connector.id.toString());
-									url.searchParams.delete("connectorType");
-									router.replace(url.pathname + url.search, { scroll: false });
-
-									// Refresh connectors list
 									await refetchAllConnectors();
 								} else {
 									// Other non-indexable connectors - just show success message and close
@@ -874,19 +637,10 @@ export const useConnectorDialog = () => {
 											: `${connectorTitle} connected successfully!`;
 									toast.success(successMessage);
 
-									// Refresh connectors list before closing modal
 									await refetchAllConnectors();
 
-									// Close dialog and clean up URL
 									setIsOpen(false);
-									const url = new URL(window.location.href);
-									url.searchParams.delete("modal");
-									url.searchParams.delete("tab");
-									url.searchParams.delete("view");
-									url.searchParams.delete("connectorType");
-									router.replace(url.pathname + url.search, { scroll: false });
 
-									// Clear indexing config state
 									setIndexingConfig(null);
 									setIndexingConnector(null);
 									setIndexingConnectorConfig(null);
@@ -911,96 +665,64 @@ export const useConnectorDialog = () => {
 			refetchAllConnectors,
 			updateConnector,
 			indexConnector,
-			router,
 			setIsOpen,
 		]
 	);
 
 	// Handle going back from connect view
 	const handleBackFromConnect = useCallback(() => {
-		const url = new URL(window.location.href);
-		url.searchParams.set("modal", "connectors");
-
-		// If we're connecting an MCP and came from list view, go back to list
-		if (connectingConnectorType === "MCP_CONNECTOR" && viewingMCPList) {
-			url.searchParams.set("view", "mcp-list");
-		} else {
-			url.searchParams.set("tab", "all");
-			url.searchParams.delete("view");
+		if (connectCameFromMCPList) {
+			setViewingMCPList(true);
+			setConnectCameFromMCPList(false);
 		}
-
-		url.searchParams.delete("connectorType");
-		router.replace(url.pathname + url.search, { scroll: false });
-	}, [router, connectingConnectorType, viewingMCPList]);
+		setConnectingConnectorType(null);
+	}, [connectCameFromMCPList]);
 
 	// Handle going back from YouTube view
 	const handleBackFromYouTube = useCallback(() => {
-		const url = new URL(window.location.href);
-		url.searchParams.set("modal", "connectors");
-		url.searchParams.set("tab", "all");
-		url.searchParams.delete("view");
-		router.replace(url.pathname + url.search, { scroll: false });
-	}, [router]);
+		setIsYouTubeView(false);
+	}, []);
 
 	// Handle viewing accounts list for OAuth connector type
 	const handleViewAccountsList = useCallback(
 		(connectorType: string, _connectorTitle?: string) => {
 			if (!searchSpaceId) return;
 
-			// Update URL to show accounts view, preserving current tab
-			// The useEffect will handle setting viewingAccountsType based on URL params
-			const url = new URL(window.location.href);
-			url.searchParams.set("modal", "connectors");
-			url.searchParams.set("view", "accounts");
-			url.searchParams.set("connectorType", connectorType);
-			// Keep the current tab in URL so we can go back to it
-			router.replace(url.pathname + url.search, { scroll: false });
+			const oauthConnector =
+				OAUTH_CONNECTORS.find((c) => c.connectorType === connectorType) ||
+				COMPOSIO_CONNECTORS.find((c) => c.connectorType === connectorType);
+			if (oauthConnector) {
+				setViewingAccountsType({
+					connectorType: oauthConnector.connectorType,
+					connectorTitle: oauthConnector.title,
+				});
+			}
 		},
-		[searchSpaceId, router]
+		[searchSpaceId]
 	);
 
 	// Handle going back from accounts list view
 	const handleBackFromAccountsList = useCallback(() => {
 		setViewingAccountsType(null);
-		const url = new URL(window.location.href);
-		url.searchParams.set("modal", "connectors");
-		// Keep the current tab (don't change it) - just remove view-specific params
-		url.searchParams.delete("view");
-		url.searchParams.delete("connectorType");
-		router.replace(url.pathname + url.search, { scroll: false });
-	}, [router]);
+	}, []);
 
 	// Handle viewing MCP list
 	const handleViewMCPList = useCallback(() => {
 		if (!searchSpaceId) return;
-
 		setViewingMCPList(true);
-
-		// Update URL to show MCP list view
-		const url = new URL(window.location.href);
-		url.searchParams.set("modal", "connectors");
-		url.searchParams.set("view", "mcp-list");
-		router.replace(url.pathname + url.search, { scroll: false });
-	}, [searchSpaceId, router]);
+	}, [searchSpaceId]);
 
 	// Handle going back from MCP list view
 	const handleBackFromMCPList = useCallback(() => {
 		setViewingMCPList(false);
-		const url = new URL(window.location.href);
-		url.searchParams.set("modal", "connectors");
-		url.searchParams.delete("view");
-		router.replace(url.pathname + url.search, { scroll: false });
-	}, [router]);
+	}, []);
 
 	// Handle adding new MCP from list view
 	const handleAddNewMCPFromList = useCallback(() => {
+		setConnectCameFromMCPList(true);
+		setViewingMCPList(false);
 		setConnectingConnectorType("MCP_CONNECTOR");
-		const url = new URL(window.location.href);
-		url.searchParams.set("modal", "connectors");
-		url.searchParams.set("view", "connect");
-		url.searchParams.set("connectorType", "MCP_CONNECTOR");
-		router.replace(url.pathname + url.search, { scroll: false });
-	}, [router]);
+	}, []);
 
 	// Handle starting indexing
 	const handleStartIndexing = useCallback(
@@ -1143,15 +865,8 @@ export const useConnectorDialog = () => {
 
 				toast.success(`${indexingConfig.connectorTitle} indexing started`);
 
-				// Close dialog and clean up URL
 				setIsOpen(false);
-				const url = new URL(window.location.href);
-				url.searchParams.delete("modal");
-				url.searchParams.delete("tab");
-				url.searchParams.delete("success");
-				url.searchParams.delete("connector");
-				url.searchParams.delete("view");
-				router.replace(url.pathname + url.search, { scroll: false });
+				setIsFromOAuth(false);
 
 				refreshConnectors();
 				queryClient.invalidateQueries({
@@ -1174,7 +889,6 @@ export const useConnectorDialog = () => {
 			periodicEnabled,
 			frequencyMinutes,
 			enableSummary,
-			router,
 			indexingConnectorConfig,
 			setIsOpen,
 		]
@@ -1182,16 +896,9 @@ export const useConnectorDialog = () => {
 
 	// Handle skipping indexing
 	const handleSkipIndexing = useCallback(() => {
-		// Close dialog and clean up URL
 		setIsOpen(false);
-		const url = new URL(window.location.href);
-		url.searchParams.delete("modal");
-		url.searchParams.delete("tab");
-		url.searchParams.delete("success");
-		url.searchParams.delete("connector");
-		url.searchParams.delete("view");
-		router.replace(url.pathname + url.search, { scroll: false });
-	}, [router, setIsOpen]);
+		setIsFromOAuth(false);
+	}, [setIsOpen]);
 
 	// Handle starting edit mode
 	const handleStartEdit = useCallback(
@@ -1213,20 +920,21 @@ export const useConnectorDialog = () => {
 				return;
 			}
 
-			// Track if we came from accounts list view
-			// If viewingAccountsType matches this connector type, preserve it
+			// Track if we came from accounts list view so handleBackFromEdit can restore it
 			if (viewingAccountsType && viewingAccountsType.connectorType === connector.connector_type) {
 				setCameFromAccountsList(viewingAccountsType);
 			} else {
 				setCameFromAccountsList(null);
 			}
+			setViewingAccountsType(null);
 
-			// Track if we came from MCP list view
+			// Track if we came from MCP list view so handleBackFromEdit can restore it
 			if (viewingMCPList && connector.connector_type === "MCP_CONNECTOR") {
 				setCameFromMCPList(true);
 			} else {
 				setCameFromMCPList(false);
 			}
+			setViewingMCPList(false);
 
 			// Track index with date range opened event
 			if (connector.is_indexable) {
@@ -1239,20 +947,11 @@ export const useConnectorDialog = () => {
 
 			setEditingConnector(connector);
 			setConnectorName(connector.name);
-			// Load existing periodic sync settings (disabled for non-indexable connectors)
 			setPeriodicEnabled(!connector.is_indexable ? false : connector.periodic_indexing_enabled);
 			setFrequencyMinutes(connector.indexing_frequency_minutes?.toString() || "1440");
 			setEnableSummary(connector.enable_summary ?? false);
-			// Reset dates - user can set new ones for re-indexing
 			setStartDate(undefined);
 			setEndDate(undefined);
-
-			// Update URL
-			const url = new URL(window.location.href);
-			url.searchParams.set("modal", "connectors");
-			url.searchParams.set("view", "edit");
-			url.searchParams.set("connectorId", connector.id.toString());
-			window.history.pushState({ modal: true }, "", url.toString());
 		},
 		[searchSpaceId, viewingAccountsType, viewingMCPList, handleViewMCPList, activeTab]
 	);
@@ -1433,14 +1132,7 @@ export const useConnectorDialog = () => {
 						: indexingDescription,
 				});
 
-				// Close dialog and clean up URL
 				setIsOpen(false);
-				const url = new URL(window.location.href);
-				url.searchParams.delete("modal");
-				url.searchParams.delete("tab");
-				url.searchParams.delete("view");
-				url.searchParams.delete("connectorId");
-				router.replace(url.pathname + url.search, { scroll: false });
 
 				refreshConnectors();
 				queryClient.invalidateQueries({
@@ -1465,7 +1157,6 @@ export const useConnectorDialog = () => {
 			frequencyMinutes,
 			enableSummary,
 			getFrequencyLabel,
-			router,
 			connectorConfig,
 			connectorName,
 			setIsOpen,
@@ -1496,23 +1187,17 @@ export const useConnectorDialog = () => {
 						: `${editingConnector.name} disconnected successfully`
 				);
 
-				// Update URL - for MCP from list view, go back to list; otherwise close modal
-				const url = new URL(window.location.href);
 				if (editingConnector.connector_type === "MCP_CONNECTOR" && cameFromMCPList) {
-					// Go back to MCP list view only if we came from there
 					setViewingMCPList(true);
-					url.searchParams.set("modal", "connectors");
-					url.searchParams.set("view", "mcp-list");
-					url.searchParams.delete("connectorId");
+					setEditingConnector(null);
+					setConnectorName(null);
+					setConnectorConfig(null);
 				} else {
-					// Close dialog for all other cases
+					setEditingConnector(null);
+					setConnectorName(null);
+					setConnectorConfig(null);
 					setIsOpen(false);
-					url.searchParams.delete("modal");
-					url.searchParams.delete("tab");
-					url.searchParams.delete("view");
-					url.searchParams.delete("connectorId");
 				}
-				router.replace(url.pathname + url.search, { scroll: false });
 
 				refreshConnectors();
 				queryClient.invalidateQueries({
@@ -1525,7 +1210,7 @@ export const useConnectorDialog = () => {
 				setIsDisconnecting(false);
 			}
 		},
-		[editingConnector, searchSpaceId, deleteConnector, router, cameFromMCPList, setIsOpen]
+		[editingConnector, searchSpaceId, deleteConnector, cameFromMCPList, setIsOpen]
 	);
 
 	// Handle quick index (index with selected date range, or backend defaults if none selected)
@@ -1569,7 +1254,7 @@ export const useConnectorDialog = () => {
 					queryKey: cacheKeys.logs.summary(Number(searchSpaceId)),
 				});
 				// Note: Don't call stopIndexing here - let useIndexingConnectors hook
-				// detect when last_indexed_at changes via Electric SQL
+				// detect when last_indexed_at changes via real-time sync
 			} catch (error) {
 				console.error("Error indexing connector content:", error);
 				toast.error(error instanceof Error ? error.message : "Failed to start indexing");
@@ -1584,66 +1269,35 @@ export const useConnectorDialog = () => {
 
 	// Handle going back from edit view
 	const handleBackFromEdit = useCallback(() => {
-		// If editing an MCP connector and came from MCP list, go back to MCP list view
 		if (editingConnector?.connector_type === "MCP_CONNECTOR" && cameFromMCPList) {
 			setViewingMCPList(true);
 			setCameFromMCPList(false);
-			const url = new URL(window.location.href);
-			url.searchParams.set("modal", "connectors");
-			url.searchParams.set("view", "mcp-list");
-			url.searchParams.delete("connectorId");
-			router.replace(url.pathname + url.search, { scroll: false });
 			setEditingConnector(null);
 			setConnectorName(null);
 			setConnectorConfig(null);
 			return;
 		}
 
-		// If we came from accounts list view, go back there
 		if (cameFromAccountsList && editingConnector) {
-			// Restore accounts list view
 			setViewingAccountsType(cameFromAccountsList);
 			setCameFromAccountsList(null);
-			const url = new URL(window.location.href);
-			url.searchParams.set("modal", "connectors");
-			url.searchParams.set("view", "accounts");
-			url.searchParams.set("connectorType", cameFromAccountsList.connectorType);
-			url.searchParams.delete("connectorId");
-			router.replace(url.pathname + url.search, { scroll: false });
-		} else {
-			// Otherwise, go back to main connector popup (preserve the tab the user was on)
-			const url = new URL(window.location.href);
-			url.searchParams.set("modal", "connectors");
-			url.searchParams.set("tab", activeTab); // Use current tab instead of always "all"
-			url.searchParams.delete("view");
-			url.searchParams.delete("connectorId");
-			router.replace(url.pathname + url.search, { scroll: false });
 		}
+
 		setEditingConnector(null);
 		setConnectorName(null);
 		setConnectorConfig(null);
-	}, [router, cameFromAccountsList, editingConnector, cameFromMCPList, activeTab]);
+	}, [cameFromAccountsList, editingConnector, cameFromMCPList]);
 
 	// Handle dialog open/close
 	const handleOpenChange = useCallback(
 		(open: boolean) => {
 			setIsOpen(open);
 
-			if (open) {
-				const url = new URL(window.location.href);
-				url.searchParams.set("modal", "connectors");
-				url.searchParams.set("tab", activeTab);
-				window.history.pushState({ modal: true }, "", url.toString());
-			} else {
-				const url = new URL(window.location.href);
-				url.searchParams.delete("modal");
-				url.searchParams.delete("tab");
-				url.searchParams.delete("success");
-				url.searchParams.delete("connector");
-				url.searchParams.delete("view");
-				window.history.pushState({ modal: false }, "", url.toString());
+			if (!open) {
 				setIsScrolled(false);
 				setSearchQuery("");
+				setIsYouTubeView(false);
+				setIsFromOAuth(false);
 				if (!isStartingIndexing && !isSaving && !isDisconnecting && !isCreatingConnector) {
 					setIndexingConfig(null);
 					setIndexingConnector(null);
@@ -1653,7 +1307,10 @@ export const useConnectorDialog = () => {
 					setConnectorConfig(null);
 					setConnectingConnectorType(null);
 					setViewingAccountsType(null);
+					setViewingMCPList(false);
 					setCameFromAccountsList(null);
+					setCameFromMCPList(false);
+					setConnectCameFromMCPList(false);
 					setStartDate(undefined);
 					setEndDate(undefined);
 					setPeriodicEnabled(false);
@@ -1662,14 +1319,9 @@ export const useConnectorDialog = () => {
 				}
 			}
 		},
-		[activeTab, isStartingIndexing, isDisconnecting, isSaving, isCreatingConnector, setIsOpen]
+		[isStartingIndexing, isDisconnecting, isSaving, isCreatingConnector, setIsOpen]
 	);
 
-	// Handle tab change — only update React state.
-	// Avoid window.history.replaceState here: Next.js intercepts it, triggers a
-	// searchParams update/transition, and the resulting concurrent re-render can
-	// cause Radix Dialog's DismissableLayer to detect a transient focus-outside
-	// event, which fires onOpenChange(false) and closes the dialog.
 	const handleTabChange = useCallback((value: string) => {
 		setActiveTab(value);
 	}, []);
@@ -1704,6 +1356,8 @@ export const useConnectorDialog = () => {
 		allConnectors,
 		viewingAccountsType,
 		viewingMCPList,
+		isYouTubeView,
+		isFromOAuth,
 
 		// Setters
 		setSearchQuery,

surfsense_web/components/assistant-ui/connector-popup/hooks/use-indexing-connectors.ts

@@ -48,13 +48,13 @@ function isTaskTimedOut(startedAt: string | null | undefined): boolean {
  *
  * This provides a better UX than polling by:
  * 1. Setting indexing state immediately when user triggers indexing (optimistic)
- * 2. Detecting in_progress notifications from Electric SQL to restore state after remounts
+ * 2. Detecting in_progress notifications to restore state after remounts
  * 3. Clearing indexing state when notifications become completed or failed
- * 4. Clearing indexing state when Electric SQL detects last_indexed_at changed
+ * 4. Clearing indexing state when real-time sync detects last_indexed_at changed
  * 5. Detecting stale/stuck tasks that haven't updated in 15+ minutes
  * 6. Detecting hard timeout (8h) - tasks that definitely cannot still be running
  *
- * The actual `last_indexed_at` value comes from Electric SQL/PGlite, not local state.
+ * The actual `last_indexed_at` value comes from real-time sync, not local state.
  */
 export function useIndexingConnectors(
 	connectors: SearchSourceConnector[],
@@ -66,7 +66,7 @@ export function useIndexingConnectors(
 	// Track previous last_indexed_at values to detect changes
 	const previousLastIndexedAtRef = useRef<Map<number, string | null>>(new Map());
 
-	// Detect when last_indexed_at changes (indexing completed) via Electric SQL
+	// Detect when last_indexed_at changes (indexing completed) via real-time sync
 	useEffect(() => {
 		const previousValues = previousLastIndexedAtRef.current;
 

surfsense_web/components/assistant-ui/connector-popup/index.ts

@@ -12,19 +12,16 @@ export type { IndexingConfigState } from "./constants/connector-constants";
 // Constants and types
 export { CRAWLERS, OAUTH_CONNECTORS, OTHER_CONNECTORS } from "./constants/connector-constants";
 export type {
-	ConnectorPopupQueryParams,
 	DateRange,
 	FrequencyMinutes,
 	OAuthAuthResponse,
 } from "./constants/connector-popup.schemas";
 // Schemas and validation
 export {
-	connectorPopupQueryParamsSchema,
 	dateRangeSchema,
 	frequencyMinutesSchema,
 	indexingConfigStateSchema,
 	oauthAuthResponseSchema,
-	parseConnectorPopupQueryParams,
 	parseOAuthAuthResponse,
 	validateIndexingConfigState,
 } from "./constants/connector-popup.schemas";

surfsense_web/components/assistant-ui/connector-popup/utils/connector-document-mapping.ts

@@ -31,10 +31,10 @@ export const CONNECTOR_TO_DOCUMENT_TYPE: Record<string, string> = {
 	// Special mappings (connector type differs from document type)
 	GOOGLE_DRIVE_CONNECTOR: "GOOGLE_DRIVE_FILE",
 	WEBCRAWLER_CONNECTOR: "CRAWLED_URL",
-	// Composio connectors map to their own document types
-	COMPOSIO_GOOGLE_DRIVE_CONNECTOR: "COMPOSIO_GOOGLE_DRIVE_CONNECTOR",
-	COMPOSIO_GMAIL_CONNECTOR: "COMPOSIO_GMAIL_CONNECTOR",
-	COMPOSIO_GOOGLE_CALENDAR_CONNECTOR: "COMPOSIO_GOOGLE_CALENDAR_CONNECTOR",
+	// Composio connectors map to unified Google document types
+	COMPOSIO_GOOGLE_DRIVE_CONNECTOR: "GOOGLE_DRIVE_FILE",
+	COMPOSIO_GMAIL_CONNECTOR: "GOOGLE_GMAIL_CONNECTOR",
+	COMPOSIO_GOOGLE_CALENDAR_CONNECTOR: "GOOGLE_CALENDAR_CONNECTOR",
 };
 
 /**

surfsense_web/components/assistant-ui/connector-popup/utils/mcp-config-validator.ts

@@ -33,6 +33,8 @@ import { z } from "zod";
 import type { MCPServerConfig, MCPToolDefinition } from "@/contracts/types/mcp.types";
 import { connectorsApiService } from "@/lib/apis/connectors-api.service";
 
+const IS_DEV = process.env.NODE_ENV === "development";
+
 /**
  * Zod schema for MCP server configuration
  * Supports both stdio (local process) and HTTP (remote server) transports
@@ -102,11 +104,11 @@ export const parseMCPConfig = (configJson: string): MCPConfigValidationResult =>
 	// Check cache first
 	const cached = configCache.get(configJson);
 	if (cached && Date.now() - cached.timestamp < CACHE_TTL) {
-		console.log("[MCP Validator] ✅ Using cached config");
+		if (IS_DEV) console.log("[MCP Validator] ✅ Using cached config");
 		return { config: cached.config, error: null };
 	}
 
-	console.log("[MCP Validator] 🔍 Parsing new config...");
+	if (IS_DEV) console.log("[MCP Validator] 🔍 Parsing new config...");
 
 	// Clean up expired cache entries periodically
 	if (configCache.size > 100) {
@@ -176,7 +178,7 @@ export const parseMCPConfig = (configJson: string): MCPConfigValidationResult =>
 			timestamp: Date.now(),
 		});
 
-		console.log("[MCP Validator] ✅ Config parsed successfully:", config);
+		if (IS_DEV) console.log("[MCP Validator] ✅ Config parsed successfully:", config);
 
 		return {
 			config,

surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx

@@ -1,17 +1,34 @@
 "use client";
 
-import { ArrowLeft, Plus, Server } from "lucide-react";
-import type { FC } from "react";
+import { useAtomValue } from "jotai";
+import { ArrowLeft, Plus, RefreshCw, Server } from "lucide-react";
+import { type FC, useCallback, useState } from "react";
+import { toast } from "sonner";
+import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
 import { EnumConnectorName } from "@/contracts/enums/connector";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import type { SearchSourceConnector } from "@/contracts/types/connector.types";
+import { authenticatedFetch } from "@/lib/auth-utils";
 import { formatRelativeDate } from "@/lib/format-date";
 import { cn } from "@/lib/utils";
 import { useConnectorStatus } from "../hooks/use-connector-status";
 import { getConnectorDisplayName } from "../tabs/all-connectors-tab";
 
+const REAUTH_ENDPOINTS: Partial<Record<string, string>> = {
+	[EnumConnectorName.LINEAR_CONNECTOR]: "/api/v1/auth/linear/connector/reauth",
+	[EnumConnectorName.NOTION_CONNECTOR]: "/api/v1/auth/notion/connector/reauth",
+	[EnumConnectorName.GOOGLE_DRIVE_CONNECTOR]: "/api/v1/auth/google/drive/connector/reauth",
+	[EnumConnectorName.GOOGLE_GMAIL_CONNECTOR]: "/api/v1/auth/google/gmail/connector/reauth",
+	[EnumConnectorName.GOOGLE_CALENDAR_CONNECTOR]: "/api/v1/auth/google/calendar/connector/reauth",
+	[EnumConnectorName.COMPOSIO_GOOGLE_DRIVE_CONNECTOR]: "/api/v1/auth/composio/connector/reauth",
+	[EnumConnectorName.COMPOSIO_GMAIL_CONNECTOR]: "/api/v1/auth/composio/connector/reauth",
+	[EnumConnectorName.COMPOSIO_GOOGLE_CALENDAR_CONNECTOR]: "/api/v1/auth/composio/connector/reauth",
+	[EnumConnectorName.JIRA_CONNECTOR]: "/api/v1/auth/jira/connector/reauth",
+	[EnumConnectorName.CONFLUENCE_CONNECTOR]: "/api/v1/auth/confluence/connector/reauth",
+};
+
 interface ConnectorAccountsListViewProps {
 	connectorType: string;
 	connectorTitle: string;
@@ -43,12 +60,49 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 	isConnecting = false,
 	addButtonText,
 }) => {
+	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
+	const [reauthingId, setReauthingId] = useState<number | null>(null);
+
 	// Get connector status
 	const { isConnectorEnabled, getConnectorStatusMessage } = useConnectorStatus();
 
 	const isEnabled = isConnectorEnabled(connectorType);
 	const statusMessage = getConnectorStatusMessage(connectorType);
 
+	const reauthEndpoint = REAUTH_ENDPOINTS[connectorType];
+
+	const handleReauth = useCallback(
+		async (connectorId: number) => {
+			if (!searchSpaceId || !reauthEndpoint) return;
+			setReauthingId(connectorId);
+			try {
+				const backendUrl = process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL || "http://localhost:8000";
+				const url = new URL(`${backendUrl}${reauthEndpoint}`);
+				url.searchParams.set("connector_id", String(connectorId));
+				url.searchParams.set("space_id", String(searchSpaceId));
+				url.searchParams.set("return_url", window.location.pathname);
+				const response = await authenticatedFetch(url.toString());
+				if (!response.ok) {
+					const data = await response.json().catch(() => ({}));
+					toast.error(data.detail ?? "Failed to initiate re-authentication.");
+					return;
+				}
+				const data = await response.json();
+				if (data.auth_url) {
+					window.location.href = data.auth_url;
+				} else if (data.success) {
+					toast.success(data.message ?? "Authentication refreshed successfully.");
+					window.location.reload();
+				}
+			} catch {
+				toast.error("Failed to initiate re-authentication.");
+			} finally {
+				setReauthingId(null);
+			}
+		},
+		[searchSpaceId, reauthEndpoint]
+	);
+
 	// Filter connectors to only show those of this type
 	const typeConnectors = connectors.filter((c) => c.connector_type === connectorType);
 
@@ -149,6 +203,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 					<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
 						{typeConnectors.map((connector) => {
 							const isIndexing = indexingConnectorIds.has(connector.id);
+							const isAuthExpired = !!reauthEndpoint && connector.config?.auth_expired === true;
 
 							return (
 								<div
@@ -189,14 +244,28 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 											</p>
 										)}
 									</div>
-									<Button
-										variant="secondary"
-										size="sm"
-										className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80 shrink-0"
-										onClick={() => onManage(connector)}
-									>
-										Manage
-									</Button>
+									{isAuthExpired ? (
+										<Button
+											size="sm"
+											className="h-8 text-[11px] px-3 rounded-lg font-medium bg-amber-600 hover:bg-amber-700 text-white border-0 shadow-xs shrink-0"
+											onClick={() => handleReauth(connector.id)}
+											disabled={reauthingId === connector.id}
+										>
+											<RefreshCw
+												className={cn("size-3.5", reauthingId === connector.id && "animate-spin")}
+											/>
+											Re-authenticate
+										</Button>
+									) : (
+										<Button
+											variant="secondary"
+											size="sm"
+											className="h-8 text-[11px] px-3 rounded-lg font-medium bg-white text-slate-700 hover:bg-slate-50 border-0 shadow-xs dark:bg-secondary dark:text-secondary-foreground dark:hover:bg-secondary/80 shrink-0"
+											onClick={() => onManage(connector)}
+										>
+											Manage
+										</Button>
+									)}
 								</div>
 							);
 						})}

surfsense_web/components/assistant-ui/document-upload-popup.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { useAtomValue } from "jotai";
-import { AlertTriangle, Settings, Upload } from "lucide-react";
-import Link from "next/link";
+import { useAtomValue, useSetAtom } from "jotai";
+import { AlertTriangle, Settings } from "lucide-react";
 import {
 	createContext,
 	type FC,
@@ -17,6 +16,7 @@ import {
 	llmPreferencesAtom,
 } from "@/atoms/new-llm-config/new-llm-config-query.atoms";
 import { activeSearchSpaceIdAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
@@ -91,6 +91,7 @@ const DocumentUploadPopupContent: FC<{
 	onOpenChange: (open: boolean) => void;
 }> = ({ isOpen, onOpenChange }) => {
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
+	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 	const { data: preferences = {}, isFetching: preferencesLoading } =
 		useAtomValue(llmPreferencesAtom);
 	const { data: globalConfigs = [], isFetching: globalConfigsLoading } =
@@ -157,11 +158,19 @@ const DocumentUploadPopupContent: FC<{
 											? "Auto mode is selected but no global LLM configurations are available. Please configure a custom LLM in Settings to process and summarize your uploaded documents."
 											: "You need to configure a Document Summary LLM before uploading files. This LLM is used to process and summarize your uploaded documents."}
 									</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
+										size="sm"
+										variant="outline"
+										onClick={() => {
+											onOpenChange(false);
+											setSearchSpaceSettingsDialog({
+												open: true,
+												initialTab: "models",
+											});
+										}}
+									>
+										<Settings className="mr-2 h-4 w-4" />
+										Go to Settings
 									</Button>
 								</AlertDescription>
 							</Alert>

surfsense_web/components/assistant-ui/thinking-steps.tsx

@@ -30,10 +30,11 @@ export const ThinkingStepsDisplay: FC<{ steps: ThinkingStep[]; isThreadRunning?:
 		[isThreadRunning]
 	);
 
-	// Calculate summary info
-	const completedSteps = steps.filter((s) => getEffectiveStatus(s) === "completed").length;
 	const inProgressStep = steps.find((s) => getEffectiveStatus(s) === "in_progress");
-	const allCompleted = completedSteps === steps.length && steps.length > 0 && !isThreadRunning;
+	const allCompleted =
+		steps.length > 0 &&
+		!isThreadRunning &&
+		steps.every((s) => getEffectiveStatus(s) === "completed");
 	const isProcessing = isThreadRunning && !allCompleted;
 
 	// Auto-collapse when all tasks are completed
@@ -45,18 +46,17 @@ export const ThinkingStepsDisplay: FC<{ steps: ThinkingStep[]; isThreadRunning?:
 
 	if (steps.length === 0) return null;
 
-	// Generate header text
 	const getHeaderText = () => {
 		if (allCompleted) {
-			return `Reviewed ${completedSteps} ${completedSteps === 1 ? "step" : "steps"}`;
+			return "Reviewed";
 		}
 		if (inProgressStep) {
 			return inProgressStep.title;
 		}
 		if (isProcessing) {
-			return `Processing ${completedSteps}/${steps.length} steps`;
+			return "Processing";
 		}
-		return `Reviewed ${completedSteps} ${completedSteps === 1 ? "step" : "steps"}`;
+		return "Reviewed";
 	};
 
 	return (
@@ -129,11 +129,7 @@ export const ThinkingStepsDisplay: FC<{ steps: ThinkingStep[]; isThreadRunning?:
 													effectiveStatus === "pending" && "text-muted-foreground/60"
 												)}
 											>
-												{effectiveStatus === "in_progress" ? (
-													<TextShimmerLoader text={step.title} size="sm" />
-												) : (
-													step.title
-												)}
+												{step.title}
 											</div>
 
 											{/* Step items (sub-content) */}

surfsense_web/components/assistant-ui/thread-scroll-to-bottom.tsx

@@ -9,7 +9,7 @@ export const ThreadScrollToBottom: FC = () => {
 			<TooltipIconButton
 				tooltip="Scroll to bottom"
 				variant="outline"
-				className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent"
+				className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full p-4 disabled:invisible dark:bg-main-panel dark:hover:bg-accent"
 			>
 				<ArrowDownIcon />
 			</TooltipIconButton>

surfsense_web/components/assistant-ui/thread.tsx

@@ -19,21 +19,24 @@ import {
 	ChevronRightIcon,
 	CopyIcon,
 	DownloadIcon,
+	Globe,
 	Plus,
 	RefreshCwIcon,
 	Settings2,
 	SquareIcon,
 	Unplug,
 	Upload,
+	Wrench,
 	X,
 } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import Image from "next/image";
 import { useParams } from "next/navigation";
 import { type FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
 	agentToolsAtom,
 	disabledToolsAtom,
-	enabledToolCountAtom,
 	hydrateDisabledToolsAtom,
 	toggleToolAtom,
 } from "@/atoms/agent-tools/agent-tools.atoms";
@@ -87,20 +90,25 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { Switch } from "@/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import {
+	CONNECTOR_ICON_TO_TYPES,
+	CONNECTOR_TOOL_ICON_PATHS,
+	getToolIcon,
+} from "@/contracts/enums/toolIcons";
 import type { Document } from "@/contracts/types/document.types";
 import { useBatchCommentsPreload } from "@/hooks/use-comments";
-import { useCommentsElectric } from "@/hooks/use-comments-electric";
+import { useCommentsSync } from "@/hooks/use-comments-sync";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { cn } from "@/lib/utils";
 
 /** Placeholder texts that cycle in new chats when input is empty */
 const CYCLING_PLACEHOLDERS = [
-	"Ask SurfSense anything or @mention docs.",
-	"Generate a podcast from my vacation ideas in Notion.",
-	"Sum up last week's meeting notes from Drive in a bulleted list.",
-	"Give me a brief overview of the most urgent tickets in Jira and Linear.",
+	"Ask SurfSense anything or @mention docs",
+	"Generate a podcast from my vacation ideas in Notion",
+	"Sum up last week's meeting notes from Drive in a bulleted list",
+	"Give me a brief overview of the most urgent tickets in Jira and Linear",
 	"Briefly, what are today's top ten important emails and calendar events?",
-	"Check if this week's Slack messages reference any GitHub issues.",
+	"Check if this week's Slack messages reference any GitHub issues",
 ];
 
 interface ThreadProps {
@@ -118,7 +126,7 @@ export const Thread: FC<ThreadProps> = ({ messageThinkingSteps = new Map() }) =>
 const ThreadContent: FC = () => {
 	return (
 		<ThreadPrimitive.Root
-			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-background"
+			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-main-panel"
 			style={{
 				["--thread-max-width" as string]: "44rem",
 			}}
@@ -140,7 +148,7 @@ const ThreadContent: FC = () => {
 				/>
 
 				<ThreadPrimitive.ViewportFooter
-					className="aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-background pb-4 md:pb-6"
+					className="aui-thread-viewport-footer sticky bottom-0 z-10 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-3xl bg-main-panel pb-4 md:pb-6"
 					style={{ paddingBottom: "max(1rem, env(safe-area-inset-bottom))" }}
 				>
 					<ThreadScrollToBottom />
@@ -161,7 +169,7 @@ const ThreadScrollToBottom: FC = () => {
 			<TooltipIconButton
 				tooltip="Scroll to bottom"
 				variant="outline"
-				className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full p-4 disabled:invisible dark:bg-background dark:hover:bg-accent"
+				className="aui-thread-scroll-to-bottom -top-12 absolute z-10 self-center rounded-full p-4 disabled:invisible dark:bg-main-panel dark:hover:bg-accent"
 			>
 				<ArrowDownIcon />
 			</TooltipIconButton>
@@ -232,7 +240,9 @@ const ThreadWelcome: FC = () => {
 		<div className="aui-thread-welcome-root mx-auto flex w-full max-w-(--thread-max-width) grow flex-col items-center px-4 relative">
 			{/* Greeting positioned above the composer */}
 			<div className="aui-thread-welcome-message absolute bottom-[calc(50%+5rem)] left-0 right-0 flex flex-col items-center text-center">
-				<h1 className="aui-thread-welcome-message-inner text-3xl md:text-5xl">{greeting}</h1>
+				<h1 className="aui-thread-welcome-message-inner text-3xl md:text-5xl select-none">
+					{greeting}
+				</h1>
 			</div>
 			{/* Composer - top edge fixed, expands downward only */}
 			<div className="w-full flex items-start justify-center absolute top-[calc(50%-3.5rem)] left-0 right-0">
@@ -252,7 +262,7 @@ const BANNER_CONNECTORS = [
 
 const BANNER_DISMISSED_KEY = "surfsense-connect-tools-banner-dismissed";
 
-const ConnectToolsBanner: FC = () => {
+const ConnectToolsBanner: FC<{ isThreadEmpty: boolean }> = ({ isThreadEmpty }) => {
 	const { data: connectors } = useAtomValue(connectorsAtom);
 	const setConnectorDialogOpen = useSetAtom(connectorDialogOpenAtom);
 	const [dismissed, setDismissed] = useState(() => {
@@ -262,7 +272,7 @@ const ConnectToolsBanner: FC = () => {
 
 	const hasConnectors = (connectors?.length ?? 0) > 0;
 
-	if (dismissed || hasConnectors) return null;
+	if (dismissed || hasConnectors || !isThreadEmpty) return null;
 
 	const handleDismiss = (e: React.MouseEvent) => {
 		e.stopPropagation();
@@ -271,32 +281,38 @@ const ConnectToolsBanner: FC = () => {
 	};
 
 	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>
+		<div className="border-t border-border/50">
+			<div className="flex w-full items-center gap-2.5 px-4 py-2.5">
+				<button
+					type="button"
+					className="flex flex-1 items-center gap-2.5 text-left cursor-pointer"
+					onClick={() => setConnectorDialogOpen(true)}
+				>
+					<Unplug className="size-4 text-muted-foreground shrink-0" />
+					<span className="text-[13px] text-muted-foreground/80 flex-1">Connect your tools</span>
+					<AvatarGroup className="shrink-0">
+						{BANNER_CONNECTORS.map(({ type }, 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>
+				</button>
 				<button
 					type="button"
 					onClick={handleDismiss}
-					className="shrink-0 ml-0.5 p-0.5 text-muted-foreground/40 hover:text-foreground transition-colors"
+					className="shrink-0 ml-0.5 p-1.5 -mr-1 text-muted-foreground/40 hover:text-foreground transition-colors cursor-pointer"
 					aria-label="Dismiss"
 				>
-					<X className="size-3.5" />
+					<X className="size-3.5 text-muted-foreground" />
 				</button>
-			</button>
+			</div>
 		</div>
 	);
 };
@@ -365,8 +381,8 @@ const Composer: FC = () => {
 	const respondingToUserId = sessionState?.respondingToUserId ?? null;
 	const isBlockedByOtherUser = isAiResponding && respondingToUserId !== currentUser?.id;
 
-	// Sync comments for the entire thread via Electric SQL (one subscription per thread)
-	useCommentsElectric(threadId);
+	// Sync comments for the entire thread via Zero (one subscription per thread)
+	useCommentsSync(threadId);
 
 	// Batch-prefetch comments for all assistant messages so individual useComments
 	// hooks never fire their own network requests (eliminates N+1 API calls).
@@ -561,7 +577,7 @@ const Composer: FC = () => {
 					)}
 				<ComposerAction isBlockedByOtherUser={isBlockedByOtherUser} />
 				<ConnectorIndicator showTrigger={false} />
-				<ConnectToolsBanner />
+				<ConnectToolsBanner isThreadEmpty={isThreadEmpty} />
 			</div>
 		</ComposerPrimitive.Root>
 	);
@@ -599,8 +615,85 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 	const { data: agentTools } = useAtomValue(agentToolsAtom);
 	const disabledTools = useAtomValue(disabledToolsAtom);
 	const toggleTool = useSetAtom(toggleToolAtom);
+	const setDisabledTools = useSetAtom(disabledToolsAtom);
 	const hydrateDisabled = useSetAtom(hydrateDisabledToolsAtom);
-	const enabledCount = useAtomValue(enabledToolCountAtom);
+
+	const { data: connectors } = useAtomValue(connectorsAtom);
+	const connectedTypes = useMemo(
+		() => new Set<string>((connectors ?? []).map((c) => c.connector_type)),
+		[connectors]
+	);
+
+	const toggleToolGroup = useCallback(
+		(toolNames: string[]) => {
+			const allDisabled = toolNames.every((name) => disabledTools.includes(name));
+			if (allDisabled) {
+				setDisabledTools((prev) => prev.filter((t) => !toolNames.includes(t)));
+			} else {
+				setDisabledTools((prev) => [...new Set([...prev, ...toolNames])]);
+			}
+		},
+		[disabledTools, setDisabledTools]
+	);
+
+	const hasWebSearchTool = agentTools?.some((t) => t.name === "web_search") ?? false;
+	const isWebSearchEnabled = hasWebSearchTool && !disabledTools.includes("web_search");
+	const filteredTools = useMemo(
+		() => agentTools?.filter((t) => t.name !== "web_search"),
+		[agentTools]
+	);
+	const groupedTools = useMemo(() => {
+		if (!filteredTools) return [];
+		const toolsByName = new Map(filteredTools.map((t) => [t.name, t]));
+		const result: { label: string; tools: typeof filteredTools; connectorIcon?: string }[] = [];
+		const placed = new Set<string>();
+
+		for (const group of TOOL_GROUPS) {
+			if (group.connectorIcon) {
+				const requiredTypes = CONNECTOR_ICON_TO_TYPES[group.connectorIcon];
+				const isConnected = requiredTypes?.some((t) => connectedTypes.has(t));
+				if (!isConnected) {
+					for (const name of group.tools) placed.add(name);
+					continue;
+				}
+			}
+
+			const matched = group.tools.flatMap((name) => {
+				const tool = toolsByName.get(name);
+				if (!tool) return [];
+				placed.add(name);
+				return [tool];
+			});
+			if (matched.length > 0) {
+				result.push({ label: group.label, tools: matched, connectorIcon: group.connectorIcon });
+			}
+		}
+
+		const ungrouped = filteredTools.filter((t) => !placed.has(t.name));
+		if (ungrouped.length > 0) {
+			result.push({ label: "Other", tools: ungrouped });
+		}
+
+		return result;
+	}, [filteredTools, connectedTypes]);
+
+	const { visibleTotal, visibleEnabled } = useMemo(() => {
+		let total = 0;
+		let enabled = 0;
+		for (const group of groupedTools) {
+			if (group.connectorIcon) {
+				total += 1;
+				const allDisabled = group.tools.every((t) => disabledTools.includes(t.name));
+				if (!allDisabled) enabled += 1;
+			} else {
+				for (const tool of group.tools) {
+					total += 1;
+					if (!disabledTools.includes(tool.name)) enabled += 1;
+				}
+			}
+		}
+		return { visibleTotal: total, visibleEnabled: enabled };
+	}, [groupedTools, disabledTools]);
 
 	useEffect(() => {
 		hydrateDisabled();
@@ -636,7 +729,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 									<Plus className="size-4" />
 								</Button>
 							</DropdownMenuTrigger>
-							<DropdownMenuContent side="top" align="start" sideOffset={8}>
+							<DropdownMenuContent side="bottom" align="start" sideOffset={8}>
 								<DropdownMenuItem onSelect={() => setToolsPopoverOpen(true)}>
 									<Settings2 className="size-4" />
 									Manage Tools
@@ -653,29 +746,82 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 								<div className="flex items-center justify-between px-4 py-2">
 									<DrawerTitle className="text-sm font-medium">Agent Tools</DrawerTitle>
 									<span className="text-xs text-muted-foreground">
-										{enabledCount}/{agentTools?.length ?? 0} enabled
+										{visibleEnabled}/{visibleTotal} enabled
 									</span>
 								</div>
 								<div className="overflow-y-auto pb-6" onScroll={handleToolsScroll}>
-									{agentTools?.map((tool) => {
-										const isDisabled = disabledTools.includes(tool.name);
-										return (
-											<div
-												key={tool.name}
-												className="flex w-full items-center gap-3 px-4 py-2 hover:bg-muted-foreground/10 transition-colors"
-											>
-												<span className="flex-1 min-w-0 text-sm font-medium truncate">
-													{formatToolName(tool.name)}
-												</span>
-												<Switch
-													checked={!isDisabled}
-													onCheckedChange={() => toggleTool(tool.name)}
-													className="shrink-0"
-												/>
+									{groupedTools
+										.filter((g) => !g.connectorIcon)
+										.map((group) => (
+											<div key={group.label}>
+												<div className="px-4 pt-3 pb-1 text-xs text-muted-foreground/80 font-medium select-none">
+													{group.label}
+												</div>
+												{group.tools.map((tool) => {
+													const isDisabled = disabledTools.includes(tool.name);
+													const ToolIcon = getToolIcon(tool.name);
+													return (
+														<div
+															key={tool.name}
+															className="flex w-full items-center gap-3 px-4 py-2 hover:bg-muted-foreground/10 transition-colors"
+														>
+															<ToolIcon className="size-4 shrink-0 text-muted-foreground" />
+															<span className="flex-1 min-w-0 text-sm font-medium truncate">
+																{formatToolName(tool.name)}
+															</span>
+															<Switch
+																checked={!isDisabled}
+																onCheckedChange={() => toggleTool(tool.name)}
+																className="shrink-0"
+															/>
+														</div>
+													);
+												})}
 											</div>
-										);
-									})}
-									{!agentTools?.length && (
+										))}
+									{groupedTools.some((g) => g.connectorIcon) && (
+										<div>
+											<div className="px-4 pt-3 pb-1 text-xs text-muted-foreground/80 font-medium select-none">
+												Connector Actions
+											</div>
+											{groupedTools
+												.filter((g) => g.connectorIcon)
+												.map((group) => {
+													const iconKey = group.connectorIcon ?? "";
+													const iconInfo = CONNECTOR_TOOL_ICON_PATHS[iconKey];
+													const toolNames = group.tools.map((t) => t.name);
+													const allDisabled = toolNames.every((n) => disabledTools.includes(n));
+													return (
+														<div
+															key={group.label}
+															className="flex w-full items-center gap-3 px-4 py-2 hover:bg-muted-foreground/10 transition-colors"
+														>
+															{iconInfo ? (
+																<Image
+																	src={iconInfo.src}
+																	alt={iconInfo.alt}
+																	width={18}
+																	height={18}
+																	className="size-[18px] shrink-0 select-none pointer-events-none"
+																	draggable={false}
+																/>
+															) : (
+																<Wrench className="size-4 shrink-0 text-muted-foreground" />
+															)}
+															<span className="flex-1 min-w-0 text-sm font-medium truncate">
+																{group.label}
+															</span>
+															<Switch
+																checked={!allDisabled}
+																onCheckedChange={() => toggleToolGroup(toolNames)}
+																className="shrink-0"
+															/>
+														</div>
+													);
+												})}
+										</div>
+									)}
+									{!filteredTools?.length && (
 										<div className="px-4 py-6 text-center text-sm text-muted-foreground">
 											Loading tools...
 										</div>
@@ -699,6 +845,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 							<TooltipIconButton
 								tooltip="Manage tools"
 								side="bottom"
+								disableTooltip={toolsPopoverOpen}
 								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"
@@ -718,7 +865,7 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 							<div className="flex items-center justify-between px-2.5 py-2 sm:px-3 sm:py-2.5 border-b">
 								<span className="text-xs sm:text-sm font-medium">Agent Tools</span>
 								<span className="text-[10px] sm:text-xs text-muted-foreground">
-									{enabledCount}/{agentTools?.length ?? 0} enabled
+									{visibleEnabled}/{visibleTotal} enabled
 								</span>
 							</div>
 							<div
@@ -729,30 +876,90 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 									WebkitMaskImage: `linear-gradient(to bottom, ${toolsScrollPos === "top" ? "black" : "transparent"}, black 16px, black calc(100% - 16px), ${toolsScrollPos === "bottom" ? "black" : "transparent"})`,
 								}}
 							>
-								{agentTools?.map((tool) => {
-									const isDisabled = disabledTools.includes(tool.name);
-									const row = (
-										<div className="flex w-full items-center gap-2 sm:gap-3 px-2.5 sm:px-3 py-1 sm:py-1.5 hover:bg-muted-foreground/10 transition-colors">
-											<span className="flex-1 min-w-0 text-xs sm:text-sm font-medium truncate">
-												{formatToolName(tool.name)}
-											</span>
-											<Switch
-												checked={!isDisabled}
-												onCheckedChange={() => toggleTool(tool.name)}
-												className="shrink-0 scale-[0.6] sm:scale-75"
-											/>
+								{groupedTools
+									.filter((g) => !g.connectorIcon)
+									.map((group) => (
+										<div key={group.label}>
+											<div className="px-2.5 sm:px-3 pt-2 pb-0.5 text-[10px] sm:text-xs text-muted-foreground/80 font-normal select-none">
+												{group.label}
+											</div>
+											{group.tools.map((tool) => {
+												const isDisabled = disabledTools.includes(tool.name);
+												const ToolIcon = getToolIcon(tool.name);
+												const row = (
+													<div className="flex w-full items-center gap-2 sm:gap-3 px-2.5 sm:px-3 py-1 sm:py-1.5 hover:bg-muted-foreground/10 transition-colors">
+														<ToolIcon className="size-3.5 sm:size-4 shrink-0 text-muted-foreground" />
+														<span className="flex-1 min-w-0 text-xs sm:text-sm font-medium truncate">
+															{formatToolName(tool.name)}
+														</span>
+														<Switch
+															checked={!isDisabled}
+															onCheckedChange={() => toggleTool(tool.name)}
+															className="shrink-0 scale-[0.6] sm:scale-75"
+														/>
+													</div>
+												);
+												return (
+													<Tooltip key={tool.name}>
+														<TooltipTrigger asChild>{row}</TooltipTrigger>
+														<TooltipContent side="right" className="max-w-64 text-xs">
+															{tool.description}
+														</TooltipContent>
+													</Tooltip>
+												);
+											})}
 										</div>
-									);
-									return (
-										<Tooltip key={tool.name}>
-											<TooltipTrigger asChild>{row}</TooltipTrigger>
-											<TooltipContent side="right" className="max-w-64 text-xs">
-												{tool.description}
-											</TooltipContent>
-										</Tooltip>
-									);
-								})}
-								{!agentTools?.length && (
+									))}
+								{groupedTools.some((g) => g.connectorIcon) && (
+									<div>
+										<div className="px-2.5 sm:px-3 pt-2 pb-0.5 text-[10px] sm:text-xs text-muted-foreground/80 font-normal select-none">
+											Connector Actions
+										</div>
+										{groupedTools
+											.filter((g) => g.connectorIcon)
+											.map((group) => {
+												const iconKey = group.connectorIcon ?? "";
+												const iconInfo = CONNECTOR_TOOL_ICON_PATHS[iconKey];
+												const toolNames = group.tools.map((t) => t.name);
+												const allDisabled = toolNames.every((n) => disabledTools.includes(n));
+												const groupDef = TOOL_GROUPS.find((g) => g.label === group.label);
+												const row = (
+													<div className="flex w-full items-center gap-2 sm:gap-3 px-2.5 sm:px-3 py-1 sm:py-1.5 hover:bg-muted-foreground/10 transition-colors">
+														{iconInfo ? (
+															<Image
+																src={iconInfo.src}
+																alt={iconInfo.alt}
+																width={16}
+																height={16}
+																className="size-3.5 sm:size-4 shrink-0 select-none pointer-events-none"
+																draggable={false}
+															/>
+														) : (
+															<Wrench className="size-3.5 sm:size-4 shrink-0 text-muted-foreground" />
+														)}
+														<span className="flex-1 min-w-0 text-xs sm:text-sm font-medium truncate">
+															{group.label}
+														</span>
+														<Switch
+															checked={!allDisabled}
+															onCheckedChange={() => toggleToolGroup(toolNames)}
+															className="shrink-0 scale-[0.6] sm:scale-75"
+														/>
+													</div>
+												);
+												return (
+													<Tooltip key={group.label}>
+														<TooltipTrigger asChild>{row}</TooltipTrigger>
+														<TooltipContent side="right" className="max-w-72 text-xs">
+															{groupDef?.tooltip ??
+																group.tools.map((t) => t.description).join(" · ")}
+														</TooltipContent>
+													</Tooltip>
+												);
+											})}
+									</div>
+								)}
+								{!filteredTools?.length && (
 									<div className="px-3 py-4 text-center text-xs text-muted-foreground">
 										Loading tools...
 									</div>
@@ -761,6 +968,46 @@ const ComposerAction: FC<ComposerActionProps> = ({ isBlockedByOtherUser = false
 						</PopoverContent>
 					</Popover>
 				)}
+				{hasWebSearchTool && (
+					<button
+						type="button"
+						onClick={() => toggleTool("web_search")}
+						className={cn(
+							"rounded-full transition-all flex items-center gap-1 px-2 py-1 border h-8 select-none",
+							isWebSearchEnabled
+								? "bg-sky-500/15 border-sky-500/60 text-sky-500"
+								: "bg-transparent border-transparent text-muted-foreground hover:text-foreground"
+						)}
+					>
+						<motion.div
+							animate={{
+								rotate: isWebSearchEnabled ? 360 : 0,
+								scale: isWebSearchEnabled ? 1.1 : 1,
+							}}
+							whileHover={{
+								rotate: isWebSearchEnabled ? 360 : 15,
+								scale: 1.1,
+								transition: { type: "spring", stiffness: 300, damping: 10 },
+							}}
+							transition={{ type: "spring", stiffness: 260, damping: 25 }}
+						>
+							<Globe className="size-4" />
+						</motion.div>
+						<AnimatePresence>
+							{isWebSearchEnabled && (
+								<motion.span
+									initial={{ width: 0, opacity: 0 }}
+									animate={{ width: "auto", opacity: 1 }}
+									exit={{ width: 0, opacity: 0 }}
+									transition={{ duration: 0.2 }}
+									className="text-xs overflow-hidden whitespace-nowrap"
+								>
+									Search
+								</motion.span>
+							)}
+						</AnimatePresence>
+					</button>
+				)}
 				{sidebarDocs.length > 0 && (
 					<button
 						type="button"
@@ -834,6 +1081,76 @@ function formatToolName(name: string): string {
 		.join(" ");
 }
 
+interface ToolGroup {
+	label: string;
+	tools: string[];
+	connectorIcon?: string;
+	tooltip?: string;
+}
+
+const TOOL_GROUPS: ToolGroup[] = [
+	{
+		label: "Research",
+		tools: ["search_knowledge_base", "search_surfsense_docs", "scrape_webpage", "link_preview"],
+	},
+	{
+		label: "Generate",
+		tools: [
+			"generate_podcast",
+			"generate_video_presentation",
+			"generate_report",
+			"generate_image",
+			"display_image",
+		],
+	},
+	{
+		label: "Memory",
+		tools: ["save_memory", "recall_memory"],
+	},
+	{
+		label: "Gmail",
+		tools: ["create_gmail_draft", "update_gmail_draft", "send_gmail_email", "trash_gmail_email"],
+		connectorIcon: "gmail",
+		tooltip: "Create drafts, update drafts, send emails, and trash emails in Gmail.",
+	},
+	{
+		label: "Google Calendar",
+		tools: ["create_calendar_event", "update_calendar_event", "delete_calendar_event"],
+		connectorIcon: "google_calendar",
+		tooltip: "Create, update, and delete events in Google Calendar.",
+	},
+	{
+		label: "Google Drive",
+		tools: ["create_google_drive_file", "delete_google_drive_file"],
+		connectorIcon: "google_drive",
+		tooltip: "Create and delete files in Google Drive.",
+	},
+	{
+		label: "Notion",
+		tools: ["create_notion_page", "update_notion_page", "delete_notion_page"],
+		connectorIcon: "notion",
+		tooltip: "Create, update, and delete pages in Notion.",
+	},
+	{
+		label: "Linear",
+		tools: ["create_linear_issue", "update_linear_issue", "delete_linear_issue"],
+		connectorIcon: "linear",
+		tooltip: "Create, update, and delete issues in Linear.",
+	},
+	{
+		label: "Jira",
+		tools: ["create_jira_issue", "update_jira_issue", "delete_jira_issue"],
+		connectorIcon: "jira",
+		tooltip: "Create, update, and delete issues in Jira.",
+	},
+	{
+		label: "Confluence",
+		tools: ["create_confluence_page", "update_confluence_page", "delete_confluence_page"],
+		connectorIcon: "confluence",
+		tooltip: "Create, update, and delete pages in Confluence.",
+	},
+];
+
 const MessageError: FC = () => {
 	return (
 		<MessagePrimitive.Error>

surfsense_web/components/assistant-ui/tooltip-icon-button.tsx

@@ -4,17 +4,22 @@ import { Slottable } from "@radix-ui/react-slot";
 import { type ComponentPropsWithRef, forwardRef, type ReactNode } from "react";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useMediaQuery } from "@/hooks/use-media-query";
 import { cn } from "@/lib/utils";
 
 export type TooltipIconButtonProps = ComponentPropsWithRef<typeof Button> & {
 	tooltip: ReactNode;
 	side?: "top" | "bottom" | "left" | "right";
+	disableTooltip?: boolean;
 };
 
 export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButtonProps>(
-	({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+	({ children, tooltip, side = "bottom", className, disableTooltip, ...rest }, ref) => {
+		const isTouchDevice = useMediaQuery("(pointer: coarse)");
+		const suppressTooltip = disableTooltip || isTouchDevice;
+
 		return (
-			<Tooltip>
+			<Tooltip open={suppressTooltip ? false : undefined}>
 				<TooltipTrigger asChild>
 					<Button
 						variant="ghost"

surfsense_web/components/connectors/composio-drive-folder-tree.tsx

@@ -12,7 +12,7 @@ import {
 	Image,
 	Presentation,
 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Spinner } from "@/components/ui/spinner";
@@ -48,23 +48,24 @@ interface ComposioDriveFolderTreeProps {
 	onSelectFolders: (folders: SelectedFolder[]) => void;
 	selectedFiles?: SelectedFolder[];
 	onSelectFiles?: (files: SelectedFolder[]) => void;
+	onAuthError?: (message: string) => void;
 }
 
 // Helper to get appropriate icon for file type
 function getFileIcon(mimeType: string, className: string = "h-4 w-4") {
 	if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) {
-		return <FileSpreadsheet className={`${className} text-green-500`} />;
+		return <FileSpreadsheet className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("presentation") || mimeType.includes("powerpoint")) {
-		return <Presentation className={`${className} text-orange-500`} />;
+		return <Presentation className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("document") || mimeType.includes("word") || mimeType.includes("text")) {
-		return <FileText className={`${className} text-gray-500`} />;
+		return <FileText className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("image")) {
-		return <Image className={`${className} text-purple-500`} />;
+		return <Image className={`${className} text-muted-foreground`} />;
 	}
-	return <File className={`${className} text-gray-500`} />;
+	return <File className={`${className} text-muted-foreground`} />;
 }
 
 export function ComposioDriveFolderTree({
@@ -73,13 +74,30 @@ export function ComposioDriveFolderTree({
 	onSelectFolders,
 	selectedFiles = [],
 	onSelectFiles = () => {},
+	onAuthError,
 }: ComposioDriveFolderTreeProps) {
 	const [itemStates, setItemStates] = useState<Map<string, ItemTreeNode>>(new Map());
 
-	const { data: rootData, isLoading: isLoadingRoot } = useComposioDriveFolders({
+	const {
+		data: rootData,
+		isLoading: isLoadingRoot,
+		error: rootError,
+	} = useComposioDriveFolders({
 		connectorId,
 	});
 
+	useEffect(() => {
+		if (rootError && onAuthError) {
+			const msg = rootError instanceof Error ? rootError.message : String(rootError);
+			if (
+				msg.toLowerCase().includes("authentication expired") ||
+				msg.toLowerCase().includes("re-authenticate")
+			) {
+				onAuthError(msg);
+			}
+		}
+	}, [rootError, onAuthError]);
+
 	const rootItems = rootData?.items || [];
 
 	const isFolderSelected = (folderId: string): boolean => {
@@ -280,9 +298,9 @@ export function ComposioDriveFolderTree({
 					<div className="shrink-0">
 						{isFolder ? (
 							isExpanded ? (
-								<FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
+								<FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
 							) : (
-								<FolderClosed className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
+								<FolderClosed className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
 							)
 						) : (
 							getFileIcon(item.mimeType, "h-3 w-3 sm:h-4 sm:w-4")
@@ -331,7 +349,7 @@ export function ComposioDriveFolderTree({
 								onCheckedChange={() => toggleFolderSelection("root", "My Drive")}
 								className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4 border-slate-400/20 dark:border-white/20"
 							/>
-							<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-primary shrink-0" />
+							<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground shrink-0" />
 							<button
 								type="button"
 								className="font-semibold truncate text-xs sm:text-sm cursor-pointer bg-transparent border-0 p-0 text-left"
@@ -352,7 +370,17 @@ export function ComposioDriveFolderTree({
 						{!isLoadingRoot && rootItems.map((item) => renderItem(item, 0))}
 					</div>
 
-					{!isLoadingRoot && rootItems.length === 0 && (
+					{!isLoadingRoot && rootError && (
+						<div className="text-center text-xs sm:text-sm text-amber-600 dark:text-amber-500 py-4 sm:py-8">
+							{(rootError instanceof Error ? rootError.message : String(rootError)).includes(
+								"authentication expired"
+							)
+								? "Google Drive authentication has expired. Please re-authenticate above."
+								: "Failed to load Google Drive contents."}
+						</div>
+					)}
+
+					{!isLoadingRoot && !rootError && rootItems.length === 0 && (
 						<div className="text-center text-xs sm:text-sm text-muted-foreground py-4 sm:py-8">
 							No files or folders found in your Google Drive
 						</div>

surfsense_web/components/connectors/google-drive-folder-tree.tsx

@@ -53,18 +53,18 @@ interface GoogleDriveFolderTreeProps {
 // Helper to get appropriate icon for file type
 function getFileIcon(mimeType: string, className: string = "h-4 w-4") {
 	if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) {
-		return <FileSpreadsheet className={`${className} text-green-500`} />;
+		return <FileSpreadsheet className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("presentation") || mimeType.includes("powerpoint")) {
-		return <Presentation className={`${className} text-orange-500`} />;
+		return <Presentation className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("document") || mimeType.includes("word") || mimeType.includes("text")) {
-		return <FileText className={`${className} text-gray-500`} />;
+		return <FileText className={`${className} text-muted-foreground`} />;
 	}
 	if (mimeType.includes("image")) {
-		return <Image className={`${className} text-purple-500`} />;
+		return <Image className={`${className} text-muted-foreground`} />;
 	}
-	return <File className={`${className} text-gray-500`} />;
+	return <File className={`${className} text-muted-foreground`} />;
 }
 
 export function GoogleDriveFolderTree({
@@ -280,9 +280,9 @@ export function GoogleDriveFolderTree({
 					<div className="shrink-0">
 						{isFolder ? (
 							isExpanded ? (
-								<FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
+								<FolderOpen className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
 							) : (
-								<FolderClosed className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
+								<FolderClosed className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground" />
 							)
 						) : (
 							getFileIcon(item.mimeType, "h-3 w-3 sm:h-4 sm:w-4")
@@ -331,7 +331,7 @@ export function GoogleDriveFolderTree({
 								onCheckedChange={() => toggleFolderSelection("root", "My Drive")}
 								className="shrink-0 h-3.5 w-3.5 sm:h-4 sm:w-4 border-slate-400/20 dark:border-white/20"
 							/>
-							<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-primary shrink-0" />
+							<HardDrive className="h-3 w-3 sm:h-4 sm:w-4 text-muted-foreground shrink-0" />
 							<button
 								type="button"
 								className="font-semibold truncate text-xs sm:text-sm cursor-pointer bg-transparent border-0 p-0 text-left"

surfsense_web/components/editor-panel/editor-panel.tsx

@@ -0,0 +1,295 @@
+"use client";
+
+import { useAtomValue, useSetAtom } from "jotai";
+import { AlertCircle, XIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
+import { closeEditorPanelAtom, editorPanelAtom } from "@/atoms/editor/editor-panel.atom";
+import { PlateEditor } from "@/components/editor/plate-editor";
+import { Button } from "@/components/ui/button";
+import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
+import { useMediaQuery } from "@/hooks/use-media-query";
+import { authenticatedFetch, getBearerToken, redirectToLogin } from "@/lib/auth-utils";
+
+interface EditorContent {
+	document_id: number;
+	title: string;
+	document_type?: string;
+	source_markdown: string;
+}
+
+function EditorPanelSkeleton() {
+	return (
+		<div className="space-y-6 p-6">
+			<div className="h-6 w-3/4 rounded-md bg-muted/60 animate-pulse" />
+			<div className="space-y-2.5">
+				<div className="h-3 w-full rounded-md bg-muted/60 animate-pulse" />
+				<div className="h-3 w-[95%] rounded-md bg-muted/60 animate-pulse [animation-delay:100ms]" />
+				<div className="h-3 w-[88%] rounded-md bg-muted/60 animate-pulse [animation-delay:200ms]" />
+				<div className="h-3 w-[60%] rounded-md bg-muted/60 animate-pulse [animation-delay:300ms]" />
+			</div>
+			<div className="h-5 w-2/5 rounded-md bg-muted/60 animate-pulse [animation-delay:400ms]" />
+			<div className="space-y-2.5">
+				<div className="h-3 w-full rounded-md bg-muted/60 animate-pulse [animation-delay:500ms]" />
+				<div className="h-3 w-[92%] rounded-md bg-muted/60 animate-pulse [animation-delay:600ms]" />
+				<div className="h-3 w-[75%] rounded-md bg-muted/60 animate-pulse [animation-delay:700ms]" />
+			</div>
+		</div>
+	);
+}
+
+export function EditorPanelContent({
+	documentId,
+	searchSpaceId,
+	title,
+	onClose,
+}: {
+	documentId: number;
+	searchSpaceId: number;
+	title: string | null;
+	onClose?: () => void;
+}) {
+	const [editorDoc, setEditorDoc] = useState<EditorContent | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const [saving, setSaving] = useState(false);
+
+	const [editedMarkdown, setEditedMarkdown] = useState<string | null>(null);
+	const markdownRef = useRef<string>("");
+	const initialLoadDone = useRef(false);
+	const changeCountRef = useRef(0);
+	const [displayTitle, setDisplayTitle] = useState(title || "Untitled");
+
+	useEffect(() => {
+		let cancelled = false;
+		setIsLoading(true);
+		setError(null);
+		setEditorDoc(null);
+		setEditedMarkdown(null);
+		initialLoadDone.current = false;
+		changeCountRef.current = 0;
+
+		const fetchContent = async () => {
+			const token = getBearerToken();
+			if (!token) {
+				redirectToLogin();
+				return;
+			}
+
+			try {
+				const response = await authenticatedFetch(
+					`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/editor-content`,
+					{ method: "GET" }
+				);
+
+				if (cancelled) return;
+
+				if (!response.ok) {
+					const errorData = await response
+						.json()
+						.catch(() => ({ detail: "Failed to fetch document" }));
+					throw new Error(errorData.detail || "Failed to fetch document");
+				}
+
+				const data = await response.json();
+
+				if (data.source_markdown === undefined || data.source_markdown === null) {
+					setError(
+						"This document does not have editable content. Please re-upload to enable editing."
+					);
+					setIsLoading(false);
+					return;
+				}
+
+				markdownRef.current = data.source_markdown;
+				setDisplayTitle(data.title || title || "Untitled");
+				setEditorDoc(data);
+				initialLoadDone.current = true;
+			} catch (err) {
+				if (cancelled) return;
+				console.error("Error fetching document:", err);
+				setError(err instanceof Error ? err.message : "Failed to fetch document");
+			} finally {
+				if (!cancelled) setIsLoading(false);
+			}
+		};
+
+		fetchContent();
+		return () => {
+			cancelled = true;
+		};
+	}, [documentId, searchSpaceId, title]);
+
+	const handleMarkdownChange = useCallback((md: string) => {
+		markdownRef.current = md;
+		if (!initialLoadDone.current) return;
+		changeCountRef.current += 1;
+		if (changeCountRef.current <= 1) return;
+		setEditedMarkdown(md);
+	}, []);
+
+	const handleSave = useCallback(async () => {
+		const token = getBearerToken();
+		if (!token) {
+			toast.error("Please login to save");
+			redirectToLogin();
+			return;
+		}
+
+		setSaving(true);
+		try {
+			const response = await authenticatedFetch(
+				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/search-spaces/${searchSpaceId}/documents/${documentId}/save`,
+				{
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					body: JSON.stringify({ source_markdown: markdownRef.current }),
+				}
+			);
+
+			if (!response.ok) {
+				const errorData = await response
+					.json()
+					.catch(() => ({ detail: "Failed to save document" }));
+				throw new Error(errorData.detail || "Failed to save document");
+			}
+
+			setEditorDoc((prev) => (prev ? { ...prev, source_markdown: markdownRef.current } : prev));
+			setEditedMarkdown(null);
+			toast.success("Document saved! Reindexing in background...");
+		} catch (err) {
+			console.error("Error saving document:", err);
+			toast.error(err instanceof Error ? err.message : "Failed to save document");
+		} finally {
+			setSaving(false);
+		}
+	}, [documentId, searchSpaceId]);
+
+	return (
+		<>
+			<div className="flex items-center justify-between px-4 py-2 shrink-0 border-b">
+				<div className="flex-1 min-w-0">
+					<h2 className="text-sm font-semibold truncate">{displayTitle}</h2>
+					{editedMarkdown !== null && (
+						<p className="text-[10px] text-muted-foreground">Unsaved changes</p>
+					)}
+				</div>
+				{onClose && (
+					<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
+						<XIcon className="size-4" />
+						<span className="sr-only">Close editor panel</span>
+					</Button>
+				)}
+			</div>
+
+			<div className="flex-1 overflow-hidden">
+				{isLoading ? (
+					<EditorPanelSkeleton />
+				) : error || !editorDoc ? (
+					<div className="flex flex-1 flex-col items-center justify-center gap-3 p-6 text-center">
+						<AlertCircle className="size-8 text-destructive" />
+						<div>
+							<p className="font-medium text-foreground">Failed to load document</p>
+							<p className="text-sm text-red-500 mt-1">{error || "An unknown error occurred"}</p>
+						</div>
+					</div>
+				) : (
+					<PlateEditor
+						key={documentId}
+						preset="full"
+						markdown={editorDoc.source_markdown}
+						onMarkdownChange={handleMarkdownChange}
+						readOnly={false}
+						placeholder="Start writing..."
+						editorVariant="default"
+						onSave={handleSave}
+						hasUnsavedChanges={editedMarkdown !== null}
+						isSaving={saving}
+						defaultEditing={true}
+						className="[&_[role=toolbar]]:!bg-sidebar"
+					/>
+				)}
+			</div>
+		</>
+	);
+}
+
+function DesktopEditorPanel() {
+	const panelState = useAtomValue(editorPanelAtom);
+	const closePanel = useSetAtom(closeEditorPanelAtom);
+
+	useEffect(() => {
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape") closePanel();
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => document.removeEventListener("keydown", handleKeyDown);
+	}, [closePanel]);
+
+	if (!panelState.isOpen || !panelState.documentId || !panelState.searchSpaceId) return null;
+
+	return (
+		<div className="flex w-[50%] max-w-[700px] min-w-[380px] flex-col border-l bg-sidebar text-sidebar-foreground animate-in slide-in-from-right-4 duration-300 ease-out">
+			<EditorPanelContent
+				documentId={panelState.documentId}
+				searchSpaceId={panelState.searchSpaceId}
+				title={panelState.title}
+				onClose={closePanel}
+			/>
+		</div>
+	);
+}
+
+function MobileEditorDrawer() {
+	const panelState = useAtomValue(editorPanelAtom);
+	const closePanel = useSetAtom(closeEditorPanelAtom);
+
+	if (!panelState.documentId || !panelState.searchSpaceId) return null;
+
+	return (
+		<Drawer
+			open={panelState.isOpen}
+			onOpenChange={(open) => {
+				if (!open) closePanel();
+			}}
+			shouldScaleBackground={false}
+		>
+			<DrawerContent
+				className="h-[95vh] max-h-[95vh] z-80 bg-sidebar overflow-hidden"
+				overlayClassName="z-80"
+			>
+				<DrawerHandle />
+				<DrawerTitle className="sr-only">{panelState.title || "Editor"}</DrawerTitle>
+				<div className="min-h-0 flex-1 flex flex-col overflow-hidden">
+					<EditorPanelContent
+						documentId={panelState.documentId}
+						searchSpaceId={panelState.searchSpaceId}
+						title={panelState.title}
+					/>
+				</div>
+			</DrawerContent>
+		</Drawer>
+	);
+}
+
+export function EditorPanel() {
+	const panelState = useAtomValue(editorPanelAtom);
+	const isDesktop = useMediaQuery("(min-width: 1024px)");
+
+	if (!panelState.isOpen || !panelState.documentId) return null;
+
+	if (isDesktop) {
+		return <DesktopEditorPanel />;
+	}
+
+	return <MobileEditorDrawer />;
+}
+
+export function MobileEditorPanel() {
+	const panelState = useAtomValue(editorPanelAtom);
+	const isDesktop = useMediaQuery("(min-width: 1024px)");
+
+	if (isDesktop || !panelState.isOpen || !panelState.documentId) return null;
+
+	return <MobileEditorDrawer />;
+}

surfsense_web/components/editor/plate-editor.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { MarkdownPlugin, remarkMdx } from "@platejs/markdown";
-import type { AnyPluginConfig } from "platejs";
+import { slateToHtml } from "@slate-serializers/html";
+import type { AnyPluginConfig, Descendant, Value } from "platejs";
 import { createPlatePlugin, Key, Plate, usePlateEditor } from "platejs/react";
 import { useEffect, useMemo, useRef } from "react";
 import remarkGfm from "remark-gfm";
@@ -14,8 +15,12 @@ import { Editor, EditorContainer } from "@/components/ui/editor";
 export interface PlateEditorProps {
 	/** Markdown string to load as initial content */
 	markdown?: string;
+	/** HTML string to load as initial content. Takes precedence over `markdown`. */
+	html?: string;
 	/** Called when the editor content changes, with serialized markdown */
 	onMarkdownChange?: (markdown: string) => void;
+	/** Called when the editor content changes, with serialized HTML. Use with the `html` prop. */
+	onHtmlChange?: (html: string) => void;
 	/**
 	 * Force permanent read-only mode (e.g. public/shared view).
 	 * When true, the editor cannot be toggled to editing mode.
@@ -57,7 +62,9 @@ export interface PlateEditorProps {
 
 export function PlateEditor({
 	markdown,
+	html,
 	onMarkdownChange,
+	onHtmlChange,
 	readOnly = false,
 	placeholder = "Type...",
 	variant = "default",
@@ -71,6 +78,7 @@ export function PlateEditor({
 	extraPlugins = [],
 }: PlateEditorProps) {
 	const lastMarkdownRef = useRef(markdown);
+	const lastHtmlRef = useRef(html);
 
 	// Keep a stable ref to the latest onSave callback so the plugin shortcut
 	// always calls the most recent version without re-creating the editor.
@@ -79,15 +87,13 @@ export function PlateEditor({
 		onSaveRef.current = onSave;
 	}, [onSave]);
 
-	// Stable Plate plugin for ⌘+S / Ctrl+S save shortcut.
-	// Only included when onSave is provided.
 	const SaveShortcutPlugin = useMemo(
 		() =>
 			createPlatePlugin({
 				key: "save-shortcut",
 				shortcuts: {
 					save: {
-						keys: [[Key.Mod, "s"]],
+						keys: [[Key.Mod, Key.Shift, "s"]],
 						handler: () => {
 							onSaveRef.current?.();
 						},
@@ -118,17 +124,28 @@ export function PlateEditor({
 				},
 			}),
 		],
-		// Use markdown deserialization for initial value if provided
-		value: markdown
-			? (editor) =>
-					editor.getApi(MarkdownPlugin).markdown.deserialize(escapeMdxExpressions(markdown))
-			: undefined,
+		value: html
+			? (editor) => editor.api.html.deserialize({ element: html }) as Value
+			: markdown
+				? (editor) =>
+						editor.getApi(MarkdownPlugin).markdown.deserialize(escapeMdxExpressions(markdown))
+				: undefined,
 	});
 
+	// Update editor content when html prop changes externally
+	useEffect(() => {
+		if (html !== undefined && html !== lastHtmlRef.current) {
+			lastHtmlRef.current = html;
+			const newValue = editor.api.html.deserialize({ element: html });
+			editor.tf.reset();
+			editor.tf.setValue(newValue);
+		}
+	}, [html, editor]);
+
 	// Update editor content when markdown prop changes externally
 	// (e.g., version switching in report panel)
 	useEffect(() => {
-		if (markdown !== undefined && markdown !== lastMarkdownRef.current) {
+		if (!html && markdown !== undefined && markdown !== lastMarkdownRef.current) {
 			lastMarkdownRef.current = markdown;
 			const newValue = editor
 				.getApi(MarkdownPlugin)
@@ -136,7 +153,7 @@ export function PlateEditor({
 			editor.tf.reset();
 			editor.tf.setValue(newValue);
 		}
-	}, [markdown, editor]);
+	}, [html, markdown, editor]);
 
 	// When not forced read-only, the user can toggle between editing/viewing.
 	const canToggleMode = !readOnly;
@@ -157,7 +174,10 @@ export function PlateEditor({
 				// (initialized to true via usePlateEditor, toggled via ModeToolbarButton).
 				{...(readOnly ? { readOnly: true } : {})}
 				onChange={({ value }) => {
-					if (onMarkdownChange) {
+					if (onHtmlChange && html) {
+						const serialized = slateToHtml(value as Descendant[]);
+						onHtmlChange(serialized);
+					} else if (onMarkdownChange) {
 						const md = editor.getApi(MarkdownPlugin).markdown.serialize({ value });
 						lastMarkdownRef.current = md;
 						onMarkdownChange(md);

surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx

@@ -0,0 +1,400 @@
+"use client";
+
+import { format } from "date-fns";
+import { TagInput, type Tag as TagType } from "emblor";
+import { useAtomValue, useSetAtom } from "jotai";
+import { CalendarIcon, XIcon } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
+import { closeHitlEditPanelAtom, hitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
+import { PlateEditor } from "@/components/editor/plate-editor";
+import { Button } from "@/components/ui/button";
+import { Calendar } from "@/components/ui/calendar";
+import { Drawer, DrawerContent, DrawerHandle, DrawerTitle } from "@/components/ui/drawer";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
+import { useMediaQuery } from "@/hooks/use-media-query";
+
+function parseEmailsToTags(value: string): TagType[] {
+	if (!value.trim()) return [];
+	return value
+		.split(",")
+		.map((s) => s.trim())
+		.filter(Boolean)
+		.map((email, i) => ({ id: `${Date.now()}-${i}`, text: email }));
+}
+
+function tagsToEmailString(tags: TagType[]): string {
+	return tags.map((t) => t.text).join(", ");
+}
+
+function EmailsTagField({
+	id,
+	value,
+	onChange,
+	placeholder,
+}: {
+	id: string;
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+}) {
+	const [tags, setTags] = useState<TagType[]>(() => parseEmailsToTags(value));
+	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
+	const isInitialMount = useRef(true);
+	const onChangeRef = useRef(onChange);
+	onChangeRef.current = onChange;
+
+	useEffect(() => {
+		if (isInitialMount.current) {
+			isInitialMount.current = false;
+			return;
+		}
+		onChangeRef.current(tagsToEmailString(tags));
+	}, [tags]);
+
+	const handleSetTags = useCallback((newTags: TagType[] | ((prev: TagType[]) => TagType[])) => {
+		setTags((prev) => (typeof newTags === "function" ? newTags(prev) : newTags));
+	}, []);
+
+	const handleAddTag = useCallback(
+		(text: string) => {
+			const trimmed = text.trim();
+			if (!trimmed) return;
+			if (tags.some((tag) => tag.text === trimmed)) return;
+			const newTag: TagType = { id: Date.now().toString(), text: trimmed };
+			setTags((prev) => [...prev, newTag]);
+		},
+		[tags]
+	);
+
+	return (
+		<TagInput
+			id={id}
+			tags={tags}
+			setTags={handleSetTags}
+			placeholder={placeholder ?? "Add email"}
+			onAddTag={handleAddTag}
+			styleClasses={{
+				inlineTagsContainer:
+					"border border-input rounded-md bg-transparent shadow-xs transition-[color,box-shadow] outline-none focus-within:border-ring p-1 gap-1",
+				input:
+					"w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7 text-foreground placeholder:text-muted-foreground bg-transparent text-sm md:text-sm",
+				tag: {
+					body: "h-7 relative bg-accent dark:bg-muted/60 border-0 hover:bg-accent/80 dark:hover:bg-muted rounded-md font-medium text-xs text-foreground/80 ps-2 pe-7 flex",
+					closeButton:
+						"absolute -inset-y-px -end-px p-0 rounded-e-md flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-foreground hover:text-foreground",
+				},
+			}}
+			activeTagIndex={activeTagIndex}
+			setActiveTagIndex={setActiveTagIndex}
+		/>
+	);
+}
+
+function parseDateTimeValue(value: string): { date: Date | undefined; time: string } {
+	if (!value) return { date: undefined, time: "09:00" };
+	try {
+		const d = new Date(value);
+		if (Number.isNaN(d.getTime())) return { date: undefined, time: "09:00" };
+		return {
+			date: d,
+			time: format(d, "HH:mm"),
+		};
+	} catch {
+		return { date: undefined, time: "09:00" };
+	}
+}
+
+function buildLocalDateTimeString(date: Date | undefined, time: string): string {
+	if (!date) return "";
+	const [hours, minutes] = time.split(":").map(Number);
+	const combined = new Date(date);
+	combined.setHours(hours ?? 9, minutes ?? 0, 0, 0);
+	const y = combined.getFullYear();
+	const m = String(combined.getMonth() + 1).padStart(2, "0");
+	const d = String(combined.getDate()).padStart(2, "0");
+	const h = String(combined.getHours()).padStart(2, "0");
+	const min = String(combined.getMinutes()).padStart(2, "0");
+	return `${y}-${m}-${d}T${h}:${min}:00`;
+}
+
+function DateTimePickerField({
+	id,
+	value,
+	onChange,
+}: {
+	id: string;
+	value: string;
+	onChange: (value: string) => void;
+}) {
+	const parsed = useMemo(() => parseDateTimeValue(value), [value]);
+	const [selectedDate, setSelectedDate] = useState<Date | undefined>(parsed.date);
+	const [time, setTime] = useState(parsed.time);
+	const [open, setOpen] = useState(false);
+
+	const handleDateSelect = useCallback(
+		(day: Date | undefined) => {
+			setSelectedDate(day);
+			onChange(buildLocalDateTimeString(day, time));
+			setOpen(false);
+		},
+		[time, onChange]
+	);
+
+	const handleTimeChange = useCallback(
+		(e: React.ChangeEvent<HTMLInputElement>) => {
+			const newTime = e.target.value;
+			setTime(newTime);
+			onChange(buildLocalDateTimeString(selectedDate, newTime));
+		},
+		[selectedDate, onChange]
+	);
+
+	const displayLabel = selectedDate
+		? `${format(selectedDate, "MMM d, yyyy")} at ${time}`
+		: "Pick date & time";
+
+	return (
+		<div className="flex gap-2">
+			<Popover open={open} onOpenChange={setOpen}>
+				<PopoverTrigger asChild>
+					<button
+						id={id}
+						type="button"
+						className="flex-1 flex items-center gap-2 h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring"
+					>
+						<CalendarIcon className="size-3.5 text-muted-foreground shrink-0" />
+						<span className={selectedDate ? "text-foreground" : "text-muted-foreground"}>
+							{displayLabel}
+						</span>
+					</button>
+				</PopoverTrigger>
+				<PopoverContent className="w-auto p-0" align="start">
+					<Calendar
+						mode="single"
+						selected={selectedDate}
+						onSelect={handleDateSelect}
+						defaultMonth={selectedDate}
+					/>
+				</PopoverContent>
+			</Popover>
+			<Input
+				type="time"
+				value={time}
+				onChange={handleTimeChange}
+				className="w-[120px] text-sm shrink-0 pl-1.5 [&::-webkit-calendar-picker-indicator]:order-first [&::-webkit-calendar-picker-indicator]:mr-1"
+			/>
+		</div>
+	);
+}
+
+export function HitlEditPanelContent({
+	title: initialTitle,
+	content: initialContent,
+	contentFormat,
+	extraFields,
+	onSave,
+	onClose,
+	showCloseButton = true,
+}: {
+	title: string;
+	content: string;
+	toolName: string;
+	contentFormat?: "markdown" | "html";
+	extraFields?: ExtraField[];
+	onSave: (title: string, content: string, extraFieldValues?: Record<string, string>) => void;
+	onClose?: () => void;
+	showCloseButton?: boolean;
+}) {
+	const [editedTitle, setEditedTitle] = useState(initialTitle);
+	const contentRef = useRef(initialContent);
+	const [isSaving, setIsSaving] = useState(false);
+	const [extraFieldValues, setExtraFieldValues] = useState<Record<string, string>>(() => {
+		if (!extraFields) return {};
+		const initial: Record<string, string> = {};
+		for (const field of extraFields) {
+			initial[field.key] = field.value;
+		}
+		return initial;
+	});
+
+	const handleContentChange = useCallback((content: string) => {
+		contentRef.current = content;
+	}, []);
+
+	const handleExtraFieldChange = useCallback((key: string, value: string) => {
+		setExtraFieldValues((prev) => ({ ...prev, [key]: value }));
+	}, []);
+
+	const handleSave = useCallback(() => {
+		if (!editedTitle.trim()) return;
+		setIsSaving(true);
+		const extras = extraFields && extraFields.length > 0 ? extraFieldValues : undefined;
+		onSave(editedTitle, contentRef.current, extras);
+		onClose?.();
+	}, [editedTitle, onSave, onClose, extraFields, extraFieldValues]);
+
+	return (
+		<>
+			<div className="flex items-center gap-2 px-4 py-2 shrink-0 border-b">
+				<input
+					value={editedTitle}
+					onChange={(e) => setEditedTitle(e.target.value)}
+					placeholder="Untitled"
+					className="flex-1 min-w-0 bg-transparent text-sm font-semibold text-foreground outline-none placeholder:text-muted-foreground"
+					aria-label="Page title"
+				/>
+				{onClose && showCloseButton && (
+					<Button variant="ghost" size="icon" onClick={onClose} className="size-7 shrink-0">
+						<XIcon className="size-4" />
+						<span className="sr-only">Close panel</span>
+					</Button>
+				)}
+			</div>
+
+			{extraFields && extraFields.length > 0 && (
+				<div className="flex flex-col gap-3 px-4 py-3 border-b">
+					{extraFields.map((field) => (
+						<div key={field.key} className="flex flex-col gap-1.5">
+							<Label
+								htmlFor={`extra-field-${field.key}`}
+								className="text-xs font-medium text-muted-foreground"
+							>
+								{field.label}
+							</Label>
+							{field.type === "emails" ? (
+								<EmailsTagField
+									id={`extra-field-${field.key}`}
+									value={extraFieldValues[field.key] ?? ""}
+									onChange={(v) => handleExtraFieldChange(field.key, v)}
+									placeholder={`Add ${field.label.toLowerCase()}`}
+								/>
+							) : field.type === "datetime-local" ? (
+								<DateTimePickerField
+									id={`extra-field-${field.key}`}
+									value={extraFieldValues[field.key] ?? ""}
+									onChange={(v) => handleExtraFieldChange(field.key, v)}
+								/>
+							) : field.type === "textarea" ? (
+								<Textarea
+									id={`extra-field-${field.key}`}
+									value={extraFieldValues[field.key] ?? ""}
+									onChange={(e) => handleExtraFieldChange(field.key, e.target.value)}
+									className="text-sm min-h-[60px]"
+								/>
+							) : (
+								<Input
+									id={`extra-field-${field.key}`}
+									type={field.type}
+									value={extraFieldValues[field.key] ?? ""}
+									onChange={(e) => handleExtraFieldChange(field.key, e.target.value)}
+									className="text-sm"
+								/>
+							)}
+						</div>
+					))}
+				</div>
+			)}
+
+			<div className="flex-1 overflow-hidden">
+				<PlateEditor
+					{...(contentFormat === "html"
+						? { html: initialContent, onHtmlChange: handleContentChange }
+						: { markdown: initialContent, onMarkdownChange: handleContentChange })}
+					readOnly={false}
+					preset="full"
+					placeholder="Start writing..."
+					editorVariant="default"
+					defaultEditing
+					onSave={handleSave}
+					hasUnsavedChanges
+					isSaving={isSaving}
+					className="[&_[role=toolbar]]:!bg-sidebar"
+				/>
+			</div>
+		</>
+	);
+}
+
+function DesktopHitlEditPanel() {
+	const panelState = useAtomValue(hitlEditPanelAtom);
+	const closePanel = useSetAtom(closeHitlEditPanelAtom);
+
+	if (!panelState.isOpen || !panelState.onSave) return null;
+
+	return (
+		<div className="flex w-[50%] max-w-[700px] min-w-[380px] flex-col border-l bg-sidebar text-sidebar-foreground animate-in slide-in-from-right-4 duration-300 ease-out">
+			<HitlEditPanelContent
+				title={panelState.title}
+				content={panelState.content}
+				toolName={panelState.toolName}
+				contentFormat={panelState.contentFormat}
+				extraFields={panelState.extraFields}
+				onSave={panelState.onSave}
+				onClose={closePanel}
+			/>
+		</div>
+	);
+}
+
+function MobileHitlEditDrawer() {
+	const panelState = useAtomValue(hitlEditPanelAtom);
+	const closePanel = useSetAtom(closeHitlEditPanelAtom);
+
+	if (!panelState.onSave) return null;
+
+	return (
+		<Drawer
+			open={panelState.isOpen}
+			onOpenChange={(open) => {
+				if (!open) closePanel();
+			}}
+			shouldScaleBackground={false}
+		>
+			<DrawerContent
+				className="h-[95vh] max-h-[95vh] z-80 bg-sidebar overflow-hidden"
+				overlayClassName="z-80"
+			>
+				<DrawerHandle />
+				<DrawerTitle className="sr-only">Edit {panelState.toolName}</DrawerTitle>
+				<div className="min-h-0 flex-1 flex flex-col overflow-hidden">
+					<HitlEditPanelContent
+						title={panelState.title}
+						content={panelState.content}
+						toolName={panelState.toolName}
+						contentFormat={panelState.contentFormat}
+						extraFields={panelState.extraFields}
+						onSave={panelState.onSave}
+						onClose={closePanel}
+						showCloseButton={false}
+					/>
+				</div>
+			</DrawerContent>
+		</Drawer>
+	);
+}
+
+export function HitlEditPanel() {
+	const panelState = useAtomValue(hitlEditPanelAtom);
+	const isDesktop = useMediaQuery("(min-width: 1024px)");
+
+	if (!panelState.isOpen) return null;
+
+	if (isDesktop) {
+		return <DesktopHitlEditPanel />;
+	}
+
+	return <MobileHitlEditDrawer />;
+}
+
+export function MobileHitlEditPanel() {
+	const panelState = useAtomValue(hitlEditPanelAtom);
+	const isDesktop = useMediaQuery("(min-width: 1024px)");
+
+	if (isDesktop || !panelState.isOpen) return null;
+
+	return <MobileHitlEditDrawer />;
+}

surfsense_web/components/homepage/github-stars-badge.tsx

@@ -272,16 +272,16 @@ function NavbarGitHubStars({
 			target="_blank"
 			rel="noopener noreferrer"
 			className={cn(
-				"group flex items-center gap-1.5 rounded-full px-3 py-1.5 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors",
+				"group flex items-center gap-1 rounded-lg px-2 py-1 hover:bg-gray-100 dark:hover:bg-neutral-800/50 transition-colors",
 				className
 			)}
 		>
-			<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300 shrink-0" />
+			<IconBrandGithub className="h-5 w-5 text-neutral-700 dark:text-neutral-300 shrink-0" />
 			<AnimatedStarCount
 				value={isLoading ? 10000 : stars}
 				itemSize={ITEM_SIZE}
 				isRolling={isLoading}
-				className="text-sm font-semibold tabular-nums text-neutral-600 dark:text-neutral-400 group-hover:text-neutral-800 dark:group-hover:text-neutral-200 transition-colors"
+				className="text-sm font-semibold tabular-nums text-neutral-700 dark:text-neutral-300 group-hover:text-neutral-900 dark:group-hover:text-neutral-100 transition-colors"
 			/>
 		</a>
 	);

surfsense_web/components/homepage/navbar.tsx

@@ -9,7 +9,12 @@ import { Logo } from "@/components/Logo";
 import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
 import { cn } from "@/lib/utils";
 
-export const Navbar = () => {
+interface NavbarProps {
+	/** Override the scrolled-state background classes (desktop & mobile). */
+	scrolledBgClassName?: string;
+}
+
+export const Navbar = ({ scrolledBgClassName }: NavbarProps = {}) => {
 	const [isScrolled, setIsScrolled] = useState(false);
 
 	const navItems = [
@@ -33,13 +38,21 @@ export const Navbar = () => {
 
 	return (
 		<div className="fixed top-1 left-0 right-0 z-60 w-full select-none">
-			<DesktopNav navItems={navItems} isScrolled={isScrolled} />
-			<MobileNav navItems={navItems} isScrolled={isScrolled} />
+			<DesktopNav
+				navItems={navItems}
+				isScrolled={isScrolled}
+				scrolledBgClassName={scrolledBgClassName}
+			/>
+			<MobileNav
+				navItems={navItems}
+				isScrolled={isScrolled}
+				scrolledBgClassName={scrolledBgClassName}
+			/>
 		</div>
 	);
 };
 
-const DesktopNav = ({ navItems, isScrolled }: any) => {
+const DesktopNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
 	const [hovered, setHovered] = useState<number | null>(null);
 	return (
 		<motion.div
@@ -49,7 +62,8 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
 			className={cn(
 				"mx-auto hidden w-full max-w-7xl flex-row items-center justify-between self-start rounded-full px-4 py-2 lg:flex transition-all duration-300",
 				isScrolled
-					? "bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50"
+					? (scrolledBgClassName ??
+							"bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50")
 					: "bg-transparent border border-transparent"
 			)}
 		>
@@ -104,7 +118,7 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
 	);
 };
 
-const MobileNav = ({ navItems, isScrolled }: any) => {
+const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
 	const [open, setOpen] = useState(false);
 	const navRef = useRef<HTMLDivElement>(null);
 
@@ -133,7 +147,8 @@ const MobileNav = ({ navItems, isScrolled }: any) => {
 			className={cn(
 				"relative mx-auto flex w-full max-w-[calc(100vw-2rem)] flex-col items-center justify-between px-4 py-2 lg:hidden transition-all duration-300",
 				isScrolled
-					? "bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50"
+					? (scrolledBgClassName ??
+							"bg-white/80 backdrop-blur-md border border-white/20 shadow-lg dark:bg-neutral-950/80 dark:border-neutral-800/50")
 					: "bg-transparent border border-transparent"
 			)}
 		>

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -14,7 +14,17 @@ import { statusInboxItemsAtom } from "@/atoms/inbox/status-inbox.atom";
 import { rightPanelCollapsedAtom } from "@/atoms/layout/right-panel.atom";
 import { deleteSearchSpaceMutationAtom } from "@/atoms/search-spaces/search-space-mutation.atoms";
 import { searchSpacesAtom } from "@/atoms/search-spaces/search-space-query.atoms";
+import {
+	morePagesDialogAtom,
+	searchSpaceSettingsDialogAtom,
+	teamDialogAtom,
+	userSettingsDialogAtom,
+} from "@/atoms/settings/settings-dialog.atoms";
 import { currentUserAtom } from "@/atoms/user/user-query.atoms";
+import { MorePagesDialog } from "@/components/settings/more-pages-dialog";
+import { SearchSpaceSettingsDialog } from "@/components/settings/search-space-settings-dialog";
+import { TeamDialog } from "@/components/settings/team-dialog";
+import { UserSettingsDialog } from "@/components/settings/user-settings-dialog";
 import {
 	AlertDialog,
 	AlertDialogAction,
@@ -35,7 +45,7 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import { isPageLimitExceededMetadata } from "@/contracts/types/inbox.types";
+import { Spinner } from "@/components/ui/spinner";
 import { useAnnouncements } from "@/hooks/use-announcements";
 import { useDocumentsProcessing } from "@/hooks/use-documents-processing";
 import { useInbox } from "@/hooks/use-inbox";
@@ -44,7 +54,6 @@ import { notificationsApiService } from "@/lib/apis/notifications-api.service";
 import { searchSpacesApiService } from "@/lib/apis/search-spaces-api.service";
 import { logout } from "@/lib/auth-utils";
 import { deleteThread, fetchThreads, updateThread } from "@/lib/chat/thread-persistence";
-import { cleanupElectric } from "@/lib/electric/client";
 import { resetUser, trackLogout } from "@/lib/posthog/events";
 import { cacheKeys } from "@/lib/query-client/cache-keys";
 import type { ChatItem, NavItem, SearchSpace } from "../types/layout.types";
@@ -118,12 +127,12 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		enabled: !!searchSpaceId,
 	});
 
-	// Separate sidebar states for shared and private chats
-	const [isAllSharedChatsSidebarOpen, setIsAllSharedChatsSidebarOpen] = useState(false);
-	const [isAllPrivateChatsSidebarOpen, setIsAllPrivateChatsSidebarOpen] = useState(false);
+	// Unified slide-out panel state (only one can be open at a time)
+	type SlideoutPanel = "inbox" | "shared" | "private" | "announcements" | null;
+	const [activeSlideoutPanel, setActiveSlideoutPanel] = useState<SlideoutPanel>(null);
 
-	// Inbox sidebar state
-	const [isInboxSidebarOpen, setIsInboxSidebarOpen] = useState(false);
+	const isInboxSidebarOpen = activeSlideoutPanel === "inbox";
+	const isAnnouncementsSidebarOpen = activeSlideoutPanel === "announcements";
 
 	// Documents sidebar state (shared atom so Composer can toggle it)
 	const [isDocumentsSidebarOpen, setIsDocumentsSidebarOpen] = useAtom(documentsSidebarOpenAtom);
@@ -142,14 +151,9 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		}
 	}, [setIsDocumentsSidebarOpen]);
 
-	// Announcements sidebar state
-	const [isAnnouncementsSidebarOpen, setIsAnnouncementsSidebarOpen] = useState(false);
-
 	// Search space dialog state
 	const [isCreateSearchSpaceDialogOpen, setIsCreateSearchSpaceDialogOpen] = useState(false);
 
-	// Per-tab inbox hooks — each has independent API loading, pagination,
-	// and Electric live queries. The Electric sync shape is shared (client-level cache).
 	const userId = user?.id ? String(user.id) : null;
 	const numericSpaceId = Number(searchSpaceId) || null;
 
@@ -193,6 +197,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	const seenPageLimitNotifications = useRef<Set<number>>(new Set());
 	const isInitialLoad = useRef(true);
 
+	const setMorePagesOpen = useSetAtom(morePagesDialogAtom);
+
 	// Effect to show toast for new page_limit_exceeded notifications
 	useEffect(() => {
 		if (statusInbox.loading) return;
@@ -216,21 +222,17 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		for (const notification of newNotifications) {
 			seenPageLimitNotifications.current.add(notification.id);
 
-			const actionUrl = isPageLimitExceededMetadata(notification.metadata)
-				? notification.metadata.action_url
-				: `/dashboard/${searchSpaceId}/more-pages`;
-
 			toast.error(notification.title, {
 				description: notification.message,
 				duration: 8000,
 				icon: <AlertTriangle className="h-5 w-5 text-amber-500" />,
 				action: {
 					label: "View Plans",
-					onClick: () => router.push(actionUrl),
+					onClick: () => setMorePagesOpen(true),
 				},
 			});
 		}
-	}, [statusInbox.inboxItems, statusInbox.loading, searchSpaceId, router]);
+	}, [statusInbox.inboxItems, statusInbox.loading, searchSpaceId, setMorePagesOpen]);
 
 	// Delete dialogs state
 	const [showDeleteChatDialog, setShowDeleteChatDialog] = useState(false);
@@ -263,12 +265,8 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	}, [pendingNewChat, params?.chat_id, router, searchSpaceId, resetCurrentThread]);
 
 	// Reset transient slide-out panels when switching search spaces.
-	// Some browsers can retain overlay/backdrop state across route transitions.
 	useEffect(() => {
-		setIsInboxSidebarOpen(false);
-		setIsAllSharedChatsSidebarOpen(false);
-		setIsAllPrivateChatsSidebarOpen(false);
-		setIsAnnouncementsSidebarOpen(false);
+		setActiveSlideoutPanel(null);
 	}, [searchSpaceId]);
 
 	const searchSpaces: SearchSpace[] = useMemo(() => {
@@ -390,15 +388,19 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		setIsCreateSearchSpaceDialogOpen(true);
 	}, []);
 
+	const setUserSettingsDialog = useSetAtom(userSettingsDialogAtom);
+	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
+	const setTeamDialogOpen = useSetAtom(teamDialogAtom);
+
 	const handleUserSettings = useCallback(() => {
-		router.push(`/dashboard/${searchSpaceId}/user-settings?tab=profile`);
-	}, [router, searchSpaceId]);
+		setUserSettingsDialog({ open: true, initialTab: "profile" });
+	}, [setUserSettingsDialog]);
 
 	const handleSearchSpaceSettings = useCallback(
-		(space: SearchSpace) => {
-			router.push(`/dashboard/${space.id}/settings?tab=general`);
+		(_space: SearchSpace) => {
+			setSearchSpaceSettingsDialog({ open: true, initialTab: "general" });
 		},
-		[router]
+		[setSearchSpaceSettingsDialog]
 	);
 
 	const handleSearchSpaceDeleteClick = useCallback((space: SearchSpace) => {
@@ -474,14 +476,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	const handleNavItemClick = useCallback(
 		(item: NavItem) => {
 			if (item.url === "#inbox") {
-				setIsInboxSidebarOpen((prev) => {
-					if (!prev) {
-						setIsAllSharedChatsSidebarOpen(false);
-						setIsAllPrivateChatsSidebarOpen(false);
-						setIsAnnouncementsSidebarOpen(false);
-					}
-					return !prev;
-				});
+				setActiveSlideoutPanel((prev) => (prev === "inbox" ? null : "inbox"));
 				return;
 			}
 			if (item.url === "#documents") {
@@ -489,20 +484,14 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 					if (!isDocumentsSidebarOpen) {
 						setIsDocumentsSidebarOpen(true);
 						setIsRightPanelCollapsed(false);
-						setIsInboxSidebarOpen(false);
-						setIsAllSharedChatsSidebarOpen(false);
-						setIsAllPrivateChatsSidebarOpen(false);
-						setIsAnnouncementsSidebarOpen(false);
+						setActiveSlideoutPanel(null);
 					} else {
 						setIsRightPanelCollapsed((prev) => !prev);
 					}
 				} else {
 					setIsDocumentsSidebarOpen((prev) => {
 						if (!prev) {
-							setIsInboxSidebarOpen(false);
-							setIsAllSharedChatsSidebarOpen(false);
-							setIsAllPrivateChatsSidebarOpen(false);
-							setIsAnnouncementsSidebarOpen(false);
+							setActiveSlideoutPanel(null);
 						}
 						return !prev;
 					});
@@ -510,14 +499,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 				return;
 			}
 			if (item.url === "#announcements") {
-				setIsAnnouncementsSidebarOpen((prev) => {
-					if (!prev) {
-						setIsInboxSidebarOpen(false);
-						setIsAllSharedChatsSidebarOpen(false);
-						setIsAllPrivateChatsSidebarOpen(false);
-					}
-					return !prev;
-				});
+				setActiveSlideoutPanel((prev) => (prev === "announcements" ? null : "announcements"));
 				return;
 			}
 			router.push(item.url);
@@ -582,26 +564,18 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	);
 
 	const handleSettings = useCallback(() => {
-		router.push(`/dashboard/${searchSpaceId}/settings?tab=general`);
-	}, [router, searchSpaceId]);
+		setSearchSpaceSettingsDialog({ open: true, initialTab: "general" });
+	}, [setSearchSpaceSettingsDialog]);
 
 	const handleManageMembers = useCallback(() => {
-		router.push(`/dashboard/${searchSpaceId}/team`);
-	}, [router, searchSpaceId]);
+		setTeamDialogOpen(true);
+	}, [setTeamDialogOpen]);
 
 	const handleLogout = useCallback(async () => {
 		try {
 			trackLogout();
 			resetUser();
 
-			// Best-effort cleanup of Electric SQL / PGlite
-			// Even if this fails, login-time cleanup will handle it
-			try {
-				await cleanupElectric();
-			} catch (err) {
-				console.warn("[Logout] Electric cleanup failed (will be handled on next login):", err);
-			}
-
 			// Revoke refresh token on server and clear all tokens from localStorage
 			await logout();
 
@@ -616,17 +590,11 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	}, [router]);
 
 	const handleViewAllSharedChats = useCallback(() => {
-		setIsAllSharedChatsSidebarOpen(true);
-		setIsAllPrivateChatsSidebarOpen(false);
-		setIsInboxSidebarOpen(false);
-		setIsAnnouncementsSidebarOpen(false);
+		setActiveSlideoutPanel((prev) => (prev === "shared" ? null : "shared"));
 	}, []);
 
 	const handleViewAllPrivateChats = useCallback(() => {
-		setIsAllPrivateChatsSidebarOpen(true);
-		setIsAllSharedChatsSidebarOpen(false);
-		setIsInboxSidebarOpen(false);
-		setIsAnnouncementsSidebarOpen(false);
+		setActiveSlideoutPanel((prev) => (prev === "private" ? null : "private"));
 	}, []);
 
 	// Delete handlers
@@ -732,9 +700,10 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 				setTheme={setTheme}
 				isChatPage={isChatPage}
 				isLoadingChats={isLoadingThreads}
+				activeSlideoutPanel={activeSlideoutPanel}
+				onSlideoutPanelChange={setActiveSlideoutPanel}
 				inbox={{
 					isOpen: isInboxSidebarOpen,
-					onOpenChange: setIsInboxSidebarOpen,
 					totalUnreadCount,
 					comments: {
 						items: commentsInbox.inboxItems,
@@ -757,18 +726,10 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 						markAllAsRead: statusInbox.markAllAsRead,
 					},
 				}}
-				announcementsPanel={{
-					open: isAnnouncementsSidebarOpen,
-					onOpenChange: setIsAnnouncementsSidebarOpen,
-				}}
 				allSharedChatsPanel={{
-					open: isAllSharedChatsSidebarOpen,
-					onOpenChange: setIsAllSharedChatsSidebarOpen,
 					searchSpaceId,
 				}}
 				allPrivateChatsPanel={{
-					open: isAllPrivateChatsSidebarOpen,
-					onOpenChange: setIsAllPrivateChatsSidebarOpen,
 					searchSpaceId,
 				}}
 				documentsPanel={{
@@ -801,14 +762,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 							disabled={isDeletingChat}
 							className="bg-destructive text-destructive-foreground hover:bg-destructive/90 gap-2"
 						>
-							{isDeletingChat ? (
-								<>
-									<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
-									{t("deleting")}
-								</>
-							) : (
-								tCommon("delete")
-							)}
+							{isDeletingChat ? <Spinner size="sm" /> : tCommon("delete")}
 						</AlertDialogAction>
 					</AlertDialogFooter>
 				</AlertDialogContent>
@@ -934,6 +888,12 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 				open={isCreateSearchSpaceDialogOpen}
 				onOpenChange={setIsCreateSearchSpaceDialogOpen}
 			/>
+
+			{/* Settings Dialogs */}
+			<SearchSpaceSettingsDialog searchSpaceId={Number(searchSpaceId)} />
+			<UserSettingsDialog />
+			<TeamDialog searchSpaceId={Number(searchSpaceId)} />
+			<MorePagesDialog />
 		</>
 	);
 }

surfsense_web/components/layout/ui/header/Header.tsx

@@ -54,7 +54,7 @@ export function Header({ mobileMenuTrigger }: HeaderProps) {
 	const showExpandButton = !isMobile && collapsed && hasRightPanelContent;
 
 	return (
-		<header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-4">
+		<header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 bg-main-panel/95 backdrop-blur supports-backdrop-filter:bg-main-panel/60 px-4">
 			{/* Left side - Mobile menu trigger + Model selector */}
 			<div className="flex flex-1 items-center gap-2 min-w-0">
 				{mobileMenuTrigger}

surfsense_web/components/layout/ui/right-panel/RightPanel.tsx

@@ -3,9 +3,13 @@
 import { useAtom, useAtomValue, useSetAtom } from "jotai";
 import { PanelRight, PanelRightClose } from "lucide-react";
 import { startTransition, useEffect } from "react";
+import { closeHitlEditPanelAtom, hitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
 import { closeReportPanelAtom, reportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { documentsSidebarOpenAtom } from "@/atoms/documents/ui.atoms";
+import { closeEditorPanelAtom, editorPanelAtom } from "@/atoms/editor/editor-panel.atom";
 import { rightPanelCollapsedAtom, rightPanelTabAtom } from "@/atoms/layout/right-panel.atom";
+import { EditorPanelContent } from "@/components/editor-panel/editor-panel";
+import { HitlEditPanelContent } from "@/components/hitl-edit-panel/hitl-edit-panel";
 import { ReportPanelContent } from "@/components/report-panel/report-panel";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -41,8 +45,12 @@ export function RightPanelExpandButton() {
 	const [collapsed, setCollapsed] = useAtom(rightPanelCollapsedAtom);
 	const documentsOpen = useAtomValue(documentsSidebarOpenAtom);
 	const reportState = useAtomValue(reportPanelAtom);
+	const editorState = useAtomValue(editorPanelAtom);
+	const hitlEditState = useAtomValue(hitlEditPanelAtom);
 	const reportOpen = reportState.isOpen && !!reportState.reportId;
-	const hasContent = documentsOpen || reportOpen;
+	const editorOpen = editorState.isOpen && !!editorState.documentId;
+	const hitlEditOpen = hitlEditState.isOpen && !!hitlEditState.onSave;
+	const hasContent = documentsOpen || reportOpen || editorOpen || hitlEditOpen;
 
 	if (!collapsed || !hasContent) return null;
 
@@ -66,34 +74,54 @@ export function RightPanelExpandButton() {
 	);
 }
 
-const PANEL_WIDTHS = { sources: 420, report: 640 } as const;
+const PANEL_WIDTHS = { sources: 420, report: 640, editor: 640, "hitl-edit": 640 } as const;
 
 export function RightPanel({ documentsPanel }: RightPanelProps) {
 	const [activeTab] = useAtom(rightPanelTabAtom);
 	const reportState = useAtomValue(reportPanelAtom);
 	const closeReport = useSetAtom(closeReportPanelAtom);
+	const editorState = useAtomValue(editorPanelAtom);
+	const closeEditor = useSetAtom(closeEditorPanelAtom);
+	const hitlEditState = useAtomValue(hitlEditPanelAtom);
+	const closeHitlEdit = useSetAtom(closeHitlEditPanelAtom);
 	const [collapsed, setCollapsed] = useAtom(rightPanelCollapsedAtom);
 
 	const documentsOpen = documentsPanel?.open ?? false;
 	const reportOpen = reportState.isOpen && !!reportState.reportId;
+	const editorOpen = editorState.isOpen && !!editorState.documentId;
+	const hitlEditOpen = hitlEditState.isOpen && !!hitlEditState.onSave;
 
 	useEffect(() => {
-		if (!reportOpen) return;
+		if (!reportOpen && !editorOpen && !hitlEditOpen) return;
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if (e.key === "Escape") closeReport();
+			if (e.key === "Escape") {
+				if (hitlEditOpen) closeHitlEdit();
+				else if (editorOpen) closeEditor();
+				else if (reportOpen) closeReport();
+			}
 		};
 		document.addEventListener("keydown", handleKeyDown);
 		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [reportOpen, closeReport]);
+	}, [reportOpen, editorOpen, hitlEditOpen, closeReport, closeEditor, closeHitlEdit]);
 
-	const isVisible = (documentsOpen || reportOpen) && !collapsed;
+	const isVisible = (documentsOpen || reportOpen || editorOpen || hitlEditOpen) && !collapsed;
 
-	const effectiveTab =
-		activeTab === "report" && !reportOpen
-			? "sources"
-			: activeTab === "sources" && !documentsOpen
-				? "report"
-				: activeTab;
+	let effectiveTab = activeTab;
+	if (effectiveTab === "hitl-edit" && !hitlEditOpen) {
+		effectiveTab = editorOpen ? "editor" : reportOpen ? "report" : "sources";
+	} else if (effectiveTab === "editor" && !editorOpen) {
+		effectiveTab = reportOpen ? "report" : "sources";
+	} else if (effectiveTab === "report" && !reportOpen) {
+		effectiveTab = editorOpen ? "editor" : "sources";
+	} else if (effectiveTab === "sources" && !documentsOpen) {
+		effectiveTab = hitlEditOpen
+			? "hitl-edit"
+			: editorOpen
+				? "editor"
+				: reportOpen
+					? "report"
+					: "sources";
+	}
 
 	const targetWidth = PANEL_WIDTHS[effectiveTab];
 	const collapseButton = <CollapseButton onClick={() => setCollapsed(true)} />;
@@ -103,7 +131,7 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
 	return (
 		<aside
 			style={{ width: targetWidth }}
-			className="flex h-full shrink-0 flex-col border-l bg-background overflow-hidden transition-[width] duration-200 ease-out"
+			className="flex h-full shrink-0 flex-col rounded-xl border bg-sidebar text-sidebar-foreground overflow-hidden transition-[width] duration-200 ease-out"
 		>
 			<div className="relative flex-1 min-h-0 overflow-hidden">
 				{effectiveTab === "sources" && documentsOpen && documentsPanel && (
@@ -117,15 +145,38 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
 					</div>
 				)}
 				{effectiveTab === "report" && reportOpen && (
-					<div className="h-full">
+					<div className="h-full flex flex-col">
 						<ReportPanelContent
-							reportId={reportState.reportId!}
+							reportId={reportState.reportId as number}
 							title={reportState.title || "Report"}
 							onClose={closeReport}
 							shareToken={reportState.shareToken}
 						/>
 					</div>
 				)}
+				{effectiveTab === "editor" && editorOpen && (
+					<div className="h-full flex flex-col">
+						<EditorPanelContent
+							documentId={editorState.documentId as number}
+							searchSpaceId={editorState.searchSpaceId as number}
+							title={editorState.title}
+							onClose={closeEditor}
+						/>
+					</div>
+				)}
+				{effectiveTab === "hitl-edit" && hitlEditOpen && hitlEditState.onSave && (
+					<div className="h-full flex flex-col">
+						<HitlEditPanelContent
+							title={hitlEditState.title}
+							content={hitlEditState.content}
+							toolName={hitlEditState.toolName}
+							contentFormat={hitlEditState.contentFormat}
+							extraFields={hitlEditState.extraFields}
+							onSave={hitlEditState.onSave}
+							onClose={closeHitlEdit}
+						/>
+					</div>
+				)}
 			</div>
 		</aside>
 	);

surfsense_web/components/layout/ui/shell/LayoutShell.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useMemo, useState } from "react";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import type { InboxItem } from "@/hooks/use-inbox";
 import { useIsMobile } from "@/hooks/use-mobile";
@@ -12,15 +13,16 @@ import { Header } from "../header";
 import { IconRail } from "../icon-rail";
 import { RightPanel } from "../right-panel/RightPanel";
 import {
-	AllPrivateChatsSidebar,
-	AllSharedChatsSidebar,
-	AnnouncementsSidebar,
+	AllPrivateChatsSidebarContent,
+	AllSharedChatsSidebarContent,
+	AnnouncementsSidebarContent,
 	DocumentsSidebar,
-	InboxSidebar,
+	InboxSidebarContent,
 	MobileSidebar,
 	MobileSidebarTrigger,
 	Sidebar,
 } from "../sidebar";
+import { SidebarSlideOutPanel } from "../sidebar/SidebarSlideOutPanel";
 
 // Per-tab data source
 interface TabDataSource {
@@ -34,10 +36,11 @@ interface TabDataSource {
 	markAllAsRead: () => Promise<boolean>;
 }
 
+export type ActiveSlideoutPanel = "inbox" | "shared" | "private" | "announcements" | null;
+
 // Inbox-related props — per-tab data sources with independent loading/pagination
 interface InboxProps {
 	isOpen: boolean;
-	onOpenChange: (open: boolean) => void;
 	totalUnreadCount: number;
 	comments: TabDataSource;
 	status: TabDataSource;
@@ -75,22 +78,17 @@ interface LayoutShellProps {
 	isChatPage?: boolean;
 	children: React.ReactNode;
 	className?: string;
+	// Unified slide-out panel state
+	activeSlideoutPanel?: ActiveSlideoutPanel;
+	onSlideoutPanelChange?: (panel: ActiveSlideoutPanel) => void;
 	// Inbox props
 	inbox?: InboxProps;
-	announcementsPanel?: {
-		open: boolean;
-		onOpenChange: (open: boolean) => void;
-	};
 	isLoadingChats?: boolean;
 	// All chats panel props
 	allSharedChatsPanel?: {
-		open: boolean;
-		onOpenChange: (open: boolean) => void;
 		searchSpaceId: string;
 	};
 	allPrivateChatsPanel?: {
-		open: boolean;
-		onOpenChange: (open: boolean) => void;
 		searchSpaceId: string;
 	};
 	documentsPanel?: {
@@ -133,8 +131,9 @@ export function LayoutShell({
 	isChatPage = false,
 	children,
 	className,
+	activeSlideoutPanel = null,
+	onSlideoutPanelChange,
 	inbox,
-	announcementsPanel,
 	isLoadingChats = false,
 	allSharedChatsPanel,
 	allPrivateChatsPanel,
@@ -155,12 +154,32 @@ export function LayoutShell({
 		[isCollapsed, setIsCollapsed, toggleCollapsed, sidebarWidth]
 	);
 
+	const closeSlideout = useCallback(
+		(open: boolean) => {
+			if (!open) onSlideoutPanelChange?.(null);
+		},
+		[onSlideoutPanelChange]
+	);
+
+	const anySlideOutOpen = activeSlideoutPanel !== null;
+
+	const panelAriaLabel =
+		activeSlideoutPanel === "inbox"
+			? "Inbox"
+			: activeSlideoutPanel === "shared"
+				? "Shared Chats"
+				: activeSlideoutPanel === "private"
+					? "Private Chats"
+					: activeSlideoutPanel === "announcements"
+						? "Announcements"
+						: "Panel";
+
 	// Mobile layout
 	if (isMobile) {
 		return (
 			<SidebarProvider value={sidebarContextValue}>
 				<TooltipProvider delayDuration={0}>
-					<div className={cn("flex h-screen w-full flex-col bg-background", className)}>
+					<div className={cn("flex h-screen w-full flex-col bg-main-panel", className)}>
 						<Header
 							mobileMenuTrigger={<MobileSidebarTrigger onClick={() => setMobileMenuOpen(true)} />}
 						/>
@@ -171,8 +190,6 @@ export function LayoutShell({
 							searchSpaces={searchSpaces}
 							activeSearchSpaceId={activeSearchSpaceId}
 							onSearchSpaceSelect={onSearchSpaceSelect}
-							onSearchSpaceDelete={onSearchSpaceDelete}
-							onSearchSpaceSettings={onSearchSpaceSettings}
 							onAddSearchSpace={onAddSearchSpace}
 							searchSpace={searchSpace}
 							navItems={navItems}
@@ -187,6 +204,8 @@ export function LayoutShell({
 							onChatArchive={onChatArchive}
 							onViewAllSharedChats={onViewAllSharedChats}
 							onViewAllPrivateChats={onViewAllPrivateChats}
+							isSharedChatsPanelOpen={activeSlideoutPanel === "shared"}
+							isPrivateChatsPanelOpen={activeSlideoutPanel === "private"}
 							user={user}
 							onSettings={onSettings}
 							onManageMembers={onManageMembers}
@@ -202,54 +221,88 @@ export function LayoutShell({
 							{children}
 						</main>
 
-						{/* Mobile Inbox Sidebar - only render when open to avoid scroll blocking */}
-						{inbox?.isOpen && (
-							<InboxSidebar
-								open={inbox.isOpen}
-								onOpenChange={inbox.onOpenChange}
-								comments={inbox.comments}
-								status={inbox.status}
-								totalUnreadCount={inbox.totalUnreadCount}
-								onCloseMobileSidebar={() => setMobileMenuOpen(false)}
-							/>
-						)}
+						{/* Mobile unified slide-out panel */}
+						<SidebarSlideOutPanel
+							open={anySlideOutOpen}
+							onOpenChange={closeSlideout}
+							ariaLabel={panelAriaLabel}
+						>
+							<AnimatePresence mode="popLayout" initial={false}>
+								{activeSlideoutPanel === "inbox" && inbox && (
+									<motion.div
+										key="inbox"
+										className="h-full flex flex-col"
+										initial={{ opacity: 0 }}
+										animate={{ opacity: 1 }}
+										exit={{ opacity: 0 }}
+										transition={{ duration: 0.15 }}
+									>
+										<InboxSidebarContent
+											onOpenChange={(open) => closeSlideout(open)}
+											comments={inbox.comments}
+											status={inbox.status}
+											totalUnreadCount={inbox.totalUnreadCount}
+											onCloseMobileSidebar={() => setMobileMenuOpen(false)}
+										/>
+									</motion.div>
+								)}
+								{activeSlideoutPanel === "announcements" && (
+									<motion.div
+										key="announcements"
+										className="h-full flex flex-col"
+										initial={{ opacity: 0 }}
+										animate={{ opacity: 1 }}
+										exit={{ opacity: 0 }}
+										transition={{ duration: 0.15 }}
+									>
+										<AnnouncementsSidebarContent
+											onOpenChange={(open) => closeSlideout(open)}
+											onCloseMobileSidebar={() => setMobileMenuOpen(false)}
+										/>
+									</motion.div>
+								)}
+								{activeSlideoutPanel === "shared" && allSharedChatsPanel && (
+									<motion.div
+										key="shared"
+										className="h-full flex flex-col"
+										initial={{ opacity: 0 }}
+										animate={{ opacity: 1 }}
+										exit={{ opacity: 0 }}
+										transition={{ duration: 0.15 }}
+									>
+										<AllSharedChatsSidebarContent
+											onOpenChange={(open) => closeSlideout(open)}
+											searchSpaceId={allSharedChatsPanel.searchSpaceId}
+											onCloseMobileSidebar={() => setMobileMenuOpen(false)}
+										/>
+									</motion.div>
+								)}
+								{activeSlideoutPanel === "private" && allPrivateChatsPanel && (
+									<motion.div
+										key="private"
+										className="h-full flex flex-col"
+										initial={{ opacity: 0 }}
+										animate={{ opacity: 1 }}
+										exit={{ opacity: 0 }}
+										transition={{ duration: 0.15 }}
+									>
+										<AllPrivateChatsSidebarContent
+											onOpenChange={(open) => closeSlideout(open)}
+											searchSpaceId={allPrivateChatsPanel.searchSpaceId}
+											onCloseMobileSidebar={() => setMobileMenuOpen(false)}
+										/>
+									</motion.div>
+								)}
+							</AnimatePresence>
+						</SidebarSlideOutPanel>
 
-						{/* Mobile Documents Sidebar - slide-out panel */}
+						{/* Mobile Documents Sidebar - separate (not part of slide-out group) */}
 						{documentsPanel && (
 							<DocumentsSidebar
 								open={documentsPanel.open}
 								onOpenChange={documentsPanel.onOpenChange}
 							/>
 						)}
-
-						{/* Mobile Announcements Sidebar */}
-						{announcementsPanel?.open && (
-							<AnnouncementsSidebar
-								open={announcementsPanel.open}
-								onOpenChange={announcementsPanel.onOpenChange}
-								onCloseMobileSidebar={() => setMobileMenuOpen(false)}
-							/>
-						)}
-
-						{/* Mobile All Shared Chats - slide-out panel */}
-						{allSharedChatsPanel && (
-							<AllSharedChatsSidebar
-								open={allSharedChatsPanel.open}
-								onOpenChange={allSharedChatsPanel.onOpenChange}
-								searchSpaceId={allSharedChatsPanel.searchSpaceId}
-								onCloseMobileSidebar={() => setMobileMenuOpen(false)}
-							/>
-						)}
-
-						{/* Mobile All Private Chats - slide-out panel */}
-						{allPrivateChatsPanel && (
-							<AllPrivateChatsSidebar
-								open={allPrivateChatsPanel.open}
-								onOpenChange={allPrivateChatsPanel.onOpenChange}
-								searchSpaceId={allPrivateChatsPanel.searchSpaceId}
-								onCloseMobileSidebar={() => setMobileMenuOpen(false)}
-							/>
-						)}
 					</div>
 				</TooltipProvider>
 			</SidebarProvider>
@@ -274,8 +327,13 @@ export function LayoutShell({
 						/>
 					</div>
 
-					{/* Main container with sidebar and content - relative for inbox positioning */}
-					<div className="relative flex flex-1 rounded-xl border bg-background overflow-hidden">
+					{/* Sidebar + slide-out panels share one container; overflow visible so panels can overlay main content */}
+					<div
+						className={cn(
+							"relative hidden md:flex shrink-0 border bg-sidebar z-20 transition-[border-radius,border-color] duration-200",
+							anySlideOutOpen ? "rounded-l-xl border-r-0 delay-0" : "rounded-xl delay-150"
+						)}
+					>
 						<Sidebar
 							searchSpace={searchSpace}
 							isCollapsed={isCollapsed}
@@ -292,6 +350,8 @@ export function LayoutShell({
 							onChatArchive={onChatArchive}
 							onViewAllSharedChats={onViewAllSharedChats}
 							onViewAllPrivateChats={onViewAllPrivateChats}
+							isSharedChatsPanelOpen={activeSlideoutPanel === "shared"}
+							isPrivateChatsPanelOpen={activeSlideoutPanel === "private"}
 							user={user}
 							onSettings={onSettings}
 							onManageMembers={onManageMembers}
@@ -300,68 +360,118 @@ export function LayoutShell({
 							pageUsage={pageUsage}
 							theme={theme}
 							setTheme={setTheme}
-							className="hidden md:flex border-r shrink-0"
+							className={cn(
+								"flex shrink-0 transition-[border-radius] duration-200",
+								anySlideOutOpen ? "rounded-l-xl delay-0" : "rounded-xl delay-150"
+							)}
 							isLoadingChats={isLoadingChats}
 							sidebarWidth={sidebarWidth}
-							onResizeMouseDown={onResizeMouseDown}
 							isResizing={isResizing}
 						/>
 
-						<main className="flex-1 flex flex-col min-w-0">
-							<Header />
-
-							<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
-								{children}
-							</div>
-						</main>
-
-						{/* Right panel — tabbed Sources/Report (desktop only) */}
-						{documentsPanel && (
-							<RightPanel
-								documentsPanel={{
-									open: documentsPanel.open,
-									onOpenChange: documentsPanel.onOpenChange,
-								}}
-							/>
-						)}
-
-						{/* Inbox Sidebar - slide-out panel */}
-						{inbox && (
-							<InboxSidebar
-								open={inbox.isOpen}
-								onOpenChange={inbox.onOpenChange}
-								comments={inbox.comments}
-								status={inbox.status}
-								totalUnreadCount={inbox.totalUnreadCount}
-							/>
-						)}
-
-						{/* Announcements Sidebar */}
-						{announcementsPanel && (
-							<AnnouncementsSidebar
-								open={announcementsPanel.open}
-								onOpenChange={announcementsPanel.onOpenChange}
-							/>
-						)}
-
-						{/* All Shared Chats - slide-out panel */}
-						{allSharedChatsPanel && (
-							<AllSharedChatsSidebar
-								open={allSharedChatsPanel.open}
-								onOpenChange={allSharedChatsPanel.onOpenChange}
-								searchSpaceId={allSharedChatsPanel.searchSpaceId}
-							/>
-						)}
-
-						{/* All Private Chats - slide-out panel */}
-						{allPrivateChatsPanel && (
-							<AllPrivateChatsSidebar
-								open={allPrivateChatsPanel.open}
-								onOpenChange={allPrivateChatsPanel.onOpenChange}
-								searchSpaceId={allPrivateChatsPanel.searchSpaceId}
-							/>
-						)}
+						{/* Unified slide-out panel — shell stays open, content cross-fades */}
+						<SidebarSlideOutPanel
+							open={anySlideOutOpen}
+							onOpenChange={closeSlideout}
+							ariaLabel={panelAriaLabel}
+						>
+							<AnimatePresence mode="popLayout" initial={false}>
+								{activeSlideoutPanel === "inbox" && inbox && (
+									<motion.div
+										key="inbox"
+										className="h-full flex flex-col"
+										initial={{ opacity: 0 }}
+										animate={{ opacity: 1 }}
+										exit={{ opacity: 0 }}
+										transition={{ duration: 0.15 }}
+									>
+										<InboxSidebarContent
+											onOpenChange={(open) => closeSlideout(open)}
+											comments={inbox.comments}
+											status={inbox.status}
+											totalUnreadCount={inbox.totalUnreadCount}
+										/>
+									</motion.div>
+								)}
+								{activeSlideoutPanel === "announcements" && (
+									<motion.div
+										key="announcements"
+										className="h-full flex flex-col"
+										initial={{ opacity: 0 }}
+										animate={{ opacity: 1 }}
+										exit={{ opacity: 0 }}
+										transition={{ duration: 0.15 }}
+									>
+										<AnnouncementsSidebarContent onOpenChange={(open) => closeSlideout(open)} />
+									</motion.div>
+								)}
+								{activeSlideoutPanel === "shared" && allSharedChatsPanel && (
+									<motion.div
+										key="shared"
+										className="h-full flex flex-col"
+										initial={{ opacity: 0 }}
+										animate={{ opacity: 1 }}
+										exit={{ opacity: 0 }}
+										transition={{ duration: 0.15 }}
+									>
+										<AllSharedChatsSidebarContent
+											onOpenChange={(open) => closeSlideout(open)}
+											searchSpaceId={allSharedChatsPanel.searchSpaceId}
+										/>
+									</motion.div>
+								)}
+								{activeSlideoutPanel === "private" && allPrivateChatsPanel && (
+									<motion.div
+										key="private"
+										className="h-full flex flex-col"
+										initial={{ opacity: 0 }}
+										animate={{ opacity: 1 }}
+										exit={{ opacity: 0 }}
+										transition={{ duration: 0.15 }}
+									>
+										<AllPrivateChatsSidebarContent
+											onOpenChange={(open) => closeSlideout(open)}
+											searchSpaceId={allPrivateChatsPanel.searchSpaceId}
+										/>
+									</motion.div>
+								)}
+							</AnimatePresence>
+						</SidebarSlideOutPanel>
 					</div>
+
+					{/* Resize handle — negative margins eat the flex gap so spacing stays unchanged */}
+					{!isCollapsed && (
+						<div
+							role="slider"
+							aria-label="Resize sidebar"
+							aria-valuemin={0}
+							aria-valuemax={100}
+							aria-valuenow={50}
+							tabIndex={0}
+							onMouseDown={onResizeMouseDown}
+							className="hidden md:block h-full cursor-col-resize z-30 focus:outline-none"
+							style={{ width: 8, marginLeft: -8, marginRight: -8 }}
+						/>
+					)}
+
+					{/* Main content panel */}
+					<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
+						<Header />
+
+						<div className={cn("flex-1", isChatPage ? "overflow-hidden" : "overflow-auto")}>
+							{children}
+						</div>
+					</div>
+
+					{/* Right panel — tabbed Sources/Report (desktop only) */}
+					{documentsPanel && (
+						<RightPanel
+							documentsPanel={{
+								open: documentsPanel.open,
+								onOpenChange: documentsPanel.onOpenChange,
+							}}
+						/>
+					)}
 				</div>
 			</TooltipProvider>
 		</SidebarProvider>

surfsense_web/components/layout/ui/sidebar/AllPrivateChatsSidebar.tsx

@@ -16,8 +16,9 @@ import {
 } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/animated-tabs";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -31,13 +32,11 @@ import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
-	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useLongPress } from "@/hooks/use-long-press";
@@ -51,19 +50,21 @@ import {
 import { cn } from "@/lib/utils";
 import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
 
-interface AllPrivateChatsSidebarProps {
-	open: boolean;
+export interface AllPrivateChatsSidebarContentProps {
 	onOpenChange: (open: boolean) => void;
 	searchSpaceId: string;
 	onCloseMobileSidebar?: () => void;
 }
 
-export function AllPrivateChatsSidebar({
-	open,
+interface AllPrivateChatsSidebarProps extends AllPrivateChatsSidebarContentProps {
+	open: boolean;
+}
+
+export function AllPrivateChatsSidebarContent({
 	onOpenChange,
 	searchSpaceId,
 	onCloseMobileSidebar,
-}: AllPrivateChatsSidebarProps) {
+}: AllPrivateChatsSidebarContentProps) {
 	const t = useTranslations("sidebar");
 	const router = useRouter();
 	const params = useParams();
@@ -97,16 +98,6 @@ export function AllPrivateChatsSidebar({
 
 	const isSearchMode = !!debouncedSearchQuery.trim();
 
-	useEffect(() => {
-		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape" && open) {
-				onOpenChange(false);
-			}
-		};
-		document.addEventListener("keydown", handleEscape);
-		return () => document.removeEventListener("keydown", handleEscape);
-	}, [open, onOpenChange]);
-
 	const {
 		data: threadsData,
 		error: threadsError,
@@ -114,7 +105,7 @@ export function AllPrivateChatsSidebar({
 	} = useQuery({
 		queryKey: ["all-threads", searchSpaceId],
 		queryFn: () => fetchThreads(Number(searchSpaceId)),
-		enabled: !!searchSpaceId && open && !isSearchMode,
+		enabled: !!searchSpaceId && !isSearchMode,
 	});
 
 	const {
@@ -124,7 +115,7 @@ export function AllPrivateChatsSidebar({
 	} = useQuery({
 		queryKey: ["search-threads", searchSpaceId, debouncedSearchQuery],
 		queryFn: () => searchThreads(Number(searchSpaceId), debouncedSearchQuery.trim()),
-		enabled: !!searchSpaceId && open && isSearchMode,
+		enabled: !!searchSpaceId && isSearchMode,
 	});
 
 	// Filter to only private chats (PRIVATE visibility or no visibility set)
@@ -251,11 +242,7 @@ export function AllPrivateChatsSidebar({
 	const archivedCount = archivedChats.length;
 
 	return (
-		<SidebarSlideOutPanel
-			open={open}
-			onOpenChange={onOpenChange}
-			ariaLabel={t("chats") || "Private Chats"}
-		>
+		<>
 			<div className="shrink-0 p-4 pb-2 space-y-3">
 				<div className="flex items-center gap-2">
 					{isMobile && (
@@ -300,14 +287,11 @@ export function AllPrivateChatsSidebar({
 				<Tabs
 					value={showArchived ? "archived" : "active"}
 					onValueChange={(value) => setShowArchived(value === "archived")}
-					className="shrink-0 mx-4"
+					className="shrink-0 mx-4 mt-2"
 				>
-					<TabsList className="w-full h-auto p-0 bg-transparent rounded-none border-b">
-						<TabsTrigger
-							value="active"
-							className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-						>
-							<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
+					<TabsList stretch showBottomBorder size="sm">
+						<TabsTrigger value="active">
+							<span className="inline-flex items-center gap-1.5">
 								<MessageCircleMore className="h-4 w-4" />
 								<span>Active</span>
 								<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
@@ -315,11 +299,8 @@ export function AllPrivateChatsSidebar({
 								</span>
 							</span>
 						</TabsTrigger>
-						<TabsTrigger
-							value="archived"
-							className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-						>
-							<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
+						<TabsTrigger value="archived">
+							<span className="inline-flex items-center gap-1.5">
 								<ArchiveIcon className="h-4 w-4" />
 								<span>Archived</span>
 								<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
@@ -334,8 +315,11 @@ export function AllPrivateChatsSidebar({
 			<div className="flex-1 overflow-y-auto overflow-x-hidden p-2">
 				{isLoading ? (
 					<div className="space-y-1">
-						{[75, 90, 55, 80, 65, 85].map((titleWidth, i) => (
-							<div key={`skeleton-${i}`} className="flex items-center gap-2 rounded-md px-2 py-1.5">
+						{[75, 90, 55, 80, 65, 85].map((titleWidth) => (
+							<div
+								key={`skeleton-${titleWidth}`}
+								className="flex items-center gap-2 rounded-md px-2 py-1.5"
+							>
 								<Skeleton className="h-4 w-4 shrink-0 rounded" />
 								<Skeleton className="h-4 rounded" style={{ width: `${titleWidth}%` }} />
 							</div>
@@ -380,7 +364,6 @@ export function AllPrivateChatsSidebar({
 											disabled={isBusy}
 											className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
 										>
-											<MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" />
 											<span className="truncate">{thread.title || "New Chat"}</span>
 										</button>
 									) : (
@@ -392,7 +375,6 @@ export function AllPrivateChatsSidebar({
 													disabled={isBusy}
 													className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
 												>
-													<MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" />
 													<span className="truncate">{thread.title || "New Chat"}</span>
 												</button>
 											</TooltipTrigger>
@@ -455,7 +437,6 @@ export function AllPrivateChatsSidebar({
 													</>
 												)}
 											</DropdownMenuItem>
-											<DropdownMenuSeparator />
 											<DropdownMenuItem onClick={() => handleDeleteThread(thread.id)}>
 												<Trash2 className="mr-2 h-4 w-4" />
 												<span>{t("delete") || "Delete"}</span>
@@ -537,6 +518,29 @@ export function AllPrivateChatsSidebar({
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>
+		</>
+	);
+}
+
+export function AllPrivateChatsSidebar({
+	open,
+	onOpenChange,
+	searchSpaceId,
+	onCloseMobileSidebar,
+}: AllPrivateChatsSidebarProps) {
+	const t = useTranslations("sidebar");
+
+	return (
+		<SidebarSlideOutPanel
+			open={open}
+			onOpenChange={onOpenChange}
+			ariaLabel={t("chats") || "Private Chats"}
+		>
+			<AllPrivateChatsSidebarContent
+				onOpenChange={onOpenChange}
+				searchSpaceId={searchSpaceId}
+				onCloseMobileSidebar={onCloseMobileSidebar}
+			/>
 		</SidebarSlideOutPanel>
 	);
 }

surfsense_web/components/layout/ui/sidebar/AllSharedChatsSidebar.tsx

@@ -16,8 +16,9 @@ import {
 } from "lucide-react";
 import { useParams, useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { toast } from "sonner";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/animated-tabs";
 import { Button } from "@/components/ui/button";
 import {
 	Dialog,
@@ -31,13 +32,11 @@ import {
 	DropdownMenu,
 	DropdownMenuContent,
 	DropdownMenuItem,
-	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useDebouncedValue } from "@/hooks/use-debounced-value";
 import { useLongPress } from "@/hooks/use-long-press";
@@ -51,19 +50,21 @@ import {
 import { cn } from "@/lib/utils";
 import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
 
-interface AllSharedChatsSidebarProps {
-	open: boolean;
+export interface AllSharedChatsSidebarContentProps {
 	onOpenChange: (open: boolean) => void;
 	searchSpaceId: string;
 	onCloseMobileSidebar?: () => void;
 }
 
-export function AllSharedChatsSidebar({
-	open,
+interface AllSharedChatsSidebarProps extends AllSharedChatsSidebarContentProps {
+	open: boolean;
+}
+
+export function AllSharedChatsSidebarContent({
 	onOpenChange,
 	searchSpaceId,
 	onCloseMobileSidebar,
-}: AllSharedChatsSidebarProps) {
+}: AllSharedChatsSidebarContentProps) {
 	const t = useTranslations("sidebar");
 	const router = useRouter();
 	const params = useParams();
@@ -97,16 +98,6 @@ export function AllSharedChatsSidebar({
 
 	const isSearchMode = !!debouncedSearchQuery.trim();
 
-	useEffect(() => {
-		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape" && open) {
-				onOpenChange(false);
-			}
-		};
-		document.addEventListener("keydown", handleEscape);
-		return () => document.removeEventListener("keydown", handleEscape);
-	}, [open, onOpenChange]);
-
 	const {
 		data: threadsData,
 		error: threadsError,
@@ -114,7 +105,7 @@ export function AllSharedChatsSidebar({
 	} = useQuery({
 		queryKey: ["all-threads", searchSpaceId],
 		queryFn: () => fetchThreads(Number(searchSpaceId)),
-		enabled: !!searchSpaceId && open && !isSearchMode,
+		enabled: !!searchSpaceId && !isSearchMode,
 	});
 
 	const {
@@ -124,7 +115,7 @@ export function AllSharedChatsSidebar({
 	} = useQuery({
 		queryKey: ["search-threads", searchSpaceId, debouncedSearchQuery],
 		queryFn: () => searchThreads(Number(searchSpaceId), debouncedSearchQuery.trim()),
-		enabled: !!searchSpaceId && open && isSearchMode,
+		enabled: !!searchSpaceId && isSearchMode,
 	});
 
 	// Filter to only shared chats (SEARCH_SPACE visibility)
@@ -251,11 +242,7 @@ export function AllSharedChatsSidebar({
 	const archivedCount = archivedChats.length;
 
 	return (
-		<SidebarSlideOutPanel
-			open={open}
-			onOpenChange={onOpenChange}
-			ariaLabel={t("shared_chats") || "Shared Chats"}
-		>
+		<>
 			<div className="shrink-0 p-4 pb-2 space-y-3">
 				<div className="flex items-center gap-2">
 					{isMobile && (
@@ -300,14 +287,11 @@ export function AllSharedChatsSidebar({
 				<Tabs
 					value={showArchived ? "archived" : "active"}
 					onValueChange={(value) => setShowArchived(value === "archived")}
-					className="shrink-0 mx-4"
+					className="shrink-0 mx-4 mt-2"
 				>
-					<TabsList className="w-full h-auto p-0 bg-transparent rounded-none border-b">
-						<TabsTrigger
-							value="active"
-							className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-						>
-							<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
+					<TabsList stretch showBottomBorder size="sm">
+						<TabsTrigger value="active">
+							<span className="inline-flex items-center gap-1.5">
 								<MessageCircleMore className="h-4 w-4" />
 								<span>Active</span>
 								<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
@@ -315,11 +299,8 @@ export function AllSharedChatsSidebar({
 								</span>
 							</span>
 						</TabsTrigger>
-						<TabsTrigger
-							value="archived"
-							className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-						>
-							<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
+						<TabsTrigger value="archived">
+							<span className="inline-flex items-center gap-1.5">
 								<ArchiveIcon className="h-4 w-4" />
 								<span>Archived</span>
 								<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
@@ -334,8 +315,11 @@ export function AllSharedChatsSidebar({
 			<div className="flex-1 overflow-y-auto overflow-x-hidden p-2">
 				{isLoading ? (
 					<div className="space-y-1">
-						{[75, 90, 55, 80, 65, 85].map((titleWidth, i) => (
-							<div key={`skeleton-${i}`} className="flex items-center gap-2 rounded-md px-2 py-1.5">
+						{[75, 90, 55, 80, 65, 85].map((titleWidth) => (
+							<div
+								key={`skeleton-${titleWidth}`}
+								className="flex items-center gap-2 rounded-md px-2 py-1.5"
+							>
 								<Skeleton className="h-4 w-4 shrink-0 rounded" />
 								<Skeleton className="h-4 rounded" style={{ width: `${titleWidth}%` }} />
 							</div>
@@ -380,7 +364,6 @@ export function AllSharedChatsSidebar({
 											disabled={isBusy}
 											className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
 										>
-											<MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" />
 											<span className="truncate">{thread.title || "New Chat"}</span>
 										</button>
 									) : (
@@ -392,7 +375,6 @@ export function AllSharedChatsSidebar({
 													disabled={isBusy}
 													className="flex items-center gap-2 flex-1 min-w-0 text-left overflow-hidden"
 												>
-													<MessageCircleMore className="h-4 w-4 shrink-0 text-muted-foreground" />
 													<span className="truncate">{thread.title || "New Chat"}</span>
 												</button>
 											</TooltipTrigger>
@@ -455,7 +437,6 @@ export function AllSharedChatsSidebar({
 													</>
 												)}
 											</DropdownMenuItem>
-											<DropdownMenuSeparator />
 											<DropdownMenuItem onClick={() => handleDeleteThread(thread.id)}>
 												<Trash2 className="mr-2 h-4 w-4" />
 												<span>{t("delete") || "Delete"}</span>
@@ -537,6 +518,29 @@ export function AllSharedChatsSidebar({
 					</DialogFooter>
 				</DialogContent>
 			</Dialog>
+		</>
+	);
+}
+
+export function AllSharedChatsSidebar({
+	open,
+	onOpenChange,
+	searchSpaceId,
+	onCloseMobileSidebar,
+}: AllSharedChatsSidebarProps) {
+	const t = useTranslations("sidebar");
+
+	return (
+		<SidebarSlideOutPanel
+			open={open}
+			onOpenChange={onOpenChange}
+			ariaLabel={t("shared_chats") || "Shared Chats"}
+		>
+			<AllSharedChatsSidebarContent
+				onOpenChange={onOpenChange}
+				searchSpaceId={searchSpaceId}
+				onCloseMobileSidebar={onCloseMobileSidebar}
+			/>
 		</SidebarSlideOutPanel>
 	);
 }

surfsense_web/components/layout/ui/sidebar/AnnouncementsSidebar.tsx

@@ -9,26 +9,27 @@ import { useAnnouncements } from "@/hooks/use-announcements";
 import { useMediaQuery } from "@/hooks/use-media-query";
 import { SidebarSlideOutPanel } from "./SidebarSlideOutPanel";
 
-interface AnnouncementsSidebarProps {
-	open: boolean;
+export interface AnnouncementsSidebarContentProps {
 	onOpenChange: (open: boolean) => void;
 	onCloseMobileSidebar?: () => void;
 }
 
-export function AnnouncementsSidebar({
-	open,
+interface AnnouncementsSidebarProps extends AnnouncementsSidebarContentProps {
+	open: boolean;
+}
+
+export function AnnouncementsSidebarContent({
 	onOpenChange,
 	onCloseMobileSidebar,
-}: AnnouncementsSidebarProps) {
+}: AnnouncementsSidebarContentProps) {
 	const isMobile = !useMediaQuery("(min-width: 640px)");
 	const { announcements, markAllRead } = useAnnouncements();
 
 	useEffect(() => {
-		if (!open) return;
 		markAllRead();
-	}, [open, markAllRead]);
+	}, [markAllRead]);
 
-	const body = (
+	return (
 		<div className="h-full flex flex-col">
 			<div className="shrink-0 p-4 pb-2 space-y-3">
 				<div className="flex items-center justify-between">
@@ -65,10 +66,19 @@ export function AnnouncementsSidebar({
 			</div>
 		</div>
 	);
+}
 
+export function AnnouncementsSidebar({
+	open,
+	onOpenChange,
+	onCloseMobileSidebar,
+}: AnnouncementsSidebarProps) {
 	return (
 		<SidebarSlideOutPanel open={open} onOpenChange={onOpenChange} ariaLabel="Announcements">
-			{body}
+			<AnnouncementsSidebarContent
+				onOpenChange={onOpenChange}
+				onCloseMobileSidebar={onCloseMobileSidebar}
+			/>
 		</SidebarSlideOutPanel>
 	);
 }

surfsense_web/components/layout/ui/sidebar/ChatListItem.tsx

@@ -61,7 +61,7 @@ export function ChatListItem({
 				onClick={handleClick}
 				{...(isMobile ? longPressHandlers : {})}
 				className={cn(
-					"flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm text-left transition-colors",
+					"flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-sm text-left",
 					"group-hover/item:bg-accent group-hover/item:text-accent-foreground",
 					"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
 					isActive && "bg-accent text-accent-foreground"

surfsense_web/components/layout/ui/sidebar/DocumentsSidebar.tsx

@@ -358,7 +358,6 @@ export function DocumentsSidebar({
 					onLoadMore={onLoadMore}
 					mentionedDocIds={mentionedDocIds}
 					onToggleChatMention={handleToggleChatMention}
-					onEditNavigate={() => onOpenChange(false)}
 					isSearchMode={isSearchMode || activeTypes.length > 0}
 				/>
 			</div>

surfsense_web/components/layout/ui/sidebar/InboxSidebar.tsx

@@ -24,6 +24,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getDocumentTypeLabel } from "@/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentTypeIcon";
 import { setTargetCommentIdAtom } from "@/atoms/chat/current-thread.atom";
 import { convertRenderedToDisplay } from "@/components/chat-comments/comment-item/comment-item";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/animated-tabs";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import {
@@ -43,7 +44,6 @@ import {
 import { Input } from "@/components/ui/input";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import {
@@ -140,8 +140,7 @@ interface TabDataSource {
 	markAllAsRead: () => Promise<boolean>;
 }
 
-interface InboxSidebarProps {
-	open: boolean;
+export interface InboxSidebarContentProps {
 	onOpenChange: (open: boolean) => void;
 	comments: TabDataSource;
 	status: TabDataSource;
@@ -149,14 +148,17 @@ interface InboxSidebarProps {
 	onCloseMobileSidebar?: () => void;
 }
 
-export function InboxSidebar({
-	open,
+interface InboxSidebarProps extends InboxSidebarContentProps {
+	open: boolean;
+}
+
+export function InboxSidebarContent({
 	onOpenChange,
 	comments,
 	status,
 	totalUnreadCount,
 	onCloseMobileSidebar,
-}: InboxSidebarProps) {
+}: InboxSidebarContentProps) {
 	const t = useTranslations("sidebar");
 	const router = useRouter();
 	const params = useParams();
@@ -199,7 +201,7 @@ export function InboxSidebar({
 				},
 			}),
 		staleTime: 30 * 1000,
-		enabled: isSearchMode && open,
+		enabled: isSearchMode,
 	});
 
 	useEffect(() => {
@@ -207,23 +209,13 @@ export function InboxSidebar({
 	}, []);
 
 	useEffect(() => {
-		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape" && open) {
-				onOpenChange(false);
-			}
-		};
-		document.addEventListener("keydown", handleEscape);
-		return () => document.removeEventListener("keydown", handleEscape);
-	}, [open, onOpenChange]);
-
-	useEffect(() => {
-		if (!open || !isMobile) return;
+		if (!isMobile) return;
 		const originalOverflow = document.body.style.overflow;
 		document.body.style.overflow = "hidden";
 		return () => {
 			document.body.style.overflow = originalOverflow;
 		};
-	}, [open, isMobile]);
+	}, [isMobile]);
 
 	useEffect(() => {
 		if (activeTab !== "status") {
@@ -239,7 +231,7 @@ export function InboxSidebar({
 		queryKey: cacheKeys.notifications.sourceTypes(searchSpaceId),
 		queryFn: () => notificationsApiService.getSourceTypes(searchSpaceId ?? undefined),
 		staleTime: 60 * 1000,
-		enabled: open && activeTab === "status",
+		enabled: activeTab === "status",
 	});
 
 	const statusSourceOptions = useMemo(() => {
@@ -327,7 +319,7 @@ export function InboxSidebar({
 
 	// Infinite scroll — uses active tab's pagination
 	useEffect(() => {
-		if (!activeSource.hasMore || activeSource.loadingMore || !open || isSearchMode) return;
+		if (!activeSource.hasMore || activeSource.loadingMore || isSearchMode) return;
 
 		const observer = new IntersectionObserver(
 			(entries) => {
@@ -347,7 +339,7 @@ export function InboxSidebar({
 		}
 
 		return () => observer.disconnect();
-	}, [activeSource.hasMore, activeSource.loadingMore, activeSource.loadMore, open, isSearchMode]);
+	}, [activeSource.hasMore, activeSource.loadingMore, activeSource.loadMore, isSearchMode]);
 
 	const handleItemClick = useCallback(
 		async (item: InboxItem) => {
@@ -522,7 +514,7 @@ export function InboxSidebar({
 
 	const isLoading = isSearchMode ? isSearchLoading : activeSource.loading;
 
-	const inboxContent = (
+	return (
 		<>
 			<div className="shrink-0 p-4 pb-2 space-y-3">
 				<div className="flex items-center justify-between">
@@ -546,7 +538,7 @@ export function InboxSidebar({
 								<Button
 									variant="ghost"
 									size="icon"
-									className="h-8 w-8 rounded-full"
+									className="h-7 w-7 rounded-full"
 									onClick={() => setFilterDrawerOpen(true)}
 								>
 									<ListFilter className="h-4 w-4 text-muted-foreground" />
@@ -694,7 +686,7 @@ export function InboxSidebar({
 								<Tooltip>
 									<TooltipTrigger asChild>
 										<DropdownMenuTrigger asChild>
-											<Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
+											<Button variant="ghost" size="icon" className="h-7 w-7 rounded-full">
 												<ListFilter className="h-4 w-4 text-muted-foreground" />
 												<span className="sr-only">{t("filter") || "Filter"}</span>
 											</Button>
@@ -790,7 +782,7 @@ export function InboxSidebar({
 							<Button
 								variant="ghost"
 								size="icon"
-								className="h-8 w-8 rounded-full"
+								className="h-7 w-7 rounded-full"
 								onClick={handleMarkAllAsRead}
 								disabled={totalUnreadCount === 0}
 							>
@@ -803,7 +795,7 @@ export function InboxSidebar({
 									<Button
 										variant="ghost"
 										size="icon"
-										className="h-8 w-8 rounded-full"
+										className="h-7 w-7 rounded-full"
 										onClick={handleMarkAllAsRead}
 										disabled={totalUnreadCount === 0}
 									>
@@ -851,14 +843,11 @@ export function InboxSidebar({
 						setActiveFilter("all");
 					}
 				}}
-				className="shrink-0 mx-4"
+				className="shrink-0 mx-4 mt-2"
 			>
-				<TabsList className="w-full h-auto p-0 bg-transparent rounded-none border-b">
-					<TabsTrigger
-						value="comments"
-						className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-					>
-						<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
+				<TabsList stretch showBottomBorder size="sm">
+					<TabsTrigger value="comments">
+						<span className="inline-flex items-center gap-1.5">
 							<MessageSquare className="h-4 w-4" />
 							<span>{t("comments") || "Comments"}</span>
 							<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
@@ -866,11 +855,8 @@ export function InboxSidebar({
 							</span>
 						</span>
 					</TabsTrigger>
-					<TabsTrigger
-						value="status"
-						className="flex-1 rounded-none border-b-2 border-transparent px-1 py-2 text-xs font-medium data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-					>
-						<span className="w-full inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-lg hover:bg-muted transition-colors">
+					<TabsTrigger value="status">
+						<span className="inline-flex items-center gap-1.5">
 							<History className="h-4 w-4" />
 							<span>{t("status") || "Status"}</span>
 							<span className="inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-full bg-primary/20 text-muted-foreground text-xs font-medium">
@@ -885,9 +871,9 @@ export function InboxSidebar({
 				{isLoading ? (
 					<div className="space-y-2">
 						{activeTab === "comments"
-							? [85, 60, 90, 70, 50, 75].map((titleWidth, i) => (
+							? [85, 60, 90, 70, 50, 75].map((titleWidth) => (
 									<div
-										key={`skeleton-comment-${i}`}
+										key={`skeleton-comment-${titleWidth}`}
 										className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]"
 									>
 										<Skeleton className="h-8 w-8 rounded-full shrink-0" />
@@ -898,9 +884,9 @@ export function InboxSidebar({
 										<Skeleton className="h-3 w-6 shrink-0 rounded" />
 									</div>
 								))
-							: [75, 90, 55, 80, 65, 85].map((titleWidth, i) => (
+							: [75, 90, 55, 80, 65, 85].map((titleWidth) => (
 									<div
-										key={`skeleton-status-${i}`}
+										key={`skeleton-status-${titleWidth}`}
 										className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]"
 									>
 										<Skeleton className="h-8 w-8 rounded-full shrink-0" />
@@ -1003,9 +989,9 @@ export function InboxSidebar({
 						)}
 						{activeSource.loadingMore &&
 							(activeTab === "comments"
-								? [80, 60, 90].map((titleWidth, i) => (
+								? [80, 60, 90].map((titleWidth) => (
 										<div
-											key={`loading-more-comment-${i}`}
+											key={`loading-more-comment-${titleWidth}`}
 											className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]"
 										>
 											<Skeleton className="h-8 w-8 rounded-full shrink-0" />
@@ -1016,9 +1002,9 @@ export function InboxSidebar({
 											<Skeleton className="h-3 w-6 shrink-0 rounded" />
 										</div>
 									))
-								: [70, 85, 55].map((titleWidth, i) => (
+								: [70, 85, 55].map((titleWidth) => (
 										<div
-											key={`loading-more-status-${i}`}
+											key={`loading-more-status-${titleWidth}`}
 											className="flex items-center gap-3 rounded-lg px-3 py-3 h-[80px]"
 										>
 											<Skeleton className="h-8 w-8 rounded-full shrink-0" />
@@ -1057,10 +1043,27 @@ export function InboxSidebar({
 			</div>
 		</>
 	);
+}
+
+export function InboxSidebar({
+	open,
+	onOpenChange,
+	comments,
+	status,
+	totalUnreadCount,
+	onCloseMobileSidebar,
+}: InboxSidebarProps) {
+	const t = useTranslations("sidebar");
 
 	return (
 		<SidebarSlideOutPanel open={open} onOpenChange={onOpenChange} ariaLabel={t("inbox") || "Inbox"}>
-			{inboxContent}
+			<InboxSidebarContent
+				onOpenChange={onOpenChange}
+				comments={comments}
+				status={status}
+				totalUnreadCount={totalUnreadCount}
+				onCloseMobileSidebar={onCloseMobileSidebar}
+			/>
 		</SidebarSlideOutPanel>
 	);
 }

surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx

@@ -14,8 +14,6 @@ interface MobileSidebarProps {
 	searchSpaces: SearchSpace[];
 	activeSearchSpaceId: number | null;
 	onSearchSpaceSelect: (id: number) => void;
-	onSearchSpaceDelete?: (searchSpace: SearchSpace) => void;
-	onSearchSpaceSettings?: (searchSpace: SearchSpace) => void;
 	onAddSearchSpace: () => void;
 	searchSpace: SearchSpace | null;
 	navItems: NavItem[];
@@ -30,6 +28,8 @@ interface MobileSidebarProps {
 	onChatArchive?: (chat: ChatItem) => void;
 	onViewAllSharedChats?: () => void;
 	onViewAllPrivateChats?: () => void;
+	isSharedChatsPanelOpen?: boolean;
+	isPrivateChatsPanelOpen?: boolean;
 	user: User;
 	onSettings?: () => void;
 	onManageMembers?: () => void;
@@ -56,8 +56,7 @@ export function MobileSidebar({
 	searchSpaces,
 	activeSearchSpaceId,
 	onSearchSpaceSelect,
-	onSearchSpaceDelete,
-	onSearchSpaceSettings,
+
 	onAddSearchSpace,
 	searchSpace,
 	navItems,
@@ -72,6 +71,8 @@ export function MobileSidebar({
 	onChatArchive,
 	onViewAllSharedChats,
 	onViewAllPrivateChats,
+	isSharedChatsPanelOpen = false,
+	isPrivateChatsPanelOpen = false,
 	user,
 	onSettings,
 	onManageMembers,
@@ -165,6 +166,8 @@ export function MobileSidebar({
 									}
 								: undefined
 						}
+						isSharedChatsPanelOpen={isSharedChatsPanelOpen}
+						isPrivateChatsPanelOpen={isPrivateChatsPanelOpen}
 						user={user}
 						onSettings={
 							onSettings

surfsense_web/components/layout/ui/sidebar/NavSection.tsx

@@ -2,9 +2,9 @@
 
 import { CheckCircle2, CircleAlert } from "lucide-react";
 import { Spinner } from "@/components/ui/spinner";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import type { NavItem } from "../../types/layout.types";
+import { SidebarButton } from "./SidebarButton";
 
 interface NavSectionProps {
 	items: NavItem[];
@@ -66,73 +66,49 @@ function StatusIcon({
 	return <FallbackIcon className={cn("shrink-0", className)} />;
 }
 
+function CollapsedOverlay({ item }: { item: NavItem }) {
+	const indicator = item.statusIndicator;
+	if (indicator && indicator !== "idle") {
+		return <StatusBadge status={indicator} />;
+	}
+	if (item.badge) {
+		return (
+			<span className="absolute top-0.5 right-0.5 inline-flex items-center justify-center min-w-[14px] h-[14px] px-0.5 rounded-full bg-red-500 text-white text-[9px] font-medium">
+				{item.badge}
+			</span>
+		);
+	}
+	return null;
+}
+
 export function NavSection({ items, onItemClick, isCollapsed = false }: NavSectionProps) {
 	return (
 		<div className={cn("flex flex-col gap-0.5 py-2", isCollapsed && "items-center")}>
 			{items.map((item) => {
-				const Icon = item.icon;
-				const indicator = item.statusIndicator;
-
 				const joyrideAttr =
-					item.title === "Documents" || item.title.toLowerCase().includes("documents")
-						? { "data-joyride": "documents-sidebar" }
-						: item.title === "Inbox" || item.title.toLowerCase().includes("inbox")
-							? { "data-joyride": "inbox-sidebar" }
-							: {};
-
-				if (isCollapsed) {
-					return (
-						<Tooltip key={item.url}>
-							<TooltipTrigger asChild>
-								<button
-									type="button"
-									onClick={() => onItemClick?.(item)}
-									className={cn(
-										"relative flex h-10 w-10 items-center justify-center rounded-md transition-colors",
-										"hover:bg-accent hover:text-accent-foreground",
-										"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-									)}
-									{...joyrideAttr}
-								>
-									<Icon className="h-4 w-4" />
-									{indicator && indicator !== "idle" ? (
-										<StatusBadge status={indicator} />
-									) : item.badge ? (
-										<span className="absolute top-0.5 right-0.5 inline-flex items-center justify-center min-w-[14px] h-[14px] px-0.5 rounded-full bg-red-500 text-white text-[9px] font-medium">
-											{item.badge}
-										</span>
-									) : null}
-									<span className="sr-only">{item.title}</span>
-								</button>
-							</TooltipTrigger>
-							<TooltipContent side="right">
-								{item.title}
-								{item.badge && ` (${item.badge})`}
-							</TooltipContent>
-						</Tooltip>
-					);
-				}
+					item.title === "Inbox" || item.title.toLowerCase().includes("inbox")
+						? { "data-joyride": "inbox-sidebar" as const }
+						: {};
 
 				return (
-					<button
+					<SidebarButton
 						key={item.url}
-						type="button"
+						icon={item.icon}
+						label={item.title}
 						onClick={() => onItemClick?.(item)}
-						className={cn(
-							"flex items-center gap-2 rounded-md mx-2 px-2 py-1.5 text-sm transition-colors text-left",
-							"hover:bg-accent hover:text-accent-foreground",
-							"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-						)}
-						{...joyrideAttr}
-					>
-						<StatusIcon status={indicator} FallbackIcon={Icon} className="h-4 w-4" />
-						<span className="flex-1 truncate">{item.title}</span>
-						{item.badge && (
-							<span className="inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-medium">
-								{item.badge}
-							</span>
-						)}
-					</button>
+						isCollapsed={isCollapsed}
+						isActive={item.isActive}
+						badge={item.badge}
+						collapsedOverlay={<CollapsedOverlay item={item} />}
+						expandedIconNode={
+							<StatusIcon
+								status={item.statusIndicator}
+								FallbackIcon={item.icon}
+								className="h-4 w-4"
+							/>
+						}
+						buttonProps={joyrideAttr}
+					/>
 				);
 			})}
 		</div>

surfsense_web/components/layout/ui/sidebar/PageUsageDisplay.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { useSetAtom } from "jotai";
 import { Zap } from "lucide-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
+import { morePagesDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
 
@@ -12,8 +12,7 @@ interface PageUsageDisplayProps {
 }
 
 export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProps) {
-	const params = useParams();
-	const searchSpaceId = params.search_space_id;
+	const setMorePagesOpen = useSetAtom(morePagesDialogAtom);
 	const usagePercentage = (pagesUsed / pagesLimit) * 100;
 
 	return (
@@ -26,9 +25,10 @@ export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProp
 					<span className="font-medium">{usagePercentage.toFixed(0)}%</span>
 				</div>
 				<Progress value={usagePercentage} className="h-1.5" />
-				<Link
-					href={`/dashboard/${searchSpaceId}/more-pages`}
-					className="group flex items-center justify-between rounded-md px-1.5 py-1 -mx-1.5 transition-colors hover:bg-accent"
+				<button
+					type="button"
+					onClick={() => setMorePagesOpen(true)}
+					className="group flex w-full items-center justify-between rounded-md px-1.5 py-1 -mx-1.5 transition-colors hover:bg-accent"
 				>
 					<span className="flex items-center gap-1.5 text-xs text-muted-foreground group-hover:text-accent-foreground">
 						<Zap className="h-3 w-3 shrink-0" />
@@ -37,7 +37,7 @@ export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProp
 					<Badge className="h-4 rounded px-1 text-[10px] font-semibold leading-none bg-emerald-600 text-white border-transparent hover:bg-emerald-600">
 						FREE
 					</Badge>
-				</Link>
+				</button>
 			</div>
 		</div>
 	);

surfsense_web/components/layout/ui/sidebar/Sidebar.tsx

@@ -1,17 +1,16 @@
 "use client";
 
-import { FolderOpen, PenSquare } from "lucide-react";
+import { PenSquare } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useState } from "react";
-import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 import { SIDEBAR_MIN_WIDTH } from "../../hooks/useSidebarResize";
 import type { ChatItem, NavItem, PageUsage, SearchSpace, User } from "../../types/layout.types";
 import { ChatListItem } from "./ChatListItem";
 import { NavSection } from "./NavSection";
 import { PageUsageDisplay } from "./PageUsageDisplay";
+import { SidebarButton } from "./SidebarButton";
 import { SidebarCollapseButton } from "./SidebarCollapseButton";
 import { SidebarHeader } from "./SidebarHeader";
 import { SidebarSection } from "./SidebarSection";
@@ -42,6 +41,8 @@ interface SidebarProps {
 	onChatArchive?: (chat: ChatItem) => void;
 	onViewAllSharedChats?: () => void;
 	onViewAllPrivateChats?: () => void;
+	isSharedChatsPanelOpen?: boolean;
+	isPrivateChatsPanelOpen?: boolean;
 	user: User;
 	onSettings?: () => void;
 	onManageMembers?: () => void;
@@ -54,7 +55,6 @@ interface SidebarProps {
 	isLoadingChats?: boolean;
 	disableTooltips?: boolean;
 	sidebarWidth?: number;
-	onResizeMouseDown?: (e: React.MouseEvent) => void;
 	isResizing?: boolean;
 }
 
@@ -74,6 +74,8 @@ export function Sidebar({
 	onChatArchive,
 	onViewAllSharedChats,
 	onViewAllPrivateChats,
+	isSharedChatsPanelOpen = false,
+	isPrivateChatsPanelOpen = false,
 	user,
 	onSettings,
 	onManageMembers,
@@ -86,7 +88,6 @@ export function Sidebar({
 	isLoadingChats = false,
 	disableTooltips = false,
 	sidebarWidth = SIDEBAR_MIN_WIDTH,
-	onResizeMouseDown,
 	isResizing = false,
 }: SidebarProps) {
 	const t = useTranslations("sidebar");
@@ -102,19 +103,6 @@ export function Sidebar({
 			)}
 			style={!isCollapsed ? { width: sidebarWidth } : undefined}
 		>
-			{/* Resize handle on right border */}
-			{!isCollapsed && onResizeMouseDown && (
-				<div
-					role="slider"
-					aria-label="Resize sidebar"
-					aria-valuemin={0}
-					aria-valuemax={100}
-					aria-valuenow={50}
-					tabIndex={0}
-					onMouseDown={onResizeMouseDown}
-					className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-border active:bg-border z-10"
-				/>
-			)}
 			{/* Header - search space name or collapse button when collapsed */}
 			{isCollapsed ? (
 				<div className="flex h-14 shrink-0 items-center justify-center border-b">
@@ -143,23 +131,13 @@ export function Sidebar({
 			)}
 
 			{/* New chat button */}
-			<div className="p-2">
-				{isCollapsed ? (
-					<Tooltip>
-						<TooltipTrigger asChild>
-							<Button variant="outline" size="icon" className="w-full h-10" onClick={onNewChat}>
-								<PenSquare className="h-4 w-4" />
-								<span className="sr-only">{t("new_chat")}</span>
-							</Button>
-						</TooltipTrigger>
-						<TooltipContent side="right">{t("new_chat")}</TooltipContent>
-					</Tooltip>
-				) : (
-					<Button variant="outline" className="w-full justify-start gap-2" onClick={onNewChat}>
-						<PenSquare className="h-4 w-4" />
-						{t("new_chat")}
-					</Button>
-				)}
+			<div className={cn("flex flex-col gap-0.5 py-2", isCollapsed && "items-center")}>
+				<SidebarButton
+					icon={PenSquare}
+					label={t("new_chat")}
+					onClick={onNewChat}
+					isCollapsed={isCollapsed}
+				/>
 			</div>
 
 			{/* Chat sections - fills available space */}
@@ -173,34 +151,16 @@ export function Sidebar({
 						defaultOpen={true}
 						fillHeight={false}
 						className="shrink-0 max-h-[50%] flex flex-col"
+						alwaysShowAction={!disableTooltips && isSharedChatsPanelOpen}
 						action={
 							onViewAllSharedChats ? (
-								disableTooltips ? (
-									<Button
-										variant="ghost"
-										size="icon"
-										className="h-8 w-8 shrink-0 hover:bg-transparent hover:text-current focus-visible:ring-0"
-										onClick={onViewAllSharedChats}
-									>
-										<FolderOpen className="h-4 w-4" />
-									</Button>
-								) : (
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-8 w-8 shrink-0 hover:bg-transparent hover:text-current focus-visible:ring-0"
-												onClick={onViewAllSharedChats}
-											>
-												<FolderOpen className="h-4 w-4" />
-											</Button>
-										</TooltipTrigger>
-										<TooltipContent side="top">
-											{t("view_all_shared_chats") || "View all shared chats"}
-										</TooltipContent>
-									</Tooltip>
-								)
+								<button
+									type="button"
+									onClick={onViewAllSharedChats}
+									className="text-xs font-medium text-muted-foreground/60 hover:text-muted-foreground transition-colors whitespace-nowrap cursor-pointer bg-transparent border-none p-0 focus:outline-none"
+								>
+									{!disableTooltips && isSharedChatsPanelOpen ? t("hide") : t("show_all")}
+								</button>
 							) : undefined
 						}
 					>
@@ -247,34 +207,16 @@ export function Sidebar({
 						title={t("chats")}
 						defaultOpen={true}
 						fillHeight={true}
+						alwaysShowAction={!disableTooltips && isPrivateChatsPanelOpen}
 						action={
 							onViewAllPrivateChats ? (
-								disableTooltips ? (
-									<Button
-										variant="ghost"
-										size="icon"
-										className="h-8 w-8 shrink-0 hover:bg-transparent hover:text-current focus-visible:ring-0"
-										onClick={onViewAllPrivateChats}
-									>
-										<FolderOpen className="h-4 w-4" />
-									</Button>
-								) : (
-									<Tooltip>
-										<TooltipTrigger asChild>
-											<Button
-												variant="ghost"
-												size="icon"
-												className="h-8 w-8 shrink-0 hover:bg-transparent hover:text-current focus-visible:ring-0"
-												onClick={onViewAllPrivateChats}
-											>
-												<FolderOpen className="h-4 w-4" />
-											</Button>
-										</TooltipTrigger>
-										<TooltipContent side="top">
-											{t("view_all_private_chats") || "View all private chats"}
-										</TooltipContent>
-									</Tooltip>
-								)
+								<button
+									type="button"
+									onClick={onViewAllPrivateChats}
+									className="text-xs font-medium text-muted-foreground/60 hover:text-muted-foreground transition-colors whitespace-nowrap cursor-pointer bg-transparent border-none p-0 focus:outline-none"
+								>
+									{!disableTooltips && isPrivateChatsPanelOpen ? t("hide") : t("show_all")}
+								</button>
 							) : undefined
 						}
 					>

surfsense_web/components/layout/ui/sidebar/SidebarButton.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import type { LucideIcon } from "lucide-react";
+import type React from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
+
+interface SidebarButtonProps {
+	icon: LucideIcon;
+	label: string;
+	onClick?: () => void;
+	isCollapsed?: boolean;
+	isActive?: boolean;
+	badge?: React.ReactNode;
+	/** Overlay in the top-right corner of the collapsed icon (e.g. status badge) */
+	collapsedOverlay?: React.ReactNode;
+	/** Custom icon node for expanded mode — overrides the default <Icon> rendering */
+	expandedIconNode?: React.ReactNode;
+	className?: string;
+	/** Extra attributes spread onto the inner <button> (e.g. data-joyride) */
+	buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+const expandedClassName = cn(
+	"flex items-center gap-2 rounded-md mx-2 px-2 py-1.5 text-sm transition-colors text-left",
+	"hover:bg-accent hover:text-accent-foreground",
+	"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+);
+
+const collapsedClassName = cn(
+	"relative flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+	"hover:bg-accent hover:text-accent-foreground",
+	"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+);
+
+export function SidebarButton({
+	icon: Icon,
+	label,
+	onClick,
+	isCollapsed = false,
+	isActive = false,
+	badge,
+	collapsedOverlay,
+	expandedIconNode,
+	className,
+	buttonProps,
+}: SidebarButtonProps) {
+	const activeClassName = "bg-accent text-accent-foreground";
+
+	if (isCollapsed) {
+		return (
+			<Tooltip>
+				<TooltipTrigger asChild>
+					<button
+						type="button"
+						onClick={onClick}
+						className={cn(collapsedClassName, isActive && activeClassName, className)}
+						{...buttonProps}
+					>
+						<Icon className="h-4 w-4" />
+						{collapsedOverlay}
+						<span className="sr-only">{label}</span>
+					</button>
+				</TooltipTrigger>
+				<TooltipContent side="right">
+					{label}
+					{typeof badge === "string" && ` (${badge})`}
+				</TooltipContent>
+			</Tooltip>
+		);
+	}
+
+	return (
+		<button
+			type="button"
+			onClick={onClick}
+			className={cn(expandedClassName, isActive && activeClassName, className)}
+			{...buttonProps}
+		>
+			{expandedIconNode ?? <Icon className="h-4 w-4 shrink-0" />}
+			<span className="flex-1 truncate">{label}</span>
+			{badge && typeof badge !== "string" ? badge : null}
+			{badge && typeof badge === "string" ? (
+				<span className="inline-flex items-center justify-center min-w-4 h-4 px-1 rounded-full bg-red-500 text-white text-[10px] font-medium">
+					{badge}
+				</span>
+			) : null}
+		</button>
+	);
+}

surfsense_web/components/layout/ui/sidebar/SidebarSection.tsx

@@ -10,6 +10,7 @@ interface SidebarSectionProps {
 	defaultOpen?: boolean;
 	children: React.ReactNode;
 	action?: React.ReactNode;
+	alwaysShowAction?: boolean;
 	persistentAction?: React.ReactNode;
 	className?: string;
 	fillHeight?: boolean;
@@ -20,6 +21,7 @@ export function SidebarSection({
 	defaultOpen = true,
 	children,
 	action,
+	alwaysShowAction = false,
 	persistentAction,
 	className,
 	fillHeight = false,
@@ -37,27 +39,32 @@ export function SidebarSection({
 				className
 			)}
 		>
-			<div className="flex items-center group/section shrink-0">
-				<CollapsibleTrigger className="flex flex-1 items-center gap-1.5 px-2 py-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
+			<div className="flex items-center group/section shrink-0 px-2 py-1.5">
+				<CollapsibleTrigger className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors min-w-0">
+					<span className="truncate">{title}</span>
 					<ChevronRight
 						className={cn(
 							"h-3.5 w-3.5 shrink-0 transition-transform duration-200",
 							isOpen && "rotate-90"
 						)}
 					/>
-					<span className="uppercase tracking-wider truncate">{title}</span>
 				</CollapsibleTrigger>
 
-				{/* Action button - visible on hover (always visible on mobile) */}
 				{action && (
-					<div className="shrink-0 opacity-100 md:opacity-0 md:group-hover/section:opacity-100 transition-opacity pr-1 flex items-center">
+					<div
+						className={cn(
+							"transition-opacity ml-1.5 flex items-center",
+							alwaysShowAction
+								? "opacity-100"
+								: "opacity-100 md:opacity-0 md:group-hover/section:opacity-100"
+						)}
+					>
 						{action}
 					</div>
 				)}
 
-				{/* Persistent action - always visible */}
 				{persistentAction && (
-					<div className="shrink-0 pr-1 flex items-center">{persistentAction}</div>
+					<div className="shrink-0 ml-auto flex items-center">{persistentAction}</div>
 				)}
 			</div>
 

surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx

@@ -1,15 +1,11 @@
 "use client";
 
 import { AnimatePresence, motion } from "motion/react";
-import { useEffect } from "react";
+import { useCallback, useEffect } from "react";
 import { useMediaQuery } from "@/hooks/use-media-query";
-import { cn } from "@/lib/utils";
-import { useSidebarContextSafe } from "../../hooks";
 
 export const SLIDEOUT_PANEL_OPENED_EVENT = "slideout-panel-opened";
 
-const SIDEBAR_COLLAPSED_WIDTH = 60;
-
 interface SidebarSlideOutPanelProps {
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
@@ -19,11 +15,12 @@ interface SidebarSlideOutPanelProps {
 }
 
 /**
- * Reusable slide-out panel that appears from the right edge of the sidebar.
- * Used by InboxSidebar (floating mode), AllSharedChatsSidebar, and AllPrivateChatsSidebar.
+ * Reusable slide-out panel that extends from the sidebar.
  *
- * Must be rendered inside a positioned container (the LayoutShell's relative flex container)
- * and within the SidebarProvider context.
+ * Desktop: absolutely positioned at the sidebar's right edge, overlaying the main
+ * content with a blur backdrop. Does not push/shrink the main content.
+ *
+ * Mobile: full-width absolute overlay (unchanged).
  */
 export function SidebarSlideOutPanel({
 	open,
@@ -33,11 +30,6 @@ export function SidebarSlideOutPanel({
 	children,
 }: SidebarSlideOutPanelProps) {
 	const isMobile = !useMediaQuery("(min-width: 640px)");
-	const sidebarContext = useSidebarContextSafe();
-	const isCollapsed = sidebarContext?.isCollapsed ?? false;
-	const sidebarWidth = isCollapsed
-		? SIDEBAR_COLLAPSED_WIDTH
-		: (sidebarContext?.sidebarWidth ?? 240);
 
 	useEffect(() => {
 		if (open) {
@@ -45,41 +37,30 @@ export function SidebarSlideOutPanel({
 		}
 	}, [open]);
 
-	return (
-		<AnimatePresence>
-			{open && (
-				<>
-					{/* Backdrop overlay with blur — desktop only, covers main content area (right of sidebar) */}
-					{!isMobile && (
-						<motion.div
-							initial={{ opacity: 0 }}
-							animate={{ opacity: 1 }}
-							exit={{ opacity: 0 }}
-							transition={{ duration: 0.15 }}
-							style={{ left: sidebarWidth }}
-							className="absolute inset-y-0 right-0 z-20 bg-black/30 backdrop-blur-sm"
-							onClick={() => onOpenChange(false)}
-							aria-hidden="true"
-						/>
-					)}
+	const handleEscape = useCallback(
+		(e: KeyboardEvent) => {
+			if (e.key === "Escape") onOpenChange(false);
+		},
+		[onOpenChange]
+	);
 
-					{/* Clip container - positioned at sidebar edge with overflow hidden */}
-					<div
-						style={{
-							left: isMobile ? 0 : sidebarWidth,
-							width: isMobile ? "100%" : width,
-						}}
-						className={cn("absolute z-30 overflow-hidden pointer-events-none", "inset-y-0")}
-					>
+	useEffect(() => {
+		if (!open) return;
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [open, handleEscape]);
+
+	if (isMobile) {
+		return (
+			<AnimatePresence>
+				{open && (
+					<div className="absolute left-0 inset-y-0 z-30 w-full overflow-hidden pointer-events-none">
 						<motion.div
 							initial={{ x: "-100%" }}
 							animate={{ x: 0 }}
 							exit={{ x: "-100%" }}
 							transition={{ type: "tween", duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
-							className={cn(
-								"h-full w-full bg-sidebar text-sidebar-foreground flex flex-col pointer-events-auto select-none",
-								"sm:border-r sm:shadow-xl"
-							)}
+							className="h-full w-full bg-sidebar text-sidebar-foreground flex flex-col pointer-events-auto select-none"
 							role="dialog"
 							aria-modal="true"
 							aria-label={ariaLabel}
@@ -87,6 +68,45 @@ export function SidebarSlideOutPanel({
 							{children}
 						</motion.div>
 					</div>
+				)}
+			</AnimatePresence>
+		);
+	}
+
+	return (
+		<AnimatePresence initial={false}>
+			{open && (
+				<>
+					{/* Blur backdrop covering the main content area (right of sidebar) */}
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.15 }}
+						className="absolute z-10 bg-black/30 backdrop-blur-sm rounded-xl"
+						style={{ top: -9, bottom: -9, left: "calc(100% + 1px)", width: "200vw" }}
+						onClick={() => onOpenChange(false)}
+						aria-hidden="true"
+					/>
+
+					{/* Panel extending from sidebar's right edge, flush with the wrapper border */}
+					<motion.div
+						initial={{ width: 0 }}
+						animate={{ width }}
+						exit={{ width: 0 }}
+						transition={{ type: "tween", duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+						className="absolute z-20 overflow-hidden"
+						style={{ left: "100%", top: -1, bottom: -1 }}
+					>
+						<div
+							style={{ width }}
+							className="h-full bg-sidebar text-sidebar-foreground flex flex-col select-none border rounded-r-xl shadow-xl"
+							role="dialog"
+							aria-label={ariaLabel}
+						>
+							{children}
+						</div>
+					</motion.div>
 				</>
 			)}
 		</AnimatePresence>

surfsense_web/components/layout/ui/sidebar/SidebarUserProfile.tsx

@@ -122,7 +122,7 @@ function UserAvatar({
 				alt="User avatar"
 				width={32}
 				height={32}
-				className="h-8 w-8 shrink-0 rounded-lg object-cover"
+				className="h-8 w-8 shrink-0 rounded-lg object-cover select-none"
 				referrerPolicy="no-referrer"
 				unoptimized
 			/>

surfsense_web/components/layout/ui/sidebar/index.ts

@@ -1,9 +1,9 @@
-export { AllPrivateChatsSidebar } from "./AllPrivateChatsSidebar";
-export { AllSharedChatsSidebar } from "./AllSharedChatsSidebar";
-export { AnnouncementsSidebar } from "./AnnouncementsSidebar";
+export { AllPrivateChatsSidebar, AllPrivateChatsSidebarContent } from "./AllPrivateChatsSidebar";
+export { AllSharedChatsSidebar, AllSharedChatsSidebarContent } from "./AllSharedChatsSidebar";
+export { AnnouncementsSidebar, AnnouncementsSidebarContent } from "./AnnouncementsSidebar";
 export { ChatListItem } from "./ChatListItem";
 export { DocumentsSidebar } from "./DocumentsSidebar";
-export { InboxSidebar } from "./InboxSidebar";
+export { InboxSidebar, InboxSidebarContent } from "./InboxSidebar";
 export { MobileSidebar, MobileSidebarTrigger } from "./MobileSidebar";
 export { NavSection } from "./NavSection";
 export { PageUsageDisplay } from "./PageUsageDisplay";

surfsense_web/components/new-chat/chat-share-button.tsx

@@ -3,12 +3,13 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { useAtomValue, useSetAtom } from "jotai";
 import { Earth, User, Users } from "lucide-react";
-import { useParams, useRouter } from "next/navigation";
+
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import { currentThreadAtom, setThreadVisibilityAtom } from "@/atoms/chat/current-thread.atom";
 import { myAccessAtom } from "@/atoms/members/members-query.atoms";
 import { createPublicChatSnapshotMutationAtom } from "@/atoms/public-chat-snapshots/public-chat-snapshots-mutation.atoms";
+import { searchSpaceSettingsDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { Button } from "@/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -48,9 +49,8 @@ const visibilityOptions: {
 
 export function ChatShareButton({ thread, onVisibilityChange, className }: ChatShareButtonProps) {
 	const queryClient = useQueryClient();
-	const router = useRouter();
-	const params = useParams();
 	const [open, setOpen] = useState(false);
+	const setSearchSpaceSettingsDialog = useSetAtom(searchSpaceSettingsDialogAtom);
 
 	// Use Jotai atom for visibility (single source of truth)
 	const currentThreadState = useAtomValue(currentThreadAtom);
@@ -148,7 +148,10 @@ export function ChatShareButton({ thread, onVisibilityChange, className }: ChatS
 						<button
 							type="button"
 							onClick={() =>
-								router.push(`/dashboard/${params.search_space_id}/settings?tab=public-links`)
+								setSearchSpaceSettingsDialog({
+									open: true,
+									initialTab: "public-links",
+								})
 							}
 							className="flex items-center justify-center h-8 w-8 rounded-md bg-muted/50 hover:bg-muted transition-colors"
 						>

surfsense_web/components/new-chat/model-selector.tsx

@@ -233,11 +233,14 @@ export function ModelSelector({
 		<Popover open={open} onOpenChange={setOpen}>
 			<PopoverTrigger asChild>
 				<Button
-					variant="outline"
+					variant="ghost"
 					size="sm"
 					role="combobox"
 					aria-expanded={open}
-					className={cn("h-8 gap-2 px-3 text-sm border-border/60 select-none", className)}
+					className={cn(
+						"h-8 gap-2 px-3 text-sm bg-main-panel hover:bg-accent/50 dark:hover:bg-white/[0.06] border border-border/40 select-none",
+						className
+					)}
 				>
 					{isLoading ? (
 						<>
@@ -281,12 +284,7 @@ export function ModelSelector({
 							)}
 						</>
 					)}
-					<ChevronDown
-						className={cn(
-							"h-3.5 w-3.5 text-muted-foreground ml-1 shrink-0 transition-transform duration-200",
-							open && "rotate-180"
-						)}
-					/>
+					<ChevronDown className="h-3.5 w-3.5 text-muted-foreground ml-1 shrink-0" />
 				</Button>
 			</PopoverTrigger>
 

surfsense_web/components/onboarding-tour.tsx

@@ -23,15 +23,15 @@ interface TourStep {
 const TOUR_STEPS: TourStep[] = [
 	{
 		target: '[data-joyride="connector-icon"]',
-		title: "Connect your data sources",
-		content: "Connect and sync data from Gmail, Drive, Slack, Notion, Jira, Confluence, and more.",
+		title: "Manage your tools",
+		content: "Enable or disable AI tools and configure capabilities.",
 		placement: "bottom",
 	},
 	{
-		target: '[data-joyride="documents-sidebar"]',
-		title: "Manage your documents",
-		content: "Access and manage all your uploaded documents.",
-		placement: "right",
+		target: '[data-joyride="upload-button"]',
+		title: "Upload documents",
+		content: "Upload files to your search space.",
+		placement: "left",
 	},
 	{
 		target: '[data-joyride="inbox-sidebar"]',
@@ -100,7 +100,7 @@ function Spotlight({
 }) {
 	const rect = targetEl.getBoundingClientRect();
 	const padding = 6;
-	const shadowColor = isDarkMode ? "#172554" : "#3b82f6";
+	const shadowColor = isDarkMode ? "#3f3f46" : "#3b82f6";
 
 	// Check if this is the connector icon step - verify both the selector matches AND the element matches
 	// This prevents the shape from changing before targetEl updates
@@ -187,7 +187,7 @@ function TourTooltip({
 		}
 	}, [stepIndex]);
 
-	const bgColor = isDarkMode ? "#18181b" : "#ffffff";
+	const bgColor = isDarkMode ? "#27272a" : "#ffffff";
 	const textColor = isDarkMode ? "#ffffff" : "#18181b";
 	const mutedTextColor = isDarkMode ? "#a1a1aa" : "#71717a";
 
@@ -195,15 +195,24 @@ function TourTooltip({
 	const getPointerStyles = (): React.CSSProperties => {
 		const lineLength = 16;
 		const dotSize = 6;
-		// Check if this is the documents step (stepIndex === 1) or inbox step (stepIndex === 2)
-		const isDocumentsStep = stepIndex === 1;
+		const isUploadStep = stepIndex === 1;
 		const isInboxStep = stepIndex === 2;
 
 		if (position.pointerPosition === "left") {
 			return {
 				position: "absolute",
 				left: -lineLength - dotSize,
-				top: isDocumentsStep || isInboxStep ? "calc(50% - 8px)" : "50%",
+				top: isInboxStep ? "calc(50% - 8px)" : "50%",
+				transform: "translateY(-50%)",
+				display: "flex",
+				alignItems: "center",
+			};
+		}
+		if (position.pointerPosition === "right") {
+			return {
+				position: "absolute",
+				right: -lineLength - dotSize,
+				top: isUploadStep ? "calc(50% - 12px)" : "50%",
 				transform: "translateY(-50%)",
 				display: "flex",
 				alignItems: "center",
@@ -224,7 +233,7 @@ function TourTooltip({
 	};
 
 	const renderPointer = () => {
-		const lineColor = isDarkMode ? "#18181B" : "#ffffff";
+		const lineColor = isDarkMode ? "#27272a" : "#ffffff";
 
 		if (position.pointerPosition === "left") {
 			return (
@@ -247,6 +256,27 @@ function TourTooltip({
 				</div>
 			);
 		}
+		if (position.pointerPosition === "right") {
+			return (
+				<div style={getPointerStyles()}>
+					<div
+						style={{
+							width: 16,
+							height: 2,
+							backgroundColor: lineColor,
+						}}
+					/>
+					<div
+						style={{
+							width: 6,
+							height: 6,
+							borderRadius: "50%",
+							backgroundColor: lineColor,
+						}}
+					/>
+				</div>
+			);
+		}
 		if (position.pointerPosition === "top") {
 			return (
 				<div style={getPointerStyles()}>

surfsense_web/components/providers/ElectricProvider.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import { useAtomValue } from "jotai";
-import { usePathname } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import { currentUserAtom } from "@/atoms/user/user-query.atoms";
-import { useGlobalLoadingEffect } from "@/hooks/use-global-loading";
-import { getBearerToken } from "@/lib/auth-utils";
-import {
-	cleanupElectric,
-	type ElectricClient,
-	initElectric,
-	isElectricInitialized,
-} from "@/lib/electric/client";
-import { ElectricContext } from "@/lib/electric/context";
-
-interface ElectricProviderProps {
-	children: React.ReactNode;
-}
-
-/**
- * Initializes user-specific PGlite database with Electric SQL sync.
- * Handles user isolation, cleanup, and re-initialization on user change.
- */
-export function ElectricProvider({ children }: ElectricProviderProps) {
-	const [electricClient, setElectricClient] = useState<ElectricClient | null>(null);
-	const [error, setError] = useState<Error | null>(null);
-	const {
-		data: user,
-		isSuccess: isUserLoaded,
-		isError: isUserError,
-	} = useAtomValue(currentUserAtom);
-	const previousUserIdRef = useRef<string | null>(null);
-	const initializingRef = useRef(false);
-	const pathname = usePathname();
-
-	useEffect(() => {
-		if (typeof window === "undefined") return;
-
-		// No user logged in - cleanup if previous user existed
-		if (!isUserLoaded || !user?.id) {
-			if (previousUserIdRef.current && isElectricInitialized()) {
-				console.log("[ElectricProvider] User logged out, cleaning up...");
-				cleanupElectric().then(() => {
-					previousUserIdRef.current = null;
-					setElectricClient(null);
-				});
-			}
-			return;
-		}
-
-		const userId = String(user.id);
-
-		// Skip if already initialized for this user or currently initializing
-		if ((electricClient && previousUserIdRef.current === userId) || initializingRef.current) {
-			return;
-		}
-
-		initializingRef.current = true;
-		let mounted = true;
-
-		async function init() {
-			try {
-				console.log(`[ElectricProvider] Initializing for user: ${userId}`);
-				const client = await initElectric(userId);
-
-				if (mounted) {
-					previousUserIdRef.current = userId;
-					setElectricClient(client);
-					setError(null);
-					console.log(`[ElectricProvider] ✅ Ready for user: ${userId}`);
-				}
-			} catch (err) {
-				console.error("[ElectricProvider] Failed to initialize:", err);
-				if (mounted) {
-					setError(err instanceof Error ? err : new Error("Failed to initialize Electric SQL"));
-					setElectricClient(null);
-				}
-			} finally {
-				if (mounted) {
-					initializingRef.current = false;
-				}
-			}
-		}
-
-		init();
-		return () => {
-			mounted = false;
-		};
-	}, [user?.id, isUserLoaded, electricClient]);
-
-	const hasToken = typeof window !== "undefined" && !!getBearerToken();
-
-	// Only block UI on dashboard routes; public pages render immediately
-	const requiresElectricLoading = pathname?.startsWith("/dashboard");
-	const shouldShowLoading =
-		hasToken && isUserLoaded && !!user?.id && !electricClient && !error && requiresElectricLoading;
-
-	useGlobalLoadingEffect(shouldShowLoading);
-
-	// Render immediately for unauthenticated users or failed user queries
-	if (!hasToken || !isUserLoaded || !user?.id || isUserError) {
-		return <ElectricContext.Provider value={null}>{children}</ElectricContext.Provider>;
-	}
-
-	// Render with null context while initializing
-	if (!electricClient && !error) {
-		return <ElectricContext.Provider value={null}>{children}</ElectricContext.Provider>;
-	}
-
-	if (error) {
-		console.warn("[ElectricProvider] Initialization failed, sync may not work:", error.message);
-	}
-
-	return <ElectricContext.Provider value={electricClient}>{children}</ElectricContext.Provider>;
-}

surfsense_web/components/providers/ZeroProvider.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import {
+	useConnectionState,
+	useZero,
+	ZeroProvider as ZeroReactProvider,
+} from "@rocicorp/zero/react";
+import { useAtomValue } from "jotai";
+import { useEffect, useRef } from "react";
+import { currentUserAtom } from "@/atoms/user/user-query.atoms";
+import { getBearerToken, handleUnauthorized, refreshAccessToken } from "@/lib/auth-utils";
+import { queries } from "@/zero/queries";
+import { schema } from "@/zero/schema";
+
+const cacheURL = process.env.NEXT_PUBLIC_ZERO_CACHE_URL || "http://localhost:4848";
+
+function ZeroAuthGuard({ children }: { children: React.ReactNode }) {
+	const zero = useZero();
+	const connectionState = useConnectionState();
+	const isRefreshingRef = useRef(false);
+
+	useEffect(() => {
+		if (connectionState.name !== "needs-auth" || isRefreshingRef.current) return;
+
+		isRefreshingRef.current = true;
+
+		refreshAccessToken()
+			.then((newToken) => {
+				if (newToken) {
+					zero.connection.connect({ auth: newToken });
+				} else {
+					handleUnauthorized();
+				}
+			})
+			.finally(() => {
+				isRefreshingRef.current = false;
+			});
+	}, [connectionState, zero]);
+
+	return <>{children}</>;
+}
+
+export function ZeroProvider({ children }: { children: React.ReactNode }) {
+	const { data: user } = useAtomValue(currentUserAtom);
+
+	const hasUser = !!user?.id;
+	const userID = hasUser ? String(user.id) : "anon";
+	const context = hasUser ? { userId: String(user.id) } : undefined;
+	const auth = hasUser ? getBearerToken() || undefined : undefined;
+
+	const opts = {
+		userID,
+		schema,
+		queries,
+		context,
+		cacheURL,
+		auth,
+	};
+
+	return (
+		<ZeroReactProvider {...opts}>
+			{hasUser ? <ZeroAuthGuard>{children}</ZeroAuthGuard> : children}
+		</ZeroReactProvider>
+	);
+}

surfsense_web/components/public-chat-snapshots/public-chat-snapshot-row.tsx

@@ -1,13 +1,14 @@
 "use client";
 
 import { Check, Copy, ExternalLink, MessageSquare, Trash2 } from "lucide-react";
-import Image from "next/image";
 import { useCallback, useRef, useState } from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import type { PublicChatSnapshotDetail } from "@/contracts/types/chat-threads.types";
+import { useMediaQuery } from "@/hooks/use-media-query";
 
 function getInitials(name: string): string {
 	const parts = name.trim().split(/\s+/);
@@ -36,6 +37,7 @@ export function PublicChatSnapshotRow({
 }: PublicChatSnapshotRowProps) {
 	const [copied, setCopied] = useState(false);
 	const copyTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+	const isDesktop = useMediaQuery("(min-width: 768px)");
 
 	const handleCopyClick = useCallback(() => {
 		onCopy(snapshot);
@@ -56,8 +58,8 @@ export function PublicChatSnapshotRow({
 		<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
 			<CardContent className="p-4 flex flex-col gap-3 h-full">
 				{/* Header: Title + Actions */}
-				<div className="flex items-start justify-between gap-2">
-					<div className="min-w-0 flex-1">
+				<div className="relative">
+					<div className="min-w-0 pr-16 sm:pr-0 sm:group-hover:pr-16">
 						<h4
 							className="text-sm font-semibold tracking-tight truncate"
 							title={snapshot.thread_title}
@@ -65,9 +67,9 @@ export function PublicChatSnapshotRow({
 							{snapshot.thread_title}
 						</h4>
 					</div>
-					<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150">
+					<div className="flex items-center gap-0.5 shrink-0 sm:hidden sm:group-hover:flex absolute right-0 top-0">
 						<TooltipProvider>
-							<Tooltip>
+							<Tooltip open={isDesktop ? undefined : false}>
 								<TooltipTrigger asChild>
 									<Button
 										variant="ghost"
@@ -85,7 +87,7 @@ export function PublicChatSnapshotRow({
 						</TooltipProvider>
 						{canDelete && (
 							<TooltipProvider>
-								<Tooltip>
+								<Tooltip open={isDesktop ? undefined : false}>
 									<TooltipTrigger asChild>
 										<Button
 											variant="ghost"
@@ -126,7 +128,7 @@ export function PublicChatSnapshotRow({
 						</p>
 					</div>
 					<TooltipProvider>
-						<Tooltip>
+						<Tooltip open={isDesktop ? undefined : false}>
 							<TooltipTrigger asChild>
 								<Button
 									variant="ghost"
@@ -153,24 +155,17 @@ export function PublicChatSnapshotRow({
 						<>
 							<span className="text-muted-foreground/30">·</span>
 							<TooltipProvider>
-								<Tooltip>
+								<Tooltip open={isDesktop ? undefined : false}>
 									<TooltipTrigger asChild>
 										<div className="flex items-center gap-1.5 cursor-default">
-											{member.avatarUrl ? (
-												<Image
-													src={member.avatarUrl}
-													alt={member.name}
-													width={18}
-													height={18}
-													className="h-4.5 w-4.5 rounded-full object-cover shrink-0"
-												/>
-											) : (
-												<div className="flex h-4.5 w-4.5 items-center justify-center rounded-full bg-gradient-to-br from-primary/20 to-primary/5 shrink-0">
-													<span className="text-[9px] font-semibold text-primary">
-														{getInitials(member.name)}
-													</span>
-												</div>
-											)}
+											<Avatar className="size-4.5 shrink-0">
+												{member.avatarUrl && (
+													<AvatarImage src={member.avatarUrl} alt={member.name} />
+												)}
+												<AvatarFallback className="text-[9px]">
+													{getInitials(member.name)}
+												</AvatarFallback>
+											</Avatar>
 											<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]">
 												{member.name}
 											</span>

surfsense_web/components/public-chat/public-chat-view.tsx

@@ -8,6 +8,7 @@ import { GeneratePodcastToolUI } from "@/components/tool-ui/generate-podcast";
 import { GenerateReportToolUI } from "@/components/tool-ui/generate-report";
 import { LinkPreviewToolUI } from "@/components/tool-ui/link-preview";
 import { ScrapeWebpageToolUI } from "@/components/tool-ui/scrape-webpage";
+import { GenerateVideoPresentationToolUI } from "@/components/tool-ui/video-presentation";
 import { Spinner } from "@/components/ui/spinner";
 import { usePublicChat } from "@/hooks/use-public-chat";
 import { usePublicChatRuntime } from "@/hooks/use-public-chat-runtime";
@@ -23,10 +24,12 @@ export function PublicChatView({ shareToken }: PublicChatViewProps) {
 	const { data, isLoading, error } = usePublicChat(shareToken);
 	const runtime = usePublicChatRuntime({ data });
 
+	const navbarScrolledBg = "bg-main-panel/80 backdrop-blur-md border border-border/30 shadow-lg";
+
 	if (isLoading) {
 		return (
-			<main className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white overflow-x-hidden">
-				<Navbar />
+			<main className="min-h-screen bg-main-panel text-foreground overflow-x-hidden">
+				<Navbar scrolledBgClassName={navbarScrolledBg} />
 				<div className="flex h-screen items-center justify-center">
 					<Spinner size="lg" className="text-muted-foreground" />
 				</div>
@@ -39,12 +42,13 @@ export function PublicChatView({ shareToken }: PublicChatViewProps) {
 	}
 
 	return (
-		<main className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white overflow-x-hidden">
-			<Navbar />
+		<main className="min-h-screen bg-main-panel text-foreground overflow-x-hidden">
+			<Navbar scrolledBgClassName={navbarScrolledBg} />
 			<AssistantRuntimeProvider runtime={runtime}>
 				{/* Tool UIs for rendering tool results */}
 				<GeneratePodcastToolUI />
 				<GenerateReportToolUI />
+				<GenerateVideoPresentationToolUI />
 				<LinkPreviewToolUI />
 				<DisplayImageToolUI />
 				<ScrapeWebpageToolUI />

surfsense_web/components/public-chat/public-thread.tsx

@@ -24,7 +24,7 @@ interface PublicThreadProps {
 export const PublicThread: FC<PublicThreadProps> = ({ footer }) => {
 	return (
 		<ThreadPrimitive.Root
-			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-background"
+			className="aui-root aui-thread-root @container flex h-full min-h-0 flex-col bg-main-panel"
 			style={{
 				["--thread-max-width" as string]: "44rem",
 			}}
@@ -42,7 +42,7 @@ export const PublicThread: FC<PublicThreadProps> = ({ footer }) => {
 			</ThreadPrimitive.Viewport>
 
 			{footer && (
-				<div className="sticky bottom-0 z-20 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
+				<div className="sticky bottom-0 z-20 border-t bg-main-panel/95 backdrop-blur supports-backdrop-filter:bg-main-panel/60">
 					{footer}
 				</div>
 			)}

surfsense_web/components/report-panel/report-panel.tsx

@@ -307,7 +307,7 @@ export function ReportPanelContent({
 						size="sm"
 						onClick={handleCopy}
 						disabled={isLoading || !reportContent?.content}
-						className="h-8 min-w-[80px] px-3.5 py-4 text-[15px]"
+						className="h-8 min-w-[80px] px-3.5 py-4 text-[15px] bg-sidebar select-none"
 					>
 						{copied ? "Copied" : "Copy"}
 					</Button>
@@ -319,7 +319,7 @@ export function ReportPanelContent({
 								variant="outline"
 								size="sm"
 								disabled={isLoading || !reportContent?.content}
-								className="h-8 px-3.5 py-4 text-[15px] gap-1.5"
+								className="h-8 px-3.5 py-4 text-[15px] gap-1.5 bg-sidebar select-none"
 							>
 								Export
 								<ChevronDownIcon className="size-3" />
@@ -327,7 +327,7 @@ export function ReportPanelContent({
 						</DropdownMenuTrigger>
 						<DropdownMenuContent
 							align="start"
-							className={`min-w-[200px] dark:bg-neutral-900 dark:border dark:border-white/5${insideDrawer ? " z-[100]" : ""}`}
+							className={`min-w-[200px] select-none${insideDrawer ? " z-[100]" : ""}`}
 						>
 							{!shareToken && (
 								<>
@@ -398,14 +398,18 @@ export function ReportPanelContent({
 					{versions.length > 1 && (
 						<DropdownMenu modal={insideDrawer ? false : undefined}>
 							<DropdownMenuTrigger asChild>
-								<Button variant="outline" size="sm" className="h-8 px-3.5 py-4 text-[15px] gap-1.5">
+								<Button
+									variant="outline"
+									size="sm"
+									className="h-8 px-3.5 py-4 text-[15px] gap-1.5 bg-sidebar select-none"
+								>
 									v{activeVersionIndex + 1}
 									<ChevronDownIcon className="size-3" />
 								</Button>
 							</DropdownMenuTrigger>
 							<DropdownMenuContent
 								align="start"
-								className={`min-w-[120px] dark:bg-neutral-900 dark:border dark:border-white/5${insideDrawer ? " z-[100]" : ""}`}
+								className={`min-w-[120px] select-none${insideDrawer ? " z-[100]" : ""}`}
 							>
 								{versions.map((v, i) => (
 									<DropdownMenuItem
@@ -455,6 +459,7 @@ export function ReportPanelContent({
 							onSave={handleSave}
 							hasUnsavedChanges={editedMarkdown !== null}
 							isSaving={saving}
+							className="[&_[role=toolbar]]:!bg-sidebar"
 						/>
 					)
 				) : (
@@ -491,7 +496,7 @@ function DesktopReportPanel() {
 	return (
 		<div
 			ref={panelRef}
-			className="flex w-[50%] max-w-[700px] min-w-[380px] flex-col border-l bg-background animate-in slide-in-from-right-4 duration-300 ease-out"
+			className="flex w-[50%] max-w-[700px] min-w-[380px] flex-col border-l bg-sidebar text-sidebar-foreground animate-in slide-in-from-right-4 duration-300 ease-out"
 		>
 			<ReportPanelContent
 				reportId={panelState.reportId}
@@ -521,7 +526,7 @@ function MobileReportDrawer() {
 			shouldScaleBackground={false}
 		>
 			<DrawerContent
-				className="h-[90vh] max-h-[90vh] z-80 !rounded-none border-none"
+				className="h-[95vh] max-h-[95vh] z-80 bg-sidebar overflow-hidden"
 				overlayClassName="z-80"
 			>
 				<DrawerHandle />

surfsense_web/components/settings/general-settings-manager.tsx

@@ -2,7 +2,7 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { useAtomValue } from "jotai";
-import { Info, RotateCcw, Save } from "lucide-react";
+import { Info } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -81,14 +81,6 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 		}
 	};
 
-	const handleReset = () => {
-		if (searchSpace) {
-			setName(searchSpace.name || "");
-			setDescription(searchSpace.description || "");
-			setHasChanges(false);
-		}
-	};
-
 	if (loading) {
 		return (
 			<div className="space-y-4 md:space-y-6">
@@ -161,37 +153,16 @@ export function GeneralSettingsManager({ searchSpaceId }: GeneralSettingsManager
 			</Card>
 
 			{/* Action Buttons */}
-			<div className="flex items-center justify-between pt-3 md:pt-4 gap-2">
+			<div className="flex justify-end pt-3 md:pt-4">
 				<Button
 					variant="outline"
-					onClick={handleReset}
-					disabled={!hasChanges || saving}
-					className="flex items-center gap-2 text-xs md:text-sm h-9 md:h-10"
-				>
-					<RotateCcw className="h-3.5 w-3.5 md:h-4 md:w-4" />
-					{t("general_reset")}
-				</Button>
-				<Button
 					onClick={handleSave}
 					disabled={!hasChanges || saving || !name.trim()}
-					className="flex items-center gap-2 text-xs md:text-sm h-9 md:h-10"
+					className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
 				>
-					<Save className="h-3.5 w-3.5 md:h-4 md:w-4" />
 					{saving ? t("general_saving") : t("general_save")}
 				</Button>
 			</div>
-
-			{hasChanges && (
-				<Alert
-					variant="default"
-					className="bg-blue-50 dark:bg-blue-950/20 border-blue-200 dark:border-blue-800 py-3 md:py-4"
-				>
-					<Info className="h-3 w-3 md:h-4 md:w-4 text-blue-600 dark:text-blue-500 shrink-0" />
-					<AlertDescription className="text-blue-800 dark:text-blue-300 text-xs md:text-sm">
-						{t("general_unsaved_changes")}
-					</AlertDescription>
-				</Alert>
-			)}
 		</div>
 	);
 }

surfsense_web/components/settings/image-model-manager.tsx

@@ -13,8 +13,6 @@ import {
 	Trash2,
 	Wand2,
 } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import Image from "next/image";
 import { useCallback, useMemo, useState } from "react";
 import { toast } from "sonner";
 import {
@@ -39,6 +37,7 @@ import {
 	AlertDialogHeader,
 	AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
@@ -75,6 +74,7 @@ import {
 	IMAGE_GEN_PROVIDERS,
 } from "@/contracts/enums/image-gen-providers";
 import type { ImageGenerationConfig } from "@/contracts/types/new-llm-config.types";
+import { useMediaQuery } from "@/hooks/use-media-query";
 import { getProviderIcon } from "@/lib/provider-icons";
 import { cn } from "@/lib/utils";
 
@@ -82,16 +82,6 @@ interface ImageModelManagerProps {
 	searchSpaceId: number;
 }
 
-const container = {
-	hidden: { opacity: 0 },
-	show: { opacity: 1, transition: { staggerChildren: 0.05 } },
-};
-
-const item = {
-	hidden: { opacity: 0, y: 20 },
-	show: { opacity: 1, y: 0 },
-};
-
 function getInitials(name: string): string {
 	const parts = name.trim().split(/\s+/);
 	if (parts.length >= 2) {
@@ -101,6 +91,7 @@ function getInitials(name: string): string {
 }
 
 export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
+	const isDesktop = useMediaQuery("(min-width: 768px)");
 	// Image gen config atoms
 	const {
 		mutateAsync: createConfig,
@@ -282,19 +273,20 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 			{/* Header */}
 			<div className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0">
 				<Button
-					variant="outline"
+					variant="secondary"
 					size="sm"
 					onClick={() => refreshConfigs()}
 					disabled={isLoading}
-					className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+					className="gap-2"
 				>
-					<RefreshCw className={cn("h-3 w-3 md:h-4 md:w-4", configsLoading && "animate-spin")} />
+					<RefreshCw className={cn("h-3.5 w-3.5", configsLoading && "animate-spin")} />
 					Refresh
 				</Button>
 				{canCreate && (
 					<Button
+						variant="outline"
 						onClick={openNewDialog}
-						className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+						className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
 					>
 						Add Image Model
 					</Button>
@@ -302,25 +294,18 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 			</div>
 
 			{/* Errors */}
-			<AnimatePresence>
-				{errors.map((err) => (
-					<motion.div
-						key={err?.message}
-						initial={{ opacity: 0, y: -10 }}
-						animate={{ opacity: 1, y: 0 }}
-						exit={{ opacity: 0, y: -10 }}
-					>
-						<Alert variant="destructive" className="py-3">
-							<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
-							<AlertDescription className="text-xs md:text-sm">{err?.message}</AlertDescription>
-						</Alert>
-					</motion.div>
-				))}
-			</AnimatePresence>
+			{errors.map((err) => (
+				<div key={err?.message}>
+					<Alert variant="destructive" className="py-3">
+						<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+						<AlertDescription className="text-xs md:text-sm">{err?.message}</AlertDescription>
+					</Alert>
+				</div>
+			))}
 
 			{/* Read-only / Limited permissions notice */}
 			{access && !isLoading && isReadOnly && (
-				<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
+				<div>
 					<Alert className="bg-muted/50 py-3 md:py-4">
 						<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 						<AlertDescription className="text-xs md:text-sm">
@@ -328,10 +313,10 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 							configurations. Contact a space owner to request additional permissions.
 						</AlertDescription>
 					</Alert>
-				</motion.div>
+				</div>
 			)}
 			{access && !isLoading && !isReadOnly && (!canCreate || !canDelete) && (
-				<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
+				<div>
 					<Alert className="bg-muted/50 py-3 md:py-4">
 						<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 						<AlertDescription className="text-xs md:text-sm">
@@ -343,7 +328,7 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 							{!canDelete && ", but cannot delete them"}.
 						</AlertDescription>
 					</Alert>
-				</motion.div>
+				</div>
 			)}
 
 			{/* Global info */}
@@ -429,136 +414,117 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 							</CardContent>
 						</Card>
 					) : (
-						<motion.div
-							variants={container}
-							initial="hidden"
-							animate="show"
-							className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
-						>
-							<AnimatePresence mode="popLayout">
-								{userConfigs?.map((config) => {
-									const member = config.user_id ? memberMap.get(config.user_id) : null;
+						<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
+							{userConfigs?.map((config) => {
+								const member = config.user_id ? memberMap.get(config.user_id) : null;
 
-									return (
-										<motion.div
-											key={config.id}
-											variants={item}
-											layout
-											exit={{ opacity: 0, scale: 0.95 }}
-										>
-											<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
-												<CardContent className="p-4 flex flex-col gap-3 h-full">
-													{/* Header: Name + Actions */}
-													<div className="flex items-start justify-between gap-2">
-														<div className="min-w-0 flex-1">
-															<h4 className="text-sm font-semibold tracking-tight truncate">
-																{config.name}
-															</h4>
-															{config.description && (
-																<p className="text-[11px] text-muted-foreground/70 truncate mt-0.5">
-																	{config.description}
-																</p>
-															)}
-														</div>
-														{(canUpdate || canDelete) && (
-															<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150">
-																{canUpdate && (
-																	<TooltipProvider>
-																		<Tooltip>
-																			<TooltipTrigger asChild>
-																				<Button
-																					variant="ghost"
-																					size="icon"
-																					onClick={() => openEditDialog(config)}
-																					className="h-7 w-7 text-muted-foreground hover:text-foreground"
-																				>
-																					<Edit3 className="h-3 w-3" />
-																				</Button>
-																			</TooltipTrigger>
-																			<TooltipContent>Edit</TooltipContent>
-																		</Tooltip>
-																	</TooltipProvider>
-																)}
-																{canDelete && (
-																	<TooltipProvider>
-																		<Tooltip>
-																			<TooltipTrigger asChild>
-																				<Button
-																					variant="ghost"
-																					size="icon"
-																					onClick={() => setConfigToDelete(config)}
-																					className="h-7 w-7 text-muted-foreground hover:text-destructive"
-																				>
-																					<Trash2 className="h-3 w-3" />
-																				</Button>
-																			</TooltipTrigger>
-																			<TooltipContent>Delete</TooltipContent>
-																		</Tooltip>
-																	</TooltipProvider>
-																)}
-															</div>
+								return (
+									<div key={config.id}>
+										<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
+											<CardContent className="p-4 flex flex-col gap-3 h-full">
+												{/* Header: Name + Actions */}
+												<div className="flex items-start justify-between gap-2">
+													<div className="min-w-0 flex-1">
+														<h4 className="text-sm font-semibold tracking-tight truncate">
+															{config.name}
+														</h4>
+														{config.description && (
+															<p className="text-[11px] text-muted-foreground/70 truncate mt-0.5">
+																{config.description}
+															</p>
 														)}
 													</div>
-
-													{/* Provider + Model */}
-													<div className="flex items-center gap-2 flex-wrap">
-														{getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
-														<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
-															{config.model_name}
-														</code>
-													</div>
-
-													{/* Footer: Date + Creator */}
-													<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto">
-														<span className="text-[11px] text-muted-foreground/60">
-															{new Date(config.created_at).toLocaleDateString(undefined, {
-																year: "numeric",
-																month: "short",
-																day: "numeric",
-															})}
-														</span>
-														{member && (
-															<>
-																<span className="text-muted-foreground/30">·</span>
+													{(canUpdate || canDelete) && (
+														<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150">
+															{canUpdate && (
 																<TooltipProvider>
-																	<Tooltip>
+																	<Tooltip open={isDesktop ? undefined : false}>
 																		<TooltipTrigger asChild>
-																			<div className="flex items-center gap-1.5 cursor-default">
-																				{member.avatarUrl ? (
-																					<Image
-																						src={member.avatarUrl}
-																						alt={member.name}
-																						width={18}
-																						height={18}
-																						className="h-4.5 w-4.5 rounded-full object-cover shrink-0"
-																					/>
-																				) : (
-																					<div className="flex h-4.5 w-4.5 items-center justify-center rounded-full bg-gradient-to-br from-primary/20 to-primary/5 shrink-0">
-																						<span className="text-[9px] font-semibold text-primary">
-																							{getInitials(member.name)}
-																						</span>
-																					</div>
-																				)}
-																				<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]">
-																					{member.name}
-																				</span>
-																			</div>
+																			<Button
+																				variant="ghost"
+																				size="icon"
+																				onClick={() => openEditDialog(config)}
+																				className="h-7 w-7 text-muted-foreground hover:text-foreground"
+																			>
+																				<Edit3 className="h-3 w-3" />
+																			</Button>
 																		</TooltipTrigger>
-																		<TooltipContent side="bottom">
-																			{member.email || member.name}
-																		</TooltipContent>
+																		<TooltipContent>Edit</TooltipContent>
 																	</Tooltip>
 																</TooltipProvider>
-															</>
-														)}
-													</div>
-												</CardContent>
-											</Card>
-										</motion.div>
-									);
-								})}
-							</AnimatePresence>
-						</motion.div>
+															)}
+															{canDelete && (
+																<TooltipProvider>
+																	<Tooltip open={isDesktop ? undefined : false}>
+																		<TooltipTrigger asChild>
+																			<Button
+																				variant="ghost"
+																				size="icon"
+																				onClick={() => setConfigToDelete(config)}
+																				className="h-7 w-7 text-muted-foreground hover:text-destructive"
+																			>
+																				<Trash2 className="h-3 w-3" />
+																			</Button>
+																		</TooltipTrigger>
+																		<TooltipContent>Delete</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
+															)}
+														</div>
+													)}
+												</div>
+
+												{/* Provider + Model */}
+												<div className="flex items-center gap-2 flex-wrap">
+													{getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
+													<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
+														{config.model_name}
+													</code>
+												</div>
+
+												{/* Footer: Date + Creator */}
+												<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto">
+													<span className="text-[11px] text-muted-foreground/60">
+														{new Date(config.created_at).toLocaleDateString(undefined, {
+															year: "numeric",
+															month: "short",
+															day: "numeric",
+														})}
+													</span>
+													{member && (
+														<>
+															<span className="text-muted-foreground/30">·</span>
+															<TooltipProvider>
+																<Tooltip open={isDesktop ? undefined : false}>
+																	<TooltipTrigger asChild>
+																		<div className="flex items-center gap-1.5 cursor-default">
+																			<Avatar className="size-4.5 shrink-0">
+																				{member.avatarUrl && (
+																					<AvatarImage src={member.avatarUrl} alt={member.name} />
+																				)}
+																				<AvatarFallback className="text-[9px]">
+																					{getInitials(member.name)}
+																				</AvatarFallback>
+																			</Avatar>
+																			<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]">
+																				{member.name}
+																			</span>
+																		</div>
+																	</TooltipTrigger>
+																	<TooltipContent side="bottom">
+																		{member.email || member.name}
+																	</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+														</>
+													)}
+												</div>
+											</CardContent>
+										</Card>
+									</div>
+								);
+							})}
+						</div>
 					)}
 				</div>
 			)}
@@ -646,14 +612,14 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 											role="combobox"
 											className="w-full justify-between font-normal"
 										>
-											{formData.model_name || "Select or type a model..."}
+											{formData.model_name || "Select a model"}
 											<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
 										</Button>
 									</PopoverTrigger>
 									<PopoverContent className="w-full p-0" align="start">
 										<Command>
 											<CommandInput
-												placeholder="Search or type model name..."
+												placeholder="Search a model name"
 												value={formData.model_name}
 												onValueChange={(val) => setFormData((p) => ({ ...p, model_name: val }))}
 											/>
@@ -733,10 +699,9 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 						)}
 
 						{/* Actions */}
-						<div className="flex gap-3 pt-4 border-t">
+						<div className="flex justify-end gap-3 pt-4 border-t">
 							<Button
-								variant="outline"
-								className="flex-1"
+								variant="secondary"
 								onClick={() => {
 									setIsDialogOpen(false);
 									setEditingConfig(null);
@@ -746,7 +711,6 @@ export function ImageModelManager({ searchSpaceId }: ImageModelManagerProps) {
 								Cancel
 							</Button>
 							<Button
-								className="flex-1"
 								onClick={handleFormSubmit}
 								disabled={
 									isSubmitting ||

surfsense_web/components/settings/llm-role-manager.tsx

@@ -13,7 +13,6 @@ import {
 	Save,
 	Shuffle,
 } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import {
@@ -229,13 +228,13 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 			{/* Header actions */}
 			<div className="flex items-center justify-between">
 				<Button
-					variant="outline"
+					variant="secondary"
 					size="sm"
 					onClick={() => refreshConfigs()}
 					disabled={isLoading}
-					className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+					className="gap-2"
 				>
-					<RefreshCw className="h-3 w-3 md:h-4 md:w-4" />
+					<RefreshCw className="h-3.5 w-3.5" />
 					Refresh
 				</Button>
 				{isAssignmentComplete && !isLoading && !hasError && (
@@ -250,25 +249,18 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 			</div>
 
 			{/* Error Alert */}
-			<AnimatePresence>
-				{hasError && (
-					<motion.div
-						key="error-alert"
-						initial={{ opacity: 0, y: -10 }}
-						animate={{ opacity: 1, y: 0 }}
-						exit={{ opacity: 0, y: -10 }}
-					>
-						<Alert variant="destructive" className="py-3 md:py-4">
-							<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
-							<AlertDescription className="text-xs md:text-sm">
-								{(configsError?.message ?? "Failed to load LLM configurations") ||
-									(preferencesError?.message ?? "Failed to load preferences") ||
-									(globalConfigsError?.message ?? "Failed to load global configurations")}
-							</AlertDescription>
-						</Alert>
-					</motion.div>
-				)}
-			</AnimatePresence>
+			{hasError && (
+				<div>
+					<Alert variant="destructive" className="py-3 md:py-4">
+						<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+						<AlertDescription className="text-xs md:text-sm">
+							{(configsError?.message ?? "Failed to load LLM configurations") ||
+								(preferencesError?.message ?? "Failed to load preferences") ||
+								(globalConfigsError?.message ?? "Failed to load global configurations")}
+						</AlertDescription>
+					</Alert>
+				</div>
+			)}
 
 			{/* Loading Skeleton */}
 			{isLoading && (
@@ -322,13 +314,8 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 
 			{/* Role Assignment Cards */}
 			{!isLoading && !hasError && hasAnyConfigs && (
-				<motion.div
-					initial={{ opacity: 0 }}
-					animate={{ opacity: 1 }}
-					transition={{ duration: 0.3 }}
-					className="grid gap-4 grid-cols-1 lg:grid-cols-2"
-				>
-					{Object.entries(ROLE_DESCRIPTIONS).map(([key, role], index) => {
+				<div className="grid gap-4 grid-cols-1 lg:grid-cols-2">
+					{Object.entries(ROLE_DESCRIPTIONS).map(([key, role]) => {
 						const IconComponent = role.icon;
 						const isImageRole = role.configType === "image";
 						const currentAssignment = assignments[role.prefKey as keyof typeof assignments];
@@ -349,12 +336,7 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 							assignedConfig && "is_auto_mode" in assignedConfig && assignedConfig.is_auto_mode;
 
 						return (
-							<motion.div
-								key={key}
-								initial={{ opacity: 0, y: 15 }}
-								animate={{ opacity: 1, y: 0 }}
-								transition={{ delay: index * 0.08, duration: 0.3 }}
-							>
+							<div key={key}>
 								<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
 									<CardContent className="p-4 md:p-5 space-y-4">
 										{/* Role Header */}
@@ -542,47 +524,39 @@ export function LLMRoleManager({ searchSpaceId }: LLMRoleManagerProps) {
 										)}
 									</CardContent>
 								</Card>
-							</motion.div>
+							</div>
 						);
 					})}
-				</motion.div>
+				</div>
 			)}
 
 			{/* Save / Reset Bar */}
-			<AnimatePresence>
-				{hasChanges && (
-					<motion.div
-						initial={{ opacity: 0, y: 10 }}
-						animate={{ opacity: 1, y: 0 }}
-						exit={{ opacity: 0, y: 10 }}
-						transition={{ duration: 0.2 }}
-						className="flex items-center justify-between gap-3 rounded-lg border border-border bg-muted/50 p-3 md:p-4"
-					>
-						<p className="text-xs md:text-sm text-muted-foreground">You have unsaved changes</p>
-						<div className="flex items-center gap-2">
-							<Button
-								variant="outline"
-								size="sm"
-								onClick={handleReset}
-								disabled={isSaving}
-								className="h-8 text-xs gap-1.5"
-							>
-								<RotateCcw className="w-3 h-3" />
-								Reset
-							</Button>
-							<Button
-								size="sm"
-								onClick={handleSave}
-								disabled={isSaving}
-								className="h-8 text-xs gap-1.5"
-							>
-								<Save className="w-3 h-3" />
-								{isSaving ? "Saving…" : "Save Changes"}
-							</Button>
-						</div>
-					</motion.div>
-				)}
-			</AnimatePresence>
+			{hasChanges && (
+				<div className="flex items-center justify-between gap-3 rounded-lg border border-border bg-muted/50 p-3 md:p-4">
+					<p className="text-xs md:text-sm text-muted-foreground">You have unsaved changes</p>
+					<div className="flex items-center gap-2">
+						<Button
+							variant="outline"
+							size="sm"
+							onClick={handleReset}
+							disabled={isSaving}
+							className="h-8 text-xs gap-1.5"
+						>
+							<RotateCcw className="w-3 h-3" />
+							Reset
+						</Button>
+						<Button
+							size="sm"
+							onClick={handleSave}
+							disabled={isSaving}
+							className="h-8 text-xs gap-1.5"
+						>
+							<Save className="w-3 h-3" />
+							{isSaving ? "Saving…" : "Save Changes"}
+						</Button>
+					</div>
+				</div>
+			)}
 		</div>
 	);
 }

surfsense_web/components/settings/model-config-manager.tsx

@@ -12,8 +12,6 @@ import {
 	Trash2,
 	Wand2,
 } from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
-import Image from "next/image";
 import { useCallback, useMemo, useState } from "react";
 import { membersAtom, myAccessAtom } from "@/atoms/members/members-query.atoms";
 import {
@@ -37,6 +35,7 @@ import {
 	AlertDialogHeader,
 	AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -51,6 +50,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { Spinner } from "@/components/ui/spinner";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import type { NewLLMConfig } from "@/contracts/types/new-llm-config.types";
+import { useMediaQuery } from "@/hooks/use-media-query";
 import { getProviderIcon } from "@/lib/provider-icons";
 import { cn } from "@/lib/utils";
 
@@ -58,21 +58,6 @@ interface ModelConfigManagerProps {
 	searchSpaceId: number;
 }
 
-const container = {
-	hidden: { opacity: 0 },
-	show: {
-		opacity: 1,
-		transition: {
-			staggerChildren: 0.05,
-		},
-	},
-};
-
-const item = {
-	hidden: { opacity: 0, y: 20 },
-	show: { opacity: 1, y: 0 },
-};
-
 function getInitials(name: string): string {
 	const parts = name.trim().split(/\s+/);
 	if (parts.length >= 2) {
@@ -82,6 +67,7 @@ function getInitials(name: string): string {
 }
 
 export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
+	const isDesktop = useMediaQuery("(min-width: 768px)");
 	// Mutations
 	const { mutateAsync: createConfig, isPending: isCreating } = useAtomValue(
 		createNewLLMConfigMutationAtom
@@ -195,20 +181,20 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 			{/* Header actions */}
 			<div className="flex items-center justify-between">
 				<Button
-					variant="outline"
+					variant="secondary"
 					size="sm"
 					onClick={() => refreshConfigs()}
 					disabled={isLoading}
-					className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+					className="gap-2"
 				>
-					<RefreshCw className={cn("h-3 w-3 md:h-4 md:w-4", isLoading && "animate-spin")} />
+					<RefreshCw className={cn("h-3.5 w-3.5", isLoading && "animate-spin")} />
 					Refresh
 				</Button>
 				{canCreate && (
 					<Button
+						variant="outline"
 						onClick={openNewDialog}
-						size="sm"
-						className="flex items-center gap-2 text-xs md:text-sm h-8 md:h-9"
+						className="gap-2 bg-white text-black hover:bg-neutral-100 dark:bg-white dark:text-black dark:hover:bg-neutral-200"
 					>
 						Add Configuration
 					</Button>
@@ -216,27 +202,20 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 			</div>
 
 			{/* Fetch Error Alert */}
-			<AnimatePresence>
-				{fetchError && (
-					<motion.div
-						key="fetch-error"
-						initial={{ opacity: 0, y: -10 }}
-						animate={{ opacity: 1, y: 0 }}
-						exit={{ opacity: 0, y: -10 }}
-					>
-						<Alert variant="destructive" className="py-3 md:py-4">
-							<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
-							<AlertDescription className="text-xs md:text-sm">
-								{fetchError?.message ?? "Failed to load configurations"}
-							</AlertDescription>
-						</Alert>
-					</motion.div>
-				)}
-			</AnimatePresence>
+			{fetchError && (
+				<div>
+					<Alert variant="destructive" className="py-3 md:py-4">
+						<AlertCircle className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
+						<AlertDescription className="text-xs md:text-sm">
+							{fetchError?.message ?? "Failed to load configurations"}
+						</AlertDescription>
+					</Alert>
+				</div>
+			)}
 
 			{/* Read-only / Limited permissions notice */}
 			{access && !isLoading && isReadOnly && (
-				<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
+				<div>
 					<Alert className="bg-muted/50 py-3 md:py-4">
 						<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 						<AlertDescription className="text-xs md:text-sm">
@@ -244,10 +223,10 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 							Contact a space owner to request additional permissions.
 						</AlertDescription>
 					</Alert>
-				</motion.div>
+				</div>
 			)}
 			{access && !isLoading && !isReadOnly && (!canCreate || !canUpdate || !canDelete) && (
-				<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
+				<div>
 					<Alert className="bg-muted/50 py-3 md:py-4">
 						<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 						<AlertDescription className="text-xs md:text-sm">
@@ -259,12 +238,12 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 							{!canDelete && ", but cannot delete them"}.
 						</AlertDescription>
 					</Alert>
-				</motion.div>
+				</div>
 			)}
 
 			{/* Global Configs Info */}
 			{globalConfigs.length > 0 && (
-				<motion.div initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }}>
+				<div>
 					<Alert className="bg-muted/50 py-3 md:py-4">
 						<Info className="h-3 w-3 md:h-4 md:w-4 shrink-0" />
 						<AlertDescription className="text-xs md:text-sm">
@@ -275,7 +254,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 							</span>
 						</AlertDescription>
 					</Alert>
-				</motion.div>
+				</div>
 			)}
 
 			{/* Loading Skeleton */}
@@ -317,7 +296,7 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 			{!isLoading && (
 				<div className="space-y-4">
 					{configs?.length === 0 ? (
-						<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }}>
+						<div>
 							<Card className="border-dashed border-2 border-muted-foreground/25">
 								<CardContent className="flex flex-col items-center justify-center py-10 md:py-16 text-center">
 									<div className="rounded-full bg-gradient-to-br from-violet-500/10 to-purple-500/10 p-4 md:p-6 mb-4 md:mb-6">
@@ -343,161 +322,142 @@ export function ModelConfigManager({ searchSpaceId }: ModelConfigManagerProps) {
 									)}
 								</CardContent>
 							</Card>
-						</motion.div>
+						</div>
 					) : (
-						<motion.div
-							variants={container}
-							initial="hidden"
-							animate="show"
-							className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3"
-						>
-							<AnimatePresence mode="popLayout">
-								{configs?.map((config) => {
-									const member = config.user_id ? memberMap.get(config.user_id) : null;
+						<div className="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
+							{configs?.map((config) => {
+								const member = config.user_id ? memberMap.get(config.user_id) : null;
 
-									return (
-										<motion.div
-											key={config.id}
-											variants={item}
-											layout
-											exit={{ opacity: 0, scale: 0.95 }}
-										>
-											<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
-												<CardContent className="p-4 flex flex-col gap-3 h-full">
-													{/* Header: Name + Actions */}
-													<div className="flex items-start justify-between gap-2">
-														<div className="min-w-0 flex-1">
-															<h4 className="text-sm font-semibold tracking-tight truncate">
-																{config.name}
-															</h4>
-															{config.description && (
-																<p className="text-[11px] text-muted-foreground/70 truncate mt-0.5">
-																	{config.description}
-																</p>
-															)}
-														</div>
-														{(canUpdate || canDelete) && (
-															<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150">
-																{canUpdate && (
-																	<TooltipProvider>
-																		<Tooltip>
-																			<TooltipTrigger asChild>
-																				<Button
-																					variant="ghost"
-																					size="icon"
-																					onClick={() => openEditDialog(config)}
-																					className="h-7 w-7 text-muted-foreground hover:text-foreground"
-																				>
-																					<Edit3 className="h-3 w-3" />
-																				</Button>
-																			</TooltipTrigger>
-																			<TooltipContent>Edit</TooltipContent>
-																		</Tooltip>
-																	</TooltipProvider>
-																)}
-																{canDelete && (
-																	<TooltipProvider>
-																		<Tooltip>
-																			<TooltipTrigger asChild>
-																				<Button
-																					variant="ghost"
-																					size="icon"
-																					onClick={() => setConfigToDelete(config)}
-																					className="h-7 w-7 text-muted-foreground hover:text-destructive"
-																				>
-																					<Trash2 className="h-3 w-3" />
-																				</Button>
-																			</TooltipTrigger>
-																			<TooltipContent>Delete</TooltipContent>
-																		</Tooltip>
-																	</TooltipProvider>
-																)}
-															</div>
+								return (
+									<div key={config.id}>
+										<Card className="group relative overflow-hidden transition-all duration-200 border-border/60 hover:shadow-md h-full">
+											<CardContent className="p-4 flex flex-col gap-3 h-full">
+												{/* Header: Name + Actions */}
+												<div className="flex items-start justify-between gap-2">
+													<div className="min-w-0 flex-1">
+														<h4 className="text-sm font-semibold tracking-tight truncate">
+															{config.name}
+														</h4>
+														{config.description && (
+															<p className="text-[11px] text-muted-foreground/70 truncate mt-0.5">
+																{config.description}
+															</p>
 														)}
 													</div>
-
-													{/* Provider + Model */}
-													<div className="flex items-center gap-2 flex-wrap">
-														{getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
-														<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
-															{config.model_name}
-														</code>
-													</div>
-
-													{/* Feature badges */}
-													<div className="flex items-center gap-1.5 flex-wrap">
-														{config.citations_enabled && (
-															<Badge
-																variant="outline"
-																className="text-[10px] px-1.5 py-0.5 border-emerald-500/30 text-emerald-700 dark:text-emerald-300 bg-emerald-500/5"
-															>
-																<MessageSquareQuote className="h-2.5 w-2.5 mr-1" />
-																Citations
-															</Badge>
-														)}
-														{!config.use_default_system_instructions &&
-															config.system_instructions && (
-																<Badge
-																	variant="outline"
-																	className="text-[10px] px-1.5 py-0.5 border-blue-500/30 text-blue-700 dark:text-blue-300 bg-blue-500/5"
-																>
-																	<FileText className="h-2.5 w-2.5 mr-1" />
-																	Custom
-																</Badge>
-															)}
-													</div>
-
-													{/* Footer: Date + Creator */}
-													<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto">
-														<span className="text-[11px] text-muted-foreground/60">
-															{new Date(config.created_at).toLocaleDateString(undefined, {
-																year: "numeric",
-																month: "short",
-																day: "numeric",
-															})}
-														</span>
-														{member && (
-															<>
-																<span className="text-muted-foreground/30">·</span>
+													{(canUpdate || canDelete) && (
+														<div className="flex items-center gap-0.5 shrink-0 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity duration-150">
+															{canUpdate && (
 																<TooltipProvider>
-																	<Tooltip>
+																	<Tooltip open={isDesktop ? undefined : false}>
 																		<TooltipTrigger asChild>
-																			<div className="flex items-center gap-1.5 cursor-default">
-																				{member.avatarUrl ? (
-																					<Image
-																						src={member.avatarUrl}
-																						alt={member.name}
-																						width={18}
-																						height={18}
-																						className="h-4.5 w-4.5 rounded-full object-cover shrink-0"
-																					/>
-																				) : (
-																					<div className="flex h-4.5 w-4.5 items-center justify-center rounded-full bg-gradient-to-br from-primary/20 to-primary/5 shrink-0">
-																						<span className="text-[9px] font-semibold text-primary">
-																							{getInitials(member.name)}
-																						</span>
-																					</div>
-																				)}
-																				<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]">
-																					{member.name}
-																				</span>
-																			</div>
+																			<Button
+																				variant="ghost"
+																				size="icon"
+																				onClick={() => openEditDialog(config)}
+																				className="h-7 w-7 text-muted-foreground hover:text-foreground"
+																			>
+																				<Edit3 className="h-3 w-3" />
+																			</Button>
 																		</TooltipTrigger>
-																		<TooltipContent side="bottom">
-																			{member.email || member.name}
-																		</TooltipContent>
+																		<TooltipContent>Edit</TooltipContent>
 																	</Tooltip>
 																</TooltipProvider>
-															</>
+															)}
+															{canDelete && (
+																<TooltipProvider>
+																	<Tooltip open={isDesktop ? undefined : false}>
+																		<TooltipTrigger asChild>
+																			<Button
+																				variant="ghost"
+																				size="icon"
+																				onClick={() => setConfigToDelete(config)}
+																				className="h-7 w-7 text-muted-foreground hover:text-destructive"
+																			>
+																				<Trash2 className="h-3 w-3" />
+																			</Button>
+																		</TooltipTrigger>
+																		<TooltipContent>Delete</TooltipContent>
+																	</Tooltip>
+																</TooltipProvider>
+															)}
+														</div>
+													)}
+												</div>
+
+												{/* Provider + Model */}
+												<div className="flex items-center gap-2 flex-wrap">
+													{getProviderIcon(config.provider, { className: "size-3.5 shrink-0" })}
+													<code className="text-[11px] font-mono text-muted-foreground bg-muted/60 px-2 py-0.5 rounded-md truncate max-w-[160px]">
+														{config.model_name}
+													</code>
+												</div>
+
+												{/* Feature badges */}
+												<div className="flex items-center gap-1.5 flex-wrap">
+													{config.citations_enabled && (
+														<Badge
+															variant="outline"
+															className="text-[10px] px-1.5 py-0.5 border-emerald-500/30 text-emerald-700 dark:text-emerald-300 bg-emerald-500/5"
+														>
+															<MessageSquareQuote className="h-2.5 w-2.5 mr-1" />
+															Citations
+														</Badge>
+													)}
+													{!config.use_default_system_instructions &&
+														config.system_instructions && (
+															<Badge
+																variant="outline"
+																className="text-[10px] px-1.5 py-0.5 border-blue-500/30 text-blue-700 dark:text-blue-300 bg-blue-500/5"
+															>
+																<FileText className="h-2.5 w-2.5 mr-1" />
+																Custom
+															</Badge>
 														)}
-													</div>
-												</CardContent>
-											</Card>
-										</motion.div>
-									);
-								})}
-							</AnimatePresence>
-						</motion.div>
+												</div>
+
+												{/* Footer: Date + Creator */}
+												<div className="flex items-center gap-2 pt-2 border-t border-border/40 mt-auto">
+													<span className="text-[11px] text-muted-foreground/60">
+														{new Date(config.created_at).toLocaleDateString(undefined, {
+															year: "numeric",
+															month: "short",
+															day: "numeric",
+														})}
+													</span>
+													{member && (
+														<>
+															<span className="text-muted-foreground/30">·</span>
+															<TooltipProvider>
+																<Tooltip open={isDesktop ? undefined : false}>
+																	<TooltipTrigger asChild>
+																		<div className="flex items-center gap-1.5 cursor-default">
+																			<Avatar className="size-4.5 shrink-0">
+																				{member.avatarUrl && (
+																					<AvatarImage src={member.avatarUrl} alt={member.name} />
+																				)}
+																				<AvatarFallback className="text-[9px]">
+																					{getInitials(member.name)}
+																				</AvatarFallback>
+																			</Avatar>
+																			<span className="text-[11px] text-muted-foreground/60 truncate max-w-[120px]">
+																				{member.name}
+																			</span>
+																		</div>
+																	</TooltipTrigger>
+																	<TooltipContent side="bottom">
+																		{member.email || member.name}
+																	</TooltipContent>
+																</Tooltip>
+															</TooltipProvider>
+														</>
+													)}
+												</div>
+											</CardContent>
+										</Card>
+									</div>
+								);
+							})}
+						</div>
 					)}
 				</div>
 			)}

surfsense_web/components/settings/more-pages-content.tsx

@@ -0,0 +1,206 @@
+"use client";
+
+import { IconCalendar, IconMailFilled } from "@tabler/icons-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Check, ExternalLink, Gift, Mail, Star, Zap } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Spinner } from "@/components/ui/spinner";
+import type { IncentiveTaskInfo } from "@/contracts/types/incentive-tasks.types";
+import { incentiveTasksApiService } from "@/lib/apis/incentive-tasks-api.service";
+import {
+	trackIncentiveContactOpened,
+	trackIncentivePageViewed,
+	trackIncentiveTaskClicked,
+	trackIncentiveTaskCompleted,
+} from "@/lib/posthog/events";
+import { cn } from "@/lib/utils";
+
+export function MorePagesContent() {
+	const queryClient = useQueryClient();
+
+	useEffect(() => {
+		trackIncentivePageViewed();
+	}, []);
+
+	const { data, isLoading } = useQuery({
+		queryKey: ["incentive-tasks"],
+		queryFn: () => incentiveTasksApiService.getTasks(),
+	});
+
+	const completeMutation = useMutation({
+		mutationFn: incentiveTasksApiService.completeTask,
+		onSuccess: (response, taskType) => {
+			if (response.success) {
+				toast.success(response.message);
+				const task = data?.tasks.find((t) => t.task_type === taskType);
+				if (task) {
+					trackIncentiveTaskCompleted(taskType, task.pages_reward);
+				}
+				queryClient.invalidateQueries({ queryKey: ["incentive-tasks"] });
+				queryClient.invalidateQueries({ queryKey: ["user"] });
+			}
+		},
+		onError: () => {
+			toast.error("Failed to complete task. Please try again.");
+		},
+	});
+
+	const handleTaskClick = (task: IncentiveTaskInfo) => {
+		if (!task.completed) {
+			trackIncentiveTaskClicked(task.task_type);
+			completeMutation.mutate(task.task_type);
+		}
+	};
+
+	return (
+		<div className="w-full space-y-6">
+			<div className="text-center">
+				<Gift className="mx-auto mb-3 h-8 w-8 text-primary" />
+				<h2 className="text-xl font-bold tracking-tight">Get More Pages</h2>
+				<p className="mt-1 text-sm text-muted-foreground">
+					Complete tasks to earn additional pages
+				</p>
+			</div>
+
+			{isLoading ? (
+				<Card>
+					<CardContent className="flex items-center gap-3 p-3">
+						<Skeleton className="h-9 w-9 rounded-full bg-muted" />
+						<div className="flex-1 space-y-2">
+							<Skeleton className="h-4 w-3/4 bg-muted" />
+							<Skeleton className="h-3 w-1/4 bg-muted" />
+						</div>
+						<Skeleton className="h-8 w-16 bg-muted" />
+					</CardContent>
+				</Card>
+			) : (
+				<div className="space-y-2">
+					{data?.tasks.map((task) => (
+						<Card
+							key={task.task_type}
+							className={cn("transition-colors bg-transparent", task.completed && "bg-muted/50")}
+						>
+							<CardContent className="flex items-center gap-3 p-3">
+								<div
+									className={cn(
+										"flex h-9 w-9 shrink-0 items-center justify-center rounded-full",
+										task.completed ? "bg-primary text-primary-foreground" : "bg-muted"
+									)}
+								>
+									{task.completed ? <Check className="h-4 w-4" /> : <Star className="h-4 w-4" />}
+								</div>
+								<div className="min-w-0 flex-1">
+									<p
+										className={cn(
+											"text-sm font-medium",
+											task.completed && "text-muted-foreground line-through"
+										)}
+									>
+										{task.title}
+									</p>
+									<p className="text-xs text-muted-foreground">+{task.pages_reward} pages</p>
+								</div>
+								<Button
+									variant="ghost"
+									size="sm"
+									disabled={task.completed || completeMutation.isPending}
+									onClick={() => handleTaskClick(task)}
+									asChild={!task.completed}
+									className="text-muted-foreground hover:text-foreground"
+								>
+									{task.completed ? (
+										<span>Done</span>
+									) : (
+										<a
+											href={task.action_url}
+											target="_blank"
+											rel="noopener noreferrer"
+											className="gap-1"
+										>
+											{completeMutation.isPending ? (
+												<Spinner size="xs" />
+											) : (
+												<ExternalLink className="h-3 w-3" />
+											)}
+										</a>
+									)}
+								</Button>
+							</CardContent>
+						</Card>
+					))}
+				</div>
+			)}
+
+			<Separator />
+
+			<Card className="overflow-hidden border-emerald-500/20 bg-transparent">
+				<CardHeader className="pb-2">
+					<div className="flex items-center gap-2">
+						<Zap className="h-4 w-4 text-emerald-500" />
+						<CardTitle className="text-base">Upgrade to PRO</CardTitle>
+						<Badge className="bg-emerald-600 text-white border-transparent hover:bg-emerald-600">
+							FREE
+						</Badge>
+					</div>
+					<CardDescription>
+						For a limited time, get{" "}
+						<span className="font-semibold text-foreground">6,000 additional pages</span> at no
+						cost. Contact us and we&apos;ll upgrade your account instantly.
+					</CardDescription>
+				</CardHeader>
+				<CardFooter className="pt-2">
+					<Dialog onOpenChange={(open) => open && trackIncentiveContactOpened()}>
+						<DialogTrigger asChild>
+							<Button className="w-full bg-emerald-600 text-white hover:bg-emerald-700">
+								<Mail className="h-4 w-4" />
+								Contact us to Upgrade
+							</Button>
+						</DialogTrigger>
+						<DialogContent className="select-none sm:max-w-sm">
+							<DialogHeader>
+								<DialogTitle>Get in Touch</DialogTitle>
+								<DialogDescription>Pick the option that works best for you.</DialogDescription>
+							</DialogHeader>
+							<div className="flex flex-col gap-2">
+								<Button asChild>
+									<Link href="https://cal.com/mod-rohan" target="_blank" rel="noopener noreferrer">
+										<IconCalendar className="h-4 w-4" />
+										Schedule a Meeting
+									</Link>
+								</Button>
+								<Button variant="outline" asChild>
+									<Link href="mailto:rohan@surfsense.com">
+										<IconMailFilled className="h-4 w-4" />
+										rohan@surfsense.com
+									</Link>
+								</Button>
+							</div>
+						</DialogContent>
+					</Dialog>
+				</CardFooter>
+			</Card>
+		</div>
+	);
+}