Update static/index.html

static/index.html

@@ -6,34 +6,11 @@
 <title>🚀 NVIDIA AI Multi-Model</title>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
 <style>
-:root{
-  --nvidia:#76b900;
-  --bg:#0a0e14;
-  --card:#141a24;
-  --card-hover:#1a2130;
-  --border:#2a3341;
-  --text:#e4e6eb;
-  --text-dim:#8b95a7;
-  --accent:#76b900;
-  --accent-glow:rgba(118,185,0,.15);
-  --error:#f44336;
-  --code:#0d1117;
-}
+:root{--nvidia:#76b900;--bg:#0a0e14;--card:#141a24;--card-hover:#1a2130;--border:#2a3341;--text:#e4e6eb;--text-dim:#8b95a7;--accent:#76b900;--accent-glow:rgba(118,185,0,.15);--error:#f44336;--code:#0d1117;}
 *{margin:0;padding:0;box-sizing:border-box}
 html,body{height:100%;overflow:hidden}
-body{
-  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
-  background:var(--bg);color:var(--text);
-  display:grid;grid-template-columns:280px 1fr 320px;
-  grid-template-rows:60px 1fr;
-  grid-template-areas:"header header header" "sidebar main config";
-}
-header{
-  grid-area:header;
-  background:linear-gradient(90deg,#0a0e14,#141a24);
-  border-bottom:1px solid var(--border);
-  display:flex;align-items:center;padding:0 20px;gap:20px;z-index:10;
-}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);display:grid;grid-template-columns:280px 1fr 320px;grid-template-rows:60px 1fr;grid-template-areas:"header header header" "sidebar main config"}
+header{grid-area:header;background:linear-gradient(90deg,#0a0e14,#141a24);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:20px;z-index:10}
 .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:18px}
 .logo-badge{background:var(--nvidia);color:#000;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:800}
 .nav-tabs{display:flex;gap:5px;margin-left:20px}
@@ -44,7 +21,6 @@ header{
 .status{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim)}
 .status-dot{width:8px;height:8px;border-radius:50%;background:var(--nvidia);box-shadow:0 0 10px var(--nvidia);animation:pulse 2s infinite}
 @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
-
 .sidebar{grid-area:sidebar;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
 .sidebar-header{padding:16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
 .sidebar-title{font-size:12px;text-transform:uppercase;color:var(--text-dim);letter-spacing:1px}
@@ -58,7 +34,6 @@ header{
 .session-badge{background:var(--border);color:var(--text-dim);padding:2px 6px;border-radius:10px;font-size:10px}
 .session-delete{opacity:0;background:none;border:none;color:var(--error);cursor:pointer;font-size:14px;padding:0 4px}
 .session-item:hover .session-delete{opacity:1}
-
 .main{grid-area:main;display:flex;flex-direction:column;overflow:hidden}
 .chat-area{flex:1;overflow-y:auto;padding:24px 32px;scroll-behavior:smooth}
 .welcome{text-align:center;padding:60px 20px;color:var(--text-dim)}
@@ -69,7 +44,6 @@ header{
 .suggestion:hover{border-color:var(--accent);background:var(--card-hover);transform:translateY(-2px)}
 .suggestion-icon{font-size:24px;margin-bottom:8px}
 .suggestion-text{font-size:13px;color:var(--text)}
-
 .message{margin-bottom:20px;display:flex;gap:12px;animation:fadeIn .3s}
 @keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
 .msg-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:14px}
@@ -86,10 +60,12 @@ header{
 .message:hover .msg-actions{opacity:1}
 .msg-btn{background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:12px;padding:2px 6px;border-radius:4px}
 .msg-btn:hover{color:var(--accent);background:var(--card)}
-.typing{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:typing 1s infinite}
-@keyframes typing{0%,100%{opacity:.3}50%{opacity:1}}
+.typing-dots{display:inline-flex;gap:4px;align-items:center;padding:8px 0}
+.typing-dots span{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:typing 1.4s infinite}
+.typing-dots span:nth-child(2){animation-delay:.2s}
+.typing-dots span:nth-child(3){animation-delay:.4s}
+@keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}
 .error-msg{color:var(--error);padding:10px;background:rgba(244,67,54,.1);border-radius:8px;border:1px solid var(--error)}
-
 .input-area{padding:16px 32px 20px;border-top:1px solid var(--border);background:var(--bg)}
 .input-wrapper{display:flex;gap:8px;align-items:flex-end;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:8px;transition:border-color .2s}
 .input-wrapper:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
@@ -100,7 +76,6 @@ header{
 .input-footer{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--text-dim);padding:0 8px}
 .stream-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
 .stream-toggle input{accent-color:var(--accent)}
-
 .config{grid-area:config;background:var(--card);border-left:1px solid var(--border);overflow-y:auto;padding:20px}
 .config-section{margin-bottom:24px}
 .config-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:8px;display:block;font-weight:600}
@@ -120,7 +95,8 @@ header{
 .stat-lbl{font-size:10px;color:var(--text-dim);text-transform:uppercase;margin-top:2px}
 .btn-icon{background:var(--card);border:1px solid var(--border);color:var(--text);padding:6px 12px;border-radius:6px;cursor:pointer;font-size:13px;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
 .btn-icon:hover{border-color:var(--accent);color:var(--accent)}
-
+.btn-test{background:var(--accent);color:#000;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:600;font-size:12px;width:100%;margin-top:8px}
+.btn-test:hover{background:#8ad100}
 .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
 .modal-overlay.active{display:flex}
 .modal{background:var(--card);border-radius:16px;max-width:900px;width:100%;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border)}
@@ -128,53 +104,40 @@ header{
 .modal-title{font-size:18px;font-weight:700}
 .modal-close{background:none;border:none;color:var(--text);font-size:24px;cursor:pointer}
 .modal-body{padding:20px;overflow-y:auto;flex:1}
-.tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px}
-.tab-btn{background:none;border:none;color:var(--text-dim);padding:10px 16px;cursor:pointer;font-size:13px;border-bottom:2px solid transparent;transition:all .2s}
-.tab-btn.active{color:var(--accent);border-color:var(--accent)}
-.tab-panel{display:none}
-.tab-panel.active{display:block}
 .code-block{background:var(--code);border:1px solid var(--border);border-radius:8px;padding:12px;font-family:'Fira Code',monospace;font-size:12px;color:#7ec8e3;overflow-x:auto;line-height:1.6;position:relative;margin:8px 0;white-space:pre-wrap}
 .copy-btn{position:absolute;top:8px;right:8px;background:var(--border);border:none;color:var(--text);padding:4px 10px;border-radius:4px;cursor:pointer;font-size:11px}
 .copy-btn:hover{background:var(--accent);color:#000}
 .endpoint-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}
 .endpoint-table th,.endpoint-table td{padding:8px 10px;border:1px solid var(--border);text-align:left}
 .endpoint-table th{background:var(--code);color:var(--accent)}
-.method-badge{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700}
-.method-get{background:#1976d2;color:#fff}
-.method-post{background:var(--accent);color:#000}
-
-.toast{position:fixed;bottom:20px;right:20px;background:var(--card);border:1px solid var(--accent);color:var(--text);padding:12px 20px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.5);z-index:200;animation:slideIn .3s;display:none}
+.test-loading{text-align:center;padding:40px;color:var(--text-dim)}
+.test-loading .typing-dots{justify-content:center}
+.toast{position:fixed;bottom:20px;right:20px;background:var(--card);border:1px solid var(--accent);color:var(--text);padding:12px 20px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.5);z-index:200;animation:slideIn .3s;display:none;max-width:400px}
 .toast.show{display:block}
 .toast.error{border-color:var(--error);color:var(--error)}
 @keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
-
 ::-webkit-scrollbar{width:8px;height:8px}
 ::-webkit-scrollbar-track{background:var(--bg)}
 ::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
 ::-webkit-scrollbar-thumb:hover{background:var(--accent)}
-
-@media(max-width:1100px){
-  body{grid-template-columns:0 1fr 0}
-  .sidebar,.config{display:none}
-}
+@media(max-width:1100px){body{grid-template-columns:0 1fr 0}.sidebar,.config{display:none}}
 </style>
 </head>
 <body>
 
 <header>
-  <div class="logo">
-    <span>🚀</span><span>NVIDIA AI</span><span class="logo-badge">NIM</span>
-  </div>
+  <div class="logo"><span>🚀</span><span>NVIDIA AI</span><span class="logo-badge">NIM</span></div>
   <div class="nav-tabs">
     <div class="nav-tab active">💬 Chat</div>
     <div class="nav-tab" onclick="openModal('models')">🤖 Modelli</div>
+    <div class="nav-tab" onclick="openModal('test')">🚀 Test Parallelo</div>
     <div class="nav-tab" onclick="openModal('api')">📖 API</div>
     <div class="nav-tab" onclick="openModal('mcp')">🔌 MCP</div>
     <a class="nav-tab" href="/ui" target="_blank">🎨 Gradio</a>
     <a class="nav-tab" href="/docs" target="_blank">📚 Swagger</a>
   </div>
   <div class="header-right">
-    <div class="status"><div class="status-dot"></div><span id="statusText">Connesso</span></div>
+    <div class="status"><div class="status-dot"></div><span>Connesso</span></div>
   </div>
 </header>
 
@@ -187,31 +150,7 @@ header{
 </aside>
 
 <main class="main">
-  <div class="chat-area" id="chatArea">
-    <div class="welcome" id="welcome">
-      <h1>🚀 NVIDIA AI Multi-Model</h1>
-      <p>Chat con modelli NVIDIA NIM • Memoria persistente • SSE Streaming</p>
-      <div class="suggestions">
-        <div class="suggestion" onclick="sendSuggestion('Spiegami la meccanica quantistica in modo semplice')">
-          <div class="suggestion-icon">🔬</div>
-          <div class="suggestion-text">Spiegami la meccanica quantistica</div>
-        </div>
-        <div class="suggestion" onclick="sendSuggestion('Scrivi una funzione Python per il quicksort')">
-          <div class="suggestion-icon">💻</div>
-          <div class="suggestion-text">Scrivi una funzione Python per il quicksort</div>
-        </div>
-        <div class="suggestion" onclick="sendSuggestion('Raccontami una storia breve sci-fi in italiano')">
-          <div class="suggestion-icon">📖</div>
-          <div class="suggestion-text">Raccontami una storia sci-fi</div>
-        </div>
-        <div class="suggestion" onclick="sendSuggestion('Confronta React vs Vue vs Svelte')">
-          <div class="suggestion-icon">⚡</div>
-          <div class="suggestion-text">Confronta React vs Vue vs Svelte</div>
-        </div>
-      </div>
-    </div>
-  </div>
-
+  <div class="chat-area" id="chatArea"></div>
   <div class="input-area">
     <div class="input-wrapper">
       <textarea id="userInput" placeholder="Scrivi un messaggio... (Shift+Enter per nuova riga)" rows="1"></textarea>
@@ -232,13 +171,12 @@ header{
     <label class="config-label">🤖 Modello</label>
     <select class="config-select" id="modelSelect"></select>
     <div class="model-info" id="modelInfo"></div>
+    <button class="btn-test" onclick="testCurrentModel()">🧪 Testa modello corrente</button>
   </div>
-
   <div class="config-section">
     <label class="config-label">📝 System Prompt</label>
     <textarea class="config-textarea" id="systemPrompt">Sei un assistente AI utile. Rispondi in italiano se l'utente scrive in italiano.</textarea>
   </div>
-
   <div class="config-section">
     <label class="config-label">🌡️ Temperature</label>
     <div class="slider-row">
@@ -246,7 +184,6 @@ header{
       <span class="slider-value" id="temperatureVal">0.7</span>
     </div>
   </div>
-
   <div class="config-section">
     <label class="config-label">📏 Max Tokens</label>
     <div class="slider-row">
@@ -254,7 +191,6 @@ header{
       <span class="slider-value" id="maxTokensVal">4096</span>
     </div>
   </div>
-
   <div class="config-section">
     <label class="config-label">🧠 Memoria</label>
     <label class="checkbox-row">
@@ -262,9 +198,8 @@ header{
       <span>Attiva memoria breve/lunga</span>
     </label>
   </div>
-
   <div class="config-section">
-    <label class="config-label">📊 Statistiche Sessione</label>
+    <label class="config-label">📊 Statistiche</label>
     <div class="stats-grid">
       <div class="stat"><div class="stat-val" id="statShort">0</div><div class="stat-lbl">Breve</div></div>
       <div class="stat"><div class="stat-val" id="statLong">0</div><div class="stat-lbl">Lunga</div></div>
@@ -272,7 +207,6 @@ header{
       <div class="stat"><div class="stat-val" id="statTotal">0</div><div class="stat-lbl">Totali</div></div>
     </div>
   </div>
-
   <div class="config-section">
     <button class="btn-new" style="width:100%;margin-bottom:8px" onclick="clearCurrentSession()">🗑️ Pulisci Chat</button>
     <button class="btn-icon" style="width:100%;justify-content:center" onclick="exportChat()">💾 Esporta</button>
@@ -292,9 +226,7 @@ header{
 <div class="toast" id="toast"></div>
 
 <script>
-// ═══════════════════════════════════════════════════════
-// STATE
-// ═══════════════════════════════════════════════════════
+'use strict';
 const DEFAULT_MODEL = 'meta/llama-3.1-8b-instruct';
 
 const state = {
@@ -323,10 +255,8 @@ async function loadModels(){
     const data = await r.json();
     state.models = data.models;
     state.defaultModel = data.default || DEFAULT_MODEL;
-
     const sel = document.getElementById('modelSelect');
     sel.innerHTML = '';
-
     const grouped = {};
     for(const [id,info] of Object.entries(data.models)){
       const cat = info.category;
@@ -344,8 +274,6 @@ async function loadModels(){
       }
       sel.appendChild(og);
     }
-
-    // Imposta il modello: prima localStorage, poi default dal server, poi fallback
     const stored = localStorage.getItem('selectedModel');
     if(stored && state.models[stored]){
       sel.value = stored;
@@ -353,17 +281,16 @@ async function loadModels(){
       sel.value = state.defaultModel;
       localStorage.setItem('selectedModel', state.defaultModel);
     }
-
     sel.addEventListener('change', ()=>{
       localStorage.setItem('selectedModel', sel.value);
       updateModelInfo();
       showToast('✅ Modello: ' + state.models[sel.value].name);
     });
     updateModelInfo();
-    console.log('✅ Modelli caricati:', Object.keys(data.models).length, '| Default:', sel.value);
+    console.log('✅ Modelli:', Object.keys(data.models).length, '| Default:', sel.value);
   }catch(e){
-    console.error('❌ Errore caricamento modelli:', e);
-    showToast('❌ Errore caricamento modelli', true);
+    console.error('❌', e);
+    showToast('❌ Errore modelli', true);
   }
 }
 
@@ -371,12 +298,11 @@ function updateModelInfo(){
   const id = document.getElementById('modelSelect').value;
   const m = state.models[id];
   if(!m) return;
-  document.getElementById('modelInfo').innerHTML = `
-    <b>ID:</b> ${id}<br>
-    <b>Categoria:</b> ${m.category}<br>
-    <b>Context:</b> ${m.context.toLocaleString()} token<br>
-    <b>${m.description}</b>
-  `;
+  document.getElementById('modelInfo').innerHTML = 
+    '<b>ID:</b> ' + escapeHtml(id) + '<br>' +
+    '<b>Categoria:</b> ' + escapeHtml(m.category) + '<br>' +
+    '<b>Context:</b> ' + m.context.toLocaleString() + ' token<br>' +
+    '<b>' + escapeHtml(m.description) + '</b>';
 }
 
 // ═══════════════════════════════════════════════════════
@@ -396,12 +322,15 @@ function renderSessions(){
   for(const [id, s] of Object.entries(state.sessions)){
     const div = document.createElement('div');
     div.className = 'session-item' + (id === state.currentSession ? ' active' : '');
-    div.innerHTML = `
-      <span class="session-name">💬 ${escapeHtml(s.name)}</span>
-      <span class="session-badge">${s.messages.length}</span>
-      <button class="session-delete" onclick="event.stopPropagation();deleteSession('${escapeHtml(id)}')">🗑️</button>
-    `;
-    div.onclick = ()=>switchSession(id);
+    div.innerHTML = 
+      '<span class="session-name">💬 ' + escapeHtml(s.name) + '</span>' +
+      '<span class="session-badge">' + s.messages.length + '</span>' +
+      '<button class="session-delete" data-sid="' + escapeAttr(id) + '">🗑️</button>';
+    div.querySelector('.session-delete').addEventListener('click', (e)=>{
+      e.stopPropagation();
+      deleteSession(id);
+    });
+    div.addEventListener('click', ()=>switchSession(id));
     list.appendChild(div);
   }
 }
@@ -427,7 +356,7 @@ function switchSession(id){
 }
 
 async function deleteSession(id){
-  if(!confirm(`Eliminare sessione "${id}"?`)) return;
+  if(!confirm('Eliminare sessione "' + id + '"?')) return;
   delete state.sessions[id];
   try{ await fetch('/v1/sessions/' + encodeURIComponent(id), {method:'DELETE'}); }catch(e){}
   if(id === state.currentSession){
@@ -445,15 +374,12 @@ async function deleteSession(id){
 }
 
 function saveSessions(){
-  try{
-    localStorage.setItem('sessions', JSON.stringify(state.sessions));
-  }catch(e){
-    console.warn('LocalStorage pieno, pulizia messaggi vecchi');
-  }
+  try{ localStorage.setItem('sessions', JSON.stringify(state.sessions)); }
+  catch(e){ console.warn('LocalStorage full'); }
 }
 
 async function clearCurrentSession(){
-  if(!confirm('Pulire tutti i messaggi di questa sessione?')) return;
+  if(!confirm('Pulire questa chat?')) return;
   state.sessions[state.currentSession].messages = [];
   try{
     await fetch('/v1/memory', {
@@ -466,27 +392,27 @@ async function clearCurrentSession(){
   loadCurrentChat();
   updateStats();
   renderSessions();
-  showToast('🗑️ Chat pulita');
+  showToast('🗑️ Pulita');
 }
 
 // ═══════════════════════════════════════════════════════
-// CHAT
+// CHAT (FIX: rendering separato dal contenuto)
 // ═══════════════════════════════════════════════════════
 function loadCurrentChat(){
   const area = document.getElementById('chatArea');
   const msgs = state.sessions[state.currentSession].messages;
   area.innerHTML = '';
   if(msgs.length === 0){
-    area.innerHTML = `<div class="welcome" id="welcome">
-      <h1>🚀 NVIDIA AI Multi-Model</h1>
-      <p>Sessione: <b>${escapeHtml(state.currentSession)}</b></p>
-      <div class="suggestions">
-        <div class="suggestion" onclick="sendSuggestion('Ciao! Chi sei?')"><div class="suggestion-icon">👋</div><div class="suggestion-text">Ciao! Chi sei?</div></div>
-        <div class="suggestion" onclick="sendSuggestion('Aiutami a scrivere codice Python')"><div class="suggestion-icon">💻</div><div class="suggestion-text">Aiutami con codice Python</div></div>
-        <div class="suggestion" onclick="sendSuggestion('Spiegami come funziona la memoria di questa chat')"><div class="suggestion-icon">🧠</div><div class="suggestion-text">Come funziona la memoria?</div></div>
-        <div class="suggestion" onclick="sendSuggestion('Scrivi una poesia in italiano')"><div class="suggestion-icon">📝</div><div class="suggestion-text">Scrivi una poesia</div></div>
-      </div>
-    </div>`;
+    area.innerHTML = 
+      '<div class="welcome">' +
+      '<h1>🚀 NVIDIA AI Multi-Model</h1>' +
+      '<p>Sessione: <b>' + escapeHtml(state.currentSession) + '</b></p>' +
+      '<div class="suggestions">' +
+        '<div class="suggestion" onclick="sendSuggestion(\'Ciao! Chi sei?\')"><div class="suggestion-icon">👋</div><div class="suggestion-text">Ciao! Chi sei?</div></div>' +
+        '<div class="suggestion" onclick="sendSuggestion(\'Scrivi codice Python per il quicksort\')"><div class="suggestion-icon">💻</div><div class="suggestion-text">Codice Python quicksort</div></div>' +
+        '<div class="suggestion" onclick="sendSuggestion(\'Spiegami la meccanica quantistica\')"><div class="suggestion-icon">🔬</div><div class="suggestion-text">Meccanica quantistica</div></div>' +
+        '<div class="suggestion" onclick="sendSuggestion(\'Scrivi una poesia in italiano\')"><div class="suggestion-icon">📝</div><div class="suggestion-text">Scrivi una poesia</div></div>' +
+      '</div></div>';
     return;
   }
   msgs.forEach(m => appendMessage(m.role, m.content, false));
@@ -494,42 +420,78 @@ function loadCurrentChat(){
 
 function appendMessage(role, content, save=true){
   const area = document.getElementById('chatArea');
-  const welcome = document.getElementById('welcome');
+  const welcome = area.querySelector('.welcome');
   if(welcome) welcome.remove();
+  
   const div = document.createElement('div');
   div.className = 'message';
   const isUser = role === 'user';
   const currentModel = document.getElementById('modelSelect').value;
   const modelName = state.models[currentModel]?.name || 'Assistente';
-  div.innerHTML = `
-    <div class="msg-avatar ${role}">${isUser ? '👤' : '🤖'}</div>
-    <div class="msg-content">
-      <div class="msg-role">${isUser ? 'Tu' : escapeHtml(modelName)}</div>
-      <div class="msg-text ${role}">${renderMarkdown(content)}</div>
-      <div class="msg-actions">
-        <button class="msg-btn" onclick="copyText(this)">📋 Copia</button>
-      </div>
-    </div>`;
+  
+  // FIX: contenuto renderizzato con innerHTML MA solo dopo escape+markdown
+  const avatar = document.createElement('div');
+  avatar.className = 'msg-avatar ' + role;
+  avatar.textContent = isUser ? '👤' : '🤖';
+  
+  const contentDiv = document.createElement('div');
+  contentDiv.className = 'msg-content';
+  
+  const roleDiv = document.createElement('div');
+  roleDiv.className = 'msg-role';
+  roleDiv.textContent = isUser ? 'Tu' : modelName;
+  
+  const textDiv = document.createElement('div');
+  textDiv.className = 'msg-text ' + role;
+  textDiv.innerHTML = renderMarkdown(content);  // safe: renderMarkdown fa già escape
+  
+  const actionsDiv = document.createElement('div');
+  actionsDiv.className = 'msg-actions';
+  const copyBtn = document.createElement('button');
+  copyBtn.className = 'msg-btn';
+  copyBtn.textContent = '📋 Copia';
+  copyBtn.onclick = ()=>{
+    navigator.clipboard.writeText(textDiv.innerText);
+    showToast('✅ Copiato');
+  };
+  actionsDiv.appendChild(copyBtn);
+  
+  contentDiv.appendChild(roleDiv);
+  contentDiv.appendChild(textDiv);
+  contentDiv.appendChild(actionsDiv);
+  
+  div.appendChild(avatar);
+  div.appendChild(contentDiv);
   area.appendChild(div);
   area.scrollTop = area.scrollHeight;
+  
   if(save){
     state.sessions[state.currentSession].messages.push({role, content, timestamp: Date.now()});
     saveSessions();
     renderSessions();
   }
-  return div.querySelector('.msg-text');
+  return textDiv;  // ritorna l'elemento DOM per streaming
+}
+
+function showTypingIndicator(textDiv){
+  textDiv.innerHTML = '<div class="typing-dots"><span></span><span></span><span></span></div>';
 }
 
 function escapeHtml(text){
   const div = document.createElement('div');
-  div.textContent = String(text);
+  div.textContent = String(text ?? '');
   return div.innerHTML;
 }
 
+function escapeAttr(text){
+  return String(text ?? '').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+}
+
 function renderMarkdown(text){
+  if(!text) return '';
   text = escapeHtml(text);
   text = text.replace(/```(\w+)?\n?([\s\S]*?)```/g, (_,lang,code)=>
-    `<pre><code class="lang-${lang||''}">${code.trim()}</code></pre>`);
+    '<pre><code class="lang-' + (lang||'') + '">' + code.trim() + '</code></pre>');
   text = text.replace(/`([^`\n]+)`/g, '<code>$1</code>');
   text = text.replace(/\*\*([^*]+)\*\*/g, '<b>$1</b>');
   text = text.replace(/\*([^*\n]+)\*/g, '<i>$1</i>');
@@ -537,12 +499,6 @@ function renderMarkdown(text){
   return text;
 }
 
-function copyText(btn){
-  const text = btn.closest('.msg-content').querySelector('.msg-text').innerText;
-  navigator.clipboard.writeText(text);
-  showToast('✅ Copiato');
-}
-
 function sendSuggestion(text){
   document.getElementById('userInput').value = text;
   sendMessage();
@@ -553,15 +509,13 @@ async function sendMessage(){
   const message = input.value.trim();
   if(!message || state.isGenerating) return;
 
-  // ─── VALIDAZIONE MODELLO ───
   const modelSel = document.getElementById('modelSelect');
   let model = modelSel.value;
   if(!model || model.trim() === ''){
     model = localStorage.getItem('selectedModel') || state.defaultModel || DEFAULT_MODEL;
     modelSel.value = model;
-    console.warn('⚠️ Modello mancante, uso fallback:', model);
   }
-  console.log('📤 Sending → model:', model, '| session:', state.currentSession);
+  console.log('📤 model:', model, '| session:', state.currentSession);
 
   const systemPrompt = document.getElementById('systemPrompt').value || 'Sei un assistente utile.';
   const temperature = parseFloat(document.getElementById('temperature').value);
@@ -576,7 +530,8 @@ async function sendMessage(){
   state.isGenerating = true;
   document.getElementById('sendBtn').disabled = true;
 
-  const assistDiv = appendMessage('assistant', '<span class="typing"></span>', false);
+  const textDiv = appendMessage('assistant', '', false);
+  showTypingIndicator(textDiv);
   let fullText = '';
 
   try{
@@ -589,10 +544,10 @@ async function sendMessage(){
         use_memory: useMemory
       }, (chunk)=>{
         fullText += chunk;
-        assistDiv.innerHTML = renderMarkdown(fullText) + '<span class="typing"></span>';
+        textDiv.innerHTML = renderMarkdown(fullText);
         document.getElementById('chatArea').scrollTop = document.getElementById('chatArea').scrollHeight;
       });
-      assistDiv.innerHTML = renderMarkdown(fullText);
+      textDiv.innerHTML = renderMarkdown(fullText);
     } else {
       const r = await fetch('/v1/chat', {
         method:'POST',
@@ -606,11 +561,9 @@ async function sendMessage(){
         })
       });
       const data = await r.json();
-      if(!r.ok){
-        throw new Error(data.detail || data.error || 'Errore server');
-      }
+      if(!r.ok) throw new Error(data.detail || data.error || 'Errore server');
       fullText = data.response || '';
-      assistDiv.innerHTML = renderMarkdown(fullText);
+      textDiv.innerHTML = renderMarkdown(fullText);
     }
 
     if(fullText){
@@ -622,8 +575,8 @@ async function sendMessage(){
       updateStats();
     }
   }catch(e){
-    console.error('❌ Chat error:', e);
-    assistDiv.innerHTML = `<div class="error-msg">❌ ${escapeHtml(e.message)}<br><br>💡 Prova un altro modello (es. LLaMA 3.1 8B)</div>`;
+    console.error('❌', e);
+    textDiv.innerHTML = '<div class="error-msg">❌ ' + escapeHtml(e.message) + '<br><br>💡 Prova un altro modello (LLaMA 3.1 8B, Mistral 7B)</div>';
   } finally {
     state.isGenerating = false;
     document.getElementById('sendBtn').disabled = false;
@@ -633,10 +586,8 @@ async function sendMessage(){
 
 async function streamChat(params, onChunk){
   return new Promise((resolve, reject)=>{
-    // Validazione + fallback
     const model = params.model || localStorage.getItem('selectedModel') || DEFAULT_MODEL;
-    console.log('🚀 SSE Streaming → model:', model, '| session:', params.session_id);
-
+    console.log('🚀 SSE model:', model);
     const qs = new URLSearchParams({
       message: String(params.message || ''),
       model: String(model),
@@ -646,65 +597,66 @@ async function streamChat(params, onChunk){
       max_tokens: String(params.max_tokens || 4096),
       use_memory: String(params.use_memory !== false)
     });
-
     const es = new EventSource('/v1/chat/stream?' + qs.toString());
     state.currentEventSource = es;
-
-    let receivedAnyToken = false;
+    let received = false;
     let hadError = false;
 
-    es.addEventListener('start', (e)=>{
-      console.log('▶️ SSE start:', e.data);
-    });
-
+    es.addEventListener('start', (e)=>console.log('▶️', e.data));
     es.addEventListener('token', (e)=>{
       try{
         const d = JSON.parse(e.data);
-        if(d.token){
-          receivedAnyToken = true;
-          onChunk(d.token);
-        }
-      }catch(err){ console.error('token parse error', err); }
+        if(d.token){ received = true; onChunk(d.token); }
+      }catch(err){}
     });
-
     es.addEventListener('done', (e)=>{
-      console.log('✅ SSE done');
+      console.log('✅ done');
       es.close();
       state.currentEventSource = null;
       resolve();
     });
-
     es.addEventListener('error', (e)=>{
-      console.error('❌ SSE error event, data:', e.data);
+      console.error('❌ SSE error:', e.data);
       hadError = true;
       es.close();
       state.currentEventSource = null;
-
       if(e.data){
-        try{
-          const err = JSON.parse(e.data);
-          reject(new Error(err.error || 'Errore stream'));
-        }catch{
-          reject(new Error('Errore stream (parsing fallito)'));
-        }
-      } else if(receivedAnyToken){
-        // Se abbiamo ricevuto qualcosa, considera completato
+        try{ reject(new Error(JSON.parse(e.data).error || 'Stream error')); }
+        catch{ reject(new Error('Stream error')); }
+      } else if(received){
         resolve();
       } else {
-        reject(new Error('Connessione SSE fallita. Verifica che il modello ' + model + ' sia disponibile. Apri F12 → Console per dettagli.'));
+        reject(new Error('Connessione SSE fallita per modello ' + model));
       }
     });
-
-    // Safety timeout
     setTimeout(()=>{
-      if(!receivedAnyToken && !hadError){
+      if(!received && !hadError){
         es.close();
-        reject(new Error('Timeout: nessuna risposta dopo 60s. Il modello potrebbe non essere disponibile.'));
+        reject(new Error('Timeout 60s'));
       }
     }, 60000);
   });
 }
 
+// ═══════════════════════════════════════════════════════
+// TEST MODELLO CORRENTE
+// ═══════════════════════════════════════════════════════
+async function testCurrentModel(){
+  const model = document.getElementById('modelSelect').value;
+  showToast('🧪 Test in corso...');
+  try{
+    const r = await fetch('/v1/debug/test-model?model=' + encodeURIComponent(model));
+    const data = await r.json();
+    if(data.status === '✅ OK'){
+      showToast('✅ ' + model + ' OK (' + data.elapsed_ms + 'ms)');
+    } else {
+      showToast('❌ ' + model + ' non funziona', true);
+    }
+  }catch(e){
+    showToast('❌ Errore test', true);
+  }
+}
+
 // ═══════════════════════════════════════════════════════
 // STATS
 // ═══════════════════════════════════════════════════════
@@ -747,15 +699,14 @@ function updateTokenCount(){
 // ═══════════════════════════════════════════════════════
 function exportChat(){
   const s = state.sessions[state.currentSession];
-  const data = JSON.stringify(s, null, 2);
-  const blob = new Blob([data], {type:'application/json'});
+  const blob = new Blob([JSON.stringify(s, null, 2)], {type:'application/json'});
   const url = URL.createObjectURL(blob);
   const a = document.createElement('a');
   a.href = url;
-  a.download = `chat-${state.currentSession}-${Date.now()}.json`;
+  a.download = 'chat-' + state.currentSession + '-' + Date.now() + '.json';
   a.click();
   URL.revokeObjectURL(url);
-  showToast('✅ Chat esportata');
+  showToast('✅ Esportata');
 }
 
 // ═══════════════════════════════════════════════════════
@@ -765,126 +716,100 @@ function openModal(type){
   document.getElementById('modal').classList.add('active');
   const title = document.getElementById('modalTitle');
   const body = document.getElementById('modalBody');
+  const base = location.origin;
 
   if(type === 'models'){
-    title.textContent = '🤖 Catalogo Modelli NVIDIA NIM';
-    let html = `<p style="margin-bottom:12px;color:var(--text-dim)">Totale: <b>${Object.keys(state.models).length}</b> modelli</p>`;
-    html += '<table class="endpoint-table"><tr><th>Categoria</th><th>Nome</th><th>Model ID</th><th>Context</th></tr>';
+    title.textContent = '🤖 Catalogo Modelli';
+    let html = '<p style="color:var(--text-dim);margin-bottom:12px">Totale: <b>' + Object.keys(state.models).length + '</b></p>';
+    html += '<table class="endpoint-table"><tr><th>Cat</th><th>Nome</th><th>ID</th><th>Ctx</th></tr>';
     for(const [id,m] of Object.entries(state.models)){
-      html += `<tr><td>${escapeHtml(m.category)}</td><td>${escapeHtml(m.name)}</td><td><code>${escapeHtml(id)}</code></td><td>${m.context.toLocaleString()}</td></tr>`;
+      html += '<tr><td>' + escapeHtml(m.category) + '</td><td>' + escapeHtml(m.name) + '</td><td><code>' + escapeHtml(id) + '</code></td><td>' + m.context.toLocaleString() + '</td></tr>';
     }
     html += '</table>';
     body.innerHTML = html;
-  } else if(type === 'api'){
+  }
+  else if(type === 'test'){
+    title.textContent = '🚀 Test Parallelo Async';
+    body.innerHTML = 
+      '<p>Testa <b>tutti i modelli in parallelo</b> con 15 richieste simultanee.<br>' +
+      'Impiega solo ~5-10 secondi invece di 60+ seriali.</p><br>' +
+      '<button class="btn-new" onclick="runParallelTest()">🚀 Avvia Test Parallelo</button> ' +
+      '<button class="btn-new" onclick="runAutoClean()">🧹 Auto-Clean Catalogo</button>' +
+      '<div id="testResults" style="margin-top:16px"></div>';
+  }
+  else if(type === 'api'){
     title.textContent = '📖 API Reference';
-    const base = location.origin;
-    body.innerHTML = `
-      <div class="tab-bar">
-        <button class="tab-btn active" onclick="switchTab('curl',this)">cURL</button>
-        <button class="tab-btn" onclick="switchTab('python',this)">Python</button>
-        <button class="tab-btn" onclick="switchTab('js',this)">JavaScript</button>
-        <button class="tab-btn" onclick="switchTab('sse',this)">SSE</button>
-      </div>
-      <div class="tab-panel active" id="tab-curl">
-        <h3>Chat GET</h3>
-        <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl "${base}/v1/chat/get?message=Ciao&model=meta/llama-3.1-8b-instruct&session_id=test"</div>
-        <h3>Chat POST</h3>
-        <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl -X POST ${base}/v1/chat \\
-  -H "Content-Type: application/json" \\
-  -d '{"message":"Ciao!","model":"meta/llama-3.1-8b-instruct","session_id":"test"}'</div>
-        <h3>SSE Streaming</h3>
-        <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl -N "${base}/v1/chat/stream?message=Raccontami+una+storia&model=meta/llama-3.1-8b-instruct"</div>
-        <h3>Lista Modelli</h3>
-        <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl ${base}/v1/models</div>
-      </div>
-      <div class="tab-panel" id="tab-python">
-        <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>import requests
-
-r = requests.post("${base}/v1/chat", json={
-    "message": "Ciao!",
-    "model": "meta/llama-3.1-8b-instruct",
-    "session_id": "python-test",
-    "use_memory": True
-})
-print(r.json()["response"])</div>
-        <h3>Streaming SSE con httpx</h3>
-        <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>import httpx, json
-
-with httpx.stream('GET', '${base}/v1/chat/stream',
-                   params={'message':'Ciao!','model':'meta/llama-3.1-8b-instruct','session_id':'py'}) as r:
-    for line in r.iter_lines():
-        if line.startswith('data: '):
-            d = json.loads(line[6:])
-            if 'token' in d: print(d['token'], end='', flush=True)</div>
-      </div>
-      <div class="tab-panel" id="tab-js">
-        <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>const r = await fetch('${base}/v1/chat', {
-  method: 'POST',
-  headers: {'Content-Type':'application/json'},
-  body: JSON.stringify({
-    message: 'Hello!',
-    model: 'meta/llama-3.1-8b-instruct',
-    session_id: 'js-test'
-  })
-});
-const data = await r.json();
-console.log(data.response);</div>
-      </div>
-      <div class="tab-panel" id="tab-sse">
-        <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>const es = new EventSource(
-  '${base}/v1/chat/stream?message=Ciao&model=meta/llama-3.1-8b-instruct&session_id=sse'
-);
-es.addEventListener('token', (e) => {
-  const {token} = JSON.parse(e.data);
-  document.body.innerHTML += token;
-});
-es.addEventListener('done', (e) => {
-  console.log('Fine:', JSON.parse(e.data));
-  es.close();
-});</div>
-      </div>
-    `;
-  } else if(type === 'mcp'){
+    body.innerHTML = 
+      '<h3>Chat GET</h3><div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl "' + base + '/v1/chat/get?message=Ciao&model=meta/llama-3.1-8b-instruct&session_id=test"</div>' +
+      '<h3>Chat POST</h3><div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl -X POST ' + base + '/v1/chat \\\n  -H "Content-Type: application/json" \\\n  -d \'{"message":"Ciao!","model":"meta/llama-3.1-8b-instruct"}\'</div>' +
+      '<h3>SSE Streaming</h3><div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl -N "' + base + '/v1/chat/stream?message=Ciao&model=meta/llama-3.1-8b-instruct"</div>' +
+      '<h3>🚀 Test Parallelo Ultra-veloce</h3><div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl "' + base + '/v1/debug/test-all-parallel?concurrency=15"</div>' +
+      '<h3>🧹 Auto-Clean Catalogo</h3><div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl "' + base + '/v1/debug/auto-clean"</div>';
+  }
+  else if(type === 'mcp'){
     title.textContent = '🔌 MCP Server';
-    const base = location.origin;
-    body.innerHTML = `
-      <h3>Configurazione Claude Desktop / Cursor</h3>
-      <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>{
-  "mcpServers": {
-    "nvidia-ai": {
-      "url": "${base}/v1/mcp",
-      "transport": "http"
-    }
+    body.innerHTML = 
+      '<h3>Config Claude Desktop / Cursor</h3>' +
+      '<div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>{\n  "mcpServers": {\n    "nvidia-ai": {\n      "url": "' + base + '/v1/mcp",\n      "transport": "http"\n    }\n  }\n}</div>' +
+      '<h3>Tools disponibili</h3>' +
+      '<ul style="line-height:1.8">' +
+      '<li><code>nvidia_chat</code> — Chat con memoria</li>' +
+      '<li><code>multi_model_compare</code> — 🔥 Confronta più modelli in PARALLELO</li>' +
+      '<li><code>list_models</code> — Lista modelli</li>' +
+      '<li><code>memory_stats</code> — Statistiche memoria</li>' +
+      '<li><code>memory_clear</code> — Pulisci memoria</li>' +
+      '<li><code>get_conversation_history</code> — Cronologia</li>' +
+      '</ul>' +
+      '<h3>Test</h3>' +
+      '<div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl -X POST ' + base + '/v1/mcp \\\n  -H "Content-Type: application/json" \\\n  -d \'{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}\'</div>';
   }
-}</div>
-
-      <h3>Test Initialize</h3>
-      <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl -X POST ${base}/v1/mcp \\
-  -H "Content-Type: application/json" \\
-  -d '{"jsonrpc":"2.0","id":1,"method":"initialize","params":{}}'</div>
-
-      <h3>Lista Tools</h3>
-      <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl -X POST ${base}/v1/mcp \\
-  -H "Content-Type: application/json" \\
-  -d '{"jsonrpc":"2.0","id":2,"method":"tools/list","params":{}}'</div>
-
-      <h3>Chiamata Tool</h3>
-      <div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>curl -X POST ${base}/v1/mcp \\
-  -H "Content-Type: application/json" \\
-  -d '{"jsonrpc":"2.0","id":3,"method":"tools/call","params":{"name":"nvidia_chat","arguments":{"message":"Ciao!","model":"meta/llama-3.1-8b-instruct"}}}'</div>
-    `;
+}
+
+async function runParallelTest(){
+  const results = document.getElementById('testResults');
+  results.innerHTML = '<div class="test-loading"><div class="typing-dots"><span></span><span></span><span></span></div><p>Test in corso... (~5-10 sec)</p></div>';
+  try{
+    const r = await fetch('/v1/debug/test-all-parallel?concurrency=15');
+    const data = await r.json();
+    let html = '<h3>⏱️ Completato in ' + data.summary.total_time_seconds + 's</h3>';
+    html += '<p>✅ Funzionanti: <b>' + data.summary.working + '</b> / ' + data.summary.total_tested + '</p>';
+    html += '<p>❌ Rotti: <b>' + data.summary.broken + '</b></p>';
+    html += '<h4>✅ Modelli funzionanti (ordinati per velocità):</h4>';
+    html += '<table class="endpoint-table"><tr><th>Model</th><th>ms</th></tr>';
+    for(const w of data.working_models_by_speed){
+      html += '<tr><td><code>' + escapeHtml(w.model) + '</code></td><td>' + w.elapsed_ms + '</td></tr>';
+    }
+    html += '</table>';
+    if(data.broken_models.length > 0){
+      html += '<h4>❌ Modelli non funzionanti:</h4>';
+      html += '<div class="code-block">' + data.broken_ids_only.map(escapeHtml).join('\n') + '</div>';
+    }
+    results.innerHTML = html;
+    showToast('✅ Test completato in ' + data.summary.total_time_seconds + 's');
+  }catch(e){
+    results.innerHTML = '<div class="error-msg">❌ ' + escapeHtml(e.message) + '</div>';
   }
 }
 
-function switchTab(id, btn){
-  document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
-  document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
-  btn.classList.add('active');
-  document.getElementById('tab-'+id).classList.add('active');
+async function runAutoClean(){
+  const results = document.getElementById('testResults');
+  results.innerHTML = '<div class="test-loading"><div class="typing-dots"><span></span><span></span><span></span></div><p>Auto-clean in corso...</p></div>';
+  try{
+    const r = await fetch('/v1/debug/auto-clean');
+    const data = await r.json();
+    let html = '<h3>🧹 Catalogo Pulito</h3>';
+    html += '<p>Da <b>' + data.summary.original_count + '</b> a <b>' + data.summary.clean_catalog_size + '</b> modelli in ' + data.summary.total_time_seconds + 's</p>';
+    html += '<h4>Snippet Python da copiare in app.py:</h4>';
+    html += '<div class="code-block"><button class="copy-btn" onclick="copyBlock(this)">Copia</button>' + escapeHtml(data.python_snippet) + '</div>';
+    results.innerHTML = html;
+    showToast('✅ Auto-clean completato');
+  }catch(e){
+    results.innerHTML = '<div class="error-msg">❌ ' + escapeHtml(e.message) + '</div>';
+  }
 }
 
 function copyBlock(btn){
-  const text = btn.parentElement.innerText.replace('Copia','').trim();
+  const text = btn.parentElement.innerText.replace(/^Copia\s*/,'').trim();
   navigator.clipboard.writeText(text);
   btn.textContent = '✅';
   setTimeout(()=>btn.textContent='Copia', 1500);
@@ -898,9 +823,6 @@ document.getElementById('modal').addEventListener('click', (e)=>{
   if(e.target.id === 'modal') closeModal();
 });
 
-// ═══════════════════════════════════════════════════════
-// TOAST
-// ═══════════════════════════════════════════════════════
 function showToast(msg, isError=false){
   const t = document.getElementById('toast');
   t.textContent = msg;
@@ -908,7 +830,6 @@ function showToast(msg, isError=false){
   setTimeout(()=>t.classList.remove('show'), 3000);
 }
 
-// GO!
 init();
 </script>
 </body>