zugzbot 1.0.16 → 1.0.18

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

@@ -1,2560 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react'
-import { marked } from 'marked'
-import {
-  Play,
-  Square,
-  Plus,
-  Terminal,
-  Settings,
-  Globe,
-  RefreshCw,
-  User,
-  Bot,
-  ChevronDown,
-  ChevronUp,
-  ExternalLink,
-  Bell,
-  BellOff,
-  MessageSquare,
-  Server,
-  Copy,
-  Check,
-  CornerDownRight,
-  Code,
-  Sparkles,
-  Clock,
-  AlertCircle,
-  Folder,
-  FolderOpen,
-  ArrowUp,
-  Home,
-  Compass
-} from 'lucide-react'
-
-// Interfaces basadas en la API de Opencode
-interface Session {
-  id: string
-  title: string | null
-  parent_id?: string | null
-  parentID?: string | null // Algunos endpoints de Opencode devuelven camelCase
-  agent?: string | null
-  model?: unknown | null
-  cost?: number | null
-  tokens_input?: number | null
-  tokens_output?: number | null
-  time_created?: number
-}
-
-interface MessagePart {
-  type: 'text' | 'reasoning' | 'tool' | string
-  text?: string
-  tool?: string
-  state?: {
-    status: string
-    input?: unknown
-    output?: unknown
-  }
-}
-
-interface Message {
-  info: {
-    id: string
-    session_id: string
-    role: 'user' | 'assistant' | 'system'
-    time?: {
-      created: number
-    }
-    time_created?: number
-  }
-  parts: MessagePart[]
-}
-
-interface OpencodeInstance {
-  port: number
-  path: string
-  name: string
-  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' },
-  { id: 'deepseek/deepseek-chat', name: '⚡️ DeepSeek v4 (Chat rápido)' },
-  { id: 'deepseek/deepseek-reasoner', name: '💭 DeepSeek R1 (Pensamiento/Razonamiento)' },
-  { id: 'google/gemini-3.5-flash', name: '♊️ Gemini 3.5 Flash' },
-  { id: 'google/gemini-3.1-pro-preview', name: '🧠 Gemini 3.1 Pro (Complejo)' },
-  { id: 'opencode/deepseek-v4-flash-free', name: '🆓 DeepSeek v4 (Flash Gratis)' },
-  { id: 'opencode/nemotron-3-ultra-free', name: '🆓 Nemotron 3 Ultra (Gratis)' }
-]
-
-const AVAILABLE_AGENTS = [
-  {
-    id: 'build',
-    name: '🛠️ Build',
-    description: 'Agente de desarrollo estándar. Tiene todas las herramientas de lectura, escritura y bash habilitadas para programar.',
-    color: '#3b82f6'
-  },
-  {
-    id: 'plan',
-    name: '📋 Plan',
-    description: 'Agente de solo lectura/planificación. Útil para analizar el código base y planificar cambios de forma segura sin editarlos directamente.',
-    color: '#a855f7'
-  },
-  {
-    id: 'sdd-orchestrator',
-    name: '🤖 Sdd-Orchestrator',
-    description: 'Coordinador principal del flujo SDD (Spec-Driven Development). Automatiza los subagentes spec-writer, coder y tester.',
-    color: '#10b981'
-  }
-]
-
-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('')
-  const [isProcessing, setIsProcessing] = 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 [errorMsg, setErrorMsg] = useState<string>('')
-  const [systemCwd, setSystemCwd] = useState<string>('')
-  
-  // Soporte para multi-instancia / selección de proyectos
-  const [instances, setInstances] = useState<OpencodeInstance[]>([])
-  const [currentPort, setCurrentPort] = useState<number>(4096)
-
-  // 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 []
-  })
-
-  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])
-
-  const [customSessionTitles, setCustomSessionTitles] = useState<Record<string, string>>(() => {
-    const saved = localStorage.getItem('zugzweb_custom_session_titles')
-    if (saved) {
-      try {
-        return JSON.parse(saved)
-      } catch {
-        // ignore
-      }
-    }
-    return {}
-  })
-
-  useEffect(() => {
-    localStorage.setItem('zugzweb_custom_session_titles', JSON.stringify(customSessionTitles))
-  }, [customSessionTitles])
-
-  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>(() => 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>('')
-  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) => {
-    window.history.pushState(null, '', path)
-    setIsNewSessionView(path === '/new')
-    if (path === '/new') {
-      // Pre-rellenar un título por defecto para la nueva sesión
-      const formattedDate = new Date().toLocaleString([], { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })
-      setNewSessionTitle(`Sesión Web ${formattedDate}`)
-    }
-  }
-
-
-
-  // 1. Cargar estado inicial y levantar listeners
-  useEffect(() => {
-    fetchTunnelStatus()
-    fetchSystemCwd()
-    fetchInstances()
-    fetchSessions()
-    
-
-
-    const handlePopState = () => {
-      setIsNewSessionView(window.location.pathname === '/new')
-    }
-    window.addEventListener('popstate', handlePopState)
-
-    // 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(syncInterval)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  // Función para forzar una actualización instantánea de la interfaz
-  const triggerImmediateUpdate = () => {
-    if (currentSessionId) {
-      fetchMessages(currentSessionId)
-      fetchSessionStatus()
-      fetchSessionDetails(currentSessionId, true)
-    }
-  }
-
-  // 2. Escuchar cambios de sesión activa o puerto del proxy para realizar carga inicial
-  useEffect(() => {
-    if (!currentSessionId) return
-    triggerImmediateUpdate()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSessionId, currentPort])
-
-  // 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
-
-    // 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)
-    })
-
-    es.onerror = () => {
-      // El navegador reconecta automáticamente, pero podemos forzar un refresh por si acaso
-    }
-
-    // Heartbeat lento constante (cada 6s) como red de seguridad/fallback
-    const heartbeatIntervalId = setInterval(() => {
-      fetchSessionStatus()
-      fetchMessagesThrottled(currentSessionId)
-      fetchSessionDetails(currentSessionId)
-    }, 6000)
-
-    return () => {
-      es.close()
-      if (pendingFetchRef.current) {
-        clearTimeout(pendingFetchRef.current)
-        pendingFetchRef.current = null
-      }
-      clearInterval(heartbeatIntervalId)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentSessionId, currentPort])
-
-  // 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
-  const handleScroll = () => {
-    if (chatContainerRef.current) {
-      const { scrollTop, scrollHeight, clientHeight } = chatContainerRef.current
-      // Si el usuario sube más de 120px desde el fondo, asumimos que subió manualmente
-      const isAtBottom = scrollHeight - scrollTop - clientHeight < 120
-      setUserHasScrolledUp(!isAtBottom)
-    }
-  }
-
-  // Parseador de Markdown seguro usando marked
-  const renderMarkdown = (text: string) => {
-    try {
-      return { __html: marked.parse(text, { gfm: true, breaks: true }) }
-    } catch {
-      return { __html: text }
-    }
-  }
-
-  // Notificaciones Push del navegador
-  const toggleNotifications = async () => {
-    if (notificationsEnabled) {
-      setNotificationsEnabled(false)
-      return
-    }
-
-    const permission = await Notification.requestPermission()
-    if (permission === 'granted') {
-      setNotificationsEnabled(true)
-      showNotification('¡Notificaciones activadas!', 'Te avisaremos cuando tus flujos en Opencode terminen.')
-    } else {
-      alert('Permiso de notificación denegado por el navegador.')
-    }
-  }
-
-  const showNotification = (title: string, body: string) => {
-    if (Notification.permission === 'granted') {
-      new Notification(title, {
-        body,
-        icon: '/favicon.ico'
-      })
-    }
-  }
-
-  // Copiar al portapapeles
-  const handleCopyText = (text: string, msgId: string) => {
-    navigator.clipboard.writeText(text).then(() => {
-      setCopiedMessageId(msgId)
-      setTimeout(() => setCopiedMessageId(''), 2000)
-    })
-  }
-
-  // APIs del Servidor / Daemon Custom
-  async function fetchTunnelStatus() {
-    try {
-      const res = await fetch('/api-custom/tunnel-status')
-      if (res.ok) {
-        const data = await res.json()
-        setTunnelUrl(data.url || '')
-      }
-    } catch (error) {
-      console.error('Error obteniendo estado del túnel:', error)
-    }
-  }
-
-  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')
-      if (res.ok) {
-        const data = await res.json()
-        setInstances(data.instances || [])
-        setCurrentPort(data.currentPort || 4096)
-      }
-    } catch (error) {
-      console.error('Error obteniendo instancias de Opencode:', error)
-    }
-  }
-
-  async function fetchSessions() {
-    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)
-        
-        // 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) {
-          // 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')
-        }
-      } else {
-        const errData = await res.json().catch(() => ({}))
-        setErrorMsg(errData.message || 'No se pudo conectar con Opencode. ¿Has iniciado "opencode serve"?')
-      }
-    } catch {
-      setErrorMsg('No se pudo conectar al Daemon local de Opencode')
-    }
-  }
-
-  async function fetchSessionDetails(id: string, isInitialLoad = false) {
-    try {
-      const res = await fetch(`/api/session/${id}`)
-      if (res.ok) {
-        const data = await res.json()
-        setCurrentSession(data)
-        if (data.agent && isInitialLoad) {
-          setSelectedAgent(data.agent)
-        }
-        setErrorMsg('')
-      } else {
-        // 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)
-    }
-  }
-
-  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 || [])
-        
-        setMessages(msgList)
-        setErrorMsg('')
-      } else {
-        const errData = await res.json().catch(() => ({}))
-        setErrorMsg(errData.message || 'No se pudieron recuperar los mensajes')
-      }
-    } catch (error) {
-      console.error(error)
-    }
-  }
-
-  async function fetchSessionStatus() {
-    try {
-      const res = await fetch('/api/session/status')
-      if (res.ok) {
-        const data = await res.json()
-        if (currentSessionId && data[currentSessionId]) {
-          const status = data[currentSessionId]
-          const isBusy = status === 'thinking' || status === 'running_tools' || status === 'busy' || status === 'running' || status === 'executing' || status === 'processing'
-          
-          // Heurística de doble capa: buscar si la última parte de herramienta en el historial sigue activa
-          let hasRunningTool = false
-          if (messages.length > 0) {
-            const lastMsg = messages[messages.length - 1]
-            if (lastMsg.info.role === 'assistant' && lastMsg.parts) {
-              const lastToolPart = [...lastMsg.parts].reverse().find(p => p.type === 'tool')
-              if (lastToolPart && lastToolPart.state) {
-                const toolStatus = lastToolPart.state.status
-                if (toolStatus === 'running' || toolStatus === 'thinking' || toolStatus === 'processing' || toolStatus === 'active') {
-                  hasRunningTool = true
-                }
-              }
-            }
-          }
-
-          const isReallyBusy = isBusy || hasRunningTool
-          
-          if (isReallyBusy) {
-            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.')
-                // 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 (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 Carpeta Base Zugz
-    let resolvedPath = newProjectPath.trim()
-    if (!resolvedPath.startsWith('/')) {
-      const baseProject = projects.find(p => p.id === 'workspace_raiz')
-      const basePath = baseProject ? baseProject.path : systemCwd
-      resolvedPath = `${basePath}/${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] }))
-  }
-
-  // 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)
-    if (!project) return
-
-    setIsProcessing(true)
-    setErrorMsg('Activando entorno de proyecto en segundo plano...')
-    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 estados de sesión de la instancia anterior
-        setSessions([])
-        setCurrentSessionId('')
-        setCurrentSession(null)
-        setMessages([])
-        
-        // Forzar recarga de sesiones del nuevo entorno
-        await fetchSessions()
-        setErrorMsg('')
-      } else {
-        const errData = await res.json().catch(() => ({}))
-        setErrorMsg(errData.error || 'Error al activar el proyecto')
-      }
-    } catch {
-      setErrorMsg('No se pudo conectar con el Daemon para activar el proyecto')
-    } finally {
-      setIsProcessing(false)
-    }
-  }
-
-  // Crea e inicia de forma inmediata una sesión dentro de un proyecto específico de un solo clic
-  const handleCreateSessionInProject = async (projectId: string) => {
-    const project = projects.find(p => p.id === projectId)
-    if (!project) return
-
-    // 1. Si el proyecto no es el activo, activarlo primero en segundo plano de forma transparente
-    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)
-          setSessions([])
-          setCurrentSessionId('')
-          setCurrentSession(null)
-          setMessages([])
-          setErrorMsg('')
-        } else {
-          alert(`No se pudo activar el proyecto: ${project.name}`)
-          setIsProcessing(false)
-          return
-        }
-      } catch {
-        alert(`Error al conectar al Daemon para activar el proyecto: ${project.name}`)
-        setIsProcessing(false)
-        return
-      }
-    }
-
-    // 2. Solicitar el título de la sesión de forma sencilla
-    const title = prompt(`Introduce el título de la nueva sesión para "${project.name}":`, `Sesión ${new Date().toLocaleDateString()}`)
-    if (!title || !title.trim()) return
-
-    setIsProcessing(true)
-    setErrorMsg('Iniciando sesión...')
-    try {
-      const res = await fetch('/api/session', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title: title.trim() })
-      })
-      if (res.ok) {
-        const newSess = await res.json()
-        setSessions(prev => [newSess, ...prev])
-        setCurrentSessionId(newSess.id)
-        setCurrentSession(newSess)
-        setMessages([])
-
-        // Registrar el título personalizado en el diccionario local
-        setCustomSessionTitles(prev => ({
-          ...prev,
-          [newSess.id]: title.trim()
-        }))
-        
-        // Guardar mapeo sesión -> proyecto
-        setSessionMappings(prev => ({
-          ...prev,
-          [newSess.id]: projectId
-        }))
-
-        // Redirigir a la vista de chat
-        navigateTo('/')
-      } else {
-        alert('Error al crear la sesión en Opencode')
-      }
-    } catch {
-      alert('Error de conexión al crear sesión')
-    } finally {
-      setIsProcessing(false)
-      setErrorMsg('')
-    }
-  }
-
-  // Elimina de forma permanente una sesión y sus mensajes en la API de Opencode
-  const handleDeleteSession = async (sessionId: string, e: React.MouseEvent) => {
-    e.stopPropagation()
-    
-    if (!confirm('¿Estás seguro de que quieres eliminar esta sesión y todos sus mensajes permanentemente?')) {
-      return
-    }
-
-    try {
-      const res = await fetch(`/api/session/${sessionId}`, {
-        method: 'DELETE'
-      })
-      if (res.ok) {
-        setSessions(prev => prev.filter(s => s.id !== sessionId))
-        setSessionMappings(prev => {
-          const copy = { ...prev }
-          delete copy[sessionId]
-          return copy
-        })
-
-        if (currentSessionId === sessionId) {
-          setCurrentSessionId('')
-          setCurrentSession(null)
-          setMessages([])
-        }
-      } else {
-        alert('No se pudo eliminar la sesión de Opencode')
-      }
-    } catch {
-      alert('Error de red al eliminar la sesión')
-    }
-  }
-
-  // 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()) {
-      alert('Por favor introduce un título para la sesión')
-      return
-    }
-
-    try {
-      setIsProcessing(true)
-      // 1. Crear sesión en la API de Opencode
-      const res = await fetch('/api/session', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ title: newSessionTitle.trim() })
-      })
-
-      if (!res.ok) throw new Error('Error al crear sesión')
-      const newSess = await res.json()
-      
-      // 2. Agregar a la lista de sesiones local
-      setSessions(prev => [newSess, ...prev])
-      setCurrentSessionId(newSess.id)
-      setCurrentSession(newSess)
-      setMessages([])
-
-      // Registrar el título personalizado en el diccionario local
-      setCustomSessionTitles(prev => ({
-        ...prev,
-        [newSess.id]: newSessionTitle.trim()
-      }))
-      
-      // 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 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
-        }
-        
-        if (newSessionModel && newSessionModel !== 'default') {
-          const [providerID, modelID] = newSessionModel.split('/')
-          bodyPayload.model = { providerID, modelID }
-        }
-
-        // Llamamos a prompt_async para enviar el prompt asíncronamente
-        await fetch(`/api/session/${newSess.id}/prompt_async`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(bodyPayload)
-        })
-
-        // Reiniciar campos
-        setNewSessionFirstPrompt('')
-      }
-
-      // Volver a la vista principal / chat
-      navigateTo('/')
-      triggerImmediateUpdate()
-    } catch {
-      alert('Error al iniciar la nueva sesión')
-    } finally {
-      setIsProcessing(false)
-    }
-  }
-
-  // Manejar el envío de prompts o la ejecución de comandos diagonal
-  const handleSendPrompt = async (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!inputValue.trim() || !currentSessionId) return
-
-    const input = inputValue.trim()
-    setInputValue('')
-    setIsProcessing(true)
-    setUserHasScrolledUp(false) // Forzar autoscroll al enviar
-
-    // Agregar mensaje local temporal de usuario
-    const tempUserMessage: Message = {
-      info: {
-        id: `temp-${Date.now()}`,
-        session_id: currentSessionId,
-        role: 'user',
-        time: { created: Date.now() }
-      },
-      parts: [{ type: 'text', text: input }]
-    }
-    setMessages(prev => [...prev, tempUserMessage])
-
-    try {
-      if (input.startsWith('/')) {
-        // Ejecución de comandos de Opencode
-        const parts = input.split(' ')
-        const commandName = parts[0].substring(1) // Quitar '/'
-        const args = parts.slice(1).join(' ')
-
-        const res = await fetch(`/api/session/${currentSessionId}/command`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            command: commandName,
-            arguments: args,
-            agent: selectedAgent
-          })
-        })
-
-        if (!res.ok) throw new Error('Error al ejecutar comando')
-      } else {
-        // Envío de prompt normal asíncrono
-        const bodyPayload: {
-          parts: { type: string; text: string }[];
-          agent: string;
-          model?: { providerID: string; modelID: string };
-        } = {
-          parts: [{ type: 'text', text: input }],
-          agent: selectedAgent
-        }
-        
-        // Agregar modelo personalizado si se ha seleccionado
-        if (selectedModel && selectedModel !== 'default') {
-          const [providerID, modelID] = selectedModel.split('/')
-          bodyPayload.model = { providerID, modelID }
-        }
-
-        const res = await fetch(`/api/session/${currentSessionId}/prompt_async`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(bodyPayload)
-        })
-
-        if (!res.ok) throw new Error('Error al enviar prompt')
-      }
-      
-      triggerImmediateUpdate()
-    } catch {
-      setErrorMsg('Error al conectar. Comprueba el estado de Opencode.')
-      setIsProcessing(false)
-    }
-  }
-
-  // Activa comandos rápidos desde un botón de un solo clic
-  const handleQuickCommand = async (commandName: string, args: string = '') => {
-    if (!currentSessionId) return
-    setIsProcessing(true)
-    setUserHasScrolledUp(false) // Forzar autoscroll al enviar
-
-    const fullCommandText = `/${commandName} ${args}`.trim()
-    
-    // Agregar mensaje temporal local
-    const tempUserMessage: Message = {
-      info: {
-        id: `temp-${Date.now()}`,
-        session_id: currentSessionId,
-        role: 'user',
-        time: { created: Date.now() }
-      },
-      parts: [{ type: 'text', text: fullCommandText }]
-    }
-    setMessages(prev => [...prev, tempUserMessage])
-
-    try {
-      const res = await fetch(`/api/session/${currentSessionId}/command`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          command: commandName,
-          arguments: args,
-          agent: selectedAgent
-        })
-      })
-
-      if (!res.ok) throw new Error('Error al ejecutar comando rápido')
-      triggerImmediateUpdate()
-    } catch {
-      setErrorMsg('No se pudo ejecutar el comando rápido.')
-      setIsProcessing(false)
-    }
-  }
-
-  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) {
-        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)
-    }
-  }
-
-  const togglePartExpansion = (id: string) => {
-    setExpandedParts(prev => ({ ...prev, [id]: !prev[id] }))
-  }
-
-  // Formateador de modelo para evitar colapsos
-  const formatModelName = (model: unknown): string => {
-    if (!model) return 'default'
-    if (typeof model === 'string') {
-      return model.split('/').pop() || model
-    }
-    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: {
-    time?: { created: number };
-    time_created?: number;
-  }): string => {
-    const rawTime = info?.time?.created || info?.time_created
-    if (!rawTime) return 'En curso...'
-    try {
-      const date = new Date(rawTime)
-      if (isNaN(date.getTime())) {
-        return 'En curso...'
-      }
-      return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-    } catch {
-      return 'En curso...'
-    }
-  }
-
-  // Estructura Jerárquica del Árbol de Subagentes
-  // Separar las sesiones en principales (raíz) e hijas (subagentes)
-  const rootSessions = sessions.filter(s => !s.parent_id && !s.parentID)
-  
-  const getSubagentsFor = (parentId: string) => {
-    return sessions.filter(s => s.parent_id === parentId || s.parentID === parentId)
-  }
-
-  // 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]
-      if (mappedId) {
-        if (projects.some(p => p.id === mappedId)) {
-          return mappedId === 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
-    })
-  }
-
-  // Sesiones sin clasificar (Inbox)
-  const unclassifiedSessions: Session[] = []
-
-  // 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">
-      
-      {/* SIDEBAR: Lista de Sesiones e Instancias con Árbol de Subagentes */}
-      <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">
-          <div className="flex items-center gap-2">
-            <div className="p-1.5 bg-[#ffffff] rounded-md text-[#09090b]">
-              <Terminal size={18} className="font-bold animate-pulse" />
-            </div>
-            <span className="font-bold tracking-tight text-lg">ZugzWeb</span>
-          </div>
-          <button
-            onClick={() => navigateTo('/new')}
-            className="p-1.5 bg-[#27272a] hover:bg-[#3f3f46] text-[#fafafa] rounded-md transition duration-200 cursor-pointer"
-            title="Nueva Sesión"
-          >
-            <Plus size={16} />
-          </button>
-        </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={() => 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"
-          >
-            <Plus size={10} strokeWidth={2.5} />
-            <span>Proyecto</span>
-          </button>
-        </div>
-
-        {/* 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>
-              <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
-                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>
-          </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={() => toggleProjectExpansion(project.id)}
-                    className="flex-1 flex items-center gap-2 text-left cursor-pointer outline-none min-w-0"
-                  >
-                    <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>
-
-                  <div className="flex items-center gap-1 shrink-0 ml-1">
-                    {project.id !== 'workspace_raiz' && (
-                      <button
-                        onClick={() => handleCreateSessionInProject(project.id)}
-                        className="p-1 hover:bg-[#27272a] text-emerald-500 hover:text-emerald-400 rounded transition cursor-pointer"
-                        title="Crear Sesión en este proyecto"
-                      >
-                        <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 && project.id !== 'workspace_raiz' && (
-                      <button
-                        onClick={() => handleActivateProject(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">
-                    {project.id === 'workspace_raiz' ? (
-                      <div className="text-[10px] text-[#71717a] py-1 pl-1 space-y-1 pr-2 leading-relaxed">
-                        <span className="block font-bold text-amber-500/90">📁 Carpeta Base Central</span>
-                        <p className="text-[#8e8e93]">
-                          Para iniciar chats de desarrollo, crea primero un subproyecto con el botón <strong className="text-white">"+ Proyecto"</strong> de arriba.
-                        </p>
-                      </div>
-                    ) : 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 (
-                          <div key={root.id} className="space-y-1">
-                            {/* Sesión Principal */}
-                            <div className={`w-full group/sess flex items-center justify-between rounded-lg p-1.5 transition duration-200 ${
-                              isRootActive
-                                ? 'bg-[#1c1c1f] border border-[#2e2e33] text-white shadow-sm'
-                                : 'hover:bg-[#121215] text-[#a1a1aa] hover:text-white'
-                            }`}>
-                              <button
-                                onClick={() => {
-                                  handleSelectSession(root.id, project.id)
-                                }}
-                                className="flex-1 text-left cursor-pointer outline-none min-w-0"
-                              >
-                                <span className="font-semibold truncate text-[11px] block">
-                                  💬 {customSessionTitles[root.id] || root.title || `Sesión: ${root.id.substring(0, 8)}`}
-                                </span>
-                                <div className="flex items-center justify-between text-[9px] text-[#52525b] mt-0.5">
-                                  <span>{root.agent || 'sdd-orchestrator'}</span>
-                                  <span>{formatModelName(root.model)}</span>
-                                </div>
-                              </button>
-                              
-                              {/* Botón de eliminar sesión */}
-                              <button
-                                onClick={(e) => handleDeleteSession(root.id, e)}
-                                className="opacity-0 group-hover/sess:opacity-100 p-1 hover:bg-red-950/40 text-[#71717a] hover:text-red-400 rounded transition cursor-pointer shrink-0 ml-1"
-                                title="Eliminar Sesión"
-                              >
-                                <Square size={10} />
-                              </button>
-                            </div>
-
-                            {/* 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={() => {
-                                        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
-                                          ? '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]">
-                            💬 {customSessionTitles[root.id] || 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>
-
-        {/* Notificaciones y Estado del Túnel */}
-        <div className="p-4 bg-[#09090b] border-t border-[#1f1f23] space-y-3">
-          <button
-            onClick={toggleNotifications}
-            className={`w-full flex items-center justify-center gap-2 py-2 px-3 rounded-md text-xs font-medium border transition cursor-pointer ${
-              notificationsEnabled
-                ? 'bg-transparent border-[#22c55e]/30 hover:border-[#22c55e]/50 text-[#22c55e]'
-                : 'bg-transparent border-[#27272a] hover:border-[#3f3f46] text-[#a1a1aa]'
-            }`}
-          >
-            {notificationsEnabled ? (
-              <>
-                <Bell size={14} />
-                <span>Notificaciones Activas</span>
-              </>
-            ) : (
-              <>
-                <BellOff size={14} />
-                <span>Activar Alertas Navegador</span>
-              </>
-            )}
-          </button>
-
-          {tunnelUrl && (
-            <div className="p-2 bg-[#1c1c1f]/50 border border-[#2e2e33] rounded-lg space-y-1">
-              <div className="flex items-center gap-1.5 text-[11px] text-[#a1a1aa] font-medium">
-                <Globe size={11} className="text-[#3b82f6] animate-pulse" />
-                <span>Túnel Remoto Activo</span>
-              </div>
-              <a
-                href={tunnelUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-[10px] text-[#3b82f6] hover:underline flex items-center gap-1 font-mono break-all"
-              >
-                {tunnelUrl}
-                <ExternalLink size={8} />
-              </a>
-            </div>
-          )}
-        </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 ? (
-          <>
-            {/* Header de Nueva Sesión */}
-            <div className="h-14 border-b border-[#1f1f23] flex items-center justify-between px-6 bg-[#09090b]/80 backdrop-blur-md z-10 shrink-0">
-              <div className="flex items-center gap-2">
-                <Sparkles size={16} className="text-emerald-400 animate-pulse" />
-                <h1 className="text-sm font-bold text-[#fafafa]">Crear Nueva Sesión de Desarrollo</h1>
-              </div>
-              {sessions.length > 0 && (
-                <button
-                  onClick={() => navigateTo('/')}
-                  className="text-xs text-[#71717a] hover:text-white border border-[#1f1f23] hover:border-[#27272a] px-2.5 py-1 rounded-md transition cursor-pointer"
-                >
-                  Cancelar
-                </button>
-              )}
-            </div>
-
-            {/* Formulario de Nueva Sesión */}
-            <div className="flex-1 overflow-y-auto p-8 max-w-2xl mx-auto w-full space-y-6">
-              <div className="space-y-1.5">
-                <h2 className="text-xl font-bold tracking-tight text-white flex items-center gap-2">
-                  <span>🚀 Comenzar un nuevo flujo</span>
-                </h2>
-                <p className="text-xs text-[#71717a]">
-                  Elige el agente y modelo adecuados para estructurar tu especificación, codificar o auditar tu aplicación de forma guiada y asíncrona.
-                </p>
-              </div>
-
-              <form onSubmit={handleStartNewSession} className="space-y-5">
-                {/* INPUT: TÍTULO DE LA SESIÓN */}
-                <div className="space-y-1.5">
-                  <label className="text-xs font-bold text-[#a1a1aa] uppercase tracking-wider">Título de la Sesión</label>
-                  <input
-                    type="text"
-                    value={newSessionTitle}
-                    onChange={e => setNewSessionTitle(e.target.value)}
-                    placeholder="Ej. Crear Login Form, Refactorizar Auth..."
-                    className="w-full bg-[#0c0c0e] border border-[#27272a] focus:border-[#3f3f46] rounded-xl px-4 py-3 text-sm text-[#fafafa] placeholder-[#52525b] outline-none transition font-medium"
-                    required
-                  />
-                </div>
-
-                {/* SELECCIÓN DE AGENTES: CARDS INTERACTIVAS */}
-                <div className="space-y-1.5">
-                  <label className="text-xs font-bold text-[#a1a1aa] uppercase tracking-wider">Agente Primario Inicial</label>
-                  <div className="grid grid-cols-1 gap-2.5">
-                    {AVAILABLE_AGENTS.map(agent => {
-                      const isSelected = newSessionAgent === agent.id
-                      return (
-                        <button
-                          key={agent.id}
-                          type="button"
-                          onClick={() => setNewSessionAgent(agent.id)}
-                          className={`w-full text-left p-3.5 rounded-xl border transition-all duration-200 flex gap-3 cursor-pointer relative ${
-                            isSelected
-                              ? 'bg-[#121215] border-white/60 shadow-[0_0_12px_rgba(255,255,255,0.05)]'
-                              : 'bg-[#0c0c0e] border-[#1f1f23] hover:border-[#27272a]'
-                          }`}
-                        >
-                          <div
-                            className="h-8 w-8 rounded-lg flex items-center justify-center shrink-0"
-                            style={{ backgroundColor: `${agent.color}15`, color: agent.color }}
-                          >
-                            {agent.id === 'build' ? <Settings size={16} /> : agent.id === 'plan' ? <Code size={16} /> : <Sparkles size={16} />}
-                          </div>
-                          <div className="space-y-0.5">
-                            <div className="flex items-center gap-2">
-                              <span className="text-xs font-bold text-white">{agent.name}</span>
-                              {agent.id === 'sdd-orchestrator' && (
-                                <span className="text-[9px] bg-white/10 text-white/80 font-mono px-1 rounded uppercase tracking-wider">Por defecto</span>
-                              )}
-                            </div>
-                            <p className="text-[11px] text-[#71717a] leading-relaxed">{agent.description}</p>
-                          </div>
-                          {isSelected && (
-                            <div className="absolute right-4 top-4 h-4 w-4 bg-white rounded-full flex items-center justify-center text-[#09090b]">
-                              <Check size={10} strokeWidth={3} />
-                            </div>
-                          )}
-                        </button>
-                      )
-                    })}
-                  </div>
-                </div>
-
-                {/* SELECTOR DE MODELO */}
-                <div className="space-y-1.5">
-                  <label className="text-xs font-bold text-[#a1a1aa] uppercase tracking-wider">Modelo Objetivo</label>
-                  <div className="relative">
-                    <select
-                      value={newSessionModel}
-                      onChange={e => setNewSessionModel(e.target.value)}
-                      className="w-full bg-[#0c0c0e] border border-[#27272a] rounded-xl py-3 pl-4 pr-10 text-sm text-[#fafafa] hover:border-[#27272a] focus:border-[#3f3f46] outline-none transition cursor-pointer appearance-none font-medium"
-                    >
-                      {POPULAR_MODELS.map(m => (
-                        <option key={m.id} value={m.id}>
-                          {m.name}
-                        </option>
-                      ))}
-                    </select>
-                    <div className="absolute inset-y-0 right-4 flex items-center pointer-events-none text-[#71717a]">
-                      <ChevronDown size={16} />
-                    </div>
-                  </div>
-                </div>
-
-                {/* TEXTAREA: PRIMERA INSTRUCCIÓN (OPCIONAL) */}
-                <div className="space-y-1.5">
-                  <div className="flex justify-between items-center">
-                    <label className="text-xs font-bold text-[#a1a1aa] uppercase tracking-wider">Primera Instrucción (Opcional)</label>
-                    <span className="text-[10px] text-[#52525b]">Arranca de inmediato</span>
-                  </div>
-                  <textarea
-                    value={newSessionFirstPrompt}
-                    onChange={e => setNewSessionFirstPrompt(e.target.value)}
-                    placeholder="Ej. @sdd-spec-writer Crea un contrato para una calculadora..."
-                    className="w-full bg-[#0c0c0e] border border-[#27272a] focus:border-[#3f3f46] rounded-xl px-4 py-3 text-sm text-[#fafafa] placeholder-[#52525b] outline-none transition h-24 resize-none"
-                  />
-                </div>
-
-                {/* BOTÓN DE CREAR */}
-                <button
-                  type="submit"
-                  disabled={isProcessing}
-                  className="w-full bg-white hover:bg-[#e4e4e7] text-[#09090b] disabled:bg-[#18181b] disabled:text-[#71717a] font-bold py-3 px-4 rounded-xl transition duration-200 cursor-pointer text-sm shadow-md flex items-center justify-center gap-2"
-                >
-                  {isProcessing ? (
-                    <RefreshCw size={14} className="animate-spin" />
-                  ) : (
-                    <Plus size={14} strokeWidth={2.5} />
-                  )}
-                  <span>{isProcessing ? 'Iniciando sesión...' : 'Crear e Iniciar Sesión'}</span>
-                </button>
-              </form>
-            </div>
-          </>
-        ) : (
-          <>
-            {/* Header de la Sesión */}
-            <div className="h-14 border-b border-[#1f1f23] flex items-center justify-between px-6 bg-[#09090b]/80 backdrop-blur-md z-10 shrink-0">
-              <div className="flex flex-col">
-                <h1 className="text-sm font-bold m-0 p-0 text-[#fafafa] flex items-center gap-2">
-                  {(currentSession && customSessionTitles[currentSession.id]) || currentSession?.title || 'Cargando sesión...'}
-                  {isProcessing && (
-                    <span className="flex h-2 w-2 relative">
-                      <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#22c55e] opacity-75"></span>
-                      <span className="relative inline-flex rounded-full h-2 w-2 bg-[#22c55e]"></span>
-                    </span>
-                  )}
-                </h1>
-                {currentSession && (
-                  <div className="flex items-center gap-2 text-[11px] text-[#71717a] mt-0.5">
-                    <span>ID: <code className="text-[10px] font-mono bg-transparent p-0">{currentSession.id}</code></span>
-                    <span>•</span>
-                    <span>Costo: <span className="text-[#22c55e] font-mono">${(currentSession.cost || 0).toFixed(6)}</span></span>
-                    <span>•</span>
-                    <span>Tokens: In: {currentSession.tokens_input || 0} | Out: {currentSession.tokens_output || 0}</span>
-                  </div>
-                )}
-              </div>
-              
-              <div className="flex items-center gap-2">
-                {errorMsg && (
-                  <span className="text-xs text-red-400 bg-red-950/40 border border-red-900/50 py-1 px-3 rounded-md animate-pulse flex items-center gap-1">
-                    <AlertCircle size={12} />
-                    {errorMsg}
-                  </span>
-                )}
-                <button
-                  onClick={() => {
-                    if (currentSessionId) {
-                      fetchMessages(currentSessionId)
-                      fetchSessionDetails(currentSessionId)
-                      fetchSessionStatus()
-                    }
-                  }}
-                  className="p-1.5 bg-[#1c1c1f] border border-[#2e2e33] hover:bg-[#27272a] text-[#a1a1aa] hover:text-[#ffffff] rounded-md transition duration-200 cursor-pointer"
-                  title="Actualizar"
-                >
-                  <RefreshCw size={14} className={isProcessing ? 'animate-spin' : ''} />
-                </button>
-              </div>
-            </div>
-
-            {/* PANEL DE COMANDOS RÁPIDOS SUPERIOR */}
-            {currentSessionId && (
-              <div className="bg-[#0c0c0e]/60 border-b border-[#1f1f23] px-6 py-2 flex items-center gap-2 overflow-x-auto shrink-0 scrollbar-none">
-                <span className="text-[10px] text-[#71717a] font-bold uppercase tracking-wider shrink-0 mr-1 flex items-center gap-1 select-none">
-                  <Code size={11} />
-                  <span>Comandos Rápidos:</span>
-                </span>
-                <button
-                  onClick={() => handleQuickCommand('status')}
-                  className="py-1 px-2.5 bg-[#121215] hover:bg-[#1c1c1f] border border-[#1f1f23] text-[11px] text-[#e4e4e7] rounded-md transition cursor-pointer shrink-0 font-medium font-mono"
-                >
-                  /status
-                </button>
-                <button
-                  onClick={() => handleQuickCommand('undo')}
-                  className="py-1 px-2.5 bg-[#121215] hover:bg-[#1c1c1f] border border-[#1f1f23] text-[11px] text-[#e4e4e7] rounded-md transition cursor-pointer shrink-0 font-medium font-mono"
-                  title="Deshacer última edición de archivo"
-                >
-                  /undo
-                </button>
-                <button
-                  onClick={() => handleQuickCommand('reset')}
-                  className="py-1 px-2.5 bg-[#121215] hover:bg-[#1c1c1f] border border-[#1f1f23] text-[11px] text-[#e4e4e7] rounded-md transition cursor-pointer shrink-0 font-medium font-mono"
-                  title="Reiniciar y limpiar sesión"
-                >
-                  /reset
-                </button>
-                <button
-                  onClick={() => handleQuickCommand('loop', prompt('Introduce la tarea para el loop autónomo:', '') || '')}
-                  className="py-1 px-2.5 bg-[#ffffff] hover:bg-[#e4e4e7] text-[#09090b] text-[11px] font-bold rounded-md transition cursor-pointer shrink-0 flex items-center gap-1"
-                >
-                  <Sparkles size={10} />
-                  <span>Iniciar Autopiloto (/loop)</span>
-                </button>
-              </div>
-            )}
-
-            {/* HISTORIAL DE MENSAJES */}
-            <div 
-              ref={chatContainerRef}
-              onScroll={handleScroll}
-              className="flex-1 overflow-y-auto p-6 space-y-6"
-            >
-              {!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">
-                    <p className="text-sm font-medium">No hay mensajes en esta sesión</p>
-                    <p className="text-xs mt-0.5">Escribe una instrucción, comando o inicia un loop de desarrollo abajo.</p>
-                  </div>
-                </div>
-              ) : (
-                messages.map((msg, idx) => {
-                  const isUser = msg.info.role === 'user'
-                  // Consolidar todo el texto de las partes del mensaje para copiar
-                  const fullTextMessage = msg.parts
-                    .filter(p => p.type === 'text')
-                    .map(p => p.text)
-                    .join('\n\n')
-
-                  return (
-                    <div
-                      key={msg.info.id || idx}
-                      className={`flex gap-4 max-w-4xl mx-auto ${isUser ? 'justify-end' : 'justify-start'}`}
-                    >
-                      {!isUser && (
-                        <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} />
-                        </div>
-                      )}
-
-                      <div
-                        className={`rounded-xl px-4 py-3 space-y-3 max-w-[85%] border shadow-sm group relative ${
-                          isUser
-                            ? 'bg-[#18181b] text-[#ffffff] border-[#2e2e33]'
-                            : 'bg-[#0c0c0e] text-[#f4f4f5] border-[#1f1f23]'
-                        }`}
-                      >
-                        {/* Encabezado del mensaje con fecha corregida */}
-                        <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 flex-wrap">
-                            <span>{isUser ? 'TÚ' : 'AGENTE'}</span>
-                            <span>•</span>
-                            <span className="flex items-center gap-1 font-mono">
-                              <Clock size={10} />
-                              {formatMessageTime(msg.info)}
-                            </span>
-                          </div>
-                          
-                          {/* Botón de copiar resultado en la burbuja */}
-                          {fullTextMessage && (
-                            <button
-                              onClick={() => handleCopyText(fullTextMessage, msg.info.id || String(idx))}
-                              className="opacity-0 group-hover:opacity-100 p-1 hover:bg-[#1f1f23] text-[#a1a1aa] hover:text-white rounded transition cursor-pointer"
-                              title="Copiar texto"
-                            >
-                              {copiedMessageId === (msg.info.id || String(idx)) ? (
-                                <Check size={12} className="text-green-500" />
-                              ) : (
-                                <Copy size={12} />
-                              )}
-                            </button>
-                          )}
-                        </div>
-
-                        {/* Partes del mensaje */}
-                        <div className="space-y-3">
-                          {msg.parts.map((part, pIdx) => {
-                            const partId = `${msg.info.id || idx}-${pIdx}`
-                            const isExpanded = expandedParts[partId]
-
-                            // 1. TEXT PART
-                            if (part.type === 'text') {
-                              return (
-                                <div 
-                                  key={pIdx} 
-                                  className="text-sm leading-relaxed prose prose-invert max-w-none text-[#e4e4e7] markdown-content"
-                                  dangerouslySetInnerHTML={renderMarkdown(part.text || '')}
-                                />
-                              )
-                            }
-
-                            // 2. REASONING PART
-                            if (part.type === 'reasoning') {
-                              return (
-                                <div key={pIdx} className="border border-[#2e2e33]/50 rounded-lg overflow-hidden bg-[#121215]/30">
-                                  <button
-                                    onClick={() => togglePartExpansion(partId)}
-                                    className="w-full flex items-center justify-between p-2 text-xs font-medium text-[#a1a1aa] hover:text-[#fafafa] hover:bg-[#1c1c1f]/30 transition duration-200 cursor-pointer"
-                                  >
-                                    <div className="flex items-center gap-1.5">
-                                      <span className="h-1.5 w-1.5 rounded-full bg-[#a855f7] animate-pulse"></span>
-                                      <span>Pensamiento del modelo</span>
-                                    </div>
-                                    {isExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
-                                  </button>
-                                  {isExpanded && (
-                                    <div className="p-3 border-t border-[#1f1f23] text-xs font-mono text-[#a1a1aa] bg-[#0c0c0e]/80 whitespace-pre-wrap leading-relaxed max-h-60 overflow-y-auto">
-                                      {part.text}
-                                    </div>
-                                  )}
-                                </div>
-                              )
-                            }
-
-                            // 3. TOOL CALL PART
-                            if (part.type === 'tool') {
-                              const status = part.state?.status || 'unknown'
-                              const toolName = part.tool || 'Desconocido'
-                              const hasOutput = !!part.state?.output
-
-                              return (
-                                <div key={pIdx} className="border border-[#1f1f23] rounded-lg overflow-hidden bg-[#0a0a0c]">
-                                  <button
-                                    onClick={() => togglePartExpansion(partId)}
-                                    className="w-full flex items-center justify-between p-2.5 text-xs font-mono text-[#e4e4e7] hover:bg-[#121215] transition duration-200 cursor-pointer"
-                                  >
-                                    <div className="flex items-center gap-2">
-                                      <Settings size={13} className="text-amber-500 animate-spin" style={{ animationDuration: '3s' }} />
-                                      <span className="font-semibold text-amber-400">Herramienta: {toolName}</span>
-                                      <span className={`text-[10px] px-1.5 py-0.5 rounded border ${
-                                        status === 'success' || status === 'completed'
-                                          ? 'bg-green-950/20 text-green-400 border-green-900/50'
-                                          : 'bg-yellow-950/20 text-yellow-500 border-yellow-900/50'
-                                      }`}>
-                                        {status}
-                                      </span>
-                                    </div>
-                                    {isExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
-                                  </button>
-
-                                  {isExpanded && (
-                                    <div className="p-3 border-t border-[#1f1f23] bg-[#09090b] text-xs font-mono space-y-3">
-                                      <div>
-                                        <div className="text-[10px] text-[#71717a] font-bold uppercase tracking-wider mb-1">Entrada / Parámetros:</div>
-                                        <pre className="p-2 bg-[#0c0c0e] rounded border border-[#1f1f23] text-[#fafafa] overflow-x-auto max-h-40">
-                                          {JSON.stringify(part.state?.input || {}, null, 2)}
-                                        </pre>
-                                      </div>
-
-                                      {hasOutput && (
-                                        <div>
-                                          <div className="text-[10px] text-[#71717a] font-bold uppercase tracking-wider mb-1">Salida / Resultado:</div>
-                                          <pre className="p-2 bg-[#0c0c0e] rounded border border-[#1f1f23] text-[#fafafa] overflow-x-auto max-h-60 overflow-y-auto">
-                                            {typeof part.state?.output === 'string' 
-                                              ? part.state.output 
-                                              : JSON.stringify(part.state?.output, null, 2)}
-                                          </pre>
-                                        </div>
-                                      )}
-                                    </div>
-                                  )}
-                                </div>
-                              )
-                            }
-
-                            return null
-                          })}
-                        </div>
-                      </div>
-
-                      {isUser && (
-                        <div className="h-8 w-8 rounded-full border border-[#2e2e33] bg-[#ffffff] flex items-center justify-center text-[#09090b] shrink-0">
-                          <User size={16} />
-                        </div>
-                      )}
-                    </div>
-                  )
-                })
-              )}
-              
-              {/* INDICADOR DE CARGA EN TIEMPO REAL DEL AGENTE */}
-              {isProcessing && (
-                <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 */}
-            <div className="p-4 border-t border-[#1f1f23] bg-[#09090b] shrink-0">
-              <form onSubmit={handleSendPrompt} className="max-w-4xl mx-auto space-y-3">
-                
-                {/* Opciones Avanzadas del Prompt: Selector de Agente y Modelo */}
-                <div className="flex items-center gap-4 px-1 flex-wrap">
-                  <div className="flex items-center gap-2">
-                    <span className="text-[10px] text-[#71717a] uppercase font-bold tracking-wider select-none">
-                      Agente Activo:
-                    </span>
-                    <div className="relative">
-                      <select
-                        value={selectedAgent}
-                        onChange={e => setSelectedAgent(e.target.value)}
-                        className="bg-[#121215] border border-[#1f1f23] text-[11px] text-[#e4e4e7] rounded-md py-1 pl-2 pr-6 outline-none hover:border-[#27272a] transition cursor-pointer appearance-none font-semibold"
-                      >
-                        {AVAILABLE_AGENTS.map(a => (
-                          <option key={a.id} value={a.id}>
-                            {a.name}
-                          </option>
-                        ))}
-                      </select>
-                      <div className="absolute inset-y-0 right-1.5 flex items-center pointer-events-none text-[#71717a]">
-                        <ChevronDown size={11} />
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="flex items-center gap-2">
-                    <span className="text-[10px] text-[#71717a] uppercase font-bold tracking-wider select-none">
-                      Modelo Objetivo:
-                    </span>
-                    <div className="relative">
-                      <select
-                        value={selectedModel}
-                        onChange={e => setSelectedModel(e.target.value)}
-                        className="bg-[#121215] border border-[#1f1f23] text-[11px] text-[#e4e4e7] rounded-md py-1 pl-2 pr-6 outline-none hover:border-[#27272a] transition cursor-pointer appearance-none font-semibold"
-                      >
-                        {POPULAR_MODELS.map(m => (
-                          <option key={m.id} value={m.id}>
-                            {m.name}
-                          </option>
-                        ))}
-                      </select>
-                      <div className="absolute inset-y-0 right-1.5 flex items-center pointer-events-none text-[#71717a]">
-                        <ChevronDown size={11} />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                 {/* Input Textarea principal */}
-                <div className="relative border border-[#27272a] focus-within:border-[#3f3f46] rounded-xl bg-[#0c0c0e] overflow-hidden shadow-lg transition duration-200">
-                  <textarea
-                    value={inputValue}
-                    onChange={e => setInputValue(e.target.value)}
-                    disabled={!currentSessionId || isProcessing}
-                    onKeyDown={e => {
-                      if (e.key === 'Enter' && !e.shiftKey) {
-                        e.preventDefault()
-                        handleSendPrompt(e)
-                      }
-                    }}
-                    placeholder={
-                      !currentSessionId
-                        ? "Debe haber una sesión activa de Opencode para enviar prompts. Por favor, inicia conexión o crea una sesión."
-                        : isProcessing
-                        ? "El agente está procesando tu solicitud... Por favor, espera a que termine o haz clic en 'Abortar' para cancelar."
-                        : 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 disabled:cursor-not-allowed"
-                  />
-
-                  <div className="absolute right-3 bottom-3 flex items-center gap-2">
-                    {isProcessing ? (
-                      <button
-                        type="button"
-                        onClick={handleAbort}
-                        className="flex items-center gap-1.5 px-3 py-1.5 bg-[#ef4444] hover:bg-[#dc2626] text-white rounded-lg text-xs font-semibold transition cursor-pointer shadow animate-pulse"
-                        title="Abortar ejecución"
-                      >
-                        <Square size={12} className="fill-current" />
-                        <span>Abortar</span>
-                      </button>
-                    ) : (
-                      <button
-                        type="submit"
-                        disabled={!inputValue.trim() || !currentSessionId}
-                        className="flex items-center gap-1.5 px-3 py-1.5 bg-[#ffffff] hover:bg-[#e4e4e7] disabled:bg-[#18181b] text-[#09090b] disabled:text-[#71717a] rounded-lg text-xs font-bold transition cursor-pointer shadow disabled:cursor-not-allowed"
-                      >
-                        <Play size={10} className="fill-current" />
-                        <span>Enviar</span>
-                      </button>
-                    )}
-                  </div>
-                </div>
-
-                <div className="flex justify-between items-center text-[11px] text-[#71717a] px-1">
-                  <div className="flex items-center gap-3">
-                    <span className="flex items-center gap-1">
-                      <span className={`h-1.5 w-1.5 rounded-full ${isProcessing ? 'bg-amber-500 animate-pulse' : 'bg-green-500'}`}></span>
-                      <span>{isProcessing ? 'Procesando comando/loop' : 'Listo'}</span>
-                    </span>
-                    <span>•</span>
-                    <span>Enlazado al puerto :{currentPort} de Opencode</span>
-                  </div>
-                  <span className="font-mono">v1.2.0-web</span>
-                </div>
-              </form>
-            </div>
-          </>
-        )}
-      </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>
-  )
-}