zugzbot 1.0.8 → 1.0.10

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

@@ -33,7 +33,7 @@ interface Session {
   parent_id?: string | null
   parentID?: string | null // Algunos endpoints de Opencode devuelven camelCase
   agent?: string | null
-  model?: any | null
+  model?: unknown | null
   cost?: number | null
   tokens_input?: number | null
   tokens_output?: number | null
@@ -46,8 +46,8 @@ interface MessagePart {
   tool?: string
   state?: {
     status: string
-    input?: any
-    output?: any
+    input?: unknown
+    output?: unknown
   }
 }
 
@@ -71,6 +71,12 @@ interface OpencodeInstance {
   isCurrentProject: boolean
 }
 
+interface Project {
+  id: string
+  name: string
+  path: string
+}
+
 // Lista estática curada de los mejores modelos de Opencode
 const POPULAR_MODELS = [
   { id: 'default', name: '🤖 Modelo por defecto' },
@@ -110,24 +116,109 @@ export default function App() {
   const [messages, setMessages] = useState<Message[]>([])
   const [inputValue, setInputValue] = useState('')
   const [isProcessing, setIsProcessing] = useState(false)
-  const [notificationsEnabled, setNotificationsEnabled] = useState(false)
+  const [notificationsEnabled, setNotificationsEnabled] = useState<boolean>(
+    () => typeof Notification !== 'undefined' && Notification.permission === 'granted'
+  )
   const [tunnelUrl, setTunnelUrl] = useState<string>('')
   const [expandedParts, setExpandedParts] = useState<Record<string, boolean>>({})
-  const [refreshInterval, setRefreshInterval] = useState<number>(3000)
   const [errorMsg, setErrorMsg] = useState<string>('')
   
   // Soporte para multi-instancia / selección de proyectos
   const [instances, setInstances] = useState<OpencodeInstance[]>([])
   const [currentPort, setCurrentPort] = useState<number>(4096)
-  const [showInstanceDropdown, setShowInstanceDropdown] = useState(false)
+
+  // Gestión de Proyectos y Mapeos
+  const [projects, setProjects] = useState<Project[]>(() => {
+    const saved = localStorage.getItem('zugzweb_projects')
+    if (saved) {
+      try {
+        return JSON.parse(saved)
+      } catch {
+        // ignore
+      }
+    }
+    return [
+      {
+        id: 'workspace_raiz',
+        name: 'Workspace Raíz',
+        path: '/Users/wavesbyte/Documents/Repositorio Zugzbot'
+      }
+    ]
+  })
+
+  const [sessionMappings, setSessionMappings] = useState<Record<string, string>>(() => {
+    const saved = localStorage.getItem('zugzweb_session_mappings')
+    if (saved) {
+      try {
+        return JSON.parse(saved)
+      } catch {
+        // ignore
+      }
+    }
+    return {}
+  })
+
+  const [activeProjectId, setActiveProjectId] = useState<string>(() => {
+    const saved = localStorage.getItem('zugzweb_active_project_id')
+    return saved || 'workspace_raiz'
+  })
+
+  const [expandedProjects, setExpandedProjects] = useState<Record<string, boolean>>(() => {
+    const saved = localStorage.getItem('zugzweb_expanded_projects')
+    if (saved) {
+      try {
+        return JSON.parse(saved)
+      } catch {
+        // ignore
+      }
+    }
+    return { workspace_raiz: true }
+  })
+
+  // Formularios de Creación de Proyecto inline
+  const [showAddProjectForm, setShowAddProjectForm] = useState(false)
+  const [newProjectName, setNewProjectName] = useState('')
+  const [newProjectPath, setNewProjectPath] = useState('')
+
+  useEffect(() => {
+    localStorage.setItem('zugzweb_projects', JSON.stringify(projects))
+  }, [projects])
+
+  useEffect(() => {
+    localStorage.setItem('zugzweb_session_mappings', JSON.stringify(sessionMappings))
+  }, [sessionMappings])
+
+  useEffect(() => {
+    localStorage.setItem('zugzweb_active_project_id', activeProjectId)
+  }, [activeProjectId])
+
+  useEffect(() => {
+    localStorage.setItem('zugzweb_expanded_projects', JSON.stringify(expandedProjects))
+  }, [expandedProjects])
+
+  // Ancho de la barra lateral (resizable)
+  const [sidebarWidth, setSidebarWidth] = useState<number>(() => {
+    const saved = localStorage.getItem('zugzweb_sidebar_width')
+    return saved ? parseInt(saved, 10) : 320
+  })
+
+  useEffect(() => {
+    localStorage.setItem('zugzweb_sidebar_width', String(sidebarWidth))
+  }, [sidebarWidth])
 
   // Opciones de prompt
   const [selectedModel, setSelectedModel] = useState<string>('default')
   const [copiedMessageId, setCopiedMessageId] = useState<string>('')
 
   // Estados para la nueva vista /new y agente activo
-  const [isNewSessionView, setIsNewSessionView] = useState<boolean>(false)
-  const [newSessionTitle, setNewSessionTitle] = useState<string>('')
+  const [isNewSessionView, setIsNewSessionView] = useState<boolean>(() => window.location.pathname === '/new')
+  const [newSessionTitle, setNewSessionTitle] = useState<string>(() => {
+    if (window.location.pathname === '/new') {
+      const formattedDate = new Date().toLocaleString([], { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
+      return `Sesión Web ${formattedDate}`
+    }
+    return ''
+  })
   const [newSessionAgent, setNewSessionAgent] = useState<string>('sdd-orchestrator')
   const [newSessionModel, setNewSessionModel] = useState<string>('default')
   const [newSessionFirstPrompt, setNewSessionFirstPrompt] = useState<string>('')
@@ -146,12 +237,7 @@ export default function App() {
     }
   }
 
-  // Sincronizar agente de sesión activa al cambiar de sesión
-  useEffect(() => {
-    if (currentSession) {
-      setSelectedAgent(currentSession.agent || 'sdd-orchestrator')
-    }
-  }, [currentSession?.id])
+
 
   // 1. Cargar estado inicial y levantar listeners
   useEffect(() => {
@@ -159,55 +245,77 @@ export default function App() {
     fetchInstances()
     fetchSessions()
     
-    // Detectar ruta inicial /new
-    if (window.location.pathname === '/new') {
-      setIsNewSessionView(true)
-      const formattedDate = new Date().toLocaleString([], { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
-      setNewSessionTitle(`Sesión Web ${formattedDate}`)
-    }
+
 
     const handlePopState = () => {
       setIsNewSessionView(window.location.pathname === '/new')
     }
     window.addEventListener('popstate', handlePopState)
 
-    // Polling periódico para descubrir nuevas instancias
-    const instanceInterval = setInterval(fetchInstances, 5000)
-
-    // Solicitar permiso de notificaciones del navegador si ya estaba activo
-    if (Notification.permission === 'granted') {
-      setNotificationsEnabled(true)
-    }
+    // Polling periódico para descubrir nuevas instancias y actualizar la lista de sesiones
+    const syncInterval = setInterval(() => {
+      fetchInstances()
+      fetchSessions()
+    }, 5000)
 
     return () => {
       window.removeEventListener('popstate', handlePopState)
-      clearInterval(instanceInterval)
+      clearInterval(syncInterval)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  // 2. Escuchar cambios de sesión activa o puerto del proxy y polling de mensajes
+  // Función para forzar una actualización instantánea de la interfaz
+  const triggerImmediateUpdate = () => {
+    if (currentSessionId) {
+      fetchMessages(currentSessionId)
+      fetchSessionStatus()
+      fetchSessionDetails(currentSessionId)
+    }
+  }
+
+  // 2. Escuchar cambios de sesión activa o puerto del proxy para realizar carga inicial
   useEffect(() => {
     if (!currentSessionId) return
-    
-    fetchSessionDetails(currentSessionId)
-    fetchMessages(currentSessionId)
-    fetchSessionStatus()
+    triggerImmediateUpdate()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSessionId, currentPort])
 
-    // Establecer polling para actualizar mensajes y estado del agente en tiempo real
-    const interval = setInterval(() => {
-      fetchMessages(currentSessionId)
+  // 3. Polling Inteligente y Adaptativo
+  useEffect(() => {
+    if (!currentSessionId) return
+
+    let rapidIntervalId: ReturnType<typeof setInterval> | null = null
+
+    // 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)
+    }
+
+    // Heartbeat lento constante (cada 5s) para detectar de forma eficiente cambios de estado externos
+    const heartbeatIntervalId = setInterval(() => {
       fetchSessionStatus()
+      fetchMessages(currentSessionId)
       fetchSessionDetails(currentSessionId)
-    }, refreshInterval)
+    }, 5000)
 
-    return () => clearInterval(interval)
-  }, [currentSessionId, currentPort, refreshInterval])
+    return () => {
+      if (rapidIntervalId) clearInterval(rapidIntervalId)
+      clearInterval(heartbeatIntervalId)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentSessionId, currentPort, isProcessing])
 
   // 3. Scroll automático inteligente al recibir nuevos mensajes
   useEffect(() => {
     if (!userHasScrolledUp && chatContainerRef.current) {
       chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [messages])
 
   // Manejar el desplazamiento del scroll para desactivar/activar el Smart Scroll Anchoring
@@ -224,7 +332,7 @@ export default function App() {
   const renderMarkdown = (text: string) => {
     try {
       return { __html: marked.parse(text, { gfm: true, breaks: true }) }
-    } catch (e) {
+    } catch {
       return { __html: text }
     }
   }
@@ -263,19 +371,19 @@ export default function App() {
   }
 
   // APIs del Servidor / Daemon Custom
-  const fetchTunnelStatus = async () => {
+  async function fetchTunnelStatus() {
     try {
       const res = await fetch('/api-custom/tunnel-status')
       if (res.ok) {
         const data = await res.json()
         setTunnelUrl(data.url || '')
       }
-    } catch (e) {
-      console.error('Error obteniendo estado del túnel:', e)
+    } catch (error) {
+      console.error('Error obteniendo estado del túnel:', error)
     }
   }
 
-  const fetchInstances = async () => {
+  async function fetchInstances() {
     try {
       const res = await fetch('/api-custom/instances')
       if (res.ok) {
@@ -283,40 +391,12 @@ export default function App() {
         setInstances(data.instances || [])
         setCurrentPort(data.currentPort || 4096)
       }
-    } catch (e) {
-      console.error('Error obteniendo instancias de Opencode:', e)
+    } catch (error) {
+      console.error('Error obteniendo instancias de Opencode:', error)
     }
   }
 
-  const handleSelectInstance = async (port: number) => {
-    try {
-      const res = await fetch('/api-custom/select-instance', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ port })
-      })
-
-      if (res.ok) {
-        const data = await res.json()
-        setCurrentPort(data.currentPort)
-        setShowInstanceDropdown(false)
-        setErrorMsg('')
-        
-        // Limpiar el estado de la sesión actual antes de recargar
-        setSessions([])
-        setCurrentSessionId('')
-        setCurrentSession(null)
-        setMessages([])
-        
-        // Cargar las sesiones de la nueva instancia seleccionada
-        fetchSessionsAfterChange()
-      }
-    } catch (e) {
-      alert('Error al conmutar instancia')
-    }
-  }
-
-  const fetchSessionsAfterChange = async () => {
+  async function fetchSessions() {
     try {
       const res = await fetch('/api/session')
       if (res.ok) {
@@ -324,70 +404,60 @@ export default function App() {
         const sessionList = Array.isArray(data) ? data : (data.sessions || [])
         setSessions(sessionList)
         if (sessionList.length > 0) {
-          setCurrentSessionId(sessionList[0].id)
+          if (!currentSessionId) {
+            setCurrentSessionId(sessionList[0].id)
+          }
         } else {
-          setCurrentSessionId('')
-          setCurrentSession(null)
-          setMessages([])
-        }
-      }
-    } catch (e) {
-      setErrorMsg('Error al conectar a la nueva instancia')
-    }
-  }
-
-  const fetchSessions = async () => {
-    try {
-      const res = await fetch('/api/session')
-      if (res.ok) {
-        const data = await res.json()
-        const sessionList = Array.isArray(data) ? data : (data.sessions || [])
-        setSessions(sessionList)
-        if (sessionList.length > 0 && !currentSessionId) {
-          setCurrentSessionId(sessionList[0].id)
+          navigateTo('/new')
         }
+        setErrorMsg('')
+      } else {
+        const errData = await res.json().catch(() => ({}))
+        setErrorMsg(errData.message || 'No se pudo conectar con Opencode. ¿Has iniciado "opencode serve"?')
       }
-    } catch (e) {
+    } catch {
       setErrorMsg('No se pudo conectar al Daemon local de Opencode')
     }
   }
 
-  const fetchSessionDetails = async (id: string) => {
+  async function fetchSessionDetails(id: string) {
     try {
       const res = await fetch(`/api/session/${id}`)
       if (res.ok) {
         const data = await res.json()
         setCurrentSession(data)
+        if (data.agent) {
+          setSelectedAgent(data.agent)
+        }
+        setErrorMsg('')
+      } else {
+        const errData = await res.json().catch(() => ({}))
+        setErrorMsg(errData.message || 'No se pudieron recuperar los detalles de la sesión')
       }
-    } catch (e) {
-      console.error(e)
+    } catch (error) {
+      console.error(error)
     }
   }
 
-  const fetchMessages = async (id: string) => {
+  async function fetchMessages(id: string) {
     try {
       const res = await fetch(`/api/session/${id}/message`)
       if (res.ok) {
         const data = await res.json()
         const msgList = Array.isArray(data) ? data : (data.messages || [])
         
-        // Alerta al completarse
-        if (isProcessing && msgList.length > messages.length) {
-          const lastMsg = msgList[msgList.length - 1]
-          if (lastMsg.info.role === 'assistant') {
-            setIsProcessing(false)
-            showNotification('Opencode: ¡Respuesta Recibida!', 'El agente ha completado la ejecución de tu prompt.')
-          }
-        }
-        
         setMessages(msgList)
+        setErrorMsg('')
+      } else {
+        const errData = await res.json().catch(() => ({}))
+        setErrorMsg(errData.message || 'No se pudieron recuperar los mensajes')
       }
-    } catch (e) {
-      console.error(e)
+    } catch (error) {
+      console.error(error)
     }
   }
 
-  const fetchSessionStatus = async () => {
+  async function fetchSessionStatus() {
     try {
       const res = await fetch('/api/session/status')
       if (res.ok) {
@@ -395,19 +465,129 @@ export default function App() {
         if (currentSessionId && data[currentSessionId]) {
           const status = data[currentSessionId]
           const isBusy = status === 'thinking' || status === 'running_tools' || status === 'busy'
-          if (isProcessing && !isBusy) {
-            setIsProcessing(false)
-            showNotification('Opencode: Ejecución Finalizada 🎉', 'El proceso en loop ha concluido de manera exitosa.')
-          } else if (!isProcessing && isBusy) {
-            setIsProcessing(true)
+          
+          if (isBusy) {
+            setIsProcessing(prev => {
+              if (!prev) {
+                return true
+              }
+              return prev
+            })
+          } else {
+            setIsProcessing(prev => {
+              if (prev) {
+                showNotification('Opencode: ¡Ejecución Completada! 🎉', 'El agente ha finalizado el procesamiento de tu solicitud con éxito.')
+                // Actualizar datos de forma inmediata una última vez al terminar la ejecución
+                fetchMessages(currentSessionId)
+                fetchSessionDetails(currentSessionId)
+                return false
+              }
+              return prev
+            })
           }
         }
+        setErrorMsg('')
+      } else {
+        const errData = await res.json().catch(() => ({}))
+        setErrorMsg(errData.message || 'No se pudo comprobar el estado de Opencode')
       }
-    } catch (e) {
-      console.error(e)
+    } catch (error) {
+      console.error(error)
     }
   }
 
+  const handleAddProject = async (e: React.FormEvent) => {
+    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
+    let resolvedPath = newProjectPath.trim()
+    if (!resolvedPath.startsWith('/')) {
+      const root = '/Users/wavesbyte/Documents/Repositorio Zugzbot'
+      resolvedPath = `${root}/${resolvedPath}`
+    }
+
+    const newId = `project_${Date.now()}`
+    const newProj: Project = {
+      id: newId,
+      name: newProjectName.trim(),
+      path: resolvedPath
+    }
+
+    // 1. Intentar crear la carpeta física llamando al Daemon
+    try {
+      await fetch('/api-custom/create-folder', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: resolvedPath })
+      })
+    } catch (err) {
+      console.error('Error al solicitar creación de carpeta física:', err)
+    }
+
+    // 2. Guardar el proyecto en el estado local
+    setProjects(prev => [...prev, newProj])
+    setExpandedProjects(prev => ({ ...prev, [newId]: true }))
+    setActiveProjectId(newId)
+
+    // 3. Resetear formulario
+    setNewProjectName('')
+    setNewProjectPath('')
+    setShowAddProjectForm(false)
+  }
+
+  const handleDeleteProject = (projectId: string) => {
+    if (projectId === 'workspace_raiz') {
+      alert('No puedes eliminar el proyecto raíz principal.')
+      return
+    }
+    if (!confirm('¿Estás seguro de que quieres eliminar este proyecto? Las sesiones asociadas se moverán al Inbox / Sin Clasificar.')) {
+      return
+    }
+
+    setProjects(prev => prev.filter(p => p.id !== projectId))
+    
+    // Desvincular mapeos
+    setSessionMappings(prev => {
+      const copy = { ...prev }
+      for (const sId in copy) {
+        if (copy[sId] === projectId) {
+          delete copy[sId]
+        }
+      }
+      return copy
+    })
+
+    if (activeProjectId === projectId) {
+      setActiveProjectId('workspace_raiz')
+    }
+  }
+
+  const toggleProjectExpansion = (projectId: string) => {
+    setExpandedProjects(prev => ({ ...prev, [projectId]: !prev[projectId] }))
+  }
+
+  // Handler para el resize de la barra lateral
+  const handleMouseDown = (e: React.MouseEvent) => {
+    e.preventDefault()
+    const startX = e.clientX
+    const startWidth = sidebarWidth
+
+    const handleMouseMove = (moveEvent: MouseEvent) => {
+      const deltaX = moveEvent.clientX - startX
+      const newWidth = Math.max(220, Math.min(500, startWidth + deltaX))
+      setSidebarWidth(newWidth)
+    }
+
+    const handleMouseUp = () => {
+      document.removeEventListener('mousemove', handleMouseMove)
+      document.removeEventListener('mouseup', handleMouseUp)
+    }
+
+    document.addEventListener('mousemove', handleMouseMove)
+    document.addEventListener('mouseup', handleMouseUp)
+  }
+
   const handleStartNewSession = async (e?: React.FormEvent) => {
     if (e) e.preventDefault()
     if (!newSessionTitle.trim()) {
@@ -433,14 +613,32 @@ export default function App() {
       setCurrentSession(newSess)
       setMessages([])
       
+      // Guardar el mapeo de la sesión al proyecto activo
+      setSessionMappings(prev => ({
+        ...prev,
+        [newSess.id]: activeProjectId
+      }))
+      
       // Establecer el agente y modelo seleccionados para esta sesión
       setSelectedAgent(newSessionAgent)
       setSelectedModel(newSessionModel)
       
-      // 3. Si hay un primer prompt (instrucción inicial), enviarlo de inmediato
-      if (newSessionFirstPrompt.trim()) {
-        const bodyPayload: any = {
-          parts: [{ type: 'text', text: newSessionFirstPrompt.trim() }],
+      // 3. Si hay una instrucción inicial o se requiere anclaje de directorio, enviarlo de inmediato
+      const activeProj = projects.find(p => p.id === activeProjectId)
+      let anchorPrefix = ''
+      if (activeProj && activeProj.id !== 'workspace_raiz') {
+        anchorPrefix = `[SISTEMA: Directorio de trabajo del proyecto: ${activeProj.path}. Por favor, realiza todas tus operaciones de archivos, edits, y ejecuciones de comandos de bash estrictamente dentro de esta subcarpeta usando el parámetro "workdir" o comandos relativos a la misma. No escribas archivos en la raíz del repositorio central de Zugzbot a menos que sea explícitamente necesario.]\n\n`
+      }
+
+      const promptText = (anchorPrefix + newSessionFirstPrompt.trim()).trim()
+
+      if (promptText) {
+        const bodyPayload: {
+          parts: { type: string; text: string }[];
+          agent: string;
+          model?: { providerID: string; modelID: string };
+        } = {
+          parts: [{ type: 'text', text: promptText }],
           agent: newSessionAgent
         }
         
@@ -462,8 +660,8 @@ export default function App() {
 
       // Volver a la vista principal / chat
       navigateTo('/')
-      setRefreshInterval(1500)
-    } catch (e) {
+      triggerImmediateUpdate()
+    } catch {
       alert('Error al iniciar la nueva sesión')
     } finally {
       setIsProcessing(false)
@@ -512,7 +710,11 @@ export default function App() {
         if (!res.ok) throw new Error('Error al ejecutar comando')
       } else {
         // Envío de prompt normal asíncrono
-        const bodyPayload: any = {
+        const bodyPayload: {
+          parts: { type: string; text: string }[];
+          agent: string;
+          model?: { providerID: string; modelID: string };
+        } = {
           parts: [{ type: 'text', text: input }],
           agent: selectedAgent
         }
@@ -532,8 +734,8 @@ export default function App() {
         if (!res.ok) throw new Error('Error al enviar prompt')
       }
       
-      setRefreshInterval(1500)
-    } catch (e) {
+      triggerImmediateUpdate()
+    } catch {
       setErrorMsg('Error al conectar. Comprueba el estado de Opencode.')
       setIsProcessing(false)
     }
@@ -571,8 +773,8 @@ export default function App() {
       })
 
       if (!res.ok) throw new Error('Error al ejecutar comando rápido')
-      setRefreshInterval(1500)
-    } catch (e) {
+      triggerImmediateUpdate()
+    } catch {
       setErrorMsg('No se pudo ejecutar el comando rápido.')
       setIsProcessing(false)
     }
@@ -586,8 +788,8 @@ export default function App() {
       })
       if (res.ok) {
         setIsProcessing(false)
-        setRefreshInterval(3000)
         showNotification('Opencode: Abortado', 'La sesión en ejecución ha sido cancelada forzadamente.')
+        triggerImmediateUpdate()
       }
     } catch (e) {
       console.error(e)
@@ -599,21 +801,25 @@ export default function App() {
   }
 
   // Formateador de modelo para evitar colapsos
-  const formatModelName = (model: any): string => {
+  const formatModelName = (model: unknown): string => {
     if (!model) return 'default'
     if (typeof model === 'string') {
       return model.split('/').pop() || model
     }
-    if (typeof model === 'object') {
-      if (model.modelID) return model.modelID
-      if (model.id) return model.id
+    if (typeof model === 'object' && model !== null) {
+      const obj = model as Record<string, unknown>
+      if (typeof obj.modelID === 'string') return obj.modelID
+      if (typeof obj.id === 'string') return obj.id
       return JSON.stringify(model).substring(0, 20)
     }
     return 'default'
   }
 
   // Formateador robusto de fecha de mensaje
-  const formatMessageTime = (info: any): string => {
+  const formatMessageTime = (info: {
+    time?: { created: number };
+    time_created?: number;
+  }): string => {
     const rawTime = info?.time?.created || info?.time_created
     if (!rawTime) return 'En curso...'
     try {
@@ -622,7 +828,7 @@ export default function App() {
         return 'En curso...'
       }
       return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-    } catch (e) {
+    } catch {
       return 'En curso...'
     }
   }
@@ -635,6 +841,22 @@ export default function App() {
     return sessions.filter(s => s.parent_id === parentId || s.parentID === parentId)
   }
 
+  // Filtrar rootSessions por proyecto
+  const getSessionsForProject = (projectId: string) => {
+    return rootSessions.filter(s => {
+      const mappedId = sessionMappings[s.id]
+      if (mappedId) {
+        if (projects.some(p => p.id === mappedId)) {
+          return mappedId === projectId
+        }
+      }
+      return projects[0]?.id === projectId
+    })
+  }
+
+  // Sesiones sin clasificar (Inbox)
+  const unclassifiedSessions: Session[] = []
+
   // Obtener la instancia activa del Daemon
   const activeInstance = instances.find(inst => inst.port === currentPort)
 
@@ -642,7 +864,10 @@ export default function App() {
     <div className="flex h-screen bg-[#09090b] text-[#f4f4f5] overflow-hidden antialiased font-sans select-none">
       
       {/* SIDEBAR: Lista de Sesiones e Instancias con Árbol de Subagentes */}
-      <div className="w-80 bg-[#0c0c0e] border-r border-[#1f1f23] flex flex-col justify-between shrink-0">
+      <div 
+        style={{ width: `${sidebarWidth}px` }} 
+        className="bg-[#0c0c0e] border-r border-[#1f1f23] flex flex-col justify-between shrink-0 relative"
+      >
         
         {/* Encabezado Principal */}
         <div className="p-4 border-b border-[#1f1f23] flex items-center justify-between">
@@ -661,141 +886,281 @@ export default function App() {
           </button>
         </div>
 
-        {/* SELECTOR DE PROYECTOS / INSTANCIAS */}
-        <div className="px-3 pt-3 pb-1 relative">
-          <div className="text-[10px] text-[#71717a] uppercase font-bold tracking-wider px-2 mb-1.5 flex items-center gap-1">
-            <Server size={10} />
-            <span>Instancia Activa de Opencode</span>
-          </div>
+        {/* ENCABEZADO DE PROYECTOS */}
+        <div className="p-3 border-b border-[#1f1f23] flex items-center justify-between bg-[#09090b]/40">
+          <span className="text-[10px] text-[#fafafa] uppercase font-extrabold tracking-wider flex items-center gap-1.5 select-none">
+            <Server size={11} className="text-emerald-400" />
+            <span>📁 GESTOR DE PROYECTOS</span>
+          </span>
           <button
-            onClick={() => setShowInstanceDropdown(!showInstanceDropdown)}
-            className="w-full flex items-center justify-between p-2.5 rounded-lg bg-[#121215] border border-[#1f1f23] text-left hover:bg-[#18181b] transition duration-200 cursor-pointer text-xs"
+            onClick={() => setShowAddProjectForm(!showAddProjectForm)}
+            className="text-[10px] bg-[#1c1c1f] hover:bg-[#27272a] text-[#a1a1aa] hover:text-white px-2 py-1 rounded border border-[#2e2e33] transition duration-200 cursor-pointer flex items-center gap-1 font-bold"
+            title="Añadir Proyecto Local"
           >
-            <div className="truncate flex flex-col gap-0.5">
-              <span className="font-semibold text-white truncate">
-                {activeInstance ? activeInstance.name : `Puerto: ${currentPort}`}
-              </span>
-              <span className="text-[10px] text-[#71717a] truncate font-mono">
-                {activeInstance ? activeInstance.path : 'Buscando proyecto...'}
-              </span>
-            </div>
-            <ChevronDown size={14} className="text-[#a1a1aa] shrink-0 ml-1" />
+            <Plus size={10} strokeWidth={2.5} />
+            <span>Proyecto</span>
           </button>
-
-          {/* Menú de selección de Instancias */}
-          {showInstanceDropdown && (
-            <div className="absolute left-3 right-3 top-16 z-50 bg-[#0c0c0e] border border-[#2e2e33] rounded-lg shadow-2xl p-1.5 space-y-1 max-h-60 overflow-y-auto">
-              <div className="text-[9px] text-[#71717a] font-bold uppercase tracking-wider px-2 py-1 border-b border-[#1f1f23]/40">
-                Proyectos / TUIs Detectados ({instances.length})
-              </div>
-              {instances.length === 0 ? (
-                <div className="text-[11px] text-[#71717a] p-3 text-center italic animate-pulse">
-                  No se detectaron otras TUIs activas...
-                </div>
-              ) : (
-                instances.map(inst => (
-                  <button
-                    key={inst.port}
-                    onClick={() => handleSelectInstance(inst.port)}
-                    className={`w-full text-left p-2 rounded-md flex flex-col gap-0.5 transition duration-150 cursor-pointer ${
-                      inst.port === currentPort
-                        ? 'bg-[#1c1c1f] text-white border-l-2 border-white'
-                        : 'hover:bg-[#121215] text-[#a1a1aa] hover:text-white'
-                    }`}
-                  >
-                    <div className="flex items-center justify-between text-xs font-semibold">
-                      <span className="truncate">{inst.name}</span>
-                      <span className="text-[9px] font-mono text-[#71717a] bg-[#1c1c1f] px-1 py-0.5 rounded">
-                        :{inst.port}
-                      </span>
-                    </div>
-                    <span className="text-[9px] text-[#71717a] truncate font-mono">{inst.path}</span>
-                  </button>
-                ))
-              )}
-            </div>
-          )}
         </div>
 
-        {/* Separador */}
-        <div className="px-4 py-1.5 text-[10px] text-[#71717a] uppercase font-bold tracking-wider flex items-center gap-1 select-none">
-          <MessageSquare size={10} />
-          <span>Árbol de Sesiones y Subagentes</span>
-        </div>
-
-        {/* BARRA LATERAL SCROLLABLE: Jerarquía de Sesiones */}
-        <div className="flex-1 overflow-y-auto p-2 space-y-1">
-          {sessions.length === 0 ? (
-            <div className="text-center py-8 text-xs text-[#71717a] italic">
-              No se encontraron sesiones en este puerto
+        {/* FORMULARIO PARA AÑADIR PROYECTO */}
+        {showAddProjectForm && (
+          <form onSubmit={handleAddProject} className="p-3 bg-[#121215] border-b border-[#1f1f23] space-y-2.5">
+            <div className="space-y-1">
+              <label className="text-[9px] font-bold text-[#71717a] uppercase">Nombre del Proyecto</label>
+              <input
+                type="text"
+                required
+                value={newProjectName}
+                onChange={e => setNewProjectName(e.target.value)}
+                placeholder="Ej. Proyecto ROOT"
+                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]"
+              />
+            </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>
+            <div className="flex gap-2 justify-end pt-1">
+              <button
+                type="button"
+                onClick={() => setShowAddProjectForm(false)}
+                className="px-2 py-1 text-[10px] text-[#71717a] hover:text-white transition cursor-pointer"
+              >
+                Cancelar
+              </button>
+              <button
+                type="submit"
+                className="px-2.5 py-1 text-[10px] bg-white text-[#09090b] font-bold rounded hover:bg-[#e4e4e7] transition cursor-pointer"
+              >
+                Crear e Instalar
+              </button>
             </div>
-          ) : (
-            rootSessions.map(root => {
-              const isRootActive = root.id === currentSessionId
-              const subagents = getSubagentsFor(root.id)
-              const hasSubagents = subagents.length > 0
-
-              return (
-                <div key={root.id} className="space-y-1">
-                  {/* Sesión Principal */}
+          </form>
+        )}
+
+        {/* ARBOL DE PROYECTOS Y SESIONES */}
+        <div className="flex-1 overflow-y-auto p-2 space-y-3">
+          {/* Listar proyectos en localStorage */}
+          {projects.map(project => {
+            const isProjectActive = project.id === activeProjectId
+            const projectSessions = getSessionsForProject(project.id)
+            const isExpanded = !!expandedProjects[project.id]
+
+            return (
+              <div key={project.id} className="space-y-1 border border-transparent rounded-lg p-1 bg-[#09090b]/20">
+                {/* Cabecera del Proyecto (Carpeta) */}
+                <div className={`flex items-center justify-between p-2 rounded-md transition duration-150 ${
+                  isProjectActive ? 'bg-[#18181c] border border-[#2e2e33]/70' : 'hover:bg-[#121215]/50'
+                }`}>
                   <button
-                    onClick={() => {
-                      setCurrentSessionId(root.id)
-                      setErrorMsg('')
-                      navigateTo('/')
-                    }}
-                    className={`w-full text-left p-3 rounded-lg flex flex-col gap-1 transition duration-200 cursor-pointer ${
-                      isRootActive
-                        ? 'bg-[#1c1c1f] border border-[#2e2e33]'
-                        : 'hover:bg-[#121215] border border-transparent'
-                    }`}
+                    onClick={() => toggleProjectExpansion(project.id)}
+                    className="flex-1 flex items-center gap-2 text-left cursor-pointer outline-none min-w-0"
                   >
-                    <div className="flex justify-between items-start">
-                      <span className={`font-semibold truncate text-sm ${isRootActive ? 'text-white' : 'text-[#a1a1aa]'}`}>
-                        📂 {root.title || `Sesión: ${root.id.substring(0, 8)}`}
-                      </span>
-                    </div>
-                    <div className="flex items-center justify-between text-[10px] text-[#71717a]">
-                      <span>{root.agent || 'sdd-orchestrator'}</span>
-                      <span>{formatModelName(root.model)}</span>
+                    <span className="text-[#a1a1aa] shrink-0">
+                      {isExpanded ? <ChevronDown size={12} /> : <ChevronUp size={12} />}
+                    </span>
+                    <div className="truncate">
+                      <div className="flex items-center gap-1.5">
+                        <span className="text-white text-xs font-extrabold truncate">
+                          📁 {project.name}
+                        </span>
+                        {isProjectActive && (
+                          <span className="text-[8px] bg-emerald-950 text-emerald-400 border border-emerald-900/50 px-1 rounded font-bold uppercase shrink-0 tracking-wider">Activo</span>
+                        )}
+                      </div>
+                      <span className="text-[9px] text-[#52525b] block truncate font-mono mt-0.5">{project.path}</span>
                     </div>
                   </button>
 
-                  {/* Subagentes (Hijas) en Árbol */}
-                  {hasSubagents && (
-                    <div className="ml-4 pl-3 border-l border-[#1f1f23] space-y-1 py-1">
-                      {subagents.map(sub => {
-                        const isSubActive = sub.id === currentSessionId
+                  <div className="flex items-center gap-1 shrink-0 ml-1">
+                    {!isProjectActive && (
+                      <button
+                        onClick={() => setActiveProjectId(project.id)}
+                        className="p-1 hover:bg-[#27272a] text-[#71717a] hover:text-white rounded transition cursor-pointer"
+                        title="Activar Proyecto"
+                      >
+                        <Play size={10} className="fill-current" />
+                      </button>
+                    )}
+                    {project.id !== 'workspace_raiz' && (
+                      <button
+                        onClick={() => handleDeleteProject(project.id)}
+                        className="p-1 hover:bg-red-950/40 text-[#71717a] hover:text-red-400 rounded transition cursor-pointer"
+                        title="Eliminar Proyecto"
+                      >
+                        <Square size={10} />
+                      </button>
+                    )}
+                  </div>
+                </div>
+
+                {/* Lista de sesiones anidadas del proyecto */}
+                {isExpanded && (
+                  <div className="ml-3 pl-2.5 border-l border-[#1f1f23] space-y-1 pt-1.5 pb-0.5">
+                    {projectSessions.length === 0 ? (
+                      <div className="text-[10px] text-[#52525b] italic py-1 pl-1">
+                        No hay sesiones en este proyecto. Haz clic en el botón + de arriba para iniciar una.
+                      </div>
+                    ) : (
+                      projectSessions.map(root => {
+                        const isRootActive = root.id === currentSessionId
+                        const subagents = getSubagentsFor(root.id)
+                        const hasSubagents = subagents.length > 0
+
                         return (
-                          <button
-                            key={sub.id}
-                            onClick={() => {
-                              setCurrentSessionId(sub.id)
-                              setErrorMsg('')
-                              navigateTo('/')
-                            }}
-                            className={`w-full text-left p-2 rounded-md flex flex-col gap-0.5 transition duration-150 cursor-pointer text-xs ${
-                              isSubActive
-                                ? 'bg-[#18181c] border border-[#2e2e33]/50 text-white'
-                                : 'hover:bg-[#0f0f12] text-[#71717a] hover:text-[#a1a1aa]'
-                            }`}
-                          >
-                            <div className="flex items-center gap-1 font-medium truncate">
-                              <CornerDownRight size={11} className="text-[#a1a1aa] shrink-0" />
-                              <span className="truncate">🤖 {sub.title || `Subagente: ${sub.id.substring(0, 6)}`}</span>
-                            </div>
-                            <div className="flex items-center justify-between text-[9px] text-[#52525b] pl-4 font-mono">
-                              <span>{sub.agent || 'subagent'}</span>
-                              <span>{formatModelName(sub.model)}</span>
-                            </div>
-                          </button>
+                          <div key={root.id} className="space-y-1">
+                            {/* Sesión Principal */}
+                            <button
+                              onClick={() => {
+                                setCurrentSessionId(root.id)
+                                setErrorMsg('')
+                                navigateTo('/')
+                              }}
+                              className={`w-full text-left p-2.5 rounded-lg flex flex-col gap-0.5 transition duration-200 cursor-pointer ${
+                                isRootActive
+                                  ? 'bg-[#1c1c1f] border border-[#2e2e33] text-white shadow-sm'
+                                  : 'hover:bg-[#121215] text-[#a1a1aa] hover:text-white'
+                              }`}
+                            >
+                              <span className="font-semibold truncate text-[11px]">
+                                💬 {root.title || `Sesión: ${root.id.substring(0, 8)}`}
+                              </span>
+                              <div className="flex items-center justify-between text-[9px] text-[#52525b]">
+                                <span>{root.agent || 'sdd-orchestrator'}</span>
+                                <span>{formatModelName(root.model)}</span>
+                              </div>
+                            </button>
+
+                            {/* Subagentes hijas */}
+                            {hasSubagents && (
+                              <div className="ml-3 pl-2 border-l border-[#1f1f23]/60 space-y-1 py-0.5">
+                                {subagents.map(sub => {
+                                  const isSubActive = sub.id === currentSessionId
+                                  return (
+                                    <button
+                                      key={sub.id}
+                                      onClick={() => {
+                                        setCurrentSessionId(sub.id)
+                                        setErrorMsg('')
+                                        navigateTo('/')
+                                      }}
+                                      className={`w-full text-left p-1.5 rounded-md flex flex-col gap-0.5 transition duration-150 cursor-pointer text-[10px] ${
+                                        isSubActive
+                                          ? 'bg-[#18181c] border border-[#2e2e33]/40 text-white'
+                                          : 'hover:bg-[#0f0f12] text-[#71717a] hover:text-[#a1a1aa]'
+                                      }`}
+                                    >
+                                      <div className="flex items-center gap-1 font-medium truncate">
+                                        <CornerDownRight size={10} className="text-[#71717a] shrink-0" />
+                                        <span className="truncate">🤖 {sub.title || `Sub: ${sub.id.substring(0, 5)}`}</span>
+                                      </div>
+                                    </button>
+                                  )
+                                })}
+                              </div>
+                            )}
+                          </div>
                         )
-                      })}
+                      })
+                    )}
+                  </div>
+                )}
+              </div>
+            )
+          })}
+
+          {/* Inbox / Sesiones Sin Clasificar */}
+          {unclassifiedSessions.length > 0 && (
+            <div className="space-y-1 border border-dashed border-[#1f1f23] rounded-lg p-1 bg-[#09090b]/10 mt-2">
+              <div className="p-2 flex items-center justify-between">
+                <span className="text-xs font-bold text-amber-500/80 flex items-center gap-1.5">
+                  📥 Inbox / Sin Clasificar
+                </span>
+                <span className="text-[9px] bg-amber-950/40 text-amber-500 border border-amber-900/40 px-1.5 py-0.5 rounded-full font-bold">
+                  {unclassifiedSessions.length}
+                </span>
+              </div>
+              
+              <div className="ml-1 pl-1 space-y-1 pt-1">
+                {unclassifiedSessions.map(root => {
+                  const isRootActive = root.id === currentSessionId
+                  const subagents = getSubagentsFor(root.id)
+                  const hasSubagents = subagents.length > 0
+
+                  return (
+                    <div key={root.id} className="space-y-1">
+                      <div className="flex items-center gap-1">
+                        <button
+                          onClick={() => {
+                            setCurrentSessionId(root.id)
+                            setErrorMsg('')
+                            navigateTo('/')
+                          }}
+                          className={`flex-1 text-left p-2 rounded-lg flex flex-col gap-0.5 transition duration-200 cursor-pointer ${
+                            isRootActive
+                              ? 'bg-[#1c1c1f] border border-[#2e2e33] text-white shadow-sm'
+                              : 'hover:bg-[#121215] text-[#a1a1aa] hover:text-white'
+                          }`}
+                        >
+                          <span className="font-semibold truncate text-[11px]">
+                            💬 {root.title || `Sesión: ${root.id.substring(0, 8)}`}
+                          </span>
+                          <div className="flex items-center justify-between text-[9px] text-[#52525b]">
+                            <span>{root.agent || 'sdd-orchestrator'}</span>
+                          </div>
+                        </button>
+                        
+                        {/* Botón rápido para mapear al proyecto activo */}
+                        <button
+                          onClick={() => {
+                            setSessionMappings(prev => ({
+                              ...prev,
+                              [root.id]: activeProjectId
+                            }))
+                          }}
+                          className="p-1 hover:bg-[#1c1c1f] text-[#71717a] hover:text-white rounded border border-[#1f1f23] transition cursor-pointer text-[9px] font-bold"
+                          title="Mover al Proyecto Activo"
+                        >
+                          Mapear
+                        </button>
+                      </div>
+
+                      {hasSubagents && (
+                        <div className="ml-3 pl-2 border-l border-[#1f1f23]/60 space-y-1 py-0.5">
+                          {subagents.map(sub => {
+                            const isSubActive = sub.id === currentSessionId
+                            return (
+                              <button
+                                key={sub.id}
+                                onClick={() => {
+                                  setCurrentSessionId(sub.id)
+                                  setErrorMsg('')
+                                  navigateTo('/')
+                                }}
+                                className={`w-full text-left p-1 rounded-md flex flex-col gap-0.5 transition duration-150 cursor-pointer text-[10px] ${
+                                  isSubActive
+                                    ? 'bg-[#18181c] border border-[#2e2e33]/40 text-white'
+                                    : 'hover:bg-[#0f0f12] text-[#71717a] hover:text-[#a1a1aa]'
+                                }`}
+                              >
+                                <span className="truncate">🤖 {sub.title || `Sub: ${sub.id.substring(0, 5)}`}</span>
+                              </button>
+                            )
+                          })}
+                        </div>
+                      )}
                     </div>
-                  )}
-                </div>
-              )
-            })
+                  )
+                })}
+              </div>
+            </div>
           )}
         </div>
 
@@ -842,6 +1207,14 @@ export default function App() {
         </div>
       </div>
 
+      {/* RESIZER HANDLE: Permite redimensionar la barra lateral de forma fluida */}
+      <div
+        onMouseDown={handleMouseDown}
+        className="w-1.5 hover:w-2 active:w-2 h-full bg-[#1f1f23]/80 hover:bg-[#3b82f6]/60 active:bg-[#3b82f6] cursor-col-resize shrink-0 transition-all duration-150 z-50 relative flex items-center justify-center group"
+      >
+        <div className="w-[1px] h-8 bg-transparent group-hover:bg-white/40 group-active:bg-white/60 transition" />
+      </div>
+
       {/* CHAT / MAIN AREA */}
       <div className="flex-1 flex flex-col bg-[#09090b] relative overflow-hidden">
         {isNewSessionView ? (
@@ -1072,7 +1445,68 @@ export default function App() {
               onScroll={handleScroll}
               className="flex-1 overflow-y-auto p-6 space-y-6"
             >
-              {messages.length === 0 ? (
+              {!currentSession ? (
+                <div className="h-full flex flex-col items-center justify-center text-center max-w-md mx-auto space-y-6 p-4">
+                  {errorMsg ? (
+                    <>
+                      <div className="h-14 w-14 rounded-full bg-red-950/40 border border-red-900/50 flex items-center justify-center text-red-400">
+                        <AlertCircle size={28} />
+                      </div>
+                      <div className="space-y-2">
+                        <h2 className="text-lg font-bold text-white">Conexión con Opencode Pendiente</h2>
+                        <p className="text-xs text-[#a1a1aa] leading-relaxed">
+                          {errorMsg}
+                        </p>
+                      </div>
+                      
+                      <div className="w-full bg-[#0c0c0e] border border-[#1f1f23] rounded-xl p-4 text-left space-y-3">
+                        <p className="text-[11px] font-bold text-[#fafafa] uppercase tracking-wider">💡 ¿Cómo solucionarlo?</p>
+                        <p className="text-xs text-[#71717a] leading-relaxed">
+                          Abre otra ventana de terminal en la carpeta raíz del proyecto y ejecuta el servidor de Opencode:
+                        </p>
+                        <div className="bg-[#18181b] border border-[#2e2e33] p-2.5 rounded-lg flex items-center justify-between font-mono text-xs text-white">
+                          <span>opencode serve</span>
+                          <button
+                            type="button"
+                            onClick={() => {
+                              navigator.clipboard.writeText('opencode serve')
+                            }}
+                            className="text-[#a1a1aa] hover:text-white transition cursor-pointer"
+                            title="Copiar comando"
+                          >
+                            <Copy size={12} />
+                          </button>
+                        </div>
+                        <p className="text-[11px] text-[#71717a]">
+                          Una vez levantado, ZugzWeb se conectará automáticamente y podrás controlar tu sesión.
+                        </p>
+                      </div>
+
+                      <button
+                        type="button"
+                        onClick={() => {
+                          fetchSessions()
+                          fetchInstances()
+                        }}
+                        className="py-2 px-4 bg-white hover:bg-[#e4e4e7] text-[#09090b] font-bold rounded-lg text-xs transition duration-200 cursor-pointer shadow-md flex items-center gap-1.5"
+                      >
+                        <RefreshCw size={12} />
+                        <span>Volver a intentar conexión</span>
+                      </button>
+                    </>
+                  ) : (
+                    <>
+                      <div className="h-12 w-12 rounded-full border border-white/10 flex items-center justify-center text-[#71717a] animate-spin">
+                        <RefreshCw size={20} />
+                      </div>
+                      <div className="space-y-1">
+                        <h2 className="text-sm font-semibold text-white">Cargando sesión activa...</h2>
+                        <p className="text-xs text-[#71717a]">Estableciendo canal seguro con tu arnés Opencode local</p>
+                      </div>
+                    </>
+                  )}
+                </div>
+              ) : messages.length === 0 ? (
                 <div className="h-full flex flex-col items-center justify-center text-[#71717a] space-y-3">
                   <MessageSquare size={36} className="text-[#27272a]" />
                   <div className="text-center">
@@ -1297,6 +1731,7 @@ export default function App() {
                   <textarea
                     value={inputValue}
                     onChange={e => setInputValue(e.target.value)}
+                    disabled={!currentSessionId}
                     onKeyDown={e => {
                       if (e.key === 'Enter' && !e.shiftKey) {
                         e.preventDefault()
@@ -1304,11 +1739,13 @@ export default function App() {
                       }
                     }}
                     placeholder={
-                      inputValue.startsWith('/')
+                      !currentSessionId
+                        ? "Debe haber una sesión activa de Opencode para enviar prompts. Por favor, inicia conexión o crea una sesión."
+                        : inputValue.startsWith('/')
                         ? "Escribe los argumentos para el comando... (ej. /loop Crear login)"
                         : `Instrucción para ${activeInstance?.name || 'Opencode'} usando ${AVAILABLE_AGENTS.find(a => a.id === selectedAgent)?.name || selectedAgent}... (Escribe / para ver comandos, Shift+Enter para nueva línea)`
                     }
-                    className="w-full bg-transparent px-4 py-3.5 pr-24 text-sm text-[#f4f4f5] placeholder-[#71717a] outline-none border-none resize-none h-14 max-h-40 min-h-[56px] focus:ring-0 font-medium"
+                    className="w-full bg-transparent px-4 py-3.5 pr-24 text-sm text-[#f4f4f5] placeholder-[#71717a] outline-none border-none resize-none h-14 max-h-40 min-h-[56px] focus:ring-0 font-medium disabled:cursor-not-allowed"
                   />
 
                   <div className="absolute right-3 bottom-3 flex items-center gap-2">