@agent-native/core 0.149.0 → 0.149.2

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

@@ -3,9 +3,12 @@ import { PromptComposer } from "@agent-native/core/client/composer";
 import { ensureEmbedAuthFetchInterceptor } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
 import {
+  IconArrowLeft,
   IconBrandGoogle,
   IconFileTypePdf,
+  IconLoader2,
   IconPresentation,
+  IconUpload,
 } from "@tabler/icons-react";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
@@ -86,7 +89,7 @@ interface PromptPopoverProps {
   placeholder?: string;
   onSkip?: () => void;
   skipLabel?: string;
-  onSubmit: (prompt: string, files: UploadedFile[]) => void;
+  onSubmit: (prompt: string, files: UploadedFile[]) => void | Promise<void>;
   loading?: boolean;
   anchorRef?: React.RefObject<HTMLElement | null>;
   centered?: boolean;
@@ -125,10 +128,14 @@ export default function PromptPopover({
 }: PromptPopoverProps) {
   const t = useT();
   const [uploading, setUploading] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
   const [promptText, setPromptText] = useState("");
   const [googleDocContext, setGoogleDocContext] = useState("");
   const [googleSlidesUrl, setGoogleSlidesUrl] = useState("");
-  const [googleSlidesInputOpen, setGoogleSlidesInputOpen] = useState(false);
+  const [importMode, setImportMode] = useState<PromptImportSource | null>(null);
+  const [selectedImportFile, setSelectedImportFile] = useState<File | null>(
+    null,
+  );
   const [importingSource, setImportingSource] =
     useState<PromptImportSource | null>(null);
   const pdfInputRef = useRef<HTMLInputElement>(null);
@@ -216,16 +223,20 @@ export default function PromptPopover({
       if (files.length > 0 && onBeforeUpload?.(enrichedText, files) === false) {
         return;
       }
+      setSubmitting(true);
       try {
         const uploaded = await uploadFiles(files);
-        onSubmit(enrichedText, uploaded);
+        await onSubmit(enrichedText, uploaded);
+        setSubmitting(false);
       } catch (error) {
+        setSubmitting(false);
         toast.error(t("raw.uploadFailed"), {
           description:
             error instanceof Error
               ? error.message
               : t("raw.uploadAttachedFailed"),
         });
+        throw error;
       }
     },
     [googleDocContext, onBeforeUpload, onSubmit, uploadFiles, t],
@@ -255,11 +266,25 @@ export default function PromptPopover({
   const handleFileImport = useCallback(
     (kind: "pdf" | "pptx", file: File | undefined) => {
       if (!file) return;
+      setSelectedImportFile(file);
       void runImport({ kind, files: [file] });
     },
     [runImport],
   );
 
+  const chooseImportMode = useCallback((kind: PromptImportSource) => {
+    setImportMode(kind);
+    setSelectedImportFile(null);
+    setGoogleSlidesUrl("");
+  }, []);
+
+  const returnToPrompt = useCallback(() => {
+    if (importingSource) return;
+    setImportMode(null);
+    setSelectedImportFile(null);
+    setGoogleSlidesUrl("");
+  }, [importingSource]);
+
   const handleGoogleSlidesImport = useCallback(() => {
     const url = googleSlidesUrl.trim();
     if (!url) return;
@@ -271,13 +296,29 @@ export default function PromptPopover({
       setPromptText("");
       setGoogleDocContext("");
       setGoogleSlidesUrl("");
-      setGoogleSlidesInputOpen(false);
+      setImportMode(null);
+      setSelectedImportFile(null);
       setImportingSource(null);
+      setSubmitting(false);
     }
   }, [open]);
 
   if (!open) return null;
 
+  const importEnabled = Boolean(onImport && importFromLabel);
+  const importFromCopy = importFromLabel?.trim().toLowerCase().startsWith("or ")
+    ? importFromLabel.trim()
+    : importFromLabel
+      ? `or ${importFromLabel.trim().toLowerCase()}`
+      : "";
+  const importModeLabel =
+    importMode === "google-slides"
+      ? t("home.googleSlidesReferenceTitle")
+      : importMode === "pdf"
+        ? "PDF"
+        : "PPT";
+  const importInputRef = importMode === "pdf" ? pdfInputRef : pptxInputRef;
+
   const popover = (
     <>
       {centered && (
@@ -296,7 +337,7 @@ export default function PromptPopover({
       >
         <div className="flex items-center justify-between gap-3 px-4 pb-2.5 pt-3.5">
           <span className="text-sm font-medium text-foreground">{title}</span>
-          {onSkip && (
+          {onSkip && !importMode && !submitting && (
             <button
               type="button"
               onClick={() => {
@@ -310,132 +351,214 @@ export default function PromptPopover({
           )}
         </div>
 
-        <div className="px-2.5 pb-2.5">
-          <PromptComposer
-            autoFocus
-            attachmentsEnabled
-            maxDocumentAttachmentBytes={MAX_REFERENCE_FILE_BYTES}
-            documentAttachmentLimitLabel="Slides reference files"
-            disabled={loading || uploading}
-            placeholder={placeholder}
-            onSubmit={handleSubmit}
-            onTextChange={setPromptText}
-            draftScope={draftScope}
-            initialText={initialText}
-            initialTextKey={initialTextKey}
+        {importEnabled && (
+          <input
+            ref={pdfInputRef}
+            type="file"
+            accept=".pdf,application/pdf"
+            className="sr-only"
+            aria-label={t("editorToolbar.importFile")}
+            onChange={(event) => {
+              handleFileImport("pdf", event.target.files?.[0]);
+              event.target.value = "";
+            }}
           />
-        </div>
+        )}
+        {importEnabled && (
+          <input
+            ref={pptxInputRef}
+            type="file"
+            accept=".pptx,application/vnd.openxmlformats-officedocument.presentationml.presentation"
+            className="sr-only"
+            aria-label={t("editorToolbar.importFile")}
+            onChange={(event) => {
+              handleFileImport("pptx", event.target.files?.[0]);
+              event.target.value = "";
+            }}
+          />
+        )}
 
-        {onImport && importFromLabel && (
-          <div className="border-t border-border/60 px-4 pb-3 pt-2.5">
-            <div className="flex flex-wrap items-center gap-1.5">
-              <span className="mr-1 text-xs text-muted-foreground">
-                {importFromLabel}
-              </span>
-              <input
-                ref={pdfInputRef}
-                type="file"
-                accept=".pdf,application/pdf"
-                className="sr-only"
-                aria-label={t("editorToolbar.importFile")}
-                onChange={(event) => {
-                  handleFileImport("pdf", event.target.files?.[0]);
-                  event.target.value = "";
-                }}
-              />
-              <input
-                ref={pptxInputRef}
-                type="file"
-                accept=".pptx,application/vnd.openxmlformats-officedocument.presentationml.presentation"
-                className="sr-only"
-                aria-label={t("editorToolbar.importFile")}
-                onChange={(event) => {
-                  handleFileImport("pptx", event.target.files?.[0]);
-                  event.target.value = "";
-                }}
+        <div className={importEnabled ? "grid" : undefined}>
+          <div
+            className={[
+              importEnabled ? "col-start-1 row-start-1" : "",
+              importMode ? "invisible pointer-events-none" : "",
+            ]
+              .filter(Boolean)
+              .join(" ")}
+            aria-hidden={importMode ? true : undefined}
+          >
+            <div className="px-2.5 pb-2.5">
+              <PromptComposer
+                autoFocus
+                attachmentsEnabled
+                maxDocumentAttachmentBytes={MAX_REFERENCE_FILE_BYTES}
+                documentAttachmentLimitLabel="Slides reference files"
+                disabled={
+                  loading || uploading || submitting || Boolean(importMode)
+                }
+                placeholder={placeholder}
+                onSubmit={handleSubmit}
+                onTextChange={setPromptText}
+                draftScope={draftScope}
+                initialText={initialText}
+                initialTextKey={initialTextKey}
               />
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="h-7 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
-                disabled={importingSource !== null || loading || uploading}
-                onClick={() => pdfInputRef.current?.click()}
-              >
-                <IconFileTypePdf className="size-3.5" />
-                PDF
-              </Button>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="h-7 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
-                disabled={importingSource !== null || loading || uploading}
-                onClick={() => setGoogleSlidesInputOpen((current) => !current)}
-              >
-                <IconBrandGoogle className="size-3.5" />
-                {t("home.googleSlidesReferenceTitle")}
-              </Button>
-              <Button
-                type="button"
-                variant="ghost"
-                size="sm"
-                className="h-7 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
-                disabled={importingSource !== null || loading || uploading}
-                onClick={() => pptxInputRef.current?.click()}
-              >
-                <IconPresentation className="size-3.5" />
-                PPT
-              </Button>
-              {importingSource && (
-                <span className="ml-auto text-xs text-muted-foreground">
-                  {importingLabel}
-                </span>
-              )}
             </div>
-            {googleSlidesInputOpen && (
-              <div className="mt-2 space-y-2">
-                <GoogleDriveConnectionCta />
-                <div className="flex gap-2">
-                  <Input
-                    autoFocus
-                    type="url"
-                    value={googleSlidesUrl}
-                    placeholder={t("home.googleSlidesReferenceUrl")}
-                    aria-label={t("home.googleSlidesReferenceUrl")}
-                    className="h-8 text-xs"
-                    disabled={importingSource !== null || loading || uploading}
-                    onChange={(event) => setGoogleSlidesUrl(event.target.value)}
-                    onKeyDown={(event) => {
-                      if (event.key === "Enter") handleGoogleSlidesImport();
-                    }}
-                  />
+
+            {submitting && (
+              <div
+                className="flex items-center gap-2 border-t border-border/60 px-4 py-2.5 text-xs text-muted-foreground"
+                role="status"
+                aria-live="polite"
+              >
+                <IconLoader2 className="size-3.5 animate-spin" />
+                <span>{t("raw.uploading")}</span>
+              </div>
+            )}
+
+            {importEnabled && (
+              <div className="border-t border-border/60 px-4 pb-3 pt-2.5">
+                <div className="flex flex-wrap items-center gap-1.5">
+                  <span className="mr-1 text-xs text-muted-foreground">
+                    {importFromCopy}
+                  </span>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
+                    disabled={loading || uploading || submitting}
+                    onClick={() => chooseImportMode("pdf")}
+                  >
+                    <IconFileTypePdf className="size-3.5" />
+                    PDF
+                  </Button>
                   <Button
                     type="button"
+                    variant="ghost"
                     size="sm"
-                    className="h-8 shrink-0 px-3 text-xs"
-                    disabled={
-                      !googleSlidesUrl.trim() ||
-                      importingSource !== null ||
-                      loading ||
-                      uploading
-                    }
-                    onClick={handleGoogleSlidesImport}
+                    className="h-7 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
+                    disabled={loading || uploading || submitting}
+                    onClick={() => chooseImportMode("google-slides")}
                   >
-                    Import
+                    <IconBrandGoogle className="size-3.5" />
+                    {t("home.googleSlidesImportLabel")}
+                  </Button>
+                  <Button
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    className="h-7 gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground"
+                    disabled={loading || uploading || submitting}
+                    onClick={() => chooseImportMode("pptx")}
+                  >
+                    <IconPresentation className="size-3.5" />
+                    PPT
                   </Button>
                 </div>
               </div>
             )}
+
+            {children}
+
+            <GoogleDocImportHint
+              promptText={promptText}
+              onSourceContextChange={setGoogleDocContext}
+            />
           </div>
-        )}
 
-        {children}
+          {importEnabled && importMode && (
+            <div className="col-start-1 row-start-1 flex min-h-full flex-col px-4 pb-4 pt-3">
+              <div className="flex items-center gap-2">
+                <button
+                  type="button"
+                  onClick={returnToPrompt}
+                  disabled={importingSource !== null}
+                  className="-ms-1 inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
+                  aria-label={
+                    "Back to prompt" /* i18n-ignore -- local import-flow control label */
+                  }
+                >
+                  <IconArrowLeft className="size-4" />
+                </button>
+                <span className="text-sm font-medium text-foreground">
+                  Import {importModeLabel}
+                </span>
+              </div>
 
-        <GoogleDocImportHint
-          promptText={promptText}
-          onSourceContextChange={setGoogleDocContext}
-        />
+              <div className="flex flex-1 flex-col justify-center gap-3">
+                {importMode === "google-slides" ? (
+                  <>
+                    <GoogleDriveConnectionCta />
+                    <div className="flex gap-2">
+                      <Input
+                        autoFocus
+                        type="url"
+                        value={googleSlidesUrl}
+                        placeholder={t("home.googleSlidesReferenceUrl")}
+                        aria-label={t("home.googleSlidesReferenceUrl")}
+                        className="h-8 text-xs"
+                        disabled={importingSource !== null || loading}
+                        onChange={(event) =>
+                          setGoogleSlidesUrl(event.target.value)
+                        }
+                        onKeyDown={(event) => {
+                          if (event.key === "Enter") handleGoogleSlidesImport();
+                        }}
+                      />
+                      <Button
+                        type="button"
+                        size="sm"
+                        className="h-8 shrink-0 px-3 text-xs"
+                        disabled={
+                          !googleSlidesUrl.trim() ||
+                          importingSource !== null ||
+                          loading
+                        }
+                        onClick={handleGoogleSlidesImport}
+                      >
+                        Import
+                      </Button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <p className="text-xs text-muted-foreground">
+                      Choose a {importModeLabel} file to open it as a deck.
+                    </p>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      className="w-full justify-center gap-2"
+                      disabled={importingSource !== null || loading}
+                      onClick={() => importInputRef.current?.click()}
+                    >
+                      <IconUpload className="size-4" />
+                      Upload {importModeLabel}
+                    </Button>
+                    {selectedImportFile && (
+                      <p className="truncate text-center text-xs text-muted-foreground">
+                        {selectedImportFile.name}
+                      </p>
+                    )}
+                  </>
+                )}
+              </div>
+
+              {importingSource && (
+                <div
+                  className="flex items-center justify-center gap-2 text-xs text-muted-foreground"
+                  role="status"
+                  aria-live="polite"
+                >
+                  <IconLoader2 className="size-3.5 animate-spin" />
+                  <span>{importingLabel}</span>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
       </div>
     </>
   );

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

@@ -119,6 +119,8 @@ import {
   getSlideTextBoxDefaultColor,
   getSlideSelectionIdentity,
   getSlideSelectionMode,
+  findPersistedImageObject,
+  isDeletableFlowImage,
   removeSlideObjectAndLayoutSpacer,
   resolveSlideObjectContainingBlock,
   type CopiedSlideObjects,
@@ -148,7 +150,7 @@ function ExcalidrawExitButton(props: { onExit: () => void; label: string }) {
         <Button
           variant="ghost"
           size="icon"
-          className="absolute right-3 top-3 z-20 h-8 w-8 cursor-pointer border border-border bg-popover/95 shadow-lg backdrop-blur"
+          className="absolute right-3 top-3 z-20 h-8 w-8 cursor-pointer border border-border bg-popover/95 shadow-lg"
           onClick={props.onExit}
           aria-label={props.label}
         >
@@ -650,7 +652,7 @@ function SameSlidePresenceIndicator({ users }: { users: CollabUser[] }) {
       ? `${users[0].name} is here`
       : `${users.length} others here`;
   return (
-    <div className="pointer-events-auto flex items-center gap-1.5 rounded-full border border-border bg-popover/95 py-1 pl-1 pr-2.5 text-xs text-popover-foreground shadow-lg backdrop-blur">
+    <div className="pointer-events-auto flex items-center gap-1.5 rounded-full border border-border bg-popover/95 py-1 pl-1 pr-2.5 text-xs text-popover-foreground shadow-lg">
       <div className="flex items-center">
         {visible.map((u) => (
           <SamePresenceAvatar key={u.email} user={u} />
@@ -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();
       }
 
@@ -4229,7 +4246,7 @@ export default function SlideEditor({
             </div>
           ) : (
             <div className="relative h-full bg-background">
-              <div className="absolute right-3 top-3 z-20 flex h-8 items-center gap-0.5 rounded-md border border-border bg-popover/95 px-1 shadow-lg backdrop-blur">
+              <div className="absolute right-3 top-3 z-20 flex h-8 items-center gap-0.5 rounded-md border border-border bg-popover/95 px-1 shadow-lg">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -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,

package/corpus/templates/slides/app/components/layout/AgentWorkIndicator.tsx

@@ -87,7 +87,7 @@ export function AgentWorkIndicator() {
 
   return (
     <div className="pointer-events-none fixed bottom-4 left-1/2 z-50 w-[calc(100vw-2rem)] max-w-sm -translate-x-1/2 md:bottom-5">
-      <div className="pointer-events-auto flex items-center justify-between gap-3 rounded-lg border border-border bg-popover/95 px-3 py-2 text-popover-foreground shadow-xl shadow-black/20 backdrop-blur">
+      <div className="pointer-events-auto flex items-center justify-between gap-3 rounded-lg border border-border bg-popover/95 px-3 py-2 text-popover-foreground shadow-xl shadow-black/20">
         <div className="flex min-w-0 items-center gap-2">
           <IconLoader2 className="h-4 w-4 shrink-0 animate-spin text-[#609FF8]" />
           <span className="truncate text-sm font-medium">