@agent-native/core 0.149.1 → 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

@@ -150,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}
         >
@@ -652,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} />
@@ -4246,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

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">

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

@@ -12,13 +12,12 @@ import { useSidebarCollapsed } from "@/hooks/use-sidebar-collapsed";
 import { TAB_ID } from "@/lib/tab-id";
 import { cn } from "@/lib/utils";
 
-import { GoogleDriveConnectionCta } from "../editor/GoogleDriveConnectionCta";
 import { AgentWorkIndicator } from "./AgentWorkIndicator";
 import { Header } from "./Header";
 import {
-  getDeckChatScopeLabel,
   getEffectiveSlidesSidebarCollapsed,
   isSlidesEditorRoute,
+  shouldShowSlidesAppSidebar,
 } from "./layout-route-policy";
 import { Sidebar } from "./Sidebar";
 
@@ -50,26 +49,24 @@ export function Layout({ children }: LayoutProps) {
     useState<EditorSidebarOverride | null>(null);
   const { collapsed: sidebarCollapsed, setCollapsed: setSidebarCollapsed } =
     useSidebarCollapsed();
-  const { decks, getDeck, loading: decksLoading } = useDecks();
+  const { decks, loading: decksLoading } = useDecks();
   const isEmptyDecksState =
     location.pathname === "/" && !decksLoading && decks.length === 0;
 
   // Scope new chats to the deck the user is currently editing. The route
   // is `/deck/:id`; everywhere else (list, presentation) leaves
-  // scope null so chats stay in the general pool. Falling back to the
-  // raw deck id keeps the chat bound even before the deck object has
-  // streamed in — once the title arrives the badge updates in place.
+  // scope null so chats stay in the general pool. Keep the visible label
+  // semantic so an imported deck id never leaks into the composer chip.
   const deckScope = useMemo(() => {
     const match = location.pathname.match(/^\/deck\/([^/]+)/);
     const deckId = match?.[1];
     if (!deckId) return null;
-    const deck = getDeck(deckId);
     return {
       type: "deck" as const,
       id: deckId,
-      label: getDeckChatScopeLabel(deck?.title, t("agent.thisDeck")),
+      label: t("agent.thisDeck"),
     };
-  }, [location.pathname, getDeck, t]);
+  }, [location.pathname, t]);
 
   useEffect(() => {
     setSidebarOpen(false);
@@ -84,6 +81,7 @@ export function Layout({ children }: LayoutProps) {
   }, []);
 
   const ownToolbar = pageHasOwnToolbar(location.pathname);
+  const showAppSidebar = shouldShowSlidesAppSidebar(location.pathname);
   const editorSidebarOverrideForLocation =
     editorSidebarOverride?.locationKey === location.key
       ? editorSidebarOverride.collapsed
@@ -120,35 +118,36 @@ export function Layout({ children }: LayoutProps) {
         agentPageHref="/settings/agent"
         suppressFirstRunOnboarding={isSlidesEditorRoute(location.pathname)}
         composerSlot={<CreativeContextComposerChip />}
-        threadFooterSlot={<GoogleDriveConnectionCta />}
       >
         <div className="agent-layout-shell flex h-screen w-full overflow-hidden bg-background text-foreground">
-          {sidebarOpen && (
-            <div
-              className="fixed inset-0 z-40 bg-black/50 md:hidden"
-              onClick={() => setSidebarOpen(false)}
-            />
-          )}
-          {!isEmptyDecksState && (
-            <div
-              className={cn(
-                "agent-layout-left-drawer fixed inset-y-0 start-0 z-50 transition-transform duration-200 ease-out md:static md:z-auto md:transition-none",
-                sidebarOpen
-                  ? "translate-x-0"
-                  : "-translate-x-full rtl:translate-x-full md:translate-x-0 md:rtl:translate-x-0",
+          {!isEmptyDecksState && showAppSidebar && (
+            <>
+              {sidebarOpen && (
+                <div
+                  className="fixed inset-0 z-40 bg-foreground/50 md:hidden"
+                  onClick={() => setSidebarOpen(false)}
+                />
               )}
-            >
-              <Sidebar
-                collapsed={effectiveSidebarCollapsed && !sidebarOpen}
-                // In the mobile drawer the sidebar is forced expanded, so the
-                // desktop collapse toggle would be a silent no-op (worse: it'd
-                // mutate the desktop preference). Hide it while the drawer is
-                // open.
-                onToggleCollapsed={
-                  sidebarOpen ? undefined : toggleSidebarCollapsed
-                }
-              />
-            </div>
+              <div
+                className={cn(
+                  "agent-layout-left-drawer fixed inset-y-0 start-0 z-50 transition-transform duration-200 ease-out md:static md:z-auto md:transition-none",
+                  sidebarOpen
+                    ? "translate-x-0"
+                    : "-translate-x-full rtl:translate-x-full md:translate-x-0 md:rtl:translate-x-0",
+                )}
+              >
+                <Sidebar
+                  collapsed={effectiveSidebarCollapsed && !sidebarOpen}
+                  // In the mobile drawer the sidebar is forced expanded, so the
+                  // desktop collapse toggle would be a silent no-op (worse: it'd
+                  // mutate the desktop preference). Hide it while the drawer is
+                  // open.
+                  onToggleCollapsed={
+                    sidebarOpen ? undefined : toggleSidebarCollapsed
+                  }
+                />
+              </div>
+            </>
           )}
           <div className="agent-layout-main-surface flex h-full min-w-0 flex-1 flex-col overflow-hidden">
             {/* Mobile-only nav strip with hamburger — only when there's no page toolbar */}

package/corpus/templates/slides/app/components/layout/layout-route-policy.ts

@@ -2,11 +2,8 @@ export function isSlidesEditorRoute(pathname: string): boolean {
   return /^\/deck\/[^/]+\/?$/.test(pathname);
 }
 
-export function getDeckChatScopeLabel(
-  deckTitle: string | undefined,
-  untitledDeckLabel: string,
-): string {
-  return deckTitle === "Untitled Deck" ? untitledDeckLabel : deckTitle || "";
+export function shouldShowSlidesAppSidebar(pathname: string): boolean {
+  return !isSlidesEditorRoute(pathname);
 }
 
 export function getEffectiveSlidesSidebarCollapsed({