@simmalugnt-se/payload-editor-assistant 0.12.2 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.13.0
+
+- Attach reference images to chat with file selection, drag-and-drop or clipboard paste. Show
+  removable previews, resize large images, bound recent image context, and preserve attachments
+  with the browser conversation without uploading them to the CMS.
+- Add opt-in server-only `DEBUG_ASSISTANT=true` traces for conversations, context, tool calls and
+  results, provider-exposed reasoning, usage, replies, decisions and errors. Optionally persist
+  complete local JSONL with `DEBUG_ASSISTANT_LOG_DIR`; redact credential fields/nonces and represent
+  images by metadata. Chunk large server records and report server log truncation explicitly.
+
+- The model receives the complete schema of nested groups, array rows and blocks, including
+  relationship formats, field defaults and conditional requirements. Structured internal links
+  use document references rather than rich text's `doc:` notation in a URL field.
+- Relationship checks reach fields inside changed containers and refuse missing required document
+  references using the host's field conditions. A single-collection polymorphic reference still
+  requires `{ relationTo, value }`; proposals and approvals repeat these checks. Selected documents
+  are named in the review.
+- New blocks in draft creation and form proposals use the same collapsible review as translations,
+  with separate schema-labelled fields and full formatted rich text. The preview follows the final
+  block order and values after all proposed operations, without truncating the block's content.
+
 ## 0.12.2
 
 - Batch links remove their parameters from Next’s router state as well as browser history, so

package/README.md

@@ -259,3 +259,40 @@ chat** clears the current one.
 | `trustedOrigins` | Origins allowed to call the assistant's endpoints. Default: only the origin serving Admin. When set, only the listed origins. |
 | `audit.collection` | Slug of the collection that logs assistant actions (default `editor-assistant-audit`). |
 | `disabled` | Turn the plugin off without removing its config. |
+
+## Reference images in chat
+
+Use **Add images**, drop images on the assistant panel, or paste a screenshot into the message.
+Each message can include up to three PNG, JPEG, WebP or GIF images (source files up to 10 MB).
+Large images are resized to at most 2048px on their longest edge and compressed before sending;
+each attachment is at most 1 MiB and the complete image context is at most 2 MiB. Use a model
+that supports images. Attachments are reference context, not files in the CMS media library.
+
+Recent attachments are remembered with the browser conversation. Older image bytes are omitted
+when the context/storage budget is reached, keeping their filenames. If browser storage is full,
+the transcript is saved without image bytes. Attach the image again when it is needed later.
+
+## Assistant debug traces
+
+Set server-only `DEBUG_ASSISTANT=true` to log turns through Payload's logger. No client build flag
+is needed. Logs include the user message and history, the allowlisted context and system prompt,
+tool inputs/results, each model step's text and provider-exposed reasoning, usage, finish reason,
+errors and the final reply/proposal. Decisions on Keep/Undo and draft approval are logged separately,
+linked by `approvalId`. Every run has a `traceId` and ordered `sequence` numbers. Reasoning is
+available only when the provider returns it; hidden model reasoning is not accessible.
+
+This is separate from the value-free audit trail and off by default. It intentionally contains
+conversation and CMS content. Request headers, environment variables and provider configuration
+are never logged; known credential keys and approval nonces are removed. Image bytes are replaced
+with size/hash metadata. Large server records are split into base64 `trace.chunk` entries; a
+`trace.truncated` marker reports reaching the server log budget (850 KiB / 220 lines per run).
+
+For complete local JSONL files, also set `DEBUG_ASSISTANT_LOG_DIR=.assistant-debug`. One file is
+written per turn/decision, and flushed before the request finishes. File logging failures never
+block the assistant. Keep this directory out of Git. Do not set this directory on Vercel: function
+storage is temporary. Use server logs and export them before the plan's retention window expires.
+For longer automatic retention, configure a host log drain.
+
+The boilerplate provides `pnpm assistant:logs --deployment <URL> --since 1h` to download Vercel
+logs and reconstruct the records in `.assistant-debug/`. Other hosts can use the same server logger
+records with their own logging/export tools. Logging never changes the audit collection schema.

package/dist/chat-images.d.ts

@@ -0,0 +1,20 @@
+/** Shared browser/server limits for reference images, separate from CMS uploads. */
+export declare const MAX_CHAT_IMAGES = 3;
+export declare const MAX_CHAT_IMAGE_BYTES: number;
+export declare const MAX_CHAT_IMAGES_BYTES: number;
+export declare const CHAT_IMAGE_TYPES: readonly ["image/png", "image/jpeg", "image/webp", "image/gif"];
+export type ChatImage = {
+    name: string;
+    mediaType: (typeof CHAT_IMAGE_TYPES)[number];
+    /** Base64 bytes, never an address to fetch. Absent on an older image omitted from storage. */
+    data?: string;
+};
+export declare function imageByteLength(data: string): number;
+/** Reject URL references, mismatched signatures and oversized bytes on the server as well. */
+export declare function isChatImage(value: unknown): value is ChatImage & {
+    data: string;
+};
+/** Keep the newest image bytes within the request/storage budget; retain older filenames. */
+export declare function boundChatImages<T extends {
+    images?: ChatImage[];
+}>(messages: T[]): T[];

package/dist/chat-images.js

@@ -0,0 +1,61 @@
+/** Shared browser/server limits for reference images, separate from CMS uploads. */
+export const MAX_CHAT_IMAGES = 3;
+export const MAX_CHAT_IMAGE_BYTES = 1024 * 1024;
+export const MAX_CHAT_IMAGES_BYTES = 2 * 1024 * 1024;
+export const CHAT_IMAGE_TYPES = ["image/png", "image/jpeg", "image/webp", "image/gif"];
+export function imageByteLength(data) {
+    return (data.length / 4) * 3 - (data.endsWith("==") ? 2 : data.endsWith("=") ? 1 : 0);
+}
+/** Reject URL references, mismatched signatures and oversized bytes on the server as well. */
+export function isChatImage(value) {
+    const image = value;
+    if (!image ||
+        typeof image.name !== "string" ||
+        image.name.length > 200 ||
+        !CHAT_IMAGE_TYPES.includes(image.mediaType) ||
+        typeof image.data !== "string" ||
+        !image.data ||
+        image.data.length > Math.ceil(MAX_CHAT_IMAGE_BYTES / 3) * 4 ||
+        image.data.length % 4 !== 0 ||
+        !/^[A-Za-z0-9+/]*={0,2}$/.test(image.data) ||
+        imageByteLength(image.data) > MAX_CHAT_IMAGE_BYTES)
+        return false;
+    const header = atob(image.data.slice(0, 24));
+    switch (image.mediaType) {
+        case "image/png":
+            return header.startsWith("\x89PNG\r\n\x1a\n");
+        case "image/jpeg":
+            return header.startsWith("\xff\xd8\xff");
+        case "image/gif":
+            return header.startsWith("GIF87a") || header.startsWith("GIF89a");
+        case "image/webp":
+            return header.startsWith("RIFF") && header.slice(8, 12) === "WEBP";
+        default:
+            return false;
+    }
+}
+/** Keep the newest image bytes within the request/storage budget; retain older filenames. */
+export function boundChatImages(messages) {
+    let bytes = 0;
+    return [...messages]
+        .reverse()
+        .map((message) => ({
+        ...message,
+        ...(message.images
+            ? {
+                images: message.images.map((image) => {
+                    if (!image.data)
+                        return image;
+                    const size = imageByteLength(image.data);
+                    if (bytes + size > MAX_CHAT_IMAGES_BYTES) {
+                        const { data: _data, ...metadata } = image;
+                        return metadata;
+                    }
+                    bytes += size;
+                    return image;
+                }),
+            }
+            : {}),
+    }))
+        .reverse();
+}

package/dist/components/ChatImages.d.ts

@@ -0,0 +1,20 @@
+import { type ClipboardEvent, type DragEvent } from "react";
+import { type ChatImage } from "../chat-images.ts";
+import type { Copy } from "./copy.ts";
+export declare function ChatImages({ images, copy, onRemove, }: {
+    images?: ChatImage[];
+    copy: Copy;
+    onRemove?: (index: number) => void;
+}): import("react").JSX.Element | null;
+/** Preparation is bounded and cannot deliver a late attachment into another conversation. */
+export declare function useChatImages(identity: string, disabled: boolean, copy: Copy): {
+    images: ChatImage[];
+    preparing: boolean;
+    clear: () => void;
+    onDrop: (event: DragEvent) => void;
+    onDragOver: (event: DragEvent) => void;
+    onPaste: (event: ClipboardEvent) => void;
+    input: import("react").JSX.Element;
+    choose: () => void | undefined;
+    preview: import("react").JSX.Element;
+};

package/dist/components/ChatImages.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { CHAT_IMAGE_TYPES, imageByteLength, MAX_CHAT_IMAGES, MAX_CHAT_IMAGES_BYTES, } from "../chat-images.js";
+import { prepareChatImage } from "./chat-image-file.js";
+export function ChatImages({ images, copy, onRemove, }) {
+    if (!images?.length)
+        return null;
+    return (_jsx("div", { className: "ea-images", children: images.map((image, index) => (_jsxs("figure", { className: "ea-image", children: [image.data ? (
+                // biome-ignore lint/performance/noImgElement: bounded data URLs, no server image optimization needed
+                _jsx("img", { src: `data:${image.mediaType};base64,${image.data}`, alt: image.name, width: 80, height: 64 })) : (_jsx("span", { children: copy.imageOmitted })), _jsx("figcaption", { title: image.name, children: image.name }), onRemove ? (_jsx("button", { type: "button", "aria-label": `${copy.removeImage}: ${image.name}`, onClick: () => onRemove(index), children: "\u00D7" })) : null] }, `${index}:${image.name}`))) }));
+}
+/** Preparation is bounded and cannot deliver a late attachment into another conversation. */
+export function useChatImages(identity, disabled, copy) {
+    const [images, setImages] = useState([]);
+    const [preparing, setPreparing] = useState(false);
+    const [error, setError] = useState("");
+    const inputRef = useRef(null);
+    const generation = useRef(0);
+    const busy = useRef(false);
+    const clear = () => {
+        generation.current++;
+        busy.current = false;
+        setImages([]);
+        setPreparing(false);
+        setError("");
+    };
+    // The identity is the trigger; pending preparation belongs to that conversation only.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reset when the conversation identity changes
+    useEffect(() => {
+        generation.current++;
+        busy.current = false;
+        setImages([]);
+        setPreparing(false);
+        setError("");
+        return () => {
+            generation.current++;
+        };
+    }, [identity]);
+    const add = async (files) => {
+        if (disabled || busy.current || !files.length)
+            return;
+        if (files.length + images.length > MAX_CHAT_IMAGES) {
+            setError(copy.imageLimit);
+            return;
+        }
+        busy.current = true;
+        setPreparing(true);
+        setError("");
+        const version = generation.current;
+        try {
+            const prepared = [];
+            for (const file of files)
+                prepared.push(await prepareChatImage(file));
+            if (generation.current !== version)
+                return;
+            if ([...images, ...prepared].reduce((sum, image) => sum + imageByteLength(image.data ?? ""), 0) > MAX_CHAT_IMAGES_BYTES)
+                throw new Error("image_too_large");
+            setImages([...images, ...prepared]);
+        }
+        catch (cause) {
+            if (generation.current === version)
+                setError(cause instanceof Error && cause.message === "image_too_large"
+                    ? copy.imageTooLarge
+                    : copy.imageInvalid);
+        }
+        finally {
+            if (generation.current === version) {
+                busy.current = false;
+                setPreparing(false);
+            }
+        }
+    };
+    const onDrop = (event) => {
+        if (!event.dataTransfer.types.includes("Files"))
+            return;
+        event.preventDefault();
+        void add(Array.from(event.dataTransfer.files));
+    };
+    const onDragOver = (event) => {
+        if (event.dataTransfer.types.includes("Files"))
+            event.preventDefault();
+    };
+    const onPaste = (event) => {
+        const files = Array.from(event.clipboardData.items)
+            .filter((item) => item.type.startsWith("image/"))
+            .flatMap((item) => {
+            const file = item.getAsFile();
+            return file ? [file] : [];
+        });
+        if (files.length) {
+            event.preventDefault();
+            void add(files);
+        }
+    };
+    return {
+        images,
+        preparing,
+        clear,
+        onDrop,
+        onDragOver,
+        onPaste,
+        input: (_jsx("input", { ref: inputRef, type: "file", hidden: true, multiple: true, accept: CHAT_IMAGE_TYPES.join(","), disabled: disabled || preparing, onChange: (event) => {
+                void add(Array.from(event.target.files ?? []));
+                event.target.value = "";
+            } })),
+        choose: () => inputRef.current?.click(),
+        preview: (_jsxs(_Fragment, { children: [_jsx(ChatImages, { images: images, copy: copy, onRemove: (index) => {
+                        if (!preparing)
+                            setImages((current) => current.filter((_, i) => i !== index));
+                    } }), preparing ? (_jsx("p", { className: "ea-image-note", role: "status", children: copy.imagePreparing })) : null, error ? (_jsx("p", { className: "ea-image-note", role: "alert", children: error })) : null] })),
+    };
+}

package/dist/components/EditorAssistantAside.js

@@ -3,12 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Button, ChevronIcon, useConfig, useLocale, useTranslation, XIcon } from "@payloadcms/ui";
 import { usePathname, useRouter } from "next/navigation";
 import { useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { boundChatImages } from "../chat-images.js";
 import { resolveChatLanguage } from "../runtime/language.js";
 import { parseAdminView } from "../view.js";
 import { assistantRequest, assistantStream } from "./assistant-api.js";
 import { useAssistantState, } from "./assistant-context.js";
 import { BatchPanel } from "./BatchPanel.js";
 import { releaseTakenBatches } from "./batch-link.js";
+import { ChatImages, useChatImages } from "./ChatImages.js";
 import { COPY, translateAction, uiLanguage } from "./copy.js";
 import { ProposalReview } from "./ProposalReview.js";
 import { isFormProposal, proposalSteps, refineProposal, replaceLatestStep, } from "./proposal-chain.js";
@@ -29,6 +31,7 @@ export function EditorAssistantAside() {
     const view = parseAdminView(pathname ?? "", config.routes.admin);
     const visibleShortcuts = shortcuts.filter((shortcut) => shortcutMatches(shortcut, view));
     const [draft, setDraft] = useState("");
+    const attachments = useChatImages(`${pathname}:${locale.code}`, status === "streaming" || Boolean(batch), copy);
     // A ready prompt replaces the draft; it is only sent when the editor sends it.
     useEffect(() => {
         if (prefill !== null) {
@@ -195,9 +198,9 @@ export function EditorAssistantAside() {
             await decideRequest(step, "reject", undefined).catch(() => undefined);
         }
     };
-    const send = async (text) => {
+    const send = async (text, images = []) => {
         const trimmed = text.trim();
-        if (!trimmed || status === "streaming") {
+        if ((!trimmed && images.length === 0) || status === "streaming" || attachments.preparing) {
             return;
         }
         // A suggestion in the form stays open while the editor writes on: the next one refines it.
@@ -205,16 +208,26 @@ export function EditorAssistantAside() {
         const basis = formAdapter?.getData();
         stickToBottomRef.current = true;
         setDraft("");
+        if (images.length)
+            attachments.clear();
         setStep(null);
-        const userMessage = { id: crypto.randomUUID(), role: "user", text: trimmed };
-        setMessages((current) => [...current, userMessage]);
+        const userMessage = {
+            id: crypto.randomUUID(),
+            role: "user",
+            text: trimmed,
+            ...(images.length ? { images } : {}),
+        };
+        setMessages((current) => boundChatImages([...current, userMessage]));
         const controller = new AbortController();
         setAbortController(controller);
         setStatus("streaming");
         try {
-            const history = [...messages, userMessage].map((message) => ({
+            const history = boundChatImages([...messages, userMessage].slice(-20)).map((message) => ({
                 role: message.role,
-                text: message.text,
+                text: message.images?.some((image) => !image.data)
+                    ? `${message.text}\n[Older reference image bytes omitted from context; filenames: ${JSON.stringify(message.images.filter((image) => !image.data).map((image) => image.name))}]`
+                    : message.text,
+                images: message.images?.filter((image) => image.data),
             }));
             // A form proposal arrives before the reply is written and goes into the form right away.
             // Proposals are applied one after another; a later one in the same turn replaces the earlier.
@@ -433,19 +446,22 @@ export function EditorAssistantAside() {
     };
     const onSubmit = (event) => {
         event.preventDefault();
-        void send(draft);
+        void send(draft, attachments.images);
     };
     const onKeyDown = (event) => {
         if (event.key === "Enter" && !event.shiftKey) {
             event.preventDefault();
-            void send(draft);
+            void send(draft, attachments.images);
         }
     };
     // Keep batch cards mounted while collapsed, so reopening never resets saved cards to tasks.
-    return (_jsxs("aside", { className: "ea-aside", "aria-label": copy.assistant, hidden: !open, [KEEP_SELECTION_ATTR]: "", children: [_jsxs("div", { className: "ea-aside__head", children: [_jsxs("div", { className: "ea-aside__title", children: [_jsx("h2", { children: copy.assistant }), bridge ? _jsx("p", { className: "ea-aside__context", children: contextLine(bridge, config) }) : null] }), !batch && (messages.length > 0 || pendingApproval) && !pendingApproval?.applied ? (_jsx(Button, { buttonStyle: "subtle", margin: false, onClick: () => resetConversation(), size: "medium", children: copy.newChat })) : null, _jsx(Button, { "aria-label": copy.collapseLabel, buttonStyle: "icon-label", className: "ea-aside__collapse", icon: _jsx(ChevronIcon, { direction: "right" }), margin: false, onClick: () => setOpen(false), tooltip: copy.collapse })] }), batch ? (_jsx("div", { className: "ea-aside__body", children: _jsx(BatchPanel, { batch: batch, onClose: () => {
+    return (_jsxs("aside", { className: "ea-aside", "aria-label": copy.assistant, hidden: !open, onDrop: attachments.onDrop, onDragOver: attachments.onDragOver, [KEEP_SELECTION_ATTR]: "", children: [_jsxs("div", { className: "ea-aside__head", children: [_jsxs("div", { className: "ea-aside__title", children: [_jsx("h2", { children: copy.assistant }), bridge ? _jsx("p", { className: "ea-aside__context", children: contextLine(bridge, config) }) : null] }), !batch && (messages.length > 0 || pendingApproval) && !pendingApproval?.applied ? (_jsx(Button, { buttonStyle: "subtle", margin: false, onClick: () => {
+                            attachments.clear();
+                            resetConversation();
+                        }, size: "medium", children: copy.newChat })) : null, _jsx(Button, { "aria-label": copy.collapseLabel, buttonStyle: "icon-label", className: "ea-aside__collapse", icon: _jsx(ChevronIcon, { direction: "right" }), margin: false, onClick: () => setOpen(false), tooltip: copy.collapse })] }), batch ? (_jsx("div", { className: "ea-aside__body", children: _jsx(BatchPanel, { batch: batch, onClose: () => {
                         releaseTakenBatches();
                         setBatch(null);
-                    } }, batch.id) })) : (_jsxs("div", { className: "ea-aside__body", children: [_jsxs("div", { className: "ea-messages", ref: threadRef, onScroll: onThreadScroll, children: [messages.length === 0 ? (_jsx("div", { className: "ea-msg ea-msg--assistant", children: introText(view, bridge, collections, config, copy) })) : null, messages.map((message) => (_jsxs("div", { className: `ea-msg ea-msg--${message.role}`, children: [message.role === "assistant" ? _jsx(ReplyText, { text: message.text }) : message.text, message.candidates?.length ? (_jsx("div", { className: "ea-actions", children: message.candidates.map((candidate) => (_jsx(Button, { buttonStyle: "pill", margin: false, onClick: () => {
+                    } }, batch.id) })) : (_jsxs("div", { className: "ea-aside__body", children: [_jsxs("div", { className: "ea-messages", ref: threadRef, onScroll: onThreadScroll, children: [messages.length === 0 ? (_jsx("div", { className: "ea-msg ea-msg--assistant", children: introText(view, bridge, collections, config, copy) })) : null, messages.map((message) => (_jsxs("div", { className: `ea-msg ea-msg--${message.role}`, children: [message.role === "assistant" ? _jsx(ReplyText, { text: message.text }) : message.text, _jsx(ChatImages, { images: message.images, copy: copy }), message.candidates?.length ? (_jsx("div", { className: "ea-actions", children: message.candidates.map((candidate) => (_jsx(Button, { buttonStyle: "pill", margin: false, onClick: () => {
                                                 router.push(candidate.href);
                                             }, size: "small", children: candidate.label }, candidate.href))) })) : null] }, message.id))), status === "streaming" ? (_jsxs("div", { className: "ea-msg ea-msg--working", children: [_jsxs("span", { className: "ea-dots", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsx("span", { children: step ? talk.steps[step] : talk.working })] })) : null] }), pendingApproval ? (_jsxs("div", { className: "ea-approval", children: [_jsx("h3", { children: pendingApproval.title }), pendingApproval.applied ? (_jsxs("p", { className: "ea-approval__hint", children: [autosave ? copy.previewHintAutosave : copy.previewHint, pendingApproval.earlier?.length ? ` ${copy.refinedHint}` : ""] })) : null, pendingApproval.lines?.length ? (_jsx("div", { className: "ea-approval__review", children: _jsx(ProposalReview, { lines: pendingApproval.lines, language: uiLanguage(i18n.language) }) })) : (_jsx("ul", { className: "ea-approval__diff", children: pendingApproval.summary.split("\n").map((line, index) => line.startsWith("  ") ? (
                                 // biome-ignore lint/suspicious/noArrayIndexKey: lines are static for one approval
@@ -455,9 +471,10 @@ export function EditorAssistantAside() {
                                             void send(translate.prompt);
                                         }, size: "small", children: translate.label })) : null, visibleShortcuts.map((shortcut) => (_jsx(Button, { buttonStyle: "pill", disabled: status === "streaming", margin: false, onClick: () => {
                                             void send(shortcut.prompt);
-                                        }, size: "small", children: shortcut.label }, shortcut.id)))] })) : null, selection && bridge ? (_jsxs("div", { className: "ea-selection", children: [_jsxs("span", { className: "ea-selection__label", children: [copy.selected, ": ", _jsx("strong", { children: selection.label })] }), _jsx("button", { "aria-label": copy.clearSelection, className: "ea-selection__clear", type: "button", onClick: () => setSelection(null), children: _jsx(XIcon, {}) })] })) : null, _jsxs("div", { className: "ea-composer__box", children: [_jsx("textarea", { disabled: status === "streaming", placeholder: copy.placeholder, rows: 2, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: onKeyDown }), _jsx("div", { className: "ea-composer__bar", children: status === "streaming" ? (
-                                        // While the assistant works, Send becomes Stop, where the editor's eye already is.
-                                        _jsx(Button, { "aria-label": copy.stop, buttonStyle: "secondary", className: "ea-composer__stop", icon: _jsx("span", { className: "ea-stop-icon", "aria-hidden": "true" }), iconPosition: "left", margin: false, onClick: () => stop(), size: "medium", type: "button", children: copy.stop })) : (_jsx(Button, { buttonStyle: "primary", disabled: draft.trim() === "", margin: false, size: "medium", type: "submit", children: copy.send })) })] })] })] }))] }));
+                                        }, size: "small", children: shortcut.label }, shortcut.id)))] })) : null, selection && bridge ? (_jsxs("div", { className: "ea-selection", children: [_jsxs("span", { className: "ea-selection__label", children: [copy.selected, ": ", _jsx("strong", { children: selection.label })] }), _jsx("button", { "aria-label": copy.clearSelection, className: "ea-selection__clear", type: "button", onClick: () => setSelection(null), children: _jsx(XIcon, {}) })] })) : null, _jsxs("div", { className: "ea-composer__box", children: [attachments.input, attachments.preview, _jsx("textarea", { disabled: status === "streaming", placeholder: copy.placeholder, rows: 2, value: draft, onChange: (event) => setDraft(event.target.value), onKeyDown: onKeyDown, onPaste: attachments.onPaste }), _jsxs("div", { className: "ea-composer__bar", children: [_jsx(Button, { buttonStyle: "subtle", type: "button", margin: false, size: "small", disabled: status === "streaming" || attachments.preparing, onClick: attachments.choose, children: copy.attachImage }), status === "streaming" ? (
+                                            // While the assistant works, Send becomes Stop, where the editor's eye already is.
+                                            _jsx(Button, { "aria-label": copy.stop, buttonStyle: "secondary", className: "ea-composer__stop", icon: _jsx("span", { className: "ea-stop-icon", "aria-hidden": "true" }), iconPosition: "left", margin: false, onClick: () => stop(), size: "medium", type: "button", children: copy.stop })) : (_jsx(Button, { buttonStyle: "primary", disabled: attachments.preparing ||
+                                                    (draft.trim() === "" && attachments.images.length === 0), margin: false, size: "medium", type: "submit", children: copy.send }))] })] })] })] }))] }));
 }
 /** "Page · Home", with the locale when the project has more than one. */
 function contextLine(bridge, config) {

package/dist/components/ProposalReview.d.ts

@@ -6,6 +6,6 @@ type Props = {
     edits?: Record<string, string>;
     onEdit?: (path: string, value: string) => void;
 };
-/** One review layout for batch proposals and changes in the open form. */
+/** One review layout for batches, new drafts and changes in the open form. */
 export declare function ProposalReview(props: Props): import("react").JSX.Element;
 export {};

package/dist/components/ProposalReview.js

@@ -19,7 +19,7 @@ const COPY = {
         block: "Block",
     },
 };
-/** One review layout for batch proposals and changes in the open form. */
+/** One review layout for batches, new drafts and changes in the open form. */
 export function ProposalReview(props) {
     return (_jsx("div", { className: "ea-review", children: groupProposalLines(props.lines).map((node) => (_jsx(ReviewNodeItem, { node: node, props: props }, node.path))) }));
 }
@@ -40,7 +40,11 @@ function FieldReview({ lines, props }) {
     const copy = COPY[props.language];
     const label = line.label ?? line.edit?.label;
     const rich = line.richText;
-    const added = rich ? !hasRichText(rich.before) : line.edit ? !line.edit.before : false;
+    const added = rich
+        ? !hasRichText(rich.before)
+        : line.edit
+            ? !line.edit.before
+            : line.value !== undefined;
     const value = props.edits?.[line.path] ?? line.edit?.value ?? "";
-    return (_jsxs("div", { className: "ea-review__field", children: [label ? (_jsxs("div", { className: "ea-review__field-head", children: [_jsx("label", { htmlFor: line.edit && props.onEdit ? id : undefined, children: label }), added ? _jsx("span", { className: "ea-review__new", children: copy.added }) : null] })) : null, rich ? (_jsxs(_Fragment, { children: [hasRichText(rich.before) ? (_jsxs("details", { className: "ea-review__current", children: [_jsx("summary", { children: copy.current }), _jsx(RichTextPreview, { value: rich.before, language: props.language })] })) : null, _jsx("div", { className: "ea-review__preview", role: "region", "aria-label": `${label}: ${copy.suggested}`, children: hasRichText(rich.after) ? (_jsx(RichTextPreview, { value: rich.after, language: props.language })) : (_jsx("span", { children: copy.empty })) })] })) : line.edit ? (_jsxs(_Fragment, { children: [line.edit.before ? (_jsxs("details", { className: "ea-review__current", children: [_jsx("summary", { children: copy.current }), _jsx("p", { children: line.edit.before })] })) : null, props.onEdit ? (_jsx("textarea", { id: id, "aria-label": [line.context, label].filter(Boolean).join(" › "), disabled: !props.editable, onChange: (event) => props.onEdit?.(line.path, event.target.value), rows: 2, value: value })) : (_jsx("p", { className: "ea-review__value", children: value || copy.empty })), props.onEdit ? _jsx("span", { className: "ea-review__count", children: [...value].length }) : null] })) : (_jsx("div", { className: "ea-review__change", children: lines.map((line, index) => (_jsx("p", { children: line.text }, `${line.path}:${index}`))) }))] }));
+    return (_jsxs("div", { className: "ea-review__field", children: [label ? (_jsxs("div", { className: "ea-review__field-head", children: [_jsx("label", { htmlFor: line.edit && props.onEdit ? id : undefined, children: label }), added ? _jsx("span", { className: "ea-review__new", children: copy.added }) : null] })) : null, rich ? (_jsxs(_Fragment, { children: [hasRichText(rich.before) ? (_jsxs("details", { className: "ea-review__current", children: [_jsx("summary", { children: copy.current }), _jsx(RichTextPreview, { value: rich.before, language: props.language })] })) : null, _jsx("div", { className: "ea-review__preview", role: "region", "aria-label": `${label}: ${copy.suggested}`, children: hasRichText(rich.after) ? (_jsx(RichTextPreview, { value: rich.after, language: props.language })) : (_jsx("span", { children: copy.empty })) })] })) : line.edit ? (_jsxs(_Fragment, { children: [line.edit.before ? (_jsxs("details", { className: "ea-review__current", children: [_jsx("summary", { children: copy.current }), _jsx("p", { children: line.edit.before })] })) : null, props.onEdit ? (_jsx("textarea", { id: id, "aria-label": [line.context, label].filter(Boolean).join(" › "), disabled: !props.editable, onChange: (event) => props.onEdit?.(line.path, event.target.value), rows: 2, value: value })) : (_jsx("p", { className: "ea-review__value", children: value || copy.empty })), props.onEdit ? _jsx("span", { className: "ea-review__count", children: [...value].length }) : null] })) : line.value !== undefined ? (_jsx("p", { className: "ea-review__value", children: line.value || copy.empty })) : (_jsx("div", { className: "ea-review__change", children: lines.map((line, index) => (_jsx("p", { children: line.text }, `${line.path}:${index}`))) }))] }));
 }

package/dist/components/assistant-context.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from "react";
 import type { BatchScope, BatchTarget } from "../batch/targets.ts";
+import type { ChatImage } from "../chat-images.ts";
 import type { ProposalLine } from "../domain/propose.ts";
 import type { AssistantShortcut } from "../types.ts";
 import type { DomSelection } from "./selection-dom.ts";
@@ -65,6 +66,7 @@ export type AssistantMessage = {
         href: string;
         label: string;
     }>;
+    images?: ChatImage[];
 };
 type AssistantContextValue = {
     /** Whether the panel is shown. Closed at first; the browser remembers the choice. */

package/dist/components/chat-image-file.d.ts

@@ -0,0 +1,3 @@
+import { type ChatImage } from "../chat-images.ts";
+/** Decode before sending; resize large screenshots and keep all network bytes bounded. */
+export declare function prepareChatImage(file: File): Promise<ChatImage>;

package/dist/components/chat-image-file.js

@@ -0,0 +1,48 @@
+import { CHAT_IMAGE_TYPES, MAX_CHAT_IMAGE_BYTES } from "../chat-images.js";
+/** Decode before sending; resize large screenshots and keep all network bytes bounded. */
+export async function prepareChatImage(file) {
+    if (!CHAT_IMAGE_TYPES.includes(file.type) ||
+        file.size > 10 * 1024 * 1024) {
+        throw new Error("unsupported_image");
+    }
+    const bitmap = await createImageBitmap(file);
+    try {
+        if (file.size <= MAX_CHAT_IMAGE_BYTES && Math.max(bitmap.width, bitmap.height) <= 2048) {
+            return {
+                name: file.name.slice(0, 200),
+                mediaType: file.type,
+                data: await base64(file),
+            };
+        }
+        const scale = Math.min(1, 2048 / Math.max(bitmap.width, bitmap.height));
+        const canvas = document.createElement("canvas");
+        canvas.width = Math.max(1, Math.round(bitmap.width * scale));
+        canvas.height = Math.max(1, Math.round(bitmap.height * scale));
+        const context = canvas.getContext("2d");
+        if (!context)
+            throw new Error("unsupported_image");
+        context.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
+        for (const quality of [0.9, 0.75, 0.55]) {
+            const blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/webp", quality));
+            if (blob && blob.size <= MAX_CHAT_IMAGE_BYTES) {
+                return {
+                    name: file.name.slice(0, 200),
+                    mediaType: blob.type,
+                    data: await base64(blob),
+                };
+            }
+        }
+        throw new Error("image_too_large");
+    }
+    finally {
+        bitmap.close();
+    }
+}
+function base64(blob) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result).split(",")[1]);
+        reader.onerror = () => reject(new Error("unsupported_image"));
+        reader.readAsDataURL(blob);
+    });
+}

package/dist/components/conversation-store.js

@@ -1,3 +1,4 @@
+import { boundChatImages, CHAT_IMAGE_TYPES, isChatImage, MAX_CHAT_IMAGES, } from "../chat-images.js";
 /**
  * Conversations are kept in the browser, one per user and document, plus one for everything outside
  * a document (lists, dashboard). A document that is not saved yet has none of its own: its thread is
@@ -62,8 +63,21 @@ export function writeConversation(key, messages) {
             window.localStorage.removeItem(key.key);
             return;
         }
-        const stored = { savedAt: Date.now(), messages: messages.slice(-MAX_MESSAGES) };
-        window.localStorage.setItem(key.key, JSON.stringify(stored));
+        const stored = {
+            savedAt: Date.now(),
+            messages: boundChatImages(messages.slice(-MAX_MESSAGES)),
+        };
+        try {
+            window.localStorage.setItem(key.key, JSON.stringify(stored));
+        }
+        catch {
+            // Preserve text when other conversations have filled the browser's storage quota.
+            stored.messages = stored.messages.map((message) => ({
+                ...message,
+                images: message.images?.map(({ data: _data, ...metadata }) => metadata),
+            }));
+            window.localStorage.setItem(key.key, JSON.stringify(stored));
+        }
     }
     catch {
         // Not remembered (full or blocked storage); the thread still works for this page.
@@ -76,14 +90,20 @@ export function parseStored(raw, now) {
             return [];
         }
         return Array.isArray(stored.messages)
-            ? stored.messages.filter(isMessage).map((message) => ({
+            ? boundChatImages(stored.messages
+                .filter(isMessage)
+                .slice(-MAX_MESSAGES)
+                .map((message) => ({
                 id: message.id,
                 role: message.role,
                 text: message.text,
+                ...(message.role === "user" && Array.isArray(message.images)
+                    ? { images: message.images.filter(isStoredImage).slice(0, MAX_CHAT_IMAGES) }
+                    : {}),
                 candidates: Array.isArray(message.candidates)
                     ? message.candidates.filter(isCandidate)
                     : undefined,
-            }))
+            })))
             : [];
     }
     catch {
@@ -100,3 +120,13 @@ function isCandidate(value) {
     const candidate = value;
     return typeof candidate?.href === "string" && typeof candidate.label === "string";
 }
+function isStoredImage(value) {
+    if (isChatImage(value))
+        return true;
+    const image = value;
+    return Boolean(image &&
+        image.data === undefined &&
+        typeof image.name === "string" &&
+        image.name.length <= 200 &&
+        CHAT_IMAGE_TYPES.includes(image.mediaType));
+}

package/dist/components/copy.d.ts

@@ -12,6 +12,13 @@ export declare const COPY: {
         readonly collapseLabel: "Collapse assistant";
         readonly placeholder: "Message the assistant";
         readonly send: "Send";
+        readonly attachImage: "Add images";
+        readonly removeImage: "Remove image";
+        readonly imageOmitted: "Older image omitted";
+        readonly imagePreparing: "Preparing images…";
+        readonly imageLimit: "Attach up to three images per message.";
+        readonly imageTooLarge: "These images are too large. Try fewer or smaller images.";
+        readonly imageInvalid: "Choose a PNG, JPEG, WebP or GIF image up to 10 MB.";
         readonly stop: "Stop";
         readonly working: "Working…";
         readonly steps: {
@@ -75,6 +82,13 @@ export declare const COPY: {
         readonly collapseLabel: "Fäll ihop assistenten";
         readonly placeholder: "Skriv till assistenten";
         readonly send: "Skicka";
+        readonly attachImage: "Lägg till bilder";
+        readonly removeImage: "Ta bort bild";
+        readonly imageOmitted: "Äldre bild utelämnad";
+        readonly imagePreparing: "Förbereder bilder…";
+        readonly imageLimit: "Bifoga högst tre bilder per meddelande.";
+        readonly imageTooLarge: "Bilderna är för stora. Prova färre eller mindre bilder.";
+        readonly imageInvalid: "Välj en PNG-, JPEG-, WebP- eller GIF-bild på högst 10 MB.";
         readonly stop: "Stoppa";
         readonly working: "Arbetar…";
         readonly steps: {

package/dist/components/copy.js

@@ -13,6 +13,13 @@ export const COPY = {
         collapseLabel: "Collapse assistant",
         placeholder: "Message the assistant",
         send: "Send",
+        attachImage: "Add images",
+        removeImage: "Remove image",
+        imageOmitted: "Older image omitted",
+        imagePreparing: "Preparing images…",
+        imageLimit: "Attach up to three images per message.",
+        imageTooLarge: "These images are too large. Try fewer or smaller images.",
+        imageInvalid: "Choose a PNG, JPEG, WebP or GIF image up to 10 MB.",
         stop: "Stop",
         working: "Working…",
         steps: {
@@ -76,6 +83,13 @@ export const COPY = {
         collapseLabel: "Fäll ihop assistenten",
         placeholder: "Skriv till assistenten",
         send: "Skicka",
+        attachImage: "Lägg till bilder",
+        removeImage: "Ta bort bild",
+        imageOmitted: "Äldre bild utelämnad",
+        imagePreparing: "Förbereder bilder…",
+        imageLimit: "Bifoga högst tre bilder per meddelande.",
+        imageTooLarge: "Bilderna är för stora. Prova färre eller mindre bilder.",
+        imageInvalid: "Välj en PNG-, JPEG-, WebP- eller GIF-bild på högst 10 MB.",
         stop: "Stoppa",
         working: "Arbetar…",
         steps: {