@agent-native/core 0.85.7 → 0.86.0

package/corpus/templates/design/actions/apply-component-prop-edit.ts

@@ -45,7 +45,12 @@ import {
   applyVisualEdit,
   buildCodeLayerProjection,
 } from "../shared/code-layer.js";
-import type { CodeLayerSource, ClassEditIntent } from "../shared/code-layer.js";
+import type {
+  CodeLayerSource,
+  ClassEditIntent,
+  StyleEditIntent,
+} from "../shared/code-layer.js";
+import { agentSelectionDescriptor } from "../shared/collab-selection.js";
 import {
   componentNameFor,
   componentNodeIdMatches,
@@ -387,7 +392,10 @@ export default defineAction({
       });
 
       agentUpdateSelection(file.id, {
-        selection: node.selector,
+        selection: agentSelectionDescriptor(
+          { nodeId, selector: node.selector },
+          "Editing component",
+        ),
         nodeId,
         editingFile: file.filename,
         designId: file.designId,

package/corpus/templates/design/actions/apply-fusion-edits.ts

@@ -0,0 +1,161 @@
+/**
+ * apply-fusion-edits — batch pending queued edits into one prompt and send it
+ * to the fusion app's in-container coding agent.
+ *
+ * Composes a single message from all pending edits (or a caller-specified
+ * subset, still pending) so the app agent gets full context in one turn
+ * instead of being spammed with one message per edit. Marks rows `sent` (with
+ * a shared `batchId`) on success, or `error` (with the failure message) on
+ * failure — so `list-fusion-edits` reflects the outcome without another call.
+ */
+
+import { defineAction } from "@agent-native/core";
+import { sendFusionBranchMessage } from "@agent-native/core/server";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
+import { assertAccess } from "@agent-native/core/sharing";
+import { and, eq, inArray } from "drizzle-orm";
+import { nanoid } from "nanoid";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import "../server/db/index.js"; // ensure registerShareableResource runs
+import {
+  FULL_APP_BUILDING_ENABLED,
+  readFusionApp,
+} from "../shared/full-app.js";
+
+function parseTarget(raw: string | null): Record<string, unknown> | null {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    return parsed && typeof parsed === "object" && !Array.isArray(parsed)
+      ? (parsed as Record<string, unknown>)
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+function formatTargetContext(target: Record<string, unknown> | null): string {
+  if (!target) return "";
+  const parts: string[] = [];
+  if (typeof target.path === "string" && target.path) {
+    parts.push(`path: ${target.path}`);
+  }
+  if (typeof target.selector === "string" && target.selector) {
+    parts.push(`selector: ${target.selector}`);
+  }
+  if (typeof target.nodeName === "string" && target.nodeName) {
+    parts.push(`element: ${target.nodeName}`);
+  }
+  if (typeof target.url === "string" && target.url) {
+    parts.push(`url: ${target.url}`);
+  }
+  return parts.length > 0 ? ` (${parts.join(", ")})` : "";
+}
+
+export default defineAction({
+  description:
+    "Send all (or the given) pending queued fusion edits to the app's " +
+    "in-container coding agent in a single batched prompt. Use after " +
+    "queue-fusion-edit has accumulated one or more edits the user wants " +
+    "applied now. Marks sent edits with a shared batchId, or marks them " +
+    "'error' if the send failed. Returns sentCount=0 with a message if there " +
+    "were no pending edits to send.",
+  schema: z.object({
+    designId: z.string().describe("Design project ID backed by a fusion app."),
+    editIds: z
+      .array(z.string())
+      .optional()
+      .describe(
+        "Specific design_fusion_edits ids to apply (must still be pending). " +
+          "Omit to apply all pending edits for this design.",
+      ),
+  }),
+  run: async ({ designId, editIds }) => {
+    if (!FULL_APP_BUILDING_ENABLED) {
+      throw new Error("Full app building is not enabled");
+    }
+
+    const access = await assertAccess("design", designId, "editor");
+    const design = access.resource as typeof schema.designs.$inferSelect;
+    const fusionApp = readFusionApp(design.data);
+    if (!fusionApp) {
+      throw new Error(
+        "This design has no fusion app linkage. Call create-fusion-app first.",
+      );
+    }
+
+    const db = getDb();
+    const conditions = [
+      eq(schema.designFusionEdits.designId, designId),
+      eq(schema.designFusionEdits.status, "pending"),
+    ];
+    if (editIds && editIds.length > 0) {
+      conditions.push(inArray(schema.designFusionEdits.id, editIds));
+    }
+
+    const pending = await db
+      .select()
+      .from(schema.designFusionEdits)
+      .where(and(...conditions))
+      .orderBy(schema.designFusionEdits.createdAt);
+
+    if (pending.length === 0) {
+      return {
+        sentCount: 0,
+        message: "No pending fusion edits to apply.",
+      };
+    }
+
+    const lines = pending.map((edit, index) => {
+      const target = formatTargetContext(parseTarget(edit.target));
+      return `${index + 1}. ${edit.instruction}${target}`;
+    });
+    const prompt = [
+      "Apply the following queued visual edits to the app; keep changes minimal and scoped:",
+      "",
+      ...lines,
+    ].join("\n");
+
+    const ownerEmail = getRequestUserEmail();
+    const result = await sendFusionBranchMessage({
+      projectId: fusionApp.projectId,
+      branchName: fusionApp.branchName,
+      prompt,
+      userEmail: ownerEmail ?? undefined,
+    });
+
+    const now = new Date().toISOString();
+    const ids = pending.map((edit) => edit.id);
+
+    if (!result.sent) {
+      await db
+        .update(schema.designFusionEdits)
+        .set({
+          status: "error",
+          error: result.error ?? "Send failed",
+          updatedAt: now,
+        })
+        .where(inArray(schema.designFusionEdits.id, ids));
+      return {
+        sentCount: 0,
+        error: result.error ?? "Failed to send edits to the app agent",
+      };
+    }
+
+    const batchId = nanoid();
+    await db
+      .update(schema.designFusionEdits)
+      .set({ status: "sent", batchId, sentAt: now, updatedAt: now })
+      .where(inArray(schema.designFusionEdits.id, ids));
+
+    return {
+      sentCount: pending.length,
+      batchId,
+      message:
+        `Sent ${pending.length} queued edit(s) to the app agent as batch ` +
+        `"${batchId}".`,
+    };
+  },
+});

package/corpus/templates/design/actions/apply-visual-edit.ts

@@ -22,9 +22,36 @@ import {
   type UnwrapEditIntent,
   type WrapNodesEditIntent,
 } from "../shared/code-layer.js";
+import { agentSelectionDescriptor } from "../shared/collab-selection.js";
 import type { TailwindBreakpointPrefix } from "../shared/design-state.js";
 import { utilityStem, widthToPrefix } from "../shared/responsive-classes.js";
 
+/**
+ * Short human-readable label describing an edit intent, shown next to the
+ * agent's selection ring for live viewers (e.g. "AI — Editing text").
+ */
+function editIntentLabel(intent: EditIntent): string {
+  switch (intent.kind) {
+    case "textContent":
+      return "Editing text";
+    case "style":
+      return "Editing style";
+    case "class":
+    case "responsive-class":
+      return "Editing styles";
+    case "moveNode":
+      return "Moving element";
+    case "wrapNodes":
+      return "Grouping elements";
+    case "unwrap":
+      return "Ungrouping elements";
+    case "autoLayout":
+      return "Editing layout";
+    default:
+      return "Editing element";
+  }
+}
+
 type VisualEditActionSource = CodeLayerSource & { html?: string };
 
 /** Tailwind responsive prefix values accepted by the action. */
@@ -490,8 +517,14 @@ export default defineAction({
     });
 
     if (patch.result.target) {
+      // Publish a RESOLVABLE selection descriptor so live viewers can render a
+      // ring over the element being edited. Prefer the stable
+      // `data-agent-native-node-id` anchor over the projection CSS selector.
       agentUpdateSelection(file.id, {
-        selection: patch.result.target.selector,
+        selection: agentSelectionDescriptor(
+          patch.result.target,
+          editIntentLabel(editIntent),
+        ),
         nodeId: patch.result.target.nodeId,
         editingFile: file.filename,
         designId: file.designId,

package/corpus/templates/design/actions/create-component.ts

@@ -50,6 +50,7 @@ import "../server/db/index.js"; // ensure registerShareableResource runs
 import { resolveSourceCapabilities } from "../shared/capability-resolver.js";
 import { buildCodeLayerProjection } from "../shared/code-layer.js";
 import type { CodeLayerNode, CodeLayerSource } from "../shared/code-layer.js";
+import { agentSelectionDescriptor } from "../shared/collab-selection.js";
 import {
   COMPONENT_NAME_ATTR,
   COMPONENT_PROP_PREFIX,
@@ -416,7 +417,10 @@ export default defineAction({
       });
 
       agentUpdateSelection(file.id, {
-        selection: node.selector,
+        selection: agentSelectionDescriptor(
+          { nodeId: node.id, selector: node.selector },
+          "Creating component",
+        ),
         nodeId: node.id,
         editingFile: file.filename,
         designId: file.designId,

package/corpus/templates/design/actions/create-fusion-app.ts

@@ -0,0 +1,202 @@
+/**
+ * create-fusion-app — start a brand-new full-app (fusion) design.
+ *
+ * Provisions a Builder Fusion branch (one branch per design) in the
+ * configured Builder branch project and hands the user's prompt to the
+ * Builder cloud agent to scaffold the app. The branch/container is not
+ * necessarily ready immediately — call `sync-fusion-app` to poll the
+ * container and pick up the preview URL once it boots.
+ *
+ * Gated behind `FULL_APP_BUILDING_ENABLED`. When Builder is not configured
+ * (no credentials or no branch project ID), returns the same graceful
+ * `{ status: "not-configured", cta, message }` shape as
+ * `migrate-inline-design-to-app` instead of throwing.
+ */
+
+import { defineAction } from "@agent-native/core";
+import {
+  runBuilderAgent,
+  resolveBuilderBranchProjectId,
+} from "@agent-native/core/server";
+import { getRequestUserEmail } from "@agent-native/core/server/request-context";
+import { assertAccess } from "@agent-native/core/sharing";
+import { eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import "../server/db/index.js"; // ensure registerShareableResource runs
+import { resolveBuilderStatus } from "../shared/builder-app.js";
+import {
+  FULL_APP_BUILDING_ENABLED,
+  parseDesignDataBlob,
+  readFusionApp,
+  writeFusionApp,
+} from "../shared/full-app.js";
+
+const DEFAULT_BUILDER_APP_HOST = "https://builder.io";
+
+function resolveBuilderAppHost(): string {
+  return (
+    process.env.BUILDER_APP_HOST ||
+    process.env.BUILDER_PUBLIC_APP_HOST ||
+    DEFAULT_BUILDER_APP_HOST
+  );
+}
+
+function buildConnectUrl(origin: string): string {
+  const base = origin.replace(/\/+$/, "");
+  return `${base}/_agent-native/builder/connect`;
+}
+
+export default defineAction({
+  description:
+    "Create a brand-new full-app (fusion) design: provisions a Builder Fusion " +
+    "branch and hands the prompt to the Builder cloud agent to scaffold a real " +
+    "running app. Use this when the user wants a real app (not an HTML " +
+    "prototype) built from scratch for a design. Requires Builder.io to be " +
+    "connected with a branch project ID configured; when not configured " +
+    "returns a connect CTA — never throws. If the design already has a " +
+    "fusion app, returns the existing linkage instead of creating a second " +
+    "branch. The branch container may still be booting after this call — " +
+    "call sync-fusion-app to poll for the preview URL.",
+  schema: z.object({
+    designId: z.string().describe("Design project ID to back with a full app."),
+    prompt: z
+      .string()
+      .min(1)
+      .describe(
+        "What app to build, in the user's own words (features, pages, data model, etc.).",
+      ),
+    branchName: z
+      .string()
+      .optional()
+      .describe(
+        "Optional branch name for the Builder agent to use. If omitted, Builder generates one.",
+      ),
+  }),
+  run: async ({ designId, prompt, branchName }) => {
+    if (!FULL_APP_BUILDING_ENABLED) {
+      throw new Error("Full app building is not enabled");
+    }
+
+    const access = await assertAccess("design", designId, "editor");
+    const design = access.resource as typeof schema.designs.$inferSelect;
+
+    // Already app-backed: don't create a second branch.
+    const existingApp = readFusionApp(design.data);
+    if (existingApp) {
+      return {
+        status: existingApp.status,
+        designId,
+        projectId: existingApp.projectId,
+        branchName: existingApp.branchName,
+        editorUrl: existingApp.editorUrl,
+        message:
+          `This design is already backed by fusion branch ` +
+          `"${existingApp.branchName}". Call sync-fusion-app to check its ` +
+          `status, or send-fusion-message to continue building on it.`,
+      };
+    }
+
+    const builderStatus = await resolveBuilderStatus();
+    if (!builderStatus.connected || !builderStatus.builderEnabled) {
+      const connectUrl = buildConnectUrl(
+        process.env.APP_URL ??
+          process.env.VITE_APP_URL ??
+          process.env.BETTER_AUTH_URL ??
+          "",
+      );
+      const appHost = resolveBuilderAppHost();
+
+      if (!builderStatus.connected) {
+        return {
+          status: "not-configured" as const,
+          designId,
+          cta: {
+            kind: "connect-builder" as const,
+            label: "Build a real app",
+            description:
+              "Connect Builder.io to build this design as a real running app " +
+              "with a live container, branches, and deploys.",
+            primaryAction: "Connect Builder.io",
+            connectUrl,
+          },
+          message:
+            "Builder is not connected. Call connect-builder-app to start " +
+            "the OAuth flow, then retry create-fusion-app.",
+        };
+      }
+
+      return {
+        status: "not-configured" as const,
+        designId,
+        cta: {
+          kind: "configure-project" as const,
+          label: "Configure Builder project",
+          description:
+            "Builder credentials are present but no branch project ID is set. " +
+            "Set DISPATCH_BUILDER_PROJECT_ID, BUILDER_BRANCH_PROJECT_ID, or " +
+            "BUILDER_PROJECT_ID to enable full app building.",
+          primaryAction: "Open Builder settings",
+          connectUrl: `${appHost}/account-settings`,
+        },
+        message:
+          "Builder credentials are configured but no branch project ID is set. " +
+          "Set DISPATCH_BUILDER_PROJECT_ID to enable full app building.",
+      };
+    }
+
+    const projectId = await resolveBuilderBranchProjectId();
+    if (!projectId) {
+      throw new Error(
+        "Builder branch project ID is not configured. " +
+          "Set DISPATCH_BUILDER_PROJECT_ID, BUILDER_BRANCH_PROJECT_ID, or " +
+          "BUILDER_PROJECT_ID and try again.",
+      );
+    }
+
+    const ownerEmail = getRequestUserEmail();
+    const preamble =
+      `You are building a brand-new full application for the design project ` +
+      `"${design.title}". This is a fresh app — there is no existing code to ` +
+      `preserve beyond what you generate. Build exactly what the user asks for ` +
+      `below.\n\n## User request\n\n${prompt}`;
+
+    const result = await runBuilderAgent({
+      prompt: preamble,
+      projectId,
+      branchName: branchName?.trim() || undefined,
+      userEmail: ownerEmail ?? undefined,
+    });
+
+    const now = new Date().toISOString();
+    const db = getDb();
+    const nextData = writeFusionApp(parseDesignDataBlob(design.data), {
+      projectId: result.projectId,
+      branchName: result.branchName,
+      editorUrl: result.url,
+      status: "building",
+      statusMessage:
+        "App is being generated. Call sync-fusion-app to check progress.",
+      createdAt: now,
+      updatedAt: now,
+    });
+
+    await db
+      .update(schema.designs)
+      .set({ data: JSON.stringify(nextData), updatedAt: now })
+      .where(eq(schema.designs.id, designId));
+
+    return {
+      status: "building" as const,
+      designId,
+      projectId: result.projectId,
+      branchName: result.branchName,
+      editorUrl: result.url,
+      message:
+        `Started building "${design.title}" as a full app on branch ` +
+        `"${result.branchName}". Call sync-fusion-app to poll for the ` +
+        `preview URL once the container finishes booting.`,
+    };
+  },
+});

package/corpus/templates/design/actions/deploy-fusion-app.ts

@@ -0,0 +1,123 @@
+/**
+ * deploy-fusion-app — reserve a hosting slug (if needed) and trigger a hosted
+ * deploy of a fusion app's branch.
+ *
+ * On first deploy, derives a default `<slug>.builder.cloud` hosting slug from
+ * the design title unless the caller passes one explicitly. Reservation
+ * failures (slug already taken) surface clearly so the caller can retry with
+ * a different slug. Persists the reserved slug, deployed URL, and last deploy
+ * id/status on the fusion app linkage so get-fusion-deploy-status can poll
+ * without re-resolving them.
+ */
+
+import { defineAction } from "@agent-native/core";
+import {
+  deployFusionProject,
+  getFusionHostingUrl,
+  reserveFusionHostingSlug,
+} from "@agent-native/core/server";
+import { assertAccess } from "@agent-native/core/sharing";
+import { eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import "../server/db/index.js"; // ensure registerShareableResource runs
+import {
+  FULL_APP_BUILDING_ENABLED,
+  parseDesignDataBlob,
+  readFusionApp,
+  writeFusionApp,
+} from "../shared/full-app.js";
+
+const MAX_SLUG_LENGTH = 40;
+
+function defaultSlugFromTitle(title: string, designId: string): string {
+  const slug = title
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, MAX_SLUG_LENGTH)
+    .replace(/-+$/g, "");
+  return slug || `app-${designId.slice(0, 8)}`;
+}
+
+export default defineAction({
+  description:
+    "Deploy a fusion (full-app) design to a public hosted URL. Reserves a " +
+    "<slug>.builder.cloud hosting slug (derived from the design title if not " +
+    "already reserved and no slug is given) and triggers a hosted deploy of " +
+    "the branch. If the slug is already taken, the error will say so — retry " +
+    "with a different slug. Poll get-fusion-deploy-status for progress " +
+    "(queued -> building -> uploading -> deploying -> live | failed).",
+  schema: z.object({
+    designId: z.string().describe("Design project ID backed by a fusion app."),
+    slug: z
+      .string()
+      .optional()
+      .describe(
+        "Hosting slug to reserve (results in <slug>.builder.cloud). Omit to " +
+          "use the design's already-reserved slug, or derive one from the title.",
+      ),
+  }),
+  run: async ({ designId, slug }) => {
+    if (!FULL_APP_BUILDING_ENABLED) {
+      throw new Error("Full app building is not enabled");
+    }
+
+    const access = await assertAccess("design", designId, "editor");
+    const design = access.resource as typeof schema.designs.$inferSelect;
+    const fusionApp = readFusionApp(design.data);
+    if (!fusionApp) {
+      throw new Error(
+        "This design has no fusion app linkage. Call create-fusion-app first.",
+      );
+    }
+
+    const requestedSlug =
+      slug?.trim() ||
+      fusionApp.hostingSlug ||
+      defaultSlugFromTitle(design.title, designId);
+
+    let reservedSlug: string;
+    try {
+      const reservation = await reserveFusionHostingSlug({
+        projectId: fusionApp.projectId,
+        slug: requestedSlug,
+      });
+      reservedSlug = reservation.slug;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      throw new Error(
+        `Could not reserve hosting slug "${requestedSlug}": ${message}. ` +
+          "Pass a different slug and try again.",
+      );
+    }
+
+    const deploy = await deployFusionProject({
+      projectId: fusionApp.projectId,
+      checkoutBranch: fusionApp.branchName,
+    });
+
+    const deployedUrl = getFusionHostingUrl(reservedSlug);
+    const now = new Date().toISOString();
+    const db = getDb();
+    const nextData = writeFusionApp(parseDesignDataBlob(design.data), {
+      ...fusionApp,
+      hostingSlug: reservedSlug,
+      deployedUrl,
+      lastDeployId: deploy.deployId,
+      lastDeployStatus: deploy.status,
+      updatedAt: now,
+    });
+    await db
+      .update(schema.designs)
+      .set({ data: JSON.stringify(nextData), updatedAt: now })
+      .where(eq(schema.designs.id, designId));
+
+    return {
+      deployId: deploy.deployId,
+      status: deploy.status,
+      url: deployedUrl,
+    };
+  },
+});

package/corpus/templates/design/actions/edit-design.ts

@@ -290,23 +290,20 @@ export default defineAction({
     if (changed) {
       // Mark agent presence + selection so live viewers can see where the
       // agent is working before the update arrives via collab.
+      //
+      // No resolvable DOM selector is available here (search-replace targets
+      // source text, not a stamped node), so we publish `selection: null`
+      // rather than a fabricated `[data-edit-target=...]` selector that could
+      // never resolve against the rendered iframe. Region attribution instead
+      // rides on the `{ kind: "text", quote }` recentEdits descriptor that
+      // `applyText(..., "agent")` auto-publishes from the content diff below —
+      // clients render a lingering highlight over the changed text.
       agentEnterDocument(file.id);
-      if (resolvedMode === "search-replace" && applied > 0) {
-        const firstSearch = edits?.[0]?.search;
-        agentUpdateSelection(file.id, {
-          selection: firstSearch
-            ? `[data-edit-target="${firstSearch.slice(0, 40)}"]`
-            : null,
-          editingFile: file.filename,
-          designId,
-        });
-      } else {
-        agentUpdateSelection(file.id, {
-          selection: null,
-          editingFile: file.filename,
-          designId,
-        });
-      }
+      agentUpdateSelection(file.id, {
+        selection: null,
+        editingFile: file.filename,
+        designId,
+      });
 
       try {
         await db