Update index.html

index.html

@@ -92,6 +92,8 @@ details.think summary{cursor:pointer;font-size:12px;font-style:italic}
 details.think .t{white-space:pre-wrap;border-left:3px solid var(--border);padding-left:10px;margin-top:5px;font-size:12.5px}
 
 #controls{padding:8px 12px;background:var(--surface);display:flex;gap:8px;align-items:center;border-top:none}
+#topic-sugg{flex:none;max-width:170px;background:var(--input);color:var(--muted);border:none;
+  border-radius:8px;padding:11px 8px;font-size:13px;cursor:pointer;outline:none}
 #topic{flex:1;min-width:0;background:var(--input);border:none;color:var(--text);
   border-radius:8px;padding:11px 14px;font-size:15px;outline:none}
 #topic::placeholder{color:var(--muted)}
@@ -186,6 +188,7 @@ footer a{color:var(--accent);text-decoration:none}
   .msg .content{max-width:85%}
   #settings{margin:0 8px 8px}
   #history{display:none}
+  #topic-sugg{max-width:110px}
 }
 </style>
 </head>
@@ -229,6 +232,7 @@ footer a{color:var(--accent);text-decoration:none}
     <div id="chat"></div>
 
     <div id="controls">
+      <select id="topic-sugg" title="Temas sugeridos"></select>
       <input id="topic" placeholder="Propón un tema y los agentes debaten&hellip;">
       <button id="start-btn" disabled>Cargando modelo&hellip;</button>
       <button id="stop-btn">Detener</button>
@@ -714,6 +718,45 @@ topicEl.addEventListener('keydown', e => {
   if (e.key === 'Enter') { e.preventDefault(); startBtn.click(); }
 });
 
+// --- Temas sugeridos (10 al azar en cada carga) ---
+const TOPIC_POOL = [
+  '\u00bfConviene ejecutar LLMs en el navegador con WebGPU?',
+  '\u00bfEs mejor el caf\u00e9 solo o con leche?',
+  '\u00bfDeber\u00edan los coches aut\u00f3nomos decidir en un accidente?',
+  '\u00bfEs el trabajo remoto m\u00e1s productivo que la oficina?',
+  '\u00bfHa mejorado la IA la programaci\u00f3n o solo la ha acelerado?',
+  '\u00bfMerece la pena aprender Harbour en 2026?',
+  '\u00bfDeber\u00eda durar un smartphone 7 a\u00f1os?',
+  'Pizza con pi\u00f1a: \u00bfgenialidad o sacrilegio?',
+  '\u00bfSuscripci\u00f3n mensual o licencia perpetua para el software?',
+  '\u00bfEs la privacidad m\u00e1s importante que la comodidad?',
+  '\u00bfDeben los ni\u00f1os aprender a programar antes de los 10 a\u00f1os?',
+  '\u00bfSobrevivir\u00e1 el open source a la IA?',
+  '\u00bfSQL o NoSQL para la tienda de un barrio?',
+  '\u00bfTienen sentido los coches el\u00e9ctricos sin red de carga?',
+  '\u00bfEs la bater\u00eda el cuello de botella de la tecnolog\u00eda?',
+  '\u00bfEl 5G fue revoluci\u00f3n o marketing?',
+  '\u00bfPC de sobremesa o port\u00e1til hoy?',
+  '\u00bfSon los videojuegos cultura o solo ocio?',
+  '\u00bfEs mejor vivir en la ciudad o en un pueblo?',
+  '\u00bfDeber\u00eda existir un derecho al olvido digital?',
+];
+const suggEl = document.getElementById('topic-sugg');
+(function fillSuggestions() {
+  const ph = document.createElement('option');
+  ph.value = ''; ph.textContent = '\u{1F3B2} 10 temas al azar\u2026';
+  suggEl.appendChild(ph);
+  [...TOPIC_POOL].sort(() => Math.random() - .5).slice(0, 10).forEach(t => {
+    const o = document.createElement('option');
+    o.value = t; o.textContent = t;
+    suggEl.appendChild(o);
+  });
+})();
+suggEl.addEventListener('change', () => {
+  if (suggEl.value) { topicEl.value = suggEl.value; topicEl.focus(); }
+  suggEl.selectedIndex = 0;
+});
+
 // --- Settings ---
 const settingsPanel = document.getElementById('settings');
 document.getElementById('settings-btn').addEventListener('click', () => {