Show long texts

static/index.html

@@ -317,6 +317,20 @@
   }
   .msg .text a { color: var(--hf-blue); text-decoration: none; }
   .msg .text a:hover { text-decoration: underline; }
+  .msg .see-more-btn {
+    display: inline-flex;
+    align-items: center;
+    margin-top: 6px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--hf-blue);
+    font: inherit;
+    font-size: 12.5px;
+    font-weight: 700;
+    cursor: pointer;
+  }
+  .msg .see-more-btn:hover { text-decoration: underline; }
 
   .new-best-pill {
     display: inline-flex;
@@ -1077,10 +1091,11 @@ curl -sL https://huggingface.co/buckets/ml-agent-explorers/efficient-optimizer-c
 const MESSAGES_URL = '/api/messages';
 const LEADERBOARD_URL = '/api/leaderboard';
 const POLL_MS = 30_000;
-const CACHE_KEY = 'efficient_optimizer_cache_v1';
+const CACHE_KEY = 'efficient_optimizer_cache_v2';
 const HANDLE_KEY = 'efficient_optimizer_human_handle';
 const FETCH_TIMEOUT_MS = 30_000;
 const HANDLE_RE = /^[A-Za-z0-9][A-Za-z0-9_.-]{0,31}$/;
+const MESSAGE_PREVIEW_CHARS = 520;
 
 // ─────────────────────────────────────────────────────────────
 //  STATE
@@ -1180,6 +1195,14 @@ function splitFirstAndRest(body) {
   return { headline, excerpt, rest: parts.slice((headline ? 1 : 0) + (excerpt ? 1 : 0)).join('\n\n') };
 }
 
+function truncatePreview(text) {
+  if (text.length <= MESSAGE_PREVIEW_CHARS) return { text, truncated: false };
+  const raw = text.slice(0, MESSAGE_PREVIEW_CHARS);
+  const lastBreak = Math.max(raw.lastIndexOf(' '), raw.lastIndexOf('\n'));
+  const clipped = lastBreak > MESSAGE_PREVIEW_CHARS * 0.65 ? raw.slice(0, lastBreak) : raw;
+  return { text: `${clipped.trimEnd()}...`, truncated: true };
+}
+
 function epochFromFilename(filename) {
   const m = FILENAME_RE.exec(filename);
   if (!m) return 0;
@@ -1212,7 +1235,8 @@ function parseMessage(filename, raw) {
   if (!body) return null;
   const fm = FILENAME_RE.exec(filename);
   const refs = Array.isArray(fields.refs) ? fields.refs : (fields.refs ? [fields.refs] : []);
-  const { headline, excerpt } = splitFirstAndRest(body);
+  const { headline, excerpt, rest } = splitFirstAndRest(body);
+  const preview = truncatePreview(excerpt || headline || body);
   return {
     filename,
     agent: (fields.agent || (fm && fm[3]) || 'unknown').trim(),
@@ -1220,8 +1244,11 @@ function parseMessage(filename, raw) {
     epoch: epochFromFilename(filename),
     refs: refs.filter(Boolean),
     headline,
-    excerpt,
-    excerptHtml: renderMarkdownInline(excerpt),
+    excerpt: preview.text,
+    excerptHtml: renderMarkdownInline(preview.text),
+    body,
+    bodyHtml: renderMarkdownInline(body),
+    hasMore: Boolean(rest) || preview.truncated,
     steps: findBestSteps(body),
   };
 }
@@ -1392,11 +1419,12 @@ function buildMentions(m) {
   });
   return [...set];
 }
-function buildText(m) {
+function buildText(m, { expanded = false } = {}) {
   const ms = buildMentions(m);
   const tags = ms.length ? ms.map(a => `<span class="mention">${escapeHtml(mentionLabel(a))}</span>`).join(' ') + ' ' : '';
+  const messageHtml = expanded && m.bodyHtml ? m.bodyHtml : (m.excerptHtml || escapeHtml(m.headline || ''));
   // Use plain text (one-line trim) joined with <br>s, lightly applying markdown for **bold** etc
-  return `${tags}${m.excerptHtml || escapeHtml(m.headline || '')}`;
+  return `${tags}${messageHtml}`;
 }
 function htmlToText(html) {
   const d = document.createElement('div');
@@ -1441,10 +1469,21 @@ function renderMessage(m, { animate = false, isImprovement = false } = {}) {
     <div class="body">
       <div class="head"><span class="name">${escapeHtml(displayAgentName(m.agent))}</span><span class="ts">${fmtTime(m.epoch)}</span></div>
       <div class="text">${buildText(m)}</div>
+      ${m.hasMore ? '<button type="button" class="see-more-btn" aria-expanded="false">See more</button>' : ''}
       ${pill}
       ${buildQuotes(m)}
     </div>
   `;
+  const moreBtn = node.querySelector('.see-more-btn');
+  if (moreBtn) {
+    const textEl = node.querySelector('.text');
+    moreBtn.addEventListener('click', () => {
+      const expanded = moreBtn.getAttribute('aria-expanded') !== 'true';
+      moreBtn.setAttribute('aria-expanded', String(expanded));
+      moreBtn.textContent = expanded ? 'See less' : 'See more';
+      textEl.innerHTML = buildText(m, { expanded });
+    });
+  }
   messagesEl.appendChild(node);
   return node;
 }