@benzsiangco/jarvis 1.0.0 → 1.1.0

package/src/web/ui/src/components/Layout/Sidebar.tsx

@@ -0,0 +1,895 @@
+import React, { useState, useEffect } from 'react';
+import { 
+  Plus, MessageSquare, Folder, Hash, Settings, Bot, ChevronRight, 
+  Trash2, MoreHorizontal, Clock, Search, ChevronLeft, Layout,
+  FolderPlus, HelpCircle, ChevronDown, X, Loader2
+} from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useUIStore, type Workspace } from '../../store/uiStore';
+import type { Session, SidebarProps } from '../../types';
+
+const cn = (...classes: any[]) => classes.filter(Boolean).join(' ');
+
+function SessionNode({ 
+  session, 
+  allSessions, 
+  depth = 0, 
+  currentSessionId, 
+  onSessionSelect,
+  onContextMenu
+}: { 
+  session: Session, 
+  allSessions: Session[], 
+  depth?: number, 
+  currentSessionId: string | null, 
+  onSessionSelect: (id: string) => void,
+  onContextMenu?: (e: React.MouseEvent, session: Session) => void
+}) {
+  const [isOpen, setIsOpen] = useState(true);
+  const children = allSessions.filter(s => s.parentId === session.id);
+  const hasChildren = children.length > 0;
+  const isActive = currentSessionId === session.id;
+
+  return (
+    <div className="space-y-1">
+      <button 
+        onClick={() => onSessionSelect(session.id)}
+        onContextMenu={(e) => onContextMenu?.(e, session)}
+        className={cn(
+          "flex items-center gap-2 w-full p-2 rounded-lg text-left transition-all group relative",
+          isActive 
+            ? "bg-cyan-900/20 text-cyan-200 shadow-[0_0_10px_rgba(6,182,212,0.1)] ring-1 ring-cyan-500/30" 
+            : "text-zinc-500 hover:bg-zinc-900/50 hover:text-zinc-300"
+        )}
+        style={{ paddingLeft: `${(depth * 12) + 8}px` }}
+      >
+        {hasChildren && (
+          <div 
+            onClick={(e) => { e.stopPropagation(); setIsOpen(!isOpen); }}
+            className={cn(
+              "p-0.5 rounded transition-colors shrink-0",
+              isActive ? "text-cyan-500 hover:bg-cyan-900/30" : "hover:bg-zinc-700"
+            )}
+          >
+            {isOpen ? <ChevronDown size={12} /> : <ChevronRight size={12} />}
+          </div>
+        )}
+        {!hasChildren && depth > 0 && <div className="w-3 shrink-0" />}
+        <div className={cn("w-1.5 h-1.5 rounded-full shrink-0 shadow-[0_0_5px_currentColor]", isActive ? "bg-cyan-500" : "bg-zinc-700")} />
+        <span className="text-xs font-bold truncate flex-1">{session.title || "New Protocol"}</span>
+      </button>
+
+      {hasChildren && isOpen && (
+        <div className="space-y-1">
+          {children.map(child => (
+            <SessionNode 
+              key={child.id} 
+              session={child} 
+              allSessions={allSessions} 
+              depth={depth + 1} 
+              currentSessionId={currentSessionId}
+              onSessionSelect={onSessionSelect}
+              onContextMenu={onContextMenu}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function Sidebar({ isCollapsed, onToggle, currentSessionId, onSessionSelect }: Omit<SidebarProps, 'activeModule' | 'onModuleChange'>) {
+  const { 
+    workspaces, setWorkspaces, addWorkspace, removeWorkspace,
+    activeWorkspaceId, setActiveWorkspace,
+    activeModule, setActiveModule, 
+    setSettingsOpen
+  } = useUIStore();
+
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isAddingWorkspace, setIsAddingWorkspace] = useState(false);
+  const [showFolderModal, setShowFolderModal] = useState(false);
+  const [selectedFolderPath, setSelectedFolderPath] = useState<string>('');
+  const [selectedFolderName, setSelectedFolderName] = useState<string>('');
+  const [deleteConfirmModal, setDeleteConfirmModal] = useState<{
+    type: 'workspace' | 'session';
+    id: string;
+    name: string;
+  } | null>(null);
+  const [showCleanConfirm, setShowCleanConfirm] = useState(false);
+  const [contextMenu, setContextMenu] = useState<{
+    x: number;
+    y: number;
+    type: 'workspace' | 'session';
+    id: string;
+    name: string;
+  } | null>(null);
+  
+  const folderInputRef = React.useRef<HTMLInputElement>(null);
+
+  // Fetch workspaces on load
+  useEffect(() => {
+    const loadWorkspaces = async () => {
+      try {
+        console.log('[Sidebar] Loading workspaces...');
+        const res = await fetch('/api/workspaces');
+        const data = await res.json();
+        
+        if (data.workspaces && Array.isArray(data.workspaces)) {
+          console.log('[Sidebar] Loaded workspaces:', data.workspaces.length);
+          
+          // Set all workspaces at once
+          setWorkspaces(data.workspaces);
+          
+          // Auto-activate first workspace if none active
+          if (!activeWorkspaceId && data.workspaces.length > 0) {
+            setActiveWorkspace(data.workspaces[0].id);
+          }
+        }
+      } catch (e) {
+        console.error('[Sidebar] Failed to load workspaces:', e);
+      }
+    };
+    
+    loadWorkspaces();
+  }, []);
+
+  const activeWorkspace = workspaces.find(w => w.id === activeWorkspaceId);
+
+  const refreshSessions = async () => {
+    try {
+      const url = activeWorkspace ? `/api/sessions?workdir=${encodeURIComponent(activeWorkspace.path)}` : '/api/sessions';
+      const res = await fetch(url);
+      const data = await res.json();
+      if (Array.isArray(data)) setSessions(data);
+    } catch (e) { console.error(e); }
+  };
+
+  useEffect(() => {
+    refreshSessions();
+  }, [activeWorkspaceId]);
+
+  const handleFolderSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    
+    if (!files || files.length === 0) {
+      console.log('[Sidebar] No folder selected');
+      return;
+    }
+    
+    // Extract folder name from webkitRelativePath
+    // Example: "MyProject/src/index.js" -> "MyProject"
+    const firstFile = files[0];
+    if (!firstFile) return;
+    
+    const pathParts = firstFile.webkitRelativePath.split('/');
+    const folderName = pathParts[0] || 'Workspace';
+    
+    console.log('[Sidebar] Folder selected:', folderName);
+    
+    // Set folder info for modal confirmation
+    setSelectedFolderPath(folderName);
+    setSelectedFolderName(folderName);
+    setShowFolderModal(true);
+  };
+
+  const handleAddWorkspace = async () => {
+    if (isAddingWorkspace) return;
+    
+    try {
+      // Check if running in Electron
+      if (typeof window !== 'undefined' && window.electron?.isElectron) {
+        console.log('[Sidebar] Using Electron native folder picker');
+        
+        // Use Electron's native folder picker
+        const folderPath = await window.electron.selectFolder();
+        
+        if (!folderPath) {
+          console.log('[Sidebar] User cancelled folder selection');
+          return;
+        }
+        
+        // Extract folder name from full path
+        const folderName = folderPath.split(/[\\/]/).pop() || 'Workspace';
+        
+        console.log('[Sidebar] Selected folder:', folderName, 'Path:', folderPath);
+        
+        // Show modal with selected folder
+        setSelectedFolderPath(folderPath);
+        setSelectedFolderName(folderName);
+        setShowFolderModal(true);
+        
+      } else {
+        // Use HTML5 directory picker for web mode
+        console.log('[Sidebar] Using HTML5 directory picker');
+        folderInputRef.current?.click();
+      }
+      
+    } catch (e) {
+      console.error('[Sidebar] Failed to select folder:', e);
+    }
+  };
+
+  const confirmAddWorkspace = async () => {
+    if (!selectedFolderPath || !selectedFolderName) return;
+    
+    setIsAddingWorkspace(true);
+    
+    try {
+      // Create workspace with the selected path
+      const res = await fetch('/api/workspaces', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ 
+          name: selectedFolderName,
+          path: selectedFolderPath
+        })
+      });
+      
+      const data = await res.json();
+      
+      if (!res.ok) {
+        if (res.status === 409 && data.workspace) {
+          addWorkspace(data.workspace);
+          setActiveWorkspace(data.workspace.id);
+        } else {
+          console.error(`Failed to create workspace: ${data.error}`);
+        }
+      } else if (data.id) {
+        console.log('[Sidebar] Workspace created:', data);
+        addWorkspace(data);
+        setActiveWorkspace(data.id);
+        refreshSessions();
+      }
+      
+      // Close modal and reset
+      setShowFolderModal(false);
+      setSelectedFolderPath('');
+      setSelectedFolderName('');
+      
+      // Reset input to allow selecting same folder again
+      if (folderInputRef.current) {
+        folderInputRef.current.value = '';
+      }
+    } catch (e) {
+      console.error('[Sidebar] Failed to create workspace:', e);
+    } finally {
+      setIsAddingWorkspace(false);
+    }
+  };
+
+  const handleDeleteWorkspace = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    
+    // Find workspace name
+    const workspace = workspaces.find(w => w.id === id);
+    if (!workspace) return;
+    
+    // Show delete confirmation modal
+    setDeleteConfirmModal({
+      type: 'workspace',
+      id: id,
+      name: workspace.name
+    });
+  };
+
+  // Context menu handlers
+  const handleWorkspaceContextMenu = (e: React.MouseEvent, ws: Workspace) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('[Sidebar] Workspace context menu:', ws.name);
+    
+    setContextMenu({
+      x: e.clientX,
+      y: e.clientY,
+      type: 'workspace',
+      id: ws.id,
+      name: ws.name
+    });
+  };
+
+  const handleSessionContextMenu = (e: React.MouseEvent, session: Session) => {
+    e.preventDefault();
+    e.stopPropagation();
+    console.log('[Sidebar] Session context menu:', session.title);
+    
+    setContextMenu({
+      x: e.clientX,
+      y: e.clientY,
+      type: 'session',
+      id: session.id,
+      name: session.title
+    });
+  };
+
+  const handleContextMenuDelete = () => {
+    if (!contextMenu) return;
+    
+    // Show delete confirmation modal
+    setDeleteConfirmModal({
+      type: contextMenu.type,
+      id: contextMenu.id,
+      name: contextMenu.name
+    });
+    
+    setContextMenu(null);
+  };
+
+  const confirmDelete = async () => {
+    if (!deleteConfirmModal) return;
+    
+    try {
+      if (deleteConfirmModal.type === 'workspace') {
+        const res = await fetch(`/api/workspaces/${deleteConfirmModal.id}`, { method: 'DELETE' });
+        if (res.ok) {
+          console.log('[Sidebar] Workspace deleted:', deleteConfirmModal.id);
+          removeWorkspace(deleteConfirmModal.id);
+        } else {
+          throw new Error('Delete request failed');
+        }
+      } else {
+        await fetch(`/api/sessions/${deleteConfirmModal.id}`, { method: 'DELETE' });
+        refreshSessions();
+      }
+    } catch (e) {
+      console.error(`Failed to delete ${deleteConfirmModal.type}:`, e);
+    }
+    
+    setDeleteConfirmModal(null);
+  };
+
+  const confirmCleanWorkspaces = async () => {
+    try {
+      const res = await fetch('/api/workspaces', { method: 'DELETE' });
+      if (res.ok) {
+        console.log('[Sidebar] All workspaces cleaned');
+        setWorkspaces([]);
+        setActiveWorkspace(null);
+      }
+    } catch (e) {
+      console.error('[Sidebar] Failed to clean workspaces:', e);
+    }
+    
+    setShowCleanConfirm(false);
+  };
+
+  // Close context menu on outside click
+  useEffect(() => {
+    const handleClickOutside = () => setContextMenu(null);
+    if (contextMenu) {
+      document.addEventListener('click', handleClickOutside);
+      return () => document.removeEventListener('click', handleClickOutside);
+    }
+  }, [contextMenu]);
+
+  const handleModuleClick = (module: 'chat' | 'settings') => {
+    setActiveModule(module);
+  };
+
+  const createNewSession = async () => {
+    if (!activeWorkspace) {
+      console.warn('[Sidebar] No workspace selected');
+      return;
+    }
+    
+    try {
+      console.log('[Sidebar] Creating session in workspace:', activeWorkspace.path);
+      
+      const res = await fetch('/api/sessions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ agentId: 'build', workdir: activeWorkspace.path })
+      });
+      
+      const data = await res.json();
+      console.log('[Sidebar] Session created:', data.id);
+      
+      onSessionSelect(data.id);
+      handleModuleClick('chat');
+      refreshSessions();
+    } catch (e) { 
+      console.error('[Sidebar] Failed to create session:', e);
+    }
+  };
+
+  // Only top-level sessions for the root list
+  const rootSessions = sessions.filter(s => !s.parentId);
+
+  return (
+    <div className="flex h-full bg-zinc-950 border-r border-zinc-900 overflow-hidden shrink-0 z-40 shadow-2xl">
+      
+      {/* FAR LEFT: WORKSPACE RAIL */}
+      <div className="w-16 flex flex-col items-center py-4 gap-4 border-r border-zinc-900/50 bg-zinc-950 shrink-0">
+        <div 
+          onClick={() => handleModuleClick('chat')}
+          className="w-10 h-10 rounded-xl bg-cyan-600 flex items-center justify-center text-white font-black shadow-lg shadow-cyan-900/20 cursor-pointer hover:scale-105 transition-transform"
+        >
+          J
+        </div>
+        
+        <div className="w-8 h-px bg-zinc-800" />
+        
+        <div className="flex flex-col gap-3 flex-1 overflow-y-auto no-scrollbar py-2">
+          {/* Workspace Icons */}
+          {workspaces.map(ws => (
+            <div 
+              key={ws.id}
+              title={`${ws.name}\n${ws.path}`}
+              onClick={() => { 
+                console.log('[Sidebar] Switching to workspace:', ws.name);
+                setActiveWorkspace(ws.id); 
+                handleModuleClick('chat'); 
+              }}
+              onContextMenu={(e) => handleWorkspaceContextMenu(e, ws)}
+              className={cn(
+                "w-10 h-10 rounded-xl flex items-center justify-center text-xs font-black cursor-pointer transition-all border shrink-0 relative group/ws",
+                activeWorkspaceId === ws.id 
+                  ? "bg-cyan-900/20 border-cyan-500 text-cyan-400 shadow-[0_0_15px_rgba(6,182,212,0.3)] ring-2 ring-cyan-500/20" 
+                  : "bg-zinc-900 border-zinc-800 text-zinc-600 hover:border-zinc-700 hover:text-zinc-400 hover:bg-zinc-800/50"
+              )}
+            >
+              {/* Pulse animation for active */}
+              {activeWorkspaceId === ws.id && (
+                <div className="absolute inset-0 bg-cyan-400/10 rounded-xl animate-pulse" />
+              )}
+              
+              {/* Icon */}
+              <span className="relative z-10">{ws.icon}</span>
+              
+              {/* Delete button */}
+              <button 
+                onClick={(e) => handleDeleteWorkspace(e, ws.id)}
+                className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-red-600 text-white flex items-center justify-center opacity-0 group-hover/ws:opacity-100 hover:bg-red-500 transition-all z-20 shadow-lg"
+                title="Delete workspace"
+              >
+                <X size={8} strokeWidth={4} />
+              </button>
+            </div>
+          ))}
+          
+          <button 
+            onClick={handleAddWorkspace}
+            disabled={isAddingWorkspace}
+            className={cn(
+              "w-10 h-10 rounded-xl flex items-center justify-center border border-dashed transition-all cursor-pointer group relative",
+              isAddingWorkspace 
+                ? "bg-zinc-900 border-cyan-500 text-cyan-500 animate-pulse cursor-wait"
+                : "bg-zinc-950 border-zinc-900 text-zinc-700 hover:border-zinc-600 hover:text-zinc-400"
+            )}
+            title="Add workspace (browse folder)"
+          >
+            {isAddingWorkspace ? (
+              <div className="animate-spin">
+                <Loader2 size={18} />
+              </div>
+            ) : (
+              <Plus size={18} className="group-hover:scale-110 transition-transform" />
+            )}
+          </button>
+          
+          {/* Hidden directory input for HTML5 folder picker */}
+          <input 
+            type="file" 
+            ref={folderInputRef}
+            className="hidden"
+            onChange={handleFolderSelect}
+            {...({ webkitdirectory: "", directory: "" } as any)}
+          />
+        </div>
+
+        <div className="flex flex-col gap-4 mt-auto">
+          {workspaces.length > 0 && (
+            <button 
+              onClick={() => setShowCleanConfirm(true)}
+              className="text-zinc-700 hover:text-red-400 transition-colors"
+              title="Clean all workspaces"
+            >
+              <Trash2 size={20} />
+            </button>
+          )}
+          <button 
+            onClick={() => setSettingsOpen(true)}
+            className="text-zinc-700 hover:text-zinc-400 transition-colors"
+          >
+            <Settings size={20} />
+          </button>
+          <button className="text-zinc-700 hover:text-zinc-400 transition-colors">
+            <HelpCircle size={20} />
+          </button>
+        </div>
+      </div>
+
+      {/* SESSION EXPLORER (Collapsible) */}
+      <motion.div 
+        initial={false}
+        animate={{ width: isCollapsed ? 0 : 260 }}
+        className="flex flex-col bg-zinc-950 h-full overflow-hidden"
+      >
+        <div className="w-[260px] p-4 flex flex-col h-full">
+          {/* Header */}
+          <div className="mb-6 px-1 flex flex-col gap-1">
+            <div className="flex items-center justify-between">
+              <h2 className="text-lg font-black text-zinc-100 tracking-tighter italic uppercase">jarvis</h2>
+              <button onClick={onToggle} className="text-zinc-700 hover:text-zinc-400 transition-colors">
+                <ChevronLeft size={16} />
+              </button>
+            </div>
+            <p className="text-[10px] text-zinc-600 font-mono truncate max-w-full opacity-60 leading-tight">
+              {activeWorkspace?.path || "D:\\Benz Siangco Creatives\\VibeCode\\opencode\\jar..."}
+            </p>
+          </div>
+
+          <button 
+            onClick={createNewSession}
+            className="flex items-center justify-center gap-2 w-full p-2.5 bg-zinc-900/50 border border-zinc-800/50 rounded-xl hover:bg-zinc-800 transition-all mb-8 group active:scale-[0.98]"
+          >
+            <Plus size={16} className="text-zinc-500 group-hover:text-white" />
+            <span className="text-xs font-bold text-zinc-300">New session</span>
+          </button>
+
+          {/* Sessions Tree - Grouped by Workspace */}
+          <div className="flex-1 overflow-y-auto no-scrollbar -mx-2 px-2">
+            {activeWorkspace ? (
+              <>
+                {/* Active workspace header */}
+                <div className="px-2 py-2 mb-2">
+                  <p className="text-[10px] text-zinc-500 uppercase tracking-wider font-bold">
+                    {activeWorkspace.name}
+                  </p>
+                </div>
+
+                {/* Sessions for active workspace */}
+                <div className="space-y-1">
+                  {rootSessions
+                    .filter(s => !s.workdir || s.workdir === activeWorkspace.path)
+                    .map((s) => (
+                      <SessionNode 
+                        key={s.id} 
+                        session={s} 
+                        allSessions={sessions} 
+                        currentSessionId={currentSessionId}
+                        onSessionSelect={onSessionSelect}
+                        onContextMenu={handleSessionContextMenu}
+                      />
+                    ))}
+                </div>
+
+                {/* Show other workspaces sessions (collapsed) */}
+                {workspaces.filter(ws => ws.id !== activeWorkspaceId).map(ws => {
+                  const wsSessions = rootSessions.filter(s => s.workdir === ws.path);
+                  if (wsSessions.length === 0) return null;
+
+                  return (
+                    <details key={ws.id} className="mt-4">
+                      <summary className="px-2 py-2 cursor-pointer hover:bg-zinc-900/30 rounded-lg text-[10px] text-zinc-600 uppercase tracking-wider font-bold flex items-center gap-2 list-none">
+                        <ChevronRight size={12} className="transition-transform [[details[open]>summary>&]]:rotate-90" />
+                        {ws.name} ({wsSessions.length})
+                      </summary>
+                      <div className="mt-2 space-y-1 pl-2">
+                        {wsSessions.map(session => (
+                          <SessionNode 
+                            key={session.id}
+                            session={session}
+                            allSessions={sessions}
+                            currentSessionId={currentSessionId}
+                            onSessionSelect={onSessionSelect}
+                            onContextMenu={handleSessionContextMenu}
+                          />
+                        ))}
+                      </div>
+                    </details>
+                  );
+                })}
+              </>
+            ) : (
+              <motion.div 
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="flex flex-col items-center justify-center text-center px-4 py-8 gap-4"
+              >
+                {/* Folder icon with pulse */}
+                <motion.div 
+                  animate={{ scale: [1, 1.05, 1] }}
+                  transition={{ repeat: Infinity, duration: 2 }}
+                  className="w-16 h-16 rounded-xl bg-gradient-to-br from-cyan-900/30 to-cyan-600/10 border border-cyan-500/30 flex items-center justify-center text-cyan-400"
+                >
+                  <Folder size={32} />
+                </motion.div>
+
+                <div>
+                  <h3 className="text-sm font-black text-zinc-300 mb-2">Welcome to JARVIS</h3>
+                  <p className="text-xs text-zinc-500 mb-6">Let's get started with your AI coding assistant</p>
+                </div>
+
+                {/* Tutorial steps */}
+                <div className="space-y-4 w-full">
+                  <div className="flex items-start gap-3 text-left">
+                    <div className="w-6 h-6 rounded-full bg-cyan-600 text-white text-xs flex items-center justify-center font-bold shrink-0 mt-0.5">1</div>
+                    <div className="flex-1">
+                      <p className="text-sm text-zinc-300 font-semibold mb-1">Add Workspace</p>
+                      <p className="text-xs text-zinc-500 leading-relaxed">Click the <span className="text-cyan-400 font-bold">+</span> button on the left to select your project folder</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3 text-left">
+                    <div className="w-6 h-6 rounded-full bg-cyan-600 text-white text-xs flex items-center justify-center font-bold shrink-0 mt-0.5">2</div>
+                    <div className="flex-1">
+                      <p className="text-sm text-zinc-300 font-semibold mb-1">Choose Your Folder</p>
+                      <p className="text-xs text-zinc-500 leading-relaxed">Browse and select your project directory from your computer</p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-start gap-3 text-left">
+                    <div className="w-6 h-6 rounded-full bg-cyan-600 text-white text-xs flex items-center justify-center font-bold shrink-0 mt-0.5">3</div>
+                    <div className="flex-1">
+                      <p className="text-sm text-zinc-300 font-semibold mb-1">Start Coding</p>
+                      <p className="text-xs text-zinc-500 leading-relaxed">Create sessions and let JARVIS help you build amazing things!</p>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Add Workspace Button */}
+                <button 
+                  onClick={handleAddWorkspace}
+                  disabled={isAddingWorkspace}
+                  className={cn(
+                    "flex items-center justify-center gap-2 w-full px-6 py-3 rounded-xl border-2 border-dashed transition-all cursor-pointer group mt-6",
+                    isAddingWorkspace 
+                      ? "bg-cyan-900/20 border-cyan-500 text-cyan-400 cursor-wait"
+                      : "bg-zinc-900/30 border-cyan-500/30 text-cyan-400 hover:bg-cyan-900/20 hover:border-cyan-500"
+                  )}
+                >
+                  {isAddingWorkspace ? (
+                    <>
+                      <Loader2 size={20} className="animate-spin" />
+                      <span className="text-sm font-bold">Adding...</span>
+                    </>
+                  ) : (
+                    <>
+                      <Plus size={20} className="group-hover:scale-110 transition-transform" />
+                      <span className="text-sm font-bold">Add Workspace</span>
+                    </>
+                  )}
+                </button>
+
+                {/* Arrow pointing up to button */}
+                <motion.div
+                  animate={{ y: [-5, 0, -5] }}
+                  transition={{ repeat: Infinity, duration: 1.5 }}
+                  className="text-cyan-500 self-center mt-2"
+                >
+                  <ChevronDown size={24} className="rotate-180" />
+                </motion.div>
+              </motion.div>
+            )}
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Context Menu */}
+      {contextMenu && (
+        <>
+          {/* Backdrop to close menu on click outside */}
+          <div 
+            className="fixed inset-0 z-[100]" 
+            onClick={() => setContextMenu(null)}
+          />
+          
+          {/* Context Menu */}
+          <div
+            className="fixed z-[101] bg-zinc-900 border border-zinc-800 rounded-lg shadow-2xl py-1 min-w-[200px] overflow-hidden"
+            style={{ 
+              left: `${contextMenu.x}px`, 
+              top: `${contextMenu.y}px` 
+            }}
+          >
+            {/* Menu Header */}
+            <div className="px-4 py-2 border-b border-zinc-800">
+              <p className="text-[10px] font-bold uppercase tracking-wider text-zinc-500">
+                {contextMenu.type === 'workspace' ? 'Workspace' : 'Session'}
+              </p>
+              <p className="text-xs text-zinc-400 truncate max-w-[180px]">
+                {contextMenu.name}
+              </p>
+            </div>
+            
+            {/* Delete Option */}
+            <button
+              onClick={handleContextMenuDelete}
+              className="w-full px-4 py-2 text-left text-sm text-red-400 hover:bg-red-900/20 transition-colors flex items-center gap-2"
+            >
+              <Trash2 size={14} />
+              Delete {contextMenu.type === 'workspace' ? 'Workspace' : 'Session'}
+            </button>
+          </div>
+        </>
+      )}
+
+      {/* Folder Picker Modal */}
+      <AnimatePresence>
+        {showFolderModal && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md"
+            onClick={() => {
+              setShowFolderModal(false);
+              setSelectedFolderPath('');
+              setSelectedFolderName('');
+            }}
+          >
+            <motion.div
+              initial={{ scale: 0.9, y: 10 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 10 }}
+              className="w-full max-w-md bg-zinc-950 border border-zinc-800 rounded-3xl p-6 shadow-2xl ring-1 ring-white/10"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="flex flex-col items-center text-center space-y-4">
+                <div className="w-16 h-16 rounded-full bg-cyan-500/10 text-cyan-500 flex items-center justify-center mb-2">
+                  <Folder size={32} />
+                </div>
+                <h3 className="text-xl font-black text-white italic tracking-tighter">Add Workspace</h3>
+                <p className="text-xs text-zinc-500 font-medium px-4">
+                  You're about to add this folder as a workspace
+                </p>
+                
+                {/* Folder Info */}
+                <div className="w-full bg-zinc-900/50 border border-zinc-800 rounded-xl p-4 space-y-2">
+                  <div className="flex items-start gap-3">
+                    <div className="w-8 h-8 rounded-lg bg-cyan-900/20 text-cyan-400 flex items-center justify-center shrink-0 mt-0.5">
+                      <Folder size={16} />
+                    </div>
+                    <div className="flex-1 text-left overflow-hidden">
+                      <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider mb-1">Workspace Name</p>
+                      <p className="text-sm font-black text-white truncate">{selectedFolderName}</p>
+                    </div>
+                  </div>
+                  
+                  <div className="flex items-start gap-3 pt-2 border-t border-zinc-800">
+                    <div className="w-8 h-8 rounded-lg bg-zinc-800/50 text-zinc-500 flex items-center justify-center shrink-0 mt-0.5">
+                      <FolderPlus size={16} />
+                    </div>
+                    <div className="flex-1 text-left overflow-hidden">
+                      <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider mb-1">Path</p>
+                      <p className="text-xs font-mono text-zinc-400 break-all">{selectedFolderPath}</p>
+                    </div>
+                  </div>
+                </div>
+                
+                <div className="flex items-center gap-3 w-full pt-4">
+                  <button 
+                    onClick={() => {
+                      setShowFolderModal(false);
+                      setSelectedFolderPath('');
+                      setSelectedFolderName('');
+                    }}
+                    disabled={isAddingWorkspace}
+                    className="flex-1 py-3 rounded-xl bg-zinc-900 text-zinc-500 text-[10px] font-black uppercase tracking-widest hover:bg-zinc-800 hover:text-zinc-300 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    Cancel
+                  </button>
+                  <button 
+                    onClick={confirmAddWorkspace}
+                    disabled={isAddingWorkspace}
+                    className="flex-1 py-3 rounded-xl bg-cyan-600 text-white text-[10px] font-black uppercase tracking-widest hover:bg-cyan-500 transition-all shadow-lg shadow-cyan-900/20 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+                  >
+                    {isAddingWorkspace ? (
+                      <>
+                        <Loader2 size={14} className="animate-spin" />
+                        Adding...
+                      </>
+                    ) : (
+                      'Add Workspace'
+                    )}
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Delete Confirmation Modal */}
+      <AnimatePresence>
+        {deleteConfirmModal && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md"
+            onClick={() => setDeleteConfirmModal(null)}
+          >
+            <motion.div
+              initial={{ scale: 0.9, y: 10 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 10 }}
+              className="w-full max-w-sm bg-zinc-950 border border-zinc-800 rounded-3xl p-6 shadow-2xl ring-1 ring-white/10"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="flex flex-col items-center text-center space-y-4">
+                <div className="w-12 h-12 rounded-full bg-red-500/10 text-red-500 flex items-center justify-center mb-2">
+                  <Trash2 size={20} />
+                </div>
+                <h3 className="text-lg font-black text-white italic tracking-tighter">
+                  Delete {deleteConfirmModal.type === 'workspace' ? 'Workspace' : 'Session'}?
+                </h3>
+                <p className="text-xs text-zinc-500 font-medium px-4">
+                  {deleteConfirmModal.type === 'workspace' 
+                    ? <>This will remove <span className="text-zinc-300 font-bold">"{deleteConfirmModal.name}"</span> but NOT delete any files.</>
+                    : <>Delete session <span className="text-zinc-300 font-bold">"{deleteConfirmModal.name}"</span>? This action cannot be undone.</>
+                  }
+                </p>
+                
+                <div className="flex items-center gap-3 w-full pt-4">
+                  <button 
+                    onClick={() => setDeleteConfirmModal(null)}
+                    className="flex-1 py-3 rounded-xl bg-zinc-900 text-zinc-500 text-[10px] font-black uppercase tracking-widest hover:bg-zinc-800 hover:text-zinc-300 transition-all"
+                  >
+                    Cancel
+                  </button>
+                  <button 
+                    onClick={confirmDelete}
+                    className="flex-1 py-3 rounded-xl bg-red-600 text-white text-[10px] font-black uppercase tracking-widest hover:bg-red-500 transition-all shadow-lg shadow-red-900/20"
+                  >
+                    Delete
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* Clean Workspaces Confirmation Modal */}
+      <AnimatePresence>
+        {showCleanConfirm && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/60 backdrop-blur-md"
+            onClick={() => setShowCleanConfirm(false)}
+          >
+            <motion.div
+              initial={{ scale: 0.9, y: 10 }}
+              animate={{ scale: 1, y: 0 }}
+              exit={{ scale: 0.9, y: 10 }}
+              className="w-full max-w-sm bg-zinc-950 border border-zinc-800 rounded-3xl p-6 shadow-2xl ring-1 ring-white/10"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <div className="flex flex-col items-center text-center space-y-4">
+                <div className="w-12 h-12 rounded-full bg-red-500/10 text-red-500 flex items-center justify-center mb-2">
+                  <Trash2 size={20} />
+                </div>
+                <h3 className="text-lg font-black text-white italic tracking-tighter">
+                  Clean All Workspaces?
+                </h3>
+                <p className="text-xs text-zinc-500 font-medium px-4">
+                  This will remove <span className="text-zinc-300 font-bold">all {workspaces.length} workspaces</span> from JARVIS. Your files will NOT be deleted.
+                </p>
+                
+                <div className="flex items-center gap-3 w-full pt-4">
+                  <button 
+                    onClick={() => setShowCleanConfirm(false)}
+                    className="flex-1 py-3 rounded-xl bg-zinc-900 text-zinc-500 text-[10px] font-black uppercase tracking-widest hover:bg-zinc-800 hover:text-zinc-300 transition-all"
+                  >
+                    Cancel
+                  </button>
+                  <button 
+                    onClick={confirmCleanWorkspaces}
+                    className="flex-1 py-3 rounded-xl bg-red-600 text-white text-[10px] font-black uppercase tracking-widest hover:bg-red-500 transition-all shadow-lg shadow-red-900/20"
+                  >
+                    Clean All
+                  </button>
+                </div>
+              </div>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}