agentchannel 0.7.19 → 0.7.21

package/ui/app.js

@@ -0,0 +1,884 @@
+// AgentChannel Frontend — works in both Web UI (HTTP) and Tauri (WebView) modes
+// CONFIG is injected by the server (web mode) or Tauri (desktop mode)
+
+// ---------------------------------------------------------------------------
+// API Adapter Layer — auto-detect environment
+// ---------------------------------------------------------------------------
+const isTauri = !!window.__TAURI__;
+
+const API = isTauri ? {
+  invoke: window.__TAURI__.core.invoke,
+  listen: window.__TAURI__.event.listen,
+} : {
+  invoke: async function(cmd, args) {
+    if (cmd === 'get_config') return fetch('/api/config').then(function(r) { return r.json(); });
+    if (cmd === 'read_messages') return fetch('/api/messages?' + new URLSearchParams(args || {})).then(function(r) { return r.json(); });
+    if (cmd === 'get_identity') return fetch('/api/identity').then(function(r) { return r.json(); });
+    if (cmd === 'get_members') return fetch('/api/members?' + new URLSearchParams(args || {})).then(function(r) { return r.json(); });
+    if (cmd === 'send_message') return fetch('/api/send', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(args) }).then(function(r) { return r.json(); });
+    throw new Error('Unknown command: ' + cmd);
+  },
+  listen: async function(event, callback) {
+    // Web UI mode: real-time via MQTT WebSocket (handled in init)
+  },
+};
+
+// ---------------------------------------------------------------------------
+// State
+// ---------------------------------------------------------------------------
+// CONFIG is set on window by the server-injected script tag or Tauri
+var CONFIG = window.__AC_CONFIG__ || {};
+
+var COLORS = ["#7c8a9a","#8b7e74","#6e8a7a","#8a7e8e","#7a8a8e","#8e857a","#7a7e8e","#7e8a7a"];
+var senderColors = {};
+var activeChannel = "all";
+var allMessages = [];
+var unreadCounts = {};
+var collapsedGroups = {};
+var onlineMembers = {}; // channel -> Set of names
+var channelMetas = {}; // channel name -> meta object
+
+var encoder = new TextEncoder();
+var decoder = new TextDecoder();
+
+function getColor(name) {
+  if (!senderColors[name]) senderColors[name] = COLORS[Object.keys(senderColors).length % COLORS.length];
+  return senderColors[name];
+}
+
+// ---------------------------------------------------------------------------
+// ACP-1: HKDF-based key derivation (Web Crypto)
+// ---------------------------------------------------------------------------
+async function hkdfExtract(ikm) {
+  var key = await crypto.subtle.importKey("raw", encoder.encode("acp1:extract"), {name:"HMAC",hash:"SHA-256"}, false, ["sign"]);
+  var prk = await crypto.subtle.sign("HMAC", key, encoder.encode(ikm));
+  return new Uint8Array(prk);
+}
+
+async function hkdfExpand(prk, info, length) {
+  var key = await crypto.subtle.importKey("raw", prk, {name:"HMAC",hash:"SHA-256"}, false, ["sign"]);
+  // Single iteration HKDF-Expand (length <= 32)
+  var input = new Uint8Array([...encoder.encode(info), 1]);
+  var okm = await crypto.subtle.sign("HMAC", key, input);
+  return new Uint8Array(okm).slice(0, length);
+}
+
+async function deriveKey(s) {
+  var prk = await hkdfExtract(s);
+  var keyBytes = await hkdfExpand(prk, "acp1:enc:channel:epoch:0", 32);
+  return crypto.subtle.importKey("raw", keyBytes, {name:"AES-GCM",length:256}, false, ["encrypt","decrypt"]);
+}
+
+async function deriveSubKeyWeb(channelKey, subName) {
+  var prk = await hkdfExtract(channelKey);
+  var keyBytes = await hkdfExpand(prk, "acp1:enc:sub:" + subName + ":epoch:0", 32);
+  return crypto.subtle.importKey("raw", keyBytes, {name:"AES-GCM",length:256}, false, ["encrypt","decrypt"]);
+}
+
+async function hashRoom(c) {
+  var prk = await hkdfExtract(c);
+  var topicBytes = await hkdfExpand(prk, "acp1:topic:channel", 16);
+  return Array.from(topicBytes).map(function(b) { return b.toString(16).padStart(2, "0"); }).join("");
+}
+
+async function hashSubWeb(channelKey, subName) {
+  var prk = await hkdfExtract(channelKey);
+  var topicBytes = await hkdfExpand(prk, "acp1:topic:sub:" + subName, 16);
+  return Array.from(topicBytes).map(function(b) { return b.toString(16).padStart(2, "0"); }).join("");
+}
+
+async function decryptPayload(payload, key) {
+  var p = JSON.parse(payload);
+  var iv = Uint8Array.from(atob(p.iv), function(c) { return c.charCodeAt(0); });
+  var data = Uint8Array.from(atob(p.data), function(c) { return c.charCodeAt(0); });
+  var tag = Uint8Array.from(atob(p.tag), function(c) { return c.charCodeAt(0); });
+  var combined = new Uint8Array(data.length + tag.length);
+  combined.set(data);
+  combined.set(tag, data.length);
+  return decoder.decode(await crypto.subtle.decrypt({name:"AES-GCM",iv:iv}, key, combined));
+}
+
+// ---------------------------------------------------------------------------
+// DOM references
+// ---------------------------------------------------------------------------
+var msgsEl = document.getElementById("messages");
+var scrollEl = document.getElementById("messages-scroll");
+var headerName = document.getElementById("header-name");
+var headerDesc = document.getElementById("header-desc");
+
+// ---------------------------------------------------------------------------
+// Utility functions
+// ---------------------------------------------------------------------------
+function esc(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function chId(ch) {
+  return ch.subchannel ? ch.channel + '/' + ch.subchannel : ch.channel;
+}
+
+function chLabel(ch) {
+  return ch.subchannel ? '##' + ch.subchannel : '#' + ch.channel;
+}
+
+function chFullLabel(ch) {
+  return ch.subchannel ? '#' + ch.channel + ' ##' + ch.subchannel : '#' + ch.channel;
+}
+
+var INLINE_TAG_COLORS = {
+  bug:'239,68,68', p0:'239,68,68', p1:'245,158,11', p2:'107,114,128',
+  feature:'59,130,246', release:'34,197,94', security:'168,85,247',
+  design:'236,72,153', docs:'99,102,241', protocol:'139,92,246',
+  todo:'245,158,11', fix:'239,68,68'
+};
+
+// ---------------------------------------------------------------------------
+// Rich text rendering (markdown + @mentions + #channels + ##subchannels)
+// ---------------------------------------------------------------------------
+function richText(t) {
+  // Let marked parse markdown (preserves code blocks with <pre><code>)
+  var s = marked.parse(t, {breaks: true});
+
+  // Known channels and subchannels — use string split/join to avoid regex issues
+  var knownChannels = CONFIG.channels.filter(function(c) { return !c.subchannel; }).map(function(c) { return c.channel; });
+  var knownSubs = CONFIG.channels.filter(function(c) { return c.subchannel; }).map(function(c) { return c.subchannel; });
+
+  // Replace ##subchannel references (do subs first to avoid # matching partial ##)
+  for (var ki = 0; ki < knownSubs.length; ki++) {
+    s = s.split('##' + knownSubs[ki]).join(
+      '<span class="channel-tag" onclick="window.switchToSub(\'' + knownSubs[ki] + '\')">##' + knownSubs[ki] + '</span>'
+    );
+  }
+  // Replace #channel references
+  for (var ki = 0; ki < knownChannels.length; ki++) {
+    s = s.split('#' + knownChannels[ki]).join(
+      '<span class="channel-tag" onclick="window.switchToChannel(\'' + knownChannels[ki] + '\')">#' + knownChannels[ki] + '</span>'
+    );
+  }
+
+  // @mentions
+  var mentionRe = /@([a-zA-Z0-9_]+)/g;
+  s = s.replace(mentionRe, '<span class="mention">@$1</span>');
+
+  // Add copy button to code blocks
+  s = s.replace(/<pre>/g, '<pre><button class="copy-btn" onclick="window.copyCode(this)">copy</button>');
+
+  return s;
+}
+
+// ---------------------------------------------------------------------------
+// Render messages
+// ---------------------------------------------------------------------------
+function render() {
+  var filtered = activeChannel === "all"
+    ? allMessages.slice()
+    : allMessages.filter(function(m) {
+        var mid = m.subchannel ? m.channel + '/' + m.subchannel : m.channel;
+        return mid === activeChannel;
+      });
+
+  // Insert readme as first message (never mutate allMessages)
+  if (activeChannel !== "all") {
+    var parts = activeChannel.split("/");
+    var chName = parts[0];
+    var subName = parts[1];
+    var meta = channelMetas[chName];
+    var readme = meta && meta.readme && !subName ? meta.readme : null;
+    if (readme) {
+      var ownerFps = meta.owners ? meta.owners.map(function(fp) {
+        var found = Object.values(window.cloudMembers || {}).flat().find(function(m) { return m.fingerprint === fp; });
+        return found ? found.name + '(' + fp.slice(0, 4) + ')' : fp.slice(0, 4);
+      }).join(", ") : "";
+      filtered = [{id:"readme", channel:chName, sender:"readme", content:readme, timestamp:0, type:"readme", ownerFps:ownerFps}].concat(filtered);
+    }
+  }
+
+  if (!filtered.length) {
+    msgsEl.innerHTML = '<div class="empty">No messages yet</div>';
+    return;
+  }
+
+  var html = "";
+  var lastSender = null;
+  var lastChannel = null;
+
+  for (var i = 0; i < filtered.length; i++) {
+    var msg = filtered[i];
+
+    if (msg.type === "readme") {
+      html += '<div class="readme-card" style="border:1px solid var(--border);border-radius:10px;padding:20px 24px;margin-bottom:20px;font-size:0.85rem;line-height:1.6;color:var(--text-secondary);background:var(--bg)">'
+        + '<div style="display:flex;align-items:center;gap:8px;margin-bottom:12px">'
+        + '<span style="background:rgba(99,102,241,0.1);color:rgb(99,102,241);font-size:0.6rem;padding:2px 6px;border-radius:3px;font-weight:600">README</span>'
+        + '<span style="font-size:0.65rem;color:var(--text-muted)">owner: ' + (msg.ownerFps || '') + '</span>'
+        + '</div>' + richText(msg.content) + '</div>';
+      lastSender = null;
+      continue;
+    }
+
+    if (msg.type === "system") {
+      html += '<div class="system-msg">' + esc(msg.content) + '</div>';
+      lastSender = null;
+      continue;
+    }
+
+    var time = new Date(msg.timestamp).toLocaleTimeString([], {hour:"2-digit", minute:"2-digit"});
+    var color = getColor(msg.sender);
+    var isGrouped = lastSender === msg.sender && lastChannel === msg.channel;
+    var isMention = msg.content && msg.content.indexOf('@' + CONFIG.name) !== -1;
+
+    if (!isGrouped) {
+      if (lastSender !== null) html += '</div>'; // close previous conversation
+      html += '<div class="conversation"' + (isMention ? ' style="background:var(--mention-bg);border-left:3px solid var(--mention-text);padding-left:12px;margin-left:-15px;border-radius:4px"' : '') + '>';
+      html += '<div class="conversation__label">';
+      var msgFp = msg.senderKey ? '(' + msg.senderKey.slice(0, 4) + ')' : '';
+      html += '<span class="conversation__sender">' + esc(msg.sender) + '<span style="color:var(--text-muted);font-weight:400;font-size:0.65rem;margin-left:2px">' + msgFp + '</span></span>';
+      if (activeChannel === "all") {
+        var mlabel = msg.subchannel ? '#' + esc(msg.channel) + ' ##' + esc(msg.subchannel) : '#' + esc(msg.channel);
+        html += '<span class="conversation__channel">' + mlabel + '</span>';
+      }
+      html += '<span class="conversation__time">' + time + '</span>';
+      html += '</div>';
+      html += '<button class="msg-copy" onclick="window.copyMsg(this)" data-msg="' + esc(msg.content).replace(/"/g, '&quot;') + '" title="Copy"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></button>';
+    }
+
+    html += '<div class="conversation__text' + (isGrouped ? ' conversation__text--grouped' : '') + '">' + richText(msg.content) + '</div>';
+
+    lastSender = msg.sender;
+    lastChannel = msg.channel;
+  }
+  if (lastSender !== null) html += '</div>'; // close last conversation
+
+  msgsEl.innerHTML = html;
+  scrollEl.scrollTop = scrollEl.scrollHeight;
+}
+
+// ---------------------------------------------------------------------------
+// Render sidebar
+// ---------------------------------------------------------------------------
+function renderSidebar() {
+  var el = document.getElementById("channel-list");
+  el.innerHTML = "";
+  var lockIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>';
+  var globeIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>';
+
+  // Sort channels alphabetically, group subchannels under parent
+  var sorted = CONFIG.channels.slice().sort(function(a, b) { return chId(a).localeCompare(chId(b)); });
+  var OFFICIAL = "agentchannel";
+
+  // Build parent->children map using subchannel field
+  var parents = [];
+  var childrenMap = {};
+  for (var i = 0; i < sorted.length; i++) {
+    var ch = sorted[i];
+    if (ch.subchannel) {
+      if (!childrenMap[ch.channel]) childrenMap[ch.channel] = [];
+      childrenMap[ch.channel].push(ch);
+    } else {
+      parents.push(ch);
+    }
+  }
+
+  // Render All channels
+  var allDiv = document.createElement("div");
+  allDiv.className = "sidebar__channel" + (activeChannel === "all" ? " active" : "");
+  var allCount = Object.values(unreadCounts).reduce(function(a, b) { return a + b; }, 0);
+  allDiv.innerHTML = '<span style="color:var(--text-muted);margin-right:2px">#</span>All channels' + (allCount ? '<span class="badge">' + allCount + '</span>' : "");
+  allDiv.onclick = function() {
+    activeChannel = "all";
+    for (var k in unreadCounts) unreadCounts[k] = 0;
+    headerName.textContent = "# All";
+    headerDesc.textContent = "All channels";
+    document.title = "AgentChannel";
+    history.pushState(null, "", "/");
+    renderSidebar();
+    render();
+    if (window.renderMembers) window.renderMembers();
+  };
+  el.appendChild(allDiv);
+
+  // Render each parent + children
+  for (var pi = 0; pi < parents.length; pi++) {
+    var ch = parents[pi];
+    var isOfficial = ch.channel.toLowerCase() === OFFICIAL;
+    var statusIcon = isOfficial ? globeIcon : lockIcon;
+    var hasChildren = childrenMap[ch.channel] && childrenMap[ch.channel].length > 0;
+    var collapsed = collapsedGroups[ch.channel] || false;
+
+    var div = document.createElement("div");
+    var cid = chId(ch);
+    div.className = "sidebar__channel" + (activeChannel === cid ? " active" : "");
+    var count = unreadCounts[cid] || 0;
+    var chInfo = (window.acChannels || {})[cid];
+    var chHash = chInfo ? chInfo.hash : '';
+    var chTail = chHash ? '<span style="color:var(--text-muted);font-size:0.6rem;margin-left:3px;opacity:0.8">(' + chHash.slice(0, 4) + ')</span>' : '';
+    div.innerHTML = '<span style="color:var(--accent);margin-right:2px;opacity:0.7">#</span>' + esc(ch.channel) + chTail + '<span style="opacity:0.5;margin-left:4px;display:inline-flex">' + statusIcon + '</span>' + (count ? '<span class="badge">' + count + '</span>' : "");
+
+    if (hasChildren) {
+      var arrowBtn = document.createElement("span");
+      arrowBtn.style.cssText = "font-size:0.55rem;margin-left:auto;opacity:0.4;padding:2px 4px;cursor:pointer";
+      arrowBtn.textContent = collapsed ? "\u25B6" : "\u25BC";
+      (function(chName, wasCollapsed) {
+        arrowBtn.onclick = function(e) {
+          e.stopPropagation();
+          collapsedGroups[chName] = !wasCollapsed;
+          renderSidebar();
+        };
+      })(ch.channel, collapsed);
+      div.appendChild(arrowBtn);
+    }
+
+    (function(chObj, channelId) {
+      div.onclick = function() {
+        activeChannel = channelId;
+        unreadCounts[channelId] = 0;
+        headerName.textContent = "#" + chObj.channel;
+        headerDesc.textContent = (channelMetas[chObj.channel] && channelMetas[chObj.channel].description) || "";
+        document.title = "AgentChannel";
+        history.pushState(null, "", "/channel/" + encodeURIComponent(chObj.channel));
+        renderSidebar();
+        render();
+        if (window.renderMembers) window.renderMembers();
+      };
+    })(ch, cid);
+    el.appendChild(div);
+
+    // Render children if not collapsed
+    if (hasChildren && !collapsed) {
+      var children = childrenMap[ch.channel];
+      for (var ci = 0; ci < children.length; ci++) {
+        var sub = children[ci];
+        var subCid = chId(sub);
+        var subDiv = document.createElement("div");
+        subDiv.className = "sidebar__channel sub" + (activeChannel === subCid ? " active" : "");
+        var subCount = unreadCounts[subCid] || 0;
+        subDiv.innerHTML = '<span style="color:var(--accent);margin-right:2px;opacity:0.5">##</span>' + esc(sub.subchannel) + (subCount ? '<span class="badge">' + subCount + '</span>' : "");
+        (function(subObj, parentChannel, subChannelId) {
+          subDiv.onclick = function() {
+            activeChannel = subChannelId;
+            unreadCounts[subChannelId] = 0;
+            headerName.textContent = "##" + subObj.subchannel;
+            var subDesc = (channelMetas[parentChannel] && channelMetas[parentChannel].descriptions && channelMetas[parentChannel].descriptions[subObj.subchannel]) || "";
+            headerDesc.textContent = "#" + parentChannel + (subDesc ? " \u00B7 " + subDesc : "");
+            document.title = "AgentChannel";
+            history.pushState(null, "", "/channel/" + encodeURIComponent(parentChannel) + "/sub/" + encodeURIComponent(subObj.subchannel));
+            renderSidebar();
+            render();
+            if (window.renderMembers) window.renderMembers();
+          };
+        })(sub, ch.channel, subCid);
+        el.appendChild(subDiv);
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Channel actions
+// ---------------------------------------------------------------------------
+window.shareChannel = function() {
+  var ch = CONFIG.channels.find(function(c) { return chId(c) === activeChannel; });
+  if (!ch) return;
+  fetch("https://api.agentchannel.workers.dev/invites", {
+    method: "POST",
+    headers: {"Content-Type": "application/json"},
+    body: JSON.stringify({
+      channel: ch.channel,
+      key: ch.key,
+      subchannel: ch.subchannel || undefined,
+      created_by: CONFIG.fingerprint || CONFIG.name,
+      public: true
+    })
+  }).then(function(res) { return res.json(); }).then(function(data) {
+    if (data.token) {
+      var link = "https://agentchannel.io/join#token=" + data.token + "&name=" + encodeURIComponent(ch.channel);
+      navigator.clipboard.writeText(link);
+      alert("Invite link copied! (expires in 24h)\n\n" + link);
+    } else {
+      alert("Failed to create invite");
+    }
+  }).catch(function() {
+    alert("Failed to create invite");
+  });
+};
+
+window.leaveChannel = function() {
+  if (!confirm("Leave #" + activeChannel + "?")) return;
+  // Remove from config display (actual config change needs CLI)
+  CONFIG.channels = CONFIG.channels.filter(function(c) { return c.channel !== activeChannel; });
+  activeChannel = "all";
+  headerName.textContent = "# All channels";
+  headerDesc.textContent = "All channels";
+  renderSidebar();
+  render();
+  if (window.renderMembers) window.renderMembers();
+  alert('Left channel. Run "agentchannel leave --channel <name>" in CLI to persist.');
+};
+
+window.copyCode = function(btn) {
+  var code = btn.parentElement.querySelector('code');
+  if (code) {
+    navigator.clipboard.writeText(code.textContent);
+    btn.textContent = 'copied!';
+    setTimeout(function() { btn.textContent = 'copy'; }, 1500);
+  }
+};
+
+window.copyMsg = function(btn) {
+  navigator.clipboard.writeText(btn.dataset.msg);
+  btn.textContent = 'copied!';
+  setTimeout(function() { btn.textContent = 'copy'; }, 1500);
+};
+
+// ---------------------------------------------------------------------------
+// Init
+// ---------------------------------------------------------------------------
+async function init() {
+  renderSidebar();
+
+  window.acChannels = window.acChannels || {};
+  var channels = window.acChannels;
+
+  for (var i = 0; i < CONFIG.channels.length; i++) {
+    var ch = CONFIG.channels[i];
+    var id = ch.subchannel ? ch.channel + '/' + ch.subchannel : ch.channel;
+    if (ch.subchannel) {
+      channels[id] = {
+        key: await deriveSubKeyWeb(ch.key, ch.subchannel),
+        hash: await hashSubWeb(ch.key, ch.subchannel),
+        name: ch.channel,
+        sub: ch.subchannel
+      };
+    } else {
+      channels[id] = {
+        key: await deriveKey(ch.key),
+        hash: await hashRoom(ch.key),
+        name: ch.channel
+      };
+    }
+  }
+
+  // Load history from D1 cloud — parallel fetch all channels
+  var pendingSubs = [];
+  var fetchPromises = Object.keys(channels).map(function(chKey) {
+    var ch = channels[chKey];
+    return fetch("https://api.agentchannel.workers.dev/messages?channel_hash=" + ch.hash + "&since=0&limit=30")
+      .then(function(r) { return r.json(); })
+      .then(async function(rows) {
+        for (var ri = 0; ri < rows.length; ri++) {
+          try {
+            var msg = JSON.parse(await decryptPayload(rows[ri].ciphertext, ch.key));
+            msg.channel = ch.name;
+            if (ch.sub) msg.subchannel = ch.sub;
+            if (msg.type === "channel_meta") {
+              try {
+                var meta = JSON.parse(msg.content);
+                if (!ch.sub) channelMetas[ch.name] = meta;
+                if (meta.subchannels && !ch.sub) {
+                  var parentCfg = CONFIG.channels.find(function(c) { return c.channel === ch.name && !c.subchannel; });
+                  if (parentCfg) {
+                    for (var si = 0; si < meta.subchannels.length; si++) {
+                      var subName = meta.subchannels[si];
+                      var subId = ch.name + '/' + subName;
+                      if (!channels[subId]) pendingSubs.push({name: ch.name, sub: subName, key: parentCfg.key});
+                    }
+                  }
+                }
+              } catch(e) {}
+              continue;
+            }
+            allMessages.push(msg);
+          } catch(e) {}
+        }
+      }).catch(function() {});
+  });
+  await Promise.all(fetchPromises);
+
+  // Subscribe to discovered subchannels
+  for (var psi = 0; psi < pendingSubs.length; psi++) {
+    var ps = pendingSubs[psi];
+    var subId = ps.name + '/' + ps.sub;
+    if (channels[subId]) continue;
+    var subKey = await deriveSubKeyWeb(ps.key, ps.sub);
+    var subHash = await hashSubWeb(ps.key, ps.sub);
+    channels[subId] = {key: subKey, hash: subHash, name: ps.name, sub: ps.sub};
+    CONFIG.channels.push({channel: ps.name, subchannel: ps.sub, key: ps.key});
+    // Load subchannel history
+    try {
+      var sres = await fetch("https://api.agentchannel.workers.dev/messages?channel_hash=" + subHash + "&since=0&limit=30");
+      var srows = await sres.json();
+      for (var sri = 0; sri < srows.length; sri++) {
+        try {
+          var smsg = JSON.parse(await decryptPayload(srows[sri].ciphertext, subKey));
+          smsg.channel = ps.name;
+          smsg.subchannel = ps.sub;
+          if (smsg.type !== "channel_meta") allMessages.push(smsg);
+        } catch(e) {}
+      }
+    } catch(e) {}
+  }
+
+  allMessages.sort(function(a, b) { return a.timestamp - b.timestamp; });
+  renderSidebar();
+  render();
+
+  // Show user name immediately (don't wait for MQTT)
+  var userNameEl = document.getElementById("user-name");
+  if (userNameEl) {
+    userNameEl.textContent = "@" + CONFIG.name + (CONFIG.fingerprint ? " (" + CONFIG.fingerprint.slice(0, 4) + ")" : "");
+  }
+
+  // Connect to MQTT for real-time messages
+  var client = mqtt.connect("wss://broker.emqx.io:8084/mqtt");
+
+  client.on("connect", function() {
+    var userBar = document.getElementById("user-info");
+    if (userBar) userBar.classList.add("connected");
+    for (var chKey in channels) {
+      var ch = channels[chKey];
+      client.subscribe("ac/1/" + ch.hash);
+      client.subscribe("ac/1/" + ch.hash + "/p");
+    }
+    // Check for updates — show banner
+    fetch("https://registry.npmjs.org/agentchannel/latest").then(function(r) {
+      return r.json();
+    }).then(function(d) {
+      if (d.version && d.version !== CONFIG.version) {
+        var banner = document.getElementById("update-banner");
+        if (banner) {
+          banner.textContent = "v" + d.version + " available — click to copy update command";
+          banner.style.display = "block";
+          banner.onclick = function() {
+            navigator.clipboard.writeText("npm install -g agentchannel");
+            banner.textContent = "Copied! Run in terminal, then restart.";
+          };
+        }
+      }
+    }).catch(function() {});
+  });
+
+  client.on("close", function() {
+    var userBar2 = document.getElementById("user-info");
+    if (userBar2) userBar2.classList.remove("connected");
+    statusEl.className = "sidebar__status";
+  });
+
+  if (Notification.permission === "default") Notification.requestPermission();
+
+  window.cloudMembers = window.cloudMembers || {};
+  var cloudMembers = window.cloudMembers;
+
+  async function loadCloudMembers() {
+    for (var chKey in channels) {
+      var ch = channels[chKey];
+      try {
+        var res = await fetch("https://api.agentchannel.workers.dev/members?channel_hash=" + ch.hash);
+        var rows = await res.json();
+        var cid = ch.sub ? ch.name + '/' + ch.sub : ch.name;
+        cloudMembers[cid] = rows;
+        if (ch.sub && !cloudMembers[ch.name + '/' + ch.sub]) {
+          cloudMembers[ch.name + '/' + ch.sub] = cloudMembers[ch.name] || rows;
+        }
+      } catch(e) {}
+    }
+    // Ensure all subchannels have parent's members
+    for (var chKey in channels) {
+      var ch = channels[chKey];
+      if (ch.sub) {
+        var subId = ch.name + '/' + ch.sub;
+        var parentMembers = cloudMembers[ch.name] || [];
+        var subMembers = cloudMembers[subId] || [];
+        var merged = {};
+        for (var mi = 0; mi < parentMembers.length; mi++) merged[parentMembers[mi].name] = parentMembers[mi];
+        for (var mi = 0; mi < subMembers.length; mi++) merged[subMembers[mi].name] = subMembers[mi];
+        cloudMembers[subId] = Object.values(merged);
+      }
+    }
+    renderMembers();
+  }
+
+  function renderMembers() {
+    var list = document.getElementById("members-list");
+    var panel = document.getElementById("members-panel");
+    var header = document.querySelector(".members__header");
+    if (!list || !panel) return;
+
+    // Hide members for All channels and public channels
+    if (activeChannel === "all" || activeChannel.toLowerCase() === "agentchannel") {
+      if (header) header.textContent = "MEMBERS";
+      list.innerHTML = "";
+      panel.style.display = "none";
+      return;
+    }
+    panel.style.display = "";
+
+    var memberMap = {};
+    var online = new Set();
+
+    // Collect online from presence
+    if (activeChannel === "all") {
+      for (var k in onlineMembers) {
+        for (var n of onlineMembers[k]) online.add(n);
+      }
+    } else {
+      var s = onlineMembers[activeChannel];
+      if (s) for (var n of s) online.add(n);
+    }
+
+    // Collect from cloud members — dedup by fingerprint, use latest name
+    var fpMap = {};
+    var nameToFp = {};
+
+    function addMember(name, fp, isOnline) {
+      if (!name) return;
+      var nameLower = name.toLowerCase();
+      if (fp) nameToFp[nameLower] = fp;
+      var resolvedFp = fp || nameToFp[nameLower];
+      var key = resolvedFp || nameLower;
+
+      // Remove any existing entry with same name but no fp (if we now have fp)
+      if (resolvedFp) {
+        for (var k in fpMap) {
+          if (k !== key && fpMap[k].name.toLowerCase() === nameLower) delete fpMap[k];
+        }
+      }
+
+      var existing = fpMap[key];
+      if (!existing) {
+        fpMap[key] = {name: name, online: isOnline, fingerprint: resolvedFp};
+      } else {
+        // Keep the most recent / capitalized name
+        if (name.length >= existing.name.length) existing.name = name;
+        if (resolvedFp) existing.fingerprint = resolvedFp;
+        if (isOnline) existing.online = true;
+      }
+    }
+
+    if (activeChannel === "all") {
+      var allCloudMembers = window.cloudMembers || {};
+      for (var ck in allCloudMembers) {
+        var rows = allCloudMembers[ck];
+        for (var ri = 0; ri < rows.length; ri++) addMember(rows[ri].name, rows[ri].fingerprint, online.has(rows[ri].name));
+      }
+    } else {
+      var crows = (window.cloudMembers || {})[activeChannel] || [];
+      for (var ri = 0; ri < crows.length; ri++) addMember(crows[ri].name, crows[ri].fingerprint, online.has(crows[ri].name));
+    }
+
+    // Also from message history
+    var msgs = activeChannel === "all"
+      ? allMessages
+      : allMessages.filter(function(m) {
+          var mid = m.subchannel ? m.channel + '/' + m.subchannel : m.channel;
+          return mid === activeChannel || m.channel === activeChannel;
+        });
+    for (var mi = 0; mi < msgs.length; mi++) {
+      var m = msgs[mi];
+      if (m.sender && m.type !== "system") addMember(m.sender, m.senderKey, online.has(m.sender));
+    }
+
+    // Always include self
+    addMember(CONFIG.name, CONFIG.fingerprint, true);
+
+    // Convert to memberMap
+    for (var k in fpMap) memberMap[fpMap[k].name] = fpMap[k];
+
+    // Sort: online first, then alphabetical
+    var sorted = Object.keys(memberMap).sort(function(a, b) {
+      if (memberMap[b].online !== memberMap[a].online) return memberMap[b].online ? 1 : -1;
+      return a.localeCompare(b);
+    });
+
+    var memberCount = sorted.length;
+    if (header) header.textContent = "Members (" + memberCount + ")";
+
+    var html = sorted.map(function(name) {
+      var isOnline = memberMap[name].online;
+      var isYou = name === CONFIG.name;
+      var memberInfo = Object.values(window.cloudMembers || {}).flat().find(function(m) { return m.name === name; });
+      var fpStr = memberInfo && memberInfo.fingerprint
+        ? '<span style="color:var(--text-muted);font-size:0.6rem;margin-left:2px">(' + memberInfo.fingerprint.slice(0, 4) + ')</span>'
+        : '';
+      return '<div class="members__item"><span class="members__dot" style="background:' + (isOnline ? "#22c55e" : "#666") + '"></span><span class="members__name">' + esc(name) + fpStr + '</span>' + (isYou ? '<span class="members__role">you</span>' : '') + '</div>';
+    }).join("");
+
+    list.innerHTML = html;
+
+    // Update actions (fixed at bottom)
+    var actions = document.getElementById("members-actions");
+    if (actions) {
+      if (activeChannel !== "all" && activeChannel.toLowerCase() !== "agentchannel") {
+        actions.innerHTML = '<button class="members__btn" onclick="window.shareChannel()"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg> Share</button>'
+          + '<button class="members__btn members__btn--leave" onclick="window.leaveChannel()"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg> Leave</button>';
+      } else {
+        actions.innerHTML = "";
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // MQTT message handler
+  // ---------------------------------------------------------------------------
+  client.on("message", async function(topic, payload) {
+    for (var chKey in channels) {
+      var ch = channels[chKey];
+
+      // Presence messages
+      if (topic === "ac/1/" + ch.hash + "/p") {
+        try {
+          var data = JSON.parse(payload.toString());
+          var pKey = ch.sub ? ch.name + '/' + ch.sub : ch.name;
+          if (!onlineMembers[pKey]) onlineMembers[pKey] = new Set();
+          if (data.status === "online") onlineMembers[pKey].add(data.name);
+          else onlineMembers[pKey].delete(data.name);
+          renderMembers();
+        } catch(e) {}
+        return;
+      }
+
+      // Channel messages
+      if (topic === "ac/1/" + ch.hash) {
+        try {
+          var msg = JSON.parse(await decryptPayload(payload.toString(), ch.key));
+          msg.channel = ch.name;
+          if (ch.sub) msg.subchannel = ch.sub;
+
+          // Handle channel_meta: auto-discover and subscribe to new subchannels
+          if (msg.type === "channel_meta") {
+            try {
+              var meta = JSON.parse(msg.content);
+              if (!ch.sub) channelMetas[ch.name] = meta;
+              if (meta.subchannels && meta.subchannels.length > 0) {
+                for (var si = 0; si < meta.subchannels.length; si++) {
+                  var subName = meta.subchannels[si];
+                  var subId = ch.name + '/' + subName;
+                  if (!channels[subId]) {
+                    var parentCfg = CONFIG.channels.find(function(c) { return c.channel === ch.name && !c.subchannel; });
+                    if (parentCfg) {
+                      var subKey = await deriveSubKeyWeb(parentCfg.key, subName);
+                      var subHash = await hashSubWeb(parentCfg.key, subName);
+                      channels[subId] = {key: subKey, hash: subHash, name: ch.name, sub: subName};
+                      CONFIG.channels.push({channel: ch.name, subchannel: subName, key: parentCfg.key});
+                      client.subscribe("ac/1/" + subHash);
+                      client.subscribe("ac/1/" + subHash + "/p");
+                      // Load history for new subchannel
+                      try {
+                        var hres = await fetch("https://api.agentchannel.workers.dev/messages?channel_hash=" + subHash + "&since=0&limit=30");
+                        var hrows = await hres.json();
+                        for (var hi = 0; hi < hrows.length; hi++) {
+                          try {
+                            var hmsg = JSON.parse(await decryptPayload(hrows[hi].ciphertext, subKey));
+                            hmsg.channel = ch.name;
+                            hmsg.subchannel = subName;
+                            if (hmsg.type !== "channel_meta") allMessages.push(hmsg);
+                          } catch(e) {}
+                        }
+                        allMessages.sort(function(a, b) { return a.timestamp - b.timestamp; });
+                      } catch(e) {}
+                      renderSidebar();
+                      render();
+                    }
+                  }
+                }
+              }
+            } catch(e) {}
+            return;
+          }
+
+          allMessages.push(msg);
+
+          // Track sender as online
+          var chKeyName = ch.sub ? ch.name + '/' + ch.sub : ch.name;
+          if (!onlineMembers[chKeyName]) onlineMembers[chKeyName] = new Set();
+          onlineMembers[chKeyName].add(msg.sender);
+
+          if (msg.sender !== CONFIG.name) {
+            if (activeChannel !== chKeyName && activeChannel !== "all") {
+              unreadCounts[chKeyName] = (unreadCounts[chKeyName] || 0) + 1;
+              renderSidebar();
+            }
+            var total = Object.values(unreadCounts).reduce(function(a, b) { return a + b; }, 0);
+            if (total > 0) document.title = "(" + total + ") AgentChannel";
+            var nlabel = ch.sub ? "#" + ch.name + " ##" + ch.sub : "#" + ch.name;
+            if (Notification.permission === "granted" && (document.hidden || activeChannel !== chKeyName)) {
+              var n = new Notification(nlabel + " @" + msg.sender, {body: msg.content});
+              n.onclick = function() {
+                window.focus();
+                if (ch.sub) { window.switchToSub(ch.sub); }
+                else { window.switchToChannel(ch.name); }
+              };
+            }
+          }
+          render();
+          renderMembers();
+        } catch(e) {}
+      }
+    }
+  });
+
+  window.renderMembers = renderMembers;
+
+  window.switchToChannel = function(name) {
+    activeChannel = name;
+    unreadCounts[name] = 0;
+    headerName.textContent = "#" + name;
+    headerDesc.textContent = (channelMetas[name] && channelMetas[name].description) || "";
+    document.title = "AgentChannel";
+    history.pushState(null, "", "/channel/" + encodeURIComponent(name));
+    renderSidebar();
+    render();
+    renderMembers();
+  };
+
+  window.switchToSub = function(subName) {
+    var parent = CONFIG.channels.find(function(c) { return c.subchannel === subName; });
+    if (!parent) return;
+    var cid = parent.channel + "/" + subName;
+    activeChannel = cid;
+    unreadCounts[cid] = 0;
+    headerName.textContent = "##" + subName;
+    var subDesc2 = (channelMetas[parent.channel] && channelMetas[parent.channel].descriptions && channelMetas[parent.channel].descriptions[subName]) || "";
+    headerDesc.textContent = "#" + parent.channel + (subDesc2 ? " \u00B7 " + subDesc2 : "");
+    document.title = "AgentChannel";
+    history.pushState(null, "", "/channel/" + encodeURIComponent(parent.channel) + "/sub/" + encodeURIComponent(subName));
+    renderSidebar();
+    render();
+    renderMembers();
+  };
+
+  renderMembers();
+  loadCloudMembers();
+}
+
+// Handle initial active channel from URL or server-injected config
+if (window.__AC_INITIAL_CHANNEL__) {
+  activeChannel = window.__AC_INITIAL_CHANNEL__;
+}
+
+// Theme toggle: dark ↔ light only
+var sunIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>';
+var moonIcon = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>';
+
+function toggleTheme() {
+  var root = document.documentElement;
+  var btn = document.getElementById('theme-toggle');
+  var isDark = root.classList.contains('dark');
+  root.classList.remove('dark', 'light');
+  if (isDark) {
+    root.classList.add('light');
+    btn.innerHTML = moonIcon;
+    localStorage.setItem('ac-theme', 'light');
+  } else {
+    root.classList.add('dark');
+    btn.innerHTML = sunIcon;
+    localStorage.setItem('ac-theme', 'dark');
+  }
+}
+window.toggleTheme = toggleTheme;
+
+// Restore saved theme (default: dark)
+var savedTheme = localStorage.getItem('ac-theme') || 'dark';
+document.documentElement.classList.add(savedTheme);
+var themeBtn = document.getElementById('theme-toggle');
+if (themeBtn) themeBtn.innerHTML = savedTheme === 'dark' ? sunIcon : moonIcon;
+
+init();