feat: add onClose functionality to ApprovalCard across all HITL tools

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

@@ -15,6 +15,7 @@ interface HitlEditPanelState {
 	toolName: string;
 	extraFields?: ExtraField[];
 	onSave: ((title: string, content: string, extraFieldValues?: Record<string, string>) => void) | null;
+	onClose: (() => void) | null;
 }
 
 const initialState: HitlEditPanelState = {
@@ -24,6 +25,7 @@ const initialState: HitlEditPanelState = {
 	toolName: "",
 	extraFields: undefined,
 	onSave: null,
+	onClose: null,
 };
 
 export const hitlEditPanelAtom = atom<HitlEditPanelState>(initialState);
@@ -41,6 +43,7 @@ export const openHitlEditPanelAtom = atom(
 			toolName: string;
 			extraFields?: ExtraField[];
 			onSave: (title: string, content: string, extraFieldValues?: Record<string, string>) => void;
+			onClose?: () => void;
 		}
 	) => {
 		if (!get(hitlEditPanelAtom).isOpen) {
@@ -53,6 +56,7 @@ export const openHitlEditPanelAtom = atom(
 			toolName: payload.toolName,
 			extraFields: payload.extraFields,
 			onSave: payload.onSave,
+			onClose: payload.onClose ?? null,
 		});
 		set(rightPanelTabAtom, "hitl-edit");
 		set(rightPanelCollapsedAtom, false);
@@ -60,6 +64,8 @@ export const openHitlEditPanelAtom = atom(
 );
 
 export const closeHitlEditPanelAtom = atom(null, (get, set) => {
+	const current = get(hitlEditPanelAtom);
+	current.onClose?.();
 	set(hitlEditPanelAtom, initialState);
 	set(rightPanelTabAtom, "sources");
 	const prev = get(preHitlCollapsedAtom);

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

@@ -245,6 +245,7 @@ function ApprovalCard({
 										bcc: extras.bcc ?? pendingEdits?.bcc ?? args.bcc ?? "",
 									});
 								},
+								onClose: () => setIsPanelOpen(false),
 							});
 						}}
 					>
@@ -352,7 +353,7 @@ function ApprovalCard({
 								size="sm"
 								className="rounded-lg gap-1.5"
 								onClick={handleApprove}
-								disabled={!canApprove}
+								disabled={!canApprove || isPanelOpen}
 							>
 								Approve
 								<CornerDownLeftIcon className="size-3 opacity-60" />
@@ -363,6 +364,7 @@ function ApprovalCard({
 								size="sm"
 								variant="ghost"
 								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
 								onClick={() => {
 									setDecided("reject");
 									onDecision({ type: "reject", message: "User rejected the action." });

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

@@ -247,6 +247,7 @@ function ApprovalCard({
 										bcc: extras.bcc ?? pendingEdits?.bcc ?? args.bcc ?? "",
 									});
 								},
+								onClose: () => setIsPanelOpen(false),
 							});
 						}}
 					>
@@ -352,7 +353,7 @@ function ApprovalCard({
 								size="sm"
 								className="rounded-lg gap-1.5"
 								onClick={handleApprove}
-								disabled={!canApprove}
+								disabled={!canApprove || isPanelOpen}
 							>
 								Send
 								<CornerDownLeftIcon className="size-3 opacity-60" />
@@ -363,6 +364,7 @@ function ApprovalCard({
 								size="sm"
 								variant="ghost"
 								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
 								onClick={() => {
 									setDecided("reject");
 									onDecision({ type: "reject", message: "User rejected the action." });

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

@@ -328,6 +328,7 @@ function ApprovalCard({
 										bcc: extras.bcc ?? currentBcc,
 									});
 								},
+								onClose: () => setIsPanelOpen(false),
 							});
 						}}
 					>
@@ -440,6 +441,7 @@ function ApprovalCard({
 								size="sm"
 								className="rounded-lg gap-1.5"
 								onClick={handleApprove}
+								disabled={isPanelOpen}
 							>
 								Approve
 								<CornerDownLeftIcon className="size-3 opacity-60" />
@@ -450,6 +452,7 @@ function ApprovalCard({
 								size="sm"
 								variant="ghost"
 								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
 								onClick={() => {
 									setDecided("reject");
 									onDecision({

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

@@ -304,6 +304,7 @@ function ApprovalCard({
 										attendees: extras.attendees ?? pendingEdits?.attendees ?? attendeesList.join(", "),
 									});
 								},
+								onClose: () => setIsPanelOpen(false),
 							});
 						}}
 					>
@@ -446,7 +447,7 @@ function ApprovalCard({
 								size="sm"
 								className="rounded-lg gap-1.5"
 								onClick={handleApprove}
-								disabled={!canApprove}
+								disabled={!canApprove || isPanelOpen}
 							>
 								Approve
 								<CornerDownLeftIcon className="size-3 opacity-60" />
@@ -457,6 +458,7 @@ function ApprovalCard({
 								size="sm"
 								variant="ghost"
 								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
 								onClick={() => {
 									setDecided("reject");
 									onDecision({ type: "reject", message: "User rejected the action." });

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

@@ -347,6 +347,7 @@ function ApprovalCard({
 										attendees: extras.attendees ?? proposedAttendeesStr,
 									});
 								},
+								onClose: () => setIsPanelOpen(false),
 							});
 						}}
 					>
@@ -462,6 +463,7 @@ function ApprovalCard({
 								size="sm"
 								className="rounded-lg gap-1.5"
 								onClick={handleApprove}
+								disabled={isPanelOpen}
 							>
 								Approve
 								<CornerDownLeftIcon className="size-3 opacity-60" />
@@ -472,6 +474,7 @@ function ApprovalCard({
 								size="sm"
 								variant="ghost"
 								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
 								onClick={() => {
 									setDecided("reject");
 									onDecision({ type: "reject", message: "User rejected the action." });

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

@@ -249,6 +249,7 @@ function ApprovalCard({
 									setIsPanelOpen(false);
 									setPendingEdits({ name: newName, content: newContent });
 								},
+								onClose: () => setIsPanelOpen(false),
 							});
 						}}
 					>
@@ -376,7 +377,7 @@ function ApprovalCard({
 								size="sm"
 								className="rounded-lg gap-1.5"
 								onClick={handleApprove}
-								disabled={!canApprove}
+								disabled={!canApprove || isPanelOpen}
 							>
 								Approve
 								<CornerDownLeftIcon className="size-3 opacity-60" />
@@ -387,6 +388,7 @@ function ApprovalCard({
 								size="sm"
 								variant="ghost"
 								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
 								onClick={() => {
 									setDecided("reject");
 									onDecision({ type: "reject", message: "User rejected the action." });

surfsense_web/components/tool-ui/linear/create-linear-issue.tsx

@@ -259,6 +259,7 @@ function ApprovalCard({
 									setIsPanelOpen(false);
 									setPendingEdits({ title: newTitle, description: newDescription });
 								},
+								onClose: () => setIsPanelOpen(false),
 							});
 						}}
 					>
@@ -488,7 +489,7 @@ function ApprovalCard({
 								size="sm"
 								className="rounded-lg gap-1.5"
 								onClick={handleApprove}
-								disabled={!canApprove}
+								disabled={!canApprove || isPanelOpen}
 							>
 								Approve
 								<CornerDownLeftIcon className="size-3 opacity-60" />
@@ -499,6 +500,7 @@ function ApprovalCard({
 								size="sm"
 								variant="ghost"
 								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
 								onClick={() => {
 									setDecided("reject");
 									onDecision({ type: "reject", message: "User rejected the action." });

surfsense_web/components/tool-ui/linear/update-linear-issue.tsx

@@ -325,6 +325,7 @@ function ApprovalCard({
 									}));
 									setHasPanelEdits(true);
 								},
+								onClose: () => setIsPanelOpen(false),
 							});
 						}}
 					>
@@ -599,6 +600,7 @@ function ApprovalCard({
 								size="sm"
 								className="rounded-lg gap-1.5"
 								onClick={handleApprove}
+								disabled={isPanelOpen}
 							>
 								Approve
 								<CornerDownLeftIcon className="size-3 opacity-60" />
@@ -609,6 +611,7 @@ function ApprovalCard({
 								size="sm"
 								variant="ghost"
 								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
 								onClick={() => {
 									setDecided("reject");
 									onDecision({ type: "reject", message: "User rejected the action." });

surfsense_web/components/tool-ui/notion/create-notion-page.tsx

@@ -228,6 +228,7 @@ function ApprovalCard({
 									setIsPanelOpen(false);
 									setPendingEdits({ title: newTitle, content: newContent });
 								},
+								onClose: () => setIsPanelOpen(false),
 							});
 						}}
 					>
@@ -346,7 +347,7 @@ function ApprovalCard({
 								size="sm"
 								className="rounded-lg gap-1.5"
 								onClick={handleApprove}
-								disabled={!selectedAccountId || !isTitleValid}
+								disabled={!selectedAccountId || !isTitleValid || isPanelOpen}
 							>
 								Approve
 								<CornerDownLeftIcon className="size-3 opacity-60" />
@@ -357,6 +358,7 @@ function ApprovalCard({
 								size="sm"
 								variant="ghost"
 								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
 								onClick={() => {
 									setDecided("reject");
 									onDecision({ type: "reject", message: "User rejected the action." });

surfsense_web/components/tool-ui/notion/update-notion-page.tsx

@@ -203,6 +203,7 @@ function ApprovalCard({
 									setIsPanelOpen(false);
 									setPendingEdits({ content: newContent });
 								},
+								onClose: () => setIsPanelOpen(false),
 							});
 						}}
 					>
@@ -278,6 +279,7 @@ function ApprovalCard({
 								size="sm"
 								className="rounded-lg gap-1.5"
 								onClick={handleApprove}
+								disabled={isPanelOpen}
 							>
 								Approve
 								<CornerDownLeftIcon className="size-3 opacity-60" />
@@ -288,6 +290,7 @@ function ApprovalCard({
 								size="sm"
 								variant="ghost"
 								className="rounded-lg text-muted-foreground"
+								disabled={isPanelOpen}
 								onClick={() => {
 									setDecided("reject");
 									onDecision({ type: "reject", message: "User rejected the action." });