Palettes officielles Stitch, géométrie et moniteur relevés

Le projet Stitch porte deux planches que je n'avais pas vues — « Official
Palette for Loki AI v1 » et « Official Dark Mode Palette for Loki AI ». Leurs
couleurs NOMMÉES font désormais foi, et elles corrigent le relevé précédent, que
la compression JPEG des captures avait décalé :

  clair   Main BG #F5F6F8 · Sidebar BG #ECECEC · Primary Accent #95A899
          Typography #333333
  sombre  Deep Navy #0F172A · Slate Surface #1E293B · Sage Accent #84A98C

Le thème sombre retrouve donc exactement les deux teintes du cahier des charges,
que mon relevé sur capture avait fait dériver vers #1E2834/#253141. Les surfaces
non nommées (carte de réponse, carte de saisie, piste de jauge, bulle sombre)
restent relevées sur les écrans de la maquette, en pleine résolution cette fois.

Géométrie, elle aussi mesurée sur la maquette :

- Bulles et carte de réponse : rayon 10 px (contre 16/18 et un coin rentré), la
  carte sans cadre — c'est l'ombre qui la détache.
- Carte de saisie : rayon 14 px et CADRE SAUGE, le seul contour coloré de
  l'écran. Il retombait au gris commun, une règle de coque plus bas dans la
  feuille reprenant la main sur la couleur.
- Liste des discussions : lignes pleine largeur séparées d'un filet, bande plate
  pour l'active — la maquette n'a ni pastille arrondie ni gouttière.
- Moniteur machine : titre en casse normale (le monospace capitales de la charte
  précédente y criait), libellé + pourcentage à la même échelle, jauge de 7 px
  entièrement arrondie. La sous-ligne chiffrée passe en infobulle et le bouton
  de repli disparaît : la maquette n'en a pas.
- Une jauge de VRAM par carte, en plus de la charge : sur une machine à une
  seule carte on retombe sur les trois jauges de la maquette (GPU, VRAM, RAM),
  et pour du LLM c'est la VRAM qui décide si un modèle tient.
- Échelle typographique des planches : corps 16 px dans le fil et la saisie,
  secondaire 14 px medium dans la barre latérale.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LPyFxVHNAN9u5pVzSYMwjd

internal/loki/ui/src/js/05-status.js

@@ -137,7 +137,7 @@ function updateCtxMeter(){
 // Construit EN DOM et non en innerHTML : les noms de GPU viennent du pilote,
 // donc d'ailleurs. Même règle que pour les noms de fichiers et les titres de
 // discussions.
-function perfRow(label, pct, sub, title){
+function perfRow(label, pct, title){
   pct = Math.max(0, Math.min(100, Math.round(pct||0)));
   const row=document.createElement('div'); row.className='perf-row';
   if(title) row.title=title;
@@ -153,7 +153,6 @@ function perfRow(label, pct, sub, title){
   fill.style.width=pct+'%';
   track.appendChild(fill);
   row.append(l,track);
-  if(sub){ const s=document.createElement('div'); s.className='perf-sub'; s.textContent=sub; row.appendChild(s); }
   return row;
 }
 async function loadVram(){
@@ -166,14 +165,16 @@ async function loadVram(){
     box.appendChild(d);
     return;
   }
+  // Deux mesures par carte, deux jauges — une seule barre ne peut pas porter la
+  // charge du processeur ET le remplissage de la mémoire vidéo, et pour du LLM
+  // c'est la VRAM qui décide si un modèle tient. Sur une machine à UNE carte on
+  // retombe exactement sur les trois jauges de la maquette (GPU, VRAM, RAM).
+  const many = gpus.length > 1;
   gpus.forEach((g,i)=>{
-    // Le pourcentage affiché est la CHARGE du processeur graphique (ce que
-    // montre la maquette) ; la VRAM, elle, passe en détail sous la barre — deux
-    // mesures distinctes qu'une seule barre ne peut pas porter.
     const vram=(g.used/1024).toFixed(1)+' / '+(g.total/1024).toFixed(1)+' Gio';
-    box.appendChild(perfRow(
-      'GPU '+i+(gpus.length>1?'':'')+' — charge', g.util,
-      vram+' · '+g.temp+' °C', g.name));
+    box.appendChild(perfRow('GPU '+i, g.util, g.name+' · '+vram+' · '+g.temp+' °C'));
+    box.appendChild(perfRow(many ? 'VRAM '+i : 'VRAM', g.used*100/g.total,
+      g.name+' · '+vram));
   });
 }
 async function loadRam(){
@@ -185,7 +186,7 @@ async function loadRam(){
   const host=document.getElementById('ram');
   host.textContent='';
   host.appendChild(perfRow('Mémoire vive', m.used*100/m.total,
-    (m.used/1024).toFixed(1)+' / '+(m.total/1024).toFixed(1)+' Gio'));
+    (m.used/1024).toFixed(1)+' / '+(m.total/1024).toFixed(1)+' Gio utilisés'));
 }
 async function loadCfg(){
   // /api/llamacpp en parallèle : il indique si le BIN de la config correspond au

internal/loki/ui/src/js/18-shell.js

@@ -21,18 +21,6 @@ function toggleSideCollapse(){
   if(typeof syncGutter === 'function') requestAnimationFrame(syncGutter);
 }
 
-// Moniteur machine replié : le pied de barre latérale ne garde que son titre.
-function togglePerf(){
-  const on = document.documentElement.getAttribute('data-perf') !== '0';
-  document.documentElement.setAttribute('data-perf', on ? '0' : '1');
-  try{ localStorage.setItem('loki-perf', on ? '0' : '1'); }catch(_){}
-  const b = document.querySelector('#side-perf .perf-toggle');
-  if(b){
-    b.textContent = on ? '+' : '–';
-    b.title = on ? 'déplier le moniteur' : 'replier le moniteur';
-  }
-}
-
 // Bascule clair/sombre depuis l'en-tête. Elle passe par applyTheme + savePrefs
 // (01-theme.js) pour rester alignée avec l'interrupteur des réglages et avec le
 // serveur — deux chemins vers le même réglage, une seule source de vérité.
@@ -125,11 +113,3 @@ function paintModelSwitch(){
   // Une bascule en cours ne doit pas voir sa sélection sauter sous la souris.
   if(prev && [...sel.options].some(o => o.value === prev)) sel.value = prev;
 }
-
-// État initial des libellés (le CSS, lui, est déjà appliqué par le <head>).
-document.addEventListener('DOMContentLoaded', () => {
-  if(document.documentElement.getAttribute('data-perf') === '0'){
-    const b = document.querySelector('#side-perf .perf-toggle');
-    if(b){ b.textContent = '+'; b.title = 'déplier le moniteur'; }
-  }
-});