@simmalugnt-se/payload-editor-assistant 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## 0.6.0
+
+- `media.view`: the assistant can look at the image of the open upload document, so it writes alt
+  texts from what the image shows. Allowed per upload collection. The server reads the saved file
+  with the editor's access (storage adapter handlers, then the upload directory, then a public
+  address fetched without credentials) and sends the image itself to the model, never a URL; the
+  smallest `imageSizes` entry at least 768px wide is used, and JPEG, PNG, WebP and GIF up to 5 MB.
+  The panel says "Looking at the image…" meanwhile. Without `media.view`, the assistant says it
+  cannot see an open image instead of describing it from the filename.
+
+- A reply that quotes its proposal is shown whole. A quote with a full stop or a word such as
+  "click", "save" or "spara" ("Click. Edit. Done.", "Spara 20 %") was split into sentences and
+  partly removed as if it claimed something about the panel.
+
+## 0.5.0
+
+- `next` is a required peer dependency: the panel imports `next/navigation`, so it never worked
+  without it.
+
+- Makes room in Admin: the panel is 320–400px wide depending on the window, and where fewer than
+  1440px would be left for Admin, Payload's nav and the panel take turns. Opening one closes the
+  other, which comes back when the first closes. While the assistant answers or a proposal waits for
+  Keep or Undo, opening the nav leaves the panel open.
+- Works with the content health work list: `?ask=<prompt>` on a document's address opens the
+  assistant with the prompt in the message box (the editor sends it), and a `content-health:select`
+  event selects a field like a preview click. The allowlisted collections are published as
+  `config.admin.custom.editorAssistant.collections`.
+
+- When the editor chats in one language and edits content in another, the first proposal says so
+  once, in a sentence the plugin adds; the model is no longer asked to, since it repeated it in
+  every reply or said it only in a later one.
+- The reply to a proposal offers it ("Jag föreslår en varmare rubrik.") instead of describing it as
+  done: the prompt asks for that, and a sentence saying a field "är nu"/"is now" something is left
+  out.
+
 ## 0.4.0
 
 - A suggestion in the form stays open while the editor writes on, so "shorter" or "another tone"

package/README.md

@@ -4,36 +4,36 @@ Context-aware AI assistant for Payload Admin. The editor asks for changes in a d
 proposes form changes the editor reviews and approves, within an allowlist of collections, globals,
 fields and capabilities.
 
-Requires Payload `>=3.87.1 <4`, Next 16, React 19, Node 22 and the AI SDK (`ai` 7) with a provider of
-your choice.
+Requires Payload `>=3.87.1 <4`, Next 16, React 19, Node 22 and the AI SDK (`ai` 7) with a model of
+your choice. Choose a model that reads images: the assistant is getting abilities, such as alt
+texts, that show it the image.
 
 ## Setup
 
-1. Install the plugin, the AI SDK and a provider (DeepSeek here; any AI SDK provider works):
+1. Install the plugin and the AI SDK. The AI SDK reaches models from many companies through Vercel
+   AI Gateway without another package; any other AI SDK provider works too:
 
    ```bash
-   pnpm add @simmalugnt-se/payload-editor-assistant ai @ai-sdk/deepseek
+   pnpm add @simmalugnt-se/payload-editor-assistant ai
    ```
 
-2. Put the provider's API key in the server environment, e.g. `.env.local` locally and the
-   hosting provider's environment variables in production. Never expose it to the browser
-   (no `NEXT_PUBLIC_` prefix):
+2. Put the gateway's API key in the server environment, e.g. `.env.local` locally. Never expose it
+   to the browser (no `NEXT_PUBLIC_` prefix). A site deployed on Vercel signs in to the gateway by
+   itself and needs no key:
 
    ```bash
-   DEEPSEEK_API_KEY=sk-...
+   AI_GATEWAY_API_KEY=...
    ```
 
-3. Create the model with that key and pass it to the plugin:
+3. Create the model and pass it to the plugin:
 
    ```ts
-   import { createDeepSeek } from "@ai-sdk/deepseek";
+   import { gateway } from "ai";
    import { editorAssistantPlugin } from "@simmalugnt-se/payload-editor-assistant";
 
-   const deepSeek = createDeepSeek({ apiKey: process.env.DEEPSEEK_API_KEY });
-
    plugins: [
      editorAssistantPlugin({
-       model: deepSeek("deepseek-chat"),
+       model: gateway("openai/gpt-6-luna"),
        collections: {
          pages: {
            capabilities: ["content.find", "content.findById", "form.read", "form.propose", "draft.create"],
@@ -51,21 +51,22 @@ your choice.
 ## API keys
 
 The plugin has no provider or key of its own: it only receives the `model` you create, and the model
-is called on the server. To switch provider, install another AI SDK provider and create the model
-with its key, e.g. `createAnthropic({ apiKey: process.env.ANTHROPIC_API_KEY })`.
-
-Providers also read a default environment variable (`DEEPSEEK_API_KEY`, `ANTHROPIC_API_KEY`, ...)
-when no `apiKey` is passed, but passing it explicitly keeps the connection visible in your config.
+is called on the server. To switch model, change the gateway model ID (see
+[the model list](https://vercel.com/ai-gateway/models)). To use a provider directly, install its AI
+SDK provider and create the model with its key, e.g.
+`createAnthropic({ apiKey: process.env.ANTHROPIC_API_KEY })`.
 
 If the key is wrong, the drawer says the AI service did not answer and the cause is logged on the
 server through Payload's logger.
 
 To keep the plugin installed without a key (its tables stay in your schema and migrations), let
 `model` be a function that returns `null` or `undefined` when there is nothing to call. The drawer then
-tells the editor that no AI model is set up, and a warning is logged:
+tells the editor that no AI model is set up, and a warning is logged. On Vercel the gateway needs no
+key, so check for that too:
 
 ```ts
-model: () => (process.env.DEEPSEEK_API_KEY ? deepSeek("deepseek-chat") : null),
+model: () =>
+  process.env.AI_GATEWAY_API_KEY || process.env.VERCEL ? gateway("openai/gpt-6-luna") : null,
 ```
 
 ## What the assistant may do
@@ -79,11 +80,29 @@ Nothing is reachable unless you list it. Each collection or global gets the capa
 | `form.read` | read the open edit form, including unsaved changes | no |
 | `form.propose` | put a change in the open form, where the editor keeps or undoes it | yes |
 | `draft.create` | create a new draft document (collections only) | yes |
+| `media.view` | look at the image of the open upload document (upload collections only) | no |
 
 The assistant never publishes. Form changes land in the open form and the editor saves as usual; an
 approved `draft.create` saves a new, unpublished draft. The `users` collection, Payload's own collections and fields that look like
 secrets (`password`, `token`, `apiKey`, ...) are always off limits.
 
+## Images and alt texts
+
+With `media.view` on an upload collection, the assistant can look at the open image and write its
+alt text, which the editor keeps or undoes like any other change:
+
+```ts
+collections: {
+  media: { capabilities: ["form.read", "form.propose", "media.view"] },
+},
+```
+
+The server reads the saved file with the editor's access (through the storage adapter, the upload
+directory, or the file's public address) and sends the image itself to the model, never its
+address. It uses the smallest of the collection's `imageSizes` at least 768px wide, else the
+original; JPEG, PNG, WebP and GIF up to 5 MB. Choose a model that reads images. Without
+`media.view` the assistant says it cannot see the image instead of guessing from the filename.
+
 ## Keep or undo
 
 A proposed form change goes straight into the open form, so the fields and Live Preview show it
@@ -112,6 +131,30 @@ clicks in the assistant keep it.
 Preview clicks need `@simmalugnt-se/payload-visual-editing` (0.2.0 or later), which announces them
 with a `visual-editing:select` event. Without it the selection follows the form only.
 
+## From the content health work list
+
+`@simmalugnt-se/payload-content-health` lists content issues and offers "Fix with the assistant" in
+the collections the assistant works in. The link opens the document with the field selected (a
+`content-health:select` event) and `?ask=<prompt>` in the address: the assistant opens with the
+prompt in the message box, and the editor sends it. A link alone never makes the assistant act.
+
+The plugin publishes its allowlisted collections as `config.admin.custom.editorAssistant.collections`
+so the work list knows where to offer it; the packages do not import each other.
+
+## Room for the panel
+
+The panel takes 320–400px of the window, depending on its width. Payload lays out Admin by the
+window's width and does not know about the panel. Where fewer than 1440px would be left for Admin
+(the width at which Payload closes its nav itself), the nav and the panel take turns: opening the
+panel closes the nav, opening the nav closes the panel, and the other comes back when you close it.
+While the assistant is answering or a proposal waits for **Keep** or **Undo**, opening the nav leaves
+the panel open, so the decision stays in view. Payload's saved nav preference and your own choice to
+show the panel are not changed.
+
+Live Preview splits the rest 40/60 between the form and the preview. From a 1440px window that leaves
+a usable form beside the preview; on smaller screens, open the preview in its own window with the
+external link button at the end of Live Preview's toolbar.
+
 ## While it works
 
 The panel shows what the assistant is doing (reading the form, searching content, preparing a

package/dist/capabilities.d.ts

@@ -1,10 +1,10 @@
-export declare const BUILTIN_CAPABILITIES: readonly ["admin.navigate", "schema.discover", "content.find", "content.findById", "form.read", "form.propose", "draft.create"];
+export declare const BUILTIN_CAPABILITIES: readonly ["admin.navigate", "schema.discover", "content.find", "content.findById", "form.read", "form.propose", "draft.create", "media.view"];
 export type BuiltinCapability = (typeof BUILTIN_CAPABILITIES)[number];
 export type CapabilityRisk = "auto" | "approval" | "forbidden";
 export declare const BUILTIN_RISK: Record<BuiltinCapability, CapabilityRisk>;
-export declare const EMBEDDED_ONLY_CAPABILITIES: Set<"admin.navigate" | "schema.discover" | "content.find" | "content.findById" | "form.read" | "form.propose" | "draft.create">;
-export declare const MCP_ELIGIBLE_CAPABILITIES: Set<"admin.navigate" | "schema.discover" | "content.find" | "content.findById" | "form.read" | "form.propose" | "draft.create">;
-export declare const ENTITY_CAPABILITIES: readonly ["content.find", "content.findById", "form.read", "form.propose", "draft.create"];
+export declare const EMBEDDED_ONLY_CAPABILITIES: Set<"admin.navigate" | "schema.discover" | "content.find" | "content.findById" | "form.read" | "form.propose" | "draft.create" | "media.view">;
+export declare const MCP_ELIGIBLE_CAPABILITIES: Set<"admin.navigate" | "schema.discover" | "content.find" | "content.findById" | "form.read" | "form.propose" | "draft.create" | "media.view">;
+export declare const ENTITY_CAPABILITIES: readonly ["content.find", "content.findById", "form.read", "form.propose", "draft.create", "media.view"];
 export type EntityCapability = (typeof ENTITY_CAPABILITIES)[number];
 export declare function isEntityCapability(value: string): value is EntityCapability;
 export declare function isBuiltinCapability(value: string): value is BuiltinCapability;

package/dist/capabilities.js

@@ -6,6 +6,7 @@ export const BUILTIN_CAPABILITIES = [
     "form.read",
     "form.propose",
     "draft.create",
+    "media.view",
 ];
 export const BUILTIN_RISK = {
     "admin.navigate": "auto",
@@ -15,11 +16,13 @@ export const BUILTIN_RISK = {
     "form.read": "auto",
     "form.propose": "approval",
     "draft.create": "approval",
+    "media.view": "auto",
 };
 export const EMBEDDED_ONLY_CAPABILITIES = new Set([
     "admin.navigate",
     "form.read",
     "form.propose",
+    "media.view",
 ]);
 export const MCP_ELIGIBLE_CAPABILITIES = new Set([
     "schema.discover",
@@ -33,6 +36,7 @@ export const ENTITY_CAPABILITIES = [
     "form.read",
     "form.propose",
     "draft.create",
+    "media.view",
 ];
 const ENTITY_CAPABILITY_SET = new Set(ENTITY_CAPABILITIES);
 export function isEntityCapability(value) {

package/dist/components/EditorAssistantAside.js

@@ -11,7 +11,7 @@ import { COPY, uiLanguage } from "./copy.js";
 import { isFormProposal, proposalSteps, refineProposal, replaceLatestStep, } from "./proposal-chain.js";
 import { KEEP_SELECTION_ATTR } from "./selection-dom.js";
 export function EditorAssistantAside() {
-    const { open, setOpen, status, messages, shortcuts, collections, bridge, formAdapter, pendingApproval, selection, setSelection, resetConversation, setStatus, setMessages, setPendingApproval, stop, setAbortController, } = useAssistantState();
+    const { open, setOpen, status, messages, shortcuts, collections, bridge, formAdapter, pendingApproval, selection, setSelection, prefill, setPrefill, resetConversation, setStatus, setMessages, setPendingApproval, stop, setAbortController, } = useAssistantState();
     const { config, getEntityConfig } = useConfig();
     const router = useRouter();
     const locale = useLocale();
@@ -24,6 +24,13 @@ export function EditorAssistantAside() {
     const view = parseAdminView(pathname ?? "", config.routes.admin);
     const visibleShortcuts = shortcuts.filter((shortcut) => shortcutMatches(shortcut, view));
     const [draft, setDraft] = useState("");
+    // A ready prompt replaces the draft; it is only sent when the editor sends it.
+    useEffect(() => {
+        if (prefill !== null) {
+            setDraft(prefill);
+            setPrefill(null);
+        }
+    }, [prefill, setPrefill]);
     const threadRef = useRef(null);
     /** Whether the editor typed in the form while a preview was in it; undo would discard that. */
     const editedSinceRef = useRef(false);

package/dist/components/EditorAssistantDocumentBridge.js

@@ -2,16 +2,18 @@
 import { useDocumentForm, useDocumentInfo, useFormModified, useLocale } from "@payloadcms/ui";
 import { useEffect, useRef } from "react";
 import { useAssistantState } from "./assistant-context.js";
-import { selectionFromElement, selectionFromPath, VISUAL_EDITING_SELECT_EVENT, } from "./selection-dom.js";
+import { ASK_PARAM, CONTENT_HEALTH_SELECT_EVENT, selectionFromElement, selectionFromPath, VISUAL_EDITING_SELECT_EVENT, } from "./selection-dom.js";
 /** Collapsed rows render their labels only once visual editing has opened them. */
 const RELABEL_MS = [150, 500, 1200];
 export function EditorAssistantDocumentBridge() {
-    const { setBridge, setFormAdapter, setSelection } = useAssistantState();
+    const { setBridge, setFormAdapter, setOpen, setPrefill, setSelection } = useAssistantState();
     const documentInfo = useDocumentInfo();
     const locale = useLocale();
     const modified = useFormModified();
     const form = useDocumentForm();
     const formRef = useRef(form);
+    // Kept across effect re-runs: the parameter is gone from the address after the first read.
+    const asked = useRef(false);
     useEffect(() => {
         formRef.current = form;
     });
@@ -25,8 +27,27 @@ export function EditorAssistantDocumentBridge() {
             setFormAdapter(null);
         };
     }, [setFormAdapter]);
+    // A work list link (`?ask=`) opens the panel with a ready prompt. The editor sends it, so a
+    // link alone never makes the assistant act. The parameter is removed once read.
+    useEffect(() => {
+        if (asked.current) {
+            return;
+        }
+        asked.current = true;
+        const url = new URL(window.location.href);
+        const prompt = url.searchParams.get(ASK_PARAM)?.trim();
+        if (prompt === undefined) {
+            return;
+        }
+        url.searchParams.delete(ASK_PARAM);
+        window.history.replaceState(window.history.state, "", url);
+        if (prompt) {
+            setPrefill(prompt);
+            setOpen(true);
+        }
+    }, [setOpen, setPrefill]);
     // "This" in the editor's message is what they last clicked or focused: a field, a block or a row,
-    // in the form or (through visual editing) in the preview. Clicks elsewhere in Admin clear it;
+    // in the form, (through visual editing) in the preview, or brought into view by content health. Clicks elsewhere in Admin clear it;
     // clicks in the assistant itself keep it, so the editor can click, then type.
     useEffect(() => {
         let relabel = [];
@@ -65,11 +86,13 @@ export function EditorAssistantDocumentBridge() {
         document.addEventListener("pointerdown", onInteract, true);
         document.addEventListener("focusin", onInteract);
         window.addEventListener(VISUAL_EDITING_SELECT_EVENT, onPreviewSelect);
+        window.addEventListener(CONTENT_HEALTH_SELECT_EVENT, onPreviewSelect);
         return () => {
             cancelRelabel();
             document.removeEventListener("pointerdown", onInteract, true);
             document.removeEventListener("focusin", onInteract);
             window.removeEventListener(VISUAL_EDITING_SELECT_EVENT, onPreviewSelect);
+            window.removeEventListener(CONTENT_HEALTH_SELECT_EVENT, onPreviewSelect);
             setSelection(null);
         };
     }, [setSelection]);

package/dist/components/EditorAssistantProvider.js

@@ -5,11 +5,13 @@ import "../styles/assistant.css";
 import { AssistantStateProvider, useAssistantState } from "./assistant-context.js";
 import { ChangedFieldsHighlight } from "./ChangedFieldsHighlight.js";
 import { EditorAssistantAside } from "./EditorAssistantAside.js";
+import { useNavRoom } from "./nav-room.js";
 export function EditorAssistantProvider({ children, shortcuts = [], collections = [], }) {
     const { user } = useAuth();
     return (_jsx(AssistantStateProvider, { shortcuts: shortcuts, collections: collections, userId: user?.id, children: user ? _jsx(EditorAssistantShell, { children: children }) : children }));
 }
 function EditorAssistantShell({ children }) {
     const { open } = useAssistantState();
+    useNavRoom();
     return (_jsxs("div", { className: open ? "ea-root" : "ea-root ea-root--closed", children: [_jsx("div", { className: "ea-main", children: children }), _jsx(EditorAssistantAside, {}), _jsx(ChangedFieldsHighlight, {})] }));
 }

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

@@ -68,11 +68,17 @@ type AssistantContextValue = {
     pendingApproval: PendingApproval | null;
     /** What the editor last clicked or focused in the open form. */
     selection: DomSelection | null;
-    setOpen: (open: boolean) => void;
+    /** A prompt to put in the message box, e.g. from a work list link; the panel takes it once. */
+    prefill: string | null;
+    /** `remember: false` when the panel makes way on its own (see nav-room.ts), not the editor. */
+    setOpen: (open: boolean, options?: {
+        remember?: boolean;
+    }) => void;
     setBridge: (bridge: DocumentBridgeSnapshot | null) => void;
     setFormAdapter: (adapter: FormAdapter | null) => void;
     setPendingApproval: (pending: PendingApproval | null) => void;
     setSelection: (selection: DomSelection | null) => void;
+    setPrefill: (prefill: string | null) => void;
     setStatus: (status: AssistantChromeStatus) => void;
     setMessages: (updater: (current: AssistantMessage[]) => AssistantMessage[]) => void;
     resetConversation: () => void;

package/dist/components/assistant-context.js

@@ -12,14 +12,17 @@ export function AssistantStateProvider({ children, shortcuts, collections, userI
     const [pendingApproval, setPendingApproval] = useState(null);
     const [abortController, setAbortController] = useState(null);
     const [selection, setSelection] = useState(null);
+    const [prefill, setPrefill] = useState(null);
     // Read after mount, so the server render (closed) and the first client render agree.
     useEffect(() => {
         if (readStoredOpen())
             setOpenState(true);
     }, []);
-    const setOpen = useCallback((next) => {
+    const setOpen = useCallback((next, { remember = true } = {}) => {
         setOpenState(next);
-        storeOpen(next);
+        if (remember) {
+            storeOpen(next);
+        }
     }, []);
     // One conversation per document: switching documents stores the thread and loads the next one.
     // An open proposal belongs to the form it was made for, so it does not follow; an unfinished
@@ -72,11 +75,13 @@ export function AssistantStateProvider({ children, shortcuts, collections, userI
         formAdapter,
         pendingApproval,
         selection,
+        prefill,
         setOpen,
         setBridge,
         setFormAdapter,
         setPendingApproval,
         setSelection,
+        setPrefill,
         setStatus,
         setMessages,
         resetConversation,
@@ -93,6 +98,7 @@ export function AssistantStateProvider({ children, shortcuts, collections, userI
         formAdapter,
         pendingApproval,
         selection,
+        prefill,
         setOpen,
         resetConversation,
         stop,

package/dist/components/copy.d.ts

@@ -19,6 +19,7 @@ export declare const COPY: {
             readonly searching: "Searching the content…";
             readonly reading: "Reading a document…";
             readonly reading_form: "Reading the form…";
+            readonly viewing: "Looking at the image…";
             readonly proposing: "Preparing the change…";
             readonly drafting: "Preparing the draft…";
             readonly navigating: "Finding the page…";
@@ -81,6 +82,7 @@ export declare const COPY: {
             readonly searching: "Söker bland innehållet…";
             readonly reading: "Läser ett dokument…";
             readonly reading_form: "Läser formuläret…";
+            readonly viewing: "Tittar på bilden…";
             readonly proposing: "Förbereder ändringen…";
             readonly drafting: "Förbereder utkastet…";
             readonly navigating: "Letar upp sidan…";

package/dist/components/copy.js

@@ -20,6 +20,7 @@ export const COPY = {
             searching: "Searching the content…",
             reading: "Reading a document…",
             reading_form: "Reading the form…",
+            viewing: "Looking at the image…",
             proposing: "Preparing the change…",
             drafting: "Preparing the draft…",
             navigating: "Finding the page…",
@@ -82,6 +83,7 @@ export const COPY = {
             searching: "Söker bland innehållet…",
             reading: "Läser ett dokument…",
             reading_form: "Läser formuläret…",
+            viewing: "Tittar på bilden…",
             proposing: "Förbereder ändringen…",
             drafting: "Förbereder utkastet…",
             navigating: "Letar upp sidan…",

package/dist/components/nav-room.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Where Admin is too narrow for both, Payload's nav and the panel take turns: whichever the editor
+ * opened last stays, and the other comes back when it closes.
+ *
+ * - Opening the panel closes the nav; closing the panel opens it again.
+ * - Opening the nav closes the panel; closing the nav opens it again. Not while the assistant
+ *   answers or a proposal waits for Keep or Undo: then both stay, so the decision stays in view.
+ *
+ * Payload's saved nav preference and the editor's own panel choice are not changed.
+ */
+export declare function useNavRoom(): void;

package/dist/components/nav-room.js

@@ -0,0 +1,94 @@
+"use client";
+import { useNav } from "@payloadcms/ui";
+import { useEffect, useRef, useState } from "react";
+import { useAssistantState } from "./assistant-context.js";
+/**
+ * Payload lays out Admin by the window's width, not knowing the panel takes part of it. It closes
+ * its nav at 1440px and below; with the panel open, the space left is that narrow up to 1840px
+ * (the panel is `clamp(320px, 22vw, 400px)` wide, see assistant.css). Keep the two in step.
+ */
+const LEAVES_NARROW_ADMIN = "(max-width: 1840px)";
+/**
+ * Where Admin is too narrow for both, Payload's nav and the panel take turns: whichever the editor
+ * opened last stays, and the other comes back when it closes.
+ *
+ * - Opening the panel closes the nav; closing the panel opens it again.
+ * - Opening the nav closes the panel; closing the nav opens it again. Not while the assistant
+ *   answers or a proposal waits for Keep or Undo: then both stay, so the decision stays in view.
+ *
+ * Payload's saved nav preference and the editor's own panel choice are not changed.
+ */
+export function useNavRoom() {
+    const { navOpen, setNavOpen } = useNav();
+    const { open, setOpen, status, pendingApproval } = useAssistantState();
+    const busy = status === "streaming" || pendingApproval !== null;
+    const [narrow, setNarrow] = useState(false);
+    const navOpenRef = useRef(navOpen);
+    navOpenRef.current = navOpen;
+    /** The editor opened the nav with its toggler (not Payload restoring it on load). */
+    const editorOpenedNav = useRef(false);
+    /** The nav was opened while the panel was busy; leave it open until the panel closes. */
+    const navKept = useRef(false);
+    const closedNav = useRef(false);
+    const closedPanel = useRef(false);
+    useEffect(() => {
+        const query = window.matchMedia(LEAVES_NARROW_ADMIN);
+        const update = () => setNarrow(query.matches);
+        update();
+        query.addEventListener("change", update);
+        return () => query.removeEventListener("change", update);
+    }, []);
+    useEffect(() => {
+        const onClick = (event) => {
+            if (event.target instanceof Element &&
+                event.target.closest(".nav-toggler") &&
+                !navOpenRef.current) {
+                editorOpenedNav.current = true;
+            }
+        };
+        document.addEventListener("click", onClick, true);
+        return () => document.removeEventListener("click", onClick, true);
+    }, []);
+    useEffect(() => {
+        if (!navOpen) {
+            editorOpenedNav.current = false;
+            navKept.current = false;
+            if (closedPanel.current) {
+                closedPanel.current = false;
+                setOpen(true, { remember: false });
+            }
+            return;
+        }
+        if (!open || !narrow) {
+            editorOpenedNav.current = false;
+            return;
+        }
+        if (editorOpenedNav.current) {
+            editorOpenedNav.current = false;
+            if (busy) {
+                navKept.current = true;
+            }
+            else {
+                closedNav.current = false;
+                closedPanel.current = true;
+                setOpen(false, { remember: false });
+            }
+            return;
+        }
+        // The panel opened, or Payload opened the nav from the saved preference after the page loaded.
+        if (!navKept.current) {
+            closedNav.current = true;
+            setNavOpen(false);
+        }
+    }, [open, narrow, navOpen, busy, setNavOpen, setOpen]);
+    useEffect(() => {
+        if (open) {
+            return;
+        }
+        if (closedNav.current) {
+            setNavOpen(true);
+        }
+        closedNav.current = false;
+        navKept.current = false;
+    }, [open, setNavOpen]);
+}

package/dist/components/selection-dom.d.ts

@@ -5,6 +5,10 @@
  */
 /** Visual editing announces preview clicks with this event: `detail: { path }`, `path: null` when cleared. */
 export declare const VISUAL_EDITING_SELECT_EVENT = "visual-editing:select";
+/** Content health announces a field it brought into view from a work list link: `detail: { path }`. */
+export declare const CONTENT_HEALTH_SELECT_EVENT = "content-health:select";
+/** Edit view parameter from content health's work list: a prompt to put in the message box. */
+export declare const ASK_PARAM = "ask";
 /** Visual editing keeps its preview outline when the editor clicks inside this attribute. */
 export declare const KEEP_SELECTION_ATTR = "data-visual-editing-keep-selection";
 export type DomSelection = {

package/dist/components/selection-dom.js

@@ -5,6 +5,10 @@
  */
 /** Visual editing announces preview clicks with this event: `detail: { path }`, `path: null` when cleared. */
 export const VISUAL_EDITING_SELECT_EVENT = "visual-editing:select";
+/** Content health announces a field it brought into view from a work list link: `detail: { path }`. */
+export const CONTENT_HEALTH_SELECT_EVENT = "content-health:select";
+/** Edit view parameter from content health's work list: a prompt to put in the message box. */
+export const ASK_PARAM = "ask";
 /** Visual editing keeps its preview outline when the editor clicks inside this attribute. */
 export const KEEP_SELECTION_ATTR = "data-visual-editing-keep-selection";
 export function selectionFromElement(element) {

package/dist/config/validate.js

@@ -39,6 +39,9 @@ function validateEntityMap(kind, map, rules) {
             if (capability === "draft.create" && !rules.allowDraftCreate) {
                 throw new Error(`payload-editor-assistant: globals cannot enable draft.create ("${slug}").`);
             }
+            if (capability === "media.view" && kind === "globals") {
+                throw new Error(`payload-editor-assistant: media.view is for upload collections, not globals ("${slug}").`);
+            }
         }
         validateFields(entry, `${kind} "${slug}"`);
     }

package/dist/domain/media.d.ts

@@ -0,0 +1,40 @@
+import type { PayloadRequest } from "payload";
+import type { ValidatedEditorAssistantOptions } from "../config/validate.ts";
+export declare const MAX_IMAGE_BYTES: number;
+export type ImageSource = {
+    filename: string;
+    mimeType: string;
+    width?: number;
+    url?: string;
+};
+export type MediaViewResult = {
+    ok: true;
+    data: {
+        filename: string;
+        width?: number;
+        height?: number;
+        alt?: unknown;
+    };
+    image: {
+        mediaType: string;
+        data: string;
+    };
+} | {
+    ok: false;
+    error: string;
+    message: string;
+};
+/**
+ * The image file to show the model: the smallest of Payload's `imageSizes` at least
+ * `PREFERRED_WIDTH` wide, otherwise the original.
+ */
+export declare function pickImageSource(doc: Record<string, unknown>): ImageSource | null;
+/**
+ * Reads the image of a saved upload document with the editor's access, the way Payload serves it:
+ * the storage adapter's handlers first, then the file in `staticDir`, then a public URL fetched
+ * without the editor's credentials.
+ */
+export declare function viewMedia(req: PayloadRequest, options: ValidatedEditorAssistantOptions, input: {
+    collection?: string;
+    documentId?: string | number;
+}): Promise<MediaViewResult>;

package/dist/domain/media.js

@@ -0,0 +1,165 @@
+import { readFile, stat } from "node:fs/promises";
+import path from "node:path";
+import { findCollectionConfig } from "../schema/discover.js";
+import { hasCapability, resolveAllowlist } from "./allowlist.js";
+import { localApi } from "./local-api.js";
+/** Image types the AI SDK's providers take; SVG, AVIF and HEIC are left out. */
+const READABLE_TYPES = new Set(["image/jpeg", "image/png", "image/webp", "image/gif"]);
+/** Enough detail for an alt text without sending a full-size original. */
+const PREFERRED_WIDTH = 768;
+export const MAX_IMAGE_BYTES = 5 * 1024 * 1024;
+const FETCH_TIMEOUT_MS = 10_000;
+/**
+ * The image file to show the model: the smallest of Payload's `imageSizes` at least
+ * `PREFERRED_WIDTH` wide, otherwise the original.
+ */
+export function pickImageSource(doc) {
+    const original = asSource(doc);
+    const sizes = Object.values(asRecord(doc.sizes) ?? {})
+        .map((size) => asSource(asRecord(size) ?? {}))
+        .filter((size) => size !== null && (size.width ?? 0) >= PREFERRED_WIDTH)
+        .sort((a, b) => (a.width ?? 0) - (b.width ?? 0));
+    return sizes[0] ?? original;
+}
+/**
+ * Reads the image of a saved upload document with the editor's access, the way Payload serves it:
+ * the storage adapter's handlers first, then the file in `staticDir`, then a public URL fetched
+ * without the editor's credentials.
+ */
+export async function viewMedia(req, options, input) {
+    const resolved = resolveAllowlist(options, { collection: input.collection });
+    if (!resolved || !hasCapability(resolved.allowlist, "media.view")) {
+        return {
+            ok: false,
+            error: "tool_denied",
+            message: "Images in this collection are not allowlisted.",
+        };
+    }
+    const config = input.collection ? findCollectionConfig(req, input.collection) : undefined;
+    if (!config?.upload) {
+        return { ok: false, error: "tool_denied", message: "This collection holds no uploads." };
+    }
+    if (input.documentId === undefined) {
+        return {
+            ok: false,
+            error: "unsupported_media",
+            message: "The image is not saved yet. Ask the editor to save it first.",
+        };
+    }
+    let doc;
+    try {
+        doc = await localApi(req).findByID({
+            collection: resolved.slug,
+            id: input.documentId,
+            depth: 0,
+            draft: true,
+            req,
+            user: req.user,
+            overrideAccess: false,
+        });
+    }
+    catch {
+        return { ok: false, error: "tool_denied", message: "Document is not accessible." };
+    }
+    const source = pickImageSource(doc);
+    if (!source || !READABLE_TYPES.has(source.mimeType)) {
+        return {
+            ok: false,
+            error: "unsupported_media",
+            message: "This file is not an image the assistant can look at (JPEG, PNG, WebP or GIF).",
+        };
+    }
+    const bytes = await readSource(req, resolved.slug, config.upload, source, doc.prefix);
+    if (!bytes.ok) {
+        return bytes;
+    }
+    return {
+        ok: true,
+        data: {
+            filename: String(doc.filename),
+            width: asNumber(doc.width),
+            height: asNumber(doc.height),
+            alt: doc.alt,
+        },
+        image: { mediaType: source.mimeType, data: bytes.data.toString("base64") },
+    };
+}
+async function readSource(req, collection, uploadConfig, source, prefix) {
+    const upload = (asRecord(uploadConfig) ?? {});
+    const tooLarge = {
+        ok: false,
+        error: "unsupported_media",
+        message: "The image is too large for the assistant to look at.",
+    };
+    const unreadable = {
+        ok: false,
+        error: "unsupported_media",
+        message: "The image file could not be read.",
+    };
+    try {
+        for (const handler of upload.handlers ?? []) {
+            const response = await handler(req, {
+                doc: undefined,
+                headers: new Headers(),
+                params: {
+                    collection,
+                    filename: source.filename,
+                    prefix: typeof prefix === "string" && prefix ? prefix : undefined,
+                },
+            });
+            if (response instanceof Response) {
+                return response.ok ? await readResponse(response, tooLarge) : unreadable;
+            }
+        }
+        if (!upload.disableLocalStorage) {
+            const dir = path.resolve(upload.staticDir || collection);
+            const file = path.resolve(dir, source.filename);
+            if (!file.startsWith(dir + path.sep)) {
+                return unreadable;
+            }
+            const info = await stat(file).catch(() => null);
+            if (info?.isFile()) {
+                return info.size > MAX_IMAGE_BYTES ? tooLarge : { ok: true, data: await readFile(file) };
+            }
+        }
+        // Storage without handlers serves files from a public address of its own.
+        if (source.url && /^https?:\/\//i.test(source.url)) {
+            const response = await fetch(source.url, {
+                credentials: "omit",
+                redirect: "error",
+                signal: AbortSignal.timeout(FETCH_TIMEOUT_MS),
+            });
+            return response.ok ? await readResponse(response, tooLarge) : unreadable;
+        }
+    }
+    catch {
+        return unreadable;
+    }
+    return unreadable;
+}
+async function readResponse(response, tooLarge) {
+    const length = Number(response.headers.get("content-length"));
+    if (length > MAX_IMAGE_BYTES) {
+        return tooLarge;
+    }
+    const data = Buffer.from(await response.arrayBuffer());
+    return data.length > MAX_IMAGE_BYTES ? tooLarge : { ok: true, data };
+}
+function asSource(record) {
+    if (typeof record.filename !== "string" || !record.filename)
+        return null;
+    if (typeof record.mimeType !== "string")
+        return null;
+    return {
+        filename: record.filename,
+        mimeType: record.mimeType,
+        width: asNumber(record.width),
+        url: typeof record.url === "string" ? record.url : undefined,
+    };
+}
+function asRecord(value) {
+    return value && typeof value === "object" ? value : undefined;
+}
+function asNumber(value) {
+    return typeof value === "number" ? value : undefined;
+}

package/dist/package-name.d.ts

@@ -5,3 +5,8 @@ export declare const DEFAULT_AUDIT_SLUG = "editor-assistant-audit";
 export declare const DEFAULT_APPROVAL_SLUG = "editor-assistant-approvals";
 export declare const CSRF_COOKIE = "payload-editor-assistant-csrf";
 export declare const CSRF_HEADER = "x-editor-assistant-csrf";
+/**
+ * `config.admin.custom[ADMIN_CUSTOM_KEY] = { collections }`: the allowlisted collections, for other
+ * plugins (content health's work list) to know where the assistant works without importing it.
+ */
+export declare const ADMIN_CUSTOM_KEY = "editorAssistant";

package/dist/package-name.js

@@ -5,3 +5,8 @@ export const DEFAULT_AUDIT_SLUG = "editor-assistant-audit";
 export const DEFAULT_APPROVAL_SLUG = "editor-assistant-approvals";
 export const CSRF_COOKIE = "payload-editor-assistant-csrf";
 export const CSRF_HEADER = "x-editor-assistant-csrf";
+/**
+ * `config.admin.custom[ADMIN_CUSTOM_KEY] = { collections }`: the allowlisted collections, for other
+ * plugins (content health's work list) to know where the assistant works without importing it.
+ */
+export const ADMIN_CUSTOM_KEY = "editorAssistant";

package/dist/plugin.js

@@ -6,7 +6,7 @@ import { createChatEndpoint } from "./endpoints/chat.js";
 import { createCsrfEndpoint } from "./endpoints/csrf.js";
 import { createDecideEndpoint } from "./endpoints/decide.js";
 import { createProposeEndpoint } from "./endpoints/propose.js";
-import { CLIENT_ENTRY, DEFAULT_APPROVAL_SLUG } from "./package-name.js";
+import { ADMIN_CUSTOM_KEY, CLIENT_ENTRY, DEFAULT_APPROVAL_SLUG } from "./package-name.js";
 export function editorAssistantPlugin(options = {}) {
     const validated = validateEditorAssistantOptions(options);
     return (config) => {
@@ -19,6 +19,10 @@ export function editorAssistantPlugin(options = {}) {
             if (collection.auth && validated.collections[collection.slug]) {
                 throw new Error(`payload-editor-assistant: auth collection "${collection.slug}" cannot be allowlisted.`);
             }
+            if (!collection.upload &&
+                validated.collections[collection.slug]?.capabilities.includes("media.view")) {
+                throw new Error(`payload-editor-assistant: media.view needs an upload collection; "${collection.slug}" is not one.`);
+            }
             if (validated.collections[collection.slug]) {
                 collections[index] = withDocumentBridge(collection);
             }
@@ -40,6 +44,11 @@ export function editorAssistantPlugin(options = {}) {
             ...config,
             admin: {
                 ...config.admin,
+                // Read by @simmalugnt-se/payload-content-health, which offers the assistant only here.
+                custom: {
+                    ...config.admin?.custom,
+                    [ADMIN_CUSTOM_KEY]: { collections: Object.keys(validated.collections) },
+                },
                 components: {
                     ...config.admin?.components,
                     providers: [

package/dist/runtime/agent.d.ts

@@ -33,7 +33,7 @@ type ChatMessage = {
     text: string;
 };
 /** What the assistant is doing right now, for the panel to show while the turn runs. */
-export type AgentStep = "thinking" | "searching" | "reading" | "reading_form" | "proposing" | "drafting" | "navigating" | "writing";
+export type AgentStep = "thinking" | "searching" | "reading" | "reading_form" | "viewing" | "proposing" | "drafting" | "navigating" | "writing";
 export type AgentEvent = {
     type: "step";
     step: AgentStep;
@@ -46,15 +46,18 @@ export type AgentEvent = {
     }>["pendingApproval"]>;
 };
 export type AgentEventSink = (event: AgentEvent) => void;
-export declare function runAgentTurn(req: PayloadRequest, options: ValidatedEditorAssistantOptions, input: {
+type TurnInput = {
     message: string;
     messages?: ChatMessage[];
     bridge: ToolContext["bridge"];
     formData?: Record<string, unknown>;
     onEvent?: AgentEventSink;
-}): Promise<AgentChatResult>;
+};
+export declare function runAgentTurn(req: PayloadRequest, options: ValidatedEditorAssistantOptions, input: TurnInput): Promise<AgentChatResult>;
 export declare function collectResult(text: string, result: {
     steps?: unknown;
     toolResults?: unknown;
 }, captured: ToolOutcome[], locale: string, expectedProposal?: boolean, previews?: Map<string, ProposalPreview>): AgentChatResult;
+/** Whether a reply in the conversation already said which language the content is in. */
+export declare function contentLanguageNoted(history: ChatMessage[], bridge: Pick<ToolContext["bridge"], "locale">): boolean;
 export {};

package/dist/runtime/agent.js

@@ -2,8 +2,8 @@ import { PACKAGE_NAME } from "../package-name.js";
 import { loadTurnContext } from "./context.js";
 import { needsProposeRetry } from "./propose-loop.js";
 import { buildSystemPrompt } from "./system-prompt.js";
-import { executeTool, fromProviderToolName, TOOL_DESCRIPTIONS, TOOL_JSON_SCHEMAS, toProviderToolName, } from "./tools.js";
-import { editorFacingText } from "./voice.js";
+import { executeTool, fromProviderToolName, TOOL_DESCRIPTIONS, TOOL_JSON_SCHEMAS, toolModelOutput, toProviderToolName, } from "./tools.js";
+import { contentLanguageNote, editorFacingText } from "./voice.js";
 const MAX_MESSAGES = 20;
 const MAX_STEPS = 8;
 const TIMEOUT_MS = 60_000;
@@ -12,11 +12,28 @@ const STEP_FOR_TOOL = {
     "content.find": "searching",
     "content.findById": "reading",
     "form.read": "reading_form",
+    "media.view": "viewing",
     "form.propose": "proposing",
     "draft.create": "drafting",
     "admin.navigate": "navigating",
 };
 export async function runAgentTurn(req, options, input) {
+    const result = await generateTurn(req, options, input);
+    if (!result.ok || result.pendingApproval?.capability !== "form.propose") {
+        return result;
+    }
+    // The first change written in another language than the chat's says so, once per conversation.
+    // Asked to in the prompt, models said it in every reply, or only in a later one.
+    const chat = input.bridge.language ?? input.bridge.locale;
+    const note = contentLanguageNote(chat, input.bridge.locale);
+    const history = input.messages ?? [];
+    if (!note ||
+        contentLanguageNoted([...history, { role: "assistant", text: result.text }], input.bridge)) {
+        return result;
+    }
+    return { ...result, text: `${note} ${result.text}` };
+}
+async function generateTurn(req, options, input) {
     const emit = (event) => {
         try {
             input.onEvent?.(event);
@@ -212,7 +229,8 @@ function buildSdkTools(ai, ctx, captured, previews, emit) {
                         type: "step",
                         step: executed.ok && executed.pendingApproval ? "writing" : "thinking",
                     });
-                    captured.push(outcome);
+                    // The image goes to the model through toModelOutput; Admin never needs the bytes.
+                    captured.push(outcome.ok ? { ...outcome, image: undefined } : outcome);
                     return outcome;
                 }
                 catch {
@@ -226,10 +244,21 @@ function buildSdkTools(ai, ctx, captured, previews, emit) {
                     return outcome;
                 }
             },
+            toModelOutput: ({ output }) => toolModelOutput(output),
         });
     }
     return tools;
 }
+/** Names of the content language as the editor would read them, in either chat language. */
+const LANGUAGE_NAMES = {
+    en: /\b(English)\b|engelska/i,
+    sv: /\b(Swedish)\b|svenska/i,
+};
+/** Whether a reply in the conversation already said which language the content is in. */
+export function contentLanguageNoted(history, bridge) {
+    const name = LANGUAGE_NAMES[bridge.locale.split("-")[0]];
+    return Boolean(name && history.some((message) => message.role === "assistant" && name.test(message.text)));
+}
 function truncateMessages(messages) {
     if (messages.length <= MAX_MESSAGES) {
         return messages;

package/dist/runtime/system-prompt.js

@@ -7,7 +7,7 @@ export function buildSystemPrompt(instructions, bridge, turnContext) {
         "Two to five short sentences. Use visible field labels (Title, Headline, Summary).",
         "Never ask whether you should proceed. When you have the new values, call form.propose in the same turn.",
         "If the editor confirms a change you already described, call form.propose with those values. Do not ask again.",
-        'When you call form.propose, the change is shown in the form and preview for the editor to keep or undo. Then say in one short sentence what you changed ("Här är en kortare rubrik."). Never say it is saved, published or kept, and do not tell them to approve or click anything; the panel does that. Without a form.propose call, do not claim the form has new values.',
+        'When you call form.propose, the change is shown in the form and preview for the editor to keep or undo. Then offer it in one short sentence, as a suggestion rather than something done: "Here is a shorter headline." or "Jag föreslår en varmare rubrik." Never write that a field "is now" or "är nu" something. Never say it is saved, published or kept, and do not tell them to approve or click anything; the panel does that. Without a form.propose call, do not claim the form has new values.',
         "If form.propose fails, say you could not apply it and they can try again. Never tell them to copy-paste.",
         "When the editor asks you to create a document, call draft.create in the same turn with sensible content based on their request. Do not ask for a title or summary first; they review the draft before it is created.",
         "Never save, publish, unpublish, delete, bulk-mutate, or upload files.",
@@ -30,10 +30,22 @@ function openDocumentLine(bridge, turnContext) {
         const sources = turnContext?.otherLanguages
             ? " Other language versions of this same page are in the quoted context. If the editor asks to fill or translate empty fields, call form.propose with text written in the open language. Translate from the source language; do not copy the source wording unless they asked to copy it unchanged. Do not ask them to paste. Do not say the source is missing if it is in the context. If a layout block already exists, set its empty text fields; do not insert a new block."
             : "";
-        return `The editor is looking at ${title} in ${language}. Do not ask them which document it is.${sources}${selectionLine(turnContext)}`;
+        return `The editor is looking at ${title} in ${language}. Do not ask them which document it is.${sources}${imageLine(bridge, turnContext)}${selectionLine(turnContext)}`;
     }
     return `${viewLine(turnContext)}No document is open. You can search, navigate, or create a draft. Form edits need an open document.`;
 }
+/** Without seeing the image, a model writes alt texts from the filename; say when it can look. */
+function imageLine(bridge, turnContext) {
+    const entry = turnContext?.allowlist.find((entity) => entity.kind === "collection" && entity.slug === bridge.collection);
+    if (entry?.capabilities.includes("media.view")) {
+        return ' The open document may be an image. You cannot see it until you call media.view. Before writing an alt text, a caption or anything about what the image shows, call media.view in this turn; never guess from the filename. An alt text says in one sentence, under 125 characters, what the image shows and what matters in it, without starting with "image of" or "bild av".';
+    }
+    const mimeType = turnContext?.form?.mimeType;
+    if (typeof mimeType === "string" && mimeType.startsWith("image/")) {
+        return " The open document is an image you cannot see. Never write an alt text or describe what it shows; tell the editor you cannot look at images here.";
+    }
+    return "";
+}
 function selectionLine(turnContext) {
     const selection = turnContext?.selection;
     if (!selection) {
@@ -70,10 +82,7 @@ function thisTurnBlock(bridge, turnContext) {
     ];
     if (locale) {
         const content = languageName(locale);
-        lines.push(`Write every field value in ${content}; that is the language version being edited.`);
-        if (content !== languageName(chat)) {
-            lines.push(`The editor chats in ${languageName(chat)}, so say in one short sentence that the content is written in ${content}.`);
-        }
+        lines.push(`Write every field value in ${content}; that is the language version being edited. Do not point out which language the content is in; the panel does that.`);
     }
     const selection = turnContext?.selection;
     if (selection) {

package/dist/runtime/tools.d.ts

@@ -51,6 +51,11 @@ export type ToolSuccess = {
     };
     /** For Admin only; the agent keeps it out of what the model sees. */
     preview?: ProposalPreview;
+    /** For the model only, as a file part (see `toolModelOutput`); never sent to Admin. */
+    image?: {
+        mediaType: string;
+        data: string;
+    };
 };
 export type ToolFailure = {
     ok: false;
@@ -65,3 +70,24 @@ export declare const TOOL_DESCRIPTIONS: Record<string, string>;
 export declare function toProviderToolName(capability: string): string;
 export declare function fromProviderToolName(name: string): string;
 export declare function executeTool(name: string, input: Record<string, unknown>, ctx: ToolContext): Promise<ToolOutcome>;
+/** What the model gets back from a tool: an image as a file part next to the rest as text. */
+export declare function toolModelOutput(outcome: ToolOutcome): {
+    type: "json";
+    value: ToolOutcome;
+} | {
+    type: "content";
+    value: ({
+        type: "text";
+        text: string;
+        mediaType?: undefined;
+        data?: undefined;
+    } | {
+        type: "file";
+        mediaType: string;
+        data: {
+            type: "data";
+            data: string;
+        };
+        text?: undefined;
+    })[];
+};

package/dist/runtime/tools.js

@@ -1,5 +1,6 @@
 import { writeAudit } from "../domain/audit.js";
 import { findContent, findContentById } from "../domain/content.js";
+import { viewMedia } from "../domain/media.js";
 import { canNavigate, navigateAdmin } from "../domain/navigate.js";
 import { proposeChange } from "../domain/propose.js";
 import { discoverSchema, entityFields } from "../schema/discover.js";
@@ -31,6 +32,10 @@ export const TOOL_JSON_SCHEMAS = {
         type: "object",
         properties: {},
     },
+    "media.view": {
+        type: "object",
+        properties: {},
+    },
     "admin.navigate": {
         type: "object",
         additionalProperties: false,
@@ -66,6 +71,7 @@ export const TOOL_DESCRIPTIONS = {
     "content.find": "Search or list allowlisted documents by title, slug, or id. Omit query to list recent documents. Returns identity only, not a summary.",
     "content.findById": "Read one allowlisted document or global. Pass locale to read another language of the same document. For the currently open form, prefer form.read.",
     "form.read": "Read the currently open unsaved form in the current language. No document ID needed.",
+    "media.view": "Look at the image of the open media document. Call it before writing or judging an alt text, caption or anything else about what the image shows. No document ID needed.",
     "form.propose": 'Stage a structured patch against the open unsaved form in the current language. Call this as soon as you have the new field values. Do not ask the editor to confirm in chat; they approve in the panel. Example: {"op":"set","path":"layout.0.headline","value":"Välkommen"}. Requires editor approval.',
     "admin.navigate": "Navigate Admin to an allowlisted collection, global, or unique document match.",
     "draft.create": 'Stage creation of one draft document. Requires editor approval. Never publishes. The document starts empty: set top-level fields with {"op":"set","path":"title","value":"Start"}, and add each layout block with {"op":"blocks.insert","path":"layout","index":0,"blockType":"hero","data":{"headline":"Välkommen"}} using only block types and fields from the quoted context. Rich text fields take plain text.',
@@ -115,6 +121,17 @@ export async function executeTool(name, input, ctx) {
             const projected = projectRecord(ctx.formData ?? {}, fields, ctx.options.redact, ctx.bridge.collection ?? ctx.bridge.global);
             return { ok: true, capability: name, data: projected };
         }
+        case "media.view": {
+            // Only the open document: its id comes from the bridge, never from the model.
+            const viewed = await viewMedia(ctx.req, ctx.options, {
+                collection: ctx.bridge.collection,
+                documentId: ctx.bridge.documentId,
+            });
+            if (!viewed.ok) {
+                return { ok: false, capability: name, error: viewed.error, message: viewed.message };
+            }
+            return { ok: true, capability: name, data: viewed.data, image: viewed.image };
+        }
         case "admin.navigate": {
             if (!canNavigate(ctx.options)) {
                 return {
@@ -179,6 +196,24 @@ export async function executeTool(name, input, ctx) {
             return { ok: false, capability: name, error: "tool_denied", message: "Unknown tool." };
     }
 }
+/** What the model gets back from a tool: an image as a file part next to the rest as text. */
+export function toolModelOutput(outcome) {
+    if (!outcome.ok || !outcome.image) {
+        return { type: "json", value: outcome };
+    }
+    const { image, ...rest } = outcome;
+    return {
+        type: "content",
+        value: [
+            { type: "text", text: JSON.stringify(rest) },
+            {
+                type: "file",
+                mediaType: image.mediaType,
+                data: { type: "data", data: image.data },
+            },
+        ],
+    };
+}
 function wrap(capability, result) {
     if (!result.ok) {
         return { ok: false, capability, error: result.error, message: result.message };

package/dist/runtime/voice.d.ts

@@ -10,3 +10,5 @@ export declare function stripInternalSpeech(text: string, locale: string): strin
 export declare function withoutOverclaims(text: string): string;
 export declare function approvalCopy(locale: string, capability: "form.propose" | "draft.create"): string;
 export declare function couldNotStageCopy(locale: string): string;
+/** Tells the editor the content is written in another language than the one they chat in. */
+export declare function contentLanguageNote(chat: string, contentLocale: string): string | undefined;

package/dist/runtime/voice.js

@@ -32,11 +32,12 @@ export function stripInternalSpeech(text, locale) {
     return kept.join(" ").replace(/\s+/g, " ").trim();
 }
 /** Keeping, saving and publishing are the editor's; a sentence that claims or asks for them goes. */
-const OVERCLAIM = /godkänn|godkann|approve|spara|sparat|sparad|sparats|publicer|\bsaved?\b|publish|behåll|\bkeep\b|klicka|\bclick/i;
+const OVERCLAIM = /godkänn|godkann|approve|spara|sparat|sparad|sparats|publicer|\bsaved?\b|publish|behåll|\bkeep\b|klicka|\bclick|(?:^|\s)är nu\b|\bis now\b/i;
 const MAX_OWN_TEXT = 600;
 export function withoutOverclaims(text) {
     const kept = splitSentences(text)
-        .filter((sentence) => !OVERCLAIM.test(sentence))
+        // A quoted proposal ("Spara 20 %") is the editor's content, not a claim about the panel.
+        .filter((sentence) => !OVERCLAIM.test(withoutQuotes(sentence)))
         .join(" ")
         .trim();
     return kept.length <= MAX_OWN_TEXT ? kept : "";
@@ -62,9 +63,55 @@ function doneCopy(locale) {
 function isSwedish(locale) {
     return locale === "sv" || locale.startsWith("sv-");
 }
+const QUOTES = '"“”„«»';
+const QUOTED = /["“”„«»][^"“”„«»]*["“”„«»]/g;
+/**
+ * Sentences, keeping a quoted proposal ("Click. Edit. Done.") inside the sentence that quotes it.
+ * A line with an unclosed quote is split as if it had none, so the quote cannot hide a claim.
+ */
 function splitSentences(text) {
     return text
-        .split(/(?<=[.!?])\s+|\n+/)
+        .split(/\n+/)
+        .flatMap((line) => {
+        const quotes = [...line].filter((char) => QUOTES.includes(char)).length;
+        if (quotes % 2 !== 0) {
+            return line.split(/(?<=[.!?])\s+/);
+        }
+        const sentences = [];
+        let start = 0;
+        let quoted = false;
+        for (let i = 0; i < line.length; i++) {
+            const char = line[i] ?? "";
+            if (QUOTES.includes(char)) {
+                quoted = !quoted;
+            }
+            else if (!quoted && /\s/.test(char) && /[.!?]["“”»]?$/.test(line.slice(start, i))) {
+                sentences.push(line.slice(start, i));
+                start = i + 1;
+            }
+        }
+        sentences.push(line.slice(start));
+        return sentences;
+    })
         .map((part) => part.trim())
         .filter(Boolean);
 }
+function withoutQuotes(sentence) {
+    return sentence.replace(QUOTED, "");
+}
+const CONTENT_LANGUAGE = {
+    en: { sv: "engelska", en: "English" },
+    sv: { sv: "svenska", en: "Swedish" },
+};
+/** Tells the editor the content is written in another language than the one they chat in. */
+export function contentLanguageNote(chat, contentLocale) {
+    const content = contentLocale.split("-")[0];
+    const inChat = isSwedish(chat) ? "sv" : "en";
+    const name = CONTENT_LANGUAGE[content]?.[inChat];
+    if (!name || content === chat.split("-")[0]) {
+        return undefined;
+    }
+    return inChat === "sv"
+        ? `Innehållet skrivs på ${name}, eftersom det är den språkversionen du redigerar.`
+        : `The content is written in ${name}, since that is the language version you are editing.`;
+}

package/dist/styles/assistant.css

@@ -1,5 +1,6 @@
 .ea-root {
-  --ea-aside-width: 400px;
+  /* Narrower on smaller screens, so Admin keeps room. nav-room.ts depends on these numbers. */
+  --ea-aside-width: clamp(320px, 22vw, 400px);
   position: fixed;
   inset: 0;
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simmalugnt-se/payload-editor-assistant",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "description": "Context-aware editor assistant plugin for Payload Admin",
   "keywords": [
     "payload",
@@ -47,11 +47,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "peerDependenciesMeta": {
-    "next": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@payloadcms/ui": "3.90.2",
     "@types/node": "^22",