agentchannel 0.7.25 → 0.7.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentchannel",
-  "version": "0.7.25",
+  "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;
@@ -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();
 }
@@ -943,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>