@agent-native/core 0.88.0 → 0.90.2

package/corpus/templates/design/actions/apply-visual-edit.ts

@@ -3,16 +3,17 @@ import {
   agentEnterDocument,
   agentLeaveDocument,
   agentUpdateSelection,
-  applyText,
-  getText,
-  hasCollabState,
-  seedFromText,
 } from "@agent-native/core/collab";
 import { accessFilter, assertAccess } from "@agent-native/core/sharing";
 import { and, eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import {
+  readLiveSourceFile,
+  writeInlineSourceFile,
+  type SourceWorkspaceFile,
+} from "../server/source-workspace.js";
 import {
   applyVisualEdit,
   type AutoLayoutEditIntent,
@@ -24,7 +25,12 @@ import {
 } from "../shared/code-layer.js";
 import { agentSelectionDescriptor } from "../shared/collab-selection.js";
 import type { TailwindBreakpointPrefix } from "../shared/design-state.js";
-import { utilityStem, widthToPrefix } from "../shared/responsive-classes.js";
+import {
+  breakpointUpperBoundPx,
+  planBreakpointStyleWrite,
+  utilityStem,
+  widthToPrefix,
+} from "../shared/responsive-classes.js";
 
 /**
  * Short human-readable label describing an edit intent, shown next to the
@@ -38,6 +44,7 @@ function editIntentLabel(intent: EditIntent): string {
       return "Editing style";
     case "class":
     case "responsive-class":
+    case "breakpoint-style":
       return "Editing styles";
     case "moveNode":
       return "Moving element";
@@ -154,6 +161,139 @@ function scopeClassIntentToBreakpoint(
   return intent;
 }
 
+/**
+ * Convert a `class` or `style` intent into the equivalent Framer-scoped edit
+ * for a desktop-down max-width bound (§6.4 breakpoint bar semantics):
+ *
+ * - `class` add/replace/remove → `responsive-class` with `maxWidthPx`
+ *   (writes/removes a `max-[<bound>px]:` scoped token).
+ * - `style` → the single class-vs-media decision (`planBreakpointStyleWrite`):
+ *   Tailwind-utility values become scoped classes; raw CSS values become
+ *   managed `@media (max-width: <bound>px)` rules via `breakpoint-style`.
+ * - Everything else passes through unchanged.
+ */
+function scopeIntentToFramerBound(
+  intent: EditIntent,
+  maxWidthPx: number,
+): EditIntent {
+  if (intent.kind === "class") {
+    if (intent.operation === "add" || intent.operation === "replace") {
+      const tokens =
+        intent.operation === "replace"
+          ? intent.to
+            ? [intent.to]
+            : []
+          : (intent.classNames ?? (intent.className ? [intent.className] : []));
+      if (tokens.length !== 1 || !tokens[0]) return intent;
+      return {
+        kind: "responsive-class",
+        target: intent.target,
+        prefix: "base", // ignored when maxWidthPx is set
+        maxWidthPx,
+        operation: intent.operation,
+        utility: tokens[0],
+      };
+    }
+    if (intent.operation === "remove") {
+      const tokens =
+        intent.classNames ?? (intent.className ? [intent.className] : []);
+      if (tokens.length !== 1 || !tokens[0]) return intent;
+      return {
+        kind: "responsive-class",
+        target: intent.target,
+        prefix: "base",
+        maxWidthPx,
+        operation: "remove",
+        stem: stemFromToken(tokens[0]),
+      };
+    }
+    // "set" — no per-breakpoint analog.
+    return intent;
+  }
+
+  if (intent.kind === "style") {
+    const plan = planBreakpointStyleWrite({
+      property: intent.property,
+      value: intent.value,
+      upperBoundPx: maxWidthPx,
+    });
+    if (plan.mode === "class") {
+      return {
+        kind: "responsive-class",
+        target: intent.target,
+        prefix: "base",
+        maxWidthPx: plan.boundPx,
+        operation: "replace",
+        utility: plan.utility,
+      };
+    }
+    if (plan.mode === "media") {
+      return {
+        kind: "breakpoint-style",
+        target: intent.target,
+        maxWidthPx: plan.maxWidthPx,
+        property: plan.property,
+        value: plan.value,
+        operation: "set",
+      };
+    }
+    return intent;
+  }
+
+  return intent;
+}
+
+/**
+ * Resolve the Framer desktop-down bound for a design-file edit from the
+ * design's stored breakpoint set (+ the edited screen's primary width).
+ *
+ * - `{ kind: "bound" }` — a wider frame exists; scope below it.
+ * - `{ kind: "base" }` — the active frame IS the widest context; edits
+ *   belong to the base layer (Framer semantics).
+ * - `{ kind: "unknown" }` — the design has no breakpoint set; callers fall
+ *   back to the legacy min-width prefix behaviour.
+ */
+function resolveFramerBoundFromDesignData(
+  designData: string | null,
+  fileId: string,
+  activeFrameWidthPx: number,
+): { kind: "bound"; boundPx: number } | { kind: "base" } | { kind: "unknown" } {
+  if (!designData) return { kind: "unknown" };
+  try {
+    const parsed = JSON.parse(designData) as Record<string, unknown>;
+    const rawSet = parsed.breakpointSet as
+      | { breakpoints?: Array<{ widthPx?: unknown }> }
+      | undefined;
+    const widths = Array.isArray(rawSet?.breakpoints)
+      ? rawSet.breakpoints
+          .map((bp) => bp?.widthPx)
+          .filter(
+            (width): width is number =>
+              typeof width === "number" && Number.isFinite(width),
+          )
+      : [];
+    if (widths.length === 0) return { kind: "unknown" };
+
+    const metadataByFileId = parsed.screenMetadata as
+      | Record<string, { width?: unknown } | undefined>
+      | undefined;
+    const rawScreenWidth = metadataByFileId?.[fileId]?.width;
+    const screenWidthPx =
+      typeof rawScreenWidth === "number" && Number.isFinite(rawScreenWidth)
+        ? rawScreenWidth
+        : null;
+
+    const boundPx = breakpointUpperBoundPx(
+      widths,
+      activeFrameWidthPx,
+      screenWidthPx,
+    );
+    return boundPx === null ? { kind: "base" } : { kind: "bound", boundPx };
+  } catch {
+    return { kind: "unknown" };
+  }
+}
+
 function parseJsonString(value: unknown): unknown {
   if (typeof value !== "string") return value;
   try {
@@ -226,6 +366,30 @@ const intentSchema = z.preprocess(
       from: z.string().optional(),
       to: z.string().optional(),
     }),
+    z.object({
+      kind: z.literal("breakpoint-style"),
+      target: targetSchema,
+      maxWidthPx: z
+        .number()
+        .int()
+        .positive()
+        .describe(
+          "Inclusive upper viewport bound (px). The declaration persists as a managed '@media (max-width: <bound>px)' rule in the <style data-agent-native-breakpoints> block — the fallback for values responsive class prefixes can't express (exact px positions, rgb()/calc() values). Use breakpointUpperBoundPx semantics: just below the next-wider breakpoint frame.",
+        ),
+      property: z
+        .string()
+        .describe("CSS property to set (camelCase or kebab-case)."),
+      value: z
+        .string()
+        .optional()
+        .describe("CSS value. Required for operation 'set'."),
+      operation: z
+        .enum(["set", "remove"])
+        .optional()
+        .describe(
+          "'set' (default) writes/overwrites the scoped declaration; 'remove' deletes it so the base value cascades back down.",
+        ),
+    }),
     z.object({
       kind: z.literal("textContent"),
       target: targetSchema,
@@ -290,28 +454,16 @@ const intentSchema = z.preprocess(
   ]),
 );
 
-async function liveContent(
-  fileId: string,
-  storedContent: string,
-): Promise<string> {
-  try {
-    if (await hasCollabState(fileId)) {
-      const live = await getText(fileId, "content");
-      if (typeof live === "string") return live;
-    }
-  } catch {
-    // Collab reads are best-effort; SQL content remains the fallback.
-  }
-  return storedContent;
-}
-
 async function resolveEditableDesignFile(
   source: VisualEditActionSource,
 ): Promise<{
   id: string;
   designId: string;
   filename: string;
+  fileType: string;
   content: string;
+  versionHash: string;
+  designData: string | null;
   codeLayerSource: CodeLayerSource;
 }> {
   if (!source.fileId && !source.designId) {
@@ -340,6 +492,7 @@ async function resolveEditableDesignFile(
       filename: schema.designFiles.filename,
       fileType: schema.designFiles.fileType,
       content: schema.designFiles.content,
+      designData: schema.designs.data,
     })
     .from(schema.designFiles)
     .innerJoin(
@@ -368,11 +521,32 @@ async function resolveEditableDesignFile(
 
   await assertAccess("design", file.designId, "editor");
 
+  // Read the live (collab-authoritative, not just SQL-stored) content and
+  // capture its versionHash so the eventual persist can be conditioned on
+  // this exact base still being current — see persistDesignFileEdit below.
+  // Same read helper the 8 sibling actions (insert-design-native-asset.ts,
+  // insert-asset.ts, etc.) migrated to, closing the write-race window where
+  // a concurrent editor's change landed between this read and the raw
+  // unconditional write this action used to do.
+  const workspaceFile: SourceWorkspaceFile = {
+    id: file.id,
+    designId: file.designId,
+    filename: file.filename,
+    fileType: file.fileType,
+    content: file.content,
+    createdAt: null,
+    updatedAt: null,
+  };
+  const live = await readLiveSourceFile(workspaceFile);
+
   return {
     id: file.id,
     designId: file.designId,
     filename: file.filename,
-    content: await liveContent(file.id, file.content ?? ""),
+    fileType: file.fileType,
+    content: live.content,
+    versionHash: live.versionHash,
+    designData: file.designData ?? null,
     codeLayerSource: {
       kind: "design-file",
       designId: file.designId,
@@ -386,30 +560,27 @@ async function resolveEditableDesignFile(
 async function persistDesignFileEdit(file: {
   id: string;
   designId: string;
+  filename: string;
+  fileType: string;
   content: string;
+  expectedVersionHash: string;
 }): Promise<void> {
-  await assertAccess("design", file.designId, "editor");
-
-  const db = getDb();
-  const now = new Date().toISOString();
-
   agentEnterDocument(file.id);
   try {
-    await db
-      .update(schema.designFiles)
-      .set({ content: file.content, updatedAt: now })
-      .where(eq(schema.designFiles.id, file.id));
-
-    if (await hasCollabState(file.id)) {
-      await applyText(file.id, file.content, "content", "agent");
-    } else {
-      await seedFromText(file.id, file.content);
-    }
-
-    await db
-      .update(schema.designs)
-      .set({ updatedAt: now })
-      .where(eq(schema.designs.id, file.designId));
+    await writeInlineSourceFile({
+      designId: file.designId,
+      file: {
+        id: file.id,
+        designId: file.designId,
+        filename: file.filename,
+        fileType: file.fileType,
+        content: file.content,
+        createdAt: null,
+        updatedAt: null,
+      },
+      content: file.content,
+      expectedVersionHash: file.expectedVersionHash,
+    });
   } finally {
     agentLeaveDocument(file.id);
   }
@@ -419,7 +590,9 @@ export default defineAction({
   description:
     "Apply one deterministic visual edit to a code-backed HTML design layer. " +
     "Supports safe inline style, class, and leaf textContent edits on inline/SQL HTML files; escalates ambiguous or structural edits with PatchResult statuses. " +
-    "Pass activeBreakpoint (or activeFrameWidthPx) to scope a class edit to a specific Tailwind responsive prefix; omit for global (backward-compatible) behaviour.",
+    "Responsive editing (§6.4): pass activeFrameWidthPx (the active breakpoint frame width, matching the UI's breakpoint bar) to scope class AND style edits Framer-style — overrides apply below the next-wider frame and cascade down; the widest frame is the base. " +
+    "Raw CSS values persist as managed @media rules (<style data-agent-native-breakpoints>); Tailwind-utility values become max-[<bound>px]: classes. " +
+    "Pass activeBreakpoint to force legacy min-width prefix scoping for class edits, or maxWidthPx for an explicit desktop-down bound. Omit all three for base (global) behaviour.",
   schema: z.object({
     source: sourceSchema.describe(
       "Edit source. Use kind=design-file with designId/filename or fileId to persist into SQL; kind=inline-html with html for a preview-only patch.",
@@ -446,7 +619,16 @@ export default defineAction({
       .optional()
       .nullable()
       .describe(
-        "Canvas frame width in pixels. When activeBreakpoint is not set, this is used to derive the Tailwind responsive prefix (via widthToPrefix) and scope class edits accordingly. Ignored when activeBreakpoint is provided.",
+        "Active breakpoint frame width in pixels — matches the UI's breakpoint bar. For design-file sources whose design has a breakpoint set, 'class' AND 'style' intents are scoped Framer-style: overrides apply below the next-wider frame (max-[<bound>px]: classes, or managed @media rules for raw CSS values); the widest frame is the base and writes unscoped. When the design has no breakpoint set (or for inline-html sources) class edits fall back to the legacy min-width Tailwind prefix via widthToPrefix. Ignored when activeBreakpoint is provided.",
+      ),
+    maxWidthPx: z
+      .number()
+      .int()
+      .positive()
+      .optional()
+      .nullable()
+      .describe(
+        "Explicit Framer desktop-down bound (px): scope this edit to apply at viewport widths <= this value. Overrides activeBreakpoint/activeFrameWidthPx derivation. Applies to 'class' and 'style' intents.",
       ),
   }),
   run: async ({
@@ -455,22 +637,36 @@ export default defineAction({
     includeContent,
     activeBreakpoint,
     activeFrameWidthPx,
+    maxWidthPx,
   }) => {
     const actionSource = source as VisualEditActionSource;
     let editIntent = intent as EditIntent;
 
-    // Breakpoint scoping: when the caller specifies an active breakpoint (or
-    // frame width) and the intent is a plain `"class"` edit, convert it to a
-    // `"responsive-class"` edit scoped to the appropriate Tailwind prefix.
-    // All other intent kinds (style, textContent, moveNode, responsive-class)
-    // are passed through unchanged — the caller either already supplied the
-    // correct prefix (responsive-class) or does not need one (the others).
-    const activePrefix = resolveActivePrefix(
-      activeBreakpoint,
-      activeFrameWidthPx,
-    );
-    if (activePrefix !== null && editIntent.kind === "class") {
-      editIntent = scopeClassIntentToBreakpoint(editIntent, activePrefix);
+    // Breakpoint scoping precedence (§6.4):
+    //
+    // 1. Explicit `maxWidthPx` param → Framer desktop-down scope for `class`
+    //    AND `style` intents (max-[<bound>px]: classes / managed @media).
+    // 2. Explicit `activeBreakpoint` prefix → legacy min-width Tailwind
+    //    prefix scoping for `class` intents (backward-compatible).
+    // 3. `activeFrameWidthPx` only → design-file sources resolve the Framer
+    //    bound from the design's breakpoint set (below, after the file is
+    //    loaded); other sources fall back to the legacy prefix path.
+    if (
+      maxWidthPx != null &&
+      (editIntent.kind === "class" || editIntent.kind === "style")
+    ) {
+      editIntent = scopeIntentToFramerBound(editIntent, maxWidthPx);
+    } else if (
+      actionSource.kind !== "design-file" ||
+      activeBreakpoint != null
+    ) {
+      const activePrefix = resolveActivePrefix(
+        activeBreakpoint,
+        activeFrameWidthPx,
+      );
+      if (activePrefix !== null && editIntent.kind === "class") {
+        editIntent = scopeClassIntentToBreakpoint(editIntent, activePrefix);
+      }
     }
 
     if (actionSource.kind === "inline-html") {
@@ -512,6 +708,34 @@ export default defineAction({
     }
 
     const file = await resolveEditableDesignFile(actionSource);
+
+    // §6.4 — design-file Framer scoping resolved from the stored breakpoint
+    // set (see precedence note above): the bound is just below the
+    // next-wider frame; the widest frame is the base and writes unscoped.
+    if (
+      maxWidthPx == null &&
+      activeBreakpoint == null &&
+      activeFrameWidthPx != null &&
+      (editIntent.kind === "class" || editIntent.kind === "style")
+    ) {
+      const bound = resolveFramerBoundFromDesignData(
+        file.designData,
+        file.id,
+        activeFrameWidthPx,
+      );
+      if (bound.kind === "bound") {
+        editIntent = scopeIntentToFramerBound(editIntent, bound.boundPx);
+      } else if (bound.kind === "unknown" && editIntent.kind === "class") {
+        // No breakpoint set on this design — legacy min-width prefix path.
+        const activePrefix = resolveActivePrefix(null, activeFrameWidthPx);
+        if (activePrefix !== null) {
+          editIntent = scopeClassIntentToBreakpoint(editIntent, activePrefix);
+        }
+      }
+      // bound.kind === "base": the active frame IS the widest context —
+      // the edit stays a plain base write that cascades down.
+    }
+
     const patch = applyVisualEdit(file.content, editIntent, {
       source: file.codeLayerSource,
     });
@@ -535,7 +759,10 @@ export default defineAction({
       await persistDesignFileEdit({
         id: file.id,
         designId: file.designId,
+        filename: file.filename,
+        fileType: file.fileType,
         content: patch.content,
+        expectedVersionHash: file.versionHash,
       });
     }
 

package/corpus/templates/design/actions/create-component.ts

@@ -28,15 +28,7 @@
  */
 
 import { defineAction } from "@agent-native/core";
-import {
-  agentEnterDocument,
-  agentLeaveDocument,
-  agentUpdateSelection,
-  applyText,
-  getText,
-  hasCollabState,
-  seedFromText,
-} from "@agent-native/core/collab";
+import { agentUpdateSelection } from "@agent-native/core/collab";
 import {
   accessFilter,
   assertAccess,
@@ -47,6 +39,11 @@ import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
 import "../server/db/index.js"; // ensure registerShareableResource runs
+import {
+  readLiveSourceFile,
+  writeInlineSourceFile,
+  type SourceWorkspaceFile,
+} from "../server/source-workspace.js";
 import { resolveSourceCapabilities } from "../shared/capability-resolver.js";
 import { buildCodeLayerProjection } from "../shared/code-layer.js";
 import type { CodeLayerNode, CodeLayerSource } from "../shared/code-layer.js";
@@ -209,54 +206,6 @@ export function applyComponentAnnotations(
   };
 }
 
-// ─── DB helpers ───────────────────────────────────────────────────────────────
-
-async function liveContent(
-  fileId: string,
-  storedContent: string,
-): Promise<string> {
-  try {
-    if (await hasCollabState(fileId)) {
-      const live = await getText(fileId, "content");
-      if (typeof live === "string") return live;
-    }
-  } catch {
-    // Collab reads are best-effort; SQL content is the fallback.
-  }
-  return storedContent;
-}
-
-async function persistEdit(file: {
-  id: string;
-  designId: string;
-  content: string;
-}): Promise<void> {
-  await assertAccess("design", file.designId, "editor");
-  const db = getDb();
-  const now = new Date().toISOString();
-
-  agentEnterDocument(file.id);
-  try {
-    await db
-      .update(schema.designFiles)
-      .set({ content: file.content, updatedAt: now })
-      .where(eq(schema.designFiles.id, file.id));
-
-    if (await hasCollabState(file.id)) {
-      await applyText(file.id, file.content, "content", "agent");
-    } else {
-      await seedFromText(file.id, file.content);
-    }
-
-    await db
-      .update(schema.designs)
-      .set({ updatedAt: now })
-      .where(eq(schema.designs.id, file.designId));
-  } finally {
-    agentLeaveDocument(file.id);
-  }
-}
-
 // ─── Action ───────────────────────────────────────────────────────────────────
 
 export default defineAction({
@@ -371,7 +320,26 @@ export default defineAction({
 
     if (!file) throw new Error("Design HTML file not found.");
 
-    const html = await liveContent(file.id, file.content ?? "");
+    // Read the LIVE base (collab text when present, else the SQL row) right
+    // before transforming, and carry its versionHash through to the write
+    // below. writeInlineSourceFile re-reads the live text immediately before
+    // its own applyText/DB write and rejects if it no longer matches this
+    // hash — closing the race window where a concurrent editor/agent write
+    // lands between this read and the persist (the same stale-diff-base bug
+    // fixed for insert-design-native-asset.ts and insert-asset.ts: a diff/patch
+    // computed from a stale base, unconditionally persisted, corrupts or
+    // drops the other writer's change).
+    const workspaceFile: SourceWorkspaceFile = {
+      id: file.id,
+      designId: file.designId,
+      filename: file.filename ?? "",
+      fileType: "html",
+      content: file.content,
+      createdAt: null,
+      updatedAt: null,
+    };
+    const live = await readLiveSourceFile(workspaceFile);
+    const html = live.content;
 
     // ── Resolve node ─────────────────────────────────────────────────────────
     const codeLayerSource: CodeLayerSource = {
@@ -410,10 +378,11 @@ export default defineAction({
 
     // ── Persist ──────────────────────────────────────────────────────────────
     if (changed) {
-      await persistEdit({
-        id: file.id,
+      await writeInlineSourceFile({
         designId: file.designId,
+        file: workspaceFile,
         content: patchedContent,
+        expectedVersionHash: live.versionHash,
       });
 
       agentUpdateSelection(file.id, {

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

@@ -6,6 +6,7 @@ import { nanoid } from "nanoid";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { annotateScreenHtmlForPersist } from "../shared/screen-annotation.js";
 
 export default defineAction({
   description:
@@ -56,18 +57,24 @@ export default defineAction({
     const id = nanoid();
     const now = new Date().toISOString();
 
+    // Stamp missing data-agent-native-node-id attributes before persisting so
+    // the new screen is fully addressable by id-keyed editor operations from
+    // the moment it's created, instead of depending on a client-side backfill
+    // the first time someone opens it.
+    const annotatedContent = annotateScreenHtmlForPersist(content, fileType);
+
     await db.insert(schema.designFiles).values({
       id,
       designId,
       filename,
       fileType: fileType ?? "html",
-      content,
+      content: annotatedContent,
       createdAt: now,
       updatedAt: now,
     });
 
     // Seed collab state for the new file
-    await seedFromText(id, content);
+    await seedFromText(id, annotatedContent);
 
     // Update the design's updatedAt timestamp
     await db

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

@@ -9,6 +9,7 @@ import { nanoid } from "nanoid";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
+import { annotateScreenHtmlForPersist } from "../shared/screen-annotation.js";
 
 export default defineAction({
   description:
@@ -82,14 +83,42 @@ export default defineAction({
       updatedAt: now,
     });
 
-    // Copy all associated files using the pre-generated IDs
+    // Copy all associated files using the pre-generated IDs. `content` is
+    // copied verbatim, including any `data-agent-native-node-id` attributes
+    // already stamped on the source screen — those ids are NOT regenerated
+    // here.
+    //
+    // This is a deliberate simplification, not an oversight: node ids are
+    // scoped to a single file's DOM, never looked up globally. Every
+    // consumer (buildCodeLayerProjection/ensureCodeLayerNodeIdsInHtml in
+    // shared/code-layer.ts, the MultiScreenCanvas/editor-chrome bridge
+    // querySelectorAll calls) resolves ids against one screen's parsed HTML
+    // or one iframe's contentDocument, and each design's screens render in
+    // their own isolated iframe — so a duplicated screen sharing ids with its
+    // source design is harmless: there is no code path that queries two
+    // screens' DOMs together. Regenerating ids here would additionally have
+    // to rewrite every `[data-agent-native-node-id="..."]` selector embedded
+    // inline by shared/motion-compiler.ts and shared/interaction-states.ts
+    // (motion timelines and hover/focus states target nodes by id in CSS
+    // baked into the same HTML string) to keep them pointing at the
+    // corresponding element — a real rewrite with real regression risk
+    // (silently dropped motion/interaction styling on duplicated screens) to
+    // fix a collision that has no observable effect. If a future feature
+    // introduces cross-design lookups keyed on node id alone (e.g. pasting
+    // one design's screen into another), reconsider this and add an id-remap
+    // pass that also rewrites those embedded CSS selectors in lockstep.
+    //
+    // Still fill in any MISSING ids (belt-and-suspenders for designs
+    // generated/imported before ids were stamped at creation time): this only
+    // adds ids where none exist and never touches an id that's already
+    // present, so it can't disturb the existing-id-copy contract above.
     for (const file of files) {
       await db.insert(schema.designFiles).values({
         id: idMap.get(file.id)!,
         designId: newId,
         filename: file.filename,
         fileType: file.fileType,
-        content: file.content,
+        content: annotateScreenHtmlForPersist(file.content, file.fileType),
         createdAt: now,
         updatedAt: now,
       });