@agent-native/core 0.155.0 → 0.157.0

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

@@ -1,8 +1,14 @@
 import { appBasePath } from "@agent-native/core/client/api-path";
 import { PromptComposer } from "@agent-native/core/client/composer";
 import { useT } from "@agent-native/core/client/i18n";
-import { IconCopy, IconSquarePlus } from "@tabler/icons-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { IconCopy, IconSquarePlus, IconX } from "@tabler/icons-react";
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
@@ -66,6 +72,8 @@ export function AddSlidePopover({
   agentSubmit,
   onDuplicateCurrent,
   onAddEmpty,
+  placement = "below",
+  targetSlideId,
 }: {
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -78,11 +86,40 @@ export function AddSlidePopover({
   agentSubmit: (message: string, context: string) => void;
   onDuplicateCurrent?: () => void;
   onAddEmpty?: () => void;
+  /** "below" anchors under the trigger button; "right" sits beside a slide thumbnail. */
+  placement?: "below" | "right";
+  /** Id of a blank slide already inserted — the agent fills it in instead of
+   *  inserting another one. Used when this popover follows a "New slide"
+   *  click that already created the placeholder. */
+  targetSlideId?: string;
 }) {
   const t = useT();
   const panelRef = useRef<HTMLDivElement>(null);
   const [promptText, setPromptText] = useState("");
   const [googleDocContext, setGoogleDocContext] = useState("");
+  // Estimate before the panel has painted so the first frame doesn't hang
+  // off the bottom of the viewport; corrected once the real height is known.
+  const [panelHeight, setPanelHeight] = useState(320);
+
+  useLayoutEffect(() => {
+    if (!open || !panelRef.current) return;
+    setPanelHeight(panelRef.current.getBoundingClientRect().height);
+  });
+
+  // Content can grow after the first paint (Google Doc hint, file chips,
+  // an auto-growing textarea) without necessarily triggering a React
+  // re-render. Watch the panel directly so it keeps clamping to the
+  // viewport as it resizes, not just on the frame it first opens.
+  useEffect(() => {
+    if (!open || !panelRef.current) return;
+    const observer = new ResizeObserver(([entry]) => {
+      setPanelHeight(
+        entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height,
+      );
+    });
+    observer.observe(panelRef.current);
+    return () => observer.disconnect();
+  }, [open]);
 
   useEffect(() => {
     if (!open) return;
@@ -141,25 +178,39 @@ export function AddSlidePopover({
       const googleDocSourceForContext =
         truncateSourceForContext(googleDocContext);
       const fileContext = describeUploadedFilesForAgent(uploaded, deckId);
-      const context = [
-        `Add a new slide to deck "${deckTitle}" (id: ${deckId}).`,
-        `Insert after slide ${activeSlideIndex + 1} of ${slideCount} (active slide id: ${activeSlideId}).`,
-        "The visible user message above contains the user's request and/or pasted source material for the new slide(s). Treat pasted memo content as source material even if the user did not explicitly say they are pasting it.",
-        googleDocSourceForContext.text,
-        googleDocSourceForContext.truncated
-          ? `The pasted source was longer than ${MAX_SOURCE_CONTEXT_CHARS} characters, so only the first ${MAX_SOURCE_CONTEXT_CHARS} characters were included to keep the agent request reliable.`
-          : "",
-        fileContext,
-        "",
-        "Create the slide content and insert it at the correct position using `add-slide` with --deckId=" +
-          deckId +
-          ".",
-        "Every slide is rendered into a fixed native canvas (default 16:9 is 960x540 CSS pixels). Keep each slide within the density limits in AGENTS.md; split dense source material across more slides instead of packing it tightly.",
-        "If the user asked for multiple slides, call `add-slide` once per slide. Use positions starting at " +
-          (activeSlideIndex + 1) +
-          " so the new slides land after the active slide in order.",
-        "For larger requests, keep adding slides sequentially: wait for each add-slide result, then call add-slide for the next slide. Start slide 1 immediately; do not wait to design the entire sequence before adding it.",
-      ].join("\n");
+      const context = targetSlideId
+        ? [
+            `Fill in slide ${activeSlideIndex + 1} of ${slideCount} (id: ${targetSlideId}) in deck "${deckTitle}" (id: ${deckId}).`,
+            "This slide already exists as a blank placeholder that the user just inserted — update it with `update-slide`, do not call `add-slide` for it.",
+            "The visible user message above contains the user's request and/or pasted source material for this slide. Treat pasted memo content as source material even if the user did not explicitly say they are pasting it.",
+            googleDocSourceForContext.text,
+            googleDocSourceForContext.truncated
+              ? `The pasted source was longer than ${MAX_SOURCE_CONTEXT_CHARS} characters, so only the first ${MAX_SOURCE_CONTEXT_CHARS} characters were included to keep the agent request reliable.`
+              : "",
+            fileContext,
+            "",
+            "Every slide is rendered into a fixed native canvas (default 16:9 is 960x540 CSS pixels). Keep the slide within the density limits in AGENTS.md; split dense source material across more slides instead of packing it tightly.",
+            "If the user asked for more than one slide's worth of content, update this slide with the first one, then call `add-slide` for the rest, positioned starting right after this slide.",
+          ].join("\n")
+        : [
+            `Add a new slide to deck "${deckTitle}" (id: ${deckId}).`,
+            `Insert after slide ${activeSlideIndex + 1} of ${slideCount} (active slide id: ${activeSlideId}).`,
+            "The visible user message above contains the user's request and/or pasted source material for the new slide(s). Treat pasted memo content as source material even if the user did not explicitly say they are pasting it.",
+            googleDocSourceForContext.text,
+            googleDocSourceForContext.truncated
+              ? `The pasted source was longer than ${MAX_SOURCE_CONTEXT_CHARS} characters, so only the first ${MAX_SOURCE_CONTEXT_CHARS} characters were included to keep the agent request reliable.`
+              : "",
+            fileContext,
+            "",
+            "Create the slide content and insert it at the correct position using `add-slide` with --deckId=" +
+              deckId +
+              ".",
+            "Every slide is rendered into a fixed native canvas (default 16:9 is 960x540 CSS pixels). Keep each slide within the density limits in AGENTS.md; split dense source material across more slides instead of packing it tightly.",
+            "If the user asked for multiple slides, call `add-slide` once per slide. Use positions starting at " +
+              (activeSlideIndex + 1) +
+              " so the new slides land after the active slide in order.",
+            "For larger requests, keep adding slides sequentially: wait for each add-slide result, then call add-slide for the next slide. Start slide 1 immediately; do not wait to design the entire sequence before adding it.",
+          ].join("\n");
 
       agentSubmit(addSlideAgentMessage(trimmedText), context);
       onOpenChange(false);
@@ -173,6 +224,7 @@ export function AddSlidePopover({
       googleDocContext,
       onOpenChange,
       slideCount,
+      targetSlideId,
     ],
   );
 
@@ -187,23 +239,40 @@ export function AddSlidePopover({
 
   const rect = anchorRef.current.getBoundingClientRect();
   const panelWidth = Math.min(420, window.innerWidth - 24);
-  const left = Math.max(
-    12,
-    Math.min(rect.left, window.innerWidth - panelWidth - 12),
-  );
+  const left =
+    placement === "right"
+      ? Math.min(rect.right + 8, window.innerWidth - panelWidth - 12)
+      : Math.max(12, Math.min(rect.left, window.innerWidth - panelWidth - 12));
+  const top =
+    placement === "right"
+      ? Math.max(12, Math.min(rect.top, window.innerHeight - panelHeight - 12))
+      : rect.bottom + 8;
 
   return createPortal(
     <div
       ref={panelRef}
+      data-add-slide-popover
       className="fixed w-[min(420px,calc(100vw-24px))] rounded-xl border border-border bg-popover shadow-2xl shadow-black/60 z-[200] p-3"
       style={{
-        top: rect.bottom + 8,
+        top,
         left,
       }}
     >
-      <p className="px-1 pb-2 text-sm font-medium text-foreground/90">
-        {t("editorSidebar.addSlides")}
-      </p>
+      <div className="flex items-center justify-between px-1 pb-2">
+        <p className="text-sm font-medium text-foreground/90">
+          {targetSlideId
+            ? t("editorSidebar.describeThisSlide")
+            : t("editorSidebar.addSlides")}
+        </p>
+        <button
+          type="button"
+          onClick={() => onOpenChange(false)}
+          aria-label={t("editorSidebar.closeAddSlides")}
+          className="inline-flex size-5 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground/70"
+        >
+          <IconX className="size-3.5" />
+        </button>
+      </div>
       {(onAddEmpty || (onDuplicateCurrent && slideCount > 0)) && (
         <>
           {onAddEmpty && (

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

@@ -1,12 +1,11 @@
 import { useT } from "@agent-native/core/client/i18n";
 import {
-  IconLoader2,
   IconPlus,
   IconTextSize,
   IconTransitionRight,
 } from "@tabler/icons-react";
-import { useEffect, useRef, useState } from "react";
 
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -19,11 +18,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import type { Slide } from "@/context/DeckContext";
-import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import { cn } from "@/lib/utils";
 
-import { AddSlidePopover } from "./AddSlidePopover";
-
 const BUTTON_CLASS =
   "inline-flex size-7 flex-shrink-0 items-center justify-center rounded-md transition-colors";
 const IDLE_CLASS =
@@ -41,121 +37,79 @@ const TRANSITIONS: { value: SlideTransition; labelKey: string }[] = [
 ];
 
 /**
- * Add slide, undo, redo, and add-text-box — the actions that stay put
- * regardless of what is selected. Rendered at the head of the contextual
- * toolbar, and as a fallback in the deck toolbar where that row is hidden.
+ * Selection-independent actions pinned to the head of the contextual
+ * toolbar: add-slide, add-text-box, and the slide transition picker.
+ * Rendered both as the `leading` slot of the element-controls row and as a
+ * fallback directly in the deck toolbar for when that row is hidden (narrow
+ * viewports) or never mounts (no current slide, e.g. an empty deck).
  */
 export function EditorActionCluster({
-  deckId,
-  deckTitle,
-  currentSlideId,
-  slideCount,
-  currentSlideIndex,
-  addSlideGenerating = false,
-  onAddSlideGeneratingChange,
-  onAddEmptySlide,
-  onDuplicateCurrentSlide,
   textBoxMode,
   onToggleTextBoxMode,
+  onAddEmptySlide,
+  addSlideGenerating,
+  currentSlideId,
   slideTransition,
   onChangeSlideTransition,
   className,
 }: {
-  deckId: string;
-  deckTitle: string;
-  currentSlideId?: string;
-  slideCount: number;
-  currentSlideIndex: number;
-  addSlideGenerating?: boolean;
-  onAddSlideGeneratingChange?: (generating: boolean) => void;
-  onAddEmptySlide?: () => void;
-  onDuplicateCurrentSlide?: () => void;
   textBoxMode?: boolean;
   onToggleTextBoxMode?: () => void;
+  onAddEmptySlide?: () => void;
+  addSlideGenerating?: boolean;
+  currentSlideId?: string;
   slideTransition?: Slide["transition"];
   onChangeSlideTransition?: (transition: SlideTransition) => void;
   className?: string;
 }) {
   const t = useT();
-  const { generating, submit: agentSubmit } = useAgentGenerating();
-  const [addSlideOpen, setAddSlideOpen] = useState(false);
-  const addSlideRef = useRef<HTMLButtonElement>(null);
   // "none" is a legacy alias the presentation view already treats as instant.
   const activeTransition: SlideTransition =
     !slideTransition || slideTransition === "none"
       ? "instant"
       : slideTransition;
 
-  useEffect(() => {
-    if (!generating) onAddSlideGeneratingChange?.(false);
-  }, [generating, onAddSlideGeneratingChange]);
+  if (!onToggleTextBoxMode && !onAddEmptySlide) return null;
 
   return (
     <div className={cn("flex items-center gap-1", className)}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <button
-            ref={addSlideRef}
+      {onAddEmptySlide && (
+        <>
+          <Button
             type="button"
-            onClick={() => setAddSlideOpen((open) => !open)}
+            variant="ghost"
+            size="sm"
+            className="h-7 shrink-0 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
+            onClick={onAddEmptySlide}
             disabled={addSlideGenerating}
-            className={cn(
-              BUTTON_CLASS,
-              addSlideOpen ? ACTIVE_CLASS : IDLE_CLASS,
-            )}
-            aria-label={t("editorSidebar.addSlides")}
           >
-            {addSlideGenerating ? (
-              <IconLoader2 className="size-4 animate-spin" />
-            ) : (
-              <IconPlus className="size-4" />
-            )}
-          </button>
-        </TooltipTrigger>
-        <TooltipContent>{t("editorSidebar.addSlides")}</TooltipContent>
-      </Tooltip>
-      <AddSlidePopover
-        open={addSlideOpen}
-        onOpenChange={setAddSlideOpen}
-        anchorRef={addSlideRef}
-        deckId={deckId}
-        deckTitle={deckTitle}
-        activeSlideId={currentSlideId ?? ""}
-        slideCount={slideCount}
-        activeSlideIndex={currentSlideIndex}
-        agentSubmit={(message, context) => {
-          onAddSlideGeneratingChange?.(true);
-          agentSubmit(message, context);
-        }}
-        onDuplicateCurrent={onDuplicateCurrentSlide}
-        onAddEmpty={onAddEmptySlide}
-      />
-
-      {onToggleTextBoxMode && (
-        <>
-          <div className={DIVIDER_CLASS} />
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                type="button"
-                onClick={onToggleTextBoxMode}
-                data-toolbar-textbox-button
-                aria-label={t("editorToolbar.addTextBox")}
-                aria-pressed={textBoxMode}
-                aria-keyshortcuts="T"
-                className={cn(
-                  BUTTON_CLASS,
-                  textBoxMode ? ACTIVE_CLASS : IDLE_CLASS,
-                )}
-              >
-                <IconTextSize className="size-4" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>{t("editorToolbar.addTextBox")} (T)</TooltipContent>
-          </Tooltip>
+            <IconPlus className="size-3.5" />
+            {t("editorSidebar.newSlide")}
+          </Button>
+          {onToggleTextBoxMode && <div className={DIVIDER_CLASS} />}
         </>
       )}
-
+      {onToggleTextBoxMode && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              onClick={onToggleTextBoxMode}
+              data-toolbar-textbox-button
+              aria-label={t("editorToolbar.addTextBox")}
+              aria-pressed={textBoxMode}
+              aria-keyshortcuts="T"
+              className={cn(
+                BUTTON_CLASS,
+                textBoxMode ? ACTIVE_CLASS : IDLE_CLASS,
+              )}
+            >
+              <IconTextSize className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>{t("editorToolbar.addTextBox")} (T)</TooltipContent>
+        </Tooltip>
+      )}
       {onChangeSlideTransition && currentSlideId && (
         <>
           <div className={DIVIDER_CLASS} />

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

@@ -18,9 +18,11 @@ import { CSS } from "@dnd-kit/utilities";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
 import { hashSlideContent, type DeckFitState } from "@shared/slide-fit";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
 
 import SlideRenderer from "@/components/deck/SlideRenderer";
 import type { SlideOverflowInfo } from "@/components/deck/SlideRenderer";
+import { AddSlidePopover } from "@/components/editor/AddSlidePopover";
 import { AiEditingMarker } from "@/components/editor/AiEditingMarker";
 import GeneratingSlidePreview from "@/components/editor/GeneratingSlidePreview";
 import {
@@ -28,7 +30,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
-import type { Slide } from "@/context/DeckContext";
+import { defaultSlideContent, type Slide } from "@/context/DeckContext";
 import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
 import { TAB_ID } from "@/lib/tab-id";
 
@@ -39,6 +41,7 @@ interface EditorSidebarProps {
   slides: Slide[];
   activeSlideId: string;
   deckId: string;
+  deckTitle: string;
   onSelectSlide: (id: string) => void;
   /** Viewer-role decks get thumbnails only: no add, duplicate, or delete. */
   readOnly?: boolean;
@@ -54,6 +57,27 @@ interface EditorSidebarProps {
   generatingSlide?: { index: number };
   generatingSlideSelected?: boolean;
   onSelectGeneratingSlide?: () => void;
+  /** The slide just inserted via the toolbar's New Slide button — the rail
+   *  anchors the "describe this slide" popover to that slide's thumbnail
+   *  once it mounts. Owned by the parent since the button that sets it now
+   *  lives in the toolbar, outside this component. */
+  describeSlideId: string | null;
+  /** Clears `describeSlideId` in the parent when the popover closes. */
+  onCloseDescribe: () => void;
+  /** Reports add-slide generation state up so the toolbar's New Slide button
+   *  can disable itself while a request is in flight. */
+  onAddSlideGeneratingChange?: (generating: boolean) => void;
+  /** Resolves once a just-inserted blank slide has actually reached the
+   *  server, so the agent's update-slide request can't race the add-slide
+   *  persistence. */
+  onAwaitAddSlidePersisted?: () => Promise<void>;
+  /** Removes a blank placeholder slide whose persistence ultimately failed,
+   *  so a flaky save doesn't leave a stray empty slide in the deck. */
+  onRemoveFailedSlide?: (slideId: string) => void;
+  /** Submits the add-slide agent request. Owned by the parent (rather than
+   *  this component's own useAgentGenerating() call) so the run stays
+   *  correctly scoped and trackable across a sidebar remount. */
+  addSlideAgentSubmit: (message: string, context: string) => void;
 }
 
 const DECK_FIT_STATE_KEYS = [
@@ -312,6 +336,7 @@ export default function EditorSidebar({
   slides,
   activeSlideId,
   deckId,
+  deckTitle,
   onSelectSlide,
   readOnly = false,
   slidePresence,
@@ -321,7 +346,16 @@ export default function EditorSidebar({
   generatingSlide,
   generatingSlideSelected = false,
   onSelectGeneratingSlide,
+  describeSlideId,
+  onCloseDescribe,
+  onAddSlideGeneratingChange,
+  onAwaitAddSlidePersisted,
+  onRemoveFailedSlide,
+  addSlideAgentSubmit,
 }: EditorSidebarProps) {
+  const t = useT();
+  const [describeAnchorEl, setDescribeAnchorEl] =
+    useState<HTMLButtonElement | null>(null);
   const [thumbnailListScrolled, setThumbnailListScrolled] = useState(false);
   const slideButtonRefs = useRef(new Map<string, HTMLButtonElement>());
   const measurementsRef = useRef(
@@ -331,6 +365,7 @@ export default function EditorSidebar({
     >(),
   );
   const writeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
   const aiEditedSlideIds = new Set(
     (recentEdits ?? [])
       .filter((edit) => edit.isAgent)
@@ -398,6 +433,7 @@ export default function EditorSidebar({
   }, [deckId, aspectRatio]);
 
   useEffect(() => {
+    setDescribeAnchorEl(null);
     setThumbnailListScrolled(false);
   }, [deckId]);
 
@@ -421,10 +457,22 @@ export default function EditorSidebar({
       } else {
         slideButtonRefs.current.delete(slideId);
       }
+      // The new-slide prompt anchors to the just-created slide's thumbnail,
+      // which doesn't exist yet at click time — pick it up as soon as it mounts.
+      // Center it in the scroll area first so the prompt has room on-screen
+      // instead of opening off the bottom edge when the new slide lands there.
+      if (node && slideId === describeSlideId) {
+        node.scrollIntoView({ block: "center" });
+        setDescribeAnchorEl(node);
+      }
     },
-    [],
+    [describeSlideId],
   );
 
+  const describeSlideIndex = describeSlideId
+    ? slides.findIndex((s) => s.id === describeSlideId)
+    : -1;
+
   // Arrow key navigation for slides
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -518,6 +566,50 @@ export default function EditorSidebar({
           )}
         </div>
       </div>
+      {describeSlideId && describeSlideIndex !== -1 && describeAnchorEl && (
+        <AddSlidePopover
+          open
+          onOpenChange={(open) => {
+            if (!open) {
+              onCloseDescribe();
+              setDescribeAnchorEl(null);
+            }
+          }}
+          anchorRef={{ current: describeAnchorEl }}
+          placement="right"
+          deckId={deckId}
+          deckTitle={deckTitle}
+          activeSlideId={describeSlideId}
+          activeSlideIndex={describeSlideIndex}
+          slideCount={slides.length}
+          targetSlideId={describeSlideId}
+          agentSubmit={async (message, context) => {
+            onAddSlideGeneratingChange?.(true);
+            try {
+              await onAwaitAddSlidePersisted?.();
+            } catch (error) {
+              console.error("Failed to persist new slide:", error);
+              onAddSlideGeneratingChange?.(false);
+              // The popover already closed (AddSlidePopover doesn't wait on
+              // this async callback), so the typed prompt is gone either
+              // way. Only remove the placeholder if it's still untouched —
+              // the save retries take long enough that the user could have
+              // started editing it directly on the canvas in the meantime,
+              // and deleting it would destroy that work.
+              const current = slides.find((s) => s.id === describeSlideId);
+              if (
+                current?.content === defaultSlideContent.blank &&
+                !current.notes
+              ) {
+                onRemoveFailedSlide?.(describeSlideId);
+              }
+              toast.error(t("editorSidebar.newSlideSaveFailed"));
+              return;
+            }
+            addSlideAgentSubmit(message, context);
+          }}
+        />
+      )}
     </div>
   );
 }

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

@@ -76,7 +76,6 @@ interface EditorToolbarProps {
   /** Whether the user may create and manage comments without editing slides. */
   canComment?: boolean;
   onTitleChange: (title: string) => void;
-  slideCount: number;
   currentSlideIndex: number;
   sidebarOpen: boolean;
   onToggleSidebar: () => void;
@@ -132,16 +131,13 @@ interface EditorToolbarProps {
   onExportPptx?: () => Promise<void> | void;
   /** Create the deck in the user's Google Drive as native Google Slides */
   onExportGoogleSlides?: () => Promise<GoogleSlidesExportResult>;
-  /** Insert a blank slide after the current one */
+  /** Inserts a blank slide directly below the active slide. Threaded through
+   *  to the fallback action cluster below so an empty deck (no current
+   *  slide, so the primary element-controls toolbar never mounts) still has
+   *  a way to add its first slide. */
   onAddEmptySlide?: () => void;
-  /** Duplicate the current slide */
-  onDuplicateCurrentSlide?: () => void;
-  /** Id of the current slide, so an agent add-slide lands in the right place */
-  currentSlideId?: string;
-  /** True while an agent add-slide request is in flight */
+  /** True while an agent add-slide request is in flight. */
   addSlideGenerating?: boolean;
-  /** Called when an agent add-slide request is submitted */
-  onAddSlideGeneratingChange?: (generating: boolean) => void;
 }
 
 const TOOLBAR_ICON_BUTTON_CLASS =
@@ -152,7 +148,6 @@ export default function EditorToolbar({
   deckId,
   deckTitle,
   onTitleChange,
-  slideCount,
   currentSlideIndex,
   sidebarOpen,
   onToggleSidebar,
@@ -185,10 +180,7 @@ export default function EditorToolbar({
   onExportPptx,
   onExportGoogleSlides,
   onAddEmptySlide,
-  onDuplicateCurrentSlide,
-  currentSlideId,
-  addSlideGenerating = false,
-  onAddSlideGeneratingChange,
+  addSlideGenerating,
   canEdit = true,
   canComment = canEdit,
 }: EditorToolbarProps) {
@@ -523,7 +515,7 @@ export default function EditorToolbar({
   useEffect(() => registerEditorCommands(() => editorCommandsRef.current), []);
 
   return (
-    <div className="deck-editor-toolbar flex h-11 shrink-0 items-center gap-1 overflow-x-auto whitespace-nowrap bg-background px-2 sm:px-3">
+    <div className="deck-editor-toolbar flex h-14 shrink-0 items-center gap-1 overflow-x-auto whitespace-nowrap bg-background px-2 sm:px-3">
       {/* Back button */}
       <Tooltip>
         <TooltipTrigger asChild>
@@ -554,23 +546,19 @@ export default function EditorToolbar({
         <TooltipContent>{t("editorToolbar.toggleSlideList")}</TooltipContent>
       </Tooltip>
 
-      {/* Add slide and the text-box tool live at the head of the contextual
-       * toolbar below. That row is desktop-only and needs a slide to mount on,
-       * so keep a fallback here for narrow screens and empty decks. */}
-      {canEdit && (
+      {/* New Slide and the text-box tool live at the head of the contextual
+       * toolbar below, which SlideEditor portals in at every viewport size
+       * (a wide inline row or a narrow standalone row) whenever there's a
+       * current slide. Render this fallback only when there isn't one — an
+       * empty deck — so those two rows never end up showing the same
+       * buttons twice. */}
+      {canEdit && !contextToolbarVisible && (
         <EditorActionCluster
-          className={contextToolbarVisible ? "lg:hidden" : undefined}
-          deckId={deckId}
-          deckTitle={deckTitle}
-          currentSlideId={currentSlideId}
-          slideCount={slideCount}
-          currentSlideIndex={currentSlideIndex}
-          addSlideGenerating={addSlideGenerating}
-          onAddSlideGeneratingChange={onAddSlideGeneratingChange}
-          onAddEmptySlide={onAddEmptySlide}
-          onDuplicateCurrentSlide={onDuplicateCurrentSlide}
           textBoxMode={textBoxMode}
           onToggleTextBoxMode={onToggleTextBoxMode}
+          onAddEmptySlide={onAddEmptySlide}
+          addSlideGenerating={addSlideGenerating}
+          currentSlideId={currentSlide?.id}
           slideTransition={currentSlide?.transition}
           onChangeSlideTransition={onChangeSlideTransition}
         />

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

@@ -926,7 +926,7 @@ export function SlideContextToolbar({
       )}
       {zoomControls && (
         <>
-          <div className={TOOLBAR_DIVIDER} />
+          <div className={cn(TOOLBAR_DIVIDER, "ml-auto")} />
           <Tooltip>
             <TooltipTrigger asChild>
               <Button