@agent-native/core 0.85.6 → 0.86.0

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/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 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 flex-1 space-y-1 overflow-y-auto 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

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

@@ -56,8 +56,9 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { SaveStatusIndicator } from "@/components/visual-editor";
 import type { Deck, Slide, SlideLayout } from "@/context/DeckContext";
-import { defaultSlideContent } from "@/context/DeckContext";
+import { defaultSlideContent, useSaveState } from "@/context/DeckContext";
 import { toast } from "@/hooks/use-toast";
 import {
   ASPECT_RATIO_VALUES,
@@ -76,8 +77,6 @@ interface EditorToolbarProps {
    *  Defaults to true for backward compatibility. */
   canEdit?: boolean;
   onTitleChange: (title: string) => void;
-  activeTab: "visual" | "code";
-  onTabChange: (tab: "visual" | "code") => void;
   slideCount: number;
   currentSlideIndex: number;
   sidebarOpen: boolean;
@@ -218,8 +217,6 @@ export default function EditorToolbar({
   deckId,
   deckTitle,
   onTitleChange,
-  activeTab,
-  onTabChange,
   slideCount,
   currentSlideIndex,
   sidebarOpen,
@@ -273,6 +270,23 @@ export default function EditorToolbar({
       ? `/p/${deckId}`
       : `${window.location.origin}${appPath(`/p/${deckId}`)}`;
 
+  // Live save state for the toolbar indicator, so users always see whether
+  // their work has committed (a lost-deck report motivated surfacing this).
+  const { saving } = useSaveState();
+  const [offline, setOffline] = useState(
+    typeof navigator !== "undefined" ? !navigator.onLine : false,
+  );
+  useEffect(() => {
+    const online = () => setOffline(false);
+    const goOffline = () => setOffline(true);
+    window.addEventListener("online", online);
+    window.addEventListener("offline", goOffline);
+    return () => {
+      window.removeEventListener("online", online);
+      window.removeEventListener("offline", goOffline);
+    };
+  }, []);
+
   const activeAspectRatio: AspectRatio = aspectRatio ?? DEFAULT_ASPECT_RATIO;
   const [layoutOpen, setLayoutOpen] = useState(false);
   const layoutRef = useRef<HTMLButtonElement>(null);
@@ -372,7 +386,7 @@ export default function EditorToolbar({
   };
 
   return (
-    <div className="flex h-12 shrink-0 items-center gap-0.5 overflow-x-auto whitespace-nowrap border-b border-border bg-background px-1 sm:gap-1 sm:px-3">
+    <div className="flex h-11 shrink-0 items-center gap-1 overflow-x-auto whitespace-nowrap border-b border-border/70 bg-background/95 px-2 shadow-[0_1px_0_hsl(var(--border)/0.35)] backdrop-blur sm:px-3">
       {/* Back button */}
       <Tooltip>
         <TooltipTrigger asChild>
@@ -818,11 +832,11 @@ graph TD
           </>
         )}
 
-      {/* Edit-only cluster — undo/redo + edit-mode tabs */}
+      {/* Edit-only cluster — undo/redo */}
       {canEdit && (
         <>
           {/* Separator */}
-          <div className="w-px h-5 bg-accent flex-shrink-0 hidden sm:block" />
+          <div className="hidden h-5 w-px flex-shrink-0 bg-border/70 sm:block" />
 
           {/* Undo/Redo */}
           <div className="flex items-center flex-shrink-0">
@@ -861,36 +875,19 @@ graph TD
               </TooltipContent>
             </Tooltip>
           </div>
-
-          {/* Separator */}
-          <div className="w-px h-5 bg-accent flex-shrink-0 hidden sm:block" />
-
-          {/* Edit mode tabs */}
-          <div className="flex items-center rounded-md border border-border overflow-hidden flex-shrink-0">
-            <button
-              onClick={() => onTabChange("visual")}
-              className={`px-3 py-2 sm:py-1.5 text-xs font-medium transition-colors ${
-                activeTab === "visual"
-                  ? "bg-accent text-foreground"
-                  : "text-muted-foreground hover:text-muted-foreground"
-              }`}
-            >
-              {t("editorToolbar.preview")}
-            </button>
-            <button
-              onClick={() => onTabChange("code")}
-              className={`px-3 py-2 sm:py-1.5 text-xs font-medium transition-colors ${
-                activeTab === "code"
-                  ? "bg-accent text-foreground"
-                  : "text-muted-foreground hover:text-muted-foreground"
-              }`}
-            >
-              {t("editorToolbar.code")}
-            </button>
-          </div>
         </>
       )}
 
+      {/* Save status — subtle "Saving…" / "Saved" / offline pill. Renders
+          nothing when idle. Only meaningful for editors. */}
+      {canEdit && (
+        <SaveStatusIndicator
+          saving={saving}
+          offline={offline}
+          className="flex-shrink-0 mr-1"
+        />
+      )}
+
       {/* Presence avatars — shared PresenceBar (agent + collaborators) */}
       <PresenceBar
         activeUsers={activeUsers ?? []}