Inicio › Documentación › Arquitectura

Arquitectura

Cómo está construido LastBrowser — shell Electron, backend Python, capa IPC, flujo de datos y diseño de módulos.

Contenido

  1. Visión General de Alto Nivel
  2. Proceso Principal de Electron
  3. Sistema de Módulos
  4. Comunicación IPC
  5. Almacenamiento de Datos
  6. Backend Python
  7. Compilación y Empaquetado
  8. Modelo de Seguridad

Visión General de Alto Nivel

LastBrowser es una aplicación de doble proceso que combina un shell Electron (interfaz de usuario frontend, integración nativa con el SO) con un backend Python (lógica del agente de IA, servidor WebUI). Los dos procesos se comunican a través de HTTP y un puerto local.

┌─────────────────────────────────────────────────────────────────┐ │ Aplicación Electron de LastBrowser │ │ ┌─────────────┐ ┌─────────────┐ ┌──────────────────────────┐ │ │ │ Proc. Princ.│ │ Renderizador│ │ WebContentsViews (Pest.)│ │ │ │ (Node.js) │◄─┤ (Navegador)│ │ (Aislado por Pestaña) │ │ │ │ Gestores │ │ Barra Lat. │ │ │ │ │ │ Enrutador │ │ Espacio │ │ ┌──────┐ ┌──────┐ │ │ │ │ IPC │ │ Trabajo │ │ │Pest.1│ │Pest.2│ │ │ │ │ Bandeja Sis│ │ IU │ │ └──────┘ └──────┘ │ │ │ └──────┬──────┘ └─────────────┘ └──────────────────────────┘ │ │ │ HTTP (localhost:7889) │ │ ▼ │ │ ┌──────────────────────────────────────────────────────────────┤ │ │ Backend Python (server.py) │ │ │ ┌──────────┐ ┌──────────┐ ┌────────┐ ┌──────────────────┐ │ │ │ │Núcleo │ │ Manej. │ │ Arch. │ │ WebSocket │ │ │ │ │Agente │ │ API │ │ Estát. │ │ Sesiones │ │ │ │ │Hermes │ │ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ └────────┘ └──────────────────┘ │ │ └──────────────────────────────────────────────────────────────┘ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────┐ │ Almacenamiento Local (SQLite vía sql.js en proc. principal)│ │ Pestañas, Espacios de Trabajo, Agentes, Ajustes, Kanban, │ │ Sesiones, Tareas │ └──────────────────────────────────────────────────────────────────┘

Proceso Principal de Electron

El proceso principal (native/main.js) es el orquestador de la aplicación. Gestiona:

  • Creación de Ventanas: Crea el BrowserWindow con barra de título oculta (sin marco personalizado), integración de barra lateral y gestión de WebContentsView.
  • Ciclo de Vida del Servidor: Inicia/detiene el servidor backend Python WebUI mediante server-launcher.js. Maneja el apagado ordenado al cerrar la aplicación.
  • Bandeja del Sistema: Gestiona el icono de bandeja, menú contextual (Mostrar, Reiniciar Servidor, Salir) y el comportamiento de minimizar a bandeja.
  • Enrutador IPC: Toda la comunicación del renderizador al proceso principal pasa por un enrutador IPC centralizado (src/main/ipc/router.js).
  • Atajos Globales: Registra Ctrl+K (Paleta de Comandos), Ctrl+Mayús+M (Silenciar Todo), Ctrl+B (Alternar Barra Lateral).
  • WebViews: Gestiona instancias de WebContentsView para pestañas del navegador con ciclo de vida de crear/destruir/asociar.

Sistema de Módulos

El proceso principal organiza la funcionalidad mediante un patrón de gestores. Cada gestor es un módulo autocontenido:

workspaceManagerAislamiento de sesiones, CRUD, reordenar, exportar/importar
tabManagerCiclo de vida de pestañas, suspender, fijar, historial de cierre (50)
agentManagerCRUD de agentes, sistema de roles, seguimiento de tareas, panel
kanbanManagerTableros, columnas, tarjetas, límites WIP, arrastrar y soltar
splitViewManagerDiseños de múltiples paneles, redimensionar, gestión de paneles
focusManagerPomodoro, bloqueo de distracciones, estado del temporizador
commandPaletteBúsqueda difusa en todos los tipos de datos, acciones rápidas
appManagerAplicaciones web ancladas, multi-cuenta, categorías
settingsManagerAjustes persistentes, valores predeterminados, actualizaciones en tiempo de ejecución
privacyManagerBloqueo de anuncios, control de cookies, limpieza de caché
resourceSaverSuspensión de pestañas, estadísticas de memoria, lista de excepciones
sessionManagerCRUD de sesiones, asignaciones de agentes
taskManagerGestión de tareas, seguimiento de estado
workerManagerGrupo de trabajadores en segundo plano, programación de trabajos
cronManagerTareas programadas, trabajos recurrentes
pipelineManagerTubería de flujo de trabajo, automatización de múltiples pasos
notificationManagerNotificaciones del SO, actualizaciones de insignias
accountManagerMulti-cuenta por aplicación, cambio de sesión
compactManagerAlternar modo de IU compacta
appDefinitionManagerBiblioteca de definiciones de aplicaciones (Slack, Gmail, etc.)
gitManagerIntegración Git, commit, diff, gestión de ramas

Cada gestor sigue un patrón consistente:

  • Almacena datos a través de la abstracción del almacén de base de datos
  • Exporta una API limpia de funciones
  • Maneja el aislamiento por espacio de trabajo cuando corresponde

Comunicación IPC

Toda la comunicación del renderizador al proceso principal utiliza el patrón contextBridge + ipcMain.handle / ipcRenderer.invoke de Electron. El sistema de canales IPC se define en src/shared/constants.js con aproximadamente 150+ canales organizados por dominio:

// Organización de Canales IPC (de src/shared/constants.js)
IPC.WORKSPACE_LIST, .WORKSPACE_CREATE, .WORKSPACE_DELETE...
IPC.TAB_CREATE, .TAB_CLOSE, .TAB_SUSPEND, .TAB_RESTORE...
IPC.AGENT_LIST, .AGENT_INVOKE, .AGENT_RESPONSE...
IPC.APP_LIST, .APP_CREATE, .APP_MUTE, .APP_SLEEP...
IPC.SPLIT_VIEW_CREATE, .SPLIT_VIEW_RESIZE...
IPC.FOCUS_START, .FOCUS_STOP, .FOCUS_STATUS...
IPC.KANBAN_CREATE, .KANBAN_MOVE, .KANBAN_WIP...
IPC.TAB_EXEC_JS, .TAB_SCREENSHOT, .TAB_GET_CONTENT

Seguridad: contextIsolation: true, nodeIntegration: false. Todas las APIs de Node.js se exponen mediante preload.js con una lista blanca explícita.

Almacenamiento de Datos

LastBrowser utiliza sql.js (SQLite compilado a WebAssembly mediante Emscripten) para todos los datos persistentes:

  • Colecciones: Pestañas, espacios de trabajo, agentes, ajustes, tableros/columnas/tarjetas Kanban, sesiones de enfoque, pestañas cerradas, cuentas de aplicaciones, trabajos de trabajadores, tareas, reglas de distracción.
  • Ubicación de la Base de Datos: Almacenada en el directorio de datos de la aplicación del usuario (app.getPath('userData') de Electron).
  • Esquema: Almacén de documentos basado en colecciones sobre SQLite. Cada "colección" es una tabla o una columna de documento JSON.
  • Migraciones: Gestionadas por src/main/database/migrations.js para la evolución del esquema entre versiones.

Backend Python

El backend Python (server.py) proporciona la WebUI de Hermes, la interfaz del agente de IA que LastBrowser envuelve:

  • Framework: Servidor HTTP Python (FastAPI o similar) que sirve la WebUI en localhost:7889.
  • Inicio del Servidor: server-launcher.js inicia el proceso Python, espera a que esté listo y gestiona su ciclo de vida. En modo de desarrollo, está en la raíz del proyecto; en producción, se empaqueta como extraResources/webui/.
  • API HTTP: Puntos finales REST para interacción con agentes, gestión de sesiones, operaciones de habilidades, etc.
  • Archivos Estáticos: El frontend de la WebUI se sirve desde el directorio static/.

Compilación y Empaquetado

LastBrowser utiliza electron-builder v25 para empaquetado y distribución:

native/
├── package.json          # Dependencias + scripts de compilación
├── electron-builder.config.js  # Configuración de electron-builder
├── main.js               # Punto de entrada de la aplicación
├── preload.js            # Puente de seguridad
├── server-launcher.js    # Ciclo de vida del backend Python
├── assets/               # Iconos (PNG, ICO, SVG)
└── src/                  # Módulos fuente

Compilación para Windows:

  • Destino: Instalador NSIS (x64) o .exe portátil
  • Backend Python empaquetado como extraResources/webui/
  • Actualizador automático configurado para GitHub Releases
  • Compilación CI de GitHub Actions en windows-latest

Modelo de Seguridad

LastBrowser sigue las mejores prácticas de seguridad de Electron en todo momento.
  • Aislamiento de Contexto: Habilitado. El renderizador no tiene acceso directo a las APIs de Node.js o Electron.
  • Puente de Precarga: Solo los canales IPC explícitamente incluidos en la lista blanca se exponen mediante contextBridge.exposeInMainWorld.
  • Sandbox: Deshabilitado (requerido para la funcionalidad de WebContentsView), pero mitigado por el aislamiento de contexto.
  • Particiones de Sesión: Cada espacio de trabajo y aplicación obtiene su propia partición de sesión persist:, evitando fugas de datos entre orígenes.
  • Control de Navegación: Los enlaces externos se abren en el navegador del sistema, nunca dentro de la ventana de la aplicación.
  • Bloqueo de Anuncios: Bloqueo de anuncios integrado opcional con listas de filtros.
  • Caché: Limpieza de caché iniciada por el usuario por aplicación o global. Control de cookies (bloquear de terceros).

Siguiente: FAQ →