Réglages en modale à deux volets ; discussions triées par activité

La barre latérale ne garde que les discussions et le moniteur machine : tout
le bloc « Réglages » (11 sections empilées en details) devient une modale
avec sa nav de sections à gauche et LE panneau choisi à droite — chaque
section a enfin toute la largeur, et la barre latérale respire.

Les panneaux réutilisent tels quels les gabarits existants (.slist,
.switchrow, .subhead) ; les ids historiques (svc-log-box, lc-details,
tasks-details…) sont conservés sur les panneaux, et openDetails() les résout
vers openSettings(panneau) : pastille d'état du moteur, pastille
d'installation et jobs llama.cpp rouvrent la modale au bon endroit sans
changer leurs appelants. Le chargement paresseux du journal du moteur
(ancien ontoggle) devient un hook d'affichage du panneau.

Discussions : la plus récente en tête. Le serveur triait déjà par date
d'activité, mais son tri stable laissait une discussion toute neuve SOUS
celle qu'on venait de quitter (touchées dans la même seconde) : l'UI
départage par date de création puis par ordre d'index.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

internal/loki/ui/src/js/16-conversations.js

@@ -24,6 +24,14 @@ async function loadConversations(){
   let r;
   try{ r = await jget('/api/conversations'); }catch(_){ return; }
   CONVS = r.conversations || [];
+  // La plus récente EN TÊTE. Le serveur trie déjà par date d'activité, mais son
+  // tri STABLE laissait une discussion toute neuve SOUS celle qu'on vient de
+  // quitter (les deux sont touchées dans la même seconde) : on départage par la
+  // date de création, puis par l'ordre du fichier d'index (création croissante).
+  const ord = new Map(CONVS.map((c, i) => [c.id, i]));
+  CONVS.sort((a, b) => (b.updated || 0) - (a.updated || 0)
+                    || (b.created || 0) - (a.created || 0)
+                    || ord.get(b.id) - ord.get(a.id));
   CONV_ACTIVE = r.active || '';
   CONV_BUSY = !!r.busy;
   renderConversations();

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

@@ -38,6 +38,12 @@ function openDetails(el){
   if(typeof el === 'string') el = document.getElementById(el);
   while(el){
     if(el.tagName === 'DETAILS') el.open = true;
+    // La cible vit dans un panneau de la modale de réglages : ouvrir la modale
+    // sur ce panneau. C'est ce qui garde tous les appelants historiques
+    // (pastille d'état, jobs moteur) valides depuis la refonte en modale.
+    if(el.classList && el.classList.contains('set-pane') && typeof openSettings === 'function'){
+      openSettings(el.dataset.pane);
+    }
     el = el.parentElement;
   }
 }

internal/loki/ui/src/js/22-settings-modal.js

@@ -0,0 +1,37 @@
+// ─── Réglages en modale ──────────────────────────────────────────────────────
+// Toutes les sections de réglages vivent dans une modale à deux volets : la nav
+// des sections à gauche, LE panneau choisi à droite. La barre latérale ne garde
+// que les discussions et le moniteur machine — visuellement plus simple, et
+// chaque section dispose enfin de toute la largeur.
+//
+// Les ids historiques des sections (svc-log-box, lc-details, tasks-details…)
+// sont posés sur les .set-pane : openDetails() (18-shell.js) les résout vers le
+// bon panneau, si bien que tous les chemins existants — pastille d'état du
+// moteur, pastille d'installation, jobs llama.cpp — rouvrent la modale au bon
+// endroit sans changer une ligne de leurs appelants.
+let SET_LAST = 'config';
+// Panneaux à contenu paresseux : chargés à l'affichage — l'équivalent de
+// l'ancien ontoggle des <details>.
+const SET_HOOKS = {
+  'engine-log': () => { loadSvcLog(); showPaths(); },
+};
+function openSettings(pane){
+  showModal('settings-modal');
+  settingsShow(pane || SET_LAST);
+}
+function closeSettings(){ hideModal('settings-modal'); }
+function settingsShow(pane){
+  SET_LAST = pane;
+  document.querySelectorAll('#set-nav [data-pane]').forEach(b => b.classList.toggle('active', b.dataset.pane === pane));
+  document.querySelectorAll('#set-body .set-pane').forEach(s => s.classList.toggle('active', s.dataset.pane === pane));
+  const body = document.getElementById('set-body');
+  if(body) body.scrollTop = 0;
+  const h = SET_HOOKS[pane]; if(h) h();
+}
+// Échap ferme la modale — capture:false, donc les modales à confirmation
+// (ask-modal, qui écoute en capture) gardent la main quand elles sont ouvertes.
+document.addEventListener('keydown', e => {
+  if(e.key !== 'Escape') return;
+  const m = document.getElementById('settings-modal');
+  if(m && m.classList.contains('show')) closeSettings();
+});