Bridge iroh control announcements into web stream discovery

apps/web/app.js

@@ -9,6 +9,7 @@ const MOQ_WATCH_MODULE_URLS = [
   "https://cdn.jsdelivr.net/npm/@moq/watch@0.1.1/element/+esm",
   "https://unpkg.com/@moq/watch@0.1.1/element.js?module",
 ];
+const PUBLIC_STREAMS_PATH = "/api/public-streams";
 let moqWatchModulePromise = null;
 let disposePlayerSignals = null;
 
@@ -52,6 +53,12 @@ function setShareLink(text) {
   el.textContent = text || "";
 }
 
+function setListHint(text, kind) {
+  const el = $("listHint");
+  el.textContent = text || "";
+  el.dataset.kind = kind || "";
+}
+
 function clearPlayerSignals() {
   if (typeof disposePlayerSignals === "function") {
     disposePlayerSignals();
@@ -214,11 +221,59 @@ function hasWebTransport() {
   return typeof window.WebTransport !== "undefined";
 }
 
+function renderLiveList(entries, onWatch) {
+  const mount = $("liveList");
+  mount.textContent = "";
+  if (!entries.length) {
+    setListHint("No public streams announced yet.", "");
+    return;
+  }
+  setListHint(`${entries.length} live`, "ok");
+
+  for (const entry of entries) {
+    const row = document.createElement("div");
+    row.className = "liveItem";
+
+    const info = document.createElement("div");
+    const title = document.createElement("div");
+    title.className = "liveTitle";
+    title.textContent = entry.title || entry.stream_id || entry.broadcast_name || "Live stream";
+    info.appendChild(title);
+
+    const meta = document.createElement("div");
+    meta.className = "liveMeta";
+    meta.textContent = `${entry.broadcast_name || ""} @ ${entry.relay_url || DEFAULT_RELAY_URL}`;
+    info.appendChild(meta);
+
+    const btn = document.createElement("button");
+    btn.className = "btn secondary";
+    btn.textContent = "Watch";
+    btn.addEventListener("click", () => {
+      onWatch(entry);
+    });
+
+    row.appendChild(info);
+    row.appendChild(btn);
+    mount.appendChild(row);
+  }
+}
+
+async function fetchLiveList() {
+  const res = await fetch(PUBLIC_STREAMS_PATH, { cache: "no-store" });
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status}`);
+  }
+  const body = await res.json();
+  const entries = Array.isArray(body?.entries) ? body.entries : [];
+  return entries;
+}
+
 function main() {
   const relayInput = $("relayUrl");
   const nameInput = $("broadcastName");
   const watchBtn = $("watchBtn");
   const copyBtn = $("copyLinkBtn");
+  const refreshListBtn = $("refreshListBtn");
 
   const initial = readParams();
   relayInput.value = initial.relayUrl;
@@ -257,7 +312,7 @@ function main() {
       await ensureMoqWatchElement();
     } catch (e) {
       setHint(
-        `Failed to load MoQ web player dependency: ${String(e)}. Disable script blockers for esm.sh and retry.`,
+        `Failed to load MoQ web player dependency: ${String(e)}. Disable script blockers for esm.sh/jsdelivr/unpkg and retry.`,
         "warn",
       );
       return;
@@ -296,7 +351,30 @@ function main() {
     }
   });
 
+  async function refreshLiveList() {
+    setListHint("Loading live streams...", "");
+    try {
+      const entries = await fetchLiveList();
+      renderLiveList(entries, (entry) => {
+        relayInput.value = normalizeRelayUrl(entry.relay_url || DEFAULT_RELAY_URL);
+        nameInput.value = normalizeName(entry.broadcast_name || "");
+        updateSharePreview();
+        void start();
+      });
+    } catch (e) {
+      $("liveList").textContent = "";
+      setListHint(`Live list error: ${String(e)}`, "warn");
+    }
+  }
+  refreshListBtn.addEventListener("click", () => {
+    void refreshLiveList();
+  });
+
   updateSharePreview();
+  void refreshLiveList();
+  window.setInterval(() => {
+    void refreshLiveList();
+  }, 15000);
 
   // Auto-start if a name was provided.
   if (initial.name) void start();

apps/web/index.html

@@ -43,6 +43,15 @@
         </div>
       </section>
 
+      <section class="panel">
+        <div class="panelHead">
+          <div class="panel-title">Live Now</div>
+          <button id="refreshListBtn" class="btn secondary">Refresh</button>
+        </div>
+        <div class="hint" id="listHint"></div>
+        <div id="liveList" class="liveList"></div>
+      </section>
+
       <section class="player">
         <div class="tv">
           <div class="tv-glow"></div>

apps/web/style.css

@@ -93,6 +93,17 @@ body {
   margin-bottom: 12px;
 }
 
+.panelHead {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.panelHead .panel-title {
+  margin-bottom: 0;
+}
+
 .row {
   display: grid;
   grid-template-columns: 1.15fr 1fr auto;
@@ -178,6 +189,38 @@ body {
   padding: 0 4px;
 }
 
+.liveList {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.liveItem {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 8px;
+  align-items: center;
+  padding: 9px 10px;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+  background: rgba(0, 0, 0, 0.18);
+}
+
+.liveTitle {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.liveMeta {
+  margin-top: 2px;
+  color: var(--faint);
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .player {
   padding: 0;
 }
@@ -269,4 +312,3 @@ body {
     flex-direction: column;
   }
 }
-