@agent-native/core 0.149.0 → 0.149.1

package/corpus/README.md

@@ -31,4 +31,4 @@ rg -n "defineAction|useActionQuery" node_modules/@agent-native/core/corpus
 
 ## Generated Counts
 
-- template files: 7946
+- template files: 7959

package/corpus/templates/slides/actions/patch-deck.ts

@@ -370,6 +370,18 @@ export function resolveDeckColumnUpdates(
   };
 }
 
+/**
+ * The source-preservation guards (`assertSourceImportOperationsPreserved`,
+ * `assertSourceSlidePreserved`) exist for one failure mode: an agent asked to
+ * "make it prettier" silently dropping the original PDF/PPTX artwork or
+ * factual copy. A human editing their own imported deck in the browser isn't
+ * that failure mode, and the browser editor has no way to pass
+ * `preserveSource` — so these guards must only run for agent callers.
+ */
+export function isAgentPatchCaller(caller: string | undefined): boolean {
+  return caller === "tool" || caller === "mcp" || caller === "a2a";
+}
+
 // ---------------------------------------------------------------------------
 // Action definition
 // ---------------------------------------------------------------------------
@@ -402,8 +414,9 @@ export default defineAction({
       ),
   }),
   agentInputSchema: AgentPatchDeckInputSchema,
-  run: async ({ deckId, operations, creativeContext }) => {
+  run: async ({ deckId, operations, creativeContext }, ctx) => {
     await assertAccess("deck", deckId, "editor");
+    const isAgentCaller = isAgentPatchCaller(ctx?.caller);
 
     return withDeckLock(deckId, async () => {
       const db = getDb();
@@ -435,9 +448,12 @@ export default defineAction({
       }
 
       const sourceImport = sourceImportForDeck(deck.sourceImport);
-      assertSourceImportOperationsPreserved(sourceImport, operations);
+      if (isAgentCaller) {
+        assertSourceImportOperationsPreserved(sourceImport, operations);
+      }
       for (const op of operations) {
         if (
+          !isAgentCaller ||
           op.op !== "patch-slide" ||
           (op.fields.content === undefined && op.fields.notes === undefined)
         ) {

package/corpus/templates/slides/app/components/deck/SlideRenderer.tsx

@@ -385,6 +385,29 @@ function useSlideAutofit(
 
     let raf = 0;
     let disposed = false;
+    // Measuring costs a full-document reflow per slide (every descendant is
+    // read with getBoundingClientRect, interleaved with style writes). A deck
+    // with dozens of slides mounts that many renderers at once, so off-screen
+    // thumbnails are left unmeasured until they scroll into view. Without an
+    // IntersectionObserver there is nothing to defer against, so measure
+    // eagerly as before.
+    const canDefer = typeof IntersectionObserver !== "undefined";
+    // Resolved synchronously rather than waiting for the observer's first
+    // callback: a slide that is already on screen must be measured on this
+    // pass, and nothing may depend on a callback that a given environment
+    // might never deliver. This reads one rect, not one per descendant.
+    const isNearViewport = () => {
+      const rect = root.getBoundingClientRect();
+      const margin = 200;
+      return (
+        rect.bottom >= -margin &&
+        rect.right >= -margin &&
+        rect.top <= (window.innerHeight || 0) + margin &&
+        rect.left <= (window.innerWidth || 0) + margin
+      );
+    };
+    let visible = !canDefer || isNearViewport();
+    let measurePending = false;
 
     const resetTarget = (target: HTMLElement) => {
       target.style.setProperty("--fmd-fit-scale", "1");
@@ -482,6 +505,10 @@ function useSlideAutofit(
 
     const scheduleMeasure = () => {
       if (disposed) return;
+      if (!visible) {
+        measurePending = true;
+        return;
+      }
       cancelAnimationFrame(raf);
       raf = requestAnimationFrame(measureNow);
     };
@@ -502,11 +529,30 @@ function useSlideAutofit(
     root.addEventListener("load", scheduleMeasure, true);
     document.fonts?.ready.then(scheduleMeasure).catch(() => {});
 
+    // `rootMargin` measures a thumbnail just before it scrolls in, so the fit
+    // transform is already applied by the time it is on screen.
+    const visibilityObserver = canDefer
+      ? new IntersectionObserver(
+          (entries) => {
+            const isVisible = entries.some((entry) => entry.isIntersecting);
+            if (isVisible === visible) return;
+            visible = isVisible;
+            if (visible && measurePending) {
+              measurePending = false;
+              scheduleMeasure();
+            }
+          },
+          { rootMargin: "200px" },
+        )
+      : null;
+    visibilityObserver?.observe(root);
+
     return () => {
       disposed = true;
       cancelAnimationFrame(raf);
       resizeObserver.disconnect();
       mutationObserver.disconnect();
+      visibilityObserver?.disconnect();
       root.removeEventListener("load", scheduleMeasure, true);
     };
   }, [canvasWidth, canvasHeight, fitKey, ref]);

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

@@ -1,3 +1,4 @@
+import { sendToAgentChatAndConfirm } from "@agent-native/core/client/agent-chat";
 import { useT } from "@agent-native/core/client/i18n";
 import {
   IconBold,
@@ -6,11 +7,15 @@ import {
   IconStrikethrough,
   IconLink,
   IconPalette,
+  IconPencilStar,
   IconCheck,
   IconX,
+  IconArrowUp,
+  IconLoader2,
 } from "@tabler/icons-react";
 import { useEffect, useState, useRef } from "react";
 import { createPortal } from "react-dom";
+import { toast } from "sonner";
 
 import {
   Tooltip,
@@ -22,6 +27,17 @@ import { shortcutLabel } from "@/lib/utils";
 interface BlockBubbleMenuProps {
   /** The element currently in contentEditable mode. Menu only shows while selection is inside it. */
   editingEl: HTMLElement | null;
+  /** Slide the edited block belongs to, so an AI revision can target it. */
+  slideId?: string;
+  /** Deck that owns the slide — pins the revision to the right deck. */
+  deckId?: string;
+  /**
+   * Ends the inline edit session and persists whatever is in the DOM now.
+   * Required before handing work to the agent: otherwise the still-open
+   * contentEditable serializes its stale text on the user's next click and
+   * overwrites the revision the agent just wrote.
+   */
+  onCommitInlineEdit?: () => void;
 }
 
 interface Position {
@@ -44,32 +60,89 @@ const COLORS = [
   "#EF4444",
 ];
 
+/** Shown above the input so the user can confirm what the agent will rewrite. */
+const AI_TARGET_PREVIEW_LIMIT = 160;
+
+const AI_SEND_BUTTON_CLASS =
+  // guard:allow-raw-color — same accent as the link Apply button below.
+  "rounded p-1.5 text-[#609FF8] hover:bg-accent disabled:pointer-events-none disabled:opacity-40";
+
+export function buildReviseSelectionPrompt({
+  selectedText,
+  instruction,
+  slideId,
+  deckId,
+}: {
+  selectedText: string;
+  instruction: string;
+  slideId?: string;
+  deckId?: string;
+}): string {
+  // The deck is named explicitly rather than left to "the current slide": the
+  // request is queued, and if the user opens another deck before the agent
+  // runs, an implicit target would pair this slide id with the wrong deck.
+  const target = [
+    deckId ? `Deck id: \`${deckId}\`` : null,
+    slideId ? `Slide id: \`${slideId}\`` : null,
+  ].filter((line) => line !== null);
+
+  return [
+    `Revise this exact text:`,
+    ``,
+    `"""`,
+    selectedText,
+    `"""`,
+    ``,
+    `How to revise it: ${instruction}`,
+    ...(target.length > 0 ? [``, ...target] : []),
+    ``,
+    `Read that slide first with \`view-screen\`, then make one bounded \`update-slide --fullContent\` edit that replaces only the quoted text. Leave the surrounding HTML, inline styles, and layout untouched, and keep the replacement close to the original length so the slide still fits its canvas.`,
+  ]
+    .filter((line) => line !== null)
+    .join("\n");
+}
+
 /**
  * Floating formatting toolbar for contentEditable text blocks. Shows on
  * non-empty selection inside the editing element and applies inline
  * formatting (bold, italic, underline, strike, link, color) directly to
  * the DOM. Designed to work with the in-place per-block editing in
  * SlideEditor — it never mutates anything outside the editing element.
+ *
+ * The "Revise with AI" action is the exception: it does not touch the DOM.
+ * It hands the selected text plus the user's instruction to the agent, which
+ * rewrites the slide through `update-slide`.
  */
-export function BlockBubbleMenu({ editingEl }: BlockBubbleMenuProps) {
+export function BlockBubbleMenu({
+  editingEl,
+  slideId,
+  deckId,
+  onCommitInlineEdit,
+}: BlockBubbleMenuProps) {
   const t = useT();
   const [pos, setPos] = useState<Position | null>(null);
   const [showColors, setShowColors] = useState(false);
   const [showLinkInput, setShowLinkInput] = useState(false);
   const [linkValue, setLinkValue] = useState("");
+  const [showAiInput, setShowAiInput] = useState(false);
+  const [aiInstruction, setAiInstruction] = useState("");
+  const [aiTargetText, setAiTargetText] = useState("");
+  const [aiSending, setAiSending] = useState(false);
   const savedRangeRef = useRef<Range | null>(null);
   // True while a popup/input has the user's focus — keeps the menu pinned
   // even when the contentEditable selection collapses behind the scenes.
   const interactingRef = useRef(false);
   useEffect(() => {
-    interactingRef.current = showColors || showLinkInput;
-  }, [showColors, showLinkInput]);
+    interactingRef.current = showColors || showLinkInput || showAiInput;
+  }, [showColors, showLinkInput, showAiInput]);
 
   // Hide menu when the editing element changes
   useEffect(() => {
     setPos(null);
     setShowColors(false);
     setShowLinkInput(false);
+    setShowAiInput(false);
+    setAiInstruction("");
   }, [editingEl]);
 
   // Track selection and position the menu
@@ -158,6 +231,61 @@ export function BlockBubbleMenu({ editingEl }: BlockBubbleMenuProps) {
     setLinkValue("");
   };
 
+  const openAiInput = () => {
+    if (showAiInput) {
+      setShowAiInput(false);
+      return;
+    }
+    // Snapshot the text now: opening the input moves focus out of the
+    // contentEditable and the live selection collapses.
+    const selected = savedRangeRef.current?.toString().trim() ?? "";
+    if (!selected) return;
+    setAiTargetText(selected);
+    setAiInstruction("");
+    interactingRef.current = true;
+    setShowAiInput(true);
+    setShowColors(false);
+    setShowLinkInput(false);
+  };
+
+  const submitAiRevision = async () => {
+    const instruction = aiInstruction.trim();
+    if (!instruction || !aiTargetText || aiSending) return;
+
+    // Close the inline edit first. The block is still a live contentEditable
+    // session; leaving it open means the next click away serializes the old
+    // text over whatever the agent writes.
+    onCommitInlineEdit?.();
+
+    setAiSending(true);
+    try {
+      const delivery = await sendToAgentChatAndConfirm({
+        message: buildReviseSelectionPrompt({
+          selectedText: aiTargetText,
+          instruction,
+          slideId,
+          deckId,
+        }),
+        submit: true,
+        chatTarget: "local",
+      });
+
+      if (!delivery.delivered) {
+        // Keep the typed instruction so the user can retry without retyping.
+        toast.error(t("raw.sendToAgent"), {
+          description: delivery.reason ?? "The agent did not receive this.",
+        });
+        return;
+      }
+
+      toast.success(t("raw.sentToAgent"), { description: instruction });
+      setShowAiInput(false);
+      setAiInstruction("");
+    } finally {
+      setAiSending(false);
+    }
+  };
+
   return createPortal(
     <div
       data-block-bubble-menu="true"
@@ -168,6 +296,13 @@ export function BlockBubbleMenu({ editingEl }: BlockBubbleMenuProps) {
         e.preventDefault();
       }}
     >
+      <ToolbarButton
+        icon={IconPencilStar}
+        tooltip="Revise with AI"
+        onClick={openAiInput}
+        active={showAiInput}
+      />
+      <div className="w-px h-4 bg-border mx-0.5" />
       <ToolbarButton
         icon={IconBold}
         tooltip={`Bold (${shortcutLabel("cmd+b")})`}
@@ -199,6 +334,7 @@ export function BlockBubbleMenu({ editingEl }: BlockBubbleMenuProps) {
             if (!showColors) interactingRef.current = true;
             setShowColors((v) => !v);
             setShowLinkInput(false);
+            setShowAiInput(false);
           }}
           active={showColors}
         />
@@ -229,9 +365,64 @@ export function BlockBubbleMenu({ editingEl }: BlockBubbleMenuProps) {
           if (!showLinkInput) interactingRef.current = true;
           setShowLinkInput((v) => !v);
           setShowColors(false);
+          setShowAiInput(false);
         }}
         active={showLinkInput}
       />
+      {showAiInput && (
+        <div
+          data-ai-revise-input="true"
+          // Own mousedown handler: the toolbar above blocks the default to keep
+          // the contentEditable focused, which would also stop this input from
+          // ever receiving a caret.
+          onMouseDown={(e) => e.stopPropagation()}
+          className="absolute top-full left-1/2 -translate-x-1/2 mt-1 w-80 p-2 rounded-lg bg-popover border border-border shadow-2xl shadow-black/60"
+        >
+          <p className="mb-1.5 line-clamp-2 text-[11px] leading-snug text-muted-foreground">
+            {aiTargetText.length > AI_TARGET_PREVIEW_LIMIT
+              ? `${aiTargetText.slice(0, AI_TARGET_PREVIEW_LIMIT)}…`
+              : aiTargetText}
+          </p>
+          <div className="flex items-end gap-1">
+            <textarea
+              value={aiInstruction}
+              onChange={(e) => setAiInstruction(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  void submitAiRevision();
+                } else if (e.key === "Escape") {
+                  e.preventDefault();
+                  setShowAiInput(false);
+                }
+              }}
+              placeholder={t("raw.tellAgentDo")}
+              rows={2}
+              disabled={aiSending}
+              className="flex-1 resize-none rounded border border-border bg-muted px-2 py-1.5 text-xs text-foreground outline-none focus:border-ring disabled:opacity-60"
+              autoFocus
+            />
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  onClick={() => void submitAiRevision()}
+                  disabled={!aiInstruction.trim() || aiSending}
+                  aria-label={t("raw.sendToAgent")}
+                  className={AI_SEND_BUTTON_CLASS}
+                >
+                  {aiSending ? (
+                    <IconLoader2 className="w-3.5 h-3.5 animate-spin" />
+                  ) : (
+                    <IconArrowUp className="w-3.5 h-3.5" />
+                  )}
+                </button>
+              </TooltipTrigger>
+              <TooltipContent>{t("raw.sendToAgent")}</TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      )}
       {showLinkInput && (
         <div className="absolute top-full left-1/2 -translate-x-1/2 mt-1 flex items-center gap-1 p-1 rounded-lg bg-popover border border-border shadow-2xl shadow-black/60">
           <input

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

@@ -29,7 +29,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import type { Slide } from "@/context/DeckContext";
-import type { AspectRatio } from "@/lib/aspect-ratios";
+import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
 import { TAB_ID } from "@/lib/tab-id";
 
 import type { DesignSystemData } from "../../../shared/api";
@@ -174,6 +174,8 @@ function SortableSlideThumb({
     opacity: isDragging ? 0.5 : 1,
   };
 
+  const thumbDims = getAspectRatioDims(aspectRatio);
+
   return (
     <div ref={setNodeRef} style={style}>
       <button
@@ -213,6 +215,11 @@ function SortableSlideThumb({
 
         {/* Thumbnail */}
         <div className="flex-1 min-w-0">
+          {/* Each thumbnail paints a full-resolution slide canvas scaled down by
+           * transform, so a long rail keeps dozens of large layers live and the
+           * browser drops frames or paints stale tiles. `content-visibility`
+           * lets it skip everything below the fold; `aspect-ratio` keeps the row
+           * the right height while its contents are skipped. */}
           <div
             className="w-full overflow-hidden rounded border"
             style={{
@@ -220,6 +227,8 @@ function SortableSlideThumb({
                 presenceUsers.length > 0
                   ? presenceUsers[0].color + "66"
                   : "rgba(255,255,255,0.06)",
+              aspectRatio: `${thumbDims.width} / ${thumbDims.height}`,
+              contentVisibility: "auto",
             }}
           >
             <SlideRenderer

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

@@ -123,11 +123,13 @@ export function ExportMenu({
         });
         return;
       }
-      console.warn("Google Slides upload unavailable:", result.reason);
       if (target) target.location.href = GOOGLE_SLIDES_IMPORT_URL;
       setGoogleSlidesImportOpen(true);
-      toast.success(t("editorExport.googleSlidesDownloaded"), {
-        description: t("editorExport.googleSlidesImportHint"),
+      // The deck did not reach Drive. Saying "success" here is why users read
+      // the .pptx download as the intended result and never learn that their
+      // Google account is unconnected or that Drive rejected the upload.
+      toast.warning(t("editorExport.googleSlidesDownloaded"), {
+        description: `${result.reason} ${t("editorExport.googleSlidesImportHint")}`,
       });
     } catch (err) {
       googleSlidesImportTarget.current = null;

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

@@ -119,6 +119,8 @@ import {
   getSlideTextBoxDefaultColor,
   getSlideSelectionIdentity,
   getSlideSelectionMode,
+  findPersistedImageObject,
+  isDeletableFlowImage,
   removeSlideObjectAndLayoutSpacer,
   resolveSlideObjectContainingBlock,
   type CopiedSlideObjects,
@@ -2404,9 +2406,24 @@ export default function SlideEditor({
         clearMultiSelection();
       } else {
         const element = resolveSelectedElement();
-        if (!element || !isPersistedFreeformObject(element)) return;
-        e.preventDefault();
-        removeSlideObjectAndLayoutSpacer(element);
+        if (!element) return;
+        if (isPersistedFreeformObject(element)) {
+          e.preventDefault();
+          removeSlideObjectAndLayoutSpacer(element);
+        } else if (isDeletableFlowImage(element)) {
+          e.preventDefault();
+          // An imported PPTX/PDF image is an <img> (or placeholder) nested in
+          // an absolutely positioned wrapper that carries the persisted object
+          // id. Removing only the inner node would leave that wrapper and its
+          // durable metadata behind as an invisible ghost object.
+          const owner = findPersistedImageObject(element, slideContent);
+          if (owner) removeSlideObjectAndLayoutSpacer(owner);
+          else element.remove();
+          setSelectedImg(null);
+          setImageOverlay(null);
+        } else {
+          return;
+        }
         clearSelectedElement();
       }
 
@@ -4413,7 +4430,12 @@ export default function SlideEditor({
         onSendToAgent={sendSelectionToAgent}
       />
 
-      <BlockBubbleMenu editingEl={editingEl} />
+      <BlockBubbleMenu
+        editingEl={editingEl}
+        slideId={slide.id}
+        deckId={deckId}
+        onCommitInlineEdit={exitInlineEdit}
+      />
 
       {pendingUpdateCount > 0 && (
         <div className="absolute top-4 right-4 z-50">

package/corpus/templates/slides/app/components/editor/slide-object-interactions.ts

@@ -521,6 +521,51 @@ export function removeSlideObjectAndLayoutSpacer(element: HTMLElement): void {
   element.remove();
 }
 
+/**
+ * Whether Delete should remove `element` even though it is not a freeform
+ * canvas object.
+ *
+ * Flow-layout nodes are deliberately excluded from object operations, because
+ * deleting an arbitrary one collapses the layout around it. An image is the
+ * exception: it is a leaf, users select it directly, and removing it leaves
+ * the surrounding grid or card intact. Without this, selecting a picture in a
+ * card grid and pressing Delete silently did nothing.
+ */
+export function isDeletableFlowImage(element: HTMLElement): boolean {
+  return (
+    element.tagName === "IMG" ||
+    element.classList.contains("fmd-img-placeholder")
+  );
+}
+
+/**
+ * The persisted image object that owns `element`, if any.
+ *
+ * PPTX/PDF import wraps each picture in an absolutely positioned
+ * `.fmd-pptx-image` div carrying the durable `data-slide-object-id`, with the
+ * `<img>` (or an empty placeholder) inside it. Deleting the inner node alone
+ * leaves that wrapper behind as an invisible object that still occupies its
+ * slot and still round-trips through save. Matching on the image wrapper
+ * specifically — rather than any positioned ancestor — keeps this from
+ * swallowing a whole card or column that merely contains a picture.
+ */
+export function findPersistedImageObject(
+  element: HTMLElement,
+  root: HTMLElement,
+): HTMLElement | null {
+  let current: HTMLElement | null = element;
+  while (current && current !== root && root.contains(current)) {
+    const isImageWrapper =
+      current.classList.contains("fmd-pptx-image") ||
+      current.getAttribute("data-pptx-element-kind") === "image";
+    if (isImageWrapper && current.getAttribute("data-slide-object-id")) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
+
 /** Convert a viewport click into the unscaled fmd-slide coordinate system. */
 export function clientPointToSlideCoordinates(
   clientX: number,