@agent-native/core 0.80.7 → 0.80.8

package/corpus/templates/design/app/hooks/use-variant-flow.ts

@@ -5,7 +5,9 @@ import {
   isEmbedAuthActive,
 } from "@agent-native/core/client";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { useEffect, useCallback, useState } from "react";
+import { useEffect, useCallback, useRef, useState } from "react";
+
+import { toast } from "@/hooks/use-toast";
 
 export const DESIGN_VARIANT_PICKED_EVENT = "agent-native-design-variant-picked";
 
@@ -100,6 +102,22 @@ export function useVariantFlow(designId: string | undefined) {
   const [standalonePick, setStandalonePick] = useState<StandalonePick | null>(
     null,
   );
+  // Re-entry latch so a double-click on "Use this direction" can't fire two
+  // generate-design writes + two pick messages.
+  const pickingRef = useRef(false);
+  // Set once a pick commits; keeps the 2s poll from re-showing the grid in the
+  // window before the server DELETE lands. Cleared once the server state is gone
+  // so a later, genuinely new variant set can still appear.
+  const pickedRef = useRef(false);
+
+  // Tracks the designId of a consumed variant set so stale in-flight poll
+  // responses with the same designId cannot re-open the grid, even if the
+  // server DELETE is delayed or the user picks while a poll is in-flight.
+  const consumedDesignIdRef = useRef<string | null>(null);
+  // Bounded suppression window (epoch ms). After it elapses we stop suppressing
+  // so a failed DELETE or a fast follow-up present-design-variants for the same
+  // design can't keep the picker hidden indefinitely.
+  const consumedUntilRef = useRef(0);
 
   const { data } = useQuery({
     queryKey: ["design-variants"],
@@ -121,24 +139,68 @@ export function useVariantFlow(designId: string | undefined) {
   });
 
   useEffect(() => {
-    if (
-      data?.variants &&
-      data.variants.length > 0 &&
-      data.designId === designId
+    const hasVariants = Boolean(
+      data?.variants && data.variants.length > 0 && data.designId === designId,
+    );
+    // Suppression after a pick covers two things: the brief window where a stale
+    // in-flight poll could re-open the just-picked grid, and the gap until the
+    // server DELETE lands. It is bounded in time so a failed DELETE (server state
+    // never clears) or a fast follow-up variant set for the same design can't
+    // keep the picker hidden forever.
+    const windowElapsed = Date.now() >= consumedUntilRef.current;
+    if ((consumedDesignIdRef.current || pickedRef.current) && windowElapsed) {
+      consumedDesignIdRef.current = null;
+      pickedRef.current = false;
+    } else if (
+      data?.designId &&
+      data.designId === consumedDesignIdRef.current
     ) {
-      setState(data);
-    } else {
+      // Re-arm early once the server confirms the consumed state is gone.
+      if (!hasVariants) consumedDesignIdRef.current = null;
       setState(null);
+      return;
+    } else if (pickedRef.current) {
+      if (!hasVariants) pickedRef.current = false;
+      setState(null);
+      return;
     }
+    setState(hasVariants && data ? data : null);
   }, [data, designId]);
 
-  const clear = useCallback(() => {
-    setState(null);
-    qc.setQueryData(["design-variants"], null);
-    fetch(agentNativePath("/_agent-native/application-state/design-variants"), {
-      method: "DELETE",
-    }).catch(() => {});
-  }, [qc]);
+  const clear = useCallback(
+    async (consumedId?: string) => {
+      setState(null);
+      // Mark the designId as consumed before issuing the DELETE so any
+      // in-flight or subsequent polls with this designId are suppressed
+      // even if the network request is delayed.
+      if (consumedId) {
+        consumedDesignIdRef.current = consumedId;
+        consumedUntilRef.current = Date.now() + 6000;
+      }
+      qc.setQueryData(["design-variants"], null);
+      try {
+        const res = await fetch(
+          agentNativePath("/_agent-native/application-state/design-variants"),
+          { method: "DELETE" },
+        );
+        if (!res.ok) {
+          // DELETE failed — the consumed marker keeps the grid hidden client-side,
+          // but log so the issue is visible rather than silently swallowed.
+          console.warn(
+            "[use-variant-flow] Failed to clear design-variants state:",
+            res.status,
+          );
+        }
+      } catch (err) {
+        // Network error — same: log but don't re-show grid (consumed marker holds).
+        console.warn(
+          "[use-variant-flow] Error clearing design-variants state:",
+          err,
+        );
+      }
+    },
+    [qc],
+  );
 
   const dismissStandalonePick = useCallback(() => setStandalonePick(null), []);
 
@@ -147,95 +209,117 @@ export function useVariantFlow(designId: string | undefined) {
       if (!state || !designId) return;
       const chosen = state.variants.find((v) => v.id === variantId);
       if (!chosen) return;
-
-      // Persist the chosen variant as the design's primary file via the
-      // agent's own action endpoint so every host lands on the same design.
-      let persisted = false;
+      if (pickingRef.current) return;
+      pickingRef.current = true;
+      pickedRef.current = true;
+      // Start the bounded suppression window so the just-picked grid stays hidden
+      // through the DELETE round-trip + a poll cycle, but not indefinitely.
+      consumedUntilRef.current = Date.now() + 6000;
       try {
-        await callAction(
-          "generate-design" as any,
-          {
-            designId,
-            prompt: `User picked variant "${chosen.label}"`,
-            files: [
-              {
-                filename: "index.html",
-                content: chosen.content,
-                fileType: "html",
-              },
-            ],
-          } as any,
-        );
-        await Promise.all([
-          qc.invalidateQueries({
-            queryKey: ["action", "get-design", { id: designId }],
-          }),
-          qc.invalidateQueries({ queryKey: ["action", "get-design"] }),
-          qc.invalidateQueries({ queryKey: ["action", "list-designs"] }),
-        ]);
-        persisted = true;
-        if (typeof window !== "undefined") {
-          window.dispatchEvent(
-            new CustomEvent(DESIGN_VARIANT_PICKED_EVENT, {
-              detail: { designId, content: chosen.content },
-            }),
+        // Persist the chosen variant as the design's primary file via the
+        // agent's own action endpoint so every host lands on the same design.
+        let persisted = false;
+        try {
+          await callAction(
+            "generate-design" as any,
+            {
+              designId,
+              prompt: `User picked variant "${chosen.label}"`,
+              files: [
+                {
+                  filename: "index.html",
+                  content: chosen.content,
+                  fileType: "html",
+                },
+              ],
+            } as any,
           );
+          await Promise.all([
+            qc.invalidateQueries({
+              queryKey: ["action", "get-design", { id: designId }],
+            }),
+            qc.invalidateQueries({ queryKey: ["action", "get-design"] }),
+            qc.invalidateQueries({ queryKey: ["action", "list-designs"] }),
+          ]);
+          persisted = true;
+          if (typeof window !== "undefined") {
+            window.dispatchEvent(
+              new CustomEvent(DESIGN_VARIANT_PICKED_EVENT, {
+                detail: { designId, content: chosen.content },
+              }),
+            );
+          }
+        } catch {
+          // Network error: show a visible error and keep the grid open so
+          // the user can retry rather than silently losing their choice.
+          toast({
+            title: "Couldn't save your pick",
+            description:
+              "Saving didn't finish. Try again or refresh and re-pick.",
+            variant: "destructive",
+          });
         }
-      } catch {
-        // Network error: report the choice below so the agent still records it;
-        // the grid still clears so the user isn't stuck.
-      }
 
-      const refineHint = persisted
-        ? `Its content has been saved as index.html. Continue refining from there if the user asks.`
-        : `Saving the chosen variant did not complete. Ask the user whether to retry before refining it.`;
-      const guardHint = persisted
-        ? `Do not show further variants unless the user explicitly asks for "more options" or "alternatives".`
-        : `Do not claim the design file was updated until generate-design succeeds.`;
+        const refineHint = persisted
+          ? `Its content has been saved as index.html. Continue refining from there if the user asks.`
+          : `Saving the chosen variant did not complete. Ask the user whether to retry before refining it.`;
+        const guardHint = persisted
+          ? `Do not show further variants unless the user explicitly asks for "more options" or "alternatives".`
+          : `Do not claim the design file was updated until generate-design succeeds.`;
 
-      if (isEmbedAuthActive()) {
-        // Embedded MCP host (ChatGPT / Claude): the pick rides the host chat
-        // bridge straight into the conversation.
-        sendToAgentChat({
-          message: `I picked "${chosen.label}".`,
-          context: [
-            `The user chose variant "${chosen.label}" (id: ${chosen.id}) for design ${designId} inside the embedded Design app.`,
-            refineHint,
-            guardHint,
-          ].join("\n"),
-          submit: true,
-          openSidebar: false,
-        });
-      } else if (isLinkOnlyHandoff()) {
-        // Link-only host (CLI / Codex / Claude Code): no chat bridge — show a
-        // copyable summary the user pastes back into their coding agent. The
-        // card owns the clipboard write so its "Copied" state stays truthful.
-        setStandalonePick({
-          heading: "Direction selected",
-          label: chosen.label,
-          text: variantHandoffText(designId, chosen, persisted),
-        });
-      } else {
-        // First-party app: post the pick to its own agent sidebar composer.
-        sendToAgentChat({
-          message: `I picked "${chosen.label}".`,
-          context: [
-            `The user chose variant "${chosen.label}" (id: ${chosen.id}) for design ${designId}.`,
-            refineHint,
-            guardHint,
-          ].join("\n"),
-          submit: false,
-        });
-      }
+        if (isEmbedAuthActive()) {
+          // Embedded MCP host (ChatGPT / Claude): the pick rides the host chat
+          // bridge straight into the conversation.
+          sendToAgentChat({
+            message: `I picked "${chosen.label}".`,
+            context: [
+              `The user chose variant "${chosen.label}" (id: ${chosen.id}) for design ${designId} inside the embedded Design app.`,
+              refineHint,
+              guardHint,
+            ].join("\n"),
+            submit: true,
+            openSidebar: false,
+          });
+        } else if (isLinkOnlyHandoff()) {
+          // Link-only host (CLI / Codex / Claude Code): no chat bridge — show a
+          // copyable summary the user pastes back into their coding agent. The
+          // card owns the clipboard write so its "Copied" state stays truthful.
+          setStandalonePick({
+            heading: "Direction selected",
+            label: chosen.label,
+            text: variantHandoffText(designId, chosen, persisted),
+          });
+        } else {
+          // First-party app: post the pick to its own agent sidebar composer.
+          sendToAgentChat({
+            message: `I picked "${chosen.label}".`,
+            context: [
+              `The user chose variant "${chosen.label}" (id: ${chosen.id}) for design ${designId}.`,
+              refineHint,
+              guardHint,
+            ].join("\n"),
+            submit: true,
+          });
+        }
 
-      clear();
+        // Only clear the grid when the variant was successfully persisted.
+        // If saving failed, keep the grid open so the user can retry.
+        if (persisted) {
+          await clear(designId);
+        } else {
+          // Re-arm the picking latch so the user can try again.
+          pickedRef.current = false;
+        }
+      } finally {
+        pickingRef.current = false;
+      }
     },
     [state, designId, qc, clear],
   );
 
   const dismiss = useCallback(() => {
     const embedded = isEmbedAuthActive();
-    clear();
+    void clear(designId);
     if (isLinkOnlyHandoff() && !isEmbedAuthActive()) {
       // No chat bridge to relay the dismissal — give the user a copyable note
       // so their coding agent doesn't wait on a pick that isn't coming.
@@ -252,7 +336,7 @@ export function useVariantFlow(designId: string | undefined) {
       submit: embedded,
       ...(embedded ? { openSidebar: false } : {}),
     });
-  }, [clear]);
+  }, [clear, designId]);
 
   return { state, useVariant, dismiss, standalonePick, dismissStandalonePick };
 }

package/corpus/templates/design/app/i18n/zh-TW.ts

@@ -409,6 +409,7 @@ const messages = {
       propsPasted: "屬性已貼上",
       primitiveInsertFailed: "無法將該圖層新增到畫面",
       layerMoveFailed: "無法移動該圖層",
+      duplicateElementFailed: "無法複製該元素",
       saveCopyError: "無法儲存這個設計的副本",
     },
   },

package/corpus/templates/design/app/i18n-data.ts

@@ -421,6 +421,7 @@ const enUS = {
       propsPasted: "Properties pasted",
       primitiveInsertFailed: "Could not add that layer to the screen",
       layerMoveFailed: "Could not move that layer",
+      duplicateElementFailed: "Could not duplicate that element",
       saveCopyError: "Could not save a copy of this design",
     },
   },
@@ -8104,6 +8105,7 @@ const designCanvasFeatureOverrides = {
         propsPasted: "属性已粘贴",
         primitiveInsertFailed: "无法将该图层添加到画面",
         layerMoveFailed: "无法移动该图层",
+        duplicateElementFailed: "无法复制该元素",
       },
     },
     editPanel: {
@@ -8162,6 +8164,7 @@ const designCanvasFeatureOverrides = {
         propsPasted: "Propiedades pegadas",
         primitiveInsertFailed: "No se pudo añadir esa capa a la pantalla",
         layerMoveFailed: "No se pudo mover esa capa",
+        duplicateElementFailed: "No se pudo duplicar ese elemento",
       },
     },
     editPanel: {
@@ -8220,6 +8223,7 @@ const designCanvasFeatureOverrides = {
         propsPasted: "Propriétés collées",
         primitiveInsertFailed: "Impossible d’ajouter ce calque à l’écran",
         layerMoveFailed: "Impossible de déplacer ce calque",
+        duplicateElementFailed: "Impossible de dupliquer cet élément",
       },
     },
     editPanel: {
@@ -8279,6 +8283,7 @@ const designCanvasFeatureOverrides = {
         primitiveInsertFailed:
           "Diese Ebene konnte nicht zur Ansicht hinzugefügt werden",
         layerMoveFailed: "Diese Ebene konnte nicht verschoben werden",
+        duplicateElementFailed: "Dieses Element konnte nicht dupliziert werden",
       },
     },
     editPanel: {
@@ -8337,6 +8342,7 @@ const designCanvasFeatureOverrides = {
         propsPasted: "プロパティを貼り付けました",
         primitiveInsertFailed: "そのレイヤーを画面に追加できませんでした",
         layerMoveFailed: "そのレイヤーを移動できませんでした",
+        duplicateElementFailed: "その要素を複製できませんでした",
       },
     },
     editPanel: {
@@ -8395,6 +8401,7 @@ const designCanvasFeatureOverrides = {
         propsPasted: "속성이 붙여넣어짐",
         primitiveInsertFailed: "해당 레이어를 화면에 추가할 수 없습니다",
         layerMoveFailed: "해당 레이어를 이동할 수 없습니다",
+        duplicateElementFailed: "해당 요소를 복제할 수 없습니다",
       },
     },
     editPanel: {
@@ -8453,6 +8460,7 @@ const designCanvasFeatureOverrides = {
         propsPasted: "Propriedades coladas",
         primitiveInsertFailed: "Não foi possível adicionar essa camada à tela",
         layerMoveFailed: "Não foi possível mover essa camada",
+        duplicateElementFailed: "Não foi possível duplicar esse elemento",
       },
     },
     editPanel: {
@@ -8511,6 +8519,7 @@ const designCanvasFeatureOverrides = {
         propsPasted: "गुण चिपकाए गए",
         primitiveInsertFailed: "उस परत को स्क्रीन में नहीं जोड़ा जा सका",
         layerMoveFailed: "उस परत को स्थानांतरित नहीं किया जा सका",
+        duplicateElementFailed: "उस तत्व की प्रतिलिपि नहीं बनाई जा सकी",
       },
     },
     editPanel: {
@@ -8569,6 +8578,7 @@ const designCanvasFeatureOverrides = {
         propsPasted: "تم لصق الخصائص",
         primitiveInsertFailed: "تعذرت إضافة تلك الطبقة إلى الشاشة",
         layerMoveFailed: "تعذر نقل تلك الطبقة",
+        duplicateElementFailed: "تعذّر تكرار هذا العنصر",
       },
     },
     editPanel: {