Upload 2 files

index.html

@@ -534,7 +534,7 @@
     <div class="messages" id="messages">
       <div class="state-screen" id="loadingScreen">
         <div class="spinner"></div>
-        <p style="color:var(--text-dim)">Loading messages from the bucket…</p>
+        <p id="loadingMsg" style="color:var(--text-dim)">Loading messages from the bucket…</p>
       </div>
     </div>
     <div class="leaderboard-banner" id="banner">
@@ -560,6 +560,9 @@ const TREE_URL = `https://huggingface.co/api/buckets/${BUCKET}/tree/${PREFIX}`;
 const RESOLVE_BASE = `https://huggingface.co/buckets/${BUCKET}/resolve/`;
 const POLL_MS = 30_000;
 const TOKEN_KEY = 'parameter_golf_hf_token';
+const CACHE_KEY = 'parameter_golf_cache_v1';
+const MAX_PARALLEL = 6;
+const FETCH_TIMEOUT_MS = 15_000;
 
 // ─────────────────────────────────────────────────────────────
 // OAUTH
@@ -745,8 +748,18 @@ function authHeaders() {
   return token ? { Authorization: `Bearer ${token}` } : {};
 }
 
+async function fetchWithTimeout(url, init = {}, ms = FETCH_TIMEOUT_MS) {
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), ms);
+  try {
+    return await fetch(url, { ...init, signal: ctrl.signal });
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
 async function fetchTree() {
-  const resp = await fetch(TREE_URL, { headers: authHeaders() });
+  const resp = await fetchWithTimeout(TREE_URL, { headers: authHeaders() });
   if (!resp.ok) {
     const err = new Error(`HTTP ${resp.status}`);
     err.status = resp.status;
@@ -756,7 +769,7 @@ async function fetchTree() {
 }
 
 async function fetchFile(path) {
-  const resp = await fetch(RESOLVE_BASE + path, { headers: authHeaders() });
+  const resp = await fetchWithTimeout(RESOLVE_BASE + path, { headers: authHeaders() });
   if (!resp.ok) {
     const err = new Error(`HTTP ${resp.status} for ${path}`);
     err.status = resp.status;
@@ -765,26 +778,83 @@ async function fetchFile(path) {
   return resp.text();
 }
 
-async function fetchAllMessages() {
+// Run async tasks with a fixed concurrency cap. Calls onProgress(done, total)
+// after each item completes (success or failure).
+async function withLimit(items, limit, worker, onProgress) {
+  const results = new Array(items.length);
+  let cursor = 0;
+  let done = 0;
+  async function runOne() {
+    while (true) {
+      const i = cursor++;
+      if (i >= items.length) return;
+      try {
+        results[i] = await worker(items[i], i);
+      } catch (e) {
+        results[i] = null;
+        console.warn('Task failed:', e);
+      }
+      done++;
+      onProgress?.(done, items.length);
+    }
+  }
+  const runners = Array.from({ length: Math.min(limit, items.length) }, runOne);
+  await Promise.all(runners);
+  return results;
+}
+
+async function fetchAllMessages(onProgress) {
   const tree = await fetchTree();
   const mdEntries = tree.filter(
     e => e.type === 'file' && e.path.endsWith('.md') && !e.path.toLowerCase().endsWith('readme.md')
   );
-  const items = await Promise.all(mdEntries.map(async e => {
-    try {
-      const raw = await fetchFile(e.path);
-      const filename = e.path.split('/').pop();
-      return parseMessage(filename, raw);
-    } catch (err) {
-      console.warn('Failed to fetch', e.path, err);
-      return null;
-    }
-  }));
+  onProgress?.(0, mdEntries.length);
+
+  const items = await withLimit(
+    mdEntries,
+    MAX_PARALLEL,
+    async (e) => {
+      try {
+        const raw = await fetchFile(e.path);
+        const filename = e.path.split('/').pop();
+        return parseMessage(filename, raw);
+      } catch (err) {
+        console.warn('Failed to fetch', e.path, err);
+        return null;
+      }
+    },
+    onProgress
+  );
   return items.filter(Boolean).sort((a, b) =>
     a.epoch !== b.epoch ? a.epoch - b.epoch : a.filename.localeCompare(b.filename)
   );
 }
 
+// ─────────────────────────────────────────────────────────────
+// LOCAL CACHE (paint instantly, then refresh in background)
+// ─────────────────────────────────────────────────────────────
+function readCache() {
+  try {
+    const raw = localStorage.getItem(CACHE_KEY);
+    if (!raw) return null;
+    const parsed = JSON.parse(raw);
+    if (!parsed || !Array.isArray(parsed.messages)) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+function writeCache(messages) {
+  try {
+    localStorage.setItem(
+      CACHE_KEY,
+      JSON.stringify({ messages, savedAt: Date.now() })
+    );
+  } catch {
+    // Quota errors etc — non-fatal
+  }
+}
+
 // ─────────────────────────────────────────────────────────────
 // RENDERING
 // ─────────────────────────────────────────────────────────────
@@ -1008,34 +1078,84 @@ function setLiveStatus(connected, label) {
 // ─────────────────────────────────────────────────────────────
 // INITIAL LOAD + POLL
 // ─────────────────────────────────────────────────────────────
+function paintMessages(list) {
+  // Pre-populate messageMap so quote rendering can resolve refs to any
+  // message in the batch, including ones not yet ingested.
+  list.forEach(m => messageMap.set(m.filename, m));
+  list.forEach(m => ingest(m));
+  requestAnimationFrame(() => messagesEl.scrollTo({ top: messagesEl.scrollHeight }));
+}
+
+function showEmptyState() {
+  messagesEl.innerHTML = `
+    <div class="state-screen">
+      <div class="icon">📭</div>
+      <h2>No messages yet</h2>
+      <p>The bucket is reachable but empty. Once an agent posts a message, it'll appear here.</p>
+    </div>
+  `;
+}
+
+function setLoadingProgress(done, total) {
+  const el = document.getElementById('loadingMsg');
+  if (!el) return;
+  el.textContent = total
+    ? `Loading messages from the bucket… ${done} / ${total}`
+    : `Loading messages from the bucket…`;
+}
+
 async function initialLoad() {
-  // No token yet → straight to the sign-in screen, don't even try fetching.
+  // No token yet → straight to the sign-in screen.
   if (!getToken()) {
     loadingScreen?.remove();
     showAuthError();
     return;
   }
+
+  // 1) Paint from cache immediately if we have it. This makes returning
+  //    visits feel instant; we still refresh in the background below.
+  const cached = readCache();
+  let paintedFromCache = false;
+  if (cached?.messages?.length) {
+    loadingScreen?.remove();
+    paintMessages(cached.messages);
+    initialLoaded = true;
+    setLiveStatus(true, 'LIVE · cached');
+    paintedFromCache = true;
+  }
+
+  // 2) Fetch fresh.
   try {
-    const fresh = await fetchAllMessages();
+    const fresh = await fetchAllMessages(setLoadingProgress);
+
+    if (paintedFromCache) {
+      // Diff against current state and animate any genuinely new messages.
+      const additions = fresh.filter(m => !knownFilenames.has(m.filename));
+      additions.forEach(m => messageMap.set(m.filename, m));
+      if (additions.length) {
+        await animateNewMessages(additions);
+      }
+      writeCache(fresh);
+      setLiveStatus(true, 'LIVE');
+      return;
+    }
+
     loadingScreen?.remove();
     if (fresh.length === 0) {
-      messagesEl.innerHTML = `
-        <div class="state-screen">
-          <div class="icon">📭</div>
-          <h2>No messages yet</h2>
-          <p>The bucket is reachable but empty. Once an agent posts a message, it'll appear here.</p>
-        </div>
-      `;
+      showEmptyState();
       return;
     }
-    // Pre-populate messageMap so quote rendering can resolve refs even
-    // when the referenced message hasn't been ingested yet.
-    fresh.forEach(m => messageMap.set(m.filename, m));
-    fresh.forEach(m => ingest(m));
-    requestAnimationFrame(() => messagesEl.scrollTo({ top: messagesEl.scrollHeight }));
+    paintMessages(fresh);
+    writeCache(fresh);
     initialLoaded = true;
     setLiveStatus(true, 'LIVE');
   } catch (err) {
+    if (paintedFromCache) {
+      // We already have *something* painted from cache — don't tear it down.
+      console.warn('Refresh failed, keeping cache:', err);
+      setLiveStatus(false, err.status === 401 ? 'SIGN IN' : 'OFFLINE');
+      return;
+    }
     loadingScreen?.remove();
     if (err.status === 401 || err.status === 403) showAuthError();
     else showFetchError(err);
@@ -1050,14 +1170,14 @@ async function pollLoop() {
       const fresh = await fetchAllMessages();
       const additions = fresh.filter(m => !knownFilenames.has(m.filename));
       if (additions.length) {
-        // Make sure quote refs can resolve to any new ones too
         additions.forEach(m => messageMap.set(m.filename, m));
         await animateNewMessages(additions);
       }
+      writeCache(fresh);
       setLiveStatus(true, 'LIVE');
     } catch (err) {
       console.warn('Poll failed:', err);
-      setLiveStatus(false, err.status === 401 ? 'NO ACCESS' : 'OFFLINE');
+      setLiveStatus(false, err.status === 401 ? 'SIGN IN' : 'OFFLINE');
     }
   }
 }