zugzbot 1.0.13 → 1.0.14

package/.utils/zugzweb/client/src/App.tsx

@@ -23,7 +23,12 @@ import {
   Code,
   Sparkles,
   Clock,
-  AlertCircle
+  AlertCircle,
+  Folder,
+  FolderOpen,
+  ArrowUp,
+  Home,
+  Compass
 } from 'lucide-react'
 
 // Interfaces basadas en la API de Opencode
@@ -112,6 +117,11 @@ const AVAILABLE_AGENTS = [
 export default function App() {
   const [sessions, setSessions] = useState<Session[]>([])
   const [currentSessionId, setCurrentSessionId] = useState<string>('')
+  const currentSessionIdRef = useRef<string>('')
+
+  useEffect(() => {
+    currentSessionIdRef.current = currentSessionId
+  }, [currentSessionId])
   const [currentSession, setCurrentSession] = useState<Session | null>(null)
   const [messages, setMessages] = useState<Message[]>([])
   const [inputValue, setInputValue] = useState('')
@@ -122,6 +132,7 @@ export default function App() {
   const [tunnelUrl, setTunnelUrl] = useState<string>('')
   const [expandedParts, setExpandedParts] = useState<Record<string, boolean>>({})
   const [errorMsg, setErrorMsg] = useState<string>('')
+  const [systemCwd, setSystemCwd] = useState<string>('')
   
   // Soporte para multi-instancia / selección de proyectos
   const [instances, setInstances] = useState<OpencodeInstance[]>([])
@@ -137,13 +148,7 @@ export default function App() {
         // ignore
       }
     }
-    return [
-      {
-        id: 'workspace_raiz',
-        name: 'Workspace Raíz',
-        path: '/Users/wavesbyte/Documents/Repositorio Zugzbot'
-      }
-    ]
+    return []
   })
 
   const [sessionMappings, setSessionMappings] = useState<Record<string, string>>(() => {
@@ -224,7 +229,191 @@ export default function App() {
   const [newSessionFirstPrompt, setNewSessionFirstPrompt] = useState<string>('')
   const [selectedAgent, setSelectedAgent] = useState<string>('sdd-orchestrator')
 
+  // Estado de Onboarding Setup
+  const [setupCompleted, setSetupCompleted] = useState<boolean>(() => {
+    return localStorage.getItem('zugzweb_setup_completed') === 'true'
+  })
+
+  // Estados para el explorador de archivos
+  const [showExplorerModal, setShowExplorerModal] = useState(false)
+  const [explorerCurrentPath, setExplorerCurrentPath] = useState('')
+  const [explorerParentPath, setExplorerParentPath] = useState<string | null>(null)
+  const [explorerDirectories, setExplorerDirectories] = useState<string[]>([])
+  const [explorerHomePath, setExplorerHomePath] = useState('')
+  const [explorerCwdPath, setExplorerCwdPath] = useState('')
+  const [explorerError, setExplorerError] = useState('')
+  const [explorerLoading, setExplorerLoading] = useState(false)
+  const [explorerCallback, setExplorerCallback] = useState<((path: string) => void) | null>(null)
+  const [explorerTitle, setExplorerTitle] = useState('Seleccionar Carpeta')
+
+  // Función para cargar un directorio en el explorador de archivos
+  const loadDirectory = async (pathStr?: string) => {
+    setExplorerLoading(true)
+    setExplorerError('')
+    try {
+      const queryParam = pathStr ? `?path=${encodeURIComponent(pathStr)}` : ''
+      const res = await fetch(`/api-custom/list-dir${queryParam}`)
+      if (res.ok) {
+        const data = await res.json()
+        setExplorerCurrentPath(data.currentPath)
+        setExplorerParentPath(data.parentPath)
+        setExplorerDirectories(data.directories || [])
+        setExplorerHomePath(data.home || '')
+        setExplorerCwdPath(data.cwd || '')
+        setExplorerError('')
+      } else {
+        const data = await res.json()
+        setExplorerError(data.error || 'No se pudo leer el directorio')
+      }
+    } catch (err: any) {
+      setExplorerError('Error de red al conectar con el servidor: ' + err.message)
+    } finally {
+      setExplorerLoading(false)
+    }
+  }
+
+  // Abre el explorador de archivos con una configuración específica
+  const openExplorer = (title: string, initialPath: string, callback: (selectedPath: string) => void) => {
+    setExplorerTitle(title)
+    setExplorerCallback(() => callback)
+    setShowExplorerModal(true)
+    loadDirectory(initialPath || systemCwd)
+  }
+
+  // Carga inicial del explorador de archivos en base al CWD del sistema al arrancar
+  useEffect(() => {
+    if (systemCwd && !explorerCurrentPath) {
+      setExplorerCurrentPath(systemCwd)
+      loadDirectory(systemCwd)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [systemCwd])
+
+  const renderExplorerContent = (onConfirm: (path: string) => void) => {
+    return (
+      <div className="space-y-4">
+        {/* Caja de Texto de la Ruta y Controles Rápidos */}
+        <div className="space-y-2">
+          <div className="flex gap-2">
+            <input
+              type="text"
+              value={explorerCurrentPath}
+              onChange={(e) => setExplorerCurrentPath(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  loadDirectory(explorerCurrentPath)
+                }
+              }}
+              className="flex-1 bg-[#121215] border border-[#27272a] focus:border-[#3f3f46] rounded-xl px-3.5 py-2 text-xs font-mono text-white outline-none transition"
+              placeholder="Ruta absoluta..."
+            />
+            <button
+              type="button"
+              onClick={() => loadDirectory(explorerCurrentPath)}
+              className="px-3 py-2 bg-white text-[#09090b] text-xs font-bold rounded-xl hover:bg-[#e4e4e7] transition cursor-pointer"
+            >
+              Ir
+            </button>
+          </div>
+
+          <div className="flex gap-2 items-center flex-wrap">
+            <button
+              type="button"
+              disabled={!explorerParentPath}
+              onClick={() => explorerParentPath && loadDirectory(explorerParentPath)}
+              className="flex items-center gap-1.5 px-3 py-1.5 bg-[#1c1c1f] hover:bg-[#27272a] disabled:opacity-40 disabled:hover:bg-[#1c1c1f] border border-[#2e2e33] rounded-lg text-xs text-white transition cursor-pointer font-medium"
+              title="Subir un nivel"
+            >
+              <ArrowUp size={12} />
+              <span>Subir Nivel</span>
+            </button>
+
+            <button
+              type="button"
+              onClick={() => loadDirectory(explorerHomePath)}
+              className="flex items-center gap-1.5 px-3 py-1.5 bg-[#1c1c1f] hover:bg-[#27272a] border border-[#2e2e33] rounded-lg text-xs text-white transition cursor-pointer font-medium"
+              title="Carpeta Home"
+            >
+              <Home size={12} />
+              <span>Home</span>
+            </button>
+
+            <button
+              type="button"
+              onClick={() => loadDirectory(explorerCwdPath)}
+              className="flex items-center gap-1.5 px-3 py-1.5 bg-[#1c1c1f] hover:bg-[#27272a] border border-[#2e2e33] rounded-lg text-xs text-white transition cursor-pointer font-medium"
+              title="Directorio Raíz del Servidor"
+            >
+              <Compass size={12} />
+              <span>CWD Servidor</span>
+            </button>
+          </div>
+        </div>
+
+        {/* Mensaje de Error */}
+        {explorerError && (
+          <div className="p-3 bg-red-950/40 border border-red-900/50 rounded-xl flex items-center gap-2 text-red-400 text-xs animate-pulse">
+            <AlertCircle size={14} className="shrink-0" />
+            <span>{explorerError}</span>
+          </div>
+        )}
+
+        {/* Lista de Carpetas */}
+        <div className="border border-[#1f1f23] rounded-xl bg-[#070709] overflow-hidden">
+          <div className="p-2 border-b border-[#1f1f23] bg-[#0c0c0e]/60 text-[10px] text-[#71717a] font-bold uppercase tracking-wider select-none">
+            Subcarpetas en este directorio:
+          </div>
+          <div className="max-h-64 overflow-y-auto p-2 space-y-1 scrollbar-thin">
+            {explorerLoading ? (
+              <div className="py-8 flex flex-col items-center justify-center text-[#71717a] space-y-2">
+                <RefreshCw size={18} className="animate-spin text-white/60" />
+                <span className="text-xs">Cargando carpetas...</span>
+              </div>
+            ) : explorerDirectories.length === 0 ? (
+              <div className="py-8 text-center text-xs text-[#52525b] italic">
+                No se encontraron subcarpetas visibles en este directorio.
+              </div>
+            ) : (
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-1.5">
+                {explorerDirectories.map((dir, dIdx) => (
+                  <button
+                    key={dIdx}
+                    type="button"
+                    onClick={() => {
+                      const separator = explorerCurrentPath.includes('\\') ? '\\' : '/'
+                      const newPath = explorerCurrentPath.endsWith(separator) 
+                        ? explorerCurrentPath + dir
+                        : explorerCurrentPath + separator + dir
+                      loadDirectory(newPath)
+                    }}
+                    className="flex items-center gap-2 p-2 rounded-lg bg-[#0c0c0e]/40 border border-[#1c1c1f] hover:border-[#27272a] hover:bg-[#121215] text-left text-xs text-white transition cursor-pointer outline-none truncate"
+                  >
+                    <Folder size={14} className="text-amber-500 shrink-0" />
+                    <span className="truncate font-medium">{dir}</span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Botón de Confirmación */}
+        <div className="flex justify-end pt-2">
+          <button
+            type="button"
+            onClick={() => onConfirm(explorerCurrentPath)}
+            className="flex items-center gap-1.5 px-4 py-2.5 bg-emerald-500 hover:bg-emerald-400 text-[#09090b] text-xs font-bold rounded-xl transition cursor-pointer shadow-md"
+          >
+            <Check size={14} strokeWidth={2.5} />
+            <span>Confirmar Selección</span>
+          </button>
+        </div>
+      </div>
+    )
+  }
+
   const chatContainerRef = useRef<HTMLDivElement>(null)
+  const isAbortingRef = useRef<boolean>(false)
   const [userHasScrolledUp, setUserHasScrolledUp] = useState(false)
 
   const navigateTo = (path: string) => {
@@ -242,6 +431,7 @@ export default function App() {
   // 1. Cargar estado inicial y levantar listeners
   useEffect(() => {
     fetchTunnelStatus()
+    fetchSystemCwd()
     fetchInstances()
     fetchSessions()
     
@@ -281,34 +471,94 @@ export default function App() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentSessionId, currentPort])
 
-  // 3. Polling Inteligente y Adaptativo
+  // Referencias para el throttle del refresco de mensajes en tiempo real
+  const lastFetchTimeRef = useRef<number>(0)
+  const pendingFetchRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const fetchMessagesThrottled = (id: string) => {
+    if (!id) return
+    const now = Date.now()
+    const limit = 200 // refresco a lo sumo cada 200ms para un streaming ultrasuave
+
+    if (pendingFetchRef.current) {
+      return // Ya hay una petición en cola que capturará el último token
+    }
+
+    const remaining = limit - (now - lastFetchTimeRef.current)
+    if (remaining <= 0) {
+      fetchMessages(id)
+      lastFetchTimeRef.current = now
+    } else {
+      pendingFetchRef.current = setTimeout(() => {
+        fetchMessages(id)
+        lastFetchTimeRef.current = Date.now()
+        pendingFetchRef.current = null
+      }, remaining)
+    }
+  }
+
+  // 3. Sistema SSE en tiempo real con fallback de Heartbeat lento
   useEffect(() => {
     if (!currentSessionId) return
 
-    let rapidIntervalId: ReturnType<typeof setInterval> | null = null
+    // Configurar EventSource para recibir eventos de Opencode en caliente
+    const es = new EventSource('/api/event')
+
+    const handleEvent = (event: MessageEvent) => {
+      try {
+        const data = JSON.parse(event.data)
+        const eventType = data.type || event.type
+        const sessionID = data.properties?.sessionID || data.properties?.sessionId || data.sessionId || data.session_id
+        
+        if (eventType.startsWith('message.') && (!sessionID || sessionID === currentSessionId)) {
+          fetchMessagesThrottled(currentSessionId)
+        } else if (eventType.startsWith('session.') && (!sessionID || sessionID === currentSessionId)) {
+          fetchSessionStatus()
+          fetchSessionDetails(currentSessionId)
+          fetchMessagesThrottled(currentSessionId)
+        }
+      } catch (err) {
+        // En caso de que no sea JSON, refrescar de todos modos si es relevante
+        fetchMessagesThrottled(currentSessionId)
+      }
+    }
+
+    es.addEventListener('message', handleEvent)
+
+    const sseEventTypes = [
+      'message.part.updated',
+      'message.part.removed',
+      'message.updated',
+      'session.status',
+      'session.idle',
+      'session.updated',
+      'session.created'
+    ]
+    sseEventTypes.forEach(type => {
+      es.addEventListener(type, handleEvent)
+    })
 
-    // Si está procesando/activo, ejecutamos polling rápido (1.5s) para recibir cambios en tiempo real
-    if (isProcessing) {
-      rapidIntervalId = setInterval(() => {
-        fetchMessages(currentSessionId)
-        fetchSessionDetails(currentSessionId)
-        fetchSessionStatus()
-      }, 1500)
+    es.onerror = () => {
+      // El navegador reconecta automáticamente, pero podemos forzar un refresh por si acaso
     }
 
-    // Heartbeat lento constante (cada 5s) para detectar de forma eficiente cambios de estado externos
+    // Heartbeat lento constante (cada 6s) como red de seguridad/fallback
     const heartbeatIntervalId = setInterval(() => {
       fetchSessionStatus()
-      fetchMessages(currentSessionId)
+      fetchMessagesThrottled(currentSessionId)
       fetchSessionDetails(currentSessionId)
-    }, 5000)
+    }, 6000)
 
     return () => {
-      if (rapidIntervalId) clearInterval(rapidIntervalId)
+      es.close()
+      if (pendingFetchRef.current) {
+        clearTimeout(pendingFetchRef.current)
+        pendingFetchRef.current = null
+      }
       clearInterval(heartbeatIntervalId)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSessionId, currentPort, isProcessing])
+  }, [currentSessionId, currentPort])
 
   // 3. Scroll automático inteligente al recibir nuevos mensajes
   useEffect(() => {
@@ -383,6 +633,52 @@ export default function App() {
     }
   }
 
+  async function fetchSystemCwd() {
+    try {
+      const res = await fetch('/api-custom/cwd')
+      if (res.ok) {
+        const data = await res.json()
+        if (data.cwd) {
+          setSystemCwd(data.cwd)
+          
+          setProjects(prev => {
+            const hasSaved = localStorage.getItem('zugzweb_projects')
+            if (!hasSaved || prev.length === 0) {
+              return [
+                {
+                  id: 'workspace_raiz',
+                  name: 'Carpeta Base Zugz',
+                  path: data.cwd
+                }
+              ]
+            }
+            
+            // Si tiene proyectos guardados, nos aseguramos de que "workspace_raiz" apunte dinámicamente al cwd de esta ejecución
+            const baseProjExists = prev.some(p => p.id === 'workspace_raiz')
+            if (!baseProjExists) {
+              return [
+                {
+                  id: 'workspace_raiz',
+                  name: 'Carpeta Base Zugz',
+                  path: data.cwd
+                },
+                ...prev
+              ]
+            }
+            return prev.map(p => {
+              if (p.id === 'workspace_raiz') {
+                return { ...p, name: 'Carpeta Base Zugz', path: data.cwd }
+              }
+              return p
+            })
+          })
+        }
+      }
+    } catch (error) {
+      console.error('Error al obtener cwd:', error)
+    }
+  }
+
   async function fetchInstances() {
     try {
       const res = await fetch('/api-custom/instances')
@@ -403,14 +699,33 @@ export default function App() {
         const data = await res.json()
         const sessionList = Array.isArray(data) ? data : (data.sessions || [])
         setSessions(sessionList)
+        
+        // Registrar de forma permanente en localStorage el mapeo de las sesiones descubiertas al proyecto activo
+        setSessionMappings(prev => {
+          let updated = false
+          const nextMappings = { ...prev }
+          for (const s of sessionList) {
+            if (!nextMappings[s.id]) {
+              nextMappings[s.id] = activeProjectId
+              updated = true
+            }
+          }
+          return updated ? nextMappings : prev
+        })
+
+        // Limpiar errores inmediatamente al lograr conectar exitosamente con la API de Opencode
+        setErrorMsg('')
+
         if (sessionList.length > 0) {
-          if (!currentSessionId) {
+          // Validar que la sesión actual exista de verdad en el servidor activo
+          const exists = sessionList.some((s: Session) => s.id === currentSessionIdRef.current)
+          if (!currentSessionIdRef.current || !exists) {
+            // Si no hay sesión seleccionada o es un ID huérfano viejo, auto-seleccionar la primera disponible
             setCurrentSessionId(sessionList[0].id)
           }
         } else {
           navigateTo('/new')
         }
-        setErrorMsg('')
       } else {
         const errData = await res.json().catch(() => ({}))
         setErrorMsg(errData.message || 'No se pudo conectar con Opencode. ¿Has iniciado "opencode serve"?')
@@ -431,8 +746,9 @@ export default function App() {
         }
         setErrorMsg('')
       } else {
-        const errData = await res.json().catch(() => ({}))
-        setErrorMsg(errData.message || 'No se pudieron recuperar los detalles de la sesión')
+        // ID de sesión huérfano. Limpiamos para que fetchSessions auto-asigne uno nuevo válido en el próximo ciclo
+        setCurrentSessionId('')
+        setCurrentSession(null)
       }
     } catch (error) {
       console.error(error)
@@ -468,12 +784,14 @@ export default function App() {
           
           if (isBusy) {
             setIsProcessing(prev => {
+              if (isAbortingRef.current) return false
               if (!prev) {
                 return true
               }
               return prev
             })
           } else {
+            isAbortingRef.current = false
             setIsProcessing(prev => {
               if (prev) {
                 showNotification('Opencode: ¡Ejecución Completada! 🎉', 'El agente ha finalizado el procesamiento de tu solicitud con éxito.')
@@ -500,11 +818,12 @@ export default function App() {
     e.preventDefault()
     if (!newProjectName.trim() || !newProjectPath.trim()) return
 
-    // Asegurarse de que la ruta sea absoluta. Si es una subcarpeta relativa, concatenar a la raíz
+    // Asegurarse de que la ruta sea absoluta. Si es una subcarpeta relativa, concatenar a la Carpeta Base Zugz
     let resolvedPath = newProjectPath.trim()
     if (!resolvedPath.startsWith('/')) {
-      const root = '/Users/wavesbyte/Documents/Repositorio Zugzbot'
-      resolvedPath = `${root}/${resolvedPath}`
+      const baseProject = projects.find(p => p.id === 'workspace_raiz')
+      const basePath = baseProject ? baseProject.path : systemCwd
+      resolvedPath = `${basePath}/${resolvedPath}`
     }
 
     const newId = `project_${Date.now()}`
@@ -567,6 +886,53 @@ export default function App() {
     setExpandedProjects(prev => ({ ...prev, [projectId]: !prev[projectId] }))
   }
 
+  // Cambia de sesión y conmuta de forma automática el proyecto activo si es necesario
+  const handleSelectSession = async (sessionId: string, projectId: string) => {
+    const project = projects.find(p => p.id === projectId)
+    if (!project) return
+
+    if (activeProjectId !== projectId) {
+      setIsProcessing(true)
+      setErrorMsg(`Activando entorno de "${project.name}"...`)
+      try {
+        const res = await fetch('/api-custom/activate-project', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path: project.path })
+        })
+        if (res.ok) {
+          setActiveProjectId(projectId)
+          
+          // Limpiar de forma temporal para evitar ruidos de la sesión anterior
+          setSessions([])
+          setCurrentSessionId('')
+          setCurrentSession(null)
+          setMessages([])
+          
+          // Forzar la recarga de sesiones de este proyecto
+          await fetchSessions()
+          
+          // Establecer la sesión seleccionada
+          setCurrentSessionId(sessionId)
+          setErrorMsg('')
+          navigateTo('/')
+        } else {
+          const errData = await res.json().catch(() => ({}))
+          setErrorMsg(errData.error || 'Error al activar el proyecto para esta sesión')
+        }
+      } catch {
+        setErrorMsg('Error de conexión al activar el proyecto de la sesión')
+      } finally {
+        setIsProcessing(false)
+      }
+    } else {
+      // Si ya está en el proyecto activo, simplemente la seleccionamos
+      setCurrentSessionId(sessionId)
+      setErrorMsg('')
+      navigateTo('/')
+    }
+  }
+
   // Activa un proyecto levantando opencode serve en su directorio en segundo plano
   const handleActivateProject = async (projectId: string) => {
     const project = projects.find(p => p.id === projectId)
@@ -923,17 +1289,23 @@ export default function App() {
 
   const handleAbort = async () => {
     if (!currentSessionId) return
+    isAbortingRef.current = true
+    setIsProcessing(false) // Optimista
     try {
       const res = await fetch(`/api/session/${currentSessionId}/abort`, {
         method: 'POST'
       })
       if (res.ok) {
-        setIsProcessing(false)
         showNotification('Opencode: Abortado', 'La sesión en ejecución ha sido cancelada forzadamente.')
         triggerImmediateUpdate()
       }
     } catch (e) {
       console.error(e)
+    } finally {
+      // Dejar que transcurran 2.5 segundos para que el servidor complete el aborto y se asiente
+      setTimeout(() => {
+        isAbortingRef.current = false
+      }, 2500)
     }
   }
 
@@ -982,7 +1354,7 @@ export default function App() {
     return sessions.filter(s => s.parent_id === parentId || s.parentID === parentId)
   }
 
-  // Filtrar rootSessions por proyecto
+  // Filtrar rootSessions por proyecto, asociando dinámicamente las sesiones sin mapear al proyecto activo actual
   const getSessionsForProject = (projectId: string) => {
     return rootSessions.filter(s => {
       const mappedId = sessionMappings[s.id]
@@ -991,7 +1363,10 @@ export default function App() {
           return mappedId === projectId
         }
       }
-      return projects[0]?.id === projectId
+      
+      // Si la sesión no tiene un mapeo de proyecto en localStorage, asumimos
+      // que pertenece al entorno del proyecto que está actualmente activo y conectado
+      return activeProjectId === projectId
     })
   }
 
@@ -1001,6 +1376,85 @@ export default function App() {
   // Obtener la instancia activa del Daemon
   const activeInstance = instances.find(inst => inst.port === currentPort)
 
+  if (!setupCompleted) {
+    return (
+      <div className="flex h-screen bg-[#09090b] text-[#f4f4f5] items-center justify-center p-4 overflow-hidden select-none">
+        <div className="w-full max-w-2xl bg-[#0c0c0e] border border-[#1f1f23] rounded-2xl shadow-2xl p-6 md:p-8 space-y-6 flex flex-col max-h-[90vh]">
+          {/* Cabecera */}
+          <div className="text-center space-y-2 shrink-0">
+            <div className="inline-flex p-3 bg-white text-[#09090b] rounded-2xl shadow-md mb-2">
+              <Terminal size={28} className="font-bold animate-pulse" />
+            </div>
+            <h1 className="text-2xl font-black tracking-tight text-white flex items-center justify-center gap-2">
+              <span>Bienvenido a ZugzWeb</span>
+              <span className="text-[10px] bg-emerald-950 text-emerald-400 border border-emerald-900/50 px-1.5 py-0.5 rounded font-bold uppercase tracking-wider">Harness v1.2</span>
+            </h1>
+            <p className="text-xs text-[#a1a1aa] max-w-md mx-auto leading-relaxed">
+              Para comenzar a programar de forma autónoma con tu arnés SDD, necesitamos que selecciones la carpeta de tu computadora que servirá como tu espacio de trabajo inicial.
+            </p>
+          </div>
+
+          {/* Cuerpo del Explorador */}
+          <div className="flex-1 overflow-y-auto py-1 scrollbar-none">
+            {renderExplorerContent(async (selectedPath) => {
+              // 1. Guardar el Workspace Raíz inicial
+              const initialProjects = [
+                {
+                  id: 'workspace_raiz',
+                  name: 'Carpeta Base Zugz',
+                  path: selectedPath
+                }
+              ]
+              setProjects(initialProjects)
+              localStorage.setItem('zugzweb_projects', JSON.stringify(initialProjects))
+              
+              setActiveProjectId('workspace_raiz')
+              localStorage.setItem('zugzweb_active_project_id', 'workspace_raiz')
+
+              // 2. Activar el proyecto llamando al Daemon en segundo plano
+              setIsProcessing(true)
+              setErrorMsg('Activando entorno de desarrollo inicial...')
+              try {
+                // Asegurarse de que exista físicamente llamando a /api-custom/create-folder
+                await fetch('/api-custom/create-folder', {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({ path: selectedPath })
+                })
+
+                await fetch('/api-custom/activate-project', {
+                  method: 'POST',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({ path: selectedPath })
+                })
+
+                // 3. Completar Setup
+                localStorage.setItem('zugzweb_setup_completed', 'true')
+                setSetupCompleted(true)
+                
+                // Forzar carga de sesiones de este nuevo directorio
+                setTimeout(() => {
+                  fetchSessions()
+                  fetchInstances()
+                }, 1000)
+              } catch (err) {
+                console.error(err)
+              } finally {
+                setIsProcessing(false)
+                setErrorMsg('')
+              }
+            })}
+          </div>
+
+          {/* Footer Informativo */}
+          <div className="text-center text-[10px] text-[#52525b] border-t border-[#1f1f23]/60 pt-4 shrink-0">
+            Podrás añadir, explorar o alternar más carpetas de proyectos en cualquier momento desde la barra lateral.
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className="flex h-screen bg-[#09090b] text-[#f4f4f5] overflow-hidden antialiased font-sans select-none">
       
@@ -1059,14 +1513,31 @@ export default function App() {
             </div>
             <div className="space-y-1">
               <label className="text-[9px] font-bold text-[#71717a] uppercase">Subcarpeta o Ruta Absoluta</label>
-              <input
-                type="text"
-                required
-                value={newProjectPath}
-                onChange={e => setNewProjectPath(e.target.value)}
-                placeholder="Ej. Proyecto-A"
-                className="w-full bg-[#0c0c0e] border border-[#27272a] rounded-lg px-2.5 py-1.5 text-xs text-white outline-none focus:border-[#3f3f46] font-mono"
-              />
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  required
+                  value={newProjectPath}
+                  onChange={e => setNewProjectPath(e.target.value)}
+                  placeholder="Ej. mi-proyecto o /Users/nombre/mi-proyecto"
+                  className="flex-1 bg-[#0c0c0e] border border-[#27272a] rounded-lg px-2.5 py-1.5 text-xs text-white outline-none focus:border-[#3f3f46] font-mono"
+                />
+                <button
+                  type="button"
+                  onClick={() => openExplorer('Buscar Carpeta del Proyecto', newProjectPath || systemCwd, (selected) => setNewProjectPath(selected))}
+                  className="px-2.5 py-1 bg-[#1c1c1f] hover:bg-[#27272a] border border-[#2e2e33] text-[10px] rounded-lg text-white font-semibold transition cursor-pointer shrink-0"
+                >
+                  Buscar...
+                </button>
+              </div>
+              <div className="text-[9px] text-[#71717a] bg-[#09090b]/40 p-2 rounded border border-[#1f1f23] font-mono break-all leading-normal mt-1">
+                <span className="text-[#a1a1aa] font-semibold">📁 Ruta Destino: </span>
+                <span className="text-emerald-400">
+                  {newProjectPath.trim().startsWith('/') 
+                    ? newProjectPath.trim() 
+                    : `${systemCwd}/${newProjectPath.trim() || 'mi-proyecto'}`}
+                </span>
+              </div>
             </div>
             <div className="flex gap-2 justify-end pt-1">
               <button
@@ -1128,6 +1599,34 @@ export default function App() {
                     >
                       <Plus size={10} strokeWidth={3} />
                     </button>
+                    <button
+                      onClick={() => {
+                        openExplorer(`Carpeta para: ${project.name}`, project.path, async (selected) => {
+                          setProjects(prev => prev.map(p => p.id === project.id ? { ...p, path: selected } : p))
+                          if (project.id === activeProjectId) {
+                            setIsProcessing(true)
+                            setErrorMsg('Re-activando proyecto en nueva ruta...')
+                            try {
+                              await fetch('/api-custom/activate-project', {
+                                method: 'POST',
+                                headers: { 'Content-Type': 'application/json' },
+                                body: JSON.stringify({ path: selected })
+                              })
+                              fetchSessions()
+                            } catch (e) {
+                              console.error(e)
+                            } finally {
+                              setIsProcessing(false)
+                              setErrorMsg('')
+                            }
+                          }
+                        })
+                      }}
+                      className="p-1 hover:bg-[#27272a] text-[#71717a] hover:text-white rounded transition cursor-pointer"
+                      title="Explorar/Cambiar Carpeta del Proyecto"
+                    >
+                      <FolderOpen size={10} />
+                    </button>
                     {!isProjectActive && (
                       <button
                         onClick={() => handleActivateProject(project.id)}
@@ -1172,9 +1671,7 @@ export default function App() {
                             }`}>
                               <button
                                 onClick={() => {
-                                  setCurrentSessionId(root.id)
-                                  setErrorMsg('')
-                                  navigateTo('/')
+                                  handleSelectSession(root.id, project.id)
                                 }}
                                 className="flex-1 text-left cursor-pointer outline-none min-w-0"
                               >
@@ -1206,9 +1703,7 @@ export default function App() {
                                     <button
                                       key={sub.id}
                                       onClick={() => {
-                                        setCurrentSessionId(sub.id)
-                                        setErrorMsg('')
-                                        navigateTo('/')
+                                        handleSelectSession(sub.id, project.id)
                                       }}
                                       className={`w-full text-left p-1.5 rounded-md flex flex-col gap-0.5 transition duration-150 cursor-pointer text-[10px] ${
                                         isSubActive
@@ -1832,6 +2327,30 @@ export default function App() {
                   )
                 })
               )}
+              
+              {/* INDICADOR DE CARGA EN TIEMPO REAL DEL AGENTE */}
+              {isProcessing && messages.length > 0 && messages[messages.length - 1].info.role === 'user' && (
+                <div className="flex gap-4 max-w-4xl mx-auto justify-start">
+                  <div className="h-8 w-8 rounded-full border border-[#2e2e33] bg-[#18181b] flex items-center justify-center text-[#fafafa] shrink-0">
+                    <Bot size={16} className="animate-spin text-emerald-400" style={{ animationDuration: '4s' }} />
+                  </div>
+                  <div className="rounded-xl px-4 py-3 bg-[#0c0c0e] text-[#f4f4f5] border border-[#1f1f23] max-w-[85%] shadow-sm space-y-1">
+                    <div className="flex justify-between items-start border-b border-[#1f1f23]/40 pb-1 text-[11px] text-[#71717a] font-medium gap-2">
+                      <div className="flex items-center gap-2">
+                        <span>AGENTE</span>
+                        <span>•</span>
+                        <span className="text-[10px] text-emerald-500 font-bold animate-pulse">PENSANDO...</span>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-sm text-[#a1a1aa] py-1.5">
+                      <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-bounce" style={{ animationDelay: '0ms' }}></span>
+                      <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-bounce" style={{ animationDelay: '150ms' }}></span>
+                      <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-bounce" style={{ animationDelay: '300ms' }}></span>
+                      <span className="ml-1 text-xs text-[#a1a1aa] font-medium">Conectando con el modelo de IA...</span>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
 
             {/* CONSOLA DE ENTRADA, SELECCIÓN DE MODELO Y ENVÍO */}
@@ -1948,6 +2467,38 @@ export default function App() {
         )}
       </div>
 
+      {/* MODAL DEL EXPLORADOR DE ARCHIVOS GENERAL */}
+      {showExplorerModal && (
+        <div className="fixed inset-0 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4 z-[9999] animate-fadeIn">
+          <div className="w-full max-w-xl bg-[#0c0c0e] border border-[#1f1f23] rounded-2xl shadow-2xl p-6 space-y-4 flex flex-col max-h-[85vh]">
+            {/* Header del Modal */}
+            <div className="flex items-center justify-between shrink-0 border-b border-[#1f1f23] pb-3">
+              <h3 className="text-sm font-bold text-white flex items-center gap-2">
+                <FolderOpen size={16} className="text-[#3b82f6]" />
+                <span>{explorerTitle}</span>
+              </h3>
+              <button
+                type="button"
+                onClick={() => setShowExplorerModal(false)}
+                className="text-xs text-[#71717a] hover:text-white border border-[#1f1f23] hover:border-[#27272a] px-2.5 py-1 rounded-md transition cursor-pointer"
+              >
+                Cerrar
+              </button>
+            </div>
+
+            {/* Contenido del Explorador */}
+            <div className="flex-1 overflow-y-auto scrollbar-none py-1">
+              {renderExplorerContent((selectedPath) => {
+                if (explorerCallback) {
+                  explorerCallback(selectedPath)
+                }
+                setShowExplorerModal(false)
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+
     </div>
   )
 }