@geminilight/mindos 0.5.21 → 0.5.23

package/app/components/AskModal.tsx

@@ -1,17 +1,7 @@
 'use client';
 
-import { useEffect, useRef, useState, useCallback } from 'react';
-import { X, Sparkles, Send, AtSign, Paperclip, StopCircle, RotateCcw, History } from 'lucide-react';
 import { useLocale } from '@/lib/LocaleContext';
-import type { Message } from '@/lib/types';
-import { useAskSession } from '@/hooks/useAskSession';
-import { useFileUpload } from '@/hooks/useFileUpload';
-import { useMention } from '@/hooks/useMention';
-import MessageList from '@/components/ask/MessageList';
-import MentionPopover from '@/components/ask/MentionPopover';
-import SessionHistory from '@/components/ask/SessionHistory';
-import FileChip from '@/components/ask/FileChip';
-import { consumeUIMessageStream } from '@/lib/agent/stream-consumer';
+import AskContent from '@/components/ask/AskContent';
 
 interface AskModalProps {
   open: boolean;
@@ -19,225 +9,13 @@ interface AskModalProps {
   currentFile?: string;
   initialMessage?: string;
   onFirstMessage?: () => void;
+  askMode?: 'panel' | 'popup';
+  onModeSwitch?: () => void;
 }
 
-export default function AskModal({ open, onClose, currentFile, initialMessage, onFirstMessage }: AskModalProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const abortRef = useRef<AbortController | null>(null);
-  const firstMessageFired = useRef(false);
+export default function AskModal({ open, onClose, currentFile, initialMessage, onFirstMessage, askMode, onModeSwitch }: AskModalProps) {
   const { t } = useLocale();
 
-  const [input, setInput] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [loadingPhase, setLoadingPhase] = useState<'connecting' | 'thinking' | 'streaming'>('connecting');
-  const [attachedFiles, setAttachedFiles] = useState<string[]>([]);
-  const [showHistory, setShowHistory] = useState(false);
-
-  const session = useAskSession(currentFile);
-  const upload = useFileUpload();
-  const mention = useMention();
-
-  // Focus and reset on open
-  useEffect(() => {
-    let cancelled = false;
-    if (open) {
-      setTimeout(() => inputRef.current?.focus(), 50);
-      void (async () => {
-        if (cancelled) return;
-        await session.initSessions();
-      })();
-      setInput(initialMessage || '');
-      firstMessageFired.current = false;
-      setAttachedFiles(currentFile ? [currentFile] : []);
-      upload.clearAttachments();
-      mention.resetMention();
-      setShowHistory(false);
-    } else {
-      abortRef.current?.abort();
-    }
-    return () => { cancelled = true; };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, currentFile]);
-
-  // Persist session on message changes
-  useEffect(() => {
-    if (!open || !session.activeSessionId) return;
-    session.persistSession(session.messages, session.activeSessionId);
-    return () => session.clearPersistTimer();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, session.messages, session.activeSessionId]);
-
-  // Esc to close (or dismiss mention)
-  useEffect(() => {
-    if (!open) return;
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        if (mention.mentionQuery !== null) { mention.resetMention(); return; }
-        onClose();
-      }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [open, onClose, mention]);
-
-  const handleInputChange = useCallback((val: string) => {
-    setInput(val);
-    mention.updateMentionFromInput(val);
-  }, [mention]);
-
-  const selectMention = useCallback((filePath: string) => {
-    const atIdx = input.lastIndexOf('@');
-    setInput(input.slice(0, atIdx));
-    mention.resetMention();
-    if (!attachedFiles.includes(filePath)) {
-      setAttachedFiles(prev => [...prev, filePath]);
-    }
-    setTimeout(() => inputRef.current?.focus(), 0);
-  }, [input, attachedFiles, mention]);
-
-  const handleInputKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (mention.mentionQuery === null) return;
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      mention.navigateMention('down');
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      mention.navigateMention('up');
-    } else if (e.key === 'Enter' || e.key === 'Tab') {
-      if (mention.mentionResults.length > 0) {
-        e.preventDefault();
-        selectMention(mention.mentionResults[mention.mentionIndex]);
-      }
-    }
-  }, [mention, selectMention]);
-
-  const handleStop = useCallback(() => { abortRef.current?.abort(); }, []);
-
-  const handleSubmit = useCallback(async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (mention.mentionQuery !== null) return;
-    const text = input.trim();
-    if (!text || isLoading) return;
-
-    const userMsg: Message = { role: 'user', content: text };
-    const requestMessages = [...session.messages, userMsg];
-    session.setMessages([...requestMessages, { role: 'assistant', content: '' }]);
-    setInput('');
-    // Notify guide card on first user message (ref prevents duplicate fires during re-render)
-    if (onFirstMessage && !firstMessageFired.current) {
-      firstMessageFired.current = true;
-      onFirstMessage();
-    }
-    setAttachedFiles(currentFile ? [currentFile] : []);
-    setIsLoading(true);
-    setLoadingPhase('connecting');
-
-    const controller = new AbortController();
-    abortRef.current = controller;
-
-    try {
-      const res = await fetch('/api/ask', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          messages: requestMessages,
-          currentFile,
-          attachedFiles,
-          uploadedFiles: upload.localAttachments,
-        }),
-        signal: controller.signal,
-      });
-
-      if (!res.ok) {
-        let errorMsg = `Request failed (${res.status})`;
-        try {
-          const errBody = await res.json();
-          if (errBody.error) errorMsg = errBody.error;
-        } catch {}
-        throw new Error(errorMsg);
-      }
-
-      if (!res.body) throw new Error('No response body');
-
-      setLoadingPhase('thinking');
-
-      const finalMessage = await consumeUIMessageStream(
-        res.body,
-        (msg) => {
-          setLoadingPhase('streaming');
-          session.setMessages(prev => {
-            const updated = [...prev];
-            updated[updated.length - 1] = msg;
-            return updated;
-          });
-        },
-        controller.signal,
-      );
-
-      if (!finalMessage.content.trim() && (!finalMessage.parts || finalMessage.parts.length === 0)) {
-        session.setMessages(prev => {
-          const updated = [...prev];
-          updated[updated.length - 1] = { role: 'assistant', content: `__error__${t.ask.errorNoResponse}` };
-          return updated;
-        });
-      }
-    } catch (err) {
-      if ((err as Error).name === 'AbortError') {
-        session.setMessages(prev => {
-          const updated = [...prev];
-          const lastIdx = updated.length - 1;
-          if (lastIdx >= 0 && updated[lastIdx].role === 'assistant') {
-            const last = updated[lastIdx];
-            const hasContent = last.content.trim() || (last.parts && last.parts.length > 0);
-            if (!hasContent) {
-              updated[lastIdx] = { role: 'assistant', content: `__error__${t.ask.stopped}` };
-            }
-          }
-          return updated;
-        });
-      } else {
-        const errMsg = err instanceof Error ? err.message : 'Something went wrong';
-        session.setMessages(prev => {
-          const updated = [...prev];
-          const lastIdx = updated.length - 1;
-          if (lastIdx >= 0 && updated[lastIdx].role === 'assistant') {
-            const last = updated[lastIdx];
-            const hasContent = last.content.trim() || (last.parts && last.parts.length > 0);
-            if (!hasContent) {
-              updated[lastIdx] = { role: 'assistant', content: `__error__${errMsg}` };
-              return updated;
-            }
-          }
-          return [...updated, { role: 'assistant', content: `__error__${errMsg}` }];
-        });
-      }
-    } finally {
-      setIsLoading(false);
-      abortRef.current = null;
-    }
-  }, [input, session, isLoading, currentFile, attachedFiles, upload.localAttachments, mention.mentionQuery, t.ask.errorNoResponse, t.ask.stopped]);
-
-  const handleResetSession = useCallback(() => {
-    if (isLoading) return;
-    session.resetSession();
-    setInput('');
-    setAttachedFiles(currentFile ? [currentFile] : []);
-    upload.clearAttachments();
-    mention.resetMention();
-    setShowHistory(false);
-    setTimeout(() => inputRef.current?.focus(), 0);
-  }, [isLoading, currentFile, session, upload, mention]);
-
-  const handleLoadSession = useCallback((id: string) => {
-    session.loadSession(id);
-    setShowHistory(false);
-    setInput('');
-    setAttachedFiles(currentFile ? [currentFile] : []);
-    upload.clearAttachments();
-    mention.resetMention();
-    setTimeout(() => inputRef.current?.focus(), 0);
-  }, [session, currentFile, upload, mention]);
-
   if (!open) return null;
 
   return (
@@ -251,152 +29,16 @@ export default function AskModal({ open, onClose, currentFile, initialMessage, o
         aria-label={t.ask.title}
         className="w-full md:max-w-2xl md:mx-4 bg-card border-t md:border border-border rounded-t-2xl md:rounded-xl shadow-2xl flex flex-col h-[92vh] md:h-auto md:max-h-[75vh]"
       >
-        {/* Header */}
-        <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
-          {/* Mobile drag indicator */}
-          <div className="absolute top-2 left-1/2 -translate-x-1/2 w-8 h-1 rounded-full bg-muted-foreground/20 md:hidden" />
-          <div className="flex items-center gap-2 text-sm font-medium text-foreground">
-            <Sparkles size={15} style={{ color: 'var(--amber)' }} />
-            <span className="font-display">{t.ask.title}</span>
-            {currentFile && (
-              <span className="text-xs text-muted-foreground font-normal truncate max-w-[200px]">
-                — {currentFile.split('/').pop()}
-              </span>
-            )}
-          </div>
-          <div className="flex items-center gap-1">
-            <button type="button" onClick={() => setShowHistory(v => !v)} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title="Session history">
-              <History size={14} />
-            </button>
-            <button type="button" onClick={handleResetSession} disabled={isLoading} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-40" title="New session">
-              <RotateCcw size={14} />
-            </button>
-            <button onClick={onClose} className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors">
-              <X size={15} />
-            </button>
-          </div>
-        </div>
-
-        {showHistory && (
-          <SessionHistory
-            sessions={session.sessions}
-            activeSessionId={session.activeSessionId}
-            onLoad={handleLoadSession}
-            onDelete={session.deleteSession}
-          />
-        )}
-
-        {/* Messages */}
-        <MessageList
-          messages={session.messages}
-          isLoading={isLoading}
-          loadingPhase={loadingPhase}
-          emptyPrompt={t.ask.emptyPrompt}
-          suggestions={t.ask.suggestions}
-          onSuggestionClick={setInput}
-          labels={{ connecting: t.ask.connecting, thinking: t.ask.thinking, generating: t.ask.generating }}
+        <AskContent
+          visible={open}
+          variant="modal"
+          onClose={onClose}
+          currentFile={currentFile}
+          initialMessage={initialMessage}
+          onFirstMessage={onFirstMessage}
+          askMode={askMode}
+          onModeSwitch={onModeSwitch}
         />
-
-        {/* Input area */}
-        <div className="border-t border-border shrink-0">
-          {/* Attached file chips */}
-          {attachedFiles.length > 0 && (
-            <div className="px-4 pt-2.5 pb-1">
-              <div className="text-xs text-muted-foreground/70 mb-1.5">Knowledge Base Context</div>
-              <div className="flex flex-wrap gap-1.5">
-                {attachedFiles.map(f => (
-                  <FileChip key={f} path={f} onRemove={() => setAttachedFiles(prev => prev.filter(x => x !== f))} />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {upload.localAttachments.length > 0 && (
-            <div className="px-4 pb-1">
-              <div className="text-xs text-muted-foreground/70 mb-1.5">Uploaded Files</div>
-              <div className="flex flex-wrap gap-1.5">
-                {upload.localAttachments.map((f, idx) => (
-                  <FileChip key={`${f.name}-${idx}`} path={f.name} variant="upload" onRemove={() => upload.removeAttachment(idx)} />
-                ))}
-              </div>
-            </div>
-          )}
-
-          {upload.uploadError && (
-            <div className="px-4 pb-1 text-xs text-error">{upload.uploadError}</div>
-          )}
-
-          {/* @-mention dropdown */}
-          {mention.mentionQuery !== null && mention.mentionResults.length > 0 && (
-            <MentionPopover
-              results={mention.mentionResults}
-              selectedIndex={mention.mentionIndex}
-              onSelect={selectMention}
-            />
-          )}
-
-          <form onSubmit={handleSubmit} className="flex items-center gap-2 px-3 py-3">
-            <button type="button" onClick={() => upload.uploadInputRef.current?.click()} className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0" title="Attach local file">
-              <Paperclip size={15} />
-            </button>
-
-            <input
-              ref={upload.uploadInputRef}
-              type="file"
-              className="hidden"
-              multiple
-              accept=".txt,.md,.markdown,.csv,.json,.yaml,.yml,.xml,.html,.htm,.pdf,text/plain,text/markdown,text/csv,application/json,application/pdf"
-              onChange={async (e) => {
-                const inputEl = e.currentTarget;
-                await upload.pickFiles(inputEl.files);
-                inputEl.value = '';
-              }}
-            />
-
-            <button
-              type="button"
-              onClick={() => {
-                const el = inputRef.current;
-                if (!el) return;
-                const pos = el.selectionStart ?? input.length;
-                const newVal = input.slice(0, pos) + '@' + input.slice(pos);
-                handleInputChange(newVal);
-                setTimeout(() => { el.focus(); el.setSelectionRange(pos + 1, pos + 1); }, 0);
-              }}
-              className="p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
-              title="@ mention file"
-            >
-              <AtSign size={15} />
-            </button>
-
-            <input
-              ref={inputRef}
-              value={input}
-              onChange={e => handleInputChange(e.target.value)}
-              onKeyDown={handleInputKeyDown}
-              placeholder={t.ask.placeholder}
-              disabled={isLoading}
-              className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none disabled:opacity-50"
-            />
-
-            {isLoading ? (
-              <button type="button" onClick={handleStop} className="p-1.5 rounded-md transition-colors shrink-0 text-muted-foreground hover:text-foreground hover:bg-muted" title={t.ask.stopTitle}>
-                <StopCircle size={15} />
-              </button>
-            ) : (
-              <button type="submit" disabled={!input.trim()} className="p-1.5 rounded-md disabled:opacity-40 disabled:cursor-not-allowed transition-opacity shrink-0" style={{ background: 'var(--amber)', color: 'var(--amber-foreground)' }}>
-                <Send size={14} />
-              </button>
-            )}
-          </form>
-        </div>
-
-        {/* Footer hint — desktop only */}
-        <div className="hidden md:flex px-4 pb-2 items-center gap-3 text-xs text-muted-foreground/50 shrink-0">
-          <span><kbd className="font-mono">↵</kbd> {t.ask.send}</span>
-          <span><kbd className="font-mono">@</kbd> {t.ask.attachFile}</span>
-          <span><kbd className="font-mono">ESC</kbd> {t.search.close}</span>
-        </div>
       </div>
     </div>
   );

package/app/components/Breadcrumb.tsx

@@ -24,13 +24,13 @@ export default function Breadcrumb({ filePath }: { filePath: string }) {
           <span key={i} className="flex items-center gap-1">
             <ChevronRight size={12} className="text-muted-foreground/50" />
             {isLast ? (
-              <span className="flex items-center gap-1.5 text-foreground font-medium" suppressHydrationWarning>
+              <span className="flex items-center gap-1.5 text-foreground font-medium">
                 <FileTypeIcon name={part} />
-                {part}
+                <span suppressHydrationWarning>{part}</span>
               </span>
             ) : (
-              <Link href={href} className="hover:text-foreground transition-colors truncate max-w-[200px]" suppressHydrationWarning>
-                {part}
+              <Link href={href} className="hover:text-foreground transition-colors truncate max-w-[200px]">
+                <span suppressHydrationWarning>{part}</span>
               </Link>
             )}
           </span>

package/app/components/FileTree.tsx

@@ -12,6 +12,8 @@ interface FileTreeProps {
   nodes: FileNode[];
   depth?: number;
   onNavigate?: () => void;
+  /** When set, directories with depth <= this value open, others close. null = no override (manual control). */
+  maxOpenDepth?: number | null;
 }
 
 function getIcon(node: FileNode) {
@@ -85,8 +87,9 @@ function NewFileInline({ dirPath, depth, onDone }: { dirPath: string; depth: num
   );
 }
 
-function DirectoryNode({ node, depth, currentPath, onNavigate }: {
+function DirectoryNode({ node, depth, currentPath, onNavigate, maxOpenDepth }: {
   node: FileNode; depth: number; currentPath: string; onNavigate?: () => void;
+  maxOpenDepth?: number | null;
 }) {
   const router = useRouter();
   const isActive = currentPath.startsWith(node.path + '/') || currentPath === node.path;
@@ -101,6 +104,20 @@ function DirectoryNode({ node, depth, currentPath, onNavigate }: {
 
   const toggle = useCallback(() => setOpen(v => !v), []);
 
+  // React to maxOpenDepth changes from parent
+  const prevMaxOpenDepth = useRef<number | null | undefined>(undefined);
+  useEffect(() => {
+    if (maxOpenDepth === null || maxOpenDepth === undefined) {
+      prevMaxOpenDepth.current = maxOpenDepth;
+      return;
+    }
+    // Only react when value actually changes
+    if (prevMaxOpenDepth.current !== maxOpenDepth) {
+      setOpen(depth <= maxOpenDepth);
+      prevMaxOpenDepth.current = maxOpenDepth;
+    }
+  }, [maxOpenDepth, depth]);
+
   useEffect(() => {
     return () => {
       if (clickTimerRef.current) clearTimeout(clickTimerRef.current);
@@ -228,7 +245,7 @@ function DirectoryNode({ node, depth, currentPath, onNavigate }: {
         style={{ maxHeight: open ? '9999px' : '0px' }}
       >
         {node.children && (
-          <FileTree nodes={node.children} depth={depth + 1} onNavigate={onNavigate} />
+          <FileTree nodes={node.children} depth={depth + 1} onNavigate={onNavigate} maxOpenDepth={maxOpenDepth} />
         )}
         {showNewFile && (
           <NewFileInline
@@ -342,7 +359,7 @@ function FileNodeItem({ node, depth, currentPath, onNavigate }: {
   );
 }
 
-export default function FileTree({ nodes, depth = 0, onNavigate }: FileTreeProps) {
+export default function FileTree({ nodes, depth = 0, onNavigate, maxOpenDepth }: FileTreeProps) {
   const pathname = usePathname();
   const currentPath = getCurrentFilePath(pathname);
 
@@ -359,7 +376,7 @@ export default function FileTree({ nodes, depth = 0, onNavigate }: FileTreeProps
     <div className="flex flex-col gap-0.5">
       {nodes.map((node) =>
         node.type === 'directory' ? (
-          <DirectoryNode key={node.path} node={node} depth={depth} currentPath={currentPath} onNavigate={onNavigate} />
+          <DirectoryNode key={node.path} node={node} depth={depth} currentPath={currentPath} onNavigate={onNavigate} maxOpenDepth={maxOpenDepth} />
         ) : (
           <FileNodeItem key={node.path} node={node} depth={depth} currentPath={currentPath} onNavigate={onNavigate} />
         )

package/app/components/Logo.tsx

@@ -0,0 +1,39 @@
+/**
+ * MindOS Logo — the Asymmetric Infinity (∞) symbol.
+ *
+ * Each instance needs a unique `id` to avoid SVG gradient ID collisions
+ * when multiple logos render on the same page (e.g. Rail + Mobile header).
+ */
+
+interface LogoProps {
+  /** Unique ID prefix for SVG gradient definitions */
+  id: string;
+  /** Tailwind className override — default: 'w-8 h-4' */
+  className?: string;
+}
+
+export default function Logo({ id, className = 'w-8 h-4' }: LogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 80 40"
+      fill="none"
+      className={`${className} text-[var(--amber)]`}
+      aria-hidden="true"
+    >
+      <defs>
+        <linearGradient id={`grad-human-${id}`} x1="35" y1="20" x2="5" y2="20" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="currentColor" stopOpacity="0.8" />
+          <stop offset="100%" stopColor="currentColor" stopOpacity="0.3" />
+        </linearGradient>
+        <linearGradient id={`grad-agent-${id}`} x1="35" y1="20" x2="75" y2="20" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="currentColor" stopOpacity="0.8" />
+          <stop offset="100%" stopColor="currentColor" stopOpacity="1" />
+        </linearGradient>
+      </defs>
+      <path d="M35,20 C25,35 8,35 8,20 C8,5 25,5 35,20" stroke={`url(#grad-human-${id})`} strokeWidth="3" strokeDasharray="2 4" strokeLinecap="round" />
+      <path d="M35,20 C45,2 75,2 75,20 C75,38 45,38 35,20" stroke={`url(#grad-agent-${id})`} strokeWidth="4.5" strokeLinecap="round" />
+      <path d="M35,17.5 Q35,20 37.5,20 Q35,20 35,22.5 Q35,20 32.5,20 Q35,20 35,17.5 Z" fill="#FEF3C7" />
+    </svg>
+  );
+}

package/app/components/Panel.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { ChevronsDownUp, ChevronsUpDown } from 'lucide-react';
+import type { PanelId } from './ActivityBar';
+import type { FileNode } from '@/lib/types';
+import FileTree from './FileTree';
+import SyncStatusBar from './SyncStatusBar';
+import PanelHeader from './panels/PanelHeader';
+import { useResizeDrag } from '@/hooks/useResizeDrag';
+
+/** Compute the maximum directory depth of a file tree */
+function getMaxDepth(nodes: FileNode[], current = 0): number {
+  let max = current;
+  for (const n of nodes) {
+    if (n.type === 'directory') {
+      max = Math.max(max, getMaxDepth(n.children ?? [], current + 1));
+    }
+  }
+  return max;
+}
+
+const DEFAULT_PANEL_WIDTH: Record<PanelId, number> = {
+  files: 280,
+  search: 280,
+  plugins: 280,
+  agents: 280,
+};
+
+const MIN_PANEL_WIDTH = 240;
+const MAX_PANEL_WIDTH_RATIO = 0.45;
+const MAX_PANEL_WIDTH_ABS = 600;
+
+interface PanelProps {
+  activePanel: PanelId | null;
+  fileTree: FileNode[];
+  onNavigate?: () => void;
+  onOpenSyncSettings: () => void;
+  railWidth?: number;
+  /** Controlled panel width (from SidebarLayout) */
+  panelWidth?: number;
+  /** Callback when user finishes resizing */
+  onWidthChange?: (width: number) => void;
+  /** Callback on drag end — for persisting to localStorage */
+  onWidthCommit?: (width: number) => void;
+  /** Whether panel is maximized */
+  maximized?: boolean;
+  /** Callback to toggle maximize */
+  onMaximize?: () => void;
+  /** Lazy-loaded panel content for search/ask/plugins */
+  children?: React.ReactNode;
+}
+
+export default function Panel({
+  activePanel,
+  fileTree,
+  onNavigate,
+  onOpenSyncSettings,
+  railWidth = 48,
+  panelWidth,
+  onWidthChange,
+  onWidthCommit,
+  maximized = false,
+  onMaximize,
+  children,
+}: PanelProps) {
+  const open = activePanel !== null;
+  const defaultWidth = activePanel ? DEFAULT_PANEL_WIDTH[activePanel] : 280;
+  const width = maximized ? undefined : (panelWidth ?? defaultWidth);
+
+  // File tree depth control: null = manual (no override), number = forced max open depth
+  const [maxOpenDepth, setMaxOpenDepth] = useState<number | null>(null);
+  const treeMaxDepth = useMemo(() => getMaxDepth(fileTree), [fileTree]);
+
+  const handleMouseDown = useResizeDrag({
+    width: panelWidth ?? defaultWidth,
+    minWidth: MIN_PANEL_WIDTH,
+    maxWidth: MAX_PANEL_WIDTH_ABS,
+    maxWidthRatio: MAX_PANEL_WIDTH_RATIO,
+    direction: 'right',
+    disabled: maximized,
+    onResize: onWidthChange ?? (() => {}),
+    onResizeEnd: onWidthCommit ?? (() => {}),
+  });
+
+  return (
+    <aside
+      className={`
+        hidden md:flex fixed top-0 h-screen z-30
+        flex-col bg-card border-r border-border
+        transition-[transform,left,width] duration-200 ease-out
+        ${open ? 'translate-x-0' : '-translate-x-full pointer-events-none'}
+      `}
+      style={{ width: maximized ? `calc(100vw - ${railWidth}px)` : `${width}px`, left: `${railWidth}px` }}
+      role="region"
+      aria-label={activePanel ? `${activePanel} panel` : undefined}
+    >
+      {/* Files panel — always mounted to preserve tree expand/collapse state */}
+      <div className={`flex flex-col h-full ${activePanel === 'files' ? '' : 'hidden'}`}>
+        <PanelHeader title="Files">
+          <div className="flex items-center gap-0.5">
+            <button
+              onClick={() => setMaxOpenDepth(prev => {
+                const current = prev ?? treeMaxDepth;
+                return Math.max(-1, current - 1);
+              })}
+              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              aria-label="Collapse one level"
+              title="Collapse one level"
+            >
+              <ChevronsDownUp size={13} />
+            </button>
+            <button
+              onClick={() => setMaxOpenDepth(prev => {
+                const current = prev ?? 0;
+                const next = current + 1;
+                if (next > treeMaxDepth) {
+                  return null; // fully expanded → release back to manual
+                }
+                return next;
+              })}
+              className="p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              aria-label="Expand one level"
+              title="Expand one level"
+            >
+              <ChevronsUpDown size={13} />
+            </button>
+          </div>
+        </PanelHeader>
+        <div className="flex-1 overflow-y-auto min-h-0 px-2 py-2">
+          <FileTree nodes={fileTree} onNavigate={onNavigate} maxOpenDepth={maxOpenDepth} />
+        </div>
+        <SyncStatusBar collapsed={false} onOpenSyncSettings={onOpenSyncSettings} />
+      </div>
+
+      {/* Other panels — always mounted via children, visibility toggled by parent */}
+      {children}
+
+      {/* Drag resize handle */}
+      {!maximized && onWidthChange && (
+        <div
+          className="absolute top-0 -right-[3px] w-[6px] h-full cursor-col-resize z-40 group hidden md:block"
+          onMouseDown={handleMouseDown}
+        >
+          <div className="absolute right-[2px] top-0 w-[2px] h-full opacity-0 group-hover:opacity-100 bg-amber-500/60 transition-opacity" />
+        </div>
+      )}
+    </aside>
+  );
+}
+
+export { DEFAULT_PANEL_WIDTH as PANEL_WIDTH, MIN_PANEL_WIDTH, MAX_PANEL_WIDTH_RATIO, MAX_PANEL_WIDTH_ABS };