@agent-native/core 0.85.7 → 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-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/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/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 };
+}

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

@@ -1,6 +1,36 @@
-import { runMigrations } from "@agent-native/core/db";
+import {
+  ensureAdditiveColumns,
+  getDbExec,
+  runMigrations,
+} from "@agent-native/core/db";
 
-export default runMigrations(
+import * as schema from "../db/schema.js";
+
+/**
+ * Every Drizzle table exported from schema.ts. Filters out type-only and
+ * helper exports the same way db.spec.ts's `isDrizzleTable` regression guard
+ * does: a real table carries a Symbol-keyed drizzle metadata bag, plain
+ * exports don't.
+ */
+function isDrizzleTable(value: unknown): value is object {
+  return (
+    !!value &&
+    typeof value === "object" &&
+    Object.getOwnPropertySymbols(value).some((s) =>
+      s.toString().includes("drizzle"),
+    )
+  );
+}
+
+const schemaTables = Object.values(schema).filter(isDrizzleTable);
+
+// Convention: every new migration below MUST set a unique `name:` slug (see
+// packages/core/src/db/migrations.ts for the full rationale). Version numbers
+// alone are not a safe identity across parallel branches that each extend
+// this list independently — see the analytics template's v75-v83 incident
+// documented in templates/analytics/server/plugins/db.ts for the failure
+// class this guards against.
+const runDesignMigrations = runMigrations(
   [
     {
       version: 1,
@@ -269,6 +299,63 @@ CREATE INDEX IF NOT EXISTS motion_timeline_owner_org_updated_idx ON motion_timel
       version: 18,
       sql: {},
     },
+    // v19: design_fusion_edits — declared in schema.ts (queued AI edit intents
+    // for fusion-backed full-app designs) but never had a migration create the
+    // table, so any fresh/existing database without it 500s on first write.
+    // Named per the convention above since this is a new entry.
+    {
+      version: 19,
+      name: "design-fusion-edits-table",
+      sql: `CREATE TABLE IF NOT EXISTS design_fusion_edits (
+    id TEXT PRIMARY KEY,
+    design_id TEXT NOT NULL,
+    screen_file_id TEXT,
+    instruction TEXT NOT NULL,
+    target TEXT,
+    status TEXT NOT NULL DEFAULT 'pending',
+    batch_id TEXT,
+    error TEXT,
+    sent_at TEXT,
+    created_at TEXT DEFAULT (datetime('now')),
+    updated_at TEXT DEFAULT (datetime('now')),
+    owner_email TEXT NOT NULL DEFAULT 'local@localhost',
+    org_id TEXT,
+    visibility TEXT NOT NULL DEFAULT 'private'
+  )`,
+    },
   ],
   { table: "design_migrations" },
 );
+
+/**
+ * The migration list above is the authoritative source for tables, indexes,
+ * and data transforms. `ensureAdditiveColumns` runs after it as a
+ * belt-and-braces safety net for the same failure mode fixed in the
+ * analytics template: a column added to schema.ts without a matching
+ * hand-written ALTER migration, which silently 500s every query touching a
+ * pre-existing production table. It only ever adds missing columns — never
+ * drops, renames, or retypes anything — and any failure here is logged and
+ * swallowed so it can never fail boot.
+ */
+export default async (nitroApp: any): Promise<void> => {
+  await runDesignMigrations(nitroApp);
+  try {
+    const summary = await ensureAdditiveColumns({
+      db: getDbExec(),
+      tables: schemaTables,
+    });
+    if (summary.errors.length > 0) {
+      console.warn(
+        "[db] ensureAdditiveColumns completed with errors:",
+        summary.errors,
+      );
+    }
+  } catch (err) {
+    // Never fail boot over the safety net itself — the authoritative
+    // migrations above already ran.
+    console.warn(
+      "[db] ensureAdditiveColumns failed (non-fatal):",
+      err instanceof Error ? err.message : err,
+    );
+  }
+};

package/corpus/templates/design/shared/collab-selection.ts

@@ -0,0 +1,52 @@
+/**
+ * Helpers for publishing resolvable agent selection descriptors into collab
+ * awareness so live viewers can render a selection ring over the element the
+ * agent is editing.
+ *
+ * The client (`RemoteSelectionRings`) resolves the descriptor's `selector`
+ * against the active screen's iframe via `querySelector`. A selector built
+ * from a stable `data-agent-native-node-id` is the most reliable anchor; a
+ * projection-derived CSS selector is the fallback. The optional `label`
+ * renders next to the ring (e.g. "AI — Editing button text").
+ */
+
+/** Escape a value for use inside a double-quoted CSS attribute selector. */
+export function escapeAttrValue(value: string): string {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+/**
+ * Build a resolvable CSS selector for an edit target. Prefers the stable
+ * `data-agent-native-node-id` attribute; falls back to a projection selector.
+ * Returns `null` when neither is available.
+ */
+export function targetSelector(target: {
+  nodeId?: string | null;
+  selector?: string | null;
+}): string | null {
+  if (target.nodeId) {
+    return `[data-agent-native-node-id="${escapeAttrValue(target.nodeId)}"]`;
+  }
+  if (target.selector) return target.selector;
+  return null;
+}
+
+/** A selection descriptor consumed by `RemoteSelectionRings`. */
+export interface AgentSelectionDescriptor {
+  selector: string;
+  label?: string;
+}
+
+/**
+ * Build the `selection` awareness field for an edit target, or `null` when the
+ * target can't be resolved to a selector. When non-null, viewers render a ring
+ * labelled with `label` (kept short — a human-readable edit intent).
+ */
+export function agentSelectionDescriptor(
+  target: { nodeId?: string | null; selector?: string | null },
+  label?: string,
+): AgentSelectionDescriptor | null {
+  const selector = targetSelector(target);
+  if (!selector) return null;
+  return label ? { selector, label } : { selector };
+}