Phase 5: Add discovered relays (outbox) table to relays.html — collapsible section showing temporary outbox relays with connection status, serving follow count, and sample npubs

www/js/version.json

@@ -1,5 +1,5 @@
 {
-  "VERSION": "v0.7.42",
-  "VERSION_NUMBER": "0.7.42",
-  "BUILD_DATE": "2026-06-26T13:44:56.791Z"
+  "VERSION": "v0.7.43",
+  "VERSION_NUMBER": "0.7.43",
+  "BUILD_DATE": "2026-06-26T13:46:35.892Z"
 }

www/relays.html

@@ -257,6 +257,10 @@
        ================================================================ -->
   <div id="divBody" class="clsBodyFull">
     <div id="divRelays">Loading relays...</div>
+    <div id="divDiscoveredRelaysWrap" style="width:95%;margin:10px auto 0 auto;">
+      <div id="divDiscoveredRelaysTitle" style="font-size:120%;margin-bottom:6px;cursor:pointer;user-select:none;">▸ Discovered Relays (Outbox)</div>
+      <div id="divDiscoveredRelays" style="display:none;"></div>
+    </div>
     <div id="divRelayEventsWrap">
       <div id="divRelayEvents" class="relay-events-stream"></div>
     </div>
@@ -333,7 +337,7 @@
     /* ================================================================
        IMPORTS
        ================================================================ */
-    import { initNDKPage, getPubkey, injectHeaderAvatar, disconnect, getRelayData, getRelayStats, reconnectRelay, publishEvent, getVersion, updateVersionDisplay, ndkFetchEvents, setRelayEventLogging } from './js/init-ndk.mjs';
+    import { initNDKPage, getPubkey, injectHeaderAvatar, disconnect, getRelayData, getRelayStats, reconnectRelay, publishEvent, getVersion, updateVersionDisplay, ndkFetchEvents, setRelayEventLogging, getDiscoveredRelays } from './js/init-ndk.mjs';
     import { HamburgerMorphing } from "./hamburger_morphing/hamburger.mjs";
     import { initFooterRelayStatus, updateFooterRelayStatus, initSidenavRelaySection, updateSidenavRelaySection, setRelayActivityState } from './js/relay-ui.mjs';
 
@@ -1331,12 +1335,88 @@ const versionInfo = await getVersion();
       }
     };
 
+    const shortNpub = (hex) => {
+      if (!hex || hex.length < 16) return hex || '-';
+      return `${hex.slice(0, 8)}…${hex.slice(-4)}`;
+    };
+
+    let discoveredRelaysExpanded = false;
+
+    const renderDiscoveredRelays = (relays) => {
+      const container = document.getElementById('divDiscoveredRelays');
+      const title = document.getElementById('divDiscoveredRelaysTitle');
+      if (!container || !title) return;
+
+      if (!discoveredRelaysExpanded) {
+        container.style.display = 'none';
+        title.textContent = `▸ Discovered Relays (Outbox)${relays.length > 0 ? ` (${relays.length})` : ''}`;
+        return;
+      }
+
+      title.textContent = `▾ Discovered Relays (Outbox) (${relays.length})`;
+      container.style.display = '';
+
+      if (relays.length === 0) {
+        container.innerHTML = '<div style="padding:8px;color:var(--muted-color);font-size:80%;">No discovered relays. Load the feed page to populate outbox relays from your follows.</div>';
+        return;
+      }
+
+      let html = '<table style="width:100%;font-size:70%;border-collapse:collapse;">';
+      html += '<thead><tr>';
+      html += '<th class="tblCol tblColLeft" style="border:0.1px solid var(--muted-color);padding:4px;">Relay</th>';
+      html += '<th class="tblCol tblColCenter" style="border:0.1px solid var(--muted-color);padding:4px;">Connected</th>';
+      html += '<th class="tblCol tblColRight" style="border:0.1px solid var(--muted-color);padding:4px;">Serving</th>';
+      html += '<th class="tblCol tblColLeft" style="border:0.1px solid var(--muted-color);padding:4px;">Sample Follows</th>';
+      html += '</tr></thead><tbody>';
+
+      for (const relay of relays) {
+        const connected = relay.connected ? SVG_CHECKED : SVG_UNCHECKED;
+        const servingCount = Array.isArray(relay.servingPubkeys) ? relay.servingPubkeys.length : 0;
+        const sampleFollows = Array.isArray(relay.servingPubkeys)
+          ? relay.servingPubkeys.slice(0, 3).map(shortNpub).join(', ')
+          : '-';
+        const rowClass = relay.connected ? 'tblRowConnected' : '';
+
+        html += `<tr class="${rowClass}">`;
+        html += `<td class="tblCol tblColLeft tblColRelay" style="border:0.1px solid var(--muted-color);padding:4px;" title="${relay.url}">${relay.url}</td>`;
+        html += `<td class="tblCol tblColCenter" style="border:0.1px solid var(--muted-color);padding:4px;">${connected}</td>`;
+        html += `<td class="tblCol tblColRight" style="border:0.1px solid var(--muted-color);padding:4px;">${servingCount}</td>`;
+        html += `<td class="tblCol tblColLeft" style="border:0.1px solid var(--muted-color);padding:4px;font-family:monospace;">${sampleFollows}</td>`;
+        html += '</tr>';
+      }
+
+      html += '</tbody></table>';
+      container.innerHTML = html;
+    };
+
+    const refreshDiscoveredRelays = async () => {
+      try {
+        const relays = await getDiscoveredRelays();
+        renderDiscoveredRelays(Array.isArray(relays) ? relays : []);
+      } catch (error) {
+        console.warn('[relays.html] Failed to fetch discovered relays:', error?.message || error);
+        renderDiscoveredRelays([]);
+      }
+    };
+
+    const initDiscoveredRelaysToggle = () => {
+      const title = document.getElementById('divDiscoveredRelaysTitle');
+      if (!title) return;
+      title.addEventListener('click', () => {
+        discoveredRelaysExpanded = !discoveredRelaysExpanded;
+        refreshDiscoveredRelays();
+      });
+    };
+
     const refreshRelayData = async () => {
       console.log('[relay2.html] Refreshing relay data...');
       try {
         const relays = await getRelayData();
         await createRelayTable(relays);
 
+        // Refresh discovered relays (outbox) table
+        void refreshDiscoveredRelays();
+
         // Keep relay debug history stable between polls; live updates are appended via ndkRelayEvent.
       } catch (error) {
         console.error('[relay2.html] Error getting relay data:', error);
@@ -1494,6 +1574,9 @@ const versionInfo = await getVersion();
         
         await loadCurrentDmInboxRelayList();
 
+        // Initialize discovered relays (outbox) collapsible toggle
+        initDiscoveredRelaysToggle();
+
         // Get initial relay data
         await refreshRelayData();