@agent-native/core 0.114.12 → 0.114.15

package/corpus/templates/design/AGENTS.md

@@ -288,11 +288,15 @@ ladder.
   `view-screen`; not rendered as canvas overlays).
 - `design-reprompt-pending:<designId>:<fileId>` is the client-captured source
   selection, instruction, base hash, and authoritative current request id for
-  a scoped regenerate request.
+  a scoped regenerate request. The frontend starts requests through the
+  compare-and-set `begin-node-rewrite-request` action and must not overwrite a
+  `resolving` acceptance reservation.
 - `design-reprompt-proposal:<designId>:<fileId>:<repromptId>` is one
   request-specific preview-only subtree proposal. Candidate payloads have a
-  256 KiB aggregate serialized limit. Resolution and cancellation use atomic
-  compare-and-set cleanup so an older request cannot erase a newer one.
+  256 KiB aggregate serialized limit. Proposal publication, resolution, and
+  cancellation use atomic multi-key compare-and-set transitions. Acceptance
+  reserves its matching pending request before writing design content, so a
+  newer request and an older acceptance cannot both win.
   `view-screen` lists only proposals paired to the current pending request as
   `pendingCandidateReviews`.
 - `show-design-questions` opens focused pre-generation questions in the main

package/corpus/templates/design/actions/begin-node-rewrite-request.ts

@@ -0,0 +1,78 @@
+import { defineAction } from "@agent-native/core";
+import {
+  compareAndSetAppState,
+  readAppState,
+} from "@agent-native/core/application-state";
+import { assertAccess } from "@agent-native/core/sharing";
+import { z } from "zod";
+
+import {
+  designRepromptPendingStateKey,
+  isNodeRewriteResolutionClaim,
+  isPendingDesignReprompt,
+  type PendingDesignReprompt,
+} from "../shared/node-rewrite.js";
+
+const targetSchema = z
+  .object({
+    nodeId: z.string().min(1).optional(),
+    selector: z.string().min(1).optional(),
+  })
+  .refine((target) => target.nodeId || target.selector, {
+    message: "target.nodeId or target.selector is required",
+  });
+
+export default defineAction({
+  agentTool: false,
+  description:
+    "Atomically starts or supersedes one pending node rewrite unless its current proposal is being accepted.",
+  schema: z.object({
+    repromptId: z.string().min(1),
+    designId: z.string().min(1),
+    fileId: z.string().min(1),
+    target: targetSchema,
+    baseVersionHash: z.string().min(1),
+    instruction: z.string().trim().min(1),
+    createdAt: z.string().min(1),
+    priorProposalId: z.string().min(1).optional(),
+    priorRepromptId: z.string().min(1).optional(),
+  }),
+  run: async (request) => {
+    await assertAccess("design", request.designId, "editor");
+    const pendingKey = designRepromptPendingStateKey(
+      request.designId,
+      request.fileId,
+    );
+    const current = await readAppState(pendingKey);
+    if (isNodeRewriteResolutionClaim(current)) {
+      throw new Error(
+        "This candidate is currently being accepted. Wait for it to finish before regenerating.",
+      );
+    }
+    if (
+      request.priorRepromptId &&
+      (!isPendingDesignReprompt(current) ||
+        current.repromptId !== request.priorRepromptId)
+    ) {
+      throw new Error(
+        "The candidates changed before refinement started. Review the latest candidates instead.",
+      );
+    }
+
+    const pending: PendingDesignReprompt = {
+      ...request,
+      status: "pending",
+    };
+    const started = await compareAndSetAppState(
+      pendingKey,
+      current,
+      pending as unknown as Record<string, unknown>,
+    );
+    if (!started) {
+      throw new Error(
+        "The regeneration request changed concurrently. Try again with the latest candidates.",
+      );
+    }
+    return { started: true, repromptId: request.repromptId };
+  },
+});

package/corpus/templates/design/actions/cancel-node-rewrite-request.ts

@@ -1,6 +1,7 @@
 import { defineAction } from "@agent-native/core";
 import {
   compareAndSetAppState,
+  compareAndSetManyAppState,
   readAppState,
 } from "@agent-native/core/application-state";
 import { assertAccess } from "@agent-native/core/sharing";
@@ -39,15 +40,24 @@ export default defineAction({
       repromptId,
     );
     const proposal = await readAppState(proposalKey);
-    const [pendingCancelled, proposalCancelled] = await Promise.all([
-      compareAndSetAppState(pendingKey, pending, null),
-      isNodeRewriteProposal(proposal)
-        ? compareAndSetAppState(proposalKey, proposal, null)
-        : Promise.resolve(false),
-    ]);
+    const proposalCancelled = isNodeRewriteProposal(proposal);
+    const pendingCancelled = proposalCancelled
+      ? await compareAndSetManyAppState([
+          {
+            key: pendingKey,
+            expectedValue: pending,
+            nextValue: null,
+          },
+          {
+            key: proposalKey,
+            expectedValue: proposal,
+            nextValue: null,
+          },
+        ])
+      : await compareAndSetAppState(pendingKey, pending, null);
     return {
       cancelled: pendingCancelled,
-      proposalCancelled,
+      proposalCancelled: proposalCancelled && pendingCancelled,
       superseded: !pendingCancelled,
     };
   },

package/corpus/templates/design/actions/propose-node-rewrite.ts

@@ -1,8 +1,8 @@
 import { defineAction } from "@agent-native/core";
 import {
-  compareAndSetAppState,
+  compareAndSetManyAppState,
   readAppState,
-  writeAppState,
+  type AppStateCompareAndSetOperation,
 } from "@agent-native/core/application-state";
 import { accessFilter, assertAccess } from "@agent-native/core/sharing";
 import { and, eq } from "drizzle-orm";
@@ -68,6 +68,7 @@ const variantSchema = z.object({
 });
 
 const pendingRepromptSchema = z.object({
+  status: z.literal("pending").optional(),
   repromptId: z.string().min(1),
   designId: z.string().min(1),
   fileId: z.string().min(1),
@@ -241,21 +242,18 @@ export default defineAction({
       file.id,
       repromptId,
     );
-    await writeAppState(
-      proposalKey,
-      proposal as unknown as Record<string, unknown>,
-    );
-    const currentPending = await readAppState(pendingKey);
-    if (currentPending?.repromptId !== repromptId) {
-      await compareAndSetAppState(
-        proposalKey,
-        proposal as unknown as Record<string, unknown>,
-        null,
-      );
-      throw new Error(
-        "This regeneration was superseded by a newer request before its candidates were published.",
-      );
-    }
+    const publishOperations: AppStateCompareAndSetOperation[] = [
+      {
+        key: pendingKey,
+        expectedValue: pending as unknown as Record<string, unknown>,
+        nextValue: pending as unknown as Record<string, unknown>,
+      },
+      {
+        key: proposalKey,
+        expectedValue: null,
+        nextValue: proposal as unknown as Record<string, unknown>,
+      },
+    ];
     if (pending.priorProposalId && pending.priorRepromptId) {
       const priorProposalKey = designRepromptProposalStateKey(
         file.designId,
@@ -264,9 +262,19 @@ export default defineAction({
       );
       const priorProposal = await readAppState(priorProposalKey);
       if (priorProposal?.proposalId === pending.priorProposalId) {
-        await compareAndSetAppState(priorProposalKey, priorProposal, null);
+        publishOperations.push({
+          key: priorProposalKey,
+          expectedValue: priorProposal,
+          nextValue: null,
+        });
       }
     }
+    const published = await compareAndSetManyAppState(publishOperations);
+    if (!published) {
+      throw new Error(
+        "This regeneration was superseded by a newer request before its candidates were published.",
+      );
+    }
 
     const bridgeMessages: NodeHtmlPreviewBridgeMessage[] = [
       {

package/corpus/templates/design/actions/resolve-node-rewrite.ts

@@ -1,11 +1,13 @@
 import { defineAction } from "@agent-native/core";
 import {
   compareAndSetAppState,
+  compareAndSetManyAppState,
   listAppState,
   readAppState,
 } from "@agent-native/core/application-state";
 import { accessFilter, assertAccess } from "@agent-native/core/sharing";
 import { and, eq } from "drizzle-orm";
+import { nanoid } from "nanoid";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
@@ -22,6 +24,7 @@ import {
   isPendingDesignReprompt,
   spliceNodeRewriteVariant,
   type NodeHtmlPreviewBridgeMessage,
+  type NodeRewriteResolutionClaim,
   type NodeRewriteProposal,
 } from "../shared/node-rewrite.js";
 import { designSourceTypeFromData } from "../shared/source-mode.js";
@@ -142,22 +145,19 @@ async function clearProposalState(
   proposalKey: string,
   proposal: NodeRewriteProposal,
   pending: Record<string, unknown>,
-): Promise<void> {
+): Promise<boolean> {
   const pendingKey = designRepromptPendingStateKey(
     proposal.designId,
     proposal.fileId,
   );
-  const [proposalCleared] = await Promise.all([
-    compareAndSetAppState(
-      proposalKey,
-      proposal as unknown as Record<string, unknown>,
-      null,
-    ),
-    compareAndSetAppState(pendingKey, pending, null),
+  return compareAndSetManyAppState([
+    {
+      key: proposalKey,
+      expectedValue: proposal as unknown as Record<string, unknown>,
+      nextValue: null,
+    },
+    { key: pendingKey, expectedValue: pending, nextValue: null },
   ]);
-  if (!proposalCleared) {
-    throw new Error("Node rewrite proposal changed while it was resolving.");
-  }
 }
 
 export default defineAction({
@@ -195,7 +195,16 @@ export default defineAction({
 
     if (resolution === "reject") {
       await assertAccess("design", proposal.designId, "editor");
-      await clearProposalState(proposalKey, proposal, pending);
+      const cleanupComplete = await clearProposalState(
+        proposalKey,
+        proposal,
+        pending,
+      );
+      if (!cleanupComplete) {
+        throw new Error(
+          "The proposal changed while it was being rejected. Review the latest candidates instead.",
+        );
+      }
       return {
         proposalId,
         repromptId: proposal.repromptId,
@@ -234,13 +243,51 @@ export default defineAction({
       source,
       fileType: file.fileType,
     });
-    const write = await writeInlineSourceFile({
-      designId: file.designId,
-      file,
-      content: rewrite.content,
-      expectedVersionHash: proposal.baseVersionHash,
-    });
-    await clearProposalState(proposalKey, proposal, pending);
+    const claim: NodeRewriteResolutionClaim = {
+      ...pending,
+      status: "resolving",
+      claimId: `node-rewrite-claim-${nanoid()}`,
+      proposalId,
+      resolution: "accept",
+    };
+    const claimValue = claim as unknown as Record<string, unknown>;
+    const claimed = await compareAndSetAppState(
+      pendingKey,
+      pending,
+      claimValue,
+    );
+    if (!claimed) {
+      throw new Error(
+        "A newer regeneration request replaced this proposal before it could be accepted.",
+      );
+    }
+
+    let write;
+    try {
+      write = await writeInlineSourceFile({
+        designId: file.designId,
+        file,
+        content: rewrite.content,
+        expectedVersionHash: proposal.baseVersionHash,
+      });
+    } catch (error) {
+      const released = await compareAndSetAppState(
+        pendingKey,
+        claimValue,
+        pending,
+      );
+      if (!released) {
+        throw new Error(
+          "The design write failed and its regeneration reservation could not be restored.",
+        );
+      }
+      throw error;
+    }
+    const cleanupComplete = await clearProposalState(
+      proposalKey,
+      proposal,
+      claimValue,
+    );
 
     return {
       proposalId,
@@ -252,6 +299,7 @@ export default defineAction({
       designId: file.designId,
       fileId: file.id,
       versionHash: write.versionHash,
+      cleanupComplete,
     };
   },
 });

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

@@ -2,6 +2,7 @@ import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client/hooks";
+import { withBuilderUtmTrackingParams } from "@agent-native/core/shared";
 import {
   IconAlertTriangle,
   IconApps,
@@ -315,7 +316,14 @@ export function FusionAppBanner({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="end">
               <DropdownMenuItem asChild className="cursor-pointer">
-                <a href={editorUrl} target="_blank" rel="noreferrer">
+                <a
+                  href={withBuilderUtmTrackingParams(editorUrl, {
+                    campaign: "product",
+                    content: "fusion_editor",
+                  })}
+                  target="_blank"
+                  rel="noreferrer"
+                >
                   <IconExternalLink className="me-2 size-3.5" />
                   {
                     "Open in Builder" /* i18n-ignore fusion app banner, flag-gated feature */

package/corpus/templates/design/app/components/design/edit-panel/component-section.tsx

@@ -3,6 +3,7 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import { withBuilderUtmTrackingParams } from "@agent-native/core/shared";
 import { propNameToDataAttribute } from "@shared/component-model";
 import {
   IconArrowRight,
@@ -168,7 +169,10 @@ function MakeItRealCard({
             `Generating ${migrateResult.branchName ?? "React app"}.`}
         </p>
         <a
-          href={migrateResult.url}
+          href={withBuilderUtmTrackingParams(migrateResult.url, {
+            campaign: "product",
+            content: "design_migration",
+          })}
           target="_blank"
           rel="noopener noreferrer"
           className="inline-flex h-6 shrink-0 items-center gap-1 rounded-md px-1.5 text-[10px] font-semibold text-[var(--design-editor-accent-color)] hover:bg-[var(--design-editor-panel-raised-bg)]"

package/corpus/templates/design/app/components/visual-editor/NodeRewriteProposal.tsx

@@ -1,12 +1,10 @@
 import {
   callAction,
-  setClientAppState,
   useActionMutation,
   useChangeVersion,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import {
-  designRepromptPendingStateKey,
   isNodeRewriteProposal,
   type NodeHtmlPreviewBridgeMessage,
   type NodeRewriteProposal,
@@ -426,7 +424,6 @@ export function NodeRewriteProposal({
     if (!proposal || !instruction || refining || resolveMutation.isPending)
       return;
     const repromptId = crypto.randomUUID();
-    const pendingKey = designRepromptPendingStateKey(designId, fileId);
     const pending = {
       repromptId,
       designId,
@@ -440,7 +437,7 @@ export function NodeRewriteProposal({
     };
     setRefining(true);
     try {
-      await setClientAppState(pendingKey, pending);
+      await callAction("begin-node-rewrite-request", pending);
       const submission = formatNodeRepromptSubmission({
         ...pending,
         priorProposalId: proposal.proposalId,

package/corpus/templates/design/app/components/visual-editor/ReviewCanvasPins.tsx

@@ -10,10 +10,7 @@ import {
   type ReviewThread,
 } from "@agent-native/core/client/review";
 import type { ReviewComment } from "@agent-native/core/review";
-import {
-  designRepromptPendingStateKey,
-  type NodeRewriteTarget,
-} from "@shared/node-rewrite";
+import type { NodeRewriteTarget } from "@shared/node-rewrite";
 import {
   IconArrowUp,
   IconChevronDown,
@@ -874,10 +871,9 @@ export function ReviewCanvasPins({
           element = null;
         }
       }
-      const stateKey = designRepromptPendingStateKey(resourceId, targetId);
       setAgentSubmitting(true);
       try {
-        await setClientAppState(stateKey, pending);
+        await callAction("begin-node-rewrite-request", pending);
         const submission = formatNodeRepromptSubmission({
           ...pending,
           subtreeHtml:

package/corpus/templates/design/app/pages/DesignSystemSetup.tsx

@@ -2,6 +2,7 @@ import { appApiPath } from "@agent-native/core/client/api-path";
 import { useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
 import { openAgentSidebar } from "@agent-native/core/client/navigation";
+import { withBuilderUtmTrackingParams } from "@agent-native/core/shared";
 import {
   useSetPageTitle,
   useSetHeaderActions,
@@ -1128,7 +1129,14 @@ function BuilderIndexPreview({
       <div className="flex items-center gap-2 border-t border-border pt-4">
         {result.builderUrl ? (
           <Button asChild className="cursor-pointer">
-            <a href={result.builderUrl} target="_blank" rel="noreferrer">
+            <a
+              href={withBuilderUtmTrackingParams(result.builderUrl, {
+                campaign: "product",
+                content: "design_system_intelligence",
+              })}
+              target="_blank"
+              rel="noreferrer"
+            >
               <IconExternalLink className="size-4" />
               {"Open in Builder" /* i18n-ignore Builder link action */}
             </a>

package/corpus/templates/design/shared/node-rewrite.ts

@@ -15,6 +15,7 @@ export const MAX_NODE_REWRITE_PROPOSAL_BYTES = 256 * 1024;
 export type NodeRewriteTarget = EditIntentTarget;
 
 export interface PendingDesignReprompt {
+  status?: "pending";
   repromptId: string;
   designId: string;
   fileId: string;
@@ -26,6 +27,16 @@ export interface PendingDesignReprompt {
   priorRepromptId?: string;
 }
 
+export interface NodeRewriteResolutionClaim extends Omit<
+  PendingDesignReprompt,
+  "status"
+> {
+  status: "resolving";
+  claimId: string;
+  proposalId: string;
+  resolution: "accept";
+}
+
 export interface NodeRewriteVariant {
   html: string;
   summary: string;
@@ -69,6 +80,7 @@ export function isPendingDesignReprompt(
   if (!value || typeof value !== "object" || Array.isArray(value)) return false;
   const pending = value as Partial<PendingDesignReprompt>;
   return (
+    (pending.status === undefined || pending.status === "pending") &&
     typeof pending.repromptId === "string" &&
     typeof pending.designId === "string" &&
     typeof pending.fileId === "string" &&
@@ -79,6 +91,26 @@ export function isPendingDesignReprompt(
   );
 }
 
+export function isNodeRewriteResolutionClaim(
+  value: unknown,
+): value is NodeRewriteResolutionClaim {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const claim = value as Partial<NodeRewriteResolutionClaim>;
+  return (
+    claim.status === "resolving" &&
+    typeof claim.claimId === "string" &&
+    typeof claim.proposalId === "string" &&
+    claim.resolution === "accept" &&
+    typeof claim.repromptId === "string" &&
+    typeof claim.designId === "string" &&
+    typeof claim.fileId === "string" &&
+    typeof claim.baseVersionHash === "string" &&
+    typeof claim.instruction === "string" &&
+    typeof claim.createdAt === "string" &&
+    Boolean(claim.target)
+  );
+}
+
 export interface NodeHtmlPreviewBridgeMessage {
   type: "node-html-preview";
   proposalId: string;

package/corpus/templates/forms/app/components/layout/Sidebar.tsx

@@ -12,6 +12,7 @@ import { FeedbackButton } from "@agent-native/core/client/ui";
 import {
   IconArrowUp,
   IconPlus,
+  IconLoader2,
   IconMenu2,
   IconX,
   IconMessageCircle,
@@ -88,11 +89,9 @@ export function Sidebar() {
 
   function handleSkip() {
     setPopoverOpen(false);
-    const tempId = crypto.randomUUID().replace(/-/g, "").slice(0, 10);
-    navigate(`/forms/${tempId}`);
     createForm.mutate(
       { title: t("sidebar.untitledForm") },
-      { onSuccess: (form) => navigate(`/forms/${form.id}`, { replace: true }) },
+      { onSuccess: (form) => navigate(`/forms/${form.id}`) },
     );
   }
 
@@ -171,7 +170,11 @@ export function Sidebar() {
             size="sm"
             className="min-h-10 px-2 text-xs text-muted-foreground active:scale-[0.96] transition-[background-color,color,transform]"
             onClick={handleSkip}
+            disabled={createForm.isPending}
           >
+            {createForm.isPending && (
+              <IconLoader2 className="h-3 w-3 animate-spin" />
+            )}
             {t("sidebar.skipPrompt")}
           </Button>
           <span className="text-[11px] text-muted-foreground/70">

package/corpus/templates/forms/app/pages/FormBuilderPage.tsx

@@ -626,20 +626,15 @@ export function FormBuilderPage() {
             </Tooltip>
           )}
 
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className="inline-flex">
+          {form.status === "published" && (
+            <Tooltip>
+              <TooltipTrigger asChild>
                 <Button
                   variant="ghost"
                   size="icon"
                   className="h-10 w-10 active:scale-[0.96] motion-reduce:active:scale-100"
                   onClick={copyShareLink}
-                  disabled={form.status !== "published"}
-                  aria-label={
-                    form.status === "published"
-                      ? t("builder.copyPublicFormLink")
-                      : t("builder.publishBeforeCopyPublicFormLink")
-                  }
+                  aria-label={t("builder.copyPublicFormLink")}
                 >
                   <span className="relative inline-flex h-4 w-4 items-center justify-center">
                     <IconCopy
@@ -660,16 +655,14 @@ export function FormBuilderPage() {
                     />
                   </span>
                 </Button>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>
-              {form.status === "published"
-                ? copied
+              </TooltipTrigger>
+              <TooltipContent>
+                {copied
                   ? t("builder.publicLinkCopied")
-                  : t("builder.copyPublishedPublicLink")
-                : t("builder.publishBeforeCopyPublicLink")}
-            </TooltipContent>
-          </Tooltip>
+                  : t("builder.copyPublishedPublicLink")}
+              </TooltipContent>
+            </Tooltip>
+          )}
 
           <Tooltip>
             <TooltipTrigger asChild>

package/corpus/templates/forms/app/pages/FormsListPage.tsx

@@ -7,6 +7,7 @@ import {
 import { VisibilityBadge } from "@agent-native/toolkit/sharing";
 import {
   IconPlus,
+  IconLoader2,
   IconDots,
   IconTrash,
   IconCopy,
@@ -100,11 +101,9 @@ export function FormsListPage() {
   }, [forms]);
 
   function handleCreate() {
-    const tempId = crypto.randomUUID().replace(/-/g, "").slice(0, 10);
-    navigate(`/forms/${tempId}`);
     createForm.mutate(
       { title: t("forms.untitled") },
-      { onSuccess: (form) => navigate(`/forms/${form.id}`, { replace: true }) },
+      { onSuccess: (form) => navigate(`/forms/${form.id}`) },
     );
   }
 
@@ -114,16 +113,21 @@ export function FormsListPage() {
     () => (
       <Button
         onClick={handleCreate}
+        disabled={createForm.isPending}
         size="sm"
         className="min-h-10 shrink-0 cursor-pointer active:scale-[0.96] transition-[background-color,box-shadow,transform]"
       >
-        <IconPlus className="h-3.5 w-3.5" />
+        {createForm.isPending ? (
+          <IconLoader2 className="h-3.5 w-3.5 animate-spin" />
+        ) : (
+          <IconPlus className="h-3.5 w-3.5" />
+        )}
         <span className="hidden sm:inline">{t("forms.newForm")}</span>
         <span className="sm:hidden">{t("forms.new")}</span>
       </Button>
     ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+    [createForm.isPending],
   );
   useSetHeaderActions(headerActions);