@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/SidebarLayout.tsx

@@ -1,713 +0,0 @@
-'use client';
-
-import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
-import { useRouter, usePathname } from 'next/navigation';
-import Link from 'next/link';
-import { Search, Settings, Menu, X, FolderInput } from 'lucide-react';
-import ActivityBar, { type PanelId } from './ActivityBar';
-import Panel from './Panel';
-import FileTree from './FileTree';
-import Logo from './Logo';
-import SearchPanel from './panels/SearchPanel';
-
-import AgentsPanel from './panels/AgentsPanel';
-import DiscoverPanel from './panels/DiscoverPanel';
-import EchoPanel from './panels/EchoPanel';
-import WorkflowsPanel from './panels/WorkflowsPanel';
-
-import RightAskPanel from './RightAskPanel';
-import RightAgentDetailPanel, {
-  RIGHT_AGENT_DETAIL_DEFAULT_WIDTH,
-  RIGHT_AGENT_DETAIL_MIN_WIDTH,
-  RIGHT_AGENT_DETAIL_MAX_WIDTH,
-} from './RightAgentDetailPanel';
-import AskFab from './AskFab';
-import SyncPopover from './panels/SyncPopover';
-import KeyboardShortcuts from './KeyboardShortcuts';
-import ChangesBanner from './changes/ChangesBanner';
-import SpaceInitToast from './SpaceInitToast';
-import OrganizeToast from './OrganizeToast';
-import { MobileSyncDot, useSyncStatus } from './SyncStatusBar';
-import { FileNode } from '@/lib/types';
-import { useLocale } from '@/lib/stores/locale-store';
-import dynamic from 'next/dynamic';
-
-const SearchModal = dynamic(() => import('./SearchModal'), { ssr: false });
-const AskModal = dynamic(() => import('./AskModal'), { ssr: false });
-const SettingsModal = dynamic(() => import('./SettingsModal'), { ssr: false });
-const CreateSpaceModal = dynamic(() => import('./CreateSpaceModal'), { ssr: false });
-const ImportModal = dynamic(() => import('./ImportModal'), { ssr: false });
-import McpStoreInit from '@/lib/stores/McpStoreInit';
-import WalkthroughInit from '@/lib/stores/WalkthroughInit';
-import '@/lib/renderers/index'; // client-side renderer registration source of truth
-import { useLeftPanel } from '@/hooks/useLeftPanel';
-import { useAskPanel } from '@/hooks/useAskPanel';
-import { useAiOrganize } from '@/hooks/useAiOrganize';
-import { toast } from '@/lib/toast';
-import { quickDropToInbox } from '@/lib/inbox-upload';
-import type { Tab } from './settings/types';
-
-function collectDirPaths(nodes: FileNode[], prefix = ''): string[] {
-  const result: string[] = [];
-  for (const n of nodes) {
-    if (n.type === 'directory' && !n.name.startsWith('.')) {
-      const p = prefix ? `${prefix}/${n.name}` : n.name;
-      result.push(p);
-      if (n.children) result.push(...collectDirPaths(n.children, p));
-    }
-  }
-  return result;
-}
-
-interface SidebarLayoutProps {
-  fileTree: FileNode[];
-  children: React.ReactNode;
-}
-
-export default function SidebarLayout({ fileTree, children }: SidebarLayoutProps) {
-  // ── Left panel state (extracted hook) ──
-  const lp = useLeftPanel();
-
-  // ── Right Ask AI panel state (extracted hook) ──
-  const ap = useAskPanel();
-
-  // ── Settings modal ──
-  const [settingsOpen, setSettingsOpen] = useState(false);
-  const [settingsTab, setSettingsTab] = useState<Tab | undefined>(undefined);
-
-  // ── Sync popover ──
-  const [syncPopoverOpen, setSyncPopoverOpen] = useState(false);
-  const [syncAnchorRect, setSyncAnchorRect] = useState<DOMRect | null>(null);
-
-  // ── Agent MCP detail (right dock, does not replace left Agents list) ──
-  const [agentDetailKey, setAgentDetailKey] = useState<string | null>(null);
-  const [agentDetailWidth, setAgentDetailWidth] = useState(() => {
-    if (typeof window === 'undefined') return RIGHT_AGENT_DETAIL_DEFAULT_WIDTH;
-    try {
-      const stored = localStorage.getItem('right-agent-detail-panel-width');
-      if (stored) {
-        const w = parseInt(stored, 10);
-        if (w >= RIGHT_AGENT_DETAIL_MIN_WIDTH && w <= RIGHT_AGENT_DETAIL_MAX_WIDTH) return w;
-      }
-    } catch { /* ignore */ }
-    return RIGHT_AGENT_DETAIL_DEFAULT_WIDTH;
-  });
-
-  // ── AI Organize (lifted from ImportModal so toast shares state) ──
-  const aiOrganize = useAiOrganize();
-  const [organizeToastVisible, setOrganizeToastVisible] = useState(false);
-  const [historyRefreshToken, setHistoryRefreshToken] = useState(0);
-
-  // Show toast whenever organize is active
-  useEffect(() => {
-    if (aiOrganize.phase === 'organizing' || aiOrganize.phase === 'done' || aiOrganize.phase === 'error') {
-      setOrganizeToastVisible(true);
-    }
-  }, [aiOrganize.phase]);
-
-  const handleOrganizeToastDismiss = useCallback(() => {
-    setOrganizeToastVisible(false);
-    if (aiOrganize.phase !== 'organizing') {
-      aiOrganize.reset();
-    } else {
-      aiOrganize.abort();
-      aiOrganize.reset();
-    }
-  }, [aiOrganize]);
-
-  const handleHistoryUpdate = useCallback(() => {
-    setHistoryRefreshToken(t => t + 1);
-    window.dispatchEvent(new Event('mindos:organize-history-update'));
-  }, []);
-
-  // ── Import modal state ──
-  const [importModalOpen, setImportModalOpen] = useState(false);
-  const [importDefaultSpace, setImportDefaultSpace] = useState<string | undefined>(undefined);
-  const [importInitialFiles, setImportInitialFiles] = useState<File[] | undefined>(undefined);
-  const [dragOverlay, setDragOverlay] = useState(false);
-  const dragCounterRef = useRef(0);
-
-  const handleOpenImport = useCallback((space?: string) => {
-    setImportDefaultSpace(space);
-    setImportInitialFiles(undefined);
-    setImportModalOpen(true);
-  }, []);
-
-  const handleCloseImport = useCallback(() => {
-    setImportModalOpen(false);
-    setImportDefaultSpace(undefined);
-    setImportInitialFiles(undefined);
-  }, []);
-
-  // ── Mobile state ──
-  const [mobileOpen, setMobileOpen] = useState(false);
-  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
-  const [mobileAskOpen, setMobileAskOpen] = useState(false);
-
-  const { t } = useLocale();
-  const router = useRouter();
-  const pathname = usePathname();
-  const dirPaths = useMemo(() => collectDirPaths(fileTree), [fileTree]);
-  const { status: syncStatus, fetchStatus: syncStatusRefresh } = useSyncStatus();
-
-  const currentFile = pathname.startsWith('/view/')
-    ? pathname.slice('/view/'.length).split('/').map(decodeURIComponent).join('/')
-    : undefined;
-
-  // Auto-exit Ask panel maximize when navigating to a different page
-  // or when left panel opens (content needs to be visible).
-  // NOTE: the useEffect serves as a fallback for programmatic navigation;
-  // the primary (synchronous) exit happens in exitAskMaximized() below.
-  useEffect(() => {
-    if (ap.askMaximized) ap.toggleAskMaximized();
-  // Only react to pathname / left-panel changes, not askMaximized changes
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname, lp.panelOpen]);
-
-  // Synchronous helper — call in click handlers that activate content pages,
-  // so the Ask panel exits maximized in the same render (no flicker).
-  const exitAskMaximized = useCallback(() => {
-    if (ap.askMaximized) ap.toggleAskMaximized();
-  }, [ap.askMaximized, ap.toggleAskMaximized]);
-
-  // Close right Ask panel when entering home page — home has its own embedded Ask
-  useEffect(() => {
-    if (pathname === '/') {
-      if (ap.askPanelOpen) ap.closeAskPanel();
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pathname]);
-
-  const agentsContentActive = pathname?.startsWith('/agents');
-  const railActivePanel = lp.activePanel ?? (agentsContentActive ? 'agents' : null);
-
-  // ── Event listeners ──
-
-  // Listen for cross-component "open settings" events
-  useEffect(() => {
-    const handler = (e: Event) => {
-      const tab = (e as CustomEvent).detail?.tab;
-      if (tab) setSettingsTab(tab);
-      setSettingsOpen(true);
-    };
-    window.addEventListener('mindos:open-settings', handler);
-    return () => window.removeEventListener('mindos:open-settings', handler);
-  }, []);
-
-  useEffect(() => {
-    const handler = () => handleOpenImport();
-    window.addEventListener('mindos:open-import', handler);
-    return () => window.removeEventListener('mindos:open-import', handler);
-  }, [handleOpenImport]);
-
-  // ── Inbox: batch AI organize from InboxSection ──
-  const organizedFileNamesRef = useRef<string[]>([]);
-  useEffect(() => {
-    const handler = (e: Event) => {
-      const files = (e as CustomEvent).detail?.files as Array<{ name: string; path: string }> | undefined;
-      if (!files || files.length === 0 || aiOrganize.phase === 'organizing') return;
-
-      const prompt = t.inbox.organizePrompt(files.map(f => f.name));
-      organizedFileNamesRef.current = files.map(f => f.name);
-
-      (async () => {
-        const attachments: Array<{ name: string; content: string }> = [];
-        for (const f of files) {
-          try {
-            const res = await fetch(`/api/file?path=${encodeURIComponent(f.path)}`);
-            if (res.ok) {
-              const data = await res.json();
-              attachments.push({ name: f.name, content: data.content ?? '' });
-            }
-          } catch { /* skip unreadable files */ }
-        }
-        if (attachments.length > 0) {
-          aiOrganize.start(attachments, prompt, 'inbox-organize');
-        } else {
-          toast.error(t.inbox.organizeFailed, 4000);
-          window.dispatchEvent(new Event('mindos:organize-done'));
-        }
-      })();
-    };
-    window.addEventListener('mindos:inbox-organize', handler);
-    return () => window.removeEventListener('mindos:inbox-organize', handler);
-  }, [aiOrganize, t]);
-
-  // ── Session/Message: AI organize conversation content ──
-  useEffect(() => {
-    const handler = (e: Event) => {
-      const detail = (e as CustomEvent).detail as { content: string; name: string } | undefined;
-      if (!detail?.content || aiOrganize.phase === 'organizing') return;
-
-      const attachment = { name: detail.name, content: detail.content };
-      const prompt = `Organize this conversation into well-structured notes in my knowledge base. Extract key insights, decisions, action items, and important details. Create appropriate files with clear titles. Write in the same language as the content.`;
-      aiOrganize.start([attachment], prompt, 'conversation');
-    };
-    window.addEventListener('mindos:session-organize', handler);
-    return () => window.removeEventListener('mindos:session-organize', handler);
-  }, [aiOrganize]);
-
-  // Notify InboxSection when organize finishes + clean up source inbox files
-  useEffect(() => {
-    if (aiOrganize.phase === 'done') {
-      const hasSuccessfulChanges = aiOrganize.changes.some(c => c.ok);
-      const names = organizedFileNamesRef.current;
-      if (hasSuccessfulChanges && names.length > 0) {
-        fetch('/api/inbox', {
-          method: 'DELETE',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ names }),
-        })
-          .then(() => {
-            window.dispatchEvent(new Event('mindos:inbox-updated'));
-          })
-          .catch(() => { /* best-effort cleanup */ });
-        organizedFileNamesRef.current = [];
-      }
-      window.dispatchEvent(new Event('mindos:organize-done'));
-    } else if (aiOrganize.phase === 'error') {
-      window.dispatchEvent(new Event('mindos:organize-done'));
-    }
-  }, [aiOrganize.phase, aiOrganize.changes]);
-
-  // 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'));
-    if (ap.askOpenSource === 'guide') {
-      fetch('/api/setup', {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ guideState: { askedAI: true } }),
-      }).then(notifyGuide).catch((err) => console.warn('Guide state update failed:', err));
-    } else if (ap.askOpenSource === 'guide-next') {
-      notifyGuide();
-    }
-  }, [ap.askOpenSource]);
-
-  // Close mobile drawer on route change
-  useEffect(() => {
-    const id = requestAnimationFrame(() => setMobileOpen(false));
-    return () => cancelAnimationFrame(id);
-  }, [pathname]);
-
-  // Deep-link Echo routes: keep left Echo panel aligned with URL
-  useEffect(() => {
-    if (pathname?.startsWith('/echo')) {
-      lp.setActivePanel('echo');
-    }
-  }, [pathname, lp.setActivePanel]);
-
-  const handleAgentDetailWidthCommit = useCallback((w: number) => {
-    setAgentDetailWidth(w);
-    try {
-      localStorage.setItem('right-agent-detail-panel-width', String(w));
-    } catch { /* ignore */ }
-  }, []);
-
-  const closeAgentDetailPanel = useCallback(() => setAgentDetailKey(null), []);
-
-  const agentDockOpen = agentDetailKey !== null && lp.activePanel === 'agents';
-
-  // Refresh file tree when server-side tree version changes.
-  // Polls a lightweight version counter every 3s — only calls router.refresh()
-  // (which rebuilds the full tree) when the version actually changes.
-  useEffect(() => {
-    let lastVersion = -1;
-    let stopped = false;
-
-    const checkVersion = async () => {
-      if (stopped || document.visibilityState === 'hidden') return;
-      try {
-        const res = await fetch('/api/tree-version');
-        if (!res.ok) return;
-        const { v } = (await res.json()) as { v: number };
-        if (lastVersion === -1) {
-          lastVersion = v;
-          return;
-        }
-        if (v !== lastVersion) {
-          lastVersion = v;
-          router.refresh();
-          window.dispatchEvent(new Event('mindos:files-changed'));
-        }
-      } catch (err) { console.debug('[tree-version] poll failed', err); }
-    };
-
-    const onVisible = () => {
-      if (document.visibilityState === 'visible') void checkVersion();
-    };
-
-    void checkVersion();
-    const interval = setInterval(() => void checkVersion(), 3_000);
-    document.addEventListener('visibilitychange', onVisible);
-
-    return () => {
-      stopped = true;
-      clearInterval(interval);
-      document.removeEventListener('visibilitychange', onVisible);
-    };
-  }, [router]);
-
-  // Unified keyboard shortcuts
-  useEffect(() => {
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        if (lp.panelMaximized) { lp.handlePanelMaximize(); return; }
-        if (agentDockOpen) { setAgentDetailKey(null); return; }
-        if (ap.askPanelOpen) { ap.closeAskPanel(); return; }
-        if (ap.desktopAskPopupOpen) { ap.closeDesktopAskPopup(); return; }
-      }
-      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-        e.preventDefault();
-        if (window.innerWidth >= 768) {
-          lp.setActivePanel((p: PanelId | null) => p === 'search' ? null : 'search');
-        } else {
-          setMobileSearchOpen(v => !v);
-        }
-      }
-      if ((e.metaKey || e.ctrlKey) && e.key === '/') {
-        e.preventDefault();
-        if (window.innerWidth >= 768) {
-          ap.toggleAskPanel();
-        } else {
-          setMobileAskOpen(v => !v);
-        }
-      }
-      if ((e.metaKey || e.ctrlKey) && e.key === ',') {
-        e.preventDefault();
-        setSettingsOpen(v => !v);
-      }
-      if ((e.metaKey || e.ctrlKey) && e.key === 'i') {
-        e.preventDefault();
-        setImportModalOpen(v => !v);
-      }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [agentDockOpen, lp, ap]);
-
-  // ── Settings helpers ──
-  const openSyncSettings = useCallback(() => {
-    setSettingsTab('sync');
-    setSyncPopoverOpen(false);
-    setSettingsOpen(true);
-  }, []);
-
-  const handleSettingsClick = useCallback(() => {
-    setSettingsOpen(true);
-    setSettingsTab(undefined);
-  }, []);
-
-  const closeSettings = useCallback(() => {
-    setSettingsOpen(false);
-    setSettingsTab(undefined);
-  }, []);
-
-  const handleSyncClick = useCallback((rect: DOMRect) => {
-    setSyncAnchorRect(rect);
-    setSyncPopoverOpen(prev => !prev);
-  }, []);
-
-  const handleExpandedChange = useCallback((expanded: boolean) => {
-    lp.handleExpandedChange(expanded);
-    setSyncPopoverOpen(false);
-  }, [lp]);
-
-  return (
-    <>
-      <McpStoreInit />
-      <WalkthroughInit />
-      {/* Skip link */}
-      <a
-        href="#main-content"
-        className="sr-only focus-visible:not-sr-only focus-visible:fixed focus-visible:top-2 focus-visible:left-2 focus-visible:z-[60] focus-visible:px-4 focus-visible:py-2 focus-visible:rounded-lg focus-visible:text-sm focus-visible:font-medium bg-[var(--amber)] text-[var(--amber-foreground)]"
-      >
-        Skip to main content
-      </a>
-
-      {/* ── Desktop: Activity Bar + Panel ── */}
-      <ActivityBar
-        activePanel={railActivePanel}
-        onPanelChange={lp.setActivePanel}
-        onEchoClick={() => {
-          exitAskMaximized();
-          const wasActive = lp.activePanel === 'echo';
-          const onEchoRoute = pathname?.startsWith('/echo');
-          if (!wasActive) {
-            lp.setActivePanel('echo');
-            router.push('/echo/about-you');
-          } else if (!onEchoRoute) {
-            router.push('/echo/about-you');
-          } else {
-            lp.setActivePanel(null);
-          }
-        }}
-        onAgentsClick={() => {
-          exitAskMaximized();
-          const wasActive = lp.activePanel === 'agents';
-          const onAgentsRoute = pathname?.startsWith('/agents');
-          if (!wasActive) {
-            lp.setActivePanel('agents');
-            router.push('/agents');
-          } else if (!onAgentsRoute) {
-            router.push('/agents');
-          } else {
-            lp.setActivePanel(null);
-          }
-          setAgentDetailKey(null);
-        }}
-        onDiscoverClick={() => {
-          exitAskMaximized();
-          const wasActive = lp.activePanel === 'discover';
-          const onDiscoverRoute = pathname?.startsWith('/explore');
-          if (!wasActive) {
-            lp.setActivePanel('discover');
-            router.push('/explore');
-          } else if (!onDiscoverRoute) {
-            router.push('/explore');
-          } else {
-            lp.setActivePanel(null);
-          }
-        }}
-        onSpacesClick={() => {
-          exitAskMaximized();
-          const isHome = pathname === '/';
-          const wasActive = lp.activePanel === 'files';
-          const onFilesRoute = pathname === '/wiki' || pathname?.startsWith('/view/') || pathname?.startsWith('/wiki/');
-          // On homepage, always navigate to /wiki (don't toggle off)
-          if (isHome || !wasActive) {
-            lp.setActivePanel('files');
-            router.push('/wiki');
-          } else if (!onFilesRoute) {
-            router.push('/wiki');
-          } else {
-            lp.setActivePanel(null);
-          }
-        }}
-        syncStatus={syncStatus}
-        expanded={lp.railExpanded}
-        onExpandedChange={handleExpandedChange}
-        onSettingsClick={handleSettingsClick}
-        onSyncClick={handleSyncClick}
-      />
-
-      <Panel
-        activePanel={lp.activePanel}
-        fileTree={fileTree}
-        onNavigate={() => {}}
-        onOpenSyncSettings={openSyncSettings}
-        railWidth={lp.railWidth}
-        panelWidth={lp.panelWidth ?? undefined}
-        onWidthChange={lp.handlePanelWidthChange}
-        onWidthCommit={lp.handlePanelWidthCommit}
-        maximized={lp.panelMaximized}
-        onMaximize={lp.handlePanelMaximize}
-        onImport={handleOpenImport}
-      >
-        <div className={`flex flex-col h-full ${lp.activePanel === 'echo' ? '' : 'hidden'}`}>
-          <EchoPanel active={lp.activePanel === 'echo'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
-        </div>
-        <div className={`flex flex-col h-full ${lp.activePanel === 'search' ? '' : 'hidden'}`}>
-          <SearchPanel active={lp.activePanel === 'search'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
-        </div>
-        <div className={`flex flex-col h-full ${lp.activePanel === 'agents' ? '' : 'hidden'}`}>
-          <AgentsPanel
-            active={lp.activePanel === 'agents'}
-            maximized={lp.panelMaximized}
-            onMaximize={lp.handlePanelMaximize}
-            selectedAgentKey={agentDockOpen ? agentDetailKey : null}
-          />
-        </div>
-        <div className={`flex flex-col h-full ${lp.activePanel === 'discover' ? '' : 'hidden'}`}>
-          <DiscoverPanel active={lp.activePanel === 'discover'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
-        </div>
-        <div className={`flex flex-col h-full ${lp.activePanel === 'workflows' ? '' : 'hidden'}`}>
-          <WorkflowsPanel active={lp.activePanel === 'workflows'} maximized={lp.panelMaximized} onMaximize={lp.handlePanelMaximize} />
-        </div>
-      </Panel>
-
-      {/* ── Right-side Ask AI Panel ── */}
-      <RightAskPanel
-        open={ap.askPanelOpen}
-        onClose={ap.closeAskPanel}
-        currentFile={currentFile}
-        initialMessage={ap.askInitialMessage}
-        initialAcpAgent={ap.askAcpAgent}
-        onFirstMessage={handleFirstMessage}
-        width={ap.askPanelWidth}
-        onWidthChange={ap.handleAskWidthChange}
-        onWidthCommit={ap.handleAskWidthCommit}
-        askMode={ap.askMode}
-        onModeSwitch={ap.handleAskModeSwitch}
-        maximized={ap.askMaximized}
-        onMaximize={ap.toggleAskMaximized}
-        sidebarOffset={lp.panelOpen ? lp.railWidth + lp.effectivePanelWidth : lp.railWidth}
-      />
-
-      <RightAgentDetailPanel
-        open={agentDockOpen}
-        agentKey={agentDetailKey}
-        onClose={closeAgentDetailPanel}
-        rightOffset={ap.askPanelOpen ? ap.askPanelWidth : 0}
-        width={agentDetailWidth}
-        onWidthChange={setAgentDetailWidth}
-        onWidthCommit={handleAgentDetailWidthCommit}
-      />
-
-      <AskModal
-        open={ap.desktopAskPopupOpen}
-        onClose={ap.closeDesktopAskPopup}
-        currentFile={currentFile}
-        initialMessage={ap.askInitialMessage}
-        initialAcpAgent={ap.askAcpAgent}
-        onFirstMessage={handleFirstMessage}
-        askMode={ap.askMode}
-        onModeSwitch={ap.handleAskModeSwitch}
-      />
-
-      <AskFab onToggle={ap.toggleAskPanel} askPanelOpen={ap.askPanelOpen || ap.desktopAskPopupOpen} />
-      <KeyboardShortcuts />
-
-      <SettingsModal open={settingsOpen} onClose={closeSettings} initialTab={settingsTab} />
-
-      <SyncPopover
-        open={syncPopoverOpen}
-        onClose={() => setSyncPopoverOpen(false)}
-        anchorRect={syncAnchorRect}
-        railWidth={lp.railWidth}
-        onOpenSyncSettings={openSyncSettings}
-        syncStatus={syncStatus}
-        onSyncStatusRefresh={syncStatusRefresh}
-      />
-
-      {/* ── Mobile ── */}
-      <header className="md:hidden fixed top-0 left-0 right-0 z-30 bg-card border-b border-border flex items-center justify-between px-3 py-2" style={{ paddingTop: 'env(safe-area-inset-top, 0px)' }}>
-        <button onClick={() => setMobileOpen(true)} className="p-3 -ml-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label="Open menu">
-          <Menu size={20} />
-        </button>
-        <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
-          <Logo id="mobile" />
-          <span className="text-foreground text-sm font-brand">MindOS</span>
-        </Link>
-        <div className="flex items-center gap-0.5">
-          <button onClick={openSyncSettings} className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent flex items-center justify-center" aria-label="Sync status">
-            <MobileSyncDot status={syncStatus} />
-          </button>
-          <button onClick={() => setMobileSearchOpen(true)} className="p-3 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.searchTitle}>
-            <Search size={20} />
-          </button>
-          <button onClick={() => { setSettingsOpen(true); setSettingsTab(undefined); }} className="p-3 -mr-1 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors active:bg-accent" aria-label={t.sidebar.settingsTitle}>
-            <Settings size={20} />
-          </button>
-        </div>
-      </header>
-
-      {mobileOpen && <div className="md:hidden fixed inset-0 z-40 overlay-backdrop" onClick={() => setMobileOpen(false)} />}
-      <aside className={`md:hidden fixed top-0 left-0 h-screen w-[85vw] max-w-[320px] z-50 bg-card border-r border-border flex flex-col transition-transform duration-300 ease-in-out ${mobileOpen ? 'translate-x-0' : '-translate-x-full'}`}>
-        <div className="flex items-center justify-between px-4 py-4 border-b border-border shrink-0">
-          <Link href="/" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
-            <Logo id="drawer" />
-            <span className="text-foreground text-sm font-brand">MindOS</span>
-          </Link>
-          <button onClick={() => setMobileOpen(false)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
-            <X size={16} />
-          </button>
-        </div>
-        <div className="flex-1 overflow-y-auto min-h-0 px-2 py-2">
-          <FileTree nodes={fileTree} onNavigate={() => setMobileOpen(false)} onImport={handleOpenImport} />
-        </div>
-      </aside>
-
-      <SearchModal open={mobileSearchOpen} onClose={() => setMobileSearchOpen(false)} />
-      <AskModal open={mobileAskOpen} onClose={() => setMobileAskOpen(false)} currentFile={currentFile} />
-
-      <main
-        id="main-content"
-        className={`min-h-screen transition-all duration-200 pt-[52px] md:pt-0`}
-        onDragEnter={(e) => {
-          if (!e.dataTransfer.types.includes('Files')) return;
-          e.preventDefault();
-          dragCounterRef.current++;
-          if (dragCounterRef.current === 1) setDragOverlay(true);
-        }}
-        onDragOver={(e) => {
-          if (!e.dataTransfer.types.includes('Files')) return;
-          e.preventDefault();
-        }}
-        onDragLeave={() => {
-          dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
-          if (dragCounterRef.current === 0) setDragOverlay(false);
-        }}
-        onDrop={(e) => {
-          e.preventDefault();
-          dragCounterRef.current = 0;
-          setDragOverlay(false);
-          if (e.dataTransfer.files.length > 0 && !importModalOpen) {
-            quickDropToInbox(Array.from(e.dataTransfer.files), t);
-          }
-        }}
-      >
-        <div className="min-h-screen bg-background" style={{ overflowX: 'clip' }}>
-          <ChangesBanner />
-          {children}
-        </div>
-
-        <SpaceInitToast />
-        <CreateSpaceModal t={t} dirPaths={dirPaths} />
-
-        {/* Global drag overlay — Quick Drop to Inbox */}
-        {dragOverlay && !importModalOpen && (
-          <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm transition-opacity duration-200">
-            <div className="border-2 border-dashed border-[var(--amber)]/50 rounded-xl p-12 flex flex-col items-center gap-3">
-              <FolderInput size={48} className="text-[var(--amber)]/60" />
-              <p className="text-sm text-foreground font-medium">{t.inbox.dropOverlay}</p>
-              <p className="text-xs text-muted-foreground">{t.inbox.dropOverlayFormats}</p>
-            </div>
-          </div>
-        )}
-      </main>
-
-      <ImportModal
-        open={importModalOpen}
-        onClose={handleCloseImport}
-        defaultSpace={importDefaultSpace}
-        initialFiles={importInitialFiles}
-        aiOrganize={aiOrganize}
-        dirPaths={dirPaths}
-      />
-
-      {organizeToastVisible && (
-        <OrganizeToast
-          aiOrganize={aiOrganize}
-          onDismiss={handleOrganizeToastDismiss}
-          onCancel={() => { aiOrganize.abort(); aiOrganize.reset(); setOrganizeToastVisible(false); }}
-          onHistoryUpdate={handleHistoryUpdate}
-        />
-      )}
-
-      <style>{`
-        @media (min-width: 768px) {
-          :root {
-            --right-panel-width: ${ap.askMaximized ? `calc(100vw - ${lp.panelOpen ? lp.railWidth + lp.effectivePanelWidth : lp.railWidth}px)` : `${ap.askPanelOpen ? ap.askPanelWidth : 0}px`};
-            --right-agent-detail-width: ${agentDockOpen ? agentDetailWidth : 0}px;
-          }
-          #main-content {
-            padding-left: ${lp.panelOpen && lp.panelMaximized ? '100vw' : `${lp.panelOpen ? lp.railWidth + lp.effectivePanelWidth : lp.railWidth}px`} !important;
-            padding-right: calc(var(--right-panel-width) + var(--right-agent-detail-width) + var(--toc-extra-right, 0px)) !important;
-            padding-top: 0;
-          }
-        }
-      `}</style>
-    </>
-  );
-}