diff --git a/surfsense_web/atoms/chat/hitl-edit-panel.atom.ts b/surfsense_web/atoms/chat/hitl-edit-panel.atom.ts
index a1c748266..ede6a0134 100644
--- a/surfsense_web/atoms/chat/hitl-edit-panel.atom.ts
+++ b/surfsense_web/atoms/chat/hitl-edit-panel.atom.ts
@@ -5,7 +5,7 @@ export interface ExtraField {
 	label: string;
 	key: string;
 	value: string;
-	type: "text" | "email" | "datetime-local" | "textarea";
+	type: "text" | "email" | "emails" | "datetime-local" | "textarea";
 }
 
 interface HitlEditPanelState {
diff --git a/surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx b/surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx
index 8851d7821..1d7416837 100644
--- a/surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx
+++ b/surfsense_web/components/hitl-edit-panel/hitl-edit-panel.tsx
@@ -1,8 +1,9 @@
 "use client";
 
+import { TagInput, type Tag as TagType } from "emblor";
 import { useAtomValue, useSetAtom } from "jotai";
 import { XIcon } from "lucide-react";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
 	closeHitlEditPanelAtom,
 	hitlEditPanelAtom,
@@ -16,6 +17,86 @@ import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { useMediaQuery } from "@/hooks/use-media-query";
 
+function parseEmailsToTags(value: string): TagType[] {
+	if (!value.trim()) return [];
+	return value
+		.split(",")
+		.map((s) => s.trim())
+		.filter(Boolean)
+		.map((email, i) => ({ id: `${Date.now()}-${i}`, text: email }));
+}
+
+function tagsToEmailString(tags: TagType[]): string {
+	return tags.map((t) => t.text).join(", ");
+}
+
+function EmailsTagField({
+	id,
+	value,
+	onChange,
+	placeholder,
+}: {
+	id: string;
+	value: string;
+	onChange: (value: string) => void;
+	placeholder?: string;
+}) {
+	const [tags, setTags] = useState<TagType[]>(() => parseEmailsToTags(value));
+	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
+	const isInitialMount = useRef(true);
+
+	useEffect(() => {
+		if (isInitialMount.current) {
+			isInitialMount.current = false;
+			return;
+		}
+		onChange(tagsToEmailString(tags));
+	}, [tags, onChange]);
+
+	const handleSetTags = useCallback(
+		(newTags: TagType[] | ((prev: TagType[]) => TagType[])) => {
+			setTags((prev) =>
+				typeof newTags === "function" ? newTags(prev) : newTags
+			);
+		},
+		[]
+	);
+
+	const handleAddTag = useCallback(
+		(text: string) => {
+			const trimmed = text.trim();
+			if (!trimmed) return;
+			if (tags.some((tag) => tag.text === trimmed)) return;
+			const newTag: TagType = { id: Date.now().toString(), text: trimmed };
+			setTags((prev) => [...prev, newTag]);
+		},
+		[tags]
+	);
+
+	return (
+		<TagInput
+			id={id}
+			tags={tags}
+			setTags={handleSetTags}
+			placeholder={placeholder ?? "Add email"}
+			onAddTag={handleAddTag}
+			styleClasses={{
+				inlineTagsContainer:
+					"border border-input rounded-md bg-transparent shadow-xs transition-[color,box-shadow] outline-none focus-within:border-ring p-1 gap-1",
+				input:
+					"w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7 text-foreground placeholder:text-muted-foreground bg-transparent text-sm md:text-sm",
+				tag: {
+					body: "h-7 relative bg-accent dark:bg-muted/60 border-0 hover:bg-accent/80 dark:hover:bg-muted rounded-md font-medium text-xs text-foreground/80 ps-2 pe-7 flex",
+					closeButton:
+						"absolute -inset-y-px -end-px p-0 rounded-e-md flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-foreground hover:text-foreground",
+				},
+			}}
+			activeTagIndex={activeTagIndex}
+			setActiveTagIndex={setActiveTagIndex}
+		/>
+	);
+}
+
 export function HitlEditPanelContent({
 	title: initialTitle,
 	content: initialContent,
@@ -85,7 +166,14 @@ export function HitlEditPanelContent({
 							<Label htmlFor={`extra-field-${field.key}`} className="text-xs font-medium text-muted-foreground">
 								{field.label}
 							</Label>
-							{field.type === "textarea" ? (
+							{field.type === "emails" ? (
+								<EmailsTagField
+									id={`extra-field-${field.key}`}
+									value={extraFieldValues[field.key] ?? ""}
+									onChange={(v) => handleExtraFieldChange(field.key, v)}
+									placeholder={`Add ${field.label.toLowerCase()}`}
+								/>
+							) : field.type === "textarea" ? (
 								<Textarea
 									id={`extra-field-${field.key}`}
 									value={extraFieldValues[field.key] ?? ""}
diff --git a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
index 2489d2a64..50172f8d6 100644
--- a/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
+++ b/surfsense_web/components/layout/ui/right-panel/RightPanel.tsx
@@ -160,13 +160,14 @@ export function RightPanel({ documentsPanel }: RightPanelProps) {
 				)}
 				{effectiveTab === "hitl-edit" && hitlEditOpen && hitlEditState.onSave && (
 					<div className="h-full flex flex-col">
-						<HitlEditPanelContent
-							title={hitlEditState.title}
-							content={hitlEditState.content}
-							toolName={hitlEditState.toolName}
-							onSave={hitlEditState.onSave}
-							onClose={closeHitlEdit}
-						/>
+					<HitlEditPanelContent
+						title={hitlEditState.title}
+						content={hitlEditState.content}
+						toolName={hitlEditState.toolName}
+						extraFields={hitlEditState.extraFields}
+						onSave={hitlEditState.onSave}
+						onClose={closeHitlEdit}
+					/>
 					</div>
 				)}
 			</div>
diff --git a/surfsense_web/components/tool-ui/gmail/create-draft.tsx b/surfsense_web/components/tool-ui/gmail/create-draft.tsx
index 52b65002c..338e2f7bb 100644
--- a/surfsense_web/components/tool-ui/gmail/create-draft.tsx
+++ b/surfsense_web/components/tool-ui/gmail/create-draft.tsx
@@ -225,9 +225,9 @@ function ApprovalCard({
 						onClick={() => {
 							setIsPanelOpen(true);
 							const extraFields: ExtraField[] = [
-								{ key: "to", label: "To", type: "email", value: pendingEdits?.to ?? args.to ?? "" },
-								{ key: "cc", label: "CC", type: "email", value: pendingEdits?.cc ?? args.cc ?? "" },
-								{ key: "bcc", label: "BCC", type: "email", value: pendingEdits?.bcc ?? args.bcc ?? "" },
+								{ key: "to", label: "To", type: "emails", value: pendingEdits?.to ?? args.to ?? "" },
+								{ key: "cc", label: "CC", type: "emails", value: pendingEdits?.cc ?? args.cc ?? "" },
+								{ key: "bcc", label: "BCC", type: "emails", value: pendingEdits?.bcc ?? args.bcc ?? "" },
 							];
 							openHitlEditPanel({
 								title: pendingEdits?.subject ?? (args.subject ?? ""),
diff --git a/surfsense_web/components/tool-ui/gmail/send-email.tsx b/surfsense_web/components/tool-ui/gmail/send-email.tsx
index 6bfa3034d..51f23dd9a 100644
--- a/surfsense_web/components/tool-ui/gmail/send-email.tsx
+++ b/surfsense_web/components/tool-ui/gmail/send-email.tsx
@@ -227,9 +227,9 @@ function ApprovalCard({
 						onClick={() => {
 							setIsPanelOpen(true);
 							const extraFields: ExtraField[] = [
-								{ key: "to", label: "To", type: "email", value: pendingEdits?.to ?? args.to ?? "" },
-								{ key: "cc", label: "CC", type: "email", value: pendingEdits?.cc ?? args.cc ?? "" },
-								{ key: "bcc", label: "BCC", type: "email", value: pendingEdits?.bcc ?? args.bcc ?? "" },
+								{ key: "to", label: "To", type: "emails", value: pendingEdits?.to ?? args.to ?? "" },
+								{ key: "cc", label: "CC", type: "emails", value: pendingEdits?.cc ?? args.cc ?? "" },
+								{ key: "bcc", label: "BCC", type: "emails", value: pendingEdits?.bcc ?? args.bcc ?? "" },
 							];
 							openHitlEditPanel({
 								title: pendingEdits?.subject ?? (args.subject ?? ""),