Merge branch 'main' into fix/session-streamed-to-another-chat

Add folder browser to ProjectCreationWizard

server/claude-sdk.js

@@ -603,7 +603,8 @@ async function queryClaudeSDK(command, options = {}, ws) {
       const transformedMessage = transformMessage(message);
       ws.send({
         type: 'claude-response',
-        data: transformedMessage
+        data: transformedMessage,
+        sessionId: capturedSessionId || sessionId || null
       });
 
       // Extract and send token budget updates from result messages
@@ -613,7 +614,8 @@ async function queryClaudeSDK(command, options = {}, ws) {
           console.log('Token budget from modelUsage:', tokenBudget);
           ws.send({
             type: 'token-budget',
-            data: tokenBudget
+            data: tokenBudget,
+            sessionId: capturedSessionId || sessionId || null
           });
         }
       }
@@ -651,7 +653,8 @@ async function queryClaudeSDK(command, options = {}, ws) {
     // Send error to WebSocket
     ws.send({
       type: 'claude-error',
-      error: error.message
+      error: error.message,
+      sessionId: capturedSessionId || sessionId || null
     });
 
     throw error;

server/cursor-cli.js

@@ -114,7 +114,8 @@ async function spawnCursor(command, options = {}, ws) {
                 // Send system info to frontend
                 ws.send({
                   type: 'cursor-system',
-                  data: response
+                  data: response,
+                  sessionId: capturedSessionId || sessionId || null
                 });
               }
               break;
@@ -123,7 +124,8 @@ async function spawnCursor(command, options = {}, ws) {
               // Forward user message
               ws.send({
                 type: 'cursor-user',
-                data: response
+                data: response,
+                sessionId: capturedSessionId || sessionId || null
               });
               break;
               
@@ -142,7 +144,8 @@ async function spawnCursor(command, options = {}, ws) {
                       type: 'text_delta',
                       text: textContent
                     }
-                  }
+                  },
+                  sessionId: capturedSessionId || sessionId || null
                 });
               }
               break;
@@ -157,7 +160,8 @@ async function spawnCursor(command, options = {}, ws) {
                   type: 'claude-response',
                   data: {
                     type: 'content_block_stop'
-                  }
+                  },
+                  sessionId: capturedSessionId || sessionId || null
                 });
               }
               
@@ -174,7 +178,8 @@ async function spawnCursor(command, options = {}, ws) {
               // Forward any other message types
               ws.send({
                 type: 'cursor-response',
-                data: response
+                data: response,
+                sessionId: capturedSessionId || sessionId || null
               });
           }
         } catch (parseError) {
@@ -182,7 +187,8 @@ async function spawnCursor(command, options = {}, ws) {
           // If not JSON, send as raw text
           ws.send({
             type: 'cursor-output',
-            data: line
+            data: line,
+            sessionId: capturedSessionId || sessionId || null
           });
         }
       }
@@ -193,7 +199,8 @@ async function spawnCursor(command, options = {}, ws) {
       console.error('Cursor CLI stderr:', data.toString());
       ws.send({
         type: 'cursor-error',
-        error: data.toString()
+        error: data.toString(),
+        sessionId: capturedSessionId || sessionId || null
       });
     });
     
@@ -229,7 +236,8 @@ async function spawnCursor(command, options = {}, ws) {
 
       ws.send({
         type: 'cursor-error',
-        error: error.message
+        error: error.message,
+        sessionId: capturedSessionId || sessionId || null
       });
 
       reject(error);
@@ -264,4 +272,4 @@ export {
   abortCursorSession,
   isCursorSessionActive,
   getActiveCursorSessions
-};
+};

server/index.js

@@ -496,7 +496,13 @@ app.get('/api/browse-filesystem', authenticateToken, async (req, res) => {
                 name: item.name,
                 type: 'directory'
             }))
-            .slice(0, 20); // Limit results
+            .sort((a, b) => {
+                const aHidden = a.name.startsWith('.');
+                const bHidden = b.name.startsWith('.');
+                if (aHidden && !bHidden) return 1;
+                if (!aHidden && bHidden) return -1;
+                return a.name.localeCompare(b.name);
+            });
             
         // Add common directories if browsing home directory
         const suggestions = [];

server/openai-codex.js

@@ -272,7 +272,8 @@ export async function queryCodex(command, options = {}, ws) {
           data: {
             used: totalTokens,
             total: 200000 // Default context window for Codex models
-          }
+          },
+          sessionId: currentSessionId
         });
       }
     }

src/components/ChatInterface.jsx

@@ -1894,6 +1894,9 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   // Streaming throttle buffers
   const streamBufferRef = useRef('');
   const streamTimerRef = useRef(null);
+  // Track the session that this view expects when starting a brand‑new chat
+  // (prevents background sessions from streaming into a different view).
+  const pendingViewSessionRef = useRef(null);
   const commandQueryTimerRef = useRef(null);
   const [debouncedInput, setDebouncedInput] = useState('');
   const [showFileDropdown, setShowFileDropdown] = useState(false);
@@ -1930,6 +1933,14 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   // Track provider transitions so we only clear approvals when provider truly changes.
   // This does not sync with the backend; it just prevents UI prompts from disappearing.
   const lastProviderRef = useRef(provider);
+
+  const resetStreamingState = useCallback(() => {
+    if (streamTimerRef.current) {
+      clearTimeout(streamTimerRef.current);
+      streamTimerRef.current = null;
+    }
+    streamBufferRef.current = '';
+  }, []);
   // Load permission mode for the current session
   useEffect(() => {
     if (selectedSession?.id) {
@@ -3004,6 +3015,15 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
         const sessionChanged = currentSessionId !== null && currentSessionId !== selectedSession.id;
 
         if (sessionChanged) {
+          if (!isSystemSessionChange) {
+            // Clear any streaming leftovers from the previous session
+            resetStreamingState();
+            pendingViewSessionRef.current = null;
+            setChatMessages([]);
+            setSessionMessages([]);
+            setClaudeStatus(null);
+            setCanAbortSession(false);
+          }
           // Reset pagination state when switching sessions
           setMessagesOffset(0);
           setHasMoreMessages(false);
@@ -3073,17 +3093,22 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           }
         }
       } else {
-        // Only clear messages if this is NOT a system-initiated session change AND we're not loading
-        // During system session changes or while loading, preserve the chat messages
-        if (!isSystemSessionChange && !isLoading) {
+        // New session view (no selected session) - always reset UI state
+        if (!isSystemSessionChange) {
+          resetStreamingState();
+          pendingViewSessionRef.current = null;
           setChatMessages([]);
           setSessionMessages([]);
+          setClaudeStatus(null);
+          setCanAbortSession(false);
+          setIsLoading(false);
         }
         setCurrentSessionId(null);
         sessionStorage.removeItem('cursorSessionId');
         setMessagesOffset(0);
         setHasMoreMessages(false);
         setTotalMessages(0);
+        setTokenBudget(null);
       }
 
       // Mark loading as complete after messages are set
@@ -3094,7 +3119,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     };
 
     loadMessages();
-  }, [selectedSession, selectedProject, loadCursorSessionMessages, scrollToBottom, isSystemSessionChange]);
+  }, [selectedSession, selectedProject, loadCursorSessionMessages, scrollToBottom, isSystemSessionChange, resetStreamingState]);
 
   // External Message Update Handler: Reload messages when external CLI modifies current session
   // This triggers when App.jsx detects a JSONL file change for the currently-viewed session
@@ -3133,6 +3158,13 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     }
   }, [externalMessageUpdate, selectedSession, selectedProject, loadCursorSessionMessages, loadSessionMessages, isNearBottom, autoScrollToBottom, scrollToBottom]);
 
+  // When the user navigates to a specific session, clear any pending "new session" marker.
+  useEffect(() => {
+    if (selectedSession?.id) {
+      pendingViewSessionRef.current = null;
+    }
+  }, [selectedSession?.id]);
+
   // Update chatMessages when convertedMessages changes
   useEffect(() => {
     if (sessionMessages.length > 0) {
@@ -3197,17 +3229,77 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     // Handle WebSocket messages
     if (messages.length > 0) {
       const latestMessage = messages[messages.length - 1];
+      const messageData = latestMessage.data?.message || latestMessage.data;
 
       // Filter messages by session ID to prevent cross-session interference
       // Skip filtering for global messages that apply to all sessions
-      const globalMessageTypes = ['projects_updated', 'taskmaster-project-updated', 'session-created', 'claude-complete', 'codex-complete'];
+      const globalMessageTypes = ['projects_updated', 'taskmaster-project-updated', 'session-created'];
       const isGlobalMessage = globalMessageTypes.includes(latestMessage.type);
+      const lifecycleMessageTypes = new Set([
+        'claude-complete',
+        'codex-complete',
+        'cursor-result',
+        'session-aborted',
+        'claude-error',
+        'cursor-error',
+        'codex-error'
+      ]);
 
-      // For new sessions (currentSessionId is null), allow messages through
-      if (!isGlobalMessage && latestMessage.sessionId && currentSessionId && latestMessage.sessionId !== currentSessionId) {
-        // Message is for a different session, ignore it
-        console.log('⏭️ Skipping message for different session:', latestMessage.sessionId, 'current:', currentSessionId);
-        return;
+      const isClaudeSystemInit = latestMessage.type === 'claude-response' &&
+        messageData &&
+        messageData.type === 'system' &&
+        messageData.subtype === 'init';
+      const isCursorSystemInit = latestMessage.type === 'cursor-system' &&
+        latestMessage.data &&
+        latestMessage.data.type === 'system' &&
+        latestMessage.data.subtype === 'init';
+
+      const systemInitSessionId = isClaudeSystemInit
+        ? messageData?.session_id
+        : isCursorSystemInit
+          ? latestMessage.data?.session_id
+          : null;
+
+      const activeViewSessionId = selectedSession?.id || currentSessionId || pendingViewSessionRef.current?.sessionId || null;
+      const isSystemInitForView = systemInitSessionId && (!activeViewSessionId || systemInitSessionId === activeViewSessionId);
+      const shouldBypassSessionFilter = isGlobalMessage || isSystemInitForView;
+      const isUnscopedError = !latestMessage.sessionId &&
+        pendingViewSessionRef.current &&
+        !pendingViewSessionRef.current.sessionId &&
+        (latestMessage.type === 'claude-error' || latestMessage.type === 'cursor-error' || latestMessage.type === 'codex-error');
+
+      const handleBackgroundLifecycle = (sessionId) => {
+        if (!sessionId) return;
+        if (onSessionInactive) {
+          onSessionInactive(sessionId);
+        }
+        if (onSessionNotProcessing) {
+          onSessionNotProcessing(sessionId);
+        }
+      };
+
+      if (!shouldBypassSessionFilter) {
+        if (!activeViewSessionId) {
+          // No session in view; ignore session-scoped traffic.
+          if (latestMessage.sessionId && lifecycleMessageTypes.has(latestMessage.type)) {
+            handleBackgroundLifecycle(latestMessage.sessionId);
+          }
+          if (!isUnscopedError) {
+            return;
+          }
+        }
+        if (!latestMessage.sessionId && !isUnscopedError) {
+          // Drop unscoped messages to prevent cross-session bleed.
+          return;
+        }
+        if (latestMessage.sessionId !== activeViewSessionId) {
+          if (latestMessage.sessionId && lifecycleMessageTypes.has(latestMessage.type)) {
+            handleBackgroundLifecycle(latestMessage.sessionId);
+          }
+          // Message is for a different session, ignore it
+          console.log('??-?,? Skipping message for different session:', latestMessage.sessionId, 'current:', activeViewSessionId);
+          return;
+        }
       }
 
       switch (latestMessage.type) {
@@ -3216,6 +3308,9 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           // Store it temporarily until conversation completes (prevents premature session association)
           if (latestMessage.sessionId && !currentSessionId) {
             sessionStorage.setItem('pendingSessionId', latestMessage.sessionId);
+            if (pendingViewSessionRef.current && !pendingViewSessionRef.current.sessionId) {
+              pendingViewSessionRef.current.sessionId = latestMessage.sessionId;
+            }
             
             // Mark as system change to prevent clearing messages when session ID updates
             setIsSystemSessionChange(true);
@@ -3244,7 +3339,6 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           break;
 
         case 'claude-response':
-          const messageData = latestMessage.data.message || latestMessage.data;
           
           // Handle Cursor streaming format (content_block_delta / content_block_stop)
           if (messageData && typeof messageData === 'object' && messageData.type) {
@@ -3313,7 +3407,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               latestMessage.data.subtype === 'init' && 
               latestMessage.data.session_id && 
               currentSessionId && 
-              latestMessage.data.session_id !== currentSessionId) {
+              latestMessage.data.session_id !== currentSessionId &&
+              isSystemInitForView) {
             
             console.log('🔄 Claude CLI session duplication detected:', {
               originalSession: currentSessionId,
@@ -3336,7 +3431,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           if (latestMessage.data.type === 'system' && 
               latestMessage.data.subtype === 'init' && 
               latestMessage.data.session_id && 
-              !currentSessionId) {
+              !currentSessionId &&
+              isSystemInitForView) {
             
             console.log('🔄 New session init detected:', {
               newSession: latestMessage.data.session_id
@@ -3357,7 +3453,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               latestMessage.data.subtype === 'init' && 
               latestMessage.data.session_id && 
               currentSessionId && 
-              latestMessage.data.session_id === currentSessionId) {
+              latestMessage.data.session_id === currentSessionId &&
+              isSystemInitForView) {
             console.log('🔄 System init message for current session, ignoring');
             return; // Don't process the message further
           }
@@ -3525,6 +3622,9 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           try {
             const cdata = latestMessage.data;
             if (cdata && cdata.type === 'system' && cdata.subtype === 'init' && cdata.session_id) {
+              if (!isSystemInitForView) {
+                return;
+              }
               // If we already have a session and this differs, switch (duplication/redirect)
               if (currentSessionId && cdata.session_id !== currentSessionId) {
                 console.log('🔄 Cursor session switch detected:', { originalSession: currentSessionId, newSession: cdata.session_id });
@@ -4316,6 +4416,11 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     // Session Protection: Mark session as active to prevent automatic project updates during conversation
     // Use existing session if available; otherwise a temporary placeholder until backend provides real ID
     const sessionToActivate = effectiveSessionId || `new-session-${Date.now()}`;
+    if (!effectiveSessionId && !selectedSession?.id) {
+      // We are starting a brand-new session in this view. Track it so we only
+      // accept streaming updates for this run.
+      pendingViewSessionRef.current = { sessionId: null, startedAt: Date.now() };
+    }
     if (onSessionActive) {
       onSessionActive(sessionToActivate);
     }

src/components/ProjectCreationWizard.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { X, FolderPlus, GitBranch, Key, ChevronRight, ChevronLeft, Check, Loader2, AlertCircle } from 'lucide-react';
+import { X, FolderPlus, GitBranch, Key, ChevronRight, ChevronLeft, Check, Loader2, AlertCircle, FolderOpen, Eye, EyeOff } from 'lucide-react';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { api } from '../utils/api';
@@ -7,7 +7,7 @@ import { api } from '../utils/api';
 const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
   // Wizard state
   const [step, setStep] = useState(1); // 1: Choose type, 2: Configure, 3: Confirm
-  const [workspaceType, setWorkspaceType] = useState(null); // 'existing' or 'new'
+  const [workspaceType, setWorkspaceType] = useState('existing'); // 'existing' or 'new' - default to 'existing'
 
   // Form state
   const [workspacePath, setWorkspacePath] = useState('');
@@ -23,6 +23,11 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
   const [loadingTokens, setLoadingTokens] = useState(false);
   const [pathSuggestions, setPathSuggestions] = useState([]);
   const [showPathDropdown, setShowPathDropdown] = useState(false);
+  const [showFolderBrowser, setShowFolderBrowser] = useState(false);
+  const [browserCurrentPath, setBrowserCurrentPath] = useState('~');
+  const [browserFolders, setBrowserFolders] = useState([]);
+  const [loadingFolders, setLoadingFolders] = useState(false);
+  const [showHiddenFolders, setShowHiddenFolders] = useState(false);
 
   // Load available GitHub tokens when needed
   useEffect(() => {
@@ -155,6 +160,37 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
     setShowPathDropdown(false);
   };
 
+  const openFolderBrowser = async () => {
+    setShowFolderBrowser(true);
+    await loadBrowserFolders('~');
+  };
+
+  const loadBrowserFolders = async (path) => {
+    try {
+      setLoadingFolders(true);
+      setBrowserCurrentPath(path);
+      const response = await api.browseFilesystem(path);
+      const data = await response.json();
+      setBrowserFolders(data.suggestions || []);
+    } catch (error) {
+      console.error('Error loading folders:', error);
+    } finally {
+      setLoadingFolders(false);
+    }
+  };
+
+  const selectFolder = (folderPath, advanceToConfirm = false) => {
+    setWorkspacePath(folderPath);
+    setShowFolderBrowser(false);
+    if (advanceToConfirm) {
+      setStep(3);
+    }
+  };
+
+  const navigateToFolder = async (folderPath) => {
+    await loadBrowserFolders(folderPath);
+  };
+
   return (
     <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[60] p-0 sm:p-4">
       <div className="bg-white dark:bg-gray-800 rounded-none sm:rounded-lg shadow-xl w-full h-full sm:h-auto sm:max-w-2xl border-0 sm:border border-gray-200 dark:border-gray-700 overflow-y-auto">
@@ -290,28 +326,39 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                 <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                   {workspaceType === 'existing' ? 'Workspace Path' : 'Where should the workspace be created?'}
                 </label>
-                <div className="relative">
-                  <Input
-                    type="text"
-                    value={workspacePath}
-                    onChange={(e) => setWorkspacePath(e.target.value)}
-                    placeholder={workspaceType === 'existing' ? '/path/to/existing/workspace' : '/path/to/new/workspace'}
-                    className="w-full"
-                  />
-                  {showPathDropdown && pathSuggestions.length > 0 && (
-                    <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                      {pathSuggestions.map((suggestion, index) => (
-                        <button
-                          key={index}
-                          onClick={() => selectPathSuggestion(suggestion)}
-                          className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
-                        >
-                          <div className="font-medium text-gray-900 dark:text-white">{suggestion.name}</div>
-                          <div className="text-xs text-gray-500 dark:text-gray-400">{suggestion.path}</div>
-                        </button>
-                      ))}
-                    </div>
-                  )}
+                <div className="relative flex gap-2">
+                  <div className="flex-1 relative">
+                    <Input
+                      type="text"
+                      value={workspacePath}
+                      onChange={(e) => setWorkspacePath(e.target.value)}
+                      placeholder={workspaceType === 'existing' ? '/path/to/existing/workspace' : '/path/to/new/workspace'}
+                      className="w-full"
+                    />
+                    {showPathDropdown && pathSuggestions.length > 0 && (
+                      <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                        {pathSuggestions.map((suggestion, index) => (
+                          <button
+                            key={index}
+                            onClick={() => selectPathSuggestion(suggestion)}
+                            className="w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-700 text-sm"
+                          >
+                            <div className="font-medium text-gray-900 dark:text-white">{suggestion.name}</div>
+                            <div className="text-xs text-gray-500 dark:text-gray-400">{suggestion.path}</div>
+                          </button>
+                        ))}
+                      </div>
+                    )}
+                  </div>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={openFolderBrowser}
+                    className="px-3"
+                    title="Browse folders"
+                  >
+                    <FolderOpen className="w-4 h-4" />
+                  </Button>
                 </div>
                 <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                   {workspaceType === 'existing'
@@ -563,6 +610,121 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
           </Button>
         </div>
       </div>
+
+      {/* Folder Browser Modal */}
+      {showFolderBrowser && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-[70] p-4">
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-2xl max-h-[80vh] border border-gray-200 dark:border-gray-700 flex flex-col">
+            {/* Browser Header */}
+            <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/50 rounded-lg flex items-center justify-center">
+                  <FolderOpen className="w-4 h-4 text-blue-600 dark:text-blue-400" />
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                  Select Folder
+                </h3>
+              </div>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={() => setShowHiddenFolders(!showHiddenFolders)}
+                  className={`p-2 rounded-md transition-colors ${
+                    showHiddenFolders
+                      ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30'
+                      : 'text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
+                  }`}
+                  title={showHiddenFolders ? 'Hide hidden folders' : 'Show hidden folders'}
+                >
+                  {showHiddenFolders ? <Eye className="w-5 h-5" /> : <EyeOff className="w-5 h-5" />}
+                </button>
+                <button
+                  onClick={() => setShowFolderBrowser(false)}
+                  className="p-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700"
+                >
+                  <X className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+
+            {/* Folder List */}
+            <div className="flex-1 overflow-y-auto p-4">
+              {loadingFolders ? (
+                <div className="flex items-center justify-center py-8">
+                  <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+                </div>
+              ) : browserFolders.length === 0 ? (
+                <div className="text-center py-8 text-gray-500 dark:text-gray-400">
+                  No folders found
+                </div>
+              ) : (
+                <div className="space-y-1">
+                  {/* Parent Directory */}
+                  {browserCurrentPath !== '~' && browserCurrentPath !== '/' && (
+                    <button
+                      onClick={() => {
+                        const parentPath = browserCurrentPath.substring(0, browserCurrentPath.lastIndexOf('/')) || '/';
+                        navigateToFolder(parentPath);
+                      }}
+                      className="w-full px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
+                    >
+                      <FolderOpen className="w-5 h-5 text-gray-400" />
+                      <span className="font-medium text-gray-700 dark:text-gray-300">..</span>
+                    </button>
+                  )}
+
+                  {/* Folders */}
+                  {browserFolders
+                    .filter(folder => showHiddenFolders || !folder.name.startsWith('.'))
+                    .sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()))
+                    .map((folder, index) => (
+                    <div key={index} className="flex items-center gap-2">
+                      <button
+                        onClick={() => navigateToFolder(folder.path)}
+                        className="flex-1 px-4 py-3 text-left hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg flex items-center gap-3"
+                      >
+                        <FolderPlus className="w-5 h-5 text-blue-500" />
+                        <span className="font-medium text-gray-900 dark:text-white">{folder.name}</span>
+                      </button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => selectFolder(folder.path, true)}
+                        className="text-xs px-3"
+                      >
+                        Select
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* Browser Footer with Current Path */}
+            <div className="border-t border-gray-200 dark:border-gray-700">
+              <div className="px-4 py-3 bg-gray-50 dark:bg-gray-900/50 flex items-center gap-2">
+                <span className="text-sm text-gray-600 dark:text-gray-400">Path:</span>
+                <code className="text-sm font-mono text-gray-900 dark:text-white flex-1 truncate">
+                  {browserCurrentPath}
+                </code>
+              </div>
+              <div className="flex items-center justify-end gap-2 p-4">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowFolderBrowser(false)}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => selectFolder(browserCurrentPath, true)}
+                >
+                  Use this folder
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };