@agent-native/core 0.128.0 → 0.128.1

package/corpus/templates/design/app/i18n-data.ts

@@ -1422,6 +1422,7 @@ const enUS = {
     figmaParsingTitle: "Starting Builder DSI indexing...",
     figmaParsingDescription:
       "Builder will extract tokens, components, assets, and usage guidance",
+    figmaDecodeFailed: "Decoding failed: {{error}}",
     uploadFig: "Connect Figma with a .fig file",
     figmaSaveLocalCopy:
       "Upload a local copy from Figma: File -> Save local copy",
@@ -1891,6 +1892,7 @@ const designLocaleOverrides = {
         "通过 Builder DSI 连接 Figma、代码和可选的 design.md 指引。上下文越多，代理得到的系统越准确。",
       figmaParsingTitle: "正在启动 Builder DSI 索引...",
       figmaParsingDescription: "Builder 会提取令牌、组件、资产和使用指引",
+      figmaDecodeFailed: "解码失败：{{error}}",
       uploadFig: "连接 Figma .fig 文件",
       figmaSaveLocalCopy: "上传 Figma 本地副本：File -> Save local copy",
       websiteUrl: "网站URL",
@@ -2295,6 +2297,7 @@ const designLocaleOverrides = {
       figmaParsingTitle: "Iniciando indexación de Builder DSI...",
       figmaParsingDescription:
         "Builder extraerá tokens, componentes, recursos y guía de uso.",
+      figmaDecodeFailed: "Error al decodificar: {{error}}",
       uploadFig: "Conectar Figma con un archivo .fig",
       figmaSaveLocalCopy:
         "Sube una copia local de Figma: File -> Save local copy",
@@ -2720,6 +2723,7 @@ const designLocaleOverrides = {
       figmaParsingTitle: "Démarrage de l’indexation Builder DSI...",
       figmaParsingDescription:
         "Builder extraira les jetons, composants, ressources et consignes d’utilisation",
+      figmaDecodeFailed: "Échec du décodage : {{error}}",
       uploadFig: "Connecter Figma avec un fichier .fig",
       figmaSaveLocalCopy:
         "Importez une copie locale Figma : File -> Save local copy",
@@ -3145,6 +3149,7 @@ const designLocaleOverrides = {
       figmaParsingTitle: "Builder-DSI-Indizierung wird gestartet...",
       figmaParsingDescription:
         "Builder extrahiert Tokens, Komponenten, Assets und Nutzungsanweisungen",
+      figmaDecodeFailed: "Dekodierung fehlgeschlagen: {{error}}",
       uploadFig: "Figma mit einer .fig-Datei verbinden",
       figmaSaveLocalCopy:
         "Lade eine lokale Figma-Kopie hoch: File -> Save local copy",
@@ -3570,6 +3575,7 @@ const designLocaleOverrides = {
       figmaParsingTitle: "Builder DSI のインデックス作成を開始しています...",
       figmaParsingDescription:
         "Builder がトークン、コンポーネント、アセット、利用ガイドを抽出します",
+      figmaDecodeFailed: "デコードに失敗しました: {{error}}",
       uploadFig: "Figma .fig ファイルを接続",
       figmaSaveLocalCopy:
         "Figma のローカルコピーをアップロード: File -> Save local copy",
@@ -3990,6 +3996,7 @@ const designLocaleOverrides = {
       figmaParsingTitle: "Builder DSI 색인 생성을 시작하는 중...",
       figmaParsingDescription:
         "Builder가 토큰, 컴포넌트, 자산, 사용 지침을 추출합니다",
+      figmaDecodeFailed: "디코딩에 실패했습니다: {{error}}",
       uploadFig: "Figma .fig 파일 연결",
       figmaSaveLocalCopy: "Figma 로컬 사본 업로드: File -> Save local copy",
       websiteUrl: "웹사이트 URL",
@@ -4404,6 +4411,7 @@ const designLocaleOverrides = {
       figmaParsingTitle: "Iniciando indexação do Builder DSI...",
       figmaParsingDescription:
         "Builder extrairá tokens, componentes, recursos e orientações de uso",
+      figmaDecodeFailed: "Falha na decodificação: {{error}}",
       uploadFig: "Conectar Figma com um arquivo .fig",
       figmaSaveLocalCopy:
         "Envie uma cópia local do Figma: File -> Save local copy",
@@ -4824,6 +4832,7 @@ const designLocaleOverrides = {
       figmaParsingTitle: "Builder DSI indexing शुरू की जा रही है...",
       figmaParsingDescription:
         "Builder टोकन, कंपोनेंट, एसेट और उपयोग मार्गदर्शन निकालेगा",
+      figmaDecodeFailed: "डिकोडिंग विफल: {{error}}",
       uploadFig: "Figma .fig फ़ाइल कनेक्ट करें",
       figmaSaveLocalCopy: "Figma स्थानीय कॉपी अपलोड करें: File -> Save local copy",
       websiteUrl: "वेबसाइट URL",
@@ -5234,6 +5243,7 @@ const designLocaleOverrides = {
       figmaParsingTitle: "جارٍ بدء فهرسة Builder DSI...",
       figmaParsingDescription:
         "سيستخرج Builder الرموز والمكونات والأصول وإرشادات الاستخدام",
+      figmaDecodeFailed: "فشل فك الترميز: {{error}}",
       uploadFig: "ربط Figma بملف .fig",
       figmaSaveLocalCopy: "حمّل نسخة Figma محلية: File -> Save local copy",
       websiteUrl: "موقع URL",

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

@@ -0,0 +1,280 @@
+import { appApiPath } from "@agent-native/core/client/api-path";
+
+// 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;
+}
+
+export interface BuilderIndexResult {
+  designSystemId: string;
+  localDesignSystemId?: string;
+  builderUrl?: string;
+  suggestedTitle?: string | null;
+  status?: string;
+  uploadedFileCount?: number;
+  [key: string]: unknown;
+}
+
+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),
+    }),
+  });
+  const json = await readJson(res);
+  if (!res.ok || json?.error) {
+    throw new Error(json?.error || `Indexing failed (${res.status})`);
+  }
+  return json as BuilderIndexResult;
+}
+
+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/design/app/pages/DesignSystemSetup.tsx

@@ -1,4 +1,3 @@
-import { appApiPath } from "@agent-native/core/client/api-path";
 import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { openAgentSidebar } from "@agent-native/core/client/navigation";
@@ -30,6 +29,11 @@ import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
 import { Textarea } from "@/components/ui/textarea";
 import { sendToDesignAgentChat } from "@/lib/agent-chat";
+import {
+  uploadAndIndexFigmaFiles,
+  pollDecodeJobStatus,
+  type DecodeJobStatus,
+} from "@/lib/builder-design-system-upload";
 
 interface GitHubLink {
   id: string;
@@ -58,20 +62,6 @@ interface BuilderIndexResult {
   instructions?: string;
 }
 
-async function readJsonResponse(res: Response): Promise<any> {
-  const text = await res.text();
-  if (!text.trim()) return {};
-  try {
-    return JSON.parse(text);
-  } catch {
-    return {
-      error: res.ok
-        ? "The server returned an invalid response."
-        : text.slice(0, 240),
-    };
-  }
-}
-
 export default function DesignSystemSetup() {
   const t = useT();
   const navigate = useNavigate();
@@ -117,6 +107,62 @@ export default 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;
+  }, []);
+
+  useEffect(() => stopDecodePolling, [stopDecodePolling]);
+
+  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);
+        });
+    },
+    [],
+  );
 
   const handleBuilderIndexUpload = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -129,33 +175,35 @@ export default 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 json = await readJsonResponse(res);
-        if (!res.ok || json?.error) {
-          throw new Error(json?.error || `Upload failed (${res.status})`);
+        const suggestedTitle =
+          file.name
+            .replace(/\.fig$/i, "")
+            .replace(/[-_]+/g, " ")
+            .trim() || "Imported brand";
+        const json = await uploadAndIndexFigmaFiles([file], {
+          projectName: suggestedTitle,
+        });
+        const parsed = json as unknown as BuilderIndexResult;
+        if (parsed.jobId) {
+          startDecodePolling(parsed.jobId, parsed);
+        } else {
+          setBuilderIndexResult(parsed);
+          setBuilderIndexing(false);
         }
-        setBuilderIndexResult(json as BuilderIndexResult);
       } catch (err) {
         setBuilderIndexError(
           err instanceof Error
             ? err.message
             : t("designSystemSetup.errors.parseFig"),
         );
-      } finally {
         setBuilderIndexing(false);
       }
     },
-    [t],
+    [t, startDecodePolling, stopDecodePolling],
   );
 
   useEffect(() => {
@@ -606,7 +654,10 @@ export default function DesignSystemSetup() {
               ) : (
                 <BuilderIndexPreview
                   result={builderIndexResult}
+                  decodeStatus={decodeStatus}
                   onReset={() => {
+                    stopDecodePolling();
+                    setDecodeStatus(null);
                     setBuilderIndexResult(null);
                     setBuilderIndexError(null);
                   }}
@@ -1076,12 +1127,16 @@ function FileList({
 
 function BuilderIndexPreview({
   result,
+  decodeStatus,
   onReset,
 }: {
   result: BuilderIndexResult;
+  decodeStatus: DecodeJobStatus | null;
   onReset: () => void;
 }) {
   const t = useT();
+  const decodeError =
+    decodeStatus?.status === "error" ? decodeStatus.error : null;
 
   return (
     <div className="space-y-4 rounded-xl border border-border bg-card p-4">
@@ -1101,30 +1156,11 @@ function BuilderIndexPreview({
         </div>
       </div>
 
-      <dl className="grid grid-cols-[112px_minmax(0,1fr)] gap-x-3 gap-y-2 rounded-lg border border-border bg-muted/25 p-3 text-xs">
-        <dt className="text-muted-foreground">
-          {"Status" /* i18n-ignore Builder indexing field */}
-        </dt>
-        <dd className="font-medium text-foreground">{result.status}</dd>
-        <dt className="text-muted-foreground">
-          {"Project" /* i18n-ignore Builder indexing field */}
-        </dt>
-        <dd className="truncate font-mono !text-[11px] text-foreground/80">
-          {result.projectId}
-        </dd>
-        <dt className="text-muted-foreground">
-          {"Job" /* i18n-ignore Builder indexing field */}
-        </dt>
-        <dd className="truncate font-mono !text-[11px] text-foreground/80">
-          {result.jobId}
-        </dd>
-        <dt className="text-muted-foreground">
-          {"Design system" /* i18n-ignore Builder indexing field */}
-        </dt>
-        <dd className="truncate font-mono !text-[11px] text-foreground/80">
-          {result.designSystemId}
-        </dd>
-      </dl>
+      {decodeError ? (
+        <p role="alert" className="text-xs text-destructive">
+          {t("designSystemSetup.figmaDecodeFailed", { error: decodeError })}
+        </p>
+      ) : null}
 
       <div className="flex items-center gap-2 border-t border-border pt-4">
         {result.builderUrl ? (

package/corpus/templates/design/changelog/2026-07-28-figma-fig-uploads-now-show-indexing-progress-and-an-open-in-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-28
+---
+
+Figma .fig uploads now show indexing progress and an Open in Builder link to the generated project once decoding finishes.

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

@@ -0,0 +1,49 @@
+import {
+  FeatureNotConfiguredError,
+  fetchBuilderDesignSystemDecodeJobStatus,
+  getSession,
+  runWithRequestContext,
+} from "@agent-native/core/server";
+import { defineEventHandler, getQuery, setResponseStatus } from "h3";
+
+/**
+ * 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 runWithRequestContext(
+      { userEmail: session.email, orgId: session.orgId },
+      () => 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.",
+    };
+  }
+});