@agent-native/core 0.148.1 → 0.149.1

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

@@ -17,12 +17,6 @@ import {
 import { CSS } from "@dnd-kit/utilities";
 import { appStateKeyForBrowserTab } from "@shared/app-state-tabs";
 import { hashSlideContent, type DeckFitState } from "@shared/slide-fit";
-import {
-  IconGripVertical,
-  IconCopy,
-  IconTrash,
-  IconLoader2,
-} from "@tabler/icons-react";
 import { useRef, useEffect } from "react";
 import { useCallback } from "react";
 
@@ -35,7 +29,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import type { Slide } from "@/context/DeckContext";
-import type { AspectRatio } from "@/lib/aspect-ratios";
+import { getAspectRatioDims, type AspectRatio } from "@/lib/aspect-ratios";
 import { TAB_ID } from "@/lib/tab-id";
 
 import type { DesignSystemData } from "../../../shared/api";
@@ -45,8 +39,6 @@ interface EditorSidebarProps {
   activeSlideId: string;
   deckId: string;
   onSelectSlide: (id: string) => void;
-  onDuplicateSlide: (id: string) => void;
-  onDeleteSlide: (id: string) => void;
   /** Viewer-role decks get thumbnails only: no add, duplicate, or delete. */
   readOnly?: boolean;
   /** Presence map: slideId → list of users currently viewing that slide */
@@ -140,21 +132,11 @@ function PresenceAvatarTip({
   );
 }
 
-// Thumbnail overlays sit on top of rendered slide artwork, which is arbitrary
-// user content rather than a themed app surface, so they use a fixed scrim.
-const THUMB_OVERLAY_CLASS =
-  // guard:allow-raw-color — matches the duplicate/delete overlays below.
-  "absolute top-2 left-7 rounded bg-black/60 p-1 backdrop-blur-sm border border-white/10 cursor-grab active:cursor-grabbing sm:opacity-0 sm:group-hover:opacity-100";
-// guard:allow-raw-color — same fixed scrim as the class above.
-const THUMB_OVERLAY_ICON_CLASS = "w-3 h-3 text-white/60";
-
 function SortableSlideThumb({
   slide,
   index,
   isActive,
   onSelect,
-  onDuplicate,
-  onDelete,
   registerButtonRef,
   presenceUsers = [],
   aspectRatio,
@@ -166,8 +148,6 @@ function SortableSlideThumb({
   index: number;
   isActive: boolean;
   onSelect: () => void;
-  onDuplicate: () => void;
-  onDelete: () => void;
   readOnly?: boolean;
   registerButtonRef: (slideId: string, node: HTMLButtonElement | null) => void;
   presenceUsers?: CollabUser[];
@@ -194,18 +174,25 @@ function SortableSlideThumb({
     opacity: isDragging ? 0.5 : 1,
   };
 
+  const thumbDims = getAspectRatioDims(aspectRatio);
+
   return (
-    <div ref={setNodeRef} style={style} className="group relative">
+    <div ref={setNodeRef} style={style}>
       <button
         ref={(node) => registerButtonRef(slide.id, node)}
+        type="button"
+        {...(readOnly ? {} : attributes)}
+        {...(readOnly ? {} : listeners)}
         onClick={onSelect}
         onFocus={onSelect}
         aria-label={t("editorSidebar.selectSlide", { number: index + 1 })}
         aria-current={isActive ? "true" : undefined}
         data-slide-thumbnail-id={slide.id}
         className={`w-full text-left flex items-start gap-1.5 p-1.5 rounded-lg transition-[background-color,box-shadow] duration-150 ${
-          isActive ? "bg-accent ring-1 ring-[#609FF8]/50" : "hover:bg-accent"
-        } focus:outline-none`}
+          isActive ? "bg-accent ring-1 ring-primary/50" : ""
+        } ${
+          readOnly ? "" : "cursor-grab active:cursor-grabbing"
+        } focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1`}
       >
         {/* Index and slide presence share the fixed rail so presence does not resize the row. */}
         <div className="relative flex-shrink-0 w-4 self-stretch">
@@ -228,6 +215,11 @@ function SortableSlideThumb({
 
         {/* Thumbnail */}
         <div className="flex-1 min-w-0">
+          {/* Each thumbnail paints a full-resolution slide canvas scaled down by
+           * transform, so a long rail keeps dozens of large layers live and the
+           * browser drops frames or paints stale tiles. `content-visibility`
+           * lets it skip everything below the fold; `aspect-ratio` keeps the row
+           * the right height while its contents are skipped. */}
           <div
             className="w-full overflow-hidden rounded border"
             style={{
@@ -235,6 +227,8 @@ function SortableSlideThumb({
                 presenceUsers.length > 0
                   ? presenceUsers[0].color + "66"
                   : "rgba(255,255,255,0.06)",
+              aspectRatio: `${thumbDims.width} / ${thumbDims.height}`,
+              contentVisibility: "auto",
             }}
           >
             <SlideRenderer
@@ -246,50 +240,6 @@ function SortableSlideThumb({
           </div>
         </div>
       </button>
-
-      {/* Drag handle — overlaid on the thumbnail instead of holding its own
-       * column, so the rail stays narrow. Mirrors the action buttons opposite. */}
-      {!readOnly && (
-        <div {...attributes} {...listeners} className={THUMB_OVERLAY_CLASS}>
-          <IconGripVertical className={THUMB_OVERLAY_ICON_CLASS} />
-        </div>
-      )}
-
-      {/* Actions - always visible on touch devices */}
-      {!readOnly && (
-        <div className="absolute top-2 right-2 flex gap-0.5 sm:opacity-0 sm:group-hover:opacity-100">
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDuplicate();
-                }}
-                className="p-1.5 rounded bg-black/60 backdrop-blur-sm border border-white/10 hover:bg-black/80"
-                aria-label={t("editorSidebar.duplicateSlide")}
-              >
-                <IconCopy className="w-3 h-3 text-white/60" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>{t("editorSidebar.duplicate")}</TooltipContent>
-          </Tooltip>
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete();
-                }}
-                className="p-1.5 rounded bg-black/60 backdrop-blur-sm border border-white/10 hover:bg-red-900/80"
-                aria-label={t("editorSidebar.deleteSlide")}
-              >
-                <IconTrash className="w-3 h-3 text-white/60" />
-              </button>
-            </TooltipTrigger>
-            <TooltipContent>{t("editorSidebar.delete")}</TooltipContent>
-          </Tooltip>
-        </div>
-      )}
     </div>
   );
 }
@@ -313,14 +263,14 @@ function GeneratingSlideSkeleton({
   return (
     <button
       type="button"
-      className={`group relative block w-full rounded-lg text-left transition-colors ${
-        selected ? "bg-accent ring-1 ring-ring" : "hover:bg-accent/50"
+      className={`relative block w-full rounded-lg text-left transition-[box-shadow] ${
+        selected ? "ring-1 ring-primary" : ""
       }`}
       aria-label={t("editorSidebar.generatingSlide")}
       aria-current={selected ? "true" : undefined}
       onClick={onSelect}
     >
-      <div className="w-full flex items-start gap-1.5 p-1.5 rounded-lg bg-accent/30">
+      <div className="flex w-full items-start gap-1.5 rounded-lg p-1.5">
         <span className="flex-shrink-0 w-4 text-center text-[10px] font-medium leading-5 text-muted-foreground/70">
           {index + 1}
         </span>
@@ -342,8 +292,6 @@ export default function EditorSidebar({
   activeSlideId,
   deckId,
   onSelectSlide,
-  onDuplicateSlide,
-  onDeleteSlide,
   readOnly = false,
   slidePresence,
   recentEdits,
@@ -513,8 +461,6 @@ export default function EditorSidebar({
               index={index}
               isActive={slide.id === activeSlideId}
               onSelect={() => onSelectSlide(slide.id)}
-              onDuplicate={() => onDuplicateSlide(slide.id)}
-              onDelete={() => onDeleteSlide(slide.id)}
               readOnly={readOnly}
               registerButtonRef={registerSlideButton}
               presenceUsers={slidePresence?.get(slide.id) ?? []}
@@ -543,6 +489,7 @@ export default function EditorSidebar({
             edits={recentEdits}
             resolveRect={resolveThumbRect}
             containerRef={thumbScrollRef}
+            outlineOnly
           />
         )}
       </div>

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

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

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

@@ -47,7 +47,7 @@ export default function GeneratingSlidePreview({
   return (
     <div
       className={cn(
-        "relative w-full overflow-hidden rounded-lg border border-border/60 bg-muted/20",
+        "relative w-full overflow-hidden rounded-lg border border-primary/70",
         className,
       )}
       style={{ aspectRatio: cssRatio }}
@@ -65,6 +65,10 @@ export default function GeneratingSlidePreview({
       ) : (
         <SlideLoadingArtwork />
       )}
+      <div className="pointer-events-none absolute left-2 top-2 inline-flex items-center gap-1.5 rounded-full border border-primary/70 px-2 py-1 text-[11px] font-medium text-primary">
+        <span className="size-1.5 rounded-full bg-primary" aria-hidden="true" />
+        {t("raw.aiEditing")}
+      </div>
       <div className="absolute right-2 top-2 rounded-full bg-background/80 p-1.5 text-muted-foreground shadow-sm backdrop-blur">
         <IconLoader2 className="size-3.5 animate-spin" aria-hidden="true" />
       </div>

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

@@ -13,6 +13,7 @@ import { Button } from "../ui/button";
 interface GoogleDocsStatus {
   configured: boolean;
   connected: boolean;
+  googleSlidesUrlImportReady?: boolean;
   error?: string;
   message?: string;
 }
@@ -97,6 +98,12 @@ export function GoogleDriveConnectionCta({
     void refreshStatus();
   }, [refreshStatus]);
 
+  const needsReconnect =
+    status?.connected === true && status.googleSlidesUrlImportReady === false;
+  const requiresUrlImportAccess =
+    status?.connected === true ||
+    status?.googleSlidesUrlImportReady !== undefined;
+
   const connect = useCallback(async () => {
     if (connecting) return;
     setConnecting(true);
@@ -138,23 +145,27 @@ export function GoogleDriveConnectionCta({
       while (Date.now() < deadline && !popup.closed) {
         await new Promise((resolve) => window.setTimeout(resolve, 1_200));
         const next = await refreshStatus();
-        if (next?.connected) {
+        const nextHasUrlImportAccess =
+          next?.googleSlidesUrlImportReady ?? !requiresUrlImportAccess;
+        if (next?.connected && nextHasUrlImportAccess) {
           popup.close();
           onConnected?.();
           return;
         }
       }
       const next = await refreshStatus();
-      if (next?.connected) onConnected?.();
+      const nextHasUrlImportAccess =
+        next?.googleSlidesUrlImportReady ?? !requiresUrlImportAccess;
+      if (next?.connected && nextHasUrlImportAccess) onConnected?.();
     } catch (caught) {
       popup?.close();
       setError(caught instanceof Error ? caught.message : String(caught));
     } finally {
       setConnecting(false);
     }
-  }, [connecting, onConnected, refreshStatus]);
+  }, [connecting, onConnected, refreshStatus, requiresUrlImportAccess]);
 
-  if (loading || status?.connected) return null;
+  if (loading || (status?.connected && !needsReconnect)) return null;
 
   const displayStatus = status ?? { configured: false, connected: false };
 

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>
   );