@agent-native/core 0.152.1 → 0.153.0

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

@@ -313,17 +313,24 @@ const DECK_SAVE_RETRY_BASE_MS = 250;
 // Ops are appended by enqueueDeckOp and drained when the debounce fires.
 const pendingOpsQueue = new Map<string, GranularOp[]>();
 
-// Cached snapshot for useSyncExternalStore. MUST be stable when the boolean
+// Cached snapshot for useSyncExternalStore. MUST be stable when either value
 // is unchanged or React will infinite-loop (it compares snapshots with
 // Object.is — a fresh object literal every call schedules a new update,
 // which calls getSnapshot again, which returns a new object… etc).
-let cachedSnapshot: { saving: boolean } = { saving: false };
+let cachedSnapshot: { saving: boolean; hasUnsavedChanges: boolean } = {
+  saving: false,
+  hasUnsavedChanges: false,
+};
 
 function recomputeSnapshot() {
   const saving =
     pendingSaves.size > 0 || inFlightSaves.size > 0 || pendingOpsQueue.size > 0;
-  if (saving !== cachedSnapshot.saving) {
-    cachedSnapshot = { saving };
+  const hasUnsavedChanges = saving || failedSaveDecks.size > 0;
+  if (
+    saving !== cachedSnapshot.saving ||
+    hasUnsavedChanges !== cachedSnapshot.hasUnsavedChanges
+  ) {
+    cachedSnapshot = { saving, hasUnsavedChanges };
   }
 }
 
@@ -342,8 +349,24 @@ export function subscribeSaveState(listener: () => void): () => void {
   return () => saveStateListeners.delete(listener);
 }
 
+/**
+ * True when a deck still has a local write that has not been confirmed by the
+ * server, including a save that exhausted its retry budget.
+ */
+export function hasUnsavedDeckChanges(deckId: string): boolean {
+  return (
+    pendingSaves.has(deckId) ||
+    inFlightSaves.has(deckId) ||
+    pendingOpsQueue.has(deckId) ||
+    failedSaveDecks.has(deckId)
+  );
+}
+
 /** Snapshot of save state — true when anything is debounced or in flight. */
-export function getSaveSnapshot(): { saving: boolean } {
+export function getSaveSnapshot(): {
+  saving: boolean;
+  hasUnsavedChanges: boolean;
+} {
   return cachedSnapshot;
 }
 
@@ -1040,12 +1063,7 @@ export function hasUncommittedDeckChanges(
   deckId: string,
   dirtyDeckIds: Set<string>,
 ): boolean {
-  return (
-    dirtyDeckIds.has(deckId) ||
-    pendingSaves.has(deckId) ||
-    inFlightSaves.has(deckId) ||
-    failedSaveDecks.has(deckId)
-  );
+  return dirtyDeckIds.has(deckId) || hasUnsavedDeckChanges(deckId);
 }
 
 /**
@@ -1174,6 +1192,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
   const pendingDuplicateSourceIdsRef = useRef<Set<string>>(new Set());
   const dirtyDeckIdsRef = useRef<Set<string>>(new Set());
   const deckBaselineRequestIdRef = useRef(0);
+  const openDeckRequestIdByDeckRef = useRef<Map<string, number>>(new Map());
   // True only while the SSE channel is actually open. Stays false when SSE is
   // never started (embed auth), so the poll keeps its fast intervals there.
   const liveChannelConnectedRef = useRef(false);
@@ -1396,7 +1415,13 @@ export function DeckProvider({ children }: { children: ReactNode }) {
   //     agent-added slides without ever overwriting or dropping local slides.
   const refetchOpenDeckIfChanged = useCallback(
     async (currentOpenId: string): Promise<Deck | null> => {
+      const requestId =
+        (openDeckRequestIdByDeckRef.current.get(currentOpenId) ?? 0) + 1;
+      openDeckRequestIdByDeckRef.current.set(currentOpenId, requestId);
       const serverDeck = await fetchDeckFromAPI(currentOpenId);
+      if (openDeckRequestIdByDeckRef.current.get(currentOpenId) !== requestId) {
+        return null;
+      }
       // Null means 404 (row not created yet), a transient failure, or a
       // still-pending create — nothing authoritative to reconcile.
       if (!serverDeck) return null;
@@ -1693,21 +1718,16 @@ export function DeckProvider({ children }: { children: ReactNode }) {
             lastExternalUpdateRef.current = Date.now();
             setDecks((prev) => prev.filter((d) => d.id !== data.deckId));
           } else if (data.type === "deck-changed") {
-            // Skip if a save for this deck is pending or in flight — this
-            // event is most likely the echo of our own write and the server
-            // copy may be a few hundred ms behind what the user just typed.
-            // Polling and the next save's response will bring the canonical
-            // state once the local burst settles.
-            if (
-              hasUncommittedDeckChanges(data.deckId, dirtyDeckIdsRef.current)
-            ) {
-              continue;
-            }
-            // Refetch the changed deck from the shared action surface.
-            void fetchDeckFromAPI(data.deckId).then((updated) => {
-              if (stopped || !updated) return;
-              lastExternalUpdateRef.current = Date.now(); // Suppress save-back
-              applyRemoteDeckUpdate(updated);
+            // Do not drop the event while a local edit/save is pending. The
+            // event may be an own-write echo, but it may also be an agent
+            // write that arrived during the same local edit. The reconciler
+            // preserves local slide bodies and local-only slides while still
+            // surfacing server-added slides immediately.
+            void refetchOpenDeckIfChanged(data.deckId).catch((error) => {
+              console.error(
+                `Failed to refresh deck ${data.deckId} after sync event:`,
+                error,
+              );
             });
           }
         }
@@ -1732,7 +1752,7 @@ export function DeckProvider({ children }: { children: ReactNode }) {
       liveChannelConnectedRef.current = false;
       unsubscribe();
     };
-  }, [applyRemoteDeckUpdate, resyncDeckState]);
+  }, [refetchOpenDeckIfChanged, resyncDeckState]);
 
   // Flush pending (debounced) saves before the tab is hidden or unloaded so the
   // last ~500ms of edits aren't lost on close/navigation. `pagehide` is the
@@ -2344,15 +2364,21 @@ export function useDecks() {
 }
 
 /**
- * Subscribe to deck save-state. Returns `{ saving: boolean }` — true while any
- * deck has a pending debounce timer or an in-flight PUT.
+ * Subscribe to deck save-state. `saving` is true while any deck has a pending
+ * debounce timer or an in-flight PUT. `hasUnsavedChanges` also stays true when
+ * a save has exhausted its retry budget, so navigation can warn before the
+ * user leaves work that is still only local.
  *
  * Used by SaveStatusIndicator in the toolbar so users always see whether
  * their work has been committed (Rochkind reported losing a full deck because
  * there was no save signal).
  */
-export function useSaveState(): { saving: boolean } {
+export function useSaveState(): {
+  saving: boolean;
+  hasUnsavedChanges: boolean;
+} {
   return useSyncExternalStore(subscribeSaveState, getSaveSnapshot, () => ({
     saving: false,
+    hasUnsavedChanges: false,
   }));
 }

package/corpus/templates/slides/app/hooks/use-deck-role.ts

@@ -1,6 +1,6 @@
 import { useActionQuery } from "@agent-native/core/client/hooks";
 
-type Role = "viewer" | "editor" | "admin";
+type Role = "viewer" | "commenter" | "editor" | "admin";
 
 interface SharesResponse {
   ownerEmail: string | null;
@@ -11,8 +11,8 @@ interface SharesResponse {
 
 /**
  * Resolve the signed-in user's role on a deck. Mirrors Google Slides:
- * `Viewer` = no edit affordances, but the editor shell is still navigable;
- * any other role (Owner / Editor / Admin) gets full editing.
+ * `Viewer` = read-only, `Commenter` = read-only with comment affordances;
+ * Owner / Editor / Admin get full editing.
  *
  * `assumeEditorWhileLoading` should only be true when a faster, already-known
  * signal (e.g. `deck.createdByMe`) confirms the caller is the owner — that
@@ -28,6 +28,7 @@ export function useDeckRole(
 ): {
   role: SharesResponse["role"] | undefined;
   canEdit: boolean;
+  canComment: boolean;
   isLoading: boolean;
 } {
   const query = useActionQuery<SharesResponse>(
@@ -39,6 +40,13 @@ export function useDeckRole(
   const canEdit =
     role === undefined
       ? assumeEditorWhileLoading
-      : role === "owner" || role !== "viewer";
-  return { role, canEdit, isLoading: query.isLoading };
+      : role === "owner" || role === "editor" || role === "admin";
+  const canComment =
+    role === undefined
+      ? assumeEditorWhileLoading
+      : role === "owner" ||
+        role === "commenter" ||
+        role === "editor" ||
+        role === "admin";
+  return { role, canEdit, canComment, isLoading: query.isLoading };
 }

package/corpus/templates/slides/app/hooks/use-design-systems.ts

@@ -7,7 +7,7 @@ type DesignSystemSummary = {
   data: string;
   isDefault: boolean;
   visibility?: "private" | "org" | "public" | null;
-  accessRole?: "owner" | "admin" | "editor" | "viewer";
+  accessRole?: "owner" | "admin" | "editor" | "commenter" | "viewer";
   canManage?: boolean;
   createdAt: string;
 };

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

@@ -385,6 +385,7 @@ const messages = {
     center: "Center",
     right: "Right",
     justify: "Justify",
+    distribute: "Distribute",
     fill: "Fill",
     tint: "Tint",
     transparent: "Transparent",
@@ -563,6 +564,11 @@ const messages = {
     dismissLayoutWarning: "Dismiss layout warning",
     slidesAdded_one: "{{count}} slide added",
     slidesAdded_other: "{{count}} slides added",
+    unsavedChangesTitle: "Unsaved changes",
+    unsavedChangesDescription:
+      "If you leave or reload now, you may lose changes that have not been saved yet. Are you sure you want to exit?",
+    keepEditing: "Keep editing",
+    leaveWithoutSaving: "Exit without saving",
   },
   designSystemSetup: {
     importedBrand: "Imported brand",
@@ -662,8 +668,6 @@ const messages = {
     all: "All",
     showMineDecks: "Show decks created by me",
     mine: "Mine",
-    deckCount_one: "deck",
-    deckCount_other: "decks",
     createDeckOrVisual: "Create a presentation",
     noMineDecks: "No decks created by you yet.",
     noDecksMatchSearch: "No decks match your search.",

package/corpus/templates/slides/app/lib/create-deck-generation.ts

@@ -396,6 +396,7 @@ export async function startDeckGeneration({
     sourceModeInstructions,
     "If the user asked for a specific slide count, keep going sequentially until that count is reached unless a tool error blocks you. If no explicit count was given (including when the guided slide-count question was skipped), infer the count from the distinct topics/sections implied by the request — one slide per section plus a title and closing slide — and add slides for every section before considering the deck done. Do not stop at an arbitrary round number (e.g. 10) if sections remain uncovered, and never call `generate-slides-ai` for this flow; it is a legacy single-shot helper capped at 10 slides.",
     "Every slide is rendered into a fixed native canvas (default 16:9 is 960x540 CSS pixels, with 740x380px available inside standard 80px 110px padding). Keep the main content within that fit budget; split dense source material across more slides instead of packing it tightly. Never use zoom, transform: scale(), clipping, or scroll overflow to hide content overflow, and keep body text at least 16px.",
+    "When no reference deck or hydrated design system is available, use a restrained, content-first visual language. Do not invent colorful cards, boxes, or decorative rectangles behind or over text; add a colored shape only when it has a clear semantic role and leaves the text unobscured. Prefer typography, spacing, alignment, and one restrained accent.",
     "Each slide's --content must be full HTML. Slide HTML templates are in your AGENTS.md.",
     "Do NOT use create-deck (the deck already exists). Do NOT call db-schema, the resources tool, or search-files.",
   ].join("\n");

package/corpus/templates/slides/app/lib/pending-deck-changes.ts

@@ -0,0 +1,32 @@
+import { useEffect } from "react";
+
+export function preventPendingDeckUnload(event: BeforeUnloadEvent): void {
+  event.preventDefault();
+  event.returnValue = "";
+}
+
+/**
+ * Keep the browser's native reload/close confirmation attached only while a
+ * deck has local work that cannot be recovered from the server.
+ */
+export function usePendingDeckUnloadGuard(hasPendingEdits: boolean): void {
+  useEffect(() => {
+    if (!hasPendingEdits) return;
+    window.addEventListener("beforeunload", preventPendingDeckUnload, {
+      capture: true,
+    });
+    return () => {
+      window.removeEventListener("beforeunload", preventPendingDeckUnload, {
+        capture: true,
+      });
+    };
+  }, [hasPendingEdits]);
+}
+
+export function shouldBlockPendingDeckNavigation(args: {
+  hasPendingEdits: boolean;
+  currentPathname: string;
+  nextPathname: string;
+}): boolean {
+  return args.hasPendingEdits && args.currentPathname !== args.nextPathname;
+}

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

@@ -24,7 +24,12 @@ import {
 } from "@tabler/icons-react";
 import { nanoid } from "nanoid";
 import { useState, useCallback, useRef, useEffect } from "react";
-import { useParams, useSearchParams, useNavigate } from "react-router";
+import {
+  useBlocker,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from "react-router";
 import { toast } from "sonner";
 
 import { SlideCommentsPanel } from "@/components/comments/SlideCommentsPanel";
@@ -40,8 +45,23 @@ import ImageGenPanel from "@/components/editor/ImageGenPanel";
 import { QuestionFlow } from "@/components/editor/QuestionFlow";
 import SlideEditor from "@/components/editor/SlideEditor";
 import { TweaksPanel } from "@/components/editor/TweaksPanel";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import { deckIdFromPathname, useDecks } from "@/context/DeckContext";
+import {
+  deckIdFromPathname,
+  hasUnsavedDeckChanges,
+  useDecks,
+  useSaveState,
+} from "@/context/DeckContext";
 import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import { useDeckDesignSystem } from "@/hooks/use-deck-design-system";
 import { useDeckPresence } from "@/hooks/use-deck-presence";
@@ -65,6 +85,10 @@ import {
   shouldShowNewDeckGeneratingProgress,
 } from "@/lib/generation-state";
 import { isMissingUploadProviderError } from "@/lib/image-drop-to-agent";
+import {
+  shouldBlockPendingDeckNavigation,
+  usePendingDeckUnloadGuard,
+} from "@/lib/pending-deck-changes";
 import { imageFileLooksSupported } from "@/lib/slide-image-replacement";
 import {
   insertDroppedImageIntoSlideHtml,
@@ -165,8 +189,34 @@ export default function DeckEditor() {
     loadError,
   } = useDecks();
   const [activeSlideId, setActiveSlideId] = useState<string | null>(null);
+  const [inlineEditActive, setInlineEditActive] = useState(false);
   const [addSlideGenerating, setAddSlideGenerating] = useState(false);
   const [generatingSlideSelected, setGeneratingSlideSelected] = useState(false);
+  const { hasUnsavedChanges: hasUnsavedSave } = useSaveState();
+  const hasPendingDeckEdits =
+    inlineEditActive || (id ? hasUnsavedDeckChanges(id) : hasUnsavedSave);
+  usePendingDeckUnloadGuard(hasPendingDeckEdits);
+  const pendingDeckNavigationBlocker = useBlocker(
+    useCallback(
+      ({ currentLocation, nextLocation }) =>
+        shouldBlockPendingDeckNavigation({
+          hasPendingEdits: hasPendingDeckEdits,
+          currentPathname: currentLocation.pathname,
+          nextPathname: nextLocation.pathname,
+        }),
+      [hasPendingDeckEdits],
+    ),
+  );
+  const pendingDeckNavigationWarningOpen =
+    pendingDeckNavigationBlocker.state === "blocked";
+  const keepEditingAfterNavigationAttempt = useCallback(() => {
+    if (pendingDeckNavigationBlocker.state !== "blocked") return;
+    pendingDeckNavigationBlocker.reset();
+  }, [pendingDeckNavigationBlocker]);
+  const leaveWithPendingDeckChanges = useCallback(() => {
+    if (pendingDeckNavigationBlocker.state !== "blocked") return;
+    pendingDeckNavigationBlocker.proceed();
+  }, [pendingDeckNavigationBlocker]);
   const { generating } = useAgentGenerating();
   // Generation intent can arrive after this route mounts because the user
   // answers pre-generation questions from the empty editor.
@@ -253,7 +303,7 @@ export default function DeckEditor() {
   // get the full editor. Only assume edit access while the role is still
   // loading when `createdByMe` already confirms ownership — otherwise a
   // viewer would briefly see (and could click) edit affordances.
-  const { canEdit } = useDeckRole(id, deck?.createdByMe === true);
+  const { canEdit, canComment } = useDeckRole(id, deck?.createdByMe === true);
   const isNewDeckGenerating = shouldShowNewDeckGeneratingProgress({
     generating,
     isNewDeckCreation: wasNewDeckCreation.current,
@@ -1005,6 +1055,7 @@ export default function DeckEditor() {
         deckId={id}
         deckTitle={deck.title}
         canEdit={canEdit}
+        canComment={canComment}
         onTitleChange={(title) => updateDeck(id, { title })}
         slideCount={deck.slides.length}
         currentSlideIndex={currentIndex >= 0 ? currentIndex : 0}
@@ -1228,7 +1279,11 @@ export default function DeckEditor() {
                 options,
               )
             }
-            onInlineEditStart={() => markDeckDirty(id)}
+            onInlineEditStart={() => {
+              setInlineEditActive(true);
+              markDeckDirty(id);
+            }}
+            onInlineEditEnd={() => setInlineEditActive(false)}
             onGenerateImage={() => setImageGenOpen(true)}
             onOpenAssetLibrary={(src) => {
               setReplaceImageSrc(src);
@@ -1257,6 +1312,7 @@ export default function DeckEditor() {
             }
             recentEdits={deckRecentEdits}
             onComment={(quotedText) => {
+              if (!canComment) return;
               setPendingComment({ quotedText });
               setSidePanel("comments");
             }}
@@ -1284,6 +1340,7 @@ export default function DeckEditor() {
           <SlideCommentsPanel
             deckId={id}
             slideId={currentSlide?.id ?? null}
+            canComment={canComment}
             pendingComment={pendingComment}
             onPendingDone={() => setPendingComment(null)}
             onClose={() => {
@@ -1365,6 +1422,30 @@ export default function DeckEditor() {
         canRestore={canEdit}
         anchorRef={historyButtonRef}
       />
+
+      <AlertDialog open={pendingDeckNavigationWarningOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t("deckEditor.unsavedChangesTitle")}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t("deckEditor.unsavedChangesDescription")}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={keepEditingAfterNavigationAttempt}>
+              {t("deckEditor.keepEditing")}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={leaveWithPendingDeckChanges}
+            >
+              {t("deckEditor.leaveWithoutSaving")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

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

@@ -4,6 +4,11 @@ import {
   useSession,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import {
+  FIRST_RUN_ONBOARDING_STATUS_RESOLVED_EVENT,
+  fetchFirstRunOnboardingStatus,
+  isFirstRunOnboardingEnabled,
+} from "@agent-native/core/client/onboarding";
 import { buildSignInReturnHref } from "@agent-native/core/client/ui";
 import {
   useSetHeaderActions,
@@ -353,6 +358,8 @@ export default function Index() {
 
   const initialPrompt = searchParams.get("initialPrompt")?.trim() ?? "";
   const onboardingPreview = searchParams.get("onboarding") === "preview";
+  const firstRunOnboardingEnabled =
+    onboardingPreview || isFirstRunOnboardingEnabled();
   const openInitialPrompt = useCallback(() => {
     if (!initialPrompt || initialPromptConsumedRef.current) return;
     initialPromptConsumedRef.current = true;
@@ -371,40 +378,41 @@ export default function Index() {
 
   useEffect(() => {
     if (!initialPrompt || initialPromptConsumedRef.current) return;
-    const firstRunActive =
-      onboardingPreview ||
-      (typeof document !== "undefined" &&
-        document.cookie
-          .split(";")
-          .some((part) => part.trim().startsWith("agent-native-first-run=")));
     const handleFirstRunCompleted = () => openInitialPrompt();
+    const handleFirstRunStatusResolved = (event: Event) => {
+      const firstRun =
+        (event as CustomEvent<{ firstRun?: unknown }>).detail?.firstRun ===
+        true;
+      if (!firstRun) openInitialPrompt();
+    };
+
+    if (!firstRunOnboardingEnabled) {
+      openInitialPrompt();
+      return;
+    }
+
     window.addEventListener(
       "agent-native:first-run-completed",
       handleFirstRunCompleted,
     );
-    let fallbackTimer: number | undefined;
-    if (!firstRunActive) {
+    window.addEventListener(
+      FIRST_RUN_ONBOARDING_STATUS_RESOLVED_EVENT,
+      handleFirstRunStatusResolved,
+    );
+    void fetchFirstRunOnboardingStatus().catch(() => {
       openInitialPrompt();
-    } else {
-      // A landing link can open in a tab where the first-run marker exists but
-      // the onboarding surface is not mounted. Do not leave the prompt waiting
-      // forever in that case, while still giving the real onboarding overlay
-      // time to load and dispatch its completion event.
-      fallbackTimer = window.setTimeout(() => {
-        const firstRunSurface = document.querySelector(
-          "[data-onboarding-screen], [data-onboarding-loading]",
-        );
-        if (!firstRunSurface) openInitialPrompt();
-      }, 2500);
-    }
+    });
     return () => {
       window.removeEventListener(
         "agent-native:first-run-completed",
         handleFirstRunCompleted,
       );
-      if (fallbackTimer !== undefined) window.clearTimeout(fallbackTimer);
+      window.removeEventListener(
+        FIRST_RUN_ONBOARDING_STATUS_RESOLVED_EVENT,
+        handleFirstRunStatusResolved,
+      );
     };
-  }, [initialPrompt, onboardingPreview, openInitialPrompt]);
+  }, [firstRunOnboardingEnabled, initialPrompt, openInitialPrompt]);
 
   const setDeckFilter = useCallback(
     (value: string) => {
@@ -774,6 +782,7 @@ export default function Index() {
       sourceModeInstructions,
       "If the user asked for a specific slide count, keep going sequentially until that count is reached unless a tool error blocks you. If no explicit count was given (including when the guided slide-count question was skipped), infer the count from the distinct topics/sections implied by the request — one slide per section plus a title and closing slide — and add slides for every section before considering the deck done. Do not stop at an arbitrary round number (e.g. 10) if sections remain uncovered, and never call `generate-slides-ai` for this flow; it is a legacy single-shot helper capped at 10 slides.",
       "Every slide is rendered into a fixed native canvas (default 16:9 is 960x540 CSS pixels, with 740x380px available inside standard 80px 110px padding). Keep the main content within that fit budget; split dense source material across more slides instead of packing it tightly. Never use zoom, transform: scale(), clipping, or scroll overflow to hide content overflow, and keep body text at least 16px.",
+      "When no reference deck or hydrated design system is available, use a restrained, content-first visual language. Do not invent colorful cards, boxes, or decorative rectangles behind or over text; add a colored shape only when it has a clear semantic role and leaves the text unobscured. Prefer typography, spacing, alignment, and one restrained accent.",
       "Each slide's --content must be full HTML. Slide HTML templates are in your AGENTS.md.",
       "Do NOT use create-deck (the deck already exists). Do NOT call db-schema, the resources tool, or search-files.",
     ].join("\n");
@@ -1361,51 +1370,41 @@ export default function Index() {
       ) : (
         <>
           <div className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-            <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-center">
-              <ToggleGroup
-                type="single"
-                value={deckFilter}
-                onValueChange={(value) => value && setDeckFilter(value)}
-                className="w-fit rounded-lg border border-border bg-card p-0.5"
-                size="sm"
+            <ToggleGroup
+              type="single"
+              value={deckFilter}
+              onValueChange={(value) => value && setDeckFilter(value)}
+              className="w-fit rounded-lg border border-border bg-card p-0.5"
+              size="sm"
+            >
+              <ToggleGroupItem
+                value="all"
+                aria-label={t("home.showAllDecks")}
+                className="h-7 rounded-md px-3 text-xs data-[state=on]:bg-accent"
               >
-                <ToggleGroupItem
-                  value="all"
-                  aria-label={t("home.showAllDecks")}
-                  className="h-7 rounded-md px-3 text-xs data-[state=on]:bg-accent"
-                >
-                  <IconStack2 className="me-1.5 h-3.5 w-3.5" />
-                  {t("home.all")}
-                </ToggleGroupItem>
-                <ToggleGroupItem
-                  value="mine"
-                  aria-label={t("home.showMineDecks")}
-                  className="h-7 rounded-md px-3 text-xs data-[state=on]:bg-accent"
-                >
-                  <IconUserCircle className="me-1.5 h-3.5 w-3.5" />
-                  {t("home.mine")}
-                </ToggleGroupItem>
-              </ToggleGroup>
-              <label className="flex h-8 w-full items-center gap-2 rounded-lg border border-border bg-card px-2.5 text-muted-foreground sm:w-60">
-                <IconSearch className="size-3.5 shrink-0" aria-hidden="true" />
-                <Input
-                  type="search"
-                  value={deckSearch}
-                  onChange={(event) => setDeckSearch(event.target.value)}
-                  placeholder={t("root.searchDecks")}
-                  aria-label={t("root.searchDecks")}
-                  className="h-7 min-w-0 flex-1 border-0 bg-transparent p-0 text-xs shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
-                />
-              </label>
-            </div>
-            <span className="text-xs text-muted-foreground/70">
-              {deckFilter === "mine" || normalizedDeckSearch
-                ? `${visibleDecks.length} of ${decks.length}`
-                : visibleDecks.length}{" "}
-              {t("home.deckCount", {
-                count: visibleDecks.length,
-              })}
-            </span>
+                <IconStack2 className="me-1.5 h-3.5 w-3.5" />
+                {t("home.all")}
+              </ToggleGroupItem>
+              <ToggleGroupItem
+                value="mine"
+                aria-label={t("home.showMineDecks")}
+                className="h-7 rounded-md px-3 text-xs data-[state=on]:bg-accent"
+              >
+                <IconUserCircle className="me-1.5 h-3.5 w-3.5" />
+                {t("home.mine")}
+              </ToggleGroupItem>
+            </ToggleGroup>
+            <label className="flex h-8 w-full items-center gap-2 rounded-lg border border-border bg-card px-2.5 text-muted-foreground sm:w-60">
+              <IconSearch className="size-3.5 shrink-0" aria-hidden="true" />
+              <Input
+                type="search"
+                value={deckSearch}
+                onChange={(event) => setDeckSearch(event.target.value)}
+                placeholder={t("root.searchDecks")}
+                aria-label={t("root.searchDecks")}
+                className="h-7 min-w-0 flex-1 border-0 bg-transparent p-0 text-xs shadow-none focus-visible:ring-0 focus-visible:ring-offset-0"
+              />
+            </label>
           </div>
           <div className="deck-grid-container">
             <div className="deck-grid grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

package/corpus/templates/slides/changelog/2026-08-12-viewers-are-read-only-and-commenters-can-comment.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-12
+---
+
+Shared decks now distinguish read-only viewers from commenters who can add comments without editing slides.

package/corpus/templates/tasks/.agents/skills/adding-a-feature/SKILL.md

@@ -101,8 +101,9 @@ placeholders such as `${keys.SLACK_WEBHOOK}` or `<SLACK_WEBHOOK>`. Do not paste
 real keys, internal data, or customer data into instructions as examples.
 
 If the feature adds or changes visible UI copy, prompts, toasts, labels, empty
-states, or formatting, read `internationalization` and update the app's i18n
-catalogs in the same change.
+states, or formatting, update the English source copy. Read the optional
+`internationalization` skill and update additional catalogs only when
+`translations.locales` in `agent-native.config.ts` includes them.
 
 For app-backed skills, declare skill visibility in the app-skill manifest: