feat: enhance permission handling and user feedback for Gmail and Google Calendar tools

- Implemented logic to persist authentication expiration status for connectors when insufficient permissions are detected, improving error handling and user experience.
- Updated messages to guide users to re-authenticate in connector settings for Gmail, Google Calendar, and Google Drive tools.
- Added InsufficientPermissionsResult type and corresponding UI components to display permission-related messages consistently across Gmail and Google Calendar tools.

surfsense_web/components/tool-ui/gmail/create-draft.tsx

@@ -3,8 +3,6 @@
 import { makeAssistantToolUI } from "@assistant-ui/react";
 import {
 	CornerDownLeftIcon,
-	FileEditIcon,
-	MailIcon,
 	Pen,
 	UserIcon,
 	UsersIcon,
@@ -66,10 +64,17 @@ interface AuthErrorResult {
 	connector_type?: string;
 }
 
+interface InsufficientPermissionsResult {
+	status: "insufficient_permissions";
+	connector_id: number;
+	message: string;
+}
+
 type CreateGmailDraftResult =
 	| InterruptResult
 	| SuccessResult
 	| ErrorResult
+	| InsufficientPermissionsResult
 	| AuthErrorResult;
 
 function isInterruptResult(result: unknown): result is InterruptResult {
@@ -99,6 +104,15 @@ function isAuthErrorResult(result: unknown): result is AuthErrorResult {
 	);
 }
 
+function isInsufficientPermissionsResult(result: unknown): result is InsufficientPermissionsResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as InsufficientPermissionsResult).status === "insufficient_permissions"
+	);
+}
+
 function ApprovalCard({
 	args,
 	interruptData,
@@ -168,7 +182,6 @@ function ApprovalCard({
 			{/* Header */}
 			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
 				<div className="flex items-center gap-2">
-					<FileEditIcon className="size-4 text-muted-foreground shrink-0" />
 					<div>
 						<p className="text-sm font-semibold text-foreground">
 							{decided === "reject"
@@ -388,12 +401,27 @@ function AuthErrorCard({ result }: { result: AuthErrorResult }) {
 	);
 }
 
+function InsufficientPermissionsCard({ result }: { result: InsufficientPermissionsResult }) {
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">
+					Additional Gmail permissions required
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
+		</div>
+	);
+}
+
 function SuccessCard({ result }: { result: SuccessResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
 			<div className="px-5 pt-5 pb-4">
 				<div className="flex items-center gap-2">
-					<MailIcon className="size-4 text-muted-foreground shrink-0" />
 					<p className="text-sm font-semibold text-foreground">
 						{result.message || "Gmail draft created successfully"}
 					</p>
@@ -443,6 +471,8 @@ export const CreateGmailDraftToolUI = makeAssistantToolUI<
 		}
 
 		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isInsufficientPermissionsResult(result))
+			return <InsufficientPermissionsCard result={result} />;
 		if (isErrorResult(result)) return <ErrorCard result={result} />;
 
 		return <SuccessCard result={result as SuccessResult} />;

surfsense_web/components/tool-ui/gmail/send-email.tsx

@@ -65,10 +65,17 @@ interface AuthErrorResult {
 	connector_type?: string;
 }
 
+interface InsufficientPermissionsResult {
+	status: "insufficient_permissions";
+	connector_id: number;
+	message: string;
+}
+
 type SendGmailEmailResult =
 	| InterruptResult
 	| SuccessResult
 	| ErrorResult
+	| InsufficientPermissionsResult
 	| AuthErrorResult;
 
 function isInterruptResult(result: unknown): result is InterruptResult {
@@ -98,6 +105,15 @@ function isAuthErrorResult(result: unknown): result is AuthErrorResult {
 	);
 }
 
+function isInsufficientPermissionsResult(result: unknown): result is InsufficientPermissionsResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as InsufficientPermissionsResult).status === "insufficient_permissions"
+	);
+}
+
 function ApprovalCard({
 	args,
 	interruptData,
@@ -387,6 +403,22 @@ function AuthErrorCard({ result }: { result: AuthErrorResult }) {
 	);
 }
 
+function InsufficientPermissionsCard({ result }: { result: InsufficientPermissionsResult }) {
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">
+					Additional Gmail permissions required
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
+		</div>
+	);
+}
+
 function SuccessCard({ result }: { result: SuccessResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
@@ -442,6 +474,8 @@ export const SendGmailEmailToolUI = makeAssistantToolUI<
 		}
 
 		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isInsufficientPermissionsResult(result))
+			return <InsufficientPermissionsCard result={result} />;
 		if (isErrorResult(result)) return <ErrorCard result={result} />;
 
 		return <SuccessCard result={result as SuccessResult} />;

surfsense_web/components/tool-ui/gmail/trash-email.tsx

@@ -72,11 +72,18 @@ interface AuthErrorResult {
 	connector_type?: string;
 }
 
+interface InsufficientPermissionsResult {
+	status: "insufficient_permissions";
+	connector_id: number;
+	message: string;
+}
+
 type TrashGmailEmailResult =
 	| InterruptResult
 	| SuccessResult
 	| ErrorResult
 	| NotFoundResult
+	| InsufficientPermissionsResult
 	| AuthErrorResult;
 
 function isInterruptResult(result: unknown): result is InterruptResult {
@@ -115,6 +122,15 @@ function isAuthErrorResult(result: unknown): result is AuthErrorResult {
 	);
 }
 
+function isInsufficientPermissionsResult(result: unknown): result is InsufficientPermissionsResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as InsufficientPermissionsResult).status === "insufficient_permissions"
+	);
+}
+
 function formatDate(dateStr: string): string {
 	return new Date(dateStr).toLocaleDateString(undefined, { dateStyle: "medium" });
 }
@@ -318,6 +334,22 @@ function AuthErrorCard({ result }: { result: AuthErrorResult }) {
 	);
 }
 
+function InsufficientPermissionsCard({ result }: { result: InsufficientPermissionsResult }) {
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">
+					Additional Gmail permissions required
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
+		</div>
+	);
+}
+
 function NotFoundCard({ result }: { result: NotFoundResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border border-amber-500/50 bg-muted/30 select-none">
@@ -398,6 +430,8 @@ export const TrashGmailEmailToolUI = makeAssistantToolUI<
 		}
 
 		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isInsufficientPermissionsResult(result))
+			return <InsufficientPermissionsCard result={result} />;
 		if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
 		if (isErrorResult(result)) return <ErrorCard result={result} />;
 

surfsense_web/components/tool-ui/google-calendar/create-event.tsx

@@ -74,10 +74,17 @@ interface AuthErrorResult {
 	connector_type?: string;
 }
 
+interface InsufficientPermissionsResult {
+	status: "insufficient_permissions";
+	connector_id: number;
+	message: string;
+}
+
 type CreateCalendarEventResult =
 	| InterruptResult
 	| SuccessResult
 	| ErrorResult
+	| InsufficientPermissionsResult
 	| AuthErrorResult;
 
 function isInterruptResult(result: unknown): result is InterruptResult {
@@ -107,6 +114,15 @@ function isAuthErrorResult(result: unknown): result is AuthErrorResult {
 	);
 }
 
+function isInsufficientPermissionsResult(result: unknown): result is InsufficientPermissionsResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as InsufficientPermissionsResult).status === "insufficient_permissions"
+	);
+}
+
 function formatDateTime(iso: string): string {
 	try {
 		return new Date(iso).toLocaleString(undefined, {
@@ -478,6 +494,22 @@ function AuthErrorCard({ result }: { result: AuthErrorResult }) {
 	);
 }
 
+function InsufficientPermissionsCard({ result }: { result: InsufficientPermissionsResult }) {
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">
+					Additional Google Calendar permissions required
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
+		</div>
+	);
+}
+
 function SuccessCard({ result }: { result: SuccessResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
@@ -552,6 +584,8 @@ export const CreateCalendarEventToolUI = makeAssistantToolUI<
 		}
 
 		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isInsufficientPermissionsResult(result))
+			return <InsufficientPermissionsCard result={result} />;
 		if (isErrorResult(result)) return <ErrorCard result={result} />;
 
 		return <SuccessCard result={result as SuccessResult} />;

surfsense_web/components/tool-ui/google-calendar/delete-event.tsx

@@ -81,12 +81,19 @@ interface AuthErrorResult {
 	connector_type?: string;
 }
 
+interface InsufficientPermissionsResult {
+	status: "insufficient_permissions";
+	connector_id: number;
+	message: string;
+}
+
 type DeleteCalendarEventResult =
 	| InterruptResult
 	| SuccessResult
 	| ErrorResult
 	| NotFoundResult
 	| WarningResult
+	| InsufficientPermissionsResult
 	| AuthErrorResult;
 
 function isInterruptResult(result: unknown): result is InterruptResult {
@@ -125,6 +132,15 @@ function isAuthErrorResult(result: unknown): result is AuthErrorResult {
 	);
 }
 
+function isInsufficientPermissionsResult(result: unknown): result is InsufficientPermissionsResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as InsufficientPermissionsResult).status === "insufficient_permissions"
+	);
+}
+
 function isWarningResult(result: unknown): result is WarningResult {
 	return (
 		typeof result === "object" &&
@@ -355,6 +371,22 @@ function AuthErrorCard({ result }: { result: AuthErrorResult }) {
 	);
 }
 
+function InsufficientPermissionsCard({ result }: { result: InsufficientPermissionsResult }) {
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">
+					Additional Google Calendar permissions required
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
+		</div>
+	);
+}
+
 function NotFoundCard({ result }: { result: NotFoundResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border border-amber-500/50 bg-muted/30 select-none">
@@ -452,6 +484,8 @@ export const DeleteCalendarEventToolUI = makeAssistantToolUI<
 		if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
 		if (isWarningResult(result)) return <WarningCard result={result} />;
 		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isInsufficientPermissionsResult(result))
+			return <InsufficientPermissionsCard result={result} />;
 		if (isErrorResult(result)) return <ErrorCard result={result} />;
 
 		return <SuccessCard result={result as SuccessResult} />;

surfsense_web/components/tool-ui/google-calendar/update-event.tsx

@@ -79,11 +79,18 @@ interface AuthErrorResult {
 	connector_type?: string;
 }
 
+interface InsufficientPermissionsResult {
+	status: "insufficient_permissions";
+	connector_id: number;
+	message: string;
+}
+
 type UpdateCalendarEventResult =
 	| InterruptResult
 	| SuccessResult
 	| ErrorResult
 	| NotFoundResult
+	| InsufficientPermissionsResult
 	| AuthErrorResult;
 
 function isInterruptResult(result: unknown): result is InterruptResult {
@@ -122,6 +129,15 @@ function isAuthErrorResult(result: unknown): result is AuthErrorResult {
 	);
 }
 
+function isInsufficientPermissionsResult(result: unknown): result is InsufficientPermissionsResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as InsufficientPermissionsResult).status === "insufficient_permissions"
+	);
+}
+
 function formatDateTime(iso: string): string {
 	try {
 		return new Date(iso).toLocaleString(undefined, {
@@ -501,6 +517,22 @@ function AuthErrorCard({ result }: { result: AuthErrorResult }) {
 	);
 }
 
+function InsufficientPermissionsCard({ result }: { result: InsufficientPermissionsResult }) {
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
+			<div className="px-5 pt-5 pb-4">
+				<p className="text-sm font-semibold text-destructive">
+					Additional Google Calendar permissions required
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
+		</div>
+	);
+}
+
 function NotFoundCard({ result }: { result: NotFoundResult }) {
 	return (
 		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border border-amber-500/50 bg-muted/30 select-none">
@@ -595,6 +627,8 @@ export const UpdateCalendarEventToolUI = makeAssistantToolUI<
 
 		if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
 		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isInsufficientPermissionsResult(result))
+			return <InsufficientPermissionsCard result={result} />;
 		if (isErrorResult(result)) return <ErrorCard result={result} />;
 
 		return <SuccessCard result={result as SuccessResult} />;

surfsense_web/components/tool-ui/google-drive/create-file.tsx

@@ -2,15 +2,11 @@
 
 import { makeAssistantToolUI } from "@assistant-ui/react";
 import {
-	AlertTriangleIcon,
 	CornerDownLeftIcon,
 	FileIcon,
 	Pen,
-	RefreshCwIcon,
 } from "lucide-react";
-import { useParams } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import {
 	Select,
@@ -21,7 +17,6 @@ import {
 } from "@/components/ui/select";
 import { PlateEditor } from "@/components/editor/plate-editor";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
-import { authenticatedFetch } from "@/lib/auth-utils";
 import { useSetAtom } from "jotai";
 import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
 
@@ -414,52 +409,16 @@ function ApprovalCard({
 }
 
 function InsufficientPermissionsCard({ result }: { result: InsufficientPermissionsResult }) {
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [loading, setLoading] = useState(false);
-
-	async function handleReauth() {
-		setLoading(true);
-		try {
-			const backendUrl = process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL || "http://localhost:8000";
-			const url = new URL(`${backendUrl}/api/v1/auth/google/drive/connector/reauth`);
-			url.searchParams.set("connector_id", String(result.connector_id));
-			url.searchParams.set("space_id", 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. Please try again.");
-				return;
-			}
-			const data = await response.json();
-			if (data.auth_url) {
-				window.location.href = data.auth_url;
-			}
-		} catch {
-			toast.error("Failed to initiate re-authentication. Please try again.");
-		} finally {
-			setLoading(false);
-		}
-	}
-
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border border-amber-500/50 bg-muted/30">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
 			<div className="px-5 pt-5 pb-4">
-				<div className="flex items-center gap-2">
-					<AlertTriangleIcon className="size-4 text-amber-500 shrink-0" />
-					<p className="text-sm font-semibold text-amber-600 dark:text-amber-400">
-						Additional permissions required
-					</p>
-				</div>
+				<p className="text-sm font-semibold text-destructive">
+					Additional Google Drive permissions required
+				</p>
 			</div>
-			<div className="mx-5 h-px bg-amber-500/30" />
-			<div className="px-5 py-4 space-y-3">
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
 				<p className="text-sm text-muted-foreground">{result.message}</p>
-				<Button size="sm" className="rounded-lg" onClick={handleReauth} disabled={loading}>
-					<RefreshCwIcon className={`size-4 ${loading ? "animate-spin" : ""}`} />
-					Re-authenticate Google Drive
-				</Button>
 			</div>
 		</div>
 	);

surfsense_web/components/tool-ui/google-drive/trash-file.tsx

@@ -2,19 +2,14 @@
 
 import { makeAssistantToolUI } from "@assistant-ui/react";
 import {
-	AlertTriangleIcon,
 	CornerDownLeftIcon,
 	InfoIcon,
-	RefreshCwIcon,
 	TriangleAlertIcon,
 } from "lucide-react";
-import { useParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
-import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { TextShimmerLoader } from "@/components/prompt-kit/loader";
-import { authenticatedFetch } from "@/lib/auth-utils";
 
 interface GoogleDriveAccount {
 	id: number;
@@ -327,52 +322,16 @@ function ApprovalCard({
 }
 
 function InsufficientPermissionsCard({ result }: { result: InsufficientPermissionsResult }) {
-	const params = useParams();
-	const searchSpaceId = params.search_space_id as string;
-	const [loading, setLoading] = useState(false);
-
-	async function handleReauth() {
-		setLoading(true);
-		try {
-			const backendUrl = process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL || "http://localhost:8000";
-			const url = new URL(`${backendUrl}/api/v1/auth/google/drive/connector/reauth`);
-			url.searchParams.set("connector_id", String(result.connector_id));
-			url.searchParams.set("space_id", 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. Please try again.");
-				return;
-			}
-			const data = await response.json();
-			if (data.auth_url) {
-				window.location.href = data.auth_url;
-			}
-		} catch {
-			toast.error("Failed to initiate re-authentication. Please try again.");
-		} finally {
-			setLoading(false);
-		}
-	}
-
 	return (
-		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border border-amber-500/50 bg-muted/30">
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
 			<div className="px-5 pt-5 pb-4">
-				<div className="flex items-center gap-2">
-					<AlertTriangleIcon className="size-4 text-amber-500 shrink-0" />
-					<p className="text-sm font-semibold text-amber-600 dark:text-amber-400">
-						Additional permissions required
-					</p>
-				</div>
+				<p className="text-sm font-semibold text-destructive">
+					Additional Google Drive permissions required
+				</p>
 			</div>
-			<div className="mx-5 h-px bg-amber-500/30" />
-			<div className="px-5 py-4 space-y-3">
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4">
 				<p className="text-sm text-muted-foreground">{result.message}</p>
-				<Button size="sm" className="rounded-lg" onClick={handleReauth} disabled={loading}>
-					<RefreshCwIcon className={`size-4 ${loading ? "animate-spin" : ""}`} />
-					Re-authenticate Google Drive
-				</Button>
 			</div>
 		</div>
 	);