Back to sh0
sh0

Des listes plates aux Stacks : repenser toute notre UX

Nous avons jeté notre interface à listes plates et reconstruit autour de stacks par projet avec une double sidebar, une navigation contextuelle et des sections de style cPanel.

Juste A. Gnimavo (Thales) & Claude | March 26, 2026 2 min sh0
EN/ FR/ ES
uxdashboardsveltearchitecturedesignproduct

Trois jours après avoir construit le tableau de bord, nous en avons démonté la majeure partie.

L'interface originale fonctionnait. Les applications vivaient dans une liste plate. Les bases de données dans une autre. Si vous vouliez voir quelle base de données appartenait à quelle application, il fallait s'en souvenir. Si vous aviez 20 services répartis sur 5 projets, le tableau de bord était un mur de cartes sans structure.

Nous avions construit une interface fonctionnelle. Nous avions besoin d'une interface opiniâtre.

Le 13 mars 2026, nous avons repensé l'ensemble du tableau de bord autour d'un concept que nous appelons les stacks : des groupes de services par projet avec leur propre navigation, leurs propres paramètres et leur propre modèle mental. Nous avons remplacé la sidebar texte de 264 pixels par une sidebar d'icônes de 56 pixels plus une sidebar contextuelle de 240 pixels. Nous avons repensé la page de détail de stack en sections de style cPanel. Et nous avons ajouté une palette de commandes.

La double sidebar

La sidebar gauche (56 pixels) est une navigation par icônes uniquement avec des infobulles au survol. La sidebar droite (240 pixels) est contextuelle -- elle n'apparaît que quand on est à l'intérieur d'un stack, montrant un sélecteur de stack en haut, puis une liste catégorisée des services de ce stack.

Les routes de Stack

Chaque stack a son propre espace d'URL. La décision architecturale clé était la réutilisation : la page de détail d'application dans /stacks/[id]/services/[sid] affiche exactement les mêmes composants que ceux construits en Phases 13 et 14. Pas un seul composant d'application réécrit.

Les sections de style cPanel

La page de détail de stack divise les services en huit sections : Frontend, Backend, Base de données, Cache, Stockage, Cron, Domaines, Monitoring. Chaque section est une carte avec une icône en dégradé, un badge de comptage et une liste de services avec des points de statut.

La palette de commandes

Un Cmd+K ouvre une palette de commandes pour la navigation au clavier. Tapez un nom de stack, un nom d'application, ou une page comme « paramètres » et naviguez directement.

La leçon réelle

Si vos composants sont bien abstraits, un redesign d'interface est un exercice de mise en page, pas une réécriture.


Prochain dans la série : Le Deploy Hub : 183 options, une page.

Share this article:

Responses

Write a response
0/2000
Loading responses...

Related Articles

Thales & Claude thales

Treize agents, quarante-trois minutes : la première session Workflow de Claude Fable 5, et ce qu'un script d'orchestration déterministe change aux builds multi-agents

Un prompt, treize agents, quarante-trois minutes : la première session de production avec Claude Fable 5 et l'outil Workflow de Claude Code a livré un site web de production complet de sept pages plus un endpoint backend de capture de leads, en un seul commit. Le carnet de bord : le script d'orchestration déterministe, le patron d'injection de contrat entre les phases, l'économie par agent du fan-out parallèle, et le suspense de la limite de session que le journal de reprise a transformé en non-événement.

23 min Jun 12, 2026
claude-fable-5claude-codeworkflow-toolmulti-agent +10
Thales & Claude casp

La porte a détecté sa propre dérive : une journée dans CASP avec Claude Fable 5

Nous avons confié au modèle Claude le plus autonome à ce jour les clés de CASP — le CLI open source qui garde les agents de code IA honnêtes face à git — avec l'autorité de rejeter notre propre roadmap. Il a rejeté cinq choses, trouvé deux vrais bugs dans le validateur en le dogfoodant, les a corrigés sous une porte à deux auditeurs, et a laissé casp check entièrement vert sur son propre dépôt pour la première fois. CASP 0.3.0 en est le résultat.

16 min Jun 10, 2026
caspzerosuiteworkflowai-cto +9
Thales & Claude zerosuite

La transplantation du CASP : comment la discipline des six fichiers est passée de Conductor à un ERP transport anti-fraude, ce que la compétence /next ajoute quand l'opérateur tape juste « next », et pourquoi le coût d'une dérive du CASP grimpe quand le projet, c'est l'argent des autres

La discipline du CASP qui a piloté trente-cinq sessions de Conductor est agnostique au produit. Le carnet de bord de sa transplantation sur KASSIA, un ERP transport anti-fraude pour un exploitant de flotte en Côte d'Ivoire : ce qui a migré, ce qui n'a pas migré (le validateur sur mesure — et ce que son absence coûte), ce que la compétence /next ajoute quand l'opérateur tape un seul mot, et là où le CASP s'arrête — le bug de déploiement qu'il ne pouvait pas voir parce qu'il enregistre l'intention, pas la réalité de l'infrastructure.

23 min Jun 8, 2026
kassiaerp-kassia-transport-logistiquezerosuiteCASP +15