@materializecms/server 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -4,6 +4,21 @@ Ogni versione, dalla più recente. Le novità in arrivo si scrivono sotto «Pros
 
 ## Prossima versione
 
+## 0.4.0 — 2026-11-03
+
+- **Immagini di riferimento nell'assistente**: allega, incolla (⌘V) o trascina nella chat lo screenshot di un sito che ti piace, un mockup o uno schizzo, e l'assistente ne riprende impaginazione e atmosfera con le sezioni e lo stile del tuo sito. Fino a 4 immagini per messaggio; non vanno nella libreria e non finiscono sulla pagina.
+- **Conversazioni con l'assistente più solide**: un secondo messaggio dopo aver cambiato la selezione sulla tela non fallisce più, e ogni nuovo messaggio rilegge dalla cache tutta la conversazione precedente, così costa una frazione.
+- **L'assistente costa meno**: con Claude usa la cache dei prompt, così istruzioni, strumenti e pagina, rimandati a ogni passaggio, si pagano a una frazione del prezzo dopo il primo.
+- **Azioni rapide più economiche**: ✨ sui testi, SEO e testo alternativo usano Claude Haiku 5.5, molto più economico di Opus; l'assistente e le traduzioni delle pagine restano sul modello principale. Si può scegliere un altro modello in Impostazioni → AI e MCP.
+- **Uso dell'AI del mese** in Impostazioni → AI e MCP: richieste, token letti (e quanti dalla cache) e scritti, per tenere d'occhio la spesa.
+- **AI sul testo formattato**: il pulsante ✨ c'è anche nel corpo degli articoli, e riscrive, accorcia o traduce mantenendo titoli, elenchi, grassetti, link e immagini.
+- **✨ sulla tela mantiene grassetti, corsivi e link** di un testo, nell'Inspector e in modalità Contenuto.
+- **Accorcia e Allunga più affidabili**: chiedono una lunghezza precisa (circa un terzo in meno, circa la metà in più), così un testo breve non torna quasi uguale e uno da allungare non diventa sette volte più lungo.
+- **L'AI rispetta la lunghezza dei campi**: un testo riscritto non supera più il massimo del campo (prima, per esempio, un sommario di 220 caratteri poteva arrivare a 234 e bloccare la pubblicazione).
+- **Descrivi con l'AI conserva i crediti**: il testo alternativo nuovo mantiene il credito della foto già scritto, come «foto di … su Unsplash», e la sua lingua.
+- **Nastri con i bordi sfumati**: le lettere che scendono sotto la riga (g, p, y) non vengono più tagliate in basso.
+- **Indirizzi del pannello scritti a mano**: `/admin/media`, `/admin/persone` e `/admin/impostazioni` portano alla sezione giusta, se nessuna raccolta ha quel nome.
+
 ## 0.3.0 — 2026-11-01
 
 - **Backup fuori dal server**, ogni notte e cifrati, su uno spazio S3 compatibile (Cloudflare R2, Backblaze B2, Hetzner, Amazon S3…) o in una cartella WebDAV (Nextcloud, NAS Synology e QNAP…). Si attiva in Impostazioni → Backup; `materialize decrypt` rende di nuovo leggibili i file scaricati.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@materializecms/server",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Il server di Materialize: API, accessi, media, backup, aggiornamenti dal pannello e server MCP.",
   "type": "module",
   "license": "MIT",
@@ -20,9 +20,9 @@
   "dependencies": {
     "@anthropic-ai/sdk": "1.3.0",
     "@hono/node-server": "2.1.5",
-    "@materializecms/admin": "0.3.0",
-    "@materializecms/core": "0.3.0",
-    "@materializecms/db": "0.3.0",
+    "@materializecms/admin": "0.4.0",
+    "@materializecms/core": "0.4.0",
+    "@materializecms/db": "0.4.0",
     "@modelcontextprotocol/sdk": "1.32.2",
     "hono": "4.13.14",
     "htmlparser2": "12.0.0",

package/src/ai.d.ts

@@ -11,9 +11,29 @@ export interface AiSettings {
     baseUrl: string;
     /** Empty: the default (Claude Opus 5.5 for Anthropic). */
     model: string;
+    /**
+     * For the quick actions (✨ on a text, SEO, alternative text). Empty: Claude Haiku 5.5 for
+     * Anthropic, the main model for a compatible server.
+     */
+    fastModel?: string;
+    /** Told the tokens of every request (never saved). */
+    onUsage?: (usage: AiUsage) => void;
+}
+/** The tokens of one or more requests: what the provider bills. */
+export interface AiUsage {
+    requests: number;
+    /** Read at full price. */
+    input: number;
+    output: number;
+    /** Read from the prompt cache, at a fraction of the price. */
+    cacheRead: number;
+    /** Written to the prompt cache, at a little more than the full price. */
+    cacheWrite: number;
 }
 export declare const EMPTY_AI: AiSettings;
 export declare const DEFAULT_CLAUDE = "claude-opus-5-5";
+/** Short, one-shot texts: a fraction of Opus's price, quality enough for them. */
+export declare const DEFAULT_CLAUDE_FAST = "claude-haiku-5-5";
 /** Raised when the AI cannot answer: not set up, refused, or the provider failed. */
 export declare class AiError extends Error {
 }
@@ -22,12 +42,19 @@ export declare function publicAi(s: AiSettings | null): {
     provider: 'anthropic' | 'openai';
     baseUrl: string;
     model: string;
+    fastModel?: string;
+    onUsage?: (usage: AiUsage) => void;
     hasKey: boolean;
     envKey: boolean;
     ready: boolean;
 };
 /** Claude needs a key (saved, or ANTHROPIC_API_KEY); a compatible server needs an address and a model. */
 export declare function isReady(s: AiSettings | null): s is AiSettings;
+/** A picture sent to the model: base64, in one of the formats every provider reads. */
+export interface AiImage {
+    mime: 'image/png' | 'image/jpeg' | 'image/webp';
+    data: string;
+}
 /** Progress of an assistant turn, sent to the panel as it happens. */
 export type AiEvent = {
     type: 'status';
@@ -45,7 +72,10 @@ export interface Conversation {
     provider: AiSettings['provider'];
     messages: unknown[];
 }
-/** Text in, text out: a rewrite, a translation, an alt text (with an image). */
+/**
+ * Text in, text out: a rewrite, a translation, an alt text (with an image). `fast`: on the model
+ * for the quick actions.
+ */
 export declare function complete(s: AiSettings, input: {
     system: string;
     prompt: string;
@@ -53,6 +83,7 @@ export declare function complete(s: AiSettings, input: {
         data: string;
         mime: string;
     };
+    fast?: boolean;
 }): Promise<string>;
 /**
  * One turn of the assistant: the person's message, then as many tool calls as the model needs
@@ -61,10 +92,13 @@ export declare function complete(s: AiSettings, input: {
 export declare function runTurn(s: AiSettings, conv: Conversation, input: {
     system: string;
     text: string;
+    /** Pictures attached to the message: references to look at, not files for the site. */
+    images?: AiImage[];
     tools: SiteTool[];
     onEvent: (e: AiEvent) => void;
     maxSteps?: number;
 }): Promise<string>;
+export declare const fastModelOf: (s: AiSettings) => string;
 /**
  * Translates a page's texts in batches, keeping their order: each batch goes out as a JSON list
  * and must come back as a list of the same length. Marks like <b>, <i> and <a1> stay in place.

package/src/ai.js

@@ -1,8 +1,10 @@
 import Anthropic from '@anthropic-ai/sdk';
 import { z } from 'zod';
 import { ToolError } from './tools.js';
-export const EMPTY_AI = { provider: 'anthropic', apiKey: '', baseUrl: '', model: '' };
+export const EMPTY_AI = { provider: 'anthropic', apiKey: '', baseUrl: '', model: '', fastModel: '' };
 export const DEFAULT_CLAUDE = 'claude-opus-5-5';
+/** Short, one-shot texts: a fraction of Opus's price, quality enough for them. */
+export const DEFAULT_CLAUDE_FAST = 'claude-haiku-5-5';
 /** Raised when the AI cannot answer: not set up, refused, or the provider failed. */
 export class AiError extends Error {
 }
@@ -18,8 +20,13 @@ export function isReady(s) {
         return !!process.env.ANTHROPIC_API_KEY;
     return s.provider === 'anthropic' ? !!(s.apiKey || process.env.ANTHROPIC_API_KEY) : !!(s.baseUrl && s.model);
 }
-/** Text in, text out: a rewrite, a translation, an alt text (with an image). */
+/**
+ * Text in, text out: a rewrite, a translation, an alt text (with an image). `fast`: on the model
+ * for the quick actions.
+ */
 export async function complete(s, input) {
+    if (input.fast)
+        s = { ...s, model: fastModelOf(s) };
     if (s.provider === 'openai') {
         const content = input.image
             ? [
@@ -54,6 +61,8 @@ export async function complete(s, input) {
             },
         ],
     });
+    if (message.stop_reason === 'refusal')
+        throw new AiError('La richiesta è stata rifiutata dal modello.');
     return textOf(message).trim();
 }
 /**
@@ -61,6 +70,7 @@ export async function complete(s, input) {
  * (at most `maxSteps`), then its answer. The conversation keeps everything for the next turn.
  */
 export async function runTurn(s, conv, input) {
+    const images = input.images ?? [];
     const byName = new Map(input.tools.map((t) => [t.name, t]));
     const runTool = async (name, raw) => {
         const t = byName.get(name);
@@ -87,7 +97,15 @@ export async function runTurn(s, conv, input) {
             function: { name: t.name, description: t.description, parameters: schemaOf(t) },
         }));
         const messages = conv.messages;
-        messages.push({ role: 'user', content: input.text });
+        messages.push({
+            role: 'user',
+            content: images.length
+                ? [
+                    ...images.map((i) => ({ type: 'image_url', image_url: { url: `data:${i.mime};base64,${i.data}` } })),
+                    { type: 'text', text: input.text },
+                ]
+                : input.text,
+        });
         for (let step = 0; step < maxSteps; step++) {
             const reply = await openaiChat(s, { messages: [{ role: 'system', content: input.system }, ...messages], tools });
             messages.push(reply);
@@ -117,14 +135,31 @@ export async function runTurn(s, conv, input) {
         input_schema: schemaOf(t),
     }));
     const messages = conv.messages;
-    messages.push({ role: 'user', content: input.text });
+    messages.push({
+        role: 'user',
+        content: images.length
+            ? [
+                ...images.map((i) => ({
+                    type: 'image',
+                    source: { type: 'base64', media_type: i.mime, data: i.data },
+                })),
+                { type: 'text', text: input.text },
+            ]
+            : input.text,
+    });
+    // Each step sends the instructions, the tools and the whole conversation again (the page read
+    // with get_page included): from the cache they cost a fraction. A fixed point after the
+    // instructions and tools, and the automatic one at the end of the conversation, which moves
+    // forward step by step.
+    const system = [{ type: 'text', text: input.system, cache_control: { type: 'ephemeral' } }];
     for (let step = 0; step < maxSteps; step++) {
         const message = await claude(s, {
             max_tokens: 16000,
             output_config: { effort: 'medium' },
             // Progress notes between tool calls, so the panel can say what is happening.
             ...(updatesSupported(s) ? { thinking: { type: 'adaptive', display: 'updates' } } : {}),
-            system: input.system,
+            cache_control: { type: 'ephemeral' },
+            system,
             tools,
             messages,
         });
@@ -151,6 +186,7 @@ export async function runTurn(s, conv, input) {
 /** Models that take the server-side fallback on a refusal and progress notes between tool calls. */
 const CURRENT = /^claude-(opus-5-5|opus-5|sonnet-5-5|fable-5-1)$/;
 const modelOf = (s) => s.model.trim() || DEFAULT_CLAUDE;
+export const fastModelOf = (s) => s.fastModel?.trim() || (s.provider === 'anthropic' ? DEFAULT_CLAUDE_FAST : s.model.trim());
 const updatesSupported = (s) => /^claude-(opus-5-5|sonnet-5-5|fable-5-1|fable-5)$/.test(modelOf(s));
 async function claude(s, params) {
     const client = new Anthropic({ apiKey: s.apiKey || undefined, baseURL: s.baseUrl || undefined });
@@ -163,12 +199,20 @@ async function claude(s, params) {
     if ('thinking' in params && params.thinking?.display === 'updates')
         betas.push('thinking-display-updates-2026-08-18');
     try {
-        return await client.beta.messages.create({
+        const message = await client.beta.messages.create({
             ...params,
             model,
             ...(betas.length ? { betas } : {}),
             ...(fallback ? { fallbacks: 'default' } : {}),
         });
+        s.onUsage?.({
+            requests: 1,
+            input: message.usage.input_tokens,
+            output: message.usage.output_tokens,
+            cacheRead: message.usage.cache_read_input_tokens ?? 0,
+            cacheWrite: message.usage.cache_creation_input_tokens ?? 0,
+        });
+        return message;
     }
     catch (error) {
         if (error instanceof Anthropic.AuthenticationError)
@@ -179,6 +223,9 @@ async function claude(s, params) {
             throw new AiError(`Il modello “${model}” non esiste.`);
         if (error instanceof Anthropic.RateLimitError)
             throw new AiError('Troppe richieste ad Anthropic: riprova tra poco.');
+        // The reasoning of earlier turns no longer fits the conversation (it was changed underneath).
+        if (error instanceof Anthropic.BadRequestError && /thinking/i.test(error.message))
+            throw new AiError('Questa conversazione non può continuare: iniziane una nuova con ↺ in alto.');
         if (error instanceof Anthropic.BadRequestError)
             throw new AiError(`Richiesta non valida: ${error.message}`);
         if (error instanceof Anthropic.APIError)
@@ -214,6 +261,17 @@ async function openaiChat(s, body) {
     const json = (await res.json().catch(() => null));
     if (!res.ok)
         throw new AiError(json?.error?.message ?? `Il server AI ha risposto ${res.status}.`);
+    if (json?.usage) {
+        // Cached tokens are part of the prompt tokens here: the rest is the full-price part.
+        const cached = json.usage.prompt_tokens_details?.cached_tokens ?? 0;
+        s.onUsage?.({
+            requests: 1,
+            input: (json.usage.prompt_tokens ?? 0) - cached,
+            output: json.usage.completion_tokens ?? 0,
+            cacheRead: cached,
+            cacheWrite: 0,
+        });
+    }
     const message = json?.choices?.[0]?.message;
     if (!message)
         throw new AiError('Il server AI ha dato una risposta vuota.');

package/src/app.js

@@ -1743,11 +1743,29 @@ export function createApp(base) {
     // A form on the site: the message is kept, and sent by email when email is set up.
     // ---------- AI: settings, text actions and the editor's assistant ----------
     const aiSettings = async () => ({ ...EMPTY_AI, ...(await settings.get('ai')) });
+    const thisMonth = () => new Date().toISOString().slice(0, 7);
+    const monthUsage = async () => {
+        const saved = await settings.get('ai-usage');
+        const month = thisMonth();
+        return saved?.month === month ? saved : { month, requests: 0, input: 0, output: 0, cacheRead: 0, cacheWrite: 0 };
+    };
+    // One write at a time: the steps of a turn and parallel requests all count.
+    let usageWrites = Promise.resolve();
+    const countUsage = (u) => {
+        usageWrites = usageWrites
+            .then(async () => {
+            const total = await monthUsage();
+            for (const k of ['requests', 'input', 'output', 'cacheRead', 'cacheWrite'])
+                total[k] += u[k];
+            await settings.set('ai-usage', total);
+        })
+            .catch((error) => console.error(error));
+    };
     const readyAi = async () => {
         const ai = await aiSettings();
         if (!isReady(ai))
             throw new ApiError(400, 'ai_not_configured', 'L’AI non è configurata: Impostazioni → AI e MCP');
-        return ai;
+        return { ...ai, onUsage: countUsage };
     };
     const aiFailed = (error) => {
         if (error instanceof AiError)
@@ -1757,7 +1775,7 @@ export function createApp(base) {
     const allowAi = createLimiter(40, 60_000);
     app.get('/api/ai', requireUser, async (c) => {
         const ai = await aiSettings();
-        return c.json(c.get('user').role === 'admin' ? { ai: publicAi(ai) } : { ai: { ready: isReady(ai) } });
+        return c.json(c.get('user').role === 'admin' ? { ai: publicAi(ai), usage: await monthUsage() } : { ai: { ready: isReady(ai) } });
     });
     app.put('/api/ai', requireUser, requireSession, requireAdmin, async (c) => {
         const input = await body(c, z.object({
@@ -1767,6 +1785,7 @@ export function createApp(base) {
                 apiKey: z.string().max(500).nullable().optional(),
                 baseUrl: z.union([z.url().max(500), z.literal('')]),
                 model: z.string().trim().max(120),
+                fastModel: z.string().trim().max(120).default(''),
             }),
         }));
         const before = await aiSettings();
@@ -1778,13 +1797,16 @@ export function createApp(base) {
     });
     app.post('/api/ai/test', requireUser, requireSession, requireAdmin, async (c) => {
         const ai = await readyAi();
-        const reply = await complete(ai, { system: 'Answer with one short word.', prompt: 'Say: ok' }).catch(aiFailed);
+        const probe = { system: 'Answer with one short word.', prompt: 'Say: ok' };
+        // Both models: a wrong name for the quick actions shows up here, not at the first ✨.
+        const reply = await complete(ai, probe).catch(aiFailed);
+        await complete(ai, { ...probe, fast: true }).catch(aiFailed);
         return c.json({ ok: true, reply });
     });
     const TEXT_ACTIONS = {
         rewrite: 'Rewrite it so it reads better: same meaning, similar length.',
-        shorten: 'Make it shorter, keeping what matters.',
-        expand: 'Make it a little longer and richer, without inventing facts.',
+        shorten: 'Make it shorter, keeping what matters most.',
+        expand: 'Make it longer and richer, without inventing facts.',
         fix: 'Fix spelling, grammar and punctuation only; change nothing else.',
         formal: 'Make the tone more formal and professional.',
         friendly: 'Make the tone warmer and more conversational.',
@@ -1801,6 +1823,10 @@ export function createApp(base) {
             src: z.string().max(1000).optional(),
             /** The site's language, for texts written from scratch. */
             locale: z.string().max(20).optional(),
+            /** rich: the text is rich text as lines of markup (richTextMarkup), and so is the reply. */
+            format: z.enum(['plain', 'rich']).default('plain'),
+            /** The most characters the field takes. */
+            max: z.number().int().positive().max(100_000).optional(),
         }));
         if (!allowAi(c.get('user').id))
             throw new ApiError(429, 'too_many_requests', 'Troppe richieste: aspetta un minuto');
@@ -1813,9 +1839,14 @@ export function createApp(base) {
             if (!file)
                 throw new ApiError(400, 'no_image', 'Scegli prima un’immagine della libreria');
             const data = (await readFile(file.path)).toString('base64');
+            // The text already there may credit the photographer or the source: that part stays.
+            const current = input.text.trim()
+                ? `\n\nThe current alternative text is:\n<text>\n${input.text}\n</text>\nWrite in its language. If it credits a photographer, an author or a source (such as "photo by … on Unsplash"), keep that credit at the end, in the same form.`
+                : '';
             const text = await complete(ai, {
                 system,
-                prompt: `Write the alternative text (alt) for this image on a website, in the language with code "${lang}": one sentence, at most 125 characters, describing what matters for someone who cannot see it. No "image of".`,
+                fast: true,
+                prompt: `Write the alternative text (alt) for this image on a website, in the language with code "${lang}"${current ? ' unless said otherwise below' : ''}: one sentence, at most 125 characters (besides any credit), describing what matters for someone who cannot see it. No "image of".${current}`,
                 image: { data, mime: 'image/jpeg' },
             }).catch(aiFailed);
             return c.json({ text });
@@ -1827,7 +1858,37 @@ export function createApp(base) {
             : input.action === 'custom'
                 ? (input.instruction ?? 'Improve it.')
                 : TEXT_ACTIONS[input.action];
-        const text = await complete(ai, { system, prompt: `${task}\n\n<text>\n${input.text}\n</text>` }).catch(aiFailed);
+        const rich = input.format === 'rich'
+            ? '\n\nThe text is markup, one block per line: <p>, <h2>, <h3>, <h4>, <blockquote>, <li>, with <b>, <i> and numbered links (<a1>…</a1>) inside, and <img1>, <img2>… for images. Reply in the same markup: you may change, merge, split or add blocks; keep each link around the matching words and every image line.'
+            : '';
+        // Shorter and longer by how much: as words, small models barely touch a short text or
+        // multiply it. A length in characters (the words alone, without markup) they follow.
+        const length = input.text.replace(/<[^>]+>/g, '').length;
+        let max = input.max;
+        let target = '';
+        if (input.action === 'shorten') {
+            target = `\n\nThe text has ${length} characters: aim for about ${Math.round(length * 0.65)}.`;
+            max = Math.min(max ?? Number.POSITIVE_INFINITY, Math.round(length * 0.8));
+        }
+        else if (input.action === 'expand')
+            target = `\n\nThe text has ${length} characters: aim for about ${Math.round(length * 1.5)}, never more than ${length * 2}.`;
+        const limit = max ? `\n\nThe result must be at most ${max} characters, spaces included.` : '';
+        let text = await complete(ai, {
+            system,
+            fast: true,
+            prompt: `${task}${target}${limit}${rich}\n\n<text>\n${input.text}\n</text>`,
+        }).catch(aiFailed);
+        // Models count characters loosely: another pass when the result is too long, then one on the
+        // main model when the quick one still does not get there (a small model may return the text as is).
+        for (const fast of [true, false]) {
+            if (!max || input.format !== 'plain' || text.length <= max)
+                break;
+            text = await complete(ai, {
+                system,
+                fast,
+                prompt: `Shorten this text to at most ${max} characters, spaces included (it has ${text.length}), keeping its meaning and tone.\n\n<text>\n${text}\n</text>`,
+            }).catch(aiFailed);
+        }
         return c.json({ text });
     });
     /** Conversations with the assistant, per person and chat, kept for two hours in memory. */
@@ -1844,6 +1905,14 @@ export function createApp(base) {
                 url: z.string().max(500).nullish(),
             }),
             selected: z.array(z.string().max(100)).max(50).optional(),
+            /** Reference pictures (a screenshot, a mockup, a sketch), already made smaller by the panel. */
+            images: z
+                .array(z.object({
+                mime: z.enum(['image/png', 'image/jpeg', 'image/webp']),
+                data: z.base64().max(4_000_000),
+            }))
+                .max(4)
+                .default([]),
         }));
         const user = c.get('user');
         if (!allowAi(user.id))
@@ -1869,17 +1938,24 @@ export function createApp(base) {
             auth.cookie = cookie;
         const tools = assistantTools(apiCaller(app.fetch, auth), page, ctx.config().site.name);
         const limited = await contentOnly(user);
-        const system = `You are the assistant inside Materialize, the visual editor of the website "${ctx.config().site.name}". The person (${user.name}) is editing the page "${input.page.title}" (collection ${input.page.collection}${input.page.url ? `, address ${input.page.url}` : ''}).
+        // The instructions stay the same for the whole conversation: the model's earlier reasoning is
+        // tied to them (a change is refused) and they are read from the prompt cache. What changes
+        // from turn to turn, the page and what is selected, goes with each message instead.
+        const system = `You are the assistant inside Materialize, the visual editor of the website "${ctx.config().site.name}". The person (${user.name}) is editing a page; each of their messages starts with a <context> note on the page and on what is selected on the canvas.
 Use the tools to look at the page (get_page, get_node) and change it (edit_page). Your changes go into the editor, where the person sees them at once and can undo them; they are not published.
 Read the page before changing it. Make the changes asked, consistent with the design already there (theme colors and text styles, spacing, the look of nearby sections); prefer the section library for new sections. Keep ids of existing nodes.
-${limited ? 'This person may change only contents (texts, links, images, alt texts), not the layout or the design: do not add, remove or move nodes, and do not change styles.\n' : ''}When done, say in one or two short sentences what you changed. Reply in the person's language. If something cannot be done with the tools, say so.
-${input.selected?.length ? `Selected on the canvas: ${input.selected.join(', ')} (what "this" refers to).` : ''}`;
+${limited ? 'This person may change only contents (texts, links, images, alt texts), not the layout or the design: do not add, remove or move nodes, and do not change styles.\n' : ''}Pictures the person attaches are references (a site they like, a mockup, a sketch): take their layout, hierarchy and mood, and build it with this site's sections, theme and texts; never copy their brand, logos or texts, and do not put the pictures on the page.
+When done, say in one or two short sentences what you changed. Reply in the person's language. If something cannot be done with the tools, say so.`;
+        const context = `<context>Page "${input.page.title}" (collection ${input.page.collection}${input.page.url ? `, address ${input.page.url}` : ''}). ${input.selected?.length
+            ? `Selected on the canvas: ${input.selected.join(', ')} (what "this" refers to).`
+            : 'Nothing selected on the canvas.'}</context>`;
         return streamSSE(c, async (stream) => {
             const send = (data) => stream.writeSSE({ data: JSON.stringify(data) });
             try {
                 const reply = await runTurn(ai, conv, {
                     system,
-                    text: input.message,
+                    text: `${context}\n\n${input.message}`,
+                    images: input.images,
                     tools,
                     onEvent: (e) => void send(e),
                 });