npm - @denarolabs/email-template - Versions diffs - 1.0.5 → 1.0.6 - Mend

@denarolabs/email-template 1.0.5 → 1.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/dist/index.d.ts +425 -8
package/dist/index.js +9841 -7
package/package.json +16 -23
package/dist/components/ai-email-editor/AIEmailEditor.d.ts +0 -3
package/dist/components/ai-email-editor/AIEmailEditor.js +0 -207
package/dist/components/ai-email-editor/chat-message.d.ts +0 -36
package/dist/components/ai-email-editor/chat-message.js +0 -49
package/dist/components/ai-email-editor/images.d.ts +0 -2
package/dist/components/ai-email-editor/images.js +0 -14
package/dist/components/ai-email-editor/model-picker.d.ts +0 -7
package/dist/components/ai-email-editor/model-picker.js +0 -9
package/dist/components/ai-email-editor/preview.d.ts +0 -35
package/dist/components/ai-email-editor/preview.js +0 -728
package/dist/components/ai-email-editor/send-test-email-modal.d.ts +0 -13
package/dist/components/ai-email-editor/send-test-email-modal.js +0 -70
package/dist/components/ai-email-editor/stream.d.ts +0 -20
package/dist/components/ai-email-editor/stream.js +0 -57
package/dist/components/ai-email-editor/use-ai-email-editor.d.ts +0 -117
package/dist/components/ai-email-editor/use-ai-email-editor.js +0 -1308
package/dist/components/ai-email-editor/view-html-modal.d.ts +0 -9
package/dist/components/ai-email-editor/view-html-modal.js +0 -37
package/dist/lib/ai-stream-contract.d.ts +0 -99
package/dist/lib/ai-stream-contract.js +0 -35
package/dist/lib/build-default-system-prompt.d.ts +0 -2
package/dist/lib/build-default-system-prompt.js +0 -37
package/dist/lib/capture-email-preview.d.ts +0 -5
package/dist/lib/capture-email-preview.js +0 -73
package/dist/lib/cn.d.ts +0 -2
package/dist/lib/cn.js +0 -5
package/dist/lib/merge-tag-validation.d.ts +0 -3
package/dist/lib/merge-tag-validation.js +0 -45
package/dist/lib/rasterize-image-client.d.ts +0 -4
package/dist/lib/rasterize-image-client.js +0 -47
package/dist/lib/strip-html-code-fences.d.ts +0 -1
package/dist/lib/strip-html-code-fences.js +0 -6
package/dist/schemas/aiEmail.d.ts +0 -224
package/dist/schemas/aiEmail.js +0 -29
package/dist/schemas/aiEmailResponse.d.ts +0 -15
package/dist/schemas/aiEmailResponse.js +0 -15
package/dist/types.d.ts +0 -57
package/dist/types.js +0 -1
package/dist/ui/button.d.ts +0 -11
package/dist/ui/button.js +0 -34
package/dist/ui/dialog.d.ts +0 -33
package/dist/ui/dialog.js +0 -39
package/dist/ui/dropdown-menu.d.ts +0 -8
package/dist/ui/dropdown-menu.js +0 -23
package/dist/ui/input.d.ts +0 -2
package/dist/ui/input.js +0 -6
package/dist/ui/textarea.d.ts +0 -2
package/dist/ui/textarea.js +0 -7
package/src/styles.css +0 -197

package/dist/components/ai-email-editor/use-ai-email-editor.js DELETED Viewed

@@ -1,1308 +0,0 @@
-"use client";
-import { buildDefaultSystemPrompt } from "../../lib/build-default-system-prompt";
-import { captureEmailPreviewScreenshot } from "../../lib/capture-email-preview";
-import { getMergeTagError } from "../../lib/merge-tag-validation";
-import { prepareImageFileForUpload } from "../../lib/rasterize-image-client";
-import { stripHtmlCodeFences } from "../../lib/strip-html-code-fences";
-import { annotateHtmlForEditing, attachImageResize, finishInlineEdits, focusEditableElementAtPoint, getBlockHtmlById, insertImageBlock, insertImageBlockAtPoint, prepareImagesForEditing, serializeHtmlDocument, stripEditorChrome, syncFlaggedElements, sanitizeEmailHtml, } from "./preview";
-import { collectAllReferencedImageUrls } from "./images";
-import { detectPhase, defaultSuggestions, extractStreamParts, parseStructuredStream, phaseLabel, resolveInitialSuggestions, } from "./stream";
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
-const CHAT_SCROLL_BOTTOM_THRESHOLD = 80;
-const MAX_CONTEXT_IMAGES = 12;
-const EMPTY_PREVIEW_HTML = '<!DOCTYPE html><html><head><meta charset="utf-8"></head><body style="margin:0;padding:0;background:#ffffff;"></body></html>';
-function isChatNearBottom(el) {
-    return el.scrollHeight - el.scrollTop - el.clientHeight <= CHAT_SCROLL_BOTTOM_THRESHOLD;
-}
-const CHAT_PIN_TOP_PADDING = 16;
-function computeChatPinSpacerHeight(container) {
-    if (!container)
-        return 0;
-    return Math.max(0, container.clientHeight - CHAT_PIN_TOP_PADDING);
-}
-function scrollChatMessageToTop(container, messageId) {
-    const messageEl = container.querySelector(`[data-message-id="${messageId}"]`);
-    if (!messageEl)
-        return null;
-    const containerRect = container.getBoundingClientRect();
-    const messageRect = messageEl.getBoundingClientRect();
-    const messageTopInScroll = container.scrollTop + (messageRect.top - containerRect.top);
-    const targetScroll = messageTopInScroll - CHAT_PIN_TOP_PADDING;
-    return Math.max(0, Math.min(targetScroll, container.scrollHeight - container.clientHeight));
-}
-function suggestLabelFromFile(file) {
-    const base = (file.name || "Image")
-        .replace(/\.[^.]+$/, "")
-        .replace(/[-_]+/g, " ")
-        .trim();
-    return (base || "Image").slice(0, 120);
-}
-function createId() {
-    return `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
-}
-function snapshot(html, label) {
-    return { id: createId(), html, label, timestamp: Date.now() };
-}
-function toPersisted(messages) {
-    return messages.map(({ pending: _p, error: _e, ...msg }) => msg);
-}
-function cloneLoadedSession(session) {
-    return JSON.parse(JSON.stringify(session));
-}
-export function useAiEmailEditor({ name, savedTemplate, onSave, streamRoute, mergeTags, mode = "email", systemPrompt, onUploadImage, onDeleteImage, onError, onSuccess, open, models, defaultModel, initialSuggestions, }) {
-    const resolvedInitialSuggestions = useMemo(() => resolveInitialSuggestions(initialSuggestions), [initialSuggestions]);
-    const getSuggestions = useCallback((hasHtml) => hasHtml ? defaultSuggestions(true) : [...resolvedInitialSuggestions], [resolvedInitialSuggestions]);
-    const modelOptions = useMemo(() => {
-        if (models?.length)
-            return models;
-        if (defaultModel)
-            return [{ id: defaultModel, label: defaultModel }];
-        return [];
-    }, [models, defaultModel]);
-    const resolvedDefaultModel = useMemo(() => {
-        if (defaultModel && modelOptions.some((m) => m.id === defaultModel))
-            return defaultModel;
-        return modelOptions[0]?.id ?? "";
-    }, [models, defaultModel, modelOptions]);
-    const resolvedSystemPrompt = useMemo(() => systemPrompt ?? buildDefaultSystemPrompt(mergeTags, mode), [systemPrompt, mergeTags, mode]);
-    const [selectedModel, setSelectedModel] = useState(resolvedDefaultModel);
-    useEffect(() => {
-        setSelectedModel((current) => modelOptions.some((m) => m.id === current) ? current : resolvedDefaultModel);
-    }, [modelOptions, resolvedDefaultModel]);
-    const iframeRef = useRef(null);
-    const scrollRef = useRef(null);
-    const shouldAutoScrollRef = useRef(true);
-    const suppressScrollTrackingRef = useRef(false);
-    const pendingScrollPinRef = useRef(null);
-    const [chatPinSpacerHeight, setChatPinSpacerHeight] = useState(0);
-    const programChatScroll = useCallback((top) => {
-        const el = scrollRef.current;
-        if (!el)
-            return;
-        suppressScrollTrackingRef.current = true;
-        el.scrollTop = top;
-        requestAnimationFrame(() => {
-            suppressScrollTrackingRef.current = false;
-        });
-    }, []);
-    const htmlRef = useRef("");
-    const selectModeRef = useRef(false);
-    const selectedBlockIdsRef = useRef([]);
-    const onBlockToggleRef = useRef(() => { });
-    const abortRef = useRef(null);
-    const dropHandlerRef = useRef(() => { });
-    const pasteHandlerRef = useRef(() => { });
-    const inFlightRef = useRef(null);
-    const sessionContextImagesRef = useRef([]);
-    const loadedSessionRef = useRef(null);
-    const initialImageUrlsRef = useRef(new Set());
-    const pushPreviewUndoRef = useRef(() => { });
-    const previewUndoStackRef = useRef([]);
-    const [previewUndoCount, setPreviewUndoCount] = useState(0);
-    const [html, setHtml] = useState("");
-    const [loading, setLoading] = useState(false);
-    const [saving, setSaving] = useState(false);
-    const [dirty, setDirty] = useState(false);
-    const [messages, setMessages] = useState([]);
-    const [snapshots, setSnapshots] = useState([]);
-    const [snapshotIndex, setSnapshotIndex] = useState(0);
-    const [input, setInput] = useState("");
-    const [contextImages, setContextImages] = useState([]);
-    const [sessionContextImages, setSessionContextImages] = useState([]);
-    const [contextImageBusy, setContextImageBusy] = useState(false);
-    const [chatDropActive, setChatDropActive] = useState(false);
-    const [isStreaming, setIsStreaming] = useState(false);
-    const [editingMessageId, setEditingMessageId] = useState(null);
-    const [editDraft, setEditDraft] = useState("");
-    const [editContextImages, setEditContextImages] = useState([]);
-    const [selectMode, setSelectMode] = useState(false);
-    const [selectedBlockIds, setSelectedBlockIds] = useState([]);
-    const [resubmitConfirmOpen, setResubmitConfirmOpen] = useState(false);
-    const [revertConfirmOpen, setRevertConfirmOpen] = useState(false);
-    const [revertConfirmMessageId, setRevertConfirmMessageId] = useState(null);
-    const [backConfirmOpen, setBackConfirmOpen] = useState(false);
-    const [suggestions, setSuggestions] = useState(() => [...resolvedInitialSuggestions]);
-    const [previewDropActive, setPreviewDropActive] = useState(false);
-    const [systemPromptOverride, setSystemPromptOverride] = useState(null);
-    const effectiveSystemPrompt = systemPromptOverride ?? resolvedSystemPrompt;
-    htmlRef.current = html;
-    selectModeRef.current = selectMode;
-    selectedBlockIdsRef.current = selectedBlockIds;
-    sessionContextImagesRef.current = sessionContextImages;
-    const reportError = useCallback((error, source) => {
-        const err = error instanceof Error ? error : new Error(String(error));
-        onError(err, { source });
-    }, [onError]);
-    const reportSuccess = useCallback((source, message) => {
-        onSuccess?.({ source, message });
-    }, [onSuccess]);
-    const syncOrphanedImages = useCallback(async (priorMessages, priorSessionImages, priorPending, nextMessages, nextSessionImages, nextPending) => {
-        const previous = collectAllReferencedImageUrls(priorMessages, priorSessionImages, priorPending);
-        const next = collectAllReferencedImageUrls(nextMessages, nextSessionImages, nextPending);
-        for (const url of previous) {
-            if (next.has(url) || initialImageUrlsRef.current.has(url))
-                continue;
-            try {
-                await onDeleteImage(url);
-            }
-            catch (error) {
-                console.warn("Failed to delete orphaned image", url, error);
-            }
-        }
-    }, [onDeleteImage]);
-    const syncFromIframe = useCallback((updateState = false) => {
-        const doc = iframeRef.current?.contentDocument;
-        if (!doc)
-            return;
-        const next = serializeHtmlDocument(doc);
-        if (next === htmlRef.current)
-            return;
-        htmlRef.current = next;
-        setDirty(true);
-        if (updateState)
-            setHtml(next);
-    }, []);
-    const getCleanHtml = useCallback(() => {
-        syncFromIframe(false);
-        return stripEditorChrome(htmlRef.current);
-    }, [syncFromIframe]);
-    const applyHtml = useCallback((next, markDirty = true) => {
-        setHtml(next);
-        htmlRef.current = next;
-        if (markDirty)
-            setDirty(true);
-    }, []);
-    const clearPreviewUndo = useCallback(() => {
-        previewUndoStackRef.current = [];
-        setPreviewUndoCount(0);
-    }, []);
-    pushPreviewUndoRef.current = () => {
-        syncFromIframe(false);
-        const current = htmlRef.current;
-        const stack = previewUndoStackRef.current;
-        if (stack.length > 0 && stack[stack.length - 1] === current)
-            return;
-        stack.push(current);
-        if (stack.length > 50)
-            stack.shift();
-        setPreviewUndoCount(stack.length);
-    };
-    const undoPreviewEdit = useCallback(() => {
-        const stack = previewUndoStackRef.current;
-        const previous = stack.pop();
-        if (!previous)
-            return false;
-        setPreviewUndoCount(stack.length);
-        applyHtml(previous, true);
-        return true;
-    }, [applyHtml]);
-    const toggleBlockSelection = useCallback((blockId) => {
-        setSelectedBlockIds((prev) => prev.includes(blockId) ? prev.filter((id) => id !== blockId) : [...prev, blockId]);
-    }, []);
-    onBlockToggleRef.current = toggleBlockSelection;
-    const exitSelectMode = useCallback(() => {
-        setSelectMode(false);
-        setSelectedBlockIds([]);
-    }, []);
-    const toggleSelectMode = useCallback(() => {
-        setSelectMode((prev) => {
-            if (prev)
-                setSelectedBlockIds([]);
-            return !prev;
-        });
-    }, []);
-    const getSelectedBlocks = useCallback(() => {
-        const doc = iframeRef.current?.contentDocument;
-        if (!doc)
-            return [];
-        return selectedBlockIds
-            .map((id) => {
-            const blockHtml = getBlockHtmlById(doc, id);
-            return blockHtml ? { id, html: blockHtml } : null;
-        })
-            .filter((block) => !!block);
-    }, [selectedBlockIds]);
-    const insertImageIntoTemplate = useCallback((url, label, clientX, clientY) => {
-        const doc = iframeRef.current?.contentDocument;
-        if (!doc || !htmlRef.current) {
-            applyHtml(`<!DOCTYPE html><html><head><meta charset="utf-8"></head><body style="margin:0;padding:24px;font-family:Arial,sans-serif;"><div style="text-align:center;margin:16px 0;"><img src="${url}" alt="${label}" style="max-width:100%;height:auto;display:inline-block;border:0;"></div></body></html>`);
-            return;
-        }
-        if (clientX !== undefined && clientY !== undefined) {
-            insertImageBlockAtPoint(doc, url, label, clientX, clientY);
-        }
-        else {
-            const targetId = selectedBlockIds[0];
-            const targetBlock = targetId
-                ? doc.querySelector(`[data-edit-id="${targetId}"]`)
-                : null;
-            if (targetBlock?.parentElement) {
-                const rect = targetBlock.getBoundingClientRect();
-                insertImageBlockAtPoint(doc, url, label, rect.left + rect.width / 2, rect.bottom - 1);
-            }
-            else {
-                insertImageBlock(doc, url, label);
-            }
-        }
-        syncFromIframe(true);
-    }, [applyHtml, syncFromIframe, selectedBlockIds]);
-    const uploadAndInsertImage = useCallback(async (file, placement) => {
-        if (!file.type.startsWith("image/")) {
-            reportError(new Error("Only image files can be uploaded."), "upload");
-            return;
-        }
-        setContextImageBusy(true);
-        try {
-            const prepared = await prepareImageFileForUpload(file);
-            const { url } = await onUploadImage(prepared);
-            const label = suggestLabelFromFile(prepared);
-            if (placement === "end") {
-                insertImageIntoTemplate(url, label);
-            }
-            else {
-                insertImageIntoTemplate(url, label, placement.x, placement.y);
-            }
-            reportSuccess("upload", "Image inserted");
-        }
-        catch (error) {
-            reportError(error, "upload");
-        }
-        finally {
-            setContextImageBusy(false);
-        }
-    }, [onUploadImage, insertImageIntoTemplate, reportError, reportSuccess]);
-    const mountIframe = useCallback((sourceHtml) => {
-        const doc = iframeRef.current?.contentDocument;
-        if (!doc)
-            return;
-        doc.open();
-        doc.write(annotateHtmlForEditing(sourceHtml.trim() ? sourceHtml : EMPTY_PREVIEW_HTML));
-        doc.close();
-        prepareImagesForEditing(doc);
-        const detachImageResize = attachImageResize(doc, {
-            isSelectMode: () => selectModeRef.current,
-            onBeforeEdit: () => pushPreviewUndoRef.current(),
-            onResizeEnd: () => syncFromIframe(),
-        });
-        const handleMouseDown = (event) => {
-            const target = event.target?.closest("[data-edit-id]");
-            if (selectModeRef.current || !target || target.hasAttribute("contenteditable")) {
-                return;
-            }
-            event.preventDefault();
-            event.stopPropagation();
-            finishInlineEdits(doc, target);
-            focusEditableElementAtPoint(target, event.clientX, event.clientY);
-        };
-        const handleClick = (event) => {
-            const target = event.target?.closest("[data-edit-id]");
-            if (selectModeRef.current) {
-                if (!target) {
-                    finishInlineEdits(doc);
-                    return;
-                }
-                if (target.hasAttribute("contenteditable"))
-                    return;
-                event.preventDefault();
-                event.stopPropagation();
-                const id = target.getAttribute("data-edit-id");
-                if (!id)
-                    return;
-                if (selectedBlockIdsRef.current.includes(id)) {
-                    finishInlineEdits(doc, target);
-                    focusEditableElementAtPoint(target, event.clientX, event.clientY);
-                    return;
-                }
-                finishInlineEdits(doc);
-                onBlockToggleRef.current(id);
-                return;
-            }
-            if (!target) {
-                finishInlineEdits(doc);
-                return;
-            }
-            if (target.hasAttribute("contenteditable"))
-                return;
-        };
-        const handleBlur = (event) => {
-            const target = event.target;
-            if (!target?.hasAttribute("contenteditable"))
-                return;
-            target.removeAttribute("contenteditable");
-            syncFromIframe();
-        };
-        const handleInput = (event) => {
-            if (event.target?.hasAttribute("contenteditable")) {
-                syncFromIframe();
-            }
-        };
-        const hasDraggableImage = (dt) => !!dt && dt.types.includes("Files");
-        const handleDragOver = (event) => {
-            if (!hasDraggableImage(event.dataTransfer))
-                return;
-            event.preventDefault();
-            if (event.dataTransfer)
-                event.dataTransfer.dropEffect = "copy";
-            setPreviewDropActive(true);
-        };
-        const handleDragLeave = (event) => {
-            if (event.relatedTarget)
-                return;
-            setPreviewDropActive(false);
-        };
-        const handleDrop = (event) => {
-            if (!hasDraggableImage(event.dataTransfer))
-                return;
-            event.preventDefault();
-            setPreviewDropActive(false);
-            dropHandlerRef.current(event);
-        };
-        const handlePaste = (event) => {
-            pasteHandlerRef.current(event);
-        };
-        doc.body.addEventListener("mousedown", handleMouseDown);
-        doc.body.addEventListener("click", handleClick);
-        doc.body.addEventListener("blur", handleBlur, true);
-        doc.body.addEventListener("input", handleInput, true);
-        doc.addEventListener("dragover", handleDragOver);
-        doc.addEventListener("dragleave", handleDragLeave);
-        doc.addEventListener("drop", handleDrop);
-        doc.addEventListener("paste", handlePaste);
-        return () => {
-            detachImageResize();
-            doc.body.removeEventListener("mousedown", handleMouseDown);
-            doc.body.removeEventListener("click", handleClick);
-            doc.body.removeEventListener("blur", handleBlur, true);
-            doc.body.removeEventListener("input", handleInput, true);
-            doc.removeEventListener("dragover", handleDragOver);
-            doc.removeEventListener("dragleave", handleDragLeave);
-            doc.removeEventListener("drop", handleDrop);
-            doc.removeEventListener("paste", handlePaste);
-        };
-    }, [syncFromIframe]);
-    const rememberLoadedSession = useCallback((session) => {
-        loadedSessionRef.current = cloneLoadedSession(session);
-        initialImageUrlsRef.current = collectAllReferencedImageUrls(session.messages, session.contextImages, []);
-    }, []);
-    const loadFromValue = useCallback(async () => {
-        clearPreviewUndo();
-        setLoading(true);
-        if (!savedTemplate) {
-            applyHtml("", false);
-            setSuggestions(getSuggestions(false));
-            setMessages([]);
-            const blankSnapshots = [snapshot("", "Blank")];
-            setSnapshots(blankSnapshots);
-            setSnapshotIndex(0);
-            setSessionContextImages([]);
-            sessionContextImagesRef.current = [];
-            rememberLoadedSession({
-                html: "",
-                messages: [],
-                snapshots: blankSnapshots,
-                snapshotIndex: 0,
-                contextImages: [],
-            });
-        }
-        else {
-            const aiSession = savedTemplate.aiSession;
-            applyHtml(sanitizeEmailHtml(savedTemplate.html), false);
-            setSuggestions(getSuggestions(!!savedTemplate.html));
-            const loadedMessages = aiSession?.messages.length ? aiSession.messages : [];
-            const loadedSnapshots = aiSession?.messages.length
-                ? aiSession.snapshots
-                : [snapshot(savedTemplate.html, savedTemplate.html ? "Saved template" : "Blank")];
-            const loadedSnapshotIndex = aiSession?.messages.length
-                ? aiSession.snapshotIndex
-                : 0;
-            const loadedContextImages = aiSession?.contextImages ?? [];
-            setMessages(loadedMessages);
-            setSnapshots(loadedSnapshots);
-            setSnapshotIndex(loadedSnapshotIndex);
-            setSessionContextImages(loadedContextImages);
-            sessionContextImagesRef.current = loadedContextImages;
-            rememberLoadedSession({
-                html: savedTemplate.html,
-                messages: loadedMessages,
-                snapshots: loadedSnapshots,
-                snapshotIndex: loadedSnapshotIndex,
-                contextImages: loadedContextImages,
-            });
-        }
-        setDirty(false);
-        setLoading(false);
-    }, [savedTemplate, applyHtml, rememberLoadedSession, clearPreviewUndo, getSuggestions]);
-    useEffect(() => {
-        if (open) {
-            shouldAutoScrollRef.current = true;
-            void loadFromValue();
-        }
-    }, [open, loadFromValue]);
-    const [prevOpen, setPrevOpen] = useState(open);
-    if (open !== prevOpen) {
-        setPrevOpen(open);
-        if (!open) {
-            setDirty(false);
-            setInput("");
-            setContextImages([]);
-            setSessionContextImages([]);
-            setChatDropActive(false);
-            setChatPinSpacerHeight(0);
-            pendingScrollPinRef.current = null;
-            setMessages([]);
-            setSnapshots([]);
-            setSnapshotIndex(0);
-            setEditingMessageId(null);
-            setEditDraft("");
-            setSelectMode(false);
-            setSelectedBlockIds([]);
-            setResubmitConfirmOpen(false);
-            setSystemPromptOverride(null);
-            setSuggestions(getSuggestions(false));
-            setPreviewDropActive(false);
-        }
-    }
-    useLayoutEffect(() => {
-        if (open && html && !loading) {
-            mountIframe(html);
-        }
-    }, [open, html, loading, mountIframe]);
-    useEffect(() => {
-        const doc = iframeRef.current?.contentDocument;
-        if (!doc)
-            return;
-        doc.body.classList.toggle("ai-select-mode", selectMode);
-        syncFlaggedElements(doc, selectedBlockIds);
-    }, [selectMode, selectedBlockIds, html]);
-    useEffect(() => {
-        const el = scrollRef.current;
-        if (!el || !open || loading)
-            return;
-        const onScroll = () => {
-            if (suppressScrollTrackingRef.current)
-                return;
-            shouldAutoScrollRef.current = isChatNearBottom(el);
-        };
-        el.addEventListener("scroll", onScroll, { passive: true });
-        return () => el.removeEventListener("scroll", onScroll);
-    }, [open, loading]);
-    useLayoutEffect(() => {
-        const el = scrollRef.current;
-        if (!el)
-            return;
-        const pinId = pendingScrollPinRef.current;
-        if (pinId) {
-            const targetScroll = scrollChatMessageToTop(el, pinId);
-            if (targetScroll !== null) {
-                pendingScrollPinRef.current = null;
-                shouldAutoScrollRef.current = true;
-                programChatScroll(targetScroll);
-            }
-            return;
-        }
-        if (!shouldAutoScrollRef.current)
-            return;
-        const maxScroll = el.scrollHeight - el.clientHeight;
-        const targetScroll = chatPinSpacerHeight > 0
-            ? Math.min(maxScroll, Math.max(0, el.scrollHeight - chatPinSpacerHeight - el.clientHeight))
-            : maxScroll;
-        if (targetScroll > el.scrollTop) {
-            programChatScroll(targetScroll);
-        }
-    }, [messages, chatPinSpacerHeight, isStreaming, programChatScroll]);
-    dropHandlerRef.current = (event) => {
-        const file = Array.from(event.dataTransfer?.files ?? []).find((f) => f.type.startsWith("image/"));
-        if (file) {
-            void uploadAndInsertImage(file, { x: event.clientX, y: event.clientY });
-        }
-    };
-    pasteHandlerRef.current = (event) => {
-        const items = event.clipboardData?.items;
-        if (!items)
-            return;
-        const item = Array.from(items).find((it) => it.kind === "file" && it.type.startsWith("image/"));
-        const file = item?.getAsFile();
-        if (!file)
-            return;
-        event.preventDefault();
-        void uploadAndInsertImage(file, "end");
-    };
-    const persistSessionContextImages = useCallback((images) => {
-        setSessionContextImages(images);
-        sessionContextImagesRef.current = images;
-    }, []);
-    const registerContextImage = useCallback(async (file) => {
-        if (!file.type.startsWith("image/")) {
-            reportError(new Error("Only image files can be attached as reference."), "image");
-            return null;
-        }
-        if (sessionContextImagesRef.current.length >= MAX_CONTEXT_IMAGES) {
-            reportError(new Error(`You can attach up to ${MAX_CONTEXT_IMAGES} reference images.`), "image");
-            return null;
-        }
-        const prepared = await prepareImageFileForUpload(file);
-        const { url } = await onUploadImage(prepared);
-        const label = suggestLabelFromFile(prepared);
-        const image = {
-            id: createId(),
-            url,
-            name: label,
-        };
-        const next = [...sessionContextImagesRef.current, image];
-        persistSessionContextImages(next);
-        return { url, label };
-    }, [onUploadImage, persistSessionContextImages, reportError]);
-    const queueContextImage = useCallback((image) => {
-        setContextImages((prev) => {
-            if (prev.some((img) => img.url === image.url))
-                return prev;
-            return [...prev, image];
-        });
-    }, []);
-    const addContextImageFromFile = useCallback(async (file) => {
-        setContextImageBusy(true);
-        try {
-            const uploaded = await registerContextImage(file);
-            if (!uploaded)
-                return;
-            queueContextImage({ id: createId(), url: uploaded.url, name: uploaded.label });
-            reportSuccess("image", "Reference image attached");
-        }
-        catch (error) {
-            reportError(error, "image");
-        }
-        finally {
-            setContextImageBusy(false);
-        }
-    }, [registerContextImage, queueContextImage, reportError, reportSuccess]);
-    const addEditContextImageFromFile = useCallback(async (file) => {
-        setContextImageBusy(true);
-        try {
-            const uploaded = await registerContextImage(file);
-            if (!uploaded)
-                return;
-            setEditContextImages((prev) => [...prev, uploaded]);
-            reportSuccess("image", "Reference image attached");
-        }
-        catch (error) {
-            reportError(error, "image");
-        }
-        finally {
-            setContextImageBusy(false);
-        }
-    }, [registerContextImage, reportError, reportSuccess]);
-    const removeEditContextImage = useCallback((url) => {
-        setEditContextImages((prev) => prev.filter((img) => img.url !== url));
-    }, []);
-    const removeContextImage = useCallback(async (url) => {
-        if (isStreaming || contextImageBusy)
-            return;
-        const priorQueue = contextImages;
-        const priorSession = sessionContextImagesRef.current;
-        const priorMessages = messages;
-        const nextQueue = priorQueue.filter((img) => img.url !== url);
-        const nextSession = priorSession.filter((img) => img.url !== url);
-        setContextImages(nextQueue);
-        persistSessionContextImages(nextSession);
-        await syncOrphanedImages(priorMessages, priorSession, priorQueue, priorMessages, nextSession, nextQueue);
-    }, [isStreaming, contextImageBusy, contextImages, messages, persistSessionContextImages, syncOrphanedImages]);
-    const removeMessageContextImage = useCallback(async (messageId, url) => {
-        if (isStreaming || contextImageBusy)
-            return;
-        const priorMessages = messages;
-        const priorSession = sessionContextImagesRef.current;
-        const nextMessages = messages.map((msg) => {
-            if (msg.id !== messageId || !msg.contextImages)
-                return msg;
-            const nextImages = msg.contextImages.filter((img) => img.url !== url);
-            return {
-                ...msg,
-                contextImages: nextImages.length ? nextImages : undefined,
-            };
-        });
-        setMessages(nextMessages);
-        await syncOrphanedImages(priorMessages, priorSession, contextImages, nextMessages, priorSession, contextImages);
-    }, [isStreaming, contextImageBusy, messages, contextImages, syncOrphanedImages]);
-    const handleChatPaste = useCallback((event) => {
-        const items = event.clipboardData?.items;
-        if (!items)
-            return;
-        const item = Array.from(items).find((it) => it.kind === "file" && it.type.startsWith("image/"));
-        const file = item?.getAsFile();
-        if (!file)
-            return;
-        event.preventDefault();
-        void addContextImageFromFile(file);
-    }, [addContextImageFromFile]);
-    const handleChatDragOver = useCallback((event) => {
-        if (isStreaming || contextImageBusy)
-            return;
-        if (!event.dataTransfer.types.includes("Files"))
-            return;
-        event.preventDefault();
-        event.dataTransfer.dropEffect = "copy";
-        setChatDropActive(true);
-    }, [isStreaming, contextImageBusy]);
-    const handleChatDragLeave = useCallback((event) => {
-        if (event.currentTarget.contains(event.relatedTarget))
-            return;
-        setChatDropActive(false);
-    }, []);
-    const handleChatDrop = useCallback((event) => {
-        if (isStreaming || contextImageBusy)
-            return;
-        event.preventDefault();
-        setChatDropActive(false);
-        const file = Array.from(event.dataTransfer.files).find((f) => f.type.startsWith("image/"));
-        if (file)
-            void addContextImageFromFile(file);
-    }, [isStreaming, contextImageBusy, addContextImageFromFile]);
-    const buildStoredRecord = useCallback(async (cleanHtml) => {
-        const aiSession = {
-            messages: toPersisted(messages),
-            snapshots,
-            snapshotIndex,
-            contextImages: sessionContextImagesRef.current,
-        };
-        const now = Date.now();
-        return {
-            id: savedTemplate?.id ?? crypto.randomUUID(),
-            name: savedTemplate?.name ?? name,
-            html: cleanHtml,
-            createdAt: savedTemplate?.createdAt ?? now,
-            updatedAt: now,
-            aiSession,
-        };
-    }, [messages, snapshots, snapshotIndex, savedTemplate, name]);
-    const runChatTurn = useCallback(async (text, images, priorMessages, priorSnapshots, priorIndex, blockIds) => {
-        const now = Date.now();
-        const userMessage = {
-            id: createId(),
-            role: "user",
-            content: text,
-            contextImages: images.length ? images : undefined,
-            selectedBlockIds: blockIds.length ? blockIds : undefined,
-            timestamp: now,
-        };
-        const assistantId = createId();
-        inFlightRef.current = { priorMessages, userText: text };
-        const controller = new AbortController();
-        abortRef.current = controller;
-        pendingScrollPinRef.current = userMessage.id;
-        setChatPinSpacerHeight(computeChatPinSpacerHeight(scrollRef.current));
-        setMessages([
-            ...priorMessages,
-            userMessage,
-            {
-                id: assistantId,
-                role: "assistant",
-                content: phaseLabel("thinking"),
-                phase: "thinking",
-                pending: true,
-                timestamp: now,
-            },
-        ]);
-        setIsStreaming(true);
-        const patchAssistant = (patch) => setMessages((prev) => prev.map((m) => (m.id === assistantId ? { ...m, ...patch } : m)));
-        try {
-            const selectedBlocks = blockIds.length ? getSelectedBlocks() : [];
-            syncFromIframe(false);
-            let previewScreenshot;
-            const isFollowUp = priorMessages.length > 0 && htmlRef.current.trim();
-            if (isFollowUp) {
-                try {
-                    const captured = await Promise.race([
-                        captureEmailPreviewScreenshot(stripEditorChrome(htmlRef.current)),
-                        new Promise((resolve) => setTimeout(() => resolve(null), 8000)),
-                    ]);
-                    if (captured)
-                        previewScreenshot = captured;
-                }
-                catch {
-                    /* best effort */
-                }
-            }
-            const res = await fetch(streamRoute, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                signal: controller.signal,
-                body: JSON.stringify({
-                    messages: [
-                        ...priorMessages.map((m) => ({
-                            role: m.role,
-                            content: m.content,
-                            contextImages: m.contextImages?.map((img) => ({
-                                url: img.url,
-                                label: img.name ?? img.url,
-                            })),
-                        })),
-                        {
-                            role: "user",
-                            content: text,
-                            contextImages: images.length
-                                ? images.map((img) => ({
-                                    url: img.url,
-                                    label: img.name ?? img.url,
-                                }))
-                                : undefined,
-                        },
-                    ],
-                    systemPrompt: effectiveSystemPrompt,
-                    sessionContextImages: sessionContextImagesRef.current.map((img) => ({
-                        url: img.url,
-                        label: img.name ?? img.url,
-                    })),
-                    previewScreenshot,
-                    currentHtml: htmlRef.current || undefined,
-                    selectedBlocks: selectedBlocks.length ? selectedBlocks : undefined,
-                    model: selectedModel,
-                }),
-            });
-            if (!res.ok || !res.body) {
-                const data = (await res.json().catch(() => null));
-                throw new Error(data?.error ?? "Failed to generate email.");
-            }
-            const reader = res.body.getReader();
-            const decoder = new TextDecoder();
-            let buffer = "";
-            let partial = undefined;
-            for (;;) {
-                const { done, value: chunk } = await reader.read();
-                if (done)
-                    break;
-                buffer += decoder.decode(chunk, { stream: true });
-                partial = await parseStructuredStream(buffer);
-                const phase = detectPhase(partial);
-                const { narration } = extractStreamParts(partial);
-                patchAssistant({
-                    phase,
-                    content: narration.trim() || phaseLabel(phase),
-                });
-            }
-            partial = await parseStructuredStream(buffer);
-            const phase = detectPhase(partial);
-            const { narration, suggestions: nextSuggestions, html: htmlPart } = extractStreamParts(partial);
-            const finalHtml = sanitizeEmailHtml(stripHtmlCodeFences(htmlPart));
-            if (nextSuggestions.length >= 2) {
-                setSuggestions(nextSuggestions);
-            }
-            else if (finalHtml) {
-                setSuggestions(defaultSuggestions(true));
-            }
-            let nextSnapshots = priorSnapshots.slice(0, priorIndex + 1);
-            let nextIndex = priorIndex;
-            let snapshotId;
-            if (finalHtml) {
-                clearPreviewUndo();
-                applyHtml(finalHtml);
-                const label = narration.split("\n")[0]?.replace(/^-\s*/, "").slice(0, 60) || "AI update";
-                const snap = snapshot(finalHtml, label);
-                nextSnapshots = [...nextSnapshots, snap];
-                nextIndex = nextSnapshots.length - 1;
-                snapshotId = snap.id;
-                setSnapshots(nextSnapshots);
-                setSnapshotIndex(nextIndex);
-            }
-            const finalMessages = [
-                ...priorMessages,
-                userMessage,
-                {
-                    id: assistantId,
-                    role: "assistant",
-                    content: narration.trim() ||
-                        (finalHtml
-                            ? "Done — changes applied."
-                            : "I couldn't produce an email update. Try rephrasing."),
-                    phase,
-                    pending: false,
-                    appliedHtml: !!finalHtml,
-                    snapshotId,
-                    timestamp: Date.now(),
-                },
-            ];
-            setMessages(finalMessages);
-            setSelectedBlockIds([]);
-        }
-        catch (error) {
-            if (error instanceof Error && error.name === "AbortError") {
-                const ctx = inFlightRef.current;
-                if (ctx) {
-                    setMessages(ctx.priorMessages);
-                    setInput(ctx.userText);
-                }
-                pendingScrollPinRef.current = null;
-                return;
-            }
-            const err = error instanceof Error ? error : new Error("Failed to generate email.");
-            reportError(err, "stream");
-            patchAssistant({
-                content: err.message,
-                pending: false,
-                error: true,
-            });
-        }
-        finally {
-            inFlightRef.current = null;
-            abortRef.current = null;
-            setIsStreaming(false);
-            setChatPinSpacerHeight(0);
-        }
-    }, [
-        effectiveSystemPrompt,
-        applyHtml,
-        getSelectedBlocks,
-        syncFromIframe,
-        clearPreviewUndo,
-        streamRoute,
-        selectedModel,
-        reportError,
-    ]);
-    const cancelStream = useCallback(() => {
-        abortRef.current?.abort();
-    }, []);
-    const handleSend = useCallback(() => {
-        const trimmed = input.trim();
-        const images = contextImages;
-        const text = trimmed ||
-            (images.length
-                ? "Create an email inspired by the attached reference image(s)."
-                : "");
-        if (!text || isStreaming)
-            return;
-        if (!selectedModel) {
-            reportError(new Error("No model configured."), "stream");
-            return;
-        }
-        if (editingMessageId) {
-            setEditingMessageId(null);
-            setEditDraft("");
-        }
-        setInput("");
-        setContextImages([]);
-        void runChatTurn(text, images, messages, snapshots, snapshotIndex, selectedBlockIds);
-    }, [
-        input,
-        contextImages,
-        isStreaming,
-        editingMessageId,
-        messages,
-        snapshots,
-        snapshotIndex,
-        selectedBlockIds,
-        runChatTurn,
-        reportError,
-    ]);
-    const canUndoChat = useMemo(() => {
-        const n = messages.length;
-        if (n < 2)
-            return false;
-        const last = messages[n - 1];
-        const prior = messages[n - 2];
-        return last?.role === "assistant" && !last.pending && prior?.role === "user";
-    }, [messages]);
-    const canGoBack = !isStreaming && (previewUndoCount > 0 || canUndoChat);
-    const executeBack = useCallback(async () => {
-        if (!canUndoChat)
-            return;
-        clearPreviewUndo();
-        const lastUserIdx = messages.length - 2;
-        const priorMessages = messages.slice(0, lastUserIdx);
-        const priorSession = sessionContextImagesRef.current;
-        const priorPending = contextImages;
-        let snapIdx = 0;
-        let targetHtml = snapshots[0]?.html ?? "";
-        const priorSnapId = [...priorMessages]
-            .reverse()
-            .find((m) => m.role === "assistant" && m.snapshotId)?.snapshotId;
-        if (priorSnapId) {
-            snapIdx = snapshots.findIndex((s) => s.id === priorSnapId);
-            if (snapIdx >= 0)
-                targetHtml = snapshots[snapIdx].html;
-        }
-        else if (priorMessages.length === 0) {
-            targetHtml = snapshots[0]?.html ?? "";
-            snapIdx = 0;
-        }
-        if (snapIdx < 0)
-            snapIdx = 0;
-        const nextSnapshots = snapshots.slice(0, snapIdx + 1);
-        applyHtml(targetHtml);
-        setSnapshotIndex(snapIdx);
-        setSnapshots(nextSnapshots);
-        setMessages(priorMessages);
-        setContextImages([]);
-        setSelectedBlockIds([]);
-        setEditingMessageId(null);
-        setEditDraft("");
-        await syncOrphanedImages(messages, priorSession, priorPending, priorMessages, priorSession, []);
-        reportSuccess("undo", "Undid last message");
-    }, [
-        canUndoChat,
-        messages,
-        snapshots,
-        contextImages,
-        applyHtml,
-        clearPreviewUndo,
-        syncOrphanedImages,
-        reportSuccess,
-    ]);
-    const requestBack = useCallback(() => {
-        if (isStreaming)
-            return;
-        if (undoPreviewEdit())
-            return;
-        if (!canUndoChat)
-            return;
-        setBackConfirmOpen(true);
-    }, [canUndoChat, isStreaming, undoPreviewEdit]);
-    const confirmBack = useCallback(() => {
-        setBackConfirmOpen(false);
-        void executeBack();
-    }, [executeBack]);
-    const cancelBack = useCallback(() => setBackConfirmOpen(false), []);
-    const backConfirmSummary = useMemo(() => {
-        if (!canUndoChat)
-            return "";
-        const lastUser = messages[messages.length - 2];
-        const preview = lastUser?.content?.trim().slice(0, 100);
-        const hadImages = !!lastUser?.contextImages?.length;
-        if (preview && hadImages) {
-            return `"${preview}${lastUser.content.length > 100 ? "…" : ""}" and its reference image(s) will be removed.`;
-        }
-        if (preview) {
-            return `"${preview}${lastUser.content.length > 100 ? "…" : ""}" will be removed.`;
-        }
-        if (hadImages)
-            return "The last message and its reference image(s) will be removed.";
-        return "The last message will be removed and the preview will go back one step.";
-    }, [canUndoChat, messages]);
-    const startEditing = useCallback((id) => {
-        const message = messages.find((m) => m.id === id);
-        if (isStreaming || message?.role !== "user")
-            return;
-        setEditingMessageId(id);
-        setEditDraft(message.content);
-        setEditContextImages((message.contextImages ?? []).map((img) => ({
-            url: img.url,
-            label: img.name ?? img.url,
-        })));
-    }, [isStreaming, messages]);
-    const cancelEditing = useCallback(() => {
-        setEditingMessageId(null);
-        setEditDraft("");
-        setEditContextImages([]);
-    }, []);
-    const submitEdit = useCallback(() => {
-        const text = editDraft.trim();
-        if (!text || !editingMessageId || isStreaming)
-            return;
-        const messageIndex = messages.findIndex((m) => m.id === editingMessageId);
-        if (messageIndex === -1 || messages[messageIndex]?.role !== "user")
-            return;
-        const priorMessages = messages.slice(0, messageIndex);
-        const priorSnapshotId = [...priorMessages]
-            .reverse()
-            .find((m) => m.role === "assistant" && m.snapshotId)?.snapshotId;
-        const restoreIndex = priorSnapshotId
-            ? snapshots.findIndex((s) => s.id === priorSnapshotId)
-            : 0;
-        const priorIndex = restoreIndex >= 0 ? restoreIndex : 0;
-        const priorSnapshots = snapshots.slice(0, priorIndex + 1);
-        clearPreviewUndo();
-        applyHtml(snapshots[priorIndex]?.html ?? "");
-        setSnapshots(priorSnapshots);
-        setSnapshotIndex(priorIndex);
-        setMessages(priorMessages);
-        setEditingMessageId(null);
-        setEditDraft("");
-        setEditContextImages([]);
-        setSelectedBlockIds([]);
-        void syncOrphanedImages(messages, sessionContextImagesRef.current, contextImages, priorMessages, sessionContextImagesRef.current, []).then(() => runChatTurn(text, editContextImages.map((img) => ({
-            id: createId(),
-            url: img.url,
-            name: img.label,
-        })), priorMessages, priorSnapshots, priorIndex, []));
-    }, [
-        editDraft,
-        editingMessageId,
-        editContextImages,
-        isStreaming,
-        messages,
-        snapshots,
-        contextImages,
-        applyHtml,
-        runChatTurn,
-        syncOrphanedImages,
-        clearPreviewUndo,
-    ]);
-    const requestSubmitEdit = useCallback(() => {
-        if (!editDraft.trim() || !editingMessageId || isStreaming)
-            return;
-        setResubmitConfirmOpen(true);
-    }, [editDraft, editingMessageId, isStreaming]);
-    const confirmSubmitEdit = useCallback(() => {
-        setResubmitConfirmOpen(false);
-        submitEdit();
-    }, [submitEdit]);
-    const cancelSubmitConfirm = useCallback(() => setResubmitConfirmOpen(false), []);
-    const canRevertToCheckpoint = useCallback((userMessageId) => {
-        const idx = messages.findIndex((m) => m.id === userMessageId);
-        if (idx === -1 || messages[idx]?.role !== "user")
-            return false;
-        if (messages[idx + 1]?.pending)
-            return false;
-        return idx + 2 < messages.length;
-    }, [messages]);
-    const revertToCheckpoint = useCallback(async (userMessageId) => {
-        if (isStreaming)
-            return;
-        const messageIndex = messages.findIndex((m) => m.id === userMessageId);
-        if (messageIndex === -1 || messages[messageIndex]?.role !== "user")
-            return;
-        if (!canRevertToCheckpoint(userMessageId))
-            return;
-        const assistantMsg = messages[messageIndex + 1];
-        if (!assistantMsg || assistantMsg.role !== "assistant")
-            return;
-        let snapIdx = 0;
-        let targetHtml = snapshots[0]?.html ?? "";
-        if (assistantMsg.snapshotId) {
-            snapIdx = snapshots.findIndex((s) => s.id === assistantMsg.snapshotId);
-            if (snapIdx >= 0)
-                targetHtml = snapshots[snapIdx].html;
-        }
-        else {
-            const prior = messages.slice(0, messageIndex);
-            const priorSnapId = [...prior]
-                .reverse()
-                .find((m) => m.role === "assistant" && m.snapshotId)?.snapshotId;
-            if (priorSnapId) {
-                snapIdx = snapshots.findIndex((s) => s.id === priorSnapId);
-                if (snapIdx >= 0)
-                    targetHtml = snapshots[snapIdx].html;
-            }
-        }
-        if (snapIdx < 0)
-            snapIdx = 0;
-        const nextMessages = messages.slice(0, messageIndex + 2);
-        const nextSnapshots = snapshots.slice(0, snapIdx + 1);
-        const priorSession = sessionContextImagesRef.current;
-        clearPreviewUndo();
-        applyHtml(targetHtml);
-        setSnapshotIndex(snapIdx);
-        setSnapshots(nextSnapshots);
-        setMessages(nextMessages);
-        setSelectedBlockIds([]);
-        setEditingMessageId(null);
-        setEditDraft("");
-        await syncOrphanedImages(messages, priorSession, contextImages, nextMessages, priorSession, contextImages);
-        reportSuccess("revert", "Reverted to checkpoint");
-    }, [
-        isStreaming,
-        messages,
-        snapshots,
-        contextImages,
-        canRevertToCheckpoint,
-        applyHtml,
-        clearPreviewUndo,
-        syncOrphanedImages,
-        reportSuccess,
-    ]);
-    const requestRevertToCheckpoint = useCallback((userMessageId) => {
-        if (isStreaming || !canRevertToCheckpoint(userMessageId))
-            return;
-        setRevertConfirmMessageId(userMessageId);
-        setRevertConfirmOpen(true);
-    }, [isStreaming, canRevertToCheckpoint]);
-    const confirmRevertToCheckpoint = useCallback(() => {
-        const messageId = revertConfirmMessageId;
-        setRevertConfirmOpen(false);
-        setRevertConfirmMessageId(null);
-        if (messageId)
-            void revertToCheckpoint(messageId);
-    }, [revertConfirmMessageId, revertToCheckpoint]);
-    const cancelRevertConfirm = useCallback(() => {
-        setRevertConfirmOpen(false);
-        setRevertConfirmMessageId(null);
-    }, []);
-    const hasSessionChanges = useMemo(() => {
-        const initial = loadedSessionRef.current;
-        if (!initial) {
-            return (dirty ||
-                messages.length > 0 ||
-                !!input.trim() ||
-                contextImages.length > 0 ||
-                systemPromptOverride !== null);
-        }
-        const currentHtml = stripEditorChrome(html);
-        return (dirty ||
-            systemPromptOverride !== null ||
-            !!input.trim() ||
-            contextImages.length > 0 ||
-            currentHtml !== initial.html ||
-            JSON.stringify(toPersisted(messages)) !== JSON.stringify(initial.messages) ||
-            JSON.stringify(snapshots) !== JSON.stringify(initial.snapshots) ||
-            snapshotIndex !== initial.snapshotIndex ||
-            JSON.stringify(sessionContextImages) !== JSON.stringify(initial.contextImages));
-    }, [
-        dirty,
-        html,
-        messages,
-        snapshots,
-        snapshotIndex,
-        sessionContextImages,
-        input,
-        contextImages,
-        systemPromptOverride,
-    ]);
-    const handleSave = useCallback(async () => {
-        syncFromIframe(false);
-        const current = htmlRef.current;
-        const cleanHtml = current.trim() ? stripEditorChrome(current) : "";
-        if (!cleanHtml && !hasSessionChanges) {
-            reportError(new Error("Nothing to save."), "save");
-            return false;
-        }
-        if (cleanHtml) {
-            const mergeError = getMergeTagError(cleanHtml, mergeTags);
-            if (mergeError) {
-                reportError(new Error(mergeError), "save");
-                return false;
-            }
-        }
-        setSaving(true);
-        try {
-            const record = await buildStoredRecord(cleanHtml);
-            await onSave(record);
-            rememberLoadedSession({
-                html: cleanHtml,
-                messages: toPersisted(messages),
-                snapshots,
-                snapshotIndex,
-                contextImages: sessionContextImagesRef.current,
-            });
-            setDirty(false);
-            reportSuccess("save", cleanHtml ? "Template saved" : "Template cleared");
-            return true;
-        }
-        catch (error) {
-            reportError(error, "save");
-            return false;
-        }
-        finally {
-            setSaving(false);
-        }
-    }, [
-        syncFromIframe,
-        hasSessionChanges,
-        mergeTags,
-        messages,
-        snapshots,
-        snapshotIndex,
-        buildStoredRecord,
-        onSave,
-        rememberLoadedSession,
-        reportError,
-        reportSuccess,
-    ]);
-    const resetSystemPrompt = useCallback(() => setSystemPromptOverride(null), []);
-    const applySystemPrompt = useCallback((next) => {
-        const trimmed = next.trim();
-        if (!trimmed) {
-            reportError(new Error("System prompt cannot be empty."), "stream");
-            return false;
-        }
-        setSystemPromptOverride(trimmed === resolvedSystemPrompt.trim() ? null : trimmed);
-        return true;
-    }, [resolvedSystemPrompt, reportError]);
-    const handleRestart = useCallback(async () => {
-        const priorMessages = messages;
-        const priorSession = sessionContextImagesRef.current;
-        const priorPending = contextImages;
-        clearPreviewUndo();
-        applyHtml("");
-        setMessages([]);
-        setSnapshots([snapshot("", "Blank")]);
-        setSnapshotIndex(0);
-        setInput("");
-        setContextImages([]);
-        setSessionContextImages([]);
-        sessionContextImagesRef.current = [];
-        setSystemPromptOverride(null);
-        setEditingMessageId(null);
-        setEditDraft("");
-        setSelectMode(false);
-        setSelectedBlockIds([]);
-        setSuggestions(getSuggestions(false));
-        setDirty(true);
-        await syncOrphanedImages(priorMessages, priorSession, priorPending, [], [], []);
-    }, [messages, contextImages, applyHtml, clearPreviewUndo, syncOrphanedImages]);
-    return {
-        iframeRef,
-        scrollRef,
-        chatPinSpacerHeight,
-        hasHtml: !!html,
-        loading,
-        saving,
-        hasSessionChanges,
-        getCleanHtml,
-        messages,
-        input,
-        setInput,
-        contextImages,
-        contextImageBusy,
-        removeContextImage,
-        removeMessageContextImage,
-        addContextImageFromFile,
-        canRemoveContextImages: !isStreaming && !contextImageBusy,
-        chatDropActive,
-        handleChatPaste,
-        handleChatDragOver,
-        handleChatDragLeave,
-        handleChatDrop,
-        isStreaming,
-        editingMessageId,
-        editDraft,
-        setEditDraft,
-        editContextImages,
-        addEditContextImageFromFile,
-        removeEditContextImage,
-        startEditing,
-        cancelEditing,
-        requestSubmitEdit,
-        confirmSubmitEdit,
-        cancelSubmitConfirm,
-        resubmitConfirmOpen,
-        handleSend,
-        cancelStream,
-        canRevertToCheckpoint,
-        requestRevertToCheckpoint,
-        confirmRevertToCheckpoint,
-        cancelRevertConfirm,
-        revertConfirmOpen,
-        suggestions,
-        defaultSystemPrompt: resolvedSystemPrompt,
-        effectiveSystemPrompt,
-        applySystemPrompt,
-        resetSystemPrompt,
-        selectMode,
-        exitSelectMode,
-        toggleSelectMode,
-        selectedBlockIds,
-        toggleBlockSelection,
-        canGoBack,
-        requestBack,
-        confirmBack,
-        cancelBack,
-        backConfirmOpen,
-        backConfirmSummary,
-        previewDropActive,
-        handleSave,
-        handleRestart,
-        canRestart: (!!html || messages.length > 0) && !isStreaming,
-        modelOptions,
-        selectedModel,
-        setSelectedModel,
-        showModelSelector: modelOptions.length > 1,
-    };
-}