@agent-native/core 0.90.4 → 0.90.7

package/corpus/templates/design/actions/read-source-file.ts

@@ -30,6 +30,34 @@ export default defineAction({
     const workspace = await resolveSourceWorkspace(designId, {
       includeContent: true,
     });
+    // The board overlay file is a reserved canvas-model document, not a
+    // source file the code workbench edits — resolveSourceWorkspace already
+    // excludes it from `files`. Asking for "the board's source" (e.g. a UI
+    // surface that follows setActiveFileId to whatever screen a cross-screen
+    // drop just landed on, including the board) is a legitimate no-op query,
+    // not an error: return an empty/readonly placeholder instead of letting
+    // findSourceWorkspaceFile throw a 404-as-500 for every such request.
+    if (fileId && workspace.boardFileId && fileId === workspace.boardFileId) {
+      return {
+        designId,
+        path: "__board__.html",
+        displayName: "__board__.html",
+        fileId,
+        sourceType: workspace.sourceType,
+        backendKind: "virtual-inline",
+        readonly: true,
+        language: "html",
+        content: "",
+        versionHash: "",
+        updatedAt: null,
+        provenance: {
+          kind: "design-file" as const,
+          designId,
+          fileId,
+          filename: "__board__.html",
+        },
+      };
+    }
     const file = findSourceWorkspaceFile(workspace.files, { fileId, path });
     const live = await readLiveSourceFile(file);
     return {

package/corpus/templates/design/actions/update-file.ts

@@ -33,8 +33,14 @@ function rowsAffected(result: unknown): number | undefined {
  * `skippedStaleMirror?: true` is added to the result ONLY in the narrow
  * SQL-mirror-only staleness case: `content` was provided, `syncCollab` was
  * explicitly `false`, a live collaboration document exists for this file,
- * and the caller's `expectedVersionHash` no longer matches that live text.
- * In that case the content column is intentionally left untouched (the live
+ * and the caller's `expectedVersionHash` matches NEITHER the live collab
+ * text, NOR the `content` being written (an own edit that raced ahead via
+ * Yjs), NOR the current SQL mirror content. A caller whose hash matches the
+ * current mirror is the mirror column's own lineage (mirror-lineage rescue):
+ * it proceeds instead of skipping, advancing the mirror AND diff-merging its
+ * content into the live doc.
+ * In the genuinely-stale case the content column is intentionally left
+ * untouched (the live
  * collab document remains the source of truth) while any `filename`/
  * `fileType` updates in the same call still apply, and the action returns
  * success instead of throwing. The field is omitted (not `false`) in every
@@ -163,7 +169,24 @@ export default defineAction({
       // trying to sync into collab in the first place. Every other
       // expectedVersionHash combination (syncCollab true/default, or no live
       // collab state, or a matching hash, or no hash at all) is UNCHANGED.
+      //
+      // Own-edit false-positive fix: a single client's own edit reaches the
+      // live collab doc via TWO independent, unordered paths — the Yjs
+      // update (~80ms client debounce, applied to the server's in-memory doc
+      // as soon as its POST lands) and this guarded update-file call (~400ms
+      // client debounce). The Yjs path usually wins the race, so by the time
+      // this call's hash check runs, `liveContent` often already equals the
+      // very `content` this call is trying to write — that is NOT a
+      // divergent concurrent edit, it's the same edit having arrived early
+      // by a different transport. Comparing hashes first would reject that
+      // as "stale" and permanently skip the SQL mirror write (there is no
+      // background job that later reconciles design_files.content from the
+      // live collab doc — see hasCollabState below), silently losing writes
+      // on every edit after the first in a session. Check content equality
+      // BEFORE the hash comparison so this exact-match case always proceeds
+      // as a normal write instead of hitting either the skip or throw path.
       let skipContentWrite = false;
+      let mirrorLineageCollabSync = false;
       if (expectedVersionHash !== undefined && content !== undefined) {
         const collabExists = await hasCollabState(id);
         let liveContent: string;
@@ -177,10 +200,52 @@ export default defineAction({
             .limit(1);
           liveContent = current?.content ?? "";
         }
-        if (sourceContentHash(liveContent) !== expectedVersionHash) {
+        if (
+          liveContent !== content &&
+          sourceContentHash(liveContent) !== expectedVersionHash
+        ) {
           if (syncCollab === false && collabExists) {
-            skipContentWrite = true;
-            skippedStaleMirror = true;
+            // Mirror-lineage rescue (sequential-edit data-loss fix, verified
+            // live): the client's Yjs transact and its guarded update-file
+            // call ride two independent transports, and the Yjs pipe can lag
+            // or silently die — reproduced with a live collab doc that never
+            // received EITHER of two sequential scrub edits while the HTTP
+            // saves advanced the SQL mirror normally. Comparing the caller
+            // only against that stale live text mis-classified the SECOND
+            // save as a divergent writer and silently dropped it. When the
+            // caller's expectedVersionHash matches the CURRENT SQL mirror,
+            // the caller is the mirror's own uninterrupted lineage (a plain
+            // CAS success against the column this write updates) while the
+            // live doc is the diverging party — a dead/lagging client Yjs
+            // pipe or a concurrent live-only editor. Do NOT skip, and do NOT
+            // silently drop either side: proceed with the mirror write AND
+            // push `content` through the collab layer exactly like
+            // syncCollab:true does (mirrorLineageCollabSync below). The
+            // applyText char-diff merge folds the caller's change into the
+            // live doc as a CRDT diff, so no one's edits are dropped: the
+            // mirror advances with the caller, and the live doc receives the
+            // caller's change as a diff-merge that preserves any other
+            // editor's live edits. Only callers matching NEITHER the live
+            // text NOR the mirror are genuinely stale and still hit the skip
+            // below.
+            const [mirrorRow] = await db
+              .select({ content: schema.designFiles.content })
+              .from(schema.designFiles)
+              .where(eq(schema.designFiles.id, id))
+              .limit(1);
+            if (
+              sourceContentHash(mirrorRow?.content ?? "") ===
+              expectedVersionHash
+            ) {
+              // Caller is exactly at the persisted mirror's tip — the live
+              // collab doc is the lagging party, not the caller. Write the
+              // mirror normally and also sync the caller's content into the
+              // live doc via the collab diff-merge below.
+              mirrorLineageCollabSync = true;
+            } else {
+              skipContentWrite = true;
+              skippedStaleMirror = true;
+            }
           } else {
             throw new Error(
               "File changed since it was read. Re-read the file and retry.",
@@ -263,8 +328,12 @@ export default defineAction({
         }
       }
 
-      // Push content through the collab layer so live editors see the change
-      if (content !== undefined && syncCollab) {
+      // Push content through the collab layer so live editors see the change.
+      // mirrorLineageCollabSync: a syncCollab:false caller whose hash matched
+      // the current SQL mirror (mirror-lineage rescue) also syncs here, so a
+      // dead/lagging live doc receives the caller's change as a CRDT
+      // diff-merge instead of silently diverging from the mirror.
+      if (content !== undefined && (syncCollab || mirrorLineageCollabSync)) {
         const collabExists = await hasCollabState(id);
         if (collabExists) {
           await applyText(id, content, "content", "agent");

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

@@ -865,9 +865,16 @@ function snapshotEndpointUrl(bridgeUrl: string, previewUrl: string): string {
   return endpoint.toString();
 }
 
-function liveEditEndpointUrl(bridgeUrl: string, previewUrl: string): string {
+export function liveEditEndpointUrl(
+  bridgeUrl: string,
+  previewUrl: string,
+  options?: { includeEditorBridge?: boolean },
+): string {
   const endpoint = new URL("/live-edit", bridgeUrl);
   endpoint.searchParams.set("url", previewUrl);
+  if (options?.includeEditorBridge === false) {
+    endpoint.searchParams.set("bridge", "0");
+  }
   return endpoint.toString();
 }
 
@@ -981,9 +988,38 @@ export function getEmbeddedIframeBackgroundColor(args: {
     : (args.embeddedFrameBackground ?? "transparent");
 }
 
+/**
+ * CSS rule that shifts embedded-frame (board) content so board-coordinate
+ * (0,0) lands at the center of the board iframe's oversized surface.
+ *
+ * The selector is deliberately scoped to DIRECT `<body>` children only.
+ * `translate` composes per element, so a blanket
+ * `[data-agent-native-node-id]{translate:…}` rule shifted every NESTED
+ * node-id-bearing descendant by the surface offset AGAIN (+65536px per
+ * nesting level) — any board child nested inside another board primitive
+ * rendered tens of thousands of px outside its parent (i.e. visually
+ * vanished) even when its persisted parent-relative left/top were perfectly
+ * correct, and every rect-based coordinate computation on nested board
+ * content was poisoned by the extra offset.
+ *
+ * Scoping (rather than wrapping content in a single offset container) is the
+ * robust fix here because board elements are DOCUMENTED direct `<body>`
+ * children (see shared/board-file.ts module doc + emptyBoardHtml): every
+ * creation path appends at body level (appendCanvasPrimitiveToHtml,
+ * boardObjectEntryToHtmlFragment, moveNodeBetweenDocuments' body-append),
+ * and several consumers key on that structure with `body > …` selectors
+ * (BOARD_SURFACE_RENDER_STYLE) and depth-1 walks
+ * (backfillBoardPrimitiveMarkers, getBoardContentLayerSignature). A wrapper
+ * element would silently break all of those structural contracts.
+ *
+ * With this rule, the offset applies exactly once — to top-level board
+ * elements — and nested children position purely via parent-relative
+ * left/top inside their (absolutely positioned) parent, like any normal
+ * CSS containing-block hierarchy.
+ */
 function embeddedContentOffsetStyle(x: number, y: number): string {
   if (x === 0 && y === 0) return "";
-  return `<style data-agent-native-content-offset>[data-agent-native-node-id]{translate:${Math.round(x)}px ${Math.round(y)}px;}</style>`;
+  return `<style data-agent-native-content-offset>body > [data-agent-native-node-id]{translate:${Math.round(x)}px ${Math.round(y)}px;}</style>`;
 }
 
 function injectEmbeddedFrameStyle(content: string, style: string): string {
@@ -1039,6 +1075,60 @@ export interface IframeContextMenuPayload {
   info?: ElementInfo | null;
 }
 
+/**
+ * Creation-race keystroke routing: after the host calls `beginTextEdit(nodeId)`
+ * for a JUST-created text element, there is a window (persist round-trip +
+ * bridge activation) where the browser focus still sits on the HOST document.
+ * Keystrokes typed in that window used to fall into host keyboard shortcuts —
+ * letters switched tools, digits zoomed, and Delete/Backspace DELETED the
+ * selected layer/screen — while the characters themselves were silently lost.
+ *
+ * While a text edit is pending, every host keydown is routed through this
+ * pure helper:
+ * - printable characters are BUFFERED (replayed into the editable once the
+ *   bridge reports the session active) and swallowed,
+ * - Backspace edits the buffer, Delete/Enter/Tab/arrows are swallowed so they
+ *   can never reach host layer-deletion/navigation,
+ * - Escape clears the pending buffer (user aborted) and is swallowed,
+ * - IME composition and Cmd/Ctrl chords (undo!) pass through untouched.
+ *
+ * Exported for unit tests (DesignCanvas.pending-text-edit.test.ts).
+ */
+export type PendingTextEditKeyAction =
+  | { action: "buffer"; char: string }
+  | { action: "drop-last" }
+  | { action: "swallow" }
+  | { action: "clear-and-swallow" }
+  | { action: "pass" };
+
+export function routePendingTextEditKey(e: {
+  key: string;
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  altKey?: boolean;
+  isComposing?: boolean;
+}): PendingTextEditKeyAction {
+  if (e.isComposing) return { action: "pass" };
+  if (e.metaKey || e.ctrlKey) return { action: "pass" };
+  if (e.key === "Escape") return { action: "clear-and-swallow" };
+  if (e.key === "Backspace") return { action: "drop-last" };
+  if (
+    e.key === "Delete" ||
+    e.key === "Enter" ||
+    e.key === "Tab" ||
+    e.key.startsWith("Arrow")
+  ) {
+    return { action: "swallow" };
+  }
+  if (e.key.length === 1) return { action: "buffer", char: e.key };
+  return { action: "pass" };
+}
+
+/** How long a pending text edit may wait for bridge activation before the
+ * keystroke routing above stands down (matches the bridge's own ~2s
+ * begin-text-edit retry window, plus round-trip slack). */
+export const PENDING_TEXT_EDIT_TIMEOUT_MS = 3000;
+
 export function DesignCanvas({
   content,
   contentKey,
@@ -1268,19 +1358,28 @@ export function DesignCanvas({
     () => contentHash(liveEditBridgeScript),
     [liveEditBridgeScript],
   );
-  const usesLiveEditExternalFrame =
+  const hasLiveEditExternalFrame =
+    sourceType === "localhost" && Boolean(bridgeUrl && rawExternalPreviewUrl);
+  const usesLiveEditEditorBridge =
     sourceType === "localhost" &&
     Boolean(bridgeUrl && rawExternalPreviewUrl) &&
     !interactMode &&
     !readOnly;
   const liveEditBridgeRegistered =
-    usesLiveEditExternalFrame &&
+    usesLiveEditEditorBridge &&
     registeredLiveEditBridgeKey === liveEditBridgeKey;
   const requiresEditableExternalSnapshot = false;
   const liveEditExternalPreviewUrl =
-    liveEditBridgeRegistered && bridgeUrl && rawExternalPreviewUrl
-      ? liveEditEndpointUrl(bridgeUrl, rawExternalPreviewUrl)
-      : null;
+    hasLiveEditExternalFrame &&
+    bridgeUrl &&
+    rawExternalPreviewUrl &&
+    interactMode
+      ? liveEditEndpointUrl(bridgeUrl, rawExternalPreviewUrl, {
+          includeEditorBridge: false,
+        })
+      : liveEditBridgeRegistered && bridgeUrl && rawExternalPreviewUrl
+        ? liveEditEndpointUrl(bridgeUrl, rawExternalPreviewUrl)
+        : null;
   const iframeRenderContent =
     activeExternalSnapshotHtml ??
     (requiresEditableExternalSnapshot ? "" : renderedContent);
@@ -1292,7 +1391,7 @@ export function DesignCanvas({
   const waitingForEditableExternalSnapshot =
     requiresEditableExternalSnapshot && !activeExternalSnapshotHtml;
   const waitingForLiveEditBridge =
-    usesLiveEditExternalFrame && !liveEditBridgeRegistered;
+    usesLiveEditEditorBridge && !liveEditBridgeRegistered;
   zoomRef.current = zoom;
   runtimeReplacementContentRef.current = runtimeReplacementContent;
   runtimeReplacementKeyRef.current = runtimeReplacementKey;
@@ -1302,7 +1401,7 @@ export function DesignCanvas({
   }, [onExternalContentSnapshot]);
 
   useEffect(() => {
-    if (!usesLiveEditExternalFrame || !bridgeUrl) {
+    if (!usesLiveEditEditorBridge || !bridgeUrl) {
       setRegisteredLiveEditBridgeKey(null);
       return;
     }
@@ -1345,7 +1444,7 @@ export function DesignCanvas({
     bridgeToken,
     liveEditBridgeKey,
     liveEditBridgeScript,
-    usesLiveEditExternalFrame,
+    usesLiveEditEditorBridge,
   ]);
 
   useEffect(() => {
@@ -1884,7 +1983,44 @@ export function DesignCanvas({
         }
         return;
       }
+      if (e.data.type === "text-edit-pending") {
+        // The bridge is waiting for a just-created node before it can enter
+        // text-edit mode (begin-text-edit arrived first). Arm the host-side
+        // keystroke buffer for the window — repeated pending:true re-posts
+        // for the same node (DesignEditor's T6 retry loop) only extend the
+        // wait, never reset an in-progress buffer.
+        const pendingNodeId =
+          typeof e.data.nodeId === "string" ? e.data.nodeId : "";
+        const currentPending = pendingTextEditRef.current;
+        if (e.data.pending && pendingNodeId) {
+          if (currentPending && currentPending.nodeId === pendingNodeId) {
+            currentPending.startedAt = Date.now();
+          } else {
+            pendingTextEditRef.current = {
+              nodeId: pendingNodeId,
+              buffer: "",
+              startedAt: Date.now(),
+            };
+          }
+        } else if (currentPending?.nodeId === pendingNodeId) {
+          pendingTextEditRef.current = null;
+        }
+        return;
+      }
       if (e.data.type === "text-editing-state") {
+        // Creation-race replay: the bridge just armed the session for the
+        // node we were waiting on — flush any keystrokes the host buffered
+        // during the round-trip window into the now-live editable.
+        if (e.data.active && pendingTextEditRef.current) {
+          const pendingBuffer = pendingTextEditRef.current.buffer;
+          pendingTextEditRef.current = null;
+          if (pendingBuffer) {
+            postOneShotBridgeMessage({
+              type: "text-edit-insert-text",
+              text: pendingBuffer,
+            });
+          }
+        }
         onTextEditingStateChange?.({
           active: Boolean(e.data.active),
           selector:
@@ -2075,6 +2211,7 @@ export function DesignCanvas({
     bridgeUrl,
     fusionUrl,
     flushPendingOneShotMessages,
+    postOneShotBridgeMessage,
   ]);
 
   const replayIframeEditorState = useCallback(() => {
@@ -2374,6 +2511,18 @@ export function DesignCanvas({
     (nodeId: string) => {
       const iframe = iframeRef.current;
       if (!iframe?.contentWindow || !nodeId) return;
+      // Arm the creation-race keystroke buffer (see routePendingTextEditKey):
+      // until the bridge reports text-editing-state active for this command,
+      // host keystrokes are buffered/swallowed instead of hitting host
+      // shortcuts, then replayed into the editable. Re-arming for the same
+      // node preserves an in-progress buffer.
+      if (pendingTextEditRef.current?.nodeId !== nodeId) {
+        pendingTextEditRef.current = {
+          nodeId,
+          buffer: "",
+          startedAt: Date.now(),
+        };
+      }
       postOneShotBridgeMessage({
         type: "begin-text-edit",
         nodeId,
@@ -2383,6 +2532,53 @@ export function DesignCanvas({
     [postOneShotBridgeMessage],
   );
 
+  // Creation-race keystroke routing (host side). Active only while a
+  // beginTextEdit() command is pending; see routePendingTextEditKey's doc
+  // comment for the exact policy. Capture-phase on window so it runs before
+  // the editor's own shortcut handlers.
+  const pendingTextEditRef = useRef<{
+    nodeId: string;
+    buffer: string;
+    startedAt: number;
+  } | null>(null);
+  useEffect(() => {
+    function onPendingTextEditKeyDown(e: KeyboardEvent) {
+      const pending = pendingTextEditRef.current;
+      if (!pending) return;
+      if (Date.now() - pending.startedAt > PENDING_TEXT_EDIT_TIMEOUT_MS) {
+        pendingTextEditRef.current = null;
+        return;
+      }
+      const routed = routePendingTextEditKey(e);
+      if (routed.action === "pass") return;
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      if (routed.action === "buffer") {
+        pending.buffer += routed.char;
+      } else if (routed.action === "drop-last") {
+        pending.buffer = pending.buffer.slice(0, -1);
+      } else if (routed.action === "clear-and-swallow") {
+        pendingTextEditRef.current = null;
+      }
+    }
+    function onPendingTextEditPointerDown() {
+      // The user clicked somewhere else in the host — stand down so buffered
+      // keys are never replayed into an edit they've abandoned.
+      pendingTextEditRef.current = null;
+    }
+    window.addEventListener("keydown", onPendingTextEditKeyDown, true);
+    window.addEventListener("pointerdown", onPendingTextEditPointerDown, true);
+    return () => {
+      window.removeEventListener("keydown", onPendingTextEditKeyDown, true);
+      window.removeEventListener(
+        "pointerdown",
+        onPendingTextEditPointerDown,
+        true,
+      );
+    };
+  }, []);
+
   const sendStyleChange = useCallback(
     (
       selector: string,
@@ -3004,7 +3200,7 @@ export function DesignCanvas({
         </div>
       ) : null}
       {waitingForEditableExternalSnapshot || waitingForLiveEditBridge ? (
-        <div className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/85 px-4 text-center text-sm text-muted-foreground">
+        <div className="pointer-events-auto absolute inset-0 z-10 flex items-center justify-center bg-background/85 px-4 text-center text-sm text-muted-foreground">
           {waitingForLiveEditBridge ? (
             <div className="max-w-[28rem] rounded-md border bg-card px-4 py-3 shadow-sm">
               {

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

@@ -213,6 +213,7 @@ import {
   parseGradientLayer,
   removeFillLayerAtIndex,
   SOLID_FILL_ID,
+  solidToGradientPatch,
   splitCssLayers,
   withLayerSizeMarker,
 } from "./edit-panel/fill-gradient-helpers";
@@ -356,11 +357,14 @@ export {
   truncateOpeningTag,
 };
 export {
+  averageGradientOpacity,
   buildGradientLayer,
+  defaultGradientStops,
   isLayerHiddenBySize,
   joinCssLayers,
   parseGradientLayer,
   removeFillLayerAtIndex,
+  solidToGradientPatch,
   splitCssLayers,
   withLayerSizeMarker,
   type FillLayerArrays,