@agent-native/core 0.148.0 → 0.149.0

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

@@ -48,6 +48,17 @@ export interface NewDeckReferenceSelection {
     value: string;
   } | null;
 }
+
+export type NewDeckReferenceSource = NonNullable<
+  NewDeckReferenceSelection["referenceSource"]
+>;
+
+export interface ImportedReference {
+  id: string;
+  title: string;
+  source: "pptx" | "pdf" | "google-slides";
+}
+
 interface DesignSystemOption {
   id: string;
   title: string;
@@ -61,9 +72,12 @@ interface NewDeckReferenceStepProps {
   defaultDesignSystemId: string | null;
   defaultReferenceDeckId: string | null;
   recentReferences: RecentReference[];
-  onSelect: (selection: NewDeckReferenceSelection) => void;
-  onImport: (files: File[]) => Promise<void>;
-  onSkip: () => void;
+  onSelect: (selection: NewDeckReferenceSelection) => void | Promise<void>;
+  onImport: (files: File[]) => Promise<ImportedReference | null>;
+  onImportSource: (
+    source: NewDeckReferenceSource,
+  ) => Promise<ImportedReference | null>;
+  onSkip: () => void | Promise<void>;
   onOpenChange: (open: boolean) => void;
   importing?: boolean;
   title: string;
@@ -72,7 +86,6 @@ interface NewDeckReferenceStepProps {
   chooseDeckLabel: string;
   importingLabel: string;
   skipLabel: string;
-  defaultSuffix: string;
   starredLabel: string;
   otherDecksLabel: string;
   searchDecksLabel: string;
@@ -88,6 +101,7 @@ export function NewDeckReferenceStep({
   recentReferences,
   onSelect,
   onImport,
+  onImportSource,
   onSkip,
   onOpenChange,
   importing = false,
@@ -97,7 +111,6 @@ export function NewDeckReferenceStep({
   chooseDeckLabel,
   importingLabel,
   skipLabel,
-  defaultSuffix,
   starredLabel,
   otherDecksLabel,
   searchDecksLabel,
@@ -110,6 +123,8 @@ export function NewDeckReferenceStep({
   const [selectedReferenceDeckId, setSelectedReferenceDeckId] = useState<
     string | null
   >(defaultReferenceDeckId);
+  const [importedReference, setImportedReference] =
+    useState<ImportedReference | null>(null);
   const [selectedSource, setSelectedSource] =
     useState<NewDeckReferenceSelection["referenceSource"]>(null);
   const [referenceDeckSearchOpen, setReferenceDeckSearchOpen] = useState(false);
@@ -141,9 +156,6 @@ export function NewDeckReferenceStep({
   );
   const starredDecks = decks.filter((deck) => deck.starred);
   const otherDecks = decks.filter((deck) => !deck.starred);
-  const selectedDesignSystem = selectedDesignSystemId
-    ? designSystemById.get(selectedDesignSystemId)
-    : undefined;
   const selectedReferenceDeck = selectedReferenceDeckId
     ? deckById.get(selectedReferenceDeckId)
     : undefined;
@@ -152,6 +164,7 @@ export function NewDeckReferenceStep({
     if (!open) return;
     setSelectedDesignSystemId(defaultDesignSystemId);
     setSelectedReferenceDeckId(defaultReferenceDeckId);
+    setImportedReference(null);
     setSelectedSource(null);
     setReferenceDeckSearchOpen(false);
   }, [open, defaultDesignSystemId, defaultReferenceDeckId]);
@@ -160,17 +173,33 @@ export function NewDeckReferenceStep({
     const files = Array.from(event.target.files ?? []);
     event.target.value = "";
     if (files.length === 0) return;
-    await onImport(files);
+    const imported = await onImport(files);
+    if (imported) applyImportedReference(imported);
   };
 
-  const handleContinue = () => {
+  const applyImportedReference = (imported: ImportedReference) => {
+    setSelectedDesignSystemId(null);
+    setSelectedReferenceDeckId(imported.id);
+    setSelectedSource(null);
+    setImportedReference(imported);
+  };
+
+  const handleContinue = async () => {
+    const trimmedSource =
+      selectedSource && selectedSource.value.trim()
+        ? { ...selectedSource, value: selectedSource.value.trim() }
+        : null;
+
+    if (trimmedSource?.kind === "google-docs") {
+      const imported = await onImportSource(trimmedSource);
+      if (imported) applyImportedReference(imported);
+      return;
+    }
+
     onSelect({
       designSystemId: selectedDesignSystemId,
       referenceDeckId: selectedReferenceDeckId,
-      referenceSource:
-        selectedSource && selectedSource.value.trim()
-          ? { ...selectedSource, value: selectedSource.value.trim() }
-          : null,
+      referenceSource: trimmedSource,
     });
   };
 
@@ -182,23 +211,20 @@ export function NewDeckReferenceStep({
       setSelectedDesignSystemId(null);
     } else {
       setSelectedReferenceDeckId(null);
+      setImportedReference(null);
     }
   };
   const selectedSourceLabel =
     selectedSource?.kind === "google-docs"
-      ? "Google Docs"
+      ? t("home.googleSlidesReferenceTitle")
       : selectedSource?.kind === "website"
         ? "Website"
         : "Figma";
-  const selectedSourceIcon =
-    selectedSource?.kind === "google-docs" ? (
-      <IconBrandGoogle className="size-4" />
-    ) : selectedSource?.kind === "website" ? (
-      <IconWorld className="size-4" />
-    ) : (
-      <IconBrandFigma className="size-4" />
-    );
-
+  const selectedReferenceDeckTitle =
+    selectedReferenceDeck?.title ??
+    (selectedReferenceDeckId === importedReference?.id
+      ? importedReference.title
+      : undefined);
   return open ? (
     <div
       className="fixed inset-0 z-[200] flex min-h-screen flex-col bg-background text-foreground"
@@ -228,29 +254,6 @@ export function NewDeckReferenceStep({
             </p>
           )}
 
-          {(selectedDesignSystem || selectedSource) && (
-            <div className="mt-8 space-y-2">
-              {selectedDesignSystem && (
-                <ReferenceRow
-                  icon={<IconPalette className="size-4" />}
-                  label={selectedDesignSystem.title}
-                  meta={`${designSystemLabel}${defaultDesignSystemId === selectedDesignSystem.id ? defaultSuffix : ""}`}
-                  selected
-                  onClick={() => setSelectedDesignSystemId(null)}
-                />
-              )}
-              {selectedSource && (
-                <ReferenceRow
-                  icon={selectedSourceIcon}
-                  label={selectedSourceLabel}
-                  meta={selectedSource.value || "Add a link below"}
-                  selected
-                  onClick={() => setSelectedSource(null)}
-                />
-              )}
-            </div>
-          )}
-
           <div className="mt-10 space-y-6">
             <div className="grid gap-2">
               <div className="flex items-center justify-between gap-3">
@@ -309,7 +312,7 @@ export function NewDeckReferenceStep({
                     className="flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                   >
                     <span className="truncate">
-                      {selectedReferenceDeck?.title ?? chooseDeckLabel}
+                      {selectedReferenceDeckTitle ?? chooseDeckLabel}
                     </span>
                     <IconChevronDown className="size-4 shrink-0 opacity-50" />
                   </button>
@@ -336,6 +339,7 @@ export function NewDeckReferenceStep({
                               value={`${deck.title} ${deck.id}`}
                               onSelect={() => {
                                 setSelectedReferenceDeckId(deck.id);
+                                setImportedReference(null);
                                 setSelectedSource(null);
                                 setReferenceDeckSearchOpen(false);
                               }}
@@ -361,6 +365,7 @@ export function NewDeckReferenceStep({
                               value={`${deck.title} ${deck.id}`}
                               onSelect={() => {
                                 setSelectedReferenceDeckId(deck.id);
+                                setImportedReference(null);
                                 setSelectedSource(null);
                                 setReferenceDeckSearchOpen(false);
                               }}
@@ -430,6 +435,8 @@ export function NewDeckReferenceStep({
                   accept=".pptx"
                   icon={<IconPresentation className="size-4" />}
                   label="PPT"
+                  imported={importedReference?.source === "pptx"}
+                  importedLabel={t("home.imported")}
                   importing={importing}
                   importingLabel={importingLabel}
                   onChange={handleImport}
@@ -438,6 +445,8 @@ export function NewDeckReferenceStep({
                   accept=".pdf"
                   icon={<IconFileTypePdf className="size-4" />}
                   label="PDF"
+                  imported={importedReference?.source === "pdf"}
+                  importedLabel={t("home.imported")}
                   importing={importing}
                   importingLabel={importingLabel}
                   onChange={handleImport}
@@ -446,25 +455,34 @@ export function NewDeckReferenceStep({
                   accept=".docx"
                   icon={<IconFileText className="size-4" />}
                   label="DOCX"
+                  imported={false}
+                  importedLabel={t("home.imported")}
                   importing={importing}
                   importingLabel={importingLabel}
                   onChange={handleImport}
                 />
                 <ImportOption
                   icon={<IconBrandGoogle className="size-4" />}
-                  label="GDocs"
-                  selected={selectedSource?.kind === "google-docs"}
+                  label={t("home.googleSlidesReferenceTitle")}
+                  confirmed={importedReference?.source === "google-slides"}
+                  confirmedLabel={t("home.imported")}
+                  selected={
+                    selectedSource?.kind === "google-docs" ||
+                    importedReference?.source === "google-slides"
+                  }
                   onClick={() => chooseSource("google-docs")}
                 />
                 <ImportOption
                   icon={<IconWorld className="size-4" />}
                   label="Website"
+                  confirmedLabel={t("home.imported")}
                   selected={selectedSource?.kind === "website"}
                   onClick={() => chooseSource("website")}
                 />
                 <ImportOption
                   icon={<IconBrandFigma className="size-4" />}
                   label="Figma"
+                  confirmedLabel={t("home.imported")}
                   selected={selectedSource?.kind === "figma"}
                   onClick={() => chooseSource("figma")}
                 />
@@ -484,23 +502,54 @@ export function NewDeckReferenceStep({
                   }
                 />
               )}
+              {importedReference && (
+                <div
+                  className="mt-3 flex items-start gap-3 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2.5 text-sm"
+                  role="status"
+                  aria-live="polite"
+                >
+                  <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
+                    <IconCheck className="size-3.5" />
+                  </span>
+                  <div className="min-w-0">
+                    <p className="font-medium text-foreground">
+                      {t("home.referenceImportSuccess")}
+                    </p>
+                    <p className="truncate text-xs text-muted-foreground">
+                      {t("home.referenceImportSelected", {
+                        title: importedReference.title,
+                      })}
+                    </p>
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>
       </main>
 
       <footer className="flex shrink-0 items-center justify-between border-t border-border px-5 py-4 sm:px-8">
-        <Button type="button" variant="ghost" onClick={onSkip}>
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={onSkip}
+          disabled={importing}
+        >
           {skipLabel}
         </Button>
         <Button
           type="button"
-          onClick={handleContinue}
+          onClick={() => void handleContinue()}
+          aria-busy={importing}
           disabled={
             importing || Boolean(selectedSource && !selectedSource.value.trim())
           }
         >
-          Continue
+          {importing
+            ? importingLabel
+            : importedReference
+              ? t("home.continueToGenerate")
+              : t("home.continue")}
           <IconCheck className="ms-1.5 size-4" />
         </Button>
       </footer>
@@ -512,6 +561,8 @@ function FileImportOption({
   accept,
   icon,
   label,
+  imported = false,
+  importedLabel,
   importing,
   importingLabel,
   onChange,
@@ -519,6 +570,8 @@ function FileImportOption({
   accept: string;
   icon: ReactNode;
   label: string;
+  imported?: boolean;
+  importedLabel: string;
   importing: boolean;
   importingLabel: string;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -529,8 +582,9 @@ function FileImportOption({
         "flex cursor-pointer items-center justify-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium transition-colors hover:bg-accent",
         importing && "pointer-events-none opacity-60",
       )}
+      aria-label={imported ? `${label} - ${importedLabel}` : label}
     >
-      {icon}
+      {imported ? <IconCheck className="size-4 text-primary" /> : icon}
       <span>{importing ? importingLabel : label}</span>
       <input
         type="file"
@@ -547,11 +601,15 @@ function FileImportOption({
 function ImportOption({
   icon,
   label,
+  confirmed = false,
+  confirmedLabel,
   selected = false,
   onClick,
 }: {
   icon: ReactNode;
   label: string;
+  confirmed?: boolean;
+  confirmedLabel?: string;
   selected?: boolean;
   onClick: () => void;
 }) {
@@ -565,9 +623,12 @@ function ImportOption({
           ? "border-primary/50 bg-primary/5 text-primary"
           : "border-border hover:bg-accent",
       )}
+      aria-label={
+        confirmed && confirmedLabel ? `${label} - ${confirmedLabel}` : label
+      }
       aria-pressed={selected}
     >
-      {icon}
+      {confirmed ? <IconCheck className="size-4 text-primary" /> : icon}
       <span>{label}</span>
     </button>
   );

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

@@ -4328,6 +4328,7 @@ export default function SlideEditor({
                           edits={activeSlideEdits}
                           resolveRect={resolveCanvasRect}
                           containerRef={slideCanvasRef}
+                          outlineOnly
                         />
                       )}
                       {(agentActive || passivePresentUsers.length > 0) && (

package/corpus/templates/slides/app/components/onboarding/FirstDeckOnboardingFlow.tsx

@@ -9,7 +9,9 @@ import { toast } from "sonner";
 
 import {
   NewDeckReferenceStep,
+  type ImportedReference,
   type NewDeckReferenceSelection,
+  type NewDeckReferenceSource,
 } from "@/components/editor/NewDeckReferenceStep";
 import {
   uploadPromptFiles,
@@ -204,37 +206,159 @@ export function FirstDeckOnboardingFlow({
   );
 
   const handleReferenceImport = useCallback(
-    async (files: File[]) => {
+    async (files: File[]): Promise<ImportedReference | null> => {
       setReferenceImporting(true);
       try {
         const uploaded = await uploadPromptFiles(files);
         const pptxReference = uploaded.find((file) =>
           file.originalName.toLowerCase().endsWith(".pptx"),
         );
-        let referenceSelection: NewDeckReferenceSelection = {
-          designSystemId: null,
-          referenceDeckId: null,
-        };
+        const pdfReference = uploaded.find((file) =>
+          file.originalName.toLowerCase().endsWith(".pdf"),
+        );
+        let importedReference: ImportedReference | null = null;
         let generationFiles = uploaded;
         if (pptxReference) {
           const imported = (await callAction("import-pptx", {
             filePath: pptxReference.path,
-          })) as { id?: unknown };
-          if (typeof imported.id !== "string" || !imported.id) {
+          })) as {
+            id?: unknown;
+            imported?: unknown;
+            slideCount?: unknown;
+            title?: unknown;
+          };
+          if (
+            typeof imported.id !== "string" ||
+            !imported.id ||
+            imported.imported !== true ||
+            typeof imported.slideCount !== "number" ||
+            imported.slideCount < 1
+          ) {
             throw new Error("The imported presentation did not create a deck.");
           }
-          await reloadDecks();
-          rememberReference({ id: imported.id, kind: "deck" });
-          referenceSelection = {
-            designSystemId: null,
-            referenceDeckId: imported.id,
+          importedReference = {
+            id: imported.id,
+            title:
+              typeof imported.title === "string" && imported.title
+                ? imported.title
+                : t("home.importedReferenceDeck"),
+            source: "pptx",
           };
           generationFiles = uploaded.filter((file) => file !== pptxReference);
+        } else if (pdfReference) {
+          const referenceDeck = createDeck(undefined, {
+            noDefaultSlides: true,
+          });
+          const persisted = await ensureDeckPersisted(referenceDeck.id);
+          if (!persisted.persisted) {
+            deleteDeck(referenceDeck.id);
+            throw new Error(
+              describeDeckPersistenceFailure(
+                persisted,
+                "The PDF reference deck could not be saved.",
+              ),
+            );
+          }
+          try {
+            const imported = (await callAction("import-file", {
+              filePath: pdfReference.path,
+              format: "pdf",
+              deckId: referenceDeck.id,
+              importIntoDeck: true,
+            })) as {
+              imported?: unknown;
+              deckId?: unknown;
+              pageCount?: unknown;
+              title?: unknown;
+            };
+            if (
+              imported.imported !== true ||
+              imported.deckId !== referenceDeck.id ||
+              typeof imported.pageCount !== "number" ||
+              imported.pageCount < 1
+            ) {
+              throw new Error("The PDF reference deck could not be imported.");
+            }
+            importedReference = {
+              id: referenceDeck.id,
+              title:
+                typeof imported.title === "string" && imported.title
+                  ? imported.title
+                  : t("home.importedReferenceDeck"),
+              source: "pdf",
+            };
+            generationFiles = uploaded.filter((file) => file !== pdfReference);
+          } catch (error) {
+            deleteDeck(referenceDeck.id);
+            throw error;
+          }
         }
-        await startGeneration(
-          [...promptFiles, ...generationFiles],
-          referenceSelection,
-        );
+        setPromptFiles((current) => [...current, ...generationFiles]);
+        if (importedReference) {
+          await reloadDecks();
+          rememberReference({ id: importedReference.id, kind: "deck" });
+        }
+        return importedReference;
+      } catch (error) {
+        toast.error(t("editorToolbar.uploadFailed"), {
+          description:
+            error instanceof Error
+              ? error.message
+              : t("editorToolbar.importFailedDescription"),
+        });
+        return null;
+      } finally {
+        setReferenceImporting(false);
+      }
+    },
+    [
+      callAction,
+      createDeck,
+      deleteDeck,
+      ensureDeckPersisted,
+      reloadDecks,
+      rememberReference,
+      t,
+    ],
+  );
+
+  const handleReferenceSourceImport = useCallback(
+    async (
+      source: NewDeckReferenceSource,
+    ): Promise<ImportedReference | null> => {
+      if (source.kind !== "google-docs") return null;
+      setReferenceImporting(true);
+      try {
+        const imported = (await callAction("import-google-slides-reference", {
+          presentationUrl: source.value,
+        })) as {
+          id?: unknown;
+          imported?: unknown;
+          slideCount?: unknown;
+          title?: unknown;
+        };
+        if (
+          typeof imported.id !== "string" ||
+          !imported.id ||
+          imported.imported !== true ||
+          typeof imported.slideCount !== "number" ||
+          imported.slideCount < 1
+        ) {
+          throw new Error(
+            "The Google Slides presentation did not create a deck.",
+          );
+        }
+        const importedReference: ImportedReference = {
+          id: imported.id,
+          title:
+            typeof imported.title === "string" && imported.title
+              ? imported.title
+              : t("home.importedReferenceDeck"),
+          source: "google-slides",
+        };
+        await reloadDecks();
+        rememberReference({ id: importedReference.id, kind: "deck" });
+        return importedReference;
       } catch (error) {
         toast.error(t("editorToolbar.uploadFailed"), {
           description:
@@ -242,11 +366,12 @@ export function FirstDeckOnboardingFlow({
               ? error.message
               : t("editorToolbar.importFailedDescription"),
         });
+        return null;
       } finally {
         setReferenceImporting(false);
       }
     },
-    [promptFiles, reloadDecks, rememberReference, startGeneration, t],
+    [callAction, reloadDecks, rememberReference, t],
   );
 
   const handleReferenceSkip = useCallback(() => {
@@ -267,6 +392,7 @@ export function FirstDeckOnboardingFlow({
         recentReferences={recentReferences}
         onSelect={handleReferenceSelect}
         onImport={handleReferenceImport}
+        onImportSource={handleReferenceSourceImport}
         onSkip={handleReferenceSkip}
         onOpenChange={(open) => {
           if (!open) setStep("prompt");
@@ -278,7 +404,6 @@ export function FirstDeckOnboardingFlow({
         chooseDeckLabel={t("home.referenceDeckPlaceholder")}
         importingLabel={t("raw.uploading")}
         skipLabel={t("home.referenceDeckNone")}
-        defaultSuffix={t("home.defaultSuffix")}
         starredLabel={t("home.referenceDeckStarredGroup")}
         otherDecksLabel={t("home.referenceDeckOtherGroup")}
         searchDecksLabel={t("root.searchDecks")}

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

@@ -672,6 +672,12 @@ const messages = {
     chooseReferences: "Choose references",
     addDesignSystem: "+ Design system",
     importFrom: "Import from",
+    imported: "Imported",
+    importedReferenceDeck: "Imported reference deck",
+    referenceImportSuccess: "Imported successfully",
+    referenceImportSelected: '"{{title}}" is now the reference deck.',
+    continue: "Continue",
+    continueToGenerate: "Continue to generate",
     designSystem: "Design system",
     referenceDeck: "Reference deck",
     referenceDeckPlaceholder: "Match the style of an existing deck",

package/corpus/templates/slides/app/lib/generation-state.ts

@@ -2,12 +2,18 @@ export function shouldShowNewDeckGeneratingOverlay({
   generating,
   isNewDeckCreation,
   slideCount,
+  generationStarted,
 }: {
   generating: boolean;
   isNewDeckCreation: boolean;
   slideCount?: number | null;
+  generationStarted: boolean;
 }): boolean {
-  return generating && isNewDeckCreation && (slideCount ?? 0) === 0;
+  return (
+    isNewDeckCreation &&
+    (slideCount ?? 0) === 0 &&
+    (generating || !generationStarted)
+  );
 }
 
 export function shouldShowNewDeckGeneratingProgress({