@agent-native/core 0.124.2 → 0.124.4

package/corpus/templates/dispatch/changelog/2026-07-27-creating-an-app-from-a-curated-template-now-uses-clearer-mor.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-27
+---
+
+Creating an app from a curated template now uses clearer, more direct language.

package/corpus/templates/dispatch/changelog/2026-07-27-thread-debug-accepts-request-run-ids.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-27
+---
+
+Thread Debug can open a run directly from the copied request ID in an Agent Native chat.

package/corpus/templates/slides/actions/create-design-system.ts

@@ -8,6 +8,7 @@ import { nanoid } from "nanoid";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { missingDesignSystemDataFields } from "../shared/design-system-validation.js";
 
 export default defineAction({
   description:
@@ -36,12 +37,19 @@ export default defineAction({
       ),
   }),
   run: async ({ title, description, data, assets, customInstructions }) => {
-    // Validate that data is valid JSON
+    let parsedData: unknown;
     try {
-      JSON.parse(data);
+      parsedData = JSON.parse(data);
     } catch {
       throw new Error("data must be a valid JSON string");
     }
+    const missingFields = missingDesignSystemDataFields(parsedData);
+    if (missingFields.length > 0) {
+      throw new Error(
+        "data is missing required design system field(s): " +
+          missingFields.join(", "),
+      );
+    }
     if (assets) {
       try {
         JSON.parse(assets);

package/corpus/templates/slides/actions/import-file.ts

@@ -2,6 +2,7 @@ import path from "path";
 
 import { defineAction } from "@agent-native/core";
 import { writeAppState } from "@agent-native/core/application-state";
+import { uploadFile } from "@agent-native/core/file-upload";
 import { startBuilderDesignSystemIndex } from "@agent-native/core/server";
 import {
   getRequestOrgId,
@@ -15,6 +16,11 @@ import { getDb, schema } from "../server/db/index.js";
 import { notifyClients } from "../server/handlers/decks.js";
 import { upsertBuilderProxyDesignSystem } from "../server/lib/builder-design-system-proxy.js";
 import { setupPdfParse } from "../server/lib/pdf-parse-setup.js";
+import {
+  ASPECT_RATIOS,
+  DEFAULT_ASPECT_RATIO,
+  type AspectRatio,
+} from "../shared/aspect-ratios.js";
 import { readUserUploadedFile } from "./_uploaded-files.js";
 
 const DEFAULT_MAX_SOURCE_CHARS = 60_000;
@@ -213,6 +219,25 @@ export default defineAction({
 
     if (detectedFormat === "pdf") {
       const { PDFParse, canvasFactory } = await setupPdfParse();
+      const title = titleFromPath(filename);
+
+      // Designed slide PDFs (photo backgrounds, gradients, custom
+      // typography) bake their visuals into vector/image page content with
+      // no reliable text/shape structure to reconstruct, so importing into a
+      // deck rasterizes each page instead of flattening it to generic bullet
+      // text. Falls through to the text-only path below when the optional
+      // canvas renderer isn't available in this runtime.
+      if (importIntoDeck && canvasFactory) {
+        if (!deckId) throw new Error("deckId is required to import into deck");
+        return importPdfPagesAsFullBleedSlides({
+          fileBuffer,
+          title,
+          deckId,
+          PDFParse,
+          canvasFactory,
+        });
+      }
+
       const { convertSectionsToSlides } =
         await import("../server/handlers/import/html-converter.js");
       const pdf = new PDFParse({
@@ -222,7 +247,6 @@ export default defineAction({
       const result = await pdf.getText().finally(() => pdf.destroy());
       const pages = normalizePdfPages(result);
       const textPages = pages.filter((p) => p.text.trim());
-      const title = titleFromPath(filename);
 
       if (textPages.length === 0) {
         throw new Error(
@@ -278,6 +302,152 @@ export default defineAction({
   },
 });
 
+/** Closest configured deck aspect ratio to a source image's own dimensions. */
+function nearestAspectRatio(width: number, height: number): AspectRatio {
+  const target = width / height;
+  let best: AspectRatio = DEFAULT_ASPECT_RATIO;
+  let bestDiff = Infinity;
+  for (const key of Object.keys(ASPECT_RATIOS) as AspectRatio[]) {
+    const preset = ASPECT_RATIOS[key];
+    const diff = Math.abs(preset.width / preset.height - target);
+    if (diff < bestDiff) {
+      bestDiff = diff;
+      best = key;
+    }
+  }
+  return best;
+}
+
+async function importPdfPagesAsFullBleedSlides(args: {
+  fileBuffer: Buffer;
+  title: string;
+  deckId: string;
+  PDFParse: Awaited<ReturnType<typeof setupPdfParse>>["PDFParse"];
+  canvasFactory: object;
+}) {
+  const { fileBuffer, title, deckId, PDFParse, canvasFactory } = args;
+  const { buildFullBleedImageSlideHtml, convertSectionsToSlides } =
+    await import("../server/handlers/import/html-converter.js");
+
+  const pdf = new PDFParse({
+    data: new Uint8Array(fileBuffer),
+    CanvasFactory: canvasFactory,
+  });
+  let pages: { num: number; text: string }[];
+  let imagesByPage: Map<
+    number,
+    { data: Uint8Array; width: number; height: number }
+  >;
+  try {
+    pages = normalizePdfPages(await pdf.getText());
+    // Reuse the page's own embedded photo rather than rasterizing the whole
+    // page: headless canvas text rendering depends on the PDF's embedded
+    // fonts resolving in this runtime, which is unreliable, so real
+    // extracted text is drawn as HTML below instead of trusting the render.
+    const imageResult = await pdf.getImage({
+      imageBuffer: true,
+      imageDataUrl: false,
+    });
+    imagesByPage = new Map();
+    for (const page of imageResult.pages) {
+      const largest = page.images.reduce<
+        { data: Uint8Array; width: number; height: number } | undefined
+      >((best, image) => {
+        if (!best || image.width * image.height > best.width * best.height) {
+          return { data: image.data, width: image.width, height: image.height };
+        }
+        return best;
+      }, undefined);
+      if (largest) imagesByPage.set(page.pageNumber, largest);
+    }
+  } finally {
+    await pdf.destroy();
+  }
+
+  // Source decks (e.g. Instagram carousel exports) are commonly portrait or
+  // square, not the deck editor's 16:9 default — match the canvas to the
+  // first embedded photo's own proportions instead of stretching/cropping it.
+  const firstImage = pages
+    .map((page) => imagesByPage.get(page.num))
+    .find((image): image is NonNullable<typeof image> => Boolean(image));
+  const aspectRatio = firstImage
+    ? nearestAspectRatio(firstImage.width, firstImage.height)
+    : undefined;
+
+  const ownerEmail = getRequestUserEmail();
+  const slides = await Promise.all(
+    pages.map(async (page) => {
+      const lines = page.text
+        .split(/\r?\n/)
+        .map((line) => line.trim())
+        .filter(Boolean);
+      const backgroundImage = imagesByPage.get(page.num);
+
+      if (!backgroundImage) {
+        const [content] = convertSectionsToSlides([
+          { heading: lines[0] ?? `Page ${page.num}`, content: page.text },
+        ]);
+        return {
+          id: newSlideId(),
+          content: content ?? '<div class="fmd-slide"></div>',
+          layout: "content",
+          notes: "",
+        };
+      }
+
+      const uploadResult = await uploadFile({
+        data: Buffer.from(backgroundImage.data),
+        filename: `slide-import-${Date.now()}-p${page.num}.png`,
+        mimeType: "image/png",
+        ownerEmail: ownerEmail ?? undefined,
+        recordAsset: false,
+      });
+      if (!uploadResult?.url) {
+        throw new Error(
+          "File storage is not configured. Connect Builder.io or another upload provider before importing PDF slides.",
+        );
+      }
+      // pdf-parse breaks wrapped text across lines with no way to tell a
+      // wrapped title from a heading followed by a body paragraph. Treat a
+      // couple of short lines as one wrapped title (join them so the
+      // sentence isn't cut off); three or more lines as a heading plus body
+      // text, rendered with distinct sizes so they don't collapse into one
+      // flat paragraph.
+      const heading =
+        lines.length > 2 ? lines[0] : lines.join(" ") || undefined;
+      const subtitle = lines.length > 2 ? lines.slice(1).join(" ") : undefined;
+      return {
+        id: newSlideId(),
+        content: buildFullBleedImageSlideHtml(
+          uploadResult.url,
+          heading,
+          subtitle,
+        ),
+        layout: "full-image",
+        notes: page.text,
+      };
+    }),
+  );
+
+  await replaceDeckSlides(
+    deckId,
+    title,
+    slides,
+    "import-file:pdf",
+    aspectRatio,
+  );
+
+  return {
+    format: "pdf",
+    title,
+    pageCount: slides.length,
+    slideCount: slides.length,
+    aspectRatio,
+    deckId,
+    imported: true,
+  };
+}
+
 function newSlideId(): string {
   return `slide-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
 }
@@ -367,6 +537,7 @@ async function replaceDeckSlides(
     notes?: string;
   }>,
   source: string,
+  aspectRatio?: AspectRatio,
 ) {
   await assertAccess("deck", deckId, "editor");
 
@@ -387,6 +558,7 @@ async function replaceDeckSlides(
     ...previousData,
     title,
     slides,
+    ...(aspectRatio ? { aspectRatio } : {}),
     updatedAt: now,
   };
 

package/corpus/templates/slides/actions/list-slide-comments.ts

@@ -27,6 +27,21 @@ export default defineAction({
         ),
       )
       .orderBy(asc(schema.slideComments.createdAt));
-    return { comments: rows };
+    return {
+      comments: rows.map((row) => ({
+        id: row.id,
+        deck_id: row.deckId,
+        slide_id: row.slideId,
+        thread_id: row.threadId,
+        parent_id: row.parentId,
+        content: row.content,
+        quoted_text: row.quotedText,
+        author_email: row.authorEmail,
+        author_name: row.authorName,
+        resolved: row.resolved,
+        created_at: row.createdAt,
+        updated_at: row.updatedAt,
+      })),
+    };
   },
 });

package/corpus/templates/slides/actions/update-design-system.ts

@@ -4,6 +4,7 @@ import { eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { missingDesignSystemDataFields } from "../shared/design-system-validation.js";
 
 export default defineAction({
   description:
@@ -29,13 +30,23 @@ export default defineAction({
       ),
   }),
   run: async ({ id, title, description, data, assets, customInstructions }) => {
-    // Validate that data/assets are valid JSON when provided
+    // Validate that data/assets are valid JSON, and that data has the shape
+    // the Design Systems page and slide renderers read unconditionally
+    // (data.colors.*, data.typography.*) — see create-design-system.ts.
     if (data !== undefined) {
+      let parsedData: unknown;
       try {
-        JSON.parse(data);
+        parsedData = JSON.parse(data);
       } catch {
         throw new Error("data must be a valid JSON string");
       }
+      const missingFields = missingDesignSystemDataFields(parsedData);
+      if (missingFields.length > 0) {
+        throw new Error(
+          "data is missing required design system field(s): " +
+            missingFields.join(", "),
+        );
+      }
     }
     if (assets !== undefined) {
       try {

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

@@ -3,8 +3,10 @@ import { useT } from "@agent-native/core/client/i18n";
 import { IconUpload, IconTrash, IconLoader2, IconX } from "@tabler/icons-react";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
+import { toast } from "sonner";
 
 interface Asset {
+  id: string;
   url: string;
   filename: string;
   size: number;
@@ -67,33 +69,54 @@ export default function AssetLibraryPanel({
     const files = e.target.files;
     if (!files || files.length === 0) return;
     setUploading(true);
+    const failures: string[] = [];
     try {
       for (const file of Array.from(files)) {
         const form = new FormData();
         form.append("file", file);
-        await fetch(`${appBasePath()}/api/assets/upload`, {
-          method: "POST",
-          body: form,
-        });
+        try {
+          const res = await fetch(`${appBasePath()}/api/assets/upload`, {
+            method: "POST",
+            body: form,
+          });
+          if (!res.ok) {
+            const body = await res.json().catch(() => null);
+            failures.push(
+              `${file.name}: ${body?.error || `HTTP ${res.status}`}`,
+            );
+          }
+        } catch {
+          failures.push(`${file.name}: upload failed`);
+        }
       }
       await fetchAssets();
-    } catch {
+      if (failures.length > 0) {
+        toast.error(t("raw.assetUploadFailed"), {
+          description: failures.join("\n"),
+        });
+      }
     } finally {
       setUploading(false);
       e.target.value = "";
     }
   };
 
-  const handleDelete = async (filename: string) => {
+  const handleDelete = async (id: string) => {
     try {
-      await fetch(
-        `${appBasePath()}/api/assets/${encodeURIComponent(filename)}`,
+      const res = await fetch(
+        `${appBasePath()}/api/assets/${encodeURIComponent(id)}`,
         {
           method: "DELETE",
         },
       );
-      setAssets((prev) => prev.filter((a) => a.filename !== filename));
-    } catch {}
+      if (!res.ok) {
+        toast.error(t("raw.assetDeleteFailed"));
+        return;
+      }
+      setAssets((prev) => prev.filter((a) => a.id !== id));
+    } catch {
+      toast.error(t("raw.assetDeleteFailed"));
+    }
   };
 
   const handleSelect = (url: string) => {
@@ -185,7 +208,7 @@ export default function AssetLibraryPanel({
           <div className="grid grid-cols-3 gap-2">
             {assets.map((asset) => (
               <div
-                key={asset.filename}
+                key={asset.id}
                 className="group relative aspect-square rounded-md overflow-hidden border border-border bg-muted"
               >
                 <button
@@ -204,7 +227,7 @@ export default function AssetLibraryPanel({
                 <button
                   onClick={(e) => {
                     e.stopPropagation();
-                    handleDelete(asset.filename);
+                    handleDelete(asset.id);
                   }}
                   className="absolute top-0.5 right-0.5 w-5 h-5 bg-black/70 text-white/70 hover:text-red-400 flex items-center justify-center rounded-full opacity-0 group-hover:opacity-100 transition-opacity"
                   aria-label={`Delete ${asset.filename}`}

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

@@ -164,6 +164,16 @@ const backgroundOptions = [
   "bg-[#ffffff]",
 ];
 
+const HEX_COLOR_PATTERN = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
+
+/** Native <input type="color"> only accepts 3/6-digit hex — fall back to
+ * black for gradients or other raw CSS values so the picker still opens. */
+function toColorInputValue(background: string | undefined): string {
+  return background && HEX_COLOR_PATTERN.test(background)
+    ? background
+    : "#000000";
+}
+
 /** Popover anchored to a button ref */
 function ToolbarPopover({
   open,
@@ -294,6 +304,9 @@ export default function EditorToolbar({
   }, []);
 
   const activeAspectRatio: AspectRatio = aspectRatio ?? DEFAULT_ASPECT_RATIO;
+  const isCustomBackground =
+    !!currentSlide?.background &&
+    !backgroundOptions.includes(currentSlide.background);
   const [layoutOpen, setLayoutOpen] = useState(false);
   const layoutRef = useRef<HTMLButtonElement>(null);
 
@@ -544,6 +557,29 @@ export default function EditorToolbar({
                       }`}
                     />
                   ))}
+                  <label
+                    className={`relative w-10 h-7 rounded-md border cursor-pointer overflow-hidden transition-all ${
+                      isCustomBackground
+                        ? "border-[#609FF8] ring-1 ring-[#609FF8]/30"
+                        : "border-border hover:border-foreground/20"
+                    }`}
+                    style={{
+                      background: isCustomBackground
+                        ? currentSlide.background
+                        : "conic-gradient(from 180deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)",
+                    }}
+                    title={t("editorToolbar.customColor")}
+                  >
+                    <input
+                      type="color"
+                      value={toColorInputValue(currentSlide.background)}
+                      onChange={(e) => {
+                        onUpdateSlide!({ background: e.target.value });
+                      }}
+                      className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+                      aria-label={t("editorToolbar.customColor")}
+                    />
+                  </label>
                 </div>
               </div>
 

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

@@ -61,6 +61,8 @@ const messages = {
     deckOptions: "Deck options",
     generatingImage: "Generating image...",
     noAssetsYet: "No assets yet.",
+    assetUploadFailed: "Some uploads failed",
+    assetDeleteFailed: "Failed to delete asset",
     contentMarkdown: "Content (Markdown)",
     speakerNotes: "Speaker Notes",
     speakerNotesForSlide: "Speaker Notes — Slide {{index}} / {{count}}",
@@ -192,6 +194,7 @@ const messages = {
     slideSettings: "Slide settings",
     layout: "Layout",
     background: "Background",
+    customColor: "Custom color",
     media: "Media",
     generateImage: "Generate Image",
     assetLibrary: "Asset Library",

package/corpus/templates/slides/app/lib/dynamic-import.ts

@@ -0,0 +1,63 @@
+const RELOAD_GUARD_KEY = "slides:export-module-reload-attempted";
+
+// Chrome/Firefox/Safari all use this wording (or close to it) for a dynamic
+// `import()` whose chunk 404s — typically because the app was redeployed
+// after the page loaded and the browser still references an old, now-missing
+// chunk hash. Calling `import()` again with the *same* specifier re-requests
+// the same now-missing URL and fails immediately, so a plain retry never
+// recovers this case — only a full reload picks up the current chunk map.
+const STALE_CHUNK_PATTERN =
+  /fetch dynamically imported module|error loading dynamically imported module/i;
+
+function isStaleChunkError(error: unknown): boolean {
+  const message = error instanceof Error ? error.message : String(error);
+  return STALE_CHUNK_PATTERN.test(message);
+}
+
+function hasAlreadyReloaded(): boolean {
+  try {
+    return sessionStorage.getItem(RELOAD_GUARD_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function markReloaded(): void {
+  try {
+    sessionStorage.setItem(RELOAD_GUARD_KEY, "1");
+  } catch {
+    // sessionStorage unavailable (e.g. private mode) — reload once anyway,
+    // worst case we reload more than once instead of not recovering at all.
+  }
+}
+
+/**
+ * Lazy `import()` calls for export libraries (jsPDF, modern-screenshot,
+ * dom-to-pptx) fail with "Failed to fetch dynamically imported module" when
+ * the chunk is momentarily unreachable (flaky network) or stale after a
+ * redeploy. For the stale-chunk case, retrying the same specifier is a no-op,
+ * so we reload the page once to pick up the current chunk map; for anything
+ * else, a same-specifier retry can still clear a transient blip.
+ */
+export async function importExportModule<T>(
+  loader: () => Promise<T>,
+): Promise<T> {
+  try {
+    return await loader();
+  } catch (error) {
+    if (isStaleChunkError(error) && !hasAlreadyReloaded()) {
+      markReloaded();
+      window.location.reload();
+      // The reload navigates away; never resolve so callers don't proceed
+      // against a page that's about to unload.
+      return new Promise<T>(() => {});
+    }
+    try {
+      return await loader();
+    } catch {
+      throw new Error(
+        "Couldn't load the export module. Refresh the page and try again.",
+      );
+    }
+  }
+}

package/corpus/templates/slides/app/lib/export-pdf-client.ts

@@ -11,6 +11,7 @@
  * doesn't shrink the captured pixels.
  */
 import { type AspectRatio, getAspectRatioDims } from "./aspect-ratios";
+import { importExportModule } from "./dynamic-import";
 
 /**
  * Cross-origin <img> elements without an explicit `crossOrigin="anonymous"`
@@ -99,8 +100,8 @@ export async function exportDeckAsPdf(
   // JPEG (vs PNG) keeps a typical 8-slide deck under ~10 MB instead of
   // ~100 MB — at 0.92 quality the difference is invisible on slide content.
   const [{ domToJpeg }, { jsPDF }] = await Promise.all([
-    import("modern-screenshot"),
-    import("jspdf"),
+    importExportModule(() => import("modern-screenshot")),
+    importExportModule(() => import("jspdf")),
   ]);
 
   // Web fonts (Poppins) must finish loading before capture — otherwise

package/corpus/templates/slides/app/lib/export-pptx-client.ts

@@ -1,4 +1,5 @@
 import { type AspectRatio, getAspectRatioDims } from "./aspect-ratios";
+import { importExportModule } from "./dynamic-import";
 import {
   findSlideExportSource,
   preloadImagesWithCors,
@@ -83,7 +84,7 @@ export async function addSpeakerNotesToPptxBlob(
   const hasNotes = slides.some((slide) => slide.notes?.trim());
   if (!hasNotes) return blob;
 
-  const { default: JSZip } = await import("jszip");
+  const { default: JSZip } = await importExportModule(() => import("jszip"));
   const zip = await JSZip.loadAsync(blob);
 
   const contentTypesFile = zip.file("[Content_Types].xml");
@@ -317,7 +318,9 @@ export async function exportDeckAsPptx(
   slides: PptxExportSlide[],
   aspectRatio?: AspectRatio,
 ): Promise<void> {
-  const { exportToPptx } = await import("dom-to-pptx");
+  const { exportToPptx } = await importExportModule(
+    () => import("dom-to-pptx"),
+  );
 
   if (typeof document !== "undefined" && document.fonts?.ready) {
     await document.fonts.ready;

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

@@ -18,6 +18,7 @@ import { Button } from "@/components/ui/button";
 import { useDesignSystems } from "@/hooks/use-design-systems";
 
 import type { DesignSystemData } from "../../shared/api";
+import { missingDesignSystemDataFields } from "../../shared/design-system-validation";
 
 export default function DesignSystems() {
   const t = useT();
@@ -52,7 +53,14 @@ export default function DesignSystems() {
 
   const parseDesignData = (dataStr: string): DesignSystemData | null => {
     try {
-      return JSON.parse(dataStr) as DesignSystemData;
+      const parsed = JSON.parse(dataStr) as DesignSystemData;
+      // DesignSystemCard reads colors.* / typography.* unconditionally, down
+      // to nested fields like typography.headingFont. Rows written before
+      // create/update validation existed can have `colors: {}` and still
+      // pass a truthy check, so reuse the same nested-field validator the
+      // actions use rather than only checking the top-level objects exist.
+      if (missingDesignSystemDataFields(parsed).length > 0) return null;
+      return parsed;
     } catch {
       return null;
     }

package/corpus/templates/slides/server/db/schema.ts

@@ -57,6 +57,17 @@ export const deckShareLinks = table("deck_share_links", {
   createdAt: text("created_at").notNull().default(now()),
 });
 
+export const uploadedAssets = table("uploaded_assets", {
+  id: text("id").primaryKey(),
+  filename: text("filename").notNull(),
+  url: text("url").notNull(),
+  type: text("type").notNull(),
+  size: integer("size").notNull(),
+  provider: text("provider"),
+  ownerEmail: text("owner_email").notNull(),
+  createdAt: text("created_at").notNull().default(now()),
+});
+
 export const slideComments = table("slide_comments", {
   id: text("id").primaryKey(),
   deckId: text("deck_id").notNull(),