@agent-native/core 0.131.5 → 0.131.7

package/corpus/templates/slides/app/context/DeckContext.tsx

@@ -58,6 +58,10 @@ type GranularOp =
   | { op: "full-replace"; deck: Deck };
 
 export type PatchDeckOp = Exclude<GranularOp, { op: "full-replace" }>;
+export type DeckReloadStatus = "loaded" | "failed" | "stale";
+export interface UpdateSlideOptions {
+  persistence?: "debounced" | "immediate";
+}
 
 // ---------------------------------------------------------------------------
 // Inverse-op undo
@@ -164,6 +168,7 @@ interface DeckContextType {
     updates: Partial<Omit<Deck, "id" | "createdAt">>,
   ) => void;
   reloadDecks: () => Promise<void>;
+  reloadDecksWithStatus: () => Promise<DeckReloadStatus>;
   getDeck: (id: string) => Deck | undefined;
   addSlide: (
     deckId: string,
@@ -174,6 +179,7 @@ interface DeckContextType {
     deckId: string,
     slideId: string,
     updates: Partial<Omit<Slide, "id">>,
+    options?: UpdateSlideOptions,
   ) => void;
   deleteSlide: (deckId: string, slideId: string) => void;
   duplicateSlide: (deckId: string, slideId: string) => void;
@@ -260,7 +266,13 @@ function normalizeActionDeck(value: unknown): Deck | null {
 // uncommitted?" for the indicator.
 const pendingSaves = new Map<string, ReturnType<typeof setTimeout>>();
 const inFlightSaves = new Set<string>();
+const inFlightSaveChains = new Map<string, Promise<void>>();
+const immediateFlushRequests = new Set<string>();
+const deckSaveRetryAttempts = new Map<string, number>();
+const failedSaveDecks = new Set<string>();
 const saveStateListeners = new Set<() => void>();
+const MAX_DECK_SAVE_RETRIES = 2;
+const DECK_SAVE_RETRY_BASE_MS = 250;
 
 // Per-deck queue of granular ops waiting to be flushed. Keys are deck IDs.
 // Ops are appended by enqueueDeckOp and drained when the debounce fires.
@@ -273,7 +285,8 @@ const pendingOpsQueue = new Map<string, GranularOp[]>();
 let cachedSnapshot: { saving: boolean } = { saving: false };
 
 function recomputeSnapshot() {
-  const saving = pendingSaves.size > 0 || inFlightSaves.size > 0;
+  const saving =
+    pendingSaves.size > 0 || inFlightSaves.size > 0 || pendingOpsQueue.size > 0;
   if (saving !== cachedSnapshot.saving) {
     cachedSnapshot = { saving };
   }
@@ -322,10 +335,118 @@ function deckPayload(deck: Deck): Record<string, unknown> {
  * the `save-deck` action is called first, then any trailing granular ops are
  * sent through `patch-deck`.
  */
-function enqueueDeckOp(deckId: string, op: GranularOp) {
-  // Clear any pending save timer — we're about to reset it
+async function persistDeckOps(deckId: string, ops: GranularOp[]) {
+  if (ops[0].op === "full-replace") {
+    // Legacy full-deck write — used by undo/redo and setDeckSlides.
+    // `callAction` bounds it so a stalled save can't wedge `inFlightSaves`
+    // forever (its `finally` cleanup below only runs once this await
+    // settles; an AbortError from the timeout still reaches it).
+    const deck = ops[0].deck;
+    await callAction(
+      "save-deck",
+      { deckId, deck: deckPayload(deck) },
+      { method: "PUT" },
+    );
+    const trailingOps = ops.slice(1) as PatchDeckOp[];
+    if (trailingOps.length > 0) {
+      await callAction("patch-deck", {
+        deckId,
+        operations: trailingOps,
+      });
+    }
+  } else {
+    await callAction("patch-deck", {
+      deckId,
+      operations: ops as PatchDeckOp[],
+    });
+  }
+}
+
+/**
+ * Drain the current operation batch behind every earlier batch for this deck.
+ * Slide content patches replace the full HTML field, so overlapping requests
+ * could otherwise complete out of order and let a stale drag overwrite a
+ * newer resize.
+ */
+function drainPendingDeckOps(deckId: string): Promise<void> {
+  const timer = pendingSaves.get(deckId);
+  if (timer) clearTimeout(timer);
+  pendingSaves.delete(deckId);
+
+  const active = inFlightSaveChains.get(deckId);
+  if (active) {
+    immediateFlushRequests.add(deckId);
+    notifySaveListeners();
+    return active;
+  }
+
+  const ops = pendingOpsQueue.get(deckId) ?? [];
+  pendingOpsQueue.delete(deckId);
+  if (ops.length === 0) {
+    notifySaveListeners();
+    return Promise.resolve();
+  }
+
+  inFlightSaves.add(deckId);
+  let succeeded = false;
+  const next = persistDeckOps(deckId, ops)
+    .then(() => {
+      succeeded = true;
+      deckSaveRetryAttempts.delete(deckId);
+      failedSaveDecks.delete(deckId);
+    })
+    .catch((err) => {
+      console.error(`Failed to save deck ${deckId}:`, err);
+      const pending = pendingOpsQueue.get(deckId) ?? [];
+      pendingOpsQueue.set(deckId, [...ops, ...pending]);
+      const attempt = (deckSaveRetryAttempts.get(deckId) ?? 0) + 1;
+      deckSaveRetryAttempts.set(deckId, attempt);
+      immediateFlushRequests.delete(deckId);
+      const pendingTimer = pendingSaves.get(deckId);
+      if (pendingTimer) clearTimeout(pendingTimer);
+      pendingSaves.delete(deckId);
+      if (attempt <= MAX_DECK_SAVE_RETRIES) {
+        const retryTimer = setTimeout(
+          () => {
+            void drainPendingDeckOps(deckId);
+          },
+          DECK_SAVE_RETRY_BASE_MS * 2 ** (attempt - 1),
+        );
+        pendingSaves.set(deckId, retryTimer);
+      } else {
+        failedSaveDecks.add(deckId);
+      }
+    })
+    .finally(() => {
+      if (inFlightSaveChains.get(deckId) === next) {
+        inFlightSaveChains.delete(deckId);
+        inFlightSaves.delete(deckId);
+        const flushImmediately = immediateFlushRequests.delete(deckId);
+        notifySaveListeners();
+        if (succeeded && flushImmediately) {
+          void drainPendingDeckOps(deckId);
+        }
+      }
+    });
+  inFlightSaveChains.set(deckId, next);
+  notifySaveListeners();
+  return next;
+}
+
+function enqueueDeckOp(
+  deckId: string,
+  op: GranularOp,
+  options?: { persistence?: "debounced" | "immediate" },
+) {
   const existing = pendingSaves.get(deckId);
   if (existing) clearTimeout(existing);
+  if (
+    (deckSaveRetryAttempts.get(deckId) ?? 0) > MAX_DECK_SAVE_RETRIES &&
+    !inFlightSaveChains.has(deckId)
+  ) {
+    deckSaveRetryAttempts.delete(deckId);
+    failedSaveDecks.delete(deckId);
+  }
 
   if (op.op === "full-replace") {
     // Discard any accumulated granular ops — this is a wholesale replacement
@@ -336,53 +457,15 @@ function enqueueDeckOp(deckId: string, op: GranularOp) {
     pendingOpsQueue.set(deckId, queue);
   }
 
-  // Arm the debounce
-  const timer = setTimeout(async () => {
-    pendingSaves.delete(deckId);
-    inFlightSaves.add(deckId);
+  if (options?.persistence === "immediate") {
+    void drainPendingDeckOps(deckId);
+  } else {
+    const timer = setTimeout(() => {
+      void drainPendingDeckOps(deckId);
+    }, 500);
+    pendingSaves.set(deckId, timer);
     notifySaveListeners();
-
-    const ops = pendingOpsQueue.get(deckId) ?? [];
-    pendingOpsQueue.delete(deckId);
-
-    try {
-      if (ops.length === 0) return;
-
-      if (ops[0].op === "full-replace") {
-        // Legacy full-deck write — used by undo/redo and setDeckSlides.
-        // `callAction` bounds it so a stalled save can't wedge `inFlightSaves`
-        // forever (its `finally` cleanup below only runs once this await
-        // settles; an AbortError from the timeout still reaches it).
-        const deck = ops[0].deck;
-        await callAction(
-          "save-deck",
-          { deckId, deck: deckPayload(deck) },
-          { method: "PUT" },
-        );
-        const trailingOps = ops.slice(1) as PatchDeckOp[];
-        if (trailingOps.length > 0) {
-          await callAction("patch-deck", {
-            deckId,
-            operations: trailingOps,
-          });
-        }
-      } else {
-        // Granular patch — concurrent-safe
-        await callAction("patch-deck", {
-          deckId,
-          operations: ops as PatchDeckOp[],
-        });
-      }
-    } catch (err) {
-      console.error(`Failed to save deck ${deckId}:`, err);
-    } finally {
-      inFlightSaves.delete(deckId);
-      notifySaveListeners();
-    }
-  }, 500);
-
-  pendingSaves.set(deckId, timer);
-  notifySaveListeners();
+  }
 }
 
 /**
@@ -468,6 +551,9 @@ function discardPendingDeckOps(deckId: string) {
   if (timer) clearTimeout(timer);
   pendingSaves.delete(deckId);
   pendingOpsQueue.delete(deckId);
+  deckSaveRetryAttempts.delete(deckId);
+  failedSaveDecks.delete(deckId);
+  immediateFlushRequests.delete(deckId);
   notifySaveListeners();
 }
 
@@ -837,7 +923,8 @@ export function hasUncommittedDeckChanges(
   return (
     dirtyDeckIds.has(deckId) ||
     pendingSaves.has(deckId) ||
-    inFlightSaves.has(deckId)
+    inFlightSaves.has(deckId) ||
+    failedSaveDecks.has(deckId)
   );
 }
 
@@ -1270,25 +1357,31 @@ export function DeckProvider({ children }: { children: ReactNode }) {
     [isNewerThanSnapshot],
   );
 
-  const reloadDecks = useCallback(async () => {
-    const requestId = ++deckBaselineRequestIdRef.current;
-    const createSeqAtRequest = localCreateSeqRef.current;
-    const requestedOpenDeckId = currentOpenDeckIdFromWindow();
-    const loaded = await fetchDecksForCurrentRoute();
-    if (
-      requestId !== deckBaselineRequestIdRef.current ||
-      requestedOpenDeckId !== currentOpenDeckIdFromWindow() ||
-      loaded === null
-    ) {
-      if (requestId === deckBaselineRequestIdRef.current) {
-        setLoadError(loaded === null);
+  const reloadDecksWithStatus =
+    useCallback(async (): Promise<DeckReloadStatus> => {
+      const requestId = ++deckBaselineRequestIdRef.current;
+      const createSeqAtRequest = localCreateSeqRef.current;
+      const requestedOpenDeckId = currentOpenDeckIdFromWindow();
+      const loaded = await fetchDecksForCurrentRoute();
+      if (
+        requestId !== deckBaselineRequestIdRef.current ||
+        requestedOpenDeckId !== currentOpenDeckIdFromWindow()
+      ) {
+        return "stale";
       }
-      return;
-    }
-    lastExternalUpdateRef.current = Date.now();
-    resetDeckBaseline(loaded, createSeqAtRequest);
-    setLoadError(false);
-  }, [resetDeckBaseline]);
+      if (loaded === null) {
+        setLoadError(true);
+        return "failed";
+      }
+      lastExternalUpdateRef.current = Date.now();
+      resetDeckBaseline(loaded, createSeqAtRequest);
+      setLoadError(false);
+      return "loaded";
+    }, [resetDeckBaseline]);
+
+  const reloadDecks = useCallback(async () => {
+    await reloadDecksWithStatus();
+  }, [reloadDecksWithStatus]);
 
   // Load decks from API on mount
   useEffect(() => {
@@ -1435,7 +1528,11 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       dirtyDeckIdsRef.current.delete(id);
       // Only fall back to full-replace if no granular ops were enqueued
       // for this deck (they handle the actual save).
-      if (!pendingOpsQueue.has(id) && !pendingSaves.has(id)) {
+      if (
+        !pendingOpsQueue.has(id) &&
+        !pendingSaves.has(id) &&
+        !inFlightSaves.has(id)
+      ) {
         const deck = decks.find((d) => d.id === id);
         if (!deck) continue;
         saveDeckToAPI(deck);
@@ -1750,7 +1847,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       };
       optimistic.slides = optimistic.slides.map((s) => ({
         ...s,
-        id: nanoid(8),
+        id: `slide-${nanoid(8)}`,
       }));
 
       // Track as pending so the poll doesn't wipe the optimistic deck before
@@ -1766,6 +1863,10 @@ export function DeckProvider({ children }: { children: ReactNode }) {
           deckId: sourceDeckId,
           newId,
           title,
+          // The user can start editing the copy before this resolves, so the
+          // persisted slides must carry the ids the optimistic ones already
+          // have — otherwise those edits address slides the server never had.
+          slideIds: optimistic.slides.map((s) => s.id),
         },
       ).then(() => undefined);
       pendingCreatePromisesRef.current.set(newId, duplicatePromise);
@@ -1941,7 +2042,12 @@ export function DeckProvider({ children }: { children: ReactNode }) {
   );
 
   const updateSlide = useCallback(
-    (deckId: string, slideId: string, updates: Partial<Omit<Slide, "id">>) => {
+    (
+      deckId: string,
+      slideId: string,
+      updates: Partial<Omit<Slide, "id">>,
+      options?: UpdateSlideOptions,
+    ) => {
       markDeckDirty(deckId);
       const label = updates.layout
         ? "Change layout"
@@ -1965,7 +2071,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       );
       // Granular op — only this slide's changed fields reach the server.
       const op: PatchDeckOp = { op: "patch-slide", slideId, fields: updates };
-      enqueueDeckOp(deckId, op);
+      enqueueDeckOp(deckId, op, options);
       if (before) {
         // Coalesce a burst of edits to the SAME slide's SAME field-set into one
         // undo step (e.g. typing characters into inline text). Distinct
@@ -2121,6 +2227,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
         deleteDeck,
         updateDeck,
         reloadDecks,
+        reloadDecksWithStatus,
         getDeck,
         addSlide,
         updateSlide,

package/corpus/templates/slides/app/global.css

@@ -61,6 +61,8 @@ button[title="Open agent sidebar"] {
   --sidebar-accent-foreground: 0 0% 93%;
   --sidebar-border: 0 0% 20%;
   --sidebar-ring: 0 0% 50%;
+
+  --accent-cyan: 187 100% 50%;
 }
 
 .light {
@@ -102,6 +104,9 @@ button[title="Open agent sidebar"] {
   --sidebar-accent-foreground: 0 0% 10%;
   --sidebar-border: 0 0% 90%;
   --sidebar-ring: 0 0% 65%;
+
+  /* Darker than the dark-theme #00E5FF so text stays >= 4.5:1 against a white popover. */
+  --accent-cyan: 193 82% 31%;
 }
 
 /* Slides keeps the shared visual inspector behavior, but the dock needs the
@@ -109,6 +114,9 @@ button[title="Open agent sidebar"] {
 .slide-style-inspector {
   --slides-inspector-control-background: hsl(var(--muted) / 0.82);
   --slides-inspector-divider: hsl(var(--border) / 0.7);
+  --design-editor-control-bg: var(--slides-inspector-control-background);
+  --design-editor-control-border: transparent;
+  --design-editor-accent-color: #609ff8;
 }
 
 .slide-style-inspector > div:first-child {
@@ -1142,6 +1150,103 @@ button[title="Open agent sidebar"] {
   background: rgba(96, 159, 248, 0.35);
 }
 
+/* Google Slides-style object selection chrome. The edge hit targets are wider
+   than their visible bars, but both centers sit on the 1px outline rather than
+   drifting into the selected object through the outline's border box. */
+[data-slide-selection-chrome="true"] [data-slide-resize-handle] {
+  box-sizing: border-box;
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="nw"],
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="ne"],
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="sw"],
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="se"],
+[data-slide-selection-chrome="true"] [data-slide-resize-handle-bar="true"] {
+  border: 1px solid #609ff8;
+  background: #fff;
+  box-shadow: none;
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="nw"],
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="ne"],
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="sw"],
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="se"] {
+  width: 7px;
+  height: 7px;
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="nw"] {
+  top: -4px;
+  left: -4px;
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="ne"] {
+  top: -4px;
+  right: -4px;
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="sw"] {
+  bottom: -4px;
+  left: -4px;
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="se"] {
+  right: -4px;
+  bottom: -4px;
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="n"],
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="s"] {
+  width: 22px;
+  height: 12px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="n"] {
+  top: -6.5px;
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="s"] {
+  bottom: -6.5px;
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="e"],
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="w"] {
+  width: 12px;
+  height: 22px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="e"] {
+  right: -6.5px;
+}
+
+[data-slide-selection-chrome="true"] [data-slide-resize-handle="w"] {
+  left: -6.5px;
+}
+
+[data-slide-selection-chrome="true"]
+  [data-slide-resize-handle="n"]
+  [data-slide-resize-handle-bar="true"],
+[data-slide-selection-chrome="true"]
+  [data-slide-resize-handle="s"]
+  [data-slide-resize-handle-bar="true"] {
+  width: 14px;
+  height: 4px;
+}
+
+[data-slide-selection-chrome="true"]
+  [data-slide-resize-handle="e"]
+  [data-slide-resize-handle-bar="true"],
+[data-slide-selection-chrome="true"]
+  [data-slide-resize-handle="w"]
+  [data-slide-resize-handle-bar="true"] {
+  width: 4px;
+  height: 14px;
+}
+
 /* ─── Slide Transition Keyframes ─── */
 
 @keyframes slide-fade-in {

package/corpus/templates/slides/app/i18n/en-US.ts

@@ -356,6 +356,8 @@ const messages = {
   styleInspector: {
     title: "Style",
     close: "Close style inspector",
+    slideBackground: "Slide background",
+    slide: "Slide",
     deckStyle: "Deck style",
     designSystemTweaks: "Design system tweaks",
     closeTweaks: "Close tweaks",
@@ -415,6 +417,10 @@ const messages = {
     emerald: "Emerald",
     amber: "Amber",
     rose: "Rose",
+    arrange: "Arrange",
+    order: "Order",
+    bringToFront: "Bring to front",
+    sendToBack: "Send to back",
   },
   animations: {
     appear: "Appear",
@@ -531,6 +537,7 @@ const messages = {
     deckHasNoSlides: "Deck has no slides.",
     pdfRenderFailed: "Could not render PDF.",
     buildingDeck: "Building deck",
+    dismissLayoutWarning: "Dismiss layout warning",
     slidesAdded_one: "{{count}} slide added",
     slidesAdded_other: "{{count}} slides added",
   },
@@ -632,6 +639,7 @@ const messages = {
     clearWorkspaceDefault: "Clear workspace default",
     workspaceDefaultSet: "Set as the workspace default",
     workspaceDefaultCleared: "Workspace default cleared",
+    duplicateFailed: "Couldn't duplicate that deck",
     workspaceDefaultFailed: "Couldn't update the workspace default",
     workspaceDefaultConfirmTitle: "Set as workspace default?",
     workspaceDefaultDeckShareBody:

package/corpus/templates/slides/app/lib/deck-editor-loading.ts

@@ -0,0 +1,26 @@
+export function deckAccessCheckKey(
+  deckId: string | undefined,
+  orgId: string | null | undefined,
+): string | null {
+  return deckId ? JSON.stringify([deckId, orgId ?? null]) : null;
+}
+
+export function shouldShowDeckEditorSkeleton({
+  deckFound,
+  decksLoading,
+  orgLoading,
+  accessCheckKey,
+  checkedAccessKey,
+  retrying,
+}: {
+  deckFound: boolean;
+  decksLoading: boolean;
+  orgLoading: boolean;
+  accessCheckKey: string | null;
+  checkedAccessKey: string | null;
+  retrying: boolean;
+}): boolean {
+  if (decksLoading) return true;
+  if (deckFound || !accessCheckKey) return false;
+  return orgLoading || checkedAccessKey !== accessCheckKey || retrying;
+}

package/corpus/templates/slides/app/lib/mermaid-blocks.ts

@@ -0,0 +1,27 @@
+/**
+ * Extracts `<div class="mermaid">...</div>` blocks from raw slide HTML and
+ * replaces them with `data-mermaid-index="N"` placeholders, BEFORE any
+ * sanitization. The sanitizer round-trips HTML through DOMParser +
+ * innerHTML, which HTML-escapes `>` in text nodes to `&gt;` — that mangles
+ * diagram arrows like `A --> B` into `A --&gt; B` and breaks the mermaid
+ * parser. The extracted definitions are the untouched source of truth for
+ * re-rendering (SlideRenderer) and for restoring the original markup when
+ * saving edits made elsewhere on the same slide (SlideEditor) — the live DOM
+ * replaces each placeholder with a rendered SVG, which must never be
+ * serialized back into slide.content or the diagram becomes permanently
+ * inert raw SVG with no way to edit or regenerate it.
+ */
+export function extractMermaidBlocks(content: string): {
+  blocks: string[];
+  contentWithPlaceholders: string;
+} {
+  const blocks: string[] = [];
+  const contentWithPlaceholders = content.replace(
+    /<div\s+class="mermaid"[^>]*>([\s\S]*?)<\/div>/gi,
+    (_, definition) => {
+      blocks.push(String(definition).trim());
+      return `<div data-mermaid-index="${blocks.length - 1}"></div>`;
+    },
+  );
+  return { blocks, contentWithPlaceholders };
+}