feat: add initial logic for HITL for gmail and google calendar connectors

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

@@ -7,14 +7,19 @@ import {
 	closeHitlEditPanelAtom,
 	hitlEditPanelAtom,
 } from "@/atoms/chat/hitl-edit-panel.atom";
+import type { ExtraField } from "@/atoms/chat/hitl-edit-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 { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 import { useMediaQuery } from "@/hooks/use-media-query";
 
 export function HitlEditPanelContent({
 	title: initialTitle,
 	content: initialContent,
+	extraFields,
 	onSave,
 	onClose,
 	showCloseButton = true,
@@ -22,24 +27,38 @@ export function HitlEditPanelContent({
 	title: string;
 	content: string;
 	toolName: string;
-	onSave: (title: string, content: string) => void;
+	extraFields?: ExtraField[];
+	onSave: (title: string, content: string, extraFieldValues?: Record<string, string>) => void;
 	onClose?: () => void;
 	showCloseButton?: boolean;
 }) {
 	const [editedTitle, setEditedTitle] = useState(initialTitle);
 	const markdownRef = 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 handleMarkdownChange = useCallback((md: string) => {
 		markdownRef.current = md;
 	}, []);
 
+	const handleExtraFieldChange = useCallback((key: string, value: string) => {
+		setExtraFieldValues((prev) => ({ ...prev, [key]: value }));
+	}, []);
+
 	const handleSave = useCallback(() => {
 		if (!editedTitle.trim()) return;
 		setIsSaving(true);
-		onSave(editedTitle, markdownRef.current);
+		const extras = extraFields && extraFields.length > 0 ? extraFieldValues : undefined;
+		onSave(editedTitle, markdownRef.current, extras);
 		onClose?.();
-	}, [editedTitle, onSave, onClose]);
+	}, [editedTitle, onSave, onClose, extraFields, extraFieldValues]);
 
 	return (
 		<>
@@ -59,6 +78,34 @@ export function HitlEditPanelContent({
 				)}
 			</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 === "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
 					markdown={initialContent}
@@ -90,6 +137,7 @@ function DesktopHitlEditPanel() {
 				title={panelState.title}
 				content={panelState.content}
 				toolName={panelState.toolName}
+				extraFields={panelState.extraFields}
 				onSave={panelState.onSave}
 				onClose={closePanel}
 			/>
@@ -124,6 +172,7 @@ function MobileHitlEditDrawer() {
 						title={panelState.title}
 						content={panelState.content}
 						toolName={panelState.toolName}
+						extraFields={panelState.extraFields}
 						onSave={panelState.onSave}
 						onClose={closePanel}
 						showCloseButton={false}

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

@@ -0,0 +1,450 @@
+"use client";
+
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import {
+	CornerDownLeftIcon,
+	FileEditIcon,
+	MailIcon,
+	Pen,
+	UserIcon,
+	UsersIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { PlateEditor } from "@/components/editor/plate-editor";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
+import { useSetAtom } from "jotai";
+import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
+import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
+
+interface GmailAccount {
+	id: number;
+	name: string;
+	email: string;
+	auth_expired?: boolean;
+}
+
+interface InterruptResult {
+	__interrupt__: true;
+	__decided__?: "approve" | "reject" | "edit";
+	action_requests: Array<{
+		name: string;
+		args: Record<string, unknown>;
+	}>;
+	review_configs: Array<{
+		action_name: string;
+		allowed_decisions: Array<"approve" | "edit" | "reject">;
+	}>;
+	context?: {
+		accounts?: GmailAccount[];
+		error?: string;
+	};
+}
+
+interface SuccessResult {
+	status: "success";
+	draft_id?: string;
+	message_id?: string;
+	message?: string;
+}
+
+interface ErrorResult {
+	status: "error";
+	message: string;
+}
+
+interface AuthErrorResult {
+	status: "auth_error";
+	message: string;
+	connector_type?: string;
+}
+
+type CreateGmailDraftResult =
+	| InterruptResult
+	| SuccessResult
+	| ErrorResult
+	| AuthErrorResult;
+
+function isInterruptResult(result: unknown): result is InterruptResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"__interrupt__" in result &&
+		(result as InterruptResult).__interrupt__ === true
+	);
+}
+
+function isErrorResult(result: unknown): result is ErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as ErrorResult).status === "error"
+	);
+}
+
+function isAuthErrorResult(result: unknown): result is AuthErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as AuthErrorResult).status === "auth_error"
+	);
+}
+
+function ApprovalCard({
+	args,
+	interruptData,
+	onDecision,
+}: {
+	args: { to: string; subject: string; body: string; cc?: string; bcc?: string };
+	interruptData: InterruptResult;
+	onDecision: (decision: {
+		type: "approve" | "reject" | "edit";
+		message?: string;
+		edited_action?: { name: string; args: Record<string, unknown> };
+	}) => void;
+}) {
+	const [decided, setDecided] = useState<"approve" | "reject" | "edit" | null>(
+		interruptData.__decided__ ?? null
+	);
+	const [isPanelOpen, setIsPanelOpen] = useState(false);
+	const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
+
+	const accounts = interruptData.context?.accounts ?? [];
+	const validAccounts = accounts.filter((a) => !a.auth_expired);
+	const expiredAccounts = accounts.filter((a) => a.auth_expired);
+
+	const defaultAccountId = useMemo(() => {
+		if (validAccounts.length === 1) return String(validAccounts[0].id);
+		return "";
+	}, [validAccounts]);
+
+	const [selectedAccountId, setSelectedAccountId] = useState<string>(defaultAccountId);
+
+	const canApprove = !!selectedAccountId;
+
+	const reviewConfig = interruptData.review_configs[0];
+	const allowedDecisions = reviewConfig?.allowed_decisions ?? ["approve", "reject"];
+	const canEdit = allowedDecisions.includes("edit");
+
+	const handleApprove = useCallback(() => {
+		if (decided || isPanelOpen || !canApprove) return;
+		if (!allowedDecisions.includes("approve")) return;
+		setDecided("approve");
+		onDecision({
+			type: "approve",
+			edited_action: {
+				name: interruptData.action_requests[0].name,
+				args: {
+					...args,
+					connector_id: selectedAccountId ? Number(selectedAccountId) : null,
+				},
+			},
+		});
+	}, [decided, isPanelOpen, canApprove, allowedDecisions, onDecision, interruptData, args, selectedAccountId]);
+
+	useEffect(() => {
+		const handler = (e: KeyboardEvent) => {
+			if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+				handleApprove();
+			}
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [handleApprove]);
+
+	if (decided && decided !== "reject") return null;
+
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+			{/* 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"
+								? "Gmail Draft Rejected"
+								: decided === "approve" || decided === "edit"
+									? "Gmail Draft Approved"
+									: "Create Gmail Draft"}
+						</p>
+						<p className="text-xs text-muted-foreground mt-0.5">
+							{decided === "reject"
+								? "Draft creation was cancelled"
+								: decided === "edit"
+									? "Draft creation is in progress with your changes"
+									: decided === "approve"
+										? "Draft creation is in progress"
+										: "Requires your approval to proceed"}
+						</p>
+					</div>
+				</div>
+				{!decided && canEdit && (
+					<Button
+						size="sm"
+						variant="ghost"
+						className="rounded-lg text-muted-foreground -mt-1 -mr-2"
+						onClick={() => {
+							setIsPanelOpen(true);
+							const extraFields: ExtraField[] = [
+								{ key: "to", label: "To", type: "email", value: args.to || "" },
+								{ key: "cc", label: "CC", type: "email", value: args.cc || "" },
+								{ key: "bcc", label: "BCC", type: "email", value: args.bcc || "" },
+							];
+							openHitlEditPanel({
+								title: args.subject ?? "",
+								content: args.body ?? "",
+								toolName: "Gmail Draft",
+								extraFields,
+								onSave: (newTitle, newContent, extraFieldValues) => {
+									setIsPanelOpen(false);
+									setDecided("edit");
+									const extras = extraFieldValues ?? {};
+									onDecision({
+										type: "edit",
+										edited_action: {
+											name: interruptData.action_requests[0].name,
+											args: {
+												...args,
+												subject: newTitle,
+												body: newContent,
+												to: extras.to ?? args.to,
+												cc: extras.cc ?? args.cc,
+												bcc: extras.bcc ?? args.bcc,
+												connector_id: selectedAccountId ? Number(selectedAccountId) : null,
+											},
+										},
+									});
+								},
+							});
+						}}
+					>
+						<Pen className="size-3.5" />
+						Edit
+					</Button>
+				)}
+			</div>
+
+			{/* Account selector */}
+			{!decided && interruptData.context && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 space-y-4 select-none">
+						{interruptData.context.error ? (
+							<p className="text-sm text-destructive">{interruptData.context.error}</p>
+						) : (
+							<>
+								{accounts.length > 0 && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">
+											Gmail Account <span className="text-destructive">*</span>
+										</p>
+										<Select value={selectedAccountId} onValueChange={setSelectedAccountId}>
+											<SelectTrigger className="w-full">
+												<SelectValue placeholder="Select an account" />
+											</SelectTrigger>
+											<SelectContent>
+												{validAccounts.map((account) => (
+													<SelectItem key={account.id} value={String(account.id)}>
+														{account.email}
+													</SelectItem>
+												))}
+												{expiredAccounts.map((a) => (
+													<div
+														key={a.id}
+														className="relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 px-2 text-sm select-none opacity-50 pointer-events-none"
+													>
+														{a.email} (expired, retry after re-auth)
+													</div>
+												))}
+											</SelectContent>
+										</Select>
+									</div>
+								)}
+							</>
+						)}
+					</div>
+				</>
+			)}
+
+			{/* Email headers + body preview */}
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 pt-3 pb-2 space-y-1.5 select-none">
+				{args.to && (
+					<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<UserIcon className="size-3 shrink-0" />
+						<span>To: {args.to}</span>
+					</div>
+				)}
+				{args.cc && args.cc.trim() !== "" && (
+					<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<UsersIcon className="size-3 shrink-0" />
+						<span>CC: {args.cc}</span>
+					</div>
+				)}
+				{args.bcc && args.bcc.trim() !== "" && (
+					<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<UsersIcon className="size-3 shrink-0" />
+						<span>BCC: {args.bcc}</span>
+					</div>
+				)}
+			</div>
+
+			<div className="px-5 pt-1">
+				{args.subject != null && (
+					<p className="text-sm font-medium text-foreground">{args.subject}</p>
+				)}
+				{args.body != null && (
+					<div
+						className="mt-2 max-h-[7rem] overflow-hidden text-sm"
+						style={{
+							maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+							WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+						}}
+					>
+						<PlateEditor
+							markdown={String(args.body)}
+							readOnly
+							preset="readonly"
+							editorVariant="none"
+							className="h-auto [&_[data-slate-editor]]:!min-h-0 [&_[data-slate-editor]>*:first-child]:!mt-0"
+						/>
+					</div>
+				)}
+			</div>
+
+			{/* Action buttons */}
+			{!decided && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 flex items-center gap-2 select-none">
+						{allowedDecisions.includes("approve") && (
+							<Button
+								size="sm"
+								className="rounded-lg gap-1.5"
+								onClick={handleApprove}
+								disabled={!canApprove}
+							>
+								Approve
+								<CornerDownLeftIcon className="size-3 opacity-60" />
+							</Button>
+						)}
+						{allowedDecisions.includes("reject") && (
+							<Button
+								size="sm"
+								variant="ghost"
+								className="rounded-lg text-muted-foreground"
+								onClick={() => {
+									setDecided("reject");
+									onDecision({ type: "reject", message: "User rejected the action." });
+								}}
+							>
+								Reject
+							</Button>
+						)}
+					</div>
+				</>
+			)}
+		</div>
+	);
+}
+
+function ErrorCard({ result }: { result: ErrorResult }) {
+	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">Failed to create Gmail draft</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 AuthErrorCard({ result }: { result: AuthErrorResult }) {
+	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">
+					Gmail authentication expired
+				</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>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export const CreateGmailDraftToolUI = makeAssistantToolUI<
+	{ to: string; subject: string; body: string; cc?: string; bcc?: string },
+	CreateGmailDraftResult
+>({
+	toolName: "create_gmail_draft",
+	render: function CreateGmailDraftUI({ args, result, status }) {
+		if (status.type === "running") {
+			return (
+				<div className="my-4 max-w-lg rounded-2xl border bg-muted/30 px-5 py-4 select-none">
+					<TextShimmerLoader text="Creating Gmail draft..." size="sm" />
+				</div>
+			);
+		}
+
+		if (!result) return null;
+
+		if (isInterruptResult(result)) {
+			return (
+				<ApprovalCard
+					args={args}
+					interruptData={result}
+					onDecision={(decision) => {
+						window.dispatchEvent(
+							new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
+						);
+					}}
+				/>
+			);
+		}
+
+		if (
+			typeof result === "object" &&
+			result !== null &&
+			"status" in result &&
+			(result as { status: string }).status === "rejected"
+		) {
+			return null;
+		}
+
+		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isErrorResult(result)) return <ErrorCard result={result} />;
+
+		return <SuccessCard result={result as SuccessResult} />;
+	},
+});

surfsense_web/components/tool-ui/gmail/index.ts

@@ -0,0 +1,3 @@
+export { CreateGmailDraftToolUI } from "./create-draft";
+export { SendGmailEmailToolUI } from "./send-email";
+export { TrashGmailEmailToolUI } from "./trash-email";

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

@@ -0,0 +1,449 @@
+"use client";
+
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import {
+	CornerDownLeftIcon,
+	MailIcon,
+	Pen,
+	SendIcon,
+	UserIcon,
+	UsersIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { PlateEditor } from "@/components/editor/plate-editor";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
+import { useSetAtom } from "jotai";
+import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
+import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
+
+interface GmailAccount {
+	id: number;
+	name: string;
+	email: string;
+	auth_expired?: boolean;
+}
+
+interface InterruptResult {
+	__interrupt__: true;
+	__decided__?: "approve" | "reject" | "edit";
+	action_requests: Array<{
+		name: string;
+		args: Record<string, unknown>;
+	}>;
+	review_configs: Array<{
+		action_name: string;
+		allowed_decisions: Array<"approve" | "edit" | "reject">;
+	}>;
+	context?: {
+		accounts?: GmailAccount[];
+		error?: string;
+	};
+}
+
+interface SuccessResult {
+	status: "success";
+	message_id?: string;
+	message?: string;
+}
+
+interface ErrorResult {
+	status: "error";
+	message: string;
+}
+
+interface AuthErrorResult {
+	status: "auth_error";
+	message: string;
+	connector_type?: string;
+}
+
+type SendGmailEmailResult =
+	| InterruptResult
+	| SuccessResult
+	| ErrorResult
+	| AuthErrorResult;
+
+function isInterruptResult(result: unknown): result is InterruptResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"__interrupt__" in result &&
+		(result as InterruptResult).__interrupt__ === true
+	);
+}
+
+function isErrorResult(result: unknown): result is ErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as ErrorResult).status === "error"
+	);
+}
+
+function isAuthErrorResult(result: unknown): result is AuthErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as AuthErrorResult).status === "auth_error"
+	);
+}
+
+function ApprovalCard({
+	args,
+	interruptData,
+	onDecision,
+}: {
+	args: { to: string; subject: string; body: string; cc?: string; bcc?: string };
+	interruptData: InterruptResult;
+	onDecision: (decision: {
+		type: "approve" | "reject" | "edit";
+		message?: string;
+		edited_action?: { name: string; args: Record<string, unknown> };
+	}) => void;
+}) {
+	const [decided, setDecided] = useState<"approve" | "reject" | "edit" | null>(
+		interruptData.__decided__ ?? null
+	);
+	const [isPanelOpen, setIsPanelOpen] = useState(false);
+	const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
+
+	const accounts = interruptData.context?.accounts ?? [];
+	const validAccounts = accounts.filter((a) => !a.auth_expired);
+	const expiredAccounts = accounts.filter((a) => a.auth_expired);
+
+	const defaultAccountId = useMemo(() => {
+		if (validAccounts.length === 1) return String(validAccounts[0].id);
+		return "";
+	}, [validAccounts]);
+
+	const [selectedAccountId, setSelectedAccountId] = useState<string>(defaultAccountId);
+
+	const canApprove = !!selectedAccountId;
+
+	const reviewConfig = interruptData.review_configs[0];
+	const allowedDecisions = reviewConfig?.allowed_decisions ?? ["approve", "reject"];
+	const canEdit = allowedDecisions.includes("edit");
+
+	const handleApprove = useCallback(() => {
+		if (decided || isPanelOpen || !canApprove) return;
+		if (!allowedDecisions.includes("approve")) return;
+		setDecided("approve");
+		onDecision({
+			type: "approve",
+			edited_action: {
+				name: interruptData.action_requests[0].name,
+				args: {
+					...args,
+					connector_id: selectedAccountId ? Number(selectedAccountId) : null,
+				},
+			},
+		});
+	}, [decided, isPanelOpen, canApprove, allowedDecisions, onDecision, interruptData, args, selectedAccountId]);
+
+	useEffect(() => {
+		const handler = (e: KeyboardEvent) => {
+			if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+				handleApprove();
+			}
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [handleApprove]);
+
+	if (decided && decided !== "reject") return null;
+
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+			{/* Header */}
+			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
+				<div className="flex items-center gap-2">
+					<SendIcon className="size-4 text-muted-foreground shrink-0" />
+					<div>
+						<p className="text-sm font-semibold text-foreground">
+							{decided === "reject"
+								? "Email Sending Rejected"
+								: decided === "approve" || decided === "edit"
+									? "Email Sending Approved"
+									: "Send Email"}
+						</p>
+						<p className="text-xs text-muted-foreground mt-0.5">
+							{decided === "reject"
+								? "Email sending was cancelled"
+								: decided === "edit"
+									? "Email is being sent with your changes"
+									: decided === "approve"
+										? "Email is being sent"
+										: "This will send the email immediately"}
+						</p>
+					</div>
+				</div>
+				{!decided && canEdit && (
+					<Button
+						size="sm"
+						variant="ghost"
+						className="rounded-lg text-muted-foreground -mt-1 -mr-2"
+						onClick={() => {
+							setIsPanelOpen(true);
+							const extraFields: ExtraField[] = [
+								{ key: "to", label: "To", type: "email", value: args.to || "" },
+								{ key: "cc", label: "CC", type: "email", value: args.cc || "" },
+								{ key: "bcc", label: "BCC", type: "email", value: args.bcc || "" },
+							];
+							openHitlEditPanel({
+								title: args.subject ?? "",
+								content: args.body ?? "",
+								toolName: "Send Email",
+								extraFields,
+								onSave: (newTitle, newContent, extraFieldValues) => {
+									setIsPanelOpen(false);
+									setDecided("edit");
+									const extras = extraFieldValues ?? {};
+									onDecision({
+										type: "edit",
+										edited_action: {
+											name: interruptData.action_requests[0].name,
+											args: {
+												...args,
+												subject: newTitle,
+												body: newContent,
+												to: extras.to ?? args.to,
+												cc: extras.cc ?? args.cc,
+												bcc: extras.bcc ?? args.bcc,
+												connector_id: selectedAccountId ? Number(selectedAccountId) : null,
+											},
+										},
+									});
+								},
+							});
+						}}
+					>
+						<Pen className="size-3.5" />
+						Edit
+					</Button>
+				)}
+			</div>
+
+			{/* Account selector */}
+			{!decided && interruptData.context && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 space-y-4 select-none">
+						{interruptData.context.error ? (
+							<p className="text-sm text-destructive">{interruptData.context.error}</p>
+						) : (
+							<>
+								{accounts.length > 0 && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">
+											Gmail Account <span className="text-destructive">*</span>
+										</p>
+										<Select value={selectedAccountId} onValueChange={setSelectedAccountId}>
+											<SelectTrigger className="w-full">
+												<SelectValue placeholder="Select an account" />
+											</SelectTrigger>
+											<SelectContent>
+												{validAccounts.map((account) => (
+													<SelectItem key={account.id} value={String(account.id)}>
+														{account.email}
+													</SelectItem>
+												))}
+												{expiredAccounts.map((a) => (
+													<div
+														key={a.id}
+														className="relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 px-2 text-sm select-none opacity-50 pointer-events-none"
+													>
+														{a.email} (expired, retry after re-auth)
+													</div>
+												))}
+											</SelectContent>
+										</Select>
+									</div>
+								)}
+							</>
+						)}
+					</div>
+				</>
+			)}
+
+			{/* Email headers + body preview */}
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 pt-3 pb-2 space-y-1.5 select-none">
+				{args.to && (
+					<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<UserIcon className="size-3 shrink-0" />
+						<span>To: {args.to}</span>
+					</div>
+				)}
+				{args.cc && args.cc.trim() !== "" && (
+					<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<UsersIcon className="size-3 shrink-0" />
+						<span>CC: {args.cc}</span>
+					</div>
+				)}
+				{args.bcc && args.bcc.trim() !== "" && (
+					<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<UsersIcon className="size-3 shrink-0" />
+						<span>BCC: {args.bcc}</span>
+					</div>
+				)}
+			</div>
+
+			<div className="px-5 pt-1">
+				{args.subject != null && (
+					<p className="text-sm font-medium text-foreground">{args.subject}</p>
+				)}
+				{args.body != null && (
+					<div
+						className="mt-2 max-h-[7rem] overflow-hidden text-sm"
+						style={{
+							maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+							WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+						}}
+					>
+						<PlateEditor
+							markdown={String(args.body)}
+							readOnly
+							preset="readonly"
+							editorVariant="none"
+							className="h-auto [&_[data-slate-editor]]:!min-h-0 [&_[data-slate-editor]>*:first-child]:!mt-0"
+						/>
+					</div>
+				)}
+			</div>
+
+			{/* Action buttons */}
+			{!decided && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 flex items-center gap-2 select-none">
+						{allowedDecisions.includes("approve") && (
+							<Button
+								size="sm"
+								className="rounded-lg gap-1.5"
+								onClick={handleApprove}
+								disabled={!canApprove}
+							>
+								Send
+								<CornerDownLeftIcon className="size-3 opacity-60" />
+							</Button>
+						)}
+						{allowedDecisions.includes("reject") && (
+							<Button
+								size="sm"
+								variant="ghost"
+								className="rounded-lg text-muted-foreground"
+								onClick={() => {
+									setDecided("reject");
+									onDecision({ type: "reject", message: "User rejected the action." });
+								}}
+							>
+								Reject
+							</Button>
+						)}
+					</div>
+				</>
+			)}
+		</div>
+	);
+}
+
+function ErrorCard({ result }: { result: ErrorResult }) {
+	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">Failed to send email</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 AuthErrorCard({ result }: { result: AuthErrorResult }) {
+	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">
+					Gmail authentication expired
+				</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 || "Email sent successfully"}
+					</p>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export const SendGmailEmailToolUI = makeAssistantToolUI<
+	{ to: string; subject: string; body: string; cc?: string; bcc?: string },
+	SendGmailEmailResult
+>({
+	toolName: "send_gmail_email",
+	render: function SendGmailEmailUI({ args, result, status }) {
+		if (status.type === "running") {
+			return (
+				<div className="my-4 max-w-lg rounded-2xl border bg-muted/30 px-5 py-4 select-none">
+					<TextShimmerLoader text="Sending email..." size="sm" />
+				</div>
+			);
+		}
+
+		if (!result) return null;
+
+		if (isInterruptResult(result)) {
+			return (
+				<ApprovalCard
+					args={args}
+					interruptData={result}
+					onDecision={(decision) => {
+						window.dispatchEvent(
+							new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
+						);
+					}}
+				/>
+			);
+		}
+
+		if (
+			typeof result === "object" &&
+			result !== null &&
+			"status" in result &&
+			(result as { status: string }).status === "rejected"
+		) {
+			return null;
+		}
+
+		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isErrorResult(result)) return <ErrorCard result={result} />;
+
+		return <SuccessCard result={result as SuccessResult} />;
+	},
+});

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

@@ -0,0 +1,406 @@
+"use client";
+
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import {
+	CalendarIcon,
+	CornerDownLeftIcon,
+	MailIcon,
+	Trash2Icon,
+	TriangleAlertIcon,
+	UserIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
+
+interface GmailAccount {
+	id: number;
+	name: string;
+	email: string;
+	auth_expired?: boolean;
+}
+
+interface GmailMessage {
+	message_id: string;
+	thread_id?: string;
+	subject: string;
+	sender: string;
+	date: string;
+	connector_id: number;
+	document_id: number;
+}
+
+interface InterruptResult {
+	__interrupt__: true;
+	__decided__?: "approve" | "reject";
+	action_requests: Array<{
+		name: string;
+		args: Record<string, unknown>;
+	}>;
+	review_configs: Array<{
+		action_name: string;
+		allowed_decisions: Array<"approve" | "reject">;
+	}>;
+	context?: {
+		account?: GmailAccount;
+		email?: GmailMessage;
+		error?: string;
+	};
+}
+
+interface SuccessResult {
+	status: "success";
+	message_id?: string;
+	message?: string;
+	deleted_from_kb?: boolean;
+}
+
+interface ErrorResult {
+	status: "error";
+	message: string;
+}
+
+interface NotFoundResult {
+	status: "not_found";
+	message: string;
+}
+
+interface AuthErrorResult {
+	status: "auth_error";
+	message: string;
+	connector_type?: string;
+}
+
+type TrashGmailEmailResult =
+	| InterruptResult
+	| SuccessResult
+	| ErrorResult
+	| NotFoundResult
+	| AuthErrorResult;
+
+function isInterruptResult(result: unknown): result is InterruptResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"__interrupt__" in result &&
+		(result as InterruptResult).__interrupt__ === true
+	);
+}
+
+function isErrorResult(result: unknown): result is ErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as ErrorResult).status === "error"
+	);
+}
+
+function isNotFoundResult(result: unknown): result is NotFoundResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as NotFoundResult).status === "not_found"
+	);
+}
+
+function isAuthErrorResult(result: unknown): result is AuthErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as AuthErrorResult).status === "auth_error"
+	);
+}
+
+function formatDate(dateStr: string): string {
+	return new Date(dateStr).toLocaleDateString(undefined, { dateStyle: "medium" });
+}
+
+function ApprovalCard({
+	interruptData,
+	onDecision,
+}: {
+	interruptData: InterruptResult;
+	onDecision: (decision: {
+		type: "approve" | "reject";
+		message?: string;
+		edited_action?: { name: string; args: Record<string, unknown> };
+	}) => void;
+}) {
+	const [decided, setDecided] = useState<"approve" | "reject" | null>(
+		interruptData.__decided__ ?? null
+	);
+	const [deleteFromKb, setDeleteFromKb] = useState(false);
+
+	const account = interruptData.context?.account;
+	const email = interruptData.context?.email;
+
+	const handleApprove = useCallback(() => {
+		if (decided) return;
+		setDecided("approve");
+		onDecision({
+			type: "approve",
+			edited_action: {
+				name: interruptData.action_requests[0].name,
+				args: {
+					message_id: email?.message_id,
+					connector_id: email?.connector_id ?? account?.id,
+					delete_from_kb: deleteFromKb,
+				},
+			},
+		});
+	}, [decided, onDecision, interruptData, email, account?.id, deleteFromKb]);
+
+	useEffect(() => {
+		const handler = (e: KeyboardEvent) => {
+			if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+				handleApprove();
+			}
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [handleApprove]);
+
+	if (decided && decided !== "reject") return null;
+
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+			{/* Header */}
+			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
+				<div className="flex items-center gap-2">
+					<Trash2Icon className="size-4 text-muted-foreground shrink-0" />
+					<div>
+						<p className="text-sm font-semibold text-foreground">
+							{decided === "reject"
+								? "Email Trash Rejected"
+								: decided === "approve"
+									? "Email Trash Approved"
+									: "Trash Email"}
+						</p>
+						<p className="text-xs text-muted-foreground mt-0.5">
+							{decided === "reject"
+								? "Email trash was cancelled"
+								: decided === "approve"
+									? "Email is being trashed"
+									: "Requires your approval to proceed"}
+						</p>
+					</div>
+				</div>
+			</div>
+
+			{/* Context — read-only account and email info */}
+			{!decided && interruptData.context && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 space-y-4 select-none">
+						{interruptData.context.error ? (
+							<p className="text-sm text-destructive">{interruptData.context.error}</p>
+						) : (
+							<>
+								{account && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">Gmail Account</p>
+										<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
+											{account.email}
+										</div>
+									</div>
+								)}
+
+								{email && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">Email to Trash</p>
+										<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm space-y-1.5">
+											<div className="flex items-center gap-1.5">
+												<MailIcon className="size-3 shrink-0 text-muted-foreground" />
+												<span className="font-medium">{email.subject}</span>
+											</div>
+											<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+												<UserIcon className="size-3 shrink-0" />
+												<span>From: {email.sender}</span>
+											</div>
+											<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+												<CalendarIcon className="size-3 shrink-0" />
+												<span>Date: {formatDate(email.date)}</span>
+											</div>
+										</div>
+									</div>
+								)}
+							</>
+						)}
+					</div>
+				</>
+			)}
+
+			{/* delete_from_kb toggle */}
+			{!decided && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 select-none">
+						<div className="flex items-center gap-2.5">
+							<Checkbox
+								id="gmail-delete-from-kb"
+								checked={deleteFromKb}
+								onCheckedChange={(v) => setDeleteFromKb(v === true)}
+								className="shrink-0"
+							/>
+							<label htmlFor="gmail-delete-from-kb" className="flex-1 cursor-pointer">
+								<span className="text-sm text-foreground">Also remove from knowledge base</span>
+								<p className="text-xs text-muted-foreground mt-0.5">
+									This will permanently delete the email from your knowledge base (cannot be undone)
+								</p>
+							</label>
+						</div>
+					</div>
+				</>
+			)}
+
+			{/* Action buttons */}
+			{!decided && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 flex items-center gap-2 select-none">
+						<Button
+							size="sm"
+							className="rounded-lg gap-1.5"
+							onClick={handleApprove}
+						>
+							Approve
+							<CornerDownLeftIcon className="size-3 opacity-60" />
+						</Button>
+						<Button
+							size="sm"
+							variant="ghost"
+							className="rounded-lg text-muted-foreground"
+							onClick={() => {
+								setDecided("reject");
+								onDecision({ type: "reject", message: "User rejected the action." });
+							}}
+						>
+							Reject
+						</Button>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}
+
+function ErrorCard({ result }: { result: ErrorResult }) {
+	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">Failed to trash email</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 AuthErrorCard({ result }: { result: AuthErrorResult }) {
+	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">
+					Gmail authentication expired
+				</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">
+			<div className="px-5 pt-5 pb-4">
+				<div className="flex items-center gap-2">
+					<TriangleAlertIcon className="size-4 text-amber-500 shrink-0" />
+					<p className="text-sm font-semibold text-amber-600 dark:text-amber-400">
+						Email not found
+					</p>
+				</div>
+			</div>
+			<div className="mx-5 h-px bg-amber-500/30" />
+			<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">
+				<p className="text-sm font-semibold text-foreground">
+					{result.message || "Email moved to trash successfully"}
+				</p>
+			</div>
+			{result.deleted_from_kb && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 text-xs">
+						<span className="text-green-600 dark:text-green-500">
+							Also removed from knowledge base
+						</span>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}
+
+export const TrashGmailEmailToolUI = makeAssistantToolUI<
+	{ email_subject_or_id: string; delete_from_kb?: boolean },
+	TrashGmailEmailResult
+>({
+	toolName: "trash_gmail_email",
+	render: function TrashGmailEmailUI({ result, status }) {
+		if (status.type === "running") {
+			return (
+				<div className="my-4 max-w-lg rounded-2xl border bg-muted/30 px-5 py-4 select-none">
+					<TextShimmerLoader text="Trashing email..." size="sm" />
+				</div>
+			);
+		}
+
+		if (!result) return null;
+
+		if (isInterruptResult(result)) {
+			return (
+				<ApprovalCard
+					interruptData={result}
+					onDecision={(decision) => {
+						window.dispatchEvent(
+							new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
+						);
+					}}
+				/>
+			);
+		}
+
+		if (
+			typeof result === "object" &&
+			result !== null &&
+			"status" in result &&
+			(result as { status: string }).status === "rejected"
+		) {
+			return null;
+		}
+
+		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
+		if (isErrorResult(result)) return <ErrorCard result={result} />;
+
+		return <SuccessCard result={result as SuccessResult} />;
+	},
+});

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

@@ -0,0 +1,559 @@
+"use client";
+
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import {
+	CalendarPlusIcon,
+	ClockIcon,
+	MapPinIcon,
+	UsersIcon,
+	GlobeIcon,
+	CornerDownLeftIcon,
+	Pen,
+} from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useSetAtom } from "jotai";
+import { Button } from "@/components/ui/button";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { PlateEditor } from "@/components/editor/plate-editor";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
+import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
+import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
+
+interface GoogleCalendarAccount {
+	id: number;
+	name: string;
+	auth_expired?: boolean;
+}
+
+interface CalendarEntry {
+	id: string;
+	summary: string;
+	primary?: boolean;
+}
+
+interface InterruptResult {
+	__interrupt__: true;
+	__decided__?: "approve" | "reject" | "edit";
+	action_requests: Array<{
+		name: string;
+		args: Record<string, unknown>;
+	}>;
+	review_configs: Array<{
+		action_name: string;
+		allowed_decisions: Array<"approve" | "edit" | "reject">;
+	}>;
+	context?: {
+		accounts?: GoogleCalendarAccount[];
+		calendars?: CalendarEntry[];
+		timezone?: string;
+		error?: string;
+	};
+}
+
+interface SuccessResult {
+	status: "success";
+	event_id: string;
+	html_link?: string;
+	message?: string;
+}
+
+interface ErrorResult {
+	status: "error";
+	message: string;
+}
+
+interface AuthErrorResult {
+	status: "auth_error";
+	message: string;
+	connector_type?: string;
+}
+
+type CreateCalendarEventResult =
+	| InterruptResult
+	| SuccessResult
+	| ErrorResult
+	| AuthErrorResult;
+
+function isInterruptResult(result: unknown): result is InterruptResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"__interrupt__" in result &&
+		(result as InterruptResult).__interrupt__ === true
+	);
+}
+
+function isErrorResult(result: unknown): result is ErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as ErrorResult).status === "error"
+	);
+}
+
+function isAuthErrorResult(result: unknown): result is AuthErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as AuthErrorResult).status === "auth_error"
+	);
+}
+
+function formatDateTime(iso: string): string {
+	try {
+		return new Date(iso).toLocaleString(undefined, {
+			dateStyle: "medium",
+			timeStyle: "short",
+		});
+	} catch {
+		return iso;
+	}
+}
+
+function ApprovalCard({
+	args,
+	interruptData,
+	onDecision,
+}: {
+	args: {
+		summary: string;
+		start_datetime: string;
+		end_datetime: string;
+		description?: string;
+		location?: string;
+		attendees?: string[];
+	};
+	interruptData: InterruptResult;
+	onDecision: (decision: {
+		type: "approve" | "reject" | "edit";
+		message?: string;
+		edited_action?: { name: string; args: Record<string, unknown> };
+	}) => void;
+}) {
+	const [decided, setDecided] = useState<"approve" | "reject" | "edit" | null>(
+		interruptData.__decided__ ?? null
+	);
+	const [isPanelOpen, setIsPanelOpen] = useState(false);
+	const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
+
+	const accounts = interruptData.context?.accounts ?? [];
+	const validAccounts = accounts.filter((a) => !a.auth_expired);
+	const expiredAccounts = accounts.filter((a) => a.auth_expired);
+	const calendars = interruptData.context?.calendars ?? [];
+	const timezone = interruptData.context?.timezone ?? "";
+
+	const defaultAccountId = useMemo(() => {
+		if (validAccounts.length === 1) return String(validAccounts[0].id);
+		return "";
+	}, [validAccounts]);
+
+	const defaultCalendarId = useMemo(() => {
+		const primary = calendars.find((c) => c.primary);
+		if (primary) return primary.id;
+		if (calendars.length === 1) return calendars[0].id;
+		return "";
+	}, [calendars]);
+
+	const [selectedAccountId, setSelectedAccountId] = useState<string>(defaultAccountId);
+	const [selectedCalendarId, setSelectedCalendarId] = useState<string>(defaultCalendarId);
+
+	const reviewConfig = interruptData.review_configs[0];
+	const allowedDecisions = reviewConfig?.allowed_decisions ?? ["approve", "reject"];
+	const canEdit = allowedDecisions.includes("edit");
+
+	const canApprove =
+		!!selectedAccountId &&
+		!!selectedCalendarId &&
+		!!args.summary?.trim();
+
+	const handleApprove = useCallback(() => {
+		if (decided || isPanelOpen || !canApprove) return;
+		if (!allowedDecisions.includes("approve")) return;
+		setDecided("approve");
+		onDecision({
+			type: "approve",
+			edited_action: {
+				name: interruptData.action_requests[0].name,
+				args: {
+					...args,
+					connector_id: selectedAccountId ? Number(selectedAccountId) : null,
+					calendar_id: selectedCalendarId || null,
+				},
+			},
+		});
+	}, [decided, isPanelOpen, canApprove, allowedDecisions, onDecision, interruptData, args, selectedAccountId, selectedCalendarId]);
+
+	useEffect(() => {
+		const handler = (e: KeyboardEvent) => {
+			if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+				handleApprove();
+			}
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [handleApprove]);
+
+	if (decided && decided !== "reject") return null;
+
+	const attendeesList = (args.attendees as string[]) ?? [];
+
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+			{/* Header */}
+			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
+				<div className="flex items-center gap-2">
+					<CalendarPlusIcon className="size-4 text-muted-foreground shrink-0" />
+					<div>
+						<p className="text-sm font-semibold text-foreground">
+							{decided === "reject"
+								? "Calendar Event Rejected"
+								: decided === "approve" || decided === "edit"
+									? "Calendar Event Approved"
+									: "Create Calendar Event"}
+						</p>
+						<p className="text-xs text-muted-foreground mt-0.5">
+							{decided === "reject"
+								? "Event creation was cancelled"
+								: decided === "edit"
+									? "Event creation is in progress with your changes"
+									: decided === "approve"
+										? "Event creation is in progress"
+										: "Requires your approval to proceed"}
+						</p>
+					</div>
+				</div>
+				{!decided && canEdit && (
+					<Button
+						size="sm"
+						variant="ghost"
+						className="rounded-lg text-muted-foreground -mt-1 -mr-2"
+						onClick={() => {
+							setIsPanelOpen(true);
+							const extraFields: ExtraField[] = [
+								{ key: "start_datetime", label: "Start", type: "datetime-local", value: args.start_datetime || "" },
+								{ key: "end_datetime", label: "End", type: "datetime-local", value: args.end_datetime || "" },
+								{ key: "location", label: "Location", type: "text", value: args.location || "" },
+								{ key: "attendees", label: "Attendees (comma-separated emails)", type: "text", value: attendeesList.join(", ") },
+							];
+							openHitlEditPanel({
+								title: args.summary ?? "",
+								content: args.description ?? "",
+								toolName: "Calendar Event",
+								extraFields,
+								onSave: (newTitle, newContent, extraFieldValues) => {
+									setIsPanelOpen(false);
+									setDecided("edit");
+
+									const editedArgs: Record<string, unknown> = {
+										...args,
+										summary: newTitle,
+										description: newContent,
+										connector_id: selectedAccountId ? Number(selectedAccountId) : null,
+										calendar_id: selectedCalendarId || null,
+									};
+
+									if (extraFieldValues) {
+										if (extraFieldValues.start_datetime) editedArgs.start_datetime = extraFieldValues.start_datetime;
+										if (extraFieldValues.end_datetime) editedArgs.end_datetime = extraFieldValues.end_datetime;
+										if (extraFieldValues.location !== undefined) editedArgs.location = extraFieldValues.location;
+										if (extraFieldValues.attendees !== undefined) {
+											editedArgs.attendees = extraFieldValues.attendees
+												.split(",")
+												.map((e) => e.trim())
+												.filter(Boolean);
+										}
+									}
+
+									onDecision({
+										type: "edit",
+										edited_action: {
+											name: interruptData.action_requests[0].name,
+											args: editedArgs,
+										},
+									});
+								},
+							});
+						}}
+					>
+						<Pen className="size-3.5" />
+						Edit
+					</Button>
+				)}
+			</div>
+
+			{/* Context section */}
+			{!decided && interruptData.context && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 space-y-4 select-none">
+						{interruptData.context.error ? (
+							<p className="text-sm text-destructive">{interruptData.context.error}</p>
+						) : (
+							<>
+								{accounts.length > 0 && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">
+											Google Calendar Account <span className="text-destructive">*</span>
+										</p>
+										<Select value={selectedAccountId} onValueChange={setSelectedAccountId}>
+											<SelectTrigger className="w-full">
+												<SelectValue placeholder="Select an account" />
+											</SelectTrigger>
+											<SelectContent>
+												{validAccounts.map((account) => (
+													<SelectItem key={account.id} value={String(account.id)}>
+														{account.name}
+													</SelectItem>
+												))}
+												{expiredAccounts.map((a) => (
+													<div
+														key={a.id}
+														className="relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 px-2 text-sm select-none opacity-50 pointer-events-none"
+													>
+														{a.name} (expired, retry after re-auth)
+													</div>
+												))}
+											</SelectContent>
+										</Select>
+									</div>
+								)}
+
+								{calendars.length > 0 && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">
+											Calendar <span className="text-destructive">*</span>
+										</p>
+										<Select value={selectedCalendarId} onValueChange={setSelectedCalendarId}>
+											<SelectTrigger className="w-full">
+												<SelectValue placeholder="Select a calendar" />
+											</SelectTrigger>
+											<SelectContent>
+												{calendars.map((cal) => (
+													<SelectItem key={cal.id} value={cal.id}>
+														{cal.summary}{cal.primary ? " (primary)" : ""}
+													</SelectItem>
+												))}
+											</SelectContent>
+										</Select>
+									</div>
+								)}
+
+								{timezone && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">Timezone</p>
+										<div className="flex items-center gap-2 w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
+											<GlobeIcon className="size-3.5 text-muted-foreground shrink-0" />
+											{timezone}
+										</div>
+									</div>
+								)}
+							</>
+						)}
+					</div>
+				</>
+			)}
+
+			{/* Content preview */}
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 pt-3 pb-3 space-y-2">
+				{args.summary && (
+					<p className="text-sm font-medium text-foreground">{args.summary}</p>
+				)}
+
+				{(args.start_datetime || args.end_datetime) && (
+					<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<ClockIcon className="size-3.5 shrink-0" />
+						<span>
+							{args.start_datetime ? formatDateTime(args.start_datetime) : ""}
+							{args.start_datetime && args.end_datetime ? " — " : ""}
+							{args.end_datetime ? formatDateTime(args.end_datetime) : ""}
+						</span>
+					</div>
+				)}
+
+				{args.location && (
+					<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<MapPinIcon className="size-3.5 shrink-0" />
+						<span>{args.location}</span>
+					</div>
+				)}
+
+				{attendeesList.length > 0 && (
+					<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<UsersIcon className="size-3.5 shrink-0" />
+						<span>{attendeesList.join(", ")}</span>
+					</div>
+				)}
+
+				{args.description && (
+					<div
+						className="mt-2 max-h-[7rem] overflow-hidden text-sm"
+						style={{
+							maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+							WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+						}}
+					>
+						<PlateEditor
+							markdown={String(args.description)}
+							readOnly
+							preset="readonly"
+							editorVariant="none"
+							className="h-auto [&_[data-slate-editor]]:!min-h-0 [&_[data-slate-editor]>*:first-child]:!mt-0"
+						/>
+					</div>
+				)}
+			</div>
+
+			{/* Action buttons */}
+			{!decided && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 flex items-center gap-2 select-none">
+						{allowedDecisions.includes("approve") && (
+							<Button
+								size="sm"
+								className="rounded-lg gap-1.5"
+								onClick={handleApprove}
+								disabled={!canApprove}
+							>
+								Approve
+								<CornerDownLeftIcon className="size-3 opacity-60" />
+							</Button>
+						)}
+						{allowedDecisions.includes("reject") && (
+							<Button
+								size="sm"
+								variant="ghost"
+								className="rounded-lg text-muted-foreground"
+								onClick={() => {
+									setDecided("reject");
+									onDecision({ type: "reject", message: "User rejected the action." });
+								}}
+							>
+								Reject
+							</Button>
+						)}
+					</div>
+				</>
+			)}
+		</div>
+	);
+}
+
+function ErrorCard({ result }: { result: ErrorResult }) {
+	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">Failed to create calendar event</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 AuthErrorCard({ result }: { result: AuthErrorResult }) {
+	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">
+					Google Calendar authentication expired
+				</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">
+				<p className="text-sm font-semibold text-foreground">
+					{result.message || "Calendar event created successfully"}
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4 space-y-2 text-xs">
+				{result.html_link && (
+					<div>
+						<a
+							href={result.html_link}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-primary hover:underline"
+						>
+							Open in Google Calendar
+						</a>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export const CreateCalendarEventToolUI = makeAssistantToolUI<
+	{
+		summary: string;
+		start_datetime: string;
+		end_datetime: string;
+		description?: string;
+		location?: string;
+		attendees?: string[];
+	},
+	CreateCalendarEventResult
+>({
+	toolName: "create_calendar_event",
+	render: function CreateCalendarEventUI({ args, result, status }) {
+		if (status.type === "running") {
+			return (
+				<div className="my-4 max-w-lg rounded-2xl border bg-muted/30 px-5 py-4 select-none">
+					<TextShimmerLoader text="Preparing calendar event..." size="sm" />
+				</div>
+			);
+		}
+
+		if (!result) return null;
+
+		if (isInterruptResult(result)) {
+			return (
+				<ApprovalCard
+					args={args}
+					interruptData={result}
+					onDecision={(decision) => {
+						window.dispatchEvent(
+							new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
+						);
+					}}
+				/>
+			);
+		}
+
+		if (
+			typeof result === "object" &&
+			result !== null &&
+			"status" in result &&
+			(result as { status: string }).status === "rejected"
+		) {
+			return null;
+		}
+
+		if (isAuthErrorResult(result)) return <AuthErrorCard 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

@@ -0,0 +1,459 @@
+"use client";
+
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import {
+	CalendarX2Icon,
+	CalendarIcon,
+	ClockIcon,
+	MapPinIcon,
+	CornerDownLeftIcon,
+	TriangleAlertIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
+
+interface GoogleCalendarAccount {
+	id: number;
+	name: string;
+	auth_expired?: boolean;
+}
+
+interface CalendarEvent {
+	event_id: string;
+	summary: string;
+	start: string;
+	end: string;
+	description?: string;
+	location?: string;
+	attendees?: Array<{ email: string }>;
+	calendar_id: string;
+	document_id: number;
+	indexed_at?: string;
+}
+
+interface InterruptResult {
+	__interrupt__: true;
+	__decided__?: "approve" | "reject";
+	action_requests: Array<{
+		name: string;
+		args: Record<string, unknown>;
+	}>;
+	review_configs: Array<{
+		action_name: string;
+		allowed_decisions: Array<"approve" | "reject">;
+	}>;
+	context?: {
+		account?: GoogleCalendarAccount;
+		event?: CalendarEvent;
+		error?: string;
+	};
+}
+
+interface SuccessResult {
+	status: "success";
+	event_id: string;
+	message?: string;
+	deleted_from_kb?: boolean;
+}
+
+interface ErrorResult {
+	status: "error";
+	message: string;
+}
+
+interface NotFoundResult {
+	status: "not_found";
+	message: string;
+}
+
+interface WarningResult {
+	status: "success";
+	warning: string;
+	event_id?: string;
+	message?: string;
+}
+
+interface AuthErrorResult {
+	status: "auth_error";
+	message: string;
+	connector_type?: string;
+}
+
+type DeleteCalendarEventResult =
+	| InterruptResult
+	| SuccessResult
+	| ErrorResult
+	| NotFoundResult
+	| WarningResult
+	| AuthErrorResult;
+
+function isInterruptResult(result: unknown): result is InterruptResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"__interrupt__" in result &&
+		(result as InterruptResult).__interrupt__ === true
+	);
+}
+
+function isErrorResult(result: unknown): result is ErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as ErrorResult).status === "error"
+	);
+}
+
+function isNotFoundResult(result: unknown): result is NotFoundResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as NotFoundResult).status === "not_found"
+	);
+}
+
+function isAuthErrorResult(result: unknown): result is AuthErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as AuthErrorResult).status === "auth_error"
+	);
+}
+
+function isWarningResult(result: unknown): result is WarningResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as WarningResult).status === "success" &&
+		"warning" in result &&
+		typeof (result as WarningResult).warning === "string"
+	);
+}
+
+function formatDateTime(iso: string): string {
+	try {
+		return new Date(iso).toLocaleString(undefined, {
+			dateStyle: "medium",
+			timeStyle: "short",
+		});
+	} catch {
+		return iso;
+	}
+}
+
+function ApprovalCard({
+	interruptData,
+	onDecision,
+}: {
+	interruptData: InterruptResult;
+	onDecision: (decision: {
+		type: "approve" | "reject";
+		message?: string;
+		edited_action?: { name: string; args: Record<string, unknown> };
+	}) => void;
+}) {
+	const [decided, setDecided] = useState<"approve" | "reject" | null>(
+		interruptData.__decided__ ?? null
+	);
+	const [deleteFromKb, setDeleteFromKb] = useState(false);
+
+	const context = interruptData.context;
+	const account = context?.account;
+	const event = context?.event;
+
+	const handleApprove = useCallback(() => {
+		if (decided) return;
+		setDecided("approve");
+		onDecision({
+			type: "approve",
+			edited_action: {
+				name: interruptData.action_requests[0].name,
+				args: {
+					event_id: event?.event_id,
+					connector_id: account?.id,
+					delete_from_kb: deleteFromKb,
+				},
+			},
+		});
+	}, [decided, onDecision, interruptData, event?.event_id, account?.id, deleteFromKb]);
+
+	useEffect(() => {
+		const handler = (e: KeyboardEvent) => {
+			if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+				handleApprove();
+			}
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [handleApprove]);
+
+	if (decided && decided !== "reject") return null;
+
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+			{/* Header */}
+			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
+				<div className="flex items-center gap-2">
+					<CalendarX2Icon className="size-4 text-muted-foreground shrink-0" />
+					<div>
+						<p className="text-sm font-semibold text-foreground">
+							{decided === "reject"
+								? "Calendar Event Deletion Rejected"
+								: decided === "approve"
+									? "Calendar Event Deletion Approved"
+									: "Delete Calendar Event"}
+						</p>
+						<p className="text-xs text-muted-foreground mt-0.5">
+							{decided === "reject"
+								? "Event deletion was cancelled"
+								: decided === "approve"
+									? "Event deletion is in progress"
+									: "Requires your approval to proceed"}
+						</p>
+					</div>
+				</div>
+			</div>
+
+			{/* Context section */}
+			{!decided && context && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 space-y-4 select-none">
+						{context.error ? (
+							<p className="text-sm text-destructive">{context.error}</p>
+						) : (
+							<>
+								{account && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">Google Calendar Account</p>
+										<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
+											{account.name}
+										</div>
+									</div>
+								)}
+
+								{event && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">Event to Delete</p>
+										<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm space-y-1.5">
+											<div className="flex items-center gap-1.5">
+												<CalendarIcon className="size-3 shrink-0 text-muted-foreground" />
+												<span className="font-medium">{event.summary}</span>
+											</div>
+											{(event.start || event.end) && (
+												<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+													<ClockIcon className="size-3 shrink-0" />
+													<span>
+														{event.start ? formatDateTime(event.start) : ""}
+														{event.start && event.end ? " — " : ""}
+														{event.end ? formatDateTime(event.end) : ""}
+													</span>
+												</div>
+											)}
+											{event.location && (
+												<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+													<MapPinIcon className="size-3 shrink-0" />
+													<span>{event.location}</span>
+												</div>
+											)}
+										</div>
+									</div>
+								)}
+							</>
+						)}
+					</div>
+				</>
+			)}
+
+			{/* delete_from_kb toggle */}
+			{!decided && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 select-none">
+						<div className="flex items-center gap-2.5">
+							<Checkbox
+								id="calendar-delete-from-kb"
+								checked={deleteFromKb}
+								onCheckedChange={(v) => setDeleteFromKb(v === true)}
+								className="shrink-0"
+							/>
+							<label htmlFor="calendar-delete-from-kb" className="flex-1 cursor-pointer">
+								<span className="text-sm text-foreground">Also remove from knowledge base</span>
+								<p className="text-xs text-muted-foreground mt-0.5">
+									This will permanently delete the event from your knowledge base (cannot be undone)
+								</p>
+							</label>
+						</div>
+					</div>
+				</>
+			)}
+
+			{/* Action buttons */}
+			{!decided && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 flex items-center gap-2 select-none">
+						<Button
+							size="sm"
+							className="rounded-lg gap-1.5"
+							onClick={handleApprove}
+						>
+							Approve
+							<CornerDownLeftIcon className="size-3 opacity-60" />
+						</Button>
+						<Button
+							size="sm"
+							variant="ghost"
+							className="rounded-lg text-muted-foreground"
+							onClick={() => {
+								setDecided("reject");
+								onDecision({ type: "reject", message: "User rejected the action." });
+							}}
+						>
+							Reject
+						</Button>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}
+
+function ErrorCard({ result }: { result: ErrorResult }) {
+	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">Failed to delete calendar event</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 AuthErrorCard({ result }: { result: AuthErrorResult }) {
+	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">
+					Google Calendar authentication expired
+				</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">
+			<div className="px-5 pt-5 pb-4">
+				<div className="flex items-center gap-2">
+					<TriangleAlertIcon className="size-4 text-amber-500 shrink-0" />
+					<p className="text-sm font-semibold text-amber-600 dark:text-amber-400">
+						Event not found
+					</p>
+				</div>
+			</div>
+			<div className="mx-5 h-px bg-amber-500/30" />
+			<div className="px-5 py-4">
+				<p className="text-sm text-muted-foreground">{result.message}</p>
+			</div>
+		</div>
+	);
+}
+
+function WarningCard({ result }: { result: WarningResult }) {
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 select-none">
+			<div className="flex items-start gap-3 border-b px-5 py-4">
+				<TriangleAlertIcon className="size-4 mt-0.5 shrink-0 text-amber-500" />
+				<p className="text-sm font-medium text-amber-600 dark:text-amber-500">Partial success</p>
+			</div>
+			<div className="px-5 py-4 space-y-2 text-xs">
+				<p className="text-sm text-muted-foreground">{result.warning}</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">
+				<p className="text-sm font-semibold text-foreground">
+					{result.message || "Calendar event deleted successfully"}
+				</p>
+			</div>
+			{result.deleted_from_kb && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 text-xs">
+						<span className="text-green-600 dark:text-green-500">
+							Also removed from knowledge base
+						</span>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}
+
+export const DeleteCalendarEventToolUI = makeAssistantToolUI<
+	{ event_ref: string; delete_from_kb?: boolean },
+	DeleteCalendarEventResult
+>({
+	toolName: "delete_calendar_event",
+	render: function DeleteCalendarEventUI({ result, status }) {
+		if (status.type === "running") {
+			return (
+				<div className="my-4 max-w-lg rounded-2xl border bg-muted/30 px-5 py-4 select-none">
+					<TextShimmerLoader text="Deleting calendar event..." size="sm" />
+				</div>
+			);
+		}
+
+		if (!result) return null;
+
+		if (isInterruptResult(result)) {
+			return (
+				<ApprovalCard
+					interruptData={result}
+					onDecision={(decision) => {
+						const event = new CustomEvent("hitl-decision", {
+							detail: { decisions: [decision] },
+						});
+						window.dispatchEvent(event);
+					}}
+				/>
+			);
+		}
+
+		if (
+			typeof result === "object" &&
+			result !== null &&
+			"status" in result &&
+			(result as { status: string }).status === "rejected"
+		) {
+			return null;
+		}
+
+		if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
+		if (isWarningResult(result)) return <WarningCard result={result} />;
+		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isErrorResult(result)) return <ErrorCard result={result} />;
+
+		return <SuccessCard result={result as SuccessResult} />;
+	},
+});

surfsense_web/components/tool-ui/google-calendar/index.ts

@@ -0,0 +1,3 @@
+export { CreateCalendarEventToolUI } from "./create-event";
+export { UpdateCalendarEventToolUI } from "./update-event";
+export { DeleteCalendarEventToolUI } from "./delete-event";

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

@@ -0,0 +1,602 @@
+"use client";
+
+import { makeAssistantToolUI } from "@assistant-ui/react";
+import {
+	CalendarIcon,
+	ClockIcon,
+	MapPinIcon,
+	UsersIcon,
+	ArrowRightIcon,
+	CornerDownLeftIcon,
+	Pen,
+	TriangleAlertIcon,
+} from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { useSetAtom } from "jotai";
+import { Button } from "@/components/ui/button";
+import { PlateEditor } from "@/components/editor/plate-editor";
+import { TextShimmerLoader } from "@/components/prompt-kit/loader";
+import { openHitlEditPanelAtom } from "@/atoms/chat/hitl-edit-panel.atom";
+import type { ExtraField } from "@/atoms/chat/hitl-edit-panel.atom";
+
+interface GoogleCalendarAccount {
+	id: number;
+	name: string;
+	auth_expired?: boolean;
+}
+
+interface CalendarEvent {
+	event_id: string;
+	summary: string;
+	start: string;
+	end: string;
+	description?: string;
+	location?: string;
+	attendees?: Array<{ email: string }>;
+	calendar_id: string;
+	document_id: number;
+	indexed_at?: string;
+}
+
+interface InterruptResult {
+	__interrupt__: true;
+	__decided__?: "approve" | "reject" | "edit";
+	action_requests: Array<{
+		name: string;
+		args: Record<string, unknown>;
+	}>;
+	review_configs: Array<{
+		action_name: string;
+		allowed_decisions: Array<"approve" | "edit" | "reject">;
+	}>;
+	context?: {
+		account?: GoogleCalendarAccount;
+		event?: CalendarEvent;
+		error?: string;
+	};
+}
+
+interface SuccessResult {
+	status: "success";
+	event_id: string;
+	html_link?: string;
+	message?: string;
+}
+
+interface ErrorResult {
+	status: "error";
+	message: string;
+}
+
+interface NotFoundResult {
+	status: "not_found";
+	message: string;
+}
+
+interface AuthErrorResult {
+	status: "auth_error";
+	message: string;
+	connector_type?: string;
+}
+
+type UpdateCalendarEventResult =
+	| InterruptResult
+	| SuccessResult
+	| ErrorResult
+	| NotFoundResult
+	| AuthErrorResult;
+
+function isInterruptResult(result: unknown): result is InterruptResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"__interrupt__" in result &&
+		(result as InterruptResult).__interrupt__ === true
+	);
+}
+
+function isErrorResult(result: unknown): result is ErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as ErrorResult).status === "error"
+	);
+}
+
+function isNotFoundResult(result: unknown): result is NotFoundResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as NotFoundResult).status === "not_found"
+	);
+}
+
+function isAuthErrorResult(result: unknown): result is AuthErrorResult {
+	return (
+		typeof result === "object" &&
+		result !== null &&
+		"status" in result &&
+		(result as AuthErrorResult).status === "auth_error"
+	);
+}
+
+function formatDateTime(iso: string): string {
+	try {
+		return new Date(iso).toLocaleString(undefined, {
+			dateStyle: "medium",
+			timeStyle: "short",
+		});
+	} catch {
+		return iso;
+	}
+}
+
+function ApprovalCard({
+	interruptData,
+	onDecision,
+}: {
+	interruptData: InterruptResult;
+	onDecision: (decision: {
+		type: "approve" | "reject" | "edit";
+		message?: string;
+		edited_action?: { name: string; args: Record<string, unknown> };
+	}) => void;
+}) {
+	const actionArgs = interruptData.action_requests[0]?.args ?? {};
+	const context = interruptData.context;
+	const account = context?.account;
+	const event = context?.event;
+
+	const [decided, setDecided] = useState<"approve" | "reject" | "edit" | null>(
+		interruptData.__decided__ ?? null
+	);
+	const [isPanelOpen, setIsPanelOpen] = useState(false);
+	const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
+
+	const reviewConfig = interruptData.review_configs[0];
+	const allowedDecisions = reviewConfig?.allowed_decisions ?? ["approve", "reject"];
+	const canEdit = allowedDecisions.includes("edit");
+
+	const currentAttendees = event?.attendees?.map((a) => a.email) ?? [];
+	const proposedAttendees = Array.isArray(actionArgs.new_attendees)
+		? (actionArgs.new_attendees as string[])
+		: null;
+
+	const changes: Array<{ label: string; oldVal: string; newVal: string }> = [];
+
+	if (actionArgs.new_summary && String(actionArgs.new_summary) !== event?.summary) {
+		changes.push({ label: "Summary", oldVal: event?.summary ?? "", newVal: String(actionArgs.new_summary) });
+	}
+	if (actionArgs.new_start_datetime && String(actionArgs.new_start_datetime) !== event?.start) {
+		changes.push({
+			label: "Start",
+			oldVal: event?.start ? formatDateTime(event.start) : "",
+			newVal: formatDateTime(String(actionArgs.new_start_datetime)),
+		});
+	}
+	if (actionArgs.new_end_datetime && String(actionArgs.new_end_datetime) !== event?.end) {
+		changes.push({
+			label: "End",
+			oldVal: event?.end ? formatDateTime(event.end) : "",
+			newVal: formatDateTime(String(actionArgs.new_end_datetime)),
+		});
+	}
+	if (actionArgs.new_location !== undefined && String(actionArgs.new_location ?? "") !== (event?.location ?? "")) {
+		changes.push({ label: "Location", oldVal: event?.location ?? "", newVal: String(actionArgs.new_location ?? "") });
+	}
+	if (proposedAttendees) {
+		const oldStr = currentAttendees.join(", ");
+		const newStr = proposedAttendees.join(", ");
+		if (oldStr !== newStr) {
+			changes.push({ label: "Attendees", oldVal: oldStr, newVal: newStr });
+		}
+	}
+
+	const hasDescriptionChange =
+		actionArgs.new_description !== undefined &&
+		String(actionArgs.new_description ?? "") !== (event?.description ?? "");
+
+	const buildFinalArgs = useCallback(() => {
+		return {
+			event_id: event?.event_id,
+			document_id: event?.document_id,
+			connector_id: account?.id,
+			new_summary: actionArgs.new_summary ?? null,
+			new_description: actionArgs.new_description ?? null,
+			new_start_datetime: actionArgs.new_start_datetime ?? null,
+			new_end_datetime: actionArgs.new_end_datetime ?? null,
+			new_location: actionArgs.new_location ?? null,
+			new_attendees: proposedAttendees ?? null,
+		};
+	}, [event, account, actionArgs, proposedAttendees]);
+
+	const handleApprove = useCallback(() => {
+		if (decided || isPanelOpen) return;
+		if (!allowedDecisions.includes("approve")) return;
+		setDecided("approve");
+		onDecision({
+			type: "approve",
+			edited_action: {
+				name: interruptData.action_requests[0].name,
+				args: buildFinalArgs(),
+			},
+		});
+	}, [decided, isPanelOpen, allowedDecisions, onDecision, interruptData, buildFinalArgs]);
+
+	useEffect(() => {
+		const handler = (e: KeyboardEvent) => {
+			if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
+				handleApprove();
+			}
+		};
+		window.addEventListener("keydown", handler);
+		return () => window.removeEventListener("keydown", handler);
+	}, [handleApprove]);
+
+	if (decided && decided !== "reject") return null;
+
+	return (
+		<div className="my-4 max-w-lg overflow-hidden rounded-2xl border bg-muted/30 transition-all duration-300">
+			{/* Header */}
+			<div className="flex items-start justify-between px-5 pt-5 pb-4 select-none">
+				<div className="flex items-center gap-2">
+					<CalendarIcon className="size-4 text-muted-foreground shrink-0" />
+					<div>
+						<p className="text-sm font-semibold text-foreground">
+							{decided === "reject"
+								? "Calendar Event Update Rejected"
+								: decided === "approve" || decided === "edit"
+									? "Calendar Event Update Approved"
+									: "Update Calendar Event"}
+						</p>
+						<p className="text-xs text-muted-foreground mt-0.5">
+							{decided === "reject"
+								? "Event update was cancelled"
+								: decided === "edit"
+									? "Event update is in progress with your changes"
+									: decided === "approve"
+										? "Event update is in progress"
+										: "Requires your approval to proceed"}
+						</p>
+					</div>
+				</div>
+				{!decided && canEdit && (
+					<Button
+						size="sm"
+						variant="ghost"
+						className="rounded-lg text-muted-foreground -mt-1 -mr-2"
+						onClick={() => {
+							setIsPanelOpen(true);
+							const proposedSummary = actionArgs.new_summary
+								? String(actionArgs.new_summary)
+								: (event?.summary ?? "");
+							const proposedDescription = actionArgs.new_description
+								? String(actionArgs.new_description)
+								: (event?.description ?? "");
+							const proposedStart = actionArgs.new_start_datetime
+								? String(actionArgs.new_start_datetime)
+								: (event?.start ?? "");
+							const proposedEnd = actionArgs.new_end_datetime
+								? String(actionArgs.new_end_datetime)
+								: (event?.end ?? "");
+							const proposedLocation = actionArgs.new_location !== undefined
+								? String(actionArgs.new_location ?? "")
+								: (event?.location ?? "");
+							const proposedAttendeesStr = proposedAttendees
+								? proposedAttendees.join(", ")
+								: currentAttendees.join(", ");
+
+							const extraFields: ExtraField[] = [
+								{ key: "start_datetime", label: "Start", type: "datetime-local", value: proposedStart },
+								{ key: "end_datetime", label: "End", type: "datetime-local", value: proposedEnd },
+								{ key: "location", label: "Location", type: "text", value: proposedLocation },
+								{ key: "attendees", label: "Attendees (comma-separated emails)", type: "text", value: proposedAttendeesStr },
+							];
+							openHitlEditPanel({
+								title: proposedSummary,
+								content: proposedDescription,
+								toolName: "Calendar Event",
+								extraFields,
+								onSave: (newTitle, newContent, extraFieldValues) => {
+									setIsPanelOpen(false);
+									setDecided("edit");
+
+									const editedArgs: Record<string, unknown> = {
+										event_id: event?.event_id,
+										document_id: event?.document_id,
+										connector_id: account?.id,
+										new_summary: newTitle || null,
+										new_description: newContent || null,
+									};
+
+									if (extraFieldValues) {
+										editedArgs.new_start_datetime = extraFieldValues.start_datetime || null;
+										editedArgs.new_end_datetime = extraFieldValues.end_datetime || null;
+										editedArgs.new_location = extraFieldValues.location || null;
+										if (extraFieldValues.attendees !== undefined) {
+											editedArgs.new_attendees = extraFieldValues.attendees
+												.split(",")
+												.map((e) => e.trim())
+												.filter(Boolean);
+										}
+									}
+
+									onDecision({
+										type: "edit",
+										edited_action: {
+											name: interruptData.action_requests[0].name,
+											args: editedArgs,
+										},
+									});
+								},
+							});
+						}}
+					>
+						<Pen className="size-3.5" />
+						Edit
+					</Button>
+				)}
+			</div>
+
+			{/* Context section */}
+			{!decided && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 space-y-4 select-none">
+						{context?.error ? (
+							<p className="text-sm text-destructive">{context.error}</p>
+						) : (
+							<>
+								{account && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">Google Calendar Account</p>
+										<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
+											{account.name}
+										</div>
+									</div>
+								)}
+
+								{event && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">Current Event</p>
+										<div className="w-full rounded-md border border-input bg-muted/50 px-3 py-2 text-sm space-y-1.5">
+											<div className="font-medium">{event.summary}</div>
+											{(event.start || event.end) && (
+												<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+													<ClockIcon className="size-3 shrink-0" />
+													<span>
+														{event.start ? formatDateTime(event.start) : ""}
+														{event.start && event.end ? " — " : ""}
+														{event.end ? formatDateTime(event.end) : ""}
+													</span>
+												</div>
+											)}
+											{event.location && (
+												<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+													<MapPinIcon className="size-3 shrink-0" />
+													<span>{event.location}</span>
+												</div>
+											)}
+											{currentAttendees.length > 0 && (
+												<div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+													<UsersIcon className="size-3 shrink-0" />
+													<span>{currentAttendees.join(", ")}</span>
+												</div>
+											)}
+										</div>
+									</div>
+								)}
+
+								{(changes.length > 0 || hasDescriptionChange) && (
+									<div className="space-y-2">
+										<p className="text-xs font-medium text-muted-foreground">Proposed Changes</p>
+										<div className="space-y-2">
+											{changes.map((change) => (
+												<div key={change.label} className="text-xs space-y-0.5">
+													<span className="text-muted-foreground">{change.label}</span>
+													<div className="flex items-center gap-1.5 flex-wrap">
+														<span className="text-muted-foreground line-through">{change.oldVal || "(empty)"}</span>
+														<ArrowRightIcon className="size-3 text-muted-foreground shrink-0" />
+														<span className="font-medium text-foreground">{change.newVal || "(empty)"}</span>
+													</div>
+												</div>
+											))}
+											{hasDescriptionChange && (
+												<div className="text-xs space-y-0.5">
+													<span className="text-muted-foreground">Description</span>
+													<div
+														className="mt-1 max-h-[5rem] overflow-hidden"
+														style={{
+															maskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+															WebkitMaskImage: "linear-gradient(to bottom, black 50%, transparent 100%)",
+														}}
+													>
+														<PlateEditor
+															markdown={String(actionArgs.new_description ?? "")}
+															readOnly
+															preset="readonly"
+															editorVariant="none"
+															className="h-auto [&_[data-slate-editor]]:!min-h-0 [&_[data-slate-editor]>*:first-child]:!mt-0"
+														/>
+													</div>
+												</div>
+											)}
+										</div>
+									</div>
+								)}
+
+								{changes.length === 0 && !hasDescriptionChange && (
+									<p className="text-sm text-muted-foreground italic">No changes proposed</p>
+								)}
+							</>
+						)}
+					</div>
+				</>
+			)}
+
+			{/* Action buttons */}
+			{!decided && (
+				<>
+					<div className="mx-5 h-px bg-border/50" />
+					<div className="px-5 py-4 flex items-center gap-2 select-none">
+						{allowedDecisions.includes("approve") && (
+							<Button
+								size="sm"
+								className="rounded-lg gap-1.5"
+								onClick={handleApprove}
+							>
+								Approve
+								<CornerDownLeftIcon className="size-3 opacity-60" />
+							</Button>
+						)}
+						{allowedDecisions.includes("reject") && (
+							<Button
+								size="sm"
+								variant="ghost"
+								className="rounded-lg text-muted-foreground"
+								onClick={() => {
+									setDecided("reject");
+									onDecision({ type: "reject", message: "User rejected the action." });
+								}}
+							>
+								Reject
+							</Button>
+						)}
+					</div>
+				</>
+			)}
+		</div>
+	);
+}
+
+function ErrorCard({ result }: { result: ErrorResult }) {
+	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">Failed to update calendar event</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 AuthErrorCard({ result }: { result: AuthErrorResult }) {
+	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">
+					Google Calendar authentication expired
+				</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">
+			<div className="px-5 pt-5 pb-4">
+				<div className="flex items-center gap-2">
+					<TriangleAlertIcon className="size-4 text-amber-500 shrink-0" />
+					<p className="text-sm font-semibold text-amber-600 dark:text-amber-400">
+						Event not found
+					</p>
+				</div>
+			</div>
+			<div className="mx-5 h-px bg-amber-500/30" />
+			<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">
+				<p className="text-sm font-semibold text-foreground">
+					{result.message || "Calendar event updated successfully"}
+				</p>
+			</div>
+			<div className="mx-5 h-px bg-border/50" />
+			<div className="px-5 py-4 space-y-2 text-xs">
+				{result.html_link && (
+					<div>
+						<a
+							href={result.html_link}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-primary hover:underline"
+						>
+							Open in Google Calendar
+						</a>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export const UpdateCalendarEventToolUI = makeAssistantToolUI<
+	{
+		event_ref: string;
+		new_summary?: string;
+		new_description?: string;
+		new_start_datetime?: string;
+		new_end_datetime?: string;
+		new_location?: string;
+		new_attendees?: string[];
+	},
+	UpdateCalendarEventResult
+>({
+	toolName: "update_calendar_event",
+	render: function UpdateCalendarEventUI({ result, status }) {
+		if (status.type === "running") {
+			return (
+				<div className="my-4 max-w-lg rounded-2xl border bg-muted/30 px-5 py-4 select-none">
+					<TextShimmerLoader text="Looking up calendar event..." size="sm" />
+				</div>
+			);
+		}
+
+		if (!result) return null;
+
+		if (isInterruptResult(result)) {
+			return (
+				<ApprovalCard
+					interruptData={result}
+					onDecision={(decision) => {
+						window.dispatchEvent(
+							new CustomEvent("hitl-decision", { detail: { decisions: [decision] } })
+						);
+					}}
+				/>
+			);
+		}
+
+		if (
+			typeof result === "object" &&
+			result !== null &&
+			"status" in result &&
+			(result as { status: string }).status === "rejected"
+		) {
+			return null;
+		}
+
+		if (isNotFoundResult(result)) return <NotFoundCard result={result} />;
+		if (isAuthErrorResult(result)) return <AuthErrorCard result={result} />;
+		if (isErrorResult(result)) return <ErrorCard result={result} />;
+
+		return <SuccessCard result={result as SuccessResult} />;
+	},
+});