@agent-native/core 0.91.1 → 0.92.0

package/corpus/templates/slides/app/components/editor/ImageDropPromptPopover.tsx

@@ -6,6 +6,12 @@ import { createPortal } from "react-dom";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/hooks/use-toast";
+import {
+  buildImageDropAgentPayload,
+  readFileAsDataUrl,
+  type HostedImageUploadResult,
+} from "@/lib/image-drop-to-agent";
+import { parseUploadResponse } from "@/lib/upload-response";
 
 const POPOVER_WIDTH = 360;
 const POPOVER_MARGIN = 12;
@@ -24,8 +30,12 @@ interface ImageDropPromptPopoverProps {
  * Popover shown after a user drops an image somewhere on the slides editor
  * that doesn't have a clear target (i.e. not on an image placeholder or
  * existing `<img>`). The popover previews the image, lets the user describe
- * what to do with it, and hands the task off to the agent chat with the image
- * uploaded to Builder.io as a reference URL.
+ * what to do with it, and hands the task off to the agent chat.
+ *
+ * Prefers a hosted CDN URL via `/api/assets/upload` when a file-upload
+ * provider (Builder.io / S3 / …) is configured. When nothing is configured,
+ * falls back to an inline data-URL attachment so the drop still reaches the
+ * agent instead of toasting a 503.
  *
  * Why this exists: dropping image files onto an unclear target previously did
  * one of two unhelpful things — opened the file in a new browser tab (when the
@@ -113,44 +123,51 @@ export default function ImageDropPromptPopover({
     try {
       const form = new FormData();
       form.append("file", file);
-      // Use the slides assets endpoint (which routes through the framework's
-      // uploadFile() provider chain first, then falls back to local disk in
-      // dev). Goes via Builder.io when configured; works without it in dev.
+      // Prefer the hosted provider chain. When none is configured the route
+      // returns 503 — fall back to an inline data URL so the agent still gets
+      // the image (chat already accepts `images` data URLs).
       const res = await fetch(`${appBasePath()}/api/assets/upload`, {
         method: "POST",
         body: form,
       });
-      const data = (await res.json().catch(() => null)) as {
+      const data = await parseUploadResponse<{
         url?: string;
         error?: string;
-      } | null;
-      if (!res.ok || !data?.url) {
-        throw new Error(
-          data?.error ||
-            "Image upload failed. Connect Builder.io from the agent composer model menu, or register a custom provider via registerFileUploadProvider().",
-        );
-      }
+      }>(res, t("raw.imageUploadGenericError"));
+      const upload: HostedImageUploadResult = {
+        ok: res.ok && !!data.url,
+        status: res.status,
+        url: data.url,
+        error: data.error,
+      };
 
-      const userIntent = prompt.trim();
-      const intentLine =
-        userIntent.length > 0
-          ? userIntent
-          : "Use this image on the current slide.";
-      const lines = [intentLine];
-      if (contextHint && contextHint.trim().length > 0) {
-        lines.push(contextHint.trim());
+      let dataUrl: string | undefined;
+      if (!upload.ok) {
+        dataUrl = await readFileAsDataUrl(file);
       }
-      lines.push(
-        `Image URL (already uploaded): ${data.url}`,
-        `Filename: ${file.name}`,
-      );
 
-      sendToAgentChat({
-        message: lines.join("\n\n"),
-        submit: true,
-        referenceImagePaths: [data.url],
+      const payload = buildImageDropAgentPayload({
+        intent: prompt,
+        contextHint,
+        filename: file.name,
+        upload,
+        dataUrl,
       });
 
+      if (payload.kind === "hosted") {
+        sendToAgentChat({
+          message: payload.message,
+          submit: true,
+          referenceImagePaths: payload.referenceImagePaths,
+        });
+      } else {
+        sendToAgentChat({
+          message: payload.message,
+          submit: true,
+          images: payload.images,
+        });
+      }
+
       onClose();
       toast({
         title: t("raw.sentToAgent"),

package/corpus/templates/slides/app/context/DeckContext.tsx

@@ -554,6 +554,16 @@ export function applyUndoOpToDecks(decks: Deck[], op: DeckUndoOp): Deck[] {
   }
 }
 
+/**
+ * Compare deck content for remote-sync undo. Ignores `updatedAt` so a
+ * metadata-only refresh does not create a no-op undo entry.
+ */
+export function deckContentSignature(deck: Deck): string {
+  const { updatedAt: _updatedAt, ...rest } = deck;
+  void _updatedAt;
+  return JSON.stringify(rest);
+}
+
 /**
  * Build the inverse of a granular op given the deck state BEFORE the op was
  * applied. Returns an array of ops to apply (usually one, occasionally two) or
@@ -939,6 +949,37 @@ export function DeckProvider({ children }: { children: ReactNode }) {
     [],
   );
 
+  /**
+   * Apply a remote deck snapshot (agent / collaborator via SSE or poll) and
+   * record a replace-deck undo entry when content actually changed. Without
+   * this, chat-driven edits land in the editor with Undo disabled.
+   */
+  const applyRemoteDeckUpdate = useCallback(
+    (updated: Deck, label = "Agent edit") => {
+      const before = decksRef.current.find((d) => d.id === updated.id);
+      if (
+        before &&
+        deckContentSignature(before) !== deckContentSignature(updated)
+      ) {
+        undoControllerRef.current?.push({
+          undo: [{ op: "replace-deck", deckId: updated.id, deck: before }],
+          redo: [{ op: "replace-deck", deckId: updated.id, deck: updated }],
+          label,
+        });
+      }
+      setDecks((prev) => {
+        const idx = prev.findIndex((d) => d.id === updated.id);
+        if (idx >= 0) {
+          const next = [...prev];
+          next[idx] = updated;
+          return next;
+        }
+        return [...prev, updated];
+      });
+    },
+    [],
+  );
+
   const resetDeckBaseline = useCallback((nextDecks: Deck[]) => {
     setDecks(nextDecks);
     // A baseline reset (initial mount, route change, or access reload) starts a
@@ -1082,13 +1123,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
                 clientDeck.slides.length !== serverDeck.slides.length;
               if (changed) {
                 lastExternalUpdateRef.current = Date.now();
-                setDecks((prev) => {
-                  const idx = prev.findIndex((d) => d.id === currentOpenId);
-                  if (idx < 0) return [...prev, serverDeck];
-                  const next = [...prev];
-                  next[idx] = serverDeck;
-                  return next;
-                });
+                applyRemoteDeckUpdate(serverDeck);
               }
             }
           } catch {}
@@ -1125,7 +1160,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       window.removeEventListener("focus", pollNow);
       document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
-  }, [loading]);
+  }, [applyRemoteDeckUpdate, loading]);
 
   // The dirty-deck set is now only used as a sentinel that "something changed
   // for this deck". Ops are enqueued directly in each mutation handler below;
@@ -1172,20 +1207,12 @@ export function DeckProvider({ children }: { children: ReactNode }) {
           const updated = await fetchDeckFromAPI(data.deckId);
           if (!updated) return;
           lastExternalUpdateRef.current = Date.now(); // Suppress save-back
-          setDecks((prev) => {
-            const idx = prev.findIndex((d) => d.id === data.deckId);
-            if (idx >= 0) {
-              const next = [...prev];
-              next[idx] = updated;
-              return next;
-            }
-            return [...prev, updated];
-          });
+          applyRemoteDeckUpdate(updated);
         }
       } catch {}
     };
     return () => evtSource.close();
-  }, []);
+  }, [applyRemoteDeckUpdate]);
 
   // Flush pending (debounced) saves before the tab is hidden or unloaded so the
   // last ~500ms of edits aren't lost on close/navigation. `pagehide` is the

package/corpus/templates/slides/app/i18n/ar-SA.ts

@@ -91,6 +91,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google Picker precisa de GOOGLE_PICKER_API_KEY e GOOGLE_PICKER_APP_ID.",
     imageUploadFailed: "Falha ao enviar imagem",
+    imageUploadNeedsBuilder:
+      "وصّل Builder.io من قائمة النموذج في مؤلف الوكيل لتحميل الصور إلى الشرائح. لا يزال بإمكانك إفلات صورة على اللوحة الفارغة لإرسالها إلى الوكيل بدون مزود.",
     sentToAgent: "Enviado ao agente",
     imageUploadGenericError: "Algo deu errado ao enviar esta imagem.",
     uploading: "Enviando…",
@@ -489,6 +491,8 @@ const messages = {
     backToDecks: "Volver a decks",
     tryAgain: "Intentar de nuevo",
     imageUploadFailed: "Error al subir imagen",
+    imageUploadNeedsBuilder:
+      "وصّل Builder.io من قائمة النموذج في مؤلف الوكيل لتحميل الصور إلى الشرائح. لا يزال بإمكانك إفلات صورة على اللوحة الفارغة لإرسالها إلى الوكيل بدون مزود.",
     imageAdded: "Imagen añadida",
     imageUploadError: "Algo salió mal al subir esta imagen.",
     exportFailed: "Error al exportar",

package/corpus/templates/slides/app/i18n/de-DE.ts

@@ -93,6 +93,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google Picker benötigt GOOGLE_PICKER_API_KEY und GOOGLE_PICKER_APP_ID.",
     imageUploadFailed: "Bildupload fehlgeschlagen",
+    imageUploadNeedsBuilder:
+      "Verbinde Builder.io im Modellmenü des Agent-Composers, um Bilder auf Folien hochzuladen. Wenn du ein Bild auf die leere Arbeitsfläche ziehst, kann es auch ohne Anbieter an den Agenten gesendet werden.",
     sentToAgent: "An Agent gesendet",
     imageUploadGenericError:
       "Beim Hochladen dieses Bildes ist etwas schiefgelaufen.",
@@ -484,6 +486,8 @@ const messages = {
     backToDecks: "Volver a decks",
     tryAgain: "Intentar de nuevo",
     imageUploadFailed: "Error al subir imagen",
+    imageUploadNeedsBuilder:
+      "Verbinde Builder.io im Modellmenü des Agent-Composers, um Bilder auf Folien hochzuladen. Wenn du ein Bild auf die leere Arbeitsfläche ziehst, kann es auch ohne Anbieter an den Agenten gesendet werden.",
     imageAdded: "Imagen añadida",
     imageUploadError: "Algo salió mal al subir esta imagen.",
     exportFailed: "Error al exportar",

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -92,6 +92,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google Picker needs GOOGLE_PICKER_API_KEY and GOOGLE_PICKER_APP_ID.",
     imageUploadFailed: "Image upload failed",
+    imageUploadNeedsBuilder:
+      "Connect Builder.io from the agent composer model menu to upload images onto slides. Dropping an image onto empty canvas can still send it to the agent without a provider.",
     sentToAgent: "Sent to agent",
     imageUploadGenericError: "Something went wrong uploading this image.",
     uploading: "Uploading…",
@@ -477,6 +479,8 @@ const messages = {
     backToDecks: "Back to Decks",
     tryAgain: "Try again",
     imageUploadFailed: "Image upload failed",
+    imageUploadNeedsBuilder:
+      "Connect Builder.io from the agent composer model menu to upload images onto slides. Dropping an image onto empty canvas can still send it to the agent without a provider.",
     imageAdded: "Image added",
     imageUploadError: "Something went wrong uploading this image.",
     exportFailed: "Export failed",

package/corpus/templates/slides/app/i18n/es-ES.ts

@@ -93,6 +93,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google Picker necesita GOOGLE_PICKER_API_KEY y GOOGLE_PICKER_APP_ID.",
     imageUploadFailed: "Error al subir la imagen",
+    imageUploadNeedsBuilder:
+      "Conecta Builder.io desde el menú de modelos del compositor del agente para subir imágenes a las diapositivas. Soltar una imagen en el lienzo vacío aún puede enviarla al agente sin proveedor.",
     sentToAgent: "Enviado al agente",
     imageUploadGenericError: "Algo salió mal al subir esta imagen.",
     uploading: "Subiendo…",
@@ -488,6 +490,8 @@ const messages = {
     backToDecks: "Volver a decks",
     tryAgain: "Intentar de nuevo",
     imageUploadFailed: "Error al subir imagen",
+    imageUploadNeedsBuilder:
+      "Conecta Builder.io desde el menú de modelos del compositor del agente para subir imágenes a las diapositivas. Soltar una imagen en el lienzo vacío aún puede enviarla al agente sin proveedor.",
     imageAdded: "Imagen añadida",
     imageUploadError: "Algo salió mal al subir esta imagen.",
     exportFailed: "Error al exportar",

package/corpus/templates/slides/app/i18n/fr-FR.ts

@@ -93,6 +93,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google Picker nécessite GOOGLE_PICKER_API_KEY et GOOGLE_PICKER_APP_ID.",
     imageUploadFailed: "Échec de l’envoi de l’image",
+    imageUploadNeedsBuilder:
+      "Connectez Builder.io depuis le menu de modèle du composeur d’agent pour téléverser des images sur les diapositives. Déposer une image sur le canevas vide peut toujours l’envoyer à l’agent sans fournisseur.",
     sentToAgent: "Envoyé à l’agent",
     imageUploadGenericError:
       "Une erreur est survenue lors de l’envoi de cette image.",
@@ -492,6 +494,8 @@ const messages = {
     backToDecks: "Volver a decks",
     tryAgain: "Intentar de nuevo",
     imageUploadFailed: "Error al subir imagen",
+    imageUploadNeedsBuilder:
+      "Connectez Builder.io depuis le menu de modèle du composeur d’agent pour téléverser des images sur les diapositives. Déposer une image sur le canevas vide peut toujours l’envoyer à l’agent sans fournisseur.",
     imageAdded: "Imagen añadida",
     imageUploadError: "Algo salió mal al subir esta imagen.",
     exportFailed: "Error al exportar",

package/corpus/templates/slides/app/i18n/hi-IN.ts

@@ -91,6 +91,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google Picker precisa de GOOGLE_PICKER_API_KEY e GOOGLE_PICKER_APP_ID.",
     imageUploadFailed: "Falha ao enviar imagem",
+    imageUploadNeedsBuilder:
+      "स्लाइड पर चित्र अपलोड करने के लिए एजेंट composer के मॉडल मेनू से Builder.io कनेक्ट करें। खाली कैनवास पर चित्र छोड़ने से वह बिना provider के भी एजेंट को भेजा जा सकता है।",
     sentToAgent: "Enviado ao agente",
     imageUploadGenericError: "Algo deu errado ao enviar esta imagem.",
     uploading: "Enviando…",
@@ -472,6 +474,8 @@ const messages = {
     backToDecks: "डेक पर वापस जाएं",
     tryAgain: "फिर कोशिश करें",
     imageUploadFailed: "चित्र अपलोड विफल",
+    imageUploadNeedsBuilder:
+      "स्लाइड पर चित्र अपलोड करने के लिए एजेंट composer के मॉडल मेनू से Builder.io कनेक्ट करें। खाली कैनवास पर चित्र छोड़ने से वह बिना provider के भी एजेंट को भेजा जा सकता है।",
     imageAdded: "चित्र जोड़ा गया",
     imageUploadError: "यह चित्र अपलोड करते समय कुछ गलत हुआ।",
     exportFailed: "निर्यात विफल",

package/corpus/templates/slides/app/i18n/ja-JP.ts

@@ -92,6 +92,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google PickerにはGOOGLE_PICKER_API_KEYとGOOGLE_PICKER_APP_IDが必要です。",
     imageUploadFailed: "画像のアップロードに失敗しました",
+    imageUploadNeedsBuilder:
+      "スライドに画像をアップロードするには、エージェント作成欄のモデルメニューから Builder.io に接続してください。空のキャンバスに画像をドロップすると、プロバイダーなしでもエージェントに送信できます。",
     sentToAgent: "エージェントに送信しました",
     imageUploadGenericError: "この画像のアップロード中に問題が発生しました。",
     uploading: "アップロード中…",
@@ -471,6 +473,8 @@ const messages = {
     backToDecks: "返回幻灯片",
     tryAgain: "重试",
     imageUploadFailed: "图片上传失败",
+    imageUploadNeedsBuilder:
+      "スライドに画像をアップロードするには、エージェント作成欄のモデルメニューから Builder.io に接続してください。空のキャンバスに画像をドロップすると、プロバイダーなしでもエージェントに送信できます。",
     imageAdded: "图片已添加",
     imageUploadError: "上传此图片时出了点问题。",
     exportFailed: "导出失败",

package/corpus/templates/slides/app/i18n/ko-KR.ts

@@ -92,6 +92,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google PickerにはGOOGLE_PICKER_API_KEYとGOOGLE_PICKER_APP_IDが必要です。",
     imageUploadFailed: "画像のアップロードに失敗しました",
+    imageUploadNeedsBuilder:
+      "슬라이드에 이미지를 업로드하려면 에이전트 작성기의 모델 메뉴에서 Builder.io를 연결하세요. 빈 캔버스에 이미지를 놓으면 제공자 없이도 에이전트로 보낼 수 있습니다.",
     sentToAgent: "エージェントに送信しました",
     imageUploadGenericError: "この画像のアップロード中に問題が発生しました。",
     uploading: "アップロード中…",
@@ -469,6 +471,8 @@ const messages = {
     backToDecks: "返回幻灯片",
     tryAgain: "重试",
     imageUploadFailed: "图片上传失败",
+    imageUploadNeedsBuilder:
+      "슬라이드에 이미지를 업로드하려면 에이전트 작성기의 모델 메뉴에서 Builder.io를 연결하세요. 빈 캔버스에 이미지를 놓으면 제공자 없이도 에이전트로 보낼 수 있습니다.",
     imageAdded: "图片已添加",
     imageUploadError: "上传此图片时出了点问题。",
     exportFailed: "导出失败",

package/corpus/templates/slides/app/i18n/pt-BR.ts

@@ -92,6 +92,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google Picker precisa de GOOGLE_PICKER_API_KEY e GOOGLE_PICKER_APP_ID.",
     imageUploadFailed: "Falha ao enviar imagem",
+    imageUploadNeedsBuilder:
+      "Conecte o Builder.io no menu de modelo do compositor do agente para enviar imagens aos slides. Soltar uma imagem na tela vazia ainda pode enviá-la ao agente sem provedor.",
     sentToAgent: "Enviado ao agente",
     imageUploadGenericError: "Algo deu errado ao enviar esta imagem.",
     uploading: "Enviando…",
@@ -483,6 +485,8 @@ const messages = {
     backToDecks: "Volver a decks",
     tryAgain: "Intentar de nuevo",
     imageUploadFailed: "Error al subir imagen",
+    imageUploadNeedsBuilder:
+      "Conecte o Builder.io no menu de modelo do compositor do agente para enviar imagens aos slides. Soltar uma imagem na tela vazia ainda pode enviá-la ao agente sem provedor.",
     imageAdded: "Imagen añadida",
     imageUploadError: "Algo salió mal al subir esta imagen.",
     exportFailed: "Error al exportar",

package/corpus/templates/slides/app/i18n/zh-CN.ts

@@ -90,6 +90,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google PickerにはGOOGLE_PICKER_API_KEYとGOOGLE_PICKER_APP_IDが必要です。",
     imageUploadFailed: "画像のアップロードに失敗しました",
+    imageUploadNeedsBuilder:
+      "请从代理编写器的模型菜单连接 Builder.io，以便将图片上传到幻灯片。即使没有提供方，把图片拖到空白画布上仍可发送给代理。",
     sentToAgent: "エージェントに送信しました",
     imageUploadGenericError: "この画像のアップロード中に問題が発生しました。",
     uploading: "アップロード中…",
@@ -465,6 +467,8 @@ const messages = {
     backToDecks: "返回幻灯片",
     tryAgain: "重试",
     imageUploadFailed: "图片上传失败",
+    imageUploadNeedsBuilder:
+      "请从代理编写器的模型菜单连接 Builder.io，以便将图片上传到幻灯片。即使没有提供方，把图片拖到空白画布上仍可发送给代理。",
     imageAdded: "图片已添加",
     imageUploadError: "上传此图片时出了点问题。",
     exportFailed: "导出失败",

package/corpus/templates/slides/app/i18n/zh-TW.ts

@@ -88,6 +88,8 @@ const messages = {
     googlePickerNeedsKeys:
       "Google Picker 需要 GOOGLE_PICKER_API_KEY 和 GOOGLE_PICKER_APP_ID。",
     imageUploadFailed: "圖片上傳失敗",
+    imageUploadNeedsBuilder:
+      "請從代理編寫器的模型選單連接 Builder.io，以便將圖片上傳到投影片。即使沒有提供者，將圖片拖到空白畫布上仍可傳送給代理。",
     sentToAgent: "已傳送給代理",
     imageUploadGenericError: "上傳這張圖片時發生問題。",
     uploading: "正在上傳…",
@@ -460,6 +462,8 @@ const messages = {
     backToDecks: "返回幻燈片",
     tryAgain: "重試",
     imageUploadFailed: "圖片上傳失敗",
+    imageUploadNeedsBuilder:
+      "請從代理編寫器的模型選單連接 Builder.io，以便將圖片上傳到投影片。即使沒有提供者，將圖片拖到空白畫布上仍可傳送給代理。",
     imageAdded: "圖片已新增",
     imageUploadError: "上傳此圖片時出了點問題。",
     exportFailed: "匯出失敗",

package/corpus/templates/slides/app/lib/image-drop-to-agent.ts

@@ -0,0 +1,115 @@
+/**
+ * Resolve how to hand a dropped image to the agent chat.
+ *
+ * Prefer a hosted CDN URL from `/api/assets/upload` when a file-upload
+ * provider is configured. When nothing is configured (or the upload fails),
+ * fall back to an inline data URL so the agent can still see the image —
+ * chat already accepts `images: string[]` data URLs without a storage
+ * provider. The agent can call `upload-image` later if the slide needs a
+ * durable hosted URL.
+ */
+
+export interface HostedImageUploadResult {
+  ok: boolean;
+  status: number;
+  url?: string;
+  error?: string;
+}
+
+export type ImageDropAgentPayload =
+  | {
+      kind: "hosted";
+      message: string;
+      referenceImagePaths: string[];
+    }
+  | {
+      kind: "inline";
+      message: string;
+      images: string[];
+    };
+
+export function isMissingUploadProviderError(
+  status: number,
+  error: string | undefined,
+): boolean {
+  if (status === 503) return true;
+  const lower = (error ?? "").toLowerCase();
+  return (
+    lower.includes("no file upload provider") ||
+    lower.includes("registerfileuploadprovider") ||
+    lower.includes("connect builder.io")
+  );
+}
+
+export function buildImageDropAgentPayload(args: {
+  intent: string;
+  contextHint?: string;
+  filename: string;
+  upload: HostedImageUploadResult;
+  dataUrl?: string;
+}): ImageDropAgentPayload {
+  const intentLine =
+    args.intent.trim().length > 0
+      ? args.intent.trim()
+      : "Use this image on the current slide.";
+  const lines = [intentLine];
+  if (args.contextHint && args.contextHint.trim().length > 0) {
+    lines.push(args.contextHint.trim());
+  }
+  lines.push(`Filename: ${args.filename}`);
+
+  if (args.upload.ok && args.upload.url) {
+    lines.splice(
+      lines.length - 1,
+      0,
+      `Image URL (already uploaded): ${args.upload.url}`,
+    );
+    return {
+      kind: "hosted",
+      message: lines.join("\n\n"),
+      referenceImagePaths: [args.upload.url],
+    };
+  }
+
+  if (!args.dataUrl) {
+    throw new Error(
+      args.upload.error ||
+        "Image upload failed. Connect Builder.io from the agent composer model menu, or register a custom provider via registerFileUploadProvider().",
+    );
+  }
+
+  if (!isMissingUploadProviderError(args.upload.status, args.upload.error)) {
+    // Unexpected upload failure — still try the inline path so the user can
+    // keep working, but tell the agent the hosted upload didn't land.
+    lines.push(
+      "Hosted upload failed; the image is attached inline as a data URL. Call upload-image on it before placing it on the slide if a durable URL is required.",
+    );
+  } else {
+    lines.push(
+      "No file upload provider is configured, so the image is attached inline as a data URL. Call upload-image to obtain a hosted URL before inserting it into slide HTML.",
+    );
+  }
+
+  return {
+    kind: "inline",
+    message: lines.join("\n\n"),
+    images: [args.dataUrl],
+  };
+}
+
+export function readFileAsDataUrl(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const result = reader.result;
+      if (typeof result === "string" && result.startsWith("data:")) {
+        resolve(result);
+      } else {
+        reject(new Error("Failed to read image file."));
+      }
+    };
+    reader.onerror = () =>
+      reject(reader.error ?? new Error("Failed to read image file."));
+    reader.readAsDataURL(file);
+  });
+}

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -70,6 +70,7 @@ import {
   shouldClearNewDeckGeneratingState,
   shouldShowNewDeckGeneratingOverlay,
 } from "@/lib/generation-state";
+import { isMissingUploadProviderError } from "@/lib/image-drop-to-agent";
 import { imageFileLooksSupported } from "@/lib/slide-image-replacement";
 import { replaceImageTargetInSlideHtml } from "@/lib/slide-image-replacement";
 import { TAB_ID } from "@/lib/tab-id";
@@ -323,19 +324,27 @@ export default function DeckEditor() {
     [deck, id, reorderSlides],
   );
 
-  const uploadImageAsset = useCallback(async (file: File): Promise<string> => {
-    const form = new FormData();
-    form.append("file", file);
-    const res = await fetch(`${appBasePath()}/api/assets/upload`, {
-      method: "POST",
-      body: form,
-    });
-    const data = await res.json().catch(() => null);
-    if (!res.ok || !data?.url) {
-      throw new Error(data?.error || t("deckEditor.imageUploadFailed"));
-    }
-    return data.url as string;
-  }, []);
+  const uploadImageAsset = useCallback(
+    async (file: File): Promise<string> => {
+      const form = new FormData();
+      form.append("file", file);
+      const res = await fetch(`${appBasePath()}/api/assets/upload`, {
+        method: "POST",
+        body: form,
+      });
+      const data = await res.json().catch(() => null);
+      if (!res.ok || !data?.url) {
+        const serverError =
+          typeof data?.error === "string" ? data.error : undefined;
+        if (isMissingUploadProviderError(res.status, serverError)) {
+          throw new Error(t("deckEditor.imageUploadNeedsBuilder"));
+        }
+        throw new Error(serverError || t("deckEditor.imageUploadFailed"));
+      }
+      return data.url as string;
+    },
+    [t],
+  );
 
   // Replace an image or placeholder in the current slide's HTML content.
   const replaceImageInSlide = useCallback(

package/corpus/templates/slides/changelog/2026-07-08-dropping-an-image-onto-a-slide-and-sending-it-to-the-agent-w.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-08
+---
+
+Dropping an image onto a slide and sending it to the agent works even when Builder.io storage isn't connected yet

package/corpus/templates/slides/changelog/2026-07-08-undo-works-after-the-agent-edits-a-slide-so-you-can-reverse.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-08
+---
+
+Undo works after the agent edits a slide, so you can reverse chat-driven changes from the toolbar

package/corpus/templates/slides/package.json

@@ -103,7 +103,6 @@
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",
     "@types/three": "^0.176.0",
-    "@typescript/native-preview": "catalog:",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -129,7 +128,8 @@
     "tailwindcss": "catalog:",
     "three": "^0.176.0",
     "tsx": "^4.20.3",
-    "typescript": "^6.0.3",
+    "typescript": "catalog:",
+    "typescript-7": "catalog:",
     "vaul": "^1.1.2",
     "vite": "catalog:",
     "vitest": "catalog:"