@agent-native/core 0.169.1 → 0.170.0

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

@@ -31,6 +31,7 @@ import { getDb, schema } from "../server/db/index.js";
 import { mutateDesignData } from "../server/lib/design-data-mutation.js";
 import {
   readLiveSourceFile,
+  SourceWorkspaceEditConflictError,
   writeInlineSourceFile,
   type SourceWorkspaceFile,
 } from "../server/source-workspace.js";
@@ -48,6 +49,7 @@ import {
   assertDesignHtmlCreateIntegrity,
   describeDesignHtmlIntegrityIssue,
   inspectDesignHtmlDocumentIntegrity,
+  isDesignHtmlIntegrityError,
 } from "../shared/html-integrity.js";
 import { assertLockedLayersPreserved } from "../shared/locked-layers.js";
 import { widthToPrefix } from "../shared/responsive-classes.js";
@@ -488,6 +490,9 @@ const generateDesignAction = defineAction({
     "The agent calls this after generating HTML/CSS/JSX content to persist it " +
     "as files in the design project. Creates or updates files as needed. " +
     "Returns the saved files and design URL path for iframe rendering. " +
+    "A file rejected by a concurrent edit or an HTML-integrity check does not " +
+    "fail the whole call — it is listed in `fileErrors` instead, while every " +
+    "other file in the same call still saves; resend just the named file(s). " +
     "Keep the first save compact and working; for large designs, persist a minimal " +
     "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 " +
@@ -793,14 +798,23 @@ const generateDesignAction = defineAction({
       // takes the lenient edit transition instead, so a legacy-malformed screen
       // stays repairable — but its advisories are still reported, or the same
       // content would warn as a new file and save silently as a regeneration.
-      const advisory =
-        !existing || becomesHtml
-          ? assertDesignHtmlCreateIntegrity({
-              content: file.content,
-              fileType: "html",
-              filename: file.filename,
-            })
-          : (inspectDesignHtmlDocumentIntegrity(file.content).advisory ?? []);
+      let advisory: ReturnType<typeof assertDesignHtmlCreateIntegrity>;
+      if (!existing || becomesHtml) {
+        advisory = assertDesignHtmlCreateIntegrity({
+          content: file.content,
+          fileType: "html",
+          filename: file.filename,
+        });
+      } else {
+        // `inspectDesignHtmlDocumentIntegrity` only sets `.advisory` when
+        // valid:true; an invalid existing file's issues live in `.detail`
+        // instead, so `.advisory ?? []` was silently dropping them — the
+        // opposite of the comment above promising they are still reported.
+        const inspected = inspectDesignHtmlDocumentIntegrity(file.content);
+        advisory = inspected.valid
+          ? (inspected.advisory ?? [])
+          : (inspected.detail ?? []);
+      }
       for (const entry of advisory) {
         integrityWarnings.push({
           filename: file.filename,
@@ -809,6 +823,10 @@ const generateDesignAction = defineAction({
       }
     }
 
+    // Populated when a per-file write is rejected below (conflict or
+    // integrity failure); surfaced in the return payload so a partial batch
+    // is reported as partial, never silently read back as complete.
+    const fileErrors: Array<{ filename: string; message: string }> = [];
     for (const file of annotatedFiles) {
       const existing = existingByName.get(file.filename);
       if (existing) {
@@ -820,49 +838,79 @@ const generateDesignAction = defineAction({
         });
 
         try {
-          // `file.content` here is LLM-generated content produced upstream of
-          // this action call, so there can be a large async window (the full
-          // generation time) between whenever this file's content was last
-          // known and this write. Read the LIVE base (collab text when
-          // present, else the SQL row) right before persisting and carry its
-          // versionHash through to writeInlineSourceFile, which re-reads the
-          // live text immediately before its own applyText/DB write and
-          // rejects if it no longer matches — closing the race window where a
-          // concurrent editor/agent write lands mid-generation. See
-          // insert-design-native-asset.ts and insert-asset.ts for the
-          // identical pattern.
-          const workspaceFile: SourceWorkspaceFile = {
-            id: existing.id,
-            designId: existing.designId,
-            filename: existing.filename ?? "",
-            fileType: existing.fileType ?? "html",
-            content: existing.content,
-            createdAt: null,
-            updatedAt: null,
-          };
-          const live = await readLiveSourceFile(workspaceFile);
+          try {
+            // `file.content` here is LLM-generated content produced upstream of
+            // this action call, so there can be a large async window (the full
+            // generation time) between whenever this file's content was last
+            // known and this write. Read the LIVE base (collab text when
+            // present, else the SQL row) right before persisting and carry its
+            // versionHash through to writeInlineSourceFile, which re-reads the
+            // live text immediately before its own applyText/DB write and
+            // rejects if it no longer matches — closing the race window where a
+            // concurrent editor/agent write lands mid-generation. See
+            // insert-design-native-asset.ts and insert-asset.ts for the
+            // identical pattern.
+            const workspaceFile: SourceWorkspaceFile = {
+              id: existing.id,
+              designId: existing.designId,
+              filename: existing.filename ?? "",
+              fileType: existing.fileType ?? "html",
+              content: existing.content,
+              createdAt: null,
+              updatedAt: null,
+            };
+            const live = await readLiveSourceFile(workspaceFile);
 
-          assertLockedLayersPreserved(live.content, file.content);
+            assertLockedLayersPreserved(live.content, file.content);
 
-          await writeInlineSourceFile({
-            designId: existing.designId,
-            file: workspaceFile,
-            content: file.content,
-            expectedVersionHash: live.versionHash,
-          });
+            await writeInlineSourceFile({
+              designId: existing.designId,
+              file: workspaceFile,
+              content: file.content,
+              expectedVersionHash: live.versionHash,
+            });
 
-          // writeInlineSourceFile only persists content/updatedAt; keep
-          // fileType in sync separately when the caller changed it (e.g.
-          // html -> jsx), matching the original update behavior.
-          const nextFileType = file.fileType ?? "html";
-          if (nextFileType !== (existing.fileType ?? "html")) {
-            await db
-              .update(schema.designFiles)
-              .set({ fileType: nextFileType, updatedAt: now })
-              .where(eq(schema.designFiles.id, existing.id));
+            // writeInlineSourceFile only persists content/updatedAt; keep
+            // fileType in sync separately when the caller changed it (e.g.
+            // html -> jsx), matching the original update behavior.
+            const nextFileType = file.fileType ?? "html";
+            if (nextFileType !== (existing.fileType ?? "html")) {
+              await db
+                .update(schema.designFiles)
+                .set({ fileType: nextFileType, updatedAt: now })
+                .where(eq(schema.designFiles.id, existing.id));
+            }
+          } finally {
+            agentLeaveDocument(existing.id);
           }
-        } finally {
-          agentLeaveDocument(existing.id);
+        } catch (error) {
+          // Only the two rejection reasons the tool description above
+          // promises — a version-hash conflict and an HTML-integrity
+          // rejection — are reported per-file. Anything else (a DB/provider
+          // failure from the read, the write, or the follow-up fileType
+          // update) is not a caller-diagnosable rejection of THIS file's
+          // content; swallowing it here would report a transient
+          // infrastructure failure as an ordinary "resend this file"
+          // outcome, or hide that the content write actually succeeded and
+          // only the fileType update failed. Rethrow so it fails the whole
+          // call loud instead.
+          if (
+            !(error instanceof SourceWorkspaceEditConflictError) &&
+            !isDesignHtmlIntegrityError(error)
+          ) {
+            throw error;
+          }
+          // A legitimate optimistic-concurrency conflict or an HTML-integrity
+          // rejection on THIS file must not discard files earlier in this
+          // batch that already committed durably, and must not disappear
+          // either — record it as a distinct, loud failure so the caller can
+          // tell "saved" from "failed" and retry just this file, instead of a
+          // later read seeing a mixed batch with no marker explaining why.
+          fileErrors.push({
+            filename: file.filename,
+            message: error instanceof Error ? error.message : String(error),
+          });
+          continue;
         }
 
         savedFiles.push({
@@ -1241,6 +1289,9 @@ const generateDesignAction = defineAction({
       // Non-blocking: a well-formed screen with no Tailwind runtime renders
       // unstyled, which reads as a layout bug rather than a missing runtime.
       ...(integrityWarnings.length > 0 ? { warnings: integrityWarnings } : {}),
+      // Per-file conflicts/rejections caught above: these files were NOT
+      // saved and still need a retry, unlike everything in `savedFiles`.
+      ...(fileErrors.length > 0 ? { fileErrors } : {}),
       ...creativeContextProvenance,
     };
   },

package/corpus/templates/design/actions/get-design-system.ts

@@ -114,6 +114,7 @@ function buildDesignSystemAgentContext({
   assets,
   customInstructions,
   builder,
+  canRefreshBuilder,
 }: {
   id: string;
   title: string;
@@ -122,6 +123,7 @@ function buildDesignSystemAgentContext({
   assets?: string | null;
   customInstructions?: string | null;
   builder: BuilderGenerationContext | null;
+  canRefreshBuilder: boolean;
 }): string {
   const lines: string[] = [
     "## Selected Design System Context",
@@ -154,7 +156,9 @@ function buildDesignSystemAgentContext({
       builder.builderUrl ? `- URL: ${builder.builderUrl}` : "",
       builder.builderStatus ? `- Status: ${builder.builderStatus}` : "",
       "- Builder DSI docs and token values override local proxy placeholders.",
-      "- Do not substitute a generic style if DSI docs or tokens are unavailable; call get-design-system again or tell the user Builder indexing is not ready.",
+      canRefreshBuilder
+        ? "- If no usable DSI docs or tokens are returned, call refresh-design-system-with-builder once, then call get-design-system again before generating; if it is still empty, tell the user Builder indexing is not ready."
+        : "- If no usable DSI docs or tokens are returned, tell the user Builder indexing is not ready; refreshing the shared system requires editor access.",
     );
 
     if (builder.warning) {
@@ -297,6 +301,7 @@ export default defineAction({
         data: row.data,
         assets: row.assets,
         customInstructions: row.customInstructions,
+        canRefreshBuilder: ["owner", "admin", "editor"].includes(access.role),
         builder,
       }),
     };

package/corpus/templates/design/actions/refresh-design-system-with-builder.ts

@@ -0,0 +1,146 @@
+import { defineAction } from "@agent-native/core";
+import {
+  hydrateBuilderDesignSystemReference,
+  parseBuilderDesignSystemProxyReference,
+} from "@agent-native/core/server";
+import { assertAccess, resolveAccess } from "@agent-native/core/sharing";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+
+import { getDb, schema } from "../server/db/index.js";
+import { reconcileBuilderProxyData } from "../server/lib/builder-design-system-proxy.js";
+
+function persistedBuilderSyncMatches(data: unknown, syncedAt: string): boolean {
+  if (typeof data !== "string") return false;
+  try {
+    const parsed = JSON.parse(data) as Record<string, unknown>;
+    return (
+      parsed.builderStatus === "ready" && parsed.builderSyncedAt === syncedAt
+    );
+  } catch {
+    throw new Error(
+      "The design system data became invalid while Builder DSI was syncing.",
+    );
+  }
+}
+
+export default defineAction({
+  description:
+    "Refresh a Builder-backed design-system proxy after DSI indexing finishes. " +
+    "Requires editor access. If Builder is still processing, returns synced=false " +
+    "without replacing the local proxy with partial data.",
+  schema: z.object({
+    id: z.string().min(1).describe("Local design system id"),
+  }),
+  run: async ({ id }) => {
+    await assertAccess("design-system", id, "editor");
+    const access = await resolveAccess("design-system", id);
+    if (!access) throw new Error("Design system not found");
+
+    const reference = parseBuilderDesignSystemProxyReference(
+      access.resource.data,
+    );
+    if (!reference) {
+      throw new Error("This design system is not a Builder-backed proxy.");
+    }
+
+    const hydrated = await hydrateBuilderDesignSystemReference(reference);
+    const syncedAt = new Date().toISOString();
+    const reconciliation = reconcileBuilderProxyData(
+      access.resource.data,
+      hydrated,
+      syncedAt,
+    );
+    if (!reconciliation) {
+      return {
+        id,
+        synced: false,
+        status:
+          hydrated.builderStatus ?? reference.builderStatus ?? "in-progress",
+        docCount: hydrated.docCount,
+        tokenCount: 0,
+        message: "Builder DSI has not returned usable token values yet.",
+      };
+    }
+
+    if (reconciliation.rejectedTokenCount > 0) {
+      return {
+        id,
+        synced: false,
+        status: "incomplete",
+        docCount: hydrated.docCount,
+        tokenCount: reconciliation.tokenCount,
+        rejectedTokenCount: reconciliation.rejectedTokenCount,
+        message: `Builder DSI returned ${reconciliation.rejectedTokenCount} token(s) that could not be safely imported.`,
+      };
+    }
+
+    if (!reconciliation.completionConfirmed) {
+      return {
+        id,
+        synced: false,
+        status:
+          hydrated.builderStatus ?? reference.builderStatus ?? "in-progress",
+        docCount: hydrated.docCount,
+        tokenCount: reconciliation.tokenCount,
+        rejectedTokenCount: 0,
+        message:
+          "Builder DSI returned token values without confirming that indexing is complete. Retry after Builder reports completion.",
+      };
+    }
+
+    await assertAccess("design-system", id, "editor");
+    const latestAccess = await resolveAccess("design-system", id);
+    if (!latestAccess) throw new Error("Design system not found");
+    if (
+      latestAccess.resource.id !== access.resource.id ||
+      latestAccess.resource.data !== access.resource.data
+    ) {
+      return {
+        id,
+        synced: false,
+        status: "conflict",
+        docCount: hydrated.docCount,
+        tokenCount: reconciliation.tokenCount,
+        rejectedTokenCount: 0,
+        message:
+          "The design system changed while Builder DSI was syncing. Retry the refresh.",
+      };
+    }
+
+    const db = getDb();
+    await db
+      .update(schema.designSystems)
+      .set({ data: reconciliation.data, updatedAt: syncedAt })
+      .where(
+        and(
+          eq(schema.designSystems.id, latestAccess.resource.id),
+          eq(schema.designSystems.data, latestAccess.resource.data),
+        ),
+      );
+
+    const persisted = await resolveAccess("design-system", id);
+    if (!persistedBuilderSyncMatches(persisted?.resource?.data, syncedAt)) {
+      return {
+        id,
+        synced: false,
+        status: "conflict",
+        docCount: hydrated.docCount,
+        tokenCount: reconciliation.tokenCount,
+        rejectedTokenCount: 0,
+        message:
+          "The design system changed while Builder DSI was syncing. Retry the refresh.",
+      };
+    }
+
+    return {
+      id,
+      synced: true,
+      status: "ready",
+      docCount: hydrated.docCount,
+      tokenCount: reconciliation.tokenCount,
+      rejectedTokenCount: reconciliation.rejectedTokenCount,
+      syncedAt,
+    };
+  },
+});

package/corpus/templates/design/app/components/design/DesignCanvas.tsx

@@ -20,10 +20,12 @@ import {
   closePenPath,
   constrainPointTo45Degrees,
   createCornerNode,
-  createSmoothNode,
+  createPenCuspLatch,
+  createPenDragNode,
   isPenCloseTarget,
   serializePenPath,
   translatePenPath,
+  type PenCuspLatch,
   type PenPath,
   type PenPoint,
 } from "@shared/pen-path";
@@ -494,7 +496,10 @@ interface DesignCanvasProps {
     selector: string,
     styles: Record<string, string>,
     info?: ElementInfo,
-    metadata?: { originalStyles?: Record<string, string> },
+    metadata?: {
+      originalStyles?: Record<string, string>;
+      preserveSelection?: boolean;
+    },
   ) => void;
   onTextContentChange?: (
     selector: string,
@@ -956,6 +961,16 @@ function originFromUrl(value: string | undefined): string | null {
   }
 }
 
+/**
+ * JSON for embedding inside an inline `<script>`. A bare `JSON.stringify` keeps
+ * `</script>` verbatim, and the HTML parser closes the surrounding script the
+ * moment it sees that sequence — truncating the bridge for any design whose
+ * head legitimately contains one (JSON-LD, a templating snippet).
+ */
+function inlineScriptJson(value: string): string {
+  return JSON.stringify(value).replace(/</g, "\\u003c");
+}
+
 function buildEditorChromeBridgeScript(args: {
   readOnly: boolean;
   editMode: boolean;
@@ -966,6 +981,7 @@ function buildEditorChromeBridgeScript(args: {
   contentOffsetX: number;
   contentOffsetY: number;
   runtimeLayerSnapshotEnabled: boolean;
+  initialSourceHead: string;
 }) {
   return (
     createEditorBridgeThemeScript(readEditorBridgeThemeVars()) +
@@ -1001,9 +1017,18 @@ function buildEditorChromeBridgeScript(args: {
         "__SELECTED_LAYER_DRAG_PRIORITY__",
         SELECTED_LAYER_DRAG_PRIORITY_ENABLED ? "true" : "false",
       )
+      .replace(/__INITIAL_SOURCE_HEAD__/g, () =>
+        inlineScriptJson(args.initialSourceHead),
+      )
   );
 }
 
+/** The `<head>` the bridge's own srcdoc will render, so its first in-place
+ *  patch diffs against what is actually in the document. */
+function sourceHeadInnerHtml(html: string): string {
+  return /<head\b[^>]*>([\s\S]*?)<\/head\s*>/i.exec(html)?.[1] ?? "";
+}
+
 function contentHash(value: string): string {
   let hash = 0;
   for (let index = 0; index < value.length; index += 1) {
@@ -1015,27 +1040,30 @@ function contentHash(value: string): string {
 const SCRIPT_ELEMENT_RE = /<script\b[^>]*>[\s\S]*?<\/script\s*>/gi; // i18n-ignore non-UI regex
 
 /**
- * Runtime document replacement uses `head.innerHTML` / `body.innerHTML`, which
- * intentionally preserves the iframe browsing context but cannot execute
- * newly inserted or changed scripts. Reload only when source script elements
- * change; ordinary markup/style edits continue through the no-flash bridge.
+ * Runtime document replacement morphs the live DOM, which preserves the iframe
+ * browsing context but cannot execute newly inserted or changed scripts.
+ * Reload only when source script elements change.
+ *
+ * A changed `<head>` is NOT a reload trigger: the bridge swaps only the nodes
+ * the previous source head contributed (replaceSourceHeadNodes), leaving what
+ * the page's own runtime injected in place. Treating any head edit as a reload
+ * meant every breakpoint override, motion track and token write — all of which
+ * persist into a managed `<style>` in the head — reloaded the whole frame.
  */
 function runtimeDocumentNeedsReload(
   previousContent: string,
   nextContent: string,
 ): boolean {
-  const scriptSignature = (html: string) =>
-    Array.from(html.matchAll(SCRIPT_ELEMENT_RE), (match) => match[0]).join(
-      "\n",
-    );
-  // A changed <head> is replaced wholesale, which drops whatever the page's own
-  // runtime injected there and cannot re-run the scripts that produced it.
-  const headSignature = (html: string) =>
-    /<head\b[^>]*>([\s\S]*?)<\/head\s*>/i.exec(html)?.[1] ?? "";
-  return (
-    scriptSignature(previousContent) !== scriptSignature(nextContent) ||
-    headSignature(previousContent) !== headSignature(nextContent)
-  );
+  const scriptSignature = (html: string) => {
+    const headEnd = html.search(/<\/head\s*>/i);
+    const boundary = headEnd === -1 ? 0 : headEnd;
+    return Array.from(
+      html.matchAll(SCRIPT_ELEMENT_RE),
+      (match) =>
+        `${(match.index ?? 0) < boundary ? "head" : "body"}:${match[0]}`,
+    ).join("\n");
+  };
+  return scriptSignature(previousContent) !== scriptSignature(nextContent);
 }
 
 /**
@@ -1465,6 +1493,9 @@ export function DesignCanvas({
         contentOffsetX: embeddedFrame?.contentOffsetX ?? 0,
         contentOffsetY: embeddedFrame?.contentOffsetY ?? 0,
         runtimeLayerSnapshotEnabled,
+        // A live/localhost screen's document is the running app, not content
+        // this canvas rendered, so there is no source head to diff against.
+        initialSourceHead: "",
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [boardSurface, contentKey, runtimeLayerSnapshotEnabled, screenId],
@@ -2329,6 +2360,7 @@ export function DesignCanvas({
     // keyed bridge registration is pending. The loading surface waits without
     // mounting an iframe, then mounts the real `src` exactly once.
     if (rawExternalPreviewUrl) return undefined;
+    const localizedContent = withLocalRuntimes(iframeRenderContent);
     const editorChromeBridge = interactMode
       ? ""
       : createEditorBridgeThemeScript(readEditorBridgeThemeVars()) +
@@ -2369,6 +2401,9 @@ export function DesignCanvas({
           .replace(
             "__SELECTED_LAYER_DRAG_PRIORITY__",
             SELECTED_LAYER_DRAG_PRIORITY_ENABLED ? "true" : "false",
+          )
+          .replace(/__INITIAL_SOURCE_HEAD__/g, () =>
+            inlineScriptJson(sourceHeadInnerHtml(localizedContent)),
           );
     // ALWAYS injected (like the other always-on bridges above) so
     // MultiScreenCanvas's cross-screen drag hit-testing
@@ -2389,7 +2424,7 @@ export function DesignCanvas({
       editorChromeBridge +
       imageDiagBridge;
     const frameContent = getEmbeddedFrameDocumentContent({
-      content: withLocalRuntimes(iframeRenderContent),
+      content: localizedContent,
       embeddedFrameBackground,
       transparentBackground,
       contentOffsetX: embeddedFrame?.contentOffsetX ?? 0,
@@ -2410,7 +2445,7 @@ export function DesignCanvas({
           embeddedFrame?.contentOffsetY ?? 0,
         ),
       ].join("");
-      frameDocument = `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${frameStyle}</head><body>${withLocalRuntimes(iframeRenderContent)}${bridgeToInject}</body></html>`;
+      frameDocument = `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${frameStyle}</head><body>${localizedContent}${bridgeToInject}</body></html>`;
     }
     // Overview frames report their own content height so the canvas can
     // content-fit them (Framer-style). Embedded (overview) frames only — a
@@ -2730,6 +2765,7 @@ export function DesignCanvas({
             isElementInfoPayload(e.data.payload) ? e.data.payload : undefined,
             {
               originalStyles,
+              preserveSelection: e.data.preserveSelection === true,
             },
           );
         }
@@ -5110,6 +5146,7 @@ interface SingleScreenPenGestureState {
   pathBefore: PenPath | null;
   moved: boolean;
   closing: boolean;
+  cuspLatch: PenCuspLatch;
 }
 
 const SINGLE_SCREEN_PEN_HIT_RADIUS_PX = 10;
@@ -5342,6 +5379,7 @@ function SingleScreenCreationOverlay({
           pathBefore,
           moved: false,
           closing,
+          cuspLatch: createPenCuspLatch(),
         };
         const initialPath = closing
           ? closePenPath(pathBefore!)
@@ -5400,9 +5438,12 @@ function SingleScreenCreationOverlay({
           : appendPenNode(
               gesture.pathBefore,
               moved
-                ? createSmoothNode(gesture.anchor, handleOut, {
-                    breakSymmetry: e.altKey,
-                  })
+                ? createPenDragNode(
+                    gesture.anchor,
+                    handleOut,
+                    gesture.cuspLatch,
+                    e.altKey,
+                  )
                 : createCornerNode(gesture.anchor),
             );
         updatePenPath(nextPath);
@@ -5454,9 +5495,12 @@ function SingleScreenCreationOverlay({
           : appendPenNode(
               gesture.pathBefore,
               moved
-                ? createSmoothNode(gesture.anchor, handleOut, {
-                    breakSymmetry: e.altKey,
-                  })
+                ? createPenDragNode(
+                    gesture.anchor,
+                    handleOut,
+                    gesture.cuspLatch,
+                    e.altKey,
+                  )
                 : createCornerNode(gesture.anchor),
             );
         penGestureRef.current = null;