@agent-native/core 0.149.1 → 0.149.3

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,31 @@ 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 normalizedImportFromLabel = importFromLabel
+    ?.trim()
+    .replace(/^or\s+/i, "")
+    .toLowerCase();
+  const importFromCopy = normalizedImportFromLabel
+    ? `Or ${normalizedImportFromLabel}`
+    : "";
+  const importModeLabel =
+    importMode === "google-slides"
+      ? t("home.googleSlidesReferenceTitle")
+      : importMode === "pdf"
+        ? "PDF"
+        : "PPT";
+  const importInputRef = importMode === "pdf" ? pdfInputRef : pptxInputRef;
+
   const popover = (
     <>
       {centered && (
@@ -296,7 +339,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 +353,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/SlideContextToolbar.tsx

@@ -193,7 +193,7 @@ export function SlideContextToolbar({
   return (
     <div
       className={cn(
-        "slide-context-toolbar flex h-10 shrink-0 items-center gap-1 overflow-x-auto whitespace-nowrap border-b border-border/70 bg-muted/60 px-2 sm:px-3",
+        "slide-context-toolbar flex h-10 shrink-0 items-center gap-1 overflow-x-auto whitespace-nowrap bg-transparent px-2 sm:px-3",
         className,
       )}
       data-slide-context-toolbar="true"

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}
         >
@@ -532,6 +532,8 @@ interface SlideEditorProps {
    *  shell above the slide rail. Selection state lives here, so the toolbar is
    *  portaled out rather than lifted. Falls back to rendering in place. */
   contextToolbarSlot?: HTMLElement | null;
+  /** Wide editor-shell host for the toolbar's top-row placement. */
+  wideContextToolbarSlot?: HTMLElement | null;
   /** Selection-independent actions for the head of the contextual toolbar. */
   contextToolbarLeading?: ReactNode;
   onGenerateImage: () => void;
@@ -564,8 +566,6 @@ interface SlideEditorProps {
   onComment?: (quotedText: string) => void;
   /** Zero-based index of the current slide */
   slideIndex?: number;
-  /** Total number of slides in the deck */
-  slideCount?: number;
   /** Design system to inject as CSS custom properties on the slide */
   designSystem?: DesignSystemData;
   /** Deck aspect ratio (defaults to 16:9 when omitted) */
@@ -647,12 +647,17 @@ function SameSlidePresenceIndicator({ users }: { users: CollabUser[] }) {
   if (users.length === 0) return null;
   const visible = users.slice(0, 3);
   const overflow = users.length - visible.length;
+  const agentIsPresent = users.some(
+    (user) => user.email.trim().toLowerCase() === "agent@system",
+  );
   const label =
-    users.length === 1
-      ? `${users[0].name} is here`
-      : `${users.length} others here`;
+    agentIsPresent && users.length === 1
+      ? "AI editing"
+      : users.length === 1
+        ? `${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} />
@@ -993,6 +998,7 @@ export default function SlideEditor({
   onUpdateSlide,
   readOnly = false,
   contextToolbarSlot,
+  wideContextToolbarSlot,
   contextToolbarLeading,
   onGenerateImage,
   onOpenAssetLibrary,
@@ -1004,7 +1010,6 @@ export default function SlideEditor({
   onToggleObjectFit,
   agentActive,
   slideIndex = 0,
-  slideCount = 1,
   designSystem,
   aspectRatio,
   drawMode,
@@ -4198,6 +4203,27 @@ export default function SlideEditor({
       // the button's onClick runs, so partial-text formatting would silently
       // apply to the whole object.
       data-slide-inline-edit-surface="true"
+      data-slide-context-toolbar-placement="row"
+      onPointerDownCapture={preserveRichTextSelection}
+    >
+      <SlideContextToolbar
+        snapshot={selectedStyleSnapshot}
+        background={slide.background}
+        designSystem={designSystem}
+        leading={contextToolbarLeading}
+        onChange={applySelectedStylePatch}
+        onBackgroundChange={applySlideBackground}
+        onArrange={handleArrangeSelected}
+        onToggleList={handleToggleList}
+      />
+    </div>
+  ) : null;
+
+  const wideContextToolbar = !readOnly ? (
+    <div
+      className="shrink-0"
+      data-slide-inline-edit-surface="true"
+      data-slide-context-toolbar-placement="top"
       onPointerDownCapture={preserveRichTextSelection}
     >
       <SlideContextToolbar
@@ -4209,15 +4235,19 @@ export default function SlideEditor({
         onBackgroundChange={applySlideBackground}
         onArrange={handleArrangeSelected}
         onToggleList={handleToggleList}
+        className="slide-context-toolbar--top-row"
       />
     </div>
   ) : null;
 
   return (
     <div
-      className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden"
+      className="relative flex h-full min-h-0 flex-1 flex-col overflow-hidden rounded-l-lg bg-[var(--slides-editor-surface)]"
       data-slide-element-selected={slideElementSelected ? "true" : undefined}
     >
+      {!readOnly && wideContextToolbarSlot
+        ? createPortal(wideContextToolbar, wideContextToolbarSlot)
+        : null}
       {contextToolbarSlot
         ? createPortal(contextToolbar, contextToolbarSlot)
         : contextToolbar}
@@ -4225,7 +4255,7 @@ export default function SlideEditor({
       <div className="flex min-h-0 flex-1 overflow-hidden">
         <div className="min-w-0 flex-1 overflow-hidden">
           {slide.excalidrawData ? (
-            <div className="relative h-full bg-background">
+            <div className="relative h-full bg-[var(--slides-editor-surface)]">
               {!readOnly && (
                 <ExcalidrawExitButton
                   // JSON.stringify drops `undefined` properties before the patch
@@ -4245,8 +4275,8 @@ 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="relative h-full bg-[var(--slides-editor-surface)]">
+              <div className="absolute right-3 top-3 z-20 flex h-8 items-center gap-0.5 rounded-md bg-popover/95 px-1">
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button
@@ -4385,8 +4415,6 @@ export default function SlideEditor({
       <SpeakerNotesPanel
         notes={slide.notes}
         onChange={(notes) => onUpdateSlide({ notes })}
-        slideIndex={slideIndex}
-        slideCount={slideCount}
         readOnly={readOnly}
       />
 

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

@@ -5,8 +5,6 @@ import { useState, type PointerEvent as ReactPointerEvent } from "react";
 interface SpeakerNotesPanelProps {
   notes: string;
   onChange: (notes: string) => void;
-  slideIndex: number;
-  slideCount: number;
   readOnly?: boolean;
 }
 
@@ -21,16 +19,15 @@ function clampNotesHeight(value: number) {
 export function SpeakerNotesPanel({
   notes,
   onChange,
-  slideIndex,
-  slideCount,
   readOnly = false,
 }: SpeakerNotesPanelProps) {
   const t = useT();
   const [expanded, setExpanded] = useState(() => {
     try {
-      return localStorage.getItem("speaker-notes-expanded") !== "false";
+      return localStorage.getItem("speaker-notes-expanded") === "true";
     } catch {
-      return true;
+      // coercion-ok: browser storage is optional; the collapsed state is the default.
+      return false;
     }
   });
   const [height, setHeight] = useState(() => {
@@ -74,7 +71,7 @@ export function SpeakerNotesPanel({
   };
 
   return (
-    <div className="flex-shrink-0 border-t border-border bg-background">
+    <div className="flex-shrink-0 bg-[var(--slides-editor-surface)]">
       {expanded && (
         <div
           role="separator"
@@ -83,7 +80,7 @@ export function SpeakerNotesPanel({
           className="group flex h-2 cursor-row-resize items-center justify-center"
           onPointerDown={startResize}
         >
-          <div className="h-px w-10 rounded-full bg-border transition-colors group-hover:bg-muted-foreground/70" />
+          <div className="h-px w-10 rounded-full bg-muted-foreground/30 transition-colors group-hover:bg-muted-foreground/70" />
         </div>
       )}
       <button
@@ -91,10 +88,7 @@ export function SpeakerNotesPanel({
         className="flex w-full cursor-pointer items-center justify-between px-4 py-1.5"
       >
         <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">
-          {t("raw.speakerNotesForSlide", {
-            index: slideIndex + 1,
-            count: slideCount,
-          })}
+          {t("raw.speakerNotes")}
         </span>
         {expanded ? (
           <IconChevronDown className="w-3 h-3 text-muted-foreground" />