feat: integrate HITL phase management across tool components

- Refactored ApprovalCard in various tools (Gmail, Google Calendar, Google Drive) to utilize the new useHitlPhase hook for improved state management.
- Updated logic to handle tool action phases (pending, processing, complete, rejected) consistently across components, enhancing user feedback during interactions.
- Simplified decision handling by removing direct state management for approval decisions, streamlining the approval process.
- Enhanced UI feedback to reflect the current phase of tool actions, improving user experience during tool interactions.

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

@@ -15,6 +15,7 @@ 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";
+import { useHitlPhase } from "@/hooks/use-hitl-phase";
 
 interface GmailAccount {
 	id: number;
@@ -36,6 +37,7 @@ interface GmailMessage {
 interface InterruptResult {
 	__interrupt__: true;
 	__decided__?: "approve" | "reject" | "edit";
+	__completed__?: boolean;
 	action_requests: Array<{
 		name: string;
 		args: Record<string, unknown>;
@@ -157,12 +159,7 @@ function ApprovalCard({
 		edited_action?: { name: string; args: Record<string, unknown> };
 	}) => void;
 }) {
-	const [decided, setDecided] = useState<
-		"approve" | "reject" | "edit" | null
-	>(interruptData.__decided__ ?? null);
-	const [wasAlreadyDecided] = useState(
-		() => interruptData.__decided__ != null,
-	);
+	const { phase, setProcessing, setRejected } = useHitlPhase(interruptData);
 	const [isPanelOpen, setIsPanelOpen] = useState(false);
 	const openHitlEditPanel = useSetAtom(openHitlEditPanelAtom);
 	const [pendingEdits, setPendingEdits] = useState<{
@@ -173,12 +170,13 @@ function ApprovalCard({
 		bcc: string;
 	} | null>(null);
 
-	const account = interruptData.context?.account;
-	const email = interruptData.context?.email;
-	const draftId = interruptData.context?.draft_id;
-	const existingBody = interruptData.context?.existing_body;
+	const context = interruptData.context;
+	const account = context?.account;
+	const email = context?.email;
+	const draftId = context?.draft_id;
+	const existingBody = context?.existing_body;
 
-	const reviewConfig = interruptData.review_configs[0];
+	const reviewConfig = interruptData.review_configs?.[0];
 	const allowedDecisions = reviewConfig?.allowed_decisions ?? [
 		"approve",
 		"reject",
@@ -197,10 +195,11 @@ function ApprovalCard({
 	const editableBody = currentBody || existingBody || "";
 
 	const handleApprove = useCallback(() => {
-		if (decided || isPanelOpen) return;
+		if (phase !== "pending") return;
+		if (isPanelOpen) return;
 		if (!allowedDecisions.includes("approve")) return;
 		const isEdited = pendingEdits !== null;
-		setDecided(isEdited ? "edit" : "approve");
+		setProcessing();
 		onDecision({
 			type: isEdited ? "edit" : "approve",
 			edited_action: {
@@ -218,9 +217,10 @@ function ApprovalCard({
 			},
 		});
 	}, [
-		decided,
+		phase,
 		isPanelOpen,
 		allowedDecisions,
+		setProcessing,
 		onDecision,
 		interruptData,
 		email,
@@ -251,39 +251,39 @@ function ApprovalCard({
 				<div className="flex items-center gap-2">
 					<div>
 						<p className="text-sm font-semibold text-foreground">
-							{decided === "reject"
+							{phase === "rejected"
 								? "Draft Update Rejected"
-								: decided === "approve" || decided === "edit"
+								: phase === "processing" || phase === "complete"
 									? "Draft Update Approved"
 									: "Update Gmail Draft"}
 						</p>
-						{decided === "approve" || decided === "edit" ? (
-							wasAlreadyDecided ? (
-								<p className="text-xs text-muted-foreground mt-0.5">
-									{decided === "edit"
-										? "Draft updated with your changes"
-										: "Draft updated"}
-								</p>
-							) : (
-								<TextShimmerLoader
-									text={
-										decided === "edit"
-											? "Updating draft with your changes"
-											: "Updating draft"
-									}
-									size="sm"
-								/>
-							)
+						{phase === "processing" ? (
+							<TextShimmerLoader
+								text={
+									pendingEdits
+										? "Updating draft with your changes"
+										: "Updating draft"
+								}
+								size="sm"
+							/>
+						) : phase === "complete" ? (
+							<p className="text-xs text-muted-foreground mt-0.5">
+								{pendingEdits
+									? "Draft updated with your changes"
+									: "Draft updated"}
+							</p>
+						) : phase === "rejected" ? (
+							<p className="text-xs text-muted-foreground mt-0.5">
+								Draft update was cancelled
+							</p>
 						) : (
 							<p className="text-xs text-muted-foreground mt-0.5">
-								{decided === "reject"
-									? "Draft update was cancelled"
-									: "Requires your approval to proceed"}
+								Requires your approval to proceed
 							</p>
 						)}
 					</div>
 				</div>
-				{!decided && canEdit && (
+				{phase === "pending" && canEdit && (
 					<Button
 						size="sm"
 						variant="ghost"
@@ -340,14 +340,14 @@ function ApprovalCard({
 				)}
 			</div>
 
-			{/* Context — account and current draft info */}
-			{!decided && interruptData.context && (
+			{/* Context — account and draft info in pending/processing/complete */}
+			{phase !== "rejected" && context && (
 				<>
 					<div className="mx-5 h-px bg-border/50" />
 					<div className="px-5 py-4 space-y-4 select-none">
-						{interruptData.context.error ? (
+						{context.error ? (
 							<p className="text-sm text-destructive">
-								{interruptData.context.error}
+								{context.error}
 							</p>
 						) : (
 							<>
@@ -383,7 +383,7 @@ function ApprovalCard({
 				</>
 			)}
 
-			{/* Email headers + body preview */}
+			{/* Email headers + body preview — visible in ALL phases */}
 			<div className="mx-5 h-px bg-border/50" />
 			<div className="px-5 pt-3 pb-2 space-y-1.5 select-none">
 				{currentTo && (
@@ -433,8 +433,8 @@ function ApprovalCard({
 				) : null}
 			</div>
 
-			{/* Action buttons */}
-			{!decided && (
+			{/* Action buttons — only in pending */}
+			{phase === "pending" && (
 				<>
 					<div className="mx-5 h-px bg-border/50" />
 					<div className="px-5 py-4 flex items-center gap-2 select-none">
@@ -456,7 +456,7 @@ function ApprovalCard({
 								className="rounded-lg text-muted-foreground"
 								disabled={isPanelOpen}
 								onClick={() => {
-									setDecided("reject");
+									setRejected();
 									onDecision({
 										type: "reject",
 										message: "User rejected the action.",