@agent-native/core 0.85.7 → 0.86.1

package/corpus/templates/design/app/pages/DesignSystemSetup.tsx

@@ -254,7 +254,7 @@ export default function DesignSystemSetup() {
         if (
           f.size < 200 * 1024 &&
           (f.name.match(
-            /\.(css|scss|sass|less|ts|tsx|js|jsx|json|html|svg|xml)$/i,
+            /\.(css|scss|sass|less|ts|tsx|js|jsx|json|html|svg|xml|md|markdown|mdx|txt)$/i,
           ) ||
             f.type.startsWith("text/"))
         ) {
@@ -362,10 +362,16 @@ export default function DesignSystemSetup() {
     const normalizedGithubLinks = pendingGithubUrl
       ? [...githubLinks, { id: "pending", url: pendingGithubUrl }]
       : githubLinks;
+    const readableCodeFiles = codeFiles.filter((f) => f.textContent);
+    const designMdFiles = readableCodeFiles.filter(isDesignMdFile);
+    const builderCodeFiles = readableCodeFiles.filter(
+      (file) => !isDesignMdFile(file),
+    );
+    const unreadableCodeFiles = codeFiles.filter((f) => !f.textContent);
 
     const parts: string[] = [];
     parts.push(
-      "Set up a design system from the following sources. Analyze each source, extract design tokens (colors, fonts, spacing, borders), and create a cohesive design system.",
+      "Set up a design system from the following sources. Use Builder Design System Intelligence (DSI) as the source of truth for reusable Figma/code/design.md indexing. Analyze each source, extract design tokens (colors, fonts, spacing, borders), and create a cohesive design system.",
     );
 
     if (companyInfo.trim()) {
@@ -380,34 +386,41 @@ export default function DesignSystemSetup() {
 
     if (normalizedGithubLinks.length > 0) {
       parts.push(
-        `\n## GitHub Repositories\nStart Builder design-system indexing for each repository with \`index-design-system-with-builder\`:\n${normalizedGithubLinks.map((l) => `- ${l.url}`).join("\n")}\n\nBuilder is the source of truth for repo/code design-system indexing. The action also creates a local selectable proxy design system for Design flows. If Builder is not connected, stop and tell me to connect Builder from Settings instead of asking me to paste repository credentials into chat.`,
+        `\n## Connect Code: GitHub Repositories\nStart Builder DSI indexing for each repository with \`index-design-system-with-builder\`:\n${normalizedGithubLinks.map((l) => `- ${l.url}`).join("\n")}\n\nBuilder is the source of truth for repo/code design-system indexing. The action also creates a local selectable proxy design system for Design flows. If Builder is not connected, stop and tell me to connect Builder from Settings instead of asking me to paste repository credentials into chat.`,
       );
     }
 
     if (codeFiles.length > 0) {
-      const withContent = codeFiles.filter((f) => f.textContent);
-      const withoutContent = codeFiles.filter((f) => !f.textContent);
-
-      if (withContent.length > 0) {
+      if (builderCodeFiles.length > 0) {
         parts.push(
-          `\n## Code Files (${withContent.length} files with content)\nStart Builder design-system indexing with \`index-design-system-with-builder\` using these files:`,
+          `\n## Connect Code: Code Files (${builderCodeFiles.length} files with content)\nStart Builder DSI indexing with \`index-design-system-with-builder\` using these files as the \`codeFiles\` argument:`,
         );
-        for (const f of withContent) {
+        for (const f of builderCodeFiles) {
           parts.push(
             `\n### ${f.name}\n\`\`\`\n${f.textContent!.slice(0, 5000)}\n\`\`\``,
           );
         }
       }
-      if (withoutContent.length > 0) {
+      if (designMdFiles.length > 0) {
+        parts.push(
+          `\n## Optional design.md (${designMdFiles.length} file${designMdFiles.length === 1 ? "" : "s"})\nPass this content as the \`designMd\` argument to \`index-design-system-with-builder\` alongside any Figma/code sources:`,
+        );
+        for (const f of designMdFiles) {
+          parts.push(
+            `\n### ${f.name}\n\`\`\`md\n${f.textContent!.slice(0, 5000)}\n\`\`\``,
+          );
+        }
+      }
+      if (unreadableCodeFiles.length > 0) {
         parts.push(
-          `\nBinary code files (could not read):\n${withoutContent.map((f) => `- ${f.name}`).join("\n")}`,
+          `\nBinary code files (could not read):\n${unreadableCodeFiles.map((f) => `- ${f.name}`).join("\n")}`,
         );
       }
     }
 
     if (builderIndexResult) {
       parts.push(
-        `\n## Builder-Indexed Figma File\nBuilder design-system indexing has already started.\n- Design system: ${builderIndexResult.designSystemId}\n- Local selectable design system: ${builderIndexResult.localDesignSystemId ?? "(not returned)"}\n- Project: ${builderIndexResult.projectId}\n- Job: ${builderIndexResult.jobId}\n- URL: ${builderIndexResult.builderUrl}\n\nUse Builder as the source of truth for extracted tokens, assets, and guidance. Do not call \`create-design-system\` again for this Builder-indexed source.`,
+        `\n## Connect Figma: Builder-Indexed Figma File\nBuilder DSI indexing has already started.\n- Design system: ${builderIndexResult.designSystemId}\n- Local selectable design system: ${builderIndexResult.localDesignSystemId ?? "(not returned)"}\n- Project: ${builderIndexResult.projectId}\n- Job: ${builderIndexResult.jobId}\n- URL: ${builderIndexResult.builderUrl}\n\nUse Builder as the source of truth for extracted tokens, assets, components, and guidance. Do not call \`create-design-system\` again for this Builder-indexed source.`,
       );
     }
 
@@ -454,7 +467,7 @@ export default function DesignSystemSetup() {
     }
 
     parts.push(
-      `\n---\nAfter processing all sources, if you started Builder design-system indexing, report the Builder job/design-system URL plus the local selectable design-system id returned by \`index-design-system-with-builder\`. Do not call \`create-design-system\` again for those Builder-indexed sources. If you processed non-Builder sources into concrete tokens, call \`create-design-system\` with the combined tokens${
+      `\n---\nAfter processing all sources, if you started Builder DSI indexing, report the Builder job/design-system URL plus the local selectable design-system id returned by \`index-design-system-with-builder\`. Do not call \`create-design-system\` again for Builder-indexed Figma/code/design.md sources. If you processed non-Builder sources into concrete tokens, call \`create-design-system\` with the combined tokens${
         customInstructions.trim()
           ? " AND the verbatim --customInstructions string from above"
           : ""
@@ -757,7 +770,7 @@ export default function DesignSystemSetup() {
                   ref={codeInputRef}
                   type="file"
                   multiple
-                  accept=".css,.scss,.sass,.less,.ts,.tsx,.js,.jsx,.json,.html,.svg"
+                  accept=".css,.scss,.sass,.less,.ts,.tsx,.js,.jsx,.json,.html,.svg,.xml,.md,.markdown,.mdx,.txt"
                   onChange={handleCodeUpload}
                   className="hidden"
                 />
@@ -1137,6 +1150,11 @@ function formatSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
 }
 
+function isDesignMdFile(file: UploadedFile): boolean {
+  const name = file.name.split(/[\\/]/).pop()?.toLowerCase() ?? file.name;
+  return name === "design.md" || name === "design.mdx";
+}
+
 function isHttpUrl(value: string): boolean {
   try {
     const url = new URL(value);

package/corpus/templates/design/app/pages/Index.tsx

@@ -4,6 +4,7 @@ import {
   useT,
 } from "@agent-native/core/client";
 import type { PromptComposerSubmitOptions } from "@agent-native/core/client";
+import { FULL_APP_BUILDING_ENABLED } from "@shared/full-app";
 import {
   IconChecks,
   IconPlus,
@@ -53,6 +54,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useDesignSystems } from "@/hooks/use-design-systems";
+import { sendToDesignAgentChat } from "@/lib/agent-chat";
 import {
   clearPendingGeneration,
   writePendingGeneration,
@@ -87,6 +89,13 @@ export default function Index() {
   const [newDesignSystemId, setNewDesignSystemId] = useState<
     string | null | undefined
   >(undefined);
+  // "Design" (default, inline prototype) vs "Full app" (Builder Fusion
+  // cloud container). Only reachable behind FULL_APP_BUILDING_ENABLED — the
+  // popover renders no mode control at all when the flag is off, so this
+  // state is always "design" in that case.
+  const [newDesignMode, setNewDesignMode] = useState<"design" | "app">(
+    "design",
+  );
   const [renameId, setRenameId] = useState<string | null>(null);
   const [renameDraft, setRenameDraft] = useState("");
 
@@ -101,6 +110,9 @@ export default function Index() {
   }>("list-designs", { includePreview: "true" });
 
   const createMutation = useActionMutation("create-design");
+  // Fires the fusion-backed cloud container build; only ever called when
+  // FULL_APP_BUILDING_ENABLED is true and the user picked "Full app".
+  const createFusionAppMutation = useActionMutation("create-fusion-app");
   const deleteMutation = useActionMutation("delete-design");
   const duplicateMutation = useActionMutation("duplicate-design");
   const updateMutation = useActionMutation("update-design");
@@ -141,7 +153,10 @@ export default function Index() {
 
   const handleNewPromptOpenChange = useCallback((open: boolean) => {
     setShowNewPrompt(open);
-    if (!open) setNewDesignSystemId(undefined);
+    if (!open) {
+      setNewDesignSystemId(undefined);
+      setNewDesignMode("design");
+    }
   }, []);
 
   useEffect(() => {
@@ -204,7 +219,7 @@ export default function Index() {
     (
       title: string,
       designSystemId?: string | null,
-    ): { id: string; title: string } => {
+    ): { id: string; title: string; ready: Promise<void> } => {
       const id = nanoid();
       const projectType: ProjectType = "prototype";
       const finalTitle = title.trim() || "Untitled Design";
@@ -229,8 +244,7 @@ export default function Index() {
         },
       );
 
-      // Fire mutation in background; keep the optimistic navigation instant.
-      void createMutation
+      const ready = createMutation
         .mutateAsync({
           id,
           title: finalTitle,
@@ -239,13 +253,17 @@ export default function Index() {
             ? { designSystemId: linkedDesignSystemId }
             : {}),
         } as any)
-        .catch(() => {
+        .then(() => undefined)
+        .catch((error) => {
           clearPendingGeneration(id);
           queryClient.invalidateQueries({
             queryKey: ["action", "list-designs"],
           });
+          throw error;
         });
-      return { id, title: finalTitle };
+      // Fire mutation in background; keep the optimistic navigation instant.
+      void ready.catch(() => {});
+      return { id, title: finalTitle, ready };
     },
     [queryClient, createMutation],
   );
@@ -266,21 +284,72 @@ export default function Index() {
           ? resolveDefaultDesignSystemId()
           : newDesignSystemId;
 
-      const { id, title } = createDesign(derivedTitle, designSystemId);
-
-      writePendingGeneration(id, {
-        prompt,
-        files,
-        title,
-        designSystemId,
-        skipQuestions: pendingOptions?.skipQuestions,
-        ...options,
-      });
+      const { id, title, ready } = createDesign(derivedTitle, designSystemId);
+
+      if (FULL_APP_BUILDING_ENABLED && newDesignMode === "app") {
+        // Full-app designs are backed by a real running container, not a
+        // queued inline generation — skip writePendingGeneration and let the
+        // fusion app mutation (and its own status/progress banner in the
+        // editor) drive the build instead.
+        void ready
+          .then(() =>
+            createFusionAppMutation.mutateAsync({
+              designId: id,
+              prompt,
+            } as any),
+          )
+          .then((result: any) => {
+            if (result?.status !== "not-configured") return;
+            // Builder isn't connected/configured, so no fusionApp linkage was
+            // written and no banner will render. Hand off to the agent chat,
+            // which owns the connect-Builder card flow, keeping the user's
+            // prompt so nothing is lost.
+            sendToDesignAgentChat({
+              message: `I want to build this design as a full app: ${prompt}`,
+              context:
+                `create-fusion-app returned status "not-configured" for design ` +
+                `${id}. ${result?.message ?? ""} Help the user connect ` +
+                `Builder.io (see connect-builder-app), then retry ` +
+                `create-fusion-app with the user's prompt.`,
+              submit: true,
+            });
+          })
+          .catch((error) => {
+            const message =
+              error instanceof Error && error.message
+                ? error.message
+                : String(error);
+            sendToDesignAgentChat({
+              message: `I want to build this design as a full app: ${prompt}`,
+              context:
+                `Starting the full-app build for design ${id} failed: ` +
+                `${message}. Check whether the design row exists, Builder is ` +
+                `connected, and create-fusion-app can be retried safely.`,
+              submit: true,
+            });
+          });
+      } else {
+        writePendingGeneration(id, {
+          prompt,
+          files,
+          title,
+          designSystemId,
+          skipQuestions: pendingOptions?.skipQuestions,
+          ...options,
+        });
+      }
 
       setNewDesignHandoffPending(true);
       navigate(`/design/${id}`);
     },
-    [createDesign, navigate, newDesignSystemId, resolveDefaultDesignSystemId],
+    [
+      createDesign,
+      createFusionAppMutation,
+      navigate,
+      newDesignMode,
+      newDesignSystemId,
+      resolveDefaultDesignSystemId,
+    ],
   );
 
   const handleDelete = useCallback(() => {
@@ -652,6 +721,10 @@ export default function Index() {
           handleNewPromptOpenChange(false);
           navigate("/design-systems/setup");
         }}
+        creationMode={FULL_APP_BUILDING_ENABLED ? newDesignMode : undefined}
+        onCreationModeChange={
+          FULL_APP_BUILDING_ENABLED ? setNewDesignMode : undefined
+        }
       />
 
       {/* Delete Confirmation */}

package/corpus/templates/design/changelog/2026-07-03-design-system-setup-now-indexes-figma-code-and-design-md-sou.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-03
+---
+
+Design system setup now indexes Figma, code, and design.md sources through Builder DSI.

package/corpus/templates/design/changelog/2026-07-03-the-ai-now-edits-like-a-collaborator-on-canvas-its-cursor-gl.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-07-03
+---
+
+The AI now edits like a collaborator on canvas: its cursor glides to the element it changes, with a labeled selection ring and a fading highlight after each edit

package/corpus/templates/design/changelog/2026-07-03-the-code-editor-is-easier-to-use-with-top-sidebar-tabs-clear.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-03
+---
+
+The code editor is easier to use with top sidebar tabs, clearer screen names, no minimap, and fewer false reload conflicts.

package/corpus/templates/design/changelog/2026-07-03-the-code-panel-is-now-a-full-vs-code-style-editor-with-a-fil.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-03
+---
+
+The Code panel is now a full VS Code-style editor with a file explorer, tabs, search, quick open (⌘P), a command palette, and automatic Prettier formatting

package/corpus/templates/design/package.json

@@ -35,6 +35,7 @@
     "nanoid": "^5.1.9",
     "pako": "^3.0.0",
     "pdf-parse": "^2.4.5",
+    "prettier": "^3.9.4",
     "yjs": "^13.6.31",
     "zod": "^4.3.6"
   },
@@ -67,8 +68,8 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.7",
-    "@react-router/dev": "^8.0.1",
-    "@react-router/fs-routes": "^8.0.1",
+    "@react-router/dev": "^8.1.0",
+    "@react-router/fs-routes": "^8.1.0",
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "catalog:",
     "@tanstack/react-query": "^5.99.2",
@@ -92,7 +93,7 @@
     "react-dom": "catalog:",
     "react-hook-form": "^7.71.2",
     "react-resizable-panels": "^4.10.0",
-    "react-router": "^8.0.1",
+    "react-router": "^8.1.0",
     "recharts": "^3.8.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",

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

@@ -201,6 +201,37 @@ export const designLocalhostWriteGrants = table(
   },
 );
 
+/**
+ * Queued AI edit requests for fusion-backed (full app) designs.
+ *
+ * Fusion screens are URL-backed iframes of a real running app, so edits cannot
+ * be applied synchronously to local HTML. Instead they queue here as pending
+ * intents; `apply-fusion-edits` batches pending rows into one prompt for the
+ * in-container app agent and marks them `sent`. The app agent applies the code
+ * changes in the fusion container; screens pick them up on reload.
+ */
+export const designFusionEdits = table("design_fusion_edits", {
+  id: text("id").primaryKey(),
+  designId: text("design_id").notNull(),
+  /** design_files.id of the URL-backed screen this edit targets, when known. */
+  screenFileId: text("screen_file_id"),
+  /** Natural-language edit instruction for the app agent. */
+  instruction: text("instruction").notNull(),
+  /** JSON: optional target context ({ selector, path, url, nodeName }). */
+  target: text("target"),
+  /** 'pending' — queued; 'sent' — dispatched to the app agent; 'error'. */
+  status: text("status", { enum: ["pending", "sent", "error"] })
+    .notNull()
+    .default("pending"),
+  /** Groups edits dispatched together in one agent message. */
+  batchId: text("batch_id"),
+  error: text("error"),
+  sentAt: text("sent_at"),
+  createdAt: text("created_at").default(now()),
+  updatedAt: text("updated_at").default(now()),
+  ...ownableColumns(),
+});
+
 /**
  * Cached accessibility audit + visual diff results for a design.
  * Keyed by design + optional base/compare design_versions pair + source ref.

package/corpus/templates/design/server/lib/builder-design-system-proxy.ts

@@ -1,93 +1,13 @@
+import {
+  createBuilderDesignSystemProxyFields,
+  localBuilderDesignSystemId,
+  type BuilderDesignSystemIndexResult,
+} from "@agent-native/core/server";
 import { eq } from "drizzle-orm";
 import { nanoid } from "nanoid";
 
 import { getDb, schema } from "../db/index.js";
 
-type BuilderDesignSystemIndexResult = {
-  designSystemId: string;
-  jobId: string;
-  builderUrl: string;
-};
-
-export function localBuilderDesignSystemId(
-  builderDesignSystemId: string,
-): string {
-  const slug = builderDesignSystemId
-    .replace(/[^a-zA-Z0-9_-]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .slice(0, 96);
-  return `builder-${slug || "design-system"}`;
-}
-
-function builderProxyData({
-  builderDesignSystemId,
-  jobId,
-  builderUrl,
-  projectName,
-  description,
-}: {
-  builderDesignSystemId: string;
-  jobId: string;
-  builderUrl: string;
-  projectName?: string;
-  description?: string;
-}) {
-  return JSON.stringify({
-    source: "builder",
-    builderDesignSystemId,
-    builderJobId: jobId,
-    builderUrl,
-    colors: {
-      primary: "var(--primary)",
-      secondary: "var(--secondary)",
-      accent: "var(--accent)",
-      background: "var(--background)",
-      surface: "var(--card)",
-      text: "var(--foreground)",
-      textMuted: "var(--muted-foreground)",
-    },
-    typography: {
-      headingFont: "inherit",
-      bodyFont: "inherit",
-      headingWeight: "700",
-      bodyWeight: "400",
-      headingSizes: { h1: "48px", h2: "32px", h3: "24px" },
-    },
-    spacing: { elementGap: "24px", pagePadding: "48px" },
-    borders: { radius: "12px", accentWidth: "1px" },
-    logos: [],
-    notes: [
-      "This is a local proxy for a Builder-indexed design system.",
-      `Builder design system id: ${builderDesignSystemId}`,
-      `Builder indexing job id: ${jobId}`,
-      `Builder URL: ${builderUrl}`,
-      projectName ? `Requested name: ${projectName}` : "",
-      description ? `Context: ${description}` : "",
-      "Use Builder as the source of truth for extracted tokens and guidance.",
-    ]
-      .filter(Boolean)
-      .join("\n"),
-  });
-}
-
-function builderProxyInstructions({
-  builderDesignSystemId,
-  jobId,
-  builderUrl,
-}: {
-  builderDesignSystemId: string;
-  jobId: string;
-  builderUrl: string;
-}) {
-  return [
-    "This design system is indexed and owned by Builder.",
-    `Builder design system id: ${builderDesignSystemId}`,
-    `Builder job id: ${jobId}`,
-    `Builder URL: ${builderUrl}`,
-    "When generating designs, treat Builder as the source of truth for the final extracted tokens, assets, and guidance.",
-  ].join("\n");
-}
-
 export async function upsertBuilderProxyDesignSystem({
   result,
   ownerEmail,
@@ -106,18 +26,11 @@ export async function upsertBuilderProxyDesignSystem({
   const baseLocalDesignSystemId = localBuilderDesignSystemId(
     result.designSystemId,
   );
-  const title = projectName?.trim() || "Builder indexed design system";
-  const localData = builderProxyData({
-    builderDesignSystemId: result.designSystemId,
-    jobId: result.jobId,
-    builderUrl: result.builderUrl,
+  const proxyFields = createBuilderDesignSystemProxyFields({
+    result,
     projectName,
     description,
-  });
-  const customInstructions = builderProxyInstructions({
-    builderDesignSystemId: result.designSystemId,
-    jobId: result.jobId,
-    builderUrl: result.builderUrl,
+    surface: "design",
   });
   const [existing] = await db
     .select({
@@ -135,13 +48,11 @@ export async function upsertBuilderProxyDesignSystem({
     await db
       .update(schema.designSystems)
       .set({
-        title,
-        description:
-          description ??
-          `Builder indexed design system ${result.designSystemId}`,
-        data: localData,
+        title: proxyFields.title,
+        description: proxyFields.description,
+        data: proxyFields.data,
         assets: "[]",
-        customInstructions,
+        customInstructions: proxyFields.customInstructions,
         updatedAt: now,
       })
       .where(eq(schema.designSystems.id, existing.id));
@@ -153,12 +64,11 @@ export async function upsertBuilderProxyDesignSystem({
       .limit(1);
     await db.insert(schema.designSystems).values({
       id: localDesignSystemId,
-      title,
-      description:
-        description ?? `Builder indexed design system ${result.designSystemId}`,
-      data: localData,
+      title: proxyFields.title,
+      description: proxyFields.description,
+      data: proxyFields.data,
       assets: "[]",
-      customInstructions,
+      customInstructions: proxyFields.customInstructions,
       isDefault: !ownedSystem,
       ownerEmail,
       orgId: orgId ?? null,