@agent-native/core 0.175.2-nightly-20260826150235 → 0.175.3

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

@@ -132,6 +132,22 @@ function isAgentPresenceUser(user: CollabUser): boolean {
   );
 }
 
+function getNextSlideId(
+  slides: Slide[],
+  activeSlideId: string,
+  key: "ArrowUp" | "ArrowDown",
+): string | null {
+  const currentIndex = slides.findIndex((s) => s.id === activeSlideId);
+  if (currentIndex === -1) return null;
+
+  const nextIndex =
+    key === "ArrowUp"
+      ? Math.max(0, currentIndex - 1)
+      : Math.min(slides.length - 1, currentIndex + 1);
+
+  return nextIndex === currentIndex ? null : (slides[nextIndex]?.id ?? null);
+}
+
 /** Small presence avatar circle with hover card showing name + email */
 function PresenceAvatarTip({
   user,
@@ -197,6 +213,7 @@ function SortableSlideThumb({
   index,
   isActive,
   onSelect,
+  onArrowNavigate,
   registerButtonRef,
   presenceUsers = [],
   aspectRatio,
@@ -219,6 +236,7 @@ function SortableSlideThumb({
   index: number;
   isActive: boolean;
   onSelect: () => void;
+  onArrowNavigate: (key: "ArrowUp" | "ArrowDown") => void;
   readOnly?: boolean;
   registerButtonRef: (slideId: string, node: HTMLButtonElement | null) => void;
   presenceUsers?: CollabUser[];
@@ -280,6 +298,14 @@ function SortableSlideThumb({
             type="button"
             {...(readOnly ? {} : attributes)}
             {...(readOnly ? {} : listeners)}
+            onKeyDown={(event) => {
+              listeners?.onKeyDown?.(event);
+              if (event.defaultPrevented) return;
+              if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+              event.preventDefault();
+              event.stopPropagation();
+              onArrowNavigate(event.key);
+            }}
             onClick={(event) => {
               // Safari does not focus a button on click, and the slide copy/paste
               // and delete shortcuts are scoped to a focused thumbnail.
@@ -603,6 +629,21 @@ export default function EditorSidebar({
     [describeSlideId],
   );
 
+  const navigateToSlide = useCallback(
+    (fromSlideId: string, key: "ArrowUp" | "ArrowDown") => {
+      const nextSlideId = getNextSlideId(slides, fromSlideId, key);
+      if (!nextSlideId) return;
+
+      onSelectSlide(nextSlideId);
+      requestAnimationFrame(() => {
+        const nextButton = slideButtonRefs.current.get(nextSlideId);
+        nextButton?.focus({ preventScroll: true });
+        nextButton?.scrollIntoView({ block: "nearest" });
+      });
+    },
+    [onSelectSlide, slides],
+  );
+
   const describeSlideIndex = describeSlideId
     ? slides.findIndex((s) => s.id === describeSlideId)
     : -1;
@@ -629,28 +670,12 @@ export default function EditorSidebar({
         return;
 
       e.preventDefault();
-      const currentIndex = slides.findIndex((s) => s.id === activeSlideId);
-      if (currentIndex === -1) return;
-
-      const nextIndex =
-        e.key === "ArrowUp"
-          ? Math.max(0, currentIndex - 1)
-          : Math.min(slides.length - 1, currentIndex + 1);
-
-      if (nextIndex !== currentIndex) {
-        const nextSlideId = slides[nextIndex].id;
-        onSelectSlide(nextSlideId);
-        requestAnimationFrame(() => {
-          const nextButton = slideButtonRefs.current.get(nextSlideId);
-          nextButton?.focus({ preventScroll: true });
-          nextButton?.scrollIntoView({ block: "nearest" });
-        });
-      }
+      navigateToSlide(activeSlideId, e.key as "ArrowUp" | "ArrowDown");
     };
 
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [slides, activeSlideId, onSelectSlide]);
+  }, [activeSlideId, navigateToSlide]);
 
   return (
     <div className="flex h-full min-h-0 w-48 flex-shrink-0 flex-col bg-background sm:w-52">
@@ -677,6 +702,7 @@ export default function EditorSidebar({
                 index={index}
                 isActive={slide.id === activeSlideId}
                 onSelect={() => onSelectSlide(slide.id)}
+                onArrowNavigate={(key) => navigateToSlide(slide.id, key)}
                 readOnly={readOnly}
                 registerButtonRef={registerSlideButton}
                 presenceUsers={slidePresence?.get(slide.id) ?? []}

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

@@ -59,7 +59,11 @@ import {
   CanvasCommentPins,
   MultiSelectChip,
 } from "@/components/visual-editor";
-import type { Slide, UpdateSlideOptions } from "@/context/DeckContext";
+import {
+  flushPendingSaves,
+  type Slide,
+  type UpdateSlideOptions,
+} from "@/context/DeckContext";
 import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
 import {
   computeCanvasFitZoom,
@@ -658,9 +662,8 @@ interface SlideEditorProps {
   deckId?: string;
   /**
    * Called the moment the user enters contentEditable inline edit mode.
-   * The parent should call `markDeckDirty(deckId)` here so the SSE/poll
-   * reconcile path knows not to replace the deck under an active in-progress
-   * edit, even before a `content` update has been flushed.
+   * The parent should mark the slide as actively edited so the SSE/poll
+   * reconcile path knows not to replace it before a `content` update is queued.
    */
   onInlineEditStart?: (slideId: string) => void;
   /** Called after inline edit mode exits and its draft has been handed off.
@@ -1549,6 +1552,43 @@ export default function SlideEditor({
   );
   const previousSlideIdRef = useRef(slide.id);
 
+  // Inline editing keeps its latest HTML in the DOM until blur so React does
+  // not rerender the contentEditable on every keystroke. Hand that draft to
+  // the keepalive queue before browser teardown.
+  useEffect(() => {
+    const flushInlineEditDraft = () => {
+      // Input captures already enqueue the current draft. Keep the ref while
+      // the editor remains mounted so the first edit after tab restore queues
+      // against the previous snapshot instead of being mistaken for setup.
+      if (!inlineEditDraftRef.current) return;
+      flushPendingSaves();
+    };
+    const flushWhenHidden = () => {
+      if (document.visibilityState === "hidden") flushInlineEditDraft();
+    };
+
+    window.addEventListener("beforeunload", flushInlineEditDraft, {
+      capture: true,
+    });
+    window.addEventListener("pagehide", flushInlineEditDraft, {
+      capture: true,
+    });
+    document.addEventListener("visibilitychange", flushWhenHidden, {
+      capture: true,
+    });
+    return () => {
+      window.removeEventListener("beforeunload", flushInlineEditDraft, {
+        capture: true,
+      });
+      window.removeEventListener("pagehide", flushInlineEditDraft, {
+        capture: true,
+      });
+      document.removeEventListener("visibilitychange", flushWhenHidden, {
+        capture: true,
+      });
+    };
+  }, []);
+
   const readCurrentSlideContentHtml = useCallback(() => {
     const slideContent = containerRef.current?.querySelector(
       ".slide-content",
@@ -1605,13 +1645,21 @@ export default function SlideEditor({
     (slideId = slide.id) => {
       const html = readCurrentSlideContentHtml();
       if (html !== null) {
+        const next = { slideId, content: html };
+        const previous = inlineEditDraftRef.current;
+        const initial = inlineEditInitialContentRef.current;
+        if (!initial || initial.slideId !== slideId) {
+          inlineEditInitialContentRef.current = next;
+        }
         if (
-          !inlineEditInitialContentRef.current ||
-          inlineEditInitialContentRef.current.slideId !== slideId
+          previous?.slideId === slideId &&
+          previous.content !== next.content
         ) {
-          inlineEditInitialContentRef.current = { slideId, content: html };
+          onUpdateSlideRef.current({ content: html }, slideId, {
+            preserveLocalState: true,
+          });
         }
-        inlineEditDraftRef.current = { slideId, content: html };
+        inlineEditDraftRef.current = next;
       }
     },
     [readCurrentSlideContentHtml, slide.id],
@@ -1877,14 +1925,18 @@ export default function SlideEditor({
 
     const html = selected ? readCurrentSlideContentHtml() : null;
     const initial = inlineEditInitialContentRef.current;
-    if (
-      html !== null &&
-      shouldPersistInlineEditContent(initial, {
-        slideId: slide.id,
-        content: html,
-      })
-    ) {
-      onUpdateSlideRef.current({ content: html });
+    if (html !== null) {
+      const current = { slideId: slide.id, content: html };
+      if (shouldPersistInlineEditContent(initial, current)) {
+        const latestDraft = inlineEditDraftRef.current;
+        onUpdateSlideRef.current(
+          { content: html },
+          slide.id,
+          shouldPersistInlineEditContent(latestDraft, current)
+            ? undefined
+            : { recordUndoOnly: true },
+        );
+      }
     }
     onInlineEditEnd?.(slide.id);
     inlineEditDraftRef.current = null;
@@ -1923,9 +1975,9 @@ export default function SlideEditor({
       // resize and auto-fit again on the second click.
       setSelectedElementMeasurement(null);
       captureInlineEditDraft(slide.id);
-      // Mark the deck dirty immediately so SSE/poll refreshes do not replace
-      // the deck under an active contentEditable edit, even before the user
-      // types and triggers an onUpdateSlide flush.
+      // Mark the slide active immediately so SSE/poll refreshes do not replace
+      // the live DOM under an active contentEditable edit, even before the
+      // user types and triggers an onUpdateSlide flush.
       onInlineEditStart?.(slide.id);
       // Don't override the selection. The browser's native double-click
       // word-select (or single-click caret) is already on the element from the
@@ -1966,10 +2018,12 @@ export default function SlideEditor({
       draft?.slideId === previousSlideId &&
       shouldPersistInlineEditContent(initial, draft)
     ) {
-      onUpdateSlideRef.current({ content: draft.content }, previousSlideId);
-      inlineEditDraftRef.current = null;
+      onUpdateSlideRef.current({ content: draft.content }, previousSlideId, {
+        recordUndoOnly: true,
+      });
     }
     if (editing || draft) onInlineEditEnd?.(previousSlideId);
+    inlineEditDraftRef.current = null;
     inlineEditInitialContentRef.current = null;
 
     previousSlideIdRef.current = slide.id;
@@ -1980,9 +2034,20 @@ export default function SlideEditor({
   // otherwise never clear and permanently block live sync for that slide.
   useEffect(() => {
     return () => {
-      if (editingElRef.current || inlineEditDraftRef.current) {
-        onInlineEditEndRef.current?.(previousSlideIdRef.current);
+      const draft = inlineEditDraftRef.current;
+      const initial = inlineEditInitialContentRef.current;
+      if (shouldPersistInlineEditContent(initial, draft) && draft) {
+        onUpdateSlideRef.current({ content: draft.content }, draft.slideId, {
+          recordUndoOnly: true,
+        });
       }
+      if (editingElRef.current || draft) {
+        onInlineEditEndRef.current?.(
+          draft?.slideId ?? previousSlideIdRef.current,
+        );
+      }
+      inlineEditDraftRef.current = null;
+      inlineEditInitialContentRef.current = null;
     };
   }, []);
 

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

@@ -68,6 +68,10 @@ function addSlideFields(
 export type DeckReloadStatus = "loaded" | "failed" | "stale";
 export interface UpdateSlideOptions {
   persistence?: "debounced" | "immediate";
+  /** Queue a draft without replacing the active contentEditable DOM. */
+  preserveLocalState?: boolean;
+  /** Record the edit for undo without enqueueing a duplicate server write. */
+  recordUndoOnly?: boolean;
 }
 
 // ---------------------------------------------------------------------------
@@ -382,7 +386,7 @@ const inFlightSaves = new Set<string>();
 const inFlightSaveChains = new Map<string, Promise<void>>();
 const inFlightSaveControllers = new Map<string, AbortController>();
 const deckSaveGenerations = new Map<string, number>();
-const immediateFlushRequests = new Set<string>();
+const immediateFlushRequests = new Map<string, boolean>();
 const deckSaveRetryAttempts = new Map<string, number>();
 const failedSaveDecks = new Set<string>();
 const saveStateListeners = new Set<() => void>();
@@ -400,10 +404,9 @@ const pendingOpsQueue = new Map<string, GranularOp[]>();
 // whole request duration, starving unrelated agent writes of live sync.
 const inFlightOpSlides = new Map<string, GranularOp[]>();
 
-// Slides currently mid inline-edit (contentEditable open, keystrokes not yet
-// committed to a "patch-slide" op). `onInlineEditStart`/`onInlineEditEnd`
-// keep this current; a slide only reaches `pendingOpsQueue` when editing
-// ends, so this is the only signal that catches live, uncommitted typing.
+// Slides currently mid inline-edit (contentEditable open). `onInlineEditStart`
+// /`onInlineEditEnd` keep this current while content captures queue granular
+// ops without replacing the live DOM.
 const activeInlineEditSlides = new Map<string, Set<string>>();
 
 /** Mark `slideId` as mid inline-edit so a concurrent agent write to the same
@@ -502,11 +505,64 @@ function deckPayload(deck: Deck): Record<string, unknown> {
  * the `save-deck` action is called first, then any trailing granular ops are
  * sent through `patch-deck`.
  */
+async function sendKeepaliveAction(
+  url: string,
+  method: "POST" | "PUT",
+  body: Record<string, unknown>,
+  signal?: AbortSignal,
+): Promise<void> {
+  const response = await fetch(url, {
+    method,
+    headers: {
+      "Content-Type": "application/json",
+      "X-Agent-Native-Frontend": "1",
+    },
+    body: JSON.stringify(body),
+    cache: "no-store",
+    keepalive: true,
+    signal,
+  });
+  if (!response.ok) {
+    throw new Error(`Action request failed with status ${response.status}`);
+  }
+}
+
 async function persistDeckOps(
   deckId: string,
   ops: GranularOp[],
   signal?: AbortSignal,
+  options?: { keepalive?: boolean },
 ) {
+  if (options?.keepalive) {
+    const actionsBase = agentNativePath("/_agent-native/actions");
+    if (ops[0].op === "full-replace") {
+      const deck = ops[0].deck;
+      await sendKeepaliveAction(
+        `${actionsBase}/save-deck`,
+        "PUT",
+        { deckId, deck: deckPayload(deck) },
+        signal,
+      );
+      const trailingOps = ops.slice(1) as PatchDeckOp[];
+      if (trailingOps.length > 0) {
+        await sendKeepaliveAction(
+          `${actionsBase}/patch-deck`,
+          "POST",
+          { deckId, operations: trailingOps },
+          signal,
+        );
+      }
+    } else {
+      await sendKeepaliveAction(
+        `${actionsBase}/patch-deck`,
+        "POST",
+        { deckId, operations: ops as PatchDeckOp[] },
+        signal,
+      );
+    }
+    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`
@@ -547,14 +603,21 @@ async function persistDeckOps(
  * could otherwise complete out of order and let a stale drag overwrite a
  * newer resize.
  */
-function drainPendingDeckOps(deckId: string): Promise<void> {
+function drainPendingDeckOps(
+  deckId: string,
+  options?: { keepalive?: boolean },
+): Promise<void> {
   const timer = pendingSaves.get(deckId);
   if (timer) clearTimeout(timer);
   pendingSaves.delete(deckId);
 
   const active = inFlightSaveChains.get(deckId);
   if (active) {
-    immediateFlushRequests.add(deckId);
+    immediateFlushRequests.set(
+      deckId,
+      (immediateFlushRequests.get(deckId) ?? false) ||
+        options?.keepalive === true,
+    );
     notifySaveListeners();
     return active;
   }
@@ -574,7 +637,7 @@ function drainPendingDeckOps(deckId: string): Promise<void> {
   inFlightOpSlides.set(deckId, ops);
   const isCurrentGeneration = () =>
     (deckSaveGenerations.get(deckId) ?? 0) === generation;
-  const next = persistDeckOps(deckId, ops, controller?.signal)
+  const next = persistDeckOps(deckId, ops, controller?.signal, options)
     .then(() => {
       if (!isCurrentGeneration()) return;
       deckSaveRetryAttempts.delete(deckId);
@@ -613,10 +676,15 @@ function drainPendingDeckOps(deckId: string): Promise<void> {
         }
         inFlightSaves.delete(deckId);
         inFlightOpSlides.delete(deckId);
-        const flushImmediately = immediateFlushRequests.delete(deckId);
+        const requestedFlush = immediateFlushRequests.get(deckId);
+        const flushImmediately = requestedFlush !== undefined;
+        immediateFlushRequests.delete(deckId);
         notifySaveListeners();
         if (flushImmediately) {
-          void drainPendingDeckOps(deckId);
+          void drainPendingDeckOps(
+            deckId,
+            requestedFlush ? { keepalive: true } : undefined,
+          );
         }
       }
     });
@@ -661,7 +729,10 @@ async function flushDeckSave(deckId: string): Promise<void> {
 function enqueueDeckOp(
   deckId: string,
   op: GranularOp,
-  options?: { persistence?: "debounced" | "immediate" },
+  options?: {
+    persistence?: "debounced" | "immediate";
+    coalesceContent?: boolean;
+  },
 ) {
   const existing = pendingSaves.get(deckId);
   if (existing) clearTimeout(existing);
@@ -678,7 +749,21 @@ function enqueueDeckOp(
     pendingOpsQueue.set(deckId, [op]);
   } else {
     const queue = pendingOpsQueue.get(deckId) ?? [];
-    queue.push(op);
+    const previous = queue[queue.length - 1];
+    if (
+      options?.coalesceContent &&
+      previous?.op === "patch-slide" &&
+      op.op === "patch-slide" &&
+      previous.slideId === op.slideId &&
+      Object.keys(previous.fields).length === 1 &&
+      Object.keys(op.fields).length === 1 &&
+      "content" in previous.fields &&
+      "content" in op.fields
+    ) {
+      queue[queue.length - 1] = op;
+    } else {
+      queue.push(op);
+    }
     pendingOpsQueue.set(deckId, queue);
   }
 
@@ -704,71 +789,20 @@ function saveDeckToAPI(deck: Deck) {
 }
 
 /**
- * Synchronously flush every pending (debounced) deck op queue using
- * `fetch(..., { keepalive: true })` so in-flight edits survive a tab
+ * Flush every pending (debounced) deck op through the same per-deck queue used
+ * by normal saves, using keepalive transport so in-flight edits survive a tab
  * close / navigation. Called from a `pagehide` / `visibilitychange(hidden)`
- * handler — without it there is a ~500ms window (the debounce) where the
+ * handler - without it there is a ~500ms window (the debounce) where the
  * user's most recent edits are only in memory and are lost on tab close.
  *
  * keepalive requests are best-effort and capped (~64KB by the browser), which
  * is fine: granular ops are small, and if a full-replace payload is too large
  * to send keepalive the normal debounce/poll path still catches up on reopen.
  */
-function flushPendingSaves() {
-  const actionsBase = agentNativePath("/_agent-native/actions");
-  const actionUrl = `${actionsBase}/patch-deck`;
-  const saveDeckUrl = `${actionsBase}/save-deck`;
-  for (const [deckId, timer] of pendingSaves) {
-    clearTimeout(timer);
-    const ops = pendingOpsQueue.get(deckId);
-    pendingOpsQueue.delete(deckId);
-    if (!ops || ops.length === 0) continue;
-    try {
-      if (ops[0].op === "full-replace") {
-        const deck = ops[0].deck;
-        void fetch(saveDeckUrl, {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-            "X-Agent-Native-Frontend": "1",
-          },
-          body: JSON.stringify({ deckId, deck }),
-          keepalive: true,
-        });
-        const trailingOps = ops.slice(1) as PatchDeckOp[];
-        if (trailingOps.length === 0) continue;
-        void fetch(actionUrl, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "X-Agent-Native-Frontend": "1",
-          },
-          body: JSON.stringify({
-            deckId,
-            operations: trailingOps,
-          }),
-          keepalive: true,
-        });
-      } else {
-        void fetch(actionUrl, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            "X-Agent-Native-Frontend": "1",
-          },
-          body: JSON.stringify({
-            deckId,
-            operations: ops as PatchDeckOp[],
-          }),
-          keepalive: true,
-        });
-      }
-    } catch {
-      // Best-effort — nothing more we can do as the page is unloading.
-    }
+export function flushPendingSaves() {
+  for (const deckId of [...pendingSaves.keys()]) {
+    void drainPendingDeckOps(deckId, { keepalive: true });
   }
-  pendingSaves.clear();
-  notifySaveListeners();
 }
 
 function discardPendingDeckOps(deckId: string) {
@@ -1680,7 +1714,8 @@ export function DeckProvider({ children }: { children: ReactNode }) {
 
       const hasLocalEdits =
         pendingCreateIdsRef.current.has(currentOpenId) ||
-        hasUncommittedDeckChanges(currentOpenId, dirtyDeckIdsRef.current);
+        hasUncommittedDeckChanges(currentOpenId, dirtyDeckIdsRef.current) ||
+        (activeInlineEditSlides.get(currentOpenId)?.size ?? 0) > 0;
 
       if (hasLocalEdits && clientDeck) {
         // Content-preserving: only ADD server slides missing locally.
@@ -2433,23 +2468,57 @@ export function DeckProvider({ children }: { children: ReactNode }) {
             : "Edit slide";
       const before = decksRef.current.find((d) => d.id === deckId);
       const op: PatchDeckOp = { op: "patch-slide", slideId, fields: updates };
-      if (before && !deriveInverseOp(before, op)) return;
-      markDeckDirty(deckId);
-      setDecksLocal((prev: Deck[]) =>
-        prev.map((d) => {
-          if (d.id !== deckId) return d;
-          return {
-            ...d,
-            slides: d.slides.map((s) =>
-              s.id === slideId ? { ...s, ...updates } : s,
-            ),
-            updatedAt: new Date().toISOString(),
-          };
-        }),
-      );
+      if (
+        before &&
+        !deriveInverseOp(before, op) &&
+        !options?.preserveLocalState
+      ) {
+        return;
+      }
+      if (options?.recordUndoOnly) {
+        if (before) {
+          setDecksLocal((prev: Deck[]) =>
+            prev.map((d) => {
+              if (d.id !== deckId) return d;
+              return {
+                ...d,
+                slides: d.slides.map((s) =>
+                  s.id === slideId ? { ...s, ...updates } : s,
+                ),
+                updatedAt: new Date().toISOString(),
+              };
+            }),
+          );
+          recordUndo(before, op, {
+            label,
+            coalesceKey: `${deckId}:${slideId}:${Object.keys(updates)
+              .sort()
+              .join(",")}`,
+          });
+        }
+        return;
+      }
+      if (!options?.preserveLocalState) markDeckDirty(deckId);
+      if (!options?.preserveLocalState) {
+        setDecksLocal((prev: Deck[]) =>
+          prev.map((d) => {
+            if (d.id !== deckId) return d;
+            return {
+              ...d,
+              slides: d.slides.map((s) =>
+                s.id === slideId ? { ...s, ...updates } : s,
+              ),
+              updatedAt: new Date().toISOString(),
+            };
+          }),
+        );
+      }
       // Granular op — only this slide's changed fields reach the server.
-      enqueueDeckOp(deckId, op, options);
-      if (before) {
+      enqueueDeckOp(deckId, op, {
+        persistence: options?.persistence,
+        coalesceContent: options?.preserveLocalState,
+      });
+      if (before && !options?.preserveLocalState) {
         // 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
         // field-sets (content vs background vs layout) get distinct undo steps.

package/corpus/templates/slides/app/pages/DeckEditor.tsx

@@ -160,7 +160,6 @@ export default function DeckEditor() {
     addSlide,
     flushDeckSave,
     reorderSlides,
-    markDeckDirty,
     undo,
     loading,
     loadError,
@@ -180,9 +179,13 @@ export default function DeckEditor() {
   }, []);
   const [generatingSlideSelected, setGeneratingSlideSelected] = useState(false);
   const { hasUnsavedChanges: hasUnsavedSave } = useSaveState();
-  const hasPendingDeckEdits =
-    inlineEditActive || (id ? hasUnsavedDeckChanges(id) : hasUnsavedSave);
-  usePendingDeckUnloadGuard(hasPendingDeckEdits);
+  // useSaveState re-renders this component when a preserved inline draft enters
+  // or leaves the shared save queue, so the deck-specific read stays current.
+  const hasPendingDeckWrites = id ? hasUnsavedDeckChanges(id) : hasUnsavedSave;
+  const hasPendingDeckEdits = inlineEditActive || hasPendingDeckWrites;
+  // Inline drafts flush through SlideEditor keepalive handlers. The native
+  // prompt only needs to cover queued or in-flight writes now.
+  usePendingDeckUnloadGuard(hasPendingDeckWrites);
   const pendingDeckNavigationBlocker = useBlocker(
     useCallback(
       ({ currentLocation, nextLocation }) =>
@@ -1773,7 +1776,6 @@ export default function DeckEditor() {
             }
             onInlineEditStart={(slideId) => {
               setInlineEditActive(true);
-              markDeckDirty(id);
               if (id) markSlideEditingActive(id, slideId);
             }}
             onInlineEditEnd={(slideId) => {

package/corpus/templates/slides/changelog/2026-08-26-thumbnail-arrow-keys-now-navigate-slides-after-selection.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-26
+---
+
+Clicking a slide thumbnail now keeps arrow keys on slide navigation instead of scrolling the thumbnail pane.

package/dist/client/hooks/index.d.ts

@@ -10,5 +10,6 @@ export { createAgentNativeQueryClient } from "../create-query-client.js";
 export { AppProviders, type AppProvidersProps } from "../app-providers.js";
 export { APP_CHAT_SIDEBAR_STATE_EVENT, APP_CHAT_SIDEBAR_STATE_MESSAGE, APP_CHAT_SIDEBAR_STATE_REQUEST_MESSAGE, buildAppChatSidebarStateMessage, buildAppChatSidebarStateRequest, isPerAppChatStorageKey, requestPerAppChatCommand, usePerAppChatState, usePerAppChatOpen, type AppChatSidebarCommand, type AppChatSidebarState, } from "../app-chat-sidebar.js";
 export { usePinchZoom, type UsePinchZoomOptions } from "../use-pinch-zoom.js";
+export { isPinchZoomDelta, normalizeWheelDeltaPx, resolveZoomGestureDevice, MAX_PINCH_DELTA_PX, ZOOM_GESTURE_IDLE_RESET_MS, type ZoomGestureDevice, } from "../zoom-gesture.js";
 export { useAvatarUrl, uploadAvatar, invalidateAvatarCache, } from "../use-avatar.js";
 export { usePollLoop, type UsePollLoopOptions, type UsePollLoopHandle, } from "../use-poll-loop.js";