@agent-native/core 0.95.0 → 0.96.0

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

@@ -50,7 +50,6 @@ import {
 } from "@/hooks/use-notion";
 import {
   canWriteLinkedLocalSource,
-  readDocumentFromLinkedLocalSource,
   writeDocumentToLinkedLocalSource,
 } from "@/lib/local-content-source-files";
 import { cn } from "@/lib/utils";
@@ -538,71 +537,6 @@ function DocumentEditorBody({ documentId, document }: DocumentEditorBodyProps) {
     }
   }, [document, documentId]);
 
-  useEffect(() => {
-    if (!isInitializedRef.current || !isLinkedLocalSourceDocument) {
-      return;
-    }
-
-    let cancelled = false;
-    readDocumentFromLinkedLocalSource(document)
-      .then((result) => {
-        if (cancelled) return;
-        if (!result.ok) {
-          toast.error(t("editor.couldNotReadLocalSourceFile"), {
-            description: result.error,
-          });
-          return;
-        }
-
-        const fileDocument = result.document;
-        setLocalTitle(fileDocument.title);
-        setLocalContent(fileDocument.content);
-        setLocalContentUpdatedAt(result.updatedAt);
-        lastSavedTitleRef.current = {
-          title: fileDocument.title,
-          updatedAt: result.updatedAt,
-        };
-        lastSavedContentRef.current = {
-          content: fileDocument.content,
-          updatedAt: result.updatedAt,
-        };
-        queryClient.setQueryData(
-          ["action", "get-document", { id: documentId }],
-          (old: Document | undefined) =>
-            old && typeof old === "object" ? { ...old, ...fileDocument } : old,
-        );
-        queryClient.setQueryData(
-          ["action", "list-documents", undefined],
-          (old: any) => {
-            const docs = old?.documents ?? (Array.isArray(old) ? old : null);
-            if (!Array.isArray(docs)) return old;
-            const nextDocs = docs.map((doc: Document) =>
-              doc.id === documentId ? { ...doc, ...fileDocument } : doc,
-            );
-            return Array.isArray(old)
-              ? nextDocs
-              : { ...old, documents: nextDocs };
-          },
-        );
-      })
-      .catch((error) => {
-        if (cancelled) return;
-        toast.error(t("editor.couldNotReadLocalSourceFile"), {
-          description:
-            error instanceof Error ? error.message : t("empty.genericError"),
-        });
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [
-    documentId,
-    document.source?.path,
-    isLinkedLocalSourceDocument,
-    queryClient,
-  ]);
-
   // NOTE: External body changes (agent edit, Notion pull, update-document) are
   // reconciled into the editor by VisualEditor via its content prop + the
   // updatedAt gate. The effects below keep DocumentEditor's own mirror

package/corpus/templates/content/app/routes/_app.local-files.tsx

@@ -814,13 +814,6 @@ export default function LocalFilesRoute() {
             count: restoredDirectories.length,
           }),
         });
-        await pullDirectories(restoredDirectories, {
-          showToast: false,
-          syncControlResources: false,
-        });
-        await connectLocalComponentWorkspaces(restoredDirectories, {
-          showToast: false,
-        });
         return;
       }
 
@@ -835,13 +828,6 @@ export default function LocalFilesRoute() {
           count: restoredDirectories.length,
         }),
       });
-      await pullDirectories(restoredDirectories, {
-        showToast: false,
-        syncControlResources: false,
-      });
-      await connectLocalComponentWorkspaces(restoredDirectories, {
-        showToast: false,
-      });
     };
     restoreDirectories()
       .catch((err) => {
@@ -943,32 +929,6 @@ export default function LocalFilesRoute() {
     return { directories: nextDirectories, result };
   }
 
-  async function pullDirectories(
-    selectedDirectories: SelectedDirectory[],
-    {
-      showToast = true,
-      syncControlResources = true,
-    }: { showToast?: boolean; syncControlResources?: boolean } = {},
-  ) {
-    let activeDirectories = selectedDirectories;
-    let latestResult: ImportContentSourceResult | null = null;
-    for (const directory of selectedDirectories) {
-      const pulled = await pullDirectoryFiles(directory, activeDirectories, {
-        syncControlResources,
-      });
-      latestResult = pulled.result;
-      activeDirectories = pulled.directories;
-    }
-    if (latestResult) {
-      setStatus({
-        kind: "success",
-        title: t("localFiles.foldersPulled"),
-        detail: resultSummary(latestResult, t),
-      });
-      if (showToast) toast.success(t("localFiles.pulledLocalFiles"));
-    }
-  }
-
   async function connectLocalComponentWorkspaces(
     selectedDirectories: SelectedDirectory[],
     { showToast = true }: { showToast?: boolean } = {},
@@ -1029,7 +989,13 @@ export default function LocalFilesRoute() {
       });
 
       setBusy(`pull:${selected.id}`);
-      await pullDirectories(nextDirectories);
+      const { result } = await pullDirectoryFiles(selected, nextDirectories);
+      setStatus({
+        kind: "success",
+        title: t("localFiles.foldersPulled"),
+        detail: resultSummary(result, t),
+      });
+      toast.success(t("localFiles.pulledLocalFiles"));
       await connectLocalComponentWorkspaces([selected]);
     } catch (err) {
       setStatus({
@@ -1171,12 +1137,6 @@ export default function LocalFilesRoute() {
         title: t("localFiles.folderRemoved"),
         detail: directory.name,
       });
-      if (nextDirectories.length === 1) {
-        await pullDirectories(nextDirectories, {
-          showToast: false,
-          syncControlResources: false,
-        });
-      }
     } catch (err) {
       setStatus({
         kind: "error",

package/corpus/templates/content/changelog/2026-07-10-local-folders-now-wait-for-an-explicit-pull-before-content-r.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-10
+---
+
+Local folders now wait for an explicit pull before Content reads them

package/corpus/templates/content/package.json

@@ -81,7 +81,7 @@
     "@swc/core": "^1.13.3",
     "@tailwindcss/typography": "^0.5.16",
     "@tailwindcss/vite": "catalog:",
-    "@tanstack/react-query": "^5.99.2",
+    "@tanstack/react-query": "5.101.2",
     "@types/node": "^24.2.1",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",

package/corpus/templates/design/actions/generate-design.ts

@@ -33,6 +33,7 @@ import {
   updateGenerationSessionWithSavedFiles,
 } from "../shared/generation-session.js";
 import { assertLockedLayersPreserved } from "../shared/locked-layers.js";
+import { widthToPrefix } from "../shared/responsive-classes.js";
 import { annotateScreenHtmlForPersist } from "../shared/screen-annotation.js";
 
 /** Editor deep link so external agents can surface "Open design". */
@@ -54,6 +55,43 @@ function isRenderableDesignFile(file: {
   );
 }
 
+type GenerationViewport = "mobile" | "tablet" | "desktop";
+
+const DEFAULT_GENERATION_VIEWPORT: GenerationViewport = "desktop";
+const GENERATION_VIEWPORT_SIZES: Record<
+  GenerationViewport,
+  { width: number; height: number }
+> = {
+  mobile: { width: 390, height: 844 },
+  tablet: { width: 768, height: 1024 },
+  desktop: { width: 1440, height: 1024 },
+};
+const GENERATED_FRAME_GAP = 96;
+const DEFAULT_RESPONSIVE_BREAKPOINTS = [390, 768, 1440].map((widthPx) => ({
+  id: `generated-${widthPx}`,
+  label: widthPx === 390 ? "Mobile" : widthPx === 768 ? "Tablet" : "Desktop",
+  widthPx,
+  prefix: widthToPrefix(widthPx),
+}));
+
+function hasBreakpointSet(value: unknown): boolean {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+  const breakpoints = (value as { breakpoints?: unknown }).breakpoints;
+  return Array.isArray(breakpoints) && breakpoints.length > 0;
+}
+
+function nextGeneratedFrameX(
+  frames: ReturnType<typeof parseCanvasFrameGeometryById>,
+): number {
+  return Object.values(frames).reduce((furthestRight, frame) => {
+    const x = frame.x ?? 0;
+    const width = frame.width ?? 0;
+    return Math.max(furthestRight, x + width + GENERATED_FRAME_GAP);
+  }, 0);
+}
+
 function jsonValuesEqual(left: unknown, right: unknown): boolean {
   return JSON.stringify(left) === JSON.stringify(right);
 }
@@ -149,7 +187,15 @@ const generateDesignAgentParameters = {
     canvasFrames: {
       type: "string",
       description:
-        "Optional JSON array of overview-canvas placements keyed by filename or fileId.",
+        "Optional JSON array of overview-canvas placements keyed by filename or fileId. " +
+        "Pass explicit x/y/width/height for every generated screen; desktop is 1440x1024.",
+    },
+    primaryViewport: {
+      type: "string",
+      enum: ["mobile", "tablet", "desktop"],
+      description:
+        "The requested primary form factor. Defaults to desktop (1440x1024). " +
+        "Set this from the intake answer when no explicit canvasFrames placement is supplied.",
     },
   },
   required: ["designId", "prompt", "files"],
@@ -171,6 +217,9 @@ const generateDesignAction = defineAction({
     "When `designSystemId` is provided, first use `get-design-system` and apply " +
     "its `agentContext` tokens/docs before writing the file content; do not " +
     "treat the id alone as enough design-system context. " +
+    "Every web design must be responsive. Use a desktop 1440x1024 primary " +
+    "canvas by default, or set `primaryViewport` for an explicitly mobile- or " +
+    "tablet-primary design; this action adds responsive editor breakpoints. " +
     "Do not report a design as ready until this action succeeds. " +
     "When adding multiple screens or states, pass canvasFrames with filenames " +
     "and x/y/width/height so the new screens appear placed on the overview canvas.",
@@ -304,6 +353,14 @@ const generateDesignAction = defineAction({
           "Reference each screen by filename or fileId and include x/y/width/height " +
           "from generate-screens regions or your planned canvas layout.",
       ),
+    primaryViewport: z
+      .enum(["mobile", "tablet", "desktop"])
+      .optional()
+      .default(DEFAULT_GENERATION_VIEWPORT)
+      .describe(
+        "Primary generated viewport. Defaults to desktop (1440x1024); set " +
+          "mobile or tablet only when that is the requested form factor.",
+      ),
   }),
   mcpApp: {
     compactCatalog: true,
@@ -323,6 +380,7 @@ const generateDesignAction = defineAction({
     projectType,
     tweaks,
     canvasFrames,
+    primaryViewport,
   }) => {
     await assertAccess("design", designId, "editor");
     if (designSystemId) {
@@ -515,7 +573,7 @@ const generateDesignAction = defineAction({
     }));
     await mutateDesignData({
       designId,
-      mutate: (prevData) => {
+      mutate: (prevData, { updatedAt }) => {
         const mergedData: Record<string, unknown> = {
           ...prevData,
           lastPrompt: prompt,
@@ -525,34 +583,74 @@ const generateDesignAction = defineAction({
         if (normalizedTweaks !== undefined) {
           mergedData.tweaks = normalizedTweaks;
         }
-        if (canvasFrames !== undefined) {
-          const savedByFileId = new Map(
-            savedFiles.map((file) => [file.id, file]),
-          );
-          const savedByFilename = new Map(
-            savedFiles.map((file) => [file.filename, file]),
-          );
-          const existingByFileId = new Map(
-            existingFiles.map((file) => [file.id, file]),
-          );
-          const merged = mergeCanvasFramePlacements({
-            existing: prevData.canvasFrames,
-            placements: canvasFrames,
-            resolveFileId: (placement) => {
-              if (placement.fileId) {
-                return savedByFileId.has(placement.fileId) ||
-                  existingByFileId.has(placement.fileId)
-                  ? placement.fileId
-                  : undefined;
-              }
-              return placement.filename
-                ? (savedByFilename.get(placement.filename)?.id ??
-                    existingByName.get(placement.filename)?.id)
+        const savedByFileId = new Map(
+          savedFiles.map((file) => [file.id, file]),
+        );
+        const savedByFilename = new Map(
+          savedFiles.map((file) => [file.filename, file]),
+        );
+        const existingByFileId = new Map(
+          existingFiles.map((file) => [file.id, file]),
+        );
+        const merged = mergeCanvasFramePlacements({
+          existing: prevData.canvasFrames,
+          placements: canvasFrames ?? [],
+          resolveFileId: (placement) => {
+            if (placement.fileId) {
+              return savedByFileId.has(placement.fileId) ||
+                existingByFileId.has(placement.fileId)
+                ? placement.fileId
                 : undefined;
-            },
+            }
+            return placement.filename
+              ? (savedByFilename.get(placement.filename)?.id ??
+                  existingByName.get(placement.filename)?.id)
+              : undefined;
+          },
+        });
+        const viewport = GENERATION_VIEWPORT_SIZES[primaryViewport];
+        let nextX = nextGeneratedFrameX(merged.canvasFrames);
+        const generationFrames = [...merged.placedFrames];
+        for (const file of savedFiles) {
+          const source = files.find(
+            (candidate) => candidate.filename === file.filename,
+          );
+          if (!source || !isRenderableDesignFile(source)) continue;
+          const current = merged.canvasFrames[file.id] ?? {};
+          if (
+            current.x !== undefined &&
+            current.y !== undefined &&
+            current.width !== undefined &&
+            current.height !== undefined
+          ) {
+            continue;
+          }
+          const frame = {
+            x: current.x ?? nextX,
+            y: current.y ?? 0,
+            width: current.width ?? viewport.width,
+            height: current.height ?? viewport.height,
+            z: current.z ?? generationFrames.length,
+            ...(current.rotation === undefined
+              ? {}
+              : { rotation: current.rotation }),
+          };
+          merged.canvasFrames[file.id] = frame;
+          generationFrames.push({
+            fileId: file.id,
+            filename: file.filename,
+            frame,
           });
-          mergedData.canvasFrames = merged.canvasFrames;
-          placedFrames = merged.placedFrames;
+          nextX = frame.x + frame.width + GENERATED_FRAME_GAP;
+        }
+        mergedData.canvasFrames = merged.canvasFrames;
+        placedFrames = generationFrames;
+        if (!hasBreakpointSet(mergedData.breakpointSet)) {
+          mergedData.breakpointSet = {
+            id: "generated-responsive",
+            breakpoints: DEFAULT_RESPONSIVE_BREAKPOINTS,
+          };
+          mergedData.breakpointSetUpdatedAt = updatedAt;
         }
         return mergedData;
       },
@@ -566,12 +664,10 @@ const generateDesignAction = defineAction({
         ) {
           return false;
         }
-        if (canvasFrames === undefined) return true;
-
         const currentFrames = parseCanvasFrameGeometryById(
           current.canvasFrames,
         );
-        return Boolean(
+        const framesApplied = Boolean(
           placedFrames?.every(({ fileId, frame }) => {
             const currentFrame = currentFrames[fileId];
             return (
@@ -583,6 +679,7 @@ const generateDesignAction = defineAction({
             );
           }),
         );
+        return framesApplied && hasBreakpointSet(current.breakpointSet);
       },
     });
 

package/corpus/templates/design/actions/present-design-variants.ts

@@ -19,6 +19,7 @@ import {
   type CanvasFramePlacement,
 } from "../shared/canvas-frames.js";
 import { isUniqueConstraintViolation } from "../shared/db-conflict.js";
+import { widthToPrefix } from "../shared/responsive-classes.js";
 import { annotateScreenHtmlForPersist } from "../shared/screen-annotation.js";
 
 const VARIANT_GAP = 96;
@@ -27,8 +28,22 @@ const MOBILE_WIDTH = 390;
 const MOBILE_HEIGHT = 844;
 const TABLET_WIDTH = 768;
 const TABLET_HEIGHT = 1024;
-const DESKTOP_WIDTH = 1280;
-const DESKTOP_HEIGHT = 900;
+const DESKTOP_WIDTH = 1440;
+const DESKTOP_HEIGHT = 1024;
+const DEFAULT_RESPONSIVE_BREAKPOINTS = [390, 768, 1440].map((widthPx) => ({
+  id: `generated-${widthPx}`,
+  label: widthPx === 390 ? "Mobile" : widthPx === 768 ? "Tablet" : "Desktop",
+  widthPx,
+  prefix: widthToPrefix(widthPx),
+}));
+
+function hasBreakpointSet(value: unknown): boolean {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return false;
+  }
+  const breakpoints = (value as { breakpoints?: unknown }).breakpoints;
+  return Array.isArray(breakpoints) && breakpoints.length > 0;
+}
 
 function designDeepLink(designId: string): string {
   return buildDeepLink({
@@ -951,6 +966,15 @@ export default defineAction({
           canvasFrames: mergedFrames.canvasFrames,
           screenMetadata: previousMetadata,
           designVariantSets: previousVariantSets,
+          ...(hasBreakpointSet(current.breakpointSet)
+            ? {}
+            : {
+                breakpointSet: {
+                  id: "generated-responsive",
+                  breakpoints: DEFAULT_RESPONSIVE_BREAKPOINTS,
+                },
+                breakpointSetUpdatedAt: updatedAt,
+              }),
           updatedAt,
         };
       },
@@ -968,13 +992,17 @@ export default defineAction({
           ? variantSets[variantSetId]
           : null;
         const persistedScreens = Array.isArray(set?.screens) ? set.screens : [];
-        return screens.every(
-          (screen) =>
-            isRecord(canvasFrames[screen.id]) &&
-            isRecord(metadata[screen.id]) &&
-            persistedScreens.some(
-              (persisted) => isRecord(persisted) && persisted.id === screen.id,
-            ),
+        return (
+          hasBreakpointSet(current.breakpointSet) &&
+          screens.every(
+            (screen) =>
+              isRecord(canvasFrames[screen.id]) &&
+              isRecord(metadata[screen.id]) &&
+              persistedScreens.some(
+                (persisted) =>
+                  isRecord(persisted) && persisted.id === screen.id,
+              ),
+          )
         );
       },
     });

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

@@ -249,9 +249,6 @@ const EDITOR_BRIDGE_VAR_NAMES = [
   "--design-editor-component-strong-color",
   "--design-editor-component-contrast-color",
   "--design-editor-measure-color",
-  "--background",
-  "--foreground",
-  "--border",
 ];
 
 function readEditorBridgeThemeVars(): Record<string, string> {
@@ -1949,6 +1946,15 @@ export function DesignCanvas({
     // iframe document here; the bridge replays inspector state after that load.
   }, [content, contentKey, runtimeReplacementContent, runtimeReplacementKey]);
 
+  useEffect(() => {
+    if (!interactMode) return;
+    // Interact renders the authoritative persisted source because the editor
+    // bridge is intentionally absent. Keep that same source as the next
+    // edit-mode baseline so leaving Interact cannot resurrect the older
+    // bridge-managed snapshot and make the design visibly jump backward.
+    setRenderedContent(content);
+  }, [content, interactMode]);
+
   usePinchZoom({
     containerRef: scrollContainerRef,
     zoom,

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

@@ -42,6 +42,7 @@ import {
   type PenPath,
 } from "@shared/pen-path";
 import {
+  IconArrowsMaximize,
   IconCopy,
   IconDots,
   IconHandClick,
@@ -393,6 +394,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
   hiddenScreenIds = EMPTY_SCREEN_IDS,
   lockedScreenIds = EMPTY_SCREEN_IDS,
   fullViewScreenIds,
+  interactMode = false,
   activeScreenHasHoveredChild = false,
   hoveredChildScreenId,
   directlyHoveredScreenId,
@@ -7531,8 +7533,8 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                   }}
                   editorChromeScaleX={canvasZoom / 100}
                   editorChromeScaleY={canvasZoom / 100}
-                  editMode={boardEditMode}
-                  interactMode={false}
+                  editMode={boardEditMode && !interactMode}
+                  interactMode={interactMode}
                   scaleMode={boardIsActive && effectiveTool === "scale"}
                   clearSelectionRequest={boardClearSelectionRequest}
                   selectedSelector={
@@ -7602,6 +7604,7 @@ export const MultiScreenCanvas = memo(function MultiScreenCanvas({
                 !isBreakpointSelectionTarget(screen)
               }
               showFullView={fullViewIdSet.has(screen.id)}
+              interactMode={interactMode}
               isDirectlyHovered={screen.id === directlyHoveredScreenId}
               isFileDragOver={
                 fileDragOverFrameId !== null &&
@@ -8859,6 +8862,7 @@ interface ScreenProps {
   isSelected: boolean;
   isTopScreen: boolean;
   showFullView: boolean;
+  interactMode: boolean;
   isDirectlyHovered: boolean;
   /** True while a native OS file drag is hovering this frame (Figma parity §1). */
   isFileDragOver: boolean;
@@ -8926,6 +8930,7 @@ const Screen = memo(function Screen({
   isSelected,
   isTopScreen,
   showFullView,
+  interactMode,
   isDirectlyHovered,
   isFileDragOver,
   hasHoveredChild,
@@ -9022,9 +9027,12 @@ const Screen = memo(function Screen({
   const frameLabelHeight = FRAME_LABEL_HEIGHT * chromeScale;
   const frameScreenWidth = geometry.width / Math.max(chromeScale, 0.001);
   // Keep frame actions inside their own frame so closely spaced screens cannot
-  // cover one another. Narrow frames collapse Interact to its familiar icon;
+  // cover one another. Narrow frames collapse the action to its familiar icon;
   // the accessible name and native tooltip preserve the action's meaning.
   const compactFullView = frameScreenWidth < FRAME_HEADER_BUTTON_COMPACT_WIDTH;
+  const frameActionLabel = interactMode
+    ? t("multiScreenCanvas.fullView")
+    : t("designEditor.modes.interact");
   const labelInfoMaxWidth = Math.max(
     64,
     frameScreenWidth -
@@ -9157,8 +9165,8 @@ const Screen = memo(function Screen({
             transformOrigin: "right center",
             transition: getChromeLabelTransition(chromeSettling),
           }}
-          aria-label={t("designEditor.modes.interact")}
-          title={t("designEditor.modes.interact")}
+          aria-label={frameActionLabel}
+          title={frameActionLabel}
           onClick={(event) => onEdit(screen.id, event)}
           onMouseDown={(event) => {
             event.preventDefault();
@@ -9167,9 +9175,13 @@ const Screen = memo(function Screen({
           onMouseEnter={() => updateDirectHover(true)}
           onMouseLeave={() => updateDirectHover(false)}
         >
-          <IconHandClick className="size-3 shrink-0" />
+          {interactMode ? (
+            <IconArrowsMaximize className="size-3 shrink-0" />
+          ) : (
+            <IconHandClick className="size-3 shrink-0" />
+          )}
           <span className={cn("truncate", compactFullView && "sr-only")}>
-            {t("designEditor.modes.interact")}
+            {frameActionLabel}
           </span>
         </button>
       </div>
@@ -9394,6 +9406,7 @@ const Screen = memo(function Screen({
           renderBreakpointContent={renderBreakpointContent}
           activeBreakpointWidth={screen.activeBreakpointWidth}
           isScreenSelected={isSelected}
+          interactMode={interactMode}
           penActive={penActive}
           creationToolActive={creationToolActive}
           cullTier={cullTier}
@@ -9518,6 +9531,7 @@ function BreakpointPreviewRow({
   renderBreakpointContent,
   activeBreakpointWidth,
   isScreenSelected,
+  interactMode,
   penActive,
   creationToolActive,
   cullTier,
@@ -9559,6 +9573,7 @@ function BreakpointPreviewRow({
    *  mirrors `Screen`'s own `isSelected`, used so a breakpoint frame's chrome
    *  reads as "part of a selected group" the same way the base frame does. */
   isScreenSelected: boolean;
+  interactMode: boolean;
   penActive: boolean;
   creationToolActive: boolean;
   /** Uses the owning screen's exact culling lifecycle: never-seen/evicted
@@ -9595,6 +9610,9 @@ function BreakpointPreviewRow({
   canEdit?: boolean;
 }) {
   const t = useT();
+  const frameActionLabel = interactMode
+    ? t("multiScreenCanvas.fullView")
+    : t("designEditor.modes.interact");
   const breakpointWidths = screen.breakpointWidths ?? [];
   // Place additional frames to the right of the primary, starting after the gap
   let offsetX = primaryGeometry.width + BREAKPOINT_FRAME_GAP;
@@ -9884,8 +9902,8 @@ function BreakpointPreviewRow({
                     transform: `scale(${chromeScale})`,
                     transformOrigin: "right center",
                   }}
-                  aria-label={t("designEditor.modes.interact")}
-                  title={t("designEditor.modes.interact")}
+                  aria-label={frameActionLabel}
+                  title={frameActionLabel}
                   onClick={(e) => {
                     e.stopPropagation();
                     activateThisFrame(e);
@@ -9896,7 +9914,11 @@ function BreakpointPreviewRow({
                     e.stopPropagation();
                   }}
                 >
-                  <IconHandClick className="size-3" />
+                  {interactMode ? (
+                    <IconArrowsMaximize className="size-3" />
+                  ) : (
+                    <IconHandClick className="size-3" />
+                  )}
                 </button>
               ) : null}
               <span

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

@@ -340,7 +340,7 @@ function OptionButton({
         compact ? "px-2.5 py-1.5" : "px-3 py-2",
         selected
           ? "border-[var(--design-editor-accent-color)] bg-[var(--design-editor-selection-color)] text-foreground"
-          : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-foreground hover:bg-[var(--design-editor-panel-raised-bg)]",
+          : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-question-option-bg)] text-foreground hover:bg-[var(--design-editor-control-bg)]",
       )}
     >
       <span
@@ -418,7 +418,7 @@ function ColorOptions({
               "group inline-flex min-h-8 min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-md border px-2.5 py-1.5 text-start transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--design-editor-accent-color)] focus-visible:ring-offset-0",
               selected
                 ? "border-[var(--design-editor-accent-color)] bg-[var(--design-editor-selection-color)] text-foreground"
-                : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] text-foreground hover:bg-[var(--design-editor-panel-raised-bg)]",
+                : "border-[var(--design-editor-control-border)] bg-[var(--design-editor-question-option-bg)] text-foreground hover:bg-[var(--design-editor-control-bg)]",
             )}
           >
             <span