@agent-native/core 0.127.3 → 0.128.1

package/corpus/templates/slides/app/components/design-system/DesignSystemSetup.tsx

@@ -1,5 +1,4 @@
 import { sendToAgentChat } from "@agent-native/core/client/agent-chat";
-import { appApiPath } from "@agent-native/core/client/api-path";
 import {
   useActionQuery,
   useActionMutation,
@@ -36,9 +35,13 @@ import { Label } from "@/components/ui/label";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Textarea } from "@/components/ui/textarea";
 
+import {
+  uploadAndIndexFigmaFiles,
+  pollDecodeJobStatus,
+  type DecodeJobStatus,
+} from "./builder-design-system-upload";
 import {
   MAX_BUILDER_INDEX_UPLOAD_BYTES,
-  readBuilderIndexResponse,
   formatFileSize,
   type BuilderIndexResult,
 } from "./builder-index-response";
@@ -117,6 +120,62 @@ export function DesignSystemSetup({
   const [builderIndexError, setBuilderIndexError] = useState<string | null>(
     null,
   );
+  const [decodeStatus, setDecodeStatus] = useState<DecodeJobStatus | null>(
+    null,
+  );
+  const decodePollRef = useRef<AbortController | null>(null);
+
+  const stopDecodePolling = useCallback(() => {
+    decodePollRef.current?.abort();
+    decodePollRef.current = null;
+  }, []);
+
+  const startDecodePolling = useCallback(
+    (jobId: string, indexResult: BuilderIndexResult) => {
+      decodePollRef.current?.abort();
+      const controller = new AbortController();
+      decodePollRef.current = controller;
+      setDecodeStatus({
+        status: "pending",
+        branchUrl: null,
+        error: null,
+        framesProcessed: 0,
+        totalFrames: 0,
+      });
+      pollDecodeJobStatus(jobId, {
+        signal: controller.signal,
+        onUpdate: (status) => {
+          if (!controller.signal.aborted) setDecodeStatus(status);
+        },
+      })
+        .then((status) => {
+          if (controller.signal.aborted) return;
+          setDecodeStatus(status);
+          setBuilderIndexResult(
+            status.branchUrl
+              ? { ...indexResult, builderUrl: status.branchUrl }
+              : indexResult,
+          );
+          setBuilderIndexing(false);
+        })
+        .catch((err: unknown) => {
+          if (controller.signal.aborted) return;
+          if (err instanceof DOMException && err.name === "AbortError") return;
+          setDecodeStatus((prev) => ({
+            status: "error",
+            branchUrl: prev?.branchUrl ?? null,
+            error: err instanceof Error ? err.message : String(err),
+            framesProcessed: prev?.framesProcessed ?? 0,
+            totalFrames: prev?.totalFrames ?? 0,
+          }));
+          setBuilderIndexResult(indexResult);
+          setBuilderIndexing(false);
+        });
+    },
+    [],
+  );
+
+  useEffect(() => stopDecodePolling, [stopDecodePolling]);
 
   const codeInputRef = useRef<HTMLInputElement>(null);
   const docInputRef = useRef<HTMLInputElement>(null);
@@ -170,8 +229,10 @@ export function DesignSystemSetup({
       setBuilderIndexing(false);
       setBuilderIndexResult(null);
       setBuilderIndexError(null);
+      stopDecodePolling();
+      setDecodeStatus(null);
     }
-  }, [open]);
+  }, [open, stopDecodePolling]);
 
   const hasAnySources = useMemo(() => {
     return (
@@ -269,30 +330,34 @@ export function DesignSystemSetup({
 
       setBuilderIndexError(null);
       setBuilderIndexResult(null);
+      stopDecodePolling();
+      setDecodeStatus(null);
       setBuilderIndexing(true);
       try {
-        const body = new FormData();
-        body.append("file", file);
-        const res = await fetch(
-          appApiPath("/api/index-design-system-with-builder"),
-          {
-            method: "POST",
-            body,
-          },
-        );
-        const parsed = await readBuilderIndexResponse(res);
-        setBuilderIndexResult(parsed);
+        const suggestedTitle =
+          file.name
+            .replace(/\.fig$/i, "")
+            .replace(/[-_]+/g, " ")
+            .trim() || "Imported brand";
+        const parsed = await uploadAndIndexFigmaFiles([file], {
+          projectName: suggestedTitle,
+        });
+        if (parsed.jobId) {
+          startDecodePolling(parsed.jobId, parsed);
+        } else {
+          setBuilderIndexResult(parsed);
+          setBuilderIndexing(false);
+        }
       } catch (err) {
         setBuilderIndexError(
           err instanceof Error
             ? err.message
             : t("designSystemSetup.figParseFailed"),
         );
-      } finally {
         setBuilderIndexing(false);
       }
     },
-    [t],
+    [t, startDecodePolling, stopDecodePolling],
   );
 
   const handleEditSave = async () => {
@@ -543,7 +608,10 @@ export function DesignSystemSetup({
                   ) : (
                     <BuilderIndexPreview
                       result={builderIndexResult}
+                      decodeStatus={decodeStatus}
                       onReset={() => {
+                        stopDecodePolling();
+                        setDecodeStatus(null);
                         setBuilderIndexResult(null);
                         setBuilderIndexError(null);
                       }}
@@ -880,12 +948,22 @@ function TagList({
 
 function BuilderIndexPreview({
   result,
+  decodeStatus,
   onReset,
 }: {
   result: BuilderIndexResult;
+  decodeStatus: DecodeJobStatus | null;
   onReset: () => void;
 }) {
   const t = useT();
+  const decodeDone =
+    decodeStatus == null ||
+    Boolean(decodeStatus.branchUrl) ||
+    decodeStatus.status === "complete";
+  const decodeFailed = decodeStatus?.status === "error";
+  const decodeText = decodeFailed
+    ? t("designSystemSetup.decodeFailed", { error: decodeStatus?.error ?? "" })
+    : null;
   return (
     <div className="space-y-4 rounded-lg border border-border bg-accent/40 p-4">
       <div className="flex items-start gap-3">
@@ -905,44 +983,39 @@ function BuilderIndexPreview({
         </div>
       </div>
 
-      <dl className="grid grid-cols-[112px_minmax(0,1fr)] gap-x-3 gap-y-2 rounded-md border border-border bg-card/50 p-3 text-xs">
-        <dt className="text-muted-foreground">
-          {t("designSystemSetup.builderDesignSystemId")}
-        </dt>
-        <dd className="truncate font-mono text-foreground/80">
-          {result.designSystemId}
-        </dd>
-        <dt className="text-muted-foreground">
-          {t("designSystemSetup.builderJobId")}
-        </dt>
-        <dd className="truncate font-mono text-foreground/80">
-          {result.jobId}
-        </dd>
-      </dl>
-
-      <div className="flex flex-wrap items-center gap-2 border-t border-border pt-3">
-        <Button size="sm" asChild className="cursor-pointer">
-          <a
-            href={withBuilderUtmTrackingParams(result.builderUrl, {
-              campaign: "product",
-              content: "design_system_intelligence",
-            })}
-            target="_blank"
-            rel="noreferrer"
+      {decodeText && (
+        <div className="border-t border-border pt-3 text-xs text-destructive">
+          {decodeText}
+        </div>
+      )}
+
+      {(decodeDone || decodeFailed) && (
+        <div className="flex flex-wrap items-center gap-2 border-t border-border pt-3">
+          {decodeDone && !decodeFailed && (
+            <Button size="sm" asChild className="cursor-pointer">
+              <a
+                href={withBuilderUtmTrackingParams(result.builderUrl, {
+                  campaign: "product",
+                  content: "design_system_intelligence",
+                })}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <IconExternalLink className="w-3.5 h-3.5" />
+                {t("designSystemSetup.openInBuilder")}
+              </a>
+            </Button>
+          )}
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={onReset}
+            className="cursor-pointer"
           >
-            <IconExternalLink className="w-3.5 h-3.5" />
-            {t("designSystemSetup.openInBuilder")}
-          </a>
-        </Button>
-        <Button
-          size="sm"
-          variant="ghost"
-          onClick={onReset}
-          className="cursor-pointer"
-        >
-          {t("designSystemSetup.chooseAnotherFile")}
-        </Button>
-      </div>
+            {t("designSystemSetup.chooseAnotherFile")}
+          </Button>
+        </div>
+      )}
     </div>
   );
 }

package/corpus/templates/slides/app/components/design-system/builder-design-system-upload.ts

@@ -0,0 +1,271 @@
+import { appApiPath } from "@agent-native/core/client/api-path";
+
+import {
+  type BuilderIndexResult,
+  readBuilderIndexResponse,
+} from "./builder-index-response";
+
+// GCS resumable uploads require every chunk except the last to be a multiple
+// of 256 KiB. 16 MiB is the recommended default and keeps very large `.fig`
+// files off a single request body (the serverless host caps bodies well below
+// Figma export sizes).
+const GCS_CHUNK_SIZE = 16 * 1024 * 1024;
+const MAX_CHUNK_RETRIES = 5;
+
+interface UploadSlot {
+  idx: number;
+  uploadUrl: string;
+  uploadToken: string;
+}
+
+async function readJson(res: Response): Promise<any> {
+  try {
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
+async function requestUploadSlots(files: File[]): Promise<UploadSlot[]> {
+  const res = await fetch(appApiPath("/api/design-system-upload-start"), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      attachments: files.map((file) => ({
+        name: file.name,
+        mimetype: file.type || "application/octet-stream",
+        declaredSize: file.size,
+      })),
+    }),
+  });
+  const json = await readJson(res);
+  if (!res.ok || json?.error) {
+    throw new Error(json?.error || `Failed to start upload (${res.status})`);
+  }
+  const slots = Array.isArray(json?.uploads)
+    ? ([...json.uploads] as UploadSlot[]).sort((a, b) => a.idx - b.idx)
+    : [];
+  if (slots.length !== files.length) {
+    throw new Error("Upload could not be started for all files.");
+  }
+  return slots;
+}
+
+async function initiateResumableSession(
+  uploadUrl: string,
+  mimetype: string,
+  fileSize: number,
+): Promise<string> {
+  const response = await fetch(uploadUrl, {
+    method: "POST",
+    headers: {
+      "x-goog-resumable": "start",
+      // The signed URL commits to the exact declared size; echo it back
+      // byte-for-byte or GCS rejects the session.
+      "x-goog-content-length-range": `0,${fileSize}`,
+      "Content-Type": mimetype,
+    },
+  });
+  if (!response.ok) {
+    throw new Error(`Failed to initiate upload session (${response.status})`);
+  }
+  const sessionUri = response.headers.get("Location");
+  if (!sessionUri) {
+    throw new Error("Upload session URI missing from storage response");
+  }
+  return sessionUri;
+}
+
+// GCS reports the highest committed byte in a `Range: bytes=0-<end>` header.
+function committedOffsetFromRange(response: Response): number | null {
+  const match = response.headers.get("Range")?.match(/bytes=0-(\d+)/);
+  return match ? parseInt(match[1], 10) + 1 : null;
+}
+
+async function queryCommittedOffset(
+  sessionUri: string,
+  total: number,
+): Promise<number> {
+  const response = await fetch(sessionUri, {
+    method: "PUT",
+    headers: { "Content-Range": `bytes */${total}` },
+  });
+  if (response.status === 200 || response.status === 201) return total;
+  if (response.status === 308) return committedOffsetFromRange(response) ?? 0;
+  throw new Error(`Failed to query upload status (${response.status})`);
+}
+
+function delay(ms: number, signal?: AbortSignal): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (signal?.aborted) {
+      return reject(new DOMException("Aborted", "AbortError"));
+    }
+    const timer = setTimeout(resolve, ms);
+    signal?.addEventListener(
+      "abort",
+      () => {
+        clearTimeout(timer);
+        reject(new DOMException("Aborted", "AbortError"));
+      },
+      { once: true },
+    );
+  });
+}
+
+async function streamFileToStorage(
+  slot: UploadSlot,
+  file: File,
+  onProgress: (uploadedBytes: number) => void,
+): Promise<void> {
+  const mimetype = file.type || "application/octet-stream";
+  const sessionUri = await initiateResumableSession(
+    slot.uploadUrl,
+    mimetype,
+    file.size,
+  );
+  const total = file.size;
+
+  if (total === 0) {
+    const response = await fetch(sessionUri, {
+      method: "PUT",
+      headers: { "Content-Range": "bytes */0" },
+      body: new Uint8Array(0),
+    });
+    if (response.status !== 200 && response.status !== 201) {
+      throw new Error(
+        `Failed to finalize zero-byte upload (${response.status})`,
+      );
+    }
+    onProgress(0);
+    return;
+  }
+
+  let offset = 0;
+  let retries = 0;
+  while (offset < total) {
+    const end = Math.min(offset + GCS_CHUNK_SIZE, total);
+    const isLast = end === total;
+    try {
+      const response = await fetch(sessionUri, {
+        method: "PUT",
+        headers: { "Content-Range": `bytes ${offset}-${end - 1}/${total}` },
+        body: file.slice(offset, end),
+      });
+      if (response.status === 200 || response.status === 201) {
+        offset = total;
+      } else if (!isLast && response.status === 308) {
+        const nextOffset = committedOffsetFromRange(response) ?? offset;
+        if (nextOffset <= offset) {
+          throw new Error(`Upload stalled at byte ${offset}`);
+        }
+        offset = nextOffset;
+      } else {
+        throw new Error(`Unexpected upload status ${response.status}`);
+      }
+      retries = 0;
+      onProgress(offset);
+    } catch (err) {
+      if (++retries > MAX_CHUNK_RETRIES) throw err;
+      await delay(500 * retries);
+      try {
+        offset = await queryCommittedOffset(sessionUri, total);
+      } catch {
+        // If the offset query also fails, retry from the last local offset —
+        // GCS's resumable PUT safely re-acknowledges bytes it already has.
+      }
+      onProgress(offset);
+    }
+  }
+}
+
+export interface UploadAndIndexOptions {
+  projectName?: string;
+  onProgress?: (fraction: number) => void;
+}
+
+/**
+ * Streams `.fig`/design files straight to storage in resumable chunks, then
+ * finalizes Builder DSI indexing with the resulting upload tokens. No file
+ * bytes pass through the app server, so arbitrarily large Figma files work.
+ */
+export async function uploadAndIndexFigmaFiles(
+  files: File[],
+  options: UploadAndIndexOptions = {},
+): Promise<BuilderIndexResult> {
+  if (files.length === 0) throw new Error("No files to upload.");
+
+  const slots = await requestUploadSlots(files);
+
+  const totalBytes = files.reduce((sum, file) => sum + file.size, 0) || 1;
+  const uploadedPerFile = new Array<number>(files.length).fill(0);
+  for (let i = 0; i < files.length; i++) {
+    await streamFileToStorage(slots[i], files[i], (uploaded) => {
+      uploadedPerFile[i] = uploaded;
+      const done = uploadedPerFile.reduce((sum, n) => sum + n, 0);
+      options.onProgress?.(Math.min(done / totalBytes, 1));
+    });
+  }
+
+  const res = await fetch(appApiPath("/api/index-design-system-sources"), {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      projectName: options.projectName,
+      uploadTokens: slots.map((slot) => slot.uploadToken),
+    }),
+  });
+  return readBuilderIndexResponse(res);
+}
+
+export interface DecodeJobStatus {
+  status: "pending" | "processing" | "complete" | "error";
+  branchUrl: string | null;
+  error: string | null;
+  framesProcessed: number;
+  totalFrames: number;
+}
+
+const DECODE_JOB_POLL_INTERVAL_MS = 5_000;
+const DECODE_JOB_MAX_POLLS = 120; // ~10 min at 5s, so a stuck job can't loop forever
+
+export interface PollDecodeJobOptions {
+  signal?: AbortSignal;
+  onUpdate?: (status: DecodeJobStatus) => void;
+}
+
+/**
+ * After indexing returns a jobId, the `.fig` decode job is still `pending` with
+ * no branchUrl. Poll until the branch appears or the job reaches a terminal
+ * state. A job that reports `status: "error"` resolves so the caller can read
+ * `status.error`; network failures, timeouts, and aborts reject.
+ */
+export async function pollDecodeJobStatus(
+  jobId: string,
+  options: PollDecodeJobOptions = {},
+): Promise<DecodeJobStatus> {
+  const { signal, onUpdate } = options;
+  const path = appApiPath(
+    `/api/design-system-decode-job-status?jobId=${encodeURIComponent(jobId)}`,
+  );
+  for (let i = 0; i < DECODE_JOB_MAX_POLLS; i++) {
+    if (signal?.aborted) throw new DOMException("Aborted", "AbortError");
+    const res = await fetch(path, { signal });
+    const json = await readJson(res);
+    if (!res.ok || json?.error) {
+      throw new Error(json?.error || `Status check failed (${res.status})`);
+    }
+    const status = json as DecodeJobStatus;
+    onUpdate?.(status);
+    if (
+      status.branchUrl ||
+      status.status === "complete" ||
+      status.status === "error"
+    ) {
+      return status;
+    }
+    await delay(DECODE_JOB_POLL_INTERVAL_MS, signal);
+  }
+  throw new Error(
+    "Timed out waiting for the design system to finish decoding.",
+  );
+}

package/corpus/templates/slides/app/components/design-system/builder-index-response.ts

@@ -13,7 +13,7 @@ export interface BuilderIndexResult {
   builderConnectUrl?: string;
 }
 
-export const MAX_BUILDER_INDEX_UPLOAD_BYTES = 200 * 1024 * 1024;
+export const MAX_BUILDER_INDEX_UPLOAD_BYTES = 512 * 1024 * 1024;
 
 export function formatFileSize(bytes: number): string {
   return `${Math.round(bytes / 1024 / 1024)} MB`;

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

@@ -537,6 +537,7 @@ const messages = {
     builderDesignSystemId: "Design system",
     builderJobId: "Job",
     openInBuilder: "Open in Builder",
+    decodeFailed: "Decoding failed: {{error}}",
     websiteUrl: "Website URL",
     websitePlaceholder: "example.com or Nike",
     add: "Add",

package/corpus/templates/slides/server/handlers/design-system-decode-job-status.ts

@@ -0,0 +1,49 @@
+import {
+  FeatureNotConfiguredError,
+  fetchBuilderDesignSystemDecodeJobStatus,
+  getSession,
+} from "@agent-native/core/server";
+import { defineEventHandler, getQuery, setResponseStatus } from "h3";
+
+import { withSlidesRequestContext } from "./request-auth-context.js";
+
+/**
+ * Reads a Builder design-system decode job's status. The UI polls this after
+ * `/api/index-design-system-sources` returns a jobId, until the `.fig` decode
+ * job leaves `pending` and exposes a `branchUrl` (or reports an `error`).
+ */
+export const designSystemDecodeJobStatus = defineEventHandler(async (event) => {
+  const session = await getSession(event).catch(() => null);
+  if (!session?.email) {
+    setResponseStatus(event, 401);
+    return { error: "Unauthorized" };
+  }
+
+  const jobId = getQuery(event).jobId;
+  if (typeof jobId !== "string" || !jobId.trim()) {
+    setResponseStatus(event, 400);
+    return { error: "jobId is required." };
+  }
+
+  try {
+    return await withSlidesRequestContext(event, () =>
+      fetchBuilderDesignSystemDecodeJobStatus(jobId.trim()),
+    );
+  } catch (err) {
+    if (err instanceof FeatureNotConfiguredError) {
+      setResponseStatus(event, 412);
+      return {
+        error: err.message,
+        builderConnectUrl:
+          err.builderConnectUrl ?? "/_agent-native/builder/connect",
+      };
+    }
+    setResponseStatus(event, 502);
+    return {
+      error:
+        err instanceof Error
+          ? err.message
+          : "Failed to read decode job status.",
+    };
+  }
+});

package/corpus/templates/slides/server/handlers/design-system-upload-start.ts

@@ -0,0 +1,87 @@
+import {
+  FeatureNotConfiguredError,
+  getSession,
+  startBuilderDesignSystemUpload,
+} from "@agent-native/core/server";
+import { defineEventHandler, readBody, setResponseStatus } from "h3";
+
+import { withSlidesRequestContext } from "./request-auth-context.js";
+
+const MAX_FIG_BYTES = 512 * 1024 * 1024;
+
+interface AttachmentInput {
+  name?: unknown;
+  mimetype?: unknown;
+  declaredSize?: unknown;
+}
+
+/**
+ * Opens signed resumable-upload slots so the browser can stream large `.fig`
+ * bytes straight to storage. Only small JSON metadata rides through the app
+ * server; the file bytes never do.
+ */
+export const designSystemUploadStart = defineEventHandler(async (event) => {
+  const session = await getSession(event).catch(() => null);
+  if (!session?.email) {
+    setResponseStatus(event, 401);
+    return { error: "Unauthorized" };
+  }
+
+  const body = (await readBody(event).catch(() => null)) as {
+    attachments?: AttachmentInput[];
+  } | null;
+  const rawList = Array.isArray(body?.attachments) ? body.attachments : [];
+  if (rawList.length === 0) {
+    setResponseStatus(event, 400);
+    return { error: "No attachments provided." };
+  }
+
+  const attachments: {
+    name: string;
+    mimetype: string;
+    declaredSize: number;
+  }[] = [];
+  for (const raw of rawList) {
+    const name = typeof raw?.name === "string" ? raw.name.trim() : "";
+    const mimetype =
+      typeof raw?.mimetype === "string" && raw.mimetype.trim()
+        ? raw.mimetype.trim()
+        : "application/octet-stream";
+    const declaredSize = Number(raw?.declaredSize);
+    if (!name) {
+      setResponseStatus(event, 400);
+      return { error: "Attachment name is required." };
+    }
+    if (!Number.isSafeInteger(declaredSize) || declaredSize <= 0) {
+      setResponseStatus(event, 400);
+      return { error: "Attachment declaredSize must be a positive integer." };
+    }
+    if (declaredSize > MAX_FIG_BYTES) {
+      setResponseStatus(event, 413);
+      return {
+        error: `File too large (max ${Math.round(MAX_FIG_BYTES / 1024 / 1024)} MB).`,
+      };
+    }
+    attachments.push({ name, mimetype, declaredSize });
+  }
+
+  try {
+    const uploads = await withSlidesRequestContext(event, () =>
+      startBuilderDesignSystemUpload(attachments),
+    );
+    return { uploads };
+  } catch (err) {
+    if (err instanceof FeatureNotConfiguredError) {
+      setResponseStatus(event, 412);
+      return {
+        error: err.message,
+        builderConnectUrl:
+          err.builderConnectUrl ?? "/_agent-native/builder/connect",
+      };
+    }
+    setResponseStatus(event, 502);
+    return {
+      error: err instanceof Error ? err.message : "Failed to start upload.",
+    };
+  }
+});