@agent-native/core 0.79.27 → 0.80.1

package/corpus/templates/design/actions/connect-localhost.ts

@@ -0,0 +1,183 @@
+import { defineAction } from "@agent-native/core";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server/request-context";
+import { and, eq } from "drizzle-orm";
+import { nanoid } from "nanoid";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import {
+  DESIGN_BRIDGE_OPERATIONS,
+  makeLocalhostRouteId,
+  titleFromRoutePath,
+} from "../shared/source-mode.js";
+
+const routeSchema = z.object({
+  id: z.string().optional(),
+  path: z.string().min(1),
+  title: z.string().optional(),
+  sourceFile: z.string().optional(),
+  sourceKind: z.enum(["react-router", "html", "manual"]).optional(),
+  screenshotUrl: z.string().optional(),
+  metadata: z.record(z.string(), z.unknown()).optional(),
+});
+
+const capabilitySchema = z.object({
+  operation: z.enum(DESIGN_BRIDGE_OPERATIONS),
+  status: z.enum(["available", "planned", "disabled"]),
+  reason: z.string().optional(),
+});
+
+function normalizeUrl(value: string, label: string): string {
+  const raw = value.trim();
+  const withProtocol = /^[a-z]+:\/\//i.test(raw) ? raw : `http://${raw}`;
+  const parsed = new URL(withProtocol);
+  if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
+    throw new Error(`${label} must be an http(s) URL`);
+  }
+  parsed.hash = "";
+  return parsed.toString().replace(/\/$/, "");
+}
+
+export default defineAction({
+  description:
+    "Register or refresh a localhost Design source connection produced by `agent-native design connect`. Stores the dev server URL, bridge URL, route manifest, and operation capabilities so the UI can later list local-code artboards.",
+  schema: z.object({
+    id: z
+      .string()
+      .optional()
+      .describe("Optional existing connection ID. Omit to create one."),
+    name: z.string().optional().describe("Human-readable connection name."),
+    devServerUrl: z
+      .string()
+      .describe("Local app dev server URL, for example http://localhost:5173"),
+    bridgeUrl: z
+      .string()
+      .optional()
+      .describe("Local Design bridge URL printed by the CLI."),
+    rootPath: z.string().optional().describe("Repository root for the app."),
+    routes: z
+      .array(routeSchema)
+      .optional()
+      .describe("Discovered app routes/screens to become localhost artboards."),
+    routeManifest: z
+      .object({
+        version: z.literal(1).default(1),
+        sourceType: z.literal("localhost").default("localhost"),
+        devServerUrl: z.string().optional(),
+        rootPath: z.string().optional(),
+        routes: z.array(routeSchema),
+        generatedAt: z.string().optional(),
+      })
+      .optional()
+      .describe("Full route manifest emitted by the CLI."),
+    capabilities: z
+      .array(capabilitySchema)
+      .optional()
+      .describe("Bridge operation capabilities."),
+    status: z
+      .enum(["connected", "detected", "manual", "error"])
+      .optional()
+      .default("connected"),
+  }),
+  run: async (args) => {
+    const ownerEmail = getRequestUserEmail();
+    if (!ownerEmail) throw new Error("no authenticated user");
+
+    const now = new Date().toISOString();
+    const id = args.id ?? nanoid();
+    const db = getDb();
+    const devServerUrl = normalizeUrl(args.devServerUrl, "devServerUrl");
+    const bridgeUrl = args.bridgeUrl
+      ? normalizeUrl(args.bridgeUrl, "bridgeUrl")
+      : undefined;
+    const rawRoutes = args.routeManifest?.routes ?? args.routes ?? [];
+    const routes = rawRoutes.map((route) => ({
+      id: route.id ?? makeLocalhostRouteId(route.path),
+      path: route.path,
+      title: route.title ?? titleFromRoutePath(route.path),
+      sourceFile: route.sourceFile,
+      sourceKind: route.sourceKind ?? "manual",
+      screenshotUrl: route.screenshotUrl,
+      metadata: route.metadata,
+    }));
+    const routeManifest = {
+      version: 1 as const,
+      sourceType: "localhost" as const,
+      devServerUrl,
+      rootPath: args.routeManifest?.rootPath ?? args.rootPath,
+      routes,
+      generatedAt: args.routeManifest?.generatedAt ?? now,
+    };
+    const capabilities =
+      args.capabilities ??
+      DESIGN_BRIDGE_OPERATIONS.map((operation) => ({
+        operation,
+        status:
+          operation === "readFile" ||
+          operation === "applyEdit" ||
+          operation === "writeFile"
+            ? ("planned" as const)
+            : ("available" as const),
+        reason:
+          operation === "writeFile"
+            ? "Local file writes require the next bridge hardening pass."
+            : undefined,
+      }));
+
+    const values = {
+      id,
+      name: args.name ?? new URL(devServerUrl).host,
+      sourceType: "localhost" as const,
+      devServerUrl,
+      bridgeUrl: bridgeUrl ?? null,
+      rootPath: routeManifest.rootPath ?? null,
+      routeManifest: JSON.stringify(routeManifest),
+      capabilities: JSON.stringify(capabilities),
+      status: args.status,
+      lastSeenAt: now,
+      ownerEmail,
+      orgId: getRequestOrgId() ?? null,
+      updatedAt: now,
+    };
+
+    const existing = await db
+      .select({ id: schema.designLocalhostConnections.id })
+      .from(schema.designLocalhostConnections)
+      .where(
+        and(
+          eq(schema.designLocalhostConnections.id, id),
+          eq(schema.designLocalhostConnections.ownerEmail, ownerEmail),
+        ),
+      )
+      .limit(1);
+
+    if (existing[0]) {
+      await db
+        .update(schema.designLocalhostConnections)
+        .set(values)
+        .where(eq(schema.designLocalhostConnections.id, id));
+    } else {
+      await db.insert(schema.designLocalhostConnections).values({
+        ...values,
+        createdAt: now,
+      });
+    }
+
+    return {
+      id,
+      sourceType: "localhost",
+      name: values.name,
+      devServerUrl,
+      bridgeUrl: bridgeUrl ?? null,
+      rootPath: routeManifest.rootPath ?? null,
+      routeCount: routes.length,
+      routes,
+      capabilities,
+      status: args.status,
+      lastSeenAt: now,
+    };
+  },
+});

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

@@ -13,53 +13,192 @@ import { and, eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
-import { applyEdits } from "../shared/apply-edits.js";
+import {
+  applyOneEdit,
+  type ApplyEditsResult,
+  type DesignEdit,
+} from "../shared/apply-edits.js";
+
+const editBlocksSchema = z.preprocess(
+  (v) => {
+    if (typeof v !== "string") return v;
+    // Don't let malformed JSON throw an uncaught SyntaxError — return the
+    // raw value so Zod produces a clean validation error instead.
+    try {
+      return JSON.parse(v);
+    } catch {
+      return v;
+    }
+  },
+  z
+    .array(
+      z.object({
+        search: z
+          .string()
+          .min(1)
+          .describe(
+            "Exact text to find, with enough surrounding context to be unique",
+          ),
+        replace: z.string().describe("Replacement text"),
+      }),
+    )
+    .min(1),
+);
+
+function stripStableNodeIdAttributes(value: string): {
+  content: string;
+  indexMap: number[];
+} {
+  const stableIdPattern =
+    /\sdata-agent-native-node-id\s*=\s*(?:"[^"]*"|'[^']*'|[^\s/>]+)/gi;
+  let content = "";
+  const indexMap: number[] = [];
+  let cursor = 0;
+  let match: RegExpExecArray | null;
+  while ((match = stableIdPattern.exec(value))) {
+    const chunk = value.slice(cursor, match.index);
+    for (let i = 0; i < chunk.length; i += 1) {
+      content += chunk[i];
+      indexMap.push(cursor + i);
+    }
+    cursor = match.index + match[0].length;
+  }
+  const tail = value.slice(cursor);
+  for (let i = 0; i < tail.length; i += 1) {
+    content += tail[i];
+    indexMap.push(cursor + i);
+  }
+  indexMap.push(value.length);
+  return { content, indexMap };
+}
+
+function findUniqueStableIdAgnosticSpan(
+  content: string,
+  search: string,
+): { start: number; end: number } | null {
+  const strippedContent = stripStableNodeIdAttributes(content);
+  const strippedSearch = stripStableNodeIdAttributes(search).content;
+  if (!strippedSearch) return null;
+
+  let count = 0;
+  let onlyIndex = -1;
+  let index = strippedContent.content.indexOf(strippedSearch);
+  while (index !== -1) {
+    count += 1;
+    onlyIndex = index;
+    if (count > 1) return null;
+    index = strippedContent.content.indexOf(strippedSearch, index + 1);
+  }
+  if (count !== 1) return null;
+
+  return {
+    start: strippedContent.indexMap[onlyIndex] ?? 0,
+    end:
+      strippedContent.indexMap[onlyIndex + strippedSearch.length] ??
+      content.length,
+  };
+}
+
+function applyOneEditWithStableIdFallback(
+  content: string,
+  edit: DesignEdit,
+  index: number,
+): string {
+  try {
+    return applyOneEdit(content, edit, index);
+  } catch (error) {
+    const span = findUniqueStableIdAgnosticSpan(content, edit.search);
+    if (!span) throw error;
+    return `${content.slice(0, span.start)}${edit.replace}${content.slice(span.end)}`;
+  }
+}
+
+export function applySearchReplaceEdits(
+  content: string,
+  edits: DesignEdit[],
+): ApplyEditsResult {
+  let next = content;
+  edits.forEach((edit, index) => {
+    next = applyOneEditWithStableIdFallback(next, edit, index);
+  });
+  return { content: next, applied: edits.length };
+}
 
 export default defineAction({
   description:
-    "Apply small, surgical search/replace edits to ONE file in a design — the " +
+    "Edit ONE file in a design after reading it with get-design-snapshot. " +
+    "For small localized refinements, apply surgical search/replace edits — the " +
     "preferred way to refine an existing design without regenerating the whole " +
     "file (cheaper, faster, and it preserves everything you don't touch). Each " +
     "edit's `search` must match the current file exactly and uniquely, so " +
     "include enough surrounding context. Read the file first with " +
     "`get-design-snapshot`. Wrapping an element is just a search/replace whose " +
-    "`replace` adds the wrapper around the original text. Use `generate-design` " +
+    "`replace` adds the wrapper around the original text. For broad copy-only " +
+    'changes such as translating all visible text, use `mode: "replace-file"` ' +
+    "with `replacementContent`: the complete updated file content copied from " +
+    "the snapshot with only the requested copy changed. Use `generate-design` " +
     "instead only for brand-new files or large structural rewrites.",
-  schema: z.object({
-    designId: z.string().describe("Design project ID"),
-    filename: z
-      .string()
-      .default("index.html")
-      .describe("File to edit (e.g. 'index.html')"),
-    edits: z
-      .preprocess(
-        (v) => {
-          if (typeof v !== "string") return v;
-          // Don't let malformed JSON throw an uncaught SyntaxError — return the
-          // raw value so Zod produces a clean validation error instead.
-          try {
-            return JSON.parse(v);
-          } catch {
-            return v;
-          }
-        },
-        z
-          .array(
-            z.object({
-              search: z
-                .string()
-                .min(1)
-                .describe(
-                  "Exact text to find, with enough surrounding context to be unique",
-                ),
-              replace: z.string().describe("Replacement text"),
-            }),
-          )
-          .min(1),
-      )
-      .describe("Search/replace blocks, applied in order"),
-  }),
-  run: async ({ designId, filename, edits }) => {
+  schema: z
+    .object({
+      designId: z.string().describe("Design project ID"),
+      filename: z
+        .string()
+        .default("index.html")
+        .describe("File to edit (e.g. 'index.html')"),
+      mode: z
+        .enum(["search-replace", "replace-file"])
+        .optional()
+        .describe(
+          "Defaults to search-replace. Use replace-file for broad copy-only edits like translating the whole page after reading get-design-snapshot.",
+        ),
+      edits: editBlocksSchema
+        .optional()
+        .describe(
+          "Search/replace blocks, applied in order. Use for small localized edits.",
+        ),
+      replacementContent: z
+        .string()
+        .min(1)
+        .optional()
+        .describe(
+          "Complete updated file content. Use only with mode=replace-file for broad copy-only changes; preserve all HTML structure, CSS, scripts, and tweaks from get-design-snapshot.",
+        ),
+    })
+    .superRefine((value, ctx) => {
+      const mode =
+        value.mode ??
+        (value.replacementContent !== undefined
+          ? "replace-file"
+          : "search-replace");
+
+      if (value.edits && value.replacementContent !== undefined) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message:
+            "Use either edits or replacementContent in one edit-design call, not both.",
+          path: ["replacementContent"],
+        });
+      }
+
+      if (mode === "search-replace" && !value.edits) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message:
+            "search-replace mode requires at least one edit block in edits.",
+          path: ["edits"],
+        });
+      }
+
+      if (mode === "replace-file" && value.replacementContent === undefined) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message:
+            "replace-file mode requires replacementContent with the complete updated file.",
+          path: ["replacementContent"],
+        });
+      }
+    }),
+  run: async ({ designId, filename, edits, mode, replacementContent }) => {
     await assertAccess("design", designId, "editor");
 
     const db = getDb();
@@ -104,21 +243,34 @@ export default defineAction({
       // Collab read is best-effort; fall back to stored content.
     }
 
-    const { content: nextContent, applied } = applyEdits(base, edits);
+    const resolvedMode =
+      mode ??
+      (replacementContent !== undefined ? "replace-file" : "search-replace");
+    const { content: nextContent, applied } =
+      resolvedMode === "replace-file"
+        ? { content: replacementContent ?? "", applied: 0 }
+        : applySearchReplaceEdits(base, edits ?? []);
     const changed = nextContent !== base;
 
     if (changed) {
       // Mark agent presence + selection so live viewers can see where the
       // agent is working before the update arrives via collab.
       agentEnterDocument(file.id);
-      if (applied > 0) {
+      if (resolvedMode === "search-replace" && applied > 0) {
+        const firstSearch = edits?.[0]?.search;
         agentUpdateSelection(file.id, {
-          selection: edits[0]?.search
-            ? `[data-edit-target="${edits[0].search.slice(0, 40)}"]`
+          selection: firstSearch
+            ? `[data-edit-target="${firstSearch.slice(0, 40)}"]`
             : null,
           editingFile: filename,
           designId,
         });
+      } else {
+        agentUpdateSelection(file.id, {
+          selection: null,
+          editingFile: filename,
+          designId,
+        });
       }
 
       try {
@@ -148,6 +300,7 @@ export default defineAction({
       designId,
       filename,
       fileId: file.id,
+      mode: resolvedMode,
       editsApplied: applied,
       changed,
       bytesBefore: base.length,

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

@@ -14,6 +14,10 @@ import { nanoid } from "nanoid";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import {
+  mergeCanvasFramePlacements,
+  type CanvasFramePlacement,
+} from "../shared/canvas-frames.js";
 
 /** Editor deep link so external agents can surface "Open design". */
 function designDeepLink(designId: string): string {
@@ -34,7 +38,9 @@ export default defineAction({
     "version then refine individual files with `edit-design` (search/replace) rather " +
     "than resending a big multi-file payload — a single oversized payload can get cut " +
     "off mid-stream and stall the turn. " +
-    "Do not report a design as ready until this action succeeds.",
+    "Do not report a design as ready until this action succeeds. " +
+    "When adding multiple screens or states, pass canvasFrames with filenames " +
+    "and x/y/width/height so the new screens appear placed on the overview canvas.",
   schema: z.object({
     designId: z.string().describe("Design project ID to save content to"),
     prompt: z.string().describe("The generation prompt (stored for reference)"),
@@ -106,6 +112,34 @@ export default defineAction({
           "radius, dark mode, font choice). Each must reference a CSS var " +
           "the design's `:root` block actually uses.",
       ),
+    canvasFrames: z
+      .preprocess(
+        (v) => (typeof v === "string" ? JSON.parse(v) : v),
+        z
+          .array(
+            z
+              .object({
+                fileId: z.string().optional(),
+                filename: z.string().optional(),
+                x: z.number().optional(),
+                y: z.number().optional(),
+                width: z.number().optional(),
+                height: z.number().optional(),
+                rotation: z.number().optional(),
+                z: z.number().optional(),
+              })
+              .refine((frame) => frame.fileId || frame.filename, {
+                message: "canvasFrames entries require fileId or filename",
+              }),
+          )
+          .optional(),
+      )
+      .optional()
+      .describe(
+        "Optional overview-canvas placements for generated screens. " +
+          "Reference each screen by filename or fileId and include x/y/width/height " +
+          "from generate-screens regions or your planned canvas layout.",
+      ),
   }),
   mcpApp: {
     compactCatalog: true,
@@ -124,6 +158,7 @@ export default defineAction({
     designSystemId,
     projectType,
     tweaks,
+    canvasFrames,
   }) => {
     await assertAccess("design", designId, "editor");
     if (designSystemId) {
@@ -280,6 +315,40 @@ export default defineAction({
         type: tweak.type === "color-swatches" ? "color-swatch" : tweak.type,
       }));
     }
+    let placedFrames:
+      | Array<{
+          fileId: string;
+          filename?: string;
+          frame: CanvasFramePlacement;
+        }>
+      | undefined;
+    if (canvasFrames !== undefined) {
+      const savedByFileId = new Map(savedFiles.map((file) => [file.id, file]));
+      const savedByFilename = new Map(
+        savedFiles.map((file) => [file.filename, file]),
+      );
+      const existingByFileId = new Map(
+        existingFiles.map((file) => [file.id, file]),
+      );
+      const merged = mergeCanvasFramePlacements({
+        existing: prevData.canvasFrames,
+        placements: canvasFrames,
+        resolveFileId: (placement) => {
+          if (placement.fileId) {
+            return savedByFileId.has(placement.fileId) ||
+              existingByFileId.has(placement.fileId)
+              ? placement.fileId
+              : undefined;
+          }
+          return placement.filename
+            ? (savedByFilename.get(placement.filename)?.id ??
+                existingByName.get(placement.filename)?.id)
+            : undefined;
+        },
+      });
+      mergedData.canvasFrames = merged.canvasFrames;
+      placedFrames = merged.placedFrames;
+    }
     designUpdates.data = JSON.stringify(mergedData);
 
     await db
@@ -292,6 +361,7 @@ export default defineAction({
       urlPath: `/design/${designId}`,
       renderable: true,
       savedFiles,
+      placedFrames,
       fileCount: savedFiles.length,
     };
   },