@agent-native/core 0.85.7 → 0.86.1

package/corpus/templates/slides/actions/index-design-system-with-builder.ts

@@ -1,7 +1,7 @@
 import { defineAction } from "@agent-native/core";
 import {
+  buildBuilderDesignSystemIndexFiles,
   startBuilderDesignSystemIndex,
-  type BuilderDesignSystemIndexFile,
 } from "@agent-native/core/server";
 import {
   getRequestOrgId,
@@ -11,50 +11,17 @@ import { z } from "zod";
 
 import { upsertBuilderProxyDesignSystem } from "../server/lib/builder-design-system-proxy.js";
 
-const MAX_CODE_FILES = 50;
-const MAX_TOTAL_CODE_BYTES = 2 * 1024 * 1024;
-
 const codeFileSchema = z.object({
   filename: z.string().trim().min(1).describe("File name or relative path"),
   content: z.string().describe("Raw text content of the code/design file"),
   mimeType: z.string().trim().optional().describe("Optional MIME type"),
 });
 
-function mimeTypeForFilename(filename: string, explicit?: string): string {
-  if (explicit?.trim()) return explicit.trim();
-  const lower = filename.toLowerCase();
-  if (lower.endsWith(".css")) return "text/css";
-  if (lower.endsWith(".json")) return "application/json";
-  if (lower.endsWith(".md") || lower.endsWith(".mdx")) return "text/markdown";
-  if (lower.endsWith(".html")) return "text/html";
-  if (lower.endsWith(".svg")) return "image/svg+xml";
-  return "text/plain";
-}
-
-function makeFiles(
-  codeFiles: Array<z.infer<typeof codeFileSchema>> | undefined,
-): BuilderDesignSystemIndexFile[] {
-  const encoder = new TextEncoder();
-  const files: BuilderDesignSystemIndexFile[] = [];
-  let totalBytes = 0;
-  for (const file of (codeFiles ?? []).slice(0, MAX_CODE_FILES)) {
-    const data = encoder.encode(file.content);
-    if (totalBytes + data.byteLength > MAX_TOTAL_CODE_BYTES) break;
-    totalBytes += data.byteLength;
-    files.push({
-      name: file.filename.replace(/^\/+/, "") || "code.txt",
-      data,
-      mimeType: mimeTypeForFilename(file.filename, file.mimeType),
-    });
-  }
-  return files;
-}
-
 export default defineAction({
   description:
-    "Start Builder design-system indexing from a GitHub repository and/or code files. " +
+    "Start Builder DSI design-system indexing from connected code, a GitHub repository, code/design files, and optional design.md guidance. " +
     "Use this instead of local import-code/import-github when the user wants a reusable brand kit or slide design system. " +
-    "Requires Builder.io to be connected; Builder owns the indexed design-system docs, generated guidance, and job state.",
+    "Requires Builder.io to be connected; Builder owns the indexed design-system docs, generated guidance, token/component extraction, and job state.",
   schema: z.object({
     projectName: z
       .string()
@@ -76,6 +43,12 @@ export default defineAction({
       .array(codeFileSchema)
       .optional()
       .describe("Optional inlined code/design files to upload to Builder"),
+    designMd: z
+      .string()
+      .optional()
+      .describe(
+        "Optional design.md guidance to upload to Builder DSI alongside Figma/code sources",
+      ),
   }),
   run: async ({
     projectName,
@@ -83,8 +56,12 @@ export default defineAction({
     githubRepoUrl,
     connectedProjectId,
     codeFiles,
+    designMd,
   }) => {
-    const files = makeFiles(codeFiles);
+    const files = buildBuilderDesignSystemIndexFiles({
+      codeFiles,
+      designMd,
+    });
     const result = await startBuilderDesignSystemIndex({
       projectName,
       description,

package/corpus/templates/slides/actions/patch-deck.ts

@@ -76,6 +76,7 @@ const PatchSlideOp = z.object({
 const DeleteSlideOp = z.object({
   op: z.literal("delete-slide"),
   slideId: z.string(),
+  allowEmpty: z.boolean().optional(),
 });
 
 /**
@@ -166,8 +167,9 @@ export function applyOperation(deck: any, op: Operation): void {
     case "delete-slide": {
       const idx = slides.findIndex((s: { id: string }) => s.id === op.slideId);
       if (idx !== -1) slides.splice(idx, 1);
-      // Ensure at least one slide remains (mirrors client-side behaviour)
-      if (slides.length === 0) {
+      // Ensure at least one slide remains for direct user deletes. Undoing an
+      // add-slide from a legitimately empty deck opts into preserving empty.
+      if (slides.length === 0 && !op.allowEmpty) {
         slides.push({
           id: `slide-${Date.now()}-fallback`,
           content: `<div class="fmd-slide" style="padding: 80px 110px; display: flex; flex-direction: column; justify-content: center;"><div style="font-size: 28px; font-weight: 600; color: rgba(255,255,255,0.4);">Double-click to edit</div></div>`,

package/corpus/templates/slides/actions/update-slide.ts

@@ -8,10 +8,12 @@ import { normalizeSlidePadding } from "../app/lib/normalize-slide-padding.js";
 import { getDb, schema } from "../server/db/index.js"; // ensure registerShareableResource runs
 import { notifyClients } from "../server/handlers/decks.js";
 import { createDeckVersionSnapshot } from "../server/lib/deck-versions.js";
+import { slideLabelFor, touchAgentSlidePresence } from "./_agent-presence.js";
 import {
   awaitLayoutFitCheck,
   formatOverflowForTool,
 } from "./_await-fit-check.js";
+import { withDeckLock } from "./patch-deck.js";
 
 function deckDeepLink(deckId: string): string {
   return buildDeepLink({
@@ -51,92 +53,127 @@ export default defineAction({
 
     await assertAccess("deck", deckId, "editor");
 
-    const db = getDb();
-
-    // Read SQL deck for the slide-existence check and to compute the new slide
-    // HTML that we persist back into decks.data.
-    const [row] = await db
-      .select({
-        id: schema.decks.id,
-        title: schema.decks.title,
-        data: schema.decks.data,
-        ownerEmail: schema.decks.ownerEmail,
-        designSystemId: schema.decks.designSystemId,
-      })
-      .from(schema.decks)
-      .where(eq(schema.decks.id, deckId))
-      .limit(1);
-    if (!row) {
-      throw new Error(`Deck ${deckId} not found`);
-    }
+    // ─── Read-modify-write under the shared per-deck lock ───────────────────
+    //
+    // Previously this action read the deck, edited a slide in memory, and wrote
+    // the whole `decks.data` blob back with no locking — so a concurrent writer
+    // (another update-slide, add-slide, or the browser's patch-deck) touching a
+    // different slide of the same deck could be clobbered (last-write-wins on
+    // the whole blob). Holding the SAME lock used by patch-deck/add-slide
+    // serialises these writes so different-slide edits never overwrite each
+    // other. The editor round-trip (fit check) runs AFTER the lock is released
+    // so it never stalls concurrent writers for seconds.
+    const rmw = await withDeckLock(deckId, async () => {
+      const db = getDb();
+
+      // Read SQL deck for the slide-existence check and to compute the new
+      // slide HTML that we persist back into decks.data.
+      const [row] = await db
+        .select({
+          id: schema.decks.id,
+          title: schema.decks.title,
+          data: schema.decks.data,
+          ownerEmail: schema.decks.ownerEmail,
+          designSystemId: schema.decks.designSystemId,
+        })
+        .from(schema.decks)
+        .where(eq(schema.decks.id, deckId))
+        .limit(1);
+      if (!row) {
+        throw new Error(`Deck ${deckId} not found`);
+      }
 
-    await createDeckVersionSnapshot(
-      {
-        id: row.id,
-        title: row.title ?? "Untitled",
-        data: row.data ?? "",
-        ownerEmail: row.ownerEmail ?? "",
-      },
-      { label: "Before slide edit" },
-    );
+      await createDeckVersionSnapshot(
+        {
+          id: row.id,
+          title: row.title ?? "Untitled",
+          data: row.data ?? "",
+          ownerEmail: row.ownerEmail ?? "",
+        },
+        { label: "Before slide edit" },
+      );
+
+      const deck = JSON.parse(row.data);
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const slideIndex = Array.isArray(deck.slides)
+        ? // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          deck.slides.findIndex((s: any) => s.id === slideId)
+        : -1;
+      const slide = slideIndex >= 0 ? deck.slides[slideIndex] : undefined;
+      if (!slide) {
+        throw new Error(`Slide ${slideId} not found in deck ${deckId}`);
+      }
 
-    const deck = JSON.parse(row.data);
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const slide = deck.slides?.find((s: any) => s.id === slideId);
-    if (!slide) {
-      throw new Error(`Slide ${slideId} not found in deck ${deckId}`);
-    }
+      // ─── Apply the edit to the slide content in decks.data ────────────────
+      //
+      // The agent edits the canonical slide HTML stored in `decks.data` (SQL is
+      // the source of truth). The change is delivered live to any open editor
+      // by the framework's normal change-sync: `notifyClients` invalidates the
+      // deck query, the editor refetches, and reconciles the newer slide HTML
+      // into the live view — gated on the deck's `updatedAt` so a lagging poll
+      // never reverts an in-progress human edit, and (for the Yjs-backed inline
+      // editor) applied through the editor's real content pipeline so new block
+      // structure renders and merges with concurrent typing via the Yjs CRDT.
+      let applied = false;
+      let notFound = false;
+
+      if (fullContent) {
+        slide.content = normalizeSlidePadding(fullContent);
+        applied = true;
+      } else if (find) {
+        const idx = (slide.content as string).indexOf(find);
+        if (idx === -1) {
+          notFound = true;
+        } else {
+          slide.content =
+            slide.content.slice(0, idx) +
+            (replace ?? "") +
+            slide.content.slice(idx + find.length);
+          applied = true;
+        }
+      }
 
-    // ─── Apply the edit to the slide content in decks.data ──────────────────
-    //
-    // The agent edits the canonical slide HTML stored in `decks.data` (SQL is
-    // the source of truth). The change is delivered live to any open editor by
-    // the framework's normal change-sync: `notifyClients` invalidates the deck
-    // query, the editor refetches, and reconciles the newer slide HTML into the
-    // live view — gated on the deck's `updatedAt` so a lagging poll never
-    // reverts an in-progress human edit, and (for the Yjs-backed inline editor)
-    // applied through the editor's real content pipeline so new block structure
-    // renders and merges with concurrent typing via the Yjs CRDT.
-    //
-    // (The old approach POSTed a Yjs search-replace to a localhost collab
-    // origin, which silently no-oped on serverless — different process, no
-    // localhost server — and could only patch text inside existing nodes,
-    // never create new block structure.)
-    let applied = false;
-
-    if (fullContent) {
-      slide.content = normalizeSlidePadding(fullContent);
-      applied = true;
-    } else if (find) {
-      const idx = (slide.content as string).indexOf(find);
-      if (idx === -1) {
-        return {
-          ok: false,
-          message: `Text not found in slide: "${find.slice(0, 60)}". Use get-deck to see current slide content.`,
-        };
+      // ─── Persist to SQL ───────────────────────────────────────────────────
+      //
+      // The fresh `updatedAt` (on both the deck JSON and the row) is the signal
+      // an open editor uses to tell an intentional external edit apart from a
+      // stale poll echo — only a newer timestamp is reconciled into the view.
+      if (applied) {
+        const now = new Date().toISOString();
+        deck.updatedAt = now;
+        await db
+          .update(schema.decks)
+          .set({ data: JSON.stringify(deck), updatedAt: now })
+          .where(eq(schema.decks.id, deckId));
       }
-      slide.content =
-        slide.content.slice(0, idx) +
-        (replace ?? "") +
-        slide.content.slice(idx + find.length);
-      applied = true;
+
+      return { applied, notFound, slide, slideIndex };
+    });
+
+    if (rmw.notFound) {
+      return {
+        ok: false,
+        message: `Text not found in slide: "${find!.slice(0, 60)}". Use get-deck to see current slide content.`,
+      };
     }
 
-    // ─── Persist to SQL ─────────────────────────────────────────────────────
-    //
-    // The fresh `updatedAt` (on both the deck JSON and the row) is the signal an
-    // open editor uses to tell an intentional external edit apart from a stale
-    // poll echo — only a newer timestamp is reconciled into the live view.
+    const { applied } = rmw;
+
+    // Best-effort presence: light the agent up on this slide in open editors
+    // and drop a lingering "AI edited" highlight. Never blocks or fails the
+    // write (touchAgentSlidePresence swallows its own errors).
     if (applied) {
-      const now = new Date().toISOString();
-      deck.updatedAt = now;
-      await db
-        .update(schema.decks)
-        .set({ data: JSON.stringify(deck), updatedAt: now })
-        .where(eq(schema.decks.id, deckId));
+      touchAgentSlidePresence({
+        deckId,
+        slideId,
+        label: slideLabelFor(rmw.slide, rmw.slideIndex),
+      });
     }
 
-    notifyClients(deckId);
+    // Extend the SSE payload with the changed slideId + agent actor so the
+    // client can attribute the edit. Backwards-compatible: consumers reading
+    // only { type, deckId } are unaffected.
+    notifyClients(deckId, { slideId, actor: "agent" });
 
     console.log(
       `update-slide: deck=${deckId} slide=${slideId} ${find ? `find="${find.slice(0, 40)}"` : "fullContent"} applied=${applied}`,

package/corpus/templates/slides/actions/view-screen.ts

@@ -144,6 +144,45 @@ export default defineAction({
         lines.push("```");
       }
 
+      const selection = (await readAppStateForCurrentTab(
+        "slides-selection",
+      )) as {
+        slideId?: string;
+        mode?: string;
+        activeTool?: string;
+        items?: Array<{
+          selector?: string;
+          text?: string;
+          kind?: string;
+          tagName?: string;
+          imageSrc?: string;
+          style?: Record<string, unknown>;
+        }>;
+      } | null;
+      if (
+        selection &&
+        (!selection.slideId || selection.slideId === currentSlide?.id)
+      ) {
+        lines.push(``);
+        lines.push(`### Current visual selection`);
+        lines.push(`mode: ${selection.mode ?? "unknown"}`);
+        lines.push(`activeTool: ${selection.activeTool ?? "select"}`);
+        if (Array.isArray(selection.items) && selection.items.length > 0) {
+          for (const [index, item] of selection.items.entries()) {
+            lines.push(
+              `selected ${index + 1}: ${item.kind ?? "element"} ${item.tagName ?? ""} selector=${item.selector ?? "(none)"}`,
+            );
+            if (item.text) lines.push(`text: ${item.text}`);
+            if (item.imageSrc) lines.push(`imageSrc: ${item.imageSrc}`);
+            if (item.style) {
+              lines.push(`style: ${JSON.stringify(item.style)}`);
+            }
+          }
+        } else {
+          lines.push(`(no selected elements)`);
+        }
+      }
+
       // ─── Layout-fit measurement ──────────────────────────────────────────
       // The editor measures the rendered slide and reports vertical overflow
       // here whenever the natural content height exceeds the canvas content

package/corpus/templates/slides/app/components/design-system/DesignSystemSetup.tsx

@@ -87,6 +87,11 @@ function normalizeWebsiteUrlInput(input: string): string | null {
   }
 }
 
+function isDesignMdFile(file: UploadedFile) {
+  const name = file.name.split(/[\\/]/).pop()?.toLowerCase() ?? file.name;
+  return name === "design.md" || name === "design.mdx";
+}
+
 export function DesignSystemSetup({
   open,
   onClose,
@@ -328,7 +333,7 @@ export function DesignSystemSetup({
 
     const parts: string[] = [];
     parts.push(
-      "Set up a design system from the following sources. Analyze each source, extract design tokens (colors, fonts, spacing, borders), and create a cohesive design system for my slide decks.",
+      "Set up a design system from the following sources. Use Builder Design System Intelligence (DSI) as the source of truth for reusable Figma/code/design.md indexing. Analyze each source, extract design tokens (colors, fonts, spacing, borders), and create a cohesive design system for my slide decks.",
     );
 
     if (companyName.trim()) {
@@ -343,15 +348,21 @@ export function DesignSystemSetup({
 
     if (githubLinks.length > 0) {
       parts.push(
-        `\n## GitHub Repositories\nStart Builder design-system indexing for each repository with \`index-design-system-with-builder\`:\n${githubLinks.map((l) => `- ${l.url}`).join("\n")}\n\nBuilder is the source of truth for repo/code design-system indexing. The action also creates a local selectable proxy design system for Slides flows. If Builder is not connected, stop and tell me to connect Builder from Settings.`,
+        `\n## Connect Code: GitHub Repositories\nStart Builder DSI indexing for each repository with \`index-design-system-with-builder\`:\n${githubLinks.map((l) => `- ${l.url}`).join("\n")}\n\nBuilder is the source of truth for repo/code design-system indexing. The action also creates a local selectable proxy design system for Slides flows. If Builder is not connected, stop and tell me to connect Builder from Settings.`,
       );
     }
 
+    const designMdFiles = [...codeFiles, ...docFiles].filter(
+      (file) => file.textContent && isDesignMdFile(file),
+    );
+
     if (codeFiles.length > 0) {
-      const withContent = codeFiles.filter((f) => f.textContent);
+      const withContent = codeFiles.filter(
+        (f) => f.textContent && !isDesignMdFile(f),
+      );
       if (withContent.length > 0) {
         parts.push(
-          `\n## Code Files (${withContent.length} files)\nStart Builder design-system indexing with \`index-design-system-with-builder\` using these files:`,
+          `\n## Connect Code: Code Files (${withContent.length} files)\nStart Builder DSI indexing with \`index-design-system-with-builder\` using these files as the \`codeFiles\` argument:`,
         );
         for (const f of withContent) {
           parts.push(
@@ -361,14 +372,27 @@ export function DesignSystemSetup({
       }
     }
 
+    if (designMdFiles.length > 0) {
+      parts.push(
+        `\n## Optional design.md (${designMdFiles.length} file${designMdFiles.length === 1 ? "" : "s"})\nPass this content as the \`designMd\` argument to \`index-design-system-with-builder\` alongside any Figma/code sources:`,
+      );
+      for (const f of designMdFiles) {
+        parts.push(
+          `\n### ${f.name}\n\`\`\`md\n${inlineText(f.textContent!)}\n\`\`\``,
+        );
+      }
+    }
+
     if (builderIndexResult) {
       parts.push(
-        `\n## Builder-Indexed Figma File\nBuilder design-system indexing has already started.\n- Design system: ${builderIndexResult.designSystemId}\n- Local selectable design system: ${builderIndexResult.localDesignSystemId ?? "(not returned)"}\n- Project: ${builderIndexResult.projectId}\n- Job: ${builderIndexResult.jobId}\n- URL: ${builderIndexResult.builderUrl}\n\nUse Builder as the source of truth for extracted tokens, assets, and guidance. Do not call \`create-design-system\` again for this Builder-indexed source.`,
+        `\n## Connect Figma: Builder-Indexed Figma File\nBuilder DSI indexing has already started.\n- Design system: ${builderIndexResult.designSystemId}\n- Local selectable design system: ${builderIndexResult.localDesignSystemId ?? "(not returned)"}\n- Project: ${builderIndexResult.projectId}\n- Job: ${builderIndexResult.jobId}\n- URL: ${builderIndexResult.builderUrl}\n\nUse Builder as the source of truth for extracted tokens, assets, components, and guidance. Do not call \`create-design-system\` again for this Builder-indexed source.`,
       );
     }
 
     if (docFiles.length > 0) {
-      const inlined = docFiles.filter((f) => f.textContent);
+      const inlined = docFiles.filter(
+        (f) => f.textContent && !isDesignMdFile(f),
+      );
       const binary = docFiles.filter((f) => !f.textContent);
       if (inlined.length > 0) {
         parts.push(
@@ -413,7 +437,7 @@ export function DesignSystemSetup({
     }
 
     parts.push(
-      `\n---\nAfter processing all sources, if you started Builder design-system indexing, report the Builder job/design-system URL plus the local selectable design-system id returned by \`index-design-system-with-builder\`. Do not call \`create-design-system\` again for those Builder-indexed sources. If you processed non-Builder sources into concrete tokens, call \`create-design-system\` with the combined tokens${
+      `\n---\nAfter processing all sources, if you started Builder DSI indexing, report the Builder job/design-system URL plus the local selectable design-system id returned by \`index-design-system-with-builder\`. Do not call \`create-design-system\` again for Builder-indexed Figma/code/design.md sources. If you processed non-Builder sources into concrete tokens, call \`create-design-system\` with the combined tokens${
         customInstructions.trim()
           ? " AND the verbatim --customInstructions string from above"
           : ""
@@ -624,7 +648,7 @@ export function DesignSystemSetup({
                     ref={codeInputRef}
                     type="file"
                     multiple
-                    accept=".css,.scss,.sass,.less,.ts,.tsx,.js,.jsx,.json,.html"
+                    accept=".css,.scss,.sass,.less,.ts,.tsx,.js,.jsx,.json,.html,.svg,.xml,.md,.markdown,.mdx,.txt"
                     onChange={(e) => {
                       if (e.target.files)
                         readTextFiles(e.target.files, setCodeFiles);

package/corpus/templates/slides/app/components/editor/EditorSidebar.tsx

@@ -1,6 +1,8 @@
 import {
   appBasePath,
   PromptComposer,
+  RecentEditHighlights,
+  type AttributedRecentEdit,
   type CollabUser,
   useAvatarUrl,
   useT,
@@ -47,10 +49,24 @@ interface EditorSidebarProps {
   onAddEmptySlide: () => void;
   /** Presence map: slideId → list of users currently viewing that slide */
   slidePresence?: Map<string, CollabUser[]>;
+  /** Lingering recent edits (e.g. agent edits) to highlight over thumbnails. */
+  recentEdits?: AttributedRecentEdit[];
   /** Deck aspect ratio (defaults to 16:9 when omitted) */
   aspectRatio?: AspectRatio;
 }
 
+/** Extract the slide id from a `{kind:"paths",paths:["slides.<id>"]}` edit. */
+function slideIdFromEdit(edit: AttributedRecentEdit): string | null {
+  const d = edit.descriptor;
+  if (d.kind === "paths" && Array.isArray(d.paths)) {
+    for (const p of d.paths) {
+      const m = /^slides\.(.+)$/.exec(p);
+      if (m) return m[1];
+    }
+  }
+  return null;
+}
+
 const MAX_SOURCE_CONTEXT_CHARS = 60_000;
 
 function truncateSourceForContext(prompt: string): {
@@ -542,6 +558,7 @@ export default function EditorSidebar({
   onDeleteSlide,
   onAddEmptySlide,
   slidePresence,
+  recentEdits,
   aspectRatio,
 }: EditorSidebarProps) {
   const t = useT();
@@ -550,6 +567,21 @@ export default function EditorSidebar({
   const [addSlideGenerating, setAddSlideGenerating] = useState(false);
   const headerAddRef = useRef<HTMLButtonElement>(null);
   const slideButtonRefs = useRef(new Map<string, HTMLButtonElement>());
+  const thumbScrollRef = useRef<HTMLDivElement>(null);
+
+  // Resolve a recent-edit descriptor (`slides.<id>`) to the on-screen rect of
+  // that slide's thumbnail button, relative to the scroll container, so the
+  // shared RecentEditHighlights overlay can draw a fading "AI edited" ring.
+  const resolveThumbRect = useCallback(
+    (edit: AttributedRecentEdit): DOMRect | null => {
+      const slideId = slideIdFromEdit(edit);
+      if (!slideId) return null;
+      const node = slideButtonRefs.current.get(slideId);
+      if (!node) return null;
+      return node.getBoundingClientRect();
+    },
+    [],
+  );
   const { generating, submit: agentSubmit } = useAgentGenerating();
 
   const registerSlideButton = useCallback(
@@ -606,8 +638,8 @@ export default function EditorSidebar({
   }, [slides, activeSlideId, onSelectSlide]);
 
   return (
-    <div className="w-56 sm:w-64 flex-shrink-0 border-r border-border bg-background flex flex-col h-full">
-      <div className="p-3 border-b border-border flex items-center justify-between">
+    <div className="flex h-full min-h-0 w-56 flex-shrink-0 flex-col border-r border-border/70 bg-background/95 sm:w-64">
+      <div className="flex items-center justify-between border-b border-border/70 p-3">
         <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
           {t("editorSidebar.slides")}
         </span>
@@ -630,7 +662,10 @@ export default function EditorSidebar({
         )}
       </div>
 
-      <div className="flex-1 overflow-y-auto p-2 space-y-1">
+      <div
+        ref={thumbScrollRef}
+        className="relative min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2"
+      >
         <SortableContext
           items={slides.map((s) => s.id)}
           strategy={verticalListSortingStrategy}
@@ -656,6 +691,15 @@ export default function EditorSidebar({
             aspectRatio={aspectRatio}
           />
         )}
+        {/* Fading "AI edited" highlights over the thumbnails of just-edited
+            slides (the component handles the fade + name/color tag). */}
+        {recentEdits && recentEdits.length > 0 && (
+          <RecentEditHighlights
+            edits={recentEdits}
+            resolveRect={resolveThumbRect}
+            containerRef={thumbScrollRef}
+          />
+        )}
       </div>
 
       <AddSlidePopover