agentchannel 0.7.24 → 0.7.26

package/package.json

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

package/ui/app.js

@@ -38,6 +38,9 @@ var collapsedGroups = { "AgentChannel": true };
 var onlineMembers = {}; // channel -> Set of names
 var channelMetas = {}; // channel name -> meta object
 
+var dmChannels = {}; // theirFingerprint -> {key, hash, name, theirFp}
+var dmNames = {}; // theirFingerprint -> display name
+
 var encoder = new TextEncoder();
 var decoder = new TextDecoder();
 
@@ -87,6 +90,22 @@ async function hashSubWeb(channelKey, subName) {
   return Array.from(topicBytes).map(function(b) { return b.toString(16).padStart(2, "0"); }).join("");
 }
 
+async function deriveDmKeyWeb(fpA, fpB) {
+  var sorted = [fpA, fpB].sort();
+  var ikm = sorted[0] + sorted[1];
+  var prk = await hkdfExtract(ikm);
+  var keyBytes = await hkdfExpand(prk, "acp1:dm", 32);
+  return crypto.subtle.importKey("raw", keyBytes, {name:"AES-GCM",length:256}, false, ["encrypt","decrypt"]);
+}
+
+async function hashDmWeb(fpA, fpB) {
+  var sorted = [fpA, fpB].sort();
+  var ikm = sorted[0] + sorted[1];
+  var prk = await hkdfExtract(ikm);
+  var topicBytes = await hkdfExpand(prk, "acp1:topic:dm", 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); });
@@ -172,7 +191,7 @@ function richText(t) {
 function render() {
   var filtered;
   if (activeChannel === "all") {
-    filtered = allMessages.slice();
+    filtered = allMessages.filter(function(m) { return !m.channel || !m.channel.startsWith("dm:"); });
   } else if (activeChannel === "@me") {
     filtered = allMessages.filter(function(m) {
       return m.content && CONFIG.name && m.content.indexOf("@" + CONFIG.name) !== -1;
@@ -207,6 +226,7 @@ function render() {
 
   var html = "";
   var lastSender = null;
+  var lastTimestamp = 0;
   var lastChannel = null;
 
   for (var i = 0; i < filtered.length; i++) {
@@ -230,28 +250,27 @@ function render() {
 
     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;
+    // Don't group — each message shows sender + time independently
+    // But reduce spacing if same sender within 5 minutes
+    var isCompact = lastSender === msg.sender && lastChannel === msg.channel && (msg.timestamp - lastTimestamp < 300000);
     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>';
+    if (lastSender !== null) html += '</div>'; // close previous
+    html += '<div class="conversation" style="' + (isCompact ? 'margin-top:4px' : 'margin-top:16px') + (isMention ? ';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 === "@me") {
+      var mlabel = msg.subchannel ? '#' + esc(msg.channel) + ' ##' + esc(msg.subchannel) : '#' + esc(msg.channel);
+      html += '<span class="conversation__channel">' + mlabel + '</span>';
     }
-
-    html += '<div class="conversation__text' + (isGrouped ? ' conversation__text--grouped' : '') + '">' + richText(msg.content) + '</div>';
+    html += '<span class="conversation__time">' + time + '</span>';
+    html += '</div>';
+    html += '<div class="conversation__text">' + richText(msg.content) + '</div>';
 
     lastSender = msg.sender;
     lastChannel = msg.channel;
+    lastTimestamp = msg.timestamp;
   }
   if (lastSender !== null) html += '</div>'; // close last conversation
 
@@ -290,10 +309,10 @@ function renderSidebar() {
   if (mentionCount > 0 || activeChannel === "@me") {
     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.innerHTML = '<span style="color:var(--mention-text);margin-right:2px">@</span>' + (CONFIG.name || 'Me') + (mentionCount ? '<span class="badge" style="background:var(--mention-text);color:#fff;opacity:1">' + mentionCount + '</span>' : "");
     meDiv.onclick = function() {
       activeChannel = "@me";
-      headerName.textContent = "@Me";
+      headerName.textContent = "@" + (CONFIG.name || "Me");
       headerDesc.textContent = "Messages mentioning you";
       document.title = "AgentChannel — @Me";
       renderSidebar();
@@ -303,6 +322,39 @@ function renderSidebar() {
     el.appendChild(meDiv);
   }
 
+  // Direct Messages section
+  var dmKeys = Object.keys(dmChannels);
+  if (dmKeys.length > 0) {
+    var dmHeader = document.createElement("div");
+    dmHeader.style.cssText = "font-size:0.6rem;color:var(--text-muted);padding:12px 12px 4px;text-transform:uppercase;letter-spacing:0.05em;font-weight:600";
+    dmHeader.textContent = "Direct Messages";
+    el.appendChild(dmHeader);
+
+    for (var di = 0; di < dmKeys.length; di++) {
+      var dmFp = dmKeys[di];
+      var dmInfo = dmChannels[dmFp];
+      var dmCid = dmInfo.channelId;
+      var dmDisplayName = dmNames[dmFp] || dmFp.slice(0, 8);
+      var dmDiv = document.createElement("div");
+      dmDiv.className = "sidebar__channel" + (activeChannel === dmCid ? " active" : "");
+      var dmCount = unreadCounts[dmCid] || 0;
+      dmDiv.innerHTML = '<span style="color:var(--accent);margin-right:2px;opacity:0.7">@</span>' + esc(dmDisplayName) + '<span style="color:var(--text-muted);font-size:0.6rem;margin-left:3px;opacity:0.8">(' + dmFp.slice(0, 4) + ')</span>' + (dmCount ? '<span class="badge">' + dmCount + '</span>' : "");
+      (function(fp, channelId, displayName) {
+        dmDiv.onclick = function() {
+          activeChannel = channelId;
+          unreadCounts[channelId] = 0;
+          headerName.textContent = "@" + displayName;
+          headerDesc.textContent = "DM with " + fp.slice(0, 8);
+          document.title = "AgentChannel — DM";
+          renderSidebar();
+          render();
+          if (window.renderMembers) window.renderMembers();
+        };
+      })(dmFp, dmCid, dmDisplayName);
+      el.appendChild(dmDiv);
+    }
+  }
+
   // Render each parent + children
   for (var pi = 0; pi < parents.length; pi++) {
     var ch = parents[pi];
@@ -709,10 +761,12 @@ async function init() {
       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>'
+      var fp = memberInfo && memberInfo.fingerprint ? memberInfo.fingerprint : '';
+      var fpStr = fp
+        ? '<span style="color:var(--text-muted);font-size:0.6rem;margin-left:2px">(' + fp.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>';
+      var dmClick = (!isYou && fp) ? ' onclick="window.openDm(\x27' + fp + '\x27,\x27' + esc(name).replace(/'/g, '') + '\x27)" style="cursor:pointer" title="Open DM"' : '';
+      return '<div class="members__item"' + dmClick + '><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;
@@ -812,12 +866,17 @@ async function init() {
             }
             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;
+            var nlabel = ch.isDm ? "DM" : (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); }
+                if (ch.isDm) {
+                  activeChannel = ch.name;
+                  unreadCounts[ch.name] = 0;
+                  renderSidebar();
+                  render();
+                } else if (ch.sub) { window.switchToSub(ch.sub); }
                 else { window.switchToChannel(ch.name); }
               };
             }
@@ -859,6 +918,81 @@ async function init() {
     renderMembers();
   };
 
+  window.openDm = async function(theirFp, theirName) {
+    if (!CONFIG.fingerprint || theirFp === CONFIG.fingerprint) return;
+    // Derive DM key and hash
+    if (!dmChannels[theirFp]) {
+      var dmKey = await deriveDmKeyWeb(CONFIG.fingerprint, theirFp);
+      var dmHash = await hashDmWeb(CONFIG.fingerprint, theirFp);
+      var sorted = [CONFIG.fingerprint, theirFp].sort();
+      var dmCid = "dm:" + sorted[0] + ":" + sorted[1];
+      dmChannels[theirFp] = {key: dmKey, hash: dmHash, channelId: dmCid, theirFp: theirFp};
+      // Register in channels map for MQTT handling
+      channels[dmCid] = {key: dmKey, hash: dmHash, name: dmCid, isDm: true, theirFp: theirFp};
+      // Subscribe to DM topic
+      client.subscribe("ac/1/" + dmHash);
+      // Load DM history from cloud
+      try {
+        var dres = await fetch("https://api.agentchannel.workers.dev/messages?channel_hash=" + dmHash + "&since=0&limit=30");
+        var drows = await dres.json();
+        for (var dri = 0; dri < drows.length; dri++) {
+          try {
+            var dmsg = JSON.parse(await decryptPayload(drows[dri].ciphertext, dmKey));
+            dmsg.channel = dmCid;
+            if (dmsg.type !== "channel_meta") {
+              // Avoid duplicates
+              var isDup = allMessages.some(function(m) { return m.id === dmsg.id; });
+              if (!isDup) allMessages.push(dmsg);
+            }
+          } catch(e) {}
+        }
+        allMessages.sort(function(a, b) { return a.timestamp - b.timestamp; });
+      } catch(e) {}
+    }
+    if (theirName) dmNames[theirFp] = theirName;
+    var dmCid = dmChannels[theirFp].channelId;
+    activeChannel = dmCid;
+    unreadCounts[dmCid] = 0;
+    headerName.textContent = "@" + (theirName || theirFp.slice(0, 8));
+    headerDesc.textContent = "DM with " + theirFp.slice(0, 8);
+    document.title = "AgentChannel — DM";
+    renderSidebar();
+    render();
+    renderMembers();
+  };
+
+  // DM send via web UI — encrypt and publish to DM topic
+  window.sendDmMessage = async function(theirFp, content) {
+    if (!dmChannels[theirFp]) return;
+    var dm = dmChannels[theirFp];
+    var iv = crypto.getRandomValues(new Uint8Array(12));
+    var plaintext = JSON.stringify({
+      id: Array.from(crypto.getRandomValues(new Uint8Array(8))).map(function(b){return b.toString(16).padStart(2,"0")}).join(""),
+      channel: dm.channelId,
+      sender: CONFIG.name,
+      content: content,
+      timestamp: Date.now(),
+      type: "chat",
+      senderKey: CONFIG.fingerprint
+    });
+    var encoded = encoder.encode(plaintext);
+    var encrypted = await crypto.subtle.encrypt({name:"AES-GCM", iv:iv}, dm.key, encoded);
+    var cipherData = new Uint8Array(encrypted.slice(0, encrypted.byteLength - 16));
+    var tag = new Uint8Array(encrypted.slice(encrypted.byteLength - 16));
+    var payload = JSON.stringify({
+      iv: btoa(String.fromCharCode.apply(null, iv)),
+      data: btoa(String.fromCharCode.apply(null, cipherData)),
+      tag: btoa(String.fromCharCode.apply(null, tag))
+    });
+    client.publish("ac/1/" + dm.hash, payload, {qos: 1});
+    // Also store to cloud
+    fetch("https://api.agentchannel.workers.dev/messages", {
+      method: "POST",
+      headers: {"Content-Type": "application/json"},
+      body: JSON.stringify({channel_hash: dm.hash, id: JSON.parse(plaintext).id, ciphertext: payload, timestamp: Date.now()})
+    }).catch(function(){});
+  };
+
   renderMembers();
   loadCloudMembers();
 }
@@ -895,7 +1029,7 @@ function openSettings() {
   var overlay = document.createElement('div');
   overlay.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:9999;display:flex;align-items:center;justify-content:center';
   overlay.onclick = function(e) { if (e.target === overlay) document.body.removeChild(overlay); };
-  overlay.innerHTML = '<div style="background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:24px;width:360px;max-width:90%">' +
+  overlay.innerHTML = '<div style="background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:24px;width:360px;max-width:90%;box-shadow:0 8px 32px rgba(0,0,0,0.5)">' +
     '<h3 style="margin-bottom:16px;font-size:1rem;color:var(--text)">Settings</h3>' +
     '<label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:4px">Display Name</label>' +
     '<input id="settings-name" value="' + (CONFIG.name || '') + '" style="width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:6px;font-size:0.85rem;background:var(--bg-alt);color:var(--text);margin-bottom:16px;outline:none">' +
@@ -906,9 +1040,14 @@ function openSettings() {
     '</div>' +
     '<label style="font-size:0.75rem;color:var(--text-muted);display:block;margin-bottom:4px">Version</label>' +
     '<div style="font-size:0.8rem;color:var(--text-muted);margin-bottom:20px">v' + (CONFIG.version || '?') + '</div>' +
+    '<div style="border-top:1px solid var(--border);padding-top:16px;margin-bottom:16px;font-size:0.7rem;color:var(--text-muted);line-height:1.6">' +
+    '<div style="margin-bottom:4px">&#128274; Messages are end-to-end encrypted (AES-256-GCM)</div>' +
+    '<div style="margin-bottom:4px">&#128273; Your private key never leaves this device</div>' +
+    '<div>&#128206; Fingerprint = your public identity (safe to share)</div>' +
+    '</div>' +
     '<div style="display:flex;gap:8px;justify-content:flex-end">' +
     '<button onclick="this.closest(\'div[style*=fixed]\').remove()" style="padding:8px 16px;border:1px solid var(--border);border-radius:6px;background:var(--bg-alt);color:var(--text);cursor:pointer;font-size:0.8rem">Cancel</button>' +
-    '<button onclick="saveName()" style="padding:8px 16px;border:none;border-radius:6px;background:#00e676;color:#000;cursor:pointer;font-size:0.8rem;font-weight:600">Save</button>' +
+    '<button onclick="saveName()" style="padding:8px 16px;border:none;border-radius:6px;background:#1a1a1a;color:#fff;cursor:pointer;font-size:0.8rem;font-weight:600">Save</button>' +
     '</div></div>';
   document.body.appendChild(overlay);
 }
@@ -938,6 +1077,62 @@ function saveName() {
 }
 window.saveName = saveName;
 
+// ── Input: send message + @autocomplete ──────────────────
+
+function sendMsg() {
+  var input = document.getElementById('msg-input');
+  if (!input || !input.value.trim() || activeChannel === '@me') return;
+  fetch('/api/send', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ channel: activeChannel, message: input.value.trim() })
+  }).then(function() { input.value = ''; }).catch(function(e) { console.error('Send failed:', e); });
+}
+window.sendMsg = sendMsg;
+
+var acSelected = 0;
+function onInputChange(input) {
+  var val = input.value;
+  var atIdx = val.lastIndexOf('@');
+  var ac = document.getElementById('autocomplete');
+  if (atIdx === -1 || atIdx < val.length - 20) { ac.style.display = 'none'; return; }
+  var query = val.slice(atIdx + 1).toLowerCase();
+  if (query.indexOf(' ') !== -1) { ac.style.display = 'none'; return; }
+  var members = [];
+  var cm = window.cloudMembers || {};
+  for (var k in cm) { for (var i = 0; i < cm[k].length; i++) { var m = cm[k][i]; if (members.indexOf(m.name) === -1) members.push(m.name); } }
+  var filtered = members.filter(function(n) { return n.toLowerCase().indexOf(query) === 0 && n !== CONFIG.name; });
+  if (!filtered.length) { ac.style.display = 'none'; return; }
+  acSelected = 0;
+  ac.style.display = 'block';
+  ac.innerHTML = filtered.slice(0, 6).map(function(n, i) {
+    return '<div style="padding:6px 10px;cursor:pointer;border-radius:4px;font-size:0.8rem;color:var(--text)' + (i === 0 ? ';background:var(--bg-alt)' : '') + '" onmousedown="insertMention(\'' + n + '\')">' + n + '</div>';
+  }).join('');
+}
+window.onInputChange = onInputChange;
+
+function insertMention(name) {
+  var input = document.getElementById('msg-input');
+  var val = input.value;
+  input.value = val.slice(0, val.lastIndexOf('@')) + '@' + name + ' ';
+  input.focus();
+  document.getElementById('autocomplete').style.display = 'none';
+}
+window.insertMention = insertMention;
+
+function onInputKey(e) {
+  if (e.key === 'Enter' && document.getElementById('autocomplete').style.display === 'none') { sendMsg(); return; }
+  var ac = document.getElementById('autocomplete');
+  if (ac.style.display === 'none') return;
+  var items = ac.children;
+  if (e.key === 'ArrowDown') { acSelected = Math.min(acSelected + 1, items.length - 1); e.preventDefault(); }
+  if (e.key === 'ArrowUp') { acSelected = Math.max(acSelected - 1, 0); e.preventDefault(); }
+  if (e.key === 'Tab' || e.key === 'Enter') { if (items[acSelected]) { insertMention(items[acSelected].textContent); e.preventDefault(); } }
+  if (e.key === 'Escape') { ac.style.display = 'none'; }
+  for (var i = 0; i < items.length; i++) items[i].style.background = i === acSelected ? 'var(--bg-alt)' : '';
+}
+window.onInputKey = onInputKey;
+
 // Restore saved theme (default: dark)
 var savedTheme = localStorage.getItem('ac-theme') || 'dark';
 document.documentElement.classList.add(savedTheme);

package/ui/index.html

@@ -32,6 +32,13 @@
         <div class="empty">Waiting for messages...</div>
       </div>
     </div>
+    <div style="position:relative">
+      <div id="autocomplete" style="display:none;position:absolute;bottom:100%;left:24px;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:4px;max-height:150px;overflow-y:auto;box-shadow:0 -4px 12px rgba(0,0,0,0.2);z-index:100"></div>
+      <div style="padding:8px 24px;border-top:1px solid var(--border);display:flex;gap:8px">
+        <input type="text" id="msg-input" placeholder="Type a message... (@name to mention)" style="flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:8px;font-size:0.85rem;background:var(--bg);color:var(--text);outline:none" oninput="onInputChange(this)" onkeydown="onInputKey(event)">
+        <button onclick="sendMsg()" style="padding:8px 16px;border:none;border-radius:8px;background:#1a1a1a;color:#fff;font-size:0.85rem;cursor:pointer;font-weight:600">Send</button>
+      </div>
+    </div>
   </div>
   <div class="members" id="members-panel">
     <div class="members__header">Members</div>