@agent-native/core 0.186.0-nightly-20260923174435 → 0.186.0

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

@@ -5,6 +5,7 @@ import type {
 } from "@agent-native/core/client/collab";
 import { useAvatarUrl } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import { LazyChunkErrorBoundary } from "@agent-native/core/client/lazy-chunk-error-boundary";
 import { DEFAULT_AGENT_IDENTITY } from "@agent-native/toolkit/collab-ui";
 import {
   useSortable,
@@ -15,13 +16,13 @@ import { CSS } from "@dnd-kit/utilities";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
 import { hashSlideContent, type DeckFitState } from "@shared/slide-fit";
 import { IconEyeOff } from "@tabler/icons-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Suspense, 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 { DeferredPopoverFallback } from "@/components/editor/DeferredPopoverFallback";
 import GeneratingSlidePreview from "@/components/editor/GeneratingSlidePreview";
 import {
   ContextMenu,
@@ -38,6 +39,7 @@ import {
 } from "@/components/ui/tooltip";
 import { defaultSlideContent, type Slide } from "@/context/DeckContext";
 import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
+import { DeferredAddSlidePopover } from "@/lib/deferred-editor-surfaces";
 import { TAB_ID } from "@/lib/tab-id";
 import { shortcutLabel } from "@/lib/utils";
 
@@ -669,6 +671,10 @@ export default function EditorSidebar({
   const t = useT();
   const [describeAnchorEl, setDescribeAnchorEl] =
     useState<HTMLButtonElement | null>(null);
+  const closeDescribePopover = useCallback(() => {
+    onCloseDescribe();
+    setDescribeAnchorEl(null);
+  }, [onCloseDescribe]);
   const [thumbnailListScrolled, setThumbnailListScrolled] = useState(false);
   const slideButtonRefs = useRef(new Map<string, HTMLButtonElement>());
   const focusAfterDeleteRef = useRef<string | null>(null);
@@ -1019,47 +1025,65 @@ 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, describeSlideId);
-            try {
-              await onAwaitAddSlidePersisted?.();
-            } catch (error) {
-              console.error("Failed to persist new slide:", error);
-              onAddSlideGeneratingChange?.(false, null);
-              // 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 false;
+        <LazyChunkErrorBoundary
+          fallback={
+            <DeferredPopoverFallback
+              surface="add-slide"
+              anchorRef={{ current: describeAnchorEl }}
+              failed
+              onClose={closeDescribePopover}
+            />
+          }
+        >
+          <Suspense
+            fallback={
+              <DeferredPopoverFallback
+                surface="add-slide"
+                anchorRef={{ current: describeAnchorEl }}
+                onClose={closeDescribePopover}
+              />
             }
-            addSlideAgentSubmit(message, context);
-            return true;
-          }}
-        />
+          >
+            <DeferredAddSlidePopover
+              open
+              onOpenChange={(open) => {
+                if (!open) closeDescribePopover();
+              }}
+              anchorRef={{ current: describeAnchorEl }}
+              placement="right"
+              deckId={deckId}
+              deckTitle={deckTitle}
+              activeSlideId={describeSlideId}
+              activeSlideIndex={describeSlideIndex}
+              slideCount={slides.length}
+              targetSlideId={describeSlideId}
+              agentSubmit={async (message, context) => {
+                onAddSlideGeneratingChange?.(true, describeSlideId);
+                try {
+                  await onAwaitAddSlidePersisted?.();
+                } catch (error) {
+                  console.error("Failed to persist new slide:", error);
+                  onAddSlideGeneratingChange?.(false, null);
+                  // 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 false;
+                }
+                addSlideAgentSubmit(message, context);
+                return true;
+              }}
+            />
+          </Suspense>
+        </LazyChunkErrorBoundary>
       )}
     </div>
   );

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

@@ -1,10 +1,8 @@
-import { appBasePath } from "@agent-native/core/client/api-path";
 import {
   PromptComposer,
   type PromptComposerSubmitOptions,
   useEagerFileUploads,
 } from "@agent-native/core/client/composer";
-import { ensureEmbedAuthFetchInterceptor } from "@agent-native/core/client/host";
 import { useT } from "@agent-native/core/client/i18n";
 import {
   IconArrowLeft,
@@ -18,31 +16,20 @@ import { useState, useEffect, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
 import { toast } from "sonner";
 
+import { isInsidePortaledLayer } from "@/lib/portaled-layer";
 import {
-  canAddInlineImageToPayload,
-  canInlineImageFile,
-  readFileAsDataUrl,
-} from "@/lib/image-drop-to-agent";
+  deleteUploadedPromptFile,
+  uploadPromptFiles,
+  type UploadedFile,
+} from "@/lib/prompt-file-uploads";
 
-import {
-  MAX_REFERENCE_FILE_BYTES,
-  MAX_REFERENCE_FILES,
-} from "../../../shared/upload-types";
+import { MAX_REFERENCE_FILE_BYTES } from "../../../shared/upload-types";
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { GoogleDocImportHint } from "./GoogleDocImportHint";
 import { GoogleDriveConnectionCta } from "./GoogleDriveConnectionCta";
 
-export interface UploadedFile {
-  path: string;
-  url?: string;
-  /** Browser-only fallback when the upload provider did not return a public URL. */
-  dataUrl?: string;
-  originalName: string;
-  filename: string;
-  type: string;
-  size: number;
-}
+export type { UploadedFile } from "@/lib/prompt-file-uploads";
 
 export interface PromptChatAttachment {
   type: "file";
@@ -51,52 +38,6 @@ export interface PromptChatAttachment {
   displayOnly: true;
   text?: string;
 }
-export async function addInlineImageFallbacks(
-  files: File[],
-  uploaded: UploadedFile[],
-): Promise<UploadedFile[]> {
-  const inlineDataUrls: string[] = [];
-  const result: UploadedFile[] = [];
-  for (let index = 0; index < uploaded.length; index++) {
-    const uploadedFile = uploaded[index];
-    const file = files[index];
-    const isImage =
-      uploadedFile.type.startsWith("image/") ||
-      Boolean(file?.type.startsWith("image/"));
-    if (!isImage || !file) {
-      result.push(uploadedFile);
-      continue;
-    }
-    if (uploadedFile.url) {
-      const { dataUrl: _dataUrl, ...withoutDataUrl } = uploadedFile;
-      result.push(withoutDataUrl);
-      continue;
-    }
-    if (uploadedFile.dataUrl) {
-      if (canAddInlineImageToPayload(inlineDataUrls, uploadedFile.dataUrl)) {
-        inlineDataUrls.push(uploadedFile.dataUrl);
-        result.push(uploadedFile);
-      } else {
-        const { dataUrl: _dataUrl, ...withoutDataUrl } = uploadedFile;
-        result.push(withoutDataUrl);
-      }
-      continue;
-    }
-    if (!canInlineImageFile(file)) {
-      result.push(uploadedFile);
-      continue;
-    }
-    const dataUrl = await readFileAsDataUrl(file);
-    if (canAddInlineImageToPayload(inlineDataUrls, dataUrl)) {
-      inlineDataUrls.push(dataUrl);
-      result.push({ ...uploadedFile, dataUrl });
-    } else {
-      result.push(uploadedFile);
-    }
-  }
-  return result;
-}
-
 export async function createPromptChatAttachments(
   attachments: ReadonlyArray<unknown> | undefined,
   uploaded: UploadedFile[],
@@ -158,224 +99,6 @@ export async function createPromptChatAttachments(
   return result;
 }
 
-// Netlify functions cap request bodies well under what a real PPTX/PDF
-// needs, so any file above this size streams through the chunked upload
-// endpoints (sub-4 MB slices, reassembled server-side) instead of one
-// multipart POST.
-const CHUNK_UPLOAD_THRESHOLD_BYTES = 4 * 1024 * 1024;
-const CHUNK_SIZE_BYTES = 4 * 1024 * 1024;
-
-async function readUploadJson(response: Response): Promise<unknown> {
-  try {
-    return await response.json();
-  } catch (error) {
-    throw new Error(`Upload returned invalid JSON (${response.status})`, {
-      cause: error,
-    });
-  }
-}
-
-function extractErrorMessage(data: unknown): string | null {
-  if (
-    data &&
-    typeof data === "object" &&
-    "error" in data &&
-    typeof (data as { error: unknown }).error === "string" &&
-    (data as { error: string }).error.trim()
-  ) {
-    return (data as { error: string }).error;
-  }
-  return null;
-}
-
-async function uploadFilesMultipart(files: File[]): Promise<UploadedFile[]> {
-  const formData = new FormData();
-  files.forEach((file) => formData.append("files", file));
-  const response = await fetch(`${appBasePath()}/api/uploads`, {
-    method: "POST",
-    body: formData,
-    credentials: "include",
-  });
-  const data = await readUploadJson(response);
-  if (!response.ok) {
-    throw new Error(
-      extractErrorMessage(data) || `Upload failed (${response.status})`,
-    );
-  }
-  if (!Array.isArray(data)) {
-    throw new Error("Upload failed: invalid response");
-  }
-  return data as UploadedFile[];
-}
-
-async function deleteUploadedPromptFile(file: UploadedFile): Promise<void> {
-  const response = await fetch(`${appBasePath()}/api/uploads`, {
-    method: "DELETE",
-    headers: { "content-type": "application/json" },
-    credentials: "include",
-    body: JSON.stringify({ path: file.path }),
-  });
-  if (!response.ok) {
-    throw new Error(`Upload cleanup failed (${response.status})`);
-  }
-}
-
-async function cleanupUploadedPromptFiles(files: UploadedFile[]) {
-  const results = await Promise.allSettled(
-    files.map((file) => deleteUploadedPromptFile(file)),
-  );
-  results.forEach((result) => {
-    if (result.status === "rejected") {
-      console.error("Eager upload cleanup failed", result.reason);
-    }
-  });
-}
-
-async function uploadFileChunked(file: File): Promise<UploadedFile> {
-  const startResponse = await fetch(
-    `${appBasePath()}/api/uploads-chunked/start`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      credentials: "include",
-      body: JSON.stringify({
-        filename: file.name,
-        mimetype: file.type || "application/octet-stream",
-        declaredSize: file.size,
-      }),
-    },
-  );
-  const startData = await readUploadJson(startResponse);
-  if (!startResponse.ok) {
-    throw new Error(
-      extractErrorMessage(startData) ||
-        `Upload failed (${startResponse.status})`,
-    );
-  }
-  if (
-    startData &&
-    typeof startData === "object" &&
-    (startData as { uploadMode?: unknown }).uploadMode === "multipart"
-  ) {
-    const [uploaded] = await uploadFilesMultipart([file]);
-    if (!uploaded) throw new Error("Upload failed: no file returned");
-    return uploaded;
-  }
-  const sessionId =
-    startData && typeof startData === "object"
-      ? (startData as { sessionId?: unknown }).sessionId
-      : undefined;
-  if (typeof sessionId !== "string" || !sessionId) {
-    throw new Error("Upload failed: session ID missing");
-  }
-
-  const totalChunks = Math.max(1, Math.ceil(file.size / CHUNK_SIZE_BYTES));
-  for (let index = 0; index < totalChunks; index++) {
-    const start = index * CHUNK_SIZE_BYTES;
-    const end = Math.min(start + CHUNK_SIZE_BYTES, file.size);
-    const isFinal = index === totalChunks - 1;
-    const chunkResponse = await fetch(
-      `${appBasePath()}/api/uploads-chunked/${sessionId}/chunk?index=${index}&isFinal=${
-        isFinal ? "1" : "0"
-      }`,
-      {
-        method: "POST",
-        credentials: "include",
-        headers: { "Content-Type": "application/octet-stream" },
-        body: file.slice(start, end),
-      },
-    );
-    const chunkData = await readUploadJson(chunkResponse);
-    if (!chunkResponse.ok) {
-      throw new Error(
-        extractErrorMessage(chunkData) ||
-          `Upload failed (${chunkResponse.status})`,
-      );
-    }
-    if (isFinal) {
-      const result = Array.isArray(chunkData)
-        ? (chunkData[0] as UploadedFile)
-        : undefined;
-      if (!result) throw new Error("Upload failed: no file returned");
-      return result;
-    }
-  }
-  throw new Error("Upload failed: no final chunk response");
-}
-
-export async function uploadPromptFiles(
-  files: File[],
-): Promise<UploadedFile[]> {
-  if (files.length === 0) return [];
-  if (files.length > MAX_REFERENCE_FILES) {
-    throw new Error(`Too many files (max ${MAX_REFERENCE_FILES})`);
-  }
-  ensureEmbedAuthFetchInterceptor();
-  const smallIndices = files.flatMap((file, index) =>
-    file.size <= CHUNK_UPLOAD_THRESHOLD_BYTES ? [index] : [],
-  );
-  const largeIndices = files.flatMap((file, index) =>
-    file.size > CHUNK_UPLOAD_THRESHOLD_BYTES ? [index] : [],
-  );
-  const smallPromise =
-    smallIndices.length > 0
-      ? uploadFilesMultipart(smallIndices.map((index) => files[index]))
-      : Promise.resolve([] as UploadedFile[]);
-  const [smallResult, largeResults] = await Promise.all([
-    smallPromise.then(
-      (value) => ({ status: "fulfilled" as const, value }),
-      (reason) => ({ status: "rejected" as const, reason }),
-    ),
-    Promise.allSettled(
-      largeIndices.map((index) => uploadFileChunked(files[index])),
-    ),
-  ]);
-  const successfulLargeUploads = largeResults.flatMap((result) =>
-    result.status === "fulfilled" ? [result.value] : [],
-  );
-  const failedLargeResult = largeResults.find(
-    (result) => result.status === "rejected",
-  );
-  if (smallResult.status === "rejected") {
-    await cleanupUploadedPromptFiles([...successfulLargeUploads]);
-    throw smallResult.reason;
-  }
-  if (failedLargeResult) {
-    await cleanupUploadedPromptFiles([
-      ...smallResult.value,
-      ...successfulLargeUploads,
-    ]);
-    throw failedLargeResult.reason;
-  }
-  const smallUploads = smallResult.value;
-  const largeUploads = successfulLargeUploads;
-  if (smallUploads.length !== smallIndices.length) {
-    throw new Error("Upload failed: response file count did not match request");
-  }
-  const uploads = new Array<UploadedFile>(files.length);
-  smallIndices.forEach((fileIndex, resultIndex) => {
-    uploads[fileIndex] = smallUploads[resultIndex];
-  });
-  largeIndices.forEach((fileIndex, resultIndex) => {
-    uploads[fileIndex] = largeUploads[resultIndex];
-  });
-  return addInlineImageFallbacks(files, uploads);
-}
-
-/**
- * Radix popovers portal to `document.body`, so a mousedown inside the model
- * picker or attachment menu reads as "outside" any panel that hosts a composer.
- * Closing on it unmounts the popover before its own click fires, which looks
- * exactly like a dead button.
- */
-export function isInsidePortaledLayer(target: EventTarget | null): boolean {
-  return Boolean(
-    (target as Element | null)?.closest?.(
-      "[data-radix-popper-content-wrapper]",
-    ),
-  );
-}
-
 export type PromptImportSource = "pdf" | "pptx" | "google-slides";
 
 export type PromptImportSelection =

package/corpus/templates/slides/app/lib/deferred-editor-surfaces.ts

@@ -0,0 +1,25 @@
+import { lazy } from "react";
+
+let addSlidePopoverModule:
+  | Promise<typeof import("@/components/editor/AddSlidePopover")>
+  | undefined;
+
+function loadAddSlidePopover() {
+  addSlidePopoverModule ??= import("@/components/editor/AddSlidePopover").catch(
+    (error) => {
+      addSlidePopoverModule = undefined;
+      throw error;
+    },
+  );
+  return addSlidePopoverModule;
+}
+
+export function preloadAddSlidePopover() {
+  // Hover/focus loads are speculative; the opened lazy render owns recovery.
+  void loadAddSlidePopover().catch(() => {});
+}
+
+export const DeferredAddSlidePopover = lazy(async () => {
+  const module = await loadAddSlidePopover();
+  return { default: module.AddSlidePopover };
+});

package/corpus/templates/slides/app/lib/portaled-layer.ts

@@ -0,0 +1,7 @@
+export function isInsidePortaledLayer(target: EventTarget | null): boolean {
+  return Boolean(
+    (target as Element | null)?.closest?.(
+      "[data-radix-popper-content-wrapper]",
+    ),
+  );
+}