@geminilight/mindos 0.5.70 → 0.6.0

package/app/components/GuideCard.tsx

@@ -1,37 +1,21 @@
 'use client';
 
 import { useState, useEffect, useCallback, useRef } from 'react';
-import { X, Sparkles, FolderOpen, MessageCircle, RefreshCw, Check, ChevronRight } from 'lucide-react';
+import { X, Sparkles, Upload, MessageCircle, ExternalLink, Check, ChevronRight, Copy } from 'lucide-react';
 import Link from 'next/link';
 import { useLocale } from '@/lib/LocaleContext';
 import { openAskModal } from '@/hooks/useAskModal';
-import { extractEmoji, stripEmoji } from '@/lib/utils';
 import { walkthroughSteps } from './walkthrough/steps';
 import type { GuideState } from '@/lib/settings';
-import type { SpaceInfo } from '@/app/page';
-
-interface RecentFile {
-  path: string;
-  mtime: number;
-}
-
-interface GuideCardProps {
-  /** Called when user clicks a file/dir to open it in FileView */
-  onNavigate?: (path: string) => void;
-  /** Existing spaces for dynamic directory listing */
-  spaces?: SpaceInfo[];
-  /** Recent files for empty-template fallback */
-  recentFiles?: RecentFile[];
-}
-
-export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }: GuideCardProps) {
+export default function GuideCard() {
   const { t } = useLocale();
   const g = t.guide;
 
   const [guideState, setGuideState] = useState<GuideState | null>(null);
-  const [expanded, setExpanded] = useState<'kb' | 'ai' | 'sync' | null>(null);
+  const [expanded, setExpanded] = useState<'import' | 'ai' | 'agent' | null>(null);
   const [isFirstVisit, setIsFirstVisit] = useState(false);
-  const [browsedCount, setBrowsedCount] = useState(0);
+  const [copied, setCopied] = useState(false);
+  const [step3Done, setStep3Done] = useState(false);
 
   // Fetch guide state from backend
   const fetchGuideState = useCallback(() => {
@@ -41,7 +25,6 @@ export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }:
         const gs = data.guideState;
         if (gs?.active && !gs.dismissed) {
           setGuideState(gs);
-          if (gs.step1Done) setBrowsedCount(1);
         } else {
           setGuideState(null);
         }
@@ -65,12 +48,6 @@ export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }:
     };
   }, [fetchGuideState]);
 
-  useEffect(() => {
-    if (isFirstVisit && guideState && !guideState.step1Done) {
-      setExpanded('kb');
-    }
-  }, [isFirstVisit, guideState]);
-
   const patchGuide = useCallback((patch: Partial<GuideState>) => {
     setGuideState(prev => prev ? { ...prev, ...patch } : prev);
     fetch('/api/setup', {
@@ -85,21 +62,27 @@ export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }:
     setGuideState(null);
   }, [patchGuide]);
 
-  const handleFileOpen = useCallback((path: string) => {
-    onNavigate?.(path);
-    if (browsedCount === 0) {
-      setBrowsedCount(1);
-      patchGuide({ step1Done: true });
-      setTimeout(() => setExpanded(null), 300);
-    }
-  }, [browsedCount, patchGuide, onNavigate]);
+  // ── Step 1: Import ──
+
+  const handleImportClick = useCallback(() => {
+    window.dispatchEvent(new CustomEvent('mindos:open-import'));
+  }, []);
 
-  const handleSkipKB = useCallback(() => {
-    setBrowsedCount(1);
+  const handleSkipImport = useCallback(() => {
     patchGuide({ step1Done: true });
     setExpanded(null);
   }, [patchGuide]);
 
+  // Auto-mark step 1 done when files change (import completes, space created, etc.)
+  useEffect(() => {
+    if (!guideState || guideState.step1Done) return;
+    const handler = () => patchGuide({ step1Done: true });
+    window.addEventListener('mindos:files-changed', handler);
+    return () => window.removeEventListener('mindos:files-changed', handler);
+  }, [guideState, guideState?.step1Done, patchGuide]);
+
+  // ── Step 2: AI verify ──
+
   const handleStartAI = useCallback(() => {
     const gs = guideState;
     const isEmpty = gs?.template === 'empty';
@@ -107,6 +90,26 @@ export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }:
     openAskModal(prompt, 'guide');
   }, [guideState, g]);
 
+  // ── Step 3: Cross-agent copy ──
+
+  const handleCopyPrompt = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(g.agent.copyPrompt);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      // Fallback: no clipboard API
+    }
+  }, [g]);
+
+  const handleStep3Done = useCallback(() => {
+    setStep3Done(true);
+    setExpanded(null);
+    patchGuide({ nextStepIndex: 0 });
+  }, [patchGuide]);
+
+  // ── Next-step prompts ──
+
   const handleNextStepClick = useCallback(() => {
     if (!guideState) return;
     const idx = guideState.nextStepIndex;
@@ -117,25 +120,47 @@ export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }:
     }
   }, [guideState, g, patchGuide]);
 
-  const handleSyncClick = useCallback(() => {
-    // Open settings directly to the Sync tab (SidebarLayout listens for this event)
-    window.dispatchEvent(new CustomEvent('mindos:open-settings', { detail: { tab: 'sync' } }));
-  }, []);
+  // ── Auto-expand on step transitions ──
 
-  // Auto-dismiss final state after 8 seconds
-  const autoDismissRef = useRef<ReturnType<typeof setTimeout>>(null);
-  const step1Done_ = guideState?.step1Done;
-  const step2Done_ = guideState?.askedAI;
-  const nextIdx_ = guideState?.nextStepIndex ?? 0;
-  const allDone_ = step1Done_ && step2Done_;
-  const allNextDone_ = allDone_ && nextIdx_ >= g.done.steps.length;
+  // First visit: expand step 1
+  useEffect(() => {
+    if (isFirstVisit && guideState && !guideState.step1Done) {
+      setExpanded('import');
+    }
+  }, [isFirstVisit, guideState]);
 
+  // Step transition: auto-expand next step
+  const prevStepRef = useRef({ s1: false, s2: false });
   useEffect(() => {
-    if (allNextDone_) {
+    if (!guideState) return;
+    const prev = prevStepRef.current;
+    if (guideState.step1Done && !prev.s1) {
+      setExpanded('ai');
+      prev.s1 = true;
+    }
+    if (guideState.askedAI && !prev.s2) {
+      setExpanded('agent');
+      prev.s2 = true;
+    }
+  }, [guideState?.step1Done, guideState?.askedAI, guideState]);
+
+  // ── Auto-dismiss final state ──
+
+  const step1Done = guideState?.step1Done ?? false;
+  const step2Done = guideState?.askedAI ?? false;
+  const nextIdx = guideState?.nextStepIndex ?? 0;
+  const allCoreDone = step1Done && step2Done && step3Done;
+  const allNextDone = allCoreDone && nextIdx >= g.done.steps.length;
+
+  const autoDismissRef = useRef<ReturnType<typeof setTimeout>>(null);
+  useEffect(() => {
+    if (allNextDone) {
       autoDismissRef.current = setTimeout(() => handleDismiss(), 8000);
     }
     return () => { if (autoDismissRef.current) clearTimeout(autoDismissRef.current); };
-  }, [allNextDone_, handleDismiss]);
+  }, [allNextDone, handleDismiss]);
+
+  // ── Render guards ──
 
   if (!guideState) return null;
 
@@ -145,21 +170,18 @@ export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }:
     && !guideState.walkthroughDismissed;
   if (walkthroughActive) return null;
 
-  const step1Done = guideState.step1Done;
-  const step2Done = guideState.askedAI;
-  const allDone = step1Done && step2Done;
-  const nextIdx = guideState.nextStepIndex;
-  const nextSteps = g.done.steps;
-  const allNextDone = nextIdx >= nextSteps.length;
-  const isEmptyTemplate = guideState.template === 'empty';
+  // If both steps 1+2 were already done on load (e.g. page refresh), step3Done is local
+  // and starts false — this lets the user see step 3 again, which is useful.
+  const showStep3 = step1Done && step2Done && !step3Done;
 
-  // After all next-steps done → final state (auto-dismisses after 8s)
-  if (allDone && allNextDone) {
+  // ── Final state: all next-steps done ──
+
+  if (allCoreDone && allNextDone) {
     return (
       <div className="mb-6 rounded-xl border border-[var(--amber)] px-5 py-4 flex items-center gap-3 animate-in fade-in duration-300 bg-[var(--amber-subtle)]">
         <Sparkles size={16} className="animate-spin-slow text-[var(--amber)]" />
         <span className="text-sm font-semibold flex-1 text-foreground">
-          ✨ {g.done.titleFinal}
+          {g.done.titleFinal}
         </span>
         <Link
           href="/explore"
@@ -174,15 +196,16 @@ export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }:
     );
   }
 
-  // Collapsed done state with next-step prompts
-  if (allDone) {
-    const step = nextSteps[nextIdx];
+  // ── Done state: next-step prompts ──
+
+  if (allCoreDone) {
+    const step = g.done.steps[nextIdx];
     return (
       <div className="mb-6 rounded-xl border border-[var(--amber)] px-5 py-4 animate-in fade-in duration-300 bg-[var(--amber-subtle)]">
         <div className="flex items-center gap-3">
           <Sparkles size={16} className="text-[var(--amber)]" />
           <span className="text-sm font-semibold flex-1 text-foreground">
-            🎉 {g.done.title}
+            {g.done.title}
           </span>
           <button onClick={handleDismiss} className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground">
             <X size={14} />
@@ -201,7 +224,8 @@ export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }:
     );
   }
 
-  // Main guide card with 3 tasks
+  // ── Main guide card with 3 steps ──
+
   return (
     <div className="mb-6 rounded-xl border border-[var(--amber)] overflow-hidden bg-[var(--amber-subtle)]">
 
@@ -218,65 +242,114 @@ export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }:
 
       {/* Task cards */}
       <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 px-5 py-3">
-        <TaskCard icon={<FolderOpen size={16} />} title={g.kb.title} cta={g.kb.cta} done={step1Done} active={expanded === 'kb'} onClick={() => step1Done ? null : setExpanded(expanded === 'kb' ? null : 'kb')} />
-        <TaskCard icon={<MessageCircle size={16} />} title={g.ai.title} cta={g.ai.cta} done={step2Done} active={expanded === 'ai'} onClick={() => { if (!step2Done) handleStartAI(); }} />
-        <TaskCard icon={<RefreshCw size={16} />} title={g.sync.title} cta={g.sync.cta} done={false} optional={g.sync.optional} active={false} onClick={handleSyncClick} />
+        <TaskCard
+          icon={<Upload size={16} />}
+          title={g.import.title}
+          cta={g.import.cta}
+          done={step1Done}
+          active={expanded === 'import'}
+          onClick={() => !step1Done ? setExpanded(expanded === 'import' ? null : 'import') : null}
+        />
+        <TaskCard
+          icon={<MessageCircle size={16} />}
+          title={g.ai.title}
+          cta={g.ai.cta}
+          done={step2Done}
+          active={expanded === 'ai'}
+          dimmed={!step1Done}
+          onClick={() => {
+            if (step2Done || !step1Done) return;
+            setExpanded(expanded === 'ai' ? null : 'ai');
+          }}
+        />
+        <TaskCard
+          icon={<ExternalLink size={16} />}
+          title={g.agent.title}
+          cta={g.agent.cta}
+          done={step3Done}
+          active={expanded === 'agent'}
+          dimmed={!step1Done || !step2Done}
+          onClick={() => {
+            if (!step1Done || !step2Done) return;
+            setExpanded(expanded === 'agent' ? null : 'agent');
+          }}
+        />
       </div>
 
-      {/* Expanded content: Explore KB */}
-      {expanded === 'kb' && !step1Done && (
+      {/* ── Step 1 expanded: Import files ── */}
+      {expanded === 'import' && !step1Done && (
         <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
           <div className="rounded-lg border border-border bg-card p-4">
-            <p className="text-xs mb-3 text-muted-foreground">
-              {isEmptyTemplate ? g.kb.emptyDesc : g.kb.fullDesc}
+            <p className="text-xs text-muted-foreground mb-3">
+              {g.import.desc}
             </p>
+            <div className="flex items-center justify-between">
+              <button
+                onClick={handleImportClick}
+                className="text-xs font-medium px-4 py-2 rounded-lg transition-all hover:opacity-90"
+                style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+              >
+                {g.import.button}
+              </button>
+              <button
+                onClick={handleSkipImport}
+                className="text-xs px-3 py-1 rounded-lg text-muted-foreground transition-colors hover:bg-muted"
+              >
+                {g.skip}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
 
-            {isEmptyTemplate ? (
-              <div className="flex flex-col gap-1.5">
-                {recentFiles.length > 0 ? (
-                  recentFiles.map(file => {
-                    const fileName = file.path.split('/').pop() || file.path;
-                    return (
-                      <button key={file.path} onClick={() => handleFileOpen(file.path)}
-                        className="text-left text-xs px-3 py-2 rounded-lg border border-border text-foreground transition-colors hover:border-[var(--amber)]/30 hover:bg-muted/50 truncate">
-                        📄 {fileName}
-                      </button>
-                    );
-                  })
-                ) : (
-                  <p className="text-xs text-muted-foreground">{g.kb.emptyHint}</p>
-                )}
-              </div>
-            ) : (
-              <>
-                <div className="grid grid-cols-2 sm:grid-cols-3 gap-1.5">
-                  {spaces.slice(0, 6).map(s => {
-                    const emoji = extractEmoji(s.name);
-                    const label = stripEmoji(s.name);
-                    return (
-                      <button key={s.name} onClick={() => handleFileOpen(s.path)}
-                        className="text-left text-xs px-3 py-2 rounded-lg border border-border text-foreground transition-colors hover:border-[var(--amber)]/30 hover:bg-muted/50">
-                        <span className="mr-1.5">{emoji || '📁'}</span>
-                        <span>{label}</span>
-                        <span className="block text-2xs mt-0.5 text-muted-foreground">
-                          {t.home.nFiles(s.fileCount)}
-                        </span>
-                      </button>
-                    );
-                  })}
-                </div>
-                <p className="text-xs mt-3 text-[var(--amber)]">
-                  💡 {g.kb.instructionHint}
-                </p>
-              </>
-            )}
-
-            <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
-              <span className="text-xs text-muted-foreground">
-                {g.kb.progress(browsedCount)}
-              </span>
-              <button onClick={handleSkipKB}
-                className="text-xs px-3 py-1 rounded-lg text-muted-foreground transition-colors hover:bg-muted">
+      {/* ── Step 2 expanded: AI verification ── */}
+      {expanded === 'ai' && step1Done && !step2Done && (
+        <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
+          <div className="rounded-lg border border-border bg-card p-4">
+            <p className="text-xs text-muted-foreground mb-3">
+              {g.ai.desc}
+            </p>
+            <button
+              onClick={handleStartAI}
+              className="text-xs font-medium px-4 py-2 rounded-lg transition-all hover:opacity-90"
+              style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}
+            >
+              {g.ai.cta} →
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* ── Step 3 expanded: Cross-agent prompt ── */}
+      {expanded === 'agent' && showStep3 && (
+        <div className="px-5 pb-4 animate-in slide-in-from-top-2 duration-200">
+          <div className="rounded-lg border border-border bg-card p-4">
+            <p className="text-xs text-muted-foreground mb-3">
+              {g.agent.desc}
+            </p>
+            <div className="relative rounded-lg border border-border bg-muted/50 p-3 pr-16">
+              <p className="text-xs font-mono text-foreground leading-relaxed whitespace-pre-wrap">
+                {g.agent.copyPrompt}
+              </p>
+              <button
+                onClick={handleCopyPrompt}
+                className={`
+                  absolute top-2 right-2 flex items-center gap-1 text-2xs font-medium
+                  px-2.5 py-1.5 rounded-md border transition-all
+                  ${copied
+                    ? 'border-success/30 bg-success/10 text-success'
+                    : 'border-border bg-card text-muted-foreground hover:text-foreground hover:border-[var(--amber)]/30'}
+                `}
+              >
+                {copied ? <Check size={11} /> : <Copy size={11} />}
+                {copied ? g.agent.copied : g.agent.copy}
+              </button>
+            </div>
+            <div className="flex items-center justify-end mt-3 pt-3 border-t border-border">
+              <button
+                onClick={handleStep3Done}
+                className="text-xs px-3 py-1 rounded-lg text-muted-foreground transition-colors hover:bg-muted"
+              >
                 {g.skip}
               </button>
             </div>
@@ -287,25 +360,23 @@ export default function GuideCard({ onNavigate, spaces = [], recentFiles = [] }:
   );
 }
 
-export { type GuideCardProps };
-
-function TaskCard({ icon, title, cta, done, active, optional, onClick }: {
+function TaskCard({ icon, title, cta, done, active, dimmed, onClick }: {
   icon: React.ReactNode;
   title: string;
   cta: string;
   done: boolean;
   active: boolean;
-  optional?: string;
+  dimmed?: boolean;
   onClick: () => void;
 }) {
   return (
     <button
       onClick={onClick}
-      disabled={done}
+      disabled={done || dimmed}
       className={`
         flex flex-col items-center gap-1.5 px-3 py-3 rounded-lg border text-center
         transition-all duration-150
-        ${done ? 'opacity-60' : 'hover:border-[var(--amber)]/30 hover:bg-muted/50 cursor-pointer'}
+        ${done ? 'opacity-60' : dimmed ? 'opacity-40 cursor-default' : 'hover:border-[var(--amber)]/30 hover:bg-muted/50 cursor-pointer'}
         ${active ? 'border-[var(--amber)]/40 bg-muted/50' : ''}
         ${done || active ? 'border-[var(--amber)]' : 'border-border'}
       `}
@@ -316,12 +387,7 @@ function TaskCard({ icon, title, cta, done, active, optional, onClick }: {
       <span className="text-xs font-medium text-foreground">
         {title}
       </span>
-      {optional && (
-        <span className="text-2xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground">
-          {optional}
-        </span>
-      )}
-      {!done && !optional && (
+      {!done && !dimmed && (
         <span className="text-2xs text-[var(--amber)]">
           {cta} →
         </span>

package/app/components/HomeContent.tsx

@@ -1,14 +1,15 @@
 'use client';
 
 import Link from 'next/link';
-import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass, Folder, Puzzle, Brain, Plus } from 'lucide-react';
-import { useState, useEffect, useMemo } from 'react';
+import { FileText, Table, Clock, Sparkles, ArrowRight, FilePlus, Search, ChevronDown, Compass, Folder, Puzzle, Brain, Plus, Trash2, Check, Loader2, X, FolderInput } 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';
 
 interface RecentFile {
@@ -131,11 +132,8 @@ export default function HomeContent({ recent, existingFiles, spaces, dirPaths }:
 
   return (
     <div className="content-width px-4 md:px-6 py-8 md:py-12">
-      <GuideCard
-        onNavigate={(path) => { window.location.href = `/view/${encodeURIComponent(path)}`; }}
-        spaces={spaceList}
-        recentFiles={recent.slice(0, 5)}
-      />
+      <GuideCard />
+      <ExampleCleanupBanner />
 
       {/* ── Hero ── */}
       <div className="mb-10">
@@ -180,25 +178,32 @@ export default function HomeContent({ recent, existingFiles, spaces, dirPaths }:
 
         {/* Quick Actions */}
         <div className="flex flex-wrap gap-2.5 mt-4 pl-4">
+          <button
+            onClick={() => window.dispatchEvent(new CustomEvent('mindos:open-import'))}
+            className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:translate-x-0.5 bg-[var(--amber-dim)] text-[var(--amber)]"
+          >
+            <FolderInput size={14} />
+            <span>{t.fileTree.importFile}</span>
+          </button>
+          <Link
+            href="/view/Untitled.md"
+            className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors bg-muted text-muted-foreground"
+          >
+            <FilePlus size={14} />
+            <span>{t.home.newNote}</span>
+          </Link>
           {lastFile && (
             <Link
               href={`/view/${encodePath(lastFile.path)}`}
-              className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:translate-x-0.5 bg-[var(--amber-dim)] text-[var(--amber)]"
+              className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors text-muted-foreground hover:text-foreground"
             >
               <ArrowRight size={14} />
               <span>{t.home.continueEditing}</span>
-              <span className="text-xs opacity-60 truncate max-w-[160px]" suppressHydrationWarning>
+              <span className="text-xs opacity-50 truncate max-w-[140px]" suppressHydrationWarning>
                 {lastFile.path.split('/').pop()}
               </span>
             </Link>
           )}
-          <Link
-            href="/view/Untitled.md"
-            className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors bg-muted text-muted-foreground"
-          >
-            <FilePlus size={14} />
-            <span>{t.home.newNote}</span>
-          </Link>
           <Link
             href="/explore"
             className="inline-flex items-center gap-2 px-3.5 py-2 rounded-lg text-sm font-medium transition-all duration-150 hover:translate-x-0.5 text-[var(--amber)]"
@@ -229,10 +234,10 @@ export default function HomeContent({ recent, existingFiles, spaces, dirPaths }:
                   <Link
                     key={s.name}
                     href={`/view/${encodePath(s.path)}`}
-                    className={`flex items-start gap-3 px-3.5 py-3 rounded-xl border transition-all duration-150 hover:translate-x-0.5 ${
+                    className={`flex items-start gap-3 px-3.5 py-3 rounded-xl border transition-all duration-150 ${
                       isEmpty
                         ? 'border-dashed border-border/50 opacity-50 hover:opacity-70'
-                        : 'border-border hover:border-[var(--amber)]/30 hover:bg-muted/40'
+                        : 'border-border hover:border-[var(--amber)]/30 hover:shadow-sm'
                     }`}
                   >
                     {emoji ? (
@@ -517,3 +522,65 @@ function CreateSpaceButton({ t }: { t: ReturnType<typeof useLocale>['t'] }) {
   );
 }
 
+/* ── Example files cleanup banner ── */
+function ExampleCleanupBanner() {
+  const { t } = useLocale();
+  const [count, setCount] = useState<number | null>(null);
+  const [cleaning, setCleaning] = useState(false);
+  const [done, setDone] = useState(false);
+  const [dismissed, setDismissed] = useState(false);
+
+  useEffect(() => {
+    scanExampleFilesAction().then(r => {
+      if (r.files.length > 0) setCount(r.files.length);
+    }).catch(() => {});
+  }, []);
+
+  const handleCleanup = useCallback(async () => {
+    if (count === null) return;
+    setCleaning(true);
+    try {
+      const r = await cleanupExamplesAction();
+      if (r.success) {
+        setDone(true);
+        setTimeout(() => setDismissed(true), 2500);
+      }
+    } catch { /* silent — banner stays, user can retry */ }
+    setCleaning(false);
+  }, [count]);
+
+  if (dismissed || count === null || count === 0) return null;
+
+  if (done) {
+    return (
+      <div className="mb-6 flex items-center gap-2.5 px-4 py-3 rounded-xl border border-success/30 bg-success/5 animate-in fade-in duration-300">
+        <Check size={14} className="text-success shrink-0" />
+        <span className="text-xs text-success">{t.home.cleanupExamplesDone}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mb-6 flex items-center gap-3 px-4 py-3 rounded-xl border border-border bg-muted/30 animate-in fade-in duration-300">
+      <span className="text-sm leading-none shrink-0">🧪</span>
+      <span className="text-xs text-muted-foreground flex-1">
+        {t.home.cleanupExamples(count)}
+      </span>
+      <button
+        onClick={handleCleanup}
+        disabled={cleaning}
+        className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors shrink-0 disabled:opacity-50 bg-[var(--amber-dim)] text-[var(--amber)] hover:opacity-80"
+      >
+        {cleaning ? <Loader2 size={11} className="animate-spin" /> : <Trash2 size={11} />}
+        {t.home.cleanupExamplesButton}
+      </button>
+      <button
+        onClick={() => setDismissed(true)}
+        className="p-1 rounded hover:bg-muted transition-colors text-muted-foreground shrink-0"
+      >
+        <X size={12} />
+      </button>
+    </div>
+  );
+}
+

package/app/components/SidebarLayout.tsx

@@ -26,6 +26,7 @@ import AskModal from './AskModal';
 import SettingsModal from './SettingsModal';
 import KeyboardShortcuts from './KeyboardShortcuts';
 import ChangesBanner from './changes/ChangesBanner';
+import SpaceInitToast from './SpaceInitToast';
 import { MobileSyncDot, useSyncStatus } from './SyncStatusBar';
 import { FileNode } from '@/lib/types';
 import { useLocale } from '@/lib/LocaleContext';
@@ -127,6 +128,16 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
     return () => window.removeEventListener('mindos:open-import', handler);
   }, [handleOpenImport]);
 
+  // Listen for cross-component "open panel" events (e.g. GuideCard → Agents)
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const panel = (e as CustomEvent).detail?.panel;
+      if (panel) lp.setActivePanel(panel);
+    };
+    window.addEventListener('mindos:open-panel', handler);
+    return () => window.removeEventListener('mindos:open-panel', handler);
+  }, [lp]);
+
   // GuideCard first message handler
   const handleFirstMessage = useCallback(() => {
     const notifyGuide = () => window.dispatchEvent(new Event('guide-state-updated'));
@@ -459,6 +470,8 @@ export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps
           {children}
         </div>
 
+        <SpaceInitToast />
+
         {/* Global drag overlay */}
         {dragOverlay && !importModalOpen && (
           <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm transition-opacity duration-200">