From a333603ca6983ef9506727057f34a83c6275a52c Mon Sep 17 00:00:00 2001 From: Michael SCHAL Date: Thu, 20 Aug 2026 17:05:38 +0200 Subject: [PATCH] =?UTF-8?q?R=C3=A9glages=20en=20modale=20=C3=A0=20deux=20v?= =?UTF-8?q?olets=20;=20discussions=20tri=C3=A9es=20par=20activit=C3=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- internal/loki/ui/index.html | 727 +++++++++++-------- internal/loki/ui/src/index.tmpl.html | 638 ++++++++-------- internal/loki/ui/src/js/16-conversations.js | 8 + internal/loki/ui/src/js/18-shell.js | 6 + internal/loki/ui/src/js/22-settings-modal.js | 37 + internal/loki/ui/src/styles.css | 38 + 6 files changed, 862 insertions(+), 592 deletions(-) create mode 100644 internal/loki/ui/src/js/22-settings-modal.js diff --git a/internal/loki/ui/index.html b/internal/loki/ui/index.html index 204a216..e9a4aee 100644 --- a/internal/loki/ui/index.html +++ b/internal/loki/ui/index.html @@ -2052,6 +2052,44 @@ html[data-files="1"] #files-btn{color:var(--accent)} #criteria-list li.crit-pending{color:var(--dim)} .rolebadge{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--accent);border-radius:3px;color:var(--accent);font-size:9px;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle} + +/* ── Réglages en modale ───────────────────────────────────────────────────── + Deux volets : nav des sections à gauche, LE panneau choisi à droite. Les + panneaux réutilisent tels quels les gabarits de la barre latérale (.slist, + .switchrow, .subhead…), seuls la coque et le routage sont neufs. */ +#side-settings-btn{display:flex;align-items:center;gap:8px;width:100%;margin:8px 0 0;padding:10px 12px; + background:none;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none; + font-size:13px;color:var(--text);cursor:pointer;text-align:left} +#side-settings-btn:hover{background:var(--bubble)} +#side-settings-btn svg{flex:none;opacity:.7} +.set-card{max-width:860px;height:min(660px,92vh)} +.set-shell{display:flex;flex:1;min-height:0} +.set-nav{flex:0 0 200px;border-right:1px solid var(--border);overflow-y:auto; + padding:10px 8px;display:flex;flex-direction:column;gap:2px} +.set-nav-h{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);margin:12px 8px 4px} +.set-nav-h:first-child{margin-top:2px} +.set-nav button{display:flex;align-items:center;gap:8px;width:100%;margin:0;padding:7px 10px; + background:none;border:0;border-radius:3px;box-shadow:none; + font-size:12.5px;color:var(--text);cursor:pointer;text-align:left} +.set-nav button:hover{background:var(--bubble)} +.set-nav button.active{background:var(--bubble);font-weight:600} +.set-nav button .sbadge{margin-left:auto} +.set-body{flex:1;min-width:0;overflow-y:auto;padding:16px} +.set-pane{display:none} +.set-pane.active{display:block} +.set-pane-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin:0 0 12px} +.set-pane-h>span:first-child{flex:1;min-width:0} +/* Téléphone : la nav passe en rangée défilante au-dessus du panneau, et la + modale prend tout l'écran — un panneau de réglages ne se lit pas en timbre. */ +@media(max-width:720px){ + .set-ov{padding:0} + .set-card{max-width:none;height:100vh;height:100dvh;max-height:none;border-radius:0;border:0} + .set-shell{flex-direction:column} + .set-nav{flex:none;flex-direction:row;align-items:center;overflow-x:auto;overflow-y:hidden; + border-right:0;border-bottom:1px solid var(--border);padding:8px;white-space:nowrap} + .set-nav-h{display:none} + .set-nav button{width:auto;flex:none} +} /* Nom du modèle qui a produit la réponse, à côté de « Loki ». Discret (gris, pas de capitales forcées) et borné : un nom de .gguf peut être très long, il s'ellipse au lieu de pousser l'étiquette hors de la bulle. */ @@ -2155,302 +2193,14 @@ html[data-files="1"] #files-btn{color:var(--accent)} latérale par défaut, c'est les discussions et la machine. Les sections ouvertes par programme (journal du moteur, installation llama.cpp) passent par openDetails(), qui déplie aussi les parents. --> -
Réglages -
-
Journal du moteur -
- -
- 

-    
-    

-      Emplacements
-    

-    

-  

-  
Config active
-    
…

-  

-  
Presets
-    

-  

-  
Mode agent
-    

-    
-    

-      
Mémoire?

-      

-        
-        

-          Voir la mémoire 
-          
-        

-        
-      

-    

-    

-      
Accès internet?Ajoute les outils web_search / web_open / web_read / web_grep. Le moteur intégré ne demande aucune installation. Le moteur Crawl4AI exige un serveur que tu héberges toi-même (ex. docker run -d -p 11235:11235 --shm-size=1g unclecode/crawl4ai:latest) mais exécute le JavaScript des pages. Actifs seulement si le mode agent est actif.

-      

-        
-        
-        

-          

-            
-          

-          
-          
-          

-        

-      

-    

-    

-      
Serveurs MCP?Connecte des serveurs MCP (Model Context Protocol) pour donner de nouveaux outils à l'IA : accès fichiers, bases de données, APIs métier… stdio = programme lancé localement (npx/uvx/binaire) · http = serveur distant. ⚠ un serveur stdio exécute du code sur cette machine, au même titre que le shell.

-      

-        

-          
-          
(aucun serveur — ajoute un serveur fichiers, une base de données, une API…)

-          

-            
-            
-          

-        

-      

-    

-    

-      
Paramètres

-      

-        
-      

-    

-  

-  
Tâches planifiées
-    
-    

-      
-    

-    
-    

-      

-        
(aucune tâche — ex. « toutes les 2 h, relève mes mails et prépare des brouillons de réponse »)

-        
-      

-    

-  

-  
System prompt
-    

-      
-    

-  

-  
Moteur
-    
-    

-    
-    
-    
-    

-      

-        
llama.cpp précompilé 

-        
binaire officiel téléchargé tel quel, prêt en ~2 min

-        

-      

-      

-        
llama.cpp compilé 

-        
compilé ici pour votre machine — plus rapide, plus long à installer

-        

-      

-      

-        
llama.cpp personnalisé

-        
un fork de llama.cpp pour modèles spéciaux (quant ternaire…)

-        

-      

-    

-    
-    

-    
-    
Service du moteur?Démarre, redémarre ou arrête llama-server — le processus qui charge le modèle et répond. Un redémarrage recharge le modèle du preset actif (quelques secondes à quelques minutes selon sa taille).

-    

-      

-        
-        
-        
-      

-    

-  

-  

-  
-  
Paramètres

-  
-  

-  
Identité
-    

-      

-        Ton prénomaffiché sur tes messages
-        
-        
-      

-      

-        Ton avatar
-        

-      

-      

-        Avatar de Loki
-        

-      

-    

-  

-  
Apparence
-    

-      
-    

-    
Affichage

-    

-    
-    
-    
-    
-    

-  

-  
Accès OpenAI
-    
Endpoint compatible OpenAI?Branchez n'importe quel client compatible OpenAI (OpenCode, Continue, Cursor, Open WebUI…) sur cette adresse — le modèle s'y appelle loki. L'endpoint est servi par Loki sur le port de cette interface : aucun autre port à ouvrir. Si une clé est définie, le client doit envoyer Authorization: Bearer <clé>.

-    

-      

-        
Adresse de l'endpoint — modèle loki

-        

-          
-          
-        

-      

-      
-      

-        
Adresse publique — facultative?Le nom de domaine ou l'IP par lesquels on atteint cette interface, par exemple ia.exemple.fr ou 192.168.1.20:8090. Laissez vide et l'adresse affichée suit celle de votre navigateur. Renseignez-la si vous passez par un reverse proxy ou un nom de domaine : Loki ne voit alors qu'un appel interne et ne peut pas la deviner. Sans https://, il est ajouté.

-        

-          
-          
-        

-      

-    

-    
Clé API?Protège l'endpoint des complétions — vérifiée par Loki et par le moteur. Indispensable dès que l'adresse ci-dessus est joignable par d'autres. Modifier la clé redémarre le moteur.

-    

-      
-      

-        
-        
-        
-      

-      

-        
-        
-        
-      

-    

-  

-  
Actions
-    

-      
-      

-        
-        
-      

-      

-      
-      

-        
-        
-      

-    

-  

-  

-  

+  
+  
   
   
+
+