Update index.html

index.html

@@ -457,7 +457,15 @@ 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) {}
+  h = h.slice(0, 30);
+  for (let attempt = 0; attempt < 3; attempt++) {
+    try { localStorage.setItem(HIST_KEY, JSON.stringify(h)); return; } catch (e) {}
+    let trimmed = false;
+    h.forEach(it => (it.msgs || []).forEach(m => {
+      if (m.text.length > 800) { m.text = m.text.slice(0, 800); trimmed = true; }
+    }));
+    if (!trimmed) h.forEach(it => { delete it.msgs; delete it.ctx; delete it.sources; });
+  }
 }
 function renderHistory() {
   const h = loadHistory();
@@ -472,24 +480,76 @@ function renderHistory() {
   h.forEach(item => {
     const d = document.createElement('div');
     d.className = 'hist-item';
-    d.title = 'Reutilizar este tema';
+    d.title = (Array.isArray(item.msgs) && item.msgs.length) ? 'Recuperar esta conversaci\u00f3n' : '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';
+      ' \u00b7 ' + item.agents + ' agentes' +
+      ((Array.isArray(item.msgs) && item.msgs.length) ? ' \u00b7 ' + item.msgs.filter(x => x.name).length + ' interv.' : '');
     d.appendChild(t); d.appendChild(m);
-    d.addEventListener('click', () => { topicEl.value = item.topic; topicEl.focus(); });
+    d.addEventListener('click', () => {
+      if (running) return;
+      if (Array.isArray(item.msgs) && item.msgs.length) restoreConversation(item);
+      else { 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 });
+  if (h[0] && h[0].topic === topicText) {
+    h[0].ts = Date.now();
+    h[0].agents = agents.length;
+    saveHistory(h);
+    renderHistory();
+    return h[0].ts;
+  }
+  const ts = Date.now();
+  h.unshift({ topic: topicText, ts: ts, agents: agents.length });
   saveHistory(h);
   renderHistory();
+  return ts;
+}
+
+// --- Guardado y restauracion de la conversacion completa ---
+let currentHistId = null;
+function saveTranscriptToHistory() {
+  if (!currentHistId || !transcript.length) return;
+  const h = loadHistory();
+  const it = h.find(x => x.ts === currentHistId);
+  if (!it) return;
+  it.msgs = transcript.slice(-80).map(m => ({ name: m.name, text: String(m.text).slice(0, 4000) }));
+  it.agents = agents.length;
+  if (webContext) it.ctx = webContext; else delete it.ctx;
+  if (webSources.length) it.sources = webSources; else delete it.sources;
+  saveHistory(h);
+}
+window.addEventListener('beforeunload', saveTranscriptToHistory);
+
+function restoreConversation(item) {
+  saveTranscriptToHistory();
+  topic = item.topic;
+  topicEl.value = item.topic;
+  transcript = item.msgs.map(m => ({ name: m.name, text: m.text }));
+  chatEl.innerHTML = '';
+  resume = { round: 1, order: null, pos: 0 };
+  currentHistId = item.ts;
+  webContext = item.ctx || '';
+  webSources = Array.isArray(item.sources) ? item.sources : [];
+  const um = addMsg(null, true);
+  um.body.textContent = item.topic;
+  let n = 0;
+  transcript.forEach(m => {
+    if (!m.name) return;
+    n++;
+    const a = agents.find(x => x.name === m.name) || { name: m.name, emoji: '\u{1F916}', color: '#8b949e' };
+    const r = addMsg(a);
+    r.body.innerHTML = (typeof marked !== 'undefined') ? marked.parse(m.text) : esc(m.text).replace(/\n/g, '<br>');
+  });
+  if (webSources.length) renderSourcesMsg(webSources, []);
+  setStatus('Conversaci\u00f3n recuperada (' + n + ' intervenciones). Puedes continuar el debate.');
 }
 document.getElementById('hist-clear').addEventListener('click', () => {
   if (!loadHistory().length) return;
@@ -597,6 +657,31 @@ async function fetchWebContext(query) {
   return { sources: sources.slice(0, 6), failed: failed };
 }
 
+function renderSourcesMsg(sources, failed) {
+  addSys(b => {
+    const t = document.createElement('div');
+    t.textContent = '\u{1F4DA} Fuentes de este debate (los agentes pueden citarlas como [1], [2]\u2026):';
+    b.appendChild(t);
+    const ol = document.createElement('ol');
+    ol.style.margin = '6px 0 0 18px';
+    sources.forEach(s => {
+      const li = document.createElement('li');
+      const a = document.createElement('a');
+      if (/^https?:\/\//i.test(s.url)) { a.href = s.url; a.target = '_blank'; a.rel = 'noopener'; }
+      a.textContent = s.title;
+      li.appendChild(a);
+      ol.appendChild(li);
+    });
+    b.appendChild(ol);
+    if (failed && failed.length) {
+      const f = document.createElement('div');
+      f.style.marginTop = '4px';
+      f.textContent = '\u26a0\uFE0F ' + failed.join(' \u00b7 ');
+      b.appendChild(f);
+    }
+  });
+}
+
 async function prepareWebContext(q) {
   addSys(b => { b.textContent = '\u{1F50E} Buscando contexto web sobre \u00ab' + q + '\u00bb (solo se env\u00eda el tema a Tavily y Wikipedia)\u2026'; });
   let res;
@@ -606,28 +691,7 @@ async function prepareWebContext(q) {
   if (webSources.length) {
     webContext = webSources.map((s, i) => '[' + (i + 1) + '] ' + s.title + ' \u2014 ' + s.url + '\n' + s.snippet).join('\n');
     if (webContext.length > 1600) webContext = webContext.slice(0, 1600);
-    addSys(b => {
-      const t = document.createElement('div');
-      t.textContent = '\u{1F4DA} Fuentes para este debate (los agentes pueden citarlas como [1], [2]\u2026):';
-      b.appendChild(t);
-      const ol = document.createElement('ol');
-      ol.style.margin = '6px 0 0 18px';
-      webSources.forEach(s => {
-        const li = document.createElement('li');
-        const a = document.createElement('a');
-        if (/^https?:\/\//i.test(s.url)) { a.href = s.url; a.target = '_blank'; a.rel = 'noopener'; }
-        a.textContent = s.title;
-        li.appendChild(a);
-        ol.appendChild(li);
-      });
-      b.appendChild(ol);
-      if (res.failed.length) {
-        const f = document.createElement('div');
-        f.style.marginTop = '4px';
-        f.textContent = '\u26a0\uFE0F ' + res.failed.join(' \u00b7 ');
-        b.appendChild(f);
-      }
-    });
+    renderSourcesMsg(webSources, res.failed);
   } else {
     webContext = '';
     addSys(b => { b.textContent = '\u26a0\uFE0F B\u00fasqueda web sin resultados ahora (' + (res.failed.join(' \u00b7 ') || 'error') + '). El debate contin\u00faa sin contexto web.'; });
@@ -801,6 +865,7 @@ async function runDebate() {
     if (!stopRequested) resume = { round: 1, order: null, pos: 0 };
   } finally {
     running = false;
+    saveTranscriptToHistory();
     stopBtn.style.display = 'none';
     startBtn.style.display = 'inline-block';
     startBtn.textContent = 'Continuar debate';
@@ -815,6 +880,7 @@ startBtn.addEventListener('click', async () => {
   const newTopic = topicEl.value.trim();
   let freshTopic = false;
   if (newTopic && newTopic !== topic) {
+    saveTranscriptToHistory();
     topic = newTopic;
     transcript = [];
     chatEl.innerHTML = '';
@@ -824,7 +890,7 @@ startBtn.addEventListener('click', async () => {
     const m = addMsg(null, true);
     m.body.textContent = newTopic;
     transcript.push({ name: null, text: 'Tema propuesto: ' + newTopic });
-    recordTopic(newTopic);
+    currentHistId = recordTopic(newTopic);
     freshTopic = true;
   } else if (!topic) {
     topic = 'Tema libre';