@agent-native/core 0.117.1 → 0.117.2

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -1926,16 +1926,6 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       if (pos.indexOf("e") !== -1) handle.style.right = "-34px";
       selectionOverlay.appendChild(handle);
     });
-    var button = document.createElement("span");
-    button.setAttribute("data-agent-native-rotate-handle", "top-center");
-    button.style.cssText =
-      "position:absolute;left:50%;transform:translateX(-50%);top:-22px;" +
-      "width:16px;height:16px;pointer-events:auto;" +
-      "display:flex;align-items:center;justify-content:center;" +
-      "border-radius:999px;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.3);" +
-      "cursor:grab;user-select:none;font-size:10px;line-height:1;color:#333;";
-    button.textContent = "↻";
-    selectionOverlay.appendChild(button);
   })();
   var spacingOverlay = document.createElement("div");
   spacingOverlay.setAttribute("data-agent-native-spacing-overlay", "");
@@ -1943,6 +1933,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     "position:absolute;inset:0;display:none;pointer-events:none;";
   selectionOverlay.appendChild(spacingOverlay);
   document.body.appendChild(selectionOverlay);
+  if (readOnly) setSelectionOverlayResizeChromeVisible(false);
 
   // ── Gradient edit overlay (in-iframe parity for MultiScreenCanvas's
   // GradientEditOverlay) ──────────────────────────────────────────────────
@@ -2179,7 +2170,21 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
   ): void {
     var color = chromeColorForElement(el);
     var contrast = chromeContrastColorForElement(el);
-    overlay.style.borderColor = color;
+    var softChrome =
+      overlay.getAttribute("data-agent-native-soft-chrome") === "true";
+    overlay.style.borderColor = softChrome
+      ? "color-mix(in srgb," + color + " 64%,transparent)"
+      : color;
+    if (softChrome) {
+      overlay.style.background =
+        "color-mix(in srgb," + color + " 5%,transparent)";
+    } else if (
+      overlay === highlightOverlay ||
+      overlay.getAttribute("data-agent-native-edit-overlay") ===
+        "multi-selection"
+    ) {
+      overlay.style.background = "transparent";
+    }
     overlay
       .querySelectorAll(
         "[data-agent-native-edit-handle],[data-agent-native-edit-overlay='multi-selection-handle']",
@@ -2191,6 +2196,19 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       });
   }
 
+  function setHighlightOverlayStyle(style: "default" | "soft"): void {
+    highlightOverlayStyle = style;
+    if (style === "soft") {
+      highlightOverlay.setAttribute("data-agent-native-soft-chrome", "true");
+    } else {
+      highlightOverlay.removeAttribute("data-agent-native-soft-chrome");
+    }
+    if (hoveredEl && hoveredEl !== selectedEl) {
+      applyElementOverlayChrome(highlightOverlay, hoveredEl);
+    }
+    applyEditorChromeScale();
+  }
+
   function applySelectionChrome(el: Element | null): void {
     applyElementOverlayChrome(selectionOverlay, el);
   }
@@ -2231,6 +2249,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
 
   var selectedEl: Element | null = null;
   var hoveredEl: Element | null = null;
+  var highlightOverlayStyle: "default" | "soft" = "default";
   type NodeHtmlPreviewSession = {
     proposalId: string;
     originalElement: Element;
@@ -2526,12 +2545,17 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     scalePassiveSelectionOverlay(overlay);
   }
 
-  function makePassiveSelectionOverlay(): HTMLElement {
+  function makePassiveSelectionOverlay(style: "default" | "soft"): HTMLElement {
     var overlay = document.createElement("div");
     overlay.setAttribute("data-agent-native-edit-overlay", "multi-selection");
+    if (style === "soft") {
+      overlay.setAttribute("data-agent-native-soft-chrome", "true");
+    }
     overlay.style.cssText =
-      "position:fixed;pointer-events:none;z-index:99996;border:1.5px solid var(--design-editor-accent-color);background:transparent;display:none;box-sizing:border-box;";
-    appendPassiveSelectionHandles(overlay);
+      style === "soft"
+        ? "position:fixed;pointer-events:none;z-index:99996;border:1px solid color-mix(in srgb,var(--design-editor-accent-color) 64%,transparent);background:color-mix(in srgb,var(--design-editor-accent-color) 5%,transparent);display:none;box-sizing:border-box;"
+        : "position:fixed;pointer-events:none;z-index:99996;border:1.5px solid var(--design-editor-accent-color);background:transparent;display:none;box-sizing:border-box;";
+    if (style !== "soft") appendPassiveSelectionHandles(overlay);
     document.body.appendChild(overlay);
     return overlay;
   }
@@ -2540,7 +2564,9 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     var sx = chromeScaleX();
     var sy = chromeScaleY();
     var line = chromeLineScale();
-    overlay.style.borderWidth = 1.5 * line + "px";
+    var softChrome =
+      overlay.getAttribute("data-agent-native-soft-chrome") === "true";
+    overlay.style.borderWidth = (softChrome ? 1 : 1.5) * line + "px";
     overlay
       .querySelectorAll(
         "[data-agent-native-edit-overlay='multi-selection-handle']",
@@ -2557,7 +2583,10 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       });
   }
 
-  function setPassiveSelectionElements(elements: Element[]): void {
+  function setPassiveSelectionElements(
+    elements: Element[],
+    style: "default" | "soft" = "default",
+  ): void {
     passiveSelectionEls = elements.filter(function (el, index, all) {
       return (
         el &&
@@ -2568,7 +2597,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     });
     removePassiveSelectionOverlays();
     passiveSelectionEls.forEach(function (el) {
-      var overlay = makePassiveSelectionOverlay();
+      var overlay = makePassiveSelectionOverlay(style);
       passiveSelectionOverlays.push(overlay);
       positionOverlay(overlay, el);
     });
@@ -3939,11 +3968,10 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     var sx = chromeScaleX();
     var sy = chromeScaleY();
     var line = chromeLineScale();
-    // Figma parity: the hover outline is visibly thinner than the selection
-    // outline — hover is a light "you could select this" hint, selection is
-    // the stronger confirmed-state chrome. Matches the overview canvas's
-    // hover (1 * chromeScale) vs selection (1.5 * chromeScale) ratio.
-    highlightOverlay.style.borderWidth = 1 * line + "px";
+    // Keep hover and the corresponding selection outline visually identical.
+    // Soft responsive peers intentionally use the lighter outline treatment.
+    highlightOverlay.style.borderWidth =
+      (highlightOverlayStyle === "soft" ? 1 : 1.5) * line + "px";
     parentAutoLayoutOverlay.style.borderWidth = 1 * line + "px";
     selectionOverlay.style.borderWidth = 1.5 * line + "px";
     marqueeSelectionOverlay.style.borderWidth = 1 * line + "px";
@@ -6046,6 +6074,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
   }
 
   function startSpacingDrag(key, e) {
+    if (readOnly) return;
     if (spacingDrag) {
       stopNativeInteraction(e);
       return;
@@ -8374,6 +8403,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     gestureElParam?: Element,
     pointerStartParam?: { clientX: number; clientY: number },
   ) {
+    if (readOnly) return;
     var gestureEl = gestureElParam || selectedEl;
     if (!gestureEl) return;
     if (isLayerInteractionBlocked(gestureEl)) return;
@@ -9546,6 +9576,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
   }
 
   function startResize(handle, e) {
+    if (readOnly) return;
     if (!selectedEl) return;
     if (isLayerInteractionBlocked(selectedEl)) return;
     e.preventDefault();
@@ -9834,6 +9865,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
   }
 
   function startRotate(e) {
+    if (readOnly) return;
     if (!selectedEl) return;
     if (isLayerInteractionBlocked(selectedEl)) return;
     e.preventDefault();
@@ -9980,7 +10012,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
         shieldOverlay.setPointerCapture(e.pointerId);
       } catch (_err) {}
     }
-    if (!e.altKey) {
+    if (!readOnly && !e.altKey) {
       postCrossScreenDrag("start", dragTarget, e);
     }
     var startX = e.clientX;
@@ -10006,6 +10038,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       postElementSelect(selectedEl, ev);
     }
     function onMove(ev) {
+      if (readOnly) return;
       if (Math.hypot(ev.clientX - startX, ev.clientY - startY) <= 3) return;
       clearPendingShieldDrag();
       didStartDrag = true;
@@ -10036,7 +10069,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
     function onUp(ev) {
       clearPendingShieldDrag();
       if (didStartDrag) return;
-      if (!e.altKey) {
+      if (!readOnly && !e.altKey) {
         postCrossScreenDrag("cancel");
       }
       if (ev) stopNativeInteraction(ev);
@@ -10058,6 +10091,7 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
   selectionOverlay.addEventListener(
     "mousedown",
     function (e) {
+      if (readOnly) return;
       var spacingKey =
         e.target &&
         e.target.getAttribute &&
@@ -11164,9 +11198,13 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
         if (activeTextEditEl) {
           activeTextEditEl.blur();
         }
-        clearRuntimeSelection();
-        shieldOverlay.style.pointerEvents = "none";
+        clearPendingShieldDrag();
+        cancelActiveBridgeDrag();
+        setSelectionOverlayResizeChromeVisible(false);
+        // Keep the shield active so the viewer can select and inspect layers.
+        shieldOverlay.style.pointerEvents = "auto";
       } else {
+        setSelectionOverlayResizeChromeVisible(true);
         shieldOverlay.style.pointerEvents = "auto";
       }
       return;
@@ -11504,7 +11542,13 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
           } catch (_err) {}
         }
       });
-      setPassiveSelectionElements(passiveTargets);
+      setPassiveSelectionElements(
+        passiveTargets,
+        e.data.passiveSelectionStyle === "soft" ? "soft" : "default",
+      );
+      setHighlightOverlayStyle(
+        e.data.passiveSelectionStyle === "soft" ? "soft" : "default",
+      );
       return;
     }
     if (e.data.type === "select-element") {
@@ -11579,6 +11623,9 @@ declare var __LIVE_REFLOW_ENABLED__: boolean;
       return;
     }
     if (e.data.type === "hover-element") {
+      if (e.data.hoverStyle === "soft" || e.data.hoverStyle === "default") {
+        setHighlightOverlayStyle(e.data.hoverStyle);
+      }
       var hoverCandidates: string[] = [];
       if (Array.isArray(e.data.selectorCandidates)) {
         e.data.selectorCandidates.forEach(function (selector) {

package/corpus/templates/design/app/components/design/multi-screen/types.ts

@@ -137,6 +137,8 @@ export interface MultiScreenCanvasProps {
   /** Lets every live frame receive native pointer interaction while the
    * overview camera and frame chrome remain available. */
   interactMode?: boolean;
+  /** Viewer mode keeps selection/inspection available without edit chrome. */
+  readOnly?: boolean;
   activeScreenHasHoveredChild?: boolean;
   hoveredChildScreenId?: string | null;
   directlyHoveredScreenId?: string | null;

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

@@ -8,7 +8,7 @@ import {
   IconPencil,
   IconTemplate,
   IconPalette,
-  IconBrain,
+  IconHierarchy2,
   IconSettings,
   IconLayoutSidebarLeftCollapse,
   IconLayoutSidebarLeftExpand,
@@ -32,7 +32,7 @@ const navItems = [
     labelKey: "navigation.designSystems",
     href: "/design-systems",
   },
-  { icon: IconBrain, labelKey: "navigation.agent", href: "/agent" },
+  { icon: IconHierarchy2, labelKey: "navigation.agent", href: "/agent" },
   { icon: IconSettings, labelKey: "navigation.settings", href: "/settings" },
 ];
 

package/corpus/templates/design/app/global.css

@@ -113,7 +113,7 @@
   --muted-foreground: 0 0% 60%;
   --accent: 0 0% 18%;
   --accent-foreground: 0 0% 96%;
-  --destructive: 0 63% 51%;
+  --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 24%;
   --input: 0 0% 24%;

package/corpus/templates/design/app/hooks/use-navigation-state.ts

@@ -12,8 +12,8 @@ export interface NavigationState {
   designSystemId?: string;
   templateId?: string;
   editorView?: "single" | "overview";
-  inspectorTab?: "design" | "comments" | "tweaks" | "extensions";
-  inspector?: "design" | "comments" | "tweaks" | "extensions";
+  inspectorTab?: "design" | "comments" | "tweaks" | "code" | "extensions";
+  inspector?: "design" | "comments" | "tweaks" | "code" | "extensions";
   leftPanel?:
     | "file"
     | "agent"
@@ -54,8 +54,8 @@ export interface DesignEditorCommand {
   designId: string;
   editorView?: "single" | "overview";
   viewMode?: "single" | "overview";
-  inspectorTab?: "design" | "comments" | "tweaks" | "extensions";
-  inspector?: "design" | "comments" | "tweaks" | "extensions";
+  inspectorTab?: "design" | "comments" | "tweaks" | "code" | "extensions";
+  inspector?: "design" | "comments" | "tweaks" | "code" | "extensions";
   leftPanel?:
     | "file"
     | "agent"
@@ -118,10 +118,11 @@ function normalizeEditorView(
 
 function normalizeInspectorTab(
   value: unknown,
-): "design" | "comments" | "tweaks" | "extensions" | undefined {
+): "design" | "comments" | "tweaks" | "code" | "extensions" | undefined {
   return value === "design" ||
     value === "comments" ||
     value === "tweaks" ||
+    value === "code" ||
     value === "extensions"
     ? value
     : undefined;

package/corpus/templates/design/app/root.tsx

@@ -13,7 +13,7 @@ import {
   useCommandMenuShortcut,
 } from "@agent-native/core/client/navigation";
 import { getThemeInitScript } from "@agent-native/core/client/ui";
-import { IconBrain, IconSun, IconMoon } from "@tabler/icons-react";
+import { IconHierarchy2, IconSun, IconMoon } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
 import { useCallback, useState } from "react";
@@ -138,7 +138,7 @@ function DesignCommandMenu({
     >
       <CommandMenu.Group heading={t("root.commandActions")}>
         <CommandMenu.Item onSelect={() => navigate("/agent")}>
-          <IconBrain size={16} />
+          <IconHierarchy2 size={16} />
           {t("root.openAgent")}
         </CommandMenu.Item>
         <CommandMenu.Item onSelect={() => {}}>

package/corpus/templates/design/changelog/2026-07-22-design-owners-can-keep-editing-their-designs-after-switching.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Design owners can keep editing their designs after switching workspaces

package/corpus/templates/design/changelog/2026-07-22-inspector-tabs-keep-their-text-labels-at-narrow-widths.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Inspector tabs keep their text labels at narrow widths

package/corpus/templates/design/changelog/2026-07-22-manage-agent-navigation-now-uses-the-connected-nodes-icon.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+Manage agent navigation now uses the connected-nodes icon.

package/corpus/templates/design/changelog/2026-07-22-narrow-breakpoint-previews-keep-their-device-labels-readable.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+Narrow breakpoint previews keep their device labels readable

package/corpus/templates/design/changelog/2026-07-22-removed-the-draft-status-chip-from-the-design-editor.md

@@ -0,0 +1,6 @@
+---
+type: removed
+date: 2026-07-22
+---
+
+Removed the Draft status chip from the design editor.

package/corpus/templates/design/changelog/2026-07-22-responsive-breakpoint-controls-stay-within-narrow-sidebars.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+Responsive breakpoint controls stay within narrow sidebars

package/corpus/templates/design/changelog/2026-07-22-responsive-peers-now-use-a-softer-selection-highlight-withou.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+Responsive peers now use a softer selection highlight without resize handles.

package/corpus/templates/design/changelog/2026-07-22-rotate-from-context-menu.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+Rotate selected elements from the canvas context menu with an instant-open menu.

package/corpus/templates/design/changelog/2026-07-22-the-selection-outline-now-stays-attached-while-moving-screen.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-22
+---
+
+The selection outline now stays attached while moving screens

package/corpus/templates/design/changelog/2026-07-22-view-only-designs-now-support-figma-style-layer-inspection-w.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+View-only designs now support Figma-style layer inspection without edit handles or drag controls

package/corpus/templates/design/server/db/index.ts

@@ -24,6 +24,10 @@ registerShareableResource({
   },
   getDb,
   publicAccessRole: publicDesignAccessRole,
+  // A design remains owned by its creator when they switch active orgs. The
+  // design URL and owner identity are the authority for this resource; org
+  // membership still scopes org visibility and explicit shares.
+  ownerAccessIgnoresOrg: true,
 });
 
 registerShareableResource({

package/corpus/templates/dispatch/.agents/skills/agent-native-toolkit/SKILL.md

@@ -59,6 +59,12 @@ quick controls and deep links such as:
 - `/settings/usage`
 - `/settings/apps/:appId`
 
+The shared Account section is the canonical profile surface at
+`/settings#account`. It owns the editable display name and existing avatar
+control through the authenticated `get-user-profile` and `update-user-profile`
+actions. Shared workspace chrome such as `OrgSwitcher` should link to this
+surface rather than creating an app-local profile page.
+
 When adding a new API key, OAuth grant, provider connection, model selector, app
 preference, notification preference, or usage/billing surface, register it as a
 settings tab or app settings panel first. Only add sidebar UI when it is needed

package/corpus/templates/dispatch/app/dispatch-extensions.tsx

@@ -1,5 +1,5 @@
 import type { DispatchExtensionConfig } from "@agent-native/dispatch/components";
-import { IconBrain } from "@tabler/icons-react";
+import { IconHierarchy2 } from "@tabler/icons-react";
 
 /**
  * Local Dispatch extensions for this generated workspace.
@@ -31,7 +31,7 @@ export const dispatchExtensions = {
       id: "agent",
       to: "/agent",
       label: "Agent",
-      icon: IconBrain,
+      icon: IconHierarchy2,
       section: "operations",
     },
   ],

package/corpus/templates/dispatch/app/global.css

@@ -53,7 +53,7 @@
   --muted-foreground: 0 0% 60%;
   --accent: 0 0% 18%;
   --accent-foreground: 0 0% 90%;
-  --destructive: 0 63% 51%;
+  --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 24%;
   --input: 0 0% 24%;

package/corpus/templates/dispatch/app/root.tsx

@@ -12,7 +12,7 @@ import {
 } from "@agent-native/core/client/navigation";
 import { getThemeInitScript } from "@agent-native/core/client/ui";
 import { Layout as AppLayout } from "@agent-native/dispatch/components";
-import { IconBrain, IconSun, IconMoon } from "@tabler/icons-react";
+import { IconHierarchy2, IconSun, IconMoon } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -191,7 +191,7 @@ function AppContent() {
       >
         <CommandMenu.Group heading={t("root.commandActions")}>
           <CommandMenu.Item onSelect={() => navigate("/agent")}>
-            <IconBrain size={16} />
+            <IconHierarchy2 size={16} />
             {t("root.openAgent")}
           </CommandMenu.Item>
           <CommandMenu.Item onSelect={() => {}}>

package/corpus/templates/dispatch/changelog/2026-07-22-manage-agent-navigation-now-uses-the-connected-nodes-icon.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-22
+---
+
+Manage agent navigation now uses the connected-nodes icon.

package/corpus/templates/forms/.agents/skills/agent-native-toolkit/SKILL.md

@@ -59,6 +59,12 @@ quick controls and deep links such as:
 - `/settings/usage`
 - `/settings/apps/:appId`
 
+The shared Account section is the canonical profile surface at
+`/settings#account`. It owns the editable display name and existing avatar
+control through the authenticated `get-user-profile` and `update-user-profile`
+actions. Shared workspace chrome such as `OrgSwitcher` should link to this
+surface rather than creating an app-local profile page.
+
 When adding a new API key, OAuth grant, provider connection, model selector, app
 preference, notification preference, or usage/billing surface, register it as a
 settings tab or app settings panel first. Only add sidebar UI when it is needed

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

@@ -40,7 +40,7 @@ export function Layout({ children }: LayoutProps) {
   useAgentChatHomeHandoffLinks({
     storageKey: "forms",
     chatPath: "/ask",
-    requireActiveHandoff: false,
+    requireActiveHandoff: true,
   });
 
   // Bind chat to the currently-open form. The `/forms/:id` URL covers

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

@@ -16,7 +16,7 @@ import {
   IconMenu2,
   IconX,
   IconMessageCircle,
-  IconBrain,
+  IconHierarchy2,
   IconSettings,
   IconForms,
   IconLayoutSidebarLeftCollapse,
@@ -289,7 +289,7 @@ export function Sidebar() {
                     : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
                 )}
               >
-                <IconBrain className="h-4 w-4" />
+                <IconHierarchy2 className="h-4 w-4" />
               </Link>
             </TooltipTrigger>
             <TooltipContent side="right">
@@ -445,7 +445,7 @@ export function Sidebar() {
               : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
           )}
         >
-          <IconBrain size={14} className="shrink-0" />
+          <IconHierarchy2 size={14} className="shrink-0" />
           <span>{t("navigation.agent")}</span>
         </Link>
 

package/corpus/templates/forms/app/global.css

@@ -69,7 +69,7 @@
   --muted-foreground: 0 0% 60%;
   --accent: 0 0% 18%;
   --accent-foreground: 0 0% 90%;
-  --destructive: 0 63% 51%;
+  --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 98%;
   --border: 0 0% 24%;
   --input: 0 0% 24%;

package/corpus/templates/forms/app/hooks/use-forms.ts

@@ -3,9 +3,19 @@ import {
   useActionQuery,
   useActionMutation,
 } from "@agent-native/core/client/hooks";
+import { useT } from "@agent-native/core/client/i18n";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
 
+type FormListItem = { id: string; [key: string]: unknown };
+type FormListMutationContext = {
+  removed: Array<{
+    queryKey: readonly unknown[];
+    form: FormListItem;
+    index: number;
+  }>;
+};
+
 // ---------------------------------------------------------------------------
 // Admin hooks (authenticated)
 // ---------------------------------------------------------------------------
@@ -76,13 +86,56 @@ export function usePatchFormFields() {
 
 export function useDeleteForm() {
   const qc = useQueryClient();
+  const t = useT();
   return useActionMutation("delete-form", {
+    onMutate: async (variables) => {
+      if (variables.purge) return undefined;
+
+      const activeListFilter = {
+        queryKey: ["action", "list-forms"],
+        predicate: (query: { queryKey: readonly unknown[] }) => {
+          const params = query.queryKey[2];
+          return !(
+            params &&
+            typeof params === "object" &&
+            (params as { archived?: boolean }).archived === true
+          );
+        },
+      } as const;
+
+      await qc.cancelQueries(activeListFilter);
+      const previous = qc.getQueriesData<FormListItem[]>(activeListFilter);
+      const removed: FormListMutationContext["removed"] = [];
+      for (const [queryKey, data] of previous) {
+        const index = data?.findIndex((form) => form.id === variables.id) ?? -1;
+        const form = index >= 0 ? data?.[index] : undefined;
+        if (form) removed.push({ queryKey, form, index });
+        qc.setQueryData<FormListItem[]>(queryKey, (old) =>
+          old?.filter((form) => form.id !== variables.id),
+        );
+      }
+
+      return { removed } satisfies FormListMutationContext;
+    },
     onSuccess: () => {
       qc.invalidateQueries({ queryKey: ["action", "list-forms"] });
       qc.invalidateQueries({ queryKey: ["action", "get-form"] });
     },
-    onError: () => {
-      toast.error("Failed to delete form");
+    onError: (_error, variables, context) => {
+      const mutationContext = context as FormListMutationContext | undefined;
+      for (const { queryKey, form, index } of mutationContext?.removed ?? []) {
+        qc.setQueryData<FormListItem[]>(queryKey, (old) => {
+          if (!old || old.some((item) => item.id === form.id)) return old;
+          const next = [...old];
+          next.splice(Math.min(index, next.length), 0, form);
+          return next;
+        });
+      }
+      if (variables.purge) {
+        toast.error("Failed to delete form");
+      } else if (!mutationContext?.removed.length) {
+        toast.error(t("forms.archiveFailed"));
+      }
     },
   });
 }

package/corpus/templates/forms/app/i18n/en-US.ts

@@ -259,6 +259,8 @@ const messages = {
     duplicated: "Form duplicated",
     duplicateFailed: "Failed to duplicate form",
     movedToArchive: "Form moved to Archive",
+    movingToArchive: "Moving form to Archive…",
+    archiveFailed: "Failed to move form to Archive",
     restored: "Form restored",
     permanentlyDeleted: "Form permanently deleted",
     bulkPermanentlyDeleted: "{{formattedCount}} forms permanently deleted",