@agent-native/core-corpus 0.217.0 → 0.219.0

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-16-accepting-a-suggestion-on-a-page-that-changed-since-it-was-s.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-10-16
+---
+
+Accepting a suggestion on a Page that changed since it was suggested no longer shows "Something went wrong"

package/corpus/templates/content/changelog/2026-10-20-suggested-edits-that-add-remove-split-or-merge-paragraphs-li.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-10-20
+---
+
+Suggested edits that add, remove, split, or merge paragraphs, line breaks, and list items now show where the break goes and save as one clear suggestion

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/content/shared/suggestion-diff.ts

@@ -483,6 +483,9 @@ function diffTokens(text: string): string[] {
 // is no longer than either, as diff-match-patch's semantic cleanup does.
 // Equalities between replacements stay, so separate word swaps remain
 // separately reviewable, and a line never folds, so blocks stay separate.
+// The exception is a line the merged run begins or ends with: that is one
+// insertion (text plus a new paragraph) Myers aligned across the existing
+// separator, and it would otherwise split whenever another hunk exists.
 type ChangeRun = {
   deleted: string;
   inserted: string;
@@ -518,12 +521,17 @@ function foldShortEqualities(parts: DiffPart[]): DiffPart[] {
     const right = segments[index + 1];
     if (typeof equality !== "string" || typeof left !== "object") continue;
     if (typeof right !== "object") continue;
+    const insertions = left.ownDeleted === 0 && right.ownDeleted === 0;
     const oneSided =
-      (left.ownDeleted === 0 && right.ownDeleted === 0) ||
-      (left.ownInserted === 0 && right.ownInserted === 0);
+      insertions || (left.ownInserted === 0 && right.ownInserted === 0);
+    const merged = insertions
+      ? left.inserted + equality + right.inserted
+      : left.deleted + equality + right.deleted;
     if (
       !oneSided ||
-      equality.includes("\n") ||
+      (equality.includes("\n") &&
+        !merged.startsWith(equality) &&
+        !merged.endsWith(equality)) ||
       equality.length > Math.max(left.ownDeleted, left.ownInserted) ||
       equality.length > Math.max(right.ownDeleted, right.ownInserted)
     )
@@ -814,16 +822,24 @@ function wholeWordReplacements(
     const removed = operation.before.changedText;
     const inserted = operation.after.changedText;
     const lexicalChange = /[\p{L}\p{M}\p{N}]/u.test(removed + inserted);
+    // An edge that is a line break, as when a whole paragraph is deleted,
+    // sits beside the neighboring block's word without splitting it.
+    const lineEdge = (edge: (text: string) => boolean) =>
+      edge(removed) && (!inserted || edge(inserted));
+    const widensBefore =
+      isWordBefore(before, from) && !lineEdge((text) => text.startsWith("\n"));
+    const widensAfter =
+      isWordAt(before, to) && !lineEdge((text) => text.endsWith("\n"));
     let group = { from, to, members: [operation] };
     if (
       lexicalChange &&
       !/<br\/?\s*>/u.test(removed + inserted) &&
       (removed || !/\s/u.test(inserted)) &&
-      (isWordBefore(before, from) || isWordAt(before, to))
+      (widensBefore || widensAfter)
     ) {
-      while (isWordBefore(before, group.from))
+      while (widensBefore && isWordBefore(before, group.from))
         group.from -= characterBefore(before, group.from).length;
-      while (isWordAt(before, group.to))
+      while (widensAfter && isWordAt(before, group.to))
         group.to += characterAt(before, group.to).length;
     }
     // Two edits inside one word are one review decision.
@@ -1022,6 +1038,7 @@ export function markdownSuggestionOperationsForReplacements(input: {
     const [{ from, to }] = replacements;
     if (
       operations.length > 1 &&
+      !before.slice(from, to).includes("\n") &&
       operations.every(
         (operation) =>
           operation.anchor.from >= from && operation.anchor.to <= to,

package/corpus/templates/content/shared/suggestion-formatting.ts

@@ -650,12 +650,21 @@ function resolveVerbatimRun(
 export type SuggestionFormattingSlicePart =
   | { type: "text"; text: string; marks: NonNullable<PMNode["marks"]> }
   | { type: "break"; text: string }
-  | { type: "indent"; text: string };
+  | { type: "indent"; text: string }
+  | { type: "block"; text: string };
 
+const EMPTY_BLOCK = "<empty-block/>";
+// The syntax that opens a line's block: a heading, list item, task, or quote.
+const BLOCK_MARKER = /^(?:#{1,6} |(?:> )+|[-*+] (?:\[[ xX]\] )?|\d+[.)] )/;
+
+// `blocks` admits block syntax and empty paragraphs. Without it a gap holds
+// only line breaks and indentation, which is what places a zero-width
+// boundary on one side of a gap or the other.
 function structuralGapParts(
   source: string,
   from: number,
   to: number,
+  blocks = true,
 ): SuggestionFormattingSlicePart[] | null {
   const parts: SuggestionFormattingSlicePart[] = [];
   let offset = from;
@@ -678,15 +687,36 @@ function structuralGapParts(
         source.lastIndexOf("\r", offset - 1),
       ) + 1;
     const atLineStart = /^\t*$/.test(source.slice(lineStart, offset));
-    if (!atLineStart || source[offset] !== "\t") return null;
-    const indentFrom = offset;
-    while (offset < to && source[offset] === "\t") offset += 1;
-    parts.push({
-      type: "indent",
-      text: "⇥".repeat(offset - indentFrom),
-    });
-    const heading = /^(?:#{1,6}) /.exec(source.slice(offset, to));
-    if (heading) offset += heading[0].length;
+    if (!atLineStart) return null;
+    if (source[offset] === "\t") {
+      const indentFrom = offset;
+      while (offset < to && source[offset] === "\t") offset += 1;
+      parts.push({
+        type: "indent",
+        text: "⇥".repeat(offset - indentFrom),
+      });
+      const heading = /^(?:#{1,6}) /.exec(source.slice(offset, to));
+      if (heading) offset += heading[0].length;
+      continue;
+    }
+    if (!blocks) return null;
+    // An empty paragraph or a block's opening syntax has no text of its own,
+    // so it is shown as written: a pilcrow for the paragraph, the marker
+    // otherwise. A marker is only whole when the slice holds all of it.
+    const lineEnd = offset + EMPTY_BLOCK.length;
+    if (
+      source.startsWith(EMPTY_BLOCK, offset) &&
+      lineEnd <= to &&
+      (lineEnd === source.length || /[\r\n]/.test(source[lineEnd]!))
+    ) {
+      parts.push({ type: "block", text: "¶" });
+      offset = lineEnd;
+      continue;
+    }
+    const marker = BLOCK_MARKER.exec(source.slice(offset, to));
+    if (!marker) return null;
+    parts.push({ type: "block", text: marker[0] });
+    offset += marker[0].length;
   }
   return parts;
 }
@@ -894,7 +924,7 @@ export function suggestionFormattingSourceRange(
         sourceTo: run.sourceFrom,
         offset: run.from,
         structural: Boolean(
-          structuralGapParts(source, previousSourceTo, run.sourceFrom),
+          structuralGapParts(source, previousSourceTo, run.sourceFrom, false),
         ),
         afterText: index > 0,
         beforeText: true,
@@ -910,7 +940,7 @@ export function suggestionFormattingSourceRange(
       sourceTo: source.length,
       offset: previousTextTo,
       structural: Boolean(
-        structuralGapParts(source, previousSourceTo, source.length),
+        structuralGapParts(source, previousSourceTo, source.length, false),
       ),
       afterText: mapped.runs.length > 0,
       beforeText: false,
@@ -983,13 +1013,13 @@ export function suggestionFormattingSourceRange(
       if (
         gap.afterText &&
         offset > gap.sourceFrom &&
-        structuralGapParts(source, gap.sourceFrom, offset)
+        structuralGapParts(source, gap.sourceFrom, offset, false)
       )
         candidates.push({ offset: gap.offset, affinity: "left" });
       if (
         gap.beforeText &&
         offset < gap.sourceTo &&
-        (structuralGapParts(source, offset, gap.sourceTo) ||
+        (structuralGapParts(source, offset, gap.sourceTo, false) ||
           !/[\r\n]/.test(opening) ||
           (gap.beforeCode && /^[^\r\n]*\r?\n$/.test(opening)))
       )

package/corpus/templates/content/shared/suggestion-text.ts

@@ -11,6 +11,8 @@ export type SuggestionPresentationContext = {
 export type SuggestionPresentationNode =
   | { type: "text"; value: string }
   | { type: "indent"; value: string }
+  | { type: "block"; value: string }
+  | { type: "lineBreak" }
   | {
       type: "strong" | "emphasis" | "strike" | "code" | "underline";
       children: SuggestionPresentationNode[];
@@ -120,7 +122,12 @@ function stripInlineContext(
       const value = node.value.slice(context.length);
       return value ? { type: "text", value } : null;
     }
-    if (node.type === "indent") return node;
+    if (
+      node.type === "indent" ||
+      node.type === "block" ||
+      node.type === "lineBreak"
+    )
+      return node;
     const children = node.children.flatMap((child) => {
       const strippedChild = stripNode(child);
       return strippedChild ? [strippedChild] : [];
@@ -246,11 +253,19 @@ function computeSuggestionTextPresentationForSource(
       ? text.replace(/ /g, "·").replace(/\t/g, "⇥")
       : text
     ).replace(/\n/g, "↵");
-  return parts.flatMap((part) =>
-    part.type === "indent"
-      ? [{ type: "indent" as const, value: part.text }]
+  // A line break beside text breaks the line; on its own it stays a visible ↵.
+  const breaksLines = parts.some(
+    (part) => part.type === "text" && /\S/.test(part.text),
+  );
+  return parts.flatMap((part): SuggestionPresentationNode[] =>
+    part.type === "indent" || part.type === "block"
+      ? [{ type: part.type, value: part.text }]
       : part.type === "break"
-        ? [{ type: "text" as const, value: part.text }]
+        ? [
+            breaksLines
+              ? { type: "lineBreak" }
+              : { type: "text", value: part.text },
+          ]
         : presentationNode(
             { type: "text", text: visibleText(part.text), marks: part.marks },
             (text) => text,

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
@@ -15,10 +19,12 @@ from the command menu (Cmd+K → "What's new") or from Settings.
 
 ### Added
 
+- A Getting started checklist at the bottom of the sidebar tracks your first design, brand, sharing, teammates, and templates, and checks steps off as you finish them
 - Pulsing Border adds moving color highlights along an element’s outline, with concentrated bright cores, colored falloff, and controls for motion and shape.
 
 ### Improved
 
+- Templates now open a read-only preview from the card, and the home library shows more starters, including dashboard, messaging, task board and design studio screens.
 - Effect thumbnails now show how shaders treat the Agent-Native mark against a quiet tonal background, making their differences easier to judge.
 - Native shader previews use less GPU memory when many mesh effects are visible.
 - Pulsing Border uses the standard Linear and Angular gradient picker for its moving border colors, with up to eight editable stops and a separate Background color. Thickness sets the bright edge, Softness feathers it, Bloom adjusts glow brightness, and Glow spread sets the halo radius. Smoke, margins, offsets, and layout settings stay grouped in collapsible sections.
@@ -51,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.
@@ -128,6 +135,7 @@ from the command menu (Cmd+K → "What's new") or from Settings.
 
 ### Improved
 
+- Design pages use localized visibility badges and a shared ownership filter.
 - Animated shader fills render together more efficiently and pause work outside the visible canvas.
 - Shader property sliders preview changes while dragging
 - Canvas selection, layer controls, text insertion, grouping, and auto-layout behave more predictably.

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/DesignSystems.tsx

@@ -14,7 +14,7 @@ import {
   useSetPageTitle,
 } from "@agent-native/toolkit/app-shell";
 import { ShareButton } from "@agent-native/toolkit/app/sharing";
-import { VisibilityBadge } from "@agent-native/toolkit/sharing";
+import { VisibilityBadge } from "@agent-native/toolkit/app/sharing/VisibilityBadge";
 import {
   IconCheckbox,
   IconChecks,

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

@@ -36,13 +36,13 @@ import {
   type TiptapComposerHandle,
 } from "@agent-native/toolkit/app/chat/composer/index";
 import { ClientOnly } from "@agent-native/toolkit/app/shared";
+import { OwnershipFilter } from "@agent-native/toolkit/app/sharing/OwnershipFilter";
 import { designTemplateRetryKey } from "@shared/design-template-retry";
 import { FULL_APP_BUILDING_LAB } from "@shared/labs";
 import { derivePromptTitle } from "@shared/prompt-title";
 import {
   IconArrowRight,
   IconChecks,
-  IconChevronDown,
   IconChevronLeft,
   IconChevronRight,
   IconPlus,
@@ -91,8 +91,6 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
@@ -616,11 +614,6 @@ export default function Index() {
       ? chosenDesignSystemId
       : templateDesignSystemId;
 
-  const ownerFilterLabels: Record<DesignFilter, string> = {
-    all: t("home.ownedByAnyone"),
-    mine: t("home.ownedByMe"),
-    "not-mine": t("home.sharedWithMe"),
-  };
   const showAuthors = designFilter !== "mine";
   const selectedDesignCount = selectedDesignIds.size;
   const isSelectingDesigns = selectedDesignCount > 0;
@@ -743,17 +736,19 @@ export default function Index() {
     );
   }, []);
 
-  const handleDesignFilterChange = useCallback((next: string) => {
-    if (next !== "all" && next !== "mine" && next !== "not-mine") return;
-    designFilterWasSelectedRef.current = true;
-    const nextFilter: DesignFilter = next;
-    setDesignFilter(nextFilter);
-    writeStoredDesignFilter(nextFilter);
-    setPage(1);
-    setSelectedDesignIds((current) =>
-      current.size === 0 ? current : new Set(),
-    );
-  }, []);
+  const handleDesignFilterChange = useCallback(
+    (next: "all" | "mine" | "shared") => {
+      designFilterWasSelectedRef.current = true;
+      const nextFilter: DesignFilter = next === "shared" ? "not-mine" : next;
+      setDesignFilter(nextFilter);
+      writeStoredDesignFilter(nextFilter);
+      setPage(1);
+      setSelectedDesignIds((current) =>
+        current.size === 0 ? current : new Set(),
+      );
+    },
+    [],
+  );
 
   useEffect(() => {
     if (
@@ -1572,51 +1567,10 @@ export default function Index() {
             }
             search={searchInput}
             recentActions={
-              <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    aria-label={ownerFilterLabels[designFilter]}
-                    className="h-9 shrink-0 gap-2"
-                  >
-                    <span className="grid">
-                      {Object.entries(ownerFilterLabels).map(
-                        ([filter, label]) => (
-                          <span
-                            key={filter}
-                            aria-hidden="true"
-                            className="invisible col-start-1 row-start-1 whitespace-nowrap"
-                          >
-                            {label}
-                          </span>
-                        ),
-                      )}
-                      <span className="col-start-1 row-start-1 whitespace-nowrap">
-                        {ownerFilterLabels[designFilter]}
-                      </span>
-                    </span>
-                    <IconChevronDown className="size-4" aria-hidden="true" />
-                  </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="start">
-                  <DropdownMenuRadioGroup
-                    value={designFilter}
-                    onValueChange={handleDesignFilterChange}
-                  >
-                    <DropdownMenuRadioItem value="all" indicator="check">
-                      {ownerFilterLabels.all}
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="mine" indicator="check">
-                      {ownerFilterLabels.mine}
-                    </DropdownMenuRadioItem>
-                    <DropdownMenuRadioItem value="not-mine" indicator="check">
-                      {ownerFilterLabels["not-mine"]}
-                    </DropdownMenuRadioItem>
-                  </DropdownMenuRadioGroup>
-                </DropdownMenuContent>
-              </DropdownMenu>
+              <OwnershipFilter
+                value={designFilter === "not-mine" ? "shared" : designFilter}
+                onChange={handleDesignFilterChange}
+              />
             }
             templates={
               templatesError ? (