@geminilight/mindos 0.6.14 → 0.6.16

package/app/components/FileTree.tsx

@@ -10,6 +10,7 @@ import {
 } from 'lucide-react';
 import { createFileAction, deleteFileAction, renameFileAction, renameSpaceAction, deleteSpaceAction, convertToSpaceAction, deleteFolderAction } from '@/lib/actions';
 import { useLocale } from '@/lib/LocaleContext';
+import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
 
 function notifyFilesChanged() {
   window.dispatchEvent(new Event('mindos:files-changed'));
@@ -124,12 +125,11 @@ const MENU_DIVIDER = "my-1 border-t border-border/50";
 
 // ─── SpaceContextMenu ─────────────────────────────────────────────────────────
 
-function SpaceContextMenu({ x, y, node, onClose, onRename, onImport }: {
-  x: number; y: number; node: FileNode; onClose: () => void; onRename: () => void; onImport?: (space: string) => void;
+function SpaceContextMenu({ x, y, node, onClose, onRename, onImport, onDelete }: {
+  x: number; y: number; node: FileNode; onClose: () => void; onRename: () => void; onImport?: (space: string) => void; onDelete: () => void;
 }) {
   const router = useRouter();
   const { t } = useLocale();
-  const [isPending, startTransition] = useTransition();
 
   return (
     <ContextMenuShell x={x} y={y} onClose={onClose}>
@@ -145,16 +145,9 @@ function SpaceContextMenu({ x, y, node, onClose, onRename, onImport }: {
         <Pencil size={14} className="shrink-0" /> {t.fileTree.renameSpace}
       </button>
       <div className={MENU_DIVIDER} />
-      <button className={MENU_DANGER} disabled={isPending} onClick={() => {
-        if (!confirm(t.fileTree.confirmDeleteSpace(node.name))) return;
-        startTransition(async () => {
-          const result = await deleteSpaceAction(node.path);
-          if (result.success) { router.push('/'); router.refresh(); notifyFilesChanged(); }
-          onClose();
-        });
-      }}>
+      <button className={MENU_DANGER} onClick={() => { onClose(); onDelete(); }}>
         <Trash2 size={14} className="shrink-0" />
-        {isPending ? <Loader2 size={14} className="animate-spin" /> : t.fileTree.deleteSpace}
+        {t.fileTree.deleteSpace}
       </button>
     </ContextMenuShell>
   );
@@ -162,8 +155,8 @@ function SpaceContextMenu({ x, y, node, onClose, onRename, onImport }: {
 
 // ─── FolderContextMenu ────────────────────────────────────────────────────────
 
-function FolderContextMenu({ x, y, node, onClose, onRename }: {
-  x: number; y: number; node: FileNode; onClose: () => void; onRename: () => void;
+function FolderContextMenu({ x, y, node, onClose, onRename, onDelete }: {
+  x: number; y: number; node: FileNode; onClose: () => void; onRename: () => void; onDelete: () => void;
 }) {
   const router = useRouter();
   const { t } = useLocale();
@@ -184,16 +177,9 @@ function FolderContextMenu({ x, y, node, onClose, onRename }: {
         <Pencil size={14} className="shrink-0" /> {t.fileTree.rename}
       </button>
       <div className={MENU_DIVIDER} />
-      <button className={MENU_DANGER} disabled={isPending} onClick={() => {
-        if (!confirm(t.fileTree.confirmDeleteFolder(node.name))) return;
-        startTransition(async () => {
-          const result = await deleteFolderAction(node.path);
-          if (result.success) { router.push('/'); router.refresh(); notifyFilesChanged(); }
-          onClose();
-        });
-      }}>
+      <button className={MENU_DANGER} onClick={() => { onClose(); onDelete(); }}>
         <Trash2 size={14} className="shrink-0" />
-        {isPending ? <Loader2 size={14} className="animate-spin" /> : t.fileTree.deleteFolder}
+        {t.fileTree.deleteFolder}
       </button>
     </ContextMenuShell>
   );
@@ -291,6 +277,8 @@ function DirectoryNode({ node, depth, currentPath, onNavigate, maxOpenDepth, onI
   const [plusPopover, setPlusPopover] = useState(false);
   const plusRef = useRef<HTMLButtonElement>(null);
   const { t } = useLocale();
+  const [deleteConfirm, setDeleteConfirm] = useState<null | 'space' | 'folder'>(null);
+  const [isPendingDelete, startDeleteTransition] = useTransition();
 
   const toggle = useCallback(() => setOpen(v => !v), []);
 
@@ -506,6 +494,7 @@ function DirectoryNode({ node, depth, currentPath, onNavigate, maxOpenDepth, onI
           onClose={() => setContextMenu(null)}
           onRename={() => startRename()}
           onImport={onImport}
+          onDelete={() => setDeleteConfirm('space')}
         />
       ) : (
         <FolderContextMenu
@@ -514,9 +503,30 @@ function DirectoryNode({ node, depth, currentPath, onNavigate, maxOpenDepth, onI
           node={node}
           onClose={() => setContextMenu(null)}
           onRename={() => startRename()}
+          onDelete={() => setDeleteConfirm('folder')}
         />
       ))}
 
+      <ConfirmDialog
+        open={deleteConfirm !== null}
+        title={deleteConfirm === 'space' ? t.fileTree.deleteSpace : t.fileTree.deleteFolder}
+        message={deleteConfirm === 'space' ? t.fileTree.confirmDeleteSpace(node.name) : t.fileTree.confirmDeleteFolder(node.name)}
+        confirmLabel={deleteConfirm === 'space' ? t.fileTree.deleteSpace : t.fileTree.deleteFolder}
+        cancelLabel="Cancel"
+        variant="destructive"
+        onCancel={() => setDeleteConfirm(null)}
+        onConfirm={() => {
+          const kind = deleteConfirm;
+          setDeleteConfirm(null);
+          startDeleteTransition(async () => {
+            const result = kind === 'space'
+              ? await deleteSpaceAction(node.path)
+              : await deleteFolderAction(node.path);
+            if (result.success) { router.push('/'); router.refresh(); notifyFilesChanged(); }
+          });
+        }}
+      />
+
       {plusPopover && plusRef.current && (() => {
         const rect = plusRef.current!.getBoundingClientRect();
         return (
@@ -546,8 +556,10 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
   const [renaming, setRenaming] = useState(false);
   const [renameValue, setRenameValue] = useState(node.name);
   const [isPending, startTransition] = useTransition();
+  const [isPendingDelete, startDeleteTransition] = useTransition();
   const renameRef = useRef<HTMLInputElement>(null);
   const { t } = useLocale();
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 
   const handleClick = useCallback(() => {
     if (renaming) return;
@@ -580,14 +592,8 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
 
   const handleDelete = useCallback((e: React.MouseEvent) => {
     e.stopPropagation();
-    if (!confirm(t.fileTree.confirmDelete(node.name))) return;
-    startTransition(async () => {
-      await deleteFileAction(node.path);
-      if (currentPath === node.path) router.push('/');
-      router.refresh();
-      notifyFilesChanged();
-    });
-  }, [node.name, node.path, currentPath, router, t]);
+    setShowDeleteConfirm(true);
+  }, []);
 
   const handleDragStart = useCallback((e: React.DragEvent) => {
     e.dataTransfer.setData('text/mindos-path', node.path);
@@ -640,9 +646,25 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
           <Pencil size={12} />
         </button>
         <button onClick={handleDelete} className="p-0.5 rounded text-muted-foreground hover:text-error hover:bg-muted transition-colors" title={t.fileTree.delete}>
-          <Trash2 size={12} />
+          {isPendingDelete ? <Loader2 size={12} className="animate-spin" /> : <Trash2 size={12} />}
         </button>
       </div>
+      <ConfirmDialog
+        open={showDeleteConfirm}
+        title={t.fileTree.delete}
+        message={t.fileTree.confirmDelete(node.name)}
+        confirmLabel={t.fileTree.delete}
+        cancelLabel="Cancel"
+        variant="destructive"
+        onCancel={() => setShowDeleteConfirm(false)}
+        onConfirm={() => {
+          setShowDeleteConfirm(false);
+          startDeleteTransition(async () => {
+            const result = await deleteFileAction(node.path);
+            if (result.success) { router.push('/'); router.refresh(); notifyFilesChanged(); }
+          });
+        }}
+      />
     </div>
   );
 }

package/app/components/HomeContent.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import Link from 'next/link';
-import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass, Folder, Puzzle, Brain, Plus, Trash2, Check, Loader2, X, FolderInput } from 'lucide-react';
+import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass, Folder, Puzzle, Brain, Plus, Trash2, Check, Loader2, X, FolderInput, Zap, History, SlidersHorizontal, ListTodo } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
 import { useState, useEffect, useMemo, useCallback } from 'react';
 import { useLocale } from '@/lib/LocaleContext';
 import { encodePath, relativeTime, extractEmoji, stripEmoji } from '@/lib/utils';
 import { getAllRenderers, getPluginRenderers } from '@/lib/renderers/registry';
 import OnboardingView from './OnboardingView';
 import GuideCard from './GuideCard';
-import CreateSpaceModal from './CreateSpaceModal';
 import { scanExampleFilesAction, cleanupExamplesAction } from '@/lib/actions';
 import type { SpaceInfo } from '@/app/page';
 
@@ -138,7 +138,7 @@ function FileRow({ filePath, mtime, formatTime, subPath }: {
   );
 }
 
-/** Reusable chip for builtin features / plugins */
+/** Compact chip for extension renderers */
 function FeatureChip({ id, icon, name, entryPath, active, inactiveTitle }: {
   id: string;
   icon: string;
@@ -164,11 +164,52 @@ function FeatureChip({ id, icon, name, entryPath, active, inactiveTitle }: {
   return <span key={id} className={cls} title={inactiveTitle}>{inner}</span>;
 }
 
+const TOOL_ICONS: Record<string, LucideIcon> = {
+  'agent-inspector': Search,
+  'config-panel': SlidersHorizontal,
+  'todo': ListTodo,
+};
+
+/** Mini-card for built-in tools — visually distinct from plugin chips */
+function ToolCard({ id, name, description, entryPath, active, inactiveTitle }: {
+  id: string;
+  name: string;
+  description: string;
+  entryPath?: string;
+  active: boolean;
+  inactiveTitle?: string;
+}) {
+  const Icon = TOOL_ICONS[id] ?? Zap;
+  const inner = (
+    <div
+      className={`flex items-start gap-3 px-3.5 py-3 rounded-xl border transition-all duration-150 ${
+        active
+          ? 'border-border hover:border-[var(--amber)]/30 hover:shadow-sm'
+          : 'border-dashed border-border/50 opacity-60'
+      }`}
+      title={active ? undefined : inactiveTitle}
+    >
+      <span className="shrink-0 mt-0.5 text-[var(--amber)]">
+        <Icon size={16} />
+      </span>
+      <div className="min-w-0 flex-1">
+        <span className="text-sm font-medium block text-foreground">{name}</span>
+        <span className="text-xs text-muted-foreground line-clamp-2 mt-0.5">{description}</span>
+      </div>
+    </div>
+  );
+
+  if (active && entryPath) {
+    return <Link key={id} href={`/view/${encodePath(entryPath)}`}>{inner}</Link>;
+  }
+  return <div key={id}>{inner}</div>;
+}
+
 const FILES_PER_GROUP = 3;
 const SPACES_PER_ROW = 6;
 const PLUGINS_INITIAL = 4;
 
-export default function HomeContent({ recent, existingFiles, spaces, dirPaths }: { recent: RecentFile[]; existingFiles?: string[]; spaces?: SpaceInfo[]; dirPaths?: string[] }) {
+export default function HomeContent({ recent, existingFiles, spaces }: { recent: RecentFile[]; existingFiles?: string[]; spaces?: SpaceInfo[] }) {
   const { t } = useLocale();
   const [showAll, setShowAll] = useState(false);
   const [showAllSpaces, setShowAllSpaces] = useState(false);
@@ -348,24 +389,25 @@ export default function HomeContent({ recent, existingFiles, spaces, dirPaths }:
             {t.home.noSpacesYet ?? 'No spaces yet. Create one to organize your knowledge.'}
           </p>
         )}
-        <CreateSpaceModal t={t} dirPaths={dirPaths ?? []} />
       </section>
 
-      {/* ── Section 2: Built-in capabilities ── */}
+      {/* ── Section 2: Tools ── */}
       {builtinFeatures.length > 0 && (
         <section className="mb-8">
-          <SectionTitle icon={<Puzzle size={13} />} count={builtinFeatures.length}>
+          <SectionTitle icon={<Zap size={13} />} count={builtinFeatures.length}>
             {t.home.builtinFeatures}
           </SectionTitle>
-          <div className="flex flex-wrap gap-2">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
             {builtinFeatures.map((r) => {
               const active = !!r.entryPath && existingSet.has(r.entryPath);
+              const toolNames = t.home.toolName as Record<string, string> | undefined;
+              const toolDescs = t.home.toolDesc as Record<string, string> | undefined;
               return (
-                <FeatureChip
+                <ToolCard
                   key={r.id}
                   id={r.id}
-                  icon={r.icon}
-                  name={r.name}
+                  name={toolNames?.[r.id] ?? r.name}
+                  description={toolDescs?.[r.id] ?? r.description}
                   entryPath={r.entryPath}
                   active={active}
                   inactiveTitle={r.entryPath ? t.home.createToActivate.replace('{file}', r.entryPath) : t.home.builtinInactive}
@@ -406,7 +448,21 @@ export default function HomeContent({ recent, existingFiles, spaces, dirPaths }:
       {/* ── Section 4: Recently Edited ── */}
       {recent.length > 0 && (
         <section className="mb-12">
-          <SectionTitle icon={<Clock size={13} />} count={recent.length}>{t.home.recentlyEdited}</SectionTitle>
+          <SectionTitle
+            icon={<Clock size={13} />}
+            count={recent.length}
+            action={
+              <Link
+                href="/changes"
+                className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 font-display"
+              >
+                <History size={12} />
+                <span>{t.home.changeHistory}</span>
+              </Link>
+            }
+          >
+            {t.home.recentlyEdited}
+          </SectionTitle>
 
           {groups.length > 0 ? (
             /* Space-Grouped View */
@@ -543,7 +599,7 @@ function CreateSpaceButton({ t }: { t: ReturnType<typeof useLocale>['t'] }) {
   return (
     <button
       onClick={() => window.dispatchEvent(new Event('mindos:create-space'))}
-      className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-medium bg-[var(--amber)] text-white transition-colors hover:opacity-90 cursor-pointer"
+      className="flex items-center gap-1.5 text-xs font-medium text-[var(--amber)] transition-colors hover:opacity-80 cursor-pointer font-display"
     >
       <Plus size={12} />
       <span>{t.home.newSpace}</span>

package/app/components/ImportModal.tsx

@@ -10,6 +10,8 @@ import { useFileImport, type ImportIntent, type ConflictMode } from '@/hooks/use
 import type { useAiOrganize } from '@/hooks/useAiOrganize';
 import { ALLOWED_IMPORT_EXTENSIONS } from '@/lib/core/file-convert';
 import type { LocalAttachment } from '@/lib/types';
+import { ConfirmDialog } from '@/components/agents/AgentsPrimitives';
+import DirPicker from './DirPicker';
 
 interface ImportModalProps {
   open: boolean;
@@ -18,21 +20,24 @@ interface ImportModalProps {
   initialFiles?: File[];
   /** Lifted AI organize hook from SidebarLayout (shared with OrganizeToast) */
   aiOrganize: ReturnType<typeof useAiOrganize>;
+  /** Flat list of directory paths for the DirPicker */
+  dirPaths: string[];
 }
 
 const ACCEPT = Array.from(ALLOWED_IMPORT_EXTENSIONS).join(',');
 
 
-export default function ImportModal({ open, onClose, defaultSpace, initialFiles, aiOrganize }: ImportModalProps) {
+export default function ImportModal({ open, onClose, defaultSpace, initialFiles, aiOrganize, dirPaths }: ImportModalProps) {
   const { t } = useLocale();
   const im = useFileImport();
   const overlayRef = useRef<HTMLDivElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [spaces, setSpaces] = useState<Array<{ name: string; path: string }>>([]);
   const [closing, setClosing] = useState(false);
   const [showSuccess, setShowSuccess] = useState(false);
   const [conflictFiles, setConflictFiles] = useState<string[]>([]);
   const [showConflictOptions, setShowConflictOptions] = useState(false);
+  const [showDiscard, setShowDiscard] = useState(false);
+  const [recommendedSpace, setRecommendedSpace] = useState('');
   const initializedRef = useRef(false);
 
   useEffect(() => {
@@ -49,19 +54,21 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
     if (initialFiles && initialFiles.length > 0) {
       im.addFiles(initialFiles);
     }
-    fetch('/api/file?op=list_spaces')
-      .then(r => r.json())
-      .then(d => { if (d.spaces) setSpaces(d.spaces); })
-      .catch(() => {});
   }, [open, defaultSpace, initialFiles, im]);
 
+  const doClose = useCallback(() => {
+    setShowDiscard(false);
+    setClosing(true);
+    setTimeout(() => { setClosing(false); onClose(); im.reset(); setConflictFiles([]); setShowConflictOptions(false); setRecommendedSpace(''); }, 150);
+  }, [im, onClose]);
+
   const handleClose = useCallback(() => {
     if (im.files.length > 0 && im.step !== 'done') {
-      if (!confirm(t.fileImport.discardMessage(im.files.length))) return;
+      setShowDiscard(true);
+      return;
     }
-    setClosing(true);
-    setTimeout(() => { setClosing(false); onClose(); im.reset(); setConflictFiles([]); setShowConflictOptions(false); }, 150);
-  }, [im, onClose, t]);
+    doClose();
+  }, [im, doClose]);
 
   useEffect(() => {
     if (!open) return;
@@ -132,6 +139,35 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [im.targetSpace]);
 
+  // V1: keyword-based space recommendation when entering archive_config
+  useEffect(() => {
+    if (im.step !== 'archive_config' || dirPaths.length === 0 || im.validFiles.length === 0) return;
+    if (defaultSpace) return;
+
+    const fileTokens = im.validFiles
+      .flatMap(f => f.name.replace(/\.[^.]+$/, '').toLowerCase().split(/[\s_\-/\\]+/))
+      .filter(w => w.length >= 2);
+
+    let bestPath = '';
+    let bestScore = 0;
+    for (const dp of dirPaths) {
+      const name = dp.split('/').pop() || dp;
+      const spaceTokens = name.toLowerCase().split(/[\s_\-/\\]+/).filter(w => w.length >= 2);
+      let score = 0;
+      for (const ft of fileTokens) {
+        for (const st of spaceTokens) {
+          if (ft.includes(st) || st.includes(ft)) score += Math.min(ft.length, st.length);
+        }
+      }
+      if (score > bestScore) { bestScore = score; bestPath = dp; }
+    }
+    if (bestPath && bestScore >= 2) {
+      im.setTargetSpace(bestPath);
+      setRecommendedSpace(bestPath);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [im.step, dirPaths.length, im.validFiles.length]);
+
 
   useEffect(() => {
     if (im.step === 'done' && im.result) {
@@ -161,6 +197,15 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
 
   return (
     <>
+      <ConfirmDialog
+        open={showDiscard}
+        title={t.fileImport.discardTitle}
+        message={t.fileImport.discardMessage(im.files.length)}
+        confirmLabel={t.fileImport.discardConfirm}
+        cancelLabel={t.fileImport.discardCancel}
+        onConfirm={doClose}
+        onCancel={() => setShowDiscard(false)}
+      />
       <div
         ref={overlayRef}
         className={`fixed inset-0 z-50 modal-backdrop flex items-center justify-center p-4 transition-opacity duration-200 ${closing ? 'opacity-0' : 'opacity-100'}`}
@@ -305,29 +350,35 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
                   ))}
                 </div>
 
-                {/* Archive config: target path preview */}
-                {isArchiveConfig && (
-                  <div className="flex flex-col gap-1 mt-2 max-h-[120px] overflow-y-auto">
-                    {im.validFiles.map((f, idx) => {
-                      const ext = f.name.split('.').pop()?.toLowerCase();
-                      const targetExt = (ext === 'txt' || ext === 'html' || ext === 'htm' || ext === 'yaml' || ext === 'yml' || ext === 'xml')
-                        ? 'md' : ext;
-                      const stem = f.name.replace(/\.[^.]+$/, '');
-                      const targetName = `${stem}.${targetExt}`;
-                      const targetPath = im.targetSpace ? `${im.targetSpace}/${targetName}` : targetName;
-                      const hasConflict = conflictFiles.includes(f.name);
-                      return (
+                {/* Archive config: target path preview — only shown when path differs from source */}
+                {isArchiveConfig && (() => {
+                  const previews = im.validFiles.map((f) => {
+                    const ext = f.name.split('.').pop()?.toLowerCase();
+                    const targetExt = (ext === 'txt' || ext === 'html' || ext === 'htm' || ext === 'yaml' || ext === 'yml' || ext === 'xml')
+                      ? 'md' : ext;
+                    const stem = f.name.replace(/\.[^.]+$/, '');
+                    const targetName = `${stem}.${targetExt}`;
+                    const targetPath = im.targetSpace ? `${im.targetSpace}/${targetName}` : targetName;
+                    const hasConflict = conflictFiles.includes(f.name);
+                    const changed = targetName !== f.name || !!im.targetSpace;
+                    return { f, targetPath, hasConflict, changed };
+                  });
+                  const anyChanged = previews.some(p => p.changed || p.hasConflict);
+                  if (!anyChanged) return null;
+                  return (
+                    <div className="flex flex-col gap-1 mt-2 max-h-[120px] overflow-y-auto">
+                      {previews.filter(p => p.changed || p.hasConflict).map((p, idx) => (
                         <div key={`preview-${idx}`} className="flex items-center gap-1.5 text-xs text-muted-foreground px-3">
-                          <span className="truncate">{f.name}</span>
+                          <span className="truncate">{p.f.name}</span>
                           <span className="text-muted-foreground/50 shrink-0">{t.fileImport.arrowTo}</span>
                           <FolderOpen size={12} className="text-muted-foreground/60 shrink-0" />
-                          <span className={`truncate ${hasConflict ? 'text-[var(--amber)]' : ''}`}>{targetPath}</span>
-                          {hasConflict && <AlertTriangle size={11} className="text-[var(--amber)] shrink-0" />}
+                          <span className={`truncate ${p.hasConflict ? 'text-[var(--amber)]' : ''}`}>{p.targetPath}</span>
+                          {p.hasConflict && <AlertTriangle size={11} className="text-[var(--amber)] shrink-0" />}
                         </div>
-                      );
-                    })}
-                  </div>
-                )}
+                      ))}
+                    </div>
+                  );
+                })()}
               </div>
             )}
 
@@ -361,16 +412,18 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
                 {/* Space selector */}
                 <div>
                   <label className="text-xs font-medium text-foreground mb-1 block">{t.fileImport.targetSpace}</label>
-                  <select
+                  <DirPicker
+                    dirPaths={dirPaths}
                     value={im.targetSpace}
-                    onChange={(e) => im.setTargetSpace(e.target.value)}
-                    className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-sm text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                  >
-                    <option value="">{t.fileImport.rootDir}</option>
-                    {spaces.map(s => (
-                      <option key={s.path} value={s.path}>{s.name}</option>
-                    ))}
-                  </select>
+                    onChange={(val) => { im.setTargetSpace(val); setRecommendedSpace(''); }}
+                    rootLabel={t.fileImport.rootDir}
+                  />
+                  {recommendedSpace && im.targetSpace === recommendedSpace && (
+                    <p className="text-2xs text-muted-foreground/70 mt-1 flex items-center gap-1">
+                      <Sparkles size={10} className="text-[var(--amber)]" />
+                      {t.fileImport.aiRecommendedHint}
+                    </p>
+                  )}
                 </div>
 
                 {/* Conflict strategy — progressive disclosure */}
@@ -404,7 +457,7 @@ export default function ImportModal({ open, onClose, defaultSpace, initialFiles,
                               value={opt.value}
                               checked={im.conflict === opt.value}
                               onChange={() => im.setConflict(opt.value)}
-                              className="accent-[var(--amber)]"
+                              className="form-radio"
                             />
                             {opt.label}
                             {opt.value === 'overwrite' && (