@agent-native/core 0.99.1 → 0.99.2

package/corpus/templates/clips/app/routes/r.$recordingId.tsx

@@ -35,7 +35,13 @@ import {
 } from "@tabler/icons-react";
 import { useQuery } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useParams, useNavigate, NavLink, useSearchParams } from "react-router";
+import {
+  Link,
+  useParams,
+  useNavigate,
+  NavLink,
+  useSearchParams,
+} from "react-router";
 import { toast } from "sonner";
 
 import { EditableRecordingTitle } from "@/components/editable-recording-title";
@@ -712,8 +718,8 @@ export default function RecordingPage() {
           {(playerDataQ.error as Error | undefined)?.message ??
             t("recordingPage.noAccess")}
         </p>
-        <Button onClick={() => navigate("/")} variant="outline">
-          {t("recordingPage.backToLibrary")}
+        <Button asChild variant="outline">
+          <Link to="/">{t("recordingPage.backToLibrary")}</Link>
         </Button>
       </div>
     );
@@ -772,13 +778,15 @@ export default function RecordingPage() {
         <div className="flex min-h-screen w-full flex-col bg-background">
           <header className="flex min-w-0 shrink-0 items-center gap-3 border-b border-border px-3 py-2 sm:px-4 sm:py-3">
             <Button
+              asChild
               variant="ghost"
               size="icon"
               className="shrink-0"
-              onClick={() => navigate("/")}
               aria-label={t("recordingPage.back")}
             >
-              <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+              <Link to="/">
+                <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+              </Link>
             </Button>
             <div className="min-w-0 flex-1">
               <p className="truncate text-sm font-medium">{visibleTitle}</p>
@@ -947,8 +955,8 @@ export default function RecordingPage() {
                 : t("recordingPage.retryUpload")
               : t("recordingPage.checkAgain")}
           </Button>
-          <Button onClick={() => navigate("/")} variant="ghost" size="sm">
-            {t("recordingPage.backToLibrary")}
+          <Button asChild variant="ghost" size="sm">
+            <Link to="/">{t("recordingPage.backToLibrary")}</Link>
           </Button>
         </div>
       </div>
@@ -1122,13 +1130,15 @@ export default function RecordingPage() {
       <div className="flex w-full min-w-0 flex-col xl:flex-1">
         <header className="flex min-w-0 shrink-0 items-center gap-2 border-b border-border px-3 py-2 sm:gap-3 sm:px-4 sm:py-3">
           <Button
+            asChild
             variant="ghost"
             size="icon"
             className="shrink-0"
-            onClick={() => navigate("/")}
             aria-label={t("recordingPage.back")}
           >
-            <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+            <Link to="/">
+              <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+            </Link>
           </Button>
           <div className="flex-1 min-w-0">
             <EditableRecordingTitle

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -32,7 +32,7 @@ import {
   type LoaderFunctionArgs,
   type MetaFunction,
 } from "react-router";
-import { useLoaderData, useNavigate, useParams } from "react-router";
+import { Link, useLoaderData, useNavigate, useParams } from "react-router";
 import { toast } from "sonner";
 
 import { CaptureInstallButton } from "@/components/capture-install-options";
@@ -817,12 +817,14 @@ export default function ShareRoute() {
         <header className="flex min-w-0 shrink-0 flex-wrap items-center gap-2 border-b border-border px-3 py-2 sm:gap-3 sm:px-4 sm:py-3 lg:flex-nowrap">
           {session ? (
             <Button
+              asChild
               variant="ghost"
               size="icon"
-              onClick={() => navigate("/")}
               aria-label={t("sharePage.backToHome")}
             >
-              <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+              <Link to="/">
+                <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
+              </Link>
             </Button>
           ) : null}
           <div className="min-w-0 flex-1">

package/corpus/templates/clips/changelog/2026-07-13-recording-links-open-in-new-tabs.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Recording cards and player back links now support opening in a new tab.

package/corpus/templates/content/app/components/editor/ContentReferencePreview.tsx

@@ -1,7 +1,7 @@
 import { useT } from "@agent-native/core/client";
 import { IconExternalLink, IconFileText } from "@tabler/icons-react";
 import { lazy, Suspense, useMemo } from "react";
-import { useNavigate } from "react-router";
+import { Link } from "react-router";
 
 import { Button } from "@/components/ui/button";
 import { useDocument, useDocuments } from "@/hooks/use-documents";
@@ -66,7 +66,6 @@ export function ContentReferencePreview({
   referenceDepth?: number;
 }) {
   const t = useT();
-  const navigate = useNavigate();
   const documentsQuery = useDocuments();
   const resolvedPath = useMemo(
     () => resolveContentReferencePath(sourcePath, currentPath),
@@ -113,16 +112,15 @@ export function ContentReferencePreview({
         </div>
         {document ? (
           <Button
-            type="button"
+            asChild
             size="sm"
             variant="ghost"
             className="h-8 gap-1.5 px-2 text-xs"
-            onClick={() =>
-              navigate(`/page/${document.id}`, { flushSync: true })
-            }
           >
-            <IconExternalLink className="size-3.5" />
-            {t("editor.reference.open")}
+            <Link to={`/page/${document.id}`}>
+              <IconExternalLink className="size-3.5" />
+              {t("editor.reference.open")}
+            </Link>
           </Button>
         ) : null}
       </div>

package/corpus/templates/content/app/components/editor/database/DatabaseView.tsx

@@ -139,7 +139,7 @@ import {
   type PointerEvent as ReactPointerEvent,
   type ReactNode,
 } from "react";
-import { useLocation, useNavigate } from "react-router";
+import { Link, useLocation, useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import {
@@ -1670,14 +1670,16 @@ function DatabaseTable({
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
+                  asChild
                   type="button"
                   variant="ghost"
                   size="sm"
                   aria-label={dbText("openAsFullPage")}
                   className={databaseToolbarIconButtonClass()}
-                  onClick={() => navigate(`/page/${databaseDocumentId}`)}
                 >
-                  <IconArrowsDiagonal className="size-3.5" />
+                  <Link to={`/page/${databaseDocumentId}`}>
+                    <IconArrowsDiagonal className="size-3.5" />
+                  </Link>
                 </Button>
               </TooltipTrigger>
               <TooltipContent>{dbText("openAsFullPage")}</TooltipContent>

package/corpus/templates/content/app/components/editor/database/FormView.tsx

@@ -12,7 +12,7 @@ import {
   IconExternalLink,
 } from "@tabler/icons-react";
 import { useMemo, useState } from "react";
-import { useNavigate } from "react-router";
+import { Link, useNavigate } from "react-router";
 
 import { Button } from "@/components/ui/button";
 import {
@@ -362,14 +362,11 @@ export function DatabaseFormView({
               {t("database.formSubmittedDescription")}
             </div>
           </div>
-          <Button
-            type="button"
-            variant="outline"
-            size="sm"
-            onClick={() => navigate(`/page/${createdDocumentId}`)}
-          >
-            <IconExternalLink className="size-4" />
-            {t("database.openPage")}
+          <Button asChild type="button" variant="outline" size="sm">
+            <Link to={`/page/${createdDocumentId}`}>
+              <IconExternalLink className="size-4" />
+              {t("database.openPage")}
+            </Link>
           </Button>
         </div>
       ) : null}

package/corpus/templates/content/changelog/2026-07-13-document-links-open-in-new-tabs.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Document links now support opening in a new tab.

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

@@ -1,4 +1,8 @@
 import { usePinchZoom, useT } from "@agent-native/core/client";
+import {
+  injectSessionReplayIframeBootstrap,
+  SESSION_REPLAY_IFRAME_ATTRIBUTE,
+} from "@agent-native/core/client";
 import {
   DEFAULT_CANVAS_MAX_ZOOM,
   DEFAULT_CANVAS_MIN_ZOOM,
@@ -2098,24 +2102,32 @@ export function DesignCanvas({
       contentOffsetX: embeddedFrame?.contentOffsetX ?? 0,
       contentOffsetY: embeddedFrame?.contentOffsetY ?? 0,
     });
+    let frameDocument: string;
     if (frameContent.includes("</body>")) {
-      return frameContent.replace("</body>", bridgeToInject + "</body>"); // i18n-ignore generated iframe HTML injection
-    }
-    if (frameContent.includes("</html>")) {
-      return frameContent.replace("</html>", bridgeToInject + "</html>"); // i18n-ignore generated iframe HTML injection
+      frameDocument = frameContent.replace(
+        "</body>", // i18n-ignore generated iframe HTML injection
+        bridgeToInject + "</body>", // i18n-ignore generated iframe HTML injection
+      ); // i18n-ignore generated iframe HTML injection
+    } else if (frameContent.includes("</html>")) {
+      frameDocument = frameContent.replace(
+        "</html>", // i18n-ignore generated iframe HTML injection
+        bridgeToInject + "</html>", // i18n-ignore generated iframe HTML injection
+      ); // i18n-ignore generated iframe HTML injection
+    } else {
+      // No body/html tags — wrap it
+      const frameStyle = [
+        getEmbeddedFrameBackgroundStyle({
+          embeddedFrameBackground,
+          transparentBackground,
+        }),
+        embeddedContentOffsetStyle(
+          embeddedFrame?.contentOffsetX ?? 0,
+          embeddedFrame?.contentOffsetY ?? 0,
+        ),
+      ].join("");
+      frameDocument = `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${frameStyle}</head><body>${iframeRenderContent}${bridgeToInject}</body></html>`;
     }
-    // No body/html tags — wrap it
-    const frameStyle = [
-      getEmbeddedFrameBackgroundStyle({
-        embeddedFrameBackground,
-        transparentBackground,
-      }),
-      embeddedContentOffsetStyle(
-        embeddedFrame?.contentOffsetX ?? 0,
-        embeddedFrame?.contentOffsetY ?? 0,
-      ),
-    ].join("");
-    return `<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">${frameStyle}</head><body>${iframeRenderContent}${bridgeToInject}</body></html>`;
+    return injectSessionReplayIframeBootstrap(frameDocument);
     // editorChromeScaleX/Y are intentionally NOT deps: they only seed the initial
     // baked chrome scale. Live zoom updates flow through the set-editor-chrome-scale
     // postMessage above. Including them here rebuilds srcdoc on every zoom commit,
@@ -4081,6 +4093,11 @@ export function DesignCanvas({
           readOnly,
         })}
         data-design-preview-iframe
+        {...{
+          [SESSION_REPLAY_IFRAME_ATTRIBUTE]: !externalPreviewUrl
+            ? ""
+            : undefined,
+        }}
         data-screen-iframe-id={
           boardSurface ? undefined : (previewFrameId ?? screenId ?? undefined)
         }

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

@@ -1,4 +1,8 @@
 import { useT } from "@agent-native/core/client";
+import {
+  injectSessionReplayIframeBootstrap,
+  SESSION_REPLAY_IFRAME_ATTRIBUTE,
+} from "@agent-native/core/client";
 import {
   DEFAULT_CANVAS_MAX_ZOOM,
   DEFAULT_CANVAS_MIN_ZOOM,
@@ -9048,7 +9052,10 @@ const Screen = memo(function Screen({
   // rebuild the string every render (that would reload the iframe).
   // Keyed only on screen.content; the hit-test script itself is constant.
   const srcdocWithHitTest = useMemo(
-    () => appendHitTestResponder(screen.content),
+    () =>
+      injectSessionReplayIframeBootstrap(
+        appendHitTestResponder(screen.content),
+      ),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [screen.content],
   );
@@ -9331,6 +9338,11 @@ const Screen = memo(function Screen({
           ) : (
             (screenContent ?? (
               <iframe
+                {...{
+                  [SESSION_REPLAY_IFRAME_ATTRIBUTE]: previewUrl
+                    ? undefined
+                    : "",
+                }}
                 data-screen-iframe-id={screen.id}
                 src={previewUrl}
                 srcDoc={previewUrl ? undefined : srcdocWithHitTest}
@@ -9989,6 +10001,11 @@ function BreakpointPreviewRow({
                       screen.id,
                       widthPx,
                     )}
+                    {...{
+                      [SESSION_REPLAY_IFRAME_ATTRIBUTE]: previewUrl
+                        ? undefined
+                        : "",
+                    }}
                     src={previewUrl}
                     srcDoc={previewUrl ? undefined : srcdocWithHitTest}
                     sandbox="allow-scripts"

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

@@ -23,7 +23,7 @@ import {
   IconExternalLink,
 } from "@tabler/icons-react";
 import { useState, useCallback, useRef, useMemo, useEffect } from "react";
-import { useNavigate, useSearchParams } from "react-router";
+import { Link, useNavigate, useSearchParams } from "react-router";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -504,13 +504,13 @@ export default function DesignSystemSetup() {
 
   useSetPageTitle(
     <div className="flex items-center gap-2 min-w-0">
-      <button
-        onClick={() => navigate("/design-systems")}
+      <Link
+        to="/design-systems"
         className="flex h-8 w-8 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground/90"
         aria-label={t("designSystemSetup.backToDesignSystems")}
       >
         <IconArrowLeft className="w-4 h-4" />
-      </button>
+      </Link>
       <h1 className="text-lg font-semibold tracking-tight truncate">
         {t("navigation.setupDesignSystem")}
       </h1>

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

@@ -412,13 +412,11 @@ export default function DesignSystems() {
             : t("designSystems.actions.select")}
         </Button>
       ) : null}
-      <Button
-        size="sm"
-        onClick={() => navigate("/design-systems/setup")}
-        className="cursor-pointer"
-      >
-        <IconPlus className="w-3.5 h-3.5" />
-        {t("designSystems.actions.new")}
+      <Button asChild size="sm" className="cursor-pointer">
+        <Link to="/design-systems/setup">
+          <IconPlus className="w-3.5 h-3.5" />
+          {t("designSystems.actions.new")}
+        </Link>
       </Button>
     </div>,
   );
@@ -509,8 +507,8 @@ export default function DesignSystems() {
                 </h2>
                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
                   {/* New design system card */}
-                  <button
-                    onClick={() => navigate("/design-systems/setup")}
+                  <Link
+                    to="/design-systems/setup"
                     className="group relative rounded-xl border border-dashed border-border bg-card hover:border-foreground/15 overflow-hidden text-start cursor-pointer"
                   >
                     <div className="aspect-video flex items-center justify-center bg-muted/30">
@@ -526,7 +524,7 @@ export default function DesignSystems() {
                         {t("designSystems.newCardDescription")}
                       </div>
                     </div>
-                  </button>
+                  </Link>
 
                   {/* Design system cards */}
                   {designSystems.map((ds) => {

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

@@ -4,6 +4,10 @@ import {
   useT,
 } from "@agent-native/core/client";
 import type { PromptComposerSubmitOptions } from "@agent-native/core/client";
+import {
+  injectSessionReplayIframeBootstrap,
+  SESSION_REPLAY_IFRAME_ATTRIBUTE,
+} from "@agent-native/core/client";
 import {
   useSetHeaderActions,
   useSetPageTitle,
@@ -954,7 +958,8 @@ function DesignThumbnail({ html }: { html: string | null }) {
       className="aspect-video relative overflow-hidden bg-white"
     >
       <iframe
-        srcDoc={html}
+        {...{ [SESSION_REPLAY_IFRAME_ATTRIBUTE]: "" }}
+        srcDoc={injectSessionReplayIframeBootstrap(html)}
         sandbox="allow-scripts"
         loading="lazy"
         tabIndex={-1}

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

@@ -1,6 +1,11 @@
-import { useActionQuery, useT } from "@agent-native/core/client";
+import {
+  injectSessionReplayIframeBootstrap,
+  SESSION_REPLAY_IFRAME_ATTRIBUTE,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import { useState, useEffect, useCallback } from "react";
-import { useParams, useNavigate } from "react-router";
+import { Link, useParams, useNavigate } from "react-router";
 
 import { QueryErrorState } from "@/components/QueryErrorState";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -84,12 +89,12 @@ export default function Present() {
     return (
       <div className="h-screen w-screen bg-black flex flex-col items-center justify-center gap-4">
         <p className="text-white/50 text-sm">{t("pages.presentEmpty")}</p>
-        <button
-          onClick={() => navigate(`/design/${id}`)}
+        <Link
+          to={`/design/${id}`}
           className="text-sm text-white/40 hover:text-white/60 underline cursor-pointer"
         >
           {t("pages.presentBackToEditor")}
-        </button>
+        </Link>
       </div>
     );
   }
@@ -99,7 +104,8 @@ export default function Present() {
   return (
     <div className="h-screen w-screen bg-black overflow-hidden">
       <iframe
-        srcDoc={activeFile.content}
+        {...{ [SESSION_REPLAY_IFRAME_ATTRIBUTE]: "" }}
+        srcDoc={injectSessionReplayIframeBootstrap(activeFile.content)}
         sandbox="allow-scripts"
         className="w-full h-full border-0"
         title={`${design.title} — ${activeFile.filename}`}

package/corpus/templates/design/changelog/2026-07-13-design-navigation-links-open-in-new-tabs.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Design navigation links now support opening in a new tab.

package/corpus/templates/design/changelog/2026-07-13-design-session-replays-include-preview-iframes.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Design session replays now include activity inside the preview canvas and presentation frames.

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

@@ -41,7 +41,7 @@ import {
 import { format } from "date-fns";
 import { nanoid } from "nanoid";
 import { useState, useCallback, useRef, useEffect } from "react";
-import { useParams, useNavigate, useSearchParams } from "react-router";
+import { Link, useParams, useNavigate, useSearchParams } from "react-router";
 import { toast } from "sonner";
 
 import { FieldPropertiesPanel } from "@/components/builder/FieldPropertiesPanel";
@@ -338,13 +338,15 @@ export function FormBuilderPage() {
             <Tooltip>
               <TooltipTrigger asChild>
                 <Button
+                  asChild
                   variant="ghost"
                   size="icon"
                   className="size-10 shrink-0 active:scale-[0.96]"
-                  onClick={() => navigate("/forms")}
                   aria-label={t("builder.backToForms")}
                 >
-                  <IconArrowLeft className="h-4 w-4" />
+                  <Link to="/forms">
+                    <IconArrowLeft className="h-4 w-4" />
+                  </Link>
                 </Button>
               </TooltipTrigger>
               <TooltipContent>{t("builder.backToForms")}</TooltipContent>
@@ -399,12 +401,8 @@ export function FormBuilderPage() {
           {isAccessIssue ? t("builder.accessDenied") : t("builder.loadFailed")}
         </p>
         <div className="flex gap-2">
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={() => navigate("/forms")}
-          >
-            {t("builder.backToForms")}
+          <Button asChild variant="outline" size="sm">
+            <Link to="/forms">{t("builder.backToForms")}</Link>
           </Button>
           {!isAccessIssue && (
             <Button variant="outline" size="sm" onClick={() => refetch()}>
@@ -557,13 +555,15 @@ export function FormBuilderPage() {
           <Tooltip>
             <TooltipTrigger asChild>
               <Button
+                asChild
                 variant="ghost"
                 size="icon"
                 className="size-10 shrink-0 active:scale-[0.96]"
-                onClick={() => navigate("/forms")}
                 aria-label={t("builder.backToForms")}
               >
-                <IconArrowLeft className="h-4 w-4" />
+                <Link to="/forms">
+                  <IconArrowLeft className="h-4 w-4" />
+                </Link>
               </Button>
             </TooltipTrigger>
             <TooltipContent>{t("builder.backToForms")}</TooltipContent>

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

@@ -22,7 +22,7 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router";
+import { Link, useNavigate } from "react-router";
 import { toast } from "sonner";
 
 import { CloudUpgrade } from "@/components/CloudUpgrade";
@@ -294,23 +294,21 @@ export function FormsListPage() {
   if (error && !forms?.length) {
     const status = (error as { status?: number })?.status;
     if (status === 401) {
+      const next = encodeURIComponent(
+        window.location.pathname + window.location.search,
+      );
       return (
         <div className="flex flex-col items-center justify-center h-full gap-3">
           <p className="text-sm text-muted-foreground">
             {t("forms.signInPrompt")}
           </p>
           <Button
+            asChild
             variant="outline"
             size="sm"
             className="min-h-10 active:scale-[0.96] transition-[background-color,box-shadow,transform]"
-            onClick={() => {
-              const next = encodeURIComponent(
-                window.location.pathname + window.location.search,
-              );
-              window.location.href = `/login?next=${next}`;
-            }}
           >
-            {t("common.signIn")}
+            <Link to={`/login?next=${next}`}>{t("common.signIn")}</Link>
           </Button>
         </div>
       );

package/corpus/templates/forms/changelog/2026-07-13-form-navigation-links-open-in-new-tabs.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Form navigation links now support opening in a new tab.

package/corpus/templates/mail/app/pages/DraftQueuePage.tsx

@@ -10,7 +10,7 @@ import {
   IconX,
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useState } from "react";
-import { useNavigate, useParams, useSearchParams } from "react-router";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router";
 import { toast } from "sonner";
 
 import { Button } from "@/components/ui/button";
@@ -732,13 +732,8 @@ export function DraftQueuePage() {
             <p className="text-sm font-medium text-foreground">
               {t("mail.draftQueue.needsOrg")}
             </p>
-            <Button
-              variant="outline"
-              size="sm"
-              className="mt-3"
-              onClick={() => navigate("/settings")}
-            >
-              {t("mail.draftQueue.openSettings")}
+            <Button asChild variant="outline" size="sm" className="mt-3">
+              <Link to="/settings">{t("mail.draftQueue.openSettings")}</Link>
             </Button>
           </div>
         </div>

package/corpus/templates/mail/changelog/2026-07-13-settings-links-open-in-new-tabs.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-13
+---
+
+Settings links now support opening in a new tab.