@agent-native/core-corpus 0.218.0 → 0.219.0

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

@@ -4188,6 +4188,15 @@ function PageEditorSessionBody({
         options.editGeneration ?? editorEditGenerationRef.current;
       const contentObservationEpoch =
         options.contentObservationEpoch ?? contentObservationEpochRef.current;
+      // Text another writer added while this save was in flight is theirs to
+      // save, so it holds back neither the confirmation nor the journal clear.
+      // An entry kept for it outlives this tab's edits, and the next tab to
+      // open the page replays it as a save of its own.
+      const settleConfirmedEdit = () => {
+        if (contentEditVersionRef.current !== contentEditVersion) return;
+        confirmedContentEditVersionRef.current = contentEditVersion;
+        clearConfirmedDraftJournal(editorEditGeneration);
+      };
       lastSavedContentRef.current = refreshUnchangedContentSaveWatermark({
         serverContent: documentContentRef.current,
         serverUpdatedAt: documentUpdatedAtRef.current,
@@ -4268,12 +4277,14 @@ function PageEditorSessionBody({
           { title, content },
           options,
         );
-        return {
-          contentPersisted:
-            !isDocumentUpdateConflict(attested) &&
-            !isDocumentUpdateSuperseded(attested) &&
-            !isDocumentUpdatePreservationRequired(attested),
-        };
+        const confirmed =
+          !isDocumentUpdateConflict(attested) &&
+          !isDocumentUpdateSuperseded(attested) &&
+          !isDocumentUpdatePreservationRequired(attested);
+        // The page already held this edit, as when a peer's save carried it,
+        // so the attestation settles it as a written save would.
+        if (confirmed) settleConfirmedEdit();
+        return { contentPersisted: confirmed };
       }
       if (!hasUpdates) {
         return { contentPersisted: !contentChanged };
@@ -4493,14 +4504,7 @@ function PageEditorSessionBody({
             : null,
         });
       }
-      // Text another writer added while this save was in flight is theirs to
-      // save, so it holds back neither the confirmation nor the journal clear.
-      // An entry kept for it outlives this tab's edits, and the next tab to
-      // open the page replays it as a save of its own.
-      if (contentEditVersionRef.current === contentEditVersion) {
-        confirmedContentEditVersionRef.current = contentEditVersion;
-        clearConfirmedDraftJournal(editorEditGeneration);
-      }
+      settleConfirmedEdit();
 
       if (autoSync) {
         const status = queryClient.getQueryData<DocumentSyncStatus>(
@@ -8692,6 +8696,7 @@ function PageEditorSessionBody({
       onActivateSuggestion={activateSuggestionOrThread}
       onSelectedThreadChange={setSelectedThreadId}
       onHoveredThreadChange={setHoveredThreadId}
+      hoveredThreadId={hoveredThreadId}
       currentUserEmail={session?.email}
       currentUserName={session?.name}
       currentUserOrgId={session?.orgId}

package/corpus/templates/content/app/components/editor/block-field-comment-threads.ts

@@ -16,6 +16,21 @@ export function commentThreadFieldId(
   return thread.field?.fieldId ?? null;
 }
 
+/**
+ * The threads the margin shows with one tab open: that tab's and the
+ * Property threads. A page without tabs shows them all.
+ */
+export function commentRailThreads<
+  T extends Pick<CommentThread, "field" | "property">,
+>(threads: readonly T[], openFieldId: string | null): T[] {
+  if (openFieldId === null && !threads.some((thread) => thread.field)) {
+    return threads as T[];
+  }
+  return threads.filter(
+    (thread) => thread.property || commentThreadFieldId(thread) === openFieldId,
+  );
+}
+
 /** A key for a tab that a Map or a filter can hold: "" is the page body. */
 export function commentTabKey(fieldId: string | null): string {
   return fieldId ?? "";

package/corpus/templates/content/app/components/editor/block-field-comments.tsx

@@ -14,6 +14,7 @@ import {
 import type { CommentThread } from "@/hooks/use-comments";
 
 import {
+  commentRailThreads,
   commentThreadFieldId,
   openReviewCountsByField,
   type BlockFieldOpenCounts,
@@ -353,15 +354,10 @@ export function useBlockFieldComments({
   }, [scrollContainerRef, tabs, targetFieldId, targetKey, targetSettled]);
 
   const allThreads = threads ?? NO_THREADS;
-  const railThreads = useMemo(() => {
-    if (openFieldId === null && !allThreads.some((thread) => thread.field)) {
-      return allThreads as CommentThread[];
-    }
-    return allThreads.filter(
-      (thread) =>
-        thread.property || commentThreadFieldId(thread) === openFieldId,
-    );
-  }, [allThreads, openFieldId]);
+  const railThreads = useMemo(
+    () => commentRailThreads(allThreads as CommentThread[], openFieldId),
+    [allThreads, openFieldId],
+  );
 
   const pendingFieldId = pendingComment?.property
     ? undefined

package/corpus/templates/content/app/components/editor/comment-stacks.ts

@@ -0,0 +1,143 @@
+import type { CommentThread } from "@/hooks/use-comments";
+
+import {
+  commentTabKey,
+  commentThreadFieldId,
+} from "./block-field-comment-threads";
+import { inHiddenBlockFieldPanel } from "./blockFieldTabs";
+
+/** Where a thread's first highlight sits: its stack, and its document order. */
+export type CommentBlockPlacement = { key: string; order: number };
+
+/** Two or more open threads in one block, in document order. */
+export type CommentStack<T> = { key: string; threads: T[] };
+
+/**
+ * The block a highlight is in, as child indexes down from its editor: the
+ * innermost list item holding it, else the editor's top-level node. A
+ * highlight outside an editor, such as a Property's, has no block.
+ */
+export function commentBlockKey(highlight: Element): string | null {
+  const block = commentBlock(highlight);
+  return block ? blockPath(block) : null;
+}
+
+function commentBlock(highlight: Element) {
+  const editor = highlight.closest(".ProseMirror");
+  if (!editor) return null;
+  const item = highlight.closest("li");
+  if (item && editor.contains(item)) return { editor, block: item };
+  let block: Element | null = highlight;
+  while (block && block.parentElement !== editor) block = block.parentElement;
+  return block ? { editor, block } : null;
+}
+
+function blockPath({ editor, block }: { editor: Element; block: Element }) {
+  const path: number[] = [];
+  for (let node: Element = block; node !== editor; ) {
+    const parent: Element | null = node.parentElement;
+    if (!parent) return null;
+    path.unshift(Array.prototype.indexOf.call(parent.children, node));
+    node = parent;
+  }
+  return path.join(".");
+}
+
+/** Block keys repeat across Blocks field tabs, so a stack's key has both. */
+export function commentStackKey(fieldId: string | null, blockKey: string) {
+  return `${commentTabKey(fieldId)}:${blockKey}`;
+}
+
+/**
+ * Each thread's first highlight on the page, in document order. Property
+ * threads, threads not listed, and highlights in a closed tab are left out.
+ */
+export function measureCommentBlocks(
+  container: ParentNode,
+  threads: readonly CommentThread[],
+): Map<string, CommentBlockPlacement> {
+  const byId = new Map(
+    threads
+      .filter((thread) => !thread.property)
+      .map((thread) => [thread.threadId, thread]),
+  );
+  const placements = new Map<string, CommentBlockPlacement>();
+  // Highlights share blocks, and a block's path walks its siblings.
+  const paths = new Map<Element, string | null>();
+  for (const highlight of container.querySelectorAll("[data-comment-thread]")) {
+    const threadId = highlight.getAttribute("data-comment-thread");
+    const thread = threadId ? byId.get(threadId) : undefined;
+    if (!thread || placements.has(thread.threadId)) continue;
+    if (inHiddenBlockFieldPanel(highlight)) continue;
+    const found = commentBlock(highlight);
+    if (!found) continue;
+    let block = paths.get(found.block);
+    if (block === undefined) {
+      block = blockPath(found);
+      paths.set(found.block, block);
+    }
+    if (block === null) continue;
+    placements.set(thread.threadId, {
+      key: commentStackKey(commentThreadFieldId(thread), block),
+      order: placements.size,
+    });
+  }
+  return placements;
+}
+
+/** The blocks holding two or more open threads, in document order. */
+export function groupCommentStacks<
+  T extends Pick<CommentThread, "threadId" | "resolved" | "property">,
+>(
+  threads: readonly T[],
+  placements: ReadonlyMap<string, CommentBlockPlacement>,
+): CommentStack<T>[] {
+  const groups = new Map<string, T[]>();
+  for (const thread of threads) {
+    if (thread.resolved || thread.property) continue;
+    const placement = placements.get(thread.threadId);
+    if (!placement) continue;
+    const members = groups.get(placement.key) ?? [];
+    members.push(thread);
+    groups.set(placement.key, members);
+  }
+  const order = (thread: T) => placements.get(thread.threadId)?.order ?? 0;
+  return [...groups]
+    .filter(([, members]) => members.length >= 2)
+    .map(([key, members]) => ({
+      key,
+      threads: members.sort((left, right) => order(left) - order(right)),
+    }))
+    .sort((left, right) => order(left.threads[0]) - order(right.threads[0]));
+}
+
+function latestCommentTime(thread: Pick<CommentThread, "comments">) {
+  let latest = -Infinity;
+  for (const comment of thread.comments) {
+    const time = Date.parse(comment.created_at);
+    if (time > latest) latest = time;
+  }
+  return latest;
+}
+
+/**
+ * The thread a folded stack shows: the one last touched, else the one with
+ * the newest comment. Ties go to the first in document order.
+ */
+export function commentStackFront<
+  T extends Pick<CommentThread, "threadId" | "comments">,
+>(threads: readonly T[], touches: ReadonlyMap<string, number>): T {
+  let front = threads[0];
+  let frontTouch = touches.get(front.threadId) ?? -Infinity;
+  let frontTime = latestCommentTime(front);
+  for (const thread of threads.slice(1)) {
+    const touch = touches.get(thread.threadId) ?? -Infinity;
+    const time = latestCommentTime(thread);
+    if (touch > frontTouch || (touch === frontTouch && time > frontTime)) {
+      front = thread;
+      frontTouch = touch;
+      frontTime = time;
+    }
+  }
+  return front;
+}

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

@@ -1645,6 +1645,14 @@ const enUS = {
     replyCount_few: "{{count}} replies",
     replyCount_many: "{{count}} replies",
     replyCount_other: "{{count}} replies",
+    stackCollapse: "Collapse",
+    stackShowAll_zero: "Show all {{count}} comments here",
+    stackShowAll_one: "Show {{count}} comment here",
+    stackShowAll_two: "Show all {{count}} comments here",
+    stackShowAll_few: "Show all {{count}} comments here",
+    stackShowAll_many: "Show all {{count}} comments here",
+    stackShowAll_other: "Show all {{count}} comments here",
+    stackMore: "+{{count}} more",
     commentActions: "Comment actions",
     checkSaved: "Check saved comment",
     edit: "Edit",

package/corpus/templates/content/changelog/2026-10-22-blocks-with-several-comment-threads-fold-into-one-stack-in-t.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-10-22
+---
+
+Blocks with several comment threads fold into one stack in the margin, which opens in place when you click it or a highlight

package/corpus/templates/content/changelog/2026-10-22-opening-a-page-no-longer-saves-an-edit-again-after-another-o.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-10-22
+---
+
+Opening a page no longer saves an edit again after another open tab's save already stored it.

package/corpus/templates/content/docs/product/capabilities/content.comment.page-owned.md

@@ -22,7 +22,7 @@ proof_requirements:
   ]
 evidence: []
 superseded_by: null
-last_reviewed: "2026-10-18"
+last_reviewed: "2026-10-22"
 ---
 
 # Comments
@@ -40,6 +40,7 @@ A reviewer comments on two Blocks in a brief, replies with a Page reference, and
 - A Comment thread is owned by one Page and may target one or several Blocks or ranges in its Blocks fields.
 - A thread on a Collection row can instead target one Property value, such as Status or a date. It records the Property's name and the value it had when the thread started. Relations, rollups, and formulas are the exception: what they show depends on who is reading, so the thread records no value and each reader sees their own current one. Once a recorded value changes, the thread shows what it was; once the Property is deleted, the thread says so. It never moves itself onto the newer value. A Property thread has no quoted text, and replies follow the ordinary thread rules.
 - A Collection table shows how many open threads each row has, and marks each cell whose Property has an open thread. The row's count opens the row's Comments. A cell's marker opens a card on the cell with that Property's open threads, where they can be read, replied to, and resolved without leaving the table, and the card can open the row at any of them. Any cell also offers a Comment button to anyone who can comment on the row, which starts a thread on its Property in the same card; on touch screens, where nothing hovers, the button shows on a selected row and starts the thread in the row's peek, or on the row's full page when the Collection opens rows as pages. Counts include only rows the viewer can read, so a row they cannot open adds nothing. One Action reads every open thread in a Collection, with each thread's row and target, so an agent need not read row by row.
+- In a Page's comment margin, a Block with two or more open threads folds into one stack. It shows the thread last clicked or rested on, else the one with the newest comment, with its reply count and the other threads' authors. Clicking the stack, or any highlight in the Block, opens it in place on that thread; Collapse or a click elsewhere folds it with that thread in front, and only one stack is open at a time. A new comment on a folded stack opens on top of it without opening it, and once posted it is the stack's front. Each Blocks-field tab keeps its own stacks; Property threads, the Comments panel, and the narrow-screen popover never stack.
 - Rich Comment bodies use the shared Blocks-field grammar; replies and mentions retain the same Page authority.
 - Anchors follow stable Block identity where possible and preserve historical target context after deletion rather than attaching to plausible new text.
 - Resolve, reopen, edit, reply, and notification operations use shared Actions and record attributable change.
@@ -75,6 +76,10 @@ Given a Comment that mentions a teammate and Claude, when it is sent, both names
 
 Given a Collection row whose Status is Blocked, when a commenter starts a thread on Status from the row's peek, the thread reads "Status · Blocked" with no "Highlight unavailable" warning, and the Status cell in the table shows a marker that opens that thread. When Status later changes to Done, the thread reads "was Blocked"; when the Property is deleted, it reads "Status (removed)". A thread started on a Property that is not on the Page, or on a Property and quoted text at once, is rejected.
 
+### Read a busy paragraph
+
+Given a paragraph with five open threads and another with one, the margin shows one stack beside the first paragraph, with the newest thread in front and "+4 more", and the single thread's card unchanged beside its own paragraph. Resting the pointer on another highlight in the first paragraph brings its thread to the front. Clicking it opens the stack on that thread with a Collapse row above; Collapse folds it again with that thread still in front. Commenting on new text in that paragraph opens the composer on top of the folded stack, and the posted comment becomes its front.
+
 ### Comment on a cell from the table
 
 Given a Collection table and a commenter who cannot edit its rows, when they hover a row's Due cell, a Comment button appears. Posting from the card it opens starts a thread that reads "Due · Nov 2, 2026" without opening the row, and the cell then shows a marker and the row's count goes up. Clicking the marker reopens the card on that thread, where it can be answered, and Open row opens the row's peek on it. When an editor resolves the thread from the same card, the marker and the count clear, and an editor who clicks the cell itself still edits its value.
@@ -137,6 +142,8 @@ A Comment AI proposal now renders in its source thread in place of the receipt r
 
 A thread can target one Property value. `content-database-comments.db.test.ts` proves the recorded name and value survive a value change, a relation's linked rows are never recorded for other readers, invalid targets are rejected, per-row and per-Property open counts follow row access and resolution, and the Collection-wide Comment read returns only readable rows. `comment-property-target.test.ts` covers how each Property type reads as text. Rich-text Property values do not yet offer a Property target; they keep body-style quoted Comments.
 
+A Block with several open threads stacks in the margin. `comment-stacks.test.ts` covers how threads group by Block and which one fronts a stack; `CommentsSidebar.stacks.test.tsx` covers folding, hover, opening from the card or a highlight, Collapse and focus, one open stack, and new comments on folded and open stacks; `CommentsSidebar.stack-tabs.test.tsx` covers Blocks-field tabs and Property threads. A recorded local run walked the "Read a busy paragraph" story with fake data.
+
 ## Proof plan
 
 1. Create, reply, mention, resolve, reopen, edit, and delete Comments through UI and Actions.

package/corpus/templates/design/.generated/bridge/interact-links.generated.ts

@@ -56,14 +56,14 @@ export const interactLinksBridgeScript: string = `"use strict";
       }
       e.preventDefault();
       try {
-        window.parent.postMessage(
-          {
-            type: "prototype-navigate",
-            href: target,
-            screen: screenName(target)
-          },
-          "*"
-        );
+        var message = {
+          type: "prototype-navigate",
+          href: target,
+          screen: screenName(target)
+        };
+        var transition = link.getAttribute("data-an-prototype-transition");
+        if (transition !== null) message.transition = transition;
+        window.parent.postMessage(message, "*");
       } catch (_err) {
         return;
       }

package/corpus/templates/design/CHANGELOG.md

@@ -5,6 +5,10 @@ from the command menu (Cmd+K → "What's new") or from Settings.
 
 ## 2026-10-22
 
+### Added
+
+- Prototype links can play code-authored screen transitions.
+
 ### Fixed
 
 - Collapsed shader layers no longer interrupt other shaders on the canvas
@@ -53,6 +57,7 @@ from the command menu (Cmd+K → "What's new") or from Settings.
 
 ### Fixed
 
+- The Design / Full app toggle on the home page no longer hides behind the Connect AI card.
 - Read-only Design views render native shader previews in nested frames.
 - Selected screens with shader effects can be exported together as a PNG
 - Shader previews stay aligned while you zoom.

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

@@ -27,6 +27,10 @@ import {
 import { editedStableSourceElement } from "@shared/code-layer";
 import type { InteractionState } from "@shared/interaction-states";
 import type { MotionEasingVariable } from "@shared/motion-easing";
+import {
+  decodeMotionPrototypeTransitionAttribute,
+  type MotionPrototypeTransitionDecodeResult,
+} from "@shared/motion-prototype-transition";
 import {
   appendPenNode,
   clonePenPath,
@@ -951,7 +955,12 @@ interface DesignCanvasProps {
   repromptDraftRequest?: RepromptDraftRequest | null;
   onRepromptDraftConsumed?: (nonce: number) => void;
   nodeRewriteCanvasTarget?: boolean;
-  onPrototypeNavigate?: (screen: string, href: string) => void;
+  onPrototypeNavigate?: (
+    screen: string,
+    href: string,
+    transition: MotionPrototypeTransitionDecodeResult,
+    sourceFrame: HTMLIFrameElement,
+  ) => void;
   motionTracks?: MotionTrackWire[];
   motionEasingVariables?: MotionEasingVariable[];
   motionDefaultEase?: string;
@@ -5775,9 +5784,16 @@ export function DesignCanvas({
         return;
       }
       if (e.data.type === "prototype-navigate") {
+        const sourceFrame = iframeRef.current;
+        if (!sourceFrame || sourceFrame.contentWindow !== e.source) return;
+        const transition = decodeMotionPrototypeTransitionAttribute(
+          e.data.transition,
+        );
         onPrototypeNavigate?.(
           String(e.data.screen || ""),
           String(e.data.href || ""),
+          transition,
+          sourceFrame,
         );
         return;
       }
@@ -8517,6 +8533,7 @@ export function DesignCanvas({
                 ? ""
                 : undefined,
             }}
+            data-an-prototype-preview={interactMode ? "" : undefined}
             data-screen-iframe-id={
               boardSurface
                 ? undefined

package/corpus/templates/design/app/components/design/bridge/interact-links.bridge.ts

@@ -92,14 +92,14 @@
 
     e.preventDefault();
     try {
-      (window.parent as Window).postMessage(
-        {
-          type: "prototype-navigate",
-          href: target,
-          screen: screenName(target),
-        },
-        "*",
-      );
+      var message: Record<string, unknown> = {
+        type: "prototype-navigate",
+        href: target,
+        screen: screenName(target),
+      };
+      var transition = link.getAttribute("data-an-prototype-transition");
+      if (transition !== null) message.transition = transition;
+      (window.parent as Window).postMessage(message, "*");
     } catch (_err) {
       // coercion-ok: the editor is gone, so there is no screen to switch to.
       return;

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

@@ -684,6 +684,14 @@ export default function PromptPopover({
   const showCreativeContextPicker =
     Boolean(onCreativeContextChange) &&
     (creativeContextsLoading || creativeContexts.length > 0);
+  const creationModeToggle =
+    creationMode && onCreationModeChange ? (
+      <CreationModeToggle
+        mode={creationMode}
+        onChange={onCreationModeChange}
+        disabled={loading || uploading || submitting}
+      />
+    ) : null;
   const Composer = composerComponent ?? LazyPromptComposer;
   const promptComposer = (
     <Composer
@@ -729,25 +737,19 @@ export default function PromptPopover({
           : `seed:${initialTextKey ?? 0}`
       }
       contextMenuItems={contextMenuItems ?? []}
+      // Inside the composer so an attached setup card above meets the box directly.
+      toolbarSlot={inline ? creationModeToggle : undefined}
     />
   );
 
   const content = (
     <>
-      {(!inline || creationMode) && (
+      {!inline && (
         <div className="flex items-center justify-between gap-2 px-3.5 pt-3 pb-2">
-          {!inline && (
-            <span className="text-sm font-medium text-foreground/90">
-              {title}
-            </span>
-          )}
-          {creationMode && onCreationModeChange ? (
-            <CreationModeToggle
-              mode={creationMode}
-              onChange={onCreationModeChange}
-              disabled={loading || uploading || submitting}
-            />
-          ) : null}
+          <span className="text-sm font-medium text-foreground/90">
+            {title}
+          </span>
+          {creationModeToggle}
         </div>
       )}
 

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

@@ -1459,7 +1459,7 @@ export default {
       sourceWriteUnavailable:
         "Motion code can currently be written only to inline HTML designs.",
       unresolvedStylesheets:
-        "Resolve external stylesheets before editing or adding Motion.",
+        "Resolve external or runtime-generated styles before editing or adding Motion.",
       sourceConflict:
         "Motion source changed while this timeline had unsaved edits. Reload from code to discard those edits and use the current source.",
       reloadFromSource: "Reload from code",

package/corpus/templates/design/app/pages/design-editor/domains/use-editor-modes.ts

@@ -45,6 +45,7 @@ import {
   getScreenFrameOriginCanvas,
   shouldPopToOverviewOnZoomChange,
 } from "../overview-camera";
+import { cancelPrototypeNavigationTransition } from "../prototype-navigation-transition";
 import { computeInteractZoomToFit } from "../responsive-interact";
 import { hasSelectableCodeLayerParent } from "../selection-state";
 import {
@@ -306,8 +307,11 @@ export function useEditorModes({
   }, []);
 
   const focusOverviewScreen = useCallback(
-    (screenId: string) => {
+    (screenId: string, options?: { fromPrototypeNavigation?: boolean }) => {
       if (!files.some((file) => file.id === screenId)) return;
+      if (!options?.fromPrototypeNavigation) {
+        cancelPrototypeNavigationTransition();
+      }
       const geometry = exportCanvasFrameGeometryById[screenId];
       const plan = geometry
         ? getFocusedScreenNavigationPlan({
@@ -507,9 +511,12 @@ export function useEditorModes({
         pendingLiveEditsAlreadyHandled?: boolean;
         targetFileId?: string;
         keepInteractDevice?: boolean;
+        fromPrototypeNavigation?: boolean;
       },
-    ) =>
-      runModeChange(
+    ) => {
+      const { fromPrototypeNavigation, ...modeOptions } = options ?? {};
+      if (!fromPrototypeNavigation) cancelPrototypeNavigationTransition();
+      return runModeChange(
         {
           activeFile,
           annotateLab,
@@ -548,8 +555,9 @@ export function useEditorModes({
           viewModeRef,
         },
         next,
-        options,
-      ),
+        options ? modeOptions : undefined,
+      );
+    },
     [
       activeFile,
       annotateLab,
@@ -707,7 +715,8 @@ export function useEditorModes({
   ]);
 
   const handleSidebarScreenSelect = useCallback(
-    (screenId: string) => focusOverviewScreen(screenId),
+    (screenId: string, options?: { fromPrototypeNavigation?: boolean }) =>
+      focusOverviewScreen(screenId, options),
     [focusOverviewScreen],
   );
 

package/corpus/templates/design/app/pages/design-editor/domains/use-editor-screen-rendering.tsx

@@ -1,5 +1,6 @@
 import { openCommandMenu } from "@agent-native/toolkit/app/shared";
 import { isBoardFile } from "@shared/board-file";
+import type { MotionPrototypeTransitionDecodeResult } from "@shared/motion-prototype-transition";
 import { isRunningAppSourceType } from "@shared/source-mode";
 import { useState, useEffect, useCallback } from "react";
 import { toast } from "sonner";
@@ -43,6 +44,10 @@ import {
   resolveOverviewScreenSourceType,
   shouldUseRuntimeLayerProjection,
 } from "../pending-edits";
+import {
+  getPrototypeDestinationFrameId,
+  runPrototypeNavigationTransition,
+} from "../prototype-navigation-transition";
 import { findInteractLinkTarget } from "../screen-command-utils";
 import {
   getContentSignature,
@@ -451,17 +456,36 @@ export function useEditorScreenRendering({
   // A link to another screen in the Interact preview switches the previewed
   // screen, keeping Interact and its device, the same hop the screen picker makes.
   const handleInteractLinkNavigate = useCallback(
-    (screen: string) => {
+    (
+      screen: string,
+      _href: string,
+      transition: MotionPrototypeTransitionDecodeResult,
+      sourceFrame: HTMLIFrameElement,
+    ) => {
       const target = findInteractLinkTarget(
         files,
         screen,
         activeFileIdRef.current,
       );
       if (!target) return;
-      handleModeChange("interact", {
-        targetFileId: target.id,
-        keepInteractDevice: true,
-      });
+      runPrototypeNavigationTransition(
+        transition.status === "valid" ? transition.transition : undefined,
+        () => {
+          handleModeChange("interact", {
+            targetFileId: target.id,
+            keepInteractDevice: true,
+            fromPrototypeNavigation: true,
+          });
+        },
+        undefined,
+        {
+          sourceFrame,
+          destinationFrameId: getPrototypeDestinationFrameId(
+            target.id,
+            sourceFrame,
+          ),
+        },
+      );
     },
     [files, handleModeChange],
   );