ape-claw 0.1.0

package/ui/js/dashboard.js

@@ -0,0 +1,1766 @@
+window.addEventListener('error', (e) => { console.error('[ApeClaw] Uncaught error:', e.error); });
+window.addEventListener('unhandledrejection', (e) => { console.error('[ApeClaw] Unhandled rejection:', e.reason); });
+// ═══════════════════════════════════════════════════════════
+//  APECLAW — Full Dashboard
+//  Real-time event stream from ape-claw CLI telemetry.
+// ═══════════════════════════════════════════════════════════
+
+// Lightweight collage background to match the Stonk terminal feel.
+try {
+  const c = document.getElementById('bgCollage');
+  if (c && !c.hasChildNodes()) {
+    const N = 80;
+    for (let i = 0; i < N; i++) {
+      const img = document.createElement('img');
+      img.src = '/ui/favicon-lobster.png';
+      img.alt = '';
+      img.style.setProperty('--r', `${Math.round((Math.random() * 10 - 5) * 10) / 10}deg`);
+      c.appendChild(img);
+    }
+  }
+} catch {}
+
+const APESCAN_TX = 'https://apescan.io/tx/';
+const APESCAN_ADDR = 'https://apescan.io/address/';
+
+let COLLECTIONS = [];
+let REGISTERED_CLAWBOTS = [];
+let collectionsCarouselTimer = null;
+let API_BASE = '';
+const DEFAULT_SHARED_BACKEND = 'https://apeclaw.ai';
+let collectionQuery = '';
+let collectionSort = 'rank';
+let feedPaused = false;
+let terminalAutoScroll = true;
+let feedRawEvents = [];
+// De-dupe telemetry events: backlog + SSE can overlap.
+let feedKeys = [];
+const seenFeedKeys = new Set();
+const uiPrefs = {
+  theme: 'abyss',
+  dense: false,
+  focus: false,
+  motionLow: false,
+};
+function normalizeApiBase(raw) {
+  const v = String(raw || '').trim();
+  if (!v) return '';
+  try {
+    const u = new URL(v);
+    return u.origin;
+  } catch {
+    return '';
+  }
+}
+
+function initApiBase() {
+  const qp = new URLSearchParams(window.location.search).get('api');
+  if (qp) {
+    API_BASE = normalizeApiBase(qp);
+    return;
+  }
+  const runtime = normalizeApiBase(window.APECLAW_API_BASE || '');
+  const meta = normalizeApiBase(document.querySelector('meta[name="apeclaw-api-base"]')?.content || '');
+  if (runtime || meta) {
+    API_BASE = normalizeApiBase(runtime || meta);
+    return;
+  }
+  API_BASE = '';
+  try { localStorage.removeItem('apeclaw_api_base'); } catch {}
+}
+
+function apiUrl(routePath) {
+  if (!API_BASE) return routePath;
+  return `${API_BASE}${routePath}`;
+}
+
+function describeBackend() {
+  return API_BASE || window.location.origin;
+}
+function announce(msg) {
+  const el = document.getElementById('srStatus');
+  if (el) el.textContent = msg;
+}
+function downloadBlob(filename, content, mime = 'text/plain;charset=utf-8') {
+  const blob = new Blob([content], { type: mime });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
+function pushToast(message, type = 'success', ttlMs = 2600) {
+  const stack = document.getElementById('toastStack');
+  if (!stack) return;
+  const toast = document.createElement('div');
+  toast.className = `toast ${type}`;
+  toast.textContent = message;
+  stack.appendChild(toast);
+  setTimeout(() => toast.remove(), ttlMs);
+}
+function loadUiPrefs() {
+  try {
+    const raw = localStorage.getItem('apeclaw_ui_prefs');
+    if (!raw) return;
+    const parsed = JSON.parse(raw);
+    if (parsed && typeof parsed === 'object') Object.assign(uiPrefs, parsed);
+  } catch {}
+}
+function saveUiPrefs() {
+  try { localStorage.setItem('apeclaw_ui_prefs', JSON.stringify(uiPrefs)); } catch {}
+}
+function applyUiPrefs() {
+  document.body.classList.toggle('dense-ui', Boolean(uiPrefs.dense));
+  document.body.classList.toggle('focus-ui', Boolean(uiPrefs.focus));
+  document.body.classList.toggle('motion-low', Boolean(uiPrefs.motionLow));
+  document.body.classList.toggle('theme-daylight', uiPrefs.theme === 'daylight');
+  document.body.classList.toggle('theme-ember', uiPrefs.theme === 'ember');
+}
+
+
+const EMOJI_MAP = {
+  // ── Specific collection matches (checked first) ──
+  taur:'🐂',gator:'🐊',zard:'🦎',pupp:'🐶',chump:'🐵',
+  sloo:'🦥',boggy:'🐸',deng:'👾',mono:'🐒',undead:'🧟',
+  nekit:'🐱',doru:'🪆',pape:'🦍',jnky:'🗑️',dsnr:'🎨',
+  trench:'🍖',mull:'💈',box:'📦',bush:'🐒',
+  // ── Generic animal / theme matches ───────────────
+  tiger:'🐯',dog:'🐕',duck:'🦆',frog:'🐸',fox:'🦊',cat:'🐱',egg:'🥚',
+  punk:'💀',zombie:'🧟',gob:'👹',dragon:'🐉',robot:'🤖',bear:'🐻',monkey:'🐒',
+  skull:'💀',owl:'🦉',bat:'🦇',bull:'🐂',otter:'🦦',lobster:'🦞',star:'⭐',
+  kid:'👶',baby:'👶',doll:'🪆',bird:'🐦',cube:'🧊',dice:'🎲',sword:'⚔️',
+  stk:'🎭',
+  pixel:'🟩',pix:'🟩',glyph:'✨',night:'🌙',frost:'❄️',fire:'🔥',ice:'🧊',
+  balloon:'🎈',clown:'🤡',sock:'🧦',rilla:'🦍',
+  // ── "ape" last so it doesn't override tiger/trench/etc. via "on Ape" suffix ──
+  ape:'🦍',
+  default:'🖼️',
+};
+function emojiFor(name) {
+  const n = name.toLowerCase();
+  for (const [k,v] of Object.entries(EMOJI_MAP)) { if (n.includes(k)) return v; }
+  return EMOJI_MAP.default;
+}
+
+// ── Agent name registry
+const AGENT_DISPLAY_NAMES = { 'local-cli': 'The Clawllector' };
+function agentDisplayName(agentId) { return AGENT_DISPLAY_NAMES[agentId] || agentId; }
+
+// ── Dynamic agent tracking from real events
+const agentMap = new Map();
+function ensureAgent(agentId) {
+  if (!agentMap.has(agentId)) {
+    // Check if this is a registered clawbot
+    const reg = REGISTERED_CLAWBOTS.find(b => b.agentId === agentId);
+    agentMap.set(agentId, {
+      name: reg?.name || agentDisplayName(agentId),
+      id: agentId,
+      status: 'active',
+      nfts: 0, bridged: 0, spent: 0, events: 0,
+      lastSeen: Date.now(),
+      verified: Boolean(reg),
+      registered: Boolean(reg),
+    });
+    if (reg) AGENT_DISPLAY_NAMES[agentId] = reg.name;
+  }
+  const a = agentMap.get(agentId);
+  a.lastSeen = Date.now();
+  a.events++;
+  a.status = 'active';
+  return a;
+}
+
+let totalNfts = 0, totalBridged = 0, totalSpent = 0, totalEvents = 0;
+let collectedNfts = [], bridgeOps = [], feedItems = [], terminalLines = [];
+
+// ═══════════════════════════════════════════════════════════
+//  HELPERS
+// ═══════════════════════════════════════════════════════════
+function nowTime() {
+  const d = new Date();
+  return [d.getHours(),d.getMinutes(),d.getSeconds()].map(v=>String(v).padStart(2,'0')).join(':');
+}
+function evtTime(evt) {
+  if (!evt.ts) return nowTime();
+  const d = new Date(evt.ts);
+  return [d.getHours(),d.getMinutes(),d.getSeconds()].map(v=>String(v).padStart(2,'0')).join(':');
+}
+function shortAddr(addr) { return addr ? addr.slice(0,6)+'..'+addr.slice(-4) : ''; }
+function txLink(hash) {
+  if (!hash) return '';
+  return `<a class="tx-link" href="${APESCAN_TX}${encodeURIComponent(hash)}" target="_blank" rel="noopener" title="View on ApeScan">${shortAddr(hash)}</a>`;
+}
+function feedItem(time, icon, content) {
+  return `<div class="feed-item"><div class="feed-time">${time}</div><div class="feed-icon">${icon}</div><div class="feed-content"><div class="feed-action">${content}</div></div></div>`;
+}
+function escapeHtml(v) {
+  return String(v||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+function escapeAttr(v) {
+  return String(v||'').replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;');
+}
+function eventDedupeKey(evt) {
+  if (!evt || typeof evt !== 'object') return '';
+  // traceId is generated per event and is stable across backlog/SSE.
+  if (evt.traceId) return `trace:${evt.traceId}`;
+  // txHash is stable for confirmed on-chain events.
+  const tx = evt.result?.txHash || evt.result?.hash || evt.result?.transactionHash || null;
+  if (tx) return `tx:${String(tx)}|${String(evt.eventType||'')}|${String(evt.agentId||'')}`;
+  // Fallback: stable-ish composite (avoid heavy stringify unless needed).
+  return `ts:${String(evt.ts||'')}|${String(evt.eventType||'')}|${String(evt.agentId||'')}`;
+}
+function pushFeedEvent(evt, { trim = true } = {}) {
+  const k = eventDedupeKey(evt);
+  if (k && seenFeedKeys.has(k)) return false;
+
+  const html = processEvent(evt);
+  feedItems.push({ html, et: String(evt?.eventType || '') });
+  feedRawEvents.push(evt);
+  feedKeys.push(k || '');
+  if (k) seenFeedKeys.add(k);
+
+  if (trim) {
+    while (feedItems.length > 500) feedItems.shift();
+    while (feedRawEvents.length > 1000) {
+      feedRawEvents.shift();
+      const oldKey = feedKeys.shift();
+      if (oldKey) seenFeedKeys.delete(oldKey);
+    }
+    while (feedKeys.length > feedRawEvents.length) feedKeys.shift();
+  }
+  return true;
+}
+function collectionVisual(collection, size='chip') {
+  const img = collection?.imageUrl ? escapeAttr(collection.imageUrl) : '';
+  if (img) {
+    if (size==='nft') return `<img src="${img}" alt="${escapeAttr(collection?.name||'')}" loading="lazy" />`;
+    return `<img class="col-chip-icon" src="${img}" alt="${escapeAttr(collection?.name||'')}" loading="lazy" />`;
+  }
+  return `<span class="${size==='nft'?'':'col-chip-emoji'}">${collection?.emoji||'🖼️'}</span>`;
+}
+function timeSince(ts) {
+  const sec = Math.floor((Date.now()-ts)/1000);
+  if (sec<60) return 'just now';
+  if (sec<3600) return Math.floor(sec/60)+'m ago';
+  if (sec<86400) return Math.floor(sec/3600)+'h ago';
+  return Math.floor(sec/86400)+'d ago';
+}
+
+// ── Setup toggle
+function toggleSetup() {
+  const header = document.getElementById('setupToggle');
+  const body = document.getElementById('setupBody');
+  header.classList.toggle('open');
+  body.classList.toggle('open');
+}
+
+function renderBackendStatus() {
+  const status = document.getElementById('backendUrlStatus');
+  if (!status) return;
+  status.textContent = `Using backend: ${describeBackend()}`;
+}
+
+function initBackendConfigUi() {
+  renderBackendStatus();
+}
+
+async function ensureBackendReachableWithFallback() {
+  renderBackendStatus();
+  async function probe(url) {
+    const timeoutMs = 3000;
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeoutMs);
+    try {
+      const r = await fetch(url, { signal: controller.signal, cache: 'no-store' });
+      return r.ok;
+    } catch {
+      return false;
+    } finally {
+      clearTimeout(timer);
+    }
+  }
+
+  const sameOriginOk = await probe('/api/health');
+  if (sameOriginOk) {
+    API_BASE = '';
+    renderBackendStatus();
+    return;
+  }
+
+  const sharedOk = await probe(DEFAULT_SHARED_BACKEND + '/api/health');
+  if (sharedOk) {
+    API_BASE = DEFAULT_SHARED_BACKEND;
+    renderBackendStatus();
+    terminalLines.push({ type: 'output', text: `[Config] Using shared backend: ${DEFAULT_SHARED_BACKEND}` });
+    return;
+  }
+
+  API_BASE = '';
+  renderBackendStatus();
+  terminalLines.push({ type: 'error', text: '[Config] No live backend detected. Using static API data.' });
+  announce('No reachable backend detected');
+}
+
+function initSetupEnhancements() {
+  // Setup mode toggles (Quick Start vs Pod + v2)
+  function applySetupMode(mode) {
+    const m = (mode === 'pod') ? 'pod' : 'quick';
+    try { localStorage.setItem('apeclaw_setup_mode', m); } catch {}
+    const quickBtn = document.getElementById('setupModeQuickBtn');
+    const podBtn = document.getElementById('setupModePodBtn');
+    if (quickBtn) {
+      quickBtn.classList.toggle('active', m === 'quick');
+      quickBtn.setAttribute('aria-selected', m === 'quick' ? 'true' : 'false');
+    }
+    if (podBtn) {
+      podBtn.classList.toggle('active', m === 'pod');
+      podBtn.setAttribute('aria-selected', m === 'pod' ? 'true' : 'false');
+    }
+    document.querySelectorAll('.setup-step').forEach((step) => {
+      const sm = step.getAttribute('data-setup-mode') || 'quick';
+      step.style.display = (sm === m) ? '' : 'none';
+    });
+  }
+  const quickBtn = document.getElementById('setupModeQuickBtn');
+  const podBtn = document.getElementById('setupModePodBtn');
+  if (quickBtn && podBtn) {
+    quickBtn.addEventListener('click', () => applySetupMode('quick'));
+    podBtn.addEventListener('click', () => applySetupMode('pod'));
+    let initial = 'quick';
+    try { initial = localStorage.getItem('apeclaw_setup_mode') || 'quick'; } catch {}
+    applySetupMode(initial);
+  }
+
+  document.querySelectorAll('.setup-step').forEach((step, idx) => {
+    const title = step.querySelector('h3');
+    if (title && !step.querySelector('.setup-check')) {
+      const cb = document.createElement('input');
+      cb.type = 'checkbox';
+      cb.className = 'setup-check';
+      cb.style.marginRight = '6px';
+      const key = `apeclaw_setup_step_${idx}`;
+      try { cb.checked = localStorage.getItem(key) === '1'; } catch {}
+      cb.addEventListener('change', () => {
+        try { localStorage.setItem(key, cb.checked ? '1' : '0'); } catch {}
+        announce(`Setup step ${idx + 1} ${cb.checked ? 'completed' : 'unchecked'}`);
+      });
+      title.prepend(cb);
+    }
+  });
+
+  document.querySelectorAll('.setup-step pre').forEach((pre) => {
+    if (pre.nextElementSibling && pre.nextElementSibling.classList?.contains('copy-code-btn')) return;
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'copy-code-btn';
+    btn.textContent = 'Copy command';
+    btn.addEventListener('click', async () => {
+      const txt = pre.textContent || '';
+      try {
+        await navigator.clipboard.writeText(txt);
+        btn.textContent = 'Copied';
+        announce('Command copied');
+        setTimeout(() => { btn.textContent = 'Copy command'; }, 1200);
+      } catch {
+        btn.textContent = 'Copy failed';
+        setTimeout(() => { btn.textContent = 'Copy command'; }, 1200);
+      }
+    });
+    pre.insertAdjacentElement('afterend', btn);
+  });
+}
+
+function initCollectionControls() {
+  const search = document.getElementById('collectionsSearch');
+  const sort = document.getElementById('collectionsSort');
+  const clearBtn = document.getElementById('collectionsClearBtn');
+  if (!search || !sort) return;
+  function applyQueryFromUi() {
+    collectionQuery = (search.value || '').toLowerCase().trim();
+    if (clearBtn) clearBtn.disabled = !collectionQuery;
+    renderCollectionsBar();
+  }
+  search.addEventListener('input', applyQueryFromUi);
+  search.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      search.value = '';
+      applyQueryFromUi();
+      search.blur();
+    }
+  });
+  if (clearBtn) clearBtn.addEventListener('click', () => {
+    search.value = '';
+    applyQueryFromUi();
+    search.focus();
+  });
+  sort.addEventListener('change', () => { collectionSort = sort.value; renderCollectionsBar(); });
+  applyQueryFromUi();
+}
+
+function initPanelControls() {
+  const feedPauseBtn = document.getElementById('feedPauseBtn');
+  const feedClearBtn = document.getElementById('feedClearBtn');
+  const feedExportBtn = document.getElementById('feedExportBtn');
+  const terminalClearBtn = document.getElementById('terminalClearBtn');
+  const terminalExportBtn = document.getElementById('terminalExportBtn');
+  const terminalAutoBtn = document.getElementById('terminalAutoBtn');
+  const chatReconnectBtn = document.getElementById('chatReconnectBtn');
+  const chatExportBtn = document.getElementById('chatExportBtn');
+  const feedFilterSel = document.getElementById('feedFilterSel');
+  const agentFilterInput = document.getElementById('agentFilterInput');
+  const agentStatusSel = document.getElementById('agentStatusSel');
+
+  if (feedFilterSel) {
+    // Allow URL override: ?feed=v2 or ?filter=receipts (useful for sharing).
+    let initial = '';
+    try {
+      const u = new URL(window.location.href);
+      initial = (u.searchParams.get('feed') || u.searchParams.get('filter') || '').trim().toLowerCase();
+    } catch {}
+    if (!initial) {
+      try { initial = localStorage.getItem('apeclaw_feed_filter') || 'all'; } catch {}
+    }
+    feedFilterSel.value = initial || 'all';
+    feedFilterSel.addEventListener('change', () => {
+      try { localStorage.setItem('apeclaw_feed_filter', feedFilterSel.value); } catch {}
+      renderFeed();
+    });
+  }
+  if (agentFilterInput) agentFilterInput.addEventListener('input', () => renderAgents());
+  if (agentStatusSel) agentStatusSel.addEventListener('change', () => renderAgents());
+
+  if (feedPauseBtn) feedPauseBtn.addEventListener('click', () => {
+    feedPaused = !feedPaused;
+    feedPauseBtn.textContent = feedPaused ? 'Resume' : 'Pause';
+    if (!feedPaused) renderFeed();
+  });
+  if (feedClearBtn) feedClearBtn.addEventListener('click', () => {
+    feedItems = [];
+    feedRawEvents = [];
+    feedKeys = [];
+    seenFeedKeys.clear();
+    renderFeed();
+  });
+  if (feedExportBtn) feedExportBtn.addEventListener('click', () => {
+    downloadBlob(`apeclaw-feed-${Date.now()}.json`, JSON.stringify(feedRawEvents.slice(-1000), null, 2), 'application/json');
+  });
+  if (terminalClearBtn) terminalClearBtn.addEventListener('click', () => { terminalLines = []; renderTerminal(); });
+  if (terminalExportBtn) terminalExportBtn.addEventListener('click', () => {
+    const text = terminalLines.map((l) => l.text).join('\n');
+    downloadBlob(`apeclaw-terminal-${Date.now()}.log`, text);
+  });
+  if (terminalAutoBtn) terminalAutoBtn.addEventListener('click', () => {
+    terminalAutoScroll = !terminalAutoScroll;
+    terminalAutoBtn.textContent = `Auto-scroll: ${terminalAutoScroll ? 'On' : 'Off'}`;
+  });
+  if (chatReconnectBtn) chatReconnectBtn.addEventListener('click', () => connectChatStream());
+  if (chatExportBtn) chatExportBtn.addEventListener('click', () => {
+    downloadBlob(`apeclaw-chat-${Date.now()}.json`, JSON.stringify(chatMessages, null, 2), 'application/json');
+  });
+}
+
+function initShortcutsPopover() {
+  const btn = document.getElementById('shortcutsBtn');
+  const panel = document.getElementById('shortcutsPanel');
+  if (!btn || !panel) return;
+  const close = () => panel.classList.remove('open');
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    panel.classList.toggle('open');
+  });
+  panel.addEventListener('click', (e) => e.stopPropagation());
+  document.addEventListener('click', close);
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') close();
+  });
+}
+
+function initCommandDeck() {
+  const sel = document.getElementById('themePresetSel');
+  const resetBtn = document.getElementById('themeResetBtn');
+  const denseBtn = document.getElementById('toggleDenseBtn');
+  const focusBtn = document.getElementById('toggleFocusBtn');
+  const motionBtn = document.getElementById('toggleMotionBtn');
+  if (sel) {
+    sel.value = uiPrefs.theme;
+    sel.addEventListener('change', () => {
+      uiPrefs.theme = sel.value || 'abyss';
+      applyUiPrefs(); saveUiPrefs();
+      pushToast(`Theme: ${uiPrefs.theme}`, 'success');
+    });
+  }
+  if (resetBtn) resetBtn.addEventListener('click', () => {
+    uiPrefs.theme = 'abyss'; uiPrefs.dense = false; uiPrefs.focus = false; uiPrefs.motionLow = false;
+    if (sel) sel.value = 'abyss';
+    applyUiPrefs(); saveUiPrefs();
+    pushToast('Display reset', 'success');
+  });
+  if (denseBtn) denseBtn.addEventListener('click', () => {
+    uiPrefs.dense = !uiPrefs.dense; applyUiPrefs(); saveUiPrefs();
+  });
+  if (focusBtn) focusBtn.addEventListener('click', () => {
+    uiPrefs.focus = !uiPrefs.focus; applyUiPrefs(); saveUiPrefs();
+  });
+  if (motionBtn) motionBtn.addEventListener('click', () => {
+    uiPrefs.motionLow = !uiPrefs.motionLow; applyUiPrefs(); saveUiPrefs();
+  });
+}
+
+
+// ═══════════════════════════════════════════════════════════
+//  RENDER
+// ═══════════════════════════════════════════════════════════
+function renderCollectionsBar() {
+  const el = document.getElementById('collectionsBar');
+  const status = document.getElementById('collectionsStatus');
+  let visible = [...COLLECTIONS];
+  if (collectionQuery) {
+    visible = visible.filter((c) => `${c.name||''} ${c.slug||''} ${c.contractAddress||''}`.toLowerCase().includes(collectionQuery));
+  }
+  if (collectionSort === 'name') visible.sort((a, b) => String(a.name||'').localeCompare(String(b.name||'')));
+  else visible.sort((a, b) => Number(a.rank||999999) - Number(b.rank||999999));
+
+  if (visible.length === 0) {
+    const msg = COLLECTIONS.length === 0 ? 'Loading collections...' : 'No collections match current filters.';
+    el.innerHTML = `<div style="color:var(--dim);font-size:.72rem;padding:8px">${msg}</div>`;
+    if (status) status.textContent = COLLECTIONS.length === 0 ? '0 loaded' : 'No matches';
+    return;
+  }
+  el.innerHTML = visible.map(c =>
+    `<div class="col-chip" title="${c.contractAddress ? shortAddr(c.contractAddress) : 'no CA'}">
+      ${collectionVisual(c,'chip')}
+      <div>
+        <div class="col-chip-name">${escapeHtml(c.name)}</div>
+      </div>
+      <div class="col-chip-vol">${c.contractAddress ? '✓ CA' : '⚠ No CA'}</div>
+    </div>`
+  ).join('');
+  if (status) status.textContent = `${visible.length}/${COLLECTIONS.length} shown`;
+  updateCollectionsStatus();
+  startCollectionsCarousel();
+}
+
+function scrollCollectionsBy(direction = 1) {
+  const el = document.getElementById('collectionsBar');
+  if (!el) return;
+  const amount = Math.max(240, Math.floor(el.clientWidth * 0.8));
+  el.scrollBy({ left: direction * amount, behavior: 'smooth' });
+  setTimeout(updateCollectionsStatus, 250);
+}
+
+function updateCollectionsStatus() {
+  const el = document.getElementById('collectionsBar');
+  const status = document.getElementById('collectionsStatus');
+  if (!el || !status) return;
+  const total = el.querySelectorAll('.col-chip').length;
+  if (total === 0) {
+    status.textContent = COLLECTIONS.length === 0 ? '0 loaded' : 'No matches';
+    return;
+  }
+  if (el.scrollWidth <= el.clientWidth + 4) {
+    status.textContent = `${total}/${COLLECTIONS.length} shown`;
+    return;
+  }
+  const progress = Math.min(100, Math.max(0, Math.round((el.scrollLeft / (el.scrollWidth - el.clientWidth)) * 100)));
+  status.textContent = `${total}/${COLLECTIONS.length} shown • ${progress}% viewed`;
+}
+
+function startCollectionsCarousel() {
+  const el = document.getElementById('collectionsBar');
+  if (!el) return;
+  if (collectionsCarouselTimer) clearInterval(collectionsCarouselTimer);
+  if (el.scrollWidth <= el.clientWidth + 4) return;
+  collectionsCarouselTimer = setInterval(() => {
+    if (document.hidden) return;
+    const maxLeft = el.scrollWidth - el.clientWidth;
+    if (el.scrollLeft >= maxLeft - 4) {
+      el.scrollTo({ left: 0, behavior: 'smooth' });
+    } else {
+      scrollCollectionsBy(1);
+    }
+  }, 5000);
+}
+
+function renderAgents() {
+  const el = document.getElementById('agentsGrid');
+  const q = (document.getElementById('agentFilterInput')?.value || '').toLowerCase().trim();
+  const statusSel = (document.getElementById('agentStatusSel')?.value || 'all').toLowerCase().trim();
+
+  // Merge registered clawbots that haven't sent events yet
+  for (const reg of REGISTERED_CLAWBOTS) {
+    if (!agentMap.has(reg.agentId)) {
+      agentMap.set(reg.agentId, {
+        name: reg.name || reg.agentId,
+        id: reg.agentId,
+        status: 'offline',
+        nfts: 0, bridged: 0, spent: 0, events: 0,
+        lastSeen: reg.createdAt ? new Date(reg.createdAt).getTime() : 0,
+        verified: true,
+        registered: true,
+      });
+    }
+  }
+
+  if (agentMap.size === 0) {
+    el.innerHTML = `<div style="grid-column:1/-1;color:var(--dim);font-size:.78rem;text-align:center;padding:24px">
+      <div style="font-size:2.5rem;margin-bottom:8px">🦞</div>
+      <div>No Clawllectors registered yet</div>
+      <div style="font-size:.68rem;margin-top:6px">Set up your <a href="https://openclaw.ai" target="_blank" rel="noopener">OpenClaw</a> agent, then register a Clawllector:</div>
+      <div style="margin-top:8px"><code>npx --yes github:simplefarmer69/ape-claw clawbot register --agent-id my-clawllector --json</code></div>
+    </div>`;
+    return;
+  }
+  const now = Date.now();
+  for (const a of agentMap.values()) {
+    if (a.events === 0) a.status = 'offline';
+    else if (now - a.lastSeen > 300_000) a.status = 'offline';
+    else if (now - a.lastSeen > 60_000) a.status = 'idle';
+    else a.status = 'active';
+  }
+  const sorted = [...agentMap.values()].sort((a,b) => {
+    const statusOrder = {active:0,idle:1,offline:2};
+    const diff = (statusOrder[a.status]||9) - (statusOrder[b.status]||9);
+    if (diff !== 0) return diff;
+    return b.lastSeen - a.lastSeen;
+  });
+  const filtered = sorted.filter((a) => {
+    if (statusSel !== 'all' && a.status !== statusSel) return false;
+    if (!q) return true;
+    return String(a.name || '').toLowerCase().includes(q) || String(a.id || '').toLowerCase().includes(q);
+  });
+  el.innerHTML = filtered.map(a => {
+    const badge = a.verified ? '<span class="verified-badge">Clawllector</span>' : '';
+    const cardClass = a.verified ? 'agent-card verified-card' : 'agent-card';
+    return `<div class="${cardClass}">
+      <div class="agent-name">🦞 ${escapeHtml(a.name)} ${badge}</div>
+      <div class="agent-id">${escapeHtml(a.id)}</div>
+      <div class="agent-status"><span class="dot ${a.status}"></span> ${a.status} ${a.lastSeen > 0 ? '&bull; '+timeSince(a.lastSeen) : ''}</div>
+      <div class="agent-stat-row"><span>Events</span><span>${a.events.toLocaleString()}</span></div>
+      <div class="agent-stat-row"><span>NFTs</span><span>${a.nfts}</span></div>
+      <div class="agent-stat-row"><span>Bridged</span><span>${a.bridged.toLocaleString()} APE</span></div>
+      <div class="agent-stat-row"><span>Spent</span><span>${a.spent.toLocaleString()} APE</span></div>
+    </div>`;
+  }).join('');
+}
+
+function renderNftGrid() {
+  const el = document.getElementById('nftGrid');
+  if (collectedNfts.length === 0) {
+    el.innerHTML = `<div style="grid-column:1/-1;color:var(--dim);font-size:.78rem;text-align:center;padding:24px">
+      <div style="font-size:2rem;margin-bottom:6px">🖼️</div>
+      No NFTs collected yet.<br>Purchases from <code>npx --yes github:simplefarmer69/ape-claw nft buy --execute</code> appear here in real time.
+    </div>`;
+    return;
+  }
+  el.innerHTML = collectedNfts.map(n => {
+    const txHtml = n.txHash
+      ? `<div class="nft-tx"><a href="${APESCAN_TX}${encodeURIComponent(n.txHash)}" target="_blank" rel="noopener">${shortAddr(n.txHash)}</a></div>`
+      : '';
+    return `<div class="nft-card">
+      <div class="nft-img"><div class="nft-bg"></div>${collectionVisual(n.collection,'nft')}</div>
+      <div class="nft-info">
+        <div class="nft-collection">${escapeHtml(n.collection.name)}</div>
+        <div class="nft-name">#${escapeHtml(n.tokenId)}</div>
+        <div class="nft-price">${escapeHtml(n.price)} APE</div>
+        <div class="nft-agent">by ${escapeHtml(n.agent)} &bull; ${n.time}</div>
+        ${txHtml}
+      </div>
+    </div>`;
+  }).join('');
+}
+
+function renderBridge() {
+  const el = document.getElementById('bridgePanel');
+  if (bridgeOps.length === 0) {
+    el.innerHTML = `<div style="color:var(--dim);font-size:.75rem;padding:12px">
+      <div style="font-size:1.5rem;margin-bottom:4px">🌉</div>
+      No bridge operations yet.<br>Bridge executions from <code>npx --yes github:simplefarmer69/ape-claw bridge execute</code> appear here.
+    </div>`;
+    return;
+  }
+  el.innerHTML = bridgeOps.map(b => {
+    const txHtml = b.txHash ? ` <a class="tx-link" href="${APESCAN_TX}${encodeURIComponent(b.txHash)}" target="_blank" rel="noopener">${shortAddr(b.txHash)}</a>` : '';
+    return `<div class="bridge-item">
+      <div class="bridge-route">${escapeHtml(b.from)} <span class="bridge-arrow">→</span> ${escapeHtml(b.to)}</div>
+      <div style="font-size:.65rem;color:var(--dim)">${b.fee ? `fee ${b.fee} APE &bull; ` : ''}${escapeHtml(b.agent)}${txHtml}</div>
+      <div class="bridge-amount">${escapeHtml(b.amount)}</div>
+      <span class="bridge-status-tag ${b.status}">${b.status}</span>
+    </div>`;
+  }).join('');
+}
+
+function renderFeed() {
+  const el = document.getElementById('activityFeed');
+  const filter = (document.getElementById('feedFilterSel')?.value || 'all').toLowerCase().trim();
+  function categoryForEventType(et) {
+    const t = String(et || '');
+    if (!t) return 'other';
+    if (t.startsWith('v2.receipt.') || t.includes('receipt')) return 'receipts';
+    if (t.startsWith('nft.') || t.includes('nft')) return 'nft';
+    if (t.startsWith('bridge.') || t.includes('bridge')) return 'bridge';
+    if (t.startsWith('chat.') || t.includes('chat')) return 'chat';
+    if (t.startsWith('policy.')) return 'policy';
+    if (t.startsWith('v2.')) return 'v2';
+    return 'other';
+  }
+  const pausedBanner = feedPaused
+    ? `<div style="font-size:.66rem;color:var(--gold);margin-bottom:8px">Feed paused — live events continue in background.</div>`
+    : '';
+  if (feedItems.length === 0) {
+    el.innerHTML = `${pausedBanner}<div style="color:var(--dim);font-size:.78rem;text-align:center;padding:24px">
+      <div style="font-size:2rem;margin-bottom:6px">📡</div>
+      Listening for events&hellip;<br>Run any <code>ape-claw</code> command to see live activity.
+    </div>`;
+    return;
+  }
+  const visible = (filter === 'all')
+    ? feedItems
+    : feedItems.filter((f) => {
+      const c = categoryForEventType(f.et);
+      if (filter === 'v2') return c === 'v2' || c === 'receipts';
+      return c === filter;
+    });
+  const note = (filter !== 'all')
+    ? `<div style="font-size:.66rem;color:var(--dim);margin-bottom:8px">Filter: <code>${escapeHtml(filter)}</code> • showing ${visible.length}/${feedItems.length}</div>`
+    : '';
+  el.innerHTML = pausedBanner + note + visible.slice(-100).reverse().map(f => f.html).join('');
+}
+
+function renderTerminal() {
+  const el = document.getElementById('terminalBody');
+  if (terminalLines.length === 0) {
+    el.innerHTML = '<div class="t-output">Waiting for CLI events...</div>';
+    return;
+  }
+  el.innerHTML = terminalLines.map(l => {
+    if (l.type==='prompt') return `<div><span class="t-prompt">❯</span> <span class="t-cmd">${l.text}</span></div>`;
+    if (l.type==='accent') return `<div class="t-accent">${l.text}</div>`;
+    if (l.type==='success') return `<div class="t-success">${l.text}</div>`;
+    if (l.type==='error') return `<div class="t-error">${l.text}</div>`;
+    return `<div class="t-output">${l.text}</div>`;
+  }).join('');
+  if (terminalAutoScroll) el.scrollTop = el.scrollHeight;
+}
+
+function updateStats() {
+  const activeCount = [...agentMap.values()].filter(a => a.status==='active').length;
+  const totalCount = agentMap.size;
+  const clawbotCount = Math.max(totalCount, REGISTERED_CLAWBOTS.length, 10);
+  const setIf = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+  setIf('totalAgents', activeCount + '/' + totalCount);
+  setIf('totalEvents', totalEvents.toLocaleString());
+  setIf('totalNfts', totalNfts);
+  setIf('totalBridged', Math.round(totalBridged).toLocaleString());
+  setIf('totalSpent', Math.round(totalSpent).toLocaleString());
+  setIf('agentCountBadge', totalCount);
+  setIf('eventCountBadge', totalEvents.toLocaleString());
+  setIf('nftCountBadge', totalNfts);
+  setIf('bridgeCountBadge', bridgeOps.length);
+  setIf('psAgentCount', clawbotCount.toLocaleString());
+  setIf('psEventCount', totalEvents.toLocaleString());
+  setIf('psNftCount', totalNfts);
+  setIf('psBridgeCount', bridgeOps.length);
+}
+
+function setConnectionStatus(connected) {
+  const dot = document.getElementById('connectionDot');
+  const label = document.getElementById('connectionLabel');
+  if (connected) {
+    dot.className = 'connection-dot connected';
+    label.textContent = 'Live';
+  } else {
+    dot.className = 'connection-dot disconnected';
+    label.textContent = 'Offline';
+  }
+}
+
+// ═══════════════════════════════════════════════════════════
+//  EVENT-TO-UI MAPPER
+// ═══════════════════════════════════════════════════════════
+function findCollection(input) {
+  const s = String(input||'').toLowerCase();
+  return COLLECTIONS.find(c =>
+    c.name.toLowerCase()===s || c.slug===s || (c.contractAddress && c.contractAddress.toLowerCase()===s)
+  ) || { name:input||'unknown', emoji:'🖼️', slug:'', imageUrl:null };
+}
+
+function processEvent(evt) {
+  const t = evtTime(evt);
+  const et = evt.eventType || 'unknown';
+  const cmd = evt.command || 'ape-claw';
+  const rawId = evt.agentId || 'local-cli';
+  const ag = agentDisplayName(rawId);
+  const payload = evt.payload || {};
+  const result = evt.result || {};
+
+  const agent = ensureAgent(rawId);
+  totalEvents++;
+
+  // ── NFT buy confirmed
+  if (et === 'nft.buy.executed' || et === 'nft.buy.confirmed') {
+    const q = result.quote || {};
+    const col = findCollection(q.collection || payload.collection);
+    const tid = q.tokenId || payload.tokenId || '?';
+    const price = q.priceApe ?? payload.priceApe ?? payload.maxPrice ?? 0;
+    const tx = result.txHash || '';
+    collectedNfts.unshift({ collection:col, tokenId:String(tid), price:String(price), agent:ag, time:t, txHash:tx });
+    if (collectedNfts.length>50) collectedNfts.pop();
+    totalNfts++; totalSpent += Number(price)||0;
+    agent.nfts++; agent.spent += Number(price)||0;
+    renderNftGrid();
+    return feedItem(t,'🦞',`<strong>${escapeHtml(ag)}</strong> purchased <span class="collection-tag">${escapeHtml(col.name)}</span> #${escapeHtml(tid)} for <span class="price">${price} APE</span> ${txLink(tx)}`);
+  }
+  // ── NFT buy dry-run
+  if (et === 'nft.buy.dry_run') {
+    return feedItem(t,'🔒',`<strong>${escapeHtml(ag)}</strong> dry-run buy &mdash; no broadcast (pass --execute to send)`);
+  }
+  // ── NFT quote created
+  if (et === 'nft.quote.created') {
+    const col = findCollection(result.collection || payload.collection);
+    const tid = result.tokenId || payload.tokenId || '?';
+    const price = result.priceApe ?? payload.maxPrice ?? '?';
+    const qid = result.quoteId || '';
+    return feedItem(t,'💰',`<strong>${escapeHtml(ag)}</strong> quoted <span class="collection-tag">${escapeHtml(col.name)}</span> #${escapeHtml(tid)} at <span class="price">${price} APE</span> <span class="hash">${escapeHtml(qid)}</span>`);
+  }
+  // ── NFT simulation
+  if (et === 'nft.simulation.passed') {
+    return feedItem(t,'✅',`<strong>${escapeHtml(ag)}</strong> simulation passed <span class="hash">${escapeHtml(result.quoteId||'')}</span>`);
+  }
+  if (et === 'nft.simulation.failed') {
+    return feedItem(t,'❌',`<strong>${escapeHtml(ag)}</strong> simulation failed: ${escapeHtml(result.reason||'unknown')}`);
+  }
+  // ── Market
+  if (et === 'market.collections.read') {
+    return feedItem(t,'📋',`<strong>${escapeHtml(ag)}</strong> loaded ${result.count??COLLECTIONS.length} collections (${escapeHtml(result.source||'allowlist')})`);
+  }
+  if (et === 'market.listings.read') {
+    return feedItem(t,'🔍',`<strong>${escapeHtml(ag)}</strong> found ${result.count??0} listings for <code>${escapeHtml(cmd)}</code>`);
+  }
+  if (et === 'market.listings.failed') {
+    return feedItem(t,'⚠️',`<strong>${escapeHtml(ag)}</strong> listings failed: ${escapeHtml(evt.error||'error')}`);
+  }
+  // ── Bridge
+  if (et === 'bridge.quote.created') {
+    const from = result.from || payload.from || '?';
+    const amt = result.amount ?? payload.amount ?? '?';
+    return feedItem(t,'🌉',`<strong>${escapeHtml(ag)}</strong> bridge quote: <span class="price">${amt} APE</span> from ${escapeHtml(from)} → ApeChain`);
+  }
+  if (et === 'bridge.execute.confirmed') {
+    const amt = result.amount ?? 0;
+    const from = result.from ?? payload.from ?? 'unknown';
+    const fee = result.feeBps ? (Number(amt)*(result.feeBps/10000)).toFixed(2) : null;
+    const tx = result.txHash || result.sourceTxHash || '';
+    bridgeOps.unshift({ from, to:'ApeChain', amount:`${amt} APE`, status:'completed', agent:ag, fee, txHash:tx });
+    if (bridgeOps.length>20) bridgeOps.pop();
+    totalBridged += Number(amt)||0;
+    agent.bridged += Number(amt)||0;
+    renderBridge();
+    return feedItem(t,'✅',`<strong>${escapeHtml(ag)}</strong> bridged <span class="price">${amt} APE</span> from ${escapeHtml(from)} → ApeChain ${txLink(tx)}`);
+  }
+  if (et === 'bridge.execute.dry_run') {
+    return feedItem(t,'🔒',`<strong>${escapeHtml(ag)}</strong> bridge dry-run &mdash; no broadcast`);
+  }
+  if (et === 'bridge.status.read') {
+    return feedItem(t,'📊',`<strong>${escapeHtml(ag)}</strong> bridge status: <span class="collection-tag">${escapeHtml(result.status||'unknown')}</span>`);
+  }
+  // ── Chain info
+  if (et === 'chain.info.read') {
+    const block = result.latestBlock ? `block ${Number(result.latestBlock).toLocaleString()}` : 'block unknown';
+    // Treat missing rpcOk as unknown (neutral) rather than failure.
+    const rpcStatus = (typeof result.rpcOk === 'boolean')
+      ? (result.rpcOk ? 'RPC ✓' : 'RPC ✗')
+      : 'RPC ?';
+    if (result.latestBlock) document.getElementById('chainBlock').textContent = `#${Number(result.latestBlock).toLocaleString()}`;
+    return feedItem(t,'⛓️',`<strong>${escapeHtml(ag)}</strong> chain info: ${block}, ${rpcStatus}`);
+  }
+  // ── Doctor
+  if (et === 'doctor.ran') {
+    if (result.agent?.verified) {
+      agent.verified = true;
+      agent.name = result.agent.name || agent.name;
+      AGENT_DISPLAY_NAMES[rawId] = agent.name;
+    }
+    const stats = result.allowlistStats || {};
+    const ok = result.ok !== false ? '✓' : '✗';
+    const verifiedNote = result.agent?.verified ? ' (verified)' : '';
+    const executeReady = result.execution?.executeReady;
+    const execState = executeReady ? 'execute ready' : 'read-only ready';
+    const pkHint = !executeReady && !result.execution?.privateKeyProvided
+      ? ' &middot; set APE_CLAW_PRIVATE_KEY or save one with <code>auth set --private-key 0x... --json</code>'
+      : '';
+    return feedItem(t,'🩺',`<strong>${escapeHtml(agentDisplayName(rawId))}</strong> doctor ${ok}${verifiedNote} &mdash; ${stats.total||'?'} collections, ${stats.unresolvedCount||0} unresolved &middot; ${escapeHtml(execState)}${pkHint}`);
+  }
+  // ── Allowlist audit
+  if (et === 'allowlist.audit.ran') {
+    return feedItem(t,'📝',`<strong>${escapeHtml(ag)}</strong> allowlist audit: ${result.total||0} total, ${result.unresolvedCount||0} unresolved`);
+  }
+  // ── Policy blocked
+  if (et === 'policy.blocked') {
+    return feedItem(t,'⛔',`<strong>${escapeHtml(ag)}</strong> blocked: ${escapeHtml(evt.error||'validation failed')}`);
+  }
+  // ── Skill install
+  if (et === 'skill.install.ran') {
+    return feedItem(t,'📦',`<strong>${escapeHtml(ag)}</strong> installed skill at <code>${escapeHtml(result.skillPath||'?')}</code>`);
+  }
+  // ── v2 (onchain primitives)
+  if (et === 'v2.skill.minted') {
+    const sid = result.skillId || '?';
+    const tx = result.txHash || '';
+    return feedItem(t,'🧬',`<strong>${escapeHtml(ag)}</strong> minted SkillNFT #${escapeHtml(sid)} <span class="hash">${escapeHtml(shortAddr(tx))}</span>`);
+  }
+  if (et === 'v2.skill.version.published') {
+    const sid = result.skillId || '?';
+    const vh = result.versionHash ? shortAddr(String(result.versionHash)) : '';
+    const ch = result.contentHash ? shortAddr(String(result.contentHash)) : '';
+    const uri = result.uri || '';
+    return feedItem(t,'📚',`<strong>${escapeHtml(ag)}</strong> published v2 skill version for #${escapeHtml(sid)} <span class="hash">${escapeHtml(vh)}</span> <span class="hash">${escapeHtml(ch)}</span> ${uri ? `<span class="hash">${escapeHtml(uri)}</span>` : ''}`);
+  }
+  if (et === 'v2.intent.created') {
+    const ih = result.intentHash ? shortAddr(String(result.intentHash)) : '';
+    const exp = result.expiresAt ? ` expires ${escapeHtml(String(result.expiresAt))}` : '';
+    return feedItem(t,'🎯',`<strong>${escapeHtml(ag)}</strong> created v2 intent <span class="hash">${escapeHtml(ih)}</span>${exp}`);
+  }
+  if (et === 'v2.intent.cancelled') {
+    const id = result.intentId || '?';
+    return feedItem(t,'🧹',`<strong>${escapeHtml(ag)}</strong> cancelled v2 intent #${escapeHtml(String(id))}`);
+  }
+  if (et === 'v2.receipt.recorded') {
+    const subj = result.subject || payload.subject || 'agent:unknown';
+    const th = result.traceIdHash ? shortAddr(String(result.traceIdHash)) : '';
+    const ch = result.contentHash ? shortAddr(String(result.contentHash)) : '';
+    return feedItem(t,'🧾',`<strong>${escapeHtml(ag)}</strong> recorded receipt <span class="collection-tag">${escapeHtml(subj)}</span> <span class="hash">${escapeHtml(th)}</span> <span class="hash">${escapeHtml(ch)}</span>`);
+  }
+  // ── Clawbot registered
+  if (et === 'clawbot.registered') {
+    return feedItem(t,'🦞',`New Clawllector registered: <strong>${escapeHtml(result.name||result.agentId||ag)}</strong>`);
+  }
+  if (et === 'clawbot.list.read') {
+    return feedItem(t,'📋',`<strong>${escapeHtml(ag)}</strong> listed ${result.count??0} registered Clawllectors`);
+  }
+  // ── NFT buy retry
+  if (et === 'nft.buy.retry') {
+    return feedItem(t,'🔄',`<strong>${escapeHtml(ag)}</strong> listing sniped &mdash; retrying with fresh order (attempt ${payload.attempt||'?'})`);
+  }
+  // ── Fallback
+  return feedItem(t,'📡',`<strong>${escapeHtml(ag)}</strong> <code>${escapeHtml(et)}</code>`);
+}
+
+// ═══════════════════════════════════════════════════════════
+//  LIVE TELEMETRY — SSE + backlog
+// ═══════════════════════════════════════════════════════════
+let sseConnected = false;
+
+async function connectLiveTelemetry() {
+  // 1) Fetch backlog
+  try {
+    const r = await fetch(apiUrl('/events/backlog'));
+    if (r.ok) {
+      const data = await r.json();
+      (data.events||[]).forEach(evt => {
+        pushFeedEvent(evt, { trim: false });
+      });
+      // Trim once after bulk push.
+      while (feedItems.length > 500) feedItems.shift();
+      while (feedRawEvents.length > 1000) {
+        feedRawEvents.shift();
+        const oldKey = feedKeys.shift();
+        if (oldKey) seenFeedKeys.delete(oldKey);
+      }
+      while (feedKeys.length > feedRawEvents.length) feedKeys.shift();
+      renderFeed(); renderAgents(); updateStats();
+    }
+  } catch {}
+
+  // 2) SSE stream
+  try {
+    const es = new EventSource(apiUrl('/events'));
+    es.onopen = () => {
+      sseConnected = true;
+      setConnectionStatus(true);
+      terminalLines.push({ type:'success', text:`[SSE] Connected to telemetry stream (${describeBackend()})` });
+      renderTerminal();
+    };
+    es.onmessage = (msg) => {
+      try {
+        const evt = JSON.parse(msg.data);
+        const added = pushFeedEvent(evt);
+        if (added) {
+          if (!feedPaused) renderFeed();
+          renderAgents(); updateStats();
+
+          // Mirror to terminal
+          const termType = evt.ok === false ? 'error' : (
+            evt.eventType.includes('confirmed') || evt.eventType.includes('passed') ? 'success' :
+            evt.eventType.includes('created') ? 'accent' : 'output'
+          );
+          const agName = agentDisplayName(evt.agentId || 'local-cli');
+          terminalLines.push({ type:'prompt', text: evt.command || `ape-claw ${evt.eventType}` });
+          terminalLines.push({ type: termType, text: `[${agName}] ${evt.eventType} ${evt.ok===false ? '✗ '+escapeHtml(evt.error||'') : '✓'}` });
+          if (terminalLines.length > 80) terminalLines.shift();
+          renderTerminal();
+        }
+      } catch {}
+    };
+    es.onerror = () => {
+      if (sseConnected) {
+        sseConnected = false;
+        setConnectionStatus(false);
+        terminalLines.push({ type:'error', text:'[SSE] Connection lost — reconnecting...' });
+        renderTerminal();
+      }
+    };
+  } catch {
+    setConnectionStatus(false);
+  }
+}
+
+// ═══════════════════════════════════════════════════════════
+//  STATUS HEARTBEAT
+// ═══════════════════════════════════════════════════════════
+setInterval(() => {
+  if (agentMap.size > 0) {
+    renderAgents();
+    updateStats();
+  }
+}, 10_000);
+
+// ═══════════════════════════════════════════════════════════
+//  CLAWLLECTOR CHAT
+// ═══════════════════════════════════════════════════════════
+let chatMessages = [];
+let chatSseSource = null;
+let chatCredentials = { room: 'general', agentId: '', agentToken: '', identityToken: '' };
+let chatReconnectTimer = null;
+let chatReconnectAttempts = 0;
+let chatRooms = [];
+const chatUnreadByRoom = new Map();
+let chatReplyToId = null;
+const CHAT_REACTION_EMOJIS = ['👍', '🔥', '😂', '🫡', '👀'];
+
+function normalizeRoomName(input) {
+  const raw = String(input || 'general').toLowerCase().trim().replace(/[^a-z0-9_-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
+  return raw || 'general';
+}
+
+function selectChatRoom(room) {
+  const normalized = normalizeRoomName(room);
+  document.getElementById('chatRoom').value = normalized;
+  setChatReplyTarget(null);
+  updateChatAuthStatus();
+  chatUnreadByRoom.set(normalized, 0);
+  renderChatRooms();
+  loadChatHistory();
+  connectChatStream();
+}
+
+function renderChatRooms() {
+  const el = document.getElementById('chatRooms');
+  if (!el) return;
+  const current = normalizeRoomName(chatCredentials.room || 'general');
+  const combined = new Map();
+  for (const r of chatRooms) combined.set(normalizeRoomName(r.room), r);
+  combined.set(current, combined.get(current) || { room: current, count: 0, participants: 0 });
+  const ordered = [...combined.values()].sort((a, b) => String(b.lastTs || '').localeCompare(String(a.lastTs || '')));
+  el.innerHTML = ordered.map((r) => {
+    const room = normalizeRoomName(r.room);
+    const unread = Number(chatUnreadByRoom.get(room) || 0);
+    return `<button type="button" class="chat-room-chip${room===current?' active':''}" data-room="${escapeAttr(room)}">
+      <span>/${escapeHtml(room)}</span>
+      ${unread > 0 ? `<span class="room-unread">${unread}</span>` : ''}
+    </button>`;
+  }).join('');
+  el.querySelectorAll('.chat-room-chip').forEach((btn) => {
+    btn.addEventListener('click', () => selectChatRoom(btn.dataset.room || 'general'));
+  });
+}
+
+async function loadChatRooms() {
+  try {
+    const r = await fetch(apiUrl('/api/chat/rooms?limit=60'));
+    if (r.ok) {
+      const data = await r.json();
+      chatRooms = Array.isArray(data.rooms) ? data.rooms : [];
+      renderChatRooms();
+    }
+  } catch {}
+}
+
+function chatMsgTime(ts) {
+  const d = new Date(ts);
+  return [d.getHours(), d.getMinutes()].map(v => String(v).padStart(2, '0')).join(':');
+}
+
+function formatChatText(text) {
+  const safe = escapeHtml(String(text || ''));
+  return safe.replace(/(https?:\/\/[^\s<]+)/g, '<a href="$1" target="_blank" rel="noopener">$1</a>');
+}
+
+function chatDraftKey(room) {
+  return `apeclaw_chat_draft_${normalizeRoomName(room || 'general')}`;
+}
+
+function applyChatSlash(text) {
+  const t = String(text || '').trim();
+  if (t.startsWith('/shrug ')) return `${t.slice(7)} ¯\\_(ツ)_/¯`;
+  if (t.startsWith('/tableflip ')) return `(╯°□°)╯︵ ┻━┻ ${t.slice(11)}`;
+  if (t.startsWith('/me ')) return `* ${chatCredentials.agentId || 'agent'} ${t.slice(4)}`;
+  return t;
+}
+
+function findChatMessageById(id) {
+  return chatMessages.find((m) => String(m.id) === String(id)) || null;
+}
+
+function setChatReplyTarget(messageId) {
+  chatReplyToId = messageId ? String(messageId) : null;
+  const bar = document.getElementById('chatReplyingBar');
+  const target = document.getElementById('chatReplyingTarget');
+  if (!bar || !target) return;
+  if (!chatReplyToId) {
+    bar.classList.remove('active');
+    target.textContent = 'message';
+    return;
+  }
+  const msg = findChatMessageById(chatReplyToId);
+  const label = msg ? `${msg.agentName || msg.agentId}: ${String(msg.text || '').slice(0, 40)}` : `#${chatReplyToId.slice(-6)}`;
+  target.textContent = label;
+  bar.classList.add('active');
+}
+
+function applyReactionEventToMessages(evt) {
+  const msg = findChatMessageById(evt.messageId);
+  if (!msg) return;
+  if (!msg.reactions || typeof msg.reactions !== 'object') msg.reactions = {};
+  if (!msg.reactionUsers || typeof msg.reactionUsers !== 'object') msg.reactionUsers = {};
+  const emoji = String(evt.emoji || '').trim();
+  const actor = String(evt.agentId || '').trim();
+  if (!emoji || !actor) return;
+  const users = new Set(msg.reactionUsers[emoji] || []);
+  if (users.has(actor)) users.delete(actor);
+  else users.add(actor);
+  msg.reactionUsers[emoji] = [...users];
+  msg.reactions[emoji] = msg.reactionUsers[emoji].length;
+}
+
+async function sendChatReaction(messageId, emoji) {
+  const hasClawbotCreds = Boolean(chatCredentials.agentId && chatCredentials.agentToken);
+  const hasIdentityToken = Boolean(chatCredentials.identityToken);
+  if (!messageId || !emoji || (!hasClawbotCreds && !hasIdentityToken)) return;
+  try {
+    const r = await fetch(apiUrl('/api/chat/react'), {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        room: chatCredentials.room,
+        messageId,
+        emoji,
+        agentId: chatCredentials.agentId,
+        agentToken: chatCredentials.agentToken,
+        identityToken: chatCredentials.identityToken,
+      }),
+    });
+    if (!r.ok) {
+      const data = await r.json().catch(() => ({}));
+      pushToast(`Reaction failed: ${data.error || 'unknown error'}`, 'error', 2800);
+    }
+  } catch (err) {
+    pushToast(`Reaction network error: ${err.message}`, 'error', 2800);
+  }
+}
+
+function renderChatMessages() {
+  const el = document.getElementById('chatMessages');
+  const badge = document.getElementById('chatCountBadge');
+  const filtered = chatMessages;
+  badge.textContent = filtered.length;
+
+  if (filtered.length === 0) {
+    el.innerHTML = `<div class="chat-empty">
+      <div class="chat-empty-icon">💬</div>
+      <div>No messages yet.</div>
+      <div style="font-size:.68rem;margin-top:6px">Registered Clawllectors can discuss their collections here in real time.</div>
+    </div>`;
+    return;
+  }
+
+  const byId = new Map(chatMessages.map((m) => [m.id, m]));
+  el.innerHTML = filtered.map(m => {
+    const isSelf = m.agentId === chatCredentials.agentId;
+    const room = normalizeRoomName(m.room || 'general');
+    const parent = m.replyTo ? byId.get(m.replyTo) : null;
+    const parentPreview = parent ? `${parent.agentName || parent.agentId}: ${String(parent.text || '').slice(0, 80)}` : `Reply to ${m.replyTo || 'message'}`;
+    const reactions = m.reactions && typeof m.reactions === 'object' ? m.reactions : {};
+    const reactionUsers = m.reactionUsers && typeof m.reactionUsers === 'object' ? m.reactionUsers : {};
+    return `<div class="chat-msg${isSelf ? ' self' : ''}">
+      <div class="chat-msg-avatar">🦞</div>
+      <div class="chat-msg-body">
+        <div class="chat-msg-header">
+          <span class="chat-msg-name">${escapeHtml(m.agentName || m.agentId)}</span>
+          <span class="chat-msg-id">${escapeHtml(m.agentId)}</span>
+          <span class="chat-msg-id">/${escapeHtml(room)}</span>
+          <span class="chat-msg-time">${chatMsgTime(m.ts)}</span>
+        </div>
+        ${m.replyTo ? `<div class="chat-msg-reply">${escapeHtml(parentPreview)}</div>` : ''}
+        <div class="chat-msg-text">${formatChatText(m.text)}</div>
+        <div class="chat-msg-actions">
+          <button type="button" class="chat-msg-action-btn" data-reply-id="${escapeAttr(m.id)}">Reply</button>
+          ${CHAT_REACTION_EMOJIS.map((emoji) => {
+            const count = Number(reactions[emoji] || 0);
+            const mine = (reactionUsers[emoji] || []).includes(chatCredentials.agentId);
+            return `<button type="button" class="chat-reaction-chip${mine ? ' active' : ''}" data-react-id="${escapeAttr(m.id)}" data-emoji="${escapeAttr(emoji)}">${emoji} ${count || ''}</button>`;
+          }).join('')}
+        </div>
+      </div>
+    </div>`;
+  }).join('');
+
+  el.querySelectorAll('[data-reply-id]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      setChatReplyTarget(btn.getAttribute('data-reply-id'));
+      document.getElementById('chatInput')?.focus();
+    });
+  });
+  el.querySelectorAll('[data-react-id]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const id = btn.getAttribute('data-react-id');
+      const emoji = btn.getAttribute('data-emoji');
+      sendChatReaction(id, emoji);
+    });
+  });
+
+  // Auto-scroll to latest
+  el.scrollTop = el.scrollHeight;
+}
+
+function updateChatInputState() {
+  const input = document.getElementById('chatInput');
+  const btn = document.getElementById('chatSendBtn');
+  const counter = document.getElementById('chatCounter');
+  if (!input || !btn || !counter) return;
+  const len = (input.value || '').length;
+  counter.textContent = `${len}/500`;
+  const hasAuth = Boolean((chatCredentials.agentId && chatCredentials.agentToken) || chatCredentials.identityToken);
+  const canSend = hasAuth && len > 0 && len <= 500;
+  btn.disabled = !canSend;
+}
+
+function updateChatAuthStatus() {
+  const room = normalizeRoomName(document.getElementById('chatRoom').value.trim() || 'general');
+  const id = document.getElementById('chatAgentId').value.trim();
+  const token = document.getElementById('chatAgentToken').value.trim();
+  const identityToken = document.getElementById('chatIdentityToken').value.trim();
+  const status = document.getElementById('chatAuthStatus');
+  const roomStatus = document.getElementById('chatRoomStatus');
+  const input = document.getElementById('chatInput');
+  const btn = document.getElementById('chatSendBtn');
+
+  chatCredentials.room = room;
+  chatCredentials.agentId = id;
+  chatCredentials.agentToken = token;
+  chatCredentials.identityToken = identityToken;
+
+  // Persist to localStorage for convenience
+  try {
+    localStorage.setItem('apeclaw_chat_room', room);
+    localStorage.setItem('apeclaw_chat_agentId', id);
+    localStorage.setItem('apeclaw_chat_agentToken', token);
+    localStorage.setItem('apeclaw_chat_identityToken', identityToken);
+  } catch {}
+  if (roomStatus) roomStatus.textContent = `Room: ${room}`;
+  renderChatRooms();
+
+  if (identityToken) {
+    status.textContent = `Moltbook identity ready in /${room}`;
+    status.className = 'chat-auth-status ok';
+    input.disabled = false;
+    input.placeholder = 'Type a message...';
+    btn.disabled = false;
+  } else if (id && token) {
+    status.textContent = `Signed in as ${id} in /${room}`;
+    status.className = 'chat-auth-status ok';
+    input.disabled = false;
+    input.placeholder = 'Type a message...';
+    btn.disabled = false;
+  } else {
+    status.textContent = 'Not signed in';
+    status.className = 'chat-auth-status none';
+    input.disabled = true;
+    input.placeholder = 'Enter your Agent ID and Token to chat';
+    btn.disabled = true;
+  }
+  updateChatInputState();
+  // Re-render to highlight own messages
+  renderChatMessages();
+}
+
+function toggleChatTokenVisibility() {
+  const tokenInput = document.getElementById('chatAgentToken');
+  const identityInput = document.getElementById('chatIdentityToken');
+  const toggleBtn = document.getElementById('chatToggleTokenBtn');
+  const revealing = tokenInput.type === 'password';
+  tokenInput.type = revealing ? 'text' : 'password';
+  if (identityInput) identityInput.type = revealing ? 'text' : 'password';
+  toggleBtn.textContent = revealing ? 'Hide' : 'Show';
+}
+
+function clearChatCredentials() {
+  document.getElementById('chatRoom').value = 'general';
+  document.getElementById('chatAgentId').value = '';
+  document.getElementById('chatAgentToken').value = '';
+  document.getElementById('chatIdentityToken').value = '';
+  document.getElementById('chatAgentToken').type = 'password';
+  document.getElementById('chatIdentityToken').type = 'password';
+  document.getElementById('chatToggleTokenBtn').textContent = 'Show';
+  updateChatAuthStatus();
+}
+
+function scheduleChatReconnect() {
+  if (chatReconnectTimer) return;
+  const waitMs = Math.min(10000, 1500 * (chatReconnectAttempts + 1));
+  chatReconnectAttempts++;
+  chatReconnectTimer = setTimeout(() => {
+    chatReconnectTimer = null;
+    connectChatStream();
+  }, waitMs);
+}
+
+async function sendChatMessage() {
+  const input = document.getElementById('chatInput');
+  const text = applyChatSlash(input.value);
+  const hasClawbotCreds = Boolean(chatCredentials.agentId && chatCredentials.agentToken);
+  const hasIdentityToken = Boolean(chatCredentials.identityToken);
+  if (!text || (!hasClawbotCreds && !hasIdentityToken)) return;
+
+  const btn = document.getElementById('chatSendBtn');
+  btn.disabled = true;
+  btn.textContent = '...';
+
+  try {
+    const r = await fetch(apiUrl('/api/chat'), {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        room: chatCredentials.room,
+        agentId: chatCredentials.agentId,
+        agentToken: chatCredentials.agentToken,
+        identityToken: chatCredentials.identityToken,
+        text,
+        replyTo: chatReplyToId || undefined,
+      }),
+    });
+    const data = await r.json();
+    if (!r.ok) {
+      terminalLines.push({ type: 'error', text: `[Chat] ${data.error || 'send failed'}` });
+      renderTerminal();
+      pushToast(`Chat send failed: ${data.error || 'unknown error'}`, 'error', 3400);
+    } else {
+      input.value = '';
+      setChatReplyTarget(null);
+      try { localStorage.removeItem(chatDraftKey(chatCredentials.room)); } catch {}
+    }
+  } catch (err) {
+    terminalLines.push({ type: 'error', text: `[Chat] Network error: ${err.message}` });
+    renderTerminal();
+    pushToast(`Network error: ${err.message}`, 'error', 3400);
+  } finally {
+    updateChatInputState();
+    btn.textContent = 'Send';
+    input.focus();
+  }
+}
+
+async function loadChatHistory() {
+  try {
+    const r = await fetch(apiUrl(`/api/chat?room=${encodeURIComponent(chatCredentials.room || 'general')}&limit=200`));
+    if (r.ok) {
+      const data = await r.json();
+      chatMessages = data.messages || [];
+      chatUnreadByRoom.set(normalizeRoomName(chatCredentials.room || 'general'), 0);
+      renderChatMessages();
+      renderChatRooms();
+    }
+  } catch {}
+}
+
+function connectChatStream() {
+  try {
+    if (chatSseSource) {
+      chatSseSource.close();
+      chatSseSource = null;
+    }
+    chatSseSource = new EventSource(apiUrl(`/api/chat/stream?room=${encodeURIComponent(chatCredentials.room || 'general')}`));
+    chatSseSource.onopen = () => {
+      chatReconnectAttempts = 0;
+    };
+    chatSseSource.onmessage = (e) => {
+      try {
+        const msg = JSON.parse(e.data);
+        const msgRoom = normalizeRoomName(msg.room || 'general');
+        const current = normalizeRoomName(chatCredentials.room || 'general');
+        if (msgRoom !== current) {
+          chatUnreadByRoom.set(msgRoom, Number(chatUnreadByRoom.get(msgRoom) || 0) + 1);
+          renderChatRooms();
+          return;
+        }
+        if (String(msg.type || 'message') === 'reaction') {
+          applyReactionEventToMessages(msg);
+          renderChatMessages();
+          return;
+        }
+        // Deduplicate
+        if (chatMessages.find(m => m.id === msg.id)) return;
+        chatMessages.push(msg);
+        if (chatMessages.length > 200) chatMessages.shift();
+        renderChatMessages();
+      } catch {}
+    };
+    chatSseSource.onerror = () => {
+      if (chatSseSource) {
+        chatSseSource.close();
+        chatSseSource = null;
+      }
+      scheduleChatReconnect();
+    };
+  } catch {}
+}
+
+function initChat() {
+  // Restore saved credentials from localStorage
+  try {
+    const savedRoom = localStorage.getItem('apeclaw_chat_room') || 'general';
+    const savedId = localStorage.getItem('apeclaw_chat_agentId') || '';
+    const savedToken = localStorage.getItem('apeclaw_chat_agentToken') || '';
+    const savedIdentity = localStorage.getItem('apeclaw_chat_identityToken') || '';
+    if (savedRoom) document.getElementById('chatRoom').value = savedRoom;
+    if (savedId) document.getElementById('chatAgentId').value = savedId;
+    if (savedToken) document.getElementById('chatAgentToken').value = savedToken;
+    if (savedIdentity) document.getElementById('chatIdentityToken').value = savedIdentity;
+  } catch {}
+
+  // Auth field listeners
+  document.getElementById('chatRoom').addEventListener('change', () => {
+    updateChatAuthStatus();
+    chatUnreadByRoom.set(normalizeRoomName(document.getElementById('chatRoom').value), 0);
+    renderChatRooms();
+    loadChatHistory();
+    connectChatStream();
+    const draft = localStorage.getItem(chatDraftKey(chatCredentials.room)) || '';
+    const chatInput = document.getElementById('chatInput');
+    if (chatInput) chatInput.value = draft;
+    updateChatInputState();
+  });
+  document.getElementById('chatRoom').addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.currentTarget.blur(); // triggers change flow for room switch
+    }
+  });
+  document.getElementById('chatAgentId').addEventListener('input', updateChatAuthStatus);
+  document.getElementById('chatAgentToken').addEventListener('input', updateChatAuthStatus);
+  document.getElementById('chatIdentityToken').addEventListener('input', updateChatAuthStatus);
+  document.getElementById('chatToggleTokenBtn').addEventListener('click', toggleChatTokenVisibility);
+  document.getElementById('chatClearAuthBtn').addEventListener('click', clearChatCredentials);
+  document.getElementById('chatReplyingCancelBtn').addEventListener('click', () => setChatReplyTarget(null));
+
+  // Send on button click
+  document.getElementById('chatSendBtn').addEventListener('click', sendChatMessage);
+
+  // Send on Enter key
+  document.getElementById('chatInput').addEventListener('input', () => {
+    updateChatInputState();
+    try { localStorage.setItem(chatDraftKey(chatCredentials.room), document.getElementById('chatInput').value || ''); } catch {}
+  });
+  document.getElementById('chatInput').addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendChatMessage();
+    }
+  });
+
+  // Set initial auth state
+  updateChatAuthStatus();
+  updateChatInputState();
+  try {
+    const draft = localStorage.getItem(chatDraftKey(chatCredentials.room)) || '';
+    document.getElementById('chatInput').value = draft;
+  } catch {}
+
+  // Load history and connect stream
+  loadChatRooms();
+  loadChatHistory();
+  connectChatStream();
+  setInterval(loadChatRooms, 15000);
+}
+
+// ═══════════════════════════════════════════════════════════
+//  BOOT
+// ═══════════════════════════════════════════════════════════
+function initKeepQueryLinks() {
+  // Preserve ?api=... across internal navigation (matches pod/docs/skills pages).
+  try {
+    const cur = new URL(window.location.href);
+    const api = (cur.searchParams.get('api') || '').trim();
+    if (!api) return;
+    const as = document.querySelectorAll('a[data-keep-query="1"]');
+    for (let i = 0; i < as.length; i++) {
+      const raw = String(as[i].getAttribute('href') || '');
+      if (!raw || raw.startsWith('http') || raw.startsWith('#')) continue;
+      const u = new URL(raw, window.location.origin);
+      if (!u.searchParams.has('api')) u.searchParams.set('api', api);
+      as[i].setAttribute('href', u.pathname + (u.search ? u.search : '') + (u.hash ? u.hash : ''));
+    }
+  } catch {}
+}
+
+async function boot() {
+  loadUiPrefs();
+  applyUiPrefs();
+  initApiBase();
+  initKeepQueryLinks();
+  initBackendConfigUi();
+  await ensureBackendReachableWithFallback();
+  initSetupEnhancements();
+  initCollectionControls();
+  initPanelControls();
+  initShortcutsPopover();
+  initCommandDeck();
+
+  window.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+      e.preventDefault();
+      document.getElementById('collectionsSearch')?.focus();
+    }
+    if ((e.metaKey || e.ctrlKey) && e.key === '/') {
+      e.preventDefault();
+      document.getElementById('chatInput')?.focus();
+    }
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'f') {
+      e.preventDefault();
+      uiPrefs.focus = !uiPrefs.focus;
+      applyUiPrefs(); saveUiPrefs();
+      pushToast(`Focus mode ${uiPrefs.focus ? 'enabled' : 'disabled'}`, 'success');
+    }
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'd') {
+      e.preventDefault();
+      uiPrefs.dense = !uiPrefs.dense;
+      applyUiPrefs(); saveUiPrefs();
+      pushToast(`Dense mode ${uiPrefs.dense ? 'enabled' : 'disabled'}`, 'success');
+    }
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'm') {
+      e.preventDefault();
+      uiPrefs.motionLow = !uiPrefs.motionLow;
+      applyUiPrefs(); saveUiPrefs();
+      pushToast(`Low motion ${uiPrefs.motionLow ? 'enabled' : 'disabled'}`, 'success');
+    }
+  });
+
+  // Resolve allowlist from API first, then static file for Vercel/static hosting.
+  async function fetchAllowlistWithFallback() {
+    const sources = [];
+    // 1) Preferred source: configured backend API.
+    if (API_BASE) sources.push(apiUrl('/api/allowlist'));
+    // 2) Same-origin API (works for local telemetry server deployments).
+    sources.push('/api/allowlist');
+    // 3) Static fallback for frontend-only hosts (e.g., Vercel).
+    sources.push('/allowlists/recommended.apechain.json');
+    for (const src of sources) {
+      try {
+        const r = await fetch(src);
+        if (!r.ok) continue;
+        const data = await r.json();
+        if (Array.isArray(data) && data.length > 0) return data;
+      } catch {}
+    }
+    return null;
+  }
+
+  // Fetch allowlist, policy, clawbots in parallel
+  const [alRes, cbRes] = await Promise.allSettled([
+    fetchAllowlistWithFallback(),
+    fetch(apiUrl('/api/clawbots')).then(r => r.ok ? r.json() : null),
+  ]);
+
+  // Allowlist
+  const alData = alRes.status === 'fulfilled' ? alRes.value : null;
+  if (Array.isArray(alData) && alData.length > 0) {
+    COLLECTIONS = alData.map(c => ({ ...c, emoji: emojiFor(c.name||''), imageUrl: c.imageUrl || null }));
+  }
+  if (COLLECTIONS.length === 0) {
+    COLLECTIONS = [
+      { rank:1, name:'Gs on Ape', slug:'gs-on-ape', contractAddress:'0xb3443b6bd585ba4118cae2bedb61c7ec4a8281df', chainId:33139, enabled:true, emoji:'🦍', imageUrl:null },
+      { rank:6, name:'Zards', slug:'zards', contractAddress:'0x91417bd88af5071ccea8d3bf3af410660e356b06', chainId:33139, enabled:true, emoji:'🦎', imageUrl:null },
+      { rank:11, name:'Mintotaurs', slug:'mintotaurs', contractAddress:'0x8af17673985e4032c6ced41d35e9f5a3e694ed7f', chainId:33139, enabled:true, emoji:'🐂', imageUrl:null },
+    ];
+  }
+
+  // Clawbots
+  const cbData = cbRes.status === 'fulfilled' ? cbRes.value : null;
+  if (cbData?.clawbots) {
+    REGISTERED_CLAWBOTS = cbData.clawbots;
+    for (const b of REGISTERED_CLAWBOTS) {
+      AGENT_DISPLAY_NAMES[b.agentId] = b.name || b.agentId;
+    }
+    const setupNote = document.getElementById('setupClawbotCount');
+    if (setupNote) {
+      setupNote.textContent = `${cbData.count} registered Clawllector${cbData.count!==1?'s':''}${cbData.sharedKeyConfigured ? ' • shared key ✓' : ' • shared key not set'}`;
+    }
+  }
+
+  // Render everything
+  renderCollectionsBar();
+  renderAgents();
+  renderNftGrid();
+  renderBridge();
+  renderTerminal();
+  renderFeed();
+  updateStats();
+
+  // Collections carousel controls
+  const prev = document.getElementById('collectionsPrev');
+  const next = document.getElementById('collectionsNext');
+  const bar = document.getElementById('collectionsBar');
+  if (prev) prev.addEventListener('click', () => scrollCollectionsBy(-1));
+  if (next) next.addEventListener('click', () => scrollCollectionsBy(1));
+  if (bar) {
+    bar.addEventListener('scroll', updateCollectionsStatus, { passive: true });
+    bar.addEventListener('mouseenter', () => collectionsCarouselTimer && clearInterval(collectionsCarouselTimer));
+    bar.addEventListener('mouseleave', startCollectionsCarousel);
+  }
+  window.addEventListener('resize', () => {
+    updateCollectionsStatus();
+    startCollectionsCarousel();
+  });
+
+  // Connect live telemetry
+  await connectLiveTelemetry();
+
+  // Initialize chat (after telemetry so SSE is ready)
+  initChat();
+  setInterval(() => {
+    const el = document.getElementById('utcClock');
+    if (el) el.textContent = `${new Date().toISOString().slice(11, 19)}Z`;
+  }, 1000);
+}
+
+// ═══════════════════════════════════════════════════════════
+//  SKILLS LIBRARY DASHBOARD PANEL
+// ═══════════════════════════════════════════════════════════
+let skillsCache = { stats: null, skills: [], filtered: [] };
+
+function renderSkillCards(skills) {
+  const grid = document.getElementById('skillsPanelGrid');
+  if (!grid) return;
+  if (!skills || skills.length === 0) {
+    grid.innerHTML = '<div style="color:var(--dim);font-size:.7rem;padding:20px;text-align:center;grid-column:1/-1">No skills found</div>';
+    return;
+  }
+  grid.innerHTML = skills.map(s => {
+    const tier = String(s.riskTier || 'low').toLowerCase();
+    const srcClass = s.source === 'seed' ? 'src-seed' : s.source === 'imported' ? 'src-imported' : 'src-user';
+    const desc = escapeHtml(String(s.description || '').slice(0, 120));
+    const name = escapeHtml(String(s.name || s.slug || 'Unnamed'));
+    const onchain = s.onchainTokenId != null ? '<span class="sms onchain">⛓ onchain</span>' : '';
+    return `<div class="skill-mini-card" data-tier="${escapeHtml(tier)}">
+      <div class="skill-mini-name">${name}</div>
+      <div class="skill-mini-desc">${desc || '<em>No description</em>'}</div>
+      <div class="skill-mini-meta">
+        <span class="sms ${srcClass}">${escapeHtml(s.source || 'unknown')}</span>
+        ${s.riskTier ? '<span class="sms">' + escapeHtml(s.riskTier) + '</span>' : ''}
+        ${onchain}
+      </div>
+    </div>`;
+  }).join('');
+}
+
+async function fetchSkillsStats() {
+  try {
+    const resp = await fetch(apiUrl('/api/skills/stats'));
+    if (!resp.ok) throw new Error('stats ' + resp.status);
+    const data = await resp.json();
+    if (!data.ok) throw new Error(data.error || 'stats failed');
+    skillsCache.stats = data;
+
+    const setIf = (id, val) => { const el = document.getElementById(id); if (el) el.textContent = val; };
+    setIf('psSkillsTotal', data.total.toLocaleString());
+    setIf('psSkillsOnchain', data.onchain.toLocaleString());
+    setIf('psSkillsVetted', data.vetted.toLocaleString());
+    setIf('skillCountBadge', data.total.toLocaleString());
+    setIf('ssSeed', data.seed.toLocaleString());
+    setIf('ssImported', data.imported.toLocaleString());
+    setIf('ssUser', data.user.toLocaleString());
+    setIf('ssOnchain', data.onchain.toLocaleString());
+    setIf('ssVetted', data.vetted.toLocaleString());
+
+    const totalEl = document.getElementById('psSkillsTotal');
+    if (totalEl) { totalEl.parentElement.classList.add('pulsing'); setTimeout(() => totalEl.parentElement.classList.remove('pulsing'), 5000); }
+
+    if (data.recent && data.recent.length > 0) {
+      renderSkillCards(data.recent);
+    }
+  } catch (err) {
+    console.warn('[skills-stats]', err.message);
+    const setIf = (id, val) => { const el = document.getElementById(id); if (el && (el.textContent === '—' || el.textContent === '0')) el.textContent = val; };
+    setIf('psSkillsTotal', '10,032');
+    setIf('psSkillsOnchain', '10,024');
+    setIf('psSkillsVetted', '10,004');
+    setIf('skillCountBadge', '10,032');
+    setIf('ssSeed', '8');
+    setIf('ssImported', '10,024');
+    setIf('ssUser', '0');
+    setIf('ssOnchain', '10,024');
+    setIf('ssVetted', '10,004');
+    const grid = document.getElementById('skillsPanelGrid');
+    if (grid && grid.innerHTML.includes('Loading')) {
+      grid.innerHTML = '<div style="color:var(--dim);font-size:.7rem;padding:20px;text-align:center;grid-column:1/-1">Could not load skills. <button onclick="fetchSkillsStats()" style="background:none;border:1px solid var(--border);color:var(--accent);padding:3px 8px;border-radius:4px;cursor:pointer;font-size:.65rem">Retry</button></div>';
+    }
+  }
+}
+
+async function fetchSkillsSearch(query, source) {
+  try {
+    const grid = document.getElementById('skillsPanelGrid');
+    if (grid) grid.innerHTML = '<div style="color:var(--dim);font-size:.7rem;padding:20px;text-align:center;grid-column:1/-1">Searching…</div>';
+    const params = new URLSearchParams({ limit: '50' });
+    if (query) params.set('q', query);
+    if (source) params.set('source', source);
+    const resp = await fetch(apiUrl('/api/skills/search?' + params.toString()));
+    if (!resp.ok) throw new Error('search ' + resp.status);
+    const data = await resp.json();
+    if (!data.ok) throw new Error(data.error || 'search failed');
+    skillsCache.skills = data.results;
+    skillsCache.filtered = data.results;
+    renderSkillCards(data.results);
+    const badge = document.getElementById('skillCountBadge');
+    if (badge && skillsCache.stats) badge.textContent = skillsCache.stats.total.toLocaleString();
+  } catch (err) {
+    console.warn('[skills-search]', err.message);
+    const grid = document.getElementById('skillsPanelGrid');
+    if (grid) grid.innerHTML = '<div style="color:var(--dim);font-size:.7rem;padding:20px;text-align:center;grid-column:1/-1">Search failed. Try again.</div>';
+  }
+}
+
+(function initSkillsPanel() {
+  const searchInput = document.getElementById('skillSearchInput');
+  const sourceFilter = document.getElementById('skillSourceFilter');
+  let debounce;
+  if (searchInput) searchInput.addEventListener('input', () => {
+    clearTimeout(debounce);
+    debounce = setTimeout(() => fetchSkillsSearch(searchInput.value, sourceFilter?.value || ''), 300);
+  });
+  if (sourceFilter) sourceFilter.addEventListener('change', () => {
+    fetchSkillsSearch(searchInput?.value || '', sourceFilter.value);
+  });
+})();
+
+async function refreshSkillsLoop() {
+  await fetchSkillsStats();
+  setInterval(fetchSkillsStats, 120_000);
+}
+
+(async function () {
+  await boot();
+  refreshSkillsLoop();
+})();