@agent-native/core 0.182.1-nightly-20260917183518 → 0.182.1

package/corpus/templates/design/app/lib/fig-client-import.ts

@@ -6,8 +6,10 @@
  * entirely: a Netlify function request is capped at ~6MB while real `.fig`
  * files run to tens of megabytes, which is why the server route has to chunk.
  * Nothing large crosses the network on this path — embedded images go up one
- * at a time through `upload-image`, and each frame's HTML is its own request,
- * so no single request approaches the cap however big the file was.
+ * at a time through `upload-image`, and each frame's HTML is its own request.
+ * The individual image budget below keeps base64 action requests under the
+ * serverless transport cap while the `.fig` container itself can exceed the
+ * old 50 MB server upload ceiling up to a finite browser safety limit.
  *
  * The server route stays for callers that are not a browser (the agent, A2A,
  * the fidelity harness) and as the fallback when decoding here fails.
@@ -19,13 +21,20 @@ import { decodeFig } from "../../server/lib/fig-file-decoder.js";
 import type { DecodedFig } from "../../server/lib/fig-file-decoder.js";
 import { bytesToBase64 } from "../../shared/fig-bytes.js";
 import {
+  assertEmbeddedImageBudget,
   convertDecodedFigToEditableHtml,
+  MAX_FIG_FRAME_HTML_BYTES,
   inspectDecodedFig,
   shouldWarnForFigImport,
   type FigImportSummary,
 } from "../../shared/fig-to-frames.js";
 import type { ImportResult } from "./design-import";
 
+/** Base64 plus action JSON must stay below the serverless request ceiling. */
+export const MAX_CLIENT_IMAGE_BYTES = 4 * 1024 * 1024;
+/** Finite browser allocation ceiling; this is far above the old 50 MB upload cap. */
+export const MAX_CLIENT_FIG_BYTES = 512 * 1024 * 1024;
+
 export interface FigClientImportProgress {
   phase: "decoding" | "images" | "saving";
   /** 0-1 within the current phase, when it is countable. */
@@ -40,6 +49,16 @@ export interface FigClientImportOptions {
   onProgress?: (progress: FigClientImportProgress) => void;
 }
 
+export class FigClientImportError extends Error {
+  constructor(
+    message: string,
+    readonly remoteMutationStarted: boolean,
+  ) {
+    super(message);
+    this.name = "FigClientImportError";
+  }
+}
+
 export interface PreparedFigImport {
   file: File;
   decoded: DecodedFig;
@@ -56,6 +75,28 @@ function mimeForExt(ext: string): string {
   return "application/octet-stream";
 }
 
+function browserImportId(): string {
+  return (
+    globalThis.crypto?.randomUUID?.() ??
+    `fig-${Date.now()}-${Math.random().toString(36).slice(2)}`
+  );
+}
+
+async function callWithOneRetry<T>(
+  action: string,
+  input: Record<string, unknown>,
+): Promise<T> {
+  try {
+    return (await callAction(action, input)) as T;
+  } catch (firstError) {
+    try {
+      return (await callAction(action, input)) as T;
+    } catch {
+      throw firstError;
+    }
+  }
+}
+
 /**
  * Decode, upload the embedded images one request each, then save each frame in
  * its own request. Returns the same shape the server route returns so the
@@ -64,59 +105,168 @@ function mimeForExt(ext: string): string {
 export async function importFigInBrowser(
   options: FigClientImportOptions,
 ): Promise<ImportResult> {
-  const { designId, file, onProgress } = options;
+  const { designId, file, onProgress, selection } = options;
+  if (file.size > MAX_CLIENT_FIG_BYTES) {
+    throw new Error(
+      `.fig file is too large for browser import (max ${MAX_CLIENT_FIG_BYTES / 1024 / 1024} MB).`,
+    );
+  }
   let decoded = options.decoded;
   if (!decoded) {
     onProgress?.({ phase: "decoding" });
-    decoded = decodeFig(new Uint8Array(await file.arrayBuffer()));
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    // The file never crosses the network on this path. Keep the decoder's
+    // decompression, node, image, and generated-HTML budgets, but remove the
+    // server-only raw upload ceiling.
+    decoded = decodeFig(bytes, { maxFileBytes: MAX_CLIENT_FIG_BYTES });
   }
-
+  assertEmbeddedImageBudget(decoded.images);
+  const oversizedImages = decoded.images.filter(
+    (image) => image.bytes.byteLength > MAX_CLIENT_IMAGE_BYTES,
+  );
+  const decodedForBrowserImport =
+    oversizedImages.length > 0
+      ? {
+          ...decoded,
+          images: decoded.images.filter(
+            (image) => image.bytes.byteLength <= MAX_CLIENT_IMAGE_BYTES,
+          ),
+        }
+      : decoded;
+  let remoteMutationStarted = false;
   let uploaded = 0;
-  const total = decoded.images.length;
-  const converted = await convertDecodedFigToEditableHtml(decoded, {
-    originalName: file.name,
-    // The upload action resolves the owner from the session; this value is only
-    // read by the server-side uploader this path replaces.
-    ownerEmail: "",
-    // The action wraps the document; nothing to do here.
-    normalizeHtml: (content: string) => content,
-    selection: options.selection,
-    uploader: async ({ data, filename, mimeType }) => {
-      const url = (await callAction("upload-image", {
-        data: `data:${mimeType ?? mimeForExt("")};base64,${bytesToBase64(
-          data instanceof Uint8Array
-            ? data
-            : new Uint8Array(data as ArrayBuffer),
-        )}`,
-        filename,
-      })) as { url?: string };
-      uploaded += 1;
-      onProgress?.({ phase: "images", ratio: total ? uploaded / total : 1 });
-      // A null result means storage is unavailable; the converter rejects the
-      // import rather than persisting frames with missing images.
-      return url?.url ? { url: url.url } : null;
-    },
-  });
+  const total = decodedForBrowserImport.images.length;
+  const importId = browserImportId();
+  let converted;
+  try {
+    converted = await convertDecodedFigToEditableHtml(decodedForBrowserImport, {
+      originalName: file.name,
+      // The upload action resolves the owner from the session; this value is only
+      // read by the server-side uploader this path replaces.
+      ownerEmail: "",
+      // The action wraps the document; nothing to do here.
+      normalizeHtml: (content: string) => content,
+      maxFrameHtmlBytes: MAX_FIG_FRAME_HTML_BYTES,
+      selection,
+      uploader: async ({ data, filename, mimeType }) => {
+        remoteMutationStarted = true;
+        const idempotencyKey = `${importId}:${filename}`;
+        const uploadInput = {
+          data: `data:${mimeType ?? mimeForExt("")};base64,${bytesToBase64(
+            data instanceof Uint8Array
+              ? data
+              : new Uint8Array(data as ArrayBuffer),
+          )}`,
+          filename,
+          idempotencyKey,
+        };
+        const url = await callWithOneRetry<{ url?: string }>(
+          "upload-image",
+          uploadInput,
+        );
+        uploaded += 1;
+        onProgress?.({
+          phase: "images",
+          ratio: total ? uploaded / total : 1,
+        });
+        // A null result means storage is unavailable; the converter rejects the
+        // import rather than persisting frames with missing images.
+        if (!url?.url) return null;
+        return {
+          url: url.url,
+          cleanup: async () => {
+            const result = await callWithOneRetry<{
+              alreadyMissing?: boolean;
+              committed?: boolean;
+              deleted?: boolean;
+            }>("upload-image", { idempotencyKey, cleanup: "delete" });
+            return (
+              result.deleted === true ||
+              result.alreadyMissing === true ||
+              result.committed === true
+            );
+          },
+          finalize: async () => {
+            const result = await callWithOneRetry<{
+              alreadyMissing?: boolean;
+              released?: boolean;
+            }>("upload-image", { idempotencyKey, cleanup: "release" });
+            return result.released === true || result.alreadyMissing === true;
+          },
+        };
+      },
+    });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    throw new FigClientImportError(message, remoteMutationStarted);
+  }
 
-  const saved: ImportResult = { files: [], warnings: [...converted.warnings] };
+  const saved: ImportResult = {
+    files: [],
+    warnings: converted.warnings,
+    skippedEmbeddedImageCount: oversizedImages.length || undefined,
+  };
   let index = 0;
-  for (const frame of converted.files) {
-    onProgress?.({
-      phase: "saving",
-      ratio: converted.files.length ? index / converted.files.length : 1,
-    });
-    const result = (await callAction("import-design-source", {
-      designId,
-      sourceType: "fig-frame",
-      content: frame.content,
-      originalName: frame.filename,
-      frameTitle: frame.preferredFrame?.title,
-      frameWidth: frame.preferredFrame?.width,
-      frameHeight: frame.preferredFrame?.height,
-    })) as ImportResult;
-    saved.designId = result.designId ?? saved.designId;
-    saved.files = [...(saved.files ?? []), ...(result.files ?? [])];
-    index += 1;
+  const savedFileIds: string[] = [];
+  try {
+    for (const [frameIndex, frame] of converted.files.entries()) {
+      onProgress?.({
+        phase: "saving",
+        ratio: converted.files.length ? index / converted.files.length : 1,
+      });
+      // Do not fall back after this point: the action may have committed even
+      // if the browser lost its response.
+      remoteMutationStarted = true;
+      const result = await callWithOneRetry<ImportResult>(
+        "import-design-source",
+        {
+          designId,
+          sourceType: "fig-frame",
+          content: frame.content,
+          originalName: frame.filename,
+          frameTitle: frame.preferredFrame?.title,
+          frameWidth: frame.preferredFrame?.width,
+          frameHeight: frame.preferredFrame?.height,
+          clientImportId: `${importId}:frame:${frameIndex}`,
+          clientImportBatchId: importId,
+          clientImportFinalFrame: frameIndex === converted.files.length - 1,
+        },
+      );
+      if (result.error) throw new Error(result.error);
+      saved.designId = result.designId ?? saved.designId;
+      saved.files = [...(saved.files ?? []), ...(result.files ?? [])];
+      savedFileIds.push(...(result.files ?? []).map((file) => file.id));
+      index += 1;
+    }
+    // Receipt release is best-effort after all frames are saved. A partial
+    // release must not roll back valid frames; the server-side receipt sweep
+    // expires abandoned staged receipts.
+    await converted.finalize?.();
+  } catch (error) {
+    const cleanup = await Promise.allSettled(
+      savedFileIds.map((id) =>
+        callAction("delete-file", { id, allowLockedLayers: true }),
+      ),
+    );
+    const cleanupFailures = cleanup.filter(
+      (result) => result.status === "rejected",
+    ).length;
+    const imageCleanupFailures = (await converted.cleanup?.()) ?? 0;
+    const message = error instanceof Error ? error.message : String(error);
+    const cleanupMessage = [
+      cleanupFailures > 0
+        ? `Cleanup failed for ${cleanupFailures} partially imported screen${cleanupFailures === 1 ? "" : "s"}.`
+        : "",
+      imageCleanupFailures > 0
+        ? `Storage cleanup failed for ${imageCleanupFailures} uploaded image${imageCleanupFailures === 1 ? "" : "s"}.`
+        : "",
+    ]
+      .filter(Boolean)
+      .join(" ");
+    throw new FigClientImportError(
+      cleanupMessage ? `${message} ${cleanupMessage}` : message,
+      remoteMutationStarted,
+    );
   }
   return {
     ...saved,
@@ -128,7 +278,15 @@ export async function prepareFigImport(
   file: File,
   onProgress?: (progress: FigClientImportProgress) => void,
 ): Promise<PreparedFigImport> {
+  if (file.size > MAX_CLIENT_FIG_BYTES) {
+    throw new Error(
+      `.fig file is too large for browser import (max ${MAX_CLIENT_FIG_BYTES / 1024 / 1024} MB).`,
+    );
+  }
   onProgress?.({ phase: "decoding" });
-  const decoded = decodeFig(new Uint8Array(await file.arrayBuffer()));
+  const decoded = decodeFig(new Uint8Array(await file.arrayBuffer()), {
+    maxFileBytes: MAX_CLIENT_FIG_BYTES,
+  });
+  assertEmbeddedImageBudget(decoded.images);
   return { file, decoded, summary: inspectDecodedFig(decoded) };
 }

package/corpus/templates/design/changelog/2026-09-17-large-fig-files-import-directly-in-the-browser-without-the-o.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-09-17
+---
+
+Large .fig files import directly in the browser without the old upload ceiling

package/corpus/templates/design/server/lib/fig-file-decoder.ts

@@ -75,6 +75,17 @@ export interface DecodedFig {
   thumbnail: Uint8Array | null;
 }
 
+export interface DecodeFigOptions {
+  /** `null` removes only the raw-file cap for browser-local decoding. */
+  maxFileBytes?: number | null;
+}
+
+function maxFileBytes(options?: DecodeFigOptions): number | null {
+  return options?.maxFileBytes === undefined
+    ? MAX_FIG_FILE_BYTES
+    : options.maxFileBytes;
+}
+
 function sha1(buf: Uint8Array): string {
   return sha1Hex(buf);
 }
@@ -205,9 +216,15 @@ function decompressChunk(buf: Uint8Array): Uint8Array {
   return checkDecompressedSize(buf.slice());
 }
 
-export function decodeKiwiContainer(file: Uint8Array): DecodedFigKiwi {
-  if (file.length > MAX_FIG_FILE_BYTES) {
-    throw new Error(".fig file is too large (max 50 MB).");
+export function decodeKiwiContainer(
+  file: Uint8Array,
+  options?: DecodeFigOptions,
+): DecodedFigKiwi {
+  const fileLimit = maxFileBytes(options);
+  if (fileLimit !== null && file.length > fileLimit) {
+    throw new Error(
+      `.fig file is too large (max ${Math.round(fileLimit / 1024 / 1024)} MB).`,
+    );
   }
   if (
     !bytesEqual(file.subarray(0, 8), FIG_KIWI_MAGIC) &&
@@ -824,9 +841,15 @@ function assertSafeBinarySchemaShape(schemaBuf: Uint8Array): void {
 
 // Handles both modern fig-kiwi files and legacy zip-format archives.
 // `document` is null if kiwi decoding failed.
-export function decodeFig(file: Uint8Array): DecodedFig {
-  if (file.length > MAX_FIG_FILE_BYTES) {
-    throw new Error(".fig file is too large (max 50 MB).");
+export function decodeFig(
+  file: Uint8Array,
+  options?: DecodeFigOptions,
+): DecodedFig {
+  const fileLimit = maxFileBytes(options);
+  if (fileLimit !== null && file.length > fileLimit) {
+    throw new Error(
+      `.fig file is too large (max ${Math.round(fileLimit / 1024 / 1024)} MB).`,
+    );
   }
   if (isZip(file)) {
     const entries = readZip(file);
@@ -837,7 +860,7 @@ export function decodeFig(file: Uint8Array): DecodedFig {
     let version: number | undefined;
     let extraBlobs: Uint8Array[] = [];
     if (!canvasEntry) throw new Error(".fig zip is missing canvas.fig.");
-    const inner = decodeKiwiContainer(canvasEntry.data);
+    const inner = decodeKiwiContainer(canvasEntry.data, options);
     version = inner.version;
     extraBlobs = inner.blobs;
     const kiwiResult = decodeKiwiDocument(inner.schema, inner.document);
@@ -872,7 +895,7 @@ export function decodeFig(file: Uint8Array): DecodedFig {
     };
   }
 
-  const decoded = decodeKiwiContainer(file);
+  const decoded = decodeKiwiContainer(file, options);
   const kiwiResult = decodeKiwiDocument(decoded.schema, decoded.document);
   const images = collectImagesFromBlobs(decoded.blobs);
   const thumbnail = findThumbnail(decoded.document, decoded.blobs);