Le QG de STA Inc : nos 53 agents IA dans un open space 3D, en direct

Comment on a refait, chez nous et à notre façon, le « QG d'agents » vu sur le web : en vraie 3D, avec de vraies données, sur notre propre serveur, sans rien laisser fuiter.

D'où vient l'idée

Un guide montrait un « QG » d'agents IA en pixel art : une page web où chaque agent est un petit personnage à son bureau, avec une activité simulée dans le navigateur, hébergée sur Vercel. L'idée nous a plu, mais nous voulions trois choses différentes :

• nos vrais agents : les 53 agents de STA Inc (et un humain), tirés de notre organigramme ;
• leur vraie activité : qui travaille, qui est en pause, sur quel projet, avec au plus 15 minutes de retard ;
• chez nous : sur notre propre serveur, lisible par tous sur le web, sans plateforme tierce.

Ce qui est réel, ce qui ne l'est pas

Le badge en haut du QG dit l'âge des données. S'il passe à l'orange, puis au rouge, c'est que le générateur s'est arrêté : nous préférons l'afficher que montrer un plateau figé comme s'il était vivant.

Les demandes, dans l'ordre

Voici les vraies demandes envoyées à Claude Code pendant la session, à peine nettoyées. On a beaucoup appris de leurs allers-retours.

Claude lit la page, inventorie nos agents et notre façon de publier un site, puis pose quatre questions fermées : quoi publier, pour qui, quelles données dans une fiche, simulé ou réel.

Le QG devient un instantané régénéré toutes les 15 minutes à partir de l'historique de travail des agents. C'est aussi là qu'apparaît le vrai problème : comment publier du réel sans publier nos secrets (voir plus bas).

La première version était un plateau en pixel art vu de dessus. Bonne leçon : montrer une maquette tôt a coûté une heure, pas une semaine.

« 3D » voulait dire deux choses : de l'isométrique dessiné en 2D (façon Habbo), ou une vraie scène 3D. La capture a permis de trancher sans se tromper.

Claude lit le projet : une vraie scène Three.js, caméra isométrique, plateformes flottantes. Et il lit la licence : usage non commercial, interdiction de le renommer ou de le brancher sur un autre système d'agents. Donc l'idée seulement, tout le code est à nous.

Réécriture complète de la scène : la Direction au centre, les directions autour, leurs équipes sur un anneau extérieur, reliées par des passerelles qui suivent notre organigramme.

Comment c'est construit

Le navigateur du visiteur ne parle jamais à nos services : il lit deux fichiers JSON. Si le générateur s'arrête, la page reste en ligne, avec un badge qui dit que les données vieillissent.

Public, mais sans fuite

Le piège d'un tableau « en direct » publié sur Internet, c'est qu'il publie aussi ce qu'on ne voulait pas dire. Nous avons d'abord écrit un filtre de titres de tâches à refus par défaut (adresses, noms de machines, numéros de tickets, chemins, formes de secrets, liste noire de noms…), puis nous l'avons testé sur 150 vrais titres.

Résultat : 44 titres passaient le filtre, et certains en disaient encore trop (le prénom d’une personne extérieure, le nom d'une appli tierce qu'on étudie, des détails d'architecture). Aucune liste de mots ne peut deviner ce qui est sensible dans une phrase libre.

Nous avons donc changé d'approche : on ne publie jamais le titre d'une tâche. On publie le projet auquel elle appartient, à travers une table écrite à la main (« App iPhone », « Veille », « Entretien du parc »). Un projet absent de la table s'affiche « en mission ». Zéro fuite possible, et c'est toujours du réel. Le filtre reste en place comme dernier garde-fou.

Deux autres règles : le seul humain de l'étage n'a aucune activité publiée (afficher quand une personne travaille, c'est la suivre à la trace), et les outils de sécurité ne figurent pas dans la barre d'outils (dire au public ce qui nous surveille aide surtout un attaquant).

Ce qu'on a appris

• Montrez avant de construire. La maquette 2D a été refusée en une phrase. C'était le but.
• Une capture lève une ambiguïté qu'un mot entretient. « 3D » avait deux sens ; l'image en a choisi un.
• Lisez la licence de votre inspiration. « Gratuit » ne veut pas dire « libre » : Agents Office interdit précisément de le brancher sur d'autres agents.
• Un conflit de scripts invisible. Le script du bandeau cookies déclarait une variable globale t et écrasait la fonction de traduction du site : le bouton FR/EN cessait de traduire une fois la page chargée. Corrigé à la source, pour toutes nos applis.
• Le réel est souvent calme. Nos agents travaillent par rafales : la plupart du temps, ils sont « à leur poste », pas « au travail ». Nous l'affichons tel quel.

Le faire chez vous, sans Vercel

1. Une source unique de vos agents (un YAML suffit) et une trace de leur activité, même grossière (horodatage du dernier travail).
2. Un script planifié qui écrit deux JSON dans un dossier, et un filtre qui fait échouer l'écriture au moindre doute.
3. Une page statique : Three.js, une caméra orthographique inclinée, une plateforme par équipe. Les étiquettes en HTML (CSS2DRenderer) restent nettes à tout zoom.
4. N'importe quel serveur web : chez nous, une ligne file_server dans Caddy, un certificat, un enregistrement DNS.

Coût : aucun abonnement. La session de conception a pris quelques heures, dont une à refaire la 2D en 3D.

Crédits et licences

L'idée vient de deux créateurs, que nous remercions : Zeyneb Madi (son archipel d'agents) et AJ Sahni (Agents Office, publié sous licence PolyForm Noncommercial avec des conditions Sahni.ai). Nous avons repris des idées, jamais une ligne de leur code. Le guide qui nous a mis sur la piste est celui d'Anthony, « Le QG de mes agents IA ».

Three.js est sous licence MIT. Les logos d'outils appartiennent à leurs propriétaires et viennent de collections d'icônes libres.