Accueil › Documentation › Architecture

Architecture

Comment LastBrowser est construit — interface Electron, backend Python, couche IPC, flux de données et conception modulaire.

Sommaire

  1. Vue d'ensemble
  2. Processus principal Electron
  3. Système de modules
  4. Communication IPC
  5. Stockage des données
  6. Backend Python
  7. Construction et empaquetage
  8. Modèle de sécurité

Vue d'ensemble

LastBrowser est une application à deux processus combinant une interface Electron (UI frontend, intégration native OS) avec un backend Python (logique d'agent IA, serveur WebUI). Les deux processus communiquent via HTTP et un port local.

┌─────────────────────────────────────────────────────────────────┐ │ Application Electron LastBrowser │ │ ┌─────────────┐ ┌─────────────┐ ┌──────────────────────────┐ │ │ │ Proc. Princ│ │ Rendu(s) │ │ WebContentsViews (Onglets)│ │ │ │ (Node.js) │◄─┤ (Navigateur)│ │ (Isolé par onglet) │ │ │ │ Gestionn. │ │ Barre lat. │ │ │ │ │ │ Routeur IPC│ │ Espace trav│ │ ┌──────┐ ┌──────┐ │ │ │ │ Zone de not│ │ UI │ │ │Onglet1│ │Onglet2│ │ │ │ └──────┬──────┘ └─────────────┘ │ └──────┘ └──────┘ │ │ │ │ └──────────────────────────┘ │ │ │ HTTP (localhost:7889) │ │ ▼ │ │ ┌──────────────────────────────────────────────────────────────┤ │ │ Backend Python (server.py) │ │ │ ┌──────────┐ ┌──────────┐ ┌────────┐ ┌──────────────────┐ │ │ │ │Hermes │ │ Gestion.│ │ Fich. │ │ WebSocket │ │ │ │ │Agent Core│ │ API │ │ Stat. │ │ Sessions │ │ │ │ └──────────┘ └──────────┘ └────────┘ └──────────────────┘ │ │ └──────────────────────────────────────────────────────────────┘ └─────────────────────────────────────────────────────────────────┘ │ ▼ ┌──────────────────────────────────────────────────────────────────┐ │ Stockage local (SQLite via sql.js dans le processus principal)│ │ Onglets, Espaces de travail, Agents, Paramètres, Kanban, Sessions, Tâches│ └──────────────────────────────────────────────────────────────────┘

Processus principal Electron

Le processus principal (native/main.js) est l'orchestrateur de l'application. Il gère :

  • Création de fenêtre : Crée la BrowserWindow avec barre de titre masquée (sans cadre personnalisé), intégration de la barre latérale et gestion des WebContentsView.
  • Cycle de vie du serveur : Lance/arrête le serveur backend Python WebUI via server-launcher.js. Gère l'arrêt progressif à la fermeture de l'application.
  • Zone de notification : Gère l'icône dans la barre d'état, le menu contextuel (Afficher, Redémarrer le serveur, Quitter) et le comportement de réduction dans la zone de notification.
  • Routeur IPC : Toute communication entre le rendu et le processus principal passe par un routeur IPC centralisé (src/main/ipc/router.js).
  • Raccourcis globaux : Enregistre Ctrl+K (Palette de commandes), Ctrl+Maj+M (Tout couper), Ctrl+B (Afficher/Masquer la barre latérale).
  • WebViews : Gère les instances WebContentsView pour les onglets du navigateur avec un cycle de vie création/suppression/attachement.

Système de modules

Le processus principal organise les fonctionnalités via un modèle de gestionnaire. Chaque gestionnaire est un module autonome :

workspaceManagerIsolation de session, CRUD, réorganisation, export/import
tabManagerCycle de vie des onglets, suspension, épinglage, historique de fermeture (50)
agentManagerCRUD des agents, système de rôles, suivi des tâches, tableau de bord
kanbanManagerTableaux, colonnes, cartes, limites WIP, glisser-déposer
splitViewManagerDispositions multi-panneaux, redimensionnement, gestion des panneaux
focusManagerPomodoro, blocage des distractions, état du minuteur
commandPaletteRecherche floue sur tous les types de données, actions rapides
appManagerApplications web épinglées, multi-comptes, catégories
settingsManagerParamètres persistants, valeurs par défaut, mises à jour en cours d'exécution
privacyManagerBloqueur de pub, contrôle des cookies, vidage du cache
resourceSaverSuspension des onglets, statistiques mémoire, liste d'exceptions
sessionManagerCRUD des sessions, affectations d'agents
taskManagerGestion des tâches, suivi des statuts
workerManagerPool de workers en arrière-plan, planification des tâches
cronManagerTâches planifiées, tâches récurrentes
pipelineManagerPipeline de flux de travail, automatisation multi-étapes
notificationManagerNotifications OS, mises à jour des badges
accountManagerMulti-comptes par application, changement de session
compactManagerBasculement du mode UI compact
appDefinitionManagerBibliothèque de définitions d'applications (Slack, Gmail, etc.)
gitManagerIntégration Git, commit, diff, gestion des branches

Chaque gestionnaire suit un modèle cohérent :

  • Stocke les données via l'abstraction base de données
  • Exporte une API propre de fonctions
  • Gère l'isolation par espace de travail le cas échéant

Communication IPC

Toute communication entre le rendu et le processus principal utilise le modèle contextBridge + ipcMain.handle / ipcRenderer.invoke d'Electron. Le système de canaux IPC est défini dans src/shared/constants.js avec environ 150+ canaux organisés par domaine :

// Organisation des canaux IPC (depuis 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

Sécurité : contextIsolation: true, nodeIntegration: false. Toutes les API Node.js sont exposées via preload.js avec une liste blanche explicite.

Stockage des données

LastBrowser utilise sql.js (SQLite compilé en WebAssembly via Emscripten) pour toutes les données persistantes :

  • Collections : Onglets, espaces de travail, agents, paramètres, tableaux/colonnes/cartes Kanban, sessions de concentration, onglets fermés, comptes d'applications, tâches worker, tâches, règles de distraction.
  • Emplacement de la base de données : Stockée dans le répertoire de données de l'utilisateur (electron app.getPath('userData')).
  • Schéma : Magasin de documents basé sur des collections au-dessus de SQLite. Chaque "collection" est soit une table, soit une colonne de document JSON.
  • Migrations : Gérées par src/main/database/migrations.js pour l'évolution du schéma entre les versions.

Backend Python

Le backend Python (server.py) fournit l'interface Hermes WebUI — l'interface agent IA que LastBrowser encapsule :

  • Framework : Serveur HTTP Python (FastAPI ou similaire) servant la WebUI sur localhost:7889.
  • Lancement du serveur : server-launcher.js lance le processus Python, attend qu'il soit prêt et gère son cycle de vie. En mode développement, il se trouve à la racine du projet ; en production, il est empaqueté sous extraResources/webui/.
  • API HTTP : Points de terminaison REST pour l'interaction avec l'agent, la gestion des sessions, les opérations de compétences, etc.
  • Fichiers statiques : Le frontend WebUI est servi depuis le répertoire static/.

Construction et empaquetage

LastBrowser utilise electron-builder v25 pour l'empaquetage et la distribution :

native/
├── package.json          # Dépendances + scripts de construction
├── electron-builder.config.js  # Configuration electron-builder
├── main.js               # Point d'entrée de l'application
├── preload.js            # Pont de sécurité
├── server-launcher.js    # Cycle de vie du backend Python
├── assets/               # Icônes (PNG, ICO, SVG)
└── src/                  # Modules source

Construction Windows :

  • Cible : Installateur NSIS (x64) ou .exe portable
  • Backend Python empaqueté sous extraResources/webui/
  • Mise à jour automatique configurée pour les versions GitHub
  • GitHub Actions CI construit sur windows-latest

Modèle de sécurité

LastBrowser suit les meilleures pratiques de sécurité Electron dans l'ensemble.
  • Isolation de contexte : Activée. Le rendu n'a pas d'accès direct aux API Node.js ou Electron.
  • Pont de préchargement : Seuls les canaux IPC explicitement autorisés sont exposés via contextBridge.exposeInMainWorld.
  • Sandbox : Désactivée (nécessaire pour la fonctionnalité WebContentsView), mais atténuée par l'isolation de contexte.
  • Partitions de session : Chaque espace de travail et application obtient sa propre partition de session persist:, empêchant les fuites de données inter-origines.
  • Contrôle de navigation : Les liens externes sont ouverts dans le navigateur système, jamais dans la fenêtre de l'application.
  • Bloqueur de pub : Bloqueur de pub intégré optionnel avec listes de filtres.
  • Cache : Vidage du cache initié par l'utilisateur par application ou global. Contrôle des cookies (bloquer les tiers).

Suivant : FAQ →