@agent-native/core 0.92.11 → 0.93.0

package/corpus/templates/design/actions/save-design-as-template.ts

@@ -0,0 +1,156 @@
+import { defineAction } from "@agent-native/core";
+import { buildDeepLink } from "@agent-native/core/server";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server/request-context";
+import { resolveAccess } from "@agent-native/core/sharing";
+import { nanoid } from "nanoid";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import { buildDesignSnapshot } from "../server/lib/design-snapshot.js";
+import {
+  firstTemplateDimensions,
+  redactTemplateDesignData,
+  remapTemplateFileIds,
+} from "../server/lib/design-template-data.js";
+import { countLockedLayersAcrossFiles } from "../shared/locked-layers.js";
+
+export const designTemplateCategorySchema = z.enum([
+  "ad",
+  "one-pager",
+  "landing-page",
+  "social",
+  "presentation",
+  "other",
+]);
+
+export default defineAction({
+  description:
+    "Save the current live snapshot of a design as a reusable template. " +
+    "Dimensions, files, canvas defaults, and data-agent-native-locked layers are preserved.",
+  schema: z.object({
+    designId: z.string().min(1).describe("Source design ID"),
+    title: z.string().trim().min(1).max(120).optional(),
+    description: z.string().trim().max(500).optional(),
+    category: designTemplateCategorySchema.optional().default("other"),
+  }),
+  run: async ({ designId, title, description, category }) => {
+    const access = await resolveAccess("design", designId);
+    if (!access || !["owner", "admin", "editor"].includes(access.role)) {
+      throw new Error("Design not found or not editable");
+    }
+
+    const source = access.resource;
+    const rawData = typeof source.data === "string" ? source.data : "{}";
+    const parsedSourceData = (() => {
+      try {
+        return JSON.parse(rawData) as Record<string, unknown>;
+      } catch {
+        return {};
+      }
+    })();
+    if (
+      parsedSourceData.sourceType === "fusion" ||
+      parsedSourceData.sourceType === "localhost"
+    ) {
+      throw new Error(
+        "Templates can currently be saved from inline Design projects only.",
+      );
+    }
+
+    const snapshot = await buildDesignSnapshot(designId, rawData);
+    const renderableFiles = snapshot.files.filter((file) =>
+      ["html", "jsx", "css"].includes(file.fileType),
+    );
+    if (renderableFiles.length === 0) {
+      throw new Error(
+        "Add at least one design screen before saving a template.",
+      );
+    }
+
+    const ownerEmail = getRequestUserEmail();
+    if (!ownerEmail) throw new Error("Not authenticated");
+    const orgId = getRequestOrgId() ?? null;
+    const templateId = nanoid();
+    const now = new Date().toISOString();
+    const fileIdMap = new Map(
+      snapshot.files.map((file) => [file.id, nanoid()]),
+    );
+    const data = remapTemplateFileIds(
+      redactTemplateDesignData(rawData),
+      fileIdMap,
+    );
+    const preferredFile =
+      snapshot.files.find((file) => file.filename === "index.html") ??
+      snapshot.files[0];
+    const dimensions = firstTemplateDimensions(
+      data,
+      preferredFile ? fileIdMap.get(preferredFile.id) : undefined,
+    );
+    const lockedLayerCount = countLockedLayersAcrossFiles(snapshot.files);
+
+    const db = getDb();
+    await db.transaction(async (tx) => {
+      await tx.insert(schema.designTemplates).values({
+        id: templateId,
+        title: title ?? String(source.title ?? "Untitled template"),
+        description:
+          description ??
+          (typeof source.description === "string" ? source.description : null),
+        category,
+        sourceDesignId: designId,
+        designSystemId:
+          typeof source.designSystemId === "string"
+            ? source.designSystemId
+            : null,
+        data: JSON.stringify(data),
+        width: dimensions.width,
+        height: dimensions.height,
+        lockedLayerCount,
+        ownerEmail,
+        orgId,
+        visibility: "private",
+        createdAt: now,
+        updatedAt: now,
+      });
+      await tx.insert(schema.designTemplateFiles).values(
+        snapshot.files.map((file) => ({
+          id: fileIdMap.get(file.id)!,
+          templateId,
+          filename: file.filename,
+          content: file.content,
+          fileType: file.fileType,
+          createdAt: now,
+          updatedAt: now,
+        })),
+      );
+    });
+
+    return {
+      id: templateId,
+      title: title ?? source.title,
+      category,
+      width: dimensions.width,
+      height: dimensions.height,
+      fileCount: snapshot.files.length,
+      lockedLayerCount,
+    };
+  },
+  link: ({ result }) => {
+    if (!result || typeof result !== "object") return null;
+    const id = (result as { id?: string }).id;
+    if (!id) return null;
+    return {
+      url: buildDeepLink({
+        app: "design",
+        view: "templates",
+        params: { templateId: id },
+        to: `/templates?templateId=${encodeURIComponent(id)}`,
+      }),
+      label: "Open template",
+      view: "templates",
+    };
+  },
+});

package/corpus/templates/design/actions/set-active-breakpoint.ts

@@ -8,9 +8,9 @@ import "../server/db/index.js"; // ensure registerShareableResource runs
 export default defineAction({
   description:
     "Set the active breakpoint for a design editor session. " +
-    "The active breakpoint controls which frame is the current edit scope: " +
-    "editing a layer while 'base' is active writes unprefixed Tailwind classes; " +
-    "editing while 'md' is active writes md: prefixed classes. " +
+    "The active breakpoint controls which responsive frame new edits target. " +
+    "The default desktop-down scope applies to that frame and smaller widths; " +
+    "the optional 'only' scope confines the override to that frame's range. " +
     "Persists to application state so the agent and UI always agree on the active scope.",
   schema: z.object({
     designId: z.string().describe("Design project ID"),
@@ -20,20 +20,29 @@ export default defineAction({
         "Id of the BreakpointDefinition to activate, or the literal string 'auto' " +
           "to reset to a single-frame (all-breakpoints) view.",
       ),
+    editScope: z
+      .enum(["cascade-smaller", "only"])
+      .optional()
+      .default("cascade-smaller")
+      .describe(
+        "How edits at a responsive frame cascade: 'cascade-smaller' applies to this breakpoint and smaller widths; 'only' confines edits to this breakpoint's range.",
+      ),
   }),
-  run: async ({ designId, breakpointId }) => {
+  run: async ({ designId, breakpointId, editScope }) => {
     await assertAccess("design", designId, "editor");
 
     // Persist as application state so view-screen returns it and the UI reflects it.
     await writeAppState(`design-active-breakpoint:${designId}`, {
       designId,
       activeBreakpointId: breakpointId,
+      responsiveEditScope: editScope,
       setAt: new Date().toISOString(),
     });
 
     return {
       designId,
       activeBreakpointId: breakpointId,
+      responsiveEditScope: editScope,
     };
   },
 });

package/corpus/templates/design/actions/take-design-screenshot.ts

@@ -572,6 +572,18 @@ export default defineAction({
           viewport: { width: viewport.widthPx, height: viewport.heightPx },
           deviceScaleFactor: 2,
         });
+        // esbuild/tsx `keepNames` rewrites a named inner function inside a
+        // page.evaluate callback (e.g. `collectPageDiagnostics`'s local
+        // helpers) into `__name(fn, "name")`. Playwright serializes that
+        // callback with Function#toString() and runs it in the page, where
+        // `__name` doesn't exist — this throws `ReferenceError: __name is
+        // not defined` and the action fails outright whenever it's invoked
+        // through a tsx/esbuild-transpiled entrypoint (e.g. `pnpm action`).
+        // Mirrors the identical fix in packages/core/src/cli/recap.ts
+        // (RECAP_SHOT_NAME_SHIM) — same root cause, same shim.
+        await context.addInitScript(
+          "globalThis.__name = globalThis.__name || function (value) { return value; };",
+        );
         const page = await context.newPage();
         const consoleErrors: string[] = [];
         const fontLoadFailures: string[] = [];
@@ -592,11 +604,69 @@ export default defineAction({
 
         try {
           await page.setContent(html, { waitUntil: "networkidle" });
-          // Best-effort settle for Alpine.js x-init / CDN Tailwind JIT compile.
-          await page.waitForTimeout(300);
+          // Bounded wait for webfonts to finish loading. `networkidle` alone
+          // is not enough: a screenshot taken while a custom Google Font is
+          // still downloading renders with fallback-font metrics — a
+          // different, often overflowing layout — which is exactly the kind
+          // of "broken layout" this action's visual self-review pass exists
+          // to catch, not produce.
+          await page
+            .evaluate(async () => {
+              const fontsReady = document.fonts?.ready;
+              if (!fontsReady) return;
+              await Promise.race([
+                fontsReady,
+                new Promise<void>((resolve) => setTimeout(resolve, 4_000)),
+              ]);
+            })
+            .catch(() => {});
+          // Best-effort settle for Alpine.js x-init / CDN Tailwind JIT
+          // compile: wait for the page's total CSSOM rule count to stop
+          // growing across polls (a CDN stylesheet injected after
+          // `networkidle` fires looks exactly like this), instead of a flat
+          // guess that either wastes time or fires too early on a complex
+          // design with many stylesheets.
+          await page
+            .waitForFunction(
+              () => {
+                const win = window as unknown as {
+                  __anExportRuleCounts?: number[];
+                  __anExportRuleStart?: number;
+                };
+                win.__anExportRuleStart ??= Date.now();
+                const count = Array.from(document.styleSheets).reduce(
+                  (sum, sheet) => {
+                    try {
+                      return sum + (sheet.cssRules?.length ?? 0);
+                    } catch {
+                      return sum + 1;
+                    }
+                  },
+                  0,
+                );
+                const history = [
+                  ...(win.__anExportRuleCounts ?? []).slice(-5),
+                  count,
+                ];
+                win.__anExportRuleCounts = history;
+                return (
+                  history.length >= 6 &&
+                  history.every((value) => value === history[0]) &&
+                  Date.now() - win.__anExportRuleStart >= 600
+                );
+              },
+              { timeout: 2500, polling: 100 },
+            )
+            .catch(() => {});
 
           const pageDiagnostics = await page.evaluate(collectPageDiagnostics);
-          const png = await page.screenshot({ type: "png" });
+          // `fullPage` is required here: Playwright's default screenshot
+          // crops to the current viewport, so any screen taller than the
+          // requested viewport height (tall landing pages, long dashboards)
+          // silently loses everything below the fold instead of erroring —
+          // this is the "PNG export produces ... broken layouts" complaint
+          // for tall complex screens, reproduced on a 1440x3200 fixture.
+          const png = await page.screenshot({ type: "png", fullPage: true });
 
           const uploaded = await uploadFile({
             data: png,

package/corpus/templates/design/actions/update-file.ts

@@ -12,6 +12,8 @@ import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import { withSourceFileWriteLock } from "../server/source-workspace.js";
+import { assertDesignHtmlEditIntegrity } from "../shared/html-integrity.js";
+import { assertLockedLayersPreserved } from "../shared/locked-layers.js";
 import { sourceContentHash } from "../shared/source-workspace.js";
 
 function rowsAffected(result: unknown): number | undefined {
@@ -120,16 +122,19 @@ export default defineAction({
         });
       }
     }),
-  run: async ({
-    id,
-    content,
-    filename,
-    fileType,
-    syncCollab,
-    expectedVersionHash,
-    operationSource,
-    operationRevision,
-  }) => {
+  run: async (
+    {
+      id,
+      content,
+      filename,
+      fileType,
+      syncCollab,
+      expectedVersionHash,
+      operationSource,
+      operationRevision,
+    },
+    context,
+  ) => {
     // Path traversal guard on filename
     if (
       filename &&
@@ -148,6 +153,7 @@ export default defineAction({
       .select({
         id: schema.designFiles.id,
         designId: schema.designFiles.designId,
+        fileType: schema.designFiles.fileType,
       })
       .from(schema.designFiles)
       .innerJoin(
@@ -206,6 +212,7 @@ export default defineAction({
         const [persistedFile] = await db
           .select({
             content: schema.designFiles.content,
+            fileType: schema.designFiles.fileType,
             contentOperationSource: schema.designFiles.contentOperationSource,
             contentOperationRevision:
               schema.designFiles.contentOperationRevision,
@@ -221,6 +228,28 @@ export default defineAction({
 
         const persistedContentHash = sourceContentHash(persistedFile.content);
         persistedVersionHash = persistedContentHash;
+        const collabExists =
+          content !== undefined ? await hasCollabState(id) : false;
+        const liveContent =
+          content !== undefined && collabExists
+            ? await getText(id, "content")
+            : persistedFile.content;
+        if (content !== undefined) {
+          assertDesignHtmlEditIntegrity({
+            previousContent: liveContent,
+            nextContent: content,
+            fileType:
+              fileType ?? persistedFile.fileType ?? file.fileType ?? "html",
+          });
+        }
+        if (
+          content !== undefined &&
+          context?.caller !== "frontend" &&
+          (fileType === "html" ||
+            liveContent.includes("data-agent-native-locked"))
+        ) {
+          assertLockedLayersPreserved(liveContent, content);
+        }
         const hasVersionedContentOperation =
           content !== undefined &&
           operationSource !== undefined &&
@@ -309,18 +338,6 @@ export default defineAction({
           expectedVersionHash !== undefined &&
           content !== undefined
         ) {
-          const collabExists = await hasCollabState(id);
-          let liveContent: string;
-          if (collabExists) {
-            liveContent = await getText(id, "content");
-          } else {
-            const [current] = await db
-              .select({ content: schema.designFiles.content })
-              .from(schema.designFiles)
-              .where(eq(schema.designFiles.id, id))
-              .limit(1);
-            liveContent = current?.content ?? "";
-          }
           const acceptedBaseHashes = new Set([
             expectedVersionHash,
             ...(sameSourceSuccessorHash ? [sameSourceSuccessorHash] : []),

package/corpus/templates/design/actions/view-screen.ts

@@ -18,6 +18,7 @@ import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import { parseCanvasFrameGeometryById } from "../shared/canvas-frames.js";
+import { getDesignTemplatePreset } from "../shared/design-template-presets.js";
 import { designGenerationSessionKey } from "../shared/generation-session.js";
 
 function stringProp(value: unknown, key: string): string | undefined {
@@ -136,7 +137,7 @@ function resolveActiveCodeFile(
 
 export default defineAction({
   description:
-    "See what the user is currently looking at on screen. Returns the current navigation state including which design is open, which view they are on (list, editor, design-systems, present, settings), active/focused design screen, selected element, active inspector tab (design or tweaks), active left rail panel (file, agent, assets, import, tools, tokens, or code), active code file metadata, overview canvas state, plus any pending question overlay. Always call this first before taking any action.",
+    "See what the user is currently looking at on screen. Returns the current navigation state including which design or template is open, which view they are on (list, templates, editor, design-systems, present, settings), active/focused design screen, selected element, active inspector tab (design or tweaks), active left rail panel (file, agent, assets, import, tools, tokens, or code), active code file metadata, overview canvas state, plus any pending question overlay. Always call this first before taking any action.",
   schema: z.object({}),
   http: false,
   run: async () => {
@@ -161,6 +162,40 @@ export default defineAction({
     const screen: Record<string, unknown> = {};
     if (navigation) screen.navigation = navigation;
     if (designSelection) screen.designSelection = designSelection;
+    const templateId = stringProp(navigation, "templateId");
+    if (templateId) {
+      const preset = getDesignTemplatePreset(templateId);
+      if (preset) {
+        screen.template = {
+          id: preset.id,
+          title: preset.title,
+          category: preset.category,
+          width: preset.width,
+          height: preset.height,
+          lockedLayerCount: 2,
+          source: "starter",
+        };
+      } else {
+        const templateAccess = await resolveAccess(
+          "design-template",
+          templateId,
+        ).catch(() => null);
+        if (templateAccess) {
+          const template = templateAccess.resource;
+          screen.template = {
+            id: templateId,
+            title: template.title ?? null,
+            description: template.description ?? null,
+            category: template.category ?? "other",
+            width: template.width ?? null,
+            height: template.height ?? null,
+            lockedLayerCount: template.lockedLayerCount ?? 0,
+            visibility: template.visibility ?? "private",
+            source: "saved",
+          };
+        }
+      }
+    }
     if (designId) {
       const access = await resolveAccess("design", designId).catch(() => null);
       if (access) {

package/corpus/templates/design/actions/write-local-file.ts

@@ -3,7 +3,7 @@
  *
  * Security gates (in order):
  *  1. assertAccess: the caller must have editor access to the design.
- *  2. File extension: only .html, .htm, and .css files are allowed.
+ *  2. File safety: secret-looking and known binary paths are rejected.
  *  3. verifyWriteGrant: a valid (non-expired) user-approved write-consent grant
  *     must exist. The agent CANNOT bypass this check.
  *  4. Path confinement: assertPathInside ensures the target stays inside
@@ -18,8 +18,6 @@
  *     and re-grant write consent.
  */
 
-import path from "node:path";
-
 import { defineAction } from "@agent-native/core";
 import {
   getRequestOrgId,
@@ -32,36 +30,39 @@ import { z } from "zod";
 import { getDb, schema } from "../server/db/index.js";
 import { verifyWriteGrant } from "../server/lib/verify-write-grant.js";
 
-/**
- * Text/code file extensions the agent is permitted to write via the bridge.
- * Mirrors ALLOWED_WRITE_EXTENSIONS in the core design-connect bridge, which
- * enforces the same list plus a secret-path blocklist on its side.
- */
-const ALLOWED_EXTENSIONS = new Set([
-  ".html",
-  ".htm",
-  ".css",
-  ".scss",
-  ".less",
-  ".js",
-  ".jsx",
-  ".ts",
-  ".tsx",
-  ".mjs",
-  ".cjs",
-  ".json",
-  ".md",
-  ".mdx",
-  ".vue",
-  ".svelte",
-  ".astro",
-  ".txt",
-  ".yml",
-  ".yaml",
-  ".svg",
-]);
 const SHA256_VERSION_HASH = /^[a-f0-9]{64}$/i;
 
+const BLOCKED_BINARY_EXTENSIONS = new Set([
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".webp",
+  ".ico",
+  ".woff",
+  ".woff2",
+  ".ttf",
+  ".otf",
+  ".eot",
+  ".mp3",
+  ".mp4",
+  ".mov",
+  ".webm",
+  ".zip",
+  ".gz",
+  ".tar",
+  ".pdf",
+  ".wasm",
+  ".fig",
+  ".sketch",
+  ".exe",
+  ".dll",
+  ".dylib",
+  ".so",
+  ".class",
+  ".jar",
+]);
+
 /**
  * Secret-looking paths are never writable, regardless of extension. All
  * comparisons are case-insensitive: macOS's default filesystem (and Windows)
@@ -82,17 +83,18 @@ function isBlockedSecretPath(relPath: string): boolean {
   return false;
 }
 
-function assertAllowedExtension(relPath: string): void {
+function assertSafeWritePath(relPath: string): void {
   if (isBlockedSecretPath(relPath)) {
     throw new Error(
       `File "${relPath}" looks like a secret or VCS-internal file and may not be written through the bridge.`,
     );
   }
-  const ext = path.extname(relPath).toLowerCase();
-  if (!ALLOWED_EXTENSIONS.has(ext)) {
+  const basename = relPath.split(/[\\/]+/).pop() ?? "";
+  const extensionMatch = basename.match(/(\.[^.]+)$/);
+  const ext = extensionMatch?.[1]?.toLowerCase() ?? "";
+  if (BLOCKED_BINARY_EXTENSIONS.has(ext)) {
     throw new Error(
-      `File "${relPath}" has extension "${ext}" which is not allowed. ` +
-        "Only text and code files (HTML, CSS, JS/TS, JSON, Markdown, and similar) may be written through the bridge.",
+      `File "${relPath}" is a known binary file type and may not be written through the code editor.`,
     );
   }
 }
@@ -233,8 +235,9 @@ export default defineAction({
     if (!ownerEmail) throw new Error("no authenticated user");
     const orgId = getRequestOrgId() ?? null;
 
-    // --- Gate 2: extension whitelist ---
-    assertAllowedExtension(relPath);
+    // --- Gate 2: reject secrets and known binary files. The local bridge
+    // performs the final byte-level text check against the actual file. ---
+    assertSafeWritePath(relPath);
 
     // --- Gate 3: valid write-consent grant ---
     const grant = await verifyWriteGrant({
@@ -271,6 +274,7 @@ export default defineAction({
       .select({
         bridgeUrl: schema.designLocalhostConnections.bridgeUrl,
         bridgeToken: schema.designLocalhostConnections.bridgeToken,
+        rootPath: schema.designLocalhostConnections.rootPath,
       })
       .from(schema.designLocalhostConnections)
       .where(
@@ -290,6 +294,14 @@ export default defineAction({
           "Ensure the design bridge is running (npx @agent-native/core@latest design connect).",
       );
     }
+    if (!connection.rootPath || connection.rootPath !== grant.rootPath) {
+      throw Object.assign(
+        new Error(
+          "The localhost write-consent grant no longer matches the connected local folder. Re-grant write consent for the current folder before saving.",
+        ),
+        { statusCode: 428 },
+      );
+    }
 
     // Prefer the connection's CURRENT bridge token over the one snapshotted on
     // the grant: the CLI mints a fresh token on every bridge start, and a