@agent-native/core 0.72.2 → 0.72.4

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

@@ -104,8 +104,24 @@ function persistedActiveThreadId() {
   }
 }
 
+function threadIdFromPath(pathname: string) {
+  const match = pathname.match(/^\/chat\/([^/]+)/);
+  if (!match) return null;
+  try {
+    const value = decodeURIComponent(match[1]).trim();
+    return value || null;
+  } catch {
+    return null;
+  }
+}
+
+function chatThreadPath(threadId: string) {
+  return `/chat/${encodeURIComponent(threadId)}`;
+}
+
 function ChatThreadsSection() {
   const navigate = useNavigate();
+  const location = useLocation();
   const {
     threads,
     activeThreadId,
@@ -162,7 +178,10 @@ function ChatThreadsSection() {
 
   function openThread(threadId: string, options?: { isNew?: boolean }) {
     switchThread(threadId);
-    navigateWithAgentChatViewTransition(navigate, "/");
+    navigateWithAgentChatViewTransition(
+      navigate,
+      options?.isNew ? "/" : chatThreadPath(threadId),
+    );
     window.requestAnimationFrame(() => {
       window.dispatchEvent(
         new CustomEvent("agent-chat:open-thread", {
@@ -244,7 +263,10 @@ function ChatThreadsSection() {
       </div>
       <div className="grid gap-0.5">
         {visibleThreads.map((thread) => {
-          const isActive = thread.id === activeThreadId;
+          const isActive =
+            thread.id ===
+            (threadIdFromPath(location.pathname) ??
+              (location.pathname === "/" ? null : activeThreadId));
           const isRenaming = thread.id === renamingThreadId;
           return (
             <div
@@ -348,7 +370,8 @@ export function Sidebar({
 }: SidebarProps) {
   const location = useLocation();
   const navigate = useNavigate();
-  const isChatRoute = location.pathname === "/";
+  const isChatRoute =
+    location.pathname === "/" || location.pathname.startsWith("/chat/");
   const ToggleIcon = collapsed
     ? IconLayoutSidebarLeftExpand
     : IconLayoutSidebarLeftCollapse;
@@ -440,7 +463,7 @@ export function Sidebar({
             const Icon = item.icon;
             const isActive =
               item.href === "/"
-                ? location.pathname === "/"
+                ? isChatRoute
                 : location.pathname.startsWith(item.href);
             const link = (
               <Link

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

@@ -10,6 +10,7 @@ import { TAB_ID } from "@/lib/tab-id";
 export interface NavigationState {
   view: string;
   path?: string;
+  threadId?: string;
 }
 
 export function useNavigationState() {
@@ -17,14 +18,21 @@ export function useNavigationState() {
   useAgentRouteState<NavigationState>({
     browserTabId: TAB_ID,
     requestSource: TAB_ID,
-    getNavigationState: ({ pathname, search, hash }) => ({
-      view: viewForPath(pathname),
-      path: appPath(pathname),
-    }),
+    getNavigationState: ({ pathname }) => {
+      const threadId = threadIdFromPath(pathname);
+      return {
+        view: viewForPath(pathname),
+        path: appPath(pathname),
+        ...(threadId ? { threadId } : {}),
+      };
+    },
     getCommandPath: (command) =>
-      routerPath(command.path || pathForView(command.view)),
+      routerPath(command.path || pathForCommand(command)),
     onNavigate: (_command, path) => {
-      if (location.pathname === "/" && pathnameFromPath(path) !== "/") {
+      if (
+        isChatPath(location.pathname) &&
+        !isChatPath(pathnameFromPath(path))
+      ) {
         markAgentChatHomeHandoff("chat");
       }
     },
@@ -35,7 +43,19 @@ function pathnameFromPath(path: string): string {
   return path.split(/[?#]/, 1)[0] || "/";
 }
 
+function threadIdFromPath(pathname: string): string | null {
+  const match = pathname.match(/^\/chat\/([^/]+)/);
+  if (!match) return null;
+  try {
+    const value = decodeURIComponent(match[1]).trim();
+    return value || null;
+  } catch {
+    return null;
+  }
+}
+
 function viewForPath(pathname: string): string {
+  if (isChatPath(pathname)) return "chat";
   if (pathname.startsWith("/database")) return "database";
   if (pathname.startsWith("/extensions")) return "extensions";
   if (pathname.startsWith("/observability")) return "observability";
@@ -62,6 +82,14 @@ function pathForView(view?: string): string {
   }
 }
 
+function pathForCommand(command: any): string {
+  const path = pathForView(command?.view);
+  if (path !== "/") return path;
+  const threadId =
+    typeof command?.threadId === "string" ? command.threadId.trim() : "";
+  return threadId ? `/chat/${encodeURIComponent(threadId)}` : "/";
+}
+
 function routerPath(path: string): string {
   const basePath = appBasePath();
   if (!basePath) return path;
@@ -71,3 +99,7 @@ function routerPath(path: string): string {
   }
   return path;
 }
+
+function isChatPath(pathname: string): boolean {
+  return pathname === "/" || pathname.startsWith("/chat/");
+}

package/corpus/templates/chat/app/routes/_index.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { useNavigate, useParams } from "react-router";
 import {
   AgentChatSurface,
   markAgentChatHomeHandoff,
@@ -25,7 +26,14 @@ export function meta() {
   ];
 }
 
+function chatThreadPath(threadId: string | null) {
+  return threadId ? `/chat/${encodeURIComponent(threadId)}` : "/";
+}
+
 export default function ChatRoute() {
+  const { threadId } = useParams();
+  const navigate = useNavigate();
+
   useEffect(() => {
     function handleChatRunning(event: Event) {
       const detail = (event as CustomEvent).detail;
@@ -45,6 +53,11 @@ export default function ChatRoute() {
         className="h-full"
         defaultMode="chat"
         storageKey="chat"
+        threadUrlSync={{
+          routeThreadId: threadId ?? null,
+          getPath: chatThreadPath,
+          navigate,
+        }}
         browserTabId={TAB_ID}
         showHeader={false}
         showTabBar={false}

package/corpus/templates/chat/app/routes/chat.$threadId.tsx

@@ -0,0 +1 @@
+export { default, meta } from "./_index";

package/corpus/templates/clips/desktop/src-tauri/src/native_speech.rs

@@ -597,6 +597,15 @@ pub(crate) mod macos {
             mic_device_label.as_deref(),
         )?;
         let input_node = unsafe { engine.inputNode() };
+        // Finalize input-device format negotiation before reading the format.
+        // When `configure_engine_input_device` pins a specific mic, the AUHAL's
+        // current device is switched; the input node's `outputFormatForBus(0)`
+        // only reflects the new device after `prepare()` runs. Reading it first
+        // returns a stale format, so the tap gets installed with a mismatched
+        // format and forwards no usable audio to the recognizer — the user
+        // speaks but SFSpeechRecognizer reports "No speech detected". Mirrors
+        // the working `start_raw_mic_capture` ordering.
+        unsafe { engine.prepare() };
         let format = unsafe { input_node.outputFormatForBus(0) };
 
         // Install a tap that forwards every PCM buffer into the recognition

package/corpus/templates/design/AGENTS.md

@@ -26,11 +26,16 @@ patterns live in `.agents/skills/`.
 - Generated files must be complete, standalone HTML unless the user asks for a
   different export format. They should render in the iframe without a build step.
 - For raster image generation, restyling, or editing existing screenshots/photos,
-  use the first-party Assets app via `call-agent` with agent `"assets"` when
-  available instead of claiming Design has no image tools. If the user attached
-  an image, use its hosted chat-attachment URL or call `upload-image` to create
-  one before delegating. If no image/upload provider is configured, say that
-  specific setup is needed and continue any non-image Design work separately.
+  use the available first-party Assets MCP tool such as `generate-asset` instead
+  of placeholders or generic stock imagery. When the Assets picker returns a
+  selected asset, preserve `assetId`, `runId`, and URLs verbatim; if a design is
+  open, call `insert-asset` with the chosen URL/id, then refine placement with
+  `get-design-snapshot` and `edit-design` as needed. If no Assets MCP tool is
+  available, use the first-party Assets app via `call-agent` with agent
+  `"assets"` when available. If the user attached an image, use its hosted
+  chat-attachment URL or call `upload-image` to create one before delegating. If
+  no image/upload provider is configured, say that specific setup is needed and
+  continue any non-image Design work separately.
 - Use Alpine.js and Tailwind CDN for interactive prototypes. Prefer Alpine
   directives over raw inline event handlers.
 - Navigate between prototype screens with Alpine state (`x-show`), a

package/corpus/templates/design/actions/connect-assets-mcp.ts

@@ -0,0 +1,131 @@
+import { defineAction } from "@agent-native/core";
+import { getDbExec } from "@agent-native/core/db";
+import {
+  getRequestOrgId,
+  getRequestUserEmail,
+} from "@agent-native/core/server/request-context";
+import {
+  addFirstPartyRemoteServer,
+  isFirstPartyRemoteEndpointTrusted,
+  listRemoteServers,
+  removeRemoteServer,
+} from "@agent-native/core/mcp-client";
+import { fetchOrgApps } from "@agent-native/core/mcp";
+import { refreshGlobalMcpManager } from "@agent-native/core/server";
+import { z } from "zod";
+
+const SERVER_NAME = "assets";
+
+function assetsMcpUrl(appUrl: string): string {
+  return `${appUrl.replace(/\/+$/, "")}/_agent-native/mcp`;
+}
+
+function sameEndpoint(a: string, b: string): boolean {
+  try {
+    const urlA = new URL(a);
+    const urlB = new URL(b);
+    return (
+      urlA.origin === urlB.origin &&
+      urlA.pathname.replace(/\/+$/, "") === urlB.pathname.replace(/\/+$/, "")
+    );
+  } catch {
+    return a.replace(/\/+$/, "") === b.replace(/\/+$/, "");
+  }
+}
+
+async function listAssetsServers(orgId: string) {
+  const servers = await listRemoteServers("org", orgId);
+  return servers.filter(
+    (server) => server.name === SERVER_NAME && server.firstParty === true,
+  );
+}
+
+async function assertCanManageOrgMcp(orgId: string, userEmail: string) {
+  const result = await getDbExec().execute({
+    sql: `SELECT role FROM org_members WHERE org_id = ? AND LOWER(email) = ? LIMIT 1`,
+    args: [orgId, userEmail.toLowerCase()],
+  });
+  const role = String(
+    (result.rows[0] as { role?: unknown } | undefined)?.role,
+  ).toLowerCase();
+  if (role !== "owner" && role !== "admin") {
+    throw new Error(
+      "Only organization owners and admins can connect org-scoped MCP servers.",
+    );
+  }
+}
+
+export default defineAction({
+  description:
+    "Connect the first-party Assets MCP server for the active Design organization. Use this explicit setup action instead of mutating onboarding status.",
+  schema: z.object({}),
+  publicAgent: { expose: true, readOnly: false, requiresAuth: true },
+  run: async () => {
+    const userEmail = getRequestUserEmail();
+    const orgId = getRequestOrgId();
+    if (!userEmail || !orgId) {
+      throw new Error("You must be signed in to an organization.");
+    }
+    await assertCanManageOrgMcp(orgId, userEmail);
+
+    const apps = await fetchOrgApps({ selfId: "design" });
+    const assets = apps.find((app) => app.id === "assets");
+    if (!assets?.url) {
+      throw new Error("Could not find the Assets app in this organization.");
+    }
+    const currentUrl = assetsMcpUrl(assets.url);
+
+    const existingServers = await listAssetsServers(orgId);
+    for (const existing of existingServers) {
+      const trust = await isFirstPartyRemoteEndpointTrusted(
+        orgId,
+        "assets",
+        existing.url,
+      );
+      if (trust.ok && sameEndpoint(existing.url, currentUrl)) {
+        const managerRefreshed = await refreshGlobalMcpManager();
+        return {
+          ok: true,
+          connected: true,
+          server: existing,
+          managerRefreshed,
+          message: "Assets MCP is already connected for this organization.",
+        };
+      }
+    }
+
+    // Verify the target endpoint is trusted before removing any existing
+    // server, so a transient org-directory/auth failure cannot turn a reconnect
+    // into a full disconnect for the org.
+    const targetTrust = await isFirstPartyRemoteEndpointTrusted(
+      orgId,
+      "assets",
+      currentUrl,
+    );
+    if (!targetTrust.ok) {
+      throw new Error(targetTrust.error);
+    }
+
+    for (const existing of existingServers) {
+      await removeRemoteServer("org", orgId, existing.id);
+    }
+
+    const result = await addFirstPartyRemoteServer(orgId, {
+      appId: "assets",
+      name: SERVER_NAME,
+      url: currentUrl,
+      description: "First-party Assets MCP server for on-brand media.",
+    });
+    if (result.ok !== true) {
+      throw new Error(result.error);
+    }
+    const managerRefreshed = await refreshGlobalMcpManager();
+    return {
+      ok: true,
+      connected: true,
+      server: result.server,
+      managerRefreshed,
+      message: "Assets MCP is connected for this organization.",
+    };
+  },
+});

package/corpus/templates/design/actions/insert-asset.ts

@@ -0,0 +1,219 @@
+import { defineAction } from "@agent-native/core";
+import { readAppStateForCurrentTab } from "@agent-native/core/application-state";
+import {
+  hasCollabState,
+  getText,
+  applyText,
+  seedFromText,
+} from "@agent-native/core/collab";
+import { accessFilter, assertAccess } from "@agent-native/core/sharing";
+import { and, eq } from "drizzle-orm";
+import { z } from "zod";
+import { getDb, schema } from "../server/db/index.js";
+
+const schemaInput = z.object({
+  assetUrl: z
+    .string()
+    .url()
+    .refine((value) => {
+      try {
+        const protocol = new URL(value).protocol;
+        return protocol === "http:" || protocol === "https:";
+      } catch {
+        return false;
+      }
+    }, "Asset URL must use http or https.")
+    .describe("Chosen asset image/video URL."),
+  assetId: z.string().optional().describe("Chosen Assets asset id."),
+  title: z.string().optional().describe("Human-readable asset title."),
+  altText: z.string().optional().describe("Alt text for an image asset."),
+  mediaType: z.enum(["image", "video"]).default("image"),
+  designId: z
+    .string()
+    .optional()
+    .describe("Design id. Defaults to the current editor navigation state."),
+  fileId: z
+    .string()
+    .optional()
+    .describe("Design file id. Defaults to the active editor file."),
+  ownerId: z
+    .string()
+    .optional()
+    .describe("Design editor selection owner token from current screen state."),
+});
+
+function stringFromState(state: unknown, key: string): string | undefined {
+  if (!state || typeof state !== "object") return undefined;
+  const value = (state as Record<string, unknown>)[key];
+  return typeof value === "string" && value ? value : undefined;
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function insertBeforeClosingTag(
+  html: string,
+  closingTag: "main" | "body",
+  snippet: string,
+): string | null {
+  const pattern = new RegExp(`</${closingTag}>`, "i");
+  if (!pattern.test(html)) return null;
+  return html.replace(pattern, `${snippet}\n</${closingTag}>`);
+}
+
+function appendAssetMarkup(
+  html: string,
+  args: z.infer<typeof schemaInput>,
+): string {
+  const label = args.title?.trim() || args.altText?.trim() || "Generated asset";
+  const escapedUrl = escapeHtml(args.assetUrl);
+  const escapedLabel = escapeHtml(label);
+  const assetIdAttr = args.assetId
+    ? ` data-asset-id="${escapeHtml(args.assetId)}"`
+    : "";
+  const media =
+    args.mediaType === "video"
+      ? `<video src="${escapedUrl}" controls class="w-full rounded-xl object-cover"></video>`
+      : `<img src="${escapedUrl}" alt="${escapeHtml(args.altText?.trim() || label)}" class="w-full rounded-xl object-cover" />`;
+  const snippet = `
+    <section class="mx-auto my-8 max-w-5xl px-4" data-agent-native-asset${assetIdAttr}>
+      <figure class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-sm">
+        ${media}
+        <figcaption class="px-4 py-3 text-sm text-slate-600">${escapedLabel}</figcaption>
+      </figure>
+    </section>`;
+
+  return (
+    insertBeforeClosingTag(html, "main", snippet) ??
+    insertBeforeClosingTag(html, "body", snippet) ??
+    `${html}\n${snippet}`
+  );
+}
+
+async function resolveTarget(args: z.infer<typeof schemaInput>) {
+  const [navigation, selection] = await Promise.all([
+    readAppStateForCurrentTab("navigation").catch(() => null),
+    readAppStateForCurrentTab("design-selection").catch(() => null),
+  ]);
+  const navigationDesignId = stringFromState(navigation, "designId");
+  const selectionDesignId = stringFromState(selection, "designId");
+  const selectionOwnerId = stringFromState(selection, "ownerId");
+  const selectionMatchesOwner =
+    Boolean(args.ownerId) && selectionOwnerId === args.ownerId;
+  // Prefer the owner-matched selection over generic navigation so a tab-scoped
+  // picker handoff lands in the design that produced it.
+  const designId =
+    args.designId ??
+    (selectionMatchesOwner ? selectionDesignId : undefined) ??
+    navigationDesignId;
+  const canUseSelection =
+    selectionMatchesOwner &&
+    Boolean(designId) &&
+    selectionDesignId === designId;
+  const navigationActiveFileId =
+    designId && navigationDesignId === designId
+      ? stringFromState(navigation, "activeFileId")
+      : undefined;
+  return {
+    designId,
+    fileId:
+      args.fileId ??
+      (canUseSelection
+        ? stringFromState(selection, "activeFileId")
+        : undefined) ??
+      navigationActiveFileId,
+  };
+}
+
+function isHtmlFile(file: {
+  fileType: string | null;
+  filename: string | null;
+}): boolean {
+  return file.fileType === "html" || file.filename?.endsWith(".html") === true;
+}
+
+export default defineAction({
+  description:
+    "Insert a chosen Assets image or video URL into a Design file. Use this after the Assets picker returns chooseAsset/chooseImage context; pass designId/fileId directly when known, or pass ownerId from view-screen.designSelection when targeting the current editor selection.",
+  schema: schemaInput,
+  publicAgent: { expose: true, readOnly: false, requiresAuth: true },
+  run: async (args) => {
+    const target = await resolveTarget(args);
+    if (!target.designId) {
+      throw new Error(
+        "No active design found. Open a design or pass designId.",
+      );
+    }
+
+    const db = getDb();
+    const files = await db
+      .select({
+        id: schema.designFiles.id,
+        designId: schema.designFiles.designId,
+        filename: schema.designFiles.filename,
+        fileType: schema.designFiles.fileType,
+        content: schema.designFiles.content,
+      })
+      .from(schema.designFiles)
+      .innerJoin(
+        schema.designs,
+        eq(schema.designFiles.designId, schema.designs.id),
+      )
+      .where(
+        and(
+          eq(schema.designFiles.designId, target.designId),
+          accessFilter(schema.designs, schema.designShares),
+        ),
+      );
+    const requestedFile = files.find(
+      (candidate) => candidate.id === target.fileId,
+    );
+    const file =
+      requestedFile && isHtmlFile(requestedFile)
+        ? requestedFile
+        : (files.find(isHtmlFile) ?? null);
+    if (!file) throw new Error("No editable HTML design file found.");
+    await assertAccess("design", file.designId, "editor");
+
+    let base = file.content ?? "";
+    try {
+      if (await hasCollabState(file.id)) {
+        const live = await getText(file.id, "content");
+        if (typeof live === "string") base = live;
+      }
+    } catch {
+      // Collab read is best-effort; fall back to stored content.
+    }
+
+    const content = appendAssetMarkup(base, args);
+    const now = new Date().toISOString();
+    await db
+      .update(schema.designFiles)
+      .set({ content, updatedAt: now })
+      .where(eq(schema.designFiles.id, file.id));
+    await db
+      .update(schema.designs)
+      .set({ updatedAt: now })
+      .where(eq(schema.designs.id, file.designId));
+
+    if (await hasCollabState(file.id)) {
+      await applyText(file.id, content, "content", "agent");
+    } else {
+      await seedFromText(file.id, content);
+    }
+
+    return {
+      designId: file.designId,
+      fileId: file.id,
+      filename: file.filename,
+      inserted: true,
+      assetId: args.assetId ?? null,
+      assetUrl: args.assetUrl,
+    };
+  },
+});

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

@@ -20,9 +20,10 @@ export default defineAction({
   schema: z.object({}),
   http: false,
   run: async () => {
-    const [navigation, designVariants] = await Promise.all([
+    const [navigation, designVariants, designSelection] = await Promise.all([
       readAppStateForCurrentTab("navigation"),
       readAppState("design-variants"),
+      readAppStateForCurrentTab("design-selection"),
     ]);
     const designId =
       navigation &&
@@ -37,6 +38,7 @@ export default defineAction({
 
     const screen: Record<string, unknown> = {};
     if (navigation) screen.navigation = navigation;
+    if (designSelection) screen.designSelection = designSelection;
     if (showQuestions) {
       screen.pendingQuestions = showQuestions;
       screen.note =

package/corpus/templates/design/app/components/editor/PromptDialog.tsx

@@ -398,7 +398,7 @@ export default function PromptPopover({
         return;
       }
 
-      if (name !== "chooseImage") return;
+      if (name !== "chooseImage" && name !== "chooseAsset") return;
       const url = pickedAssetImageSource(payload);
       if (!url) {
         toast.error("Assets did not return an image URL.");

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

@@ -43,6 +43,9 @@ import {
   ShareButton,
   isEmbedAuthActive,
   sendToAgentChat,
+  getBrowserTabId,
+  readClientAppState,
+  setClientAppState,
   useReconciledState,
   usePresence,
   useFollowUser,
@@ -113,6 +116,16 @@ import { cn } from "@/lib/utils";
 import { toast } from "sonner";
 
 const TAB_ID = generateTabId();
+
+// Selection is tab-scoped (like navigation) so a second editor tab cannot
+// overwrite this tab's selection context. The global key is mirrored as a
+// fallback for CLI/external agents that do not send a browser tab id.
+function designSelectionStateKeys(): string[] {
+  const tabId = getBrowserTabId();
+  return tabId
+    ? [`design-selection:${tabId}`, "design-selection"]
+    : ["design-selection"];
+}
 // Stable symbol used as the Yjs transaction origin for all local user edits.
 // The UndoManager tracks only this origin so remote peers' and the agent's
 // edits are never undone by this user's Cmd+Z.
@@ -317,6 +330,8 @@ export default function DesignEditor() {
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
   const undoManagerRef = useRef<Y.UndoManager | null>(null);
+  const persistedSelectionStateRef = useRef<string | null>(null);
+  const designSelectionOwnerIdRef = useRef(`${TAB_ID}:${generateTabId()}`);
   const [tweakSaveActive, setTweakSaveActive] = useState(false);
   // Shared visual-editor modes (overlays the iframe). drawMode toggles the
   // pencil overlay, pinMode lets the user drop comment pins. They're
@@ -340,6 +355,26 @@ export default function DesignEditor() {
   const [promptDesignSystemId, setPromptDesignSystemId] = useState<
     string | null | undefined
   >(undefined);
+
+  useEffect(() => {
+    return () => {
+      void (async () => {
+        const keys = designSelectionStateKeys();
+        const current = await readClientAppState(keys[0]).catch(() => null);
+        const ownerId =
+          current && typeof current === "object"
+            ? (current as { ownerId?: unknown }).ownerId
+            : undefined;
+        if (ownerId !== designSelectionOwnerIdRef.current) return;
+        persistedSelectionStateRef.current = null;
+        for (const key of designSelectionStateKeys()) {
+          await setClientAppState(key, null, {
+            keepalive: true,
+          }).catch(() => {});
+        }
+      })();
+    };
+  }, []);
   // When generation stalls we keep the original prompt + files around so the
   // user can retry with one click instead of re-typing. Cleared as soon as the
   // user kicks off a new run (retry or fresh prompt).
@@ -1414,6 +1449,24 @@ export default function DesignEditor() {
       mode,
     };
     (window as any).__designSelection = selection;
+    const persistedSelection = {
+      designId: selection.designId,
+      designTitle: selection.designTitle,
+      activeFileId: selection.activeFileId,
+      activeFilename: selection.activeFilename,
+      selectedElement: selection.selectedElement,
+      mode: selection.mode,
+      ownerId: designSelectionOwnerIdRef.current,
+    };
+    const persistedKey = JSON.stringify(persistedSelection);
+    if (persistedSelectionStateRef.current !== persistedKey) {
+      persistedSelectionStateRef.current = persistedKey;
+      for (const key of designSelectionStateKeys()) {
+        setClientAppState(key, persistedSelection, {
+          keepalive: true,
+        }).catch(() => {});
+      }
+    }
     const el = document.documentElement;
     el.dataset.designId = id;
     if (activeFile?.id) el.dataset.fileId = activeFile.id;