@agent-native/core 0.128.0 → 0.128.2

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.",
+    };
+  }
+});

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

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

package/corpus/templates/design/server/handlers/index-design-system-sources.ts

@@ -0,0 +1,82 @@
+import {
+  FeatureNotConfiguredError,
+  getSession,
+  indexBuilderDesignSystem,
+  runWithRequestContext,
+} from "@agent-native/core/server";
+import { defineEventHandler, readBody, setResponseStatus } from "h3";
+
+import { upsertBuilderProxyDesignSystem } from "../lib/builder-design-system-proxy.js";
+
+/**
+ * Finalizes Builder DSI indexing from upload tokens produced by the
+ * browser-streamed resumable upload. The file bytes were streamed straight to
+ * storage; this endpoint only forwards the opaque tokens.
+ */
+export const indexDesignSystemSources = 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 {
+    projectName?: unknown;
+    uploadTokens?: unknown;
+  } | null;
+  const uploadTokens = Array.isArray(body?.uploadTokens)
+    ? body.uploadTokens.filter(
+        (token): token is string =>
+          typeof token === "string" && token.length > 0,
+      )
+    : [];
+  if (uploadTokens.length === 0) {
+    setResponseStatus(event, 400);
+    return { error: "No uploaded files to index." };
+  }
+  const projectName =
+    typeof body?.projectName === "string"
+      ? body.projectName.trim() || undefined
+      : undefined;
+
+  const sources = uploadTokens.map((uploadToken) => ({
+    kind: "file" as const,
+    uploadToken,
+  }));
+
+  try {
+    return await runWithRequestContext(
+      { userEmail: session.email, orgId: session.orgId },
+      async () => {
+        const result = await indexBuilderDesignSystem({ sources, projectName });
+        const proxy = await upsertBuilderProxyDesignSystem({
+          result,
+          ownerEmail: session.email,
+          orgId: session.orgId ?? null,
+          projectName,
+        });
+        return {
+          ...result,
+          ...proxy,
+          uploadedFileCount: uploadTokens.length,
+        };
+      },
+    );
+  } 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
+          : "Builder design-system indexing failed.",
+    };
+  }
+});

package/corpus/templates/design/server/routes/api/design-system-decode-job-status.get.ts

@@ -0,0 +1 @@
+export { designSystemDecodeJobStatus as default } from "../../handlers/design-system-decode-job-status";

package/corpus/templates/design/server/routes/api/design-system-upload-start.post.ts

@@ -0,0 +1 @@
+export { designSystemUploadStart as default } from "../../handlers/design-system-upload-start";

package/corpus/templates/design/server/routes/api/index-design-system-sources.post.ts

@@ -0,0 +1 @@
+export { indexDesignSystemSources as default } from "../../handlers/index-design-system-sources";

package/corpus/templates/dispatch/_gitignore

@@ -9,8 +9,10 @@ npm-debug.log*
 pnpm-debug.log*
 
 node_modules
+build/
 dist
 dist-ssr
+.output/
 *.local
 
 # Editor directories and files

package/corpus/templates/forms/_gitignore

@@ -8,8 +8,10 @@ npm-debug.log*
 pnpm-debug.log*
 
 node_modules
+build/
 dist
 dist-ssr
+.output/
 *.local
 
 # Editor directories and files

package/corpus/templates/macros/_gitignore

@@ -8,8 +8,10 @@ npm-debug.log*
 pnpm-debug.log*
 
 node_modules
+build/
 dist
 dist-ssr
+.output/
 *.local
 
 # Editor directories and files

package/corpus/templates/mail/_gitignore

@@ -8,8 +8,10 @@ npm-debug.log*
 pnpm-debug.log*
 
 node_modules
+build/
 dist
 dist-ssr
+.output/
 *.local
 
 # Editor directories and files

package/corpus/templates/plan/_gitignore

@@ -9,8 +9,10 @@ npm-debug.log*
 pnpm-debug.log*
 
 node_modules
+build/
 dist
 dist-ssr
+.output/
 *.local
 
 # Editor directories and files

package/corpus/templates/slides/_gitignore

@@ -8,8 +8,10 @@ npm-debug.log*
 pnpm-debug.log*
 
 node_modules
+build/
 dist
 dist-ssr
+.output/
 *.local
 
 # Editor directories and files

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>
   );
 }