Update index.html

index.html

@@ -154,6 +154,20 @@ footer a{color:var(--accent);text-decoration:none}
 #agent-delete{background:transparent;border:1px solid #ea0038;color:#ea0038;border-radius:999px;
   padding:10px 18px;cursor:pointer;font-weight:600;margin-right:auto}
 
+
+/* --- Historial de temas --- */
+#history{flex:none;max-height:34%;display:flex;flex-direction:column;border-top:1px solid var(--border)}
+.hist-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 4px;
+  font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
+#hist-clear{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;padding:2px 4px;border-radius:6px}
+#hist-clear:hover{color:var(--text);background:var(--surface2)}
+#hist-list{overflow-y:auto;padding:0 8px 8px}
+.hist-item{padding:7px 10px;border-radius:8px;cursor:pointer}
+.hist-item:hover{background:var(--surface2)}
+.hist-topic{font-size:13.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.hist-meta{font-size:11.5px;color:var(--muted);margin-top:1px}
+.hist-empty{font-size:12px;color:var(--muted);font-style:italic;padding:6px 10px}
+
 @media (max-width:760px){
   #app{flex-direction:column;max-width:none}
   #sidebar{width:100%;flex:none;border-right:none;border-bottom:1px solid var(--border)}
@@ -171,6 +185,7 @@ footer a{color:var(--accent);text-decoration:none}
   .msg .avatar{width:32px;height:32px;font-size:16px}
   .msg .content{max-width:85%}
   #settings{margin:0 8px 8px}
+  #history{display:none}
 }
 </style>
 </head>
@@ -182,6 +197,10 @@ footer a{color:var(--accent);text-decoration:none}
       <span class="side-title">Agentes<span class="side-count" id="side-count">(3)</span></span>
     </div>
     <div id="contacts"></div>
+    <div id="history">
+      <div class="hist-header"><span>Temas debatidos</span><button id="hist-clear" title="Borrar historial">&#128465;</button></div>
+      <div id="hist-list"></div>
+    </div>
   </aside>
   <div id="main">
     <header>
@@ -269,7 +288,17 @@ const CONFIG = {
   autoload: params.get('autoload') !== 'false',
 };
 if (params.get('theme') === 'light') document.body.classList.add('light');
-let agents = DEFAULT_AGENTS;
+const AGENTS_KEY = 'mad_agents';
+function loadStoredAgents() {
+  try {
+    const a = JSON.parse(localStorage.getItem(AGENTS_KEY));
+    return (Array.isArray(a) && a.length >= 2 && a.every(x => x && x.name && x.system)) ? a : null;
+  } catch (e) { return null; }
+}
+function persistAgents() {
+  try { localStorage.setItem(AGENTS_KEY, JSON.stringify(agents)); } catch (e) {}
+}
+let agents = loadStoredAgents() || DEFAULT_AGENTS;
 if (params.get('agents')) {
   try { agents = JSON.parse(params.get('agents')); } catch (e) { console.warn('agents JSON inv\u00e1lido', e); }
 }
@@ -380,6 +409,7 @@ deleteBtn.addEventListener('click', () => {
   if (agents.length <= 2) { alert('Se necesitan al menos 2 agentes.'); return; }
   if (!confirm(`\u00bfEliminar a ${a.name} del debate?`)) return;
   agents.splice(editingAgent, 1);
+  persistAgents();
   renderContacts();
   agentModal.classList.remove('open');
   setStatus(`Agente eliminado: ${a.name}. Quedan ${agents.length}.`);
@@ -393,12 +423,63 @@ document.getElementById('agent-save').addEventListener('click', () => {
   if (!system) { alert('Describe las cualidades del agente.'); return; }
   if (editingAgent >= 0) agents[editingAgent] = { name, emoji, color, system };
   else agents.push({ name, emoji, color, system });
+  persistAgents();
   renderContacts();
   agentModal.classList.remove('open');
   setStatus(editingAgent >= 0 ? `Agente actualizado: ${name}.` : `Agente a\u00f1adido: ${name}. Ya son ${agents.length}.`);
 });
 
+
+// --- Historial de temas (localStorage) ---
+const HIST_KEY = 'mad_history';
+const histListEl = document.getElementById('hist-list');
+function loadHistory() {
+  try { return JSON.parse(localStorage.getItem(HIST_KEY)) || []; } catch (e) { return []; }
+}
+function saveHistory(h) {
+  try { localStorage.setItem(HIST_KEY, JSON.stringify(h.slice(0, 30))); } catch (e) {}
+}
+function renderHistory() {
+  const h = loadHistory();
+  histListEl.innerHTML = '';
+  if (!h.length) {
+    const e = document.createElement('div');
+    e.className = 'hist-empty';
+    e.textContent = 'Los temas que debatas se guardar\u00e1n aqu\u00ed, en este navegador.';
+    histListEl.appendChild(e);
+    return;
+  }
+  h.forEach(item => {
+    const d = document.createElement('div');
+    d.className = 'hist-item';
+    d.title = 'Reutilizar este tema';
+    const t = document.createElement('div');
+    t.className = 'hist-topic'; t.textContent = item.topic;
+    const m = document.createElement('div');
+    m.className = 'hist-meta';
+    m.textContent = new Date(item.ts).toLocaleString('es-ES', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' }) +
+      ' \u00b7 ' + item.agents + ' agentes';
+    d.appendChild(t); d.appendChild(m);
+    d.addEventListener('click', () => { topicEl.value = item.topic; topicEl.focus(); });
+    histListEl.appendChild(d);
+  });
+}
+function recordTopic(topicText) {
+  const h = loadHistory();
+  if (h[0] && h[0].topic === topicText) return;
+  h.unshift({ topic: topicText, ts: Date.now(), agents: agents.length });
+  saveHistory(h);
+  renderHistory();
+}
+document.getElementById('hist-clear').addEventListener('click', () => {
+  if (!loadHistory().length) return;
+  if (!confirm('\u00bfBorrar el historial de temas?')) return;
+  saveHistory([]);
+  renderHistory();
+});
+
 renderContacts();
+renderHistory();
 
 function addMsg(agent, isUser = false) {
   const d = document.createElement('div');
@@ -602,6 +683,7 @@ startBtn.addEventListener('click', () => {
     const m = addMsg(null, true);
     m.body.textContent = newTopic;
     transcript.push({ name: null, text: 'Tema propuesto: ' + newTopic });
+    recordTopic(newTopic);
   } else if (!topic) {
     topic = 'Tema libre';
   }
@@ -627,6 +709,7 @@ document.getElementById('apply-settings').addEventListener('click', async () =>
   try { agents = JSON.parse(document.getElementById('set-agents').value); }
   catch (e) { alert('JSON de agentes inv\u00e1lido: ' + e.message); return; }
   if (!Array.isArray(agents) || agents.length < 2) { alert('Se necesitan al menos 2 agentes.'); return; }
+  persistAgents();
   renderContacts();
   CONFIG.maxTokens = parseInt(document.getElementById('set-maxtokens').value) || CONFIG.maxTokens;
   CONFIG.temperature = parseFloat(document.getElementById('set-temp').value) || CONFIG.temperature;