Reprise du design d'après la maquette fournie, sans changer d'architecture :
l'UI reste du HTML/CSS/JS assemblé dans le binaire (voir plus bas).
Charte
- Palette ardoise + sauge en remplacement des bruns « Terre ». Deux variantes :
claire par défaut (celle de la maquette) et « Deep Dark » (fond #0F172A,
cartes #1E293B), à un clic depuis l'en-tête. Une variable --on-accent porte ce
qui s'écrit sur les aplats de sauge, pour que le contraste tienne dans les
deux variantes.
- Typographie Inter (interface) + JetBrains Mono (code, chiffres, chemins), en
sous-ensemble latin, embarquées comme l'étaient Bricolage et IBM Plex Mono —
toujours aucune requête vers un service de polices.
- Boutons sans contour, fond au survol, léger enfoncement au clic.
- Coque à plat : plus de cartes flottantes séparées par une gouttière, la barre
latérale est collée au bord et le fil occupe tout le reste.
Coque
- Barre d'en-tête : titre de la discussion + sélecteur de modèle. Changer de
preset demandait d'ouvrir la barre latérale et de descendre jusqu'aux
presets ; c'est désormais une liste déroulante, toujours visible.
- Barre latérale en trois zones — marque, contenu défilant, moniteur machine —
et escamotable d'un clic sur grand écran. Les discussions y passent au
premier plan, avec une recherche textuelle (filtrage côté client : la liste
est déjà chargée, sans les messages) ; les réglages descendent sous un repli
unique, d'où openDetails(), qui déplie aussi les parents.
- Moniteur machine en pied de colonne : une jauge par ressource (charge GPU,
puis VRAM et température en détail, mémoire vive), sauge jusqu'à 75 %, ambre
puis rouille quand la machine sature. Il remplace la section « Machine », qui
disait la même chose en plus verbeux et en plus loin.
- L'option « barre latérale escamotable » disparaît d'Apparence : elle faisait
de la barre un tiroir posé SUR la conversation, là où le bouton d'en-tête
l'escamote pour de bon. Deux mécanismes concurrents pour la même intention.
Fil et saisie
- La réponse de l'IA redevient une carte, la question un aplat de sauge : sur un
fond de fil coloré, du texte nu flottait sans ancrage.
- Saisie en pilule, ses outils (joindre, fichiers, envoyer) dans la barre
elle-même. L'envoi est une pastille ronde à flèche ; le mot « Envoyer » reste
porté par aria-label et l'infobulle.
Corrections croisées
- L'heure d'une discussion prenait la moitié de la ligne (flex:1 hérité de
`.preset>span`), le titre était tronqué au premier mot.
- Une liste déroulante posée directement dans une ligne de modale débordait
sous son intitulé quand sa valeur était longue (chemin de destination).
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LPyFxVHNAN9u5pVzSYMwjd
Reprise de la maquette fournie (LOKI — direction Terre) : bruns chauds, vert
sauge, argile, et des surfaces en CARTES arrondies séparées par une gouttière
au lieu d'une colonne à filets.
- Palette transposée sur les jetons EXISTANTS (--bg, --panel, --accent…) et
non par réécriture des 1200 lignes : les 300 usages de variables suivent
d'eux-mêmes. Rôles clarifiés — sauge = sélection et action, argile =
chiffres et avertissements, terre cuite = arrêt et danger.
- Polices Bricolage Grotesque + IBM Plex Mono EMBARQUÉES dans le binaire et
servies par Loki (/fonts/), pas par Google Fonts : une instance locale ou
coupée d'internet doit s'afficher correctement, sans qu'un tiers apprenne
qui consulte l'interface. Sous-ensemble latin, 106 Ko au total.
- Structure en cartes : barre latérale en pile de cartes, colonne de chat en
panneau unique, carte de saisie posée un ton au-dessus. Liseré sauge sur la
discussion active, bulle de question au coin bas-droit rentré.
- Bouton d'envoi en sauge : il reprenait --text, donc un brun indistinct du
reste ; l'arrêt reste en terre cuite.
Bornage au bureau (min-width:721px) : sur téléphone la barre latérale est un
tiroir plein écran et le fil occupe toute la largeur — des cartes n'y
grignoteraient que des pixels utiles.
Vérifié au navigateur, thèmes clair ET sombre, plus un rendu 390 px :
polices réellement chargées (200 sur les trois woff2), aucun débordement
horizontal, tiroir mobile inchangé.
Claude
Loki