agentchannel 0.7.20 → 0.7.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentchannel",
-  "version": "0.7.20",
+  "version": "0.7.22",
   "description": "Encrypted cross-network messaging for AI coding agents via MCP",
   "type": "module",
   "main": "dist/server.js",

package/ui/app.js

@@ -170,12 +170,19 @@ function richText(t) {
 // 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;
-      });
+  var filtered;
+  if (activeChannel === "all") {
+    filtered = allMessages.slice();
+  } else if (activeChannel === "@me") {
+    filtered = allMessages.filter(function(m) {
+      return m.content && CONFIG.name && m.content.indexOf("@" + CONFIG.name) !== -1;
+    });
+  } else {
+    filtered = 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") {
@@ -282,7 +289,7 @@ function renderSidebar() {
   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 class="icon"></span>#All channels' + (allCount ? '<span class="badge">' + allCount + '</span>' : "");
+  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;
@@ -296,6 +303,22 @@ function renderSidebar() {
   };
   el.appendChild(allDiv);
 
+  // @Me — show only messages mentioning me
+  var mentionCount = allMessages.filter(function(m) { return m.content && CONFIG.name && m.content.indexOf("@" + CONFIG.name) !== -1; }).length;
+  var meDiv = document.createElement("div");
+  meDiv.className = "sidebar__channel" + (activeChannel === "@me" ? " active" : "");
+  meDiv.innerHTML = '<span style="color:var(--mention-text);margin-right:2px">@</span>Mentions' + (mentionCount ? '<span class="badge" style="background:var(--mention-text);color:#fff;opacity:1">' + mentionCount + '</span>' : "");
+  meDiv.onclick = function() {
+    activeChannel = "@me";
+    headerName.textContent = "@Me";
+    headerDesc.textContent = "Messages mentioning you";
+    document.title = "AgentChannel — @Me";
+    renderSidebar();
+    render();
+    if (window.renderMembers) window.renderMembers();
+  };
+  el.appendChild(meDiv);
+
   // Render each parent + children
   for (var pi = 0; pi < parents.length; pi++) {
     var ch = parents[pi];
@@ -311,7 +334,7 @@ function renderSidebar() {
     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 class="icon"></span>#' + esc(ch.channel) + chTail + '<span style="opacity:0.5;margin-left:4px;display:inline-flex">' + statusIcon + '</span>' + (count ? '<span class="badge">' + count + '</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");
@@ -351,7 +374,7 @@ function renderSidebar() {
         var subDiv = document.createElement("div");
         subDiv.className = "sidebar__channel sub" + (activeChannel === subCid ? " active" : "");
         var subCount = unreadCounts[subCid] || 0;
-        subDiv.innerHTML = '<span class="icon"></span>##' + esc(sub.subchannel) + (subCount ? '<span class="badge">' + subCount + '</span>' : "");
+        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;
@@ -457,40 +480,41 @@ async function init() {
     }
   }
 
-  // Load history from D1 cloud — also discover subchannels from channel_meta
+  // Load history from D1 cloud — parallel fetch all channels
   var pendingSubs = [];
-  for (var chKey in channels) {
+  var fetchPromises = Object.keys(channels).map(function(chKey) {
     var ch = channels[chKey];
-    try {
-      var res = await fetch("https://api.agentchannel.workers.dev/messages?channel_hash=" + ch.hash + "&since=0&limit=100");
-      var rows = await res.json();
-      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});
+    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(e) {}
-  }
+              } 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++) {
@@ -503,7 +527,7 @@ async function init() {
     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=100");
+      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 {
@@ -520,42 +544,44 @@ async function init() {
   renderSidebar();
   render();
 
-  // Connect to MQTT for real-time messages
-  var client = mqtt.connect("wss://broker.emqx.io:8084/mqtt");
+  // Show user name immediately (don't wait for MQTT)
   var userNameEl = document.getElementById("user-name");
-  var userStatusEl = document.getElementById("user-status");
-  var userAvatarEl = document.getElementById("user-avatar");
   if (userNameEl) {
     userNameEl.textContent = "@" + CONFIG.name + (CONFIG.fingerprint ? " (" + CONFIG.fingerprint.slice(0, 4) + ")" : "");
-    userAvatarEl.textContent = CONFIG.name ? CONFIG.name.charAt(0).toUpperCase() : "#";
   }
 
+  // Connect to MQTT for real-time messages
+  var client = mqtt.connect("wss://broker.emqx.io:8084/mqtt");
+
   client.on("connect", function() {
-    if (userStatusEl) {
-      userStatusEl.textContent = "v" + (CONFIG.version || "?") + " · connected";
-      userStatusEl.style.color = "#22c55e";
-    }
+    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
+    // 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) {
-        statusEl.innerHTML = '<div style="display:flex;flex-direction:column;gap:4px"><span style="color:#f59e0b;font-size:0.7rem">v' + d.version + ' available</span><span id="update-copy" style="font-size:0.65rem;color:var(--text-muted);cursor:pointer;opacity:0.8">click to copy update cmd</span></div>';
-        document.getElementById("update-copy").onclick = function() {
-          navigator.clipboard.writeText("npm install -g agentchannel");
-          this.textContent = "copied!";
-        };
+        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() {
-    if (userStatusEl) { userStatusEl.textContent = "disconnected"; userStatusEl.style.color = ""; }
+    var userBar2 = document.getElementById("user-info");
+    if (userBar2) userBar2.classList.remove("connected");
     statusEl.className = "sidebar__status";
   });
 
@@ -599,6 +625,15 @@ async function init() {
     var header = document.querySelector(".members__header");
     if (!list || !panel) return;
 
+    // Hide members for All channels and @me views
+    if (activeChannel === "all" || activeChannel === "@me") {
+      if (header) header.textContent = "MEMBERS";
+      list.innerHTML = "";
+      panel.style.display = "none";
+      return;
+    }
+    panel.style.display = "";
+
     var memberMap = {};
     var online = new Set();
 
@@ -617,19 +652,28 @@ async function init() {
     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 {
-        if (resolvedFp && !existing.fingerprint) existing.fingerprint = resolvedFp;
-        if (name !== name.toLowerCase() && existing.name === existing.name.toLowerCase()) existing.name = name;
+        // 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 (resolvedFp && fpMap[nameLower] && nameLower !== key) delete fpMap[nameLower];
     }
 
     if (activeChannel === "all") {
@@ -741,7 +785,7 @@ async function init() {
                       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=100");
+                        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 {
@@ -833,4 +877,31 @@ 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();

package/ui/index.html

@@ -4,22 +4,22 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>AgentChannel</title>
-<link rel="stylesheet" href="style.css">
+<link rel="stylesheet" href="/style.css">
 </head>
 <body>
 <div class="app">
   <div class="sidebar">
     <div class="sidebar__header">
-      <span class="sidebar__brand">AgentChannel</span>
+      <span class="sidebar__brand"><span style="color:#00e676">#</span>AgentChannel</span>
       <span class="sidebar__tagline"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:-1px;margin-right:3px"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>Encrypted messaging for AI agents</span>
     </div>
     <div class="sidebar__channels" id="channel-list"></div>
+    <div id="update-banner" style="display:none;padding:6px 16px;background:#00e676;color:#0a0a0a;font-size:0.7rem;font-weight:600;text-align:center;cursor:pointer">Update available</div>
     <div class="sidebar__user" id="user-info">
-      <div class="sidebar__user-avatar" id="user-avatar">#</div>
-      <div class="sidebar__user-details">
-        <div class="sidebar__user-name" id="user-name">loading...</div>
-        <div class="sidebar__user-status" id="user-status">connecting...</div>
-      </div>
+      <span class="sidebar__user-name" id="user-name">loading...</span>
+      <span style="flex:1"></span>
+      <button id="theme-toggle" onclick="toggleTheme()" class="sidebar__icon-btn" title="Toggle theme"></button>
+      <button onclick="alert('Settings coming soon')" class="sidebar__icon-btn" title="Settings"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></button>
     </div>
   </div>
   <div class="main">
@@ -41,6 +41,6 @@
 </div>
 <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-<script src="app.js"></script>
+<script src="/app.js"></script>
 </body>
 </html>

package/ui/logo-circle.svg

@@ -1,13 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
-  <defs>
-    <linearGradient id="bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
-      <stop offset="0%" stop-color="#22c55e" />
-      <stop offset="100%" stop-color="#16a34a" />
-    </linearGradient>
-  </defs>
-  <circle cx="256" cy="256" r="256" fill="url(#bg)" />
+  <circle cx="256" cy="256" r="256" fill="#0d0d0d" />
 
-  <g stroke="#ffffff" stroke-width="40" stroke-linecap="round">
+  <g stroke="#00ff00" stroke-width="40" stroke-linecap="round">
     <line x1="128" y1="195" x2="384" y2="195" />
     <line x1="128" y1="317" x2="384" y2="317" />
     <line x1="210" y1="112" x2="188" y2="400" />

package/ui/logo.svg

@@ -1,20 +1,20 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
   <defs>
     <linearGradient id="bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
-      <stop offset="0%" stop-color="#22c55e" />
-      <stop offset="100%" stop-color="#16a34a" />
+      <stop offset="0%" stop-color="#1a1a1a" />
+      <stop offset="100%" stop-color="#0d0d0d" />
     </linearGradient>
   </defs>
   <rect width="512" height="512" rx="112" fill="url(#bg)" />
 
-  <g stroke="#ffffff" stroke-width="40" stroke-linecap="round">
+  <g stroke="#00ff00" stroke-width="40" stroke-linecap="round">
     <line x1="128" y1="195" x2="384" y2="195" />
     <line x1="128" y1="317" x2="384" y2="317" />
     <line x1="210" y1="112" x2="188" y2="400" />
     <line x1="324" y1="112" x2="302" y2="400" />
   </g>
 
-  <circle cx="420" cy="92" r="14" fill="#ffffff" opacity="0.6" />
-  <circle cx="448" cy="132" r="9" fill="#ffffff" opacity="0.4" />
-  <circle cx="462" cy="178" r="5" fill="#ffffff" opacity="0.25" />
+  <circle cx="420" cy="92" r="14" fill="#00ff00" opacity="0.6" />
+  <circle cx="448" cy="132" r="9" fill="#00ff00" opacity="0.4" />
+  <circle cx="462" cy="178" r="5" fill="#00ff00" opacity="0.25" />
 </svg>

package/ui/style.css

@@ -1,45 +1,58 @@
 *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
 
+/* Ghostty-inspired dark theme */
 :root {
-  --bg: #ffffff;
-  --bg-alt: #f7f7f8;
-  --bg-sidebar: #f7f7f8;
-  --bg-bubble: #f7f7f8;
-  --bg-bubble-self: #ececf1;
-  --bg-hover: rgba(0,0,0,0.02);
-  --text: #0d0d0d;
-  --text-secondary: #6b6c7b;
-  --text-muted: #acacbe;
-  --text-sidebar: #6b6c7b;
-  --text-sidebar-active: #0d0d0d;
-  --mention-bg: rgba(59,130,246,0.08);
-  --mention-text: #2563eb;
-  --border: #e5e5e5;
-  --accent: #0d0d0d;
-  --sidebar-active: #ececf1;
+  --bg: #0e1117;
+  --bg-alt: #1a1f2b;
+  --bg-sidebar: #060810;
+  --bg-bubble: #131620;
+  --bg-bubble-self: #1a1e2a;
+  --bg-hover: rgba(255,255,255,0.03);
+  --text: #e8ecf2;
+  --text-secondary: #b8c0d0;
+  --text-muted: #606878;
+  --text-sidebar: #7a8494;
+  --text-sidebar-active: #cdd6e4;
+  --mention-bg: rgba(255,140,50,0.12);
+  --mention-text: #ff8c32;
+  --border: #1c2030;
+  --accent: #00e676;
+  --sidebar-active: #1c2030;
   --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg: #212121;
-    --bg-alt: #2f2f2f;
-    --bg-sidebar: #171717;
-    --bg-bubble: #2f2f2f;
-    --bg-bubble-self: #303030;
-    --bg-hover: rgba(255,255,255,0.02);
-    --text: #ececec;
-    --text-secondary: #9b9b9b;
-    --text-muted: #666;
-    --text-sidebar: #9b9b9b;
-    --text-sidebar-active: #ececec;
-    --mention-bg: rgba(137,180,250,0.12);
-    --mention-text: #89b4fa;
-    --border: #383838;
-    --accent: #ececec;
-    --sidebar-active: #2f2f2f;
+/* Light mode — follows system preference */
+@media (prefers-color-scheme: light) {
+  :root:not(.dark) {
+    --bg: #ffffff; --bg-alt: #f7f7f8; --bg-sidebar: #f7f7f8;
+    --bg-bubble: #f7f7f8; --bg-bubble-self: #ececf1;
+    --bg-hover: rgba(0,0,0,0.02);
+    --text: #0d0d0d; --text-secondary: #6b6c7b; --text-muted: #acacbe;
+    --text-sidebar: #6b6c7b; --text-sidebar-active: #0d0d0d;
+    --mention-bg: rgba(59,130,246,0.08); --mention-text: #2563eb;
+    --border: #e5e5e5; --accent: #0d0d0d; --sidebar-active: #ececf1;
   }
 }
+/* Manual dark override */
+:root.dark {
+  --bg: #0e1117; --bg-alt: #1a1f2b; --bg-sidebar: #060810;
+  --bg-bubble: #131620; --bg-bubble-self: #1a1e2a;
+  --bg-hover: rgba(255,255,255,0.03);
+  --text: #e8ecf2; --text-secondary: #b8c0d0; --text-muted: #606878;
+  --text-sidebar: #8a94a4; --text-sidebar-active: #e8ecf2;
+  --mention-bg: rgba(255,140,50,0.12); --mention-text: #ff8c32;
+  --border: #1c2030; --accent: #00e676; --sidebar-active: #1c2030;
+}
+/* Manual light override */
+:root.light {
+  --bg: #ffffff; --bg-alt: #f7f7f8; --bg-sidebar: #f7f7f8;
+  --bg-bubble: #f7f7f8; --bg-bubble-self: #ececf1;
+  --bg-hover: rgba(0,0,0,0.02);
+  --text: #0d0d0d; --text-secondary: #6b6c7b; --text-muted: #acacbe;
+  --text-sidebar: #6b6c7b; --text-sidebar-active: #0d0d0d;
+  --mention-bg: rgba(59,130,246,0.08); --mention-text: #2563eb;
+  --border: #e5e5e5; --accent: #0d0d0d; --sidebar-active: #ececf1;
+}
 
 html { font-size: 16px; -webkit-font-smoothing: antialiased; }
 body { font-family: var(--font); background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; }
@@ -61,11 +74,11 @@ body { font-family: var(--font); background: var(--bg); color: var(--text); heig
 .sidebar__channel.sub { padding-left: 28px; font-size: 0.78rem; }
 .sidebar__status { padding: 16px 20px; font-size: 0.75rem; color: var(--text-muted); border-top: 1px solid var(--border); }
 .sidebar__status.connected { color: #22c55e; }
-.sidebar__user { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); margin-top: auto; }
-.sidebar__user-avatar { width: 32px; height: 32px; border-radius: 50%; background: #22c55e; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex-shrink: 0; }
-.sidebar__user-details { overflow: hidden; }
-.sidebar__user-name { font-size: 0.8rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.sidebar__user-status { font-size: 0.65rem; color: var(--text-muted); }
+.sidebar__user { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-top: auto; border-top: 1px solid var(--border); }
+.sidebar__user.connected { background: rgba(0,230,118,0.35); }
+.sidebar__user-name { font-size: 0.78rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sidebar__icon-btn { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); cursor: pointer; color: var(--text); padding: 4px; border-radius: 4px; line-height: 0; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }
+.sidebar__icon-btn:hover { background: rgba(255,255,255,0.3); }
 
 /* Main */
 .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
@@ -96,7 +109,13 @@ body { font-family: var(--font); background: var(--bg); color: var(--text); heig
 .conversation__text pre code, .readme-card pre code { background: none; padding: 0; font-size: 0.8rem; }
 .conversation__text p { margin: 0 0 4px; }
 .conversation__text ul,.conversation__text ol { margin: 4px 0; padding-left: 20px; }
-.conversation__text a { color: var(--mention-text); }
+.conversation__text a { color: var(--accent); }
+.conversation__text table { border-collapse: collapse; margin: 8px 0; }
+.conversation__text th, .conversation__text td { border: 1px solid var(--border); padding: 6px 12px; font-size: 0.8rem; }
+.conversation__text th { background: var(--bg-alt); font-weight: 600; }
+.readme-card table { border-collapse: collapse; margin: 8px 0; }
+.readme-card th, .readme-card td { border: 1px solid var(--border); padding: 6px 12px; font-size: 0.8rem; }
+.readme-card th { background: var(--bg-alt); font-weight: 600; }
 .conversation__text--grouped { }
 
 .mention { background: var(--mention-bg); color: var(--mention-text); padding: 1px 4px; border-radius: 4px; font-weight: 500; font-size: 0.875rem; }