J'en avais marre de me battre avec mon IDE
Tous les jours c'est la même chose. ouvrir VS Code. ouvrir un terminal. ouvrir un autre terminal. ouvrir le navigateur. arranger les fenêtres. perdre le fil de quel terminal exécute quoi. faire des allers-retours cent fois entre le code, l'IA et l'aperçu
Alors j'ai juste construit mon propre truc
L'IDE est mort, vive l'AIDE
AIDE signifie AI-Integrated Development Environment. les IDEs traditionnels ont été construits pour un monde où les humains écrivent chaque ligne de code. mais ce n'est plus comme ça que je travaille
Mon workflow maintenant : ouvrir un terminal, dire à Claude ce dont j'ai besoin, relire ce qu'il écrit, vérifier le résultat dans le navigateur. l'éditeur de code ? j'y jette un œil de temps en temps. peut-être pour comprendre un type ou tracer un bug
Alors vbcdr inverse la disposition traditionnelle. les terminaux et les aperçus navigateur occupent le devant de la scène. L'éditeur Monaco est toujours là quand tu en as besoin, mais il est volontairement secondaire
Le terminal d'abord, pour tout
Le panneau terminal est le cœur du système. xterm.js avec rendu WebGL pour que ce soit ultra fluide. chaque projet a plusieurs onglets de terminal - un pour ton agent IA, d'autres pour les serveurs de développement, les bases de données, tout ce dont tu as besoin
Le terminal IA se crée automatiquement quand tu changes de projet. parce que dans un workflow de vibe coding, l'agent tourne en permanence
Construit avec node-pty pour l'accès shell natif. ton vrai shell, ton vrai environnement, ton vrai PATH. pas un faux terminal sandboxé
Recherche dans le terminal avec surbrillance, boutons d'effacement/redémarrage et défilement vers le bas. Shift+Enter insère des retours à la ligne dans le champ de saisie du terminal LLM sans envoyer, ce qui semble anodin mais fait une énorme différence quand tu écris des prompts multi-lignes
Tu peux glisser des fichiers directement dans le terminal pour un contexte rapide. dépose une image et elle s'attache automatiquement au LLM via le presse-papiers. plus besoin de copier-coller des chemins de fichiers
┌──────────────────────────┬──────────────┐│ │ Git Graph ││ Navigateur ou Éditeur │ ││ ├──────────────┤│ │ LLM ││ Dev 1 │ Dev 2 │ Terminal │└──────────────────────────┴──────────────┘
Navigateur intégré avec isolation par projet
Chaque projet a son propre navigateur intégré avec isolation du stockage par projet. plus de cookies qui fuient entre les projets. chacun tourne dans sa propre partition webview Electron
J'ai branché le Chrome DevTools Protocol pour obtenir la surveillance réseau et la capture de la console sans construire d'instrumentation personnalisée. le panneau navigateur a trois onglets devtools : Console, Network et Passwords
L'inspecteur réseau affiche les détails des requêtes de manière dépliable avec les headers, le type et les tailles de réponse précises. les erreurs de console et les échecs réseau ont un bouton "envoyer au LLM" en un clic qui les transmet directement à ton terminal IA actif. tu vois une erreur 500 ? un clic et ton agent est déjà en train de déboguer
Le gestionnaire de mots de passe détecte automatiquement les formulaires de connexion. il injecte un script qui surveille les champs de mot de passe avec MutationObserver, intercepte les soumissions de formulaires et propose de sauvegarder les identifiants chiffrés avec l'API native safeStorage d'Electron
La prochaine fois que tu visites cette page, tout se remplit automatiquement
L'émulation d'appareil bascule entre les viewports desktop, iPad et mobile avec les user agents appropriés. Google OAuth est redirigé vers ton navigateur système parce que les webviews Electron et OAuth ne font tout simplement pas bon ménage
11 thèmes parce que pourquoi pas
Ok j'ai peut-être un peu exagéré ici. Dracula, Catppuccin, Nord, Tokyo Night, Gruvbox, One Dark, Solarized et d'autres. chacun avec des variantes claires et sombres
Je passe beaucoup de temps à fixer ce truc. autant que ce soit beau
Un état multi-projet qui marche vraiment
C'est la décision architecturale dont je suis le plus fier. chaque store Zustand utilise un pattern Record<projectId, StateType>. changer de projet affiche instantanément les terminaux, les onglets navigateur, l'arborescence des fichiers, l'état de l'éditeur et l'historique git de ce projet
Rien de partagé. Rien ne fuit. clique sur un onglet projet et tout ton contexte bascule
Les onglets navigateur sont persistés sur le disque avec un debounce de 500ms pour ne pas martyriser le système de fichiers. les processus de terminal restent vivants en arrière-plan. reviens et tout est exactement là où tu l'avais laissé
Le graphe git qui parle à ton IA
Le panneau git affiche un graphe de commits basé sur des voies en SVG. chaque branche a sa propre voie avec une couleur. les merge commits ont des nœuds plus grands. des courbes de Bézier connectent les relations parent-enfant entre les voies
Appuie sur "Commit" et ça envoie /commit à ton terminal IA actif. appuie sur "New Feature", tape une description et ça crée une branche feature/ta-description-en-kebab-case correctement formatée via ton agent
L'arbre git n'est pas qu'une visualisation. c'est une interface de commande qui communique via ton agent IA
Electron, Zustand et une couche IPC propre
Electron 34 pour le desktop multi-plateforme. React 18 + Tailwind CSS 4 pour l'interface. electron-vite pour les builds. Zustand pour l'état parce que Redux c'est trop quand tes stores sont aussi propres
La couche IPC est la colonne vertébrale. six modules de handlers (projects, terminal, filesystem, git, browser, passwords) gèrent chacun leur propre domaine. les services comme le gestionnaire PTY, le file watcher et le service git font le vrai travail. séparation nette entre ce que l'utilisateur voit et ce que l'OS fait
La surveillance des fichiers utilise chokidar avec filtrage compatible gitignore. l'arborescence des fichiers met en cache et fait du debounce sur les mises à jour. Monaco reçoit une synchronisation de fichiers en temps réel pour que les modifications externes de ton agent IA qui écrit des fichiers apparaissent instantanément
Piloter plutôt que taper
Construire des outils pour développeurs est addictif et humiliant. tu penses savoir ce que tu veux jusqu'à ce que tu l'utilises pendant une semaine et que tu réalises que la disposition doit changer, le terminal a besoin de recherche, le navigateur a besoin de gestion de mots de passe et le graphe git doit être interactif
Plus grand enseignement : dans un workflow AI-first, l'environnement de développement devrait être optimisé pour le pilotage, pas pour la frappe. un grand espace terminal. un accès navigateur facile. le contexte git en un coup d'œil. l'éditeur de code n'est plus qu'un visualiseur de référence
vbcdr n'essaie pas de remplacer VS Code. il est construit pour un workflow entièrement différent, un workflow où tu passes plus de temps à diriger une IA qu'à éditer des fichiers toi-même
C'est ça un AIDE. pas un IDE avec de l'IA collée dessus. un outil fondamentalement différent pour une façon fondamentalement différente de construire du logiciel
La suite
Encore sur la feuille de route :
- Gestionnaire visuel de skills - parcourir, activer/désactiver et configurer les skills et commandes slash de l'agent LLM depuis un panneau UI au lieu de gérer des fichiers de configuration
- Refonte des mots de passe & favoris navigateur - le système actuel a besoin d'un redesign pour une meilleure UX et fiabilité
- Cliquer sur les fichiers et dossiers dans l'arborescence du projet pour les envoyer à ton agent comme contexte
- Donner à l'IA accès au navigateur webview pour qu'elle puisse manipuler et tester l'aperçu
- Builds Windows et Linux
- Encore plein d'idées
Open source, licence MIT, et clairement un travail en cours. la première version est sortie pour macOS Apple Silicon. n'hésite pas à contribuer sur GitHub
Stay Updated
Get notified about new posts on automation, productivity tips, indie hacking, and web3.
No spam, ever. Unsubscribe anytime.
