@agent-native/core 0.85.6 → 0.86.0

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-canvas-interactions-now-match-figma-rotation-aware-resizing-.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-03
+---
+
+Canvas interactions now match Figma: rotation-aware resizing, shift constraints, smarter snapping with equal-gap guides, group rotation, and reliable alt-drag duplicating

package/corpus/templates/design/changelog/2026-07-03-inspector-fixes-mixed-selections-show-mixed-instead-of-wrong.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-03
+---
+
+Inspector fixes: mixed selections show Mixed instead of wrong values, gradients edit safely, and hidden fills restore their original colors

package/corpus/templates/design/changelog/2026-07-03-keyframe-timeline-works-reliably-drag-keyframes-smoothly-pic.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-03
+---
+
+Keyframe timeline works reliably: drag keyframes smoothly, pick easing per keyframe, and motion edits save safely without reverting

package/corpus/templates/design/changelog/2026-07-03-layers-panel-matches-figma-top-layer-on-top-drag-with-auto-s.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-03
+---
+
+Layers panel matches Figma: top layer on top, drag with auto-scroll and spring-open folders, and hidden layers stay out of exports

package/corpus/templates/design/changelog/2026-07-03-much-faster-editor-smooth-dragging-zooming-and-panel-updates.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-03
+---
+
+Much faster editor: smooth dragging, zooming, and panel updates in large multi-screen files

package/corpus/templates/design/changelog/2026-07-03-pen-tool-refinements-click-the-first-point-to-close-with-a-d.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-03
+---
+
+Pen tool refinements: click the first point to close with a drag-to-curve, double-click to finish, alt to break handles, and anchors stay visible at any zoom

package/corpus/templates/design/changelog/2026-07-03-text-editing-enter-adds-a-line-break-international-ime-typin.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-03
+---
+
+Text editing: Enter adds a line break, international (IME) typing works, and text keeps its content during live collaboration

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-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/changelog/2026-07-03-undo-and-redo-are-dependable-across-agent-edits-screen-switc.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-03
+---
+
+Undo and redo are dependable across agent edits, screen switches, and copy/paste between tabs

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/design-export.ts

@@ -17,6 +17,47 @@ function escapeHtml(str: string): string {
     .replace(/"/g, """);
 }
 
+// Layers toggled hidden in the editor are only visually suppressed by the
+// live editor bridge (which paints `display:none` on
+// `[data-agent-native-hidden="true"]` inside the canvas iframe). Exports never
+// go through that bridge, so without this rule hidden layers would leak back
+// into every exported artifact. Inject the same rule at export time so
+// hidden-in-editor stays hidden-in-export.
+export const HIDDEN_LAYER_EXPORT_STYLE_MARKER =
+  "data-agent-native-export-hidden";
+export const HIDDEN_LAYER_EXPORT_CSS = `[data-agent-native-hidden="true"]{display:none!important}`;
+
+/**
+ * Wraps the hidden-layer suppression rule in a marked <style> tag so callers
+ * can idempotently check whether it's already present (e.g. before injecting
+ * into HTML that may have already been through this pipeline).
+ */
+export function hiddenLayerExportStyleTag(): string {
+  return `<style ${HIDDEN_LAYER_EXPORT_STYLE_MARKER}>${HIDDEN_LAYER_EXPORT_CSS}</style>`;
+}
+
+/**
+ * Injects the hidden-layer suppression rule into a standalone HTML document,
+ * before `</head>` when present, otherwise prepended to the document. Safe to
+ * call more than once — re-injection is skipped if the marked style tag is
+ * already present.
+ */
+export function injectHiddenLayerExportStyle(html: string): string {
+  if (
+    new RegExp(`<style[^>]*${HIDDEN_LAYER_EXPORT_STYLE_MARKER}\\b`, "i").test(
+      html,
+    )
+  ) {
+    return html;
+  }
+  const styleTag = hiddenLayerExportStyleTag();
+  const closeHead = html.lastIndexOf("</head>");
+  if (closeHead !== -1) {
+    return `${html.slice(0, closeHead)}${styleTag}\n${html.slice(closeHead)}`;
+  }
+  return `${styleTag}\n${html}`;
+}
+
 function extractRenderableHtml(content: string): string {
   const bodyMatch = content.match(/<body\b[^>]*>([\s\S]*?)<\/body>/i);
   if (bodyMatch) return bodyMatch[1].trim();
@@ -90,7 +131,7 @@ export function buildStandaloneHtml(args: {
       }
     }
 
-    return html;
+    return injectHiddenLayerExportStyle(html);
   }
 
   const combinedBody = [...htmlFiles, ...jsxFiles]
@@ -108,6 +149,7 @@ export function buildStandaloneHtml(args: {
   <style>
     ${combinedCss}
   </style>
+  ${hiddenLayerExportStyleTag()}
 </head>
 <body>
   ${combinedBody}

package/corpus/templates/design/server/lib/fusion-screens.ts

@@ -0,0 +1,246 @@
+/**
+ * fusion-screens — shared upsert logic for URL-backed screens on fusion
+ * (full-app) designs.
+ *
+ * Fusion screens are iframes of the app's container dev-server preview URL,
+ * the same rendering model as localhost screens (see `add-localhost-screens`)
+ * but keyed off `fusionApp.previewUrl` instead of a localhost connection.
+ * `screenMetadata[fileId]` is the single source the canvas reads to resolve
+ * source/previewUrl/dimensions (see `resolveScreenMetadata` in
+ * `MultiScreenCanvas.tsx`) — no parallel `fusionScreens` map is needed the way
+ * `localhostScreens` exists for localhost (that map is only consulted by the
+ * loopback-public-access heuristic in `server/db/index.ts`, which does not
+ * apply to fusion designs).
+ *
+ * Both `sync-fusion-app` and `add-fusion-screens` call `upsertFusionScreens`
+ * so the design_files + designs.data writes never diverge.
+ */
+
+import {
+  hasCollabState,
+  applyText,
+  seedFromText,
+} from "@agent-native/core/collab";
+import { eq } from "drizzle-orm";
+import { nanoid } from "nanoid";
+
+import {
+  mergeCanvasFramePlacements,
+  parseCanvasFrameGeometryById,
+  type CanvasFramePlacement,
+} from "../../shared/canvas-frames.js";
+import { parseDesignDataBlob } from "../../shared/full-app.js";
+import { getDb, schema } from "../db/index.js";
+
+/** Default iframe viewport, mirroring add-localhost-screens' defaults. */
+export const DEFAULT_FUSION_SCREEN_WIDTH = 1280;
+export const DEFAULT_FUSION_SCREEN_HEIGHT = 900;
+
+export interface FusionScreenResult {
+  fileId: string;
+  filename: string;
+  path: string;
+  url: string;
+  title: string;
+  width: number;
+  height: number;
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+
+function slugForPath(path: string): string {
+  const slug = path
+    .replace(/^\/+/, "")
+    .replace(/[^a-zA-Z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .toLowerCase();
+  return (slug || "home").slice(0, 80);
+}
+
+function titleFromPath(path: string): string {
+  const trimmed = path.replace(/^\/+|\/+$/g, "");
+  if (!trimmed) return "Home";
+  const last = trimmed.split("/").pop() ?? trimmed;
+  return last.replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+function uniqueFilename(path: string, used: Set<string>): string {
+  const base = `fusion-${slugForPath(path)}.html`;
+  const [stem, extension = "html"] = base.split(/\.(?=[^.]+$)/);
+  let filename = `${stem}.${extension}`;
+  let suffix = 2;
+  while (used.has(filename)) {
+    filename = `${stem}-${suffix}.${extension}`;
+    suffix += 1;
+  }
+  used.add(filename);
+  return filename;
+}
+
+/**
+ * Create or refresh URL-backed screens pointing at `<previewUrl><path>` for a
+ * fusion-backed design. Read-modify-write on `designs.data`: preserves every
+ * other key (canvasFrames for non-fusion screens, tweaks, etc.).
+ */
+export async function upsertFusionScreens(args: {
+  designId: string;
+  previewUrl: string;
+  paths: string[];
+  width?: number;
+  height?: number;
+  startX?: number;
+  startY?: number;
+  gap?: number;
+}): Promise<{
+  screens: FusionScreenResult[];
+  placedFrames: Array<{
+    fileId: string;
+    filename?: string;
+    frame: CanvasFramePlacement;
+  }>;
+}> {
+  const {
+    designId,
+    previewUrl,
+    paths,
+    width = DEFAULT_FUSION_SCREEN_WIDTH,
+    height = DEFAULT_FUSION_SCREEN_HEIGHT,
+    startX = 0,
+    startY = 0,
+    gap = 160,
+  } = args;
+
+  if (paths.length === 0) {
+    throw new Error("At least one path is required to add fusion screens.");
+  }
+
+  const db = getDb();
+  const [design] = await db
+    .select({ data: schema.designs.data })
+    .from(schema.designs)
+    .where(eq(schema.designs.id, designId))
+    .limit(1);
+  const prevData = parseDesignDataBlob(design?.data);
+  const existingCanvasFrames = parseCanvasFrameGeometryById(
+    prevData.canvasFrames,
+  );
+  const existingMetadata = isRecord(prevData.screenMetadata)
+    ? { ...(prevData.screenMetadata as Record<string, unknown>) }
+    : {};
+  const existingFiles = await db
+    .select()
+    .from(schema.designFiles)
+    .where(eq(schema.designFiles.designId, designId));
+  const existingByFilename = new Map(
+    existingFiles.map((file) => [file.filename, file]),
+  );
+  const usedFilenames = new Set(existingFiles.map((file) => file.filename));
+  const now = new Date().toISOString();
+
+  const results: FusionScreenResult[] = [];
+  const placements: CanvasFramePlacement[] = [];
+
+  // Only place screens that don't already have canvas geometry so re-syncs
+  // never reset positions the user has arranged. New screens start after the
+  // right-most existing frame.
+  const existingGeometries = Object.values(existingCanvasFrames);
+  let nextX = startX;
+  if (existingGeometries.length > 0) {
+    nextX =
+      Math.max(
+        startX,
+        ...existingGeometries.map(
+          (frame) => (frame.x ?? 0) + (frame.width ?? width),
+        ),
+      ) + gap;
+  }
+
+  for (let index = 0; index < paths.length; index += 1) {
+    const path = paths[index]!;
+    const url = new URL(path, previewUrl).toString();
+    const preferredFilename = `fusion-${slugForPath(path)}.html`;
+    const existing = existingByFilename.get(preferredFilename);
+    const filename = existing?.filename ?? uniqueFilename(path, usedFilenames);
+    const fileId = existing?.id ?? nanoid();
+    const title = titleFromPath(path);
+
+    if (existing) {
+      await db
+        .update(schema.designFiles)
+        .set({ content: url, fileType: "html", updatedAt: now })
+        .where(eq(schema.designFiles.id, existing.id));
+      if (await hasCollabState(existing.id)) {
+        await applyText(existing.id, url, "content", "agent");
+      } else {
+        await seedFromText(existing.id, url);
+      }
+    } else {
+      await db.insert(schema.designFiles).values({
+        id: fileId,
+        designId,
+        filename,
+        fileType: "html",
+        content: url,
+        createdAt: now,
+        updatedAt: now,
+      });
+      await seedFromText(fileId, url);
+    }
+
+    results.push({ fileId, filename, path, url, title, width, height });
+    if (!existingCanvasFrames[fileId]) {
+      placements.push({
+        fileId,
+        filename,
+        x: nextX,
+        y: startY,
+        width,
+        height,
+        z: placements.length,
+      });
+      nextX += width + gap;
+    }
+  }
+
+  const mergedFrames = mergeCanvasFramePlacements({
+    existing: prevData.canvasFrames,
+    placements,
+    resolveFileId: (placement) => placement.fileId,
+  });
+
+  for (const screen of results) {
+    // Preserve user-adjusted title/dimensions on refresh; only the URL keys
+    // must always track the current preview URL.
+    const prevMeta = isRecord(existingMetadata[screen.fileId])
+      ? (existingMetadata[screen.fileId] as Record<string, unknown>)
+      : {};
+    existingMetadata[screen.fileId] = {
+      ...prevMeta,
+      sourceType: "fusion",
+      previewState: "live",
+      title: prevMeta.title ?? screen.title,
+      width: prevMeta.width ?? screen.width,
+      height: prevMeta.height ?? screen.height,
+      url: screen.url,
+      previewUrl: screen.url,
+      path: screen.path,
+    };
+  }
+
+  await db
+    .update(schema.designs)
+    .set({
+      data: JSON.stringify({
+        ...prevData,
+        canvasFrames: mergedFrames.canvasFrames,
+        screenMetadata: existingMetadata,
+        updatedAt: now,
+      }),
+      updatedAt: now,
+    })
+    .where(eq(schema.designs.id, designId));
+
+  return { screens: results, placedFrames: mergedFrames.placedFrames };
+}