@agent-native/core 0.85.7 → 0.86.1

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

@@ -23,12 +23,17 @@ import {
   usePresence,
   useFollowUser,
   LiveCursorOverlay,
+  RemoteSelectionRings,
+  RecentEditHighlights,
+  useRecentEdits,
   useT,
   useChangeVersion,
   setAgentChatContextItem,
   removeAgentChatContextItem,
   useAvatarUrl,
   type CollabUser,
+  type AttributedRecentEdit,
+  type OtherPresence,
   type PromptComposerSubmitOptions,
 } from "@agent-native/core/client";
 import type { TweakDefinition } from "@shared/api";
@@ -57,6 +62,7 @@ import {
   DESIGN_CAPABILITY_NAMES,
   hasCapability,
 } from "@shared/design-source-capabilities";
+import { FULL_APP_BUILDING_ENABLED, readFusionApp } from "@shared/full-app";
 import { shouldUseLiveFileContent } from "@shared/html-content";
 import {
   compile as compileMotionTimeline,
@@ -64,6 +70,16 @@ import {
 } from "@shared/motion-compiler";
 import type { MotionTrack } from "@shared/motion-timeline";
 import { sortMotionKeyframes } from "@shared/motion-timeline";
+import {
+  createCornerNode,
+  getPenPathGeometry,
+  parsePenNodes,
+  serializePenNodes,
+  serializePenPath,
+  type PenNode,
+  type PenPath,
+  type PenPoint,
+} from "@shared/pen-path";
 import {
   resolveTweaksToCssVars,
   type TweakSelections,
@@ -155,9 +171,11 @@ import {
   CanvasContextMenu,
   type CanvasContextMenuHandle,
 } from "@/components/design/CanvasContextMenu";
-import { type CodeWorkbenchActiveFile } from "@/components/design/CodeWorkbenchHost";
+import { type CodeWorkbenchActiveFile } from "@/components/design/code-workbench/CodeWorkbench";
 import {
   DesignCanvas,
+  type CreatePrimitiveSpec,
+  type CreationTool,
   type IframeContextMenuPayload,
   type IframeHotkeyPayload,
   type MotionTrackWire,
@@ -174,12 +192,15 @@ import {
   type InspectCodeData,
   type InspectorTab,
   type ScreenGeometrySelection,
+  type StyleChangeMeta,
 } from "@/components/design/EditPanel";
+import { FusionAppBanner } from "@/components/design/FusionAppBanner";
 import type { ExportSettingsValue } from "@/components/design/inspector";
 import { InspectorAiActions } from "@/components/design/inspector/InspectorAiActions";
 import {
   LayersPanel,
   type LayersPanelFile,
+  type LayersPanelHandle,
   type LayersPanelMoveIntent,
   type LayersPanelNode,
 } from "@/components/design/LayersPanel";
@@ -199,6 +220,8 @@ import {
   type CanvasPrimitiveInsert,
   type FrameGeometry,
   type MultiScreenCanvasTool,
+  type Point,
+  type VectorEditOverlayState,
 } from "@/components/design/MultiScreenCanvas";
 import { QuestionFlow } from "@/components/design/QuestionFlow";
 import type { ReviewPanelProps } from "@/components/design/ReviewPanel";
@@ -504,6 +527,59 @@ export function getSelectedScreenGeometryForInspector(args: {
   };
 }
 
+/**
+ * Vector-edit foundations (P5 integration): resolves the canvas-space point
+ * where a screen's own screen-content-local (0,0) sits — i.e.
+ * `VectorEditOverlayState.originCanvas` — for a committed pen path owned by
+ * `screenId`.
+ *
+ * Mirrors the exact same fallback-merge (`getInitialFrameGeometry(index,
+ * ...)` overridden by any persisted `canvasFrameGeometryById` entry) that
+ * `getSelectedScreenGeometryForInspector` above and MultiScreenCanvas's own
+ * internal frame-geometry resolution both use, so the overlay lines up with
+ * whatever frame position is actually rendered on screen.
+ *
+ * The reserved board file (`__board__.html`, see shared/board-file.ts) is the
+ * one exception: `handleBoardDrawPrimitive`/`persistDraftPrimitive` commit
+ * board primitives with a 1:1 `{x:0,y:0,width:1,height:1}` frame (no offset
+ * subtraction — see MultiScreenCanvas's persistDraftPrimitive), so a board
+ * pen path's nodes are already in absolute canvas coordinates and
+ * `originCanvas` is `{0, 0}`.
+ *
+ * Returns `null` when the screen can't be resolved (not in `overviewScreens`
+ * and not the board file) — the caller should not enter vector-edit mode in
+ * that case.
+ */
+export function getScreenFrameOriginCanvas(args: {
+  screenId: string;
+  overviewScreens: Array<{
+    id: string;
+    width?: number;
+    height?: number;
+  }>;
+  canvasFrameGeometryById: CanvasFrameGeometryById;
+  boardFileId?: string | null;
+}): Point | null {
+  if (args.boardFileId && args.screenId === args.boardFileId) {
+    return { x: 0, y: 0 };
+  }
+  const screenIndex = args.overviewScreens.findIndex(
+    (screen) => screen.id === args.screenId,
+  );
+  if (screenIndex < 0) return null;
+  const screen = args.overviewScreens[screenIndex];
+  if (!screen) return null;
+  const fallbackGeometry = getInitialFrameGeometry(screenIndex, {
+    width: screen.width ?? 1280,
+    height: screen.height ?? 2560,
+  });
+  const persistedGeometry = args.canvasFrameGeometryById[args.screenId] ?? {};
+  return {
+    x: persistedGeometry.x ?? fallbackGeometry.x,
+    y: persistedGeometry.y ?? fallbackGeometry.y,
+  };
+}
+
 function fileIdFromLayerSelectionId(
   layerId: string,
   fileIds: Set<string>,
@@ -744,6 +820,28 @@ export function shouldReplacePreviewAfterVisualStyleCommit(args: {
   return !args.runtimeApplied && !args.runtimeStyleApplied;
 }
 
+/**
+ * PF12: decide whether a style change from EditPanel (ScrubInput scrub tick /
+ * DesignColorPicker drag tick) should skip the expensive source commit
+ * (commitVisualStyles / commitStylesToSelectedLayers — projection parse, HTML
+ * patch, Yjs write, history entry) and instead only try the cheap live
+ * iframe preview.
+ *
+ * Only a genuine mid-gesture "preview" tick against a single selected element
+ * qualifies: `meta` is undefined for every existing call site that never
+ * passed gesture metadata (keyboard edits, agent edits, discrete commits),
+ * so this returns false for all of them — preserving prior full-commit
+ * behavior exactly. Multi-layer-selection edits (`selectedLayerCount > 1`)
+ * have no equivalent cheap multi-element preview channel, so those
+ * conservatively keep committing on every tick, same as before PF12.
+ */
+export function shouldSkipVisualStyleCommitForPreview(args: {
+  phase?: "preview" | "commit";
+  selectedLayerCount: number;
+}): boolean {
+  return args.phase === "preview" && args.selectedLayerCount <= 1;
+}
+
 export function getLayerMoveIterationOrder<T>(
   orderedIds: readonly T[],
   placement: "before" | "after" | "inside",
@@ -1174,6 +1272,40 @@ function isSingleScreenAnnotationTool(tool: DesignTool): boolean {
   return tool === "draw" || tool === "comment";
 }
 
+/**
+ * P4/single-screen placement: maps the editor's current tool + view mode to
+ * the `CreationTool` DesignCanvas's single-screen click-to-place overlay
+ * understands, or `null` when the overlay should not mount.
+ *
+ * Only mounts while actually focused on a single screen (`viewMode ===
+ * "single"`) with an active file — overview mode keeps using
+ * MultiScreenCanvas's own draft-primitive drawing, which this overlay does
+ * not replace. `rect` (the DesignTool id) maps to CreationTool's
+ * `"rectangle"`; `polygon`/`star`/`frame`/`draw`/`hand`/`comment`/`scale`/
+ * `move` have no single-screen click-to-place equivalent yet and map to
+ * `null` so the overlay never mounts for them (existing tool behavior for
+ * those is unaffected).
+ */
+export function getSingleScreenCreationTool(args: {
+  activeTool: DesignTool;
+  viewMode: "single" | "overview";
+  hasActiveFile: boolean;
+}): CreationTool | null {
+  if (args.viewMode !== "single" || !args.hasActiveFile) return null;
+  switch (args.activeTool) {
+    case "rect":
+      return "rectangle";
+    case "ellipse":
+    case "line":
+    case "arrow":
+    case "text":
+    case "pen":
+      return args.activeTool;
+    default:
+      return null;
+  }
+}
+
 interface DesignFile {
   id: string;
   filename: string;
@@ -2433,6 +2565,208 @@ function reassignDuplicatedNodeIds(content: string): string {
   );
 }
 
+/** Mirrors DesignCanvas's own local CREATION_DEFAULT_LINE_LENGTH (single-
+ *  screen creation overlay) so a single-screen pen click gets a visible
+ *  minimal path of the same default length a line/arrow click would use,
+ *  rather than a zero-length point. */
+const SINGLE_SCREEN_PEN_CLICK_DEFAULT_LENGTH = 120;
+
+/**
+ * P4/single-screen placement: converts a `CreatePrimitiveSpec` emitted by
+ * DesignCanvas's single-screen click-to-place overlay (coordinates already in
+ * screen-content space, matching `appendCanvasPrimitiveToHtml`'s own
+ * coordinate system) into the `CanvasPrimitiveInsert` shape the overview path
+ * (`handleCreatePrimitive` / `appendCanvasPrimitiveToHtml`) already knows how
+ * to persist. This deliberately reuses the exact same insert shape as
+ * `draftPrimitiveToInsert` produces in MultiScreenCanvas.tsx so single-screen
+ * and overview creation commit through one shared persistence path instead of
+ * two.
+ *
+ * Pen is the one deferred case (see DesignCanvas's SingleScreenCreationOverlay
+ * doc comment): a single-screen pen click only ever gets a single start
+ * point, so — rather than force overview to get full multi-click pen
+ * authoring — this commits a minimal open 2-node path (start point to a
+ * fixed-length point to the right, matching the line/arrow click default
+ * length) so the user gets a real, editable pen path immediately. True
+ * single-screen multi-click pen authoring remains a follow-up.
+ */
+export function createPrimitiveInsertFromSpec(
+  spec: CreatePrimitiveSpec,
+  nodeId: string,
+): CanvasPrimitiveInsert | null {
+  if (spec.tool === "line" || spec.tool === "arrow") {
+    const points = spec.points;
+    if (!points || points.length < 2) return null;
+    const [start, end] = points;
+    if (!start || !end) return null;
+    const left = Math.min(start.x, end.x);
+    const top = Math.min(start.y, end.y);
+    const width = Math.max(1, Math.abs(end.x - start.x));
+    const height = Math.max(1, Math.abs(end.y - start.y));
+    return {
+      kind: spec.tool,
+      nodeId,
+      geometry: { x: left, y: top, width, height },
+      points,
+    };
+  }
+
+  if (spec.tool === "pen") {
+    const start = spec.points?.[0];
+    if (!start) return null;
+    const end = {
+      x: start.x + SINGLE_SCREEN_PEN_CLICK_DEFAULT_LENGTH,
+      y: start.y,
+    };
+    const penPath: PenPath = {
+      nodes: [createCornerNode(start), createCornerNode(end)],
+      closed: false,
+    };
+    const geometry = getPenPathGeometry(penPath);
+    return {
+      kind: "path",
+      nodeId,
+      geometry,
+      points: [start, end],
+      pathData: serializePenPath(penPath),
+    };
+  }
+
+  const rect = spec.rect;
+  if (!rect) return null;
+  return {
+    kind: spec.tool,
+    nodeId,
+    geometry: {
+      x: rect.x,
+      y: rect.y,
+      width: Math.max(1, rect.width),
+      height: Math.max(1, rect.height),
+    },
+    autoSize: spec.tool === "text" ? spec.fromClick : undefined,
+  };
+}
+
+/**
+ * Reconstructs a structured `PenPath` (nodes + optional handles) from a `d`
+ * string produced by `serializePenPath` (shared/pen-path.ts). This is the
+ * deliberate INVERSE of that exact serializer — not a general SVG path
+ * parser — so it only needs to understand the small grammar
+ * `serializePenPath` actually emits: `M x y`, then per-segment `L x y` (both
+ * handles coincide with their anchors) or `C c1x c1y c2x c2y x y`
+ * (`c1`/`c2` are the FROM node's `handleOut` / TO node's `handleIn`,
+ * respectively — see `serializeSegment`), optionally followed by a trailing
+ * `Z` for a closed path (whose preceding segment is the wrap-around from the
+ * last node back to the first, not a new node).
+ *
+ * This exists because `CanvasPrimitiveInsert` (MultiScreenCanvas.tsx) only
+ * carries the already-flattened `pathData` string across the overview
+ * commit boundary, not the richer `DraftPrimitive.penPath` MultiScreenCanvas
+ * keeps internally — so committing a pen path drawn in OVERVIEW mode has no
+ * other source for the structured node/handle data `data-an-pen-nodes`
+ * needs. Single-screen pen placement (`createPrimitiveInsertFromSpec` above)
+ * builds its `PenPath` directly and never needs this reverse parse.
+ *
+ * Returns `null` for anything that doesn't match the expected grammar
+ * (empty/malformed `d`) rather than throwing, so a call site can always fall
+ * back to skipping `data-an-pen-nodes` for that element.
+ */
+export function parsePenPathFromSerializedD(d: string): PenPath | null {
+  const trimmed = d.trim();
+  if (!trimmed) return null;
+  const tokens = trimmed.match(/[MLCZ]|-?\d+(?:\.\d+)?/gi);
+  if (!tokens || tokens.length === 0) return null;
+
+  const readNumbers = (count: number): PenPoint[] => {
+    const points: PenPoint[] = [];
+    for (let i = 0; i < count; i += 2) {
+      const x = Number(tokens[cursor + i]);
+      const y = Number(tokens[cursor + i + 1]);
+      if (!Number.isFinite(x) || !Number.isFinite(y)) {
+        throw new Error("invalid pen path number");
+      }
+      points.push({ x, y });
+    }
+    return points;
+  };
+
+  let cursor = 0;
+  const command = tokens[cursor];
+  if (command?.toUpperCase() !== "M") return null;
+  cursor += 1;
+
+  try {
+    const [start] = readNumbers(2);
+    if (!start) return null;
+    cursor += 2;
+    const nodes: PenNode[] = [{ point: start }];
+    let closed = false;
+
+    while (cursor < tokens.length) {
+      const token = tokens[cursor]?.toUpperCase();
+      if (token === "Z") {
+        cursor += 1;
+        continue;
+      }
+      if (token === "L") {
+        cursor += 1;
+        const [to] = readNumbers(2);
+        if (!to) return null;
+        cursor += 2;
+        // Same wrap-around case as the "C" branch below: a closed path's
+        // final segment (immediately followed by Z) returns to the FIRST
+        // node rather than describing a new one.
+        const nextIsClose = tokens[cursor]?.toUpperCase() === "Z";
+        if (nextIsClose) {
+          closed = true;
+        } else {
+          nodes.push({ point: to });
+        }
+        continue;
+      }
+      if (token === "C") {
+        cursor += 1;
+        const coords = readNumbers(6);
+        cursor += 6;
+        const [c1, c2, to] = coords;
+        if (!c1 || !c2 || !to) return null;
+        const fromNode = nodes[nodes.length - 1];
+        if (!fromNode) return null;
+        if (!samePenPoint(c1, fromNode.point)) {
+          fromNode.handleOut = c1;
+        }
+        // A closed path's final "C"/"L" segment (immediately followed by Z)
+        // wraps from the last real node back to the FIRST node — it is not a
+        // new node. Apply its handles to the existing first node instead of
+        // pushing a duplicate.
+        const nextIsClose = tokens[cursor]?.toUpperCase() === "Z";
+        if (nextIsClose) {
+          closed = true;
+          const firstNode = nodes[0];
+          if (firstNode && !samePenPoint(c2, firstNode.point)) {
+            firstNode.handleIn = c2;
+          }
+        } else {
+          const node: PenNode = { point: to };
+          if (!samePenPoint(c2, to)) node.handleIn = c2;
+          nodes.push(node);
+        }
+        continue;
+      }
+      // Unknown token — grammar mismatch, bail rather than guess.
+      return null;
+    }
+
+    return { nodes, closed };
+  } catch {
+    return null;
+  }
+}
+
+function samePenPoint(a: PenPoint, b: PenPoint): boolean {
+  return Math.abs(a.x - b.x) < 0.05 && Math.abs(a.y - b.y) < 0.05;
+}
+
 function primitiveLayerName(primitive: CanvasPrimitiveInsert): string {
   switch (primitive.kind) {
     case "frame":
@@ -2715,6 +3049,108 @@ function appendCanvasPrimitiveToHtml(
   }
 }
 
+/**
+ * Vector-edit foundations: stamps `data-an-pen-nodes` (the compact
+ * serializePenNodes encoding — see shared/pen-path.ts) onto the committed
+ * pen-path SVG element identified by `data-agent-native-node-id === nodeId`,
+ * so the structured node/handle data survives independently of the
+ * flattened `d` attribute and can later be re-hydrated into vector edit
+ * mode. Returns `content` unchanged (never null) if the node can't be found
+ * or `content` fails to parse — this is a best-effort enrichment step, never
+ * a hard requirement for the primitive to commit successfully.
+ */
+function setPenNodesAttributeOnElement(
+  content: string,
+  nodeId: string,
+  penPath: PenPath,
+): string {
+  if (typeof window === "undefined") return content;
+  try {
+    const doc = new DOMParser().parseFromString(content, "text/html");
+    // nodeId always comes from uniqueLayerId(...) (alphanumeric/hyphen/UUID
+    // chars only, never quotes), but escape defensively anyway since this
+    // value is interpolated into a CSS attribute-selector string.
+    const safeNodeId = nodeId.replace(/["\\]/g, "\\$&");
+    const element = doc.querySelector(
+      `[data-agent-native-node-id="${safeNodeId}"]`,
+    );
+    if (!element) return content;
+    element.setAttribute("data-an-pen-nodes", serializePenNodes(penPath));
+    return `<!DOCTYPE html>\n${doc.documentElement.outerHTML}`;
+  } catch {
+    return content;
+  }
+}
+
+/**
+ * Vector-edit foundations: writes an edited PenPath back onto its committed
+ * SVG element — the `<path>` child's `d` (serializePenPath, matching what
+ * appendCanvasPrimitiveToHtml's explicitPathData branch produces) AND the
+ * `<svg>` root's `data-an-pen-nodes` (serializePenNodes, the structured
+ * round-trip source), plus the root's `viewBox`/left/top/width/height so the
+ * element's bounding box stays correct after anchors/handles moved it.
+ * `nodeId` is the element's `data-agent-native-node-id` value (screen-content
+ * space — same coordinate system the path's own nodes are already in, see
+ * parsePenPathFromSerializedD's doc comment for that finding).
+ *
+ * Returns `content` unchanged (never null/throws) if the element can't be
+ * found, isn't an SVG pen-path root, or has no `<path>` child — the caller
+ * treats that as a no-op commit rather than losing the user's edit.
+ */
+function writeBackVectorEditedPenPath(
+  content: string,
+  nodeId: string,
+  penPath: PenPath,
+): string {
+  if (typeof window === "undefined") return content;
+  try {
+    const doc = new DOMParser().parseFromString(content, "text/html");
+    const safeNodeId = nodeId.replace(/["\\]/g, "\\$&");
+    const svg = doc.querySelector(
+      `[data-agent-native-node-id="${safeNodeId}"]`,
+    );
+    const path = svg?.querySelector("path");
+    if (!svg || !path) return content;
+
+    const d = serializePenPath(penPath);
+    const geometry = getPenPathGeometry(penPath);
+    const isClosed = Boolean(penPath.closed && penPath.nodes.length > 1);
+
+    path.setAttribute("d", d);
+    if (isClosed && path.getAttribute("fill") === "none") {
+      path.setAttribute("fill", "#D9D9D9");
+    } else if (!isClosed) {
+      path.setAttribute("fill", "none");
+    }
+
+    svg.setAttribute("data-an-pen-nodes", serializePenNodes(penPath));
+    svg.setAttribute(
+      "viewBox",
+      `${geometry.x} ${geometry.y} ${geometry.width} ${geometry.height}`,
+    );
+    const existingStyle = svg.getAttribute("style") ?? "";
+    const rotationMatch = existingStyle.match(/transform:[^;]+/);
+    svg.setAttribute(
+      "style",
+      [
+        "position:absolute",
+        `left:${Math.round(geometry.x)}px`,
+        `top:${Math.round(geometry.y)}px`,
+        `width:${Math.max(1, Math.round(geometry.width))}px`,
+        `height:${Math.max(1, Math.round(geometry.height))}px`,
+        "overflow:visible",
+        rotationMatch?.[0] ?? "",
+      ]
+        .filter(Boolean)
+        .join(";"),
+    );
+
+    return `<!DOCTYPE html>\n${doc.documentElement.outerHTML}`;
+  } catch {
+    return content;
+  }
+}
+
 function polygonPointsForHtmlShape(
   kind: "polygon" | "star",
   width: number,
@@ -4237,11 +4673,11 @@ type DesignLeftPanel =
   | "import"
   | "code";
 
-const SHOW_DESIGN_CODE_LEFT_PANEL = false;
+const SHOW_DESIGN_CODE_LEFT_PANEL = true;
 
-const CodeWorkbenchHost = lazy(() =>
-  import("@/components/design/CodeWorkbenchHost").then((module) => ({
-    default: module.CodeWorkbenchHost,
+const CodeWorkbench = lazy(() =>
+  import("@/components/design/code-workbench/CodeWorkbench").then((module) => ({
+    default: module.CodeWorkbench,
   })),
 );
 
@@ -5196,6 +5632,48 @@ function cloneCanvasFrameGeometry(
   );
 }
 
+/**
+ * Freshness guard for geometry undo/redo. Returns the ids of frames that a
+ * geometry history entry touched whose LIVE geometry no longer matches what the
+ * entry expects (`expected` = the state this entry previously wrote). A
+ * non-empty result means a concurrent peer/agent moved those frames since the
+ * snapshot was captured, so replaying the entry's stored "before"/"after" would
+ * clobber their change. Frames absent from live geometry (deleted) are treated
+ * as changed. Only compares the frames the entry itself changed, so unrelated
+ * concurrent edits to OTHER frames don't block this undo.
+ */
+function frameGeometryEquals(
+  a: CanvasFrameGeometry | undefined,
+  b: CanvasFrameGeometry | undefined,
+): boolean {
+  return JSON.stringify(a ?? null) === JSON.stringify(b ?? null);
+}
+
+function staleGeometryFrameIds(
+  entry: GeometryHistoryEntry,
+  live: CanvasFrameGeometryById,
+  expected: CanvasFrameGeometryById,
+): string[] {
+  // A frame is "touched" when ANY geometry field differs between before and
+  // after — moves (x/y), rotation, and z-order count, not just viewport size.
+  const touched = new Set<string>(
+    [...Object.keys(entry.before), ...Object.keys(entry.after)].filter(
+      (frameId) =>
+        !frameGeometryEquals(entry.before[frameId], entry.after[frameId]),
+    ),
+  );
+  const stale: string[] = [];
+  for (const frameId of touched) {
+    const expectedGeo = expected[frameId];
+    const liveGeo = live[frameId];
+    if (!expectedGeo) continue; // entry didn't establish this frame's geometry
+    if (!liveGeo || JSON.stringify(liveGeo) !== JSON.stringify(expectedGeo)) {
+      stale.push(frameId);
+    }
+  }
+  return stale;
+}
+
 function viewportSizeFromFrameGeometry(
   geometry: CanvasFrameGeometry | undefined,
 ) {
@@ -5363,6 +5841,18 @@ export default function DesignEditor() {
   const [selectedElement, setSelectedElement] = useState<ElementInfo | null>(
     null,
   );
+  // Vector-edit mode (P5 integration): active while the user is editing a
+  // committed pen path's anchors/handles on the overview canvas. `path` is
+  // the LIVE working copy (path-local coordinates, matching pen-path.ts);
+  // `originCanvas` is recomputed from the owning screen's current frame
+  // geometry on every render (see vectorEditOverlayState below) rather than
+  // stored here, so dragging/resizing the screen frame while editing doesn't
+  // leave the overlay pinned to a stale position. null when not editing.
+  const [vectorEditingState, setVectorEditingState] = useState<{
+    screenId: string;
+    nodeId: string;
+    path: PenPath;
+  } | null>(null);
   const [pendingVisualStyleEdits, setPendingVisualStyleEdits] = useState<
     PendingVisualStyleEdit[]
   >([]);
@@ -5806,7 +6296,7 @@ export default function DesignEditor() {
       const setWidth =
         side === "left" ? setLeftSidebarWidth : setRightSidebarWidth;
       const minWidth = side === "left" ? (codePanelOpen ? 520 : 220) : 240;
-      const maxWidth = side === "left" ? (codePanelOpen ? 860 : 420) : 390;
+      const maxWidth = side === "left" ? (codePanelOpen ? 1100 : 420) : 390;
       const target =
         side === "left"
           ? leftSidebarContentRef.current
@@ -6309,7 +6799,10 @@ export default function DesignEditor() {
     pendingQuestionsVisible,
   ]);
 
-  // Current user info for collaborative presence
+  // Current user info for collaborative presence. The avatar (if the user has
+  // uploaded one) is plumbed through so peers see the user's face on cursors,
+  // selection rings, edit highlights, and the presence bar.
+  const currentUserAvatarUrl = useAvatarUrl(session?.email);
   const currentUser: CollabUser | undefined = useMemo(
     () =>
       session?.email
@@ -6317,9 +6810,12 @@ export default function DesignEditor() {
             name: session.name?.trim() || emailToName(session.email),
             email: session.email,
             color: emailToColor(session.email),
+            ...(currentUserAvatarUrl
+              ? { avatarUrl: currentUserAvatarUrl }
+              : {}),
           }
         : undefined,
-    [session?.email, session?.name],
+    [session?.email, session?.name, currentUserAvatarUrl],
   );
   const signInToSaveHref = buildSignInHrefForDesignIntent("save");
   const signInToShareHref = buildSignInHrefForDesignIntent("share");
@@ -6997,6 +7493,14 @@ export default function DesignEditor() {
     () => getCanvasFrameGeometry(designDataJson),
     [designDataJson],
   );
+  // Freshest live geometry for the geometry-undo freshness guard. Read from a
+  // ref (not a render-time closure) so undo/redo compare against the geometry a
+  // concurrent peer/agent may have just written, not the value captured when
+  // handleUndo's callback was memoized.
+  const liveFrameGeometryRef = useRef(canvasFrameGeometryById);
+  useEffect(() => {
+    liveFrameGeometryRef.current = canvasFrameGeometryById;
+  }, [canvasFrameGeometryById]);
 
   // ── Board file ─────────────────────────────────────────────────────────────
   // The board is a reserved design_file (filename "__board__.html") whose id is
@@ -8049,6 +8553,37 @@ export default function DesignEditor() {
       user: currentUser,
     });
 
+  // ── Overview presence (Task 1) ──────────────────────────────────────────────
+  //
+  // In single-screen mode the collab doc above already drives selection rings +
+  // recent-edit highlights over the one active iframe. Overview (MultiScreenCanvas)
+  // has no single active collab doc, so we open a SEPARATE, presence-only
+  // subscription here. Design decisions:
+  //
+  //  • Subscription model: a SINGLE subscription for the most-relevant file —
+  //    `activeFileId` (which in overview defaults to the selected/first screen
+  //    and is advanced to the worked file by the agent's view-screen / navigate
+  //    actions). We deliberately do NOT open one subscription per visible frame:
+  //    an overview board can hold many screens, and N polling docs would be
+  //    wasteful. Actions publish agent presence to the FILE id (see
+  //    edit-design.ts / apply-visual-edit.ts → agentEnterDocument(file.id)), so
+  //    this one doc surfaces the agent's `selection` + `recentEdits` for the file
+  //    it is editing.
+  //  • Only mounts in overview so we never run two live docs for the same file.
+  const overviewPresenceFileId =
+    viewMode === "overview"
+      ? (activeFileId ?? overviewScreens[0]?.id ?? null)
+      : null;
+  const { awareness: overviewAwareness, ydoc: overviewYdoc } =
+    useCollaborativeDoc({
+      docId:
+        isSignedIn && canEditDesign && overviewPresenceFileId
+          ? overviewPresenceFileId
+          : null,
+      requestSource: TAB_ID,
+      user: currentUser,
+    });
+
   // Track collab-sourced content for the active file.
   // When Y.Doc is synced and has content, use it as the source of truth
   // instead of the DB-fetched content so live remote edits appear instantly.
@@ -8508,6 +9043,10 @@ export default function DesignEditor() {
 
   // Canvas container ref for cursor overlay coordinate mapping.
   const canvasContextMenuRef = useRef<CanvasContextMenuHandle | null>(null);
+  // L12: imperative handle so Cmd+R and the canvas context-menu Rename item
+  // can start the layers panel's real inline rename editor on the selected
+  // layer (see beginRename in LayersPanel.tsx).
+  const layersPanelRef = useRef<LayersPanelHandle | null>(null);
   const canvasContainerRef = useRef<HTMLDivElement>(null);
   const activeEditorDragRef = useRef(false);
 
@@ -8698,6 +9237,315 @@ export default function DesignEditor() {
     };
   }, [activeFileId, zoom, setPresence]);
 
+  // ── Remote selection rings + lingering edit highlights on the canvas ────────
+  //
+  // The agent (and human peers) publish selection descriptors + recentEdits into
+  // awareness. Both are resolved by locating the target element INSIDE the active
+  // screen's iframe, then transforming the iframe-local rect into parent-viewport
+  // coordinates. The iframe sits inside a `transform: scale(zoom)` wrapper, so its
+  // on-screen size differs from its internal layout size; we derive the scale from
+  // `boundingRect.width / iframe.clientWidth` (robust to any wrapper transform)
+  // instead of reading the zoom value directly. Cross-origin/unmounted iframes
+  // return null (the ring/highlight is silently skipped).
+
+  // Map an iframe-local DOMRect (element or Range) to the parent viewport.
+  const mapIframeRectToViewport = useCallback(
+    (iframe: HTMLIFrameElement, rect: DOMRect): DOMRect | null => {
+      const frameRect = iframe.getBoundingClientRect();
+      if (frameRect.width === 0 || frameRect.height === 0) return null;
+      // Effective on-screen scale of the iframe's internal coordinate system.
+      const layoutWidth = iframe.clientWidth || frameRect.width;
+      const layoutHeight = iframe.clientHeight || frameRect.height;
+      const scaleX = layoutWidth ? frameRect.width / layoutWidth : 1;
+      const scaleY = layoutHeight ? frameRect.height / layoutHeight : 1;
+      return new DOMRect(
+        frameRect.left + rect.left * scaleX,
+        frameRect.top + rect.top * scaleY,
+        rect.width * scaleX,
+        rect.height * scaleY,
+      );
+    },
+    [],
+  );
+
+  // Resolve a CSS selector to a viewport rect inside a specific iframe. The
+  // iframe is the coordinate anchor, so the same logic serves both the
+  // single-screen preview iframe and each overview frame iframe (see the
+  // overview resolvers below, which pass the frame the agent is editing).
+  const resolveSelectorRectInIframe = useCallback(
+    (iframe: HTMLIFrameElement | null, selector: string): DOMRect | null => {
+      if (!iframe) return null;
+      let doc: Document | null = null;
+      try {
+        doc = iframe.contentDocument;
+      } catch {
+        return null; // cross-origin — cannot inspect
+      }
+      if (!doc) return null;
+      let el: Element | null = null;
+      try {
+        el = doc.querySelector(selector);
+      } catch {
+        return null; // invalid selector
+      }
+      if (!el) return null;
+      return mapIframeRectToViewport(iframe, el.getBoundingClientRect());
+    },
+    [mapIframeRectToViewport],
+  );
+
+  // Resolve a text quote to a viewport rect by walking a specific iframe body.
+  const resolveTextQuoteRectInIframe = useCallback(
+    (iframe: HTMLIFrameElement | null, quote: string): DOMRect | null => {
+      const needle = quote.trim();
+      if (!needle) return null;
+      if (!iframe) return null;
+      let doc: Document | null = null;
+      try {
+        doc = iframe.contentDocument;
+      } catch {
+        return null;
+      }
+      if (!doc?.body) return null;
+      const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
+      let node: Node | null = walker.nextNode();
+      while (node) {
+        const text = node.nodeValue ?? "";
+        const idx = text.indexOf(needle);
+        if (idx !== -1 && node.parentElement) {
+          try {
+            const range = doc.createRange();
+            range.setStart(node, idx);
+            range.setEnd(node, idx + needle.length);
+            const rect = range.getBoundingClientRect();
+            if (rect.width > 0 || rect.height > 0) {
+              return mapIframeRectToViewport(iframe, rect);
+            }
+          } catch {
+            // fall back to the parent element rect below
+          }
+          return mapIframeRectToViewport(
+            iframe,
+            node.parentElement.getBoundingClientRect(),
+          );
+        }
+        node = walker.nextNode();
+      }
+      return null;
+    },
+    [mapIframeRectToViewport],
+  );
+
+  // Resolve a CSS selector to a viewport rect inside the active screen iframe.
+  const resolveSelectorRect = useCallback(
+    (selector: string): DOMRect | null =>
+      resolveSelectorRectInIframe(canvasIframeRef.current, selector),
+    [canvasIframeRef, resolveSelectorRectInIframe],
+  );
+
+  // Resolve a text quote to a viewport rect by walking the iframe body's text.
+  const resolveTextQuoteRect = useCallback(
+    (quote: string): DOMRect | null =>
+      resolveTextQuoteRectInIframe(canvasIframeRef.current, quote),
+    [canvasIframeRef, resolveTextQuoteRectInIframe],
+  );
+
+  // resolveRect for RemoteSelectionRings — descriptor is a CSS selector string.
+  const resolveSelectionRect = useCallback(
+    (descriptor: string): DOMRect | null => resolveSelectorRect(descriptor),
+    [resolveSelectorRect],
+  );
+
+  // resolveRect for RecentEditHighlights — dispatch on descriptor kind.
+  const resolveRecentEditRect = useCallback(
+    (edit: AttributedRecentEdit): DOMRect | null => {
+      const d = edit.descriptor;
+      if (d.kind === "selector" && typeof d.selector === "string") {
+        return resolveSelectorRect(d.selector);
+      }
+      if (d.kind === "text" && typeof d.quote === "string") {
+        return resolveTextQuoteRect(d.quote);
+      }
+      // "paths" and whole-"doc" descriptors have no canvas region here.
+      return null;
+    },
+    [resolveSelectorRect, resolveTextQuoteRect],
+  );
+
+  const recentEdits = useRecentEdits(others);
+
+  // Re-key the presence array on zoom so the overlays recompute their rects when
+  // the canvas zooms (the container itself doesn't resize, so the overlays'
+  // ResizeObserver wouldn't otherwise fire). Cheap: a new array reference only.
+  const othersForOverlays = useMemo<OtherPresence[]>(
+    () => others.slice(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [others, zoom],
+  );
+  const recentEditsForOverlays = useMemo<AttributedRecentEdit[]>(
+    () => recentEdits.slice(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [recentEdits, zoom],
+  );
+
+  // ── Synthesized AI cursor (Task 3) ──────────────────────────────────────────
+  //
+  // The agent publishes a selection/recentEdit but no cursor. Derive a moving
+  // cursor for it from whatever region currently resolves, normalized against
+  // the canvas container the same way human cursors are (see
+  // handleCanvasPointerMove) so LiveCursorOverlay places it correctly. The 120ms
+  // CSS transition in the overlay animates it smoothly between edit targets.
+  const othersWithAgentCursor = useMemo<OtherPresence[]>(() => {
+    const container = canvasContainerRef.current;
+    if (!container) return othersForOverlays;
+    const containerRect = container.getBoundingClientRect();
+    if (containerRect.width === 0 || containerRect.height === 0) {
+      return othersForOverlays;
+    }
+    return othersForOverlays.map((other) => {
+      // Only synthesize when the agent has no real cursor of its own.
+      if (!other.isAgent || other.presence.cursor) return other;
+      // Prefer the agent's active selection; fall back to its latest recentEdit.
+      let rect: DOMRect | null = null;
+      const selection = other.presence.selection as
+        | string
+        | { selector?: string }
+        | null
+        | undefined;
+      const selector =
+        typeof selection === "string" ? selection : selection?.selector;
+      if (selector) rect = resolveSelectorRect(selector);
+      if (!rect) {
+        const ring = other.presence.recentEdits;
+        if (Array.isArray(ring)) {
+          for (let i = ring.length - 1; i >= 0 && !rect; i--) {
+            const entry = ring[i] as AttributedRecentEdit;
+            if (entry?.descriptor) {
+              rect = resolveRecentEditRect({
+                ...entry,
+                clientId: other.clientId,
+                user: other.user,
+                isAgent: true,
+              });
+            }
+          }
+        }
+      }
+      if (!rect) return other;
+      // Normalize the rect's center to container fractions (matches human cursors).
+      const cx = rect.left + rect.width / 2 - containerRect.left;
+      const cy = rect.top + rect.height / 2 - containerRect.top;
+      return {
+        ...other,
+        presence: {
+          ...other.presence,
+          cursor: {
+            x: Math.max(0, Math.min(1, cx / containerRect.width)),
+            y: Math.max(0, Math.min(1, cy / containerRect.height)),
+          },
+        },
+      };
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    othersForOverlays,
+    resolveSelectorRect,
+    resolveRecentEditRect,
+    canvasContainerRef,
+    zoom,
+  ]);
+
+  // ── Overview presence overlays (Task 1) ─────────────────────────────────────
+  //
+  // Element-level rings + recent-edit highlights over the overview board. The
+  // agent's descriptors are published on the overview presence doc above and
+  // resolved INSIDE the frame the agent is editing. Because we resolve against
+  // the frame iframe's `getBoundingClientRect()` (via mapIframeRectToViewport),
+  // the board pan/zoom transform is already baked into the returned viewport
+  // coords — RemoteSelectionRings / RecentEditHighlights convert those to
+  // container-relative against the same `canvasContainerRef`, so we do NOT
+  // duplicate MultiScreenCanvas's transform math.
+  const { others: overviewOthers } = usePresence(
+    overviewAwareness,
+    overviewYdoc?.clientID ?? null,
+  );
+
+  // Find the overview frame iframe for a given file id. Frames tag their iframe
+  // with `data-screen-iframe-id` = screen id (or `<id>::bp-<width>` for an
+  // active breakpoint), so match the exact id or the breakpoint-prefixed form.
+  const getOverviewFrameIframe = useCallback(
+    (fileId: string | null): HTMLIFrameElement | null => {
+      if (!fileId) return null;
+      const container = canvasContainerRef.current;
+      if (!container) return null;
+      const escaped =
+        typeof CSS !== "undefined" && CSS.escape ? CSS.escape(fileId) : fileId;
+      return (
+        container.querySelector<HTMLIFrameElement>(
+          `iframe[data-screen-iframe-id="${escaped}"]`,
+        ) ??
+        container.querySelector<HTMLIFrameElement>(
+          `iframe[data-screen-iframe-id^="${escaped}::bp-"]`,
+        ) ??
+        null
+      );
+    },
+    [canvasContainerRef],
+  );
+
+  // Overview resolvers: the agent's presence rides on `overviewPresenceFileId`,
+  // so resolve every descriptor inside that file's frame iframe.
+  const resolveOverviewSelectionRect = useCallback(
+    (descriptor: string): DOMRect | null =>
+      resolveSelectorRectInIframe(
+        getOverviewFrameIframe(overviewPresenceFileId),
+        descriptor,
+      ),
+    [
+      getOverviewFrameIframe,
+      overviewPresenceFileId,
+      resolveSelectorRectInIframe,
+    ],
+  );
+  const resolveOverviewRecentEditRect = useCallback(
+    (edit: AttributedRecentEdit): DOMRect | null => {
+      const iframe = getOverviewFrameIframe(overviewPresenceFileId);
+      if (!iframe) return null;
+      const d = edit.descriptor;
+      if (d.kind === "selector" && typeof d.selector === "string") {
+        return resolveSelectorRectInIframe(iframe, d.selector);
+      }
+      if (d.kind === "text" && typeof d.quote === "string") {
+        return resolveTextQuoteRectInIframe(iframe, d.quote);
+      }
+      // "paths" and whole-"doc" descriptors have no single canvas region.
+      return null;
+    },
+    [
+      getOverviewFrameIframe,
+      overviewPresenceFileId,
+      resolveSelectorRectInIframe,
+      resolveTextQuoteRectInIframe,
+    ],
+  );
+
+  // Show only the agent's presence in overview (human peers edit inside their
+  // own focused screen; the board treatment is about surfacing agent work). Re-
+  // key on the overview zoom so rings recompute when the board zooms — the
+  // container itself doesn't resize, so the overlays' ResizeObserver wouldn't
+  // otherwise fire (same trick as the single-screen `othersForOverlays`).
+  const overviewAgentOthers = useMemo<OtherPresence[]>(
+    () => overviewOthers.filter((o) => o.isAgent),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [overviewOthers, overviewCanvasZoom],
+  );
+  const overviewRecentEdits = useRecentEdits(overviewAgentOthers);
+  const overviewRecentEditsForOverlays = useMemo<AttributedRecentEdit[]>(
+    () => overviewRecentEdits.slice(),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [overviewRecentEdits, overviewCanvasZoom],
+  );
+
   // Follow mode — clicking an avatar in the toolbar follows that participant.
   const [followingEmail, setFollowingEmail] = useState<string | null>(null);
   const followingId = useMemo(() => {
@@ -9121,19 +9969,42 @@ export default function DesignEditor() {
   const activeCanvasSourceType =
     normalizeDesignSourceType(activeOverviewScreen?.sourceType) ??
     designSourceType;
+  // P4: arms DesignCanvas's single-screen click-to-place overlay only while
+  // focused on a single screen with an active creation tool selected —
+  // `null` in every other case leaves the overlay unmounted (see
+  // getSingleScreenCreationTool's doc comment for the full tool mapping).
+  const activeSingleScreenCreationTool = getSingleScreenCreationTool({
+    activeTool,
+    viewMode,
+    hasActiveFile: Boolean(activeFile),
+  });
   const sourceCapabilities = useMemo(() => {
     const caps = resolveSourceCapabilities(designSourceType);
     return DESIGN_CAPABILITY_NAMES.filter((name) => hasCapability(caps, name));
   }, [designSourceType]);
 
-  // Builder-hosted preview URL for fusion-source designs, written into the
-  // design data blob by the "Make it real" migration. Threaded into DesignCanvas
-  // so the fusion preview renders (and so the bridge trust check can validate
-  // the frame's origin against it).
+  // Full-app-building linkage (see shared/full-app.ts). Non-null only for
+  // designs created via the "Full app" creation mode — drives FusionAppBanner
+  // and the fusion preview URL fallback below. Flag-independent on read: once
+  // a design has this data (created while the flag was on), the banner and
+  // canvas wiring keep working even if the flag is later flipped off, so
+  // existing full-app designs never regress.
+  const fusionApp = useMemo(
+    () => readFusionApp(designDataJson),
+    [designDataJson],
+  );
+
+  // Builder-hosted preview URL for fusion-source designs. Prefers the flat
+  // `fusionUrl` written by the "Make it real" migration; falls back to the
+  // full-app-building `fusionApp.previewUrl` linkage so container dev-server
+  // screens render the same way once the container reports a preview URL.
+  // Threaded into DesignCanvas so the fusion preview renders (and so the
+  // bridge trust check can validate the frame's origin against it).
   const designFusionUrl = useMemo(() => {
     const raw = (designDataJson as { fusionUrl?: unknown }).fusionUrl;
-    return typeof raw === "string" && raw ? raw : undefined;
-  }, [designDataJson]);
+    if (typeof raw === "string" && raw) return raw;
+    return fusionApp?.previewUrl;
+  }, [designDataJson, fusionApp]);
 
   // §6.1 — open a component instance's source. open-component-source selects the
   // component root in the editor and emits a navigate app-state; for real-app
@@ -10137,13 +11008,38 @@ export default function DesignEditor() {
                 : storedContent;
             })()
           : storedContent);
-      const nextContent = appendCanvasPrimitiveToHtml(baseContent, primitive, {
-        preserveNegativePosition: targetFile.id === boardFileId,
-      });
-      if (!nextContent) {
+      const insertedContent = appendCanvasPrimitiveToHtml(
+        baseContent,
+        primitive,
+        { preserveNegativePosition: targetFile.id === boardFileId },
+      );
+      if (!insertedContent) {
         toast.error(t("designEditor.toasts.primitiveInsertFailed"));
         return false;
       }
+      // Vector-edit foundations: stash the structured pen path (nodes +
+      // handles) alongside the flattened `d` so a later double-click/Enter
+      // can re-hydrate it into an editable path instead of only having the
+      // already-flattened curve. `primitive.pathData` is the only carrier of
+      // pen geometry that crosses the MultiScreenCanvas -> DesignEditor
+      // boundary for an OVERVIEW-drawn pen path (see
+      // parsePenPathFromSerializedD's doc comment for why this reconstructs
+      // rather than receives the structured path directly).
+      const nextContent =
+        primitive.kind === "path" && primitive.pathData && primitive.nodeId
+          ? (() => {
+              const reconstructed = parsePenPathFromSerializedD(
+                primitive.pathData!,
+              );
+              return reconstructed
+                ? setPenNodesAttributeOnElement(
+                    insertedContent,
+                    primitive.nodeId!,
+                    reconstructed,
+                  )
+                : insertedContent;
+            })()
+          : insertedContent;
       const projectedNodeId = primitive.nodeId
         ? buildCodeLayerProjection(nextContent).nodes.find(
             (node) =>
@@ -10353,6 +11249,109 @@ export default function DesignEditor() {
     [boardFileId, canEditDesign, handleCreatePrimitive, handlePrimitiveCreated],
   );
 
+  /**
+   * P4: DesignCanvas's single-screen click-to-place creation overlay
+   * (`activeCreationTool`/`onCreatePrimitive` below) commits through this
+   * same `handleCreatePrimitive`/`handlePrimitiveCreated` pair overview
+   * drawing already uses — `createPrimitiveInsertFromSpec` just translates
+   * the overlay's screen-content-space spec into the shared
+   * `CanvasPrimitiveInsert` shape first. Always returns the active tool to
+   * "move" afterward (Figma/overview parity) since single-screen pen never
+   * has a multi-click "mid-path" state to preserve (see
+   * createPrimitiveInsertFromSpec's pen doc comment).
+   */
+  const handleSingleScreenCreatePrimitive = useCallback(
+    (spec: CreatePrimitiveSpec) => {
+      if (!activeFile || !canEditDesign) return;
+      const nodeId = uniqueLayerId(spec.tool === "pen" ? "path" : spec.tool);
+      const primitive = createPrimitiveInsertFromSpec(spec, nodeId);
+      if (!primitive) return;
+      const result = handleCreatePrimitive(activeFile.id, primitive);
+      if (!result) return;
+      const resultNodeId = typeof result === "string" ? result : nodeId;
+      handlePrimitiveCreated(activeFile.id, resultNodeId, {
+        selectFrame: false,
+      });
+    },
+    [activeFile, canEditDesign, handleCreatePrimitive, handlePrimitiveCreated],
+  );
+
+  /**
+   * P5/vector-edit: commits the working PenPath from MultiScreenCanvas's
+   * `vectorEdit` overlay back onto its owning screen. `"preview"` phases
+   * (live anchor/handle drag) only update `vectorEditingState.path` — the
+   * overlay renders straight off that in-memory path, so nothing needs to
+   * touch the iframe/content until the gesture actually settles. `"commit"`
+   * phases (mirroring the same preview/commit gesture-signal convention as
+   * ScrubInput/DesignColorPicker's onChangeComplete) additionally write the
+   * new `d` + data-an-pen-nodes back into the owning screen's HTML through
+   * the existing applyFileContentUpdate persistence path, so a single mouse
+   * drag becomes exactly one saved edit (and one undo/history entry) rather
+   * than one per intermediate frame.
+   */
+  const handleVectorEditChange = useCallback(
+    (nextPath: PenPath, phase: "preview" | "commit") => {
+      setVectorEditingState((current) => {
+        if (!current) return current;
+        if (phase === "commit") {
+          const baseContent = getScreenContent(current.screenId);
+          if (baseContent) {
+            const nextContent = writeBackVectorEditedPenPath(
+              baseContent,
+              current.nodeId,
+              nextPath,
+            );
+            if (nextContent !== baseContent) {
+              applyFileContentUpdate(current.screenId, nextContent, {
+                skipPreview: current.screenId !== activeFile?.id,
+              });
+            }
+          }
+        }
+        return { ...current, path: nextPath };
+      });
+    },
+    [activeFile?.id, applyFileContentUpdate, getScreenContent],
+  );
+
+  const handleVectorEditExit = useCallback(() => {
+    setVectorEditingState(null);
+  }, []);
+
+  /**
+   * P5/vector-edit: the VectorEditOverlayState prop threaded to
+   * MultiScreenCanvas. `originCanvas` is recomputed on every render from the
+   * owning screen's CURRENT frame geometry (see getScreenFrameOriginCanvas)
+   * rather than cached in vectorEditingState, so dragging/resizing the
+   * screen frame mid-edit can't leave the overlay pinned to a stale
+   * position. `null` whenever not editing or the origin can't be resolved
+   * (e.g. the owning screen was deleted mid-edit) — MultiScreenCanvas
+   * doesn't render the overlay in that case.
+   */
+  const vectorEditOverlayState = useMemo<VectorEditOverlayState | null>(() => {
+    if (!vectorEditingState) return null;
+    const originCanvas = getScreenFrameOriginCanvas({
+      screenId: vectorEditingState.screenId,
+      overviewScreens,
+      canvasFrameGeometryById,
+      boardFileId,
+    });
+    if (!originCanvas) return null;
+    return {
+      path: vectorEditingState.path,
+      originCanvas,
+      onChange: handleVectorEditChange,
+      onExit: handleVectorEditExit,
+    };
+  }, [
+    boardFileId,
+    canvasFrameGeometryById,
+    handleVectorEditChange,
+    handleVectorEditExit,
+    overviewScreens,
+    vectorEditingState,
+  ]);
+
   const handleOverviewScreenSelectionChange = useCallback(
     (ids: string[]) => {
       const pendingId = pendingOverviewScreenSelectionRef.current;
@@ -10410,11 +11409,24 @@ export default function DesignEditor() {
     });
   }, [canEditDesign]);
 
+  // T14/P4: text/shape/pen tools used to always force a jump to overview —
+  // that's still correct when the user is already IN overview (or has no
+  // screen focused yet), but when a single screen is already focused these
+  // tools should arm single-screen click-to-place instead of yanking the
+  // user out to overview to draw. Overview mode itself is left completely
+  // alone below (same flushSync/setViewMode("overview") as before).
   const handleTextTool = useCallback(() => {
     if (!canEditDesign) return;
     blurActiveDesignEditableTarget();
     flushSync(() => {
       setActiveTool("text");
+      if (viewModeRef.current === "single" && activeFile) {
+        setMode("edit");
+        setDrawMode(false);
+        setPinMode(false);
+        setSelectedElement(null);
+        return;
+      }
       viewModeRef.current = "overview";
       setViewMode("overview");
       setMode("edit");
@@ -10422,7 +11434,7 @@ export default function DesignEditor() {
       setPinMode(false);
       setSelectedElement(null);
     });
-  }, [canEditDesign]);
+  }, [activeFile, canEditDesign]);
 
   const handleShapeTool = useCallback(
     (tool: ShapeTool) => {
@@ -10430,6 +11442,13 @@ export default function DesignEditor() {
       blurActiveDesignEditableTarget();
       flushSync(() => {
         setActiveTool(tool);
+        if (viewModeRef.current === "single" && activeFile) {
+          setMode("edit");
+          setDrawMode(false);
+          setPinMode(false);
+          setSelectedElement(null);
+          return;
+        }
         viewModeRef.current = "overview";
         setViewMode("overview");
         setMode("edit");
@@ -10438,7 +11457,7 @@ export default function DesignEditor() {
         setSelectedElement(null);
       });
     },
-    [canEditDesign],
+    [activeFile, canEditDesign],
   );
 
   const handleRectTool = useCallback(() => {
@@ -10474,6 +11493,13 @@ export default function DesignEditor() {
     blurActiveDesignEditableTarget();
     flushSync(() => {
       setActiveTool("pen");
+      if (viewModeRef.current === "single" && activeFile) {
+        setMode("edit");
+        setDrawMode(false);
+        setPinMode(false);
+        setSelectedElement(null);
+        return;
+      }
       viewModeRef.current = "overview";
       setViewMode("overview");
       setMode("edit");
@@ -10481,7 +11507,7 @@ export default function DesignEditor() {
       setPinMode(false);
       setSelectedElement(null);
     });
-  }, [canEditDesign]);
+  }, [activeFile, canEditDesign]);
 
   const handleHandTool = useCallback(() => {
     if (!canEditDesign) return;
@@ -11721,7 +12747,7 @@ export default function DesignEditor() {
   );
 
   const handleStyleChange = useCallback(
-    (property: string, value: string) => {
+    (property: string, value: string, meta?: StyleChangeMeta) => {
       const selector = selectedElement?.selector ?? "body";
       if (
         textEditingState.active &&
@@ -11737,6 +12763,36 @@ export default function DesignEditor() {
           return;
         }
       }
+      // PF12: a mid-gesture scrub/color-drag preview tick (ScrubInput's
+      // `phase: "preview"`, DesignColorPicker's per-tick `onChange`) is cheap
+      // to show live but must NOT run the expensive source commit
+      // (projection parse + HTML patch + history entry) on every tick — only
+      // the gesture's final "commit" (or a caller that never passes meta at
+      // all, e.g. keyboard/agent edits) does that. Route preview ticks
+      // through the same cheap iframe postMessage path the text-range case
+      // above already uses, and skip commitVisualStyles entirely so there is
+      // no source write — and therefore no history entry — for any preview
+      // tick. Multi-layer-selection commits (commitStylesToSelectedLayers)
+      // have no equivalent cheap multi-element preview channel, so previews
+      // for that case conservatively fall through to the existing full-commit
+      // behavior below (unchanged from before PF12).
+      if (
+        shouldSkipVisualStyleCommitForPreview({
+          phase: meta?.phase,
+          selectedLayerCount: selectedLayerTargetsRef.current.length,
+        })
+      ) {
+        const sendStyleChange = (window as any).__designCanvasSendStyle;
+        if (typeof sendStyleChange === "function") {
+          sendStyleChange(selector, property, value, {
+            selectorCandidates: selectedCanvasSelectorCandidates,
+            nodeId: selectedElement?.sourceId,
+          });
+        }
+        // No live bridge available for this preview tick (e.g. inactive
+        // screen) — nothing cheap to do; wait for the gesture's "commit".
+        return;
+      }
       if (commitStylesToSelectedLayers({ [property]: value })) return;
       commitVisualStyles(selector, { [property]: value });
     },
@@ -11768,7 +12824,7 @@ export default function DesignEditor() {
   );
 
   const handleStylesChange = useCallback(
-    (styles: Record<string, string>) => {
+    (styles: Record<string, string>, meta?: StyleChangeMeta) => {
       const selector = selectedElement?.selector ?? "body";
       const entries = Object.entries(styles).filter(([, value]) =>
         Boolean(value),
@@ -11797,6 +12853,28 @@ export default function DesignEditor() {
           return;
         }
       }
+      // PF12: same preview/commit split as handleStyleChange — see its
+      // comment for the full undo-safety rationale. A batched multi-property
+      // preview tick (e.g. EditPanel's shadow X/Y/blur/spread popover) is
+      // still just a live preview: send every property to the cheap iframe
+      // bridge and skip the expensive multi-property commitVisualStyles call.
+      if (
+        shouldSkipVisualStyleCommitForPreview({
+          phase: meta?.phase,
+          selectedLayerCount: selectedLayerTargetsRef.current.length,
+        })
+      ) {
+        const sendStyleChange = (window as any).__designCanvasSendStyle;
+        if (typeof sendStyleChange === "function") {
+          entries.forEach(([property, value]) => {
+            sendStyleChange(selector, property, value, {
+              selectorCandidates: selectedCanvasSelectorCandidates,
+              nodeId: selectedElement?.sourceId,
+            });
+          });
+        }
+        return;
+      }
       if (commitStylesToSelectedLayers(Object.fromEntries(entries))) return;
       commitVisualStyles(selector, Object.fromEntries(entries));
     },
@@ -14823,6 +15901,24 @@ export default function DesignEditor() {
       if (!canUseOverviewHistory) return false;
       const entry = geometryUndoStackRef.current.pop();
       if (!entry) return false;
+      // Freshness guard: this entry last wrote `entry.after`. If a peer/agent
+      // has since moved any of the frames it touched, replaying `entry.before`
+      // would silently clobber their change — drop this entry instead. The pop
+      // above already removed it, so undo skips forward to the next entry.
+      const stale = staleGeometryFrameIds(
+        entry,
+        liveFrameGeometryRef.current,
+        entry.after,
+      );
+      if (stale.length > 0) {
+        console.debug(
+          "[design] skipping stale geometry undo; frames changed since capture:",
+          stale,
+        );
+        toast.info(t("designEditor.toasts.undoSkippedConcurrentEdit"));
+        // Try the next undo entry rather than swallowing the whole gesture.
+        return undoGeometry();
+      }
       geometryRedoStackRef.current = [
         ...geometryRedoStackRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
         entry,
@@ -14929,6 +16025,7 @@ export default function DesignEditor() {
     syncUndoRedoState,
     updateLiveScreenSnapshotContent,
     writeFrameGeometrySnapshot,
+    t,
   ]);
 
   const handleRedo = useCallback(() => {
@@ -15111,6 +16208,22 @@ export default function DesignEditor() {
       if (!canUseOverviewHistory) return false;
       const entry = geometryRedoStackRef.current.pop();
       if (!entry) return false;
+      // Freshness guard: when this entry was undone it wrote `entry.before`. If
+      // a peer/agent has since moved any touched frame, replaying `entry.after`
+      // would clobber that change — drop this entry and try the next redo.
+      const stale = staleGeometryFrameIds(
+        entry,
+        liveFrameGeometryRef.current,
+        entry.before,
+      );
+      if (stale.length > 0) {
+        console.debug(
+          "[design] skipping stale geometry redo; frames changed since capture:",
+          stale,
+        );
+        toast.info(t("designEditor.toasts.redoSkippedConcurrentEdit"));
+        return redoGeometry();
+      }
       geometryUndoStackRef.current = [
         ...geometryUndoStackRef.current.slice(-(MAX_DESIGN_UNDO_STACK - 1)),
         entry,
@@ -15240,6 +16353,7 @@ export default function DesignEditor() {
     t,
     updateLiveScreenSnapshotContent,
     writeFrameGeometrySnapshot,
+    t,
   ]);
 
   const handleZoomIn = useCallback(() => {
@@ -15355,6 +16469,12 @@ export default function DesignEditor() {
       pendingOverviewLayerSelectionRef.current = null;
       clearPendingOverviewLayerSelectionTimer();
       setCreatedOverviewLayerSelection(null);
+      // P5/vector-edit: MultiScreenCanvas (the only place the vectorEdit
+      // overlay renders) unmounts on leaving overview, so an active
+      // vector-edit session has nothing left to render into — clear it
+      // rather than leaving a stale/orphaned session in memory that would
+      // resurface if the user returns to overview later.
+      setVectorEditingState(null);
       runEditorViewTransition(() => {
         if (fileId) setActiveFileId(fileId);
         setDrawMode(false);
@@ -15597,6 +16717,36 @@ export default function DesignEditor() {
       ]),
     [],
   );
+  /**
+   * P5/vector-edit entry point. Only reachable while `viewMode === "overview"`
+   * — MultiScreenCanvas's `vectorEdit` overlay (the only place this state is
+   * rendered) doesn't exist in single-screen mode, so entering vector edit
+   * from a single-screen selection is deliberately deferred rather than
+   * silently doing something broken; see FINAL REPORT for the exact
+   * deferral. Returns true when vector edit mode was entered (caller should
+   * not also drill into the screen), false otherwise (not a pen path, or its
+   * origin couldn't be resolved).
+   */
+  const enterVectorEditForSelection = useCallback(
+    (owner: { fileId: string; node: CodeLayerNode }): boolean => {
+      const penNodesAttr = owner.node.dataAttributes["data-an-pen-nodes"];
+      if (!penNodesAttr) return false;
+      const path = parsePenNodes(penNodesAttr);
+      if (!path) return false;
+      const originCanvas = getScreenFrameOriginCanvas({
+        screenId: owner.fileId,
+        overviewScreens,
+        canvasFrameGeometryById,
+        boardFileId,
+      });
+      if (!originCanvas) return false;
+      const nodeId =
+        owner.node.dataAttributes["data-agent-native-node-id"] ?? owner.node.id;
+      setVectorEditingState({ screenId: owner.fileId, nodeId, path });
+      return true;
+    },
+    [boardFileId, canvasFrameGeometryById, overviewScreens],
+  );
   const handleEnterHotkey = useCallback(() => {
     if (viewMode !== "overview") {
       if (selectedLayerIdsState.length === 1) {
@@ -15616,6 +16766,20 @@ export default function DesignEditor() {
       }
       return;
     }
+    // P5/vector-edit: Enter on a single selected committed pen path (has
+    // data-an-pen-nodes — see setPenNodesAttributeOnElement) enters vector
+    // edit mode instead of drilling into the owning screen. Vector edit's
+    // overlay only exists on MultiScreenCanvas (overview), so this
+    // deliberately only fires here — see enterVectorEditForSelection's doc
+    // comment for the single-screen deferral.
+    if (selectedLayerIdsState.length === 1) {
+      const layerId = selectedLayerIdsState[0]!;
+      const owner = codeLayerOwnerByNodeIdRef.current.get(layerId);
+      const penNodesAttr = owner?.node.dataAttributes["data-an-pen-nodes"];
+      if (owner && penNodesAttr && enterVectorEditForSelection(owner)) {
+        return;
+      }
+    }
     const target = getOverviewEnterTarget({
       activeFileId: activeFile?.id ?? activeFileId,
       overviewSelectedScreenIds,
@@ -15627,6 +16791,7 @@ export default function DesignEditor() {
     activeFile?.id,
     activeFileId,
     enterSingleScreen,
+    enterVectorEditForSelection,
     overviewSelectedScreenIds,
     selectedLayerIdsState,
     viewMode,
@@ -15772,6 +16937,22 @@ export default function DesignEditor() {
     setOverviewSelectAllRequest((request) => request + 1);
   }, [activeFile, files, getFreshActiveContent]);
 
+  // L12: shared by Cmd+R and the canvas context-menu Rename item — the single
+  // currently-selected layer id eligible for the layers-panel inline rename,
+  // or null when zero or more-than-one layers are selected (screen/file rows
+  // are excluded; renaming those is a separate flow). `__`-prefixed and file
+  // ids are filtered the same way handleSelectAllFrames/other selection
+  // helpers already do.
+  const getSingleSelectedRenamableLayerId = useCallback((): string | null => {
+    const fileIds = new Set(files.map((file) => file.id));
+    const selectedRenamableLayerIds = selectedLayerIdsState.filter(
+      (layerId) => !layerId.startsWith("__") && !fileIds.has(layerId),
+    );
+    return selectedRenamableLayerIds.length === 1
+      ? selectedRenamableLayerIds[0]!
+      : null;
+  }, [files, selectedLayerIdsState]);
+
   const shouldHandleEditorHotkey = useCallback((event: KeyboardEvent) => {
     const key = event.key.length === 1 ? event.key.toLowerCase() : event.key;
     const primary = event.metaKey || event.ctrlKey;
@@ -15815,21 +16996,16 @@ export default function DesignEditor() {
     // L12: Cmd+R (and the context-menu Rename item, both routed through
     // useDesignHotkeys' onRename) previously always renamed the DESIGN
     // TITLE, even while a layer was selected — surprising when the user's
-    // focus is clearly on a specific layer. Route to the layer instead when
-    // exactly one selectable (non-file-row) layer is selected; only fall
-    // back to renaming the design title when nothing is selected. The panel
-    // itself only exposes rename as an internal double-click/context-menu
-    // interaction (no imperative "start rename" entry point yet), so this
-    // selects the layer and nudges the user to double-click it in the panel
-    // rather than silently doing nothing or renaming the wrong thing.
+    // focus is clearly on a specific layer. Route to the layer's real inline
+    // rename editor (LayersPanel ref's beginRename) when exactly one
+    // selectable (non-file-row) layer is selected; only fall back to
+    // renaming the design title when nothing (or more than one layer) is
+    // selected.
     onRename: () => {
       if (!canEditDesign) return;
-      const fileIds = new Set(files.map((file) => file.id));
-      const selectedRenamableLayerIds = selectedLayerIdsState.filter(
-        (layerId) => !layerId.startsWith("__") && !fileIds.has(layerId),
-      );
-      if (selectedRenamableLayerIds.length === 1) {
-        toast.info(t("designEditor.toasts.layerRenameSelectLayer"));
+      const layerId = getSingleSelectedRenamableLayerId();
+      if (layerId) {
+        layersPanelRef.current?.beginRename(layerId);
         return;
       }
       setTitleDraft(design?.title ?? "");
@@ -17722,6 +18898,50 @@ ${serializedHtml}
   // connected inspector components; not all render paths call it directly.
   void requestLocalhostWrite;
 
+  // Localhost workspace roots for the code workbench: one per distinct
+  // connection referenced by this design's localhost-backed screens.
+  const workbenchLocalhostConnections = useMemo(() => {
+    const seen = new Map<string, { connectionId: string; label: string }>();
+    for (const screen of overviewScreens) {
+      if (screen.sourceType !== "localhost" || !screen.connectionId) continue;
+      if (seen.has(screen.connectionId)) continue;
+      let label = "Local app" /* i18n-ignore */;
+      const screenUrl = screen.url ?? screen.previewUrl;
+      if (screenUrl) {
+        try {
+          label = new URL(screenUrl).host || label;
+        } catch {
+          // Keep the fallback label for malformed screen URLs.
+        }
+      }
+      seen.set(screen.connectionId, {
+        connectionId: screen.connectionId,
+        label,
+      });
+    }
+    return [...seen.values()];
+  }, [overviewScreens]);
+
+  // Consent round trip for code-workbench saves to local files: opens the
+  // shared write-consent dialog and retries the save once granted.
+  const handleWorkbenchLocalWriteConsent = useCallback(
+    (connectionId: string, retry: () => void, filePath?: string) => {
+      if (!id || !canEditDesign) return;
+      setLocalhostConsentConnectionId(connectionId);
+      setLocalhostWriteConsentPayload({
+        rootPath:
+          workbenchLocalhostConnections.find(
+            (connection) => connection.connectionId === connectionId,
+          )?.label ?? connectionId,
+        files: filePath ? [filePath] : [],
+        onGranted: () => retry(),
+        onCancel: () => {},
+      });
+      setLocalhostWriteConsentOpen(true);
+    },
+    [canEditDesign, id, workbenchLocalhostConnections],
+  );
+
   /**
    * Derive a relative file path from the active localhost screen.
    * Prefers `sourceFile` (the build-output relative path recorded at connect
@@ -20437,6 +21657,7 @@ ${serializedHtml}
                 </div>
                 <div className="min-h-0 flex-1">
                   <LayersPanel
+                    ref={layersPanelRef}
                     screens={layerPanelFiles}
                     activeScreenId={activeFileId ?? undefined}
                     screenOverviewActive={viewMode === "overview"}
@@ -20601,7 +21822,7 @@ ${serializedHtml}
                       </div>
                     }
                   >
-                    <CodeWorkbenchHost
+                    <CodeWorkbench
                       designId={id}
                       activeFileId={routeCodeFileId}
                       activeFilename={routeCodeFilename}
@@ -20609,6 +21830,10 @@ ${serializedHtml}
                       selectedSelector={selectedCanvasSelector}
                       canEdit={canEditDesign}
                       onActiveFileChange={setActiveCodeFile}
+                      localhostConnections={workbenchLocalhostConnections}
+                      onRequestLocalWriteConsent={
+                        handleWorkbenchLocalWriteConsent
+                      }
                     />
                   </Suspense>
                 ) : null}
@@ -20688,7 +21913,12 @@ ${serializedHtml}
                 (selectedScreenIds.length > 0 && files.length > 1)),
             )}
             canReorder={canEditDesign && Boolean(selectedElement)}
-            canRename={false}
+            // L12: rename is only offered for a single selectable layer
+            // target (matching Cmd+R's routing) — the design-title rename
+            // flow lives elsewhere (the title control), not this menu.
+            canRename={
+              canEditDesign && Boolean(getSingleSelectedRenamableLayerId())
+            }
             canToggleLocked={canEditDesign && Boolean(activeLayerId)}
             canToggleHidden={canEditDesign && Boolean(activeLayerId)}
             canCopyProps={Boolean(selectedElement)}
@@ -20698,7 +21928,6 @@ ${serializedHtml}
             canCopyAsCode={Boolean(selectedElement?.selector)}
             canGroup={canGroup}
             canUngroup={canUngroup}
-            hiddenActions={["rename"]}
             getCanvasPoint={getContextCanvasPoint}
             onPasteHere={(details) =>
               void handlePasteSelection(
@@ -20720,6 +21949,14 @@ ${serializedHtml}
             onBringToFront={() => changeSelectedZIndex("front")}
             onSendBackward={() => changeSelectedZIndex("backward")}
             onSendToBack={() => changeSelectedZIndex("back")}
+            // L12: start the layers panel's real inline rename editor on the
+            // single selected layer — canRename above already gates this item
+            // to exactly that case, so getSingleSelectedRenamableLayerId()
+            // should always resolve here.
+            onRename={() => {
+              const layerId = getSingleSelectedRenamableLayerId();
+              if (layerId) layersPanelRef.current?.beginRename(layerId);
+            }}
             onToggleLocked={() => {
               if (activeLayerId) {
                 handleToggleLayerLocked(activeLayerId, !activeLayerLocked);
@@ -20783,6 +22020,21 @@ ${serializedHtml}
                       }}
                     />
                   )}
+                  {/* Full-app building status/controls. Renders only for
+                      designs backed by a fusion app (see readFusionApp) and
+                      only while the flag is on — the fusion actions the
+                      banner calls are gated on the same flag, so rendering it
+                      with the flag off would show controls that all error. */}
+                  {FULL_APP_BUILDING_ENABLED && id && fusionApp && (
+                    <FusionAppBanner
+                      designId={id}
+                      status={fusionApp.status}
+                      statusMessage={fusionApp.statusMessage}
+                      previewUrl={fusionApp.previewUrl}
+                      editorUrl={fusionApp.editorUrl}
+                      deployedUrl={fusionApp.deployedUrl}
+                    />
+                  )}
                   {showPendingVisualStyleApply ? (
                     <div className="pointer-events-none absolute bottom-5 right-5 z-[70] flex items-end">
                       <DropdownMenu>
@@ -20827,139 +22079,164 @@ ${serializedHtml}
                     </div>
                   ) : null}
                   {viewMode === "overview" ? (
-                    <MultiScreenCanvas
-                      screens={overviewScreens}
-                      zoom={overviewCanvasZoom}
-                      onZoomChange={setExplicitOverviewCanvasZoom}
-                      activeId={activeFileId}
-                      selectedScreenIds={overviewSelectedScreenIds}
-                      fullViewScreenIds={fullViewScreenIds}
-                      activeScreenHasHoveredChild={
-                        Boolean(hoveredElement) &&
-                        !hoveredElementIsScreenRoot &&
-                        hoveredElementScreenId === activeFileId
-                      }
-                      hoveredChildScreenId={hoveredChildScreenId}
-                      directlyHoveredScreenId={hoveredScreenRootId}
-                      previewDeviceFrame={deviceFrame}
-                      activeTool={activeTool}
-                      onActiveToolChange={handleOverviewActiveToolChange}
-                      selectAllRequest={overviewSelectAllRequest}
-                      clearSelectionRequest={overviewClearSelectionRequest}
-                      onScreenSelectionChange={
-                        handleOverviewScreenSelectionChange
-                      }
-                      geometryById={canvasFrameGeometryById}
-                      onGeometryChange={queueFrameGeometrySave}
-                      onGeometryCommit={handleGeometryCommit}
-                      onCreatePrimitive={handleCreatePrimitive}
-                      onPrimitiveCreated={handlePrimitiveCreated}
-                      onPrimitiveReparent={handleOverviewPrimitiveReparent}
-                      onCrossScreenElementDrop={handleCrossScreenElementDrop}
-                      boardFileId={boardFileId}
-                      boardIsActive={activeFileId === boardFileId}
-                      boardFileContent={boardFileContent}
-                      boardFrameGeometry={boardFrameGeometry}
-                      boardClearSelectionRequest={overviewClearSelectionRequest}
-                      boardSelectedSelector={
-                        activeFileId === boardFileId
-                          ? selectedCanvasSelector
-                          : null
-                      }
-                      boardSelectedSelectorCandidates={
-                        activeFileId === boardFileId
-                          ? selectedCanvasSelectorCandidates
-                          : undefined
-                      }
-                      boardHoveredSelector={
-                        hoveredElementScreenId === boardFileId
-                          ? hoveredCanvasSelector
-                          : null
-                      }
-                      boardHoveredSelectorCandidates={
-                        hoveredElementScreenId === boardFileId
-                          ? hoveredCanvasSelectorCandidates
-                          : undefined
-                      }
-                      boardLockedSelectors={
-                        boardFileId
-                          ? getLayerSelectorsForFile(
-                              boardFileId,
-                              lockedLayerIds,
-                            )
-                          : undefined
-                      }
-                      boardHiddenSelectors={
-                        boardFileId
-                          ? getLayerSelectorsForFile(
-                              boardFileId,
-                              hiddenLayerIds,
-                            )
-                          : undefined
-                      }
-                      onBoardDrawPrimitive={
-                        canEditDesign ? handleBoardDrawPrimitive : undefined
-                      }
-                      boardEditMode={canEditDesign}
-                      onBoardElementSelect={
-                        boardFileId ? handleBoardElementSelect : undefined
-                      }
-                      onBoardElementMarqueeSelect={
-                        boardFileId
-                          ? handleBoardElementMarqueeSelect
-                          : undefined
-                      }
-                      onBoardElementHover={
-                        boardFileId ? handleBoardElementHover : undefined
-                      }
-                      onBoardElementClear={
-                        boardFileId ? handleBoardElementClear : undefined
-                      }
-                      onBoardIframeHotkey={handleIframeHotkey}
-                      onBoardFigmaClipboardPaste={
-                        handleCanvasFigmaClipboardPaste
-                      }
-                      onBoardIframeContextMenu={handleIframeContextMenu}
-                      onBoardTextEditingStateChange={
-                        handleBoardTextEditingStateChange
-                      }
-                      onBoardElementDblClickText={
-                        boardFileId ? handleBoardElementDblClickText : undefined
-                      }
-                      onBoardVisualStyleChange={
-                        boardFileId ? handleBoardVisualStyleChange : undefined
-                      }
-                      onBoardVisualStructureChange={
-                        boardFileId
-                          ? handleBoardVisualStructureChange
-                          : undefined
-                      }
-                      onBoardVisualDuplicateChange={
-                        boardFileId
-                          ? handleBoardVisualDuplicateChange
-                          : undefined
-                      }
-                      onBoardTextContentChange={
-                        boardFileId ? handleBoardTextContentChange : undefined
-                      }
-                      onCreateScreenFrame={handleCreateScreenFrame}
-                      onDeleteSelection={handleDeleteOverviewSelection}
-                      onSelectionChange={handleOverviewScreenSelectionChange}
-                      onLayerMarqueeSelectionChange={
-                        handleLayerMarqueeSelectionChange
-                      }
-                      selectedLayerSelectorGroupsByScreen={
-                        selectedLayerSelectorGroupsByScreen
-                      }
-                      onPick={handleOverviewScreenPick}
-                      onEdit={enterSingleScreen}
-                      onDuplicate={handleDuplicateScreen}
-                      onAddBreakpoint={handleOverviewAddBreakpoint}
-                      onActiveBreakpointChange={
-                        handleOverviewActiveBreakpointChange
-                      }
-                      renderScreenContent={renderScreenContent}
-                    />
+                    <>
+                      <MultiScreenCanvas
+                        screens={overviewScreens}
+                        zoom={overviewCanvasZoom}
+                        onZoomChange={setExplicitOverviewCanvasZoom}
+                        activeId={activeFileId}
+                        selectedScreenIds={overviewSelectedScreenIds}
+                        fullViewScreenIds={fullViewScreenIds}
+                        activeScreenHasHoveredChild={
+                          Boolean(hoveredElement) &&
+                          !hoveredElementIsScreenRoot &&
+                          hoveredElementScreenId === activeFileId
+                        }
+                        hoveredChildScreenId={hoveredChildScreenId}
+                        directlyHoveredScreenId={hoveredScreenRootId}
+                        previewDeviceFrame={deviceFrame}
+                        activeTool={activeTool}
+                        onActiveToolChange={handleOverviewActiveToolChange}
+                        selectAllRequest={overviewSelectAllRequest}
+                        clearSelectionRequest={overviewClearSelectionRequest}
+                        onScreenSelectionChange={
+                          handleOverviewScreenSelectionChange
+                        }
+                        geometryById={canvasFrameGeometryById}
+                        onGeometryChange={queueFrameGeometrySave}
+                        onGeometryCommit={handleGeometryCommit}
+                        vectorEdit={vectorEditOverlayState}
+                        onCreatePrimitive={handleCreatePrimitive}
+                        onPrimitiveCreated={handlePrimitiveCreated}
+                        onPrimitiveReparent={handleOverviewPrimitiveReparent}
+                        onCrossScreenElementDrop={handleCrossScreenElementDrop}
+                        boardFileId={boardFileId}
+                        boardIsActive={activeFileId === boardFileId}
+                        boardFileContent={boardFileContent}
+                        boardFrameGeometry={boardFrameGeometry}
+                        boardClearSelectionRequest={
+                          overviewClearSelectionRequest
+                        }
+                        boardSelectedSelector={
+                          activeFileId === boardFileId
+                            ? selectedCanvasSelector
+                            : null
+                        }
+                        boardSelectedSelectorCandidates={
+                          activeFileId === boardFileId
+                            ? selectedCanvasSelectorCandidates
+                            : undefined
+                        }
+                        boardHoveredSelector={
+                          hoveredElementScreenId === boardFileId
+                            ? hoveredCanvasSelector
+                            : null
+                        }
+                        boardHoveredSelectorCandidates={
+                          hoveredElementScreenId === boardFileId
+                            ? hoveredCanvasSelectorCandidates
+                            : undefined
+                        }
+                        boardLockedSelectors={
+                          boardFileId
+                            ? getLayerSelectorsForFile(
+                                boardFileId,
+                                lockedLayerIds,
+                              )
+                            : undefined
+                        }
+                        boardHiddenSelectors={
+                          boardFileId
+                            ? getLayerSelectorsForFile(
+                                boardFileId,
+                                hiddenLayerIds,
+                              )
+                            : undefined
+                        }
+                        onBoardDrawPrimitive={
+                          canEditDesign ? handleBoardDrawPrimitive : undefined
+                        }
+                        boardEditMode={canEditDesign}
+                        onBoardElementSelect={
+                          boardFileId ? handleBoardElementSelect : undefined
+                        }
+                        onBoardElementMarqueeSelect={
+                          boardFileId
+                            ? handleBoardElementMarqueeSelect
+                            : undefined
+                        }
+                        onBoardElementHover={
+                          boardFileId ? handleBoardElementHover : undefined
+                        }
+                        onBoardElementClear={
+                          boardFileId ? handleBoardElementClear : undefined
+                        }
+                        onBoardIframeHotkey={handleIframeHotkey}
+                        onBoardFigmaClipboardPaste={
+                          handleCanvasFigmaClipboardPaste
+                        }
+                        onBoardIframeContextMenu={handleIframeContextMenu}
+                        onBoardTextEditingStateChange={
+                          handleBoardTextEditingStateChange
+                        }
+                        onBoardElementDblClickText={
+                          boardFileId
+                            ? handleBoardElementDblClickText
+                            : undefined
+                        }
+                        onBoardVisualStyleChange={
+                          boardFileId ? handleBoardVisualStyleChange : undefined
+                        }
+                        onBoardVisualStructureChange={
+                          boardFileId
+                            ? handleBoardVisualStructureChange
+                            : undefined
+                        }
+                        onBoardVisualDuplicateChange={
+                          boardFileId
+                            ? handleBoardVisualDuplicateChange
+                            : undefined
+                        }
+                        onBoardTextContentChange={
+                          boardFileId ? handleBoardTextContentChange : undefined
+                        }
+                        onCreateScreenFrame={handleCreateScreenFrame}
+                        onDeleteSelection={handleDeleteOverviewSelection}
+                        onSelectionChange={handleOverviewScreenSelectionChange}
+                        onLayerMarqueeSelectionChange={
+                          handleLayerMarqueeSelectionChange
+                        }
+                        selectedLayerSelectorGroupsByScreen={
+                          selectedLayerSelectorGroupsByScreen
+                        }
+                        onPick={handleOverviewScreenPick}
+                        onEdit={enterSingleScreen}
+                        onDuplicate={handleDuplicateScreen}
+                        onAddBreakpoint={handleOverviewAddBreakpoint}
+                        onActiveBreakpointChange={
+                          handleOverviewActiveBreakpointChange
+                        }
+                        renderScreenContent={renderScreenContent}
+                      />
+                      {/* Presence (overview): the agent's selection ring +
+                        fading recent-edit highlights, resolved element-level
+                        inside the frame it is editing and positioned over the
+                        board. See overview presence pipeline above. */}
+                      {overviewAgentOthers.length > 0 && (
+                        <RemoteSelectionRings
+                          others={overviewAgentOthers}
+                          resolveRect={resolveOverviewSelectionRect}
+                          containerRef={canvasContainerRef}
+                        />
+                      )}
+                      {overviewRecentEditsForOverlays.length > 0 && (
+                        <RecentEditHighlights
+                          edits={overviewRecentEditsForOverlays}
+                          resolveRect={resolveOverviewRecentEditRect}
+                          containerRef={canvasContainerRef}
+                        />
+                      )}
+                    </>
                   ) : (
                     <>
                       <DesignCanvas
@@ -20988,6 +22265,8 @@ ${serializedHtml}
                         interactMode={mode === "interact"}
                         readOnly={!canEditDesign}
                         scaleMode={activeTool === "scale"}
+                        activeCreationTool={activeSingleScreenCreationTool}
+                        onCreatePrimitive={handleSingleScreenCreatePrimitive}
                         clearSelectionRequest={overviewClearSelectionRequest}
                         selectedSelector={selectedCanvasSelector}
                         selectedSelectorCandidates={
@@ -21071,10 +22350,30 @@ ${serializedHtml}
                           }
                         }}
                       />
-                      {/* Presence: live cursor overlay for remote participants */}
+                      {/* Presence: remote selection rings (human peers + AI),
+                          resolved into the active screen's iframe. */}
                       {others.length > 0 && (
+                        <RemoteSelectionRings
+                          others={othersForOverlays}
+                          resolveRect={resolveSelectionRect}
+                          containerRef={canvasContainerRef}
+                        />
+                      )}
+                      {/* Presence: lingering fading highlights over regions a
+                          peer or the AI just edited. */}
+                      {recentEditsForOverlays.length > 0 && (
+                        <RecentEditHighlights
+                          edits={recentEditsForOverlays}
+                          resolveRect={resolveRecentEditRect}
+                          containerRef={canvasContainerRef}
+                        />
+                      )}
+                      {/* Presence: live cursor overlay for remote participants.
+                          The AI gets a synthesized cursor derived from its
+                          current edit target (see othersWithAgentCursor). */}
+                      {othersWithAgentCursor.length > 0 && (
                         <LiveCursorOverlay
-                          others={others}
+                          others={othersWithAgentCursor}
                           containerRef={canvasContainerRef}
                         />
                       )}
@@ -21605,7 +22904,7 @@ ${serializedHtml}
       {/* Localhost write-consent dialog: shown when the agent or editor wants to
           persist an edit to a local HTML/CSS source file and no valid grant
           exists for the active connection yet. */}
-      {id && activeLocalhostConnectionId && (
+      {id && (activeLocalhostConnectionId || localhostConsentConnectionId) && (
         <LocalhostWriteConsentDialog
           open={localhostWriteConsentOpen}
           onOpenChange={(next) => {