Add default-on toggle to hide empty collabs

Collabs with no agents and no messages are hidden by default via a
checkbox above the directory table, with an "N empty hidden" note. The
filter is bypassed while stats are still loading so skeleton rows show.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

index.html

@@ -40,6 +40,14 @@
   .btn:hover { border-color: var(--muted-3); color: var(--ink); }
   .btn:disabled { opacity: 0.6; cursor: wait; }
 
+  /* --- Filter bar --- */
+  .filterbar { display: flex; align-items: center; gap: 12px; margin-top: 20px; font-family: "JetBrains Mono", monospace; }
+  .toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; color: var(--muted); cursor: pointer; user-select: none; }
+  .toggle:hover { color: var(--ink); }
+  .toggle input { width: 13px; height: 13px; cursor: pointer; accent-color: var(--accent); margin: 0; }
+  .filter-note { font-size: 10px; letter-spacing: 0.4px; color: var(--muted-4); font-variant-numeric: tabular-nums; }
+  .empty-note { padding: 30px 16px; text-align: center; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted-3); line-height: 1.7; }
+
   /* --- Table --- */
   .tbl { border: 1px solid var(--border); background: #fff; margin-top: 20px; overflow-x: auto; }
   .row, .thead {
@@ -184,6 +192,10 @@
 </div>
 
 <div class="tabpane" id="tab-directory">
+  <div class="filterbar">
+    <label class="toggle"><input type="checkbox" id="hideEmpty" checked><span>Hide empty collabs</span></label>
+    <span class="filter-note" id="hiddenNote"></span>
+  </div>
   <div class="tbl" id="tbl">
     <div class="thead">
       <div class="h nosort"></div>
@@ -288,6 +300,13 @@ const rowsEl = document.getElementById("rows");
 const stateEl = document.getElementById("state");
 let ROWS = [];                       // [{space, st}]
 let sort = { col: "last", dir: -1 }; // default: most recently active first
+let hideEmpty = true;                // default on: hide collabs with no agents and no messages
+let loading = false;                 // while true, skip the empty filter so skeleton rows show
+
+function rowIsEmpty(r) {              // empty = no agents and no messages (null/0 both count as none)
+  const st = r.st || {};
+  return !(st.agents || st.messages);
+}
 
 function rel(iso) {
   if (!iso) return "·";
@@ -369,7 +388,19 @@ function renderRows() {
     h.querySelector(".arr").textContent = active ? (sort.dir < 0 ? "▼" : "▲") : "";
   });
 
-  rowsEl.innerHTML = sorted.map(r => {
+  // hide empties (skipped during load so skeleton rows still appear while stats stream in)
+  const applyFilter = hideEmpty && !loading;
+  const filtered = applyFilter ? sorted.filter(r => !rowIsEmpty(r)) : sorted;
+  const hidden = ROWS.length - filtered.length;
+  const noteEl = document.getElementById("hiddenNote");
+  if (noteEl) noteEl.textContent = applyFilter && hidden > 0 ? `${hidden} empty hidden` : "";
+
+  if (applyFilter && filtered.length === 0 && ROWS.length > 0) {
+    rowsEl.innerHTML = `<div class="empty-note">All ${ROWS.length} discovered collabs are empty (no agents or messages).<br>Turn off “Hide empty collabs” to show them.</div>`;
+    return;
+  }
+
+  rowsEl.innerHTML = filtered.map(r => {
     const sp = r.space, st = r.st, cd = sp.cardData || {};
     const title = cd.title || sp.id.split("/")[1];
     const desc = cd.short_description || cd.description || "";
@@ -450,8 +481,14 @@ document.querySelectorAll(".thead .h[data-sort]").forEach(h => {
   });
 });
 
+document.getElementById("hideEmpty").addEventListener("change", function () {
+  hideEmpty = this.checked;
+  renderRows();
+});
+
 async function load() {
   const btn = document.getElementById("refresh");
+  loading = true;
   btn.disabled = true; btn.textContent = "↻ Loading…";
   rowsEl.innerHTML = ""; stateEl.style.display = ""; stateEl.className = "state"; stateEl.textContent = "Discovering agent collabs…";
   try {
@@ -469,6 +506,7 @@ async function load() {
       if (r.st.agents) totA += r.st.agents;
       if (r.st.messages) totM += r.st.messages;
     }));
+    loading = false;
     renderRows();
     finishSummary(spaces.length, totA, totM);
     if (new URLSearchParams(location.search).get("expand") === "1") {
@@ -477,6 +515,7 @@ async function load() {
   } catch (e) {
     stateEl.className = "state err"; stateEl.textContent = "Failed to load: " + e.message;
   } finally {
+    loading = false;
     btn.disabled = false; btn.textContent = "↻ Refresh";
   }
 }